iven/zclaw_openfang
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(hands): restructure Hands UI with Chinese localization

Browse Source 
Major changes:
- Add HandList.tsx component for left sidebar
- Add HandTaskPanel.tsx for middle content area
- Restructure Sidebar tabs: 分身/HANDS/Workflow
- Remove Hands tab from RightPanel
- Localize all UI text to Chinese
- Archive legacy OpenClaw documentation
- Add Hands integration lessons document
- Update feature checklist with new components

UI improvements:
- Left sidebar now shows Hands list with status icons
- Middle area shows selected Hand's tasks and results
- Consistent styling with Tailwind CSS
- Chinese status labels and buttons

Documentation:
- Create docs/archive/openclaw-legacy/ for old docs
- Add docs/knowledge-base/hands-integration-lessons.md
- Update docs/knowledge-base/feature-checklist.md
- Update docs/knowledge-base/README.md

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
iven
2026-03-14 23:16:32 +08:00
parent 67e1da635d
commit 07079293f4
126 changed files with 36229 additions and 1035 deletions
Download Patch File Download Diff File Expand all files Collapse all files

349
desktop/src/store/chatStore.ts
View File

@@ -2,16 +2,42 @@
import { persist } from 'zustand/middleware';
import { getGatewayClient, AgentStreamDelta } from '../lib/gateway-client';
export interface MessageFile {
name: string;
path?: string;
size?: number;
type?: string;
}
export interface CodeBlock {
language?: string;
filename?: string;
content?: string;
}
export interface Message {
id: string;
role: 'user' | 'assistant' | 'tool';
role: 'user' | 'assistant' | 'tool' | 'hand' | 'workflow';
content: string;
timestamp: Date;
runId?: string;
streaming?: boolean;
toolName?: string;
toolInput?: string;
toolOutput?: string;
error?: string;
// Hand event fields
handName?: string;
handStatus?: string;
handResult?: unknown;
// Workflow event fields
workflowId?: string;
workflowStep?: string;
workflowStatus?: string;
workflowResult?: unknown;
// Output files and code blocks
files?: MessageFile[];
codeBlocks?: CodeBlock[];
}
export interface Conversation {
@@ -19,6 +45,7 @@ export interface Conversation {
title: string;
messages: Message[];
sessionKey: string | null;
agentId: string | null;
createdAt: Date;
updatedAt: Date;
}
@@ -32,6 +59,13 @@ export interface Agent {
time: string;
}
export interface AgentProfileLike {
id: string;
name: string;
nickname?: string;
role?: string;
}
interface ChatState {
messages: Message[];
conversations: Conversation[];
@@ -45,6 +79,7 @@ interface ChatState {
addMessage: (message: Message) => void;
updateMessage: (id: string, updates: Partial<Message>) => void;
setCurrentAgent: (agent: Agent) => void;
syncAgents: (profiles: AgentProfileLike[]) => void;
setCurrentModel: (model: string) => void;
sendMessage: (content: string) => Promise<void>;
initStreamListener: () => () => void;
@@ -66,23 +101,83 @@ function deriveTitle(messages: Message[]): string {
return '新对话';
}
const DEFAULT_AGENT: Agent = {
id: '1',
name: 'ZCLAW',
icon: '🦞',
color: 'bg-gradient-to-br from-orange-500 to-red-500',
lastMessage: '发送消息开始对话',
time: '',
};
export function toChatAgent(profile: AgentProfileLike): Agent {
return {
id: profile.id,
name: profile.name,
icon: profile.nickname?.slice(0, 1) || '🦞',
color: 'bg-gradient-to-br from-orange-500 to-red-500',
lastMessage: profile.role || '新分身',
time: '',
};
}
function resolveConversationAgentId(agent: Agent | null): string | null {
if (!agent || agent.id === DEFAULT_AGENT.id) {
return null;
}
return agent.id;
}
function resolveGatewayAgentId(agent: Agent | null): string | undefined {
if (!agent || agent.id === DEFAULT_AGENT.id || agent.id.startsWith('clone_')) {
return undefined;
}
return agent.id;
}
function resolveAgentForConversation(agentId: string | null, agents: Agent[]): Agent {
if (!agentId) {
return DEFAULT_AGENT;
}
return agents.find((agent) => agent.id === agentId) || DEFAULT_AGENT;
}
function upsertActiveConversation(
conversations: Conversation[],
state: Pick<ChatState, 'messages' | 'sessionKey' | 'currentConversationId' | 'currentAgent'>
): Conversation[] {
if (state.messages.length === 0) {
return conversations;
}
const currentId = state.currentConversationId || generateConvId();
const existingIdx = conversations.findIndex((conversation) => conversation.id === currentId);
const nextConversation: Conversation = {
id: currentId,
title: deriveTitle(state.messages),
messages: [...state.messages],
sessionKey: state.sessionKey,
agentId: resolveConversationAgentId(state.currentAgent),
createdAt: existingIdx >= 0 ? conversations[existingIdx].createdAt : new Date(),
updatedAt: new Date(),
};
if (existingIdx >= 0) {
conversations[existingIdx] = nextConversation;
return conversations;
}
return [nextConversation, ...conversations];
}
export const useChatStore = create<ChatState>()(
persist(
(set, get) => ({
messages: [],
conversations: [],
currentConversationId: null,
agents: [
{
id: '1',
name: 'ZCLAW',
icon: '🦞',
color: 'bg-gradient-to-br from-orange-500 to-red-500',
lastMessage: '发送消息开始对话',
time: '',
},
],
currentAgent: null,
agents: [DEFAULT_AGENT],
currentAgent: DEFAULT_AGENT,
isStreaming: false,
currentModel: 'glm-5',
sessionKey: null,
@@ -97,32 +192,42 @@ export const useChatStore = create<ChatState>()(
),
})),
setCurrentAgent: (agent) => set({ currentAgent: agent }),
setCurrentAgent: (agent) =>
set((state) => {
if (state.currentAgent?.id === agent.id) {
return { currentAgent: agent };
}
const conversations = upsertActiveConversation([...state.conversations], state);
return {
conversations,
currentAgent: agent,
messages: [],
sessionKey: null,
isStreaming: false,
currentConversationId: null,
};
}),
syncAgents: (profiles) =>
set((state) => {
const agents = profiles.length > 0 ? profiles.map(toChatAgent) : [DEFAULT_AGENT];
const currentAgent = state.currentConversationId
? resolveAgentForConversation(
state.conversations.find((conversation) => conversation.id === state.currentConversationId)?.agentId || null,
agents
)
: state.currentAgent
? agents.find((agent) => agent.id === state.currentAgent?.id) || agents[0]
: agents[0];
return { agents, currentAgent };
}),
setCurrentModel: (model) => set({ currentModel: model }),
newConversation: () => {
const state = get();
let conversations = [...state.conversations];
// Save current conversation if it has messages
if (state.messages.length > 0) {
const currentId = state.currentConversationId || generateConvId();
const existingIdx = conversations.findIndex(c => c.id === currentId);
const conv: Conversation = {
id: currentId,
title: deriveTitle(state.messages),
messages: [...state.messages],
sessionKey: state.sessionKey,
createdAt: existingIdx >= 0 ? conversations[existingIdx].createdAt : new Date(),
updatedAt: new Date(),
};
if (existingIdx >= 0) {
conversations[existingIdx] = conv;
} else {
conversations = [conv, ...conversations];
}
}
const conversations = upsertActiveConversation([...state.conversations], state);
set({
conversations,
@@ -135,21 +240,7 @@ export const useChatStore = create<ChatState>()(
switchConversation: (id: string) => {
const state = get();
let conversations = [...state.conversations];
// Save current conversation first
if (state.messages.length > 0 && state.currentConversationId) {
const existingIdx = conversations.findIndex(c => c.id === state.currentConversationId);
if (existingIdx >= 0) {
conversations[existingIdx] = {
...conversations[existingIdx],
messages: [...state.messages],
sessionKey: state.sessionKey,
updatedAt: new Date(),
title: deriveTitle(state.messages),
};
}
}
const conversations = upsertActiveConversation([...state.conversations], state);
const target = conversations.find(c => c.id === id);
if (target) {
@@ -157,6 +248,7 @@ export const useChatStore = create<ChatState>()(
conversations,
messages: [...target.messages],
sessionKey: target.sessionKey,
currentAgent: resolveAgentForConversation(target.agentId, state.agents),
currentConversationId: target.id,
isStreaming: false,
});
@@ -174,7 +266,9 @@ export const useChatStore = create<ChatState>()(
},
sendMessage: async (content: string) => {
const { addMessage, currentModel, sessionKey } = get();
const { addMessage, currentAgent, sessionKey } = get();
const effectiveSessionKey = sessionKey || `session_${Date.now()}`;
const effectiveAgentId = resolveGatewayAgentId(currentAgent);
// Add user message
const userMsg: Message = {
@@ -199,22 +293,115 @@ export const useChatStore = create<ChatState>()(
try {
const client = getGatewayClient();
// Try streaming first (OpenFang WebSocket)
if (client.getState() === 'connected') {
const { runId } = await client.chatStream(
content,
{
onDelta: (delta: string) => {
set((state) => ({
messages: state.messages.map((m) =>
m.id === assistantId
? { ...m, content: m.content + delta }
: m
),
}));
},
onTool: (tool: string, input: string, output: string) => {
const toolMsg: Message = {
id: `tool_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
role: 'tool',
content: output || input,
timestamp: new Date(),
runId,
toolName: tool,
toolInput: input,
toolOutput: output,
};
set((state) => ({ messages: [...state.messages, toolMsg] }));
},
onHand: (name: string, status: string, result?: unknown) => {
const handMsg: Message = {
id: `hand_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
role: 'hand',
content: result
? (typeof result === 'string' ? result : JSON.stringify(result, null, 2))
: `Hand: ${name} - ${status}`,
timestamp: new Date(),
runId,
handName: name,
handStatus: status,
handResult: result,
};
set((state) => ({ messages: [...state.messages, handMsg] }));
},
onComplete: () => {
set((state) => ({
isStreaming: false,
messages: state.messages.map((m) =>
m.id === assistantId ? { ...m, streaming: false } : m
),
}));
},
onError: (error: string) => {
set((state) => ({
isStreaming: false,
messages: state.messages.map((m) =>
m.id === assistantId
? { ...m, content: `⚠️ ${error}`, streaming: false, error }
: m
),
}));
},
},
{
sessionKey: effectiveSessionKey,
agentId: effectiveAgentId,
}
);
if (!sessionKey) {
set({ sessionKey: effectiveSessionKey });
}
// Store runId on the message for correlation
set((state) => ({
messages: state.messages.map((m) =>
m.id === assistantId ? { ...m, runId } : m
),
}));
return;
}
// Fallback to REST API (non-streaming)
const result = await client.chat(content, {
sessionKey: sessionKey || undefined,
model: currentModel,
sessionKey: effectiveSessionKey,
agentId: effectiveAgentId,
});
// Store session key for continuity
if (!sessionKey) {
set({ sessionKey: `session_${Date.now()}` });
set({ sessionKey: effectiveSessionKey });
}
// OpenFang returns response directly (no WebSocket streaming)
if (result.response) {
set((state) => ({
isStreaming: false,
messages: state.messages.map((m) =>
m.id === assistantId
? { ...m, content: result.response || '', streaming: false }
: m
),
}));
return;
}
// The actual streaming content comes via the 'agent' event listener
// set in initStreamListener(). The runId links events to this message.
// Store runId on the message for correlation
set((state) => ({
messages: state.messages.map((m) =>
m.id === assistantId ? { ...m, toolInput: result.runId } : m
m.id === assistantId ? { ...m, runId: result.runId } : m
),
}));
} catch (err: any) {
@@ -241,29 +428,37 @@ export const useChatStore = create<ChatState>()(
const unsubscribe = client.onAgentStream((delta: AgentStreamDelta) => {
const state = get();
// Find the currently streaming assistant message
const streamingMsg = [...state.messages]
.reverse()
.find((m) => m.role === 'assistant' && m.streaming);
.find((m) => (
m.role === 'assistant'
&& m.streaming
&& (
(delta.runId && m.runId === delta.runId)
|| (!delta.runId && m.runId == null)
)
))
|| [...state.messages]
.reverse()
.find((m) => m.role === 'assistant' && m.streaming);
if (!streamingMsg) return;
if (delta.stream === 'assistant' && delta.delta) {
// Append text delta to the streaming message
if (delta.stream === 'assistant' && (delta.delta || delta.content)) {
set((s) => ({
messages: s.messages.map((m) =>
m.id === streamingMsg.id
? { ...m, content: m.content + delta.delta }
? { ...m, content: m.content + (delta.delta || delta.content || '') }
: m
),
}));
} else if (delta.stream === 'tool') {
// Add a tool message
const toolMsg: Message = {
id: `tool_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
role: 'tool',
content: delta.toolOutput || '',
timestamp: new Date(),
runId: delta.runId,
toolName: delta.tool,
toolInput: delta.toolInput,
toolOutput: delta.toolOutput,
@@ -271,7 +466,6 @@ export const useChatStore = create<ChatState>()(
set((s) => ({ messages: [...s.messages, toolMsg] }));
} else if (delta.stream === 'lifecycle') {
if (delta.phase === 'end' || delta.phase === 'error') {
// Mark streaming complete
set((s) => ({
isStreaming: false,
messages: s.messages.map((m) =>
@@ -285,6 +479,37 @@ export const useChatStore = create<ChatState>()(
),
}));
}
} else if (delta.stream === 'hand') {
// Handle Hand trigger events from OpenFang
const handMsg: Message = {
id: `hand_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
role: 'hand',
content: delta.handResult
? (typeof delta.handResult === 'string' ? delta.handResult : JSON.stringify(delta.handResult, null, 2))
: `Hand: ${delta.handName || 'unknown'} - ${delta.handStatus || 'triggered'}`,
timestamp: new Date(),
runId: delta.runId,
handName: delta.handName,
handStatus: delta.handStatus,
handResult: delta.handResult,
};
set((s) => ({ messages: [...s.messages, handMsg] }));
} else if (delta.stream === 'workflow') {
// Handle Workflow execution events from OpenFang
const workflowMsg: Message = {
id: `workflow_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
role: 'workflow',
content: delta.workflowResult
? (typeof delta.workflowResult === 'string' ? delta.workflowResult : JSON.stringify(delta.workflowResult, null, 2))
: `Workflow: ${delta.workflowId || 'unknown'} step ${delta.workflowStep || '?'} - ${delta.workflowStatus || 'running'}`,
timestamp: new Date(),
runId: delta.runId,
workflowId: delta.workflowId,
workflowStep: delta.workflowStep,
workflowStatus: delta.workflowStatus,
workflowResult: delta.workflowResult,
};
set((s) => ({ messages: [...s.messages, workflowMsg] }));
}
});