feat: finally I solved the style issue.

dist/copilot_web/App-CaUNdek8.js

@@ -1,6 +0,0 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["copilot_web/workflowChat-CxaqNMNl.js","copilot_web/vendor-markdown-Dek94WS0.js","copilot_web/vendor-react-V04_Axys.js","copilot_web/message-components-Nlko-0DO.js","copilot_web/input.js","copilot_web/assets/input-Bc399EcZ.css"].map(path => {
-                        const apiBase = window.comfyAPI?.api?.api?.api_base;
-                        const prefix = apiBase ? `${apiBase.substring(1)}/` : '';
-                        return `${prefix}${path}`;
-                    }))))=>i.map(i=>d[i]);
-import{_ as x}from"./input.js";import{j as n}from"./vendor-markdown-Dek94WS0.js";import{r as o,R as f}from"./vendor-react-V04_Axys.js";import{C as b}from"./message-components-Nlko-0DO.js";const w=9999999,m={EXPLAIN_NODE:"copilot:explain-node"},E="/copilot_web/assets/logo-BTZhX0BN.png";function v(t={}){const[d,i]=o.useState({x:t.initialX??window.innerWidth-160,y:t.initialY??20}),[r,a]=o.useState(!1),[s,u]=o.useState({x:0,y:0});return o.useEffect(()=>{const e=g=>{if(r){const p=Math.min(Math.max(0,g.clientX-s.x),window.innerWidth-(t.boundaryPadding?.right??100)),h=Math.min(Math.max(0,g.clientY-s.y),window.innerHeight-(t.boundaryPadding?.bottom??40));i({x:p,y:h})}},l=()=>{a(!1)};return r&&(document.addEventListener("mousemove",e),document.addEventListener("mouseup",l)),()=>{document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",l)}},[r,s,t.boundaryPadding]),{position:d,isDragging:r,handleMouseDown:e=>{e.preventDefault(),a(!0);const l=e.currentTarget.getBoundingClientRect();u({x:e.clientX-l.left,y:e.clientY-l.top})}}}const y=f.lazy(()=>x(()=>import("./workflowChat-CxaqNMNl.js"),__vite__mapDeps([0,1,2,3,4,5])).then(t=>({default:t.default})));function _(){const t=o.useRef(null),[d,i]=o.useState(!1),[r,a]=o.useState(!1),{position:s,isDragging:u,handleMouseDown:c}=v({boundaryPadding:{right:100,bottom:40}});return o.useEffect(()=>{const e=()=>{i(!0),a(!0)};return window.addEventListener(m.EXPLAIN_NODE,e),()=>window.removeEventListener(m.EXPLAIN_NODE,e)},[]),s?n.jsx(b,{children:n.jsx("div",{ref:t,children:n.jsxs("div",{className:"fixed",style:{zIndex:w,left:s.x,top:s.y,cursor:u?"grabbing":"grab"},children:[n.jsxs("button",{onMouseDown:c,onClick:()=>i(!0),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"},children:[n.jsx("img",{src:E,alt:"ComfyUI-Copilot Logo",className:"h-8 w-8"}),n.jsx("span",{className:"text-[14px] font-medium text-gray-800",children:"ComfyUI-Copilot"})]}),n.jsx(f.Suspense,{fallback:n.jsx("div",{children:"Loading..."}),children:n.jsx(y,{onClose:()=>{i(!1),a(!1)},visible:d,triggerUsage:r,onUsageTriggered:()=>a(!1)})})]})})}):null}const j=Object.freeze(Object.defineProperty({__proto__:null,default:_},Symbol.toStringTag,{value:"Module"}));export{j as A,E as l};

dist/copilot_web/WorkflowOption-D3X28qdQ.js

@@ -1 +0,0 @@
-import{j as e}from"./vendor-markdown-Dek94WS0.js";import{W as f,g as h,a as l}from"./message-components-Nlko-0DO.js";import"./vendor-react-V04_Axys.js";function A({content:g,name:k="Assistant",avatar:b,latestInput:x,installedNodes:w,onAddMessage:d}){const c=JSON.parse(g).ext?.find(o=>o.type==="workflow")?.data||[],u=async o=>{if(!o.id){console.error("No workflow id provided");return}try{const t=await f.getOptimizedWorkflow(o.id,x);if(t.workflow){const n=new Set;for(const s of t.workflow.nodes)n.add(s.type);const r=Array.from(n).filter(s=>!w.includes(s));if(console.log("[WorkflowOption] Missing node types:",r),r.length>0)try{console.log("[WorkflowOption] Fetching info for missing nodes");const s=await f.batchGetNodeInfo(r);console.log("[WorkflowOption] Received node infos:",s);const m={text:"",ext:[{type:"node_install_guide",data:s.map(a=>({name:a.name,repository_url:a.github_url}))}]},i={id:h(),role:"ai",content:JSON.stringify(m),format:"markdown",name:"Assistant",metadata:{pendingWorkflow:t.workflow,optimizedParams:t.optimized_params}};d?.(i);return}catch(s){console.error("[WorkflowOption] Error fetching node info:",s),alert("Error checking required nodes. Please try again.");return}v(t.workflow,t.optimized_params)}}catch(t){console.error("Failed to optimize workflow:",t)}},v=(o,t)=>{l.loadGraphData(o);for(const[r,s,m,i,a]of t){const y=l.graph._nodes_by_id[r].widgets;for(const p of y)p.name===i&&(p.value=a)}l.graph.setDirtyCanvas(!1,!0);const n={id:h(),role:"tool",content:JSON.stringify({text:"The workflow has been successfully loaded to the canvas",ext:[]}),format:"markdown",name:"Assistant"};d?.(n)};return e.jsx("div",{className:"space-y-3",children:c.length>0&&e.jsx("div",{className:"flex flex-col space-y-4",children:c.map((o,t)=>e.jsxs("div",{className:"flex items-center gap-4 p-4 rounded-lg border border-gray-200 hover:bg-gray-50",children:[o.image&&e.jsx("img",{src:o.image,alt:o.name,className:"w-14 h-14 object-cover rounded-lg",onError:n=>{const r=n.target;r.onerror=null,r.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"}}),e.jsxs("div",{className:"flex-1 break-words flex flex-col h-[4.5rem] justify-between",children:[e.jsx("div",{children:e.jsx("h3",{className:"font-medium text-sm line-clamp-2 h-10 overflow-hidden",children:o.name})}),e.jsxs("div",{className:"flex justify-between items-center mt-1",children:[o.description&&e.jsxs("div",{className:"relative group",children:[e.jsx("div",{className:"w-5 h-5 flex items-center justify-center text-gray-500 cursor-help",children:e.jsx("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",children:e.jsx("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"})})}),e.jsx("div",{className:"absolute bottom-full left-0 mb-2 hidden group-hover:block",children:e.jsx("div",{className:"bg-gray-900 text-white text-xs rounded-md py-2 px-3 min-w-[400px] whitespace-normal break-words",children:o.description})})]}),e.jsx("button",{onClick:()=>u(o),className:"px-3 py-1.5 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors text-xs",children:"Accept"})]})]})]},t))})})}export{A as WorkflowOption};

dist/copilot_web/input.js

@@ -1,2 +0,0 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["copilot_web/App-CaUNdek8.js","copilot_web/vendor-markdown-Dek94WS0.js","copilot_web/vendor-react-V04_Axys.js","copilot_web/message-components-Nlko-0DO.js"])))=>i.map(i=>d[i]);
-import{j as u}from"./vendor-markdown-Dek94WS0.js";import{a as v,R as p}from"./vendor-react-V04_Axys.js";import{w}from"./message-components-Nlko-0DO.js";const R="modulepreload",b=function(e){return"/"+e},m={},P=function(a,s,S){let d=Promise.resolve();if(s&&s.length>0){document.getElementsByTagName("link");const r=document.querySelector("meta[property=csp-nonce]"),t=r?.nonce||r?.getAttribute("nonce");d=Promise.allSettled(s.map(o=>{if(o=b(o),o in m)return;m[o]=!0;const c=o.endsWith(".css"),h=c?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${o}"]${h}`))return;const n=document.createElement("link");if(n.rel=c?"stylesheet":R,c||(n.as="script"),n.crossOrigin="",n.href=o,t&&n.setAttribute("nonce",t),document.head.appendChild(n),c)return new Promise((y,E)=>{n.addEventListener("load",y),n.addEventListener("error",()=>E(new Error(`Unable to preload CSS for ${o}`)))})}))}function l(r){const t=new Event("vite:preloadError",{cancelable:!0});if(t.payload=r,window.dispatchEvent(t),!t.defaultPrevented)throw r}return d.then(r=>{for(const t of r||[])t.status==="rejected"&&l(t.reason);return a().catch(l)})};var i={},f=v;i.createRoot=f.createRoot,i.hydrateRoot=f.hydrateRoot;const _=p.lazy(()=>P(async()=>{const{default:e}=await import("./App-CaUNdek8.js").then(a=>a.A);return{default:e}},__vite__mapDeps([0,1,2,3])).then(({default:e})=>({default:e})));function A(){return new Promise(e=>{if(document.body)return e(document.body);document.addEventListener("DOMContentLoaded",()=>{e(document.body)})})}A().then(()=>w()).then(()=>{const e=document.createElement("div");e.id="comfyui-copilot-plugin",document.body.append(e),i.createRoot(e).render(u.jsx(p.StrictMode,{children:u.jsx(_,{})}))});export{P as _};

dist/copilot_web/vendor-ui-Dzvx2fKw.js

@@ -1 +0,0 @@
-import"./vendor-react-V04_Axys.js";

ui/src/App.tsx

@@ -18,7 +18,8 @@ export default function App() {
   const [shouldTriggerUsage, setShouldTriggerUsage] = useState(false);
 
   const { position, isDragging, handleMouseDown } = useDraggable({
-    boundaryPadding: { right: 100, bottom: 40 }
+    boundaryPadding: { right: 100, bottom: 40 },
+    onClick: () => setShowChat(true)
   });
 
   useEffect(() => {
@@ -47,7 +48,6 @@ export default function App() {
         >
           <button 
             onMouseDown={handleMouseDown}
-            onClick={() => setShowChat(true)}
             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" }}
           >

ui/src/hooks/useDraggable.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 
 interface Position {
   x: number;
@@ -12,6 +12,7 @@ interface DragConfig {
     right?: number;
     bottom?: number;
   };
+  onClick?: () => void;
 }
 
 export function useDraggable(config: DragConfig = {}) {
@@ -20,27 +21,41 @@ export function useDraggable(config: DragConfig = {}) {
     y: config.initialY ?? 20
   });
   const [isDragging, setIsDragging] = useState(false);
+  const [startPos, setStartPos] = useState({ x: 0, y: 0 });
+  const [startTime, setStartTime] = useState(0);
   const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
 
-  useEffect(() => {
-    const handleMouseMove = (e: MouseEvent) => {
-      if (isDragging) {
-        const newX = Math.min(
-          Math.max(0, e.clientX - dragOffset.x), 
-          window.innerWidth - (config.boundaryPadding?.right ?? 100)
-        );
-        const newY = Math.min(
-          Math.max(0, e.clientY - dragOffset.y), 
-          window.innerHeight - (config.boundaryPadding?.bottom ?? 40)
-        );
-        setPosition({ x: newX, y: newY });
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (isDragging) {
+      const newX = Math.min(
+        Math.max(0, e.clientX - dragOffset.x), 
+        window.innerWidth - (config.boundaryPadding?.right ?? 100)
+      );
+      const newY = Math.min(
+        Math.max(0, e.clientY - dragOffset.y), 
+        window.innerHeight - (config.boundaryPadding?.bottom ?? 40)
+      );
+      setPosition({ x: newX, y: newY });
+    }
+  }, [isDragging, dragOffset, config.boundaryPadding]);
+
+  const handleMouseUp = useCallback((e: MouseEvent) => {
+    if (isDragging) {
+      const moveDistance = Math.sqrt(
+        Math.pow(e.clientX - startPos.x, 2) + 
+        Math.pow(e.clientY - startPos.y, 2)
+      );
+      const timeElapsed = Date.now() - startTime;
+
+      // 如果移动距离小于 5px 且时间小于 200ms，则认为是点击
+      if (moveDistance < 5 && timeElapsed < 200) {
+        config.onClick?.();
       }
-    };
-
-    const handleMouseUp = () => {
-      setIsDragging(false);
-    };
+    }
+    setIsDragging(false);
+  }, [isDragging, startPos, startTime, config.onClick]);
 
+  useEffect(() => {
     if (isDragging) {
       document.addEventListener('mousemove', handleMouseMove);
       document.addEventListener('mouseup', handleMouseUp);
@@ -50,11 +65,14 @@ export function useDraggable(config: DragConfig = {}) {
       document.removeEventListener('mousemove', handleMouseMove);
       document.removeEventListener('mouseup', handleMouseUp);
     };
-  }, [isDragging, dragOffset, config.boundaryPadding]);
+  }, [isDragging, handleMouseMove, handleMouseUp]);
 
   const handleMouseDown = (e: React.MouseEvent) => {
     e.preventDefault();
     setIsDragging(true);
+    setStartTime(Date.now());
+    setStartPos({ x: e.clientX, y: e.clientY });
+    
     const buttonRect = e.currentTarget.getBoundingClientRect();
     setDragOffset({
       x: e.clientX - buttonRect.left,