@memori.ai/memori-react 9.0.0-alpha.2 → 9.0.0-alpha.21

package/src/components/IconButton/IconButton.css

@@ -0,0 +1,144 @@
+/* Shared secondary icon-button chrome (header + chat input bar).
+   CTA primary (Accedi / send) must NOT use this class. */
+
+.memori-widget {
+    --memori-icon-active-bg: color-mix(in oklch, var(--memori-primary) 12%, transparent);
+    --memori-icon-recording-bg: color-mix(in oklch, var(--memori-error, #dc2626) 12%, transparent);
+    --memori-icon-button-size: 40px;
+    --memori-icon-button-icon-size: 20px;
+    --memori-icon-button-icon: color-mix(in oklch, var(--memori-text-color, #111827) 72%, transparent);
+}
+
+.memori-widget .memori-icon-button.memori-button {
+    display: inline-flex;
+    width: var(--memori-icon-button-size);
+    min-width: var(--memori-icon-button-size);
+    height: var(--memori-icon-button-size);
+    min-height: var(--memori-icon-button-size);
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 1px solid var(--memori-border-color, #ddd);
+    border-radius: var(--memori-radius-box);
+    background: transparent;
+    box-shadow: none;
+    color: var(--memori-icon-button-icon);
+    transform: none;
+}
+
+/* Icon + text (Cronologia, Esci, Share con label, …) — grow past the square */
+.memori-widget .memori-icon-button.memori-icon-button--labeled.memori-button,
+.memori-widget .memori-icon-button.memori-button:has(.memori-header--action-label),
+.memori-widget .memori-icon-button.memori-button:has(.memori-button__content) {
+    overflow: visible;
+    width: auto;
+    min-width: var(--memori-icon-button-size);
+    max-width: none;
+    height: var(--memori-icon-button-size);
+    min-height: var(--memori-icon-button-size);
+    flex-wrap: nowrap;
+    justify-content: center;
+    padding: 0 12px;
+    gap: 0.4rem;
+    white-space: nowrap;
+}
+
+.memori-widget .memori-icon-button.memori-icon-button--labeled.memori-button .memori-button__content,
+.memori-widget .memori-icon-button.memori-button:has(.memori-button__content) .memori-button__content,
+.memori-widget .memori-icon-button.memori-button .memori-header--action-label {
+    display: inline-flex;
+    overflow: visible;
+    align-items: center;
+    font-size: var(--memori-text-size-sm, 0.8125rem);
+    font-weight: var(--memori-text-weight-medium, 500);
+    line-height: 1.2;
+    white-space: nowrap;
+}
+
+.memori-widget .memori-icon-button.memori-button svg,
+.memori-widget .memori-icon-button.memori-button .icon {
+    width: var(--memori-icon-button-icon-size, 20px);
+    height: var(--memori-icon-button-icon-size, 20px);
+    flex-shrink: 0;
+    /* Keep lucide / custom icons as authored — only size them */
+    color: inherit;
+}
+
+/* Mute (VolumeX): slightly larger glyph + heavier stroke so the X reads clearly */
+.memori-widget .memori-icon-button.memori-button svg.lucide-volume-x {
+    width: calc(var(--memori-icon-button-icon-size, 20px) + 1px);
+    height: calc(var(--memori-icon-button-icon-size, 20px) + 1px);
+    stroke-width: 2.35;
+}
+
+.memori-widget .memori-icon-button.memori-button:disabled,
+.memori-widget .memori-icon-button.memori-button.memori-button--disabled {
+    cursor: not-allowed;
+    opacity: 0.35;
+}
+
+.memori-widget .memori-icon-button.memori-button:focus {
+    outline: none;
+}
+
+.memori-widget .memori-icon-button.memori-button:focus-visible {
+    border-color: var(--memori-primary);
+    box-shadow: var(--memori-focus-ring, 0 0 0 3px color-mix(in oklch, var(--memori-primary) 18%, transparent));
+    outline: 2px solid var(--memori-primary);
+    outline-offset: var(--memori-focus-ring-offset, 2px);
+}
+
+.memori-widget .memori-icon-button.memori-button:hover:not(:disabled, .memori-button--disabled) {
+    border-color: color-mix(in oklch, var(--memori-text-color, #111827) 28%, transparent);
+    background: color-mix(in oklch, var(--memori-text-color, #111827) 6%, transparent);
+    box-shadow: none;
+    color: var(--memori-text-color, #111827);
+    transform: none;
+}
+
+/* Active / popover open — soft primary, never solid CTA fill */
+.memori-widget .memori-icon-button.memori-button.memori-icon-button--active,
+.memori-widget .memori-icon-button.memori-button.memori-button--active,
+.memori-widget
+    .memori-icon-button.memori-button--outline.memori-button--active:not(:disabled, .memori-button--disabled),
+.memori-widget
+    .memori-icon-button.memori-button--toolbar.memori-button--active:not(:disabled, .memori-button--disabled),
+.memori-widget .memori-icon-button.memori-button--ghost.memori-button--active:not(:disabled, .memori-button--disabled) {
+    border-color: var(--memori-primary);
+    background: var(--memori-icon-active-bg);
+    box-shadow: none;
+    color: var(--memori-primary);
+}
+
+.memori-widget
+    .memori-icon-button.memori-button.memori-icon-button--active:hover:not(:disabled, .memori-button--disabled),
+.memori-widget .memori-icon-button.memori-button.memori-button--active:hover:not(:disabled, .memori-button--disabled) {
+    border-color: var(--memori-primary);
+    background: color-mix(in oklch, var(--memori-primary) 18%, transparent);
+    color: var(--memori-primary);
+}
+
+/* Mic recording — soft error, not primary */
+.memori-widget .memori-icon-button.memori-button.memori-icon-button--recording {
+    border-color: var(--memori-error, #dc2626);
+    background: var(--memori-icon-recording-bg);
+    box-shadow: none;
+    color: var(--memori-error, #dc2626);
+    transform: none;
+}
+
+.memori-widget .memori-icon-button.memori-button.memori-icon-button--recording:focus-visible {
+    border-color: var(--memori-error, #dc2626);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--memori-error, #dc2626) 22%, transparent);
+    outline-color: var(--memori-error, #dc2626);
+}
+
+.memori-widget
+    .memori-icon-button.memori-button.memori-icon-button--recording:hover:not(:disabled, .memori-button--disabled) {
+    border-color: var(--memori-error, #dc2626);
+    background: var(--memori-icon-recording-bg);
+    box-shadow: none;
+    color: var(--memori-error, #dc2626);
+    transform: none;
+}

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import cx from 'classnames';
+import { Button } from '@memori.ai/ui';
+
+export type IconButtonProps = Omit<
+  React.ComponentProps<typeof Button>,
+  'variant' | 'active'
+> & {
+  /**
+   * Toggle / popover-open / selected. Soft primary chrome — never solid primary fill.
+   */
+  active?: boolean;
+  /**
+   * Mic (or similar) recording state. Soft error chrome — never primary.
+   */
+  recording?: boolean;
+  /**
+   * Optional override; defaults to toolbar so outline+active solid fill from the UI lib
+   * cannot leak into secondary icon tools.
+   */
+  variant?: React.ComponentProps<typeof Button>['variant'];
+};
+
+function hasVisibleLabel(children: React.ReactNode): boolean {
+  return React.Children.toArray(children).some(child => {
+    if (child === null || child === undefined) return false;
+    if (typeof child === 'boolean') return false;
+    if (typeof child === 'string') return child.trim().length > 0;
+    if (typeof child === 'number') return true;
+    return true;
+  });
+}
+
+/**
+ * Shared secondary icon control for chat header + input bar.
+ * CTA actions (Accedi, send) must keep using Button variant="primary".
+ */
+const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      active = false,
+      recording = false,
+      className,
+      variant = 'toolbar',
+      shape = 'default',
+      size = 'sm',
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const isRecording = !!recording;
+    const isActive = !!active && !isRecording;
+    const isLabeled = hasVisibleLabel(children);
+    // Never inherit CTA / outline solid-active chrome from layout buttonVariant.
+    const resolvedVariant =
+      variant === 'primary' ||
+      variant === 'secondary' ||
+      variant === 'danger' ||
+      variant === 'outline' ||
+      variant === 'ghost'
+        ? 'toolbar'
+        : variant;
+
+    return (
+      <Button
+        ref={ref}
+        variant={resolvedVariant}
+        shape={shape}
+        size={size}
+        active={isActive}
+        className={cx(
+          'memori-icon-button',
+          isLabeled && 'memori-icon-button--labeled',
+          isActive && 'memori-icon-button--active',
+          isRecording && 'memori-icon-button--recording',
+          className
+        )}
+        {...rest}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+
+IconButton.displayName = 'IconButton';
+
+export default IconButton;

package/src/components/KnownFacts/KnownFacts.css

@@ -14,22 +14,35 @@
     }
 }
 
+/* Table wrapper: flex column so pagination footer stays visible below the scroll body */
+.memori-known-facts-table-wrapper.memori-table-wrapper {
+    display: flex;
+    overflow: hidden;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    border: 1px solid var(--memori-color-border, #e2e8f0);
+    border-radius: 8px;
+}
+
 .memori-known-facts-table-wrapper {
     .memori-table-scroll {
-        height: 100%;
+        min-height: 0;
+        max-height: none;
+        flex: 1 1 auto;
+    }
+
+    .memori-table-footer {
+        flex-shrink: 0;
     }
+
     .memori-table-pagination__range {
         display: none;
     }
-}
 
-/* Table wrapper: scroll + spacing (@memori.ai/ui Table root) */
-.memori-known-facts-table-wrapper.memori-table-wrapper {
-    overflow: hidden;
-    min-height: 0;
-    flex: 1 1 auto;
-    border: 1px solid var(--memori-color-border, #e2e8f0);
-    border-radius: 8px;
+    .memori-table-pagination__page-size {
+        display: none;
+    }
 }
 
 .memori-known-facts-text-cell {

package/src/components/KnownFacts/KnownFacts.tsx

@@ -10,7 +10,6 @@ import memoriApiClient from '@memori.ai/memori-api-client';
 import {
   Button,
   Drawer,
-  Spin,
   Modal,
   Table,
   useAlertManager,
@@ -23,6 +22,7 @@ import type {
 } from '@tanstack/react-table';
 import { getErrori18nKey } from '../../helpers/error';
 import { useTranslation } from 'react-i18next';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import { Trash2 } from 'lucide-react';
 
 export interface Props {
@@ -45,6 +45,7 @@ const KnownFacts = ({
   initialKnownFacts = [],
   closeDrawer,
 }: Props) => {
+  const surfaceEl = useWidgetSurfaceEl();
   const { t, i18n } = useTranslation();
   const { add } = useAlertManager();
   const { getKnownFactsPaginated, deleteKnownFact } = apiClient.knownFacts;
@@ -116,7 +117,9 @@ const KnownFacts = ({
 
   const [bulkDeleteModalVisible, setBulkDeleteModalVisible] = useState(false);
   const [bulkDeleteIds, setBulkDeleteIds] = useState<string[]>([]);
+  const [bulkDeleting, setBulkDeleting] = useState(false);
   const [deleteModalVisibleFor, setDeleteModalVisibleFor] = useState<string>();
+  const [singleDeleting, setSingleDeleting] = useState(false);
   const selectedRowsLabel = useMemo(
     () =>
       t('knownFacts.selectedRows', {
@@ -168,6 +171,7 @@ const KnownFacts = ({
 
   return (
     <Drawer
+      container={surfaceEl ?? undefined}
       open={visible}
       anchor="right"
       className="memori-known-facts-drawer"
@@ -180,6 +184,7 @@ const KnownFacts = ({
     >
         <div className="memori-known-facts-body">
           <Modal
+          container={surfaceEl ?? undefined}
           className="memori-known-facts-modal"
           open={bulkDeleteModalVisible}
           closable
@@ -217,7 +222,10 @@ const KnownFacts = ({
               </Button>
               <Button
                 variant="danger"
+                loading={bulkDeleting}
+                disabled={bulkDeleting}
                 onClick={async () => {
+                  setBulkDeleting(true);
                   try {
                     const mutations = bulkDeleteIds.map(knownFactID =>
                       deleteKnownFact(sessionID, knownFactID)
@@ -256,6 +264,8 @@ const KnownFacts = ({
                         severity: 'error',
                       })
                     );
+                  } finally {
+                    setBulkDeleting(false);
                   }
                 }}
               >
@@ -272,7 +282,7 @@ const KnownFacts = ({
           getRowId={row => row.knownFactID}
           isLoading={loading}
           rowActionsVariant='inline'
-          maxBodyHeight="75vh"
+          maxBodyHeight={false}
           bulkActions={[
             {
               label: t('delete'),
@@ -310,12 +320,12 @@ const KnownFacts = ({
                   );
                 },
                 initialPageSize: 10,
-                pageSizeOptions: [10,25,50,100],
               }
             : { enablePagination: false })}
         />
 
         <Modal
+          container={surfaceEl ?? undefined}
           className="memori-known-facts-modal"
           open={deleteModalVisibleFor !== undefined}
           closable
@@ -338,9 +348,12 @@ const KnownFacts = ({
               </Button>
               <Button
                 variant="danger"
+                loading={singleDeleting}
+                disabled={singleDeleting}
                 onClick={async () => {
                   if (!deleteModalVisibleFor) return;
                   const kfId = deleteModalVisibleFor;
+                  setSingleDeleting(true);
                   try {
                     const response = await deleteKnownFact(sessionID, kfId);
                     if (response.resultCode === 0) {
@@ -371,6 +384,8 @@ const KnownFacts = ({
                         severity: 'error',
                       })
                     );
+                  } finally {
+                    setSingleDeleting(false);
                   }
                 }}
               >

package/src/components/LoginDrawer/LoginDrawer.css

@@ -12,6 +12,10 @@
 
 .memori--login-drawer--missing-data {
     display: flex;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
     flex-direction: column;
     padding: var(--memori-spacing-2xl);
 }
@@ -49,6 +53,10 @@
 /* ===== FORM STYLES ===== */
 form.memori--login-drawer--form {
     display: flex;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
     flex-direction: column;
     padding: var(--memori-spacing-lg) var(--memori-spacing-md);
     gap: var(--memori-spacing-xs);
@@ -56,6 +64,10 @@ form.memori--login-drawer--form {
 
 .memori--login-drawer--form label:not(.memori-checkbox) {
     display: flex;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
     flex-direction: column;
     margin: var(--memori-spacing-sm) 0;
     gap: var(--memori-spacing-sm);
@@ -71,6 +83,10 @@ form.memori--login-drawer--form {
 }
 
 .memori--login-drawer--form input {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
     flex: 1 1 auto;
     padding: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs)) var(--memori-spacing-md);
     border: 2px solid var(--memori-border-color);
@@ -83,6 +99,27 @@ form.memori--login-drawer--form {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.memori--login-drawer--form input[type='date']::-webkit-datetime-edit,
+.memori--login-drawer--form input[type='date']::-webkit-datetime-edit-fields-wrapper {
+    display: inline-flex;
+    min-height: 1.375em;
+    align-items: center;
+    padding: 0;
+}
+
+.memori--login-drawer--form input[type='date']::-webkit-date-and-time-value {
+    min-height: 1.375em;
+    text-align: left;
+}
+
+.memori--login-drawer--form input[type='date']::-webkit-calendar-picker-indicator {
+    width: 1.25em;
+    height: 1.25em;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+}
+
 .memori--login-drawer--form input:focus {
     border-color: var(--memori-primary);
     box-shadow: 0 0 0 4px color-mix(in oklch, var(--memori-primary), transparent 90%);
@@ -541,6 +578,7 @@ p.memori--login-drawer--inline-error {
 
 .memori--login-drawer--otp-label legend {
     width: 100%;
+    margin-bottom: var(--memori-spacing-md);
 }
 
 .memori--login-drawer--otp-label-text {
@@ -916,6 +954,10 @@ p.memori--login-drawer--inline-error {
 
 /* ===== RESPONSIVE DESIGN ===== */
 @media (max-width: 768px) {
+    .memori--login-drawer--missing-data {
+        padding: var(--memori-spacing-lg) var(--memori-spacing-md);
+    }
+
     .memori--login-drawer .memori-drawer--panel {
         --memori-drawer--width: 100%;
         border-radius: 20px 20px 0 0;

package/src/components/LoginDrawer/LoginDrawer.tsx

@@ -11,6 +11,7 @@ import {
   Form,
 } from '@memori.ai/ui';
 import { useTranslation } from 'react-i18next';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import cx from 'classnames';
 import memoriApiClient from '@memori.ai/memori-api-client';
 import { getErrori18nKey } from '../../helpers/error';
@@ -50,6 +51,7 @@ const LoginDrawer = ({
   __TEST__signup = false,
   __TEST__needMissingData = false,
 }: Props) => {
+  const surfaceEl = useWidgetSurfaceEl();
   const { t, i18n } = useTranslation();
   const { add } = useAlertManager();
   const lang = i18n.language === 'it' ? 'it' : 'en';
@@ -436,6 +438,7 @@ const LoginDrawer = ({
 
   return (
     <Drawer
+      container={surfaceEl ?? undefined}
       open={open}
       onClose={onClose}
       className={cx('memori--login-drawer', {

package/src/components/MediaWidget/MediaItemWidget.tsx

@@ -11,7 +11,10 @@ import React, {
 import { getResourceUrl } from '../../helpers/media';
 import {
   withLinksOpenInNewTab,
+  stripHTML,
   stripDocumentAttachmentTags,
+  isAssetOnlyDocumentAttachment,
+  getDocumentAttachmentAssetUrl,
 } from '../../helpers/utils';
 import { getTranslation } from '../../helpers/translations';
 import { prismSyntaxLangs } from '../../helpers/constants';
@@ -32,7 +35,7 @@ import type {
 import {
   formatBytes,
   getFileExtensionFromUrl,
-  getFileExtensionFromMime,
+  getDocumentBadgeLabel,
   countLines,
   shouldUseDarkFileCard,
   fetchLinkPreview,
@@ -268,7 +271,7 @@ export const RenderMediaItem = memo(function RenderMediaItem({
           ) : (
             <DocumentCard
               title={medium.title || 'File'}
-              badge={getFileExtensionFromMime(medium.mimeType)}
+              badge={getDocumentBadgeLabel(medium.mimeType, medium.title)}
               meta={(() => {
                 const size = getContentSize(medium);
                 return size != null && size > 0 ? formatBytes(size) : null;
@@ -284,7 +287,7 @@ export const RenderMediaItem = memo(function RenderMediaItem({
           return (
             <DocumentCard
               title={medium.title || 'File'}
-              badge={getFileExtensionFromMime(medium.mimeType)}
+              badge={getDocumentBadgeLabel(medium.mimeType, medium.title)}
               meta={(() => {
                 const size = getContentSize(medium);
                 return size != null && size > 0 ? formatBytes(size) : null;
@@ -298,7 +301,7 @@ export const RenderMediaItem = memo(function RenderMediaItem({
           return (
             <DocumentCard
               title={medium.title || 'File'}
-              badge={getFileExtensionFromMime(medium.mimeType)}
+              badge={getDocumentBadgeLabel(medium.mimeType, medium.title)}
               meta={(() => {
                 const size = getContentSize(medium);
                 return size != null && size > 0 ? formatBytes(size) : null;
@@ -324,8 +327,11 @@ export const RenderMediaItem = memo(function RenderMediaItem({
 
   // Extension and file detection helpers
   const fileExtensionFromUrl = getFileExtensionFromUrl(normURL || item.url);
-  const fileExtensionFromMime = getFileExtensionFromMime(item.mimeType);
-  const fileExtension = fileExtensionFromUrl || fileExtensionFromMime;
+  const fileExtension = getDocumentBadgeLabel(
+    item.mimeType,
+    item.title,
+    normURL || item.url
+  );
   const isFile = shouldUseDarkFileCard(
     item,
     fileExtensionFromUrl,
@@ -355,8 +361,16 @@ export const RenderMediaItem = memo(function RenderMediaItem({
     const metaParts = [lineText, sizeText].filter(Boolean);
     const metaLine = metaParts.length > 0 ? metaParts.join(' · ') : null;
 
+    // Asset-only attachments (e.g. Office native files) open via URL, not modal
+    const isAssetOnlyAttachment = isAssetOnlyDocumentAttachment(item);
+
     // Document attachments and attached files should open in modal, not as links
-    if ((isDocumentAttachment || isAttachedFile) && item.mediumID && _onClick) {
+    if (
+      (isDocumentAttachment || isAttachedFile) &&
+      item.mediumID &&
+      _onClick &&
+      !isAssetOnlyAttachment
+    ) {
       return (
         <div
           onClick={() => _onClick(item)}
@@ -395,16 +409,17 @@ export const RenderMediaItem = memo(function RenderMediaItem({
 
     // Build href: open in new tab (never modal). Use URL, or blob for content-only items.
     const getFileCardHref = (): string => {
-      if (item.url) {
+      const assetUrl = getDocumentAttachmentAssetUrl(item);
+      if (assetUrl) {
         return (
           getResourceUrl({
-            resourceURI: item.url,
+            resourceURI: assetUrl,
             sessionID,
             tenantID,
             baseURL,
             apiURL,
           }) ||
-          item.url ||
+          assetUrl ||
           '#'
         );
       }
@@ -416,9 +431,7 @@ export const RenderMediaItem = memo(function RenderMediaItem({
           htmlContent.includes('<document_attachment')
         ) {
           if (htmlContent.includes('&lt;') || htmlContent.includes('&quot;')) {
-            const div = document.createElement('div');
-            div.innerHTML = htmlContent;
-            htmlContent = div.textContent || div.innerText || htmlContent;
+            htmlContent = stripHTML(htmlContent) || htmlContent;
           }
           htmlContent = stripDocumentAttachmentTags(htmlContent);
         }

package/src/components/MediaWidget/MediaItemWidget.utils.test.ts

@@ -2,6 +2,7 @@ import {
   formatBytes,
   getFileExtensionFromUrl,
   getFileExtensionFromMime,
+  getDocumentBadgeLabel,
   countLines,
   shouldUseDarkFileCard,
   fetchLinkPreview,
@@ -57,8 +58,25 @@ describe('MediaItemWidget.utils', () => {
       expect(getFileExtensionFromMime('text/html')).toBe('HTML');
       expect(getFileExtensionFromMime('text/plain')).toBe('TXT');
       expect(getFileExtensionFromMime('application/json')).toBe('JSON');
-      expect(getFileExtensionFromMime('application/vnd.ms-excel')).toBe('XLS');
-      expect(getFileExtensionFromMime('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')).toBe('XLSX');
+      expect(getFileExtensionFromMime('application/vnd.ms-excel')).toBe('Excel');
+      expect(
+        getFileExtensionFromMime(
+          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+        )
+      ).toBe('Excel');
+    });
+
+    it('maps office mime types with parameters to short labels', () => {
+      expect(
+        getFileExtensionFromMime(
+          'application/vnd.openxmlformats-officedocument.wordprocessingml.document; charset=binary'
+        )
+      ).toBe('Word');
+      expect(
+        getFileExtensionFromMime(
+          'application/vnd.openxmlformats-officedocument.spreadsheetml.template'
+        )
+      ).toBe('Excel');
     });
 
     it('uses subtype when not in MIME_TO_EXT map', () => {
@@ -71,6 +89,31 @@ describe('MediaItemWidget.utils', () => {
     });
   });
 
+  describe('getDocumentBadgeLabel', () => {
+    it('prefers URL extension, then filename, then mime type', () => {
+      expect(
+        getDocumentBadgeLabel(
+          'application/pdf',
+          'report.docx',
+          'https://example.com/file.pdf'
+        )
+      ).toBe('PDF');
+      expect(
+        getDocumentBadgeLabel(
+          'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+          'report.docx',
+          'https://example.com/asset/123'
+        )
+      ).toBe('Word');
+      expect(
+        getDocumentBadgeLabel(
+          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+          'budget.xlsx'
+        )
+      ).toBe('Excel');
+    });
+  });
+
   describe('countLines', () => {
     it('returns 0 for undefined or empty', () => {
       expect(countLines(undefined)).toBe(0);