@shapesos/clay 0.4.0 → 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 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
- Chat: () => Chat
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 import_styled_components2 = __toESM(require("styled-components"), 1);
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 = import_styled_components2.default.div`
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 import_jsx_runtime2 = require("react/jsx-runtime");
492
+ var import_jsx_runtime = require("react/jsx-runtime");
532
493
  function ChatMessageContent({ content }) {
533
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ContentWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default], children: content }) });
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 import_react7 = require("react");
498
+ var import_react6 = require("react");
538
499
 
539
500
  // node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
540
- var import_react3 = require("react");
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, import_react3.forwardRef)(
568
- ({ color = "currentColor", size = 24, stroke = 2, title, className, children, ...rest }, ref) => (0, import_react3.createElement)(
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, import_react3.createElement)("title", { key: "svg-title" }, title),
586
- ...iconNode.map(([tag, attrs]) => (0, import_react3.createElement)(tag, attrs)),
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 __iconNode2 = [["path", { "d": "M5 12l5 5l10 -10", "key": "svg-0" }]];
601
- var IconCheck = createReactComponent("outline", "check", "Check", __iconNode2);
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 __iconNode3 = [["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" }]];
605
- var IconCopy = createReactComponent("outline", "copy", "Copy", __iconNode3);
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 __iconNode4 = [["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" }]];
609
- var IconThumbDown = createReactComponent("outline", "thumb-down", "ThumbDown", __iconNode4);
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 __iconNode5 = [["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" }]];
613
- var IconThumbUp = createReactComponent("outline", "thumb-up", "ThumbUp", __iconNode5);
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 import_react5 = require("react");
572
+ // src/components/icon-button/icon-button.tsx
573
+ var import_react3 = require("react");
621
574
 
622
- // src/icon/icon.tsx
623
- var import_react4 = require("react");
575
+ // src/components/icon/icon.tsx
576
+ var import_react2 = require("react");
624
577
 
625
- // src/icon/icon-styles.ts
626
- var import_styled_components3 = __toESM(require("styled-components"), 1);
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.2,
629
- 14: 1.2,
630
- 16: 1.8,
631
- 18: 1.8,
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 = import_styled_components3.default.span`
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 import_jsx_runtime3 = require("react/jsx-runtime");
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, import_react4.forwardRef)(function Icon2({ icon: IconComponent, size = DEFAULT_SIZE, color, className, "aria-label": ariaLabel }, ref) {
651
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
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, import_jsx_runtime3.jsx)(IconComponent, { width: size, height: size, strokeWidth: getStrokeWidth(size) })
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 import_styled_components4 = __toESM(require("styled-components"), 1);
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 = import_styled_components4.default.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 import_jsx_runtime4 = require("react/jsx-runtime");
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, import_react5.forwardRef)(function IconButton2({ icon, size = "small", isSelected = false, disabled = false, onClick, className, "aria-label": ariaLabel }, ref) {
710
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
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, import_jsx_runtime4.jsx)(Icon, { icon, size: ICON_SIZE_BY_BUTTON_SIZE[size] })
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 import_react6 = require("react");
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, import_react6.useState)(false);
740
- const timeoutRef = (0, import_react6.useRef)(null);
741
- (0, import_react6.useEffect)(() => {
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, import_react6.useCallback)((text) => {
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 import_styled_components5 = __toESM(require("styled-components"), 1);
763
- var ActionsContainer = import_styled_components5.default.div`
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 import_jsx_runtime5 = require("react/jsx-runtime");
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, import_react7.useCallback)(() => {
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, import_react7.useCallback)(() => {
745
+ const handleThumbUp = (0, import_react6.useCallback)(() => {
782
746
  onThumbUpClick?.(messageId, isHelpful === true ? null : true);
783
747
  }, [messageId, isHelpful, onThumbUpClick]);
784
- const handleThumbDown = (0, import_react7.useCallback)(() => {
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, import_jsx_runtime5.jsxs)(ActionsContainer, { children: [
790
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
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, import_jsx_runtime5.jsx)(
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, import_jsx_runtime5.jsx)(
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 import_styled_components6 = __toESM(require("styled-components"), 1);
821
- var MessageRow = import_styled_components6.default.div`
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 = import_styled_components6.default.div`
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 = import_styled_components6.default.div`
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 import_jsx_runtime6 = require("react/jsx-runtime");
809
+ var import_jsx_runtime5 = require("react/jsx-runtime");
846
810
  function ChatMessage({ message }) {
847
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageRow, { $role: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(MessageContainer, { $role: message.role, children: [
848
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageBubble, { $role: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChatMessageContent, { content: message.content }) }),
849
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
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
- Chat
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