entangle-ui 0.6.3 → 0.7.0

package/dist/esm/assets/src/components/primitives/TextArea/TextArea.css.ts.vanilla-DTOMjGkp.css

@@ -0,0 +1,85 @@
+.TextArea_textAreaContainerStyle__nwf0m90 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--etui-spacing-xs);
+  width: 100%;
+}
+.TextArea_textAreaWrapperRecipe__nwf0m91 {
+  position: relative;
+  display: flex;
+  border: 1px solid;
+  border-radius: var(--etui-radius-md);
+  transition: all var(--etui-transition-normal);
+  box-sizing: border-box;
+}
+.TextArea_textAreaWrapperRecipe_size_sm__nwf0m92 {
+  min-height: 48px;
+  padding: var(--etui-spacing-xs) var(--etui-spacing-sm);
+}
+.TextArea_textAreaWrapperRecipe_size_md__nwf0m93 {
+  min-height: 64px;
+  padding: var(--etui-spacing-sm) var(--etui-spacing-md);
+}
+.TextArea_textAreaWrapperRecipe_size_lg__nwf0m94 {
+  min-height: 88px;
+  padding: var(--etui-spacing-md) var(--etui-spacing-lg);
+}
+.TextArea_textAreaWrapperRecipe_error_true__nwf0m95 {
+  border-color: var(--etui-color-border-error);
+}
+.TextArea_textAreaWrapperRecipe_disabled_true__nwf0m97 {
+  background: var(--etui-color-surface-disabled);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.TextArea_textAreaWrapperRecipe_disabled_false__nwf0m98 {
+  background: var(--etui-color-surface-default);
+}
+.TextArea_textAreaWrapperRecipe_compound_0__nwf0m9b {
+  border-color: var(--etui-color-border-focus);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--etui-color-accent-primary) 12.5%, transparent);
+}
+.TextArea_textAreaWrapperRecipe_compound_1__nwf0m9c {
+  border-color: var(--etui-color-border-default);
+}
+.TextArea_textAreaWrapperRecipe_compound_1__nwf0m9c:hover:not(:focus-within) {
+  border-color: var(--etui-color-border-focus);
+}
+.TextArea_textAreaWrapperRecipe_compound_2__nwf0m9d {
+  border-color: var(--etui-color-border-default);
+}
+.TextArea_textAreaRecipe__nwf0m9e {
+  flex: 1;
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--etui-font-family-sans);
+  color: var(--etui-color-text-primary);
+  line-height: var(--etui-line-height-normal);
+  box-sizing: border-box;
+}
+.TextArea_textAreaRecipe__nwf0m9e::placeholder {
+  color: var(--etui-color-text-muted);
+}
+.TextArea_textAreaRecipe__nwf0m9e:disabled {
+  cursor: not-allowed;
+}
+.TextArea_textAreaRecipe_size_sm__nwf0m9f {
+  font-size: var(--etui-font-size-md);
+}
+.TextArea_textAreaRecipe_size_md__nwf0m9g {
+  font-size: var(--etui-font-size-md);
+}
+.TextArea_textAreaRecipe_size_lg__nwf0m9h {
+  font-size: var(--etui-font-size-lg);
+}
+.TextArea_textAreaRecipe_monospace_true__nwf0m9i {
+  font-family: var(--etui-font-family-mono);
+}
+.TextArea_textAreaFooterStyle__nwf0m9j {
+  display: flex;
+  justify-content: flex-end;
+  font-size: var(--etui-font-size-xs);
+  color: var(--etui-color-text-muted);
+}

package/dist/esm/assets/src/theme/{darkTheme.css.ts.vanilla-DCe89yCJ.css → darkTheme.css.ts.vanilla-ab1WD4dr.css}

@@ -3,11 +3,14 @@
   --etui-color-bg-secondary: #2d2d2d;
   --etui-color-bg-tertiary: #3a3a3a;
   --etui-color-bg-elevated: #404040;
+  --etui-color-bg-inset: rgba(0, 0, 0, 0.2);
   --etui-color-surface-default: #2d2d2d;
   --etui-color-surface-hover: #363636;
   --etui-color-surface-active: #404040;
   --etui-color-surface-disabled: #1f1f1f;
   --etui-color-surface-white-overlay: rgba(255, 255, 255, 0.1);
+  --etui-color-surface-row: transparent;
+  --etui-color-surface-row-hover: rgba(255, 255, 255, 0.03);
   --etui-color-border-default: #4a4a4a;
   --etui-color-border-focus: #007acc;
   --etui-color-border-error: #f44336;

package/dist/esm/assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css

@@ -0,0 +1,21 @@
+.etuiGlobalScrollbars * {
+  scrollbar-width: thin;
+  scrollbar-color: var(--etui-color-text-disabled) transparent;
+}
+.etuiGlobalScrollbars *::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.etuiGlobalScrollbars *::-webkit-scrollbar-track {
+  background: transparent;
+}
+.etuiGlobalScrollbars *::-webkit-scrollbar-thumb {
+  background: var(--etui-color-text-disabled);
+  border-radius: 4px;
+}
+.etuiGlobalScrollbars *::-webkit-scrollbar-thumb:hover {
+  background: var(--etui-color-text-muted);
+}
+.etuiGlobalScrollbars *::-webkit-scrollbar-corner {
+  background: transparent;
+}

package/dist/esm/assets/src/utils/animations.css.ts.vanilla-DOVlpljP.css

@@ -0,0 +1,58 @@
+@keyframes animations_spinKeyframe__1boy3ak0 {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes animations_pulseKeyframe__1boy3ak1 {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+@keyframes animations_blinkKeyframe__1boy3ak2 {
+  0%, 50% {
+    opacity: 1;
+  }
+  51%, 100% {
+    opacity: 0;
+  }
+}
+@keyframes animations_fadeInKeyframe__1boy3ak3 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.animations_animSpin__1boy3ak4 {
+  animation: animations_spinKeyframe__1boy3ak0 1s linear infinite;
+}
+.animations_animPulse__1boy3ak5 {
+  animation: animations_pulseKeyframe__1boy3ak1 1.5s ease-in-out infinite;
+}
+.animations_animBlink__1boy3ak6 {
+  animation: animations_blinkKeyframe__1boy3ak2 1s steps(1) infinite;
+}
+.animations_animFadeIn__1boy3ak7 {
+  animation: animations_fadeInKeyframe__1boy3ak3 var(--etui-transition-normal) ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .animations_animSpin__1boy3ak4 {
+    animation: none;
+  }
+  .animations_animPulse__1boy3ak5 {
+    animation: none;
+  }
+  .animations_animBlink__1boy3ak6 {
+    animation: none;
+  }
+  .animations_animFadeIn__1boy3ak7 {
+    animation: none;
+  }
+}

package/dist/esm/components/editor/ChatPanel/ChatInput.js

@@ -20,6 +20,7 @@ const ChatInput = /*#__PURE__*/ React.memo(({ value: controlledValue, onChange:
         submitKey,
         onSubmit: handleSubmit,
         maxLines,
+        attachmentsCount: attachments?.length ?? 0,
     });
     // Support controlled mode
     const currentValue = controlledValue ?? chatInput.value;
@@ -29,29 +30,39 @@ const ChatInput = /*#__PURE__*/ React.memo(({ value: controlledValue, onChange:
         }
         chatInput.handleChange(e);
     }, [controlledOnChange, chatInput]);
+    const attachmentsCount = attachments?.length ?? 0;
     const handleKeyDown = useCallback((e) => {
         // In controlled mode, override the internal value check
         if (controlledValue !== undefined) {
             const isSubmitKey = submitKey === 'enter'
                 ? e.key === 'Enter' && !e.shiftKey
                 : e.key === 'Enter' && (e.ctrlKey || e.metaKey);
-            if (isSubmitKey && controlledValue.trim()) {
+            if (isSubmitKey && (controlledValue.trim() || attachmentsCount > 0)) {
                 e.preventDefault();
-                onSubmit?.(controlledValue, attachments ?? []);
+                onSubmit?.(controlledValue.trim(), attachments ?? []);
                 return;
             }
         }
         chatInput.handleKeyDown(e);
-    }, [controlledValue, submitKey, onSubmit, attachments, chatInput]);
+    }, [
+        controlledValue,
+        submitKey,
+        onSubmit,
+        attachments,
+        attachmentsCount,
+        chatInput,
+    ]);
     const handleSendClick = useCallback(() => {
         const val = controlledValue ?? chatInput.value;
-        if (val.trim()) {
-            onSubmit?.(val, attachments ?? []);
+        const canSubmit = val.trim() || attachmentsCount > 0;
+        if (canSubmit) {
+            onSubmit?.(val.trim(), attachments ?? []);
             if (controlledValue === undefined) {
                 chatInput.clear();
             }
         }
-    }, [controlledValue, chatInput, onSubmit, attachments]);
+    }, [controlledValue, chatInput, onSubmit, attachments, attachmentsCount]);
+    const canSubmit = (currentValue.trim().length > 0 || attachmentsCount > 0) && !disabled;
     const lineHeight = 18; // approximate line-height in px
     const maxHeightPx = `${maxLines * lineHeight}px`;
     const shortcutLabel = submitKey === 'enter'
@@ -59,7 +70,7 @@ const ChatInput = /*#__PURE__*/ React.memo(({ value: controlledValue, onChange:
         : 'Ctrl+Enter to send, Enter for newline';
     return (jsxs("div", { ref: ref, className: cx(inputContainerStyle, className), style: style, "data-testid": testId, ...rest, children: [prefix && jsx("div", { className: inputPrefixStyle, children: prefix }), attachments && attachments.length > 0 && (jsx("div", { className: inputAttachmentsStyle, children: attachments.map(att => (jsx(ChatAttachmentChip, { attachment: att, removable: !!onRemoveAttachment, onRemove: onRemoveAttachment }, att.id))) })), jsxs("div", { className: inputWrapperStyle, children: [jsx("textarea", { ref: chatInput.textareaRef, id: `chat-input-${inputId}`, className: inputTextareaStyle, style: assignInlineVars({
                             [inputMaxHeightVar]: maxHeightPx,
-                        }), value: currentValue, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, rows: 1, "aria-label": "Chat message input", "aria-keyshortcuts": shortcutLabel }), suffix, jsxs("div", { className: inputBottomBarStyle, children: [toolbar, streaming ? (jsx("button", { type: "button", className: inputStopButtonStyle, onClick: onStop, "aria-label": "Stop generating", children: jsx(StopIcon, {}) })) : (jsx("button", { type: "button", className: inputButtonStyle, onClick: handleSendClick, disabled: disabled || !currentValue.trim(), "aria-label": "Send message", children: jsx(SendIcon, {}) }))] })] })] }));
+                        }), value: currentValue, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, rows: 1, "aria-label": "Chat message input", "aria-keyshortcuts": shortcutLabel }), suffix, jsxs("div", { className: inputBottomBarStyle, children: [toolbar, streaming ? (jsx("button", { type: "button", className: inputStopButtonStyle, onClick: onStop, "aria-label": "Stop generating", children: jsx(StopIcon, {}) })) : (jsx("button", { type: "button", className: inputButtonStyle, onClick: handleSendClick, disabled: !canSubmit, "aria-label": "Send message", children: jsx(SendIcon, {}) }))] })] })] }));
 });
 ChatInput.displayName = 'ChatInput';
 

package/dist/esm/components/editor/ChatPanel/ChatInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInput.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatInput.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAoBA;AAEA;AAkBA;AAYA;AAEO;AAsBH;AAEA;;AAGE;;;AAMA;;AAED;;AAGD;AAEA;;AAGM;;AAEF;AACF;AAIF;;AAGI;AACE;;AAGI;AAEJ;;;;;;AAMF;AACF;AAIF;AACE;AACA;;AAEE;;;;;AAMJ;AACA;AAEA;AAEI;;;;;AAyEN;AAGF;;"}
+{"version":3,"file":"ChatInput.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatInput.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAoBA;AAEA;AAkBA;AAYA;AAEO;AAsBH;AAEA;;AAGE;;;AAMA;;AAEA;AACD;;AAGD;AAEA;;AAGM;;AAEF;AACF;AAIF;AAEA;;AAGI;AACE;;AAGI;AAEJ;;;;;;AAMF;AACF;;;;;;;AAQC;AAGH;AACE;;;;AAIE;;;;AAIJ;AAEA;AAGA;AACA;AAEA;AAEI;;;;;AAyEN;AAGF;;"}

package/dist/esm/components/editor/ChatPanel/ChatMarkdownRenderer.js

@@ -0,0 +1,268 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useMemo } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { Code } from '../../primitives/Code/Code.js';
+import { ChatCodeBlock } from './ChatCodeBlock.js';
+import { markdownTableStyle, markdownThStyle, markdownTdStyle, markdownHrStyle, markdownBlockquoteStyle, markdownListStyle, markdownListItemStyle, markdownHeadingStyle, markdownParagraphStyle, markdownRootStyle, markdownLinkStyle } from './ChatPanel.css.js';
+
+function escapeHtmlInText(text) {
+    return text;
+}
+function renderInline(text, options, keyPrefix) {
+    const parts = [];
+    let rest = text;
+    let index = 0;
+    // Ordered by precedence. Each pattern captures the full match so we
+    // can slice around it, and the content(s) we want to render.
+    const patterns = [
+        {
+            regex: /`([^`]+)`/,
+            render: (m, key) => jsx(Code, { children: m[1] }, key),
+        },
+        {
+            regex: /!\[([^\]]*)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/,
+            render: (m, key) => (jsx("img", { src: m[2], alt: m[1] ?? '', style: { maxWidth: '100%' } }, key)),
+        },
+        {
+            regex: /\[([^\]]+)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/,
+            render: (m, key) => (jsx("a", { href: m[2], target: options.linkTarget, rel: options.linkTarget === '_blank' ? 'noopener noreferrer' : undefined, className: markdownLinkStyle, children: m[1] }, key)),
+        },
+        {
+            regex: /\*\*([^*]+)\*\*/,
+            render: (m, key) => jsx("strong", { children: m[1] }, key),
+        },
+        {
+            regex: /__([^_]+)__/,
+            render: (m, key) => jsx("strong", { children: m[1] }, key),
+        },
+        {
+            regex: /(?<![*\w])\*([^*\n]+)\*(?![*\w])/,
+            render: (m, key) => jsx("em", { children: m[1] }, key),
+        },
+        {
+            regex: /(?<![_\w])_([^_\n]+)_(?![_\w])/,
+            render: (m, key) => jsx("em", { children: m[1] }, key),
+        },
+        {
+            regex: /~~([^~]+)~~/,
+            render: (m, key) => jsx("del", { children: m[1] }, key),
+        },
+    ];
+    while (rest.length > 0) {
+        let best = null;
+        for (const { regex, render } of patterns) {
+            const match = regex.exec(rest);
+            if (!match)
+                continue;
+            if (best === null || match.index < best.start) {
+                best = {
+                    start: match.index,
+                    length: match[0].length,
+                    node: render(match, `${keyPrefix}-i-${index++}`),
+                };
+            }
+        }
+        if (!best) {
+            parts.push(escapeHtmlInText(rest));
+            break;
+        }
+        if (best.start > 0) {
+            parts.push(escapeHtmlInText(rest.slice(0, best.start)));
+        }
+        parts.push(best.node);
+        rest = rest.slice(best.start + best.length);
+    }
+    return parts;
+}
+function parseBlocks(source, gfm) {
+    const lines = source.replace(/\r\n/g, '\n').split('\n');
+    const blocks = [];
+    let i = 0;
+    while (i < lines.length) {
+        const line = lines[i] ?? '';
+        // Skip blank lines between blocks.
+        if (/^\s*$/.test(line)) {
+            i++;
+            continue;
+        }
+        // Fenced code block
+        const fenceMatch = /^```(\w+)?\s*$/.exec(line);
+        if (fenceMatch) {
+            const language = fenceMatch[1];
+            const codeLines = [];
+            i++;
+            while (i < lines.length && !/^```\s*$/.test(lines[i] ?? '')) {
+                codeLines.push(lines[i] ?? '');
+                i++;
+            }
+            i++; // skip closing fence
+            blocks.push({
+                type: 'codeBlock',
+                content: codeLines.join('\n'),
+                language,
+            });
+            continue;
+        }
+        // Horizontal rule
+        if (/^\s*(---|\*\*\*|___)\s*$/.test(line)) {
+            blocks.push({ type: 'hr' });
+            i++;
+            continue;
+        }
+        // Heading (# through ######)
+        const headingMatch = /^(#{1,6})\s+(.*)$/.exec(line);
+        if (headingMatch) {
+            const hashes = headingMatch[1] ?? '';
+            const headingContent = headingMatch[2] ?? '';
+            blocks.push({
+                type: 'heading',
+                level: hashes.length,
+                content: headingContent.trim(),
+            });
+            i++;
+            continue;
+        }
+        // Blockquote — consecutive `> ` lines
+        if (/^\s*>/.test(line)) {
+            const quoteLines = [];
+            while (i < lines.length && /^\s*>/.test(lines[i] ?? '')) {
+                quoteLines.push((lines[i] ?? '').replace(/^\s*>\s?/, ''));
+                i++;
+            }
+            blocks.push({ type: 'blockquote', content: quoteLines.join('\n') });
+            continue;
+        }
+        // Unordered list — lines beginning with `- `, `* `, or `+ `
+        if (/^\s*[-*+]\s+/.test(line)) {
+            const items = [];
+            while (i < lines.length && /^\s*[-*+]\s+/.test(lines[i] ?? '')) {
+                items.push((lines[i] ?? '').replace(/^\s*[-*+]\s+/, ''));
+                i++;
+            }
+            blocks.push({ type: 'list', items });
+            continue;
+        }
+        // Ordered list — `1. ...`
+        if (/^\s*\d+\.\s+/.test(line)) {
+            const items = [];
+            while (i < lines.length && /^\s*\d+\.\s+/.test(lines[i] ?? '')) {
+                items.push((lines[i] ?? '').replace(/^\s*\d+\.\s+/, ''));
+                i++;
+            }
+            blocks.push({ type: 'orderedList', items });
+            continue;
+        }
+        // GFM pipe table — a header row, a separator `---|---`, then rows.
+        if (gfm &&
+            /\|/.test(line) &&
+            i + 1 < lines.length &&
+            /^\s*\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)+\|?\s*$/.test(lines[i + 1] ?? '')) {
+            const split = (row) => row
+                .replace(/^\s*\|/, '')
+                .replace(/\|\s*$/, '')
+                .split('|')
+                .map(cell => cell.trim());
+            const header = split(line);
+            const rawAlign = split(lines[i + 1] ?? '');
+            const align = rawAlign.map(cell => {
+                const left = cell.startsWith(':');
+                const right = cell.endsWith(':');
+                if (left && right)
+                    return 'center';
+                if (right)
+                    return 'right';
+                if (left)
+                    return 'left';
+                return null;
+            });
+            const rows = [header];
+            i += 2;
+            while (i < lines.length && /\|/.test(lines[i] ?? '')) {
+                rows.push(split(lines[i] ?? ''));
+                i++;
+            }
+            blocks.push({ type: 'table', rows, align });
+            continue;
+        }
+        // Paragraph — consecutive non-blank non-block-starting lines.
+        const paraLines = [];
+        while (i < lines.length) {
+            const ln = lines[i] ?? '';
+            if (/^\s*$/.test(ln) ||
+                /^```/.test(ln) ||
+                /^(#{1,6})\s+/.test(ln) ||
+                /^\s*>/.test(ln) ||
+                /^\s*[-*+]\s+/.test(ln) ||
+                /^\s*\d+\.\s+/.test(ln) ||
+                /^\s*(---|\*\*\*|___)\s*$/.test(ln)) {
+                break;
+            }
+            paraLines.push(ln);
+            i++;
+        }
+        blocks.push({ type: 'paragraph', content: paraLines.join('\n') });
+    }
+    return blocks;
+}
+/**
+ * Lightweight markdown renderer for chat messages.
+ *
+ * Pass it to `ChatMessage.renderContent` to render assistant responses
+ * with bold / italic / inline code, links, fenced code blocks, lists,
+ * blockquotes, horizontal rules, and GFM pipe tables.
+ *
+ * For advanced markdown features, supply a custom `renderContent`
+ * function that uses your markdown library of choice.
+ *
+ * @example
+ * ```tsx
+ * <ChatMessage
+ *   message={msg}
+ *   renderContent={content => <ChatMarkdownRenderer content={content} />}
+ * />
+ * ```
+ */
+const ChatMarkdownRenderer = 
+/*#__PURE__*/ React.memo(({ content, gfm = true, linkTarget = '_blank', components, className, style, testId, ref, ...rest }) => {
+    const blocks = useMemo(() => parseBlocks(content, gfm), [content, gfm]);
+    const CodeBlock = components?.codeBlock ??
+        (({ code, language }) => (jsx(ChatCodeBlock, { code: code, language: language })));
+    return (jsx("div", { ref: ref, className: cx(markdownRootStyle, className), style: style, "data-testid": testId, ...rest, children: blocks.map((block, idx) => {
+            const key = `b-${idx}`;
+            switch (block.type) {
+                case 'paragraph':
+                    return (jsx("p", { className: markdownParagraphStyle, children: renderInline(block.content ?? '', { linkTarget }, key) }, key));
+                case 'heading': {
+                    const level = Math.min(Math.max(block.level ?? 1, 1), 6);
+                    const Tag = `h${level}`;
+                    return (jsx(Tag, { className: markdownHeadingStyle, children: renderInline(block.content ?? '', { linkTarget }, key) }, key));
+                }
+                case 'list':
+                    return (jsx("ul", { className: markdownListStyle, children: (block.items ?? []).map((item, j) => (jsx("li", { className: markdownListItemStyle, children: renderInline(item, { linkTarget }, `${key}-${j}`) }, `${key}-${j}`))) }, key));
+                case 'orderedList':
+                    return (jsx("ol", { className: markdownListStyle, children: (block.items ?? []).map((item, j) => (jsx("li", { className: markdownListItemStyle, children: renderInline(item, { linkTarget }, `${key}-${j}`) }, `${key}-${j}`))) }, key));
+                case 'blockquote':
+                    return (jsx("blockquote", { className: markdownBlockquoteStyle, children: renderInline(block.content ?? '', { linkTarget }, key) }, key));
+                case 'codeBlock':
+                    return (jsx(CodeBlock, { code: block.content ?? '', language: block.language }, key));
+                case 'hr':
+                    return jsx("hr", { className: markdownHrStyle }, key);
+                case 'table': {
+                    const [header, ...rows] = block.rows ?? [];
+                    const align = block.align ?? [];
+                    return (jsxs("table", { className: markdownTableStyle, children: [jsx("thead", { children: jsx("tr", { children: (header ?? []).map((cell, j) => (jsx("th", { className: markdownThStyle, style: align[j]
+                                            ? { textAlign: align[j] ?? undefined }
+                                            : undefined, children: renderInline(cell, { linkTarget }, `${key}-h-${j}`) }, `${key}-h-${j}`))) }) }), jsx("tbody", { children: rows.map((row, rIdx) => (jsx("tr", { children: row.map((cell, j) => (jsx("td", { className: markdownTdStyle, style: align[j]
+                                            ? { textAlign: align[j] ?? undefined }
+                                            : undefined, children: renderInline(cell, { linkTarget }, `${key}-r-${rIdx}-${j}`) }, `${key}-r-${rIdx}-${j}`))) }, `${key}-r-${rIdx}`))) })] }, key));
+                }
+                default:
+                    return null;
+            }
+        }) }));
+});
+ChatMarkdownRenderer.displayName = 'ChatMarkdownRenderer';
+
+export { ChatMarkdownRenderer };
+//# sourceMappingURL=ChatMarkdownRenderer.js.map

package/dist/esm/components/editor/ChatPanel/ChatMarkdownRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMarkdownRenderer.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatMarkdownRenderer.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAqCA;AACE;AACF;AAEA;;;;;;AAWE;AAIE;AACE;AACA;AACD;AACD;AACE;AACA;AAQD;AACD;AACE;;AAcD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;;AAGH;;;;AAMI;;AACA;AACE;;AAEE;;;;;;;;;AAWN;AACE;;AAEF;AACA;;AAGF;AACF;AAoBA;AACE;;;AAIA;;;AAIE;AACE;;;;;;AAOA;;AAEA;AACA;;AAEE;;;;AAIA;AACA;;AAED;;;;AAKH;;AAEE;;;;;;;;;AAUE;;AAEA;AACD;AACD;;;;AAKF;;AAEE;AACE;AACA;;AAEF;;;;AAKF;;AAEE;AACE;AACA;;;;;;AAOJ;;AAEE;AACE;AACA;;;;;;AAOJ;AAEE;AACA;AACA;AAEA;AAEK;AACA;;;AAIL;AACA;;;;;AAIqB;AACnB;AAAW;AACX;AAAU;AACV;AACF;AAEA;;AAEA;AACE;AACA;;AAEF;;;;;AAMF;;AAEE;AAEE;AACA;AACA;AACA;AACA;AACA;;;AAIF;AACA;;AAEF;;AAGF;AACF;AAEA;;;;;;;;;;;;;;;;;AAiBG;;AAED;;AAcI;;AAMA;AASM;AACA;AACE;;;;AAcE;;;AAOF;;AAUA;;AAUA;;AAMA;;AAQA;AACE;;AAEA;AACA;AACA;;AAWgB;;;;AAsClB;AACE;;;AAKZ;AAGJ;;"}

package/dist/esm/components/editor/ChatPanel/ChatMessage.js

@@ -3,8 +3,13 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { cx } from '../../../utils/cx.js';
 import { ChatBubble } from './ChatBubble.js';
-import { messageTextStyle, messageAvatarStyle, messageAvatarImgStyle, messageContentStyle, bubbleErrorStyle, messageErrorCaptionStyle, messageErrorIconStyle, messageTimestampStyle, messageRecipe } from './ChatPanel.css.js';
+import { messageTextStyle, messageAvatarStyle, messageAvatarImgStyle, messageContentStyle, bubbleErrorStyle, messageErrorCaptionStyle, messageErrorIconStyle, messageTimestampStyle, messageRecipe, messageMaxWidthVarName } from './ChatPanel.css.js';
 
+function resolveMaxWidth(value) {
+    if (value === undefined)
+        return undefined;
+    return typeof value === 'number' ? `${value}px` : value;
+}
 function formatTimestamp(iso) {
     try {
         const date = new Date(iso);
@@ -25,11 +30,18 @@ function getInitials(name) {
         .slice(0, 2);
 }
 const ErrorIcon = () => (jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: [jsx("circle", { cx: "6", cy: "6", r: "5", stroke: "currentColor", strokeWidth: "1.2" }), jsx("line", { x1: "6", y1: "3.5", x2: "6", y2: "6.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }), jsx("circle", { cx: "6", cy: "8.5", r: "0.6", fill: "currentColor" })] }));
-const ChatMessage = /*#__PURE__*/ React.memo(({ message, showTimestamp = false, showAvatar = false, actions, renderContent, className, style, testId, ref, ...rest }) => {
+const ChatMessage = /*#__PURE__*/ React.memo(({ message, showTimestamp = false, showAvatar = false, actions, renderContent, maxWidth, className, style, testId, ref, ...rest }) => {
     const { role, content, status, timestamp, avatar, displayName } = message;
     const isError = status === 'error';
     const renderedContent = renderContent ? (renderContent(content)) : (jsx("span", { className: messageTextStyle, children: content }));
-    return (jsxs("div", { ref: ref, className: cx(messageRecipe({ role }), className), style: style, "data-testid": testId, ...rest, children: [showAvatar && role !== 'system' && (jsx("div", { className: messageAvatarStyle, "aria-hidden": "true", children: avatar ? (jsx("img", { src: avatar, alt: displayName ?? role, className: messageAvatarImgStyle })) : (getInitials(displayName ?? role)) })), jsxs("div", { className: messageContentStyle, children: [jsx(ChatBubble, { role: role, className: isError ? bubbleErrorStyle : undefined, children: renderedContent }), isError && (jsxs("span", { className: messageErrorCaptionStyle, children: [jsx("span", { className: messageErrorIconStyle, children: jsx(ErrorIcon, {}) }), "Error generating response"] })), actions && jsx("div", { children: actions }), showTimestamp && timestamp && (jsx("span", { className: messageTimestampStyle, children: formatTimestamp(timestamp) }))] })] }));
+    const resolvedMaxWidth = resolveMaxWidth(maxWidth);
+    const rootStyle = resolvedMaxWidth
+        ? {
+            [messageMaxWidthVarName]: resolvedMaxWidth,
+            ...style,
+        }
+        : (style ?? {});
+    return (jsxs("div", { ref: ref, className: cx(messageRecipe({ role }), className), style: rootStyle, "data-testid": testId, ...rest, children: [showAvatar && role !== 'system' && (jsx("div", { className: messageAvatarStyle, "aria-hidden": "true", children: avatar ? (jsx("img", { src: avatar, alt: displayName ?? role, className: messageAvatarImgStyle })) : (getInitials(displayName ?? role)) })), jsxs("div", { className: messageContentStyle, children: [jsx(ChatBubble, { role: role, className: isError ? bubbleErrorStyle : undefined, children: renderedContent }), isError && (jsxs("span", { className: messageErrorCaptionStyle, children: [jsx("span", { className: messageErrorIconStyle, children: jsx(ErrorIcon, {}) }), "Error generating response"] })), actions && jsx("div", { children: actions }), showTimestamp && timestamp && (jsx("span", { className: messageTimestampStyle, children: formatTimestamp(timestamp) }))] })] }));
 });
 ChatMessage.displayName = 'ChatMessage';
 

package/dist/esm/components/editor/ChatPanel/ChatMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessage.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatMessage.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAkBA;AACE;AACE;AACA;;AACA;AACA;;AAEJ;AAEA;AACE;AAAW;AACX;;;;AAIG;AACA;AACL;AAEA;AAsBO;AAaH;AACA;;AAQA;AAiDF;AAGF;;"}
+{"version":3,"file":"ChatMessage.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatMessage.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAmBA;;AAG2B;AACzB;AACF;AAEA;AACE;AACE;AACA;;AACA;AACA;;AAEJ;AAEA;AACE;AAAW;AACX;;;;AAIG;AACA;AACL;AAEA;AAsBO;AAcH;AACA;;AAQA;;AAEE;;AAEI;AACuB;AAC3B;AAEF;AAiDF;AAGF;;"}

package/dist/esm/components/editor/ChatPanel/ChatMessageList.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React from 'react';
+import React, { useMemo, useImperativeHandle } from 'react';
 import { useChatScroll } from './useChatScroll.js';
 import { ChatMessage } from './ChatMessage.js';
 import { ScrollArea } from '../../layout/ScrollArea/ScrollArea.js';
 import { messageListContentStyle, newMessagesBannerStyle } from './ChatPanel.css.js';
 
-const ChatMessageList = /*#__PURE__*/ React.memo(({ messages, renderMessage, emptyState, autoScroll = true, className, style, testId, ref, ...rest }) => {
-    const { scrollContainerRef, hasNewMessages, scrollToBottom } = useChatScroll({
+const ChatMessageList = /*#__PURE__*/ React.memo(({ messages, renderMessage, emptyState, autoScroll = true, scrollApiRef, className, style, testId, ref, ...rest }) => {
+    const { scrollContainerRef, scrollContentRef, hasNewMessages, scrollToBottom, scrollTo, scrollToElement, } = useChatScroll({
         messages,
         enabled: autoScroll,
     });
@@ -21,10 +21,24 @@ const ChatMessageList = /*#__PURE__*/ React.memo(({ messages, renderMessage, emp
             ref.current = node;
         }
     }, [scrollContainerRef, ref]);
+    const isAtBottomGetter = React.useCallback(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return true;
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        return scrollHeight - scrollTop - clientHeight <= 100;
+    }, [scrollContainerRef]);
+    const scrollApi = useMemo(() => ({
+        scrollToBottom,
+        scrollTo,
+        scrollToElement,
+        isAtBottom: isAtBottomGetter,
+    }), [scrollToBottom, scrollTo, scrollToElement, isAtBottomGetter]);
+    useImperativeHandle(scrollApiRef, () => scrollApi, [scrollApi]);
     if (messages.length === 0 && emptyState) {
-        return (jsx(ScrollArea, { ref: mergedRef, autoFill: true, className: className, style: style, testId: testId, ...rest, children: jsx("div", { className: messageListContentStyle, role: "log", "aria-live": "polite", children: emptyState }) }));
+        return (jsx(ScrollArea, { ref: mergedRef, autoFill: true, className: className, style: style, testId: testId, ...rest, children: jsx("div", { ref: scrollContentRef, className: messageListContentStyle, role: "log", "aria-live": "polite", children: emptyState }) }));
     }
-    return (jsx(ScrollArea, { ref: mergedRef, autoFill: true, className: className, style: style, testId: testId, ...rest, children: jsxs("div", { className: messageListContentStyle, role: "log", "aria-live": "polite", children: [messages.map((message, index) => renderMessage ? (jsx(React.Fragment, { children: renderMessage(message, index) }, message.id)) : (jsx(ChatMessage, { message: message }, message.id))), hasNewMessages && (jsx("button", { className: newMessagesBannerStyle, onClick: () => scrollToBottom('smooth'), type: "button", children: "New messages" }))] }) }));
+    return (jsx(ScrollArea, { ref: mergedRef, autoFill: true, className: className, style: style, testId: testId, ...rest, children: jsxs("div", { ref: scrollContentRef, className: messageListContentStyle, role: "log", "aria-live": "polite", children: [messages.map((message, index) => renderMessage ? (jsx(React.Fragment, { children: renderMessage(message, index) }, message.id)) : (jsx(ChatMessage, { message: message }, message.id))), hasNewMessages && (jsx("button", { className: newMessagesBannerStyle, onClick: () => scrollToBottom('smooth'), type: "button", children: "New messages" }))] }) }));
 });
 ChatMessageList.displayName = 'ChatMessageList';
 

package/dist/esm/components/editor/ChatPanel/ChatMessageList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageList.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatMessageList.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAYO;;;AAeC;AACD;;;AAMG;AAEF;;;;AAGG;;AAEL;;AAKA;;;AAoDJ;AAGF;;"}
+{"version":3,"file":"ChatMessageList.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatMessageList.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAeO;AAaH;;AASE;AACD;;;AAMK;AAEF;;;;AAGG;;AAEL;AAIF;AACE;AACA;AAAgB;;AAEhB;AACF;AAEA;;;;AAKI;;AAKJ;;AAGE;;;AA0DJ;AAGF;;"}