@flamingo-stack/openframe-frontend-core 0.0.172 → 0.0.173-snapshot.20260513212448

package/src/components/chat/chat-message-list.tsx

@@ -1,10 +1,12 @@
 "use client"
 
-import { useRef, useEffect, useLayoutEffect, useImperativeHandle, forwardRef } from "react"
+import { useRef, useState, useEffect, useLayoutEffect, useImperativeHandle, forwardRef } from "react"
 import { useStickToBottom } from "use-stick-to-bottom"
 import { cn } from "../../utils/cn"
 import { ChatMessageEnhanced } from "./chat-message-enhanced"
-import { ChatMessageListSkeleton } from "./chat-message-skeleton"
+import { ChatMessageListLoader } from "./chat-message-loader"
+import { useDelayedFlag } from "./hooks/use-delayed-flag"
+import { PulseDots } from "../ui/pulse-dots"
 import type { ChatMessageListProps } from "./types"
 
 /*
@@ -64,17 +66,27 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
     // `resize: 'smooth'` — during streaming, content grows token-by-
     // token; library uses spring physics to follow the bottom for a
     // ChatGPT/Claude.ai-like feel (vs jarring instant snaps).
-    // `initial: false` — DON'T auto-scroll on mount; our dialog-change
-    // effect below owns first-paint positioning so re-opening a chat
-    // with prior history lands at the bottom without a smooth-scroll
-    // animation playing over the cold-paint.
+    // `initial: 'instant'` — snap to bottom on first mount BEFORE
+    // browser paint. Without this, a page reload that lands on a long
+    // history would briefly paint the top of the list (oldest msgs)
+    // before any post-paint effect could run `scrollTop = bottom`. The
+    // library writes scrollTop in the commit phase, so the first paint
+    // is already at the bottom.
     const { scrollRef, contentRef, scrollToBottom } = useStickToBottom({
       resize: 'smooth',
-      initial: false,
+      initial: 'instant',
     })
 
     // ---- Prepend / load-more state (NOT owned by the library) --------
-    const sentinelRef = useRef<HTMLDivElement>(null)
+    // `scrollEl` and `sentinelEl` are STATE, not refs, so the load-more
+    // effect re-runs when either element mounts/unmounts. This is the
+    // critical fix for the reload pagination bug: when the loader is
+    // showing, the scroll container is unmounted (`scrollRef.current ==
+    // null`); when the loader disappears later, neither `hasNextPage`
+    // nor `messages.length` changes — but `scrollEl` flips from null to
+    // the new element, which re-runs the effect.
+    const [scrollEl, setScrollEl] = useState<HTMLDivElement | null>(null)
+    const [sentinelEl, setSentinelEl] = useState<HTMLDivElement | null>(null)
     const onLoadMoreRef = useRef(onLoadMore)
     onLoadMoreRef.current = onLoadMore
     const isFetchingRef = useRef(isFetchingNextPage)
@@ -100,8 +112,20 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
     }>({ firstMessageId: undefined, firstMessageContent: undefined, scrollHeight: 0 })
 
     // ---- Force-stick: dialog change / first-load / new user message --
-    useEffect(() => {
-      if (!autoScroll) return
+    // `useLayoutEffect` so the scrollTop write lands BEFORE browser
+    // paint — otherwise a dialog switch with prior history flashes the
+    // top of the list (oldest msgs) for one frame before snapping down.
+    //
+    // Critical: gate on `scrollEl` (state, not ref). When `useDelayedFlag`
+    // is showing the loader, the scroll container is UNMOUNTED. If we
+    // ran the snap-logic during the loader phase, `scrollToBottom` would
+    // no-op AND `prevRenderRef` would record the new dialog/count — so
+    // when the loader finally hides and the container remounts, we'd
+    // think "no dialog change" and never snap. By depending on
+    // `scrollEl`, this effect re-runs the moment the container mounts
+    // and catches up on any transition that happened during the loader.
+    useLayoutEffect(() => {
+      if (!autoScroll || !scrollEl) return
 
       const dialogChanged = dialogId !== prevRenderRef.current.dialogId
       const prevCount = prevRenderRef.current.messageCount
@@ -135,7 +159,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
         // already keeps the bottom locked when the user hasn't
         // escaped. No explicit call needed; spring animation runs.
       }
-    }, [autoScroll, messages, dialogId, scrollToBottom])
+    }, [autoScroll, messages, dialogId, scrollToBottom, scrollEl])
 
     // ---- Prepend anchoring (load-older) ------------------------------
     // The library doesn't preserve user position when content prepends
@@ -144,7 +168,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
     // user on the same message they were reading. `useLayoutEffect`
     // so the scrollTop write lands before paint (no visible jump).
     useLayoutEffect(() => {
-      const el = scrollRef.current
+      const el = scrollEl
       if (!el) {
         prependRef.current = { firstMessageId: undefined, firstMessageContent: undefined, scrollHeight: 0 }
         return
@@ -180,43 +204,70 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
       if (currentFirstContent !== prependRef.current.firstMessageContent) {
         prependRef.current.firstMessageContent = currentFirstContent
       }
-    }, [messages, scrollRef])
+    }, [messages, scrollEl])
 
     // ---- Load-more (infinite-scroll UP) ------------------------------
-    // Distinct from stick-to-bottom; uses its own IntersectionObserver
-    // on the top sentinel.
+    // Distinct from stick-to-bottom. Two mechanisms in parallel:
+    //  1. IntersectionObserver on the top sentinel — cheap, fires when
+    //     the sentinel actually enters the viewport (± rootMargin).
+    //  2. Scroll-listener fallback (200px from top) — covers the race
+    //     where IO mounts before the sentinel/scroll container has its
+    //     final geometry on page reload, and the case where the user
+    //     reaches the top on a chat that initially had `hasNextPage`
+    //     undefined (cache cold). Both call `onLoadMoreRef.current` and
+    //     guard with `isFetchingRef` so a double-fire is a single fetch.
+    // Deps include `messages.length` so the effect re-binds once content
+    // actually renders (fixes the case where the first commit has
+    // hasNextPage=true but sentinel ref isn't yet attached).
     useEffect(() => {
-      const scrollContainer = scrollRef.current
-      const sentinelElement = sentinelRef.current
-      if (!scrollContainer || !sentinelElement || !hasNextPage) return
+      const scrollContainer = scrollEl
+      const sentinelElement = sentinelEl
+      if (!scrollContainer || !hasNextPage) return
 
-      const observer = new IntersectionObserver(
-        (entries) => {
-          const entry = entries[0]
-          if (!entry) return
-          if (entry.isIntersecting && !isFetchingRef.current) {
-            onLoadMoreRef.current?.()
-          }
-        },
-        { root: scrollContainer, rootMargin: '200px', threshold: 0.1 },
-      )
-      observer.observe(sentinelElement)
-      return () => observer.disconnect()
-    }, [hasNextPage, scrollRef])
+      const tryLoad = () => {
+        if (isFetchingRef.current) return
+        onLoadMoreRef.current?.()
+      }
+
+      let observer: IntersectionObserver | undefined
+      if (sentinelElement) {
+        observer = new IntersectionObserver(
+          (entries) => {
+            const entry = entries[0]
+            if (entry?.isIntersecting) tryLoad()
+          },
+          { root: scrollContainer, rootMargin: '200px', threshold: 0.1 },
+        )
+        observer.observe(sentinelElement)
+      }
+
+      const onScroll = () => {
+        if (scrollContainer.scrollTop <= 200) tryLoad()
+      }
+      scrollContainer.addEventListener('scroll', onScroll, { passive: true })
+
+      return () => {
+        observer?.disconnect()
+        scrollContainer.removeEventListener('scroll', onScroll)
+      }
+    }, [hasNextPage, scrollEl, sentinelEl, messages.length])
 
     // Expose the scroll container ref to parents that need it (rare,
     // but the existing public contract). Library's `scrollRef` is a
     // MutableRefObject<HTMLElement> so we cast to the public type.
     useImperativeHandle(ref, () => scrollRef.current as HTMLDivElement, [scrollRef])
 
-    if (isLoading) {
+    // Gate the loader: only show after 200ms (fast loads never flicker),
+    // and once shown, hold for at least 400ms (no sub-frame flash if data
+    // arrives a moment later).
+    const showLoader = useDelayedFlag(isLoading, { delay: 200, minDuration: 400 })
+
+    if (showLoader) {
       return (
-        <ChatMessageListSkeleton
+        <ChatMessageListLoader
           className={className}
-          showAvatars={showAvatars}
+          assistantIcon={assistantIcon}
           assistantType={assistantType}
-          contentClassName={contentClassName}
-          messageCount={6}
         />
       )
     }
@@ -238,6 +289,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
     // the cleanup return path in any meaningful way for the public hook.
     const setScrollRef = (el: HTMLDivElement | null): void => {
       scrollRef(el)
+      setScrollEl(el)
     }
     const setContentRef = (el: HTMLDivElement | null): void => {
       contentRef(el)
@@ -262,8 +314,19 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
             )}
             style={{ minHeight: '100%' }}
           >
+            {/* Infinite scroll sentinel + loader for older pages */}
             {hasNextPage && (
-              <div ref={sentinelRef} className="h-px" />
+              <div ref={setSentinelEl} className="h-px" />
+            )}
+            {isFetchingNextPage && (
+              <div
+                className="flex justify-center py-3 animate-in fade-in duration-200"
+                role="status"
+                aria-live="polite"
+                aria-busy="true"
+              >
+                <PulseDots size="sm" />
+              </div>
             )}
             <div className="flex-1" />
             {messages.map((message, index) => (

package/src/components/chat/chat-message-loader.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import type { ReactNode } from "react"
+
+import { cn } from "../../utils/cn"
+import { MingoIcon } from "../icons/mingo-icon"
+
+interface ChatMessageListLoaderProps {
+  className?: string
+  /**
+   * Brand mark rendered at the centre of the loader. When omitted, a neutral
+   * MingoIcon is used (color derived from `assistantType`). Pass a custom
+   * element to match a different brand.
+   */
+  assistantIcon?: ReactNode
+  assistantType?: 'mingo' | 'fae'
+  /** Defaults to `"Loading conversation..."`. */
+  label?: string
+}
+
+/**
+ * Centered loading indicator for the chat message list. Replaces the
+ * multi-row skeleton with a single, brand-neutral pulsating mark — the same
+ * pattern Claude/ChatGPT use when fetching a conversation: don't fake the
+ * shape of the content, just signal "we're working on it" and let the real
+ * messages fade in once they arrive.
+ */
+export function ChatMessageListLoader({
+  className,
+  assistantIcon,
+  assistantType = 'fae',
+  label = 'Loading conversation...',
+}: ChatMessageListLoaderProps) {
+  const accentColor =
+    assistantType === 'mingo'
+      ? 'var(--ods-flamingo-cyan-base)'
+      : 'var(--ods-flamingo-pink-base)'
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      aria-busy="true"
+      className={cn(
+        "relative flex-1 min-h-0 flex flex-col items-center justify-center gap-3 px-8",
+        "animate-in fade-in duration-300",
+        className,
+      )}
+    >
+      <div className="relative flex items-center justify-center w-10 h-10">
+        <span
+          className="absolute inset-0 rounded-full opacity-30 blur-md animate-pulse"
+          style={{ backgroundColor: accentColor }}
+          aria-hidden="true"
+        />
+        <div className="relative motion-safe:animate-pulse">
+          {assistantIcon ?? (
+            <MingoIcon className="w-8 h-8" eyesColor={accentColor} cornerColor={accentColor} />
+          )}
+        </div>
+      </div>
+      <span className="text-sm font-medium text-ods-text-secondary tracking-tight motion-safe:animate-pulse">
+        {label}
+      </span>
+    </div>
+  )
+}

package/src/components/chat/hooks/index.ts

@@ -2,5 +2,6 @@
 
 export * from './use-chunk-catchup'
 export * from './use-collapsible'
+export * from './use-delayed-flag'
 export * from './use-nats-dialog-subscription'
 export * from './use-realtime-chunk-processor'

package/src/components/chat/hooks/use-collapsible.ts

@@ -35,9 +35,18 @@ export function useCollapsible({
     return () => observer.disconnect()
   }, [element, collapsedHeight])
 
+  // When the caller asks for `"1lh"`, fall back to a measured pixel value
+  // (inner element's line-height) as soon as it's available. Setting
+  // `max-height: 1lh` via CSS resolves against the OUTER element's
+  // line-height, which can differ from the inner content's line-height and
+  // leak the top of the next block element past the clip line. The measured
+  // pixel value matches the inner content exactly.
+  const collapsedValue: number | string =
+    collapsedHeight === "1lh" ? collapsedPx || collapsedHeight : collapsedHeight
+
   const containerStyle: CSSProperties = {
     overflow: "hidden",
-    maxHeight: expanded ? contentHeight : collapsedHeight,
+    maxHeight: expanded ? contentHeight : collapsedValue,
     transition: disableTransition ? "none" : `max-height ${durationMs}ms ease-in-out`,
   }
 

package/src/components/chat/hooks/use-delayed-flag.ts

@@ -0,0 +1,56 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+
+interface UseDelayedFlagOptions {
+  /** Wait this long before flipping the returned flag to `true`. Default 200ms. */
+  delay?: number
+  /**
+   * Once the flag has gone `true`, hold it for at least this long even if
+   * the source signal flips back to `false` sooner. Prevents a sub-frame
+   * flash when the operation finishes right after the loader appeared.
+   * Default 400ms.
+   */
+  minDuration?: number
+}
+
+/**
+ * Debounce + min-hold gate for transient boolean flags (most useful for
+ * loading indicators).
+ *
+ *  - source `true`  → wait `delay` ms; if still true, flip output to `true`
+ *  - source `false` → if output is `true`, hold for `minDuration - elapsed`
+ *    ms before flipping back; otherwise flip immediately
+ *
+ * The net effect: fast operations never trigger the indicator, and slow
+ * ones always show it for long enough to avoid a flicker.
+ */
+export function useDelayedFlag(
+  source: boolean,
+  { delay = 200, minDuration = 400 }: UseDelayedFlagOptions = {},
+): boolean {
+  const [active, setActive] = useState(false)
+  const activatedAtRef = useRef<number | null>(null)
+
+  useEffect(() => {
+    if (source) {
+      if (active) return
+      const timer = window.setTimeout(() => {
+        activatedAtRef.current = Date.now()
+        setActive(true)
+      }, delay)
+      return () => window.clearTimeout(timer)
+    }
+
+    if (!active) return
+    const elapsed = activatedAtRef.current ? Date.now() - activatedAtRef.current : minDuration
+    const remaining = Math.max(0, minDuration - elapsed)
+    const timer = window.setTimeout(() => {
+      activatedAtRef.current = null
+      setActive(false)
+    }, remaining)
+    return () => window.clearTimeout(timer)
+  }, [source, active, delay, minDuration])
+
+  return active
+}

package/src/components/chat/hooks/use-realtime-chunk-processor.ts

@@ -12,7 +12,8 @@ import {
   createMessageSegmentAccumulator,
 } from '../utils/message-segment-accumulator'
 import { MESSAGE_TYPE } from '../types'
-import type { UseRealtimeChunkProcessorReturn, UseRealtimeChunkProcessorOptions, ChatApprovalStatus } from '../types'
+import type { UseRealtimeChunkProcessorReturn, UseRealtimeChunkProcessorOptions, ChatApprovalStatus, PendingToolCallData } from '../types'
+import { getCommandText } from '../utils/tool-call-helpers'
 
 /**
  * Hook for processing real-time NATS chunks into message segments
@@ -20,7 +21,17 @@ import type { UseRealtimeChunkProcessorReturn, UseRealtimeChunkProcessorOptions,
 export function useRealtimeChunkProcessor(
   options: UseRealtimeChunkProcessorOptions
 ): UseRealtimeChunkProcessorReturn {
-  const { callbacks, displayApprovalTypes = ['CLIENT'], approvalStatuses = {}, initialState, enableThinking = false } = options
+  const {
+    callbacks,
+    displayApprovalTypes = ['CLIENT'],
+    approvalStatuses = {},
+    initialState,
+    enableThinking = false,
+    // Owned by the consumer (e.g. oss-tenant chat client / openframe-frontend
+    // tickets view). Default ON so consumers that haven't wired the flag yet
+    // get the new batch UI; pass `false` explicitly to fall back to legacy.
+    batchApprovalsEnabled = true,
+  } = options
 
   const accumulatorRef = useRef<MessageSegmentAccumulator>(
     createMessageSegmentAccumulator({
@@ -50,10 +61,10 @@ export function useRealtimeChunkProcessor(
 
   const isInStreamRef = useRef(false)
 
-  // Track pending escalated approvals
-  const pendingEscalatedRef = useRef<Map<string, { command: string; explanation?: string; approvalType: string }>>(
-    new Map()
-  )
+  // Track pending escalated approvals (single or batch)
+  const pendingEscalatedRef = useRef<
+    Map<string, { command: string; explanation?: string; approvalType: string; toolCalls?: PendingToolCallData[] }>
+  >(new Map())
 
   const processChunk = useCallback(
     (chunk: unknown) => {
@@ -128,28 +139,106 @@ export function useRealtimeChunkProcessor(
           break
         }
 
+        case 'approval_batch': {
+          const { requestId, approvalType, toolCalls } = action
+          const status = (approvalStatuses[requestId] || 'pending') as ChatApprovalStatus
+
+          if (!displayApprovalTypes.includes(approvalType)) {
+            // Escalated: keep batch context locally for replay on result; surface a
+            // summary command via the legacy escalation callback.
+            const required = toolCalls.find((c) => c.requiresApproval) ?? toolCalls[0]
+            const summary = required ? getCommandText(required) : `Batch of ${toolCalls.length} tool calls`
+            pendingEscalatedRef.current.set(requestId, {
+              command: summary,
+              explanation: required?.toolExplanation,
+              approvalType,
+              toolCalls,
+            })
+            callbacks.onEscalatedApproval?.(requestId, {
+              command: summary,
+              explanation: required?.toolExplanation,
+              approvalType,
+            })
+            break
+          }
+
+          if (batchApprovalsEnabled) {
+            const segments = accumulator.addApprovalBatch(requestId, approvalType, toolCalls, status)
+            callbacks.onSegmentsUpdate?.(segments)
+            break
+          }
+
+          // Flag OFF — unfold batch into N legacy approval cards. They share
+          // `requestId`, so a click on any will approve the whole batch via a
+          // single backend call, and the resulting APPROVAL_RESULT chunk will
+          // flip status on every matching segment (see updateApprovalStatus).
+          let segments = accumulator.getSegments()
+          for (const call of toolCalls) {
+            if (!call.requiresApproval) continue
+            segments = accumulator.addApprovalRequest(
+              requestId,
+              getCommandText(call),
+              call.toolExplanation,
+              approvalType,
+              status,
+            )
+          }
+          callbacks.onSegmentsUpdate?.(segments)
+          break
+        }
+
         case 'approval_result': {
           const { requestId, approved, approvalType } = action
           const escalatedData = pendingEscalatedRef.current.get(requestId)
+          const status: ChatApprovalStatus = approved ? 'approved' : 'rejected'
+
           if (escalatedData) {
             pendingEscalatedRef.current.delete(requestId)
-            callbacks.onEscalatedApprovalResult?.(requestId, approved, escalatedData)
-
-            const segments = accumulator.addApprovalRequest(
-              requestId,
-              escalatedData.command,
-              escalatedData.explanation,
-              escalatedData.approvalType,
-              approved ? 'approved' : 'rejected'
-            )
-            callbacks.onSegmentsUpdate?.(segments)
+            callbacks.onEscalatedApprovalResult?.(requestId, approved, {
+              command: escalatedData.command,
+              explanation: escalatedData.explanation,
+              approvalType: escalatedData.approvalType,
+            })
+
+            if (escalatedData.toolCalls && escalatedData.toolCalls.length > 0) {
+              if (batchApprovalsEnabled) {
+                const segments = accumulator.addApprovalBatch(
+                  requestId,
+                  escalatedData.approvalType,
+                  escalatedData.toolCalls,
+                  status,
+                )
+                callbacks.onSegmentsUpdate?.(segments)
+              } else {
+                let segments = accumulator.getSegments()
+                for (const call of escalatedData.toolCalls) {
+                  if (!call.requiresApproval) continue
+                  segments = accumulator.addApprovalRequest(
+                    requestId,
+                    getCommandText(call),
+                    call.toolExplanation,
+                    escalatedData.approvalType,
+                    status,
+                  )
+                }
+                callbacks.onSegmentsUpdate?.(segments)
+              }
+            } else {
+              const segments = accumulator.addApprovalRequest(
+                requestId,
+                escalatedData.command,
+                escalatedData.explanation,
+                escalatedData.approvalType,
+                status,
+              )
+              callbacks.onSegmentsUpdate?.(segments)
+            }
           } else {
-            const segments = accumulator.updateApprovalStatus(
-              requestId,
-              approved ? 'approved' : 'rejected'
-            )
+            const segments = accumulator.updateApprovalStatus(requestId, status)
             callbacks.onSegmentsUpdate?.(segments)
           }
+          // approvalType from the result is informational; not consumed downstream yet.
+          void approvalType
           break
         }
 

package/src/components/chat/index.ts

@@ -2,6 +2,7 @@
 
 // Chat components exports
 export * from './approval-request-message'
+export * from './approval-batch-message'
 export * from './context-compaction-display'
 export * from './expand-chevron'
 export * from './thinking-display'
@@ -11,11 +12,13 @@ export * from './chat-input'
 export * from './slash-command-suggestions'
 export * from './chat-message-enhanced'
 export * from './chat-message-list'
+export * from './chat-message-loader'
 export * from './chat-quick-action'
 export * from './chat-ticket-item'
 export * from './chat-ticket-list'
 export * from './chat-typing-indicator'
 export * from './tool-execution-display'
+export * from './tool-call-blocks'
 export * from './model-display'
 export * from './chat-sidebar'
 export type { ChatRef } from './chat-ref.types'