feat: add highlight for link in message

src/global.css

@@ -15,7 +15,7 @@ html {
 }
 
 a {
-	@apply cursor-default no-underline !important;
+	@apply cursor-default !important;
 }
 
 button {

src/routes/$account/_layout/chats.$id.lazy.tsx

@@ -1,15 +1,15 @@
-import { commands } from '@/commands'
+import { commands } from "@/commands";
-import { cn, getReceivers, groupEventByDate, time, upload } from '@/commons'
+import { cn, getReceivers, groupEventByDate, time, upload } from "@/commons";
-import { Spinner } from '@/components/spinner'
+import { Spinner } from "@/components/spinner";
-import { User } from '@/components/user'
+import { User } from "@/components/user";
-import { CoopIcon } from '@/icons/coop'
+import { CoopIcon } from "@/icons/coop";
-import { ArrowUp, Paperclip, X } from '@phosphor-icons/react'
+import { ArrowUp, Paperclip, X } from "@phosphor-icons/react";
-import * as ScrollArea from '@radix-ui/react-scroll-area'
+import * as ScrollArea from "@radix-ui/react-scroll-area";
-import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { createLazyFileRoute } from '@tanstack/react-router'
+import { createLazyFileRoute } from "@tanstack/react-router";
-import { listen } from '@tauri-apps/api/event'
+import { listen } from "@tauri-apps/api/event";
-import { message } from '@tauri-apps/plugin-dialog'
+import { message } from "@tauri-apps/plugin-dialog";
-import type { NostrEvent } from 'nostr-tools'
+import type { NostrEvent } from "nostr-tools";
 import {
 	type Dispatch,
 	type SetStateAction,
@@ -17,18 +17,18 @@ import {
 	useRef,
 	useState,
 	useTransition,
-} from 'react'
+} from "react";
-import { useEffect } from 'react'
+import { useEffect } from "react";
-import { Virtualizer, type VirtualizerHandle } from 'virtua'
+import { Virtualizer, type VirtualizerHandle } from "virtua";
 
 type EventPayload = {
-  event: string
+	event: string;
-  sender: string
+	sender: string;
-}
+};
 
-export const Route = createLazyFileRoute('/$account/_layout/chats/$id')({
+export const Route = createLazyFileRoute("/$account/_layout/chats/$id")({
 	component: Screen,
-})
+});
 
 function Screen() {
 	return (
@@ -37,19 +37,19 @@ function Screen() {
 			<List />
 			<Form />
 		</div>
-  )
+	);
 }
 
 function Header() {
-  const { account, id } = Route.useParams()
+	const { account, id } = Route.useParams();
-  const { platform } = Route.useRouteContext()
+	const { platform } = Route.useRouteContext();
 
 	return (
 		<div
 			data-tauri-drag-region
 			className={cn(
-        'h-12 shrink-0 flex items-center justify-between border-b border-neutral-100 dark:border-neutral-800',
+				"h-12 shrink-0 flex items-center justify-between border-b border-neutral-100 dark:border-neutral-800",
-        platform === 'windows' ? 'pl-3.5 pr-[150px]' : 'px-3.5',
+				platform === "windows" ? "pl-3.5 pr-[150px]" : "px-3.5",
 			)}
 		>
 			<div className="z-[200]">
@@ -76,40 +76,40 @@ function Header() {
 				</div>
 			</div>
 		</div>
-  )
+	);
 }
 
 function List() {
-  const { account, id } = Route.useParams()
+	const { account, id } = Route.useParams();
 	const { isLoading, isError, data } = useQuery({
-    queryKey: ['chats', id],
+		queryKey: ["chats", id],
 		queryFn: async () => {
-      const res = await commands.getChatMessages(id)
+			const res = await commands.getChatMessages(id);
 
-      if (res.status === 'ok') {
+			if (res.status === "ok") {
-        const raw = res.data
+				const raw = res.data;
-        const events: NostrEvent[] = raw.map((item) => JSON.parse(item))
+				const events: NostrEvent[] = raw.map((item) => JSON.parse(item));
 
-        return events
+				return events;
 			} else {
-        throw new Error(res.error)
+				throw new Error(res.error);
 			}
 		},
 		select: (data) => {
-      const groups = groupEventByDate(data)
+			const groups = groupEventByDate(data);
-      return Object.entries(groups).reverse()
+			return Object.entries(groups).reverse();
 		},
 		refetchOnWindowFocus: false,
-  })
+	});
 
-  const queryClient = useQueryClient()
+	const queryClient = useQueryClient();
-  const scrollRef = useRef<HTMLDivElement>(null)
+	const scrollRef = useRef<HTMLDivElement>(null);
-  const ref = useRef<VirtualizerHandle>(null)
+	const ref = useRef<VirtualizerHandle>(null);
-  const shouldStickToBottom = useRef(true)
+	const shouldStickToBottom = useRef(true);
 
 	const renderItem = useCallback(
 		(item: NostrEvent, idx: number) => {
-      const self = account === item.pubkey
+			const self = account === item.pubkey;
 
 			return (
 				<div
@@ -118,19 +118,19 @@ function List() {
 				>
 					<div
 						className={cn(
-              'flex-1 min-w-0 inline-flex',
+							"flex-1 min-w-0 inline-flex",
-              self ? 'justify-end' : 'justify-start',
+							self ? "justify-end" : "justify-start",
 						)}
 					>
 						<div
 							className={cn(
-                'py-2 px-3 w-fit max-w-[400px] text-pretty break-message',
+								"select-text py-2 px-3 w-fit max-w-[400px] text-pretty break-message",
 								!self
-                  ? 'bg-neutral-100 dark:bg-neutral-800 rounded-tl-3xl rounded-tr-3xl rounded-br-3xl rounded-bl-md'
+									? "bg-neutral-100 dark:bg-neutral-800 rounded-tl-3xl rounded-tr-3xl rounded-br-3xl rounded-bl-md"
-                  : 'bg-blue-500 text-white rounded-tl-3xl rounded-tr-3xl rounded-br-md rounded-bl-3xl',
+									: "bg-blue-500 text-white rounded-tl-3xl rounded-tr-3xl rounded-br-md rounded-bl-3xl",
 							)}
 						>
-              {item.content}
+							<Message text={item.content} />
 						</div>
 					</div>
 					<div className="shrink-0 w-16 flex items-center justify-end">
@@ -139,48 +139,48 @@ function List() {
 						</span>
 					</div>
 				</div>
-      )
+			);
 		},
 		[data],
-  )
+	);
 
 	useEffect(() => {
-    const unlisten = listen<EventPayload>('event', async (data) => {
+		const unlisten = listen<EventPayload>("event", async (data) => {
-      const event: NostrEvent = JSON.parse(data.payload.event)
+			const event: NostrEvent = JSON.parse(data.payload.event);
-      const sender = data.payload.sender
+			const sender = data.payload.sender;
-      const receivers = getReceivers(event.tags)
+			const receivers = getReceivers(event.tags);
-      const group = [account, id]
+			const group = [account, id];
 
-      if (!group.includes(sender)) return
+			if (!group.includes(sender)) return;
-      if (!group.some((item) => receivers.includes(item))) return
+			if (!group.some((item) => receivers.includes(item))) return;
 
 			await queryClient.setQueryData(
-        ['chats', id],
+				["chats", id],
 				(prevEvents: NostrEvent[]) => {
-          if (!prevEvents) return [event]
+					if (!prevEvents) return [event];
-          return [event, ...prevEvents]
+					return [event, ...prevEvents];
 				},
-      )
+			);
-    })
+		});
 
 		return () => {
-      unlisten.then((f) => f())
+			unlisten.then((f) => f());
-    }
+		};
-  }, [account, id])
+	}, [account, id]);
 
 	useEffect(() => {
-    if (!data?.length) return
+		if (!data?.length) return;
-    if (!ref.current) return
+		if (!ref.current) return;
-    if (!shouldStickToBottom.current) return
+		if (!shouldStickToBottom.current) return;
 
 		ref.current.scrollToIndex(data.length - 1, {
-      align: 'end',
+			align: "end",
-    })
+		});
-  }, [data])
+	}, [data]);
 
 	return (
 		<ScrollArea.Root
-      type={'scroll'}
+			type={"scroll"}
 			scrollHideDelay={300}
 			className="overflow-hidden flex-1 w-full"
 		>
@@ -193,9 +193,10 @@ function List() {
 					ref={ref}
 					shift={true}
 					onScroll={(offset) => {
-            if (!ref.current) return
+						if (!ref.current) return;
 						shouldStickToBottom.current =
-              offset - ref.current.scrollSize + ref.current.viewportSize >= -1.5
+							offset - ref.current.scrollSize + ref.current.viewportSize >=
+							-1.5;
 					}}
 				>
 					{isLoading ? (
@@ -248,39 +249,67 @@ function List() {
 			</ScrollArea.Scrollbar>
 			<ScrollArea.Corner className="bg-transparent" />
 		</ScrollArea.Root>
-  )
+	);
+}
+
+function Message({ text }: { text: string }) {
+	const delimiter =
+		/((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\-]{1,61}[a-z0-9])?\.[^\.|\s])+[a-z\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\/~#&=;%+?\-\\(\\)]*)/gi;
+
+	return (
+		<>
+			{text.split(delimiter).map((word) => {
+				const match = word.match(delimiter);
+				if (match) {
+					const url = match[0];
+					return (
+						<a
+							href={url.startsWith("http") ? url : `http://${url}`}
+							target="_blank"
+							rel="noreferrer"
+							className="underline"
+						>
+							{url}
+						</a>
+					);
+				}
+				return word;
+			})}
+		</>
+	);
 }
 
 function Form() {
-  const { id } = Route.useParams()
+	const { id } = Route.useParams();
-  const inboxRelays = Route.useLoaderData()
+	const inboxRelays = Route.useLoaderData();
 
-  const [newMessage, setNewMessage] = useState('')
+	const [newMessage, setNewMessage] = useState("");
-  const [attaches, setAttaches] = useState<string[]>([])
+	const [attaches, setAttaches] = useState<string[]>([]);
-  const [isPending, startTransition] = useTransition()
+	const [isPending, startTransition] = useTransition();
 
 	const remove = (item: string) => {
-    setAttaches((prev) => prev.filter((att) => att !== item))
+		setAttaches((prev) => prev.filter((att) => att !== item));
-  }
+	};
 
 	const submit = () => {
 		startTransition(async () => {
-      if (!newMessage.length) return
+			if (!newMessage.length) return;
 
-      const content = `${newMessage}\r\n${attaches.join('\r\n')}`
+			const content = `${newMessage}\r\n${attaches.join("\r\n")}`;
-      const res = await commands.sendMessage(id, content)
+			const res = await commands.sendMessage(id, content);
 
-      if (res.status === 'error') {
+			if (res.status === "error") {
 				await message(res.error, {
-          title: 'Send mesaage failed',
+					title: "Send mesaage failed",
-          kind: 'error',
+					kind: "error",
-        })
+				});
-        return
+				return;
 			}
 
-      setNewMessage('')
+			setNewMessage("");
-    })
+			setAttaches([]);
-  }
+		});
+	};
 
 	return (
 		<div className="shrink-0 flex items-center justify-center px-3.5">
@@ -322,7 +351,7 @@ function Form() {
 							value={newMessage}
 							onChange={(e) => setNewMessage(e.target.value)}
 							onKeyDown={(e) => {
-                if (e.key === 'Enter') submit()
+								if (e.key === "Enter") submit();
 							}}
 							className="flex-1 h-9 rounded-full px-3.5 bg-transparent border border-neutral-200 dark:border-neutral-800 focus:outline-none focus:border-blue-500 placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
 						/>
@@ -339,27 +368,27 @@ function Form() {
 				</div>
 			)}
 		</div>
-  )
+	);
 }
 
 function AttachMedia({
 	onUpload,
 }: {
-  onUpload: Dispatch<SetStateAction<string[]>>
+	onUpload: Dispatch<SetStateAction<string[]>>;
 }) {
-  const [isPending, startTransition] = useTransition()
+	const [isPending, startTransition] = useTransition();
 
 	const attach = () => {
 		startTransition(async () => {
-      const file = await upload()
+			const file = await upload();
 
 			if (file) {
-        onUpload((prev) => [...prev, file])
+				onUpload((prev) => [...prev, file]);
 			} else {
-        return
+				return;
-      }
-    })
 			}
+		});
+	};
 
 	return (
 		<button
@@ -374,5 +403,5 @@ function AttachMedia({
 				<Paperclip className="size-5" />
 			)}
 		</button>
-  )
+	);
 }