forked from Goutam/lynkeduppro-crm
refactor(messaging): drop bespoke messenger/inbox/mail + wrapper page headers
Delete the now-dead pre-SDK stack (messenger/inbox/mail components + their *-api libs + messenger-socket) — both tabs render the @insignia/iios-messaging-ui SDK. Remove the redundant <PageHead> from the messenger/inbox SDK wrappers (the Topbar already shows the title); the SDK itself renders no header. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -12,19 +12,12 @@ import "@insignia/iios-messaging-ui/styles.css";
|
||||
import { isShellConfigured } from "@/lib/appshell";
|
||||
import { CrmInboxAdapter } from "@/lib/crm-inbox-adapter";
|
||||
import type { DataDoor } from "@/lib/crm-messaging-adapter";
|
||||
import { PageHead } from "./ui";
|
||||
|
||||
const SHELL = isShellConfigured();
|
||||
|
||||
export function InboxSdk() {
|
||||
return (
|
||||
<div className="view">
|
||||
<PageHead
|
||||
eyebrow="Communication"
|
||||
title="Inbox"
|
||||
subtitle="Mentions, messages, alerts and mail — all in one, via the messaging SDK"
|
||||
icon="bell"
|
||||
/>
|
||||
{!SHELL && (
|
||||
<div style={{ margin: "0 0 14px", padding: "8px 14px", borderRadius: 10, background: "var(--panel-2)", color: "var(--muted)", fontSize: 13, border: "1px solid var(--border)" }}>
|
||||
Demo mode — running on the SDK's mock inbox adapter.
|
||||
|
||||
@@ -1,152 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================
|
||||
// Inbox — the ONE unified communication surface. It lists everything
|
||||
// IIOS surfaces for you (mentions, needs-reply, system alerts, support
|
||||
// updates, …) AND the mail behind them: click an item tied to a thread
|
||||
// and its conversation opens on the right to read + reply. Compose new
|
||||
// mail from here too. Items come from crm.inbox.*; threads from crm.mail.*.
|
||||
// ============================================================
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Btn, Icon, PageHead, Pill, useToast } from "./ui";
|
||||
import { useInboxData, type InboxState, type UiInboxItem } from "@/lib/inbox-api";
|
||||
import { MailReader, NewMailModal } from "./mail";
|
||||
|
||||
const KIND_LABEL: Record<string, string> = {
|
||||
MAIL: "Mail",
|
||||
MENTION: "Mention", NEEDS_REPLY: "Needs reply", NEEDS_REVIEW: "Needs review", NEEDS_APPROVAL: "Needs approval",
|
||||
SUPPORT_UPDATE: "Support", MEETING_FOLLOWUP: "Meeting", DIGEST: "Digest", SYSTEM_ALERT: "Alert", CRM_OWNER_INTEREST: "Owner",
|
||||
};
|
||||
const FILTERS: { value: InboxState; label: string }[] = [
|
||||
{ value: "OPEN", label: "Open" }, { value: "SNOOZED", label: "Snoozed" }, { value: "DONE", label: "Done" }, { value: "ARCHIVED", label: "Archived" },
|
||||
];
|
||||
|
||||
export function Inbox() {
|
||||
const [filter, setFilter] = useState<InboxState>("OPEN");
|
||||
const inbox = useInboxData(filter);
|
||||
const toast = useToast();
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [newOpen, setNewOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if ((!selectedId || !inbox.items.some((i) => i.id === selectedId)) && inbox.items[0]) setSelectedId(inbox.items[0].id);
|
||||
}, [inbox.items, selectedId]);
|
||||
|
||||
const selected = inbox.items.find((i) => i.id === selectedId) ?? null;
|
||||
|
||||
return (
|
||||
<div className="view">
|
||||
<PageHead
|
||||
eyebrow="Communication" title="Inbox" subtitle="Mentions, messages, system alerts and mail — all in one place" icon="bell"
|
||||
actions={<Btn icon="plus" onClick={() => setNewOpen(true)}>New mail</Btn>}
|
||||
/>
|
||||
{!inbox.live && (
|
||||
<div style={{ margin: "0 0 14px", padding: "8px 14px", borderRadius: 10, background: "var(--panel-2)", color: "var(--muted)", fontSize: 13, border: "1px solid var(--border)" }}>
|
||||
Demo mode — running on mock data. It goes live once the Shell + be-crm are connected.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ display: "flex", gap: 6, marginBottom: 14, flexWrap: "wrap" }}>
|
||||
{FILTERS.map((f) => (
|
||||
<Btn key={f.value} variant={filter === f.value ? "primary" : "outline"} onClick={() => setFilter(f.value)}>{f.label}</Btn>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="card" style={{ display: "flex", height: 620, padding: 0, overflow: "hidden" }}>
|
||||
{/* Left — the unified item list */}
|
||||
<aside style={{ width: 360, borderRight: "1px solid var(--border)", overflowY: "auto", background: "var(--panel)" }}>
|
||||
{inbox.loading && <div style={{ padding: 20, color: "var(--muted)" }}>Loading…</div>}
|
||||
{!inbox.loading && inbox.items.length === 0 && (
|
||||
<div style={{ padding: 28, color: "var(--muted)", textAlign: "center" }}>Nothing here — you're all caught up 🎉</div>
|
||||
)}
|
||||
{inbox.items.map((it) => (
|
||||
<ItemRow key={it.id} it={it} active={it.id === selectedId} onClick={() => setSelectedId(it.id)} />
|
||||
))}
|
||||
</aside>
|
||||
|
||||
{/* Right — read the mail behind the item, or the item detail */}
|
||||
<section style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0, background: "var(--bg)" }}>
|
||||
{selected ? (
|
||||
<Detail
|
||||
it={selected}
|
||||
onError={(m) => toast.push({ tone: "error", title: "Failed", desc: m })}
|
||||
onDone={() => inbox.transition(selected.id, "DONE")}
|
||||
onSnooze={() => inbox.transition(selected.id, "SNOOZED")}
|
||||
onArchive={() => inbox.transition(selected.id, "ARCHIVED")}
|
||||
/>
|
||||
) : (
|
||||
<div style={{ margin: "auto", color: "var(--muted)", textAlign: "center" }}>
|
||||
<Icon name="bell" size={38} /><p>Select an item to read</p>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<NewMailModal
|
||||
open={newOpen} onClose={() => setNewOpen(false)}
|
||||
onSent={() => { setNewOpen(false); inbox.refetch(); toast.push({ tone: "success", title: "Sent" }); }}
|
||||
onError={(m) => toast.push({ tone: "error", title: "Couldn't send", desc: m })}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ItemRow({ it, active, onClick }: { it: UiInboxItem; active: boolean; onClick: () => void }) {
|
||||
const isMention = it.kind === "MENTION";
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
style={{
|
||||
display: "flex", gap: 10, alignItems: "flex-start", width: "100%", textAlign: "left",
|
||||
padding: "13px 16px", border: "none", borderBottom: "1px solid var(--border)", cursor: "pointer",
|
||||
background: active ? "var(--panel-2)" : "transparent", color: "var(--text)",
|
||||
}}
|
||||
>
|
||||
<span style={{ marginTop: 2, color: isMention ? "var(--orange)" : "var(--text-2)", flexShrink: 0 }}>
|
||||
<Icon name={it.kind === "MAIL" ? "mail" : it.threadId ? "chat" : isMention ? "chat" : "bell"} size={18} />
|
||||
</span>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ display: "flex", gap: 6, alignItems: "center", flexWrap: "wrap" }}>
|
||||
<Pill tone={isMention ? "warn" : "muted"}>{KIND_LABEL[it.kind] ?? it.kind}</Pill>
|
||||
<span style={{ fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{it.title}</span>
|
||||
</div>
|
||||
{it.summary && <div style={{ color: "var(--muted)", fontSize: 12.5, marginTop: 3, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{it.summary}</div>}
|
||||
</div>
|
||||
{it.state !== "OPEN" && <Pill tone="muted">{it.state.toLowerCase()}</Pill>}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function Detail({ it, onError, onDone, onSnooze, onArchive }: {
|
||||
it: UiInboxItem; onError: (m: string) => void; onDone: () => void; onSnooze: () => void; onArchive: () => void;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
{/* Item actions bar — only for real inbox work-items. Mail isn't an inbox item
|
||||
(no crm.inbox.transition), so it gets read/reply only, no Done/Snooze/Archive. */}
|
||||
{it.state === "OPEN" && it.kind !== "MAIL" && (
|
||||
<div style={{ display: "flex", gap: 6, padding: "10px 16px", borderBottom: "1px solid var(--border)", justifyContent: "flex-end" }}>
|
||||
<Btn variant="ghost" icon="clock" onClick={onSnooze}>Snooze</Btn>
|
||||
<Btn variant="outline" icon="check" onClick={onDone}>Done</Btn>
|
||||
<Btn variant="ghost" icon="x" onClick={onArchive}>Archive</Btn>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{it.threadId ? (
|
||||
// A message/mail item → open the conversation to read + reply.
|
||||
// key by threadId: the SDK's useQuery only refetches when the ACTION changes, not the
|
||||
// variables — so switching items must remount MailReader to load the new thread's history.
|
||||
<div style={{ flex: 1, minHeight: 0 }}>
|
||||
<MailReader key={it.threadId} threadId={it.threadId} subject={it.title} onError={onError} />
|
||||
</div>
|
||||
) : (
|
||||
// A non-threaded item (e.g. a system alert) → show its detail.
|
||||
<div style={{ flex: 1, overflowY: "auto", padding: 22 }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 16, marginBottom: 6 }}>{it.title}</div>
|
||||
{it.summary && <div style={{ color: "var(--muted)", fontSize: 14, lineHeight: 1.55 }}>{it.summary}</div>}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,231 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================
|
||||
// Mail components used INSIDE the Inbox (not a separate tab).
|
||||
// The Inbox is the one unified surface — mentions, system messages
|
||||
// and mail all live there. These render the mail body + reply, and
|
||||
// compose a new message. HTML bodies render in a sandboxed iframe.
|
||||
// ============================================================
|
||||
|
||||
import { type CSSProperties, useEffect, useRef, useState } from "react";
|
||||
import { Avatar, Btn, Field, Icon, Modal, Pill } from "./ui";
|
||||
import { useMailThread, useMailCompose, type MailAttachment, type MailPerson } from "@/lib/mail-api";
|
||||
import { useUploadAttachment, useDownloadUrl, isImage, type UploadedAttachment } from "@/lib/media-api";
|
||||
|
||||
const timeOf = (iso?: string) => {
|
||||
if (!iso) return "";
|
||||
const d = new Date(iso);
|
||||
return Number.isNaN(+d) ? "" : d.toLocaleString([], { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
|
||||
};
|
||||
const CUSTOMER_GRAD = "linear-gradient(135deg,#10b981,#059669)";
|
||||
const inputStyle: CSSProperties = {
|
||||
width: "100%", padding: "9px 12px", borderRadius: 10, border: "1px solid var(--border)",
|
||||
background: "var(--panel)", color: "var(--text)", fontSize: 14, outline: "none",
|
||||
};
|
||||
|
||||
function fmtBytes(n: number): string {
|
||||
if (!n) return "";
|
||||
if (n < 1024) return `${n} B`;
|
||||
if (n < 1024 * 1024) return `${(n / 1024).toFixed(0)} KB`;
|
||||
return `${(n / (1024 * 1024)).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
/** Resolves a signed URL for a stored attachment and renders it inline (image) or as a file chip. */
|
||||
function MailAttachmentView({ att }: { att: MailAttachment }) {
|
||||
const getUrl = useDownloadUrl();
|
||||
const [url, setUrl] = useState<string | null>(null);
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
getUrl(att.contentRef, att.mimeType).then((u) => { if (alive) setUrl(u); }).catch(() => {});
|
||||
return () => { alive = false; };
|
||||
}, [att.contentRef, att.mimeType, getUrl]);
|
||||
|
||||
const label = att.filename || "Attachment";
|
||||
if (isImage(att.mimeType)) {
|
||||
return url
|
||||
? <a href={url} target="_blank" rel="noreferrer" style={{ display: "inline-block" }}><img src={url} alt={label} style={{ maxWidth: 320, maxHeight: 240, borderRadius: 8, border: "1px solid var(--border)" }} /></a>
|
||||
: <div style={{ color: "var(--muted)", fontSize: 13 }}>Loading image…</div>;
|
||||
}
|
||||
return (
|
||||
<a href={url ?? "#"} target="_blank" rel="noreferrer"
|
||||
style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "8px 12px", borderRadius: 10, border: "1px solid var(--border)", background: "var(--panel-2)", color: "var(--text)", textDecoration: "none", maxWidth: 320 }}>
|
||||
<Icon name="paperclip" size={18} />
|
||||
<span style={{ flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{label}</span>
|
||||
{att.sizeBytes > 0 && <span style={{ color: "var(--muted)", fontSize: 12 }}>{fmtBytes(att.sizeBytes)}</span>}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
/** A small staged-file chip shown in a composer before send, with a remove button. */
|
||||
function StagedChip({ file, onRemove }: { file: UploadedAttachment; onRemove: () => void }) {
|
||||
return (
|
||||
<div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "5px 10px", borderRadius: 999, background: "var(--panel-2)", border: "1px solid var(--border)", fontSize: 13 }}>
|
||||
<Icon name="paperclip" size={14} />
|
||||
<span style={{ maxWidth: 160, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{file.filename}</span>
|
||||
<span style={{ color: "var(--muted)" }}>{fmtBytes(file.sizeBytes)}</span>
|
||||
<button onClick={onRemove} title="Remove" style={{ background: "none", border: "none", color: "var(--muted)", cursor: "pointer", padding: 0, lineHeight: 1 }}>✕</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Reader + reply for one mail thread. Used in the Inbox detail pane when an item has a threadId. */
|
||||
export function MailReader({ threadId, subject, onError }: { threadId: string; subject: string; onError: (m: string) => void }) {
|
||||
const t = useMailThread(threadId);
|
||||
const upload = useUploadAttachment();
|
||||
const [draft, setDraft] = useState("");
|
||||
const [sending, setSending] = useState(false);
|
||||
const [staged, setStaged] = useState<UploadedAttachment | null>(null);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
async function onPickFile(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const file = e.target.files?.[0];
|
||||
e.target.value = "";
|
||||
if (!file) return;
|
||||
setUploading(true);
|
||||
try { setStaged(await upload(file)); }
|
||||
catch (err) { onError((err as Error).message); }
|
||||
finally { setUploading(false); }
|
||||
}
|
||||
|
||||
async function reply() {
|
||||
const text = draft.trim();
|
||||
if ((!text && !staged) || sending) return;
|
||||
const att = staged ?? undefined;
|
||||
setDraft(""); setStaged(null); setSending(true);
|
||||
try { await t.reply(text, att); }
|
||||
catch (e) { setDraft(text); setStaged(att ?? null); onError((e as Error).message); }
|
||||
finally { setSending(false); }
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }}>
|
||||
<header style={{ padding: "12px 18px", borderBottom: "1px solid var(--border)" }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 15 }}>{subject || "(no subject)"}</div>
|
||||
</header>
|
||||
<div style={{ flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 12 }}>
|
||||
{t.loading && t.messages.length === 0 && <div style={{ margin: "auto", color: "var(--muted)" }}>Loading…</div>}
|
||||
{!t.loading && t.messages.length === 0 && <div style={{ margin: "auto", color: "var(--muted)" }}>No messages.</div>}
|
||||
{t.messages.map((m) => (
|
||||
<div key={m.interactionId} style={{ border: "1px solid var(--border)", borderRadius: 12, background: "var(--panel)", overflow: "hidden" }}>
|
||||
<div style={{ padding: "7px 12px", borderBottom: "1px solid var(--border)", display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--muted)" }}>
|
||||
<span>{m.kind === "EMAIL" ? "Email" : "Reply"}{m.actorId ? ` · ${m.actorId.replace(/^(pp_|cust_)/, "").slice(0, 8)}` : ""}</span>
|
||||
<span>{timeOf(m.occurredAt)}</span>
|
||||
</div>
|
||||
{m.html
|
||||
? <iframe sandbox="" srcDoc={m.html} title="mail body" style={{ width: "100%", height: 200, border: "none", background: "#fff" }} />
|
||||
: m.text
|
||||
? <div style={{ padding: 12, whiteSpace: "pre-wrap", wordBreak: "break-word", fontSize: 14 }}>{m.text}</div>
|
||||
: null}
|
||||
{m.attachment && <div style={{ padding: 12, paddingTop: m.html || m.text ? 0 : 12 }}><MailAttachmentView att={m.attachment} /></div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<footer style={{ display: "flex", flexDirection: "column", gap: 8, padding: 12, borderTop: "1px solid var(--border)" }}>
|
||||
{staged && <div><StagedChip file={staged} onRemove={() => setStaged(null)} /></div>}
|
||||
<div style={{ display: "flex", gap: 8 }}>
|
||||
<input ref={fileRef} type="file" style={{ display: "none" }} onChange={onPickFile} />
|
||||
<Btn variant="ghost" icon="paperclip" onClick={() => fileRef.current?.click()} disabled={uploading}>{uploading ? "…" : ""}</Btn>
|
||||
<input
|
||||
value={draft} onChange={(e) => setDraft(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); void reply(); } }}
|
||||
placeholder="Reply…" style={inputStyle}
|
||||
/>
|
||||
<Btn icon="send" onClick={() => void reply()} disabled={sending || (!draft.trim() && !staged)}>Reply</Btn>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Compose a new message — in-app (to a person) or external (to an email). */
|
||||
export function NewMailModal({ open, onClose, onSent, onError }: { open: boolean; onClose: () => void; onSent: () => void; onError: (m: string) => void }) {
|
||||
const compose = useMailCompose(onSent);
|
||||
const upload = useUploadAttachment();
|
||||
const [mode, setMode] = useState<"internal" | "external">("internal");
|
||||
const [recipient, setRecipient] = useState("");
|
||||
const [subject, setSubject] = useState("");
|
||||
const [body, setBody] = useState("");
|
||||
const [q, setQ] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [staged, setStaged] = useState<UploadedAttachment[]>([]);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => { if (!open) { setMode("internal"); setRecipient(""); setSubject(""); setBody(""); setQ(""); setBusy(false); setStaged([]); setUploading(false); } }, [open]);
|
||||
|
||||
async function onPickFile(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const files = Array.from(e.target.files ?? []);
|
||||
e.target.value = "";
|
||||
if (!files.length) return;
|
||||
setUploading(true);
|
||||
try {
|
||||
const uploaded = await Promise.all(files.map((f) => upload(f)));
|
||||
setStaged((s) => [...s, ...uploaded].slice(0, 10));
|
||||
} catch (err) { onError((err as Error).message); }
|
||||
finally { setUploading(false); }
|
||||
}
|
||||
|
||||
const filtered = compose.directory.filter((p) => p.name.toLowerCase().includes(q.trim().toLowerCase()));
|
||||
const canSend = !!recipient && !!subject.trim() && !!body.trim() && !busy && !uploading;
|
||||
|
||||
async function send() {
|
||||
if (!canSend) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
if (mode === "internal") await compose.sendInternal(recipient, subject.trim(), body.trim(), staged.length ? staged : undefined);
|
||||
else await compose.sendExternal(recipient.trim(), subject.trim(), body.trim(), staged.length ? { attachments: staged } : undefined);
|
||||
} catch (e) { onError((e as Error).message); }
|
||||
finally { setBusy(false); }
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open} onClose={onClose} title="New message" subtitle={mode === "internal" ? "To a team member or client (in-app)" : "To an email address"} icon="chat"
|
||||
footer={<>
|
||||
<Btn variant="ghost" onClick={onClose}>Cancel</Btn>
|
||||
<Btn icon="send" onClick={() => void send()} disabled={!canSend}>{busy ? "Sending…" : "Send"}</Btn>
|
||||
</>}
|
||||
>
|
||||
<div style={{ display: "flex", gap: 6, marginBottom: 12 }}>
|
||||
<Btn variant={mode === "internal" ? "primary" : "outline"} onClick={() => { setMode("internal"); setRecipient(""); }}>In-app</Btn>
|
||||
<Btn variant={mode === "external" ? "primary" : "outline"} onClick={() => { setMode("external"); setRecipient(""); }}>Email</Btn>
|
||||
</div>
|
||||
|
||||
{mode === "internal" ? (
|
||||
<Field label="To (person)">
|
||||
<input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search people…" style={{ ...inputStyle, marginBottom: 8 }} />
|
||||
<div style={{ maxHeight: 180, overflowY: "auto", display: "flex", flexDirection: "column", gap: 2 }}>
|
||||
{filtered.length === 0 && <div style={{ color: "var(--muted)", padding: 8 }}>No people found.</div>}
|
||||
{filtered.map((p: MailPerson) => (
|
||||
<label key={p.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "7px 10px", borderRadius: 10, cursor: "pointer", background: recipient === p.id ? "var(--panel-2)" : "transparent" }}>
|
||||
<input type="radio" checked={recipient === p.id} onChange={() => setRecipient(p.id)} />
|
||||
<Avatar initials={(p.name.split(/\s+/).map((s) => s[0]).join("").slice(0, 2) || "?").toUpperCase()} size={26} gradient={p.kind === "customer" ? CUSTOMER_GRAD : undefined} />
|
||||
<span style={{ flex: 1 }}>{p.name}</span>
|
||||
<Pill tone="muted">{p.kind}</Pill>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</Field>
|
||||
) : (
|
||||
<Field label="To (email)">
|
||||
<input value={recipient} onChange={(e) => setRecipient(e.target.value)} placeholder="name@company.com" style={inputStyle} />
|
||||
</Field>
|
||||
)}
|
||||
|
||||
<Field label="Subject"><input value={subject} onChange={(e) => setSubject(e.target.value)} placeholder="Subject" style={inputStyle} /></Field>
|
||||
<Field label="Message"><textarea value={body} onChange={(e) => setBody(e.target.value)} placeholder="Write your message…" rows={6} style={{ ...inputStyle, resize: "vertical" }} /></Field>
|
||||
|
||||
{/* NOT a <Field> (which is a <label>): a label wrapping the file input would hijack the
|
||||
Attach button's click via label→input association and open the picker erratically. */}
|
||||
<div className="ds-field">
|
||||
<span className="ds-field-lbl">Attachments</span>
|
||||
<input ref={fileRef} type="file" multiple style={{ display: "none" }} onChange={onPickFile} />
|
||||
<div style={{ display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center" }}>
|
||||
<Btn variant="outline" icon="paperclip" onClick={() => fileRef.current?.click()} disabled={uploading || staged.length >= 10}>{uploading ? "Uploading…" : "Attach"}</Btn>
|
||||
{staged.map((f, i) => <StagedChip key={`${f.contentRef}_${i}`} file={f} onRemove={() => setStaged((s) => s.filter((_, j) => j !== i))} />)}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -13,7 +13,6 @@ import { MockAdapter } from "@insignia/iios-messaging-ui/adapters/mock";
|
||||
import "@insignia/iios-messaging-ui/styles.css";
|
||||
import { isShellConfigured } from "@/lib/appshell";
|
||||
import { CrmMessagingAdapter, type DataDoor } from "@/lib/crm-messaging-adapter";
|
||||
import { PageHead } from "./ui";
|
||||
|
||||
interface RealtimeDTO { url: string; audience: string; token?: string }
|
||||
|
||||
@@ -41,12 +40,6 @@ const SHELL = isShellConfigured();
|
||||
export function MessengerSdk() {
|
||||
return (
|
||||
<div className="view">
|
||||
<PageHead
|
||||
eyebrow="Communication"
|
||||
title="Messenger"
|
||||
subtitle="Chat with your team and clients — rendered by the messaging SDK"
|
||||
icon="send"
|
||||
/>
|
||||
{!SHELL && (
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -1,550 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================
|
||||
// Messenger — internal team + client chat, powered by IIOS via
|
||||
// the be-crm data door (crm.messenger.*). Conversation list ⇄
|
||||
// thread view + composer, with a "new chat" people picker that
|
||||
// creates a DM (1 person) or group (2+). DM-vs-group and who-can-
|
||||
// chat are enforced server-side by IIOS/OPA; this is just UI.
|
||||
// Live messages, typing, read receipts and reactions come over the
|
||||
// IIOS socket (Shell mode); mock keeps the demo working offline.
|
||||
// ============================================================
|
||||
|
||||
import { type CSSProperties, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Avatar, Btn, Field, Icon, Modal, PageHead, Pill, useToast } from "./ui";
|
||||
import { useMessengerData, useThread, useGroupSettings, type Membership, type UiAttachment, type UiConversation, type UiMember, type UiMessage, type UiPerson } from "@/lib/messenger-api";
|
||||
import { MessengerSocketProvider, useMessengerSocket } from "@/lib/messenger-socket";
|
||||
import { useUploadAttachment, useDownloadUrl, isImage, type UploadedAttachment } from "@/lib/media-api";
|
||||
|
||||
const fmtBytes = (n: number) => (n < 1024 ? `${n} B` : n < 1048576 ? `${(n / 1024).toFixed(0)} KB` : `${(n / 1048576).toFixed(1)} MB`);
|
||||
|
||||
/** Renders a message attachment — an inline image thumbnail, or a downloadable file chip. */
|
||||
function AttachmentView({ att }: { att: UiAttachment }) {
|
||||
const getUrl = useDownloadUrl();
|
||||
const [url, setUrl] = useState<string | null>(null);
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
getUrl(att.contentRef, att.mimeType).then((u) => { if (alive) setUrl(u); }).catch(() => {});
|
||||
return () => { alive = false; };
|
||||
}, [att.contentRef, att.mimeType, getUrl]);
|
||||
|
||||
if (isImage(att.mimeType)) {
|
||||
return url ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<a href={url} target="_blank" rel="noreferrer"><img src={url} alt="attachment" style={{ maxWidth: 240, maxHeight: 240, borderRadius: 10, display: "block", marginTop: 6, border: "1px solid var(--border)" }} /></a>
|
||||
) : <div style={{ marginTop: 6, color: "var(--muted)", fontSize: 12 }}>Loading image…</div>;
|
||||
}
|
||||
return (
|
||||
<a href={url ?? "#"} target={url ? "_blank" : undefined} rel="noreferrer"
|
||||
style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 6, padding: "8px 12px", borderRadius: 10, background: "var(--panel-2)", border: "1px solid var(--border)", textDecoration: "none", color: "var(--text)", maxWidth: 240 }}>
|
||||
<Icon name="paperclip" size={18} />
|
||||
<span style={{ flex: 1, minWidth: 0, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontSize: 13 }}>Attachment</span>
|
||||
<span style={{ color: "var(--muted)", fontSize: 12, flexShrink: 0 }}>{fmtBytes(att.sizeBytes)}</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
const initialsOf = (name: string) =>
|
||||
name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]).join("").toUpperCase() || "?";
|
||||
const timeOf = (iso?: string) => {
|
||||
if (!iso) return "";
|
||||
const d = new Date(iso);
|
||||
return Number.isNaN(+d) ? "" : d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
|
||||
};
|
||||
const GROUP_GRAD = "linear-gradient(135deg,#6366f1,#8b5cf6)";
|
||||
const CUSTOMER_GRAD = "linear-gradient(135deg,#10b981,#059669)";
|
||||
const REACTION_EMOJIS = ["👍", "❤️", "😂", "😮", "😢", "🎉"];
|
||||
const inputStyle: CSSProperties = {
|
||||
width: "100%", padding: "9px 12px", borderRadius: 10, border: "1px solid var(--border)",
|
||||
background: "var(--panel)", color: "var(--text)", fontSize: 14, outline: "none",
|
||||
};
|
||||
|
||||
export function Messenger() {
|
||||
// One shared IIOS socket for the whole panel (live in Shell mode; no-op in mock).
|
||||
return (
|
||||
<MessengerSocketProvider>
|
||||
<MessengerPanel />
|
||||
</MessengerSocketProvider>
|
||||
);
|
||||
}
|
||||
|
||||
function MessengerPanel() {
|
||||
const m = useMessengerData();
|
||||
const toast = useToast();
|
||||
const [selected, setSelected] = useState<string | null>(null);
|
||||
const [newOpen, setNewOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if ((!selected || !m.conversations.some((c) => c.threadId === selected)) && m.conversations[0]) {
|
||||
setSelected(m.conversations[0].threadId);
|
||||
}
|
||||
}, [m.conversations, selected]);
|
||||
|
||||
const current = m.conversations.find((c) => c.threadId === selected) ?? null;
|
||||
|
||||
return (
|
||||
<div className="view">
|
||||
<PageHead
|
||||
eyebrow="Communication" title="Messenger" subtitle="Chat with your team and clients — direct or in groups" icon="send"
|
||||
actions={<Btn icon="plus" onClick={() => setNewOpen(true)}>New chat</Btn>}
|
||||
/>
|
||||
{!m.live && (
|
||||
<div style={{ margin: "0 0 14px", padding: "8px 14px", borderRadius: 10, background: "var(--panel-2)", color: "var(--muted)", fontSize: 13, border: "1px solid var(--border)" }}>
|
||||
Demo mode — running on mock data. It goes live once the Shell + be-crm are connected.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="card" style={{ display: "flex", height: 620, padding: 0, overflow: "hidden" }}>
|
||||
<aside style={{ width: 296, borderRight: "1px solid var(--border)", overflowY: "auto", background: "var(--panel)" }}>
|
||||
{m.loading && <div style={{ padding: 16, color: "var(--muted)" }}>Loading…</div>}
|
||||
{!m.loading && m.conversations.length === 0 && (
|
||||
<div style={{ padding: 16, color: "var(--muted)" }}>No conversations yet. Start a new chat.</div>
|
||||
)}
|
||||
{m.conversations.map((c) => (
|
||||
<ConversationRow key={c.threadId} c={c} active={c.threadId === selected} onClick={() => setSelected(c.threadId)} />
|
||||
))}
|
||||
</aside>
|
||||
|
||||
<section style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }}>
|
||||
{current ? (
|
||||
<ThreadView key={current.threadId} conv={current} nameOf={m.nameOf} directory={m.directory} onError={(msg) => toast.push({ tone: "error", title: "Message failed", desc: msg })} />
|
||||
) : (
|
||||
<div style={{ margin: "auto", color: "var(--muted)", textAlign: "center" }}>
|
||||
<Icon name="send" size={38} />
|
||||
<p>Select or start a conversation</p>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<NewChatModal
|
||||
open={newOpen} onClose={() => setNewOpen(false)} directory={m.directory}
|
||||
onCreate={async (ids, opts) => {
|
||||
try {
|
||||
const id = await m.openConversation(ids, opts);
|
||||
setSelected(id);
|
||||
setNewOpen(false);
|
||||
} catch (e) {
|
||||
toast.push({ tone: "error", title: "Couldn't start chat", desc: (e as Error).message });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ConversationRow({ c, active, onClick }: { c: UiConversation; active: boolean; onClick: () => void }) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
style={{
|
||||
display: "flex", gap: 10, alignItems: "center", width: "100%", textAlign: "left",
|
||||
padding: "10px 14px", border: "none", borderBottom: "1px solid var(--border)", cursor: "pointer",
|
||||
background: active ? "var(--panel-2)" : "transparent", color: "var(--text)",
|
||||
}}
|
||||
>
|
||||
<Avatar initials={initialsOf(c.title)} size={38} gradient={c.membership === "group" ? GROUP_GRAD : undefined} />
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", gap: 8, alignItems: "center" }}>
|
||||
<span style={{ fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.title}</span>
|
||||
<span style={{ color: "var(--muted)", fontSize: 11, flexShrink: 0 }}>{timeOf(c.lastAt)}</span>
|
||||
</div>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", gap: 8, alignItems: "center" }}>
|
||||
<span style={{ color: "var(--muted)", fontSize: 12.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
|
||||
{c.lastMessage ?? "No messages yet"}
|
||||
</span>
|
||||
{c.unread > 0 && (
|
||||
<span style={{ background: "var(--orange)", color: "#fff", borderRadius: 999, fontSize: 11, padding: "1px 7px", flexShrink: 0 }}>{c.unread}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function ThreadView({ conv, nameOf, directory, onError }: { conv: UiConversation; nameOf: (id: string) => string; directory: UiPerson[]; onError: (m: string) => void }) {
|
||||
const t = useThread(conv.threadId);
|
||||
const socket = useMessengerSocket();
|
||||
const [draft, setDraft] = useState("");
|
||||
const [sending, setSending] = useState(false);
|
||||
const [replyTo, setReplyTo] = useState<UiMessage | null>(null);
|
||||
const [flashId, setFlashId] = useState<string | null>(null);
|
||||
const endRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const msgRefs = useRef<Map<string, HTMLElement>>(new Map());
|
||||
const typingSentAt = useRef(0);
|
||||
|
||||
useEffect(() => { endRef.current?.scrollIntoView({ behavior: "smooth" }); }, [t.messages.length]);
|
||||
|
||||
const byId = useMemo(() => Object.fromEntries(t.messages.map((m) => [m.id, m])), [t.messages]);
|
||||
const lastMineId = useMemo(() => [...t.messages].reverse().find((m) => m.mine)?.id ?? null, [t.messages]);
|
||||
|
||||
// Reply → focus the composer (bug: it didn't focus, forcing a manual click).
|
||||
function startReply(msg: UiMessage) {
|
||||
setReplyTo(msg);
|
||||
requestAnimationFrame(() => inputRef.current?.focus());
|
||||
}
|
||||
// Click a quoted message → scroll to the original and flash it.
|
||||
function jumpTo(id: string) {
|
||||
const el = msgRefs.current.get(id);
|
||||
if (!el) return;
|
||||
el.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
setFlashId(id);
|
||||
setTimeout(() => setFlashId((f) => (f === id ? null : f)), 1200);
|
||||
}
|
||||
|
||||
const uploadAttachment = useUploadAttachment();
|
||||
const [staged, setStaged] = useState<UploadedAttachment | null>(null);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
function onDraftChange(v: string) {
|
||||
setDraft(v);
|
||||
const now = Date.now();
|
||||
if (socket && now - typingSentAt.current > 2000) { socket.sendTyping(conv.threadId); typingSentAt.current = now; }
|
||||
}
|
||||
|
||||
async function onPickFile(file: File | undefined) {
|
||||
if (!file) return;
|
||||
setUploading(true);
|
||||
try { setStaged(await uploadAttachment(file)); }
|
||||
catch (e) { onError((e as Error).message); }
|
||||
finally { setUploading(false); if (fileRef.current) fileRef.current.value = ""; }
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
const text = draft.trim();
|
||||
if ((!text && !staged) || sending) return; // allow an attachment with no text
|
||||
const parent = replyTo?.id;
|
||||
const att = staged;
|
||||
setDraft(""); setReplyTo(null); setStaged(null); setSending(true);
|
||||
try {
|
||||
await t.send(text, {
|
||||
...(parent ? { parentInteractionId: parent } : {}),
|
||||
...(att ? { attachment: { contentRef: att.contentRef, mimeType: att.mimeType, sizeBytes: att.sizeBytes } } : {}),
|
||||
});
|
||||
} catch (e) { setDraft(text); setStaged(att); onError((e as Error).message); }
|
||||
finally { setSending(false); }
|
||||
}
|
||||
|
||||
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||
|
||||
const typingLabel = t.typingUserIds.length === 1
|
||||
? `${nameOf(t.typingUserIds[0])} is typing…`
|
||||
: t.typingUserIds.length > 1 ? "Several people are typing…" : "";
|
||||
|
||||
return (
|
||||
<>
|
||||
<header style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 18px", borderBottom: "1px solid var(--border)" }}>
|
||||
<Avatar initials={initialsOf(conv.title)} size={34} gradient={conv.membership === "group" ? GROUP_GRAD : undefined} />
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ fontWeight: 600 }}>{conv.title}</div>
|
||||
<div style={{ color: "var(--muted)", fontSize: 12 }}>
|
||||
{conv.membership === "group" ? `${conv.participants.length} people` : "Direct message"}
|
||||
</div>
|
||||
</div>
|
||||
{conv.membership === "group" && (
|
||||
<button onClick={() => setSettingsOpen(true)} title="Group settings" style={{ ...actionBtnStyle, width: 34, height: 34 }}>
|
||||
<Icon name="settings" size={18} />
|
||||
</button>
|
||||
)}
|
||||
</header>
|
||||
{conv.membership === "group" && settingsOpen && (
|
||||
<GroupSettingsModal conv={conv} directory={directory} onClose={() => setSettingsOpen(false)} onError={onError} />
|
||||
)}
|
||||
|
||||
<div style={{ flex: 1, overflowY: "auto", padding: 18, display: "flex", flexDirection: "column", gap: 10, background: "var(--bg)" }}>
|
||||
{t.loading && t.messages.length === 0 && <div style={{ margin: "auto", color: "var(--muted)" }}>Loading messages…</div>}
|
||||
{!t.loading && t.messages.length === 0 && <div style={{ margin: "auto", color: "var(--muted)" }}>No messages yet — say hello 👋</div>}
|
||||
{t.messages.map((msg) => (
|
||||
<MessageBubble
|
||||
key={msg.id} msg={msg}
|
||||
parent={msg.parentInteractionId ? byId[msg.parentInteractionId] : undefined}
|
||||
seen={msg.id === lastMineId && t.seenIds.has(msg.id)}
|
||||
showStatus={msg.id === lastMineId}
|
||||
flash={flashId === msg.id}
|
||||
registerRef={(el) => { if (el) msgRefs.current.set(msg.id, el); else msgRefs.current.delete(msg.id); }}
|
||||
onReact={(emoji) => t.react(msg.id, emoji)}
|
||||
onReply={() => startReply(msg)}
|
||||
onQuoteClick={jumpTo}
|
||||
/>
|
||||
))}
|
||||
<div ref={endRef} />
|
||||
</div>
|
||||
|
||||
<div style={{ minHeight: 18, padding: "0 18px", color: "var(--muted)", fontSize: 12, fontStyle: "italic" }}>{typingLabel}</div>
|
||||
|
||||
{replyTo && (
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 10, margin: "0 14px", padding: "8px 12px", borderRadius: 10, background: "var(--panel-2)", borderLeft: "3px solid var(--orange)" }}>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ fontSize: 11, color: "var(--orange)", fontWeight: 600 }}>Replying to {replyTo.mine ? "yourself" : nameOf(replyTo.senderId ?? "")}</div>
|
||||
<div style={{ fontSize: 12.5, color: "var(--muted)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{replyTo.text}</div>
|
||||
</div>
|
||||
<button onClick={() => setReplyTo(null)} style={{ background: "none", border: "none", color: "var(--muted)", cursor: "pointer", fontSize: 16 }} aria-label="Cancel reply">×</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{staged && (
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 8, margin: "0 14px", padding: "8px 12px", borderRadius: 10, background: "var(--panel-2)", border: "1px solid var(--border)" }}>
|
||||
<Icon name={isImage(staged.mimeType) ? "image" : "file"} size={16} />
|
||||
<span style={{ flex: 1, minWidth: 0, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontSize: 13 }}>{staged.filename}</span>
|
||||
<span style={{ color: "var(--muted)", fontSize: 12 }}>{fmtBytes(staged.sizeBytes)}</span>
|
||||
<button onClick={() => setStaged(null)} style={{ background: "none", border: "none", color: "var(--muted)", cursor: "pointer", fontSize: 16 }} aria-label="Remove attachment">×</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<footer style={{ display: "flex", gap: 8, padding: 14, borderTop: "1px solid var(--border)", alignItems: "center" }}>
|
||||
<input ref={fileRef} type="file" hidden onChange={(e) => void onPickFile(e.target.files?.[0])} />
|
||||
<button onClick={() => fileRef.current?.click()} disabled={uploading} title="Attach a file" style={{ ...actionBtnStyle, width: 38, height: 38, flexShrink: 0, opacity: uploading ? 0.5 : 1 }}>
|
||||
{uploading ? "…" : "📎"}
|
||||
</button>
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={draft} onChange={(e) => onDraftChange(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); void submit(); } }}
|
||||
placeholder="Type a message…" style={inputStyle}
|
||||
/>
|
||||
<Btn icon="send" onClick={() => void submit()} disabled={sending || (!draft.trim() && !staged)}>Send</Btn>
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function MessageBubble({
|
||||
msg, parent, seen, showStatus, flash, registerRef, onReact, onReply, onQuoteClick,
|
||||
}: {
|
||||
msg: UiMessage; parent?: UiMessage; seen: boolean; showStatus: boolean; flash?: boolean;
|
||||
registerRef?: (el: HTMLElement | null) => void;
|
||||
onReact: (emoji: string) => void; onReply: () => void; onQuoteClick?: (id: string) => void;
|
||||
}) {
|
||||
const [hover, setHover] = useState(false);
|
||||
const [picker, setPicker] = useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={registerRef}
|
||||
onMouseEnter={() => setHover(true)}
|
||||
onMouseLeave={() => { setHover(false); setPicker(false); }}
|
||||
style={{
|
||||
alignSelf: msg.mine ? "flex-end" : "flex-start", maxWidth: "72%", display: "flex", flexDirection: "column",
|
||||
alignItems: msg.mine ? "flex-end" : "flex-start", position: "relative",
|
||||
borderRadius: 14, padding: 2, transition: "background 0.4s",
|
||||
background: flash ? "rgba(253,169,19,0.22)" : "transparent",
|
||||
}}
|
||||
>
|
||||
{parent && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => parent.id && onQuoteClick?.(parent.id)}
|
||||
title="Go to message"
|
||||
style={{ maxWidth: "100%", padding: "4px 10px", marginBottom: 3, borderRadius: 8, background: "var(--panel-2)", borderLeft: "3px solid var(--orange)", border: "none", borderLeftWidth: 3, fontSize: 12, color: "var(--muted)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", cursor: "pointer", textAlign: "left" }}
|
||||
>
|
||||
<span style={{ opacity: 0.8 }}>↩ {parent.text}</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 6, flexDirection: msg.mine ? "row-reverse" : "row" }}>
|
||||
{(msg.text || !msg.attachment) && (
|
||||
<div style={{
|
||||
background: msg.mine ? "var(--grad-brand)" : "var(--panel)", color: msg.mine ? "#fff" : "var(--text)",
|
||||
padding: "8px 12px", borderRadius: 14,
|
||||
borderBottomRightRadius: msg.mine ? 4 : 14, borderBottomLeftRadius: msg.mine ? 14 : 4,
|
||||
border: msg.mine ? "none" : "1px solid var(--border)",
|
||||
whiteSpace: "pre-wrap", wordBreak: "break-word", fontSize: 14,
|
||||
}}>
|
||||
{msg.text}
|
||||
</div>
|
||||
)}
|
||||
{hover && (
|
||||
<div style={{ display: "flex", gap: 2, position: "relative" }}>
|
||||
<button onClick={() => setPicker((p) => !p)} title="React" style={actionBtnStyle}>🙂</button>
|
||||
<button onClick={onReply} title="Reply" style={actionBtnStyle}>↩</button>
|
||||
{picker && (
|
||||
<div style={{ position: "absolute", bottom: "100%", [msg.mine ? "right" : "left"]: 0, marginBottom: 4, display: "flex", gap: 2, padding: 4, borderRadius: 999, background: "var(--panel)", border: "1px solid var(--border)", boxShadow: "0 6px 20px rgba(0,0,0,0.35)", zIndex: 5 }}>
|
||||
{REACTION_EMOJIS.map((e) => (
|
||||
<button key={e} onClick={() => { onReact(e); setPicker(false); }} style={{ ...actionBtnStyle, fontSize: 16 }}>{e}</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{msg.attachment && (
|
||||
<div style={{ marginTop: 4, display: "flex", justifyContent: msg.mine ? "flex-end" : "flex-start" }}>
|
||||
<AttachmentView att={msg.attachment} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{msg.reactions && msg.reactions.length > 0 && (
|
||||
<div style={{ display: "flex", gap: 4, marginTop: 3, flexWrap: "wrap" }}>
|
||||
{msg.reactions.map((r) => (
|
||||
<button
|
||||
key={r.emoji} onClick={() => onReact(r.emoji)}
|
||||
style={{
|
||||
display: "inline-flex", alignItems: "center", gap: 3, padding: "1px 7px", borderRadius: 999, fontSize: 12, cursor: "pointer",
|
||||
background: r.mine ? "rgba(253,169,19,0.18)" : "var(--panel-2)",
|
||||
border: `1px solid ${r.mine ? "var(--orange)" : "var(--border)"}`, color: "var(--text)",
|
||||
}}
|
||||
>
|
||||
<span>{r.emoji}</span><span style={{ color: "var(--muted)" }}>{r.count}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ fontSize: 10.5, color: "var(--muted)", marginTop: 2 }}>
|
||||
{timeOf(msg.at)}{showStatus && msg.mine ? ` · ${seen ? "Seen" : "Sent"}` : ""}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const actionBtnStyle: CSSProperties = {
|
||||
background: "var(--panel-2)", border: "1px solid var(--border)", borderRadius: 8,
|
||||
width: 26, height: 26, display: "grid", placeItems: "center", cursor: "pointer", fontSize: 13, color: "var(--text)", padding: 0,
|
||||
};
|
||||
|
||||
function NewChatModal({
|
||||
open, onClose, directory, onCreate,
|
||||
}: {
|
||||
open: boolean; onClose: () => void; directory: UiPerson[];
|
||||
onCreate: (ids: string[], opts: { membership: Membership; subject?: string }) => Promise<void>;
|
||||
}) {
|
||||
const [picked, setPicked] = useState<string[]>([]);
|
||||
const [subject, setSubject] = useState("");
|
||||
const [q, setQ] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
useEffect(() => { if (!open) { setPicked([]); setSubject(""); setQ(""); setBusy(false); } }, [open]);
|
||||
|
||||
const membership: Membership = picked.length > 1 ? "group" : "dm";
|
||||
const filtered = directory.filter((p) => p.name.toLowerCase().includes(q.trim().toLowerCase()));
|
||||
const toggle = (id: string) => setPicked((l) => (l.includes(id) ? l.filter((x) => x !== id) : [...l, id]));
|
||||
|
||||
async function create() {
|
||||
if (!picked.length || busy) return;
|
||||
setBusy(true);
|
||||
await onCreate(picked, { membership, ...(membership === "group" && subject.trim() ? { subject: subject.trim() } : {}) });
|
||||
setBusy(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open} onClose={onClose} title="New conversation"
|
||||
subtitle={membership === "group" ? "Group chat" : "Direct message"} icon="send"
|
||||
footer={<>
|
||||
<Btn variant="ghost" onClick={onClose}>Cancel</Btn>
|
||||
<Btn icon="send" onClick={() => void create()} disabled={!picked.length || busy}>{busy ? "Starting…" : "Start chat"}</Btn>
|
||||
</>}
|
||||
>
|
||||
<input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search people…" style={{ ...inputStyle, marginBottom: 10 }} />
|
||||
{membership === "group" && (
|
||||
<Field label="Group name (optional)">
|
||||
<input value={subject} onChange={(e) => setSubject(e.target.value)} placeholder="e.g. Storm response" style={inputStyle} />
|
||||
</Field>
|
||||
)}
|
||||
<div style={{ maxHeight: 320, overflowY: "auto", marginTop: 8, display: "flex", flexDirection: "column", gap: 2 }}>
|
||||
{filtered.length === 0 && <div style={{ color: "var(--muted)", padding: 10 }}>No people found.</div>}
|
||||
{filtered.map((p) => (
|
||||
<label key={p.id} style={{
|
||||
display: "flex", alignItems: "center", gap: 10, padding: "8px 10px", borderRadius: 10, cursor: "pointer",
|
||||
background: picked.includes(p.id) ? "var(--panel-2)" : "transparent",
|
||||
}}>
|
||||
<input type="checkbox" checked={picked.includes(p.id)} onChange={() => toggle(p.id)} />
|
||||
<Avatar initials={initialsOf(p.name)} size={30} gradient={p.kind === "customer" ? CUSTOMER_GRAD : undefined} />
|
||||
<span style={{ flex: 1 }}>{p.name}</span>
|
||||
<Pill tone="muted">{p.kind}</Pill>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
/** Group settings: rename, member list with roles, add/remove — admin-gated (IIOS/OPA re-enforces). */
|
||||
function GroupSettingsModal({ conv, directory, onClose, onError }: {
|
||||
conv: UiConversation; directory: UiPerson[]; onClose: () => void; onError: (m: string) => void;
|
||||
}) {
|
||||
const g = useGroupSettings(conv.threadId);
|
||||
const [name, setName] = useState(conv.subject ?? "");
|
||||
const [savingName, setSavingName] = useState(false);
|
||||
const [q, setQ] = useState("");
|
||||
const [pendingId, setPendingId] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => { setName(conv.subject ?? ""); }, [conv.subject]);
|
||||
|
||||
const memberIds = useMemo(() => new Set(g.members.map((m) => m.userId)), [g.members]);
|
||||
const nameChanged = name.trim() && name.trim() !== (conv.subject ?? "").trim();
|
||||
const addable = directory.filter((p) => !memberIds.has(p.id) && p.name.toLowerCase().includes(q.trim().toLowerCase()));
|
||||
|
||||
async function saveName() {
|
||||
if (!nameChanged || savingName) return;
|
||||
setSavingName(true);
|
||||
try { await g.rename(name.trim()); }
|
||||
catch (e) { onError((e as Error).message); }
|
||||
finally { setSavingName(false); }
|
||||
}
|
||||
async function add(userId: string) {
|
||||
setPendingId(userId);
|
||||
try { await g.addMember(userId); }
|
||||
catch (e) { onError((e as Error).message); }
|
||||
finally { setPendingId(null); }
|
||||
}
|
||||
async function remove(userId: string) {
|
||||
setPendingId(userId);
|
||||
try { await g.removeMember(userId); }
|
||||
catch (e) { onError((e as Error).message); }
|
||||
finally { setPendingId(null); }
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open onClose={onClose} title="Group settings" subtitle={conv.title} icon="settings"
|
||||
footer={<Btn variant="ghost" onClick={onClose}>Done</Btn>}
|
||||
>
|
||||
<Field label="Group name">
|
||||
<div style={{ display: "flex", gap: 8 }}>
|
||||
<input value={name} onChange={(e) => setName(e.target.value)} disabled={!g.isAdmin}
|
||||
placeholder="Group name" style={{ ...inputStyle, opacity: g.isAdmin ? 1 : 0.6 }} />
|
||||
{g.isAdmin && <Btn onClick={() => void saveName()} disabled={!nameChanged || savingName}>{savingName ? "…" : "Save"}</Btn>}
|
||||
</div>
|
||||
{!g.isAdmin && <div style={{ color: "var(--muted)", fontSize: 12, marginTop: 4 }}>Only a group admin can rename the group.</div>}
|
||||
</Field>
|
||||
|
||||
<Field label={`Members (${g.members.length})`}>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 2, maxHeight: 200, overflowY: "auto" }}>
|
||||
{g.loading && g.members.length === 0 && <div style={{ color: "var(--muted)", padding: 8 }}>Loading…</div>}
|
||||
{g.members.map((mem: UiMember) => (
|
||||
<div key={mem.userId} style={{ display: "flex", alignItems: "center", gap: 10, padding: "7px 10px", borderRadius: 10 }}>
|
||||
<Avatar initials={initialsOf(mem.displayName)} size={28} gradient={GROUP_GRAD} />
|
||||
<span style={{ flex: 1 }}>{mem.displayName}</span>
|
||||
{mem.role === "ADMIN" && <Pill tone="purple">admin</Pill>}
|
||||
{g.isAdmin && mem.role !== "ADMIN" && (
|
||||
<button onClick={() => void remove(mem.userId)} disabled={pendingId === mem.userId} title="Remove"
|
||||
style={{ ...actionBtnStyle, width: 28, height: 28 }}><Icon name="trash" size={15} /></button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Field>
|
||||
|
||||
{g.isAdmin && (
|
||||
<Field label="Add member">
|
||||
<input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search people…" style={{ ...inputStyle, marginBottom: 8 }} />
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 2, maxHeight: 180, overflowY: "auto" }}>
|
||||
{addable.length === 0 && <div style={{ color: "var(--muted)", padding: 8 }}>No one to add.</div>}
|
||||
{addable.map((p) => (
|
||||
<button key={p.id} onClick={() => void add(p.id)} disabled={pendingId === p.id}
|
||||
style={{ display: "flex", alignItems: "center", gap: 10, padding: "7px 10px", borderRadius: 10, cursor: "pointer", background: "transparent", border: "none", color: "var(--text)", textAlign: "left" }}>
|
||||
<Avatar initials={initialsOf(p.name)} size={28} gradient={p.kind === "customer" ? CUSTOMER_GRAD : undefined} />
|
||||
<span style={{ flex: 1 }}>{p.name}</span>
|
||||
<Icon name="plus" size={16} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</Field>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user