temp

7529f51e · Archer · be69cfb9 · 7529f51e · 7529f51e · 7529f51e
Commit 7529f51e authored Mar 15, 2023 by Archer
7 changed files
--- a/src/constants/theme.ts
+++ b/src/constants/theme.ts
@@ -45,8 +45,13 @@ const Button = defineStyleConfig({
    }
  },
  variants: {
-    outline: {
+    white: {
-      borderWidth: '1.5px'
+      color: '#fff',
+      backgroundColor: 'transparent',
+      border: '1px solid #ffffff',
+      _hover: {
+        backgroundColor: 'rgba(255,255,255,0.1)'
+      }
    }
  },
  defaultProps: {

--- 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)
      }
    };
+    const decoder = new TextDecoder();
+    try {
      for await (const chunk of chatResponse.data as any) {
        const parser = createParser(onParse);
-      parser.feed(decodeURIComponent(chunk));
+        parser.feed(decoder.decode(chunk));
+      }
+    } catch (error) {
+      console.log('pipe error', error);
    }
    pass.push(null);
  } catch (err: any) {

--- a/src/pages/chat/components/SlideBar.tsx
+++ b/src/pages/chat/components/SlideBar.tsx
+import React from 'react';
+import { Box, Button } from '@chakra-ui/react';
+import { AddIcon } from '@chakra-ui/icons';
+const SlideBar = ({ resetChat }: { resetChat: () => void }) => {
+  return (
+    <Box flex={'0 0 250px'} p={3} backgroundColor={'blackAlpha.800'} color={'white'}>
+      {/* 新对话 */}
+      <Button w={'100%'} variant={'white'} h={'40px'} leftIcon={<AddIcon />} onClick={resetChat}>
+        新对话
+      </Button>
+      {/* 我的模型 */}
+      {/* 历史记录 */}
+    </Box>
+  );
+};
+export default SlideBar;
--- 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');
+    router.push(`/chat?chatId=${chatId}&timeStamp=${Date.now()}`);
-  }, [chatId]);
+  }, [chatId, router]);
  // gpt3 方法
  const gpt3ChatPrompt = useCallback(
@@ -270,35 +279,11 @@ const Chat = ({ chatId, windowId }: { chatId: string; windowId?: string }) => {
  }, [chatList, resetInputVal, windowId]);
  return (
-    <Flex height={'100%'} flexDirection={'column'}>
+    <Flex h={'100%'}>
-      {/* 头部 */}
+      <SlideBar resetChat={resetChat} />
-      <Flex
+      <Flex flex={1} h={'100%'} flexDirection={'column'}>
-        px={4}
-        h={'50px'}
-        alignItems={'center'}
-        backgroundColor={'white'}
-        boxShadow={'0 5px 10px rgba(0,0,0,0.1)'}
-        zIndex={1}
-      >
-        <Box flex={1}>{chatSiteData?.name}</Box>
-        {/* 滚动到底部按键 */}
-        {ChatBox.current && ChatBox.current.scrollHeight > 2 * ChatBox.current.clientHeight && (
-          <Box mr={10} cursor={'pointer'} onClick={scrollToBottom}>
-            <Icon
-              name={'icon-xiangxiazhankai-xianxingyuankuang'}
-              width={25}
-              height={25}
-              color={'#718096'}
-            ></Icon>
-          </Box>
-        )}
-        {/* 重置按键 */}
-        <Button size={'sm'} colorScheme={'gray'} onClick={resetChat}>
-          新对话
-        </Button>
-      </Flex>
        {/* 聊天内容 */}
-      <Box ref={ChatBox} flex={'1 0 0'} h={0} w={'100%'} px={0} pb={10} overflowY={'auto'}>
+        <Box ref={ChatBox} flex={'1 0 0'} h={0} w={'100%'} overflowY={'auto'}>
          {chatList.map((item, index) => (
            <Box
              key={index}
@@ -307,7 +292,7 @@ const Chat = ({ chatId, windowId }: { chatId: string; windowId?: string }) => {
              backgroundColor={index % 2 === 0 ? 'rgba(247,247,248,1)' : '#fff'}
              borderBottom={'1px solid rgba(0,0,0,0.1)'}
            >
-            <Flex maxW={'800px'} m={'auto'} alignItems={'flex-start'}>
+              <Flex maxW={'750px'} m={'auto'} alignItems={'flex-start'}>
                <Box mr={media(4, 1)}>
                  <Image
                    src={item.obj === 'Human' ? '/icon/human.png' : '/icon/logo.png'}
@@ -330,20 +315,11 @@ const Chat = ({ chatId, windowId }: { chatId: string; windowId?: string }) => {
            </Box>
          ))}
        </Box>
-      {/* 空内容提示 */}
+        {/* 发送区 */}
-      {/* {
-        chatList.length === 0 && (
-          <>
-          <Card>
-内容太长
-</Card>
-          </>
-        )
-      } */}
        <Box
          m={media('20px auto', '0 auto')}
          w={media('100vw', '100%')}
-        maxW={media('800px', 'auto')}
+          maxW={media('750px', 'auto')}
          boxShadow={'0 -14px 30px rgba(255,255,255,0.6)'}
          borderTop={media('none', '1px solid rgba(0,0,0,0.1)')}
        >
@@ -421,6 +397,7 @@ const Chat = ({ chatId, windowId }: { chatId: string; windowId?: string }) => {
          )}
        </Box>
      </Flex>
+    </Flex>
  );
 };
@@ -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 }
  };
 }
--- a/src/pages/model/list.tsx
+++ b/src/pages/model/list.tsx
 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<ModelType[]>([]);
+  const { myModels, setMyModels, getMyModels } = useUserStore();
  const [openCreateModel, setOpenCreateModel] = useState(false);
  const { Loading, setIsLoading } = useLoading();
  /* 加载模型 */
-  const { isLoading } = useQuery(['loadModels'], () => getMyModels(), {
+  const { isLoading } = useQuery(['loadModels'], getMyModels);
-    onSuccess(res) {
-      if (!res) return;
-      setModels(res);
-    }
-  });
  /* 创建成功回调 */
-  const createModelSuccess = useCallback((data: ModelType) => {
+  const createModelSuccess = useCallback(
-    setModels((state) => [data, ...state]);
+    (data: ModelType) => {
-  }, []);
+      setMyModels([data, ...myModels]);
+    },
+    [myModels, setMyModels]
+  );
  /* 点前往聊天预览页 */
  const handlePreviewChat = useCallback(
@@ -74,9 +72,9 @@ const ModelList = () => {
      {/* 表单 */}
      <Box mt={5} position={'relative'}>
        {isPc ? (
-          <ModelTable models={models} handlePreviewChat={handlePreviewChat} />
+          <ModelTable models={myModels} handlePreviewChat={handlePreviewChat} />
        ) : (
-          <ModelPhoneList models={models} handlePreviewChat={handlePreviewChat} />
+          <ModelPhoneList models={myModels} handlePreviewChat={handlePreviewChat} />
        )}
      </Box>
      {/* 创建弹窗 */}

--- 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);
  }

--- 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<State>()(
  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<State>()(
            ...user
          };
        });
+      },
+      myModels: [],
+      getMyModels: () =>
+        getMyModels().then((res) => {
+          set((state) => {
+            state.myModels = res;
+          });
+          return res;
+        }),
+      setMyModels(data: ModelType[]) {
+        set((state) => {
+          state.myModels = data;
+        });
+        return null;
      }
    }))
  )