@flamingo-stack/openframe-frontend-core 0.0.222 → 0.0.223

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

@@ -6,54 +6,40 @@ interface ChatMessageSkeletonProps {
   className?: string
   showAvatar?: boolean
   isUser?: boolean
-  assistantType?: 'mingo' | 'fae'
 }
 
-export function ChatMessageSkeleton({ 
-  className, 
-  showAvatar = true, 
-  isUser = false, 
-  assistantType = 'fae' 
+/**
+ * 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.
+ */
+export function ChatMessageSkeleton({
+  className,
+  showAvatar = true,
+  isUser = false,
 }: ChatMessageSkeletonProps) {
-  const isMingo = assistantType === 'mingo'
-
   return (
-    <div
-      className={cn(
-        "relative",
-        !isUser && "bg-ods-card/50 rounded-lg px-4 -mx-4",
-        className
-      )}
-    >
-      {/* Avatar Skeleton - absolutely positioned outside content area to match
-          the real ChatMessageEnhanced hanging-avatar layout. */}
-      {showAvatar && !isUser && (
-        <div className={cn(
-          "absolute -left-16 top-[var(--spacing-system-s)] w-12 h-12 rounded-full animate-pulse",
-          isMingo
-            ? "bg-gradient-to-br from-cyan-400/30 to-cyan-600/30"
-            : "bg-gradient-to-br from-pink-400/30 to-pink-600/30"
-        )} />
-      )}
-
-      {/* Message Content Skeleton */}
-      <div className="flex flex-col gap-1 min-w-0">
-        {/* Name and Timestamp Row Skeleton */}
-        <div className="flex items-center justify-between pr-2">
-          <div className="h-5 w-16 bg-ods-border rounded animate-pulse" />
-          <div className="h-4 w-12 bg-ods-border rounded animate-pulse" />
+    <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 && (
+            <div className="h-8 w-8 flex-shrink-0 rounded-full bg-ods-border animate-pulse" />
+          )}
+          <div className="h-5 w-32 rounded bg-ods-border animate-pulse" />
+          <div className="ml-auto h-4 w-14 rounded bg-ods-border animate-pulse" />
         </div>
-        
-        {/* Message Content Skeleton */}
-        <div className="flex flex-col gap-2">
-          <div className="space-y-2">
-            {/* First line - full width */}
-            <div className="h-4 w-full bg-ods-border rounded animate-pulse" />
-            {/* Second line - 80% width */}
-            <div className="h-4 w-4/5 bg-ods-border rounded animate-pulse" />
-            {/* Third line - 60% width (optional for variation) */}
-            <div className="h-4 w-3/5 bg-ods-border rounded animate-pulse" />
-          </div>
+
+        {/* Body lines — percentage widths so they reflow on panel resize. */}
+        <div className="flex flex-col gap-2 pt-[var(--spacing-system-xxs)]">
+          <div className="h-4 w-full rounded bg-ods-border animate-pulse" />
+          <div className="h-4 w-11/12 rounded bg-ods-border animate-pulse" />
+          <div className="h-4 w-3/5 rounded bg-ods-border animate-pulse" />
         </div>
       </div>
     </div>
@@ -64,7 +50,16 @@ interface ChatMessageListSkeletonProps {
   className?: string
   messageCount?: number
   showAvatars?: boolean
-  assistantType?: 'mingo' | 'fae'
+  /**
+   * Match `ChatMessageList`'s `fullWidth`: drop the centered
+   * `max-w-ods-content-narrow` column so the skeleton fills the panel and
+   * reflows on resize (instead of staying a fixed narrow column with large
+   * 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. */
   contentClassName?: string
 }
 
@@ -72,13 +67,12 @@ export function ChatMessageListSkeleton({
   className,
   messageCount = 6,
   showAvatars = true,
-  assistantType = 'fae',
-  contentClassName
+  fullWidth = false,
+  contentClassName,
 }: ChatMessageListSkeletonProps) {
   const messages = Array.from({ length: messageCount }, (_, index) => ({
     id: index,
     isUser: index % 3 === 0,
-    assistantType: assistantType
   }))
 
   return (
@@ -88,23 +82,29 @@ export function ChatMessageListSkeleton({
           "flex h-full w-full flex-col overflow-y-auto overflow-x-hidden flex-1",
           "[scroll-behavior:smooth]",
           "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30",
-          className
+          className,
         )}
       >
-        <div className={cn("mx-auto flex w-full max-w-ods-content-narrow flex-col pb-[var(--spacing-system-xs)] min-w-0", contentClassName ?? "px-[var(--spacing-system-m)]")} style={{ minHeight: '100%' }}>
+        <div
+          className={cn(
+            fullWidth
+              ? "flex w-full flex-col min-w-0"
+              : "mx-auto flex w-full max-w-ods-content-narrow flex-col min-w-0",
+            contentClassName,
+          )}
+          style={{ minHeight: '100%' }}
+        >
+          {/* Bottom-anchor the rows like the real list. */}
           <div className="flex-1" />
-          <div className="space-y-6">
-            {messages.map((message) => (
-              <ChatMessageSkeleton
-                key={message.id}
-                showAvatar={showAvatars}
-                isUser={message.isUser}
-                assistantType={message.assistantType}
-              />
-            ))}
-          </div>
+          {messages.map((message) => (
+            <ChatMessageSkeleton
+              key={message.id}
+              showAvatar={showAvatars}
+              isUser={message.isUser}
+            />
+          ))}
         </div>
       </div>
     </div>
   )
-}
+}

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

@@ -0,0 +1,94 @@
+'use client'
+
+import { Chevron02LeftIcon, ClockHistoryIcon } from '../icons-v2-generated'
+import { Button } from '../ui/button'
+import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu'
+import { cn } from '../../utils/cn'
+import type { ChatPanelHeaderProps } from './chat-panel-header'
+
+export interface ChatPanelHeaderMobileProps extends ChatPanelHeaderProps {
+  className?: string
+}
+
+/**
+ * Mobile chat panel header — Figma node `7363:85532`. A distinct layout from
+ * the desktop bar (which packs full-height divider cells into a fixed `h-14`):
+ *
+ *   - Surface: `ods-card` with a bottom border; generous `l` side padding,
+ *     `l` bottom padding, and `xl` top padding on the title block (so the row
+ *     bottom-aligns under a tall header).
+ *   - Title: `text-h2` (vs the desktop `h3`/`h4`), truncated.
+ *   - Actions: 44px outlined icon buttons (`Button variant="outline"
+ *     size="icon"`) — a back chevron (when applicable) and a single trailing
+ *     `⋯` menu carrying the view-dependent actions. There is no Close action
+ *     (the drawer is dismissed via its backdrop / the back chevron); when no
+ *     action applies the `⋯` trigger is hidden entirely.
+ *
+ * Same prop contract as `ChatPanelHeader` (`onClose` is accepted for parity but
+ * unused here); the orchestrator renders this on mobile and the desktop bar on
+ * `md+`.
+ */
+export function ChatPanelHeaderMobile({
+  showBack = false,
+  title,
+  backAriaLabel = 'Back',
+  isArchivedView = false,
+  onBack,
+  onRestore,
+  onRename,
+  onArchive,
+  onOpenArchive,
+  className,
+}: ChatPanelHeaderMobileProps) {
+  // The right-hand ⋯ menu carries the view-dependent actions. Close is not
+  // listed (the panel is dismissed elsewhere); the trigger is hidden entirely
+  // when no action applies (e.g. the archive list view).
+  const menuItems = [
+    !showBack && onOpenArchive && { id: 'open-archive', label: 'Chat archive', icon: <ClockHistoryIcon className="w-full h-full" />, onClick: onOpenArchive },
+    isArchivedView && onRestore && { id: 'unarchive', label: 'Unarchive chat', onClick: onRestore },
+    !isArchivedView && onRename && { id: 'rename', label: 'Rename chat', onClick: onRename },
+    !isArchivedView && onArchive && { id: 'archive', label: 'Archive chat', onClick: onArchive },
+  ].filter(Boolean) as ActionsMenuItem[]
+
+  return (
+    <div
+      className={cn(
+        'flex-shrink-0 flex flex-col border-b border-ods-border bg-ods-card',
+        'px-[var(--spacing-system-l)] pb-[var(--spacing-system-l)]',
+        className,
+      )}
+    >
+      <div className="flex w-full items-end gap-[var(--spacing-system-sf)]">
+        {showBack && (
+          <Button
+            variant="outline"
+            size="icon"
+            aria-label={backAriaLabel}
+            onClick={onBack}
+            className="shrink-0"
+          >
+            <Chevron02LeftIcon />
+          </Button>
+        )}
+
+        {/* Title block — `xl` top padding pushes the title down so the row
+            bottom-aligns the title, back chevron, and ⋯ menu. */}
+        <div className="flex flex-1 min-w-0 items-end gap-[var(--spacing-system-m)] pt-[var(--spacing-system-xl)]">
+          <div className="flex flex-1 min-w-0 flex-col gap-[var(--spacing-system-xs)]">
+            <p className="min-w-0 truncate text-h2 text-ods-text-primary" title={title}>
+              {title}
+            </p>
+          </div>
+
+          {menuItems.length > 0 && (
+            <ActionsMenuDropdown
+              groups={[{ items: menuItems }]}
+              triggerAriaLabel="Chat actions"
+              triggerClassName="shrink-0 bg-ods-card border-ods-border hover:bg-ods-bg-hover flex items-center justify-center focus-visible:ring-0"
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -9,7 +9,16 @@ import {
 } from '../icons-v2-generated'
 import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon'
 import { ChatHeaderIconButton } from './chat-header-icon-button'
-import { MoreActionsMenu } from '../ui/more-actions-menu'
+import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu'
+import { ChatPanelHeaderMobile } from './chat-panel-header-mobile'
+
+/**
+ * Compact rounded header button used for the desktop back chevron. Borderless
+ * square with a hover background. (Mobile uses its own header component —
+ * `ChatPanelHeaderMobile`.)
+ */
+export const COMPACT_HEADER_BUTTON =
+  'inline-flex shrink-0 items-center justify-center size-8 rounded-md text-ods-text-secondary transition-colors hover:bg-ods-bg-hover hover:text-ods-text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent'
 
 export interface ChatPanelHeaderProps {
   /** Show the back-chevron + bold (h3) title. When false, the static list
@@ -53,62 +62,81 @@ export function ChatPanelHeader({
   onArchive,
   onOpenArchive,
 }: ChatPanelHeaderProps) {
+  // Desktop ⋯ menu (active, non-archived conversation only) — rename / archive.
   const menuItems = [
-    onRename && { label: 'Rename chat', onClick: onRename },
-    onArchive && { label: 'Archive chat', onClick: onArchive },
-  ].filter(Boolean) as { label: string; onClick: () => void }[]
+    onRename && { id: 'rename', label: 'Rename chat', onClick: onRename },
+    onArchive && { id: 'archive', label: 'Archive chat', onClick: onArchive },
+  ].filter(Boolean) as ActionsMenuItem[]
 
   return (
-    <div className="flex-shrink-0 flex h-14 w-full overflow-hidden border-b border-ods-border bg-ods-card">
-      <div className="flex flex-1 min-w-0 items-center gap-2 px-4 py-3">
-        {showBack ? (
-          <>
-            <button
-              type="button"
-              onClick={onBack}
-              aria-label={backAriaLabel}
-              className="inline-flex shrink-0 items-center justify-center size-8 -ml-1 rounded-md text-ods-text-secondary transition-colors hover:bg-ods-bg-hover hover:text-ods-text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent"
-            >
-              <Chevron01LeftIcon size={20} />
-            </button>
-            <span className="truncate text-h3 text-ods-text-primary">{title}</span>
-          </>
-        ) : (
-          <p className="truncate text-h4 text-ods-text-primary">{title}</p>
+    <>
+      {/* Mobile (<md): a distinct layout (Figma node 7363:85532). */}
+      <ChatPanelHeaderMobile
+        className="flex md:hidden"
+        showBack={showBack}
+        title={title}
+        backAriaLabel={backAriaLabel}
+        isArchivedView={isArchivedView}
+        onBack={onBack}
+        onClose={onClose}
+        onRestore={onRestore}
+        onRename={onRename}
+        onArchive={onArchive}
+        onOpenArchive={onOpenArchive}
+      />
+
+      {/* Desktop (md+): fixed-height bar with full-height divider action cells. */}
+      <div className="hidden md:flex flex-shrink-0 h-14 w-full overflow-hidden border-b border-ods-border bg-ods-card">
+        <div className="flex flex-1 min-w-0 items-center gap-2 px-4 py-3">
+          {showBack ? (
+            <>
+              <button
+                type="button"
+                onClick={onBack}
+                aria-label={backAriaLabel}
+                className={`${COMPACT_HEADER_BUTTON} -ml-1`}
+              >
+                <Chevron01LeftIcon size={20} />
+              </button>
+              <span className="truncate text-h3 text-ods-text-primary">{title}</span>
+            </>
+          ) : (
+            <p className="truncate text-h3 text-ods-text-primary">{title}</p>
+          )}
+        </div>
+
+        {/* Restore (refresh) — archived chat header (Figma node 7361:425441). */}
+        {isArchivedView && onRestore && (
+          <ChatHeaderIconButton onClick={onRestore} aria-label="Unarchive chat">
+            <Refresh01LeftIcon size={24} />
+          </ChatHeaderIconButton>
         )}
-      </div>
 
-      {/* Restore (refresh) — archived chat header (Figma node 7361:425441). */}
-      {isArchivedView && onRestore && (
-        <ChatHeaderIconButton onClick={onRestore} aria-label="Unarchive chat">
-          <Refresh01LeftIcon size={24} />
-        </ChatHeaderIconButton>
-      )}
+        {/* Rename / Archive menu — active (non-archived) conversation only. */}
+        {showBack && !isArchivedView && menuItems.length > 0 && (
+          <ActionsMenuDropdown
+            triggerAriaLabel="Chat actions"
+            onCloseAutoFocus={(e) => e.preventDefault()}
+            groups={[{ items: menuItems }]}
+            customTrigger={
+              <ChatHeaderIconButton aria-label="Chat actions">
+                <Ellipsis01Icon size={24} />
+              </ChatHeaderIconButton>
+            }
+          />
+        )}
 
-      {/* Rename / Archive menu — active (non-archived) conversation only. */}
-      {showBack && !isArchivedView && menuItems.length > 0 && (
-        <MoreActionsMenu
-          ariaLabel="Chat actions"
-          onCloseAutoFocus={(e) => e.preventDefault()}
-          items={menuItems}
-          trigger={
-            <ChatHeaderIconButton aria-label="Chat actions">
-              <Ellipsis01Icon size={24} />
-            </ChatHeaderIconButton>
-          }
-        />
-      )}
+        {/* Chat Archive entry (Figma node 7532:225034) — list view only. */}
+        {!showBack && onOpenArchive && (
+          <ChatHeaderIconButton onClick={onOpenArchive} aria-label="Chat archive">
+            <ClockHistoryIcon size={24} />
+          </ChatHeaderIconButton>
+        )}
 
-      {/* Chat Archive entry (Figma node 7532:225034) — list view only. */}
-      {!showBack && onOpenArchive && (
-        <ChatHeaderIconButton onClick={onOpenArchive} aria-label="Chat archive">
-          <ClockHistoryIcon size={24} />
+        <ChatHeaderIconButton onClick={onClose} aria-label="Close">
+          <XmarkIcon size={24} />
         </ChatHeaderIconButton>
-      )}
-
-      <ChatHeaderIconButton onClick={onClose} aria-label="Close">
-        <XmarkIcon size={24} />
-      </ChatHeaderIconButton>
-    </div>
+      </div>
+    </>
   )
 }

package/src/components/chat/chat-quick-action-row.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../utils/cn'
+import { Tag } from '../ui/tag'
+import { ActionsMenuDropdown } from '../ui/actions-menu'
+import { Ellipsis01Icon } from '../icons-v2-generated'
+import { useAutoLimitTags } from '../../hooks/ui/use-auto-limit-tags'
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/** A single collapsible quick-action chip. */
+export interface QuickActionChip {
+  /** Stable React key + menu-item id. */
+  id: string
+  label: string
+  icon?: React.ReactNode
+  /** `'primary'` = accent (yellow) chip, `'outline'` = bordered chip (default). */
+  variant?: 'primary' | 'outline'
+  onSelect?: () => void
+}
+
+export interface ChatQuickActionRowProps {
+  /** Always-visible leading chip(s) (e.g. Mingo's "Start Guide Chat"). Never
+   *  collapses into the overflow menu — rendered before the measured zone. */
+  leading?: React.ReactNode
+  /** Collapsible chips — as many as fit on one line render inline; the rest
+   *  collapse under a trailing "⋯" overflow menu (small icon button). */
+  chips: ReadonlyArray<QuickActionChip>
+  className?: string
+}
+
+// =============================================================================
+// Chip button
+// =============================================================================
+
+function ChipButton({ chip }: { chip: QuickActionChip }) {
+  return (
+    <button
+      type="button"
+      onClick={chip.onSelect}
+      className="shrink-0 rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent"
+    >
+      <Tag variant={chip.variant ?? 'outline'} icon={chip.icon} label={chip.label} />
+    </button>
+  )
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * A single-line quick-action chip row that collapses overflow into a "⋯" menu.
+ *
+ * Same dynamic, width-measured overflow used by the multi-select Autocomplete
+ * (`useAutoLimitTags`): off-screen copies of every chip are measured, as many
+ * as fit render inline, and the remainder move into an `ActionsMenuDropdown`
+ * behind a small "⋯" icon button. An optional `leading` slot stays pinned and
+ * never collapses, so the row's primary action is always reachable.
+ */
+export function ChatQuickActionRow({
+  leading,
+  chips,
+  className,
+}: ChatQuickActionRowProps) {
+  const auto = useAutoLimitTags({
+    count: chips.length,
+    reserveInputWidth: false,
+  })
+
+  const visibleChips = chips.slice(0, auto.visibleCount)
+  const hiddenChips = chips.slice(auto.visibleCount)
+
+  if (!leading && chips.length === 0) return null
+
+  return (
+    <div
+      className={cn('relative flex shrink-0 items-center gap-1', className)}
+    >
+      {leading}
+
+      {chips.length > 0 && (
+        // Measured zone: `flex-1 min-w-0 overflow-hidden` so it claims the width
+        // left by the pinned `leading` slot and clips anything past the fit.
+        <div
+          ref={auto.middleRef}
+          className="flex flex-1 min-w-0 items-center gap-1 overflow-hidden"
+        >
+          {visibleChips.map((chip) => (
+            <ChipButton key={chip.id} chip={chip} />
+          ))}
+
+          {hiddenChips.length > 0 && (
+            <ActionsMenuDropdown
+              triggerAriaLabel="More quick actions"
+              // Don't return focus (and its ring) to the "⋯" trigger on close.
+              onCloseAutoFocus={(e) => e.preventDefault()}
+              groups={[
+                {
+                  items: hiddenChips.map((chip) => ({
+                    id: chip.id,
+                    label: chip.label,
+                    icon: chip.icon,
+                    onClick: chip.onSelect,
+                  })),
+                },
+              ]}
+              customTrigger={
+                <button
+                  ref={auto.badgeRef}
+                  type="button"
+                  aria-label="More quick actions"
+                  className="shrink-0 rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent"
+                >
+                  <Tag variant="outline" label={<Ellipsis01Icon size={16} />} />
+                </button>
+              }
+            />
+          )}
+        </div>
+      )}
+
+      {/* Off-screen measurement copies of every chip — the hook reads their
+          widths to decide how many fit. Mirror the visible chip markup (same
+          variant/icon/label and the same `gap-1`) so the measured widths match
+          what actually renders. */}
+      <div
+        ref={auto.measureRef}
+        aria-hidden
+        className="pointer-events-none invisible absolute left-0 top-0 -z-10 flex gap-1"
+      >
+        {chips.map((chip) => (
+          <Tag
+            key={`measure-${chip.id}`}
+            variant={chip.variant ?? 'outline'}
+            icon={chip.icon}
+            label={chip.label}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}