Merge pull request #451 from reorproject/settings-fixes

make settings dialog and join text gen settings to llm

Author: samlhuillier

electron/main/electron-store/storeConfig.ts

@@ -25,20 +25,15 @@ export type EmbeddingModelConfig = EmbeddingModelWithRepo | EmbeddingModelWithLo
 export interface EmbeddingModelWithRepo {
   type: 'repo'
   repoName: string
+  description?: string
+  readableName?: string
 }
 
 export interface EmbeddingModelWithLocalPath {
   type: 'local'
   localPath: string
-}
-
-export type Tab = {
-  id: string // Unique ID for the tab, useful for operations
-  path: string // Path to the content open in the tab
-  title: string // Title of the tab
-  lastAccessed: boolean
-  // timeOpened: Date; // Timestamp to preserve order
-  // isDirty: boolean; // Flag to indicate unsaved changes
+  description?: string
+  readableName?: string
 }
 
 export interface StoreSchema {
@@ -65,7 +60,6 @@ export interface StoreSchema {
   isSBCompact: boolean
   spellCheck: string
   EditorFlexCenter: boolean
-  OpenTabs: Tab[]
   showDocumentStats: boolean
 }
 
@@ -87,6 +81,5 @@ export enum StoreKeys {
   IsSBCompact = 'isSBCompact',
   SpellCheck = 'spellCheck',
   EditorFlexCenter = 'editorFlexCenter',
-  OpenTabs = 'OpenTabs',
   showDocumentStats = 'showDocumentStats',
 }

electron/main/vector-database/embeddings.ts

@@ -15,15 +15,36 @@ import { splitDirectoryPathIntoBaseAndRepo } from '../filesystem/filesystem'
 import DownloadModelFilesFromHFRepo from './downloadModelsFromHF'
 import { DBEntry } from './schema'
 
-export const defaultEmbeddingModelRepos = {
-  'Xenova/UAE-Large-V1': { type: 'repo', repoName: 'Xenova/UAE-Large-V1' },
-  'Xenova/bge-base-en-v1.5': {
+export const defaultEmbeddingModelRepos: Record<string, EmbeddingModelConfig> = {
+  'Xenova/UAE-Large-V1': {
     type: 'repo',
-    repoName: 'Xenova/bge-base-en-v1.5',
+    repoName: 'Xenova/UAE-Large-V1',
+    readableName: 'UAE-Large-V1',
+    description: 'Recommended for English content',
   },
   'Xenova/bge-small-en-v1.5': {
     type: 'repo',
     repoName: 'Xenova/bge-small-en-v1.5',
+    readableName: 'bge-small-en-v1.5',
+    description: 'Recommended for low-power devices',
+  },
+  'Xenova/multilingual-e5-large': {
+    type: 'repo',
+    repoName: 'Xenova/multilingual-e5-large',
+    readableName: 'multilingual-e5-large',
+    description: 'Recommended for non-English content',
+  },
+  'Xenova/jina-embeddings-v2-base-zh': {
+    type: 'repo',
+    repoName: 'Xenova/jina-embeddings-v2-base-zh',
+    readableName: 'jina-embeddings-v2-base-zh',
+    description: 'Recommended for Chinese content',
+  },
+  'Xenova/jina-embeddings-v2-base-de': {
+    type: 'repo',
+    repoName: 'Xenova/jina-embeddings-v2-base-de',
+    readableName: 'jina-embeddings-v2-base-de',
+    description: 'Recommended for German content',
   },
 }
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "reor-project",
-  "version": "0.2.21",
+  "version": "0.2.23",
   "productName": "Reor",
   "main": "dist-electron/main/index.js",
   "description": "An AI note-taking app that runs models locally.",
@@ -51,11 +51,13 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@sentry/electron": "^5.3.0",
     "@tailwindcss/typography": "^0.5.10",

package.json

@@ -33,7 +33,10 @@ const PromptEditor: React.FC<{
   return (
     <div className="w-[32rem] text-foreground">
       <h3 className="text-foreground">Edit System Prompt</h3>
-      <p className="text-muted-foreground">Customize the system prompt for your AI assistant.</p>
+      <p className="text-muted-foreground">
+        Customize the system prompt for your AI assistant. Use <code>{'{TODAY}'}</code> to feed the model today&apos;s
+        date.
+      </p>
       <div className="grid gap-6 py-4">
         <div className="flex items-start gap-4">
           <Textarea

src/components/Chat/ChatConfigComponents/PromptEditor.tsx

@@ -3,7 +3,6 @@ import { PiPaperPlaneRight } from 'react-icons/pi'
 import { FiSettings } from 'react-icons/fi'
 import { LLMConfig } from 'electron/main/electron-store/storeConfig'
 import { AgentConfig, ToolDefinition, DatabaseSearchFilters } from '../../lib/llm/types'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Button } from '@/components/ui/button'
 import DbSearchFilters from './ChatConfigComponents/DBSearchFilters'
 import PromptEditor from './ChatConfigComponents/PromptEditor'
@@ -24,6 +23,7 @@ import exampleAgents from './ChatConfigComponents/exampleAgents'
 import { allAvailableToolDefinitions } from '@/lib/llm/tools/tool-definitions'
 import ToolSelector from './ChatConfigComponents/ToolSelector'
 import SuggestionCard from '../ui/suggestion-card'
+import LLMSelectOrButton from '../Settings/LLMSettings/LLMSelectOrButton'
 
 interface StartChatProps {
   defaultModelName: string
@@ -36,9 +36,9 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
   const [userTextFieldInput, setUserTextFieldInput] = useState<string>('')
   const [agentConfig, setAgentConfig] = useState<AgentConfig>()
   const [promptSuggestions] = useState([
-    "What's the latest update on my project?",
+    'Generate a list of all the thoughts I have written on the topic of AGI',
     'Summarize my recent notes on machine learning',
-    'Create a to-do list for today based on my calendar',
+    'Based on what I wrote last week, which tasks should I focus on this week?',
   ])
 
   useEffect(() => {
@@ -71,10 +71,6 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
     handleNewChatMessage(userTextFieldInput, { ...agentConfig })
   }
 
-  const handleLLMChange = (value: string) => {
-    setSelectedLLM(value)
-  }
-
   const handleToolsChange = (tools: ToolDefinition[]) => {
     setAgentConfig((prevConfig) => {
       if (!prevConfig) throw new Error('Agent config must be initialized before setting tools')
@@ -114,9 +110,10 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
         <div className="flex w-full justify-center">
           <img src="icon.png" className="size-16" alt="ReorImage" />
         </div>
-        <h1 className="mb-10 text-[28px] text-foreground">
-          Welcome to your AI-powered assistant! Start a conversation with your second brain!
-        </h1>
+        <h1 className="mb-0 text-[28px] text-foreground">Welcome to your AI second brain.</h1>
+        <p className="mb-10 mt-1 text-muted-foreground">
+          Start a chat below. You can provide tools for the LLM to use and customize the system prompt below.{' '}
+        </p>
         <div className="flex w-full">
           <div className="mr-4">
             <ToolSelector
@@ -144,18 +141,12 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
               <div className="mx-auto h-px w-[96%] bg-background/20" />
               <div className="flex h-10 flex-col items-center justify-between gap-2  py-2 md:flex-row md:gap-4">
                 <div className="flex flex-col items-center justify-between rounded-md border-0 py-2 md:flex-row">
-                  <Select value={selectedLLM} onValueChange={handleLLMChange}>
-                    <SelectTrigger className="m-2 w-32 border border-solid border-muted-foreground bg-transparent">
-                      <SelectValue placeholder="Select LLM" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {llmConfigs.map((llm) => (
-                        <SelectItem key={llm.modelName} value={llm.modelName}>
-                          {llm.modelName}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+                  <LLMSelectOrButton
+                    llmConfigs={llmConfigs}
+                    selectedLLM={selectedLLM}
+                    setSelectedLLM={setSelectedLLM}
+                    setLLMConfigs={setLLMConfigs}
+                  />
                 </div>
                 <div className="flex items-center">
                   <Button

src/components/Chat/StartChat.tsx

@@ -115,7 +115,17 @@ const ChatComponent: React.FC = () => {
         if (error instanceof Error && error.name === 'AI_APICallError' && error.message.includes('Bad Request')) {
           if (agentConfig && agentConfig?.toolDefinitions.length > 0 && outputChat) {
             toast.info(
-              'Disabling tools as this model does not support them. If you want to use tools, please select a different model. If you want to retrieve from your knowledge base, select "make initial search" option.',
+              <div>
+                This model does not support tool calling. To use tool calling, please download a model from this page:{' '}
+                <a href="https://ollama.com/search?c=tools" target="_blank" rel="noopener noreferrer">
+                  https://ollama.com/search?c=tools
+                </a>{' '}
+                or use a cloud LLM like GPT-4o or Claude.
+              </div>,
+              {
+                autoClose: false,
+                closeOnClick: false,
+              },
             )
             const agentWithoutTools = { ...agentConfig, toolDefinitions: [] }
             outputChat.toolDefinitions = []

src/components/Chat/index.tsx

@@ -36,7 +36,7 @@ const ReorModal: React.FC<ModalProps> = ({
 
   const modalContent = (
     <div
-      className={`fixed inset-0 z-[9999] flex h-screen w-screen items-center justify-center bg-black/40 ${tailwindStylesOnBackground}`}
+      className={`fixed inset-0 flex h-screen w-screen items-center justify-center bg-black/40 ${tailwindStylesOnBackground}`}
     >
       <div
         ref={modalRef}

src/components/Common/Modal.tsx

@@ -34,8 +34,8 @@ const AnalyticsSettings: React.FC<AnalyticsSettingsProps> = () => {
     <div className="w-full rounded bg-dark-gray-c-three pb-7 ">
       <h2 className="mb-0 text-2xl font-semibold text-white">Analytics</h2>{' '}
       <p className="mb-2 mt-5 text-sm text-gray-200">
-        Reor tracks anonymous usage data to help improve the app. We never share this personal data. This is solely to
-        track which features are popular. You can disable this at any time:
+        Reor tracks anonymous usage data to help us understand how the app is used and which features are popular. You
+        can disable this at any time:
       </p>
       <Switch
         checked={isAnalyticsEnabled}