Bot UI: Make links clickable in debug messages, fixed webkit behavior

Author: bogdan-ts

ui/packages/platform/src/pages/Bot/DebugConsole/DebugConsole.tsx

@@ -1,28 +1,24 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef } from "react";
 import Dialog from "@material-ui/core/Dialog";
 import { DialogContent, DialogTitle, makeStyles } from "@material-ui/core";
 import { useAiBot } from "../hooks";
-import rehypeRaw from "rehype-raw";
-import remarkGfm from "remark-gfm";
-import ReactMarkdown from "react-markdown";
 import IconButton from "@material-ui/core/IconButton";
 import CloseIcon from "@material-ui/icons/Close";
-import { disallowedHtmlTagsForMarkdown } from "../utils";
 import { DebugLogs } from "../DebugLogs/DebugLogs";
-import { DebugMessage } from "../../../types/api/entities/bot";
+import { createMessageFragment } from "../utils";
 
 const useStyles = makeStyles(
   (theme) => ({
     dialogStyle: {
       top: '5%!important',
       right: '10%!important',
       left: 'unset!important',
-      height: 'fit-content',
-      width: 'fit-content',
+      height: '80vh',
+      width: '80vw',
     },
     paper: {
       width: '80vw',
-      height: '70vh',
+      height: '80vh',
       opacity: '.5',
       transition: '.2s ease',
       '&:hover': {
@@ -58,17 +54,19 @@ export const DebugConsole = (props: DebugConsoleProps) => {
 
   useEffect(() => {
     if (containerRef.current && debugMessages?.length && threadId && !debugMessagesLoading && isOpen) {
-      let code: HTMLElement = containerRef.current.getElementsByTagName('code')?.[0];
+      let code = containerRef.current.getElementsByTagName('code')?.[0];
+      if (!code) {
+        code = document.createElement('code');
+        containerRef.current.appendChild(code);
+      }
+
       if (code.hasChildNodes()) {
-        code.appendChild(document.createTextNode(`[${debugMessages[debugMessages.length - 1].created_at}]: ${debugMessages[debugMessages.length - 1].content}\n`))
+        const lastMessage = debugMessages[debugMessages.length - 1];
+        const fragment = createMessageFragment([lastMessage]);
+        code.appendChild(fragment);
       } else {
-        debugMessages.forEach((item) => {
-          code.appendChild(document.createTextNode(`[${item.created_at}]: ${item.content}\n`))
-        })
-        const container = document.getElementById(`logs-container-${threadId}`);
-        if (container) {
-          container.appendChild(code)
-        }
+        const fragment = createMessageFragment(debugMessages);
+        code.appendChild(fragment);
       }
     }
   }, [debugMessages, isOpen, threadId, debugMessagesLoading]);

ui/packages/platform/src/pages/Bot/DebugDialog/DebugDialog.tsx

@@ -1,18 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react'
 import Dialog from "@material-ui/core/Dialog";
 import DialogTitle from '@material-ui/core/DialogTitle';
-import { DialogContent, IconButton, makeStyles, Typography } from "@material-ui/core";
-import ReactMarkdown from "react-markdown";
-import Format from "../../../utils/format";
+import { DialogContent, IconButton, makeStyles } from "@material-ui/core";
 import { icons } from "@postgres.ai/shared/styles/icons";
-import { disallowedHtmlTagsForMarkdown } from "../utils";
-import { BotMessage, DebugMessage } from "../../../types/api/entities/bot";
-import rehypeRaw from "rehype-raw";
-import remarkGfm from "remark-gfm";
+import { DebugMessage } from "../../../types/api/entities/bot";
 import { getDebugMessages } from "../../../api/bot/getDebugMessages";
-import { PageSpinner } from "@postgres.ai/shared/components/PageSpinner";
-import { SyntaxHighlight } from "@postgres.ai/shared/components/SyntaxHighlight";
 import { DebugLogs } from "../DebugLogs/DebugLogs";
+import { createMessageFragment } from "../utils";
 
 type DebugDialogProps = {
   isOpen: boolean;
@@ -52,15 +46,18 @@ export const DebugDialog = (props: DebugDialogProps) => {
   const debugMessages = useRef<DebugMessage[] | null>(null)
 
   const generateMessages = (messages: DebugMessage[]) => {
-    const code = document.createElement('code');
-    messages.forEach((item) => {
-      code.appendChild(document.createTextNode(`[${item.created_at}]: ${item.content}\n`))
-    })
     const container = document.getElementById(`logs-container-${messageId}`);
     if (container) {
-      container.appendChild(code)
+      let code = container.getElementsByTagName('code')?.[0];
+      if (!code) {
+        code = document.createElement('code');
+        container.appendChild(code);
+      }
+
+      const fragment = createMessageFragment(messages);
+      code.appendChild(fragment);
     }
-  }
+  };
 
   const getDebugMessagesForMessage = async () => {
     setDebugLoading(true)

ui/packages/platform/src/pages/Bot/utils.ts

@@ -30,4 +30,31 @@ export const disallowedHtmlTagsForMarkdown= [
   'frameset',
   'audio',
   'video',
-];
+];
+
+export const createMessageFragment = (messages: DebugMessage[]): DocumentFragment => {
+  const fragment = document.createDocumentFragment();
+
+  messages.forEach((item) => {
+    const textBeforeLink = `[${item.created_at}]: `;
+    const parts = item.content.split(/(https?:\/\/[^\s]+)/g);
+
+    const messageContent = parts.map((part) => {
+      if (/https?:\/\/[^\s]+/.test(part)) {
+        const link = document.createElement('a');
+        link.href = part;
+        link.target = '_blank';
+        link.textContent = part;
+        return link;
+      } else {
+        return document.createTextNode(part);
+      }
+    });
+
+    fragment.appendChild(document.createTextNode(textBeforeLink));
+    messageContent.forEach((node) => fragment.appendChild(node));
+    fragment.appendChild(document.createTextNode('\n'));
+  });
+
+  return fragment;
+};