@kortix/ui 0.14.8 → 0.14.9

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

@@ -0,0 +1,52 @@
+import type { ReactNode } from 'react';
+/**
+ * A message body's type: the app's default `text-sm` at 500. A row's markdown
+ * answer is set to `text-sm` too (`MessageRow`'s body), so a prompt, its answer
+ * and the channel row of the same prompt read at one size and weight. The 600
+ * name above it, at the same size, carries the row's hierarchy.
+ */
+export declare const MESSAGE_TEXT_CLASS = "text-foreground text-sm leading-relaxed font-medium";
+/**
+ * One message in a channel or a thread: the author's 36px avatar in a fixed
+ * gutter, the name and the time on one baseline, the body under them. The
+ * channel timeline and the thread panel draw every row with it, so a reply
+ * reads the same as the message it answers.
+ *
+ * A `compact` row continues the author's previous message: no avatar, no
+ * name. Its time shows in the gutter on hover, inside the gutter's own width,
+ * so it never touches the body.
+ *
+ * The hover fill is instant: a dense list re-hovers too often to animate.
+ */
+export declare function MessageRow({ avatar, name, time, compact, selected, toolbar, className, children, }: {
+    /** The 36px avatar: `UserAvatar size="lg"` for a person, `EntityAvatar size="lg"` for an agent. */
+    avatar?: ReactNode;
+    name?: ReactNode;
+    /** `label` beside the name; `gutter` (a shorter form) in a compact row's gutter; `title`, the full date, in the hover hint. */
+    time?: {
+        iso: string;
+        label: string;
+        gutter?: string;
+        title: string;
+    } | null;
+    compact?: boolean;
+    selected?: boolean;
+    /** The row's actions, floating at its top-right on hover or keyboard focus. */
+    toolbar?: ReactNode;
+    className?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * The floating action group at a row's top-right. Transparent, not unmounted,
+ * so Tab reaches its buttons and their focus reveals it. `p-[2px]`: the group
+ * is `rounded-lg` (10px), so 2px of inset gives the `rounded-md` (8px)
+ * buttons concentric corners. Its buttons are `icon-sm` (h-7), so the group is
+ * ~32px tall; `-top-3.5` sits it on the row's top edge, half above it.
+ *
+ * A thread's first message is the one row whose overhang is cut off (its turn
+ * paints with `content-visibility: auto`, which clips to the turn): that row
+ * moves the group inside with `[&_[data-slot=row-toolbar]]:top-0.5`.
+ */
+export declare function RowToolbar({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+import Hint from '../../primitives/hint.js';
+/**
+ * A message body's type: the app's default `text-sm` at 500. A row's markdown
+ * answer is set to `text-sm` too (`MessageRow`'s body), so a prompt, its answer
+ * and the channel row of the same prompt read at one size and weight. The 600
+ * name above it, at the same size, carries the row's hierarchy.
+ */
+export const MESSAGE_TEXT_CLASS = 'text-foreground text-sm leading-relaxed font-medium';
+/**
+ * One message in a channel or a thread: the author's 36px avatar in a fixed
+ * gutter, the name and the time on one baseline, the body under them. The
+ * channel timeline and the thread panel draw every row with it, so a reply
+ * reads the same as the message it answers.
+ *
+ * A `compact` row continues the author's previous message: no avatar, no
+ * name. Its time shows in the gutter on hover, inside the gutter's own width,
+ * so it never touches the body.
+ *
+ * The hover fill is instant: a dense list re-hovers too often to animate.
+ */
+export function MessageRow({ avatar, name, time, compact = false, selected = false, toolbar, className, children, }) {
+    return (_jsxs("div", { "data-slot": "message-row", className: cn('group/message hover:bg-hover relative flex gap-2 px-5', 
+        // Baseline: a compact row's gutter time sits on the body's first line.
+        compact ? 'items-baseline py-0.5' : 'items-start pt-2 pb-1.5', selected && 'bg-active hover:bg-active', className), children: [_jsx("div", { className: "w-10 shrink-0 [&_[data-slot=avatar]]:rounded-md [&_[data-slot=avatar]]:after:hidden", children: compact ? (time ? (_jsx(Hint, { label: time.title, side: "top", sideOffset: 6, children: _jsx("time", { dateTime: time.iso, className: "text-muted-foreground invisible block cursor-default text-right text-xs font-normal whitespace-nowrap tabular-nums group-focus-within/message:visible group-hover/message:visible", children: time.gutter ?? time.label }) })) : null) : (avatar) }), _jsxs("div", { className: "min-w-0 flex-1 [&_.kortix-markdown]:text-sm", children: [compact ? null : (_jsxs("div", { className: "flex min-w-0 items-baseline gap-2", children: [_jsx("span", { className: "text-foreground truncate text-sm font-semibold", children: name }), time ? (
+                            // The full date in the app's tooltip, not the browser's `title`.
+                            _jsx(Hint, { label: time.title, side: "top", sideOffset: 6, children: _jsx("time", { dateTime: time.iso, className: "text-muted-foreground shrink-0 cursor-default text-xs font-normal tabular-nums", children: time.label }) })) : null] })), children] }), toolbar ? _jsx(RowToolbar, { children: toolbar }) : null] }));
+}
+/**
+ * The floating action group at a row's top-right. Transparent, not unmounted,
+ * so Tab reaches its buttons and their focus reveals it. `p-[2px]`: the group
+ * is `rounded-lg` (10px), so 2px of inset gives the `rounded-md` (8px)
+ * buttons concentric corners. Its buttons are `icon-sm` (h-7), so the group is
+ * ~32px tall; `-top-3.5` sits it on the row's top edge, half above it.
+ *
+ * A thread's first message is the one row whose overhang is cut off (its turn
+ * paints with `content-visibility: auto`, which clips to the turn): that row
+ * moves the group inside with `[&_[data-slot=row-toolbar]]:top-0.5`.
+ */
+export function RowToolbar({ children }) {
+    return (_jsx("div", { "data-slot": "row-toolbar", className: "bg-popover pointer-events-none absolute -top-3.5 right-5 z-10 flex items-center rounded-lg border p-[2px] opacity-0 shadow-md group-focus-within/message:pointer-events-auto group-focus-within/message:opacity-100 group-hover/message:pointer-events-auto group-hover/message:opacity-100 has-[[data-state=open]]:pointer-events-auto has-[[data-state=open]]:opacity-100", children: children }));
+}

package/dist/session/turn/plan-anchor.d.ts

@@ -20,7 +20,7 @@
  * is live, and `chatPlanAnchorId` turns this whole module off for the other.
  * See `action-panel/easy/plan-card.tsx`.
  *
- * No React import. Every rule here is unit-tested in plan-anchor.test.ts.
+ * No React import.
  */
 import { type SessionLogTurn } from '@kortix/sdk';
 /**

package/dist/session/turn/plan-anchor.js

@@ -20,7 +20,7 @@
  * is live, and `chatPlanAnchorId` turns this whole module off for the other.
  * See `action-panel/easy/plan-card.tsx`.
  *
- * No React import. Every rule here is unit-tested in plan-anchor.test.ts.
+ * No React import.
  */
 import { shouldShowToolPart, toolKind } from '@kortix/sdk';
 /**

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

@@ -248,7 +248,13 @@ export declare function UserMessageBubble({ canExpand, expanded, onToggle, fullW
  * Shared with `OptimisticTurn` so the pending turn and the server turn cannot
  * drift — the same reason `MessageAttachments` is shared.
  */
-export declare function UserMessageActions({ timestamp, copyText, messageId, rewindPromptText, onRewind, rewindDisabled, deliveryStatus, }: {
+export declare function UserMessageActions({ timestamp, copyText, messageId, rewindPromptText, onRewind, rewindDisabled, deliveryStatus, toolbar, }: {
+    /**
+     * A message row (`TranscriptRowsContext`): the row's header shows the time,
+     * so the buttons float in its toolbar and only the delivery status stays in
+     * the flow.
+     */
+    toolbar?: boolean;
     /** Epoch milliseconds, or `null` when the backend never stamped one. */
     timestamp: number | null;
     /** Omitted when there is nothing to copy — the row then carries meta alone

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

@@ -6,13 +6,15 @@ import { getFileCategory } from '../../files/viewer/preview-policy.js';
 import { uiRoutes } from '../../lib/routes.js';
 import { MessageSenderAbove } from '../participants/session-participants.js';
 import { MessageAuthorLabel } from './message-author-label.js';
+import { MESSAGE_TEXT_CLASS, RowToolbar } from './message-row.js';
+import { TranscriptRowsContext } from '../thread/transcript-rows.js';
 import { errorToast } from '../../primitives/toast.js';
 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 { useEffect, useMemo, useRef, useState } from 'react';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { PencilSimpleIcon, AlarmIcon, ChatsTeardropIcon, LightningIcon, } from '@phosphor-icons/react';
 import { CopyButton } from '../../markdown/copy-button.js';
 import { HoverPrefetchLink } from '../../internal/components/hover-prefetch-link.js';
@@ -672,7 +674,7 @@ export function UserMessageBubble({ canExpand, expanded, onToggle, fullWidth, te
  * Shared with `OptimisticTurn` so the pending turn and the server turn cannot
  * drift — the same reason `MessageAttachments` is shared.
  */
-export function UserMessageActions({ timestamp, copyText, messageId, rewindPromptText, onRewind, rewindDisabled, deliveryStatus, }) {
+export function UserMessageActions({ timestamp, copyText, messageId, rewindPromptText, onRewind, rewindDisabled, deliveryStatus, toolbar = false, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     // Copy stays available while the agent is busy / rewind is locked.
     // Only edit-from-here is gated — hiding the whole bar was wrong.
@@ -681,6 +683,15 @@ export function UserMessageActions({ timestamp, copyText, messageId, rewindPromp
     // Nothing to say and nothing to do — don't leave an empty row behind.
     if (!hasMeta && !copyText && !deliveryStatus)
         return null;
+    const buttons = copyText ? (_jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [canRewind && (_jsx(Hint, { label: tI18nComplete.raw('textc72e5d059e24'), side: "top", align: "center", children: _jsx(Button, { type: "button", variant: "ghost", size: toolbar ? 'icon-sm' : 'icon-xs', 
+                    // 24px visible, 40px target — grown with a pseudo-element so the
+                    // dense action row keeps its rhythm.
+                    className: toolbar ? undefined : 'hit-area-2', "aria-label": tI18nComplete.raw('text673d6a594efa'), onClick: () => onRewind?.(messageId, rewindPromptText ?? ''), children: _jsx(PencilSimpleIcon, { weight: "regular", className: cn('text-foreground', toolbar ? 'size-3.5' : 'size-4') }) }) })), _jsx(CopyButton, { code: copyText, size: toolbar ? 'md' : 'sm', 
+                // In a row's toolbar every glyph is 14px (`size-3.5`), the channel row's too.
+                className: toolbar ? 'focus-visible:ring-ring focus-visible:ring-2 [&_svg]:size-3.5!' : undefined, hintSide: "top", label: tI18nComplete.raw('texte21f935f11d7') })] })) : null;
+    if (toolbar) {
+        return (_jsxs(_Fragment, { children: [deliveryStatus, buttons ? _jsx(RowToolbar, { children: buttons }) : null] }));
+    }
     return (
     // The fade sits on the ROW, so the timestamp and the buttons reveal
     // together as one object rather than a label with controls growing out of
@@ -710,10 +721,7 @@ export function UserMessageActions({ timestamp, copyText, messageId, rewindPromp
                 // counterpart. The two `opacity-100` variants it sits beside
                 // agree with it, so no ordering assumption is being made and the
                 // desktop string is unchanged.
-                'opacity-0 group-hover/turn:opacity-100 focus-within:opacity-100 max-md:opacity-100'), children: [hasMeta && (_jsx(InlineMeta, { children: timestamp !== null && _jsx(MessageTimeLabel, { timestamp: timestamp }) })), copyText && (_jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [canRewind && (_jsx(Hint, { label: tI18nComplete.raw('textc72e5d059e24'), side: "top", align: "center", children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", 
-                                    // 24px visible, 40px target — grown with a pseudo-element so the
-                                    // dense action row keeps its rhythm.
-                                    className: "hit-area-2", "aria-label": tI18nComplete.raw('text673d6a594efa'), onClick: () => onRewind?.(messageId, rewindPromptText ?? ''), children: _jsx(PencilSimpleIcon, { weight: "regular", className: "text-foreground size-4" }) }) })), _jsx(CopyButton, { code: copyText, size: "sm", hintSide: "top", label: tI18nComplete.raw('texte21f935f11d7') })] }))] }), deliveryStatus] }));
+                'opacity-0 group-hover/turn:opacity-100 focus-within:opacity-100 max-md:opacity-100'), children: [hasMeta && (_jsx(InlineMeta, { children: timestamp !== null && _jsx(MessageTimeLabel, { timestamp: timestamp }) })), buttons] }), deliveryStatus] }));
 }
 // ============================================================================
 // Inline edit-from-here editor
@@ -908,7 +916,8 @@ export function UserMessage({ message, author, showAuthor, agentNames, commandIn
     // `copyText` is gated on `onRewind` to keep the buttons exactly as they were:
     // a read-only turn shows no controls. The row itself still renders, because
     // the timestamp is meta, not a control, and should not vanish with them.
-    const actions = (_jsx(UserMessageActions, { timestamp: Number.isFinite(createdAt) && createdAt > 0 ? createdAt : null, copyText: copyText && onRewind ? copyText : undefined, messageId: message.message_id, rewindPromptText: rewindPromptText, onRewind: onRewind, rewindDisabled: rewindDisabled, deliveryStatus: deliveryStatus }));
+    const rows = useContext(TranscriptRowsContext) !== null;
+    const actions = (_jsx(UserMessageActions, { toolbar: rows, timestamp: Number.isFinite(createdAt) && createdAt > 0 ? createdAt : null, copyText: copyText && onRewind ? copyText : undefined, messageId: message.message_id, rewindPromptText: rewindPromptText, onRewind: onRewind, rewindDisabled: rewindDisabled, deliveryStatus: deliveryStatus }));
     const [expanded, setExpanded] = useState(false);
     const [canExpand, setCanExpand] = useState(false);
     const textRef = useRef(null);
@@ -1074,6 +1083,11 @@ export function UserMessage({ message, author, showAuthor, agentNames, commandIn
     // branch returned before the main path — silently dropped the message's
     // attachments. A command is now just a message whose first token is a chip,
     // so it falls through to the one bubble below.
+    // A message row: the row draws the author and the time, so the message is
+    // its text, left-aligned and unboxed, with its files under it.
+    if (rows) {
+        return (_jsxs("div", { className: "flex w-full min-w-0 flex-col items-start gap-1.5", children: [(bodyText || quotedPieces || effectiveCommandInfo) && (_jsx("div", { className: cn(MESSAGE_TEXT_CLASS, 'w-full min-w-0 whitespace-pre-wrap wrap-anywhere select-text'), children: quotedPieces ? (_jsx(QuotedMessageBody, { pieces: quotedPieces, renderText: renderQuotedRun })) : (_jsxs(_Fragment, { children: [commandLead, renderSegments(segments)] })) })), (allAttachments.length > 0 || uploadStatus?.state === 'failed') && (_jsx(MessageAttachments, { attachments: allAttachments, status: uploadStatus, onOpenPastedContent: onOpenPastedContent })), systemNotifications.length > 0 && !effectiveCommandInfo && (_jsx("div", { className: "flex w-full flex-col gap-1.5", children: withContentKeys(systemNotifications, (n) => `mixed-${n.tag}`).map(({ key, item }) => (_jsx(SystemNotificationCard, { notification: item }, key))) })), actions] }));
+    }
     return (
     // The whole message is ONE right-aligned column capped at 80%, so the
     // bubble, its attachments and its actions all hang off the same rail and