show confirm modal when open link in message (#1684)

![image](https://user-images.githubusercontent.com/33456881/219732808-36807319-7760-4c36-886a-40c543dd264e.png)

website/public/locales/en/common.json

@@ -4,6 +4,7 @@
   "admin_dashboard": "Admin Dashboard",
   "back_to_dashboard": "Go back to the dashboard",
   "cancel": "Cancel",
+  "confirm": "Confirm",
   "connect": "Connect",
   "conversational": "Conversational AI for everyone.",
   "copied": "Copied",

website/public/locales/en/message.json

@@ -1,13 +1,15 @@
 {
+  "confirm_open_link_body": "Do you want to open this link?",
+  "confirm_open_link_header": "Confirm open link",
   "copy_message_id": "Copy message ID",
   "copy_message_link": "Copy message link",
   "label_action": "Label",
   "label_title": "Label",
-  "message_author": "Author",
   "message_author_explain": "You are the author of this message",
+  "message_author": "Author",
   "message_deleted": "Message deleted",
-  "no_messages": "No messages",
   "message": "Message",
+  "no_messages": "No messages",
   "open_new_tab_action": "Open in new tab",
   "parent": "Parent",
   "reactions": "Reactions",

website/src/components/Messages/MessageTableEntry.tsx

@@ -124,6 +124,7 @@ export function MessageTableEntry({ message, enabled, highlight, showAuthorBadge
         onClick={goToMessage}
         cursor={enabled ? "pointer" : undefined}
         style={{ position: "relative" }}
+        overflow="hidden"
       >
         {inlineAvatar && avatar}
         <Suspense fallback={message.text}>

website/src/components/Messages/RenderedMarkdown.tsx

@@ -1,31 +1,29 @@
-import { SystemStyleObject } from "@chakra-ui/react";
+import {
+  Box,
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  SystemStyleObject,
+  useDisclosure,
+} from "@chakra-ui/react";
 import { Prose } from "@nikolovlazar/chakra-ui-prose";
-import { memo } from "react";
-import { ReactMarkdown } from "react-markdown/lib/react-markdown";
+import NextLink from "next/link";
+import { useTranslation } from "next-i18next";
+import { memo, MouseEvent, useMemo, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import type { ReactMarkdownOptions } from "react-markdown/lib/react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import remarkGfm from "remark-gfm";
 interface RenderedMarkdownProps {
   markdown: string;
 }
 
-const components = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  code({ node, inline, className, children, style, ...props }) {
-    const match = /language-(\w+)/.exec(className || "");
-    const lang = match ? match[1] : "";
-    return !inline ? (
-      <SyntaxHighlighter style={oneDark} language={lang} {...props}>
-        {String(children).replace(/\n$/, "")}
-      </SyntaxHighlighter>
-    ) : (
-      <code className={className} {...props}>
-        {children}
-      </code>
-    );
-  },
-};
-
 const sx: SystemStyleObject = {
   overflowX: "auto",
   pre: {
@@ -74,12 +72,92 @@ const sx: SystemStyleObject = {
 const plugins = [remarkGfm];
 
 // eslint-disable-next-line react/display-name
-const RenderedMarkdown = memo(({ markdown }: RenderedMarkdownProps) => {
+const RenderedMarkdown = ({ markdown }: RenderedMarkdownProps) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [link, setLink] = useState<string | undefined>();
+
+  const components: ReactMarkdownOptions["components"] = useMemo(() => {
+    return {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      code({ node, inline, className, children, style, ...props }) {
+        const match = /language-(\w+)/.exec(className || "");
+        const lang = match ? match[1] : "";
+        return !inline ? (
+          <SyntaxHighlighter style={oneDark} language={lang} {...props}>
+            {String(children).replace(/\n$/, "")}
+          </SyntaxHighlighter>
+        ) : (
+          <code className={className} {...props}>
+            {children}
+          </code>
+        );
+      },
+      a({ href, ...props }) {
+        if (!href) {
+          return props.children;
+        }
+
+        return (
+          <NextLink // use NextLink to handle locale if link is our internal, but it's really edge case.
+            {...props}
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(e: MouseEvent) => {
+              e.preventDefault();
+              setLink(href);
+              onOpen();
+            }}
+          ></NextLink>
+        );
+      },
+    } as ReactMarkdownOptions["components"];
+  }, [onOpen]);
+
+  const linkProps = useMemo(() => {
+    return {
+      as: NextLink,
+      href: link,
+      target: "_blank",
+      rel: "noopener noreferrer",
+    };
+  }, [link]);
+
+  const { t } = useTranslation(["common", "message"]);
+
+  return (
+    <>
+      <MemorizedMarkdown components={components}>{markdown}</MemorizedMarkdown>
+      <Modal isOpen={isOpen} onClose={onClose} isCentered>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>{t("message:confirm_open_link_header")}</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <div>{t("message:confirm_open_link_body")}</div>
+            <Box textDecoration="underline" {...linkProps}>
+              {link}
+            </Box>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant="ghost" mr={3} onClick={onClose}>
+              {t("cancel")}
+            </Button>
+            <Button colorScheme="blue" as={NextLink} {...linkProps} onClick={onClose}>
+              {t("confirm")}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+// eslint-disable-next-line react/display-name
+const MemorizedMarkdown = memo((props: ReactMarkdownOptions) => {
   return (
     <Prose as="div" sx={sx}>
-      <ReactMarkdown remarkPlugins={plugins} components={components}>
-        {markdown}
-      </ReactMarkdown>
+      <ReactMarkdown remarkPlugins={plugins} {...props}></ReactMarkdown>
     </Prose>
   );
 });