@flamingo-stack/openframe-frontend-core 0.0.438 → 0.0.439-snapshot.20260717095442

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

@@ -2,37 +2,35 @@
 
 import * as React from 'react'
 import { cn } from '../../utils/cn'
-import { Chevron01LeftIcon } from '../icons-v2-generated/arrows/chevron-01-left-icon'
 import {
+  Chevron02LeftIcon,
   Ellipsis01Icon,
   ClockHistoryIcon,
   Refresh01LeftIcon,
+  SearchIcon,
 } from '../icons-v2-generated'
 import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon'
 import { ChatHeaderIconButton } from './chat-header-icon-button'
+import { ChatHeaderSearchField } from './chat-header-search-field'
 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
    *  title (h4) is shown with no back affordance. */
   showBack?: boolean
   /** Title text (next to the back chevron, or the static list title). */
   title: string
+  /** Optional sub-line under the title (e.g. the signed-in user's name).
+   *  Rendered muted (`h6`) beneath the title in every view that has one. */
+  subtitle?: React.ReactNode
   /** Accessible label for the back chevron. */
   backAriaLabel?: string
   /** The open conversation is an archived chat (read-only). */
   isArchivedView?: boolean
-  /** Back-chevron handler. */
-  onBack: () => void
+  /** Back-chevron handler. Required only when `showBack` — the list view has no
+   *  back affordance. */
+  onBack?: () => void
   /** Close the panel. */
   onClose: () => void
   /** Restore/unarchive — renders the refresh button (archived view only). */
@@ -48,6 +46,18 @@ export interface ChatPanelHeaderProps {
    *  panel) where the phone-sized full-bleed header (large `text-h2` title) is
    *  wrong regardless of viewport. Default false = viewport-responsive. */
   compact?: boolean
+  /** Toggle the dialog-list search field — renders a magnifier button (list
+   *  view only), before the archive clock. */
+  onToggleSearch?: () => void
+  /** Whether the search field is currently open. When true (and `onSearchChange`
+   *  is wired) the title area is REPLACED in place by the inline search field
+   *  and the magnifier toggle is hidden. */
+  searchActive?: boolean
+  /** Seeds the inline search field when it opens (current search term). */
+  searchQuery?: string
+  /** Emits the debounced search term from the inline field. Enables the
+   *  in-header search experience (list view only). */
+  onSearchChange?: (query: string) => void
 }
 
 /**
@@ -59,6 +69,7 @@ export interface ChatPanelHeaderProps {
 export function ChatPanelHeader({
   showBack = false,
   title,
+  subtitle,
   backAriaLabel = 'Back',
   isArchivedView = false,
   onBack,
@@ -68,7 +79,13 @@ export function ChatPanelHeader({
   onArchive,
   onOpenArchive,
   compact = false,
+  onToggleSearch,
+  searchActive = false,
+  searchQuery,
+  onSearchChange,
 }: 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 = [
     onRename && { id: 'rename', label: 'Rename chat', onClick: onRename },
@@ -85,6 +102,7 @@ export function ChatPanelHeader({
           className="flex md:hidden"
           showBack={showBack}
           title={title}
+          subtitle={subtitle}
           backAriaLabel={backAriaLabel}
           isArchivedView={isArchivedView}
           onBack={onBack}
@@ -98,24 +116,41 @@ export function ChatPanelHeader({
 
       {/* Compact bar: `md+` normally, or ALL widths when `compact`. Fixed-height
           bar with full-height divider action cells. */}
-      <div className={cn('flex-shrink-0 h-14 w-full overflow-hidden border-b border-ods-border bg-ods-card', compact ? 'flex' : 'hidden md:flex')}>
-        <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>
+      <div
+        className={cn(
+          'flex-shrink-0 h-14 w-full 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. */}
+        {showBack && (
+          <ChatHeaderIconButton
+            divider="right"
+            onClick={onBack}
+            aria-label={backAriaLabel}
+          >
+            <Chevron02LeftIcon size={24} />
+          </ChatHeaderIconButton>
+        )}
+        {searchInline ? (
+          // Search open — the inline field takes over the title area in place
+          // (Figma 116:51217); the magnifier toggle below is hidden.
+          <ChatHeaderSearchField
+            initialValue={searchQuery}
+            onSearchChange={onSearchChange}
+            onCollapse={onToggleSearch}
+          />
+        ) : (
+          <div className="flex flex-1 min-w-0 items-center px-[var(--spacing-system-mf)] py-[var(--spacing-system-sf)]">
+            <div className="flex min-w-0 flex-col">
+              <p className="truncate text-h3 leading-tight text-ods-text-primary">{title}</p>
+              {subtitle && (
+                <p className="truncate text-h6 leading-tight text-ods-text-secondary">{subtitle}</p>
+              )}
+            </div>
+          </div>
+        )}
 
         {/* Restore (refresh) — archived chat header (Figma node 7361:425441). */}
         {isArchivedView && onRestore && (
@@ -138,6 +173,18 @@ 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}
+          >
+            <SearchIcon size={24} />
+          </ChatHeaderIconButton>
+        )}
+
         {/* Chat Archive entry (Figma node 7532:225034) — list view only. */}
         {!showBack && onOpenArchive && (
           <ChatHeaderIconButton onClick={onOpenArchive} aria-label="Chat archive">

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

@@ -47,7 +47,7 @@ const ChatQuickAction = React.forwardRef<HTMLButtonElement, ChatQuickActionProps
         )}
         {...props}
       >
-        <span className="text-sm font-medium">{text}</span>
+        <span className="text-h6">{text}</span>
         <ChevronRight className="h-4 w-4 text-ods-text-secondary flex-shrink-0" />
       </button>
     )

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

@@ -66,7 +66,7 @@ const ChatSidebarSkeleton = React.forwardRef<HTMLDivElement, ChatSidebarSkeleton
               variant="transparent"
               disabled={true}
               leftIcon={<ChatPlusIcon className="size-6 text-ods-text-secondary" />}
-              className="flex-1 justify-center text-lg font-bold text-ods-text-secondary cursor-not-allowed hover:bg-transparent"
+              className="flex-1 justify-center text-h3 text-ods-text-secondary cursor-not-allowed hover:bg-transparent"
             >
               Start New Chat
             </Button>

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

@@ -42,7 +42,7 @@ const DialogListItem = forwardRef<HTMLDivElement, DialogListItemProps>(
         <div className="flex flex-1 flex-col items-start justify-center gap-1 min-w-0">
           <div className="flex items-center w-full min-w-0">
             <h3 className={cn(
-              "text-base font-medium leading-5 min-w-0 flex-1",
+              "text-h6 min-w-0 flex-1",
               isActive ? "text-ods-accent" : "text-ods-text-primary",
               "truncate"
             )} title={dialog.title || 'Untitled Chat'}>
@@ -50,7 +50,7 @@ const DialogListItem = forwardRef<HTMLDivElement, DialogListItemProps>(
             </h3>
           </div>
           {dialog.timestamp && (
-            <p className="text-sm text-ods-text-secondary truncate w-full min-w-0">
+            <p className="text-h6 text-ods-text-secondary truncate w-full min-w-0">
               {formatTimestamp(dialog.timestamp)}
             </p>
           )}
@@ -60,7 +60,7 @@ const DialogListItem = forwardRef<HTMLDivElement, DialogListItemProps>(
         <div className="flex-shrink-0 ml-2">
           {dialog.unreadMessagesCount && dialog.unreadMessagesCount > 0 ? (
             <div className="bg-ods-accent flex items-center justify-center p-2 rounded-md size-6">
-              <span className="text-xs font-medium text-ods-text-on-accent">
+              <span className="text-h6 text-ods-text-on-accent">
                 {dialog.unreadMessagesCount > 99 ? '99+' : dialog.unreadMessagesCount}
               </span>
             </div>
@@ -131,7 +131,7 @@ const ChatSidebar = forwardRef<HTMLDivElement, ChatSidebarProps>(
             variant="transparent"
             disabled={isLoading || isCreatingDialog}
             leftIcon={<ChatPlusIcon className="size-6 text-ods-text-secondary" />}
-            className="flex-1 justify-center text-lg font-bold text-ods-text-primary hover:bg-ods-bg-hover focus-visible:ring-0"
+            className="flex-1 justify-center text-h3 text-ods-text-primary hover:bg-ods-bg-hover focus-visible:ring-0"
           >
             Start New Chat
           </Button>
@@ -144,10 +144,10 @@ const ChatSidebar = forwardRef<HTMLDivElement, ChatSidebarProps>(
             <div className="flex-1 flex flex-col items-center justify-center gap-6 p-6">
               <ChatsIcon className="w-6 h-6 text-ods-text-secondary" />
               <div className="text-center space-y-2">
-                <h3 className="text-lg font-medium text-ods-text-secondary">
+                <h3 className="text-h4 text-ods-text-secondary">
                   No Current Chats
                 </h3>
-                <p className="text-sm font-medium text-ods-text-secondary">
+                <p className="text-h6 text-ods-text-secondary">
                   Previous Mingo sessions will show here
                 </p>
               </div>

package/src/components/chat/chat-typing-indicator.tsx

@@ -37,7 +37,7 @@ const ChatTypingIndicator = React.forwardRef<HTMLDivElement, ChatTypingIndicator
       >
         <style dangerouslySetInnerHTML={{ __html: dotAnimation }} />
         {showText && (
-          <span className="text-ods-text-secondary text-sm">Assistant is typing</span>
+          <span className="text-ods-text-secondary text-h6">Assistant is typing</span>
         )}
         <div className={cn(
           "inline-flex items-center justify-center gap-1",

package/src/components/chat/context-compaction-display.tsx

@@ -23,7 +23,7 @@ const ContextCompactionDisplay = forwardRef<HTMLDivElement, ContextCompactionDis
         )}
         {...props}
       >
-        <span className="text-sm font-medium text-ods-text-secondary flex-1 min-w-0">
+        <span className="text-h6 text-ods-text-secondary flex-1 min-w-0">
           {label}
         </span>
         {isStarted ? (