@aleph-alpha/chat-kit 5.2.0 → 5.3.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.
Files changed (37) hide show
  1. package/dist/{CkHistory.vue_vue_type_script_setup_true_lang-BxzHdcxY.js → CkHistory.vue_vue_type_script_setup_true_lang-BcYJmbCd.js} +152 -87
  2. package/dist/chat-kit.css +3 -3
  3. package/dist/components/base/CkEditableUserMessage/CkEditableUserMessage.stories.d.ts +12 -0
  4. package/dist/components/base/CkEditableUserMessage/CkEditableUserMessage.stories.d.ts.map +1 -0
  5. package/dist/components/base/CkEditableUserMessage/CkEditableUserMessage.vue.d.ts +22 -0
  6. package/dist/components/base/CkEditableUserMessage/CkEditableUserMessage.vue.d.ts.map +1 -0
  7. package/dist/components/base/CkEditableUserMessage/index.d.ts +3 -0
  8. package/dist/components/base/CkEditableUserMessage/index.d.ts.map +1 -0
  9. package/dist/components/base/CkEditableUserMessage/types.d.ts +30 -0
  10. package/dist/components/base/CkEditableUserMessage/types.d.ts.map +1 -0
  11. package/dist/components/base/CkUserMessage/CkUserMessage.vue.d.ts.map +1 -1
  12. package/dist/components/base/CkUserMessage/types.d.ts +4 -1
  13. package/dist/components/base/CkUserMessage/types.d.ts.map +1 -1
  14. package/dist/components/base/index.d.ts +2 -0
  15. package/dist/components/base/index.d.ts.map +1 -1
  16. package/dist/components/index.d.ts +2 -2
  17. package/dist/components/index.d.ts.map +1 -1
  18. package/dist/components/index.js +21 -20
  19. package/dist/handlers/index.js +1 -1
  20. package/dist/handlers/useChatKitLabels.d.ts +4 -0
  21. package/dist/handlers/useChatKitLabels.d.ts.map +1 -1
  22. package/dist/index.d.ts +2 -2
  23. package/dist/index.d.ts.map +1 -1
  24. package/dist/index.js +23 -22
  25. package/dist/{useChatKitLabels-zMFV7aEz.js → useChatKitLabels-DLy0BFx8.js} +2 -0
  26. package/package.json +2 -2
  27. package/src/components/base/CkEditableUserMessage/CkEditableUserMessage.spec.ts +53 -0
  28. package/src/components/base/CkEditableUserMessage/CkEditableUserMessage.stories.ts +53 -0
  29. package/src/components/base/CkEditableUserMessage/CkEditableUserMessage.vue +58 -0
  30. package/src/components/base/CkEditableUserMessage/index.ts +5 -0
  31. package/src/components/base/CkEditableUserMessage/types.ts +30 -0
  32. package/src/components/base/CkUserMessage/CkUserMessage.vue +19 -30
  33. package/src/components/base/CkUserMessage/types.ts +4 -1
  34. package/src/components/base/index.ts +5 -0
  35. package/src/components/index.ts +3 -0
  36. package/src/handlers/useChatKitLabels.ts +6 -0
  37. package/src/index.ts +3 -0
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, openBlock, createBlock, unref, createElementBlock, createElementVNode, normalizeClass, renderSlot, createCommentVNode, mergeProps, withCtx, computed, createVNode, toDisplayString, ref, onBeforeUnmount, onMounted, nextTick, onUnmounted, watch, Fragment, renderList, normalizeStyle, Transition, createStaticVNode, Teleport, withModifiers, toValue, h, toRefs, useId, createTextVNode, useAttrs, useSlots, resolveDynamicComponent, useTemplateRef, onUpdated, createSlots, normalizeProps, guardReactiveProps, Comment, Text } from "vue";
2
- import { UiIcon, UiButton, UiFileType, UiPopover, UiPopoverTrigger, UiPopoverContent, UiTooltip, formatFileSize, UiDialog, UiDialogContent, UiDialogDescription, UiFieldLabel, UiToggleGroup, UiToggleGroupItem, UiField, UiTextarea, UiFileItem, UiProgress, Primitive, UiAvatar, UiAvatarImage, UiSpinner, UiAvatarFallback, UiSidebarPopoverMenu, UiSidebarPopoverMenuItem } from "@aleph-alpha/ui-library";
3
- import { u as useChatKitLabels, d as defaultChatKitLabels, r as remarkCitations, a as useMarkdownParser } from "./useChatKitLabels-zMFV7aEz.js";
2
+ import { UiIcon, UiButton, UiFileType, UiPopover, UiPopoverTrigger, UiPopoverContent, UiTooltip, formatFileSize, UiDialog, UiDialogContent, UiDialogDescription, UiFieldLabel, UiToggleGroup, UiToggleGroupItem, UiField, UiTextarea, UiFileItem, UiProgress, Primitive, UiFloatActions, UiFloatActionItems, UiAvatar, UiAvatarImage, UiSpinner, UiAvatarFallback, UiSidebarPopoverMenu, UiSidebarPopoverMenuItem } from "@aleph-alpha/ui-library";
3
+ import { u as useChatKitLabels, d as defaultChatKitLabels, r as remarkCitations, a as useMarkdownParser } from "./useChatKitLabels-DLy0BFx8.js";
4
4
  const MINUTE = 60;
5
5
  const HOUR = 60 * MINUTE;
6
6
  const DAY = 24 * HOUR;
@@ -36,7 +36,7 @@ function formatRelativeTime(unixSeconds, nowSeconds = Math.floor(Date.now() / 1e
36
36
  const years = Math.floor(delta / YEAR);
37
37
  return years === 1 ? "1 year ago" : `${years} years ago`;
38
38
  }
39
- const _sfc_main$s = /* @__PURE__ */ defineComponent({
39
+ const _sfc_main$t = /* @__PURE__ */ defineComponent({
40
40
  ...{ name: "CkSendIcon" },
41
41
  __name: "CkSendIcon",
42
42
  setup(__props) {
@@ -52,7 +52,7 @@ const _hoisted_1$h = {
52
52
  viewBox: "0 0 16 16",
53
53
  fill: "none"
54
54
  };
55
- const _sfc_main$r = /* @__PURE__ */ defineComponent({
55
+ const _sfc_main$s = /* @__PURE__ */ defineComponent({
56
56
  ...{ name: "CkStopIcon" },
57
57
  __name: "CkStopIcon",
58
58
  setup(__props) {
@@ -76,7 +76,7 @@ const _hoisted_3$9 = {
76
76
  key: 1,
77
77
  class: "flex items-center gap-4"
78
78
  };
79
- const _sfc_main$q = /* @__PURE__ */ defineComponent({
79
+ const _sfc_main$r = /* @__PURE__ */ defineComponent({
80
80
  ...{ name: "CkAgentMessage" },
81
81
  __name: "CkAgentMessage",
82
82
  props: {
@@ -114,7 +114,7 @@ const _hoisted_3$8 = {
114
114
  "data-testid": "ck-agent-message-header-activity",
115
115
  class: "flex flex-shrink-0 items-center"
116
116
  };
117
- const _sfc_main$p = /* @__PURE__ */ defineComponent({
117
+ const _sfc_main$q = /* @__PURE__ */ defineComponent({
118
118
  ...{ name: "CkAgentMessageHeader" },
119
119
  __name: "CkAgentMessageHeader",
120
120
  setup(__props) {
@@ -139,7 +139,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
139
139
  };
140
140
  }
141
141
  });
142
- const _sfc_main$o = /* @__PURE__ */ defineComponent({
142
+ const _sfc_main$p = /* @__PURE__ */ defineComponent({
143
143
  ...{
144
144
  name: "CkHeaderActivityButton"
145
145
  },
@@ -189,7 +189,7 @@ const _hoisted_5$4 = {
189
189
  key: 0,
190
190
  class: "text-sm leading-5 text-content-on-surface-muted"
191
191
  };
192
- const _sfc_main$n = /* @__PURE__ */ defineComponent({
192
+ const _sfc_main$o = /* @__PURE__ */ defineComponent({
193
193
  ...{
194
194
  name: "CkCitationCard"
195
195
  },
@@ -251,7 +251,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
251
251
  });
252
252
  const _hoisted_1$d = ["aria-label"];
253
253
  const CLOSE_DELAY_MS = 80;
254
- const _sfc_main$m = /* @__PURE__ */ defineComponent({
254
+ const _sfc_main$n = /* @__PURE__ */ defineComponent({
255
255
  ...{
256
256
  name: "CkCitation"
257
257
  },
@@ -353,7 +353,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
353
353
  onFocusout: onContentFocusOut
354
354
  }, {
355
355
  default: withCtx(() => [
356
- createVNode(unref(_sfc_main$n), {
356
+ createVNode(unref(_sfc_main$o), {
357
357
  "file-name": __props.fileName,
358
358
  snippet: __props.snippet,
359
359
  "location-label": __props.locationLabel,
@@ -377,7 +377,7 @@ const _export_sfc = (sfc, props) => {
377
377
  }
378
378
  return target;
379
379
  };
380
- const CkCitation = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-73025da4"]]);
380
+ const CkCitation = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-73025da4"]]);
381
381
  const _hoisted_1$c = ["data-message-row"];
382
382
  const _hoisted_2$7 = {
383
383
  key: 0,
@@ -387,7 +387,7 @@ const _hoisted_3$6 = {
387
387
  key: 1,
388
388
  class: "flex min-w-0 justify-start"
389
389
  };
390
- const _sfc_main$l = /* @__PURE__ */ defineComponent({
390
+ const _sfc_main$m = /* @__PURE__ */ defineComponent({
391
391
  ...{ name: "CkConversationLayout" },
392
392
  __name: "CkConversationLayout",
393
393
  props: {
@@ -544,7 +544,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
544
544
  };
545
545
  }
546
546
  });
547
- const _sfc_main$k = /* @__PURE__ */ defineComponent({
547
+ const _sfc_main$l = /* @__PURE__ */ defineComponent({
548
548
  ...{
549
549
  name: "CkMessageButton"
550
550
  },
@@ -572,7 +572,7 @@ const _hoisted_1$b = {
572
572
  class: "sr-only",
573
573
  "aria-live": "polite"
574
574
  };
575
- const _sfc_main$j = /* @__PURE__ */ defineComponent({
575
+ const _sfc_main$k = /* @__PURE__ */ defineComponent({
576
576
  ...{
577
577
  name: "CkCopyMessageButton"
578
578
  },
@@ -629,7 +629,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
629
629
  "delay-duration": 0
630
630
  }, {
631
631
  default: withCtx(() => [
632
- createVNode(unref(_sfc_main$k), mergeProps({ ariaLabel: copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy }, {
632
+ createVNode(unref(_sfc_main$l), mergeProps({ ariaLabel: copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy }, {
633
633
  disabled: __props.disabled,
634
634
  onClick: handleClick
635
635
  }), {
@@ -663,7 +663,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
663
663
  };
664
664
  }
665
665
  });
666
- const CkCopyMessageButton = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-ba2e5f32"]]);
666
+ const CkCopyMessageButton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-ba2e5f32"]]);
667
667
  const _hoisted_1$a = {
668
668
  width: "208",
669
669
  height: "144",
@@ -673,7 +673,7 @@ const _hoisted_1$a = {
673
673
  "aria-hidden": "true",
674
674
  focusable: "false"
675
675
  };
676
- const _sfc_main$i = /* @__PURE__ */ defineComponent({
676
+ const _sfc_main$j = /* @__PURE__ */ defineComponent({
677
677
  ...{ name: "CkDropZoneIllustration" },
678
678
  __name: "CkDropZoneIllustration",
679
679
  setup(__props) {
@@ -698,7 +698,7 @@ const _hoisted_6$2 = {
698
698
  class: "pointer-events-none fixed bottom-6 left-1/2 z-50 max-w-[36rem] -translate-x-1/2 flex list-inside list-disc flex-col gap-1 rounded-md border border-border-surface-default bg-background-surface-default p-3 text-sm text-content-on-surface-secondary",
699
699
  role: "alert"
700
700
  };
701
- const _sfc_main$h = /* @__PURE__ */ defineComponent({
701
+ const _sfc_main$i = /* @__PURE__ */ defineComponent({
702
702
  ...{
703
703
  name: "CkDropZoneOverlay"
704
704
  },
@@ -861,7 +861,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
861
861
  }, [
862
862
  createElementVNode("div", _hoisted_2$6, [
863
863
  renderSlot(_ctx.$slots, "default", {}, () => [
864
- createVNode(_sfc_main$i, { class: "h-36 w-52" }),
864
+ createVNode(_sfc_main$j, { class: "h-36 w-52" }),
865
865
  createElementVNode("div", _hoisted_3$5, [
866
866
  createElementVNode("p", _hoisted_4$5, toDisplayString(resolvedHeading.value), 1),
867
867
  __props.hint ? (openBlock(), createElementBlock("p", _hoisted_5$3, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
@@ -886,9 +886,9 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
886
886
  };
887
887
  }
888
888
  });
889
- const CkDropZoneOverlay = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-54119668"]]);
889
+ const CkDropZoneOverlay = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-54119668"]]);
890
890
  const _hoisted_1$8 = ["aria-label"];
891
- const _sfc_main$g = /* @__PURE__ */ defineComponent({
891
+ const _sfc_main$h = /* @__PURE__ */ defineComponent({
892
892
  ...{
893
893
  name: "CkFeedbackButton"
894
894
  },
@@ -943,7 +943,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
943
943
  "delay-duration": 0
944
944
  }, {
945
945
  default: withCtx(() => [
946
- createVNode(unref(_sfc_main$k), mergeProps({ ariaLabel: thumbsUpLabel.value }, {
946
+ createVNode(unref(_sfc_main$l), mergeProps({ ariaLabel: thumbsUpLabel.value }, {
947
947
  "aria-pressed": isUpSelected.value,
948
948
  "aria-disabled": __props.locked || void 0,
949
949
  disabled: isUpDisabled.value,
@@ -973,7 +973,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
973
973
  "delay-duration": 0
974
974
  }, {
975
975
  default: withCtx(() => [
976
- createVNode(unref(_sfc_main$k), mergeProps({ ariaLabel: thumbsDownLabel.value }, {
976
+ createVNode(unref(_sfc_main$l), mergeProps({ ariaLabel: thumbsDownLabel.value }, {
977
977
  "aria-pressed": isDownSelected.value,
978
978
  "aria-disabled": __props.locked || void 0,
979
979
  disabled: isDownDisabled.value,
@@ -1000,7 +1000,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
1000
1000
  };
1001
1001
  }
1002
1002
  });
1003
- const CkFeedbackButton = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-cf3d46b6"]]);
1003
+ const CkFeedbackButton = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-cf3d46b6"]]);
1004
1004
  function useCitationRendering(citations, onOpenSource) {
1005
1005
  const sourcesByIndex = computed(
1006
1006
  () => new Map(
@@ -1083,7 +1083,7 @@ function domToVNode(node, ctx) {
1083
1083
  }
1084
1084
  return vnode;
1085
1085
  }
1086
- const _sfc_main$f = defineComponent({
1086
+ const _sfc_main$g = defineComponent({
1087
1087
  name: "CkMarkdownRenderer",
1088
1088
  props: {
1089
1089
  content: { type: String, required: true },
@@ -1151,7 +1151,7 @@ const _hoisted_4$4 = {
1151
1151
  class: "self-end text-sm text-content-on-surface-muted tabular-nums",
1152
1152
  "aria-live": "polite"
1153
1153
  };
1154
- const _sfc_main$e = /* @__PURE__ */ defineComponent({
1154
+ const _sfc_main$f = /* @__PURE__ */ defineComponent({
1155
1155
  ...{
1156
1156
  name: "CkFeedbackDialog"
1157
1157
  },
@@ -1312,7 +1312,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
1312
1312
  _: 1
1313
1313
  }),
1314
1314
  createElementVNode("div", _hoisted_2$5, [
1315
- createVNode(unref(_sfc_main$f), { content: __props.responseText }, null, 8, ["content"])
1315
+ createVNode(unref(_sfc_main$g), { content: __props.responseText }, null, 8, ["content"])
1316
1316
  ])
1317
1317
  ])) : createCommentVNode("", true),
1318
1318
  createElementVNode("section", _hoisted_3$4, [
@@ -1378,8 +1378,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
1378
1378
  };
1379
1379
  }
1380
1380
  });
1381
- const CkFeedbackDialog = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-12dfee8a"]]);
1382
- const _sfc_main$d = /* @__PURE__ */ defineComponent({
1381
+ const CkFeedbackDialog = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-12dfee8a"]]);
1382
+ const _sfc_main$e = /* @__PURE__ */ defineComponent({
1383
1383
  ...{
1384
1384
  name: "CkFileItemRow",
1385
1385
  inheritAttrs: false
@@ -1440,7 +1440,7 @@ const _hoisted_6$1 = {
1440
1440
  const _hoisted_7$1 = ["aria-label"];
1441
1441
  const _hoisted_8$1 = ["onClick"];
1442
1442
  const ITEM_GAP = 8;
1443
- const _sfc_main$c = /* @__PURE__ */ defineComponent({
1443
+ const _sfc_main$d = /* @__PURE__ */ defineComponent({
1444
1444
  ...{
1445
1445
  name: "CkFileItemsList"
1446
1446
  },
@@ -1562,7 +1562,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
1562
1562
  }),
1563
1563
  onClick: ($event) => handleRowClick(file, $event)
1564
1564
  }, [
1565
- createVNode(_sfc_main$d, {
1565
+ createVNode(_sfc_main$e, {
1566
1566
  file,
1567
1567
  size: __props.size,
1568
1568
  "is-removable": __props.isRemovable,
@@ -1642,7 +1642,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
1642
1642
  style: normalizeStyle({ maxWidth: `${__props.maxItemWidth}px` }),
1643
1643
  onClick: ($event) => handleRowClick(file, $event)
1644
1644
  }, [
1645
- createVNode(_sfc_main$d, {
1645
+ createVNode(_sfc_main$e, {
1646
1646
  file,
1647
1647
  size: __props.size,
1648
1648
  "is-removable": __props.isRemovable,
@@ -1691,7 +1691,7 @@ const _hoisted_7 = {
1691
1691
  const _hoisted_8 = ["aria-label"];
1692
1692
  const _hoisted_9 = ["aria-label"];
1693
1693
  const _hoisted_10 = ["aria-label"];
1694
- const _sfc_main$b = /* @__PURE__ */ defineComponent({
1694
+ const _sfc_main$c = /* @__PURE__ */ defineComponent({
1695
1695
  ...{
1696
1696
  name: "CkHistoryItem",
1697
1697
  inheritAttrs: false
@@ -1932,7 +1932,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
1932
1932
  }
1933
1933
  });
1934
1934
  const baseClass = "flex w-full min-w-0 flex-col p-2";
1935
- const _sfc_main$a = /* @__PURE__ */ defineComponent({
1935
+ const _sfc_main$b = /* @__PURE__ */ defineComponent({
1936
1936
  ...{
1937
1937
  name: "CkHistoryWrapper",
1938
1938
  inheritAttrs: false
@@ -1967,7 +1967,7 @@ const _hoisted_2$2 = { class: "min-w-0 max-w-[10rem] truncate" };
1967
1967
  const _hoisted_3$1 = ["aria-label"];
1968
1968
  const _hoisted_4$1 = ["aria-selected", "onClick"];
1969
1969
  const _hoisted_5 = { class: "min-w-0 flex-1 truncate" };
1970
- const _sfc_main$9 = /* @__PURE__ */ defineComponent({
1970
+ const _sfc_main$a = /* @__PURE__ */ defineComponent({
1971
1971
  ...{ name: "CkModelSelector" },
1972
1972
  __name: "CkModelSelector",
1973
1973
  props: {
@@ -2075,7 +2075,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
2075
2075
  };
2076
2076
  }
2077
2077
  });
2078
- const _sfc_main$8 = /* @__PURE__ */ defineComponent({
2078
+ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
2079
2079
  ...{ name: "CkPromptSendButton" },
2080
2080
  __name: "CkPromptSendButton",
2081
2081
  props: {
@@ -2101,7 +2101,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
2101
2101
  };
2102
2102
  }
2103
2103
  });
2104
- const _sfc_main$7 = /* @__PURE__ */ defineComponent({
2104
+ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
2105
2105
  ...{ name: "CkPromptMenuButton" },
2106
2106
  __name: "CkPromptMenuButton",
2107
2107
  props: {
@@ -2131,7 +2131,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
2131
2131
  };
2132
2132
  }
2133
2133
  });
2134
- const _sfc_main$6 = /* @__PURE__ */ defineComponent({
2134
+ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
2135
2135
  ...{ name: "CkPromptStopButton" },
2136
2136
  __name: "CkPromptStopButton",
2137
2137
  props: {
@@ -2165,7 +2165,7 @@ const _hoisted_2$1 = {
2165
2165
  const _hoisted_3 = ["for"];
2166
2166
  const _hoisted_4 = ["id", "value", "placeholder", "disabled"];
2167
2167
  const MAX_LINES = 6;
2168
- const _sfc_main$5 = /* @__PURE__ */ defineComponent({
2168
+ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
2169
2169
  ...{ name: "CkPromptInput" },
2170
2170
  __name: "CkPromptInput",
2171
2171
  props: {
@@ -2316,12 +2316,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
2316
2316
  };
2317
2317
  }
2318
2318
  });
2319
- const CkPromptInput = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-c6b78cec"]]);
2319
+ const CkPromptInput = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-c6b78cec"]]);
2320
2320
  const _hoisted_1$2 = {
2321
2321
  key: 0,
2322
2322
  class: "text-center text-content-on-surface-muted text-xs font-normal leading-4"
2323
2323
  };
2324
- const _sfc_main$4 = /* @__PURE__ */ defineComponent({
2324
+ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
2325
2325
  ...{ name: "CkPromptInputDisclaimer" },
2326
2326
  __name: "CkPromptInputDisclaimer",
2327
2327
  props: {
@@ -2337,7 +2337,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
2337
2337
  };
2338
2338
  }
2339
2339
  });
2340
- const _sfc_main$3 = /* @__PURE__ */ defineComponent({
2340
+ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
2341
2341
  ...{
2342
2342
  name: "CkRegenerateMessageButton"
2343
2343
  },
@@ -2364,7 +2364,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
2364
2364
  "delay-duration": 0
2365
2365
  }, {
2366
2366
  default: withCtx(() => [
2367
- createVNode(unref(_sfc_main$k), mergeProps({ ariaLabel: __props.ariaLabel }, {
2367
+ createVNode(unref(_sfc_main$l), mergeProps({ ariaLabel: __props.ariaLabel }, {
2368
2368
  disabled: __props.disabled,
2369
2369
  onClick: handleClick
2370
2370
  }), {
@@ -2385,7 +2385,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
2385
2385
  });
2386
2386
  const _hoisted_1$1 = { class: "inline-flex max-w-[536px] flex-col items-end justify-start gap-1" };
2387
2387
  const _hoisted_2 = ["aria-expanded"];
2388
- const _sfc_main$2 = /* @__PURE__ */ defineComponent({
2388
+ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
2389
2389
  ...{ name: "CkUserMessage" },
2390
2390
  __name: "CkUserMessage",
2391
2391
  props: {
@@ -2395,12 +2395,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
2395
2395
  setup(__props) {
2396
2396
  const props = __props;
2397
2397
  const labels = useChatKitLabels();
2398
- const showMoreLabel = computed(
2399
- () => labels.value.userMessageShowMore ?? defaultChatKitLabels.userMessageShowMore
2400
- );
2401
- const showLessLabel = computed(
2402
- () => labels.value.userMessageShowLess ?? defaultChatKitLabels.userMessageShowLess
2403
- );
2398
+ const showMoreLabel = computed(() => labels.value.userMessageShowMore);
2399
+ const showLessLabel = computed(() => labels.value.userMessageShowLess);
2404
2400
  const clampEnabled = computed(() => (props.collapsedLines ?? 0) > 0);
2405
2401
  const contentRef = ref(null);
2406
2402
  const expanded = ref(false);
@@ -2414,13 +2410,20 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
2414
2410
  expanded.value = !expanded.value;
2415
2411
  }
2416
2412
  let resizeObserver;
2417
- onMounted(() => {
2418
- nextTick(measure);
2419
- if (typeof ResizeObserver !== "undefined") {
2420
- resizeObserver = new ResizeObserver(() => measure());
2421
- if (contentRef.value) resizeObserver.observe(contentRef.value);
2422
- }
2423
- });
2413
+ function observeContent(el) {
2414
+ if (typeof ResizeObserver === "undefined") return;
2415
+ if (!resizeObserver) resizeObserver = new ResizeObserver(() => measure());
2416
+ resizeObserver.disconnect();
2417
+ if (el) resizeObserver.observe(el);
2418
+ }
2419
+ watch(
2420
+ contentRef,
2421
+ (el) => {
2422
+ observeContent(el);
2423
+ nextTick(measure);
2424
+ },
2425
+ { flush: "post" }
2426
+ );
2424
2427
  onBeforeUnmount(() => resizeObserver?.disconnect());
2425
2428
  watch([() => props.message, () => props.collapsedLines], () => {
2426
2429
  expanded.value = false;
@@ -2454,7 +2457,68 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
2454
2457
  };
2455
2458
  }
2456
2459
  });
2457
- const CkUserMessage = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-c759a863"]]);
2460
+ const CkUserMessage = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-4ca9ee1b"]]);
2461
+ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
2462
+ ...{ name: "CkEditableUserMessage" },
2463
+ __name: "CkEditableUserMessage",
2464
+ props: {
2465
+ message: { default: void 0 },
2466
+ collapsedLines: { default: 0 }
2467
+ },
2468
+ emits: ["edit"],
2469
+ setup(__props, { emit: __emit }) {
2470
+ const emit = __emit;
2471
+ const slots = useSlots();
2472
+ const labels = useChatKitLabels();
2473
+ const actionsLabel = computed(() => labels.value.userMessageActions);
2474
+ const editActionLabel = computed(() => labels.value.userMessageEditAction);
2475
+ return (_ctx, _cache) => {
2476
+ return openBlock(), createBlock(unref(UiFloatActions), {
2477
+ trigger: "hover",
2478
+ placement: "left",
2479
+ offset: 4,
2480
+ class: "max-w-full"
2481
+ }, {
2482
+ container: withCtx(() => [
2483
+ createVNode(unref(CkUserMessage), {
2484
+ message: __props.message,
2485
+ "collapsed-lines": __props.collapsedLines
2486
+ }, createSlots({ _: 2 }, [
2487
+ unref(slots).default ? {
2488
+ name: "default",
2489
+ fn: withCtx(() => [
2490
+ renderSlot(_ctx.$slots, "default")
2491
+ ]),
2492
+ key: "0"
2493
+ } : void 0
2494
+ ]), 1032, ["message", "collapsed-lines"])
2495
+ ]),
2496
+ action: withCtx(() => [
2497
+ createVNode(unref(UiFloatActionItems), { "aria-label": actionsLabel.value }, {
2498
+ default: withCtx(() => [
2499
+ createVNode(unref(UiFloatActionItems), {
2500
+ type: "button",
2501
+ "aria-label": editActionLabel.value,
2502
+ onClick: _cache[0] || (_cache[0] = ($event) => emit("edit"))
2503
+ }, {
2504
+ default: withCtx(() => [
2505
+ createVNode(unref(UiIcon), {
2506
+ name: "pencil",
2507
+ size: 16,
2508
+ "aria-hidden": "true"
2509
+ })
2510
+ ]),
2511
+ _: 1
2512
+ }, 8, ["aria-label"])
2513
+ ]),
2514
+ _: 1
2515
+ }, 8, ["aria-label"])
2516
+ ]),
2517
+ _: 3
2518
+ });
2519
+ };
2520
+ }
2521
+ });
2458
2522
  const _hoisted_1 = {
2459
2523
  key: 1,
2460
2524
  class: "flex size-8 shrink-0 items-center justify-center rounded-2xl bg-background-surface-muted-subtle"
@@ -2500,7 +2564,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
2500
2564
  return slot ? slot({ message }).some((vnode) => !isVNodeEmpty(vnode)) : false;
2501
2565
  }
2502
2566
  return (_ctx, _cache) => {
2503
- return openBlock(), createBlock(_sfc_main$l, { messages: __props.messages }, {
2567
+ return openBlock(), createBlock(_sfc_main$m, { messages: __props.messages }, {
2504
2568
  "user-message": withCtx(({ message }) => [
2505
2569
  createElementVNode("div", {
2506
2570
  class: normalizeClass({ "ml-8": hasIcon.value })
@@ -2519,7 +2583,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
2519
2583
  ]),
2520
2584
  "agent-message": withCtx(({ message }) => [
2521
2585
  renderSlot(_ctx.$slots, "agent-message", { message }, () => [
2522
- createVNode(_sfc_main$q, {
2586
+ createVNode(_sfc_main$r, {
2523
2587
  "bottom-separator": message.id !== lastAgentMessageId.value
2524
2588
  }, createSlots({
2525
2589
  footer: withCtx(() => [
@@ -2534,7 +2598,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
2534
2598
  ]),
2535
2599
  default: withCtx(() => [
2536
2600
  renderSlot(_ctx.$slots, "agent-message-content", { message }, () => [
2537
- createVNode(_sfc_main$f, {
2601
+ createVNode(_sfc_main$g, {
2538
2602
  content: getMessageText(message),
2539
2603
  classes: __props.agentMarkdownClasses
2540
2604
  }, createSlots({ _: 2 }, [
@@ -2554,7 +2618,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
2554
2618
  name: "header",
2555
2619
  fn: withCtx(() => [
2556
2620
  renderSlot(_ctx.$slots, "agent-message-header", { message }, () => [
2557
- createVNode(_sfc_main$p, null, createSlots({
2621
+ createVNode(_sfc_main$q, null, createSlots({
2558
2622
  default: withCtx(() => [
2559
2623
  renderSlot(_ctx.$slots, "agent-message-header-content", { message })
2560
2624
  ]),
@@ -2679,7 +2743,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
2679
2743
  }
2680
2744
  return (_ctx, _cache) => {
2681
2745
  return openBlock(), createElementBlock("div", null, [
2682
- createVNode(_sfc_main$a, {
2746
+ createVNode(_sfc_main$b, {
2683
2747
  class: normalizeClass(isExpanded.value && props.maxHeight ? "overflow-y-auto" : void 0),
2684
2748
  style: normalizeStyle(
2685
2749
  isExpanded.value && props.maxHeight ? { maxHeight: props.maxHeight } : void 0
@@ -2698,7 +2762,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
2698
2762
  edit: () => emit("edit", conversation),
2699
2763
  delete: () => emit("delete", conversation)
2700
2764
  }, () => [
2701
- createVNode(_sfc_main$b, {
2765
+ createVNode(_sfc_main$c, {
2702
2766
  as: "a",
2703
2767
  href: hrefFor(conversation),
2704
2768
  "is-active": conversation.id === props.activeId,
@@ -2765,32 +2829,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
2765
2829
  }
2766
2830
  });
2767
2831
  export {
2832
+ formatRelativeTime as A,
2768
2833
  CkCitation as C,
2769
- _sfc_main$q as _,
2770
- _sfc_main$p as a,
2771
- _sfc_main$n as b,
2834
+ _sfc_main$r as _,
2835
+ _sfc_main$q as a,
2836
+ _sfc_main$o as b,
2772
2837
  _sfc_main$1 as c,
2773
- _sfc_main$l as d,
2838
+ _sfc_main$m as d,
2774
2839
  CkCopyMessageButton as e,
2775
2840
  CkDropZoneOverlay as f,
2776
- CkFeedbackButton as g,
2777
- CkFeedbackDialog as h,
2778
- _sfc_main$c as i,
2779
- _sfc_main$o as j,
2780
- _sfc_main as k,
2781
- _sfc_main$b as l,
2782
- _sfc_main$a as m,
2783
- _sfc_main$f as n,
2784
- _sfc_main$k as o,
2785
- _sfc_main$9 as p,
2786
- CkPromptInput as q,
2787
- _sfc_main$4 as r,
2788
- _sfc_main$7 as s,
2841
+ _sfc_main$2 as g,
2842
+ CkFeedbackButton as h,
2843
+ CkFeedbackDialog as i,
2844
+ _sfc_main$d as j,
2845
+ _sfc_main$p as k,
2846
+ _sfc_main as l,
2847
+ _sfc_main$c as m,
2848
+ _sfc_main$b as n,
2849
+ _sfc_main$g as o,
2850
+ _sfc_main$l as p,
2851
+ _sfc_main$a as q,
2852
+ CkPromptInput as r,
2853
+ _sfc_main$5 as s,
2789
2854
  _sfc_main$8 as t,
2790
- _sfc_main$6 as u,
2791
- _sfc_main$3 as v,
2792
- _sfc_main$s as w,
2793
- _sfc_main$r as x,
2794
- CkUserMessage as y,
2795
- formatRelativeTime as z
2855
+ _sfc_main$9 as u,
2856
+ _sfc_main$7 as v,
2857
+ _sfc_main$4 as w,
2858
+ _sfc_main$t as x,
2859
+ _sfc_main$s as y,
2860
+ CkUserMessage as z
2796
2861
  };
package/dist/chat-kit.css CHANGED
@@ -138,20 +138,20 @@
138
138
 
139
139
  /* Floating pill per design — the inset white + soft drop shadow aren't
140
140
  expressible with the design-system shadow utilities, so set them here. */
141
- .ck-user-message__toggle[data-v-c759a863] {
141
+ .ck-user-message__toggle[data-v-4ca9ee1b] {
142
142
  box-shadow:
143
143
  0 2px 2px 0 rgba(0, 0, 0, 0.05),
144
144
  0 0 4px 0 #fff inset;
145
145
  }
146
146
 
147
147
  /* text-lg has a 1.75rem (28px) line-height; clamp height = lines × line-height. */
148
- .ck-user-message__content--clamped[data-v-c759a863] {
148
+ .ck-user-message__content--clamped[data-v-4ca9ee1b] {
149
149
  max-height: calc(var(--ck-collapsed-lines) * 1.75rem);
150
150
  overflow: hidden;
151
151
  }
152
152
 
153
153
  /* Fade the last visible line to low opacity. */
154
- .ck-user-message__content--faded[data-v-c759a863] {
154
+ .ck-user-message__content--faded[data-v-4ca9ee1b] {
155
155
  -webkit-mask-image: linear-gradient(
156
156
  to bottom,
157
157
  #000 calc(100% - 1.75rem),
@@ -0,0 +1,12 @@
1
+ import CkEditableUserMessage from './CkEditableUserMessage.vue';
2
+ import type { Meta, StoryObj } from '@storybook/vue3-vite';
3
+ declare const meta: Meta<typeof CkEditableUserMessage>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof meta>;
6
+ /**
7
+ * Editable message. Hover or keyboard-focus the message to reveal a floating
8
+ * toolbar with an edit action; activating it emits `edit`. The consumer owns
9
+ * the editing flow (e.g. swapping in an inline editor).
10
+ */
11
+ export declare const Default: Story;
12
+ //# sourceMappingURL=CkEditableUserMessage.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CkEditableUserMessage.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkEditableUserMessage/CkEditableUserMessage.stories.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,qBAAqB,CAsB5C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAcnC;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
@@ -0,0 +1,22 @@
1
+ import type { CkEditableUserMessageProps } from './types';
2
+ declare var __VLS_16: {};
3
+ type __VLS_Slots = {} & {
4
+ default?: (props: typeof __VLS_16) => any;
5
+ };
6
+ declare const __VLS_base: import("vue").DefineComponent<CkEditableUserMessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
7
+ edit: () => any;
8
+ }, string, import("vue").PublicProps, Readonly<CkEditableUserMessageProps> & Readonly<{
9
+ onEdit?: (() => any) | undefined;
10
+ }>, {
11
+ message: string;
12
+ collapsedLines: number;
13
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
14
+ declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
15
+ declare const _default: typeof __VLS_export;
16
+ export default _default;
17
+ type __VLS_WithSlots<T, S> = T & {
18
+ new (): {
19
+ $slots: S;
20
+ };
21
+ };
22
+ //# sourceMappingURL=CkEditableUserMessage.vue.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CkEditableUserMessage.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkEditableUserMessage/CkEditableUserMessage.vue"],"names":[],"mappings":"AA+DA,OAAO,KAAK,EAEV,0BAA0B,EAC3B,MAAM,SAAS,CAAC;AAyKjB,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU;;;;;;;6EAId,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { default as CkEditableUserMessage } from './CkEditableUserMessage.vue';
2
+ export type { CkEditableUserMessageEmits, CkEditableUserMessageProps, } from './types';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkEditableUserMessage/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAC/E,YAAY,EACV,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,SAAS,CAAC"}