chore: stop model accordingly on settings changes

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)
     }

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)
     }

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 }

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'

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)

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>