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

package/dist/index.cjs

@@ -627,6 +627,8 @@ var A2AToCarbonTranslator = class {
       responseId: this.generateResponseId(),
       itemId: "1",
       accumulatedText: "",
+      accumulatedThinking: "",
+      // Initialize empty for streaming thinking tokens
       reasoningSteps: [],
       chainOfThought: [],
       pendingToolCalls: /* @__PURE__ */ new Map(),
@@ -688,6 +690,12 @@ var A2AToCarbonTranslator = class {
   getAccumulatedText() {
     return this.state.accumulatedText;
   }
+  /**
+   * Get accumulated thinking content (for reasoning.content mode)
+   */
+  getAccumulatedThinking() {
+    return this.state.accumulatedThinking;
+  }
   /**
    * Get current reasoning steps
    */
@@ -742,7 +750,7 @@ var A2AToCarbonTranslator = class {
       }
     };
     if (includeReasoning) {
-      chunk.partial_response.message_options.reasoning = { steps: [] };
+      chunk.partial_response.message_options.reasoning = { content: "" };
     }
     return chunk;
   }
@@ -860,17 +868,58 @@ var A2AToCarbonTranslator = class {
     return null;
   }
   /**
-   * Translate thinking/reasoning content to Carbon reasoning step
+   * Translate thinking/reasoning content to Carbon format
+   *
+   * ROUTING LOGIC:
+   * - content_type='thinking' (no title) → reasoning.content (streaming)
+   * - content_type='reasoning_step' WITH title → reasoning.steps[] (discrete)
    */
   translateThinkingPart(text, metadata) {
-    const stepNumber = metadata?.step;
+    const contentType = metadata?.content_type;
     const stepTitle = metadata?.title;
+    if (contentType === "thinking" || !stepTitle) {
+      this.state.accumulatedThinking += text;
+      console.log("[Translator] Streaming thinking token:", {
+        tokenLength: text.length,
+        totalLength: this.state.accumulatedThinking.length
+      });
+      return {
+        partial_item: {
+          response_type: MessageResponseTypes.TEXT,
+          text: "",
+          streaming_metadata: {
+            id: this.state.itemId,
+            cancellable: true
+          }
+        },
+        partial_response: {
+          message_options: {
+            response_user_profile: this.agentProfile,
+            reasoning: {
+              content: this.state.accumulatedThinking,
+              // Stream to content
+              // Preserve any existing discrete steps
+              steps: this.state.reasoningSteps.length > 0 ? this.state.reasoningSteps : void 0
+            }
+          }
+        },
+        streaming_metadata: {
+          response_id: this.state.responseId
+        }
+      };
+    }
     const newStep = {
-      title: stepTitle || `Thinking Step ${(stepNumber ?? this.state.reasoningSteps.length) + 1}`,
+      title: stepTitle,
+      // No fallback - only real titles become discrete steps
       content: text,
       open_state: "default" /* DEFAULT */
     };
     this.state.reasoningSteps.push(newStep);
+    console.log("[Translator] Added discrete reasoning step:", {
+      title: stepTitle,
+      textLength: text.length,
+      totalSteps: this.state.reasoningSteps.length
+    });
     return {
       partial_item: {
         response_type: MessageResponseTypes.TEXT,
@@ -884,9 +933,10 @@ var A2AToCarbonTranslator = class {
         message_options: {
           response_user_profile: this.agentProfile,
           reasoning: {
+            // Include accumulated streaming content if any
+            content: this.state.accumulatedThinking || void 0,
             steps: this.state.reasoningSteps,
             open_state: "default" /* DEFAULT */
-            // Auto-expand during streaming
           }
         }
       },
@@ -1065,6 +1115,14 @@ var A2AToCarbonTranslator = class {
    * Optional but useful for accessibility and corrections.
    */
   createCompleteItem(wasStopped = false) {
+    const hasThinking = this.state.accumulatedThinking.length > 0;
+    const hasSteps = this.state.reasoningSteps.length > 0;
+    const reasoning = hasThinking || hasSteps ? {
+      content: hasThinking ? this.state.accumulatedThinking : void 0,
+      steps: hasSteps ? this.state.reasoningSteps : void 0,
+      open_state: "close" /* CLOSE */
+      // Collapse after completion
+    } : void 0;
     return {
       complete_item: {
         response_type: MessageResponseTypes.TEXT,
@@ -1077,11 +1135,7 @@ var A2AToCarbonTranslator = class {
       partial_response: {
         message_options: {
           response_user_profile: this.agentProfile,
-          reasoning: this.state.reasoningSteps.length > 0 ? {
-            steps: this.state.reasoningSteps,
-            open_state: "close" /* CLOSE */
-            // Collapse after completion
-          } : void 0,
+          reasoning,
           chain_of_thought: this.state.chainOfThought.length > 0 ? this.state.chainOfThought : void 0
         }
       },
@@ -1097,6 +1151,14 @@ var A2AToCarbonTranslator = class {
    * Without this, the UI will remain in a loading state.
    */
   createFinalResponse() {
+    const hasThinking = this.state.accumulatedThinking.length > 0;
+    const hasSteps = this.state.reasoningSteps.length > 0;
+    const reasoning = hasThinking || hasSteps ? {
+      content: hasThinking ? this.state.accumulatedThinking : void 0,
+      steps: hasSteps ? this.state.reasoningSteps : void 0,
+      open_state: "close" /* CLOSE */
+      // Collapse after completion
+    } : void 0;
     return {
       final_response: {
         id: this.state.responseId,
@@ -1113,11 +1175,7 @@ var A2AToCarbonTranslator = class {
         },
         message_options: {
           response_user_profile: this.agentProfile,
-          reasoning: this.state.reasoningSteps.length > 0 ? {
-            steps: this.state.reasoningSteps,
-            open_state: "close" /* CLOSE */
-            // Collapse after completion
-          } : void 0,
+          reasoning,
           chain_of_thought: this.state.chainOfThought.length > 0 ? this.state.chainOfThought : void 0
         }
       }
@@ -1726,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) => {
@@ -1742,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) {
@@ -1894,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." }) });
   }
@@ -1947,7 +2061,7 @@ function A2AChat({
         ChatCustomElement,
         {
           ...{
-            className: "a2a-chat__element",
+            className: elementClassName,
             debug: false,
             aiEnabled: true,
             openChatByDefault: true,
@@ -1964,6 +2078,8 @@ function A2AChat({
             showFrame: layout === "float",
             showCloseAndRestartButton: layout !== "fullscreen"
           },
+          onViewChange,
+          onViewPreChange,
           onAfterRender: handleAfterRender,
           renderUserDefinedResponse: renderCustomResponse,
           messaging: {
@@ -1978,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
     ] });
   }