perf: chat ui

public/docs/csvSelect.md

-接受一个csv文件，表格头包含 question 和 answer。question 代表问题，answer 代表答案。 
-导入前会进行去重，如果问题和答案完全相同，则不会被导入，所以最终导入的内容可能会比文件的内容少。但是，对于带有换行的内容，目前无法去重。
+接受一个 csv 文件，表格头包含 question 和 answer。question 代表问题，answer 代表答案。
+导入前会进行去重，如果问题和答案完全相同，则不会被导入，所以最终导入的内容可能会比文件的内容少。但是，对于带有换行的内容，目前无法去重。  
+**请保证 csv 文件为 utf-8 编码**  
 | question | answer |
-| --- | --- | 
-| 什么是 laf  | laf 是一个云函数开发平台…… |
+| --- | --- |
+| 什么是 laf | laf 是一个云函数开发平台…… |
 | 什么是 sealos | Sealos 是以 kubernetes 为内核的云操作系统发行版,可以…… |

src/api/chat.ts

@@ -27,7 +27,7 @@ export const postSaveChat = (data: {
   modelId: string;
   newChatId: '' | string;
   chatId: '' | string;
-  prompts: ChatItemType[];
+  prompts: [ChatItemType, ChatItemType];
 }) => POST<string>('/chat/saveChat', data);
 
 /**

src/components/Layout/navbar.tsx

@@ -17,12 +17,6 @@ const Navbar = () => {
   const navbarList = useMemo(
     () => [
       {
-        label: 'AI助手',
-        icon: 'model',
-        link: `/model?modelId=${lastModelId}`,
-        activeLink: ['/model']
-      },
-      {
         label: '聊天',
         icon: 'chat',
         link: `/chat?modelId=${lastChatModelId}&chatId=${lastChatId}`,
@@ -30,6 +24,12 @@ const Navbar = () => {
       },
 
       {
+        label: 'AI助手',
+        icon: 'model',
+        link: `/model?modelId=${lastModelId}`,
+        activeLink: ['/model']
+      },
+      {
         label: '共享',
         icon: 'shareMarket',
         link: '/model/share',

src/components/Layout/navbarPhone.tsx

@@ -10,18 +10,18 @@ const NavbarPhone = () => {
   const navbarList = useMemo(
     () => [
       {
-        label: 'AI助手',
-        icon: 'tabbarModel',
-        link: `/model`,
-        activeLink: ['/model']
-      },
-      {
         label: '聊天',
         icon: 'tabbarChat',
         link: `/chat?modelId=${lastChatModelId}&chatId=${lastChatId}`,
         activeLink: ['/chat']
       },
       {
+        label: 'AI助手',
+        icon: 'tabbarModel',
+        link: `/model`,
+        activeLink: ['/model']
+      },
+      {
         label: '发现',
         icon: 'tabbarMore',
         link: '/tools',

src/pages/api/chat/saveChat.ts

@@ -13,7 +13,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       newChatId: '' | string;
       chatId: '' | string;
       modelId: string;
-      prompts: ChatItemType[];
+      prompts: [ChatItemType, ChatItemType];
     };
 
     if (!prompts) {
@@ -41,7 +41,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         modelId,
         content,
         title: content[0].value.slice(0, 20),
-        latestChat: content[content.length - 1].value
+        latestChat: content[1].value
       });
       return jsonRes(res, {
         data: _id
@@ -54,8 +54,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
             $each: content
           }
         },
-        updateTime: new Date(),
-        latestChat: content[content.length - 1].value
+        title: content[0].value.slice(0, 20),
+        latestChat: content[1].value,
+        updateTime: new Date()
       });
     }
     jsonRes(res);

src/pages/chat/components/PhoneSliderBar.tsx

@@ -172,7 +172,7 @@ const PhoneSliderBar = ({
 
       <Divider my={3} colorScheme={useColorModeValue('gray', 'white')} />
 
-      <RenderButton onClick={() => router.push('/')}>
+      <RenderButton onClick={() => router.push('/model')}>
         <>
           <MyIcon name="out" fill={'white'} w={'18px'} h={'18px'} mr={4} />
           退出聊天

src/pages/model/components/detail/components/ModelEditForm.tsx

@@ -145,7 +145,7 @@ const ModelEditForm = ({
         </Flex>
         {isOwner && (
           <Flex mt={5} alignItems={'center'}>
-            <Box flex={'0 0 150px'}>删除AI和知识库</Box>
+            <Box flex={'0 0 120px'}>删除AI和知识库</Box>
             <Button
               colorScheme={'gray'}
               variant={'outline'}

src/pages/model/share/index.tsx

@@ -17,7 +17,7 @@ const modelList = () => {
   /* 加载模型 */
   const { data, isLoading, Pagination, getData, pageNum } = usePagination<ShareModelItem>({
     api: getShareModelList,
-    pageSize: 20,
+    pageSize: 24,
     params: {
       searchText
     }

src/utils/tools.ts

@@ -88,3 +88,28 @@ export const formatTimeToChatTime = (time: Date) => {
   // 如果是更久之前，展示某年某月某日
   return target.format('YYYY/M/D');
 };
+
+/**
+ * voice broadcast
+ */
+export const voiceBroadcast = ({ text }: { text: string }) => {
+  window.speechSynthesis?.cancel();
+  const msg = new SpeechSynthesisUtterance(text);
+  const voices = window.speechSynthesis?.getVoices?.(); // 获取语言包
+  const voice = voices.find((item) => {
+    return item.name === 'Microsoft Yaoyao - Chinese (Simplified, PRC)';
+  });
+  if (voice) {
+    msg.voice = voice;
+  }
+
+  window.speechSynthesis?.speak(msg);
+
+  msg.onerror = (e) => {
+    console.log(e);
+  };
+
+  return {
+    cancel: () => window.speechSynthesis?.cancel()
+  };
+};