@alquimia-ai/ui 1.8.2 → 1.8.4

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

@@ -139,6 +139,7 @@ declare const CallOutActions: React$1.ForwardRefExoticComponent<React$1.HTMLAttr
 declare const CallOutResponse: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
     role: Message["role"];
     additionalInfo?: string;
+    toggleAdditionalInfo?: boolean;
     isStreaming?: boolean;
     handleIsTextStreaming?: (isStreaming: boolean) => void;
 } & React$1.RefAttributes<HTMLDivElement>>;

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

@@ -139,6 +139,7 @@ declare const CallOutActions: React$1.ForwardRefExoticComponent<React$1.HTMLAttr
 declare const CallOutResponse: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
     role: Message["role"];
     additionalInfo?: string;
+    toggleAdditionalInfo?: boolean;
     isStreaming?: boolean;
     handleIsTextStreaming?: (isStreaming: boolean) => void;
 } & React$1.RefAttributes<HTMLDivElement>>;

package/dist/components/molecules/index.js

@@ -2265,6 +2265,7 @@ RatingComment.displayName = "RatingComment";
 
 // src/components/molecules/call-out.tsx
 var React33 = __toESM(require("react"));
+var import_lucide_react13 = require("lucide-react");
 
 // src/components/hooks/use-text-streaming.ts
 var import_react6 = require("react");
@@ -2395,10 +2396,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_runtime40.jsxs)(
       "div",
       {
@@ -2413,16 +2430,52 @@ var CallOutResponse = React33.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(RichText, { content: displayedContent }),
-          additionalInfo && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          showInline && /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsxs)(
+            "div",
+            {
+              className: cn(
+                "alq--callout-response-additional-info",
+                "mt-2 border-t border-border pt-2"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsx)(import_lucide_react13.ChevronUp, { className: "h-4 w-4 mr-1.5 shrink-0 transition-transform" }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react13.ChevronDown, { className: "h-4 w-4 mr-1.5 shrink-0 transition-transform" }),
+                      isAdditionalInfoOpen ? "Hide details" : "Show details"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "text-sm text-muted-foreground pt-1 whitespace-pre-line", children: additionalInfo }) })
+                  }
+                )
+              ]
+            }
           )
         ]
       }