@visns-studio/visns-components 6.6.3 → 6.15.0

package/src/components/sms/SmsThreadPanel.jsx

@@ -0,0 +1,1184 @@
+import React, {
+    useCallback,
+    useEffect,
+    useLayoutEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import {
+    Archive,
+    ArchiveRestore,
+    ArrowLeft,
+    ChevronUp,
+    ExternalLink,
+    FileText,
+    Link2,
+    Loader2,
+    MessageSquarePlus,
+    Send,
+    Unplug,
+    User,
+    X,
+} from 'lucide-react';
+
+import CustomFetch from '../Fetch';
+import StandardModal from '../generic/StandardModal';
+import styles from '../styles/Sms.module.scss';
+import { resolveSmsEndpoints } from './smsEndpoints';
+import useSmsLive, { defaultChannelFor } from './useSmsLive';
+import useDebouncedValue from '../vault/useDebouncedValue';
+import {
+    MAX_SEGMENTS,
+    clockTime,
+    composerPlaceholder,
+    counterLabel,
+    describeTransport,
+    fillTemplate,
+    groupMessagesByDay,
+    initialsFor,
+    isHeldTransport,
+    markRuns,
+    nextPlaceholder,
+    normaliseNumberForDisplay,
+    prependMessages,
+    segmentCount,
+    statusLabel,
+    threadDisplayName,
+    threadSubtitle,
+    upsertMessage,
+} from './smsHelpers';
+
+const ENTER_SENDS_KEY = 'visns.sms.enterSends';
+
+/** Read the Enter-sends preference without letting a locked-down browser throw. */
+const readEnterSends = () => {
+    try {
+        return window.localStorage.getItem(ENTER_SENDS_KEY) !== '0';
+    } catch (error) {
+        return true;
+    }
+};
+
+const writeEnterSends = (value) => {
+    try {
+        window.localStorage.setItem(ENTER_SENDS_KEY, value ? '1' : '0');
+    } catch (error) {
+        // A private window, or storage the browser has switched off. The
+        // preference simply does not persist; nothing else changes.
+    }
+};
+
+let temporaryId = 0;
+
+/**
+ * One conversation: header, timeline, composer.
+ *
+ * Split out of SmsInbox so the CRM can drop a client's message history onto
+ * the client page later without the surrounding two-pane furniture — pass
+ * `compact` and it loses the page-level chrome but keeps every behaviour.
+ *
+ * It can run on its own (it fetches its own thread, status and templates, and
+ * subscribes to its own line) or under a parent that already has a live
+ * subscription, in which case the parent passes `subscribe={false}` and feeds
+ * it events. Two subscriptions to one channel is not an error, but it is two
+ * websocket authorisations and two copies of every message to reconcile.
+ */
+const SmsThreadPanel = ({
+    threadId,
+    endpoints,
+    echo = null,
+    channelFor = defaultChannelFor,
+    subscribe = true,
+    // A parent that already holds a live subscription feeds events down
+    // instead: `{seq, payload}`, where `seq` changes on every event so the
+    // effect below fires even when two identical messages arrive.
+    liveEvent = null,
+    // Changing this re-reads the conversation. The inbox bumps it on each
+    // polling tick, so one timer serves both panes.
+    refreshToken = 0,
+    compact = false,
+    showTransportBanner = true,
+    status: statusProp = null,
+    templates: templatesProp = null,
+    // The lines this user can work, purely so a template's `{line}` can be
+    // filled: the thread carries a line_id and nothing else, and looking the
+    // label up is not worth a request of its own.
+    lines = null,
+    canManage = false,
+    clientUrl = (id) => `/clients/${id}`,
+    onThreadChange,
+    onMessage,
+    onBack = null,
+    className = '',
+}) => {
+    const routes = useMemo(() => resolveSmsEndpoints(endpoints), [endpoints]);
+
+    const [thread, setThread] = useState(null);
+    const [messages, setMessages] = useState([]);
+    const [hasMore, setHasMore] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [loadingEarlier, setLoadingEarlier] = useState(false);
+    const [sending, setSending] = useState(false);
+    const [body, setBody] = useState('');
+    const [enterSends, setEnterSends] = useState(readEnterSends);
+
+    const [ownStatus, setOwnStatus] = useState(null);
+    const [ownTemplates, setOwnTemplates] = useState(null);
+    const [templatesOpen, setTemplatesOpen] = useState(false);
+
+    const [linkOpen, setLinkOpen] = useState(false);
+    const [simulateOpen, setSimulateOpen] = useState(false);
+
+    const mountedRef = useRef(true);
+    const timelineRef = useRef(null);
+    const composerRef = useRef(null);
+    const requestRef = useRef(0);
+    // Whether the user is reading the newest messages. A conversation someone
+    // has scrolled up into must not be yanked to the bottom by an arriving
+    // message.
+    const pinnedRef = useRef(true);
+
+    useEffect(
+        () => () => {
+            mountedRef.current = false;
+        },
+        []
+    );
+
+    const status = statusProp ?? ownStatus;
+    const templates = templatesProp ?? ownTemplates;
+    const transport = describeTransport(status);
+    const held = isHeldTransport(status);
+
+    /* -------------------------------------------------------------- loading */
+
+    useEffect(() => {
+        if (statusProp) return;
+
+        CustomFetch(
+            routes.status,
+            'GET',
+            null,
+            (result) => {
+                if (mountedRef.current && result) setOwnStatus(result);
+            },
+            () => {}
+        ).catch(() => {});
+    }, [routes, statusProp]);
+
+    useEffect(() => {
+        if (!threadId) {
+            setThread(null);
+            setMessages([]);
+            setHasMore(false);
+
+            return;
+        }
+
+        const ticket = requestRef.current + 1;
+
+        requestRef.current = ticket;
+        setLoading(true);
+        pinnedRef.current = true;
+
+        // Fetching a thread is what marks it read — the contract says so, and
+        // it is why the inbox does not send a separate /read on selection.
+        CustomFetch(
+            routes.thread(threadId),
+            'GET',
+            { limit: 50 },
+            (result) => {
+                if (!mountedRef.current || requestRef.current !== ticket) return;
+
+                setThread(result?.thread ?? null);
+                setMessages(Array.isArray(result?.messages) ? result.messages : []);
+                setHasMore(Boolean(result?.has_more));
+                setLoading(false);
+
+                if (result?.thread) {
+                    onThreadChange?.({ ...result.thread, unread_count: 0 });
+                }
+            },
+            () => {
+                if (!mountedRef.current || requestRef.current !== ticket) return;
+
+                setLoading(false);
+            }
+        ).catch(() => {
+            if (!mountedRef.current || requestRef.current !== ticket) return;
+
+            setLoading(false);
+        });
+        // `onThreadChange` is deliberately not a dependency: a consumer that
+        // passes an inline arrow would otherwise re-fetch the thread on every
+        // render of the page above it.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [routes, threadId, refreshToken]);
+
+    const loadEarlier = useCallback(() => {
+        if (!threadId || messages.length === 0 || loadingEarlier) return;
+
+        const oldest = messages[0];
+        const node = timelineRef.current;
+        const anchor = node ? node.scrollHeight - node.scrollTop : 0;
+
+        setLoadingEarlier(true);
+
+        CustomFetch(
+            routes.thread(threadId),
+            'GET',
+            { before: oldest.id, limit: 50 },
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setMessages((prev) => prependMessages(prev, result?.messages));
+                setHasMore(Boolean(result?.has_more));
+                setLoadingEarlier(false);
+
+                // Keep the reader where they were rather than at the top of a
+                // page of history they have not read.
+                requestAnimationFrame(() => {
+                    const target = timelineRef.current;
+
+                    if (target) target.scrollTop = target.scrollHeight - anchor;
+                });
+            },
+            () => {
+                if (mountedRef.current) setLoadingEarlier(false);
+            }
+        ).catch(() => {
+            if (mountedRef.current) setLoadingEarlier(false);
+        });
+    }, [routes, threadId, messages, loadingEarlier]);
+
+    /* ----------------------------------------------------------------- live */
+
+    const handleEvent = useCallback(
+        (event) => {
+            if (!mountedRef.current) return;
+
+            const eventThreadId = event?.thread?.id ?? event?.message?.thread_id;
+
+            if (String(eventThreadId) !== String(threadId)) return;
+
+            if (event.thread) setThread((prev) => ({ ...(prev || {}), ...event.thread }));
+            if (event.message) {
+                setMessages((prev) => upsertMessage(prev, event.message));
+            }
+        },
+        [threadId]
+    );
+
+    // A parent's event, applied exactly once per event.
+    useEffect(() => {
+        if (!liveEvent?.payload) return;
+
+        handleEvent(liveEvent.payload);
+        // Keyed on `seq` alone: the payload object is rebuilt every render by
+        // the parent, and `handleEvent` changes with the thread id.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [liveEvent?.seq]);
+
+    // The one line this conversation is on, as useSmsLive wants it. Named apart
+    // from the `lines` prop: that one is the user's whole list, and is only
+    // here to give a template's {line} a label.
+    const liveLines = useMemo(
+        () => (thread?.line_id ? [{ id: thread.line_id }] : []),
+        [thread]
+    );
+
+    useSmsLive({
+        echo,
+        lines: liveLines,
+        channelFor,
+        endpoints,
+        enabled: subscribe,
+        onReceived: handleEvent,
+        onUpdated: handleEvent,
+        // The panel has no badge of its own, so the polling fallback only
+        // needs to re-read the conversation.
+        onPoll: useCallback(() => {
+            if (!threadId) return;
+
+            CustomFetch(
+                routes.thread(threadId),
+                'GET',
+                { limit: 50 },
+                (result) => {
+                    if (!mountedRef.current || !result) return;
+
+                    setMessages((prev) =>
+                        (Array.isArray(result.messages) ? result.messages : []).reduce(
+                            upsertMessage,
+                            prev
+                        )
+                    );
+                    if (result.thread) setThread(result.thread);
+                },
+                () => {}
+            ).catch(() => {});
+        }, [routes, threadId]),
+    });
+
+    /* --------------------------------------------------------------- scroll */
+
+    const onTimelineScroll = useCallback((event) => {
+        const node = event.currentTarget;
+
+        pinnedRef.current =
+            node.scrollHeight - node.scrollTop - node.clientHeight < 60;
+    }, []);
+
+    useLayoutEffect(() => {
+        const node = timelineRef.current;
+
+        if (!node || !pinnedRef.current) return;
+
+        node.scrollTop = node.scrollHeight;
+    }, [messages, threadId]);
+
+    /* -------------------------------------------------------------- sending */
+
+    // Auto-grow, capped by the max-height in the stylesheet.
+    useLayoutEffect(() => {
+        const node = composerRef.current;
+
+        if (!node) return;
+
+        node.style.height = 'auto';
+        node.style.height = `${Math.min(node.scrollHeight, 160)}px`;
+    }, [body]);
+
+    const counts = segmentCount(body);
+    const overLimit = counts.segments > MAX_SEGMENTS;
+    const canSend = body.trim() !== '' && !overLimit && !sending && Boolean(threadId);
+
+    const send = useCallback(
+        (text) => {
+            const outgoing = String(text ?? '').trim();
+
+            if (outgoing === '' || !threadId) return;
+
+            temporaryId += 1;
+
+            const temp = {
+                id: `pending-${temporaryId}`,
+                client_id: `pending-${temporaryId}`,
+                direction: 'out',
+                body: outgoing,
+                status: 'queued',
+                pending: true,
+                user: null,
+                attachments: [],
+                created_at: new Date().toISOString(),
+            };
+
+            pinnedRef.current = true;
+            setMessages((prev) => [...prev, temp]);
+            setSending(true);
+
+            CustomFetch(
+                routes.messages(threadId),
+                'POST',
+                { body: outgoing },
+                (result) => {
+                    if (!mountedRef.current) return;
+
+                    setSending(false);
+
+                    const message = result?.message;
+
+                    setMessages((prev) => {
+                        const without = prev.filter((one) => one.id !== temp.id);
+
+                        return message ? upsertMessage(without, message) : without;
+                    });
+
+                    if (message) onMessage?.(thread, message);
+                },
+                (error) => {
+                    if (!mountedRef.current) return;
+
+                    setSending(false);
+                    setMessages((prev) =>
+                        prev.map((one) =>
+                            one.id === temp.id
+                                ? { ...one, status: 'failed', error: error || 'Not sent' }
+                                : one
+                        )
+                    );
+                }
+            ).catch(() => {
+                if (!mountedRef.current) return;
+
+                setSending(false);
+            });
+        },
+        [routes, threadId, thread, onMessage]
+    );
+
+    const submit = useCallback(() => {
+        if (!canSend) return;
+
+        send(body);
+        setBody('');
+    }, [canSend, send, body]);
+
+    const retry = useCallback(
+        (message) => {
+            setMessages((prev) => prev.filter((one) => one.id !== message.id));
+            send(message.body);
+        },
+        [send]
+    );
+
+    const onComposerKeyDown = useCallback(
+        (event) => {
+            if (event.key !== 'Enter') return;
+            if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) return;
+            if (!enterSends) return;
+
+            event.preventDefault();
+            submit();
+        },
+        [enterSends, submit]
+    );
+
+    /* -------------------------------------------------------------- actions */
+
+    const patchThread = useCallback(
+        (payload, done) => {
+            if (!threadId) return;
+
+            CustomFetch(
+                routes.updateThread(threadId),
+                'PUT',
+                payload,
+                (result) => {
+                    if (!mountedRef.current || !result?.thread) return;
+
+                    setThread(result.thread);
+                    onThreadChange?.(result.thread);
+                    done?.(result.thread);
+                },
+                null
+            ).catch(() => {});
+        },
+        [routes, threadId, onThreadChange]
+    );
+
+    const toggleArchive = useCallback(() => {
+        if (!thread) return;
+
+        const archiving = !thread.archived_at;
+        const url = archiving ? routes.archive(thread.id) : routes.unarchive(thread.id);
+
+        CustomFetch(
+            url,
+            'POST',
+            {},
+            () => {
+                if (!mountedRef.current) return;
+
+                const next = {
+                    ...thread,
+                    archived_at: archiving ? new Date().toISOString() : null,
+                };
+
+                setThread(next);
+                onThreadChange?.(next);
+            },
+            null
+        ).catch(() => {});
+    }, [routes, thread, onThreadChange]);
+
+    const loadTemplates = useCallback(() => {
+        if (templatesProp || ownTemplates) return;
+
+        CustomFetch(
+            routes.templates,
+            'GET',
+            null,
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setOwnTemplates(Array.isArray(result?.data) ? result.data : []);
+            },
+            () => {
+                if (mountedRef.current) setOwnTemplates([]);
+            }
+        ).catch(() => {
+            if (mountedRef.current) setOwnTemplates([]);
+        });
+    }, [routes, templatesProp, ownTemplates]);
+
+    /** The label of the line this conversation is on, when the parent knows it. */
+    const lineLabel = useMemo(() => {
+        const list = Array.isArray(lines) ? lines : [];
+        const line = list.find((one) => String(one?.id) === String(thread?.line_id));
+
+        return line?.label ?? null;
+    }, [lines, thread]);
+
+    const insertTemplate = useCallback(
+        (template) => {
+            setTemplatesOpen(false);
+
+            // "Hi {first_name}, a reminder of your review on {date}" is only
+            // worth storing if it arrives filled in. Whatever cannot be filled
+            // stays as written, which is the cue to type over it.
+            const filled = fillTemplate(template.body, {
+                client: thread?.client,
+                contact_name: thread?.contact_name,
+                number: thread?.display_number || thread?.external_number,
+                line: lineLabel,
+            });
+
+            let caret = null;
+
+            setBody((prev) => {
+                const next = prev.trim() === '' ? filled : `${prev}\n${filled}`;
+                const gap = next.length - filled.length;
+                const blank = nextPlaceholder(next, gap);
+
+                caret = blank;
+
+                return next;
+            });
+
+            requestAnimationFrame(() => {
+                const box = composerRef.current;
+
+                if (!box) return;
+
+                box.focus();
+
+                // Select the first blank rather than parking the caret at the
+                // end: the next keystroke then replaces the token instead of
+                // landing beside it.
+                if (caret) box.setSelectionRange(caret.start, caret.end);
+            });
+        },
+        [thread, lineLabel]
+    );
+
+    /* --------------------------------------------------------------- render */
+
+    if (!threadId) {
+        return (
+            <section className={`${styles.convPane} ${className}`.trim()}>
+                <div className={styles.timelineEmpty}>
+                    <MessageSquarePlus size={22} strokeWidth={1.8} aria-hidden="true" />
+                    <p className={styles.help}>
+                        Pick a conversation on the left, or start a new message.
+                    </p>
+                </div>
+            </section>
+        );
+    }
+
+    const name = threadDisplayName(thread);
+    const subtitle = threadSubtitle(thread);
+    const groups = groupMessagesByDay(messages);
+
+    const renderMessage = ({ message, lastOfRun }) => {
+        const outgoing = message.direction === 'out';
+        const failed = message.status === 'failed';
+        const heldMessage = message.status === 'not_connected';
+        const attachments = Array.isArray(message.attachments) ? message.attachments : [];
+        // A failure is never silent, whatever else the run is doing.
+        const showMeta = lastOfRun || failed || heldMessage;
+
+        return (
+            <div
+                key={message.id}
+                className={[
+                    styles.bubbleRow,
+                    outgoing ? styles.bubbleOut : styles.bubbleIn,
+                    lastOfRun ? styles.bubbleRunEnd : '',
+                ]
+                    .filter(Boolean)
+                    .join(' ')}
+            >
+                <div
+                    className={[
+                        styles.bubble,
+                        outgoing ? styles.bubbleBodyOut : styles.bubbleBodyIn,
+                        heldMessage ? styles.bubbleHeld : '',
+                        failed ? styles.bubbleFailed : '',
+                        message.pending ? styles.bubblePending : '',
+                    ]
+                        .filter(Boolean)
+                        .join(' ')}
+                >
+                    {message.body}
+
+                    {attachments.length > 0 && (
+                        <div className={styles.attachments}>
+                            {attachments.map((file) => (
+                                <a
+                                    key={file.id}
+                                    className={styles.attachment}
+                                    href={file.download_url}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                >
+                                    <FileText size={12} strokeWidth={2} aria-hidden="true" />
+                                    <span>{file.name}</span>
+                                </a>
+                            ))}
+                        </div>
+                    )}
+                </div>
+
+                {showMeta && (
+                    <div
+                        className={[
+                            styles.bubbleMeta,
+                            failed ? styles.metaFailed : '',
+                            heldMessage ? styles.metaHeld : '',
+                        ]
+                            .filter(Boolean)
+                            .join(' ')}
+                    >
+                        <span>{clockTime(message.created_at)}</span>
+                        {outgoing && <span>· {statusLabel(message)}</span>}
+                        {outgoing && message.user?.name && <span>· {message.user.name}</span>}
+                        {outgoing && failed && (
+                            <button
+                                type="button"
+                                className={styles.retryButton}
+                                onClick={() => retry(message)}
+                            >
+                                Retry
+                            </button>
+                        )}
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    return (
+        <section
+            className={`${styles.convPane} ${className}`.trim()}
+            aria-label={`Conversation with ${name}`}
+        >
+            <header className={styles.convHead}>
+                {onBack && (
+                    <button
+                        type="button"
+                        className={`${styles.iconButton} ${styles.backButton}`}
+                        onClick={onBack}
+                        aria-label="Back to conversations"
+                    >
+                        <ArrowLeft size={16} strokeWidth={2} aria-hidden="true" />
+                    </button>
+                )}
+
+                <div className={styles.convIdentity}>
+                    <span className={`${styles.avatar} ${styles.avatarLg}`} aria-hidden="true">
+                        {initialsFor(name)}
+                    </span>
+                    <span>
+                        <strong className={styles.convName}>{name}</strong>
+                        {subtitle !== '' && (
+                            <span className={styles.convNumber}>{subtitle}</span>
+                        )}
+                    </span>
+                </div>
+
+                <div className={styles.convActions}>
+                    {thread?.client?.id ? (
+                        <a
+                            className={styles.clientChip}
+                            href={clientUrl(thread.client.id)}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            <User size={12} strokeWidth={2.2} aria-hidden="true" />
+                            {thread.client.name}
+                            <ExternalLink size={11} strokeWidth={2.2} aria-hidden="true" />
+                        </a>
+                    ) : null}
+
+                    <button
+                        type="button"
+                        className={styles.ghostButton}
+                        onClick={() => setLinkOpen(true)}
+                    >
+                        <Link2 size={14} strokeWidth={2} aria-hidden="true" />
+                        {thread?.client?.id ? 'Change link' : 'Link to client'}
+                    </button>
+
+                    {canManage && status && status.transport !== 'zoom' && (
+                        <button
+                            type="button"
+                            className={styles.ghostButton}
+                            onClick={() => setSimulateOpen(true)}
+                            data-tooltip-id="system-tooltip"
+                            data-tooltip-content="Write a reply as if it came from this number"
+                        >
+                            Simulate reply
+                        </button>
+                    )}
+
+                    <button
+                        type="button"
+                        className={styles.iconButton}
+                        onClick={toggleArchive}
+                        data-tooltip-id="system-tooltip"
+                        data-tooltip-content={thread?.archived_at ? 'Unarchive' : 'Archive'}
+                        aria-label={thread?.archived_at ? 'Unarchive' : 'Archive'}
+                    >
+                        {thread?.archived_at ? (
+                            <ArchiveRestore size={15} strokeWidth={2} aria-hidden="true" />
+                        ) : (
+                            <Archive size={15} strokeWidth={2} aria-hidden="true" />
+                        )}
+                    </button>
+                </div>
+            </header>
+
+            {showTransportBanner && held && (
+                <p className={`${styles.banner} ${styles.bannerWarn}`} role="status">
+                    <Unplug size={14} strokeWidth={2} aria-hidden="true" />
+                    <strong>{transport.title}</strong>
+                    <span className={styles.bannerNote}>{transport.note}</span>
+                </p>
+            )}
+
+            <div
+                className={styles.timeline}
+                ref={timelineRef}
+                onScroll={onTimelineScroll}
+                aria-live="polite"
+            >
+                {hasMore && (
+                    <div className={styles.timelineTop}>
+                        <button
+                            type="button"
+                            className={styles.ghostButton}
+                            onClick={loadEarlier}
+                            disabled={loadingEarlier}
+                        >
+                            {loadingEarlier ? (
+                                <Loader2 size={14} className={styles.spin} aria-hidden="true" />
+                            ) : (
+                                <ChevronUp size={14} strokeWidth={2} aria-hidden="true" />
+                            )}
+                            Load earlier
+                        </button>
+                    </div>
+                )}
+
+                {loading && messages.length === 0 && (
+                    <div className={styles.timelineEmpty}>
+                        <Loader2 size={18} className={styles.spin} aria-label="Loading" />
+                    </div>
+                )}
+
+                {!loading && messages.length === 0 && (
+                    <div className={styles.timelineEmpty}>
+                        <p className={styles.help}>
+                            No messages in this conversation yet. Write the first one below.
+                        </p>
+                    </div>
+                )}
+
+                {groups.map((group) => (
+                    <React.Fragment key={group.key}>
+                        {group.label !== '' && (
+                            <div className={styles.dayHeading}>{group.label}</div>
+                        )}
+                        {markRuns(group.messages).map(renderMessage)}
+                    </React.Fragment>
+                ))}
+            </div>
+
+            <div className={styles.composer}>
+                <div className={styles.composerBox}>
+                    <textarea
+                        ref={composerRef}
+                        className={styles.composerInput}
+                        rows={compact ? 1 : 2}
+                        value={body}
+                        placeholder={composerPlaceholder(status)}
+                        aria-label="Message"
+                        onChange={(event) => setBody(event.target.value)}
+                        onKeyDown={onComposerKeyDown}
+                    />
+
+                    <div className={styles.composerBar}>
+                        <div className={styles.composerTools}>
+                        <div className={styles.menuWrap}>
+                            <button
+                                type="button"
+                                className={styles.ghostButton}
+                                onClick={() => {
+                                    loadTemplates();
+                                    setTemplatesOpen((prev) => !prev);
+                                }}
+                                aria-expanded={templatesOpen}
+                                aria-haspopup="menu"
+                            >
+                                <FileText size={14} strokeWidth={2} aria-hidden="true" />
+                                Templates
+                            </button>
+
+                            {templatesOpen && (
+                                <div className={styles.menu} role="menu">
+                                    {(templates || []).filter((one) => one.active !== false)
+                                        .length === 0 ? (
+                                        <p className={styles.menuEmpty}>
+                                            {templates === null
+                                                ? 'Loading…'
+                                                : 'No templates yet.'}
+                                        </p>
+                                    ) : (
+                                        (templates || [])
+                                            .filter((one) => one.active !== false)
+                                            .map((template) => (
+                                                <button
+                                                    key={template.id}
+                                                    type="button"
+                                                    className={styles.menuItem}
+                                                    role="menuitem"
+                                                    onClick={() => insertTemplate(template)}
+                                                >
+                                                    <strong>{template.name}</strong>
+                                                    <small>{template.body}</small>
+                                                </button>
+                                            ))
+                                    )}
+                                </div>
+                            )}
+                        </div>
+
+                            <span
+                                className={`${styles.counter} ${overLimit ? styles.counterOver : ''}`}
+                            >
+                                {counterLabel(body)}
+                                {overLimit ? ` · over the ${MAX_SEGMENTS}-part limit` : ''}
+                            </span>
+                        </div>
+
+                        <div className={styles.composerActions}>
+                            <button
+                                type="button"
+                                className={`${styles.toggle} ${enterSends ? styles.toggleOn : ''}`}
+                                aria-pressed={enterSends}
+                                onClick={() => {
+                                    const next = !enterSends;
+
+                                    setEnterSends(next);
+                                    writeEnterSends(next);
+                                }}
+                                data-tooltip-id="system-tooltip"
+                                data-tooltip-content={
+                                    enterSends
+                                        ? 'Enter sends · Shift+Enter starts a new line'
+                                        : 'Enter starts a new line · use the Send button'
+                                }
+                            >
+                                <span className={styles.toggleTrack} aria-hidden="true">
+                                    <span className={styles.toggleKnob} />
+                                </span>
+                                Enter sends
+                            </button>
+
+                            <button
+                                type="button"
+                                className={styles.sendButton}
+                                onClick={submit}
+                                disabled={!canSend}
+                            >
+                                {sending ? (
+                                    <Loader2 size={15} className={styles.spin} aria-hidden="true" />
+                                ) : (
+                                    <Send size={15} strokeWidth={2.2} aria-hidden="true" />
+                                )}
+                                Send
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <LinkClientModal
+                open={linkOpen}
+                onClose={() => setLinkOpen(false)}
+                routes={routes}
+                thread={thread}
+                onSave={patchThread}
+            />
+
+            <SimulateModal
+                open={simulateOpen}
+                onClose={() => setSimulateOpen(false)}
+                routes={routes}
+                threadId={threadId}
+                onCreated={(message) => {
+                    setMessages((prev) => upsertMessage(prev, message));
+                    pinnedRef.current = true;
+                }}
+            />
+        </section>
+    );
+};
+
+/* ------------------------------------------------------------------ modals */
+
+/**
+ * Attach a conversation to a client — or to a name, when there is no client.
+ *
+ * A number arrives with nothing but digits attached. Until someone says whose
+ * it is, every list in the CRM shows it as digits; this is the one action that
+ * fixes that everywhere at once.
+ */
+const LinkClientModal = ({ open, onClose, routes, thread, onSave }) => {
+    const [query, setQuery] = useState('');
+    const [results, setResults] = useState([]);
+    const [searching, setSearching] = useState(false);
+    const [contactName, setContactName] = useState('');
+
+    const debounced = useDebouncedValue(query, 250);
+
+    useEffect(() => {
+        if (!open) return;
+
+        setContactName(thread?.contact_name || '');
+        setQuery('');
+        setResults([]);
+    }, [open, thread]);
+
+    useEffect(() => {
+        if (!open) return;
+
+        const search = debounced.trim();
+
+        if (search.length < 2) {
+            setResults([]);
+
+            return;
+        }
+
+        setSearching(true);
+
+        CustomFetch(
+            routes.clientSearch,
+            'GET',
+            { q: search },
+            (result) => {
+                setResults(Array.isArray(result?.data) ? result.data : []);
+                setSearching(false);
+            },
+            () => setSearching(false)
+        ).catch(() => setSearching(false));
+    }, [open, debounced, routes]);
+
+    if (!open) return null;
+
+    return (
+        <StandardModal isOpen={open} onClose={onClose} size="small">
+            <div className={styles.modalForm}>
+                <div className={styles.modalHead}>
+                    <h3 className={styles.modalTitle}>
+                        <Link2 size={16} strokeWidth={2.2} aria-hidden="true" />
+                        Link this conversation
+                    </h3>
+                    <button
+                        type="button"
+                        className={styles.iconButton}
+                        onClick={onClose}
+                        aria-label="Close"
+                    >
+                        <X size={15} strokeWidth={2} aria-hidden="true" />
+                    </button>
+                </div>
+
+                <div className={styles.field}>
+                    <span className={styles.label}>Contact name</span>
+                    <input
+                        type="text"
+                        className={styles.input}
+                        value={contactName}
+                        placeholder="What to call this number"
+                        onChange={(event) => setContactName(event.target.value)}
+                    />
+                    <p className={styles.help}>
+                        Used when the number is not a client — a spouse, an accountant, a
+                        supplier.
+                    </p>
+                </div>
+
+                <div className={`${styles.field} ${styles.typeahead}`}>
+                    <span className={styles.label}>Client</span>
+                    <input
+                        type="text"
+                        className={styles.input}
+                        value={query}
+                        placeholder="Search clients by name…"
+                        onChange={(event) => setQuery(event.target.value)}
+                    />
+
+                    {results.length > 0 && (
+                        <ul className={styles.typeaheadList}>
+                            {results.map((client) => (
+                                <li key={client.id}>
+                                    <button
+                                        type="button"
+                                        className={styles.typeaheadRow}
+                                        onClick={() =>
+                                            onSave(
+                                                {
+                                                    client_id: client.id,
+                                                    client_name: client.name,
+                                                    contact_name: contactName || null,
+                                                },
+                                                onClose
+                                            )
+                                        }
+                                    >
+                                        <span className={styles.avatar} aria-hidden="true">
+                                            {initialsFor(client.name)}
+                                        </span>
+                                        <span>
+                                            <strong>{client.name}</strong>
+                                            {Array.isArray(client.numbers) &&
+                                                client.numbers.length > 0 && (
+                                                    <small>
+                                                        {' '}
+                                                        {normaliseNumberForDisplay(
+                                                            client.numbers[0].number
+                                                        )}
+                                                    </small>
+                                                )}
+                                        </span>
+                                    </button>
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+
+                    {searching && <p className={styles.help}>Searching…</p>}
+                </div>
+
+                <div className={styles.modalActions}>
+                    {thread?.client?.id && (
+                        <button
+                            type="button"
+                            className={styles.dangerLink}
+                            onClick={() =>
+                                onSave(
+                                    { client_id: null, client_name: null },
+                                    onClose
+                                )
+                            }
+                        >
+                            Remove the client link
+                        </button>
+                    )}
+                    <button type="button" className={styles.ghostButton} onClick={onClose}>
+                        Cancel
+                    </button>
+                    <button
+                        type="button"
+                        className={styles.primaryButton}
+                        onClick={() => onSave({ contact_name: contactName || null }, onClose)}
+                    >
+                        Save the name
+                    </button>
+                </div>
+            </div>
+        </StandardModal>
+    );
+};
+
+/**
+ * A reply that never came from a phone.
+ *
+ * Only ever offered to an administrator, and only while the transport is not
+ * Zoom — the entire point of it is to exercise the inbound half of the UI
+ * before there is anything on the other end to send one.
+ */
+const SimulateModal = ({ open, onClose, routes, threadId, onCreated }) => {
+    const [body, setBody] = useState('');
+    const [busy, setBusy] = useState(false);
+
+    useEffect(() => {
+        if (open) setBody('');
+    }, [open]);
+
+    if (!open) return null;
+
+    const submit = () => {
+        if (body.trim() === '') return;
+
+        setBusy(true);
+
+        CustomFetch(
+            routes.simulateInbound(threadId),
+            'POST',
+            { body: body.trim() },
+            (result) => {
+                setBusy(false);
+
+                if (result?.message) onCreated(result.message);
+
+                onClose();
+            },
+            () => setBusy(false)
+        ).catch(() => setBusy(false));
+    };
+
+    return (
+        <StandardModal isOpen={open} onClose={onClose} size="small">
+            <div className={styles.modalForm}>
+                <div className={styles.modalHead}>
+                    <h3 className={styles.modalTitle}>Simulate a reply</h3>
+                    <button
+                        type="button"
+                        className={styles.iconButton}
+                        onClick={onClose}
+                        aria-label="Close"
+                    >
+                        <X size={15} strokeWidth={2} aria-hidden="true" />
+                    </button>
+                </div>
+
+                <p className={styles.help}>
+                    This writes an incoming message onto the conversation as though the
+                    number had texted back. It is a testing tool, and it is only here
+                    because Zoom is not connected yet.
+                </p>
+
+                <textarea
+                    className={styles.textarea}
+                    rows={3}
+                    value={body}
+                    placeholder="Thanks, got it."
+                    aria-label="Reply body"
+                    onChange={(event) => setBody(event.target.value)}
+                />
+
+                <div className={styles.modalActions}>
+                    <button type="button" className={styles.ghostButton} onClick={onClose}>
+                        Cancel
+                    </button>
+                    <button
+                        type="button"
+                        className={styles.primaryButton}
+                        onClick={submit}
+                        disabled={busy || body.trim() === ''}
+                    >
+                        Add the reply
+                    </button>
+                </div>
+            </div>
+        </StandardModal>
+    );
+};
+
+export default SmsThreadPanel;