Refactor ChatPanel to handle missing contexts

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

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,7 +264,11 @@ const chatPanel = () => {
paddingLeft: 0,
paddingRight: 0,
width: 'calc(100% - 62px)',
pre: {
whiteSpace: 'break-spaces'
}
}}>
{contexts &&
<Accordion variant="contained" chevronPosition="left" style={{ backgroundColor: '#FFF' }}>
{
contexts?.map(({ context }, index) => {
@ -289,6 +294,7 @@ const chatPanel = () => {
})
}
</Accordion>
}
<ReactMarkdown
components={{
code({ node, inline, className, children, ...props }) {
@ -393,7 +399,9 @@ const chatPanel = () => {
viewportRef={scrollViewport}>
{messageList.length > 0 ? messageList : defaultMessages}
</ScrollArea>
<Stack sx={{ position: 'absolute', bottom: 10, width: scrollViewport.current?.clientWidth }}>
<Stack
sx={{ position: 'absolute', bottom: 10, width: scrollViewport.current?.clientWidth }}>
{contexts &&
<Accordion variant="contained" chevronPosition="left" style={{ backgroundColor: '#FFF' }}>
{
contexts.map(({ context }, index) => {
@ -427,6 +435,7 @@ const chatPanel = () => {
})
}
</Accordion>
}
<Menu
id='commandMenu'
position='top-start'