@alquimia-ai/ui 1.8.2 → 1.8.4

package/dist/components/organisms/index.d.mts

@@ -44,6 +44,7 @@ interface AssistantMessageAreaProps extends React$1.HTMLAttributes<HTMLDivElemen
         additionalInfo?: string;
         loading?: boolean;
         tooler?: Tooler[];
+        stream_id?: string;
     })[];
     actions?: MessageAction[];
     messagesEndRef: any;

package/dist/components/organisms/index.d.ts

@@ -44,6 +44,7 @@ interface AssistantMessageAreaProps extends React$1.HTMLAttributes<HTMLDivElemen
         additionalInfo?: string;
         loading?: boolean;
         tooler?: Tooler[];
+        stream_id?: string;
     })[];
     actions?: MessageAction[];
     messagesEndRef: any;

package/dist/components/organisms/index.js

@@ -2531,6 +2531,7 @@ RatingComment.displayName = "RatingComment";
 
 // src/components/molecules/call-out.tsx
 var React33 = __toESM(require("react"));
+var import_lucide_react14 = require("lucide-react");
 
 // src/components/hooks/use-text-streaming.ts
 var import_react8 = require("react");
@@ -2661,10 +2662,26 @@ var CallOutActions = React33.forwardRef(({ className, actions, role, message, ..
   )) });
 });
 var CallOutResponse = React33.forwardRef(
-  ({ className, children, role, additionalInfo, isStreaming, handleIsTextStreaming, ...props }, ref) => {
+  ({
+    className,
+    children,
+    role,
+    additionalInfo,
+    toggleAdditionalInfo,
+    isStreaming,
+    handleIsTextStreaming,
+    ...props
+  }, ref) => {
+    const [isAdditionalInfoOpen, setIsAdditionalInfoOpen] = React33.useState(false);
     const content = String(children || "");
     const shouldStream = role === "assistant" && isStreaming;
-    const displayedContent = useTextStreaming(content, shouldStream ?? false, handleIsTextStreaming);
+    const displayedContent = useTextStreaming(
+      content,
+      shouldStream ?? false,
+      handleIsTextStreaming
+    );
+    const showAsToggle = additionalInfo && toggleAdditionalInfo;
+    const showInline = additionalInfo && !toggleAdditionalInfo;
     return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       "div",
       {
@@ -2679,16 +2696,52 @@ var CallOutResponse = React33.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RichText, { content: displayedContent }),
-          additionalInfo && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          showInline && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             "div",
             {
               className: cn(
                 "alq--callout-response-additional-info",
-                "mt-2 text-sm text-muted-foreground",
+                "mt-2 text-sm text-muted-foreground whitespace-pre-line",
                 "border-t border-border pt-2"
               ),
               children: additionalInfo
             }
+          ),
+          showAsToggle && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+            "div",
+            {
+              className: cn(
+                "alq--callout-response-additional-info",
+                "mt-2 border-t border-border pt-2"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-auto py-1.5 px-0 text-xs text-muted-foreground hover:bg-transparent hover:text-muted-foreground -ml-1",
+                    onClick: () => setIsAdditionalInfoOpen((prev) => !prev),
+                    "aria-expanded": isAdditionalInfoOpen,
+                    children: [
+                      isAdditionalInfoOpen ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react14.ChevronUp, { className: "h-4 w-4 mr-1.5 shrink-0 transition-transform" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react14.ChevronDown, { className: "h-4 w-4 mr-1.5 shrink-0 transition-transform" }),
+                      isAdditionalInfoOpen ? "Hide details" : "Show details"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                  "div",
+                  {
+                    className: cn(
+                      "grid transition-[grid-template-rows] duration-200 ease-out",
+                      isAdditionalInfoOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "text-sm text-muted-foreground pt-1 whitespace-pre-line", children: additionalInfo }) })
+                  }
+                )
+              ]
+            }
           )
         ]
       }
@@ -2701,7 +2754,7 @@ CallOutActions.displayName = "CallOutActions";
 CallOutResponse.displayName = "CallOutResponse";
 
 // src/components/organisms/assistant.tsx
-var import_lucide_react14 = require("lucide-react");
+var import_lucide_react15 = require("lucide-react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var Assistant = React34.forwardRef(
   ({ className, sdk, title, description, children, ...props }, ref) => {
@@ -2777,7 +2830,9 @@ var AssistantMessageArea = React34.forwardRef(
                   {
                     role: "assistant",
                     "data-error-code": message.error_code,
-                    additionalInfo: showDetailedErrors ? message.error_detail : void 0,
+                    additionalInfo: showDetailedErrors ? `${message.error_detail}
+stream id: ${message.stream_id}` : void 0,
+                    toggleAdditionalInfo: true,
                     children: getErrorMessage(message.error_code)
                   }
                 ),
@@ -2885,7 +2940,7 @@ var AssistantInput = React34.forwardRef(
                   "w-10 h-10 rounded-full flex items-center justify-center alq--assistant-button-send",
                   isButtonDisabled ? "bg-muted text-muted-foreground" : "bg-primary text-primary-foreground hover:bg-primary/90"
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react14.Send, { className: "w-5 h-5" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react15.Send, { className: "w-5 h-5" })
               }
             )
           ] })