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

feat: Update ChatPanel UI

Browse Source 
- Update the avatar images to use SVG format
- Use file-loader instead of url-loader to load image assets

The commit updates the ChatPanel UI by replacing the avatar images with SVG format and using file-loader instead of url-loader to load image assets.
This commit is contained in:
Rankin Zheng 2023-05-18 13:58:17 +08:00
parent 795b0a2f4a
commit a780474c2b
2 changed files with 18 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/views/ChatPanel/index.tsx
View File

@ -1,24 +1,21 @@
import * as React from 'react'; import * as React from 'react';
import { useState, useEffect, useRef } from 'react'; import { useState, useEffect, useRef } from 'react';
import { Accordion, AccordionControlProps, Avatar, Box, Center, Code, Container, CopyButton, Divider, Flex, Grid, Popover, Stack, Textarea, TypographyStylesProvider, px, rem, useMantineTheme } from '@mantine/core'; import { Image, Accordion, Avatar, Box, Center, Container, CopyButton, Divider, Flex, Popover, Stack, Textarea, px, useMantineTheme } from '@mantine/core';
import { Input, Tooltip } from '@mantine/core'; import { Tooltip } from '@mantine/core';
import { List } from '@mantine/core';
import { ScrollArea } from '@mantine/core'; import { ScrollArea } from '@mantine/core';
import { createStyles, keyframes } from '@mantine/core'; import { createStyles, keyframes } from '@mantine/core';
import { ActionIcon } from '@mantine/core'; import { ActionIcon } from '@mantine/core';
import { Menu, Button, Text } from '@mantine/core'; import { Button, Text } from '@mantine/core';
import { useElementSize, useInterval, useListState, useResizeObserver, useTimeout, useViewportSize, useWindowScroll } from '@mantine/hooks'; import { useListState, useResizeObserver, useTimeout, useViewportSize } from '@mantine/hooks';
import { IconAdjustments, IconBulb, IconCameraSelfie, IconCheck, IconClick, IconColumnInsertRight, IconCopy, IconDots, IconEdit, IconFileDiff, IconFolder, IconGitCommit, IconGitCompare, IconMessageDots, IconMessagePlus, IconPlayerStop, IconPrinter, IconPrompt, IconReplace, IconRobot, IconSend, IconSquareRoundedPlus, IconTerminal2, IconUser, IconX } from '@tabler/icons-react'; import { IconBulb, IconCheck, IconColumnInsertRight, IconCopy, IconFileDiff, IconGitCommit, IconMessagePlus, IconPlayerStop, IconReplace, IconSend, IconSquareRoundedPlus, IconTerminal2, IconX } from '@tabler/icons-react';
import { IconSettings, IconSearch, IconPhoto, IconMessageCircle, IconTrash, IconArrowsLeftRight } from '@tabler/icons-react';
import { Prism } from '@mantine/prism';
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import okaidia from 'react-syntax-highlighter/dist/esm/styles/prism/okaidia'; import okaidia from 'react-syntax-highlighter/dist/esm/styles/prism/okaidia';
import messageUtil from '../../util/MessageUtil'; import messageUtil from '../../util/MessageUtil';
// @ts-ignore // @ts-ignore
import avatarDevChat from './avatar_devchat.svg'; import SvgAvatarDevChat from './assets/avatar_devchat.svg';
// @ts-ignore // @ts-ignore
import avatarUser from './avatar_user.svg'; import SvgAvatarUser from './assets/avatar_user.svg';
const blink = keyframes({ const blink = keyframes({
'50%': { opacity: 0 }, '50%': { opacity: 0 },
@ -379,8 +376,8 @@ const chatPanel = () => {
> >
{ {
messageType === 'bot' messageType === 'bot'
? <Avatar color="indigo" size='sm' radius="xl" className={classes.avatar} src={avatarDevChat} /> ? <Avatar color="indigo" size='sm' radius="xl" className={classes.avatar} src={SvgAvatarDevChat} />
: <Avatar color="cyan" size='sm' radius="xl" className={classes.avatar} src={avatarUser} /> : <Avatar color="cyan" size='sm' radius="xl" className={classes.avatar} src={SvgAvatarUser} />
} }
<Container sx={{ <Container sx={{

7
webpack.config.js
View File

@ -136,12 +136,13 @@ const webviewConfig = {
type: 'asset/source' type: 'asset/source'
}, },
{ {
test: /\.(png|jpe?g|gif|svg)$/i, test: /\.(png|jpg|jpeg|gif|svg)$/, // 匹配文件类型
use: [ use: [
{ {
loader: 'url-loader', loader: 'file-loader', // 使用file-loader
options: { options: {
limit: 8192, name: '[name].[ext]', // 输出文件的名称和扩展名
outputPath: 'assets/', // 输出文件的路径
}, },
}, },
], ],