@mastra/playground-ui 61.0.0-alpha.1 → 61.0.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{code-BeWhOFT4.js → code-C8akLzcu.js} +12 -9
- package/dist/code-C8akLzcu.js.map +1 -0
- package/dist/{code-B-x-9sJ1.cjs → code-D_sH618U.cjs} +12 -9
- package/dist/code-D_sH618U.cjs.map +1 -0
- package/dist/{code-block-C04dJD3G.js → code-block-CXZNO_qi.js} +2 -2
- package/dist/{code-block-C04dJD3G.js.map → code-block-CXZNO_qi.js.map} +1 -1
- package/dist/{code-block-CMI2oLXm.cjs → code-block-z2hVcNq7.cjs} +2 -2
- package/dist/{code-block-CMI2oLXm.cjs.map → code-block-z2hVcNq7.cjs.map} +1 -1
- package/dist/components/ChatShell.cjs.js +6 -5
- package/dist/components/ChatShell.cjs.js.map +1 -1
- package/dist/components/ChatShell.es.js +6 -5
- package/dist/components/ChatShell.es.js.map +1 -1
- package/dist/components/Code.cjs.js +1 -1
- package/dist/components/Code.es.js +1 -1
- package/dist/components/CodeBlock.cjs.js +1 -1
- package/dist/components/CodeBlock.es.js +1 -1
- package/dist/components/DataCodeSection.cjs.js +1 -1
- package/dist/components/DataCodeSection.es.js +1 -1
- package/dist/components/DataDetailsPanel.cjs.js +1 -1
- package/dist/components/DataDetailsPanel.es.js +1 -1
- package/dist/components/DataPanel.cjs.js +1 -1
- package/dist/components/DataPanel.es.js +1 -1
- package/dist/components/MarkdownRenderer.cjs.js +1 -1
- package/dist/components/MarkdownRenderer.es.js +1 -1
- package/dist/components/MessageScroller.cjs.js +1 -1
- package/dist/components/MessageScroller.es.js +1 -1
- package/dist/components/Workflow.cjs.js +1 -1
- package/dist/components/Workflow.es.js +1 -1
- package/dist/components/ai/activity.cjs.js +1 -1
- package/dist/components/ai/activity.es.js +1 -1
- package/dist/components/ai/plan.cjs.js +1 -1
- package/dist/components/ai/plan.es.js +1 -1
- package/dist/components/ai/tool-call.cjs.js +1 -1
- package/dist/components/ai/tool-call.es.js +1 -1
- package/dist/{data-code-section-DIj4CMvD.cjs → data-code-section-BK0bftM-.cjs} +2 -2
- package/dist/{data-code-section-DIj4CMvD.cjs.map → data-code-section-BK0bftM-.cjs.map} +1 -1
- package/dist/{data-code-section-K-2Bj1zO.js → data-code-section-yMYmVciV.js} +2 -2
- package/dist/{data-code-section-K-2Bj1zO.js.map → data-code-section-yMYmVciV.js.map} +1 -1
- package/dist/{data-panel-CKvpHRUM.js → data-panel-GT4fMXR0.js} +2 -2
- package/dist/{data-panel-CKvpHRUM.js.map → data-panel-GT4fMXR0.js.map} +1 -1
- package/dist/{data-panel-YCvno_Di.cjs → data-panel-mzQKwVkT.cjs} +2 -2
- package/dist/{data-panel-YCvno_Di.cjs.map → data-panel-mzQKwVkT.cjs.map} +1 -1
- package/dist/domains/chat/messages/renderers/message-text.cjs.js +1 -1
- package/dist/domains/chat/messages/renderers/message-text.es.js +1 -1
- package/dist/domains/chat/messages/renderers/reasoning-part-renderer.cjs.js +1 -1
- package/dist/domains/chat/messages/renderers/reasoning-part-renderer.es.js +1 -1
- package/dist/domains/chat/messages/skill-message.cjs.js +1 -1
- package/dist/domains/chat/messages/skill-message.es.js +1 -1
- package/dist/domains/chat/tools/badges/code-mode-badge.cjs.js +1 -1
- package/dist/domains/chat/tools/badges/code-mode-badge.es.js +1 -1
- package/dist/domains/chat/tools/badges/file-tree-badge.cjs.js +1 -1
- package/dist/domains/chat/tools/badges/file-tree-badge.es.js +1 -1
- package/dist/domains/chat/tools/badges/observation-marker-details.cjs.js +1 -1
- package/dist/domains/chat/tools/badges/observation-marker-details.es.js +1 -1
- package/dist/domains/chat/tools/badges/observation-renderer.cjs.js +1 -1
- package/dist/domains/chat/tools/badges/observation-renderer.es.js +1 -1
- package/dist/domains/chat/tools/badges/tool-badge.cjs.js +1 -1
- package/dist/domains/chat/tools/badges/tool-badge.es.js +1 -1
- package/dist/domains/chat/tools/badges/workflow-badge.cjs.js +1 -0
- package/dist/domains/chat/tools/badges/workflow-badge.cjs.js.map +1 -1
- package/dist/domains/chat/tools/badges/workflow-badge.es.js +1 -0
- package/dist/domains/chat/tools/badges/workflow-badge.es.js.map +1 -1
- package/dist/domains/chat/tools/submit-plan-tool.cjs.js +1 -1
- package/dist/domains/chat/tools/submit-plan-tool.es.js +1 -1
- package/dist/domains/logs/components/log-data-panel.cjs.js +1 -1
- package/dist/domains/logs/components/log-data-panel.es.js +1 -1
- package/dist/domains/scores/components/score-data-panel.cjs.js +1 -1
- package/dist/domains/scores/components/score-data-panel.es.js +1 -1
- package/dist/domains/traces/components/span-data-panel-view.cjs.js +2 -2
- package/dist/domains/traces/components/span-data-panel-view.es.js +2 -2
- package/dist/domains/traces/components/span-details-view.cjs.js +1 -1
- package/dist/domains/traces/components/span-details-view.es.js +1 -1
- package/dist/domains/traces/components/span-payload/span-error-renderer.cjs.js +1 -1
- package/dist/domains/traces/components/span-payload/span-error-renderer.es.js +1 -1
- package/dist/domains/traces/components/span-payload/span-input-renderers.cjs.js +1 -1
- package/dist/domains/traces/components/span-payload/span-input-renderers.es.js +1 -1
- package/dist/domains/traces/components/span-payload/span-output-renderers.cjs.js +2 -2
- package/dist/domains/traces/components/span-payload/span-output-renderers.es.js +2 -2
- package/dist/domains/traces/components/span-payload/span-payload-json.cjs.js +1 -1
- package/dist/domains/traces/components/span-payload/span-payload-json.es.js +1 -1
- package/dist/domains/traces/components/span-payload/span-payload-messages.cjs.js +2 -2
- package/dist/domains/traces/components/span-payload/span-payload-messages.es.js +2 -2
- package/dist/domains/traces/components/span-payload/span-payload-primitives.cjs.js +2 -2
- package/dist/domains/traces/components/span-payload/span-payload-primitives.es.js +2 -2
- package/dist/domains/traces/components/span-payload/span-payload-processor.cjs.js +1 -1
- package/dist/domains/traces/components/span-payload/span-payload-processor.es.js +1 -1
- package/dist/domains/traces/components/span-payload/span-payload-tool.cjs.js +1 -1
- package/dist/domains/traces/components/span-payload/span-payload-tool.es.js +1 -1
- package/dist/domains/traces/components/span-payload/span-processor-attributes.cjs.js +1 -1
- package/dist/domains/traces/components/span-payload/span-processor-attributes.es.js +1 -1
- package/dist/domains/traces/components/span-summary-description.cjs.js +1 -1
- package/dist/domains/traces/components/span-summary-description.es.js +1 -1
- package/dist/domains/traces/components/thread-trace/thread-trace-details.cjs.js +1 -1
- package/dist/domains/traces/components/thread-trace/thread-trace-details.es.js +1 -1
- package/dist/domains/traces/components/thread-trace/thread-trace-list.cjs.js +1 -1
- package/dist/domains/traces/components/thread-trace/thread-trace-list.es.js +1 -1
- package/dist/domains/traces/components/thread-trace/thread-trace-root.cjs.js +1 -1
- package/dist/domains/traces/components/thread-trace/thread-trace-root.es.js +1 -1
- package/dist/domains/traces/components/thread-trace/thread-trace-row.cjs.js +1 -1
- package/dist/domains/traces/components/thread-trace/thread-trace-row.es.js +1 -1
- package/dist/domains/traces/components/trace-data-panel-view.cjs.js +1 -1
- package/dist/domains/traces/components/trace-data-panel-view.es.js +1 -1
- package/dist/domains/traces/components/trace-id-button.cjs.js +1 -1
- package/dist/domains/traces/components/trace-id-button.es.js +1 -1
- package/dist/domains/traces/components/trace-summary-description.cjs.js +1 -1
- package/dist/domains/traces/components/trace-summary-description.es.js +1 -1
- package/dist/domains/traces/components/trace-thread-panel.cjs.js +1 -1
- package/dist/domains/traces/components/trace-thread-panel.es.js +1 -1
- package/dist/domains/workflows/components/workflow-step-detail.cjs.js +2 -2
- package/dist/domains/workflows/components/workflow-step-detail.es.js +2 -2
- package/dist/domains/workflows/workflow/use-workflow-graph-runtime.cjs.js +2 -2
- package/dist/domains/workflows/workflow/use-workflow-graph-runtime.es.js +2 -2
- package/dist/domains/workflows/workflow/workflow-body-graph.cjs.js +1 -1
- package/dist/domains/workflows/workflow/workflow-body-graph.es.js +1 -1
- package/dist/domains/workflows/workflow/workflow-graph-inner.cjs.js +2 -2
- package/dist/domains/workflows/workflow/workflow-graph-inner.es.js +2 -2
- package/dist/domains/workflows/workflow/workflow-graph-node.cjs.js +2 -2
- package/dist/domains/workflows/workflow/workflow-graph-node.es.js +2 -2
- package/dist/domains/workflows/workflow/workflow-input-data.cjs.js +1 -0
- package/dist/domains/workflows/workflow/workflow-input-data.cjs.js.map +1 -1
- package/dist/domains/workflows/workflow/workflow-input-data.es.js +1 -0
- package/dist/domains/workflows/workflow/workflow-input-data.es.js.map +1 -1
- package/dist/domains/workflows/workflow/workflow-nested-graph.cjs.js +2 -2
- package/dist/domains/workflows/workflow/workflow-nested-graph.es.js +2 -2
- package/dist/domains/workspace/components/workspace-active-file.cjs.js +1 -1
- package/dist/domains/workspace/components/workspace-active-file.es.js +1 -1
- package/dist/domains/workspace/components/workspace-add-skill-dialog.cjs.js +1 -1
- package/dist/domains/workspace/components/workspace-add-skill-dialog.es.js +1 -1
- package/dist/domains/workspace/components/workspace-markdown-preview.cjs.js +2 -2
- package/dist/domains/workspace/components/workspace-markdown-preview.es.js +2 -2
- package/dist/{markdown-renderer-DRo-Hcuu.cjs → markdown-renderer-4iyMU2Cm.cjs} +2 -2
- package/dist/{markdown-renderer-DRo-Hcuu.cjs.map → markdown-renderer-4iyMU2Cm.cjs.map} +1 -1
- package/dist/{markdown-renderer-XfWPF-B7.js → markdown-renderer-B3Pf1uW9.js} +2 -2
- package/dist/{markdown-renderer-XfWPF-B7.js.map → markdown-renderer-B3Pf1uW9.js.map} +1 -1
- package/dist/{message-scroller-E05PLPmT.cjs → message-scroller-D-_KN9Fv.cjs} +3 -1
- package/dist/message-scroller-D-_KN9Fv.cjs.map +1 -0
- package/dist/{message-scroller-CiFr8MwT.js → message-scroller-WWaQ-XU_.js} +3 -1
- package/dist/message-scroller-WWaQ-XU_.js.map +1 -0
- package/dist/{plan-BBf7ONr7.cjs → plan-D49plJdQ.cjs} +2 -2
- package/dist/{plan-BBf7ONr7.cjs.map → plan-D49plJdQ.cjs.map} +1 -1
- package/dist/{plan-BgvXKTEM.js → plan-DvkySMRk.js} +2 -2
- package/dist/{plan-BgvXKTEM.js.map → plan-DvkySMRk.js.map} +1 -1
- package/dist/{reasoning-activity-Dc6VbiMr.cjs → reasoning-activity-COiiln9U.cjs} +2 -2
- package/dist/{reasoning-activity-Dc6VbiMr.cjs.map → reasoning-activity-COiiln9U.cjs.map} +1 -1
- package/dist/{reasoning-activity-DTmKCDZ-.js → reasoning-activity-r7B4_j4d.js} +2 -2
- package/dist/{reasoning-activity-DTmKCDZ-.js.map → reasoning-activity-r7B4_j4d.js.map} +1 -1
- package/dist/{span-payload-primitives-188dDV5s.js → span-payload-primitives-DceLKTQK.js} +2 -2
- package/dist/{span-payload-primitives-188dDV5s.js.map → span-payload-primitives-DceLKTQK.js.map} +1 -1
- package/dist/{span-payload-primitives-DrKJXIc3.cjs → span-payload-primitives-DqeZJkw3.cjs} +2 -2
- package/dist/{span-payload-primitives-DrKJXIc3.cjs.map → span-payload-primitives-DqeZJkw3.cjs.map} +1 -1
- package/dist/src/ds/components/ChatShell/chat-shell.d.ts +13 -8
- package/dist/src/ds/components/Code/code.d.ts +1 -1
- package/dist/style.css +30 -6
- package/dist/{tool-call-arguments-Cm5qfywz.js → tool-call-arguments-DQv3oaEC.js} +3 -3
- package/dist/{tool-call-arguments-Cm5qfywz.js.map → tool-call-arguments-DQv3oaEC.js.map} +1 -1
- package/dist/{tool-call-arguments-cML2FFBk.cjs → tool-call-arguments-DdO3E60i.cjs} +3 -3
- package/dist/{tool-call-arguments-cML2FFBk.cjs.map → tool-call-arguments-DdO3E60i.cjs.map} +1 -1
- package/dist/{use-workflow-graph-runtime-IZ-er4hs.js → use-workflow-graph-runtime-BF_NZEkj.js} +2 -2
- package/dist/{use-workflow-graph-runtime-IZ-er4hs.js.map → use-workflow-graph-runtime-BF_NZEkj.js.map} +1 -1
- package/dist/{use-workflow-graph-runtime-t17K6Hkf.cjs → use-workflow-graph-runtime-r_OOpvSo.cjs} +2 -2
- package/dist/{use-workflow-graph-runtime-t17K6Hkf.cjs.map → use-workflow-graph-runtime-r_OOpvSo.cjs.map} +1 -1
- package/dist/{workflow-condition-card-CLyskv_B.js → workflow-condition-card-BCSYogql.js} +2 -2
- package/dist/{workflow-condition-card-CLyskv_B.js.map → workflow-condition-card-BCSYogql.js.map} +1 -1
- package/dist/{workflow-condition-card-B_oDiQ6I.cjs → workflow-condition-card-Dlo2PaKV.cjs} +2 -2
- package/dist/{workflow-condition-card-B_oDiQ6I.cjs.map → workflow-condition-card-Dlo2PaKV.cjs.map} +1 -1
- package/package.json +9 -9
- package/dist/code-B-x-9sJ1.cjs.map +0 -1
- package/dist/code-BeWhOFT4.js.map +0 -1
- package/dist/message-scroller-CiFr8MwT.js.map +0 -1
- package/dist/message-scroller-E05PLPmT.cjs.map +0 -1
|
@@ -1,25 +1,28 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { useState, useEffect } from 'react';
|
|
4
|
+
import { useDebounce } from 'use-debounce';
|
|
4
5
|
import { h as highlight } from './highlight-BmpoELR4.js';
|
|
5
6
|
|
|
7
|
+
const HIGHLIGHT_SAMPLE_INTERVAL_MS = 75;
|
|
6
8
|
function useHighlight(code, lang) {
|
|
7
9
|
const [highlighted, setHighlighted] = useState(null);
|
|
10
|
+
const [sampledCode] = useDebounce(code, HIGHLIGHT_SAMPLE_INTERVAL_MS, {
|
|
11
|
+
leading: true,
|
|
12
|
+
maxWait: HIGHLIGHT_SAMPLE_INTERVAL_MS
|
|
13
|
+
});
|
|
8
14
|
useEffect(() => {
|
|
9
|
-
if (!lang)
|
|
10
|
-
setHighlighted(null);
|
|
11
|
-
return;
|
|
12
|
-
}
|
|
15
|
+
if (!lang) return;
|
|
13
16
|
let cancelled = false;
|
|
14
|
-
void highlight(
|
|
15
|
-
if (!cancelled && tokens?.length) setHighlighted({ code, lang, tokens });
|
|
17
|
+
void highlight(sampledCode, lang).then((tokens) => {
|
|
18
|
+
if (!cancelled && tokens?.length) setHighlighted({ code: sampledCode, lang, tokens });
|
|
16
19
|
}).catch(() => {
|
|
17
20
|
});
|
|
18
21
|
return () => {
|
|
19
22
|
cancelled = true;
|
|
20
23
|
};
|
|
21
|
-
}, [
|
|
22
|
-
return highlighted;
|
|
24
|
+
}, [sampledCode, lang]);
|
|
25
|
+
return lang ? highlighted : null;
|
|
23
26
|
}
|
|
24
27
|
function tokenStyle(token) {
|
|
25
28
|
if (token.htmlStyle && typeof token.htmlStyle === "object") {
|
|
@@ -72,4 +75,4 @@ const Code = React.memo(function Code2({ code, lang, lineClassName, ...props })
|
|
|
72
75
|
});
|
|
73
76
|
|
|
74
77
|
export { Code as C, tokenStyle as t, useHighlight as u };
|
|
75
|
-
//# sourceMappingURL=code-
|
|
78
|
+
//# sourceMappingURL=code-C8akLzcu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"code-C8akLzcu.js","sources":["../src/ds/components/Code/use-highlight.ts","../src/ds/components/Code/code.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { CSSProperties } from 'react';\nimport type { ThemedToken } from 'shiki/core';\nimport { useDebounce } from 'use-debounce';\n\nimport { highlight } from '../CodeEditor/highlight';\n\nexport interface Highlighted {\n code: string;\n lang: string;\n tokens: ThemedToken[][];\n}\n\nconst HIGHLIGHT_SAMPLE_INTERVAL_MS = 75;\n\n/** Tokens land a pass behind the code, so the value may still describe the previous code. */\nexport function useHighlight(code: string, lang: string | undefined): Highlighted | null {\n const [highlighted, setHighlighted] = useState<Highlighted | null>(null);\n // maxWait equal to the delay turns the debounce into a throttle.\n const [sampledCode] = useDebounce(code, HIGHLIGHT_SAMPLE_INTERVAL_MS, {\n leading: true,\n maxWait: HIGHLIGHT_SAMPLE_INTERVAL_MS,\n });\n\n useEffect(() => {\n if (!lang) return;\n\n let cancelled = false;\n\n void highlight(sampledCode, lang)\n .then(tokens => {\n if (!cancelled && tokens?.length) setHighlighted({ code: sampledCode, lang, tokens });\n })\n .catch(() => {});\n\n return () => {\n cancelled = true;\n };\n }, [sampledCode, lang]);\n\n return lang ? highlighted : null;\n}\n\nexport function tokenStyle(token: ThemedToken): CSSProperties | undefined {\n if (token.htmlStyle && typeof token.htmlStyle === 'object') {\n return token.htmlStyle as CSSProperties;\n }\n\n return token.color ? { color: token.color } : undefined;\n}\n","import * as React from 'react';\n\nimport { tokenStyle, useHighlight } from './use-highlight';\nimport type { Highlighted } from './use-highlight';\n\nexport interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {\n code: string;\n lang?: string;\n /** Per-line class, e.g. for diff or search highlighting. When set, every line is wrapped in a `[data-line]` span. */\n lineClassName?: (lineIndex: number, lineText: string) => string | undefined;\n}\n\n/** Colors from an earlier pass still hold when the new code only appends to the old. */\nfunction usableHighlight(highlighted: Highlighted | null, code: string, lang?: string): Highlighted | null {\n if (!highlighted || highlighted.lang !== lang) return null;\n return code.startsWith(highlighted.code) ? highlighted : null;\n}\n\n/**\n * Low-level shiki token renderer shared by `CodeBlock` and `MarkdownRenderer`.\n * Dual-theme colors stay as `--shiki-light` / `--shiki-dark` CSS variables on\n * each token span; the `.shiki-token` class (index.css) picks the variant from\n * the `.dark` root class, so theme switching is pure CSS — no ThemeProvider\n * required. Renders plain text while highlighting is pending or when the\n * language is missing/unknown.\n *\n * A streaming fence re-renders on every delta while highlighting stays a sample\n * behind. Dropping the previous tokens each time would strobe the whole block\n * between colored and plain, so the settled prefix keeps its colors and only\n * the newly arrived tail waits, uncolored, for the next pass.\n */\nexport const Code = React.memo(function Code({ code, lang, lineClassName, ...props }: CodeProps) {\n const highlighted = useHighlight(code, lang);\n\n const usable = usableHighlight(highlighted, code, lang);\n if (!usable) {\n if (!lineClassName) return <pre {...props}>{code}</pre>;\n const lines = code.split('\\n');\n return (\n <pre {...props}>\n {lines.map((text, i) => (\n <React.Fragment key={i}>\n <span data-line={i} className={lineClassName(i, text)}>\n {text}\n </span>\n {i !== lines.length - 1 && '\\n'}\n </React.Fragment>\n ))}\n </pre>\n );\n }\n\n const tail = code.slice(usable.code.length);\n let codeOffset = 0;\n\n return (\n <pre {...props}>\n <code>\n {usable.tokens.map((line, lineIndex) => {\n const lineOffset = codeOffset;\n let tokenOffset = lineOffset;\n const tokenSpans = line.map(token => {\n const key = tokenOffset;\n tokenOffset += token.content.length;\n\n return (\n <span key={key} className=\"shiki-token\" style={tokenStyle(token)}>\n {token.content}\n </span>\n );\n });\n\n codeOffset = tokenOffset + 1;\n\n return (\n <React.Fragment key={lineOffset}>\n {lineClassName ? (\n <span\n data-line={lineIndex}\n className={lineClassName(lineIndex, line.map(token => token.content).join(''))}\n >\n {tokenSpans}\n </span>\n ) : (\n <span>{tokenSpans}</span>\n )}\n {lineIndex !== usable.tokens.length - 1 && '\\n'}\n </React.Fragment>\n );\n })}\n {tail}\n </code>\n </pre>\n );\n});\n"],"names":["Code"],"mappings":"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"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
const jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
const React = require('react');
|
|
5
|
+
const useDebounce = require('use-debounce');
|
|
5
6
|
const highlight = require('./highlight-DK1dn-Fh.cjs');
|
|
6
7
|
|
|
7
8
|
function _interopNamespaceDefault(e) {
|
|
@@ -23,23 +24,25 @@ function _interopNamespaceDefault(e) {
|
|
|
23
24
|
|
|
24
25
|
const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
25
26
|
|
|
27
|
+
const HIGHLIGHT_SAMPLE_INTERVAL_MS = 75;
|
|
26
28
|
function useHighlight(code, lang) {
|
|
27
29
|
const [highlighted, setHighlighted] = React.useState(null);
|
|
30
|
+
const [sampledCode] = useDebounce.useDebounce(code, HIGHLIGHT_SAMPLE_INTERVAL_MS, {
|
|
31
|
+
leading: true,
|
|
32
|
+
maxWait: HIGHLIGHT_SAMPLE_INTERVAL_MS
|
|
33
|
+
});
|
|
28
34
|
React.useEffect(() => {
|
|
29
|
-
if (!lang)
|
|
30
|
-
setHighlighted(null);
|
|
31
|
-
return;
|
|
32
|
-
}
|
|
35
|
+
if (!lang) return;
|
|
33
36
|
let cancelled = false;
|
|
34
|
-
void highlight.highlight(
|
|
35
|
-
if (!cancelled && tokens?.length) setHighlighted({ code, lang, tokens });
|
|
37
|
+
void highlight.highlight(sampledCode, lang).then((tokens) => {
|
|
38
|
+
if (!cancelled && tokens?.length) setHighlighted({ code: sampledCode, lang, tokens });
|
|
36
39
|
}).catch(() => {
|
|
37
40
|
});
|
|
38
41
|
return () => {
|
|
39
42
|
cancelled = true;
|
|
40
43
|
};
|
|
41
|
-
}, [
|
|
42
|
-
return highlighted;
|
|
44
|
+
}, [sampledCode, lang]);
|
|
45
|
+
return lang ? highlighted : null;
|
|
43
46
|
}
|
|
44
47
|
function tokenStyle(token) {
|
|
45
48
|
if (token.htmlStyle && typeof token.htmlStyle === "object") {
|
|
@@ -94,4 +97,4 @@ const Code = React__namespace.memo(function Code2({ code, lang, lineClassName, .
|
|
|
94
97
|
exports.Code = Code;
|
|
95
98
|
exports.tokenStyle = tokenStyle;
|
|
96
99
|
exports.useHighlight = useHighlight;
|
|
97
|
-
//# sourceMappingURL=code-
|
|
100
|
+
//# sourceMappingURL=code-D_sH618U.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"code-D_sH618U.cjs","sources":["../src/ds/components/Code/use-highlight.ts","../src/ds/components/Code/code.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { CSSProperties } from 'react';\nimport type { ThemedToken } from 'shiki/core';\nimport { useDebounce } from 'use-debounce';\n\nimport { highlight } from '../CodeEditor/highlight';\n\nexport interface Highlighted {\n code: string;\n lang: string;\n tokens: ThemedToken[][];\n}\n\nconst HIGHLIGHT_SAMPLE_INTERVAL_MS = 75;\n\n/** Tokens land a pass behind the code, so the value may still describe the previous code. */\nexport function useHighlight(code: string, lang: string | undefined): Highlighted | null {\n const [highlighted, setHighlighted] = useState<Highlighted | null>(null);\n // maxWait equal to the delay turns the debounce into a throttle.\n const [sampledCode] = useDebounce(code, HIGHLIGHT_SAMPLE_INTERVAL_MS, {\n leading: true,\n maxWait: HIGHLIGHT_SAMPLE_INTERVAL_MS,\n });\n\n useEffect(() => {\n if (!lang) return;\n\n let cancelled = false;\n\n void highlight(sampledCode, lang)\n .then(tokens => {\n if (!cancelled && tokens?.length) setHighlighted({ code: sampledCode, lang, tokens });\n })\n .catch(() => {});\n\n return () => {\n cancelled = true;\n };\n }, [sampledCode, lang]);\n\n return lang ? highlighted : null;\n}\n\nexport function tokenStyle(token: ThemedToken): CSSProperties | undefined {\n if (token.htmlStyle && typeof token.htmlStyle === 'object') {\n return token.htmlStyle as CSSProperties;\n }\n\n return token.color ? { color: token.color } : undefined;\n}\n","import * as React from 'react';\n\nimport { tokenStyle, useHighlight } from './use-highlight';\nimport type { Highlighted } from './use-highlight';\n\nexport interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {\n code: string;\n lang?: string;\n /** Per-line class, e.g. for diff or search highlighting. When set, every line is wrapped in a `[data-line]` span. */\n lineClassName?: (lineIndex: number, lineText: string) => string | undefined;\n}\n\n/** Colors from an earlier pass still hold when the new code only appends to the old. */\nfunction usableHighlight(highlighted: Highlighted | null, code: string, lang?: string): Highlighted | null {\n if (!highlighted || highlighted.lang !== lang) return null;\n return code.startsWith(highlighted.code) ? highlighted : null;\n}\n\n/**\n * Low-level shiki token renderer shared by `CodeBlock` and `MarkdownRenderer`.\n * Dual-theme colors stay as `--shiki-light` / `--shiki-dark` CSS variables on\n * each token span; the `.shiki-token` class (index.css) picks the variant from\n * the `.dark` root class, so theme switching is pure CSS — no ThemeProvider\n * required. Renders plain text while highlighting is pending or when the\n * language is missing/unknown.\n *\n * A streaming fence re-renders on every delta while highlighting stays a sample\n * behind. Dropping the previous tokens each time would strobe the whole block\n * between colored and plain, so the settled prefix keeps its colors and only\n * the newly arrived tail waits, uncolored, for the next pass.\n */\nexport const Code = React.memo(function Code({ code, lang, lineClassName, ...props }: CodeProps) {\n const highlighted = useHighlight(code, lang);\n\n const usable = usableHighlight(highlighted, code, lang);\n if (!usable) {\n if (!lineClassName) return <pre {...props}>{code}</pre>;\n const lines = code.split('\\n');\n return (\n <pre {...props}>\n {lines.map((text, i) => (\n <React.Fragment key={i}>\n <span data-line={i} className={lineClassName(i, text)}>\n {text}\n </span>\n {i !== lines.length - 1 && '\\n'}\n </React.Fragment>\n ))}\n </pre>\n );\n }\n\n const tail = code.slice(usable.code.length);\n let codeOffset = 0;\n\n return (\n <pre {...props}>\n <code>\n {usable.tokens.map((line, lineIndex) => {\n const lineOffset = codeOffset;\n let tokenOffset = lineOffset;\n const tokenSpans = line.map(token => {\n const key = tokenOffset;\n tokenOffset += token.content.length;\n\n return (\n <span key={key} className=\"shiki-token\" style={tokenStyle(token)}>\n {token.content}\n </span>\n );\n });\n\n codeOffset = tokenOffset + 1;\n\n return (\n <React.Fragment key={lineOffset}>\n {lineClassName ? (\n <span\n data-line={lineIndex}\n className={lineClassName(lineIndex, line.map(token => token.content).join(''))}\n >\n {tokenSpans}\n </span>\n ) : (\n <span>{tokenSpans}</span>\n )}\n {lineIndex !== usable.tokens.length - 1 && '\\n'}\n </React.Fragment>\n );\n })}\n {tail}\n </code>\n </pre>\n );\n});\n"],"names":["useState","useDebounce","useEffect","highlight","React","Code","jsx","jsxs"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { C as Code } from './code-
|
|
2
|
+
import { C as Code } from './code-C8akLzcu.js';
|
|
3
3
|
import { C as CopyButton } from './copy-button-DH8xtrWz.js';
|
|
4
4
|
import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from './select-CWxcmE3F.js';
|
|
5
5
|
import { T as TabList } from './tabs-list-tLx5fgP0.js';
|
|
@@ -84,4 +84,4 @@ function CodeBlock({
|
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
export { CodeBlock as C };
|
|
87
|
-
//# sourceMappingURL=code-block-
|
|
87
|
+
//# sourceMappingURL=code-block-CXZNO_qi.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-block-
|
|
1
|
+
{"version":3,"file":"code-block-CXZNO_qi.js","sources":["../src/ds/components/CodeBlock/code-block.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Code } from '../Code/code';\nimport { CopyButton } from '../CopyButton/copy-button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select/select';\nimport { TabList } from '../Tabs/tabs-list';\nimport { Tabs } from '../Tabs/tabs-root';\nimport { Tab } from '../Tabs/tabs-tab';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type CodeBlockSelector = 'select' | 'tabs';\n\nexport type CodeBlockOverflow = 'wrap' | 'scroll';\n\nexport interface CodeBlockOption {\n label: string;\n value: string;\n}\n\nexport interface CodeBlockProps {\n code: string;\n options?: CodeBlockOption[];\n value?: string;\n onValueChange?: (value: string) => void;\n selector?: CodeBlockSelector;\n fileName?: string;\n lang?: string;\n /** `wrap` (default) breaks long lines — best for commands and snippets.\n * `scroll` preserves columns behind a horizontal scroll — best for source code. */\n overflow?: CodeBlockOverflow;\n copyMessage?: string;\n copyTooltip?: string;\n actions?: ReactNode;\n className?: string;\n}\n\nexport function CodeBlock({\n code,\n options,\n value,\n onValueChange,\n selector = 'select',\n fileName,\n lang,\n overflow = 'wrap',\n copyMessage,\n copyTooltip,\n actions,\n className,\n}: CodeBlockProps) {\n const hasOptions = options && options.length > 0;\n const useTabs = hasOptions && selector === 'tabs';\n const useSelect = hasOptions && selector === 'select';\n const firstOption = options?.[0];\n const activeValue = value ?? firstOption?.value;\n\n return (\n <figure\n // A scrolling `pre` still reports its longest line as an intrinsic width, which\n // grows every ancestor; containment keeps the block inside the width it is given.\n className={cn(\n 'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border-strong/40 bg-background [contain:inline-size]',\n className,\n )}\n >\n {useTabs && firstOption && (\n <Tabs defaultTab={firstOption.value} value={activeValue} onValueChange={onValueChange ?? (() => {})}>\n <div className=\"flex items-stretch\">\n <div className=\"min-w-0 flex-1\">\n <TabList>\n {options.map(opt => (\n <Tab key={opt.value} value={opt.value}>\n {opt.label}\n </Tab>\n ))}\n </TabList>\n </div>\n {actions && <div className=\"flex shrink-0 items-center border-b border-border pr-2 pl-3\">{actions}</div>}\n </div>\n </Tabs>\n )}\n\n {useSelect && options && (\n <div className=\"flex items-center border-b border-border-strong/40 px-2 py-1.5\">\n <Select value={activeValue} onValueChange={onValueChange}>\n <SelectTrigger size=\"sm\" variant=\"ghost\" className=\"w-auto\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {options.map(opt => (\n <SelectItem key={opt.value} value={opt.value}>\n {opt.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n </div>\n )}\n\n {!hasOptions && fileName && (\n <div className=\"flex items-center border-b border-border-strong/40 px-4 py-2\">\n <figcaption className=\"font-mono text-caption text-muted-foreground\">{fileName}</figcaption>\n {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n </div>\n )}\n\n {!hasOptions && !fileName && actions && (\n <div className=\"flex items-center justify-end border-b border-border-strong/40 px-2 py-1.5\">{actions}</div>\n )}\n\n <div className=\"relative\">\n <Code\n code={code}\n lang={lang}\n className={cn(\n 'px-4 py-3 font-mono text-caption text-foreground',\n overflow === 'scroll' ? 'overflow-x-auto whitespace-pre' : 'break-all whitespace-pre-wrap',\n )}\n />\n <CopyButton\n content={code}\n copyMessage={copyMessage}\n tooltip={copyTooltip}\n size=\"sm\"\n className={cn(\n 'absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0',\n transitions.opacity,\n )}\n />\n </div>\n </figure>\n );\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
const jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
const code = require('./code-
|
|
4
|
+
const code = require('./code-D_sH618U.cjs');
|
|
5
5
|
const copyButton = require('./copy-button-CGkFEDHF.cjs');
|
|
6
6
|
const select = require('./select-KV77JIvp.cjs');
|
|
7
7
|
const tabsList = require('./tabs-list-Tqj36HIL.cjs');
|
|
@@ -86,4 +86,4 @@ function CodeBlock({
|
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
exports.CodeBlock = CodeBlock;
|
|
89
|
-
//# sourceMappingURL=code-block-
|
|
89
|
+
//# sourceMappingURL=code-block-z2hVcNq7.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-block-
|
|
1
|
+
{"version":3,"file":"code-block-z2hVcNq7.cjs","sources":["../src/ds/components/CodeBlock/code-block.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Code } from '../Code/code';\nimport { CopyButton } from '../CopyButton/copy-button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select/select';\nimport { TabList } from '../Tabs/tabs-list';\nimport { Tabs } from '../Tabs/tabs-root';\nimport { Tab } from '../Tabs/tabs-tab';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type CodeBlockSelector = 'select' | 'tabs';\n\nexport type CodeBlockOverflow = 'wrap' | 'scroll';\n\nexport interface CodeBlockOption {\n label: string;\n value: string;\n}\n\nexport interface CodeBlockProps {\n code: string;\n options?: CodeBlockOption[];\n value?: string;\n onValueChange?: (value: string) => void;\n selector?: CodeBlockSelector;\n fileName?: string;\n lang?: string;\n /** `wrap` (default) breaks long lines — best for commands and snippets.\n * `scroll` preserves columns behind a horizontal scroll — best for source code. */\n overflow?: CodeBlockOverflow;\n copyMessage?: string;\n copyTooltip?: string;\n actions?: ReactNode;\n className?: string;\n}\n\nexport function CodeBlock({\n code,\n options,\n value,\n onValueChange,\n selector = 'select',\n fileName,\n lang,\n overflow = 'wrap',\n copyMessage,\n copyTooltip,\n actions,\n className,\n}: CodeBlockProps) {\n const hasOptions = options && options.length > 0;\n const useTabs = hasOptions && selector === 'tabs';\n const useSelect = hasOptions && selector === 'select';\n const firstOption = options?.[0];\n const activeValue = value ?? firstOption?.value;\n\n return (\n <figure\n // A scrolling `pre` still reports its longest line as an intrinsic width, which\n // grows every ancestor; containment keeps the block inside the width it is given.\n className={cn(\n 'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border-strong/40 bg-background [contain:inline-size]',\n className,\n )}\n >\n {useTabs && firstOption && (\n <Tabs defaultTab={firstOption.value} value={activeValue} onValueChange={onValueChange ?? (() => {})}>\n <div className=\"flex items-stretch\">\n <div className=\"min-w-0 flex-1\">\n <TabList>\n {options.map(opt => (\n <Tab key={opt.value} value={opt.value}>\n {opt.label}\n </Tab>\n ))}\n </TabList>\n </div>\n {actions && <div className=\"flex shrink-0 items-center border-b border-border pr-2 pl-3\">{actions}</div>}\n </div>\n </Tabs>\n )}\n\n {useSelect && options && (\n <div className=\"flex items-center border-b border-border-strong/40 px-2 py-1.5\">\n <Select value={activeValue} onValueChange={onValueChange}>\n <SelectTrigger size=\"sm\" variant=\"ghost\" className=\"w-auto\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {options.map(opt => (\n <SelectItem key={opt.value} value={opt.value}>\n {opt.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n </div>\n )}\n\n {!hasOptions && fileName && (\n <div className=\"flex items-center border-b border-border-strong/40 px-4 py-2\">\n <figcaption className=\"font-mono text-caption text-muted-foreground\">{fileName}</figcaption>\n {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n </div>\n )}\n\n {!hasOptions && !fileName && actions && (\n <div className=\"flex items-center justify-end border-b border-border-strong/40 px-2 py-1.5\">{actions}</div>\n )}\n\n <div className=\"relative\">\n <Code\n code={code}\n lang={lang}\n className={cn(\n 'px-4 py-3 font-mono text-caption text-foreground',\n overflow === 'scroll' ? 'overflow-x-auto whitespace-pre' : 'break-all whitespace-pre-wrap',\n )}\n />\n <CopyButton\n content={code}\n copyMessage={copyMessage}\n tooltip={copyTooltip}\n size=\"sm\"\n className={cn(\n 'absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0',\n transitions.opacity,\n )}\n />\n </div>\n </figure>\n );\n}\n"],"names":["code","jsxs","cn","jsx","Tabs","TabList","Tab","Select","SelectTrigger","SelectValue","SelectContent","SelectItem","Code","CopyButton","transitions"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
5
|
const jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
const messageScroller = require('../message-scroller-
|
|
6
|
+
const messageScroller = require('../message-scroller-D-_KN9Fv.cjs');
|
|
7
7
|
const utils_cn = require('../cn-DG0X1KEP.cjs');
|
|
8
8
|
|
|
9
9
|
function ChatShellRoot({ className, scroller, ...props }) {
|
|
@@ -13,8 +13,8 @@ function ChatShellRoot({ className, scroller, ...props }) {
|
|
|
13
13
|
"data-slot": "chat-shell",
|
|
14
14
|
className: utils_cn.cn(
|
|
15
15
|
"@container relative isolate flex min-h-0 min-w-0 flex-col",
|
|
16
|
-
"[--chat-column:48rem] [--chat-
|
|
17
|
-
"[--chat-surface:var(--color-background)] [--chat-veil:
|
|
16
|
+
"[--chat-column:48rem] [--chat-edge:0.5rem] [--chat-fade:2rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]",
|
|
17
|
+
"[--chat-surface:var(--color-background)] [--chat-veil:100%]",
|
|
18
18
|
className
|
|
19
19
|
),
|
|
20
20
|
...props
|
|
@@ -32,7 +32,8 @@ function ChatShellViewport({ className, children, ...props }) {
|
|
|
32
32
|
messageScroller.MessageScrollerViewport,
|
|
33
33
|
{
|
|
34
34
|
className: utils_cn.cn(
|
|
35
|
-
"h-auto min-h-0 flex-1 pe-(--chat-inset-end)",
|
|
35
|
+
"h-auto min-h-0 flex-1 overscroll-none ps-(--chat-edge) pe-[calc(var(--chat-edge)+var(--chat-inset-end))]",
|
|
36
|
+
"[scrollbar-gutter:stable_both-edges]",
|
|
36
37
|
"transition-[padding] duration-360 ease-out-custom motion-reduce:transition-none",
|
|
37
38
|
className
|
|
38
39
|
),
|
|
@@ -80,7 +81,7 @@ function ChatShellDock({ className, ...props }) {
|
|
|
80
81
|
className: utils_cn.cn(
|
|
81
82
|
"sticky bottom-0 z-10 mt-(--chat-fade) shrink-0 pb-(--chat-gutter)",
|
|
82
83
|
"before:pointer-events-none before:absolute before:inset-x-0 before:-top-(--chat-fade) before:bottom-0 before:-z-10",
|
|
83
|
-
"before:bg-(--chat-surface) before:[mask-image:linear-gradient(to_bottom,transparent,rgb(0_0_0/var(--chat-veil))
|
|
84
|
+
"before:bg-(--chat-surface) before:[mask-image:linear-gradient(to_bottom,transparent,rgb(0_0_0/var(--chat-veil))_var(--chat-fade))]",
|
|
84
85
|
className
|
|
85
86
|
),
|
|
86
87
|
...props
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatShell.cjs.js","sources":["../../src/ds/components/ChatShell/chat-shell.tsx","../../src/ds/components/ChatShell/index.ts"],"sourcesContent":["import type { ComponentProps, ComponentPropsWithoutRef } from 'react';\n\nimport {\n MessageScroller,\n MessageScrollerButton,\n MessageScrollerContent,\n MessageScrollerProvider,\n MessageScrollerViewport,\n} from '../MessageScroller';\nimport type {\n MessageScrollerButtonProps,\n MessageScrollerContentProps,\n MessageScrollerProviderProps,\n MessageScrollerViewportProps,\n} from '../MessageScroller';\n\nimport { cn } from '@/lib/utils';\n\nexport type ChatShellProps = ComponentPropsWithoutRef<'div'> & {\n scroller?: Omit<MessageScrollerProviderProps, 'children'>;\n};\n\n/**\n * A chat page frame with exactly one scroll container. Bars sit above it, the\n * composer docks inside it, every region shares one column.\n *\n * Tuned through custom properties, all defaulted here: `--chat-column` (column\n * width), `--chat-surface` (the colour the composer veil ramps to — the shell\n * paints no fill of its own and inherits whatever surface hosts it, so this has\n * to name that same surface), `--chat-fade` (the band the veil ramps in\n * across, above the composer), `--chat-veil` (strongest it ever gets — the\n * transcript keeps showing through), `--chat-gutter` (room below the composer),\n * `--chat-inset-end` (room an overlay panel claims on the end edge).\n */\nexport function ChatShellRoot({ className, scroller, ...props }: ChatShellProps) {\n return (\n <MessageScrollerProvider {...scroller}>\n <div\n data-slot=\"chat-shell\"\n className={cn(\n '@container relative isolate flex min-h-0 min-w-0 flex-col',\n '[--chat-column:48rem] [--chat-fade:1.5rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]',\n '[--chat-surface:var(--color-background)] [--chat-veil:70%]',\n className,\n )}\n {...props}\n />\n </MessageScrollerProvider>\n );\n}\n\n/**\n * Full-width row above the scroller (session header, goal bar). No end inset: the\n * overlay panel it would dodge floats inside the stage, below the bars.\n */\nexport function ChatShellBar({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n return <div data-slot=\"chat-shell-bar\" className={cn('min-w-0 shrink-0', className)} {...props} />;\n}\n\n/** Positioned region holding the scroller plus anything overlaying it. */\nexport function ChatShellStage({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n return <MessageScroller className={cn('h-auto min-h-0 flex-1', className)} {...props} />;\n}\n\n/**\n * The one scroll container. It takes the end inset itself — on an ancestor the\n * same room would drag the scrollbar inward, off the true edge.\n */\nexport function ChatShellViewport({ className, children, ...props }: MessageScrollerViewportProps) {\n return (\n <MessageScrollerViewport\n className={cn(\n 'h-auto min-h-0 flex-1 pe-(--chat-inset-end)',\n 'transition-[padding] duration-360 ease-out-custom motion-reduce:transition-none',\n className,\n )}\n {...props}\n >\n {/* Sticky against the scroller itself is clamped to its box, not the\n scrolled height, and strands the dock mid-transcript. */}\n <div data-slot=\"chat-shell-track\" className=\"relative flex min-h-full min-w-0 flex-col\">\n {children}\n </div>\n </MessageScrollerViewport>\n );\n}\n\n/** Scrolling content. The air above the composer belongs to the dock's fade band. */\nexport function ChatShellContent({ className, ...props }: MessageScrollerContentProps) {\n return <MessageScrollerContent className={cn('flex-1', className)} {...props} />;\n}\n\n/** The shared reading column. Every chat region must go through it. */\nexport function ChatShellColumn({ className, ...props }: ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"chat-shell-column\"\n className={cn('mx-auto flex w-full max-w-(--chat-column) min-w-0 flex-col px-3 md:px-4', className)}\n {...props}\n />\n );\n}\n\nexport interface ChatShellTurnProps extends ComponentPropsWithoutRef<'div'> {\n /** Opened by a user message: the turn reserves room and releases it through a slow drift. */\n opensTurn?: boolean;\n /** Holds the reply's share of the screen open under the live turn while the run answers. */\n holdsRoom?: boolean;\n /** Restored mid-run: the room is already due, so it opens with no transition. */\n restored?: boolean;\n}\n\n/**\n * One user turn and the reply under it. The room is the answer's share of the\n * screen: the scroller parks the sent message exactly one room above the end of\n * the box, so wherever the composer ends the message rests with this much space\n * under it, and the scroller has nothing to follow until the answer outgrows it.\n * A full screen parked the message against the very top; 70 leaves it breathing.\n * Opening must outrun the scroller's trip; closing is the conversation settling.\n */\nexport function ChatShellTurn({ opensTurn, holdsRoom, restored, className, ...props }: ChatShellTurnProps) {\n return (\n <div\n data-slot=\"chat-shell-turn\"\n data-opens-turn={opensTurn ? 'true' : undefined}\n data-holds-room={holdsRoom ? 'true' : undefined}\n className={cn(\n 'flex flex-col',\n opensTurn &&\n 'min-h-0 transition-[min-height] duration-[1500ms] ease-[cubic-bezier(0.3,0,0.2,1)] motion-reduce:transition-none',\n holdsRoom && 'min-h-[70cqh] duration-[440ms] ease-[cubic-bezier(0.2,0,0.2,1)] starting:min-h-0',\n holdsRoom && restored && 'transition-none',\n className,\n )}\n {...props}\n />\n );\n}\n\n/**\n * Composer region, sticky but left in flow: its own height reserves the room the\n * transcript scrolls behind, so nothing measures it and a composer growing under\n * the cursor resizes no box the scroller watches.\n *\n * Behind it, one sheet of the page masked in over `--chat-fade` of air and never\n * past `--chat-veil`, so the transcript dims as it slides under but stays\n * readable through the card's surroundings. The ramp runs three times the air, so\n * it tops out behind the card and its end never shows.\n */\nexport function ChatShellDock({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n return (\n <div\n data-slot=\"chat-shell-dock\"\n className={cn(\n 'sticky bottom-0 z-10 mt-(--chat-fade) shrink-0 pb-(--chat-gutter)',\n 'before:pointer-events-none before:absolute before:inset-x-0 before:-top-(--chat-fade) before:bottom-0 before:-z-10',\n 'before:bg-(--chat-surface) before:[mask-image:linear-gradient(to_bottom,transparent,rgb(0_0_0/var(--chat-veil))_calc(var(--chat-fade)*3))]',\n className,\n )}\n {...props}\n />\n );\n}\n\n/**\n * Jump-to-latest, floating just above the dock. It belongs inside the dock:\n * anywhere else it centres on a box the scrollbar has not narrowed, landing off\n * the composer's axis.\n */\nexport function ChatShellScrollButton({ className, ...props }: MessageScrollerButtonProps) {\n return (\n <div\n data-slot=\"chat-shell-scroll-button\"\n className=\"pointer-events-none absolute inset-x-0 bottom-[calc(100%+0.5rem)] flex\"\n >\n <ChatShellColumn className=\"flex-row justify-center\">\n <MessageScrollerButton\n className={cn('pointer-events-auto static translate-x-0 rtl:translate-x-0', className)}\n {...props}\n />\n </ChatShellColumn>\n </div>\n );\n}\n","import {\n ChatShellBar,\n ChatShellColumn,\n ChatShellContent,\n ChatShellDock,\n ChatShellRoot,\n ChatShellScrollButton,\n ChatShellStage,\n ChatShellTurn,\n ChatShellViewport,\n} from './chat-shell';\n\nexport type { ChatShellProps, ChatShellTurnProps } from './chat-shell';\n\nexport const ChatShell = Object.assign(ChatShellRoot, {\n Bar: ChatShellBar,\n Column: ChatShellColumn,\n Content: ChatShellContent,\n Dock: ChatShellDock,\n ScrollButton: ChatShellScrollButton,\n Stage: ChatShellStage,\n Turn: ChatShellTurn,\n Viewport: ChatShellViewport,\n});\n"],"names":["jsx","MessageScrollerProvider","cn","MessageScroller","MessageScrollerViewport","MessageScrollerContent","MessageScrollerButton"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ChatShell.cjs.js","sources":["../../src/ds/components/ChatShell/chat-shell.tsx","../../src/ds/components/ChatShell/index.ts"],"sourcesContent":["import type { ComponentProps, ComponentPropsWithoutRef } from 'react';\n\nimport {\n MessageScroller,\n MessageScrollerButton,\n MessageScrollerContent,\n MessageScrollerProvider,\n MessageScrollerViewport,\n} from '../MessageScroller';\nimport type {\n MessageScrollerButtonProps,\n MessageScrollerContentProps,\n MessageScrollerProviderProps,\n MessageScrollerViewportProps,\n} from '../MessageScroller';\n\nimport { cn } from '@/lib/utils';\n\nexport type ChatShellProps = ComponentPropsWithoutRef<'div'> & {\n scroller?: Omit<MessageScrollerProviderProps, 'children'>;\n};\n\n/**\n * A chat page frame with exactly one scroll container. Bars sit above it, the\n * composer docks inside it, every region shares one column.\n *\n * Tuned through custom properties, all defaulted here: `--chat-column` (column\n * width), `--chat-surface` (the colour the composer veil ramps to — the shell\n * paints no fill of its own and inherits whatever surface hosts it, so this has\n * to name that same surface), `--chat-fade` (the band the veil ramps in\n * across, above the composer), `--chat-veil` (strongest it gets, opaque by\n * default so nothing reads under the composer), `--chat-gutter` (room below the\n * composer), `--chat-edge` (room on both sides, so the scrollbar never overlaps\n * the composer), `--chat-inset-end` (room an overlay panel claims on the end edge).\n */\nexport function ChatShellRoot({ className, scroller, ...props }: ChatShellProps) {\n return (\n <MessageScrollerProvider {...scroller}>\n <div\n data-slot=\"chat-shell\"\n className={cn(\n '@container relative isolate flex min-h-0 min-w-0 flex-col',\n '[--chat-column:48rem] [--chat-edge:0.5rem] [--chat-fade:2rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]',\n '[--chat-surface:var(--color-background)] [--chat-veil:100%]',\n className,\n )}\n {...props}\n />\n </MessageScrollerProvider>\n );\n}\n\n/**\n * Full-width row above the scroller (session header, goal bar). No end inset: the\n * overlay panel it would dodge floats inside the stage, below the bars.\n */\nexport function ChatShellBar({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n return <div data-slot=\"chat-shell-bar\" className={cn('min-w-0 shrink-0', className)} {...props} />;\n}\n\n/** Positioned region holding the scroller plus anything overlaying it. */\nexport function ChatShellStage({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n return <MessageScroller className={cn('h-auto min-h-0 flex-1', className)} {...props} />;\n}\n\n/**\n * The one scroll container. It takes the end inset itself — on an ancestor the\n * same room would drag the scrollbar inward, off the true edge. No overscroll\n * bounce on either axis: the dock is sticky inside this box, so the rubber band\n * would carry the composer off its edge along with the transcript.\n *\n * The same edge room on both sides keeps the scrollbar clear of the composer and\n * the column centred, with a matching gutter for classic scrollbars.\n */\nexport function ChatShellViewport({ className, children, ...props }: MessageScrollerViewportProps) {\n return (\n <MessageScrollerViewport\n className={cn(\n 'h-auto min-h-0 flex-1 overscroll-none ps-(--chat-edge) pe-[calc(var(--chat-edge)+var(--chat-inset-end))]',\n '[scrollbar-gutter:stable_both-edges]',\n 'transition-[padding] duration-360 ease-out-custom motion-reduce:transition-none',\n className,\n )}\n {...props}\n >\n {/* Sticky against the scroller itself is clamped to its box, not the\n scrolled height, and strands the dock mid-transcript. */}\n <div data-slot=\"chat-shell-track\" className=\"relative flex min-h-full min-w-0 flex-col\">\n {children}\n </div>\n </MessageScrollerViewport>\n );\n}\n\n/** Scrolling content. The air above the composer belongs to the dock's fade band. */\nexport function ChatShellContent({ className, ...props }: MessageScrollerContentProps) {\n return <MessageScrollerContent className={cn('flex-1', className)} {...props} />;\n}\n\n/** The shared reading column. Every chat region must go through it. */\nexport function ChatShellColumn({ className, ...props }: ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"chat-shell-column\"\n className={cn('mx-auto flex w-full max-w-(--chat-column) min-w-0 flex-col px-3 md:px-4', className)}\n {...props}\n />\n );\n}\n\nexport interface ChatShellTurnProps extends ComponentPropsWithoutRef<'div'> {\n /** Opened by a user message: the turn reserves room and releases it through a slow drift. */\n opensTurn?: boolean;\n /** Holds the reply's share of the screen open under the live turn while the run answers. */\n holdsRoom?: boolean;\n /** Restored mid-run: the room is already due, so it opens with no transition. */\n restored?: boolean;\n}\n\n/**\n * One user turn and the reply under it. The room is the answer's share of the\n * screen: the scroller parks the sent message exactly one room above the end of\n * the box, so wherever the composer ends the message rests with this much space\n * under it, and the scroller has nothing to follow until the answer outgrows it.\n * A full screen parked the message against the very top; 70 leaves it breathing.\n * Opening must outrun the scroller's trip; closing is the conversation settling.\n */\nexport function ChatShellTurn({ opensTurn, holdsRoom, restored, className, ...props }: ChatShellTurnProps) {\n return (\n <div\n data-slot=\"chat-shell-turn\"\n data-opens-turn={opensTurn ? 'true' : undefined}\n data-holds-room={holdsRoom ? 'true' : undefined}\n className={cn(\n 'flex flex-col',\n opensTurn &&\n 'min-h-0 transition-[min-height] duration-[1500ms] ease-[cubic-bezier(0.3,0,0.2,1)] motion-reduce:transition-none',\n holdsRoom && 'min-h-[70cqh] duration-[440ms] ease-[cubic-bezier(0.2,0,0.2,1)] starting:min-h-0',\n holdsRoom && restored && 'transition-none',\n className,\n )}\n {...props}\n />\n );\n}\n\n/**\n * Composer region, sticky but left in flow: its own height reserves the room the\n * transcript scrolls behind, so nothing measures it and a composer growing under\n * the cursor resizes no box the scroller watches.\n *\n * Behind it, one sheet of the page masked in over `--chat-fade` of air, reaching\n * `--chat-veil` at the dock's top edge. The transcript fades out above the\n * composer and nothing shows through around or under the card.\n */\nexport function ChatShellDock({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n return (\n <div\n data-slot=\"chat-shell-dock\"\n className={cn(\n 'sticky bottom-0 z-10 mt-(--chat-fade) shrink-0 pb-(--chat-gutter)',\n 'before:pointer-events-none before:absolute before:inset-x-0 before:-top-(--chat-fade) before:bottom-0 before:-z-10',\n 'before:bg-(--chat-surface) before:[mask-image:linear-gradient(to_bottom,transparent,rgb(0_0_0/var(--chat-veil))_var(--chat-fade))]',\n className,\n )}\n {...props}\n />\n );\n}\n\n/**\n * Jump-to-latest, floating just above the dock. It belongs inside the dock:\n * anywhere else it centres on a box the scrollbar has not narrowed, landing off\n * the composer's axis.\n */\nexport function ChatShellScrollButton({ className, ...props }: MessageScrollerButtonProps) {\n return (\n <div\n data-slot=\"chat-shell-scroll-button\"\n className=\"pointer-events-none absolute inset-x-0 bottom-[calc(100%+0.5rem)] flex\"\n >\n <ChatShellColumn className=\"flex-row justify-center\">\n <MessageScrollerButton\n className={cn('pointer-events-auto static translate-x-0 rtl:translate-x-0', className)}\n {...props}\n />\n </ChatShellColumn>\n </div>\n );\n}\n","import {\n ChatShellBar,\n ChatShellColumn,\n ChatShellContent,\n ChatShellDock,\n ChatShellRoot,\n ChatShellScrollButton,\n ChatShellStage,\n ChatShellTurn,\n ChatShellViewport,\n} from './chat-shell';\n\nexport type { ChatShellProps, ChatShellTurnProps } from './chat-shell';\n\nexport const ChatShell = Object.assign(ChatShellRoot, {\n Bar: ChatShellBar,\n Column: ChatShellColumn,\n Content: ChatShellContent,\n Dock: ChatShellDock,\n ScrollButton: ChatShellScrollButton,\n Stage: ChatShellStage,\n Turn: ChatShellTurn,\n Viewport: ChatShellViewport,\n});\n"],"names":["jsx","MessageScrollerProvider","cn","MessageScroller","MessageScrollerViewport","MessageScrollerContent","MessageScrollerButton"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { d as MessageScrollerProvider, e as MessageScrollerViewport, M as MessageScroller, a as MessageScrollerButton, b as MessageScrollerContent } from '../message-scroller-
|
|
2
|
+
import { d as MessageScrollerProvider, e as MessageScrollerViewport, M as MessageScroller, a as MessageScrollerButton, b as MessageScrollerContent } from '../message-scroller-WWaQ-XU_.js';
|
|
3
3
|
import { c as cn } from '../cn-65Adrsfj.js';
|
|
4
4
|
|
|
5
5
|
function ChatShellRoot({ className, scroller, ...props }) {
|
|
@@ -9,8 +9,8 @@ function ChatShellRoot({ className, scroller, ...props }) {
|
|
|
9
9
|
"data-slot": "chat-shell",
|
|
10
10
|
className: cn(
|
|
11
11
|
"@container relative isolate flex min-h-0 min-w-0 flex-col",
|
|
12
|
-
"[--chat-column:48rem] [--chat-
|
|
13
|
-
"[--chat-surface:var(--color-background)] [--chat-veil:
|
|
12
|
+
"[--chat-column:48rem] [--chat-edge:0.5rem] [--chat-fade:2rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]",
|
|
13
|
+
"[--chat-surface:var(--color-background)] [--chat-veil:100%]",
|
|
14
14
|
className
|
|
15
15
|
),
|
|
16
16
|
...props
|
|
@@ -28,7 +28,8 @@ function ChatShellViewport({ className, children, ...props }) {
|
|
|
28
28
|
MessageScrollerViewport,
|
|
29
29
|
{
|
|
30
30
|
className: cn(
|
|
31
|
-
"h-auto min-h-0 flex-1 pe-(--chat-inset-end)",
|
|
31
|
+
"h-auto min-h-0 flex-1 overscroll-none ps-(--chat-edge) pe-[calc(var(--chat-edge)+var(--chat-inset-end))]",
|
|
32
|
+
"[scrollbar-gutter:stable_both-edges]",
|
|
32
33
|
"transition-[padding] duration-360 ease-out-custom motion-reduce:transition-none",
|
|
33
34
|
className
|
|
34
35
|
),
|
|
@@ -76,7 +77,7 @@ function ChatShellDock({ className, ...props }) {
|
|
|
76
77
|
className: cn(
|
|
77
78
|
"sticky bottom-0 z-10 mt-(--chat-fade) shrink-0 pb-(--chat-gutter)",
|
|
78
79
|
"before:pointer-events-none before:absolute before:inset-x-0 before:-top-(--chat-fade) before:bottom-0 before:-z-10",
|
|
79
|
-
"before:bg-(--chat-surface) before:[mask-image:linear-gradient(to_bottom,transparent,rgb(0_0_0/var(--chat-veil))
|
|
80
|
+
"before:bg-(--chat-surface) before:[mask-image:linear-gradient(to_bottom,transparent,rgb(0_0_0/var(--chat-veil))_var(--chat-fade))]",
|
|
80
81
|
className
|
|
81
82
|
),
|
|
82
83
|
...props
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatShell.es.js","sources":["../../src/ds/components/ChatShell/chat-shell.tsx","../../src/ds/components/ChatShell/index.ts"],"sourcesContent":["import type { ComponentProps, ComponentPropsWithoutRef } from 'react';\n\nimport {\n MessageScroller,\n MessageScrollerButton,\n MessageScrollerContent,\n MessageScrollerProvider,\n MessageScrollerViewport,\n} from '../MessageScroller';\nimport type {\n MessageScrollerButtonProps,\n MessageScrollerContentProps,\n MessageScrollerProviderProps,\n MessageScrollerViewportProps,\n} from '../MessageScroller';\n\nimport { cn } from '@/lib/utils';\n\nexport type ChatShellProps = ComponentPropsWithoutRef<'div'> & {\n scroller?: Omit<MessageScrollerProviderProps, 'children'>;\n};\n\n/**\n * A chat page frame with exactly one scroll container. Bars sit above it, the\n * composer docks inside it, every region shares one column.\n *\n * Tuned through custom properties, all defaulted here: `--chat-column` (column\n * width), `--chat-surface` (the colour the composer veil ramps to — the shell\n * paints no fill of its own and inherits whatever surface hosts it, so this has\n * to name that same surface), `--chat-fade` (the band the veil ramps in\n * across, above the composer), `--chat-veil` (strongest it ever gets — the\n * transcript keeps showing through), `--chat-gutter` (room below the composer),\n * `--chat-inset-end` (room an overlay panel claims on the end edge).\n */\nexport function ChatShellRoot({ className, scroller, ...props }: ChatShellProps) {\n return (\n <MessageScrollerProvider {...scroller}>\n <div\n data-slot=\"chat-shell\"\n className={cn(\n '@container relative isolate flex min-h-0 min-w-0 flex-col',\n '[--chat-column:48rem] [--chat-fade:1.5rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]',\n '[--chat-surface:var(--color-background)] [--chat-veil:70%]',\n className,\n )}\n {...props}\n />\n </MessageScrollerProvider>\n );\n}\n\n/**\n * Full-width row above the scroller (session header, goal bar). No end inset: the\n * overlay panel it would dodge floats inside the stage, below the bars.\n */\nexport function ChatShellBar({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n return <div data-slot=\"chat-shell-bar\" className={cn('min-w-0 shrink-0', className)} {...props} />;\n}\n\n/** Positioned region holding the scroller plus anything overlaying it. */\nexport function ChatShellStage({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n return <MessageScroller className={cn('h-auto min-h-0 flex-1', className)} {...props} />;\n}\n\n/**\n * The one scroll container. It takes the end inset itself — on an ancestor the\n * same room would drag the scrollbar inward, off the true edge.\n */\nexport function ChatShellViewport({ className, children, ...props }: MessageScrollerViewportProps) {\n return (\n <MessageScrollerViewport\n className={cn(\n 'h-auto min-h-0 flex-1 pe-(--chat-inset-end)',\n 'transition-[padding] duration-360 ease-out-custom motion-reduce:transition-none',\n className,\n )}\n {...props}\n >\n {/* Sticky against the scroller itself is clamped to its box, not the\n scrolled height, and strands the dock mid-transcript. */}\n <div data-slot=\"chat-shell-track\" className=\"relative flex min-h-full min-w-0 flex-col\">\n {children}\n </div>\n </MessageScrollerViewport>\n );\n}\n\n/** Scrolling content. The air above the composer belongs to the dock's fade band. */\nexport function ChatShellContent({ className, ...props }: MessageScrollerContentProps) {\n return <MessageScrollerContent className={cn('flex-1', className)} {...props} />;\n}\n\n/** The shared reading column. Every chat region must go through it. */\nexport function ChatShellColumn({ className, ...props }: ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"chat-shell-column\"\n className={cn('mx-auto flex w-full max-w-(--chat-column) min-w-0 flex-col px-3 md:px-4', className)}\n {...props}\n />\n );\n}\n\nexport interface ChatShellTurnProps extends ComponentPropsWithoutRef<'div'> {\n /** Opened by a user message: the turn reserves room and releases it through a slow drift. */\n opensTurn?: boolean;\n /** Holds the reply's share of the screen open under the live turn while the run answers. */\n holdsRoom?: boolean;\n /** Restored mid-run: the room is already due, so it opens with no transition. */\n restored?: boolean;\n}\n\n/**\n * One user turn and the reply under it. The room is the answer's share of the\n * screen: the scroller parks the sent message exactly one room above the end of\n * the box, so wherever the composer ends the message rests with this much space\n * under it, and the scroller has nothing to follow until the answer outgrows it.\n * A full screen parked the message against the very top; 70 leaves it breathing.\n * Opening must outrun the scroller's trip; closing is the conversation settling.\n */\nexport function ChatShellTurn({ opensTurn, holdsRoom, restored, className, ...props }: ChatShellTurnProps) {\n return (\n <div\n data-slot=\"chat-shell-turn\"\n data-opens-turn={opensTurn ? 'true' : undefined}\n data-holds-room={holdsRoom ? 'true' : undefined}\n className={cn(\n 'flex flex-col',\n opensTurn &&\n 'min-h-0 transition-[min-height] duration-[1500ms] ease-[cubic-bezier(0.3,0,0.2,1)] motion-reduce:transition-none',\n holdsRoom && 'min-h-[70cqh] duration-[440ms] ease-[cubic-bezier(0.2,0,0.2,1)] starting:min-h-0',\n holdsRoom && restored && 'transition-none',\n className,\n )}\n {...props}\n />\n );\n}\n\n/**\n * Composer region, sticky but left in flow: its own height reserves the room the\n * transcript scrolls behind, so nothing measures it and a composer growing under\n * the cursor resizes no box the scroller watches.\n *\n * Behind it, one sheet of the page masked in over `--chat-fade` of air and never\n * past `--chat-veil`, so the transcript dims as it slides under but stays\n * readable through the card's surroundings. The ramp runs three times the air, so\n * it tops out behind the card and its end never shows.\n */\nexport function ChatShellDock({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n return (\n <div\n data-slot=\"chat-shell-dock\"\n className={cn(\n 'sticky bottom-0 z-10 mt-(--chat-fade) shrink-0 pb-(--chat-gutter)',\n 'before:pointer-events-none before:absolute before:inset-x-0 before:-top-(--chat-fade) before:bottom-0 before:-z-10',\n 'before:bg-(--chat-surface) before:[mask-image:linear-gradient(to_bottom,transparent,rgb(0_0_0/var(--chat-veil))_calc(var(--chat-fade)*3))]',\n className,\n )}\n {...props}\n />\n );\n}\n\n/**\n * Jump-to-latest, floating just above the dock. It belongs inside the dock:\n * anywhere else it centres on a box the scrollbar has not narrowed, landing off\n * the composer's axis.\n */\nexport function ChatShellScrollButton({ className, ...props }: MessageScrollerButtonProps) {\n return (\n <div\n data-slot=\"chat-shell-scroll-button\"\n className=\"pointer-events-none absolute inset-x-0 bottom-[calc(100%+0.5rem)] flex\"\n >\n <ChatShellColumn className=\"flex-row justify-center\">\n <MessageScrollerButton\n className={cn('pointer-events-auto static translate-x-0 rtl:translate-x-0', className)}\n {...props}\n />\n </ChatShellColumn>\n </div>\n );\n}\n","import {\n ChatShellBar,\n ChatShellColumn,\n ChatShellContent,\n ChatShellDock,\n ChatShellRoot,\n ChatShellScrollButton,\n ChatShellStage,\n ChatShellTurn,\n ChatShellViewport,\n} from './chat-shell';\n\nexport type { ChatShellProps, ChatShellTurnProps } from './chat-shell';\n\nexport const ChatShell = Object.assign(ChatShellRoot, {\n Bar: ChatShellBar,\n Column: ChatShellColumn,\n Content: ChatShellContent,\n Dock: ChatShellDock,\n ScrollButton: ChatShellScrollButton,\n Stage: ChatShellStage,\n Turn: ChatShellTurn,\n Viewport: ChatShellViewport,\n});\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ChatShell.es.js","sources":["../../src/ds/components/ChatShell/chat-shell.tsx","../../src/ds/components/ChatShell/index.ts"],"sourcesContent":["import type { ComponentProps, ComponentPropsWithoutRef } from 'react';\n\nimport {\n MessageScroller,\n MessageScrollerButton,\n MessageScrollerContent,\n MessageScrollerProvider,\n MessageScrollerViewport,\n} from '../MessageScroller';\nimport type {\n MessageScrollerButtonProps,\n MessageScrollerContentProps,\n MessageScrollerProviderProps,\n MessageScrollerViewportProps,\n} from '../MessageScroller';\n\nimport { cn } from '@/lib/utils';\n\nexport type ChatShellProps = ComponentPropsWithoutRef<'div'> & {\n scroller?: Omit<MessageScrollerProviderProps, 'children'>;\n};\n\n/**\n * A chat page frame with exactly one scroll container. Bars sit above it, the\n * composer docks inside it, every region shares one column.\n *\n * Tuned through custom properties, all defaulted here: `--chat-column` (column\n * width), `--chat-surface` (the colour the composer veil ramps to — the shell\n * paints no fill of its own and inherits whatever surface hosts it, so this has\n * to name that same surface), `--chat-fade` (the band the veil ramps in\n * across, above the composer), `--chat-veil` (strongest it gets, opaque by\n * default so nothing reads under the composer), `--chat-gutter` (room below the\n * composer), `--chat-edge` (room on both sides, so the scrollbar never overlaps\n * the composer), `--chat-inset-end` (room an overlay panel claims on the end edge).\n */\nexport function ChatShellRoot({ className, scroller, ...props }: ChatShellProps) {\n return (\n <MessageScrollerProvider {...scroller}>\n <div\n data-slot=\"chat-shell\"\n className={cn(\n '@container relative isolate flex min-h-0 min-w-0 flex-col',\n '[--chat-column:48rem] [--chat-edge:0.5rem] [--chat-fade:2rem] [--chat-gutter:0.75rem] [--chat-inset-end:0px]',\n '[--chat-surface:var(--color-background)] [--chat-veil:100%]',\n className,\n )}\n {...props}\n />\n </MessageScrollerProvider>\n );\n}\n\n/**\n * Full-width row above the scroller (session header, goal bar). No end inset: the\n * overlay panel it would dodge floats inside the stage, below the bars.\n */\nexport function ChatShellBar({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n return <div data-slot=\"chat-shell-bar\" className={cn('min-w-0 shrink-0', className)} {...props} />;\n}\n\n/** Positioned region holding the scroller plus anything overlaying it. */\nexport function ChatShellStage({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n return <MessageScroller className={cn('h-auto min-h-0 flex-1', className)} {...props} />;\n}\n\n/**\n * The one scroll container. It takes the end inset itself — on an ancestor the\n * same room would drag the scrollbar inward, off the true edge. No overscroll\n * bounce on either axis: the dock is sticky inside this box, so the rubber band\n * would carry the composer off its edge along with the transcript.\n *\n * The same edge room on both sides keeps the scrollbar clear of the composer and\n * the column centred, with a matching gutter for classic scrollbars.\n */\nexport function ChatShellViewport({ className, children, ...props }: MessageScrollerViewportProps) {\n return (\n <MessageScrollerViewport\n className={cn(\n 'h-auto min-h-0 flex-1 overscroll-none ps-(--chat-edge) pe-[calc(var(--chat-edge)+var(--chat-inset-end))]',\n '[scrollbar-gutter:stable_both-edges]',\n 'transition-[padding] duration-360 ease-out-custom motion-reduce:transition-none',\n className,\n )}\n {...props}\n >\n {/* Sticky against the scroller itself is clamped to its box, not the\n scrolled height, and strands the dock mid-transcript. */}\n <div data-slot=\"chat-shell-track\" className=\"relative flex min-h-full min-w-0 flex-col\">\n {children}\n </div>\n </MessageScrollerViewport>\n );\n}\n\n/** Scrolling content. The air above the composer belongs to the dock's fade band. */\nexport function ChatShellContent({ className, ...props }: MessageScrollerContentProps) {\n return <MessageScrollerContent className={cn('flex-1', className)} {...props} />;\n}\n\n/** The shared reading column. Every chat region must go through it. */\nexport function ChatShellColumn({ className, ...props }: ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"chat-shell-column\"\n className={cn('mx-auto flex w-full max-w-(--chat-column) min-w-0 flex-col px-3 md:px-4', className)}\n {...props}\n />\n );\n}\n\nexport interface ChatShellTurnProps extends ComponentPropsWithoutRef<'div'> {\n /** Opened by a user message: the turn reserves room and releases it through a slow drift. */\n opensTurn?: boolean;\n /** Holds the reply's share of the screen open under the live turn while the run answers. */\n holdsRoom?: boolean;\n /** Restored mid-run: the room is already due, so it opens with no transition. */\n restored?: boolean;\n}\n\n/**\n * One user turn and the reply under it. The room is the answer's share of the\n * screen: the scroller parks the sent message exactly one room above the end of\n * the box, so wherever the composer ends the message rests with this much space\n * under it, and the scroller has nothing to follow until the answer outgrows it.\n * A full screen parked the message against the very top; 70 leaves it breathing.\n * Opening must outrun the scroller's trip; closing is the conversation settling.\n */\nexport function ChatShellTurn({ opensTurn, holdsRoom, restored, className, ...props }: ChatShellTurnProps) {\n return (\n <div\n data-slot=\"chat-shell-turn\"\n data-opens-turn={opensTurn ? 'true' : undefined}\n data-holds-room={holdsRoom ? 'true' : undefined}\n className={cn(\n 'flex flex-col',\n opensTurn &&\n 'min-h-0 transition-[min-height] duration-[1500ms] ease-[cubic-bezier(0.3,0,0.2,1)] motion-reduce:transition-none',\n holdsRoom && 'min-h-[70cqh] duration-[440ms] ease-[cubic-bezier(0.2,0,0.2,1)] starting:min-h-0',\n holdsRoom && restored && 'transition-none',\n className,\n )}\n {...props}\n />\n );\n}\n\n/**\n * Composer region, sticky but left in flow: its own height reserves the room the\n * transcript scrolls behind, so nothing measures it and a composer growing under\n * the cursor resizes no box the scroller watches.\n *\n * Behind it, one sheet of the page masked in over `--chat-fade` of air, reaching\n * `--chat-veil` at the dock's top edge. The transcript fades out above the\n * composer and nothing shows through around or under the card.\n */\nexport function ChatShellDock({ className, ...props }: ComponentPropsWithoutRef<'div'>) {\n return (\n <div\n data-slot=\"chat-shell-dock\"\n className={cn(\n 'sticky bottom-0 z-10 mt-(--chat-fade) shrink-0 pb-(--chat-gutter)',\n 'before:pointer-events-none before:absolute before:inset-x-0 before:-top-(--chat-fade) before:bottom-0 before:-z-10',\n 'before:bg-(--chat-surface) before:[mask-image:linear-gradient(to_bottom,transparent,rgb(0_0_0/var(--chat-veil))_var(--chat-fade))]',\n className,\n )}\n {...props}\n />\n );\n}\n\n/**\n * Jump-to-latest, floating just above the dock. It belongs inside the dock:\n * anywhere else it centres on a box the scrollbar has not narrowed, landing off\n * the composer's axis.\n */\nexport function ChatShellScrollButton({ className, ...props }: MessageScrollerButtonProps) {\n return (\n <div\n data-slot=\"chat-shell-scroll-button\"\n className=\"pointer-events-none absolute inset-x-0 bottom-[calc(100%+0.5rem)] flex\"\n >\n <ChatShellColumn className=\"flex-row justify-center\">\n <MessageScrollerButton\n className={cn('pointer-events-auto static translate-x-0 rtl:translate-x-0', className)}\n {...props}\n />\n </ChatShellColumn>\n </div>\n );\n}\n","import {\n ChatShellBar,\n ChatShellColumn,\n ChatShellContent,\n ChatShellDock,\n ChatShellRoot,\n ChatShellScrollButton,\n ChatShellStage,\n ChatShellTurn,\n ChatShellViewport,\n} from './chat-shell';\n\nexport type { ChatShellProps, ChatShellTurnProps } from './chat-shell';\n\nexport const ChatShell = Object.assign(ChatShellRoot, {\n Bar: ChatShellBar,\n Column: ChatShellColumn,\n Content: ChatShellContent,\n Dock: ChatShellDock,\n ScrollButton: ChatShellScrollButton,\n Stage: ChatShellStage,\n Turn: ChatShellTurn,\n Viewport: ChatShellViewport,\n});\n"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { C as Code, t as tokenStyle, u as useHighlight } from '../code-
|
|
1
|
+
export { C as Code, t as tokenStyle, u as useHighlight } from '../code-C8akLzcu.js';
|
|
2
2
|
//# sourceMappingURL=Code.es.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { C as CodeBlock } from '../code-block-
|
|
1
|
+
export { C as CodeBlock } from '../code-block-CXZNO_qi.js';
|
|
2
2
|
//# sourceMappingURL=CodeBlock.es.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { D as DataCodeSection } from '../data-code-section-
|
|
1
|
+
export { D as DataCodeSection } from '../data-code-section-yMYmVciV.js';
|
|
2
2
|
//# sourceMappingURL=DataCodeSection.es.js.map
|
|
@@ -8,7 +8,7 @@ const lucideReact = require('lucide-react');
|
|
|
8
8
|
const Button = require('../Button-CXhSUBxN.cjs');
|
|
9
9
|
const React = require('react');
|
|
10
10
|
const buttonsGroup = require('../buttons-group-CoZP3lJt.cjs');
|
|
11
|
-
const code = require('../code-
|
|
11
|
+
const code = require('../code-D_sH618U.cjs');
|
|
12
12
|
const copyButton = require('../copy-button-CGkFEDHF.cjs');
|
|
13
13
|
const primitives_raisedSurface = require('../primitives/raised-surface.cjs.js');
|
|
14
14
|
const Txt = require('../Txt-DNnvlrBo.cjs');
|
|
@@ -4,7 +4,7 @@ import { XIcon, AlignLeftIcon, AlignJustifyIcon } from 'lucide-react';
|
|
|
4
4
|
import { B as Button } from '../Button-D43ghVKt.js';
|
|
5
5
|
import { useState, useMemo } from 'react';
|
|
6
6
|
import { B as ButtonsGroup } from '../buttons-group-DsZgrZBZ.js';
|
|
7
|
-
import { C as Code } from '../code-
|
|
7
|
+
import { C as Code } from '../code-C8akLzcu.js';
|
|
8
8
|
import { C as CopyButton } from '../copy-button-DH8xtrWz.js';
|
|
9
9
|
import { raisedSurfaceStyle } from '../primitives/raised-surface.es.js';
|
|
10
10
|
import { T as Txt } from '../Txt-C3cYJgKU.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { D as DataPanel } from '../data-panel-
|
|
1
|
+
export { D as DataPanel } from '../data-panel-GT4fMXR0.js';
|
|
2
2
|
//# sourceMappingURL=DataPanel.es.js.map
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const markdownRenderer = require('../markdown-renderer-
|
|
5
|
+
const markdownRenderer = require('../markdown-renderer-4iyMU2Cm.cjs');
|
|
6
6
|
const useReveal = require('../use-reveal-Sa456jZb.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const messageScroller = require('../message-scroller-
|
|
5
|
+
const messageScroller = require('../message-scroller-D-_KN9Fv.cjs');
|
|
6
6
|
const messageScrollerHooks = require('../message-scroller-hooks-BxAf8k0Y.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { M as MessageScroller, a as MessageScrollerButton, b as MessageScrollerContent, c as MessageScrollerItem, d as MessageScrollerProvider, e as MessageScrollerViewport } from '../message-scroller-
|
|
1
|
+
export { M as MessageScroller, a as MessageScrollerButton, b as MessageScrollerContent, c as MessageScrollerItem, d as MessageScrollerProvider, e as MessageScrollerViewport } from '../message-scroller-WWaQ-XU_.js';
|
|
2
2
|
export { u as useMessageScroller, a as useMessageScrollerScrollable, b as useMessageScrollerVisibility, c as useOptionalMessageScroller, d as useOptionalMessageScrollerScrollable, e as useOptionalMessageScrollerVisibility } from '../message-scroller-hooks-BEeE1WE6.js';
|
|
3
3
|
//# sourceMappingURL=MessageScroller.es.js.map
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
5
|
const workflowCanvasInset = require('../workflow-canvas-inset-CMasaX9u.cjs');
|
|
6
|
-
const workflowConditionCard = require('../workflow-condition-card-
|
|
6
|
+
const workflowConditionCard = require('../workflow-condition-card-Dlo2PaKV.cjs');
|
|
7
7
|
const workflowCodeDialogContent = require('../workflow-code-dialog-content-DyoN3850.cjs');
|
|
8
8
|
const workflowEdgeDataButton = require('../workflow-edge-data-button-CHoNrfef.cjs');
|
|
9
9
|
const types = require('../types-1cBe2TOn.cjs');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { W as WorkflowCanvasInsetContext, w as workflowFitOptions } from '../workflow-canvas-inset-23mBz2N6.js';
|
|
2
|
-
export { B as BADGE_COLORS, a as BADGE_ICONS, W as WorkflowBoundaryNode, b as WorkflowClock, c as WorkflowConditionCard, d as WorkflowConditionCardView, e as WorkflowGraphCanvas, f as WorkflowNodeFrame, g as WorkflowStepCardView, h as WorkflowTypeBadge, i as getConditionIconAndColor, j as getConditionIndicator, k as getNodeBadgeInfo, l as getNodeIndicators } from '../workflow-condition-card-
|
|
2
|
+
export { B as BADGE_COLORS, a as BADGE_ICONS, W as WorkflowBoundaryNode, b as WorkflowClock, c as WorkflowConditionCard, d as WorkflowConditionCardView, e as WorkflowGraphCanvas, f as WorkflowNodeFrame, g as WorkflowStepCardView, h as WorkflowTypeBadge, i as getConditionIconAndColor, j as getConditionIndicator, k as getNodeBadgeInfo, l as getNodeIndicators } from '../workflow-condition-card-BCSYogql.js';
|
|
3
3
|
export { W as WorkflowCodeContent } from '../workflow-code-dialog-content-3AcgitHa.js';
|
|
4
4
|
export { W as WorkflowEdgeDataButton } from '../workflow-edge-data-button-B7bM7UqW.js';
|
|
5
5
|
export { W as WORKFLOW_BOUNDARY_NODE_TYPE, a as WORKFLOW_DATA_EDGE_TYPE } from '../types-CvneO3z0.js';
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
4
4
|
|
|
5
5
|
const activity = require('../../activity-ClKZR5_o.cjs');
|
|
6
6
|
const notificationActivity = require('../../notification-activity-C_vZiswj.cjs');
|
|
7
|
-
const reasoningActivity = require('../../reasoning-activity-
|
|
7
|
+
const reasoningActivity = require('../../reasoning-activity-COiiln9U.cjs');
|
|
8
8
|
const reasoningVisibility = require('../../reasoning-visibility-DXho4jGC.cjs');
|
|
9
9
|
const signalActivity = require('../../signal-activity-BI-DRdjw.cjs');
|
|
10
10
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { A as Activity, a as ActivityContent, b as ActivityDetail, c as ActivityDisclosure, d as ActivityHeader, e as ActivityHeadline, f as ActivityIcon, g as ActivityItem, h as ActivityLabel, i as ActivityLeading, j as ActivitySpacer, k as ActivitySummary, l as ActivityTrailing, m as ActivityTrigger } from '../../activity-D0SefV4r.js';
|
|
2
2
|
export { N as NotificationActivity } from '../../notification-activity-BDoleJAA.js';
|
|
3
|
-
export { R as ReasoningActivity } from '../../reasoning-activity-
|
|
3
|
+
export { R as ReasoningActivity } from '../../reasoning-activity-r7B4_j4d.js';
|
|
4
4
|
export { h as hasVisibleReasoning } from '../../reasoning-visibility-B9rA0AIj.js';
|
|
5
5
|
export { S as SignalActivity } from '../../signal-activity-_ChAbNsW.js';
|
|
6
6
|
//# sourceMappingURL=activity.es.js.map
|