refactor: upgrade gpt-vis (#1883)

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,7 +23,11 @@ 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" />
@@ -32,11 +35,17 @@ function AgentMessages({ data }: Props) {
             </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>
       ))}
     </>