feat: basic chat flow
This commit is contained in:
reya
152
src/routes/$account.chats.$id.tsx
Normal file
152
src/routes/$account.chats.$id.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
import { commands } from "@/commands";
|
||||
import { cn, getReceivers, time } from "@/commons";
|
||||
import { ArrowUp } from "@phosphor-icons/react";
|
||||
import * as ScrollArea from "@radix-ui/react-scroll-area";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { listen } from "@tauri-apps/api/event";
|
||||
import type { NostrEvent } from "nostr-tools";
|
||||
import { useCallback, useRef } from "react";
|
||||
import { useEffect } from "react";
|
||||
import { Virtualizer } from "virtua";
|
||||
|
||||
type Payload = {
|
||||
event: string;
|
||||
sender: string;
|
||||
};
|
||||
|
||||
export const Route = createFileRoute("/$account/chats/$id")({
|
||||
component: Screen,
|
||||
});
|
||||
|
||||
function Screen() {
|
||||
const { account, id } = Route.useParams();
|
||||
const { isLoading, isError, data } = useQuery({
|
||||
queryKey: ["chats", id],
|
||||
queryFn: async () => {
|
||||
const res = await commands.getChatMessages(id);
|
||||
|
||||
if (res.status === "ok") {
|
||||
const raw = res.data;
|
||||
const events = raw
|
||||
.map((item) => JSON.parse(item) as NostrEvent)
|
||||
.sort((a, b) => a.created_at - b.created_at);
|
||||
|
||||
return events;
|
||||
} else {
|
||||
throw new Error(res.error);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
const renderItem = useCallback(
|
||||
(item: NostrEvent) => {
|
||||
const self = account === item.pubkey;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex items-center justify-between gap-3 my-1.5 px-3 border-l-2 border-transparent hover:border-blue-400"
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex-1 min-w-0 inline-flex",
|
||||
self ? "justify-end" : "justify-start",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"py-2 px-3 w-fit max-w-[400px] text-pretty break-message rounded-t-2xl",
|
||||
!self
|
||||
? "bg-neutral-100 dark:bg-neutral-800 rounded-l-md rounded-r-xl"
|
||||
: "bg-blue-500 text-white rounded-l-xl rounded-r-md",
|
||||
)}
|
||||
>
|
||||
{item.content}
|
||||
</div>
|
||||
</div>
|
||||
<div className="shrink-0 w-16 flex items-center justify-end">
|
||||
<span className="text-xs text-right text-neutral-600 dark:text-neutral-400">
|
||||
{time(item.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
[data],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const unlisten = listen<Payload>("event", async (data) => {
|
||||
const event: NostrEvent = JSON.parse(data.payload.event);
|
||||
const sender = data.payload.sender;
|
||||
const receivers = getReceivers(event.tags);
|
||||
|
||||
if (sender !== account || sender !== id) return;
|
||||
if (!receivers.includes(account) || !receivers.includes(id)) return;
|
||||
|
||||
await queryClient.setQueryData(
|
||||
["chats", id],
|
||||
(prevEvents: NostrEvent[]) => {
|
||||
if (!prevEvents) {
|
||||
return prevEvents;
|
||||
}
|
||||
return [...prevEvents, event];
|
||||
// queryClient.invalidateQueries(['chats', id]);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
return () => {
|
||||
unlisten.then((f) => f());
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="size-full flex flex-col">
|
||||
<div className="h-11 shrink-0 border-b border-neutral-100 dark:border-neutral-900" />
|
||||
<ScrollArea.Root
|
||||
type={"scroll"}
|
||||
scrollHideDelay={300}
|
||||
className="overflow-hidden flex-1 w-full"
|
||||
>
|
||||
<ScrollArea.Viewport
|
||||
ref={ref}
|
||||
className="relative h-full py-2 [&>div]:!flex [&>div]:flex-col [&>div]:justify-end [&>div]:min-h-full"
|
||||
>
|
||||
<Virtualizer scrollRef={ref} shift>
|
||||
{isLoading ? (
|
||||
<p>Loading...</p>
|
||||
) : isError || !data ? (
|
||||
<p>Error</p>
|
||||
) : (
|
||||
data.map((item) => renderItem(item))
|
||||
)}
|
||||
</Virtualizer>
|
||||
</ScrollArea.Viewport>
|
||||
<ScrollArea.Scrollbar
|
||||
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.Corner className="bg-transparent" />
|
||||
</ScrollArea.Root>
|
||||
<div className="h-12 shrink-0 flex items-center gap-2 px-3.5">
|
||||
<input
|
||||
placeholder="Message..."
|
||||
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"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-full size-9 inline-flex items-center justify-center bg-blue-300 hover:bg-blue-500 dark:bg-blue-700 text-white"
|
||||
>
|
||||
<ArrowUp className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,181 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { commands } from "@/commands";
|
||||
import { ago, cn } from "@/commons";
|
||||
import { User } from "@/components/user";
|
||||
import { Plus, UsersThree } from "@phosphor-icons/react";
|
||||
import * as ScrollArea from "@radix-ui/react-scroll-area";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { Link, Outlet, createFileRoute } from "@tanstack/react-router";
|
||||
import { listen } from "@tauri-apps/api/event";
|
||||
import type { NostrEvent } from "nostr-tools";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export const Route = createFileRoute('/$account/chats')({
|
||||
component: () => <div>Hello /$account/chats!</div>
|
||||
})
|
||||
type Payload = {
|
||||
event: string;
|
||||
sender: string;
|
||||
};
|
||||
|
||||
export const Route = createFileRoute("/$account/chats")({
|
||||
component: Screen,
|
||||
});
|
||||
|
||||
function Screen() {
|
||||
return (
|
||||
<div className="size-full flex">
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="shrink-0 w-[280px] h-full flex flex-col justify-between border-r border-black/5 dark:border-white/5"
|
||||
>
|
||||
<div data-tauri-drag-region className="flex-1">
|
||||
<Header />
|
||||
<ChatList />
|
||||
</div>
|
||||
<div className="h-12 shrink-0 flex items-center px-2.5 border-t border-black/5 dark:border-white/5">
|
||||
<CurrentUser />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0 min-h-0 bg-white dark:bg-neutral-900 overflow-auto">
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Header() {
|
||||
return (
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="h-12 px-3.5 flex items-center justify-end"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
to="/new"
|
||||
className="size-7 rounded-md inline-flex items-center justify-center text-neutral-600 dark:text-neutral-400 hover:bg-black/10 dark:hover:bg-white/10"
|
||||
>
|
||||
<UsersThree className="size-4" />
|
||||
</Link>
|
||||
<Link
|
||||
to="/new"
|
||||
className="h-7 w-12 rounded-t-md rounded-b-md rounded-l-md rounded-r inline-flex items-center justify-center bg-black/5 hover:bg-black/10 dark:bg-white/5 dark:hover:bg-white/10"
|
||||
>
|
||||
<Plus className="size-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ChatList() {
|
||||
const { account } = Route.useParams();
|
||||
const { isLoading, isError, data } = useQuery({
|
||||
queryKey: ["chats"],
|
||||
queryFn: async () => {
|
||||
const res = await commands.getChats();
|
||||
|
||||
if (res.status === "ok") {
|
||||
const raw = res.data;
|
||||
const events = raw
|
||||
.map((item) => JSON.parse(item) as NostrEvent)
|
||||
.sort((a, b) => b.created_at - a.created_at);
|
||||
|
||||
return events;
|
||||
} else {
|
||||
throw new Error(res.error);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
useEffect(() => {
|
||||
const unlisten = listen<Payload>("event", async (data) => {
|
||||
const event: NostrEvent = JSON.parse(data.payload.event);
|
||||
const chats: NostrEvent[] = await queryClient.getQueryData(["chats"]);
|
||||
const exist = chats.find((ev) => ev.pubkey === event.pubkey);
|
||||
|
||||
if (!exist) {
|
||||
await queryClient.setQueryData(
|
||||
["chats"],
|
||||
(prevEvents: NostrEvent[]) => {
|
||||
if (!prevEvents) {
|
||||
return prevEvents;
|
||||
}
|
||||
return [event, ...prevEvents];
|
||||
// queryClient.invalidateQueries(['chats', id]);
|
||||
},
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
unlisten.then((f) => f());
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ScrollArea.Root
|
||||
type={"scroll"}
|
||||
scrollHideDelay={300}
|
||||
className="overflow-hidden flex-1 w-full"
|
||||
>
|
||||
<ScrollArea.Viewport className="relative h-full px-1.5">
|
||||
{isLoading ? (
|
||||
<p>Loading...</p>
|
||||
) : isError ? (
|
||||
<p>Error</p>
|
||||
) : (
|
||||
data.map((item) => (
|
||||
<Link
|
||||
key={item.pubkey}
|
||||
to="/$account/chats/$id"
|
||||
params={{ account, id: item.pubkey }}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<User.Provider pubkey={item.pubkey}>
|
||||
<User.Root
|
||||
className={cn(
|
||||
"flex items-center rounded-lg p-2 mb-1 gap-2 hover:bg-black/5 dark:hover:bg-white/5",
|
||||
isActive ? "bg-black/5 dark:bg-white/5" : "",
|
||||
)}
|
||||
>
|
||||
<User.Avatar className="shrink-0 size-9 rounded-full object-cover" />
|
||||
<div className="flex-1 inline-flex items-center justify-between text-sm">
|
||||
<div className="inline-flex leading-tight">
|
||||
<User.Name className="max-w-[8rem] truncate font-semibold" />
|
||||
<span className="ml-1.5 text-neutral-500">
|
||||
{account === item.pubkey ? "(you)" : ""}
|
||||
</span>
|
||||
</div>
|
||||
<span className="leading-tight text-right text-neutral-600 dark:text-neutral-400">
|
||||
{ago(item.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
</User.Root>
|
||||
</User.Provider>
|
||||
)}
|
||||
</Link>
|
||||
))
|
||||
)}
|
||||
</ScrollArea.Viewport>
|
||||
<ScrollArea.Scrollbar
|
||||
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.Corner className="bg-transparent" />
|
||||
</ScrollArea.Root>
|
||||
);
|
||||
}
|
||||
|
||||
function CurrentUser() {
|
||||
const { account } = Route.useParams();
|
||||
|
||||
return (
|
||||
<User.Provider pubkey={account}>
|
||||
<User.Root className="inline-flex items-center gap-2">
|
||||
<User.Avatar className="size-8 rounded-full object-cover" />
|
||||
<User.Name className="text-sm font-medium leading-tight" />
|
||||
</User.Root>
|
||||
</User.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -44,17 +44,19 @@ function Screen() {
|
||||
const loginWith = async (npub: string) => {
|
||||
setValue(npub);
|
||||
startTransition(async () => {
|
||||
const run = await commands.login(npub);
|
||||
try {
|
||||
const res = await commands.login(npub);
|
||||
|
||||
if (run.status === "ok") {
|
||||
navigate({
|
||||
to: "/$account/chats",
|
||||
params: { account: npub },
|
||||
replace: true,
|
||||
});
|
||||
} else {
|
||||
if (res.status === "ok") {
|
||||
navigate({
|
||||
to: "/$account/chats",
|
||||
params: { account: res.data },
|
||||
replace: true,
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
setValue("");
|
||||
await message(run.error, {
|
||||
message(String(e), {
|
||||
title: "Login",
|
||||
kind: "error",
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user