feat:improve code

components/AITool/index.tsx

@@ -268,7 +268,7 @@ export function AIWrapper({
             height={56}
             className="overflow-hidden  shadow-md simple-mode  shadow-cyan-500/30"
             autoFocus
-            onPressEnter={() => handleButtonClick()}
+            onPressEnter={() => !SendButton && handleButtonClick()}
             value={inputValue}
             onChange={value => {
                 const el = input.current?.dom;

next-i18next.config.js

@@ -209,6 +209,9 @@ i18n.use(LanguageDetector)
                     'please enter query name': '请输入查询名称',
                     name: '名称',
                 },
+                chatView: {
+                    'component display': '组件显示',
+                },
             },
         },
         fallbackLng: 'en',

pages/actions/View/chatView.tsx

 import { Button, Card, Spin } from '@arco-design/web-react';
-import { IconCode, IconEye, IconSend } from '@arco-design/web-react/icon';
-import React, { ReactElement, memo, useCallback, useRef, useState } from 'react';
-import { LiveEditor, LiveError, LivePreview, LiveProvider } from 'react-live-runner';
+import { IconCode, IconEye, IconRefresh, IconSend, IconSwap } from '@arco-design/web-react/icon';
+import React, { ReactElement, memo, useCallback, useMemo, useRef, useState } from 'react';
+import {
+    LiveEditor,
+    LiveError,
+    LivePreview,
+    LiveProvider,
+    useLiveContext,
+} from 'react-live-runner';
 import * as styledComponents from 'styled-components';
 import * as echarts from 'echarts';
 import ReactDOM from 'react-dom';
@@ -11,6 +17,13 @@ import useSWRMutation from 'swr/mutation';
 import getView from '@/client/api/getView';
 import { nanoid } from 'nanoid';
 import { get } from 'lodash';
+import { useTranslation } from 'react-i18next';
+
+function Error() {
+    const { error } = useLiveContext();
+    console.log(error, 'error');
+    return <code>{error}</code>;
+}
 
 export function ChatView({
     defaultNode,
@@ -21,8 +34,8 @@ export function ChatView({
 }) {
     const [showCode, setShowCode] = useState(true);
     const reqRef = useRef(nanoid());
+    const [showTable, setShowTable] = useState(false);
     const { trigger, data, isMutating } = useSWRMutation(reqRef.current, (_, { arg: { need } }) => {
-        console.log(need);
         return getView.getViewComponent({
             props,
             need,
@@ -34,39 +47,86 @@ export function ChatView({
             return (
                 <Button
                     shape="circle"
-                    icon={<IconSend />}
+                    icon={data ? <IconRefresh /> : <IconSend />}
                     size="mini"
                     type="primary"
                     loading={isMutating}
                     onClick={async () => {
                         await trigger({ need: inputRef.current.dom.value });
-                        // inputRef.current.dom.value = '';
+                        setShowTable(false);
                     }}
                 />
             );
         },
-        [isMutating, trigger]
+        [isMutating, trigger, setShowTable]
     );
 
     const example = get(data, 'data.code');
-    console.log(example, 'isMutating');
+    const { t } = useTranslation('chatView');
+
+    const Live = useMemo(() => {
+        let node;
+        try {
+            node = !showCode ? (
+                <LiveEditor className="overflow-auto  min-h-[350px]" />
+            ) : (
+                <LivePreview />
+            );
+        } catch (err) {
+            node = <LiveEditor className="overflow-auto  min-h-[350px]" />;
+        }
+
+        return (
+            <LiveProvider
+                code={example}
+                scope={{
+                    data: props,
+                    import: {
+                        react: React,
+                        'react-dom': ReactDOM,
+                        'styled-components': styledComponents,
+                        'echarts-for-react': ReactECharts,
+                        echarts: {
+                            default: echarts,
+                            echarts: echarts,
+                            ...echarts,
+                        },
+                    },
+                }}
+            >
+                {node}
+                <Error />
+            </LiveProvider>
+        );
+    }, [example, props, showCode]);
 
     return (
         <div>
-            <AI
-                simpleMode="input"
-                startView={3}
-                inputProps={{
-                    style: { width: 400 },
-                    height: 36,
-                    className: 'overflow-hidden simple-mode-border mb-[20px]',
-                    prefix: <span className="text-[var(--pc)]">组件显示</span>,
-                    autoFocus: false,
-                }}
-                SendButton={SendButton}
-            />
+            <div className="flex justify-between items-center mb-[20px]">
+                <AI
+                    simpleMode="input"
+                    startView={3}
+                    inputProps={{
+                        style: { width: 400 },
+                        height: 36,
+                        className: 'overflow-hidden simple-mode-border',
+                        prefix: <span className="text-[var(--pc)]">{t('component display')}</span>,
+                        autoFocus: false,
+                    }}
+                    SendButton={SendButton}
+                    messageList={[]}
+                    setMessageList={function (value: any[]) {
+                        return false;
+                    }}
+                />
+                {data && (
+                    <Button shape="circle" onClick={() => setShowTable(!showTable)}>
+                        <IconSwap />
+                    </Button>
+                )}
+            </div>
             <Spin loading={isMutating} block className="my-[20px]">
-                {example ? (
+                {example && !showTable ? (
                     <div>
                         <div className="text-[20px] absolute text-orange-200 z-[99] right-[20px]">
                             {showCode ? (
@@ -75,32 +135,7 @@ export function ChatView({
                                 <IconEye onClick={() => setShowCode(true)} />
                             )}
                         </div>
-                        <div className="overflow-hidden">
-                            <LiveProvider
-                                code={example}
-                                scope={{
-                                    data: props,
-                                    import: {
-                                        react: React,
-                                        'react-dom': ReactDOM,
-                                        'styled-components': styledComponents,
-                                        'echarts-for-react': ReactECharts,
-                                        echarts: {
-                                            default: echarts,
-                                            echarts: echarts,
-                                            ...echarts,
-                                        },
-                                    },
-                                }}
-                            >
-                                {!showCode ? (
-                                    <LiveEditor className="overflow-auto  min-h-[350px]" />
-                                ) : (
-                                    <LivePreview />
-                                )}
-                                <LiveError />
-                            </LiveProvider>
-                        </div>
+                        <div className="overflow-hidden">{Live}</div>
                     </div>
                 ) : (
                     defaultNode || null

pages/actions/index.tsx

@@ -368,7 +368,7 @@ const MessageItemHOC = ({ setShowQueriesList, activeDb, currentModels, activeMod
                             })
                         )}
                         {size(sql) ? (
-                            [
+                            <>
                                 <FormItem key="1">
                                     <Button
                                         type="primary"
@@ -456,11 +456,11 @@ const MessageItemHOC = ({ setShowQueriesList, activeDb, currentModels, activeMod
                                         {t('run')}
                                     </Button>
                                     {contextHolder}
-                                </FormItem>,
+                                </FormItem>
                                 <div className="w-full" key="preViewData">
                                     <DataTable data={preViewData} />
-                                </div>,
-                            ]
+                                </div>
+                            </>
                         ) : (
                             <Empty
                                 description={t('Error in query')}