import React, { useEffect, useState } from "react";
import Linkified from "@/shared/Linkified";
import axios from "axios";
import Icon from "./Icon";
import { fmtBytes, fmtHKD, fmtTime, fmtWhen } from "./format";
import { MESSAGE_CHANNEL_LABEL } from "@/shared/status";
// ONE message from a vendor conversation, drawn the same way wherever it appears.
//
// It used to live inside ChatTab, which meant the room could draw a reschedule card and the guided
// chat could not. That was not a cosmetic difference: the two surfaces show the SAME room, so a
// customer sitting in the guided chat simply never saw a question their vendor had asked, and the
// booking-status announcements and the vendor's own Inbox replies were invisible to them too. The
// renderer returned null for anything it did not recognise, so the message did not merely look
// wrong — it was not there. (Arfu, 02/09/2026)
//
// `mine` is a PROP rather than something read off the message, because the two surfaces disagree
// about the column: /thread/get flips direction into the reader's point of view (their own messages
// become "outbound"), while a flow run reports the raw engine value, where "outbound" means the bot
// spoke. Reading `m.direction` here would put every message on the correct side of one surface and
// the wrong side of the other.
// `data-mid` on every root: a notification names the MESSAGE it is about, and the only way to take
// somebody to it is to find it in the DOM. (Arfu, 02/09/2026)
export default function RoomMessage({ message: m, messages = [], mine = false, onPickReceipt, onPickChoice, onPickReschedule, onAnswerFlow }) {
const isOut = !!mine;
if (m.kind === "image") {
return (
);
}
if (m.kind === "booking_confirmed") {
return (
Booking confirmed
Service{m.payload?.service}
When{fmtWhen(m.payload?.when)}
{m.payload?.price ?
Price{fmtHKD(m.payload.price)}
: null}
{/* The STORED reference. This used to render BK-{booking_id}, so the
customer saw one reference and the org searched for another. */}
{m.payload?.booking_ref ?
Reference{m.payload.booking_ref}
: null}
{fmtTime(m.created_at)}
);
}
// The engagement's status moved (T14) — confirmed, completed, cancelled. Arrives
// through the same idempotent announcement path as everything else that crosses
// from MySQL into the transcript.
if (m.kind === "booking_status") {
const cancelled = /cancel/i.test(m.payload?.status || "");
return (
{m.payload?.status}
Service{m.payload?.service}
{m.payload?.when ?
When{fmtWhen(m.payload.when)}
: null}
{m.payload?.booking_ref ?
Reference{m.payload.booking_ref}
: null}
{fmtTime(m.created_at)}
);
}
// A scheduled meeting reminding itself (T11). No flow produced it, so it arrives
// in the room transcript rather than in FlowChat.
if (m.kind === "appointment_reminder") {
return (
);
}
if (m.kind === "reschedule_confirmed") {
return (
Rescheduled
From{fmtWhen(m.payload?.old_when)}
To{fmtWhen(m.payload?.new_when)}
{m.payload?.booking_ref ?
Booking{m.payload.booking_ref}
: null}
{fmtTime(m.created_at)}
);
}
// A CHATFLOW'S OWN QUESTION, answerable where it is asked (17/09/2026). Same card as the
// org's ad-hoc prompt below, but the answer goes to the RUN rather than into the room:
// picking an option advances the flow. Answered when a `user_input` for the same node
// follows it, which is what the engine writes back.
if (m.kind === "choice") {
const answered = messages.find(o => o.kind === "user_input" && o.node_id === m.node_id);
const options = m.payload?.options || [];
return (
: null}
{atts.map((a, ai) => {
const gap = (ai > 0 || m.payload?.text) ? 6 : 0;
// WITHDRAWN IS NOT DELETED. The vendor took this document back, so the
// message stays — a conversation is a record — and the card stops being
// a door: it was still offering a link, and the guard behind it answers
// 404 to a withdrawn document. (Arfu, 23/09/2026)
if (a.withdrawn) {
return (
);
})}
{/* WHERE THIS LINE WENT (FP-T4, A8). Drawn only when it is NOT the app: a marker on
every in-app message would be noise on the ordinary case, and the point is that
one conversation holds both. */}
{/* A request sent before the payload carried service_id cannot be answered here —
saying so beats offering times the vendor never published. */}
{!serviceId ? (
Reply in the chat with a time that suits you.
) : loading ? (
Loading available times…
) : failed ? (
// NOT "no open times": we do not know that. Saying so would tell the customer
// something about the vendor that a dropped request cannot support.
Could not load times just now. Pull to refresh, or reply here and your vendor can arrange one.
) : slots.length === 0 ? (
No open times right now — reply here and your vendor can arrange one.
);
}
// Open times come from the server: GET /availability/list, the same source the flow's
// slot_picker reads, computed from the resource's weekly windows, the service duration and what
// is already booked. It used to be buildSlots() — six times hardcoded in this file, identical for
// every service, unrelated to when the vendor actually works, and bookable.
function useOpenSlots(serviceId) {
// `failed` is separate from an empty list on purpose. Every error used to land in the same
// `slots: []`, so a request that never arrived — signed out, offline, a 500 — read to the
// customer as "your vendor has no free times", which is a different and much worse statement.
// (Arfu, 02/09/2026)
const [state, setState] = useState({ loading: true, slots: [], failed: false });
useEffect(() => {
if (!serviceId) { setState({ loading: false, slots: [], failed: false }); return; }
let live = true;
setState({ loading: true, slots: [], failed: false });
axios.get("/availability/list", { params: { service_id: serviceId } })
// The endpoint answers with the { data, message, status } envelope, so the slots are at
// .data.data.slots. This read .data.slots — the envelope itself — which is undefined,
// so EVERY reschedule card said "No open times right now" no matter how free the vendor
// was. It went unnoticed because the flow's own picker goes through chat/client.js,
// which unwraps correctly; only this copy did not. The `?? resp.data` keeps a bare
// response working too. (Arfu, 02/09/2026)
.then(({ data: body }) => live && setState({
loading: false,
failed: false,
// The picker speaks in ISO strings; the resource the slot belongs to rides along
// for whoever needs it.
slots: ((body?.data ?? body)?.slots || []).map(slot => ({
id: `${slot.resource_id}-${slot.starts_at}`,
iso: slot.starts_at,
resourceId: slot.resource_id,
})),
}))
.catch(() => live && setState({ loading: false, slots: [], failed: true }));
return () => { live = false; };
}, [serviceId]);
return state;
}