@aleph-alpha/chat-kit 3.0.0 → 3.1.0

package/dist/{CkInput.vue_vue_type_script_setup_true_lang-CwH5M5WD.js → CkInput.vue_vue_type_script_setup_true_lang-DKzc21Yp.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-ZutacPad.js";
+import { u as useChatKitLabels, d as defaultChatKitLabels, a as useMarkdownParser } from "./useChatKitLabels-CLsWWwgG.js";
 const MINUTE = 60;
 const HOUR = 60 * MINUTE;
 const DAY = 24 * HOUR;
@@ -66,7 +66,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$c = { class: "flex w-full flex-col gap-6 pb-6" };
+const _hoisted_1$c = { class: "flex w-full min-w-0 flex-col gap-6 pb-6" };
 const _hoisted_2$8 = {
   key: 0,
   class: "flex items-start gap-3"
@@ -81,7 +81,7 @@ const _hoisted_4$6 = {
   "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 text-base leading-7" };
+const _hoisted_5$4 = { 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"
@@ -113,11 +113,11 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
 const _hoisted_1$b = ["data-message-row"];
 const _hoisted_2$7 = {
   key: 0,
-  class: "flex justify-end"
+  class: "flex min-w-0 justify-end"
 };
 const _hoisted_3$6 = {
   key: 1,
-  class: "flex justify-start"
+  class: "flex min-w-0 justify-start"
 };
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{ name: "CkConversationLayout" },
@@ -257,7 +257,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         (openBlock(true), createElementBlock(Fragment, null, renderList(__props.messages, (message) => {
           return openBlock(), createElementBlock("div", {
             key: message.id,
-            "data-message-row": message.role
+            "data-message-row": message.role,
+            class: "min-w-0"
           }, [
             message.role === "user" ? (openBlock(), createElementBlock("div", _hoisted_2$7, [
               renderSlot(_ctx.$slots, "user-message", { message })
@@ -742,13 +743,14 @@ const CkFeedbackButton = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId",
 const defaultMarkdownClasses = {
   p: "my-1 leading-7",
   a: "underline underline-offset-4",
+  img: "max-w-full h-auto",
   h1: "mt-4 mb-2 text-2xl font-bold",
   h2: "mt-3 mb-2 text-xl font-semibold",
   h3: "mt-3 mb-1 text-lg font-semibold",
   ul: "my-1 ml-6 list-disc",
   ol: "my-1 ml-6 list-decimal",
   li: "my-0.5",
-  pre: "my-2 overflow-x-auto rounded-lg p-4",
+  pre: "my-2 max-w-full overflow-x-auto rounded-lg p-4",
   code: "rounded px-1.5 py-0.5",
   blockquote: "my-2 border-l-2 pl-4 italic",
   table: "my-2 w-full border-collapse",
@@ -756,7 +758,8 @@ const defaultMarkdownClasses = {
   td: "border p-2",
   hr: "my-4"
 };
-function domToVNode(node, slots, classes) {
+const TABLE_WRAPPER_CLASS = "max-w-full overflow-x-auto";
+function domToVNode(node, slots, classes, tableLabel) {
   if (node.nodeType === Node.TEXT_NODE) return node.textContent;
   if (node.nodeType !== Node.ELEMENT_NODE) return null;
   const el = node;
@@ -768,7 +771,7 @@ function domToVNode(node, slots, classes) {
       return slots["code-block"]({ code, language });
     }
   }
-  const children = Array.from(node.childNodes).map((child) => domToVNode(child, slots, classes)).filter((c) => c != null);
+  const children = Array.from(node.childNodes).map((child) => domToVNode(child, slots, classes, tableLabel)).filter((c) => c != null);
   const attrs = {};
   for (const attr of el.attributes) {
     attrs[attr.name] = attr.value;
@@ -778,7 +781,20 @@ function domToVNode(node, slots, classes) {
   if (customClass) {
     attrs.class = attrs.class ? `${attrs.class} ${customClass}` : customClass;
   }
-  return h(tag, attrs, children);
+  const vnode = h(tag, attrs, children);
+  if (tag === "table") {
+    return h(
+      "div",
+      {
+        class: TABLE_WRAPPER_CLASS,
+        tabindex: "0",
+        role: "region",
+        "aria-label": tableLabel
+      },
+      [vnode]
+    );
+  }
+  return vnode;
 }
 const _sfc_main$f = defineComponent({
   name: "CkMarkdownRenderer",
@@ -793,6 +809,7 @@ const _sfc_main$f = defineComponent({
   setup(props, { slots }) {
     const { content, plugins } = toRefs(props);
     const { html } = useMarkdownParser(content, plugins);
+    const labels = useChatKitLabels();
     const parsedNodes = computed(() => {
       const raw = html.value;
       if (!raw) return [];
@@ -805,8 +822,13 @@ const _sfc_main$f = defineComponent({
     }));
     return () => {
       const elementClasses = mergedClasses.value;
-      const children = parsedNodes.value.map((node) => domToVNode(node, slots, elementClasses)).filter((c) => c != null);
-      return h("div", { class: "markdown-renderer" }, children);
+      const tableLabel = labels.value.markdownTableLabel ?? defaultChatKitLabels.markdownTableLabel;
+      const children = parsedNodes.value.map((node) => domToVNode(node, slots, elementClasses, tableLabel)).filter((c) => c != null);
+      return h(
+        "div",
+        { class: "markdown-renderer min-w-0 break-words" },
+        children
+      );
     };
   }
 });
@@ -1596,7 +1618,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$3 = ["disabled", "aria-expanded", "aria-label"];
-const _hoisted_2$2 = { class: "max-w-[10rem] truncate" };
+const _hoisted_2$2 = { class: "min-w-0 max-w-[10rem] truncate" };
 const _hoisted_3$1 = ["aria-label"];
 const _hoisted_4$1 = ["aria-selected", "onClick"];
 const _hoisted_5 = { class: "min-w-0 flex-1 truncate" };
@@ -1644,7 +1666,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             default: withCtx(() => [
               createElementVNode("button", {
                 type: "button",
-                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",
+                class: "ck-model-selector__trigger inline-flex h-9 min-w-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",
                 disabled: __props.disabled,
                 "aria-haspopup": "listbox",
                 "aria-expanded": open.value,
@@ -1654,6 +1676,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 createVNode(unref(UiIcon), {
                   name: "chevron-down",
                   size: 16,
+                  class: "shrink-0",
                   "aria-hidden": "true"
                 })
               ], 8, _hoisted_1$3)

package/dist/components/base/CkAgentMessage/CkAgentMessage.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CkAgentMessage.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkAgentMessage/CkAgentMessage.vue"],"names":[],"mappings":"AAwGA,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AACjF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK9C,QAAA,MAAM,UAAU,+QACd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CkAgentMessage.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkAgentMessage/CkAgentMessage.vue"],"names":[],"mappings":"AA0GA,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AACjF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK9C,QAAA,MAAM,UAAU,+QACd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/base/CkConversationLayout/CkConversationLayout.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CkConversationLayout.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkConversationLayout/CkConversationLayout.vue"],"names":[],"mappings":"AAmNA,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAC5D,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAyPO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB;kBArP3C,CAAC,EAAE;MAqP2D,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC1I,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;wBAlPO,CAAC,KAAK,EAAE;YAAE,OAAO,EAAE,CAAC,CAAA;SAAE,KAAK,IAAI;yBAC9B,CAAC,KAAK,EAAE;YAAE,OAAO,EAAE,CAAC,CAAA;SAAE,KAAK,IAAI;;UAmP3C,EAAE;EAEL,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAI,CAAC;wBACvD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"CkConversationLayout.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkConversationLayout/CkConversationLayout.vue"],"names":[],"mappings":"AAoNA,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAC5D,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WA6PO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB;kBAzP3C,CAAC,EAAE;MAyP2D,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC1I,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;wBAtPO,CAAC,KAAK,EAAE;YAAE,OAAO,EAAE,CAAC,CAAA;SAAE,KAAK,IAAI;yBAC9B,CAAC,KAAK,EAAE;YAAE,OAAO,EAAE,CAAC,CAAA;SAAE,KAAK,IAAI;;UAuP3C,EAAE;EAEL,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAI,CAAC;wBACvD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/components/base/CkMarkdownRenderer/CkMarkdownRenderer.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CkMarkdownRenderer.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkMarkdownRenderer/CkMarkdownRenderer.vue"],"names":[],"mappings":"AA4FA,OAAO,EAKL,KAAK,QAAQ,EAEb,KAAK,KAAK,EACX,MAAM,KAAK,CAAC;AACb,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;wBAyCnC,OAAO,YAAY;AAAxC,wBAAyC;AAQzC,QAAA,MAAM,YAAY;;;;;;cAKI,QAAQ,CAAC,wBAAwB,CAAC;;;;cAG1B,QAAQ,CAAC,aAAa,CAAC;;;;;;;;;;;cAH/B,QAAQ,CAAC,wBAAwB,CAAC;;;;cAG1B,QAAQ,CAAC,aAAa,CAAC;;;;;;4EA0BnD,CAAC"}
+{"version":3,"file":"CkMarkdownRenderer.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkMarkdownRenderer/CkMarkdownRenderer.vue"],"names":[],"mappings":"AA4HA,OAAO,EAKL,KAAK,QAAQ,EAEb,KAAK,KAAK,EACX,MAAM,KAAK,CAAC;AACb,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAM7C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;wBA6DnC,OAAO,YAAY;AAAxC,wBAAyC;AAQzC,QAAA,MAAM,YAAY;;;;;;cAKI,QAAQ,CAAC,wBAAwB,CAAC;;;;cAG1B,QAAQ,CAAC,aAAa,CAAC;;;;;;;;;;;cAH/B,QAAQ,CAAC,wBAAwB,CAAC;;;;cAG1B,QAAQ,CAAC,aAAa,CAAC;;;;;;4EAkCnD,CAAC"}

package/dist/components/base/CkMarkdownRenderer/defaultMarkdownClasses.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultMarkdownClasses.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkMarkdownRenderer/defaultMarkdownClasses.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExD,eAAO,MAAM,sBAAsB,EAAE,wBAgBpC,CAAC"}
+{"version":3,"file":"defaultMarkdownClasses.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkMarkdownRenderer/defaultMarkdownClasses.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExD,eAAO,MAAM,sBAAsB,EAAE,wBAiBpC,CAAC"}

package/dist/components/base/CkModelSelector/CkModelSelector.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CkModelSelector.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkModelSelector/CkModelSelector.vue"],"names":[],"mappings":"AA4HA,OAAO,KAAK,EAAwB,oBAAoB,EAAE,MAAM,SAAS,CAAC;AA6Q1E,QAAA,MAAM,YAAY;;;;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"CkModelSelector.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkModelSelector/CkModelSelector.vue"],"names":[],"mappings":"AAiIA,OAAO,KAAK,EAAwB,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAiR1E,QAAA,MAAM,YAAY;;;;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/index.js

@@ -1,4 +1,4 @@
-import { _, a, b, C, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u } from "../CkInput.vue_vue_type_script_setup_true_lang-CwH5M5WD.js";
+import { _, a, b, C, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u } from "../CkInput.vue_vue_type_script_setup_true_lang-DKzc21Yp.js";
 export {
   _ as CkAgentMessage,
   a as CkConversation,

package/dist/handlers/index.js

@@ -1,5 +1,5 @@
 import { u } from "../useMessageHandler-CMdy-lm0.js";
-import { C, d, p, u as u2, a } from "../useChatKitLabels-ZutacPad.js";
+import { C, d, p, u as u2, a } from "../useChatKitLabels-CLsWWwgG.js";
 export {
   C as CHAT_KIT_LABELS,
   d as defaultChatKitLabels,

package/dist/handlers/useChatKitLabels.d.ts

@@ -73,6 +73,12 @@ export type ChatKitLabels = {
     modelSelectorListAriaLabel?: string;
     /** Trigger text shown by `CkModelSelector` when no model is selected. */
     modelSelectorPlaceholder?: string;
+    /**
+     * Accessible label for the horizontally scrollable wrapper around markdown
+     * tables in `CkMarkdownRenderer` (the wrapper is focusable so keyboard users
+     * can scroll wide tables). Falls back to `defaultChatKitLabels` when omitted.
+     */
+    markdownTableLabel?: string;
     /** Fallback title used by `CkHistory` when a conversation has no `title`. */
     historyItemUntitled: string;
     /** Accessible name for the trailing kebab trigger on each `CkHistory` row. */

package/dist/handlers/useChatKitLabels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useChatKitLabels.d.ts","sourceRoot":"","sources":["../../src/handlers/useChatKitLabels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG1D;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,0CAA0C;IAC1C,cAAc,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,qBAAqB,EAAE,MAAM,CAAC;IAC9B,gDAAgD;IAChD,gBAAgB,EAAE,MAAM,CAAC;IACzB,sFAAsF;IACtF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,4FAA4F;IAC5F,uBAAuB,EAAE,MAAM,CAAC;IAChC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+DAA+D;IAC/D,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,+DAA+D;IAC/D,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,gEAAgE;IAChE,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,kFAAkF;IAClF,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,qEAAqE;IACrE,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qEAAqE;IACrE,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,iEAAiE;IACjE,iCAAiC,CAAC,EAAE,MAAM,CAAC;IAC3C,iDAAiD;IACjD,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,iDAAiD;IACjD,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,0EAA0E;IAC1E,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,yEAAyE;IACzE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iEAAiE;IACjE,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,+DAA+D;IAC/D,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,yEAAyE;IACzE,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,6EAA6E;IAC7E,mBAAmB,EAAE,MAAM,CAAC;IAC5B,8EAA8E;IAC9E,0BAA0B,EAAE,MAAM,CAAC;IACnC,uEAAuE;IACvE,qBAAqB,EAAE,MAAM,CAAC;IAC9B,yEAAyE;IACzE,uBAAuB,EAAE,MAAM,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,oBAAoB,EAAE,aA8BlC,CAAC;AAEF,4CAA4C;AAC5C,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,WAAW,CAAC,aAAa,CAAC,CAC1C,CAAC;AAE5B,KAAK,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AAE5C,yFAAyF;AACzF,KAAK,cAAc,GACf,GAAG,CAAC,aAAa,CAAC,GAClB,WAAW,CAAC,aAAa,CAAC,GAC1B,CAAC,MAAM,aAAa,CAAC,CAAC;AAE1B;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI,CAKjE;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,IAAI,WAAW,CAAC,aAAa,CAAC,CAK7D"}
+{"version":3,"file":"useChatKitLabels.d.ts","sourceRoot":"","sources":["../../src/handlers/useChatKitLabels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG1D;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,0CAA0C;IAC1C,cAAc,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,qBAAqB,EAAE,MAAM,CAAC;IAC9B,gDAAgD;IAChD,gBAAgB,EAAE,MAAM,CAAC;IACzB,sFAAsF;IACtF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,4FAA4F;IAC5F,uBAAuB,EAAE,MAAM,CAAC;IAChC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+DAA+D;IAC/D,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,+DAA+D;IAC/D,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,gEAAgE;IAChE,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,kFAAkF;IAClF,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,qEAAqE;IACrE,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qEAAqE;IACrE,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,iEAAiE;IACjE,iCAAiC,CAAC,EAAE,MAAM,CAAC;IAC3C,iDAAiD;IACjD,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,iDAAiD;IACjD,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,0EAA0E;IAC1E,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,yEAAyE;IACzE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iEAAiE;IACjE,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,+DAA+D;IAC/D,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,yEAAyE;IACzE,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,6EAA6E;IAC7E,mBAAmB,EAAE,MAAM,CAAC;IAC5B,8EAA8E;IAC9E,0BAA0B,EAAE,MAAM,CAAC;IACnC,uEAAuE;IACvE,qBAAqB,EAAE,MAAM,CAAC;IAC9B,yEAAyE;IACzE,uBAAuB,EAAE,MAAM,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,oBAAoB,EAAE,aA+BlC,CAAC;AAEF,4CAA4C;AAC5C,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,WAAW,CAAC,aAAa,CAAC,CAC1C,CAAC;AAE5B,KAAK,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AAE5C,yFAAyF;AACzF,KAAK,cAAc,GACf,GAAG,CAAC,aAAa,CAAC,GAClB,WAAW,CAAC,aAAa,CAAC,GAC1B,CAAC,MAAM,aAAa,CAAC,CAAC;AAE1B;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI,CAKjE;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,IAAI,WAAW,CAAC,aAAa,CAAC,CAK7D"}

package/dist/index.js

@@ -1,7 +1,7 @@
 import { u } from "./useMessageHandler-CMdy-lm0.js";
-import { C, d, p, u as u2, a } from "./useChatKitLabels-ZutacPad.js";
+import { C, d, p, u as u2, a } from "./useChatKitLabels-CLsWWwgG.js";
 import { S, c, d as d2, a as a2, u as u3, b, e, f } from "./index-THzZwfMU.js";
-import { _, a as a3, b as b2, C as C2, c as c2, d as d3, e as e2, f as f2, g, h, i, j, k, l, m, n, o, p as p2, q, r, s, t, u as u4, v } from "./CkInput.vue_vue_type_script_setup_true_lang-CwH5M5WD.js";
+import { _, a as a3, b as b2, C as C2, c as c2, d as d3, e as e2, f as f2, g, h, i, j, k, l, m, n, o, p as p2, q, r, s, t, u as u4, v } from "./CkInput.vue_vue_type_script_setup_true_lang-DKzc21Yp.js";
 export {
   C as CHAT_KIT_LABELS,
   _ as CkAgentMessage,

package/dist/{useChatKitLabels-ZutacPad.js → useChatKitLabels-CLsWWwgG.js}

@@ -12722,6 +12722,7 @@ const defaultChatKitLabels = {
   modelSelectorAriaLabel: "Select model",
   modelSelectorListAriaLabel: "Models",
   modelSelectorPlaceholder: "Select model",
+  markdownTableLabel: "Table",
   historyItemUntitled: "Untitled conversation",
   historyItemActionAriaLabel: "Conversation options",
   historyItemEditAction: "Edit",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/chat-kit",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Chat kit package for building chat interfaces with Vue",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/base/CkAgentMessage/CkAgentMessage.vue

@@ -3,7 +3,7 @@ defineOptions({ name: 'CkAgentMessage' });
 </script>
 
 <template>
-  <div class="flex w-full flex-col gap-6 pb-6">
+  <div class="flex w-full min-w-0 flex-col gap-6 pb-6">
     <div v-if="$slots.icon || $slots.header" class="flex items-start gap-3">
       <div
         v-if="$slots.icon"
@@ -21,7 +21,7 @@ defineOptions({ name: 'CkAgentMessage' });
       </span>
     </div>
 
-    <div class="text-content-on-surface-primary text-base leading-7">
+    <div class="text-content-on-surface-primary min-w-0 text-base leading-7">
       <slot />
     </div>
 

package/src/components/base/CkConversationLayout/CkConversationLayout.vue

@@ -188,11 +188,12 @@ watch(
       v-for="message in messages"
       :key="message.id"
       :data-message-row="message.role"
+      class="min-w-0"
     >
-      <div v-if="message.role === 'user'" class="flex justify-end">
+      <div v-if="message.role === 'user'" class="flex min-w-0 justify-end">
         <slot name="user-message" :message="message" />
       </div>
-      <div v-else class="flex justify-start">
+      <div v-else class="flex min-w-0 justify-start">
         <slot name="agent-message" :message="message" />
       </div>
     </div>

package/src/components/base/CkMarkdownRenderer/CkMarkdownRenderer.vue

@@ -10,13 +10,22 @@ import {
 } from 'vue';
 import type { PluggableList } from 'unified';
 import { useMarkdownParser } from '../../../handlers/useMarkdownParser';
+import {
+  defaultChatKitLabels,
+  useChatKitLabels,
+} from '../../../handlers/useChatKitLabels';
 import type { CkMarkdownElementClasses } from './types';
 import { defaultMarkdownClasses } from './defaultMarkdownClasses';
 
+// Tables are wrapped in a horizontally scrollable container so wide content
+// never forces the whole message column wider on narrow viewports.
+const TABLE_WRAPPER_CLASS = 'max-w-full overflow-x-auto';
+
 function domToVNode(
   node: Node,
   slots: Slots,
   classes: CkMarkdownElementClasses,
+  tableLabel: string,
 ): VNode | string | null {
   if (node.nodeType === Node.TEXT_NODE) return node.textContent;
   if (node.nodeType !== Node.ELEMENT_NODE) return null;
@@ -34,7 +43,7 @@ function domToVNode(
   }
 
   const children = Array.from(node.childNodes)
-    .map((child) => domToVNode(child, slots, classes))
+    .map((child) => domToVNode(child, slots, classes, tableLabel))
     .filter((c): c is VNode | string => c != null);
 
   const attrs: Record<string, string> = {};
@@ -48,7 +57,22 @@ function domToVNode(
     attrs.class = attrs.class ? `${attrs.class} ${customClass}` : customClass;
   }
 
-  return h(tag, attrs, children);
+  const vnode = h(tag, attrs, children);
+
+  if (tag === 'table') {
+    return h(
+      'div',
+      {
+        class: TABLE_WRAPPER_CLASS,
+        tabindex: '0',
+        role: 'region',
+        'aria-label': tableLabel,
+      },
+      [vnode],
+    );
+  }
+
+  return vnode;
 }
 
 export default defineComponent({
@@ -64,6 +88,7 @@ export default defineComponent({
   setup(props, { slots }) {
     const { content, plugins } = toRefs(props);
     const { html } = useMarkdownParser(content, plugins);
+    const labels = useChatKitLabels();
 
     const parsedNodes = computed(() => {
       const raw = html.value;
@@ -79,10 +104,17 @@ export default defineComponent({
 
     return () => {
       const elementClasses = mergedClasses.value;
+      const tableLabel =
+        labels.value.markdownTableLabel ??
+        defaultChatKitLabels.markdownTableLabel!;
       const children = parsedNodes.value
-        .map((node) => domToVNode(node, slots, elementClasses))
+        .map((node) => domToVNode(node, slots, elementClasses, tableLabel))
         .filter((c): c is VNode | string => c != null);
-      return h('div', { class: 'markdown-renderer' }, children);
+      return h(
+        'div',
+        { class: 'markdown-renderer min-w-0 break-words' },
+        children,
+      );
     };
   },
 });

package/src/components/base/CkMarkdownRenderer/defaultMarkdownClasses.ts

@@ -3,13 +3,14 @@ import type { CkMarkdownElementClasses } from './types';
 export const defaultMarkdownClasses: CkMarkdownElementClasses = {
   p: 'my-1 leading-7',
   a: 'underline underline-offset-4',
+  img: 'max-w-full h-auto',
   h1: 'mt-4 mb-2 text-2xl font-bold',
   h2: 'mt-3 mb-2 text-xl font-semibold',
   h3: 'mt-3 mb-1 text-lg font-semibold',
   ul: 'my-1 ml-6 list-disc',
   ol: 'my-1 ml-6 list-decimal',
   li: 'my-0.5',
-  pre: 'my-2 overflow-x-auto rounded-lg p-4',
+  pre: 'my-2 max-w-full overflow-x-auto rounded-lg p-4',
   code: 'rounded px-1.5 py-0.5',
   blockquote: 'my-2 border-l-2 pl-4 italic',
   table: 'my-2 w-full border-collapse',

package/src/components/base/CkModelSelector/CkModelSelector.vue

@@ -63,14 +63,19 @@ function select(id: string) {
     <UiPopoverTrigger as-child>
       <button
         type="button"
-        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"
+        class="ck-model-selector__trigger inline-flex h-9 min-w-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"
         :disabled="disabled"
         aria-haspopup="listbox"
         :aria-expanded="open"
         :aria-label="triggerAriaLabel"
       >
-        <span class="max-w-[10rem] truncate">{{ selectedLabel }}</span>
-        <UiIcon name="chevron-down" :size="16" aria-hidden="true" />
+        <span class="min-w-0 max-w-[10rem] truncate">{{ selectedLabel }}</span>
+        <UiIcon
+          name="chevron-down"
+          :size="16"
+          class="shrink-0"
+          aria-hidden="true"
+        />
       </button>
     </UiPopoverTrigger>
     <UiPopoverContent

package/src/handlers/useChatKitLabels.ts

@@ -75,6 +75,12 @@ export type ChatKitLabels = {
   modelSelectorListAriaLabel?: string;
   /** Trigger text shown by `CkModelSelector` when no model is selected. */
   modelSelectorPlaceholder?: string;
+  /**
+   * Accessible label for the horizontally scrollable wrapper around markdown
+   * tables in `CkMarkdownRenderer` (the wrapper is focusable so keyboard users
+   * can scroll wide tables). Falls back to `defaultChatKitLabels` when omitted.
+   */
+  markdownTableLabel?: string;
   /** Fallback title used by `CkHistory` when a conversation has no `title`. */
   historyItemUntitled: string;
   /** Accessible name for the trailing kebab trigger on each `CkHistory` row. */
@@ -116,6 +122,7 @@ export const defaultChatKitLabels: ChatKitLabels = {
   modelSelectorAriaLabel: 'Select model',
   modelSelectorListAriaLabel: 'Models',
   modelSelectorPlaceholder: 'Select model',
+  markdownTableLabel: 'Table',
   historyItemUntitled: 'Untitled conversation',
   historyItemActionAriaLabel: 'Conversation options',
   historyItemEditAction: 'Edit',