- Use React-markdown to display chat messages
- Ensure that tool calls and messages are rendered in the same order as in ADK session events.
🛠 Implementation Guidance for Jules (Post-PR #18 Architecture)
To ensure high-quality implementation following the server functions architecture from PR #18, please follow these technical requirements:
1. Type Refactoring (src/lib/adk.ts)
- Inheritance: Redefine
ChatMessage to extend AdkContent (from adk-types.d.ts).
- Field Alignment: Use
parts: Array<AdkPart> as the primary source of truth for message content.
- Cleanup: Remove the separate
text: string and toolCalls: Array<ToolCall> fields. Retain UI-specific metadata like id, isStreaming, timestamp, and author.
2. Logic Update (src/lib/chatCache.ts)
- Direct Mapping: Refactor
applyEventToState to stop manually extracting text and toolCalls strings.
- Order Preservation: Directly map
event.content.parts to the ChatMessage.parts array.
- Streaming Handling: When
event.partial is true, append the incoming text chunk to the last text part in the parts array if it exists; otherwise, push a new text part. This ensures that text and tool calls are interleaved exactly as received from the ADK stream via the runChat server function.
3. Frontend Rendering (AgentMessage.tsx & UserMessage.tsx)
- Markdown Library: Install and use
react-markdown and remark-gfm.
- Part-based Rendering: Iterate through
message.parts and render based on type:
text: Render using ReactMarkdown.
functionCall: Render using existing tool call UI components.
- Security:
react-markdown + remark-gfm provides safe DOM construction by default.
- Styling: Ensure Markdown content (headers, lists, links) is properly styled using Tailwind CSS (consider adding
@tailwindcss/typography if needed).
🛠 Implementation Guidance for Jules (Post-PR #18 Architecture)
To ensure high-quality implementation following the server functions architecture from PR #18, please follow these technical requirements:
1. Type Refactoring (
src/lib/adk.ts)ChatMessagetoextend AdkContent(fromadk-types.d.ts).parts: Array<AdkPart>as the primary source of truth for message content.text: stringandtoolCalls: Array<ToolCall>fields. Retain UI-specific metadata likeid,isStreaming,timestamp, andauthor.2. Logic Update (
src/lib/chatCache.ts)applyEventToStateto stop manually extractingtextandtoolCallsstrings.event.content.partsto theChatMessage.partsarray.event.partialistrue, append the incoming text chunk to the lasttextpart in thepartsarray if it exists; otherwise, push a newtextpart. This ensures that text and tool calls are interleaved exactly as received from the ADK stream via therunChatserver function.3. Frontend Rendering (
AgentMessage.tsx&UserMessage.tsx)react-markdownandremark-gfm.message.partsand render based on type:text: Render usingReactMarkdown.functionCall: Render using existing tool call UI components.react-markdown+remark-gfmprovides safe DOM construction by default.@tailwindcss/typographyif needed).