From a435a6dbe3ad56d9d804553ed0a2c7b5c71b3e27 Mon Sep 17 00:00:00 2001
From: hustcc <i@hust.cc>
Date: Tue, 20 Aug 2024 20:59:14 +0800
Subject: [PATCH] feat: use gpt-vis 0.2.x

---
 web/components/chat/agent-content.tsx         |   6 +-
 .../chat/chat-content/agent-messages.tsx      |   4 +-
 .../chat/chat-content/agent-plans.tsx         |   4 +-
 web/components/chat/chat-content/config.tsx   | 195 ++++++++++--------
 web/components/chat/chat-content/index.tsx    |   8 +-
 web/components/chat/chat-content/vis-code.tsx |   6 +-
 .../chat/chat-content/vis-plugin.tsx          |   6 +-
 7 files changed, 121 insertions(+), 108 deletions(-)

diff --git a/web/components/chat/agent-content.tsx b/web/components/chat/agent-content.tsx
index 79c4f27d9..52702cdec 100644
--- 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 { MarkdownVis } from '@antv/gpt-vis';
+import { GPTVis } from '@antv/gpt-vis';
 import markdownComponents from './chat-content/config';
 import rehypeRaw from 'rehype-raw';
 
@@ -27,7 +27,9 @@ function AgentContent({ content }: Props) {
       })}
     >
       {isView ? (
-        <MarkdownVis components={markdownComponents}>{formatMarkdownVal(content.context)}</MarkdownVis>
+        <GPTVis components={markdownComponents} rehypePlugins={[rehypeRaw]}>
+          {formatMarkdownVal(content.context)}
+        </GPTVis>
       ) : (
         // <ReactMarkdown components={markdownComponents} rehypePlugins={[rehypeRaw]}>
         //   {formatMarkdownVal(content.context)}
diff --git a/web/components/chat/chat-content/agent-messages.tsx b/web/components/chat/chat-content/agent-messages.tsx
index eb0dfb6ea..ab20d7717 100644
--- a/web/components/chat/chat-content/agent-messages.tsx
+++ b/web/components/chat/chat-content/agent-messages.tsx
@@ -1,4 +1,4 @@
-import { MarkdownVis } from '@antv/gpt-vis';
+import { GPTVis } from '@antv/gpt-vis';
 import markdownComponents from './config';
 import { renderModelIcon } from '../header/model-selector';
 import { SwapRightOutlined } from '@ant-design/icons';
@@ -28,7 +28,7 @@ function AgentMessages({ data }: Props) {
             </div>
           </div>
           <div className="whitespace-normal text-sm">
-            <MarkdownVis components={markdownComponents}>{item.markdown}</MarkdownVis>
+            <GPTVis components={markdownComponents}>{item.markdown}</GPTVis>
           </div>
         </div>
       ))}
diff --git a/web/components/chat/chat-content/agent-plans.tsx b/web/components/chat/chat-content/agent-plans.tsx
index 23db41955..397cdec99 100644
--- 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 { MarkdownVis } from '@antv/gpt-vis';
+import { GPTVis } from '@antv/gpt-vis';
 import markdownComponents from './config';
 
 interface Props {
@@ -36,7 +36,7 @@ function AgentPlans({ data }: Props) {
               )}
             </div>
           ),
-          children: <MarkdownVis components={markdownComponents}>{item.markdown}</MarkdownVis>,
+          children: <GPTVis components={markdownComponents}>{item.markdown}</GPTVis>,
         };
       })}
     />
diff --git a/web/components/chat/chat-content/config.tsx b/web/components/chat/chat-content/config.tsx
index 0fb951aa7..31c87be05 100644
--- a/web/components/chat/chat-content/config.tsx
+++ b/web/components/chat/chat-content/config.tsx
@@ -1,5 +1,5 @@
 import { LinkOutlined, ReadOutlined, SyncOutlined } from '@ant-design/icons';
-import { MarkdownVis } from '@antv/gpt-vis';
+import { GPTVis, withDefaultChartCode } from '@antv/gpt-vis';
 import { Table, Image, Tag, Tabs, TabsProps, Popover } from 'antd';
 import { Reference } from '@/types/chat';
 import { AutoChart, BackEndChartType, getChartType } from '@/components/chart';
@@ -16,7 +16,7 @@ import VisPlugin from './vis-plugin';
 import VisCode from './vis-code';
 import { formatSql } from '@/utils';
 
-type MarkdownComponent = Parameters<typeof ReactMarkdown>['0']['components'];
+type MarkdownComponent = Parameters<typeof GPTVis>['0']['components'];
 
 const customeTags: (keyof JSX.IntrinsicElements)[] = ['custom-view', 'chart-view', 'references', 'summary'];
 
@@ -32,97 +32,110 @@ function matchCustomeTagValues(context: string) {
   return { context, matchValues };
 }
 
-const basicComponents: MarkdownComponent = {
-  code({ inline, node, className, children, style, ...props }) {
-    const content = String(children);
-    /**
-     * @description
-     * In some cases, tags are nested within code syntax,
-     * so it is necessary to extract the tags present in the code block and render them separately.
-     */
-    // const { context, matchValues } = matchCustomeTagValues(content);
-    const lang = className?.replace('language-', '') || 'javascript';
+const codeComponents = {
+  code: withDefaultChartCode({
+    languageRenderers: {
+      'agent-plans': ({ inline, node, className, children, style, ...props }) => {
+        const content = String(children);
+        /**
+         * @description
+         * In some cases, tags are nested within code syntax,
+         * so it is necessary to extract the tags present in the code block and render them separately.
+         */
+        const lang = className?.replace('language-', '') || 'javascript';
+        try {
+          const data = JSON.parse(content) as Parameters<typeof AgentPlans>[0]['data'];
+          return <AgentPlans data={data} />;
+        } catch (e) {
+          return <CodePreview language={lang} code={content} />;
+        }
+      },
+      'agent-messages': ({ inline, node, className, children, style, ...props }) => {
+        const content = String(children);
+        const lang = className?.replace('language-', '') || 'javascript';
+        try {
+          const data = JSON.parse(content) as Parameters<typeof AgentMessages>[0]['data'];
+          return <AgentMessages data={data} />;
+        } catch (e) {
+          return <CodePreview language={lang} code={content} />;
+        }
+      },
+      'vis-convert-error': ({ inline, node, className, children, style, ...props }) => {
+        const content = String(children);
+        const lang = className?.replace('language-', '') || 'javascript';
+        try {
+          const data = JSON.parse(content) as Parameters<typeof VisConvertError>[0]['data'];
+          return <VisConvertError data={data} />;
+        } catch (e) {
+          return <CodePreview language={lang} code={content} />;
+        }
+      },
+      'vis-dashboard': ({ inline, node, className, children, style, ...props }) => {
+        const content = String(children);
+        const lang = className?.replace('language-', '') || 'javascript';
+        try {
+          const data = JSON.parse(content) as Parameters<typeof VisDashboard>[0]['data'];
+          return <VisDashboard data={data} />;
+        } catch (e) {
+          return <CodePreview language={lang} code={content} />;
+        }
+      },
+      'vis-chart': ({ inline, node, className, children, style, ...props }) => {
+        const content = String(children);
+        const lang = className?.replace('language-', '') || 'javascript';
+        try {
+          const data = JSON.parse(content) as Parameters<typeof VisChart>[0]['data'];
+          return <VisChart data={data} />;
+        } catch (e) {
+          return <CodePreview language={lang} code={content} />;
+        }
+      },
+      'vis-plugin': ({ inline, node, className, children, style, ...props }) => {
+        const content = String(children);
+        const lang = className?.replace('language-', '') || 'javascript';
+        try {
+          const data = JSON.parse(content) as Parameters<typeof VisPlugin>[0]['data'];
+          return <VisPlugin data={data} />;
+        } catch (e) {
+          return <CodePreview language={lang} code={content} />;
+        }
+      },
+      'vis-code': ({ inline, node, className, children, style, ...props }) => {
+        const content = String(children);
+        const lang = className?.replace('language-', '') || 'javascript';
 
-    if (lang === 'agent-plans') {
-      try {
-        const data = JSON.parse(content) as Parameters<typeof AgentPlans>[0]['data'];
-        return <AgentPlans data={data} />;
-      } catch (e) {
-        return <CodePreview language={lang} code={content} />;
-      }
-    }
-
-    if (lang === 'agent-messages') {
-      try {
-        const data = JSON.parse(content) as Parameters<typeof AgentMessages>[0]['data'];
-        return <AgentMessages data={data} />;
-      } catch (e) {
-        return <CodePreview language={lang} code={content} />;
-      }
-    }
-
-    if (lang === 'vis-convert-error') {
-      try {
-        const data = JSON.parse(content) as Parameters<typeof VisConvertError>[0]['data'];
-        return <VisConvertError data={data} />;
-      } catch (e) {
-        return <CodePreview language={lang} code={content} />;
-      }
-    }
-
-    if (lang === 'vis-dashboard') {
-      try {
-        const data = JSON.parse(content) as Parameters<typeof VisDashboard>[0]['data'];
-        return <VisDashboard data={data} />;
-      } catch (e) {
-        return <CodePreview language={lang} code={content} />;
-      }
-    }
-
-    if (lang === 'vis-chart') {
-      try {
-        const data = JSON.parse(content) as Parameters<typeof VisChart>[0]['data'];
-        return <VisChart data={data} />;
-      } catch (e) {
-        return <CodePreview language={lang} code={content} />;
-      }
-    }
-
-    if (lang === 'vis-plugin') {
-      try {
-        const data = JSON.parse(content) as Parameters<typeof VisPlugin>[0]['data'];
-        return <VisPlugin data={data} />;
-      } catch (e) {
-        return <CodePreview language={lang} code={content} />;
-      }
-    }
-
-    if (lang === 'vis-code') {
-      try {
-        const data = JSON.parse(content) as Parameters<typeof VisCode>[0]['data'];
-        return <VisCode data={data} />;
-      } catch (e) {
-        return <CodePreview language={lang} code={content} />;
-      }
-    }
+        try {
+          const data = JSON.parse(content) as Parameters<typeof VisCode>[0]['data'];
+          return <VisCode data={data} />;
+        } catch (e) {
+          return <CodePreview language={lang} code={content} />;
+        }
+      },
+    },
+    defaultRenderer({ inline, node, className, children, style, ...props }) {
+      const content = String(children);
+      const lang = className?.replace('language-', '') || 'javascript';
+      const { context, matchValues } = matchCustomeTagValues(content);
+      return (
+        <>
+          {!inline ? (
+            <CodePreview code={context} language={lang} />
+          ) : (
+            <code {...props} style={style} className="p-1 mx-1 rounded bg-theme-light dark:bg-theme-dark text-sm">
+              {children}
+            </code>
+          )}
+          <GPTVis components={markdownComponents} rehypePlugins={[rehypeRaw]}>
+            {matchValues.join('\n')}
+          </GPTVis>
+        </>
+      );
+    },
+  }),
+};
 
-    console.log(1111111, 'render with gpt-vis');
-    return (
-      <>
-        {!inline ? (
-          <CodePreview code={context} language={lang} />
-        ) : (
-          <code {...props} style={style} className="p-1 mx-1 rounded bg-theme-light dark:bg-theme-dark text-sm">
-            {children}
-          </code>
-        )}
-        <MarkdownVis components={{ markdownComponents }}>{matchValues.join('\n')}</MarkdownVis>
-        {/* <ReactMarkdown components={{ markdownComponents }} rehypePlugins={[rehypeRaw]}>
-          {matchValues.join('\n')}
-        </ReactMarkdown> */}
-      </>
-    );
-  },
+const basicComponents: MarkdownComponent = {    
+  ...codeComponents,
   ul({ children }) {
     return <ul className="py-1">{children}</ul>;
   },
diff --git a/web/components/chat/chat-content/index.tsx b/web/components/chat/chat-content/index.tsx
index 60b2e0a43..ea7a668ca 100644
--- a/web/components/chat/chat-content/index.tsx
+++ b/web/components/chat/chat-content/index.tsx
@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactNode, memo, useContext, useMemo } from 'react';
 import { CheckOutlined, ClockCircleOutlined, CloseOutlined, CodeOutlined, LoadingOutlined, RobotOutlined, UserOutlined } from '@ant-design/icons';
-import { MarkdownVis } from '@antv/gpt-vis';
+import { GPTVis } from '@antv/gpt-vis';
 import { IChatDialogueMessageSchema } from '@/types/chat';
 import rehypeRaw from 'rehype-raw';
 import classNames from 'classnames';
@@ -22,7 +22,7 @@ interface Props {
   onLinkClick?: () => void;
 }
 
-type MarkdownComponent = Parameters<typeof ReactMarkdown>['0']['components'];
+type MarkdownComponent = Parameters<typeof GPTVis>['0']['components'];
 
 type DBGPTView = {
   name: string;
@@ -160,9 +160,7 @@ function ChatContent({ children, content, isChartChat, onLinkClick }: PropsWithC
         )}
         {/* Markdown */}
         {isRobot && typeof context === 'string' && (
-          <MarkdownVis components={{ ...markdownComponents, ...extraMarkdownComponents }}>
-            {formatMarkdownVal(value)}
-          </MarkdownVis>
+          <GPTVis components={{ ...markdownComponents, ...extraMarkdownComponents }}>{formatMarkdownVal(value)}</GPTVis>
         )}
         {!!relations?.length && (
           <div className="flex flex-wrap mt-2">
diff --git a/web/components/chat/chat-content/vis-code.tsx b/web/components/chat/chat-content/vis-code.tsx
index 4048e02fb..f218c5e71 100644
--- a/web/components/chat/chat-content/vis-code.tsx
+++ b/web/components/chat/chat-content/vis-code.tsx
@@ -1,4 +1,4 @@
-import { MarkdownVis } from '@antv/gpt-vis';
+import { GPTVis } from '@antv/gpt-vis';
 import remarkGfm from 'remark-gfm';
 import markdownComponents from './config';
 import { CodePreview } from './code-preview';
@@ -57,9 +57,9 @@ function VisCode({ data }: Props) {
           </div>
         </div>
         <div className="p-4 max-h-72 overflow-y-auto whitespace-normal bg-white dark:dark:bg-theme-dark">
-          <MarkdownVis components={markdownComponents} remarkPlugins={[remarkGfm]}>
+          <GPTVis components={markdownComponents} remarkPlugins={[remarkGfm]}>
             {data.log}
-          </MarkdownVis>
+          </GPTVis>
         </div>
       </div>
     </div>
diff --git a/web/components/chat/chat-content/vis-plugin.tsx b/web/components/chat/chat-content/vis-plugin.tsx
index 5732e9b78..f6615b917 100644
--- a/web/components/chat/chat-content/vis-plugin.tsx
+++ b/web/components/chat/chat-content/vis-plugin.tsx
@@ -1,7 +1,7 @@
 import { CheckOutlined, ClockCircleOutlined, CloseOutlined, LoadingOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
 import { ReactNode } from 'react';
-import { MarkdownVis } from '@antv/gpt-vis';
+import { GPTVis } from '@antv/gpt-vis';
 import markdownComponents from './config';
 import rehypeRaw from 'rehype-raw';
 
@@ -50,9 +50,9 @@ function VisPlugin({ data }: Props) {
       </div>
       {data.result ? (
         <div className="px-4 md:px-6 py-4 text-sm whitespace-normal">
-          <MarkdownVis components={markdownComponents}>
+          <GPTVis components={markdownComponents} rehypePlugins={[rehypeRaw]}>
             {data.result ?? ''}
-          </MarkdownVis>
+          </GPTVis>
         </div>
       ) : (
         <div className="px-4 md:px-6 py-4 text-sm">{data.err_msg}</div>