perf: ui

client/src/pages/chat/components/ChatHistorySlider.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import {
   Box,
   Button,
@@ -11,6 +11,7 @@ import {
   IconButton
 } from '@chakra-ui/react';
 import { useGlobalStore } from '@/store/global';
+import { useEditInfo } from '@/hooks/useEditInfo';
 import { useRouter } from 'next/router';
 import Avatar from '@/components/Avatar';
 import MyTooltip from '@/components/MyTooltip';
@@ -19,6 +20,7 @@ import MyIcon from '@/components/Icon';
 type HistoryItemType = {
   id: string;
   title: string;
+  customTitle?: string;
   top?: boolean;
 };
 
@@ -27,29 +29,34 @@ const ChatHistorySlider = ({
   appName,
   appAvatar,
   history,
-  activeHistoryId,
+  activeChatId,
   onChangeChat,
   onDelHistory,
   onSetHistoryTop,
-  onUpdateTitle
+  onSetCustomTitle
 }: {
   appId?: string;
   appName: string;
   appAvatar: string;
   history: HistoryItemType[];
-  activeHistoryId: string;
-  onChangeChat: (historyId?: string) => void;
-  onDelHistory: (historyId: string) => void;
-  onSetHistoryTop?: (e: { historyId: string; top: boolean }) => void;
-  onUpdateTitle?: (e: { historyId: string; title: string }) => void;
+  activeChatId: string;
+  onChangeChat: (chatId?: string) => void;
+  onDelHistory: (chatId: string) => void;
+  onSetHistoryTop?: (e: { chatId: string; top: boolean }) => void;
+  onSetCustomTitle?: (e: { chatId: string; title: string }) => void;
 }) => {
   const theme = useTheme();
   const router = useRouter();
   const { isPc } = useGlobalStore();
+  // custom title edit
+  const { onOpenModal, EditModal: EditTitleModal } = useEditInfo({
+    title: '自定义历史记录标题',
+    placeholder: '如果设置为空，会自动跟随聊天记录。'
+  });
 
   const concatHistory = useMemo<HistoryItemType[]>(
-    () => (!activeHistoryId ? [{ id: activeHistoryId, title: '新对话' }].concat(history) : history),
-    [activeHistoryId, history]
+    () => (!activeChatId ? [{ id: activeChatId, title: '新对话' }].concat(history) : history),
+    [activeChatId, history]
   );
 
   return (
@@ -121,7 +128,7 @@ const ChatHistorySlider = ({
               }
             }}
             bg={item.top ? '#E6F6F6 !important' : ''}
-            {...(item.id === activeHistoryId
+            {...(item.id === activeChatId
               ? {
                   backgroundColor: 'myBlue.100 !important',
                   color: 'myBlue.700'
@@ -132,9 +139,9 @@ const ChatHistorySlider = ({
                   }
                 })}
           >
-            <MyIcon name={item.id === activeHistoryId ? 'chatFill' : 'chatLight'} w={'16px'} />
+            <MyIcon name={item.id === activeChatId ? 'chatFill' : 'chatLight'} w={'16px'} />
             <Box flex={'1 0 0'} ml={3} className="textEllipsis">
-              {item.title}
+              {item.customTitle || item.title}
             </Box>
             {!!item.id && (
               <Box className="more" display={['block', 'none']}>
@@ -154,20 +161,24 @@ const ChatHistorySlider = ({
                       <MenuItem
                         onClick={(e) => {
                           e.stopPropagation();
-                          onSetHistoryTop({ historyId: item.id, top: !item.top });
+                          onSetHistoryTop({ chatId: item.id, top: !item.top });
                         }}
                       >
                         <MyIcon mr={2} name={'setTop'} w={'16px'}></MyIcon>
                         {item.top ? '取消置顶' : '置顶'}
                       </MenuItem>
                     )}
-                    {onUpdateTitle && (
+                    {onSetCustomTitle && (
                       <MenuItem
                         onClick={(e) => {
                           e.stopPropagation();
-                          onUpdateTitle({
-                            historyId: item.id,
-                            title: '是是是'
+                          onOpenModal({
+                            defaultVal: item.customTitle || item.title,
+                            onSuccess: (e) =>
+                              onSetCustomTitle({
+                                chatId: item.id,
+                                title: e
+                              })
                           });
                         }}
                       >
@@ -180,7 +191,7 @@ const ChatHistorySlider = ({
                       onClick={(e) => {
                         e.stopPropagation();
                         onDelHistory(item.id);
-                        if (item.id === activeHistoryId) {
+                        if (item.id === activeChatId) {
                           onChangeChat();
                         }
                       }}
@@ -218,6 +229,7 @@ const ChatHistorySlider = ({
           切换应用
         </Flex>
       )}
+      <EditTitleModal />
     </Flex>
   );
 };

client/src/pages/chat/index.tsx

@@ -26,7 +26,7 @@ import ChatHeader from './components/ChatHeader';
 
 const Chat = () => {
   const router = useRouter();
-  const { appId = '', historyId = '' } = router.query as { appId: string; historyId: string };
+  const { appId = '', chatId = '' } = router.query as { appId: string; chatId: string };
   const theme = useTheme();
 
   const ChatBoxRef = useRef<ComponentRef>(null);
@@ -35,8 +35,8 @@ const Chat = () => {
   const {
     lastChatAppId,
     setLastChatAppId,
-    lastHistoryId,
-    setLastHistoryId,
+    lastChatId,
+    setLastChatId,
     history,
     loadHistory,
     updateHistory,
@@ -52,12 +52,12 @@ const Chat = () => {
   const startChat = useCallback(
     async ({ messages, controller, generatingMessage, variables }: StartChatFnProps) => {
       const prompts = messages.slice(-2);
-      const { responseText, newHistoryId, rawSearch } = await streamFetch({
+      const { responseText, newChatId, rawSearch } = await streamFetch({
         data: {
           messages: prompts,
           variables,
           appId,
-          historyId
+          chatId
         },
         onMessage: generatingMessage,
         abortSignal: controller
@@ -66,27 +66,27 @@ const Chat = () => {
       const newTitle = prompts[0].content?.slice(0, 20) || '新对话';
 
       // update history
-      if (newHistoryId) {
+      if (newChatId) {
         forbidRefresh.current = true;
-        router.replace({
-          query: {
-            historyId: newHistoryId,
-            appId
-          }
-        });
         const newHistory: ChatHistoryItemType = {
-          _id: newHistoryId,
+          _id: newChatId,
           updateTime: new Date(),
           title: newTitle,
           appId,
           top: false
         };
         updateHistory(newHistory);
+        router.replace({
+          query: {
+            chatId: newChatId,
+            appId
+          }
+        });
       } else {
-        const currentHistory = history.find((item) => item._id === historyId);
-        currentHistory &&
+        const currentChat = history.find((item) => item._id === chatId);
+        currentChat &&
           updateHistory({
-            ...currentHistory,
+            ...currentChat,
             updateTime: new Date(),
             title: newTitle
           });
@@ -100,41 +100,41 @@ const Chat = () => {
 
       return { responseText, rawSearch };
     },
-    [appId, history, historyId, router, setChatData, updateHistory]
+    [appId, chatId, history, router, setChatData, updateHistory]
   );
 
   // 删除一句话
   const delOneHistoryItem = useCallback(
     async ({ contentId, index }: { contentId?: string; index: number }) => {
-      if (!historyId || !contentId) return;
+      if (!chatId || !contentId) return;
 
       try {
         setChatData((state) => ({
           ...state,
           history: state.history.filter((_, i) => i !== index)
         }));
-        await delChatRecordByIndex({ historyId, contentId });
+        await delChatRecordByIndex({ chatId, contentId });
       } catch (err) {
         console.log(err);
       }
     },
-    [historyId, setChatData]
+    [chatId, setChatData]
   );
 
   // get chat app info
   const loadChatInfo = useCallback(
     async ({
       appId,
-      historyId,
+      chatId,
       loading = false
     }: {
       appId: string;
-      historyId: string;
+      chatId: string;
       loading?: boolean;
     }) => {
       try {
         loading && setIsLoading(true);
-        const res = await getInitChatSiteInfo({ appId, historyId });
+        const res = await getInitChatSiteInfo({ appId, chatId });
         const history = res.history.map((item) => ({
           ...item,
           status: 'finish' as any
@@ -166,22 +166,22 @@ const Chat = () => {
       } catch (e: any) {
         // reset all chat tore
         setLastChatAppId('');
-        setLastHistoryId('');
+        setLastChatId('');
         router.replace('/chat');
       }
       setIsLoading(false);
       return null;
     },
-    [setIsLoading, setChatData, router, setLastChatAppId, setLastHistoryId]
+    [setIsLoading, setChatData, router, setLastChatAppId, setLastChatId]
   );
   // 初始化聊天框
-  useQuery(['init', appId, historyId], () => {
+  useQuery(['init', appId, chatId], () => {
     // pc: redirect to latest model chat
     if (!appId && lastChatAppId) {
       router.replace({
         query: {
           appId: lastChatAppId,
-          historyId: lastHistoryId
+          chatId: lastChatId
         }
       });
       return null;
@@ -189,7 +189,7 @@ const Chat = () => {
 
     // store id
     appId && setLastChatAppId(appId);
-    setLastHistoryId(historyId);
+    setLastChatId(chatId);
 
     if (forbidRefresh.current) {
       forbidRefresh.current = false;
@@ -198,7 +198,7 @@ const Chat = () => {
 
     return loadChatInfo({
       appId,
-      historyId,
+      chatId,
       loading: appId !== chatData.appId
     });
   });
@@ -231,16 +231,17 @@ const Chat = () => {
               appId={appId}
               appName={chatData.app.name}
               appAvatar={chatData.app.avatar}
-              activeHistoryId={historyId}
+              activeChatId={chatId}
               history={history.map((item) => ({
                 id: item._id,
                 title: item.title,
+                customTitle: item.customTitle,
                 top: item.top
               }))}
-              onChangeChat={(historyId) => {
+              onChangeChat={(chatId) => {
                 router.push({
                   query: {
-                    historyId: historyId || '',
+                    chatId: chatId || '',
                     appId
                   }
                 });
@@ -252,7 +253,7 @@ const Chat = () => {
               onSetHistoryTop={async (e) => {
                 try {
                   await putChatHistory(e);
-                  const historyItem = history.find((item) => item._id === e.historyId);
+                  const historyItem = history.find((item) => item._id === e.chatId);
                   if (!historyItem) return;
                   updateHistory({
                     ...historyItem,
@@ -260,17 +261,17 @@ const Chat = () => {
                   });
                 } catch (error) {}
               }}
-              onUpdateTitle={async (e) => {
+              onSetCustomTitle={async (e) => {
                 try {
                   await putChatHistory({
-                    historyId: e.historyId,
+                    chatId: e.chatId,
                     customTitle: e.title
                   });
-                  const historyItem = history.find((item) => item._id === e.historyId);
+                  const historyItem = history.find((item) => item._id === e.chatId);
                   if (!historyItem) return;
                   updateHistory({
                     ...historyItem,
-                    title: e.title
+                    customTitle: e.title
                   });
                 } catch (error) {}
               }}
@@ -297,7 +298,7 @@ const Chat = () => {
               <ChatBox
                 ref={ChatBoxRef}
                 showEmptyIntro
-                historyId={historyId}
+                chatId={chatId}
                 appAvatar={chatData.app.avatar}
                 variableModules={chatData.app.variableModules}
                 welcomeText={chatData.app.welcomeText}

client/src/pages/chat/share.tsx

@@ -19,7 +19,7 @@ const ChatHistorySlider = dynamic(() => import('./components/ChatHistorySlider')
   ssr: false
 });
 
-const ShareChat = ({ shareId, historyId }: { shareId: string; historyId: string }) => {
+const ShareChat = ({ shareId, chatId }: { shareId: string; chatId: string }) => {
   const router = useRouter();
   const { toast } = useToast();
   const { isOpen: isOpenSlider, onClose: onCloseSlider, onOpen: onOpenSlider } = useDisclosure();
@@ -33,7 +33,7 @@ const ShareChat = ({ shareId, historyId }: { shareId: string; historyId: string
     shareChatHistory,
     saveChatResponse,
     delShareChatHistoryItemById,
-    delOneShareHistoryByHistoryId,
+    delOneShareHistoryByChatId,
     delManyShareChatHistoryByShareId
   } = useShareChatStore();
 
@@ -60,7 +60,7 @@ const ShareChat = ({ shareId, historyId }: { shareId: string; historyId: string
 
       /* save chat */
       const { newChatId } = saveChatResponse({
-        historyId,
+        chatId,
         prompts: gptMessage2ChatType(prompts).map((item) => ({
           ...item,
           status: 'finish'
@@ -73,7 +73,7 @@ const ShareChat = ({ shareId, historyId }: { shareId: string; historyId: string
         router.replace({
           query: {
             shareId,
-            historyId: newChatId
+            chatId: newChatId
           }
         });
       }
@@ -88,15 +88,15 @@ const ShareChat = ({ shareId, historyId }: { shareId: string; historyId: string
 
       return { responseText };
     },
-    [historyId, router, saveChatResponse, shareChatData.maxContext, shareId]
+    [chatId, router, saveChatResponse, shareChatData.maxContext, shareId]
   );
 
   const loadAppInfo = useCallback(
-    async (shareId: string, historyId: string) => {
-      console.log(shareId, historyId);
+    async (shareId: string, chatId: string) => {
+      console.log(shareId, chatId);
 
       if (!shareId) return null;
-      const history = shareChatHistory.find((item) => item._id === historyId) || defaultHistory;
+      const history = shareChatHistory.find((item) => item._id === chatId) || defaultHistory;
 
       ChatBoxRef.current?.resetHistory(history.chats);
       ChatBoxRef.current?.resetVariables(history.variables);
@@ -134,8 +134,8 @@ const ShareChat = ({ shareId, historyId }: { shareId: string; historyId: string
     [delManyShareChatHistoryByShareId, setShareChatData, shareChatData, shareChatHistory, toast]
   );
 
-  useQuery(['init', shareId, historyId], () => {
-    return loadAppInfo(shareId, historyId);
+  useQuery(['init', shareId, chatId], () => {
+    return loadAppInfo(shareId, chatId);
   });
 
   return (
@@ -156,15 +156,15 @@ const ShareChat = ({ shareId, historyId }: { shareId: string; historyId: string
           <ChatHistorySlider
             appName={shareChatData.app.name}
             appAvatar={shareChatData.app.avatar}
-            activeHistoryId={historyId}
+            activeChatId={chatId}
             history={shareChatHistory.map((item) => ({
               id: item._id,
               title: item.title
             }))}
-            onChangeChat={(historyId) => {
+            onChangeChat={(chatId) => {
               router.push({
                 query: {
-                  historyId: historyId || '',
+                  chatId: chatId || '',
                   shareId
                 }
               });
@@ -172,7 +172,7 @@ const ShareChat = ({ shareId, historyId }: { shareId: string; historyId: string
                 onCloseSlider();
               }
             }}
-            onDelHistory={delOneShareHistoryByHistoryId}
+            onDelHistory={delOneShareHistoryByChatId}
           />
         )}
 
@@ -208,7 +208,7 @@ const ShareChat = ({ shareId, historyId }: { shareId: string; historyId: string
                 }));
               }}
               onStartChat={startChat}
-              onDelMessage={({ index }) => delShareChatHistoryItemById({ historyId, index })}
+              onDelMessage={({ index }) => delShareChatHistoryItemById({ chatId, index })}
             />
           </Box>
         </Flex>
@@ -219,10 +219,10 @@ const ShareChat = ({ shareId, historyId }: { shareId: string; historyId: string
 
 export async function getServerSideProps(context: any) {
   const shareId = context?.query?.shareId || '';
-  const historyId = context?.query?.historyId || '';
+  const chatId = context?.query?.chatId || '';
 
   return {
-    props: { shareId, historyId }
+    props: { shareId, chatId }
   };
 }