@shapesos/clay 0.3.1 → 0.4.1
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/chat.cjs +84 -354
- package/dist/chat.cjs.map +1 -1
- package/dist/chat.d.cts +13 -24
- package/dist/chat.d.ts +13 -24
- package/dist/chat.js +10 -4
- package/dist/chunk-72TJUKMV.js +1 -0
- package/dist/{chunk-P7NISN4V.js → chunk-AEXYOY5H.js} +11 -11
- package/dist/chunk-AEXYOY5H.js.map +1 -0
- package/dist/{chunk-UKM5VQKW.js → chunk-BIATJTD4.js} +5 -5
- package/dist/chunk-BIATJTD4.js.map +1 -0
- package/dist/chunk-EPS4LOOW.js +339 -0
- package/dist/chunk-EPS4LOOW.js.map +1 -0
- package/dist/icon.cjs +12 -12
- package/dist/icon.cjs.map +1 -1
- package/dist/icon.js +2 -2
- package/dist/index.cjs +165 -365
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +20 -2
- package/dist/index.d.ts +20 -2
- package/dist/index.js +80 -7
- package/dist/index.js.map +1 -1
- package/dist/lottie.cjs +5 -5
- package/dist/lottie.cjs.map +1 -1
- package/dist/lottie.js +1 -1
- package/package.json +1 -1
- package/dist/chunk-2GFOESHR.js +0 -613
- package/dist/chunk-2GFOESHR.js.map +0 -1
- package/dist/chunk-7AJSQJQ5.js +0 -1
- package/dist/chunk-P7NISN4V.js.map +0 -1
- package/dist/chunk-UKM5VQKW.js.map +0 -1
- /package/dist/{chunk-7AJSQJQ5.js.map → chunk-72TJUKMV.js.map} +0 -0
package/dist/chat.cjs
CHANGED
|
@@ -30,58 +30,19 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
// src/chat/index.ts
|
|
31
31
|
var chat_exports = {};
|
|
32
32
|
__export(chat_exports, {
|
|
33
|
-
|
|
33
|
+
ChatContext: () => ChatContext,
|
|
34
|
+
ChatMessage: () => ChatMessage,
|
|
35
|
+
useChatContext: () => useChatContext,
|
|
36
|
+
useCopyToClipboard: () => useCopyToClipboard
|
|
34
37
|
});
|
|
35
38
|
module.exports = __toCommonJS(chat_exports);
|
|
36
39
|
|
|
37
|
-
// src/chat/chat-root/chat-root.tsx
|
|
38
|
-
var import_react2 = require("react");
|
|
39
|
-
|
|
40
|
-
// src/chat/chat-context/chat-context.ts
|
|
41
|
-
var import_react = require("react");
|
|
42
|
-
var ChatContext = (0, import_react.createContext)(null);
|
|
43
|
-
function useChatContext() {
|
|
44
|
-
const context = (0, import_react.useContext)(ChatContext);
|
|
45
|
-
if (!context) {
|
|
46
|
-
throw new Error("useChatContext must be used within a Chat.Root component");
|
|
47
|
-
}
|
|
48
|
-
return context;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
// src/chat/chat-root/chat-root-styles.ts
|
|
52
|
-
var import_styled_components = __toESM(require("styled-components"), 1);
|
|
53
|
-
var RootContainer = import_styled_components.default.div`
|
|
54
|
-
display: flex;
|
|
55
|
-
flex-direction: column;
|
|
56
|
-
height: 100%;
|
|
57
|
-
overflow: hidden;
|
|
58
|
-
`;
|
|
59
|
-
|
|
60
|
-
// src/chat/chat-root/chat-root.tsx
|
|
61
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
62
|
-
function ChatRoot({
|
|
63
|
-
messages,
|
|
64
|
-
onSendMessage,
|
|
65
|
-
isLoading = false,
|
|
66
|
-
onStop,
|
|
67
|
-
onCopyMessage,
|
|
68
|
-
onThumbUpClick,
|
|
69
|
-
onThumbDownClick,
|
|
70
|
-
children
|
|
71
|
-
}) {
|
|
72
|
-
const contextValue = (0, import_react2.useMemo)(
|
|
73
|
-
() => ({ messages, onSendMessage, isLoading, onStop, onCopyMessage, onThumbUpClick, onThumbDownClick }),
|
|
74
|
-
[messages, onSendMessage, isLoading, onStop, onCopyMessage, onThumbUpClick, onThumbDownClick]
|
|
75
|
-
);
|
|
76
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RootContainer, { children }) });
|
|
77
|
-
}
|
|
78
|
-
|
|
79
40
|
// src/chat/chat-message-content/chat-message-content.tsx
|
|
80
41
|
var import_react_markdown = __toESM(require("react-markdown"), 1);
|
|
81
42
|
var import_remark_gfm = __toESM(require("remark-gfm"), 1);
|
|
82
43
|
|
|
83
44
|
// src/chat/chat-message-content/chat-message-content-styles.ts
|
|
84
|
-
var
|
|
45
|
+
var import_styled_components = __toESM(require("styled-components"), 1);
|
|
85
46
|
|
|
86
47
|
// src/tokens/colors.ts
|
|
87
48
|
var colors = {
|
|
@@ -456,7 +417,7 @@ function typographyMixin(type) {
|
|
|
456
417
|
}
|
|
457
418
|
|
|
458
419
|
// src/chat/chat-message-content/chat-message-content-styles.ts
|
|
459
|
-
var ContentWrapper =
|
|
420
|
+
var ContentWrapper = import_styled_components.default.div`
|
|
460
421
|
${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
|
|
461
422
|
color: ${colors["brown-100"]};
|
|
462
423
|
word-break: break-word;
|
|
@@ -528,16 +489,16 @@ var ContentWrapper = import_styled_components2.default.div`
|
|
|
528
489
|
`;
|
|
529
490
|
|
|
530
491
|
// src/chat/chat-message-content/chat-message-content.tsx
|
|
531
|
-
var
|
|
492
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
532
493
|
function ChatMessageContent({ content }) {
|
|
533
|
-
return /* @__PURE__ */ (0,
|
|
494
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContentWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default], children: content }) });
|
|
534
495
|
}
|
|
535
496
|
|
|
536
497
|
// src/chat/chat-message-actions/chat-message-actions.tsx
|
|
537
|
-
var
|
|
498
|
+
var import_react6 = require("react");
|
|
538
499
|
|
|
539
500
|
// node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
|
|
540
|
-
var
|
|
501
|
+
var import_react = require("react");
|
|
541
502
|
|
|
542
503
|
// node_modules/@tabler/icons-react/dist/esm/defaultAttributes.mjs
|
|
543
504
|
var defaultAttributes = {
|
|
@@ -564,8 +525,8 @@ var defaultAttributes = {
|
|
|
564
525
|
|
|
565
526
|
// node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
|
|
566
527
|
var createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
|
|
567
|
-
const Component = (0,
|
|
568
|
-
({ color = "currentColor", size = 24, stroke = 2, title, className, children, ...rest }, ref) => (0,
|
|
528
|
+
const Component = (0, import_react.forwardRef)(
|
|
529
|
+
({ color = "currentColor", size = 24, stroke = 2, title, className, children, ...rest }, ref) => (0, import_react.createElement)(
|
|
569
530
|
"svg",
|
|
570
531
|
{
|
|
571
532
|
ref,
|
|
@@ -582,8 +543,8 @@ var createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
|
|
|
582
543
|
...rest
|
|
583
544
|
},
|
|
584
545
|
[
|
|
585
|
-
title && (0,
|
|
586
|
-
...iconNode.map(([tag, attrs]) => (0,
|
|
546
|
+
title && (0, import_react.createElement)("title", { key: "svg-title" }, title),
|
|
547
|
+
...iconNode.map(([tag, attrs]) => (0, import_react.createElement)(tag, attrs)),
|
|
587
548
|
...Array.isArray(children) ? children : [children]
|
|
588
549
|
]
|
|
589
550
|
)
|
|
@@ -592,43 +553,35 @@ var createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
|
|
|
592
553
|
return Component;
|
|
593
554
|
};
|
|
594
555
|
|
|
595
|
-
// node_modules/@tabler/icons-react/dist/esm/icons/IconArrowUp.mjs
|
|
596
|
-
var __iconNode = [["path", { "d": "M12 5l0 14", "key": "svg-0" }], ["path", { "d": "M18 11l-6 -6", "key": "svg-1" }], ["path", { "d": "M6 11l6 -6", "key": "svg-2" }]];
|
|
597
|
-
var IconArrowUp = createReactComponent("outline", "arrow-up", "ArrowUp", __iconNode);
|
|
598
|
-
|
|
599
556
|
// node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.mjs
|
|
600
|
-
var
|
|
601
|
-
var IconCheck = createReactComponent("outline", "check", "Check",
|
|
557
|
+
var __iconNode = [["path", { "d": "M5 12l5 5l10 -10", "key": "svg-0" }]];
|
|
558
|
+
var IconCheck = createReactComponent("outline", "check", "Check", __iconNode);
|
|
602
559
|
|
|
603
560
|
// node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.mjs
|
|
604
|
-
var
|
|
605
|
-
var IconCopy = createReactComponent("outline", "copy", "Copy",
|
|
561
|
+
var __iconNode2 = [["path", { "d": "M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666", "key": "svg-0" }], ["path", { "d": "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1", "key": "svg-1" }]];
|
|
562
|
+
var IconCopy = createReactComponent("outline", "copy", "Copy", __iconNode2);
|
|
606
563
|
|
|
607
564
|
// node_modules/@tabler/icons-react/dist/esm/icons/IconThumbDown.mjs
|
|
608
|
-
var
|
|
609
|
-
var IconThumbDown = createReactComponent("outline", "thumb-down", "ThumbDown",
|
|
565
|
+
var __iconNode3 = [["path", { "d": "M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3", "key": "svg-0" }]];
|
|
566
|
+
var IconThumbDown = createReactComponent("outline", "thumb-down", "ThumbDown", __iconNode3);
|
|
610
567
|
|
|
611
568
|
// node_modules/@tabler/icons-react/dist/esm/icons/IconThumbUp.mjs
|
|
612
|
-
var
|
|
613
|
-
var IconThumbUp = createReactComponent("outline", "thumb-up", "ThumbUp",
|
|
614
|
-
|
|
615
|
-
// node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.mjs
|
|
616
|
-
var __iconNode6 = [["path", { "d": "M17 4h-10a3 3 0 0 0 -3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3 -3v-10a3 3 0 0 0 -3 -3z", "key": "svg-0" }]];
|
|
617
|
-
var IconPlayerStopFilled = createReactComponent("filled", "player-stop-filled", "PlayerStopFilled", __iconNode6);
|
|
569
|
+
var __iconNode4 = [["path", { "d": "M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3", "key": "svg-0" }]];
|
|
570
|
+
var IconThumbUp = createReactComponent("outline", "thumb-up", "ThumbUp", __iconNode4);
|
|
618
571
|
|
|
619
|
-
// src/icon-button/icon-button.tsx
|
|
620
|
-
var
|
|
572
|
+
// src/components/icon-button/icon-button.tsx
|
|
573
|
+
var import_react3 = require("react");
|
|
621
574
|
|
|
622
|
-
// src/icon/icon.tsx
|
|
623
|
-
var
|
|
575
|
+
// src/components/icon/icon.tsx
|
|
576
|
+
var import_react2 = require("react");
|
|
624
577
|
|
|
625
|
-
// src/icon/icon-styles.ts
|
|
626
|
-
var
|
|
578
|
+
// src/components/icon/icon-styles.ts
|
|
579
|
+
var import_styled_components2 = __toESM(require("styled-components"), 1);
|
|
627
580
|
var STROKE_WIDTH_BY_SIZE = {
|
|
628
|
-
12: 1.
|
|
629
|
-
14: 1.
|
|
630
|
-
16: 1.
|
|
631
|
-
18: 1.
|
|
581
|
+
12: 1.4,
|
|
582
|
+
14: 1.4,
|
|
583
|
+
16: 1.6,
|
|
584
|
+
18: 1.6,
|
|
632
585
|
20: 1.8,
|
|
633
586
|
24: 1.8
|
|
634
587
|
};
|
|
@@ -636,7 +589,7 @@ var DEFAULT_STROKE_WIDTH = 1.8;
|
|
|
636
589
|
function getStrokeWidth(size) {
|
|
637
590
|
return STROKE_WIDTH_BY_SIZE[size] ?? DEFAULT_STROKE_WIDTH;
|
|
638
591
|
}
|
|
639
|
-
var IconWrapper =
|
|
592
|
+
var IconWrapper = import_styled_components2.default.span`
|
|
640
593
|
display: inline-flex;
|
|
641
594
|
align-items: center;
|
|
642
595
|
justify-content: center;
|
|
@@ -644,11 +597,11 @@ var IconWrapper = import_styled_components3.default.span`
|
|
|
644
597
|
flex-shrink: 0;
|
|
645
598
|
`;
|
|
646
599
|
|
|
647
|
-
// src/icon/icon.tsx
|
|
648
|
-
var
|
|
600
|
+
// src/components/icon/icon.tsx
|
|
601
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
649
602
|
var DEFAULT_SIZE = 16;
|
|
650
|
-
var Icon = (0,
|
|
651
|
-
return /* @__PURE__ */ (0,
|
|
603
|
+
var Icon = (0, import_react2.forwardRef)(function Icon2({ icon: IconComponent, size = DEFAULT_SIZE, color, className, "aria-label": ariaLabel }, ref) {
|
|
604
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
652
605
|
IconWrapper,
|
|
653
606
|
{
|
|
654
607
|
ref,
|
|
@@ -656,13 +609,13 @@ var Icon = (0, import_react4.forwardRef)(function Icon2({ icon: IconComponent, s
|
|
|
656
609
|
$color: color,
|
|
657
610
|
"aria-label": ariaLabel,
|
|
658
611
|
role: ariaLabel ? "img" : void 0,
|
|
659
|
-
children: /* @__PURE__ */ (0,
|
|
612
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconComponent, { width: size, height: size, strokeWidth: getStrokeWidth(size) })
|
|
660
613
|
}
|
|
661
614
|
);
|
|
662
615
|
});
|
|
663
616
|
|
|
664
|
-
// src/icon-button/icon-button-styles.ts
|
|
665
|
-
var
|
|
617
|
+
// src/components/icon-button/icon-button-styles.ts
|
|
618
|
+
var import_styled_components3 = __toESM(require("styled-components"), 1);
|
|
666
619
|
var DIMENSIONS = {
|
|
667
620
|
small: 28,
|
|
668
621
|
medium: 32
|
|
@@ -671,7 +624,7 @@ var BORDER_RADIUS = {
|
|
|
671
624
|
small: 6,
|
|
672
625
|
medium: 10
|
|
673
626
|
};
|
|
674
|
-
var Button =
|
|
627
|
+
var Button = import_styled_components3.default.button`
|
|
675
628
|
display: inline-flex;
|
|
676
629
|
align-items: center;
|
|
677
630
|
justify-content: center;
|
|
@@ -700,14 +653,14 @@ var Button = import_styled_components4.default.button`
|
|
|
700
653
|
}
|
|
701
654
|
`;
|
|
702
655
|
|
|
703
|
-
// src/icon-button/icon-button.tsx
|
|
704
|
-
var
|
|
656
|
+
// src/components/icon-button/icon-button.tsx
|
|
657
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
705
658
|
var ICON_SIZE_BY_BUTTON_SIZE = {
|
|
706
659
|
small: 14,
|
|
707
660
|
medium: 16
|
|
708
661
|
};
|
|
709
|
-
var IconButton = (0,
|
|
710
|
-
return /* @__PURE__ */ (0,
|
|
662
|
+
var IconButton = (0, import_react3.forwardRef)(function IconButton2({ icon, size = "small", isSelected = false, disabled = false, onClick, className, "aria-label": ariaLabel }, ref) {
|
|
663
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
711
664
|
Button,
|
|
712
665
|
{
|
|
713
666
|
ref,
|
|
@@ -717,13 +670,24 @@ var IconButton = (0, import_react5.forwardRef)(function IconButton2({ icon, size
|
|
|
717
670
|
disabled,
|
|
718
671
|
onClick: disabled ? void 0 : onClick,
|
|
719
672
|
"aria-label": ariaLabel,
|
|
720
|
-
children: /* @__PURE__ */ (0,
|
|
673
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { icon, size: ICON_SIZE_BY_BUTTON_SIZE[size] })
|
|
721
674
|
}
|
|
722
675
|
);
|
|
723
676
|
});
|
|
724
677
|
|
|
678
|
+
// src/chat/chat-context/chat-context.ts
|
|
679
|
+
var import_react4 = require("react");
|
|
680
|
+
var ChatContext = (0, import_react4.createContext)(null);
|
|
681
|
+
function useChatContext() {
|
|
682
|
+
const context = (0, import_react4.useContext)(ChatContext);
|
|
683
|
+
if (!context) {
|
|
684
|
+
throw new Error("useChatContext must be used within a Chat.Root component");
|
|
685
|
+
}
|
|
686
|
+
return context;
|
|
687
|
+
}
|
|
688
|
+
|
|
725
689
|
// src/chat/hooks/use-copy-to-clipboard.ts
|
|
726
|
-
var
|
|
690
|
+
var import_react5 = require("react");
|
|
727
691
|
|
|
728
692
|
// src/utils/clipboard.ts
|
|
729
693
|
function copyToClipboard(text, options) {
|
|
@@ -736,14 +700,14 @@ function copyToClipboard(text, options) {
|
|
|
736
700
|
// src/chat/hooks/use-copy-to-clipboard.ts
|
|
737
701
|
var RESET_DELAY_MS = 2e3;
|
|
738
702
|
function useCopyToClipboard() {
|
|
739
|
-
const [isCopied, setIsCopied] = (0,
|
|
740
|
-
const timeoutRef = (0,
|
|
741
|
-
(0,
|
|
703
|
+
const [isCopied, setIsCopied] = (0, import_react5.useState)(false);
|
|
704
|
+
const timeoutRef = (0, import_react5.useRef)(null);
|
|
705
|
+
(0, import_react5.useEffect)(() => {
|
|
742
706
|
return () => {
|
|
743
707
|
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
744
708
|
};
|
|
745
709
|
}, []);
|
|
746
|
-
const copy = (0,
|
|
710
|
+
const copy = (0, import_react5.useCallback)((text) => {
|
|
747
711
|
copyToClipboard(text, {
|
|
748
712
|
onSuccess: () => {
|
|
749
713
|
setIsCopied(true);
|
|
@@ -759,8 +723,8 @@ function useCopyToClipboard() {
|
|
|
759
723
|
}
|
|
760
724
|
|
|
761
725
|
// src/chat/chat-message-actions/chat-message-actions-styles.ts
|
|
762
|
-
var
|
|
763
|
-
var ActionsContainer =
|
|
726
|
+
var import_styled_components4 = __toESM(require("styled-components"), 1);
|
|
727
|
+
var ActionsContainer = import_styled_components4.default.div`
|
|
764
728
|
display: flex;
|
|
765
729
|
gap: 2px;
|
|
766
730
|
margin-top: 4px;
|
|
@@ -770,24 +734,24 @@ var ActionsContainer = import_styled_components5.default.div`
|
|
|
770
734
|
`;
|
|
771
735
|
|
|
772
736
|
// src/chat/chat-message-actions/chat-message-actions.tsx
|
|
773
|
-
var
|
|
737
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
774
738
|
function ChatMessageActions({ messageId, content, role, isHelpful }) {
|
|
775
739
|
const { onCopyMessage, onThumbUpClick, onThumbDownClick } = useChatContext();
|
|
776
740
|
const { isCopied, copy } = useCopyToClipboard();
|
|
777
|
-
const handleCopy = (0,
|
|
741
|
+
const handleCopy = (0, import_react6.useCallback)(() => {
|
|
778
742
|
copy(content);
|
|
779
743
|
onCopyMessage?.(messageId);
|
|
780
744
|
}, [content, messageId, copy, onCopyMessage]);
|
|
781
|
-
const handleThumbUp = (0,
|
|
745
|
+
const handleThumbUp = (0, import_react6.useCallback)(() => {
|
|
782
746
|
onThumbUpClick?.(messageId, isHelpful === true ? null : true);
|
|
783
747
|
}, [messageId, isHelpful, onThumbUpClick]);
|
|
784
|
-
const handleThumbDown = (0,
|
|
748
|
+
const handleThumbDown = (0, import_react6.useCallback)(() => {
|
|
785
749
|
onThumbDownClick?.(messageId, isHelpful === false ? null : false);
|
|
786
750
|
}, [messageId, isHelpful, onThumbDownClick]);
|
|
787
751
|
const isAssistant = role === "assistant";
|
|
788
752
|
const hasFeedback = isAssistant && (onThumbUpClick || onThumbDownClick);
|
|
789
|
-
return /* @__PURE__ */ (0,
|
|
790
|
-
/* @__PURE__ */ (0,
|
|
753
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ActionsContainer, { children: [
|
|
754
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
791
755
|
IconButton,
|
|
792
756
|
{
|
|
793
757
|
icon: isCopied ? IconCheck : IconCopy,
|
|
@@ -795,7 +759,7 @@ function ChatMessageActions({ messageId, content, role, isHelpful }) {
|
|
|
795
759
|
"aria-label": isCopied ? "Copied" : "Copy message"
|
|
796
760
|
}
|
|
797
761
|
),
|
|
798
|
-
hasFeedback && /* @__PURE__ */ (0,
|
|
762
|
+
hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
799
763
|
IconButton,
|
|
800
764
|
{
|
|
801
765
|
icon: IconThumbUp,
|
|
@@ -804,7 +768,7 @@ function ChatMessageActions({ messageId, content, role, isHelpful }) {
|
|
|
804
768
|
"aria-label": "Good response"
|
|
805
769
|
}
|
|
806
770
|
),
|
|
807
|
-
hasFeedback && /* @__PURE__ */ (0,
|
|
771
|
+
hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
808
772
|
IconButton,
|
|
809
773
|
{
|
|
810
774
|
icon: IconThumbDown,
|
|
@@ -817,12 +781,12 @@ function ChatMessageActions({ messageId, content, role, isHelpful }) {
|
|
|
817
781
|
}
|
|
818
782
|
|
|
819
783
|
// src/chat/chat-message/chat-message-styles.ts
|
|
820
|
-
var
|
|
821
|
-
var MessageRow =
|
|
784
|
+
var import_styled_components5 = __toESM(require("styled-components"), 1);
|
|
785
|
+
var MessageRow = import_styled_components5.default.div`
|
|
822
786
|
display: flex;
|
|
823
787
|
justify-content: ${({ $role }) => $role === "user" ? "flex-end" : "flex-start"};
|
|
824
788
|
`;
|
|
825
|
-
var MessageContainer =
|
|
789
|
+
var MessageContainer = import_styled_components5.default.div`
|
|
826
790
|
display: flex;
|
|
827
791
|
flex-direction: column;
|
|
828
792
|
align-items: ${({ $role }) => $role === "user" ? "flex-end" : "flex-start"};
|
|
@@ -833,7 +797,7 @@ var MessageContainer = import_styled_components6.default.div`
|
|
|
833
797
|
pointer-events: auto;
|
|
834
798
|
}
|
|
835
799
|
`;
|
|
836
|
-
var MessageBubble =
|
|
800
|
+
var MessageBubble = import_styled_components5.default.div`
|
|
837
801
|
${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
|
|
838
802
|
color: ${colors["brown-100"]};
|
|
839
803
|
background: ${({ $role }) => $role === "user" ? colors.white : "transparent"};
|
|
@@ -842,11 +806,11 @@ var MessageBubble = import_styled_components6.default.div`
|
|
|
842
806
|
`;
|
|
843
807
|
|
|
844
808
|
// src/chat/chat-message/chat-message.tsx
|
|
845
|
-
var
|
|
809
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
846
810
|
function ChatMessage({ message }) {
|
|
847
|
-
return /* @__PURE__ */ (0,
|
|
848
|
-
/* @__PURE__ */ (0,
|
|
849
|
-
/* @__PURE__ */ (0,
|
|
811
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MessageRow, { $role: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MessageContainer, { $role: message.role, children: [
|
|
812
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MessageBubble, { $role: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChatMessageContent, { content: message.content }) }),
|
|
813
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
850
814
|
ChatMessageActions,
|
|
851
815
|
{
|
|
852
816
|
messageId: message.id,
|
|
@@ -857,255 +821,21 @@ function ChatMessage({ message }) {
|
|
|
857
821
|
)
|
|
858
822
|
] }) });
|
|
859
823
|
}
|
|
860
|
-
|
|
861
|
-
// src/chat/hooks/use-auto-scroll.ts
|
|
862
|
-
var import_react8 = require("react");
|
|
863
|
-
function useAutoScroll(messageCount) {
|
|
864
|
-
const scrollContainerRef = (0, import_react8.useRef)(null);
|
|
865
|
-
const sentinelRef = (0, import_react8.useRef)(null);
|
|
866
|
-
const [isAtBottom, setIsAtBottom] = (0, import_react8.useState)(true);
|
|
867
|
-
const prevMessageCountRef = (0, import_react8.useRef)(messageCount);
|
|
868
|
-
const hasInitializedRef = (0, import_react8.useRef)(false);
|
|
869
|
-
(0, import_react8.useLayoutEffect)(() => {
|
|
870
|
-
const el = scrollContainerRef.current;
|
|
871
|
-
if (el) {
|
|
872
|
-
el.scrollTop = el.scrollHeight;
|
|
873
|
-
}
|
|
874
|
-
}, []);
|
|
875
|
-
(0, import_react8.useEffect)(() => {
|
|
876
|
-
if (!hasInitializedRef.current) {
|
|
877
|
-
hasInitializedRef.current = true;
|
|
878
|
-
requestAnimationFrame(() => {
|
|
879
|
-
const el = scrollContainerRef.current;
|
|
880
|
-
if (el) {
|
|
881
|
-
el.scrollTop = el.scrollHeight;
|
|
882
|
-
}
|
|
883
|
-
});
|
|
884
|
-
}
|
|
885
|
-
}, []);
|
|
886
|
-
(0, import_react8.useEffect)(() => {
|
|
887
|
-
const sentinel = sentinelRef.current;
|
|
888
|
-
const scrollContainer = scrollContainerRef.current;
|
|
889
|
-
if (!sentinel || !scrollContainer) return;
|
|
890
|
-
const observer = new IntersectionObserver(
|
|
891
|
-
([entry]) => {
|
|
892
|
-
setIsAtBottom(entry.isIntersecting);
|
|
893
|
-
},
|
|
894
|
-
{ root: scrollContainer, threshold: 0 }
|
|
895
|
-
);
|
|
896
|
-
observer.observe(sentinel);
|
|
897
|
-
return () => observer.disconnect();
|
|
898
|
-
}, []);
|
|
899
|
-
(0, import_react8.useEffect)(() => {
|
|
900
|
-
if (!hasInitializedRef.current) return;
|
|
901
|
-
if (messageCount > prevMessageCountRef.current) {
|
|
902
|
-
requestAnimationFrame(() => {
|
|
903
|
-
const el = scrollContainerRef.current;
|
|
904
|
-
if (el) {
|
|
905
|
-
el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
|
|
906
|
-
}
|
|
907
|
-
});
|
|
908
|
-
}
|
|
909
|
-
prevMessageCountRef.current = messageCount;
|
|
910
|
-
}, [messageCount]);
|
|
911
|
-
const scrollToBottom = (0, import_react8.useCallback)(() => {
|
|
912
|
-
const el = scrollContainerRef.current;
|
|
913
|
-
if (el) {
|
|
914
|
-
el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
|
|
915
|
-
}
|
|
916
|
-
}, []);
|
|
917
|
-
return { scrollContainerRef, sentinelRef, isAtBottom, scrollToBottom };
|
|
918
|
-
}
|
|
919
|
-
|
|
920
|
-
// src/chat/chat-message-list/chat-message-list-styles.ts
|
|
921
|
-
var import_styled_components7 = __toESM(require("styled-components"), 1);
|
|
922
|
-
var ListContainer = import_styled_components7.default.div`
|
|
923
|
-
display: flex;
|
|
924
|
-
flex-direction: column;
|
|
925
|
-
flex: 1;
|
|
926
|
-
overflow-y: auto;
|
|
927
|
-
|
|
928
|
-
&::-webkit-scrollbar {
|
|
929
|
-
width: 6px;
|
|
930
|
-
}
|
|
931
|
-
|
|
932
|
-
&::-webkit-scrollbar-track {
|
|
933
|
-
background: transparent;
|
|
934
|
-
}
|
|
935
|
-
|
|
936
|
-
&::-webkit-scrollbar-thumb {
|
|
937
|
-
background: ${colors["brown-30"]};
|
|
938
|
-
border-radius: 3px;
|
|
939
|
-
}
|
|
940
|
-
`;
|
|
941
|
-
var MessagesList = import_styled_components7.default.div`
|
|
942
|
-
display: flex;
|
|
943
|
-
flex-direction: column;
|
|
944
|
-
gap: 40px;
|
|
945
|
-
padding: 0 16px 32px 16px;
|
|
946
|
-
`;
|
|
947
|
-
var ScrollSentinel = import_styled_components7.default.div`
|
|
948
|
-
flex-shrink: 0;
|
|
949
|
-
height: 16px;
|
|
950
|
-
`;
|
|
951
|
-
|
|
952
|
-
// src/chat/chat-message-list/chat-message-list.tsx
|
|
953
|
-
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
954
|
-
function ChatMessageList() {
|
|
955
|
-
const { messages } = useChatContext();
|
|
956
|
-
const { scrollContainerRef, sentinelRef } = useAutoScroll(messages.length);
|
|
957
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ListContainer, { ref: scrollContainerRef, "data-testid": "chat-list-container", children: [
|
|
958
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MessagesList, { children: messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChatMessage, { message }, message.id)) }),
|
|
959
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ScrollSentinel, { ref: sentinelRef, "data-testid": "chat-scroll-sentinel" })
|
|
960
|
-
] });
|
|
961
|
-
}
|
|
962
|
-
|
|
963
|
-
// src/chat/chat-composer/chat-composer.tsx
|
|
964
|
-
var import_react9 = require("react");
|
|
965
|
-
|
|
966
|
-
// src/chat/chat-composer/chat-composer-styles.ts
|
|
967
|
-
var import_styled_components8 = __toESM(require("styled-components"), 1);
|
|
968
|
-
var ComposerContainer = import_styled_components8.default.div`
|
|
969
|
-
position: relative;
|
|
970
|
-
background: ${colors.white};
|
|
971
|
-
border-radius: 12px;
|
|
972
|
-
box-shadow: 0 0 4px 0 ${colors["brown-alpha-12"]};
|
|
973
|
-
padding: 8px 0;
|
|
974
|
-
`;
|
|
975
|
-
var TextArea = import_styled_components8.default.textarea`
|
|
976
|
-
display: block;
|
|
977
|
-
width: 100%;
|
|
978
|
-
resize: none;
|
|
979
|
-
border: none;
|
|
980
|
-
background: transparent;
|
|
981
|
-
${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
|
|
982
|
-
color: ${colors["brown-90"]};
|
|
983
|
-
padding: 4px 46px 4px 16px;
|
|
984
|
-
min-height: 20px;
|
|
985
|
-
max-height: 200px;
|
|
986
|
-
overflow-y: auto;
|
|
987
|
-
box-sizing: border-box;
|
|
988
|
-
|
|
989
|
-
&::placeholder {
|
|
990
|
-
color: ${colors["brown-60"]};
|
|
991
|
-
}
|
|
992
|
-
|
|
993
|
-
&:focus {
|
|
994
|
-
outline: none;
|
|
995
|
-
}
|
|
996
|
-
`;
|
|
997
|
-
var SendButton = import_styled_components8.default.button`
|
|
998
|
-
position: absolute;
|
|
999
|
-
bottom: 8px;
|
|
1000
|
-
right: 8px;
|
|
1001
|
-
width: 30px;
|
|
1002
|
-
height: 30px;
|
|
1003
|
-
border: none;
|
|
1004
|
-
border-radius: 12px;
|
|
1005
|
-
cursor: pointer;
|
|
1006
|
-
display: flex;
|
|
1007
|
-
align-items: center;
|
|
1008
|
-
justify-content: center;
|
|
1009
|
-
background: ${colors["brown-100"]};
|
|
1010
|
-
color: ${colors.white};
|
|
1011
|
-
transition: background-color 75ms;
|
|
1012
|
-
padding: 0;
|
|
1013
|
-
|
|
1014
|
-
&:disabled {
|
|
1015
|
-
background: ${colors["brown-50"]};
|
|
1016
|
-
cursor: default;
|
|
1017
|
-
}
|
|
1018
|
-
`;
|
|
1019
|
-
|
|
1020
|
-
// src/chat/chat-composer/chat-composer.tsx
|
|
1021
|
-
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1022
|
-
function ChatComposer({ placeholder = "Type a message..." }) {
|
|
1023
|
-
const { onSendMessage, isLoading, onStop } = useChatContext();
|
|
1024
|
-
const [value, setValue] = (0, import_react9.useState)("");
|
|
1025
|
-
const textAreaRef = (0, import_react9.useRef)(null);
|
|
1026
|
-
const isEmpty = value.trim().length === 0;
|
|
1027
|
-
const resizeTextArea = (0, import_react9.useCallback)(() => {
|
|
1028
|
-
const el = textAreaRef.current;
|
|
1029
|
-
if (!el) return;
|
|
1030
|
-
el.style.height = "auto";
|
|
1031
|
-
el.style.height = `${el.scrollHeight}px`;
|
|
1032
|
-
}, []);
|
|
1033
|
-
(0, import_react9.useEffect)(() => {
|
|
1034
|
-
resizeTextArea();
|
|
1035
|
-
}, [value, resizeTextArea]);
|
|
1036
|
-
(0, import_react9.useEffect)(() => {
|
|
1037
|
-
textAreaRef.current?.focus();
|
|
1038
|
-
}, []);
|
|
1039
|
-
const handleSend = (0, import_react9.useCallback)(() => {
|
|
1040
|
-
const trimmed = value.trim();
|
|
1041
|
-
if (!trimmed) return;
|
|
1042
|
-
onSendMessage(trimmed);
|
|
1043
|
-
setValue("");
|
|
1044
|
-
requestAnimationFrame(() => textAreaRef.current?.focus());
|
|
1045
|
-
}, [value, onSendMessage]);
|
|
1046
|
-
const handleKeyDown = (0, import_react9.useCallback)(
|
|
1047
|
-
(e) => {
|
|
1048
|
-
if (e.key === "Enter" && !e.shiftKey) {
|
|
1049
|
-
e.preventDefault();
|
|
1050
|
-
handleSend();
|
|
1051
|
-
}
|
|
1052
|
-
},
|
|
1053
|
-
[handleSend]
|
|
1054
|
-
);
|
|
1055
|
-
const handleChange = (0, import_react9.useCallback)((e) => {
|
|
1056
|
-
setValue(e.target.value);
|
|
1057
|
-
}, []);
|
|
1058
|
-
const handleButtonClick = (0, import_react9.useCallback)(() => {
|
|
1059
|
-
if (isLoading && onStop) {
|
|
1060
|
-
onStop();
|
|
1061
|
-
} else {
|
|
1062
|
-
handleSend();
|
|
1063
|
-
}
|
|
1064
|
-
}, [isLoading, onStop, handleSend]);
|
|
1065
|
-
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ComposerContainer, { children: [
|
|
1066
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1067
|
-
TextArea,
|
|
1068
|
-
{
|
|
1069
|
-
ref: textAreaRef,
|
|
1070
|
-
value,
|
|
1071
|
-
onChange: handleChange,
|
|
1072
|
-
onKeyDown: handleKeyDown,
|
|
1073
|
-
placeholder,
|
|
1074
|
-
rows: 1
|
|
1075
|
-
}
|
|
1076
|
-
),
|
|
1077
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1078
|
-
SendButton,
|
|
1079
|
-
{
|
|
1080
|
-
onClick: handleButtonClick,
|
|
1081
|
-
disabled: !isLoading && isEmpty,
|
|
1082
|
-
"aria-label": isLoading ? "Stop generating" : "Send message",
|
|
1083
|
-
children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { icon: IconPlayerStopFilled, size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { icon: IconArrowUp, size: 16 })
|
|
1084
|
-
}
|
|
1085
|
-
)
|
|
1086
|
-
] });
|
|
1087
|
-
}
|
|
1088
|
-
|
|
1089
|
-
// src/chat/chat-namespace.ts
|
|
1090
|
-
var Chat = {
|
|
1091
|
-
Root: ChatRoot,
|
|
1092
|
-
MessageList: ChatMessageList,
|
|
1093
|
-
Composer: ChatComposer
|
|
1094
|
-
};
|
|
1095
824
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1096
825
|
0 && (module.exports = {
|
|
1097
|
-
|
|
826
|
+
ChatContext,
|
|
827
|
+
ChatMessage,
|
|
828
|
+
useChatContext,
|
|
829
|
+
useCopyToClipboard
|
|
1098
830
|
});
|
|
1099
831
|
/*! Bundled license information:
|
|
1100
832
|
|
|
1101
833
|
@tabler/icons-react/dist/esm/defaultAttributes.mjs:
|
|
1102
834
|
@tabler/icons-react/dist/esm/createReactComponent.mjs:
|
|
1103
|
-
@tabler/icons-react/dist/esm/icons/IconArrowUp.mjs:
|
|
1104
835
|
@tabler/icons-react/dist/esm/icons/IconCheck.mjs:
|
|
1105
836
|
@tabler/icons-react/dist/esm/icons/IconCopy.mjs:
|
|
1106
837
|
@tabler/icons-react/dist/esm/icons/IconThumbDown.mjs:
|
|
1107
838
|
@tabler/icons-react/dist/esm/icons/IconThumbUp.mjs:
|
|
1108
|
-
@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.mjs:
|
|
1109
839
|
@tabler/icons-react/dist/esm/tabler-icons-react.mjs:
|
|
1110
840
|
(**
|
|
1111
841
|
* @license @tabler/icons-react v3.37.1 - MIT
|