+ + + {t`MCP Gateways Management`} + + } + extra={ + + } + > + {gateways.length > 0 ? ( + + ) : ( + + + + )} + + + {/* 创建/编辑网关模态框 */} + setIsModalOpen(false)} + loading={loading} + generateGatewayUrls={(gatewayName?: string) => generateGatewayUrls(gatewayName || '')} + handleCopyToClipboard={handleCopyToClipboard} + /> + + ); +} + + +/** + * 网关表单模态框组件属性 + */ +interface GatewayModalProps { + /** 模态框是否打开 */ + open: boolean; + /** 正在编辑的网关（null 表示创建新网关） */ + gateway: MCPGateway | null; + /** 可用的 MCP 服务列表 */ + availableMCPs: string[]; + /** MCP 客户端列表 */ + mcpClients: IMCPClient[]; + /** 保存网关的回调函数 */ + onSave: (values: GatewayFormValues) => Promise; + /** 取消操作的回调函数 */ + onCancel: () => void; + /** 加载状态 */ + loading: boolean; + /** 生成网关 URLs 的函数 */ + generateGatewayUrls: (gatewayName?: string) => { sse: string; streamableHttp: string }; + /** 复制到剪贴板的处理函数 */ + handleCopyToClipboard: (text: string) => Promise; +} + +/** + * 网关表单模态框组件 + */ +const GatewayModal: React.FC = ({ + open, + gateway, + mcpClients, + onSave, + onCancel, + loading, + generateGatewayUrls, + handleCopyToClipboard, +}) => { + const [form] = Form.useForm(); + const [currentGatewayName, setCurrentGatewayName] = useState(''); + + // 当模态框打开时，设置表单初始值 + useEffect(() => { + if (open) { + if (gateway) { + // 编辑模式：使用转换函数将 allowMCPs 和 blockMCPTools 转换为 TreeSelect 格式 + const allowMCPs = gateway.allowMCPs || []; + const blockMCPTools = gateway.blockMCPTools || []; + const combinedSelection = convertMCPConfigToTreeSelection(allowMCPs, blockMCPTools, mcpClients); + + const initialValues = { + name: gateway.name, + description: gateway.description || '', + allowMCPs: combinedSelection, + }; + form.setFieldsValue(initialValues); + setCurrentGatewayName(gateway.name); + } else { + form.resetFields(); + setCurrentGatewayName(''); + } + } + }, [open, gateway, form, mcpClients]); + + /** + * 处理表单提交 + */ + const handleSubmit = async () => { + try { + const values = await form.validateFields(); + + // 使用转换函数将 TreeSelect 选中值转换为 allowMCPs 和 blockMCPTools + const selectedValues = values.allowMCPs || []; + const { allowMCPs, blockMCPTools } = convertTreeSelectionToMCPConfig(selectedValues, mcpClients); + + const gatewayValues = { + ...values, + allowMCPs, + blockMCPTools, + }; + + await onSave(gatewayValues); + } catch (error) { + console.log('Form validation failed:', error); + } + }; + return ( + + + + setCurrentGatewayName(e.target.value)} + /> + + + + + + + {/* MCP 服务选择 */} + + x.status != "disabled").map((x) => { + return { + title: x.serverName, + key: x.serverName, + value: x.serverName, + children: x.tools.map((tool) => { + return { + title: ( + + {tool.originalName || tool.name} + + ), + key: tool.displayName, + value: tool.displayName, + }; + }), + }; + })} + /> + + + {/* SSE 连接地址展示和复制 */} + + currentGatewayName && handleCopyToClipboard(generateGatewayUrls(currentGatewayName).sse)} + /> + } + /> + + + {/* HTTP 流式连接地址展示和复制 */} + + currentGatewayName && handleCopyToClipboard(generateGatewayUrls(currentGatewayName).streamableHttp)} + /> + } + /> + + + + ); +}; + +export default MCPGatewaysSettings; \ No newline at end of file diff --git a/packages/web/src/components/MCPManagement.tsx b/packages/web/src/components/MCPManagement.tsx new file mode 100644 index 0000000..4a2557a --- /dev/null +++ b/packages/web/src/components/MCPManagement.tsx @@ -0,0 +1,1374 @@ +import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from "react"; +import { + List, + Button, + Tag, + Space, + Empty, + Dropdown, + Modal, + Drawer, + Descriptions, + Typography, + message, + Select, + Input, + Spin, + Alert, + Form, + Radio, +} from "antd"; +import { + ReloadOutlined, + MoreOutlined, + InfoCircleOutlined, + PlayCircleOutlined, + StopOutlined, + DeleteOutlined, + PlusOutlined, + FilterOutlined, + SearchOutlined, + ExperimentOutlined, + SettingOutlined, + MinusCircleOutlined, + ApiOutlined, + FileTextOutlined, +} from "@ant-design/icons"; +import { call, callElectron } from "../common/call"; +import { t } from "../i18n"; +import { HyperChatCompletionTool, IMCPClient, MCPServerConfig, MCPGatewaySchema } from "@dadigua/hyperchat-shared"; +import Editor from "@monaco-editor/react"; +import { WorkspaceInfo } from "../pages/workspace/types"; +import { useForceUpdate } from "../hooks"; +import { MCPGatewaysSettings } from "./MCPGatewaysSettings"; +import type { z } from 'zod'; + +const { Title, Text } = Typography; + + + + + +interface MCPManagementProps { + workspace: WorkspaceInfo; + mcpClients: IMCPClient[]; + onRefresh: () => Promise; +} + +// MCP 配置表单数据结构 +interface MCPFormValues { + _type?: 'edit' | 'create'; + _name?: string; + name: string; + type: 'stdio' | 'sse' | 'streamableHttp'; + command?: string; + args?: string[]; + env?: Record; + _envList?: { name: string; value: string }[]; + url?: string; + headers?: string | Record; +} + +export interface MCPManagementRef { + addMcpServer: () => void; + refreshMcpClients: () => void; +} + +export const MCPManagement = forwardRef(({ workspace, mcpClients, onRefresh }, ref) => { + let reflesh = useForceUpdate(); + + const [mcpRefreshing, setMcpRefreshing] = useState(false); + const [mcpDetailDrawer, setMcpDetailDrawer] = useState(false); + const [selectedMcpClient, setSelectedMcpClient] = useState(null); + const [addMcpModalOpen, setAddMcpModalOpen] = useState(false); + const [statusFilter, setStatusFilter] = useState("all"); + const [searchText, setSearchText] = useState(""); + // Scope filters removed in Agent-centered architecture + const [toolsModalOpen, setToolsModalOpen] = useState(false); + const [selectedClientTools, setSelectedClientTools] = useState([]); + const [selectedClientName, setSelectedClientName] = useState(""); + + // 工具测试相关状态 + const [testToolModalOpen, setTestToolModalOpen] = useState(false); + const [selectedTool, setSelectedTool] = useState(null); + const [testParams, setTestParams] = useState("{}"); + const [testRunning, setTestRunning] = useState(false); + const [testResult, setTestResult] = useState(null); + const [testError, setTestError] = useState(null); + + // MCP 配置表单相关状态 + const [mcpForm] = Form.useForm(); + const [loadingOpenMCP, setLoadingOpenMCP] = useState(false); + const [mcpConfigResult, setMcpConfigResult] = useState<{ data: any; error: any }>({ data: null, error: null }); + + // MCP Gateways 相关状态 + const [mcpGatewaysDrawer, setMcpGatewaysDrawer] = useState(false); + const [mcpGateways, setMcpGateways] = useState[]>([]); + + // Monaco编辑器引用 + const monacoRef = useRef(null); + const editorRef = useRef(null); + + // 判断是否为第一个工作区（只有第一个工作区才能设置MCP网关） + const isFirstWorkspace = workspace.isPrimary; + + // 加载MCP Gateways配置 + const loadMCPGateways = async () => { + if (!isFirstWorkspace) return; + + try { + const settings = await call("getAppSettings"); + const gateways = (settings.mcpGateWays?.filter((gateway: any) => + gateway.name && typeof gateway.name === 'string' + ) || []) as z.infer[]; + setMcpGateways(gateways); + } catch (error) { + console.error("Failed to load MCP gateways:", error); + message.error(t`Failed to load MCP gateways`); + } + }; + + // 更新MCP Gateways配置 + const updateMCPGateways = async (gateways: z.infer[]) => { + if (!isFirstWorkspace) return; + + try { + const updates = { mcpGateWays: gateways }; + await call("updateAppSettings", { updates }); + + // 刷新 MCP 路由以应用新的网关配置 + try { + await call("refreshMcpRoutes"); + console.log('MCP routes refreshed successfully'); + } catch (routeError) { + console.warn('Failed to refresh MCP routes, but settings were saved:', routeError); + } + + setMcpGateways(gateways); + message.success(t`MCP Gateways updated successfully`); + } catch (error) { + console.error("Failed to update MCP gateways:", error); + message.error(t`Failed to update MCP gateways`); + } + }; + + // 显示MCP Gateways设置 + const showMCPGateways = () => { + if (!isFirstWorkspace) { + message.warning(t`MCP Gateways can only be configured in the first workspace`); + return; + } + loadMCPGateways(); + setMcpGatewaysDrawer(true); + }; + + // 添加MCP服务器 + const addMcpServer = () => { + mcpForm.resetFields(); + setMcpConfigResult({ data: null, error: null }); + setAddMcpModalOpen(true); + }; + + // 编辑MCP服务器 + const editMcpServer = (client: IMCPClient) => { + // 准备表单数据进行编辑 + let formValues = { + ...client.config, + name: client.serverName, + } as any; + + formValues._name = client.serverName; + formValues._type = "edit"; + formValues.command = [ + formValues.command || "", + ...formValues.args || [], + ].join(" "); + formValues._envList = []; + + // 转换环境变量格式 + for (let key in (formValues.env || {})) { + formValues._envList.push({ + name: key, + value: formValues.env[key], + }); + } + + formValues.type = formValues?.type || formValues?.hyperchat?.type || "stdio"; + formValues.url = formValues?.url || formValues?.hyperchat?.url || ""; + + // 转换 headers 格式 + formValues.headers = Object.entries(formValues.headers || {}) + .map(([key, value]) => `${key}=${value}`) + .join("\n"); + + mcpForm.resetFields(); + mcpForm.setFieldsValue(formValues); + setMcpConfigResult({ data: null, error: null }); + setAddMcpModalOpen(true); + }; + + // 刷新MCP客户端列表 + const refreshMcpClients = async () => { + try { + setMcpRefreshing(true); + + if (workspace.isGlobal) { + // 全局工作区：强制重新加载全局MCP客户端 + await call("forceReloadMcpClients"); + } else { + // 项目工作区：强制重新加载工作区特定的MCP客户端 + try { + await call("forceReloadWorkspaceMcpClients"); + } catch (error) { + // 如果工作区MCP强制重新加载失败，回退到全局强制重新加载 + console.warn("Workspace MCP force reload failed, falling back to global force reload:", error); + await call("forceReloadMcpClients"); + } + } + + // 调用父组件的刷新函数 + await onRefresh(); + + message.success(t`MCP clients reloaded successfully`); + } catch (error) { + console.error("Failed to reload MCP clients:", error); + message.error(t`Failed to reload MCP clients`); + } finally { + setMcpRefreshing(false); + } + }; + + // 暴露方法给父组件 + useImperativeHandle(ref, () => ({ + addMcpServer, + refreshMcpClients + }), []); + + // 重启MCP客户端 + const restartMcpClient = async (client: IMCPClient) => { + try { + // 使用新的工作区特定的重启方法 + await call("manageWorkspaceMcpClient", { + clientName: client.serverName, + action: "restart", + workspacePath: workspace.path + }); + + message.success(t`MCP client restarted successfully`); + + // 重启成功后刷新前端数据（只刷新MCP数据） + await onRefresh(); + } catch (error) { + console.error(`Failed to restart MCP client ${client.serverName}:`, error); + message.error(t`Failed to restart MCP client`); + } + }; + + // 停用MCP客户端 + const disableMcpClient = async (client: IMCPClient) => { + try { + // 使用新的工作区特定的禁用方法 + await call("manageWorkspaceMcpClient", { + clientName: client.serverName, + action: "disable", + workspacePath: workspace.path + }); + message.success(t`MCP client disabled successfully`); + + // 停用成功后刷新前端数据（只刷新MCP数据） + await onRefresh(); + } catch (error) { + console.error(`Failed to disable MCP client ${client.serverName}:`, error); + message.error(t`Failed to disable MCP client`); + } + }; + + // 启用MCP客户端 + const enableMcpClient = async (client: IMCPClient) => { + try { + // 使用新的工作区特定的启用方法 + await call("manageWorkspaceMcpClient", { + clientName: client.serverName, + action: "enable", + workspacePath: workspace.path + }); + message.success(t`MCP client enabled successfully`); + + // 启用成功后刷新前端数据（只刷新MCP数据） + await onRefresh(); + } catch (error) { + console.error(`Failed to enable MCP client ${client.serverName}:`, error); + message.error(t`Failed to enable MCP client`); + } + }; + + // 打开MCP配置文件（仅在Electron环境） + const openMcpConfigFile = async () => { + if (!window.isElectron) { + message.warning(t`This feature is only available in desktop app`); + return; + } + + try { + // 构建MCP配置文件路径：workspacePath/.hyperchat/mcp.json + const mcpConfigPath = `${workspace.path}/.hyperchat/mcp.json`; + + await callElectron("openExplorer", { path: mcpConfigPath }); + message.success(t`MCP configuration file opened in file explorer`); + } catch (error) { + console.error("Failed to open MCP config file:", error); + message.error(t`Failed to open MCP configuration file`); + } + }; + + // 删除MCP客户端 + const deleteMcpClient = async (client: IMCPClient) => { + try { + await call("deleteWorkspaceMcpServerConfig", { + serverName: client.serverName, + workspacePath: workspace.path + }); + message.success(t`MCP client deleted successfully`); + + // 删除成功后刷新前端数据（只刷新MCP数据） + await onRefresh(); + } catch (error) { + console.error(`Failed to delete MCP client ${client.serverName}:`, error); + message.error(t`Failed to delete MCP client`); + } + }; + + // 显示MCP客户端详情 + const showMcpClientDetails = (client: IMCPClient) => { + setSelectedMcpClient(client); + setMcpDetailDrawer(true); + }; + + // 显示工具列表模态框 + const showToolsModal = (client: IMCPClient) => { + setSelectedClientTools(client.tools || []); + setSelectedClientName(client.serverName); + setToolsModalOpen(true); + }; + + // 打开工具测试模态框 + const openTestToolModal = (tool: HyperChatCompletionTool) => { + setSelectedTool(tool); + setTestParams(generateDefaultParams(tool.inputSchema)); + setTestResult(null); + setTestError(null); + setTestToolModalOpen(true); + }; + + // 生成默认参数 + const generateDefaultParams = (schema: any): string => { + try { + const properties = schema.properties || {}; + const defaultObj: any = {}; + + for (const [key, prop] of Object.entries(properties) as [string, any][]) { + if (prop.type === 'string') { + defaultObj[key] = prop.enum ? prop.enum[0] : ''; + } else if (prop.type === 'number') { + defaultObj[key] = 0; + } else if (prop.type === 'boolean') { + defaultObj[key] = false; + } else if (prop.type === 'array') { + defaultObj[key] = []; + } else if (prop.type === 'object') { + defaultObj[key] = {}; + } + } + + return JSON.stringify(defaultObj, null, 2); + } catch (error) { + return '{}'; + } + }; + + // 验证参数 + const validateParams = (params: string, schema: any): { valid: boolean; error?: string } => { + try { + const parsedParams = JSON.parse(params); + + // 检查必需参数 + if (schema.required) { + for (const requiredKey of schema.required) { + if (!(requiredKey in parsedParams)) { + return { valid: false, error: `${t`Missing required parameter:`} ${requiredKey}` }; + } + } + } + + // 检查参数类型 + if (schema.properties) { + for (const [key, value] of Object.entries(parsedParams)) { + const propSchema = schema.properties[key]; + if (!propSchema && schema.additionalProperties === false) { + return { valid: false, error: `${t`Unknown parameter:`} ${key}` }; + } + } + } + + return { valid: true }; + } catch (error) { + return { valid: false, error: t`Invalid JSON format` }; + } + }; + + // 执行工具测试 + const runToolTest = async () => { + if (!selectedTool) return; + + const validation = validateParams(testParams, selectedTool.inputSchema); + if (!validation.valid) { + setTestError(validation.error || t`Invalid parameters`); + return; + } + + setTestRunning(true); + setTestResult(null); + setTestError(null); + + try { + const parsedParams = JSON.parse(testParams); + + const result = await call("mcpCallToolWithWorkspace", { + workspacePath: workspace.path, + name: selectedTool.clientName, + functionName: selectedTool.originalName, + args: parsedParams + }); + + setTestResult(result); + } catch (error: any) { + console.error("Tool test error:", error); + setTestError(error.message || t`Tool execution failed`); + } finally { + setTestRunning(false); + } + }; + + // 配置Monaco编辑器 + const handleEditorBeforeMount = (monaco: any) => { + monacoRef.current = monaco; + }; + + const handleEditorMount = (editor: any, monaco: any) => { + editorRef.current = editor; + + // 当选中工具改变时，更新JSON Schema + if (selectedTool && selectedTool.inputSchema) { + configureMonacoSchema(monaco, selectedTool.inputSchema); + } + }; + + // 配置Monaco的JSON Schema验证 + const configureMonacoSchema = (monaco: any, inputSchema: any) => { + if (!monaco) return; + + // 将inputSchema转换为完整的JSON Schema + const schema = { + $schema: "http://json-schema.org/draft-07/schema#", + ...inputSchema, + additionalProperties: inputSchema.additionalProperties !== false + }; + + // 设置诊断选项 + monaco.languages.json.jsonDefaults.setDiagnosticsOptions({ + validate: true, + schemas: [{ + uri: "http://hyperchat/tool-params-schema.json", + fileMatch: ["*"], + schema: schema + }], + schemaValidation: "error", + allowComments: false, + trailingCommas: "error" + }); + }; + + // 当选中工具改变时，更新Schema + useEffect(() => { + if (monacoRef.current && selectedTool && selectedTool.inputSchema) { + configureMonacoSchema(monacoRef.current, selectedTool.inputSchema); + } + }, [selectedTool]); + + // 过滤和排序MCP客户端 + const getFilteredMcpClients = () => { + // 将对象转换为数组并按 order 排序 + let filteredClients = Object.values(mcpClients) + .sort((a, b) => a.order - b.order); + + // Scope filtering removed in Agent-centered architecture + + // 按状态过滤 + if (statusFilter === "enabled") { + filteredClients = filteredClients.filter(client => { + const isDisabled = client.status === "disabled" || client.config?.disabled; + return !isDisabled; + }); + } else if (statusFilter === "disabled") { + filteredClients = filteredClients.filter(client => { + const isDisabled = client.status === "disabled" || client.config?.disabled; + return isDisabled; + }); + } + + // 按搜索文本过滤 + if (searchText.trim()) { + const searchLower = searchText.toLowerCase(); + filteredClients = filteredClients.filter(client => + client.serverName.toLowerCase().includes(searchLower) || + client.serverName?.toLowerCase().includes(searchLower) || + client.config?.type?.toLowerCase().includes(searchLower) + ); + } + + return filteredClients; + }; + + // 渲染工具列表的 Modal 内容 + const renderToolsModalContent = (tools: HyperChatCompletionTool[]) => { + return ( +

+ ( + } + onClick={() => openTestToolModal(tool)} + > + {t`Test`} + + ]} + > + {tool.name}} + description={ +

+ {tool.description || t`No description available`} +

+ } + /> + + )} + /> +

+ ); + }; + + + return ( + <> +

+ {`MCP (${getFilteredMcpClients().length}/${Object.keys(mcpClients).length})`} +

+ + {/* Scope filters removed in Agent-centered architecture */} + + {/* 搜索和过滤 */} +

+ + setSearchText(e.target.value)} + prefix={} + allowClear + style={{ flex: 1 }} + /> + + + + + + + {/* Scope selection removed in Agent-centered architecture */} + + {/* Scope display removed in Agent-centered architecture */} + + {/* 服务名称 */} + + + + + {/* 服务类型选择 */} + + { reflesh() }}> + stdio + sse + streamableHttp + + + + {/* 根据服务类型显示不同的配置项 */} + {(mcpForm.getFieldValue("type") === "sse" || + mcpForm.getFieldValue("type") === "streamableHttp") ? ( +

+ {/* HTTP 服务配置 */} + + + + + + +

+ ) : ( +

+ {/* 命令行服务配置 */} + + + + + {/* 环境变量配置 */} + + + {(fields, { add, remove }) => ( + <> + {fields.map(({ key, name, ...restField }) => ( +

+ + + + + + + + remove(name)} /> + +

+ ))} + + + + + )} + + +

+ )} + + {/* 操作结果显示 */} + {mcpConfigResult.data && ( +

Result:

{mcpConfigResult.data}

+ )} + {mcpConfigResult.error && ( +

Result:

{mcpConfigResult.error.toString()}

+ )} + + + {/* MCP客户端详情抽屉 */} + { + setMcpDetailDrawer(false); + setSelectedMcpClient(null); + }} + width={600} + > + {selectedMcpClient && ( +

+ + + {selectedMcpClient.serverName} + + + {selectedMcpClient.serverName || "N/A"} + + + + {selectedMcpClient.status === "disabled" ? t`Disabled` : + selectedMcpClient.status === "connected" ? t`Connected` : t`Disconnected`} + + + + {selectedMcpClient.config?.type || "stdio"} + + + + {selectedMcpClient.mcpType === "builtin" ? t`Built-in` : t`Custom`} + + + + {selectedMcpClient.tools?.length || 0} + + + {selectedMcpClient.resources?.length || 0} + + + {selectedMcpClient.prompts?.length || 0} + + + + {/* 工具列表 */} + {selectedMcpClient.tools && selectedMcpClient.tools.length > 0 && ( +

+ {t`Available Tools`} + ( + + + + )} + /> +

+ )} + + {/* 资源列表 */} + {selectedMcpClient.resources && selectedMcpClient.resources.length > 0 && ( +

+ {t`Available Resources`} + ( + + + + )} + /> +

+ )} + + {/* 配置信息 */} + {selectedMcpClient.config && ( +

+ {t`Configuration`} +

+                  {JSON.stringify(selectedMcpClient.config, null, 2)}
+

+ )} +

+ )} + + + {/* 工具列表模态框 */} + { + setToolsModalOpen(false); + setSelectedClientTools([]); + setSelectedClientName(""); + }} + footer={[ + + ]} + width={600} + > + {selectedClientTools.length > 0 ? ( + renderToolsModalContent(selectedClientTools) + ) : ( + + )} + + + {/* 工具测试模态框 */} + { + setTestToolModalOpen(false); + setSelectedTool(null); + setTestParams("{}"); + setTestResult(null); + setTestError(null); + }} + footer={[ + , + + ]} + width={800} + > + {selectedTool && ( +

+ {/* 工具描述 */} +

+ {t`Description`}: + {selectedTool.description || t`No description available`} +

+ + {/* 参数输入 */} +

+ {t`Parameters`}: +

+ setTestParams(value || "{}")} + beforeMount={handleEditorBeforeMount} + onMount={handleEditorMount} + options={{ + minimap: { enabled: false }, + fontSize: 14, + wordWrap: "on", + formatOnPaste: true, + formatOnType: true, + automaticLayout: true, + scrollBeyondLastLine: false, + quickSuggestions: { + other: true, + comments: false, + strings: true + }, + parameterHints: { + enabled: true + }, + suggestOnTriggerCharacters: true, + acceptSuggestionOnCommitCharacter: true, + tabCompletion: 'on', + wordBasedSuggestions: 'currentDocument' + }} + /> +

+ {selectedTool.inputSchema && selectedTool.inputSchema.properties && ( +

+ {t`Parameter Reference`}: +

+ {Object.entries(selectedTool.inputSchema.properties).map(([key, prop]: [string, any]) => ( +

+ {key} + + ({prop.type}) + {Array.isArray(selectedTool.inputSchema.required) && + selectedTool.inputSchema.required.includes(key) && + {t`Required`} + } + + {prop.description && ( +

+ {prop.description} +

+ )} + {prop.enum && ( +

+ {t`Options`}: {prop.enum.join(', ')} +

+ )} +

+ ))} +

+ )} +

+ + {/* 错误信息 */} + {testError && ( + + )} + + {/* 执行结果 */} + {testResult !== null && ( +

+ {t`Result`}: +

+                    {typeof testResult === 'string'
+                      ? testResult
+                      : JSON.stringify(testResult, null, 2)}
+

+ )} + + {/* 加载状态 */} + {testRunning && ( +

+ +

+ )} +

+ )} + + + {/* MCP Gateways 设置抽屉 */} + { + setMcpGatewaysDrawer(false); + setMcpGateways([]); + }} + styles={{ + body: { + padding: 16, + } + }} + > + {isFirstWorkspace && ( + client.serverName)} + mcpClients={mcpClients} + /> + )} + + + ); +}); \ No newline at end of file diff --git a/packages/web/src/components/ProviderSettings.tsx b/packages/web/src/components/ProviderSettings.tsx new file mode 100644 index 0000000..2a1abb5 --- /dev/null +++ b/packages/web/src/components/ProviderSettings.tsx @@ -0,0 +1,1165 @@ +import React, { useState, useEffect } from 'react'; +import { + Card, + Form, + Input, + Button, + Space, + Typography, + Tag, + Row, + Col, + message, + Modal, + Table, + Popconfirm, + Select, + Switch, + Radio, +} from 'antd'; +import { + PlusOutlined, + CheckOutlined, + EditOutlined, + DeleteOutlined, + SettingOutlined, + ArrowLeftOutlined, + ReloadOutlined, +} from '@ant-design/icons'; + +import type { AIModelConfigItem, ProviderConfig, KnownProvider } from '@dadigua/hyperchat-shared'; +import { useAISettings } from "../contexts/AppSettingsContext"; +import { t } from '../i18n'; +import { call } from '../common/call'; + +const { Title, Text } = Typography; +const { Option } = Select; + +// 模型编辑接口 +interface ModelFormData { + name?: string; + model: string; + type: 'llm' | 'embedding'; + toolMode: 'standard' | 'compatible'; + supportImage: boolean; + supportTool: boolean; + // Unknown provider specific fields + apiKey?: string; + baseURL?: string; +} + +// 远程模型信息接口 +interface RemoteModel { + id: string; + object: string; + created?: number; + owned_by?: string; +} + +// 智能模型选择器组件 +const SmartModelSelector: React.FC<{ + value?: string; + onChange?: (value: string) => void; + placeholder?: string; + remoteModels: RemoteModel[]; + loadingModels: boolean; + canFetchModels: boolean; + onRefreshModels: () => void; +}> = ({ + value, + onChange, + placeholder = t`e.g., gpt-4.1`, + remoteModels, + loadingModels, + canFetchModels, + onRefreshModels +}) => { + if (canFetchModels && remoteModels.length > 0) { + // 显示选择器 + return ( + + ); + } else { + // 显示输入框 + return ( + onChange?.(e.target.value)} + placeholder={placeholder} + suffix={ + canFetchModels ? ( + + )} + + handleDeleteModel(record)} + okText={t`Yes`} + cancelText={t`No`} + > + + + + ), + }, + ]; + + // 渲染提供商视图 + const renderProvidersView = () => ( +

+ {t`AI Provider Settings`} + + {t`Configure API keys for different AI providers. Click a provider to manage its models.`} + +

+ {/* */} +

+ + + {providers.map((provider) => ( +

+ + {!provider.isBuiltIn && ( + + )} + + + + +

+ + ); + + return ( +

+ {view === 'providers' ? renderProvidersView() : renderModelsView()} + + {/* API Key 配置 Modal */} + setIsApiKeyModalOpen(false)} + footer={null} + width={500} + > + {selectedProvider && ( + +

+ {selectedProvider.icon} + {selectedProvider.label} +

+ {selectedProvider.description} +

+ + + + + + {selectedProvider.isBuiltIn && ( + + + + )} + + {!selectedProvider.isBuiltIn && ( + + + + )} + + + + + +

+ + +

+ + )} + + + {/* 模型编辑 Modal */} + setIsModelModalOpen(false)} + footer={null} + width={600} + > + + + {/* Unknown provider specific fields */} + {selectedProvider?.key === 'unknown' && ( + <> + + + + + + + + )} + 0 + ? t`Select from ${remoteModels.length} available models` + : t`Enter model ID manually` + } + > + selectedProvider && fetchRemoteModels(selectedProvider)} + placeholder={t`e.g., gpt-4.1`} + /> + + + + + + + + LLM + Embedding + + + + + + + + +

+ + + + + + + + + + + + +

+ + +

+ + + + {/* 提供商管理 Modal */} + setIsProviderModalOpen(false)} + footer={null} + width={500} + > + + { + if (!value) return; + // 检查key是否唯一（编辑时排除自己） + const existingProvider = providers.find(p => + p.key === value && (!editingProvider || p.key !== editingProvider.key) + ); + if (existingProvider) { + throw new Error(t`Provider key already exists`); + } + } + } + ]} + > + + + + + + + + + + + + + +

+ + +

+ + + + ); +} diff --git a/packages/web/src/components/Schema2FormItems.tsx b/packages/web/src/components/Schema2FormItems.tsx new file mode 100644 index 0000000..974946c --- /dev/null +++ b/packages/web/src/components/Schema2FormItems.tsx @@ -0,0 +1,486 @@ +import React, { useCallback } from 'react'; +import { Form, Input, InputNumber, Select, Switch, Card, Button, Typography } from 'antd'; +import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons'; +import type { JSONSchema7, JSONSchema7Definition } from 'json-schema'; +import type { Rule } from 'antd/es/form'; + +const { Text } = Typography; + +interface Schema2FormItemsProps { + schema: JSONSchema7; + disabled?: boolean; + prefix?: string[]; +} + +export const Schema2FormItems: React.FC = ({ + schema, + disabled = false, + prefix = [] +}) => { + // 解析Schema的辅助函数 + const resolveSchema = useCallback((schema: JSONSchema7Definition): JSONSchema7 => { + if (typeof schema === 'boolean') { + return schema ? {} : { not: {} }; + } + return schema; + }, []); + + // 获取字段默认值 + const getDefaultValue = useCallback((fieldSchema: JSONSchema7): any => { + if (fieldSchema.default !== undefined) { + return fieldSchema.default; + } + + switch (fieldSchema.type) { + case 'string': + return ''; + case 'number': + case 'integer': + return 0; + case 'boolean': + return false; + case 'array': + return []; + case 'object': + return {}; + default: + return undefined; + } + }, []); + + // 渲染输入组件 + const renderInputComponent = useCallback((fieldSchema: JSONSchema7, fieldPath: string[]): React.ReactNode => { + const { type, enum: enumValues, minimum, maximum, maxLength, format } = fieldSchema; + + // 获取更好的placeholder文本 + const getPlaceholder = () => { + const fieldName = fieldPath[fieldPath.length - 1]; + if (fieldName === 'defaultModel') { + return '请选择默认模型 (例如: openai:gpt-4)'; + } + if (fieldName === 'apiKey') { + return '请输入API Key'; + } + if (fieldName === 'baseURL') { + return '请输入API基础地址'; + } + return fieldSchema.description || `请输入${fieldSchema.title || fieldPath.join('.')}`; + }; + + const commonProps = { + disabled, + placeholder: getPlaceholder(), + }; + + switch (type) { + case 'string': + if (enumValues && Array.isArray(enumValues)) { + return ( + + ); + } else if (fieldSchema.title?.toLowerCase().includes('password') || + fieldPath.some(p => p.toLowerCase().includes('password'))) { + return ; + } else if (format === 'email') { + return ; + } else if (format === 'uri' || format === 'url') { + return ; + } else if (maxLength && maxLength > 100) { + return ; + } else { + return ; + } + + case 'number': + case 'integer': + return ( + + ); + + case 'boolean': + return ; + + default: + return ; + } + }, [disabled]); + + // 渲染数组字段 + const renderArrayField = useCallback((fieldName: string, fieldSchema: JSONSchema7, fieldPath: string[]): React.ReactNode => { + const { title, description, items, minItems, maxItems } = fieldSchema; + + if (!items || typeof items === 'boolean') { + // 简单数组处理 + return ( + + + + ); + } + + const itemSchema = resolveSchema(items as JSONSchema7Definition); + + return ( + + { + if (minItems && names.length < minItems) { + return Promise.reject(new Error(`至少需要${minItems}个项目`)); + } + if (maxItems && names.length > maxItems) { + return Promise.reject(new Error(`最多只能有${maxItems}个项目`)); + } + }, + }, + ]} + > + {(fields, { add, remove }) => ( + <> + {fields.map(({ key, name, ...restField }) => ( +

+ {itemSchema.type === 'object' && itemSchema.properties ? ( + // 对象数组：每个项目显示为一个卡片 + +

+ +

+ + ) : ( + // 简单类型数组：每个项目显示为简单的输入框 +

+ + {renderInputComponent(itemSchema, fieldPath.concat(name.toString()))} + +

+ )} +

+ ))} + + + + + )} + + + ); + }, [disabled, schema.required, resolveSchema, renderInputComponent]); + + // 渲染Record类型字段（如API Keys） + const renderRecordField = useCallback((fieldName: string, fieldSchema: JSONSchema7, fieldPath: string[]) => { + const { title, description, additionalProperties } = fieldSchema; + + // 处理 Record 类型 + if (additionalProperties && typeof additionalProperties === 'object') { + const valueSchema = resolveSchema(additionalProperties); + + return ( + +

+ + {title || fieldName} + + + {/* 动态键值对编辑 */} + + {(fields, { add, remove }) => ( + <> + {fields.map(({ key, name, ...restField }) => ( + +

+ + + +

+ +

+ + ))} + + + + + )} + +

+ + ); + } + + // 简单的 Record 处理 + return ( + + + + ); + }, [disabled, schema.required, resolveSchema]); + + // 处理oneOf/anyOf条件schema + const renderConditionalField = useCallback((fieldName: string, fieldSchema: JSONSchema7, fieldPath: string[]): React.ReactNode => { + const { oneOf, anyOf, title, description } = fieldSchema; + const conditions = oneOf || anyOf || []; + + if (conditions.length === 0) return null; + + // 简化处理：如果条件中都有title，创建选择器 + const hasSelectableOptions = conditions.every(condition => + typeof condition === 'object' && condition.title + ); + + if (hasSelectableOptions) { + return ( + + + + ); + } + + // 复杂条件的处理，使用第一个条件作为默认 + const defaultCondition = resolveSchema(conditions[0] as JSONSchema7Definition); + return renderFormItem(fieldName, defaultCondition, fieldPath); + }, [disabled, schema.required, resolveSchema]); + + const renderFormItem = useCallback((fieldName: string, fieldSchema: JSONSchema7, fieldPath: string[]) => { + const { type, title, description, oneOf, anyOf, allOf, minimum, maximum, minLength, maxLength, pattern, format, additionalProperties } = fieldSchema; + + // 处理条件schema + if (oneOf || anyOf) { + return renderConditionalField(fieldName, fieldSchema, fieldPath); + } + + // 处理allOf - 合并所有条件 + if (allOf) { + const mergedSchema = allOf.reduce((acc: JSONSchema7, condition) => { + const conditionSchema = resolveSchema(condition as JSONSchema7Definition); + return { ...acc, ...(conditionSchema || {}) }; + }, {} as JSONSchema7); + const combinedSchema = Object.assign({}, fieldSchema as JSONSchema7, mergedSchema || {}); + return renderFormItem(fieldName, combinedSchema, fieldPath); + } + + // 处理Record类型（object with additionalProperties） + if (type === 'object' && additionalProperties && !fieldSchema.properties) { + return renderRecordField(fieldName, fieldSchema, fieldPath); + } + + // 处理嵌套对象 + if (type === 'object' && fieldSchema.properties) { + return ( + + + + ); + } + + // 处理数组类型 + if (type === 'array') { + return renderArrayField(fieldName, fieldSchema, fieldPath); + } + + // 创建增强的验证规则 + const rules: Rule[] = []; + + // 必填验证 + if (schema.required?.includes(fieldName)) { + rules.push({ required: true, message: `请输入${title || fieldName}` }); + } + + // 字符串验证 + if (type === 'string') { + if (minLength) { + rules.push({ min: minLength, message: `长度不能少于${minLength}个字符` }); + } + if (maxLength) { + rules.push({ max: maxLength, message: `长度不能超过${maxLength}个字符` }); + } + if (pattern) { + rules.push({ pattern: new RegExp(pattern), message: `格式不正确` }); + } + if (format === 'email') { + rules.push({ type: 'email', message: '请输入有效的邮箱地址' }); + } + if (format === 'url' || format === 'uri') { + rules.push({ type: 'url', message: '请输入有效的URL地址' }); + } + } + + // 数字验证 + if (type === 'number' || type === 'integer') { + if (minimum !== undefined) { + rules.push({ type: 'number', min: minimum, message: `值不能小于${minimum}` }); + } + if (maximum !== undefined) { + rules.push({ type: 'number', max: maximum, message: `值不能大于${maximum}` }); + } + } + + return ( + + {renderInputComponent(fieldSchema, fieldPath)} + + ); + }, [disabled, schema.required, renderConditionalField, renderArrayField, renderInputComponent, getDefaultValue]); + + const renderItems = useCallback(() => { + // 如果 schema 本身是数组类型，直接渲染数组字段 + if (schema.type === 'array') { + const fieldName = schema.title || 'items'; + return renderArrayField(fieldName, schema, prefix); + } + + if (!schema.properties) return null; + + return Object.entries(schema.properties).map(([fieldName, fieldSchema]) => { + const typedFieldSchema = fieldSchema as JSONSchema7; + const fieldPath = [...prefix, fieldName]; + + return renderFormItem(fieldName, typedFieldSchema, fieldPath); + }); + }, [schema, prefix, renderFormItem, renderArrayField]); + + return ( + <> + {renderItems()} + + ); +}; + +export default Schema2FormItems; \ No newline at end of file diff --git a/packages/web/src/components/ServerDirectoryBrowser.tsx b/packages/web/src/components/ServerDirectoryBrowser.tsx new file mode 100644 index 0000000..92aa7e8 --- /dev/null +++ b/packages/web/src/components/ServerDirectoryBrowser.tsx @@ -0,0 +1,323 @@ +import React, { useState, useEffect } from "react"; +import { + Modal, + Tree, + Button, + Input, + Space, + message, + Spin, + Empty, + Typography, + Alert, +} from "antd"; +import { + FolderOutlined, + FileOutlined, + HomeOutlined, + ReloadOutlined, + FolderOpenOutlined, +} from "@ant-design/icons"; +import { call } from "../common/call"; + +const { Text } = Typography; + +interface ServerDirectoryNode { + name: string; + path: string; + type: "file" | "directory"; + children?: ServerDirectoryNode[]; + loaded?: boolean; +} + +interface ServerDirectoryBrowserProps { + visible: boolean; + onClose: () => void; + onSelect: (path: string) => void; + title?: string; + initialPath?: string; +} + +/** + * 服务器端目录浏览器组件 + * 类似 VS Code Web 版本的目录选择功能 + */ +export function ServerDirectoryBrowser({ + visible, + onClose, + onSelect, + title = "选择服务器目录", + initialPath = "~", +}: ServerDirectoryBrowserProps) { + const [treeData, setTreeData] = useState([]); + const [loading, setLoading] = useState(false); + const [selectedPath, setSelectedPath] = useState(""); + const [expandedKeys, setExpandedKeys] = useState([]); + const [currentPath, setCurrentPath] = useState(initialPath); + const [isRootPath, setIsRootPath] = useState(false); + + // 加载目录内容 + const loadDirectory = async (path: string): Promise => { + try { + const result = await call("listServerDirectory", { path }); + return result.map((item: any) => ({ + name: item.name, + path: item.path, + type: item.type, + loaded: item.type === "file", + children: item.type === "directory" ? [] : undefined, + })); + } catch (error) { + console.error("Failed to load directory:", error); + message.error(`加载目录失败: ${path}`); + return []; + } + }; + + // 检查是否为根路径 + const checkIsRootPath = async (path: string) => { + try { + const parentPath = await call("getServerParentDirectory", { path }); + setIsRootPath(parentPath === path); + } catch (error) { + // 如果无法获取父目录，可能已经是根目录 + setIsRootPath(true); + } + }; + + // 初始化加载根目录 + const initializeTree = async () => { + setLoading(true); + try { + const homeDir = await loadDirectory(currentPath); + setTreeData(homeDir); + if (homeDir.length > 0) { + setExpandedKeys([homeDir[0]!.path]); + } + // 检查是否为根路径 + await checkIsRootPath(currentPath); + } catch (error) { + console.error("Failed to initialize tree:", error); + } finally { + setLoading(false); + } + }; + + // 懒加载子目录 + const loadChildren = async (node: ServerDirectoryNode): Promise => { + if (node.type === "file" || node.loaded) { + return node.children || []; + } + + try { + const children = await loadDirectory(node.path); + return children; + } catch (error) { + console.error("Failed to load children:", error); + return []; + } + }; + + // 更新树节点 + const updateTreeData = ( + data: ServerDirectoryNode[], + key: string, + children: ServerDirectoryNode[] + ): ServerDirectoryNode[] => { + return data.map((node) => { + if (node.path === key) { + return { + ...node, + children, + loaded: true, + }; + } + if (node.children) { + return { + ...node, + children: updateTreeData(node.children, key, children), + }; + } + return node; + }); + }; + + // 处理目录展开 + const handleExpand = async (expandedKeys: React.Key[], info: any) => { + setExpandedKeys(expandedKeys as string[]); + + if (info.expanded && info.node.type === "directory" && !info.node.loaded) { + const children = await loadChildren(info.node); + setTreeData((prevData) => updateTreeData(prevData, info.node.path, children)); + } + }; + + // 处理目录选择 + const handleSelect = (selectedKeys: React.Key[], info: any) => { + console.log("Tree node selected:", info.node); // 调试日志 + if (info.node.nodeType === "directory") { + setSelectedPath(info.node.key); // 只记录选择的路径，不改变当前浏览路径 + } + }; + + // 转换为 Tree 组件需要的格式 + const convertToTreeData = (nodes: ServerDirectoryNode[]): any[] => { + return nodes.map((node) => ({ + title: ( + + {node.type === "directory" ? : } + {node.name} + + ), + key: node.path, + nodeType: node.type, // 使用 nodeType 而不是 type 避免冲突 + isLeaf: node.type === "file", + children: node.children ? convertToTreeData(node.children) : undefined, + })); + }; + + // 导航到父目录 + const navigateToParent = async () => { + try { + const parentPath = await call("getServerParentDirectory", { path: currentPath }); + setCurrentPath(parentPath); + // 不自动更新选择路径，让用户手动选择 + await initializeTree(); + } catch (error) { + console.error("Failed to get parent directory:", error); + message.error("获取父目录失败"); + } + }; + + // 导航到主目录 + const navigateToHome = async () => { + setCurrentPath("~"); + // 不自动更新选择路径，让用户手动选择 + await initializeTree(); + }; + + // 刷新当前目录 + const refreshCurrentDirectory = async () => { + // 只刷新目录树，不改变选择 + await initializeTree(); + }; + + // 确认选择 + const handleConfirm = () => { + if (!selectedPath) { + message.warning("请选择一个目录"); + return; + } + onSelect(selectedPath); + onClose(); + }; + + // 当对话框打开时初始化 + useEffect(() => { + if (visible) { + setSelectedPath(""); // 初始化时不预选任何路径 + initializeTree(); + } + }, [visible, currentPath]); + + return ( + + 取消 + , + , + ]} + > +

+ {/* 工具栏 */} +

+ + + + + +

+ + {/* 当前浏览路径 */} +

+ setCurrentPath(e.target.value)} + onPressEnter={initializeTree} + placeholder="输入要浏览的路径..." + addonBefore="浏览路径:" + /> +

+ + {/* 选择的路径显示 */} +

+ setSelectedPath(e.target.value)} + placeholder="选择的目录路径..." + addonBefore="选择路径:" + /> +

+ + + {/* 目录树 */} +

+ + {treeData.length > 0 ? ( + { + if (node.nodeType === "directory" && !node.loaded) { + const children = await loadChildren({ + name: node.title.props.children[1].props.children, + path: node.key, + type: "directory", + }); + setTreeData((prevData) => updateTreeData(prevData, node.key, children)); + } + }} + /> + ) : ( + + )} + +

+ + ); +} + +export default ServerDirectoryBrowser; \ No newline at end of file diff --git a/packages/web/src/components/TerminalComponent.tsx b/packages/web/src/components/TerminalComponent.tsx new file mode 100644 index 0000000..3b02e9e --- /dev/null +++ b/packages/web/src/components/TerminalComponent.tsx @@ -0,0 +1,405 @@ +import React, { useState, useEffect, useRef } from "react"; +import { Tabs, Button, Space, Tag, Typography, message, Dropdown } from "antd"; +import { + ClearOutlined, + CopyOutlined, + SnippetsOutlined +} from "@ant-design/icons"; +import { Terminal } from "@xterm/xterm"; +import { FitAddon } from "@xterm/addon-fit"; +import { WebLinksAddon } from "@xterm/addon-web-links"; +import { ClipboardAddon } from '@xterm/addon-clipboard'; +import { io, Socket } from "socket.io-client"; +import { t } from "../i18n"; +import { call, getURL_PRE, getWebSocket } from "../common/call"; +import { useForceUpdate } from "../hooks/useForceUpdate"; +import "@xterm/xterm/css/xterm.css"; +import { set } from "zod"; + +const { Text } = Typography; + +interface TerminalSession { + type: "terminal"; + id: number; + context: { + xterm?: Terminal; + fitAddon?: FitAddon; + xtermdata?: string; + }; +} + +interface TerminalComponentProps { + workspacePath: string; + className?: string; +} + +let socket: Socket | null = null; +let lastSizes = {} as { cols: number; rows: number }; + +export function TerminalComponent({ + workspacePath, + className = "" +}: TerminalComponentProps) { + const [isConnected, setIsConnected] = useState(false); + const refresh = useForceUpdate(); + + const data = useRef({ + sessions: [] as TerminalSession[], + activeKey: "", + }); + + // 初始化Socket连接 + useEffect(() => { + (async () => { + socket = await getWebSocket(); + setIsConnected(socket.connected); + })(); + + }, []); + + // 创建终端实例 + async function createTerminalInstance(terminalID: number) { + console.log("Creating terminal instance:", terminalID); + + const session: TerminalSession = { + type: "terminal", + id: terminalID, + context: {}, + }; + + data.current.sessions.push(session); + data.current.activeKey = terminalID.toString(); + refresh(); + + // 等待DOM渲染 + await new Promise(resolve => setTimeout(resolve, 500)); + + const terminalRef = document.getElementById(`terminal-${terminalID}`) as HTMLDivElement; + if (!terminalRef) { + console.error("Terminal element not found"); + return; + } + + // 创建xterm实例 + const xterm = new Terminal({ + cols: 80, + rows: 30, + cursorBlink: true, + fontSize: 13, + fontFamily: 'Consolas, "Courier New", monospace', + theme: { + background: '#000000', + foreground: '#ffffff', + cursor: '#ffffff', + }, + }); + + xterm.attachCustomKeyEventHandler((event) => { + return true; // Allow other keys to propagate + }); + + // 加载插件 + const fitAddon = new FitAddon(); + xterm.loadAddon(fitAddon); + xterm.loadAddon(new WebLinksAddon()); + const clipboardAddon = new ClipboardAddon(); + xterm.loadAddon(clipboardAddon); + + // 绑定到DOM + xterm.open(terminalRef); + + await new Promise(resolve => setTimeout(resolve, 500)); + + // 监听大小变化 + xterm.onResize((size) => { + // console.log("Terminal resized:", terminalID, size.cols, size.rows); + lastSizes = size; + if (socket) { + socket.emit("terminalReceive", { + terminalID: terminalID, + type: "resize", + data: size, + workspacePath: workspacePath, + }); + } + }); + + fitAddon.fit(); + + // 创建ResizeObserver来自动调整大小 + const resizeObserver = new ResizeObserver((e) => { + // console.log("ResizeObserver triggered for terminal:", e); + if (e.length === 0) { return; } + if (e[0]!.contentRect.width === 0 || e[0]!.contentRect.height === 0) { + return; // 忽略无效的尺寸 + } + // setTimeout(() => { + fitAddon.fit(); + // }, 1000); + }); + resizeObserver.observe(terminalRef); + + // 监听用户输入 + xterm.onData((data: string) => { + if (socket) { + socket.emit("terminalReceive", { + terminalID: terminalID, + data: data, + workspacePath: workspacePath, + }); + } + }); + + // 更新session上下文 + session.context.xterm = xterm; + session.context.fitAddon = fitAddon; + session.context.xtermdata = ""; + + console.log("Xterm initialized for terminal:", terminalID); + } + + // 设置事件监听 + useEffect(() => { + if (!socket) return; + + // 监听新终端打开 + socket.on("open-terminal", (m) => { + if (m.workspacePath === workspacePath) { + createTerminalInstance(m.terminalID); + } + }); + + let sessionObj: Record = {}; + + // 监听终端数据 + socket.on("terminal-send", async (m) => { + if (m.workspacePath !== workspacePath) { + return; + } + + if (m.type === "execute-status-change") { + // 可以在这里处理执行状态变化 + return; + } + + let session = data.current.sessions.find((x) => x.id == m.terminalID); + if (!sessionObj[m.terminalID as number]) { + sessionObj[m.terminalID as number] = { + xtermdata: "", + timer: setTimeout(() => {}, 0) // 临时值 + }; + } + + sessionObj[m.terminalID as number].xtermdata += m.data; + clearTimeout(sessionObj[m.terminalID as number].timer); + + if (session && session.context.xterm) { + session.context.xterm.write(sessionObj[m.terminalID as number].xtermdata); + sessionObj[m.terminalID as number].xtermdata = ""; + } else { + sessionObj[m.terminalID as number].timer = setTimeout(() => { + if (session && session.context.xterm) { + session.context.xterm.write(sessionObj[m.terminalID as number].xtermdata); + sessionObj[m.terminalID as number].xtermdata = ""; + } + }, 1000); + } + }); + + // 监听终端关闭 + socket.on("close-terminal", async (m) => { + if (m.workspacePath !== workspacePath) { + return; + } + + let session = data.current.sessions.find((x) => x.id == m.terminalID); + if (session) { + data.current.sessions = data.current.sessions.filter( + (x) => x.id != m.terminalID, + ); + refresh(); + } + }); + + // 初始化加载现有终端 + setTimeout(async () => { + try { + const terminalIDs = await call("GetTerminals"); + if (terminalIDs && terminalIDs.length > 0) { + for (const id of terminalIDs) { + await createTerminalInstance(id); + } + } else { + // 创建新终端 + await call("OpenTerminal"); + } + } catch (error) { + console.error("Failed to load terminals:", error); + message.error(`Failed to load terminals: ${error}`); + } + }, 1000); + + }, [workspacePath, socket]); + + // 切换终端 + const handleTabChange = async (key: string) => { + data.current.activeKey = key; + refresh(); + + try { + await call("ActiveAITerminal", { TerminalID: key }); + // const session = data.current.sessions.find((x) => x.id.toString() === key); + // if (session && session.context.fitAddon) { + // setTimeout(() => { + // session.context.fitAddon?.fit(); + // }, 100); + // } + } catch (error) { + message.error(`Failed to switch terminal: ${error}`); + } + }; + + // 处理标签页编辑（添加/删除） + const handleTabEdit = async (targetKey: string | React.MouseEvent | React.KeyboardEvent, action: "add" | "remove") => { + if (action === "add") { + try { + await call("OpenTerminal"); + } catch (error) { + message.error(`Failed to create terminal: ${error}`); + } + } else { + try { + data.current.sessions = data.current.sessions.filter( + (x) => x.id.toString() !== targetKey, + ); + refresh(); + await call("CloseTerminal", { TerminalID: targetKey as string }); + } catch (error) { + message.error(`Failed to close terminal: ${error}`); + } + } + }; + + // 获取右键菜单 + const getContextMenu = (terminalId: number) => ({ + items: [ + { + label: t`Copy`, + key: 'Copy', + icon: , + }, + { + label: t`Paste`, + key: 'Parse', + icon: , + }, + { + label: t`Clear`, + key: 'Clear', + icon: , + }, + ], + onClick: (e: any) => { + if (e.key === "Copy") { + const session = data.current.sessions.find((x) => x.id === terminalId); + if (session && session.context.xterm) { + const selection = session.context.xterm.getSelection(); + if (selection) { + navigator.clipboard.writeText(selection).then(() => { + message.success(t`Copied to clipboard`); + }).catch(err => { + message.error(`Failed to copy: ${err}`); + }); + } + } + } + + if (e.key === "Parse") { + navigator.clipboard.readText().then((txt) => { + if (socket) { + socket.emit("terminalReceive", { + terminalID: terminalId, + data: txt, + workspacePath: workspacePath, + }); + } + }).catch(err => { + message.error(`Failed to paste: ${err}`); + }); + } + + if (e.key === "Clear") { + if (socket) { + socket.emit("terminalReceive", { + terminalID: terminalId, + data: "clear\r", + workspacePath: workspacePath, + }); + } + } + } + }); + + return ( +

+ {/*

+ + {t`Terminal`} + + {data.current.sessions.length} + + {!isConnected && ( + {t`Disconnected`} + )} + +

*/} + +

+ + {t`Terminal`} + + {data.current.sessions.length} + + {!isConnected && ( + {t`Disconnected`} + )} + + ) + }} + type="editable-card" + activeKey={data.current.activeKey} + onChange={handleTabChange} + onEdit={handleTabEdit} + hideAdd={!isConnected} + items={data.current.sessions.map((session) => ({ + label: `${t`Terminal`}-${session.id}`, + key: session.id.toString(), + closable: data.current.sessions.length > 1, + children: ( + +

+ + ), + }))} + tabBarStyle={{ + margin: '0 8px', + borderBottom: '1px solid #f0f0f0' + }} + /> +

+ ); +} \ No newline at end of file diff --git a/packages/web/src/components/WorkspaceChat.tsx b/packages/web/src/components/WorkspaceChat.tsx new file mode 100644 index 0000000..db51148 --- /dev/null +++ b/packages/web/src/components/WorkspaceChat.tsx @@ -0,0 +1,1153 @@ +/** + * @fileoverview 工作区聊天组件 + * + * 专门用于工作区中间位置的聊天界面，包含： + * 1. 聊天消息显示 + * 2. 操作栏（模型选择、设置等） + * 3. 发送框 + */ +import React, { + useCallback, + useEffect, + useRef, + useState, +} from "react"; +import { + Button, + Divider, + Flex, + Modal, + Select, + Space, + Tag, + Tooltip, + Tree, + Upload, + message, + Form, + Progress, + Alert, +} from "antd"; +import { + Welcome, + XProvider, +} from "@ant-design/x"; +import { + LinkOutlined, + SettingOutlined, + ClearOutlined, + LoadingOutlined, + SendOutlined, + SyncOutlined, + DisconnectOutlined, + CompressOutlined, + InfoCircleOutlined, +} from "@ant-design/icons"; + +import { v4 } from "uuid"; +import { call } from "../common/call"; +import { addChatRecentUsage } from "../utils/storage"; + +import { + ChatHistoryItem, +} from "@dadigua/hyperchat-shared"; +import { type AISettings, type AIModelConfigItem } from "@dadigua/hyperchat-shared"; +import { useAISettings } from "../contexts/AppSettingsContext"; +import { MyMessage } from "@dadigua/hyperchat-shared"; +import { Messages } from "./messages"; +import { Icon } from "./icon"; +import { HyperChatEditor, HyperChatEditorRef } from "./HyperChatEditor"; +import { t } from "../i18n"; +import { blobToBase64, getMyUuid, JsonSchema2FormItemOrNull, urlToBase64 } from "../common/util"; +import { useForceUpdate } from "../hooks/useForceUpdate"; +import { MyAttachR } from "./attachR"; +import { CurrentWorkspaceDetails, WorkspaceInfo } from "../pages/workspace/types"; +import { CommonContentItem, HyperChatCompletionTool, IMCPClient, HyperToolCall } from "@dadigua/hyperchat-shared"; +import { filterMCPTools, convertTreeSelectionToMCPConfig, convertMCPConfigToTreeSelection } from '../utils/mcpUtils'; +import { AgentCommonFormItems } from "./AgentManagement"; +import { useChatStream } from "../hooks/useChatStream"; + +/** + * 工作区聊天组件的Props类型定义 + */ +interface WorkspaceChatProps { + /** 工作区信息 */ + workspace: WorkspaceInfo; + /** 指定的Agent Key，用于Agent聊天 */ + agentName: string; + workspaceDetails: CurrentWorkspaceDetails; + mcpClients: IMCPClient[]; + /** 要加载的特定聊天记录 */ + chatLogToLoad?: ChatHistoryItem; +} + +/** + * 工作区聊天组件 + */ +export const WorkspaceChat = ({ workspace, agentName, workspaceDetails, mcpClients, chatLogToLoad }: WorkspaceChatProps) => { + // 使用强制刷新 hook + const refresh = useForceUpdate(); + + // 移除未使用的状态 + // 从 Context 获取 AI 设置 + const { aiSettings, loading: aiSettingsLoading } = useAISettings(); + + // 获取默认模型配置 + const getDefaultModelFromSettings = (settings: AISettings): AIModelConfigItem | null => { + if (!settings || !settings.models || !settings.models.length) return null; + // 优先返回设置中指定的默认模型 + if (settings.defaultModel) { + const defaultModel = settings.models.find(m => m.key === settings.defaultModel); + if (defaultModel) return defaultModel; + } + // 否则返回第一个LLM模型 + return settings.models.find(m => m.type === 'llm') || settings.models[0] || null; + }; + + // 获取按提供商分组的模型选项 + const getGroupedModelOptions = (settings: AISettings) => { + if (!settings || !settings.models || !settings.models.length) return []; + + const groups: Record = {}; + settings.models.forEach(model => { + const provider = model.provider || 'unknown'; + if (!groups[provider]) { + groups[provider] = []; + } + groups[provider]!.push(model); + }); + + return Object.entries(groups).map(([provider, models]) => ({ + label: provider, + options: models.map(model => ({ + label: model.provider + ":" + model.name, + value: model.key, + })) + })); + }; + + // 默认聊天配置 + const defaultChatValue = useRef({ + label: "", + key: getMyUuid(), + messages: [] as MyMessage[], + agentName: "", + dateTime: Date.now(), + chatType: "user" as const, // "user" | "task" | "called" + // 使用新的配置继承系统 + configOverrides: { + modelKey: "", + allowMCPs: [] as string[], + blockMCPTools: [] as string[], + isConfirmCallTool: false, + temperature: undefined as number | undefined, + compressionStrategy: "tokens" as "tokens", + maxContextTokens: undefined as number | undefined, + prompt: "" + } + }); + + // 当前聊天引用 + const currentChat = useRef(defaultChatValue.current); + + // 输入框的值 + const [value, setValue] = useState(""); + + // 发送历史记录管理 + const sendHistoryRef = useRef([]); + const historyIndexRef = useRef(-1); + + let confirm_call_tool_cb = (tool: HyperToolCall): Promise => { + return new Promise((resolve, reject) => { + console.log("tool", tool); + let m = modal.confirm({ + title: t`Comfirm Call Tool`, + width: "90%", + style: { maxWidth: 1024 }, + footer: [], + content: ( +

+ { + // console.log(e); + resolve(e); + m.destroy(); + }} + > +

+                Tool Name: 
+                
+                  {getTools(mcpClients).find(
+                    (x) => x.name == tool.function.name,
+                  )?.displayName || tool.function.name}
+                
+

+ {JsonSchema2FormItemOrNull( + getTools(mcpClients).find( + (x) => x.name == tool.function.name, + )?.inputSchema, + ) || t`No parameters`} + +

+ + + + + +

+ + +

+ ), + }); + }); + } + + // 使用新的聊天流 Hook + const chatStream = useChatStream({ + agentName, + workspacePath: workspace.path, + onToolConfirm: confirm_call_tool_cb, + }); + + // 获取有效配置值的帮助函数（聊天配置 > Agent配置 > 工作区配置 > 模型列表第一个） + const getEffectiveConfig = () => { + const agent = workspaceDetails.agents.find(a => a.config.name === agentName); + const agentConfig = agent?.config; + const overrides = currentChat.current.configOverrides || {}; + + // 获取可用模型列表 + const availableModels = aiSettings?.models || []; + const isModelAvailable = (modelKey: string) => + availableModels.some(model => model.key === modelKey); + + //模型列表第一个作为回退 + const firstAvailableModel = availableModels[0]?.key || ""; + + // 按优先级查找有效的模型 + const findValidModelKey = () => { + const candidates = [ + overrides.modelKey, + agentConfig?.modelKey, + firstAvailableModel + ].filter(Boolean); // 过滤掉空值 + + // 找到第一个存在于模型列表中的候选项 + for (const modelKey of candidates) { + if (modelKey && isModelAvailable(modelKey)) { + return modelKey; + } + } + + // 如果都不可用，返回第一个可用模型 + return firstAvailableModel; + }; + + return { + modelKey: findValidModelKey(), + allowMCPs: overrides.allowMCPs || agentConfig?.allowMCPs || [], + blockMCPTools: overrides.blockMCPTools || agentConfig?.blockMCPTools || [], + isConfirmCallTool: overrides.isConfirmCallTool ?? agentConfig?.isConfirmCallTool ?? false, + temperature: overrides.temperature ?? agentConfig?.temperature, + maxTokens: overrides.maxTokens ?? agentConfig?.maxTokens ?? 8096, + compressionStrategy: "tokens", + maxContextTokens: overrides.maxContextTokens ?? agentConfig?.maxContextTokens, + prompt: overrides.prompt || agentConfig?.prompt || "" + }; + }; + + // 设置 allowMCPs 的帮助函数 + const setAllowMCPs = (allowMCPs: string[]) => { + if (!currentChat.current.configOverrides) { + currentChat.current.configOverrides = {}; + } + currentChat.current.configOverrides.allowMCPs = allowMCPs; + }; + + + // 设置 blockMCPTools 的帮助函数 + const setBlockMCPTools = (blockMCPTools: string[]) => { + if (!currentChat.current.configOverrides) { + currentChat.current.configOverrides = {}; + } + currentChat.current.configOverrides.blockMCPTools = blockMCPTools; + }; + + + + // 加载状态从 chatStream 获取 + const loading = chatStream.loading; + + + // 编辑器引用 + const editorRef = useRef(null); + + // 资源结果列表引用 + const resourceResListRef = useRef<(CommonContentItem & { uid: string })[]>([]); + + // 提示结果列表引用 + const promptResList = useRef>([]); + + /** 工具显示状态 */ + const [isToolsShow, setIsToolsShow] = useState(false); + + /** 设置模态框状态 */ + const [isSettingsShow, setIsSettingsShow] = useState(false); + + /** 手动压缩加载状态 */ + const [compressLoading, setCompressLoading] = useState(false); + + /** 设置表单 */ + const [settingsForm] = Form.useForm(); + + // Modal实例和上下文holder + const [modal, contextHolder] = Modal.useModal(); + // 保存设置 + const saveSettings = async (values: any) => { + try { + // 更新当前聊天配置 + if (!currentChat.current.configOverrides) { + currentChat.current.configOverrides = {}; + } + currentChat.current.configOverrides.temperature = values.temperature; + currentChat.current.configOverrides.maxTokens = values.maxTokens; + currentChat.current.configOverrides.isConfirmCallTool = values.isConfirmCallTool; + currentChat.current.configOverrides.allowMCPs = values.allowMCPs; + currentChat.current.configOverrides.blockMCPTools = values.blockMCPTools; + currentChat.current.configOverrides.modelKey = values.modelKey; + currentChat.current.configOverrides.compressionStrategy = "tokens"; + currentChat.current.configOverrides.maxContextTokens = values.maxContextTokens; + + setIsSettingsShow(false); + refresh(); + message.success(t`Settings saved successfully`); + } catch (error) { + console.error("Failed to save settings:", error); + message.error(t`Failed to save settings`); + } + }; + + // 从localStorage加载发送历史记录 + useEffect(() => { + const savedHistory = localStorage.getItem('workspace-chat-send-history'); + if (savedHistory) { + try { + const history = JSON.parse(savedHistory); + if (Array.isArray(history)) { + sendHistoryRef.current = history.slice(-50); // 确保不超过50条 + } + } catch (e) { + console.error('Failed to load send history:', e); + } + } + }, []); + + // 保存发送历史记录到localStorage + const saveSendHistory = (history: string[]) => { + try { + localStorage.setItem('workspace-chat-send-history', JSON.stringify(history)); + } catch (e) { + console.error('Failed to save send history:', e); + } + }; + + // 添加消息到发送历史记录 + const addToSendHistory = (message: string) => { + if (!message.trim()) return; + + // 如果消息已存在，先移除旧的 + const filtered = sendHistoryRef.current.filter(msg => msg !== message); + // 添加到末尾，保持最多50条 + const newHistory = [...filtered, message].slice(-50); + sendHistoryRef.current = newHistory; + saveSendHistory(newHistory); + + // 重置历史记录索引 + historyIndexRef.current = -1; + }; + + // 处理键盘事件（上下箭头键导航历史记录） + const handleKeyDown = (e: { key: string }) => { + const history = sendHistoryRef.current; + const currentIndex = historyIndexRef.current; + + if (e.key === 'ArrowUp') { + if (history.length > 0) { + const newIndex = currentIndex === -1 ? history.length - 1 : Math.max(0, currentIndex - 1); + historyIndexRef.current = newIndex; + const historyMessage = history[newIndex]; + if (historyMessage !== undefined) { + setValue(historyMessage); + if (editorRef.current) editorRef.current.setValue(historyMessage); + } + } + } else if (e.key === 'ArrowDown') { + if (history.length > 0 && currentIndex >= 0) { + const newIndex = currentIndex + 1; + if (newIndex >= history.length) { + historyIndexRef.current = -1; + setValue(""); + if (editorRef.current) editorRef.current.setValue(""); + } else { + historyIndexRef.current = newIndex; + const historyMessage = history[newIndex]; + if (historyMessage !== undefined) { + setValue(historyMessage); + if (editorRef.current) editorRef.current.setValue(historyMessage); + } + } + } + } + }; + + // 同步 chatStream 消息到 currentChat + useEffect(() => { + if (chatStream.messages.length > 0) { + currentChat.current.messages = chatStream.messages; + refresh(); + } + }, [chatStream.messages]); + + + // 初始化 + useEffect(() => { + (async () => { + try { + + // 等待 AI 设置加载完成 + if (!aiSettings || aiSettingsLoading) { + return; + } + + // 初始化默认模型时不设置 configOverrides.modelKey + // 让 getEffectiveConfig 处理优先级逻辑 + if (!currentChat.current.configOverrides) { + currentChat.current.configOverrides = {}; + } + const agent = workspaceDetails.agents.find(a => a.config.name === agentName); + // 如果有要加载的聊天记录，优先加载聊天记录 + if (chatLogToLoad) { + defaultChatValue.current = ({ + ...defaultChatValue.current, + ...(chatLogToLoad as any) + }); + currentChatReset({ + messages: chatLogToLoad.messages || [], + }); + } + // 否则如果指定了agentName，使用Agent配置 + else if (agentName && agent) { + + defaultChatValue.current = ({ + ...defaultChatValue.current, + agentName: agentName, + messages: [], + configOverrides: { + allowMCPs: agent.config.allowMCPs || [], + blockMCPTools: agent.config.blockMCPTools || [], + // 不设置 modelKey，让 getEffectiveConfig 处理优先级 + temperature: agent.config.temperature, + isConfirmCallTool: agent.config.isConfirmCallTool || false, + compressionStrategy: "tokens", + maxContextTokens: agent.config.maxContextTokens, + prompt: agent.config.prompt || "" + } + }); + + currentChatReset({}); + } else { + currentChatReset({}); + } + + refresh(); + } catch (error) { + console.error("Failed to initialize workspace chat:", error); + } + })(); + }, [workspace, agentName, chatLogToLoad, aiSettings, aiSettingsLoading]); + + /** + * 重置当前聊天配置 + */ + const currentChatReset = async ( + newConfig: Partial, + ) => { + + currentChat.current = { + ...defaultChatValue.current, + ...newConfig, + }; + + // 同步到 chatStream + chatStream.setMessages(currentChat.current.messages || []); + + resourceResListRef.current = []; + promptResList.current = []; + + refresh(); + }; + /** + * 处理用户请求的核心函数 + */ + const onRequest = useCallback(async (content?: string) => { + try { + if (!aiSettings) { + throw new Error("AI settings not loaded"); + } + + const effectiveConfig = getEffectiveConfig(); + let config = aiSettings.models?.find( + (x: any) => x.key == effectiveConfig.modelKey, + ); + if (config == null) { + if (!aiSettings.models || aiSettings.models.length == 0) { + throw new Error("Please add LLM first"); + } else { + throw new Error(t`Model not found, please select a model`); + } + } + let userMessage: MyMessage = { + role: "user", + content: content || value, + content_date: Date.now(), + } + + // 使用 chatStream 开始流式聊天 + await chatStream.startChatStream( + currentChat.current.key, + currentChat.current.messages, + currentChat.current.configOverrides || {}, + userMessage.content ? userMessage : undefined, + ); + + currentChat.current.label = currentChat.current.label || getLabelByFirstUserContent([...currentChat.current.messages, userMessage]) || t`Untitled Chat`; + + if (agent) { + addChatRecentUsage( + workspace.path, + agentName, + currentChat.current.key, + currentChat.current.label || 'Untitled Chat' + ); + } + + // 清空资源列表 + resourceResListRef.current = []; + promptResList.current = []; + + refresh(); + + } catch (e) { + console.error(e); + message.error( + e instanceof Error ? e.message : t`An error occurred, please try again later`, + ); + } + }, [workspace, agentName, aiSettings, aiSettingsLoading, chatStream]); + + // 手动压缩记忆处理函数 + const handleManualCompress = useCallback(async () => { + if (!chatStream.messages.length || compressLoading) return; + + setCompressLoading(true); + try { + const effectiveConfig = getEffectiveConfig(); + await chatStream.compressMemory( + effectiveConfig.modelKey || 'default', + currentChat.current.key, + effectiveConfig.maxContextTokens, + effectiveConfig.prompt, + ); + + message.success(t`Memory compression completed successfully`); + } catch (error) { + console.error('Memory compression failed:', error); + message.error( + error instanceof Error ? + `${t`Memory compression failed:`} ${error.message}` : + t`Memory compression failed, please try again later` + ); + } finally { + setCompressLoading(false); + } + }, [chatStream, compressLoading, getEffectiveConfig]); + + // 获取当前模型配置 + const effectiveConfigForModel = getEffectiveConfig(); + let currModel = aiSettings ? ( + aiSettings.models?.find((x) => x.key == effectiveConfigForModel.modelKey) || + getDefaultModelFromSettings(aiSettings) + ) : null; + + /** 是否支持图片 */ + let supportImage = currModel?.supportImage; + /** 是否支持工具 */ + let supportTool = currModel?.supportTool; + const agent = workspaceDetails.agents.find(a => a.config.name === agentName); + + // 提取系统消息 + const systemMessages = currentChat.current.configOverrides?.prompt!; + // 使用 chatStream 的消息或当前聊天的消息 + const allMessages = chatStream.messages.length > 0 ? chatStream.messages : currentChat.current.messages; + // 过滤掉系统消息的其他消息 + const nonSystemMessages = allMessages?.filter(m => m.role !== "system") || []; + + return ( +

+ {/* */} +

+ {/* 系统提示词显示区域 - 固定头部 */} + {systemMessages.length > 0 && ( +

+ + + {agentName ? (agent?.config.name || t`Agent Chat`) : t`Workspace Chat`} + +

+ +

+ {systemMessages} +

+ )} + + {/* 聊天消息区域 */} +

+ {(nonSystemMessages.length == 0) && ( + + )} + + { + // 合并系统消息和用户提交的消息 + currentChat.current.messages = [...messages]; + // 同步到 chatStream + chatStream.setMessages([...messages]); + refresh(); + onRequest(); + }} + status={loading ? "runing" : "stop"} + /> +

+ + {/* 操作栏 - 固定尾部 */} +

+ +

+ + {/* 所有 Agents 列表 */} +

+ + <Space> + <RobotOutlined /> + {t`All Agents`} + <Tag color="green" >{sortedAgents.length}</Tag> + </Space> + + + {sortedAgents.length === 0 ? ( + +

{t`No agents available`}

{t`Create your first agent to get started`}

+ ) : ( +

{t`No agents match your search`}

+ ) + } + > + {agents.length === 0 && onCreateAgent && ( + + )} + + ) : ( +

+ {sortedAgents.map(agent => ( +

+ {renderAgentCard(agent)} +

+ ))} +

+ )} +

+ +

+ + ); +}; \ No newline at end of file diff --git a/packages/web/src/components/assistant_tool_content.tsx b/packages/web/src/components/assistant_tool_content.tsx new file mode 100644 index 0000000..ae99fc4 --- /dev/null +++ b/packages/web/src/components/assistant_tool_content.tsx @@ -0,0 +1,871 @@ +// React imports +import React, { useRef, useState } from "react"; + +// Ant Design imports +import { + CheckSquareOutlined, + CloseSquareOutlined, + CopyOutlined, + DownloadOutlined, + EyeInvisibleOutlined, + EyeOutlined, + FileMarkdownOutlined, + FileTextOutlined, + IeOutlined, + SyncOutlined, + ThunderboltOutlined, + ToolOutlined, +} from "@ant-design/icons"; +import { + Button, + Collapse, + message, + Modal, + Segmented, + Space, + Spin, +} from "antd"; + +// Third-party libraries +import MarkdownPreview from '@uiw/react-markdown-preview'; +import { getCodeString } from 'rehype-rewrite'; +import mermaid from "mermaid"; +import katex from 'katex'; +import 'katex/dist/katex.css'; +import { v4 } from "uuid"; +import Editor from '@monaco-editor/react'; + +// Local imports +import { call, getURL_PRE } from "../common/call"; +import { setClipboardText } from "../common/util"; +import { sleep } from "../common/sleep"; +import { isOnBrowser } from "../common/util"; +import { t } from "../i18n"; +import { HyperChatCompletionTool, MyMessage } from "@dadigua/hyperchat-shared"; + + +// Constants +const antdMessage = message; +const DEFAULT_WEBVIEW_SIZE = { x: "800px", y: "400px" }; +const USER_AGENT = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36"; + +// Types +interface ArtifactProps { + url: string; + type: string; +} + +interface HtmlNode { + tagName: string; + properties?: Record; + children?: HtmlNode[]; +} + +interface CodeProps { + inline?: boolean; + children?: React.ReactNode[]; + className?: string; + node?: HtmlNode; + [key: string]: unknown; +} + +interface KatexProps { + children?: React.ReactNode; + node?: HtmlNode; + [key: string]: unknown; +} + +interface WebviewElement extends HTMLElement { + openDevTools?: () => void; + executeJavaScript: (script: string) => Promise<{ width: number; height: number }>; +} + +interface WebviewConsoleEvent extends Event { + level: number; + message: string; +} + +// Utility functions +const formatContent = (content: string): string => { + content = content.replace(/\\\[(.+?)\\\]/gs, "$$" + "$1" + "$$"); + content = content.replace(/\\$(.+?)\\$/g, "$$" + "$1" + "$$"); + return content; +}; + +const detectCodeLanguage = (className?: string, code?: string) => { + if (!className) return { isHtml: false, isSvg: false, isMermaid: false, isHigh: false }; + + const lower = className.toLowerCase(); + const isHtml = /^language-html/.test(lower); + const isMermaid = /^language-mermaid/.test(lower); + let isSvg = /^language-svg/.test(lower); + isSvg = isSvg || (/^language-xml/.test(lower) && Boolean(code?.includes(" = ({ children = [], ...props }) => { + const regexs = [/\$(.+?)\$/gs]; + + for (let regex of regexs) { + if (typeof children === 'string' && regex.test(children)) { + const html = (children as string).replace(regex, (s, replacer) => { + return katex.renderToString(replacer, { + throwOnError: false, + }); + }); + return React.createElement(props.node?.tagName || 'div', { + ...props.node?.properties, + dangerouslySetInnerHTML: { __html: html }, + }); + } else if (Array.isArray(children)) { + const newChildren = children.map((child, i) => { + if (typeof child === 'string' && regex.test(child)) { + return ( + { + return katex.renderToString(replacer, { + throwOnError: false, + }); + }) + }} + /> + ); + } else { + return child; + } + }); + return React.createElement(props.node?.tagName || 'div', { + ...props.node?.properties, + }, newChildren); + } + } + + return React.createElement(props.node?.tagName || 'div', { + ...props.node?.properties, + }, children); +}; + +// Artifact Component +const Artifact: React.FC = React.memo(({ url, type }) => { + const webviewRef = useRef(null); + const webviewError = useRef(""); + const [webviewXY, setWebviewXY] = useState(DEFAULT_WEBVIEW_SIZE); + + const handleWebviewLoad = async (element: WebviewElement) => { + try { + await sleep(1000); + const script = ` + var r; + var res; + if(document.body){ + r = document.querySelector("html").getBoundingClientRect(); + } else { + r = document.firstChild.getBoundingClientRect(); + } + res = { width: r.width, height: r.height }; + `; + const res = await element.executeJavaScript(script); + setWebviewXY({ + x: res.width + "px", + y: res.height + "px", + }); + } catch (e) { + console.error("webview executeJavaScript fail: ", e); + } + }; + + const handleIframeLoad = async (iframe: HTMLIFrameElement) => { + await sleep(1000); + const root = iframe.contentWindow?.document.querySelector("html") || + iframe.contentWindow?.document.querySelector("svg"); + if (root) { + const rect = root.getBoundingClientRect(); + console.log("iframe loaded", rect.width, rect.height); + setWebviewXY({ + x: rect.width + "px", + y: rect.height + "px", + }); + } + }; + + return ( +

+ {!isOnBrowser ? ( + <> + + + + { + if (w) { + webviewRef.current = w as unknown as WebviewElement; + w.addEventListener("console-message", (e: Event) => { + const consoleEvent = e as WebviewConsoleEvent; + if (consoleEvent.level === 3) { + webviewError.current += consoleEvent.message + "\n"; + } + }); + w.addEventListener("did-finish-load", () => handleWebviewLoad(w as unknown as WebviewElement)); + } + }} + src={url} + useragent={USER_AGENT} + style={{ + height: webviewXY.y, + width: webviewXY.x, + }} + /> + + ) : ( +

您当前处于离线状态

Nothing to see here!