improve: improve ts code

components/AITool/index.tsx

@@ -24,37 +24,31 @@ import React, {
     useState,
 } from 'react';
 import { IconRecord, IconRobot, IconSend, IconSwap, IconVoice } from '@arco-design/web-react/icon';
-import { getModel } from '@/utils/gpt';
 import OpenAI from '@/client/api/openAI';
 
-// import useSpeechToText from 'react-hook-speech-to-text';
 let useSpeechToText: any;
-// (async () => {
-//     if (process.browser) useSpeechToText = (await import('react-hook-speech-to-text')).default;
-// })();
 export interface ChatMessage {
     role: 'system' | 'user' | 'assistant';
     content: string;
 }
 
 const getQuestion = (question: string) => `${question}`;
-const model = getModel('gpt35');
 
 type AIProps = {
-    context: any;
+    context?: any;
     messageList: any[];
     setMessageList: (value: any[]) => any;
-    startView: number;
-    renderMessageItem: any;
-    doneFx: (message: string) => any;
+    startView?: number;
+    renderMessageItem?: any;
+    doneFx?: (message: string) => any;
     simpleMode?: string | true;
     simpleModeVisible?: boolean;
-    setSimpleModeVisible?: () => any;
-    welcome: ReactElement | string;
+    setSimpleModeVisible?: (flag?: boolean) => any;
+    welcome?: ReactElement | string;
     quickTip?: string[] | { value: string; name: string; [key: string]: any }[];
-    searchFlag: RegExp;
+    searchFlag?: RegExp;
     inputProps?: Record<string, any>;
-    SendButton: ({ inputRef }: { inputRef: any }) => JSX.Element;
+    SendButton?: ({ inputRef }: { inputRef: any }) => JSX.Element;
 };
 
 export function AIWrapper({
@@ -73,18 +67,13 @@ export function AIWrapper({
     inputProps = {},
     SendButton,
 }: AIProps) {
-    const input = useRef<HTMLInputElement>();
-    const panelRef = useRef<HTMLInputElement>();
-
-    const [currentAssistantMessage, setCurrentAssistantMessage] = useState('');
+    const input = useRef<any>();
+    const scrollContainer = useRef<any>();
     const [loading, setLoading] = useState(false);
-    const [_, refresh] = useReducer(state => state++, 0);
-    const scrollContainer = useRef();
-    const message = useRef([]);
-    const working = useRef(false);
-    const [Niche, setNiche] = useState('you');
-    const [tinking, setTinking] = useState(false);
 
+    // 发送信息事件和成功的事件
+    const [currentAssistantMessage, setCurrentAssistantMessage] = useState('');
+    const [tinking, setTinking] = useState(false); //假的加载
     const handleButtonClickSuccess = useEffect(() => {
         if (!currentAssistantMessage || loading) {
             return;
@@ -100,7 +89,6 @@ export function AIWrapper({
         setCurrentAssistantMessage('');
         // return clearContext;
     }, [currentAssistantMessage, loading]);
-
     const toView = useCallback(
         debounce(() => {
             scrollContainer &&
@@ -111,7 +99,6 @@ export function AIWrapper({
         }, 50),
         []
     );
-
     const handleButtonClick = useCallback(
         (message?: string, callBack?: (m: string) => void) => {
             const inputRef = input.current?.dom;
@@ -139,7 +126,7 @@ export function AIWrapper({
                         setLoading(false);
                         setTinking(false);
                         setTimeout(toView, 100);
-                    }, 2000);
+                    }, 1000);
                     setCurrentAssistantMessage(currentAssistantMessageStr);
                     callBack && callBack(currentAssistantMessageStr);
                     doneFx && doneFx(currentAssistantMessageStr);
@@ -164,18 +151,21 @@ export function AIWrapper({
         ]
     );
 
+    // 清除功能
     const clear = () => {
-        // clearContext().then(() => {
-        const inputRef = input.current.dom;
-        inputRef.value = '';
-        setMessageList(messageList.slice(0, startView));
-        setCurrentAssistantMessage('');
-        // });
+        const inputRef = get(input, 'current.dom');
+        if (inputRef) {
+            inputRef.value = '';
+            setMessageList(messageList.slice(0, startView));
+            setCurrentAssistantMessage('');
+        }
     };
-    const [visible, setVisible] = React.useState(false);
-
-    const user = {};
 
+    // 用户信息
+    const [Niche, setNiche] = useState('you');
+    const user: {
+        photoId?: string;
+    } = {};
     const userIcon = user?.photoId ? (
         `/api/v1/assets/${user?.photoId}`
     ) : (
@@ -187,30 +177,16 @@ export function AIWrapper({
         </Avatar>
     );
 
+    // 上下文传递
     useEffect(() => {
         context && context({ clear });
     }, [context]);
-    const RenderMessageItem = renderMessageItem || MessageItem;
 
-    const { t } = useTranslation('actions');
-    const animaeString = t(
-        !quickTip.length
-            ? 'Please input your question'
-            : 'Starting with "/", retrieve frequently asked questions'
-    );
-    const [placeholder, setPlaceholder] = useState('');
+    // 快捷功能
     const [isSearching, setSearching] = useState<string | false>(false);
-
     const quickTipData = useMemo(() => {
         const el = input.current?.dom;
         if (isSearching && el) {
-            console.log(
-                filter(quickTip, ({ value }: { value: string }) => {
-                    if (el) {
-                        return value.indexOf(isSearching.replace(searchFlag, '').trim()) !== -1;
-                    }
-                })
-            );
             return filter(quickTip, ({ value }: { value: string }) => {
                 if (el) {
                     return value.indexOf(isSearching.replace(searchFlag, '').trim()) !== -1;
@@ -221,6 +197,14 @@ export function AIWrapper({
         return [];
     }, [isSearching, quickTip, input]);
 
+    //动画
+    const { t } = useTranslation('actions');
+    const animaeString = t(
+        !quickTip.length
+            ? 'Please input your question'
+            : 'Starting with "/", retrieve frequently asked questions'
+    );
+    const [placeholder, setPlaceholder] = useState('');
     let timer = useRef<any>();
     useEffect(() => {
         timer.current && clearTimeout(timer.current);
@@ -243,6 +227,8 @@ export function AIWrapper({
         }
         return () => clearTimeout(timer.current);
     }, [timer, simpleModeVisible, animaeString]);
+
+    //语音功能
     const { error, interimResult, isRecording, results, startSpeechToText, stopSpeechToText } =
         useSpeechToText({
             continuous: true,
@@ -271,6 +257,7 @@ export function AIWrapper({
     }, [interimResult, beforeRecordValue]);
 
     const inputValue = input.current?.dom.value || '';
+    const RenderMessageItem = renderMessageItem || MessageItem;
 
     const inputNode = (
         <Input
@@ -441,14 +428,6 @@ export function AIWrapper({
                                     />
                                 </div>
                             ) : (
-                                // <div>
-                                //     {
-                                //         <RenderMessageItem
-                                //             message={currentAssistantMessage}
-                                //             role="assistant"
-                                //         />
-                                //     }
-                                // </div>
                                 <div className="my-[20px]">
                                     <div
                                         className={`flex gap-3 p-4 box-border  shadow mx-[5px] rounded transition-colors mt-[20px] font-hm ${'bg-[var(--white-bg)] text-[#333]'}`}

components/content/index.tsx

@@ -7,7 +7,6 @@ import ReactFlow, {
     useEdgesState,
     addEdge,
 } from 'reactflow';
-// 👇 you need to import the reactflow styles
 import 'reactflow/dist/style.css';
 
 const initialNodes = [];

pages/_app.js → pages/_app.tsx

@@ -7,22 +7,21 @@ import '../styles/markdown/index.scss';
 import '../next-i18next.config.js';
 
 import GraphContainer from '../hooks/use-graph-state';
-import { ConfigProvider, ConfigContext } from '@arco-design/web-react';
+import { ConfigProvider } from '@arco-design/web-react';
 import { useState } from 'react';
 import { Spin } from '@arco-design/web-react';
 import { useEffect } from 'react';
-import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function MyApp({ Component, pageProps }) {
-    const [local, setLocal] = useState();
+type MyAppProps = {
+    Component: React.FunctionComponent;
+    pageProps: Record<string, any>;
+};
+
+function MyApp({ Component, pageProps }: MyAppProps) {
+    const [local, setLocal] = useState<any>();
     const { i18n } = useTranslation();
     useEffect(() => {
-        // import('@arco-design/web-react/es/locale/en-US').then(lang => {
-        //     console.log(lang.default);
-        //     setLocal(lang.default);
-        // });
-        // console.log(i18n.language);
         if (i18n.language === 'en') {
             import('@arco-design/web-react/es/locale/en-US').then(lang => {
                 setLocal(lang.default);

pages/actions/actionForm.tsx

-import React from 'react';
+import React, { Ref } from 'react';
 import { Form, Input, Checkbox, Button, Radio } from '@arco-design/web-react';
 import { useTranslation } from 'react-i18next';
 
 const FormItem = Form.Item;
 const RadioGroup = Radio.Group;
 
-function ActionForm({ form, initialValues = {} }) {
+type ActionFormProp = {
+    form: Ref<any>;
+    initialValues: Record<string, any>;
+};
+
+function ActionForm({ form, initialValues }: ActionFormProp) {
     const { t } = useTranslation('actionForm');
     return (
         <Form autoComplete="off" form={form} initialValues={initialValues}>

pages/actions/index.tsx

@@ -479,7 +479,7 @@ const MessageItemHOC = ({ setShowQueriesList, activeDb, currentModels, activeMod
     return component;
 };
 
-export default function Actions(props) {
+export default function Actions() {
     const [graphs, setGraphs] = useState([]);
     const params = useSearchParams();
     const defaultId = params.get('id');

pages/actions/queriesList.tsx

@@ -321,7 +321,7 @@ export function QueriesList({
 
 function QueriesRender({ modelId, refresh }: { modelId: string; refresh?: boolean }) {
     const { data, isLoading, mutate } = useSWR('all_query_for_Schema', () => {
-        return modelId && ConnectDb.getQueries(modelId);
+        return modelId ? ConnectDb.getQueries(modelId) : undefined;
     });
 
     useEffect(() => {
@@ -377,14 +377,19 @@ export default function QueriesPage() {
     const params = useSearchParams();
     const { t } = useTranslation('queriesList');
     const { t: ct } = useTranslation();
+    const id = params.get('id');
 
     return (
         <>
             <Head>
                 <title>CHAT QUERY</title>
-                <meta name="description" content={ct('Data Query Based on Data Model and AI')} />
+                <meta
+                    name="description"
+                    content={ct('Data Query Based on Data Model and AI') as string}
+                />
                 <link rel="icon" href="/favicon.ico" />
             </Head>
+
             <ListNav
                 customNode={[
                     <Link
@@ -409,6 +414,7 @@ export default function QueriesPage() {
                 importDBML={undefined}
                 handlerImportGraph={undefined}
             />
+
             <Layout className="overflow-auto mt-[85px]">
                 <div
                     className="w-[85%] m-auto"
@@ -416,7 +422,7 @@ export default function QueriesPage() {
                         height: 'calc(100vh - 120px)',
                     }}
                 >
-                    <QueriesRender modelId={params.get('id')} />
+                    {id && <QueriesRender modelId={id} />}
                 </div>
             </Layout>
         </>

pages/index.tsx

@@ -16,7 +16,10 @@ function Home() {
         <>
             <Head>
                 <title>CHAT QUERY</title>
-                <meta name="description" content={t('Data Query Based on Data Model and AI')} />
+                <meta
+                    name="description"
+                    content={t('Data Query Based on Data Model and AI') as string}
+                />
                 <meta name="viewport" content="width=device-width, initial-scale=1" />
                 <link rel="icon" href="/favicon.ico" />
             </Head>