integrate into sidebar

Author: christian-byrne

ui/src/App.tsx

@@ -1,76 +1,36 @@
 // Copyright (C) 2025 AIDC-AI
 // Licensed under the MIT License.
 
-import React, { useRef, useState, useEffect } from "react";
-import { DRAWER_Z_INDEX } from "./const";
+import React, { useState, useEffect, Suspense } from "react";
 import { COPILOT_EVENTS } from "./constants/events";
-import logoImage from '../../assets/logo.png'; 
 import { ChatProvider } from './context/ChatContext';
-import { useDraggable } from './hooks/useDraggable';
 
 const WorkflowChat = React.lazy(() => import("./workflowChat/workflowChat").then(module => ({
   default: module.default
 })));
 
 export default function App() {
-  const workspaceContainerRef = useRef(null);
-  const [showChat, setShowChat] = useState(false);
   const [shouldTriggerUsage, setShouldTriggerUsage] = useState(false);
 
-  const { position, isDragging, handleMouseDown } = useDraggable({
-    boundaryPadding: { right: 100, bottom: 40 },
-    onClick: () => setShowChat(true)
-  });
-
   useEffect(() => {
     const handleExplainNode = () => {
-      setShowChat(true);
       setShouldTriggerUsage(true);
     };
 
     window.addEventListener(COPILOT_EVENTS.EXPLAIN_NODE, handleExplainNode);
     return () => window.removeEventListener(COPILOT_EVENTS.EXPLAIN_NODE, handleExplainNode);
   }, []);
 
-  if (!position) return null;
-
   return (
     <ChatProvider>
-      <div ref={workspaceContainerRef}>
-        <div 
-          className="fixed" 
-          style={{ 
-            zIndex: DRAWER_Z_INDEX,
-            left: position.x,
-            top: position.y,
-            cursor: isDragging ? 'grabbing' : 'grab'
-          }}
-        >
-          <button 
-            onMouseDown={handleMouseDown}
-            className="px-2 py-1 border border-gray-300 rounded-md bg-white text-black hover:bg-blue-300 hover:font-bold transition-colors select-none w-40 flex items-center space-x-1"
-            style={{ marginLeft: "-40px" }}
-          >
-            <img 
-              src={logoImage}
-              alt="ComfyUI-Copilot Logo" 
-              className="h-8 w-8"
-            />
-            <span className="text-[14px] font-medium text-gray-800">ComfyUI-Copilot</span>
-          </button>
-          
-          <React.Suspense fallback={<div>Loading...</div>}>
-            <WorkflowChat 
-              onClose={() => {
-                setShowChat(false);
-                setShouldTriggerUsage(false);
-              }}
-              visible={showChat}
-              triggerUsage={shouldTriggerUsage}
-              onUsageTriggered={() => setShouldTriggerUsage(false)}
-            />
-          </React.Suspense>
-        </div>
+      <div className="h-full w-full">
+        <Suspense fallback={<div>Loading...</div>}>
+          <WorkflowChat 
+            visible={true}
+            triggerUsage={shouldTriggerUsage}
+            onUsageTriggered={() => setShouldTriggerUsage(false)}
+          />
+        </Suspense>
       </div>
     </ChatProvider>
   );

ui/src/components/chat/ChatHeader.tsx

@@ -69,14 +69,6 @@ export function ChatHeader({
 
     return (
         <>
-            <div 
-                className="absolute top-0 left-0 right-0 h-2 bg-gray-100 hover:bg-gray-300 
-                          transition-colors duration-200 cursor-ns-resize z-20"
-                onMouseDown={handleMouseDown}
-                style={{ 
-                    borderBottom: '1px solid #e5e7eb',
-                }}
-            />
             <div className="flex items-center justify-between border-b px-4 py-3 
                         bg-white border-gray-200 sticky top-2 z-10">
                 <div className="flex items-center space-x-2">

ui/src/main.tsx

@@ -9,7 +9,7 @@
 // Copyright (C) 2025 AIDC-AI
 // Licensed under the MIT License.
 
-import React from "react";
+import React, { Suspense } from "react";
 import ReactDOM from "react-dom/client";
 import { waitForApp } from "./utils/comfyapp.ts";
 import "./scoped-tailwind.css";
@@ -35,13 +35,23 @@ function waitForDocumentBody() {
 waitForDocumentBody()
   .then(() => waitForApp())
   .then(() => {
-    // todo： 创建一个web component
-    const topbar = document.createElement("div");
-    topbar.id = "comfyui-copilot-plugin";
-    document.body.append(topbar);
-    ReactDOM.createRoot(topbar).render(
-      <React.StrictMode>
-        <App />
-      </React.StrictMode>,
-    );
+    app.extensionManager.registerSidebarTab({
+      id: "comfyui-copilot",
+      icon: "mdi mdi-robot-excited-outline",
+      title: "ComfyUI Copilot",
+      tooltip: "ComfyUI Copilot",
+      type: "custom",
+      render: (el: HTMLElement) => {
+        const container = document.createElement("div");
+        container.id = "comfyui-copilot-plugin";
+        el.appendChild(container);
+        ReactDOM.createRoot(container).render(
+          <React.StrictMode>
+            <Suspense fallback={<div>Loading...</div>}>
+              <App />
+            </Suspense>
+          </React.StrictMode>,
+        );
+      },
+    });
   });

ui/src/workflowChat/workflowChat.tsx

@@ -12,7 +12,6 @@
 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";
@@ -24,7 +23,6 @@ import React from "react";
 import { debounce } from "lodash";
 import { useChatContext } from '../context/ChatContext';
 import { useMousePosition } from '../hooks/useMousePosition';
-import { useResizable } from '../hooks/useResizable';
 import { useNodeSelection } from '../hooks/useNodeSelection';
 import { MemoizedReactMarkdown } from "../components/markdown";
 import remarkGfm from 'remark-gfm';
@@ -172,17 +170,6 @@ export default function WorkflowChat({ onClose, visible = true, triggerUsage = f
     useNodeSelection(visible);
 
     // 使用自定义 hooks
-    const { 
-        isResizing: resizableIsResizing, 
-        setIsResizing: resizableSetIsResizing, 
-        dimensions, 
-        handleHeightResize 
-    } = useResizable({
-        minWidth: 300,
-        maxWidth: window.innerWidth * 0.8,
-        minHeight: 300,
-        maxHeight: window.innerHeight
-    }, visible);
 
     useEffect(() => {
         if (messageDivRef.current) {
@@ -579,30 +566,24 @@ export default function WorkflowChat({ onClose, visible = true, triggerUsage = f
         <ParameterDebugTab />
     ), []);
 
+    if (!visible) return null;
+
     return (
         <div 
-            className="fixed right-0 shadow-lg bg-white duration-200 ease-out"
+            className="flex flex-col h-full w-full bg-white"
             style={{ 
                 display: visible ? 'block' : 'none',
-                width: `${dimensions.width}px`,
-                height: `${dimensions.height}px`,
-                top: `${dimensions.top}px`
             }}
         >
             <div
                 className="absolute left-0 top-0 bottom-0 w-1 cursor-ew-resize hover:bg-gray-300"
-                onMouseDown={(e) => {
-                    resizableSetIsResizing(true);
-                    e.preventDefault();
-                }}
             />
 
             <div className="flex h-full flex-col">
                 <ChatHeader 
                     onClose={onClose}
                     onClear={handleClearMessages}
                     hasMessages={messages.length > 0}
-                    onHeightResize={handleHeightResize}
                     title={`ComfyUI-Copilot`}
                 />