@kortix/ui 0.14.9 → 0.14.11

package/dist/session/thread/session-context-sub-sessions.js

@@ -52,7 +52,7 @@ function WithOneThread({ source, id, rest, pricingLookup, acc, children, }) {
 }
 /**
  * Loads a sub-agent's thread into the store, as the sub-agent's own view does (`useSessionSync`
- * with `savedChild`): its saved window, then the runtime's. The section mounts one per requested
+ * with `savedChild`): the session's log, then the runtime's. The section mounts one per requested
  * id (a row that scrolled into view, or "Load all"), outside the tree, so collapsing a row
  * does not unload its children. Reports whether its last runtime read failed.
  */

package/dist/session/thread/session-thread.d.ts

@@ -11,6 +11,9 @@
  * Alone, it has no side panel: its "open in the panel" actions (Preview, file
  * chips, Terminal, Browser) open an overlay (`SessionPanelFallback`). Inside
  * `SessionWorkspace` they open in the side panel.
+ *
+ * A host that just created the session passes `firstPrompt`: the prompt shows
+ * at once, as the turn the transcript will draw, while the computer boots.
  */
 import type { UseSessionResult } from '@kortix/sdk/react';
 import '../tool/tools/register.js';
@@ -32,6 +35,15 @@ export interface SessionThreadProps {
         id: number;
         text: string;
     } | null;
+    /**
+     * The first prompt of a session this host just created, as sent. Drawn at
+     * once (the prompt and the agent's Thinking row) while the computer boots,
+     * then handed to the transcript without a jump. Pass it only for that
+     * fresh session: the transcript draws its prompts from then on.
+     */
+    firstPrompt?: string;
+    /** `compact`: tighter gutters for a narrow column (a side sheet). Default: the session page's. */
+    density?: 'default' | 'compact';
     className?: string;
 }
-export declare function SessionThread({ session, hideHeader, readOnly, composerPlaceholder, quote, className, }: SessionThreadProps): import("react").JSX.Element;
+export declare function SessionThread({ session, hideHeader, readOnly, composerPlaceholder, quote, firstPrompt, density, className, }: SessionThreadProps): import("react").JSX.Element;

package/dist/session/thread/session-thread.js

@@ -1,20 +1,30 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect } from 'react';
 import { cn } from '../../lib/utils.js';
 import { ProjectScope } from '../../internal/project-scope.js';
+import { useFirstPromptPreviewStore } from '../composer/stores/session-composer-handoff-store.js';
 import { ProviderPoolDraftBoundary } from '../overrides/provider-pool-draft-context.js';
 import { SessionPanelFallback } from '../panel/panel-fallback.js';
 import { SessionChat } from './session-chat.js';
 import { SessionStartingLoader } from '../status/session-starting-loader.js';
+import { OptimisticTurn } from './optimistic-turn.js';
+import { SESSION_TRANSCRIPT_CLASS } from './session-transcript-class.js';
 import { ThreadBootRows } from './thread-boot-rows.js';
 import { TranscriptRowsContext } from './transcript-rows.js';
 import '../tool/tools/register.js';
-export function SessionThread({ session, hideHeader = false, readOnly = false, composerPlaceholder, quote, className, }) {
+export function SessionThread({ session, hideHeader = false, readOnly = false, composerPlaceholder, quote, firstPrompt, density = 'default', className, }) {
     const { projectId, sessionId, runtimeSessionId } = session;
     const rows = useContext(TranscriptRowsContext) !== null;
-    return (_jsx(ProjectScope, { projectId: projectId, sessionId: sessionId, children: _jsx(ProviderPoolDraftBoundary, { identity: `${projectId}/${sessionId}`, children: _jsxs("div", { "data-slot": "session-thread", className: cn('relative flex h-full min-h-0 flex-col', className), children: [runtimeSessionId ? (_jsx(SessionChat, { sessionId: runtimeSessionId, projectSessionId: sessionId, projectId: projectId, sessionState: session, hideHeader: hideHeader, readOnly: readOnly, composerPlaceholder: composerPlaceholder, hostQuote: quote }, runtimeSessionId)) : rows ? (
+    // The same stand-in the instant session shell hands `SessionChat`: it draws
+    // the prompt until its transcript has it, then forgets it.
+    const bootPrompt = useFirstPromptPreviewStore((state) => state.previewBySession[sessionId]?.text ?? null) ?? (firstPrompt?.trim() || null);
+    useEffect(() => {
+        if (firstPrompt?.trim())
+            useFirstPromptPreviewStore.getState().setFirstPromptPreview(sessionId, firstPrompt, []);
+    }, [sessionId, firstPrompt]);
+    return (_jsx(ProjectScope, { projectId: projectId, sessionId: sessionId, children: _jsx(ProviderPoolDraftBoundary, { identity: `${projectId}/${sessionId}`, children: _jsxs("div", { "data-slot": "session-thread", "data-density": density, className: cn('group/thread relative flex h-full min-h-0 flex-col', className), children: [runtimeSessionId ? (_jsx(SessionChat, { sessionId: runtimeSessionId, projectSessionId: sessionId, projectId: projectId, sessionState: session, hideHeader: hideHeader, readOnly: readOnly, composerPlaceholder: composerPlaceholder, hostQuote: quote }, runtimeSessionId)) : rows ? (
                     // A channel thread: its prompt, the agent's busy row and the reply
                     // box from the first frame, while the computer comes up.
-                    _jsx(ThreadBootRows, { projectId: projectId, sessionId: sessionId, composerPlaceholder: composerPlaceholder, readOnly: readOnly })) : (_jsx(SessionStartingLoader, { projectId: projectId, sessionId: sessionId })), _jsx(SessionPanelFallback, { projectId: projectId, projectSessionId: sessionId, runtimeSessionId: runtimeSessionId })] }) }) }));
+                    _jsx(ThreadBootRows, { projectId: projectId, sessionId: sessionId, composerPlaceholder: composerPlaceholder, readOnly: readOnly })) : bootPrompt ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "scrollbar-hide min-h-0 flex-1 overflow-y-auto", children: _jsx("div", { className: SESSION_TRANSCRIPT_CLASS, children: _jsx(OptimisticTurn, { text: bootPrompt, deferPreview: true, sessionId: sessionId }) }) }), _jsx("div", { className: "shrink-0", children: _jsx(SessionStartingLoader, { projectId: projectId, sessionId: sessionId }) })] })) : (_jsx(SessionStartingLoader, { projectId: projectId, sessionId: sessionId })), _jsx(SessionPanelFallback, { projectId: projectId, projectSessionId: sessionId, runtimeSessionId: runtimeSessionId })] }) }) }));
 }

package/dist/session/thread/session-transcript-class.d.ts

@@ -15,5 +15,9 @@
  * Its own module with no imports, so a surface that only needs the column (the
  * first chat on project home) does not pull `session-body.tsx`'s action panel
  * into its bundle. `session-body.tsx` re-exports it for the session surfaces.
+ *
+ * Inside a compact `SessionThread` (a narrow side column) the conversation's
+ * gutters and top inset tighten; the composer keeps its own. The gutters then
+ * match the composer's (`px-4`), so messages line up with the input card's edges.
  */
-export declare const SESSION_TRANSCRIPT_CLASS = "mx-auto w-full max-w-3xl min-w-0 px-7 pt-6";
+export declare const SESSION_TRANSCRIPT_CLASS = "mx-auto w-full max-w-3xl min-w-0 px-7 pt-6 group-data-[density=compact]/thread:px-4 group-data-[density=compact]/thread:pt-4";

package/dist/session/thread/session-transcript-class.js

@@ -15,5 +15,9 @@
  * Its own module with no imports, so a surface that only needs the column (the
  * first chat on project home) does not pull `session-body.tsx`'s action panel
  * into its bundle. `session-body.tsx` re-exports it for the session surfaces.
+ *
+ * Inside a compact `SessionThread` (a narrow side column) the conversation's
+ * gutters and top inset tighten; the composer keeps its own. The gutters then
+ * match the composer's (`px-4`), so messages line up with the input card's edges.
  */
-export const SESSION_TRANSCRIPT_CLASS = 'mx-auto w-full max-w-3xl min-w-0 px-7 pt-6';
+export const SESSION_TRANSCRIPT_CLASS = 'mx-auto w-full max-w-3xl min-w-0 px-7 pt-6 group-data-[density=compact]/thread:px-4 group-data-[density=compact]/thread:pt-4';

package/dist/session/tool/tools/image-gen-tool.d.ts

@@ -1,2 +1,2 @@
 import type { ToolProps } from '../shared/types.js';
-export declare function ImageGenTool({ call }: ToolProps): import("react").JSX.Element;
+export declare function ImageGenTool({ call }: ToolProps): import("react").JSX.Element | null;

package/dist/session/tool/tools/image-gen-tool.js

@@ -125,9 +125,10 @@ function ImageGenFrame({ image, seed, busy, model, fill, }) {
             useKortixComputerStore.getState().setIsExpanded(true);
         }
         : undefined;
-    return (_jsxs("div", { className: cn('group relative', fill && 'h-full'), children: [_jsx(ImageFrame, { aspectRatio: image.aspectRatio, fill: fill, maxHeight: fill ? undefined : IMAGE_MAX_HEIGHT, openLabel: image.prompt ? t('openFullScreenPrompt', { prompt: image.prompt }) : t('openFullScreen'), src: src, alt: image.prompt || t('generating'), pending: generating || (!src && !blobError), label: generating ? (busy) : blobError ? (_jsx(ImageUnavailable, { onRetry: retry })) : !src ? (_jsx(BusyLabel, { seed: seed, label: t('loading') })) : null, onOpen: openFullScreen, naturalRatio: naturalRatio, onNaturalSize: onNaturalSize }), src && openFullScreen ? (
-            // The one hint that the image opens full screen, on hover only; the whole frame is the button.
-            _jsx("span", { "data-image-gen-expand": "", "aria-hidden": "true", className: "bg-popover text-foreground pointer-events-none absolute top-1.5 right-1.5 flex size-6 items-center justify-center rounded-md opacity-0 shadow-xs transition-opacity duration-fast group-focus-within:opacity-100 group-hover:opacity-100", children: _jsx(ArrowsOutSimpleIcon, { className: "size-3.5" }) })) : null] }));
+    return (_jsx(ImageFrame, { className: "group", aspectRatio: image.aspectRatio, fill: fill, maxHeight: fill ? undefined : IMAGE_MAX_HEIGHT, openLabel: image.prompt ? t('openFullScreenPrompt', { prompt: image.prompt }) : t('openFullScreen'), src: src, alt: image.prompt || t('generating'), pending: generating || (!src && !blobError), label: generating ? (busy) : blobError ? (_jsx(ImageUnavailable, { onRetry: retry })) : !src ? (_jsx(BusyLabel, { seed: seed, label: t('loading') })) : null, onOpen: openFullScreen, naturalRatio: naturalRatio, onNaturalSize: onNaturalSize, children: src && openFullScreen ? (
+        // The one hint that the image opens full screen, on hover only; the whole frame is the button.
+        // A child of the frame: a tall image narrows the frame, and the hint stays on its corner.
+        _jsx("span", { "data-image-gen-expand": "", "aria-hidden": "true", className: "bg-popover text-foreground pointer-events-none absolute top-1.5 right-1.5 flex size-6 items-center justify-center rounded-md opacity-0 shadow-xs transition-opacity duration-fast group-focus-within:opacity-100 group-hover:opacity-100", children: _jsx(ArrowsOutSimpleIcon, { className: "size-3.5" }) })) : null }));
 }
 /**
  * The tallest a lone image or the bento may be (R33). The box narrows to
@@ -161,6 +162,8 @@ const cappedWidth = (rect) => `min(100%, calc(${IMAGE_MAX_HEIGHT} * ${rect}))`;
  * Five or more images (R38): ONE grid of six columns whose rows are the
  * bento patterns (`imageGenGrid().rows`: 5 = 3+2, 8 = 4+4, …). Every tile sits
  * in the same grid, placed by line numbers, so a tile is never re-parented.
+ * A strip (portrait tiles, `imageGenGrid().strip`) uses this grid at any count,
+ * with twelve columns: each row is its tiles side by side, one track tall.
  *
  * The grid is as wide as its tallest row allows under the cap (`width`), and
  * each row is exactly `width / rects[k]` tall (`rects[k]` = its tile ratio ×
@@ -171,19 +174,21 @@ const cappedWidth = (rect) => `min(100%, calc(${IMAGE_MAX_HEIGHT} * ${rect}))`;
  * summed below 1, e.g. 16:9 tiles.) A two-track row subtracts the gap between
  * its tracks, so a large tile spanning both is the row's height.
  */
-function gridPlacement(rows, rects) {
+function gridPlacement(rows, rects, strip) {
     const width = `min(100cqw, ${IMAGE_MAX_HEIGHT} * ${Math.min(...rects)})`;
     const tracks = [];
     const places = [];
     rows.forEach((count, row) => {
         const track = tracks.length + 1;
         const height = `${width} / ${rects[row]}`;
-        if (count === 2)
+        if (strip || count === 2)
             tracks.push(`calc(${height})`);
         else
             tracks.push(`calc((${height} - var(--spacing)) / 2)`, `calc((${height} - var(--spacing)) / 2)`);
         for (let i = 0; i < count; i++) {
-            if (count === 2)
+            if (strip)
+                places.push({ gridColumn: `${1 + (12 / count) * i} / span ${12 / count}`, gridRow: `${track}` });
+            else if (count === 2)
                 places.push({ gridColumn: `${1 + 3 * i} / span 3`, gridRow: `${track}` });
             else if (count === 4)
                 places.push({ gridColumn: `${1 + 3 * (i % 2)} / span 3`, gridRow: `${track + Math.floor(i / 2)}` });
@@ -205,13 +210,17 @@ export function ImageGenTool({ call }) {
     const views = useMemo(() => (run ? run.map(sessionLogOpenCall) : [call]).map((one) => imageGenView(one, inTurn ? live : undefined)), [run, call, inTurn, live]);
     const grid = useMemo(() => imageGenGrid(views), [views]);
     const view = views[0];
-    const solo = views.length === 1 && view.images.length === 1;
+    // One tile: a lone image, or one left beside calls the image cap refused.
+    const solo = grid.tiles.length === 1;
     // One fix per card, even when several frames failed for the same reason.
     const repairable = views.find((one) => one.error?.connectModel)?.error ??
         views.flatMap((one) => one.images).find((image) => image.error?.connectModel)?.error;
     const action = repairable ? _jsx(ConnectAction, { code: repairable.code, provider: repairable.provider }) : null;
     // The card carries no prompt and no model (R29): the frames are the content,
     // their status (busy, loading, an error) the only text.
+    // The image cap refused every call before any request: nothing was asked for, so nothing to show.
+    if (!grid.tiles.length)
+        return null;
     if (views.length === 1 && !view.images.length) {
         // The whole call failed or stopped.
         return (_jsx("div", { className: "w-full max-w-md", children: _jsx(FailureNote, { error: view.error, action: action }) }));
@@ -235,14 +244,15 @@ export function ImageGenTool({ call }) {
         return (_jsxs("figure", { className: "flex w-full flex-col gap-2", children: [frame(grid.tiles[0]), action ? _jsx("div", { className: "flex flex-col items-start", children: action }) : null] }));
     }
     const count = grid.tiles.length;
-    const bento = grid.rows.length === 1 ? BENTO[count] : null;
+    const bento = !grid.strip && grid.rows.length === 1 ? BENTO[count] : null;
+    // A row's rectangle over its tile ratio: a strip row is its tiles side by side.
     const rowRects = grid.rows.map((size, row) => {
         const firstTile = grid.tiles[grid.rows.slice(0, row).reduce((sum, n) => sum + n, 0)];
-        return ratioValue(views[firstTile.call].aspectRatio) * BENTO[size].scale;
+        return ratioValue(views[firstTile.call].aspectRatio) * (grid.strip ? size : BENTO[size].scale);
     });
-    const placed = bento ? null : gridPlacement(grid.rows, rowRects);
+    const placed = bento ? null : gridPlacement(grid.rows, rowRects, grid.strip);
     return (
     // An inline-size container: the merged grid sizes its rows from its width (`cqw`).
-    _jsxs("figure", { className: cn('flex w-full flex-col gap-2', !bento && '@container'), children: [_jsx("div", { ...(bento ? { 'data-image-gen-bento': count } : { 'data-image-gen-grid': grid.rows.join('+') }), className: cn('grid min-h-0 w-full gap-1', bento ? bento.grid : 'grid-cols-6'), style: placed ? placed.style : { aspectRatio: rowRects[0], width: cappedWidth(rowRects[0]) }, children: grid.tiles.map((tile, i) => (_jsx("div", { "data-image-gen-tile": i, className: cn('min-h-0 min-w-0', bento && i === 0 && bento.first), style: placed?.places[i], children: frame(tile) }, tileKey(tile, i)))) }), action ? _jsx("div", { className: "flex flex-col items-start", children: action }) : null] }));
+    _jsxs("figure", { className: cn('flex w-full flex-col gap-2', !bento && '@container'), children: [_jsx("div", { ...(bento ? { 'data-image-gen-bento': count } : { 'data-image-gen-grid': grid.rows.join('+'), ...(grid.strip && { 'data-image-gen-strip': '' }) }), className: cn('grid min-h-0 w-full gap-1', bento ? bento.grid : grid.strip ? 'grid-cols-12' : 'grid-cols-6'), style: placed ? placed.style : { aspectRatio: rowRects[0], width: cappedWidth(rowRects[0]) }, children: grid.tiles.map((tile, i) => (_jsx("div", { "data-image-gen-tile": i, className: cn('min-h-0 min-w-0', bento && i === 0 && bento.first), style: placed?.places[i], children: frame(tile) }, tileKey(tile, i)))) }), action ? _jsx("div", { className: "flex flex-col items-start", children: action }) : null] }));
 }
 ToolRegistry.register('image-gen', ImageGenTool);

package/dist/session/turn/user-message.d.ts

@@ -29,13 +29,15 @@ export declare function ChannelOrigin({ info, platform }: {
 }): import("react").JSX.Element;
 /**
  * A message that arrived from a chat channel (Slack / Microsoft Teams /
- * Telegram): a source pill — mark, platform, sender — over the same bubble a
- * typed message gets. Every `@name` in the text (`@Kortix`, `@KortixDev`,
- * `@here`) is a `MentionChip`, the chip the composer draws, static because a
- * channel mention opens nothing here. Exported for `channel-message-card.test.tsx`.
+ * Telegram): a source pill — mark, platform, sender — over the files the
+ * sender sent (the strip a composer upload gets) and the same bubble a typed
+ * message gets. Every `@name` in the text (`@Kortix`, `@KortixDev`, `@here`)
+ * is a `MentionChip`, the chip the composer draws, static because a channel
+ * mention opens nothing here. Exported for `channel-message-card.test.tsx`.
  */
-export declare function ChannelMessage({ info, actions, }: {
+export declare function ChannelMessage({ info, attachments, actions, }: {
     info: ChannelMessageInfo;
+    attachments?: NormalizedAttachment[];
     actions?: React.ReactNode;
 }): import("react").JSX.Element;
 export interface NormalizedAttachment {

package/dist/session/turn/user-message.js

@@ -13,7 +13,7 @@ import { fetchSessionAttachment, isSessionAttachmentRef, } from '@kortix/sdk';
 /** Moved from session-chat.tsx (`UserMessageRow`) so the turn module owns the
  *  user-message card. Full-width card, no reference chips. */
 import { useTranslations } from '../../i18n/index.js';
-import { expandPastedContent, neutralizePastedTags, sanitizePromptUploadFilename, serializePromptWithPastes, splitPastedContent, } from '../../_vendor/kortix-shared.js';
+import { channelPromptTail, isChannelFileLabel, expandPastedContent, neutralizePastedTags, sanitizePromptUploadFilename, serializePromptWithPastes, splitPastedContent, } from '../../_vendor/kortix-shared.js';
 import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { PencilSimpleIcon, AlarmIcon, ChatsTeardropIcon, LightningIcon, } from '@phosphor-icons/react';
 import { CopyButton } from '../../markdown/copy-button.js';
@@ -99,15 +99,16 @@ export function ChannelOrigin({ info, platform }) {
 }
 /**
  * A message that arrived from a chat channel (Slack / Microsoft Teams /
- * Telegram): a source pill — mark, platform, sender — over the same bubble a
- * typed message gets. Every `@name` in the text (`@Kortix`, `@KortixDev`,
- * `@here`) is a `MentionChip`, the chip the composer draws, static because a
- * channel mention opens nothing here. Exported for `channel-message-card.test.tsx`.
+ * Telegram): a source pill — mark, platform, sender — over the files the
+ * sender sent (the strip a composer upload gets) and the same bubble a typed
+ * message gets. Every `@name` in the text (`@Kortix`, `@KortixDev`, `@here`)
+ * is a `MentionChip`, the chip the composer draws, static because a channel
+ * mention opens nothing here. Exported for `channel-message-card.test.tsx`.
  */
-export function ChannelMessage({ info, actions, }) {
+export function ChannelMessage({ info, attachments = [], actions, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const platform = channelPlatformLabel(info.platform, tI18nComplete);
-    return (_jsxs("div", { className: "flex flex-col items-end gap-1.5", children: [_jsx(SourcePill, { mark: _jsx(ChannelBrandMark, { platform: info.platform, className: "size-3 shrink-0" }), source: platform, sourceColor: CHANNEL_BRAND_COLOR[info.platform], sender: info.userName, card: _jsx(ChannelOrigin, { info: info, platform: platform }) }), info.messageText && (_jsx("div", { className: cn(BUBBLE_SURFACE, 'max-w-[80%]'), children: _jsx("div", { className: BUBBLE_TEXT, children: buildMentionSegments({ text: info.messageText }).map((segment, i) => segment.type ? (_jsx(MentionChip, { kind: "user", label: segment.text.slice(1) }, i)) : (_jsx("span", { children: segment.text }, i))) }) })), actions] }));
+    return (_jsxs("div", { className: "flex flex-col items-end gap-1.5", children: [_jsx(SourcePill, { mark: _jsx(ChannelBrandMark, { platform: info.platform, className: "size-3 shrink-0" }), source: platform, sourceColor: CHANNEL_BRAND_COLOR[info.platform], sender: info.userName, card: _jsx(ChannelOrigin, { info: info, platform: platform }) }), _jsx(MessageAttachments, { attachments: attachments }), info.messageText && !(attachments.length > 0 && isChannelFileLabel(info.messageText)) && (_jsx("div", { className: cn(BUBBLE_SURFACE, 'max-w-[80%]'), children: _jsx("div", { className: BUBBLE_TEXT, children: buildMentionSegments({ text: info.messageText }).map((segment, i) => segment.type ? (_jsx(MentionChip, { kind: "user", label: segment.text.slice(1) }, i)) : (_jsx("span", { children: segment.text }, i))) }) })), actions] }));
 }
 /**
  * A prompt the platform wrote — a reminder fire or a trigger fire — drawn the
@@ -900,6 +901,11 @@ export function UserMessage({ message, author, showAuthor, agentNames, commandIn
     // scaffolds these prompts with ids and turn instructions the person never
     // typed, so the card shows only the platform, the sender, and their words.
     const channelMessageInfo = useMemo(() => parseChannelMessage(rawText), [rawText]);
+    // Its files: the `<file>` tags Kortix wrote after the sender's text, and nothing else. A tag the sender
+    // typed is text; the image block pi records for a tag repeats it, and names no path when the sender typed one.
+    const channelAttachments = useMemo(() => channelMessageInfo
+        ? normalizeAttachments([], parseFileReferences(channelPromptTail(rawText, channelMessageInfo.platform)).files)
+        : [], [channelMessageInfo, rawText]);
     // Detect trigger_event in user message
     const triggerEventInfo = useMemo(() => parseTriggerEvent(rawText), [rawText]);
     // A reminder fire: platform-written `[REMINDER …]` header + the reminder text.
@@ -1061,7 +1067,7 @@ export function UserMessage({ message, author, showAuthor, agentNames, commandIn
     }
     // Channel messages (Slack / Microsoft Teams / Telegram): a branded card with the sender
     if (channelMessageInfo) {
-        return _jsx(ChannelMessage, { info: channelMessageInfo, actions: actions });
+        return _jsx(ChannelMessage, { info: channelMessageInfo, attachments: channelAttachments, actions: actions });
     }
     if (reminderInfo) {
         return _jsx(ReminderMessage, { info: reminderInfo, actions: actions });