feat(local-llm): Phase G — projects + multi-model orchestration (G1-G7)
G1: Project CRUD in IndexedDB (already added in Phase F commit)
G2: Project sidebar section with create, pin, delete, and active selection
G3: Project system context injection (via project default model/agent/context)
G4: Cmd+P project switcher modal with keyboard navigation
G5: Chain orchestration — sequential multi-model pipeline with {prev} placeholder
G6: Race orchestration — parallel model competition with timing
G7: Vote orchestration — consensus synthesis from multiple model responses
This commit is contained in:
saravanakumardb1
parent
52f3d16b65
commit
6d98d12f04
@ -0,0 +1,206 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Plus, Trash2, X } from 'lucide-react';
|
||||
import type { Orchestration, OrchestrationStep } from '../../lib/types';
|
||||
|
||||
interface OrchestrationEditorProps {
|
||||
orchestration?: Orchestration;
|
||||
models: string[];
|
||||
onSave: (orch: Orchestration) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function OrchestrationEditor({
|
||||
orchestration,
|
||||
models,
|
||||
onSave,
|
||||
onClose,
|
||||
}: OrchestrationEditorProps) {
|
||||
const [name, setName] = useState(orchestration?.name || '');
|
||||
const [mode, setMode] = useState<Orchestration['mode']>(orchestration?.mode || 'chain');
|
||||
const [description, setDescription] = useState(orchestration?.description || '');
|
||||
const [synthesizer, setSynthesizer] = useState(orchestration?.synthesizer || '');
|
||||
const [steps, setSteps] = useState<OrchestrationStep[]>(
|
||||
orchestration?.steps || [{ model: models[0] || '' }]
|
||||
);
|
||||
|
||||
const addStep = () => {
|
||||
setSteps(prev => [...prev, { model: models[0] || '' }]);
|
||||
};
|
||||
|
||||
const removeStep = (idx: number) => {
|
||||
setSteps(prev => prev.filter((_, i) => i !== idx));
|
||||
};
|
||||
|
||||
const updateStep = (idx: number, partial: Partial<OrchestrationStep>) => {
|
||||
setSteps(prev => prev.map((s, i) => (i === idx ? { ...s, ...partial } : s)));
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (!name.trim() || steps.length === 0) return;
|
||||
onSave({
|
||||
id: orchestration?.id || crypto.randomUUID(),
|
||||
name: name.trim(),
|
||||
mode,
|
||||
steps,
|
||||
synthesizer: mode === 'vote' ? synthesizer : undefined,
|
||||
description: description.trim() || undefined,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
|
||||
<div className="w-full max-w-lg rounded-lg border border-white/10 bg-[var(--bg-elevated)] p-5">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-[var(--text-primary)]">
|
||||
{orchestration ? 'Edit Orchestration' : 'New Orchestration'}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="text-[var(--text-tertiary)] hover:text-[var(--text-primary)]"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="mb-1 block text-xs text-[var(--text-secondary)]">Name *</label>
|
||||
<input
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
className="w-full rounded border border-white/10 bg-[var(--surface-card)] px-3 py-1.5 text-sm text-[var(--text-primary)] outline-none"
|
||||
placeholder="My orchestration"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 block text-xs text-[var(--text-secondary)]">Description</label>
|
||||
<input
|
||||
value={description}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
className="w-full rounded border border-white/10 bg-[var(--surface-card)] px-3 py-1.5 text-sm text-[var(--text-primary)] outline-none"
|
||||
placeholder="What does this orchestration do?"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 block text-xs text-[var(--text-secondary)]">Mode</label>
|
||||
<div className="flex gap-2">
|
||||
{(['chain', 'race', 'vote'] as const).map(m => (
|
||||
<button
|
||||
key={m}
|
||||
type="button"
|
||||
onClick={() => setMode(m)}
|
||||
className={`rounded border px-3 py-1 text-xs capitalize ${mode === m ? 'border-[var(--accent-primary)] bg-[var(--accent-primary)]/20 text-[var(--accent-primary)]' : 'border-white/10 text-[var(--text-secondary)] hover:text-[var(--text-primary)]'}`}
|
||||
>
|
||||
{m}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-1 text-[10px] text-[var(--text-tertiary)]">
|
||||
{mode === 'chain' && 'Sequential: each step output feeds into the next via {prev}'}
|
||||
{mode === 'race' && 'Parallel: same prompt to all models, pick the best'}
|
||||
{mode === 'vote' &&
|
||||
'Consensus: all models respond, synthesizer produces final answer'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="mb-1 flex items-center justify-between">
|
||||
<label className="text-xs text-[var(--text-secondary)]">Steps ({steps.length})</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addStep}
|
||||
className="inline-flex items-center gap-1 text-[10px] text-[var(--accent-primary)] hover:underline"
|
||||
>
|
||||
<Plus size={10} /> Add step
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{steps.map((step, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-start gap-2 rounded border border-white/10 bg-[var(--surface-card)] p-2"
|
||||
>
|
||||
<span className="mt-1 text-[10px] text-[var(--text-tertiary)]">#{idx + 1}</span>
|
||||
<div className="min-w-0 flex-1 space-y-1">
|
||||
<select
|
||||
value={step.model}
|
||||
onChange={e => updateStep(idx, { model: e.target.value })}
|
||||
className="w-full rounded border border-white/10 bg-[var(--bg-canvas)] px-2 py-1 text-xs text-[var(--text-primary)] outline-none"
|
||||
>
|
||||
<option value="">Select model</option>
|
||||
{models.map(m => (
|
||||
<option key={m} value={m}>
|
||||
{m}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{mode === 'chain' && (
|
||||
<input
|
||||
value={step.systemPrompt || ''}
|
||||
onChange={e => updateStep(idx, { systemPrompt: e.target.value })}
|
||||
placeholder="System prompt (optional, use {prev} for previous output)"
|
||||
className="w-full rounded border border-white/10 bg-[var(--bg-canvas)] px-2 py-1 text-[11px] text-[var(--text-secondary)] outline-none"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{steps.length > 1 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeStep(idx)}
|
||||
className="mt-1 text-[var(--text-tertiary)] hover:text-[var(--danger)]"
|
||||
>
|
||||
<Trash2 size={12} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{mode === 'vote' && (
|
||||
<div>
|
||||
<label className="mb-1 block text-xs text-[var(--text-secondary)]">
|
||||
Synthesizer Model
|
||||
</label>
|
||||
<select
|
||||
value={synthesizer}
|
||||
onChange={e => setSynthesizer(e.target.value)}
|
||||
className="w-full rounded border border-white/10 bg-[var(--surface-card)] px-3 py-1.5 text-sm text-[var(--text-primary)] outline-none"
|
||||
>
|
||||
<option value="">Select synthesizer</option>
|
||||
{models.map(m => (
|
||||
<option key={m} value={m}>
|
||||
{m}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-5 flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="rounded border border-white/10 px-4 py-1.5 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
disabled={!name.trim() || steps.length === 0}
|
||||
className="rounded bg-[var(--accent-primary)] px-4 py-1.5 text-sm text-white disabled:opacity-50"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,255 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import type { Orchestration } from '../../lib/types';
|
||||
import { MarkdownResponse } from '../../components/MarkdownResponse';
|
||||
|
||||
interface OrchestrationRunnerProps {
|
||||
orchestration: Orchestration;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
interface StepResult {
|
||||
model: string;
|
||||
content: string;
|
||||
durationMs: number;
|
||||
done: boolean;
|
||||
}
|
||||
|
||||
async function streamChat(
|
||||
model: string,
|
||||
messages: { role: string; content: string }[],
|
||||
signal?: AbortSignal
|
||||
): Promise<{ content: string; durationMs: number }> {
|
||||
const start = Date.now();
|
||||
const res = await fetch('/api/ollama/chat', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ model, messages }),
|
||||
signal,
|
||||
});
|
||||
|
||||
if (!res.ok || !res.body) throw new Error('Stream failed');
|
||||
|
||||
const reader = res.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let buffer = '';
|
||||
let content = '';
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
buffer += decoder.decode(value, { stream: true });
|
||||
const lines = buffer.split('\n');
|
||||
buffer = lines.pop() || '';
|
||||
for (const line of lines) {
|
||||
if (!line.trim()) continue;
|
||||
try {
|
||||
const chunk = JSON.parse(line) as { message?: { content?: string } };
|
||||
if (chunk.message?.content) content += chunk.message.content;
|
||||
} catch {
|
||||
/* skip */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { content, durationMs: Date.now() - start };
|
||||
}
|
||||
|
||||
export function OrchestrationRunner({ orchestration, onClose }: OrchestrationRunnerProps) {
|
||||
const [prompt, setPrompt] = useState('');
|
||||
const [running, setRunning] = useState(false);
|
||||
const [results, setResults] = useState<StepResult[]>([]);
|
||||
const [synthesis, setSynthesis] = useState('');
|
||||
|
||||
const runChain = async (userPrompt: string) => {
|
||||
setRunning(true);
|
||||
setResults([]);
|
||||
setSynthesis('');
|
||||
|
||||
let prevOutput = userPrompt;
|
||||
const allResults: StepResult[] = [];
|
||||
|
||||
for (const step of orchestration.steps) {
|
||||
const systemContent = step.systemPrompt
|
||||
? step.systemPrompt.replace(/\{prev\}/g, prevOutput)
|
||||
: undefined;
|
||||
|
||||
const messages: { role: string; content: string }[] = [];
|
||||
if (systemContent) messages.push({ role: 'system', content: systemContent });
|
||||
messages.push({ role: 'user', content: prevOutput });
|
||||
|
||||
const { content, durationMs } = await streamChat(step.model, messages);
|
||||
const stepResult: StepResult = { model: step.model, content, durationMs, done: true };
|
||||
allResults.push(stepResult);
|
||||
setResults([...allResults]);
|
||||
prevOutput = content;
|
||||
}
|
||||
|
||||
setRunning(false);
|
||||
};
|
||||
|
||||
const runRace = async (userPrompt: string) => {
|
||||
setRunning(true);
|
||||
setResults([]);
|
||||
setSynthesis('');
|
||||
|
||||
const promises = orchestration.steps.map(async step => {
|
||||
const { content, durationMs } = await streamChat(step.model, [
|
||||
{ role: 'user', content: userPrompt },
|
||||
]);
|
||||
return { model: step.model, content, durationMs, done: true } as StepResult;
|
||||
});
|
||||
|
||||
const settled = await Promise.allSettled(promises);
|
||||
const allResults = settled
|
||||
.filter((r): r is PromiseFulfilledResult<StepResult> => r.status === 'fulfilled')
|
||||
.map(r => r.value);
|
||||
|
||||
setResults(allResults);
|
||||
setRunning(false);
|
||||
};
|
||||
|
||||
const runVote = async (userPrompt: string) => {
|
||||
setRunning(true);
|
||||
setResults([]);
|
||||
setSynthesis('');
|
||||
|
||||
const promises = orchestration.steps.map(async step => {
|
||||
const { content, durationMs } = await streamChat(step.model, [
|
||||
{ role: 'user', content: userPrompt },
|
||||
]);
|
||||
return { model: step.model, content, durationMs, done: true } as StepResult;
|
||||
});
|
||||
|
||||
const settled = await Promise.allSettled(promises);
|
||||
const allResults = settled
|
||||
.filter((r): r is PromiseFulfilledResult<StepResult> => r.status === 'fulfilled')
|
||||
.map(r => r.value);
|
||||
|
||||
setResults(allResults);
|
||||
|
||||
if (orchestration.synthesizer && allResults.length > 0) {
|
||||
const synthPrompt = `You are a synthesizer. Multiple models responded to the user's question. Analyze their responses, find consensus, and highlight disagreements. Produce a final authoritative answer.
|
||||
|
||||
User question: ${userPrompt}
|
||||
|
||||
${allResults.map((r, i) => `--- Model ${i + 1} (${r.model}) ---\n${r.content}`).join('\n\n')}
|
||||
|
||||
Provide a synthesized consensus response:`;
|
||||
|
||||
const { content } = await streamChat(orchestration.synthesizer, [
|
||||
{ role: 'user', content: synthPrompt },
|
||||
]);
|
||||
setSynthesis(content);
|
||||
}
|
||||
|
||||
setRunning(false);
|
||||
};
|
||||
|
||||
const handleRun = async () => {
|
||||
if (!prompt.trim() || running) return;
|
||||
if (orchestration.mode === 'chain') await runChain(prompt);
|
||||
else if (orchestration.mode === 'race') await runRace(prompt);
|
||||
else if (orchestration.mode === 'vote') await runVote(prompt);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex flex-col bg-[var(--bg-canvas)]">
|
||||
<header className="flex items-center justify-between border-b border-white/10 bg-[var(--bg-elevated)] px-4 py-3">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-[var(--text-primary)]">{orchestration.name}</h2>
|
||||
<p className="text-xs text-[var(--text-tertiary)]">
|
||||
{orchestration.mode} · {orchestration.steps.length} models
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="rounded border border-white/10 px-3 py-1 text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div className="flex-1 overflow-auto p-4">
|
||||
{synthesis && (
|
||||
<div className="mb-4 rounded-lg border border-[var(--accent-secondary)]/30 bg-[var(--surface-card)] p-4">
|
||||
<p className="mb-2 text-xs font-medium text-[var(--accent-secondary)]">
|
||||
Synthesized Consensus
|
||||
</p>
|
||||
<MarkdownResponse content={synthesis} isThinkModel={false} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{results.length > 0 && (
|
||||
<div
|
||||
className={
|
||||
orchestration.mode === 'race' || orchestration.mode === 'vote'
|
||||
? 'grid gap-3 md:grid-cols-2'
|
||||
: 'space-y-3'
|
||||
}
|
||||
>
|
||||
{results.map((r, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="rounded-lg border border-white/10 bg-[var(--surface-card)] p-3"
|
||||
>
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<span className="text-xs font-medium text-[var(--text-primary)]">
|
||||
{orchestration.mode === 'chain' ? `Step ${idx + 1}` : ''} {r.model}
|
||||
</span>
|
||||
<span className="text-[10px] text-[var(--text-tertiary)]">
|
||||
{(r.durationMs / 1000).toFixed(1)}s
|
||||
</span>
|
||||
</div>
|
||||
<MarkdownResponse content={r.content} isThinkModel={false} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{results.length === 0 && !running && (
|
||||
<p className="text-center text-sm text-[var(--text-tertiary)]">
|
||||
Enter a prompt and run the orchestration.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{running && (
|
||||
<div className="flex items-center justify-center gap-2 py-8 text-[var(--accent-primary)]">
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
<span className="text-sm">Running {orchestration.mode}...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-white/10 bg-[var(--bg-elevated)] p-3">
|
||||
<div className="flex gap-2">
|
||||
<textarea
|
||||
value={prompt}
|
||||
onChange={e => setPrompt(e.target.value)}
|
||||
onKeyDown={e => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
void handleRun();
|
||||
}
|
||||
}}
|
||||
rows={2}
|
||||
disabled={running}
|
||||
placeholder="Enter your prompt... (Cmd+Enter to run)"
|
||||
className="min-h-[56px] flex-1 resize-y rounded-md border border-white/10 bg-[var(--surface-card)] px-3 py-2 text-sm text-[var(--text-primary)] outline-none placeholder:text-[var(--text-tertiary)]"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handleRun()}
|
||||
disabled={running || !prompt.trim()}
|
||||
className="self-end rounded bg-[var(--accent-primary)] px-4 py-2 text-sm text-white disabled:opacity-50"
|
||||
>
|
||||
Run
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,131 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { FolderPlus, Pin, Trash2 } from 'lucide-react';
|
||||
import type { Project } from '../../lib/types';
|
||||
import { addProject, deleteProject, updateProject } from '../../lib/db';
|
||||
|
||||
interface ProjectSidebarProps {
|
||||
projects: Project[];
|
||||
activeProjectId?: string;
|
||||
onSelect: (projectId: string | undefined) => void;
|
||||
onProjectsChanged: () => void;
|
||||
}
|
||||
|
||||
export function ProjectSidebar({
|
||||
projects,
|
||||
activeProjectId,
|
||||
onSelect,
|
||||
onProjectsChanged,
|
||||
}: ProjectSidebarProps) {
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [newName, setNewName] = useState('');
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!newName.trim()) return;
|
||||
const project: Project = {
|
||||
id: crypto.randomUUID(),
|
||||
name: newName.trim(),
|
||||
icon: '📁',
|
||||
conversationIds: [],
|
||||
pinned: false,
|
||||
createdAt: Date.now(),
|
||||
};
|
||||
await addProject(project);
|
||||
setNewName('');
|
||||
setCreating(false);
|
||||
onProjectsChanged();
|
||||
onSelect(project.id);
|
||||
};
|
||||
|
||||
const handlePin = async (id: string, pinned: boolean) => {
|
||||
await updateProject(id, { pinned: !pinned });
|
||||
onProjectsChanged();
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
await deleteProject(id);
|
||||
if (activeProjectId === id) onSelect(undefined);
|
||||
onProjectsChanged();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border-t border-white/10 px-3 py-2">
|
||||
<div className="mb-1 flex items-center justify-between">
|
||||
<span className="text-[10px] font-medium uppercase tracking-wider text-[var(--text-tertiary)]">
|
||||
Projects
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCreating(true)}
|
||||
className="text-[var(--text-tertiary)] hover:text-[var(--text-primary)]"
|
||||
title="New project"
|
||||
>
|
||||
<FolderPlus size={13} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{creating && (
|
||||
<div className="mb-1 flex gap-1">
|
||||
<input
|
||||
value={newName}
|
||||
onChange={e => setNewName(e.target.value)}
|
||||
onKeyDown={e => {
|
||||
if (e.key === 'Enter') void handleCreate();
|
||||
if (e.key === 'Escape') setCreating(false);
|
||||
}}
|
||||
autoFocus
|
||||
className="min-w-0 flex-1 rounded border border-white/10 bg-[var(--surface-card)] px-2 py-0.5 text-xs text-[var(--text-primary)] outline-none"
|
||||
placeholder="Project name"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onSelect(undefined)}
|
||||
className={`mb-0.5 block w-full rounded px-2 py-1 text-left text-xs ${!activeProjectId ? 'bg-white/5 text-[var(--accent-primary)]' : 'text-[var(--text-secondary)] hover:bg-white/5'}`}
|
||||
>
|
||||
All Conversations
|
||||
</button>
|
||||
|
||||
{projects.map(p => (
|
||||
<div
|
||||
key={p.id}
|
||||
className={`group mb-0.5 flex items-center gap-1 rounded px-2 py-1 text-xs ${activeProjectId === p.id ? 'bg-white/5 text-[var(--accent-primary)]' : 'text-[var(--text-secondary)] hover:bg-white/5'}`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onSelect(p.id)}
|
||||
className="flex min-w-0 flex-1 items-center gap-1 text-left"
|
||||
>
|
||||
<span>{p.icon}</span>
|
||||
<span className="truncate">{p.name}</span>
|
||||
</button>
|
||||
<div className="flex gap-0.5 opacity-0 group-hover:opacity-100">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handlePin(p.id, p.pinned)}
|
||||
className={
|
||||
p.pinned
|
||||
? 'text-[var(--accent-secondary)]'
|
||||
: 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)]'
|
||||
}
|
||||
title={p.pinned ? 'Unpin' : 'Pin'}
|
||||
>
|
||||
<Pin size={10} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handleDelete(p.id)}
|
||||
className="text-[var(--text-tertiary)] hover:text-[var(--danger)]"
|
||||
title="Delete"
|
||||
>
|
||||
<Trash2 size={10} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,93 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import type { Project } from '../../lib/types';
|
||||
|
||||
interface ProjectSwitcherProps {
|
||||
open: boolean;
|
||||
projects: Project[];
|
||||
onSelect: (projectId: string | undefined) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function ProjectSwitcher({ open, projects, onSelect, onClose }: ProjectSwitcherProps) {
|
||||
const [query, setQuery] = useState('');
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
const inputRef = useRef<HTMLInputElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setQuery('');
|
||||
setSelectedIndex(0);
|
||||
setTimeout(() => inputRef.current?.focus(), 50);
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const allOption = { id: '', name: 'All Conversations', icon: '📂' };
|
||||
const items = [allOption, ...projects].filter(p =>
|
||||
p.name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
const handleSelect = (id: string) => {
|
||||
onSelect(id || undefined);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
setSelectedIndex(i => Math.min(i + 1, items.length - 1));
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
setSelectedIndex(i => Math.max(i - 1, 0));
|
||||
} else if (e.key === 'Enter' && items[selectedIndex]) {
|
||||
handleSelect(items[selectedIndex].id);
|
||||
} else if (e.key === 'Escape') {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-start justify-center pt-[20vh] bg-black/50"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-md rounded-lg border border-white/10 bg-[var(--bg-elevated)] shadow-2xl"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className="border-b border-white/10 p-3">
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={query}
|
||||
onChange={e => {
|
||||
setQuery(e.target.value);
|
||||
setSelectedIndex(0);
|
||||
}}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Switch project..."
|
||||
className="w-full bg-transparent text-sm text-[var(--text-primary)] outline-none placeholder:text-[var(--text-tertiary)]"
|
||||
/>
|
||||
</div>
|
||||
<div className="max-h-64 overflow-auto p-1">
|
||||
{items.map((item, idx) => (
|
||||
<button
|
||||
key={item.id || '__all'}
|
||||
type="button"
|
||||
onClick={() => handleSelect(item.id)}
|
||||
className={`flex w-full items-center gap-2 rounded px-3 py-2 text-left text-sm ${idx === selectedIndex ? 'bg-white/10 text-[var(--text-primary)]' : 'text-[var(--text-secondary)] hover:bg-white/5'}`}
|
||||
>
|
||||
<span>{item.icon}</span>
|
||||
<span>{item.name}</span>
|
||||
</button>
|
||||
))}
|
||||
{items.length === 0 && (
|
||||
<p className="px-3 py-2 text-xs text-[var(--text-tertiary)]">No projects found</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user