Skip to content

Commit 75627c4

Browse files
gooishingooishin
committed
fix: ensure default system prompt is set and stored in localStorage (#331)
1 parent cbb0b8b commit 75627c4

File tree

1 file changed

+125
-110
lines changed
  • usecases/ai/rag-toolkit/edge-ui/src/app/(main)/settings

1 file changed

+125
-110
lines changed

‎usecases/ai/rag-toolkit/edge-ui/src/app/(main)/settings/page.tsx‎

Lines changed: 125 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
'use client';
55

6-
import { Stack, Typography, Accordion, AccordionSummary, AccordionDetails, TextField, Button } from "@mui/material";
6+
import { Stack, Typography, Accordion, AccordionSummary, AccordionDetails, TextField, Button, Tooltip } from "@mui/material";
77
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
88
import React, { useState, useEffect } from "react";
99

@@ -13,121 +13,136 @@ const sections = [
1313
];
1414

1515
export default function ChatPage(): React.JSX.Element {
16-
const [expanded, setExpanded] = useState<string | false>('System Prompts');
17-
const [systemPrompt, setSystemPrompt] = useState<string>("You are a helpful assistant. Always reply in English.");
18-
const [tools, setTools] = useState<string>('');
19-
const [isChanged, setIsChanged] = useState<boolean>(false);
20-
const [isToolsChanged, setIsToolsChanged] = useState<boolean>(false);
21-
const [isToolsValidJson, setIsToolsValidJson] = useState<boolean>(true);
16+
const [expanded, setExpanded] = useState<string | false>('System Prompts');
17+
const [systemPrompt, setSystemPrompt] = useState<string>("You are a helpful assistant. Always reply in English.");
18+
const [tools, setTools] = useState<string>('');
19+
const [isChanged, setIsChanged] = useState<boolean>(false);
20+
const [isToolsChanged, setIsToolsChanged] = useState<boolean>(false);
21+
const [isToolsValidJson, setIsToolsValidJson] = useState<boolean>(true);
2222

23-
useEffect(() => {
24-
const storedPrompt = localStorage.getItem('systemPrompt');
25-
if (storedPrompt) {
26-
setSystemPrompt(storedPrompt);
27-
}
28-
}, []);
29-
30-
useEffect(() => {
31-
const storedTools = localStorage.getItem('functionTools');
32-
if (storedTools) {
33-
setTools(storedTools);
34-
}
35-
}, []);
23+
useEffect(() => {
24+
const storedPrompt = localStorage.getItem('systemPrompt');
25+
if (storedPrompt) {
26+
setSystemPrompt(storedPrompt);
27+
} else {
28+
setSystemPrompt(systemPrompt);
29+
handleSavePrompt();
30+
}
31+
}, []);
3632

37-
const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean): void => {
38-
setExpanded(isExpanded ? panel : false);
39-
};
33+
useEffect(() => {
34+
const storedTools = localStorage.getItem('functionTools');
35+
if (storedTools) {
36+
setTools(storedTools);
37+
}
38+
}, []);
4039

41-
const handleSystemPromptChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
42-
const newPrompt = e.target.value;
43-
setSystemPrompt(newPrompt);
44-
setIsChanged(true);
40+
const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean): void => {
41+
setExpanded(isExpanded ? panel : false);
4542
};
4643

47-
const handleToolsChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
48-
const newTools = e.target.value;
49-
setTools(newTools);
50-
setIsToolsChanged(true);
51-
try {
52-
JSON.parse(newTools);
53-
setIsToolsValidJson(true);
54-
} catch {
55-
setIsToolsValidJson(false);
56-
}
57-
};
44+
const handleSystemPromptChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
45+
const newPrompt = e.target.value;
46+
setSystemPrompt(newPrompt);
47+
setIsChanged(true);
48+
};
5849

59-
const handleSavePrompt = () => {
60-
localStorage.setItem('systemPrompt', systemPrompt);
61-
setIsChanged(false);
62-
};
50+
const handleToolsChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
51+
const newTools = e.target.value;
52+
setTools(newTools);
53+
setIsToolsChanged(true);
54+
try {
55+
JSON.parse(newTools);
56+
setIsToolsValidJson(true);
57+
} catch {
58+
setIsToolsValidJson(false);
59+
}
60+
};
6361

64-
const handleSaveTools = () => {
65-
localStorage.setItem('functionTools', tools);
66-
setIsToolsChanged(false);
67-
};
62+
const handleSavePrompt = () => {
63+
localStorage.setItem('systemPrompt', systemPrompt);
64+
setIsChanged(false);
65+
};
6866

69-
return (
70-
<Stack spacing={2} sx={{ flex: "1 1 auto", mt: 3, p: 2, bgcolor: 'background.paper', borderRadius: 1 }}>
71-
<Typography variant="h4" gutterBottom>Settings</Typography>
72-
{sections.map((section, index) => (
73-
<Accordion
74-
key={index}
75-
expanded={expanded === section.title}
76-
onChange={handleChange(section.title)}
77-
sx={{ boxShadow: 3 }}
67+
const handleSaveTools = () => {
68+
localStorage.setItem('functionTools', tools);
69+
setIsToolsChanged(false);
70+
};
71+
72+
return (
73+
<Stack spacing={2} sx={{ flex: '1 1 auto', mt: 3, p: 2, bgcolor: 'background.paper', borderRadius: 1 }}>
74+
<Typography variant="h4" gutterBottom>
75+
Settings
76+
</Typography>
77+
{sections.map((section, index) => (
78+
<Accordion
79+
key={index}
80+
expanded={expanded === section.title}
81+
onChange={handleChange(section.title)}
82+
sx={{ boxShadow: 3 }}
83+
>
84+
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
85+
<Typography variant="h6">{section.title}</Typography>
86+
</AccordionSummary>
87+
<AccordionDetails>
88+
{section.title === 'System Prompts' && (
89+
<Stack spacing={2} sx={{ width: '100%' }}>
90+
<Tooltip
91+
title={
92+
systemPrompt.trim() === '' ? (
93+
<Typography variant="body2">Cannot leave the system prompt empty</Typography>
94+
) : ('')
95+
}
96+
arrow open={systemPrompt.trim() === ''}
97+
>
98+
<TextField
99+
label="System Prompt"
100+
multiline
101+
rows={8}
102+
variant="outlined"
103+
fullWidth
104+
value={systemPrompt}
105+
onChange={handleSystemPromptChange}
106+
error={systemPrompt.trim() === ''}
107+
/>
108+
</Tooltip>
109+
<Button
110+
variant="contained"
111+
color="primary"
112+
onClick={handleSavePrompt}
113+
disabled={!isChanged || systemPrompt.trim() === ''}
114+
>
115+
Save
116+
</Button>
117+
</Stack>
118+
)}
119+
{section.title === 'Tools' && (
120+
<Stack spacing={2} sx={{ width: '100%' }}>
121+
<TextField
122+
label="Tools"
123+
multiline
124+
rows={8}
125+
variant="outlined"
126+
fullWidth
127+
value={tools}
128+
onChange={handleToolsChange}
129+
disabled
130+
error={!isToolsValidJson}
131+
helperText={!isToolsValidJson ? 'Invalid JSON' : ''}
132+
/>
133+
<Button
134+
variant="contained"
135+
color="primary"
136+
onClick={handleSaveTools}
137+
disabled={!isToolsChanged || !isToolsValidJson}
78138
>
79-
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
80-
<Typography variant="h6">{section.title}</Typography>
81-
</AccordionSummary>
82-
<AccordionDetails>
83-
{section.title === "System Prompts" && (
84-
<Stack spacing={2} sx={{ width: '100%' }}>
85-
<TextField
86-
label="System Prompt"
87-
multiline
88-
rows={8}
89-
variant="outlined"
90-
fullWidth
91-
value={systemPrompt}
92-
onChange={handleSystemPromptChange}
93-
/>
94-
<Button
95-
variant="contained"
96-
color="primary"
97-
onClick={handleSavePrompt}
98-
disabled={!isChanged}
99-
>
100-
Save
101-
</Button>
102-
</Stack>
103-
)}
104-
{section.title === "Tools" && (
105-
<Stack spacing={2} sx={{ width: '100%' }}>
106-
<TextField
107-
label="Tools"
108-
multiline
109-
rows={8}
110-
variant="outlined"
111-
fullWidth
112-
value={tools}
113-
onChange={handleToolsChange}
114-
disabled
115-
error={!isToolsValidJson}
116-
helperText={!isToolsValidJson ? "Invalid JSON" : ""}
117-
/>
118-
<Button
119-
variant="contained"
120-
color="primary"
121-
onClick={handleSaveTools}
122-
disabled={!isToolsChanged || !isToolsValidJson}
123-
>
124-
Save
125-
</Button>
126-
</Stack>
127-
)}
128-
</AccordionDetails>
129-
</Accordion>
130-
))}
131-
</Stack>
132-
)
133-
}
139+
Save
140+
</Button>
141+
</Stack>
142+
)}
143+
</AccordionDetails>
144+
</Accordion>
145+
))}
146+
</Stack>
147+
);
148+
}

0 commit comments

Comments
 (0)