khairul169/whatsapp-bridge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add cache, fix ui

Browse Source
This commit is contained in:
khairul169
2026-09-18 10:45:11 +08:00
parent 7b0de7056d
commit edf28006b2
10 changed files with 372 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/app/chats.tsx
+12 -25
View File
@@ -1,3 +1,4 @@
import SearchInput from "@/components/search-input";
import Avatar from "@/components/ui/avatar";
import { Skeleton } from "@/components/ui/skeleton";
import { useChats } from "@/hooks/useChats";
@@ -10,9 +11,7 @@ import {
ImageIcon,
PaperclipIcon,
PhoneIcon,
SearchIcon,
UsersIcon,
XIcon,
} from "lucide-react";
import { useMemo, useState } from "react";
@@ -36,6 +35,7 @@ export default function ChatsSection({ selected, onSelect }: Props) {
...i,
contact,
title:
i.contact?.notifyName ||
i.contact?.formattedName ||
i.contact?.name ||
i.formattedTitle ||
@@ -56,6 +56,9 @@ export default function ChatsSection({ selected, onSelect }: Props) {
(chat) =>
chat.name?.toLowerCase().includes(query.toLowerCase()) ||
chat.formattedTitle?.toLowerCase().includes(query.toLowerCase()) ||
chat.contact?.notifyName
?.toLowerCase()
.includes(query.toLowerCase()) ||
chat.contact?.name?.toLowerCase().includes(query.toLowerCase()) ||
chat.contact?.formattedName
?.toLowerCase()
@@ -70,23 +73,7 @@ export default function ChatsSection({ selected, onSelect }: Props) {
return (
<>
<div className="px-4 py-3">
<div className="flex items-center gap-2 rounded-xl bg-muted px-3 py-2.5">
<SearchIcon size={17} className="text-muted-foreground" />
<input
value={query}
onChange={(event) => setQuery(event.target.value)}
placeholder="Search conversations"
className="min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
/>
<button
aria-label="Close search"
onClick={() => {
setQuery("");
}}
>
<XIcon size={16} className="text-muted-foreground" />
</button>
</div>
<SearchInput onValueChange={setQuery} placeholder="Search chats..." />
</div>
{/* <div className="flex items-center gap-2 px-5 pb-2 text-xs font-medium text-muted-foreground">
@@ -137,12 +124,12 @@ export default function ChatsSection({ selected, onSelect }: Props) {
from={chat.isGroup ? chat.from : null}
/>
{/* <div className="flex-1" />
{chat.unreadCount ? (
<span className="grid size-5 shrink-0 place-items-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">
{chat.unreadCount}
</span>
) : null} */}
<div className="flex-1" />
{chat.unreadCount ? (
<span className="grid size-5 shrink-0 place-items-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">
{chat.unreadCount}
</span>
) : null}
</div>
</div>
</button>
ui/src/app/messages.tsx
+61 -7
View File
@@ -25,6 +25,7 @@ import { useIntersection } from "@/hooks/useIntersection";
import Paragraph from "@/components/paragraph";
import { nanoid } from "nanoid";
import { Skeleton } from "@/components/ui/skeleton";
import SearchInput from "@/components/search-input";
dayjs.extend(relativeTime);
@@ -36,10 +37,16 @@ type Props = {
export default function MessagesSection({ chatId, maxCount = 50 }: Props) {
const { client, isReady } = useWAClient();
const router = useHashRouter();
const msgContainerRef = useRef<HTMLDivElement>(null!);
const queryClient = useQueryClient();
const { data: chats } = useChats();
const { data: contacts } = useContacts();
const [search, setSearch] = useState("");
useEffect(() => {
if (chatId) msgContainerRef.current.scrollTop = 0;
}, [chatId]);
const {
data: messages,
@@ -94,8 +101,26 @@ export default function MessagesSection({ chatId, maxCount = 50 }: Props) {
);
const messageList = useMemo(() => {
const q = search.trim().toLowerCase();
return messages
?.filter((i) => !["revoked"].includes(i.type as never))
?.filter((i) => {
if (["revoked"].includes(i.type as never)) {
return false;
}
if (q) {
const body = i.caption || (i.type === "chat" ? i.body : "") || "";
const name = getFormattedName(i.from) || "";
return (
body.toLowerCase().includes(q) ||
name.toLowerCase().includes(q) ||
i.filename?.toLowerCase().includes(q)
);
}
return true;
})
?.map((i) => {
const from = contacts?.find(
(c) => getId(c.id) === getId(i.author || i.from),
@@ -120,14 +145,26 @@ export default function MessagesSection({ chatId, maxCount = 50 }: Props) {
quotedMsg,
};
});
}, [messages, contacts]);
}, [messages, contacts, search]);
function getMentionLabel(username: string) {
const data = contacts?.find((c) => (c.id as any).user === username);
return data?.notifyName || data?.formattedName || data?.name || username;
}
function onMentionClick(username: string) {
const data = contacts?.find((c) => (c.id as any).user === username);
if (data) {
router.push(`/?chatId=${getId(data.id)}`);
}
}
return (
<section
className={`flex min-w-0 h-full flex-1 flex-col bg-muted ${chatId ? "flex" : "hidden md:flex"}`}
>
<header className="flex items-center justify-between border-b border-border bg-card px-4 py-3 sm:px-6">
<div className="flex min-w-0 items-center gap-3">
<div className="flex min-w-0 items-center gap-3 w-full">
<button
aria-label="Back to conversations"
onClick={() => router.goBack()}
@@ -141,7 +178,7 @@ export default function MessagesSection({ chatId, maxCount = 50 }: Props) {
className="size-10"
/>
<div className="min-w-0">
<div className="min-w-0 flex-1 truncate">
<h2 className="truncate text-sm font-semibold">
{chat?.formattedTitle || chat?.name}
</h2>
@@ -150,6 +187,14 @@ export default function MessagesSection({ chatId, maxCount = 50 }: Props) {
{selected.online ? "Online now" : "Active recently"}
</p> */}
</div>
<SearchInput
className="w-full max-w-40 md:max-w-sm"
inputClassName="text-xs placeholder:text-xs"
placeholder="Search..."
defaultValue={search}
onValueChange={setSearch}
/>
</div>
{/* <div className="flex items-center gap-1 text-muted-foreground">
<button
@@ -173,7 +218,10 @@ export default function MessagesSection({ chatId, maxCount = 50 }: Props) {
</div> */}
</header>
<div className="message-pattern flex-1 px-4 py-6 sm:px-8 flex flex-col-reverse overflow-y-auto">
<div
ref={msgContainerRef}
className="message-pattern flex-1 px-4 py-6 sm:px-8 flex flex-col-reverse overflow-y-auto"
>
{/* <div className="mb-6 flex items-center justify-center gap-2 text-[11px] text-muted-foreground">
<span className="h-px flex-1 bg-border" />
<span>Today</span>
@@ -245,6 +293,8 @@ export default function MessagesSection({ chatId, maxCount = 50 }: Props) {
? item.quotedMsg.body
: "Quoted")
}
getMentionLabel={getMentionLabel}
onMentionClick={onMentionClick}
/>
</button>
) : null}
@@ -257,7 +307,11 @@ export default function MessagesSection({ chatId, maxCount = 50 }: Props) {
) : null}
{item.type === "chat" || item.caption ? (
<Paragraph text={item.caption || item.body} />
<Paragraph
text={item.caption || item.body}
getMentionLabel={getMentionLabel}
onMentionClick={onMentionClick}
/>
) : null}
{item.type === "call_log" && (
@@ -310,7 +364,7 @@ export default function MessagesSection({ chatId, maxCount = 50 }: Props) {
))
: null}
<div ref={endScrollRef} className="h-1" />
{messages != null && <div ref={endScrollRef} className="h-1" />}
<div className="mb-6 flex items-center justify-center gap-2 text-[11px] text-muted-foreground">
<span className="h-px flex-1 bg-border" />
ui/src/app/page.tsx
+3 -1
View File
@@ -45,7 +45,9 @@ export default function Page() {
<ChatsSection
selected={chatId}
onSelect={(id) => router.push(`/?chatId=${id}`)}
onSelect={(id) =>
router.navigate(`/?chatId=${id}`, { replace: !!chatId })
}
/>
{/* <div className="border-t border-border px-5 py-4">
ui/src/components/paragraph.tsx
+33 -6
View File
@@ -7,11 +7,20 @@ type Token =
| { type: "italic"; value: string }
| { type: "strike"; value: string }
| { type: "code"; value: string }
| { type: "url"; value: string };
| { type: "url"; value: string }
| { type: "mention"; value: string };
function renderWhatsAppMessage(message: string): React.ReactNode {
type RenderOptions = {
getMentionLabel?: (username: string) => string | null;
onMentionClick?: (username: string) => void;
};
function renderWhatsAppMessage(
message: string,
options?: RenderOptions,
): React.ReactNode {
const regex =
/(\*[^*\n]+\*|_[^_\n]+_|~[^~\n]+~|`[^`\n]+`|https?:\/\/[^\s<]+|www\.[^\s<]+)/g;
/(\*[^*\n]+\*|_[^_\n]+_|~[^~\n]+~|`[^`\n]+`|https?:\/\/[^\s<]+|www\.[^\s<]+|@\d+)/g;
const tokens: Token[] = [];
let lastIndex = 0;
@@ -35,6 +44,11 @@ function renderWhatsAppMessage(message: string): React.ReactNode {
tokens.push({ type: "strike", value: value.slice(1, -1) });
} else if (value.startsWith("`")) {
tokens.push({ type: "code", value: value.slice(1, -1) });
} else if (value.startsWith("@")) {
tokens.push({
type: "mention",
value: value.slice(1), // remove @
});
} else {
// Remove punctuation that commonly follows a URL.
const url = value.replace(/[.,!?;:)]+$/, "");
@@ -110,23 +124,36 @@ function renderWhatsAppMessage(message: string): React.ReactNode {
</a>
);
case "mention":
const label = options?.getMentionLabel?.(token.value);
return (
<button
key={i}
type="button"
onClick={() => options?.onMentionClick?.(token.value)}
className="font-medium text-blue-200 cursor-pointer hover:underline"
>
@{label || token.value}
</button>
);
case "text":
return <React.Fragment key={i}>{token.value}</React.Fragment>;
}
});
}
type Props = {
type Props = RenderOptions & {
text?: string | null;
className?: string;
};
export default function Paragraph({ text, className }: Props) {
export default function Paragraph({ text, className, ...options }: Props) {
if (!text) return null;
return (
<div className={cn("whitespace-pre-wrap wrap-break-word", className)}>
{renderWhatsAppMessage(text)}
{renderWhatsAppMessage(text, options)}
</div>
);
}
ui/src/components/search-input.tsx
+64
View File
@@ -0,0 +1,64 @@
import { useDebounceFn } from "@/hooks/useDebounce";
import { cn } from "cn";
import { SearchIcon, XIcon } from "lucide-react";
import React, { useEffect } from "react";
type Props = React.ComponentProps<"input"> & {
onValueChange?: (value: string) => void;
inputClassName?: string;
};
export default function SearchInput({
onValueChange,
className,
inputClassName,
...props
}: Props) {
const ref = React.useRef<HTMLInputElement>(null!);
const closeRef = React.useRef<HTMLButtonElement>(null!);
const debounce = useDebounceFn();
useEffect(() => {
ref.current.value = String(props.value || "");
}, [props.value]);
function onClear() {
ref.current.value = "";
closeRef.current.style.display = "none";
onValueChange?.("");
}
return (
<div
className={cn(
"flex items-center gap-2 rounded-xl bg-muted px-3 py-2.5",
className,
)}
>
<SearchIcon size={17} className="text-muted-foreground" />
<input
ref={ref}
className={cn(
"min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground",
inputClassName,
)}
defaultValue=""
onChange={(e) => {
const value = e.target.value;
closeRef.current.style.display = value.length ? "block" : "none";
debounce(() => onValueChange?.(value), 500);
}}
{...props}
/>
<button
ref={closeRef}
aria-label="Close search"
className="hidden cursor-pointer"
onClick={onClear}
>
<XIcon size={16} className="text-muted-foreground" />
</button>
</div>
);
}
ui/src/components/ui/avatar.tsx
+19 -18
View File
@@ -10,22 +10,22 @@ type Props = {
};
const colorSchemes = [
"bg-rose-200 text-rose-800",
"bg-pink-200 text-pink-800",
"bg-fuchsia-200 text-fuchsia-800",
"bg-purple-200 text-purple-800",
"bg-violet-200 text-violet-800",
"bg-indigo-200 text-indigo-800",
"bg-blue-200 text-blue-800",
"bg-sky-200 text-sky-800",
"bg-cyan-200 text-cyan-800",
"bg-teal-200 text-teal-800",
"bg-emerald-200 text-emerald-800",
"bg-green-200 text-green-800",
"bg-lime-200 text-lime-800",
"bg-yellow-200 text-yellow-800",
"bg-amber-200 text-amber-800",
"bg-orange-200 text-orange-800",
"text-rose-200 bg-rose-800",
"text-pink-200 bg-pink-800",
"text-fuchsia-200 bg-fuchsia-800",
"text-purple-200 bg-purple-800",
"text-violet-200 bg-violet-800",
"text-indigo-200 bg-indigo-800",
"text-blue-200 bg-blue-800",
"text-sky-200 bg-sky-800",
"text-cyan-200 bg-cyan-800",
"text-teal-200 bg-teal-800",
"text-emerald-200 bg-emerald-800",
"text-green-200 bg-green-800",
"text-lime-200 bg-lime-800",
"text-yellow-200 bg-yellow-800",
"text-amber-200 bg-amber-800",
"text-orange-200 bg-orange-800",
];
function getColorBasedOnName(name?: string | null) {
@@ -41,6 +41,7 @@ export default function Avatar({
iconClassName,
}: Props) {
const color = getColorBasedOnName(name);
const initial = getInitial(name);
return (
<div
@@ -52,8 +53,8 @@ export default function Avatar({
>
{icon ? (
icon
) : name ? (
getInitial(name)
) : initial ? (
initial
) : (
<UserIcon className={cn("size-4", iconClassName)} />
)}
ui/src/hooks/useContact.ts
-1
View File
@@ -16,7 +16,6 @@ export function useContacts() {
return {
...res,
findById(id: ContactDTO["id"]) {
if (!id) return null;
return res.data?.find((i) => getId(i.id) === getId(id));
},
};
ui/src/hooks/useDebounce.ts
+10
View File
@@ -0,0 +1,10 @@
import { useRef } from "react";
export function useDebounceFn(delay: number = 500) {
const timeoutRef = useRef<any>(null);
return (fn: any, delay2?: number) => {
clearTimeout(timeoutRef.current);
timeoutRef.current = setTimeout(fn, delay2 || delay);
};
}