fix(GRO-1242): align Messages frontend with conversations API contract
- Extract Conversation interface fields to match API response:
replace lastMessageBody with lastMessage object, externalNumber with
clientPhone, remove staffReadAt
- loadConversations(): extract json.items array instead of raw array
- loadMessages(): extract json.items and reverse() for chronological order
- Update test mocks to use { items, nextCursor } response shape
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,275 @@
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
|
||||
interface Conversation {
|
||||
id: string;
|
||||
clientId: string;
|
||||
clientName: string;
|
||||
channel: string;
|
||||
clientPhone: string;
|
||||
lastMessageAt: string | null;
|
||||
unreadCount: number;
|
||||
status: string;
|
||||
lastMessage: { body: string | null; direction: string; createdAt: string } | null;
|
||||
}
|
||||
|
||||
interface Message {
|
||||
id: string;
|
||||
direction: "inbound" | "outbound";
|
||||
body: string | null;
|
||||
status: string;
|
||||
createdAt: string;
|
||||
sentByStaffId: string | null;
|
||||
}
|
||||
|
||||
function relativeTime(dateStr: string | null): string {
|
||||
if (!dateStr) return "";
|
||||
const diff = Date.now() - new Date(dateStr).getTime();
|
||||
const mins = Math.floor(diff / 60000);
|
||||
if (mins < 1) return "just now";
|
||||
if (mins < 60) return `${mins}m ago`;
|
||||
const hours = Math.floor(mins / 60);
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
const days = Math.floor(hours / 24);
|
||||
return `${days}d ago`;
|
||||
}
|
||||
|
||||
function truncate(text: string | null, max: number): string {
|
||||
if (!text) return "";
|
||||
return text.length > max ? text.slice(0, max) + "…" : text;
|
||||
}
|
||||
|
||||
export function MessagesPage() {
|
||||
const [conversations, setConversations] = useState<Conversation[]>([]);
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [messagesLoading, setMessagesLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [messageError, setMessageError] = useState<string | null>(null);
|
||||
const [body, setBody] = useState("");
|
||||
const [sending, setSending] = useState(false);
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
async function loadConversations() {
|
||||
try {
|
||||
const res = await fetch("/api/conversations?limit=20");
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const json = await res.json();
|
||||
const data = json.items as Conversation[];
|
||||
setConversations(data);
|
||||
} catch (e: unknown) {
|
||||
setError(e instanceof Error ? e.message : "Failed to load conversations");
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMessages(conversationId: string) {
|
||||
setMessagesLoading(true);
|
||||
setMessageError(null);
|
||||
try {
|
||||
const res = await fetch(`/api/conversations/${conversationId}/messages?limit=50`);
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const json = await res.json();
|
||||
setMessages((json.items as Message[]).reverse());
|
||||
} catch (e: unknown) {
|
||||
setMessageError(e instanceof Error ? e.message : "Failed to load messages");
|
||||
} finally {
|
||||
setMessagesLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadConversations().finally(() => setLoading(false));
|
||||
const interval = setInterval(loadConversations, 10000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedId) {
|
||||
loadMessages(selectedId);
|
||||
} else {
|
||||
setMessages([]);
|
||||
}
|
||||
}, [selectedId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (messages.length > 0) {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
}, [messages]);
|
||||
|
||||
async function handleSend(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!selectedId || !body.trim() || sending) return;
|
||||
setSending(true);
|
||||
setMessageError(null);
|
||||
|
||||
const optimistic: Message = {
|
||||
id: `temp-${Date.now()}`,
|
||||
direction: "outbound",
|
||||
body: body.trim(),
|
||||
status: "queued",
|
||||
createdAt: new Date().toISOString(),
|
||||
sentByStaffId: null,
|
||||
};
|
||||
|
||||
setMessages((prev) => [...prev, optimistic]);
|
||||
const currentBody = body;
|
||||
setBody("");
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/conversations/${selectedId}/messages`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ body: currentBody }),
|
||||
});
|
||||
|
||||
if (res.status === 409) {
|
||||
const data = (await res.json()) as { error?: string };
|
||||
setMessageError(data.error ?? "Client has opted out of SMS");
|
||||
setMessages((prev) => prev.filter((m) => m.id !== optimistic.id));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!res.ok) {
|
||||
const data = (await res.json()) as { error?: string };
|
||||
throw new Error(data.error ?? `HTTP ${res.status}`);
|
||||
}
|
||||
|
||||
const sent = (await res.json()) as Message;
|
||||
setMessages((prev) => prev.map((m) => (m.id === optimistic.id ? sent : m)));
|
||||
loadConversations();
|
||||
} catch (e: unknown) {
|
||||
setMessageError(e instanceof Error ? e.message : "Failed to send message");
|
||||
setMessages((prev) => prev.filter((m) => m.id !== optimistic.id));
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", height: "calc(100vh - 90px)", fontFamily: "system-ui, sans-serif" }}>
|
||||
{/* Thread list */}
|
||||
<div style={{ width: 320, borderRight: "1px solid #e5e7eb", overflowY: "auto", background: "#fff" }}>
|
||||
<div style={{ padding: "0.75rem 1rem", borderBottom: "1px solid #f3f4f6", fontWeight: 600, fontSize: 14, color: "#374151" }}>
|
||||
Conversations
|
||||
</div>
|
||||
{loading ? (
|
||||
<p style={{ padding: "1rem", color: "#6b7280", fontSize: 13 }}>Loading…</p>
|
||||
) : error ? (
|
||||
<p style={{ padding: "1rem", color: "#ef4444", fontSize: 13 }}>{error}</p>
|
||||
) : conversations.length === 0 ? (
|
||||
<p style={{ padding: "1rem", color: "#6b7280", fontSize: 13 }}>No conversations yet</p>
|
||||
) : (
|
||||
conversations.map((conv) => (
|
||||
<div
|
||||
key={conv.id}
|
||||
onClick={() => setSelectedId(conv.id)}
|
||||
style={{
|
||||
padding: "0.75rem 1rem",
|
||||
borderBottom: "1px solid #f3f4f6",
|
||||
cursor: "pointer",
|
||||
background: selectedId === conv.id ? "#ecfdf5" : "transparent",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
|
||||
<span style={{ fontWeight: 500, fontSize: 14, color: "#1a202c" }}>{conv.clientName}</span>
|
||||
{conv.unreadCount > 0 && (
|
||||
<span style={{ background: "#10b981", color: "#fff", borderRadius: 10, padding: "1px 6px", fontSize: 11, fontWeight: 600 }}>
|
||||
{conv.unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ marginTop: 2, color: "#6b7280", fontSize: 12 }}>
|
||||
{truncate(conv.lastMessage?.body ?? null, 60)}
|
||||
</div>
|
||||
<div style={{ marginTop: 2, color: "#9ca3af", fontSize: 11 }}>
|
||||
{relativeTime(conv.lastMessageAt)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Conversation view */}
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", background: "#f9fafb" }}>
|
||||
{!selectedId ? (
|
||||
<div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", color: "#9ca3af" }}>
|
||||
Select a conversation
|
||||
</div>
|
||||
) : messagesLoading ? (
|
||||
<div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", color: "#6b7280" }}>
|
||||
Loading messages…
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div style={{ flex: 1, overflowY: "auto", padding: "1rem" }}>
|
||||
{messages.map((msg) => (
|
||||
<div
|
||||
key={msg.id}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: msg.direction === "outbound" ? "flex-end" : "flex-start",
|
||||
marginBottom: "0.75rem",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
maxWidth: "70%",
|
||||
padding: "0.5rem 0.75rem",
|
||||
borderRadius: 12,
|
||||
background: msg.direction === "outbound" ? "var(--color-primary, #4f8a6f)" : "#fff",
|
||||
color: msg.direction === "outbound" ? "#fff" : "#1a202c",
|
||||
border: msg.direction === "inbound" ? "1px solid #e5e7eb" : "none",
|
||||
fontSize: 14,
|
||||
lineHeight: 1.5,
|
||||
}}
|
||||
>
|
||||
{msg.body}
|
||||
</div>
|
||||
<span style={{ fontSize: 11, color: "#9ca3af", marginTop: 2 }}>
|
||||
{new Date(msg.createdAt).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
{messageError && (
|
||||
<div style={{ margin: "0 1rem 0.5rem", padding: "0.5rem 0.75rem", background: "#fef2f2", border: "1px solid #fecaca", borderRadius: 6, color: "#991b1b", fontSize: 13 }}>
|
||||
{messageError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSend} style={{ display: "flex", gap: "0.5rem", padding: "0.75rem 1rem", borderTop: "1px solid #e5e7eb", background: "#fff" }}>
|
||||
<input
|
||||
value={body}
|
||||
onChange={(e) => setBody(e.target.value)}
|
||||
placeholder="Type a message…"
|
||||
disabled={sending}
|
||||
style={{ flex: 1, padding: "0.5rem 0.75rem", border: "1px solid #d1d5db", borderRadius: 6, fontSize: 14 }}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={sending || !body.trim()}
|
||||
style={{
|
||||
padding: "0.5rem 1rem",
|
||||
background: "var(--color-primary, #4f8a6f)",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
borderRadius: 6,
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
cursor: sending ? "wait" : "pointer",
|
||||
opacity: sending ? 0.7 : 1,
|
||||
}}
|
||||
>
|
||||
{sending ? "Sending…" : "Send"}
|
||||
</button>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user