botonic-react: infer a function to get ai agent event using authenticated api endpoint to webchat preview #BLT-2535

[Iru89]

Description

Adds automatic rehydration of truncated AI Agent debug events in the webchat preview by fetching the full event payload through the authenticated getMessageById API.

Context

AI Agent debug events shown in the webchat preview can be truncated when the payload is too large to send over Pusher. In that case, the event is delivered with truncated: true and a hubtype_message_id, but the UI cannot display tools, guardrails, or other details without the full event_data.

The webchat preview already exposes previewUtils.getMessageById as an authenticated endpoint to retrieve message details. This PR wires that endpoint into the AI Agent debug trace component so truncated events are automatically enriched when preview utilities are available.

Approach taken / Explain the design

1. rehydrate-ai-agent-event.ts — Pure functions that:

   • Call previewUtils.getMessageById(hubtypeMessageId, { includeDebugEvents: true }).
   • Merge the returned event_data into the truncated props while preserving action and messageId.
   • Cache successful results and deduplicate in-flight requests per hubtype_message_id.

2. use-rehydrated-ai-agent-event.ts — React hook that:

   • Detects when rehydration is needed (truncated, hubtype_message_id, and previewUtils are all present).
   • Returns the cached/resolved event and an isRehydrating flag.
   • Triggers the fetch once per mount and handles errors gracefully.

3. ai-agent.tsx — Uses the hook to render the resolved event. While rehydrating, or when rehydration returns no event_data, the "No tools executed" label is suppressed to avoid misleading empty states.

4. PreviewUtils typing — getMessageById now accepts an optional includeDebugEvents flag via GetMessageByIdOptions.

To document / Usage example

Rehydration is automatic when the host application provides previewUtils with a getMessageById implementation that supports includeDebugEvents:

const previewUtils: PreviewUtils = {
  // ...other preview utils
  getMessageById: async (messageId, options) => {
    const response = await fetch(
      `/api/messages/${messageId}?include_debug_events=${options?.includeDebugEvents ?? false}`
    )
    return response.json()
  },
}

// Webchat receives truncated AI agent events from Pusher:
// { truncated: true, hubtype_message_id: 'msg-123', tools_executed: [], ... }
// The AiAgent debug component will fetch the full event_data and render tools/guardrails.

No changes are required in bot code — the AiAgent component reads previewUtils from WebchatContext.

Testing

The pull request...

• has unit tests
• has integration tests
• doesn't need tests because...

Unit tests cover rehydration via getMessageById, cache/deduplication, and the UI behavior while rehydrating. System debug trace tests were migrated from .jsx to .tsx to type the new rehydration scenarios.

[chatgpt-codex-connector]

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.