feat: users should be able to switch models mid-thread (#1226)

## Problem
Right now users have to start a new thread to use another model which causes a lot of confusion to our users.

fixes #1201

web/containers/DropdownListSidebar/index.tsx

@@ -72,69 +72,55 @@ export default function DropdownListSidebar() {
   if (!activeThread) {
     return null
   }
-  const finishInit = threadStates[activeThread.id].isFinishInit ?? true
 
   return (
-    <Tooltip>
-      <TooltipTrigger className="w-full">
-        <Select
-          disabled={finishInit}
-          value={selected?.id}
-          onValueChange={finishInit ? undefined : onValueSelected}
-        >
-          <SelectTrigger className="w-full">
-            <SelectValue placeholder="Choose model to start">
-              {downloadedModels.filter((x) => x.id === selected?.id)[0]?.name}
-            </SelectValue>
-          </SelectTrigger>
-          <SelectContent className="right-5 block w-full min-w-[300px] pr-0">
-            <div className="flex w-full items-center space-x-2 px-4 py-2">
-              <MonitorIcon size={20} className="text-muted-foreground" />
-              <span>Local</span>
+    <>
+      <Select value={selected?.id} onValueChange={onValueSelected}>
+        <SelectTrigger className="w-full">
+          <SelectValue placeholder="Choose model to start">
+            {downloadedModels.filter((x) => x.id === selected?.id)[0]?.name}
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent className="right-5 block w-full min-w-[300px] pr-0">
+          <div className="flex w-full items-center space-x-2 px-4 py-2">
+            <MonitorIcon size={20} className="text-muted-foreground" />
+            <span>Local</span>
+          </div>
+          <div className="border-b border-border" />
+          {downloadedModels.length === 0 ? (
+            <div className="px-4 py-2">
+              <p>{`Oops, you don't have a model yet.`}</p>
             </div>
-            <div className="border-b border-border" />
-            {downloadedModels.length === 0 ? (
-              <div className="px-4 py-2">
-                <p>{`Oops, you don't have a model yet.`}</p>
-              </div>
-            ) : (
-              <SelectGroup>
-                {downloadedModels.map((x, i) => (
-                  <SelectItem
-                    key={i}
-                    value={x.id}
-                    className={twMerge(x.id === selected?.id && 'bg-secondary')}
-                  >
-                    <div className="flex w-full justify-between">
-                      <span className="line-clamp-1 block">{x.name}</span>
-                      <span className="font-bold text-muted-foreground">
-                        {toGigabytes(x.metadata.size)}
-                      </span>
-                    </div>
-                  </SelectItem>
-                ))}
-              </SelectGroup>
-            )}
-            <div className="border-b border-border" />
-            <div className="w-full px-4 py-2">
-              <Button
-                block
-                className="bg-blue-100 font-bold text-blue-600 hover:bg-blue-100 hover:text-blue-600"
-                onClick={() => setMainViewState(MainViewState.Hub)}
-              >
-                Explore The Hub
-              </Button>
-            </div>
-          </SelectContent>
-        </Select>
-      </TooltipTrigger>
-
-      {finishInit && (
-        <TooltipContent sideOffset={10}>
-          <span>Start a new thread to change the model</span>
-          <TooltipArrow />
-        </TooltipContent>
-      )}
+          ) : (
+            <SelectGroup>
+              {downloadedModels.map((x, i) => (
+                <SelectItem
+                  key={i}
+                  value={x.id}
+                  className={twMerge(x.id === selected?.id && 'bg-secondary')}
+                >
+                  <div className="flex w-full justify-between">
+                    <span className="line-clamp-1 block">{x.name}</span>
+                    <span className="font-bold text-muted-foreground">
+                      {toGigabytes(x.metadata.size)}
+                    </span>
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          )}
+          <div className="border-b border-border" />
+          <div className="w-full px-4 py-2">
+            <Button
+              block
+              className="bg-blue-100 font-bold text-blue-600 hover:bg-blue-100 hover:text-blue-600"
+              onClick={() => setMainViewState(MainViewState.Hub)}
+            >
+              Explore The Hub
+            </Button>
+          </div>
+        </SelectContent>
+      </Select>
 
       {selected?.engine === InferenceEngine.openai && (
         <div className="mt-4">
@@ -154,6 +140,6 @@ export default function DropdownListSidebar() {
           />
         </div>
       )}
-    </Tooltip>
+    </>
   )
 }

web/hooks/useSendChatMessage.ts

@@ -138,7 +138,10 @@ export default function useSendChatMessage() {
     const activeThreadState = threadStates[activeThread.id]
 
     // if the thread is not initialized, we need to initialize it first
-    if (!activeThreadState.isFinishInit) {
+    if (
+      !activeThreadState.isFinishInit ||
+      activeThread.assistants[0].model.id !== selectedModel?.id
+    ) {
       if (!selectedModel) {
         toaster({ title: 'Please select a model' })
         return