@flamingo-stack/openframe-frontend-core 0.0.219 → 0.0.220-snapshot.20260602172647

package/src/components/chat/index.ts

@@ -21,6 +21,15 @@ export * from './tool-execution-display'
 export * from './tool-call-blocks'
 export * from './mingo-onboarding-card'
 export * from './mingo-onboarding-card-skeleton'
+export * from './mingo-welcome'
+export * from './guide-welcome'
+export * from './guide-mode-banner'
+export * from './mingo-chat-history'
+export * from './mingo-chat-modals'
+export * from './chat-header-icon-button'
+export * from './chat-panel-header'
+export * from './chat-composer'
+export * from './chat-archive-page'
 export * from './model-display'
 export * from './chat-sidebar'
 export type { ChatRef } from './chat-ref.types'

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

@@ -0,0 +1,308 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../utils/cn'
+import { MoreActionsMenu } from '../ui/more-actions-menu'
+import { Ellipsis01Icon } from '../icons-v2-generated'
+import type { DialogItem } from './types/component.types'
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface MingoChatHistoryProps {
+  /** 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
+  /** Request rename — enables the row "Rename chat" action. The host opens
+   *  the Rename modal; the list does no inline editing. */
+  onRequestRename?: (dialog: DialogItem) => void
+  /** Request archive — enables the row "Archive chat" action. The host opens
+   *  the Archive confirmation modal. */
+  onRequestArchive?: (dialog: DialogItem) => void
+  /** Whether more dialogs remain (cursor pagination). */
+  hasMore?: boolean
+  /** True while the next page is loading. */
+  isLoadingMore?: boolean
+  /** Fetch the next page — fired when the bottom sentinel scrolls into view. */
+  onLoadMore?: () => void
+  /** Appended to the root element. */
+  className?: string
+}
+
+interface DialogGroup {
+  key: string
+  label: string
+  items: DialogItem[]
+}
+
+// =============================================================================
+// Date grouping — Today / Yesterday / Older
+// =============================================================================
+
+function dialogTime(d: DialogItem): number | null {
+  if (!d.timestamp) return null
+  const t =
+    typeof d.timestamp === 'string'
+      ? Date.parse(d.timestamp)
+      : d.timestamp.getTime()
+  return Number.isNaN(t) ? null : t
+}
+
+function groupDialogs(dialogs: ReadonlyArray<DialogItem>): DialogGroup[] {
+  const now = new Date()
+  const startOfToday = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate(),
+  ).getTime()
+  const startOfYesterday = startOfToday - 24 * 60 * 60 * 1000
+
+  const today: DialogItem[] = []
+  const yesterday: DialogItem[] = []
+  const older: DialogItem[] = []
+  for (const d of dialogs) {
+    const t = dialogTime(d)
+    if (t !== null && t >= startOfToday) today.push(d)
+    else if (t !== null && t >= startOfYesterday) yesterday.push(d)
+    else older.push(d) // includes timestamp-less dialogs
+  }
+
+  return [
+    { key: 'today', label: 'Today', items: today },
+    { key: 'yesterday', label: 'Yesterday', items: yesterday },
+    { key: 'older', label: 'Older', items: older },
+  ].filter((g) => g.items.length > 0)
+}
+
+// =============================================================================
+// Row
+// =============================================================================
+
+interface RowProps {
+  dialog: DialogItem
+  isActive: boolean
+  onSelect?: (id: string) => void
+  onRequestRename?: (dialog: DialogItem) => void
+  onRequestArchive?: (dialog: DialogItem) => void
+}
+
+function MingoChatHistoryRow({
+  dialog,
+  isActive,
+  onSelect,
+  onRequestRename,
+  onRequestArchive,
+}: RowProps) {
+  const title = dialog.title || 'Untitled Chat'
+  const unread = dialog.unreadMessagesCount ?? 0
+  const hasMenu = !!onRequestRename || !!onRequestArchive
+  // Keep the `⋯` visible while its menu is open — once Radix moves focus into
+  // the portalled content the row loses hover/focus-within.
+  const [menuOpen, setMenuOpen] = React.useState(false)
+
+  const menuItems = [
+    onRequestRename && {
+      label: 'Rename chat',
+      onClick: () => onRequestRename(dialog),
+    },
+    onRequestArchive && {
+      label: 'Archive chat',
+      onClick: () => onRequestArchive(dialog),
+    },
+  ].filter(Boolean) as { label: string; onClick: () => void }[]
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={() => onSelect?.(dialog.id)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          onSelect?.(dialog.id)
+        }
+      }}
+      className={cn(
+        'group/row flex h-12 items-center gap-[var(--spacing-system-xsf)] px-[var(--spacing-system-s)]',
+        'bg-ods-bg border-b border-ods-border last:border-b-0',
+        'cursor-pointer transition-colors hover:bg-ods-bg-hover focus:outline-none focus-visible:bg-ods-bg-hover',
+        isActive && 'bg-ods-bg-hover',
+      )}
+    >
+      {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">
+          {unread > 99 ? '99+' : unread}
+        </span>
+      ) : null}
+      <span
+        className="min-w-0 flex-1 truncate text-h4 text-ods-text-primary"
+        title={title}
+      >
+        {title}
+      </span>
+      {hasMenu ? (
+        // Stop propagation so opening the menu doesn't also select the dialog.
+        // Hidden until the row is hovered/focused (or its menu is open).
+        <span
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            'shrink-0 transition-opacity',
+            menuOpen
+              ? 'opacity-100'
+              : 'opacity-0 group-hover/row:opacity-100 focus-within:opacity-100',
+          )}
+        >
+          <MoreActionsMenu
+            ariaLabel="Chat actions"
+            items={menuItems}
+            open={menuOpen}
+            onOpenChange={setMenuOpen}
+            // Don't return focus (and its ring) to the `⋯` trigger on close.
+            onCloseAutoFocus={(e) => e.preventDefault()}
+            trigger={
+              <button
+                type="button"
+                aria-label="Chat actions"
+                className="flex size-6 items-center justify-center rounded-md text-ods-text-secondary transition-colors hover:text-ods-text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent"
+              >
+                <Ellipsis01Icon size={24} />
+              </button>
+            }
+          />
+        </span>
+      ) : null}
+    </div>
+  )
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * MingoChatHistory — Figma node `7532:223950`.
+ *
+ * The returning-user variation of the Mingo empty state: the dialog history
+ * rendered inline in the main panel, grouped into Today / Yesterday / Older
+ * sections. Each row shows an optional unread badge, the title, and a `⋯`
+ * menu (Rename / Archive — each gated on the matching handler and surfaced as
+ * a request the host fulfils via a modal). Owns its own scroll + bottom/top
+ * fade and an infinite-scroll
+ * sentinel that fires `onLoadMore`.
+ */
+export function MingoChatHistory({
+  dialogs,
+  activeDialogId,
+  onSelectDialog,
+  onRequestRename,
+  onRequestArchive,
+  hasMore = false,
+  isLoadingMore = false,
+  onLoadMore,
+  className,
+}: MingoChatHistoryProps) {
+  const groups = React.useMemo(() => groupDialogs(dialogs), [dialogs])
+
+  // Scroll-fade affordances (same pattern as MingoWelcome's greeting region).
+  const scrollRef = React.useRef<HTMLDivElement>(null)
+  const [fade, setFade] = React.useState({ top: false, bottom: false })
+  const updateFade = React.useCallback(() => {
+    const el = scrollRef.current
+    if (!el) return
+    const top = el.scrollTop > 1
+    const bottom = el.scrollTop + el.clientHeight < el.scrollHeight - 1
+    setFade((p) => (p.top === top && p.bottom === bottom ? p : { top, bottom }))
+  }, [])
+  React.useEffect(() => {
+    updateFade()
+    const el = scrollRef.current
+    if (!el || typeof ResizeObserver === 'undefined') return
+    const ro = new ResizeObserver(updateFade)
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [updateFade, dialogs])
+
+  // Infinite scroll — load the next page when the sentinel enters the
+  // scroll viewport.
+  const sentinelRef = React.useRef<HTMLDivElement>(null)
+  const onLoadMoreRef = React.useRef(onLoadMore)
+  onLoadMoreRef.current = onLoadMore
+  const isLoadingMoreRef = React.useRef(isLoadingMore)
+  isLoadingMoreRef.current = isLoadingMore
+  React.useEffect(() => {
+    const root = scrollRef.current
+    const sentinel = sentinelRef.current
+    if (!root || !sentinel || !hasMore || typeof IntersectionObserver === 'undefined')
+      return
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && !isLoadingMoreRef.current) {
+          onLoadMoreRef.current?.()
+        }
+      },
+      { root, rootMargin: '120px', threshold: 0.1 },
+    )
+    io.observe(sentinel)
+    return () => io.disconnect()
+  }, [hasMore])
+
+  return (
+    <div className={cn('relative flex flex-1 min-h-0 flex-col', className)}>
+      <div
+        ref={scrollRef}
+        onScroll={updateFade}
+        className="flex flex-1 min-h-0 flex-col gap-[var(--spacing-system-m)] overflow-y-auto"
+      >
+        {groups.map((group) => (
+          <div
+            key={group.key}
+            className="flex flex-col gap-[var(--spacing-system-xxs)]"
+          >
+            <p className="text-h5 text-ods-text-secondary">{group.label}</p>
+            <div className="overflow-hidden rounded-md border border-ods-border">
+              {group.items.map((dialog) => (
+                <MingoChatHistoryRow
+                  key={dialog.id}
+                  dialog={dialog}
+                  isActive={dialog.id === activeDialogId}
+                  onSelect={onSelectDialog}
+                  onRequestRename={onRequestRename}
+                  onRequestArchive={onRequestArchive}
+                />
+              ))}
+            </div>
+          </div>
+        ))}
+        {hasMore ? <div ref={sentinelRef} className="h-px shrink-0" /> : null}
+      </div>
+
+      {/* Scroll-fade — only while content is hidden in that direction. */}
+      <div
+        aria-hidden
+        className={cn(
+          'pointer-events-none absolute inset-x-0 top-0 h-12 transition-opacity duration-150',
+          fade.top ? 'opacity-100' : 'opacity-0',
+        )}
+        style={{
+          background:
+            'linear-gradient(0deg, transparent 0%, var(--color-bg-card) 100%)',
+        }}
+      />
+      <div
+        aria-hidden
+        className={cn(
+          'pointer-events-none absolute inset-x-0 bottom-0 h-12 transition-opacity duration-150',
+          fade.bottom ? 'opacity-100' : 'opacity-0',
+        )}
+        style={{
+          background:
+            'linear-gradient(180deg, transparent 0%, var(--color-bg-card) 100%)',
+        }}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,223 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../utils/cn'
+import {
+  ModalV2,
+  ModalV2Header,
+  ModalV2Title,
+  ModalV2Footer,
+} from '../ui/modal-v2'
+import type { DialogItem } from './types/component.types'
+
+// Shared button styling for the modal footers (Figma `button-full`):
+// full-width, `text-h3` (DM Sans Bold 18px), 12/16 padding, rounded-md.
+const footerBtn =
+  'flex-1 min-w-0 rounded-md px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] text-h3 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent disabled:opacity-50 disabled:cursor-not-allowed'
+const cancelBtn = cn(
+  footerBtn,
+  'border border-ods-border bg-transparent text-ods-text-primary hover:bg-ods-bg-hover',
+)
+const saveBtn = cn(
+  footerBtn,
+  'bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover',
+)
+const dangerBtn = cn(
+  footerBtn,
+  'bg-ods-error text-ods-text-on-accent hover:opacity-90',
+)
+
+// =============================================================================
+// Rename
+// =============================================================================
+
+export interface RenameChatModalProps {
+  isOpen: boolean
+  /** Current chat name, used to seed the input each time the modal opens. */
+  initialName?: string
+  onClose: () => void
+  /** Fired with the trimmed new name when Save is pressed. */
+  onSave: (name: string) => void
+}
+
+/** Rename Chat modal — Figma node `7592:225962`. */
+export function RenameChatModal({
+  isOpen,
+  initialName = '',
+  onClose,
+  onSave,
+}: RenameChatModalProps) {
+  const [name, setName] = React.useState(initialName)
+  // Reseed whenever the modal (re)opens — possibly for a different chat.
+  React.useEffect(() => {
+    if (isOpen) setName(initialName)
+  }, [isOpen, initialName])
+
+  const canSave = name.trim().length > 0
+  const save = () => {
+    if (canSave) onSave(name.trim())
+  }
+
+  return (
+    <ModalV2 isOpen={isOpen} onClose={onClose} className="md:max-w-[600px]">
+      <ModalV2Header>
+        <ModalV2Title>Rename Chat</ModalV2Title>
+      </ModalV2Header>
+      <div className="flex w-full flex-col gap-[var(--spacing-system-xxs)]">
+        <label htmlFor="rename-chat-input" className="text-h4 text-ods-text-primary">
+          Chat Name
+        </label>
+        <input
+          id="rename-chat-input"
+          autoFocus
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') save()
+          }}
+          className="w-full rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-sf)] text-h4 text-ods-text-primary focus:outline-none focus-visible:border-ods-accent"
+        />
+      </div>
+      <ModalV2Footer>
+        <button type="button" onClick={onClose} className={cancelBtn}>
+          Cancel
+        </button>
+        <button type="button" onClick={save} disabled={!canSave} className={saveBtn}>
+          Save
+        </button>
+      </ModalV2Footer>
+    </ModalV2>
+  )
+}
+
+// =============================================================================
+// Archive
+// =============================================================================
+
+export interface ArchiveChatModalProps {
+  isOpen: boolean
+  onClose: () => void
+  /** Fired when the destructive "Archive Chat" button is pressed. */
+  onConfirm: () => void
+}
+
+/** Archive Chat confirmation modal — Figma node `7592:226181`. */
+export function ArchiveChatModal({
+  isOpen,
+  onClose,
+  onConfirm,
+}: ArchiveChatModalProps) {
+  return (
+    <ModalV2 isOpen={isOpen} onClose={onClose} className="md:max-w-[600px]">
+      <ModalV2Header>
+        <ModalV2Title>Archive Chat</ModalV2Title>
+      </ModalV2Header>
+      <p className="w-full text-h4 text-ods-text-primary">
+        This chat will be hidden from your current chats.
+      </p>
+      <ModalV2Footer>
+        <button type="button" onClick={onClose} className={cancelBtn}>
+          Cancel
+        </button>
+        <button type="button" onClick={onConfirm} className={dangerBtn}>
+          Archive Chat
+        </button>
+      </ModalV2Footer>
+    </ModalV2>
+  )
+}
+
+// =============================================================================
+// Unarchive
+// =============================================================================
+
+export interface UnarchiveChatModalProps {
+  isOpen: boolean
+  onClose: () => void
+  /** Fired when the "Unarchive Chat" button is pressed. */
+  onConfirm: () => void
+}
+
+/** Unarchive (restore) Chat confirmation modal — restores an archived chat
+ *  back to the current chats so the user can continue it. */
+export function UnarchiveChatModal({
+  isOpen,
+  onClose,
+  onConfirm,
+}: UnarchiveChatModalProps) {
+  return (
+    <ModalV2 isOpen={isOpen} onClose={onClose} className="md:max-w-[600px]">
+      <ModalV2Header>
+        <ModalV2Title>Unarchive Chat</ModalV2Title>
+      </ModalV2Header>
+      <p className="w-full text-h4 text-ods-text-primary">
+        This chat will be moved back to your current chats.
+      </p>
+      <ModalV2Footer>
+        <button type="button" onClick={onClose} className={cancelBtn}>
+          Cancel
+        </button>
+        <button type="button" onClick={onConfirm} className={saveBtn}>
+          Unarchive Chat
+        </button>
+      </ModalV2Footer>
+    </ModalV2>
+  )
+}
+
+// =============================================================================
+// Composite — all three dialog-action modals
+// =============================================================================
+
+export interface ChatDialogModalsProps {
+  /** Dialog pending rename (`null` = closed). */
+  renameTarget: DialogItem | null
+  setRenameTarget: (dialog: DialogItem | null) => void
+  onConfirmRename: (name: string) => void
+  /** Dialog pending archive (`null` = closed). */
+  archiveTarget: DialogItem | null
+  setArchiveTarget: (dialog: DialogItem | null) => void
+  onConfirmArchive: () => void
+  /** Dialog pending restore/unarchive (`null` = closed). */
+  restoreTarget: DialogItem | null
+  setRestoreTarget: (dialog: DialogItem | null) => void
+  onConfirmRestore: () => void
+}
+
+/**
+ * Renders the Rename / Archive / Unarchive modals together, each driven by its
+ * target dialog. Pair with `useChatDialogManager`, which produces exactly this
+ * prop shape.
+ */
+export function ChatDialogModals({
+  renameTarget,
+  setRenameTarget,
+  onConfirmRename,
+  archiveTarget,
+  setArchiveTarget,
+  onConfirmArchive,
+  restoreTarget,
+  setRestoreTarget,
+  onConfirmRestore,
+}: ChatDialogModalsProps) {
+  return (
+    <>
+      <RenameChatModal
+        isOpen={renameTarget != null}
+        initialName={renameTarget?.title ?? ''}
+        onClose={() => setRenameTarget(null)}
+        onSave={onConfirmRename}
+      />
+      <ArchiveChatModal
+        isOpen={archiveTarget != null}
+        onClose={() => setArchiveTarget(null)}
+        onConfirm={onConfirmArchive}
+      />
+      <UnarchiveChatModal
+        isOpen={restoreTarget != null}
+        onClose={() => setRestoreTarget(null)}
+        onConfirm={onConfirmRestore}
+      />
+    </>
+  )
+}

package/src/components/chat/mingo-onboarding-card.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react'
 import { cn } from '../../utils/cn'
+import { Button } from '../ui/button'
 
 export interface MingoOnboardingCardAction {
   /** Stable React key. */
@@ -91,22 +92,18 @@ export function MingoOnboardingCard({
       {hasActions ? (
         <div className="flex flex-wrap items-center gap-[var(--spacing-system-xxs)] mt-[var(--spacing-system-xs)]">
           {actions!.map((action) => (
-            <button
+            <Button
               key={action.id}
               type="button"
+              variant="outline"
+              size="small"
               onClick={(e) => {
                 e.stopPropagation()
                 action.onClick(e)
               }}
-              className={cn(
-                'inline-flex h-7 items-center justify-center px-[var(--spacing-system-xs)] rounded-md',
-                'border border-ods-border bg-transparent text-h6 text-ods-text-primary',
-                'transition-colors hover:bg-ods-bg-hover hover:border-ods-text-secondary',
-                'focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent',
-              )}
             >
               {action.label}
-            </button>
+            </Button>
           ))}
         </div>
       ) : null}