Add canvas interface (#461)

components/custom/model-selector.tsx

@@ -3,7 +3,8 @@
 import { Check, ChevronDown } from 'lucide-react';
 import { startTransition, useMemo, useOptimistic, useState } from 'react';
 
-import { saveModel } from '@/app/(chat)/actions';
+import { models } from '@/ai/models';
+import { saveModelId } from '@/app/(chat)/actions';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -11,22 +12,21 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { type Model, models } from '@/lib/model';
 import { cn } from '@/lib/utils';
 
 export function ModelSelector({
-  selectedModelName,
+  selectedModelId,
   className,
 }: {
-  selectedModelName: Model['name'];
+  selectedModelId: string;
 } & React.ComponentProps<typeof Button>) {
   const [open, setOpen] = useState(false);
-  const [optimisticModelName, setOptimisticModelName] =
-    useOptimistic(selectedModelName);
+  const [optimisticModelId, setOptimisticModelId] =
+    useOptimistic(selectedModelId);
 
   const selectModel = useMemo(
-    () => models.find((model) => model.name === optimisticModelName),
-    [optimisticModelName]
+    () => models.find((model) => model.id === optimisticModelId),
+    [optimisticModelId]
   );
 
   return (
@@ -46,17 +46,17 @@ export function ModelSelector({
       <DropdownMenuContent align="start" className="min-w-[300px]">
         {models.map((model) => (
           <DropdownMenuItem
-            key={model.name}
+            key={model.id}
             onSelect={() => {
               setOpen(false);
 
               startTransition(() => {
-                setOptimisticModelName(model.name);
-                saveModel(model.name);
+                setOptimisticModelId(model.id);
+                saveModelId(model.id);
               });
             }}
             className="gap-4 group/item"
-            data-active={model.name === optimisticModelName}
+            data-active={model.id === optimisticModelId}
           >
             <div className="flex flex-col gap-1 items-start">
               {model.label}