@aleph-alpha/chat-kit 6.3.0 → 6.4.1

package/dist/{CkHistory.vue_vue_type_script_setup_true_lang-gV-lp0ZB.js → CkHistory.vue_vue_type_script_setup_true_lang-BvRIp3m6.js}

@@ -1,6 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, createElementBlock, createElementVNode, normalizeClass, renderSlot, createCommentVNode, mergeProps, withCtx, ref, watch, onScopeDispose, computed, useTemplateRef, createVNode, toDisplayString, resolveDynamicComponent, onBeforeUnmount, useSlots, onMounted, nextTick, onUnmounted, Fragment, renderList, normalizeStyle, Transition, createStaticVNode, Teleport, withModifiers, toValue, h, toRefs, useId, createTextVNode, useAttrs, onUpdated, createSlots, normalizeProps, guardReactiveProps, Comment, Text } from "vue";
-import { UiIcon, UiButton, UiFileType, UiTooltip, UiPopover, UiPopoverTrigger, UiPopoverContent, formatFileSize, UiDialog, UiDialogContent, UiDialogDescription, UiFieldLabel, UiToggleGroup, UiToggleGroupItem, UiField, UiTextarea, UiFileItem, UiProgress, Primitive, UiFloatActions, UiFloatActionItems, UiCodeBlock, UiAvatar, UiAvatarImage, UiSpinner, UiAvatarFallback, UiSidebarPopoverMenu, UiSidebarPopoverMenuItem } from "@aleph-alpha/ui-library";
-import { u as useChatKitLabels, d as defaultChatKitLabels, r as remarkCitations, b as useMarkdownParser } from "./useChatKitLabels-CatQSpfL.js";
+import { UiIcon, UiButton, UiFileType, UiTooltip, UiPopover, UiPopoverTrigger, UiPopoverContent, formatFileSize, UiDialog, UiDialogContent, UiDialogDescription, UiFieldLabel, UiToggleGroup, UiToggleGroupItem, UiField, UiTextarea, UiFileItem, UiProgress, Primitive, UiFloatActions, UiFloatActionItems, UiFadeMask, UiCodeBlock, UiAvatar, UiAvatarImage, UiSpinner, UiAvatarFallback, UiSidebarPopoverMenu, UiSidebarPopoverMenuItem } from "@aleph-alpha/ui-library";
+import { u as useChatKitLabels, d as defaultChatKitLabels, r as remarkCitations, b as useMarkdownParser } from "./useChatKitLabels-DxW0N5U-.js";
+import { f as findAndReplace } from "./index-CfVHzirA.js";
 const MINUTE = 60;
 const HOUR = 60 * MINUTE;
 const DAY = 24 * HOUR;
@@ -1160,6 +1161,15 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 const CkFeedbackButton = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-c4c638c3"]]);
+const SOFT_BREAK_RE = /\r?\n/g;
+const remarkBreaks = () => {
+  return (tree) => {
+    findAndReplace(tree, [
+      SOFT_BREAK_RE,
+      () => ({ type: "break" })
+    ]);
+  };
+};
 function useCitationRendering(citations, onOpenSource) {
   const sourcesByIndex = computed(
     () => new Map(
@@ -1251,6 +1261,7 @@ const _sfc_main$i = defineComponent({
       default: () => ({})
     },
     plugins: { type: Array, default: void 0 },
+    breaks: { type: Boolean, default: false },
     citations: {
       type: Array,
       default: void 0
@@ -1271,6 +1282,7 @@ const _sfc_main$i = defineComponent({
     );
     const effectivePlugins = computed(() => [
       ...props.plugins ?? [],
+      ...props.breaks ? [remarkBreaks] : [],
       ...citationPlugins.value
     ]);
     const { html } = useMarkdownParser(content, effectivePlugins);
@@ -2733,7 +2745,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     onMounted(async () => {
       const root = rootRef.value;
       if (!root) return;
-      const { createCrepeEditor } = await import("./createCrepeEditor-Ci5FHHIV.js");
+      const { createCrepeEditor } = await import("./createCrepeEditor-BGSlwmKn.js");
       if (destroyed) return;
       const initialMarkdown = props.modelValue;
       lastKnownMarkdown = initialMarkdown;
@@ -2811,9 +2823,10 @@ const CkMilkdownEditor = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId",
 const _hoisted_1$1 = ["aria-disabled"];
 const _hoisted_2 = {
   key: 0,
-  class: "border-border-surface-default bg-background-surface-muted flex items-center justify-between border-b px-4 py-2"
+  class: "bg-background-surface-muted-subtle flex h-9 items-center justify-between px-3"
 };
-const _hoisted_3 = { class: "text-content-on-surface-secondary font-mono text-sm" };
+const _hoisted_3 = { class: "text-content-on-surface-secondary label-12-regular" };
+const FADE_HEIGHT = "53px";
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkCodeEditor" },
   __name: "CkCodeEditor",
@@ -2830,7 +2843,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     showLineNumbers: { type: Boolean, default: true },
     lineWrapping: { type: Boolean, default: false },
     maxHeight: { default: void 0 },
+    scrollFade: { type: Boolean, default: true },
     autofocus: { type: Boolean, default: false },
+    badge: { default: void 0 },
     writeToClipboard: { type: Function, default: void 0 }
   },
   emits: ["update:modelValue", "focus", "blur", "copy"],
@@ -2850,6 +2865,40 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const copyLabel = computed(
       () => isCopied.value ? labels.value.codeEditorCopied ?? "Copied" : labels.value.codeEditorCopy ?? "Copy code"
     );
+    const canScrollUp = ref(false);
+    const canScrollDown = ref(false);
+    let scrollTarget;
+    let scrollObserver;
+    function edgeToFade(up, down) {
+      if (up && down) return "both";
+      return up ? "top" : "bottom";
+    }
+    const fadeProps = computed(() => {
+      if (!props.scrollFade) return {};
+      const up = canScrollUp.value;
+      const down = canScrollDown.value;
+      return {
+        position: edgeToFade(up, down),
+        background: "secondary",
+        style: { "--ui-fade-mask-height": up || down ? FADE_HEIGHT : "0px" }
+      };
+    });
+    function syncScrollFades() {
+      if (!scrollTarget) return;
+      const { scrollTop, scrollHeight, clientHeight } = scrollTarget;
+      canScrollUp.value = scrollTop > 1;
+      canScrollDown.value = scrollTop + clientHeight < scrollHeight - 1;
+    }
+    function watchScrolling(scroller, content) {
+      scrollTarget = scroller;
+      scroller.addEventListener("scroll", syncScrollFades, { passive: true });
+      if (typeof ResizeObserver !== "undefined") {
+        scrollObserver = new ResizeObserver(syncScrollFades);
+        scrollObserver.observe(scroller);
+        scrollObserver.observe(content);
+      }
+      syncScrollFades();
+    }
     let editor;
     let destroyed = false;
     let lastKnownCode = props.modelValue;
@@ -2862,7 +2911,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     onMounted(async () => {
       const parent = hostRef.value;
       if (!parent) return;
-      const { createCodeMirror } = await import("./createCodeMirror-BkV6FEPn.js");
+      const { createCodeMirror } = await import("./createCodeMirror-BO-TWTzn.js");
       if (destroyed) return;
       const initialCode = props.modelValue;
       lastKnownCode = initialCode;
@@ -2875,9 +2924,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         readonly: isLocked.value,
         showLineNumbers: props.showLineNumbers,
         lineWrapping: props.lineWrapping,
+        badge: props.badge,
         onChange: handleChange,
-        onFocus: () => emit("focus"),
-        onBlur: () => emit("blur")
+        onFocus: () => emit("focus")
       });
       if (destroyed) {
         handle.destroy();
@@ -2885,6 +2934,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
       editor = handle;
       if (props.modelValue !== initialCode) handle.setCode(props.modelValue);
+      watchScrolling(handle.view.scrollDOM, handle.view.contentDOM);
       isReady.value = true;
       if (props.autofocus) handle.focus();
     });
@@ -2894,6 +2944,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         if (next === lastKnownCode) return;
         lastKnownCode = next;
         editor?.setCode(next);
+        void nextTick(syncScrollFades);
       }
     );
     watch(
@@ -2911,9 +2962,16 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       () => props.lineWrapping,
       (wrap) => editor?.setLineWrapping(wrap)
     );
+    watch(
+      () => props.badge,
+      (rule) => editor?.setBadge(rule)
+    );
     onBeforeUnmount(() => {
       destroyed = true;
       clearTimeout(copyTimer);
+      scrollTarget?.removeEventListener("scroll", syncScrollFades);
+      scrollObserver?.disconnect();
+      scrollTarget = void 0;
       editor?.destroy();
       editor = void 0;
     });
@@ -2949,7 +3007,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         ref_key: "rootRef",
         ref: rootRef,
         class: normalizeClass([
-          "ck-code-editor ck-code-surface border-border-surface-default min-w-0 overflow-hidden rounded-lg border",
+          "ck-code-editor ck-code-surface border-border-surface-default bg-background-input-default min-w-0 overflow-hidden rounded-xl border",
           isReady.value && "ck-code-editor--ready",
           isLocked.value && "ck-code-editor--readonly",
           __props.disabled && "ck-code-editor--disabled"
@@ -2975,17 +3033,22 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["aria-label"])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", {
-          ref_key: "hostRef",
-          ref: hostRef,
-          class: "ck-code-editor__host",
-          style: normalizeStyle(__props.maxHeight ? { "--ck-code-max-height": __props.maxHeight } : void 0)
-        }, null, 4)
+        (openBlock(), createBlock(resolveDynamicComponent(__props.scrollFade ? unref(UiFadeMask) : "div"), mergeProps(fadeProps.value, { class: "ck-code-editor__body min-w-0" }), {
+          default: withCtx(() => [
+            createElementVNode("div", {
+              ref_key: "hostRef",
+              ref: hostRef,
+              class: "ck-code-editor__host",
+              style: normalizeStyle(__props.maxHeight ? { "--ck-code-max-height": __props.maxHeight } : void 0)
+            }, null, 4)
+          ]),
+          _: 1
+        }, 16))
       ], 42, _hoisted_1$1);
     };
   }
 });
-const CkCodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-567251c3"]]);
+const CkCodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-75f52b7e"]]);
 const _hoisted_1 = {
   key: 1,
   class: "flex size-8 shrink-0 items-center justify-center rounded-2xl bg-background-surface-muted-subtle"

package/dist/adapters/responses-api.js

@@ -1,4 +1,4 @@
-import { g as generateId } from "../markdownToPlainText-BOtlQ_BY.js";
+import { g as generateId } from "../markdownToPlainText-DN_G-I6g.js";
 function extractMessageText(parts) {
   let text = "";
   for (const part of parts) {

package/dist/chat-kit.css

@@ -170,22 +170,69 @@
   pointer-events: none;
 }
 
+/* The body follows the design-system field rather than `UiCodeBlock`: body
+ * text in the primary content colour on the input surface, with muted mono
+ * line numbers. Only the syntax colours stay shared with `UiCodeBlock` (see
+ * `helpers/codemirror/code-palette.css`). The overrides live here, not in
+ * `theme.ts`, because `CkMilkdownEditor`'s code blocks use that theme too and
+ * must keep matching the rendered block. */
+.ck-code-editor[data-v-75f52b7e] {
+  --ck-cm-bg: transparent;
+  --ck-cm-foreground: oklch(var(--content-on-surface-primary));
+  --ck-cm-line-number: oklch(var(--content-on-surface-muted));
+}
+
 /* The editor fills the panel; `:deep` is needed because CodeMirror builds its
  * own DOM, which scoped styles do not reach. */
-.ck-code-editor__host[data-v-567251c3] .cm-editor {
+.ck-code-editor__host[data-v-75f52b7e] .cm-editor {
   background: var(--ck-cm-bg);
   color: var(--ck-cm-foreground);
 }
-.ck-code-editor__host[data-v-567251c3] .cm-scroller {
+
+/* Same declarations as the `body-14-regular` typography utility. */
+.ck-code-editor__host[data-v-75f52b7e] .cm-scroller {
   max-height: var(--ck-code-max-height, none);
+  font-family: Saans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+}
+
+/* 12px below the header, 16px above the bottom edge, and a 20px right inset,
+ * as in the design. */
+.ck-code-editor__host[data-v-75f52b7e] .cm-content {
+  padding: 0.75rem 1.25rem 1rem 1rem;
+}
+
+/* The number column already carries the 1rem left inset, so the code must not
+ * pay for it a second time. The sibling selector only matches while the gutter
+ * is mounted, which is exactly when `showLineNumbers` is on. */
+.ck-code-editor__host[data-v-75f52b7e] .cm-gutters ~ .cm-content {
+  padding-left: 0;
+}
+
+/* Numbers stay monospaced so the column does not jitter as digits change; the
+ * 12px right padding is the gap before the code. */
+.ck-code-editor__host[data-v-75f52b7e] .cm-lineNumbers .cm-gutterElement {
+  min-width: 0;
+  padding: 0 0.75rem 0 1rem;
+  /* `CODE_FONT_FAMILY` from `theme.ts`, repeated because importing it here
+   * would pull CodeMirror out of its lazy chunk. */
+  font-family:
+    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono',
+    monospace;
+  font-weight: 500;
+}
+.ck-code-editor__host[data-v-75f52b7e] .cm-placeholder {
+  color: oklch(var(--content-on-surface-muted));
 }
 
 /* Nothing is being edited, so the active-line band would only be noise. */
-.ck-code-editor--readonly .ck-code-editor__host[data-v-567251c3] .cm-activeLine,
-.ck-code-editor--readonly .ck-code-editor__host[data-v-567251c3] .cm-activeLineGutter {
+.ck-code-editor--readonly .ck-code-editor__host[data-v-75f52b7e] .cm-activeLine,
+.ck-code-editor--readonly .ck-code-editor__host[data-v-75f52b7e] .cm-activeLineGutter {
   background: transparent;
 }
-.ck-code-editor--disabled[data-v-567251c3] {
+.ck-code-editor--disabled[data-v-75f52b7e] {
   opacity: 0.6;
   cursor: not-allowed;
   pointer-events: none;
@@ -207,11 +254,23 @@
  * Exact parity is not achievable for every token: Shiki classifies with
  * TextMate grammars and CodeMirror with Lezer, and the two disagree at the
  * edges. The mapping in `theme.ts` targets the classes that actually occur in
- * everyday code.
+ * everyday code. Where one Lezer tag covers cases the GitHub themes colour
+ * differently, the mapping follows the more common one, which leaves a few
+ * known gaps: YAML keys and plain scalars both arrive as tags that mean
+ * something else in JavaScript, so they stay unhighlighted; `typeName` is blue
+ * here because that is right for TypeScript's primitives, though Rust and Go
+ * would want purple and red; and a fenced code block inside a Markdown
+ * document is not highlighted in its own language the way Shiki's embedded
+ * grammars do it.
  */
 
 .ck-code-surface {
-  --ck-cm-bg: #ffffff;
+  /* Held as bare oklch components, not a hex, because that is the form both
+   * `oklch()` and `UiFadeMask`'s surface variable need in order to fade the
+   * colour out to zero alpha. `--ck-cm-bg` is derived from it so there is one
+   * source of truth. */
+  --ck-cm-bg-components: 100% 0 89.88;
+  --ck-cm-bg: oklch(var(--ck-cm-bg-components));
   --ck-cm-foreground: #24292e;
   --ck-cm-keyword: #d73a49;
   --ck-cm-string: #032f62;
@@ -226,10 +285,18 @@
   --ck-cm-tag: #22863a;
   --ck-cm-error: #b31d28;
   --ck-cm-selection: oklch(var(--background-accent-soft));
+  /* Line numbers. `UiCodeBlock` draws its gutter as the code foreground at
+   * 40% opacity rather than as a colour of its own, so this is derived from
+   * `--ck-cm-foreground` and needs no dark-mode counterpart. */
+  --ck-cm-line-number: color-mix(
+    in oklab,
+    var(--ck-cm-foreground) 40%,
+    transparent
+  );
 }
 
 html.dark .ck-code-surface {
-  --ck-cm-bg: #24292e;
+  --ck-cm-bg-components: 27.81% 0.0117 248.25;
   --ck-cm-foreground: #e1e4e8;
   --ck-cm-keyword: #f97583;
   --ck-cm-string: #9ecbff;
@@ -1372,9 +1439,12 @@ img.ProseMirror-separator {
   .milkdown-code-block
   .cm-lineNumbers
   .cm-gutterElement {
-  min-width: 2.25rem;
-  padding: 0 0.75rem 0 1rem;
-  color: oklch(var(--content-on-surface-muted));
+  /* Geometry and colour come from `theme.ts`, which matches `UiCodeBlock`'s
+   * gutter; this rule only exists because Crepe's own code-block styles would
+   * otherwise win on specificity. */
+  min-width: 4rem;
+  padding: 0 1rem;
+  color: var(--ck-cm-line-number);
   text-align: right;
 }