feat: error track, app scroll

e0b23a26 · archer · 7c16d08e · e0b23a26 · e0b23a26 · e0b23a26
Commit e0b23a26 authored Sep 03, 2023 by archer
9 changed files
--- a/client/public/locales/zh/common.json
+++ b/client/public/locales/zh/common.json
@@ -37,7 +37,7 @@
  "chat": {
    "Admin Mark Content": "纠正后的回复",
    "Complete Response": "完整响应",
-    "Confirm to clear history": "确认清空该应用的聊天记录？",
+    "Confirm to clear history": "确认清空该应用的在线聊天记录？分享和 API 调用的记录不会被清空。",
    "Exit Chat": "退出聊天",
    "Feedback Close": "关闭反馈",
    "Feedback Failed": "提交反馈异常",

--- a/client/src/components/ChatBox/index.tsx
+++ b/client/src/components/ChatBox/index.tsx
@@ -439,13 +439,20 @@ const ChatBox = (
    border: theme.borders.base,
    mr: 3
  };
-  const controlContainerStyle = {
+  const controlContainerStyle = useCallback((status: ChatSiteItemType['status']) => {
+    return {
      className: 'control',
      color: 'myGray.400',
-    display: feedbackType === FeedbackTypeEnum.admin ? 'flex' : ['flex', 'none'],
+      display:
+        status === 'finish'
+          ? feedbackType === FeedbackTypeEnum.admin
+            ? 'flex'
+            : ['flex', 'none']
+          : 'none',
      pl: 1,
      mt: 2
    };
+  }, []);
  const MessageCardStyle: BoxProps = {
    px: 4,
    py: 3,
@@ -604,7 +611,11 @@ const ChatBox = (
                {item.obj === 'Human' && (
                  <>
                    <Flex w={'100%'} alignItems={'center'} justifyContent={'flex-end'}>
-                      <Flex {...controlContainerStyle} justifyContent={'flex-end'} mr={3}>
+                      <Flex
+                        {...controlContainerStyle(item.status)}
+                        justifyContent={'flex-end'}
+                        mr={3}
+                      >
                        <MyTooltip label={'复制'}>
                          <MyIcon
                            {...controlIconStyle}
@@ -652,7 +663,7 @@ const ChatBox = (
                  <>
                    <Flex w={'100%'} alignItems={'flex-end'}>
                      <ChatAvatar src={appAvatar} type={'AI'} />
-                      <Flex {...controlContainerStyle} ml={3}>
+                      <Flex {...controlContainerStyle(item.status)} ml={3}>
                        <MyTooltip label={'复制'}>
                          <MyIcon
                            {...controlIconStyle}

--- a/client/src/constants/common.ts
+++ b/client/src/constants/common.ts
@@ -13,6 +13,11 @@ export const fileImgs = [
  { suffix: 'md', src: '/imgs/files/markdown.svg' }
 ];
+export enum TrackEventName {
+  windowError = 'windowError',
+  pageError = 'pageError'
+}
 export const htmlTemplate = `<!DOCTYPE html>
 <html lang="en">
  <head>

--- a/client/src/pages/_app.tsx
+++ b/client/src/pages/_app.tsx
@@ -42,6 +42,7 @@ function App({ Component, pageProps }: AppProps) {
  const [googleClientVerKey, setGoogleVerKey] = useState<string>();
  useEffect(() => {
+    // get init data
    (async () => {
      const {
        feConfigs: { scripts, googleClientVerKey }
@@ -49,6 +50,21 @@ function App({ Component, pageProps }: AppProps) {
      setScripts(scripts || []);
      setGoogleVerKey(googleClientVerKey);
    })();
+    // add window error track
+    window.onerror = function (msg, url) {
+      window.umami?.track('windowError', {
+        device: {
+          userAgent: navigator.userAgent,
+          platform: navigator.platform,
+          appName: navigator.appName
+        },
+        msg,
+        url
+      });
+    };
+    return () => {
+      window.onerror = null;
+    };
  }, []);
  useEffect(() => {

--- a/client/src/pages/_error.tsx
+++ b/client/src/pages/_error.tsx
 import { useEffect } from 'react';
 import { useRouter } from 'next/router';
+import { serviceSideProps } from '@/utils/i18n';
 function Error() {
  const router = useRouter();
  useEffect(() => {
    setTimeout(() => {
-      router.replace('/app/list');
+      window.umami?.track('pageError', {
+        userAgent: navigator.userAgent,
+        platform: navigator.platform,
+        appName: navigator.appName
+      });
+    }, 1000);
+    setTimeout(() => {
+      router.back();
    }, 2000);
  }, []);
@@ -16,4 +25,12 @@ function Error() {
  );
 }
+export async function getServerSideProps(context: any) {
+  console.log(context);
+  return {
+    props: { ...(await serviceSideProps(context)) }
+  };
+}
 export default Error;
--- a/client/src/pages/api/chat/removeHistory.ts
+++ b/client/src/pages/api/chat/removeHistory.ts
@@ -2,6 +2,7 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 import { jsonRes } from '@/service/response';
 import { connectToDatabase, Chat, ChatItem } from '@/service/mongo';
 import { authUser } from '@/service/utils/auth';
+import { ChatSourceEnum } from '@/constants/chat';
 type Props = {
  chatId?: string;
@@ -29,14 +30,19 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
      ]);
    }
    if (appId) {
+      const chats = await Chat.find({
+        appId,
+        userId,
+        source: ChatSourceEnum.online
+      }).select('_id');
+      const chatIds = chats.map((chat) => chat._id);
      await Promise.all([
        Chat.deleteMany({
-          appId,
+          _id: { $in: chatIds }
-          userId
        }),
        ChatItem.deleteMany({
-          userId,
+          chatId: { $in: chatIds }
-          appId
        })
      ]);
    }

--- a/client/src/pages/chat/components/SliderApps.tsx
+++ b/client/src/pages/chat/components/SliderApps.tsx
@@ -15,7 +15,8 @@ const SliderApps = ({ appId }: { appId: string }) => {
  useQuery(['loadModels'], () => loadMyApps(false));
  return (
-    <>
+    <Flex flexDirection={'column'} h={'100%'}>
+      <Box px={5} py={4}>
        <Flex
          alignItems={'center'}
          cursor={'pointer'}
@@ -37,7 +38,8 @@ const SliderApps = ({ appId }: { appId: string }) => {
          />
          {t('chat.Exit Chat')}
        </Flex>
-      <Box mt={5}>
+      </Box>
+      <Box flex={'1 0 0'} h={0} px={5} overflow={'overlay'}>
        {myApps.map((item) => (
          <Flex
            key={item._id}
@@ -72,7 +74,7 @@ const SliderApps = ({ appId }: { appId: string }) => {
          </Flex>
        ))}
      </Box>
-    </>
+    </Flex>
  );
 };

--- a/client/src/pages/chat/index.tsx
+++ b/client/src/pages/chat/index.tsx
@@ -252,7 +252,7 @@ const Chat = ({ appId, chatId }: { appId: string; chatId: string }) => {
      </Head>
      {/* pc show myself apps */}
      {isPc && (
-        <Box p={5} borderRight={theme.borders.base} w={'220px'} flexShrink={0}>
+        <Box borderRight={theme.borders.base} w={'220px'} flexShrink={0}>
          <SliderApps appId={appId} />
        </Box>
      )}

--- a/client/src/types/index.d.ts
+++ b/client/src/types/index.d.ts
@@ -4,6 +4,7 @@ import type { Pool } from 'pg';
 import type { Tiktoken } from '@dqbd/tiktoken';
 import type { Logger } from 'winston';
 import { ChatModelItemType, QAModelItemType, VectorModelItemType } from './model';
+import { TrackEventName } from '@/constants/common';
 export type PagingData<T> = {
  pageNum: number;
@@ -60,5 +61,8 @@ declare global {
    particlesJS: any;
    grecaptcha: any;
    QRCode: any;
+    umami?: {
+      track: (event: `${TrackEventName}`, data: any) => void;
+    };
  }
 }