💄 style: 优化插件的展示逻辑

lobehub · Aug 4, 2023 · 7621bad · 7621bad
1 parent 5a47f78
commit 7621bad
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 38 deletions.
diff --git a/src/locales/default/plugin.ts b/src/locales/default/plugin.ts
@@ -1,4 +1,9 @@
 export default {
+  debug: {
+    arguments: '调用参数',
+    function_call: '函数调用',
+    response: '返回结果',
+  },
   loading: {
     content: '数据获取中...',
     plugin: '插件运行中...',
@@ -8,6 +13,7 @@ export default {
     realtimeWeather: '实时天气预报',
     searchEngine: '搜索引擎',
     undefined: '插件检测中...',
+
     websiteCrawler: '网页内容提取',
   },
   realtimeWeather: {

diff --git a/src/pages/chat/[id]/Conversation/ChatList/Plugins/FunctionCall.tsx b/src/pages/chat/[id]/Conversation/ChatList/Plugins/FunctionCall.tsx
@@ -1,5 +1,6 @@
 import { LoadingOutlined } from '@ant-design/icons';
 import { Avatar, Highlighter, Icon } from '@lobehub/ui';
+import { Tabs } from 'antd';
 import { LucideChevronDown, LucideChevronUp, LucideToyBrick } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -8,14 +9,16 @@ import { Flexbox } from 'react-layout-kit';
 import { PluginsMap } from '@/plugins';
 import { OpenAIFunctionCall } from '@/types/chatMessage';
 
+import PluginResult from './PluginResultRender';
 import { useStyles } from './style';
 
 export interface FunctionCallProps {
+  content: string;
   function_call?: OpenAIFunctionCall;
   loading?: boolean;
 }
 
-const FunctionCall = memo<FunctionCallProps>(({ function_call, loading }) => {
+const FunctionCall = memo<FunctionCallProps>(({ function_call, loading, content }) => {
   const { t } = useTranslation('plugin');
   const { styles } = useStyles();
   const [open, setOpen] = useState(false);
@@ -28,7 +31,8 @@ const FunctionCall = memo<FunctionCallProps>(({ function_call, loading }) => {
     <Icon icon={LucideToyBrick} />
   );
 
-  const args = JSON.stringify(JSON.parse(function_call?.arguments || '{}'), null, 2);
+  const args = JSON.stringify(function_call, null, 2);
+  const params = JSON.stringify(JSON.parse(function_call?.arguments || '{}'), null, 2);
 
   return (
     <Flexbox gap={8}>
@@ -51,7 +55,27 @@ const FunctionCall = memo<FunctionCallProps>(({ function_call, loading }) => {
         {t(`plugins.${function_call?.name}` as any, { ns: 'plugin' })}
         <Icon icon={open ? LucideChevronUp : LucideChevronDown} />
       </Flexbox>
-      {open && <Highlighter language={'json'}>{args}</Highlighter>}
+      {open && (
+        <Tabs
+          items={[
+            {
+              children: <Highlighter language={'json'}>{args}</Highlighter>,
+              key: 'function_call',
+              label: t('debug.function_call'),
+            },
+            {
+              children: <Highlighter language={'json'}>{params}</Highlighter>,
+              key: 'arguments',
+              label: t('debug.arguments'),
+            },
+            {
+              children: <PluginResult content={content} />,
+              key: 'response',
+              label: t('debug.response'),
+            },
+          ]}
+        />
+      )}
     </Flexbox>
   );
 });

diff --git a/src/pages/chat/[id]/Conversation/ChatList/Plugins/PluginMessage.tsx b/src/pages/chat/[id]/Conversation/ChatList/Plugins/PluginMessage.tsx
@@ -6,8 +6,6 @@ import { Flexbox } from 'react-layout-kit';
 import { PluginsRender } from '@/plugins/Render';
 import { ChatMessage } from '@/types/chatMessage';
 
-import PluginResult from './PluginResultRender';
-
 export interface FunctionMessageProps extends ChatMessage {
   loading?: boolean;
 }
@@ -39,7 +37,7 @@ const PluginMessage = memo<FunctionMessageProps>(({ content, name }) => {
     return <Render content={JSON.parse(content)} name={name || 'unknown'} />;
   }
 
-  return <PluginResult content={content} />;
+  return null;
 });
 
 export default PluginMessage;
diff --git a/src/pages/chat/[id]/Conversation/ChatList/Plugins/PluginResultRender.tsx b/src/pages/chat/[id]/Conversation/ChatList/Plugins/PluginResultRender.tsx
@@ -1,21 +1,11 @@
-import { Avatar, Highlighter, Icon } from '@lobehub/ui';
-import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
-import { memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useStyles } from './style';
+import { Highlighter } from '@lobehub/ui';
+import { memo } from 'react';
 
 export interface FunctionMessageProps {
   content: string;
 }
 
 const PluginResult = memo<FunctionMessageProps>(({ content }) => {
-  const { t } = useTranslation('plugin');
-  const { styles } = useStyles();
-
-  const [open, setOpen] = useState(false);
-
   let data;
 
   try {
@@ -25,26 +15,9 @@ const PluginResult = memo<FunctionMessageProps>(({ content }) => {
   }
 
   return (
-    <Flexbox gap={8}>
-      <Flexbox
-        align={'center'}
-        className={styles.container}
-        gap={8}
-        horizontal
-        onClick={() => {
-          setOpen(!open);
-        }}
-      >
-        <Avatar avatar={'💾'} size={24} />
-        {t('responseData')}
-        <Icon icon={open ? LucideChevronUp : LucideChevronDown} />
-      </Flexbox>
-      {open && (
-        <Highlighter language={'json'} style={{ maxHeight: 200, maxWidth: 600 }}>
-          {data}
-        </Highlighter>
-      )}
-    </Flexbox>
+    <Highlighter language={'json'} style={{ maxHeight: 200, maxWidth: 800 }}>
+      {data}
+    </Highlighter>
   );
 });
 

diff --git a/src/pages/chat/[id]/Conversation/ChatList/index.tsx b/src/pages/chat/[id]/Conversation/ChatList/index.tsx
@@ -48,6 +48,7 @@ const List = () => {
         return (
           <Flexbox gap={12}>
             <FunctionCall
+              content={message.content}
               function_call={message.function_call}
               loading={message.id === chatLoadingId}
             />
@@ -58,6 +59,7 @@ const List = () => {
       if (message.role === 'assistant') {
         return isFunctionMessage(message.content) || !!message.function_call ? (
           <FunctionCall
+            content={message.content}
             function_call={message.function_call}
             loading={message.id === chatLoadingId}
           />