feat: save system prompt

src/pages/api/chat/chat.ts

@@ -41,7 +41,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     await connectToDatabase();
     let startTime = Date.now();
 
-    const { model, content, userApiKey, systemKey, userId } = await authChat({
+    const { model, showModelDetail, content, userApiKey, systemKey, userId } = await authChat({
       modelId,
       chatId,
       authorization
@@ -120,7 +120,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const { responseContent } = await gpt35StreamResponse({
       res,
       stream,
-      chatResponse
+      chatResponse,
+      systemPrompt:
+        showModelDetail && filterPrompts[0].role === 'system' ? filterPrompts[0].content : ''
     });
 
     // 只有使用平台的 key 才计费

src/pages/api/chat/init.ts

@@ -48,7 +48,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
           $project: {
             _id: '$content._id',
             obj: '$content.obj',
-            value: '$content.value'
+            value: '$content.value',
+            systemPrompt: '$content.systemPrompt'
           }
         }
       ]);

src/pages/api/chat/saveChat.ts

@@ -26,7 +26,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const content = prompts.map((item) => ({
       _id: new mongoose.Types.ObjectId(item._id),
       obj: item.obj,
-      value: item.value
+      value: item.value,
+      systemPrompt: item.systemPrompt
     }));
 
     await authModel({ modelId, userId, authOwner: false });

src/pages/chat/index.tsx

@@ -16,7 +16,13 @@ import {
   MenuButton,
   MenuList,
   MenuItem,
-  Image
+  Image,
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalBody,
+  ModalCloseButton
 } from '@chakra-ui/react';
 import { useToast } from '@/hooks/useToast';
 import { useScreen } from '@/hooks/useScreen';
@@ -29,7 +35,7 @@ import { streamFetch } from '@/api/fetch';
 import Icon from '@/components/Icon';
 import MyIcon from '@/components/Icon';
 import { throttle } from 'lodash';
-import mongoose from 'mongoose';
+import { Types } from 'mongoose';
 
 const SlideBar = dynamic(() => import('./components/SlideBar'));
 const Empty = dynamic(() => import('./components/Empty'));
@@ -67,7 +73,8 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
     history: []
   }); // 聊天框整体数据
 
-  const [inputVal, setInputVal] = useState(''); // 输入的内容
+  const [inputVal, setInputVal] = useState(''); // user input prompt
+  const [showSystemPrompt, setShowSystemPrompt] = useState('');
 
   const isChatting = useMemo(
     () => chatData.history[chatData.history.length - 1]?.status === 'loading',
@@ -199,7 +206,7 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
       };
 
       // 流请求，获取数据
-      const responseText = await streamFetch({
+      const { responseText, systemPrompt } = await streamFetch({
         url: '/api/chat/chat',
         data: {
           prompt,
@@ -228,7 +235,7 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
       }
 
       let newChatId = '';
-      // 保存对话信息
+      // save chat record
       try {
         newChatId = await postSaveChat({
           modelId,
@@ -242,7 +249,8 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
             {
               _id: prompts[1]._id,
               obj: 'AI',
-              value: responseText
+              value: responseText,
+              systemPrompt
             }
           ]
         });
@@ -266,7 +274,8 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
           if (index !== state.history.length - 1) return item;
           return {
             ...item,
-            status: 'finish'
+            status: 'finish',
+            systemPrompt
           };
         })
       }));
@@ -300,13 +309,13 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
     const newChatList: ChatSiteItemType[] = [
       ...chatData.history,
       {
-        _id: String(new mongoose.Types.ObjectId()),
+        _id: String(new Types.ObjectId()),
         obj: 'Human',
         value: val,
         status: 'finish'
       },
       {
-        _id: String(new mongoose.Types.ObjectId()),
+        _id: String(new Types.ObjectId()),
         obj: 'AI',
         value: '',
         status: 'loading'
@@ -492,10 +501,24 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
                 </Menu>
                 <Box flex={'1 0 0'} w={0} overflow={'hidden'}>
                   {item.obj === 'AI' ? (
-                    <Markdown
-                      source={item.value}
-                      isChatting={isChatting && index === chatData.history.length - 1}
-                    />
+                    <>
+                      <Markdown
+                        source={item.value}
+                        isChatting={isChatting && index === chatData.history.length - 1}
+                      />
+                      {item.systemPrompt && (
+                        <Button
+                          size={'xs'}
+                          mt={2}
+                          fontWeight={'normal'}
+                          colorScheme={'gray'}
+                          variant={'outline'}
+                          onClick={() => setShowSystemPrompt(item.systemPrompt || '')}
+                        >
+                          查看提示词
+                        </Button>
+                      )}
+                    </>
                   ) : (
                     <Box className="markdown" whiteSpace={'pre-wrap'}>
                       <Box as={'p'}>{item.value}</Box>
@@ -617,6 +640,19 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
           </Box>
         </Box>
       </Flex>
+
+      {/* system prompt show modal */}
+      {
+        <Modal isOpen={!!showSystemPrompt} onClose={() => setShowSystemPrompt('')}>
+          <ModalOverlay />
+          <ModalContent maxW={'min(90vw, 600px)'} pr={2} maxH={'80vh'} overflowY={'auto'}>
+            <ModalCloseButton />
+            <ModalBody pt={10} fontSize={'sm'} whiteSpace={'pre-wrap'} textAlign={'justify'}>
+              {showSystemPrompt}
+            </ModalBody>
+          </ModalContent>
+        </Modal>
+      }
     </Flex>
   );
 };