hololake-system-architecture/product-source/guanghu-knowledge-base/src/components/AgentChat.tsx

/**
 * AgentChat — 人格体对话组件
 *
 * 与光湖人格体对话，Agent 直接操作 Git 引擎管理知识库。
 * 支持：对话、工具调用展示、对话历史、清空对话。
 */

import { useState, useRef, useEffect } from 'react';
import { marked } from 'marked';

interface Message {
  role: 'user' | 'assistant' | 'tool' | 'system';
  content: string;
  toolCalls?: Array<{ id: string; name: string; arguments: Record<string, unknown> }>;
  toolResults?: Array<{ id: string; name: string; output: string; error?: string }>;
  timestamp: string;
}

interface AgentStatus {
  name: string;
  role: string;
  model: string;
  conversationLength: number;
}

interface Props {
  apiBase: string;
  onDocSelect?: (path: string) => void;
}

export default function AgentChat({ apiBase, onDocSelect }: Props) {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const [sending, setSending] = useState(false);
  const [status, setStatus] = useState<AgentStatus | null>(null);
  const bottomRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    fetchStatus();
  }, []);

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  async function fetchStatus() {
    try {
      const res = await fetch(`${apiBase}/api/agent/status`);
      const data = await res.json();
      if (data.ok) {
        setStatus({
          name: data.persona.name,
          role: data.persona.role,
          model: data.persona.model,
          conversationLength: data.conversationLength,
        });
      }
    } catch {}
  }

  async function sendMessage() {
    const text = input.trim();
    if (!text || sending) return;

    setInput('');
    setSending(true);

    // 本地先显示用户消息
    const userMsg: Message = {
      role: 'user',
      content: text,
      timestamp: new Date().toISOString(),
    };
    setMessages(prev => [...prev, userMsg]);

    try {
      const res = await fetch(`${apiBase}/api/agent/chat`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message: text }),
      });
      const data = await res.json();

      if (data.ok) {
        const assistantMsg: Message = {
          role: 'assistant',
          content: data.reply,
          timestamp: new Date().toISOString(),
        };
        setMessages(prev => [...prev, assistantMsg]);
        fetchStatus(); // 刷新状态
      } else {
        setMessages(prev => [
          ...prev,
          { role: 'assistant', content: `错误: ${data.error}`, timestamp: new Date().toISOString() },
        ]);
      }
    } catch (err: any) {
      setMessages(prev => [
        ...prev,
        { role: 'assistant', content: `网络错误: ${err.message}`, timestamp: new Date().toISOString() },
      ]);
    } finally {
      setSending(false);
      inputRef.current?.focus();
    }
  }

  async function clearConversation() {
    try {
      await fetch(`${apiBase}/api/agent/clear`, { method: 'POST' });
      setMessages([]);
      fetchStatus();
    } catch {}
  }

  function handleKeyDown(e: React.KeyboardEvent) {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  }

  return (
    <div className="agent-chat">
      {/* 头部状态栏 */}
      <div className="agent-header">
        <div className="agent-info">
          <div className="agent-avatar">🌊</div>
          <div className="agent-meta">
            <h3>{status?.name || '光湖人格体'}</h3>
            <span className="agent-role">{status?.role || '知识库管理者'}</span>
          </div>
        </div>
        <div className="agent-actions">
          <span className="agent-model">{status?.model || 'offline'}</span>
          <button className="btn-clear" onClick={clearConversation} title="清空对话">
            ✕
          </button>
        </div>
      </div>

      {/* 对话区域 */}
      <div className="agent-messages">
        {messages.length === 0 && (
          <div className="agent-welcome">
            <div className="welcome-icon">🌊</div>
            <h2>光湖人格体</h2>
            <p>我是知识库的 AI Agent，可以直接操作 Git 引擎管理你的文档。</p>
            <p className="welcome-hint">试试说：</p>
            <div className="welcome-suggestions">
              <button onClick={() => { setInput('帮我列出所有文档'); inputRef.current?.focus(); }}>
                📋 列出所有文档
              </button>
              <button onClick={() => { setInput('搜索关于协议的内容'); inputRef.current?.focus(); }}>
                🔍 搜索关于协议的内容
              </button>
              <button onClick={() => { setInput('创建一篇新的学习笔记'); inputRef.current?.focus(); }}>
                ✏️ 创建学习笔记
              </button>
            </div>
          </div>
        )}

        {messages.map((msg, i) => (
          <div key={i} className={`msg msg-${msg.role}`}>
            {msg.role === 'user' ? (
              <div className="msg-bubble msg-user-bubble">
                <p>{msg.content}</p>
              </div>
            ) : (
              <div className="msg-bubble msg-assistant-bubble">
                <div className="msg-avatar">🌊</div>
                <div className="msg-content">
                  {msg.toolCalls && msg.toolCalls.length > 0 && (
                    <div className="tool-calls">
                      {msg.toolCalls.map((tc, j) => (
                        <div key={j} className="tool-call">
                          <span className="tool-icon">⚙️</span>
                          <span className="tool-name">{tc.name}</span>
                          <code className="tool-args">{JSON.stringify(tc.arguments)}</code>
                        </div>
                      ))}
                    </div>
                  )}
                  {msg.toolResults && msg.toolResults.length > 0 && (
                    <div className="tool-results">
                      {msg.toolResults.map((tr, j) => (
                        <div key={j} className={`tool-result ${tr.error ? 'tool-error' : ''}`}>
                          <span className="tool-icon">{tr.error ? '❌' : '✅'}</span>
                          <pre>{tr.error || tr.output}</pre>
                        </div>
                      ))}
                    </div>
                  )}
                  <div
                    className="msg-markdown"
                    dangerouslySetInnerHTML={{
                      __html: marked.parse(msg.content, { async: false }) as string,
                    }}
                  />
                </div>
              </div>
            )}
          </div>
        ))}

        {sending && (
          <div className="msg msg-assistant">
            <div className="msg-bubble msg-assistant-bubble">
              <div className="msg-avatar">🌊</div>
              <div className="msg-content typing">
                <span className="dot" />
                <span className="dot" />
                <span className="dot" />
              </div>
            </div>
          </div>
        )}
        <div ref={bottomRef} />
      </div>

      {/* 输入区 */}
      <div className="agent-input-area">
        <div className="agent-input-wrapper">
          <textarea
            ref={inputRef}
            className="agent-input"
            placeholder="和人格体对话…"
            value={input}
            onChange={e => setInput(e.target.value)}
            onKeyDown={handleKeyDown}
            rows={1}
            disabled={sending}
          />
          <button
            className="btn-send"
            onClick={sendMessage}
            disabled={sending || !input.trim()}
          >
            {sending ? '⏳' : '↑'}
          </button>
        </div>
        <div className="agent-hint">
          Enter 发送 · Shift+Enter 换行 · Agent 可直接操作知识库
        </div>
      </div>
    </div>
  );
}