@flamingo-stack/openframe-frontend-core 0.0.222 → 0.0.223-snapshot.20260604201541

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>
+  )
+}

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

@@ -56,6 +56,7 @@ import { ChatComposer } from './chat-composer'
 import { useChatDialogManager } from './hooks/use-chat-dialog-manager'
 import { ChatDialogModals } from './mingo-chat-modals'
 import { ChatMessageList } from './chat-message-list'
+import { ChatMessageListSkeleton } from './chat-message-skeleton'
 import { SourceActionButton } from './source-action-button'
 import { NavLinkAnchorViaRuntime } from './nav-link-anchor-via-runtime'
 import { ChatAttachmentChipStrip } from './chat-attachment-bar'
@@ -70,6 +71,7 @@ import {
   type ChatMode,
   type UseUnifiedChatModes,
 } from './hooks/use-unified-chat'
+import type { UnifiedChatState } from './types/unified-chat-state.types'
 import type {
   UseNatsChatAdapterConfig,
   FetchDialogsParams,
@@ -79,7 +81,7 @@ import { useChatAttachments } from './hooks/use-chat-attachments'
 import { useChatAttachmentImageGallery } from './hooks/use-chat-attachment-image-gallery'
 import { useChatIdentity } from './hooks/use-chat-identity'
 import { useCloseOnNavigation } from './hooks/use-close-on-navigation'
-import { fetchSlashCommands, type SlashCommandSummary } from './hooks/use-slash-commands'
+import { fetchSlashCommands, useSlashCommandRegistry, type SlashCommandSummary } from './hooks/use-slash-commands'
 
 import type { ChatRef } from './chat-ref.types'
 import type { ChatInputRef, SlashCommandActionId } from './types/component.types'
@@ -162,6 +164,35 @@ export interface EmbeddableChatProps {
    */
   modes?: UseUnifiedChatModes
 
+  /**
+   * Pre-built Mingo-mode state, supplied by the host instead of letting the
+   * built-in NATS adapter own it. When provided, the panel renders Mingo mode
+   * from this object and opens no subscription of its own — the host keeps
+   * chat data + streaming in its own store/cache so it survives the panel
+   * unmounting (no `keepMounted` needed). The host should then NOT pass
+   * `modes.mingo` (Guide-mode wiring via `modes.guide` is unaffected).
+   */
+  mingoState?: UnifiedChatState
+
+  /**
+   * Dialog-management capabilities for injected Mingo mode (`mingoState`).
+   *
+   * When the host injects `mingoState`, it doesn't pass `modes.mingo` (that
+   * would re-activate the idle built-in adapter), so the rename/archive/
+   * restore/archive-page affordances can't read their capability flags off the
+   * callback config. Supply them here instead. `canRename`/`canArchive` default
+   * to `true` when `mingoState` is set; the archive page + restore are shown
+   * only when their callbacks are provided. Ignored unless `mingoState` is set.
+   */
+  mingoDialogCapabilities?: {
+    canRename?: boolean
+    canArchive?: boolean
+    fetchArchivedDialogs?: (
+      params: FetchDialogsParams,
+    ) => Promise<FetchDialogsResult>
+    unarchiveDialog?: (id: string) => Promise<void>
+  }
+
   /**
    * Controlled active-mode. When provided, `onActiveModeChange` MUST
    * also be provided. For uncontrolled use see `defaultActiveMode`.
@@ -605,6 +636,8 @@ function EmbeddableChatInner({
   extras,
   tableIdForDocumentType,
   modes,
+  mingoState,
+  mingoDialogCapabilities,
   activeMode: controlledActiveMode,
   onActiveModeChange,
   defaultActiveMode,
@@ -698,35 +731,9 @@ function EmbeddableChatInner({
   // Imperative handle to the chat input.
   const chatInputRef = useRef<ChatInputRef | null>(null)
 
-  // Async lookup of the slash-command registry for the current source.
-  const [commandsById, setCommandsById] = useState<Map<string, SlashCommandSummary>>(
-    () => new Map(),
-  )
-  const [commandsLoaded, setCommandsLoaded] = useState(false)
-  useEffect(() => {
-    if (!isOpen) return
-    let cancelled = false
-    const ctrl = new AbortController()
-    setCommandsLoaded(false)
-    fetchSlashCommands('', ctrl.signal, commandsUrl)
-      .then((commands) => {
-        if (cancelled) return
-        const map = new Map<string, SlashCommandSummary>()
-        for (const cmd of commands) map.set(cmd.id, cmd)
-        setCommandsById(map)
-        setCommandsLoaded(true)
-      })
-      .catch((err) => {
-        if (!cancelled && (err as Error)?.name !== 'AbortError') {
-          console.warn('[embeddable-chat] failed to fetch slash commands:', err)
-          setCommandsLoaded(true)
-        }
-      })
-    return () => {
-      cancelled = true
-      ctrl.abort()
-    }
-  }, [isOpen, source, commandsUrl])
+  // The slash-command registry (Guide onboarding cards) is loaded via
+  // react-query below, after `activeMode` is resolved — gated on Guide mode and
+  // cached across remounts. See `commandsById` / `commandsLoaded`.
 
   // Slash-command autocomplete config — passed to <ChatInput>.
   const slashCommandsProp = useMemo(
@@ -774,6 +781,36 @@ function EmbeddableChatInner({
     return { guide: guideOptions }
   }, [modes, tableIdForDocumentType])
 
+  // Resolve dialog-management capabilities (rename / archive / archive-page /
+  // restore) from a single source. With injected `mingoState` they come from
+  // `mingoDialogCapabilities` (the host doesn't pass `modes.mingo`); otherwise
+  // from the callback-config shape, where the presence of a callback IS the
+  // capability. Both feed the same gating below so the JSX has one source.
+  const mingoCaps = useMemo(() => {
+    if (mingoState) {
+      // Default OFF: the row ⋯ menu (Rename / Archive) and the archive page are
+      // shown only when the host explicitly opts in — same capability-gating as
+      // the archive button (`fetchArchivedDialogs` presence). Otherwise the menu
+      // would advertise actions the host hasn't actually wired (no-ops).
+      return {
+        canRename: mingoDialogCapabilities?.canRename ?? false,
+        canArchive: mingoDialogCapabilities?.canArchive ?? false,
+        fetchArchivedDialogs: mingoDialogCapabilities?.fetchArchivedDialogs,
+        unarchiveDialog: mingoDialogCapabilities?.unarchiveDialog,
+      }
+    }
+    return {
+      canRename: !!effectiveModes.mingo?.renameDialog,
+      canArchive: !!effectiveModes.mingo?.archiveDialog,
+      fetchArchivedDialogs: effectiveModes.mingo?.fetchArchivedDialogs,
+      unarchiveDialog: effectiveModes.mingo?.unarchiveDialog,
+    }
+  }, [mingoState, mingoDialogCapabilities, effectiveModes])
+
+  // "Does Mingo mode exist?" — true via either the callback config OR injected
+  // state. Gates the guide↔mingo back-chevron and the guide-mode banner.
+  const hasMingoMode = !!effectiveModes.mingo || !!mingoState
+
   // Initial active mode picks the first configured slot when neither
   // controlled `activeMode` nor `defaultActiveMode` is provided. Guide
   // wins ties so legacy callers see no behaviour change.
@@ -795,6 +832,22 @@ function EmbeddableChatInner({
     [controlledActiveMode, onActiveModeChange],
   )
 
+  // Slash-command registry (Guide onboarding cards) via the shared
+  // `useSlashCommandRegistry` react-query hook:
+  //   - `enabled: activeMode === 'guide'` → never fetched in Mingo mode, so
+  //     opening the default Mingo panel doesn't hit the commands endpoint.
+  //   - Shares one cache entry (keyed on `commandsUrl`) with the SSE adapter's
+  //     `displayRef` lookup, so Guide mode fetches `commands` ONCE, not twice.
+  //   - Cached with `staleTime/gcTime: Infinity` inside the hook, so toggling
+  //     to Guide or reopening the (remounting) drawer reads from cache.
+  const { commands: commandsList, loaded: commandsLoaded } =
+    useSlashCommandRegistry(commandsUrl, { enabled: activeMode === 'guide' })
+  const commandsById = useMemo(() => {
+    const map = new Map<string, SlashCommandSummary>()
+    for (const cmd of commandsList) map.set(cmd.id, cmd)
+    return map
+  }, [commandsList])
+
   const {
     messages: rawMessages,
     isLoading: chatLoading,
@@ -817,9 +870,12 @@ function EmbeddableChatInner({
     renameDialog,
     archiveDialog,
     isDialogsLoading,
+    dialogsError,
+    reloadDialogs,
+    isMessagesLoading,
     hasMoreDialogs,
     loadMoreDialogs,
-  } = useUnifiedChat({ modes: effectiveModes, activeMode })
+  } = useUnifiedChat({ modes: effectiveModes, activeMode, mingoStateOverride: mingoState })
 
   // Chat-attachment hooks (v2 attachment feature).
   const {
@@ -878,21 +934,71 @@ function EmbeddableChatInner({
     [discussRef, displayRef, resolvedBaseRoute, chipBasePlatform, extras],
   )
 
+  // Stable assistant-icon element. `<ChatMessageList>` forwards this prop to
+  // every assistant `<ChatMessageEnhanced>`, whose memo compares it BY
+  // REFERENCE. Created inline in JSX it was a fresh element on every render,
+  // defeating the memo for all assistant messages (re-rendering completed
+  // bubbles — and re-mounting their inline cards — on every realtime chunk).
+  const mingoAssistantIcon = useMemo(
+    () => <MingoIcon className="h-6 w-6" cornerColor="var(--ods-flamingo-cyan-base)" />,
+    [],
+  )
+
+  // Stable per-message timestamps. The memoized `<ChatMessageEnhanced>`
+  // compares `timestamp.getTime()`, so we must NOT stamp `new Date()` fresh
+  // on each render: a moving clock makes every message's timestamp differ
+  // between renders, defeating memoization and forcing the WHOLE list (and
+  // every open menu/card inside it) to re-render on every realtime chunk.
+  // Prefer the host's real timestamp; otherwise stamp once per id and reuse
+  // it (keeps the displayed time stable and lets memoization hold even when
+  // the host omits a timestamp).
+  const timestampCacheRef = useRef<Map<string, Date>>(new Map())
+
   // Map docMessages → lib's Message type, forwarding chatRefs + scrollAnchor.
-  const messages: Message[] = useMemo(
-    () =>
-      rawMessages.map((m) => ({
+  const messages: Message[] = useMemo(() => {
+    const cache = timestampCacheRef.current
+    const seenIds = new Set<string>()
+
+    const mapped = rawMessages.map((m) => {
+      seenIds.add(m.id)
+      let timestamp: Date
+      if (m.timestamp != null) {
+        timestamp = new Date(m.timestamp)
+      } else {
+        const cached = cache.get(m.id)
+        timestamp = cached ?? new Date()
+        if (!cached) cache.set(m.id, timestamp)
+      }
+
+      return {
         id: m.id,
         role: m.role as 'user' | 'assistant',
-        name: m.role === 'assistant' ? 'Mingo AI' : 'You',
+        // Host-supplied per-message name/avatar win (e.g. the signed-in user's
+        // full name + photo on a `user` bubble); fall back to the role default
+        // when the host doesn't provide them.
+        name: m.name ?? (m.role === 'assistant' ? 'Mingo' : 'You'),
+        avatar: m.avatar ?? null,
+        // Forward the host's authorType so user bubbles get the same accent
+        // name color as the standalone /mingo page (user → 'admin').
+        ...(m.authorType ? { authorType: m.authorType } : {}),
         content: m.segments && m.segments.length > 0 ? m.segments : m.content,
-        timestamp: new Date(),
+        timestamp,
         assistantType: m.role === 'assistant' ? ('mingo' as const) : undefined,
         ...(m.chatRefs ? { chatRefs: m.chatRefs } : {}),
         ...(m.scrollAnchor ? { scrollAnchor: m.scrollAnchor } : {}),
-      })),
-    [rawMessages],
-  )
+      }
+    })
+
+    // Drop cached fallbacks for messages no longer present so the map can't
+    // grow unbounded across a long-lived session.
+    if (cache.size > seenIds.size) {
+      for (const id of cache.keys()) {
+        if (!seenIds.has(id)) cache.delete(id)
+      }
+    }
+
+    return mapped
+  }, [rawMessages])
 
   const handleSend = useCallback(
     (text: string) => {
@@ -951,8 +1057,8 @@ function EmbeddableChatInner({
     clearMessages,
     renameDialog,
     archiveDialog,
-    fetchArchivedDialogs: effectiveModes.mingo?.fetchArchivedDialogs,
-    unarchiveDialog: effectiveModes.mingo?.unarchiveDialog,
+    fetchArchivedDialogs: mingoCaps.fetchArchivedDialogs,
+    unarchiveDialog: mingoCaps.unarchiveDialog,
   })
 
   const handleOpen = useCallback(() => setIsOpen(true), [setIsOpen])
@@ -983,12 +1089,24 @@ function EmbeddableChatInner({
   }, [source, discussRef, setIsOpen])
 
   const hasMessages = messages.length > 0
+  // First dialog page in flight and nothing cached yet — we don't yet know if
+  // the user is new or returning, so the Mingo empty state shows a skeleton
+  // rather than flashing the new-user greeting+grid before the list lands.
+  const dialogsInitialLoading = isDialogsLoading && dialogs.length === 0
+  // Dialog list failed to load (e.g. backend down) and we have nothing cached.
+  // Distinct from "no chats" so the Mingo empty state can offer a retry instead
+  // of the new-user greeting (which misleadingly advertises Guide).
+  const dialogsLoadError = dialogsError && dialogs.length === 0
   // A conversation is "open" the instant a chat is selected (`isOpeningDialog` /
   // `isViewingArchived` are set synchronously on click) — not only once its
   // history has loaded (`hasMessages`). Driving the surface + content branch
   // off this makes the normal-chat open animate identically to the archived
   // one instead of lagging behind the message fetch.
   const hasConversation = hasMessages || isOpeningDialog || isViewingArchived
+  // Opening a dialog whose history hasn't arrived yet — show a message-list
+  // skeleton instead of an empty thread so the open reads as "loading" rather
+  // than a blank flash before the bubbles stream in.
+  const messagesInitialLoading = isMessagesLoading && !hasMessages
   // Keys the content region so each distinct view (open conversation, Mingo
   // welcome, Guide onboarding) remounts on switch → fades in for 200ms, the
   // same feel as the surface flip. Switching dialogs stays "conversation" so
@@ -999,7 +1117,7 @@ function EmbeddableChatInner({
   const isGuideEmpty = !hasConversation && activeMode === 'guide'
   // The guide-empty back-chevron returns to Mingo — only offer it when Mingo
   // mode actually exists to return to (guide is normally entered from Mingo).
-  const guideCanReturnToMingo = isGuideEmpty && !!effectiveModes.mingo
+  const guideCanReturnToMingo = isGuideEmpty && hasMingoMode
   const sourceLabel = source === 'flamingo' ? 'Knowledge Base' : 'Data Room'
 
   // Empty-state chip grid — derived directly from the fetched slash commands.
@@ -1127,12 +1245,12 @@ function EmbeddableChatInner({
                     : undefined
                 }
                 onRename={
-                  activeDialogId && activeDialog && effectiveModes.mingo?.renameDialog
+                  activeDialogId && activeDialog && mingoCaps.canRename
                     ? () => setRenameTarget(activeDialog)
                     : undefined
                 }
                 onArchive={
-                  activeDialogId && activeDialog && effectiveModes.mingo?.archiveDialog
+                  activeDialogId && activeDialog && mingoCaps.canArchive
                     ? () => setArchiveTarget(activeDialog)
                     : undefined
                 }
@@ -1144,7 +1262,7 @@ function EmbeddableChatInner({
                   Guide mode is active AND the default (Mingo) mode also exists:
                   the banner contrasts the temporary Guide session against the
                   default chat, so it's meaningless in a guide-only setup. */}
-              {activeMode === 'guide' && !!effectiveModes.mingo && (
+              {activeMode === 'guide' && hasMingoMode && (
                 <GuideModeBanner className="animate-in fade-in-0 duration-200" />
               )}
 
@@ -1164,17 +1282,33 @@ function EmbeddableChatInner({
                 >
                 {hasConversation ? (
                   <div className="flex-1 flex flex-col min-h-0">
+                    {messagesInitialLoading ? (
+                      // Match the real list's `fullWidth` layout so swapping
+                      // skeleton → bubbles doesn't shift the column. The panel
+                      // wrapper above already pads (`p-[var(--spacing-system-m)]`),
+                      // so the skeleton sits flush (no inner px/pb).
+                      <ChatMessageListSkeleton
+                        fullWidth
+                        className="flex-1"
+                      />
+                    ) : (
                     <ChatMessageList
                       messages={messages}
                       isTyping={chatLoading}
                       autoScroll={true}
                       assistantType="mingo"
-                      assistantIcon={<MingoIcon className="h-4 w-4" color="white" />}
+                      assistantIcon={mingoAssistantIcon}
                       renderEntityCard={renderEntityCard}
                       NavLinkAnchor={NavLinkAnchorViaRuntime}
                       className="flex-1"
+                      // No inner `px`/`pb`: the panel wrapper already pads with
+                      // `p-[var(--spacing-system-m)]`. The default content class
+                      // adds `px-[var(--spacing-system-m)]` + `pb-…xs`, which
+                      // double-inset the thread; `pb-0` overrides via twMerge.
+                      contentClassName="max-w-none pb-0"
                       fullWidth
                     />
+                    )}
                     {lastSources &&
                       (lastSources.cited.length > 0 ||
                         lastSources.uncited.length > 0) &&
@@ -1207,20 +1341,19 @@ function EmbeddableChatInner({
                     // Derived internally (returning-user variation) — placed
                     // after the spread so it can't be overridden by the prop.
                     hasExistingChats={dialogs.length > 0}
+                    isLoadingHistory={dialogsInitialLoading}
+                    loadError={dialogsLoadError}
+                    onRetry={reloadDialogs}
                     dialogHistory={
                       dialogs.length > 0 ? (
                         <MingoChatHistory
                           dialogs={dialogs}
                           onSelectDialog={handleSelectDialog}
                           onRequestRename={
-                            effectiveModes.mingo?.renameDialog
-                              ? setRenameTarget
-                              : undefined
+                            mingoCaps.canRename ? setRenameTarget : undefined
                           }
                           onRequestArchive={
-                            effectiveModes.mingo?.archiveDialog
-                              ? setArchiveTarget
-                              : undefined
+                            mingoCaps.canArchive ? setArchiveTarget : undefined
                           }
                           hasMore={hasMoreDialogs}
                           isLoadingMore={isDialogsLoading && dialogs.length > 0}