pacnpal/Roo-Code
1
0
Fork 0
mirror of https://github.com/pacnpal/Roo-Code.git synced 2025-12-20 20:31:37 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix markdown spacing

Browse Source
This commit is contained in:
Saoud Rizwan
2024-09-14 06:26:03 -04:00
parent ab18123287
commit a6ff000ac8
1 changed files with 21 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
webview-ui/src/components/ChatRow.tsx
View File

@@ -465,7 +465,7 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
{icon} {icon}
{title} {title}
</div> </div>
<div style={{ color: "var(--vscode-charts-green)" }}> <div style={{ color: "var(--vscode-charts-green)", paddingTop: 10 }}>
<Markdown markdown={message.text} /> <Markdown markdown={message.text} />
</div> </div>
</> </>
@@ -518,7 +518,7 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
{title} {title}
</div> </div>
)} )}
<div> <div style={{ paddingTop: 10 }}>
<Markdown markdown={message.text} /> <Markdown markdown={message.text} />
</div> </div>
</> </>
@@ -618,7 +618,7 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
{icon} {icon}
{title} {title}
</div> </div>
<div style={{ color: "var(--vscode-charts-green)" }}> <div style={{ color: "var(--vscode-charts-green)", paddingTop: 10 }}>
<Markdown markdown={message.text} /> <Markdown markdown={message.text} />
</div> </div>
</div> </div>
@@ -635,7 +635,7 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
{title} {title}
</div> </div>
)} )}
<div> <div style={{ paddingTop: 10 }}>
<Markdown markdown={message.text} /> <Markdown markdown={message.text} />
</div> </div>
</> </>
@@ -669,7 +669,7 @@ const Markdown = memo(({ markdown }: { markdown?: string }) => {
// return `_<thinking>_\n\n${content}\n\n_</thinking>_` // return `_<thinking>_\n\n${content}\n\n_</thinking>_`
}) })
return ( return (
<div style={{ wordBreak: "break-word", overflowWrap: "anywhere" }}> <div style={{ wordBreak: "break-word", overflowWrap: "anywhere", marginBottom: -10, marginTop: -10 }}>
<ReactMarkdown <ReactMarkdown
children={parsed} children={parsed}
components={{ components={{
@@ -680,8 +680,8 @@ const Markdown = memo(({ markdown }: { markdown?: string }) => {
style={{ style={{
...style, ...style,
margin: 0, margin: 0,
marginTop: 0, marginTop: 10,
marginBottom: 0, marginBottom: 10,
whiteSpace: "pre-wrap", whiteSpace: "pre-wrap",
wordBreak: "break-word", wordBreak: "break-word",
overflowWrap: "anywhere", overflowWrap: "anywhere",
@@ -720,6 +720,20 @@ const Markdown = memo(({ markdown }: { markdown?: string }) => {
/> />
) )
}, },
// pre always surrounds a code, and we custom handle code blocks below. Pre has some non-10 margin, while all other elements in markdown have a 10 top/bottom margin and the outer div has a -10 top/bottom margin to counteract this between chat rows. However we render markdown in a completion_result row so make sure to add padding as necessary when used within other rows.
pre(props) {
const { style, ...rest } = props
return (
<pre
style={{
...style,
marginTop: 10,
marginBlock: 10,
}}
{...rest}
/>
)
},
// https://github.com/remarkjs/react-markdown?tab=readme-ov-file#use-custom-components-syntax-highlight // https://github.com/remarkjs/react-markdown?tab=readme-ov-file#use-custom-components-syntax-highlight
code(props) { code(props) {
const { children, className, node, ...rest } = props const { children, className, node, ...rest } = props