reya/coop
1
0
Fork 0
Code Issues Pull Requests Releases Activity

feat: add highlight for link in message

Browse Source
This commit is contained in:
reya
2024-09-18 15:32:36 +07:00
parent 0ff3c7c76f
commit d03865eeaa
2 changed files with 364 additions and 335 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/global.css
View File

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

697
src/routes/$account/_layout/chats.$id.lazy.tsx
View File

@@ -1,378 +1,407 @@
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 { import {
type Dispatch, type Dispatch,
type SetStateAction, type SetStateAction,
useCallback, useCallback,
useRef, useRef,
useState, useState,
useTransition, 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 = { 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, component: Screen,
}) });
function Screen() { function Screen() {
return ( return (
<div className="size-full flex flex-col"> <div className="size-full flex flex-col">
<Header /> <Header />
<List /> <List />
<Form /> <Form />
</div> </div>
) );
} }
function Header() { function Header() {
const { account, id } = Route.useParams() const { account, id } = Route.useParams();
const { platform } = Route.useRouteContext() const { platform } = Route.useRouteContext();
return ( return (
<div <div
data-tauri-drag-region data-tauri-drag-region
className={cn( 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]"> <div className="z-[200]">
<div className="flex -space-x-1 overflow-hidden"> <div className="flex -space-x-1 overflow-hidden">
<User.Provider pubkey={account}> <User.Provider pubkey={account}>
<User.Root className="size-8 rounded-full inline-block ring-2 ring-white dark:ring-neutral-900"> <User.Root className="size-8 rounded-full inline-block ring-2 ring-white dark:ring-neutral-900">
<User.Avatar className="size-8 rounded-full" /> <User.Avatar className="size-8 rounded-full" />
</User.Root> </User.Root>
</User.Provider> </User.Provider>
<User.Provider pubkey={id}> <User.Provider pubkey={id}>
<User.Root className="size-8 rounded-full inline-block ring-2 ring-white dark:ring-neutral-900"> <User.Root className="size-8 rounded-full inline-block ring-2 ring-white dark:ring-neutral-900">
<User.Avatar className="size-8 rounded-full" /> <User.Avatar className="size-8 rounded-full" />
</User.Root> </User.Root>
</User.Provider> </User.Provider>
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="h-7 inline-flex items-center justify-center gap-1.5 px-2 rounded-full bg-neutral-100 dark:bg-neutral-900"> <div className="h-7 inline-flex items-center justify-center gap-1.5 px-2 rounded-full bg-neutral-100 dark:bg-neutral-900">
<span className="relative flex size-2"> <span className="relative flex size-2">
<span className="animate-ping absolute inline-flex size-full rounded-full bg-teal-400 opacity-75" /> <span className="animate-ping absolute inline-flex size-full rounded-full bg-teal-400 opacity-75" />
<span className="relative inline-flex rounded-full size-2 bg-teal-500" /> <span className="relative inline-flex rounded-full size-2 bg-teal-500" />
</span> </span>
<div className="text-xs leading-tight">Connected</div> <div className="text-xs leading-tight">Connected</div>
</div> </div>
</div> </div>
</div> </div>
) );
} }
function List() { function List() {
const { account, id } = Route.useParams() const { account, id } = Route.useParams();
const { isLoading, isError, data } = useQuery({ const { isLoading, isError, data } = useQuery({
queryKey: ['chats', id], queryKey: ["chats", id],
queryFn: async () => { 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 { } else {
throw new Error(res.error) throw new Error(res.error);
} }
}, },
select: (data) => { select: (data) => {
const groups = groupEventByDate(data) const groups = groupEventByDate(data);
return Object.entries(groups).reverse() return Object.entries(groups).reverse();
}, },
refetchOnWindowFocus: false, 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( const renderItem = useCallback(
(item: NostrEvent, idx: number) => { (item: NostrEvent, idx: number) => {
const self = account === item.pubkey const self = account === item.pubkey;
return ( return (
<div <div
key={idx + item.id} key={idx + item.id}
className="flex items-center justify-between gap-3 my-1.5 px-3 border-l-2 border-transparent hover:border-blue-400" className="flex items-center justify-between gap-3 my-1.5 px-3 border-l-2 border-transparent hover:border-blue-400"
> >
<div <div
className={cn( 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 <div
className={cn( 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 !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> </div>
<div className="shrink-0 w-16 flex items-center justify-end"> <div className="shrink-0 w-16 flex items-center justify-end">
<span className="text-xs text-right text-neutral-600 dark:text-neutral-400"> <span className="text-xs text-right text-neutral-600 dark:text-neutral-400">
{time(item.created_at)} {time(item.created_at)}
</span> </span>
</div> </div>
</div> </div>
) );
}, },
[data], [data],
) );
useEffect(() => { 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( await queryClient.setQueryData(
['chats', id], ["chats", id],
(prevEvents: NostrEvent[]) => { (prevEvents: NostrEvent[]) => {
if (!prevEvents) return [event] if (!prevEvents) return [event];
return [event, ...prevEvents] return [event, ...prevEvents];
}, },
) );
}) });
return () => { return () => {
unlisten.then((f) => f()) unlisten.then((f) => f());
} };
}, [account, id]) }, [account, id]);
useEffect(() => { 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, { ref.current.scrollToIndex(data.length - 1, {
align: 'end', align: "end",
}) });
}, [data]) }, [data]);
return ( return (
<ScrollArea.Root <ScrollArea.Root
type={'scroll'} type={"scroll"}
scrollHideDelay={300} scrollHideDelay={300}
className="overflow-hidden flex-1 w-full" className="overflow-hidden flex-1 w-full"
> >
<ScrollArea.Viewport <ScrollArea.Viewport
ref={scrollRef} ref={scrollRef}
className="relative h-full py-2 [&>div]:!flex [&>div]:flex-col [&>div]:justify-end [&>div]:min-h-full" className="relative h-full py-2 [&>div]:!flex [&>div]:flex-col [&>div]:justify-end [&>div]:min-h-full"
> >
<Virtualizer <Virtualizer
scrollRef={scrollRef} scrollRef={scrollRef}
ref={ref} ref={ref}
shift={true} shift={true}
onScroll={(offset) => { onScroll={(offset) => {
if (!ref.current) return if (!ref.current) return;
shouldStickToBottom.current = shouldStickToBottom.current =
offset - ref.current.scrollSize + ref.current.viewportSize >= -1.5 offset - ref.current.scrollSize + ref.current.viewportSize >=
}} -1.5;
> }}
{isLoading ? ( >
<> {isLoading ? (
<div className="flex items-center gap-3 my-1.5 px-3"> <>
<div className="flex-1 min-w-0 inline-flex"> <div className="flex items-center gap-3 my-1.5 px-3">
<div className="w-44 h-[35px] py-2 max-w-[400px] bg-neutral-100 dark:bg-neutral-800 animate-pulse rounded-tl-3xl rounded-tr-3xl rounded-br-3xl rounded-bl-md" /> <div className="flex-1 min-w-0 inline-flex">
</div> <div className="w-44 h-[35px] py-2 max-w-[400px] bg-neutral-100 dark:bg-neutral-800 animate-pulse rounded-tl-3xl rounded-tr-3xl rounded-br-3xl rounded-bl-md" />
</div> </div>
<div className="flex items-center gap-3 my-1.5 px-3"> </div>
<div className="flex-1 min-w-0 inline-flex justify-end"> <div className="flex items-center gap-3 my-1.5 px-3">
<div className="w-44 h-[35px] py-2 max-w-[400px] bg-blue-500 text-white animate-pulse rounded-tl-3xl rounded-tr-3xl rounded-br-md rounded-bl-3xl" /> <div className="flex-1 min-w-0 inline-flex justify-end">
</div> <div className="w-44 h-[35px] py-2 max-w-[400px] bg-blue-500 text-white animate-pulse rounded-tl-3xl rounded-tr-3xl rounded-br-md rounded-bl-3xl" />
</div> </div>
</> </div>
) : isError ? ( </>
<div className="w-full h-56 flex items-center justify-center"> ) : isError ? (
<div className="text-sm flex items-center gap-1.5"> <div className="w-full h-56 flex items-center justify-center">
Cannot load message. Please try again later. <div className="text-sm flex items-center gap-1.5">
</div> Cannot load message. Please try again later.
</div> </div>
) : !data.length ? ( </div>
<div className="h-20 flex items-center justify-center"> ) : !data.length ? (
<CoopIcon className="size-10 text-neutral-200 dark:text-neutral-800" /> <div className="h-20 flex items-center justify-center">
</div> <CoopIcon className="size-10 text-neutral-200 dark:text-neutral-800" />
) : ( </div>
data.map((item) => ( ) : (
<div data.map((item) => (
key={item[0]} <div
className="w-full flex flex-col items-center mt-3 gap-3" key={item[0]}
> className="w-full flex flex-col items-center mt-3 gap-3"
<div className="text-xs text-center text-neutral-600 dark:text-neutral-400"> >
{item[0]} <div className="text-xs text-center text-neutral-600 dark:text-neutral-400">
</div> {item[0]}
<div className="w-full"> </div>
{item[1] <div className="w-full">
.sort((a, b) => a.created_at - b.created_at) {item[1]
.map((item, idx) => renderItem(item, idx))} .sort((a, b) => a.created_at - b.created_at)
</div> .map((item, idx) => renderItem(item, idx))}
</div> </div>
)) </div>
)} ))
</Virtualizer> )}
</ScrollArea.Viewport> </Virtualizer>
<ScrollArea.Scrollbar </ScrollArea.Viewport>
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2" <ScrollArea.Scrollbar
orientation="vertical" className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
> orientation="vertical"
<ScrollArea.Thumb className="flex-1 bg-black/40 dark:bg-white/40 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" /> >
</ScrollArea.Scrollbar> <ScrollArea.Thumb className="flex-1 bg-black/40 dark:bg-white/40 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
<ScrollArea.Corner className="bg-transparent" /> </ScrollArea.Scrollbar>
</ScrollArea.Root> <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() { 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) => { const remove = (item: string) => {
setAttaches((prev) => prev.filter((att) => att !== item)) setAttaches((prev) => prev.filter((att) => att !== item));
} };
const submit = () => { const submit = () => {
startTransition(async () => { 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, { await message(res.error, {
title: 'Send mesaage failed', title: "Send mesaage failed",
kind: 'error', kind: "error",
}) });
return return;
} }
setNewMessage('') setNewMessage("");
}) setAttaches([]);
} });
};
return ( return (
<div className="shrink-0 flex items-center justify-center px-3.5"> <div className="shrink-0 flex items-center justify-center px-3.5">
{!inboxRelays.length ? ( {!inboxRelays.length ? (
<div className="text-xs"> <div className="text-xs">
This user doesn't have inbox relays. You cannot send messages to them. This user doesn't have inbox relays. You cannot send messages to them.
</div> </div>
) : ( ) : (
<div className="flex-1 flex flex-col justify-end"> <div className="flex-1 flex flex-col justify-end">
{attaches?.length ? ( {attaches?.length ? (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{attaches.map((item, index) => ( {attaches.map((item, index) => (
<button <button
type="button" type="button"
key={item} key={item}
onClick={() => remove(item)} onClick={() => remove(item)}
className="relative" className="relative"
> >
<img <img
src={item} src={item}
alt={`File ${index}`} alt={`File ${index}`}
className="aspect-square w-16 object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/10 dark:outline-black/50" className="aspect-square w-16 object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/10 dark:outline-black/50"
loading="lazy" loading="lazy"
decoding="async" decoding="async"
/> />
<span className="absolute -top-2 -right-2 size-4 flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 rounded-full border border-neutral-200 dark:border-neutral-800"> <span className="absolute -top-2 -right-2 size-4 flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 rounded-full border border-neutral-200 dark:border-neutral-800">
<X className="size-2" /> <X className="size-2" />
</span> </span>
</button> </button>
))} ))}
</div> </div>
) : null} ) : null}
<div className="h-12 w-full flex items-center gap-2"> <div className="h-12 w-full flex items-center gap-2">
<div className="inline-flex gap-1"> <div className="inline-flex gap-1">
<AttachMedia onUpload={setAttaches} /> <AttachMedia onUpload={setAttaches} />
</div> </div>
<input <input
placeholder="Message..." placeholder="Message..."
value={newMessage} value={newMessage}
onChange={(e) => setNewMessage(e.target.value)} onChange={(e) => setNewMessage(e.target.value)}
onKeyDown={(e) => { 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" 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"
/> />
<button <button
type="button" type="button"
title="Send message" title="Send message"
disabled={isPending} disabled={isPending}
onClick={() => submit()} onClick={() => submit()}
className="rounded-full size-9 inline-flex items-center justify-center bg-blue-300 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 text-white" className="rounded-full size-9 inline-flex items-center justify-center bg-blue-300 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 text-white"
> >
{isPending ? <Spinner /> : <ArrowUp className="size-5" />} {isPending ? <Spinner /> : <ArrowUp className="size-5" />}
</button> </button>
</div> </div>
</div> </div>
)} )}
</div> </div>
) );
} }
function AttachMedia({ function AttachMedia({
onUpload, onUpload,
}: { }: {
onUpload: Dispatch<SetStateAction<string[]>> onUpload: Dispatch<SetStateAction<string[]>>;
}) { }) {
const [isPending, startTransition] = useTransition() const [isPending, startTransition] = useTransition();
const attach = () => { const attach = () => {
startTransition(async () => { startTransition(async () => {
const file = await upload() const file = await upload();
if (file) { if (file) {
onUpload((prev) => [...prev, file]) onUpload((prev) => [...prev, file]);
} else { } else {
return return;
} }
}) });
} };
return ( return (
<button <button
type="button" type="button"
title="Attach media" title="Attach media"
onClick={() => attach()} onClick={() => attach()}
className="size-9 inline-flex items-center justify-center hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-full" className="size-9 inline-flex items-center justify-center hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-full"
> >
{isPending ? ( {isPending ? (
<Spinner className="size-4" /> <Spinner className="size-4" />
) : ( ) : (
<Paperclip className="size-5" /> <Paperclip className="size-5" />
)} )}
</button> </button>
) );
} }