ishangsf/DeepCodeGeniusWeb-vscode
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add react-syntax-highlighter and react-markdown to package.json

Browse Source 
Add react-syntax-highlighter and react-markdown to package.json to enable syntax highlighting and markdown rendering in the chat panel.

Also, update ChatPanel.tsx to use ReactMarkdown instead of Remark for markdown rendering. Additionally, add SyntaxHighlighter from react-syntax-highlighter to render code blocks with syntax highlighting.
This commit is contained in:
Rankin Zheng 2023-05-07 18:27:01 +08:00
parent b84603633d
commit 9712d9a976
3 changed files with 1583 additions and 624 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2170
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -128,6 +128,7 @@
"@types/ncp": "^2.0.5",
"@types/node": "16.x",
"@types/react-dom": "^18.2.3",
"@types/react-syntax-highlighter": "^15.5.6",
"@types/shell-escape": "^0.2.1",
"@types/vscode": "^1.77.0",
"@typescript-eslint/eslint-plugin": "^5.56.0",
@ -174,7 +175,8 @@
"nonce": "^1.0.4",
"openai": "^3.2.1",
"quote": "^0.4.0",
"react-remark": "^2.1.0",
"react-markdown": "^8.0.7",
"react-syntax-highlighter": "^15.5.0",
"shell-escape": "^0.2.0",
"uuid": "^9.0.0"
}

33
src/views/ChatPanel.tsx
View File

@ -11,7 +11,9 @@ import { useListState, useViewportSize } from '@mantine/hooks';
import { IconClick, IconEdit, IconFolder, IconGitCompare, IconMessageDots, IconRobot, IconSend, IconSquareRoundedPlus, IconUser } from '@tabler/icons-react';
import { IconSettings, IconSearch, IconPhoto, IconMessageCircle, IconTrash, IconArrowsLeftRight } from '@tabler/icons-react';
import { Prism } from '@mantine/prism';
import { useRemark, Remark } from 'react-remark';
import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import okaidia from 'react-syntax-highlighter/dist/esm/styles/prism/okaidia';
import messageUtil from '../util/MessageUtil';
@ -71,8 +73,6 @@ const chatPanel = () => {
const [showCursor, setShowCursor] = useState(false);
const [registed, setRegisted] = useState(false);
const [opened, setOpened] = useState(false);
// const [markdown, setMarkdown] = useRemark();
// const [message, setMessage] = useState('');
const [input, setInput] = useState('');
const [commandOpened, setCommandOpened] = useState(false);
const { classes } = useStyles();
@ -110,8 +110,8 @@ const chatPanel = () => {
useEffect(() => {
if (registed) return;
// Add the received message to the chat UI as a bot message
messageUtil.registerHandler('receiveMessage', (message: { text: string; }) => {
console.log(`receiveMessage: ${message.text}`);
messageUtil.registerHandler('receiveMessagePartial', (message: { text: string; }) => {
console.log(`receiveMessagePartial: ${message.text}`);
handlers.append({ type: 'bot', message: message.text });
setRegisted(true);
});
@ -171,7 +171,28 @@ const chatPanel = () => {
}
<Container className={classes.responseContent}>
<Remark>{messageText}</Remark>
<ReactMarkdown
components={{
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || '');
return !inline && match ? (
<SyntaxHighlighter
{...props}
children={String(children).replace(/\n$/, '')}
style={okaidia}
language={match[1]}
PreTag="div"
/>
) : (
<code {...props} className={className}>
{children}
</code>
);
}
}}
>
{messageText}
</ReactMarkdown>
{/* {markdown}{showCursor && <span className={classes.cursor}>|</span>} */}
</Container>
</Flex>