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

Refactor ChatPanel to handle missing contexts

Browse Source 
Refactored `ChatPanel` to handle missing contexts by adding conditional rendering for the `Accordion` and `contexts` map. Also, added `pre` tag styling to the message content.
This commit is contained in:
Rankin Zheng 2023-05-10 17:38:24 +08:00
parent 767933cf95
commit ea32ab6e24
1 changed files with 66 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/views/ChatPanel.tsx
View File

@ -244,6 +244,7 @@ const chatPanel = () => {
<Flex
key={`message-${index}`}
mih={50}
miw={300}
gap="md"
justify="flex-start"
align="flex-start"
@ -263,32 +264,37 @@ const chatPanel = () => {
paddingLeft: 0,
paddingRight: 0,
width: 'calc(100% - 62px)',
pre: {
whiteSpace: 'break-spaces'
}
}}>
<Accordion variant="contained" chevronPosition="left" style={{ backgroundColor: '#FFF' }}>
{
contexts?.map(({ context }, index) => {
return (
<Accordion.Item value={`item-${index}`} mah='200'>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Accordion.Control >
{'command' in context ? context.command : context.path}
</Accordion.Control>
</Box>
<Accordion.Panel>
{
context.content
? context.content
: <Center>
<Text c='gray.3'>No content</Text>
</Center>
}
{contexts &&
<Accordion variant="contained" chevronPosition="left" style={{ backgroundColor: '#FFF' }}>
{
contexts?.map(({ context }, index) => {
return (
<Accordion.Item value={`item-${index}`} mah='200'>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Accordion.Control >
{'command' in context ? context.command : context.path}
</Accordion.Control>
</Box>
<Accordion.Panel>
{
context.content
? context.content
: <Center>
<Text c='gray.3'>No content</Text>
</Center>
}
</Accordion.Panel>
</Accordion.Item>
);
})
}
</Accordion>
</Accordion.Panel>
</Accordion.Item>
);
})
}
</Accordion>
}
<ReactMarkdown
components={{
code({ node, inline, className, children, ...props }) {
@ -393,40 +399,43 @@ const chatPanel = () => {
viewportRef={scrollViewport}>
{messageList.length > 0 ? messageList : defaultMessages}
</ScrollArea>
<Stack sx={{ position: 'absolute', bottom: 10, width: scrollViewport.current?.clientWidth }}>
<Accordion variant="contained" chevronPosition="left" style={{ backgroundColor: '#FFF' }}>
{
contexts.map(({ context }, index) => {
return (
<Accordion.Item value={`item-${index}`} mah='200'>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Accordion.Control >
{'command' in context ? context.command : context.path}
</Accordion.Control>
<ActionIcon
mr={8}
size="lg"
onClick={() => {
contextsHandlers.remove(index);
}}>
<IconX size="1rem" />
</ActionIcon>
</Box>
<Accordion.Panel>
{
context.content
? context.content
: <Center>
<Text c='gray.3'>No content</Text>
</Center>
}
<Stack
sx={{ position: 'absolute', bottom: 10, width: scrollViewport.current?.clientWidth }}>
{contexts &&
<Accordion variant="contained" chevronPosition="left" style={{ backgroundColor: '#FFF' }}>
{
contexts.map(({ context }, index) => {
return (
<Accordion.Item value={`item-${index}`} mah='200'>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Accordion.Control >
{'command' in context ? context.command : context.path}
</Accordion.Control>
<ActionIcon
mr={8}
size="lg"
onClick={() => {
contextsHandlers.remove(index);
}}>
<IconX size="1rem" />
</ActionIcon>
</Box>
<Accordion.Panel>
{
context.content
? context.content
: <Center>
<Text c='gray.3'>No content</Text>
</Center>
}
</Accordion.Panel>
</Accordion.Item>
);
})
}
</Accordion>
</Accordion.Panel>
</Accordion.Item>
);
})
}
</Accordion>
}
<Menu
id='commandMenu'
position='top-start'