storme/nexusAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added react-markdown

Browse Source
This commit is contained in:
Storme-bit
2026-04-17 22:45:24 -07:00
parent fc864041c5
commit 1cc7b62d79
2 changed files with 43 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/chat-client/src/components/MessageBubble.jsx
View File

@@ -34,22 +34,20 @@ export default function MessageBubble({ message }) {
border: isUser ? 'none' : '1px solid var(--border)',
wordBreak: 'break-word',
}}>
{isUser
? message.text
: <ReactMarkdown
components={{
// Tighten up default spacing so it fits the bubble style
p: ({children}) => <p style={{ margin: '0 0 8px', lineHeight: 1.6 }}>{children}</p>,
ul: ({children}) => <ul style={{ margin: '0 0 8px', paddingLeft: '20px' }}>{children}</ul>,
ol: ({children}) => <ol style={{ margin: '0 0 8px', paddingLeft: '20px' }}>{children}</ol>,
li: ({children}) => <li style={{ marginBottom: '2px' }}>{children}</li>,
code: ({inline, children}) => inline
? <code style={{ background: 'var(--bg-elevated)', padding: '1px 5px', borderRadius: 'var(--radius-sm)', fontSize: '12px', fontFamily: 'monospace' }}>{children}</code>
: <pre style={{ background: 'var(--bg-elevated)', padding: '10px 12px', borderRadius: 'var(--radius-md)', overflowX: 'auto', fontSize: '12px', fontFamily: 'monospace' }}><code>{children}</code></pre>,
strong: ({children}) => <strong style={{ fontWeight: 600, color: 'var(--text-primary)' }}>{children}</strong>,
}}
>{message.text}</ReactMarkdown>
}
<ReactMarkdown
components={{
// Tighten up default spacing so it fits the bubble style
p: ({ children }) => <p style={{ margin: '0 0 8px', lineHeight: 1.6 }}>{children}</p>,
ul: ({ children }) => <ul style={{ margin: '0 0 8px', paddingLeft: '20px' }}>{children}</ul>,
ol: ({ children }) => <ol style={{ margin: '0 0 8px', paddingLeft: '20px' }}>{children}</ol>,
li: ({ children }) => <li style={{ marginBottom: '2px' }}>{children}</li>,
code: ({ inline, children }) => inline
? <code style={{ background: 'var(--bg-elevated)', padding: '1px 5px', borderRadius: 'var(--radius-sm)', fontSize: '12px', fontFamily: 'monospace' }}>{children}</code>
: <pre style={{ background: 'var(--bg-elevated)', padding: '10px 12px', borderRadius: 'var(--radius-md)', overflowX: 'auto', fontSize: '12px', fontFamily: 'monospace' }}><code>{children}</code></pre>,
strong: ({ children }) => <strong style={{ fontWeight: 600, color: 'var(--text-primary)' }}>{children}</strong>,
}}
>{message.text}</ReactMarkdown>
{message.streaming && (
<span style={{
display: 'inline-block',