fixed /chat

2026-02-23 08:00:53 +00:00
parent 3e2c8090d5
commit d9b69c8209
10 changed files with 194 additions and 26 deletions
@@ -0,0 +1,116 @@
+import { useState, useEffect, useMemo } from 'react';
+import { toast } from 'sonner';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useSettings } from 'state/useSettings';
+import { useVisiblePiModels, getProviderDisplayName, type ModelOption } from 'state/useModels';
+
+function buildGroups(models: ModelOption[]) {
+  const groups: Record<string, { id: string; name: string }[]> = {};
+  for (const m of models) {
+    const provider = m.provider ?? 'Other';
+    if (!groups[provider]) groups[provider] = [];
+    groups[provider]!.push({ id: m.id, name: m.name });
+  }
+  return Object.entries(groups)
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([provider, models]) => ({ provider, models: models.sort((a, b) => a.name.localeCompare(b.name)) }));
+}
+
+const NONE = '__none__';
+
+export const AIModels = () => {
+  const { settings, saveSettings } = useSettings();
+  const piModels = useVisiblePiModels();
+  const [isSaving, setIsSaving] = useState(false);
+
+  const [chatModel, setChatModel] = useState<string | null>(settings.chat.defaultModel);
+  const [projectModel, setProjectModel] = useState<string | null>(settings.chat.defaultProjectModel);
+  const [taskModel, setTaskModel] = useState<string | null>(settings.tasks.defaultModel);
+
+  useEffect(() => {
+    setChatModel(settings.chat.defaultModel);
+    setProjectModel(settings.chat.defaultProjectModel);
+    setTaskModel(settings.tasks.defaultModel);
+  }, [settings]);
+
+  const groups = useMemo(() => buildGroups(piModels), [piModels]);
+
+  const handleSave = async () => {
+    if (isSaving) return;
+    setIsSaving(true);
+    try {
+      await saveSettings({
+        ...settings,
+        chat: { ...settings.chat, defaultModel: chatModel, defaultProjectModel: projectModel },
+        tasks: { ...settings.tasks, defaultModel: taskModel },
+      });
+      toast.success('AI model defaults saved');
+    } catch {
+      toast.error('Failed to save settings');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const renderModelSelect = (value: string | null, onChange: (v: string | null) => void, placeholder: string) => (
+    <Select value={value ?? NONE} onValueChange={(v) => onChange(v === NONE ? null : v)}>
+      <SelectTrigger className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark">
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent className="z-[600] max-h-[300px]">
+        <SelectItem value={NONE}>{placeholder}</SelectItem>
+        {groups.map(({ provider, models }) => (
+          <SelectGroup key={provider}>
+            <SelectLabel>{getProviderDisplayName(provider)}</SelectLabel>
+            {models.map((m) => (
+              <SelectItem key={`${provider}:${m.id}`} value={m.id}>
+                {m.name}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+
+  return (
+    <div className="grid gap-5">
+      <Label className="grid gap-2">
+        <span className="text-duck-dark/70 dark:text-foreground/70">Default Chat Model</span>
+        <p className="text-xs text-duck-dark/40 dark:text-foreground/40">Used when starting a new chat from the home screen</p>
+        {renderModelSelect(chatModel, setChatModel, 'System default')}
+      </Label>
+
+      <Label className="grid gap-2">
+        <span className="text-duck-dark/70 dark:text-foreground/70">Default Project Model</span>
+        <p className="text-xs text-duck-dark/40 dark:text-foreground/40">Used when starting a new chat inside a project workspace</p>
+        {renderModelSelect(projectModel, setProjectModel, 'Same as chat default')}
+      </Label>
+
+      <Label className="grid gap-2">
+        <span className="text-duck-dark/70 dark:text-foreground/70">Default Task Model</span>
+        <p className="text-xs text-duck-dark/40 dark:text-foreground/40">Used when running tasks from the file browser</p>
+        {renderModelSelect(taskModel, setTaskModel, 'Same as chat default')}
+      </Label>
+
+      <Button
+        type="button"
+        onClick={handleSave}
+        disabled={isSaving}
+        className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
+      >
+        {isSaving ? 'Saving...' : 'Save'}
+      </Button>
+    </div>
+  );
+};
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { User, Lock, Globe, ListChecks } from 'lucide-react';
+import { User, Lock, Globe, Bot } from 'lucide-react';
 import type { LayoutNode, PanelComponents } from 'officerdev';
 import { WorkspaceLayout } from 'officerdev';

@@ -7,14 +7,14 @@ import { createSettingsPanelComponents, type SettingsSection } from '../Settings
 import { UserData } from './UserData';
 import { ChangePassword } from './ChangePassword';
 import { Languages } from './Languages';
-import { TaskDefaults } from './TaskDefaults';
+import { AIModels } from './AIModels';

 const GLOBAL_KEY = 'PROFILE_SETTINGS_SELECTED';

 const sections: SettingsSection[] = [
  { key: 'profile', icon: User, title: 'Profile', description: 'Avatar, name, and email', content: <UserData /> },
  { key: 'change-password', icon: Lock, title: 'Change Password', description: 'Update your password', content: <ChangePassword /> },
-  { key: 'tasks', icon: ListChecks, title: 'Task Defaults', description: 'Default model for tasks', content: <TaskDefaults /> },
+  { key: 'ai-models', icon: Bot, title: 'AI Models', description: 'Default models for chat, projects, and tasks', content: <AIModels /> },
  { key: 'languages', icon: Globe, title: 'Languages', description: 'Spoken, default, and translation', content: <Languages /> },
 ];