fix(web): preserve selected language model

packages/web/src/features/chat/components/chatBox/chatBoxToolbar.tsx

@@ -27,7 +27,7 @@ export const ChatBoxToolbar = ({
     isContextSelectorOpen,
     onContextSelectorOpenChanged,
 }: ChatBoxToolbarProps) => {
-    const { selectedLanguageModel, setSelectedLanguageModel } = useSelectedLanguageModel({
+    const { resolvedSelectedLanguageModel, setSelectedLanguageModel } = useSelectedLanguageModel({
         languageModels,
     });
 
@@ -48,7 +48,7 @@ export const ChatBoxToolbar = ({
             <LanguageModelSelector
                 languageModels={languageModels}
                 onSelectedModelChange={setSelectedLanguageModel}
-                selectedModel={selectedLanguageModel}
+                selectedModel={resolvedSelectedLanguageModel}
             />
         </>
     )

packages/web/src/features/chat/components/chatBox/languageModelSelector.tsx

@@ -126,6 +126,12 @@ export const LanguageModelSelector = ({
                                         return (
                                             <CommandItem
                                                 key={getLanguageModelKey(model)}
+                                                value={getLanguageModelKey(model)}
+                                                keywords={[
+                                                    model.displayName ?? "",
+                                                    model.model,
+                                                    model.provider,
+                                                ]}
                                                 onSelect={() => {
                                                     selectModel(model)
                                                 }}

packages/web/src/features/chat/useSelectedLanguageModel.ts

@@ -9,27 +9,71 @@ type Props = {
     languageModels: LanguageModelInfo[];
 }
 
+const getStoredSelectedLanguageModel = (): LanguageModelInfo | undefined => {
+    try {
+        const storedValue = window.localStorage.getItem("selectedLanguageModel");
+        if (!storedValue) {
+            return undefined;
+        }
+
+        const parsedValue = JSON.parse(storedValue);
+        if (
+            typeof parsedValue === "object" &&
+            parsedValue !== null &&
+            typeof parsedValue.provider === "string" &&
+            typeof parsedValue.model === "string" &&
+            typeof parsedValue.displayName === "string"
+        ) {
+            return parsedValue as LanguageModelInfo;
+        }
+
+        return undefined;
+    } catch {
+        return undefined;
+    }
+};
+
 export const useSelectedLanguageModel = ({
     languageModels,
 }: Props) => {
     const fallbackLanguageModel = languageModels.length > 0 ? languageModels[0] : undefined;
     const [selectedLanguageModel, setSelectedLanguageModel] = useLocalStorage<LanguageModelInfo | undefined>(
         "selectedLanguageModel",
-        fallbackLanguageModel,
+        undefined,
         {
             initializeWithValue: false,
         }
     );
 
+    const availableSelectedLanguageModel = selectedLanguageModel && languageModels.find(
+        (model) => getLanguageModelKey(model) === getLanguageModelKey(selectedLanguageModel)
+    );
+
+    const resolvedSelectedLanguageModel = availableSelectedLanguageModel ?? fallbackLanguageModel;
+
     // Handle the case where the selected language model is no longer
     // available. Reset to the fallback language model in this case.
     useEffect(() => {
-        if (!selectedLanguageModel || !languageModels.find(
-            (model) => getLanguageModelKey(model) === getLanguageModelKey(selectedLanguageModel)
-        )) {
-            setSelectedLanguageModel(fallbackLanguageModel);
+        if (languageModels.length === 0) {
+            return;
+        }
+
+        if (selectedLanguageModel && !availableSelectedLanguageModel) {
+            setSelectedLanguageModel(() => {
+                const storedSelectedLanguageModel = getStoredSelectedLanguageModel();
+                const availableStoredSelectedLanguageModel = storedSelectedLanguageModel && languageModels.find(
+                    (model) => getLanguageModelKey(model) === getLanguageModelKey(storedSelectedLanguageModel)
+                );
+
+                if (availableStoredSelectedLanguageModel) {
+                    return availableStoredSelectedLanguageModel;
+                }
+
+                return fallbackLanguageModel;
+            });
         }
     }, [
+        availableSelectedLanguageModel,
         fallbackLanguageModel,
         languageModels,
         selectedLanguageModel,
@@ -38,6 +82,7 @@ export const useSelectedLanguageModel = ({
 
     return {
         selectedLanguageModel,
+        resolvedSelectedLanguageModel,
         setSelectedLanguageModel,
     };
-}
+}