57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
import { Plus } from 'lucide-react';
|
|
import { useState, useEffect } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import { useAppStore } from '@/store';
|
|
import { api } from '@/lib/api';
|
|
|
|
export function MiddlePanel() {
|
|
const { conversations, activeConversationId, setActiveConversationId, setConversations } = useAppStore();
|
|
const [search, setSearch] = useState('');
|
|
|
|
useEffect(() => {
|
|
api.listConversations().then(setConversations).catch(() => {});
|
|
}, []);
|
|
|
|
const handleSearch = (value: string) => {
|
|
setSearch(value);
|
|
const qs = value ? `?search=${encodeURIComponent(value)}` : '';
|
|
fetch(`/api/pipeline/conversations${qs}`)
|
|
.then((r) => r.json())
|
|
.then(setConversations)
|
|
.catch(() => {});
|
|
};
|
|
|
|
return (
|
|
<aside className="w-60 flex flex-col border-r border-zinc-800">
|
|
<div className="p-3 flex items-center justify-between">
|
|
<Input
|
|
placeholder="搜索对话..."
|
|
className="h-8 text-xs bg-zinc-900 border-zinc-800"
|
|
value={search}
|
|
onChange={(e) => handleSearch(e.target.value)}
|
|
/>
|
|
<Button size="icon" variant="ghost" className="h-8 w-8 ml-1">
|
|
<Plus size={16} />
|
|
</Button>
|
|
</div>
|
|
<ScrollArea className="flex-1 px-2">
|
|
{conversations.map((conv) => (
|
|
<button
|
|
key={conv.id}
|
|
onClick={() => setActiveConversationId(conv.id)}
|
|
className={`w-full text-left px-3 py-2 rounded-md text-sm truncate mb-0.5 transition-colors
|
|
${conv.id === activeConversationId ? 'bg-zinc-800 text-white' : 'text-zinc-400 hover:bg-zinc-800/50 hover:text-zinc-200'}`}
|
|
>
|
|
{conv.title}
|
|
</button>
|
|
))}
|
|
{conversations.length === 0 && (
|
|
<p className="text-xs text-zinc-600 text-center mt-8">暂无对话</p>
|
|
)}
|
|
</ScrollArea>
|
|
</aside>
|
|
);
|
|
}
|