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

17
webpack.config.js
View File

@ -136,12 +136,13 @@ const webviewConfig = {
type: 'asset/source'
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
test: /\.(png|jpg|jpeg|gif|svg)$/, // 匹配文件类型
use: [
{
loader: 'url-loader',
loader: 'file-loader', // 使用file-loader
options: {
limit: 8192,
name: '[name].[ext]', // 输出文件的名称和扩展名
outputPath: 'assets/', // 输出文件的路径
},
},
],
@ -159,11 +160,11 @@ const webviewConfig = {
filename: 'index.html',
chunks: ['index']
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src', 'welcome.html'),
filename: 'welcome.html',
chunks: ['welcome']
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src', 'welcome.html'),
filename: 'welcome.html',
chunks: ['welcome']
}),
new CopyWebpackPlugin({
patterns: [
{ from: 'assets', to: 'assets' },