@btst/stack 1.4.0 → 1.4.1

package/dist/node_modules/.pnpm/@radix-ui_react-collapsible@1.1.12_@types_react-dom@19.2.3_@types_react@19.2.6__@types__d025a77f62ee83ca6bd8b0ea1f9de738/node_modules/@radix-ui/react-collapsible/dist/index.cjs

@@ -0,0 +1,168 @@
+"use client";
+'use strict';
+
+const React = require('react');
+const index$4 = require('../../../../../@radix-ui_primitive@1.1.3/node_modules/@radix-ui/primitive/dist/index.cjs');
+const index = require('../../../../../@radix-ui_react-context@1.1.2_@types_react@19.2.6_react@19.2.0/node_modules/@radix-ui/react-context/dist/index.cjs');
+const index$1 = require('../../../../../@radix-ui_react-use-controllable-state@1.2.2_@types_react@19.2.6_react@19.2.0/node_modules/@radix-ui/react-use-controllable-state/dist/index.cjs');
+const index$7 = require('../../../../../@radix-ui_react-use-layout-effect@1.1.1_@types_react@19.2.6_react@19.2.0/node_modules/@radix-ui/react-use-layout-effect/dist/index.cjs');
+const index$6 = require('../../../../../@radix-ui_react-compose-refs@1.1.2_@types_react@19.2.6_react@19.2.0/node_modules/@radix-ui/react-compose-refs/dist/index.cjs');
+const index$3 = require('../../../../../@radix-ui_react-primitive@2.1.3_@types_react-dom@19.2.3_@types_react@19.2.6__@types_rea_a92a69cb1cb39305138539e4fa72f596/node_modules/@radix-ui/react-primitive/dist/index.cjs');
+const index$5 = require('../../../../../@radix-ui_react-presence@1.1.5_@types_react-dom@19.2.3_@types_react@19.2.6__@types_reac_90f8e5c12233caef3399d5fd66452a13/node_modules/@radix-ui/react-presence/dist/index.cjs');
+const index$2 = require('../../../../../@radix-ui_react-id@1.1.1_@types_react@19.2.6_react@19.2.0/node_modules/@radix-ui/react-id/dist/index.cjs');
+const jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  const n = Object.create(null);
+  if (e) {
+    for (const k in e) {
+      n[k] = e[k];
+    }
+  }
+  n.default = e;
+  return n;
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
+
+var COLLAPSIBLE_NAME = "Collapsible";
+var [createCollapsibleContext, createCollapsibleScope] = index.createContextScope(COLLAPSIBLE_NAME);
+var [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
+var Collapsible = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeCollapsible,
+      open: openProp,
+      defaultOpen,
+      disabled,
+      onOpenChange,
+      ...collapsibleProps
+    } = props;
+    const [open, setOpen] = index$1.useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen ?? false,
+      onChange: onOpenChange,
+      caller: COLLAPSIBLE_NAME
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CollapsibleProvider,
+      {
+        scope: __scopeCollapsible,
+        disabled,
+        contentId: index$2.useId(),
+        open,
+        onOpenToggle: React__namespace.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          index$3.Primitive.div,
+          {
+            "data-state": getState(open),
+            "data-disabled": disabled ? "" : void 0,
+            ...collapsibleProps,
+            ref: forwardedRef
+          }
+        )
+      }
+    );
+  }
+);
+Collapsible.displayName = COLLAPSIBLE_NAME;
+var TRIGGER_NAME = "CollapsibleTrigger";
+var CollapsibleTrigger = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeCollapsible, ...triggerProps } = props;
+    const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index$3.Primitive.button,
+      {
+        type: "button",
+        "aria-controls": context.contentId,
+        "aria-expanded": context.open || false,
+        "data-state": getState(context.open),
+        "data-disabled": context.disabled ? "" : void 0,
+        disabled: context.disabled,
+        ...triggerProps,
+        ref: forwardedRef,
+        onClick: index$4.composeEventHandlers(props.onClick, context.onOpenToggle)
+      }
+    );
+  }
+);
+CollapsibleTrigger.displayName = TRIGGER_NAME;
+var CONTENT_NAME = "CollapsibleContent";
+var CollapsibleContent = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { forceMount, ...contentProps } = props;
+    const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);
+    return /* @__PURE__ */ jsxRuntime.jsx(index$5.Presence, { present: forceMount || context.open, children: ({ present }) => /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContentImpl, { ...contentProps, ref: forwardedRef, present }) });
+  }
+);
+CollapsibleContent.displayName = CONTENT_NAME;
+var CollapsibleContentImpl = React__namespace.forwardRef((props, forwardedRef) => {
+  const { __scopeCollapsible, present, children, ...contentProps } = props;
+  const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);
+  const [isPresent, setIsPresent] = React__namespace.useState(present);
+  const ref = React__namespace.useRef(null);
+  const composedRefs = index$6.useComposedRefs(forwardedRef, ref);
+  const heightRef = React__namespace.useRef(0);
+  const height = heightRef.current;
+  const widthRef = React__namespace.useRef(0);
+  const width = widthRef.current;
+  const isOpen = context.open || isPresent;
+  const isMountAnimationPreventedRef = React__namespace.useRef(isOpen);
+  const originalStylesRef = React__namespace.useRef(void 0);
+  React__namespace.useEffect(() => {
+    const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
+    return () => cancelAnimationFrame(rAF);
+  }, []);
+  index$7.useLayoutEffect(() => {
+    const node = ref.current;
+    if (node) {
+      originalStylesRef.current = originalStylesRef.current || {
+        transitionDuration: node.style.transitionDuration,
+        animationName: node.style.animationName
+      };
+      node.style.transitionDuration = "0s";
+      node.style.animationName = "none";
+      const rect = node.getBoundingClientRect();
+      heightRef.current = rect.height;
+      widthRef.current = rect.width;
+      if (!isMountAnimationPreventedRef.current) {
+        node.style.transitionDuration = originalStylesRef.current.transitionDuration;
+        node.style.animationName = originalStylesRef.current.animationName;
+      }
+      setIsPresent(present);
+    }
+  }, [context.open, present]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index$3.Primitive.div,
+    {
+      "data-state": getState(context.open),
+      "data-disabled": context.disabled ? "" : void 0,
+      id: context.contentId,
+      hidden: !isOpen,
+      ...contentProps,
+      ref: composedRefs,
+      style: {
+        [`--radix-collapsible-content-height`]: height ? `${height}px` : void 0,
+        [`--radix-collapsible-content-width`]: width ? `${width}px` : void 0,
+        ...props.style
+      },
+      children: isOpen && children
+    }
+  );
+});
+function getState(open) {
+  return open ? "open" : "closed";
+}
+var Root = Collapsible;
+var Trigger = CollapsibleTrigger;
+var Content = CollapsibleContent;
+
+exports.Collapsible = Collapsible;
+exports.CollapsibleContent = CollapsibleContent;
+exports.CollapsibleTrigger = CollapsibleTrigger;
+exports.Content = Content;
+exports.Root = Root;
+exports.Trigger = Trigger;
+exports.createCollapsibleScope = createCollapsibleScope;

package/dist/node_modules/.pnpm/@radix-ui_react-collapsible@1.1.12_@types_react-dom@19.2.3_@types_react@19.2.6__@types__d025a77f62ee83ca6bd8b0ea1f9de738/node_modules/@radix-ui/react-collapsible/dist/index.mjs

@@ -0,0 +1,146 @@
+"use client";
+import * as React from 'react';
+import { composeEventHandlers } from '../../../../../@radix-ui_primitive@1.1.3/node_modules/@radix-ui/primitive/dist/index.mjs';
+import { createContextScope } from '../../../../../@radix-ui_react-context@1.1.2_@types_react@19.2.6_react@19.2.0/node_modules/@radix-ui/react-context/dist/index.mjs';
+import { useControllableState } from '../../../../../@radix-ui_react-use-controllable-state@1.2.2_@types_react@19.2.6_react@19.2.0/node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs';
+import { useLayoutEffect as useLayoutEffect2 } from '../../../../../@radix-ui_react-use-layout-effect@1.1.1_@types_react@19.2.6_react@19.2.0/node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs';
+import { useComposedRefs } from '../../../../../@radix-ui_react-compose-refs@1.1.2_@types_react@19.2.6_react@19.2.0/node_modules/@radix-ui/react-compose-refs/dist/index.mjs';
+import { Primitive } from '../../../../../@radix-ui_react-primitive@2.1.3_@types_react-dom@19.2.3_@types_react@19.2.6__@types_rea_a92a69cb1cb39305138539e4fa72f596/node_modules/@radix-ui/react-primitive/dist/index.mjs';
+import { Presence } from '../../../../../@radix-ui_react-presence@1.1.5_@types_react-dom@19.2.3_@types_react@19.2.6__@types_reac_90f8e5c12233caef3399d5fd66452a13/node_modules/@radix-ui/react-presence/dist/index.mjs';
+import { useId } from '../../../../../@radix-ui_react-id@1.1.1_@types_react@19.2.6_react@19.2.0/node_modules/@radix-ui/react-id/dist/index.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+var COLLAPSIBLE_NAME = "Collapsible";
+var [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);
+var [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
+var Collapsible = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeCollapsible,
+      open: openProp,
+      defaultOpen,
+      disabled,
+      onOpenChange,
+      ...collapsibleProps
+    } = props;
+    const [open, setOpen] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen ?? false,
+      onChange: onOpenChange,
+      caller: COLLAPSIBLE_NAME
+    });
+    return /* @__PURE__ */ jsx(
+      CollapsibleProvider,
+      {
+        scope: __scopeCollapsible,
+        disabled,
+        contentId: useId(),
+        open,
+        onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
+        children: /* @__PURE__ */ jsx(
+          Primitive.div,
+          {
+            "data-state": getState(open),
+            "data-disabled": disabled ? "" : void 0,
+            ...collapsibleProps,
+            ref: forwardedRef
+          }
+        )
+      }
+    );
+  }
+);
+Collapsible.displayName = COLLAPSIBLE_NAME;
+var TRIGGER_NAME = "CollapsibleTrigger";
+var CollapsibleTrigger = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeCollapsible, ...triggerProps } = props;
+    const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
+    return /* @__PURE__ */ jsx(
+      Primitive.button,
+      {
+        type: "button",
+        "aria-controls": context.contentId,
+        "aria-expanded": context.open || false,
+        "data-state": getState(context.open),
+        "data-disabled": context.disabled ? "" : void 0,
+        disabled: context.disabled,
+        ...triggerProps,
+        ref: forwardedRef,
+        onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
+      }
+    );
+  }
+);
+CollapsibleTrigger.displayName = TRIGGER_NAME;
+var CONTENT_NAME = "CollapsibleContent";
+var CollapsibleContent = React.forwardRef(
+  (props, forwardedRef) => {
+    const { forceMount, ...contentProps } = props;
+    const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);
+    return /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: ({ present }) => /* @__PURE__ */ jsx(CollapsibleContentImpl, { ...contentProps, ref: forwardedRef, present }) });
+  }
+);
+CollapsibleContent.displayName = CONTENT_NAME;
+var CollapsibleContentImpl = React.forwardRef((props, forwardedRef) => {
+  const { __scopeCollapsible, present, children, ...contentProps } = props;
+  const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);
+  const [isPresent, setIsPresent] = React.useState(present);
+  const ref = React.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, ref);
+  const heightRef = React.useRef(0);
+  const height = heightRef.current;
+  const widthRef = React.useRef(0);
+  const width = widthRef.current;
+  const isOpen = context.open || isPresent;
+  const isMountAnimationPreventedRef = React.useRef(isOpen);
+  const originalStylesRef = React.useRef(void 0);
+  React.useEffect(() => {
+    const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
+    return () => cancelAnimationFrame(rAF);
+  }, []);
+  useLayoutEffect2(() => {
+    const node = ref.current;
+    if (node) {
+      originalStylesRef.current = originalStylesRef.current || {
+        transitionDuration: node.style.transitionDuration,
+        animationName: node.style.animationName
+      };
+      node.style.transitionDuration = "0s";
+      node.style.animationName = "none";
+      const rect = node.getBoundingClientRect();
+      heightRef.current = rect.height;
+      widthRef.current = rect.width;
+      if (!isMountAnimationPreventedRef.current) {
+        node.style.transitionDuration = originalStylesRef.current.transitionDuration;
+        node.style.animationName = originalStylesRef.current.animationName;
+      }
+      setIsPresent(present);
+    }
+  }, [context.open, present]);
+  return /* @__PURE__ */ jsx(
+    Primitive.div,
+    {
+      "data-state": getState(context.open),
+      "data-disabled": context.disabled ? "" : void 0,
+      id: context.contentId,
+      hidden: !isOpen,
+      ...contentProps,
+      ref: composedRefs,
+      style: {
+        [`--radix-collapsible-content-height`]: height ? `${height}px` : void 0,
+        [`--radix-collapsible-content-width`]: width ? `${width}px` : void 0,
+        ...props.style
+      },
+      children: isOpen && children
+    }
+  );
+});
+function getState(open) {
+  return open ? "open" : "closed";
+}
+var Root = Collapsible;
+var Trigger = CollapsibleTrigger;
+var Content = CollapsibleContent;
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger, Content, Root, Trigger, createCollapsibleScope };

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/chat-interface.cjs

@@ -22,7 +22,8 @@ function ChatInterface({
   initialMessages,
   id,
   variant = "full",
-  className
+  className,
+  onMessagesChange
 }) {
   const {
     navigate,
@@ -31,7 +32,8 @@ function ChatInterface({
     apiBasePath,
     headers,
     mode,
-    showAttribution
+    showAttribution,
+    chatSuggestions
   } = context.usePluginOverrides(
     "ai-chat",
     { showAttribution: true }
@@ -73,6 +75,12 @@ function ChatInterface({
     }
   }, [currentConversationId, isPublicMode]);
   const editMessagesRef = React.useRef(null);
+  const [isMessagesInitialized, setIsMessagesInitialized] = React.useState(
+    () => (
+      // Start as initialized if there are no initialMessages to load
+      !initialMessages || initialMessages.length === 0
+    )
+  );
   const transport = React.useMemo(
     () => new ai.DefaultChatTransport({
       api: apiPath,
@@ -164,6 +172,7 @@ function ChatInterface({
   React.useEffect(() => {
     if (initialMessages && initialMessages.length > 0 && messages.length === 0) {
       setMessages(initialMessages);
+      setIsMessagesInitialized(true);
     }
   }, [initialMessages, setMessages, messages.length]);
   const [input, setInput] = React.useState("");
@@ -179,6 +188,11 @@ function ChatInterface({
       }
     }
   }, [messages]);
+  React.useEffect(() => {
+    if (isPublicMode && onMessagesChange && isMessagesInitialized) {
+      onMessagesChange(messages);
+    }
+  }, [messages, isPublicMode, onMessagesChange, isMessagesInitialized]);
   const handleInputChange = (e) => {
     setInput(e.target.value);
   };
@@ -259,7 +273,19 @@ function ChatInterface({
               isWidget ? "max-w-full" : "max-w-3xl mx-auto w-full"
             ),
             children: [
-              messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center h-full min-h-[300px] text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: localization.CHAT_EMPTY_STATE }) }) : messages.map((m, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full min-h-[300px]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: localization.CHAT_EMPTY_STATE }) }),
+                chatSuggestions && chatSuggestions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-center gap-2 pb-4 max-w-md mx-auto", children: chatSuggestions.map((suggestion, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setInput(suggestion),
+                    className: "px-3 py-2 text-sm rounded-lg border border-border bg-background hover:bg-accent hover:text-accent-foreground transition-colors text-foreground",
+                    children: suggestion
+                  },
+                  index
+                )) })
+              ] }) : messages.map((m, index) => /* @__PURE__ */ jsxRuntime.jsx(
                 chatMessage.ChatMessage,
                 {
                   message: m,

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/chat-interface.mjs

@@ -20,7 +20,8 @@ function ChatInterface({
   initialMessages,
   id,
   variant = "full",
-  className
+  className,
+  onMessagesChange
 }) {
   const {
     navigate,
@@ -29,7 +30,8 @@ function ChatInterface({
     apiBasePath,
     headers,
     mode,
-    showAttribution
+    showAttribution,
+    chatSuggestions
   } = usePluginOverrides(
     "ai-chat",
     { showAttribution: true }
@@ -71,6 +73,12 @@ function ChatInterface({
     }
   }, [currentConversationId, isPublicMode]);
   const editMessagesRef = useRef(null);
+  const [isMessagesInitialized, setIsMessagesInitialized] = useState(
+    () => (
+      // Start as initialized if there are no initialMessages to load
+      !initialMessages || initialMessages.length === 0
+    )
+  );
   const transport = useMemo(
     () => new DefaultChatTransport({
       api: apiPath,
@@ -162,6 +170,7 @@ function ChatInterface({
   useEffect(() => {
     if (initialMessages && initialMessages.length > 0 && messages.length === 0) {
       setMessages(initialMessages);
+      setIsMessagesInitialized(true);
     }
   }, [initialMessages, setMessages, messages.length]);
   const [input, setInput] = useState("");
@@ -177,6 +186,11 @@ function ChatInterface({
       }
     }
   }, [messages]);
+  useEffect(() => {
+    if (isPublicMode && onMessagesChange && isMessagesInitialized) {
+      onMessagesChange(messages);
+    }
+  }, [messages, isPublicMode, onMessagesChange, isMessagesInitialized]);
   const handleInputChange = (e) => {
     setInput(e.target.value);
   };
@@ -257,7 +271,19 @@ function ChatInterface({
               isWidget ? "max-w-full" : "max-w-3xl mx-auto w-full"
             ),
             children: [
-              messages.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center h-full min-h-[300px] text-muted-foreground", children: /* @__PURE__ */ jsx("p", { children: localization.CHAT_EMPTY_STATE }) }) : messages.map((m, index) => /* @__PURE__ */ jsx(
+              messages.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full min-h-[300px]", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx("p", { children: localization.CHAT_EMPTY_STATE }) }),
+                chatSuggestions && chatSuggestions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-2 pb-4 max-w-md mx-auto", children: chatSuggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setInput(suggestion),
+                    className: "px-3 py-2 text-sm rounded-lg border border-border bg-background hover:bg-accent hover:text-accent-foreground transition-colors text-foreground",
+                    children: suggestion
+                  },
+                  index
+                )) })
+              ] }) : messages.map((m, index) => /* @__PURE__ */ jsx(
                 ChatMessage,
                 {
                   message: m,

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/chat-layout.cjs

@@ -17,7 +17,9 @@ function ChatLayout({
   layout = "full",
   className,
   showSidebar = true,
-  widgetHeight = "600px"
+  widgetHeight = "600px",
+  initialMessages,
+  onMessagesChange
 }) {
   const [sidebarOpen, setSidebarOpen] = React.useState(true);
   const [mobileSidebarOpen, setMobileSidebarOpen] = React.useState(false);
@@ -37,7 +39,16 @@ function ChatLayout({
           className
         ),
         style: { height: widgetHeight },
-        children: /* @__PURE__ */ jsxRuntime.jsx(chatInterface.ChatInterface, { apiPath, id: conversationId, variant: "widget" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          chatInterface.ChatInterface,
+          {
+            apiPath,
+            id: conversationId,
+            variant: "widget",
+            initialMessages,
+            onMessagesChange
+          }
+        )
       }
     );
   }
@@ -109,7 +120,9 @@ function ChatLayout({
             {
               apiPath,
               id: conversationId,
-              variant: "full"
+              variant: "full",
+              initialMessages,
+              onMessagesChange
             },
             `chat-${conversationId ?? "new"}-${chatResetKey}`
           )

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/chat-layout.mjs

@@ -15,7 +15,9 @@ function ChatLayout({
   layout = "full",
   className,
   showSidebar = true,
-  widgetHeight = "600px"
+  widgetHeight = "600px",
+  initialMessages,
+  onMessagesChange
 }) {
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
@@ -35,7 +37,16 @@ function ChatLayout({
           className
         ),
         style: { height: widgetHeight },
-        children: /* @__PURE__ */ jsx(ChatInterface, { apiPath, id: conversationId, variant: "widget" })
+        children: /* @__PURE__ */ jsx(
+          ChatInterface,
+          {
+            apiPath,
+            id: conversationId,
+            variant: "widget",
+            initialMessages,
+            onMessagesChange
+          }
+        )
       }
     );
   }
@@ -107,7 +118,9 @@ function ChatLayout({
             {
               apiPath,
               id: conversationId,
-              variant: "full"
+              variant: "full",
+              initialMessages,
+              onMessagesChange
             },
             `chat-${conversationId ?? "new"}-${chatResetKey}`
           )

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/chat-message.cjs

@@ -7,9 +7,11 @@ const markdownContent = require('../../../../../../ui/src/components/markdown-co
 const button = require('../../../../../../ui/src/components/button.cjs');
 const dialog = require('../../../../../../ui/src/components/dialog.cjs');
 const lucideReact = require('lucide-react');
+const ai = require('ai');
 const React = require('react');
 const context = require('@btst/stack/context');
 const index = require('../localization/index.cjs');
+const toolCallDisplay = require('./tool-call-display.cjs');
 require('highlight.js/styles/panda-syntax-light.css');
 const completeMarkdown = require('remend');
 
@@ -83,7 +85,8 @@ function ChatMessage({
   const {
     Link,
     Image,
-    localization: customLocalization
+    localization: customLocalization,
+    toolRenderers
   } = context.usePluginOverrides(
     "ai-chat",
     {}
@@ -155,6 +158,12 @@ function ChatMessage({
     }
     return [];
   }, [message.parts]);
+  const toolParts = React.useMemo(() => {
+    if (message.parts && Array.isArray(message.parts)) {
+      return message.parts.filter((part) => ai.isToolUIPart(part));
+    }
+    return [];
+  }, [message.parts]);
   const displayContent = React.useMemo(() => {
     if (!textContent) return "";
     if (isStreaming && !isUser) {
@@ -276,7 +285,7 @@ function ChatMessage({
                   )
                 ] })
               ) : (
-                // Assistant messages: rendered markdown + files + images
+                // Assistant messages: rendered markdown + files + images + tool calls
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "wrap-break-word space-y-2", children: [
                   fileParts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: fileParts.map((part, index) => /* @__PURE__ */ jsxRuntime.jsxs(
                     "a",
@@ -304,6 +313,29 @@ function ChatMessage({
                     },
                     index
                   )) }),
+                  toolParts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: toolParts.map((part) => {
+                    const toolName = ai.getToolName(part);
+                    const toolCallId = part.toolCallId;
+                    const state = part.state;
+                    const input = part.input;
+                    const output = part.output;
+                    const errorText = part.errorText;
+                    const isLoading = state === "input-streaming" || state === "input-available";
+                    const toolCallProps = {
+                      toolCallId,
+                      toolName,
+                      state,
+                      input,
+                      output,
+                      errorText,
+                      isLoading
+                    };
+                    const CustomRenderer = toolRenderers?.[toolName];
+                    if (CustomRenderer) {
+                      return /* @__PURE__ */ jsxRuntime.jsx(CustomRenderer, { ...toolCallProps }, toolCallId);
+                    }
+                    return /* @__PURE__ */ jsxRuntime.jsx(toolCallDisplay.ToolCallDisplay, { ...toolCallProps }, toolCallId);
+                  }) }),
                   displayContent ? /* @__PURE__ */ jsxRuntime.jsx(
                     markdownContent.MarkdownContent,
                     {
@@ -312,7 +344,7 @@ function ChatMessage({
                       LinkComponent: Link ?? DefaultLink,
                       ImageComponent
                     }
-                  ) : imageParts.length === 0 && fileParts.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "..." }) : null
+                  ) : imageParts.length === 0 && fileParts.length === 0 && toolParts.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "..." }) : null
                 ] })
               )
             }