feat: chat in explore support agent (#647)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>

web/app/components/base/markdown.tsx

@@ -1,16 +1,26 @@
-import ReactMarkdown from "react-markdown";
-import "katex/dist/katex.min.css";
-import RemarkMath from "remark-math";
-import RemarkBreaks from "remark-breaks";
-import RehypeKatex from "rehype-katex";
-import RemarkGfm from "remark-gfm";
+import ReactMarkdown from 'react-markdown'
+import 'katex/dist/katex.min.css'
+import RemarkMath from 'remark-math'
+import RemarkBreaks from 'remark-breaks'
+import RehypeKatex from 'rehype-katex'
+import RemarkGfm from 'remark-gfm'
 import SyntaxHighlighter from 'react-syntax-highlighter'
 import { atelierHeathLight } from 'react-syntax-highlighter/dist/esm/styles/hljs'
-import { useRef, useState, RefObject, useEffect } from "react";
+import type { RefObject } from 'react'
+import { useEffect, useRef, useState } from 'react'
 // import { copyToClipboard } from "../utils";
+// https://txtfiddle.com/~hlshwya/extract-urls-from-text
+// const urlRegex = /\b((https?|ftp|file):\/\/|(www|ftp)\.)[-A-Z0-9+&@#\/%?=~_|$!:,.;]*[A-Z0-9+&@#\/%=~_|$]/ig
 
+// function highlightURL(content: string) {
+//   return content.replace(urlRegex, (url) => {
+//     // fix http:// in [] will be parsed to link agin
+//     const res = `[${url.replace('://', '://')}](${url})`
+//     return res
+//   })
+// }
 export function PreCode(props: { children: any }) {
-  const ref = useRef<HTMLPreElement>(null);
+  const ref = useRef<HTMLPreElement>(null)
 
   return (
     <pre ref={ref}>
@@ -18,38 +28,37 @@ export function PreCode(props: { children: any }) {
         className="copy-code-button"
         onClick={() => {
           if (ref.current) {
-            const code = ref.current.innerText;
+            const code = ref.current.innerText
             // copyToClipboard(code);
           }
         }}
       ></span>
       {props.children}
     </pre>
-  );
+  )
 }
 
 const useLazyLoad = (ref: RefObject<Element>): boolean => {
-  const [isIntersecting, setIntersecting] = useState<boolean>(false);
+  const [isIntersecting, setIntersecting] = useState<boolean>(false)
 
   useEffect(() => {
     const observer = new IntersectionObserver(([entry]) => {
       if (entry.isIntersecting) {
-        setIntersecting(true);
-        observer.disconnect();
+        setIntersecting(true)
+        observer.disconnect()
       }
-    });
+    })
 
-    if (ref.current) {
-      observer.observe(ref.current);
-    }
+    if (ref.current)
+      observer.observe(ref.current)
 
     return () => {
-      observer.disconnect();
-    };
-  }, [ref]);
+      observer.disconnect()
+    }
+  }, [ref])
 
-  return isIntersecting;
-};
+  return isIntersecting
+}
 
 export function Markdown(props: { content: string }) {
   return (
@@ -62,26 +71,29 @@ export function Markdown(props: { content: string }) {
         components={{
           code({ node, inline, className, children, ...props }) {
             const match = /language-(\w+)/.exec(className || '')
-            return !inline && match ? (
-              <SyntaxHighlighter
-                {...props}
-                children={String(children).replace(/\n$/, '')}
-                style={atelierHeathLight}
-                language={match[1]}
-                showLineNumbers
-                PreTag="div"
-              />
-            ) : (
-              <code {...props} className={className}>
-                {children}
-              </code>
-            )
-          }
+            return (!inline && match)
+              ? (
+                <SyntaxHighlighter
+                  {...props}
+                  children={String(children).replace(/\n$/, '')}
+                  style={atelierHeathLight}
+                  language={match[1]}
+                  showLineNumbers
+                  PreTag="div"
+                />
+              )
+              : (
+                <code {...props} className={className}>
+                  {children}
+                </code>
+              )
+          },
         }}
-        linkTarget={"_blank"}
+        linkTarget={'_blank'}
       >
+        {/* Markdown detect has problem. */}
         {props.content}
       </ReactMarkdown>
     </div>
-  );
+  )
 }