lhumina_code/home
21
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages Wiki Activity Actions

AI chat: render markdown in responses (bold, lists, code blocks, links) #44

New issue
Closed
opened 2026-03-18 23:26:02 +00:00 by mik-tf · 4 comments
mik-tf commented 2026-03-18 23:26:02 +00:00
Owner
Copy link

Problem

AI responses in the chat UI are rendered as plain text. Markdown formatting like **bold**, numbered lists, code blocks, and links appear as raw markup instead of being rendered.

Screenshot

See the **AI Integration**: markers showing raw instead of bold text.

Expected

AI responses should render markdown properly:

  • **bold** → bold
  • # Heading → heading
  • `code` → inline code
  • Code blocks with syntax highlighting
  • Numbered/bulleted lists
  • Links as clickable

Approach

In hero_archipelagos/archipelagos/intelligence/ai/src/views/message_bubble.rs, the AI message content is rendered with white-space: pre-wrap as plain text. Options:

  1. Use a WASM markdown-to-HTML library (e.g. pulldown-cmark compiled to WASM) and render with dangerous_inner_html
  2. Use a lightweight JS markdown renderer loaded alongside the island
  3. Simple regex-based rendering for common patterns (bold, italic, code, lists)

Option 1 is cleanest since it stays in Rust/WASM.

## Problem AI responses in the chat UI are rendered as plain text. Markdown formatting like `**bold**`, numbered lists, code blocks, and links appear as raw markup instead of being rendered. ## Screenshot See the `**AI Integration**:` markers showing raw instead of bold text. ## Expected AI responses should render markdown properly: - `**bold**` → **bold** - `# Heading` → heading - `` `code` `` → inline code - Code blocks with syntax highlighting - Numbered/bulleted lists - Links as clickable ## Approach In `hero_archipelagos/archipelagos/intelligence/ai/src/views/message_bubble.rs`, the AI message content is rendered with `white-space: pre-wrap` as plain text. Options: 1. Use a WASM markdown-to-HTML library (e.g. `pulldown-cmark` compiled to WASM) and render with `dangerous_inner_html` 2. Use a lightweight JS markdown renderer loaded alongside the island 3. Simple regex-based rendering for common patterns (bold, italic, code, lists) Option 1 is cleanest since it stays in Rust/WASM.
mik-tf commented 2026-03-18 23:46:01 +00:00
Author
Owner
Copy link

Deployed to herodev

Added pulldown-cmark markdown renderer to the AI chat island. AI responses now render:

  • Bold and italic text
  • inline code and code blocks with dark background
  • Numbered and bulleted lists
  • Headings (h1-h3)
  • Links (clickable, blue)
  • Tables with borders
  • Blockquotes with purple left border
  • Strikethrough

User messages remain plain text.

Commit: hero_archipelagos@ce281fa on development

## Deployed to herodev Added `pulldown-cmark` markdown renderer to the AI chat island. AI responses now render: - **Bold** and *italic* text - `inline code` and code blocks with dark background - Numbered and bulleted lists - Headings (h1-h3) - Links (clickable, blue) - Tables with borders - Blockquotes with purple left border - Strikethrough User messages remain plain text. Commit: hero_archipelagos@ce281fa on `development`
mik-tf commented 2026-03-19 00:17:18 +00:00
Author
Owner
Copy link

Browser verification pending

The last deploy used SKIP_SHRIMP=1 for the #35 fix, which excluded the Shrimp binary. AI Assistant shows HTTP 404 because Shrimp is not running. The markdown rendering code is deployed but cannot be tested until a full rebuild restores Shrimp.

Rebuilding now with full make dist to restore Shrimp. Will verify markdown rendering after deploy.

### Browser verification pending The last deploy used `SKIP_SHRIMP=1` for the #35 fix, which excluded the Shrimp binary. AI Assistant shows HTTP 404 because Shrimp is not running. The markdown rendering code is deployed but cannot be tested until a full rebuild restores Shrimp. Rebuilding now with full `make dist` to restore Shrimp. Will verify markdown rendering after deploy.
mik-tf reopened this issue 2026-03-19 00:19:40 +00:00
mik-tf commented 2026-03-19 00:19:40 +00:00
Author
Owner
Copy link

Reopened — code is deployed but not yet browser-verified. Shrimp was missing from last image (SKIP_SHRIMP build). Full rebuild in progress, will verify and close after deploy.

Reopened — code is deployed but not yet browser-verified. Shrimp was missing from last image (SKIP_SHRIMP build). Full rebuild in progress, will verify and close after deploy.
mik-tf commented 2026-03-19 02:54:36 +00:00
Author
Owner
Copy link

Closed — markdown rendering works in dark mode. Light mode has a separate theme issue (bold text invisible due to CSS variable/color inheritance problem). See #47.

Closed — markdown rendering works in dark mode. Light mode has a separate theme issue (bold text invisible due to CSS variable/color inheritance problem). See #47.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
development
main
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
lhumina_code/home#44
No description provided.