refactor: upgrade gpt-vis

eosphoros-ai · Aug 23, 2024 · c48b506 · c48b506
1 parent 9502251
commit c48b506
Show file tree

Hide file tree

Showing 11 changed files with 499 additions and 256 deletions.
diff --git a/web/components/chat/agent-content.tsx b/web/components/chat/agent-content.tsx
@@ -2,7 +2,7 @@ import { ChatContext } from '@/app/chat-context';
 import { IChatDialogueMessageSchema } from '@/types/chat';
 import classNames from 'classnames';
 import { memo, useContext } from 'react';
-import ReactMarkdown from 'react-markdown';
+import { GPTVis } from '@antv/gpt-vis';
 import markdownComponents from './chat-content/config';
 import rehypeRaw from 'rehype-raw';
 
@@ -21,15 +21,21 @@ function AgentContent({ content }: Props) {
 
   return (
     <div
-      className={classNames('relative w-full p-2 md:p-4 rounded-xl break-words', {
-        'bg-white dark:bg-[#232734]': isView,
-        'lg:w-full xl:w-full pl-0': ['chat_with_db_execute', 'chat_dashboard'].includes(scene),
-      })}
+      className={classNames(
+        "relative w-full p-2 md:p-4 rounded-xl break-words",
+        {
+          "bg-white dark:bg-[#232734]": isView,
+          "lg:w-full xl:w-full pl-0": [
+            "chat_with_db_execute",
+            "chat_dashboard",
+          ].includes(scene),
+        }
+      )}
     >
       {isView ? (
-        <ReactMarkdown components={markdownComponents} rehypePlugins={[rehypeRaw]}>
+        <GPTVis components={markdownComponents} rehypePlugins={[rehypeRaw]}>
           {formatMarkdownVal(content.context)}
-        </ReactMarkdown>
+        </GPTVis>
       ) : (
         <div className="">{content.context}</div>
       )}

diff --git a/web/components/chat/chat-content/VisResponse.tsx b/web/components/chat/chat-content/VisResponse.tsx
@@ -6,7 +6,7 @@ import { githubLightTheme } from '@uiw/react-json-view/githubLight';
 import { Alert, Spin } from 'antd';
 import classNames from 'classnames';
 import React, { useContext, useMemo } from 'react';
-import ReactMarkdown from 'react-markdown';
+import { GPTVis } from '@antv/gpt-vis'; 
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 
@@ -41,30 +41,36 @@ const VisResponse: React.FC<{ data: VisResponseProps }> = ({ data }) => {
   return (
     <div className="flex flex-1 flex-col">
       <Alert
-        className={classNames('mb-4', {
-          'bg-[#fafafa] border-[transparent]': !type,
+        className={classNames("mb-4", {
+          "bg-[#fafafa] border-[transparent]": !type,
         })}
         message={data.name}
         type={type}
         {...(type && { showIcon: true })}
-        {...(type === 'warning' && { icon: <Spin indicator={<LoadingOutlined spin />} /> })}
+        {...(type === "warning" && {
+          icon: <Spin indicator={<LoadingOutlined spin />} />,
+        })}
       />
       {data.result && (
         <JsonView
-          style={{ ...theme, width: '100%', padding: 10 }}
+          style={{ ...theme, width: "100%", padding: 10 }}
           className={classNames({
-            'bg-[#fafafa]': mode === 'light',
+            "bg-[#fafafa]": mode === "light",
           })}
-          value={JSON.parse(data.result || '{}')}
+          value={JSON.parse(data.result || "{}")}
           enableClipboard={false}
           displayDataTypes={false}
           objectSortKeys={false}
         />
       )}
       {data.err_msg && (
-        <ReactMarkdown components={markdownComponents} remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
+        <GPTVis
+          components={markdownComponents}
+          remarkPlugins={[remarkGfm]}
+          rehypePlugins={[rehypeRaw]}
+        >
           {data.err_msg}
-        </ReactMarkdown>
+        </GPTVis>
       )}
     </div>
   );

diff --git a/web/components/chat/chat-content/agent-messages.tsx b/web/components/chat/chat-content/agent-messages.tsx
@@ -1,7 +1,6 @@
 import ModelIcon from '@/new-components/chat/content/ModelIcon';
-import { LinkOutlined, SwapRightOutlined } from '@ant-design/icons';
-import { Popover, Space } from 'antd';
-import ReactMarkdown from 'react-markdown';
+import { SwapRightOutlined } from '@ant-design/icons';
+import { GPTVis } from '@antv/gpt-vis';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import markdownComponents from './config';
@@ -24,19 +23,29 @@ function AgentMessages({ data }: Props) {
       {data.map((item, index) => (
         <div key={index} className="rounded">
           <div className="flex items-center mb-3 text-sm">
-            {item.model ? <ModelIcon model={item.model} /> : <div className="rounded-full w-6 h-6 bg-gray-100" />}
+            {item.model ? (
+              <ModelIcon model={item.model} />
+            ) : (
+              <div className="rounded-full w-6 h-6 bg-gray-100" />
+            )}
             <div className="ml-2 opacity-70">
               {item.sender}
               <SwapRightOutlined className="mx-2 text-base" />
               {item.receiver}
             </div>
           </div>
           <div className="whitespace-normal text-sm mb-3">
-            <ReactMarkdown components={markdownComponents} remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
+            <GPTVis
+              components={markdownComponents}
+              remarkPlugins={[remarkGfm]}
+              rehypePlugins={[rehypeRaw]}
+            >
               {item.markdown}
-            </ReactMarkdown>
+            </GPTVis>
           </div>
-          {item.resource && item.resource !== 'null' && <ReferencesContent references={item.resource} />}
+          {item.resource && item.resource !== "null" && (
+            <ReferencesContent references={item.resource} />
+          )}
         </div>
       ))}
     </>

diff --git a/web/components/chat/chat-content/agent-plans.tsx b/web/components/chat/chat-content/agent-plans.tsx
@@ -1,6 +1,6 @@
 import { CaretRightOutlined, CheckOutlined, ClockCircleOutlined } from '@ant-design/icons';
 import { Collapse } from 'antd';
-import ReactMarkdown from 'react-markdown';
+import { GPTVis } from '@antv/gpt-vis';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 
@@ -32,17 +32,21 @@ function AgentPlans({ data }: Props) {
               <span>
                 {item.name} - {item.agent}
               </span>
-              {item.status === 'complete' ? (
+              {item.status === "complete" ? (
                 <CheckOutlined className="!text-green-500 ml-2" />
               ) : (
                 <ClockCircleOutlined className="!text-gray-500 ml-2" />
               )}
             </div>
           ),
           children: (
-            <ReactMarkdown components={markdownComponents} rehypePlugins={[rehypeRaw]} remarkPlugins={[remarkGfm]}>
+            <GPTVis
+              components={markdownComponents}
+              rehypePlugins={[rehypeRaw]}
+              remarkPlugins={[remarkGfm]}
+            >
               {item.markdown}
-            </ReactMarkdown>
+            </GPTVis>
           ),
         };
       })}