57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { useAppStore } from '@/store';
|
|
import { useChat } from '@/hooks/useChat';
|
|
import { ChatMessage } from './ChatMessage';
|
|
import { ChatInput } from './ChatInput';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
|
|
export function ChatView() {
|
|
const { activeConversationId, conversations, setConversations } = useAppStore();
|
|
const { messages, connected, send, createConversation } = useChat(activeConversationId);
|
|
|
|
useEffect(() => {
|
|
fetch('/api/pipeline/conversations')
|
|
.then((r) => r.json())
|
|
.then(setConversations)
|
|
.catch(() => {});
|
|
}, [messages]);
|
|
|
|
const handleNewConversation = () => {
|
|
createConversation('新对话');
|
|
setTimeout(() => {
|
|
fetch('/api/pipeline/conversations')
|
|
.then((r) => r.json())
|
|
.then(setConversations);
|
|
}, 300);
|
|
};
|
|
|
|
if (!activeConversationId) {
|
|
return (
|
|
<div className="flex-1 flex flex-col items-center justify-center gap-4 text-zinc-500">
|
|
<p>选择对话或开始新对话</p>
|
|
<button
|
|
onClick={handleNewConversation}
|
|
className="px-4 py-2 rounded-md bg-zinc-800 text-sm hover:bg-zinc-700 transition-colors"
|
|
>
|
|
开始新对话
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex-1 flex flex-col">
|
|
<div className="px-4 py-2 border-b border-zinc-800 flex items-center gap-2">
|
|
<div className={`w-2 h-2 rounded-full ${connected ? 'bg-green-500' : 'bg-red-500'}`} />
|
|
<span className="text-xs text-zinc-500">{connected ? '已连接' : '连接中...'}</span>
|
|
</div>
|
|
<ScrollArea className="flex-1 px-4 py-4">
|
|
{messages.map((msg) => (
|
|
<ChatMessage key={msg.id} message={msg} />
|
|
))}
|
|
</ScrollArea>
|
|
<ChatInput onSend={send} />
|
|
</div>
|
|
);
|
|
}
|