Set API Key

+ setApiKey(e.target.value)} + placeholder="Enter your API key" + className="w-full px-3 py-2 border border-gray-300 rounded-md mb-4 pr-10 bg-gray-50" + /> + +

+ + +

0 ? 'mt-12' : ''}`}> + {/* 已上传图片预览 */} + {uploadedImages.length > 0 && ( +

+ {uploadedImages.map(image => ( +

+ +

+ ))} +

+ )} + +

{
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                        if (e.nativeEvent.isComposing) {
+                            return;
+                        }
+                        e.preventDefault();
+                        onSend();
+                    }
+                    onKeyPress(e);
+                }}
+                value={input}
+                placeholder="Type your message..."
+                className="w-full min-h-[80px] resize-none rounded-md border 
+                         border-gray-200 px-3 py-2 pr-12 text-sm shadow-sm 
+                         focus:outline-none focus:ring-2 focus:ring-blue-500 
+                         focus:border-transparent bg-white transition-all 
+                         duration-200 text-gray-700"
+            />
+
+            {/* Bottom toolbar */}
+            <div className="absolute bottom-3 left-3 flex items-center gap-2">
+                {/* Model selector dropdown */}
+                <select
+                    value={selectedModel}
+                    onChange={(e) => onModelChange(e.target.value)}
+                    className="px-1.5 py-0.5 text-xs rounded-md 
+                             border border-gray-200 bg-white text-gray-700
+                             focus:outline-none focus:ring-2 focus:ring-blue-500
+                             focus:border-transparent hover:bg-gray-50
+                             transition-colors border-0"
+                >
+                    <option value="gpt-4o">gpt-4o</option>
+                    <option value="gpt-4o-mini">gpt-4o-mini</option>
+                    <option value="DeepSeek-V3">DeepSeek-V3</option>
+                </select>
+
+                {/* Upload image button */}
+                <button
+                    type="button"
+                    onClick={() => setShowUploadModal(true)}
+                    className="p-1.5 text-gray-500 
+                             hover:bg-gray-100 hover:text-gray-600 
+                             transition-all duration-200 outline-none">
+                    <ImageIcon className="h-4 w-4" />
+                </button>
+            </div>
+
+            {/* Send button */}
+            <button
+                type="submit"
+                onClick={onSend}
+                disabled={loading}
+                className="absolute bottom-3 right-3 p-2 rounded-md text-gray-500 
+                         hover:bg-gray-100 hover:text-gray-600 disabled:opacity-50 
+                         transition-all duration-200 active:scale-95">
+                {loading ? (
+                    <div className="h-5 w-5 animate-spin rounded-full 
+                                  border-2 border-gray-300 border-t-blue-500" />
+                ) : (
+                    <SendIcon className="h-5 w-5 transform transition-transform 
+                                       group-hover:translate-x-1" />
+                )}
+            </button>
+
+            {/* 上传图片模态框 */}
+            {showUploadModal && (
+                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+                    <div className="bg-white rounded-lg p-6 w-96 relative">
+                        <button 
+                            onClick={() => setShowUploadModal(false)}
+                            className="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
+                        >
+                            <XIcon className="w-5 h-5" />
+                        </button>
+                        
+                        <h3 className="text-lg font-medium mb-4">Upload Images</h3>
+                        
+                        <div className="border-2 border-dashed border-gray-300 rounded-lg p-8
+                                      flex flex-col items-center justify-center gap-4
+                                      hover:border-blue-500 transition-colors cursor-pointer"
+                             onClick={() => fileInputRef.current?.click()}
+                        >
+                            <PlusIcon className="w-8 h-8 text-gray-400" />
+                            <div className="text-center">
+                                <p className="text-sm text-gray-500 mb-2">
+                                    Click to upload images or drag and drop
+                                </p>
+                                <p className="text-xs text-gray-400">
+                                    Supported formats: JPG, PNG, GIF, WebP
+                                </p>
+                                <p className="text-xs text-gray-400">
+                                    Max file size: 5MB
+                                </p>
+                            </div>
+                        </div>
+
+                        <input
+                            ref={fileInputRef}
+                            type="file"
+                            multiple
+                            accept={SUPPORTED_FORMATS.join(',')}
+                            onChange={handleFileChange}
+                            className="hidden"
+                        />
+
+                        {/* 预览区域 */}
+                        {uploadedImages.length > 0 && (
+                            <div className="mt-4 grid grid-cols-3 gap-2">
+                                {uploadedImages.map(image => (
+                                    <div key={image.id} className="relative group">
+                                        <img 
+                                            src={image.preview} 
+                                            alt="preview" 
+                                            className="w-full h-20 object-cover rounded"
+                                        />
+                                        <button
+                                            onClick={() => onRemoveImage(image.id)}
+                                            className="absolute -top-1 -right-1 bg-red-500 text-white 
+                                                     rounded-full p-0.5 opacity-0 group-hover:opacity-100 
+                                                     transition-opacity"
+                                        >
+                                            <XIcon className="w-3 h-3" />
+                                        </button>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+
+                        <div className="mt-4 flex justify-end gap-2">
+                            <button
+                                onClick={() => setShowUploadModal(false)}
+                                className="px-4 py-2 text-sm font-medium text-gray-700 
+                                         bg-white border border-gray-300 rounded-md 
+                                         hover:bg-gray-50"
+                            >
+                                Close
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+} 
\ No newline at end of file
diff --git a/ui/src/components/chat/Icons.tsx b/ui/src/components/chat/Icons.tsx
new file mode 100644
index 0000000..88da240
--- /dev/null
+++ b/ui/src/components/chat/Icons.tsx
@@ -0,0 +1,144 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+export function SendIcon(props: any) {
+    return (
+        <svg
+            {...props}
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        >
+            <path d="m22 2-7 20-4-9-9-4Z" />
+            <path d="M22 2 11 13" />
+        </svg>
+    )
+}
+
+export function XIcon(props: any) {
+    return (
+        <svg
+            {...props}
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        >
+            <path d="M18 6 6 18" />
+            <path d="m6 6 12 12" />
+        </svg>
+    )
+}
+
+export function TrashIcon(props: any) {
+    return (
+        <svg
+            {...props}
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        >
+            <path d="M3 6h18" />
+            <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+            <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+        </svg>
+    )
+}
+
+export function UploadIcon(props: any) {
+    return (
+        <svg
+            {...props}
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        >
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+            <polyline points="17 8 12 3 7 8" />
+            <line x1="12" y1="3" x2="12" y2="15" />
+        </svg>
+    )
+}
+
+export function ImageIcon(props: any) {
+    return (
+        <svg
+            {...props}
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        >
+            <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+            <circle cx="9" cy="9" r="2" />
+            <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+        </svg>
+    )
+}
+
+export function PlusIcon(props: any) {
+    return (
+        <svg
+            {...props}
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        >
+            <path d="M12 5v14" />
+            <path d="M5 12h14" />
+        </svg>
+    )
+}
+
+export function CogIcon(props: any) {
+    return (
+        <svg
+            {...props}
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        >
+            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+            <circle cx="12" cy="12" r="3" />
+        </svg>
+    )
+} 
\ No newline at end of file
diff --git a/ui/src/components/chat/MessageList.tsx b/ui/src/components/chat/MessageList.tsx
new file mode 100644
index 0000000..ce42f9f
--- /dev/null
+++ b/ui/src/components/chat/MessageList.tsx
@@ -0,0 +1,241 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import { Message } from "../../types/types";
+import { UserMessage } from "./messages/UserMessage";
+import { AIMessage } from "./messages/AIMessage";
+import { WorkflowOption } from "./messages/WorkflowOption";
+import { NodeSearch } from "./messages/NodeSearch";
+import { NodeRecommend } from "./messages/NodeRecommend";
+import { DownstreamSubgraphs } from "./messages/DownstreamSubgraphs";
+import { NodeInstallGuide } from "./messages/NodeInstallGuide";
+import { LoadingMessage } from "./messages/LoadingMessage";
+import { generateUUID } from "../../utils/uuid";
+import { app } from "../../utils/comfyapp";
+import { addNodeOnGraph } from "../../utils/graphUtils";
+
+interface MessageListProps {
+    messages: Message[];
+    onOptionClick: (option: string) => void;
+    latestInput: string;
+    installedNodes: any[];
+    onAddMessage: (message: Message) => void;
+    loading?: boolean;
+}
+
+const getAvatar = (name?: string) => {
+    return `https://ui-avatars.com/api/?name=${name || 'User'}&background=random`;
+};
+
+export function MessageList({ messages, latestInput, onOptionClick, installedNodes, onAddMessage, loading }: MessageListProps) {
+const renderMessage = (message: Message) => {
+        console.log('[MessageList] Rendering message:', message);
+        
+        if (message.role === 'user') {
+            return <UserMessage key={message.id} content={message.content} />;
+        }
+
+        if (message.role === 'ai' || message.role === 'tool') {
+            const avatar = getAvatar(message.role);
+            
+            try {
+                const response = JSON.parse(message.content);
+                console.log('[MessageList] Parsed message content:', response);
+                
+                // 获取扩展类型
+                const workflowExt = response.ext?.find(item => item.type === 'workflow');
+                const nodeExt = response.ext?.find(item => item.type === 'node');
+                const nodeRecommendExt = response.ext?.find(item => item.type === 'node_recommend');
+                const downstreamSubgraphsExt = response.ext?.find(item => item.type === 'downstream_subgraph_search');
+                const nodeInstallGuideExt = response.ext?.find(item => item.type === 'node_install_guide');
+                
+                console.log('[MessageList] Found extensions:', {
+                    workflowExt,
+                    nodeExt,
+                    nodeRecommendExt,
+                    downstreamSubgraphsExt,
+                    nodeInstallGuideExt
+                });
+
+                // 根据扩展类型添加对应组件
+                let ExtComponent = null;
+                if (workflowExt) {
+                    ExtComponent = (
+                        <WorkflowOption
+                            content={message.content}
+                            name={message.name}
+                            latestInput={latestInput}
+                            installedNodes={installedNodes}
+                            onAddMessage={onAddMessage}
+                        />
+                    );
+                } else if (nodeRecommendExt) {
+                    ExtComponent = (
+                        <NodeRecommend
+                            content={message.content}
+                            name={message.name}
+                            avatar={avatar}
+                            installedNodes={installedNodes}
+                        />
+                    );
+                } else if (nodeExt) {
+                    ExtComponent = (
+                        <NodeSearch
+                            content={message.content}
+                            name={message.name}
+                            avatar={avatar}
+                            installedNodes={installedNodes}
+                        />
+                    );
+                } else if (downstreamSubgraphsExt) {
+                    ExtComponent = (
+                        <DownstreamSubgraphs
+                            content={message.content}
+                            name={message.name}
+                            avatar={avatar}
+                            installedNodes={installedNodes}
+                            onAddMessage={onAddMessage}
+                        />
+                    );
+                } else if (nodeInstallGuideExt) {
+                    ExtComponent = (
+                        <NodeInstallGuide
+                            content={message.content}
+                            onLoadSubgraph={() => {
+                                if (message.metadata?.pendingSubgraph) {
+                                    const selectedNode = Object.values(app.canvas.selected_nodes)[0];
+                                    if (selectedNode) {
+                                        // 直接调用 DownstreamSubgraphs 中的 loadSubgraphToCanvas
+                                        const node = message.metadata.pendingSubgraph;
+                                        const nodes = node.json.nodes;
+                                        const links = node.json.links;
+                                        
+                                        const entryNode = nodes.find(node => node.id === 0);
+                                        const entryNodeId = entryNode?.id;
+
+                                        const nodeMap = {};
+                                        if (entryNodeId) {
+                                            nodeMap[entryNodeId] = selectedNode;
+                                        }
+                                        
+                                        // 创建其他所有节点
+                                        app.canvas.emitBeforeChange();
+                                        try {
+                                            for (const node of nodes) {
+                                                if (node.id !== entryNodeId) {
+                                                    const posEntryOld = entryNode?.pos;
+                                                    const posEntryNew = [selectedNode._pos[0], selectedNode._pos[1]];
+                                                    const nodePosNew = [
+                                                        node.pos[0] + posEntryNew[0] - posEntryOld[0], 
+                                                        node.pos[1] + posEntryNew[1] - posEntryOld[1]
+                                                    ];
+                                                    nodeMap[node.id] = addNodeOnGraph(node.type, {pos: nodePosNew});
+                                                }
+                                            }
+                                        } finally {
+                                            app.canvas.emitAfterChange();
+                                        }
+
+                                        // 处理所有连接
+                                        for (const link of links) {
+                                            const origin_node = nodeMap[link['origin_id']];
+                                            const target_node = nodeMap[link['target_id']];
+                                            
+                                            if (origin_node && target_node) {
+                                                origin_node.connect(
+                                                    link['origin_slot'], 
+                                                    target_node, 
+                                                    link['target_slot']
+                                                );
+                                            }
+                                        }
+                                    } else {
+                                        alert("Please select a upstream node first before adding a subgraph.");
+                                    }
+                                } else if (message.metadata?.pendingWorkflow) {
+                                    const workflow = message.metadata.pendingWorkflow;
+                                    const optimizedParams = message.metadata.optimizedParams;
+                                    app.loadGraphData(workflow);
+                                    
+                                    for (const [nodeId, nodeName, paramIndex, paramName, value] of optimizedParams) {
+                                        const widgets = app.graph._nodes_by_id[nodeId].widgets;
+                                        for (const widget of widgets) {
+                                            if (widget.name === paramName) {
+                                                widget.value = value;
+                                            }
+                                        }
+                                    }
+                                    app.graph.setDirtyCanvas(false, true);
+                                    // Add success message
+                                    const successMessage = {
+                                        id: generateUUID(),
+                                        role: 'tool',
+                                        content: JSON.stringify({
+                                            text: 'The workflow has been successfully loaded to the canvas',
+                                            ext: []
+                                        }),
+                                        format: 'markdown',
+                                        name: 'Assistant'
+                                    };
+                                    onAddMessage?.(successMessage);
+                                }
+                            }}
+                        />
+                    );
+                }
+
+                // 如果有response.text，使用AIMessage渲染
+                if (response.text || ExtComponent) {
+                    return (
+                        <AIMessage 
+                            key={message.id}
+                            content={message.content}
+                            name={message.name}
+                            format={message.format}
+                            onOptionClick={onOptionClick}
+                            extComponent={ExtComponent}
+                        />
+                    );
+                }
+
+                // 如果没有response.text但有扩展组件，直接返回扩展组件
+                if (ExtComponent) {
+                    return ExtComponent;
+                }
+
+                // 默认返回AIMessage
+                return (
+                    <AIMessage 
+                        key={message.id}
+                        content={message.content}
+                        name={message.name}
+                        format={message.format}
+                        onOptionClick={onOptionClick}
+                    />
+                );
+            } catch (error) {
+                console.error('[MessageList] Error parsing message content:', error);
+                // 如果解析JSON失败,使用AIMessage
+                console.error('解析JSON失败', message.content);
+                return (
+                    <AIMessage 
+                        key={message.id}
+                        content={message.content}
+                        name={message.name}
+                        format={message.format}
+                        onOptionClick={onOptionClick}
+                    />
+                );
+            }
+        }
+
+        return null;
+    };
+
+    return (
+        <div className="flex flex-col gap-4 w-full">
+            {messages?.map(renderMessage)}
+            {loading && <LoadingMessage />}
+        </div>
+    );
+} 
\ No newline at end of file
diff --git a/ui/src/components/chat/SelectedNodeInfo.tsx b/ui/src/components/chat/SelectedNodeInfo.tsx
new file mode 100644
index 0000000..c56a0ac
--- /dev/null
+++ b/ui/src/components/chat/SelectedNodeInfo.tsx
@@ -0,0 +1,76 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import { app } from "../../utils/comfyapp";
+
+interface SelectedNodeInfoProps {
+    nodeInfo: any;
+    onSendWithIntent: (intent: string, ext?: any) => void;
+    loading: boolean;
+}
+
+
+function getDownstreamSubgraphExt() {
+    const selectedNode = Object.values(app.canvas.selected_nodes)[0];
+    const nodeTypeSet = new Set<string>();
+    
+    function findUpstreamNodes(node: any, depth: number) {
+        if (!node || depth >= 1) return;
+        
+        if (node.inputs) {
+            for (const input of Object.values(node.inputs)) {
+                const linkId = (input as any).link;
+                if (linkId && app.graph.links[linkId]) {
+                    const originId = app.graph.links[linkId].origin_id;
+                    const originNode = app.graph._nodes_by_id[originId];
+                    if (originNode) {
+                        nodeTypeSet.add(originNode.type);
+                        findUpstreamNodes(originNode, depth + 1);
+                    }
+                }
+            }
+        }
+    }
+
+    if (selectedNode) {
+        findUpstreamNodes(selectedNode, 0);
+        return [{"type": "upstream_node_types", "data": Array.from(nodeTypeSet)}];
+    }
+
+    return null;
+}
+
+export function SelectedNodeInfo({ nodeInfo, onSendWithIntent, loading }: SelectedNodeInfoProps) {
+    return (
+        <div className="mb-3 p-3 rounded-md bg-gray-50 border border-gray-200 
+                      transform transition-all duration-200 hover:shadow-md">
+            <div className="text-sm">
+                <p>Selected node: {nodeInfo.type}</p>
+                <div className="flex gap-2 mt-2">
+                    <button
+                        className="px-3 py-1 text-xs rounded-md bg-blue-50 
+                                 hover:bg-blue-100 text-blue-700 transition-all 
+                                 duration-200 hover:shadow-sm active:scale-95"
+                        onClick={() => onSendWithIntent('node_explain')}
+                        disabled={loading}>
+                        Usage
+                    </button>
+                    <button
+                        className="px-3 py-1 text-xs rounded bg-green-100 
+                                 hover:bg-green-200 text-green-700 transition-colors"
+                        onClick={() => onSendWithIntent('node_params')}
+                        disabled={loading}>
+                        Parameters
+                    </button>
+                    <button
+                        className="px-3 py-1 text-xs rounded bg-purple-100 
+                                 hover:bg-purple-200 text-purple-700 transition-colors"
+                        onClick={() => onSendWithIntent('downstream_subgraph_search', getDownstreamSubgraphExt())}
+                        disabled={loading}>
+                        Downstream Nodes
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+} 
\ No newline at end of file
diff --git a/ui/src/components/chat/messages/AIMessage.tsx b/ui/src/components/chat/messages/AIMessage.tsx
new file mode 100644
index 0000000..ece17de
--- /dev/null
+++ b/ui/src/components/chat/messages/AIMessage.tsx
@@ -0,0 +1,148 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import { MemoizedReactMarkdown } from "../../markdown";
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import rehypeExternalLinks from 'rehype-external-links';
+import { BaseMessage } from './BaseMessage';
+import { ChatResponse } from "../../../types/types";
+import { useRef } from "react";
+interface AIMessageProps {
+  content: string;
+  name?: string;
+  avatar: string;
+  format?: string;
+  onOptionClick?: (option: string) => void;
+  extComponent?: React.ReactNode;
+}
+
+export function AIMessage({ content, name = 'Assistant', format, onOptionClick, extComponent }: AIMessageProps) {
+  const markdownWrapper = useRef<HTMLDivElement | null>()
+  const renderContent = () => {
+    try {
+      const response = JSON.parse(content) as ChatResponse;
+      const guides = response.ext?.find(item => item.type === 'guides')?.data || [];
+
+      return (
+        <div className="space-y-3">
+          {format === 'markdown' && response.text ? (
+            <div ref={markdownWrapper as React.RefObject<HTMLDivElement>}>
+              <MemoizedReactMarkdown
+                rehypePlugins={[
+                  [rehypeExternalLinks, { target: '_blank' }],
+                  rehypeKatex
+                ]}
+                remarkPlugins={[remarkGfm, remarkMath]}
+                className="prose prose-xs prose-neutral prose-a:text-accent-foreground/50 break-words [&>*]:!my-1 leading-relaxed text-xs
+                           prose-headings:font-semibold
+                           prose-h1:text-base
+                           prose-h2:text-sm
+                           prose-h3:text-xs
+                           prose-h4:text-xs
+                           prose-p:text-xs
+                           prose-ul:text-xs
+                           prose-ol:text-xs
+                           prose-li:text-xs
+                           prose-code:text-xs
+                           prose-pre:text-xs"
+                components={{
+                  p: ({ children }) => {
+                    return <p className="!my-0.5 leading-relaxed text-xs">{children}</p>
+                  },
+                  h1: ({ children }) => {
+                    return <h1 className="text-base font-semibold !my-1">{children}</h1>
+                  },
+                  h2: ({ children }) => {
+                    return <h2 className="text-sm font-semibold !my-1">{children}</h2>
+                  },
+                  h3: ({ children }) => {
+                    return <h3 className="text-xs font-semibold !my-1">{children}</h3>
+                  },
+                  h4: ({ children }) => {
+                    return <h4 className="text-xs font-semibold !my-1">{children}</h4>
+                  },
+                  table: ({ children }) => (
+                    <table className="border-solid border border-[#979797] w-[100%] text-xs">{children}</table>
+                  ),
+                  th: ({ children }) => (
+                    <th className="border-solid bg-[#E5E7ED] dark:bg-[#FFFFFF] dark:text-[#000000] border border-[#979797] text-center pt-2 text-xs">{children}</th>
+                  ),
+                  td: ({ children }) => {
+                    if (Array.isArray(children) && children?.length > 0) {
+                      const list: any[] = [];
+                      const length = children.length;
+                      for (let i = 0; i < length; i++) {
+                        if (children[i] === '<br>') {
+                          list.push(<br />)
+                        } else {
+                          list.push(children[i])
+                        }
+                      }
+                      children = list;
+                    }
+                    return (
+                      <td className="border-solid border border-[#979797] text-center text-xs">{children}</td>
+                    )
+                  },
+                  code: ({ children }) => {
+                    return <code className="text-xs bg-gray-100 rounded px-1">{children}</code>
+                  },
+                  pre: ({ children }) => {
+                    return <pre className="text-xs bg-gray-100 rounded p-2 overflow-x-auto">{children}</pre>
+                  },
+                  img: ({ node, ...props }) => (
+                    <div className="w-1/2 mx-auto">
+                      <img
+                        {...props}
+                        loading="lazy"
+                        className="w-full h-auto block" 
+                        onError={(e) => {
+                          console.warn('Image failed to load:', props.src, 'Error:', e);
+                          e.currentTarget.style.opacity = '0';
+                        }}
+                      />
+                    </div>
+                  ),
+                }}
+              >
+                {response.text}
+              </MemoizedReactMarkdown>
+            </div>
+          ) : response.text ? (
+            <p className="whitespace-pre-wrap text-left">
+              {response.text}
+            </p>
+          ) : null}
+
+          {guides.length > 0 && (
+            <div className="flex flex-wrap gap-2 mt-2">
+              {guides.map((guide: string, index: number) => (
+                <button
+                  key={index}
+                  className="px-3 py-1.5 bg-white text-gray-700 rounded-md hover:bg-gray-50 transition-colors text-[12px] w-[calc(50%-0.25rem)]"
+                  onClick={() => onOptionClick?.(guide)}
+                >
+                  {guide}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {extComponent}
+        </div>
+      );
+    } catch {
+      return <p className="whitespace-pre-wrap text-left">{content}</p>;
+    }
+  };
+
+  return (
+    <BaseMessage name={name}>
+      <div className="w-full rounded-lg bg-gray-50 p-4 text-gray-700 text-sm break-words overflow-hidden">
+        {renderContent()}
+      </div>
+    </BaseMessage>
+  );
+} 
\ No newline at end of file
diff --git a/ui/src/components/chat/messages/BaseMessage.tsx b/ui/src/components/chat/messages/BaseMessage.tsx
new file mode 100644
index 0000000..5d60d6d
--- /dev/null
+++ b/ui/src/components/chat/messages/BaseMessage.tsx
@@ -0,0 +1,18 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+interface BaseMessageProps {
+    name: string;
+    isUser?: boolean;
+    children: React.ReactNode;
+}
+
+export function BaseMessage({ name, isUser = false, children }: BaseMessageProps) {
+    return (
+        <div className="flex flex-col w-full items-start gap-2 py-2 animate-fadeIn">
+            <div className="w-full">
+                {children}
+            </div>
+        </div>
+    );
+} 
\ No newline at end of file
diff --git a/ui/src/components/chat/messages/DownstreamSubgraphs.tsx b/ui/src/components/chat/messages/DownstreamSubgraphs.tsx
new file mode 100644
index 0000000..84d3f98
--- /dev/null
+++ b/ui/src/components/chat/messages/DownstreamSubgraphs.tsx
@@ -0,0 +1,292 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import { app } from "../../../utils/comfyapp";
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { ChatResponse, Node, Subgraph } from "../../../types/types";
+import { Network } from 'vis-network';
+import { WorkflowChatAPI } from "../../../apis/workflowChatApi";
+import { generateUUID } from "../../../utils/uuid";
+import { addNodeOnGraph } from "../../../utils/graphUtils";
+
+interface DownstreamSubgraphsProps {
+    content: string;
+    name?: string;
+    avatar: string;
+    installedNodes: any[];
+    onAddMessage?: (message: Message) => void;
+}
+
+export function DownstreamSubgraphs({ content, name = 'Assistant', avatar, installedNodes, onAddMessage }: DownstreamSubgraphsProps) {
+    const response = JSON.parse(content) as ChatResponse;
+    const [hoveredNode, setHoveredNode] = useState<string | null>(null);
+    const networkRef = useRef<Network | null>(null);
+
+    const nodes = response.ext?.find(item => item.type === 'downstream_subgraph_search')?.data || [];
+
+    // 将 Subgraph 转换为 vis.js 格式的函数
+    const convertToVisFormat = (subgraph: Subgraph) => {
+        const visNodes = subgraph.json.nodes.map(node => ({
+            id: node.id,
+            label: node.type,
+            color: {
+                background: '#2B7CE9',
+                border: '#1B5BB1'
+            },
+            font: {
+                size: 16,
+                color: '#FFFFFF',
+                face: 'arial',
+                bold: true
+            },
+            margin: 12,
+            padding: 10,
+            shape: 'box',
+            widthConstraint: {
+                minimum: 100,
+                maximum: 200
+            }
+        }));
+
+        const visEdges = subgraph.json.links.map(link => ({
+            from: link.origin_id,
+            to: link.target_id,
+            arrows: {
+                to: { enabled: true, scaleFactor: 1.2 }
+            },
+            color: '#FFFFFF',
+            width: 2
+        }));
+
+        return { nodes: visNodes, edges: visEdges };
+    };
+
+    // 添加清理函数
+    useEffect(() => {
+        return () => {
+            if (networkRef.current) {
+                networkRef.current.destroy();
+                networkRef.current = null;
+            }
+        };
+    }, []);
+
+    const createNetwork = useCallback((el: HTMLElement, node: Subgraph) => {
+        if (networkRef.current) {
+            networkRef.current.destroy();
+        }
+
+        const visData = convertToVisFormat(node);
+        const newNetwork = new Network(el, visData, {
+            nodes: {
+                shape: 'box',
+                margin: 12,
+                padding: 10,
+                font: {
+                    size: 16,
+                    color: '#FFFFFF',
+                    face: 'arial',
+                    bold: true
+                },
+                borderWidth: 2,
+                shadow: {
+                    enabled: true,
+                    color: 'rgba(0,0,0,0.2)',
+                    size: 5
+                }
+            },
+            edges: {
+                arrows: 'to',
+                color: '#FFFFFF',
+                width: 2,
+                smooth: {
+                    enabled: true,
+                    type: 'straightCross'
+                }
+            },
+            physics: {
+                enabled: true,
+                solver: 'hierarchicalRepulsion',
+                hierarchicalRepulsion: {
+                    nodeDistance: 200,
+                    springLength: 200
+                }
+            },
+            layout: {
+                hierarchical: {
+                    enabled: true,
+                    direction: 'UD',
+                    sortMethod: 'directed',
+                    nodeSpacing: 200,
+                    levelSeparation: 150
+                }
+            },
+            interaction: { 
+                dragNodes: false,
+                zoomView: false,
+                dragView: false
+            }
+        });
+
+        networkRef.current = newNetwork;
+    }, []);
+
+    const checkAndLoadSubgraph = async (node: Subgraph) => {
+        console.log('[DownstreamSubgraphs] Starting checkAndLoadSubgraph with node:', node);
+        const nodes = node.json.nodes;
+        const selectedNode = Object.values(app.canvas.selected_nodes)[0];
+
+        if (!selectedNode) {
+            console.warn('[DownstreamSubgraphs] No node selected');
+            alert("Please select a upstream node first before adding a subgraph.");
+            return;
+        }
+
+        // 检查所有节点是否已安装
+        const requiredNodeTypes = nodes.map(node => node.type);
+        const installedNodeTypes = installedNodes;
+        console.log('[DownstreamSubgraphs] Required node types:', requiredNodeTypes);
+        console.log('[DownstreamSubgraphs] Installed node types:', installedNodeTypes);
+        
+        const missingNodeTypes = requiredNodeTypes.filter(
+            type => !installedNodeTypes.includes(type)
+        );
+        console.log('[DownstreamSubgraphs] Missing node types:', missingNodeTypes);
+
+        if (missingNodeTypes.length > 0) {
+            try {
+                console.log('[DownstreamSubgraphs] Fetching info for missing nodes');
+                const nodeInfos = await WorkflowChatAPI.batchGetNodeInfo(missingNodeTypes);
+                console.log('[DownstreamSubgraphs] Received node infos:', nodeInfos);
+                
+                // 构造消息内容 - 修改为显示按钮列表格式
+                const messageContent = {
+                    text: ``,
+                    ext: [{
+                        type: 'node_install_guide',
+                        data: nodeInfos.map(info => ({
+                            name: info.name,
+                            repository_url: info.github_url
+                        }))
+                    }]
+                };
+                console.log('[DownstreamSubgraphs] Created message content:', messageContent);
+
+                const aiMessage = {
+                    id: generateUUID(),
+                    role: 'ai',
+                    content: JSON.stringify(messageContent),
+                    format: 'markdown',
+                    name: 'Assistant',
+                    // 保存原始的subgraph信息，用于后续加载
+                    metadata: {
+                        pendingSubgraph: node
+                    }
+                };
+                console.log('[DownstreamSubgraphs] Created AI message:', aiMessage);
+
+                onAddMessage?.(aiMessage);
+                return;
+            } catch (error) {
+                console.error('[DownstreamSubgraphs] Error fetching node info:', error);
+                alert('Error checking required nodes. Please try again.');
+                return;
+            }
+        }
+
+        console.log('[DownstreamSubgraphs] All required nodes are installed, proceeding to load subgraph');
+        loadSubgraphToCanvas(node, selectedNode);
+    };
+
+    const loadSubgraphToCanvas = (node: Subgraph, selectedNode: any) => {
+        const nodes = node.json.nodes;
+        const links = node.json.links;
+        
+        const entryNode = nodes.find(node => node.id === 0);
+        const entryNodeId = entryNode?.id;
+        console.log('[DownstreamSubgraphs] Entry node ID:', entryNodeId);
+
+        const nodeMap = {};
+        if (entryNodeId !== null) {
+            nodeMap[entryNodeId] = selectedNode;
+        }
+        
+        // 创建其他所有节点
+        app.canvas.emitBeforeChange();
+        try {
+            for (const node of nodes) {
+                if (node.id !== entryNodeId) {
+                    const posEntryOld = entryNode?.pos;
+                    const posEntryNew = [selectedNode._pos[0], selectedNode._pos[1]];
+                    const nodePosNew = [
+                        node.pos[0] + posEntryNew[0] - posEntryOld[0], 
+                        node.pos[1] + posEntryNew[1] - posEntryOld[1]
+                    ];
+                    nodeMap[node.id] = addNodeOnGraph(node.type, {pos: nodePosNew});
+                }
+            }
+            // 处理所有连接
+            for (const link of links) {
+                const origin_node = nodeMap[link['origin_id']];
+                const target_node = nodeMap[link['target_id']];
+                
+                if (origin_node && target_node) {
+                    origin_node.connect(
+                        link['origin_slot'], 
+                        target_node, 
+                        link['target_slot']
+                    );
+                }
+            }
+        } finally {
+            app.canvas.emitAfterChange();
+        }
+    };
+
+    return (
+        <div className="rounded-lg bg-green-50 p-3 text-gray-700 text-xs break-words overflow-visible">
+            {nodes.length > 0 && (
+                <div className="space-y-3">
+                    <div className="flex flex-wrap gap-2">
+                        {nodes.map((node: Subgraph) => (
+                            <div key={node.name} className="relative group">
+                                <button
+                                    className="px-3 py-1.5 bg-blue-500 text-white rounded-md 
+                                             hover:bg-blue-600 transition-colors text-xs"
+                                    onClick={() => checkAndLoadSubgraph(node)}
+                                    onMouseEnter={() => setHoveredNode(node.name)}
+                                    onMouseLeave={() => setHoveredNode(null)}
+                                >
+                                    {node.name}
+                                </button>
+                                <p className="text-xs ml-3 text-gray-500">
+                                    [{node.tags.join(', ')}]
+                                </p>
+                                {hoveredNode === node.name && (
+                                    <div 
+                                        className="fixed transform -translate-y-full 
+                                                 z-[9999] w-[500px] p-4 bg-gray-800 text-white text-xs 
+                                                 rounded-md shadow-lg mb-2 border border-gray-700"
+                                        style={{
+                                            left: 'calc(var(--mouse-x, 0) + 16px)',
+                                            top: 'calc(var(--mouse-y, 0) - 8px)'
+                                        }}
+                                    >
+                                        <div 
+                                            style={{ width: '100%', height: '300px' }} 
+                                            ref={(el) => {
+                                                if (el) {
+                                                    createNetwork(el, node);
+                                                }
+                                            }}
+                                        />
+                                    </div>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+} 
\ No newline at end of file
diff --git a/ui/src/components/chat/messages/LoadingMessage.tsx b/ui/src/components/chat/messages/LoadingMessage.tsx
new file mode 100644
index 0000000..042afd1
--- /dev/null
+++ b/ui/src/components/chat/messages/LoadingMessage.tsx
@@ -0,0 +1,19 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import { BaseMessage } from "./BaseMessage";
+
+export function LoadingMessage() {
+    return (
+        <BaseMessage name="Assistant">
+            <div className="flex items-center space-x-2 p-4 bg-gray-50 rounded-lg">
+                <div className="flex space-x-1">
+                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
+                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
+                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
+                </div>
+                <span className="text-sm text-gray-500">AI is thinking...</span>
+            </div>
+        </BaseMessage>
+    );
+} 
\ No newline at end of file
diff --git a/ui/src/components/chat/messages/NodeInstallGuide.tsx b/ui/src/components/chat/messages/NodeInstallGuide.tsx
new file mode 100644
index 0000000..316e333
--- /dev/null
+++ b/ui/src/components/chat/messages/NodeInstallGuide.tsx
@@ -0,0 +1,84 @@
+/*
+ * @Author: 晴知 qingli.hql@alibaba-inc.com
+ * @Date: 2024-12-26 17:16:51
+ * @LastEditors: 晴知 qingli.hql@alibaba-inc.com
+ * @LastEditTime: 2025-02-13 21:02:17
+ * @FilePath: /comfyui_copilot/ui/src/components/chat/messages/NodeInstallGuide.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import React from 'react';
+
+interface NodeInstallGuideProps {
+    content: string;
+    onLoadSubgraph?: () => void;
+}
+
+export function NodeInstallGuide({ content, onLoadSubgraph }: NodeInstallGuideProps) {
+    const response = JSON.parse(content);
+    const nodeInfos = response.ext?.find(item => item.type === 'node_install_guide')?.data || [];
+
+    return (
+        <div>
+            <p>在加载graph到画布前，以下节点有待安装，请跳转到对应的github安装节点：</p>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                {nodeInfos.map((node: any, index: number) => (
+                    <div 
+                        key={index}
+                        className="w-full p-3 bg-white rounded-lg border border-gray-200 
+                                 hover:shadow-sm transition-all duration-200"
+                    >
+                        <div className="flex flex-col">
+                            <h3 className="text-[12px] font-medium text-gray-800 mb-4">
+                                {node.name}
+                            </h3>
+                            <div className="flex justify-end">
+                                {node.repository_url ? (
+                                    <a
+                                        href={node.repository_url}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="px-2 py-1 bg-white text-gray-900 rounded-md 
+                                                 border border-gray-900 hover:bg-gray-100 
+                                                 transition-colors text-[10px] flex items-center gap-1"
+                                    >
+                                        <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                                        </svg>
+                                        Download
+                                    </a>
+                                ) : (
+                                    <a
+                                        href={`https://www.google.com/search?q=${encodeURIComponent(node.name + ' comfyui custom node')}`}
+                                        target="_blank"
+                                        rel="noopener noreferrer" 
+                                        className="px-2 py-1 bg-gray-100 text-gray-500 rounded-md
+                                                 border border-gray-300 text-[10px] flex items-center gap-1"
+                                    >
+                                        <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 21h7a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v11m0 5l4.879-4.879m0 0a3 3 0 104.243-4.242 3 3 0 00-4.243 4.242z" />
+                                        </svg>
+                                        Search on Google
+                                    </a>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+            <p className="mt-4"></p>
+            <p>安装完成后，请点击继续加载graph按钮，将graph加载到画布中：</p>
+            <div className="mt-4">
+                <button
+                    className="px-3 py-2 bg-blue-500 text-white rounded-md 
+                             hover:bg-blue-600 transition-colors text-xs block mx-auto"
+                    onClick={onLoadSubgraph}
+                >
+                    继续加载graph
+                </button>
+            </div>
+        </div>
+    );
+} 
\ No newline at end of file
diff --git a/ui/src/components/chat/messages/NodeRecommend.tsx b/ui/src/components/chat/messages/NodeRecommend.tsx
new file mode 100644
index 0000000..8d8fb81
--- /dev/null
+++ b/ui/src/components/chat/messages/NodeRecommend.tsx
@@ -0,0 +1,130 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import { app } from "../../../utils/comfyapp";
+import { useState } from 'react';
+import { ChatResponse, Node } from "../../../types/types";
+import { addNodeOnGraph } from "../../../utils/graphUtils";
+
+interface NodeRecommendProps {
+    content: string;
+    name?: string;
+    avatar: string;
+    installedNodes: any[];
+}
+
+export function NodeRecommend({ content, name = 'Assistant', avatar, installedNodes }: NodeRecommendProps) {
+    const response = JSON.parse(content) as ChatResponse;
+    const [hoveredNode, setHoveredNode] = useState<string | null>(null);
+    
+    const nodes = response.ext?.find(item => item.type === 'node')?.data || [];
+
+    const isNodeInstalled = (nodeName: string) => {
+        return installedNodes.some(node => node === nodeName);
+    };
+
+    return (
+        // <BaseMessage avatar={avatar} name={name}>
+            <div className="rounded-lg bg-green-50 p-3 text-gray-700 text-xs break-words overflow-visible">
+                {nodes.length > 0 && (
+                    <div className="space-y-3">
+                        <p className="text-xs">Recommended downstream nodes that can be connected:</p>
+                        <div className="flex flex-wrap gap-2">
+                            {nodes.map((node: Node) => {
+                                const installed = isNodeInstalled(node.name);
+                                return (
+                                    <div key={node.name} className="relative group">
+                                        {installed ? (
+                                            <button
+                                                className="px-3 py-1.5 bg-blue-500 text-white rounded-md 
+                                                         hover:bg-blue-600 transition-colors text-xs"
+                                                onClick={() => {
+                                                    const addNode = addNodeOnGraph(node.name);
+                                                    if (addNode) {
+                                                        const selectedNode = Object.values(app.canvas.selected_nodes)[0];
+                                                        if (selectedNode) {
+                                                            selectedNode.connect(node.from_index, addNode, node.to_index);
+                                                        }
+                                                    }
+                                                }}
+                                                onMouseEnter={() => setHoveredNode(node.name)}
+                                                onMouseLeave={() => setHoveredNode(null)}
+                                            >
+                                                {node.name}
+                                            </button>
+                                        ) : (
+                                            <a
+                                                href={node.github_url}
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                                className="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-md
+                                                         hover:bg-gray-200 transition-colors text-xs border 
+                                                         border-gray-200"
+                                                onMouseEnter={() => setHoveredNode(node.name)}
+                                                onMouseLeave={() => setHoveredNode(null)}
+                                            >
+                                                {node.name}
+                                            </a>
+                                        )}
+                                        {hoveredNode === node.name && node.description && (
+                                            <div className="fixed transform -translate-y-full 
+                                                        z-[9999] w-64 p-2 bg-gray-800 text-white text-xs 
+                                                        rounded-md shadow-lg mb-2"
+                                                style={{
+                                                    left: 'calc(var(--mouse-x, 0) + 16px)',
+                                                    top: 'calc(var(--mouse-y, 0) - 8px)'
+                                                }}
+                                            >
+                                                {node.description}
+                                                <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 
+                                                            border-4 border-transparent border-t-gray-800"/>
+                                            </div>
+                                        )}
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </div>
+                )}
+
+                {response.node_info?.missing_nodes && response.node_info.missing_nodes.length > 0 && (
+                    <div className="space-y-3 mt-4">
+                        <p>Other recommended nodes (requires installation):</p>
+                        <div className="flex flex-wrap gap-2">
+                            {response.node_info.missing_nodes.map((node: Node) => (
+                                <div key={node.name} className="relative group">
+                                    <a
+                                        href={node.github_url}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-md
+                                                 hover:bg-gray-200 transition-colors text-xs border 
+                                                 border-gray-200"
+                                        onMouseEnter={() => setHoveredNode(node.name)}
+                                        onMouseLeave={() => setHoveredNode(null)}
+                                    >
+                                        {node.name}
+                                    </a>
+                                    {hoveredNode === node.name && node.description && (
+                                        <div className="fixed transform -translate-y-full 
+                                                    z-[9999] w-64 p-2 bg-gray-800 text-white text-xs 
+                                                    rounded-md shadow-lg mb-2"
+                                            style={{
+                                                left: 'calc(var(--mouse-x, 0) + 16px)',
+                                                top: 'calc(var(--mouse-y, 0) - 8px)'
+                                            }}
+                                        >
+                                            {node.description}
+                                            <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 
+                                                        border-4 border-transparent border-t-gray-800"/>
+                                        </div>
+                                    )}
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+            </div>
+        // </BaseMessage>
+    );
+} 
\ No newline at end of file
diff --git a/ui/src/components/chat/messages/NodeSearch.tsx b/ui/src/components/chat/messages/NodeSearch.tsx
new file mode 100644
index 0000000..32f794d
--- /dev/null
+++ b/ui/src/components/chat/messages/NodeSearch.tsx
@@ -0,0 +1,156 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import { app } from "../../../utils/comfyapp";
+import { BaseMessage } from './BaseMessage';
+import { useState } from 'react';
+import { ChatResponse, Node } from "../../../types/types";
+import { addNodeOnGraph } from "../../../utils/graphUtils";
+
+interface NodeSearchProps {
+    content: string;
+    name?: string;
+    avatar: string;
+    installedNodes: any[];
+}
+
+export function NodeSearch({ content, name = 'Assistant', avatar, installedNodes }: NodeSearchProps) {
+    const response = JSON.parse(content) as ChatResponse;
+    const [hoveredNode, setHoveredNode] = useState<string | null>(null);
+
+    const nodes = response.ext?.find(item => item.type === 'node')?.data || [];
+    
+    const isNodeInstalled = (nodeName: string) => {
+        return installedNodes.some(node => node === nodeName);
+    };
+
+    const installedNodesList = nodes.filter(node => isNodeInstalled(node.name));
+    const uninstalledNodesList = nodes.filter(node => !isNodeInstalled(node.name));
+
+    // 添加一个格式化数字的辅助函数
+    const formatNumber = (num: number) => {
+        if (num >= 10000) {
+            return `${(num / 10000).toFixed(1)}w`;
+        }
+        if (num >= 1000) {
+            return `${(num / 1000).toFixed(1)}k`;
+        }
+        return num.toString();
+    };
+
+    return (
+        <div className="rounded-lg bg-green-50 p-3 text-gray-700 text-xs break-words overflow-visible">
+            {installedNodesList.length > 0 && (
+                <div className="space-y-3">
+                    <p className="text-xs font-medium">Installed nodes:</p>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                        {installedNodesList.map((node: Node) => (
+                            <div
+                                key={node.name}
+                                className="w-full p-3 bg-white rounded-lg border border-gray-200 
+                                         hover:shadow-sm transition-all duration-200 relative group"
+                                onMouseEnter={() => setHoveredNode(node.name)}
+                                onMouseLeave={() => setHoveredNode(null)}
+                            >
+                                <h3 className="text-sm font-medium text-gray-800 mb-4">
+                                    {node.name}
+                                </h3>
+                                <div className="flex items-center justify-between text-[11px]">
+                                    <div className="flex items-center gap-1 text-gray-600">
+                                        <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                                            <path d="M12 .25a.75.75 0 0 1 .673.418l3.058 6.197 6.839.994a.75.75 0 0 1 .415 1.279l-4.948 4.823 1.168 6.811a.75.75 0 0 1-1.088.791L12 18.347l-6.117 3.216a.75.75 0 0 1-1.088-.79l1.168-6.812-4.948-4.823a.75.75 0 0 1 .416-1.28l6.838-.993L11.327.668A.75.75 0 0 1 12 .25z"/>
+                                        </svg>
+                                        <span>{formatNumber(node.github_stars || 0)}</span>
+                                    </div>
+                                    <button
+                                        className="px-2 py-1 bg-blue-500 text-white rounded-md 
+                                                 hover:bg-blue-600 transition-colors text-[10px] flex items-center gap-1"
+                                        onClick={() => {
+                                            const addNode = addNodeOnGraph(node.name);
+                                            if (addNode) {
+                                                addNode.connect(node.from_index, addNode, node.to_index);
+                                            }
+                                        }}
+                                    >
+                                        <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4"/>
+                                        </svg>
+                                        Add to Canvas
+                                    </button>
+                                </div>
+                                {hoveredNode === node.name && node.description && (
+                                    <div className="fixed transform -translate-y-full z-[9999] w-64 p-2 
+                                                bg-gray-800 text-white text-xs rounded-md shadow-lg mb-2"
+                                        style={{
+                                            left: 'calc(var(--mouse-x, 0) + 16px)',
+                                            top: 'calc(var(--mouse-y, 0) - 8px)'
+                                        }}
+                                    >
+                                        {node.description}
+                                        <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 
+                                                    border-4 border-transparent border-t-gray-800"/>
+                                    </div>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            {uninstalledNodesList.length > 0 && (
+                <div className={`space-y-3 ${installedNodesList.length > 0 ? 'mt-4' : ''}`}>
+                    <p className="text-xs font-medium">Uninstalled nodes:</p>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                        {uninstalledNodesList.map((node: Node) => (
+                            <div
+                                key={node.name}
+                                className="w-full p-3 bg-white rounded-lg border border-gray-200 
+                                         hover:shadow-sm transition-all duration-200 relative group"
+                                onMouseEnter={() => setHoveredNode(node.name)}
+                                onMouseLeave={() => setHoveredNode(null)}
+                            >
+                                <h3 className="text-[12px] font-medium text-gray-800 mb-4">
+                                    {node.name}
+                                </h3>
+                                <div className="flex items-center justify-between text-[11px]">
+                                    <div className="flex items-center gap-1 text-gray-600">
+                                        <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
+                                            <path d="M12 .25a.75.75 0 0 1 .673.418l3.058 6.197 6.839.994a.75.75 0 0 1 .415 1.279l-4.948 4.823 1.168 6.811a.75.75 0 0 1-1.088.791L12 18.347l-6.117 3.216a.75.75 0 0 1-1.088-.79l1.168-6.812-4.948-4.823a.75.75 0 0 1 .416-1.28l6.838-.993L11.327.668A.75.75 0 0 1 12 .25z"/>
+                                        </svg>
+                                        <span>{formatNumber(node.github_stars || 0)}</span>
+                                    </div>
+                                    <a
+                                        href={node.github_url}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="px-2 py-1 bg-white text-gray-900 rounded-md 
+                                                 border border-gray-900 hover:bg-gray-100 
+                                                 transition-colors text-[10px] flex items-center gap-1"
+                                    >
+                                        <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                                        </svg>
+                                        Download
+                                    </a>
+                                </div>
+                                {hoveredNode === node.name && node.description && (
+                                    <div className="fixed transform -translate-y-full z-[9999] w-64 p-2 
+                                                bg-gray-800 text-white text-xs rounded-md shadow-lg mb-2"
+                                        style={{
+                                            left: 'calc(var(--mouse-x, 0) + 16px)',
+                                            top: 'calc(var(--mouse-y, 0) - 8px)'
+                                        }}
+                                    >
+                                        {node.description}
+                                        <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 
+                                                    border-4 border-transparent border-t-gray-800"/>
+                                    </div>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+} 
\ No newline at end of file
diff --git a/ui/src/components/chat/messages/UserMessage.tsx b/ui/src/components/chat/messages/UserMessage.tsx
new file mode 100644
index 0000000..8784bb7
--- /dev/null
+++ b/ui/src/components/chat/messages/UserMessage.tsx
@@ -0,0 +1,18 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import { BaseMessage } from './BaseMessage';
+
+interface UserMessageProps {
+    content: string;
+}
+
+export function UserMessage({ content }: UserMessageProps) {
+    return (
+        <BaseMessage name="User" isUser={true}>
+            <div className="w-full rounded-lg border border-gray-700 p-4 text-gray-700 text-sm break-words">
+                <p className="whitespace-pre-wrap">{content}</p>
+            </div>
+        </BaseMessage>
+    );
+} 
\ No newline at end of file
diff --git a/ui/src/components/chat/messages/WorkflowOption.tsx b/ui/src/components/chat/messages/WorkflowOption.tsx
new file mode 100644
index 0000000..16eec37
--- /dev/null
+++ b/ui/src/components/chat/messages/WorkflowOption.tsx
@@ -0,0 +1,179 @@
+import { app } from "../../../utils/comfyapp";
+import { BaseMessage } from './BaseMessage';
+import { ChatResponse, Workflow } from "../../../types/types";
+import { WorkflowChatAPI } from "../../../apis/workflowChatApi";
+import { MemoizedReactMarkdown } from "../../markdown";
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import rehypeExternalLinks from 'rehype-external-links';
+import { generateUUID } from "../../../utils/uuid";
+
+interface WorkflowOptionProps {
+    content: string;
+    name?: string;
+    avatar: string;
+    latestInput: string;
+    installedNodes: any[];
+    onAddMessage?: (message: any) => void;
+}
+
+export function WorkflowOption({ content, name = 'Assistant', avatar, latestInput, installedNodes, onAddMessage }: WorkflowOptionProps) {
+    const response = JSON.parse(content) as ChatResponse;
+    const workflows = response.ext?.find(item => item.type === 'workflow')?.data || [];
+    
+    const handleAcceptWorkflow = async (workflow: Workflow) => {
+        if (!workflow.id) {
+            console.error('No workflow id provided');
+            return;
+        }
+
+        try {
+            // 获取优化后的工作流
+            const optimizedResult = await WorkflowChatAPI.getOptimizedWorkflow(
+                workflow.id,
+                latestInput
+            );
+
+            // 加载优化后的工作流
+            if (optimizedResult.workflow) {
+                // 检查是否需要安装节点
+                const nodeTypes = new Set<string>();
+                for (const node of optimizedResult.workflow.nodes) {
+                    nodeTypes.add(node.type);
+                }
+                
+                const missingNodeTypes = Array.from(nodeTypes).filter(
+                    type => !installedNodes.includes(type)
+                );
+                
+                console.log('[WorkflowOption] Missing node types:', missingNodeTypes);
+
+                if (missingNodeTypes.length > 0) {
+                    try {
+                        console.log('[WorkflowOption] Fetching info for missing nodes');
+                        const nodeInfos = await WorkflowChatAPI.batchGetNodeInfo(missingNodeTypes);
+                        console.log('[WorkflowOption] Received node infos:', nodeInfos);
+                        
+                        const messageContent = {
+                            text: ``,
+                            ext: [{
+                                type: 'node_install_guide',
+                                data: nodeInfos.map(info => ({
+                                    name: info.name,
+                                    repository_url: info.github_url
+                                }))
+                            }]
+                        };
+
+                        const aiMessage = {
+                            id: generateUUID(),
+                            role: 'ai',
+                            content: JSON.stringify(messageContent),
+                            format: 'markdown',
+                            name: 'Assistant',
+                            metadata: {
+                                pendingWorkflow: optimizedResult.workflow,
+                                optimizedParams: optimizedResult.optimized_params
+                            }
+                        };
+
+                        onAddMessage?.(aiMessage);
+                        return;
+                    } catch (error) {
+                        console.error('[WorkflowOption] Error fetching node info:', error);
+                        alert('Error checking required nodes. Please try again.');
+                        return;
+                    }
+                }
+
+                // 如果所有节点都已安装，直接加载工作流
+                loadWorkflow(optimizedResult.workflow, optimizedResult.optimized_params);
+            }
+        } catch (error) {
+            console.error('Failed to optimize workflow:', error);
+        }
+    };
+
+    const loadWorkflow = (workflow: any, optimizedParams: any[]) => {
+        app.loadGraphData(workflow);
+        
+        // 应用优化后的参数 [节点id，节点名称，参数id，参数名称，参数默认值]
+        for (const [nodeId, nodeName, paramIndex, paramName, value] of optimizedParams) {
+            const widgets = app.graph._nodes_by_id[nodeId].widgets;
+            for (const widget of widgets) {
+                if (widget.name === paramName) {
+                    widget.value = value;
+                }
+            }
+        }
+        app.graph.setDirtyCanvas(false, true);
+
+        // Add success message
+        const successMessage = {
+            id: generateUUID(),
+            role: 'tool',
+            content: JSON.stringify({
+                text: 'The workflow has been successfully loaded to the canvas',
+                ext: []
+            }),
+            format: 'markdown',
+            name: 'Assistant'
+        };
+        onAddMessage?.(successMessage);
+    };
+    
+    return (
+        // <BaseMessage avatar={avatar} name={name}>
+            <div className="space-y-3">
+                {workflows.length > 0 && (
+                    <div className="flex flex-col space-y-4">
+                        {workflows.map((workflow: Workflow, index: number) => (
+                            <div key={index} className="flex items-center gap-4 p-4 rounded-lg border border-gray-200 hover:bg-gray-50">
+                                {workflow.image && (
+                                    <img
+                                        src={workflow.image}
+                                        alt={workflow.name}
+                                        className="w-14 h-14 object-cover rounded-lg"
+                                        onError={(e) => {
+                                            const target = e.target as HTMLImageElement;
+                                            target.onerror = null; // 防止循环触发
+                                            target.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56' fill='none'%3E%3Crect width='56' height='56' fill='%23F3F4F6'/%3E%3Cpath d='M28 28C30.2091 28 32 26.2091 32 24C32 21.7909 30.2091 20 28 20C25.7909 20 24 21.7909 24 24C24 26.2091 25.7909 28 28 28Z' fill='%239CA3AF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.7253 37.6307C19.8278 35.1533 22.6897 33.6 26 33.6H30C33.3103 33.6 36.1722 35.1533 37.2747 37.6307C37.6419 38.4561 37.0611 39.2 36.1694 39.2H19.8306C18.9389 39.2 18.3581 38.4561 18.7253 37.6307Z' fill='%239CA3AF'/%3E%3C/svg%3E";
+                                        }}
+                                    />
+                                )}
+                                <div className="flex-1 break-words flex flex-col h-[4.5rem] justify-between">
+                                    <div>
+                                        <h3 className="font-medium text-sm line-clamp-2 h-10 overflow-hidden">{workflow.name}</h3>
+                                    </div>
+                                    <div className="flex justify-between items-center mt-1">
+                                        {workflow.description && (
+                                            <div className="relative group">
+                                                <div className="w-5 h-5 flex items-center justify-center text-gray-500 cursor-help">
+                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
+                                                        <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+                                                    </svg>
+                                                </div>
+                                                <div className="absolute bottom-full left-0 mb-2 hidden group-hover:block">
+                                                    <div className="bg-gray-900 text-white text-xs rounded-md py-1 px-2 max-w-xs">
+                                                        {workflow.description}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        )}
+                                        <button
+                                            onClick={() => handleAcceptWorkflow(workflow)}
+                                            className="px-3 py-1.5 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors text-xs"
+                                        >
+                                            Accept
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+        // </BaseMessage>
+    );
+} 
\ No newline at end of file
diff --git a/ui/src/components/markdown.tsx b/ui/src/components/markdown.tsx
new file mode 100644
index 0000000..0017ee1
--- /dev/null
+++ b/ui/src/components/markdown.tsx
@@ -0,0 +1,12 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import { FC, memo } from 'react'
+import ReactMarkdown, { Options } from 'react-markdown'
+
+export const MemoizedReactMarkdown: FC<Options> = memo(
+  ReactMarkdown,
+  (prevProps, nextProps) =>
+    prevProps.children === nextProps.children &&
+    prevProps.className === nextProps.className
+)
\ No newline at end of file
diff --git a/ui/src/config.ts b/ui/src/config.ts
new file mode 100644
index 0000000..4612e4c
--- /dev/null
+++ b/ui/src/config.ts
@@ -0,0 +1,12 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+const isDevelopment = import.meta.env.MODE === 'development'
+
+const defaultApiBaseUrl = 'http://localhost:8000'
+
+export const config = {
+  apiBaseUrl: isDevelopment 
+    ? defaultApiBaseUrl 
+    : (import.meta.env.VITE_API_BASE_URL || defaultApiBaseUrl)
+} 
\ No newline at end of file
diff --git a/ui/src/const.ts b/ui/src/const.ts
new file mode 100644
index 0000000..6d72b65
--- /dev/null
+++ b/ui/src/const.ts
@@ -0,0 +1,10 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+export const LEGACY_COMFYSPACE_TRACKING_FIELD_NAME = "comfyspace_tracking";
+export const COMFYSPACE_TRACKING_FIELD_NAME = "workspace_info";
+export const COMFYSPACE_AUTH_ENDPOINT = "comfyspace_auth";
+export const COMFYSPACE_AUTH_REDIRECT_URL = "http://localhost:8188/";
+export const DRAWER_Z_INDEX = 9999999;
+export const TOPBAR_BUTTON_HEIGHT = 28;
+export const SHORTCUT_TRIGGER_EVENT = "SHORTCUT_TRIGGER_EVENT";
diff --git a/ui/src/constants/events.ts b/ui/src/constants/events.ts
new file mode 100644
index 0000000..86aeb7f
--- /dev/null
+++ b/ui/src/constants/events.ts
@@ -0,0 +1,6 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+export const COPILOT_EVENTS = {
+    EXPLAIN_NODE: 'copilot:explain-node'
+} as const;
diff --git a/ui/src/index.css b/ui/src/index.css
new file mode 100644
index 0000000..56dc3a6
--- /dev/null
+++ b/ui/src/index.css
@@ -0,0 +1,54 @@
+/* Copyright (C) 2025 AIDC-AI */
+/* Licensed under the MIT License. */
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #d39e9e;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  height: 100%;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
diff --git a/ui/src/input.css b/ui/src/input.css
new file mode 100644
index 0000000..6391807
--- /dev/null
+++ b/ui/src/input.css
@@ -0,0 +1,6 @@
+/* Copyright (C) 2025 AIDC-AI */
+/* Licensed under the MIT License. */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/ui/src/main.tsx b/ui/src/main.tsx
new file mode 100644
index 0000000..3c420fd
--- /dev/null
+++ b/ui/src/main.tsx
@@ -0,0 +1,37 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { waitForApp } from "./utils/comfyapp.ts";
+import "./input.css";
+
+const App = React.lazy(() =>
+  import("./App.tsx").then(({ default: App }) => ({
+    default: App,
+  })),
+);
+
+function waitForDocumentBody() {
+  return new Promise((resolve) => {
+    if (document.body) {
+      return resolve(document.body);
+    }
+
+    document.addEventListener("DOMContentLoaded", () => {
+      resolve(document.body);
+    });
+  });
+}
+
+waitForDocumentBody()
+  .then(() => waitForApp())
+  .then(() => {
+    const topbar = document.createElement("div");
+    document.body.append(topbar);
+    ReactDOM.createRoot(topbar).render(
+      <React.StrictMode>
+        <App />
+      </React.StrictMode>,
+    );
+  });
diff --git a/ui/src/output.css b/ui/src/output.css
new file mode 100644
index 0000000..ea8c434
--- /dev/null
+++ b/ui/src/output.css
@@ -0,0 +1,2270 @@
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+/*
+! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
+*/
+
+html,
+:host {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-feature-settings: normal;
+  /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none;
+}
+
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
+.prose {
+  color: var(--tw-prose-body);
+  max-width: 65ch;
+}
+
+.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
+.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: var(--tw-prose-lead);
+  font-size: 1.25em;
+  line-height: 1.6;
+  margin-top: 1.2em;
+  margin-bottom: 1.2em;
+}
+
+.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: var(--tw-prose-links);
+  text-decoration: underline;
+  font-weight: 500;
+}
+
+.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: var(--tw-prose-bold);
+  font-weight: 600;
+}
+
+.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: inherit;
+}
+
+.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: inherit;
+}
+
+.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: inherit;
+}
+
+.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  list-style-type: decimal;
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  padding-inline-start: 1.625em;
+}
+
+.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  list-style-type: upper-alpha;
+}
+
+.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  list-style-type: lower-alpha;
+}
+
+.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  list-style-type: upper-alpha;
+}
+
+.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  list-style-type: lower-alpha;
+}
+
+.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  list-style-type: upper-roman;
+}
+
+.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  list-style-type: lower-roman;
+}
+
+.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  list-style-type: upper-roman;
+}
+
+.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  list-style-type: lower-roman;
+}
+
+.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  list-style-type: decimal;
+}
+
+.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  list-style-type: disc;
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  padding-inline-start: 1.625em;
+}
+
+.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
+  font-weight: 400;
+  color: var(--tw-prose-counters);
+}
+
+.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
+  color: var(--tw-prose-bullets);
+}
+
+.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  font-weight: 600;
+  margin-top: 1.25em;
+}
+
+.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  border-color: var(--tw-prose-hr);
+  border-top-width: 1px;
+  margin-top: 3em;
+  margin-bottom: 3em;
+}
+
+.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  font-weight: 500;
+  font-style: italic;
+  color: var(--tw-prose-quotes);
+  border-inline-start-width: 0.25rem;
+  border-inline-start-color: var(--tw-prose-quote-borders);
+  quotes: "\201C""\201D""\2018""\2019";
+  margin-top: 1.6em;
+  margin-bottom: 1.6em;
+  padding-inline-start: 1em;
+}
+
+.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
+  content: open-quote;
+}
+
+.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
+  content: close-quote;
+}
+
+.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  font-weight: 800;
+  font-size: 2.25em;
+  margin-top: 0;
+  margin-bottom: 0.8888889em;
+  line-height: 1.1111111;
+}
+
+.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  font-weight: 900;
+  color: inherit;
+}
+
+.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  font-weight: 700;
+  font-size: 1.5em;
+  margin-top: 2em;
+  margin-bottom: 1em;
+  line-height: 1.3333333;
+}
+
+.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  font-weight: 800;
+  color: inherit;
+}
+
+.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  font-weight: 600;
+  font-size: 1.25em;
+  margin-top: 1.6em;
+  margin-bottom: 0.6em;
+  line-height: 1.6;
+}
+
+.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  font-weight: 700;
+  color: inherit;
+}
+
+.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  font-weight: 600;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  line-height: 1.5;
+}
+
+.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  font-weight: 700;
+  color: inherit;
+}
+
+.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  display: block;
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  font-weight: 500;
+  font-family: inherit;
+  color: var(--tw-prose-kbd);
+  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
+  font-size: 0.875em;
+  border-radius: 0.3125rem;
+  padding-top: 0.1875em;
+  padding-inline-end: 0.375em;
+  padding-bottom: 0.1875em;
+  padding-inline-start: 0.375em;
+}
+
+.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: var(--tw-prose-code);
+  font-weight: 600;
+  font-size: 0.875em;
+}
+
+.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
+  content: "`";
+}
+
+.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
+  content: "`";
+}
+
+.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: inherit;
+}
+
+.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: inherit;
+}
+
+.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: inherit;
+  font-size: 0.875em;
+}
+
+.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: inherit;
+  font-size: 0.9em;
+}
+
+.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: inherit;
+}
+
+.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: inherit;
+}
+
+.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: inherit;
+}
+
+.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: var(--tw-prose-pre-code);
+  background-color: var(--tw-prose-pre-bg);
+  overflow-x: auto;
+  font-weight: 400;
+  font-size: 0.875em;
+  line-height: 1.7142857;
+  margin-top: 1.7142857em;
+  margin-bottom: 1.7142857em;
+  border-radius: 0.375rem;
+  padding-top: 0.8571429em;
+  padding-inline-end: 1.1428571em;
+  padding-bottom: 0.8571429em;
+  padding-inline-start: 1.1428571em;
+}
+
+.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  background-color: transparent;
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  font-weight: inherit;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+
+.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
+  content: none;
+}
+
+.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
+  content: none;
+}
+
+.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  width: 100%;
+  table-layout: auto;
+  margin-top: 2em;
+  margin-bottom: 2em;
+  font-size: 0.875em;
+  line-height: 1.7142857;
+}
+
+.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  border-bottom-width: 1px;
+  border-bottom-color: var(--tw-prose-th-borders);
+}
+
+.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  font-weight: 600;
+  vertical-align: bottom;
+  padding-inline-end: 0.5714286em;
+  padding-bottom: 0.5714286em;
+  padding-inline-start: 0.5714286em;
+}
+
+.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  border-bottom-width: 1px;
+  border-bottom-color: var(--tw-prose-td-borders);
+}
+
+.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  border-bottom-width: 0;
+}
+
+.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  vertical-align: baseline;
+}
+
+.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  border-top-width: 1px;
+  border-top-color: var(--tw-prose-th-borders);
+}
+
+.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  vertical-align: top;
+}
+
+.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  text-align: start;
+}
+
+.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: var(--tw-prose-captions);
+  font-size: 0.875em;
+  line-height: 1.4285714;
+  margin-top: 0.8571429em;
+}
+
+.prose {
+  --tw-prose-body: #374151;
+  --tw-prose-headings: #111827;
+  --tw-prose-lead: #4b5563;
+  --tw-prose-links: #111827;
+  --tw-prose-bold: #111827;
+  --tw-prose-counters: #6b7280;
+  --tw-prose-bullets: #d1d5db;
+  --tw-prose-hr: #e5e7eb;
+  --tw-prose-quotes: #111827;
+  --tw-prose-quote-borders: #e5e7eb;
+  --tw-prose-captions: #6b7280;
+  --tw-prose-kbd: #111827;
+  --tw-prose-kbd-shadows: 17 24 39;
+  --tw-prose-code: #111827;
+  --tw-prose-pre-code: #e5e7eb;
+  --tw-prose-pre-bg: #1f2937;
+  --tw-prose-th-borders: #d1d5db;
+  --tw-prose-td-borders: #e5e7eb;
+  --tw-prose-invert-body: #d1d5db;
+  --tw-prose-invert-headings: #fff;
+  --tw-prose-invert-lead: #9ca3af;
+  --tw-prose-invert-links: #fff;
+  --tw-prose-invert-bold: #fff;
+  --tw-prose-invert-counters: #9ca3af;
+  --tw-prose-invert-bullets: #4b5563;
+  --tw-prose-invert-hr: #374151;
+  --tw-prose-invert-quotes: #f3f4f6;
+  --tw-prose-invert-quote-borders: #374151;
+  --tw-prose-invert-captions: #9ca3af;
+  --tw-prose-invert-kbd: #fff;
+  --tw-prose-invert-kbd-shadows: 255 255 255;
+  --tw-prose-invert-code: #fff;
+  --tw-prose-invert-pre-code: #d1d5db;
+  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
+  --tw-prose-invert-th-borders: #4b5563;
+  --tw-prose-invert-td-borders: #374151;
+  font-size: 1rem;
+  line-height: 1.75;
+}
+
+.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  padding-inline-start: 0.375em;
+}
+
+.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  padding-inline-start: 0.375em;
+}
+
+.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 1.25em;
+}
+
+.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-bottom: 1.25em;
+}
+
+.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 1.25em;
+}
+
+.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-bottom: 1.25em;
+}
+
+.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
+.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 0.5em;
+  padding-inline-start: 1.625em;
+}
+
+.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  padding-inline-start: 0;
+}
+
+.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  padding-inline-end: 0;
+}
+
+.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  padding-top: 0.5714286em;
+  padding-inline-end: 0.5714286em;
+  padding-bottom: 0.5714286em;
+  padding-inline-start: 0.5714286em;
+}
+
+.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  padding-inline-start: 0;
+}
+
+.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  padding-inline-end: 0;
+}
+
+.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-bottom: 0;
+}
+
+.prose-neutral {
+  --tw-prose-body: #404040;
+  --tw-prose-headings: #171717;
+  --tw-prose-lead: #525252;
+  --tw-prose-links: #171717;
+  --tw-prose-bold: #171717;
+  --tw-prose-counters: #737373;
+  --tw-prose-bullets: #d4d4d4;
+  --tw-prose-hr: #e5e5e5;
+  --tw-prose-quotes: #171717;
+  --tw-prose-quote-borders: #e5e5e5;
+  --tw-prose-captions: #737373;
+  --tw-prose-kbd: #171717;
+  --tw-prose-kbd-shadows: 23 23 23;
+  --tw-prose-code: #171717;
+  --tw-prose-pre-code: #e5e5e5;
+  --tw-prose-pre-bg: #262626;
+  --tw-prose-th-borders: #d4d4d4;
+  --tw-prose-td-borders: #e5e5e5;
+  --tw-prose-invert-body: #d4d4d4;
+  --tw-prose-invert-headings: #fff;
+  --tw-prose-invert-lead: #a3a3a3;
+  --tw-prose-invert-links: #fff;
+  --tw-prose-invert-bold: #fff;
+  --tw-prose-invert-counters: #a3a3a3;
+  --tw-prose-invert-bullets: #525252;
+  --tw-prose-invert-hr: #404040;
+  --tw-prose-invert-quotes: #f5f5f5;
+  --tw-prose-invert-quote-borders: #404040;
+  --tw-prose-invert-captions: #a3a3a3;
+  --tw-prose-invert-kbd: #fff;
+  --tw-prose-invert-kbd-shadows: 255 255 255;
+  --tw-prose-invert-code: #fff;
+  --tw-prose-invert-pre-code: #d4d4d4;
+  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
+  --tw-prose-invert-th-borders: #525252;
+  --tw-prose-invert-td-borders: #404040;
+}
+
+.visible {
+  visibility: visible;
+}
+
+.collapse {
+  visibility: collapse;
+}
+
+.static {
+  position: static;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.sticky {
+  position: sticky;
+}
+
+.inset-0 {
+  inset: 0px;
+}
+
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
+
+.-bottom-1 {
+  bottom: -0.25rem;
+}
+
+.-right-1 {
+  right: -0.25rem;
+}
+
+.-top-1 {
+  top: -0.25rem;
+}
+
+.-top-10 {
+  top: -2.5rem;
+}
+
+.bottom-0 {
+  bottom: 0px;
+}
+
+.bottom-3 {
+  bottom: 0.75rem;
+}
+
+.bottom-full {
+  bottom: 100%;
+}
+
+.left-0 {
+  left: 0px;
+}
+
+.left-1\/2 {
+  left: 50%;
+}
+
+.left-3 {
+  left: 0.75rem;
+}
+
+.right-0 {
+  right: 0px;
+}
+
+.right-2 {
+  right: 0.5rem;
+}
+
+.right-3 {
+  right: 0.75rem;
+}
+
+.top-0 {
+  top: 0px;
+}
+
+.top-2 {
+  top: 0.5rem;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
+.z-\[9999\] {
+  z-index: 9999;
+}
+
+.\!my-0\.5 {
+  margin-top: 0.125rem !important;
+  margin-bottom: 0.125rem !important;
+}
+
+.\!my-1 {
+  margin-top: 0.25rem !important;
+  margin-bottom: 0.25rem !important;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.ml-3 {
+  margin-left: 0.75rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mt-12 {
+  margin-top: 3rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.block {
+  display: block;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.table {
+  display: table;
+}
+
+.grid {
+  display: grid;
+}
+
+.hidden {
+  display: none;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-14 {
+  height: 3.5rem;
+}
+
+.h-2 {
+  height: 0.5rem;
+}
+
+.h-20 {
+  height: 5rem;
+}
+
+.h-3 {
+  height: 0.75rem;
+}
+
+.h-3\.5 {
+  height: 0.875rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-5 {
+  height: 1.25rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.h-\[4\.5rem\] {
+  height: 4.5rem;
+}
+
+.h-auto {
+  height: auto;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.min-h-\[80px\] {
+  min-height: 80px;
+}
+
+.w-1 {
+  width: 0.25rem;
+}
+
+.w-1\/2 {
+  width: 50%;
+}
+
+.w-14 {
+  width: 3.5rem;
+}
+
+.w-2 {
+  width: 0.5rem;
+}
+
+.w-3 {
+  width: 0.75rem;
+}
+
+.w-3\.5 {
+  width: 0.875rem;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
+.w-5 {
+  width: 1.25rem;
+}
+
+.w-64 {
+  width: 16rem;
+}
+
+.w-8 {
+  width: 2rem;
+}
+
+.w-96 {
+  width: 24rem;
+}
+
+.w-\[100\%\] {
+  width: 100%;
+}
+
+.w-\[500px\] {
+  width: 500px;
+}
+
+.w-\[calc$50\%-0\.25rem$\] {
+  width: calc(50% - 0.25rem);
+}
+
+.w-full {
+  width: 100%;
+}
+
+.max-w-xs {
+  max-width: 20rem;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-full {
+  --tw-translate-y: -100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+
+.animate-bounce {
+  animation: bounce 1s infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+.cursor-ew-resize {
+  cursor: ew-resize;
+}
+
+.cursor-help {
+  cursor: help;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.resize-none {
+  resize: none;
+}
+
+.resize {
+  resize: both;
+}
+
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.space-x-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-visible {
+  overflow: visible;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.scroll-smooth {
+  scroll-behavior: smooth;
+}
+
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
+.break-words {
+  overflow-wrap: break-word;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.border-4 {
+  border-width: 4px;
+}
+
+.border-b {
+  border-bottom-width: 1px;
+}
+
+.border-t {
+  border-top-width: 1px;
+}
+
+.border-solid {
+  border-style: solid;
+}
+
+.border-dashed {
+  border-style: dashed;
+}
+
+.border-\[\#979797\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(151 151 151 / var(--tw-border-opacity, 1));
+}
+
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+}
+
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+}
+
+.border-gray-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
+}
+
+.border-gray-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(17 24 39 / var(--tw-border-opacity, 1));
+}
+
+.border-transparent {
+  border-color: transparent;
+}
+
+.border-t-blue-500 {
+  --tw-border-opacity: 1;
+  border-top-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
+}
+
+.border-t-gray-800 {
+  --tw-border-opacity: 1;
+  border-top-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
+}
+
+.bg-\[\#E5E7ED\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 237 / var(--tw-bg-opacity, 1));
+}
+
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
+}
+
+.bg-blue-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
+}
+
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
+}
+
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
+.bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
+}
+
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+}
+
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
+}
+
+.bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
+}
+
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
+}
+
+.bg-green-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
+}
+
+.bg-green-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
+}
+
+.bg-purple-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
+}
+
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+
+.bg-opacity-25 {
+  --tw-bg-opacity: 0.25;
+}
+
+.bg-opacity-50 {
+  --tw-bg-opacity: 0.5;
+}
+
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.p-0\.5 {
+  padding: 0.125rem;
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-3 {
+  padding: 0.75rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
+.p-8 {
+  padding: 2rem;
+}
+
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.pr-10 {
+  padding-right: 2.5rem;
+}
+
+.pr-12 {
+  padding-right: 3rem;
+}
+
+.pr-3 {
+  padding-right: 0.75rem;
+}
+
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-\[10px\] {
+  font-size: 10px;
+}
+
+.text-\[11px\] {
+  font-size: 11px;
+}
+
+.text-\[12px\] {
+  font-size: 12px;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.leading-relaxed {
+  line-height: 1.625;
+}
+
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+}
+
+.text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
+}
+
+.text-blue-700 {
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
+}
+
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+}
+
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
+}
+
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+
+.text-green-700 {
+  --tw-text-opacity: 1;
+  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
+}
+
+.text-purple-700 {
+  --tw-text-opacity: 1;
+  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+.underline {
+  text-decoration-line: underline;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-200 {
+  transition-duration: 200ms;
+}
+
+.duration-300 {
+  transition-duration: 300ms;
+}
+
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.hover\:border-blue-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
+}
+
+.hover\:bg-blue-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-blue-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-gray-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-gray-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-gray-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-green-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-green-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-purple-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(233 213 255 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:text-blue-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
+}
+
+.hover\:text-gray-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+
+.hover\:text-gray-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+}
+
+.hover\:text-gray-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
+}
+
+.hover\:shadow-md:hover {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.hover\:shadow-sm:hover {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.hover\:shadow-xl:hover {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.focus\:border-transparent:focus {
+  border-color: transparent;
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-blue-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
+}
+
+.active\:scale-95:active {
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.active\:bg-gray-400:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
+}
+
+.disabled\:opacity-50:disabled {
+  opacity: 0.5;
+}
+
+.group:hover .group-hover\:block {
+  display: block;
+}
+
+.group:hover .group-hover\:translate-x-1 {
+  --tw-translate-x: 0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:hover .group-hover\:opacity-100 {
+  opacity: 1;
+}
+
+.prose-headings\:font-semibold :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+  font-weight: 600;
+}
+
+.prose-h1\:text-base :is(:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.prose-h2\:text-sm :is(:where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.prose-h3\:text-xs :is(:where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.prose-h4\:text-xs :is(:where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.prose-p\:text-xs :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.prose-code\:text-xs :is(:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.prose-pre\:text-xs :is(:where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.prose-ol\:text-xs :is(:where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.prose-ul\:text-xs :is(:where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.prose-li\:text-xs :is(:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+@media (min-width: 640px) {
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .dark\:bg-\[\#FFFFFF\] {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  }
+
+  .dark\:text-\[\#000000\] {
+    --tw-text-opacity: 1;
+    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+  }
+}
+
+.\[\&\>\*\]\:\!my-1>* {
+  margin-top: 0.25rem !important;
+  margin-bottom: 0.25rem !important;
+}
diff --git a/ui/src/types/comfy.d.ts b/ui/src/types/comfy.d.ts
new file mode 100644
index 0000000..d2b7995
--- /dev/null
+++ b/ui/src/types/comfy.d.ts
@@ -0,0 +1,94 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import { LGraphNode, IWidget } from "./litegraph";
+import { ComfyApp } from "../../scripts/app";
+
+export interface ComfyExtension {
+  /**
+   * The name of the extension
+   */
+  name: string;
+  /**
+   * Allows any initialisation, e.g. loading resources. Called after the canvas is created but before nodes are added
+   * @param app The ComfyUI app instance
+   */
+  init?(app: ComfyApp): Promise<void>;
+  /**
+   * Allows any additonal setup, called after the application is fully set up and running
+   * @param app The ComfyUI app instance
+   */
+  setup?(app: ComfyApp): Promise<void>;
+  /**
+   * Called before nodes are registered with the graph
+   * @param defs The collection of node definitions, add custom ones or edit existing ones
+   * @param app The ComfyUI app instance
+   */
+  addCustomNodeDefs?(
+    defs: Record<string, ComfyObjectInfo>,
+    app: ComfyApp,
+  ): Promise<void>;
+  /**
+   * Allows the extension to add custom widgets
+   * @param app The ComfyUI app instance
+   * @returns An array of {[widget name]: widget data}
+   */
+  getCustomWidgets?(
+    app: ComfyApp,
+  ): Promise<
+    Record<
+      string,
+      (
+        node,
+        inputName,
+        inputData,
+        app,
+      ) => { widget?: IWidget; minWidth?: number; minHeight?: number }
+    >
+  >;
+  /**
+   * Allows the extension to add additional handling to the node before it is registered with LGraph
+   * @param nodeType The node class (not an instance)
+   * @param nodeData The original node object info config object
+   * @param app The ComfyUI app instance
+   */
+  beforeRegisterNodeDef?(
+    nodeType: typeof LGraphNode,
+    nodeData: ComfyObjectInfo,
+    app: ComfyApp,
+  ): Promise<void>;
+  /**
+   * Allows the extension to register additional nodes with LGraph after standard nodes are added
+   * @param app The ComfyUI app instance
+   */
+  registerCustomNodes?(app: ComfyApp): Promise<void>;
+  /**
+   * Allows the extension to modify a node that has been reloaded onto the graph.
+   * If you break something in the backend and want to patch workflows in the frontend
+   * This is the place to do this
+   * @param node The node that has been loaded
+   * @param app The ComfyUI app instance
+   */
+  loadedGraphNode?(node: LGraphNode, app: ComfyApp);
+  /**
+   * Allows the extension to run code after the constructor of the node
+   * @param node The node that has been created
+   * @param app The ComfyUI app instance
+   */
+  nodeCreated?(node: LGraphNode, app: ComfyApp);
+}
+
+export type ComfyObjectInfo = {
+  name: string;
+  display_name?: string;
+  description?: string;
+  category: string;
+  input?: {
+    required?: Record<string, ComfyObjectInfoConfig>;
+    optional?: Record<string, ComfyObjectInfoConfig>;
+  };
+  output?: string[];
+  output_name: string[];
+};
+
+export type ComfyObjectInfoConfig = [string | any[]] | [string | any[], any];
diff --git a/ui/src/types/dbTypes.ts b/ui/src/types/dbTypes.ts
new file mode 100644
index 0000000..7af046c
--- /dev/null
+++ b/ui/src/types/dbTypes.ts
@@ -0,0 +1,167 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import type { MODEL_TYPE } from "../model-manager/install-models/util/modelTypes";
+import { TopFieldType } from "../gallery/components/MetaBox/MetadataForm.tsx";
+
+export interface SortableItem {
+  name: string;
+  updateTime: number;
+  lastOpenedTime?: number;
+}
+
+export interface Workflow extends SortableItem {
+  id: string;
+  json: string;
+  name: string;
+  coverMediaPath?: string | null;
+  saveLock?: boolean;
+  cloudID?: string | null;
+  createTime: number;
+
+  // will be deprecated
+  privacy?: WorkflowPrivacy;
+  tags?: string[];
+  parentFolderID?: string | null; //TODO remove undefined, use null only
+  cloudOrigin?: string;
+  latestImage?: string;
+  topFieldsConfig?: TopFieldType[];
+}
+
+export interface TableBaseModel {
+  id?: string;
+  name?: string;
+  createTime?: number;
+}
+
+export type Tags = {
+  [name: string]: Tag;
+};
+export type Tag = {
+  name: string;
+  workflowIDs: string[];
+  updateTime: number;
+};
+export type CacheKey = string;
+export type LocalCache = {
+  id: CacheKey;
+  value: string;
+};
+
+export type Model = {
+  id: string;
+  fileName: string;
+  fileFolder: string;
+  fileHash: string | null; // files are not guaranteed to finish hashing
+  modelName: string | null;
+  civitModelID?: string;
+  downloadUrl?: string;
+  civitModelVersionID?: string;
+  imageUrl?: string | null;
+};
+
+export interface ModelManagerPosition {
+  top: number;
+  right: number;
+}
+export type WorkflowVersion = {
+  id: string;
+  name: string;
+  workflowID: string;
+  json: string;
+  createTime?: number;
+  createdAt?: string;
+  created_at?: string;
+  authorID?: string;
+  nodeDefs?: string; //for cloud workflow version
+};
+
+export enum EShortcutKeys {
+  SAVE = "save",
+  SAVE_AS = "saveAs",
+  openSpotlightSearch = "openSpotlightSearch",
+}
+
+export enum EOtherKeys {
+  ArrowUp = "ArrowUp",
+  ArrowDown = "ArrowDown",
+  Enter = "Enter",
+}
+
+export type UserSettings = {
+  id: string;
+  myWorkflowsDir: string;
+  topBarStyle: PanelPosition;
+  shortcuts: Record<EShortcutKeys, string>;
+  autoSave?: boolean;
+  autoSaveDuration?: number; //every X seconds to save
+  twoWaySync?: boolean;
+  foldersOnTop?: boolean;
+  showNsfwModelThumbnail?: boolean;
+  cloudHost: string;
+  defaultFolders: Record<MODEL_TYPE, string>;
+  maximumChangelogNumber: number;
+  hideCoverImage: boolean;
+  disableUnsavedWarning: boolean;
+};
+
+export interface PanelPosition {
+  top: number;
+  left: number;
+}
+
+export interface Folder extends SortableItem {
+  id: string;
+  name: string;
+  parentFolderID: string | null; // if null, it is in the root folder
+  createTime: number;
+  type: "folder";
+  isCollapse?: boolean;
+}
+
+export type Changelog = {
+  id: string;
+  workflowID: string;
+  createTime: number;
+  json: string;
+  isAutoSave?: boolean;
+};
+
+export type Media = {
+  id: string;
+  workflowID: string;
+  workflowJSON?: string;
+  createTime: number;
+  localPath: string;
+};
+
+/**
+ * When deleting a folder, how files in the folder and files in nested folders are handled
+ */
+export enum EFlowOperationType {
+  /**
+   * Move to root directory
+   */
+  MOVE_TO_ROOT_FOLDER = "moveToRootFolder",
+  /**
+   * Delete
+   */
+  DELETE = "delete",
+}
+
+export type WorkflowPrivacy = "PUBLIC" | "PRIVATE" | "UNLISTED";
+
+export enum EWorkflowPrivacy {
+  PRIVATE = "PRIVATE",
+  PUBLIC = "PUBLIC",
+  UNLISTED = "UNLISTED",
+}
+
+export const WORKSPACE_INDEXDB_NAME = "comfyui_workspace_db";
+
+export type RecentlyOpenedFile = {
+  id: string;
+  name: string;
+  type: "workflow" | "model";
+  updateTime: number;
+};
diff --git a/ui/src/types/litegraph.d.ts b/ui/src/types/litegraph.d.ts
new file mode 100644
index 0000000..5415cdc
--- /dev/null
+++ b/ui/src/types/litegraph.d.ts
@@ -0,0 +1,1509 @@
+// Type definitions for litegraph.js 0.7.0
+// Project: litegraph.js
+// Definitions by: NateScarlet <https://github.com/NateScarlet>
+
+export type Vector2 = [number, number];
+export type Vector4 = [number, number, number, number];
+export type widgetTypes =
+  | "number"
+  | "slider"
+  | "combo"
+  | "text"
+  | "toggle"
+  | "button";
+export type SlotShape =
+  | typeof LiteGraph.BOX_SHAPE
+  | typeof LiteGraph.CIRCLE_SHAPE
+  | typeof LiteGraph.ARROW_SHAPE
+  | typeof LiteGraph.SQUARE_SHAPE
+  | number; // For custom shapes
+
+/** https://github.com/jagenjo/litegraph.js/tree/master/guides#node-slots */
+export interface INodeSlot {
+  name: string;
+  type: string | -1;
+  label?: string;
+  dir?:
+    | typeof LiteGraph.UP
+    | typeof LiteGraph.RIGHT
+    | typeof LiteGraph.DOWN
+    | typeof LiteGraph.LEFT;
+  color_on?: string;
+  color_off?: string;
+  shape?: SlotShape;
+  locked?: boolean;
+  nameLocked?: boolean;
+}
+
+export interface INodeInputSlot extends INodeSlot {
+  link: LLink["id"] | null;
+}
+export interface INodeOutputSlot extends INodeSlot {
+  links: LLink["id"][] | null;
+}
+
+export type WidgetCallback<T extends IWidget = IWidget> = (
+  this: T,
+  value: T["value"],
+  graphCanvas: LGraphCanvas,
+  node: LGraphNode,
+  pos: Vector2,
+  event?: MouseEvent,
+) => void;
+
+export interface IWidget<TValue = any, TOptions = any> {
+  name: string | null;
+  value: TValue;
+  options?: TOptions;
+  type?: widgetTypes;
+  y?: number;
+  property?: string;
+  last_y?: number;
+  clicked?: boolean;
+  marker?: boolean;
+  callback?: WidgetCallback<this>;
+  /** Called by `LGraphCanvas.drawNodeWidgets` */
+  draw?(
+    ctx: CanvasRenderingContext2D,
+    node: LGraphNode,
+    width: number,
+    posY: number,
+    height: number,
+  ): void;
+  /**
+   * Called by `LGraphCanvas.processNodeWidgets`
+   * https://github.com/jagenjo/litegraph.js/issues/76
+   */
+  mouse?(event: MouseEvent, pos: Vector2, node: LGraphNode): boolean;
+  /** Called by `LGraphNode.computeSize` */
+  computeSize?(width: number): [number, number];
+}
+export interface IButtonWidget extends IWidget<null, {}> {
+  type: "button";
+}
+export interface IToggleWidget
+  extends IWidget<boolean, { on?: string; off?: string }> {
+  type: "toggle";
+}
+export interface ISliderWidget
+  extends IWidget<number, { max: number; min: number }> {
+  type: "slider";
+}
+export interface INumberWidget extends IWidget<number, { precision: number }> {
+  type: "number";
+}
+export interface IComboWidget
+  extends IWidget<
+    string[],
+    {
+      values: string[] | ((widget: IComboWidget, node: LGraphNode) => string[]);
+    }
+  > {
+  type: "combo";
+}
+
+export interface ITextWidget extends IWidget<string, {}> {
+  type: "text";
+}
+
+export interface IContextMenuItem {
+  content: string;
+  callback?: ContextMenuEventListener;
+  /** Used as innerHTML for extra child element */
+  title?: string;
+  disabled?: boolean;
+  has_submenu?: boolean;
+  submenu?: {
+    options: ContextMenuItem[];
+  } & IContextMenuOptions;
+  className?: string;
+}
+export interface IContextMenuOptions {
+  callback?: ContextMenuEventListener;
+  ignore_item_callbacks?: boolean;
+  event?: MouseEvent | CustomEvent;
+  parentMenu?: ContextMenu;
+  autoopen?: boolean;
+  title?: string;
+  extra?: any;
+}
+
+export type ContextMenuItem = IContextMenuItem | null;
+export type ContextMenuEventListener = (
+  value: ContextMenuItem,
+  options: IContextMenuOptions,
+  event: MouseEvent,
+  parentMenu: ContextMenu | undefined,
+  node: LGraphNode,
+) => boolean | void;
+
+declare global {
+  const LiteGraph: {
+    VERSION: number;
+
+    CANVAS_GRID_SIZE: number;
+
+    NODE_TITLE_HEIGHT: number;
+    NODE_TITLE_TEXT_Y: number;
+    NODE_SLOT_HEIGHT: number;
+    NODE_WIDGET_HEIGHT: number;
+    NODE_WIDTH: number;
+    NODE_MIN_WIDTH: number;
+    NODE_COLLAPSED_RADIUS: number;
+    NODE_COLLAPSED_WIDTH: number;
+    NODE_TITLE_COLOR: string;
+    NODE_TEXT_SIZE: number;
+    NODE_TEXT_COLOR: string;
+    NODE_SUBTEXT_SIZE: number;
+    NODE_DEFAULT_COLOR: string;
+    NODE_DEFAULT_BGCOLOR: string;
+    NODE_DEFAULT_BOXCOLOR: string;
+    NODE_DEFAULT_SHAPE: string;
+    DEFAULT_SHADOW_COLOR: string;
+    DEFAULT_GROUP_FONT: number;
+
+    LINK_COLOR: string;
+    EVENT_LINK_COLOR: string;
+    CONNECTING_LINK_COLOR: string;
+
+    MAX_NUMBER_OF_NODES: number; //avoid infinite loops
+    DEFAULT_POSITION: Vector2; //default node position
+    VALID_SHAPES: ["default", "box", "round", "card"]; //,"circle"
+
+    //shapes are used for nodes but also for slots
+    BOX_SHAPE: 1;
+    ROUND_SHAPE: 2;
+    CIRCLE_SHAPE: 3;
+    CARD_SHAPE: 4;
+    ARROW_SHAPE: 5;
+    SQUARE_SHAPE: 6;
+
+    //enums
+    INPUT: 1;
+    OUTPUT: 2;
+
+    EVENT: -1; //for outputs
+    ACTION: -1; //for inputs
+
+    ALWAYS: 0;
+    ON_EVENT: 1;
+    NEVER: 2;
+    ON_TRIGGER: 3;
+
+    UP: 1;
+    DOWN: 2;
+    LEFT: 3;
+    RIGHT: 4;
+    CENTER: 5;
+
+    STRAIGHT_LINK: 0;
+    LINEAR_LINK: 1;
+    SPLINE_LINK: 2;
+
+    NORMAL_TITLE: 0;
+    NO_TITLE: 1;
+    TRANSPARENT_TITLE: 2;
+    AUTOHIDE_TITLE: 3;
+
+    node_images_path: string;
+
+    debug: boolean;
+    catch_exceptions: boolean;
+    throw_errors: boolean;
+    /** if set to true some nodes like Formula would be allowed to evaluate code that comes from unsafe sources (like node configuration), which could lead to exploits */
+    allow_scripts: boolean;
+    /** node types by string */
+    registered_node_types: Record<string, LGraphNodeConstructor>;
+    /** used for dropping files in the canvas */
+    node_types_by_file_extension: Record<string, LGraphNodeConstructor>;
+    /** node types by class name */
+    Nodes: Record<string, LGraphNodeConstructor>;
+
+    /** used to add extra features to the search box */
+    searchbox_extras: Record<
+      string,
+      {
+        data: { outputs: string[][]; title: string };
+        desc: string;
+        type: string;
+      }
+    >;
+
+    createNode<T extends LGraphNode = LGraphNode>(type: string): T;
+    /** Register a node class so it can be listed when the user wants to create a new one */
+    registerNodeType(type: string, base: { new (): LGraphNode }): void;
+    /** removes a node type from the system */
+    unregisterNodeType(type: string): void;
+    /** Removes all previously registered node's types. */
+    clearRegisteredTypes(): void;
+    /**
+     * Create a new node type by passing a function, it wraps it with a proper class and generates inputs according to the parameters of the function.
+     * Useful to wrap simple methods that do not require properties, and that only process some input to generate an output.
+     * @param name node name with namespace (p.e.: 'math/sum')
+     * @param func
+     * @param param_types an array containing the type of every parameter, otherwise parameters will accept any type
+     * @param return_type string with the return type, otherwise it will be generic
+     * @param properties properties to be configurable
+     */
+    wrapFunctionAsNode(
+      name: string,
+      func: (...args: any[]) => any,
+      param_types?: string[],
+      return_type?: string,
+      properties?: object,
+    ): void;
+
+    /**
+     * Adds this method to all node types, existing and to be created
+     * (You can add it to LGraphNode.prototype but then existing node types wont have it)
+     */
+    addNodeMethod(name: string, func: (...args: any[]) => any): void;
+
+    /**
+     * Create a node of a given type with a name. The node is not attached to any graph yet.
+     * @param type full name of the node class. p.e. "math/sin"
+     * @param name a name to distinguish from other nodes
+     * @param options to set options
+     */
+    createNode<T extends LGraphNode>(
+      type: string,
+      title: string,
+      options: object,
+    ): T;
+
+    /**
+     * Returns a registered node type with a given name
+     * @param type full name of the node class. p.e. "math/sin"
+     */
+    getNodeType<T extends LGraphNode>(type: string): LGraphNodeConstructor<T>;
+
+    /**
+     * Returns a list of node types matching one category
+     * @method getNodeTypesInCategory
+     * @param {String} category category name
+     * @param {String} filter only nodes with ctor.filter equal can be shown
+     * @return {Array} array with all the node classes
+     */
+    getNodeTypesInCategory(
+      category: string,
+      filter: string,
+    ): LGraphNodeConstructor[];
+
+    /**
+     * Returns a list with all the node type categories
+     * @method getNodeTypesCategories
+     * @param {String} filter only nodes with ctor.filter equal can be shown
+     * @return {Array} array with all the names of the categories
+     */
+    getNodeTypesCategories(filter: string): string[];
+
+    /** debug purposes: reloads all the js scripts that matches a wildcard */
+    reloadNodes(folder_wildcard: string): void;
+
+    getTime(): number;
+    LLink: typeof LLink;
+    LGraph: typeof LGraph;
+    DragAndScale: typeof DragAndScale;
+    compareObjects(a: object, b: object): boolean;
+    distance(a: Vector2, b: Vector2): number;
+    colorToString(c: string): string;
+    isInsideRectangle(
+      x: number,
+      y: number,
+      left: number,
+      top: number,
+      width: number,
+      height: number,
+    ): boolean;
+    growBounding(bounding: Vector4, x: number, y: number): Vector4;
+    isInsideBounding(p: Vector2, bb: Vector4): boolean;
+    hex2num(hex: string): [number, number, number];
+    num2hex(triplet: [number, number, number]): string;
+    ContextMenu: typeof ContextMenu;
+    extendClass<A, B>(target: A, origin: B): A & B;
+    getParameterNames(func: string): string[];
+  };
+}
+
+export default LiteGraph;
+
+export type serializedLGraph<
+  TNode = ReturnType<LGraphNode["serialize"]>,
+  // https://github.com/jagenjo/litegraph.js/issues/74
+  TLink = [number, number, number, number, number, string],
+  TGroup = ReturnType<LGraphGroup["serialize"]>,
+> = {
+  last_node_id: LGraph["last_node_id"];
+  last_link_id: LGraph["last_link_id"];
+  nodes: TNode[];
+  links: TLink[];
+  groups: TGroup[];
+  config: LGraph["config"];
+  version: typeof LiteGraph.VERSION;
+};
+
+export declare class LGraph {
+  static supported_types: string[];
+  static STATUS_STOPPED: 1;
+  static STATUS_RUNNING: 2;
+
+  constructor(o?: object);
+
+  filter: string;
+  catch_errors: boolean;
+  /** custom data */
+  config: object;
+  elapsed_time: number;
+  fixedtime: number;
+  fixedtime_lapse: number;
+  globaltime: number;
+  inputs: any;
+  iteration: number;
+  last_link_id: number;
+  last_node_id: number;
+  last_update_time: number;
+  links: Record<number, LLink>;
+  list_of_graphcanvas: LGraphCanvas[];
+  outputs: any;
+  runningtime: number;
+  starttime: number;
+  status: typeof LGraph.STATUS_RUNNING | typeof LGraph.STATUS_STOPPED;
+
+  private _nodes: LGraphNode[];
+  private _groups: LGraphGroup[];
+  private _nodes_by_id: Record<number, LGraphNode>;
+  /** nodes that are executable sorted in execution order */
+  private _nodes_executable:
+    | (LGraphNode & { onExecute: NonNullable<LGraphNode["onExecute"]> }[])
+    | null;
+  /** nodes that contain onExecute */
+  private _nodes_in_order: LGraphNode[];
+  private _version: number;
+
+  getSupportedTypes(): string[];
+  /** Removes all nodes from this graph */
+  clear(): void;
+  /** Attach Canvas to this graph */
+  attachCanvas(graphCanvas: LGraphCanvas): void;
+  /** Detach Canvas to this graph */
+  detachCanvas(graphCanvas: LGraphCanvas): void;
+  /**
+   * Starts running this graph every interval milliseconds.
+   * @param interval amount of milliseconds between executions, if 0 then it renders to the monitor refresh rate
+   */
+  start(interval?: number): void;
+  /** Stops the execution loop of the graph */
+  stop(): void;
+  /**
+   * Run N steps (cycles) of the graph
+   * @param num number of steps to run, default is 1
+   */
+  runStep(num?: number, do_not_catch_errors?: boolean): void;
+  /**
+   * Updates the graph execution order according to relevance of the nodes (nodes with only outputs have more relevance than
+   * nodes with only inputs.
+   */
+  updateExecutionOrder(): void;
+  /** This is more internal, it computes the executable nodes in order and returns it */
+  computeExecutionOrder<T = any>(only_onExecute: boolean, set_level: any): T;
+  /**
+   * Returns all the nodes that could affect this one (ancestors) by crawling all the inputs recursively.
+   * It doesn't include the node itself
+   * @return an array with all the LGraphNodes that affect this node, in order of execution
+   */
+  getAncestors(node: LGraphNode): LGraphNode[];
+  /**
+   * Positions every node in a more readable manner
+   */
+  arrange(margin?: number, layout?: string): void;
+  /**
+   * Returns the amount of time the graph has been running in milliseconds
+   * @return number of milliseconds the graph has been running
+   */
+  getTime(): number;
+
+  /**
+   * Returns the amount of time accumulated using the fixedtime_lapse var. This is used in context where the time increments should be constant
+   * @return number of milliseconds the graph has been running
+   */
+  getFixedTime(): number;
+
+  /**
+   * Returns the amount of time it took to compute the latest iteration. Take into account that this number could be not correct
+   * if the nodes are using graphical actions
+   * @return number of milliseconds it took the last cycle
+   */
+  getElapsedTime(): number;
+  /**
+   * Sends an event to all the nodes, useful to trigger stuff
+   * @param eventName the name of the event (function to be called)
+   * @param params parameters in array format
+   */
+  sendEventToAllNodes(eventName: string, params: any[], mode?: any): void;
+
+  sendActionToCanvas(action: any, params: any[]): void;
+  /**
+   * Adds a new node instance to this graph
+   * @param node the instance of the node
+   */
+  add(node: LGraphNode, skip_compute_order?: boolean): void;
+  /**
+   * Called when a new node is added
+   * @param node the instance of the node
+   */
+  onNodeAdded(node: LGraphNode): void;
+  /** Removes a node from the graph */
+  remove(node: LGraphNode): void;
+  /** Returns a node by its id. */
+  getNodeById(id: number): LGraphNode | undefined;
+  /**
+   * Returns a list of nodes that matches a class
+   * @param classObject the class itself (not an string)
+   * @return a list with all the nodes of this type
+   */
+  findNodesByClass<T extends LGraphNode>(
+    classObject: LGraphNodeConstructor<T>,
+  ): T[];
+  /**
+   * Returns a list of nodes that matches a type
+   * @param type the name of the node type
+   * @return a list with all the nodes of this type
+   */
+  findNodesByType<T extends LGraphNode = LGraphNode>(type: string): T[];
+  /**
+   * Returns the first node that matches a name in its title
+   * @param title the name of the node to search
+   * @return the node or null
+   */
+  findNodeByTitle<T extends LGraphNode = LGraphNode>(title: string): T | null;
+  /**
+   * Returns a list of nodes that matches a name
+   * @param title the name of the node to search
+   * @return a list with all the nodes with this name
+   */
+  findNodesByTitle<T extends LGraphNode = LGraphNode>(title: string): T[];
+  /**
+   * Returns the top-most node in this position of the canvas
+   * @param x the x coordinate in canvas space
+   * @param y the y coordinate in canvas space
+   * @param nodes_list a list with all the nodes to search from, by default is all the nodes in the graph
+   * @return the node at this position or null
+   */
+  getNodeOnPos<T extends LGraphNode = LGraphNode>(
+    x: number,
+    y: number,
+    node_list?: LGraphNode[],
+    margin?: number,
+  ): T | null;
+  /**
+   * Returns the top-most group in that position
+   * @param x the x coordinate in canvas space
+   * @param y the y coordinate in canvas space
+   * @return the group or null
+   */
+  getGroupOnPos(x: number, y: number): LGraphGroup | null;
+
+  onAction(action: any, param: any): void;
+  trigger(action: any, param: any): void;
+  /** Tell this graph it has a global graph input of this type */
+  addInput(name: string, type: string, value?: any): void;
+  /** Assign a data to the global graph input */
+  setInputData(name: string, data: any): void;
+  /** Returns the current value of a global graph input */
+  getInputData<T = any>(name: string): T;
+  /** Changes the name of a global graph input */
+  renameInput(old_name: string, name: string): false | undefined;
+  /** Changes the type of a global graph input */
+  changeInputType(name: string, type: string): false | undefined;
+  /** Removes a global graph input */
+  removeInput(name: string): boolean;
+  /** Creates a global graph output */
+  addOutput(name: string, type: string, value: any): void;
+  /** Assign a data to the global output */
+  setOutputData(name: string, value: string): void;
+  /** Returns the current value of a global graph output */
+  getOutputData<T = any>(name: string): T;
+
+  /** Renames a global graph output */
+  renameOutput(old_name: string, name: string): false | undefined;
+  /** Changes the type of a global graph output */
+  changeOutputType(name: string, type: string): false | undefined;
+  /** Removes a global graph output */
+  removeOutput(name: string): boolean;
+  triggerInput(name: string, value: any): void;
+  setCallback(name: string, func: (...args: any[]) => any): void;
+  beforeChange(info?: LGraphNode): void;
+  afterChange(info?: LGraphNode): void;
+  connectionChange(node: LGraphNode): void;
+  /** returns if the graph is in live mode */
+  isLive(): boolean;
+  /** clears the triggered slot animation in all links (stop visual animation) */
+  clearTriggeredSlots(): void;
+  /* Called when something visually changed (not the graph!) */
+  change(): void;
+  setDirtyCanvas(fg: boolean, bg: boolean): void;
+  /** Destroys a link */
+  removeLink(link_id: number): void;
+  /** Creates a Object containing all the info about this graph, it can be serialized */
+  serialize<T extends serializedLGraph>(): T;
+  /**
+   * Configure a graph from a JSON string
+   * @param data configure a graph from a JSON string
+   * @returns if there was any error parsing
+   */
+  configure(data: object, keep_old?: boolean): boolean | undefined;
+  load(url: string): void;
+}
+
+export type SerializedLLink = [number, string, number, number, number, number];
+export declare class LLink {
+  id: number;
+  type: string;
+  origin_id: number;
+  origin_slot: number;
+  target_id: number;
+  target_slot: number;
+  constructor(
+    id: number,
+    type: string,
+    origin_id: number,
+    origin_slot: number,
+    target_id: number,
+    target_slot: number,
+  );
+  configure(o: LLink | SerializedLLink): void;
+  serialize(): SerializedLLink;
+}
+
+export type SerializedLGraphNode<T extends LGraphNode = LGraphNode> = {
+  id: T["id"];
+  type: T["type"];
+  pos: T["pos"];
+  size: T["size"];
+  flags: T["flags"];
+  mode: T["mode"];
+  inputs: T["inputs"];
+  outputs: T["outputs"];
+  title: T["title"];
+  properties: T["properties"];
+  widgets_values?: IWidget["value"][];
+};
+
+/** https://github.com/jagenjo/litegraph.js/blob/master/guides/README.md#lgraphnode */
+export declare class LGraphNode {
+  static title_color: string;
+  static title: string;
+  static type: null | string;
+  static widgets_up: boolean;
+  constructor(title?: string);
+
+  title: string;
+  type: null | string;
+  size: Vector2;
+  graph: null | LGraph;
+  graph_version: number;
+  pos: Vector2;
+  is_selected: boolean;
+  mouseOver: boolean;
+
+  id: number;
+
+  //inputs available: array of inputs
+  inputs: INodeInputSlot[];
+  outputs: INodeOutputSlot[];
+  connections: any[];
+
+  //local data
+  properties: Record<string, any>;
+  properties_info: any[];
+
+  flags: Partial<{
+    collapsed: boolean;
+  }>;
+
+  color: string;
+  bgcolor: string;
+  boxcolor: string;
+  shape:
+    | typeof LiteGraph.BOX_SHAPE
+    | typeof LiteGraph.ROUND_SHAPE
+    | typeof LiteGraph.CIRCLE_SHAPE
+    | typeof LiteGraph.CARD_SHAPE
+    | typeof LiteGraph.ARROW_SHAPE;
+
+  serialize_widgets: boolean;
+  skip_list: boolean;
+
+  /** Used in `LGraphCanvas.onMenuNodeMode` */
+  mode?:
+    | typeof LiteGraph.ON_EVENT
+    | typeof LiteGraph.ON_TRIGGER
+    | typeof LiteGraph.NEVER
+    | typeof LiteGraph.ALWAYS;
+
+  /** If set to true widgets do not start after the slots */
+  widgets_up: boolean;
+  /** widgets start at y distance from the top of the node */
+  widgets_start_y: number;
+  /** if you render outside the node, it will be clipped */
+  clip_area: boolean;
+  /** if set to false it wont be resizable with the mouse */
+  resizable: boolean;
+  /** slots are distributed horizontally */
+  horizontal: boolean;
+  /** if true, the node will show the bgcolor as 'red'  */
+  has_errors?: boolean;
+
+  /** configure a node from an object containing the serialized info */
+  configure(info: SerializedLGraphNode): void;
+  /** serialize the content */
+  serialize(): SerializedLGraphNode;
+  /** Creates a clone of this node  */
+  clone(): this;
+  /** serialize and stringify */
+  toString(): string;
+  /** get the title string */
+  getTitle(): string;
+  /** sets the value of a property */
+  setProperty(name: string, value: any): void;
+  /** sets the output data */
+  setOutputData(slot: number, data: any): void;
+  /** sets the output data */
+  setOutputDataType(slot: number, type: string): void;
+  /**
+   * Retrieves the input data (data traveling through the connection) from one slot
+   * @param slot
+   * @param force_update if set to true it will force the connected node of this slot to output data into this link
+   * @return data or if it is not connected returns undefined
+   */
+  getInputData<T = any>(slot: number, force_update?: boolean): T;
+  /**
+   * Retrieves the input data type (in case this supports multiple input types)
+   * @param slot
+   * @return datatype in string format
+   */
+  getInputDataType(slot: number): string;
+  /**
+   * Retrieves the input data from one slot using its name instead of slot number
+   * @param slot_name
+   * @param force_update if set to true it will force the connected node of this slot to output data into this link
+   * @return data or if it is not connected returns null
+   */
+  getInputDataByName<T = any>(slot_name: string, force_update?: boolean): T;
+  /** tells you if there is a connection in one input slot */
+  isInputConnected(slot: number): boolean;
+  /** tells you info about an input connection (which node, type, etc) */
+  getInputInfo(
+    slot: number,
+  ): { link: number; name: string; type: string | 0 } | null;
+  /** returns the node connected in the input slot */
+  getInputNode(slot: number): LGraphNode | null;
+  /** returns the value of an input with this name, otherwise checks if there is a property with that name */
+  getInputOrProperty<T = any>(name: string): T;
+  /** tells you the last output data that went in that slot */
+  getOutputData<T = any>(slot: number): T | null;
+  /** tells you info about an output connection (which node, type, etc) */
+  getOutputInfo(
+    slot: number,
+  ): { name: string; type: string; links: number[] } | null;
+  /** tells you if there is a connection in one output slot */
+  isOutputConnected(slot: number): boolean;
+  /** tells you if there is any connection in the output slots */
+  isAnyOutputConnected(): boolean;
+  /** retrieves all the nodes connected to this output slot */
+  getOutputNodes(slot: number): LGraphNode[];
+  /**  Triggers an event in this node, this will trigger any output with the same name */
+  trigger(action: string, param: any): void;
+  /**
+   * Triggers an slot event in this node
+   * @param slot the index of the output slot
+   * @param param
+   * @param link_id in case you want to trigger and specific output link in a slot
+   */
+  triggerSlot(slot: number, param: any, link_id?: number): void;
+  /**
+   * clears the trigger slot animation
+   * @param slot the index of the output slot
+   * @param link_id in case you want to trigger and specific output link in a slot
+   */
+  clearTriggeredSlot(slot: number, link_id?: number): void;
+  /**
+   * add a new property to this node
+   * @param name
+   * @param default_value
+   * @param type string defining the output type ("vec3","number",...)
+   * @param extra_info this can be used to have special properties of the property (like values, etc)
+   */
+  addProperty<T = any>(
+    name: string,
+    default_value: any,
+    type: string,
+    extra_info?: object,
+  ): T;
+  /**
+   * add a new output slot to use in this node
+   * @param name
+   * @param type string defining the output type ("vec3","number",...)
+   * @param extra_info this can be used to have special properties of an output (label, special color, position, etc)
+   */
+  addOutput(
+    name: string,
+    type: string | -1,
+    extra_info?: Partial<INodeOutputSlot>,
+  ): INodeOutputSlot;
+  /**
+   * add a new output slot to use in this node
+   * @param array of triplets like [[name,type,extra_info],[...]]
+   */
+  addOutputs(
+    array: [string, string | -1, Partial<INodeOutputSlot> | undefined][],
+  ): void;
+  /** remove an existing output slot */
+  removeOutput(slot: number): void;
+  /**
+   * add a new input slot to use in this node
+   * @param name
+   * @param type string defining the input type ("vec3","number",...), it its a generic one use 0
+   * @param extra_info this can be used to have special properties of an input (label, color, position, etc)
+   */
+  addInput(
+    name: string,
+    type: string | -1,
+    extra_info?: Partial<INodeInputSlot>,
+  ): INodeInputSlot;
+  /**
+   * add several new input slots in this node
+   * @param array of triplets like [[name,type,extra_info],[...]]
+   */
+  addInputs(
+    array: [string, string | -1, Partial<INodeInputSlot> | undefined][],
+  ): void;
+  /** remove an existing input slot */
+  removeInput(slot: number): void;
+  /**
+   * add an special connection to this node (used for special kinds of graphs)
+   * @param name
+   * @param type string defining the input type ("vec3","number",...)
+   * @param pos position of the connection inside the node
+   * @param direction if is input or output
+   */
+  addConnection(
+    name: string,
+    type: string,
+    pos: Vector2,
+    direction: string,
+  ): {
+    name: string;
+    type: string;
+    pos: Vector2;
+    direction: string;
+    links: null;
+  };
+  setValue(v: any): void;
+  /** computes the size of a node according to its inputs and output slots */
+  computeSize(): [number, number];
+  /**
+   * https://github.com/jagenjo/litegraph.js/blob/master/guides/README.md#node-widgets
+   * @return created widget
+   */
+  addWidget<T extends IWidget>(
+    type: T["type"],
+    name: string,
+    value: T["value"],
+    callback?: WidgetCallback<T> | string,
+    options?: T["options"],
+  ): T;
+
+  addCustomWidget<T extends IWidget>(customWidget: T): T;
+
+  /**
+   * returns the bounding of the object, used for rendering purposes
+   * @return [x, y, width, height]
+   */
+  getBounding(): Vector4;
+  /** checks if a point is inside the shape of a node */
+  isPointInside(
+    x: number,
+    y: number,
+    margin?: number,
+    skipTitle?: boolean,
+  ): boolean;
+  /** checks if a point is inside a node slot, and returns info about which slot */
+  getSlotInPosition(
+    x: number,
+    y: number,
+  ): {
+    input?: INodeInputSlot;
+    output?: INodeOutputSlot;
+    slot: number;
+    link_pos: Vector2;
+  };
+  /**
+   * returns the input slot with a given name (used for dynamic slots), -1 if not found
+   * @param name the name of the slot
+   * @return the slot (-1 if not found)
+   */
+  findInputSlot(name: string): number;
+  /**
+   * returns the output slot with a given name (used for dynamic slots), -1 if not found
+   * @param name the name of the slot
+   * @return  the slot (-1 if not found)
+   */
+  findOutputSlot(name: string): number;
+  /**
+   * connect this node output to the input of another node
+   * @param slot (could be the number of the slot or the string with the name of the slot)
+   * @param  targetNode the target node
+   * @param  targetSlot the input slot of the target node (could be the number of the slot or the string with the name of the slot, or -1 to connect a trigger)
+   * @return {Object} the link_info is created, otherwise null
+   */
+  connect<T = any>(
+    slot: number | string,
+    targetNode: LGraphNode,
+    targetSlot: number | string,
+  ): T | null;
+  /**
+   * disconnect one output to an specific node
+   * @param slot (could be the number of the slot or the string with the name of the slot)
+   * @param target_node the target node to which this slot is connected [Optional, if not target_node is specified all nodes will be disconnected]
+   * @return if it was disconnected successfully
+   */
+  disconnectOutput(slot: number | string, targetNode?: LGraphNode): boolean;
+  /**
+   * disconnect one input
+   * @param slot (could be the number of the slot or the string with the name of the slot)
+   * @return if it was disconnected successfully
+   */
+  disconnectInput(slot: number | string): boolean;
+  /**
+   * returns the center of a connection point in canvas coords
+   * @param is_input true if if a input slot, false if it is an output
+   * @param slot (could be the number of the slot or the string with the name of the slot)
+   * @param out a place to store the output, to free garbage
+   * @return the position
+   **/
+  getConnectionPos(
+    is_input: boolean,
+    slot: number | string,
+    out?: Vector2,
+  ): Vector2;
+  /** Force align to grid */
+  alignToGrid(): void;
+  /** Console output */
+  trace(msg: string): void;
+  /** Forces to redraw or the main canvas (LGraphNode) or the bg canvas (links) */
+  setDirtyCanvas(fg: boolean, bg: boolean): void;
+  loadImage(url: string): void;
+  /** Allows to get onMouseMove and onMouseUp events even if the mouse is out of focus */
+  captureInput(v: any): void;
+  /** Collapse the node to make it smaller on the canvas */
+  collapse(force: boolean): void;
+  /** Forces the node to do not move or realign on Z */
+  pin(v?: boolean): void;
+  localToScreen(x: number, y: number, graphCanvas: LGraphCanvas): Vector2;
+
+  // https://github.com/jagenjo/litegraph.js/blob/master/guides/README.md#custom-node-appearance
+  onDrawBackground?(
+    ctx: CanvasRenderingContext2D,
+    canvas: HTMLCanvasElement,
+  ): void;
+  onDrawForeground?(
+    ctx: CanvasRenderingContext2D,
+    canvas: HTMLCanvasElement,
+  ): void;
+
+  // https://github.com/jagenjo/litegraph.js/blob/master/guides/README.md#custom-node-behaviour
+  onMouseDown?(
+    event: MouseEvent,
+    pos: Vector2,
+    graphCanvas: LGraphCanvas,
+  ): void;
+  onMouseMove?(
+    event: MouseEvent,
+    pos: Vector2,
+    graphCanvas: LGraphCanvas,
+  ): void;
+  onMouseUp?(event: MouseEvent, pos: Vector2, graphCanvas: LGraphCanvas): void;
+  onMouseEnter?(
+    event: MouseEvent,
+    pos: Vector2,
+    graphCanvas: LGraphCanvas,
+  ): void;
+  onMouseLeave?(
+    event: MouseEvent,
+    pos: Vector2,
+    graphCanvas: LGraphCanvas,
+  ): void;
+  onKey?(event: KeyboardEvent, pos: Vector2, graphCanvas: LGraphCanvas): void;
+
+  /** Called by `LGraphCanvas.selectNodes` */
+  onSelected?(): void;
+  /** Called by `LGraphCanvas.deselectNode` */
+  onDeselected?(): void;
+  /** Called by `LGraph.runStep` `LGraphNode.getInputData` */
+  onExecute?(): void;
+  /** Called by `LGraph.serialize` */
+  onSerialize?(o: SerializedLGraphNode): void;
+  /** Called by `LGraph.configure` */
+  onConfigure?(o: SerializedLGraphNode): void;
+  /**
+   * when added to graph (warning: this is called BEFORE the node is configured when loading)
+   * Called by `LGraph.add`
+   */
+  onAdded?(graph: LGraph): void;
+  /**
+   * when removed from graph
+   * Called by `LGraph.remove` `LGraph.clear`
+   */
+  onRemoved?(): void;
+  /**
+   * if returns false the incoming connection will be canceled
+   * Called by `LGraph.connect`
+   * @param inputIndex target input slot number
+   * @param outputType type of output slot
+   * @param outputSlot output slot object
+   * @param outputNode node containing the output
+   * @param outputIndex index of output slot
+   */
+  onConnectInput?(
+    inputIndex: number,
+    outputType: INodeOutputSlot["type"],
+    outputSlot: INodeOutputSlot,
+    outputNode: LGraphNode,
+    outputIndex: number,
+  ): boolean;
+  /**
+   * if returns false the incoming connection will be canceled
+   * Called by `LGraph.connect`
+   * @param outputIndex target output slot number
+   * @param inputType type of input slot
+   * @param inputSlot input slot object
+   * @param inputNode node containing the input
+   * @param inputIndex index of input slot
+   */
+  onConnectOutput?(
+    outputIndex: number,
+    inputType: INodeInputSlot["type"],
+    inputSlot: INodeInputSlot,
+    inputNode: LGraphNode,
+    inputIndex: number,
+  ): boolean;
+
+  /**
+   * Called just before connection (or disconnect - if input is linked).
+   * A convenient place to switch to another input, or create new one.
+   * This allow for ability to automatically add slots if needed
+   * @param inputIndex
+   * @return selected input slot index, can differ from parameter value
+   */
+  onBeforeConnectInput?(inputIndex: number): number;
+
+  /** a connection changed (new one or removed) (LiteGraph.INPUT or LiteGraph.OUTPUT, slot, true if connected, link_info, input_info or output_info ) */
+  onConnectionsChange(
+    type: number,
+    slotIndex: number,
+    isConnected: boolean,
+    link: LLink,
+    ioSlot: INodeOutputSlot | INodeInputSlot,
+  ): void;
+
+  /**
+   * if returns false, will abort the `LGraphNode.setProperty`
+   * Called when a property is changed
+   * @param property
+   * @param value
+   * @param prevValue
+   */
+  onPropertyChanged?(
+    property: string,
+    value: any,
+    prevValue: any,
+  ): void | boolean;
+
+  /** Called by `LGraphCanvas.processContextMenu` */
+  getMenuOptions?(graphCanvas: LGraphCanvas): ContextMenuItem[];
+  getSlotMenuOptions?(slot: INodeSlot): ContextMenuItem[];
+}
+
+export type LGraphNodeConstructor<T extends LGraphNode = LGraphNode> = {
+  new (): T;
+};
+
+export type SerializedLGraphGroup = {
+  title: LGraphGroup["title"];
+  bounding: LGraphGroup["_bounding"];
+  color: LGraphGroup["color"];
+  font: LGraphGroup["font"];
+};
+export declare class LGraphGroup {
+  title: string;
+  private _bounding: Vector4;
+  color: string;
+  font: string;
+
+  configure(o: SerializedLGraphGroup): void;
+  serialize(): SerializedLGraphGroup;
+  move(deltaX: number, deltaY: number, ignoreNodes?: boolean): void;
+  recomputeInsideNodes(): void;
+  isPointInside: LGraphNode["isPointInside"];
+  setDirtyCanvas: LGraphNode["setDirtyCanvas"];
+}
+
+export declare class DragAndScale {
+  constructor(element?: HTMLElement, skipEvents?: boolean);
+  offset: [number, number];
+  scale: number;
+  max_scale: number;
+  min_scale: number;
+  onredraw: Function | null;
+  enabled: boolean;
+  last_mouse: Vector2;
+  element: HTMLElement | null;
+  visible_area: Vector4;
+  bindEvents(element: HTMLElement): void;
+  computeVisibleArea(): void;
+  onMouse(e: MouseEvent): void;
+  toCanvasContext(ctx: CanvasRenderingContext2D): void;
+  convertOffsetToCanvas(pos: Vector2): Vector2;
+  convertCanvasToOffset(pos: Vector2): Vector2;
+  mouseDrag(x: number, y: number): void;
+  changeScale(value: number, zooming_center?: Vector2): void;
+  changeDeltaScale(value: number, zooming_center?: Vector2): void;
+  reset(): void;
+}
+
+/**
+ * This class is in charge of rendering one graph inside a canvas. And provides all the interaction required.
+ * Valid callbacks are: onNodeSelected, onNodeDeselected, onShowNodePanel, onNodeDblClicked
+ *
+ * @param canvas the canvas where you want to render (it accepts a selector in string format or the canvas element itself)
+ * @param graph
+ * @param options { skip_rendering, autoresize }
+ */
+export declare class LGraphCanvas {
+  static node_colors: Record<
+    string,
+    {
+      color: string;
+      bgcolor: string;
+      groupcolor: string;
+    }
+  >;
+  static link_type_colors: Record<string, string>;
+  static gradients: object;
+  static search_limit: number;
+
+  static getFileExtension(url: string): string;
+  static decodeHTML(str: string): string;
+
+  static onMenuCollapseAll(): void;
+  static onMenuNodeEdit(): void;
+  static onShowPropertyEditor(
+    item: any,
+    options: any,
+    e: any,
+    menu: any,
+    node: any,
+  ): void;
+  /** Create menu for `Add Group` */
+  static onGroupAdd: ContextMenuEventListener;
+  /** Create menu for `Add Node` */
+  static onMenuAdd: ContextMenuEventListener;
+  static showMenuNodeOptionalInputs: ContextMenuEventListener;
+  static showMenuNodeOptionalOutputs: ContextMenuEventListener;
+  static onShowMenuNodeProperties: ContextMenuEventListener;
+  static onResizeNode: ContextMenuEventListener;
+  static onMenuNodeCollapse: ContextMenuEventListener;
+  static onMenuNodePin: ContextMenuEventListener;
+  static onMenuNodeMode: ContextMenuEventListener;
+  static onMenuNodeColors: ContextMenuEventListener;
+  static onMenuNodeShapes: ContextMenuEventListener;
+  static onMenuNodeRemove: ContextMenuEventListener;
+  static onMenuNodeClone: ContextMenuEventListener;
+
+  constructor(
+    canvas: HTMLCanvasElement | string,
+    graph?: LGraph,
+    options?: {
+      skip_render?: boolean;
+      autoresize?: boolean;
+    },
+  );
+
+  static active_canvas: HTMLCanvasElement;
+
+  allow_dragcanvas: boolean;
+  allow_dragnodes: boolean;
+  /** allow to control widgets, buttons, collapse, etc */
+  allow_interaction: boolean;
+  /** allows to change a connection with having to redo it again */
+  allow_reconnect_links: boolean;
+  /** allow selecting multi nodes without pressing extra keys */
+  multi_select: boolean;
+  /** No effect */
+  allow_searchbox: boolean;
+  always_render_background: boolean;
+  autoresize?: boolean;
+  background_image: string;
+  bgcanvas: HTMLCanvasElement;
+  bgctx: CanvasRenderingContext2D;
+  canvas: HTMLCanvasElement;
+  canvas_mouse: Vector2;
+  clear_background: boolean;
+  connecting_node: LGraphNode | null;
+  connections_width: number;
+  ctx: CanvasRenderingContext2D;
+  current_node: LGraphNode | null;
+  default_connection_color: {
+    input_off: string;
+    input_on: string;
+    output_off: string;
+    output_on: string;
+  };
+  default_link_color: string;
+  dirty_area: Vector4 | null;
+  dirty_bgcanvas?: boolean;
+  dirty_canvas?: boolean;
+  drag_mode: boolean;
+  dragging_canvas: boolean;
+  dragging_rectangle: Vector4 | null;
+  ds: DragAndScale;
+  /** used for transition */
+  editor_alpha: number;
+  filter: any;
+  fps: number;
+  frame: number;
+  graph: LGraph;
+  highlighted_links: Record<number, boolean>;
+  highquality_render: boolean;
+  inner_text_font: string;
+  is_rendering: boolean;
+  last_draw_time: number;
+  last_mouse: Vector2;
+  /**
+   * Possible duplicated with `last_mouse`
+   * https://github.com/jagenjo/litegraph.js/issues/70
+   */
+  last_mouse_position: Vector2;
+  /** Timestamp of last mouse click, defaults to 0 */
+  last_mouseclick: number;
+  links_render_mode:
+    | typeof LiteGraph.STRAIGHT_LINK
+    | typeof LiteGraph.LINEAR_LINK
+    | typeof LiteGraph.SPLINE_LINK;
+  live_mode: boolean;
+  node_capturing_input: LGraphNode | null;
+  node_dragged: LGraphNode | null;
+  node_in_panel: LGraphNode | null;
+  node_over: LGraphNode | null;
+  node_title_color: string;
+  node_widget: [LGraphNode, IWidget] | null;
+  /** Called by `LGraphCanvas.drawBackCanvas` */
+  onDrawBackground:
+    | ((ctx: CanvasRenderingContext2D, visibleArea: Vector4) => void)
+    | null;
+  /** Called by `LGraphCanvas.drawFrontCanvas` */
+  onDrawForeground:
+    | ((ctx: CanvasRenderingContext2D, visibleArea: Vector4) => void)
+    | null;
+  onDrawOverlay: ((ctx: CanvasRenderingContext2D) => void) | null;
+  /** Called by `LGraphCanvas.processMouseDown` */
+  onMouse: ((event: MouseEvent) => boolean) | null;
+  /** Called by `LGraphCanvas.drawFrontCanvas` and `LGraphCanvas.drawLinkTooltip` */
+  onDrawLinkTooltip:
+    | ((ctx: CanvasRenderingContext2D, link: LLink, _this: this) => void)
+    | null;
+  /** Called by `LGraphCanvas.selectNodes` */
+  onNodeMoved: ((node: LGraphNode) => void) | null;
+  /** Called by `LGraphCanvas.processNodeSelected` */
+  onNodeSelected: ((node: LGraphNode) => void) | null;
+  /** Called by `LGraphCanvas.deselectNode` */
+  onNodeDeselected: ((node: LGraphNode) => void) | null;
+  /** Called by `LGraphCanvas.processNodeDblClicked` */
+  onShowNodePanel: ((node: LGraphNode) => void) | null;
+  /** Called by `LGraphCanvas.processNodeDblClicked` */
+  onNodeDblClicked: ((node: LGraphNode) => void) | null;
+  /** Called by `LGraphCanvas.selectNodes` */
+  onSelectionChange: ((nodes: Record<number, LGraphNode>) => void) | null;
+  /** Called by `LGraphCanvas.showSearchBox` */
+  onSearchBox:
+    | ((helper: Element, value: string, graphCanvas: LGraphCanvas) => string[])
+    | null;
+  onSearchBoxSelection:
+    | ((name: string, event: MouseEvent, graphCanvas: LGraphCanvas) => void)
+    | null;
+  pause_rendering: boolean;
+  render_canvas_border: boolean;
+  render_collapsed_slots: boolean;
+  render_connection_arrows: boolean;
+  render_connections_border: boolean;
+  render_connections_shadows: boolean;
+  render_curved_connections: boolean;
+  render_execution_order: boolean;
+  render_only_selected: boolean;
+  render_shadows: boolean;
+  render_title_colored: boolean;
+  round_radius: number;
+  selected_group: null | LGraphGroup;
+  selected_group_resizing: boolean;
+  selected_nodes: Record<number, LGraphNode>;
+  show_info: boolean;
+  title_text_font: string;
+  /** set to true to render title bar with gradients */
+  use_gradients: boolean;
+  visible_area: DragAndScale["visible_area"];
+  visible_links: LLink[];
+  visible_nodes: LGraphNode[];
+  zoom_modify_alpha: boolean;
+
+  /** clears all the data inside */
+  clear(): void;
+  /** assigns a graph, you can reassign graphs to the same canvas */
+  setGraph(graph: LGraph, skipClear?: boolean): void;
+  /** opens a graph contained inside a node in the current graph */
+  openSubgraph(graph: LGraph): void;
+  /** closes a subgraph contained inside a node */
+  closeSubgraph(): void;
+  /** assigns a canvas */
+  setCanvas(canvas: HTMLCanvasElement, skipEvents?: boolean): void;
+  /** binds mouse, keyboard, touch and drag events to the canvas */
+  bindEvents(): void;
+  /** unbinds mouse events from the canvas */
+  unbindEvents(): void;
+
+  /**
+   * this function allows to render the canvas using WebGL instead of Canvas2D
+   * this is useful if you plant to render 3D objects inside your nodes, it uses litegl.js for webgl and canvas2DtoWebGL to emulate the Canvas2D calls in webGL
+   **/
+  enableWebGL(): void;
+
+  /**
+   * marks as dirty the canvas, this way it will be rendered again
+   * @param fg if the foreground canvas is dirty (the one containing the nodes)
+   * @param bg if the background canvas is dirty (the one containing the wires)
+   */
+  setDirty(fg: boolean, bg: boolean): void;
+
+  /**
+   * Used to attach the canvas in a popup
+   * @return the window where the canvas is attached (the DOM root node)
+   */
+  getCanvasWindow(): Window;
+  /** starts rendering the content of the canvas when needed */
+  startRendering(): void;
+  /** stops rendering the content of the canvas (to save resources) */
+  stopRendering(): void;
+
+  processMouseDown(e: MouseEvent): boolean | undefined;
+  processMouseMove(e: MouseEvent): boolean | undefined;
+  processMouseUp(e: MouseEvent): boolean | undefined;
+  processMouseWheel(e: MouseEvent): boolean | undefined;
+
+  /** returns true if a position (in graph space) is on top of a node little corner box */
+  isOverNodeBox(node: LGraphNode, canvasX: number, canvasY: number): boolean;
+  /** returns true if a position (in graph space) is on top of a node input slot */
+  isOverNodeInput(
+    node: LGraphNode,
+    canvasX: number,
+    canvasY: number,
+    slotPos: Vector2,
+  ): boolean;
+
+  /** process a key event */
+  processKey(e: KeyboardEvent): boolean | undefined;
+
+  copyToClipboard(): void;
+  pasteFromClipboard(): void;
+  processDrop(e: DragEvent): void;
+  checkDropItem(e: DragEvent): void;
+  processNodeDblClicked(n: LGraphNode): void;
+  processNodeSelected(n: LGraphNode, e: MouseEvent): void;
+  processNodeDeselected(node: LGraphNode): void;
+
+  /** selects a given node (or adds it to the current selection) */
+  selectNode(node: LGraphNode, add?: boolean): void;
+  /** selects several nodes (or adds them to the current selection) */
+  selectNodes(nodes?: LGraphNode[], add?: boolean): void;
+  /** removes a node from the current selection */
+  deselectNode(node: LGraphNode): void;
+  /** removes all nodes from the current selection */
+  deselectAllNodes(): void;
+  /** deletes all nodes in the current selection from the graph */
+  deleteSelectedNodes(): void;
+
+  /** centers the camera on a given node */
+  centerOnNode(node: LGraphNode): void;
+  /** changes the zoom level of the graph (default is 1), you can pass also a place used to pivot the zoom */
+  setZoom(value: number, center: Vector2): void;
+  /** brings a node to front (above all other nodes) */
+  bringToFront(node: LGraphNode): void;
+  /** sends a node to the back (below all other nodes) */
+  sendToBack(node: LGraphNode): void;
+  /** checks which nodes are visible (inside the camera area) */
+  computeVisibleNodes(nodes: LGraphNode[]): LGraphNode[];
+  /** renders the whole canvas content, by rendering in two separated canvas, one containing the background grid and the connections, and one containing the nodes) */
+  draw(forceFG?: boolean, forceBG?: boolean): void;
+  /** draws the front canvas (the one containing all the nodes) */
+  drawFrontCanvas(): void;
+  /** draws some useful stats in the corner of the canvas */
+  renderInfo(ctx: CanvasRenderingContext2D, x: number, y: number): void;
+  /** draws the back canvas (the one containing the background and the connections) */
+  drawBackCanvas(): void;
+  /** draws the given node inside the canvas */
+  drawNode(node: LGraphNode, ctx: CanvasRenderingContext2D): void;
+  /** draws graphic for node's slot */
+  drawSlotGraphic(
+    ctx: CanvasRenderingContext2D,
+    pos: number[],
+    shape: SlotShape,
+    horizontal: boolean,
+  ): void;
+  /** draws the shape of the given node in the canvas */
+  drawNodeShape(
+    node: LGraphNode,
+    ctx: CanvasRenderingContext2D,
+    size: [number, number],
+    fgColor: string,
+    bgColor: string,
+    selected: boolean,
+    mouseOver: boolean,
+  ): void;
+  /** draws every connection visible in the canvas */
+  drawConnections(ctx: CanvasRenderingContext2D): void;
+  /**
+   * draws a link between two points
+   * @param a start pos
+   * @param b end pos
+   * @param link the link object with all the link info
+   * @param skipBorder ignore the shadow of the link
+   * @param flow show flow animation (for events)
+   * @param color the color for the link
+   * @param startDir the direction enum
+   * @param endDir the direction enum
+   * @param numSublines number of sublines (useful to represent vec3 or rgb)
+   **/
+  renderLink(
+    a: Vector2,
+    b: Vector2,
+    link: object,
+    skipBorder: boolean,
+    flow: boolean,
+    color?: string,
+    startDir?: number,
+    endDir?: number,
+    numSublines?: number,
+  ): void;
+
+  computeConnectionPoint(
+    a: Vector2,
+    b: Vector2,
+    t: number,
+    startDir?: number,
+    endDir?: number,
+  ): void;
+
+  drawExecutionOrder(ctx: CanvasRenderingContext2D): void;
+  /** draws the widgets stored inside a node */
+  drawNodeWidgets(
+    node: LGraphNode,
+    posY: number,
+    ctx: CanvasRenderingContext2D,
+    activeWidget: object,
+  ): void;
+  /** process an event on widgets */
+  processNodeWidgets(
+    node: LGraphNode,
+    pos: Vector2,
+    event: Event,
+    activeWidget: object,
+  ): void;
+  /** draws every group area in the background */
+  drawGroups(canvas: any, ctx: CanvasRenderingContext2D): void;
+  adjustNodesSize(): void;
+  /** resizes the canvas to a given size, if no size is passed, then it tries to fill the parentNode */
+  resize(width?: number, height?: number): void;
+  /**
+   * switches to live mode (node shapes are not rendered, only the content)
+   * this feature was designed when graphs where meant to create user interfaces
+   **/
+  switchLiveMode(transition?: boolean): void;
+  onNodeSelectionChange(): void;
+  touchHandler(event: TouchEvent): void;
+
+  showLinkMenu(link: LLink, e: any): false;
+  prompt(
+    title: string,
+    value: any,
+    callback: Function,
+    event: any,
+  ): HTMLDivElement;
+  showSearchBox(event?: MouseEvent): void;
+  showEditPropertyValue(node: LGraphNode, property: any, options: any): void;
+  createDialog(
+    html: string,
+    options?: { position?: Vector2; event?: MouseEvent },
+  ): void;
+
+  convertOffsetToCanvas: DragAndScale["convertOffsetToCanvas"];
+  convertCanvasToOffset: DragAndScale["convertCanvasToOffset"];
+  /** converts event coordinates from canvas2D to graph coordinates */
+  convertEventToCanvasOffset(e: MouseEvent): Vector2;
+  /** adds some useful properties to a mouse event, like the position in graph coordinates */
+  adjustMouseEvent(e: MouseEvent): void;
+
+  getCanvasMenuOptions(): ContextMenuItem[];
+  getNodeMenuOptions(node: LGraphNode): ContextMenuItem[];
+  getGroupMenuOptions(): ContextMenuItem[];
+  /** Called by `getCanvasMenuOptions`, replace default options */
+  getMenuOptions?(): ContextMenuItem[];
+  /** Called by `getCanvasMenuOptions`, append to default options */
+  getExtraMenuOptions?(): ContextMenuItem[];
+  /** Called when mouse right click */
+  processContextMenu(node: LGraphNode, event: Event): void;
+}
+
+declare class ContextMenu {
+  static trigger(
+    element: HTMLElement,
+    event_name: string,
+    params: any,
+    origin: any,
+  ): void;
+  static isCursorOverElement(event: MouseEvent, element: HTMLElement): void;
+  static closeAllContextMenus(window: Window): void;
+  constructor(
+    values: ContextMenuItem[],
+    options?: IContextMenuOptions,
+    window?: Window,
+  );
+  options: IContextMenuOptions;
+  parentMenu?: ContextMenu;
+  lock: boolean;
+  current_submenu?: ContextMenu;
+  addItem(
+    name: string,
+    value: ContextMenuItem,
+    options?: IContextMenuOptions,
+  ): void;
+  close(e?: MouseEvent, ignore_parent_menu?: boolean): void;
+  getTopMenu(): void;
+  getFirstEvent(): void;
+}
+
+declare global {
+  interface CanvasRenderingContext2D {
+    /** like rect but rounded corners */
+    roundRect(
+      x: number,
+      y: number,
+      width: number,
+      height: number,
+      radius: number,
+      radiusLow: number,
+    ): void;
+  }
+
+  interface Math {
+    clamp(v: number, min: number, max: number): number;
+  }
+}
diff --git a/ui/src/types/types.ts b/ui/src/types/types.ts
new file mode 100644
index 0000000..e3eb0bf
--- /dev/null
+++ b/ui/src/types/types.ts
@@ -0,0 +1,125 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import { EWorkflowPrivacy } from "./dbTypes";
+
+export type WorkspaceRoute =
+  | "root"
+  | "customNodes"
+  | "recentFlows"
+  | "gallery"
+  | "versionHistory"
+  | "saveAsModal"
+  | "modelList"
+  | "spotlightSearch"
+  | "downloadSpaceJson"
+  | "installModels"
+  | "share";
+
+export type Session = {
+  username: string | null;
+  shareKey: string;
+};
+
+export type ShareWorkflowData = {
+  version: {
+    name: string;
+    json: string;
+  };
+  workflow: {
+    name: string;
+    cloudID?: string | null;
+  };
+  nodeDefs: Object;
+  privacy: EWorkflowPrivacy;
+};
+
+export interface Node {
+  name: string;
+  description: string;
+  image: string;
+  github_url: string;
+  from_index: number;
+  to_index: number;
+}
+
+export interface NodeInfo {
+  existing_nodes: Node[];
+  missing_nodes: Node[];
+}
+
+export interface Subgraph {
+    id: number;
+    name: string; 
+    description: string;
+    json: Record<string, any>;
+    tags: string[];
+}
+
+export interface Workflow {
+  id?: number;
+  name?: string;
+  description?: string;
+  image?: string;
+}
+
+export interface ExtItem {
+  type: string;
+  data: any;
+}
+
+export interface ChatResponse {
+  session_id: string;
+  text?: string;
+  finished: boolean;
+  format: string;
+  ext?: ExtItem[];
+}
+
+export interface Message {
+  id: string;
+  content: string;
+  role: 'user' | 'ai' | 'tool';
+  name?: string;
+  type?: string;
+  format?: string;
+  finished?: boolean;
+}
+
+export interface ToolCall {
+  toolCallId: string
+  name: string
+  args: {}
+  result?: {} | []
+}
+
+export interface ComponentConfig {
+  id: string
+  name: string
+  type: string
+  props: any
+  children: ComponentConfig[]
+}
+
+export interface WorkflowOption {
+  name: string;
+  description: string;
+  thumbnail: string;
+  dir: string;
+  workflow: string;
+}
+
+export interface MessageContent {
+  ai_message: string;
+  options?: string[] | WorkflowOption[];
+}
+
+export interface OptimizedWorkflowRequest {
+  workflow_id: number;
+  prompt: string;
+}
+
+export interface OptimizedWorkflowResponse {
+  workflow: any;  // 工作流数据
+  optimized_params: [number, string, number, string, string | number | boolean][];  // 优化后的参数
+}
diff --git a/ui/src/utils/OsPathUtils.ts b/ui/src/utils/OsPathUtils.ts
new file mode 100644
index 0000000..cc5fde1
--- /dev/null
+++ b/ui/src/utils/OsPathUtils.ts
@@ -0,0 +1,42 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import type { Workflow } from "../types/dbTypes";
+
+export const serverInfo: {
+  os: "Windows" | "Linux" | "Darwin" | "Java" | null;
+} = {
+  os: null,
+};
+
+export const getPathSep = () => (serverInfo.os === "Windows" ? "\\" : "/");
+
+export function joinRelPath(...segments: string[]) {
+  const rel = segments.filter((segment) => segment !== "").join("/");
+  return sanitizeRelPath(rel);
+}
+
+export function sanitizeRelPath(path: string) {
+  const segments = path
+    .split("/")
+    .filter((segment) => segment !== "")
+    .join("/");
+  // Replace backslashes with forward slashes to handle Windows paths
+  let sanitizedPath = segments.replace(/\\/g, "/");
+  // Remove leading slashes to ensure the path is treated as relative
+  sanitizedPath = sanitizedPath.replace(/^\/+/, "");
+
+  if (serverInfo.os === "Windows") {
+    sanitizedPath = segments.replace(/\//g, "\\");
+  }
+
+  return sanitizedPath;
+}
+
+export function getWorkflowRelPath(workflow: Workflow) {
+  return joinRelPath(workflow.parentFolderID ?? "", workflow.name + ".json");
+}
+
+export function getFolderRelPath(folder: { id: string }) {
+  return folder.id;
+}
diff --git a/ui/src/utils/civitUtils.ts b/ui/src/utils/civitUtils.ts
new file mode 100644
index 0000000..feb1070
--- /dev/null
+++ b/ui/src/utils/civitUtils.ts
@@ -0,0 +1,80 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import { userSettingsTable } from "../db-tables/WorkspaceDB";
+
+const CIVIT_API_KEY_STORAGE_KEY = "WORKSPACE_CIVIT_API_KEY_STORAGE_KEY";
+export function getCivitApiKey() {
+  return localStorage.getItem(CIVIT_API_KEY_STORAGE_KEY);
+}
+
+export function setCivitApiKey(apiKey: string) {
+  localStorage.setItem(CIVIT_API_KEY_STORAGE_KEY, apiKey);
+}
+
+export function getCivitModelDownloadUrl(modelVersionID: string) {
+  return `https://civitai.com/api/download/models/${modelVersionID}`;
+}
+
+export function getCivitModelPageUrl(modelID: string, modelVersionID?: string) {
+  if (!modelVersionID) {
+    return `https://civitai.com/models/${modelID}`;
+  }
+  return `https://civitai.com/models/${modelID}?modelVersionId=${modelVersionID}`;
+}
+
+export function getHgModelInfoUrlFromDownloadUrl(downloadUrl: string) {
+  if (!downloadUrl.includes("huggingface")) return;
+  const infoPageUrl = downloadUrl.replace("/resolve/", "/blob/");
+  return infoPageUrl;
+}
+
+interface ResponsePartial {
+  id: number;
+  modelId: number;
+  name: string;
+  model: {
+    name: string;
+    type: string;
+    nsfw: boolean;
+  };
+  images: {
+    url: string;
+    nsfwLevel: number;
+    width: number;
+    height: number;
+    hash: string;
+  }[];
+}
+
+export async function fetchCivitModelFromHashKey(filehash: string): Promise<{
+  modelName?: string;
+  civitModelID?: string;
+  civitModelVersionID?: string;
+  imageUrl?: string;
+}> {
+  try {
+    const url = `https://civitai.com/api/v1/model-versions/by-hash/${filehash}`;
+    const resp = await fetch(url);
+    const json: ResponsePartial = await resp.json();
+    let image_url: string | undefined;
+    const showNsfwThumbnail = await userSettingsTable?.getSetting(
+      "showNsfwModelThumbnail",
+    );
+    if (showNsfwThumbnail === true) {
+      image_url = json?.images?.[0]?.url;
+    } else if (!json.model.nsfw) {
+      const sfwImage = json.images.find((i) => i.nsfwLevel == 1);
+      image_url = sfwImage?.url;
+    }
+
+    return {
+      modelName: json.model.name,
+      civitModelID: String(json.modelId),
+      civitModelVersionID: String(json.id),
+      imageUrl: image_url ?? undefined,
+    };
+  } catch (e) {
+    return {};
+  }
+}
diff --git a/ui/src/utils/comfyapp.ts b/ui/src/utils/comfyapp.ts
new file mode 100644
index 0000000..b5c6422
--- /dev/null
+++ b/ui/src/utils/comfyapp.ts
@@ -0,0 +1,24 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+// @ts-ignore
+export let app: any | null = null;
+const api_base = location.pathname.split("/").slice(0, -1).join("/");
+
+export let api: any | null = null;
+
+export async function waitForApp() {
+  try {
+    await Promise.all([
+      import(api_base + "/scripts/api.js").then((apiJs) => {
+        api = apiJs?.api;
+      }),
+
+      import(api_base + "/scripts/app.js").then((appJs) => {
+        app = appJs?.app;
+      }),
+    ]);
+  } catch (e) {
+    console.error("waitForApp error", e);
+  }
+}
diff --git a/ui/src/utils/deepJsonDiffCheck.ts b/ui/src/utils/deepJsonDiffCheck.ts
new file mode 100644
index 0000000..470c2c2
--- /dev/null
+++ b/ui/src/utils/deepJsonDiffCheck.ts
@@ -0,0 +1,49 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+export const deepJsonDiffCheck = (oldData: any, newData: any) => {
+  const oldDataNodes = oldData["nodes"] == null ? [] : oldData["nodes"];
+  const newDataNodes = newData["nodes"] == null ? [] : newData["nodes"];
+  oldData["nodes"] = [];
+  newData["nodes"] = [];
+  let equal = JSON.stringify(oldData) === JSON.stringify(newData);
+  if (equal) {
+    const array2Map = (map: any, obj: any) => {
+      const oldOrder = obj["order"];
+      const oldPos = obj["pos"];
+      delete obj["order"];
+      delete obj["pos"];
+      map.set(obj["id"], JSON.stringify(obj));
+      map.set(obj["id"] + "_pos", oldPos);
+      obj["order"] = oldOrder;
+      obj["pos"] = oldPos;
+      return map;
+    };
+    const withoutDeviation = (a: any, b: any, c: any) => {
+      return Math.abs(a - b) > c;
+    };
+    if (oldDataNodes.length == newDataNodes.length) {
+      const oldDataNodesMap = oldDataNodes.reduce(array2Map, new Map());
+      const newDataNodesMap = newDataNodes.reduce(array2Map, new Map());
+      for (let [key, value] of oldDataNodesMap) {
+        if (!newDataNodesMap.has(key)) {
+          equal = false;
+          break;
+        }
+        if (typeof key === 'string' && key.includes("_pos")) {
+          const newDataPos = newDataNodesMap.get(key);
+          if (newDataPos == null || value == null || withoutDeviation(newDataPos[0], value[0], 5) || withoutDeviation(newDataPos[1], value[1], 5)) {
+            equal = false;
+            break;
+          }
+        } else if (newDataNodesMap.get(key) !== value) {
+          equal = false;
+          break;
+        }
+      }
+    }
+  }
+  oldData["nodes"] = oldDataNodes;
+  newData["nodes"] = newDataNodes;
+  return equal;
+};
\ No newline at end of file
diff --git a/ui/src/utils/downloadJsonFile.ts b/ui/src/utils/downloadJsonFile.ts
new file mode 100644
index 0000000..6a72733
--- /dev/null
+++ b/ui/src/utils/downloadJsonFile.ts
@@ -0,0 +1,15 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+export function downloadJsonFile(jsonStr: string, fileName: string) {
+  const blob = new Blob([jsonStr], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `${fileName}.json`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
diff --git a/ui/src/utils/downloadWorkflowsZip.ts b/ui/src/utils/downloadWorkflowsZip.ts
new file mode 100644
index 0000000..1a590e6
--- /dev/null
+++ b/ui/src/utils/downloadWorkflowsZip.ts
@@ -0,0 +1,40 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import { Workflow } from "../types/dbTypes";
+import { formatTimestamp } from "../utils";
+import JSZip from "JSZip";
+import { genFolderRelPath } from "../db-tables/DiskFileUtils";
+import { sanitizeRelPath } from "../utils/OsPathUtils";
+import { userSettingsTable } from "../db-tables/WorkspaceDB";
+
+export const downloadWorkflowsZip = async (selectedList: Array<Workflow>) => {
+  const exportName = `ComfyUI workspace workflows ${formatTimestamp(Date.now())}`;
+  const zip = new JSZip();
+  const twoWaySyncEnabled = await userSettingsTable?.getSetting("twoWaySync");
+  for (const workflow of selectedList) {
+    let folderPath;
+    if (twoWaySyncEnabled) {
+      folderPath = workflow.parentFolderID ?? "";
+    } else {
+      folderPath = await genFolderRelPath(workflow.parentFolderID ?? null).then(
+        async (path) => {
+          return sanitizeRelPath(path ?? "");
+        },
+      );
+    }
+    // Ensure the folder path exists in the zip
+    const folder = zip.folder(folderPath);
+    // Adding the JSON file to the corresponding folder
+    folder?.file(`${workflow.name}.json`, workflow.json);
+  }
+
+  zip.generateAsync({ type: "blob" }).then(function (content) {
+    const a = document.createElement("a");
+    a.href = window.URL.createObjectURL(content);
+    a.download = `${exportName}.zip`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  });
+};
diff --git a/ui/src/utils/encryptUtils.ts b/ui/src/utils/encryptUtils.ts
new file mode 100644
index 0000000..6166855
--- /dev/null
+++ b/ui/src/utils/encryptUtils.ts
@@ -0,0 +1,21 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+// utils/encryptUtils
+const defaultSalt = import.meta.env.VITE_SHARE_KEY_ENCODE_KEY;
+
+export function encodeKey(text: string, salt: string = defaultSalt): string {
+  const randomLength = Math.floor(Math.random() * 13) + 1; // Random length between 1 and 13
+  const randomPadding = Math.random()
+    .toString(36)
+    .substring(2, 2 + randomLength);
+  const input = randomPadding + salt + text;
+  return btoa(encodeURIComponent(input));
+}
+
+export function decodeKey(encoded: string, salt: string = defaultSalt): string {
+  const decoded = decodeURIComponent(atob(encoded));
+  const saltIndex = decoded.indexOf(salt);
+  if (saltIndex === -1) throw new Error("Invalid encoded string or salt");
+  return decoded.slice(saltIndex + salt.length);
+}
diff --git a/ui/src/utils/findSfwImage.ts b/ui/src/utils/findSfwImage.ts
new file mode 100644
index 0000000..7b05d61
--- /dev/null
+++ b/ui/src/utils/findSfwImage.ts
@@ -0,0 +1,45 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import { SearchHit } from "../model-manager/civitSearchTypes";
+import { isCivitModel } from "../model-manager/install-models/util/modelTypes";
+import { CivitiModel } from "../model-manager/types";
+
+interface ImageLike {
+  nsfw?: "None" | "Soft" | "Mature" | "X";
+  nsfwLevel?: number;
+}
+export function findSfwImage<T extends ImageLike>(
+  images?: T[],
+  fallback?: boolean,
+): T | undefined {
+  if (!images || images.length === 0) {
+    return;
+  }
+  let sfw = images.find(
+    (image) => image.nsfw === "None" || image.nsfwLevel === 1,
+  );
+
+  if (fallback) {
+    sfw = sfw ?? images[0];
+  }
+
+  return sfw;
+}
+
+export function findSfwImageFromModel(
+  model: CivitiModel | SearchHit,
+  IMAGE_SIZE = 280,
+  fallback?: boolean,
+): string | undefined {
+  if (!model) {
+    return;
+  }
+  if (model.images) {
+    const imageurl = `https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/${findSfwImage(model.images, fallback)?.url}/width=${IMAGE_SIZE}/`;
+    return imageurl;
+  } else if (isCivitModel(model)) {
+    return findSfwImage(model.modelVersions?.at(0)?.images, fallback)?.url;
+  }
+  return undefined;
+}
diff --git a/ui/src/utils/graphUtils.ts b/ui/src/utils/graphUtils.ts
new file mode 100644
index 0000000..ba6fca0
--- /dev/null
+++ b/ui/src/utils/graphUtils.ts
@@ -0,0 +1,137 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import LiteGraph from "../types/litegraph.d";
+import { app } from "./comfyapp";
+
+export function addNodeOnGraph(type: string, options: any = {}) {
+    const node = LiteGraph.createNode(type, "", options);
+    app.graph.add(node);
+    return node;
+}
+
+// interface ParsedWorkflow {
+//   nodes?: any[];
+//   groups?: any[];
+//   reroutes?: any[];
+//   links?: any[];
+// }
+
+// interface LoadResults {
+//   created: (LGraphNode | LGraphGroup)[];
+//   nodes: Map<number, LGraphNode>;
+//   links: Map<number, any>;
+//   reroutes: Map<number, any>;
+// }
+
+// export function loadSubGraphData(jsonObject: string | object, graph: LGraph, mousePos: [number, number]): LoadResults {
+//   // Parse JSON if string is provided
+//   const parsed: ParsedWorkflow = typeof jsonObject === 'string' ? JSON.parse(jsonObject) : jsonObject;
+
+//   // Initialize arrays if they don't exist
+//   parsed.nodes ??= [];
+//   parsed.groups ??= [];
+//   parsed.reroutes ??= [];
+//   parsed.links ??= [];
+
+//   // Find minimum offsets
+//   let offsetX = Infinity;
+//   let offsetY = Infinity;
+
+//   // Check nodes and reroutes positions
+//   for (const item of [...parsed.nodes, ...parsed.reroutes]) {
+//     if (item.pos[0] < offsetX) offsetX = item.pos[0];
+//     if (item.pos[1] < offsetY) offsetY = item.pos[1];
+//   }
+
+//   // Check group positions
+//   if (parsed.groups) {
+//     for (const group of parsed.groups) {
+//       if (group.bounding[0] < offsetX) offsetX = group.bounding[0];
+//       if (group.bounding[1] < offsetY) offsetY = group.bounding[1];
+//     }
+//   }
+
+//   // Initialize results
+//   const results: LoadResults = {
+//     created: [],
+//     nodes: new Map(),
+//     links: new Map(),
+//     reroutes: new Map()
+//   };
+
+//   const { created, nodes, links, reroutes } = results;
+
+//   // Add groups
+//   for (const info of parsed.groups) {
+//     info.id = undefined;
+//     const group = new LGraphGroup();
+//     group.configure(info);
+//     graph.add(group);
+//     created.push(group);
+//   }
+
+//   // Add nodes
+//   for (const info of parsed.nodes) {
+//     const node = LiteGraph.createNode(info.type);
+//     if (!node) continue;
+    
+//     nodes.set(info.id, node);
+//     info.id = undefined;
+//     node.configure(info);
+//     graph.add(node);
+//     created.push(node);
+//   }
+
+//   // Add reroutes
+//   for (const info of parsed.reroutes) {
+//     const { id } = info;
+//     info.id = undefined;
+//     const reroute = graph.setReroute(info);
+//     created.push(reroute);
+//     reroutes.set(id, reroute);
+//   }
+
+//   // Update reroute parent IDs
+//   for (const reroute of reroutes.values()) {
+//     const mapped = reroutes.get(reroute.parentId);
+//     if (mapped) reroute.parentId = mapped.id;
+//   }
+
+//   // Add links
+//   for (const info of parsed.links) {
+//     const outNode = nodes.get(info.origin_id);
+//     const inNode = nodes.get(info.target_id);
+//     const afterRerouteId = reroutes.get(info.parentId)?.id;
+
+//     if (inNode) {
+//       const link = outNode?.connect(
+//         info.origin_slot,
+//         inNode,
+//         info.target_slot,
+//         afterRerouteId
+//       );
+//       if (link) links.set(info.id, link);
+//     }
+//   }
+
+//   // Validate and update reroutes
+//   for (const reroute of reroutes.values()) {
+//     const ids = [...reroute.linkIds].map(x => links.get(x)?.id ?? x);
+//     reroute.update(reroute.parentId, undefined, ids);
+//     if (!reroute.validateLinks(graph.links)) {
+//       graph.removeReroute(reroute.id);
+//     }
+//   }
+
+//   // Adjust positions relative to mouse position
+//   for (const item of created) {
+//     item.pos[0] += mousePos[0] - offsetX;
+//     item.pos[1] += mousePos[1] - offsetY;
+//   }
+
+//   // Update graph
+//   graph.afterChange();
+
+//   return results;
+// }
diff --git a/ui/src/utils/jsonUtils.ts b/ui/src/utils/jsonUtils.ts
new file mode 100644
index 0000000..d2e502a
--- /dev/null
+++ b/ui/src/utils/jsonUtils.ts
@@ -0,0 +1,71 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+type JsonValue =
+  | string
+  | number
+  | boolean
+  | { [key: string]: JsonValue }
+  | JsonValue[]
+  | undefined;
+
+export function deepCompare(
+  json1: JsonValue,
+  json2: JsonValue,
+  path: string = "",
+): boolean {
+  if (
+    typeof json1 === "object" &&
+    json1 !== null &&
+    typeof json2 === "object" &&
+    json2 !== null
+  ) {
+    const keys1 = Object.keys(json1);
+    const keys2 = Object.keys(json2);
+    const allKeys = new Set([...keys1, ...keys2]);
+
+    for (const key of allKeys) {
+      const newPath = path ? `${path}.${key}` : key;
+      const value1 = (json1 as { [key: string]: JsonValue })[key];
+      const value2 = (json2 as { [key: string]: JsonValue })[key];
+
+      if (
+        (value1 === undefined && !keys2.includes(key)) ||
+        (value2 === undefined && !keys1.includes(key))
+      ) {
+        continue; // Skip comparison if the value is undefined in one and missing in the other
+      }
+
+      if (!keys1.includes(key)) {
+        console.log(
+          `${newPath}: Missing in first JSON keys1`,
+          keys1,
+          "keys2",
+          keys2,
+          value1,
+          value2,
+        );
+        return false;
+      } else if (!keys2.includes(key)) {
+        console.log(
+          `${newPath}: Missing in 222 JSON keys2`,
+          keys1,
+          "keys2",
+          keys2,
+          value1,
+          value2,
+        );
+        return false;
+      } else {
+        const isEqual = deepCompare(value1, value2, newPath);
+        if (!isEqual) {
+          return false;
+        }
+      }
+    }
+  } else if (json1 !== json2 && json1 !== undefined && json2 !== undefined) {
+    console.log(`${path}: ${json1} != ${json2}`);
+    return false;
+  }
+  return true;
+}
diff --git a/ui/src/utils/mediaMetadataUtils.ts b/ui/src/utils/mediaMetadataUtils.ts
new file mode 100644
index 0000000..dd4ce91
--- /dev/null
+++ b/ui/src/utils/mediaMetadataUtils.ts
@@ -0,0 +1,266 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+export function getPngMetadata(file: File) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      // Get the PNG data as a Uint8Array
+      // @ts-expect-error
+      const pngData = new Uint8Array(event.target.result);
+      const dataView = new DataView(pngData.buffer);
+
+      // Check that the PNG signature is present
+      if (dataView.getUint32(0) !== 0x89504e47) {
+        console.error("Not a valid PNG file");
+        reject();
+      }
+
+      // Start searching for chunks after the PNG signature
+      let offset = 8;
+      const txt_chunks: Record<string, string> = {};
+      // Loop through the chunks in the PNG file
+      while (offset < pngData.length) {
+        // Get the length of the chunk
+        const length = dataView.getUint32(offset);
+        // Get the chunk type
+        const type = String.fromCharCode(
+          ...pngData.slice(offset + 4, offset + 8),
+        );
+        if (type === "tEXt" || type == "comf") {
+          // Get the keyword
+          let keyword_end = offset + 8;
+          while (pngData[keyword_end] !== 0) {
+            keyword_end++;
+          }
+          const keyword = String.fromCharCode(
+            ...pngData.slice(offset + 8, keyword_end),
+          );
+          // Get the text
+          const contentArraySegment = pngData.slice(
+            keyword_end + 1,
+            offset + 8 + length,
+          );
+          const contentJson = Array.from(contentArraySegment)
+            .map((s) => String.fromCharCode(s))
+            .join("");
+          txt_chunks[keyword] = contentJson;
+        }
+
+        offset += 12 + length;
+      }
+
+      resolve(txt_chunks);
+    };
+
+    reader.readAsArrayBuffer(file);
+  });
+}
+
+function parseExifData(exifData: any) {
+  // Check for the correct TIFF header (0x4949 for little-endian or 0x4D4D for big-endian)
+  const isLittleEndian = new Uint16Array(exifData.slice(0, 2))[0] === 0x4949;
+
+  // Function to read 16-bit and 32-bit integers from binary data
+  function readInt(
+    offset: number,
+    isLittleEndian: boolean | undefined,
+    length: number,
+  ) {
+    const arr = exifData.slice(offset, offset + length);
+    if (length === 2) {
+      return new DataView(arr.buffer, arr.byteOffset, arr.byteLength).getUint16(
+        0,
+        isLittleEndian,
+      );
+    } else if (length === 4) {
+      return new DataView(arr.buffer, arr.byteOffset, arr.byteLength).getUint32(
+        0,
+        isLittleEndian,
+      );
+    }
+  }
+
+  // Read the offset to the first IFD (Image File Directory)
+  const ifdOffset = readInt(4, isLittleEndian, 4);
+
+  function parseIFD(offset: number) {
+    const numEntries = readInt(offset, isLittleEndian, 2);
+    const result = {};
+
+    for (let i = 0; i < numEntries; i++) {
+      const entryOffset = offset + 2 + i * 12;
+      const tag = readInt(entryOffset, isLittleEndian, 2);
+      const type = readInt(entryOffset + 2, isLittleEndian, 2);
+      const numValues = readInt(entryOffset + 4, isLittleEndian, 4);
+      const valueOffset = readInt(entryOffset + 8, isLittleEndian, 4);
+
+      // Read the value(s) based on the data type
+      let value;
+      if (type === 2) {
+        // ASCII string
+        value = String.fromCharCode(
+          ...exifData.slice(valueOffset, valueOffset + numValues - 1),
+        );
+      }
+
+      result[tag] = value;
+    }
+
+    return result;
+  }
+
+  // Parse the first IFD
+  const ifdData = parseIFD(ifdOffset);
+  return ifdData;
+}
+
+export function getWebpMetadata(file: File) {
+  return new Promise((r) => {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const webp = new Uint8Array(event?.target?.result as Iterable<number>);
+      const dataView = new DataView(webp.buffer);
+
+      // Check that the WEBP signature is present
+      if (
+        dataView.getUint32(0) !== 0x52494646 ||
+        dataView.getUint32(8) !== 0x57454250
+      ) {
+        console.error("Not a valid WEBP file");
+        r();
+        return;
+      }
+
+      // Start searching for chunks after the WEBP signature
+      let offset = 12;
+      const txt_chunks = {};
+      // Loop through the chunks in the WEBP file
+      while (offset < webp.length) {
+        const chunk_length = dataView.getUint32(offset + 4, true);
+        const chunk_type = String.fromCharCode(
+          ...webp.slice(offset, offset + 4),
+        );
+        if (chunk_type === "EXIF") {
+          if (
+            String.fromCharCode(...webp.slice(offset + 8, offset + 8 + 6)) ==
+            "Exif\0\0"
+          ) {
+            offset += 6;
+          }
+          const data = parseExifData(
+            webp.slice(offset + 8, offset + 8 + chunk_length),
+          );
+          for (const key in data) {
+            const value = data[key];
+            const index = value.indexOf(":");
+            txt_chunks[value.slice(0, index)] = value.slice(index + 1);
+          }
+        }
+
+        offset += 8 + chunk_length;
+      }
+
+      r(txt_chunks);
+    };
+
+    reader.readAsArrayBuffer(file);
+  });
+}
+
+export function isVideoName(name: string) {
+  if (name?.endsWith(".webm")) {
+    return true;
+  }
+  if (name?.endsWith(".mp4")) {
+    return true;
+  }
+
+  return false;
+}
+
+export function getVideoMetadata(file) {
+  return new Promise((r) => {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const videoData = new Uint8Array(event.target.result);
+      const dataView = new DataView(videoData.buffer);
+
+      const decoder = new TextDecoder();
+      // Check for known valid magic strings
+      if (dataView.getUint32(0) == 0x1a45dfa3) {
+        //webm
+        //see http://wiki.webmproject.org/webm-metadata/global-metadata
+        //and https://www.matroska.org/technical/elements.html
+        //contrary to specs, tag seems consistently at start
+        //COMMENT + 0x4487 + packed length?
+        //length 0x8d8 becomes 0x48d8
+        //
+        //description for variable length ints https://github.com/ietf-wg-cellar/ebml-specification/blob/master/specification.markdown
+        let offset = 4 + 8; //COMMENT is 7 chars + 1 to realign
+        while (offset < videoData.length - 16) {
+          //Check for text tags
+          if (dataView.getUint16(offset) == 0x4487) {
+            //check that name of tag is COMMENT
+            const name = String.fromCharCode(
+              ...videoData.slice(offset - 7, offset),
+            );
+            if (name === "COMMENT") {
+              const vint = dataView.getUint32(offset + 2);
+              const n_octets = Math.clz32(vint) + 1;
+              if (n_octets < 4) {
+                //250MB sanity cutoff
+                const length =
+                  (vint >> (8 * (4 - n_octets))) & ~(1 << (7 * n_octets));
+                const content = decoder.decode(
+                  videoData.slice(
+                    offset + 2 + n_octets,
+                    offset + 2 + n_octets + length,
+                  ),
+                );
+                const json = JSON.parse(content);
+                r(json);
+                return;
+              }
+            }
+          }
+          offset += 1;
+        }
+      } else if (
+        dataView.getUint32(4) == 0x66747970 &&
+        dataView.getUint32(8) == 0x69736f6d
+      ) {
+        //mp4
+        //see https://developer.apple.com/documentation/quicktime-file-format
+        //Seems to make no guarantee for alignment
+        let offset = videoData.length - 4;
+        while (offset > 16) {
+          //rough safe guess
+          if (dataView.getUint32(offset) == 0x64617461) {
+            //any data tag
+            if (dataView.getUint32(offset - 8) == 0xa9636d74) {
+              //cmt data tag
+              const type = dataView.getUint32(offset + 4); //seemingly 1
+              const locale = dataView.getUint32(offset + 8); //seemingly 0
+              const size = dataView.getUint32(offset - 4) - 4 * 4;
+              const content = decoder.decode(
+                videoData.slice(offset + 12, offset + 12 + size),
+              );
+              const json = JSON.parse(content);
+              r(json);
+              return;
+            }
+          }
+
+          offset -= 1;
+        }
+      } else {
+        console.error("Unknown magic: " + dataView.getUint32(0));
+        r();
+        return;
+      }
+    };
+
+    reader.readAsArrayBuffer(file);
+  });
+}
diff --git a/ui/src/utils/privacyUtils.ts b/ui/src/utils/privacyUtils.ts
new file mode 100644
index 0000000..1755f9f
--- /dev/null
+++ b/ui/src/utils/privacyUtils.ts
@@ -0,0 +1,17 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import type { EWorkflowPrivacy } from "../types/dbTypes";
+
+export function getPrivacyEmoji(privacy: EWorkflowPrivacy) {
+  switch (privacy) {
+    case "PRIVATE":
+      return "🔒";
+    case "PUBLIC":
+      return "🌐";
+    case "UNLISTED":
+      return "🔗";
+    default:
+      return "";
+  }
+}
diff --git a/ui/src/utils/saveShareKey.ts b/ui/src/utils/saveShareKey.ts
new file mode 100644
index 0000000..a5e3eea
--- /dev/null
+++ b/ui/src/utils/saveShareKey.ts
@@ -0,0 +1,9 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import { encodeKey } from "./encryptUtils";
+
+export function saveShareKey(sharekey: string) {
+  const key = encodeKey(sharekey);
+  localStorage.setItem("workspace_manager_shareKey", key);
+}
diff --git a/ui/src/utils/showAlert.css b/ui/src/utils/showAlert.css
new file mode 100644
index 0000000..538b29d
--- /dev/null
+++ b/ui/src/utils/showAlert.css
@@ -0,0 +1,42 @@
+/* Copyright (C) 2025 AIDC-AI */
+/* Licensed under the MIT License. */
+
+/* Styles for the modal */
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+/* Styles for the dialog */
+.dialog {
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  max-width: 80%;
+  background-color: #fff;
+  border-color: #000; /* Default, will be changed */
+  color: #000; /* Default, will be changed */
+}
+
+/* Specific styles for different alert levels */
+.dialog.error {
+  border-color: #ff3860;
+  color: #ff3860;
+}
+
+.dialog.info {
+  border-color: #209cee;
+  color: #209cee;
+}
+
+.dialog.success {
+  border-color: #23d160;
+  color: #23d160;
+}
diff --git a/ui/src/utils/showAlert.ts b/ui/src/utils/showAlert.ts
new file mode 100644
index 0000000..57715d5
--- /dev/null
+++ b/ui/src/utils/showAlert.ts
@@ -0,0 +1,40 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import "./showAlert.css";
+
+// Function to show a modal alert
+export function showAlert({
+  message,
+  level,
+}: {
+  message: string;
+  level: "error" | "info" | "success";
+}): void {
+  // Create the modal container
+  const modal = document.createElement("div");
+  modal.classList.add("wokspace_modal");
+
+  // Create the dialog
+  const dialog = document.createElement("div");
+  dialog.classList.add("workspace_dialog");
+  dialog.classList.add(level); // Add class based on the alert level
+
+  // Create the message paragraph
+  const messageP = document.createElement("p");
+  messageP.textContent = message;
+  dialog.appendChild(messageP);
+  modal.appendChild(dialog);
+  document.body.appendChild(modal);
+
+  // Function to remove the modal when clicked outside
+  const removeModal = (event: MouseEvent) => {
+    if (event.target === modal) {
+      modal.removeEventListener("click", removeModal);
+      document.body.removeChild(modal);
+    }
+  };
+
+  // Attach the event listener to the modal
+  modal.addEventListener("click", removeModal);
+}
diff --git a/ui/src/utils/uuid.ts b/ui/src/utils/uuid.ts
new file mode 100644
index 0000000..ac12a75
--- /dev/null
+++ b/ui/src/utils/uuid.ts
@@ -0,0 +1,16 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+export function generateUUID(): string {
+    // 检查是否支持 crypto.randomUUID()
+    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+        return crypto.randomUUID();
+    }
+    
+    // 降级方案：手动实现 UUID v4
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+        const r = Math.random() * 16 | 0;
+        const v = c === 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+    });
+} 
\ No newline at end of file
diff --git a/ui/src/vite-env.d.ts b/ui/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/ui/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/ui/src/workflowChat/workflowChat.tsx b/ui/src/workflowChat/workflowChat.tsx
new file mode 100644
index 0000000..418681e
--- /dev/null
+++ b/ui/src/workflowChat/workflowChat.tsx
@@ -0,0 +1,368 @@
+// Copyright (C) 2025 AIDC-AI
+// Licensed under the MIT License.
+
+import { ChangeEvent, KeyboardEvent, useEffect, useRef, useState } from "react";
+import { Message } from "../types/types";
+import { WorkflowChatAPI } from "../apis/workflowChatApi";
+import { app } from "../utils/comfyapp";
+import { ChatHeader } from "../components/chat/ChatHeader";
+import { ChatInput } from "../components/chat/ChatInput";
+import { SelectedNodeInfo } from "../components/chat/SelectedNodeInfo";
+import { MessageList } from "../components/chat/MessageList";
+import { generateUUID } from "../utils/uuid";
+import { getInstalledNodes, getObjectInfo } from "../apis/comfyApiCustom";
+import { UploadedImage } from '../components/chat/ChatInput';
+import React from "react";
+
+interface WorkflowChatProps {
+    onClose?: () => void;
+    visible?: boolean;
+    triggerUsage?: boolean;
+    onUsageTriggered?: () => void;
+}
+
+export default function WorkflowChat({ onClose, visible = true, triggerUsage = false, onUsageTriggered }: WorkflowChatProps) {
+    const [messages, setMessages] = useState<Message[]>([]);
+    const [input, setInput] = useState<string>('');
+    const [latestInput, setLatestInput] = useState<string>('');
+    const [loading, setLoading] = useState<boolean>(false);
+    const [sessionId, setSessionId] = useState<string>();
+    const messageDivRef = useRef<HTMLDivElement>(null);
+    const [selectedNodeInfo, setSelectedNodeInfo] = useState<any>(null);
+    const [installedNodes, setInstalledNodes] = useState<any[]>([]);
+    const [width, setWidth] = useState(window.innerWidth / 3);
+    const [isResizing, setIsResizing] = useState(false);
+    const [uploadedImages, setUploadedImages] = useState<UploadedImage[]>([]);
+    const [selectedModel, setSelectedModel] = useState<string>("gpt-4o");
+
+    useEffect(() => {
+        if (messageDivRef.current) {
+            messageDivRef.current.scrollTop = messageDivRef.current.scrollHeight
+        }
+    }, [messages])
+
+    useEffect(() => {
+        const fetchInstalledNodes = async () => {
+            console.log('[WorkflowChat] Fetching installed nodes');
+            const nodes = await getInstalledNodes();
+            console.log('[WorkflowChat] Received installed nodes:', nodes);
+            setInstalledNodes(nodes);
+        };
+        fetchInstalledNodes();
+    }, []);
+
+    // 获取历史消息
+    const fetchMessages = async (sid: string) => {
+        try {
+            const data = await WorkflowChatAPI.fetchMessages(sid);
+            setMessages(data);
+        } catch (error) {
+            console.error('Error fetching messages:', error);
+        }
+    };
+
+    useEffect(() => {
+        let sid = localStorage.getItem("sessionId");
+        if (sid) {
+            setSessionId(sid);
+            fetchMessages(sid);
+        } else {
+            sid = generateUUID();
+            setSessionId(sid);
+            localStorage.setItem("sessionId", sid);
+        }
+    }, []);
+
+    useEffect(() => {
+        const handleNodeSelection = () => {
+            const selectedNodes = app.canvas.selected_nodes;
+            if (Object.keys(selectedNodes ?? {}).length) {
+                // Object.values(app.canvas.selected_nodes)[0].comfyClass
+                const nodeInfo = Object.values(selectedNodes)[0];
+                setSelectedNodeInfo(nodeInfo);
+            } else {
+                setSelectedNodeInfo(null);
+            }
+        };
+
+        // Add event listeners
+        document.addEventListener("click", handleNodeSelection);
+
+        // Cleanup
+        return () => {
+            document.removeEventListener("click", handleNodeSelection);
+        };
+    }, []);
+
+    useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            document.documentElement.style.setProperty('--mouse-x', `${e.clientX}px`);
+            document.documentElement.style.setProperty('--mouse-y', `${e.clientY}px`);
+        };
+
+        document.addEventListener('mousemove', handleMouseMove);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+        };
+    }, []);
+
+    const handleMessageChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+        setInput(event.target.value);
+    }
+
+    const handleSendMessage = async () => {
+        if ((input.trim() === "" && !selectedNodeInfo) || !sessionId) return;
+        setLoading(true);
+        setLatestInput(input);
+
+        const userMessage: Message = {
+            id: generateUUID(),
+            role: "user",
+            content: input,
+        };
+
+        setMessages(prev => [...prev, userMessage]);
+        setInput("");
+
+        try {
+            // Create ext array with model selection
+            const modelExt = { type: "model_select", data: [selectedModel] };
+            
+            for await (const response of WorkflowChatAPI.streamInvokeServer(
+                sessionId, 
+                input, 
+                uploadedImages.map(img => img.file),
+                null,  // intent
+                modelExt  // ext
+            )) {
+                const aiMessage: Message = {
+                    id: generateUUID(),
+                    role: "ai",
+                    content: JSON.stringify(response),
+                    type: response.type,
+                    format: response.format,
+                    finished: response.finished,
+                    name: "Assistant"
+                };
+
+                setMessages(prev => {
+                    const lastMessage = prev[prev.length - 1];
+                    if (lastMessage.role === 'ai') {
+                        return [...prev.slice(0, -1), aiMessage];
+                    }
+                    return [...prev, aiMessage];
+                });
+
+                if (response.finished) {
+                    setLoading(false);
+                }
+            }
+        } catch (error) {
+            console.error('Error sending message:', error);
+            setLoading(false);
+        } finally {
+            setUploadedImages([]);
+        }
+    };
+
+    const handleKeyPress = (event: KeyboardEvent) => {
+        if (event.metaKey && event.key === "Enter") {
+            handleSendMessage();
+        }
+    }
+
+    const handleClearMessages = () => {
+        setMessages([]);
+        localStorage.removeItem("sessionId");
+        const newSessionId = generateUUID();
+        setSessionId(newSessionId);
+        localStorage.setItem("sessionId", newSessionId);
+    };
+
+    const avatar = (name?: string) => {
+        return `https://ui-avatars.com/api/?name=${name || 'User'}&background=random`;
+    }
+
+    const handleClose = () => {
+        onClose?.();
+    };
+
+    const handleOptionClick = (option: string) => {
+        setInput(option);
+    };
+
+    const handleSendMessageWithIntent = async (intent: string, ext?: any) => {
+        if (!sessionId || !selectedNodeInfo) return;
+        setLoading(true);
+
+        const userMessage: Message = {
+            id: generateUUID(),
+            role: "user",
+            content: selectedNodeInfo.comfyClass || selectedNodeInfo.type,
+        };
+
+        setMessages(prev => [...prev, userMessage]);
+
+        try {
+            for await (const response of WorkflowChatAPI.streamInvokeServer(sessionId, selectedNodeInfo.comfyClass || selectedNodeInfo.type, [], intent, ext)) {
+                const aiMessage: Message = {
+                    id: generateUUID(),
+                    role: "ai",
+                    content: JSON.stringify(response),
+                    format: response.format,
+                    finished: response.finished,
+                    name: "Assistant"
+                };
+
+                setMessages(prev => {
+                    const lastMessage = prev[prev.length - 1];
+                    if (lastMessage.role === 'ai') {
+                        return [...prev.slice(0, -1), aiMessage];
+                    }
+                    return [...prev, aiMessage];
+                });
+
+                if (response.finished) {
+                    setLoading(false);
+                }
+            }
+        } catch (error) {
+            console.error('Error sending message:', error);
+            setLoading(false);
+        }
+    };
+
+    const handleAddMessage = (message: Message) => {
+        console.log('[WorkflowChat] Adding new message:', message);
+        setMessages(prev => {
+            const newMessages = [...prev, message];
+            console.log('[WorkflowChat] Updated messages:', newMessages);
+            return newMessages;
+        });
+    };
+
+    const handleMouseDown = (e: React.MouseEvent) => {
+        setIsResizing(true);
+        e.preventDefault();
+    };
+
+    useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            if (!isResizing) return;
+            
+            const newWidth = window.innerWidth - e.clientX;
+            const clampedWidth = Math.min(
+                Math.max(300, newWidth),
+                window.innerWidth * 0.8
+            );
+            
+            setWidth(clampedWidth);
+        };
+
+        const handleMouseUp = () => {
+            setIsResizing(false);
+        };
+
+        if (isResizing) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+        }
+
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isResizing]);
+
+    const handleUploadImages = (files: FileList) => {
+        const newImages = Array.from(files).map(file => ({
+            id: Math.random().toString(36).substr(2, 9),
+            file,
+            preview: URL.createObjectURL(file)
+        }));
+        setUploadedImages(prev => [...prev, ...newImages]);
+    };
+
+    const handleRemoveImage = (imageId: string) => {
+        setUploadedImages(prev => {
+            const newImages = prev.filter(img => img.id !== imageId);
+            return newImages;
+        });
+    };
+
+    React.useEffect(() => {
+        return () => {
+            uploadedImages.forEach(image => URL.revokeObjectURL(image.preview));
+        };
+    }, [uploadedImages]);
+
+    useEffect(() => {
+        if (triggerUsage && onUsageTriggered) {
+            handleSendMessageWithIntent('node_explain');
+            onUsageTriggered();
+        }
+    }, [triggerUsage]);
+
+    return (
+        <div 
+            className="fixed top-0 right-0 h-full shadow-lg bg-white
+                      transition-all duration-300 ease-in-out hover:shadow-xl text-gray-700" 
+            style={{ 
+                display: visible ? 'block' : 'none',
+                width: `${width}px`
+            }}
+        >
+            <div
+                className="absolute left-0 top-0 bottom-0 w-1 cursor-ew-resize hover:bg-gray-300 active:bg-gray-400"
+                onMouseDown={handleMouseDown}
+            />
+            
+            <div className="flex h-full flex-col">
+                <ChatHeader 
+                    onClose={onClose}
+                    onClear={handleClearMessages}
+                    hasMessages={messages.length > 0}
+                />
+                <div>
+                    {installedNodes.map((node: any) => (
+                        <div key={node.name}>{node.name}</div>
+                    ))}
+                </div>
+                
+                <div className="flex-1 overflow-y-auto p-4 scroll-smooth" ref={messageDivRef}>
+                    <MessageList 
+                        messages={messages}
+                        latestInput={latestInput}
+                        onOptionClick={handleOptionClick}
+                        installedNodes={installedNodes}
+                        onAddMessage={handleAddMessage}
+                        loading={loading}
+                    />
+                </div>
+
+                <div className="border-t px-4 py-3 border-gray-200 bg-white sticky bottom-0">
+                    {selectedNodeInfo && (
+                        <SelectedNodeInfo 
+                            nodeInfo={selectedNodeInfo}
+                            onSendWithIntent={handleSendMessageWithIntent}
+                            loading={loading}
+                        />
+                    )}
+
+                    <ChatInput 
+                        input={input}
+                        loading={loading}
+                        onChange={handleMessageChange}
+                        onSend={handleSendMessage}
+                        onKeyPress={handleKeyPress}
+                        onUploadImages={handleUploadImages}
+                        uploadedImages={uploadedImages}
+                        onRemoveImage={handleRemoveImage}
+                        selectedModel={selectedModel}
+                        onModelChange={setSelectedModel}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
new file mode 100644
index 0000000..71c2831
--- /dev/null
+++ b/ui/tailwind.config.js
@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+import typography from '@tailwindcss/typography'
+
+export default {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      animation: {
+        bounce: 'bounce 1s infinite',
+      },
+    },
+  },
+  plugins: [
+    typography,
+  ],
+}
\ No newline at end of file
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
new file mode 100644
index 0000000..8261f34
--- /dev/null
+++ b/ui/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "public/comfyui", "public/entry.js"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/ui/tsconfig.node.json b/ui/tsconfig.node.json
new file mode 100644
index 0000000..42872c5
--- /dev/null
+++ b/ui/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/ui/vite.config.ts b/ui/vite.config.ts
new file mode 100644
index 0000000..7494b8c
--- /dev/null
+++ b/ui/vite.config.ts
@@ -0,0 +1,79 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { exec } from 'child_process';
+
+const rewriteImportPlugin = ({ isDev }) => {
+  return {
+    name: "rewrite-import-plugin", // this name will show up in warnings and errors
+    resolveId(source) {
+      if (!isDev) {
+        return;
+      }
+      if (source === "/scripts/app.js") {
+        // Change the path to the new host
+        return "http://127.0.0.1:8188/scripts/app.js";
+      }
+      if (source === "/scripts/api.js") {
+        return "http://127.0.0.1:8188/scripts/api.js";
+      }
+      return null; // Other imports should not be affected
+    },
+  };
+};
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => ({
+  envDir: ".",
+  build: {
+    watch: mode === "development" ? {
+      include: ["src/**"],
+      buildStart() {
+        // 只在开发模式下启动 Tailwind CSS watch 进程
+        console.log("Starting Tailwind CSS watch process...");
+        const tailwindProcess = exec(
+          'npx tailwindcss -i ./src/input.css -o ./src/output.css --watch',
+          (error, stdout, stderr) => {
+            if (error) {
+              console.error(`Tailwind CSS watch error: ${error}`);
+              return;
+            }
+            if (stderr) {
+              console.error(`Tailwind CSS stderr: ${stderr}`);
+              return;
+            }
+            console.log(`Tailwind CSS stdout: ${stdout}`);
+          }
+        );
+
+        // Cleanup process on build end
+        process.on('exit', () => {
+          tailwindProcess.kill();
+        });
+        console.log("Tailwind CSS watch process started.");
+      }
+    } : undefined,  // 在生产环境下不启用 watch
+    // minify: false, // ___DEBUG__MODE only
+    // sourcemap: true, // ___DEBUG___MODE only
+    emptyOutDir: true,
+    rollupOptions: {
+      // externalize deps that shouldn't be bundled into your library
+      external: ["/scripts/app.js", "/scripts/api.js"],
+      input: {
+        input: "/src/main.tsx",
+      },
+      output: {
+        // Provide global variables to use in the UMD build for externalized deps
+        globals: {
+          app: "app",
+          Litegraph: "LiteGraph",
+        },
+        dir: "../dist",
+        // assetFileNames: "[name]-[hash][extname]",
+        entryFileNames: "copilot_web/[name].js",
+        chunkFileNames: `copilot_web/[name]-[hash].js`,
+        assetFileNames: `copilot_web/assets/[name]-[hash].[ext]`,
+      },
+    },
+  },
+  plugins: [react(), rewriteImportPlugin({ isDev: mode === "development" })],
+}));

+ + + + + + + + +

Set API Key

copilot

+ +
+ + + + + + +