@uipath/apollo-wind 2.66.0 → 2.67.0
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/components/ui/attachment.cjs +174 -0
- package/dist/components/ui/attachment.d.ts +39 -0
- package/dist/components/ui/attachment.js +113 -0
- package/dist/components/ui/bubble.cjs +123 -0
- package/dist/components/ui/bubble.d.ts +28 -0
- package/dist/components/ui/bubble.js +77 -0
- package/dist/components/ui/combobox.cjs +1 -1
- package/dist/components/ui/combobox.js +1 -1
- package/dist/components/ui/index.cjs +274 -219
- package/dist/components/ui/index.d.ts +6 -1
- package/dist/components/ui/index.js +6 -1
- package/dist/components/ui/input-group.cjs +8 -4
- package/dist/components/ui/input-group.js +8 -4
- package/dist/components/ui/input.cjs +1 -1
- package/dist/components/ui/input.js +1 -1
- package/dist/components/ui/marker.cjs +89 -0
- package/dist/components/ui/marker.d.ts +16 -0
- package/dist/components/ui/marker.js +46 -0
- package/dist/components/ui/message-scroller/index.cjs +58 -0
- package/dist/components/ui/message-scroller/index.d.ts +1 -0
- package/dist/components/ui/message-scroller/index.js +1 -0
- package/dist/components/ui/message-scroller/message-scroller.cjs +137 -0
- package/dist/components/ui/message-scroller/message-scroller.d.ts +60 -0
- package/dist/components/ui/message-scroller/message-scroller.js +73 -0
- package/dist/components/ui/message-scroller/primitive/components.cjs +357 -0
- package/dist/components/ui/message-scroller/primitive/components.d.ts +28 -0
- package/dist/components/ui/message-scroller/primitive/components.js +299 -0
- package/dist/components/ui/message-scroller/primitive/geometry.cjs +232 -0
- package/dist/components/ui/message-scroller/primitive/geometry.d.ts +54 -0
- package/dist/components/ui/message-scroller/primitive/geometry.js +153 -0
- package/dist/components/ui/message-scroller/primitive/index.cjs +53 -0
- package/dist/components/ui/message-scroller/primitive/index.d.ts +23 -0
- package/dist/components/ui/message-scroller/primitive/index.js +10 -0
- package/dist/components/ui/message-scroller/primitive/stores.cjs +81 -0
- package/dist/components/ui/message-scroller/primitive/stores.d.ts +6 -0
- package/dist/components/ui/message-scroller/primitive/stores.js +38 -0
- package/dist/components/ui/message-scroller/primitive/types.cjs +82 -0
- package/dist/components/ui/message-scroller/primitive/types.d.ts +89 -0
- package/dist/components/ui/message-scroller/primitive/types.js +24 -0
- package/dist/components/ui/message-scroller/primitive/use-message-scroller-commands.cjs +213 -0
- package/dist/components/ui/message-scroller/primitive/use-message-scroller-commands.d.ts +18 -0
- package/dist/components/ui/message-scroller/primitive/use-message-scroller-commands.js +179 -0
- package/dist/components/ui/message-scroller/primitive/use-message-scroller-controller.cjs +474 -0
- package/dist/components/ui/message-scroller/primitive/use-message-scroller-controller.d.ts +6 -0
- package/dist/components/ui/message-scroller/primitive/use-message-scroller-controller.js +440 -0
- package/dist/components/ui/message-scroller/primitive/use-message-scroller-refs.cjs +124 -0
- package/dist/components/ui/message-scroller/primitive/use-message-scroller-refs.d.ts +52 -0
- package/dist/components/ui/message-scroller/primitive/use-message-scroller-refs.js +84 -0
- package/dist/components/ui/message-scroller/primitive/use-render.cjs +116 -0
- package/dist/components/ui/message-scroller/primitive/use-render.d.ts +21 -0
- package/dist/components/ui/message-scroller/primitive/use-render.js +76 -0
- package/dist/components/ui/message-scroller/primitive/utils.cjs +41 -0
- package/dist/components/ui/message-scroller/primitive/utils.d.ts +3 -0
- package/dist/components/ui/message-scroller/primitive/utils.js +7 -0
- package/dist/components/ui/message.cjs +96 -0
- package/dist/components/ui/message.d.ts +17 -0
- package/dist/components/ui/message.js +47 -0
- package/dist/components/ui/multi-select.cjs +3 -3
- package/dist/components/ui/multi-select.d.ts +10 -0
- package/dist/components/ui/multi-select.js +3 -3
- package/dist/components/ui/select.cjs +1 -1
- package/dist/components/ui/select.js +1 -1
- package/dist/components/ui/textarea.cjs +1 -1
- package/dist/components/ui/textarea.js +1 -1
- package/dist/index.cjs +164 -51
- package/dist/index.d.ts +10 -0
- package/dist/index.js +6 -1
- package/dist/styles.css +773 -0
- package/dist/tailwind.utilities.css +223 -0
- package/package.json +1 -1
|
@@ -2,10 +2,12 @@ export * from './accordion';
|
|
|
2
2
|
export * from './alert';
|
|
3
3
|
export * from './alert-dialog';
|
|
4
4
|
export * from './aspect-ratio';
|
|
5
|
+
export * from './attachment';
|
|
5
6
|
export * from './avatar';
|
|
6
7
|
export * from './badge';
|
|
7
8
|
export * from './boolean-radio-group';
|
|
8
9
|
export * from './breadcrumb';
|
|
10
|
+
export * from './bubble';
|
|
9
11
|
export * from './button';
|
|
10
12
|
export * from './button-group';
|
|
11
13
|
export * from './calendar';
|
|
@@ -31,11 +33,14 @@ export * from './form-field';
|
|
|
31
33
|
export * from './hover-card';
|
|
32
34
|
export * from './info-tooltip';
|
|
33
35
|
export * from './input';
|
|
34
|
-
export * from './json-tree-view';
|
|
35
36
|
export * from './input-group';
|
|
37
|
+
export * from './json-tree-view';
|
|
36
38
|
export * from './label';
|
|
37
39
|
export * from './layout';
|
|
38
40
|
export * from './lockable-value-field';
|
|
41
|
+
export * from './marker';
|
|
42
|
+
export * from './message';
|
|
43
|
+
export * from './message-scroller';
|
|
39
44
|
export * from './model-picker';
|
|
40
45
|
export * from './multi-select';
|
|
41
46
|
export * from './pagination';
|
|
@@ -3,10 +3,12 @@ export * from "./accordion.js";
|
|
|
3
3
|
export * from "./alert.js";
|
|
4
4
|
export * from "./alert-dialog.js";
|
|
5
5
|
export * from "./aspect-ratio.js";
|
|
6
|
+
export * from "./attachment.js";
|
|
6
7
|
export * from "./avatar.js";
|
|
7
8
|
export * from "./badge.js";
|
|
8
9
|
export * from "./boolean-radio-group.js";
|
|
9
10
|
export * from "./breadcrumb.js";
|
|
11
|
+
export * from "./bubble.js";
|
|
10
12
|
export * from "./button.js";
|
|
11
13
|
export * from "./button-group.js";
|
|
12
14
|
export * from "./calendar.js";
|
|
@@ -32,11 +34,14 @@ export * from "./form-field.js";
|
|
|
32
34
|
export * from "./hover-card.js";
|
|
33
35
|
export * from "./info-tooltip.js";
|
|
34
36
|
export * from "./input.js";
|
|
35
|
-
export * from "./json-tree-view/index.js";
|
|
36
37
|
export * from "./input-group.js";
|
|
38
|
+
export * from "./json-tree-view/index.js";
|
|
37
39
|
export * from "./label.js";
|
|
38
40
|
export * from "./layout/index.js";
|
|
39
41
|
export * from "./lockable-value-field/index.js";
|
|
42
|
+
export * from "./marker.js";
|
|
43
|
+
export * from "./message.js";
|
|
44
|
+
export * from "./message-scroller/index.js";
|
|
40
45
|
export * from "./model-picker/index.js";
|
|
41
46
|
export * from "./multi-select.js";
|
|
42
47
|
export * from "./pagination.js";
|
|
@@ -108,7 +108,7 @@ const inputGroupVariants = (0, external_class_variance_authority_namespaceObject
|
|
|
108
108
|
{
|
|
109
109
|
layout: ROW_LAYOUTS,
|
|
110
110
|
invalid: false,
|
|
111
|
-
class: 'has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]_:focus-visible]:ring-ring'
|
|
111
|
+
class: 'has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]_:focus-visible]:ring-ring future:has-[[data-slot=input-group-control]:focus-visible]:ring-primary future:has-[[data-slot=input-group-control]_:focus-visible]:ring-primary'
|
|
112
112
|
},
|
|
113
113
|
{
|
|
114
114
|
layout: ROW_LAYOUTS,
|
|
@@ -251,12 +251,16 @@ const InputGroupAddon = /*#__PURE__*/ external_react_namespaceObject.forwardRef(
|
|
|
251
251
|
});
|
|
252
252
|
});
|
|
253
253
|
InputGroupAddon.displayName = 'InputGroupAddon';
|
|
254
|
-
const InputGroupRow = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)
|
|
254
|
+
const InputGroupRow = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>{
|
|
255
|
+
const { invalid, error } = (0, external_input_group_context_cjs_namespaceObject.useInputGroup)();
|
|
256
|
+
const flagged = Boolean(invalid || error);
|
|
257
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
255
258
|
ref: ref,
|
|
256
259
|
"data-slot": "input-group-row",
|
|
257
|
-
className: (0, index_cjs_namespaceObject.cn)('flex min-h-9 min-w-0 items-stretch gap-2 px-3 has-[>[data-slot=input-group-addon][data-align=inline-end]]:pr-2 future:min-h-10', 'rounded-[inherit] has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-inset has-[[data-slot=input-group-control]:focus-visible]:ring-
|
|
260
|
+
className: (0, index_cjs_namespaceObject.cn)('flex min-h-9 min-w-0 items-stretch gap-2 px-3 has-[>[data-slot=input-group-addon][data-align=inline-end]]:pr-2 future:min-h-10', 'rounded-[inherit] has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-inset has-[[data-slot=input-group-control]_:focus-visible]:ring-2 has-[[data-slot=input-group-control]_:focus-visible]:ring-inset has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:ring-error has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]_:focus-visible]:ring-error', flagged ? 'has-[[data-slot=input-group-control]:focus-visible]:ring-error has-[[data-slot=input-group-control]_:focus-visible]:ring-error' : 'has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]_:focus-visible]:ring-ring future:has-[[data-slot=input-group-control]:focus-visible]:ring-primary future:has-[[data-slot=input-group-control]_:focus-visible]:ring-primary', className),
|
|
258
261
|
...props
|
|
259
|
-
})
|
|
262
|
+
});
|
|
263
|
+
});
|
|
260
264
|
InputGroupRow.displayName = 'InputGroupRow';
|
|
261
265
|
const InputGroupBody = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>{
|
|
262
266
|
const { disabled } = (0, external_input_group_context_cjs_namespaceObject.useInputGroup)();
|
|
@@ -69,7 +69,7 @@ const inputGroupVariants = cva([
|
|
|
69
69
|
{
|
|
70
70
|
layout: ROW_LAYOUTS,
|
|
71
71
|
invalid: false,
|
|
72
|
-
class: 'has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]_:focus-visible]:ring-ring'
|
|
72
|
+
class: 'has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]_:focus-visible]:ring-ring future:has-[[data-slot=input-group-control]:focus-visible]:ring-primary future:has-[[data-slot=input-group-control]_:focus-visible]:ring-primary'
|
|
73
73
|
},
|
|
74
74
|
{
|
|
75
75
|
layout: ROW_LAYOUTS,
|
|
@@ -212,12 +212,16 @@ const InputGroupAddon = /*#__PURE__*/ forwardRef(({ className, align = 'inline-s
|
|
|
212
212
|
});
|
|
213
213
|
});
|
|
214
214
|
InputGroupAddon.displayName = 'InputGroupAddon';
|
|
215
|
-
const InputGroupRow = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)
|
|
215
|
+
const InputGroupRow = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
|
|
216
|
+
const { invalid, error } = useInputGroup();
|
|
217
|
+
const flagged = Boolean(invalid || error);
|
|
218
|
+
return /*#__PURE__*/ jsx("div", {
|
|
216
219
|
ref: ref,
|
|
217
220
|
"data-slot": "input-group-row",
|
|
218
|
-
className: cn('flex min-h-9 min-w-0 items-stretch gap-2 px-3 has-[>[data-slot=input-group-addon][data-align=inline-end]]:pr-2 future:min-h-10', 'rounded-[inherit] has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-inset has-[[data-slot=input-group-control]:focus-visible]:ring-
|
|
221
|
+
className: cn('flex min-h-9 min-w-0 items-stretch gap-2 px-3 has-[>[data-slot=input-group-addon][data-align=inline-end]]:pr-2 future:min-h-10', 'rounded-[inherit] has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-inset has-[[data-slot=input-group-control]_:focus-visible]:ring-2 has-[[data-slot=input-group-control]_:focus-visible]:ring-inset has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:ring-error has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]_:focus-visible]:ring-error', flagged ? 'has-[[data-slot=input-group-control]:focus-visible]:ring-error has-[[data-slot=input-group-control]_:focus-visible]:ring-error' : 'has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]_:focus-visible]:ring-ring future:has-[[data-slot=input-group-control]:focus-visible]:ring-primary future:has-[[data-slot=input-group-control]_:focus-visible]:ring-primary', className),
|
|
219
222
|
...props
|
|
220
|
-
})
|
|
223
|
+
});
|
|
224
|
+
});
|
|
221
225
|
InputGroupRow.displayName = 'InputGroupRow';
|
|
222
226
|
const InputGroupBody = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
|
|
223
227
|
const { disabled } = useInputGroup();
|
|
@@ -52,7 +52,7 @@ const Input = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ 'aria-d
|
|
|
52
52
|
...props,
|
|
53
53
|
...validation.aria,
|
|
54
54
|
disabled: props.disabled || group.disabled,
|
|
55
|
-
className: (0, utils_cjs_namespaceObject.cn)('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring read-only:cursor-default disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-error aria-invalid:focus-visible:ring-error', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', group.inGroup && IN_GROUP_CLASS, className),
|
|
55
|
+
className: (0, utils_cjs_namespaceObject.cn)('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring read-only:cursor-default disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-error aria-invalid:focus-visible:ring-error', 'future:focus-visible:ring-primary future:aria-invalid:focus-visible:ring-error', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', group.inGroup && IN_GROUP_CLASS, className),
|
|
56
56
|
ref: ref
|
|
57
57
|
});
|
|
58
58
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
|
|
@@ -24,7 +24,7 @@ const Input = /*#__PURE__*/ forwardRef(({ 'aria-describedby': ariaDescribedBy, '
|
|
|
24
24
|
...props,
|
|
25
25
|
...validation.aria,
|
|
26
26
|
disabled: props.disabled || group.disabled,
|
|
27
|
-
className: cn('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring read-only:cursor-default disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-error aria-invalid:focus-visible:ring-error', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', group.inGroup && IN_GROUP_CLASS, className),
|
|
27
|
+
className: cn('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring read-only:cursor-default disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-error aria-invalid:focus-visible:ring-error', 'future:focus-visible:ring-primary future:aria-invalid:focus-visible:ring-error', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', group.inGroup && IN_GROUP_CLASS, className),
|
|
28
28
|
ref: ref
|
|
29
29
|
});
|
|
30
30
|
return /*#__PURE__*/ jsxs(Fragment, {
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __webpack_require__ = {};
|
|
3
|
+
(()=>{
|
|
4
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
5
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: definition[key]
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
})();
|
|
11
|
+
(()=>{
|
|
12
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
13
|
+
})();
|
|
14
|
+
(()=>{
|
|
15
|
+
__webpack_require__.r = (exports1)=>{
|
|
16
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
17
|
+
value: 'Module'
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
20
|
+
value: true
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
})();
|
|
24
|
+
var __webpack_exports__ = {};
|
|
25
|
+
__webpack_require__.r(__webpack_exports__);
|
|
26
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
+
Marker: ()=>Marker,
|
|
28
|
+
MarkerContent: ()=>MarkerContent,
|
|
29
|
+
markerVariants: ()=>markerVariants,
|
|
30
|
+
MarkerIcon: ()=>MarkerIcon
|
|
31
|
+
});
|
|
32
|
+
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
33
|
+
const react_slot_namespaceObject = require("@radix-ui/react-slot");
|
|
34
|
+
const external_class_variance_authority_namespaceObject = require("class-variance-authority");
|
|
35
|
+
const external_react_namespaceObject = require("react");
|
|
36
|
+
const index_cjs_namespaceObject = require("../../lib/index.cjs");
|
|
37
|
+
const markerVariants = (0, external_class_variance_authority_namespaceObject.cva)("group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground", {
|
|
38
|
+
variants: {
|
|
39
|
+
variant: {
|
|
40
|
+
default: '',
|
|
41
|
+
separator: 'before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border',
|
|
42
|
+
border: 'border-b border-border pb-2'
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
defaultVariants: {
|
|
46
|
+
variant: 'default'
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
const Marker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, variant = 'default', asChild = false, ...props }, ref)=>{
|
|
50
|
+
const Comp = asChild ? react_slot_namespaceObject.Slot : 'div';
|
|
51
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Comp, {
|
|
52
|
+
ref: ref,
|
|
53
|
+
"data-slot": "marker",
|
|
54
|
+
"data-variant": variant,
|
|
55
|
+
className: (0, index_cjs_namespaceObject.cn)(markerVariants({
|
|
56
|
+
variant
|
|
57
|
+
}), className),
|
|
58
|
+
...props
|
|
59
|
+
});
|
|
60
|
+
});
|
|
61
|
+
Marker.displayName = 'Marker';
|
|
62
|
+
const MarkerIcon = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
63
|
+
ref: ref,
|
|
64
|
+
"data-slot": "marker-icon",
|
|
65
|
+
"aria-hidden": "true",
|
|
66
|
+
className: (0, index_cjs_namespaceObject.cn)("size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
67
|
+
...props
|
|
68
|
+
}));
|
|
69
|
+
MarkerIcon.displayName = 'MarkerIcon';
|
|
70
|
+
const MarkerContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
71
|
+
ref: ref,
|
|
72
|
+
"data-slot": "marker-content",
|
|
73
|
+
className: (0, index_cjs_namespaceObject.cn)('min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground', className),
|
|
74
|
+
...props
|
|
75
|
+
}));
|
|
76
|
+
MarkerContent.displayName = 'MarkerContent';
|
|
77
|
+
exports.Marker = __webpack_exports__.Marker;
|
|
78
|
+
exports.MarkerContent = __webpack_exports__.MarkerContent;
|
|
79
|
+
exports.MarkerIcon = __webpack_exports__.MarkerIcon;
|
|
80
|
+
exports.markerVariants = __webpack_exports__.markerVariants;
|
|
81
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
82
|
+
"Marker",
|
|
83
|
+
"MarkerContent",
|
|
84
|
+
"MarkerIcon",
|
|
85
|
+
"markerVariants"
|
|
86
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
87
|
+
Object.defineProperty(exports, '__esModule', {
|
|
88
|
+
value: true
|
|
89
|
+
});
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* A status line inside a conversation, ported from shadcn/ui's chat components: a system note, a
|
|
5
|
+
* dated separator between turns, or a bordered row. `MarkerIcon` and `MarkerContent` are its parts.
|
|
6
|
+
*/
|
|
7
|
+
declare const markerVariants: (props?: ({
|
|
8
|
+
variant?: "default" | "separator" | "border" | null | undefined;
|
|
9
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
10
|
+
export interface MarkerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof markerVariants> {
|
|
11
|
+
asChild?: boolean;
|
|
12
|
+
}
|
|
13
|
+
declare const Marker: React.ForwardRefExoticComponent<MarkerProps & React.RefAttributes<HTMLDivElement>>;
|
|
14
|
+
declare const MarkerIcon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
|
|
15
|
+
declare const MarkerContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
|
|
16
|
+
export { Marker, MarkerIcon, MarkerContent, markerVariants };
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { forwardRef } from "react";
|
|
5
|
+
import { cn } from "../../lib/index.js";
|
|
6
|
+
const markerVariants = cva("group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground", {
|
|
7
|
+
variants: {
|
|
8
|
+
variant: {
|
|
9
|
+
default: '',
|
|
10
|
+
separator: 'before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border',
|
|
11
|
+
border: 'border-b border-border pb-2'
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
defaultVariants: {
|
|
15
|
+
variant: 'default'
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
const Marker = /*#__PURE__*/ forwardRef(({ className, variant = 'default', asChild = false, ...props }, ref)=>{
|
|
19
|
+
const Comp = asChild ? Slot : 'div';
|
|
20
|
+
return /*#__PURE__*/ jsx(Comp, {
|
|
21
|
+
ref: ref,
|
|
22
|
+
"data-slot": "marker",
|
|
23
|
+
"data-variant": variant,
|
|
24
|
+
className: cn(markerVariants({
|
|
25
|
+
variant
|
|
26
|
+
}), className),
|
|
27
|
+
...props
|
|
28
|
+
});
|
|
29
|
+
});
|
|
30
|
+
Marker.displayName = 'Marker';
|
|
31
|
+
const MarkerIcon = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("span", {
|
|
32
|
+
ref: ref,
|
|
33
|
+
"data-slot": "marker-icon",
|
|
34
|
+
"aria-hidden": "true",
|
|
35
|
+
className: cn("size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
36
|
+
...props
|
|
37
|
+
}));
|
|
38
|
+
MarkerIcon.displayName = 'MarkerIcon';
|
|
39
|
+
const MarkerContent = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("span", {
|
|
40
|
+
ref: ref,
|
|
41
|
+
"data-slot": "marker-content",
|
|
42
|
+
className: cn('min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground', className),
|
|
43
|
+
...props
|
|
44
|
+
}));
|
|
45
|
+
MarkerContent.displayName = 'MarkerContent';
|
|
46
|
+
export { Marker, MarkerContent, MarkerIcon, markerVariants };
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __webpack_modules__ = {
|
|
3
|
+
"./message-scroller?d92f" (module) {
|
|
4
|
+
module.exports = require("./message-scroller.cjs");
|
|
5
|
+
}
|
|
6
|
+
};
|
|
7
|
+
var __webpack_module_cache__ = {};
|
|
8
|
+
function __webpack_require__(moduleId) {
|
|
9
|
+
var cachedModule = __webpack_module_cache__[moduleId];
|
|
10
|
+
if (void 0 !== cachedModule) return cachedModule.exports;
|
|
11
|
+
var module = __webpack_module_cache__[moduleId] = {
|
|
12
|
+
exports: {}
|
|
13
|
+
};
|
|
14
|
+
__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
|
15
|
+
return module.exports;
|
|
16
|
+
}
|
|
17
|
+
(()=>{
|
|
18
|
+
__webpack_require__.n = (module)=>{
|
|
19
|
+
var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
|
|
20
|
+
__webpack_require__.d(getter, {
|
|
21
|
+
a: getter
|
|
22
|
+
});
|
|
23
|
+
return getter;
|
|
24
|
+
};
|
|
25
|
+
})();
|
|
26
|
+
(()=>{
|
|
27
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
28
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
29
|
+
enumerable: true,
|
|
30
|
+
get: definition[key]
|
|
31
|
+
});
|
|
32
|
+
};
|
|
33
|
+
})();
|
|
34
|
+
(()=>{
|
|
35
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
36
|
+
})();
|
|
37
|
+
(()=>{
|
|
38
|
+
__webpack_require__.r = (exports1)=>{
|
|
39
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
40
|
+
value: 'Module'
|
|
41
|
+
});
|
|
42
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
43
|
+
value: true
|
|
44
|
+
});
|
|
45
|
+
};
|
|
46
|
+
})();
|
|
47
|
+
var __webpack_exports__ = {};
|
|
48
|
+
(()=>{
|
|
49
|
+
__webpack_require__.r(__webpack_exports__);
|
|
50
|
+
var _message_scroller__rspack_import_0 = __webpack_require__("./message-scroller?d92f");
|
|
51
|
+
var __rspack_reexport = {};
|
|
52
|
+
for(const __rspack_import_key in _message_scroller__rspack_import_0)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_message_scroller__rspack_import_0[__rspack_import_key];
|
|
53
|
+
__webpack_require__.d(__webpack_exports__, __rspack_reexport);
|
|
54
|
+
})();
|
|
55
|
+
for(var __rspack_i in __webpack_exports__)exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
56
|
+
Object.defineProperty(exports, '__esModule', {
|
|
57
|
+
value: true
|
|
58
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './message-scroller';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./message-scroller.js";
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __webpack_require__ = {};
|
|
4
|
+
(()=>{
|
|
5
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
6
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: definition[key]
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
})();
|
|
12
|
+
(()=>{
|
|
13
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
14
|
+
})();
|
|
15
|
+
(()=>{
|
|
16
|
+
__webpack_require__.r = (exports1)=>{
|
|
17
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
18
|
+
value: 'Module'
|
|
19
|
+
});
|
|
20
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
21
|
+
value: true
|
|
22
|
+
});
|
|
23
|
+
};
|
|
24
|
+
})();
|
|
25
|
+
var __webpack_exports__ = {};
|
|
26
|
+
__webpack_require__.r(__webpack_exports__);
|
|
27
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
28
|
+
MessageScrollerViewport: ()=>MessageScrollerViewport,
|
|
29
|
+
MessageScrollerItem: ()=>MessageScrollerItem,
|
|
30
|
+
DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS: ()=>DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS,
|
|
31
|
+
useMessageScroller: ()=>external_primitive_index_cjs_namespaceObject.useMessageScroller,
|
|
32
|
+
MessageScrollerButton: ()=>MessageScrollerButton,
|
|
33
|
+
useMessageScrollerScrollable: ()=>external_primitive_index_cjs_namespaceObject.useMessageScrollerScrollable,
|
|
34
|
+
MessageScrollerProvider: ()=>MessageScrollerProvider,
|
|
35
|
+
useMessageScrollerVisibility: ()=>external_primitive_index_cjs_namespaceObject.useMessageScrollerVisibility,
|
|
36
|
+
MessageScroller: ()=>MessageScroller,
|
|
37
|
+
MessageScrollerContent: ()=>MessageScrollerContent,
|
|
38
|
+
DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS: ()=>DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS
|
|
39
|
+
});
|
|
40
|
+
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
41
|
+
const external_lucide_react_namespaceObject = require("lucide-react");
|
|
42
|
+
const external_react_namespaceObject = require("react");
|
|
43
|
+
const index_cjs_namespaceObject = require("../../../lib/index.cjs");
|
|
44
|
+
const external_primitive_index_cjs_namespaceObject = require("./primitive/index.cjs");
|
|
45
|
+
const MessageScrollerProvider = external_primitive_index_cjs_namespaceObject.MessageScroller.Provider;
|
|
46
|
+
const MessageScroller = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_primitive_index_cjs_namespaceObject.MessageScroller.Root, {
|
|
47
|
+
ref: ref,
|
|
48
|
+
"data-slot": "message-scroller",
|
|
49
|
+
className: (0, index_cjs_namespaceObject.cn)('relative flex min-h-0 flex-col', className),
|
|
50
|
+
...props
|
|
51
|
+
}));
|
|
52
|
+
MessageScroller.displayName = 'MessageScroller';
|
|
53
|
+
const DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS = {
|
|
54
|
+
label: 'Messages'
|
|
55
|
+
};
|
|
56
|
+
const MessageScrollerViewport = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, 'aria-label': ariaLabel, strings, ...props }, ref)=>{
|
|
57
|
+
const text = {
|
|
58
|
+
...DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS,
|
|
59
|
+
...strings
|
|
60
|
+
};
|
|
61
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_primitive_index_cjs_namespaceObject.MessageScroller.Viewport, {
|
|
62
|
+
ref: ref,
|
|
63
|
+
"data-slot": "message-scroller-viewport",
|
|
64
|
+
"aria-label": ariaLabel ?? text.label,
|
|
65
|
+
className: (0, index_cjs_namespaceObject.cn)('min-h-0 flex-1 overflow-y-auto overscroll-contain outline-none', className),
|
|
66
|
+
...props
|
|
67
|
+
});
|
|
68
|
+
});
|
|
69
|
+
MessageScrollerViewport.displayName = 'MessageScrollerViewport';
|
|
70
|
+
const MessageScrollerContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_primitive_index_cjs_namespaceObject.MessageScroller.Content, {
|
|
71
|
+
ref: ref,
|
|
72
|
+
"data-slot": "message-scroller-content",
|
|
73
|
+
className: (0, index_cjs_namespaceObject.cn)('flex flex-col gap-4 px-4 py-4', className),
|
|
74
|
+
...props
|
|
75
|
+
}));
|
|
76
|
+
MessageScrollerContent.displayName = 'MessageScrollerContent';
|
|
77
|
+
const MessageScrollerItem = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_primitive_index_cjs_namespaceObject.MessageScroller.Item, {
|
|
78
|
+
ref: ref,
|
|
79
|
+
"data-slot": "message-scroller-item",
|
|
80
|
+
className: (0, index_cjs_namespaceObject.cn)('min-w-0', className),
|
|
81
|
+
...props
|
|
82
|
+
}));
|
|
83
|
+
MessageScrollerItem.displayName = 'MessageScrollerItem';
|
|
84
|
+
const DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS = {
|
|
85
|
+
scrollToLatest: 'Scroll to latest',
|
|
86
|
+
scrollToStart: 'Scroll to start'
|
|
87
|
+
};
|
|
88
|
+
const MessageScrollerButton = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, children, direction = 'end', strings, ...props }, ref)=>{
|
|
89
|
+
const text = {
|
|
90
|
+
...DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS,
|
|
91
|
+
...strings
|
|
92
|
+
};
|
|
93
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_primitive_index_cjs_namespaceObject.MessageScroller.Button, {
|
|
94
|
+
ref: ref,
|
|
95
|
+
"data-slot": "message-scroller-button",
|
|
96
|
+
direction: direction,
|
|
97
|
+
className: (0, index_cjs_namespaceObject.cn)('absolute bottom-3 left-1/2 z-10 flex -translate-x-1/2 items-center justify-center gap-1.5 rounded-full border border-border-subtle bg-card px-3 py-1.5 text-xs font-medium text-foreground shadow-md transition-opacity hover:bg-surface-overlay data-[active=false]:pointer-events-none data-[active=false]:opacity-0', 'start' === direction && 'top-3 bottom-auto', className),
|
|
98
|
+
...props,
|
|
99
|
+
children: children ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
|
|
100
|
+
children: [
|
|
101
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
|
|
102
|
+
size: 14,
|
|
103
|
+
className: (0, index_cjs_namespaceObject.cn)('start' === direction && 'rotate-180')
|
|
104
|
+
}),
|
|
105
|
+
'start' === direction ? text.scrollToStart : text.scrollToLatest
|
|
106
|
+
]
|
|
107
|
+
})
|
|
108
|
+
});
|
|
109
|
+
});
|
|
110
|
+
MessageScrollerButton.displayName = 'MessageScrollerButton';
|
|
111
|
+
exports.DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS = __webpack_exports__.DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS;
|
|
112
|
+
exports.DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS = __webpack_exports__.DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS;
|
|
113
|
+
exports.MessageScroller = __webpack_exports__.MessageScroller;
|
|
114
|
+
exports.MessageScrollerButton = __webpack_exports__.MessageScrollerButton;
|
|
115
|
+
exports.MessageScrollerContent = __webpack_exports__.MessageScrollerContent;
|
|
116
|
+
exports.MessageScrollerItem = __webpack_exports__.MessageScrollerItem;
|
|
117
|
+
exports.MessageScrollerProvider = __webpack_exports__.MessageScrollerProvider;
|
|
118
|
+
exports.MessageScrollerViewport = __webpack_exports__.MessageScrollerViewport;
|
|
119
|
+
exports.useMessageScroller = __webpack_exports__.useMessageScroller;
|
|
120
|
+
exports.useMessageScrollerScrollable = __webpack_exports__.useMessageScrollerScrollable;
|
|
121
|
+
exports.useMessageScrollerVisibility = __webpack_exports__.useMessageScrollerVisibility;
|
|
122
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
123
|
+
"DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS",
|
|
124
|
+
"DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS",
|
|
125
|
+
"MessageScroller",
|
|
126
|
+
"MessageScrollerButton",
|
|
127
|
+
"MessageScrollerContent",
|
|
128
|
+
"MessageScrollerItem",
|
|
129
|
+
"MessageScrollerProvider",
|
|
130
|
+
"MessageScrollerViewport",
|
|
131
|
+
"useMessageScroller",
|
|
132
|
+
"useMessageScrollerScrollable",
|
|
133
|
+
"useMessageScrollerVisibility"
|
|
134
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
135
|
+
Object.defineProperty(exports, '__esModule', {
|
|
136
|
+
value: true
|
|
137
|
+
});
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { MessageScroller as MessageScrollerPrimitive } from './primitive';
|
|
3
|
+
/**
|
|
4
|
+
* The scroll container for a conversation, styled over the headless MessageScroller in
|
|
5
|
+
* `./primitive` (vendored from shadcn/ui, see the README there). The primitive owns the behaviour:
|
|
6
|
+
* following new content while the reader is at the end, keeping the position when older messages
|
|
7
|
+
* are prepended (`preserveScrollOnPrepend` on the viewport), anchoring a new turn to the top of the
|
|
8
|
+
* viewport (`scrollAnchor` on an item), jumping to a message by id (`useMessageScroller`), and
|
|
9
|
+
* reporting what is in view (`useMessageScrollerVisibility`).
|
|
10
|
+
*/
|
|
11
|
+
export { type MessageScrollerDefaultScrollPosition, type MessageScrollerScrollAlign, type MessageScrollerScrollable, type MessageScrollerScrollOptions, type MessageScrollerVisibilityState, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, } from './primitive';
|
|
12
|
+
declare const MessageScrollerProvider: typeof import("./primitive/components").MessageScrollerProvider;
|
|
13
|
+
export type MessageScrollerProps = React.ComponentPropsWithoutRef<typeof MessageScrollerPrimitive.Root>;
|
|
14
|
+
/**
|
|
15
|
+
* The frame around the viewport and the jump button. It takes its height from the consumer:
|
|
16
|
+
* pass `h-*`, `h-full`, or `flex-1` when it sits in a sized flex column. Without a definite
|
|
17
|
+
* height the viewport cannot scroll and the frame grows with the transcript.
|
|
18
|
+
*/
|
|
19
|
+
declare const MessageScroller: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
20
|
+
export interface MessageScrollerViewportStrings {
|
|
21
|
+
/** Accessible name of the scrolling region. */
|
|
22
|
+
label: string;
|
|
23
|
+
}
|
|
24
|
+
export declare const DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS: MessageScrollerViewportStrings;
|
|
25
|
+
export interface MessageScrollerViewportProps extends React.ComponentPropsWithoutRef<typeof MessageScrollerPrimitive.Viewport> {
|
|
26
|
+
/** Overrides for any subset of the English strings. An explicit `aria-label` wins over `label`. */
|
|
27
|
+
strings?: Partial<MessageScrollerViewportStrings>;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* The scrolling element, a focusable `region`. Its accessible name comes from `strings.label`
|
|
31
|
+
* (default "Messages"), so hosts should pass translated strings.
|
|
32
|
+
*/
|
|
33
|
+
declare const MessageScrollerViewport: React.ForwardRefExoticComponent<MessageScrollerViewportProps & React.RefAttributes<HTMLDivElement>>;
|
|
34
|
+
export type MessageScrollerContentProps = React.ComponentPropsWithoutRef<typeof MessageScrollerPrimitive.Content>;
|
|
35
|
+
declare const MessageScrollerContent: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
36
|
+
spacerClassName?: string;
|
|
37
|
+
} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
38
|
+
export type MessageScrollerItemProps = React.ComponentPropsWithoutRef<typeof MessageScrollerPrimitive.Item>;
|
|
39
|
+
declare const MessageScrollerItem: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
40
|
+
messageId?: string;
|
|
41
|
+
scrollAnchor?: boolean;
|
|
42
|
+
} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
43
|
+
export interface MessageScrollerButtonStrings {
|
|
44
|
+
/** Label of the jump button when it leads to the newest message. */
|
|
45
|
+
scrollToLatest: string;
|
|
46
|
+
/** Label of the jump button when `direction="start"` leads to the oldest message. */
|
|
47
|
+
scrollToStart: string;
|
|
48
|
+
}
|
|
49
|
+
export declare const DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS: MessageScrollerButtonStrings;
|
|
50
|
+
export interface MessageScrollerButtonProps extends React.ComponentPropsWithoutRef<typeof MessageScrollerPrimitive.Button> {
|
|
51
|
+
/** Overrides for any subset of the English strings. Ignored when `children` is given. */
|
|
52
|
+
strings?: Partial<MessageScrollerButtonStrings>;
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* The jump button, shown only while the viewport is away from its `direction` edge. The primitive
|
|
56
|
+
* sets `data-active`; this styling fades the button out rather than unmounting it so the position
|
|
57
|
+
* is stable.
|
|
58
|
+
*/
|
|
59
|
+
declare const MessageScrollerButton: React.ForwardRefExoticComponent<MessageScrollerButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
60
|
+
export { MessageScrollerProvider, MessageScroller, MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem, MessageScrollerButton, };
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { ChevronDown } from "lucide-react";
|
|
4
|
+
import { forwardRef } from "react";
|
|
5
|
+
import { cn } from "../../../lib/index.js";
|
|
6
|
+
import { MessageScroller, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "./primitive/index.js";
|
|
7
|
+
const MessageScrollerProvider = MessageScroller.Provider;
|
|
8
|
+
const message_scroller_MessageScroller = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MessageScroller.Root, {
|
|
9
|
+
ref: ref,
|
|
10
|
+
"data-slot": "message-scroller",
|
|
11
|
+
className: cn('relative flex min-h-0 flex-col', className),
|
|
12
|
+
...props
|
|
13
|
+
}));
|
|
14
|
+
message_scroller_MessageScroller.displayName = 'MessageScroller';
|
|
15
|
+
const DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS = {
|
|
16
|
+
label: 'Messages'
|
|
17
|
+
};
|
|
18
|
+
const MessageScrollerViewport = /*#__PURE__*/ forwardRef(({ className, 'aria-label': ariaLabel, strings, ...props }, ref)=>{
|
|
19
|
+
const text = {
|
|
20
|
+
...DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS,
|
|
21
|
+
...strings
|
|
22
|
+
};
|
|
23
|
+
return /*#__PURE__*/ jsx(MessageScroller.Viewport, {
|
|
24
|
+
ref: ref,
|
|
25
|
+
"data-slot": "message-scroller-viewport",
|
|
26
|
+
"aria-label": ariaLabel ?? text.label,
|
|
27
|
+
className: cn('min-h-0 flex-1 overflow-y-auto overscroll-contain outline-none', className),
|
|
28
|
+
...props
|
|
29
|
+
});
|
|
30
|
+
});
|
|
31
|
+
MessageScrollerViewport.displayName = 'MessageScrollerViewport';
|
|
32
|
+
const MessageScrollerContent = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MessageScroller.Content, {
|
|
33
|
+
ref: ref,
|
|
34
|
+
"data-slot": "message-scroller-content",
|
|
35
|
+
className: cn('flex flex-col gap-4 px-4 py-4', className),
|
|
36
|
+
...props
|
|
37
|
+
}));
|
|
38
|
+
MessageScrollerContent.displayName = 'MessageScrollerContent';
|
|
39
|
+
const MessageScrollerItem = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MessageScroller.Item, {
|
|
40
|
+
ref: ref,
|
|
41
|
+
"data-slot": "message-scroller-item",
|
|
42
|
+
className: cn('min-w-0', className),
|
|
43
|
+
...props
|
|
44
|
+
}));
|
|
45
|
+
MessageScrollerItem.displayName = 'MessageScrollerItem';
|
|
46
|
+
const DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS = {
|
|
47
|
+
scrollToLatest: 'Scroll to latest',
|
|
48
|
+
scrollToStart: 'Scroll to start'
|
|
49
|
+
};
|
|
50
|
+
const MessageScrollerButton = /*#__PURE__*/ forwardRef(({ className, children, direction = 'end', strings, ...props }, ref)=>{
|
|
51
|
+
const text = {
|
|
52
|
+
...DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS,
|
|
53
|
+
...strings
|
|
54
|
+
};
|
|
55
|
+
return /*#__PURE__*/ jsx(MessageScroller.Button, {
|
|
56
|
+
ref: ref,
|
|
57
|
+
"data-slot": "message-scroller-button",
|
|
58
|
+
direction: direction,
|
|
59
|
+
className: cn('absolute bottom-3 left-1/2 z-10 flex -translate-x-1/2 items-center justify-center gap-1.5 rounded-full border border-border-subtle bg-card px-3 py-1.5 text-xs font-medium text-foreground shadow-md transition-opacity hover:bg-surface-overlay data-[active=false]:pointer-events-none data-[active=false]:opacity-0', 'start' === direction && 'top-3 bottom-auto', className),
|
|
60
|
+
...props,
|
|
61
|
+
children: children ?? /*#__PURE__*/ jsxs(Fragment, {
|
|
62
|
+
children: [
|
|
63
|
+
/*#__PURE__*/ jsx(ChevronDown, {
|
|
64
|
+
size: 14,
|
|
65
|
+
className: cn('start' === direction && 'rotate-180')
|
|
66
|
+
}),
|
|
67
|
+
'start' === direction ? text.scrollToStart : text.scrollToLatest
|
|
68
|
+
]
|
|
69
|
+
})
|
|
70
|
+
});
|
|
71
|
+
});
|
|
72
|
+
MessageScrollerButton.displayName = 'MessageScrollerButton';
|
|
73
|
+
export { DEFAULT_MESSAGE_SCROLLER_BUTTON_STRINGS, DEFAULT_MESSAGE_SCROLLER_VIEWPORT_STRINGS, message_scroller_MessageScroller as MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility };
|