move prompt editor to main settings of chat

reorproject · Sep 30, 2024 · 37851a3 · 37851a3
1 parent 91ad318
commit 37851a3
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 46 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -90,6 +90,7 @@
     "katex": "^0.16.10",
     "langchain": "^0.1.5",
     "lit": "^3.0.0",
+    "lodash": "^4.17.21",
     "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.435.0",
     "marked": "^12.0.1",
@@ -129,6 +130,7 @@
     "@electron/notarize": "2.3.2",
     "@playwright/test": "^1.37.1",
     "@types/jest": "^29.5.11",
+    "@types/lodash": "^4.17.9",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@types/react-window": "^1.8.8",

diff --git a/src/components/Chat/ChatConfigComponents/PromptEditor.tsx b/src/components/Chat/ChatConfigComponents/PromptEditor.tsx
@@ -1,31 +1,52 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
+import { debounce } from 'lodash'
 import { PromptTemplate } from '../types'
-import { DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog'
 import { Label } from '@/components/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Textarea } from '@/components/ui/textarea'
-import { Button } from '@/components/ui/button'
 
 const PromptEditor: React.FC<{
   promptTemplate: PromptTemplate
   onSave: (newPromptTemplate: PromptTemplate) => void
 }> = ({ promptTemplate, onSave }) => {
   const [editedPrompt, setEditedPrompt] = useState<PromptTemplate>(promptTemplate)
 
-  const handleSave = () => {
-    onSave(editedPrompt)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedSave = useCallback(
+    debounce((newPromptTemplate: PromptTemplate) => {
+      onSave(newPromptTemplate)
+    }, 500),
+    [onSave],
+  )
+
+  useEffect(() => {
+    debouncedSave(editedPrompt)
+  }, [editedPrompt, debouncedSave])
+
+  const updateRole = (index: number, newRole: 'system' | 'user') => {
+    setEditedPrompt((prevPrompt) => {
+      const updatedPrompt = [...prevPrompt]
+      updatedPrompt[index] = { ...updatedPrompt[index], role: newRole }
+      return updatedPrompt
+    })
+  }
+
+  const updateContent = (index: number, newContent: string) => {
+    setEditedPrompt((prevPrompt) => {
+      const updatedPrompt = [...prevPrompt]
+      updatedPrompt[index] = { ...updatedPrompt[index], content: newContent }
+      return updatedPrompt
+    })
   }
 
   return (
-    <DialogContent className="w-full max-w-4xl bg-background text-foreground">
-      <DialogHeader>
-        <DialogTitle className="text-foreground">Edit Prompt Template</DialogTitle>
-        <DialogDescription className="text-foreground">
-          Customize the prompt template for your AI assistant. Use the variables {`{QUERY}`} and {`{CONTEXT}`} to
-          reference the user&apos;s query and the context searched (if you toggle the &quot;make initial search&quot;
-          option in settings).
-        </DialogDescription>
-      </DialogHeader>
+    <div className="w-full max-w-4xl bg-background text-foreground">
+      <h3 className="text-foreground">Edit Prompt Template</h3>
+      <p className="text-muted-foreground">
+        Customize the prompt template for your AI assistant. Use the variables {`{QUERY}`} and {`{CONTEXT}`} to
+        reference the user&apos;s query and the context searched (if you toggle the &quot;make initial search&quot;
+        option in settings).
+      </p>
       <div className="grid gap-6 py-4">
         {editedPrompt.map((prompt, index) => (
           // eslint-disable-next-line react/no-array-index-key
@@ -34,14 +55,7 @@ const PromptEditor: React.FC<{
               <Label htmlFor={`role-${index}`} className="w-20 text-foreground">
                 Role
               </Label>
-              <Select
-                value={prompt.role}
-                onValueChange={(value) =>
-                  setEditedPrompt(
-                    editedPrompt.map((p, i) => (i === index ? { ...p, role: value as 'system' | 'user' } : p)),
-                  )
-                }
-              >
+              <Select value={prompt.role} onValueChange={(value: 'system' | 'user') => updateRole(index, value)}>
                 <SelectTrigger className="w-full border-input bg-background text-foreground">
                   <SelectValue placeholder="Select role" />
                 </SelectTrigger>
@@ -58,21 +72,14 @@ const PromptEditor: React.FC<{
               <Textarea
                 id={`content-${index}`}
                 value={prompt.content}
-                onChange={(e) =>
-                  setEditedPrompt(editedPrompt.map((p, i) => (i === index ? { ...p, content: e.target.value } : p)))
-                }
-                className="h-64 flex-1 border border-solid border-input bg-background text-muted-foreground"
+                onChange={(e) => updateContent(index, e.target.value)}
+                className="h-64 flex-1 border border-solid border-input bg-background text-sm text-muted-foreground"
               />
             </div>
           </div>
         ))}
       </div>
-      <DialogFooter>
-        <Button type="submit" onClick={handleSave} className="bg-primary text-primary-foreground hover:bg-primary/90">
-          Done
-        </Button>
-      </DialogFooter>
-    </DialogContent>
+    </div>
   )
 }
 

diff --git a/src/components/Chat/ChatConfigComponents/exampleAgents.ts b/src/components/Chat/ChatConfigComponents/exampleAgents.ts
@@ -61,11 +61,6 @@ const reasoningAgentPromptTemplate: PromptTemplate = [
 const exampleAgents: AgentConfig[] = [
   {
     files: [],
-    dbSearchFilters: {
-      limit: 15,
-      minDate: undefined,
-      maxDate: undefined,
-    },
     name: 'Default',
     toolDefinitions: [searchToolDefinition, createNoteToolDefinition],
     promptTemplate: defaultAgentPromptTemplate,

diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
@@ -8,7 +8,6 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Card, CardDescription } from '../ui/card'
 import { allAvailableToolDefinitions } from './tools'
 import { Button } from '@/components/ui/button'
-import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
 import { Switch } from '@/components/ui/switch'
 import { Label } from '@/components/ui/label'
 import DbSearchFilters from './ChatConfigComponents/DBSearchFilters'
@@ -89,7 +88,7 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
   }
 
   return (
-    <div className="relative flex w-full flex-col items-center">
+    <div className="relative flex w-full flex-col items-center overflow-y-auto">
       <div className="relative flex w-full flex-col text-center lg:top-10 lg:max-w-2xl">
         <div className="flex w-full justify-center">
           <img src="icon.png" style={{ width: '64px', height: '64px' }} alt="ReorImage" />
@@ -145,7 +144,13 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
 
           <div className="mx-auto w-[96%] rounded-b border border-solid border-border bg-background px-4 py-2">
             <div className="space-y-4">
-              <Dialog>
+              <PromptEditor
+                promptTemplate={agentConfig.promptTemplate}
+                onSave={(newPromptTemplate) => {
+                  setAgentConfig((prevConfig) => ({ ...prevConfig, promptTemplate: newPromptTemplate }))
+                }}
+              />
+              {/* <Dialog>
                 <DialogTrigger asChild>
                   <Button>Edit Prompt</Button>
                 </DialogTrigger>
@@ -157,7 +162,7 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
                     }}
                   />
                 </DialogContent>
-              </Dialog>
+              </Dialog> */}
 
               <ToolSelector
                 allTools={allAvailableToolDefinitions}

diff --git a/src/components/Chat/tools.ts b/src/components/Chat/tools.ts
@@ -15,7 +15,7 @@ export const searchToolDefinition: ToolDefinition = {
     {
       name: 'limit',
       type: 'number',
-      defaultValue: 10,
+      defaultValue: 20,
       description: 'The number of results to return',
     },
   ],

diff --git a/src/components/Common/MarkdownRenderer.tsx b/src/components/Common/MarkdownRenderer.tsx
@@ -8,7 +8,10 @@ interface MarkdownRendererProps {
 
 const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content }) => {
   return (
-    <ReactMarkdown className="overflow-hidden whitespace-normal break-words" rehypePlugins={[rehypeRaw]}>
+    <ReactMarkdown
+      className="overflow-hidden whitespace-normal break-words text-muted-foreground"
+      rehypePlugins={[rehypeRaw]}
+    >
       {content}
     </ReactMarkdown>
   )

diff --git a/src/components/Settings/LLMSettings/modals/NewOllamaModel.tsx b/src/components/Settings/LLMSettings/modals/NewOllamaModel.tsx
@@ -90,9 +90,9 @@ const NewOllamaModelModal: React.FC<NewOllamaModelModalProps> = ({ isOpen, onClo
           className=" mt-1 box-border block w-full rounded-md border border-gray-300 px-3 py-2 transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none"
           value={modelNameBeingInputted}
           onChange={(e) => setModelNameBeingInputted(e.target.value)}
-          placeholder="mistral"
+          placeholder="llama3.2"
         />
-        <p className="my-2 text-xs italic text-white"> We recommended either mistral, llama3, or phi3.</p>
+        <p className="my-2 text-xs italic text-white"> We recommended either nemotron-mini, llama3.2, or qwen2.5.</p>
 
         <div className="flex justify-end pb-2">
           <Button