From 7529f51e7239cc30a238760a045829a756bf671f Mon Sep 17 00:00:00 2001
From: Archer <545436317@qq.com>
Date: Wed, 15 Mar 2023 21:36:56 +0800
Subject: [PATCH] temp
---
src/constants/theme.ts | 9 +-
src/pages/api/chat/chatGpt.ts | 11 +-
src/pages/chat/components/SlideBar.tsx | 19 ++
src/pages/chat/index.tsx | 280 ++++++++++++-------------
src/pages/model/list.tsx | 24 +--
src/service/response.ts | 2 +-
src/store/user.ts | 23 +-
7 files changed, 196 insertions(+), 172 deletions(-)
create mode 100644 src/pages/chat/components/SlideBar.tsx
diff --git a/src/constants/theme.ts b/src/constants/theme.ts
index 4b4618500..ec600973e 100644
--- a/src/constants/theme.ts
+++ b/src/constants/theme.ts
@@ -45,8 +45,13 @@ const Button = defineStyleConfig({
}
},
variants: {
- outline: {
- borderWidth: '1.5px'
+ white: {
+ color: '#fff',
+ backgroundColor: 'transparent',
+ border: '1px solid #ffffff',
+ _hover: {
+ backgroundColor: 'rgba(255,255,255,0.1)'
+ }
}
},
defaultProps: {
diff --git a/src/pages/api/chat/chatGpt.ts b/src/pages/api/chat/chatGpt.ts
index 9d9cf768e..cd2f3af9a 100644
--- a/src/pages/api/chat/chatGpt.ts
+++ b/src/pages/api/chat/chatGpt.ts
@@ -103,9 +103,14 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
}
};
- for await (const chunk of chatResponse.data as any) {
- const parser = createParser(onParse);
- parser.feed(decodeURIComponent(chunk));
+ const decoder = new TextDecoder();
+ try {
+ for await (const chunk of chatResponse.data as any) {
+ const parser = createParser(onParse);
+ parser.feed(decoder.decode(chunk));
+ }
+ } catch (error) {
+ console.log('pipe error', error);
}
pass.push(null);
} catch (err: any) {
diff --git a/src/pages/chat/components/SlideBar.tsx b/src/pages/chat/components/SlideBar.tsx
new file mode 100644
index 000000000..502f129cd
--- /dev/null
+++ b/src/pages/chat/components/SlideBar.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Box, Button } from '@chakra-ui/react';
+import { AddIcon } from '@chakra-ui/icons';
+
+const SlideBar = ({ resetChat }: { resetChat: () => void }) => {
+ return (
+
+ {/* 新对话 */}
+ } onClick={resetChat}>
+ 新对话
+
+ {/* 我的模型 */}
+
+ {/* 历史记录 */}
+
+ );
+};
+
+export default SlideBar;
diff --git a/src/pages/chat/index.tsx b/src/pages/chat/index.tsx
index fbfdfee11..f470cb466 100644
--- a/src/pages/chat/index.tsx
+++ b/src/pages/chat/index.tsx
@@ -12,12 +12,21 @@ import { OpenAiModelEnum } from '@/constants/model';
import dynamic from 'next/dynamic';
import { useGlobalStore } from '@/store/global';
import { streamFetch } from '@/api/fetch';
+import SlideBar from './components/SlideBar';
const Markdown = dynamic(() => import('@/components/Markdown'));
const textareaMinH = '22px';
-const Chat = ({ chatId, windowId }: { chatId: string; windowId?: string }) => {
+const Chat = ({
+ chatId,
+ windowId,
+ timeStamp
+}: {
+ chatId: string;
+ windowId?: string;
+ timeStamp: string;
+}) => {
const { toast } = useToast();
const router = useRouter();
const { isPc, media } = useScreen();
@@ -45,7 +54,7 @@ const Chat = ({ chatId, windowId }: { chatId: string; windowId?: string }) => {
// 初始化聊天框
useQuery(
- ['initData'],
+ ['initData', timeStamp],
() => {
setLoading(true);
return getInitChatSiteInfo(chatId, windowId);
@@ -53,7 +62,7 @@ const Chat = ({ chatId, windowId }: { chatId: string; windowId?: string }) => {
{
onSuccess(res) {
// 可能没有 windowId,给它设置一下
- router.replace(`/chat?chatId=${chatId}&windowId=${res.windowId}`);
+ router.replace(`/chat?chatId=${chatId}&windowId=${res.windowId}&timeStamp=${timeStamp}`);
setChatSiteData(res.chatSite);
setChatList(
@@ -92,8 +101,8 @@ const Chat = ({ chatId, windowId }: { chatId: string; windowId?: string }) => {
// 重载对话
const resetChat = useCallback(() => {
- window.open(`/chat?chatId=${chatId}`, '_self');
- }, [chatId]);
+ router.push(`/chat?chatId=${chatId}&timeStamp=${Date.now()}`);
+ }, [chatId, router]);
// gpt3 方法
const gpt3ChatPrompt = useCallback(
@@ -270,156 +279,124 @@ const Chat = ({ chatId, windowId }: { chatId: string; windowId?: string }) => {
}, [chatList, resetInputVal, windowId]);
return (
-
- {/* 头部 */}
-
- {chatSiteData?.name}
- {/* 滚动到底部按键 */}
- {ChatBox.current && ChatBox.current.scrollHeight > 2 * ChatBox.current.clientHeight && (
-
-
-
- )}
- {/* 重置按键 */}
-
-
- {/* 聊天内容 */}
-
- {chatList.map((item, index) => (
-
-
-
-
-
-
- {item.obj === 'AI' ? (
-
+
+
+ {/* 聊天内容 */}
+
+ {chatList.map((item, index) => (
+
+
+
+
+
+
+ {item.obj === 'AI' ? (
+
+ ) : (
+ {item.value}
+ )}
+
+
+
+ ))}
+
+ {/* 发送区 */}
+
+ {lastWordHuman ? (
+
+ 对话出现了异常
+
+
+
+
+
+ ) : (
+
+ {/* 输入框 */}
+
-
- ))}
-
- {/* 空内容提示 */}
- {/* {
- chatList.length === 0 && (
- <>
-
-内容太长
-
- >
- )
- } */}
-
- {lastWordHuman ? (
-
- 对话出现了异常
-
-
-
-
-
- ) : (
-
- {/* 输入框 */}
-
- )}
-
+ )}
+
+
);
};
@@ -429,8 +406,9 @@ export default Chat;
export async function getServerSideProps(context: any) {
const chatId = context.query?.chatId || '';
const windowId = context.query?.windowId || '';
+ const timeStamp = context.query?.timeStamp || `${Date.now()}`;
return {
- props: { chatId, windowId }
+ props: { chatId, windowId, timeStamp }
};
}
diff --git a/src/pages/model/list.tsx b/src/pages/model/list.tsx
index 70272009a..6168b0a40 100644
--- a/src/pages/model/list.tsx
+++ b/src/pages/model/list.tsx
@@ -1,6 +1,5 @@
import React, { useState, useCallback } from 'react';
import { Box, Button, Flex, Card } from '@chakra-ui/react';
-import { getMyModels } from '@/api/model';
import { getChatSiteId } from '@/api/chat';
import { ModelType } from '@/types/model';
import { useRouter } from 'next/router';
@@ -11,6 +10,7 @@ import { useQuery } from '@tanstack/react-query';
import { useLoading } from '@/hooks/useLoading';
import dynamic from 'next/dynamic';
import { useToast } from '@/hooks/useToast';
+import { useUserStore } from '@/store/user';
const CreateModel = dynamic(() => import('./components/CreateModel'));
@@ -18,22 +18,20 @@ const ModelList = () => {
const { toast } = useToast();
const { isPc } = useScreen();
const router = useRouter();
- const [models, setModels] = useState([]);
+ const { myModels, setMyModels, getMyModels } = useUserStore();
const [openCreateModel, setOpenCreateModel] = useState(false);
const { Loading, setIsLoading } = useLoading();
/* 加载模型 */
- const { isLoading } = useQuery(['loadModels'], () => getMyModels(), {
- onSuccess(res) {
- if (!res) return;
- setModels(res);
- }
- });
+ const { isLoading } = useQuery(['loadModels'], getMyModels);
/* 创建成功回调 */
- const createModelSuccess = useCallback((data: ModelType) => {
- setModels((state) => [data, ...state]);
- }, []);
+ const createModelSuccess = useCallback(
+ (data: ModelType) => {
+ setMyModels([data, ...myModels]);
+ },
+ [myModels, setMyModels]
+ );
/* 点前往聊天预览页 */
const handlePreviewChat = useCallback(
@@ -74,9 +72,9 @@ const ModelList = () => {
{/* 表单 */}
{isPc ? (
-
+
) : (
-
+
)}
{/* 创建弹窗 */}
diff --git a/src/service/response.ts b/src/service/response.ts
index fa04a0bfc..3bbf2909b 100644
--- a/src/service/response.ts
+++ b/src/service/response.ts
@@ -28,7 +28,7 @@ export const jsonRes = (
} else if (openaiError[error?.response?.statusText]) {
msg = openaiError[error.response.statusText];
}
-
+ // console.log(error?.response)
console.log('error->', error.code, error?.response?.statusText, msg);
}
diff --git a/src/store/user.ts b/src/store/user.ts
index ac8326a10..b1db09177 100644
--- a/src/store/user.ts
+++ b/src/store/user.ts
@@ -2,25 +2,30 @@ import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';
import type { UserType, UserUpdateParams } from '@/types/user';
+import type { ModelType } from '@/types/model';
import { setToken } from '@/utils/user';
+import { getMyModels } from '@/api/model';
type State = {
userInfo: UserType | null;
setUserInfo: (user: UserType, token?: string) => void;
updateUserInfo: (user: UserUpdateParams) => void;
+ myModels: ModelType[];
+ getMyModels: () => void;
+ setMyModels: (data: ModelType[]) => void;
};
export const useUserStore = create()(
devtools(
immer((set, get) => ({
userInfo: null,
- setUserInfo: (user: UserType, token?: string) => {
+ setUserInfo(user: UserType, token?: string) {
set((state) => {
state.userInfo = user;
});
token && setToken(token);
},
- updateUserInfo: (user: UserUpdateParams) => {
+ updateUserInfo(user: UserUpdateParams) {
set((state) => {
if (!state.userInfo) return;
state.userInfo = {
@@ -28,6 +33,20 @@ export const useUserStore = create()(
...user
};
});
+ },
+ myModels: [],
+ getMyModels: () =>
+ getMyModels().then((res) => {
+ set((state) => {
+ state.myModels = res;
+ });
+ return res;
+ }),
+ setMyModels(data: ModelType[]) {
+ set((state) => {
+ state.myModels = data;
+ });
+ return null;
}
}))
)