Refactor: Extract InputContexts component in ChatPanel
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
parent
d500fe63f1
commit
ba32f21082
@ -745,6 +745,96 @@ const chatPanel = () => {
|
|||||||
</Button>);
|
</Button>);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const InputContexts = (props: any) => {
|
||||||
|
const { contexts } = props;
|
||||||
|
return (<Accordion variant="contained" chevronPosition="left"
|
||||||
|
sx={{
|
||||||
|
backgroundColor: 'var(--vscode-menu-background)',
|
||||||
|
}}
|
||||||
|
styles={{
|
||||||
|
item: {
|
||||||
|
borderColor: 'var(--vscode-menu-border)',
|
||||||
|
backgroundColor: 'var(--vscode-menu-background)',
|
||||||
|
'&[data-active]': {
|
||||||
|
backgroundColor: 'var(--vscode-menu-background)',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
control: {
|
||||||
|
height: 30,
|
||||||
|
borderRadius: 3,
|
||||||
|
backgroundColor: 'var(--vscode-menu-background)',
|
||||||
|
'&[aria-expanded="true"]': {
|
||||||
|
borderBottomLeftRadius: 0,
|
||||||
|
borderBottomRightRadius: 0,
|
||||||
|
},
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'var(--vscode-menu-background)',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chevron: {
|
||||||
|
color: 'var(--vscode-menu-foreground)',
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
color: 'var(--vscode-menu-foreground)',
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
color: 'var(--vscode-menu-foreground)',
|
||||||
|
},
|
||||||
|
panel: {
|
||||||
|
color: 'var(--vscode-menu-foreground)',
|
||||||
|
backgroundColor: 'var(--vscode-menu-background)',
|
||||||
|
overflow: 'hidden',
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
borderRadius: 3,
|
||||||
|
backgroundColor: 'var(--vscode-menu-background)',
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
{
|
||||||
|
contexts.map((item: any, index: number) => {
|
||||||
|
const { context } = item;
|
||||||
|
return (
|
||||||
|
<Accordion.Item value={`item-${index}`} >
|
||||||
|
<Box sx={{
|
||||||
|
display: 'flex', alignItems: 'center',
|
||||||
|
backgroundColor: 'var(--vscode-menu-background)',
|
||||||
|
}}>
|
||||||
|
<Accordion.Control w={'calc(100% - 40px)'}>
|
||||||
|
{'command' in context ? context.command : context.path}
|
||||||
|
</Accordion.Control>
|
||||||
|
<ActionIcon
|
||||||
|
mr={8}
|
||||||
|
size="sm"
|
||||||
|
sx={{
|
||||||
|
color: 'var(--vscode-menu-foreground)',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'var(--vscode-toolbar-activeBackground)'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
contextsHandlers.remove(index);
|
||||||
|
}}>
|
||||||
|
<IconX size="1rem" />
|
||||||
|
</ActionIcon>
|
||||||
|
</Box>
|
||||||
|
<Accordion.Panel mah={300}>
|
||||||
|
<ScrollArea h={300} type="never">
|
||||||
|
{
|
||||||
|
context.content
|
||||||
|
? <pre style={{ overflowWrap: 'normal' }}>{context.content}</pre>
|
||||||
|
: <Center>
|
||||||
|
<Text c='gray.3'>No content</Text>
|
||||||
|
</Center>
|
||||||
|
}
|
||||||
|
</ScrollArea>
|
||||||
|
</Accordion.Panel>
|
||||||
|
</Accordion.Item>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</Accordion>);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container
|
<Container
|
||||||
id='chat-container'
|
id='chat-container'
|
||||||
@ -784,92 +874,7 @@ const chatPanel = () => {
|
|||||||
</Center>
|
</Center>
|
||||||
}
|
}
|
||||||
{contexts && contexts.length > 0 &&
|
{contexts && contexts.length > 0 &&
|
||||||
<Accordion variant="contained" chevronPosition="left"
|
<InputContexts contexts={contexts} />
|
||||||
sx={{
|
|
||||||
backgroundColor: 'var(--vscode-menu-background)',
|
|
||||||
}}
|
|
||||||
styles={{
|
|
||||||
item: {
|
|
||||||
borderColor: 'var(--vscode-menu-border)',
|
|
||||||
backgroundColor: 'var(--vscode-menu-background)',
|
|
||||||
'&[data-active]': {
|
|
||||||
backgroundColor: 'var(--vscode-menu-background)',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
control: {
|
|
||||||
height: 30,
|
|
||||||
borderRadius: 3,
|
|
||||||
backgroundColor: 'var(--vscode-menu-background)',
|
|
||||||
'&[aria-expanded="true"]': {
|
|
||||||
borderBottomLeftRadius: 0,
|
|
||||||
borderBottomRightRadius: 0,
|
|
||||||
},
|
|
||||||
'&:hover': {
|
|
||||||
backgroundColor: 'var(--vscode-menu-background)',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
chevron: {
|
|
||||||
color: 'var(--vscode-menu-foreground)',
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
color: 'var(--vscode-menu-foreground)',
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
color: 'var(--vscode-menu-foreground)',
|
|
||||||
},
|
|
||||||
panel: {
|
|
||||||
color: 'var(--vscode-menu-foreground)',
|
|
||||||
backgroundColor: 'var(--vscode-menu-background)',
|
|
||||||
overflow: 'hidden',
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
borderRadius: 3,
|
|
||||||
backgroundColor: 'var(--vscode-menu-background)',
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{
|
|
||||||
contexts.map(({ context }, index) => {
|
|
||||||
return (
|
|
||||||
<Accordion.Item value={`item-${index}`} >
|
|
||||||
<Box sx={{
|
|
||||||
display: 'flex', alignItems: 'center',
|
|
||||||
backgroundColor: 'var(--vscode-menu-background)',
|
|
||||||
}}>
|
|
||||||
<Accordion.Control w={'calc(100% - 40px)'}>
|
|
||||||
{'command' in context ? context.command : context.path}
|
|
||||||
</Accordion.Control>
|
|
||||||
<ActionIcon
|
|
||||||
mr={8}
|
|
||||||
size="sm"
|
|
||||||
sx={{
|
|
||||||
color: 'var(--vscode-menu-foreground)',
|
|
||||||
'&:hover': {
|
|
||||||
backgroundColor: 'var(--vscode-toolbar-activeBackground)'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onClick={() => {
|
|
||||||
contextsHandlers.remove(index);
|
|
||||||
}}>
|
|
||||||
<IconX size="1rem" />
|
|
||||||
</ActionIcon>
|
|
||||||
</Box>
|
|
||||||
<Accordion.Panel mah={300}>
|
|
||||||
<ScrollArea h={300} type="never">
|
|
||||||
{
|
|
||||||
context.content
|
|
||||||
? <pre style={{ overflowWrap: 'normal' }}>{context.content}</pre>
|
|
||||||
: <Center>
|
|
||||||
<Text c='gray.3'>No content</Text>
|
|
||||||
</Center>
|
|
||||||
}
|
|
||||||
</ScrollArea>
|
|
||||||
</Accordion.Panel>
|
|
||||||
</Accordion.Item>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</Accordion>
|
|
||||||
}
|
}
|
||||||
<Popover
|
<Popover
|
||||||
id='commandMenu'
|
id='commandMenu'
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user