Merge pull request #420 from reorproject/start-chat-interface-improve…

…ments Start chat interface improvements
reorproject · Oct 1, 2024 · 23d48ff · 23d48ff
2 parents 9df6e75 + 37851a3
commit 23d48ff
Show file tree

Hide file tree

Showing 10 changed files with 255 additions and 102 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",
@@ -121,13 +122,15 @@
     "use-debounce": "^10.0.1",
     "uuid": "^10.0.0",
     "uuidv4": "^6.2.13",
+    "vaul": "^1.0.0",
     "vectordb": "0.4.10",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@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/DBSearchFilters.tsx b/src/components/Chat/ChatConfigComponents/DBSearchFilters.tsx
@@ -1,16 +1,38 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import { Slider } from '@/components/ui/slider'
 import DateRangePicker from '../../ui/date-picker'
 import { DatabaseSearchFilters } from '../types'
 
 interface DbSearchFiltersProps {
   dbSearchFilters: DatabaseSearchFilters
-  onSliderChange: (value: number[]) => void
-  onDateChange: (from: Date | undefined, to: Date | undefined) => void
+  onFiltersChange: (newFilters: DatabaseSearchFilters) => void
 }
 
-const DbSearchFilters: React.FC<DbSearchFiltersProps> = ({ dbSearchFilters, onSliderChange, onDateChange }) => {
+const DbSearchFilters: React.FC<DbSearchFiltersProps> = ({ dbSearchFilters, onFiltersChange }) => {
   const inverseLogScale = (value: number) => Math.round(Math.log(value + 1) * 25)
+  const logScale = (value: number) => Math.round(Math.exp(value / 25) - 1)
+
+  const handleSliderChange = useCallback(
+    (value: number[]) => {
+      const scaledValue = logScale(value[0])
+      onFiltersChange({
+        ...dbSearchFilters,
+        limit: scaledValue,
+      })
+    },
+    [dbSearchFilters, onFiltersChange],
+  )
+
+  const handleDateChange = useCallback(
+    (from: Date | undefined, to: Date | undefined) => {
+      onFiltersChange({
+        ...dbSearchFilters,
+        minDate: from,
+        maxDate: to,
+      })
+    },
+    [dbSearchFilters, onFiltersChange],
+  )
 
   return (
     <div className="space-y-2 rounded-md border border-foreground p-3">
@@ -20,7 +42,7 @@ const DbSearchFilters: React.FC<DbSearchFiltersProps> = ({ dbSearchFilters, onSl
           min={0}
           max={100}
           step={1}
-          onValueChange={onSliderChange}
+          onValueChange={handleSliderChange}
         />
         <div className="flex flex-col">
           <span className="">{dbSearchFilters.limit} </span>
@@ -29,7 +51,7 @@ const DbSearchFilters: React.FC<DbSearchFiltersProps> = ({ dbSearchFilters, onSl
       </div>
       <div className="flex flex-col items-start">
         <span className="mb-1 text-sm text-muted-foreground">Filter search by date (last modified):</span>
-        <DateRangePicker from={dbSearchFilters.minDate} to={dbSearchFilters.maxDate} onDateChange={onDateChange} />
+        <DateRangePicker from={dbSearchFilters.minDate} to={dbSearchFilters.maxDate} onDateChange={handleDateChange} />
       </div>
     </div>
   )

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,