@shapesos/clay 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -16342,16 +16342,25 @@ var require_lottie = __commonJS({
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  Chat: () => Chat,
+  ChatContext: () => ChatContext,
+  ChatMessage: () => ChatMessage,
   Icon: () => Icon,
   IconButton: () => IconButton,
+  IconCtrl: () => IconCtrl,
+  KEYBOARD_SHORTCUT_VARIANTS: () => KEYBOARD_SHORTCUT_VARIANTS,
   KeyboardShortcut: () => KeyboardShortcut,
   Lottie: () => Lottie,
+  MESSAGE_ROLE: () => MESSAGE_ROLE,
+  TextArea: () => TextArea,
   colors: () => colors,
   fontFamilies: () => fontFamilies,
+  markdownToPlainText: () => markdownToPlainText,
+  mergeRefs: () => mergeRefs,
   typographyMixin: () => typographyMixin,
   typographyStyles: () => typographyStyles,
-  typographyTypes: () => typographyTypes
+  typographyTypes: () => typographyTypes,
+  useChatContext: () => useChatContext,
+  useCopyToClipboard: () => useCopyToClipboard
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -16360,6 +16369,7 @@ var colors = {
   // White
   white: "#FFFFFF",
   "white-alpha-85": "rgba(255, 255, 255, 0.85)",
+  "white-alpha-40": "rgba(255, 255, 255, 0.40)",
   // Brown
   "brown-10": "#FAF9F8",
   "brown-20": "#F5F3F0",
@@ -16460,6 +16470,7 @@ var typographyTypes = {
   GEIST_BODY_S_REGULAR: "GEIST_BODY_S_REGULAR",
   GEIST_BODY_S_MEDIUM: "GEIST_BODY_S_MEDIUM",
   GEIST_BODY_S_SEMI_BOLD: "GEIST_BODY_S_SEMI_BOLD",
+  GEIST_BODY_S_BOLD: "GEIST_BODY_S_BOLD",
   // Geist Body Medium (18px)
   GEIST_BODY_M_LIGHT: "GEIST_BODY_M_LIGHT",
   GEIST_BODY_M_REGULAR: "GEIST_BODY_M_REGULAR",
@@ -16553,6 +16564,13 @@ var typographyStyles = {
     lineHeight: 24,
     letterSpacing: -0.08
   },
+  [typographyTypes.GEIST_BODY_S_BOLD]: {
+    fontFamily: fontFamilies.GEIST,
+    fontSize: 16,
+    fontWeight: 700,
+    lineHeight: 24,
+    letterSpacing: -0.08
+  },
   // Geist Body Medium (18px)
   [typographyTypes.GEIST_BODY_M_LIGHT]: {
     fontFamily: fontFamilies.GEIST,
@@ -16727,136 +16745,149 @@ function typographyMixin(type) {
   ].join(";\n  ");
 }
 
-// src/chat/chat-root/chat-root.tsx
-var import_react2 = require("react");
-
-// src/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/chat/chat-root/chat-root-styles.ts
-var import_styled_components = __toESM(require("styled-components"), 1);
-var RootContainer = import_styled_components.default.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-`;
-
-// src/chat/chat-root/chat-root.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function ChatRoot({
-  messages,
-  onSendMessage,
-  isLoading = false,
-  onStop,
-  onCopyMessage,
-  onThumbUpClick,
-  onThumbDownClick,
-  children
-}) {
-  const contextValue = (0, import_react2.useMemo)(
-    () => ({ messages, onSendMessage, isLoading, onStop, onCopyMessage, onThumbUpClick, onThumbDownClick }),
-    [messages, onSendMessage, isLoading, onStop, onCopyMessage, onThumbUpClick, onThumbDownClick]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RootContainer, { children }) });
-}
-
 // src/chat/chat-message-content/chat-message-content.tsx
 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/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_XS_MEDIUM)};
+var import_styled_components = __toESM(require("styled-components"), 1);
+var ContentWrapper = import_styled_components.default.div`
+  ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};
   color: ${colors["brown-100"]};
   word-break: break-word;
 
-  & p {
-    margin: 0;
+  & h1 {
+    ${typographyMixin(typographyTypes.GEIST_HEADING_S_BOLD)};
+    margin-block: 20px;
+  }
+
+  & h2 {
+    ${typographyMixin(typographyTypes.GEIST_BODY_L_SEMI_BOLD)};
+    margin-block: 12px;
+  }
+
+  & h3,
+  & h4,
+  & h5,
+  & h6 {
+    ${typographyMixin(typographyTypes.GEIST_BODY_M_SEMI_BOLD)};
+    margin-block: 8px;
   }
 
-  & p + p {
-    margin-top: 8px;
+  & strong {
+    ${typographyMixin(typographyTypes.GEIST_BODY_S_SEMI_BOLD)};
+  }
+
+  & p {
+    margin-block: 8px;
   }
 
   & ul,
   & ol {
-    margin: 4px 0;
+    margin-block: 16px;
     padding-left: 20px;
   }
 
-  & a {
-    color: ${colors["brown-100"]};
-    text-decoration: underline;
+  & li + li {
+    margin-block: 4px;
   }
 
-  & pre {
-    overflow-x: auto;
-    padding: 8px;
-    margin: 4px 0;
-    background: ${colors["brown-10"]};
-    border: 1px solid ${colors["brown-alpha-12"]};
-    border-radius: 8px;
+  & ol {
+    list-style-type: decimal;
   }
 
-  & pre code {
-    padding: 0;
-    background: none;
-    border-radius: 0;
+  & ol ol {
+    list-style-type: lower-alpha;
   }
 
-  & code {
-    padding: 2px 4px;
-    background: ${colors["brown-10"]};
-    border-radius: 4px;
+  & ol ol ol {
+    list-style-type: lower-roman;
+  }
+
+  & a {
+    color: inherit;
+    text-decoration-line: underline;
+    text-decoration-style: dotted;
+    text-decoration-thickness: auto;
+    text-underline-offset: auto;
+    text-underline-position: from-font;
+    transition: color 75ms ease-in-out;
+
+    &:hover {
+      color: ${colors["blue-600"]};
+    }
+  }
+
+  & hr {
+    border: none;
+    border-top: 1px solid ${colors["brown-40"]};
+    margin-block: 20px;
   }
 
   & table {
-    border-collapse: collapse;
-    margin: 8px 0;
+    margin: 0;
     width: 100%;
+    border-collapse: collapse;
   }
 
   & th,
   & td {
-    border: 1px solid ${colors["brown-alpha-12"]};
-    padding: 6px 12px;
+    border: none;
+    border-bottom: 1px solid ${colors["brown-40"]};
     text-align: left;
   }
 
   & th {
-    background: ${colors["brown-10"]};
-    font-weight: 600;
+    ${typographyMixin(typographyTypes.GEIST_LABEL_CAPTION_MEDIUM)};
+    padding: 8px;
+  }
+
+  & td {
+    ${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
+    padding: 16px 8px;
+    min-width: 150px;
+    width: 1%;
+  }
+
+  & td strong {
+    font-weight: inherit;
+    font-size: inherit;
+    line-height: inherit;
   }
 
   & blockquote {
-    margin: 4px 0;
-    padding-left: 12px;
-    border-left: 3px solid ${colors["brown-30"]};
-    color: ${colors["brown-70"]};
+    margin-block: 4px;
+    margin-inline: 0px;
+    padding-left: 16px;
+    border-left: 4px solid ${colors["brown-40"]};
+    color: ${colors["brown-80"]};
   }
 `;
+var TableScroll = import_styled_components.default.div`
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  margin-block: 8px 16px;
+`;
 
 // src/chat/chat-message-content/chat-message-content.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+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_runtime2.jsx)(ContentWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default], children: 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 }) });
 }
 
 // src/chat/chat-message-actions/chat-message-actions.tsx
-var import_react7 = require("react");
+var import_react5 = require("react");
 
 // node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
-var import_react3 = require("react");
+var import_react = require("react");
 
 // node_modules/@tabler/icons-react/dist/esm/defaultAttributes.mjs
 var defaultAttributes = {
@@ -16883,8 +16914,8 @@ var defaultAttributes = {
 
 // node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
 var createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
-  const Component = (0, import_react3.forwardRef)(
-    ({ color = "currentColor", size = 24, stroke = 2, title, className, children, ...rest }, ref) => (0, import_react3.createElement)(
+  const Component = (0, import_react.forwardRef)(
+    ({ color = "currentColor", size = 24, stroke = 2, title, className, children, ...rest }, ref) => (0, import_react.createElement)(
       "svg",
       {
         ref,
@@ -16901,8 +16932,8 @@ var createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
         ...rest
       },
       [
-        title && (0, import_react3.createElement)("title", { key: "svg-title" }, title),
-        ...iconNode.map(([tag, attrs]) => (0, import_react3.createElement)(tag, attrs)),
+        title && (0, import_react.createElement)("title", { key: "svg-title" }, title),
+        ...iconNode.map(([tag, attrs]) => (0, import_react.createElement)(tag, attrs)),
         ...Array.isArray(children) ? children : [children]
       ]
     )
@@ -16911,41 +16942,30 @@ var createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
   return Component;
 };
 
-// node_modules/@tabler/icons-react/dist/esm/icons/IconArrowUp.mjs
-var __iconNode = [["path", { "d": "M12 5l0 14", "key": "svg-0" }], ["path", { "d": "M18 11l-6 -6", "key": "svg-1" }], ["path", { "d": "M6 11l6 -6", "key": "svg-2" }]];
-var IconArrowUp = createReactComponent("outline", "arrow-up", "ArrowUp", __iconNode);
-
 // node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.mjs
-var __iconNode2 = [["path", { "d": "M5 12l5 5l10 -10", "key": "svg-0" }]];
-var IconCheck = createReactComponent("outline", "check", "Check", __iconNode2);
+var __iconNode = [["path", { "d": "M5 12l5 5l10 -10", "key": "svg-0" }]];
+var IconCheck = createReactComponent("outline", "check", "Check", __iconNode);
 
 // node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.mjs
-var __iconNode3 = [["path", { "d": "M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666", "key": "svg-0" }], ["path", { "d": "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1", "key": "svg-1" }]];
-var IconCopy = createReactComponent("outline", "copy", "Copy", __iconNode3);
+var __iconNode2 = [["path", { "d": "M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666", "key": "svg-0" }], ["path", { "d": "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1", "key": "svg-1" }]];
+var IconCopy = createReactComponent("outline", "copy", "Copy", __iconNode2);
 
 // node_modules/@tabler/icons-react/dist/esm/icons/IconThumbDown.mjs
-var __iconNode4 = [["path", { "d": "M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3", "key": "svg-0" }]];
-var IconThumbDown = createReactComponent("outline", "thumb-down", "ThumbDown", __iconNode4);
+var __iconNode3 = [["path", { "d": "M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3", "key": "svg-0" }]];
+var IconThumbDown = createReactComponent("outline", "thumb-down", "ThumbDown", __iconNode3);
 
 // node_modules/@tabler/icons-react/dist/esm/icons/IconThumbUp.mjs
-var __iconNode5 = [["path", { "d": "M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3", "key": "svg-0" }]];
-var IconThumbUp = createReactComponent("outline", "thumb-up", "ThumbUp", __iconNode5);
+var __iconNode4 = [["path", { "d": "M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3", "key": "svg-0" }]];
+var IconThumbUp = createReactComponent("outline", "thumb-up", "ThumbUp", __iconNode4);
 
-// node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.mjs
-var __iconNode6 = [["path", { "d": "M17 4h-10a3 3 0 0 0 -3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3 -3v-10a3 3 0 0 0 -3 -3z", "key": "svg-0" }]];
-var IconPlayerStopFilled = createReactComponent("filled", "player-stop-filled", "PlayerStopFilled", __iconNode6);
-
-// src/icon-button/icon-button.tsx
-var import_react5 = require("react");
-
-// src/icon/icon.tsx
-var import_react4 = require("react");
+// src/components/icon/icon.tsx
+var import_react2 = require("react");
 
-// src/icon/icon-styles.ts
-var import_styled_components3 = __toESM(require("styled-components"), 1);
+// src/components/icon/icon-styles.ts
+var import_styled_components2 = __toESM(require("styled-components"), 1);
 var STROKE_WIDTH_BY_SIZE = {
-  12: 1.2,
-  14: 1.2,
+  12: 1.4,
+  14: 1.4,
   16: 1.8,
   18: 1.8,
   20: 1.8,
@@ -16955,7 +16975,7 @@ var DEFAULT_STROKE_WIDTH = 1.8;
 function getStrokeWidth(size) {
   return STROKE_WIDTH_BY_SIZE[size] ?? DEFAULT_STROKE_WIDTH;
 }
-var IconWrapper = import_styled_components3.default.span`
+var IconWrapper = import_styled_components2.default.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -16963,11 +16983,11 @@ var IconWrapper = import_styled_components3.default.span`
   flex-shrink: 0;
 `;
 
-// src/icon/icon.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+// src/components/icon/icon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var DEFAULT_SIZE = 16;
-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)(
+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)(
     IconWrapper,
     {
       ref,
@@ -16975,28 +16995,32 @@ var Icon = (0, import_react4.forwardRef)(function Icon2({ icon: IconComponent, s
       $color: color,
       "aria-label": ariaLabel,
       role: ariaLabel ? "img" : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconComponent, { width: size, height: size, strokeWidth: getStrokeWidth(size) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconComponent, { width: size, height: size, strokeWidth: getStrokeWidth(size) })
     }
   );
 });
 
-// src/icon-button/icon-button-styles.ts
-var import_styled_components4 = __toESM(require("styled-components"), 1);
-var DIMENSIONS = {
-  small: 28,
-  medium: 32
+// src/components/icon-button/icon-button-styles.ts
+var import_styled_components3 = __toESM(require("styled-components"), 1);
+var PADDING = {
+  short: {
+    small: "4px",
+    medium: "6px"
+  },
+  long: {
+    small: "4px 6px",
+    medium: "6px 10px"
+  }
 };
 var BORDER_RADIUS = {
   small: 6,
   medium: 10
 };
-var Button = import_styled_components4.default.button`
+var Button = import_styled_components3.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: ${({ $size }) => DIMENSIONS[$size]}px;
-  height: ${({ $size }) => DIMENSIONS[$size]}px;
-  padding: 0;
+  padding: ${({ $size, $variant }) => PADDING[$variant][$size]};
   border: none;
   border-radius: ${({ $size }) => BORDER_RADIUS[$size]}px;
   background: ${({ $isSelected }) => $isSelected ? colors["brown-40"] : "transparent"};
@@ -17019,30 +17043,54 @@ var Button = import_styled_components4.default.button`
   }
 `;
 
-// src/icon-button/icon-button.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+// src/components/icon-button/icon-button.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var ICON_SIZE_BY_BUTTON_SIZE = {
-  small: 14,
-  medium: 16
+  small: 16,
+  medium: 20
 };
-var IconButton = (0, import_react5.forwardRef)(function IconButton2({ icon, size = "small", isSelected = false, disabled = false, onClick, className, "aria-label": ariaLabel }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+function IconButton({
+  icon,
+  size = "small",
+  variant = "short",
+  isSelected = false,
+  disabled = false,
+  onClick,
+  className,
+  id,
+  as,
+  "aria-label": ariaLabel
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Button,
     {
-      ref,
       className,
+      id,
+      as,
       $size: size,
+      $variant: variant,
       $isSelected: isSelected,
       disabled,
       onClick: disabled ? void 0 : onClick,
       "aria-label": ariaLabel,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon, size: ICON_SIZE_BY_BUTTON_SIZE[size] })
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { icon, size: ICON_SIZE_BY_BUTTON_SIZE[size] })
     }
   );
-});
+}
+
+// src/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/chat/hooks/use-copy-to-clipboard.ts
-var import_react6 = require("react");
+var import_react4 = require("react");
 
 // src/utils/clipboard.ts
 function copyToClipboard(text2, options) {
@@ -17052,18 +17100,33 @@ function copyToClipboard(text2, options) {
   );
 }
 
+// src/utils/markdown-to-plain-text.ts
+var PLACEHOLDER_PREFIX = "\u200B\u200BIC";
+var PLACEHOLDER_SUFFIX = "\u200B\u200B";
+var PLACEHOLDER_REGEX = new RegExp(`${PLACEHOLDER_PREFIX}(\\d+)${PLACEHOLDER_SUFFIX}`, "g");
+function markdownToPlainText(markdown) {
+  if (!markdown) return "";
+  const inlineCodeSnippets = [];
+  let result = markdown.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();
+  result = result.replace(PLACEHOLDER_REGEX, (_match, index2) => inlineCodeSnippets[Number(index2)]);
+  return result;
+}
+
 // src/chat/hooks/use-copy-to-clipboard.ts
 var RESET_DELAY_MS = 2e3;
 function useCopyToClipboard() {
-  const [isCopied, setIsCopied] = (0, import_react6.useState)(false);
-  const timeoutRef = (0, import_react6.useRef)(null);
-  (0, import_react6.useEffect)(() => {
+  const [isCopied, setIsCopied] = (0, import_react4.useState)(false);
+  const timeoutRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
   }, []);
-  const copy = (0, import_react6.useCallback)((text2) => {
-    copyToClipboard(text2, {
+  const copy = (0, import_react4.useCallback)((text2) => {
+    copyToClipboard(markdownToPlainText(text2), {
       onSuccess: () => {
         setIsCopied(true);
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
@@ -17077,36 +17140,49 @@ function useCopyToClipboard() {
   return { isCopied, copy };
 }
 
+// src/chat/constants.ts
+var MESSAGE_ROLE = {
+  USER: "user",
+  ASSISTANT: "assistant"
+};
+
 // src/chat/chat-message-actions/chat-message-actions-styles.ts
-var import_styled_components5 = __toESM(require("styled-components"), 1);
-var ActionsContainer = import_styled_components5.default.div`
+var import_styled_components4 = __toESM(require("styled-components"), 1);
+var FADE_DURATION_MS = 150;
+var ANIMATE_DURATION_MS = 200;
+var ActionsContainer = import_styled_components4.default.div`
   display: flex;
-  gap: 2px;
-  margin-top: 4px;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 150ms ease;
+  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`
+  display: flex;
+  overflow: hidden;
+  max-width: ${({ $visible }) => $visible ? "40px" : "0"};
+  opacity: ${({ $visible }) => $visible ? 1 : 0};
+  transition: max-width ${ANIMATE_DURATION_MS}ms ease, opacity ${ANIMATE_DURATION_MS}ms ease;
 `;
 
 // src/chat/chat-message-actions/chat-message-actions.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function ChatMessageActions({ messageId, content: content2, role, isHelpful }) {
+var import_jsx_runtime4 = 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_react7.useCallback)(() => {
+  const handleCopy = (0, import_react5.useCallback)(() => {
     copy(content2);
     onCopyMessage?.(messageId);
   }, [content2, messageId, copy, onCopyMessage]);
-  const handleThumbUp = (0, import_react7.useCallback)(() => {
+  const handleThumbUp = (0, import_react5.useCallback)(() => {
     onThumbUpClick?.(messageId, isHelpful === true ? null : true);
   }, [messageId, isHelpful, onThumbUpClick]);
-  const handleThumbDown = (0, import_react7.useCallback)(() => {
+  const handleThumbDown = (0, import_react5.useCallback)(() => {
     onThumbDownClick?.(messageId, isHelpful === false ? null : false);
   }, [messageId, isHelpful, onThumbDownClick]);
-  const isAssistant = role === "assistant";
+  const isAssistant = role === MESSAGE_ROLE.ASSISTANT;
   const hasFeedback = isAssistant && (onThumbUpClick || onThumbDownClick);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(ActionsContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ActionsContainer, { $role: role, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       IconButton,
       {
         icon: isCopied ? IconCheck : IconCopy,
@@ -17114,7 +17190,7 @@ function ChatMessageActions({ messageId, content: content2, role, isHelpful }) {
         "aria-label": isCopied ? "Copied" : "Copy message"
       }
     ),
-    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AnimatedAction, { $visible: isHelpful !== false, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       IconButton,
       {
         icon: IconThumbUp,
@@ -17122,8 +17198,8 @@ function ChatMessageActions({ messageId, content: content2, role, isHelpful }) {
         isSelected: isHelpful === true,
         "aria-label": "Good response"
       }
-    ),
-    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    ) }),
+    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AnimatedAction, { $visible: isHelpful !== true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       IconButton,
       {
         icon: IconThumbDown,
@@ -17131,41 +17207,45 @@ function ChatMessageActions({ messageId, content: content2, role, isHelpful }) {
         isSelected: isHelpful === false,
         "aria-label": "Bad response"
       }
-    )
+    ) })
   ] });
 }
 
 // src/chat/chat-message/chat-message-styles.ts
-var import_styled_components6 = __toESM(require("styled-components"), 1);
-var MessageRow = import_styled_components6.default.div`
-  display: flex;
-  justify-content: ${({ $role }) => $role === "user" ? "flex-end" : "flex-start"};
-`;
-var MessageContainer = import_styled_components6.default.div`
+var import_styled_components5 = __toESM(require("styled-components"), 1);
+var MessageRow = import_styled_components5.default.div`
   display: flex;
-  flex-direction: column;
-  align-items: ${({ $role }) => $role === "user" ? "flex-end" : "flex-start"};
-  max-width: 90%;
+  justify-content: ${({ $role }) => $role === MESSAGE_ROLE.USER ? "flex-end" : "flex-start"};
 
   &:hover ${ActionsContainer} {
     opacity: 1;
     pointer-events: auto;
   }
 `;
-var MessageBubble = import_styled_components6.default.div`
-  ${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
+var MessageContainer = import_styled_components5.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: ${({ $role }) => $role === MESSAGE_ROLE.USER ? "flex-end" : "flex-start"};
+  max-width: 90%;
+  width: ${({ $role }) => $role === MESSAGE_ROLE.USER ? "auto" : "100%"};
+  gap: 12px;
+`;
+var MessageBubble = import_styled_components5.default.div`
+  ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};
   color: ${colors["brown-100"]};
-  background: ${({ $role }) => $role === "user" ? colors.white : "transparent"};
-  padding: ${({ $role }) => $role === "user" ? "12px 16px" : "0"};
-  border-radius: ${({ $role }) => $role === "user" ? "16px" : "0"};
+  background: ${({ $role }) => $role === MESSAGE_ROLE.USER ? colors.white : "transparent"};
+  padding: ${({ $role }) => $role === MESSAGE_ROLE.USER ? "12px 16px" : "0"};
+  border-radius: ${({ $role }) => $role === MESSAGE_ROLE.USER ? "16px" : "0"};
+  max-width: 100%;
+  min-width: 0;
 `;
 
 // src/chat/chat-message/chat-message.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function ChatMessage({ message }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageRow, { $role: message.role, 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 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MessageRow, { $role: message.role, 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)(
       ChatMessageActions,
       {
         messageId: message.id,
@@ -17177,269 +17257,76 @@ function ChatMessage({ message }) {
   ] }) });
 }
 
-// src/chat/hooks/use-auto-scroll.ts
-var import_react8 = require("react");
-function useAutoScroll(messageCount) {
-  const scrollContainerRef = (0, import_react8.useRef)(null);
-  const sentinelRef = (0, import_react8.useRef)(null);
-  const [isAtBottom, setIsAtBottom] = (0, import_react8.useState)(true);
-  const prevMessageCountRef = (0, import_react8.useRef)(messageCount);
-  const hasInitializedRef = (0, import_react8.useRef)(false);
-  (0, import_react8.useLayoutEffect)(() => {
-    const el = scrollContainerRef.current;
-    if (el) {
-      el.scrollTop = el.scrollHeight;
-    }
-  }, []);
-  (0, import_react8.useEffect)(() => {
-    if (!hasInitializedRef.current) {
-      hasInitializedRef.current = true;
-      requestAnimationFrame(() => {
-        const el = scrollContainerRef.current;
-        if (el) {
-          el.scrollTop = el.scrollHeight;
-        }
-      });
-    }
-  }, []);
-  (0, import_react8.useEffect)(() => {
-    const sentinel = sentinelRef.current;
-    const scrollContainer = scrollContainerRef.current;
-    if (!sentinel || !scrollContainer) return;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        setIsAtBottom(entry.isIntersecting);
-      },
-      { root: scrollContainer, threshold: 0 }
-    );
-    observer.observe(sentinel);
-    return () => observer.disconnect();
-  }, []);
-  (0, import_react8.useEffect)(() => {
-    if (!hasInitializedRef.current) return;
-    if (messageCount > prevMessageCountRef.current) {
-      requestAnimationFrame(() => {
-        const el = scrollContainerRef.current;
-        if (el) {
-          el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
-        }
-      });
-    }
-    prevMessageCountRef.current = messageCount;
-  }, [messageCount]);
-  const scrollToBottom = (0, import_react8.useCallback)(() => {
-    const el = scrollContainerRef.current;
-    if (el) {
-      el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
-    }
-  }, []);
-  return { scrollContainerRef, sentinelRef, isAtBottom, scrollToBottom };
-}
-
-// src/chat/chat-message-list/chat-message-list-styles.ts
-var import_styled_components7 = __toESM(require("styled-components"), 1);
-var ListContainer = import_styled_components7.default.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: ${colors["brown-30"]};
-    border-radius: 3px;
-  }
-`;
-var MessagesList = import_styled_components7.default.div`
-  display: flex;
-  flex-direction: column;
-  gap: 40px;
-  padding: 0 16px 32px 16px;
-`;
-var ScrollSentinel = import_styled_components7.default.div`
-  flex-shrink: 0;
-  height: 16px;
-`;
-
-// src/chat/chat-message-list/chat-message-list.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function ChatMessageList() {
-  const { messages } = useChatContext();
-  const { scrollContainerRef, sentinelRef } = useAutoScroll(messages.length);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ListContainer, { ref: scrollContainerRef, "data-testid": "chat-list-container", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MessagesList, { children: messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChatMessage, { message }, message.id)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ScrollSentinel, { ref: sentinelRef, "data-testid": "chat-scroll-sentinel" })
-  ] });
-}
-
-// src/chat/chat-composer/chat-composer.tsx
-var import_react9 = require("react");
-
-// src/chat/chat-composer/chat-composer-styles.ts
-var import_styled_components8 = __toESM(require("styled-components"), 1);
-var ComposerContainer = import_styled_components8.default.div`
-  position: relative;
-  background: ${colors.white};
-  border-radius: 12px;
-  box-shadow: 0 0 4px 0 ${colors["brown-alpha-12"]};
-  padding: 8px 0;
-`;
-var TextArea = import_styled_components8.default.textarea`
-  display: block;
-  width: 100%;
-  resize: none;
-  border: none;
-  background: transparent;
-  ${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
-  color: ${colors["brown-90"]};
-  padding: 4px 46px 4px 16px;
-  min-height: 20px;
-  max-height: 200px;
-  overflow-y: auto;
-  box-sizing: border-box;
+// src/components/keyboard-shortcut/keyboard-shortcut-styles.ts
+var import_styled_components6 = __toESM(require("styled-components"), 1);
 
-  &::placeholder {
-    color: ${colors["brown-60"]};
-  }
+// src/components/keyboard-shortcut/types.ts
+var KEYBOARD_SHORTCUT_VARIANTS = {
+  OUTLINED: "outlined",
+  FILLED: "filled"
+};
 
-  &:focus {
-    outline: none;
-  }
+// src/components/keyboard-shortcut/keyboard-shortcut-styles.ts
+var variantStyles = {
+  [KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: import_styled_components6.css`
+    border: 1px solid ${colors["white-alpha-40"]};
+    color: ${colors["brown-10"]};
+  `,
+  [KEYBOARD_SHORTCUT_VARIANTS.FILLED]: import_styled_components6.css`
+    background: ${colors["brown-80"]};
+    color: ${colors["brown-10"]};
+  `
+};
+var Wrapper = import_styled_components6.default.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
 `;
-var SendButton = import_styled_components8.default.button`
-  position: absolute;
-  bottom: 8px;
-  right: 8px;
-  width: 30px;
-  height: 30px;
-  border: none;
-  border-radius: 12px;
-  cursor: pointer;
-  display: flex;
+var Key = import_styled_components6.default.kbd`
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: ${colors["brown-100"]};
-  color: ${colors.white};
-  transition: background-color 75ms;
-  padding: 0;
-
-  &:disabled {
-    background: ${colors["brown-50"]};
-    cursor: default;
-  }
+  padding: 2px;
+  border-radius: 6px;
+  ${({ $variant }) => variantStyles[$variant]};
 `;
 
-// src/chat/chat-composer/chat-composer.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-function ChatComposer({ placeholder = "Type a message..." }) {
-  const { onSendMessage, isLoading, onStop } = useChatContext();
-  const [value2, setValue] = (0, import_react9.useState)("");
-  const textAreaRef = (0, import_react9.useRef)(null);
-  const isEmpty = value2.trim().length === 0;
-  const resizeTextArea = (0, import_react9.useCallback)(() => {
-    const el = textAreaRef.current;
-    if (!el) return;
-    el.style.height = "auto";
-    el.style.height = `${el.scrollHeight}px`;
-  }, []);
-  (0, import_react9.useEffect)(() => {
-    resizeTextArea();
-  }, [value2, resizeTextArea]);
-  (0, import_react9.useEffect)(() => {
-    textAreaRef.current?.focus();
-  }, []);
-  const handleSend = (0, import_react9.useCallback)(() => {
-    const trimmed = value2.trim();
-    if (!trimmed) return;
-    onSendMessage(trimmed);
-    setValue("");
-    requestAnimationFrame(() => textAreaRef.current?.focus());
-  }, [value2, onSendMessage]);
-  const handleKeyDown = (0, import_react9.useCallback)(
-    (e) => {
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        handleSend();
-      }
-    },
-    [handleSend]
-  );
-  const handleChange = (0, import_react9.useCallback)((e) => {
-    setValue(e.target.value);
-  }, []);
-  const handleButtonClick = (0, import_react9.useCallback)(() => {
-    if (isLoading && onStop) {
-      onStop();
-    } else {
-      handleSend();
-    }
-  }, [isLoading, onStop, handleSend]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ComposerContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      TextArea,
-      {
-        ref: textAreaRef,
-        value: value2,
-        onChange: handleChange,
-        onKeyDown: handleKeyDown,
-        placeholder,
-        rows: 1
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      SendButton,
-      {
-        onClick: handleButtonClick,
-        disabled: !isLoading && isEmpty,
-        "aria-label": isLoading ? "Stop generating" : "Send message",
-        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { icon: IconPlayerStopFilled, size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { icon: IconArrowUp, size: 16 })
-      }
-    )
-  ] });
+// src/components/keyboard-shortcut/keyboard-shortcut.tsx
+var import_jsx_runtime6 = 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)) });
 }
 
-// src/chat/chat-namespace.ts
-var Chat = {
-  Root: ChatRoot,
-  MessageList: ChatMessageList,
-  Composer: ChatComposer
-};
-
-// src/keyboard-shortcut/keyboard-shortcut-styles.ts
-var import_styled_components9 = __toESM(require("styled-components"), 1);
-var Wrapper = import_styled_components9.default.div`
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-`;
-var Key = import_styled_components9.default.kbd`
-  padding: 1px 4px;
-  border-radius: 4px;
-  border: 1px solid ${colors["brown-70"]};
-  border-bottom-width: 2px;
-  ${typographyMixin(typographyTypes.GEIST_LABEL_CAPTION_MEDIUM)};
-  color: inherit;
-`;
-
-// src/keyboard-shortcut/keyboard-shortcut.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-function KeyboardShortcut({ keys, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Wrapper, { className, children: keys.map((key2) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Key, { children: key2 }, key2)) });
+// src/components/keyboard-shortcut/icons/icon-ctrl.tsx
+var import_jsx_runtime7 = 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)(
+    "text",
+    {
+      x: "50%",
+      y: "50%",
+      dominantBaseline: "central",
+      textAnchor: "middle",
+      fill: "currentColor",
+      fontFamily: "Geist, sans-serif",
+      fontWeight: 300,
+      fontSize: 14,
+      children: "Ctrl"
+    }
+  ) });
 }
 
-// src/lottie/lottie.tsx
-var import_react11 = require("react");
+// src/components/lottie/lottie.tsx
+var import_react7 = require("react");
 
-// src/lottie/lottie-styles.ts
-var import_styled_components10 = __toESM(require("styled-components"), 1);
-var LottieContainer = import_styled_components10.default.div`
+// src/components/lottie/lottie-styles.ts
+var import_styled_components7 = __toESM(require("styled-components"), 1);
+var LottieContainer = import_styled_components7.default.div`
   display: inline-flex;
   width: ${({ $width }) => typeof $width === "number" ? `${$width}px` : $width};
   height: ${({ $height }) => typeof $height === "number" ? `${$height}px` : $height};
@@ -17450,8 +17337,8 @@ var LottieContainer = import_styled_components10.default.div`
   }
 `;
 
-// src/lottie/use-lottie.ts
-var import_react10 = require("react");
+// src/components/lottie/use-lottie.ts
+var import_react6 = require("react");
 var import_lottie_web = __toESM(require_lottie(), 1);
 function useLottie({
   animationData: animationData2,
@@ -17466,17 +17353,17 @@ function useLottie({
   onLoopComplete,
   onEnterFrame
 }) {
-  const containerRef = (0, import_react10.useRef)(null);
-  const animationRef = (0, import_react10.useRef)(null);
-  const onAnimationLoadedRef = (0, import_react10.useRef)(onAnimationLoaded);
-  const onCompleteRef = (0, import_react10.useRef)(onComplete);
-  const onLoopCompleteRef = (0, import_react10.useRef)(onLoopComplete);
-  const onEnterFrameRef = (0, import_react10.useRef)(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);
   onAnimationLoadedRef.current = onAnimationLoaded;
   onCompleteRef.current = onComplete;
   onLoopCompleteRef.current = onLoopComplete;
   onEnterFrameRef.current = onEnterFrame;
-  (0, import_react10.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!containerRef.current) return;
     const anim = import_lottie_web.default.loadAnimation({
       container: containerRef.current,
@@ -17567,9 +17454,9 @@ function createLottieRef(animationRef) {
   };
 }
 
-// src/lottie/lottie.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Lottie = (0, import_react11.forwardRef)(function Lottie2({
+// src/components/lottie/lottie.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Lottie = (0, import_react7.forwardRef)(function Lottie2({
   animationData: animationData2,
   autoplay,
   loop,
@@ -17599,8 +17486,8 @@ var Lottie = (0, import_react11.forwardRef)(function Lottie2({
     onLoopComplete,
     onEnterFrame
   });
-  (0, import_react11.useImperativeHandle)(ref, () => createLottieRef(animationRef), [animationRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  (0, import_react7.useImperativeHandle)(ref, () => createLottieRef(animationRef), [animationRef]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     LottieContainer,
     {
       ref: containerRef,
@@ -17612,18 +17499,101 @@ var Lottie = (0, import_react11.forwardRef)(function Lottie2({
     }
   );
 });
+
+// src/components/text-area/text-area.tsx
+var import_react8 = require("react");
+
+// src/utils/merge-refs.ts
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    }
+  };
+}
+
+// src/components/text-area/text-area-styles.ts
+var import_styled_components8 = __toESM(require("styled-components"), 1);
+var StyledTextArea = import_styled_components8.default.textarea`
+  ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};
+  color: ${colors["brown-100"]};
+  border: none;
+  outline: none;
+  resize: none;
+  width: 100%;
+  background: transparent;
+  vertical-align: bottom;
+  max-height: ${({ $maxHeight }) => $maxHeight ? `${$maxHeight}px` : "none"};
+  overflow-y: ${({ $maxHeight }) => $maxHeight ? "auto" : "hidden"};
+
+  &::placeholder {
+    color: ${colors["brown-50"]};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+// 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)(() => {
+    const el = internalRef.current;
+    if (el) {
+      el.style.height = "auto";
+      el.style.height = `${el.scrollHeight}px`;
+    }
+  }, [value2]);
+  const handleChange = (0, import_react8.useCallback)(
+    (e) => {
+      onChange(e.target.value);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    StyledTextArea,
+    {
+      ref: mergeRefs(internalRef, externalRef),
+      value: value2,
+      onChange: handleChange,
+      placeholder,
+      $maxHeight: maxHeight,
+      rows,
+      autoFocus,
+      onKeyDown,
+      disabled,
+      className
+    }
+  );
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Chat,
+  ChatContext,
+  ChatMessage,
   Icon,
   IconButton,
+  IconCtrl,
+  KEYBOARD_SHORTCUT_VARIANTS,
   KeyboardShortcut,
   Lottie,
+  MESSAGE_ROLE,
+  TextArea,
   colors,
   fontFamilies,
+  markdownToPlainText,
+  mergeRefs,
   typographyMixin,
   typographyStyles,
-  typographyTypes
+  typographyTypes,
+  useChatContext,
+  useCopyToClipboard
 });
 /*! Bundled license information:
 
@@ -17639,12 +17609,10 @@ lottie-web/build/player/lottie.js:
 
 @tabler/icons-react/dist/esm/defaultAttributes.mjs:
 @tabler/icons-react/dist/esm/createReactComponent.mjs:
-@tabler/icons-react/dist/esm/icons/IconArrowUp.mjs:
 @tabler/icons-react/dist/esm/icons/IconCheck.mjs:
 @tabler/icons-react/dist/esm/icons/IconCopy.mjs:
 @tabler/icons-react/dist/esm/icons/IconThumbDown.mjs:
 @tabler/icons-react/dist/esm/icons/IconThumbUp.mjs:
-@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.mjs:
 @tabler/icons-react/dist/esm/tabler-icons-react.mjs:
   (**
    * @license @tabler/icons-react v3.37.1 - MIT