video-create/web/client/src/components/chat/ChatView.tsx

import { useEffect, useState } from 'react';
import { useAppStore } from '@/store';
import { useChat } from '@/hooks/useChat';
import { ChatMessage } from './ChatMessage';
import { ChatInput } from './ChatInput';
import { PipelineProgress } from './PipelineProgress';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Button } from '@/components/ui/button';
import { RefreshCw, Loader2 } from 'lucide-react';

export function ChatView() {
  const { activeConversationId, setConversations, selectedAccountId } = useAppStore();
  const { messages, connected, thinking, toolStatus, send, createConversation } = useChat(activeConversationId);
  const [manifestPath, setManifestPath] = useState<string | null>(null);

  useEffect(() => {
    fetch('/api/pipeline/conversations')
      .then((r) => r.json())
      .then(setConversations)
      .catch(() => {});
  }, [messages]);

  useEffect(() => {
    const toolMsgs = messages.filter((m) => m.role === 'tool');
    if (toolMsgs.length > 0) {
      try {
        const lastTool = JSON.parse(toolMsgs[toolMsgs.length - 1].content);
        if (lastTool.manifest) setManifestPath(lastTool.manifest);
      } catch {}
    }
  }, [messages]);

  const handleNewConversation = () => {
    createConversation('新对话', selectedAccountId || undefined);
    setTimeout(() => {
      fetch('/api/pipeline/conversations')
        .then((r) => r.json())
        .then(setConversations);
    }, 300);
  };

  const handleResume = async () => {
    if (!manifestPath) return;
    try {
      await fetch('/api/pipeline/resume', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ manifest: manifestPath }),
      });
    } catch (e) {
      console.error('Resume failed:', e);
    }
  };

  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 justify-between">
        <div className="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>
        {manifestPath && (
          <Button size="sm" variant="outline" className="h-7 text-xs" onClick={handleResume}>
            <RefreshCw size={12} className="mr-1" />
            断点续跑
          </Button>
        )}
      </div>

      <ScrollArea className="flex-1 px-4 py-4">
        {messages.map((msg) => (
          <ChatMessage key={msg.id} message={msg} />
        ))}

        {thinking && (
          <div className="flex items-center gap-2 text-zinc-500 text-sm py-2">
            <Loader2 size={14} className="animate-spin" />
            {toolStatus || '思考中...'}
          </div>
        )}
      </ScrollArea>

      <ChatInput onSend={send} disabled={thinking} />
    </div>
  );
}