perf: text and avatar

src/pages/chat/components/Empty.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { Card, Box, Image, Flex } from '@chakra-ui/react';
+import { Card, Box, Flex } from '@chakra-ui/react';
 import { useMarkdown } from '@/hooks/useMarkdown';
 import Markdown from '@/components/Markdown';
 import { LOGO_ICON } from '@/constants/chat';
+import Avatar from '@/components/Avatar';
 
 const Empty = ({
   showChatProblem,
@@ -31,13 +32,7 @@ const Empty = ({
       {name && (
         <Card p={4} mb={10}>
           <Flex mb={2} alignItems={'center'} justifyContent={'center'}>
-            <Image
-              src={avatar || LOGO_ICON}
-              w={'32px'}
-              maxH={'40px'}
-              objectFit={'contain'}
-              alt={''}
-            />
+            <Avatar src={avatar} w={'32px'} h={'32px'} />
             <Box ml={3} fontSize={'3xl'} fontWeight={'bold'}>
               {name}
             </Box>

src/pages/chat/components/ModelList.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { Box, Flex, Image } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import { ModelListItemType } from '@/types/model';
+import Avatar from '@/components/Avatar';
 
 const ModelList = ({ models, modelId }: { models: ModelListItemType[]; modelId: string }) => {
   const router = useRouter();
@@ -32,19 +33,13 @@ const ModelList = ({ models, modelId }: { models: ModelListItemType[]; modelId:
               router.replace(`/chat?modelId=${item._id}`);
             }}
           >
-            <Image
-              src={item.avatar || '/icon/logo.png'}
-              alt=""
-              w={'34px'}
-              maxH={'50px'}
-              objectFit={'contain'}
-            />
+            <Avatar src={item.avatar} w={'34px'} h={'34px'} />
             <Box flex={'1 0 0'} w={0} ml={3}>
               <Box className="textEllipsis" color={'myGray.1000'}>
                 {item.name}
               </Box>
               <Box className="textEllipsis" color={'myGray.400'} fontSize={'sm'}>
-                {item.systemPrompt || '这个AI助手没有设置提示词~'}
+                {item.systemPrompt || '这个 应用 没有设置提示词~'}
               </Box>
             </Box>
           </Flex>

src/pages/chat/components/PhoneSliderBar.tsx

@@ -7,8 +7,7 @@ import {
   Divider,
   useDisclosure,
   useColorMode,
-  useColorModeValue,
-  Image
+  useColorModeValue
 } from '@chakra-ui/react';
 import { useUserStore } from '@/store/user';
 import { useQuery } from '@tanstack/react-query';
@@ -17,6 +16,7 @@ import MyIcon from '@/components/Icon';
 import WxConcat from '@/components/WxConcat';
 import { delChatHistoryById } from '@/api/chat';
 import { useChatStore } from '@/store/chat';
+import Avatar from '@/components/Avatar';
 
 const PhoneSliderBar = ({
   chatId,
@@ -74,7 +74,7 @@ const PhoneSliderBar = ({
       color={'white'}
     >
       <Flex alignItems={'center'} justifyContent={'space-between'} px={3}>
-        <Box flex={'0 0 50px'}>AI助手</Box>
+        <Box flex={'0 0 50px'}>AI应用</Box>
         {/* 新对话 */}
         <Button
           w={'50%'}
@@ -115,7 +115,7 @@ const PhoneSliderBar = ({
                 onClose();
               }}
             >
-              <Image src={item.avatar || '/icon/logo.png'} mr={2} alt={''} w={'16px'} h={'16px'} />
+              <Avatar src={item.avatar} mr={2} w={'18px'} h={'18px'} />
               <Box className={'textEllipsis'} flex={'1 0 0'} w={0}>
                 {item.name}
               </Box>

src/pages/chat/index.tsx

@@ -16,7 +16,6 @@ import {
   MenuButton,
   MenuList,
   MenuItem,
-  Image,
   Button,
   Modal,
   ModalOverlay,
@@ -51,6 +50,7 @@ import { useUserStore } from '@/store/user';
 import Loading from '@/components/Loading';
 import Markdown from '@/components/Markdown';
 import SideBar from '@/components/SideBar';
+import Avatar from '@/components/Avatar';
 import Empty from './components/Empty';
 
 const PhoneSliderBar = dynamic(() => import('./components/PhoneSliderBar'), {
@@ -595,7 +595,7 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
             borderBottom={theme.borders.base}
             onClick={() => router.push(`/model?modelId=${chatData.modelId}`)}
           >
-            AI助手详情
+            应用详情
           </MenuItem>
         )}
         {hasVoiceApi && (
@@ -654,9 +654,9 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
           >
             {!isPc && (
               <MyIcon
-                name={'tabbarMore'}
-                w={'14px'}
-                h={'14px'}
+                name={'menu'}
+                w={'20px'}
+                h={'20px'}
                 color={useColorModeValue('blackAlpha.700', 'white')}
                 onClick={onOpenSlider}
               />
@@ -734,19 +734,15 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
                             ml: ['6px', 2]
                           })}
                     >
-                      <Tooltip label={item.obj === 'AI' ? 'AI助手详情' : ''}>
-                        <Image
-                          className="avatar"
+                      <Tooltip label={item.obj === 'AI' ? '应用详情' : ''}>
+                        <Avatar
                           src={
                             item.obj === 'Human'
                               ? userInfo?.avatar || '/icon/human.png'
                               : chatData.model.avatar || LOGO_ICON
                           }
-                          alt="avatar"
                           w={['20px', '34px']}
                           h={['20px', '34px']}
-                          borderRadius={'50%'}
-                          objectFit={'contain'}
                         />
                       </Tooltip>
                     </MenuButton>

src/pages/chat/share.tsx

@@ -11,7 +11,6 @@ import {
   MenuButton,
   MenuList,
   MenuItem,
-  Image,
   Button,
   Modal,
   ModalOverlay,
@@ -48,6 +47,7 @@ import { useUserStore } from '@/store/user';
 import Loading from '@/components/Loading';
 import Markdown from '@/components/Markdown';
 import SideBar from '@/components/SideBar';
+import Avatar from '@/components/Avatar';
 import Empty from './components/Empty';
 
 const ShareHistory = dynamic(() => import('./components/ShareHistory'), {
@@ -564,9 +564,9 @@ const Chat = ({ shareId, historyId }: { shareId: string; historyId: string }) =>
         >
           {!isPc && (
             <MyIcon
-              name={'tabbarMore'}
-              w={'14px'}
-              h={'14px'}
+              name={'menu'}
+              w={'20px'}
+              h={'20px'}
               color={useColorModeValue('blackAlpha.700', 'white')}
               onClick={onOpenSlider}
             />
@@ -626,19 +626,15 @@ const Chat = ({ shareId, historyId }: { shareId: string; historyId: string }) =>
                           ml: ['6px', 2]
                         })}
                   >
-                    <Tooltip label={item.obj === 'AI' ? 'AI助手详情' : ''}>
-                      <Image
-                        className="avatar"
+                    <Tooltip label={item.obj === 'AI' ? '应用详情' : ''}>
+                      <Avatar
                         src={
                           item.obj === 'Human'
                             ? userInfo?.avatar || '/icon/human.png'
                             : shareChatData.model.avatar || LOGO_ICON
                         }
-                        alt="avatar"
                         w={['20px', '34px']}
                         h={['20px', '34px']}
-                        borderRadius={'50%'}
-                        objectFit={'contain'}
                       />
                     </Tooltip>
                   </MenuButton>