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

Merge pull request #44 from covespace/commit-message

Browse Source 
feat: Add commit functionality to code blocks
This commit is contained in:
Rankin Zheng 2023-05-11 12:39:25 +08:00 committed by GitHub
commit fca693d85b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 56 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
src/views/ChatPanel.tsx
View File

@ -8,7 +8,7 @@ import { createStyles, keyframes } from '@mantine/core';
import { ActionIcon } from '@mantine/core'; import { ActionIcon } from '@mantine/core';
import { Menu, Button, Text } from '@mantine/core'; import { Menu, Button, Text } from '@mantine/core';
import { useElementSize, useListState, useResizeObserver, useViewportSize } from '@mantine/hooks'; import { useElementSize, useListState, useResizeObserver, useViewportSize } from '@mantine/hooks';
import { IconAdjustments, IconBulb, IconCameraSelfie, IconCheck, IconClick, IconColumnInsertRight, IconCopy, IconDots, IconEdit, IconFileDiff, IconFolder, IconGitCompare, IconMessageDots, IconMessagePlus, IconPrinter, IconPrompt, IconReplace, IconRobot, IconSend, IconSquareRoundedPlus, IconTerminal2, IconUser, IconX } from '@tabler/icons-react'; import { IconAdjustments, IconBulb, IconCameraSelfie, IconCheck, IconClick, IconColumnInsertRight, IconCopy, IconDots, IconEdit, IconFileDiff, IconFolder, IconGitCommit, IconGitCompare, IconMessageDots, IconMessagePlus, IconPrinter, IconPrompt, IconReplace, IconRobot, IconSend, IconSquareRoundedPlus, IconTerminal2, IconUser, IconX } from '@tabler/icons-react';
import { IconSettings, IconSearch, IconPhoto, IconMessageCircle, IconTrash, IconArrowsLeftRight } from '@tabler/icons-react'; import { IconSettings, IconSearch, IconPhoto, IconMessageCircle, IconTrash, IconArrowsLeftRight } from '@tabler/icons-react';
import { Prism } from '@mantine/prism'; import { Prism } from '@mantine/prism';
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
@ -266,7 +266,7 @@ const chatPanel = () => {
width: 'calc(100% - 62px)', width: 'calc(100% - 62px)',
pre: { pre: {
whiteSpace: 'break-spaces' whiteSpace: 'break-spaces'
} },
}}> }}>
{contexts && {contexts &&
<Accordion variant="contained" chevronPosition="left" style={{ backgroundColor: '#FFF' }}> <Accordion variant="contained" chevronPosition="left" style={{ backgroundColor: '#FFF' }}>
@ -301,11 +301,7 @@ const chatPanel = () => {
const match = /language-(\w+)/.exec(className || ''); const match = /language-(\w+)/.exec(className || '');
const value = String(children).replace(/\n$/, ''); const value = String(children).replace(/\n$/, '');
const [copied, setCopied] = useState(false); const [commited, setCommited] = useState(false);
const handleCopy = () => {
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
return !inline && match ? ( return !inline && match ? (
<div style={{ position: 'relative' }}> <div style={{ position: 'relative' }}>
@ -340,41 +336,60 @@ const chatPanel = () => {
</Tooltip> </Tooltip>
)} )}
</CopyButton> </CopyButton>
<Tooltip label='View Diff' withArrow position="left" color="gray"> {match[1] && match[1] === 'commitmsg'
<ActionIcon onClick={() => { ? (<>
messageUtil.sendMessage({ <Tooltip label={commited ? 'Committing' : 'Commit'} withArrow position="left" color="gray">
command: 'show_diff', <ActionIcon
content: value color={commited ? 'teal' : 'gray'}
}); onClick={() => {
}}> messageUtil.sendMessage({
<IconFileDiff size="1.125rem" /> command: 'doCommit',
</ActionIcon> content: value
</Tooltip> });
<Tooltip label='Insert Code' withArrow position="left" color="gray"> setCommited(true);
<ActionIcon onClick={() => { setTimeout(() => { setCommited(false); }, 2000);
messageUtil.sendMessage({ }}>
command: 'code_apply', {commited ? <IconCheck size="1rem" /> : <IconGitCommit size="1rem" />}
content: value </ActionIcon>
}); </Tooltip>
}}> </>)
<IconColumnInsertRight size="1.125rem" /> : (<>
</ActionIcon> <Tooltip label='View Diff' withArrow position="left" color="gray">
</Tooltip> <ActionIcon onClick={() => {
<Tooltip label='Replace' withArrow position="left" color="gray"> messageUtil.sendMessage({
<ActionIcon onClick={() => { command: 'show_diff',
messageUtil.sendMessage({ content: value
command: 'code_file_apply', });
content: value }}>
}); <IconFileDiff size="1.125rem" />
}}> </ActionIcon>
<IconReplace size="1.125rem" /> </Tooltip>
</ActionIcon> <Tooltip label='Insert Code' withArrow position="left" color="gray">
</Tooltip> <ActionIcon onClick={() => {
messageUtil.sendMessage({
command: 'code_apply',
content: value
});
}}>
<IconColumnInsertRight size="1.125rem" />
</ActionIcon>
</Tooltip>
<Tooltip label='Replace' withArrow position="left" color="gray">
<ActionIcon onClick={() => {
messageUtil.sendMessage({
command: 'code_file_apply',
content: value
});
}}>
<IconReplace size="1.125rem" />
</ActionIcon>
</Tooltip>
</>)}
</Flex> </Flex>
<SyntaxHighlighter {...props} language={match[1]} customStyle={{ padding: '2em 1em 1em 2em' }} style={okaidia} PreTag="div"> <SyntaxHighlighter {...props} language={match[1]} customStyle={{ padding: '2em 1em 1em 2em', }} style={okaidia} PreTag="div">
{value} {value}
</SyntaxHighlighter> </SyntaxHighlighter>
</div> </div >
) : ( ) : (
<code {...props} className={className}> <code {...props} className={className}>
{children} {children}
@ -384,14 +399,14 @@ const chatPanel = () => {
}} }}
> >
{messageText} {messageText}
</ReactMarkdown> </ReactMarkdown >
{(generating && messageType === 'bot' && index === messages.length - 1) ? <Text sx={{ {(generating && messageType === 'bot' && index === messages.length - 1) ? <Text sx={{
animation: `${blink} 0.5s infinite;`, animation: `${blink} 0.5s infinite;`,
width: 5, width: 5,
marginTop: responsed ? 0 : '1em', marginTop: responsed ? 0 : '1em',
backgroundColor: 'black' backgroundColor: 'black'
}}>|</Text> : ''} }}>|</Text> : ''}
</Container> </Container >
</Flex > </Flex >
{index !== messages.length - 1 && <Divider my="sm" /> {index !== messages.length - 1 && <Divider my="sm" />
} }