@shapesos/clay 0.4.1 → 0.5.0

package/dist/chat.cjs

@@ -32,6 +32,7 @@ var chat_exports = {};
 __export(chat_exports, {
   ChatContext: () => ChatContext,
   ChatMessage: () => ChatMessage,
+  MESSAGE_ROLE: () => MESSAGE_ROLE,
   useChatContext: () => useChatContext,
   useCopyToClipboard: () => useCopyToClipboard
 });
@@ -39,6 +40,7 @@ module.exports = __toCommonJS(chat_exports);
 
 // 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
@@ -49,6 +51,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",
@@ -149,6 +152,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",
@@ -242,6 +246,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,
@@ -418,84 +429,138 @@ function typographyMixin(type) {
 
 // src/chat/chat-message-content/chat-message-content-styles.ts
 var ContentWrapper = import_styled_components.default.div`
-  ${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
+  ${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;
   }
 
-  & p + p {
-    margin-top: 8px;
+  & 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;
+  }
+
+  & 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;
+  }
+
+  & ol ol {
+    list-style-type: lower-alpha;
   }
 
-  & pre code {
-    padding: 0;
-    background: none;
-    border-radius: 0;
+  & ol ol ol {
+    list-style-type: lower-roman;
   }
 
-  & code {
-    padding: 2px 4px;
-    background: ${colors["brown-10"]};
-    border-radius: 4px;
+  & 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_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 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContentWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default], children: content }) });
+  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: content }) });
 }
 
 // src/chat/chat-message-actions/chat-message-actions.tsx
-var import_react6 = require("react");
+var import_react5 = require("react");
 
 // node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
 var import_react = require("react");
@@ -569,9 +634,6 @@ var IconThumbDown = createReactComponent("outline", "thumb-down", "ThumbDown", _
 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);
 
-// src/components/icon-button/icon-button.tsx
-var import_react3 = require("react");
-
 // src/components/icon/icon.tsx
 var import_react2 = require("react");
 
@@ -580,8 +642,8 @@ var import_styled_components2 = __toESM(require("styled-components"), 1);
 var STROKE_WIDTH_BY_SIZE = {
   12: 1.4,
   14: 1.4,
-  16: 1.6,
-  18: 1.6,
+  16: 1.8,
+  18: 1.8,
   20: 1.8,
   24: 1.8
 };
@@ -616,9 +678,15 @@ var Icon = (0, import_react2.forwardRef)(function Icon2({ icon: IconComponent, s
 
 // src/components/icon-button/icon-button-styles.ts
 var import_styled_components3 = __toESM(require("styled-components"), 1);
-var DIMENSIONS = {
-  small: 28,
-  medium: 32
+var PADDING = {
+  short: {
+    small: "4px",
+    medium: "6px"
+  },
+  long: {
+    small: "4px 6px",
+    medium: "6px 10px"
+  }
 };
 var BORDER_RADIUS = {
   small: 6,
@@ -628,9 +696,7 @@ 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"};
@@ -656,16 +722,29 @@ var Button = import_styled_components3.default.button`
 // 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_react3.forwardRef)(function IconButton2({ icon, size = "small", isSelected = false, disabled = false, onClick, className, "aria-label": ariaLabel }, ref) {
+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,
@@ -673,13 +752,13 @@ var IconButton = (0, import_react3.forwardRef)(function IconButton2({ icon, 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_react4 = require("react");
-var ChatContext = (0, import_react4.createContext)(null);
+var import_react3 = require("react");
+var ChatContext = (0, import_react3.createContext)(null);
 function useChatContext() {
-  const context = (0, import_react4.useContext)(ChatContext);
+  const context = (0, import_react3.useContext)(ChatContext);
   if (!context) {
     throw new Error("useChatContext must be used within a Chat.Root component");
   }
@@ -687,7 +766,7 @@ function useChatContext() {
 }
 
 // src/chat/hooks/use-copy-to-clipboard.ts
-var import_react5 = require("react");
+var import_react4 = require("react");
 
 // src/utils/clipboard.ts
 function copyToClipboard(text, options) {
@@ -697,18 +776,33 @@ function copyToClipboard(text, 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, index) => inlineCodeSnippets[Number(index)]);
+  return result;
+}
+
 // src/chat/hooks/use-copy-to-clipboard.ts
 var RESET_DELAY_MS = 2e3;
 function useCopyToClipboard() {
-  const [isCopied, setIsCopied] = (0, import_react5.useState)(false);
-  const timeoutRef = (0, import_react5.useRef)(null);
-  (0, import_react5.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_react5.useCallback)((text) => {
-    copyToClipboard(text, {
+  const copy = (0, import_react4.useCallback)((text) => {
+    copyToClipboard(markdownToPlainText(text), {
       onSuccess: () => {
         setIsCopied(true);
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
@@ -722,35 +816,48 @@ 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_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_runtime4 = require("react/jsx-runtime");
-function ChatMessageActions({ messageId, content, role, isHelpful }) {
+function ChatMessageActions({ className, messageId, content, role, isHelpful }) {
   const { onCopyMessage, onThumbUpClick, onThumbDownClick } = useChatContext();
   const { isCopied, copy } = useCopyToClipboard();
-  const handleCopy = (0, import_react6.useCallback)(() => {
+  const handleCopy = (0, import_react5.useCallback)(() => {
     copy(content);
     onCopyMessage?.(messageId);
   }, [content, messageId, copy, onCopyMessage]);
-  const handleThumbUp = (0, import_react6.useCallback)(() => {
+  const handleThumbUp = (0, import_react5.useCallback)(() => {
     onThumbUpClick?.(messageId, isHelpful === true ? null : true);
   }, [messageId, isHelpful, onThumbUpClick]);
-  const handleThumbDown = (0, import_react6.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_runtime4.jsxs)(ActionsContainer, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ActionsContainer, { $role: role, className, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       IconButton,
       {
@@ -759,7 +866,7 @@ function ChatMessageActions({ messageId, content, role, isHelpful }) {
         "aria-label": isCopied ? "Copied" : "Copy message"
       }
     ),
-    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AnimatedAction, { $visible: isHelpful !== false, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       IconButton,
       {
         icon: IconThumbUp,
@@ -767,8 +874,8 @@ function ChatMessageActions({ messageId, content, role, isHelpful }) {
         isSelected: isHelpful === true,
         "aria-label": "Good response"
       }
-    ),
-    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    ) }),
+    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AnimatedAction, { $visible: isHelpful !== true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       IconButton,
       {
         icon: IconThumbDown,
@@ -776,7 +883,7 @@ function ChatMessageActions({ messageId, content, role, isHelpful }) {
         isSelected: isHelpful === false,
         "aria-label": "Bad response"
       }
-    )
+    ) })
   ] });
 }
 
@@ -784,25 +891,29 @@ function ChatMessageActions({ messageId, content, role, isHelpful }) {
 var import_styled_components5 = __toESM(require("styled-components"), 1);
 var MessageRow = import_styled_components5.default.div`
   display: flex;
-  justify-content: ${({ $role }) => $role === "user" ? "flex-end" : "flex-start"};
-`;
-var MessageContainer = 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 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_XS_MEDIUM)};
+  ${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
@@ -825,6 +936,7 @@ function ChatMessage({ message }) {
 0 && (module.exports = {
   ChatContext,
   ChatMessage,
+  MESSAGE_ROLE,
   useChatContext,
   useCopyToClipboard
 });