Skip to content

Commit 5f88ce1

Browse files
small-stonesmall-stone
authored
Merge pull request #12 from devchat-ai/feat/prism
Feat/prism
2 parents 5e1d733 + 0d3f7d3 commit 5f88ce1

File tree

4 files changed

+166
-91
lines changed

4 files changed

+166
-91
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@
135135
"ncp": "^2.0.0",
136136
"node-fetch": "^3.3.1",
137137
"nonce": "^1.0.4",
138+
"prism-react-renderer": "^2.3.1",
138139
"quote": "^0.4.0",
139140
"react-i18next": "^13.5.0",
140141
"react-markdown": "^8.0.7",

‎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: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +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";
6-
import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism";
5+
import { Highlight, themes } from "prism-react-renderer";
76
import CodeButtons from "./CodeButtons";
87
import Step from "./Step";
98
import LanguageCorner from "./LanguageCorner";
@@ -355,7 +354,7 @@ Generate a professionally written and formatted release note in markdown with th
355354
>
356355
<LanguageCorner language={lanugage} />
357356
<CodeButtons language={lanugage} code={value} />
358-
<SyntaxHighlighter
357+
{/* <SyntaxHighlighter
359358
{...props}
360359
language={lanugage}
361360
customStyle={{ padding: "35px 10px 10px 10px" }}
@@ -364,7 +363,39 @@ Generate a professionally written and formatted release note in markdown with th
364363
PreTag="div"
365364
>
366365
{value}
367-
</SyntaxHighlighter>
366+
</SyntaxHighlighter> */}
367+
<Highlight
368+
code={value}
369+
theme={themes.okaidia}
370+
language={lanugage}
371+
>
372+
{({
373+
className,
374+
style,
375+
tokens,
376+
getLineProps,
377+
getTokenProps,
378+
}) => (
379+
<pre
380+
className={className}
381+
style={{
382+
...style,
383+
padding: "35px 10px 10px 10px",
384+
borderRadius: "5px",
385+
...props.style,
386+
}}
387+
{...props}
388+
>
389+
{tokens.map((line, i) => (
390+
<div {...getLineProps({ line, key: i })}>
391+
{line.map((token, key) => (
392+
<span {...getTokenProps({ token, key })} />
393+
))}
394+
</div>
395+
))}
396+
</pre>
397+
)}
398+
</Highlight>
368399
</div>
369400
) : (
370401
<code {...props} className={className}>
@@ -392,10 +423,10 @@ Generate a professionally written and formatted release note in markdown with th
392423
color: "#fff",
393424
},
394425
}}
395-
styles = {{
396-
root:{
426+
styles={{
427+
root: {
397428
marginBottom: 10,
398-
}
429+
},
399430
}}
400431
onClick={() => {
401432
value === "get_devchat_key" && platform === "idea"

‎yarn.lock‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2218,6 +2218,11 @@
22182218
resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.3.tgz#705bb349e789efa06f43f128cef51240753424cb"
22192219
integrity sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==
22202220

2221+
"@types/prismjs@^1.26.0":
2222+
version "1.26.3"
2223+
resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.3.tgz#47fe8e784c2dee24fe636cab82e090d3da9b7dec"
2224+
integrity sha512-A0D0aTXvjlqJ5ZILMz3rNfDBOx9hHxLZYv2by47Sm/pqW35zzjusrZTryatjN/Rf8Us2gZrJD+KeHbUSTux1Cw==
2225+
22212226
"@types/prop-types@*", "@types/prop-types@^15.0.0":
22222227
version "15.7.11"
22232228
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563"
@@ -3256,6 +3261,11 @@ clsx@1.1.1:
32563261
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
32573262
integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
32583263

3264+
clsx@^2.0.0:
3265+
version "2.1.0"
3266+
resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
3267+
integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
3268+
32593269
co@^4.6.0:
32603270
version "4.6.0"
32613271
resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -6874,6 +6884,14 @@ prism-react-renderer@^1.2.1:
68746884
resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.3.5.tgz#786bb69aa6f73c32ba1ee813fbe17a0115435085"
68756885
integrity sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==
68766886

6887+
prism-react-renderer@^2.3.1:
6888+
version "2.3.1"
6889+
resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-2.3.1.tgz#e59e5450052ede17488f6bc85de1553f584ff8d5"
6890+
integrity sha512-Rdf+HzBLR7KYjzpJ1rSoxT9ioO85nZngQEoFIhL07XhtJHlCU3SOz0GJ6+qvMyQe0Se+BV3qpe6Yd/NmQF5Juw==
6891+
dependencies:
6892+
"@types/prismjs" "^1.26.0"
6893+
clsx "^2.0.0"
6894+
68776895
prismjs@^1.27.0:
68786896
version "1.29.0"
68796897
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"

0 commit comments

Comments
 (0)