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

package/src/components/chat/chat-message-skeleton.tsx

@@ -2,62 +2,105 @@
 
 import { cn } from '../../utils/cn';
 import { LoadingRegion } from '../loading/loading-region';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { LoadingItems, loadingItemProps } from '../ui/loading-scope';
+import { SquareAvatar } from '../ui/square-avatar';
+import { useChatAppearance } from './chat-appearance-context';
+import {
+  CHAT_MESSAGE_FACE_PX,
+  CHAT_MESSAGE_HEADER_CLASS,
+  CHAT_MESSAGE_LIST_COLUMN_CLASS,
+  CHAT_MESSAGE_LIST_CONTENT_PADDING_CLASS,
+  CHAT_MESSAGE_LIST_SCROLLBAR_CLASS,
+  CHAT_MESSAGE_LIST_SCROLLER_CLASS,
+  CHAT_MESSAGE_ROW_PADDING_CLASS,
+  CHAT_MESSAGE_SEGMENTS_CLASS,
+  CHAT_MESSAGE_STACK_CLASS,
+  CHAT_MESSAGE_TEXT_CLASS,
+  CHAT_MESSAGE_USER_BUBBLE_CLASS,
+  CHAT_MESSAGE_USER_ROW_CLASS,
+} from './chat-message-layout';
+import type { ChatAppearance } from './types/chat.types';
 
 interface ChatMessageSkeletonProps {
   className?: string;
+  /** Whether the row draws its speaker's face, as `ChatMessageEnhanced`'s `showAvatar` (default true). */
   showAvatar?: boolean;
+  /** The user's own turn: the face at the right and the message as the right-side bubble. */
   isUser?: boolean;
-  /** How many body lines to draw under the name row. Default 3 (paragraph-ish
-   *  reply). Pass 1 for surfaces whose real messages are single-line (e.g. the
-   *  short scripted hero-demo turns), so the skeleton isn't ~3x too tall. */
+  /**
+   * Whether the face line carries a name and a time, as the loaded row writes them only for a system line and
+   * another person answering (default false: the user's and the agent's turns show a face only).
+   */
+  showName?: boolean;
+  /**
+   * Whether the message carries its time. The loaded row writes it on the face line beside a name, else as a line
+   * under the message (at the right under the user's own bubble). Default true: a read message has its time.
+   */
+  showTime?: boolean;
+  /** How many lines the message takes. Default 3 (a paragraph); 1 for single-line surfaces. */
   bodyLines?: number;
+  /** The thread's appearance (its row padding); the surrounding chat's when not given. */
+  appearance?: ChatAppearance;
+  /** List markers (`data-loading-item`), set by the list on its rows. */
+  [key: `data-${string}`]: unknown;
 }
 
-// Body-line width palette: full-width lines then a short trailing line, so any
-// `bodyLines` count ends on a short line like a real wrapped message.
-const BODY_LINE_WIDTHS = ['w-full', 'w-11/12', 'w-4/5', 'w-5/6'];
-const bodyLineWidth = (index: number, total: number) =>
-  index === total - 1 ? 'w-3/5' : BODY_LINE_WIDTHS[index % BODY_LINE_WIDTHS.length];
+/** The time line's bar: the `text-h6` time the loaded row writes. */
+const TIME_BAR_CLASS = 'w-14 shrink-0';
 
 /**
- * One message-row skeleton. Mirrors `ChatMessageEnhanced`'s real layout:
- * full panel width, no card background, and an INLINE avatar in the name row
- * (the 2025 chat pattern — Claude.ai / ChatGPT / Gemini), NOT the legacy
- * `absolute -left-16` hanging avatar. Body lines use percentage widths so they
- * reflow cleanly as the panel resizes.
+ * One message row while it is read: `ChatMessageEnhanced`'s own layout from its own class constants (the row's
+ * padding per appearance, the face line, the segments), the face a 20px round box, and the message as text-h4 lines
+ * (a bubble at the right for the user's own turn, plain text across the width for anyone else).
  */
 export function ChatMessageSkeleton({
   className,
   showAvatar = true,
   isUser = false,
+  showName = false,
+  showTime = true,
   bodyLines = 3,
+  appearance: appearanceProp,
+  ...props
 }: ChatMessageSkeletonProps) {
+  const inherited = useChatAppearance();
+  const appearance = appearanceProp ?? inherited;
   const lines = Math.max(1, bodyLines);
   return (
-    <div className={cn('relative py-[var(--spacing-system-s)]', className)}>
-      <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
-        {/* Name row — inline avatar (assistant only) + name + timestamp,
-            matching ChatMessageEnhanced's inline-avatar header. Neutral
-            `bg-ods-border` so the placeholders are actually visible (a tinted
-            low-alpha fill reads as blank on the dark surface). */}
-        <div className="flex items-center gap-[var(--spacing-system-xs)]">
-          {showAvatar && !isUser && <UnifiedSkeleton className="h-8 w-8 flex-shrink-0 rounded-full" />}
-          <UnifiedSkeleton className="h-5 w-32 rounded" />
-          <UnifiedSkeleton className="ml-auto h-4 w-14 rounded" />
-        </div>
-
-        {/* Body lines — percentage widths so they reflow on panel resize. */}
-        <div className="flex flex-col gap-2 pt-[var(--spacing-system-xxs)]">
-          {Array.from({ length: lines }, (_, i) => (
-            <UnifiedSkeleton key={i} className={cn('h-4 rounded', bodyLineWidth(i, lines))} />
-          ))}
+    <div className={cn('relative', CHAT_MESSAGE_ROW_PADDING_CLASS[appearance], className)} {...loadingItemProps(props)}>
+      <div className={CHAT_MESSAGE_STACK_CLASS}>
+        {(showAvatar || showName) && (
+          <div className={cn(CHAT_MESSAGE_HEADER_CLASS, isUser && 'justify-end')}>
+            {showAvatar && <SquareAvatar loading sizePx={CHAT_MESSAGE_FACE_PX} variant="round" />}
+            {showName && <TextLineSkeleton type="h6" className="w-24" />}
+            {showName && showTime && <TextLineSkeleton type="h6" className={cn('ml-auto', TIME_BAR_CLASS)} />}
+          </div>
+        )}
+        <div className={CHAT_MESSAGE_SEGMENTS_CLASS}>
+          {isUser ? (
+            <div className={CHAT_MESSAGE_USER_ROW_CLASS}>
+              <div className={cn(CHAT_MESSAGE_USER_BUBBLE_CLASS, 'w-1/2')}>
+                <TextLineSkeleton type="h4" lines={lines} />
+              </div>
+            </div>
+          ) : (
+            <div className={CHAT_MESSAGE_TEXT_CLASS}>
+              <TextLineSkeleton type="h4" lines={lines} />
+            </div>
+          )}
         </div>
+        {showTime && !showName && (
+          <TextLineSkeleton type="h6" className={cn(TIME_BAR_CLASS, isUser && 'justify-self-end')} />
+        )}
       </div>
     </div>
   );
 }
 
+/** Message rows a thread's skeleton draws: a typical thread, since a thread loads with no page size of its own. */
+export const CHAT_MESSAGE_LIST_SKELETON_MESSAGES = 6;
+
 interface ChatMessageListSkeletonProps {
   /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
   region?: boolean;
@@ -71,9 +114,8 @@ interface ChatMessageListSkeletonProps {
    * side gutters). Same semantics as the real list.
    */
   fullWidth?: boolean;
-  /** Extra classes on the content column (e.g. host-provided padding). The
-   *  host wrapper is expected to own the panel padding; this stays empty by
-   *  default so the skeleton sits flush. */
+  /** The content column's side padding, as `ChatMessageList`'s `contentClassName` (the list's own padding when not
+   *  given). */
   contentClassName?: string;
   /** Body lines per message row (forwarded to `ChatMessageSkeleton`). Default 3;
    *  pass 1 for single-line message surfaces. */
@@ -86,54 +128,65 @@ interface ChatMessageListSkeletonProps {
    * panel is loading" rather than "a short thread pinned to the bottom".
    */
   fill?: boolean;
+  /** The thread's appearance (its rows' padding), as `ChatMessageList`'s; the surrounding chat's when not given. */
+  appearance?: ChatAppearance;
+  /**
+   * The thread holds another person's turns, written with their name and time on the face line (`ChatMessageList`
+   * with `selfAuthorType="admin"`: the technician reads the end user's replies). One row in three is such a turn.
+   */
+  namedOthers?: boolean;
 }
 
 export function ChatMessageListSkeleton({
   region = true,
   className,
-  messageCount = 6,
+  messageCount = CHAT_MESSAGE_LIST_SKELETON_MESSAGES,
   showAvatars = true,
   fullWidth = false,
   contentClassName,
   bodyLines,
   fill = false,
+  appearance,
+  namedOthers = false,
 }: ChatMessageListSkeletonProps) {
-  const messages = Array.from({ length: messageCount }, (_, index) => ({
-    id: index,
-    isUser: index % 3 === 0,
-  }));
-
   return (
     <LoadingRegion label="Loading messages" announce={region} className="relative flex min-h-0 flex-1 flex-col">
       <div
         className={cn(
-          'flex h-full w-full flex-1 flex-col',
-          fill
-            ? 'overflow-hidden'
-            : 'scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30 overflow-y-auto overflow-x-hidden overscroll-contain [scroll-behavior:smooth]',
+          CHAT_MESSAGE_LIST_SCROLLER_CLASS,
+          fill ? 'overflow-hidden' : cn(CHAT_MESSAGE_LIST_SCROLLBAR_CLASS, 'overscroll-contain'),
           className,
         )}
       >
         <div
           className={cn(
-            fullWidth
-              ? 'flex w-full min-w-0 flex-col'
-              : 'mx-auto flex w-full min-w-0 max-w-ods-content-narrow flex-col',
-            contentClassName,
+            CHAT_MESSAGE_LIST_COLUMN_CLASS[fullWidth ? 'full' : 'narrow'],
+            contentClassName ?? CHAT_MESSAGE_LIST_CONTENT_PADDING_CLASS,
           )}
           style={fill ? undefined : { minHeight: '100%' }}
         >
           {/* Bottom-anchor the rows like the real list — unless FILL mode wants
               them top-anchored + clipped to cover the whole panel. */}
           {!fill && <div className="flex-1" />}
-          {messages.map(message => (
-            <ChatMessageSkeleton
-              key={message.id}
-              showAvatar={showAvatars}
-              isUser={message.isUser}
-              bodyLines={bodyLines}
-            />
-          ))}
+          {/* A typical thread: the viewer's own turn, then (where the thread has one) another person's named reply,
+              then the agent. */}
+          <LoadingItems count={messageCount}>
+            {index => {
+              const isUser = index % 3 === 0;
+              return (
+                <ChatMessageSkeleton
+                  showAvatar={showAvatars}
+                  isUser={isUser}
+                  showName={namedOthers && index % 3 === 1}
+                  // The user's own turns are short: one line in the bubble, unless the surface states its line count.
+                  bodyLines={isUser ? (bodyLines ?? 1) : bodyLines}
+                  appearance={appearance}
+                  // One message of a read thread, like the loaded rows.
+                  data-loading-item
+                />
+              );
+            }}
+          </LoadingItems>
         </div>
       </div>
     </LoadingRegion>

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

@@ -2,6 +2,9 @@
 
 import { forwardRef, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
 import { cn } from '../../utils/cn';
+import { MediaSkeleton, TextLineSkeleton } from '../loading/unified-skeleton';
+import { BUTTON_KIND_CLASS, Button } from '../ui/button';
+import { LoadingItems, loadingItemProps, useLoadingScope } from '../ui/loading-scope';
 import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade';
 
 export interface ChatNavSidebarItem {
@@ -96,21 +99,19 @@ interface ChatNavSidebarButtonProps extends ButtonHTMLAttributes<HTMLButtonEleme
 
 function ChatNavSidebarButton({ icon, active, className, children, ...props }: ChatNavSidebarButtonProps) {
   return (
-    <button
+    <Button
+      variant="row"
       type="button"
       aria-current={active ? 'page' : undefined}
-      className={cn(
-        'flex w-full items-center gap-[var(--spacing-system-xs)] rounded-md p-[var(--spacing-system-xs)] text-left text-h4',
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus',
-        '[&_svg]:size-6 [&_svg]:shrink-0',
-        active ? 'text-ods-accent' : 'text-ods-text-primary [&_svg]:text-ods-text-secondary',
-        className,
-      )}
+      data-state={active ? 'active' : undefined}
+      className={className}
       {...props}
     >
-      {icon}
+      <span className={cn('flex shrink-0 [&_svg]:size-6', active ? 'text-ods-accent' : 'text-ods-text-secondary')}>
+        {icon}
+      </span>
       <span className="min-w-0 flex-1 truncate">{children}</span>
-    </button>
+    </Button>
   );
 }
 
@@ -124,46 +125,122 @@ export interface ChatListItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonE
   trailing?: ReactNode;
   /** The chat open on screen. */
   active?: boolean;
+  /** The chat is still being read: the row draws its skeleton (as it does in a loading scope). */
+  loading?: boolean;
+  /** The row's place in its list: picks the loading title bar's width, so a page of loading rows reads like a list. */
+  index?: number;
 }
 
+/** A loading chat row's title widths, cycled by index: a believable spread, the same on every load. Shared by every
+ *  chat list's loading rows. */
+export const SKELETON_TITLE_WIDTHS = ['w-3/5', 'w-4/5', 'w-2/5', 'w-3/4', 'w-1/2', 'w-2/3'];
+
+/** The trailing glyph's 24px box at the row's end, loaded and loading. */
+const TRAILING_CLASS = 'flex shrink-0 items-center [&_svg]:size-6';
+
+/** The row's box, loaded and loading: the lib's list row (`Button variant="row"`), which the loading `div` draws too. */
+const CHAT_LIST_ITEM_CLASS = cn(BUTTON_KIND_CLASS.row, 'shrink-0');
+
 /**
  * One row of the `ChatNavSidebar` list (Figma `chat-list-item`): a one-line
  * title over a caption, an optional mark before the title and a status glyph
  * at the end. The selected row takes the accent's secondary fill, so a tenant
- * accent recolours it with the rest of the brand.
+ * accent recolours it with the rest of the brand. ONE switch (`useLoadingScope() || loading`): while the chat is read
+ * the SAME row (an inert `div`) draws its title and caption as bars and its trailing glyph as an icon box; the `leading`
+ * mark stays.
  */
 const ChatListItem = forwardRef<HTMLButtonElement, ChatListItemProps>(
-  ({ className, title, subtitle, leading, trailing, active, ...props }, ref) => (
-    <button
-      ref={ref}
-      type="button"
-      aria-current={active ? 'true' : undefined}
-      className={cn(
-        'flex w-full shrink-0 items-center gap-[var(--spacing-system-xs)] rounded-md p-[var(--spacing-system-xs)] text-left',
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus',
-        active && 'bg-ods-accent-secondary',
-        className,
-      )}
-      {...props}
-    >
-      <span className="flex min-w-0 flex-1 flex-col">
-        <span className="flex min-w-0 items-center gap-[var(--spacing-system-xxs)]">
-          {leading && <span className="flex shrink-0 items-center [&_svg]:size-4">{leading}</span>}
-          <span className={cn('min-w-0 flex-1 truncate text-h4', active ? 'text-ods-accent' : 'text-ods-text-primary')}>
-            {title}
+  (
+    { className, title, subtitle, leading, trailing, active, loading: loadingProp = false, index = 0, ...props },
+    ref,
+  ) => {
+    const loading = useLoadingScope() || loadingProp;
+    const content = (
+      <>
+        <span className="flex min-w-0 flex-1 flex-col">
+          <span className="flex min-w-0 items-center gap-[var(--spacing-system-xxs)]">
+            {leading && <span className="flex shrink-0 items-center [&_svg]:size-4">{leading}</span>}
+            {loading ? (
+              <TextLineSkeleton type="h4" className={SKELETON_TITLE_WIDTHS[index % SKELETON_TITLE_WIDTHS.length]} />
+            ) : (
+              <span
+                className={cn('min-w-0 flex-1 truncate text-h4', active ? 'text-ods-accent' : 'text-ods-text-primary')}
+              >
+                {title}
+              </span>
+            )}
           </span>
+          {subtitle != null &&
+            (loading ? (
+              <TextLineSkeleton type="h6" className="w-1/3" />
+            ) : (
+              <span className={cn('truncate text-h6', active ? 'text-ods-text-primary' : 'text-ods-text-secondary')}>
+                {subtitle}
+              </span>
+            ))}
         </span>
-        {subtitle != null && (
-          <span className={cn('truncate text-h6', active ? 'text-ods-text-primary' : 'text-ods-text-secondary')}>
-            {subtitle}
-          </span>
-        )}
-      </span>
-      {trailing && <span className="flex shrink-0 items-center [&_svg]:size-6">{trailing}</span>}
-    </button>
-  ),
+        {loading
+          ? trailing != null && (
+              // The status glyph's 24px box (`MediaSkeleton.Icon` md), the loaded glyph's size.
+              <span className={TRAILING_CLASS}>
+                <MediaSkeleton.Icon size="md" />
+              </span>
+            )
+          : trailing && <span className={TRAILING_CLASS}>{trailing}</span>}
+      </>
+    );
+    if (loading) {
+      return (
+        <div aria-hidden className={cn(CHAT_LIST_ITEM_CLASS, className)} {...loadingItemProps(props)}>
+          {content}
+        </div>
+      );
+    }
+    return (
+      <Button
+        variant="row"
+        ref={ref}
+        type="button"
+        aria-current={active ? 'true' : undefined}
+        data-state={active ? 'active' : undefined}
+        className={cn('shrink-0', className)}
+        {...props}
+      >
+        {content}
+      </Button>
+    );
+  },
 );
 
 ChatListItem.displayName = 'ChatListItem';
 
-export { ChatNavSidebar, ChatListItem };
+/**
+ * A chat list's first page while it is read: `count` loading {@link ChatListItem} rows (the list's page size), each a
+ * list item, with the caption and trailing parts the list's loaded rows have.
+ */
+function ChatListItemLoadingPage({
+  count,
+  subtitle = false,
+  trailing = false,
+}: {
+  count: number;
+  subtitle?: boolean;
+  trailing?: boolean;
+}) {
+  return (
+    <LoadingItems count={count}>
+      {index => (
+        <ChatListItem
+          loading
+          index={index}
+          title=""
+          subtitle={subtitle ? '' : undefined}
+          trailing={trailing ? '' : undefined}
+          data-loading-item
+        />
+      )}
+    </LoadingItems>
+  );
+}
+
+export { ChatNavSidebar, ChatListItem, ChatListItemLoadingPage };

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

@@ -11,9 +11,9 @@ import {
 } from '../icons-v2-generated';
 import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon';
 import { ActionsMenuDropdown } from '../ui/actions-menu';
+import { Button } from '../ui/button';
 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';
 
@@ -133,16 +133,16 @@ export function ChatPanelHeader({
           bar with full-height divider action cells. */}
       <div
         className={cn(
-          'h-14 w-full flex-shrink-0 overflow-hidden border-b border-ods-border bg-ods-card',
+          'h-14 w-full flex-shrink-0 divide-x divide-ods-border overflow-hidden border-b border-ods-border bg-ods-card',
           compact ? 'flex' : 'hidden md:flex',
         )}
       >
         {/* Back — a full-height leading cell (right divider), the same
-            `ChatHeaderIconButton` primitive as the trailing ⋯ / close cells. */}
+            ``Button variant="cell"`` primitive as the trailing ⋯ / close cells. */}
         {showBack && (
-          <ChatHeaderIconButton divider="right" onClick={onBack} aria-label={backAriaLabel}>
+          <Button variant="cell" className="w-14" onClick={onBack} aria-label={backAriaLabel}>
             <Chevron02LeftIcon size={24} />
-          </ChatHeaderIconButton>
+          </Button>
         )}
         {searchInline ? (
           // Search open — the inline field takes over the title area in place
@@ -176,9 +176,9 @@ export function ChatPanelHeader({
 
         {/* Restore (refresh) — archived chat header (Figma node 7361:425441). */}
         {isArchivedView && onRestore && (
-          <ChatHeaderIconButton onClick={onRestore} aria-label="Unarchive chat">
+          <Button variant="cell" className="w-14" onClick={onRestore} aria-label="Unarchive chat">
             <Refresh01LeftIcon size={24} />
-          </ChatHeaderIconButton>
+          </Button>
         )}
 
         {/* Rename / Archive menu — active (non-archived) conversation only. */}
@@ -188,9 +188,9 @@ export function ChatPanelHeader({
             onCloseAutoFocus={e => e.preventDefault()}
             groups={[{ items: menuItems }]}
             customTrigger={
-              <ChatHeaderIconButton aria-label="Chat actions">
+              <Button variant="cell" className="w-14" aria-label="Chat actions">
                 <Ellipsis01Icon size={24} />
-              </ChatHeaderIconButton>
+              </Button>
             }
           />
         )}
@@ -198,22 +198,28 @@ export function ChatPanelHeader({
         {/* Dialog search toggle — list view only, before the archive entry.
             Hidden while search is open (the inline field owns the magnifier). */}
         {!showBack && !searchInline && onToggleSearch && (
-          <ChatHeaderIconButton onClick={onToggleSearch} aria-label="Search chats" aria-pressed={searchActive}>
+          <Button
+            variant="cell"
+            className="w-14"
+            onClick={onToggleSearch}
+            aria-label="Search chats"
+            aria-pressed={searchActive}
+          >
             <SearchIcon size={24} />
-          </ChatHeaderIconButton>
+          </Button>
         )}
 
         {/* Chat Archive entry (Figma node 7532:225034) — list view only. */}
         {!showBack && onOpenArchive && (
-          <ChatHeaderIconButton onClick={onOpenArchive} aria-label="Chat archive">
+          <Button variant="cell" className="w-14" onClick={onOpenArchive} aria-label="Chat archive">
             <ClockHistoryIcon size={24} />
-          </ChatHeaderIconButton>
+          </Button>
         )}
 
         {onClose && (
-          <ChatHeaderIconButton onClick={onClose} aria-label="Close">
+          <Button variant="cell" className="w-14" onClick={onClose} aria-label="Close">
             <XmarkIcon size={24} />
-          </ChatHeaderIconButton>
+          </Button>
         )}
       </div>
     </>