Skip to content

Commit 0d3f7d3

Browse files
author
smallstone
committed
Refactor MessageMarkdown component
1 parent 4fc3d40 commit 0d3f7d3

File tree

2 files changed

+110
-86
lines changed

2 files changed

+110
-86
lines changed

‎src/views/components/MessageMarkdown/Step.tsx‎

Lines changed: 109 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,132 @@
1-
import { Accordion, Box, Button, Collapse, Group,Loader,Text } from "@mantine/core";
1+
import { Accordion, Loader, Text } from "@mantine/core";
22
import { useDisclosure } from "@mantine/hooks";
33
import React from "react";
44
import SyntaxHighlighter from "react-syntax-highlighter";
5-
import LanguageCorner from "./LanguageCorner";
5+
import { Highlight, themes } from "prism-react-renderer";
66
import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism";
7-
import { IconCheck, IconChevronDown, IconFileDiff, IconLoader } from "@tabler/icons-react";
7+
import { IconCheck } from "@tabler/icons-react";
88
import { observer } from "mobx-react-lite";
99
import { useMst } from "@/views/stores/RootStore";
10-
import { keyframes,css } from "@emotion/react";
10+
import { keyframes, css } from "@emotion/react";
1111

1212
interface StepProps {
13-
language: string;
14-
children: string;
15-
status: string;
16-
index: number|undefined;
13+
language: string;
14+
children: string;
15+
status: string;
16+
index: number | undefined;
1717
}
1818

19-
const Step = observer((props:StepProps) => {
19+
const Step = observer((props: StepProps) => {
2020
const { chat } = useMst();
21-
const {language,children,status,index} = props;
21+
const { language, children, status, index } = props;
2222
const [opened, { toggle }] = useDisclosure(false);
2323

2424
// extract first line with # as button label
25-
const lines = children.split('\n');
26-
const title = lines.length>0&&lines[0].indexOf('#')>=0?lines[0].split('#')[1]:'Thinking...';
27-
const contents = lines.slice(1,lines.length-1);
25+
const lines = children.split("\n");
26+
const title =
27+
lines.length > 0 && lines[0].indexOf("#") >= 0
28+
? lines[0].split("#")[1]
29+
: "Thinking...";
30+
const contents = lines.slice(1, lines.length - 1);
2831

2932
const spin = keyframes`
3033
0% { transform: rotate(0deg); }
3134
100% { transform: rotate(360deg); }
3235
`;
3336

34-
return <Accordion
35-
variant="contained"
36-
chevronPosition="right"
37-
sx={{
38-
marginTop: 5,
39-
borderRadius: 5,
40-
backgroundColor: 'var(--vscode-menu-background)',
41-
}}
42-
styles={{
43-
item: {
44-
borderColor: 'var(--vscode-menu-border)',
45-
backgroundColor: 'var(--vscode-menu-background)',
46-
'&[data-active]': {
47-
backgroundColor: 'var(--vscode-menu-background)',
48-
}
49-
},
50-
control: {
51-
height: 30,
52-
borderRadius: 3,
53-
backgroundColor: 'var(--vscode-menu-background)',
54-
'&[aria-expanded="true"]': {
55-
borderBottomLeftRadius: 0,
56-
borderBottomRightRadius: 0,
57-
},
58-
'&:hover': {
59-
backgroundColor: 'var(--vscode-menu-background)',
60-
},
61-
paddingLeft: '0.5rem',
62-
paddingRight: '0.5rem',
63-
fontFamily: 'var(--vscode-editor-font-familyy)',
64-
fontSize: 'var(--vscode-editor-font-size)',
65-
},
66-
chevron: {
67-
color: 'var(--vscode-menu-foreground)',
68-
},
69-
icon: {
70-
color: 'var(--vscode-menu-foreground)',
71-
},
72-
label: {
73-
color: 'var(--vscode-menu-foreground)',
74-
},
75-
panel: {
76-
color: 'var(--vscode-menu-foreground)',
77-
backgroundColor: 'var(--vscode-menu-background)',
78-
},
79-
content: {
80-
borderRadius: 3,
81-
backgroundColor: 'var(--vscode-menu-background)',
82-
padding:'0.5rem'
83-
}
84-
}}
37+
return (
38+
<Accordion
39+
variant="contained"
40+
chevronPosition="right"
41+
sx={{
42+
marginTop: 5,
43+
borderRadius: 5,
44+
backgroundColor: "var(--vscode-menu-background)",
45+
}}
46+
styles={{
47+
item: {
48+
borderColor: "var(--vscode-menu-border)",
49+
backgroundColor: "var(--vscode-menu-background)",
50+
"&[data-active]": {
51+
backgroundColor: "var(--vscode-menu-background)",
52+
},
53+
},
54+
control: {
55+
height: 30,
56+
borderRadius: 3,
57+
backgroundColor: "var(--vscode-menu-background)",
58+
'&[aria-expanded="true"]': {
59+
borderBottomLeftRadius: 0,
60+
borderBottomRightRadius: 0,
61+
},
62+
"&:hover": {
63+
backgroundColor: "var(--vscode-menu-background)",
64+
},
65+
paddingLeft: "0.5rem",
66+
paddingRight: "0.5rem",
67+
fontFamily: "var(--vscode-editor-font-familyy)",
68+
fontSize: "var(--vscode-editor-font-size)",
69+
},
70+
chevron: {
71+
color: "var(--vscode-menu-foreground)",
72+
},
73+
icon: {
74+
color: "var(--vscode-menu-foreground)",
75+
},
76+
label: {
77+
color: "var(--vscode-menu-foreground)",
78+
},
79+
panel: {
80+
color: "var(--vscode-menu-foreground)",
81+
backgroundColor: "var(--vscode-menu-background)",
82+
},
83+
content: {
84+
borderRadius: 3,
85+
backgroundColor: "var(--vscode-menu-background)",
86+
padding: "0.5rem",
87+
},
88+
}}
89+
>
90+
<Accordion.Item value={"step" + index} mah="200">
91+
<Accordion.Control
92+
icon={
93+
status === "done" ? (
94+
<IconCheck size="1.125rem" />
95+
) : (
96+
<Loader size="xs" color="#ED6A45" speed={1} />
97+
)
98+
}
8599
>
86-
<Accordion.Item value={'step'+index} mah='200'>
87-
<Accordion.Control icon={
88-
status === "done"
89-
?<IconCheck size="1.125rem"/>
90-
:<Loader size="xs" color="#ED6A45" speed={1} />
91-
}
100+
<Text truncate="end" w={chat.chatPanelWidth - 100}>
101+
{title}
102+
</Text>
103+
</Accordion.Control>
104+
<Accordion.Panel>
105+
<Highlight code={children} theme={themes.okaidia} language="markdown">
106+
{({ className, style, tokens, getLineProps, getTokenProps }) => (
107+
<pre
108+
className={className}
109+
style={{
110+
...style,
111+
borderRadius: "5px",
112+
padding: "10px 15px",
113+
}}
114+
{...props}
92115
>
93-
<Text truncate='end' w={chat.chatPanelWidth-100}>{title}</Text>
94-
</Accordion.Control>
95-
<Accordion.Panel>
96-
<SyntaxHighlighter {...props}
97-
language="markdown"
98-
style={okaidia}
99-
PreTag="div">
100-
{children}
101-
</SyntaxHighlighter>
102-
</Accordion.Panel>
103-
</Accordion.Item>
104-
</Accordion>;
105-
});
116+
{tokens.map((line, i) => (
117+
<div {...getLineProps({ line, key: i })}>
118+
{line.map((token, key) => (
119+
<span {...getTokenProps({ token, key })} />
120+
))}
121+
</div>
122+
))}
123+
</pre>
124+
)}
125+
</Highlight>
126+
</Accordion.Panel>
127+
</Accordion.Item>
128+
</Accordion>
129+
);
130+
});
106131

107-
export default Step;
132+
export default Step;

‎src/views/components/MessageMarkdown/index.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@ import { Button, Anchor, Stack, Group, Box, createStyles } from "@mantine/core";
22
import React, { useEffect, useMemo, useState } from "react";
33
import ReactMarkdown from "react-markdown";
44
import rehypeRaw from "rehype-raw";
5-
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
65
import { Highlight, themes } from "prism-react-renderer";
7-
import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism";
86
import CodeButtons from "./CodeButtons";
97
import Step from "./Step";
108
import LanguageCorner from "./LanguageCorner";
@@ -380,6 +378,7 @@ Generate a professionally written and formatted release note in markdown with th
380378
style={{
381379
...style,
382380
padding: "35px 10px 10px 10px",
381+
borderRadius: "5px",
383382
...props.style,
384383
}}
385384
{...props}

0 commit comments

Comments
 (0)