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

feat: Add avatars and icons to chat panel

Browse Source 
Add avatars and icons to the chat panel to improve the user interface. Also, add a demo code block to show how to use the Button component. The demo code block is currently commented out.
This commit is contained in:
Rankin Zheng 2023-05-05 09:48:05 +08:00
parent 6eef4b2a78
commit 6f998ef956
1 changed files with 46 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/views/ChatPanel.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react';
import { useState } from 'react';
import { Container } from '@mantine/core';
import { Avatar, Container, Divider, Flex, Grid, Stack } from '@mantine/core';
import { Input, Tooltip } from '@mantine/core';
import { List } from '@mantine/core';
import { ScrollArea } from '@mantine/core';
@ -8,8 +8,9 @@ import { createStyles } from '@mantine/core';
import { ActionIcon } from '@mantine/core';
import { Menu, Button, Text } from '@mantine/core';
import { useViewportSize } from '@mantine/hooks';
import { IconSend, IconSquareRoundedPlus } from '@tabler/icons-react';
import { IconEdit, IconRobot, IconSend, IconSquareRoundedPlus, IconUser } from '@tabler/icons-react';
import { IconSettings, IconSearch, IconPhoto, IconMessageCircle, IconTrash, IconArrowsLeftRight } from '@tabler/icons-react';
import { Prism } from '@mantine/prism';
const useStyles = createStyles((theme, _params, classNames) => ({
panel: {
@ -46,6 +47,11 @@ const chatPanel = () => {
const { classes } = useStyles();
const { height, width } = useViewportSize();
const demoCode = `import { Button } from '@mantine/core';
function Demo() {
return <Button>Hello</Button>
}`;
const handlePlusBottonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setOpened(!opened);
event.stopPropagation();
@ -66,13 +72,44 @@ const chatPanel = () => {
return (
<Container className={classes.panel} onClick={handleContainerClick}>
<ScrollArea h={height - 70} type="never">
<List>
<List.Item>Clone or download repository from GitHub</List.Item>
<List.Item>Install dependencies with yarn</List.Item>
<List.Item>To start development server run npm start command</List.Item>
<List.Item>Run tests to make sure your changes do not break the build</List.Item>
<List.Item>Submit a pull request once you are done</List.Item>
</List>
<Flex
mih={50}
gap="md"
justify="flex-start"
align="center"
direction="row"
wrap="wrap"
>
<Avatar src={null} alt="no image here" >
<IconUser size="1.125rem" />
</Avatar>
<Text>
Write a hello world, and explain it.
</Text>
<ActionIcon>
<IconEdit size="1.125rem" />
</ActionIcon>
</Flex>
<Divider />
<Flex
mih={50}
gap="md"
justify="flex-start"
align="center"
direction="row"
wrap="wrap"
>
<Avatar>
<IconRobot size="1.125rem" />
</Avatar>
{/* <Prism language="tsx">{demoCode}</Prism> */}
<Text>
Write a hello world, and explain it.
</Text>
<ActionIcon>
<IconEdit size="1.125rem" />
</ActionIcon>
</Flex>
</ScrollArea>
<Menu id='plusMenu' shadow="md" width={200} opened={opened} onChange={setOpened} >
<Menu.Dropdown className={classes.plusMenu}>