pi-mono
This commit is contained in:
@@ -0,0 +1,464 @@
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { Terminal, Eye, Trash2, Bot, Server, Puzzle, Settings } from 'lucide-react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Slider } from '@/components/ui/slider';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
|
||||
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import type { LayoutNode, PanelComponents } from '@/components/Workspace';
|
||||
import { WorkspaceLayout } from '@/components/Workspace';
|
||||
import { appRegistry } from '../Workspaces/app-registry';
|
||||
import { createSettingsPanelComponents, type SettingsSectionGroup } from './SettingsPanel';
|
||||
import { useSettings } from '@/state/useSettings';
|
||||
import { useUserState } from '@/state/useUserState';
|
||||
import {
|
||||
useClaudeModels,
|
||||
useOpenCodeModels,
|
||||
usePiMonoModels,
|
||||
useVisibleClaudeModels,
|
||||
useVisibleOpenCodeModels,
|
||||
useVisiblePiMonoModels,
|
||||
} from '@/state/useModels';
|
||||
import type { UserSettings } from '@/state/types/user-settings';
|
||||
import { AIHarnessesSection } from './ServerSettings/AIHarnessesSection';
|
||||
import { PluginsSection } from './ServerSettings/PluginsSection';
|
||||
|
||||
const groups: SettingsSectionGroup[] = [
|
||||
{
|
||||
label: 'Server',
|
||||
icon: Server,
|
||||
sections: [
|
||||
{ key: 'ai-harnesses', icon: Terminal, title: 'AI Harnesses', description: 'AI coding tools setup', content: <AIHarnessesSection /> },
|
||||
{ key: 'plugins', icon: Puzzle, title: 'Plugins', description: 'Enable or disable plugins', content: <PluginsSection /> },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'AI',
|
||||
icon: Bot,
|
||||
sections: [
|
||||
{ key: 'chat-defaults', icon: Terminal, title: 'Chat Defaults', description: 'Model, prompt, and temperature', content: <ChatDefaultsSection /> },
|
||||
{ key: 'model-visibility', icon: Eye, title: 'Model Visibility', description: 'Enable or disable models', content: <ModelVisibilitySection /> },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const { Sidebar, Content } = createSettingsPanelComponents({
|
||||
globalKey: 'SYSTEM_SETTINGS_SELECTED',
|
||||
sidebarIcon: Settings,
|
||||
sidebarLabel: 'System',
|
||||
groups,
|
||||
});
|
||||
|
||||
const layout: LayoutNode = {
|
||||
type: 'group',
|
||||
id: 'system-root',
|
||||
direction: 'horizontal',
|
||||
children: [
|
||||
{ node: { type: 'panel', id: 'system-left', appType: null }, size: 20 },
|
||||
{ node: { type: 'panel', id: 'system-right', appType: null }, size: 80 },
|
||||
],
|
||||
};
|
||||
|
||||
export const SystemSettings = () => {
|
||||
const panelComponents: PanelComponents = useMemo(
|
||||
() => ({
|
||||
'system-left': Sidebar,
|
||||
'system-right': Content,
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="h-full w-full pt-2">
|
||||
<WorkspaceLayout layout={layout} onLayoutChange={() => {}} registry={appRegistry} components={panelComponents} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// --- AI sections ---
|
||||
|
||||
function ChatDefaultsSection() {
|
||||
const { settings, saveSettings } = useSettings();
|
||||
const claudeModels = useVisibleClaudeModels();
|
||||
const openCodeModels = useVisibleOpenCodeModels();
|
||||
const piMonoModels = useVisiblePiMonoModels();
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
const [model, setModel] = useState<string | null>(settings.chat.defaultModel);
|
||||
const [systemPrompt, setSystemPrompt] = useState(settings.chat.systemPrompt);
|
||||
const [temperature, setTemperature] = useState(settings.chat.temperature);
|
||||
const [defaultPwd, setDefaultPwd] = useState(settings.chat.defaultPwd);
|
||||
|
||||
useEffect(() => {
|
||||
setModel(settings.chat.defaultModel);
|
||||
setSystemPrompt(settings.chat.systemPrompt);
|
||||
setTemperature(settings.chat.temperature);
|
||||
setDefaultPwd(settings.chat.defaultPwd);
|
||||
}, [settings]);
|
||||
|
||||
const allModels = useMemo(
|
||||
() => [
|
||||
...claudeModels.map((m) => ({ ...m, provider: 'Claude' })),
|
||||
...openCodeModels.map((m) => ({ ...m, provider: m.provider ?? 'OpenCode' })),
|
||||
...piMonoModels.map((m) => ({ ...m, provider: m.provider ?? 'Pi' })),
|
||||
],
|
||||
[claudeModels, openCodeModels, piMonoModels],
|
||||
);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (isSaving) return;
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const isPiMono = piMonoModels.some((m) => m.id === model);
|
||||
const isOpenCode = openCodeModels.some((m) => m.id === model);
|
||||
const defaultProvider = isPiMono ? ('pi-mono' as const) : isOpenCode ? ('opencode' as const) : ('claude' as const);
|
||||
const updated: UserSettings = {
|
||||
...settings,
|
||||
chat: { defaultProvider, defaultModel: model, systemPrompt, temperature, defaultPwd },
|
||||
};
|
||||
await saveSettings(updated);
|
||||
toast.success('Chat defaults saved');
|
||||
} catch {
|
||||
toast.error('Failed to save settings');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid gap-4">
|
||||
<Label className="grid gap-2">
|
||||
<span className="text-duck-dark/70">Model</span>
|
||||
<Select value={model ?? ''} onValueChange={(v) => setModel(v || null)}>
|
||||
<SelectTrigger className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark">
|
||||
<SelectValue placeholder="Default" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="z-[600]">
|
||||
{allModels.map((m) => (
|
||||
<SelectItem key={`${m.provider}:${m.id}`} value={m.id}>
|
||||
<span className="font-bold">{m.name}</span>
|
||||
<span className="text-duck-dark/50 ml-1">({m.provider})</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Label>
|
||||
|
||||
<Label className="grid gap-2">
|
||||
<span className="text-duck-dark/70">System Prompt</span>
|
||||
<Textarea
|
||||
className="bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40 min-h-[100px]"
|
||||
placeholder="Custom instructions for the AI..."
|
||||
value={systemPrompt}
|
||||
onChange={(ev) => setSystemPrompt(ev.target.value)}
|
||||
/>
|
||||
</Label>
|
||||
|
||||
<Label className="grid gap-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-duck-dark/70">Temperature</span>
|
||||
<span className="text-sm text-duck-dark/50">{temperature.toFixed(1)}</span>
|
||||
</div>
|
||||
<Slider min={0} max={2} step={0.1} value={[temperature]} onValueChange={([v]) => setTemperature(v ?? 1)} />
|
||||
</Label>
|
||||
|
||||
<Label className="grid gap-2">
|
||||
<span className="text-duck-dark/70">Default Working Directory</span>
|
||||
<Input
|
||||
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
|
||||
value={defaultPwd}
|
||||
onChange={(ev) => setDefaultPwd(ev.target.value)}
|
||||
placeholder="~"
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
function ModelVisibilitySection() {
|
||||
const { settings, saveSettings } = useSettings();
|
||||
const claudeModels = useClaudeModels();
|
||||
const openCodeModels = useOpenCodeModels();
|
||||
const piMonoModels = usePiMonoModels();
|
||||
const [subTab, setSubTab] = useUserState('ai-settings-visibility-tab', 'claude');
|
||||
|
||||
const enabledModels = settings.ai?.enabledModels ?? [];
|
||||
const enabledProviders = settings.ai?.enabledProviders ?? [];
|
||||
|
||||
const toggleModel = async (key: string) => {
|
||||
const isEnabled = enabledModels.includes(key);
|
||||
const newEnabled = isEnabled ? enabledModels.filter((id) => id !== key) : [...enabledModels, key];
|
||||
await saveSettings({ ...settings, ai: { ...settings.ai, enabledModels: newEnabled } });
|
||||
};
|
||||
|
||||
const buildProviderGroups = (models: { id: string; name: string; provider?: string }[]) => {
|
||||
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 ocGroups = useMemo(() => buildProviderGroups(openCodeModels), [openCodeModels]);
|
||||
const piGroups = useMemo(() => buildProviderGroups(piMonoModels), [piMonoModels]);
|
||||
|
||||
const [addingProvider, setAddingProvider] = useState(false);
|
||||
const [selectedNewProvider, setSelectedNewProvider] = useState<string>('');
|
||||
|
||||
const currentGroups = subTab === 'opencode' ? ocGroups : piGroups;
|
||||
const disabledProviders = currentGroups.filter((g) => !enabledProviders.includes(g.provider));
|
||||
|
||||
const handleEnableProvider = async () => {
|
||||
if (!selectedNewProvider) return;
|
||||
await saveSettings({
|
||||
...settings,
|
||||
ai: { ...settings.ai, enabledProviders: [...enabledProviders, selectedNewProvider] },
|
||||
});
|
||||
setAddingProvider(false);
|
||||
setSelectedNewProvider('');
|
||||
};
|
||||
|
||||
const handleRemoveProvider = async (provider: string) => {
|
||||
await saveSettings({
|
||||
...settings,
|
||||
ai: { ...settings.ai, enabledProviders: enabledProviders.filter((p) => p !== provider) },
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Tabs value={subTab} onValueChange={setSubTab}>
|
||||
<TabsList className="w-full mb-4">
|
||||
<TabsTrigger value="claude" className="flex-1 cursor-pointer">
|
||||
Claude
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="opencode" className="flex-1 cursor-pointer">
|
||||
OpenCode
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="pi-mono" className="flex-1 cursor-pointer">
|
||||
Pi
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="claude">
|
||||
<div className="grid gap-1">
|
||||
{claudeModels.map((m) => (
|
||||
<label
|
||||
key={m.id}
|
||||
className="flex items-center justify-between py-2 px-3 rounded-md hover:bg-duck-dark/5 cursor-pointer"
|
||||
>
|
||||
<span className="text-sm text-duck-dark">{m.name}</span>
|
||||
<Switch checked={enabledModels.includes(m.id)} onCheckedChange={() => toggleModel(m.id)} />
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="opencode">
|
||||
<ProviderGroupTab
|
||||
groups={ocGroups}
|
||||
enabledProviders={enabledProviders}
|
||||
enabledModels={enabledModels}
|
||||
disabledProviders={disabledProviders}
|
||||
addingProvider={addingProvider}
|
||||
selectedNewProvider={selectedNewProvider}
|
||||
emptyLabel="No OpenCode models available."
|
||||
onSetAddingProvider={setAddingProvider}
|
||||
onSetSelectedNewProvider={setSelectedNewProvider}
|
||||
onEnableProvider={handleEnableProvider}
|
||||
onToggleModel={toggleModel}
|
||||
onRemoveProvider={handleRemoveProvider}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="pi-mono">
|
||||
<ProviderGroupTab
|
||||
groups={piGroups}
|
||||
enabledProviders={enabledProviders}
|
||||
enabledModels={enabledModels}
|
||||
disabledProviders={subTab === 'pi-mono' ? piGroups.filter((g) => !enabledProviders.includes(g.provider)) : disabledProviders}
|
||||
addingProvider={addingProvider}
|
||||
selectedNewProvider={selectedNewProvider}
|
||||
emptyLabel="No Pi models available."
|
||||
onSetAddingProvider={setAddingProvider}
|
||||
onSetSelectedNewProvider={setSelectedNewProvider}
|
||||
onEnableProvider={handleEnableProvider}
|
||||
onToggleModel={toggleModel}
|
||||
onRemoveProvider={handleRemoveProvider}
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Shared components ---
|
||||
|
||||
type ProviderGroup = { provider: string; models: { id: string; name: string }[] };
|
||||
|
||||
type ProviderGroupTabProps = {
|
||||
groups: ProviderGroup[];
|
||||
enabledProviders: string[];
|
||||
enabledModels: string[];
|
||||
disabledProviders: ProviderGroup[];
|
||||
addingProvider: boolean;
|
||||
selectedNewProvider: string;
|
||||
emptyLabel: string;
|
||||
onSetAddingProvider: (v: boolean) => void;
|
||||
onSetSelectedNewProvider: (v: string) => void;
|
||||
onEnableProvider: () => void;
|
||||
onToggleModel: (key: string) => void;
|
||||
onRemoveProvider: (provider: string) => void;
|
||||
};
|
||||
|
||||
const ProviderGroupTab = ({
|
||||
groups,
|
||||
enabledProviders,
|
||||
enabledModels,
|
||||
disabledProviders,
|
||||
addingProvider,
|
||||
selectedNewProvider,
|
||||
emptyLabel,
|
||||
onSetAddingProvider,
|
||||
onSetSelectedNewProvider,
|
||||
onEnableProvider,
|
||||
onToggleModel,
|
||||
onRemoveProvider,
|
||||
}: ProviderGroupTabProps) => (
|
||||
<>
|
||||
<div className="flex justify-end items-center gap-2 mb-3">
|
||||
{addingProvider ? (
|
||||
<>
|
||||
<Select value={selectedNewProvider} onValueChange={onSetSelectedNewProvider}>
|
||||
<SelectTrigger className="h-9 flex-1 bg-background/60 border-duck-dark/20 text-duck-dark text-sm">
|
||||
<SelectValue placeholder="Select provider..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="z-[600]">
|
||||
{disabledProviders.map((g) => (
|
||||
<SelectItem key={g.provider} value={g.provider}>
|
||||
{g.provider}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
disabled={!selectedNewProvider}
|
||||
onClick={onEnableProvider}
|
||||
className="cursor-pointer bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold disabled:opacity-50"
|
||||
>
|
||||
Enable
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="cursor-pointer"
|
||||
onClick={() => onSetAddingProvider(true)}
|
||||
disabled={disabledProviders.length === 0}
|
||||
>
|
||||
Add Provider
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{groups.length === 0 ? (
|
||||
<p className="text-sm text-duck-dark/40">{emptyLabel}</p>
|
||||
) : (
|
||||
<ProviderList
|
||||
groups={groups}
|
||||
enabledProviders={enabledProviders}
|
||||
enabledModels={enabledModels}
|
||||
onToggleModel={onToggleModel}
|
||||
onRemoveProvider={onRemoveProvider}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
type ProviderListProps = {
|
||||
groups: ProviderGroup[];
|
||||
enabledProviders: string[];
|
||||
enabledModels: string[];
|
||||
onToggleModel: (key: string) => void;
|
||||
onRemoveProvider: (provider: string) => void;
|
||||
};
|
||||
|
||||
const ProviderList = ({
|
||||
groups,
|
||||
enabledProviders,
|
||||
enabledModels,
|
||||
onToggleModel,
|
||||
onRemoveProvider,
|
||||
}: ProviderListProps) => {
|
||||
const [openProvider, setOpenProvider] = useUserState<string>('ai-settings-provider-accordion', '');
|
||||
const enabled = groups.filter((g) => enabledProviders.includes(g.provider));
|
||||
|
||||
if (enabled.length === 0) {
|
||||
return <p className="text-sm text-duck-dark/40">No providers enabled.</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Accordion type="single" collapsible value={openProvider} onValueChange={(v) => setOpenProvider(v ?? '')}>
|
||||
{enabled.map((g) => (
|
||||
<AccordionItem key={g.provider} value={g.provider}>
|
||||
<AccordionTrigger className="py-2 px-3 text-sm font-medium text-duck-dark hover:no-underline [&>svg]:ml-1">
|
||||
<span className="flex-1 text-left">{g.provider}</span>
|
||||
<span className="text-xs opacity-60 mr-5">{g.models.length}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(ev) => {
|
||||
ev.stopPropagation();
|
||||
onRemoveProvider(g.provider);
|
||||
}}
|
||||
className="p-1 text-duck-dark/30 hover:text-red-500 cursor-pointer transition-colors mr-3"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="px-3 pb-2">
|
||||
<div className="grid gap-1 max-h-52 overflow-y-auto">
|
||||
{[...g.models]
|
||||
.sort((a, b) => {
|
||||
const aEnabled = enabledModels.includes(`${g.provider}:${a.id}`);
|
||||
const bEnabled = enabledModels.includes(`${g.provider}:${b.id}`);
|
||||
if (aEnabled !== bEnabled) return aEnabled ? -1 : 1;
|
||||
return a.name.localeCompare(b.name);
|
||||
})
|
||||
.map((m) => {
|
||||
const key = `${g.provider}:${m.id}`;
|
||||
return (
|
||||
<label
|
||||
key={m.id}
|
||||
className="flex items-center justify-between py-1.5 px-2 rounded-md hover:bg-duck-dark/5 cursor-pointer"
|
||||
>
|
||||
<span className="text-sm text-duck-dark/70">{m.name}</span>
|
||||
<Switch checked={enabledModels.includes(key)} onCheckedChange={() => onToggleModel(key)} />
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user