feat: context box

client/public/docs/versionIntro.md

@@ -1,5 +1,10 @@
-### Fast GPT V4.0-preview
+### Fast GPT V4.1-preview
 
-1. 全新交互，采用模块组合的方式构建知识库。
+preview 版本尚未稳定，请以测试为主。正式版上线前可能会初始化或删除部分对话/应用数据。
+
+1. 全新交互，增加采用模块组合的方式构建知识库，同时保留表单的简易模式。
 2. 问题分类 - 可以对用户的问题进行分类，再执行不同的操作。
-3. beta 版本尚未稳定，请以测试为主。详细使用文档后续会补上。
+3. 对话引导 - 增加开场引导和变量，提高对话可玩性。
+4. 新增 - 每轮对话均可展示完整的上下文状态。
+5. 优化 - OpenAPI 接口可直接传入 chatId 作为上下文标记。
+6. 优化 - 模块调度方案。

client/src/components/ChatBox/ContextModal.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalBody,
+  ModalCloseButton,
+  ModalHeader,
+  Box,
+  useTheme
+} from '@chakra-ui/react';
+import { ChatItemType } from '@/types/chat';
+
+const ContextModal = ({
+  context = [],
+  onClose
+}: {
+  context: ChatItemType[];
+  onClose: () => void;
+}) => {
+  const theme = useTheme();
+
+  return (
+    <>
+      <Modal isOpen={true} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent
+          position={'relative'}
+          maxW={'min(90vw, 700px)'}
+          h={'80vh'}
+          overflow={'overlay'}
+        >
+          <ModalHeader>完整对话记录({context.length}条)</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody pt={0} whiteSpace={'pre-wrap'} textAlign={'justify'} fontSize={'sm'}>
+            {context.map((item, i) => (
+              <Box
+                key={i}
+                p={2}
+                borderRadius={'lg'}
+                border={theme.borders.base}
+                _notLast={{ mb: 2 }}
+                position={'relative'}
+              >
+                <Box fontWeight={'bold'}>{item.obj}</Box>
+                <Box>{item.value}</Box>
+              </Box>
+            ))}
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default ContextModal;

client/src/components/ChatBox/ResponseDetailModal.tsx

@@ -1,12 +1,13 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { ChatModuleEnum } from '@/constants/chat';
-import { ChatHistoryItemResType, QuoteItemType } from '@/types/chat';
+import { ChatHistoryItemResType, ChatItemType, QuoteItemType } from '@/types/chat';
 import { Flex, BoxProps } from '@chakra-ui/react';
 import { updateHistoryQuote } from '@/api/chat';
 import dynamic from 'next/dynamic';
 import Tag from '../Tag';
 import MyTooltip from '../MyTooltip';
 const QuoteModal = dynamic(() => import('./QuoteModal'), { ssr: false });
+const ContextModal = dynamic(() => import('./ContextModal'), { ssr: false });
 
 const ResponseDetailModal = ({
   chatId,
@@ -18,6 +19,7 @@ const ResponseDetailModal = ({
   responseData?: ChatHistoryItemResType[];
 }) => {
   const [quoteModalData, setQuoteModalData] = useState<QuoteItemType[]>();
+  const [contextModalData, setContextModalData] = useState<ChatItemType[]>();
 
   const {
     tokens = 0,
@@ -60,8 +62,13 @@ const ResponseDetailModal = ({
         </MyTooltip>
       )}
       {completeMessages.length > 0 && (
-        <MyTooltip label={'提示词和限定词分别算 1 条上下文'} forceShow>
-          <Tag colorSchema="green" cursor={'default'} {...TagStyles}>
+        <MyTooltip label={'点击查看完整对话记录'} forceShow>
+          <Tag
+            colorSchema="green"
+            cursor={'pointer'}
+            {...TagStyles}
+            onClick={() => setContextModalData(completeMessages)}
+          >
             {completeMessages.length}条上下文
           </Tag>
         </MyTooltip>
@@ -71,17 +78,6 @@ const ResponseDetailModal = ({
           {tokens}tokens
         </Tag>
       )}
-      {/* <Button
-        size={'sm'}
-        variant={'base'}
-        borderRadius={'md'}
-        fontSize={'xs'}
-        px={2}
-        lineHeight={1}
-        py={1}
-      >
-        完整参数
-      </Button> */}
       {!!quoteModalData && (
         <QuoteModal
           rawSearch={quoteModalData}
@@ -89,6 +85,9 @@ const ResponseDetailModal = ({
           onClose={() => setQuoteModalData(undefined)}
         />
       )}
+      {!!contextModalData && (
+        <ContextModal context={contextModalData} onClose={() => setContextModalData(undefined)} />
+      )}
     </Flex>
   );
 };

client/src/pages/api/admin/initChat.ts

@@ -2,8 +2,7 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 import { jsonRes } from '@/service/response';
 import { authUser } from '@/service/utils/auth';
-import { connectToDatabase, TrainingData, User, promotionRecord, Chat } from '@/service/mongo';
-import { PRICE_SCALE } from '@/constants/common';
+import { connectToDatabase, Chat } from '@/service/mongo';
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   try {

client/src/pages/app/detail/components/Edit/components/TemplateList.tsx

@@ -1,18 +1,18 @@
-import React, { useRef } from 'react';
-import { Box, Flex, useOutsideClick } from '@chakra-ui/react';
+import React from 'react';
+import { Box, Flex } from '@chakra-ui/react';
 import { ModuleTemplates } from '@/constants/flow/ModuleTemplate';
-import type { FlowModuleItemType } from '@/types/app';
+import { FlowModuleTemplateType } from '@/types/flow';
 import type { XYPosition } from 'reactflow';
 import { useGlobalStore } from '@/store/global';
 import Avatar from '@/components/Avatar';
 
-const ModuleStoreList = ({
+const ModuleTemplateList = ({
   isOpen,
   onAddNode,
   onClose
 }: {
   isOpen: boolean;
-  onAddNode: (e: { template: FlowModuleItemType; position: XYPosition }) => void;
+  onAddNode: (e: { template: FlowModuleTemplateType; position: XYPosition }) => void;
   onClose: () => void;
 }) => {
   const { isPc } = useGlobalStore();
@@ -92,4 +92,4 @@ const ModuleStoreList = ({
   );
 };
 
-export default ModuleStoreList;
+export default ModuleTemplateList;

client/src/pages/app/detail/components/Edit/index.tsx

@@ -154,7 +154,7 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
     [setEdges, setNodes]
   );
   const onAddNode = useCallback(
-    ({ template, position }: { template: FlowModuleItemType; position: XYPosition }) => {
+    ({ template, position }: { template: FlowModuleTemplateType; position: XYPosition }) => {
       if (!reactFlowWrapper.current) return;
       const reactFlowBounds = reactFlowWrapper.current.getBoundingClientRect();
       const mouseX = (position.x - reactFlowBounds.left - x) / zoom - 100;

client/src/pages/app/detail/components/Share.tsx

@@ -115,7 +115,6 @@ const Share = ({ appId }: { appId: string }) => {
           <Thead>
             <Tr>
               <Th>名称</Th>
-              <Th>最大上下文</Th>
               <Th>金额消耗</Th>
               <Th>最后使用时间</Th>
               <Th>操作</Th>
@@ -125,7 +124,6 @@ const Share = ({ appId }: { appId: string }) => {
             {shareChatList.map((item) => (
               <Tr key={item._id}>
                 <Td>{item.name}</Td>
-                <Td>{item.maxContext}</Td>
                 <Td>{formatPrice(item.total)}元</Td>
                 <Td>{item.lastTime ? formatTimeToChatTime(item.lastTime) : '未使用'}</Td>
                 <Td>
@@ -197,42 +195,6 @@ const Share = ({ appId }: { appId: string }) => {
                 />
               </Flex>
             </FormControl>
-            <FormControl mt={9}>
-              <Flex alignItems={'center'}>
-                <Box flex={'0 0 120px'} w={0}>
-                  最长上下文（组）
-                </Box>
-                <Slider
-                  aria-label="slider-ex-1"
-                  min={1}
-                  max={20}
-                  step={1}
-                  value={getShareChatValues('maxContext')}
-                  onChange={(e) => {
-                    setShareChatValues('maxContext', e);
-                    setRefresh(!refresh);
-                  }}
-                >
-                  <SliderMark
-                    value={getShareChatValues('maxContext')}
-                    textAlign="center"
-                    bg="myBlue.600"
-                    color="white"
-                    w={'18px'}
-                    h={'18px'}
-                    borderRadius={'100px'}
-                    fontSize={'xs'}
-                    transform={'translate(-50%, -200%)'}
-                  >
-                    {getShareChatValues('maxContext')}
-                  </SliderMark>
-                  <SliderTrack>
-                    <SliderFilledTrack bg={'myBlue.700'} />
-                  </SliderTrack>
-                  <SliderThumb />
-                </Slider>
-              </Flex>
-            </FormControl>
           </ModalBody>
 
           <ModalFooter>

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

@@ -110,10 +110,10 @@ const ChatHistorySlider = ({
 
       {/* chat history */}
       <Box flex={'1 0 0'} h={0} px={[2, 5]} overflow={'overlay'}>
-        {concatHistory.map((item) => (
+        {concatHistory.map((item, i) => (
           <Flex
             position={'relative'}
-            key={item.id}
+            key={item.id || `${i}`}
             alignItems={'center'}
             py={3}
             px={4}

client/src/pages/chat/index.tsx

@@ -249,7 +249,7 @@ const Chat = ({ appId, chatId }: { appId: string; chatId: string }) => {
               appName={chatData.app.name}
               appAvatar={chatData.app.avatar}
               activeChatId={chatId}
-              history={history.map((item) => ({
+              history={history.map((item, i) => ({
                 id: item.chatId,
                 title: item.title,
                 customTitle: item.customTitle,