@wealthx/shadcn 1.5.40 → 1.5.42

package/dist/{chunk-EFHPSKVF.mjs → chunk-EGM4DARZ.mjs}

@@ -10,9 +10,109 @@ import {
 
 // src/components/ui/chat-input-area.tsx
 import * as React from "react";
-import { ImagePlus, Paperclip, Send } from "lucide-react";
+import { flushSync } from "react-dom";
+import {
+  Bold,
+  Code,
+  Code2,
+  ImagePlus,
+  Italic,
+  Paperclip,
+  Send
+} from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var DEFAULT_HINT = "Enter to send \xB7 Shift+Enter for new line";
+var TOOLBAR_ITEMS = [
+  {
+    type: "button",
+    icon: Bold,
+    label: "Bold",
+    title: "Bold (Ctrl+B)",
+    before: "**",
+    after: "**",
+    placeholder: "bold text"
+  },
+  {
+    type: "button",
+    icon: Italic,
+    label: "Italic",
+    title: "Italic (Ctrl+I)",
+    before: "*",
+    after: "*",
+    placeholder: "italic text"
+  },
+  {
+    type: "button",
+    icon: Code,
+    label: "Inline code",
+    title: "Inline code",
+    before: "`",
+    after: "`",
+    placeholder: "code"
+  },
+  { type: "divider" },
+  {
+    type: "button",
+    icon: Code2,
+    label: "Code block",
+    title: "Code block",
+    before: "```\n",
+    after: "\n```",
+    placeholder: "code block"
+  }
+];
+function applyMarkdown(textarea, before, after, placeholder, onChange) {
+  const start = textarea.selectionStart;
+  const end = textarea.selectionEnd;
+  const selected = textarea.value.slice(start, end);
+  const insertion = selected || placeholder;
+  const next = textarea.value.slice(0, start) + before + insertion + after + textarea.value.slice(end);
+  const newStart = start + before.length;
+  const newEnd = newStart + insertion.length;
+  flushSync(() => onChange(next));
+  textarea.focus();
+  textarea.setSelectionRange(newStart, newEnd);
+}
+var MarkdownToolbar = React.memo(function MarkdownToolbar2({
+  textareaRef,
+  onChange,
+  disabled
+}) {
+  const handleFormat = React.useCallback(
+    (e) => {
+      if (!textareaRef.current) return;
+      const { before, after, placeholder } = e.currentTarget.dataset;
+      applyMarkdown(textareaRef.current, before, after, placeholder, onChange);
+    },
+    [textareaRef, onChange]
+  );
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5 border-b border-border px-2 py-1", children: TOOLBAR_ITEMS.map(
+    (item, i) => item.type === "divider" ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "mx-0.5 h-3.5 w-px bg-border",
+        "aria-hidden": "true"
+      },
+      i
+    ) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm",
+        type: "button",
+        title: item.title,
+        "aria-label": item.label,
+        disabled,
+        "data-before": item.before,
+        "data-after": item.after,
+        "data-placeholder": item.placeholder,
+        onClick: handleFormat,
+        children: /* @__PURE__ */ jsx(item.icon, { className: "size-3.5", "aria-hidden": "true" })
+      },
+      item.label
+    )
+  ) });
+});
 function ChatInputArea({
   value,
   onChange,
@@ -24,6 +124,7 @@ function ChatInputArea({
   hint = DEFAULT_HINT,
   maxHeight = 160,
   autoFocus = false,
+  showMarkdownToolbar = false,
   className
 }) {
   const textareaRef = React.useRef(null);
@@ -92,6 +193,14 @@ function ChatInputArea({
       className: cn("flex flex-col gap-1.5", className),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "border border-border bg-background flex flex-col focus-within:ring-1 focus-within:ring-ring", children: [
+          showMarkdownToolbar && /* @__PURE__ */ jsx(
+            MarkdownToolbar,
+            {
+              textareaRef,
+              onChange,
+              disabled
+            }
+          ),
           /* @__PURE__ */ jsx(
             Textarea,
             {

package/dist/{chunk-B5PSUONN.mjs → chunk-TF5TOVIM.mjs}

@@ -1,6 +1,6 @@
 import {
   ChatInputArea
-} from "./chunk-EFHPSKVF.mjs";
+} from "./chunk-EGM4DARZ.mjs";
 import {
   Sheet,
   SheetContent

package/dist/{chunk-STN5QIWN.mjs → chunk-THOHFAW2.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-GTAVSBDO.mjs";
 import {
   ChatInputArea
-} from "./chunk-EFHPSKVF.mjs";
+} from "./chunk-EGM4DARZ.mjs";
 import {
   Sheet,
   SheetContent
@@ -294,7 +294,7 @@ import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
 import { Bot, ChevronLeft, ChevronRight, SquarePen, X as X2 } from "lucide-react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function SupportTypingIndicator() {
   return /* @__PURE__ */ jsx3(
     "span",
@@ -396,6 +396,49 @@ function RichContentRenderer({ richContent }) {
   }
   return null;
 }
+function CloseButton({ onClick }) {
+  return /* @__PURE__ */ jsxs3(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: "size-7 shrink-0",
+      onClick,
+      title: "Close",
+      children: [
+        /* @__PURE__ */ jsx3(X2, { className: "size-3.5" }),
+        /* @__PURE__ */ jsx3("span", { className: "sr-only", children: "Close" })
+      ]
+    }
+  );
+}
+function ConversationRow({
+  conv,
+  onClick,
+  className
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "flex w-full items-center justify-between gap-2 text-left text-sm text-foreground hover:bg-muted/50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx3("span", { className: "flex-1 truncate", children: conv.title }),
+        /* @__PURE__ */ jsx3(
+          ChevronRight,
+          {
+            className: "size-3.5 shrink-0 text-muted-foreground",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+}
 function SupportAgentPanel({
   open,
   onClose,
@@ -413,13 +456,20 @@ function SupportAgentPanel({
   onBack,
   onOpenConversation,
   onViewAllConversations,
+  hasMoreConversations = false,
+  onLoadMoreConversations,
+  isLoadingMoreConversations = false,
   className
 }) {
   var _a;
   const [inputValue, setInputValue] = React2.useState("");
+  const [showAllConversations, setShowAllConversations] = React2.useState(false);
   const messagesEndRef = React2.useRef(null);
   const hasMessages = messages.length > 0;
   const isChatMode = hasMessages && !!conversationTitle;
+  React2.useEffect(() => {
+    if (!open) setShowAllConversations(false);
+  }, [open]);
   React2.useEffect(() => {
     if (!messagesEndRef.current) return;
     messagesEndRef.current.scrollIntoView({
@@ -441,6 +491,17 @@ function SupportAgentPanel({
     [onSendMessage]
   );
   const hasRecents = !!(recentConversations == null ? void 0 : recentConversations.length);
+  const recentsPreview = React2.useMemo(
+    () => {
+      var _a2;
+      return (_a2 = recentConversations == null ? void 0 : recentConversations.slice(0, 3)) != null ? _a2 : [];
+    },
+    [recentConversations]
+  );
+  const handleViewAll = React2.useCallback(() => {
+    setShowAllConversations(true);
+    onViewAllConversations == null ? void 0 : onViewAllConversations();
+  }, [onViewAllConversations]);
   return /* @__PURE__ */ jsx3(Sheet, { open, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ jsxs3(
     SheetContent,
     {
@@ -453,38 +514,45 @@ function SupportAgentPanel({
       "data-slot": "support-agent-panel",
       children: [
         /* @__PURE__ */ jsxs3("div", { className: "shrink-0 border-b border-border px-3 py-2.5", children: [
-          isChatMode ? (
-            /* Chat mode: [←]  Conversation title  [✕] */
+          showAllConversations ? (
+            /* All-conversations mode: [←]  All conversations  [✕] */
             /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
-              onBack && /* @__PURE__ */ jsxs3(
+              /* @__PURE__ */ jsxs3(
                 Button,
                 {
                   variant: "ghost",
                   size: "icon",
                   className: "size-7 shrink-0",
-                  onClick: onBack,
-                  title: "Back to conversations",
+                  onClick: () => setShowAllConversations(false),
+                  title: "Back",
                   children: [
                     /* @__PURE__ */ jsx3(ChevronLeft, { className: "size-3.5" }),
                     /* @__PURE__ */ jsx3("span", { className: "sr-only", children: "Back" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx3("span", { className: "flex-1 truncate px-1 text-sm font-medium text-foreground", children: conversationTitle }),
-              /* @__PURE__ */ jsxs3(
+              /* @__PURE__ */ jsx3("span", { className: "flex-1 truncate px-1 text-sm font-medium text-foreground", children: "All conversations" }),
+              /* @__PURE__ */ jsx3(CloseButton, { onClick: onClose })
+            ] })
+          ) : isChatMode ? (
+            /* Chat mode: [←]  Conversation title  [✕] */
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
+              onBack && /* @__PURE__ */ jsxs3(
                 Button,
                 {
                   variant: "ghost",
                   size: "icon",
                   className: "size-7 shrink-0",
-                  onClick: onClose,
-                  title: "Close",
+                  onClick: onBack,
+                  title: "Back to conversations",
                   children: [
-                    /* @__PURE__ */ jsx3(X2, { className: "size-3.5" }),
-                    /* @__PURE__ */ jsx3("span", { className: "sr-only", children: "Close" })
+                    /* @__PURE__ */ jsx3(ChevronLeft, { className: "size-3.5" }),
+                    /* @__PURE__ */ jsx3("span", { className: "sr-only", children: "Back" })
                   ]
                 }
-              )
+              ),
+              /* @__PURE__ */ jsx3("span", { className: "flex-1 truncate px-1 text-sm font-medium text-foreground", children: conversationTitle }),
+              /* @__PURE__ */ jsx3(CloseButton, { onClick: onClose })
             ] })
           ) : (
             /* Home mode: [Bot icon]  Support Assistant  [✕] */
@@ -499,23 +567,10 @@ function SupportAgentPanel({
                 ) }),
                 /* @__PURE__ */ jsx3("span", { className: "text-sm font-semibold text-foreground", children: "Support Assistant" })
               ] }),
-              /* @__PURE__ */ jsxs3(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "icon",
-                  className: "size-7",
-                  onClick: onClose,
-                  title: "Close",
-                  children: [
-                    /* @__PURE__ */ jsx3(X2, { className: "size-3.5" }),
-                    /* @__PURE__ */ jsx3("span", { className: "sr-only", children: "Close" })
-                  ]
-                }
-              )
+              /* @__PURE__ */ jsx3(CloseButton, { onClick: onClose })
             ] })
           ),
-          context && /* @__PURE__ */ jsx3("div", { className: "mt-2", children: /* @__PURE__ */ jsx3(SupportContextChip, { context }) })
+          context && !showAllConversations && /* @__PURE__ */ jsx3("div", { className: "mt-2", children: /* @__PURE__ */ jsx3(SupportContextChip, { context }) })
         ] }),
         /* @__PURE__ */ jsx3("div", { className: "flex flex-1 flex-col overflow-y-auto", children: isLoading ? (
           /* Loading state */
@@ -523,6 +578,33 @@ function SupportAgentPanel({
             /* @__PURE__ */ jsx3(Spinner, { size: "lg", className: "text-muted-foreground" }),
             /* @__PURE__ */ jsx3("p", { className: "text-sm text-muted-foreground", children: "Loading\u2026" })
           ] }) })
+        ) : showAllConversations ? (
+          /* All conversations — full scrollable list (Jira Rovo pattern) */
+          /* @__PURE__ */ jsx3("div", { className: "flex flex-col", children: (recentConversations == null ? void 0 : recentConversations.length) ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+            recentConversations.map((conv) => /* @__PURE__ */ jsx3(
+              ConversationRow,
+              {
+                conv,
+                onClick: () => {
+                  setShowAllConversations(false);
+                  onOpenConversation == null ? void 0 : onOpenConversation(conv.id);
+                },
+                className: "border-b border-border px-4 py-3"
+              },
+              conv.id
+            )),
+            hasMoreConversations && /* @__PURE__ */ jsx3("div", { className: "border-t border-border p-3", children: /* @__PURE__ */ jsx3(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "w-full",
+                disabled: isLoadingMoreConversations,
+                onClick: onLoadMoreConversations,
+                children: isLoadingMoreConversations ? "Loading..." : "Load more"
+              }
+            ) })
+          ] }) : /* @__PURE__ */ jsx3("p", { className: "p-4 text-sm text-muted-foreground", children: "No conversations yet." }) })
         ) : !hasMessages ? (
           /* Home state — Rovo pattern: New Chat CTA + Recents + Suggested */
           /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-5 p-4", children: [
@@ -541,31 +623,21 @@ function SupportAgentPanel({
             ),
             hasRecents && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1", children: [
               /* @__PURE__ */ jsx3("p", { className: "px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Recents" }),
-              /* @__PURE__ */ jsx3("div", { className: "flex flex-col", children: recentConversations.map((conv) => /* @__PURE__ */ jsxs3(
-                "button",
+              /* @__PURE__ */ jsx3("div", { className: "flex flex-col", children: recentsPreview.map((conv) => /* @__PURE__ */ jsx3(
+                ConversationRow,
                 {
-                  type: "button",
+                  conv,
                   onClick: () => onOpenConversation == null ? void 0 : onOpenConversation(conv.id),
-                  className: "flex w-full items-center justify-between gap-2 px-1 py-2.5 text-left text-sm text-foreground hover:bg-muted/50",
-                  children: [
-                    /* @__PURE__ */ jsx3("span", { className: "flex-1 truncate", children: conv.title }),
-                    /* @__PURE__ */ jsx3(
-                      ChevronRight,
-                      {
-                        className: "size-3.5 shrink-0 text-muted-foreground",
-                        "aria-hidden": "true"
-                      }
-                    )
-                  ]
+                  className: "px-1 py-2.5"
                 },
                 conv.id
               )) }),
-              onViewAllConversations && /* @__PURE__ */ jsxs3(
+              /* @__PURE__ */ jsxs3(
                 Button,
                 {
                   variant: "ghost",
                   size: "sm",
-                  onClick: onViewAllConversations,
+                  onClick: handleViewAll,
                   className: "h-auto w-fit gap-0.5 px-1 py-1 text-xs text-muted-foreground hover:bg-transparent hover:text-foreground",
                   children: [
                     "View all conversations",
@@ -604,7 +676,8 @@ function SupportAgentPanel({
             onAttachFile,
             onAttachImage,
             disabled: isLoading || isStreaming,
-            placeholder: "Ask anything\u2026"
+            placeholder: "Ask anything\u2026",
+            showMarkdownToolbar: true
           }
         ) })
       ]

package/dist/{chunk-RRROLESJ.mjs → chunk-XHZONBL4.mjs}

@@ -33,7 +33,7 @@ import {
 } from "./chunk-2GIYVERS.mjs";
 import {
   ChatInputArea
-} from "./chunk-EFHPSKVF.mjs";
+} from "./chunk-EGM4DARZ.mjs";
 import {
   Textarea
 } from "./chunk-BS75ICOO.mjs";

package/dist/components/ui/ai-assistant-drawer.js

@@ -369,6 +369,7 @@ function Badge(_a) {
 
 // src/components/ui/chat-input-area.tsx
 var React3 = __toESM(require("react"));
+var import_react_dom = require("react-dom");
 var import_lucide_react3 = require("lucide-react");
 
 // src/components/ui/textarea.tsx
@@ -391,6 +392,97 @@ function Textarea(_a) {
 // src/components/ui/chat-input-area.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var DEFAULT_HINT = "Enter to send \xB7 Shift+Enter for new line";
+var TOOLBAR_ITEMS = [
+  {
+    type: "button",
+    icon: import_lucide_react3.Bold,
+    label: "Bold",
+    title: "Bold (Ctrl+B)",
+    before: "**",
+    after: "**",
+    placeholder: "bold text"
+  },
+  {
+    type: "button",
+    icon: import_lucide_react3.Italic,
+    label: "Italic",
+    title: "Italic (Ctrl+I)",
+    before: "*",
+    after: "*",
+    placeholder: "italic text"
+  },
+  {
+    type: "button",
+    icon: import_lucide_react3.Code,
+    label: "Inline code",
+    title: "Inline code",
+    before: "`",
+    after: "`",
+    placeholder: "code"
+  },
+  { type: "divider" },
+  {
+    type: "button",
+    icon: import_lucide_react3.Code2,
+    label: "Code block",
+    title: "Code block",
+    before: "```\n",
+    after: "\n```",
+    placeholder: "code block"
+  }
+];
+function applyMarkdown(textarea, before, after, placeholder, onChange) {
+  const start = textarea.selectionStart;
+  const end = textarea.selectionEnd;
+  const selected = textarea.value.slice(start, end);
+  const insertion = selected || placeholder;
+  const next = textarea.value.slice(0, start) + before + insertion + after + textarea.value.slice(end);
+  const newStart = start + before.length;
+  const newEnd = newStart + insertion.length;
+  (0, import_react_dom.flushSync)(() => onChange(next));
+  textarea.focus();
+  textarea.setSelectionRange(newStart, newEnd);
+}
+var MarkdownToolbar = React3.memo(function MarkdownToolbar2({
+  textareaRef,
+  onChange,
+  disabled
+}) {
+  const handleFormat = React3.useCallback(
+    (e) => {
+      if (!textareaRef.current) return;
+      const { before, after, placeholder } = e.currentTarget.dataset;
+      applyMarkdown(textareaRef.current, before, after, placeholder, onChange);
+    },
+    [textareaRef, onChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex items-center gap-0.5 border-b border-border px-2 py-1", children: TOOLBAR_ITEMS.map(
+    (item, i) => item.type === "divider" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "span",
+      {
+        className: "mx-0.5 h-3.5 w-px bg-border",
+        "aria-hidden": "true"
+      },
+      i
+    ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm",
+        type: "button",
+        title: item.title,
+        "aria-label": item.label,
+        disabled,
+        "data-before": item.before,
+        "data-after": item.after,
+        "data-placeholder": item.placeholder,
+        onClick: handleFormat,
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(item.icon, { className: "size-3.5", "aria-hidden": "true" })
+      },
+      item.label
+    )
+  ) });
+});
 function ChatInputArea({
   value,
   onChange,
@@ -402,6 +494,7 @@ function ChatInputArea({
   hint = DEFAULT_HINT,
   maxHeight = 160,
   autoFocus = false,
+  showMarkdownToolbar = false,
   className
 }) {
   const textareaRef = React3.useRef(null);
@@ -470,6 +563,14 @@ function ChatInputArea({
       className: cn("flex flex-col gap-1.5", className),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "border border-border bg-background flex flex-col focus-within:ring-1 focus-within:ring-ring", children: [
+          showMarkdownToolbar && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            MarkdownToolbar,
+            {
+              textareaRef,
+              onChange,
+              disabled
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Textarea,
             {

package/dist/components/ui/ai-assistant-drawer.mjs

@@ -1,7 +1,7 @@
 import {
   AiAssistantDrawer
-} from "../../chunk-B5PSUONN.mjs";
-import "../../chunk-EFHPSKVF.mjs";
+} from "../../chunk-TF5TOVIM.mjs";
+import "../../chunk-EGM4DARZ.mjs";
 import "../../chunk-H3PTREG6.mjs";
 import "../../chunk-BS75ICOO.mjs";
 import "../../chunk-JVMXMFBB.mjs";

package/dist/components/ui/ai-conversations/index.js

@@ -1196,6 +1196,7 @@ function Separator(_a2) {
 
 // src/components/ui/chat-input-area.tsx
 var React5 = __toESM(require("react"));
+var import_react_dom = require("react-dom");
 var import_lucide_react5 = require("lucide-react");
 
 // src/components/ui/textarea.tsx
@@ -1218,6 +1219,97 @@ function Textarea(_a2) {
 // src/components/ui/chat-input-area.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var DEFAULT_HINT = "Enter to send \xB7 Shift+Enter for new line";
+var TOOLBAR_ITEMS = [
+  {
+    type: "button",
+    icon: import_lucide_react5.Bold,
+    label: "Bold",
+    title: "Bold (Ctrl+B)",
+    before: "**",
+    after: "**",
+    placeholder: "bold text"
+  },
+  {
+    type: "button",
+    icon: import_lucide_react5.Italic,
+    label: "Italic",
+    title: "Italic (Ctrl+I)",
+    before: "*",
+    after: "*",
+    placeholder: "italic text"
+  },
+  {
+    type: "button",
+    icon: import_lucide_react5.Code,
+    label: "Inline code",
+    title: "Inline code",
+    before: "`",
+    after: "`",
+    placeholder: "code"
+  },
+  { type: "divider" },
+  {
+    type: "button",
+    icon: import_lucide_react5.Code2,
+    label: "Code block",
+    title: "Code block",
+    before: "```\n",
+    after: "\n```",
+    placeholder: "code block"
+  }
+];
+function applyMarkdown(textarea, before, after, placeholder, onChange) {
+  const start = textarea.selectionStart;
+  const end = textarea.selectionEnd;
+  const selected = textarea.value.slice(start, end);
+  const insertion = selected || placeholder;
+  const next = textarea.value.slice(0, start) + before + insertion + after + textarea.value.slice(end);
+  const newStart = start + before.length;
+  const newEnd = newStart + insertion.length;
+  (0, import_react_dom.flushSync)(() => onChange(next));
+  textarea.focus();
+  textarea.setSelectionRange(newStart, newEnd);
+}
+var MarkdownToolbar = React5.memo(function MarkdownToolbar2({
+  textareaRef,
+  onChange,
+  disabled
+}) {
+  const handleFormat = React5.useCallback(
+    (e) => {
+      if (!textareaRef.current) return;
+      const { before, after, placeholder } = e.currentTarget.dataset;
+      applyMarkdown(textareaRef.current, before, after, placeholder, onChange);
+    },
+    [textareaRef, onChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex items-center gap-0.5 border-b border-border px-2 py-1", children: TOOLBAR_ITEMS.map(
+    (item, i) => item.type === "divider" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "span",
+      {
+        className: "mx-0.5 h-3.5 w-px bg-border",
+        "aria-hidden": "true"
+      },
+      i
+    ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm",
+        type: "button",
+        title: item.title,
+        "aria-label": item.label,
+        disabled,
+        "data-before": item.before,
+        "data-after": item.after,
+        "data-placeholder": item.placeholder,
+        onClick: handleFormat,
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(item.icon, { className: "size-3.5", "aria-hidden": "true" })
+      },
+      item.label
+    )
+  ) });
+});
 function ChatInputArea({
   value,
   onChange,
@@ -1229,6 +1321,7 @@ function ChatInputArea({
   hint = DEFAULT_HINT,
   maxHeight = 160,
   autoFocus = false,
+  showMarkdownToolbar = false,
   className
 }) {
   const textareaRef = React5.useRef(null);
@@ -1297,6 +1390,14 @@ function ChatInputArea({
       className: cn("flex flex-col gap-1.5", className),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "border border-border bg-background flex flex-col focus-within:ring-1 focus-within:ring-ring", children: [
+          showMarkdownToolbar && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            MarkdownToolbar,
+            {
+              textareaRef,
+              onChange,
+              disabled
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             Textarea,
             {