feat: stop chat

8767c576 · archer · fb08f61e · 8767c576 · 8767c576 · fb08f61e
Commit 8767c576 authored Apr 25, 2023 by archer
7 changed files
--- a/public/docs/versionIntro.md
+++ b/public/docs/versionIntro.md
 ### Fast GPT V2.8.1
+* 新增 - 暂停聊天。
 * 优化 - 知识库升级，内容条数不上限！
 * 优化 - 导入去重效果，可防止导出后的 csv 重复导入。
 * 优化 - 聊天框，电脑端复制删除图标。

--- a/src/api/fetch.ts
+++ b/src/api/fetch.ts
@@ -6,7 +6,7 @@ interface StreamFetchProps {
  abortSignal: AbortController;
 }
 export const streamFetch = ({ url, data, onMessage, abortSignal }: StreamFetchProps) =>
-  new Promise(async (resolve, reject) => {
+  new Promise<string>(async (resolve, reject) => {
    try {
      const res = await fetch(url, {
        method: 'POST',
@@ -23,17 +23,14 @@ export const streamFetch = ({ url, data, onMessage, abortSignal }: StreamFetchPr
      let responseText = '';
      const read = async () => {
+        try {
          const { done, value } = await reader?.read();
          if (done) {
            if (res.status === 200) {
              resolve(responseText);
            } else {
-            try {
              const parseError = JSON.parse(responseText);
              reject(parseError?.message || '请求异常');
-            } catch (err) {
-              reject('请求异常');
-            }
            }
            return;
@@ -42,7 +39,14 @@ export const streamFetch = ({ url, data, onMessage, abortSignal }: StreamFetchPr
          res.status === 200 && onMessage(text);
          responseText += text;
          read();
+        } catch (err: any) {
+          if (err?.message === 'The user aborted a request.') {
+            return resolve(responseText);
+          }
+          reject(typeof err === 'string' ? err : err?.message || '请求异常');
+        }
      };
      read();
    } catch (err: any) {
      console.log(err, '====');

--- a/src/components/Icon/icons/chatting.svg
+++ b/src/components/Icon/icons/chatting.svg
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="204px" height="204px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
-<circle cx="84" cy="50" r="10" fill="#e15b64">
-    <animate attributeName="r" repeatCount="indefinite" dur="0.5681818181818182s" calcMode="spline" keyTimes="0;1" values="15;0" keySplines="0 0.5 0.5 1" begin="0s"></animate>
-    <animate attributeName="fill" repeatCount="indefinite" dur="2.272727272727273s" calcMode="discrete" keyTimes="0;0.25;0.5;0.75;1" values="#e15b64;#abbd81;#f8b26a;#f47e60;#e15b64" begin="0s"></animate>
-</circle><circle cx="16" cy="50" r="10" fill="#e15b64">
-  <animate attributeName="r" repeatCount="indefinite" dur="2.272727272727273s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;15;15;15" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"></animate>
-  <animate attributeName="cx" repeatCount="indefinite" dur="2.272727272727273s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"></animate>
-</circle><circle cx="50" cy="50" r="10" fill="#f47e60">
-  <animate attributeName="r" repeatCount="indefinite" dur="2.272727272727273s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;15;15;15" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.5681818181818182s"></animate>
-  <animate attributeName="cx" repeatCount="indefinite" dur="2.272727272727273s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.5681818181818182s"></animate>
-</circle><circle cx="84" cy="50" r="10" fill="#f8b26a">
-  <animate attributeName="r" repeatCount="indefinite" dur="2.272727272727273s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;15;15;15" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.1363636363636365s"></animate>
-  <animate attributeName="cx" repeatCount="indefinite" dur="2.272727272727273s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.1363636363636365s"></animate>
-</circle><circle cx="16" cy="50" r="10" fill="#abbd81">
-  <animate attributeName="r" repeatCount="indefinite" dur="2.272727272727273s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;15;15;15" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.7045454545454546s"></animate>
-  <animate attributeName="cx" repeatCount="indefinite" dur="2.272727272727273s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.7045454545454546s"></animate>
-</circle>
-<!-- [ldio] generated by https://loading.io/ --></svg>
\ No newline at end of file
--- a/src/components/Icon/icons/stop.svg
+++ b/src/components/Icon/icons/stop.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1682424901088" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3662" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M885.333333 85.333333H138.666667a53.393333 53.393333 0 0 0-53.333334 53.333334v746.666666a53.393333 53.393333 0 0 0 53.333334 53.333334h746.666666a53.393333 53.393333 0 0 0 53.333334-53.333334V138.666667a53.393333 53.393333 0 0 0-53.333334-53.333334z m-160 602.666667a37.373333 37.373333 0 0 1-37.333333 37.333333H336a37.373333 37.373333 0 0 1-37.333333-37.333333V336a37.373333 37.373333 0 0 1 37.333333-37.333333h352a37.373333 37.373333 0 0 1 37.333333 37.333333z"  p-id="3663"></path></svg>
\ No newline at end of file
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -13,12 +13,12 @@ const map = {
  board: require('./icons/board.svg').default,
  develop: require('./icons/develop.svg').default,
  user: require('./icons/user.svg').default,
-  chatting: require('./icons/chatting.svg').default,
  promotion: require('./icons/promotion.svg').default,
  delete: require('./icons/delete.svg').default,
  withdraw: require('./icons/withdraw.svg').default,
  dbModel: require('./icons/dbModel.svg').default,
-  history: require('./icons/history.svg').default
+  history: require('./icons/history.svg').default,
+  stop: require('./icons/stop.svg').default
 };
 export type IconName = keyof typeof map;

--- a/src/pages/chat/index.module.scss
+++ b/src/pages/chat/index.module.scss
+.stopIcon {
+  animation: zoomStopIcon 0.4s infinite alternate;
+}
+@keyframes zoomStopIcon {
+  0% {
+    transform: scale(0.8);
+  }
+  100% {
+    transform: scale(1.2);
+  }
+}
--- a/src/pages/chat/index.tsx
+++ b/src/pages/chat/index.tsx
@@ -36,6 +36,8 @@ const SlideBar = dynamic(() => import('./components/SlideBar'));
 const Empty = dynamic(() => import('./components/Empty'));
 const Markdown = dynamic(() => import('@/components/Markdown'));
+import styles from './index.module.scss';
 const textareaMinH = '22px';
 export type ChatSiteItemType = {
@@ -202,8 +204,9 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
        obj: prompts.obj,
        value: prompts.value
      };
      // 流请求，获取数据
-      const res = await streamFetch({
+      const responseText = await streamFetch({
        url: urlMap[chatData.modelName],
        data: {
          prompt,
@@ -226,22 +229,22 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
        abortSignal
      });
-      let id = '';
+      let newChatId = '';
      // 保存对话信息
      try {
-        id = await postSaveChat({
+        newChatId = await postSaveChat({
          modelId,
          chatId,
          prompts: [
            prompt,
            {
              obj: 'AI',
-              value: res as string
+              value: responseText
            }
          ]
        });
-        if (id) {
+        if (newChatId) {
-          router.replace(`/chat?modelId=${modelId}&chatId=${id}`);
+          router.replace(`/chat?modelId=${modelId}&chatId=${newChatId}`);
        }
      } catch (err) {
        toast({
@@ -252,10 +255,10 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
        });
      }
-      // 设置完成状态
+      // 设置聊天内容为完成状态
      setChatData((state) => ({
        ...state,
-        chatId: id || state.chatId, // 如果有 Id，说明是新创建的对话
+        chatId: newChatId || state.chatId, // 如果有 Id，说明是新创建的对话
        history: state.history.map((item, index) => {
          if (index !== state.history.length - 1) return item;
          return {
@@ -559,19 +562,23 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
            <Flex
              alignItems={'center'}
              justifyContent={'center'}
-              h={'30px'}
+              h={'25px'}
-              w={'30px'}
+              w={'25px'}
              position={'absolute'}
              right={['12px', '20px']}
              bottom={'15px'}
-              onClick={sendPrompt}
            >
              {isChatting ? (
                <Icon
-                  style={{ transform: 'translateY(4px)' }}
+                  className={styles.stopIcon}
-                  h={'30px'}
+                  width={['22px', '25px']}
-                  w={'30px'}
+                  height={['22px', '25px']}
-                  name={'chatting'}
+                  cursor={'pointer'}
+                  name={'stop'}
+                  color={useColorModeValue('gray.500', 'white')}
+                  onClick={() => {
+                    controller.current?.abort();
+                  }}
                />
              ) : (
                <Icon
@@ -579,8 +586,9 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
                  width={['18px', '20px']}
                  height={['18px', '20px']}
                  cursor={'pointer'}
-                  fill={useColorModeValue('#718096', 'white')}
+                  color={useColorModeValue('gray.500', 'white')}
-                ></Icon>
+                  onClick={sendPrompt}
+                />
              )}
            </Flex>
          </Box>