@flamingo-stack/openframe-frontend-core 0.0.438 → 0.0.439

package/src/components/chat/guide-welcome.tsx

@@ -168,17 +168,17 @@ export function GuideWelcome({
                 cornerColor="var(--ods-flamingo-cyan-base)"
               />
             )}
-            <div className="flex w-full flex-col gap-1">
-              <p className="text-h4 text-ods-text-primary">{title}</p>
+            <div className="flex w-full flex-col gap-[var(--spacing-system-l)]">
+              <p className="text-h2 text-ods-text-primary">{title}</p>
               {/* Sub-line: while the greeting is still being fetched show a
                   one-line skeleton; once settled, render the greeting (admin
                   copy / host override) or nothing — no built-in default, so by
                   default the empty state shows the title alone. */}
               {subtitle ? (
-                <p className="text-h6 text-ods-text-secondary">{subtitle}</p>
+                <p className="text-h4 text-ods-text-secondary">{subtitle}</p>
               ) : subtitleLoading ? (
                 <div className="flex w-full justify-center">
-                  <Skeleton className="h-4 w-3/4 max-w-80 rounded-sm" />
+                  <Skeleton className="h-5 w-3/4 max-w-80 rounded-sm" />
                 </div>
               ) : null}
             </div>

package/src/components/chat/hooks/use-chat-dialog-manager.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import type { DialogItem } from '../types/component.types'
 import type {
   FetchDialogsParams,
@@ -84,28 +84,68 @@ export function useChatDialogManager({
   const [archivedDialogs, setArchivedDialogs] = useState<DialogItem[]>([])
   const [archivedCursor, setArchivedCursor] = useState<string | null>(null)
   const [archivedLoading, setArchivedLoading] = useState(false)
+  // A fetch is in flight, tracked SEPARATELY from the delayed skeleton
+  // (`archivedLoading`). Set synchronously so the empty state stays suppressed
+  // during the 120ms skeleton delay — otherwise an uncached first open flashes
+  // "No archived chats" before the skeleton/data appears.
+  const [archivedPending, setArchivedPending] = useState(false)
+  // Monotonic request id — a background page-1 refresh and a pagination fetch
+  // can overlap (the retained list stays interactive while page 1 revalidates).
+  // Only the LATEST request may mutate the list / cursor / loading flags, so a
+  // slow earlier response can't clobber newer rows, append stale ones, or clear
+  // the shared loading flag while another request is still in flight.
+  const archivedRequestIdRef = useRef(0)
   const loadArchivedPage = useCallback(
     async (cursor?: string): Promise<void> => {
       if (!fetchArchivedDialogs) return
-      setArchivedLoading(true)
+      const requestId = ++archivedRequestIdRef.current
+      const isCurrent = () => archivedRequestIdRef.current === requestId
+      // Only a first-page load drives the full-view skeleton, and only if it's
+      // actually slow: a 120ms delay means a cached/fast fetch (the host caches
+      // page 1) resolves first and never flashes a skeleton. Pagination
+      // (`cursor`) keeps the current list visible.
+      const isInitial = !cursor
+      setArchivedPending(true)
+      let skeletonTimer: ReturnType<typeof setTimeout> | undefined
+      if (isInitial) {
+        // Delay the full-view skeleton so a cached/fast page-1 fetch never
+        // flashes it (and skip it if a newer request already superseded us).
+        skeletonTimer = setTimeout(() => {
+          if (isCurrent()) setArchivedLoading(true)
+        }, 120)
+      } else {
+        // Pagination shows its "load more" indicator immediately (the list
+        // stays visible), so no delay here.
+        setArchivedLoading(true)
+      }
       try {
         const result = await fetchArchivedDialogs({ cursor, limit: 20 })
+        // A newer request superseded this one — drop the response so overlapping
+        // refresh / pagination can't append stale rows or clobber newer results.
+        if (!isCurrent()) return
         setArchivedCursor(result.nextCursor)
         setArchivedDialogs((prev) =>
           cursor ? [...prev, ...result.dialogs] : result.dialogs,
         )
       } catch (err) {
+        if (!isCurrent()) return
         console.error('[useChatDialogManager] fetchArchivedDialogs failed:', err)
       } finally {
-        setArchivedLoading(false)
+        if (skeletonTimer) clearTimeout(skeletonTimer)
+        // Only the latest request owns the shared loading / pending flags.
+        if (isCurrent()) {
+          setArchivedLoading(false)
+          setArchivedPending(false)
+        }
       }
     },
     [fetchArchivedDialogs],
   )
   const openArchive = useCallback(() => {
     setArchiveOpen(true)
-    setArchivedDialogs([])
-    setArchivedCursor(null)
+    // Don't clear the list — keep any already-loaded page visible and refresh
+    // page 1 in the background (stale-while-revalidate), so reopening the
+    // archive within a session doesn't blank out to a skeleton.
     void loadArchivedPage()
   }, [loadArchivedPage])
   const closeArchive = useCallback(() => setArchiveOpen(false), [])
@@ -183,6 +223,18 @@ export function useChatDialogManager({
     if (wasArchived) setArchiveOpen(true)
   }, [isViewingArchived, selectDialog, clearMessages])
 
+  // "Start New Chat" reset — clears the open conversation and ALWAYS lands on
+  // the new-chat welcome. Unlike `handleBack`, it never reopens the archive
+  // (backing out of an archived chat returns to the archive; starting a NEW
+  // chat must not), so the archive is force-closed here regardless of state.
+  const resetToNewChat = useCallback(() => {
+    setViewingArchivedId(null)
+    setOpeningDialogId(null)
+    selectDialog(null)
+    clearMessages()
+    setArchiveOpen(false)
+  }, [selectDialog, clearMessages])
+
   // Active-conversation dialog — resolved from the active list, or the
   // archived list when an archived chat is open (archived dialogs aren't in
   // `dialogs`, so the header title and ⋯ / restore actions need this).
@@ -202,6 +254,7 @@ export function useChatDialogManager({
     archivedDialogs,
     archivedCursor,
     archivedLoading,
+    archivedPending,
     openArchive,
     closeArchive,
     loadArchivedPage,
@@ -212,6 +265,7 @@ export function useChatDialogManager({
     // archived conversation
     isViewingArchived,
     handleBack,
+    resetToNewChat,
     activeDialog,
     // action modals
     renameTarget,

package/src/components/chat/index.ts

@@ -31,8 +31,10 @@ export * from './msp-organization-card'
 export * from './msp-organization-card-skeleton'
 export * from './guide-mode-banner'
 export * from './mingo-chat-history'
+export * from './mingo-history-rail'
 export * from './mingo-chat-modals'
 export * from './chat-header-icon-button'
+export * from './chat-header-search-field'
 export * from './chat-panel-header'
 export * from './chat-composer'
 export * from './chat-context-picker'

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

@@ -2,12 +2,11 @@
 
 import * as React from 'react'
 import { cn } from '../../utils/cn'
-import { useDebounce } from '../../hooks/ui/use-debounce'
 import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu'
 import { Button } from '../ui/button'
-import { Input } from '../ui/input'
 import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade'
-import { Ellipsis01Icon, SearchIcon } from '../icons-v2-generated'
+import { Ellipsis01Icon, SearchXmarkIcon } from '../icons-v2-generated'
+import { ChatListEmptyState } from './chat-list-empty-state'
 import type { DialogItem } from './types/component.types'
 
 // =============================================================================
@@ -27,12 +26,10 @@ export interface MingoChatHistoryProps {
   /** Request archive — enables the row "Archive chat" action. The host opens
    *  the Archive confirmation modal. */
   onRequestArchive?: (dialog: DialogItem) => void
-  /** Seed value for the search input. The host owns the search term and refetches
-   *  the dialog list server-side; the list itself does no filtering. */
+  /** Current server-side search term. Drives the "No chats found" empty state;
+   *  the search INPUT lives in the panel header, not in this list. The host
+   *  owns the term and refetches server-side — the list does no filtering. */
   searchQuery?: string
-  /** Emit the (debounced) search term — enables the dialog search bar above the
-   *  list. Omit to hide the search bar entirely. */
-  onSearchChange?: (query: string) => void
   /** Whether more dialogs remain (cursor pagination). */
   hasMore?: boolean
   /** True while the next page is loading. */
@@ -134,11 +131,21 @@ function MingoChatHistoryRow({
   return (
     <div
       className={cn(
-        'group/row flex h-12 items-center bg-ods-bg border-b border-ods-border last:border-b-0',
-        'transition-colors hover:bg-ods-bg-hover',
-        isActive && 'bg-ods-bg-hover',
+        'group/row relative flex h-12 items-center border-b border-ods-border last:border-b-0 transition-colors',
+        // Active (selected) dialog — Figma 259:91610: an open-yellow-secondary
+        // fill, a 4px open-yellow accent bar down the leading edge, and yellow
+        // title text. Inactive rows keep the dark surface with a hover tint.
+        isActive
+          ? 'bg-ods-open-yellow-secondary'
+          : 'bg-ods-bg hover:bg-ods-bg-hover',
       )}
     >
+      {isActive ? (
+        <span
+          aria-hidden
+          className="pointer-events-none absolute inset-y-0 left-0 w-1 bg-ods-open-yellow"
+        />
+      ) : null}
       <div
         role="button"
         tabIndex={0}
@@ -149,7 +156,7 @@ function MingoChatHistoryRow({
             onSelect?.(dialog.id)
           }
         }}
-        className="flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xsf)] p-[var(--spacing-system-s)] cursor-pointer focus:outline-none focus-visible:bg-ods-bg-hover"
+        className="flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xsf)] p-[var(--spacing-system-s)] cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent"
       >
         {unread > 0 ? (
           <span className="flex h-8 min-w-8 shrink-0 items-center justify-center rounded-md bg-ods-accent px-[var(--spacing-system-xsf)] text-h5 text-ods-text-on-accent">
@@ -157,7 +164,10 @@ function MingoChatHistoryRow({
           </span>
         ) : null}
         <span
-          className="min-w-0 flex-1 truncate text-h4 text-ods-text-primary"
+          className={cn(
+            'min-w-0 flex-1 truncate text-h4',
+            isActive ? 'text-ods-open-yellow' : 'text-ods-text-primary',
+          )}
           title={title}
         >
           {title}
@@ -222,61 +232,39 @@ function MingoChatHistoryRow({
  */
 export function MingoChatHistorySkeleton({
   className,
-  searchable = false,
 }: {
   className?: string
-  /** Render a search-bar placeholder above the groups — match the real list,
-   *  which shows the search bar only when search is wired. */
-  searchable?: boolean
 }) {
-  // Mirror the real grouped list: a group label, then a bordered container of
-  // `h-12` rows. `withBadge` adds the leading unread-badge square on the first
-  // N rows; `widths` varies the title-bar length so the placeholder reads like
-  // a list of differing-length chat titles, not identical bars. `bg-ods-border`
-  // (not `bg-ods-bg-secondary`) so the placeholders are actually visible on the
-  // dark surface.
-  const groups: ReadonlyArray<{ withBadge: number; widths: ReadonlyArray<string> }> = [
-    { withBadge: 2, widths: ['w-3/5', 'w-4/5', 'w-2/5', 'w-3/4'] },
-    { withBadge: 0, widths: ['w-1/2', 'w-3/5', 'w-2/3'] },
+  // Mirror the real grouped list exactly: a small group label, then a bordered
+  // rounded container of `h-12` rows, each with a single title bar of varying
+  // width (no unread-badge squares — the real rows currently never show one, so
+  // a badge placeholder would mis-promise the layout). `bg-ods-border` matches
+  // the kit's canonical `Skeleton` placeholder colour; `bg-ods-bg` rows read a
+  // touch darker than the `bg-ods-card` panel so the bars stay legible.
+  const groups: ReadonlyArray<ReadonlyArray<string>> = [
+    ['w-3/5', 'w-4/5', 'w-2/5', 'w-3/4'],
+    ['w-1/2', 'w-2/3'],
   ]
   return (
     <div
       aria-hidden
       // `overflow-hidden` clips the placeholder rows to the flex-1 box (the real
-      // list scrolls; the skeleton just needs to stay within bounds). Without it
-      // the rows bleed past their allotment and render under the pinned composer
-      // — which has no surface of its own — so the input appears to overlap them.
+      // list scrolls; the skeleton just needs to stay within bounds).
       className={cn(
         'flex flex-1 min-h-0 flex-col gap-[var(--spacing-system-m)] overflow-hidden',
         className,
       )}
     >
-      {/* Search-bar placeholder — mirrors the real `Input` (border, rounded,
-          h-11/12) with a leading icon + text bar so the loading state matches
-          the searchable layout. */}
-      {searchable && (
-        <div className="flex h-11 md:h-12 shrink-0 items-center gap-2 rounded-[6px] border border-ods-border bg-ods-card px-3">
-          <div className="size-4 md:size-6 shrink-0 animate-pulse rounded bg-ods-border" />
-          <div className="h-4 w-32 animate-pulse rounded bg-ods-border" />
-        </div>
-      )}
-      {groups.map((group, g) => (
+      {groups.map((widths, g) => (
         <div key={g} className="flex shrink-0 flex-col gap-[var(--spacing-system-xxs)]">
-          {/* Group label (Today / Yesterday). */}
+          {/* Group label (Today / Older). */}
           <div className="h-3 w-16 animate-pulse rounded bg-ods-border" />
           <div className="overflow-hidden rounded-md border border-ods-border">
-            {group.widths.map((w, i) => (
+            {widths.map((w, i) => (
               <div
                 key={i}
-                // Match the real row surface: `bg-ods-bg` (#161616) sits darker
-                // than the `bg-ods-card` (#212121) panel, which is what makes
-                // the `bg-ods-border` (#3a3a3a) placeholders read clearly. On
-                // the bare card they'd be muddy (too close in value).
-                className="flex h-12 items-center gap-[var(--spacing-system-xsf)] bg-ods-bg border-b border-ods-border px-[var(--spacing-system-s)] last:border-b-0"
+                className="flex h-12 items-center bg-ods-bg border-b border-ods-border px-[var(--spacing-system-s)] last:border-b-0"
               >
-                {i < group.withBadge && (
-                  <div className="h-8 w-8 shrink-0 animate-pulse rounded-md bg-ods-border" />
-                )}
                 <div className={cn('h-4 animate-pulse rounded bg-ods-border', w)} />
               </div>
             ))}
@@ -287,46 +275,6 @@ export function MingoChatHistorySkeleton({
   )
 }
 
-// =============================================================================
-// Search bar
-// =============================================================================
-
-/**
- * Dialog search field. Holds its own input text for snappy typing and emits 
- * the DEBOUNCED term via `onSearchChange` — the host owns the search state 
- * and refetches the dialog list server-side, so the list never
- * filters locally. `initialValue` only seeds the field on mount.
- */
-function DialogSearchBar({
-  initialValue,
-  onSearchChange,
-}: {
-  initialValue?: string
-  onSearchChange: (query: string) => void
-}) {
-  const [value, setValue] = React.useState(initialValue ?? '')
-  const debounced = useDebounce(value, 300)
-  const lastEmitted = React.useRef(initialValue ?? '')
-
-  React.useEffect(() => {
-    if (debounced === lastEmitted.current) return
-    lastEmitted.current = debounced
-    onSearchChange(debounced)
-  }, [debounced, onSearchChange])
-
-  return (
-    <Input
-      type="text"
-      value={value}
-      onChange={(e) => setValue(e.target.value)}
-      placeholder="Search for Chats"
-      aria-label="Search chats"
-      startAdornment={<SearchIcon />}
-      className="shrink-0"
-    />
-  )
-}
-
 // =============================================================================
 // Component
 // =============================================================================
@@ -349,7 +297,6 @@ export function MingoChatHistory({
   onRequestRename,
   onRequestArchive,
   searchQuery,
-  onSearchChange,
   hasMore = false,
   isLoadingMore = false,
   onLoadMore,
@@ -388,13 +335,8 @@ export function MingoChatHistory({
 
   return (
     <div className={cn('relative flex flex-1 min-h-0 flex-col gap-[var(--spacing-system-m)]', className)}>
-      {/* Pinned search bar — stays put while the grouped list scrolls below. */}
-      {onSearchChange ? (
-        <DialogSearchBar initialValue={searchQuery} onSearchChange={onSearchChange} />
-      ) : null}
-
-      {/* Scroll region — `relative` so the fades anchor here (below the search
-          bar), not over it. */}
+      {/* Scroll region — the search INPUT now lives in the panel header
+          (Figma 116:51217), so the list is just the grouped rows + fades. */}
       <div className="relative flex flex-1 min-h-0 flex-col">
         <div
           ref={scrollRef}
@@ -402,9 +344,13 @@ export function MingoChatHistory({
           className="flex flex-1 min-h-0 flex-col gap-[var(--spacing-system-m)] overflow-y-auto"
         >
           {noSearchResults ? (
-            <p className="py-[var(--spacing-system-m)] text-center text-h5 text-ods-text-secondary">
-              No chats found
-            </p>
+            // No search matches — same centred glyph + title + caption layout as
+            // the other chat-list empty states (Figma 113:60939).
+            <ChatListEmptyState
+              icon={<SearchXmarkIcon size={24} />}
+              title="No Chats Found"
+              description="Try a different search term"
+            />
           ) : (
             groups.map((group) => (
               <div

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

@@ -0,0 +1,161 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../utils/cn'
+import { Button } from '../ui/button'
+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'
+import { MingoChatHistory, MingoChatHistorySkeleton } from './mingo-chat-history'
+import { ChatListEmptyState } from './chat-list-empty-state'
+import type { DialogItem } from './types/component.types'
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface MingoHistoryRailProps {
+  /** Dialogs to list, assumed already sorted newest-first by the host. */
+  dialogs: ReadonlyArray<DialogItem>
+  /** Currently-open dialog id (highlighted). */
+  activeDialogId?: string
+  /** Open a dialog. */
+  onSelectDialog?: (id: string) => void
+  /** Start a fresh chat — clears the open conversation so the chat block shows
+   *  the welcome. Rendered as the pinned "Start New Chat" button above the list. */
+  onNewChat?: () => void
+  /** Show the "Start New Chat" button even when there are no chats yet. Needed
+   *  for the narrow single-column list, where there's no composer to fall back
+   *  on; the wide rail leaves it off (the chat block already has a composer). */
+  newChatAlways?: boolean
+  /** Request rename — enables the row "Rename chat" action. */
+  onRequestRename?: (dialog: DialogItem) => void
+  /** Request archive — enables the row "Archive chat" action. */
+  onRequestArchive?: (dialog: DialogItem) => 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. */
+  searchQuery?: string
+  /** Whether more dialogs remain (cursor pagination). */
+  hasMore?: boolean
+  /** True while the next page is loading. */
+  isLoadingMore?: boolean
+  /** Fetch the next page. */
+  onLoadMore?: () => void
+  /** True while the FIRST page of dialogs is still loading. Renders a skeleton
+   *  so the rail doesn't flash the empty state before the list arrives. */
+  isLoadingHistory?: boolean
+  /** The dialog-list load FAILED with nothing cached — renders an error + retry
+   *  block instead of the empty state. */
+  loadError?: boolean
+  /** Retry handler for the `loadError` state. */
+  onRetry?: () => void
+  /** Appended to the root element. */
+  className?: string
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * MingoHistoryRail — the persistent "Current Chats" left column of the split
+ * (wide) Mingo layout (Figma 113:60931 / 113:63630).
+ *
+ * The dialog history that the stacked layout renders inline in the Mingo empty
+ * state is hoisted here into a fixed-width rail beside the chat block. On top
+ * sits a pinned "Start New Chat" button (shown once the user has chats); below
+ * it the grouped Today / Yesterday / Older list (`MingoChatHistory`). With no
+ * chats it collapses to a centred empty state; loading / error states mirror
+ * the stacked empty state so the two layouts stay consistent.
+ */
+export function MingoHistoryRail({
+  dialogs,
+  activeDialogId,
+  onSelectDialog,
+  onNewChat,
+  newChatAlways = false,
+  onRequestRename,
+  onRequestArchive,
+  searchQuery,
+  hasMore = false,
+  isLoadingMore = false,
+  onLoadMore,
+  isLoadingHistory = false,
+  loadError = false,
+  onRetry,
+  className,
+}: MingoHistoryRailProps) {
+  const hasSearch = !!searchQuery?.trim()
+  // The list (vs. the empty state) shows whenever there are chats OR an active
+  // search is running — a no-match query must keep the search bar mounted
+  // rather than flash the "No Current Chats" state.
+  const hasList = dialogs.length > 0 || hasSearch
+
+  return (
+    <div
+      className={cn(
+        'flex flex-1 min-h-0 flex-col gap-[var(--spacing-system-m)] p-[var(--spacing-system-m)]',
+        className,
+      )}
+    >
+      {/* Pinned "Start New Chat". In the wide rail it's offered only once the
+          user has chats (the chat block's composer is the empty-state entry);
+          the narrow list forces it on (`newChatAlways`) since it has no composer. */}
+      {onNewChat && (hasList || newChatAlways) && (
+        <Button
+          variant="outline"
+          fullWidth
+          leftIcon={<PlusCircleIcon size={20} />}
+          onClick={onNewChat}
+          className="shrink-0 justify-start"
+        >
+          Start New Chat
+        </Button>
+      )}
+
+      {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" />
+          <div className="flex flex-col gap-[var(--spacing-system-xxs)]">
+            <p className="text-h4 text-ods-text-primary">Couldn’t load your chats</p>
+            <p className="text-h6 text-ods-text-secondary">
+              Something went wrong reaching the server. Try again.
+            </p>
+          </div>
+          {onRetry && (
+            <Button
+              variant="outline"
+              size="small"
+              leftIcon={<Refresh01RightIcon />}
+              onClick={onRetry}
+            >
+              Try again
+            </Button>
+          )}
+        </div>
+      ) : isLoadingHistory ? (
+        <MingoChatHistorySkeleton />
+      ) : hasList ? (
+        <MingoChatHistory
+          dialogs={dialogs}
+          activeDialogId={activeDialogId}
+          onSelectDialog={onSelectDialog}
+          onRequestRename={onRequestRename}
+          onRequestArchive={onRequestArchive}
+          searchQuery={searchQuery}
+          hasMore={hasMore}
+          isLoadingMore={isLoadingMore}
+          onLoadMore={onLoadMore}
+        />
+      ) : (
+        // Figma 113:60939 — no-chats empty state.
+        <ChatListEmptyState
+          icon={<ChatsIcon size={24} />}
+          title="No Current Chats"
+          description="Previous Mingo sessions will show here"
+        />
+      )}
+    </div>
+  )
+}