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

Refactor: Extract InputContexts component in ChatPanel

Browse Source 
Extracted the InputContexts component from the chatPanel function in the ChatPanel/index.tsx file.
Replaced the previous inline implementation with the new InputContexts component.
InputContexts component handles the display and management of input contexts in the chat panel.
This commit is contained in:
Rankin Zheng 2023-06-05 18:40:07 +08:00
parent d500fe63f1
commit ba32f21082
1 changed files with 91 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/views/ChatPanel/index.tsx
View File

@ -745,46 +745,9 @@ const chatPanel = () => {
</Button>);
};
return (
<Container
id='chat-container'
ref={chatContainerRef}
sx={{
height: '100%',
margin: 0,
padding: 10,
background: 'var(--vscode-sideBar-background)',
color: 'var(--vscode-editor-foreground)',
minWidth: 240
}}>
<ScrollArea
id='chat-scroll-area'
type="never"
sx={{
height: generating ? height - px('8rem') : height - px('5rem'),
width: chatContainerRect.width,
padding: 0,
margin: 0,
}}
onScrollPositionChange={onScrollPositionChange}
viewportRef={scrollViewport}>
<MessageContainer generating={generating} messages={messages} chatContainerRect={chatContainerRect} responsed={responsed} />
</ScrollArea>
<Stack
spacing={5}
sx={{ position: 'absolute', bottom: 10, width: chatContainerRect.width }}>
{generating &&
<Center>
<StopButton />
</Center>
}
{hasError &&
<Center>
<RegenerationButton />
</Center>
}
{contexts && contexts.length > 0 &&
<Accordion variant="contained" chevronPosition="left"
const InputContexts = (props: any) => {
const { contexts } = props;
return (<Accordion variant="contained" chevronPosition="left"
sx={{
backgroundColor: 'var(--vscode-menu-background)',
}}
@ -826,10 +789,10 @@ const chatPanel = () => {
borderRadius: 3,
backgroundColor: 'var(--vscode-menu-background)',
}
}}
>
}}>
{
contexts.map(({ context }, index) => {
contexts.map((item: any, index: number) => {
const { context } = item;
return (
<Accordion.Item value={`item-${index}`} >
<Box sx={{
@ -869,7 +832,49 @@ const chatPanel = () => {
);
})
}
</Accordion>
</Accordion>);
};
return (
<Container
id='chat-container'
ref={chatContainerRef}
sx={{
height: '100%',
margin: 0,
padding: 10,
background: 'var(--vscode-sideBar-background)',
color: 'var(--vscode-editor-foreground)',
minWidth: 240
}}>
<ScrollArea
id='chat-scroll-area'
type="never"
sx={{
height: generating ? height - px('8rem') : height - px('5rem'),
width: chatContainerRect.width,
padding: 0,
margin: 0,
}}
onScrollPositionChange={onScrollPositionChange}
viewportRef={scrollViewport}>
<MessageContainer generating={generating} messages={messages} chatContainerRect={chatContainerRect} responsed={responsed} />
</ScrollArea>
<Stack
spacing={5}
sx={{ position: 'absolute', bottom: 10, width: chatContainerRect.width }}>
{generating &&
<Center>
<StopButton />
</Center>
}
{hasError &&
<Center>
<RegenerationButton />
</Center>
}
{contexts && contexts.length > 0 &&
<InputContexts contexts={contexts} />
}
<Popover
id='commandMenu'