@alquimia-ai/ui 1.8.2 → 1.8.4

package/dist/components/molecules/index.mjs

@@ -2190,6 +2190,7 @@ RatingComment.displayName = "RatingComment";
 
 // src/components/molecules/call-out.tsx
 import * as React33 from "react";
+import { ChevronDown as ChevronDown3, ChevronUp as ChevronUp2 } from "lucide-react";
 
 // src/components/hooks/use-text-streaming.ts
 import { useState as useState8, useEffect as useEffect8, useRef, useCallback as useCallback2 } from "react";
@@ -2320,10 +2321,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__ */ jsxs18(
       "div",
       {
@@ -2338,16 +2355,52 @@ var CallOutResponse = React33.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsx40(RichText, { content: displayedContent }),
-          additionalInfo && /* @__PURE__ */ jsx40(
+          showInline && /* @__PURE__ */ jsx40(
             "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__ */ jsxs18(
+            "div",
+            {
+              className: cn(
+                "alq--callout-response-additional-info",
+                "mt-2 border-t border-border pt-2"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs18(
+                  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__ */ jsx40(ChevronUp2, { className: "h-4 w-4 mr-1.5 shrink-0 transition-transform" }) : /* @__PURE__ */ jsx40(ChevronDown3, { className: "h-4 w-4 mr-1.5 shrink-0 transition-transform" }),
+                      isAdditionalInfoOpen ? "Hide details" : "Show details"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx40(
+                  "div",
+                  {
+                    className: cn(
+                      "grid transition-[grid-template-rows] duration-200 ease-out",
+                      isAdditionalInfoOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+                    ),
+                    children: /* @__PURE__ */ jsx40("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx40("div", { className: "text-sm text-muted-foreground pt-1 whitespace-pre-line", children: additionalInfo }) })
+                  }
+                )
+              ]
+            }
           )
         ]
       }