format links

app/components/Navbar.tsx

@@ -89,7 +89,9 @@ export default function Navbar({
             }
         `}
           />
-          <span className="sm:text-sm text-xs text-zinc-50">Live on Base Sepolia</span>
+          <span className="sm:text-sm text-xs text-zinc-50">
+            Live on Base Sepolia
+          </span>
         </div>
         <div className="sm:text-sm text-xs" aria-live="polite">
           {formatDateToBangkokTime(new Date())} ICT

app/components/StreamItem.tsx

@@ -5,14 +5,39 @@ type StreamItemProps = {
   entry: StreamEntry;
 };
 
+const formatContent = (content: string) => {
+  // Regular expression to detect URLs
+  const urlRegex = /(https?:\/\/[^\s]+)/g;
+
+  // Replace URLs with clickable anchor tags
+  return content.split(urlRegex).map((part, index) =>
+    urlRegex.test(part) ? (
+      <a
+        key={index}
+        href={part}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-blue-500 underline"
+      >
+        {part}
+      </a>
+    ) : (
+      <span key={index}>{part}</span>
+    ),
+  );
+};
+
 export default function StreamItem({ entry }: StreamItemProps) {
   return (
     <div className="mb-2">
       <TimeDisplay timestamp={entry.timestamp} />
       <div
         className={`flex items-center space-x-2 max-w-full ${entry?.type !== 'user' ? 'text-[#5788FA]' : 'text-gray-300'}`}
       >
-        <span className="max-w-full text-wrap break-all"> {entry.content}</span>
+        <span className="max-w-full text-wrap break-all">
+          {' '}
+          {formatContent(entry?.content)}
+        </span>
       </div>
     </div>
   );