feat: basic chat flow

2024-07-24 14:22:51 +07:00
parent 9b1edf7f62
commit d9c4993b71
17 changed files with 828 additions and 80 deletions
--- a/src/App.css
+++ b/src/App.css
@@ -2,6 +2,14 @@
@tailwind components;
@tailwind utilities;

+@layer utilities {
+  .break-message {
+    word-break: break-word;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+}
+
 html {
  font-size: 14px;
 }
--- a/src/commands.ts
+++ b/src/commands.ts
@@ -4,10 +4,7 @@
         /** user-defined commands **/

         export const commands = {
-async getAccounts() : Promise<string[]> {
-return await TAURI_INVOKE("get_accounts");
-},
-async login(id: string) : Promise<Result<null, string>> {
+async login(id: string) : Promise<Result<string, string>> {
 try {
    return { status: "ok", data: await TAURI_INVOKE("login", { id }) };
 } catch (e) {
@@ -15,13 +12,32 @@ try {
    else return { status: "error", error: e  as any };
 }
 },
-async getProfile(id: string) : Promise<Result<string, null>> {
+async getAccounts() : Promise<string[]> {
+return await TAURI_INVOKE("get_accounts");
+},
+async getProfile(id: string) : Promise<Result<string, string>> {
 try {
    return { status: "ok", data: await TAURI_INVOKE("get_profile", { id }) };
 } catch (e) {
    if(e instanceof Error) throw e;
    else return { status: "error", error: e  as any };
 }
+},
+async getChats() : Promise<Result<string[], string>> {
+try {
+    return { status: "ok", data: await TAURI_INVOKE("get_chats") };
+} catch (e) {
+    if(e instanceof Error) throw e;
+    else return { status: "error", error: e  as any };
+}
+},
+async getChatMessages(sender: string) : Promise<Result<string[], string>> {
+try {
+    return { status: "ok", data: await TAURI_INVOKE("get_chat_messages", { sender }) };
+} catch (e) {
+    if(e instanceof Error) throw e;
+    else return { status: "error", error: e  as any };
+}
 }
 }

--- a/src/commons.ts
+++ b/src/commons.ts
@@ -1,6 +1,25 @@
 import { type ClassValue, clsx } from "clsx";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import updateLocale from "dayjs/plugin/updateLocale";
 import { twMerge } from "tailwind-merge";

+dayjs.extend(relativeTime);
+dayjs.extend(updateLocale);
+
+dayjs.updateLocale("en", {
+	relativeTime: {
+		past: "%s",
+		s: "now",
+		m: "1m",
+		mm: "%dm",
+		h: "1h",
+		hh: "%dh",
+		d: "1d",
+		dd: "%dd",
+	},
+});
+
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
 }
@@ -21,3 +40,35 @@ export function npub(pubkey: string, len: number) {
 		pubkey.substring(pubkey.length - backChars)
 	);
 }
+
+export function ago(time: number) {
+	let formated: string;
+
+	const now = dayjs();
+	const inputTime = dayjs.unix(time);
+	const diff = now.diff(inputTime, "hour");
+
+	if (diff < 24) {
+		formated = inputTime.from(now, true);
+	} else {
+		formated = inputTime.format("MMM DD");
+	}
+
+	return formated;
+}
+
+export function time(time: number) {
+	const input = new Date(time * 1000);
+	const formattedTime = input.toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit",
+		hour12: true,
+	});
+
+	return formattedTime;
+}
+
+export function getReceivers(tags: string[][]) {
+	const p = tags.map((tag) => tag[0] === "p" && tag[1]);
+	return p;
+}
--- a/src/routes.gen.ts
+++ b/src/routes.gen.ts
@@ -15,6 +15,7 @@ import { createFileRoute } from '@tanstack/react-router'
 import { Route as rootRoute } from './routes/__root'
 import { Route as IndexImport } from './routes/index'
 import { Route as AccountChatsImport } from './routes/$account.chats'
+import { Route as AccountChatsIdImport } from './routes/$account.chats.$id'

 // Create Virtual Routes

@@ -37,6 +38,11 @@ const AccountChatsRoute = AccountChatsImport.update({
  getParentRoute: () => rootRoute,
 } as any)

+const AccountChatsIdRoute = AccountChatsIdImport.update({
+  path: '/$id',
+  getParentRoute: () => AccountChatsRoute,
+} as any)
+
 // Populate the FileRoutesByPath interface

 declare module '@tanstack/react-router' {
@@ -62,6 +68,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof AccountChatsImport
      parentRoute: typeof rootRoute
    }
+    '/$account/chats/$id': {
+      id: '/$account/chats/$id'
+      path: '/$id'
+      fullPath: '/$account/chats/$id'
+      preLoaderRoute: typeof AccountChatsIdImport
+      parentRoute: typeof AccountChatsImport
+    }
  }
 }

@@ -70,7 +83,7 @@ declare module '@tanstack/react-router' {
 export const routeTree = rootRoute.addChildren({
  IndexRoute,
  NewLazyRoute,
-  AccountChatsRoute,
+  AccountChatsRoute: AccountChatsRoute.addChildren({ AccountChatsIdRoute }),
 })

 /* prettier-ignore-end */
@@ -93,7 +106,14 @@ export const routeTree = rootRoute.addChildren({
      "filePath": "new.lazy.tsx"
    },
    "/$account/chats": {
-      "filePath": "$account.chats.tsx"
+      "filePath": "$account.chats.tsx",
+      "children": [
+        "/$account/chats/$id"
+      ]
+    },
+    "/$account/chats/$id": {
+      "filePath": "$account.chats.$id.tsx",
+      "parent": "/$account/chats"
    }
  }
 }
--- a/src/routes/$account.chats.$id.tsx
+++ b/src/routes/$account.chats.$id.tsx
@@ -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>
+	);
+}
--- a/src/routes/$account.chats.tsx
+++ b/src/routes/$account.chats.tsx
@@ -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>
+	);
+}
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -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",
 				});