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

package/src/components/chat/chat-archive-page.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import * as React from 'react'
+import { Chevron02LeftIcon } from '../icons-v2-generated'
+import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon'
+import { ChatHeaderIconButton } from './chat-header-icon-button'
+import { MingoChatHistory } from './mingo-chat-history'
+import type { DialogItem } from './types/component.types'
+
+export interface ChatArchivePageProps {
+  /** Archived dialogs, grouped (Today / Yesterday / Older) by the list. */
+  dialogs: ReadonlyArray<DialogItem>
+  /** Open an archived dialog. */
+  onSelectDialog: (id: string) => void
+  /** Back chevron — returns to the previous (list) view. */
+  onBack: () => void
+  /** Close the whole chat panel. */
+  onClose: () => void
+  /** True while a page is loading (drives the empty/loading copy + spinner). */
+  isLoading?: boolean
+  /** Whether another page of archived dialogs remains. */
+  hasMore?: boolean
+  /** Fetch the next page. */
+  onLoadMore?: () => void
+}
+
+/**
+ * Chat Archive page — Figma node `7361:427312`. Back + title + close header
+ * over the date-grouped archived-dialog list (reuses `MingoChatHistory`
+ * without the row action menus).
+ */
+export function ChatArchivePage({
+  dialogs,
+  onSelectDialog,
+  onBack,
+  onClose,
+  isLoading = false,
+  hasMore = false,
+  onLoadMore,
+}: ChatArchivePageProps) {
+  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">
+          <button
+            type="button"
+            onClick={onBack}
+            aria-label="Back"
+            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"
+          >
+            <Chevron02LeftIcon size={20} />
+          </button>
+          <span className="truncate text-h3 text-ods-text-primary">
+            Chat Archive
+          </span>
+        </div>
+        <ChatHeaderIconButton onClick={onClose} aria-label="Close">
+          <XmarkIcon size={24} />
+        </ChatHeaderIconButton>
+      </div>
+      <div className="flex flex-1 min-h-0 flex-col p-[var(--spacing-system-m)]">
+        {dialogs.length > 0 ? (
+          <MingoChatHistory
+            dialogs={dialogs}
+            onSelectDialog={onSelectDialog}
+            hasMore={hasMore}
+            isLoadingMore={isLoading && dialogs.length > 0}
+            onLoadMore={onLoadMore}
+          />
+        ) : isLoading ? (
+          // First-load skeleton — `h-12` rows matching the dialog-list layout
+          // so results land without a shift (auth → data → empty → content).
+          <div className="flex flex-col" aria-hidden>
+            {[...Array(6)].map((_, i) => (
+              <div
+                key={i}
+                className="flex h-12 items-center gap-[var(--spacing-system-xsf)] border-b border-ods-border px-[var(--spacing-system-s)] last:border-b-0"
+              >
+                <div className="h-4 w-full max-w-[60%] animate-pulse rounded bg-ods-bg-secondary" />
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="flex flex-1 items-center justify-center text-center">
+            <p className="text-h4 text-ods-text-secondary">
+              No archived chats yet.
+            </p>
+          </div>
+        )}
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,99 @@
+'use client'
+
+import * as React from 'react'
+import { ChatFooter } from './chat-container'
+import { ChatInput } from './chat-input'
+import { ChatAttachmentAddButton } from './chat-attachment-bar'
+import { ModelDisplay } from './model-display'
+import { BoxArchiveIcon } from '../icons-v2-generated'
+import type { ChatInputRef, ModelDisplayProps } from './types/component.types'
+
+export interface ChatComposerProps {
+  /** Read-only archived chat → render the unarchive placeholder instead of the
+   *  input (Figma node 7361:426949). */
+  archived?: boolean
+  inputRef: React.Ref<ChatInputRef>
+  onSend: (text: string) => void
+  onStop: () => void
+  sending: boolean
+  placeholder: string
+  autoFocus?: boolean
+  slashCommands?: React.ComponentProps<typeof ChatInput>['slashCommands']
+  /** Show the (Guide-only) attachment add button to the left of the model row. */
+  showAttachmentButton?: boolean
+  attachmentsCount?: number
+  onAddFiles?: (files: FileList | File[]) => void
+  attachmentsDisabled?: boolean
+  /** Model + usage row props, forwarded to `<ModelDisplay>`. */
+  model: ModelDisplayProps
+}
+
+/**
+ * Chat panel footer (Figma node 7363:205952): the message composer (live
+ * `ChatInput` or the read-only archived placeholder) above the model/usage
+ * row. No own background — inherits the panel surface so it blends seamlessly.
+ */
+export function ChatComposer({
+  archived = false,
+  inputRef,
+  onSend,
+  onStop,
+  sending,
+  placeholder,
+  autoFocus,
+  slashCommands,
+  showAttachmentButton = false,
+  attachmentsCount = 0,
+  onAddFiles,
+  attachmentsDisabled = false,
+  model,
+}: ChatComposerProps) {
+  return (
+    <div
+      className="flex-shrink-0 px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)] flex flex-col gap-[var(--spacing-system-xxs)]"
+      style={{ paddingBottom: 'max(1rem, env(safe-area-inset-bottom))' }}
+    >
+      <ChatFooter className="!p-0" fullWidth>
+        {archived ? (
+          <div className="flex w-full items-center justify-center gap-[var(--spacing-system-xs)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-sf)]">
+            <BoxArchiveIcon size={24} className="shrink-0 text-ods-text-secondary" />
+            <p className="truncate text-h4 text-ods-text-secondary">
+              Unarchive the chat to continue
+            </p>
+          </div>
+        ) : (
+          <ChatInput
+            ref={inputRef}
+            onSend={onSend}
+            onStop={onStop}
+            sending={sending}
+            placeholder={placeholder}
+            fullWidth
+            className="px-0"
+            reserveAvatarOffset={false}
+            autoFocus={autoFocus}
+            slashCommands={slashCommands}
+          />
+        )}
+      </ChatFooter>
+
+      <div className="flex items-center gap-2 w-full">
+        {showAttachmentButton && onAddFiles && (
+          // Attachments are Guide-only: the NATS agent backend doesn't accept
+          // them, so the add-button is hidden in Mingo mode. Skipping the
+          // render entirely (not just the icon) collapses the otherwise-
+          // invisible 28px placeholder slot the component leaves for layout.
+          <ChatAttachmentAddButton
+            attachmentsEnabled
+            attachmentsCount={attachmentsCount}
+            onAddFiles={onAddFiles}
+            disabled={attachmentsDisabled}
+          />
+        )}
+        <div className="flex-1 min-w-0">
+          <ModelDisplay {...model} />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/chat/chat-header-icon-button.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../utils/cn'
+
+export interface ChatHeaderIconButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+/**
+ * Square 56×56 icon cell used in the chat panel's top-navigation
+ * (archive / restore / close, and the `⋯` menu trigger). A left border acts
+ * as the 1px divider between cells.
+ *
+ * On hover only the background changes (`ods-bg-hover`) — the icon keeps its
+ * `ods-text-secondary` colour. `forwardRef` + prop spread so it works as a
+ * Radix `asChild` trigger.
+ */
+export const ChatHeaderIconButton = React.forwardRef<
+  HTMLButtonElement,
+  ChatHeaderIconButtonProps
+>(({ className, children, type = 'button', ...props }, ref) => (
+  <button
+    ref={ref}
+    type={type}
+    className={cn(
+      'flex size-14 shrink-0 items-center justify-center border-l border-ods-border',
+      'text-ods-text-secondary transition-colors hover:bg-ods-bg-hover',
+      'focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </button>
+))
+ChatHeaderIconButton.displayName = 'ChatHeaderIconButton'

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

@@ -0,0 +1,114 @@
+'use client'
+
+import * as React from 'react'
+import { Chevron01LeftIcon } from '../icons-v2-generated/arrows/chevron-01-left-icon'
+import {
+  Ellipsis01Icon,
+  ClockHistoryIcon,
+  Refresh01LeftIcon,
+} 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'
+
+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
+  /** Accessible label for the back chevron. */
+  backAriaLabel?: string
+  /** The open conversation is an archived chat (read-only). */
+  isArchivedView?: boolean
+  /** Back-chevron handler. */
+  onBack: () => void
+  /** Close the panel. */
+  onClose: () => void
+  /** Restore/unarchive — renders the refresh button (archived view only). */
+  onRestore?: () => void
+  /** Rename — adds the "Rename chat" item to the ⋯ menu. */
+  onRename?: () => void
+  /** Archive — adds the "Archive chat" item to the ⋯ menu. */
+  onArchive?: () => void
+  /** Open the Chat Archive page — renders the clock button (list view only). */
+  onOpenArchive?: () => void
+}
+
+/**
+ * Chat panel top-navigation (Figma node 7363:205930). One bar across the
+ * list / active-conversation / archived-conversation / guide views: a
+ * back-chevron + title (or the static list title), then state-dependent
+ * right-hand actions (restore, ⋯ rename/archive, archive entry) and close.
+ */
+export function ChatPanelHeader({
+  showBack = false,
+  title,
+  backAriaLabel = 'Back',
+  isArchivedView = false,
+  onBack,
+  onClose,
+  onRestore,
+  onRename,
+  onArchive,
+  onOpenArchive,
+}: ChatPanelHeaderProps) {
+  const menuItems = [
+    onRename && { label: 'Rename chat', onClick: onRename },
+    onArchive && { label: 'Archive chat', onClick: onArchive },
+  ].filter(Boolean) as { label: string; onClick: () => void }[]
+
+  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>
+        )}
+      </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 && (
+        <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>
+      )}
+
+      <ChatHeaderIconButton onClick={onClose} aria-label="Close">
+        <XmarkIcon size={24} />
+      </ChatHeaderIconButton>
+    </div>
+  )
+}