From f97fdaed305bbf371b99d92b724e9eacd2d4f114 Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Thu, 4 Jan 2024 10:45:56 +0700
Subject: [PATCH] chore: stop model accordingly on settings changes

---
 .../Layout/TopBar/CommandListDownloadedModel/index.tsx |  2 +-
 web/containers/Slider/index.tsx                        |  4 ++++
 web/hooks/useActiveModel.ts                            | 10 ++++++----
 web/screens/Chat/index.tsx                             |  9 +--------
 web/screens/Settings/Models/Row.tsx                    |  4 ++--
 web/screens/SystemMonitor/index.tsx                    |  2 +-
 6 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/web/containers/Layout/TopBar/CommandListDownloadedModel/index.tsx b/web/containers/Layout/TopBar/CommandListDownloadedModel/index.tsx
index 976fbf279..c9ccfdfbb 100644
--- a/web/containers/Layout/TopBar/CommandListDownloadedModel/index.tsx
+++ b/web/containers/Layout/TopBar/CommandListDownloadedModel/index.tsx
@@ -26,7 +26,7 @@ export default function CommandListDownloadedModel() {
 
   const onModelActionClick = (modelId: string) => {
     if (activeModel && activeModel.id === modelId) {
-      stopModel(modelId)
+      stopModel()
     } else {
       startModel(modelId)
     }
diff --git a/web/containers/Slider/index.tsx b/web/containers/Slider/index.tsx
index 621a22559..65a4e1ba1 100644
--- a/web/containers/Slider/index.tsx
+++ b/web/containers/Slider/index.tsx
@@ -13,6 +13,7 @@ import { useAtomValue, useSetAtom } from 'jotai'
 
 import { InfoIcon } from 'lucide-react'
 
+import { useActiveModel } from '@/hooks/useActiveModel'
 import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
 import { getConfigurationsData } from '@/utils/componentSettings'
@@ -54,10 +55,13 @@ const SliderRightPanel: React.FC<Props> = ({
 
   const setEngineParamsUpdate = useSetAtom(engineParamsUpdateAtom)
 
+  const { stopModel } = useActiveModel()
+
   const onValueChanged = (e: number[]) => {
     if (!threadId) return
     if (engineParams.some((x) => x.name.includes(name))) {
       setEngineParamsUpdate(true)
+      stopModel()
     } else {
       setEngineParamsUpdate(false)
     }
diff --git a/web/hooks/useActiveModel.ts b/web/hooks/useActiveModel.ts
index 5ce8fa00f..6b54d4ce1 100644
--- a/web/hooks/useActiveModel.ts
+++ b/web/hooks/useActiveModel.ts
@@ -53,10 +53,12 @@ export function useActiveModel() {
     events.emit(EventName.OnModelInit, model)
   }
 
-  const stopModel = async (modelId: string) => {
-    const model = downloadedModels.find((e) => e.id === modelId)
-    setStateModel({ state: 'stop', loading: true, model: modelId })
-    events.emit(EventName.OnModelStop, model)
+  const stopModel = async () => {
+    if (activeModel) {
+      setActiveModel(undefined)
+      setStateModel({ state: 'stop', loading: true, model: activeModel.id })
+      events.emit(EventName.OnModelStop, activeModel)
+    }
   }
 
   return { activeModel, startModel, stopModel, stateModel }
diff --git a/web/screens/Chat/index.tsx b/web/screens/Chat/index.tsx
index ced51073d..283440530 100644
--- a/web/screens/Chat/index.tsx
+++ b/web/screens/Chat/index.tsx
@@ -1,11 +1,4 @@
-import {
-  ChangeEvent,
-  Fragment,
-  KeyboardEvent,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
+import { ChangeEvent, Fragment, KeyboardEvent, useEffect, useRef } from 'react'
 
 import { EventName, MessageStatus, events } from '@janhq/core'
 import { Button, Textarea } from '@janhq/uikit'
diff --git a/web/screens/Settings/Models/Row.tsx b/web/screens/Settings/Models/Row.tsx
index c1c89d7ab..917f4f4b8 100644
--- a/web/screens/Settings/Models/Row.tsx
+++ b/web/screens/Settings/Models/Row.tsx
@@ -39,7 +39,7 @@ export default function RowModel(props: RowModelProps) {
 
   const onModelActionClick = (modelId: string) => {
     if (activeModel && activeModel.id === modelId) {
-      stopModel(modelId)
+      stopModel()
     } else {
       startModel(modelId)
     }
@@ -134,7 +134,7 @@ export default function RowModel(props: RowModelProps) {
               className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary"
               onClick={() => {
                 setTimeout(async () => {
-                  await stopModel(props.data.id)
+                  await stopModel()
                   deleteModel(props.data)
                 }, 500)
                 setMore(false)
diff --git a/web/screens/SystemMonitor/index.tsx b/web/screens/SystemMonitor/index.tsx
index a621c611f..675d40eec 100644
--- a/web/screens/SystemMonitor/index.tsx
+++ b/web/screens/SystemMonitor/index.tsx
@@ -101,7 +101,7 @@ export default function SystemMonitorScreen() {
                           }
                           className="w-16"
                           loading={stateModel.loading}
-                          onClick={() => stopModel(activeModel.id)}
+                          onClick={() => stopModel()}
                         >
                           Stop
                         </Button>