add helper buttons for rag instructioning

Author: sutigit

src/client/components/Prompt/PromptEditor.tsx

@@ -41,7 +41,7 @@ export const PromptEditor = ({ prompt, ragIndices, type, chatInstanceId, setEdit
   const [name, setName] = useState<string>(prompt?.name ?? '')
   const [systemMessage, setSystemMessage] = useState<string>(prompt?.systemMessage ?? '')
   const [ragSystemMessage, setRagSystemMessage] = useState<string>(() =>
-    prompt ? prompt.messages?.find((m) => m.role === 'system')?.content || '' : DEFAULT_RAG_SYSTEM_MESSAGE,
+    prompt ? prompt.messages?.find((m) => m.role === 'system')?.content || '' : t(DEFAULT_RAG_SYSTEM_MESSAGE),
   )
   const [hidden, setHidden] = useState<boolean>(prompt?.hidden ?? false)
   const [mandatory, setMandatory] = useState<boolean>(prompt?.mandatory ?? false)
@@ -194,19 +194,18 @@ export const PromptEditor = ({ prompt, ragIndices, type, chatInstanceId, setEdit
           </FormControl>
           <Collapse in={!!ragIndexId}>
             <OpenableTextfield
+              value={ragSystemMessage}
+              onChange={(e) => setRagSystemMessage(e.target.value)}
+              onAppend={(text) => setRagSystemMessage(prev => prev + (prev.trim().length ? ' ' : '') + text)}
               slotProps={{
-                htmlInput: {
-                  'data-testid': 'rag-system-message-input',
-                },
+                htmlInput: { 'data-testid': 'rag-system-message-input' },
               }}
               label={t('prompt:ragSystemMessage')}
-              value={ragSystemMessage}
-              onChange={(e) => setRagSystemMessage(e.target.value)}
               fullWidth
               margin="normal"
               multiline
-              minRows={3}
-              maxRows={18}
+              minRows={2}
+              maxRows={12}
             />
           </Collapse>
           <TextField

src/client/components/common/OpenableTextfield.tsx

@@ -1,14 +1,32 @@
-import { Accordion, AccordionDetails, AccordionSummary, Button, TextField, TextFieldProps } from '@mui/material'
+import { Accordion, AccordionDetails, AccordionSummary, Box, TextField, TextFieldProps } from '@mui/material'
+import { DEFAULT_RAG_SYSTEM_MESSAGE, ENFORCE_RAG_SYSTEM_MESSAGE, UNKNOWN_RAG_SYSTEM_MESSAGE } from '@config'
+import { GrayButton } from '../ChatV2/general/Buttons'
+import AddIcon from '@mui/icons-material/Add';
+import { t } from 'i18next';
+
+type OpenableTextfieldProps = TextFieldProps & {
+  onAppend: (text: string) => void
+}
+
+const OpenableTextfield = ({ onAppend, ...props }: OpenableTextfieldProps) => {
 
-const OpenableTextfield = (props: TextFieldProps) => {
   return (
-    <Accordion>
-      <AccordionSummary>{props.label}</AccordionSummary>
-      <AccordionDetails>
-        <TextField {...props} />
-      </AccordionDetails>
-    </Accordion>
+    <Box sx={{ mb: 2 }}>
+      <TextField sx={{ mb: 0 }} {...props} fullWidth />
+      <Box sx={{ display: 'flex', gap: 1, mt: 1, width: '100%' }}>
+        <GrayButton size="small" endIcon={<AddIcon />} onClick={() => onAppend(t(DEFAULT_RAG_SYSTEM_MESSAGE))}>
+          {t("prompt:defaultRagLabel")}
+        </GrayButton>
+        <GrayButton size="small" endIcon={<AddIcon />} onClick={() => onAppend(t(ENFORCE_RAG_SYSTEM_MESSAGE))}>
+          {t("prompt:enforceRagLabel")}
+        </GrayButton>
+        <GrayButton size="small" endIcon={<AddIcon />} onClick={() => onAppend(t(UNKNOWN_RAG_SYSTEM_MESSAGE))}>
+          {t("prompt:unknownRagLabel")}
+        </GrayButton>
+      </Box>
+    </Box>
   )
 }
 
-export default OpenableTextfield
+
+export default OpenableTextfield

src/client/locales/en.json

@@ -309,13 +309,19 @@
     "createdPrompt": "Prompt \"{{name}}\" created",
     "updatedPrompt": "Prompt \"{{name}}\" updated",
     "modelFreeToChoose": "Model free to choose",
-    "systemMessage": "Instructions",
+    "systemMessage": "Instructions for the language model",
     "hidePrompt": "Hide prompt text from students",
     "editMandatoryPrompt": "Make prompt mandatory",
     "noSourceMaterials": "No source materials",
     "ragSystemMessage": "Source material instructions",
     "basicInformation": "Basic information",
-    "context": "Context"
+    "context": "Context",
+    "defaultRagLabel": "use sources",
+    "enforceRagLabel": "must use sources",
+    "unknownRagLabel": "say if not found",
+    "defaultRagMessage": "You now have source materials available. Use them when the user asks a question.",
+    "enforceRagMessage": "You must use the sources to answer. Do not invent information.",
+    "unknownRagMessage": "If the answer is not in the sources, say so."
   },
   "tooltip": {
     "copied": "Copied!"

src/client/locales/fi.json

@@ -311,13 +311,19 @@
     "createdPrompt": "Alustus \"{{name}}\" luotu",
     "updatedPrompt": "Alustus \"{{name}}\" muokattu",
     "modelFreeToChoose": "Malli vapaasti valittavissa",
-    "systemMessage": "Ohjeistus",
+    "systemMessage": "Kielimallin ohjeistus",
     "hidePrompt": "Piilota alustuksen sisältö opiskelijoilta",
     "editMandatoryPrompt": "Tee alustuksesta pakollinen",
     "noSourceMaterials": "Ei lähdemateriaaleja",
     "ragSystemMessage": "Lähdemateriaaliohjeistus",
     "basicInformation": "Perustiedot",
-    "context": "Konteksti"
+    "context": "Konteksti",
+    "defaultRagLabel": "käytä lähteitä",
+    "enforceRagLabel": "pakko käyttää lähteitä",
+    "unknownRagLabel": "kerro jos ei löydy",
+    "defaultRagMessage": "Sinulla on nyt lähdemateriaalit käytössä. Hyödynnä niitä, kun käyttäjä kysyy jotain.",
+    "enforceRagMessage": "Sinun täytyy käyttää lähteitä vastauksessa. Älä keksi tietoa.",
+    "unknownRagMessage": "Jos vastausta ei löydy lähteistä, kerro se."
   },
   "tooltip": {
     "copied": "Kopioitu!"

src/client/locales/sv.json

@@ -291,13 +291,19 @@
     "createdPrompt": "Prompt \"{{name}}\" skapad",
     "updatedPrompt": "Prompt \"{{name}}\" uppdaterad",
     "modelFreeToChoose": "Modell fri att välja",
-    "systemMessage": "Instruktioner",
+    "systemMessage": "Instruktioner för språkmodellen",
     "hidePrompt": "Dölj prompttext för studenter",
     "editMandatoryPrompt": "Gör prompt obligatorisk",
     "noSourceMaterials": "Inga källmaterial",
     "ragSystemMessage": "Instruktioner för källmaterial",
     "basicInformation": "Grundläggande information",
-    "context": "Sammanhang"
+    "context": "Sammanhang",
+    "defaultRagLabel": "använd källor",
+    "enforceRagLabel": "måste använda källor",
+    "unknownRagLabel": "säg om inte hittas",
+    "defaultRagMessage": "Du har nu källmaterial tillgängligt. Använd det när användaren ställer en fråga.",
+    "enforceRagMessage": "Du måste använda källorna för att svara. Hitta inte på information.",
+    "unknownRagMessage": "Om svaret inte finns i källorna, säg det."
   },
   "tooltip": {
     "copied": "Kopierad!"

src/config.ts

@@ -28,7 +28,10 @@ Put math in $$ ... $$ for LaTeX rendering.
 Wrap code in triple backticks with the correct language tag (js, ts, py, etc.) so syntax highlighting and rendering work.
 `
 
-export const DEFAULT_RAG_SYSTEM_MESSAGE = `Use the document_search tool to find information in the provided source materials to answer the user's question.`
+// EXAMPLE: with localize translation -> t(DEFAULT_RAG_SYSTEM_MESSAGE)
+export const DEFAULT_RAG_SYSTEM_MESSAGE = 'prompt:defaultRagMessage'
+export const ENFORCE_RAG_SYSTEM_MESSAGE = 'prompt:enforceRagMessage'
+export const UNKNOWN_RAG_SYSTEM_MESSAGE = 'prompt:unknownRagMessage'
 
 /**
  * name: the acual model name, which is shown to users, configures the model to be used and is also the azure deployment name.