lfg2025/archy
1
0
Fork 0
Code Issues 25 Pull Requests 4 Actions Packages Projects Releases 74 Wiki Activity

feat(app): add markdown rendering in chat messages

Browse Source 
Install markdown-it and render assistant messages through it with safe
defaults (html: false, linkify, breaks). Add CSS for code blocks,
lists, links, blockquotes, headings. Links open in new tab. User
messages remain plain text.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-03 20:20:13 +00:00
co-authored by Claude Opus 4.6
parent cb3a50a920
commit 81ccd69aae
4 changed files with 199 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/styles/main.css
+94
View File
@@ -713,6 +713,100 @@ input:focus-visible {
animation: pulseGlow 2s ease-in-out infinite;
}
/* ===== CHAT MARKDOWN ===== */
.chat-markdown p {
margin-bottom: 0.5em;
}
.chat-markdown p:last-child {
margin-bottom: 0;
}
.chat-markdown strong {
font-weight: 600;
}
.chat-markdown em {
font-style: italic;
}
.chat-markdown a {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.chat-markdown a:hover {
opacity: 0.8;
}
.chat-markdown code {
font-family: var(--font-mono);
font-size: 0.85em;
padding: 0.15em 0.35em;
border-radius: 0.25rem;
background: rgba(255, 255, 255, 0.08);
}
.chat-markdown pre {
margin: 0.75em 0;
padding: 0.75em 1em;
border-radius: 0.5rem;
background: rgba(0, 0, 0, 0.3);
overflow-x: auto;
}
.chat-markdown pre code {
padding: 0;
background: transparent;
font-size: 0.8em;
line-height: 1.5;
}
.chat-markdown ul,
.chat-markdown ol {
margin: 0.5em 0;
padding-left: 1.5em;
}
.chat-markdown ul {
list-style-type: disc;
}
.chat-markdown ol {
list-style-type: decimal;
}
.chat-markdown li {
margin-bottom: 0.25em;
}
.chat-markdown blockquote {
margin: 0.5em 0;
padding-left: 0.75em;
border-left: 3px solid rgba(255, 255, 255, 0.2);
opacity: 0.8;
}
.chat-markdown h1,
.chat-markdown h2,
.chat-markdown h3,
.chat-markdown h4 {
font-weight: 600;
margin: 0.75em 0 0.25em;
}
.chat-markdown h1 { font-size: 1.25em; }
.chat-markdown h2 { font-size: 1.15em; }
.chat-markdown h3 { font-size: 1.05em; }
.chat-markdown hr {
margin: 0.75em 0;
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Light mode overrides */
@media (prefers-color-scheme: light) {
.chat-markdown code {
background: rgba(0, 0, 0, 0.06);
}
.chat-markdown pre {
background: rgba(0, 0, 0, 0.04);
}
.chat-markdown blockquote {
border-left-color: rgba(0, 0, 0, 0.15);
}
.chat-markdown hr {
border-top-color: rgba(0, 0, 0, 0.08);
}
}
/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {