perf: 发送区域样式

becee69d · archer · 042b0c53 · becee69d · becee69d
Commit becee69d authored Apr 03, 2023 by archer
Hide whitespace changes
Inline Side-by-side

Showing with 33 additions and 15 deletions

src/pages/_app.tsx
+14 -1

src/pages/chat/index.tsx
+19 -14

No files found.
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
-import type { AppProps, NextWebVitalsMetric } from 'next/app';
+import { useEffect } from 'react';
+import type { AppProps } from 'next/app';
 import Script from 'next/script';
 import Head from 'next/head';
 import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
@@ -9,6 +10,7 @@ import NProgress from 'nprogress'; //nprogress module
 import Router from 'next/router';
 import 'nprogress/nprogress.css';
 import '../styles/reset.scss';
+import { useToast } from '@/hooks/useToast';

 //Binding events.
 Router.events.on('routeChangeStart', () => NProgress.start());
@@ -27,6 +29,17 @@ const queryClient = new QueryClient({
 });

 export default function App({ Component, pageProps }: AppProps) {
+  const { toast } = useToast();
+  // 校验是否支持 click 事件
+  useEffect(() => {
+    if (typeof document.createElement('div').click !== 'function') {
+      toast({
+        title: '你的浏览器版本过低',
+        status: 'warning'
+      });
+    }
+  }, [toast]);
+
  return (
    <>
      <Head>

--- a/src/pages/chat/index.tsx
+++ b/src/pages/chat/index.tsx
@@ -192,11 +192,18 @@ const Chat = ({ chatId }: { chatId: string }) => {
   * 发送一个内容
   */
  const sendPrompt = useCallback(async () => {
+    if (isChatting) {
+      toast({
+        title: '正在聊天中...请等待结束',
+        status: 'warning'
+      });
+      return;
+    }
    const storeInput = inputVal;
    // 去除空行
    const val = inputVal.trim().replace(/\n\s*/g, '\n');

-    if (!chatData?.modelId || !val || isChatting) {
+    if (!chatData?.modelId || !val) {
      toast({
        title: '内容为空',
        status: 'warning'
@@ -455,7 +462,7 @@ const Chat = ({ chatId }: { chatId: string }) => {
        {/* 发送区 */}
        <Box m={media('20px auto', '0 auto')} w={'100%'} maxW={media('min(750px, 100%)', 'auto')}>
          <Box
-            py={5}
+            py={'18px'}
            position={'relative'}
            boxShadow={`0 0 15px rgba(0,0,0,0.1)`}
            border={media('1px solid', '0')}
@@ -474,7 +481,7 @@ const Chat = ({ chatId }: { chatId: string }) => {
              }}
              placeholder="提问"
              resize={'none'}
-              defaultValue={inputVal}
+              value={inputVal}
              rows={1}
              height={'22px'}
              lineHeight={'22px'}
@@ -509,26 +516,24 @@ const Chat = ({ chatId }: { chatId: string }) => {
              w={'30px'}
              position={'absolute'}
              right={['12px', '20px']}
-              bottom={3}
+              bottom={'15px'}
              onClick={sendPrompt}
            >
              {isChatting ? (
                <Image
                  style={{ transform: 'translateY(4px)' }}
                  src={'/icon/chatting.svg'}
-                  width={30}
-                  height={30}
+                  fill
                  alt={''}
                />
              ) : (
-                <Box cursor={'pointer'}>
-                  <Icon
-                    name={'chatSend'}
-                    width={'20px'}
-                    height={'20px'}
-                    fill={useColorModeValue('#718096', 'white')}
-                  ></Icon>
-                </Box>
+                <Icon
+                  name={'chatSend'}
+                  width={['18px', '20px']}
+                  height={['18px', '20px']}
+                  cursor={'pointer'}
+                  fill={useColorModeValue('#718096', 'white')}
+                ></Icon>
              )}
            </Flex>
          </Box>