@aleph-alpha/chat-kit 3.2.0 → 3.3.0

package/dist/{CkInput.vue_vue_type_script_setup_true_lang-B-4xnH2c.js → CkInput.vue_vue_type_script_setup_true_lang-BAcBFs6I.js}

@@ -1,6 +1,6 @@
-import { defineComponent, openBlock, createBlock, unref, createElementBlock, createElementVNode, renderSlot, createCommentVNode, ref, onMounted, nextTick, onUnmounted, watch, Fragment, renderList, normalizeStyle, mergeProps, withCtx, createVNode, Transition, toDisplayString, createStaticVNode, computed, onBeforeUnmount, Teleport, withModifiers, normalizeClass, toRefs, h, useId, createTextVNode, useAttrs, useSlots, resolveDynamicComponent, useTemplateRef, onUpdated, createSlots, normalizeProps, guardReactiveProps } from "vue";
-import { UiIcon, UiButton, UiTooltip, formatFileSize, UiDialog, UiDialogContent, UiDialogDescription, UiFieldLabel, UiToggleGroup, UiToggleGroupItem, UiField, UiTextarea, UiFileItem, UiPopover, UiPopoverTrigger, UiFileType, UiProgress, UiPopoverContent, Primitive, UiAvatar, UiAvatarImage, UiSpinner, UiAvatarFallback, UiSidebarPopoverMenu, UiSidebarPopoverMenuItem } from "@aleph-alpha/ui-library";
-import { u as useChatKitLabels, d as defaultChatKitLabels, a as useMarkdownParser } from "./useChatKitLabels-D5gNv8se.js";
+import { defineComponent, openBlock, createBlock, unref, createElementBlock, createElementVNode, renderSlot, createCommentVNode, computed, createVNode, toDisplayString, withCtx, ref, onBeforeUnmount, normalizeClass, onMounted, nextTick, onUnmounted, watch, Fragment, renderList, normalizeStyle, mergeProps, Transition, createStaticVNode, Teleport, withModifiers, toValue, h, toRefs, useId, createTextVNode, useAttrs, useSlots, resolveDynamicComponent, useTemplateRef, onUpdated, createSlots, normalizeProps, guardReactiveProps } from "vue";
+import { UiIcon, UiFileType, UiButton, 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";
+import { u as useChatKitLabels, d as defaultChatKitLabels, r as remarkCitations, a as useMarkdownParser } from "./useChatKitLabels-BM2I7-9o.js";
 const MINUTE = 60;
 const HOUR = 60 * MINUTE;
 const DAY = 24 * HOUR;
@@ -36,7 +36,7 @@ function formatRelativeTime(unixSeconds, nowSeconds = Math.floor(Date.now() / 1e
   const years = Math.floor(delta / YEAR);
   return years === 1 ? "1 year ago" : `${years} years ago`;
 }
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{ name: "CkSendIcon" },
   __name: "CkSendIcon",
   setup(__props) {
@@ -45,19 +45,19 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$d = {
+const _hoisted_1$f = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16",
   height: "16",
   viewBox: "0 0 16 16",
   fill: "none"
 };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   ...{ name: "CkStopIcon" },
   __name: "CkStopIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$d, [..._cache[0] || (_cache[0] = [
+      return openBlock(), createElementBlock("svg", _hoisted_1$f, [..._cache[0] || (_cache[0] = [
         createElementVNode("path", {
           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",
           fill: "currentColor"
@@ -66,41 +66,41 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$c = { class: "flex w-full min-w-0 flex-col gap-6 pb-6" };
-const _hoisted_2$8 = {
+const _hoisted_1$e = { class: "flex w-full min-w-0 flex-col gap-6 pb-6" };
+const _hoisted_2$9 = {
   key: 0,
   class: "flex items-start gap-3"
 };
-const _hoisted_3$7 = {
+const _hoisted_3$8 = {
   key: 0,
   "data-testid": "ck-agent-message-icon",
   class: "flex flex-shrink-0 justify-center"
 };
-const _hoisted_4$6 = {
+const _hoisted_4$7 = {
   key: 1,
   "data-testid": "ck-agent-message-header",
   class: "body-14-regular text-content-on-surface-muted min-w-0 flex-1 [word-break:break-word]"
 };
-const _hoisted_5$4 = { class: "text-content-on-surface-primary min-w-0 text-base leading-7" };
+const _hoisted_5$5 = { class: "text-content-on-surface-primary min-w-0 text-base leading-7" };
 const _hoisted_6$3 = {
   key: 1,
   class: "flex items-center gap-4"
 };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...{ name: "CkAgentMessage" },
   __name: "CkAgentMessage",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [
-        _ctx.$slots.icon || _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_2$8, [
-          _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_3$7, [
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+        _ctx.$slots.icon || _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_2$9, [
+          _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_3$8, [
             renderSlot(_ctx.$slots, "icon")
           ])) : createCommentVNode("", true),
-          _ctx.$slots.header ? (openBlock(), createElementBlock("span", _hoisted_4$6, [
+          _ctx.$slots.header ? (openBlock(), createElementBlock("span", _hoisted_4$7, [
             renderSlot(_ctx.$slots, "header")
           ])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_5$4, [
+        createElementVNode("div", _hoisted_5$5, [
           renderSlot(_ctx.$slots, "default")
         ]),
         _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6$3, [
@@ -110,6 +110,194 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1$d = { class: "ck-citation-card flex w-[22.5rem] max-w-[90vw] flex-col gap-2 rounded-md bg-background-surface-floating px-6 pb-6 pt-4 shadow-md" };
+const _hoisted_2$8 = { class: "flex items-center gap-3" };
+const _hoisted_3$7 = ["title"];
+const _hoisted_4$6 = { class: "break-words text-sm leading-5 text-content-on-surface-secondary" };
+const _hoisted_5$4 = {
+  key: 0,
+  class: "text-sm leading-5 text-content-on-surface-muted"
+};
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "CkCitationCard"
+  },
+  __name: "CkCitationCard",
+  props: {
+    fileName: {},
+    snippet: {},
+    locationLabel: { default: void 0 },
+    url: { default: void 0 },
+    openSourceLabel: { default: void 0 }
+  },
+  emits: ["open-source"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const labels = useChatKitLabels();
+    const openSourceAriaLabel = computed(
+      () => props.openSourceLabel ?? labels.value.citationOpenSource ?? defaultChatKitLabels.citationOpenSource
+    );
+    function handleOpen() {
+      if (props.url) {
+        emit("open-source", props.url);
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$d, [
+        createElementVNode("div", _hoisted_2$8, [
+          createVNode(unref(UiFileType), {
+            filename: __props.fileName,
+            class: "shrink-0"
+          }, null, 8, ["filename"]),
+          createElementVNode("p", {
+            class: "min-w-0 flex-1 truncate text-sm font-medium text-content-on-surface-primary",
+            title: __props.fileName
+          }, toDisplayString(__props.fileName), 9, _hoisted_3$7),
+          __props.url ? (openBlock(), createBlock(unref(UiButton), {
+            key: 0,
+            variant: "ghost",
+            size: "icon-sm",
+            "aria-label": openSourceAriaLabel.value,
+            class: "shrink-0",
+            onClick: handleOpen
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(UiIcon), {
+                name: "external-link",
+                size: 16,
+                "aria-hidden": "true"
+              })
+            ]),
+            _: 1
+          }, 8, ["aria-label"])) : createCommentVNode("", true)
+        ]),
+        createElementVNode("p", _hoisted_4$6, toDisplayString(__props.snippet), 1),
+        __props.locationLabel ? (openBlock(), createElementBlock("p", _hoisted_5$4, toDisplayString(__props.locationLabel), 1)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const _hoisted_1$c = ["aria-label"];
+const CLOSE_DELAY_MS = 80;
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "CkCitation"
+  },
+  __name: "CkCitation",
+  props: {
+    selected: { type: Boolean, default: false },
+    ariaLabel: { default: void 0 },
+    openSourceLabel: { default: void 0 },
+    index: {},
+    fileName: {},
+    snippet: {},
+    locationLabel: { default: void 0 },
+    url: { default: void 0 }
+  },
+  emits: ["open-source"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const labels = useChatKitLabels();
+    const triggerLabel = computed(
+      () => props.ariaLabel ?? `${labels.value.citationSourceLabel ?? defaultChatKitLabels.citationSourceLabel} ${props.index}`
+    );
+    const open = ref(false);
+    const isPointerInteraction = ref(false);
+    let closeTimer;
+    function show() {
+      if (closeTimer) {
+        clearTimeout(closeTimer);
+        closeTimer = void 0;
+      }
+      open.value = true;
+    }
+    function scheduleHide() {
+      if (closeTimer) clearTimeout(closeTimer);
+      closeTimer = setTimeout(() => {
+        open.value = false;
+        closeTimer = void 0;
+      }, CLOSE_DELAY_MS);
+    }
+    function onPointerEnter() {
+      isPointerInteraction.value = true;
+      show();
+    }
+    function onPointerLeave() {
+      isPointerInteraction.value = false;
+      scheduleHide();
+    }
+    function onOpenAutoFocus(event) {
+      if (isPointerInteraction.value) event.preventDefault();
+    }
+    function onContentFocusOut(event) {
+      const nextTarget = event.relatedTarget;
+      const content = event.currentTarget;
+      if (!nextTarget || !content.contains(nextTarget)) {
+        scheduleHide();
+      }
+    }
+    onBeforeUnmount(() => {
+      if (closeTimer) clearTimeout(closeTimer);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(UiPopover), {
+        open: open.value,
+        "onUpdate:open": _cache[1] || (_cache[1] = ($event) => open.value = $event)
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(UiPopoverTrigger), { "as-child": "" }, {
+            default: withCtx(() => [
+              createElementVNode("button", {
+                type: "button",
+                "aria-label": triggerLabel.value,
+                class: normalizeClass([
+                  "ck-citation mx-px inline-flex h-5 min-w-5 select-none items-center justify-center rounded-sm px-1 align-middle text-sm leading-4 tabular-nums transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  __props.selected ? "bg-background-accent-soft text-black" : "bg-background-accent-yellow text-background-status-warning"
+                ]),
+                onMouseenter: onPointerEnter,
+                onMouseleave: onPointerLeave
+              }, toDisplayString(__props.index), 43, _hoisted_1$c)
+            ]),
+            _: 1
+          }),
+          createVNode(unref(UiPopoverContent), {
+            align: "start",
+            "side-offset": 8,
+            class: "w-auto border-0 bg-transparent p-0 shadow-none",
+            onOpenAutoFocus,
+            onMouseenter: onPointerEnter,
+            onMouseleave: onPointerLeave,
+            onFocusin: show,
+            onFocusout: onContentFocusOut
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(_sfc_main$n), {
+                "file-name": __props.fileName,
+                snippet: __props.snippet,
+                "location-label": __props.locationLabel,
+                url: __props.url,
+                "open-source-label": __props.openSourceLabel,
+                onOpenSource: _cache[0] || (_cache[0] = (u) => emit("open-source", u))
+              }, null, 8, ["file-name", "snippet", "location-label", "url", "open-source-label"])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["open"]);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const CkCitation = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-0d83c5f8"]]);
 const _hoisted_1$b = ["data-message-row"];
 const _hoisted_2$7 = {
   key: 0,
@@ -395,13 +583,6 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
 const CkCopyMessageActionButton = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-f77a1193"]]);
 const _hoisted_1$9 = {
   width: "208",
@@ -740,6 +921,28 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 const CkFeedbackButton = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-245705b8"]]);
+function useCitationRendering(citations, onOpenSource) {
+  const sourcesByIndex = computed(
+    () => new Map(
+      (toValue(citations) ?? []).map((source) => [source.index, source])
+    )
+  );
+  const citationPlugins = computed(() => {
+    const list = toValue(citations);
+    if (!list?.length) return [];
+    const indices = new Set(list.map((source) => source.index));
+    return [[remarkCitations, { indices }]];
+  });
+  function renderCitationNode(el, slot) {
+    if (!el.hasAttribute("data-citation-index")) return null;
+    const index = Number(el.getAttribute("data-citation-index"));
+    const source = sourcesByIndex.value.get(index);
+    if (!source) return null;
+    if (slot) return slot({ source, openSource: onOpenSource });
+    return h(CkCitation, { ...source, onOpenSource });
+  }
+  return { citationPlugins, renderCitationNode };
+}
 const defaultMarkdownClasses = {
   p: "my-1 leading-7",
   a: "underline underline-offset-4",
@@ -759,25 +962,29 @@ const defaultMarkdownClasses = {
   hr: "my-4"
 };
 const TABLE_WRAPPER_CLASS = "max-w-full overflow-x-auto";
-function domToVNode(node, slots, classes, tableLabel) {
+function renderCodeBlock(el, ctx) {
+  if (el.tagName !== "PRE" || el.firstElementChild?.tagName !== "CODE") {
+    return null;
+  }
+  if (!ctx.slots["code-block"]) return null;
+  const codeEl = el.firstElementChild;
+  const language = codeEl.className?.match(/language-(\S+)/)?.[1] ?? "";
+  const code = codeEl.textContent ?? "";
+  return ctx.slots["code-block"]({ code, language });
+}
+function domToVNode(node, ctx) {
   if (node.nodeType === Node.TEXT_NODE) return node.textContent;
   if (node.nodeType !== Node.ELEMENT_NODE) return null;
   const el = node;
-  if (el.tagName === "PRE" && el.firstElementChild?.tagName === "CODE") {
-    const codeEl = el.firstElementChild;
-    const language = codeEl.className?.match(/language-(\S+)/)?.[1] ?? "";
-    const code = codeEl.textContent ?? "";
-    if (slots["code-block"]) {
-      return slots["code-block"]({ code, language });
-    }
-  }
-  const children = Array.from(node.childNodes).map((child) => domToVNode(child, slots, classes, tableLabel)).filter((c) => c != null);
+  const special = renderCodeBlock(el, ctx) ?? ctx.renderCitation(el);
+  if (special != null) return special;
+  const children = Array.from(node.childNodes).map((child) => domToVNode(child, ctx)).filter((c) => c != null);
   const attrs = {};
   for (const attr of el.attributes) {
     attrs[attr.name] = attr.value;
   }
   const tag = el.tagName.toLowerCase();
-  const customClass = classes[tag];
+  const customClass = ctx.classes[tag];
   if (customClass) {
     attrs.class = attrs.class ? `${attrs.class} ${customClass}` : customClass;
   }
@@ -789,7 +996,7 @@ function domToVNode(node, slots, classes, tableLabel) {
         class: TABLE_WRAPPER_CLASS,
         tabindex: "0",
         role: "region",
-        "aria-label": tableLabel
+        "aria-label": ctx.tableLabel
       },
       [vnode]
     );
@@ -804,12 +1011,30 @@ const _sfc_main$f = defineComponent({
       type: Object,
       default: () => ({})
     },
-    plugins: { type: Array, default: void 0 }
+    plugins: { type: Array, default: void 0 },
+    citations: {
+      type: Array,
+      default: void 0
+    }
+  },
+  emits: {
+    "open-source": (url) => typeof url === "string"
   },
-  setup(props, { slots }) {
-    const { content, plugins } = toRefs(props);
-    const { html } = useMarkdownParser(content, plugins);
+  setup(props, { slots, emit }) {
+    const { content } = toRefs(props);
     const labels = useChatKitLabels();
+    function handleOpenSource(url) {
+      emit("open-source", url);
+    }
+    const { citationPlugins, renderCitationNode } = useCitationRendering(
+      () => props.citations,
+      handleOpenSource
+    );
+    const effectivePlugins = computed(() => [
+      ...props.plugins ?? [],
+      ...citationPlugins.value
+    ]);
+    const { html } = useMarkdownParser(content, effectivePlugins);
     const parsedNodes = computed(() => {
       const raw = html.value;
       if (!raw) return [];
@@ -821,9 +1046,13 @@ const _sfc_main$f = defineComponent({
       ...props.classes
     }));
     return () => {
-      const elementClasses = mergedClasses.value;
-      const tableLabel = labels.value.markdownTableLabel ?? defaultChatKitLabels.markdownTableLabel;
-      const children = parsedNodes.value.map((node) => domToVNode(node, slots, elementClasses, tableLabel)).filter((c) => c != null);
+      const ctx = {
+        slots,
+        classes: mergedClasses.value,
+        tableLabel: labels.value.markdownTableLabel ?? defaultChatKitLabels.markdownTableLabel,
+        renderCitation: (el) => renderCitationNode(el, slots.citation)
+      };
+      const children = parsedNodes.value.map((node) => domToVNode(node, ctx)).filter((c) => c != null);
       return h(
         "div",
         { class: "markdown-renderer min-w-0 break-words" },
@@ -2088,7 +2317,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         ]),
         "agent-message": withCtx(({ message }) => [
           renderSlot(_ctx.$slots, "agent-message", { message }, () => [
-            createVNode(_sfc_main$m, null, createSlots({
+            createVNode(_sfc_main$o, null, createSlots({
               footer: withCtx(() => [
                 renderSlot(_ctx.$slots, "agent-message-footer", { message }, () => [
                   getMessageText(message) && !isLoading(message) ? (openBlock(), createBlock(CkCopyMessageActionButton, {
@@ -2367,7 +2596,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "stop-icon", {}, () => [
-                  createVNode(_sfc_main$n)
+                  createVNode(_sfc_main$p)
                 ])
               ]),
               _: 3
@@ -2377,7 +2606,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }), {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "send-icon", {}, () => [
-                  createVNode(_sfc_main$o)
+                  createVNode(_sfc_main$q)
                 ])
               ]),
               _: 3
@@ -2413,28 +2642,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 export {
-  CkCopyMessageActionButton as C,
-  _sfc_main$m as _,
-  _sfc_main$2 as a,
-  _sfc_main$l as b,
-  CkDropZoneOverlay as c,
-  CkFeedbackButton as d,
-  CkFeedbackDialog as e,
-  _sfc_main$c as f,
-  _sfc_main$1 as g,
-  _sfc_main$b as h,
-  _sfc_main$a as i,
-  _sfc_main as j,
-  _sfc_main$f as k,
-  _sfc_main$k as l,
-  _sfc_main$9 as m,
-  CkPromptInput as n,
-  _sfc_main$4 as o,
-  _sfc_main$7 as p,
-  _sfc_main$8 as q,
-  _sfc_main$6 as r,
-  _sfc_main$o as s,
-  _sfc_main$n as t,
-  CkUserMessage as u,
-  formatRelativeTime as v
+  CkCitation as C,
+  _sfc_main$o as _,
+  _sfc_main$n as a,
+  _sfc_main$2 as b,
+  _sfc_main$l as c,
+  CkCopyMessageActionButton as d,
+  CkDropZoneOverlay as e,
+  CkFeedbackButton as f,
+  CkFeedbackDialog as g,
+  _sfc_main$c as h,
+  _sfc_main$1 as i,
+  _sfc_main$b as j,
+  _sfc_main$a as k,
+  _sfc_main as l,
+  _sfc_main$f as m,
+  _sfc_main$k as n,
+  _sfc_main$9 as o,
+  CkPromptInput as p,
+  _sfc_main$4 as q,
+  _sfc_main$7 as r,
+  _sfc_main$8 as s,
+  _sfc_main$6 as t,
+  _sfc_main$q as u,
+  _sfc_main$p as v,
+  CkUserMessage as w,
+  formatRelativeTime as x
 };