Skip to content

Markdown support #12

@MrOrz

Description

@MrOrz
  • 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).

Metadata

Metadata

Assignees

Labels

julesInclude this to trigger Jules

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions