@aleph-alpha/chat-kit 5.12.0 → 5.13.0

package/src/components/base/CkFeedbackDialog/CkFeedbackDialog.spec.ts

@@ -257,7 +257,7 @@ describe('CkFeedbackDialog', () => {
     const marker = document.body.querySelector('.ck-citation')!;
     expect(marker.tagName).toBe('SPAN');
     expect(marker).toHaveTextContent('1');
-    expect(marker.className).toContain('bg-background-accent-yellow');
+    expect(marker.className).toContain('bg-background-surface-citation');
     // Announced as its own labelled object, and never as a control.
     expect(screen.getByRole('img', { name: 'Source 1' })).toBeInTheDocument();
     expect(

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;
+}