feat: frontend draft
This commit is contained in:
@@ -0,0 +1,20 @@
|
||||
import { Button } from "./components/ui/button";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useWAClient } from "./lib/context";
|
||||
|
||||
export default function App() {
|
||||
const { client, isReady } = useWAClient();
|
||||
const { data: chats } = useQuery({
|
||||
queryKey: ["chats"],
|
||||
queryFn: () => client.listChats({ limit: 50 }),
|
||||
enabled: isReady,
|
||||
});
|
||||
|
||||
console.log(chats);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button>Test</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import "shadcn/tailwind.css";
|
||||
@import "@fontsource-variable/inter";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--font-heading: var(--font-sans);
|
||||
--font-sans: "Inter Variable", sans-serif;
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-background: var(--background);
|
||||
--radius-sm: calc(var(--radius) * 0.6);
|
||||
--radius-md: calc(var(--radius) * 0.8);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) * 1.4);
|
||||
--radius-2xl: calc(var(--radius) * 1.8);
|
||||
--radius-3xl: calc(var(--radius) * 2.2);
|
||||
--radius-4xl: calc(var(--radius) * 2.6);
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
html {
|
||||
@apply font-sans;
|
||||
}
|
||||
::selection {
|
||||
background: var(--accent);
|
||||
color: var(--accent-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.message-pattern {
|
||||
background-color: var(--muted);
|
||||
background-image: radial-gradient(color-mix(in oklch, var(--border) 70%, transparent) 0.7px, transparent 0.7px);
|
||||
background-size: 18px 18px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
textarea {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,241 @@
|
||||
import { useWAClient } from "@/lib/context";
|
||||
import { getFormattedName, getId, getInitial } from "@/lib/utils";
|
||||
import type { ChatDTO } from "@shared/dto";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { cn } from "cn";
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
CircleHelpIcon,
|
||||
PaperclipIcon,
|
||||
SendIcon,
|
||||
} from "lucide-react";
|
||||
import React, { useMemo, useState } from "react";
|
||||
|
||||
type Props = {
|
||||
chat: ChatDTO;
|
||||
mobileChat: boolean;
|
||||
setMobileChat: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
};
|
||||
|
||||
export default function MessagesSection({
|
||||
chat,
|
||||
mobileChat,
|
||||
setMobileChat,
|
||||
}: Props) {
|
||||
const { client, isReady } = useWAClient();
|
||||
const [message, setMessage] = useState("");
|
||||
|
||||
const { data: contacts } = useQuery({
|
||||
queryKey: ["contacts"],
|
||||
queryFn: () => client.listContacts(),
|
||||
refetchOnWindowFocus: false,
|
||||
});
|
||||
|
||||
const chatId = getId(chat.id);
|
||||
const { data: messages } = useQuery({
|
||||
queryKey: ["messages", chatId],
|
||||
queryFn: () =>
|
||||
client.getMessages({ chatId, count: 50 }).then((res) =>
|
||||
res.map((i) => ({
|
||||
...i,
|
||||
id: getId(i.id),
|
||||
fromMe: i.id.fromMe || i.fromMe,
|
||||
})),
|
||||
),
|
||||
enabled: Boolean(chatId && isReady),
|
||||
});
|
||||
|
||||
const messageList = useMemo(() => {
|
||||
return messages
|
||||
?.filter((i) => !["call_log", "revoked"].includes(i.type as never))
|
||||
.map((message) => {
|
||||
const from = contacts?.find(
|
||||
(c) => getId(c.id) === getId(message.author || message.from),
|
||||
);
|
||||
return {
|
||||
...message,
|
||||
from,
|
||||
};
|
||||
})
|
||||
?.reverse();
|
||||
}, [messages, contacts]);
|
||||
|
||||
function sendMessage() {
|
||||
const text = message.trim();
|
||||
if (!text) return;
|
||||
setMessage("");
|
||||
}
|
||||
|
||||
return (
|
||||
<section
|
||||
className={`flex min-w-0 flex-1 flex-col bg-muted ${mobileChat ? "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">
|
||||
<button
|
||||
aria-label="Back to conversations"
|
||||
onClick={() => setMobileChat(false)}
|
||||
className="grid size-9 place-items-center rounded-full text-muted-foreground hover:bg-muted md:hidden"
|
||||
>
|
||||
<ArrowLeftIcon size={19} />
|
||||
</button>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"grid size-10 shrink-0 place-items-center rounded-full text-sm font-semibold",
|
||||
)}
|
||||
>
|
||||
{getInitial(chat.formattedTitle)}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h2 className="truncate text-sm font-semibold">
|
||||
{chat.formattedTitle || chat.name}
|
||||
</h2>
|
||||
|
||||
{/* <p className="text-xs text-[#1ea66a]">
|
||||
{selected.online ? "Online now" : "Active recently"}
|
||||
</p> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="flex items-center gap-1 text-muted-foreground">
|
||||
<button
|
||||
aria-label="Start video call"
|
||||
className="grid size-9 place-items-center rounded-full hover:bg-muted"
|
||||
>
|
||||
<VideoIcon size={18} />
|
||||
</button>
|
||||
<button
|
||||
aria-label="Start voice call"
|
||||
className="grid size-9 place-items-center rounded-full hover:bg-muted"
|
||||
>
|
||||
<Phone size={18} />
|
||||
</button>
|
||||
<button
|
||||
aria-label="Chat details"
|
||||
className="grid size-9 place-items-center rounded-full hover:bg-muted"
|
||||
>
|
||||
<EllipsisVertical size={18} />
|
||||
</button>
|
||||
</div> */}
|
||||
</header>
|
||||
|
||||
<div 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>
|
||||
<span className="h-px flex-1 bg-border" />
|
||||
</div> */}
|
||||
|
||||
{messageList?.map((item, index) => (
|
||||
<div
|
||||
key={`${item.timestamp}-${index}`}
|
||||
className={`mb-3 flex ${item.fromMe ? "justify-end" : "justify-start"}`}
|
||||
>
|
||||
<div className="max-w-[82%] sm:max-w-[65%]">
|
||||
<p className="mb-1 text-xs text-muted-foreground">
|
||||
{getFormattedName(item.from) || item.notifyName}
|
||||
</p>
|
||||
<div
|
||||
className={`rounded-2xl px-4 py-2.5 text-sm shadow-sm ${item.fromMe ? "rounded-br-md bg-[#d8f5e8] dark:bg-[#26855c] text-foreground" : "rounded-bl-md bg-card text-card-foreground"}`}
|
||||
>
|
||||
{item.isForwarded ? (
|
||||
<p className="text-xs italic mb-1 text-primary/80">
|
||||
Forwarded
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{item.quotedMsg && item.quotedMsg.type === "chat" ? (
|
||||
<div
|
||||
className={cn(
|
||||
"bg-card/30 px-2 py-1.5 rounded-lg mb-2 mt-1",
|
||||
!item.fromMe && "bg-[#d8f5e8]/30 dark:bg-[#26855c]/30",
|
||||
)}
|
||||
>
|
||||
<p className="whitespace-pre-wrap">{item.quotedMsg.body}</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{item.type === "image" && (
|
||||
<img
|
||||
src={"data:image/jpeg;base64," + item.body}
|
||||
alt=""
|
||||
className="w-full"
|
||||
/>
|
||||
)}
|
||||
|
||||
{item.type === "chat" || item.caption ? (
|
||||
<p className="whitespace-pre-wrap">
|
||||
{item.caption || item.body}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{item.type === "sticker" && <p className="italic">Sticker</p>}
|
||||
|
||||
<div
|
||||
className={`mt-1 flex items-center justify-end gap-1 text-[10px] ${item.fromMe ? "text-primary" : "text-muted-foreground"}`}
|
||||
>
|
||||
<span>{item.timestamp}</span>
|
||||
{/* {item.fromMe &&
|
||||
(item.read ? (
|
||||
<CheckCheck size={14} />
|
||||
) : (
|
||||
<Check size={13} />
|
||||
))} */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border bg-card px-3 py-3 sm:px-6 sm:py-4">
|
||||
<div className="mx-auto flex max-w-2xl items-end gap-2">
|
||||
<button
|
||||
aria-label="Add attachment"
|
||||
className="grid size-10 shrink-0 place-items-center rounded-full text-muted-foreground hover:bg-muted hover:text-muted-foreground"
|
||||
>
|
||||
<PaperclipIcon size={19} />
|
||||
</button>
|
||||
<div className="flex min-h-10 flex-1 items-center gap-2 rounded-2xl bg-muted px-3">
|
||||
{/* <button
|
||||
aria-label="Add emoji"
|
||||
className="shrink-0 text-muted-foreground hover:text-muted-foreground"
|
||||
>
|
||||
<SmileIcon size={19} />
|
||||
</button> */}
|
||||
|
||||
<textarea
|
||||
value={message}
|
||||
onChange={(event) => setMessage(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (
|
||||
event.key === "Enter" &&
|
||||
!event.shiftKey &&
|
||||
!event.nativeEvent.isComposing &&
|
||||
event.keyCode !== 229
|
||||
) {
|
||||
event.preventDefault();
|
||||
sendMessage();
|
||||
}
|
||||
}}
|
||||
placeholder="Write a message..."
|
||||
rows={1}
|
||||
className="max-h-24 min-h-10 flex-1 resize-none bg-transparent py-2.5 text-sm outline-none placeholder:text-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
aria-label="Send message"
|
||||
onClick={sendMessage}
|
||||
className="grid size-10 shrink-0 place-items-center rounded-full bg-primary text-primary-foreground shadow-sm transition hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
disabled={!message.trim()}
|
||||
>
|
||||
<SendIcon size={17} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="mx-auto mt-2 hidden max-w-2xl items-center justify-center gap-1 text-[10px] text-muted-foreground sm:flex">
|
||||
<CircleHelpIcon size={12} /> Press Enter to send
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,280 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import {
|
||||
ChevronDown,
|
||||
Edit3,
|
||||
EllipsisVertical,
|
||||
Search,
|
||||
Sparkles,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { useWAClient } from "@/lib/context";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { cn, getId, getInitial } from "@/lib/utils";
|
||||
import MessagesSection from "./messages";
|
||||
|
||||
// type Chat = {
|
||||
// id: number;
|
||||
// name: string;
|
||||
// initials: string;
|
||||
// color: string;
|
||||
// preview: string;
|
||||
// time: string;
|
||||
// unread?: number;
|
||||
// online?: boolean;
|
||||
// messages: { text: string; time: string; fromMe?: boolean; read?: boolean }[];
|
||||
// };
|
||||
|
||||
// const chats: Chat[] = [
|
||||
// {
|
||||
// id: 1,
|
||||
// name: "Maya Chen",
|
||||
// initials: "MC",
|
||||
// color: "bg-rose-200 text-rose-800",
|
||||
// preview: "That sounds perfect. See you then!",
|
||||
// time: "10:42 AM",
|
||||
// online: true,
|
||||
// messages: [
|
||||
// { text: "Hey! Are we still on for coffee tomorrow?", time: "10:38 AM" },
|
||||
// {
|
||||
// text: "Absolutely. I found a new spot near the park.",
|
||||
// time: "10:40 AM",
|
||||
// fromMe: true,
|
||||
// read: true,
|
||||
// },
|
||||
// { text: "That sounds perfect. See you then!", time: "10:42 AM" },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// name: "Design team",
|
||||
// initials: "DT",
|
||||
// color: "bg-violet-200 text-violet-800",
|
||||
// preview: "Jon: The new explorations are ready",
|
||||
// time: "9:16 AM",
|
||||
// unread: 3,
|
||||
// messages: [
|
||||
// { text: "Jon: The new explorations are ready", time: "9:16 AM" },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// name: "Alex Morgan",
|
||||
// initials: "AM",
|
||||
// color: "bg-amber-200 text-amber-800",
|
||||
// preview: "You: Thanks for sending that over",
|
||||
// time: "Yesterday",
|
||||
// messages: [
|
||||
// {
|
||||
// text: "Thanks for sending that over",
|
||||
// time: "Yesterday",
|
||||
// fromMe: true,
|
||||
// read: true,
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// id: 4,
|
||||
// name: "Weekend plans",
|
||||
// initials: "WP",
|
||||
// color: "bg-emerald-200 text-emerald-800",
|
||||
// preview: "Priya: I can bring the snacks",
|
||||
// time: "Yesterday",
|
||||
// unread: 8,
|
||||
// messages: [{ text: "Priya: I can bring the snacks", time: "Yesterday" }],
|
||||
// },
|
||||
// {
|
||||
// id: 5,
|
||||
// name: "Noah Williams",
|
||||
// initials: "NW",
|
||||
// color: "bg-sky-200 text-sky-800",
|
||||
// preview: "Voice message",
|
||||
// time: "Tuesday",
|
||||
// messages: [{ text: "Voice message", time: "Tuesday" }],
|
||||
// },
|
||||
// {
|
||||
// id: 6,
|
||||
// name: "Sofia Patel",
|
||||
// initials: "SP",
|
||||
// color: "bg-orange-200 text-orange-800",
|
||||
// preview: "See you at the studio!",
|
||||
// time: "Monday",
|
||||
// messages: [{ text: "See you at the studio!", time: "Monday" }],
|
||||
// },
|
||||
// ];
|
||||
|
||||
export default function Page() {
|
||||
const [selectedId, setSelectedId] = useState<string>();
|
||||
const [query, setQuery] = useState("");
|
||||
const [showSearch, setShowSearch] = useState(false);
|
||||
const [mobileChat, setMobileChat] = useState(false);
|
||||
|
||||
const { client, isReady } = useWAClient();
|
||||
const { data: chats } = useQuery({
|
||||
queryKey: ["chats"],
|
||||
queryFn: () =>
|
||||
client
|
||||
.listChats({ limit: 500 })
|
||||
.then((res) => res.map((i) => ({ ...i, id: getId(i.id) }))),
|
||||
enabled: isReady,
|
||||
});
|
||||
|
||||
const filteredChats = useMemo(
|
||||
() =>
|
||||
chats?.filter(
|
||||
(chat) =>
|
||||
chat.formattedTitle?.toLowerCase().includes(query.toLowerCase()) ||
|
||||
chat.lastMessage?.body?.toLowerCase().includes(query.toLowerCase()),
|
||||
),
|
||||
[chats, query],
|
||||
);
|
||||
|
||||
function openChat(id: string) {
|
||||
setSelectedId(id);
|
||||
setMobileChat(true);
|
||||
}
|
||||
|
||||
const selectedChat = chats?.find((chat) => chat.id === selectedId);
|
||||
|
||||
return (
|
||||
<main className="min-h-dvh bg-background p-0 text-foreground sm:p-4 lg:p-6">
|
||||
<div className="mx-auto flex h-dvh max-w-360 overflow-hidden bg-card shadow-xl sm:h-[calc(100dvh-2rem)] sm:rounded-2xl lg:h-[calc(100dvh-3rem)]">
|
||||
<aside
|
||||
className={`flex w-full shrink-0 flex-col border-r border-border bg-card md:w-85 lg:w-95 ${mobileChat ? "hidden md:flex" : "flex"}`}
|
||||
>
|
||||
<header className="flex items-center justify-between border-b border-border px-5 py-5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="grid size-10 place-items-center rounded-xl bg-accent text-accent-foreground">
|
||||
<Sparkles aria-hidden="true" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold tracking-tight">
|
||||
Messages
|
||||
</h1>
|
||||
<p className="text-xs text-muted-foreground">Stay connected</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
aria-label="New message"
|
||||
className="grid size-9 place-items-center rounded-full text-muted-foreground transition hover:bg-muted hover:text-foreground"
|
||||
>
|
||||
<Edit3 size={18} />
|
||||
</button>
|
||||
<button
|
||||
aria-label="More options"
|
||||
className="grid size-9 place-items-center rounded-full text-muted-foreground transition hover:bg-muted hover:text-foreground"
|
||||
>
|
||||
<EllipsisVertical size={19} />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div className="px-4 py-3">
|
||||
{showSearch ? (
|
||||
<div className="flex items-center gap-2 rounded-xl bg-muted px-3 py-2">
|
||||
<Search size={17} className="text-muted-foreground" />
|
||||
<input
|
||||
autoFocus
|
||||
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={() => {
|
||||
setShowSearch(false);
|
||||
setQuery("");
|
||||
}}
|
||||
>
|
||||
<X size={16} className="text-muted-foreground" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setShowSearch(true)}
|
||||
className="flex w-full items-center gap-3 rounded-xl bg-muted px-3 py-2.5 text-left text-sm text-muted-foreground transition hover:bg-border"
|
||||
>
|
||||
<Search size={17} /> Search conversations
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 px-5 pb-2 text-xs font-medium text-muted-foreground">
|
||||
<span className="text-primary">All</span>
|
||||
<span>·</span>
|
||||
<span>Unread</span>
|
||||
<span>·</span>
|
||||
<span>Groups</span>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto px-2 pb-3">
|
||||
{filteredChats?.map((chat) => (
|
||||
<button
|
||||
key={chat.id}
|
||||
onClick={() => openChat(chat.id)}
|
||||
className={`flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left transition ${selectedId === chat.id ? "bg-accent" : "hover:bg-muted/70"}`}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"relative grid size-11 shrink-0 place-items-center rounded-full text-sm font-semibold bg-rose-200 text-rose-800",
|
||||
)}
|
||||
>
|
||||
{getInitial(chat.formattedTitle)}
|
||||
{/* {chat.initials}
|
||||
{chat.online && (
|
||||
<span className="absolute bottom-0 right-0 size-3 rounded-full border-2 border-card bg-primary" />
|
||||
)} */}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<p className="truncate text-sm font-semibold">
|
||||
{chat.formattedTitle || chat.name}
|
||||
</p>
|
||||
{/* <span className="shrink-0 text-[11px] text-muted-foreground">
|
||||
{chat.timestamp}
|
||||
</span> */}
|
||||
</div>
|
||||
<div className="mt-1 flex items-center justify-between gap-2">
|
||||
<p className="truncate text-xs text-muted-foreground">
|
||||
{chat.lastMessage?.body?.substring(0, 50)}
|
||||
</p>
|
||||
{/* {chat.unread && (
|
||||
<span className="grid size-5 shrink-0 place-items-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">
|
||||
{chat.unread}
|
||||
</span>
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="border-t border-border px-5 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="grid size-9 place-items-center rounded-full bg-border text-xs font-semibold text-muted-foreground">
|
||||
JD
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium">Jordan Davis</p>
|
||||
<p className="truncate text-xs text-muted-foreground">
|
||||
jordan@example.com
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
aria-label="Account menu"
|
||||
className="text-muted-foreground"
|
||||
>
|
||||
<ChevronDown size={17} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{selectedChat ? (
|
||||
<MessagesSection
|
||||
chat={selectedChat}
|
||||
mobileChat={mobileChat}
|
||||
setMobileChat={setMobileChat}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import { Button as ButtonPrimitive } from "@base-ui/react/button";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { cn } from "cn";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
||||
outline:
|
||||
"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default:
|
||||
"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
|
||||
lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
icon: "size-9",
|
||||
"icon-xs":
|
||||
"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm":
|
||||
"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
|
||||
"icon-lg": "size-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
...props
|
||||
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
|
||||
return (
|
||||
<ButtonPrimitive
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Button, buttonVariants };
|
||||
@@ -0,0 +1,56 @@
|
||||
import { createContext, useContext, useEffect, useRef, useState } from "react";
|
||||
import type { WhatsAppClient } from "@client/whatsapp";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import wa from "./wa-client";
|
||||
|
||||
export const WAContext = createContext<{
|
||||
client: WhatsAppClient;
|
||||
isConnected: boolean;
|
||||
isReady: boolean;
|
||||
}>(null!);
|
||||
|
||||
export function useWAClient() {
|
||||
const ctx = useContext(WAContext);
|
||||
if (!ctx) throw new Error("useWAClient must be used within a WAProvider");
|
||||
return ctx;
|
||||
}
|
||||
|
||||
export function WAProvider({
|
||||
children,
|
||||
url,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
url?: string;
|
||||
}) {
|
||||
const isInitialized = useRef(false);
|
||||
const [isConnected, setConnected] = useState(false);
|
||||
|
||||
const { data: status } = useQuery({
|
||||
queryKey: ["status"],
|
||||
queryFn: () => wa.status(),
|
||||
enabled: isConnected,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (isInitialized.current) return;
|
||||
|
||||
wa.connect();
|
||||
isInitialized.current = true;
|
||||
|
||||
wa.on("status", setConnected);
|
||||
}, [url]);
|
||||
|
||||
console.log("status", status);
|
||||
|
||||
return (
|
||||
<WAContext.Provider
|
||||
value={{
|
||||
client: wa,
|
||||
isConnected,
|
||||
isReady: status?.authenticated && status?.ready ? true : false,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</WAContext.Provider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import type { ContactDTO, MessageIdDTO, SerializedId } from "@shared/dto";
|
||||
|
||||
export { cn } from "cn";
|
||||
|
||||
export function getId(id?: string | SerializedId | MessageIdDTO | null) {
|
||||
if (!id) return "";
|
||||
return typeof id === "string" ? id : (id._serialized ?? "");
|
||||
}
|
||||
|
||||
export function getInitial(name?: string | null) {
|
||||
return (
|
||||
name
|
||||
?.split(" ")
|
||||
.map((i) => i[0])
|
||||
.slice(0, 2)
|
||||
.join("") || ""
|
||||
);
|
||||
}
|
||||
|
||||
export function getFormattedName(
|
||||
name: string | SerializedId | ContactDTO | null | undefined,
|
||||
): string {
|
||||
if (!name) return "";
|
||||
return typeof name === "string"
|
||||
? name
|
||||
: typeof name.formattedName === "string"
|
||||
? name.formattedName
|
||||
: "user" in name
|
||||
? name.user || ""
|
||||
: "";
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { WhatsAppClient } from "@client/whatsapp";
|
||||
|
||||
const wa = new WhatsAppClient(import.meta.env.VITE_WHATSAPP_URL);
|
||||
|
||||
export default wa;
|
||||
@@ -0,0 +1,18 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { WAProvider } from "./lib/context.tsx";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import App from "./app/page.tsx";
|
||||
import "./app/globals.css";
|
||||
|
||||
const queryCLient = new QueryClient();
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<QueryClientProvider client={queryCLient}>
|
||||
<WAProvider url={import.meta.env.VITE_WHATSAPP_URL}>
|
||||
<App />
|
||||
</WAProvider>
|
||||
</QueryClientProvider>
|
||||
</StrictMode>,
|
||||
);
|
||||
Reference in New Issue
Block a user