From 3ab23d571ffdcd2d0f241a89dce87bd3af622b7c Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Thu, 15 Feb 2024 15:48:45 +0700
Subject: [PATCH] fix: local server blank parameters if there is no thread
 selected (#2028)

* fix: local server blank parameters if there is no thread selected

* fix: show errors only when the selected model is started while starting the server

* fix: show loading progress of selected model only
---
 web/containers/DropdownListSidebar/index.tsx | 14 ++++--
 web/helpers/atoms/Thread.atom.ts             |  4 ++
 web/hooks/useThreads.ts                      |  4 ++
 web/screens/Chat/EngineSetting/index.tsx     | 51 ++++++++------------
 web/screens/Chat/ModelSetting/index.tsx      | 47 +++++++-----------
 web/screens/Chat/Sidebar/index.tsx           | 14 ++++--
 web/screens/Chat/ThreadList/index.tsx        | 19 +++++++-
 web/screens/LocalServer/index.tsx            | 15 +++---
 8 files changed, 91 insertions(+), 77 deletions(-)

diff --git a/web/containers/DropdownListSidebar/index.tsx b/web/containers/DropdownListSidebar/index.tsx
index 2679d6869..75bbe073c 100644
--- a/web/containers/DropdownListSidebar/index.tsx
+++ b/web/containers/DropdownListSidebar/index.tsx
@@ -94,7 +94,7 @@ const DropdownListSidebar = ({
 
   // This is fake loader please fix this when we have realtime percentage when load model
   useEffect(() => {
-    if (stateModel.loading) {
+    if (stateModel.model === selectedModel?.id && stateModel.loading) {
       if (loader === 24) {
         setTimeout(() => {
           setLoader(loader + 1)
@@ -115,7 +115,7 @@ const DropdownListSidebar = ({
     } else {
       setLoader(0)
     }
-  }, [stateModel.loading, loader])
+  }, [stateModel.loading, loader, selectedModel, stateModel.model])
 
   const onValueSelected = useCallback(
     async (modelId: string) => {
@@ -159,12 +159,16 @@ const DropdownListSidebar = ({
     return null
   }
 
+  const selectedModelLoading =
+    stateModel.model === selectedModel?.id && stateModel.loading
+
   return (
     <>
       <div
         className={twMerge(
           'relative w-full overflow-hidden rounded-md',
-          stateModel.loading && 'pointer-events-none bg-blue-200 text-blue-600'
+          stateModel.loading && 'pointer-events-none',
+          selectedModelLoading && 'bg-blue-200 text-blue-600'
         )}
       >
         <Select
@@ -174,7 +178,7 @@ const DropdownListSidebar = ({
         >
           <SelectTrigger className="relative w-full">
             <SelectValue placeholder="Choose model to start">
-              {stateModel.loading && (
+              {selectedModelLoading && (
                 <div
                   className="z-5 absolute left-0 top-0 h-full w-full rounded-md bg-blue-100/80"
                   style={{ width: `${loader}%` }}
@@ -183,7 +187,7 @@ const DropdownListSidebar = ({
               <span
                 className={twMerge(
                   'relative z-20',
-                  stateModel.loading && 'font-medium'
+                  selectedModelLoading && 'font-medium'
                 )}
               >
                 {selectedModel?.name}
diff --git a/web/helpers/atoms/Thread.atom.ts b/web/helpers/atoms/Thread.atom.ts
index cab286bd1..f55541380 100644
--- a/web/helpers/atoms/Thread.atom.ts
+++ b/web/helpers/atoms/Thread.atom.ts
@@ -28,6 +28,10 @@ export const isGeneratingResponseAtom = atom<boolean | undefined>(undefined)
  * Stores all thread states for the current user
  */
 export const threadStatesAtom = atom<Record<string, ThreadState>>({})
+
+// Whether thread data is ready or not
+export const threadDataReadyAtom = atom<boolean>(false)
+
 export const activeThreadStateAtom = atom<ThreadState | undefined>((get) => {
   const threadId = get(activeThreadIdAtom)
   if (!threadId) {
diff --git a/web/hooks/useThreads.ts b/web/hooks/useThreads.ts
index 1ac038b26..74bbb8c91 100644
--- a/web/hooks/useThreads.ts
+++ b/web/hooks/useThreads.ts
@@ -14,6 +14,7 @@ import useSetActiveThread from './useSetActiveThread'
 import { extensionManager } from '@/extension/ExtensionManager'
 import {
   ModelParams,
+  threadDataReadyAtom,
   threadModelParamsAtom,
   threadStatesAtom,
   threadsAtom,
@@ -24,6 +25,7 @@ const useThreads = () => {
   const setThreads = useSetAtom(threadsAtom)
   const setThreadModelRuntimeParams = useSetAtom(threadModelParamsAtom)
   const { setActiveThread } = useSetActiveThread()
+  const setThreadDataReady = useSetAtom(threadDataReadyAtom)
 
   useEffect(() => {
     const getThreads = async () => {
@@ -58,6 +60,7 @@ const useThreads = () => {
       if (localThreads.length > 0) {
         setActiveThread(localThreads[0])
       }
+      setThreadDataReady(true)
     }
 
     getThreads()
@@ -66,6 +69,7 @@ const useThreads = () => {
     setThreadModelRuntimeParams,
     setThreadStates,
     setThreads,
+    setThreadDataReady,
   ])
 }
 
diff --git a/web/screens/Chat/EngineSetting/index.tsx b/web/screens/Chat/EngineSetting/index.tsx
index 2153bcbde..272434471 100644
--- a/web/screens/Chat/EngineSetting/index.tsx
+++ b/web/screens/Chat/EngineSetting/index.tsx
@@ -1,36 +1,25 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useAtomValue } from 'jotai'
-
-import { selectedModelAtom } from '@/containers/DropdownListSidebar'
-
-import { getConfigurationsData } from '@/utils/componentSettings'
-import { toSettingParams } from '@/utils/modelParam'
-
-import SettingComponentBuilder from '../ModelSetting/SettingComponent'
-
-import { getActiveThreadModelParamsAtom } from '@/helpers/atoms/Thread.atom'
-
-const EngineSetting = ({ enabled = true }: { enabled?: boolean }) => {
-  const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
-  const selectedModel = useAtomValue(selectedModelAtom)
-
-  if (!selectedModel || !activeModelParams) return null
-
-  const modelSettingParams = toSettingParams(activeModelParams)
-
-  const componentData = getConfigurationsData(
-    modelSettingParams,
-    selectedModel
-  ).toSorted((a, b) => a.title.localeCompare(b.title))
+import SettingComponentBuilder from '../../Chat/ModelSetting/SettingComponent'
+import { SettingComponentData } from '../ModelSetting/SettingComponent'
 
+const EngineSetting = ({
+  componentData,
+  enabled = true,
+}: {
+  componentData: SettingComponentData[]
+  enabled?: boolean
+}) => {
   return (
-    <div className="flex flex-col">
-      <SettingComponentBuilder
-        componentData={componentData}
-        enabled={enabled}
-        selector={(e) => e.name !== 'prompt_template'}
-      />
-    </div>
+    <>
+      {componentData.filter((e) => e.name !== 'prompt_template').length && (
+        <div className="flex flex-col">
+          <SettingComponentBuilder
+            componentData={componentData}
+            enabled={enabled}
+            selector={(e) => e.name !== 'prompt_template'}
+          />
+        </div>
+      )}
+    </>
   )
 }
 
diff --git a/web/screens/Chat/ModelSetting/index.tsx b/web/screens/Chat/ModelSetting/index.tsx
index ea95363eb..51aa6f637 100644
--- a/web/screens/Chat/ModelSetting/index.tsx
+++ b/web/screens/Chat/ModelSetting/index.tsx
@@ -1,37 +1,26 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react'
 
-import { useAtomValue } from 'jotai'
-
-import { selectedModelAtom } from '@/containers/DropdownListSidebar'
-
-import { getConfigurationsData } from '@/utils/componentSettings'
-import { toRuntimeParams } from '@/utils/modelParam'
-
-import SettingComponentBuilder from './SettingComponent'
-
-import { getActiveThreadModelParamsAtom } from '@/helpers/atoms/Thread.atom'
-
-const ModelSetting = () => {
-  const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
-  const selectedModel = useAtomValue(selectedModelAtom)
-
-  if (!selectedModel || !activeModelParams) return null
-
-  const modelRuntimeParams = toRuntimeParams(activeModelParams)
-
-  const componentData = getConfigurationsData(
-    modelRuntimeParams,
-    selectedModel
-  ).toSorted((a, b) => a.title.localeCompare(b.title))
+import SettingComponentBuilder, {
+  SettingComponentData,
+} from './SettingComponent'
 
+const ModelSetting = ({
+  componentData,
+}: {
+  componentData: SettingComponentData[]
+}) => {
   return (
-    <div className="flex flex-col">
-      <SettingComponentBuilder
-        componentData={componentData}
-        selector={(e) => e.name !== 'prompt_template'}
-      />
-    </div>
+    <>
+      {componentData.filter((e) => e.name !== 'prompt_template').length && (
+        <div className="flex flex-col">
+          <SettingComponentBuilder
+            componentData={componentData}
+            selector={(e) => e.name !== 'prompt_template'}
+          />
+        </div>
+      )}
+    </>
   )
 }
 
diff --git a/web/screens/Chat/Sidebar/index.tsx b/web/screens/Chat/Sidebar/index.tsx
index b2ab6dab5..f9e30aec8 100644
--- a/web/screens/Chat/Sidebar/index.tsx
+++ b/web/screens/Chat/Sidebar/index.tsx
@@ -59,8 +59,14 @@ const Sidebar: React.FC = () => {
       activeThread?.assistants[0]?.tools[0]?.settings) ??
       {}
   )
-  const componentDataEngineSetting = getConfigurationsData(modelEngineParams)
-  const componentDataRuntimeSetting = getConfigurationsData(modelRuntimeParams)
+  const componentDataEngineSetting = getConfigurationsData(
+    modelEngineParams,
+    selectedModel
+  )
+  const componentDataRuntimeSetting = getConfigurationsData(
+    modelRuntimeParams,
+    selectedModel
+  )
 
   return (
     <div
@@ -319,7 +325,7 @@ const Sidebar: React.FC = () => {
               <div className="mt-6">
                 <CardSidebar title="Inference Parameters" asChild>
                   <div className="px-2 py-4">
-                    <ModelSetting />
+                    <ModelSetting componentData={componentDataRuntimeSetting} />
                   </div>
                 </CardSidebar>
               </div>
@@ -344,7 +350,7 @@ const Sidebar: React.FC = () => {
               <div className="my-4">
                 <CardSidebar title="Engine Parameters" asChild>
                   <div className="px-2 py-4">
-                    <EngineSetting />
+                    <EngineSetting componentData={componentDataEngineSetting} />
                   </div>
                 </CardSidebar>
               </div>
diff --git a/web/screens/Chat/ThreadList/index.tsx b/web/screens/Chat/ThreadList/index.tsx
index 2ad9a28c4..9aad179eb 100644
--- a/web/screens/Chat/ThreadList/index.tsx
+++ b/web/screens/Chat/ThreadList/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useEffect } from 'react'
 
 import { Thread } from '@janhq/core/'
 
@@ -8,6 +8,7 @@ import { GalleryHorizontalEndIcon, MoreVerticalIcon } from 'lucide-react'
 
 import { twMerge } from 'tailwind-merge'
 
+import { useCreateNewThread } from '@/hooks/useCreateNewThread'
 import useSetActiveThread from '@/hooks/useSetActiveThread'
 
 import { displayDate } from '@/utils/datetime'
@@ -16,8 +17,10 @@ import CleanThreadModal from '../CleanThreadModal'
 
 import DeleteThreadModal from '../DeleteThreadModal'
 
+import { assistantsAtom } from '@/helpers/atoms/Assistant.atom'
 import {
   getActiveThreadIdAtom,
+  threadDataReadyAtom,
   threadStatesAtom,
   threadsAtom,
 } from '@/helpers/atoms/Thread.atom'
@@ -27,6 +30,9 @@ export default function ThreadList() {
   const threads = useAtomValue(threadsAtom)
   const activeThreadId = useAtomValue(getActiveThreadIdAtom)
   const { setActiveThread } = useSetActiveThread()
+  const assistants = useAtomValue(assistantsAtom)
+  const threadDataReady = useAtomValue(threadDataReadyAtom)
+  const { requestCreateNewThread } = useCreateNewThread()
 
   const onThreadClick = useCallback(
     (thread: Thread) => {
@@ -35,6 +41,17 @@ export default function ThreadList() {
     [setActiveThread]
   )
 
+  /**
+   * Auto create thread
+   * This will create a new thread if there are assistants available
+   * and there are no threads available
+   */
+  useEffect(() => {
+    if (threadDataReady && assistants.length > 0 && threads.length === 0) {
+      requestCreateNewThread(assistants[0])
+    }
+  }, [assistants, threads, threadDataReady, requestCreateNewThread])
+
   return (
     <div className="px-3 py-4">
       {threads.length === 0 ? (
diff --git a/web/screens/LocalServer/index.tsx b/web/screens/LocalServer/index.tsx
index 3ed1cc610..b0ef802a6 100644
--- a/web/screens/LocalServer/index.tsx
+++ b/web/screens/LocalServer/index.tsx
@@ -52,7 +52,6 @@ import SettingComponentBuilder from '../Chat/ModelSetting/SettingComponent'
 import { showRightSideBarAtom } from '../Chat/Sidebar'
 
 import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
-import { getActiveThreadModelParamsAtom } from '@/helpers/atoms/Thread.atom'
 
 const corsEnabledAtom = atom(true)
 const verboseEnabledAtom = atom(true)
@@ -63,16 +62,15 @@ const LocalServerScreen = () => {
   const [errorRangePort, setErrorRangePort] = useState(false)
   const [serverEnabled, setServerEnabled] = useAtom(serverEnabledAtom)
   const showRightSideBar = useAtomValue(showRightSideBarAtom)
-  const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
   const setModalTroubleShooting = useSetAtom(modalTroubleShootingAtom)
 
-  const modelEngineParams = toSettingParams(activeModelParams)
-  const componentDataEngineSetting = getConfigurationsData(modelEngineParams)
-
   const { openServerLog, clearServerLog } = useLogs()
   const { startModel, stateModel } = useActiveModel()
   const selectedModel = useAtomValue(selectedModelAtom)
 
+  const modelEngineParams = toSettingParams(selectedModel?.settings)
+  const componentDataEngineSetting = getConfigurationsData(modelEngineParams)
+
   const [isCorsEnabled, setIsCorsEnabled] = useAtom(corsEnabledAtom)
   const [isVerboseEnabled, setIsVerboseEnabled] = useAtom(verboseEnabledAtom)
   const [host, setHost] = useAtom(hostAtom)
@@ -396,7 +394,7 @@ const LocalServerScreen = () => {
             </p>
           </div>
           <DropdownListSidebar strictedThread={false} />
-          {loadModelError && (
+          {loadModelError && serverEnabled && (
             <div className="mt-3 flex space-x-2 text-xs">
               <AlertTriangleIcon size={16} className="text-danger" />
               <span>
@@ -431,7 +429,10 @@ const LocalServerScreen = () => {
             <div className="my-4">
               <CardSidebar title="Engine Parameters" asChild>
                 <div className="px-2 py-4">
-                  <EngineSetting enabled={!serverEnabled} />
+                  <EngineSetting
+                    enabled={!serverEnabled}
+                    componentData={componentDataEngineSetting}
+                  />
                 </div>
               </CardSidebar>
             </div>