@flamingo-stack/openframe-frontend-core 0.0.508 → 0.0.509

package/src/components/chat/__tests__/chat-message-streaming-memo.test.tsx

@@ -0,0 +1,207 @@
+/**
+ * REGRESSION: `ChatMessageEnhanced` must hand the markdown engine a
+ * REFERENTIALLY STABLE `componentOverrides` map across a streamed turn.
+ *
+ * The engine memoizes each COMPLETED block (`StreamingBlockRenderer`) on its
+ * `components` prop identity. `ChatMessageEnhanced` is the sole production
+ * caller, and it used to defeat that memo one level up: `cardComponentOverrides`
+ * listed `renderingPlan` in its deps, `renderingPlan` is memoized on `segments`,
+ * and the stream reducer replaces `segments` on EVERY text delta. So the
+ * override map got a new identity per token → the engine's `components` memo
+ * re-created → every completed block re-parsed on every token.
+ *
+ * The engine's own streaming test cannot catch this: it passes a module-scope
+ * stable override map. This test drives the real component with the real
+ * per-delta `content` churn a reducer produces, and asserts at the SEAM (the
+ * props the component hands the renderer) rather than through the engine's
+ * internals — the two are separately owned.
+ */
+
+import React from 'react'
+import { describe, it, expect, vi } from 'vitest'
+import { render } from '@testing-library/react'
+import type { MessageSegment } from '../types'
+import type { ChatRef } from '../chat-ref.types'
+
+/** Every `componentOverrides` / `additionalRemarkPlugins` identity the
+ *  component handed the markdown renderer, in render order. */
+const seenOverrides: unknown[] = []
+const seenPlugins: unknown[] = []
+
+vi.mock('../../ui/markdown/simple-markdown-renderer', () => ({
+  SimpleMarkdownRenderer: ({
+    content,
+    componentOverrides,
+    additionalRemarkPlugins,
+  }: {
+    content: string
+    componentOverrides?: unknown
+    additionalRemarkPlugins?: unknown
+  }) => {
+    seenOverrides.push(componentOverrides)
+    seenPlugins.push(additionalRemarkPlugins)
+    return <div data-testid="md">{content}</div>
+  },
+}))
+
+import { ChatMessageEnhanced } from '../chat-message-enhanced'
+
+function NavLinkAnchor({ href, children }: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+  return <a href={href}>{children}</a>
+}
+const CHAT_REFS: Record<string, ChatRef> = {}
+const renderMention = () => null
+
+/** Fresh array per call — the reducer replaces `segments` on every delta. */
+const segmentsFor = (tail: string): MessageSegment[] => [
+  { type: 'text', text: `First paragraph, already complete.\n\n${tail}` },
+]
+
+describe('ChatMessageEnhanced — override identity across a streamed turn', () => {
+  it('keeps componentOverrides + remark plugins referentially stable per token', () => {
+    seenOverrides.length = 0
+    seenPlugins.length = 0
+
+    const props = {
+      role: 'assistant' as const,
+      isTyping: true,
+      chatRefs: CHAT_REFS,
+      renderMention,
+      NavLinkAnchor,
+    }
+
+    const view = render(<ChatMessageEnhanced {...props} content={segmentsFor('Tail')} />)
+    expect(seenOverrides.length).toBeGreaterThan(0)
+    const firstOverrides = seenOverrides[0]
+    const firstPlugins = seenPlugins[0]
+    expect(firstOverrides).toBeTruthy()
+
+    let tail = 'Tail'
+    for (let i = 0; i < 10; i += 1) {
+      tail += ` token${i}`
+      view.rerender(<ChatMessageEnhanced {...props} content={segmentsFor(tail)} />)
+    }
+
+    // ONE identity for the whole turn. Before the fix this produced a fresh
+    // object on each of the 11 renders.
+    expect(new Set(seenOverrides).size).toBe(1)
+    expect(seenOverrides.every((o) => o === firstOverrides)).toBe(true)
+    expect(new Set(seenPlugins).size).toBe(1)
+    expect(seenPlugins.every((p) => p === firstPlugins)).toBe(true)
+
+    // Sanity: the tail really did stream through.
+    expect(view.container.textContent).toContain('token9')
+  })
+
+  it('still resolves card markers through the CURRENT plan (ref-read, not closure)', () => {
+    seenOverrides.length = 0
+    const refs: Record<string, ChatRef> = {
+      'blog:abc': { type: 'blog', id: 'abc', title: 'Resolved Title', url: null },
+    }
+    render(
+      <ChatMessageEnhanced
+        role="assistant"
+        content={[{ type: 'text', text: 'See [card://blog:abc] for more.' }]}
+        chatRefs={refs}
+        NavLinkAnchor={NavLinkAnchor}
+      />,
+    )
+    const overrides = seenOverrides[0] as { a: React.FC<{ href: string; children?: React.ReactNode }> }
+    const out = render(<>{overrides.a({ href: 'card://blog:abc', children: 'x' })}</>)
+    expect(out.container.textContent).toBe('Resolved Title')
+  })
+
+  /**
+   * REGRESSION (round 3): a ref that resolves AFTER the message finished
+   * streaming must still reach the pill. The override reads `chatRefs`
+   * through a ref, so its own closure is fine — but the markdown engine
+   * memoizes completed blocks on the override map's IDENTITY. With
+   * `chatRefs` excluded from the override memo's deps entirely, the map kept
+   * its old identity, the engine bailed, and the marker rendered its raw-id
+   * fallback permanently.
+   */
+  it('gives componentOverrides a NEW identity when the ref set grows (completed message)', () => {
+    seenOverrides.length = 0
+    const content: MessageSegment[] = [{ type: 'text', text: 'See [card://blog:late] for more.' }]
+    const emptyRefs: Record<string, ChatRef> = {}
+    const props = {
+      role: 'assistant' as const,
+      isTyping: false,
+      content,
+      NavLinkAnchor,
+    }
+
+    const view = render(<ChatMessageEnhanced {...props} chatRefs={emptyRefs} />)
+    const before = seenOverrides[seenOverrides.length - 1] as {
+      a: React.FC<{ href: string; children?: React.ReactNode }>
+    }
+    // Unresolved: the raw card id is surfaced so the breakage is visible.
+    expect(render(<>{before.a({ href: 'card://blog:late', children: 'x' })}</>).container.textContent)
+      .toBe('late')
+
+    // Same content, same everything — only the refs map gains the entry.
+    const resolvedRefs: Record<string, ChatRef> = {
+      'blog:late': { type: 'blog', id: 'late', title: 'Late Title', url: null },
+    }
+    view.rerender(<ChatMessageEnhanced {...props} chatRefs={resolvedRefs} />)
+
+    const after = seenOverrides[seenOverrides.length - 1] as {
+      a: React.FC<{ href: string; children?: React.ReactNode }>
+    }
+    expect(after).not.toBe(before)
+    expect(render(<>{after.a({ href: 'card://blog:late', children: 'x' })}</>).container.textContent)
+      .toBe('Late Title')
+  })
+
+  /**
+   * REGRESSION (round 5): a later refs frame REPLACES the map for a send index
+   * with the SAME key set but richer values — the `title` going from the raw
+   * cardId to the resolved document title is the exact production case. A
+   * key-set-only token produced an identical string, so the override map kept
+   * its identity, the engine's completed-block memo bailed, and the pill stayed
+   * on its fallback forever. The token fingerprints VALUES now.
+   */
+  it('gives componentOverrides a NEW identity when a ref VALUE is enriched (same key set)', () => {
+    seenOverrides.length = 0
+    const content: MessageSegment[] = [{ type: 'text', text: 'See [card://blog:abc].' }]
+    const props = { role: 'assistant' as const, isTyping: false, content, NavLinkAnchor }
+
+    // First frame: the ref exists but its title is still the raw card id.
+    const stub: Record<string, ChatRef> = {
+      'blog:abc': { type: 'blog', id: 'abc', title: 'abc', url: null },
+    }
+    const view = render(<ChatMessageEnhanced {...props} chatRefs={stub} />)
+    const before = seenOverrides[seenOverrides.length - 1] as {
+      a: React.FC<{ href: string; children?: React.ReactNode }>
+    }
+    expect(render(<>{before.a({ href: 'card://blog:abc', children: 'x' })}</>).container.textContent)
+      .toBe('abc')
+
+    // Second frame: SAME key set, enriched value.
+    const enriched: Record<string, ChatRef> = {
+      'blog:abc': { type: 'blog', id: 'abc', title: 'Resolved Document Title', url: null },
+    }
+    view.rerender(<ChatMessageEnhanced {...props} chatRefs={enriched} />)
+
+    const after = seenOverrides[seenOverrides.length - 1] as {
+      a: React.FC<{ href: string; children?: React.ReactNode }>
+    }
+    expect(after).not.toBe(before)
+    expect(render(<>{after.a({ href: 'card://blog:abc', children: 'x' })}</>).container.textContent)
+      .toBe('Resolved Document Title')
+  })
+
+  /** …but a same-KEY refs object (new identity, same entries) must NOT churn
+   *  the override map — that is the streaming-stability guarantee above. */
+  it('keeps the override identity when only the refs object identity changes', () => {
+    seenOverrides.length = 0
+    const content: MessageSegment[] = [{ type: 'text', text: 'See [card://blog:abc].' }]
+    const ref: ChatRef = { type: 'blog', id: 'abc', title: 'T', url: null }
+    const props = { role: 'assistant' as const, content, NavLinkAnchor }
+
+    const view = render(<ChatMessageEnhanced {...props} chatRefs={{ 'blog:abc': ref }} />)
+    view.rerender(<ChatMessageEnhanced {...props} chatRefs={{ 'blog:abc': ref }} />)
+
+    expect(new Set(seenOverrides).size).toBe(1)
+  })
+})

package/src/components/chat/__tests__/chat-pending-turn.test.tsx

@@ -0,0 +1,250 @@
+/**
+ * Pending-turn + hidden-row contracts.
+ *
+ * Two reader-visible defects this pins against:
+ *
+ *  1. Approving a tool call minted an author-label row with NO body
+ *     ("Michael Assraf:" then nothing). The approval decision is
+ *     out-of-band metadata, so the reducer must not materialize a user
+ *     row for it at all — fixing it at render would leave dead state.
+ *  2. While the model was thinking, the transcript showed a second,
+ *     empty "Mingo:" row ABOVE the footer progress indicator — two
+ *     owners for one pending turn, and an `aria-live` log announcing a
+ *     bare "Mingo". Exactly one affordance must be present.
+ *
+ * Plus the two idioms that must SURVIVE both fixes: a hidden row that
+ * carries real text (auto-continuation directive) stays in state while
+ * never rendering, and the SYSTEM name-only row still renders.
+ */
+
+import { render } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { createChatStreamReducer } from '../stream/chat-stream-reducer'
+import {
+  AUTO_CONTINUATION_DIRECTIVE_PREFIX,
+  buildAutoContinuationDirective,
+} from '../utils/auto-continuation-directive'
+import type { Message } from '../types/message.types'
+
+// ─── Render harness (mirrors chat-message-list.test.tsx) ────────────────────
+
+const scrollToBottom = vi.fn()
+const stopScroll = vi.fn()
+
+function makeRef() {
+  const fn = ((el: HTMLElement | null) => {
+    ;(fn as { current: HTMLElement | null }).current = el
+  }) as ((el: HTMLElement | null) => void) & { current: HTMLElement | null }
+  fn.current = null
+  return fn
+}
+
+vi.mock('use-stick-to-bottom', () => ({
+  useStickToBottom: () => ({
+    scrollRef: makeRef(),
+    contentRef: makeRef(),
+    scrollToBottom,
+    stopScroll,
+  }),
+}))
+
+// Row stub that renders the author label the way the real component does
+// (`Name:`), so "labeled row with no body" is directly assertable.
+vi.mock('../chat-message-enhanced', () => ({
+  ChatMessageEnhanced: ({ name, content }: { name?: string; content: unknown }) => (
+    <div data-testid="row">
+      <span data-testid="row-name">{name ?? ''}</span>
+      <span data-testid="row-body">
+        {typeof content === 'string'
+          ? content
+          : Array.isArray(content)
+            ? content
+                .map((s) => (s && (s as { type?: string }).type === 'text' ? (s as { text: string }).text : '[seg]'))
+                .join('')
+            : ''}
+      </span>
+    </div>
+  ),
+}))
+
+import { ChatMessageList } from '../chat-message-list'
+
+class ObserverStub {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+vi.stubGlobal('IntersectionObserver', ObserverStub)
+vi.stubGlobal('ResizeObserver', ObserverStub)
+
+const names = (c: HTMLElement) =>
+  Array.from(c.querySelectorAll('[data-testid="row-name"]')).map((n) => n.textContent)
+const bodies = (c: HTMLElement) =>
+  Array.from(c.querySelectorAll('[data-testid="row-body"]')).map((n) => n.textContent)
+
+// ─── State-level contracts ─────────────────────────────────────────────────
+
+describe('approval sends mint no visible user row', () => {
+  it('beginSseSend with empty text pushes only the assistant placeholder', () => {
+    const r = createChatStreamReducer({ transport: 'sse' })
+    // What `cardApprove` triggers: ('', { hidden: true, approvalAction }).
+    r.beginSseSend({ text: '', hidden: true, assistantName: 'Mingo AI' })
+
+    expect(r.state.messages).toHaveLength(1)
+    expect(r.state.messages[0].role).toBe('assistant')
+    expect(r.state.messages.some((m) => m.role === 'user')).toBe(false)
+    expect(r.state.streamingPhase).toBe('thinking')
+  })
+
+  it('pushOptimisticSend with empty text likewise mints no user row', () => {
+    const r = createChatStreamReducer({ transport: 'nats' })
+    r.pushOptimisticSend('', true)
+
+    expect(r.state.messages).toHaveLength(1)
+    expect(r.state.messages[0].role).toBe('assistant')
+  })
+
+  it('a normal send still mints the user row', () => {
+    const r = createChatStreamReducer({ transport: 'sse' })
+    r.beginSseSend({ text: 'hello', assistantName: 'Mingo AI' })
+
+    expect(r.state.messages).toHaveLength(2)
+    expect(r.state.messages[0]).toMatchObject({ role: 'user', content: 'hello' })
+    expect(r.state.messages[0].hidden).toBeUndefined()
+  })
+})
+
+describe('hidden rows that carry text', () => {
+  it('an auto-continuation directive IS state (the model sees it) but is flagged hidden', () => {
+    const directive = buildAutoContinuationDirective('create_ticket', { ticketId: '42' })
+    expect(directive.startsWith(AUTO_CONTINUATION_DIRECTIVE_PREFIX)).toBe(true)
+
+    const r = createChatStreamReducer({ transport: 'sse' })
+    r.beginSseSend({ text: directive, hidden: true, assistantName: 'Mingo AI' })
+
+    const userRow = r.state.messages.find((m) => m.role === 'user')
+    expect(userRow?.content).toBe(directive)
+    expect(userRow?.hidden).toBe(true)
+  })
+
+  it('never renders — the raw directive text must not reach the transcript', () => {
+    const directive = buildAutoContinuationDirective('create_ticket', { ticketId: '42' })
+    const messages: Message[] = [
+      { id: 'u1', role: 'user', name: 'Michael Assraf', content: 'my laptop is dead' },
+      { id: 'h1', role: 'user', name: 'Michael Assraf', content: directive, hidden: true },
+      { id: 'a1', role: 'assistant', name: 'Mingo', content: 'Opened a ticket.' },
+    ]
+    const { container } = render(<ChatMessageList dialogId="d" messages={messages} />)
+
+    expect(container.textContent).not.toContain(AUTO_CONTINUATION_DIRECTIVE_PREFIX)
+    expect(bodies(container)).toEqual(['my laptop is dead', 'Opened a ticket.'])
+  })
+})
+
+// ─── Render-level contracts ────────────────────────────────────────────────
+
+describe('a thinking turn has exactly ONE pending affordance', () => {
+  const pending: Message[] = [
+    { id: 'u1', role: 'user', name: 'Michael Assraf', content: 'what is broken?' },
+    // `Message` carries its body in `content` — there is no `segments` field on
+    // it (that is `UnifiedChatMessage`), and the render path never reads one.
+    // An empty `content` IS the empty pending turn.
+    { id: 'a1', role: 'assistant', name: 'Mingo', content: '' },
+  ]
+
+  it('does not render the empty labeled assistant row while typing', () => {
+    const { container } = render(
+      <ChatMessageList dialogId="d" messages={pending} isTyping />,
+    )
+    // The bare "Mingo" label must be gone from the transcript entirely —
+    // removed from the DOM, not visually hidden (the list is an aria-live
+    // log; a zero-height node would still be announced).
+    expect(names(container)).toEqual(['Michael Assraf'])
+    expect(bodies(container)).toEqual(['what is broken?'])
+    // …and the single remaining owner is the polite status indicator.
+    expect(container.querySelectorAll('[role="status"]')).toHaveLength(1)
+  })
+
+  it('renders the assistant row as soon as it carries text', () => {
+    const withText: Message[] = [
+      pending[0],
+      { id: 'a1', role: 'assistant', name: 'Mingo', content: [{ type: 'text', text: 'Chec' }] },
+    ]
+    const { container } = render(
+      <ChatMessageList dialogId="d" messages={withText} isTyping />,
+    )
+    expect(names(container)).toEqual(['Michael Assraf', 'Mingo'])
+  })
+
+  it('renders the assistant row when it carries a NON-text segment (tool call)', () => {
+    const withTool: Message[] = [
+      pending[0],
+      {
+        id: 'a1',
+        role: 'assistant',
+        name: 'Mingo',
+        // The REAL `ToolExecutionSegment` shape — `{ type, data }`, not flat
+        // fields. The previous fixture put `toolExecutionRequestId` / `status`
+        // at the top level and needed an `as` cast to compile at all (the cast
+        // was the tell: the two types did not overlap). It passed only because
+        // the empty-pending-turn predicate looks at segment TYPE; the moment it
+        // inspected `data`, this test would have kept passing while the real
+        // path broke.
+        content: [
+          {
+            type: 'tool_execution',
+            data: {
+              type: 'EXECUTING_TOOL',
+              integratedToolType: 'SHELL',
+              toolFunction: 'run_command',
+              toolTitle: 'Run command',
+              parameters: { cmd: 'ls' },
+              toolExecutionRequestId: 'e1',
+            },
+          },
+        ],
+      },
+    ]
+    const { container } = render(
+      <ChatMessageList dialogId="d" messages={withTool} isTyping />,
+    )
+    expect(names(container)).toEqual(['Michael Assraf', 'Mingo'])
+  })
+
+  it('renders the assistant row when it carries ONLY a guide segment', () => {
+    // A `guide` body is the whole visible answer for a how-to question. If
+    // the empty-pending-turn predicate ever counted it as "nothing visible"
+    // (e.g. by widening its text-only clause), a guide-only turn would render
+    // NOTHING until the turn ended — the footer loader would be the sole
+    // affordance while a fully-formed guide card sat in state.
+    const withGuide: Message[] = [
+      pending[0],
+      {
+        id: 'a1',
+        role: 'assistant',
+        name: 'Mingo',
+        content: [{ type: 'guide', text: '## Enroll a device' }],
+      },
+    ]
+    const { container } = render(
+      <ChatMessageList dialogId="d" messages={withGuide} isTyping />,
+    )
+    expect(names(container)).toEqual(['Michael Assraf', 'Mingo'])
+  })
+
+  it('renders a completed empty-ish assistant row when NOT typing', () => {
+    const { container } = render(<ChatMessageList dialogId="d" messages={pending} />)
+    expect(names(container)).toEqual(['Michael Assraf', 'Mingo'])
+  })
+})
+
+describe('the SYSTEM name-only row is a legitimate label-without-body', () => {
+  it('still renders', () => {
+    const messages: Message[] = [
+      { id: 'u1', role: 'user', name: 'Michael Assraf', content: 'hi' },
+      { id: 's1', role: 'user', name: 'Technician joined', content: '', authorType: 'system' },
+    ]
+    const { container } = render(<ChatMessageList dialogId="d" messages={messages} isTyping />)
+    expect(names(container)).toContain('Technician joined')
+  })
+})