feat: context box

6fc6c994 · archer · 6fd83e1e · 6fc6c994 · 6fc6c994 · 6fc6c994
Commit 6fc6c994 authored Jul 23, 2023 by archer
9 changed files
--- a/client/public/docs/versionIntro.md
+++ b/client/public/docs/versionIntro.md
-### Fast GPT V4.0-preview
+### Fast GPT V4.1-preview
-1. 全新交互，采用模块组合的方式构建知识库。
+preview 版本尚未稳定，请以测试为主。正式版上线前可能会初始化或删除部分对话/应用数据。
+1. 全新交互，增加采用模块组合的方式构建知识库，同时保留表单的简易模式。
 2. 问题分类 - 可以对用户的问题进行分类，再执行不同的操作。
-3. beta 版本尚未稳定，请以测试为主。详细使用文档后续会补上。
+3. 对话引导 - 增加开场引导和变量，提高对话可玩性。
+4. 新增 - 每轮对话均可展示完整的上下文状态。
+5. 优化 - OpenAPI 接口可直接传入 chatId 作为上下文标记。
+6. 优化 - 模块调度方案。
--- a/client/src/components/ChatBox/ContextModal.tsx
+++ b/client/src/components/ChatBox/ContextModal.tsx
+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;
--- a/client/src/components/ChatBox/ResponseDetailModal.tsx
+++ b/client/src/components/ChatBox/ResponseDetailModal.tsx
 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>
+        <MyTooltip label={'点击查看完整对话记录'} forceShow>
-          <Tag colorSchema="green" cursor={'default'} {...TagStyles}>
+          <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>
  );
 };

--- a/client/src/pages/api/admin/initChat.ts
+++ b/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 { connectToDatabase, Chat } from '@/service/mongo';
-import { PRICE_SCALE } from '@/constants/common';
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {

--- a/client/src/pages/app/detail/components/Edit/components/TemplateList.tsx
+++ b/client/src/pages/app/detail/components/Edit/components/TemplateList.tsx
-import React, { useRef } from 'react';
+import React from 'react';
-import { Box, Flex, useOutsideClick } from '@chakra-ui/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;
--- a/client/src/pages/app/detail/components/Edit/index.tsx
+++ b/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;

--- a/client/src/pages/app/detail/components/Share.tsx
+++ b/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>

--- a/client/src/pages/chat/components/ChatHistorySlider.tsx
+++ b/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}

--- a/client/src/pages/chat/index.tsx
+++ b/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,