[Claude] Fix: models not displaying correctly on the Ask page

extensions/claude/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Claude Changelog
 
+## [Update] -  2024-12-20
+
+- Fix: Models dropdown not displaying all models correctly
+
 ## [Update] - 2024-12-12
 
 - Fix: Remove duplicated "Copy Question" action, use existing with tweaked conditions

extensions/claude/package.json

@@ -9,6 +9,7 @@
     "alextlopez11",
     "FelixII",
     "midnite",
+    "gilberto_jr",
     "ridemountainpig",
     "ridjis"
   ],

extensions/claude/src/ask.tsx

@@ -64,7 +64,7 @@ export default function Ask(props: { conversation?: Conversation }) {
     }
 
     setLoading(false);
-  }, [question.data]);
+  }, [question.data, models.data]);
 
   useEffect(() => {
     if (props.conversation?.id !== conversation.id || conversations.data.length === 0) {

extensions/claude/src/hooks/useModel.tsx

@@ -1,5 +1,5 @@
 import { LocalStorage, showToast, Toast } from "@raycast/api";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState, useTransition } from "react";
 import { Model, ModelHook } from "../type";
 
 export const DEFAULT_MODEL: Model = {
@@ -14,67 +14,70 @@ export const DEFAULT_MODEL: Model = {
   pinned: false,
 };
 
+const option: Model["option"][] = [
+  "claude-3-5-haiku-latest",
+  "claude-3-5-haiku-20241022",
+  "claude-3-5-sonnet-latest",
+  "claude-3-5-sonnet-20241022",
+  "claude-3-5-sonnet-20240620",
+  "claude-3-opus-20240229",
+  "claude-3-sonnet-20240229",
+  "claude-3-haiku-20240307",
+  "claude-2.1",
+  "claude-2.0",
+];
+
+async function getStoredModels(): Promise<Model[]> {
+  const storedModels = await LocalStorage.getItem<string>("models");
+  if (!storedModels) {
+    return [DEFAULT_MODEL];
+  }
+  return [...JSON.parse(storedModels), DEFAULT_MODEL] satisfies Model[];
+}
+
 export function useModel(): ModelHook {
   const [data, setData] = useState<Model[]>([]);
-  const [isLoading, setLoading] = useState<boolean>(false);
-
-  const option: Model["option"][] = [
-    "claude-3-5-haiku-latest",
-    "claude-3-5-haiku-20241022",
-    "claude-3-5-sonnet-latest",
-    "claude-3-5-sonnet-20241022",
-    "claude-3-5-sonnet-20240620",
-    "claude-3-opus-20240229",
-    "claude-3-sonnet-20240229",
-    "claude-3-haiku-20240307",
-    "claude-2.1",
-    "claude-2.0",
-  ];
+  const [isLoading, setLoading] = useState(false);
 
   useEffect(() => {
-    (async () => {
-      setLoading(true);
-      const storedModels = await LocalStorage.getItem<string>("models");
-
-      if (!storedModels) {
-        setData([DEFAULT_MODEL]);
-      } else {
-        setData((previous) => [...previous, ...JSON.parse(storedModels)]);
-      }
-      setLoading(false);
-    })();
+    setLoading(true);
+    getStoredModels()
+      .then(setData)
+      .finally(() => setLoading(false));
   }, []);
 
-  useEffect(() => {
-    LocalStorage.setItem("models", JSON.stringify(data));
-  }, [data]);
-
   const add = useCallback(
     async (model: Model) => {
       const toast = await showToast({
         title: "Saving your model...",
         style: Toast.Style.Animated,
       });
       const newModel: Model = { ...model, created_at: new Date().toISOString() };
-      setData([...data, newModel]);
+      setData((prevData) => {
+        const newData = [...prevData, newModel];
+        LocalStorage.setItem("models", JSON.stringify(newData));
+        return newData;
+      });
       toast.title = "Model saved!";
       toast.style = Toast.Style.Success;
     },
-    [setData, data]
+    [setData]
   );
 
   const update = useCallback(
     async (model: Model) => {
-      setData((prev) => {
-        return prev.map((x) => {
+      setData((prevData) => {
+        const newModels = prevData.map((x) => {
           if (x.id === model.id) {
             return model;
           }
           return x;
         });
+        LocalStorage.setItem("models", JSON.stringify(newModels));
+        return newModels;
       });
     },
-    [setData, data]
+    [setData]
   );
 
   const remove = useCallback(
@@ -83,21 +86,27 @@ export function useModel(): ModelHook {
         title: "Remove your model...",
         style: Toast.Style.Animated,
       });
-      const newModels: Model[] = data.filter((oldModel) => oldModel.id !== model.id);
-      setData(newModels);
+      setData((prevData) => {
+        const newModels = prevData.filter((oldModel) => oldModel.id !== model.id);
+        LocalStorage.setItem("models", JSON.stringify(newModels));
+        return newModels;
+      });
       toast.title = "Model removed!";
       toast.style = Toast.Style.Success;
     },
-    [setData, data]
+    [setData]
   );
 
   const clear = useCallback(async () => {
     const toast = await showToast({
       title: "Clearing your models ...",
       style: Toast.Style.Animated,
     });
-    const newModels: Model[] = data.filter((oldModel) => oldModel.id === DEFAULT_MODEL.id);
-    setData(newModels);
+    setData((prevData) => {
+      const newModels: Model[] = prevData.filter((oldModel) => oldModel.id === DEFAULT_MODEL.id);
+      LocalStorage.setItem("models", JSON.stringify(newModels));
+      return newModels;
+    });
     toast.title = "Models cleared!";
     toast.style = Toast.Style.Success;
   }, [setData]);

extensions/claude/src/views/model/dropdown.tsx

@@ -6,14 +6,7 @@ export const ModelDropdown = (props: ChangeModelProp) => {
   const separateDefaultModel = models.filter((x) => x.id !== "default");
   const defaultModel = models.find((x) => x.id === "default");
   return (
-    <List.Dropdown
-      tooltip="Select Model"
-      storeValue={true}
-      defaultValue={selectedModel}
-      onChange={(id) => {
-        onModelChange(id);
-      }}
-    >
+    <List.Dropdown tooltip="Select Model" storeValue={true} defaultValue={selectedModel} onChange={onModelChange}>
       {defaultModel && <List.Dropdown.Item key={defaultModel.id} title={defaultModel.name} value={defaultModel.id} />}
       <List.Dropdown.Section title="Custom Models">
         {separateDefaultModel.map((model) => (