@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

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

@@ -3,12 +3,23 @@ import type { MouseEvent } from 'react';
 import { cn } from '../../utils/cn';
 import { formatDateWithTimezone, VIEWER_TIMEZONE } from '../../utils/format';
 import { ChatPlusIcon, ChatsIcon, Chevron02RightIcon } from '../icons-v2-generated';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
 import { Button } from '../ui/button';
-import { ChatSidebarSkeleton, DialogListItemSkeleton } from './chat-sidebar-skeleton';
-import type { ChatSidebarProps, DialogListItemProps } from './types';
+import { LoadingItems, loadingItemProps, useLoadingScope } from '../ui/loading-scope';
+import { CHAT_HISTORY_PAGE_SIZE } from './mingo-chat-history';
+import type { ChatSidebarProps, DialogItem, DialogListItemProps } from './types';
 
+/** A dialog row's box, loaded and loading. */
+const DIALOG_LIST_ITEM_CLASS = 'flex items-center gap-4 overflow-clip px-4 py-3 border-b border-ods-border bg-ods-card';
+
+/**
+ * One dialog row. ONE switch (`useLoadingScope() || loading`): while the dialog is read the SAME row (inert, not
+ * clickable) draws its title and time as bars and its chevron (static) for real.
+ */
 const DialogListItem = forwardRef<HTMLDivElement, DialogListItemProps>(
-  ({ className, dialog, isActive, onDialogSelect, onClick, ...props }, ref) => {
+  ({ className, dialog, isActive, onDialogSelect, onClick, loading: loadingProp = false, ...props }, ref) => {
+    const loading = useLoadingScope() || loadingProp;
+
     const handleClick = (e: MouseEvent<HTMLDivElement>) => {
       onDialogSelect?.(dialog.id);
       onClick?.(e);
@@ -20,49 +31,56 @@ const DialogListItem = forwardRef<HTMLDivElement, DialogListItemProps>(
       return formatDateWithTimezone(timestamp, VIEWER_TIMEZONE, 'numericDateTime24h');
     };
 
+    const unread = loading ? 0 : (dialog.unreadMessagesCount ?? 0);
+
     return (
       <div
-        ref={ref}
+        ref={loading ? undefined : ref}
+        aria-hidden={loading || undefined}
         className={cn(
-          'flex items-center gap-4 overflow-clip',
-          'px-4 py-3',
-          'cursor-pointer border-b border-ods-border',
-          'bg-ods-card',
-          'transition-colors hover:bg-ods-bg-hover',
-          isActive && 'border-l-2 border-l-ods-accent bg-ods-bg-hover',
+          DIALOG_LIST_ITEM_CLASS,
+          !loading && 'cursor-pointer transition-colors hover:bg-ods-bg-hover',
+          !loading && isActive && 'border-l-2 border-l-ods-accent bg-ods-bg-hover',
           className,
         )}
-        onClick={handleClick}
-        {...props}
+        onClick={loading ? undefined : handleClick}
+        {...(loading ? loadingItemProps(props) : props)}
       >
         {/* Content area */}
         <div className="flex min-w-0 flex-1 flex-col items-start justify-center gap-1">
-          <div className="flex w-full min-w-0 items-center">
-            <h3
-              className={cn(
-                'min-w-0 flex-1 text-h6',
-                isActive ? 'text-ods-accent' : 'text-ods-text-primary',
-                'truncate',
+          {loading ? (
+            <>
+              <TextLineSkeleton type="h6" className="w-full max-w-[200px]" />
+              <TextLineSkeleton type="h6" className="w-32" />
+            </>
+          ) : (
+            <>
+              <div className="flex w-full min-w-0 items-center">
+                <h3
+                  className={cn(
+                    'min-w-0 flex-1 text-h6',
+                    isActive ? 'text-ods-accent' : 'text-ods-text-primary',
+                    'truncate',
+                  )}
+                  title={dialog.title || 'Untitled Chat'}
+                >
+                  {dialog.title || 'Untitled Chat'}
+                </h3>
+              </div>
+              {dialog.timestamp && (
+                <p className="w-full min-w-0 truncate text-ods-text-secondary text-h6">
+                  {formatTimestamp(dialog.timestamp)}
+                </p>
               )}
-              title={dialog.title || 'Untitled Chat'}
-            >
-              {dialog.title || 'Untitled Chat'}
-            </h3>
-          </div>
-          {dialog.timestamp && (
-            <p className="w-full min-w-0 truncate text-ods-text-secondary text-h6">
-              {formatTimestamp(dialog.timestamp)}
-            </p>
+            </>
           )}
         </div>
 
         {/* Right side indicator - always visible */}
         <div className="ml-2 flex-shrink-0">
-          {dialog.unreadMessagesCount && dialog.unreadMessagesCount > 0 ? (
+          {unread > 0 ? (
             <div className="flex h-6 min-w-6 shrink-0 items-center justify-center rounded-md bg-ods-accent px-[var(--spacing-system-xsf)]">
-              <span className="text-ods-text-on-accent text-h6">
-                {dialog.unreadMessagesCount > 99 ? '99+' : dialog.unreadMessagesCount}
-              </span>
+              <span className="text-ods-text-on-accent text-h6">{unread > 99 ? '99+' : unread}</span>
             </div>
           ) : (
             <Chevron02RightIcon className="size-6 text-ods-text-secondary" />
@@ -75,6 +93,18 @@ const DialogListItem = forwardRef<HTMLDivElement, DialogListItemProps>(
 
 DialogListItem.displayName = 'DialogListItem';
 
+/** A dialog row while the list is read, with no dialog yet. */
+const LOADING_DIALOG: DialogItem = { id: '', title: '' };
+
+/** A page of loading dialog rows (the list's page size), each a list item: the first page and the next one alike. */
+function DialogListItemLoadingPage({ count }: { count: number }) {
+  return (
+    <LoadingItems count={count}>
+      {() => <DialogListItem loading dialog={LOADING_DIALOG} data-loading-item />}
+    </LoadingItems>
+  );
+}
+
 const ChatSidebar = forwardRef<HTMLDivElement, ChatSidebarProps>(
   (
     {
@@ -89,17 +119,24 @@ const ChatSidebar = forwardRef<HTMLDivElement, ChatSidebarProps>(
       hasNextPage,
       isFetchingNextPage,
       onLoadMore,
+      pageSize = CHAT_HISTORY_PAGE_SIZE,
       ...props
     },
     ref,
   ) => {
-    const showEmptyState = dialogs.length === 0 && !children;
+    // ONE switch: the first page with nothing to show yet (or the page's loading state) draws the sidebar with one
+    // page of skeleton rows; the shell and its static copy stay real.
+    const loading = useLoadingScope() || (!!isLoading && dialogs.length === 0 && !children);
+    const showEmptyState = !loading && dialogs.length === 0 && !children;
     const scrollContainerRef = useRef<HTMLDivElement>(null);
     const loadMoreRef = useRef<HTMLDivElement>(null);
+    // Refreshed in an effect, not during render: the only reader is the IntersectionObserver callback.
     const onLoadMoreRef = useRef(onLoadMore);
-    onLoadMoreRef.current = onLoadMore;
     const isFetchingRef = useRef(isFetchingNextPage);
-    isFetchingRef.current = isFetchingNextPage;
+    useEffect(() => {
+      onLoadMoreRef.current = onLoadMore;
+      isFetchingRef.current = isFetchingNextPage;
+    });
 
     useEffect(() => {
       const scrollContainer = scrollContainerRef.current;
@@ -119,10 +156,6 @@ const ChatSidebar = forwardRef<HTMLDivElement, ChatSidebarProps>(
       return () => observer.disconnect();
     }, [hasNextPage]);
 
-    if (isLoading && dialogs.length === 0 && !children) {
-      return <ChatSidebarSkeleton className={className} dialogCount={8} showNewChatButton={true} />;
-    }
-
     return (
       <div
         ref={ref}
@@ -153,6 +186,12 @@ const ChatSidebar = forwardRef<HTMLDivElement, ChatSidebarProps>(
                 <p className="text-ods-text-secondary text-h6">Previous Mingo sessions will show here</p>
               </div>
             </div>
+          ) : loading ? (
+            <div className="min-h-0 flex-1 overflow-hidden">
+              <div className="flex flex-col">
+                <DialogListItemLoadingPage count={pageSize} />
+              </div>
+            </div>
           ) : children ? (
             /* Custom children content */
             <div className="flex-1 overflow-y-auto overscroll-contain">{children}</div>
@@ -163,23 +202,16 @@ const ChatSidebar = forwardRef<HTMLDivElement, ChatSidebarProps>(
                 {dialogs.map(dialog => (
                   <DialogListItem
                     key={dialog.id}
+                    data-loading-item
                     dialog={dialog}
                     isActive={dialog.id === activeDialogId}
                     onDialogSelect={onDialogSelect}
                   />
                 ))}
 
-                {/* Infinite scroll loading indicator and intersection target */}
+                {/* Infinite scroll intersection target; the next page draws as one page of skeleton rows. */}
                 {hasNextPage && (
-                  <div ref={loadMoreRef}>
-                    {isFetchingNextPage && (
-                      <>
-                        <DialogListItemSkeleton />
-                        <DialogListItemSkeleton />
-                        <DialogListItemSkeleton />
-                      </>
-                    )}
-                  </div>
+                  <div ref={loadMoreRef}>{isFetchingNextPage && <DialogListItemLoadingPage count={pageSize} />}</div>
                 )}
               </div>
             </div>

package/src/components/chat/chat-ticket-list.tsx

@@ -2,6 +2,7 @@
 
 import { type HTMLAttributes, forwardRef } from 'react';
 import { cn } from '../../utils/cn';
+import { LoadingItems, useLoadingScope } from '../ui/loading-scope';
 import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade';
 import { ChatTicketItem, type ChatTicketItemData } from './entity-cards/chat-ticket-item';
 
@@ -10,52 +11,60 @@ export interface ChatTicketListProps extends HTMLAttributes<HTMLDivElement> {
   onTicketClick?: (ticketId: string) => void;
   /** Show skeleton placeholder rows instead of tickets while loading. */
   isLoading?: boolean;
-  /** Number of skeleton rows rendered while `isLoading`. Defaults to 5. */
+  /** Number of skeleton rows rendered while loading: the host's page size when it pages the tickets. Defaults to
+   *  {@link CHAT_TICKET_LIST_SKELETON_ROWS}. */
   skeletonCount?: number;
 }
 
+/** The rows a loading list draws when the host states none: a typical list, since the list has no page size. */
+export const CHAT_TICKET_LIST_SKELETON_ROWS = 5;
+
 const ChatTicketList = forwardRef<HTMLDivElement, ChatTicketListProps>(
-  ({ className, tickets, onTicketClick, isLoading = false, skeletonCount = 5, ...props }, ref) => {
+  (
+    {
+      className,
+      tickets,
+      onTicketClick,
+      isLoading: isLoadingProp = false,
+      skeletonCount = CHAT_TICKET_LIST_SKELETON_ROWS,
+      ...props
+    },
+    ref,
+  ) => {
+    // ONE switch: in a page's loading state (or while the host reads the tickets) the list draws its loading rows.
+    const isLoading = useLoadingScope() || isLoadingProp;
     // Shared scroll-shadow tracking (ui/scroll-fade) — re-measures on resize
     // and content changes, so no manual ticket-count effect is needed.
     const { scrollRef, fadeTop, fadeBottom, update: updateFade } = useScrollFade<HTMLDivElement>();
 
-    if (isLoading) {
-      return (
-        <div ref={ref} className={cn('flex min-h-0 flex-col gap-2', className)} {...props}>
-          <p className="shrink-0 text-ods-text-secondary text-h5">Your Chats:</p>
-          <div className="min-h-0 flex-1 overflow-hidden rounded-md border border-ods-border">
-            {Array.from({ length: skeletonCount }).map((_, i) => (
-              <ChatTicketItem key={i} isLoading />
-            ))}
-          </div>
-        </div>
-      );
-    }
-
-    if (tickets.length === 0) return null;
+    if (!isLoading && tickets.length === 0) return null;
 
+    // ONE frame and heading, loaded and loading: only the rows switch (each `ChatTicketItem` draws its own loading form).
     return (
       <div ref={ref} className={cn('flex min-h-0 flex-col gap-2', className)} {...props}>
         <p className="shrink-0 text-ods-text-secondary text-h5">Your Chats:</p>
         <div
           className={cn(
             'relative min-h-0 flex-1 overflow-hidden border-x border-ods-border',
-            !fadeTop && 'rounded-t-md border-t',
-            !fadeBottom && 'rounded-b-md border-b',
+            (isLoading || !fadeTop) && 'rounded-t-md border-t',
+            (isLoading || !fadeBottom) && 'rounded-b-md border-b',
           )}
         >
           <div ref={scrollRef} className="h-full overflow-y-auto overscroll-contain" onScroll={updateFade}>
-            {tickets.map(ticket => (
-              <ChatTicketItem key={ticket.id} ticket={ticket} onClick={onTicketClick} />
-            ))}
+            {isLoading ? (
+              <LoadingItems count={skeletonCount}>{() => <ChatTicketItem loading data-loading-item />}</LoadingItems>
+            ) : (
+              tickets.map(ticket => (
+                <ChatTicketItem key={ticket.id} ticket={ticket} onClick={onTicketClick} data-loading-item />
+              ))
+            )}
           </div>
 
           {/* Scroll-fade overlays — tinted with the page background so edge
               tickets fade into the surface behind the list in BOTH themes
               (`--color-bg` flips with `data-theme`). Shared ui/scroll-fade. */}
-          <ScrollFadeOverlay edge="top" visible={fadeTop} />
-          <ScrollFadeOverlay edge="bottom" visible={fadeBottom} />
+          <ScrollFadeOverlay edge="top" visible={!isLoading && fadeTop} />
+          <ScrollFadeOverlay edge="bottom" visible={!isLoading && fadeBottom} />
         </div>
       </div>
     );

package/src/components/chat/chat-top-navigation.tsx

@@ -3,7 +3,9 @@
 import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
 import { cn } from '../../utils/cn';
 import { Settings01Icon, SidebarIcon } from '../icons-v2-generated';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { Button } from '../ui/button';
+import { useLoadingScope } from '../ui/loading-scope';
 import { SquareAvatar } from '../ui/square-avatar';
 
 export interface ChatTopNavigationProps extends HTMLAttributes<HTMLElement> {
@@ -23,15 +25,13 @@ export interface ChatTopNavigationProps extends HTMLAttributes<HTMLElement> {
   /** Content above the bar, full width (e.g. a "Back to ..." strip). */
   before?: ReactNode;
   /** Identity still resolving: placeholders instead of a default name that
-   *  would flash before the tenant's branding lands. */
+   *  would flash before the tenant's branding lands. A loading scope does the same. The subtitle's bar is drawn
+   *  only when the bar has a subtitle (`subtitle` given, `''` while it is read). */
   isLoading?: boolean;
 }
 
-const edgeButtonClass = cn(
-  'flex size-14 shrink-0 items-center justify-center border-ods-border text-ods-text-secondary',
-  'hover:text-ods-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus',
-  '[&_svg]:size-6',
-);
+/** An edge button is a bar cell (`Button variant="cell"`), square: the bar's 56px. */
+const EDGE_CELL_CLASS = 'w-14';
 
 /**
  * Top bar of the fae chat v2 layout (Figma `chat-top-navigation`): an optional
@@ -50,58 +50,66 @@ const ChatTopNavigation = forwardRef<HTMLElement, ChatTopNavigationProps>(
       sidebarOpen,
       onOpenSettings,
       before,
-      isLoading,
+      isLoading: isLoadingProp,
       ...props
     },
     ref,
-  ) => (
-    <header ref={ref} className={cn('flex shrink-0 flex-col bg-ods-bg', className)} {...props}>
-      {before}
-      <div className="flex h-14 items-stretch border-b border-ods-border">
-        {onToggleSidebar && (
-          <button
-            type="button"
-            onClick={onToggleSidebar}
-            aria-label={sidebarOpen ? 'Hide sidebar' : 'Show sidebar'}
-            aria-expanded={sidebarOpen}
-            className={cn(edgeButtonClass, 'border-r')}
-          >
-            <SidebarIcon />
-          </button>
-        )}
-        <div className="flex min-w-0 flex-1 items-center gap-[var(--spacing-system-m)] px-[var(--spacing-system-m)]">
-          {isLoading ? (
-            <>
-              <UnifiedSkeleton className="size-10 shrink-0 rounded-full" />
-              <div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]">
-                <UnifiedSkeleton className="h-5 w-24" />
-                <UnifiedSkeleton className="h-4 w-32" />
+  ) => {
+    // ONE switch: in a page's loading state (or while the host reads the identity) the identity is its skeleton.
+    const isLoading = useLoadingScope() || isLoadingProp;
+    return (
+      <header ref={ref} className={cn('flex shrink-0 flex-col bg-ods-bg', className)} {...props}>
+        {before}
+        <div className="flex h-14 items-stretch divide-x divide-ods-border border-b border-ods-border">
+          {onToggleSidebar && (
+            <Button
+              variant="cell"
+              type="button"
+              onClick={onToggleSidebar}
+              aria-label={sidebarOpen ? 'Hide sidebar' : 'Show sidebar'}
+              aria-expanded={sidebarOpen}
+              className={EDGE_CELL_CLASS}
+            >
+              <SidebarIcon />
+            </Button>
+          )}
+          <div className="flex min-w-0 flex-1 items-center gap-[var(--spacing-system-m)] px-[var(--spacing-system-m)]">
+            <SquareAvatar
+              loading={isLoading}
+              src={avatarUrl ?? undefined}
+              alt={name}
+              fallback={name}
+              size="md"
+              variant="round"
+            />
+            {isLoading ? (
+              <div className="flex min-w-0 flex-1 flex-col">
+                <TextLineSkeleton type="h3" className="w-24" />
+                {subtitle !== undefined && <TextLineSkeleton type="h6" className="w-32" />}
               </div>
-            </>
-          ) : (
-            <>
-              <SquareAvatar src={avatarUrl ?? undefined} alt={name} fallback={name} size="md" variant="round" />
+            ) : (
               <div className="flex min-w-0 flex-1 flex-col">
                 <p className="truncate text-ods-text-primary text-h3">{name}</p>
                 {subtitle && <p className="truncate text-ods-text-secondary text-h6">{subtitle}</p>}
               </div>
-            </>
+            )}
+            {actions && <div className="flex shrink-0 items-center gap-[var(--spacing-system-xs)]">{actions}</div>}
+          </div>
+          {onOpenSettings && (
+            <Button
+              variant="cell"
+              type="button"
+              onClick={onOpenSettings}
+              aria-label="Settings"
+              className={EDGE_CELL_CLASS}
+            >
+              <Settings01Icon />
+            </Button>
           )}
-          {actions && <div className="flex shrink-0 items-center gap-[var(--spacing-system-xs)]">{actions}</div>}
         </div>
-        {onOpenSettings && (
-          <button
-            type="button"
-            onClick={onOpenSettings}
-            aria-label="Settings"
-            className={cn(edgeButtonClass, 'border-l')}
-          >
-            <Settings01Icon />
-          </button>
-        )}
-      </div>
-    </header>
-  ),
+      </header>
+    );
+  },
 );
 
 ChatTopNavigation.displayName = 'ChatTopNavigation';

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

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { cn } from '../../utils/cn';
 import { TextLineSkeleton } from '../loading/unified-skeleton';
 import { useLoadingScope } from '../ui/loading-scope';
-import { SquareAvatarSkeleton } from '../ui/square-avatar';
+import { SquareAvatar } from '../ui/square-avatar';
 
 export interface ChatTurnProps {
   /** Rendered as given, at the size the caller draws it (a person's picture, an agent's mark). */
@@ -17,9 +17,11 @@ export interface ChatTurnProps {
   /** What was said. A string is drawn as the message text; a node is drawn as given. */
   children?: ReactNode;
   className?: string;
+  /** Draw the turn's loading form outside a loading scope too (`useLoadingScope() || loading`). */
+  loading?: boolean;
   /**
    * The loading state a loading scope draws, the turn's own skeleton: the picture's size in px (none without it),
-   * the message's line count (1 by default) and whether a time is shown.
+   * the message's line count (1 by default) or its own loading form (`body`), and whether a time and a meta are shown.
    */
   skeleton?: Omit<ChatTurnSkeletonProps, 'nameSize' | 'className'>;
 }
@@ -55,9 +57,11 @@ export function ChatTurn({
   time,
   children,
   className,
+  loading: loadingProp,
   skeleton,
 }: ChatTurnProps) {
-  if (useLoadingScope()) {
+  const loading = useLoadingScope() || loadingProp;
+  if (loading) {
     return (
       <ChatTurnSkeleton
         nameSize={nameSize}
@@ -65,7 +69,9 @@ export function ChatTurn({
         time={skeleton?.time ?? time != null}
         meta={skeleton?.meta ?? !!meta}
         lines={skeleton?.lines}
+        body={skeleton?.body}
         avatarPx={skeleton?.avatarPx}
+        avatarShape={skeleton?.avatarShape}
         className={className}
       />
     );
@@ -87,7 +93,7 @@ export function ChatTurn({
   );
 }
 
-export interface ChatTurnSkeletonProps {
+interface ChatTurnSkeletonProps {
   /** The picture's size in px; no picture without it. */
   avatarPx?: number;
   /** The picture's corner, as the caller draws it (a person's round photo by default, a square logo). */
@@ -95,6 +101,11 @@ export interface ChatTurnSkeletonProps {
   nameSize?: 'default' | 'quiet';
   /** How many lines the message takes. */
   lines?: 1 | 2 | 3;
+  /**
+   * The message's own loading form, drawn in place of the line bars (a card whose message is a block of its own:
+   * a quote at its line count, an outcome row with its check).
+   */
+  body?: ReactNode;
   /** Whether the name row carries a time at its far end. */
   time?: boolean;
   /** Whether the name carries a meta line; a string is static copy, drawn for real. */
@@ -107,7 +118,7 @@ export interface ChatTurnSkeletonProps {
  * `content-md`, beside it from there, as the turn draws it) and the time at the far end. Read by the turn's
  * skeleton and by every card that draws a turn of its own.
  */
-export function ChatTurnNameSkeleton({
+function ChatTurnNameSkeleton({
   nameSize = 'default',
   meta = false,
   time = false,
@@ -128,30 +139,22 @@ export function ChatTurnNameSkeleton({
 }
 
 /** A turn while it is read: the picture's box, a bar at the name's type step, and a bar per message line. */
-export function ChatTurnSkeleton({
+function ChatTurnSkeleton({
   avatarPx,
   avatarShape = 'round',
   nameSize = 'default',
   lines = 1,
+  body,
   time = false,
   meta = false,
   className,
 }: ChatTurnSkeletonProps) {
   return (
     <div className={cn(TURN_ROW_CLASS, className)} aria-hidden>
-      {avatarPx ? <SquareAvatarSkeleton sizePx={avatarPx} variant={avatarShape} /> : null}
+      {avatarPx ? <SquareAvatar loading sizePx={avatarPx} variant={avatarShape} /> : null}
       <div className={TURN_BODY_CLASS}>
         <ChatTurnNameSkeleton nameSize={nameSize} meta={meta} time={time} />
-        <div>
-          {Array.from({ length: lines }, (_, i) => (
-            <TextLineSkeleton
-              // biome-ignore lint/suspicious/noArrayIndexKey: skeleton lines never reorder
-              key={i}
-              type="h4"
-              className={i === lines - 1 && lines > 1 ? 'w-2/3' : 'w-full'}
-            />
-          ))}
-        </div>
+        {body ?? <TextLineSkeleton lines={lines} type="h4" />}
       </div>
     </div>
   );