@djangocfg/ui-tools 2.1.395 → 2.1.397

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.395",
+  "version": "2.1.397",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -154,8 +154,8 @@
     "test:watch": "vitest"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.395",
-    "@djangocfg/ui-core": "^2.1.395",
+    "@djangocfg/i18n": "^2.1.397",
+    "@djangocfg/ui-core": "^2.1.397",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -209,9 +209,9 @@
     "material-file-icons": "^2.4.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.395",
-    "@djangocfg/typescript-config": "^2.1.395",
-    "@djangocfg/ui-core": "^2.1.395",
+    "@djangocfg/i18n": "^2.1.397",
+    "@djangocfg/typescript-config": "^2.1.397",
+    "@djangocfg/ui-core": "^2.1.397",
     "@types/lodash-es": "^4.17.12",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",

package/src/tools/Chat/README.md

@@ -715,13 +715,32 @@ Stories live next to components — open `@djangocfg/playground`:
 | `composerAttachmentTray` | Above composer textarea | `renderAttachmentTray({ attachments })` |
 | `jumpToLatest` | Sticky overlay | `renderJumpToLatest({ unread, scrollToBottom })` |
 | `renderToolCall` | Per tool-call panel | `(call) => ReactNode` |
-| `renderAfterCalls` | After all tool panels | `(calls) => ReactNode` (rich UI like vehicle cards) |
+| `renderAfterCalls` | After all tool panels | `(calls) => ReactNode` — **only renders when the message has tool calls** |
+| `renderAfterMessage` | Below every assistant bubble | `(message) => ReactNode` — fires for every message, independent of `toolCalls` |
 
 Flags:
 
 - `hideComposer` — agent-pause / human-in-the-loop pause; composer is unmounted.
 - `hideToolCalls` — show only `renderAfterCalls` rich UI without raw tool panels.
 
+### Which slot for product widgets — `renderAfterCalls` vs `renderAfterMessage`?
+
+Both put custom content under the assistant bubble; the difference is **what triggers them**.
+
+- `renderAfterCalls` is gated on `message.toolCalls?.length > 0`. Use it when the widget is **derived from raw tool output** (read `call.output`) and you can rely on the host streaming the `tool_call` / `tool_result` SSE frames. Admin / dev flows typically work this way.
+- `renderAfterMessage` fires **for every message**, regardless of `toolCalls`. Use it when the widget is driven by a side channel — e.g. typed `ui_payload` SSE frames the host emits independently of the raw tool surface. This is the correct slot when the public-prod stream **hides** `tool_call` events for security: the message lands with `toolCalls === undefined`, so `renderAfterCalls` would never mount, but `renderAfterMessage` still runs and the widget renders from the side channel.
+
+Recommended pairing for a "vehicle cards" / "tax breakdown" / "chart" widget on a public chat:
+
+```tsx
+<ChatRoot
+  transport={transport}
+  renderAfterMessage={(m) => <VehicleCardsForMessage messageId={m.id} />}
+/>
+```
+
+`VehicleCardsForMessage` subscribes to your `ui_payload` event bus (filtering by `m.id`) and returns `null` when there's nothing to show. Streaming-safe: the renderer is called for streaming messages too, so progressive UI (skeletons that fill in as payloads arrive) works as expected.
+
 ## Hotkeys
 
 - `Enter` — send (or `Cmd+Enter` if `prefs.submitOn = 'cmd+enter'`).

package/src/tools/Chat/components/ChatRoot.tsx

@@ -68,6 +68,14 @@ export interface ChatRootProps {
   // ---- render-prop slots (need access to data) --------------------------
   /** Replace `<MessageBubble>` per message. */
   renderMessage?: (m: ChatMessage, i: number) => ReactNode;
+  /**
+   * Render arbitrary content beneath every default `<MessageBubble>`
+   * (not invoked when `renderMessage` is set — the host owns layout
+   * in that case). Useful for product widgets driven by a side channel
+   * (e.g. `ui_payload` SSE frames) where the widget is per-message but
+   * not tied to the bubble's tool-calls array.
+   */
+  renderAfterMessage?: (m: ChatMessage) => ReactNode;
   /** Render the header lazily — receives the chat context. */
   renderHeader?: (ctx: ChatContextValue) => ReactNode;
   /** Render the empty-state lazily — receives a `setValue` to seed the composer. */
@@ -202,6 +210,7 @@ function ChatRootShell({ className, listClassName, slots }: ChatRootShellProps)
         toolCallsProps={slots.toolCallsProps}
         attachmentRenderers={slots.attachmentRenderers}
         onAttachmentOpen={slots.onAttachmentOpen}
+        renderAfterMessage={slots.renderAfterMessage}
         onCopy={() => copy(m.content)}
         onRegenerate={() => void chat.regenerate(m.id)}
         onDelete={() => chat.deleteMessage(m.id)}

package/src/tools/Chat/components/MessageBubble.tsx

@@ -79,6 +79,21 @@ export interface MessageBubbleProps {
    * you need different behaviour per slot.
    */
   streamingIndicator?: (m: ChatMessage) => ReactNode;
+  /**
+   * Render arbitrary content beneath the message body, regardless of
+   * whether the message carries tool calls. Used for product widgets
+   * that ride a side channel (e.g. `ui_payload` SSE frames driving
+   * vehicle cards, tax tables, charts) and therefore can't piggy-back
+   * on the `toolCallsRenderer` slot — the latter is gated on the
+   * message having a non-empty `toolCalls` array, which doesn't hold
+   * when raw tool events are hidden from public clients.
+   *
+   * Receives the message so the host can scope the widget by id /
+   * role / timing. Renders even on streaming messages, so progressive
+   * UI hints (skeletons that fill in as payloads arrive) work as
+   * expected.
+   */
+  renderAfterMessage?: (m: ChatMessage) => ReactNode;
 }
 
 const MessageBubbleInner = ({
@@ -107,6 +122,7 @@ const MessageBubbleInner = ({
   onDelete,
   messageActionsExtra,
   streamingIndicator,
+  renderAfterMessage,
 }: MessageBubbleProps) => {
   const isUser = isUserProp ?? message.role === 'user';
   const isStreaming = !!message.isStreaming;
@@ -208,6 +224,8 @@ const MessageBubbleInner = ({
             : <ToolCalls calls={message.toolCalls} {...toolCallsProps} />
           : null}
 
+        {renderAfterMessage ? renderAfterMessage(message) : null}
+
         {message.sources?.length && !isStreaming
           ? sourcesRenderer
             ? sourcesRenderer(message.sources)

package/src/tools/Mermaid/hooks/useMermaidRenderer.ts

@@ -15,7 +15,7 @@ interface UseMermaidRendererProps {
 }
 
 interface MermaidRenderResult {
-    mermaidRef: React.RefObject<HTMLDivElement>;
+    mermaidRef: React.RefObject<HTMLDivElement | null>;
     svgContent: string;
     isVertical: boolean;
     isRendering: boolean;

package/src/tools/SpeechRecognition/core/languages-catalog.ts

@@ -223,7 +223,7 @@ export function countryFromTag(tag: string | null | undefined): string | null {
   const parts = tag.split('-');
   for (let i = parts.length - 1; i >= 0; i -= 1) {
     const p = parts[i];
-    if (p.length === 2 && /^[A-Za-z]{2}$/.test(p)) return p.toUpperCase();
+    if (p && p.length === 2 && /^[A-Za-z]{2}$/.test(p)) return p.toUpperCase();
   }
   return null;
 }

package/src/tools/SpeechRecognition/hooks/useMicLevel.ts

@@ -31,7 +31,7 @@ export function useMicLevel(stream: MediaStream | null): number {
     const tick = (): void => {
       analyser.getFloatTimeDomainData(buf);
       let sum = 0;
-      for (let i = 0; i < buf.length; i += 1) sum += buf[i] * buf[i];
+      for (let i = 0; i < buf.length; i += 1) sum += buf[i]! * buf[i]!;
       const rms = Math.sqrt(sum / buf.length);
       // soft compression so loud peaks don't dominate the meter
       setLevel(Math.min(1, rms * 2.5));

package/src/tools/SpeechRecognition/hooks/useSpeechLanguageInfo.ts

@@ -97,7 +97,7 @@ export function useSpeechLanguageInfo(): SpeechLanguageInfo {
     const found = findSpeechLanguage(tag);
     return {
       tag,
-      iso: found?.language.iso ?? tag.split('-')[0].toLowerCase(),
+      iso: found?.language.iso ?? (tag.split('-')[0] ?? tag).toLowerCase(),
       country: countryFromTag(tag),
       name: found?.language.name ?? null,
       englishName: found?.language.englishName ?? null,