feat: clickable links in UI

chat/src/components/message-list.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useLayoutEffect, useRef, useEffect, useCallback } from "react";
+import React, {useLayoutEffect, useRef, useEffect, useCallback, useMemo, useState} from "react";
 
 interface Message {
   role: string;
@@ -18,7 +18,15 @@ interface MessageListProps {
   messages: (Message | DraftMessage)[];
 }
 
-export default function MessageList({ messages }: MessageListProps) {
+interface ProcessedMessageProps {
+  messageContent: string;
+  index: number;
+  modifierPressed: boolean;
+  urlRegex: RegExp;
+  handleClick: (e: React.MouseEvent<HTMLAnchorElement>, url: string) => void;
+}
+
+export default function MessageList({messages}: MessageListProps) {
   const scrollAreaRef = useRef<HTMLDivElement>(null);
   // Avoid the message list to change its height all the time. It causes some
   // flickering in the screen because some messages, as the ones displaying
@@ -34,10 +42,35 @@ export default function MessageList({ messages }: MessageListProps) {
 
   const checkIfAtBottom = useCallback(() => {
     if (!scrollAreaRef.current) return false;
-    const { scrollTop, scrollHeight, clientHeight } = scrollAreaRef.current;
+    const {scrollTop, scrollHeight, clientHeight} = scrollAreaRef.current;
     return scrollTop + clientHeight >= scrollHeight - 10; // 10px tolerance
   }, []);
 
+  // Regex to find URLs
+  // https://stackoverflow.com/a/17773849
+  const urlRegex = useMemo<RegExp>(() => /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/g, []);
+
+  const [modifierPressed, setModifierPressed] = useState(false);
+
+  // Track Ctrl (Windows/Linux) or Cmd (Mac) key state
+  // This is so that underline is only visible when hover + cmd/ctrl
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.ctrlKey || e.metaKey) setModifierPressed(true);
+    };
+    const handleKeyUp = (e: KeyboardEvent) => {
+      if (!e.ctrlKey && !e.metaKey) setModifierPressed(false);
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+    };
+  }, []);
+
   // Update isAtBottom on scroll
   useEffect(() => {
     const scrollContainer = scrollAreaRef.current;
@@ -92,6 +125,14 @@ export default function MessageList({ messages }: MessageListProps) {
     lastScrollHeightRef.current = currentScrollHeight;
   }, [messages]);
 
+  const handleClick = useCallback(() => (e: React.MouseEvent<HTMLAnchorElement>, url: string) => {
+    if (e.metaKey || e.ctrlKey) {
+      window.open(url, "_blank");
+    } else {
+      e.preventDefault(); // disable normal click to emulate terminal behaviour
+    }
+  }, []);
+
   // If no messages, show a placeholder
   if (messages.length === 0) {
     return (
@@ -105,9 +146,9 @@ export default function MessageList({ messages }: MessageListProps) {
     <div className="overflow-y-auto flex-1" ref={scrollAreaRef}>
       <div
         className="p-4 flex flex-col gap-4 max-w-4xl mx-auto"
-        style={{ minHeight: contentMinHeight.current }}
+        style={{minHeight: contentMinHeight.current}}
       >
-        {messages.map((message) => (
+        {messages.map((message, index) => (
           <div
             key={message.id ?? "draft"}
             className={`${message.role === "user" ? "text-right" : ""}`}
@@ -125,9 +166,15 @@ export default function MessageList({ messages }: MessageListProps) {
                 }`}
               >
                 {message.role !== "user" && message.content === "" ? (
-                  <LoadingDots />
+                  <LoadingDots/>
                 ) : (
-                  message.content.trimEnd()
+                  <ProcessedMessage
+                    messageContent={message.content}
+                    index={index}
+                    modifierPressed={modifierPressed}
+                    urlRegex={urlRegex}
+                    handleClick={handleClick}
+                  />
                 )}
               </div>
             </div>
@@ -155,3 +202,34 @@ const LoadingDots = () => (
     <span className="sr-only">Loading...</span>
   </div>
 );
+
+
+const ProcessedMessage = React.memo(function ProcessedMessage({
+                                                                messageContent,
+                                                                index,
+                                                                modifierPressed,
+                                                                urlRegex,
+                                                                handleClick
+                                                              }: ProcessedMessageProps) {
+  const linkedContent = useMemo(() => {
+    return messageContent.split(urlRegex).map((content, idx) => {
+      if (urlRegex.test(content)) {
+        return (
+          <a
+            key={`${index}-${idx}`}
+            href={content}
+            onClick={(e) => handleClick(e, content)}
+            className={`${
+              modifierPressed ? "hover:underline cursor-pointer" : "cursor-default"
+            }`}
+          >
+            {content}
+          </a>
+        );
+      }
+      return <span key={`${index}-${idx}`}>{content}</span>;
+    });
+  }, [handleClick, index, messageContent, modifierPressed, urlRegex]);
+
+  return <>{linkedContent}</>;
+});