@aleph-alpha/chat-kit 1.17.3 → 1.18.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 (32) hide show
  1. package/dist/{CkInput.vue_vue_type_script_setup_true_lang-DYBCJPBn.js → CkInput.vue_vue_type_script_setup_true_lang-BGlztr2p.js} +210 -97
  2. package/dist/components/base/CkModelSelector/CkModelSelector.stories.d.ts +20 -0
  3. package/dist/components/base/CkModelSelector/CkModelSelector.stories.d.ts.map +1 -0
  4. package/dist/components/base/CkModelSelector/CkModelSelector.vue.d.ts +16 -0
  5. package/dist/components/base/CkModelSelector/CkModelSelector.vue.d.ts.map +1 -0
  6. package/dist/components/base/CkModelSelector/index.d.ts +3 -0
  7. package/dist/components/base/CkModelSelector/index.d.ts.map +1 -0
  8. package/dist/components/base/CkModelSelector/types.d.ts +54 -0
  9. package/dist/components/base/CkModelSelector/types.d.ts.map +1 -0
  10. package/dist/components/base/index.d.ts +2 -0
  11. package/dist/components/base/index.d.ts.map +1 -1
  12. package/dist/components/index.d.ts +2 -2
  13. package/dist/components/index.d.ts.map +1 -1
  14. package/dist/components/index.js +9 -8
  15. package/dist/handlers/index.js +1 -1
  16. package/dist/handlers/useChatKitLabels.d.ts +6 -0
  17. package/dist/handlers/useChatKitLabels.d.ts.map +1 -1
  18. package/dist/index.d.ts +2 -2
  19. package/dist/index.d.ts.map +1 -1
  20. package/dist/index.js +11 -10
  21. package/dist/{useChatKitLabels-BC6ItJc6.js → useChatKitLabels-ZutacPad.js} +3 -0
  22. package/package.json +1 -1
  23. package/src/components/base/CkModelSelector/CkModelSelector.spec.ts +60 -0
  24. package/src/components/base/CkModelSelector/CkModelSelector.stories.ts +101 -0
  25. package/src/components/base/CkModelSelector/CkModelSelector.vue +109 -0
  26. package/src/components/base/CkModelSelector/index.ts +6 -0
  27. package/src/components/base/CkModelSelector/types.ts +55 -0
  28. package/src/components/base/index.ts +6 -0
  29. package/src/components/index.ts +4 -0
  30. package/src/handlers/useChatKitLabels.spec.ts +5 -28
  31. package/src/handlers/useChatKitLabels.ts +9 -0
  32. package/src/index.ts +4 -0
@@ -1,5 +1,5 @@
1
1
  import { defineComponent, openBlock, createElementBlock, createElementVNode, renderSlot, createCommentVNode, ref, onMounted, nextTick, onUnmounted, watch, Fragment, renderList, normalizeStyle, createBlock, unref, mergeProps, withCtx, createVNode, Transition, toDisplayString, computed, normalizeClass, toRefs, h, useId, createTextVNode, useAttrs, useSlots, withModifiers, resolveDynamicComponent, useTemplateRef, onBeforeUnmount, createSlots, normalizeProps, guardReactiveProps } from "vue";
2
- import { u as useChatKitLabels, d as defaultChatKitLabels, a as useMarkdownParser } from "./useChatKitLabels-BC6ItJc6.js";
2
+ import { u as useChatKitLabels, d as defaultChatKitLabels, a as useMarkdownParser } from "./useChatKitLabels-ZutacPad.js";
3
3
  import { UiButton, UiTooltip, UiIcon, UiDialog, UiDialogContent, UiDialogDescription, UiFieldLabel, UiToggleGroup, UiToggleGroupItem, UiField, UiTextarea, UiFileItem, UiPopover, UiPopoverTrigger, UiFileType, UiPopoverContent, Primitive, UiAvatar, UiAvatarImage, UiSpinner, UiAvatarFallback, UiSidebarPopoverMenu, UiSidebarPopoverMenuItem } from "@aleph-alpha/ui-library";
4
4
  const MINUTE = 60;
5
5
  const HOUR = 60 * MINUTE;
@@ -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 _hoisted_1$b = {
39
+ const _hoisted_1$c = {
40
40
  xmlns: "http://www.w3.org/2000/svg",
41
41
  width: "16",
42
42
  height: "16",
@@ -47,31 +47,31 @@ const _hoisted_1$b = {
47
47
  "stroke-linecap": "round",
48
48
  "stroke-linejoin": "round"
49
49
  };
50
- const _sfc_main$k = /* @__PURE__ */ defineComponent({
50
+ const _sfc_main$l = /* @__PURE__ */ defineComponent({
51
51
  ...{ name: "CkSendIcon" },
52
52
  __name: "CkSendIcon",
53
53
  setup(__props) {
54
54
  return (_ctx, _cache) => {
55
- return openBlock(), createElementBlock("svg", _hoisted_1$b, [..._cache[0] || (_cache[0] = [
55
+ return openBlock(), createElementBlock("svg", _hoisted_1$c, [..._cache[0] || (_cache[0] = [
56
56
  createElementVNode("path", { d: "M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z" }, null, -1),
57
57
  createElementVNode("path", { d: "M6 12h16" }, null, -1)
58
58
  ])]);
59
59
  };
60
60
  }
61
61
  });
62
- const _hoisted_1$a = {
62
+ const _hoisted_1$b = {
63
63
  xmlns: "http://www.w3.org/2000/svg",
64
64
  width: "16",
65
65
  height: "16",
66
66
  viewBox: "0 0 16 16",
67
67
  fill: "none"
68
68
  };
69
- const _sfc_main$j = /* @__PURE__ */ defineComponent({
69
+ const _sfc_main$k = /* @__PURE__ */ defineComponent({
70
70
  ...{ name: "CkStopIcon" },
71
71
  __name: "CkStopIcon",
72
72
  setup(__props) {
73
73
  return (_ctx, _cache) => {
74
- return openBlock(), createElementBlock("svg", _hoisted_1$a, [..._cache[0] || (_cache[0] = [
74
+ return openBlock(), createElementBlock("svg", _hoisted_1$b, [..._cache[0] || (_cache[0] = [
75
75
  createElementVNode("path", {
76
76
  d: "M13.3335 3.33301C13.3335 2.96482 13.035 2.66634 12.6668 2.66634H3.3335C2.96531 2.66634 2.66683 2.96482 2.66683 3.33301V12.6663C2.66683 13.0345 2.96531 13.333 3.3335 13.333H12.6668C13.035 13.333 13.3335 13.0345 13.3335 12.6663V3.33301ZM14.6668 12.6663C14.6668 13.7709 13.7714 14.6663 12.6668 14.6663H3.3335C2.22893 14.6663 1.3335 13.7709 1.3335 12.6663V3.33301C1.3335 2.22844 2.22893 1.33301 3.3335 1.33301H12.6668C13.7714 1.33301 14.6668 2.22844 14.6668 3.33301V12.6663Z",
77
77
  fill: "#1D1D1B"
@@ -80,41 +80,41 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
80
80
  };
81
81
  }
82
82
  });
83
- const _hoisted_1$9 = { class: "flex w-full flex-col gap-6 pb-6" };
84
- const _hoisted_2$6 = {
83
+ const _hoisted_1$a = { class: "flex w-full flex-col gap-6 pb-6" };
84
+ const _hoisted_2$7 = {
85
85
  key: 0,
86
86
  class: "flex items-start gap-3"
87
87
  };
88
- const _hoisted_3$5 = {
88
+ const _hoisted_3$6 = {
89
89
  key: 0,
90
90
  "data-testid": "ck-agent-message-icon",
91
91
  class: "flex flex-shrink-0 justify-center"
92
92
  };
93
- const _hoisted_4$4 = {
93
+ const _hoisted_4$5 = {
94
94
  key: 1,
95
95
  "data-testid": "ck-agent-message-header",
96
96
  class: "body-14-regular text-content-on-surface-muted min-w-0 flex-1 [word-break:break-word]"
97
97
  };
98
- const _hoisted_5$3 = { class: "text-content-on-surface-primary text-base leading-7" };
98
+ const _hoisted_5$4 = { class: "text-content-on-surface-primary text-base leading-7" };
99
99
  const _hoisted_6$2 = {
100
100
  key: 1,
101
101
  class: "flex items-center gap-4"
102
102
  };
103
- const _sfc_main$i = /* @__PURE__ */ defineComponent({
103
+ const _sfc_main$j = /* @__PURE__ */ defineComponent({
104
104
  ...{ name: "CkAgentMessage" },
105
105
  __name: "CkAgentMessage",
106
106
  setup(__props) {
107
107
  return (_ctx, _cache) => {
108
- return openBlock(), createElementBlock("div", _hoisted_1$9, [
109
- _ctx.$slots.icon || _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_2$6, [
110
- _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_3$5, [
108
+ return openBlock(), createElementBlock("div", _hoisted_1$a, [
109
+ _ctx.$slots.icon || _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_2$7, [
110
+ _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_3$6, [
111
111
  renderSlot(_ctx.$slots, "icon")
112
112
  ])) : createCommentVNode("", true),
113
- _ctx.$slots.header ? (openBlock(), createElementBlock("span", _hoisted_4$4, [
113
+ _ctx.$slots.header ? (openBlock(), createElementBlock("span", _hoisted_4$5, [
114
114
  renderSlot(_ctx.$slots, "header")
115
115
  ])) : createCommentVNode("", true)
116
116
  ])) : createCommentVNode("", true),
117
- createElementVNode("div", _hoisted_5$3, [
117
+ createElementVNode("div", _hoisted_5$4, [
118
118
  renderSlot(_ctx.$slots, "default")
119
119
  ]),
120
120
  _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
@@ -124,16 +124,16 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
124
124
  };
125
125
  }
126
126
  });
127
- const _hoisted_1$8 = ["data-message-row"];
128
- const _hoisted_2$5 = {
127
+ const _hoisted_1$9 = ["data-message-row"];
128
+ const _hoisted_2$6 = {
129
129
  key: 0,
130
130
  class: "flex justify-end"
131
131
  };
132
- const _hoisted_3$4 = {
132
+ const _hoisted_3$5 = {
133
133
  key: 1,
134
134
  class: "flex justify-start"
135
135
  };
136
- const _sfc_main$h = /* @__PURE__ */ defineComponent({
136
+ const _sfc_main$i = /* @__PURE__ */ defineComponent({
137
137
  ...{ name: "CkConversationLayout" },
138
138
  __name: "CkConversationLayout",
139
139
  props: {
@@ -273,12 +273,12 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
273
273
  key: message.id,
274
274
  "data-message-row": message.role
275
275
  }, [
276
- message.role === "user" ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
276
+ message.role === "user" ? (openBlock(), createElementBlock("div", _hoisted_2$6, [
277
277
  renderSlot(_ctx.$slots, "user-message", { message })
278
- ])) : (openBlock(), createElementBlock("div", _hoisted_3$4, [
278
+ ])) : (openBlock(), createElementBlock("div", _hoisted_3$5, [
279
279
  renderSlot(_ctx.$slots, "agent-message", { message })
280
280
  ]))
281
- ], 8, _hoisted_1$8);
281
+ ], 8, _hoisted_1$9);
282
282
  }), 128)),
283
283
  hasBottomSpacer.value ? (openBlock(), createElementBlock("div", {
284
284
  key: 0,
@@ -289,7 +289,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
289
289
  };
290
290
  }
291
291
  });
292
- const _sfc_main$g = /* @__PURE__ */ defineComponent({
292
+ const _sfc_main$h = /* @__PURE__ */ defineComponent({
293
293
  ...{
294
294
  name: "CkMessageActionButton"
295
295
  },
@@ -313,11 +313,11 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
313
313
  };
314
314
  }
315
315
  });
316
- const _hoisted_1$7 = {
316
+ const _hoisted_1$8 = {
317
317
  class: "sr-only",
318
318
  "aria-live": "polite"
319
319
  };
320
- const _sfc_main$f = /* @__PURE__ */ defineComponent({
320
+ const _sfc_main$g = /* @__PURE__ */ defineComponent({
321
321
  ...{
322
322
  name: "CkCopyMessageActionButton"
323
323
  },
@@ -374,7 +374,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
374
374
  "delay-duration": 0
375
375
  }, {
376
376
  default: withCtx(() => [
377
- createVNode(unref(_sfc_main$g), mergeProps({ ariaLabel: copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy }, {
377
+ createVNode(unref(_sfc_main$h), mergeProps({ ariaLabel: copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy }, {
378
378
  disabled: __props.disabled,
379
379
  onClick: handleClick
380
380
  }), {
@@ -401,7 +401,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
401
401
  ]),
402
402
  _: 1
403
403
  }, 16, ["disabled"]),
404
- createElementVNode("span", _hoisted_1$7, toDisplayString(copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy), 1)
404
+ createElementVNode("span", _hoisted_1$8, toDisplayString(copied.value ? __props.ariaLabelCopied : __props.ariaLabelCopy), 1)
405
405
  ]),
406
406
  _: 1
407
407
  }, 8, ["open", "content"]);
@@ -415,9 +415,9 @@ const _export_sfc = (sfc, props) => {
415
415
  }
416
416
  return target;
417
417
  };
418
- const CkCopyMessageActionButton = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-f77a1193"]]);
419
- const _hoisted_1$6 = ["aria-label"];
420
- const _sfc_main$e = /* @__PURE__ */ defineComponent({
418
+ const CkCopyMessageActionButton = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-f77a1193"]]);
419
+ const _hoisted_1$7 = ["aria-label"];
420
+ const _sfc_main$f = /* @__PURE__ */ defineComponent({
421
421
  ...{
422
422
  name: "CkFeedbackButton"
423
423
  },
@@ -472,7 +472,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
472
472
  "delay-duration": 0
473
473
  }, {
474
474
  default: withCtx(() => [
475
- createVNode(unref(_sfc_main$g), mergeProps({ ariaLabel: thumbsUpLabel.value }, {
475
+ createVNode(unref(_sfc_main$h), mergeProps({ ariaLabel: thumbsUpLabel.value }, {
476
476
  "aria-pressed": isUpSelected.value,
477
477
  "aria-disabled": __props.locked || void 0,
478
478
  disabled: isUpDisabled.value,
@@ -502,7 +502,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
502
502
  "delay-duration": 0
503
503
  }, {
504
504
  default: withCtx(() => [
505
- createVNode(unref(_sfc_main$g), mergeProps({ ariaLabel: thumbsDownLabel.value }, {
505
+ createVNode(unref(_sfc_main$h), mergeProps({ ariaLabel: thumbsDownLabel.value }, {
506
506
  "aria-pressed": isDownSelected.value,
507
507
  "aria-disabled": __props.locked || void 0,
508
508
  disabled: isDownDisabled.value,
@@ -525,11 +525,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
525
525
  ]),
526
526
  _: 1
527
527
  }, 8, ["content"])
528
- ], 8, _hoisted_1$6);
528
+ ], 8, _hoisted_1$7);
529
529
  };
530
530
  }
531
531
  });
532
- const CkFeedbackButton = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-245705b8"]]);
532
+ const CkFeedbackButton = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-245705b8"]]);
533
533
  const defaultMarkdownClasses = {
534
534
  p: "my-1 leading-7",
535
535
  a: "underline underline-offset-4",
@@ -571,7 +571,7 @@ function domToVNode(node, slots, classes) {
571
571
  }
572
572
  return h(tag, attrs, children);
573
573
  }
574
- const _sfc_main$d = defineComponent({
574
+ const _sfc_main$e = defineComponent({
575
575
  name: "CkMarkdownRenderer",
576
576
  props: {
577
577
  content: { type: String, required: true },
@@ -601,17 +601,17 @@ const _sfc_main$d = defineComponent({
601
601
  };
602
602
  }
603
603
  });
604
- const _hoisted_1$5 = {
604
+ const _hoisted_1$6 = {
605
605
  key: 0,
606
606
  class: "flex min-h-0 flex-col gap-2"
607
607
  };
608
- const _hoisted_2$4 = { class: "ck-feedback-dialog__response min-h-0 flex-1 overflow-y-auto rounded-md border border-input bg-background-input-default px-3 py-2 shadow-xs" };
609
- const _hoisted_3$3 = { class: "flex min-h-0 flex-col gap-4" };
610
- const _hoisted_4$3 = {
608
+ const _hoisted_2$5 = { class: "ck-feedback-dialog__response min-h-0 flex-1 overflow-y-auto rounded-md border border-input bg-background-input-default px-3 py-2 shadow-xs" };
609
+ const _hoisted_3$4 = { class: "flex min-h-0 flex-col gap-4" };
610
+ const _hoisted_4$4 = {
611
611
  class: "self-end text-sm text-content-on-surface-muted tabular-nums",
612
612
  "aria-live": "polite"
613
613
  };
614
- const _sfc_main$c = /* @__PURE__ */ defineComponent({
614
+ const _sfc_main$d = /* @__PURE__ */ defineComponent({
615
615
  ...{
616
616
  name: "CkFeedbackDialog"
617
617
  },
@@ -762,18 +762,18 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
762
762
  showResponseColumn.value ? "grid-cols-2" : "grid-cols-1"
763
763
  ])
764
764
  }, [
765
- showResponseColumn.value ? (openBlock(), createElementBlock("section", _hoisted_1$5, [
765
+ showResponseColumn.value ? (openBlock(), createElementBlock("section", _hoisted_1$6, [
766
766
  createVNode(unref(UiFieldLabel), null, {
767
767
  default: withCtx(() => [
768
768
  createTextVNode(toDisplayString(responseHeading.value), 1)
769
769
  ]),
770
770
  _: 1
771
771
  }),
772
- createElementVNode("div", _hoisted_2$4, [
773
- createVNode(unref(_sfc_main$d), { content: __props.responseText }, null, 8, ["content"])
772
+ createElementVNode("div", _hoisted_2$5, [
773
+ createVNode(unref(_sfc_main$e), { content: __props.responseText }, null, 8, ["content"])
774
774
  ])
775
775
  ])) : createCommentVNode("", true),
776
- createElementVNode("section", _hoisted_3$3, [
776
+ createElementVNode("section", _hoisted_3$4, [
777
777
  createVNode(unref(UiToggleGroup), {
778
778
  modelValue: selectedReason.value,
779
779
  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedReason.value = $event),
@@ -820,7 +820,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
820
820
  maxlength: __props.maxFreeTextLength,
821
821
  rows: "3"
822
822
  }, null, 8, ["id", "modelValue", "placeholder", "disabled", "maxlength"]),
823
- createElementVNode("div", _hoisted_4$3, toDisplayString(characterCount.value) + "/" + toDisplayString(__props.maxFreeTextLength), 1)
823
+ createElementVNode("div", _hoisted_4$4, toDisplayString(characterCount.value) + "/" + toDisplayString(__props.maxFreeTextLength), 1)
824
824
  ]),
825
825
  _: 1
826
826
  })
@@ -835,8 +835,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
835
835
  };
836
836
  }
837
837
  });
838
- const CkFeedbackDialog = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-181a7aa9"]]);
839
- const _sfc_main$b = /* @__PURE__ */ defineComponent({
838
+ const CkFeedbackDialog = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-181a7aa9"]]);
839
+ const _sfc_main$c = /* @__PURE__ */ defineComponent({
840
840
  ...{
841
841
  name: "CkFileItemRow",
842
842
  inheritAttrs: false
@@ -879,12 +879,12 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
879
879
  };
880
880
  }
881
881
  });
882
- const _hoisted_1$4 = ["aria-label"];
883
- const _hoisted_2$3 = ["onClick"];
884
- const _hoisted_3$2 = ["disabled", "aria-label"];
885
- const _hoisted_4$2 = ["aria-label"];
886
- const _hoisted_5$2 = ["onClick"];
887
- const _sfc_main$a = /* @__PURE__ */ defineComponent({
882
+ const _hoisted_1$5 = ["aria-label"];
883
+ const _hoisted_2$4 = ["onClick"];
884
+ const _hoisted_3$3 = ["disabled", "aria-label"];
885
+ const _hoisted_4$3 = ["aria-label"];
886
+ const _hoisted_5$3 = ["onClick"];
887
+ const _sfc_main$b = /* @__PURE__ */ defineComponent({
888
888
  ...{
889
889
  name: "CkFileItemsList"
890
890
  },
@@ -941,7 +941,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
941
941
  class: "min-w-0 max-w-64 flex-1 basis-0",
942
942
  onClick: ($event) => handleRowClick(file, $event)
943
943
  }, [
944
- createVNode(_sfc_main$b, {
944
+ createVNode(_sfc_main$c, {
945
945
  file,
946
946
  size: __props.size,
947
947
  "is-removable": __props.isRemovable,
@@ -954,9 +954,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
954
954
  ]),
955
955
  _: 3
956
956
  }, 8, ["file", "size", "is-removable", "remove-label", "disabled", "onRemove"])
957
- ], 8, _hoisted_2$3);
957
+ ], 8, _hoisted_2$4);
958
958
  }), 128))
959
- ], 8, _hoisted_1$4)) : (openBlock(), createBlock(unref(UiPopover), {
959
+ ], 8, _hoisted_1$5)) : (openBlock(), createBlock(unref(UiPopover), {
960
960
  key: 1,
961
961
  open: isOpen.value,
962
962
  "onUpdate:open": _cache[0] || (_cache[0] = ($event) => isOpen.value = $event)
@@ -984,7 +984,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
984
984
  "aria-hidden": "true",
985
985
  class: normalizeClass(["shrink-0 text-content-on-surface-muted transition-transform", isOpen.value && "rotate-180"])
986
986
  }, null, 8, ["class"])
987
- ], 10, _hoisted_3$2)
987
+ ], 10, _hoisted_3$3)
988
988
  ]),
989
989
  _: 1
990
990
  }),
@@ -1005,7 +1005,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
1005
1005
  class: "min-w-0 max-w-64",
1006
1006
  onClick: ($event) => handleRowClick(file, $event)
1007
1007
  }, [
1008
- createVNode(_sfc_main$b, {
1008
+ createVNode(_sfc_main$c, {
1009
1009
  file,
1010
1010
  size: __props.size,
1011
1011
  "is-removable": __props.isRemovable,
@@ -1018,9 +1018,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
1018
1018
  ]),
1019
1019
  _: 3
1020
1020
  }, 8, ["file", "size", "is-removable", "remove-label", "disabled", "onRemove"])
1021
- ], 8, _hoisted_5$2);
1021
+ ], 8, _hoisted_5$3);
1022
1022
  }), 128))
1023
- ], 8, _hoisted_4$2)
1023
+ ], 8, _hoisted_4$3)
1024
1024
  ]),
1025
1025
  _: 3
1026
1026
  }, 8, ["class"])
@@ -1031,14 +1031,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
1031
1031
  }
1032
1032
  });
1033
1033
  const CHAT_HISTORY_ACTIVE_INDICATOR_CLASS = "ui-active-indicator";
1034
- const _hoisted_1$3 = ["data-active"];
1035
- const _hoisted_2$2 = { class: "min-w-0 flex-1" };
1036
- const _hoisted_3$1 = { class: "truncate body-14-regular text-content-on-surface-primary" };
1037
- const _hoisted_4$1 = {
1034
+ const _hoisted_1$4 = ["data-active"];
1035
+ const _hoisted_2$3 = { class: "min-w-0 flex-1" };
1036
+ const _hoisted_3$2 = { class: "truncate body-14-regular text-content-on-surface-primary" };
1037
+ const _hoisted_4$2 = {
1038
1038
  key: 0,
1039
1039
  class: "mt-0.5 flex min-w-0 items-center gap-1 label-12-medium text-content-on-surface-muted"
1040
1040
  };
1041
- const _hoisted_5$1 = {
1041
+ const _hoisted_5$2 = {
1042
1042
  key: 0,
1043
1043
  class: "truncate"
1044
1044
  };
@@ -1053,7 +1053,7 @@ const _hoisted_7$1 = {
1053
1053
  const _hoisted_8 = ["aria-label"];
1054
1054
  const _hoisted_9 = ["aria-label"];
1055
1055
  const _hoisted_10 = ["aria-label"];
1056
- const _sfc_main$9 = /* @__PURE__ */ defineComponent({
1056
+ const _sfc_main$a = /* @__PURE__ */ defineComponent({
1057
1057
  ...{
1058
1058
  name: "CkHistoryItem",
1059
1059
  inheritAttrs: false
@@ -1182,11 +1182,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
1182
1182
  class: itemClass.value
1183
1183
  }), {
1184
1184
  default: withCtx(() => [
1185
- createElementVNode("div", _hoisted_2$2, [
1186
- createElementVNode("div", _hoisted_3$1, toDisplayString(props.title), 1),
1187
- props.metaStart || props.metaEnd || _ctx.$slots.meta ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
1185
+ createElementVNode("div", _hoisted_2$3, [
1186
+ createElementVNode("div", _hoisted_3$2, toDisplayString(props.title), 1),
1187
+ props.metaStart || props.metaEnd || _ctx.$slots.meta ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
1188
1188
  renderSlot(_ctx.$slots, "meta", {}, () => [
1189
- props.metaStart ? (openBlock(), createElementBlock("span", _hoisted_5$1, toDisplayString(props.metaStart), 1)) : createCommentVNode("", true),
1189
+ props.metaStart ? (openBlock(), createElementBlock("span", _hoisted_5$2, toDisplayString(props.metaStart), 1)) : createCommentVNode("", true),
1190
1190
  props.metaStart && props.metaEnd ? (openBlock(), createElementBlock("span", _hoisted_6$1, "|")) : createCommentVNode("", true),
1191
1191
  props.metaEnd ? (openBlock(), createElementBlock("span", _hoisted_7$1, toDisplayString(props.metaEnd), 1)) : createCommentVNode("", true)
1192
1192
  ])
@@ -1289,12 +1289,12 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
1289
1289
  }))
1290
1290
  ], 42, _hoisted_10))
1291
1291
  ], 34)) : createCommentVNode("", true)
1292
- ], 10, _hoisted_1$3);
1292
+ ], 10, _hoisted_1$4);
1293
1293
  };
1294
1294
  }
1295
1295
  });
1296
1296
  const baseClass = "flex w-full min-w-0 flex-col p-2";
1297
- const _sfc_main$8 = /* @__PURE__ */ defineComponent({
1297
+ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
1298
1298
  ...{
1299
1299
  name: "CkHistoryWrapper",
1300
1300
  inheritAttrs: false
@@ -1324,6 +1324,118 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
1324
1324
  };
1325
1325
  }
1326
1326
  });
1327
+ const _hoisted_1$3 = ["disabled", "aria-expanded", "aria-label"];
1328
+ const _hoisted_2$2 = { class: "max-w-[10rem] truncate" };
1329
+ const _hoisted_3$1 = ["aria-label"];
1330
+ const _hoisted_4$1 = ["aria-selected", "onClick"];
1331
+ const _hoisted_5$1 = { class: "min-w-0 flex-1 truncate" };
1332
+ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
1333
+ ...{ name: "CkModelSelector" },
1334
+ __name: "CkModelSelector",
1335
+ props: {
1336
+ models: { default: () => [] },
1337
+ selectedModelId: { default: null },
1338
+ disabled: { type: Boolean, default: false },
1339
+ side: { default: "top" },
1340
+ align: { default: "end" },
1341
+ sideOffset: { default: 8 }
1342
+ },
1343
+ emits: ["update:selectedModelId"],
1344
+ setup(__props, { emit: __emit }) {
1345
+ const props = __props;
1346
+ const emit = __emit;
1347
+ const labels = useChatKitLabels();
1348
+ const triggerAriaLabel = computed(
1349
+ () => labels.value.modelSelectorAriaLabel ?? defaultChatKitLabels.modelSelectorAriaLabel
1350
+ );
1351
+ const listAriaLabel = computed(
1352
+ () => labels.value.modelSelectorListAriaLabel ?? defaultChatKitLabels.modelSelectorListAriaLabel
1353
+ );
1354
+ const placeholderLabel = computed(
1355
+ () => labels.value.modelSelectorPlaceholder ?? defaultChatKitLabels.modelSelectorPlaceholder
1356
+ );
1357
+ const open = ref(false);
1358
+ const selectedLabel = computed(() => {
1359
+ const match = props.models.find((m) => m.id === props.selectedModelId);
1360
+ return match?.label ?? placeholderLabel.value;
1361
+ });
1362
+ function select(id) {
1363
+ open.value = false;
1364
+ if (id !== props.selectedModelId) emit("update:selectedModelId", id);
1365
+ }
1366
+ return (_ctx, _cache) => {
1367
+ return openBlock(), createBlock(unref(UiPopover), {
1368
+ open: open.value,
1369
+ "onUpdate:open": _cache[1] || (_cache[1] = ($event) => open.value = $event)
1370
+ }, {
1371
+ default: withCtx(() => [
1372
+ createVNode(unref(UiPopoverTrigger), { "as-child": "" }, {
1373
+ default: withCtx(() => [
1374
+ createElementVNode("button", {
1375
+ type: "button",
1376
+ class: "ck-model-selector__trigger inline-flex h-9 shrink-0 items-center gap-1 rounded-3xl px-3 label-14-medium text-content-on-surface-primary outline-none transition-colors hover:bg-background-surface-muted focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
1377
+ disabled: __props.disabled,
1378
+ "aria-haspopup": "listbox",
1379
+ "aria-expanded": open.value,
1380
+ "aria-label": triggerAriaLabel.value
1381
+ }, [
1382
+ createElementVNode("span", _hoisted_2$2, toDisplayString(selectedLabel.value), 1),
1383
+ createVNode(unref(UiIcon), {
1384
+ name: "chevron-down",
1385
+ size: 16,
1386
+ "aria-hidden": "true"
1387
+ })
1388
+ ], 8, _hoisted_1$3)
1389
+ ]),
1390
+ _: 1
1391
+ }),
1392
+ createVNode(unref(UiPopoverContent), {
1393
+ side: __props.side,
1394
+ align: __props.align,
1395
+ "side-offset": __props.sideOffset,
1396
+ class: "max-h-72 w-56 overflow-y-auto rounded-xl border border-border-surface-default bg-background-surface-floating p-2 text-content-on-surface-primary shadow-md",
1397
+ onOpenAutoFocus: _cache[0] || (_cache[0] = withModifiers(() => {
1398
+ }, ["prevent"]))
1399
+ }, {
1400
+ default: withCtx(() => [
1401
+ createElementVNode("ul", {
1402
+ class: "flex flex-col gap-1",
1403
+ role: "listbox",
1404
+ "aria-label": listAriaLabel.value
1405
+ }, [
1406
+ (openBlock(true), createElementBlock(Fragment, null, renderList(__props.models, (model) => {
1407
+ return openBlock(), createElementBlock("li", {
1408
+ key: model.id,
1409
+ role: "presentation"
1410
+ }, [
1411
+ createElementVNode("button", {
1412
+ type: "button",
1413
+ role: "option",
1414
+ "aria-selected": model.id === __props.selectedModelId,
1415
+ class: "relative flex w-full items-center gap-2 rounded-sm py-2 pr-8 pl-3 text-left body-14-regular text-content-on-surface-primary outline-none hover:bg-background-surface-muted-subtle focus-visible:ring-2 focus-visible:ring-ring",
1416
+ onClick: ($event) => select(model.id)
1417
+ }, [
1418
+ createElementVNode("span", _hoisted_5$1, toDisplayString(model.label), 1),
1419
+ model.id === __props.selectedModelId ? (openBlock(), createBlock(unref(UiIcon), {
1420
+ key: 0,
1421
+ name: "check",
1422
+ size: 16,
1423
+ class: "absolute right-2 text-content-on-surface-primary",
1424
+ "aria-hidden": "true"
1425
+ })) : createCommentVNode("", true)
1426
+ ], 8, _hoisted_4$1)
1427
+ ]);
1428
+ }), 128))
1429
+ ], 8, _hoisted_3$1)
1430
+ ]),
1431
+ _: 1
1432
+ }, 8, ["side", "align", "side-offset"])
1433
+ ]),
1434
+ _: 1
1435
+ }, 8, ["open"]);
1436
+ };
1437
+ }
1438
+ });
1327
1439
  const _sfc_main$7 = /* @__PURE__ */ defineComponent({
1328
1440
  ...{ name: "CkPromptActionButton" },
1329
1441
  __name: "CkPromptActionButton",
@@ -1588,7 +1700,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
1588
1700
  return message.content.filter((c) => c.type === "text").map((c) => c.text).join("");
1589
1701
  }
1590
1702
  return (_ctx, _cache) => {
1591
- return openBlock(), createBlock(_sfc_main$h, { messages: __props.messages }, {
1703
+ return openBlock(), createBlock(_sfc_main$i, { messages: __props.messages }, {
1592
1704
  "user-message": withCtx(({ message }) => [
1593
1705
  createElementVNode("div", {
1594
1706
  class: normalizeClass({ "ml-8": hasIcon.value })
@@ -1607,7 +1719,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
1607
1719
  ]),
1608
1720
  "agent-message": withCtx(({ message }) => [
1609
1721
  renderSlot(_ctx.$slots, "agent-message", { message }, () => [
1610
- createVNode(_sfc_main$i, null, createSlots({
1722
+ createVNode(_sfc_main$j, null, createSlots({
1611
1723
  footer: withCtx(() => [
1612
1724
  renderSlot(_ctx.$slots, "agent-message-footer", { message }, () => [
1613
1725
  getMessageText(message) && !isLoading(message) ? (openBlock(), createBlock(CkCopyMessageActionButton, {
@@ -1620,7 +1732,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
1620
1732
  ]),
1621
1733
  default: withCtx(() => [
1622
1734
  renderSlot(_ctx.$slots, "agent-message-content", { message }, () => [
1623
- createVNode(_sfc_main$d, {
1735
+ createVNode(_sfc_main$e, {
1624
1736
  content: getMessageText(message),
1625
1737
  classes: __props.agentMarkdownClasses
1626
1738
  }, createSlots({ _: 2 }, [
@@ -1746,7 +1858,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
1746
1858
  }
1747
1859
  return (_ctx, _cache) => {
1748
1860
  return openBlock(), createElementBlock("div", null, [
1749
- createVNode(_sfc_main$8, {
1861
+ createVNode(_sfc_main$9, {
1750
1862
  class: normalizeClass(isExpanded.value && props.maxHeight ? "overflow-y-auto" : void 0),
1751
1863
  style: normalizeStyle(
1752
1864
  isExpanded.value && props.maxHeight ? { maxHeight: props.maxHeight } : void 0
@@ -1765,7 +1877,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
1765
1877
  edit: () => emit("edit", conversation),
1766
1878
  delete: () => emit("delete", conversation)
1767
1879
  }, () => [
1768
- createVNode(_sfc_main$9, {
1880
+ createVNode(_sfc_main$a, {
1769
1881
  as: "a",
1770
1882
  href: hrefFor(conversation),
1771
1883
  "is-active": conversation.id === props.activeId,
@@ -1888,7 +2000,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
1888
2000
  }, {
1889
2001
  default: withCtx(() => [
1890
2002
  renderSlot(_ctx.$slots, "stop-icon", {}, () => [
1891
- createVNode(_sfc_main$j)
2003
+ createVNode(_sfc_main$k)
1892
2004
  ])
1893
2005
  ]),
1894
2006
  _: 3
@@ -1898,7 +2010,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
1898
2010
  }), {
1899
2011
  default: withCtx(() => [
1900
2012
  renderSlot(_ctx.$slots, "send-icon", {}, () => [
1901
- createVNode(_sfc_main$k)
2013
+ createVNode(_sfc_main$l)
1902
2014
  ])
1903
2015
  ]),
1904
2016
  _: 3
@@ -1928,24 +2040,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
1928
2040
  });
1929
2041
  export {
1930
2042
  CkCopyMessageActionButton as C,
1931
- _sfc_main$i as _,
2043
+ _sfc_main$j as _,
1932
2044
  _sfc_main$2 as a,
1933
- _sfc_main$h as b,
2045
+ _sfc_main$i as b,
1934
2046
  CkFeedbackButton as c,
1935
2047
  CkFeedbackDialog as d,
1936
- _sfc_main$a as e,
2048
+ _sfc_main$b as e,
1937
2049
  _sfc_main$1 as f,
1938
- _sfc_main$9 as g,
1939
- _sfc_main$8 as h,
2050
+ _sfc_main$a as g,
2051
+ _sfc_main$9 as h,
1940
2052
  _sfc_main as i,
1941
- _sfc_main$d as j,
1942
- _sfc_main$g as k,
1943
- _sfc_main$7 as l,
1944
- _sfc_main$5 as m,
1945
- _sfc_main$4 as n,
1946
- _sfc_main$6 as o,
1947
- _sfc_main$k as p,
1948
- _sfc_main$j as q,
1949
- CkUserMessage as r,
1950
- formatRelativeTime as s
2053
+ _sfc_main$e as j,
2054
+ _sfc_main$h as k,
2055
+ _sfc_main$8 as l,
2056
+ _sfc_main$7 as m,
2057
+ _sfc_main$5 as n,
2058
+ _sfc_main$4 as o,
2059
+ _sfc_main$6 as p,
2060
+ _sfc_main$l as q,
2061
+ _sfc_main$k as r,
2062
+ CkUserMessage as s,
2063
+ formatRelativeTime as t
1951
2064
  };
@@ -0,0 +1,20 @@
1
+ import type { Meta, StoryObj } from '@storybook/vue3-vite';
2
+ import CkModelSelector from './CkModelSelector.vue';
3
+ declare const meta: Meta<typeof CkModelSelector>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof CkModelSelector>;
6
+ /**
7
+ * Default picker with a current selection. Opens upward and aligns to the
8
+ * end, matching its intended spot next to a send button.
9
+ */
10
+ export declare const Default: Story;
11
+ /**
12
+ * No selection yet — the trigger shows the placeholder label until the user
13
+ * picks a model.
14
+ */
15
+ export declare const Placeholder: Story;
16
+ /**
17
+ * Disabled trigger — e.g. while the model list is still loading.
18
+ */
19
+ export declare const Disabled: Story;
20
+ //# sourceMappingURL=CkModelSelector.stories.d.ts.map