@phis/ui 0.2.1 → 0.4.0

package/plugins/runtime-modules/core/widgets/table/config.js

@@ -170,22 +170,45 @@ function readTableSummaryItem(value) {
         labelPlacement: value.labelPlacement === "after" ? "after" : "before",
     };
 }
+function readTableFooterValues(value) {
+    return Array.isArray(value)
+        ? value.flatMap((item) => {
+            const parsed = readTableSummaryItem(item);
+            return parsed ? [{ key: parsed.key, value: parsed.value }] : [];
+        })
+        : [];
+}
+function readTableFooterVariant(value) {
+    if (!isPhiRecord(value) || !isPhiRecord(value.when))
+        return null;
+    // An empty template is a statement here, not a missing one: the footer has nothing to say.
+    const template = typeof value.template === "string" ? value.template : null;
+    const when = readTableSummaryItem({ key: "when", value: value.when.value });
+    const operator = value.when.operator;
+    if (template == null || !when || (operator !== "truthy" && operator !== "falsy"))
+        return null;
+    return { when: { value: when.value, operator }, template, values: readTableFooterValues(value.values) };
+}
 function readTableFooter(value) {
     if (!isPhiRecord(value) || !Array.isArray(value.values))
         return undefined;
     const template = readString(value.template);
-    const values = value.values.flatMap((item) => {
-        const parsed = readTableSummaryItem(item);
-        return parsed ? [{ key: parsed.key, value: parsed.value }] : [];
-    });
+    const values = readTableFooterValues(value.values);
     if (!template || values.length === 0)
         return undefined;
+    const variants = Array.isArray(value.variants)
+        ? value.variants.flatMap((item) => {
+            const variant = readTableFooterVariant(item);
+            return variant ? [variant] : [];
+        })
+        : [];
     return {
         template,
         values,
         align: value.align === "center" || value.align === "end"
             ? value.align
             : "start",
+        ...(variants.length > 0 ? { variants } : {}),
     };
 }
 function readTableSummary(value) {
@@ -272,7 +295,11 @@ function readColumns(value) {
                 description: readString(item.description),
                 renderer,
                 editor: rawEditor && readBoolean(rawEditor.enabled) !== false
-                    ? { control: editorControl, disabledWhen: readConditionExpression(rawEditor.disabledWhen) }
+                    ? {
+                        control: editorControl,
+                        disabledWhen: readConditionExpression(rawEditor.disabledWhen),
+                        ...(readString(rawEditor.prefix) ? { prefix: readString(rawEditor.prefix) } : {}),
+                    }
                     : undefined,
                 sizing,
                 align,
@@ -471,6 +498,13 @@ export function parsePhiTableWidgetConfig(config) {
     const row = isPhiRecord(presentation.row) ? presentation.row : {};
     const initialQuery = readPhiTableQuery(isPhiRecord(config.initialQuery) ? config.initialQuery : {}) ?? {};
     const defaultSorts = readPhiTableQuery({ sorts: sorting.defaultSorts })?.sorts ?? [];
+    // Read with the same rules as any query's filters; a value no filter can carry is refused, not kept.
+    const fixedFilters = config.fixedFilters === undefined
+        ? undefined
+        : readPhiTableQuery({ filters: config.fixedFilters })?.filters;
+    if (config.fixedFilters !== undefined && fixedFilters === undefined) {
+        throw new Error("Table fixedFilters must map filter keys to query values.");
+    }
     const presentationControls = parsePhiControlPresentationConfig(presentation);
     const toolsMode = tools.mode === "external" ? "external" : "self-contained";
     const toolsReset = readBoolean(tools.reset);
@@ -489,7 +523,7 @@ export function parsePhiTableWidgetConfig(config) {
     return {
         presentation: {
             ...presentationControls,
-            controlSize: presentationControls.controlSize ?? (toolsMode === "self-contained" ? "small" : undefined),
+            controlSize: presentationControls.controlSize ?? (toolsMode === "self-contained" ? "small" : "medium"),
             title: readString(presentation.title),
             description: readString(presentation.description),
             columns: readColumns(presentation.columns),
@@ -530,6 +564,12 @@ export function parsePhiTableWidgetConfig(config) {
                 mode: rowSelection.mode === "single" || rowSelection.mode === "multiple" ? rowSelection.mode : "none",
                 preserveSelectedRowIdentities: readBoolean(rowSelection.preserveSelectedRowIdentities),
                 disabledWhen: readConditionExpression(rowSelection.disabledWhen),
+                ...(Array.isArray(rowSelection.emitFields) ? {
+                    emitFields: rowSelection.emitFields.flatMap((field) => {
+                        const key = readString(field)?.trim();
+                        return key ? [key] : [];
+                    }),
+                } : {}),
             },
             rowReordering: {
                 enabled: readBoolean(rowReordering.enabled),
@@ -613,6 +653,7 @@ export function parsePhiTableWidgetConfig(config) {
             ...initialQuery,
             sorts: initialQuery.sorts,
         },
+        ...(fixedFilters ? { fixedFilters } : {}),
         source: readPhiProviderResourceSource(config.source),
         signalRoutes: readPhiSignalRouteSet(config.signalRoutes),
     };
@@ -808,6 +849,13 @@ export const PHI_TABLE_WIDGET_DEFINITION = {
                         { value: "icon-picker", label: "Icon picker" },
                     ],
                 },
+                // The unit beside a number editor; the column title names the value, not its unit.
+                {
+                    key: "editor.prefix",
+                    type: "string",
+                    label: "Editor Unit",
+                    visibleWhen: { field: "editor.enabled", equals: true },
+                },
                 ...buildPhiTableConditionExpressionConfigFields("editor.disabledWhen", "Editor Disabled Conditions", "any", "No disabled conditions").map((field) => ({ ...field, visibleWhen: { field: "editor.enabled", equals: true } })),
                 { key: "hidden", type: "boolean", label: "Hidden" },
                 { key: "ellipsis", type: "boolean", label: "Ellipsis" },

package/plugins/runtime-modules/core/widgets/theme-mode-switch/authoring.js

@@ -1,12 +1,13 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { PHI_THEME_MODE_SWITCH_WIDGET_DEFAULT_LABELS } from "../../../../../components/widgets/label-types/theme-mode-switch";
 import { PhiThemeModeSwitchWidget } from "./client";
 import { PHI_THEME_MODE_SWITCH_WIDGET_DEFINITION, } from "./config";
 export const PHI_THEME_MODE_SWITCH_WIDGET_BUILDER_PLUGIN = {
     ...PHI_THEME_MODE_SWITCH_WIDGET_DEFINITION,
     /*
-     * Drawn, not armed: an author arranging a Page should see the switch in the mode they are working
+     * Drawn, not armed: an author arranging a Page should see the button in the mode they are working
      * in, and should not flip the whole Builder by dragging it into place.
      */
-    renderEditor: ({ runtime, config }) => (_jsx(PhiThemeModeSwitchWidget, { runtime: runtime, config: config, signalsEnabled: false })),
+    renderEditor: ({ config }) => (_jsx(PhiThemeModeSwitchWidget, { config: config, labels: PHI_THEME_MODE_SWITCH_WIDGET_DEFAULT_LABELS, signalsEnabled: false })),
 };

package/plugins/runtime-modules/core/widgets/theme-mode-switch/client.d.ts

@@ -1,20 +1,24 @@
-import type { PhiBlockRuntime } from "../../../../../types";
 import type { PhiThemeModeSwitchWidgetConfig } from "./config";
+import type { PhiThemeModeSwitchWidgetLabels } from "../../../../../components/widgets/label-types/theme-mode-switch";
 /**
  * Light or dark, read from the mode that is on screen and written to the one address that owns it.
  *
+ * A sun or a moon on a round button, and nothing else. It used to be the generic Switch with a label,
+ * which brought a form field's whole frame -- label, name, hover text, tooltip -- onto every page that
+ * has a header. The button shows the mode the page is in; its accessible name says what pressing it does.
+ *
  * The state is not kept here and not carried in. `usePhiConfig()` is the same context that hands every
- * Widget its tokens, so what this draws cannot disagree with what the page looks like -- a switch that
+ * Widget its tokens, so what this draws cannot disagree with what the page looks like -- a button that
  * mounts inside an Overlay opened an hour later starts out correct, with nobody having told it.
  *
- * Flipping it is the one thing that is an event, and it is sent as one: to the Core Runtime Controller,
+ * Pressing it is the one thing that is an event, and it is sent as one: to the Core Runtime Controller,
  * in Site scope, which is where the preference is kept for this browser and stored on the account.
  */
-export declare function PhiThemeModeSwitchWidget({ config, disabled, readOnly, signalsEnabled, }: {
+export declare function PhiThemeModeSwitchWidget({ config, labels, disabled, readOnly, signalsEnabled, }: {
     config?: PhiThemeModeSwitchWidgetConfig | null;
+    labels: PhiThemeModeSwitchWidgetLabels;
     blockId?: string | number | null;
     disabled?: boolean;
     readOnly?: boolean;
     signalsEnabled?: boolean;
-    runtime?: PhiBlockRuntime;
 }): import("react").JSX.Element;

package/plugins/runtime-modules/core/widgets/theme-mode-switch/client.js

@@ -1,37 +1,42 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { MoonOutlined, SunOutlined } from "@ant-design/icons";
 import { usePhiConfig } from "../../../../../components/root/phi-config-provider";
 import { usePhiSignalDispatcher } from "../../../../../components/runtime/runtime-signal-bus";
 import { createPhiCoreRuntimeControllerAddress } from "../../../../../components/runtime/core-runtime-controller-address";
-import { PhiSwitchControl } from "../../../../../components/controls/phi-switch-control";
+import { PhiButtonControl } from "../../../../../components/controls/phi-button-control";
+import { PhiIcon } from "../../../../../components/shell/phi-icon";
 /**
  * Light or dark, read from the mode that is on screen and written to the one address that owns it.
  *
+ * A sun or a moon on a round button, and nothing else. It used to be the generic Switch with a label,
+ * which brought a form field's whole frame -- label, name, hover text, tooltip -- onto every page that
+ * has a header. The button shows the mode the page is in; its accessible name says what pressing it does.
+ *
  * The state is not kept here and not carried in. `usePhiConfig()` is the same context that hands every
- * Widget its tokens, so what this draws cannot disagree with what the page looks like -- a switch that
+ * Widget its tokens, so what this draws cannot disagree with what the page looks like -- a button that
  * mounts inside an Overlay opened an hour later starts out correct, with nobody having told it.
  *
- * Flipping it is the one thing that is an event, and it is sent as one: to the Core Runtime Controller,
+ * Pressing it is the one thing that is an event, and it is sent as one: to the Core Runtime Controller,
  * in Site scope, which is where the preference is kept for this browser and stored on the account.
  */
-export function PhiThemeModeSwitchWidget({ config, disabled, readOnly, signalsEnabled = true, }) {
+export function PhiThemeModeSwitchWidget({ config, labels, disabled, readOnly, signalsEnabled = true, }) {
     const { mode } = usePhiConfig();
     const dispatchSignal = usePhiSignalDispatcher();
-    function requestMode(nextChecked) {
+    const dark = mode === "dark";
+    function requestMode() {
         /*
          * Nothing is set here and nothing waits for an answer. The Controller applies the mode, and this
-         * Widget draws whatever `usePhiConfig()` then reports -- so the switch cannot come to rest in a
-         * position the Site is not actually in, which is exactly what a local `useState` would allow.
+         * Widget draws whatever `usePhiConfig()` then reports -- so the button cannot come to rest showing
+         * a mode the Site is not actually in, which is exactly what a local `useState` would allow.
          */
         dispatchSignal({
             scope: "site",
             channel: "themeMode",
             action: "change",
-            value: nextChecked,
+            value: !dark,
             valueType: "boolean",
             receiver: createPhiCoreRuntimeControllerAddress(),
         });
     }
-    return (_jsx(PhiSwitchControl, { checked: mode === "dark", disabled: disabled, readOnly: readOnly || !signalsEnabled, size: config?.controlSize, label: config?.label, checkedLabel: _jsx(MoonOutlined, {}), uncheckedLabel: _jsx(SunOutlined, {}), onChange: requestMode }));
+    return (_jsx(PhiButtonControl, { type: "text", shape: "circle", size: config?.controlSize, icon: _jsx(PhiIcon, { name: dark ? "moon" : "sun", size: "inherit" }), ariaLabel: dark ? labels.switchToLight : labels.switchToDark, disabled: disabled, readOnly: readOnly || !signalsEnabled, onClick: requestMode }));
 }

package/plugins/runtime-modules/core/widgets/theme-mode-switch/config.d.ts

@@ -8,14 +8,13 @@ import { type PhiCmsWidgetConfigBase } from "../../../../../components/widgets/c
  * every Widget its tokens -- so there is no `defaultChecked` to fall out of step with what is on
  * screen, and nothing to wire up for the switch to follow a change made elsewhere.
  *
- * What is left to configure is its label and its size. The two positions wear a sun and a moon, not
- * words: they read in every locale, and a translated word the width of the track would only crowd it.
+ * What is left to configure is its size. It is a round button wearing a sun or a moon, not words: they
+ * read in every locale, and its accessible name comes from a Label Set rather than from the placement.
  */
 export type PhiThemeModeSwitchWidgetConfig = PhiCmsWidgetConfigBase & {
-    label?: string;
     controlSize?: PhiThemeModeSwitchSize;
 };
-export declare function parsePhiThemeModeSwitchWidgetConfig(config: Record<string, unknown>): PhiThemeModeSwitchWidgetConfig;
+declare function parsePhiThemeModeSwitchWidgetConfig(config: Record<string, unknown>): PhiThemeModeSwitchWidgetConfig;
 export declare const PHI_THEME_MODE_SWITCH_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
@@ -25,7 +24,7 @@ export declare const PHI_THEME_MODE_SWITCH_WIDGET_DEFINITION: {
     category: "form";
     iconFamily: string;
     slotSizePolicy: "intrinsic";
-    fields: ({
+    fields: {
         options: {
             value: string;
             label: string;
@@ -33,11 +32,8 @@ export declare const PHI_THEME_MODE_SWITCH_WIDGET_DEFINITION: {
         key: string;
         type: "choice";
         label: string;
-    } | {
-        key: string;
-        type: "string";
-        label: string;
-    })[];
+    }[];
     defaultConfig: {};
     parseConfig: typeof parsePhiThemeModeSwitchWidgetConfig;
 };
+export {};

package/plugins/runtime-modules/core/widgets/theme-mode-switch/config.js

@@ -1,14 +1,13 @@
 import { resolvePhiCmsWidgetPluginKey } from "../../../../../constants/cms-widget-types";
-import { readRenderableBlockConfig, readString, } from "../../../../../components/widgets/config/parser-primitives";
+import { readRenderableBlockConfig, } from "../../../../../components/widgets/config/parser-primitives";
 import { PHI_COMPACT_CONTROL_PRESENTATION_FIELDS } from "../../../../../components/widgets/config/control-signal-config";
 function readSize(value) {
     return value === "small" || value === "medium" ? value : undefined;
 }
-export function parsePhiThemeModeSwitchWidgetConfig(config) {
+function parsePhiThemeModeSwitchWidgetConfig(config) {
     return {
         ...readRenderableBlockConfig(config),
-        label: readString(config.label),
-        controlSize: readSize(config.controlSize),
+        controlSize: readSize(config.controlSize) ?? "medium",
     };
 }
 export const PHI_THEME_MODE_SWITCH_WIDGET_DEFINITION = {
@@ -31,7 +30,6 @@ export const PHI_THEME_MODE_SWITCH_WIDGET_DEFINITION = {
      * placement to point the switch somewhere that cannot change anything.
      */
     fields: [
-        { key: "label", type: "string", label: "Label" },
         ...PHI_COMPACT_CONTROL_PRESENTATION_FIELDS,
     ],
     defaultConfig: {},

package/plugins/runtime-modules/core/widgets/theme-mode-switch/plugin.js

@@ -1,18 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
-import { PhiRuntimeModuleRenderClientHost } from "../../../../../components/runtime/runtime-module-render-client-manifest";
 import { PHI_THEME_MODE_SWITCH_WIDGET_DEFINITION, } from "./config";
+import { PhiThemeModeSwitchWidgetServer } from "./server";
 export const PHI_THEME_MODE_SWITCH_WIDGET_PLUGIN = {
     ...PHI_THEME_MODE_SWITCH_WIDGET_DEFINITION,
-    render: ({ widget, config }) => (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.ThemeModeSwitch, componentProps: { blockId: widget.id, config } })),
-    /*
-     * A preview may not change the Site it is previewing. `signalsEnabled: false` is what stops the
-     * flip from reaching the Controller; the switch still draws the mode, because that is read.
-     */
-    renderPreview: ({ widget, config }) => (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.ThemeModeSwitch, componentProps: {
-            blockId: widget.id,
-            config,
-            disabled: true,
-            signalsEnabled: false,
-        } })),
+    render: ({ widget, config, runtime }) => (_jsx(PhiThemeModeSwitchWidgetServer, { blockId: widget.id, config: config, runtime: runtime })),
+    renderPreview: ({ widget, config, runtime }) => (_jsx(PhiThemeModeSwitchWidgetServer, { blockId: widget.id, config: config, runtime: runtime, preview: true })),
 };

package/plugins/runtime-modules/core/widgets/theme-mode-switch/server.d.ts

@@ -0,0 +1,9 @@
+import type { PhiBlockRuntime } from "../../../../../types";
+import type { PhiThemeModeSwitchWidgetConfig } from "./config";
+/** The labels are the button's accessible name, translated here because a Widget client has no translation. */
+export declare function PhiThemeModeSwitchWidgetServer({ blockId, config, runtime, preview, }: {
+    blockId: string | number;
+    config: PhiThemeModeSwitchWidgetConfig;
+    runtime: PhiBlockRuntime;
+    preview?: boolean;
+}): Promise<import("react").JSX.Element>;

package/plugins/runtime-modules/core/widgets/theme-mode-switch/server.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
+import { PhiRuntimeModuleRenderClientHost } from "../../../../../components/runtime/runtime-module-render-client-manifest";
+import { getPhiThemeModeSwitchWidgetLabels } from "../../../../../components/widgets/label-sets/theme-mode-switch";
+import { readPhiServerApiCredentials } from "../../../../../helpers/phis-server-credentials";
+/** The labels are the button's accessible name, translated here because a Widget client has no translation. */
+export async function PhiThemeModeSwitchWidgetServer({ blockId, config, runtime, preview = false, }) {
+    const labels = await getPhiThemeModeSwitchWidgetLabels({
+        apiBaseUrl: readPhiServerApiCredentials().apiBaseUrl,
+        internalToken: readPhiServerApiCredentials().internalToken,
+        locale: runtime.locale.current,
+    });
+    return (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.ThemeModeSwitch, componentProps: {
+            blockId,
+            config,
+            labels,
+            /*
+             * A preview may not change the Site it is previewing. `signalsEnabled: false` is what stops the
+             * flip from reaching the Controller; the button still draws the mode, because that is read.
+             */
+            ...(preview ? { disabled: true, signalsEnabled: false } : {}),
+        } }));
+}

package/plugins/runtime-modules/{threads → core}/widgets/thread-conversation/client.d.ts

@@ -1,6 +1,6 @@
 import type { PhiBlockRuntime, PhiClientBlockBaseProps } from "../../../../../types";
 import { type PhiThreadWidgetConfig } from "../thread-widget-config";
-import type { PhiThreadConversationLabels } from "../../../../../components/widgets/label-sets/threads";
+import type { PhiThreadConversationLabels } from "../../messaging/labels";
 export type PhiThreadConversationWidgetClientProps = PhiClientBlockBaseProps<PhiThreadConversationLabels, PhiThreadWidgetConfig, Pick<PhiBlockRuntime, "site" | "locale" | "viewer">> & {
     runtime: Pick<PhiBlockRuntime, "site" | "locale" | "viewer">;
 };

package/plugins/runtime-modules/{threads → core}/widgets/thread-conversation/client.js

@@ -8,6 +8,7 @@ import { PhiButtonControl } from "../../../../../components/controls/phi-button-
 import { PhiCardControl } from "../../../../../components/controls/phi-card-control";
 import { PhiDividerControl } from "../../../../../components/controls/phi-divider-control";
 import { PhiTagControl } from "../../../../../components/controls/phi-tag-control";
+import { PhiIcon } from "../../../../../components/shell/phi-icon";
 import { usePhiSignalListener } from "../../../../../components/runtime/runtime-signal-bus";
 import { usePhiSignalEmitter, usePhiSignalIdentity, } from "../../../../../components/runtime/runtime-signal-identity";
 import { findPhiSignalRoutesByCapabilityId } from "../../../../../types/signals";
@@ -93,7 +94,8 @@ export function PhiThreadConversationWidgetClient({ runtime, labels, config, })
      */
     const [loadedThread, setLoadedThread] = useState(null);
     const [failedThread, setFailedThread] = useState(null);
-    const [loadingOlder, setLoadingOlder] = useState(false);
+    const [loadingOlderThreadId, setLoadingOlderThreadId] = useState(null);
+    const olderRequest = useRef(null);
     /*
      * The one language the control offers, or null for no control.
      *
@@ -115,6 +117,7 @@ export function PhiThreadConversationWidgetClient({ runtime, labels, config, })
     const [translations, setTranslations] = useState({});
     const detail = loadedThread?.id === threadId ? loadedThread.detail : null;
     const error = failedThread?.id === threadId ? failedThread.message : null;
+    const loadingOlder = loadingOlderThreadId != null && loadingOlderThreadId === threadId;
     /*
      * The last conversation everybody on this page already knows about.
      *
@@ -131,6 +134,48 @@ export function PhiThreadConversationWidgetClient({ runtime, labels, config, })
         }
         setFailedThread({ id, message: readFailureText(result.failure, labels) });
     }, [labels]);
+    /*
+     * The newest window again, for a conversation already on screen: after a reply, or when the same one is
+     * chosen once more (which is also the way back from a failure). Older messages somebody already loaded
+     * stay where they are as long as the new window reaches back to them; with a gap in between, the new
+     * window alone is what is true.
+     */
+    const refresh = useCallback(async (id) => {
+        const result = await fetchPhiThreadDetail(id);
+        if (!result.ok) {
+            receive(id, result);
+            return;
+        }
+        setFailedThread(null);
+        setLoadedThread((current) => {
+            if (current?.id !== id) {
+                return { id, detail: result.detail };
+            }
+            const firstFresh = result.detail.messages[0]?.id;
+            const lastKept = current.detail.messages.at(-1)?.id;
+            const reaches = !result.detail.hasMoreMessages
+                || (firstFresh != null && lastKept != null && firstFresh <= lastKept);
+            const older = reaches && firstFresh != null
+                ? current.detail.messages.filter((message) => message.id < firstFresh)
+                : [];
+            if (older.length === 0) {
+                return { id, detail: result.detail };
+            }
+            return {
+                id,
+                detail: {
+                    ...result.detail,
+                    hasMoreMessages: current.detail.hasMoreMessages,
+                    messages: [...older, ...result.detail.messages],
+                },
+            };
+        });
+    }, [receive]);
+    useEffect(() => () => {
+        // Older messages asked for one conversation have no place in the next one.
+        olderRequest.current?.abort();
+        olderRequest.current = null;
+    }, [threadId]);
     useEffect(() => {
         if (threadId == null) {
             return;
@@ -181,6 +226,11 @@ export function PhiThreadConversationWidgetClient({ runtime, labels, config, })
         if (route?.capabilityId === "select") {
             const next = readPhiThreadSignalValue(signal.value)?.threadId ?? null;
             announcedThreadId.current = next;
+            if (next != null && next === threadId) {
+                // The same conversation again changes no state, so it is asked for here.
+                void refresh(next);
+                return;
+            }
             setThreadId(next);
             return;
         }
@@ -192,8 +242,8 @@ export function PhiThreadConversationWidgetClient({ runtime, labels, config, })
         if (written == null || written !== threadId) {
             return;
         }
-        void fetchPhiThreadDetail(written).then((result) => receive(written, result));
-    }, [identity.receiver, listenRoutes, receive, threadId]), useMemo(() => buildPhiThreadListenFilter(listenRoutes, identity.receiver), [identity.receiver, listenRoutes]), 
+        void refresh(written);
+    }, [identity.receiver, listenRoutes, refresh, threadId]), useMemo(() => buildPhiThreadListenFilter(listenRoutes, identity.receiver), [identity.receiver, listenRoutes]), 
     // Named here and not only inside the filter: this is what tells the bus somebody answers for the
     // address, and a signal sent to an address nobody answers for is held rather than refused.
     identity.receiver);
@@ -224,6 +274,29 @@ export function PhiThreadConversationWidgetClient({ runtime, labels, config, })
             });
         }
     }, [config?.signalRoutes?.emits, emitSignal, openedThreadId]);
+    /*
+     * Reply, said as a row action: the open thread is the row. Whoever listens -- a dialog with Core's Reply
+     * Form, usually -- opens on it and reads the thread from there.
+     */
+    const reply = useCallback(() => {
+        if (threadId == null)
+            return;
+        for (const route of findPhiSignalRoutesByCapabilityId(config?.signalRoutes?.emits, "reply")) {
+            if (route.receiver == null)
+                continue;
+            emitSignal({
+                scope: route.scope,
+                channel: route.channel,
+                action: route.action,
+                value: route.valueType === "none"
+                    ? null
+                    : { actionKey: "reply", rowIdentity: threadId, selectedRowIdentities: [threadId] },
+                valueType: route.valueType,
+                valueSchema: route.valueSchema ?? null,
+                receiver: route.receiver,
+            });
+        }
+    }, [config?.signalRoutes?.emits, emitSignal, threadId]);
     const newestMessageId = detail?.messages.at(-1)?.id ?? null;
     useEffect(() => {
         // Read means shown. The marker moves to the newest message actually on screen, so a conversation
@@ -242,28 +315,40 @@ export function PhiThreadConversationWidgetClient({ runtime, labels, config, })
     }, [newestMessageId, openedThreadId]);
     const loadOlder = useCallback(async () => {
         const oldest = detail?.messages[0]?.id;
-        if (openedThreadId == null || oldest == null) {
+        const id = openedThreadId;
+        if (id == null || oldest == null) {
             return;
         }
-        setLoadingOlder(true);
+        olderRequest.current?.abort();
+        const controller = new AbortController();
+        olderRequest.current = controller;
+        setLoadingOlderThreadId(id);
         try {
-            const result = await fetchPhiThreadDetail(openedThreadId, { beforeMessageId: oldest });
+            const result = await fetchPhiThreadDetail(id, { beforeMessageId: oldest, signal: controller.signal });
+            if (controller.signal.aborted) {
+                return;
+            }
             if (!result.ok) {
-                setFailedThread({ id: openedThreadId, message: readFailureText(result.failure, labels) });
+                setFailedThread({ id, message: readFailureText(result.failure, labels) });
                 return;
             }
-            setLoadedThread((current) => current && ({
-                id: current.id,
+            setFailedThread(null);
+            setLoadedThread((current) => current?.id === id ? {
+                id,
                 detail: {
-                    ...result.detail,
+                    ...current.detail,
                     // The older window's own `hasMoreMessages` is the one that still means something; what is
                     // already on screen is kept rather than refetched, so nothing a person is reading moves.
+                    hasMoreMessages: result.detail.hasMoreMessages,
                     messages: [...result.detail.messages, ...current.detail.messages],
                 },
-            }));
+            } : current);
         }
         finally {
-            setLoadingOlder(false);
+            if (olderRequest.current === controller) {
+                olderRequest.current = null;
+                setLoadingOlderThreadId(null);
+            }
         }
     }, [detail, labels, openedThreadId]);
     /**
@@ -382,13 +467,13 @@ export function PhiThreadConversationWidgetClient({ runtime, labels, config, })
     if (threadId == null) {
         return (_jsx(PhiCardControl, { padding: config?.padding, children: _jsx(PhiTypographyControl, { type: "secondary", children: labels.noThreadText }) }));
     }
-    if (error) {
+    if (error && !detail) {
         return (_jsx(PhiCardControl, { padding: config?.padding, children: _jsx(PhiAlertControl, { level: "error", title: labels.feedback.errorTitle, description: error }) }));
     }
     if (!detail) {
         return (_jsx(PhiCardControl, { padding: config?.padding, children: _jsx(PhiTypographyControl, { type: "secondary", children: labels.loadingText }) }));
     }
-    return (_jsx(_Fragment, { children: _jsx(PhiCardControl, { padding: config?.padding, title: _jsxs(PhiFlexControl, { align: "center", gap: "small", wrap: true, children: [readThreadTitle(detail, labels), detail.thread.status === PhisThreadStatus.Archived ? (_jsx(PhiTagControl, { children: labels.archivedLabel })) : null] }), children: _jsxs(PhiFlexControl, { vertical: true, gap: "middle", children: [detail.hasMoreMessages ? (_jsx(PhiButtonControl, { label: labels.olderLabel, type: "link", loading: loadingOlder, onClick: () => void loadOlder() })) : null, detail.messages.length === 0 ? (_jsx(PhiTypographyControl, { type: "secondary", children: labels.emptyText })) : (detail.messages.map((message, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx(PhiDividerControl, { style: { margin: 0 } }) : null, _jsx(PhiThreadMessageRow, { message: message, labels: labels, formatTime: formatTime, formatLanguage: formatLanguage, translation: translations[message.id] ?? null, canTranslate: translationTarget != null, onTranslate: translate })] }, message.id))))] }) }) }));
+    return (_jsx(_Fragment, { children: _jsx(PhiCardControl, { padding: config?.padding, toolbar: config?.reply && detail.thread.status !== PhisThreadStatus.Archived ? (_jsx(PhiButtonControl, { label: labels.replyLabel, icon: _jsx(PhiIcon, { name: "antd:message-outlined", size: "inherit" }), size: "small", onClick: reply })) : undefined, title: _jsxs(PhiFlexControl, { align: "center", gap: "small", wrap: true, children: [readThreadTitle(detail, labels), detail.thread.status === PhisThreadStatus.Archived ? (_jsx(PhiTagControl, { children: labels.archivedLabel })) : null] }), children: _jsxs(PhiFlexControl, { vertical: true, gap: "middle", children: [detail.thread.subject?.trim() && detail.participants.length > 0 ? (_jsx(PhiTypographyControl, { type: "secondary", children: `${labels.participantsLabel}: ${readParticipantNames(detail, labels).join(", ")}` })) : null, error ? (_jsx(PhiAlertControl, { level: "error", title: labels.feedback.errorTitle, description: error })) : null, detail.hasMoreMessages ? (_jsx(PhiButtonControl, { label: labels.olderLabel, type: "link", loading: loadingOlder, onClick: () => void loadOlder() })) : null, detail.messages.length === 0 ? (_jsx(PhiTypographyControl, { type: "secondary", children: labels.emptyText })) : (detail.messages.map((message, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx(PhiDividerControl, { style: { margin: 0 } }) : null, _jsx(PhiThreadMessageRow, { message: message, labels: labels, formatTime: formatTime, formatLanguage: formatLanguage, translation: translations[message.id] ?? null, canTranslate: translationTarget != null, onTranslate: translate })] }, message.id))))] }) }) }));
 }
 /**
  * What to call this conversation.
@@ -405,12 +490,15 @@ function readThreadTitle(detail, labels) {
     if (subject) {
         return subject;
     }
-    const names = detail.participants
+    const names = readParticipantNames(detail, labels);
+    return names.length > 0 ? names.join(", ") : labels.subjectFallback;
+}
+function readParticipantNames(detail, labels) {
+    return detail.participants
         .map((participant) => participant.kind === "group"
         ? participant.name
         : participant.user.displayName ?? labels.unnamedAuthorLabel)
         .filter((name) => name.length > 0);
-    return names.length > 0 ? names.join(", ") : labels.subjectFallback;
 }
 function readAuthorName(author, labels) {
     if (author.kind === "user") {

package/plugins/runtime-modules/{threads → core}/widgets/thread-conversation/config.d.ts

@@ -16,7 +16,7 @@ export declare const PHI_THREAD_CONVERSATION_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
     typeKey: string;
-    slotSizePolicy: "intrinsic";
+    slotSizePolicy: "fill-inline";
     title: string;
     description: string;
     category: "content";
@@ -34,13 +34,22 @@ export declare const PHI_THREAD_CONVERSATION_WIDGET_DEFINITION: {
             valueType: "json";
             valueSchema: `${string}/signals/${string}`;
         })[];
-        emits: {
+        emits: ({
             id: string;
             action: "change";
             valueType: "json";
             valueSchema: `${string}/signals/${string}`;
-        }[];
+        } | {
+            id: string;
+            action: "activate";
+            valueType: "json";
+            valueSchema: `${string}/signals/${string}`;
+        })[];
     };
-    fields: never[];
+    fields: {
+        key: string;
+        type: "boolean";
+        label: string;
+    }[];
     parseConfig: typeof parsePhiThreadWidgetConfig;
 };

package/plugins/runtime-modules/{threads → core}/widgets/thread-conversation/config.js

@@ -18,7 +18,8 @@ export const PHI_THREAD_CONVERSATION_WIDGET_DEFINITION = {
     kind: "widget",
     pluginKey: resolvePhiCmsWidgetPluginKey("thread-conversation"),
     typeKey: "thread-conversation",
-    slotSizePolicy: "intrinsic",
+    // Across its slot and as tall as what it says: a conversation reads at the width it is given.
+    slotSizePolicy: "fill-inline",
     title: "Conversation",
     description: "Reads the selected conversation: its messages, who wrote them, and what hangs on them.",
     category: "content",
@@ -52,8 +53,13 @@ export const PHI_THREAD_CONVERSATION_WIDGET_DEFINITION = {
         ],
         emits: [
             { id: "opened", action: "change", valueType: "json", valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.threadSelection },
+            /*
+             * The Reply action, as a row action says one: the thread is the row. Whatever opens the reply --
+             * a dialog, a Form beside it -- reads the thread from there, the way a Form opens on a Table row.
+             */
+            { id: "reply", action: "activate", valueType: "json", valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.tableAction },
         ],
     },
-    fields: [],
+    fields: [{ key: "reply", type: "boolean", label: "Offer a reply" }],
     parseConfig: parsePhiThreadWidgetConfig,
 };

package/plugins/runtime-modules/{threads → core}/widgets/thread-conversation/server.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getPhiThreadConversationLabels } from "../../../../../components/widgets/label-sets/threads";
+import { getPhiThreadConversationLabels } from "../../messaging/labels";
 import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { PhiRuntimeModuleRenderClientHost } from "../../../../../components/runtime/runtime-module-render-client-manifest";
 import { readPhiServerApiCredentials } from "../../../../../helpers/phis-server-credentials";