@flamingo-stack/openframe-frontend-core 0.0.663 → 0.0.664-2366.7030.1

package/src/components/chat/__tests__/chat-dialog-menu-items.test.tsx

@@ -0,0 +1,39 @@
+/**
+ * `chatDialogMenuItems` — the one ⋯ menu shared by every conversation surface.
+ *
+ * Pins the design order (link, rename, compact, archive) and that an action
+ * appears only when its handler is wired, so no surface advertises something
+ * the host has not implemented.
+ */
+
+import { describe, expect, it, vi } from 'vitest';
+
+import { chatDialogMenuItems } from '../chat-dialog-menu-items';
+
+describe('chatDialogMenuItems', () => {
+  it('lists every wired action in design order, each with an icon', () => {
+    const items = chatDialogMenuItems({
+      onArchive: vi.fn(),
+      onCompact: vi.fn(),
+      onRename: vi.fn(),
+      onCopyLink: vi.fn(),
+    });
+
+    expect(items.map(item => item.label)).toEqual([
+      'Copy Chat Link',
+      'Rename Chat',
+      'Compact Chat Memory',
+      'Archive Chat',
+    ]);
+    expect(items.every(item => item.icon !== undefined)).toBe(true);
+  });
+
+  it('omits actions without a handler', () => {
+    const onCompact = vi.fn();
+    const items = chatDialogMenuItems({ onCompact });
+
+    expect(items.map(item => item.id)).toEqual(['compact']);
+    items[0].onClick?.();
+    expect(onCompact).toHaveBeenCalledOnce();
+  });
+});

package/src/components/chat/chat-dialog-menu-items.tsx

@@ -0,0 +1,51 @@
+import { BoxArchiveIcon, Link01HorizontalIcon, PackageCheckIcon, PenEditIcon } from '../icons-v2-generated';
+import type { ActionsMenuItem } from '../ui/actions-menu';
+
+export interface ChatDialogMenuActions {
+  onCopyLink?: () => void;
+  onRename?: () => void;
+  onCompact?: () => void;
+  onArchive?: () => void;
+}
+
+export const chatMenuIconClassName = 'h-full w-full text-ods-text-secondary';
+
+/**
+ * The per-conversation ⋯ menu — one list for the desktop header, the mobile
+ * header, the split header and every history row, so the four can't drift in
+ * order, wording or icons. Each action appears only when its handler is set.
+ */
+export function chatDialogMenuItems({
+  onCopyLink,
+  onRename,
+  onCompact,
+  onArchive,
+}: ChatDialogMenuActions): ActionsMenuItem[] {
+  const items: (ActionsMenuItem | undefined)[] = [
+    onCopyLink && {
+      id: 'copy-link',
+      label: 'Copy Chat Link',
+      icon: <Link01HorizontalIcon className={chatMenuIconClassName} />,
+      onClick: onCopyLink,
+    },
+    onRename && {
+      id: 'rename',
+      label: 'Rename Chat',
+      icon: <PenEditIcon className={chatMenuIconClassName} />,
+      onClick: onRename,
+    },
+    onCompact && {
+      id: 'compact',
+      label: 'Compact Chat Memory',
+      icon: <PackageCheckIcon className={chatMenuIconClassName} />,
+      onClick: onCompact,
+    },
+    onArchive && {
+      id: 'archive',
+      label: 'Archive Chat',
+      icon: <BoxArchiveIcon className={chatMenuIconClassName} />,
+      onClick: onArchive,
+    },
+  ];
+  return items.filter((item): item is ActionsMenuItem => !!item);
+}

package/src/components/chat/chat-panel-header-mobile.tsx

@@ -4,6 +4,7 @@ import { cn } from '../../utils/cn';
 import { Chevron02LeftIcon, ClockHistoryIcon, XmarkIcon } from '../icons-v2-generated';
 import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu';
 import { Button } from '../ui/button';
+import { chatDialogMenuItems, chatMenuIconClassName } from './chat-dialog-menu-items';
 import type { ChatPanelHeaderProps } from './chat-panel-header';
 
 export interface ChatPanelHeaderMobileProps extends ChatPanelHeaderProps {
@@ -38,6 +39,7 @@ export function ChatPanelHeaderMobile({
   onRestore,
   onRename,
   onArchive,
+  onCompact,
   onCopyLink,
   onOpenArchive,
   className,
@@ -49,15 +51,13 @@ export function ChatPanelHeaderMobile({
     !showBack &&
       onOpenArchive && {
         id: 'open-archive',
-        label: 'Chat archive',
-        icon: <ClockHistoryIcon className="h-full w-full" />,
+        label: 'Chat Archive',
+        icon: <ClockHistoryIcon className={chatMenuIconClassName} />,
         onClick: onOpenArchive,
       },
-    isArchivedView && onRestore && { id: 'unarchive', label: 'Unarchive chat', onClick: onRestore },
-    !isArchivedView && onCopyLink && { id: 'copy-link', label: 'Copy chat link', onClick: onCopyLink },
-    !isArchivedView && onRename && { id: 'rename', label: 'Rename chat', onClick: onRename },
-    !isArchivedView && onArchive && { id: 'archive', label: 'Archive chat', onClick: onArchive },
-  ].filter(Boolean) as ActionsMenuItem[];
+    isArchivedView && onRestore && { id: 'unarchive', label: 'Unarchive Chat', onClick: onRestore },
+    ...(isArchivedView ? [] : chatDialogMenuItems({ onCopyLink, onRename, onCompact, onArchive })),
+  ].filter((item): item is ActionsMenuItem => !!item);
 
   return (
     <div

package/src/components/chat/chat-panel-header.tsx

@@ -10,8 +10,9 @@ import {
   SearchIcon,
 } from '../icons-v2-generated';
 import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon';
-import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu';
+import { ActionsMenuDropdown } from '../ui/actions-menu';
 import { SquareAvatar } from '../ui/square-avatar';
+import { chatDialogMenuItems } from './chat-dialog-menu-items';
 import { ChatHeaderIconButton } from './chat-header-icon-button';
 import { ChatHeaderSearchField } from './chat-header-search-field';
 import { ChatPanelHeaderMobile } from './chat-panel-header-mobile';
@@ -41,11 +42,13 @@ export interface ChatPanelHeaderProps {
   onClose: () => void;
   /** Restore/unarchive — renders the refresh button (archived view only). */
   onRestore?: () => void;
-  /** Rename — adds the "Rename chat" item to the ⋯ menu. */
+  /** Rename — adds the "Rename Chat" item to the ⋯ menu. */
   onRename?: () => void;
-  /** Archive — adds the "Archive chat" item to the ⋯ menu. */
+  /** Archive — adds the "Archive Chat" item to the ⋯ menu. */
   onArchive?: () => void;
-  /** Copy a shareable link to the open conversation — adds the "Copy chat link"
+  /** Compact — adds the "Compact Chat Memory" item to the ⋯ menu. */
+  onCompact?: () => void;
+  /** Copy a shareable link to the open conversation — adds the "Copy Chat Link"
    *  item to the ⋯ menu. The host owns the URL and the copy. */
   onCopyLink?: () => void;
   /** Open the Chat Archive page — renders the clock button (list view only). */
@@ -87,6 +90,7 @@ export function ChatPanelHeader({
   onRestore,
   onRename,
   onArchive,
+  onCompact,
   onCopyLink,
   onOpenArchive,
   compact = false,
@@ -97,12 +101,8 @@ export function ChatPanelHeader({
 }: ChatPanelHeaderProps) {
   // Search open (with a wired handler) swaps the title for the inline field.
   const searchInline = searchActive && !!onSearchChange;
-  // Desktop ⋯ menu (active, non-archived conversation only) — rename / archive.
-  const menuItems = [
-    onCopyLink && { id: 'copy-link', label: 'Copy chat link', onClick: onCopyLink },
-    onRename && { id: 'rename', label: 'Rename chat', onClick: onRename },
-    onArchive && { id: 'archive', label: 'Archive chat', onClick: onArchive },
-  ].filter(Boolean) as ActionsMenuItem[];
+  // Desktop ⋯ menu (active, non-archived conversation only).
+  const menuItems = chatDialogMenuItems({ onCopyLink, onRename, onCompact, onArchive });
 
   return (
     <>
@@ -122,6 +122,7 @@ export function ChatPanelHeader({
           onRestore={onRestore}
           onRename={onRename}
           onArchive={onArchive}
+          onCompact={onCompact}
           onCopyLink={onCopyLink}
           onOpenArchive={onOpenArchive}
         />

package/src/components/chat/embeddable-chat.tsx

@@ -54,7 +54,7 @@ import {
 } from '../icons-v2-generated';
 import { Chevron02LeftIcon } from '../icons-v2-generated/arrows/chevron-02-left-icon';
 import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon';
-import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu';
+import { ActionsMenuDropdown } from '../ui/actions-menu';
 import { Button } from '../ui/button';
 import { Drawer, DrawerContent } from '../ui/drawer';
 import { HoverDropdown, type HoverDropdownItem } from '../ui/hover-dropdown';
@@ -63,6 +63,7 @@ import { SquareAvatar } from '../ui/square-avatar';
 import { ChatArchivePage } from './chat-archive-page';
 import { ChatAttachmentChipStrip } from './chat-attachment-bar';
 import { ChatComposer } from './chat-composer';
+import { chatDialogMenuItems } from './chat-dialog-menu-items';
 import { ChatHeaderIconButton } from './chat-header-icon-button';
 import { ChatHeaderSearchField } from './chat-header-search-field';
 import { ChatMessageList } from './chat-message-list';
@@ -248,8 +249,9 @@ export interface EmbeddableChatProps {
    *
    * Same shape an adapter reports through `UnifiedChatState.dialogCapabilities`
    * (`ChatDialogCapabilities`) — one type, whether the list is host-owned or
-   * adapter-owned. `onCopyLink` adds "Copy chat link" to the header ⋯ menu and
+   * adapter-owned. `onCopyLink` adds "Copy Chat Link" to the header ⋯ menu and
    * every row menu; the host owns the URL shape and the clipboard write.
+   * `compactDialog` adds "Compact Chat Memory" to the same menus.
    */
   mingoDialogCapabilities?: ChatDialogCapabilities;
 
@@ -2023,6 +2025,10 @@ function EmbeddableChatInner({
     activeDialogId && activeDialog && mingoCaps.canArchive ? () => setArchiveTarget(activeDialog) : undefined;
   const headerOnCopyLink =
     activeDialogId && activeDialog && mingoCaps.onCopyLink ? () => mingoCaps.onCopyLink?.(activeDialog) : undefined;
+  const headerOnCompact =
+    activeDialogId && activeDialog && mingoCaps.compactDialog
+      ? () => mingoCaps.compactDialog?.(activeDialog)
+      : undefined;
   const headerOnOpenArchive = fetchArchivedDialogs ? openArchive : undefined;
 
   // Header person (sub-line + 32px avatar, Figma 113:63273): the dialog OWNER
@@ -2110,11 +2116,12 @@ function EmbeddableChatInner({
   );
 
   // Desktop split header ⋯ menu (active, non-archived conversation only).
-  const splitHeaderMenuItems = [
-    headerOnCopyLink && { id: 'copy-link', label: 'Copy chat link', onClick: headerOnCopyLink },
-    headerOnRename && { id: 'rename', label: 'Rename chat', onClick: headerOnRename },
-    headerOnArchive && { id: 'archive', label: 'Archive chat', onClick: headerOnArchive },
-  ].filter(Boolean) as ActionsMenuItem[];
+  const splitHeaderMenuItems = chatDialogMenuItems({
+    onCopyLink: headerOnCopyLink,
+    onRename: headerOnRename,
+    onCompact: headerOnCompact,
+    onArchive: headerOnArchive,
+  });
 
   // Narrow (single-column) header. The Mingo empty state splits into a "Current
   // Chats" list header (search + archive, no back) and a "New Chat" compose
@@ -2158,6 +2165,7 @@ function EmbeddableChatInner({
         onRestore: headerOnRestore,
         onRename: headerOnRename,
         onArchive: headerOnArchive,
+        onCompact: headerOnCompact,
         onCopyLink: headerOnCopyLink,
         onOpenArchive: headerOnOpenArchive,
       };
@@ -2389,6 +2397,7 @@ function EmbeddableChatInner({
                         onRequestRename={mingoCaps.canRename ? setRenameTarget : undefined}
                         onRequestArchive={mingoCaps.canArchive ? setArchiveTarget : undefined}
                         onRequestCopyLink={mingoCaps.onCopyLink}
+                        onRequestCompact={mingoCaps.compactDialog}
                         scope={dialogScope}
                         onScopeChange={setDialogScope}
                         searchQuery={mingoCaps.searchQuery}
@@ -2418,6 +2427,7 @@ function EmbeddableChatInner({
                       onRequestRename={mingoCaps.canRename ? setRenameTarget : undefined}
                       onRequestArchive={mingoCaps.canArchive ? setArchiveTarget : undefined}
                       onRequestCopyLink={mingoCaps.onCopyLink}
+                      onRequestCompact={mingoCaps.compactDialog}
                       scope={dialogScope}
                       onScopeChange={setDialogScope}
                       searchQuery={mingoCaps.searchQuery}

package/src/components/chat/mingo-chat-history.tsx

@@ -3,10 +3,11 @@
 import { useState, useMemo, useRef, useEffect } from 'react';
 import { cn } from '../../utils/cn';
 import { Ellipsis01Icon, SearchXmarkIcon } from '../icons-v2-generated';
-import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu';
+import { ActionsMenuDropdown } from '../ui/actions-menu';
 import { Button } from '../ui/button';
 import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade';
 import { SquareAvatar } from '../ui/square-avatar';
+import { chatDialogMenuItems } from './chat-dialog-menu-items';
 import { ChatListEmptyState } from './chat-list-empty-state';
 import type { DialogItem } from './types/component.types';
 
@@ -21,16 +22,18 @@ export interface MingoChatHistoryProps {
   activeDialogId?: string;
   /** Open a dialog. */
   onSelectDialog?: (id: string) => void;
-  /** Request rename — enables the row "Rename chat" action. The host opens
+  /** Request rename — enables the row "Rename Chat" action. The host opens
    *  the Rename modal; the list does no inline editing. */
   onRequestRename?: (dialog: DialogItem) => void;
-  /** Request archive — enables the row "Archive chat" action. The host opens
+  /** Request archive — enables the row "Archive Chat" action. The host opens
    *  the Archive confirmation modal. */
   onRequestArchive?: (dialog: DialogItem) => void;
-  /** Request a shareable link — enables the row "Copy chat link" action. The host
+  /** Request a shareable link — enables the row "Copy Chat Link" action. The host
    *  owns the URL shape and the copy itself (the list knows neither the app's
    *  routes nor whether a clipboard is available). */
   onRequestCopyLink?: (dialog: DialogItem) => void;
+  /** Request context compaction — enables the row "Compact Chat Memory" action. */
+  onRequestCompact?: (dialog: DialogItem) => void;
   /** Current server-side search term. Drives the "No chats found" empty state;
    *  the search INPUT lives in the panel header, not in this list. The host
    *  owns the term and refetches server-side — the list does no filtering. */
@@ -93,6 +96,7 @@ interface RowProps {
   onSelect?: (id: string) => void;
   onRequestRename?: (dialog: DialogItem) => void;
   onRequestCopyLink?: (dialog: DialogItem) => void;
+  onRequestCompact?: (dialog: DialogItem) => void;
   onRequestArchive?: (dialog: DialogItem) => void;
 }
 
@@ -102,34 +106,24 @@ function MingoChatHistoryRow({
   onSelect,
   onRequestCopyLink,
   onRequestRename,
+  onRequestCompact,
   onRequestArchive,
 }: RowProps) {
   const title = dialog.title || 'Untitled Chat';
   const unread = dialog.unreadMessagesCount ?? 0;
-  const hasMenu = !!onRequestRename || !!onRequestArchive || !!onRequestCopyLink;
+  const hasMenu = !!onRequestRename || !!onRequestArchive || !!onRequestCopyLink || !!onRequestCompact;
   const owner = dialog.owner;
   const hasAvatar = !!(owner?.name || owner?.avatarUrl);
   // Keep the `⋯` visible while its menu is open — once Radix moves focus into
   // the portalled content the row loses hover/focus-within.
   const [menuOpen, setMenuOpen] = useState(false);
 
-  const menuItems = [
-    onRequestCopyLink && {
-      id: 'copy-link',
-      label: 'Copy chat link',
-      onClick: () => onRequestCopyLink(dialog),
-    },
-    onRequestRename && {
-      id: 'rename',
-      label: 'Rename chat',
-      onClick: () => onRequestRename(dialog),
-    },
-    onRequestArchive && {
-      id: 'archive',
-      label: 'Archive chat',
-      onClick: () => onRequestArchive(dialog),
-    },
-  ].filter(Boolean) as ActionsMenuItem[];
+  const menuItems = chatDialogMenuItems({
+    onCopyLink: onRequestCopyLink && (() => onRequestCopyLink(dialog)),
+    onRename: onRequestRename && (() => onRequestRename(dialog)),
+    onCompact: onRequestCompact && (() => onRequestCompact(dialog)),
+    onArchive: onRequestArchive && (() => onRequestArchive(dialog)),
+  });
 
   // The item is the full-width row (inside the group's bordered box). Padding
   // lives on the inner content button (badge + title) only — the `⋯` is a
@@ -317,6 +311,7 @@ export function MingoChatHistory({
   onSelectDialog,
   onRequestCopyLink,
   onRequestRename,
+  onRequestCompact,
   onRequestArchive,
   searchQuery,
   hasMore = false,
@@ -400,6 +395,7 @@ export function MingoChatHistory({
                       onSelect={onSelectDialog}
                       onRequestCopyLink={onRequestCopyLink}
                       onRequestRename={onRequestRename}
+                      onRequestCompact={onRequestCompact}
                       onRequestArchive={onRequestArchive}
                     />
                   ))}

package/src/components/chat/mingo-history-rail.tsx

@@ -29,12 +29,14 @@ export interface MingoHistoryRailProps {
    *  the welcome. Rendered as the pinned "Start New Chat" button above the list,
    *  in every state (including the no-chats empty state). */
   onNewChat?: () => void;
-  /** Request rename — enables the row "Rename chat" action. */
+  /** Request rename — enables the row "Rename Chat" action. */
   onRequestRename?: (dialog: DialogItem) => void;
-  /** Request archive — enables the row "Archive chat" action. */
+  /** Request archive — enables the row "Archive Chat" action. */
   onRequestArchive?: (dialog: DialogItem) => void;
-  /** Request a shareable link — enables the row "Copy chat link" action. */
+  /** Request a shareable link — enables the row "Copy Chat Link" action. */
   onRequestCopyLink?: (dialog: DialogItem) => void;
+  /** Request context compaction — enables the row "Compact Chat Memory" action. */
+  onRequestCompact?: (dialog: DialogItem) => void;
   /** Ownership scope shown as a two-state "My Chats / All Chats" selector
    *  between "Start New Chat" and the list. Rendered only when BOTH `scope`
    *  and `onScopeChange` are provided; the host owns the state and refilters
@@ -88,6 +90,7 @@ export function MingoHistoryRail({
   onRequestRename,
   onRequestArchive,
   onRequestCopyLink,
+  onRequestCompact,
   scope,
   onScopeChange,
   searchQuery,
@@ -169,6 +172,7 @@ export function MingoHistoryRail({
           onRequestRename={onRequestRename}
           onRequestArchive={onRequestArchive}
           onRequestCopyLink={onRequestCopyLink}
+          onRequestCompact={onRequestCompact}
           searchQuery={searchQuery}
           hasMore={hasMore}
           isLoadingMore={isLoadingMore}

package/src/components/chat/types/unified-chat-state.types.ts

@@ -49,9 +49,9 @@ export interface FetchDialogsResult {
  * or adapter-owned (`UnifiedChatState.dialogCapabilities`).
  */
 export interface ChatDialogCapabilities {
-  /** Show "Rename chat" in the row ⋯ menu and the conversation header. */
+  /** Show "Rename Chat" in the row ⋯ menu and the conversation header. */
   canRename?: boolean;
-  /** Show "Archive chat" in the row ⋯ menu and the conversation header. */
+  /** Show "Archive Chat" in the row ⋯ menu and the conversation header. */
   canArchive?: boolean;
   /** Pages archived dialogs — presence gates the archive page + header button. */
   fetchArchivedDialogs?: (params: FetchDialogsParams) => Promise<FetchDialogsResult>;
@@ -61,8 +61,14 @@ export interface ChatDialogCapabilities {
   searchQuery?: string;
   /** Presence wires the header magnifier + the rail's search field. */
   onSearchChange?: (query: string) => void;
-  /** "Copy chat link" — the owner of the URL shape + clipboard write. */
+  /** "Copy Chat Link" — the owner of the URL shape + clipboard write. */
   onCopyLink?: (dialog: DialogItem) => void;
+  /**
+   * "Compact Chat Memory" — summarizes the dialog's AI context on demand. The
+   * host owns the request and its feedback; the compaction itself streams into
+   * the thread as the usual context-compaction message.
+   */
+  compactDialog?: (dialog: DialogItem) => void;
   /**
    * When the list has settled EMPTY and is unsearched, land on the composer
    * instead of an empty "Current Chats" screen.

package/src/components/icons/empty-vendor-icon.tsx

@@ -1,9 +1,15 @@
+import { useId } from 'react';
+
 interface EmptyVendorIconProps {
   className?: string;
 }
 
 /** @deprecated Use icons from icons-v2-generated instead. */
 export function EmptyVendorIcon({ className }: EmptyVendorIconProps) {
+  const uniqueId = useId();
+  const patternId = `pattern0_1643_33816_${uniqueId}`;
+  const imageId = `image0_1643_33816_${uniqueId}`;
+
   return (
     <svg
       width="24"
@@ -16,14 +22,14 @@ export function EmptyVendorIcon({ className }: EmptyVendorIconProps) {
     >
       <path
         d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z"
-        fill="url(#pattern0_1643_33816)"
+        fill={`url(#${patternId})`}
       />
       <defs>
-        <pattern id="pattern0_1643_33816" patternContentUnits="objectBoundingBox" width="1" height="1">
-          <use xlinkHref="#image0_1643_33816" transform="scale(0.0104167)" />
+        <pattern id={patternId} patternContentUnits="objectBoundingBox" width="1" height="1">
+          <use xlinkHref={`#${imageId}`} transform="scale(0.0104167)" />
         </pattern>
         <image
-          id="image0_1643_33816"
+          id={imageId}
           width="96"
           height="96"
           preserveAspectRatio="none"