@aleph-alpha/chat-kit 5.12.0 → 6.0.0

package/src/components/base/CkHistoryWrapper/CkHistoryWrapper.vue

@@ -24,7 +24,8 @@ const rootClass = computed(() => {
 });
 
 const passthroughAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs as Record<string, unknown>;
+  const rest = { ...(attrs as Record<string, unknown>) };
+  delete rest.class;
   return rest;
 });
 </script>

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

@@ -394,16 +394,21 @@ export const MathExpressions: Story = {
   parameters: { docs: { source: { code: mathTemplateSource } } },
 };
 
-function visitTextNodes(node: any, transform: (value: string) => string): void {
-  if (node.type === 'text') {
+type MdTextNode = { type: string; value?: string; children?: MdTextNode[] };
+
+function visitTextNodes(
+  node: MdTextNode,
+  transform: (value: string) => string,
+): void {
+  if (node.type === 'text' && node.value !== undefined) {
     node.value = transform(node.value);
   }
   if (node.children) {
-    node.children.forEach((child: any) => visitTextNodes(child, transform));
+    node.children.forEach((child) => visitTextNodes(child, transform));
   }
 }
 
-const uppercasePlugin = () => (tree: any) => {
+const uppercasePlugin = () => (tree: MdTextNode) => {
   visitTextNodes(tree, (value) => value.toUpperCase());
 };
 

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

@@ -146,7 +146,7 @@ export default defineComponent({
         classes: mergedClasses.value,
         tableLabel:
           labels.value.markdownTableLabel ??
-          defaultChatKitLabels.markdownTableLabel!,
+          defaultChatKitLabels.markdownTableLabel,
         renderCitation: (el) => renderCitationNode(el, slots.citation),
       };
       const children = parsedNodes.value

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

@@ -32,17 +32,17 @@ const labels = useChatKitLabels();
 const triggerAriaLabel = computed(
   () =>
     labels.value.modelSelectorAriaLabel ??
-    defaultChatKitLabels.modelSelectorAriaLabel!,
+    defaultChatKitLabels.modelSelectorAriaLabel,
 );
 const listAriaLabel = computed(
   () =>
     labels.value.modelSelectorListAriaLabel ??
-    defaultChatKitLabels.modelSelectorListAriaLabel!,
+    defaultChatKitLabels.modelSelectorListAriaLabel,
 );
 const placeholderLabel = computed(
   () =>
     labels.value.modelSelectorPlaceholder ??
-    defaultChatKitLabels.modelSelectorPlaceholder!,
+    defaultChatKitLabels.modelSelectorPlaceholder,
 );
 
 const open = ref(false);

package/src/composables/fileUpload/useFileUpload.ts

@@ -137,8 +137,9 @@ class Semaphore {
   }
 
   release(): void {
-    if (this.queue.length > 0) {
-      this.queue.shift()!();
+    const next = this.queue.shift();
+    if (next) {
+      next();
     } else {
       this.permits++;
     }
@@ -184,7 +185,12 @@ function generateCanvasThumbnail(
       const canvas = document.createElement('canvas');
       canvas.width = w;
       canvas.height = h;
-      const ctx = canvas.getContext('2d')!;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        URL.revokeObjectURL(url);
+        reject(new Error('Canvas 2D context is not available'));
+        return;
+      }
       ctx.drawImage(img, 0, 0, w, h);
 
       const dataUrl = canvas.toDataURL('image/png');
@@ -284,12 +290,18 @@ async function runCustomValidators(
 //  Retry
 // ---------------------------------------------------------------------------
 
+function extractHttpStatus(err: unknown): number | undefined {
+  const e = err as {
+    httpStatus?: number;
+    status?: number;
+    response?: { status?: number };
+  } | null;
+  return e?.httpStatus ?? e?.status ?? e?.response?.status;
+}
+
 function isRetryable(err: unknown, policy: RetryPolicy): boolean {
   if (!policy.retryableStatusCodes?.length) return true;
-  const status =
-    (err as any)?.httpStatus ??
-    (err as any)?.status ??
-    (err as any)?.response?.status;
+  const status = extractHttpStatus(err);
   return status != null && policy.retryableStatusCodes.includes(status);
 }
 
@@ -608,10 +620,11 @@ export function useFileUpload(
 
     for (let i = 0; i < uploadReady.length; i++) {
       const { stateKey } = uploadReady[i] as { file: File; stateKey: string };
-      const entry = files.value.get(stateKey)!;
+      const entry = files.value.get(stateKey);
+      if (!entry) continue;
+      const startedAt = entry.uploadStartedAt ?? completedAt;
       const durationMs =
-        new Date(completedAt).getTime() -
-        new Date(entry.uploadStartedAt!).getTime();
+        new Date(completedAt).getTime() - new Date(startedAt).getTime();
 
       const remoteResult = results[i] as
         | { id?: string; documentId?: string }
@@ -682,12 +695,13 @@ export function useFileUpload(
     const uploadErr: FileUploadError = {
       code: 'UPLOAD_FAILED',
       message: (err as Error).message ?? 'Upload failed.',
-      httpStatus: (err as any)?.httpStatus ?? (err as any)?.status,
+      httpStatus: extractHttpStatus(err),
       occurredAt: completedAt,
     };
 
     for (const { stateKey } of uploadReady) {
-      const entry = files.value.get(stateKey)!;
+      const entry = files.value.get(stateKey);
+      if (!entry) continue;
       const durationMs = entry.uploadStartedAt
         ? new Date(completedAt).getTime() -
           new Date(entry.uploadStartedAt).getTime()
@@ -764,16 +778,17 @@ export function useFileUpload(
 
     const uploadStarted = now();
     for (const { stateKey } of uploadReady) {
+      const attemptCount = (files.value.get(stateKey)?.attemptCount ?? 0) + 1;
       updateEntry(stateKey, {
         status: 'uploading',
         uploadStartedAt: uploadStarted,
-        attemptCount: (files.value.get(stateKey)?.attemptCount ?? 0) + 1,
+        attemptCount,
         lastAttemptAt: uploadStarted,
       });
       emit({
         type: 'file:uploading',
         fileId: stateKey,
-        attemptCount: files.value.get(stateKey)!.attemptCount,
+        attemptCount,
       });
     }
 
@@ -863,17 +878,20 @@ export function useFileUpload(
   ): UploadResult {
     return {
       id: groupId,
-      results: batch.map(({ stateKey }) => {
-        const entry = files.value.get(stateKey)!;
-        return {
-          fileId: stateKey,
-          success: entry.status === 'success',
-          status: entry.status,
-          remoteFileId: entry.remoteFileId ?? undefined,
-          error: entry.error ?? undefined,
-          uploadDate: entry.uploadCompletedAt ?? entry.queuedAt,
-          metadata: entry.metadata,
-        } satisfies UploadFileResult;
+      results: batch.flatMap(({ stateKey }) => {
+        const entry = files.value.get(stateKey);
+        if (!entry) return [];
+        return [
+          {
+            fileId: stateKey,
+            success: entry.status === 'success',
+            status: entry.status,
+            remoteFileId: entry.remoteFileId ?? undefined,
+            error: entry.error ?? undefined,
+            uploadDate: entry.uploadCompletedAt ?? entry.queuedAt,
+            metadata: entry.metadata,
+          } satisfies UploadFileResult,
+        ];
       }),
     };
   }
@@ -927,10 +945,7 @@ export function useFileUpload(
       try {
         await client.delete(endpoints.file(storeId, entry.remoteFileId));
       } catch (err) {
-        const status =
-          (err as any)?.httpStatus ??
-          (err as any)?.status ??
-          (err as any)?.response?.status;
+        const status = extractHttpStatus(err);
 
         if (status === 404) {
           // File no longer exists on the server — proceed with local removal.
@@ -1022,7 +1037,7 @@ export function useFileUpload(
           files.value.delete(entry.id);
           if (db) {
             deletePersistedEntry(db, persistStoreName, entry.id).catch(
-              () => {},
+              () => undefined,
             );
           }
         }

package/src/composables/fileUpload/useFileUploadWrapper.spec.ts

@@ -206,7 +206,7 @@ describe('useFileUploadWrapper handleFilesSelected', () => {
     const { handleFilesSelected } = provider.useDocumentUpload('conv-1');
 
     const event = makeInputEvent([createFile('a.pdf')]);
-    const input = (event as any).target as HTMLInputElement;
+    const input = event.target as unknown as HTMLInputElement;
 
     const valueSetter = vi.spyOn(input, 'value', 'set');
 

package/src/composables/fileUpload/useFileUploadWrapper.ts

@@ -401,9 +401,9 @@ export function createDocumentUploadProvider(
         }
       }
 
-      const successFileIds = result.results
-        .filter((r) => r.success && r.remoteFileId)
-        .map((r) => r.remoteFileId!);
+      const successFileIds = result.results.flatMap((r) =>
+        r.success && r.remoteFileId ? [r.remoteFileId] : [],
+      );
 
       if (successFileIds.length > 0) {
         await upload.runWorkflow(successFileIds);

package/src/composables/useChat.ts

@@ -15,4 +15,6 @@
  * await chat.sendMessage({ role: 'user', content: 'Hello' });
  * ```
  */
-export function useChat() {}
+export function useChat() {
+  throw new Error('useChat is not implemented yet.');
+}

package/src/composables/useConversations.ts

@@ -216,11 +216,14 @@ export function useConversations(
       const raw = await http.post<RawConversation>(path, body);
       const created = mapConversation(raw);
 
-      conversations.value = placeholder
-        ? conversations.value.map((c) =>
-            c.id === placeholder!.id ? created : c,
-          )
-        : [created, ...conversations.value];
+      if (placeholder) {
+        const placeholderId = placeholder.id;
+        conversations.value = conversations.value.map((c) =>
+          c.id === placeholderId ? created : c,
+        );
+      } else {
+        conversations.value = [created, ...conversations.value];
+      }
 
       return created;
     } catch (e) {

package/src/composables/useIsTruncated.ts

@@ -0,0 +1,82 @@
+/**
+ * Local copy of ui-library's internal probe of the same name. chat-kit's
+ * supported ui-library range (^5.3.0) does not export it, and it is too small
+ * to justify widening that package's public API. Drop this file once the range
+ * moves up to a version that exports it.
+ */
+
+import { onScopeDispose, ref, watch, type Ref, type ShallowRef } from 'vue';
+
+/** An element ref as produced by `useTemplateRef`. */
+type ElementRef = Readonly<ShallowRef<HTMLElement | null>>;
+
+/**
+ * One observer for every caller. `ResizeObserver` is built to watch many
+ * targets and delivers them in a single batched callback, so a list of rows
+ * costs one callback and one layout pass rather than one per row. Created
+ * lazily so importing this module never touches the DOM.
+ */
+const measurers = new WeakMap<Element, () => void>();
+let sharedObserver: ResizeObserver | undefined;
+
+function getSharedObserver(): ResizeObserver | undefined {
+  if (typeof ResizeObserver === 'undefined') return undefined;
+  sharedObserver ??= new ResizeObserver((entries) => {
+    for (const entry of entries) measurers.get(entry.target)?.();
+  });
+  return sharedObserver;
+}
+
+function watchElement(el: Element, measure: () => void): void {
+  measurers.set(el, measure);
+  getSharedObserver()?.observe(el);
+}
+
+function unwatchElement(el: Element): void {
+  measurers.delete(el);
+  getSharedObserver()?.unobserve(el);
+}
+
+/**
+ * Whether an element's text is currently clipped by `text-overflow: ellipsis`.
+ *
+ * Re-measures when the element resizes and whenever `watchSource` changes, so
+ * it stays correct as the container narrows or the text is swapped out. Use it
+ * to show a tooltip only for names that are actually cut off.
+ * @param elementRef - The element whose text may be clipped
+ * @param watchSource - Value to re-measure on, e.g. the rendered text
+ * @returns Reactive truncation state
+ */
+export function useIsTruncated(
+  elementRef: ElementRef,
+  watchSource?: () => unknown,
+): Ref<boolean> {
+  const isTruncated = ref(false);
+
+  function measure(): void {
+    const el = elementRef.value;
+    // Sub-pixel widths round differently per browser, so require a whole
+    // pixel of overflow before calling it truncated.
+    isTruncated.value = el ? el.scrollWidth - el.clientWidth >= 1 : false;
+  }
+
+  // A resize alone doesn't cover a text swap that keeps the box the same size.
+  if (watchSource) watch(watchSource, measure, { flush: 'post' });
+
+  // Runs on mount too, when the template ref goes null -> element.
+  watch(
+    elementRef,
+    (el, previous) => {
+      if (previous) unwatchElement(previous);
+      if (el) watchElement(el, measure);
+      measure();
+    },
+    { immediate: true, flush: 'post' },
+  );
+
+  onScopeDispose(() => {
+    if (elementRef.value) unwatchElement(elementRef.value);
+  });
+
+  return isTruncated;
+}

package/src/handlers/useChatKitLabels.spec.ts

@@ -1,4 +1,3 @@
-/* eslint-disable vue/one-component-per-file */
 import type { ChatKitLabels } from './useChatKitLabels';
 import {
   CHAT_KIT_LABELS,

package/src/handlers/useChatKitLabels.ts

@@ -114,7 +114,7 @@ export type ChatKitLabels = {
 };
 
 /** English defaults used when no labels are provided by the consumer. */
-export const defaultChatKitLabels: ChatKitLabels = {
+export const defaultChatKitLabels = {
   agentAvatarAlt: 'Agent avatar',
   agentLoadingAvatarAlt: 'Agent loading',
   inputPlaceholder: 'Type a message...',
@@ -150,7 +150,7 @@ export const defaultChatKitLabels: ChatKitLabels = {
   historyItemEditAction: 'Edit',
   historyItemDeleteAction: 'Delete',
   historyShowAll: 'Show all',
-};
+} satisfies Required<ChatKitLabels>;
 
 /** Vue injection key for ChatKit labels. */
 export const CHAT_KIT_LABELS: InjectionKey<ComputedRef<ChatKitLabels>> =

package/src/handlers/useMarkdownParser.ts

@@ -100,7 +100,7 @@ export function useMarkdownParser(
   let cachedProcessor: SyncProcessor | undefined;
 
   function getProcessor(list: PluggableList): SyncProcessor {
-    if (list === cachedPlugins) return cachedProcessor!;
+    if (list === cachedPlugins && cachedProcessor) return cachedProcessor;
     cachedPlugins = list;
     cachedProcessor = buildProcessor(list);
     return cachedProcessor;

package/src/test-setup.ts

@@ -6,7 +6,7 @@ import '@testing-library/jest-dom/vitest';
 
 // ResizeObserver is not available in JSDOM
 global.ResizeObserver = class ResizeObserver {
-  observe(): void {}
-  unobserve(): void {}
-  disconnect(): void {}
+  observe = (): void => undefined;
+  unobserve = (): void => undefined;
+  disconnect = (): void => undefined;
 };

package/src/test-utils/createTextPlugin.ts

@@ -1,7 +1,15 @@
+type TextPluginNode = {
+  type: string;
+  value?: string;
+  children?: TextPluginNode[];
+};
+
 export function createTextPlugin(transform: (text: string) => string) {
-  return () => (tree: any) => {
-    const visit = (node: any) => {
-      if (node.type === 'text') node.value = transform(node.value);
+  return () => (tree: TextPluginNode) => {
+    const visit = (node: TextPluginNode) => {
+      if (node.type === 'text' && node.value !== undefined) {
+        node.value = transform(node.value);
+      }
       if (node.children) node.children.forEach(visit);
     };
     visit(tree);