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

Update UI elements and styles in ChatPanel component

Browse Source 
- Imported Chip from '@mantine/core' for better UI representation.
- Adjusted minimum width and bottom position of the chat panel for better layout.
- Replaced Radio.Group with Chip.Group for selecting chat model, improving user interaction.
- Removed unnecessary Flex container wrapping the chat model selection.
This commit is contained in:
Rankin Zheng 2023-08-25 12:13:13 +08:00
parent 3430a7f199
commit e71d4c9209
1 changed files with 22 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/views/pages/ChatPanel.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import { useEffect, useRef } from 'react'; import { useEffect, useRef } from 'react';
import { ActionIcon, Alert, Anchor, Box, Button, Center, Container, Flex, Group, Radio, Stack, px } from '@mantine/core'; import { ActionIcon, Alert, Anchor, Box, Button, Center, Chip, Container, Flex, Group, Radio, Stack, px } from '@mantine/core';
import { ScrollArea } from '@mantine/core'; import { ScrollArea } from '@mantine/core';
import { useInterval, useResizeObserver, useTimeout, useViewportSize } from '@mantine/hooks'; import { useInterval, useResizeObserver, useTimeout, useViewportSize } from '@mantine/hooks';
import messageUtil from '@/util/MessageUtil'; import messageUtil from '@/util/MessageUtil';
@ -121,18 +121,18 @@ const chatPanel = observer(() => {
return ( return (
<Box <Box
ref={chatContainerRef} ref={chatContainerRef}
miw={310}
sx={{ sx={{
height: '100%', height: '100%',
margin: 0, margin: 0,
padding: '10px 10px 5px 10px', padding: '10px 10px 5px 10px',
background: 'var(--vscode-sideBar-background)', background: 'var(--vscode-sideBar-background)',
color: 'var(--vscode-editor-foreground)', color: 'var(--vscode-editor-foreground)'
minWidth: 240
}}> }}>
{!chat.isBottom && <ActionIcon {!chat.isBottom && <ActionIcon
onClick={() => { scrollToBottom() }} onClick={() => { scrollToBottom() }}
title='Bottom' title='Bottom'
variant='transparent' sx={{ position: "absolute", bottom: 75, right: 20, zIndex: 999 }}> variant='transparent' sx={{ position: "absolute", bottom: 80, right: 20, zIndex: 1 }}>
<IconCircleArrowDownFilled size="1.125rem" /> <IconCircleArrowDownFilled size="1.125rem" />
</ActionIcon>} </ActionIcon>}
<ScrollArea <ScrollArea
@ -161,7 +161,7 @@ const chatPanel = observer(() => {
</ScrollArea> </ScrollArea>
<Stack <Stack
spacing={0} spacing={0}
sx={{ position: 'absolute', bottom: 10, width: 'calc(100% - 20px)' }}> sx={{ position: 'absolute', bottom: 10, width: chatPanelWidth - 20 }}>
{chat.generating && {chat.generating &&
<Center mb={5}> <Center mb={5}>
<StopButton /> <StopButton />
@ -173,14 +173,7 @@ const chatPanel = observer(() => {
</Center> </Center>
} }
<InputMessage chatPanelWidth={chatPanelWidth} /> <InputMessage chatPanelWidth={chatPanelWidth} />
<Flex <Chip.Group multiple={false}
gap="md"
justify="flex-start"
align="center"
direction="row"
wrap="wrap">
<Radio.Group
value={chat.chatModel} value={chat.chatModel}
onChange={(value) => { onChange={(value) => {
chat.changeChatModel(value); chat.changeChatModel(value);
@ -190,15 +183,13 @@ const chatPanel = observer(() => {
key2: "OpenAI.model", key2: "OpenAI.model",
value: value value: value
}); });
}} }} >
withAsterisk> <Group position="left" spacing={5} mt={5}>
<Group mt="xs"> <Chip size="xs" value="gpt-4">GPT-4</Chip>
<Radio size="xs" value="gpt-4" label="gpt-4" /> <Chip size="xs" value="gpt-3.5-turbo">GPT-3.5</Chip>
<Radio size="xs" value="gpt-3.5-turbo" label="gpt-3.5-turbo" /> <Chip size="xs" value="gpt-3.5-turbo-16k">GPT-3.5-16K</Chip>
<Radio size="xs" value="gpt-3.5-turbo-16k" label="gpt-3.5-turbo-16k" />
</Group> </Group>
</Radio.Group> </Chip.Group>
</Flex>
</Stack> </Stack>
</Box> </Box>
); );