@visns-studio/visns-components 6.16.6 → 6.17.1

package/README.md

@@ -9,6 +9,62 @@ A comprehensive React component library used by the VISNS Studio team for CRM an
 
 VISNS Components is a React-based UI component library that provides a set of reusable, consistent, and customizable components for building web applications. It includes components for authentication, data grids, forms, navigation, and more, designed to work seamlessly together.
 
+## Recent Updates (v6.17.0)
+
+### A client's text messages, on the client's own page
+
+`SmsClientConversations` is the messaging module as a card: one client's
+conversations, for the "SMS" tab of their detail page. It answers the question
+an adviser opening a client actually has — *what have we said to this person* —
+which the inbox could only answer by being searched for a name the adviser was
+already looking at.
+
+```jsx
+<SmsClientConversations
+    clientId={client.id}
+    clientName={client.name}
+    numbers={[{ label: 'Mobile', number: client.mobile }]}
+    navigate={navigate}
+    echo={getEcho}
+/>
+```
+
+It is the inbox's own parts, filtered — `GET {base}/threads?client_id=` (the
+`client_id` filter is new in `visnsstudio/visns-packages`, after 4.6.0),
+`SmsThreadPanel` for the conversation, `useSmsLive`
+across every line the user can work — with three deliberate differences:
+
+- **The rail is named after the line, not the client.** Every row is the same
+  person, so their name on each one carries nothing; which of the practice's
+  numbers they are talking to is the thing that differs. The avatar column goes
+  with it.
+- **A live event is admitted only if it is about this client.** The
+  subscription covers whole lines, so most of what arrives belongs to somebody
+  else's page. It still reaches the conversation pane, which matches on thread
+  id; it simply never joins this rail.
+- **New message needs no search.** The host passes the client's mobiles in and
+  the composer opens with the recipient already picked — `SmsComposeModal` took
+  `initialRecipient` (`{number, id?, name?}`) and `initialBody` for it. Making
+  somebody search for the client whose page they are standing on is the kind of
+  small insult that stops a feature being used. No mobile on the record leaves
+  the button disabled and saying why, rather than opening a composer with an
+  empty To field.
+
+The card is a fixed-height box (`height`, 560px by default) with the
+conversation scrolling inside it: a timeline that grows the page pushes the
+composer off the bottom of the screen, and on a client page it would take the
+rest of the tab with it.
+
+### `useSmsThreads`
+
+The thread list — paging, the request ticket that stops a slow reply
+overwriting a fast one, the live upsert that moves a conversation to the top,
+the optimistic unread clear — came out of `SmsInbox` into a hook the client
+card shares. The two surfaces now differ only in which filters they send.
+`orderThreadsByRecency`, `pickInitialThread`, `clientRecipient` and
+`conversationCountLabel` are exported alongside it, all covered by
+`tests/sms.test.mjs`.
+
 ## Recent Updates (v6.15.0)
 
 ### The detail page joins the dashboard system
@@ -283,11 +339,13 @@ connected* rather than as an error, because it is not one.
 | `SmsInboxBadge` | The header popover. Mounts as an account action through Navigation's `renderers` slot. |
 | `SmsInbox` | The page: line selector, search, filters, thread list, conversation, composer. |
 | `SmsThreadPanel` | One conversation on its own — header, timeline, composer — for embedding on a client page. |
+| `SmsClientConversations` | One client's conversations, as a card for their detail page: rail, conversation, seeded composer. |
 | `SmsComposeModal` | New message: line, a number or a client typeahead, templates, send. |
 | `SmsLineSettings` | Settings → Messaging: status card, lines table, templates. |
 | `useSmsLive` | Echo subscription per line, with a 30-second polling fallback when there is no Echo. |
+| `useSmsThreads` | The thread list behind `SmsInbox` and `SmsClientConversations`: filters, paging, live upsert. |
 | `makeSmsEndpoints`, `DEFAULT_SMS_ENDPOINTS`, `resolveSmsEndpoints` | The URL table. |
-| `segmentCount`, `normaliseNumberForDisplay`, `looksLikeNumber`, `toE164`, `relativeTime`, `groupMessagesByDay`, `initialsFor`, `threadDisplayName`, `describeTransport`, `isHeldTransport`, `SMS_LIMITS`, `SMS_MAX_SEGMENTS`, `SMS_STATUS_LABELS` | Pure helpers, all covered by `tests/sms.test.mjs`. |
+| `segmentCount`, `normaliseNumberForDisplay`, `looksLikeNumber`, `toE164`, `relativeTime`, `groupMessagesByDay`, `initialsFor`, `threadDisplayName`, `describeTransport`, `isHeldTransport`, `orderThreadsByRecency`, `pickInitialThread`, `clientRecipient`, `conversationCountLabel`, `SMS_LIMITS`, `SMS_MAX_SEGMENTS`, `SMS_STATUS_LABELS` | Pure helpers, all covered by `tests/sms.test.mjs`. |
 
 #### `SmsInboxBadge`
 
@@ -393,6 +451,91 @@ broadcast arriving first cannot produce a duplicate. Enter sends by default
 because "70" with no explanation looks like a bug: one curly quote or emoji
 drops the message from GSM-7 to UCS-2 and the limit with it.
 
+#### `SmsClientConversations`
+
+One client's messages, as a card for the "SMS" tab of their detail page.
+
+| Prop | Default | Notes |
+| --- | --- | --- |
+| `clientId` | — | **Required.** Sent as `client_id`; nothing is fetched until it is set, so a card mounted before the record loads does not ask for every thread in the practice. |
+| `clientName` | `''` | Named in the empty state, and the name the composer's recipient chip shows. |
+| `numbers` | `[]` | `[{label, number}]` — the client's mobiles, in the order they should be offered. The first usable one seeds **New message**; none disables it. Bare strings work too. |
+| `endpoints` | `DEFAULT_SMS_ENDPOINTS` | Merged over the defaults. |
+| `echo` | `null` | Instance or factory. **The card owns the subscription** (every line the user can work) and feeds the conversation pane, which is mounted `subscribe={false}`. |
+| `channelFor` | `` (id) => `sms-line.${id}` `` | |
+| `userProfile` | `null` | Accepted for consistency; unread. |
+| `inboxUrl` | `'/sms'` | "Open in Messages" links here with `?thread=<selected>`. |
+| `navigate` | `null` | Given, the link stays inside the SPA; without it it is an ordinary anchor and a full page load. Either way it is a real `href` — middle-clickable and copyable. |
+| `lines` | `null` | `[{id, label, phone_number}]`. Fetched from `{base}/lines` when not supplied. Names the rows in the rail. |
+| `status` | `null` | The `/status` payload. Fetched here when not supplied. |
+| `templates` | `null` | Passed to the conversation and the composer, both of which fetch their own when it is null. |
+| `canManage` | `false` | Gates the conversation's "Simulate reply". |
+| `clientUrl` | `` (id) => `/clients/${id}` `` | |
+| `title` | `'Messages'` | The card heading. |
+| `height` | `560` | The panes' height. A number is pixels; a string is passed through. |
+| `className` | `''` | Added to the card. |
+
+The rail lists this client's conversations — **line label · number · last
+message · unread badge** — and the panel is the full `SmsThreadPanel`:
+templates, the segment counter, Enter-sends, live updates. Most clients have
+exactly one conversation; the rail earns its place by saying which of the
+practice's numbers it is on. Below 780px it becomes a strip above the
+conversation rather than a column beside it.
+
+With no conversations at all the card says *No text messages with {clientName}
+yet* and offers the same New message button — which is the state most clients
+are in, so it has to look deliberate rather than broken.
+
+##### Wiring a client's SMS tab
+
+```jsx
+import { SmsClientConversations } from '@visns-studio/visns-components';
+import { useNavigate } from 'react-router-dom';
+
+const ClientSmsTab = ({ client }) => {
+    const navigate = useNavigate();
+
+    return (
+        <SmsClientConversations
+            clientId={client.id}
+            clientName={client.name}
+            numbers={[
+                { label: 'Mobile', number: client.mobile },
+                { label: 'Other', number: client.mobile_2 },
+            ]}
+            endpoints={{ base: '/ajax/sms' }}
+            echo={getEcho}
+            channelFor={(id) => `sms-line.${id}.${import.meta.env.VITE_PUSHER_ENV}`}
+            navigate={navigate}
+            inboxUrl="/messages"
+            canManage={can('Messaging Manage')}
+            height={620}
+        />
+    );
+};
+```
+
+The backend needs nothing beyond a `visnsstudio/visns-packages` new enough for
+`GET {base}/threads` to take `client_id` (added after 4.6.0). It filters **on top of** line
+visibility, not around it: a conversation with the same client on a line this
+user is not attached to stays invisible, so a client page cannot become a way
+around the line pivot. Threads are linked to a client by the
+`messaging.client_resolver` hook when they are created, or by hand from the
+conversation header — an unlinked thread will not appear here.
+
+#### `SmsComposeModal`
+
+| Prop | Default | Notes |
+| --- | --- | --- |
+| `open`, `onClose` | — | |
+| `endpoints` | `DEFAULT_SMS_ENDPOINTS` | |
+| `lines` | `[]` | One line is stated rather than offered as a choice. |
+| `status` | `null` | Drives the "not connected" banner. |
+| `templates` | `null` | Fetched lazily on first opening the menu. |
+| `initialRecipient` | `null` | `{number, id?, name?}`. With an `id` the recipient is set exactly as picking one out of the typeahead sets it — including the number being taken as given rather than re-judged — so the modal opens with the message box as the next stop. Without one it pre-fills the To field. Applied **after** the open-reset, once per opening. |
+| `initialBody` | `''` | Pre-fills the message. |
+| `onCreated` | — | `(thread, message)` — the 201 payload. |
+
 #### `SmsLineSettings`
 
 | Prop | Default | Notes |
@@ -412,7 +555,7 @@ a partial `endpoints` object merged over it. Session + CSRF come from
 GET    {base}/status                         -> {transport, connected, lines_count, unread_total}
 GET    {base}/lines                          -> {data: [{id, label, phone_number, display_number, active, unread_count}]}
 GET    {base}/unread                         -> {total, by_line, by_thread}
-GET    {base}/threads?line_id&search&unread_only&archived&page&per_page
+GET    {base}/threads?line_id&client_id&search&unread_only&archived&page&per_page
 POST   {base}/threads                        {line_id, to, body?}   -> 201 {thread, message|null}
 GET    {base}/threads/{id}?before&limit      -> {thread, messages, has_more}   (marks read)
 PUT    {base}/threads/{id}                   {client_id, client_name, contact_name}
@@ -460,7 +603,9 @@ and `.sms.updated`, both carrying `{thread, message}`.
 
 `yarn dev:sms` serves `dev/sms-fixture.html` on port 5181 against an in-memory
 backend (`dev/smsMockServer.js`): three lines, twelve conversations, mixed
-statuses, one thread deep enough to page. The transport switch in the fixture
+statuses, one thread deep enough to page. Three tabs — the inbox, a client
+page's SMS tab (`SmsClientConversations` for the client two of those
+conversations belong to), and Settings → Messaging. The transport switch in the fixture
 header is the point of it — on `null` a sent message stays *Held*, on `log` it
 reaches *Sent*, on `zoom` it reaches *Delivered*. The mock also exports a fake
 Echo, so "Simulate an inbound" pushes a real broadcast and the badge, the list

package/package.json

@@ -95,7 +95,7 @@
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.16.6",
+    "version": "6.17.1",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/sms/SmsClientConversations.jsx

@@ -0,0 +1,439 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ExternalLink, MessageSquare, PenSquare } from 'lucide-react';
+
+import CustomFetch from '../Fetch';
+import styles from '../styles/Sms.module.scss';
+import SmsComposeModal from './SmsComposeModal';
+import SmsThreadPanel from './SmsThreadPanel';
+import { resolveSmsEndpoints } from './smsEndpoints';
+import useSmsLive, { defaultChannelFor } from './useSmsLive';
+import useSmsThreads from './useSmsThreads';
+import {
+    clientRecipient,
+    conversationCountLabel,
+    lineNumberForDisplay,
+    orderThreadsByRecency,
+    pickInitialThread,
+    relativeTime,
+    threadSubtitle,
+} from './smsHelpers';
+
+/** Enough rows for any client; a rail is not a place anybody pages through. */
+const PER_PAGE = 50;
+
+const previewOf = (thread) => {
+    const message = thread?.last_message;
+
+    if (!message || !message.body) return 'No messages yet';
+
+    const body = String(message.body).replace(/\s+/g, ' ').trim();
+
+    return message.direction === 'out' ? `You: ${body}` : body;
+};
+
+/**
+ * One client's text messages, as a card for their detail page.
+ *
+ * The inbox answers "what is the practice talking about"; this answers "what
+ * have we said to this person" — the question an adviser opening a client
+ * actually has, and one the inbox can only answer by being searched for a name
+ * the adviser is already looking at.
+ *
+ * It is the inbox's own parts, filtered: `useSmsThreads` with `client_id`,
+ * `SmsThreadPanel` for the conversation, `useSmsLive` across every line the
+ * user can work. Three things are deliberately different:
+ *
+ *  - **The rail is named after the LINE, not the client.** Every row here is
+ *    the same person, so their name on each one carries nothing; which of the
+ *    practice's numbers they are talking to is the thing that differs.
+ *  - **A live event is admitted only if it is about this client.** The
+ *    subscription covers whole lines, so most of what arrives belongs to
+ *    somebody else's page.
+ *  - **New message needs no search.** The host knows the client's mobiles and
+ *    passes them in; the composer opens with the recipient already set.
+ */
+const SmsClientConversations = ({
+    clientId,
+    clientName = '',
+    // `[{label, number}]` — the mobiles the CRM holds for this client, in the
+    // order they should be offered. The first usable one is what New message
+    // opens with.
+    numbers = [],
+    endpoints,
+    echo = null,
+    channelFor = defaultChannelFor,
+    // Taken so the card mounts with the same prop bag as every other CRM
+    // surface, though the layout does not read it.
+    userProfile: _userProfile = null,
+    inboxUrl = '/sms',
+    // Given, a click stays inside the SPA; without it the link is an ordinary
+    // one and a full page load, which is right for a fixture or a Blade page.
+    navigate = null,
+    lines: linesProp = null,
+    status: statusProp = null,
+    templates: templatesProp = null,
+    canManage = false,
+    clientUrl = (id) => `/clients/${id}`,
+    title = 'Messages',
+    // The card is a fixed-height box with the conversation scrolling inside
+    // it: a timeline that grows the page pushes the composer off the bottom of
+    // the screen, and on a client page it would push the rest of the tab with
+    // it. A number is read as pixels; a string is passed through.
+    height = 560,
+    className = '',
+}) => {
+    const routes = useMemo(() => resolveSmsEndpoints(endpoints), [endpoints]);
+
+    const [ownLines, setOwnLines] = useState(null);
+    const [ownStatus, setOwnStatus] = useState(null);
+
+    const [selectedId, setSelectedId] = useState(null);
+    const [composeOpen, setComposeOpen] = useState(false);
+    const [liveEvent, setLiveEvent] = useState(null);
+    const [refreshToken, setRefreshToken] = useState(0);
+
+    const mountedRef = useRef(true);
+    const seqRef = useRef(0);
+
+    useEffect(
+        () => () => {
+            mountedRef.current = false;
+        },
+        []
+    );
+
+    const threadParams = useMemo(
+        () => ({ client_id: clientId ?? null }),
+        [clientId]
+    );
+
+    const { threads, loading, loaded, reload, applyThread, upsert, clearUnread } =
+        useSmsThreads({
+            endpoints,
+            params: threadParams,
+            perPage: PER_PAGE,
+            // No client, nothing to ask for — a card mounted before the record
+            // has loaded must not fetch every thread in the practice.
+            enabled: Boolean(clientId),
+        });
+
+    /* -------------------------------------------------------------- loading */
+
+    useEffect(() => {
+        if (linesProp) return undefined;
+
+        CustomFetch(
+            routes.lines,
+            'GET',
+            null,
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setOwnLines(Array.isArray(result?.data) ? result.data : []);
+            },
+            () => {
+                if (mountedRef.current) setOwnLines([]);
+            }
+        ).catch(() => {
+            if (mountedRef.current) setOwnLines([]);
+        });
+
+        return undefined;
+    }, [routes, linesProp]);
+
+    useEffect(() => {
+        if (statusProp) return undefined;
+
+        CustomFetch(
+            routes.status,
+            'GET',
+            null,
+            (result) => {
+                if (mountedRef.current && result) setOwnStatus(result);
+            },
+            () => {}
+        ).catch(() => {});
+
+        return undefined;
+    }, [routes, statusProp]);
+
+    const lines = linesProp ?? ownLines ?? [];
+    const status = statusProp ?? ownStatus;
+
+    /* ----------------------------------------------------------------- live */
+
+    const belongsHere = useCallback(
+        (thread) => {
+            if (!thread) return false;
+
+            // Already on screen: an update to a conversation we are showing is
+            // ours whatever the payload says about its client, including the
+            // moment somebody unlinks it.
+            if (threads.some((one) => String(one.id) === String(thread.id))) return true;
+
+            return String(thread.client?.id ?? '') === String(clientId ?? '');
+        },
+        [threads, clientId]
+    );
+
+    const pushEvent = useCallback(
+        (event) => {
+            if (!mountedRef.current) return;
+
+            // The subscription is per line, so most of what arrives is another
+            // client's conversation. It still goes down to the panel, which
+            // matches on thread id — it simply never joins this rail.
+            if (event?.thread && belongsHere(event.thread)) upsert(event.thread);
+
+            seqRef.current += 1;
+            setLiveEvent({ seq: seqRef.current, payload: event });
+        },
+        [belongsHere, upsert]
+    );
+
+    useSmsLive({
+        echo,
+        lines,
+        channelFor,
+        endpoints,
+        onReceived: pushEvent,
+        onUpdated: pushEvent,
+        // Only ticks while there is no Echo: re-read the rail, and tell the
+        // conversation to re-read itself.
+        onPoll: useCallback(() => {
+            reload();
+            setRefreshToken((prev) => prev + 1);
+        }, [reload]),
+    });
+
+    /* ------------------------------------------------------------ selection */
+
+    const ordered = useMemo(() => orderThreadsByRecency(threads), [threads]);
+
+    // Open on something as soon as there is something to open on, and stay
+    // there: `pickInitialThread` prefers the id already selected, so a poll or
+    // an arriving message cannot move the reader to another conversation.
+    useEffect(() => {
+        const next = pickInitialThread(ordered, selectedId);
+        const nextId = next?.id ?? null;
+
+        if (String(nextId ?? '') !== String(selectedId ?? '')) setSelectedId(nextId);
+    }, [ordered, selectedId]);
+
+    const select = useCallback(
+        (thread) => {
+            const id = thread?.id ?? null;
+
+            setSelectedId(id);
+            clearUnread(id);
+        },
+        [clearUnread]
+    );
+
+    /* --------------------------------------------------------------- render */
+
+    const recipient = useMemo(
+        () => clientRecipient({ id: clientId, name: clientName, numbers }),
+        [clientId, clientName, numbers]
+    );
+
+    const lineLabel = useCallback(
+        (thread) => {
+            const line = lines.find((one) => String(one.id) === String(thread?.line_id));
+
+            return line?.label || lineNumberForDisplay(line) || 'Line';
+        },
+        [lines]
+    );
+
+    const unreadTotal = threads.reduce(
+        (total, thread) => total + (Number(thread.unread_count) || 0),
+        0
+    );
+
+    const canCompose = recipient !== null && lines.length > 0;
+    const who = String(clientName || '').trim() || 'this client';
+
+    const inboxHref = selectedId
+        ? `${inboxUrl}${inboxUrl.includes('?') ? '&' : '?'}thread=${selectedId}`
+        : inboxUrl;
+
+    const openInbox = (event) => {
+        if (!navigate) return;
+
+        event.preventDefault();
+        navigate(inboxHref);
+    };
+
+    const composeButton = (
+        <button
+            type="button"
+            className={styles.primaryButton}
+            onClick={() => setComposeOpen(true)}
+            disabled={!canCompose}
+            title={
+                canCompose
+                    ? undefined
+                    : recipient === null
+                      ? 'No mobile number on this client record'
+                      : 'No messaging line is available to you'
+            }
+        >
+            <PenSquare size={14} strokeWidth={2} aria-hidden="true" />
+            New message
+        </button>
+    );
+
+    const empty = loaded && threads.length === 0;
+
+    return (
+        <section className={`${styles.clientCard} ${className}`.trim()}>
+            <header className={styles.clientCardHead}>
+                <div className={styles.clientCardHeading}>
+                    <h2 className={styles.clientCardTitle}>
+                        <MessageSquare size={17} strokeWidth={2.2} aria-hidden="true" />
+                        {title}
+                    </h2>
+                    <p className={styles.clientCardMeta}>
+                        {conversationCountLabel(threads.length)}
+                        {unreadTotal > 0 ? ` · ${unreadTotal} unread` : ''}
+                    </p>
+                </div>
+
+                <div className={styles.clientCardActions}>
+                    <a
+                        className={styles.ghostButton}
+                        href={inboxHref}
+                        onClick={openInbox}
+                    >
+                        <ExternalLink size={14} strokeWidth={2} aria-hidden="true" />
+                        Open in Messages
+                    </a>
+                    {composeButton}
+                </div>
+            </header>
+
+            {empty ? (
+                <div className={`${styles.clientCardBody} ${styles.clientEmpty}`}>
+                    <p>No text messages with {who} yet</p>
+                    {composeButton}
+                </div>
+            ) : (
+                <div
+                    className={`${styles.panes} ${styles.clientPanes}`}
+                    style={{
+                        height: typeof height === 'number' ? `${height}px` : height,
+                    }}
+                >
+                    <div className={styles.listPane} aria-label="Conversations">
+                        <ul className={`${styles.threadList} ${styles.clientRail}`}>
+                            {ordered.map((thread) => {
+                                const unread = Number(thread.unread_count) || 0;
+                                const active = String(thread.id) === String(selectedId);
+
+                                return (
+                                    <li key={thread.id}>
+                                        <button
+                                            type="button"
+                                            className={[
+                                                styles.threadRow,
+                                                styles.clientRow,
+                                                active ? styles.threadRowActive : '',
+                                                unread > 0 ? styles.threadUnread : '',
+                                            ]
+                                                .filter(Boolean)
+                                                .join(' ')}
+                                            aria-current={active ? 'true' : undefined}
+                                            onClick={() => select(thread)}
+                                        >
+                                            <span
+                                                className={styles.threadAccent}
+                                                aria-hidden="true"
+                                            />
+
+                                            <span className={styles.threadBody}>
+                                                <span className={styles.threadTop}>
+                                                    <span className={styles.threadName}>
+                                                        {lineLabel(thread)}
+                                                    </span>
+                                                    <span className={styles.threadTime}>
+                                                        {relativeTime(
+                                                            thread.last_message?.at ??
+                                                                thread.updated_at
+                                                        )}
+                                                    </span>
+                                                </span>
+
+                                                <span className={styles.clientRowNumber}>
+                                                    {threadSubtitle(thread) ||
+                                                        thread.display_number}
+                                                </span>
+
+                                                <span className={styles.threadPreview}>
+                                                    <span>{previewOf(thread)}</span>
+                                                    {unread > 0 && (
+                                                        <span className={styles.threadCount}>
+                                                            {unread}
+                                                        </span>
+                                                    )}
+                                                </span>
+                                            </span>
+                                        </button>
+                                    </li>
+                                );
+                            })}
+
+                            {ordered.length === 0 && (
+                                <li>
+                                    <div className={styles.tableEmpty}>
+                                        <p>{loading ? 'Loading…' : 'No conversations.'}</p>
+                                    </div>
+                                </li>
+                            )}
+                        </ul>
+                    </div>
+
+                    <SmsThreadPanel
+                        threadId={selectedId}
+                        endpoints={endpoints}
+                        // The card holds the subscription; the pane is fed from
+                        // it. Two subscriptions to one channel is two websocket
+                        // authorisations and two copies of every message.
+                        subscribe={false}
+                        liveEvent={liveEvent}
+                        refreshToken={refreshToken}
+                        compact
+                        status={status}
+                        templates={templatesProp}
+                        lines={lines}
+                        canManage={canManage}
+                        clientUrl={clientUrl}
+                        onThreadChange={applyThread}
+                        onMessage={applyThread}
+                        showTransportBanner={false}
+                    />
+                </div>
+            )}
+
+            <SmsComposeModal
+                open={composeOpen}
+                onClose={() => setComposeOpen(false)}
+                endpoints={endpoints}
+                lines={lines}
+                status={status}
+                templates={templatesProp}
+                initialRecipient={recipient}
+                onCreated={(thread) => {
+                    setComposeOpen(false);
+
+                    if (!thread) return;
+
+                    upsert(thread);
+                    select(thread);
+                }}
+            />
+        </section>
+    );
+};
+
+export default SmsClientConversations;