@flamingo-stack/openframe-frontend-core 0.0.462 → 0.0.463

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

@@ -5,6 +5,7 @@ import { cn } from '../../utils/cn'
 import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu'
 import { Button } from '../ui/button'
 import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade'
+import { SquareAvatar } from '../ui/square-avatar'
 import { Ellipsis01Icon, SearchXmarkIcon } from '../icons-v2-generated'
 import { ChatListEmptyState } from './chat-list-empty-state'
 import type { DialogItem } from './types/component.types'
@@ -107,6 +108,8 @@ function MingoChatHistoryRow({
   const title = dialog.title || 'Untitled Chat'
   const unread = dialog.unreadMessagesCount ?? 0
   const hasMenu = !!onRequestRename || !!onRequestArchive
+  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] = React.useState(false)
@@ -173,46 +176,82 @@ function MingoChatHistoryRow({
           {title}
         </span>
       </div>
-      {hasMenu ? (
-        // Sibling of the padded content (not inside it): sits at the item's
-        // right edge, free of the content's left padding. Revealed on row
-        // hover/focus; kept visible while its menu is open. Hidden on mobile —
-        // it's a hover affordance (no hover on touch).
+      {hasMenu || hasAvatar ? (
+        // Trailing 48px cell (Figma 113:63224): the owner avatar sits centred
+        // by default; hovering the row (or opening the menu) swaps it for the
+        // `⋯` actions button IN PLACE, so the title never reflows. Without an
+        // avatar the cell exists only for the hover menu, so it collapses on
+        // mobile exactly like the old hover-only gutter (no hover on touch).
         <span
-          onClick={(e) => e.stopPropagation()}
           className={cn(
-            // `self-stretch` so the wrapper fills the row height — gives the
-            // button's `h-full` a definite parent to resolve against (under the
-            // row's `items-center` the wrapper would otherwise collapse to its
-            // content and `h-full` on the button would no-op).
-            'self-stretch shrink-0 transition-opacity max-md:hidden',
-            menuOpen
-              ? 'opacity-100'
-              : 'opacity-0 group-hover/row:opacity-100 focus-within:opacity-100',
+            'relative w-12 self-stretch shrink-0',
+            !hasAvatar && 'max-md:hidden',
           )}
         >
-          <ActionsMenuDropdown
-            triggerAriaLabel="Chat actions"
-            groups={[{ items: menuItems }]}
-            open={menuOpen}
-            onOpenChange={setMenuOpen}
-            // Don't return focus (and its ring) to the `⋯` trigger on close.
-            onCloseAutoFocus={(e) => e.preventDefault()}
-            customTrigger={
-              <Button
-                variant="transparent"
-                size="icon"
-                aria-label="Chat actions"
-                // Square, grey icon → white on hover. `h-full` matches the row
-                // height exactly (no breakpoint poke from `size="icon"`'s
-                // responsive `md:h-12`); `w-9` keeps it compact; `p-0` drops the
-                // icon-size padding. tailwind-merge so these win over defaults.
-                className="h-full md:h-full rounded-none p-0 text-ods-text-secondary hover:text-ods-text-primary"
-              >
-                <Ellipsis01Icon />
-              </Button>
-            }
-          />
+          {hasMenu ? (
+            // Revealed on row hover/its own focus; kept visible while the menu
+            // is open. Hidden on mobile — it's a hover affordance. `peer/menu`
+            // so the avatar layer (a later sibling) can fade when the trigger
+            // holds keyboard focus.
+            <span
+              onClick={(e) => e.stopPropagation()}
+              className={cn(
+                'peer/menu absolute inset-0 transition-opacity max-md:hidden',
+                menuOpen
+                  ? 'opacity-100'
+                  : 'opacity-0 group-hover/row:opacity-100 focus-within:opacity-100',
+              )}
+            >
+              <ActionsMenuDropdown
+                triggerAriaLabel="Chat actions"
+                groups={[{ items: menuItems }]}
+                open={menuOpen}
+                onOpenChange={setMenuOpen}
+                // Don't return focus (and its ring) to the `⋯` trigger on close.
+                onCloseAutoFocus={(e) => e.preventDefault()}
+                customTrigger={
+                  <Button
+                    variant="transparent"
+                    size="icon"
+                    aria-label="Chat actions"
+                    // Square, grey icon → white on hover. `h-full`/`w-full` fill
+                    // the 48px cell exactly (no breakpoint poke from
+                    // `size="icon"`'s responsive `md:h-12`); `p-0` drops the
+                    // icon-size padding. tailwind-merge so these win over
+                    // defaults.
+                    className="h-full md:h-full w-full rounded-none p-0 text-ods-text-secondary hover:text-ods-text-primary"
+                  >
+                    <Ellipsis01Icon />
+                  </Button>
+                }
+              />
+            </span>
+          ) : null}
+          {hasAvatar ? (
+            // Avatar layer — clicks fall through to row selection (it covers
+            // the cell whenever the menu trigger is faded out). On desktop it
+            // fades for the menu swap; on mobile it's always shown.
+            <span
+              onClick={() => onSelect?.(dialog.id)}
+              title={owner?.name || undefined}
+              className={cn(
+                'absolute inset-0 flex cursor-pointer items-center justify-center transition-opacity',
+                hasMenu &&
+                  (menuOpen
+                    ? 'opacity-0 pointer-events-none'
+                    : 'md:group-hover/row:opacity-0 md:group-hover/row:pointer-events-none md:peer-[:focus-within]/menu:opacity-0 md:peer-[:focus-within]/menu:pointer-events-none'),
+              )}
+            >
+              <SquareAvatar
+                variant="round"
+                sizePx={24}
+                src={owner?.avatarUrl || undefined}
+                alt={owner?.name || undefined}
+                fallback={owner?.name || undefined}
+                initialsClassName="text-[10px] text-ods-text-secondary"
+              />
+            </span>
+          ) : null}
         </span>
       ) : null}
     </div>
@@ -316,6 +355,7 @@ export function MingoChatHistory({
   onLoadMoreRef.current = onLoadMore
   const isLoadingMoreRef = React.useRef(isLoadingMore)
   isLoadingMoreRef.current = isLoadingMore
+  const dialogCount = dialogs.length
   React.useEffect(() => {
     const root = scrollRef.current
     const sentinel = sentinelRef.current
@@ -331,7 +371,15 @@ export function MingoChatHistory({
     )
     io.observe(sentinel)
     return () => io.disconnect()
-  }, [hasMore])
+    // `dialogCount`/`isLoadingMore` deps re-arm the observer after every page
+    // lands: `observe()` re-reports the CURRENT intersection, so a sentinel
+    // that stays in view (short host-filtered list — e.g. the "My Chats"
+    // scope keeps a handful of rows out of a 20-row page) keeps chaining
+    // loads until the viewport fills or `hasMore` flips. A continuously
+    // visible sentinel never re-crosses the threshold, so the previous
+    // [hasMore]-only observer fired exactly once per mount and the list
+    // grew by a single page per drawer open.
+  }, [hasMore, isLoadingMore, dialogCount])
 
   return (
     <div className={cn('relative flex flex-1 min-h-0 flex-col gap-[var(--spacing-system-m)]', className)}>

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

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import { cn } from '../../utils/cn'
 import { Button } from '../ui/button'
+import { TabSelector } from '../ui/tab-selector'
 import { ChatsIcon } from '../icons-v2-generated/communication/chats-icon'
 import { PlusCircleIcon } from '../icons-v2-generated/signs-and-symbols/plus-circle-icon'
 import { AlertCircleIcon, Refresh01RightIcon } from '../icons-v2-generated'
@@ -14,6 +15,10 @@ import type { DialogItem } from './types/component.types'
 // Types
 // =============================================================================
 
+/** Ownership scope of the rail's dialog list — the current user's chats only,
+ *  or every admin's chats in the tenant. */
+export type MingoHistoryScope = 'my' | 'all'
+
 export interface MingoHistoryRailProps {
   /** Dialogs to list, assumed already sorted newest-first by the host. */
   dialogs: ReadonlyArray<DialogItem>
@@ -32,6 +37,13 @@ export interface MingoHistoryRailProps {
   onRequestRename?: (dialog: DialogItem) => void
   /** Request archive — enables the row "Archive chat" action. */
   onRequestArchive?: (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
+   *  the `dialogs` it passes in. */
+  scope?: MingoHistoryScope
+  /** Scope selector change handler — see `scope`. */
+  onScopeChange?: (scope: MingoHistoryScope) => void
   /** Current server-side search term. Drives the list's "No chats found"
    *  empty state; the search INPUT itself lives in the panel header now, not
    *  in the rail body. */
@@ -77,6 +89,8 @@ export function MingoHistoryRail({
   newChatAlways = false,
   onRequestRename,
   onRequestArchive,
+  scope,
+  onScopeChange,
   searchQuery,
   hasMore = false,
   isLoadingMore = false,
@@ -114,6 +128,23 @@ export function MingoHistoryRail({
         </Button>
       )}
 
+      {/* Two-state ownership scope — "My Chats" / "All Chats". Stays visible in
+          the empty state too: an empty "My Chats" list must still offer the
+          switch to "All Chats" (host filters, so the empty state can be
+          scope-induced). Hidden while the load failed — retry is the only
+          useful action there. */}
+      {scope && onScopeChange && !loadError ? (
+        <TabSelector
+          className="shrink-0"
+          value={scope}
+          onValueChange={(value) => onScopeChange(value as MingoHistoryScope)}
+          items={[
+            { id: 'my', label: 'My Chats' },
+            { id: 'all', label: 'All Chats' },
+          ]}
+        />
+      ) : null}
+
       {loadError ? (
         <div className="flex flex-1 min-h-0 flex-col items-center justify-center gap-[var(--spacing-system-m)] text-center">
           <AlertCircleIcon className="h-8 w-8 text-ods-text-secondary shrink-0" />

package/src/components/chat/types/component.types.ts

@@ -608,6 +608,14 @@ export interface DialogItem {
   timestamp?: Date | string
   isActive?: boolean
   unreadMessagesCount?: number
+  /** Dialog owner (creator) — drives the trailing avatar in the chat-history
+   *  rows (Figma 113:63224). Omit to render the row without an avatar. */
+  owner?: {
+    /** Full display name — initials fallback + `title` tooltip. */
+    name?: string | null
+    /** Absolute avatar URL; falls back to initials when absent or failing. */
+    avatarUrl?: string | null
+  }
 }
 
 // ========== Chat Sidebar Props ==========

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

@@ -369,6 +369,15 @@ export interface UnifiedChatState {
   /** Fetch the next page of dialogs. No-op when `hasMoreDialogs` is false. */
   loadMoreDialogs: () => Promise<void>
 
+  /** Ownership scope of `dialogs` — `'my'` (current user's chats) or `'all'`
+   *  (every admin's). Optional: adapters without ownership data omit it and
+   *  the "My Chats / All Chats" selector stays hidden. The HOST owns the
+   *  filtering — `dialogs` must already reflect this scope. */
+  dialogScope?: 'my' | 'all'
+
+  /** Switch the ownership scope — see `dialogScope`. */
+  setDialogScope?: (scope: 'my' | 'all') => void
+
   /** Whether more historical messages remain in the active dialog. */
   hasMoreMessages: boolean
 

package/src/components/ui/tab-selector.tsx

@@ -67,15 +67,18 @@ export function TabSelector({
               onClick={() => onValueChange(item.id)}
               aria-label={!item.label ? item.ariaLabel : undefined}
               className={cn(
-                'flex flex-1 items-center justify-center gap-2 rounded-xs p-2 text-h4 transition-colors duration-200 whitespace-nowrap',
+                // Bold on BOTH states — a medium↔bold flip between the active
+                // and inactive tabs read as inconsistent weight (and nudged
+                // label widths on every switch).
+                'flex flex-1 items-center justify-center gap-2 rounded-xs p-2 text-h4 font-bold transition-colors duration-200 whitespace-nowrap',
                 isDisabled
                   ? isActive
-                    ? 'cursor-not-allowed bg-ods-bg-surface text-ods-text-secondary [font-weight:700]'
+                    ? 'cursor-not-allowed bg-ods-bg-surface text-ods-text-secondary'
                     : 'cursor-not-allowed bg-transparent text-ods-text-secondary'
                   : isActive
                     ? variant === 'primary'
-                      ? 'bg-ods-accent text-ods-text-on-accent cursor-default [font-weight:700]'
-                      : 'bg-ods-bg-surface text-ods-text-primary cursor-default [font-weight:700]'
+                      ? 'bg-ods-accent text-ods-text-on-accent cursor-default'
+                      : 'bg-ods-bg-surface text-ods-text-primary cursor-default'
                     : 'bg-transparent text-ods-text-primary hover:bg-ods-bg-hover cursor-pointer',
               )}
             >