From 95225c3637fba6a862b90e0893e73a2b2b7b47ab Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Wed, 17 Jan 2024 10:46:57 +0700
Subject: [PATCH] fix stop model first then start model when change on right
 panel setting

---
 web/containers/DropdownListSidebar/index.tsx | 15 ++++++++++-----
 web/containers/Loader/ModelStart.tsx         |  2 +-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/containers/DropdownListSidebar/index.tsx b/web/containers/DropdownListSidebar/index.tsx
index 5f736aae7..d2eed48eb 100644
--- a/web/containers/DropdownListSidebar/index.tsx
+++ b/web/containers/DropdownListSidebar/index.tsx
@@ -50,7 +50,7 @@ export default function DropdownListSidebar() {
   const threadStates = useAtomValue(threadStatesAtom)
   const [selectedModel, setSelectedModel] = useAtom(selectedModelAtom)
   const setThreadModelParams = useSetAtom(setThreadModelParamsAtom)
-  const { activeModel, startModel, stateModel } = useActiveModel()
+  const { activeModel, startModel, stateModel, stopModel } = useActiveModel()
   const [serverEnabled, setServerEnabled] = useAtom(serverEnabledAtom)
 
   const { setMainViewState } = useMainViewState()
@@ -142,12 +142,14 @@ export default function DropdownListSidebar() {
   }, [stateModel.loading, loader])
 
   const onValueSelected = useCallback(
-    (modelId: string) => {
+    async (modelId: string) => {
       const model = downloadedModels.find((m) => m.id === modelId)
       setSelectedModel(model)
 
+      await stopModel()
+
       if (activeModel?.id !== modelId) {
-        startModel(modelId)
+        await startModel(modelId)
       }
 
       if (serverEnabled) {
@@ -168,6 +170,7 @@ export default function DropdownListSidebar() {
       downloadedModels,
       serverEnabled,
       activeThreadId,
+      activeModel,
       setSelectedModel,
       setThreadModelParams,
     ]
@@ -184,7 +187,7 @@ export default function DropdownListSidebar() {
     <div
       className={twMerge(
         'relative w-full overflow-hidden rounded-md',
-        stateModel.loading && 'bg-blue-200 text-blue-600'
+        stateModel.loading && 'pointer-events-none bg-blue-200 text-blue-600'
       )}
     >
       <Select value={selected?.id} onValueChange={onValueSelected}>
@@ -244,7 +247,9 @@ export default function DropdownListSidebar() {
                     value={x.id}
                     className={twMerge(x.id === selected?.id && 'bg-secondary')}
                     onPointerUp={() => {
-                      startModel(x.id)
+                      if (x.id === selected?.id) {
+                        startModel(x.id)
+                      }
                     }}
                   >
                     <div className="flex w-full justify-between">
diff --git a/web/containers/Loader/ModelStart.tsx b/web/containers/Loader/ModelStart.tsx
index ed0495407..01d7afb19 100644
--- a/web/containers/Loader/ModelStart.tsx
+++ b/web/containers/Loader/ModelStart.tsx
@@ -8,7 +8,7 @@ export default function ModelStart() {
 
   // This is fake loader please fix this when we have realtime percentage when load model
   useEffect(() => {
-    if (stateModel.loading) {
+    if (stateModel.loading && stateModel.state === 'start') {
       if (loader === 24) {
         setTimeout(() => {
           setLoader(loader + 1)