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

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

@ -1,6 +1,6 @@
import * as React 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 { useInterval, useResizeObserver, useTimeout, useViewportSize } from '@mantine/hooks';
import messageUtil from '@/util/MessageUtil';
@ -121,18 +121,18 @@ const chatPanel = observer(() => {
return (
<Box
ref={chatContainerRef}
miw={310}
sx={{
height: '100%',
margin: 0,
padding: '10px 10px 5px 10px',
background: 'var(--vscode-sideBar-background)',
color: 'var(--vscode-editor-foreground)',
minWidth: 240
color: 'var(--vscode-editor-foreground)'
}}>
{!chat.isBottom && <ActionIcon
onClick={() => { scrollToBottom() }}
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" />
</ActionIcon>}
<ScrollArea
@ -161,7 +161,7 @@ const chatPanel = observer(() => {
</ScrollArea>
<Stack
spacing={0}
sx={{ position: 'absolute', bottom: 10, width: 'calc(100% - 20px)' }}>
sx={{ position: 'absolute', bottom: 10, width: chatPanelWidth - 20 }}>
{chat.generating &&
<Center mb={5}>
<StopButton />
@ -173,32 +173,23 @@ const chatPanel = observer(() => {
</Center>
}
<InputMessage chatPanelWidth={chatPanelWidth} />
<Flex
gap="md"
justify="flex-start"
align="center"
direction="row"
wrap="wrap">
<Radio.Group
value={chat.chatModel}
onChange={(value) => {
chat.changeChatModel(value);
messageUtil.sendMessage({
command: 'updateSetting',
key1: "DevChat",
key2: "OpenAI.model",
value: value
});
}}
withAsterisk>
<Group mt="xs">
<Radio size="xs" value="gpt-4" label="gpt-4" />
<Radio size="xs" value="gpt-3.5-turbo" label="gpt-3.5-turbo" />
<Radio size="xs" value="gpt-3.5-turbo-16k" label="gpt-3.5-turbo-16k" />
</Group>
</Radio.Group>
</Flex>
<Chip.Group multiple={false}
value={chat.chatModel}
onChange={(value) => {
chat.changeChatModel(value);
messageUtil.sendMessage({
command: 'updateSetting',
key1: "DevChat",
key2: "OpenAI.model",
value: value
});
}} >
<Group position="left" spacing={5} mt={5}>
<Chip size="xs" value="gpt-4">GPT-4</Chip>
<Chip size="xs" value="gpt-3.5-turbo">GPT-3.5</Chip>
<Chip size="xs" value="gpt-3.5-turbo-16k">GPT-3.5-16K</Chip>
</Group>
</Chip.Group>
</Stack>
</Box>
);