Merge pull request #446 from Bhavyajain21/feat/btn-to-add-llm

Add btn to add and refresh llm

Author: joseplayero

package-lock.json

@@ -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
@@ -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')
@@ -145,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

@@ -0,0 +1,78 @@
+import React, { useState } from 'react'
+import { FiRefreshCw } from 'react-icons/fi'
+import { LLMConfig } from 'electron/main/electron-store/storeConfig'
+import { Button } from '@/components/ui/button'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import SettingsModal, { SettingsTab } from '../Settings'
+
+interface LLMSelectOrButtonProps {
+  llmConfigs: Array<{ modelName: string }>
+  selectedLLM: string
+  setSelectedLLM: (value: string) => void
+  setLLMConfigs: React.Dispatch<React.SetStateAction<LLMConfig[]>>
+}
+
+const LLMSelectOrButton: React.FC<LLMSelectOrButtonProps> = ({
+  llmConfigs,
+  selectedLLM,
+  setSelectedLLM,
+  setLLMConfigs,
+}) => {
+  const handleLLMChange = (value: string) => {
+    setSelectedLLM(value)
+  }
+
+  const [isSettingsModalOpen, setSettingsModalOpen] = useState(false)
+  const [activeTab, setActiveTab] = useState<SettingsTab>(SettingsTab.GeneralSettingsTab)
+
+  const openModalWithTab = (tab: SettingsTab) => {
+    setActiveTab(tab)
+    setSettingsModalOpen(true)
+  }
+
+  const closeModal = () => {
+    setSettingsModalOpen(false)
+  }
+
+  const openLLMSettings = () => {
+    openModalWithTab(SettingsTab.LLMSettingsTab)
+  }
+
+  const refreshLLMConfigs = async () => {
+    try {
+      const LLMConfigs = await window.llm.getLLMConfigs()
+      setLLMConfigs(LLMConfigs)
+    } catch (error) {
+      console.error('Failed to refresh LLM configs:', error)
+    }
+  }
+
+  return (
+    <div className="text-left">
+      <div className="flex items-center">
+        {llmConfigs.length === 0 ? (
+          <Button className="bg-transparent text-primary hover:bg-slate-700" onClick={openLLMSettings}>
+            Attach LLM
+          </Button>
+        ) : (
+          <Select value={selectedLLM} onValueChange={(value) => handleLLMChange(value)}>
+            <SelectTrigger className="w-32 border border-solid border-muted-foreground">
+              <SelectValue placeholder="Select LLM" />
+            </SelectTrigger>
+            <SelectContent>
+              {llmConfigs.map((llm) => (
+                <SelectItem key={llm.modelName} value={llm.modelName}>
+                  {llm.modelName}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+        <FiRefreshCw onClick={refreshLLMConfigs} className="ml-1 cursor-pointer text-xs text-gray-400" />
+        <SettingsModal isOpen={isSettingsModalOpen} onClose={closeModal} initialTab={activeTab} />
+      </div>
+    </div>
+  )
+}
+
+export default LLMSelectOrButton

src/components/Settings/LLMSettings/LLMSelectOrButton.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import ReorModal from '../Common/Modal'
 
@@ -11,19 +11,28 @@ import TextGenerationSettings from './TextGenerationSettings'
 interface ModalProps {
   isOpen: boolean
   onClose: () => void
+  initialTab?: SettingsTab
 }
 
-enum SettingsTab {
+export enum SettingsTab {
   GeneralSettingsTab = 'generalSettings',
   LLMSettingsTab = 'llmSettings',
   EmbeddingModelTab = 'embeddingModel',
   TextGenerationTab = 'textGeneration',
   AnalyticsTab = 'analytics',
 }
 
-const SettingsModal: React.FC<ModalProps> = ({ isOpen, onClose: onCloseFromParent }) => {
+const SettingsModal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose: onCloseFromParent,
+  initialTab = SettingsTab.GeneralSettingsTab,
+}) => {
   const [willNeedToReIndex, setWillNeedToReIndex] = useState(false)
-  const [activeTab, setActiveTab] = useState(SettingsTab.GeneralSettingsTab)
+  const [activeTab, setActiveTab] = useState<SettingsTab>(initialTab)
+
+  useEffect(() => {
+    setActiveTab(initialTab)
+  }, [initialTab])
 
   const handleSave = () => {
     if (willNeedToReIndex) {