@btst/stack 1.3.1 → 1.4.0

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

@@ -0,0 +1,122 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const button = require('../../../../../../ui/src/components/button.cjs');
+const sheet = require('../../../../../../ui/src/components/sheet.cjs');
+const lucideReact = require('lucide-react');
+const utils = require('../../../../../../ui/src/lib/utils.cjs');
+const chatSidebar = require('./chat-sidebar.cjs');
+const chatInterface = require('./chat-interface.cjs');
+
+function ChatLayout({
+  apiBaseURL,
+  apiBasePath,
+  conversationId,
+  layout = "full",
+  className,
+  showSidebar = true,
+  widgetHeight = "600px"
+}) {
+  const [sidebarOpen, setSidebarOpen] = React.useState(true);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = React.useState(false);
+  const [chatResetKey, setChatResetKey] = React.useState(0);
+  const apiPath = `${apiBaseURL}${apiBasePath}/chat`;
+  const handleNewChat = React.useCallback(() => {
+    if (!conversationId) {
+      setChatResetKey((prev) => prev + 1);
+    }
+  }, [conversationId]);
+  if (layout === "widget") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: utils.cn(
+          "flex flex-col w-full border rounded-xl overflow-hidden bg-background shadow-sm",
+          className
+        ),
+        style: { height: widgetHeight },
+        children: /* @__PURE__ */ jsxRuntime.jsx(chatInterface.ChatInterface, { apiPath, id: conversationId, variant: "widget" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "flex h-[calc(100vh-4rem)] w-full overflow-hidden",
+        className
+      ),
+      "data-testid": "chat-layout",
+      children: [
+        showSidebar && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: utils.cn(
+              "hidden md:flex transition-all duration-300 ease-in-out",
+              sidebarOpen ? "w-72" : "w-0"
+            ),
+            children: sidebarOpen && /* @__PURE__ */ jsxRuntime.jsx(
+              chatSidebar.ChatSidebar,
+              {
+                currentConversationId: conversationId,
+                onNewChat: handleNewChat,
+                className: "w-72"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-2 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: [
+            showSidebar && /* @__PURE__ */ jsxRuntime.jsxs(sheet.Sheet, { open: mobileSidebarOpen, onOpenChange: setMobileSidebarOpen, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(sheet.SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                button.Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "md:hidden",
+                  "aria-label": "Open menu",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "h-5 w-5" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(sheet.SheetContent, { side: "left", className: "p-0 w-72", children: /* @__PURE__ */ jsxRuntime.jsx(
+                chatSidebar.ChatSidebar,
+                {
+                  currentConversationId: conversationId,
+                  onNewChat: () => {
+                    handleNewChat();
+                    setMobileSidebarOpen(false);
+                  }
+                }
+              ) })
+            ] }),
+            showSidebar && /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "hidden md:flex",
+                onClick: () => setSidebarOpen(!sidebarOpen),
+                "aria-label": sidebarOpen ? "Close sidebar" : "Open sidebar",
+                children: sidebarOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftClose, { className: "h-5 w-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeft, { className: "h-5 w-5" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            chatInterface.ChatInterface,
+            {
+              apiPath,
+              id: conversationId,
+              variant: "full"
+            },
+            `chat-${conversationId ?? "new"}-${chatResetKey}`
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+exports.ChatLayout = ChatLayout;

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

@@ -0,0 +1,120 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { Button } from '../../../../../../ui/src/components/button.mjs';
+import { Sheet, SheetTrigger, SheetContent } from '../../../../../../ui/src/components/sheet.mjs';
+import { Menu, PanelLeftClose, PanelLeft } from 'lucide-react';
+import { cn } from '../../../../../../ui/src/lib/utils.mjs';
+import { ChatSidebar } from './chat-sidebar.mjs';
+import { ChatInterface } from './chat-interface.mjs';
+
+function ChatLayout({
+  apiBaseURL,
+  apiBasePath,
+  conversationId,
+  layout = "full",
+  className,
+  showSidebar = true,
+  widgetHeight = "600px"
+}) {
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+  const [chatResetKey, setChatResetKey] = useState(0);
+  const apiPath = `${apiBaseURL}${apiBasePath}/chat`;
+  const handleNewChat = useCallback(() => {
+    if (!conversationId) {
+      setChatResetKey((prev) => prev + 1);
+    }
+  }, [conversationId]);
+  if (layout === "widget") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col w-full border rounded-xl overflow-hidden bg-background shadow-sm",
+          className
+        ),
+        style: { height: widgetHeight },
+        children: /* @__PURE__ */ jsx(ChatInterface, { apiPath, id: conversationId, variant: "widget" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-[calc(100vh-4rem)] w-full overflow-hidden",
+        className
+      ),
+      "data-testid": "chat-layout",
+      children: [
+        showSidebar && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "hidden md:flex transition-all duration-300 ease-in-out",
+              sidebarOpen ? "w-72" : "w-0"
+            ),
+            children: sidebarOpen && /* @__PURE__ */ jsx(
+              ChatSidebar,
+              {
+                currentConversationId: conversationId,
+                onNewChat: handleNewChat,
+                className: "w-72"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: [
+            showSidebar && /* @__PURE__ */ jsxs(Sheet, { open: mobileSidebarOpen, onOpenChange: setMobileSidebarOpen, children: [
+              /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "md:hidden",
+                  "aria-label": "Open menu",
+                  children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(SheetContent, { side: "left", className: "p-0 w-72", children: /* @__PURE__ */ jsx(
+                ChatSidebar,
+                {
+                  currentConversationId: conversationId,
+                  onNewChat: () => {
+                    handleNewChat();
+                    setMobileSidebarOpen(false);
+                  }
+                }
+              ) })
+            ] }),
+            showSidebar && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "hidden md:flex",
+                onClick: () => setSidebarOpen(!sidebarOpen),
+                "aria-label": sidebarOpen ? "Close sidebar" : "Open sidebar",
+                children: sidebarOpen ? /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(PanelLeft, { className: "h-5 w-5" })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "flex-1" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            ChatInterface,
+            {
+              apiPath,
+              id: conversationId,
+              variant: "full"
+            },
+            `chat-${conversationId ?? "new"}-${chatResetKey}`
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { ChatLayout };

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

@@ -0,0 +1,397 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils = require('../../../../../../ui/src/lib/utils.cjs');
+const markdownContent = require('../../../../../../ui/src/components/markdown-content.cjs');
+const button = require('../../../../../../ui/src/components/button.cjs');
+const dialog = require('../../../../../../ui/src/components/dialog.cjs');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const context = require('@btst/stack/context');
+const index = require('../localization/index.cjs');
+require('highlight.js/styles/panda-syntax-light.css');
+const completeMarkdown = require('remend');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const completeMarkdown__default = /*#__PURE__*/_interopDefaultCompat(completeMarkdown);
+
+const DefaultLink = (props) => /* @__PURE__ */ jsxRuntime.jsx("a", { ...props });
+const DefaultImage = (props) => /* @__PURE__ */ jsxRuntime.jsx("img", { ...props });
+function ClickableImage({
+  src,
+  alt,
+  width = 200,
+  height = 200,
+  className,
+  ImageComponent
+}) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsOpen(true),
+        className: "cursor-zoom-in focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded-md overflow-hidden",
+        style: { width, height },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ImageComponent,
+          {
+            src,
+            alt,
+            width,
+            height,
+            className: utils.cn(
+              "object-cover hover:opacity-90 transition-opacity",
+              className
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      dialog.DialogContent,
+      {
+        className: "max-w-[90vw] max-h-[90vh] p-2 sm:max-w-[90vw]",
+        showCloseButton: true,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { className: "sr-only", children: alt }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src,
+              alt,
+              className: "max-w-full max-h-[85vh] object-contain rounded-md"
+            }
+          ) })
+        ]
+      }
+    ) })
+  ] });
+}
+function ChatMessage({
+  message,
+  isStreaming = false,
+  variant = "default",
+  onRetry,
+  onEdit,
+  isRetrying = false
+}) {
+  const isUser = message.role === "user";
+  const {
+    Link,
+    Image,
+    localization: customLocalization
+  } = context.usePluginOverrides(
+    "ai-chat",
+    {}
+  );
+  const localization = { ...index.AI_CHAT_LOCALIZATION, ...customLocalization };
+  const ImageComponent = Image ?? DefaultImage;
+  const [copied, setCopied] = React.useState(false);
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [editText, setEditText] = React.useState("");
+  const editTextareaRef = React.useRef(null);
+  React.useEffect(() => {
+    if (isEditing && editTextareaRef.current) {
+      editTextareaRef.current.style.height = "auto";
+      editTextareaRef.current.style.height = `${editTextareaRef.current.scrollHeight}px`;
+      editTextareaRef.current.focus();
+    }
+  }, [isEditing, editText]);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(textContent);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy text:", err);
+    }
+  };
+  const handleStartEdit = () => {
+    setEditText(textContent);
+    setIsEditing(true);
+  };
+  const handleCancelEdit = () => {
+    setIsEditing(false);
+    setEditText("");
+  };
+  const handleSaveEdit = () => {
+    if (editText.trim() && onEdit) {
+      onEdit(editText.trim());
+      setIsEditing(false);
+      setEditText("");
+    }
+  };
+  const handleEditKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSaveEdit();
+    } else if (e.key === "Escape") {
+      handleCancelEdit();
+    }
+  };
+  const textContent = React.useMemo(() => {
+    if (message.parts && Array.isArray(message.parts)) {
+      return message.parts.filter((part) => part.type === "text").map((part) => part.text).join("");
+    }
+    return "";
+  }, [message.parts]);
+  const imageParts = React.useMemo(() => {
+    if (message.parts && Array.isArray(message.parts)) {
+      return message.parts.filter(
+        (part) => part.type === "file" && part.mediaType?.startsWith("image/")
+      );
+    }
+    return [];
+  }, [message.parts]);
+  const fileParts = React.useMemo(() => {
+    if (message.parts && Array.isArray(message.parts)) {
+      return message.parts.filter(
+        (part) => part.type === "file" && !part.mediaType?.startsWith("image/")
+      );
+    }
+    return [];
+  }, [message.parts]);
+  const displayContent = React.useMemo(() => {
+    if (!textContent) return "";
+    if (isStreaming && !isUser) {
+      return completeMarkdown__default(textContent);
+    }
+    return textContent;
+  }, [textContent, isStreaming, isUser]);
+  const isCompact = variant === "compact";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "flex gap-3 w-full",
+        isCompact ? "mb-3" : "mb-4",
+        isUser ? "justify-end" : "justify-start"
+      ),
+      "aria-label": isUser ? localization.A11Y_USER_MESSAGE : localization.A11Y_ASSISTANT_MESSAGE,
+      children: [
+        !isUser && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: utils.cn(
+              "rounded-full bg-muted flex items-center justify-center shrink-0",
+              isCompact ? "w-7 h-7" : "w-8 h-8"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bot, { className: utils.cn(isCompact ? "w-4 h-4" : "w-5 h-5") })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 max-w-[80%] group", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: utils.cn(
+                "rounded-lg",
+                isCompact ? "px-3 py-2" : "px-4 py-3",
+                isUser ? "bg-primary text-primary-foreground" : "bg-muted"
+              ),
+              children: isUser ? (
+                // User messages: files + images + text (or edit mode)
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "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",
+                    {
+                      href: part.url,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      className: "flex items-center gap-2 px-3 py-2 rounded-md bg-primary-foreground/10 hover:bg-primary-foreground/20 transition-colors",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "h-4 w-4 shrink-0" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs truncate max-w-[150px]", children: part.filename || "File" })
+                      ]
+                    },
+                    index
+                  )) }),
+                  imageParts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: imageParts.map((part, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                    ClickableImage,
+                    {
+                      src: part.url,
+                      alt: part.filename || `Attached image ${index + 1}`,
+                      width: 150,
+                      height: 150,
+                      className: "rounded-md",
+                      ImageComponent
+                    },
+                    index
+                  )) }),
+                  isEditing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "textarea",
+                      {
+                        ref: editTextareaRef,
+                        value: editText,
+                        onChange: (e) => setEditText(e.target.value),
+                        onKeyDown: handleEditKeyDown,
+                        className: utils.cn(
+                          "w-full min-w-[200px] resize-none rounded-md border-0 bg-primary-foreground/10 p-2 text-sm",
+                          "focus:outline-none focus:ring-1 focus:ring-primary-foreground/30",
+                          "text-primary-foreground placeholder:text-primary-foreground/50"
+                        ),
+                        rows: 1
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        button.Button,
+                        {
+                          type: "button",
+                          size: "icon-sm",
+                          variant: "ghost",
+                          onClick: handleCancelEdit,
+                          className: "h-7 w-7 text-primary-foreground hover:bg-primary-foreground/20",
+                          title: localization.MESSAGE_CANCEL,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        button.Button,
+                        {
+                          type: "button",
+                          size: "icon-sm",
+                          variant: "ghost",
+                          onClick: handleSaveEdit,
+                          disabled: !editText.trim(),
+                          className: "h-7 w-7 text-primary-foreground hover:bg-primary-foreground/20 disabled:opacity-50",
+                          title: localization.MESSAGE_SAVE,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "h-4 w-4" })
+                        }
+                      )
+                    ] })
+                  ] }) : textContent && /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: utils.cn(
+                        "whitespace-pre-wrap wrap-break-word",
+                        isCompact ? "text-sm" : "text-sm"
+                      ),
+                      children: textContent
+                    }
+                  )
+                ] })
+              ) : (
+                // Assistant messages: rendered markdown + files + images
+                /* @__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",
+                    {
+                      href: part.url,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      className: "flex items-center gap-2 px-3 py-2 rounded-md bg-muted-foreground/10 hover:bg-muted-foreground/20 transition-colors border",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs truncate max-w-[150px]", children: part.filename || "File" })
+                      ]
+                    },
+                    index
+                  )) }),
+                  imageParts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: imageParts.map((part, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                    ClickableImage,
+                    {
+                      src: part.url,
+                      alt: part.filename || `Image ${index + 1}`,
+                      width: 200,
+                      height: 200,
+                      className: "rounded-md",
+                      ImageComponent
+                    },
+                    index
+                  )) }),
+                  displayContent ? /* @__PURE__ */ jsxRuntime.jsx(
+                    markdownContent.MarkdownContent,
+                    {
+                      markdown: displayContent,
+                      variant: "chat",
+                      LinkComponent: Link ?? DefaultLink,
+                      ImageComponent
+                    }
+                  ) : imageParts.length === 0 && fileParts.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "..." }) : null
+                ] })
+              )
+            }
+          ),
+          !isStreaming && !isEditing && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: utils.cn(
+                "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity",
+                isUser ? "justify-end" : "justify-start"
+              ),
+              children: isUser ? (
+                // User message actions: Edit
+                onEdit && /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    type: "button",
+                    size: "icon-sm",
+                    variant: "ghost",
+                    onClick: handleStartEdit,
+                    className: "h-7 w-7 bg-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50",
+                    title: localization.MESSAGE_EDIT,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-3.5 w-3.5" })
+                  }
+                )
+              ) : (
+                // Assistant message actions: Copy and Retry
+                /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    button.Button,
+                    {
+                      type: "button",
+                      size: "icon-sm",
+                      variant: "ghost",
+                      onClick: handleCopy,
+                      className: "h-7 w-7 bg-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50",
+                      title: copied ? localization.MESSAGE_COPIED : localization.MESSAGE_COPY,
+                      children: copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-3.5 w-3.5" })
+                    }
+                  ),
+                  onRetry && /* @__PURE__ */ jsxRuntime.jsx(
+                    button.Button,
+                    {
+                      type: "button",
+                      size: "icon-sm",
+                      variant: "ghost",
+                      onClick: onRetry,
+                      disabled: isRetrying,
+                      className: "h-7 w-7 bg-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50 disabled:opacity-50",
+                      title: localization.MESSAGE_RETRY,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        lucideReact.RefreshCw,
+                        {
+                          className: utils.cn(
+                            "h-3.5 w-3.5",
+                            isRetrying && "animate-spin"
+                          )
+                        }
+                      )
+                    }
+                  )
+                ] })
+              )
+            }
+          )
+        ] }),
+        isUser && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: utils.cn(
+              "rounded-full bg-primary flex items-center justify-center shrink-0 text-primary-foreground",
+              isCompact ? "w-7 h-7" : "w-8 h-8"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: utils.cn(isCompact ? "w-4 h-4" : "w-5 h-5") })
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.ChatMessage = ChatMessage;