@flamingo-stack/openframe-frontend-core 0.0.223 → 0.0.224

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

@@ -1,6 +1,6 @@
 "use client"
 
-import React, { forwardRef, memo, useMemo } from "react"
+import React, { forwardRef, memo, useMemo, useRef } from "react"
 import { cn } from "../../utils/cn"
 import { SquareAvatar } from "../ui/square-avatar"
 import { ToolExecutionDisplay } from "./tool-execution-display"
@@ -57,6 +57,19 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
 
     const segments = useMemo(() => normalizeContent(content), [content])
 
+    // Cross-render cache of rendered inline-card nodes, keyed by `type:id`.
+    // A fetch-mode card lives inside the assistant message, which re-renders on
+    // every stream chunk (and the whole list re-renders when a new message
+    // arrives). `renderEntityCard` produces a FRESH element each time, so React
+    // re-mounts the card — closing any open menu/popover and re-triggering its
+    // fetch. Caching the produced node by key and returning the SAME element
+    // reference lets React bail out of re-rendering that subtree, so the card
+    // (and its open menu) survives across chunks. Invalidated per key when the
+    // backing ref or the render fn identity changes.
+    const renderedCardNodeCache = useRef(
+      new Map<string, { refMatch: ChatRef | undefined; render: ((ref: ChatRef) => React.ReactNode) | undefined; node: React.ReactNode }>(),
+    )
+
     /**
      * Per-message rendering plan for `[card://type:id]` markers.
      *
@@ -94,7 +107,13 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
         | { kind: 'block'; key: string; node: React.ReactNode }
       const partsBySegment = new Map<number, SegmentPart[]>()
       if (!render) return { inlineByKey, partsBySegment }
-      const seenRendered = new Map<string, React.ReactNode>()
+      const cache = renderedCardNodeCache.current
+      const usedKeys = new Set<string>()
+      // Card keys already emitted as a hoisted block (`b-<key>`). The same
+      // marker can legitimately appear twice in one message (LLM references
+      // the same entity twice); we hoist the FIRST occurrence and skip the
+      // duplicates so two siblings never collide on the same React key.
+      const emittedBlockKeys = new Set<string>()
       segments.forEach((segment, segIdx) => {
         if (segment.type !== 'text') return
         const text = segment.text
@@ -106,11 +125,15 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
           const cardType = match[1]
           const cardId = match[2]
           const key = `${cardType}:${cardId}`
-          // Dedup renderEntityCard calls per unique key across the
-          // whole message — same key emitted twice (rare but possible)
-          // returns the cached node so React reuses the same instance.
-          let rendered = seenRendered.get(key)
-          if (!seenRendered.has(key)) {
+          usedKeys.add(key)
+          // Reuse the cached node when neither the backing ref nor the render
+          // fn changed — returning the SAME element reference across renders is
+          // what stops React from re-mounting the card (and closing its open
+          // menu / re-fetching) on every stream chunk. Also dedups the same key
+          // emitted twice within one message.
+          const refMatch = refs[key]
+          let entry = cache.get(key)
+          if (!entry || entry.refMatch !== refMatch || entry.render !== render) {
             // Always invoke render() — even when the metadata map has
             // no entry for this marker. Fetch-mode card types
             // (delivery_item, roadmap_item, internal_task, etc.) don't
@@ -129,25 +152,30 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
             // `ref.title` shows the id rather than `undefined`) and
             // `url` to null (matches the no-link semantics fetch-mode
             // cards rely on — they resolve their own URL after fetch).
-            const refMatch = refs[key]
             const refForRender: ChatRef = refMatch ?? {
               type: cardType,
               id: cardId,
               title: cardId,
               url: null,
             }
-            rendered = render(refForRender)
-            seenRendered.set(key, rendered)
+            entry = { refMatch, render, node: render(refForRender) }
+            cache.set(key, entry)
           }
+          const rendered = entry.node
           if (React.isValidElement(rendered) && rendered.type === BlockCard) {
             const props = rendered.props as BlockCardProps
             const markerEnd = match.index + match[0].length
             // Text chunk INCLUDING the marker — the inline pill renders
             // at the marker position via the `<a>` override.
             parts.push({ kind: 'text', text: text.slice(cursor, markerEnd) })
-            parts.push({ kind: 'block', key, node: props.children })
+            // Hoist the block payload only on the FIRST occurrence of this key
+            // — a repeated marker still gets its inline pill (text + override
+            // above) but must not push a second `b-<key>` sibling.
+            if (!emittedBlockKeys.has(key)) {
+              emittedBlockKeys.add(key)
+              parts.push({ kind: 'block', key, node: props.children })
+            }
             cursor = markerEnd
-            const refMatch = refs[key]
             inlineByKey.set(
               key,
               props.inline != null
@@ -155,8 +183,26 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
                 : <span className="text-ods-text-primary font-medium">{refMatch?.title ?? cardId}</span>,
             )
           } else if (rendered != null) {
-            // Inline-only — no split; remembered for the override.
-            inlineByKey.set(key, rendered)
+            // Hoist fetch-mode entity cards (roadmap/blog/case-study/release/…)
+            // OUT of the markdown as stable-keyed block siblings — exactly like
+            // BlockCard. Rendered INSIDE `<SimpleMarkdownRenderer>` they remount
+            // on every streaming re-parse (react-markdown rebuilds its subtree
+            // token-by-token), which closes any open menu/popover and re-fires
+            // the card's fetch. As a sibling keyed by the card key (`b-<key>`)
+            // the card survives streaming: appending more text/markers only adds
+            // NEW siblings, existing cards keep their React instance.
+            //
+            // We EXCLUDE the marker from the surrounding text (cursor jumps past
+            // it) so no inline pill renders — the full card IS the content.
+            // Hoist only the FIRST occurrence; a duplicate marker is dropped
+            // entirely (no inline pill for hoisted cards) so we never push a
+            // second sibling colliding on the same `b-<key>` React key.
+            parts.push({ kind: 'text', text: text.slice(cursor, match.index) })
+            if (!emittedBlockKeys.has(key)) {
+              emittedBlockKeys.add(key)
+              parts.push({ kind: 'block', key, node: rendered })
+            }
+            cursor = match.index + match[0].length
           }
         }
         // Trailing text after the last block marker (or the entire
@@ -172,6 +218,13 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
           partsBySegment.set(segIdx, parts)
         }
       })
+      // Drop cached nodes for markers no longer present so the cache can't
+      // grow unbounded as a long message's markers change.
+      if (cache.size > usedKeys.size) {
+        for (const k of cache.keys()) {
+          if (!usedKeys.has(k)) cache.delete(k)
+        }
+      }
       return { inlineByKey, partsBySegment }
     }, [hasMarkerSupport, chatRefs, renderEntityCard, segments])
 

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

@@ -934,10 +934,43 @@ 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',
         // Host-supplied per-message name/avatar win (e.g. the signed-in user's
@@ -949,13 +982,23 @@ function EmbeddableChatInner({
         // 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) => {
@@ -1254,12 +1297,7 @@ function EmbeddableChatInner({
                       isTyping={chatLoading}
                       autoScroll={true}
                       assistantType="mingo"
-                      assistantIcon={
-                        <MingoIcon
-                          className="h-6 w-6"
-                          cornerColor="var(--ods-flamingo-cyan-base)"
-                        />
-                      }
+                      assistantIcon={mingoAssistantIcon}
                       renderEntityCard={renderEntityCard}
                       NavLinkAnchor={NavLinkAnchorViaRuntime}
                       className="flex-1"

package/src/components/chat/hooks/use-chat-card-item.ts

@@ -21,6 +21,7 @@
 
 import { useQuery } from '@tanstack/react-query'
 import { useRequiredChatRuntime } from '../../../contexts/chat-runtime-context'
+import { embedAuthedFetch } from '../../../utils/embed-authed-fetch'
 
 export interface UseChatCardItemResult<T = unknown> {
   item: T | undefined
@@ -80,7 +81,13 @@ export function useChatCardItem<T = unknown>(
     queryKey: ['chat-card-item', type, id],
     queryFn: async (): Promise<T | null> => {
       if (!url) return null
-      const res = await fetch(url)
+      // Go through `embedAuthedFetch` (NOT bare `fetch`) so the request
+      // rides the same auth path as the chat stream/commands: it consults
+      // the host-registered `EmbedAuthAdapter` (cookie `credentials:'include'`
+      // cross-origin, dev-ticket Bearer, 401 refresh-and-retry). Bare `fetch`
+      // sent no credentials, so list endpoints behind the gateway returned
+      // 401 and the card rendered blank.
+      const res = await embedAuthedFetch(url)
       if (!res.ok) return null
       const data = await res.json()
       const items = extractItems(data)
@@ -93,6 +100,15 @@ export function useChatCardItem<T = unknown>(
     // user toggles back to the tab is wasteful (the row's id-keyed
     // payload is effectively immutable).
     refetchOnWindowFocus: false,
+    // The id-keyed payload is effectively immutable, and a fetch-mode card
+    // inside a STREAMING assistant message re-mounts on every chunk as the
+    // surrounding markdown re-parses. Without a staleTime that meant a fresh
+    // network fetch + loading-skeleton flash on every single chunk. Treat the
+    // row as fresh for 5 min (matches the public pages) and keep it cached
+    // long after unmount so remounts resolve synchronously from cache — no
+    // refetch, no skeleton flash.
+    staleTime: 5 * 60 * 1000,
+    gcTime: 30 * 60 * 1000,
   })
   return {
     item: (query.data ?? undefined) as T | undefined,

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

@@ -134,27 +134,39 @@ export function useUnifiedChat(
       ? sseState
       : (mingoStateOverride ?? natsState)
 
+  // Live ref to the active state. The injected `mingoState` (and the SSE/NATS
+  // adapters) hand back a NEW state object on EVERY streaming chunk
+  // (`messages`/`streamingPhase`/`tokenUsage` change), so binding the forwards
+  // below to `[activeState]` would recreate them each chunk. That churn
+  // cascades into consumers' memo deps — most visibly `renderEntityCard` in
+  // `embeddable-chat`, whose new identity defeats `ChatMessageEnhanced`'s memo
+  // and re-renders (re-mounts inline cards on) every message each chunk.
+  // Reading through the ref keeps the forwards referentially STABLE while
+  // still calling the latest active state.
+  const activeStateRef = useRef(activeState)
+  activeStateRef.current = activeState
+
   // Re-wrap so the returned identity is stable for the active state.
   // Consumers shouldn't see the inactive adapter's state at all.
-  const stopMessage = useCallback(() => activeState.stopMessage(), [activeState])
+  const stopMessage = useCallback(() => activeStateRef.current.stopMessage(), [])
   const clearMessages = useCallback(
-    () => activeState.clearMessages(),
-    [activeState],
+    () => activeStateRef.current.clearMessages(),
+    [],
   )
   const sendMessage = useCallback(
     (text: string, opts?: Parameters<UnifiedChatState['sendMessage']>[1]) =>
-      activeState.sendMessage(text, opts),
-    [activeState],
+      activeStateRef.current.sendMessage(text, opts),
+    [],
   )
   const discussRef = useCallback(
     (ref: Parameters<UnifiedChatState['discussRef']>[0]) =>
-      activeState.discussRef(ref),
-    [activeState],
+      activeStateRef.current.discussRef(ref),
+    [],
   )
   const displayRef = useCallback(
     (ref: Parameters<UnifiedChatState['displayRef']>[0]) =>
-      activeState.displayRef(ref),
-    [activeState],
+      activeStateRef.current.displayRef(ref),
+    [],
   )
 
   // Dialog-management forwards — one thin wrapper per action so the
@@ -162,45 +174,45 @@ export function useUnifiedChat(
   // identity does. We don't recreate per-call to avoid spurious child
   // re-renders downstream.
   const selectDialog = useCallback(
-    (id: string | null) => activeState.selectDialog(id),
-    [activeState],
+    (id: string | null) => activeStateRef.current.selectDialog(id),
+    [],
   )
   const startNewDialog = useCallback(
-    () => activeState.startNewDialog(),
-    [activeState],
+    () => activeStateRef.current.startNewDialog(),
+    [],
   )
   const deleteDialog = useCallback(
-    (id: string) => activeState.deleteDialog(id),
-    [activeState],
+    (id: string) => activeStateRef.current.deleteDialog(id),
+    [],
   )
   const renameDialog = useCallback(
-    (id: string, title: string) => activeState.renameDialog(id, title),
-    [activeState],
+    (id: string, title: string) => activeStateRef.current.renameDialog(id, title),
+    [],
   )
   const archiveDialog = useCallback(
-    (id: string) => activeState.archiveDialog(id),
-    [activeState],
+    (id: string) => activeStateRef.current.archiveDialog(id),
+    [],
   )
   const loadMoreDialogs = useCallback(
-    () => activeState.loadMoreDialogs(),
-    [activeState],
+    () => activeStateRef.current.loadMoreDialogs(),
+    [],
   )
   const reloadDialogs = useCallback(
-    () => activeState.reloadDialogs(),
-    [activeState],
+    () => activeStateRef.current.reloadDialogs(),
+    [],
   )
   const loadMoreMessages = useCallback(
-    () => activeState.loadMoreMessages(),
-    [activeState],
+    () => activeStateRef.current.loadMoreMessages(),
+    [],
   )
   const approveRequest = useCallback(
-    (requestId: string) => activeState.approveRequest(requestId),
-    [activeState],
+    (requestId: string) => activeStateRef.current.approveRequest(requestId),
+    [],
   )
   const rejectRequest = useCallback(
     (requestId: string, reason?: string) =>
-      activeState.rejectRequest(requestId, reason),
-    [activeState],
+      activeStateRef.current.rejectRequest(requestId, reason),
+    [],
   )
 
   return useMemo<UnifiedChatState>(

package/src/components/chat/types/unified-chat-state.types.ts

@@ -143,6 +143,17 @@ export interface UnifiedChatMessage {
   content: string
   segments?: MessageSegment[]
 
+  /**
+   * Optional host-supplied message timestamp (creation/send time). Rendered
+   * as the message-row time and, critically, fed into the memoized message's
+   * equality check. Hosts SHOULD pass a stable value (the message's real
+   * `createdAt`) — when omitted the panel stamps a stable per-id fallback so
+   * memoization still holds. Never re-derive this as "now" per render: a
+   * moving clock defeats memoization and re-renders every message (collapsing
+   * open menus/cards) on each realtime chunk.
+   */
+  timestamp?: Date | string | number
+
   /** Guide/SSE-only: document citations. Undefined in Mingo mode. */
   sources?: ChatSource[]
 

package/src/components/navigation/app-layout-drawer.tsx

@@ -339,12 +339,12 @@ function AppLayoutDrawerResizeHandle({
 
   const trackPosition =
     side === "right"
-      ? "right-full top-4 bottom-4 w-12 items-center justify-end pr-1"
+      ? "right-full top-4 bottom-4 w-6 items-center justify-end pr-1"
       : side === "left"
-        ? "left-full top-4 bottom-4 w-12 items-center justify-start pl-1"
+        ? "left-full top-4 bottom-4 w-6 items-center justify-start pl-1"
         : side === "bottom"
-          ? "bottom-full left-4 right-4 h-12 justify-center items-end pb-1"
-          : "top-full left-4 right-4 h-12 justify-center items-start pt-1"
+          ? "bottom-full left-4 right-4 h-6 justify-center items-end pb-1"
+          : "top-full left-4 right-4 h-6 justify-center items-start pt-1"
 
   const cursorClass = isHorizontal ? "cursor-col-resize" : "cursor-row-resize"
   const gripClass = isHorizontal ? "h-10 w-1" : "w-10 h-1"

package/src/components/ui/simple-markdown-renderer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState, useRef, useMemo, useCallback } from 'react';
+import React, { useEffect, useState, useRef, useMemo, useCallback, memo } from 'react';
 import ReactMarkdown, { type Components, defaultUrlTransform } from 'react-markdown';
 import type { PluggableList } from 'unified';
 import remarkGfm from 'remark-gfm';
@@ -583,7 +583,7 @@ export interface SimpleMarkdownRendererProps {
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export const SimpleMarkdownRenderer: React.FC<SimpleMarkdownRendererProps> = ({
+const SimpleMarkdownRendererImpl: React.FC<SimpleMarkdownRendererProps> = ({
   content,
   className = "",
   sectionIds,
@@ -947,3 +947,13 @@ export const SimpleMarkdownRenderer: React.FC<SimpleMarkdownRendererProps> = ({
     </div>
   );
 };
+
+/**
+ * Memoized so a parent re-render with UNCHANGED props (same `content` string,
+ * same memoized `componentOverrides`/plugins) does NOT re-parse the markdown.
+ * Re-parsing rebuilds the entire react-markdown subtree, which RE-MOUNTS any
+ * embedded inline entity cards — closing their open menus and re-triggering
+ * their fetch on every chat re-render (streaming chunk AND scroll). With
+ * stable props the renderer bails, so completed messages' cards stay mounted.
+ */
+export const SimpleMarkdownRenderer = memo(SimpleMarkdownRendererImpl);