Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 | 4x 11x 2x 9x 11x 11x 10x 10x 10x 9x 9x 84x 84x 84x 84x 84x 84x 84x 2x 2x 2x 2x 1x 84x 6x 5x 5x | import { useCallback, useState } from "react";
import { MessageCircle, Send } from "lucide-react";
import { useLeadMessages, useSendLeadMessage } from "../../hooks/queries/useCrmQueries";
import { getErrorMessage } from "../../lib/api";
import { cn } from "../../lib/utils";
import { Button } from "../ui/button";
const MAX_MESSAGE_LENGTH = 2000;
// ─── Helpers ──────────────────────────────────────────────────────────────────
/**
* Message.createdAt may arrive as an ISO string or a numeric epoch. Numeric
* epochs in this codebase are stored in seconds, not milliseconds — treat
* anything below the ms/sec crossover threshold as seconds.
*/
function toDate(value: string | number): Date {
if (typeof value === "number") {
return new Date(value < 1_000_000_000_000 ? value * 1000 : value);
}
return new Date(value);
}
function formatMessageTime(value: string | number): string {
const date = toDate(value);
if (Number.isNaN(date.getTime())) return "";
const time = date.toLocaleTimeString("en-IN", {
hour: "numeric",
minute: "2-digit",
});
const isToday = date.toDateString() === new Date().toDateString();
if (isToday) return time;
const day = date.toLocaleDateString("en-IN", {
day: "numeric",
month: "short",
});
return `${day}, ${time}`;
}
// ─── Component ───────────────────────────────────────────────────────────────
type LeadMessagesProps = {
leadId: number;
proId: string;
/** The inquiry this lead originated from, if any. No inquiry = no on-platform thread. */
inquiryId: number | null | undefined;
};
export function LeadMessages({ leadId, proId, inquiryId }: LeadMessagesProps) {
const [body, setBody] = useState("");
const { data, isLoading } = useLeadMessages(proId, String(leadId));
const sendMessage = useSendLeadMessage(proId, String(leadId));
const messages = data?.messages ?? [];
const timeline = data?.timeline ?? [];
const hasInquiryThread = inquiryId != null;
const handleSend = useCallback(
(e: React.FormEvent) => {
e.preventDefault();
const trimmed = body.trim();
Iif (!trimmed || sendMessage.isPending) return;
sendMessage.mutate(trimmed, {
onSuccess: () => setBody(""),
});
},
[body, sendMessage],
);
return (
<div className="rounded-lg border border-border-default bg-background-elevated p-5">
<h3 className="text-sm font-semibold text-foreground-default mb-4 flex items-center gap-2">
<MessageCircle className="h-4 w-4 text-foreground-subtle" />
Messages
</h3>
{isLoading ? (
<div className="flex items-center justify-center py-8">
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary-500" />
</div>
) : messages.length === 0 ? (
<p className="text-sm text-foreground-subtle text-center py-6">
No messages yet — reply here to keep the conversation on Interioring.
</p>
) : (
<div className="space-y-3 max-h-96 overflow-y-auto mb-4 pr-1">
{messages.map((message) => (
<div
key={message.id}
className={cn(
"flex",
message.senderType === "pro" ? "justify-end" : "justify-start",
)}
>
<div
className={cn(
"max-w-[80%] rounded-lg px-3 py-2",
message.senderType === "pro"
? "bg-primary-500 text-foreground-inverse"
: "bg-background-muted text-foreground-default",
)}
>
<p className="text-sm whitespace-pre-wrap break-words">
{message.body}
</p>
<span
className={cn(
"block text-xs mt-1",
message.senderType === "pro"
? "text-foreground-inverse/70"
: "text-foreground-subtle",
)}
>
{formatMessageTime(message.createdAt)}
</span>
</div>
</div>
))}
</div>
)}
{hasInquiryThread ? (
<form onSubmit={handleSend} className="flex items-end gap-2">
<textarea
value={body}
onChange={(e) => setBody(e.target.value)}
placeholder="Reply to this lead..."
rows={2}
maxLength={MAX_MESSAGE_LENGTH}
disabled={sendMessage.isPending}
className="flex-1 resize-none rounded-md border border-border-default bg-background-elevated px-3 py-2 text-sm text-foreground-default placeholder:text-foreground-subtle focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:opacity-60"
/>
<Button
type="submit"
size="sm"
isLoading={sendMessage.isPending}
disabled={!body.trim() || sendMessage.isPending}
>
<Send className="h-4 w-4" />
Send
</Button>
</form>
) : (
<p className="text-xs text-foreground-subtle">
This lead has no on-platform inquiry thread.
</p>
)}
{sendMessage.isError && (
<p className="text-xs text-error mt-2">
{getErrorMessage(sendMessage.error)}
</p>
)}
{/* Communication History (spec: communication_history_log — pro-facing
log entries rendered in the lead card History section). Read-only,
pro-visible events only (the API filters visibility). */}
{timeline.length > 0 && (
<div className="mt-5 border-t border-border-default pt-4">
<h4 className="text-xs font-semibold uppercase tracking-wide text-foreground-subtle mb-3">
History
</h4>
<ol className="space-y-2">
{timeline.map((entry) => (
<li key={entry.id} className="flex items-baseline gap-2 text-xs">
<span className="h-1.5 w-1.5 shrink-0 translate-y-[-1px] rounded-full bg-primary-400" />
<span className="text-foreground-default">{entry.label}</span>
<span className="ml-auto shrink-0 text-foreground-subtle">
{formatMessageTime(entry.createdAt)}
</span>
</li>
))}
</ol>
</div>
)}
</div>
);
}
|