@shapesos/clay 0.7.0 → 0.8.1

package/dist/index.cjs

@@ -16357,9 +16357,11 @@ __export(src_exports, {
   MESSAGE_ROLE: () => MESSAGE_ROLE,
   TextArea: () => TextArea,
   colors: () => colors,
+  convertTableToCSV: () => convertTableToCSV,
   fontFamilies: () => fontFamilies,
   markdownToPlainText: () => markdownToPlainText,
   mergeRefs: () => mergeRefs,
+  parseMarkdownTable: () => parseMarkdownTable,
   typographyMixin: () => typographyMixin,
   typographyStyles: () => typographyStyles,
   typographyTypes: () => typographyTypes,
@@ -16756,9 +16758,63 @@ var import_react_markdown = __toESM(require("react-markdown"), 1);
 var import_remark_breaks = __toESM(require("remark-breaks"), 1);
 var import_remark_gfm = __toESM(require("remark-gfm"), 1);
 
-// src/components/chat/chat-message-content/chat-message-content-styles.ts
+// src/components/chat/scrollable-table/scrollable-table.tsx
+var import_react2 = require("react");
+
+// src/components/chat/chat-context/chat-context.ts
+var import_react = require("react");
+var ChatContext = (0, import_react.createContext)(null);
+function useChatContext() {
+  const context = (0, import_react.useContext)(ChatContext);
+  if (!context) {
+    throw new Error("useChatContext must be used within a Chat.Root component");
+  }
+  return context;
+}
+
+// src/components/chat/scrollable-table/scrollable-table-styles.ts
 var import_styled_components = __toESM(require("styled-components"), 1);
-var ContentWrapper = import_styled_components.default.div`
+var TableContainer = import_styled_components.default.div`
+  position: relative;
+  margin-block: 8px 16px;
+`;
+var TableScroll = import_styled_components.default.div`
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+`;
+var TableActionsWrapper = import_styled_components.default.div`
+  display: flex;
+  justify-content: flex-start;
+  margin-block: 8px 0;
+`;
+var TableActionsDivider = import_styled_components.default.div`
+  height: 1px;
+  background: ${colors["brown-40"]};
+  margin-block: 8px 0;
+`;
+
+// src/components/chat/scrollable-table/scrollable-table.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ScrollableTable({ node: _node, messageId, counter, ...props }) {
+  const currentIndex = counter ? counter.value : 0;
+  if (counter) {
+    counter.value += 1;
+  }
+  const context = (0, import_react2.useContext)(ChatContext);
+  const TableActions = context?.TableActions;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TableContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableScroll, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", { ...props }) }),
+    TableActions && messageId && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableActionsWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableActions, { messageId, tableIndex: currentIndex }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableActionsDivider, {})
+    ] })
+  ] });
+}
+
+// src/components/chat/chat-message-content/chat-message-content-styles.ts
+var import_styled_components2 = __toESM(require("styled-components"), 1);
+var ContentWrapper = import_styled_components2.default.div`
   ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};
   color: ${colors["brown-100"]};
   word-break: break-word;
@@ -16874,30 +16930,26 @@ var ContentWrapper = import_styled_components.default.div`
     color: ${colors["brown-80"]};
   }
 `;
-var TableScroll = import_styled_components.default.div`
-  width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
-  margin-block: 8px 16px;
-`;
 
 // src/components/chat/chat-message-content/chat-message-content.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function ScrollableTable({ node: _node, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableScroll, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", { ...props }) });
-}
-var markdownComponents = {
-  table: ScrollableTable
-};
-function ChatMessageContent({ content: content2 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContentWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default, import_remark_breaks.default], components: markdownComponents, children: content2 }) });
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ChatMessageContent({ content: content2, messageId }) {
+  const counter = { value: 0 };
+  const sanitizedContent = content2.split("\n").filter((line) => {
+    const t = line.trim();
+    return !(t.startsWith("<!-- table-title:") && t.endsWith("-->"));
+  }).join("\n");
+  const markdownComponents = {
+    table: ((tableProps) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ScrollableTable, { ...tableProps, messageId, counter }))
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ContentWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default, import_remark_breaks.default], components: markdownComponents, children: sanitizedContent }) });
 }
 
 // src/components/chat/chat-message-actions/chat-message-actions.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
-var import_react = require("react");
+var import_react3 = require("react");
 
 // node_modules/@tabler/icons-react/dist/esm/defaultAttributes.mjs
 var defaultAttributes = {
@@ -16924,8 +16976,8 @@ var defaultAttributes = {
 
 // node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
 var createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
-  const Component = (0, import_react.forwardRef)(
-    ({ color = "currentColor", size = 24, stroke = 2, title, className, children, ...rest }, ref) => (0, import_react.createElement)(
+  const Component = (0, import_react3.forwardRef)(
+    ({ color = "currentColor", size = 24, stroke = 2, title, className, children, ...rest }, ref) => (0, import_react3.createElement)(
       "svg",
       {
         ref,
@@ -16942,8 +16994,8 @@ var createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
         ...rest
       },
       [
-        title && (0, import_react.createElement)("title", { key: "svg-title" }, title),
-        ...iconNode.map(([tag, attrs]) => (0, import_react.createElement)(tag, attrs)),
+        title && (0, import_react3.createElement)("title", { key: "svg-title" }, title),
+        ...iconNode.map(([tag, attrs]) => (0, import_react3.createElement)(tag, attrs)),
         ...Array.isArray(children) ? children : [children]
       ]
     )
@@ -16969,10 +17021,10 @@ var __iconNode4 = [["path", { "d": "M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7
 var IconThumbUp = createReactComponent("outline", "thumb-up", "ThumbUp", __iconNode4);
 
 // src/components/icon/icon.tsx
-var import_react2 = require("react");
+var import_react4 = require("react");
 
 // src/components/icon/icon-styles.ts
-var import_styled_components2 = __toESM(require("styled-components"), 1);
+var import_styled_components3 = __toESM(require("styled-components"), 1);
 var STROKE_WIDTH_BY_SIZE = {
   12: 1.4,
   14: 1.4,
@@ -16985,7 +17037,7 @@ var DEFAULT_STROKE_WIDTH = 1.8;
 function getStrokeWidth(size) {
   return STROKE_WIDTH_BY_SIZE[size] ?? DEFAULT_STROKE_WIDTH;
 }
-var IconWrapper = import_styled_components2.default.span`
+var IconWrapper = import_styled_components3.default.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -16994,10 +17046,10 @@ var IconWrapper = import_styled_components2.default.span`
 `;
 
 // src/components/icon/icon.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var DEFAULT_SIZE = 16;
-var Icon = (0, import_react2.forwardRef)(function Icon2({ icon: IconComponent, size = DEFAULT_SIZE, color, className, "aria-label": ariaLabel }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+var Icon = (0, import_react4.forwardRef)(function Icon2({ icon: IconComponent, size = DEFAULT_SIZE, color, className, "aria-label": ariaLabel }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     IconWrapper,
     {
       ref,
@@ -17005,13 +17057,13 @@ var Icon = (0, import_react2.forwardRef)(function Icon2({ icon: IconComponent, s
       $color: color,
       "aria-label": ariaLabel,
       role: ariaLabel ? "img" : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconComponent, { width: size, height: size, strokeWidth: getStrokeWidth(size) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconComponent, { width: size, height: size, strokeWidth: getStrokeWidth(size) })
     }
   );
 });
 
 // src/components/icon-button/icon-button-styles.ts
-var import_styled_components3 = __toESM(require("styled-components"), 1);
+var import_styled_components4 = __toESM(require("styled-components"), 1);
 var PADDING = {
   short: {
     small: "4px",
@@ -17026,7 +17078,7 @@ var BORDER_RADIUS = {
   small: 6,
   medium: 10
 };
-var Button = import_styled_components3.default.button`
+var Button = import_styled_components4.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -17054,7 +17106,7 @@ var Button = import_styled_components3.default.button`
 `;
 
 // src/components/icon-button/icon-button.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var ICON_SIZE_BY_BUTTON_SIZE = {
   small: 16,
   medium: 20
@@ -17071,7 +17123,7 @@ function IconButton({
   as,
   "aria-label": ariaLabel
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Button,
     {
       className,
@@ -17083,24 +17135,13 @@ function IconButton({
       disabled,
       onClick: disabled ? void 0 : onClick,
       "aria-label": ariaLabel,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { icon, size: ICON_SIZE_BY_BUTTON_SIZE[size] })
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon, size: ICON_SIZE_BY_BUTTON_SIZE[size] })
     }
   );
 }
 
-// src/components/chat/chat-context/chat-context.ts
-var import_react3 = require("react");
-var ChatContext = (0, import_react3.createContext)(null);
-function useChatContext() {
-  const context = (0, import_react3.useContext)(ChatContext);
-  if (!context) {
-    throw new Error("useChatContext must be used within a Chat.Root component");
-  }
-  return context;
-}
-
 // src/components/chat/hooks/use-copy-to-clipboard.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/utils/clipboard.ts
 function copyToClipboard(text2, options) {
@@ -17117,7 +17158,7 @@ var PLACEHOLDER_REGEX = new RegExp(`${PLACEHOLDER_PREFIX}(\\d+)${PLACEHOLDER_SUF
 function markdownToPlainText(markdown) {
   if (!markdown) return "";
   const inlineCodeSnippets = [];
-  let result = markdown.replace(/```[\s\S]*?```/g, "").replace(/`([^`]+)`/g, (_match, code) => {
+  let result = markdown.replace(/^<!--[\s\S]*?--!?>\n?/gm, "").replace(/```[\s\S]*?```/g, "").replace(/`([^`]+)`/g, (_match, code) => {
     inlineCodeSnippets.push(code);
     return `${PLACEHOLDER_PREFIX}${inlineCodeSnippets.length - 1}${PLACEHOLDER_SUFFIX}`;
   }).replace(/^#{1,6}\s+/gm, "").replace(/^(?:---|\*\*\*|___)\s*$/gm, "").replace(/\*{3}(.+?)\*{3}/g, "$1").replace(/\*{2}(.+?)\*{2}/g, "$1").replace(/_{2}(.+?)_{2}/g, "$1").replace(/\*(.+?)\*/g, "$1").replace(/_(.+?)_/g, "$1").replace(/~~(.+?)~~/g, "$1").replace(/!\[([^\]]*)\]\([^)]+\)/g, "$1").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/^>\s?/gm, "").replace(/^\|[-:\s|]+\|\s*$/gm, "").replace(/^\|\s?/gm, "").replace(/\s?\|$/gm, "").replace(/\n{3,}/g, "\n\n").trim();
@@ -17128,14 +17169,14 @@ function markdownToPlainText(markdown) {
 // src/components/chat/hooks/use-copy-to-clipboard.ts
 var RESET_DELAY_MS = 2e3;
 function useCopyToClipboard() {
-  const [isCopied, setIsCopied] = (0, import_react4.useState)(false);
-  const timeoutRef = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const [isCopied, setIsCopied] = (0, import_react5.useState)(false);
+  const timeoutRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
   }, []);
-  const copy = (0, import_react4.useCallback)((text2) => {
+  const copy = (0, import_react5.useCallback)((text2) => {
     copyToClipboard(markdownToPlainText(text2), {
       onSuccess: () => {
         setIsCopied(true);
@@ -17157,16 +17198,16 @@ var MESSAGE_ROLE = {
 };
 
 // src/components/chat/chat-message-actions/chat-message-actions-styles.ts
-var import_styled_components4 = __toESM(require("styled-components"), 1);
+var import_styled_components5 = __toESM(require("styled-components"), 1);
 var FADE_DURATION_MS = 150;
 var ANIMATE_DURATION_MS = 200;
-var ActionsContainer = import_styled_components4.default.div`
+var ActionsContainer = import_styled_components5.default.div`
   display: flex;
   opacity: ${({ $role }) => $role === MESSAGE_ROLE.ASSISTANT ? 1 : 0};
   pointer-events: ${({ $role }) => $role === MESSAGE_ROLE.ASSISTANT ? "auto" : "none"};
   transition: opacity ${FADE_DURATION_MS}ms ease;
 `;
-var AnimatedAction = import_styled_components4.default.div`
+var AnimatedAction = import_styled_components5.default.div`
   display: flex;
   overflow: hidden;
   max-width: ${({ $visible }) => $visible ? "40px" : "0"};
@@ -17175,24 +17216,24 @@ var AnimatedAction = import_styled_components4.default.div`
 `;
 
 // src/components/chat/chat-message-actions/chat-message-actions.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function ChatMessageActions({ className, messageId, content: content2, role, isHelpful }) {
   const { onCopyMessage, onThumbUpClick, onThumbDownClick } = useChatContext();
   const { isCopied, copy } = useCopyToClipboard();
-  const handleCopy = (0, import_react5.useCallback)(() => {
+  const handleCopy = (0, import_react6.useCallback)(() => {
     copy(content2);
     onCopyMessage?.(messageId);
   }, [content2, messageId, copy, onCopyMessage]);
-  const handleThumbUp = (0, import_react5.useCallback)(() => {
+  const handleThumbUp = (0, import_react6.useCallback)(() => {
     onThumbUpClick?.(messageId, isHelpful === true ? null : true);
   }, [messageId, isHelpful, onThumbUpClick]);
-  const handleThumbDown = (0, import_react5.useCallback)(() => {
+  const handleThumbDown = (0, import_react6.useCallback)(() => {
     onThumbDownClick?.(messageId, isHelpful === false ? null : false);
   }, [messageId, isHelpful, onThumbDownClick]);
   const isAssistant = role === MESSAGE_ROLE.ASSISTANT;
   const hasFeedback = isAssistant && (onThumbUpClick || onThumbDownClick);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ActionsContainer, { $role: role, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(ActionsContainer, { $role: role, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       IconButton,
       {
         icon: isCopied ? IconCheck : IconCopy,
@@ -17200,7 +17241,7 @@ function ChatMessageActions({ className, messageId, content: content2, role, isH
         "aria-label": isCopied ? "Copied" : "Copy message"
       }
     ),
-    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AnimatedAction, { $visible: isHelpful !== false, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AnimatedAction, { $visible: isHelpful !== false, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       IconButton,
       {
         icon: IconThumbUp,
@@ -17209,7 +17250,7 @@ function ChatMessageActions({ className, messageId, content: content2, role, isH
         "aria-label": "Good response"
       }
     ) }),
-    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AnimatedAction, { $visible: isHelpful !== true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AnimatedAction, { $visible: isHelpful !== true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       IconButton,
       {
         icon: IconThumbDown,
@@ -17222,8 +17263,8 @@ function ChatMessageActions({ className, messageId, content: content2, role, isH
 }
 
 // src/components/chat/chat-message/chat-message-styles.ts
-var import_styled_components5 = __toESM(require("styled-components"), 1);
-var MessageRow = import_styled_components5.default.div`
+var import_styled_components6 = __toESM(require("styled-components"), 1);
+var MessageRow = import_styled_components6.default.div`
   display: flex;
   justify-content: ${({ $role }) => $role === MESSAGE_ROLE.USER ? "flex-end" : "flex-start"};
 
@@ -17232,7 +17273,7 @@ var MessageRow = import_styled_components5.default.div`
     pointer-events: auto;
   }
 `;
-var MessageContainer = import_styled_components5.default.div`
+var MessageContainer = import_styled_components6.default.div`
   display: flex;
   flex-direction: column;
   align-items: ${({ $role }) => $role === MESSAGE_ROLE.USER ? "flex-end" : "flex-start"};
@@ -17240,7 +17281,7 @@ var MessageContainer = import_styled_components5.default.div`
   width: ${({ $role }) => $role === MESSAGE_ROLE.USER ? "auto" : "100%"};
   gap: 12px;
 `;
-var MessageBubble = import_styled_components5.default.div`
+var MessageBubble = import_styled_components6.default.div`
   ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};
   color: ${colors["brown-100"]};
   background: ${({ $role }) => $role === MESSAGE_ROLE.USER ? colors.white : "transparent"};
@@ -17251,11 +17292,11 @@ var MessageBubble = import_styled_components5.default.div`
 `;
 
 // src/components/chat/chat-message/chat-message.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function ChatMessage({ message }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MessageRow, { $role: message.role, role: "article", "aria-label": `${message.role} message`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MessageContainer, { $role: message.role, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MessageBubble, { $role: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChatMessageContent, { content: message.content }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageRow, { $role: message.role, role: "article", "aria-label": `${message.role} message`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(MessageContainer, { $role: message.role, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageBubble, { $role: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChatMessageContent, { content: message.content, messageId: message.id }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       ChatMessageActions,
       {
         messageId: message.id,
@@ -17268,7 +17309,7 @@ function ChatMessage({ message }) {
 }
 
 // src/components/keyboard-shortcut/keyboard-shortcut-styles.ts
-var import_styled_components6 = __toESM(require("styled-components"), 1);
+var import_styled_components7 = __toESM(require("styled-components"), 1);
 
 // src/components/keyboard-shortcut/types.ts
 var KEYBOARD_SHORTCUT_VARIANTS = {
@@ -17280,21 +17321,21 @@ var KEYBOARD_SHORTCUT_VARIANTS = {
 
 // src/components/keyboard-shortcut/keyboard-shortcut-styles.ts
 var variantStyles = {
-  [KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: import_styled_components6.css`
+  [KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: import_styled_components7.css`
     border: 1px solid ${colors["white-alpha-40"]};
     color: ${colors["brown-10"]};
   `,
-  [KEYBOARD_SHORTCUT_VARIANTS.FILLED]: import_styled_components6.css`
+  [KEYBOARD_SHORTCUT_VARIANTS.FILLED]: import_styled_components7.css`
     background: ${colors["brown-80"]};
     color: ${colors["brown-10"]};
   `
 };
-var Wrapper = import_styled_components6.default.div`
+var Wrapper = import_styled_components7.default.div`
   display: inline-flex;
   align-items: center;
   gap: 2px;
 `;
-var Key = import_styled_components6.default.kbd`
+var Key = import_styled_components7.default.kbd`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -17304,20 +17345,20 @@ var Key = import_styled_components6.default.kbd`
 `;
 
 // src/components/keyboard-shortcut/keyboard-shortcut.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function KeyboardShortcut({
   keys,
   variant = KEYBOARD_SHORTCUT_VARIANTS.OUTLINED,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Wrapper, { className, children: keys.map((KeyComponent, index2) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Key, { $variant: variant, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { icon: KeyComponent, size: 12 }) }, index2)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Wrapper, { className, children: keys.map((KeyComponent, index2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Key, { $variant: variant, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { icon: KeyComponent, size: 12 }) }, index2)) });
 }
 
 // src/components/keyboard-shortcut/icons/icon-ctrl.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function IconCtrl(props) {
   const { width: width2 = 24, height: height2 = 24, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: width2, height: height2, fill: "none", ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: width2, height: height2, fill: "none", ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "text",
     {
       x: "50%",
@@ -17334,11 +17375,11 @@ function IconCtrl(props) {
 }
 
 // src/components/lottie/lottie.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/components/lottie/lottie-styles.ts
-var import_styled_components7 = __toESM(require("styled-components"), 1);
-var LottieContainer = import_styled_components7.default.div`
+var import_styled_components8 = __toESM(require("styled-components"), 1);
+var LottieContainer = import_styled_components8.default.div`
   display: inline-flex;
   width: ${({ $width }) => typeof $width === "number" ? `${$width}px` : $width};
   height: ${({ $height }) => typeof $height === "number" ? `${$height}px` : $height};
@@ -17350,7 +17391,7 @@ var LottieContainer = import_styled_components7.default.div`
 `;
 
 // src/components/lottie/use-lottie.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_lottie_web = __toESM(require_lottie(), 1);
 function useLottie({
   animationData: animationData2,
@@ -17365,17 +17406,17 @@ function useLottie({
   onLoopComplete,
   onEnterFrame
 }) {
-  const containerRef = (0, import_react6.useRef)(null);
-  const animationRef = (0, import_react6.useRef)(null);
-  const onAnimationLoadedRef = (0, import_react6.useRef)(onAnimationLoaded);
-  const onCompleteRef = (0, import_react6.useRef)(onComplete);
-  const onLoopCompleteRef = (0, import_react6.useRef)(onLoopComplete);
-  const onEnterFrameRef = (0, import_react6.useRef)(onEnterFrame);
+  const containerRef = (0, import_react7.useRef)(null);
+  const animationRef = (0, import_react7.useRef)(null);
+  const onAnimationLoadedRef = (0, import_react7.useRef)(onAnimationLoaded);
+  const onCompleteRef = (0, import_react7.useRef)(onComplete);
+  const onLoopCompleteRef = (0, import_react7.useRef)(onLoopComplete);
+  const onEnterFrameRef = (0, import_react7.useRef)(onEnterFrame);
   onAnimationLoadedRef.current = onAnimationLoaded;
   onCompleteRef.current = onComplete;
   onLoopCompleteRef.current = onLoopComplete;
   onEnterFrameRef.current = onEnterFrame;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!containerRef.current) return;
     const anim = import_lottie_web.default.loadAnimation({
       container: containerRef.current,
@@ -17467,8 +17508,8 @@ function createLottieRef(animationRef) {
 }
 
 // src/components/lottie/lottie.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Lottie = (0, import_react7.forwardRef)(function Lottie2({
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Lottie = (0, import_react8.forwardRef)(function Lottie2({
   animationData: animationData2,
   autoplay,
   loop,
@@ -17498,8 +17539,8 @@ var Lottie = (0, import_react7.forwardRef)(function Lottie2({
     onLoopComplete,
     onEnterFrame
   });
-  (0, import_react7.useImperativeHandle)(ref, () => createLottieRef(animationRef), [animationRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  (0, import_react8.useImperativeHandle)(ref, () => createLottieRef(animationRef), [animationRef]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     LottieContainer,
     {
       ref: containerRef,
@@ -17513,7 +17554,7 @@ var Lottie = (0, import_react7.forwardRef)(function Lottie2({
 });
 
 // src/components/text-area/text-area.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/utils/merge-refs.ts
 function mergeRefs(...refs) {
@@ -17529,8 +17570,8 @@ function mergeRefs(...refs) {
 }
 
 // src/components/text-area/text-area-styles.ts
-var import_styled_components8 = __toESM(require("styled-components"), 1);
-var StyledTextArea = import_styled_components8.default.textarea`
+var import_styled_components9 = __toESM(require("styled-components"), 1);
+var StyledTextArea = import_styled_components9.default.textarea`
   ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};
   color: ${colors["brown-100"]};
   border: none;
@@ -17553,23 +17594,23 @@ var StyledTextArea = import_styled_components8.default.textarea`
 `;
 
 // src/components/text-area/text-area.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var TextArea = (0, import_react8.forwardRef)(function TextArea2({ value: value2, onChange, placeholder, maxHeight, rows = 1, autoFocus, onKeyDown, disabled, className }, externalRef) {
-  const internalRef = (0, import_react8.useRef)(null);
-  (0, import_react8.useLayoutEffect)(() => {
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var TextArea = (0, import_react9.forwardRef)(function TextArea2({ value: value2, onChange, placeholder, maxHeight, rows = 1, autoFocus, onKeyDown, disabled, className }, externalRef) {
+  const internalRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useLayoutEffect)(() => {
     const el = internalRef.current;
     if (el) {
       el.style.height = "auto";
       el.style.height = `${el.scrollHeight}px`;
     }
   }, [value2]);
-  const handleChange = (0, import_react8.useCallback)(
+  const handleChange = (0, import_react9.useCallback)(
     (e) => {
       onChange(e.target.value);
     },
     [onChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     StyledTextArea,
     {
       ref: mergeRefs(internalRef, externalRef),
@@ -17586,30 +17627,96 @@ var TextArea = (0, import_react8.forwardRef)(function TextArea2({ value: value2,
   );
 });
 
+// src/utils/parse-markdown-table.ts
+function parseCells(line) {
+  const trimmed = line.trim();
+  const stripped = trimmed.startsWith("|") ? trimmed.slice(1) : trimmed;
+  const withoutTrailing = stripped.endsWith("|") ? stripped.slice(0, -1) : stripped;
+  return withoutTrailing.split("|").map((cell) => cell.trim());
+}
+function isSeparatorRow(line) {
+  const cells = parseCells(line);
+  return cells.length > 0 && cells.every((cell) => /^:?-{1,}:?$/.test(cell));
+}
+function isTableRow(line) {
+  return line.includes("|");
+}
+var TABLE_TITLE_PREFIX = "<!-- table-title:";
+var TABLE_TITLE_SUFFIX = "-->";
+function extractTableTitle(line) {
+  const trimmed = line.trim();
+  if (!trimmed.startsWith(TABLE_TITLE_PREFIX) || !trimmed.endsWith(TABLE_TITLE_SUFFIX)) {
+    return void 0;
+  }
+  return trimmed.slice(TABLE_TITLE_PREFIX.length, -TABLE_TITLE_SUFFIX.length).trim() || void 0;
+}
+function parseMarkdownTable(markdown, tableIndex = 0) {
+  const lines = markdown.split("\n");
+  let tableCount = 0;
+  for (let i = 0; i < lines.length - 1; i++) {
+    const headerLine = lines[i];
+    const separatorLine = lines[i + 1];
+    if (!isTableRow(headerLine) || !isSeparatorRow(separatorLine)) {
+      continue;
+    }
+    if (tableCount === tableIndex) {
+      const columns = parseCells(headerLine);
+      const rows = [];
+      const title = i > 0 ? extractTableTitle(lines[i - 1]) : void 0;
+      for (let j = i + 2; j < lines.length; j++) {
+        if (!isTableRow(lines[j]) || isSeparatorRow(lines[j])) {
+          break;
+        }
+        const trimmedLine = lines[j].trim();
+        if (trimmedLine === "") {
+          break;
+        }
+        rows.push(parseCells(lines[j]));
+      }
+      return { columns, rows, ...title ? { title } : {} };
+    }
+    tableCount++;
+  }
+  return null;
+}
+
+// src/utils/convert-table-to-csv.ts
+function escapeField(field) {
+  if (field.includes(",") || field.includes('"') || field.includes("\n") || field.includes("\r")) {
+    return `"${field.replace(/"/g, '""')}"`;
+  }
+  return field;
+}
+function convertTableToCSV(table) {
+  const headerRow = table.columns.map(escapeField).join(",");
+  const dataRows = table.rows.map((row) => row.map(escapeField).join(","));
+  return [headerRow, ...dataRows].join("\r\n");
+}
+
 // src/components/button/button.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/button/button-styles.ts
-var import_styled_components9 = __toESM(require("styled-components"), 1);
+var import_styled_components10 = __toESM(require("styled-components"), 1);
 var sizeStyles = {
-  xs: import_styled_components9.css`
+  xs: import_styled_components10.css`
     padding: 6px 10px;
     border-radius: 8px;
     gap: 4px;
   `,
-  s: import_styled_components9.css`
+  s: import_styled_components10.css`
     padding: 8px 12px;
     border-radius: 10px;
     gap: 6px;
   `,
-  m: import_styled_components9.css`
+  m: import_styled_components10.css`
     padding: 10px 14px;
     border-radius: 10px;
     gap: 6px;
   `
 };
 var variantStyles2 = {
-  solid: import_styled_components9.css`
+  solid: import_styled_components10.css`
     background: ${colors["brown-100"]};
     color: ${colors.white};
     border: none;
@@ -17623,7 +17730,7 @@ var variantStyles2 = {
       color: ${colors["brown-50"]};
     }
   `,
-  outline: import_styled_components9.css`
+  outline: import_styled_components10.css`
     background: ${colors.white};
     color: ${colors["brown-100"]};
     border: 1px solid ${colors["brown-40"]};
@@ -17637,7 +17744,7 @@ var variantStyles2 = {
       color: ${colors["brown-50"]};
     }
   `,
-  ghost: import_styled_components9.css`
+  ghost: import_styled_components10.css`
     background: transparent;
     color: ${colors["brown-100"]};
     border: none;
@@ -17651,7 +17758,7 @@ var variantStyles2 = {
     }
   `
 };
-var StyledButton = import_styled_components9.default.button`
+var StyledButton = import_styled_components10.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -17684,8 +17791,8 @@ var ICON_POSITION = {
 };
 
 // src/components/button/button.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Button2 = (0, import_react9.forwardRef)(function Button3({
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Button2 = (0, import_react10.forwardRef)(function Button3({
   children,
   variant = BUTTON_VARIANT.SOLID,
   size = BUTTON_SIZE.M,
@@ -17696,8 +17803,8 @@ var Button2 = (0, import_react9.forwardRef)(function Button3({
   className,
   "aria-label": ariaLabel
 }, ref) {
-  const iconElement = icon ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { icon, size: 16 }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  const iconElement = icon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { icon, size: 16 }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     StyledButton,
     {
       ref,
@@ -17710,7 +17817,7 @@ var Button2 = (0, import_react9.forwardRef)(function Button3({
       "aria-label": ariaLabel,
       children: [
         iconPosition === ICON_POSITION.LEADING && iconElement,
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children }),
         iconPosition === ICON_POSITION.TRAILING && iconElement
       ]
     }
@@ -17733,9 +17840,11 @@ var Button2 = (0, import_react9.forwardRef)(function Button3({
   MESSAGE_ROLE,
   TextArea,
   colors,
+  convertTableToCSV,
   fontFamilies,
   markdownToPlainText,
   mergeRefs,
+  parseMarkdownTable,
   typographyMixin,
   typographyStyles,
   typographyTypes,