Fix markdown rendering by parsing content as blocks instead of line-by-line

[Copilot]

Problem

The chat interface parsed markdown line-by-line, breaking multi-line constructs: code blocks rendered as text with visible backticks, each list item created a separate <ul>, tables displayed as raw markdown, and blockquotes fragmented across lines.

Changes

Markdown Parsing

Changed from line-by-line to block parsing in 5 locations:

// Before
const lines = content.split("\n");
lines.forEach((line) => {
  c += DOMPurify.sanitize(marked.parse(line));
});

// After
c = DOMPurify.sanitize(marked.parse(content));

Files:

• core/http/views/chat.html - 3 instances (tool_call/tool_result fallback, thinking/reasoning, new messages)
• core/http/static/chat.js - 2 instances (thinking/reasoning, new messages)

CSS Additions

Added markdown-specific styles to core/http/static/general.css:

• Code blocks: horizontal scroll, proper background/borders
• Tables: responsive overflow handling
• Blockquotes, headings, lists, inline code
• Mobile breakpoints: max-width: calc(100vw - 3rem) for code blocks

Container Fix

Replaced invalid overflow-wrap-anywhere Tailwind class with proper CSS:

class="... break-words" style="overflow-wrap: anywhere; word-break: break-word;"

Visual Comparison

Left shows broken rendering (line-by-line), right shows fixed rendering (block parsing).

Original prompt

Fix Chat Interface Markdown Rendering and Mobile Responsiveness

Problem Description

The web user interface does not parse model responses correctly. Markdown content (especially code blocks, lists, tables) appears messed up and not properly rendered. Additionally, long output from the LLM can go out of the window horizontally, requiring scrolling. The interface is also not well optimized for mobile devices.

Related Issue: #8259

Root Causes Identified

Issue 1: Incorrect Markdown Parsing (CRITICAL)

Location: core/http/views/chat.html (lines ~333-337, ~369-373) and core/http/static/chat.js (lines ~2459-2462, ~2478-2481)

The code parses markdown line-by-line instead of as a complete block:

// PROBLEMATIC CODE - parses each line separately
const lines = content.split("\n");
lines.forEach((line) => {
  c += DOMPurify.sanitize(marked.parse(line));
});

This breaks multi-line markdown constructs such as:

• Code blocks (``` fenced blocks get split and parsed as individual lines)
• Lists (each list item gets wrapped in its own <ul> or <ol>)
• Blockquotes (each line becomes a separate blockquote)
• Tables (completely broken)

Fix: Parse the entire content as a single block:

c = DOMPurify.sanitize(marked.parse(content));

Issue 2: Missing CSS for Markdown Content

Location: core/http/static/general.css, core/http/static/components.css

There are no styles for markdown-rendered content inside chat messages. Missing:

• Code block styling (pre, code) with horizontal scrolling
• Inline code styling
• Table styling with responsive behavior
• Proper heading styles within messages
• Horizontal overflow handling for code

Issue 3: Invalid/Missing Overflow Classes

Location: core/http/views/chat.html (line ~1334)

<div class="... overflow-wrap-anywhere" x-html="message.html"></div>

overflow-wrap-anywhere is not a valid Tailwind class. Should use proper CSS for word wrapping and overflow handling.

Issue 4: Container Width Issues

The max-w-3xl fixed width on the messages container causes issues when content (like code blocks) exceeds this width, creating horizontal scrolling for the entire page.

Issue 5: Mobile Responsiveness

• Sidebar has fixed w-56 (224px) width that doesn't adapt
• Messages area lacks responsive padding adjustments
• Code blocks have no max-width: 100vw constraints on mobile

Required Changes

1. Fix Markdown Parsing in chat.html

In the Alpine store's add() function, replace all instances of line-by-line parsing:

Before:

const lines = content.split("\n");
lines.forEach((line) => {
  c += DOMPurify.sanitize(marked.parse(line));
});

After:

c = DOMPurify.sanitize(marked.parse(content));

This needs to be done in multiple places in the add() function (for thinking/reasoning, merged messages, and new messages).

2. Fix Markdown Parsing in chat.js

Same fix needs to be applied in the fallback Alpine store initialization in chat.js.

3. Add CSS for Markdown Content in general.css

Add comprehensive styles for markdown elements in chat messages:

/* Chat message markdown content styles */
#messages pre {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.1));
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  max-width: 100%;
  margin: 0.5rem 0;
  white-space: pre;
}

#messages pre code {
  background: transparent;
  padding: 0;
  white-space: pre;
  word-wrap: normal;
  overflow-wrap: normal;
}

#messages code:not(pre code) {
  background-color: var(--color-bg-primary);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.875em;
}

#messages table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
  display: block;
  overflow-x: auto;
}

#messages th,
#messages td {
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.1));
  padding: 0.5rem;
  text-align: left;
}

#messages th {
  background-color: var(--color-bg-secondary);
}

#messages blockquote {
  border-left: 4px solid var(--color-primary);
  padding-left: 1rem;
  margin: 0.5rem 0;
  color: var(--color-text-secondary);
}

#messages h1, #messages h2, #messages h3, #messages h4, #messages h5, #messages h6 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  line-height: 1.25;
}

#messages h1 { font-size: 1.5rem; }
#messages h2 { font-size: 1.25rem; }
#messages h3 { font-size: 1.125rem; }
#messages h4 { font-size: 1rem; }

#messages p {
  margin: 0.5rem 0;
}

#messages ul, #messages ol {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

#messages hr {
  border: none;
  border-top: 1px solid var(--color-border-subtle, rgba(255,255,255,0.1));
  margin: 1rem 0;
}

/* Mobile responsiveness for chat */
@media (max-width: 768px) {
  #messages {
    max-width: 100%;
    padding...

</details>



<!-- START COPILOT CODING AGENT SUFFIX -->

*This pull request was created from Copilot chat.*
>

<!-- START COPILOT CODING AGENT TIPS -->
---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more [Copilot coding agent tips](https://gh.io/copilot-coding-agent-tips) in the docs.

[netlify]

✅ Deploy Preview for localai ready!

Name	Link
🔨 Latest commit	6a1e44c
🔍 Latest deploy log	https://app.netlify.com/projects/localai/deploys/6981df3fa940a70008499001
😎 Deploy Preview	https://deploy-preview-8369--localai.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.