feat(persona-agent): 光湖人格 Agent v0.1.0 — Grok Build 架构拆解+Git驱动人格体
核心架构（拆解自 xAI Grok Build 开源 Rust crate）： - PersonaAgent: Agent = Definition + ToolBridge + PromptContext（映射自 xai-grok-agent） - 7个内置工具: read/create/update/delete/search/list/history（直接操作 Git 引擎） - LLM 调用层: 可插拔 OpenAI-compatible API（支持 tool calling） - 离线模式: 无 API Key 时降级为本地响应 API 端点： - POST /api/agent/chat — Agent 对话（支持工具调用链） - GET /api/agent/status — Agent 状态 - GET /api/agent/conversation — 对话历史 - POST /api/agent/clear — 清空对话 前端： - AgentChat 组件: 对话气泡+工具调用展示+欢迎建议 - 三栏布局: 文档树 | 编辑器 | Agent 面板（可收起） 设计原则： - Agent 是活的人格体，不是孤立的功能模块 - Agent 直接操作 Git（知识库引擎 = 人格体记忆空间） - 所有 Git 依赖模块由人格体驱动 - 不搬 Rust 代码，拆设计模式用 TypeScript 重新实现
This commit is contained in:
parent
047f37e87e
commit
dcf8f7d7e9
5 changed files with 1233 additions and 0 deletions
|
|
@ -0,0 +1,251 @@
|
|||
/**
|
||||
* 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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue