@astryxdesign/core 0.6.3-canary.2c831e4 → 0.6.3-canary.31b58bc
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/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +13 -28
- package/dist/Chat/ChatMessageBubble.d.ts +2 -0
- package/dist/Chat/ChatMessageBubble.d.ts.map +1 -1
- package/dist/Chat/ChatMessageBubble.js +5 -3
- package/dist/Chat/ChatMessageList.d.ts +2 -1
- package/dist/Chat/ChatMessageList.d.ts.map +1 -1
- package/dist/Chat/ChatMessageList.js +4 -3
- package/dist/Chat/ChatMessageMetadata.d.ts +5 -4
- package/dist/Chat/ChatMessageMetadata.d.ts.map +1 -1
- package/dist/Chat/ChatMessageMetadata.js +12 -9
- package/dist/Chat/ChatSendButton.d.ts +2 -1
- package/dist/Chat/ChatSendButton.d.ts.map +1 -1
- package/dist/Chat/ChatSendButton.js +5 -3
- package/dist/Chat/ChatSystemMessage.d.ts +3 -3
- package/dist/Chat/ChatSystemMessage.d.ts.map +1 -1
- package/dist/Chat/ChatSystemMessage.js +2 -2
- package/dist/Chat/ChatTokenizedText.d.ts +6 -6
- package/dist/Chat/ChatTokenizedText.js +10 -6
- package/dist/Dialog/DialogHeader.d.ts.map +1 -1
- package/dist/Dialog/DialogHeader.js +4 -4
- package/dist/Icon/Icon.d.ts +6 -31
- package/dist/Icon/Icon.d.ts.map +1 -1
- package/dist/Icon/Icon.js +8 -71
- package/dist/Icon/IconDefaultSizeContext.d.ts +4 -0
- package/dist/Icon/IconDefaultSizeContext.d.ts.map +1 -0
- package/dist/Icon/IconDefaultSizeContext.js +18 -0
- package/dist/Icon/IconSize.stylex.d.ts +65 -0
- package/dist/Icon/IconSize.stylex.d.ts.map +1 -0
- package/dist/Icon/IconSize.stylex.js +75 -0
- package/dist/Item/Item.d.ts +1 -1
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +4 -3
- package/dist/List/List.d.ts +19 -1
- package/dist/List/List.d.ts.map +1 -1
- package/dist/List/List.js +9 -2
- package/dist/List/ListContext.d.ts +1 -0
- package/dist/List/ListContext.d.ts.map +1 -1
- package/dist/List/ListContext.js +2 -1
- package/dist/List/ListItem.d.ts +1 -1
- package/dist/List/ListItem.d.ts.map +1 -1
- package/dist/List/ListItem.js +9 -2
- package/dist/Markdown/parser.d.ts.map +1 -1
- package/dist/Markdown/parser.js +15 -15
- package/dist/Markdown/plugins/index.d.ts +1 -0
- package/dist/Markdown/plugins/index.d.ts.map +1 -1
- package/dist/Markdown/plugins/index.js +2 -1
- package/dist/Markdown/plugins/softBreaks.d.ts +3 -0
- package/dist/Markdown/plugins/softBreaks.d.ts.map +1 -0
- package/dist/Markdown/plugins/softBreaks.js +172 -0
- package/dist/MetadataList/MetadataList.js +3 -3
- package/dist/ScrollableArea/ScrollableArea.d.ts +1 -0
- package/dist/ScrollableArea/ScrollableArea.d.ts.map +1 -1
- package/dist/ScrollableArea/ScrollableArea.js +1 -0
- package/dist/SegmentedControl/SegmentedControl.d.ts +1 -1
- package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControl.js +1 -0
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +9 -2
- package/dist/astryx.css +7 -2
- package/dist/theme/derivedVarRegistry.d.ts.map +1 -1
- package/dist/theme/derivedVarRegistry.js +4 -0
- package/package.json +3 -3
- package/src/Button/Button.doc.mjs +4 -4
- package/src/Button/Button.tsx +15 -13
- package/src/Chat/ChatMessageBubble.doc.mjs +28 -15
- package/src/Chat/ChatMessageBubble.spec.md +263 -0
- package/src/Chat/ChatMessageBubble.test.tsx +93 -0
- package/src/Chat/ChatMessageBubble.tsx +8 -3
- package/src/Chat/ChatMessageList.spec.md +222 -0
- package/src/Chat/ChatMessageList.test.tsx +64 -2
- package/src/Chat/ChatMessageList.tsx +4 -3
- package/src/Chat/ChatMessageMetadata.doc.mjs +57 -3
- package/src/Chat/ChatMessageMetadata.spec.md +220 -0
- package/src/Chat/ChatMessageMetadata.test.tsx +34 -0
- package/src/Chat/ChatMessageMetadata.tsx +13 -13
- package/src/Chat/ChatSendButton.doc.mjs +32 -0
- package/src/Chat/ChatSendButton.spec.md +227 -0
- package/src/Chat/ChatSendButton.test.tsx +127 -4
- package/src/Chat/ChatSendButton.tsx +5 -3
- package/src/Chat/ChatSystemMessage.doc.mjs +115 -12
- package/src/Chat/ChatSystemMessage.spec.md +225 -0
- package/src/Chat/ChatSystemMessage.test.tsx +112 -20
- package/src/Chat/ChatSystemMessage.tsx +4 -6
- package/src/Chat/ChatTokenizedText.doc.mjs +96 -9
- package/src/Chat/ChatTokenizedText.spec.md +190 -0
- package/src/Chat/ChatTokenizedText.test.tsx +60 -1
- package/src/Chat/ChatTokenizedText.tsx +14 -8
- package/src/Chat/__tests__/ChatMessageBubble.a11y.chromium.spec.ts +457 -0
- package/src/Chat/__tests__/ChatMessageBubble.auditProvenance.test.ts +91 -0
- package/src/Chat/__tests__/ChatMessageBubble.auditProvenance.ts +91 -0
- package/src/Chat/__tests__/ChatMessageList.a11y.chromium.spec.ts +456 -0
- package/src/Chat/__tests__/ChatMessageMetadata.a11y.chromium.spec.ts +413 -0
- package/src/Chat/__tests__/ChatSendButton.a11y.chromium.spec.ts +1522 -0
- package/src/Chat/__tests__/ChatSystemMessage.a11y.chromium.spec.ts +1004 -0
- package/src/Chat/__tests__/ChatTokenizedText.a11y.chromium.spec.ts +573 -0
- package/src/Dialog/Dialog.doc.mjs +2 -0
- package/src/Dialog/DialogHeader.doc.mjs +10 -0
- package/src/Dialog/DialogHeader.test.tsx +70 -3
- package/src/Dialog/DialogHeader.tsx +14 -5
- package/src/Dialog/modules/DialogHeader.spec.md +62 -40
- package/src/DropdownMenu/DropdownMenu.test.tsx +5 -2
- package/src/Icon/Icon.doc.mjs +7 -5
- package/src/Icon/Icon.spec.md +81 -40
- package/src/Icon/Icon.test.tsx +6 -3
- package/src/Icon/Icon.tsx +20 -68
- package/src/Icon/IconDefaultSizeContext.ts +23 -0
- package/src/Icon/IconSize.stylex.ts +70 -0
- package/src/IconButton/IconButton.doc.mjs +3 -3
- package/src/IconButton/IconButton.test.tsx +40 -0
- package/src/Item/Item.doc.mjs +4 -0
- package/src/Item/Item.tsx +9 -3
- package/src/List/List.doc.mjs +6 -0
- package/src/List/List.test.tsx +117 -1
- package/src/List/List.tsx +22 -2
- package/src/List/ListContext.tsx +3 -1
- package/src/List/ListItem.source-build.test.mjs +41 -0
- package/src/List/ListItem.tsx +26 -2
- package/src/Markdown/Markdown.doc.mjs +26 -0
- package/src/Markdown/Markdown.public.test.ts +4 -0
- package/src/Markdown/Markdown.spec.md +12 -4
- package/src/Markdown/Markdown.test.tsx +24 -3
- package/src/Markdown/incremental.test.ts +31 -0
- package/src/Markdown/modules/softBreaks.spec.md +137 -0
- package/src/Markdown/parser.test.ts +18 -6
- package/src/Markdown/parser.ts +45 -11
- package/src/Markdown/plugins/index.ts +1 -0
- package/src/Markdown/plugins/softBreaks.test.tsx +172 -0
- package/src/Markdown/plugins/softBreaks.ts +169 -0
- package/src/MetadataList/MetadataList.test.tsx +4 -2
- package/src/MetadataList/MetadataList.tsx +3 -3
- package/src/ScrollableArea/ScrollableArea.tsx +1 -0
- package/src/SegmentedControl/SegmentedControl.test.tsx +30 -0
- package/src/SegmentedControl/SegmentedControl.tsx +2 -1
- package/src/Selector/Selector.doc.mjs +1 -1
- package/src/Selector/Selector.tsx +11 -1
- package/src/Selector/__tests__/Selector.a11y.chromium.spec.ts +45 -0
- package/src/theme/derivedVarRegistry.test.ts +7 -0
- package/src/theme/derivedVarRegistry.ts +1 -0
- package/src/theme/generateThemeRules.test.ts +27 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAwB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
|
package/dist/Button/Button.js
CHANGED
|
@@ -24,6 +24,8 @@ import "../theme/tokens.stylex.js";
|
|
|
24
24
|
import { colorVars, sizeVars, spacingVars, radiusVars, borderVars, durationVars, easeVars, fontWeightVars, typeScaleVars, shadowVars, focusVars } from "../theme/tokens.stylex.js";
|
|
25
25
|
import { Spinner } from "../Spinner/index.js";
|
|
26
26
|
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
27
|
+
import { IconDefaultSizeProvider } from "../Icon/IconDefaultSizeContext.js";
|
|
28
|
+
import { iconBoxSizeStyles } from "../Icon/IconSize.stylex.js";
|
|
27
29
|
import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
|
|
28
30
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
29
31
|
import { useButtonGroup } from "../ButtonGroup/ButtonGroupContext.js";
|
|
@@ -132,32 +134,6 @@ const sizeStyles = {
|
|
|
132
134
|
}
|
|
133
135
|
};
|
|
134
136
|
|
|
135
|
-
/**
|
|
136
|
-
* Icon size per button size.
|
|
137
|
-
* Matches Icon sizing: sm/md=16px, lg=20px.
|
|
138
|
-
* fontSize is set so emoji and text-based icons scale correctly.
|
|
139
|
-
*/
|
|
140
|
-
const iconSizeStyles = {
|
|
141
|
-
sm: {
|
|
142
|
-
kzqmXN: "x1kky2od",
|
|
143
|
-
kZKoxP: "xlup9mm",
|
|
144
|
-
kGuDYH: "x1j61zf2",
|
|
145
|
-
$$css: true
|
|
146
|
-
},
|
|
147
|
-
md: {
|
|
148
|
-
kzqmXN: "x1kky2od",
|
|
149
|
-
kZKoxP: "xlup9mm",
|
|
150
|
-
kGuDYH: "x1j61zf2",
|
|
151
|
-
$$css: true
|
|
152
|
-
},
|
|
153
|
-
lg: {
|
|
154
|
-
kzqmXN: "xw4jnvo",
|
|
155
|
-
kZKoxP: "x1qx5ct2",
|
|
156
|
-
kGuDYH: "xwsyq91",
|
|
157
|
-
$$css: true
|
|
158
|
-
}
|
|
159
|
-
};
|
|
160
|
-
|
|
161
137
|
/**
|
|
162
138
|
* Resting elevation for floating buttons (e.g. a FAB). `none` is the default
|
|
163
139
|
* flat button; `low`/`med`/`high` map to the shadow token scale. 'none' stays
|
|
@@ -221,6 +197,11 @@ const variants = {
|
|
|
221
197
|
* Button size type derived from the sizeStyles StyleX object
|
|
222
198
|
*/
|
|
223
199
|
|
|
200
|
+
const iconSizeByButtonSize = {
|
|
201
|
+
sm: 'sm',
|
|
202
|
+
md: 'sm',
|
|
203
|
+
lg: 'md'
|
|
204
|
+
};
|
|
224
205
|
const spinnerReveal = "x18re5ia-B";
|
|
225
206
|
const contentHide = "x188b6p3-B";
|
|
226
207
|
|
|
@@ -457,6 +438,7 @@ export function Button({
|
|
|
457
438
|
size,
|
|
458
439
|
elevation: buttonGroup ? 'none' : elevation
|
|
459
440
|
}), sharedStylexProps, className, style);
|
|
441
|
+
const iconSize = iconSizeByButtonSize[size];
|
|
460
442
|
const buttonContent = /*#__PURE__*/_jsxs(_Fragment, {
|
|
461
443
|
children: [isLoadingState && /*#__PURE__*/_jsx("span", {
|
|
462
444
|
...{
|
|
@@ -476,8 +458,11 @@ export function Button({
|
|
|
476
458
|
...stylex.props(styles.contentWrapper, isLoadingState && (delaySpinner ? loadingStyles.hiddenContentDelayed : loadingStyles.hiddenContent)),
|
|
477
459
|
"aria-hidden": isLoadingState || undefined,
|
|
478
460
|
children: [icon && /*#__PURE__*/_jsx("span", {
|
|
479
|
-
...stylex.props(styles.iconWrapper,
|
|
480
|
-
children:
|
|
461
|
+
...stylex.props(styles.iconWrapper, iconBoxSizeStyles[iconSize]),
|
|
462
|
+
children: /*#__PURE__*/_jsx(IconDefaultSizeProvider, {
|
|
463
|
+
value: iconSize,
|
|
464
|
+
children: icon
|
|
465
|
+
})
|
|
481
466
|
}), isIconOnly ? null : /*#__PURE__*/_jsx("span", {
|
|
482
467
|
...{
|
|
483
468
|
className: "xb3r6kr xlyipyv xeuugli"
|
|
@@ -43,6 +43,7 @@ export interface ChatMessageBubbleProps extends BaseProps<HTMLDivElement> {
|
|
|
43
43
|
variant?: ChatMessageBubbleVariant;
|
|
44
44
|
/**
|
|
45
45
|
* Sender name rendered above the bubble, aligned with bubble text padding.
|
|
46
|
+
* Non-rendering scalar values omit the aligned wrapper; numeric zero remains.
|
|
46
47
|
* Use when the first content in a message is a bubble.
|
|
47
48
|
* If the first content is raw (no bubble), use ChatMessage's `name`
|
|
48
49
|
* prop instead.
|
|
@@ -50,6 +51,7 @@ export interface ChatMessageBubbleProps extends BaseProps<HTMLDivElement> {
|
|
|
50
51
|
name?: ReactNode;
|
|
51
52
|
/**
|
|
52
53
|
* Metadata content rendered below the bubble, aligned with bubble text padding.
|
|
54
|
+
* Non-rendering scalar values omit the aligned wrapper; numeric zero remains.
|
|
53
55
|
* Use when the last content in a message is a bubble.
|
|
54
56
|
* If the last content is raw (no bubble), use ChatMessage's `metadata`
|
|
55
57
|
* prop instead.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatMessageBubble.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessageBubble.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAWrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D,MAAM,WAAW,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACvE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,wBAAwB,CAAC;IAEnC
|
|
1
|
+
{"version":3,"file":"ChatMessageBubble.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessageBubble.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAWrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D,MAAM,WAAW,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACvE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,wBAAwB,CAAC;IAEnC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEpC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAwHD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,OAAkB,EAClB,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,sBAAsB,+BA6FxB;yBA1Ge,iBAAiB"}
|
|
@@ -31,7 +31,7 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
31
31
|
import "../theme/tokens.stylex.js";
|
|
32
32
|
import { colorVars, spacingVars, radiusVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
|
|
33
33
|
import { useChatMessageContext } from "./ChatContext.js";
|
|
34
|
-
import { mergeProps } from "../utils/index.js";
|
|
34
|
+
import { isRenderable, mergeProps } from "../utils/index.js";
|
|
35
35
|
import { themeProps } from "../utils/themeProps.js";
|
|
36
36
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
37
37
|
// =============================================================================
|
|
@@ -204,8 +204,10 @@ export function ChatMessageBubble({
|
|
|
204
204
|
const senderStyle = variant === 'ghost' ? styles.ghost : isUser ? styles.user : styles.assistant;
|
|
205
205
|
const groupStyle = group === 'first' ? isUser ? styles.groupFirstUser : styles.groupFirstAssistant : group === 'middle' ? isUser ? styles.groupMiddleUser : styles.groupMiddleAssistant : group === 'last' ? isUser ? styles.groupLastUser : styles.groupLastAssistant : null;
|
|
206
206
|
const metadataPaddingStyle = density === 'compact' ? styles.metadataPaddingCompact : density === 'spacious' ? styles.metadataPaddingSpacious : styles.metadataPaddingBalanced;
|
|
207
|
+
const hasName = isRenderable(name);
|
|
208
|
+
const hasMetadata = isRenderable(metadata);
|
|
207
209
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
208
|
-
children: [
|
|
210
|
+
children: [hasName && /*#__PURE__*/_jsx("div", {
|
|
209
211
|
"data-chat-name": true,
|
|
210
212
|
...stylex.props(metadataPaddingStyle, styles.nameRow, styles.headerReducedGap, isUser && styles.alignEnd),
|
|
211
213
|
children: name
|
|
@@ -219,7 +221,7 @@ export function ChatMessageBubble({
|
|
|
219
221
|
density
|
|
220
222
|
}), stylex.props(styles.content, density === 'compact' && styles.radiusCompact, senderStyle, paddingStyle, variant === 'ghost' && styles.paddingBlockNone, groupStyle, width != null && dynamicStyles.sizing(width), xstyle), className, styleProp),
|
|
221
223
|
children: children
|
|
222
|
-
}),
|
|
224
|
+
}), hasMetadata && /*#__PURE__*/_jsx("div", {
|
|
223
225
|
...stylex.props(metadataPaddingStyle, styles.metadataReducedGap, isUser && styles.alignEnd),
|
|
224
226
|
children: metadata
|
|
225
227
|
})]
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file ChatMessageList.tsx
|
|
3
|
-
* @input Uses React, StyleX, ChatListContext, theme tokens, spacing step utilities
|
|
3
|
+
* @input Uses React, StyleX, ChatListContext, theme tokens, spacing step utilities,
|
|
4
|
+
* and isRenderable to preserve accepted empty-state content
|
|
4
5
|
* @output Exports ChatMessageList component and ChatMessageListProps
|
|
5
6
|
* @position Presentational message container — holds ChatMessage children
|
|
6
7
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatMessageList.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessageList.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"ChatMessageList.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessageList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;AAGhF,OAAO,EAEL,KAAK,WAAW,EAEjB,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAGhD,MAAM,WAAW,oBAAqB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACrE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAExC;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAEzB;;;;;;;;;;;OAWG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA4FD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,UAAU,EACV,iBAAiB,EACjB,OAAoB,EACpB,GAAG,EACH,KAAgB,EAChB,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,oBAAoB,+BAgGtB;yBA9Ge,eAAe"}
|
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file ChatMessageList.tsx
|
|
7
|
-
* @input Uses React, StyleX, ChatListContext, theme tokens, spacing step utilities
|
|
7
|
+
* @input Uses React, StyleX, ChatListContext, theme tokens, spacing step utilities,
|
|
8
|
+
* and isRenderable to preserve accepted empty-state content
|
|
8
9
|
* @output Exports ChatMessageList component and ChatMessageListProps
|
|
9
10
|
* @position Presentational message container — holds ChatMessage children
|
|
10
11
|
*
|
|
@@ -27,7 +28,7 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
27
28
|
import "../theme/tokens.stylex.js";
|
|
28
29
|
import { spacingVars } from "../theme/tokens.stylex.js";
|
|
29
30
|
import { ChatListContext, useChatLayoutContext } from "./ChatContext.js";
|
|
30
|
-
import { mergeProps } from "../utils/index.js";
|
|
31
|
+
import { isRenderable, mergeProps } from "../utils/index.js";
|
|
31
32
|
import { Spinner } from "../Spinner/index.js";
|
|
32
33
|
import { themeProps } from "../utils/themeProps.js";
|
|
33
34
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -225,7 +226,7 @@ export function ChatMessageList({
|
|
|
225
226
|
className: "x98rzlu x2lwn1j"
|
|
226
227
|
},
|
|
227
228
|
"aria-hidden": true
|
|
228
|
-
}), hasChildren ? children : emptyState ? /*#__PURE__*/_jsx("div", {
|
|
229
|
+
}), hasChildren ? children : isRenderable(emptyState) ? /*#__PURE__*/_jsx("div", {
|
|
229
230
|
...{
|
|
230
231
|
className: "x78zum5 x6s0dn4 xl56j7k x98rzlu x2lwn1j"
|
|
231
232
|
},
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file ChatMessageMetadata.tsx
|
|
3
|
-
* @input Uses React, StyleX, ChatContext, Icon, theme tokens
|
|
3
|
+
* @input Uses React, StyleX, ChatContext, Icon, theme tokens, and isRenderable
|
|
4
4
|
* @output Exports ChatMessageMetadata component
|
|
5
5
|
* @position Shared metadata row used by composing inside ChatMessage
|
|
6
6
|
*
|
|
7
|
-
* Renders
|
|
8
|
-
* Direction reverses for user sender.
|
|
7
|
+
* Renders timestamp, footer, and status values with separators determined by
|
|
8
|
+
* scalar presence. Direction reverses for user sender.
|
|
9
9
|
*/
|
|
10
10
|
import React, { type ReactNode } from 'react';
|
|
11
11
|
import type { BaseProps } from '../BaseProps';
|
|
@@ -23,7 +23,8 @@ export interface ChatMessageMetadataProps extends BaseProps<HTMLDivElement> {
|
|
|
23
23
|
* Composable metadata row for chat messages.
|
|
24
24
|
*
|
|
25
25
|
* Renders: timestamp · footer · status
|
|
26
|
-
* Renders nothing
|
|
26
|
+
* Renders nothing when neither slot passes the scalar-presence check and no
|
|
27
|
+
* status is set. Composite React nodes remain caller-owned.
|
|
27
28
|
*
|
|
28
29
|
* @example
|
|
29
30
|
* ```
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatMessageMetadata.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessageMetadata.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAY5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,MAAM,iBAAiB,GAC3B,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AAsDtD,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACzE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,gEAAgE;IAChE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAED
|
|
1
|
+
{"version":3,"file":"ChatMessageMetadata.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessageMetadata.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAY5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,MAAM,iBAAiB,GAC3B,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AAsDtD,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACzE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,gEAAgE;IAChE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,SAAS,EACT,MAAM,EACN,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,4BAkD1B;yBA3De,mBAAmB"}
|
|
@@ -4,12 +4,12 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file ChatMessageMetadata.tsx
|
|
7
|
-
* @input Uses React, StyleX, ChatContext, Icon, theme tokens
|
|
7
|
+
* @input Uses React, StyleX, ChatContext, Icon, theme tokens, and isRenderable
|
|
8
8
|
* @output Exports ChatMessageMetadata component
|
|
9
9
|
* @position Shared metadata row used by composing inside ChatMessage
|
|
10
10
|
*
|
|
11
|
-
* Renders
|
|
12
|
-
* Direction reverses for user sender.
|
|
11
|
+
* Renders timestamp, footer, and status values with separators determined by
|
|
12
|
+
* scalar presence. Direction reverses for user sender.
|
|
13
13
|
*/
|
|
14
14
|
import React from 'react';
|
|
15
15
|
import * as stylex from '@stylexjs/stylex';
|
|
@@ -17,7 +17,7 @@ import "../theme/tokens.stylex.js";
|
|
|
17
17
|
import { colorVars, spacingVars, typeScaleVars, fontWeightVars } from "../theme/tokens.stylex.js";
|
|
18
18
|
import { useChatMessageContext } from "./ChatContext.js";
|
|
19
19
|
import { Icon } from "../Icon/index.js";
|
|
20
|
-
import { mergeProps } from "../utils/index.js";
|
|
20
|
+
import { isRenderable, mergeProps } from "../utils/index.js";
|
|
21
21
|
import { themeProps } from "../utils/themeProps.js";
|
|
22
22
|
import { useTranslator } from "../i18n/index.js";
|
|
23
23
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -69,7 +69,8 @@ const styles = {
|
|
|
69
69
|
* Composable metadata row for chat messages.
|
|
70
70
|
*
|
|
71
71
|
* Renders: timestamp · footer · status
|
|
72
|
-
* Renders nothing
|
|
72
|
+
* Renders nothing when neither slot passes the scalar-presence check and no
|
|
73
|
+
* status is set. Composite React nodes remain caller-owned.
|
|
73
74
|
*
|
|
74
75
|
* @example
|
|
75
76
|
* ```
|
|
@@ -94,7 +95,9 @@ export function ChatMessageMetadata({
|
|
|
94
95
|
const sender = msgContext?.sender ?? 'assistant';
|
|
95
96
|
const statusConfig = status != null ? STATUS_CONFIG[status] : null;
|
|
96
97
|
const statusLabel = statusConfig != null ? t(statusConfig.i18nKey) : '';
|
|
97
|
-
const
|
|
98
|
+
const hasTimestamp = isRenderable(timestamp);
|
|
99
|
+
const hasFooter = isRenderable(footer);
|
|
100
|
+
const hasContent = hasTimestamp || hasFooter || statusConfig != null;
|
|
98
101
|
if (!hasContent) {
|
|
99
102
|
return null;
|
|
100
103
|
}
|
|
@@ -102,11 +105,11 @@ export function ChatMessageMetadata({
|
|
|
102
105
|
ref: ref,
|
|
103
106
|
...mergeProps(themeProps('chat-message-metadata'), stylex.props(styles.meta, sender === 'user' ? styles.metaUser : styles.metaAssistant, xstyle), className, style),
|
|
104
107
|
...rest,
|
|
105
|
-
children: [
|
|
108
|
+
children: [hasTimestamp && /*#__PURE__*/_jsx("span", {
|
|
106
109
|
children: timestamp
|
|
107
|
-
}),
|
|
110
|
+
}), hasTimestamp && (hasFooter || statusConfig != null) && /*#__PURE__*/_jsx("span", {
|
|
108
111
|
children: "\xB7"
|
|
109
|
-
}),
|
|
112
|
+
}), hasFooter && footer, hasFooter && statusConfig != null && /*#__PURE__*/_jsx("span", {
|
|
110
113
|
children: "\xB7"
|
|
111
114
|
}), statusConfig != null && /*#__PURE__*/_jsxs("span", {
|
|
112
115
|
title: statusLabel,
|
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
*
|
|
7
7
|
* Reads composer state from ChatComposerContext by default so it "just
|
|
8
8
|
* works" inside ChatComposer. All context-derived values can be
|
|
9
|
-
* overridden via props for standalone usage.
|
|
9
|
+
* overridden via props for standalone usage. Accepted `onClick` handlers
|
|
10
|
+
* compose after the selected send or stop action.
|
|
10
11
|
*
|
|
11
12
|
* States:
|
|
12
13
|
* - **Send** — accent/primary, arrowUp icon, disabled when nothing to send.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatSendButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatSendButton.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"ChatSendButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatSendButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAM5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACvE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gFAAgF;IAChF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAiBD;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,SAAS,CA+CpE;yBA/Ce,cAAc"}
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
*
|
|
11
11
|
* Reads composer state from ChatComposerContext by default so it "just
|
|
12
12
|
* works" inside ChatComposer. All context-derived values can be
|
|
13
|
-
* overridden via props for standalone usage.
|
|
13
|
+
* overridden via props for standalone usage. Accepted `onClick` handlers
|
|
14
|
+
* compose after the selected send or stop action.
|
|
14
15
|
*
|
|
15
16
|
* States:
|
|
16
17
|
* - **Send** — accent/primary, arrowUp icon, disabled when nothing to send.
|
|
@@ -21,7 +22,7 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
21
22
|
import { Button } from "../Button/index.js";
|
|
22
23
|
import { useIcon } from "../Icon/index.js";
|
|
23
24
|
import { useChatComposerContext } from "./ChatContext.js";
|
|
24
|
-
import { mergeProps } from "../utils/index.js";
|
|
25
|
+
import { composeEventHandlers, mergeProps } from "../utils/index.js";
|
|
25
26
|
import { themeProps } from "../utils/themeProps.js";
|
|
26
27
|
import { useTranslator } from "../i18n/index.js";
|
|
27
28
|
|
|
@@ -64,6 +65,7 @@ export function ChatSendButton(props) {
|
|
|
64
65
|
isDisabled = !(context?.canSend ?? false),
|
|
65
66
|
onSend,
|
|
66
67
|
onStop = context?.onStop,
|
|
68
|
+
onClick,
|
|
67
69
|
sendIcon,
|
|
68
70
|
stopIcon,
|
|
69
71
|
size = 'md',
|
|
@@ -84,7 +86,7 @@ export function ChatSendButton(props) {
|
|
|
84
86
|
icon: isStopShown ? stopIcon ?? defaultStopIcon : sendIcon ?? defaultSendIcon,
|
|
85
87
|
isIconOnly: true,
|
|
86
88
|
isDisabled: !isStopShown && isDisabled,
|
|
87
|
-
onClick: isStopShown ? onStop : handleSend,
|
|
89
|
+
onClick: composeEventHandlers(isStopShown ? onStop : handleSend, onClick),
|
|
88
90
|
...rest,
|
|
89
91
|
...mergeProps(themeProps('chat-send-button'), {
|
|
90
92
|
className
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @file ChatSystemMessage.tsx
|
|
3
3
|
* @input Uses React, StyleX, theme tokens
|
|
4
4
|
* @output Exports ChatSystemMessage component and ChatSystemMessageProps
|
|
5
|
-
* @position Centered system/notice message in a chat thread
|
|
5
|
+
* @position Centered, wrapping system/notice message in a chat thread
|
|
6
6
|
*
|
|
7
7
|
* Renders centered, muted system messages like "conversation started",
|
|
8
8
|
* date separators, or status updates. Not a sender message — no avatar,
|
|
@@ -32,8 +32,8 @@ export interface ChatSystemMessageProps extends BaseProps<HTMLDivElement> {
|
|
|
32
32
|
*/
|
|
33
33
|
variant?: ChatSystemMessageVariant;
|
|
34
34
|
/**
|
|
35
|
-
* Optional icon
|
|
36
|
-
* Accepts any ReactNode
|
|
35
|
+
* Optional caller-provided icon content associated with the message.
|
|
36
|
+
* Accepts any ReactNode, typically an Icon.
|
|
37
37
|
*/
|
|
38
38
|
icon?: ReactNode;
|
|
39
39
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatSystemMessage.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatSystemMessage.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAWrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,MAAM,wBAAwB,GAAG,SAAS,GAAG,SAAS,CAAC;AAE7D,MAAM,WAAW,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACvE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,wBAAwB,CAAC;IAEnC;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;
|
|
1
|
+
{"version":3,"file":"ChatSystemMessage.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatSystemMessage.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAWrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,MAAM,wBAAwB,GAAG,SAAS,GAAG,SAAS,CAAC;AAE7D,MAAM,WAAW,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACvE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,wBAAwB,CAAC;IAEnC;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAwCD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,OAAmB,EACnB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,sBAAsB,+BAmCxB;yBA5Ce,iBAAiB"}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
* @file ChatSystemMessage.tsx
|
|
7
7
|
* @input Uses React, StyleX, theme tokens
|
|
8
8
|
* @output Exports ChatSystemMessage component and ChatSystemMessageProps
|
|
9
|
-
* @position Centered system/notice message in a chat thread
|
|
9
|
+
* @position Centered, wrapping system/notice message in a chat thread
|
|
10
10
|
*
|
|
11
11
|
* Renders centered, muted system messages like "conversation started",
|
|
12
12
|
* date separators, or status updates. Not a sender message — no avatar,
|
|
@@ -99,7 +99,7 @@ export function ChatSystemMessage({
|
|
|
99
99
|
role: "status",
|
|
100
100
|
children: /*#__PURE__*/_jsxs("span", {
|
|
101
101
|
...{
|
|
102
|
-
className: "x3nfvp2 x6s0dn4 x1s4dlld
|
|
102
|
+
className: "x3nfvp2 x6s0dn4 x1s4dlld"
|
|
103
103
|
},
|
|
104
104
|
children: [icon != null && /*#__PURE__*/_jsx("span", {
|
|
105
105
|
...{
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
* @output Exports ChatTokenizedText component
|
|
5
5
|
* @position Utility component for rendering tokenized text in message bubbles
|
|
6
6
|
*
|
|
7
|
-
* Parses a plain text string and replaces token values with inline
|
|
8
|
-
* Accepts the same ChatComposerToken type used by the input
|
|
9
|
-
* so the same token definitions work for both input and display.
|
|
7
|
+
* Parses a plain text string and replaces non-empty token values with inline
|
|
8
|
+
* token content. Accepts the same ChatComposerToken type used by the input
|
|
9
|
+
* triggers, so the same token definitions work for both input and display.
|
|
10
10
|
*
|
|
11
11
|
* SYNC: When modified, update:
|
|
12
12
|
* - /packages/core/src/Chat/index.ts
|
|
@@ -23,8 +23,8 @@ export interface ChatTokenizedTextProps extends BaseProps<HTMLSpanElement> {
|
|
|
23
23
|
children: string;
|
|
24
24
|
/**
|
|
25
25
|
* Token definitions — same type returned by trigger onSelect.
|
|
26
|
-
* Each token
|
|
27
|
-
* with its
|
|
26
|
+
* Each non-empty token `value` is matched literally against the text and
|
|
27
|
+
* replaced with its Badge or custom representation. Empty values are ignored.
|
|
28
28
|
*
|
|
29
29
|
* @example
|
|
30
30
|
* ```
|
|
@@ -41,7 +41,7 @@ export interface ChatTokenizedTextProps extends BaseProps<HTMLSpanElement> {
|
|
|
41
41
|
tokens?: ChatComposerToken[];
|
|
42
42
|
}
|
|
43
43
|
/**
|
|
44
|
-
* Renders text with token values replaced by inline
|
|
44
|
+
* Renders text with token values replaced by inline token content.
|
|
45
45
|
*
|
|
46
46
|
* Accepts the same `ChatComposerToken` type used by input triggers,
|
|
47
47
|
* so you can share a single token definition between input and display.
|
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
* @output Exports ChatTokenizedText component
|
|
9
9
|
* @position Utility component for rendering tokenized text in message bubbles
|
|
10
10
|
*
|
|
11
|
-
* Parses a plain text string and replaces token values with inline
|
|
12
|
-
* Accepts the same ChatComposerToken type used by the input
|
|
13
|
-
* so the same token definitions work for both input and display.
|
|
11
|
+
* Parses a plain text string and replaces non-empty token values with inline
|
|
12
|
+
* token content. Accepts the same ChatComposerToken type used by the input
|
|
13
|
+
* triggers, so the same token definitions work for both input and display.
|
|
14
14
|
*
|
|
15
15
|
* SYNC: When modified, update:
|
|
16
16
|
* - /packages/core/src/Chat/index.ts
|
|
@@ -55,7 +55,7 @@ function escapeRegExp(str) {
|
|
|
55
55
|
// =============================================================================
|
|
56
56
|
|
|
57
57
|
/**
|
|
58
|
-
* Renders text with token values replaced by inline
|
|
58
|
+
* Renders text with token values replaced by inline token content.
|
|
59
59
|
*
|
|
60
60
|
* Accepts the same `ChatComposerToken` type used by input triggers,
|
|
61
61
|
* so you can share a single token definition between input and display.
|
|
@@ -92,10 +92,14 @@ ChatTokenizedText.displayName = 'ChatTokenizedText';
|
|
|
92
92
|
// =============================================================================
|
|
93
93
|
|
|
94
94
|
function renderTokens(text, tokens) {
|
|
95
|
-
const
|
|
95
|
+
const matchableTokens = tokens.filter(token => token.value.length > 0);
|
|
96
|
+
if (matchableTokens.length === 0) {
|
|
97
|
+
return [text];
|
|
98
|
+
}
|
|
99
|
+
const pattern = matchableTokens.map(t => escapeRegExp(t.value)).join('|');
|
|
96
100
|
const regex = new RegExp(`(${pattern})`, 'g');
|
|
97
101
|
const tokenMap = new Map();
|
|
98
|
-
for (const t of
|
|
102
|
+
for (const t of matchableTokens) {
|
|
99
103
|
tokenMap.set(t.value, t);
|
|
100
104
|
}
|
|
101
105
|
const parts = [];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogHeader.d.ts","sourceRoot":"","sources":["../../src/Dialog/DialogHeader.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2C5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE5C;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;;OAKG;IACH,0BAA0B,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAExD;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,0BAA0B,EAC1B,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,iBAAiB,+
|
|
1
|
+
{"version":3,"file":"DialogHeader.d.ts","sourceRoot":"","sources":["../../src/Dialog/DialogHeader.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2C5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE5C;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;;OAKG;IACH,0BAA0B,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAExD;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,0BAA0B,EAC1B,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,iBAAiB,+BAuGnB;yBApHe,YAAY"}
|
|
@@ -101,9 +101,9 @@ export function DialogHeader({
|
|
|
101
101
|
className: "x78zum5 x1cy8zhl x1qughib xjcht0a"
|
|
102
102
|
}),
|
|
103
103
|
children: [startContent && /*#__PURE__*/_jsx("div", {
|
|
104
|
-
...{
|
|
104
|
+
...mergeProps(themeProps('dialog-header-start-content'), {
|
|
105
105
|
className: "x78zum5 x6s0dn4 x1txdalj x2lah0s"
|
|
106
|
-
},
|
|
106
|
+
}),
|
|
107
107
|
children: startContent
|
|
108
108
|
}), /*#__PURE__*/_jsxs("div", {
|
|
109
109
|
...mergeProps(themeProps('dialog-header-title-block'), {
|
|
@@ -123,7 +123,7 @@ export function DialogHeader({
|
|
|
123
123
|
children: subtitle
|
|
124
124
|
})]
|
|
125
125
|
}), (endContent || onOpenChange) && /*#__PURE__*/_jsxs("div", {
|
|
126
|
-
...{
|
|
126
|
+
...mergeProps(themeProps('dialog-header-end-content'), {
|
|
127
127
|
0: {
|
|
128
128
|
className: "x78zum5 x6s0dn4 x1txdalj x2lah0s"
|
|
129
129
|
},
|
|
@@ -136,7 +136,7 @@ export function DialogHeader({
|
|
|
136
136
|
3: {
|
|
137
137
|
className: "x78zum5 x6s0dn4 x1txdalj x2lah0s xhzvc8f x3kzqx6"
|
|
138
138
|
}
|
|
139
|
-
}[!!shouldCompensateEndBlock << 1 | !!shouldCompensateEndInline << 0],
|
|
139
|
+
}[!!shouldCompensateEndBlock << 1 | !!shouldCompensateEndInline << 0]),
|
|
140
140
|
children: [endContent, onOpenChange && /*#__PURE__*/_jsx(Button, {
|
|
141
141
|
variant: "ghost",
|
|
142
142
|
label: t('@astryx.dialog.close'),
|
package/dist/Icon/Icon.d.ts
CHANGED
|
@@ -21,6 +21,8 @@ import React, { type ComponentType, type SVGProps } from 'react';
|
|
|
21
21
|
import * as stylex from '@stylexjs/stylex';
|
|
22
22
|
import type { StyleXStyles } from '@stylexjs/stylex';
|
|
23
23
|
import type { IconName, NamespacedIconName } from './globalIconRegistry';
|
|
24
|
+
import { type IconSize } from './IconSize.stylex';
|
|
25
|
+
export type { IconSize } from './IconSize.stylex';
|
|
24
26
|
declare const colorStyles: Readonly<{
|
|
25
27
|
readonly primary: Readonly<{
|
|
26
28
|
readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#0A1317, #DFE2E5)">;
|
|
@@ -80,35 +82,7 @@ declare const colorStyles: Readonly<{
|
|
|
80
82
|
readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#5B08D8, #7952FF)">;
|
|
81
83
|
}>;
|
|
82
84
|
}>;
|
|
83
|
-
/**
|
|
84
|
-
* Size styles for direct SVG icon components.
|
|
85
|
-
* Uses width/height only — SVG components handle their own viewBox scaling.
|
|
86
|
-
*
|
|
87
|
-
* Sizes are expressed in `rem` (relative to the root font-size) so icons scale
|
|
88
|
-
* in step with text when the document font-size changes, matching the rest of
|
|
89
|
-
* the design system's rem-based type scale. Values are the px-equivalents at a
|
|
90
|
-
* 16px root: 12px → 0.75rem, 16px → 1rem, 20px → 1.25rem, 24px → 1.5rem.
|
|
91
|
-
*/
|
|
92
|
-
declare const sizeStyles: Readonly<{
|
|
93
|
-
readonly xsm: Readonly<{
|
|
94
|
-
readonly width: stylex.StyleXClassNameFor<"width", "0.75rem">;
|
|
95
|
-
readonly height: stylex.StyleXClassNameFor<"height", "0.75rem">;
|
|
96
|
-
}>;
|
|
97
|
-
readonly sm: Readonly<{
|
|
98
|
-
readonly width: stylex.StyleXClassNameFor<"width", "1rem">;
|
|
99
|
-
readonly height: stylex.StyleXClassNameFor<"height", "1rem">;
|
|
100
|
-
}>;
|
|
101
|
-
readonly md: Readonly<{
|
|
102
|
-
readonly width: stylex.StyleXClassNameFor<"width", "1.25rem">;
|
|
103
|
-
readonly height: stylex.StyleXClassNameFor<"height", "1.25rem">;
|
|
104
|
-
}>;
|
|
105
|
-
readonly lg: Readonly<{
|
|
106
|
-
readonly width: stylex.StyleXClassNameFor<"width", "1.5rem">;
|
|
107
|
-
readonly height: stylex.StyleXClassNameFor<"height", "1.5rem">;
|
|
108
|
-
}>;
|
|
109
|
-
}>;
|
|
110
85
|
export type IconColor = keyof typeof colorStyles;
|
|
111
|
-
export type IconSize = keyof typeof sizeStyles;
|
|
112
86
|
/**
|
|
113
87
|
* Type for icon components that can be passed to Icon.
|
|
114
88
|
* Use this type when accepting an icon prop in other components.
|
|
@@ -140,7 +114,9 @@ export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'
|
|
|
140
114
|
* - 'sm': 1rem (16px at a 16px root)
|
|
141
115
|
* - 'md': 1.25rem (20px at a 16px root)
|
|
142
116
|
* - 'lg': 1.5rem (24px at a 16px root)
|
|
143
|
-
*
|
|
117
|
+
*
|
|
118
|
+
* An explicit value wins. When omitted, Icon uses the nearest default supplied
|
|
119
|
+
* by an owning Astryx component for its icon slot, then falls back to 'md'.
|
|
144
120
|
*/
|
|
145
121
|
size?: IconSize;
|
|
146
122
|
/**
|
|
@@ -195,7 +171,7 @@ export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'
|
|
|
195
171
|
* <Icon icon="close" size="md" color="primary" />
|
|
196
172
|
* ```
|
|
197
173
|
*/
|
|
198
|
-
export declare function Icon({ icon, color, size, label, ref, className, style, xstyle, ...props }: IconProps): React.JSX.Element;
|
|
174
|
+
export declare function Icon({ icon, color, size: sizeProp, label, ref, className, style, xstyle, ...props }: IconProps): React.JSX.Element;
|
|
199
175
|
export declare namespace Icon {
|
|
200
176
|
var displayName: string;
|
|
201
177
|
}
|
|
@@ -210,5 +186,4 @@ export declare function renderIconSlot(icon: React.ReactNode | IconType, props?:
|
|
|
210
186
|
size?: IconSize;
|
|
211
187
|
color?: IconColor;
|
|
212
188
|
}): React.ReactNode;
|
|
213
|
-
export {};
|
|
214
189
|
//# sourceMappingURL=Icon.d.ts.map
|
package/dist/Icon/Icon.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAC3C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAInD,OAAO,KAAK,EAAC,QAAQ,EAAE,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAC3C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAInD,OAAO,KAAK,EAAC,QAAQ,EAAE,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AAIvE,OAAO,EAGL,KAAK,QAAQ,EACd,MAAM,mBAAmB,CAAC;AAE3B,YAAY,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAmBhD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2Df,CAAC;AAMH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;;OAMG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,kBAAkB,CAAC;IAC/C;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAyBD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAI,EAAE,QAAQ,EACd,KAAK,EACL,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,qBAkDX;yBA5De,IAAI;;;AAqIpB;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,EAChC,KAAK,CAAC,EAAE;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAC,GAC3C,KAAK,CAAC,SAAS,CAYjB"}
|