当前位置：首页 > news >正文

动手实践OpenHands系列学习笔记7：前端界面设计

news 2025/7/6 8:10:50

笔记7：前端界面设计

一、引言

前端界面是用户与AI代理系统交互的核心媒介，直接影响用户体验和系统易用性。OpenHands作为先进的AI驱动软件开发代理平台，拥有精心设计的用户界面。本笔记将探讨现代前端架构与状态管理原理，分析OpenHands的界面设计，并通过实践构建核心聊天组件。

二、现代前端架构与状态管理理论

2.1 前端架构模式

组件化架构: 将UI拆分为独立、可复用的组件
单向数据流: 数据沿着组件层次结构自上而下流动
声明式渲染: 描述UI应该是什么样子，而不是如何更新它
虚拟DOM: 提高渲染效率的内存中DOM表示
客户端路由: 在不重新加载页面的情况下更改URL和视图

2.2 常见前端框架比较

框架	特点	适用场景
React	组件化、虚拟DOM、JSX语法	大型应用、团队协作
Vue	易上手、模板语法、响应式系统	中小型应用、快速开发
Angular	完整MVC架构、TypeScript、依赖注入	企业级应用、严格类型需求
Svelte	编译时优化、无虚拟DOM	高性能应用、轻量级需求

2.3 状态管理模式

集中式状态管理: 将应用状态集中存储（Redux, Vuex, Pinia等）
原子化状态管理: 将状态分解为原子单位（Recoil, Jotai）
上下文状态管理: 利用框架内置上下文API（React Context, Vue Provide/Inject）
服务端状态管理: 处理服务端数据获取和缓存（React Query, SWR）
状态机: 基于状态转换图的状态管理（XState）

2.4 前端设计原则

一致性原则: 界面元素和行为保持一致
反馈原则: 用户操作应有清晰的反馈
易错性原则: 最小化用户错误可能性
效率原则: 减少用户完成任务所需步骤
可学习性原则: 界面易于学习和理解
可访问性原则: 适应不同用户群体的需求

三、OpenHands前端界面分析

从README_CN.md中的截图和描述，我们可以分析OpenHands的界面设计：

3.1 界面架构

OpenHands前端界面可能采用了以下结构：

对话式聊天界面: 类似现代聊天应用的交互方式
工具执行区域: 显示工具执行过程和结果
上下文管理: 维护会话历史和状态
响应式设计: 适应不同设备和屏幕尺寸

3.2 主要界面组件

聊天对话框: 显示用户和AI之间的对话历史
输入区域: 用户输入命令和问题的文本框
工具执行面板: 显示命令执行过程和结果
状态指示器: 显示系统当前状态(思考中、执行命令等)
文件浏览器: 浏览和操作文件系统
设置面板: 配置AI模型、API密钥等

3.3 交互设计特点

实时反馈: 执行命令时实时展示输出
交互历史: 保存完整的交互历史供回顾
自适应布局: 根据内容和屏幕大小调整布局
明确的状态转换: 通过视觉提示表明系统状态变化
错误处理: 友好的错误提示和恢复机制

四、实践项目：构建OpenHands聊天界面核心组件

4.1 项目设置与依赖

首先创建基本的React项目结构：

# 创建项目
npx create-react-app openhands-chat-ui
cd openhands-chat-ui# 安装依赖
npm install axios react-markdown prismjs react-icons styled-components

4.2 定义核心组件结构

项目结构：

src/
├── components/
│   ├── Chat/
│   │   ├── ChatContainer.js
│   │   ├── ChatMessage.js
│   │   ├── ChatInput.js
│   │   ├── MessageContent.js
│   │   ├── CodeBlock.js
│   │   └── ToolExecution.js
│   ├── UI/
│   │   ├── Button.js
│   │   ├── Spinner.js
│   │   └── Tooltip.js
│   └── Layout/
│       ├── Header.js
│       ├── Sidebar.js
│       └── MainLayout.js
├── context/
│   ├── ChatContext.js
│   └── AgentContext.js
├── hooks/
│   ├── useChat.js
│   └── useToolExecution.js
├── services/
│   ├── api.js
│   └── agentService.js
├── styles/
│   ├── theme.js
│   └── GlobalStyles.js
├── utils/
│   ├── markdown.js
│   └── codeHighlighter.js
├── App.js
└── index.js

4.3 实现核心聊天组件

ChatContainer.js - 聊天容器组件：

// src/components/Chat/ChatContainer.js
import React, { useRef, useEffect } from 'react';
import styled from 'styled-components';
import { useChat } from '../../hooks/useChat';
import ChatMessage from './ChatMessage';
import ChatInput from './ChatInput';const Container = styled.div`display: flex;flex-direction: column;height: 100%;background-color: ${props => props.theme.colors.background};
`;const MessagesContainer = styled.div`flex: 1;overflow-y: auto;padding: 1rem;display: flex;flex-direction: column;gap: 1rem;
`;const StatusIndicator = styled.div`padding: 0.5rem;font-size: 0.85rem;color: ${props => props.theme.colors.textSecondary};font-style: italic;display: flex;align-items: center;gap: 0.5rem;&:before {content: '';display: block;width: 8px;height: 8px;border-radius: 50%;background-color: ${props =>props.status === 'thinking' ? props.theme.colors.warning :props.status === 'executing' ? props.theme.colors.info :props.status === 'idle' ? props.theme.colors.success :props.theme.colors.error};}
`;const ChatContainer = () => {const { messages, status, sendMessage, clearChat } = useChat();const messagesEndRef = useRef(null);// 自动滚动到最新消息useEffect(() => {if (messagesEndRef.current) {messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });}}, [messages]);// 状态文本映射const statusText = {idle: '就绪',thinking: '思考中...',executing: '执行命令中...',error: '发生错误'};return (<Container><MessagesContainer>{messages.map((message, index) => (<ChatMessagekey={message.id || index}message={message}/>))}<div ref={messagesEndRef} /></MessagesContainer><StatusIndicator status={status}>{statusText[status] || '就绪'}</StatusIndicator><ChatInputonSendMessage={sendMessage}onClearChat={clearChat}disabled={status === 'thinking' || status === 'executing'}/></Container>);
};export default ChatContainer;

ChatMessage.js - 聊天消息组件：

// src/components/Chat/ChatMessage.js
import React from 'react';
import styled from 'styled-components';
import MessageContent from './MessageContent';
import ToolExecution from './ToolExecution';
import { FaUser, FaRobot } from 'react-icons/fa';const MessageContainer = styled.div`display: flex;gap: 1rem;padding: 0.75rem;border-radius: 8px;background-color: ${props =>props.role === 'user'? props.theme.colors.messageBgUser: props.theme.colors.messageBgAgent};max-width: 90%;align-self: ${props => props.role === 'user' ? 'flex-end' : 'flex-start'};
`;const Avatar = styled.div`width: 32px;height: 32px;border-radius: 50%;background-color: ${props =>props.role === 'user'? props.theme.colors.primary: props.theme.colors.secondary};display: flex;align-items: center;justify-content: center;color: white;flex-shrink: 0;
`;const ContentContainer = styled.div`display: flex;flex-direction: column;gap: 0.5rem;word-break: break-word;
`;const Timestamp = styled.div`font-size: 0.75rem;color: ${props => props.theme.colors.textTertiary};align-self: flex-end;
`;const ChatMessage = ({ message }) => {const { role, content, timestamp, toolExecutions = [] } = message;// 格式化时间戳const formattedTime = timestamp? new Date(timestamp).toLocaleTimeString(): '';return (<MessageContainer role={role}><Avatar role={role}>{role === 'user' ? <FaUser /> : <FaRobot />}</Avatar><ContentContainer><MessageContent content={content} />{toolExecutions.map((tool, index) => (<ToolExecutionkey={`tool-${index}`}tool={tool}/>))}{timestamp && <Timestamp>{formattedTime}</Timestamp>}</ContentContainer></MessageContainer>);
};export default ChatMessage;

MessageContent.js - 消息内容解析组件：

// src/components/Chat/MessageContent.js
import React from 'react';
import ReactMarkdown from 'react-markdown';
import styled from 'styled-components';
import CodeBlock from './CodeBlock';const ContentWrapper = styled.div`font-size: 1rem;line-height: 1.5;p {margin: 0.5rem 0;}ul, ol {margin: 0.5rem 0;padding-left: 1.5rem;}a {color: ${props => props.theme.colors.link};text-decoration: none;&:hover {text-decoration: underline;}}
`;// 自定义组件渲染
const renderers = {code: ({ node, inline, className, children, ...props }) => {const match = /language-(\w+)/.exec(className || '');return !inline && match ? (<CodeBlocklanguage={match[1]}value={String(children).replace(/\n$/, '')}{...props}/>) : (<code className={className} {...props}>{children}</code>);}
};const MessageContent = ({ content }) => {if (!content) return null;return (<ContentWrapper><ReactMarkdown components={renderers}>{content}</ReactMarkdown></ContentWrapper>);
};export default MessageContent;

CodeBlock.js - 代码高亮组件：

// src/components/Chat/CodeBlock.js
import React, { useEffect } from 'react';
import styled from 'styled-components';
import Prism from 'prismjs';
import 'prismjs/themes/prism-tomorrow.css';
import 'prismjs/components/prism-bash';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-python';
import 'prismjs/components/prism-jsx';
import 'prismjs/components/prism-typescript';
import 'prismjs/components/prism-json';
import { FaCopy } from 'react-icons/fa';const Pre = styled.pre`background-color: ${props => props.theme.colors.codeBg};border-radius: 4px;padding: 1rem;margin: 0.5rem 0;overflow-x: auto;position: relative;font-family: 'Fira Code', monospace;font-size: 0.9rem;&:hover .copy-button {opacity: 1;}
`;const Code = styled.code`font-family: inherit;
`;const CopyButton = styled.button`position: absolute;top: 0.5rem;right: 0.5rem;background-color: ${props => props.theme.colors.copyButtonBg};color: ${props => props.theme.colors.copyButtonText};border: none;border-radius: 4px;padding: 0.25rem 0.5rem;font-size: 0.8rem;cursor: pointer;display: flex;align-items: center;gap: 0.25rem;opacity: 0;transition: opacity 0.2s, background-color 0.2s;&:hover {background-color: ${props => props.theme.colors.copyButtonHoverBg};}&.copied {background-color: ${props => props.theme.colors.success};}
`;const CodeHeader = styled.div`background-color: ${props => props.theme.colors.codeHeaderBg};color: ${props => props.theme.colors.codeHeaderText};padding: 0.5rem 1rem;border-top-left-radius: 4px;border-top-right-radius: 4px;font-size: 0.8rem;border-bottom: 1px solid ${props => props.theme.colors.border};margin-top: -1rem;margin-left: -1rem;margin-right: -1rem;margin-bottom: 1rem;
`;const CodeBlock = ({ language, value }) => {useEffect(() => {Prism.highlightAll();}, [value, language]);const handleCopy = () => {navigator.clipboard.writeText(value);// 显示复制成功状态const button = document.querySelector('.copy-button');button.classList.add('copied');button.innerHTML = '<span>已复制!</span>';setTimeout(() => {button.classList.remove('copied');button.innerHTML = '<svg class="react-icon"><use xlink:href="#copy-icon"></use></svg><span>复制</span>';}, 2000);};return (<><Pre><CodeHeader>{language || 'code'}</CodeHeader><CopyButton onClick={handleCopy} className="copy-button"><FaCopy size={12} /><span>复制</span></CopyButton><Code className={`language-${language || 'text'}`}>{value}</Code></Pre></>);
};export default CodeBlock;

ToolExecution.js - 工具执行组件：

// src/components/Chat/ToolExecution.js
import React, { useState } from 'react';
import styled from 'styled-components';
import { FaTerminal, FaChevronDown, FaChevronRight } from 'react-icons/fa';const Container = styled.div`border: 1px solid ${props => props.theme.colors.border};border-radius: 4px;margin: 0.5rem 0;overflow: hidden;
`;const Header = styled.div`background-color: ${props => props.theme.colors.toolHeaderBg};padding: 0.5rem;display: flex;align-items: center;justify-content: space-between;cursor: pointer;&:hover {background-color: ${props => props.theme.colors.toolHeaderHoverBg};}
`;const ToolName = styled.div`display: flex;align-items: center;gap: 0.5rem;color: ${props => props.theme.colors.toolHeaderText};font-weight: 500;font-size: 0.9rem;
`;const ToolStatus = styled.span`padding: 0.2rem 0.5rem;border-radius: 4px;font-size: 0.75rem;background-color: ${props =>props.status === 'success' ? props.theme.colors.successLight :props.status === 'error' ? props.theme.colors.errorLight :props.status === 'running' ? props.theme.colors.warningLight :props.theme.colors.infoLight};color: ${props =>props.status === 'success' ? props.theme.colors.success :props.status === 'error' ? props.theme.colors.error :props.status === 'running' ? props.theme.colors.warning :props.theme.colors.info};
`;const Content = styled.div`padding: 0.5rem;background-color: ${props => props.theme.colors.toolContentBg};border-top: 1px solid ${props => props.theme.colors.border};max-height: ${props => props.expanded ? '500px' : '0'};overflow-y: auto;transition: max-height 0.3s;
`;const CommandLine = styled.div`font-family: monospace;background-color: ${props => props.theme.colors.codeBg};color: ${props => props.theme.colors.codeText};padding: 0.5rem;border-radius: 4px;margin-bottom: 0.5rem;white-space: pre-wrap;overflow-x: auto;
`;const Output = styled.pre`font-family: monospace;background-color: ${props => props.theme.colors.outputBg};color: ${props => props.theme.colors.outputText};padding: 0.5rem;border-radius: 4px;margin: 0;white-space: pre-wrap;overflow-x: auto;max-height: 300px;overflow-y: auto;
`;const ToolExecution = ({ tool }) => {const [expanded, setExpanded] = useState(true);const { name, command, status, output, error } = tool;// 状态文本映射const statusText = {success: '成功',error: '失败',running: '执行中',pending: '等待中'};return (<Container><Header onClick={() => setExpanded(!expanded)}><ToolName><FaTerminal />{name || '命令执行'}</ToolName><div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}><ToolStatus status={status}>{statusText[status] || status}</ToolStatus>{expanded ? <FaChevronDown size={12} /> : <FaChevronRight size={12} />}</div></Header>{expanded && (<Content expanded={expanded}>{command && <CommandLine>$ {command}</CommandLine>}{output && <Output>{output}</Output>}{error && (<Output style={{ color: '#ff5555' }}>{error}</Output>)}</Content>)}</Container>);
};export default ToolExecution;

ChatInput.js - 聊天输入组件：

// src/components/Chat/ChatInput.js
import React, { useState, useRef, useEffect } from 'react';
import styled from 'styled-components';
import { FaPaperPlane, FaEraser } from 'react-icons/fa';const Container = styled.div`padding: 1rem;border-top: 1px solid ${props => props.theme.colors.border};background-color: ${props => props.theme.colors.inputBg};
`;const Form = styled.form`display: flex;gap: 0.5rem;
`;const TextArea = styled.textarea`flex: 1;padding: 0.75rem;border-radius: 8px;border: 1px solid ${props => props.theme.colors.border};background-color: ${props => props.theme.colors.inputFieldBg};color: ${props => props.theme.colors.text};font-family: inherit;font-size: 0.95rem;resize: none;min-height: 50px;max-height: 200px;outline: none;transition: border-color 0.2s;&:focus {border-color: ${props => props.theme.colors.primary};}&:disabled {background-color: ${props => props.theme.colors.disabledBg};cursor: not-allowed;}
`;const ButtonGroup = styled.div`display: flex;flex-direction: column;gap: 0.5rem;
`;const Button = styled.button`display: flex;align-items: center;justify-content: center;padding: 0.75rem;border-radius: 8px;border: none;background-color: ${props =>props.clear? props.theme.colors.warningLight: props.theme.colors.primary};color: ${props =>props.clear? props.theme.colors.warning: props.theme.colors.buttonText};cursor: pointer;transition: background-color 0.2s;&:hover {background-color: ${props =>props.clear? props.theme.colors.warningLightHover: props.theme.colors.primaryHover};}&:disabled {background-color: ${props => props.theme.colors.disabledBg};cursor: not-allowed;}
`;const Tooltip = styled.div`position: absolute;bottom: 100%;left: 50%;transform: translateX(-50%);padding: 0.25rem 0.5rem;background-color: ${props => props.theme.colors.tooltipBg};color: ${props => props.theme.colors.tooltipText};border-radius: 4px;font-size: 0.75rem;white-space: nowrap;opacity: 0;transition: opacity 0.2s;pointer-events: none;${Button}:hover & {opacity: 1;}
`;const ChatInput = ({ onSendMessage, onClearChat, disabled }) => {const [message, setMessage] = useState('');const textareaRef = useRef(null);// 自动调整文本区域高度useEffect(() => {const textarea = textareaRef.current;if (textarea) {textarea.style.height = 'auto';textarea.style.height = `${textarea.scrollHeight}px`;}}, [message]);const handleSubmit = (e) => {e.preventDefault();if (message.trim() && !disabled) {onSendMessage(message);setMessage('');}};const handleKeyDown = (e) => {// Ctrl+Enter提交if (e.key === 'Enter' && e.ctrlKey) {handleSubmit(e);}};return (<Container><Form onSubmit={handleSubmit}><TextArearef={textareaRef}value={message}onChange={(e) => setMessage(e.target.value)}onKeyDown={handleKeyDown}placeholder={disabled ? "请等待当前操作完成..." : "输入消息...（Ctrl+Enter发送）"}disabled={disabled}rows={1}/><ButtonGroup><Button type="submit" disabled={!message.trim() || disabled}><FaPaperPlane /><Tooltip>发送</Tooltip></Button><Buttontype="button"clear="true"onClick={onClearChat}disabled={disabled}><FaEraser /><Tooltip>清除对话</Tooltip></Button></ButtonGroup></Form></Container>);
};export default ChatInput;

4.4 实现聊天上下文管理

ChatContext.js - 聊天上下文管理：

// src/context/ChatContext.js
import React, { createContext, useReducer, useEffect } from 'react';// 初始状态
const initialState = {messages: [],status: 'idle', // idle, thinking, executing, errorerror: null,conversationId: null
};// 操作类型
const ActionTypes = {ADD_MESSAGE: 'ADD_MESSAGE',UPDATE_STATUS: 'UPDATE_STATUS',SET_ERROR: 'SET_ERROR',CLEAR_CHAT: 'CLEAR_CHAT',ADD_TOOL_EXECUTION: 'ADD_TOOL_EXECUTION',UPDATE_TOOL_EXECUTION: 'UPDATE_TOOL_EXECUTION',SET_CONVERSATION_ID: 'SET_CONVERSATION_ID',
};// Reducer函数
const chatReducer = (state, action) => {switch (action.type) {case ActionTypes.ADD_MESSAGE:return {...state,messages: [...state.messages, {...action.payload,id: `msg_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`,timestamp: new Date().toISOString()}]};case ActionTypes.UPDATE_STATUS:return {...state,status: action.payload};case ActionTypes.SET_ERROR:return {...state,error: action.payload,status: 'error'};case ActionTypes.CLEAR_CHAT:return {...initialState,conversationId: null};case ActionTypes.ADD_TOOL_EXECUTION:return {...state,messages: state.messages.map(msg =>msg.id === action.payload.messageId? {...msg,toolExecutions: [...(msg.toolExecutions || []),{...action.payload.tool,id: `tool_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`}]}: msg)};case ActionTypes.UPDATE_TOOL_EXECUTION:return {...state,messages: state.messages.map(msg =>msg.id === action.payload.messageId? {...msg,toolExecutions: (msg.toolExecutions || []).map(tool =>tool.id === action.payload.toolId? { ...tool, ...action.payload.updates }: tool)}: msg)};case ActionTypes.SET_CONVERSATION_ID:return {...state,conversationId: action.payload};default:return state;}
};// 创建上下文
export const ChatContext = createContext();// 上下文提供者组件
export const ChatProvider = ({ children }) => {const [state, dispatch] = useReducer(chatReducer, initialState);// 从localStorage恢复会话useEffect(() => {try {const savedChat = localStorage.getItem('openhandsChat');if (savedChat) {const parsedChat = JSON.parse(savedChat);// 恢复消息parsedChat.messages.forEach(message => {dispatch({type: ActionTypes.ADD_MESSAGE,payload: message});});// 恢复会话IDif (parsedChat.conversationId) {dispatch({type: ActionTypes.SET_CONVERSATION_ID,payload: parsedChat.conversationId});}}} catch (error) {console.error('Failed to restore chat:', error);}}, []);// 保存到localStorageuseEffect(() => {if (state.messages.length > 0) {const chatToSave = {messages: state.messages,conversationId: state.conversationId};localStorage.setItem('openhandsChat', JSON.stringify(chatToSave));}}, [state.messages, state.conversationId]);// 导出的操作const addMessage = (message) => {dispatch({type: ActionTypes.ADD_MESSAGE,payload: message});};const updateStatus = (status) => {dispatch({type: ActionTypes.UPDATE_STATUS,payload: status});};const setError = (error) => {dispatch({type: ActionTypes.SET_ERROR,payload: error});};const clearChat = () => {localStorage.removeItem('openhandsChat');dispatch({ type: ActionTypes.CLEAR_CHAT });};const addToolExecution = (messageId, tool) => {dispatch({type: ActionTypes.ADD_TOOL_EXECUTION,payload: { messageId, tool }});};const updateToolExecution = (messageId, toolId, updates) => {dispatch({type: ActionTypes.UPDATE_TOOL_EXECUTION,payload: { messageId, toolId, updates }});};const setConversationId = (id) => {dispatch({type: ActionTypes.SET_CONVERSATION_ID,payload: id});};const value = {...state,addMessage,updateStatus,setError,clearChat,addToolExecution,updateToolExecution,setConversationId};return (<ChatContext.Provider value={value}>{children}</ChatContext.Provider>);
};

4.5 实现API服务和钩子

api.js - API服务：

// src/services/api.js
import axios from 'axios';const API_BASE_URL = process.env.REACT_APP_API_BASE_URL || 'http://localhost:3000/api';const apiClient = axios.create({baseURL: API_BASE_URL,headers: {'Content-Type': 'application/json',},
});export const chatApi = {// 发送消息到代理sendMessage: async (message, conversationId = null) => {const response = await apiClient.post('/chat', {message,conversationId});return response.data;},// 创建新会话createConversation: async () => {const response = await apiClient.post('/conversations');return response.data;},// 获取会话历史getConversationHistory: async (conversationId) => {const response = await apiClient.get(`/conversations/${conversationId}`);return response.data;},// 执行命令executeCommand: async (command, conversationId) => {const response = await apiClient.post('/execute', {command,conversationId});return response.data;}
};export const configApi = {// 获取代理配置getConfig: async () => {const response = await apiClient.get('/config');return response.data;},// 更新API密钥updateApiKey: async (provider, apiKey) => {const response = await apiClient.post('/config/api-key', {provider,apiKey});return response.data;},// 获取支持的模型列表getAvailableModels: async () => {const response = await apiClient.get('/models');return response.data;}
};export default apiClient;

useChat.js - 聊天钩子：

// src/hooks/useChat.js
import { useContext, useCallback } from 'react';
import { ChatContext } from '../context/ChatContext';
import { chatApi } from '../services/api';export const useChat = () => {const {messages,status,error,conversationId,addMessage,updateStatus,setError,clearChat,addToolExecution,updateToolExecution,setConversationId} = useContext(ChatContext);// 发送消息const sendMessage = useCallback(async (content) => {try {// 添加用户消息addMessage({role: 'user',content});// 更新状态为思考中updateStatus('thinking');// 发送API请求const response = await chatApi.sendMessage(content, conversationId);// 如果没有会话ID，设置会话IDif (!conversationId && response.conversationId) {setConversationId(response.conversationId);}// 如果有工具调用if (response.toolCalls && response.toolCalls.length > 0) {// 添加助手消息const assistantMessage = {role: 'assistant',content: response.thinking || '我需要执行一些操作...'};addMessage(assistantMessage);// 更新状态为执行中updateStatus('executing');// 处理工具调用for (const toolCall of response.toolCalls) {// 添加工具执行记录addToolExecution(assistantMessage.id, {name: toolCall.name,command: toolCall.command || toolCall.parameters?.command,status: 'running'});try {// 执行工具调用const toolResponse = await chatApi.executeCommand(toolCall.command || toolCall.parameters?.command,conversationId);// 更新工具执行状态updateToolExecution(assistantMessage.id, toolCall.id, {status: 'success',output: toolResponse.output});} catch (error) {// 处理工具执行错误updateToolExecution(assistantMessage.id, toolCall.id, {status: 'error',error: error.message || '执行失败'});}}// 获取最终响应const finalResponse = await chatApi.sendMessage('你刚刚执行的命令已完成，请提供下一步操作或总结结果',conversationId);// 添加最终助手消息addMessage({role: 'assistant',content: finalResponse.content});} else {// 普通响应，直接添加助手消息addMessage({role: 'assistant',content: response.content});}// 更新状态为空闲updateStatus('idle');} catch (error) {console.error('Error sending message:', error);setError(error.message || '发送消息失败');// 添加错误消息addMessage({role: 'system',content: `发生错误: ${error.message || '未知错误'}`});// 更新状态为空闲updateStatus('idle');}}, [conversationId,addMessage,updateStatus,setError,addToolExecution,updateToolExecution,setConversationId]);return {messages,status,error,conversationId,sendMessage,clearChat};
};

useToolExecution.js - 工具执行钩子：

// src/hooks/useToolExecution.js
import { useState, useCallback } from 'react';
import { chatApi } from '../services/api';export const useToolExecution = (conversationId) => {const [executingTools, setExecutingTools] = useState({});// 执行工具命令const executeCommand = useCallback(async (command, options = {}) => {const toolId = options.toolId || `tool_${Date.now()}`;try {// 更新工具状态为运行中setExecutingTools(prev => ({...prev,[toolId]: {status: 'running',command,name: options.name || '命令执行',startTime: Date.now()}}));// 执行命令const response = await chatApi.executeCommand(command, conversationId);// 更新工具状态为成功setExecutingTools(prev => ({...prev,[toolId]: {...prev[toolId],status: 'success',output: response.output,endTime: Date.now(),duration: Date.now() - prev[toolId].startTime}}));return {success: true,toolId,output: response.output};} catch (error) {// 更新工具状态为失败setExecutingTools(prev => ({...prev,[toolId]: {...prev[toolId],status: 'error',error: error.message || '执行失败',endTime: Date.now(),duration: Date.now() - prev[toolId].startTime}}));return {success: false,toolId,error: error.message || '执行失败'};}}, [conversationId]);// 清除工具执行记录const clearToolExecutions = useCallback(() => {setExecutingTools({});}, []);return {executingTools,executeCommand,clearToolExecutions};
};

4.6 构建应用主界面

MainLayout.js - 主布局组件：

// src/components/Layout/MainLayout.js
import React, { useState } from 'react';
import styled from 'styled-components';
import Header from './Header';
import Sidebar from './Sidebar';
import ChatContainer from '../Chat/ChatContainer';const Container = styled.div`display: flex;flex-direction: column;height: 100vh;overflow: hidden;background-color: ${props => props.theme.colors.appBg};
`;const Content = styled.div`display: flex;flex: 1;overflow: hidden;
`;const MainContent = styled.main`flex: 1;overflow: hidden;display: flex;flex-direction: column;
`;const MainLayout = () => {const [sidebarOpen, setSidebarOpen] = useState(true);const [selectedConversation, setSelectedConversation] = useState(null);const toggleSidebar = () => {setSidebarOpen(!sidebarOpen);};return (<Container><Header toggleSidebar={toggleSidebar} /><Content>{sidebarOpen && (<SidebarselectedConversation={selectedConversation}onSelectConversation={setSelectedConversation}/>)}<MainContent><ChatContainerconversationId={selectedConversation?.id}/></MainContent></Content></Container>);
};export default MainLayout;

Header.js - 页头组件：

// src/components/Layout/Header.js
import React from 'react';
import styled from 'styled-components';
import { FaBars, FaCog, FaRobot } from 'react-icons/fa';const HeaderContainer = styled.header`display: flex;align-items: center;justify-content: space-between;padding: 0.75rem 1rem;background-color: ${props => props.theme.colors.headerBg};border-bottom: 1px solid ${props => props.theme.colors.border};box-shadow: 0 1px 3px rgba(0,0,0,0.1);
`;const Logo = styled.div`display: flex;align-items: center;gap: 0.5rem;font-weight: 600;font-size: 1.25rem;color: ${props => props.theme.colors.headerText};
`;const IconButton = styled.button`background: none;border: none;color: ${props => props.theme.colors.headerIcon};font-size: 1.25rem;cursor: pointer;display: flex;align-items: center;justify-content: center;padding: 0.5rem;border-radius: 4px;transition: background-color 0.2s;&:hover {background-color: ${props => props.theme.colors.headerIconHoverBg};}
`;const Actions = styled.div`display: flex;align-items: center;gap: 0.5rem;
`;const Header = ({ toggleSidebar }) => {return (<HeaderContainer><div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}><IconButton onClick={toggleSidebar}><FaBars /></IconButton><Logo><FaRobot /><span>OpenHands</span></Logo></div><Actions><IconButton><FaCog /></IconButton></Actions></HeaderContainer>);
};export default Header;

Sidebar.js - 侧边栏组件：

// src/components/Layout/Sidebar.js
import React, { useState } from 'react';
import styled from 'styled-components';
import { FaPlus, FaTrash, FaComments, FaSearch } from 'react-icons/fa';const SidebarContainer = styled.aside`width: 260px;background-color: ${props => props.theme.colors.sidebarBg};border-right: 1px solid ${props => props.theme.colors.border};display: flex;flex-direction: column;overflow: hidden;
`;const SidebarHeader = styled.div`padding: 1rem;border-bottom: 1px solid ${props => props.theme.colors.border};
`;const NewChatButton = styled.button`display: flex;align-items: center;justify-content: center;gap: 0.5rem;width: 100%;padding: 0.75rem;background-color: ${props => props.theme.colors.primary};color: ${props => props.theme.colors.buttonText};border: none;border-radius: 6px;font-weight: 500;cursor: pointer;transition: background-color 0.2s;&:hover {background-color: ${props => props.theme.colors.primaryHover};}
`;const SearchInput = styled.div`display: flex;align-items: center;background-color: ${props => props.theme.colors.inputFieldBg};border: 1px solid ${props => props.theme.colors.border};border-radius: 6px;margin-top: 1rem;padding: 0.5rem;svg {margin-right: 0.5rem;color: ${props => props.theme.colors.textTertiary};}input {flex: 1;border: none;background: none;outline: none;color: ${props => props.theme.colors.text};font-size: 0.9rem;}
`;const ConversationList = styled.div`flex: 1;overflow-y: auto;padding: 1rem;
`;const ConversationItem = styled.div`padding: 0.75rem;border-radius: 6px;cursor: pointer;display: flex;align-items: center;justify-content: space-between;background-color: ${props =>props.selected ? props.theme.colors.sidebarItemActiveBg : 'transparent'};color: ${props =>props.selected ? props.theme.colors.sidebarItemActiveText : props.theme.colors.sidebarItemText};&:hover {background-color: ${props =>props.selected? props.theme.colors.sidebarItemActiveBg: props.theme.colors.sidebarItemHoverBg};}.conversation-title {display: flex;align-items: center;gap: 0.5rem;font-size: 0.9rem;}.conversation-actions {opacity: 0;transition: opacity 0.2s;}&:hover .conversation-actions {opacity: 1;}
`;const DeleteButton = styled.button`background: none;border: none;color: ${props => props.theme.colors.sidebarItemText};cursor: pointer;display: flex;align-items: center;padding: 0.25rem;border-radius: 4px;&:hover {color: ${props => props.theme.colors.error};background-color: ${props => props.theme.colors.errorLight};}
`;// 示例会话数据
const mockConversations = [{ id: 1, title: "修复登录问题", date: "2023-05-15" },{ id: 2, title: "API集成助手", date: "2023-05-14" },{ id: 3, title: "重构用户管理模块", date: "2023-05-12" },{ id: 4, title: "Docker部署问题", date: "2023-05-10" },{ id: 5, title: "性能优化建议", date: "2023-05-08" }
];const Sidebar = ({ selectedConversation, onSelectConversation }) => {const [conversations, setConversations] = useState(mockConversations);const [searchQuery, setSearchQuery] = useState('');// 过滤对话列表const filteredConversations = conversations.filter(conv => conv.title.toLowerCase().includes(searchQuery.toLowerCase()));// 创建新对话const createNewChat = () => {const newConversation = {id: Date.now(),title: "新对话",date: new Date().toISOString().slice(0, 10)};setConversations([newConversation, ...conversations]);onSelectConversation(newConversation);};// 删除对话const deleteConversation = (id, e) => {e.stopPropagation(); // 防止触发选择事件const updatedConversations = conversations.filter(conv => conv.id !== id);setConversations(updatedConversations);// 如果删除的是当前选中的对话，清除选择if (selectedConversation?.id === id) {onSelectConversation(null);}};return (<SidebarContainer><SidebarHeader><NewChatButton onClick={createNewChat}><FaPlus /><span>新建对话</span></NewChatButton><SearchInput><FaSearch /><inputtype="text"placeholder="搜索对话"value={searchQuery}onChange={e => setSearchQuery(e.target.value)}/></SearchInput></SidebarHeader><ConversationList>{filteredConversations.map(conversation => (<ConversationItemkey={conversation.id}selected={selectedConversation?.id === conversation.id}onClick={() => onSelectConversation(conversation)}><div className="conversation-title"><FaComments /><span>{conversation.title}</span></div><div className="conversation-actions"><DeleteButtononClick={(e) => deleteConversation(conversation.id, e)}><FaTrash size={14} /></DeleteButton></div></ConversationItem>))}</ConversationList></SidebarContainer>);
};export default Sidebar;

App.js - 应用入口：

// src/App.js
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { ChatProvider } from './context/ChatContext';
import MainLayout from './components/Layout/MainLayout';
import GlobalStyles from './styles/GlobalStyles';
import theme from './styles/theme';const App = () => {return (<ThemeProvider theme={theme}><ChatProvider><GlobalStyles /><MainLayout /></ChatProvider></ThemeProvider>);
};export default App;

theme.js - 主题定义：

// src/styles/theme.js
const theme = {colors: {// 主色调primary: '#5965F6',primaryHover: '#4854E0',secondary: '#38BDF8',secondaryHover: '#27ACE7',// 文字颜色text: '#1E293B',textSecondary: '#64748B',textTertiary: '#94A3B8',buttonText: '#FFFFFF',// 背景颜色background: '#F8FAFC',appBg: '#F1F5F9',headerBg: '#FFFFFF',sidebarBg: '#FFFFFF',messageBgUser: '#EEF2FF',messageBgAgent: '#FFFFFF',inputBg: '#FFFFFF',inputFieldBg: '#F1F5F9',// 边框和分隔线border: '#E2E8F0',// 侧边栏项目sidebarItemText: '#64748B',sidebarItemHoverBg: '#F1F5F9',sidebarItemActiveBg: '#EEF2FF',sidebarItemActiveText: '#5965F6',// 代码和输出codeBg: '#1E293B',codeText: '#E2E8F0',codeHeaderBg: '#0F172A',codeHeaderText: '#94A3B8',outputBg: '#0F172A',outputText: '#E2E8F0',// 工具执行toolHeaderBg: '#F8FAFC',toolHeaderHoverBg: '#F1F5F9',toolHeaderText: '#1E293B',toolContentBg: '#FFFFFF',// 状态颜色success: '#10B981',successLight: '#D1FAE5',error: '#EF4444',errorLight: '#FEE2E2',warning: '#F59E0B',warningLight: '#FEF3C7',warningLightHover: '#FDE68A',info: '#3B82F6',infoLight: '#DBEAFE',// 其他UI元素headerIcon: '#64748B',headerIconHoverBg: '#F1F5F9',disabledBg: '#E2E8F0',copyButtonBg: 'rgba(15, 23, 42, 0.5)',copyButtonText: '#E2E8F0',copyButtonHoverBg: 'rgba(15, 23, 42, 0.7)',tooltipBg: '#1E293B',tooltipText: '#FFFFFF',link: '#5965F6',},// 断点breakpoints: {xs: '480px',sm: '640px',md: '768px',lg: '1024px',xl: '1280px',xxl: '1536px',},// 字体fonts: {body: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",code: "'Fira Code', 'Consolas', monospace",},// 阴影shadows: {sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',},// 过渡transitions: {default: '0.2s ease',slow: '0.3s ease-in-out',fast: '0.1s ease',},// 圆角radii: {sm: '0.25rem',md: '0.375rem',lg: '0.5rem',xl: '0.75rem',xxl: '1rem',full: '9999px',},
};export default theme;

GlobalStyles.js - 全局样式：

// src/styles/GlobalStyles.js
import { createGlobalStyle } from 'styled-components';const GlobalStyles = createGlobalStyle`* {box-sizing: border-box;margin: 0;padding: 0;}html, body {height: 100%;}body {font-family: ${props => props.theme.fonts.body};font-size: 16px;line-height: 1.5;color: ${props => props.theme.colors.text};background-color: ${props => props.theme.colors.background};-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}#root {height: 100%;}button, input, textarea, select {font-family: inherit;font-size: inherit;color: inherit;}a {color: ${props => props.theme.colors.link};text-decoration: none;}/* 滚动条样式 */::-webkit-scrollbar {width: 6px;height: 6px;}::-webkit-scrollbar-track {background: transparent;}::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, 0.2);border-radius: 3px;}::-webkit-scrollbar-thumb:hover {background-color: rgba(0, 0, 0, 0.3);}/* 修复移动端点击延迟 */@media (hover: none) {a, button {cursor: default !important;-webkit-tap-highlight-color: transparent;}}/* 代码字体预加载 */@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap');/* 基础字体预加载 */@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
`;export default GlobalStyles;