Inline model picker props (#146)

src/components/ModelPicker.tsx

@@ -23,15 +23,14 @@ import { useLanguageModelsByProviders } from "@/hooks/useLanguageModelsByProvide
 import { ChevronDown } from "lucide-react";
 import { LocalModel } from "@/ipc/ipc_types";
 import { useLanguageModelProviders } from "@/hooks/useLanguageModelProviders";
-interface ModelPickerProps {
-  selectedModel: LargeLanguageModel;
-  onModelSelect: (model: LargeLanguageModel) => void;
-}
+import { useSettings } from "@/hooks/useSettings";
+
+export function ModelPicker() {
+  const { settings, updateSettings } = useSettings();
+  const onModelSelect = (model: LargeLanguageModel) => {
+    updateSettings({ selectedModel: model });
+  };
 
-export function ModelPicker({
-  selectedModel,
-  onModelSelect,
-}: ModelPickerProps) {
   const [open, setOpen] = useState(false);
 
   // Cloud models from providers
@@ -97,8 +96,6 @@ export function ModelPicker({
     return selectedModel.name;
   };
 
-  const modelDisplayName = getModelDisplayName();
-
   // Get auto provider models (if any)
   const autoModels =
     !loading && modelsByProviders && modelsByProviders["auto"]
@@ -111,6 +108,12 @@ export function ModelPicker({
   const hasLMStudioModels =
     !lmStudioLoading && !lmStudioError && lmStudioModels.length > 0;
 
+  if (!settings) {
+    return null;
+  }
+  const selectedModel = settings?.selectedModel;
+  const modelDisplayName = getModelDisplayName();
+
   return (
     <DropdownMenu open={open} onOpenChange={setOpen}>
       <DropdownMenuTrigger asChild>

src/components/chat/ChatInput.tsx

@@ -65,7 +65,7 @@ export function ChatInput({ chatId }: { chatId?: number }) {
   const posthog = usePostHog();
   const [inputValue, setInputValue] = useAtom(chatInputValueAtom);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const { settings, updateSettings } = useSettings();
+  const { settings } = useSettings();
   const appId = useAtomValue(selectedAppIdAtom);
   const { refreshVersions } = useVersions(appId);
   const { streamMessage, isStreaming, setIsStreaming, error, setError } =
@@ -341,12 +341,7 @@ export function ChatInput({ chatId }: { chatId?: number }) {
           </div>
           <div className="pl-2 pr-1 flex items-center justify-between">
             <div className="pb-2">
-              <ModelPicker
-                selectedModel={settings.selectedModel}
-                onModelSelect={(model) =>
-                  updateSettings({ selectedModel: model })
-                }
-              />
+              <ModelPicker />
             </div>
             <button
               onClick={() => setShowTokenBar(!showTokenBar)}

src/components/chat/HomeChatInput.tsx

@@ -20,7 +20,7 @@ export function HomeChatInput({
   const posthog = usePostHog();
   const [inputValue, setInputValue] = useAtom(homeChatInputValueAtom);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const { settings, updateSettings } = useSettings();
+  const { settings } = useSettings();
   const { isStreaming } = useStreamChat({
     hasChatId: false,
   }); // eslint-disable-line @typescript-eslint/no-unused-vars
@@ -146,12 +146,7 @@ export function HomeChatInput({
             )}
           </div>
           <div className="px-2 pb-2">
-            <ModelPicker
-              selectedModel={settings.selectedModel}
-              onModelSelect={(model) =>
-                updateSettings({ selectedModel: model })
-              }
-            />
+            <ModelPicker />
           </div>
         </div>
       </div>