@kuntur/a2a-carbon-chat-adapter 0.1.7 → 0.1.8

package/dist/index.cjs

@@ -1784,6 +1784,13 @@ function A2AChat({
   const instanceRef = react.useRef(null);
   const translatorRef = react.useRef(null);
   const abortControllerRef = react.useRef(null);
+  const [isViewOpen, setIsViewOpen] = react.useState(true);
+  const [showExternalLauncher, setShowExternalLauncher] = react.useState(false);
+  const [sidebarClosing, setSidebarClosing] = react.useState(false);
+  const layoutRef = react.useRef(layout);
+  react.useEffect(() => {
+    layoutRef.current = layout;
+  }, [layout]);
   react.useEffect(() => {
     if (typeof window !== "undefined") {
       import('@carbon/ai-chat').then((mod) => {
@@ -1800,6 +1807,40 @@ function A2AChat({
   react.useEffect(() => {
     onConnectionChange?.(connectionState);
   }, [connectionState, onConnectionChange]);
+  const SIDEBAR_ANIMATION_MS = 250;
+  const onViewChange = react.useCallback(
+    (event) => {
+      const currentLayout = layoutRef.current;
+      setIsViewOpen(event.newViewState.mainWindow);
+      if (currentLayout === "sidebar") {
+        if (event.newViewState.mainWindow) {
+          setShowExternalLauncher(false);
+          setSidebarClosing(false);
+          onOpen?.();
+        } else {
+          setSidebarClosing(false);
+          setShowExternalLauncher(true);
+          onClose?.();
+        }
+      }
+    },
+    [onOpen, onClose]
+  );
+  const onViewPreChange = react.useCallback(
+    async (event) => {
+      if (layoutRef.current === "sidebar" && !event.newViewState.mainWindow) {
+        setSidebarClosing(true);
+        await new Promise((resolve) => setTimeout(resolve, SIDEBAR_ANIMATION_MS));
+      }
+    },
+    []
+  );
+  const handleOpenSidebar = react.useCallback(() => {
+    const instance = instanceRef.current;
+    if (instance?.actions?.changeView) {
+      instance.actions.changeView("MAIN_WINDOW");
+    }
+  }, []);
   const handleSendMessage = react.useCallback(
     async (message) => {
       if (!agent) {
@@ -1952,6 +1993,21 @@ function A2AChat({
     instanceRef.current = instance;
     console.log("[A2AChat] Chat instance ready");
   }, []);
+  const elementClassName = react.useMemo(() => {
+    const classes = ["a2a-chat__element"];
+    if (layout === "sidebar") {
+      classes.push("a2a-chat__element--sidebar");
+      if (sidebarClosing) {
+        classes.push("a2a-chat__element--sidebar-closing");
+      }
+    } else if (layout === "fullscreen") {
+      classes.push("a2a-chat__element--fullscreen");
+    }
+    if (!isViewOpen) {
+      classes.push("cds-aichat--hidden");
+    }
+    return classes.join(" ");
+  }, [layout, isViewOpen, sidebarClosing]);
   if (!agent) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `a2a-chat a2a-chat--error ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No agent configured. Provide `agent`, `agentId`, or `agentUrl` prop." }) });
   }
@@ -2005,7 +2061,7 @@ function A2AChat({
         ChatCustomElement,
         {
           ...{
-            className: "a2a-chat__element",
+            className: elementClassName,
             debug: false,
             aiEnabled: true,
             openChatByDefault: true,
@@ -2022,6 +2078,8 @@ function A2AChat({
             showFrame: layout === "float",
             showCloseAndRestartButton: layout !== "fullscreen"
           },
+          onViewChange,
+          onViewPreChange,
           onAfterRender: handleAfterRender,
           renderUserDefinedResponse: renderCustomResponse,
           messaging: {
@@ -2036,6 +2094,29 @@ function A2AChat({
           }
         }
       ),
+      layout === "sidebar" && showExternalLauncher && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "a2a-chat__external-launcher",
+          onClick: handleOpenSidebar,
+          "aria-label": "Open chat",
+          title: "Open chat",
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              width: "24",
+              height: "24",
+              viewBox: "0 0 32 32",
+              fill: "currentColor",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17.74 30L16 29l4-7h6a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h9v2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4h20a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4h-4.84Z" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 10h16v2H8zM8 16h10v2H8z" })
+              ]
+            }
+          )
+        }
+      ),
       formOverlay
     ] });
   }