Yaowei Zheng
2797 lines
127 KiB
TypeScript
2797 lines
127 KiB
TypeScript
/**
|
||
* Chat input area: a unified input card —
|
||
* a multi-line textarea occupies the card's top area (auto-grows; Enter sends, Shift+Enter
|
||
* inserts a newline, image paste supported), with all controls collected onto a **single bottom
|
||
* row** that never shares a line with the text body: attachments + approval mode (saved
|
||
* immediately on change) + help text (to the right of approval mode) | context usage (ring
|
||
* indicator) + Model + send (up arrow);
|
||
* In draft state (Session not yet created), when models/onChangeModel are supplied, the model
|
||
* selector sits to the left of the send button (provider logo + name, popup opens **downward**,
|
||
* with a top quick-search box, an internal scroll cap to avoid overflowing the screen, and a
|
||
* configured-key-first list with a bottom "show all" row — see ModelSelect) — once
|
||
* the Session is created the model is locked, and the same spot switches to a read-only
|
||
* logo + name display;
|
||
* Draft state also renders a thinking-level picker left of the model selector (backed by the
|
||
* Agent settings: picking a level writes through to the Agent config and applies to the session
|
||
* created on first send); in session state the level is fixed (llmConfig is assembled once per
|
||
* session), shown as a read-only tag from session_meta;
|
||
* `/` opens the slash command menu (`/compact` compresses context, replacing the button; each
|
||
* installed skill gets its own entry; pressing Enter on `/<skill_name>` toggles that skill's
|
||
* selection without sending). Matching is positional: a slash opens the menu from any caret
|
||
* position, running a command removes just that token, and Escape only dismisses the menu —
|
||
* the rest of the draft is never touched;
|
||
* `/agent` and `/model` are the two **switch** commands, both offered in an active Session
|
||
* only — a draft has no conversation to switch, and picks its Agent and model in the draft
|
||
* page's own selectors. Both are staged rather than immediate: running one consumes its token
|
||
* and opens a picker (agents / models), and the pick becomes a highlighted chip above the text
|
||
* body instead of switching on the spot. The user
|
||
* keeps typing; **Enter/Send** performs the switch — an agent chip hands the conversation off to
|
||
* a new chat for that agent (the current Session is not sent to), a model chip forks this
|
||
* conversation onto the picked model. A model fork additionally waits for this Session to be
|
||
* idle (it branches off a Trace that a run or a compaction is still appending to) and says so
|
||
* above the composer rather than just disabling Send. With an empty text body the default
|
||
* auto-message is filled in. Only one chip at a time (picking either clears the other, picking
|
||
* the model already in use clears the staging, and both are exclusive with goal mode); a chip is
|
||
* removed via backspace at the start of the text or its x button, and both are cached with the
|
||
* draft so they survive a session switch or reload along with the text they belong to;
|
||
* The "+" menu carries the input add-ons: image upload, file attachment (any type, several at a
|
||
* time — they ride the task request as base64 data URLs, and the server writes them into the
|
||
* session scratchpad and appends an `[attached file: <path>]` line to the message, so the model
|
||
* opens them by path), and goal mode; selected files show as removable chips above the text
|
||
* body, next to the image thumbnails, and — like images — an attachments-only message is
|
||
* sendable with no text at all.
|
||
* The bottom toolbar provides a searchable multi-select skills dropdown (styled like the model
|
||
* selector: a top search box filtering by name and localized description, plus a checklist;
|
||
* clicking a row toggles its selection without closing the menu; the button = book icon + label +
|
||
* selected-count badge, disabled while running/compacting). With skills selected, sending with an
|
||
* empty text body is allowed — the sent text automatically falls back to S.chat.skillsAutoMessage.
|
||
* When sent, the text body wraps in a `[use_skills]` block (the handoff's rest-of-message body is
|
||
* wrapped the same way); the selection clears once sending succeeds. Quick-invoke pre-selects via
|
||
* initialSkills (read once on mount; once the installed list is ready, names not in that list are
|
||
* pruned); the slash menu also lists installed skills, and pressing Enter on `/<skill_name>`
|
||
* selects it.
|
||
* While a Task is running the input stays enabled and the toolbar keeps ONE action button:
|
||
* an empty composer shows Stop (abort), and typing turns that same button into Send, which
|
||
* follows the remembered mid-run send mode — steer (delivered between turns as a
|
||
* [user_steering] user message) or queue-as-follow-up — chosen from the "+" menu's settings
|
||
* row (available in draft state too, persisted in localStorage); sending is disabled with a
|
||
* reason shown while compacting.
|
||
* The toolbar is a single left/right row: settings controls left (scrolling horizontally when
|
||
* the card is too narrow), status + model + the action button right (never shrinking), so a
|
||
* phone viewport never pushes the action button off-screen.
|
||
* Renders only the card body itself: outer positioning such as bottom-docking or vertical
|
||
* centering is decided by the page.
|
||
*/
|
||
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
||
import type { ChangeEvent, ClipboardEvent, KeyboardEvent, ReactNode, RefObject } from "react";
|
||
import type {
|
||
AgentSummary,
|
||
ApprovalMode,
|
||
ModelInfo,
|
||
ModelRefDto,
|
||
SessionStatus,
|
||
SkillMetadataItem,
|
||
TaskInputPart,
|
||
} from "@prismshadow/penguin-server/api";
|
||
import { S } from "../../lib/strings";
|
||
import { formatBytes, humanizeTokens } from "../../lib/format";
|
||
import { resolveContextWindow } from "../../lib/context";
|
||
import { useLocale } from "../../state/locale";
|
||
import { agentDisplayName } from "../../state/project";
|
||
import { AgentAvatar } from "../../components/ui/agent-avatar";
|
||
import { Dropdown } from "../../components/ui/dropdown";
|
||
import { GlyphIcon } from "../../components/ui/glyph-icon";
|
||
import { noAutofill } from "../../components/ui/input";
|
||
import { toastError } from "../../components/ui/toast";
|
||
import { SkillIcon } from "../skills/skill-icon-view";
|
||
import { ZoomableImage } from "../../components/ui/image-zoom";
|
||
import { ProviderLogo } from "../../components/ui/provider-logo";
|
||
import { Badge } from "../../components/ui/badge";
|
||
import {
|
||
hasConfiguredKey,
|
||
isFreeModel,
|
||
sameModelRef,
|
||
visibleChatModels,
|
||
} from "../models/model-grouping";
|
||
import { filterAgents, stagedSendRoute } from "./agent-handoff";
|
||
import { matchSlash, removeSlashToken } from "./slash-token";
|
||
import { SELECTABLE_THINKING_LEVELS, thinkingLevelLabel } from "./thinking-level";
|
||
import {
|
||
BOOK_ICON,
|
||
buildSkillsMessage,
|
||
filterSkills,
|
||
localizedShortText,
|
||
skillSlashItems,
|
||
} from "./skill-use";
|
||
import { GOAL_ICON, UNLIMITED_BUDGET, parseBudgetInput } from "./goal-use";
|
||
import { PAPERCLIP_ICON } from "./attached-files-banner";
|
||
|
||
const APPROVAL_MODES: ApprovalMode[] = ["always-ask", "read-only", "allow-all", "deny-all"];
|
||
|
||
/**
|
||
* Illustrative icon for each approval mode (24x24 line art, grayscale via currentColor, no
|
||
* color-coding): allow-all uses a warning triangle — it permits everything at the user's own
|
||
* risk, the shape hints at it visually without rendering tension through color; deny-all is a
|
||
* no-entry sign, read-only is an eye, always-ask is a question-mark circle.
|
||
*/
|
||
const APPROVAL_MODE_ICONS: Record<ApprovalMode, string> = {
|
||
"allow-all":
|
||
"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4m0 4h.01",
|
||
"deny-all": "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM5.64 5.64l12.72 12.72",
|
||
"read-only":
|
||
"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7zM15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0z",
|
||
"always-ask":
|
||
"M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM9.1 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3m.07 4h.01",
|
||
};
|
||
|
||
/**
|
||
* Approval mode selector (custom-drawn dropdown, not the browser's native select): small,
|
||
* grayscale.
|
||
* Popup direction depends on context: for the draft card, vertically centered with room below
|
||
* -> opens downward; for the chat input area docked at the bottom of the screen, where opening
|
||
* downward would overflow the viewport with nowhere to scroll -> opens upward.
|
||
*/
|
||
function ApprovalModeSelect({
|
||
value,
|
||
onChange,
|
||
disabled,
|
||
direction = "up",
|
||
}: {
|
||
value: ApprovalMode;
|
||
onChange: (mode: ApprovalMode) => void;
|
||
disabled: boolean;
|
||
direction?: "up" | "down";
|
||
}) {
|
||
const [open, setOpen] = useState(false);
|
||
return (
|
||
<Dropdown
|
||
open={open}
|
||
setOpen={setOpen}
|
||
// w-max: width exactly wraps the longest line (no wrapping within a line), avoiding an
|
||
// overly wide panel. Placement is portal-driven (the toolbar scrolls horizontally on
|
||
// phones, which would otherwise clip the panel); only size classes belong here.
|
||
menuClass="w-max"
|
||
portal={{ direction, align: "left" }}
|
||
button={
|
||
// Button styling matches the model selector (h-8 / rounded-md / solid hover background).
|
||
<button
|
||
type="button"
|
||
aria-label={S.chat.approvalMode}
|
||
title={`${S.chat.approvalMode}：${S.chat.approvalModeNames[value] ?? value}`}
|
||
disabled={disabled}
|
||
onClick={() => setOpen((v) => !v)}
|
||
className="flex h-8 max-w-44 shrink-0 items-center gap-1.5 rounded-md px-2 text-xs text-gray-500 transition-colors duration-150 hover:bg-gray-100 hover:text-gray-800 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
|
||
>
|
||
{/* Icon changes with the current mode (allow-all = warning triangle, grayscale, no color-coding) */}
|
||
<svg
|
||
width="13"
|
||
height="13"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth="1.7"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
aria-hidden
|
||
className="shrink-0"
|
||
>
|
||
<path d={APPROVAL_MODE_ICONS[value]} />
|
||
</svg>
|
||
{/* Button shows only the description (the mode id is spelled out in the menu); when the card is narrower than @md, only the icon remains (title shows the full name). */}
|
||
<span className="hidden min-w-0 truncate @md:block">
|
||
{S.chat.approvalModeNames[value] ?? value}
|
||
</span>
|
||
<svg
|
||
width="10"
|
||
height="10"
|
||
viewBox="0 0 12 12"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
className="shrink-0"
|
||
aria-hidden
|
||
>
|
||
<path
|
||
d="M3 4.5l3 3 3-3"
|
||
strokeWidth="1.5"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
}
|
||
>
|
||
{APPROVAL_MODES.map((m) => (
|
||
<button
|
||
key={m}
|
||
type="button"
|
||
onClick={() => {
|
||
onChange(m);
|
||
setOpen(false);
|
||
}}
|
||
className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs transition-colors duration-150 hover:bg-gray-100 dark:hover:bg-gray-800 ${
|
||
m === value
|
||
? "font-medium text-gray-900 dark:text-gray-100"
|
||
: "text-gray-600 dark:text-gray-400"
|
||
}`}
|
||
>
|
||
<svg
|
||
width="13"
|
||
height="13"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth="1.7"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
aria-hidden
|
||
className="shrink-0 text-gray-400 dark:text-gray-500"
|
||
>
|
||
<path d={APPROVAL_MODE_ICONS[m]} />
|
||
</svg>
|
||
{/* Description first, mode id after (copy in strings); single line, no wrapping, selected checkmark at line end. */}
|
||
<span className="min-w-0 flex-1 truncate whitespace-nowrap">
|
||
{S.chat.approvalModes[m] ?? m}
|
||
</span>
|
||
<span className="w-3 shrink-0 text-center">{m === value ? "✓" : ""}</span>
|
||
</button>
|
||
))}
|
||
</Dropdown>
|
||
);
|
||
}
|
||
|
||
/** Display label for a model: the display name, or falls back to the upstream id (model_id is the raw field, no prefix parsing). */
|
||
function modelLabel(m: ModelInfo): string {
|
||
return m.displayName ?? m.modelId;
|
||
}
|
||
|
||
/**
|
||
* "No key" marker for the model dropdown's key-less rows: a key struck through by a prohibition
|
||
* slash (24x24 line art, grayscale via currentColor, matching the approval-mode icon style).
|
||
*/
|
||
const NO_KEY_ICON =
|
||
"M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4M2 2l20 20";
|
||
|
||
/**
|
||
* Candidate panel shared by every picker in this file (the model dropdown / `/model` switch
|
||
* picker and the `/agent` handoff picker): the search box, the internal scroll cap, the row
|
||
* chrome, the keyboard navigation and the "current entry" marker slot all live here, so the
|
||
* two pickers can differ only in what a row *contains* (provider logo vs Agent avatar) and in
|
||
* what they hang below the list (`footer`, e.g. the model list's "show all" expander).
|
||
*
|
||
* Keyboard navigation deliberately starts with **no** row highlighted: the search box is
|
||
* autofocused, and pre-highlighting a row would repaint a panel that has looked the same since
|
||
* before this control existed. ArrowDown/ArrowUp begin the navigation, and Enter/Tab commits —
|
||
* the highlighted row if there is one, otherwise the top match, which is what makes "type a few
|
||
* letters, press Enter" work. Escape is NOT handled here: each host closes its own panel at the
|
||
* window level (an IME-safe handler for the switch pickers, Dropdown's for the model dropdown).
|
||
*/
|
||
function PickerList<T>({
|
||
items,
|
||
itemKey,
|
||
isCurrent,
|
||
query,
|
||
onQueryChange,
|
||
searchPlaceholder,
|
||
emptyText,
|
||
onPick,
|
||
renderRow,
|
||
footer,
|
||
}: {
|
||
items: T[];
|
||
/** Stable React key AND identity for the highlighted row. */
|
||
itemKey: (item: T) => string;
|
||
/** Marks the entry already in effect (the session's model / its Agent): renders the ✓ slot and the emphasized row style. */
|
||
isCurrent?: (item: T) => boolean;
|
||
query: string;
|
||
onQueryChange: (query: string) => void;
|
||
searchPlaceholder: string;
|
||
/** Shown in place of the list when the query matches nothing. */
|
||
emptyText: string;
|
||
onPick: (item: T) => void;
|
||
/** The row's own content, left of the ✓ slot. */
|
||
renderRow: (item: T) => ReactNode;
|
||
/** Pinned below the scroll area (mirroring the search box above it). */
|
||
footer?: ReactNode;
|
||
}) {
|
||
// -1 = nothing highlighted yet (see the note above); reset whenever the candidate set changes.
|
||
const [active, setActive] = useState(-1);
|
||
const activeKey = active >= 0 && active < items.length ? itemKey(items[active]!) : null;
|
||
const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
|
||
if (items.length === 0) return;
|
||
if (e.key === "ArrowDown") {
|
||
e.preventDefault();
|
||
setActive((i) => (i + 1) % items.length);
|
||
return;
|
||
}
|
||
if (e.key === "ArrowUp") {
|
||
e.preventDefault();
|
||
setActive((i) => (i <= 0 ? items.length - 1 : i - 1));
|
||
return;
|
||
}
|
||
// Same guard as the composer's own Enter handling: an IME commit must not be read as a pick.
|
||
if (((e.key === "Enter" && !e.shiftKey) || e.key === "Tab") && !e.nativeEvent.isComposing) {
|
||
e.preventDefault();
|
||
onPick(items[active >= 0 ? active : 0]!);
|
||
}
|
||
};
|
||
return (
|
||
<div className="contents" onKeyDown={onKeyDown}>
|
||
{/* Quick search (autofocused: it also owns the keyboard while the panel is up) */}
|
||
<div className="border-b border-gray-100 px-2 pb-1.5 pt-0.5 dark:border-gray-800">
|
||
<input
|
||
autoFocus
|
||
value={query}
|
||
onChange={(e) => {
|
||
onQueryChange(e.target.value);
|
||
setActive(-1);
|
||
}}
|
||
placeholder={searchPlaceholder}
|
||
aria-label={searchPlaceholder}
|
||
{...noAutofill}
|
||
className="w-full rounded border border-transparent bg-transparent px-1 py-0.5 text-xs text-gray-700 placeholder:text-gray-400 focus:outline-none dark:text-gray-200 dark:placeholder:text-gray-500"
|
||
/>
|
||
</div>
|
||
<div className="max-h-56 overflow-y-auto">
|
||
{items.length === 0 && <p className="px-3 py-1.5 text-xs text-gray-400">{emptyText}</p>}
|
||
{items.map((item) => {
|
||
const key = itemKey(item);
|
||
const current = isCurrent?.(item) ?? false;
|
||
return (
|
||
<button
|
||
key={key}
|
||
type="button"
|
||
ref={key === activeKey ? (el) => el?.scrollIntoView({ block: "nearest" }) : undefined}
|
||
onClick={() => onPick(item)}
|
||
className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs transition-colors duration-150 hover:bg-gray-100 dark:hover:bg-gray-800 ${
|
||
current
|
||
? "font-medium text-gray-900 dark:text-gray-100"
|
||
: "text-gray-600 dark:text-gray-400"
|
||
}${key === activeKey ? " bg-gray-100 dark:bg-gray-800" : ""}`}
|
||
>
|
||
{renderRow(item)}
|
||
<span className="w-3 shrink-0 text-center text-xs">{current ? "✓" : ""}</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
{footer}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Model candidate panel (search box + grouped list + "show all" expander) shared by the
|
||
* draft-state ModelSelect dropdown and the in-session `/model` switch picker. Search and
|
||
* expanded state are internal and reset by remount (both hosts only render the panel while
|
||
* open); the list is capped by an internal scroll (max-h-56) so it never overflows the
|
||
* viewport no matter how many models there are.
|
||
* Dropdown order mirrors the model library page (visibleChatModels): a top quick-search box
|
||
* (the model page's rule — filters by id / display name / provider name); by default only
|
||
* models with a configured API key are listed (stored masked key — the same standard as the
|
||
* model page's key status; `envKey` is merely the NAME of a fallback env var and doesn't
|
||
* count), with the selected and the default model always visible even without a key; a muted
|
||
* bottom row reveals the remaining key-less models (marked by a struck-through key icon, with
|
||
* the "no key" text in its title) without closing the menu or changing the selection — when
|
||
* no model has a key at all, everything is listed directly. Rows carry the provider logo, the
|
||
* light-yellow "Free" badge for zero-cost models (same as the model library card), the
|
||
* project-default marker, and the selected checkmark.
|
||
*/
|
||
function ModelMenuList({
|
||
models,
|
||
value,
|
||
defaultModel,
|
||
onPick,
|
||
}: {
|
||
models: ModelInfo[];
|
||
/** Currently selected (provider, modelId) pair; null = not yet chosen. */
|
||
value: ModelRefDto | null;
|
||
defaultModel?: ModelRefDto;
|
||
onPick: (m: ModelInfo) => void;
|
||
}) {
|
||
const [query, setQuery] = useState("");
|
||
// Expanded "show all" state: collapses back to key-configured models on each open (remount).
|
||
const [showAll, setShowAll] = useState(false);
|
||
const visible = visibleChatModels(models, { showAll, query, selected: value, defaultModel });
|
||
// How many models the key filter hides under the current query (0 when expanded): drives the bottom "show all" row.
|
||
const hiddenCount = showAll
|
||
? 0
|
||
: visibleChatModels(models, { showAll: true, query, selected: value, defaultModel }).length -
|
||
visible.length;
|
||
return (
|
||
<PickerList
|
||
items={visible}
|
||
itemKey={(m) => `${m.provider}:${m.modelId}`}
|
||
isCurrent={(m) => sameModelRef(m, value)}
|
||
query={query}
|
||
onQueryChange={setQuery}
|
||
// Quick search: supports model id / display name / provider name
|
||
searchPlaceholder={S.models.searchPlaceholder}
|
||
emptyText={S.models.noSearchResults}
|
||
onPick={onPick}
|
||
renderRow={(m) => (
|
||
<>
|
||
<ProviderLogo provider={m.provider} className="h-4 w-4 shrink-0" />
|
||
<span className="min-w-0 flex-1 truncate">{modelLabel(m)}</span>
|
||
{/* Zero-cost rows (all three price buckets 0): same light-yellow "Free" badge as
|
||
the model library card, so free models stand out while picking. */}
|
||
{isFreeModel(m.pricing) && (
|
||
<span className="shrink-0">
|
||
<Badge tone="yellow">{S.models.freeBadge}</Badge>
|
||
</span>
|
||
)}
|
||
{/* Key-less rows (visible via show-all / selected / default / no-key-at-all) carry a
|
||
struck-through key icon (the "no key" text lives in the title/aria-label). */}
|
||
{!hasConfiguredKey(m) && (
|
||
<span
|
||
role="img"
|
||
title={S.models.noKey}
|
||
aria-label={S.models.noKey}
|
||
className="shrink-0 text-gray-400 dark:text-gray-500"
|
||
>
|
||
<GlyphIcon d={NO_KEY_ICON} size={13} />
|
||
</span>
|
||
)}
|
||
{sameModelRef(m, defaultModel) && (
|
||
<span className="shrink-0 text-xs text-gray-400 dark:text-gray-500">
|
||
{S.models.default}
|
||
</span>
|
||
)}
|
||
</>
|
||
)}
|
||
// Bottom expander row (pinned below the scroll area, mirroring the search box on top):
|
||
// reveals the models hidden by the configured-key filter in place — the menu stays open
|
||
// and the selection is untouched.
|
||
{...(hiddenCount > 0
|
||
? {
|
||
footer: (
|
||
<div className="border-t border-gray-100 dark:border-gray-800">
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowAll(true)}
|
||
className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-gray-400 transition-colors duration-150 hover:bg-gray-100 hover:text-gray-600 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300"
|
||
>
|
||
{S.models.showModelsWithoutKey(hiddenCount)}
|
||
</button>
|
||
</div>
|
||
),
|
||
}
|
||
: {})}
|
||
/>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Model selector (draft state only; docked to the left of the send button): the button shows
|
||
* the provider logo + name (logo only when the card is narrower than @md; the title carries
|
||
* the full name), and the menu opens **downward** — the draft card is vertically centered
|
||
* with room below. The candidate list itself is the shared ModelMenuList panel (search,
|
||
* key-configured-first grouping, Free badge, "show all" expander — documented there).
|
||
*/
|
||
function ModelSelect({
|
||
models,
|
||
value,
|
||
defaultModel,
|
||
onChange,
|
||
disabled,
|
||
}: {
|
||
models: ModelInfo[];
|
||
/** Currently selected (provider, modelId) pair; null = not yet chosen. */
|
||
value: ModelRefDto | null;
|
||
defaultModel?: ModelRefDto;
|
||
onChange: (ref: ModelRefDto) => void;
|
||
disabled: boolean;
|
||
}) {
|
||
const [open, setOpen] = useState(false);
|
||
const current = models.find((m) => sameModelRef(m, value));
|
||
// Display rule matches the model page's card: display name, or falls back to the upstream id (grouping is already conveyed by the provider logo).
|
||
const label = current ? modelLabel(current) : (value?.modelId ?? "…");
|
||
return (
|
||
<Dropdown
|
||
open={open}
|
||
setOpen={setOpen}
|
||
// The panel's right edge docks to the button; portal placement then clamps both edges
|
||
// inside the viewport, so a w-max panel can no longer run off-screen on phones (it used
|
||
// to need a hand-tuned width clamp reserving the anchor offset).
|
||
menuClass="w-max min-w-56 origin-top-right"
|
||
portal={{ direction: "down", align: "right" }}
|
||
button={
|
||
<button
|
||
type="button"
|
||
title={`${S.chat.chooseModel}：${label}`}
|
||
aria-label={S.chat.chooseModel}
|
||
disabled={disabled || models.length === 0}
|
||
onClick={() => setOpen(!open)}
|
||
className="flex h-8 max-w-44 shrink-0 items-center gap-1.5 rounded-md px-2 text-xs text-gray-500 transition-colors duration-150 hover:bg-gray-100 hover:text-gray-800 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
|
||
>
|
||
<ProviderLogo
|
||
provider={current?.provider ?? value?.provider ?? "custom"}
|
||
className="h-4 w-4 shrink-0"
|
||
/>
|
||
{/* When the card is narrower than @md, only the provider logo remains (title shows the full name). */}
|
||
<span className="hidden min-w-0 truncate @md:block">{label}</span>
|
||
<svg
|
||
width="10"
|
||
height="10"
|
||
viewBox="0 0 12 12"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
className="shrink-0"
|
||
aria-hidden
|
||
>
|
||
<path
|
||
d="M3 4.5l3 3 3-3"
|
||
strokeWidth="1.5"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
}
|
||
>
|
||
<ModelMenuList
|
||
models={models}
|
||
value={value}
|
||
{...(defaultModel !== undefined ? { defaultModel } : {})}
|
||
onPick={(m) => {
|
||
onChange({ provider: m.provider, modelId: m.modelId });
|
||
setOpen(false);
|
||
}}
|
||
/>
|
||
</Dropdown>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Agent candidate panel for the `/agent` switch picker — the agent-side counterpart of
|
||
* ModelMenuList, and now literally the same panel (PickerList: search, scroll cap, keyboard
|
||
* navigation, current-entry marker). Only the row differs: the Agent avatar (the same identity
|
||
* tile the draft Agent picker uses), the agentId in monospace — the id is what identifies an
|
||
* Agent everywhere else in the app — and the display name after it when it differs. The
|
||
* conversation's own Agent is marked like the model list marks the session's model; picking it
|
||
* is still a real action (a fresh conversation with the same Agent), not a no-op.
|
||
*/
|
||
function AgentMenuList({
|
||
agents,
|
||
currentAgentId,
|
||
onPick,
|
||
}: {
|
||
agents: AgentSummary[];
|
||
/** The Agent this conversation already belongs to (marked ✓); undefined while it is unknown. */
|
||
currentAgentId?: string;
|
||
onPick: (agent: AgentSummary) => void;
|
||
}) {
|
||
const [query, setQuery] = useState("");
|
||
return (
|
||
<PickerList
|
||
items={filterAgents(agents, query)}
|
||
itemKey={(a) => a.agentId}
|
||
isCurrent={(a) => a.agentId === currentAgentId}
|
||
query={query}
|
||
onQueryChange={setQuery}
|
||
// Quick search: supports agentId / display name
|
||
searchPlaceholder={S.chat.agentSearchPlaceholder}
|
||
emptyText={S.chat.agentsNoMatch}
|
||
onPick={onPick}
|
||
renderRow={(a) => (
|
||
<>
|
||
<AgentAvatar
|
||
id={a.agentId}
|
||
name={agentDisplayName(a)}
|
||
size={16}
|
||
className="shrink-0 rounded"
|
||
/>
|
||
<span className="shrink-0 font-mono text-gray-800 dark:text-gray-200">{a.agentId}</span>
|
||
{a.name && a.name !== a.agentId && (
|
||
<span className="min-w-0 flex-1 truncate text-gray-400 dark:text-gray-500">
|
||
{a.name}
|
||
</span>
|
||
)}
|
||
</>
|
||
)}
|
||
/>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Popup frame shared by the two `/` switch pickers (`/model`, `/agent`): the upward-opening
|
||
* panel and its title bar. It opens upward from the composer and is height-capped to the room
|
||
* actually measured above it (see upwardMaxH), so it can never render off-screen; the panel has
|
||
* no trigger button of its own, so dismissal (click-outside / Escape) is handled by the host.
|
||
*/
|
||
function SwitchPickerPanel({
|
||
panelRef,
|
||
maxHeight,
|
||
title,
|
||
children,
|
||
}: {
|
||
panelRef: RefObject<HTMLDivElement | null>;
|
||
maxHeight: number | undefined;
|
||
title: string;
|
||
children: ReactNode;
|
||
}) {
|
||
return (
|
||
<div
|
||
ref={panelRef}
|
||
style={{ maxHeight }}
|
||
className="anim-pop absolute bottom-full left-0 z-40 mb-1.5 flex w-80 max-w-[calc(100vw-2rem)] flex-col overflow-hidden rounded-md border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-900"
|
||
>
|
||
<div className="border-b border-gray-100 px-3 pb-1.5 pt-0.5 text-xs font-semibold text-gray-500 dark:border-gray-800 dark:text-gray-400">
|
||
{title}
|
||
</div>
|
||
{children}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** Spark glyph for the thinking-level picker (24x24 line path, consistent with the toolbar icon set). */
|
||
const SPARK_ICON = "M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3z";
|
||
|
||
/**
|
||
* Conversation-time thinking-level picker, used in two places. Both variants list only the
|
||
* concrete levels (per review: a title bar names the control; short names only, no
|
||
* descriptions, no "default"/"follow" row, and no "none" — many models cannot disable
|
||
* thinking; a stored legacy "none" still displays via the label table, just never offered):
|
||
* - Draft state (docked left of the model selector): shows the **selected Agent's** current
|
||
* `model.thinking_level` and writes a picked level straight through to the Agent settings —
|
||
* it applies to the session created on first send and becomes the Agent's new default
|
||
* (switch-becomes-default). An Agent without an explicit override shows an em dash until a
|
||
* level is picked.
|
||
* - Active session: the level is a **per-turn parameter** sent with each task. The displayed
|
||
* value initializes to the Agent config's level and auto-follows it while the user hasn't
|
||
* picked (the parent resolves the display value and keeps omitting the level from tasks
|
||
* until touched); an explicit pick sticks for the session and rides on every subsequent
|
||
* send, never writing through to the Agent config.
|
||
*/
|
||
function ThinkingLevelSelect({
|
||
value,
|
||
onChange,
|
||
disabled,
|
||
direction = "down",
|
||
}: {
|
||
/** Level to display and mark selected ("" = none to show yet); null = the Agent config is still loading (draft). */
|
||
value: string | null;
|
||
onChange: (level: string) => void;
|
||
disabled: boolean;
|
||
/** Popup direction: down for the draft card (room below), up for the bottom-docked session composer. */
|
||
direction?: "down" | "up";
|
||
}) {
|
||
const [open, setOpen] = useState(false);
|
||
const label =
|
||
value === null ? "…" : (thinkingLevelLabel(S.chat.thinkingLevelNames, value) ?? "—");
|
||
return (
|
||
<Dropdown
|
||
open={open}
|
||
setOpen={setOpen}
|
||
menuClass="w-max min-w-36"
|
||
portal={{ direction, align: "right" }}
|
||
button={
|
||
<button
|
||
type="button"
|
||
title={`${S.chat.thinkingLevel}：${label}`}
|
||
aria-label={S.chat.thinkingLevel}
|
||
disabled={disabled || value === null}
|
||
onClick={() => setOpen(!open)}
|
||
className="flex h-8 max-w-36 shrink-0 items-center gap-1.5 rounded-md px-2 text-xs text-gray-500 transition-colors duration-150 hover:bg-gray-100 hover:text-gray-800 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
|
||
>
|
||
<GlyphIcon d={SPARK_ICON} size={14} className="shrink-0" />
|
||
{/* When the card is narrower than @md, only the icon remains (title shows the full state). */}
|
||
<span className="hidden min-w-0 truncate @md:block">{label}</span>
|
||
<svg
|
||
width="10"
|
||
height="10"
|
||
viewBox="0 0 12 12"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
className="shrink-0"
|
||
aria-hidden
|
||
>
|
||
<path
|
||
d="M3 4.5l3 3 3-3"
|
||
strokeWidth="1.5"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
}
|
||
>
|
||
{/* Title bar: names the control (the rows themselves are just the short names). */}
|
||
<div className="border-b border-gray-100 px-3 pb-1.5 pt-0.5 text-xs font-semibold text-gray-500 dark:border-gray-800 dark:text-gray-400">
|
||
{S.chat.thinkingLevel}
|
||
</div>
|
||
{SELECTABLE_THINKING_LEVELS.map((level) => (
|
||
<button
|
||
key={level}
|
||
type="button"
|
||
onClick={() => {
|
||
onChange(level);
|
||
setOpen(false);
|
||
}}
|
||
className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs transition-colors duration-150 hover:bg-gray-100 dark:hover:bg-gray-800 ${
|
||
level === value
|
||
? "font-medium text-gray-900 dark:text-gray-100"
|
||
: "text-gray-600 dark:text-gray-400"
|
||
}`}
|
||
>
|
||
<span className="min-w-0 flex-1 truncate">
|
||
{S.chat.thinkingLevelNames[level] ?? level}
|
||
</span>
|
||
<span className="w-3 shrink-0 text-center">{level === value ? "✓" : ""}</span>
|
||
</button>
|
||
))}
|
||
</Dropdown>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Mid-run send mode: steer (delivered mid-run as a [user_steering] input) vs follow-up
|
||
* (queued server-side until the run ends). A remembered per-user UI preference, persisted
|
||
* the same way as the sidebar grouping mode (validated localStorage read under a
|
||
* `penguin.*` key); configurable from the "+" menu's settings row in draft state and active
|
||
* sessions alike.
|
||
*/
|
||
type SteerMode = "steer" | "followup";
|
||
const STEER_MODE_KEY = "penguin.steerMode";
|
||
function initialSteerMode(): SteerMode {
|
||
return localStorage.getItem(STEER_MODE_KEY) === "followup" ? "followup" : "steer";
|
||
}
|
||
|
||
/** Sliders icon (24×24 line path) for the mid-run send-mode settings row. */
|
||
const SLIDERS_ICON = "M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6";
|
||
|
||
/**
|
||
* The mid-run send mode row, rendered as the "+" menu's settings footer: Steer (default) /
|
||
* Queue as a follow-up, the full explanation hover-only via each pill's title (the toolbar's
|
||
* "full meaning on hover" convention). Laid out like the menu's items — leading icon, label,
|
||
* the control where an item's description sits — so the menu reads as one list. Clicking a
|
||
* pill keeps the menu open — it's a setting, not an action — and the row is never disabled:
|
||
* the preference is settable before and during a run.
|
||
*/
|
||
function SteerModeRow({
|
||
steerMode,
|
||
onChangeSteerMode,
|
||
}: {
|
||
steerMode: SteerMode;
|
||
onChangeSteerMode: (mode: SteerMode) => void;
|
||
}) {
|
||
// Compact pills, no bordered wrapper: the control must not out-height an item's 16px text
|
||
// line by more than the row paddings absorb — h-5 pills inside py-1 land the row at the
|
||
// same 28px an item's text + py-1.5 does, so the menu keeps one line rhythm.
|
||
const modeButton = (mode: SteerMode, label: string, hint: string) => (
|
||
<button
|
||
type="button"
|
||
title={hint}
|
||
aria-pressed={steerMode === mode}
|
||
onClick={() => onChangeSteerMode(mode)}
|
||
className={`h-5 rounded px-1.5 text-xs transition-colors duration-150 ${
|
||
steerMode === mode
|
||
? "bg-gray-200 font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-100"
|
||
: "text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
|
||
}`}
|
||
>
|
||
{label}
|
||
</button>
|
||
);
|
||
return (
|
||
<div className="flex w-full items-center gap-2 px-3 py-1 text-xs">
|
||
<GlyphIcon d={SLIDERS_ICON} size={14} className="shrink-0 text-gray-400 dark:text-gray-500" />
|
||
<span className="min-w-0 flex-1 truncate text-gray-600 dark:text-gray-400">
|
||
{S.chat.steerModeLabel}
|
||
</span>
|
||
<div
|
||
role="group"
|
||
aria-label={S.chat.steerModeLabel}
|
||
className="flex shrink-0 items-center gap-0.5"
|
||
>
|
||
{modeButton("steer", S.chat.steerModeSteer, S.chat.steerModeSteerHint)}
|
||
{modeButton("followup", S.chat.steerModeFollowUp, S.chat.steerModeFollowUpHint)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Multi-select skills dropdown (bottom toolbar, after approval mode): styled like the model
|
||
* selector — button = book icon + "Skills" label + selected-count badge (no badge at 0; when the
|
||
* card is narrower than @md the label hides, leaving just icon + badge); menu = top search box
|
||
* (filters by name and localized description) + option rows (name in monospace + truncated
|
||
* description + selected checkmark). Multi-select semantics: clicking a row toggles its
|
||
* selection and **the menu stays open**; closes on Escape / click outside (built into Dropdown).
|
||
* Shows empty-state copy when no skills are installed (prompting to add some from the skill
|
||
* library). Popup direction depends on context (same as the approval mode selector).
|
||
*/
|
||
function SkillSelect({
|
||
skills,
|
||
selected,
|
||
onToggle,
|
||
disabled,
|
||
direction = "up",
|
||
}: {
|
||
skills: SkillMetadataItem[];
|
||
selected: string[];
|
||
onToggle: (name: string) => void;
|
||
disabled: boolean;
|
||
direction?: "up" | "down";
|
||
}) {
|
||
const { locale } = useLocale();
|
||
const [open, setOpen] = useState(false);
|
||
const [query, setQuery] = useState("");
|
||
const filtered = filterSkills(skills, locale, query);
|
||
return (
|
||
<Dropdown
|
||
open={open}
|
||
setOpen={setOpen}
|
||
// As wide as reasonably possible so descriptions stay readable; portal placement clamps
|
||
// it to the viewport, so the old hand-tuned anchor-offset clamps are no longer needed.
|
||
menuClass="w-[26rem]"
|
||
portal={{ direction, align: "left" }}
|
||
button={
|
||
<button
|
||
type="button"
|
||
aria-label={S.chat.skillsSelect}
|
||
title={S.chat.skillsSelect}
|
||
disabled={disabled}
|
||
onClick={() => {
|
||
const next = !open;
|
||
setOpen(next);
|
||
if (next) setQuery(""); // Always start from the full list each time it opens
|
||
}}
|
||
className="flex h-8 max-w-44 shrink-0 items-center gap-1.5 rounded-md px-2 text-xs text-gray-500 transition-colors duration-150 hover:bg-gray-100 hover:text-gray-800 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
|
||
>
|
||
<GlyphIcon d={BOOK_ICON} size={14} className="shrink-0" />
|
||
{/* When the card is narrower than @md, only the icon + badge remain (title shows the full name). */}
|
||
<span className="hidden min-w-0 truncate @md:block">{S.chat.skillsSelect}</span>
|
||
{/* Selected-count badge (the chip row above the input mirrors the selection too). */}
|
||
{selected.length > 0 && (
|
||
<span className="shrink-0 rounded-full bg-gray-200/80 px-1.5 py-px font-mono text-[10px] font-semibold text-gray-700 dark:bg-gray-700/60 dark:text-gray-200">
|
||
{selected.length}
|
||
</span>
|
||
)}
|
||
<svg
|
||
width="10"
|
||
height="10"
|
||
viewBox="0 0 12 12"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
className="shrink-0"
|
||
aria-hidden
|
||
>
|
||
<path
|
||
d="M3 4.5l3 3 3-3"
|
||
strokeWidth="1.5"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
}
|
||
>
|
||
{/* Quick search: filters by skill name and localized description */}
|
||
<div className="border-b border-gray-100 px-2 pb-1.5 pt-0.5 dark:border-gray-800">
|
||
<input
|
||
autoFocus
|
||
value={query}
|
||
onChange={(e) => setQuery(e.target.value)}
|
||
placeholder={S.chat.skillsSearchPlaceholder}
|
||
aria-label={S.chat.skillsSearchPlaceholder}
|
||
{...noAutofill}
|
||
className="w-full rounded border border-transparent bg-transparent px-1 py-0.5 text-xs text-gray-700 placeholder:text-gray-400 focus:outline-none dark:text-gray-200 dark:placeholder:text-gray-500"
|
||
/>
|
||
</div>
|
||
<div className="max-h-56 overflow-y-auto">
|
||
{skills.length === 0 ? (
|
||
<p className="px-3 py-1.5 text-xs text-gray-400">{S.chat.skillsEmptyHint}</p>
|
||
) : filtered.length === 0 ? (
|
||
<p className="px-3 py-1.5 text-xs text-gray-400">{S.chat.skillsNoMatch}</p>
|
||
) : (
|
||
filtered.map((s) => {
|
||
const on = selected.includes(s.name);
|
||
return (
|
||
<button
|
||
key={s.name}
|
||
type="button"
|
||
aria-pressed={on}
|
||
onClick={() => onToggle(s.name)}
|
||
className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs transition-colors duration-150 hover:bg-gray-100 dark:hover:bg-gray-800 ${
|
||
on
|
||
? "font-medium text-gray-900 dark:text-gray-100"
|
||
: "text-gray-600 dark:text-gray-400"
|
||
}`}
|
||
>
|
||
{/* Each skill's custom icon (icon.svg, sanitized and inlined; falls back to the book icon if missing). */}
|
||
<SkillIcon
|
||
icon={s.icon}
|
||
size={14}
|
||
className="shrink-0 text-gray-400 dark:text-gray-500"
|
||
/>
|
||
<span className="shrink-0 font-mono">{s.name}</span>
|
||
{/* Prefers the short description (falls back to the full description if missing), per the UI language. */}
|
||
<span className="min-w-0 flex-1 truncate text-gray-400 dark:text-gray-500">
|
||
{localizedShortText(locale, s)}
|
||
</span>
|
||
<span className="w-3 shrink-0 text-center">{on ? "✓" : ""}</span>
|
||
</button>
|
||
);
|
||
})
|
||
)}
|
||
</div>
|
||
</Dropdown>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Picture glyph (24×24 line path) for the "+" menu's image-upload entry: the framing rectangle
|
||
* and the mountain line as two subpaths of one `d`, since GlyphIcon renders a single `<path>`.
|
||
*/
|
||
const IMAGE_ICON =
|
||
"M6 5h12a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3zM3 15l5-5 4 4 3-3 6 6";
|
||
|
||
/** One entry of the composer's "+" extension menu. */
|
||
interface PlusMenuItem {
|
||
key: string;
|
||
icon: string;
|
||
label: string;
|
||
desc: string;
|
||
/** Whether the entry is currently engaged (rendered with a check mark; clicking toggles). */
|
||
active: boolean;
|
||
/** Grayed out and inert (e.g. goal mode while a run is in progress); the menu still opens. */
|
||
disabled?: boolean;
|
||
onSelect: () => void;
|
||
}
|
||
|
||
/**
|
||
* The composer's "+" extension menu: a general-purpose entry point for input add-ons (goal
|
||
* mode today; future modes, plugins, apps, files slot in as further items) plus input
|
||
* settings (`footer`, currently the mid-run send mode row). Data-driven — the caller passes
|
||
* the item list and footer; the menu itself knows nothing about the entries. The button is
|
||
* never disabled: settings must stay reachable during a run, so unavailable *items* gray out
|
||
* individually instead.
|
||
*/
|
||
function PlusMenu({
|
||
items,
|
||
footer,
|
||
direction = "up",
|
||
}: {
|
||
items: PlusMenuItem[];
|
||
footer?: ReactNode;
|
||
direction?: "up" | "down";
|
||
}) {
|
||
const [open, setOpen] = useState(false);
|
||
return (
|
||
<Dropdown
|
||
open={open}
|
||
setOpen={setOpen}
|
||
// Placement is portal-driven like the rest of the toolbar (its scroll container would
|
||
// clip an absolutely-positioned panel); only size classes belong here.
|
||
menuClass="w-72"
|
||
portal={{ direction, align: "left" }}
|
||
button={
|
||
<button
|
||
type="button"
|
||
aria-label={S.chat.plusMenu}
|
||
title={S.chat.plusMenu}
|
||
onClick={() => setOpen(!open)}
|
||
className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-gray-500 transition-colors duration-150 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
|
||
>
|
||
<GlyphIcon d="M12 5v14M5 12h14" size={15} className="shrink-0" />
|
||
</button>
|
||
}
|
||
>
|
||
{items.map((item) => (
|
||
<button
|
||
key={item.key}
|
||
type="button"
|
||
aria-pressed={item.active}
|
||
disabled={item.disabled}
|
||
onClick={() => {
|
||
setOpen(false);
|
||
item.onSelect();
|
||
}}
|
||
className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs transition-colors duration-150 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent dark:hover:bg-gray-800 dark:disabled:hover:bg-transparent ${
|
||
item.active
|
||
? "font-medium text-gray-900 dark:text-gray-100"
|
||
: "text-gray-600 dark:text-gray-400"
|
||
}`}
|
||
>
|
||
<GlyphIcon
|
||
d={item.icon}
|
||
size={14}
|
||
className="shrink-0 text-gray-400 dark:text-gray-500"
|
||
/>
|
||
<span className="shrink-0">{item.label}</span>
|
||
<span className="min-w-0 flex-1 truncate text-gray-400 dark:text-gray-500">
|
||
{item.desc}
|
||
</span>
|
||
<span className="w-3 shrink-0 text-center">{item.active ? "✓" : ""}</span>
|
||
</button>
|
||
))}
|
||
{footer && (
|
||
<div className="mt-1 border-t border-gray-100 pt-1 dark:border-gray-800">{footer}</div>
|
||
)}
|
||
</Dropdown>
|
||
);
|
||
}
|
||
|
||
interface SlashCommand {
|
||
cmd: string;
|
||
desc: string;
|
||
run: () => void;
|
||
}
|
||
|
||
/**
|
||
* Context usage: a **single-color** ring indicator (only conveys total usage, no bucketing) +
|
||
* `used/window` (amber above 80%, red above 95%). When the model has no `context_window`
|
||
* configured, resolveContextWindow falls back to 128000 and the ring is drawn as usual — the
|
||
* usage ratio always has a reference point, instead of degrading into a lone number when config
|
||
* is missing.
|
||
*
|
||
* `unknown` (after a successful compaction, before the next regular Request reports usage): draws
|
||
* an empty ring, value shown as `—`. **Must not be drawn as 0** — that would claim the context
|
||
* has been cleared, while the summary itself still occupies tokens; at this point we simply
|
||
* haven't measured yet, not measured to be zero.
|
||
*/
|
||
function ContextGauge({
|
||
now,
|
||
window: win,
|
||
unknown = false,
|
||
}: {
|
||
now: number;
|
||
window?: number;
|
||
unknown?: boolean;
|
||
}) {
|
||
const max = resolveContextWindow(win);
|
||
const pct = unknown ? 0 : Math.min(1, now / max);
|
||
const color =
|
||
unknown || pct <= 0.8
|
||
? "text-gray-400 dark:text-gray-500"
|
||
: pct > 0.95
|
||
? "text-red-500"
|
||
: "text-amber-500";
|
||
const R = 5;
|
||
const C = 2 * Math.PI * R;
|
||
return (
|
||
<span
|
||
title={unknown ? S.chat.contextUnknown : `${S.chat.contextUsage} ${Math.round(pct * 100)}%`}
|
||
className={`flex shrink-0 items-center gap-1 font-mono ${color}`}
|
||
>
|
||
<svg width="14" height="14" viewBox="0 0 14 14" aria-hidden className="block shrink-0">
|
||
<circle
|
||
cx="7"
|
||
cy="7"
|
||
r={R}
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeOpacity="0.25"
|
||
strokeWidth="2"
|
||
/>
|
||
<circle
|
||
cx="7"
|
||
cy="7"
|
||
r={R}
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth="2"
|
||
strokeLinecap="round"
|
||
strokeDasharray={`${C * pct} ${C}`}
|
||
transform="rotate(-90 7 7)"
|
||
/>
|
||
</svg>
|
||
{/* The ring alone carries the meaning on phones: the numbers hide below @md (the title
|
||
still shows the exact usage), keeping the right-hand control group inside a 320px
|
||
viewport in the running state. */}
|
||
<span className="hidden @md:inline">
|
||
{unknown ? "—" : humanizeTokens(now)}/{humanizeTokens(max)}
|
||
</span>
|
||
</span>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* One file attachment staged in the composer. `dataUrl` is the base64 `data:` URL sent as the
|
||
* task input's `file` part; `name` / `size` only feed the chip (the server decides the name the
|
||
* file actually gets on disk).
|
||
*/
|
||
interface Attachment {
|
||
name: string;
|
||
size: number;
|
||
dataUrl: string;
|
||
}
|
||
|
||
/** Mirrors the server's per-file attachment cap (services/task-attachments.ts), so an oversize pick is refused here instead of costing an upload and a 413. */
|
||
const MAX_ATTACHMENT_BYTES = 10 * 1024 * 1024;
|
||
|
||
/** Reads one file as a base64 data URL; resolves to null on a read error rather than rejecting, so one unreadable file cannot drop the rest of the batch. */
|
||
function readDataUrl(file: File): Promise<string | null> {
|
||
return new Promise((resolve) => {
|
||
const reader = new FileReader();
|
||
reader.onload = () => resolve(typeof reader.result === "string" ? reader.result : null);
|
||
reader.onerror = () => resolve(null);
|
||
reader.readAsDataURL(file);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Appends the draft's attachments to a task input — images first (in pick order), then files.
|
||
* One place, because every send path submits the same draft: the normal send, the follow-up
|
||
* queue, the @ handoff and the `/model` switch.
|
||
*/
|
||
function appendAttachmentParts(
|
||
input: TaskInputPart[],
|
||
images: string[],
|
||
attachments: Attachment[],
|
||
): void {
|
||
for (const url of images) input.push({ type: "image_url", imageUrl: url });
|
||
for (const file of attachments) {
|
||
input.push({ type: "file", fileName: file.name, dataUrl: file.dataUrl });
|
||
}
|
||
}
|
||
|
||
export function ChatInput({
|
||
status,
|
||
onSend,
|
||
onSteer,
|
||
steeringDeliveredCount,
|
||
onQueueFollowUp,
|
||
queuedFollowUps = 0,
|
||
onStop,
|
||
onCompact,
|
||
modelRef,
|
||
models,
|
||
onChangeModel,
|
||
onSwitchModel,
|
||
defaultModel,
|
||
thinkingLevel,
|
||
onChangeThinkingLevel,
|
||
turnThinkingLevel,
|
||
onChangeTurnThinkingLevel,
|
||
contextWindow,
|
||
contextNow,
|
||
contextStale = false,
|
||
vision,
|
||
approvalMode,
|
||
onChangeApprovalMode,
|
||
modeSaving,
|
||
autoFocus,
|
||
agents,
|
||
currentAgentId,
|
||
skills,
|
||
initialSkills,
|
||
onSkillsChange,
|
||
onHandoff,
|
||
initialText,
|
||
onTextChange,
|
||
initialHandoffTargetId,
|
||
onHandoffTargetChange,
|
||
initialPendingModelRef,
|
||
onPendingModelChange,
|
||
modelAuthDead = false,
|
||
onOpenModels,
|
||
onRetryModelAuth,
|
||
onNewSession,
|
||
}: {
|
||
status: SessionStatus;
|
||
/**
|
||
* Returns whether it succeeded: on failure the input draft is kept (not cleared).
|
||
* `goal` is non-null when goal mode is engaged: the text is the objective and the server
|
||
* loops the Session until the goal reaches a terminal state (budget -1 = unlimited).
|
||
*/
|
||
onSend: (input: TaskInputPart[], goal: { budget: number } | null) => Promise<boolean>;
|
||
/**
|
||
* Mid-run steering (session state only): while a Task is running, Enter/send queues the
|
||
* trimmed text for the running agent — it is delivered between turns as a standalone
|
||
* `[user_steering]` user message. `"queued"` clears the text and shows the queued hint;
|
||
* `"not_running"` (409 race with completion) makes the input fall back to its full normal
|
||
* send path; `"failed"` keeps the draft. When absent (draft state), the input stays
|
||
* send-disabled while running, as before.
|
||
*/
|
||
onSteer?: (text: string) => Promise<"queued" | "not_running" | "failed">;
|
||
/**
|
||
* Count of steering messages already visible in the message stream: the queued hint stays
|
||
* up until this increases past its value at queue time (i.e. the message was delivered).
|
||
*/
|
||
steeringDeliveredCount?: number;
|
||
/**
|
||
* Follow-up queue (session state only): posts the full input with `queueIfBusy` — a busy
|
||
* session holds it server-side and auto-sends it as an ordinary next task once the current
|
||
* run finishes. Offered as the "follow-up" choice of the mid-run mode switch; when absent,
|
||
* only steering is offered while running.
|
||
*/
|
||
onQueueFollowUp?: (input: TaskInputPart[]) => Promise<boolean>;
|
||
/** Server-reported queued follow-up count (from task_state): renders the "N queued" hint until they auto-send. */
|
||
queuedFollowUps?: number;
|
||
/**
|
||
* Used instead of onSend when an `/agent` target chip is staged: opens a new chat for the
|
||
* target agent (the current Session receives no message). Returns whether it succeeded
|
||
* (draft kept on failure). Supplied for an active Session only — a draft has no conversation
|
||
* to hand over, so `/agent` is not offered there (same gating as `/model`'s onSwitchModel).
|
||
*/
|
||
onHandoff?: (target: AgentSummary, input: TaskInputPart[]) => Promise<boolean>;
|
||
onStop: () => Promise<void>;
|
||
onCompact: () => Promise<void>;
|
||
/** Currently selected model reference ((provider, modelId) is the unique key); null = not yet chosen. */
|
||
modelRef: ModelRefDto | null;
|
||
/**
|
||
* Candidate model list: when supplied together with onChangeModel, renders the model selector
|
||
* to the left of the send button (draft state); when only models is supplied (session state),
|
||
* it's used to look up the locked model's display name (read-only display).
|
||
*/
|
||
models?: ModelInfo[];
|
||
/** Changes the selected model in draft state; no longer passed once the Session is created and the model is locked. */
|
||
onChangeModel?: (ref: ModelRefDto) => void;
|
||
/**
|
||
* Session state: model switch via the `/model` command — forks the session onto the picked
|
||
* model (a NEW session carrying this conversation) and navigates there; the draft written
|
||
* after the pick is posted as the new session's first task. Returns whether it succeeded
|
||
* (draft kept on failure). Only passed for an active session (the command is additionally
|
||
* gated on not running/compacting); picking the current model is a no-op.
|
||
*/
|
||
onSwitchModel?: (ref: ModelRefDto, input: TaskInputPart[]) => Promise<boolean>;
|
||
/** Project default model (marked "default" on the selector's candidate item). */
|
||
defaultModel?: ModelRefDto;
|
||
/**
|
||
* Draft state: the selected Agent's current thinking level ("" = no override / provider
|
||
* default; null while the Agent config is loading — the picker renders disabled). Supplied
|
||
* together with onChangeThinkingLevel; without the callback the picker isn't rendered.
|
||
*/
|
||
thinkingLevel?: string | null;
|
||
/**
|
||
* Draft state: writes the picked level straight through to the Agent settings (the parent
|
||
* persists it via the agent-config API; the session created on first send picks it up and it
|
||
* becomes the Agent's new default).
|
||
*/
|
||
onChangeThinkingLevel?: (level: string) => void;
|
||
/**
|
||
* Session state: the per-turn thinking level to DISPLAY — the parent resolves it as "the
|
||
* user's pick for this session, else the Agent config's level" ("" = neither known yet),
|
||
* so the picker auto-follows the config until touched. The send path is the parent's own
|
||
* state: while untouched nothing is sent with tasks (the server/core fallback applies and
|
||
* mid-session Agent-config edits keep taking effect); an explicit pick sticks and is sent
|
||
* with every subsequent task, never writing through to the Agent config (that behavior
|
||
* stays draft-only).
|
||
*/
|
||
turnThinkingLevel?: string;
|
||
/** Session state: pins the per-turn thinking level for this session; also enables the editable picker. */
|
||
onChangeTurnThinkingLevel?: (level: string) => void;
|
||
/** Model's context window (from models config; when not configured, the ring's cap falls back to 128000 via resolveContextWindow). */
|
||
contextWindow?: number;
|
||
/** Current context usage (total of the most recent main-session Request). */
|
||
contextNow: number;
|
||
/** After a successful compaction, before the next regular Request reports usage: usage is **unknown** (not 0); the ring is drawn empty and the value shown as `—`. */
|
||
contextStale?: boolean;
|
||
/** Whether the current model supports image input (models config's vision; assumed supported by default). */
|
||
vision: boolean;
|
||
approvalMode: ApprovalMode;
|
||
onChangeApprovalMode: (mode: ApprovalMode) => void;
|
||
modeSaving: boolean;
|
||
autoFocus?: boolean;
|
||
/** Agent list of the current Project: the `/agent` command's candidates (without any, the command isn't offered). */
|
||
agents: AgentSummary[];
|
||
/** The Agent this composer already belongs to (the Session's, or the draft's selection): marked as the current entry in the `/agent` picker. */
|
||
currentAgentId?: string;
|
||
/**
|
||
* Skills installed on the current Agent (in session state, fetched by chat-page keyed on the
|
||
* Session's Agent; in draft state, fetched by draft-view keyed on the selected Agent; a failed
|
||
* fetch is treated as no skills): candidates for the bottom toolbar's skills dropdown, and the
|
||
* same source feeds the slash menu's skill command entries. When the Agent changes, the parent
|
||
* clears this first before refetching, and the selection clears along with it (doesn't linger
|
||
* across Agents).
|
||
*/
|
||
skills: SkillMetadataItem[];
|
||
/**
|
||
* Initially selected skill names (draft restore; the skill library page's quick-invoke writes
|
||
* this into the draft cache): read once on mount; once the installed list is ready, names not
|
||
* in that list are pruned.
|
||
*/
|
||
initialSkills?: string[];
|
||
/** Callback when selected skills change (check/prune; the clear after a successful send does not call back, same as onTextChange). */
|
||
onSkillsChange?: (names: string[]) => void;
|
||
/** Draft's initial text (restored on mount; paired with onTextChange for draft auto-caching). */
|
||
initialText?: string;
|
||
/**
|
||
* Callback when the user edits the text body (including paths that rewrite the text such as
|
||
* running a slash command); the clear after a successful send does **not** call back — at
|
||
* that point the parent has already cleared the draft cache entirely, and calling back would
|
||
* resurrect it.
|
||
*/
|
||
onTextChange?: (text: string) => void;
|
||
/** Draft restore: the agentId of the staged handoff target (resolved once agents are ready; discarded if stale). */
|
||
initialHandoffTargetId?: string;
|
||
/** Callback when the staged handoff target changes (picked/removed; the clear after a successful send does not call back, same as onTextChange). */
|
||
onHandoffTargetChange?: (agentId: string | null) => void;
|
||
/**
|
||
* Draft restore: the staged `/model` switch target (resolved once models are ready; discarded
|
||
* when that model is gone or is the one this session already runs). Cached for the same
|
||
* reason as the handoff target — the composer text survives an unmount, so its chip must too,
|
||
* or Enter would post the message to the current session on the old model.
|
||
*/
|
||
initialPendingModelRef?: ModelRefDto;
|
||
/** Callback when the staged model switch changes (picked/removed; the clear after a successful send does not call back, same as onTextChange). */
|
||
onPendingModelChange?: (ref: ModelRefDto | null) => void;
|
||
/**
|
||
* Session state: the Session's model credentials failed authentication (abort with
|
||
* status "auth") and the Project's credentials have not been updated since (the parent
|
||
* computes the time gate — see isModelAuthDead). Recoverable: only the model reference
|
||
* is fixed at creation, credentials come from the current Project config — so the
|
||
* composer disables and grays itself with a notice pointing at the Models page (primary),
|
||
* a Retry affordance, and a New Session escape. Updating the key auto-unlocks (live via
|
||
* the credentials_updated event, and across reloads via the time gate).
|
||
*/
|
||
modelAuthDead?: boolean;
|
||
/** Navigates to the Models page (where the credential is actually fixed); renders the notice's primary button when supplied. */
|
||
onOpenModels?: () => void;
|
||
/**
|
||
* Clears the auth-dead state and re-enables the composer for another attempt (the state
|
||
* re-arms on the next auth failure). The escape hatch for credential changes the
|
||
* timestamps miss (e.g. edited outside the UI).
|
||
*/
|
||
onRetryModelAuth?: () => void;
|
||
/** Navigates to a fresh draft (`/chat/new`); renders the notice's "New Session" button when supplied. */
|
||
onNewSession?: () => void;
|
||
}) {
|
||
const { locale } = useLocale();
|
||
const [text, setText] = useState(initialText ?? "");
|
||
/** Live text mirror for slash-command run() closures (the commands memo deliberately doesn't depend on text). */
|
||
const textRef = useRef(text);
|
||
textRef.current = text;
|
||
const [images, setImages] = useState<string[]>([]);
|
||
// File attachments picked from the "+" menu (any type): held as base64 data URLs, exactly
|
||
// like images — a draft has no Session yet, so there is nothing to upload them to ahead of
|
||
// time; they travel with the task request and the server files them into the scratchpad.
|
||
const [attachments, setAttachments] = useState<Attachment[]>([]);
|
||
const [busy, setBusy] = useState(false);
|
||
const [slashIndex, setSlashIndex] = useState(0);
|
||
// Slash token start where Escape closed the menu: it stays shut for that one token.
|
||
const [slashDismissed, setSlashDismissed] = useState<number | null>(null);
|
||
// Switch pickers (opened by /model — session state — and /agent). Each command consumes its
|
||
// slash token immediately (same as /compact), so closing a picker — Escape, click outside, or
|
||
// the picked-current-model no-op — can never re-open the slash menu, and there is no stale
|
||
// token range to recompute at pick time; whatever text remains is the draft (and becomes the
|
||
// new session's first message once the staged switch is sent).
|
||
const [modelSwitchOpen, setModelSwitchOpen] = useState(false);
|
||
const modelSwitchRef = useRef<HTMLDivElement>(null);
|
||
const [agentSwitchOpen, setAgentSwitchOpen] = useState(false);
|
||
const agentSwitchRef = useRef<HTMLDivElement>(null);
|
||
// Anchor for the popups that open upward, and the room actually available above them.
|
||
const anchorRef = useRef<HTMLDivElement>(null);
|
||
const [upwardMaxH, setUpwardMaxH] = useState<number>();
|
||
// Staged handoff target from /agent (chip, fixed at the front of the input); only one allowed, picking again replaces it directly.
|
||
const [target, setTarget] = useState<AgentSummary | null>(null);
|
||
// Staged model switch from /model (chip too), cached in the draft exactly like the handoff
|
||
// target: the composer's text is cached and this component is keyed by session id, so a chip
|
||
// kept only in component state would disappear on a session switch while the text it belongs
|
||
// to came back — and Enter would then post that text to the current session on the old model.
|
||
const [pendingModel, setPendingModel] = useState<ModelInfo | null>(null);
|
||
// Selected skills (dropdown checklist, multi-select): initial value comes from draft restore (quick-invoke pre-selection), cleared on successful send.
|
||
const [selectedSkills, setSelectedSkills] = useState<string[]>(initialSkills ?? []);
|
||
// Cursor position (tracked via onChange/onSelect): the slash menu matches the token at the caret.
|
||
const [caret, setCaret] = useState(0);
|
||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||
// Short placeholder on narrow screens: a long hint would wrap and get clipped in a single-line textarea.
|
||
const [narrow] = useState(() => window.matchMedia("(max-width: 767px)").matches);
|
||
|
||
const running = status === "running";
|
||
const compacting = status === "compacting";
|
||
// Goal mode (engaged via the "+" menu or /goal): the text body becomes the objective. It is
|
||
// exclusive with a staged /agent or /model switch (engaging either clears the other) and with
|
||
// images (the objective is re-injected every round as plain text); selected skills ride the
|
||
// round-1 message as a [use_skills] block, exactly like a normal send.
|
||
const [goalOn, setGoalOn] = useState(false);
|
||
const [goalBudgetText, setGoalBudgetText] = useState("");
|
||
const [goalBudgetOpen, setGoalBudgetOpen] = useState(false);
|
||
const [goalBudgetDraft, setGoalBudgetDraft] = useState("");
|
||
/** The committed budget is always valid: the popover keeps invalid edits in its local draft. */
|
||
const goalBudget = goalOn ? parseBudgetInput(goalBudgetText) : null;
|
||
const goalBudgetDraftValue = parseBudgetInput(goalBudgetDraft);
|
||
const goalBudgetDraftInvalid = goalBudgetDraftValue === null;
|
||
const goalBudgetSummary =
|
||
goalBudget !== null && goalBudget !== UNLIMITED_BUDGET
|
||
? S.chat.goalBudgetValue(humanizeTokens(goalBudget))
|
||
: S.chat.goalBudgetUnlimited;
|
||
/**
|
||
* Where a send with a staged chip would go — and, for a `/model` fork, whether it may go at
|
||
* all right now (see stagedSendRoute): a fork branches a NEW session off this session's
|
||
* Trace, so it waits for the session to be idle. Both the eligibility below and the send path
|
||
* read this one value, so the button and what the button does can't disagree.
|
||
*/
|
||
const stagedRoute = stagedSendRoute({
|
||
handoffTarget: target !== null,
|
||
pendingModel: pendingModel !== null,
|
||
canSwitchModel: onSwitchModel !== undefined,
|
||
sessionBusy: running || compacting,
|
||
});
|
||
// Sending is also allowed with no text at all: attachments (images or files), a staged switch
|
||
// chip (/agent or /model) and selected skills each carry a message on their own — a handoff's
|
||
// first message may be just a [handoff_from] source block, and the empty-text fallbacks fill in
|
||
// the rest (S.chat.skillsAutoMessage with skills selected, S.chat.modelSwitchAutoMessage for a
|
||
// staged model switch — see sendNormal). Goal mode instead requires a text objective and a
|
||
// parseable budget — and an open editor showing an invalid draft disables Send outright:
|
||
// combined with the editor refusing to close over an invalid draft (below), no click sequence
|
||
// can fire a goal with a stale committed budget.
|
||
const canSend =
|
||
!running &&
|
||
!compacting &&
|
||
!busy &&
|
||
!modelAuthDead &&
|
||
(goalOn
|
||
? text.trim().length > 0 &&
|
||
images.length === 0 &&
|
||
attachments.length === 0 &&
|
||
goalBudget !== null &&
|
||
!(goalBudgetOpen && goalBudgetDraftInvalid)
|
||
: text.trim().length > 0 ||
|
||
images.length > 0 ||
|
||
attachments.length > 0 ||
|
||
target !== null ||
|
||
pendingModel !== null ||
|
||
selectedSkills.length > 0);
|
||
|
||
/**
|
||
* The budget editor is a fixed upward popover. Opening copies the committed value; closing
|
||
* commits a valid draft — so typing a budget and clicking straight onto Send keeps it (the
|
||
* Send mousedown closes the popover before the click lands). An INVALID draft refuses to
|
||
* close: silently reverting would let the very next click fire the goal with the stale
|
||
* committed budget — fix the draft or cancel with Escape (cancelGoalBudget below).
|
||
*/
|
||
const setGoalBudgetEditorOpen = useCallback(
|
||
(open: boolean) => {
|
||
if (open) {
|
||
setGoalBudgetDraft(goalBudgetText);
|
||
setGoalBudgetOpen(true);
|
||
return;
|
||
}
|
||
if (parseBudgetInput(goalBudgetDraft) === null) return;
|
||
setGoalBudgetText(goalBudgetDraft.trim());
|
||
setGoalBudgetOpen(false);
|
||
},
|
||
[goalBudgetText, goalBudgetDraft],
|
||
);
|
||
|
||
/**
|
||
* Cancel the budget editor: close WITHOUT committing (reopening re-copies the committed
|
||
* value). Wired to the Dropdown's window-level Escape, so it is genuinely
|
||
* focus-independent — including after an invalid draft refused an outside-click close and
|
||
* focus already left the chip (e.g. sits in the objective textarea).
|
||
*/
|
||
const cancelGoalBudget = useCallback(() => {
|
||
setGoalBudgetOpen(false);
|
||
textareaRef.current?.focus();
|
||
}, []);
|
||
|
||
/** Commit only valid input; Enter and the check button share this path. */
|
||
const saveGoalBudget = useCallback(() => {
|
||
if (parseBudgetInput(goalBudgetDraft) === null) return;
|
||
setGoalBudgetText(goalBudgetDraft.trim());
|
||
setGoalBudgetOpen(false);
|
||
textareaRef.current?.focus();
|
||
}, [goalBudgetDraft]);
|
||
|
||
/**
|
||
* Engage/exit goal mode; engaging clears any staged switch chip and every attachment
|
||
* (genuinely exclusive: a handoff or a model switch opens another session, and the server
|
||
* rejects non-text goal input). Selected skills stay — they ride the round-1 message as a
|
||
* [use_skills] block, like a normal send.
|
||
*/
|
||
const toggleGoal = useCallback(
|
||
(on: boolean) => {
|
||
setGoalOn(on);
|
||
setGoalBudgetOpen(false);
|
||
setGoalBudgetDraft("");
|
||
if (on) {
|
||
setGoalBudgetText("");
|
||
setTarget(null);
|
||
onHandoffTargetChange?.(null);
|
||
setPendingModel(null);
|
||
onPendingModelChange?.(null);
|
||
// Attachments can't ride a goal (the server rejects non-text goal input): clear any
|
||
// already attached, or canSend would stay silently false with the objective looking ready.
|
||
setImages([]);
|
||
setAttachments([]);
|
||
}
|
||
},
|
||
[onHandoffTargetChange, onPendingModelChange],
|
||
);
|
||
|
||
// Mid-run steering: while running, Enter/send queues plain text for the running agent
|
||
// (delivered between turns as a [user_steering] user message). Text only — attachments /
|
||
// skills / a staged switch stay in the draft for a later normal send (a staged /agent or
|
||
// /model chip also blocks steering: the text belongs to the conversation the switch is about
|
||
// to open, not to the agent running here).
|
||
// `!goalOn`: with the goal chip engaged the text is an OBJECTIVE — steering it into a run
|
||
// that happens to be active (e.g. a schedule fired) would silently repurpose it.
|
||
const canSteer =
|
||
running &&
|
||
!busy &&
|
||
!goalOn &&
|
||
!modelAuthDead &&
|
||
onSteer !== undefined &&
|
||
target === null &&
|
||
pendingModel === null &&
|
||
text.trim().length > 0;
|
||
// Mid-run send mode (owner directive): the user chooses between "steer" (delivered
|
||
// mid-run as a [user_steering] input) and "follow-up" (held server-side and auto-sent as
|
||
// an ordinary next task once this run finishes). Set from the "+" menu's settings row —
|
||
// available in draft state and active sessions alike — and **remembered** across
|
||
// sessions/reloads (localStorage, see STEER_MODE_KEY); the running-state send simply
|
||
// follows the remembered mode.
|
||
const [steerMode, setSteerModeState] = useState<SteerMode>(initialSteerMode);
|
||
const setSteerMode = (mode: SteerMode): void => {
|
||
setSteerModeState(mode);
|
||
localStorage.setItem(STEER_MODE_KEY, mode);
|
||
};
|
||
const followUpMode = steerMode === "followup" && onQueueFollowUp !== undefined;
|
||
// A follow-up is a full normal message: the whole draft (text / attachments / skills / a
|
||
// staged switch) is eligible, same content rule as canSend.
|
||
// `stagedRoute !== "blocked"`: a staged model fork is never eligible mid-run — the follow-up
|
||
// path composes the whole draft and then hands it to onSwitchModel rather than to the queue,
|
||
// so without this gate Enter would fork off a Trace that is still being written.
|
||
const canFollowUp =
|
||
running &&
|
||
!busy &&
|
||
!goalOn &&
|
||
!modelAuthDead &&
|
||
followUpMode &&
|
||
stagedRoute !== "blocked" &&
|
||
(text.trim().length > 0 ||
|
||
images.length > 0 ||
|
||
attachments.length > 0 ||
|
||
target !== null ||
|
||
pendingModel !== null ||
|
||
selectedSkills.length > 0);
|
||
// The single action button's mode: while running, an **empty** composer means Stop
|
||
// (abort); as soon as there is something to send it becomes the send button (steer or
|
||
// follow-up per the remembered mode). Idle/compacting is always send.
|
||
const canMidRunSend = followUpMode ? canFollowUp : canSteer;
|
||
const midRunSendLabel = followUpMode ? S.chat.followUpSend : S.chat.steerSend;
|
||
const stopAction =
|
||
running &&
|
||
text.trim().length === 0 &&
|
||
images.length === 0 &&
|
||
attachments.length === 0 &&
|
||
target === null &&
|
||
pendingModel === null &&
|
||
selectedSkills.length === 0;
|
||
// Queued hint: shown after a successful steer until the message shows up in the stream
|
||
// (steeringDeliveredCount increases past the baseline captured at queue time) or the run
|
||
// stops being observable (task no longer running).
|
||
const [steerPending, setSteerPending] = useState(false);
|
||
const steerBaseline = useRef(0);
|
||
useEffect(() => {
|
||
if (!steerPending) return;
|
||
if (!running || (steeringDeliveredCount ?? 0) > steerBaseline.current) {
|
||
setSteerPending(false);
|
||
}
|
||
}, [steerPending, running, steeringDeliveredCount]);
|
||
|
||
/** Toggle a skill on/off (shared by dropdown option clicks and the slash skill command); the change callback lets the parent write it into the draft. */
|
||
const toggleSkill = useCallback(
|
||
(name: string) => {
|
||
const next = selectedSkills.includes(name)
|
||
? selectedSkills.filter((n) => n !== name)
|
||
: [...selectedSkills, name];
|
||
setSelectedSkills(next);
|
||
onSkillsChange?.(next);
|
||
},
|
||
[selectedSkills, onSkillsChange],
|
||
);
|
||
|
||
/** The slash token currently under the caret (kept in a ref so command run() closures always remove the live token). */
|
||
const slashMatchRef = useRef<ReturnType<typeof matchSlash>>(null);
|
||
const commands = useMemo<SlashCommand[]>(() => {
|
||
/** Removes just the slash token after a command runs (the rest of the text stays; the height re-measures itself off the new value, see the autoGrow layout effect). */
|
||
const clearInput = () => {
|
||
const match = slashMatchRef.current;
|
||
const next = match ? removeSlashToken(textRef.current, match) : "";
|
||
setText(next);
|
||
onTextChange?.(next);
|
||
};
|
||
return [
|
||
{
|
||
cmd: "/compact",
|
||
desc: S.chat.compact,
|
||
run: () => {
|
||
clearInput();
|
||
void onCompact();
|
||
},
|
||
},
|
||
{
|
||
cmd: "/goal",
|
||
desc: S.chat.goalModeDesc,
|
||
run: () => {
|
||
clearInput();
|
||
toggleGoal(!goalOn);
|
||
},
|
||
},
|
||
// Model switch (active idle session only — the parent passes onSwitchModel just there;
|
||
// draft state has its own model picker). Gated on the model list being loaded: without
|
||
// it the picker would open empty. Running the command consumes the /model token (like
|
||
// /compact) and opens the picker; the rest of the draft stays.
|
||
...(onSwitchModel && models && models.length > 0
|
||
? [
|
||
{
|
||
cmd: "/model",
|
||
desc: S.chat.switchModel,
|
||
run: () => {
|
||
clearInput();
|
||
setModelSwitchOpen(true);
|
||
},
|
||
},
|
||
]
|
||
: []),
|
||
// Agent handoff: same shape as /model — the command consumes its token and opens the
|
||
// agent picker, whose pick is staged as a chip and only acted on at send time. Gated the
|
||
// same way too: the parent passes onHandoff for an active Session only, because a draft
|
||
// has nothing to hand over (and already picks its Agent in the draft page's own
|
||
// selector). Candidates must exist, or the picker would open empty.
|
||
...(onHandoff && agents.length > 0
|
||
? [
|
||
{
|
||
cmd: "/agent",
|
||
desc: S.chat.switchAgent,
|
||
run: () => {
|
||
clearInput();
|
||
setAgentSwitchOpen(true);
|
||
},
|
||
},
|
||
]
|
||
: []),
|
||
// Each installed skill gets its own entry: `/<skill_name>` toggles that skill's selection (without sending), description follows the UI language.
|
||
...skillSlashItems(skills, locale).map((s) => ({
|
||
cmd: s.cmd,
|
||
desc: s.desc,
|
||
run: () => {
|
||
clearInput();
|
||
toggleSkill(s.name);
|
||
},
|
||
})),
|
||
];
|
||
}, [
|
||
onCompact,
|
||
onSwitchModel,
|
||
models,
|
||
agents,
|
||
onTextChange,
|
||
skills,
|
||
locale,
|
||
toggleSkill,
|
||
toggleGoal,
|
||
goalOn,
|
||
]);
|
||
// Positional matching: a slash opens the menu from any caret position; running a command
|
||
// removes just the token, leaving the rest of the text intact. Doesn't reopen after Escape
|
||
// until the caret sits on a different token; suppressed while a switch picker is open (the
|
||
// picker took over the interaction, and its own search box owns the keyboard).
|
||
const slashTok =
|
||
!running && !compacting && !modelSwitchOpen && !agentSwitchOpen
|
||
? matchSlash(text, caret)
|
||
: null;
|
||
slashMatchRef.current = slashTok;
|
||
const slashMatches =
|
||
slashTok && slashTok.start !== slashDismissed
|
||
? commands.filter((c) => c.cmd.startsWith(`/${slashTok.query}`))
|
||
: [];
|
||
const slashOpen = slashMatches.length > 0;
|
||
const activeSlash = slashMatches[Math.min(slashIndex, slashMatches.length - 1)];
|
||
|
||
// Close a switch picker on click-outside / Escape (same convention as Dropdown; these panels
|
||
// have no trigger button of their own, so the handling lives here). Only one can be open at a
|
||
// time — the slash menu that opens them is suppressed while either is up.
|
||
useEffect(() => {
|
||
if (!modelSwitchOpen && !agentSwitchOpen) return;
|
||
// Dismissing the panel puts the caret back where the user was typing: the picker's search
|
||
// box stole the focus when it opened, and without this it would be left on <body>.
|
||
const closeAll = () => {
|
||
setModelSwitchOpen(false);
|
||
setAgentSwitchOpen(false);
|
||
textareaRef.current?.focus();
|
||
};
|
||
// globalThis.* event types: the React ones imported above would shadow the DOM ones here.
|
||
const onClick = (e: globalThis.MouseEvent) => {
|
||
const panel = modelSwitchOpen ? modelSwitchRef.current : agentSwitchRef.current;
|
||
if (panel && !panel.contains(e.target as Node)) closeAll();
|
||
};
|
||
const onKey = (e: globalThis.KeyboardEvent) => {
|
||
// `isComposing`: Escape while an IME candidate list is up means "drop the candidates",
|
||
// not "close the picker". Closing there would be unrecoverable — the command already
|
||
// consumed its `/agent` / `/model` token, so the user's remaining draft is all they have
|
||
// and the picker is the only way back to the pick they were making.
|
||
if (e.key === "Escape" && !e.isComposing) closeAll();
|
||
};
|
||
window.addEventListener("mousedown", onClick);
|
||
window.addEventListener("keydown", onKey);
|
||
return () => {
|
||
window.removeEventListener("mousedown", onClick);
|
||
window.removeEventListener("keydown", onKey);
|
||
};
|
||
}, [modelSwitchOpen, agentSwitchOpen]);
|
||
|
||
/** Stage a model as the /model chip (null = drop it), keeping the draft cache in step. */
|
||
const stageModel = (m: ModelInfo | null) => {
|
||
setPendingModel(m);
|
||
onPendingModelChange?.(m ? { provider: m.provider, modelId: m.modelId } : null);
|
||
};
|
||
|
||
/**
|
||
* /model pick: **stages** the model as a chip instead of switching on the spot — the user
|
||
* keeps typing and Enter/Send performs the fork (see sendNormal), so the message that opens
|
||
* the new session is the one they meant to write. Picking the CURRENT model **clears** the
|
||
* staging: forking a session onto the model it already runs is nothing but a lost
|
||
* conversation, so that pick can only mean "never mind, stay here" — leaving an earlier pick
|
||
* armed would fork onto it on the next Enter, the opposite of what was just asked for.
|
||
* Exclusive with a staged handoff target and with goal mode (the latest pick wins).
|
||
*/
|
||
const pickSwitchModel = (m: ModelInfo) => {
|
||
setModelSwitchOpen(false);
|
||
textareaRef.current?.focus();
|
||
if (sameModelRef(m, modelRef)) {
|
||
stageModel(null);
|
||
return;
|
||
}
|
||
stageModel(m);
|
||
setTarget(null);
|
||
onHandoffTargetChange?.(null);
|
||
setGoalOn(false);
|
||
};
|
||
|
||
/**
|
||
* /agent pick: stages the target agent as the handoff chip — nothing is sent yet, and the
|
||
* draft text is left alone (Enter/Send hands it to the new chat; an empty body still opens
|
||
* one, carrying just the [handoff_from] block). Exclusive with a staged model switch and with
|
||
* goal mode, exactly like the model pick above; the target is cached in the draft so the chip
|
||
* survives a reload.
|
||
*/
|
||
const pickHandoffTarget = (agent: AgentSummary) => {
|
||
setAgentSwitchOpen(false);
|
||
setTarget(agent);
|
||
onHandoffTargetChange?.(agent.agentId);
|
||
stageModel(null);
|
||
setGoalOn(false);
|
||
textareaRef.current?.focus();
|
||
};
|
||
|
||
/** Drop whichever switch chip is staged (the chips' x buttons, and Backspace at the start of the text). */
|
||
const clearSwitchTarget = () => {
|
||
if (target !== null) {
|
||
setTarget(null);
|
||
onHandoffTargetChange?.(null);
|
||
}
|
||
stageModel(null);
|
||
};
|
||
|
||
// The menus above are drawn upward (`bottom-full`) from the composer, so their ceiling is
|
||
// whatever ancestor clips overflow — on the draft page that's the centered scroll area, whose
|
||
// top edge sits well below the viewport's. A static `40vh` cap can't know that distance and
|
||
// clipped the first rows on shorter windows, so measure the real gap when a menu opens.
|
||
useEffect(() => {
|
||
if (!slashOpen && !modelSwitchOpen && !agentSwitchOpen) return;
|
||
const measure = () => {
|
||
const el = anchorRef.current;
|
||
if (!el) return;
|
||
let ceiling = 0;
|
||
for (let p = el.parentElement; p; p = p.parentElement) {
|
||
if (getComputedStyle(p).overflowY !== "visible") {
|
||
ceiling = p.getBoundingClientRect().top;
|
||
break;
|
||
}
|
||
}
|
||
// Less the menu's own 6px offset from the composer, plus a little breathing room.
|
||
const room = el.getBoundingClientRect().top - ceiling - 14;
|
||
setUpwardMaxH(Math.max(96, Math.min(320, Math.round(room))));
|
||
};
|
||
measure();
|
||
window.addEventListener("resize", measure);
|
||
return () => window.removeEventListener("resize", measure);
|
||
}, [slashOpen, modelSwitchOpen, agentSwitchOpen]);
|
||
|
||
/** Auto-grow the textarea (caps at roughly 6 lines, scrolls internally beyond that). */
|
||
const autoGrow = () => {
|
||
const el = textareaRef.current;
|
||
if (!el) return;
|
||
el.style.height = "auto";
|
||
el.style.height = `${Math.min(el.scrollHeight, 176)}px`;
|
||
};
|
||
|
||
/**
|
||
* The height follows the **rendered** value, measured in a layout effect — the single place
|
||
* that sizes the box, covering mount (a restored multi-line draft), typing, and the clear
|
||
* after a send alike.
|
||
*
|
||
* It must be a layout effect keyed on `text` rather than a call next to each `setText`: the
|
||
* textarea is controlled, so after `setText("")` the DOM still holds the old text until React
|
||
* commits. A `requestAnimationFrame` scheduled alongside the state update races that commit
|
||
* and, when it wins, measures the old multi-line content and re-pins the tall height — with
|
||
* nothing left to measure again, the composer stayed expanded after every send. A layout
|
||
* effect runs after the commit by construction, and before paint, so the box never flashes.
|
||
*/
|
||
useLayoutEffect(autoGrow, [text]);
|
||
|
||
// Cursor placement on mount: move it to the end of a restored draft (by default the browser
|
||
// places the cursor at the start when focusing a textarea that already has content), so typing
|
||
// continues the text naturally, and sync the caret state to match (the slash menu matches the
|
||
// token at the cursor).
|
||
useEffect(() => {
|
||
const el = textareaRef.current;
|
||
if (el && el.value.length > 0) {
|
||
const end = el.value.length;
|
||
el.setSelectionRange(end, end);
|
||
el.scrollTop = el.scrollHeight;
|
||
setCaret(end);
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, []);
|
||
|
||
// Installed skills change (Agent switch triggers a refetch: parent clears first, then
|
||
// updates): the selection keeps only skills that are still available — the tick where it's
|
||
// cleared wipes the whole selection, so nothing lingers across Agents. The first tick on mount
|
||
// is skipped: at that point the installed list hasn't been fetched yet (skills is empty), and
|
||
// pruning would wrongly clear initialSkills (quick-invoke pre-selection); prune only once the
|
||
// list is ready for the first time (the parent's clear uses functional setState to preserve
|
||
// reference identity, so an empty-to-empty clear doesn't trigger this effect).
|
||
const skillsPruneReady = useRef(false);
|
||
useEffect(() => {
|
||
if (!skillsPruneReady.current) {
|
||
skillsPruneReady.current = true;
|
||
if (skills.length === 0) return;
|
||
}
|
||
const next = selectedSkills.filter((n) => skills.some((s) => s.name === n));
|
||
if (next.length === selectedSkills.length) return;
|
||
setSelectedSkills(next);
|
||
onSkillsChange?.(next);
|
||
}, [skills, selectedSkills, onSkillsChange]);
|
||
|
||
/**
|
||
* The two chips are restored from the draft cache by two effects that fire whenever their own
|
||
* list finishes loading — and `agents` and `models` are separate fetches, so either can land
|
||
* first, possibly after the user has already staged something by hand. `staged` is what keeps
|
||
* that from painting two chips at once (which sendNormal would silently resolve in favour of
|
||
* the handoff): a restore only fills an EMPTY slot. When the user has staged a chip or turned
|
||
* goal mode on in the meantime, that live intent is newer than the cached one and wins — the
|
||
* restore is dropped, not merely deferred, exactly as one pick drops the other.
|
||
*
|
||
* Only one of the two can be cached at a time anyway (each pick clears the other's cache
|
||
* entry), so in the ordinary case this changes nothing.
|
||
*/
|
||
const staged = target !== null || pendingModel !== null || goalOn;
|
||
|
||
// Restore the cached handoff target: resolved once by id when agents becomes ready for
|
||
// the first time (discarded if stale); a chip the user manually removes afterward is not restored again.
|
||
const handoffRestored = useRef(false);
|
||
useEffect(() => {
|
||
if (handoffRestored.current || !initialHandoffTargetId || agents.length === 0) return;
|
||
handoffRestored.current = true;
|
||
if (staged) return;
|
||
const restored = agents.find((a) => a.agentId === initialHandoffTargetId);
|
||
if (restored) setTarget(restored);
|
||
}, [agents, initialHandoffTargetId, staged]);
|
||
|
||
// Restore the cached /model switch target, mirroring the handoff restore above: resolved once
|
||
// against the model list when it first becomes ready. Dropped when that model is no longer
|
||
// configured, or when it is the model this session already runs on (the cache outlived a
|
||
// fork), since staging either would leave a chip that can only lose the conversation.
|
||
const pendingModelRestored = useRef(false);
|
||
useEffect(() => {
|
||
if (pendingModelRestored.current || !initialPendingModelRef || !models || models.length === 0) {
|
||
return;
|
||
}
|
||
pendingModelRestored.current = true;
|
||
if (staged || !onSwitchModel) return;
|
||
const restored = models.find((m) => sameModelRef(m, initialPendingModelRef));
|
||
if (restored && !sameModelRef(restored, modelRef)) setPendingModel(restored);
|
||
}, [models, initialPendingModelRef, modelRef, onSwitchModel, staged]);
|
||
|
||
/**
|
||
* The full normal send path (task / handoff / model switch), also the follow-up queue path
|
||
* and the fallback target when a steer hits the completion race: assembles the [use_skills]
|
||
* block, the attachments (images and files) and the staged switch from the whole draft; `post`
|
||
* decides where a message that switches nothing goes (default: onSend; follow-up mode:
|
||
* onQueueFollowUp). Deliberately not gated on `running` — the caller decides (send() gates the
|
||
* normal path; the steering fallback calls this directly after the server said 409
|
||
* not_running, when the local `status` may still lag behind).
|
||
*/
|
||
// `post` accepts onSend's goal parameter so onSend can be its default; the follow-up queue
|
||
// (fewer params) is assignable too. Non-goal calls always pass null.
|
||
const sendNormal = async (
|
||
post: (input: TaskInputPart[], goal: { budget: number } | null) => Promise<boolean> = onSend,
|
||
) => {
|
||
const t = text.trim();
|
||
// Goal mode: the trimmed text is the objective (no images, no staged switch — both are
|
||
// cleared when the chip goes on). Selected skills prefix the round-1 message as a
|
||
// [use_skills] block, exactly like a normal send — the server strips leading marker blocks
|
||
// when recording the objective, and rounds after the first re-inject the objective alone.
|
||
if (goalOn) {
|
||
// Objective only: attachments were already cleared when goal mode engaged (and blocked
|
||
// from being added since), so there is nothing to carry here.
|
||
setBusy(true);
|
||
try {
|
||
const ok = await onSend([{ type: "text", text: buildSkillsMessage(selectedSkills, t) }], {
|
||
budget: goalBudget!,
|
||
});
|
||
if (ok) {
|
||
setText("");
|
||
setSelectedSkills([]);
|
||
toggleGoal(false);
|
||
}
|
||
} finally {
|
||
setBusy(false);
|
||
textareaRef.current?.focus();
|
||
}
|
||
return;
|
||
}
|
||
// A staged switch chip (from /agent or /model) redirects the send away from the current
|
||
// Session: an agent target hands the draft to a NEW chat for that agent, a model target
|
||
// forks this conversation onto that model. The two are mutually exclusive by construction
|
||
// (picking either clears the other); the model chip only exists where onSwitchModel does.
|
||
// "blocked" = a staged fork while this Session is running or compacting: canSend/canFollowUp
|
||
// already refuse, but this path is deliberately not gated on run state (the steering
|
||
// completion race calls it directly), so refuse here too rather than fall through to `post`
|
||
// — that would deliver the message to the very Session the user was switching away from.
|
||
if (stagedRoute === "blocked") return;
|
||
const switchModel = stagedRoute === "model" ? pendingModel : null;
|
||
// Empty text body: fall back to an auto-line rather than sending nothing — the localized
|
||
// skills invocation when skills are selected, otherwise the model-switch line for a staged
|
||
// switch. A handoff needs no fallback: its first message may legitimately be nothing but
|
||
// the [handoff_from] source block.
|
||
const bodyText =
|
||
t !== ""
|
||
? t
|
||
: selectedSkills.length > 0
|
||
? S.chat.skillsAutoMessage(selectedSkills)
|
||
: switchModel
|
||
? S.chat.modelSwitchAutoMessage
|
||
: t;
|
||
// With non-empty selected skills: the text body is replaced with a [use_skills] block + the text (every branch wraps its body the same way).
|
||
const body = buildSkillsMessage(selectedSkills, bodyText);
|
||
const input: TaskInputPart[] = [];
|
||
if (body) input.push({ type: "text", text: body });
|
||
appendAttachmentParts(input, images, attachments);
|
||
setBusy(true);
|
||
try {
|
||
const ok = target
|
||
? await onHandoff!(target, input)
|
||
: switchModel
|
||
? await onSwitchModel!(
|
||
{ provider: switchModel.provider, modelId: switchModel.modelId },
|
||
input,
|
||
)
|
||
: await post(input, null);
|
||
// Only clear the draft after a successful send: on failure (network / conflict / server error) keep the user's input and attachments.
|
||
if (ok) {
|
||
setText("");
|
||
setImages([]);
|
||
setAttachments([]);
|
||
setTarget(null);
|
||
setPendingModel(null);
|
||
setSelectedSkills([]);
|
||
}
|
||
} finally {
|
||
setBusy(false);
|
||
textareaRef.current?.focus();
|
||
}
|
||
};
|
||
|
||
const send = async () => {
|
||
if (running) {
|
||
// Follow-up branch: the whole draft goes out through the normal composition path,
|
||
// but posted with queueIfBusy — the server holds it and auto-sends once this run
|
||
// finishes (a staged switch still opens its new chat directly: neither the handoff
|
||
// target nor the model fork is the session that is running).
|
||
if (followUpMode) {
|
||
if (!canFollowUp) return;
|
||
await sendNormal(onQueueFollowUp!);
|
||
return;
|
||
}
|
||
// Steering branch: queue the trimmed text for the running agent; only the text is
|
||
// sent and cleared — attached images / selected skills stay for a normal send (a
|
||
// staged switch chip blocks this branch outright, see canSteer).
|
||
if (!canSteer) return;
|
||
const steerText = text.trim();
|
||
setBusy(true);
|
||
let res: "queued" | "not_running" | "failed" = "failed";
|
||
try {
|
||
res = await onSteer!(steerText);
|
||
if (res === "queued") {
|
||
// Show the "queued" hint until the steering message shows up in the stream
|
||
// (steeringDeliveredCount increases) — see the effect below.
|
||
steerBaseline.current = steeringDeliveredCount ?? 0;
|
||
setSteerPending(true);
|
||
setText("");
|
||
}
|
||
} finally {
|
||
setBusy(false);
|
||
textareaRef.current?.focus();
|
||
}
|
||
// Completion race (server: no Task running anymore): deliver the whole draft — images,
|
||
// skills and all — through the full normal send path instead of a text-only task.
|
||
if (res === "not_running") await sendNormal();
|
||
return;
|
||
}
|
||
if (!canSend) return;
|
||
await sendNormal();
|
||
};
|
||
|
||
const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
|
||
if (slashOpen) {
|
||
if (e.key === "ArrowDown") {
|
||
e.preventDefault();
|
||
setSlashIndex((i) => (i + 1) % slashMatches.length);
|
||
return;
|
||
}
|
||
if (e.key === "ArrowUp") {
|
||
e.preventDefault();
|
||
setSlashIndex((i) => (i - 1 + slashMatches.length) % slashMatches.length);
|
||
return;
|
||
}
|
||
if (((e.key === "Enter" && !e.shiftKey) || e.key === "Tab") && !e.nativeEvent.isComposing) {
|
||
e.preventDefault();
|
||
activeSlash?.run();
|
||
return;
|
||
}
|
||
if (e.key === "Escape") {
|
||
// Only closes the popup, doesn't clear the input: with positional matching the `/token`
|
||
// is part of the text body like any other word, and wiping a controlled textarea is not
|
||
// undoable with Ctrl+Z. Reopens if the user keeps typing on another token.
|
||
setSlashDismissed(slashTok?.start ?? null);
|
||
return;
|
||
}
|
||
}
|
||
// Backspace at the start of the text: removes the staged switch chip (consistent with common chip-input interaction).
|
||
if (
|
||
e.key === "Backspace" &&
|
||
(target !== null || pendingModel !== null) &&
|
||
e.currentTarget.selectionStart === 0 &&
|
||
e.currentTarget.selectionEnd === 0
|
||
) {
|
||
e.preventDefault();
|
||
clearSwitchTarget();
|
||
return;
|
||
}
|
||
if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
|
||
e.preventDefault();
|
||
void send();
|
||
}
|
||
};
|
||
|
||
const addFiles = (files: Iterable<File>) => {
|
||
// Goal mode is text-only (the objective is re-injected each round): drop image attachments
|
||
// outright — including pastes — so send never lands in a silently-disabled state.
|
||
if (goalOn) return;
|
||
for (const file of files) {
|
||
if (!file.type.startsWith("image/")) continue;
|
||
const reader = new FileReader();
|
||
reader.onload = () => {
|
||
if (typeof reader.result === "string") {
|
||
setImages((prev) => [...prev, reader.result as string]);
|
||
}
|
||
};
|
||
reader.readAsDataURL(file);
|
||
}
|
||
};
|
||
|
||
const onPaste = (e: ClipboardEvent<HTMLTextAreaElement>) => {
|
||
const files: File[] = [];
|
||
for (const item of e.clipboardData.items) {
|
||
if (item.kind === "file") {
|
||
const file = item.getAsFile();
|
||
if (file) files.push(file);
|
||
}
|
||
}
|
||
if (files.length > 0) {
|
||
e.preventDefault();
|
||
addFiles(files);
|
||
}
|
||
};
|
||
|
||
const onPickFiles = (e: ChangeEvent<HTMLInputElement>) => {
|
||
if (e.target.files) addFiles(e.target.files);
|
||
e.target.value = "";
|
||
};
|
||
|
||
/**
|
||
* File attachments (any type, no `accept` filter): read as base64 data URLs, the same
|
||
* transport images use — a draft has no Session to upload to yet. The name and size come
|
||
* from the File itself and only feed the chip; the server decides the on-disk name.
|
||
*
|
||
* Oversize files are rejected from `File.size` before anything is read, the same way trace
|
||
* import does it (traces-page.tsx): base64-encoding a rejected file in the tab first would
|
||
* cost the user a freeze and a 33%-larger upload to earn the same 413.
|
||
*
|
||
* The whole batch is read before any of it is staged, so the chips — and therefore the
|
||
* `[attached file: …]` lines the message ends up with — follow the order the files were
|
||
* picked in, not the order the reads happened to finish in.
|
||
*/
|
||
const addAttachments = (files: Iterable<File>) => {
|
||
if (goalOn) return; // goal input is text-only, same rule as images
|
||
const picked: File[] = [];
|
||
for (const file of files) {
|
||
if (file.size > MAX_ATTACHMENT_BYTES) {
|
||
toastError(S.chat.attachmentTooLarge(file.name));
|
||
continue;
|
||
}
|
||
picked.push(file);
|
||
}
|
||
if (picked.length === 0) return;
|
||
void Promise.all(picked.map(readDataUrl)).then((urls) => {
|
||
const staged = picked.flatMap((file, i) =>
|
||
urls[i] ? [{ name: file.name, size: file.size, dataUrl: urls[i]! }] : [],
|
||
);
|
||
if (staged.length > 0) setAttachments((prev) => [...prev, ...staged]);
|
||
});
|
||
};
|
||
|
||
const onPickAttachments = (e: ChangeEvent<HTMLInputElement>) => {
|
||
if (e.target.files) addAttachments(e.target.files);
|
||
e.target.value = "";
|
||
};
|
||
/**
|
||
* The image picker moved into the "+" menu, so the file input can no longer be a `<label>`
|
||
* wrapper: the menu unmounts its items on select. It lives outside the menu instead and the
|
||
* entry clicks it — still inside the click's user-activation window, so the dialog opens.
|
||
* The file-attachment picker below works the same way.
|
||
*/
|
||
const imageInputRef = useRef<HTMLInputElement>(null);
|
||
const attachmentInputRef = useRef<HTMLInputElement>(null);
|
||
|
||
return (
|
||
<div className="relative" ref={anchorRef}>
|
||
{/* Slash command menu (triggered by typing /; /compact plus one entry per installed skill).
|
||
Height is capped to the room measured above the composer (see upwardMaxH) with internal
|
||
scrolling, so a long skill list never pushes the menu's top edge out of view; the active
|
||
row keeps itself scrolled into view. */}
|
||
{slashOpen && (
|
||
<div
|
||
style={{ maxHeight: upwardMaxH }}
|
||
className="anim-pop absolute bottom-full left-0 z-40 mb-1.5 w-80 max-w-[calc(100vw-2rem)] overflow-y-auto overscroll-contain rounded-md border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-900"
|
||
>
|
||
{slashMatches.map((c, i) => (
|
||
<button
|
||
key={c.cmd}
|
||
type="button"
|
||
ref={c === activeSlash ? (el) => el?.scrollIntoView({ block: "nearest" }) : undefined}
|
||
onMouseEnter={() => setSlashIndex(i)}
|
||
onClick={() => c.run()}
|
||
className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm ${
|
||
c === activeSlash ? "bg-gray-100 dark:bg-gray-800" : ""
|
||
}`}
|
||
>
|
||
<span className="shrink-0 font-mono text-gray-800 dark:text-gray-200">{c.cmd}</span>
|
||
{/* Overly long descriptions (skill descriptions) are truncated: full text goes into the title. */}
|
||
<span
|
||
title={c.desc}
|
||
className="min-w-0 flex-1 truncate text-xs text-gray-500 dark:text-gray-400"
|
||
>
|
||
{c.desc}
|
||
</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* /model switch picker (session state): reuses the draft model dropdown's list —
|
||
search + configured-key-first grouping + "show all"; the current model is marked and
|
||
picking it is a no-op. The /model token was already consumed when the command ran,
|
||
so cancelling (Escape / click outside) keeps the remaining draft and cannot re-open
|
||
the slash menu. A pick only stages the chip below — the switch happens on send. */}
|
||
{modelSwitchOpen && models && (
|
||
<SwitchPickerPanel
|
||
panelRef={modelSwitchRef}
|
||
maxHeight={upwardMaxH}
|
||
title={S.chat.switchModelTitle}
|
||
>
|
||
<ModelMenuList
|
||
models={models}
|
||
value={modelRef}
|
||
{...(defaultModel !== undefined ? { defaultModel } : {})}
|
||
onPick={pickSwitchModel}
|
||
/>
|
||
</SwitchPickerPanel>
|
||
)}
|
||
|
||
{/* /agent handoff picker: the same panel as the /model one above (title bar + search box
|
||
+ capped list + keyboard navigation), and the same staged semantics — the pick becomes
|
||
the target chip, and sending is what hands the conversation over. */}
|
||
{agentSwitchOpen && (
|
||
<SwitchPickerPanel
|
||
panelRef={agentSwitchRef}
|
||
maxHeight={upwardMaxH}
|
||
title={S.chat.switchAgentTitle}
|
||
>
|
||
<AgentMenuList
|
||
agents={agents}
|
||
{...(currentAgentId !== undefined ? { currentAgentId } : {})}
|
||
onPick={pickHandoffTarget}
|
||
/>
|
||
</SwitchPickerPanel>
|
||
)}
|
||
|
||
{images.length > 0 && (
|
||
<div className="mb-2 flex flex-wrap gap-2">
|
||
{images.map((url, i) => (
|
||
<div key={i} className="anim-pop relative">
|
||
<ZoomableImage
|
||
src={url}
|
||
alt={S.chat.imageAlt}
|
||
className="h-16 w-16 rounded-md border border-gray-200 object-cover dark:border-gray-700"
|
||
/>
|
||
<button
|
||
type="button"
|
||
aria-label={S.chat.removeImage}
|
||
onClick={() => setImages((prev) => prev.filter((_, j) => j !== i))}
|
||
className="absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-gray-700 text-[10px] text-white transition-colors duration-150 hover:bg-gray-900"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Attached files, right below the image thumbnails: one removable chip each (name +
|
||
size), since there is nothing to preview. The name is the picked file's — the server
|
||
sanitizes it when writing to the scratchpad, and the message's banner then shows the
|
||
on-disk name. */}
|
||
{attachments.length > 0 && (
|
||
<div className="mb-2 flex flex-wrap gap-2">
|
||
{attachments.map((file, i) => (
|
||
<span
|
||
key={i}
|
||
title={file.name}
|
||
className="anim-pop flex max-w-56 items-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 py-1 pl-2 pr-1 text-xs text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200"
|
||
>
|
||
<GlyphIcon
|
||
d={PAPERCLIP_ICON}
|
||
size={13}
|
||
className="shrink-0 text-gray-400 dark:text-gray-500"
|
||
/>
|
||
<span className="min-w-0 truncate">{file.name}</span>
|
||
<span className="shrink-0 font-mono text-[10px] text-gray-400 dark:text-gray-500">
|
||
{formatBytes(file.size)}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
aria-label={`${S.chat.removeFile} ${file.name}`}
|
||
onClick={() => setAttachments((prev) => prev.filter((_, j) => j !== i))}
|
||
className="shrink-0 rounded p-0.5 text-gray-400 transition-colors duration-150 hover:text-gray-700 dark:hover:text-gray-200"
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* When the model doesn't support viewing images directly: images still upload as usual,
|
||
and on send the server writes them to the session's scratchpad and appends the file
|
||
path into the message text (the model views them via describe_image). A small note is
|
||
shown while images are attached. */}
|
||
{!vision && images.length > 0 && (
|
||
<p className="anim-fade mb-1 text-xs text-gray-400 dark:text-gray-500">
|
||
{S.chat.imagesAsPathHint}
|
||
</p>
|
||
)}
|
||
|
||
{/* A staged /model fork that has to wait for this Session to go idle (a run started from
|
||
outside the composer, or a compaction): the Send button is disabled either way, and
|
||
this is the line that says why — the chip stays staged and goes out on the next Enter
|
||
once the Session settles. */}
|
||
{stagedRoute === "blocked" && (
|
||
<p className="anim-fade mb-1 text-xs text-gray-400 dark:text-gray-500">
|
||
{S.chat.modelSwitchBusyHint}
|
||
</p>
|
||
)}
|
||
|
||
{/* Mid-run steering queued: lightweight hint until the steering message appears in the
|
||
stream (or the run ends). */}
|
||
{steerPending && (
|
||
<p className="anim-fade mb-1 text-xs text-gray-400 dark:text-gray-500">
|
||
{S.chat.steerQueuedIndicator}
|
||
</p>
|
||
)}
|
||
|
||
{/* Queued follow-ups (server-side, auto-sent once this run finishes): count from
|
||
task_state — survives reloads because the queue lives on the server. */}
|
||
{queuedFollowUps > 0 && (
|
||
<p className="anim-fade mb-1 text-xs text-gray-400 dark:text-gray-500">
|
||
{S.chat.followUpQueuedChip(queuedFollowUps)}
|
||
</p>
|
||
)}
|
||
|
||
{/* Auth-dead session (model credentials failed): slim notice above the composer, same
|
||
width — the abort line in the stream keeps the raw reason, this adds the "what now"
|
||
guidance. Recoverable: primary CTA opens the Models page (fixing the key there
|
||
auto-unlocks the session), Retry clears the state for another attempt (re-arms on
|
||
the next auth failure), New Session stays as the escape. The composer below is
|
||
disabled and hazed. */}
|
||
{modelAuthDead && (
|
||
<div className="anim-fade mb-1.5 flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5 rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-xs text-gray-600 dark:border-gray-700 dark:bg-gray-800/60 dark:text-gray-300">
|
||
<span className="min-w-0 flex-1 basis-56">{S.chat.modelAuthDead}</span>
|
||
<span className="flex shrink-0 flex-wrap items-center gap-1.5">
|
||
{onOpenModels && (
|
||
<button
|
||
type="button"
|
||
onClick={onOpenModels}
|
||
className="shrink-0 rounded-md bg-gray-900 px-2.5 py-1 font-medium text-white transition-colors duration-150 hover:bg-gray-700 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300"
|
||
>
|
||
{S.chat.modelAuthDeadOpenModels}
|
||
</button>
|
||
)}
|
||
{onRetryModelAuth && (
|
||
<button
|
||
type="button"
|
||
onClick={onRetryModelAuth}
|
||
className="shrink-0 rounded-md border border-gray-300 bg-white px-2.5 py-1 font-medium text-gray-700 transition-colors duration-150 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-700"
|
||
>
|
||
{S.chat.modelAuthDeadRetry}
|
||
</button>
|
||
)}
|
||
{onNewSession && (
|
||
<button
|
||
type="button"
|
||
onClick={onNewSession}
|
||
className="shrink-0 rounded-md border border-gray-300 bg-white px-2.5 py-1 font-medium text-gray-700 transition-colors duration-150 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-700"
|
||
>
|
||
{S.chat.modelAuthDeadCta}
|
||
</button>
|
||
)}
|
||
</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* Unified input card: the multi-line text body occupies the top area, with all controls
|
||
collected onto a single bottom row that never shares a line with the text.
|
||
@container: the bottom toolbar row collapses based on the **card's actual width**
|
||
(help text/button text visibility uses @md/@lg container breakpoints) — because the
|
||
card's width changes with the viewport and the Files panel squeezing it, viewport
|
||
breakpoints wouldn't judge it accurately. */}
|
||
<div
|
||
// Auth-dead haze deliberately keeps pointer events and text selection: the
|
||
// textarea's `disabled` already blocks editing, and the stuck draft must stay
|
||
// selectable/copyable — a long message that failed to send is exactly what the
|
||
// user wants to copy back out.
|
||
className={`@container rounded-lg border border-gray-300 bg-white px-2.5 pb-2 pt-2 transition-[border-color,box-shadow] duration-200 focus-within:border-gray-500 focus-within:ring-2 focus-within:ring-gray-400/30 dark:border-gray-700 dark:bg-gray-900 dark:focus-within:border-gray-400${
|
||
modelAuthDead ? " opacity-50 grayscale" : ""
|
||
}`}
|
||
>
|
||
{/* Chip row above the text body: the staged switch target (an /agent handoff or a
|
||
/model fork — never both) followed by the selected skills, all sharing the same
|
||
chip look. Remove buttons recolor the x on hover (no background wash). */}
|
||
{(target !== null || pendingModel !== null || selectedSkills.length > 0 || goalOn) && (
|
||
<div className="mb-1 flex flex-wrap items-center gap-1">
|
||
{/* Goal-mode chip: the budget stays compact as a value button; its editor is a
|
||
fixed upward popover so it never covers the objective textarea below. */}
|
||
{goalOn && (
|
||
<span className="anim-pop flex max-w-full items-center gap-1 rounded-md bg-gray-100 py-0.5 pl-2 pr-1 text-sm text-gray-800 dark:bg-gray-800 dark:text-gray-200">
|
||
<span className="flex shrink-0 items-center gap-1" title={S.chat.goalModeDesc}>
|
||
<GlyphIcon d={GOAL_ICON} size={13} className="text-gray-500 dark:text-gray-400" />
|
||
<span>{S.chat.goalMode}</span>
|
||
</span>
|
||
<span
|
||
aria-hidden
|
||
className="mx-0.5 h-4 w-px shrink-0 bg-gray-300 dark:bg-gray-600"
|
||
/>
|
||
<Dropdown
|
||
open={goalBudgetOpen}
|
||
setOpen={setGoalBudgetEditorOpen}
|
||
onEscape={cancelGoalBudget}
|
||
className="min-w-0"
|
||
menuClass="bottom-full left-1/2 -ml-32 mb-2 w-64 max-w-[calc(100vw-2rem)] origin-bottom"
|
||
button={
|
||
<button
|
||
type="button"
|
||
aria-label={goalBudgetSummary}
|
||
aria-expanded={goalBudgetOpen}
|
||
onClick={() => setGoalBudgetEditorOpen(!goalBudgetOpen)}
|
||
className="flex h-5 min-w-0 items-center gap-1 rounded px-1.5 text-xs text-gray-600 transition-colors duration-150 hover:bg-white/80 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white"
|
||
>
|
||
<span className="truncate">{goalBudgetSummary}</span>
|
||
<svg
|
||
width="9"
|
||
height="9"
|
||
viewBox="0 0 12 12"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth="1.5"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
className="shrink-0"
|
||
aria-hidden
|
||
>
|
||
<path d="M3 4.5l3 3 3-3" />
|
||
</svg>
|
||
</button>
|
||
}
|
||
>
|
||
<div className="px-3 py-2">
|
||
<label
|
||
htmlFor="goal-budget-input"
|
||
className="block text-xs font-medium text-gray-700 dark:text-gray-200"
|
||
>
|
||
{S.chat.goalBudgetLabel}
|
||
</label>
|
||
<div className="mt-1.5 flex items-center gap-1.5">
|
||
<input
|
||
id="goal-budget-input"
|
||
autoFocus
|
||
value={goalBudgetDraft}
|
||
onChange={(e) => setGoalBudgetDraft(e.target.value)}
|
||
onFocus={(e) => e.currentTarget.select()}
|
||
onKeyDown={(e) => {
|
||
// Escape is handled at the window level (Dropdown onEscape →
|
||
// cancelGoalBudget), so it cancels no matter where focus sits.
|
||
if (e.key === "Enter") {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
saveGoalBudget();
|
||
}
|
||
}}
|
||
placeholder={S.chat.goalBudgetPlaceholder}
|
||
aria-invalid={goalBudgetDraftInvalid}
|
||
aria-describedby="goal-budget-hint"
|
||
{...noAutofill}
|
||
title={
|
||
goalBudgetDraftInvalid ? S.chat.goalBudgetInvalid : S.chat.goalBudgetHint
|
||
}
|
||
className={`min-w-0 flex-1 rounded-md border bg-white px-2 py-1 font-mono text-sm leading-5 placeholder:text-gray-400 focus:outline-none focus:ring-2 dark:bg-gray-950 dark:placeholder:text-gray-500 ${
|
||
goalBudgetDraftInvalid
|
||
? "border-red-400 text-red-600 focus:border-red-500 focus:ring-red-400/20 dark:border-red-500 dark:text-red-400"
|
||
: "border-gray-300 text-gray-800 focus:border-gray-500 focus:ring-gray-400/20 dark:border-gray-700 dark:text-gray-100 dark:focus:border-gray-500"
|
||
}`}
|
||
/>
|
||
<button
|
||
type="button"
|
||
aria-label={S.chat.goalBudgetSave}
|
||
title={S.chat.goalBudgetSave}
|
||
disabled={goalBudgetDraftInvalid}
|
||
onClick={saveGoalBudget}
|
||
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gray-900 text-white transition-colors duration-150 hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-35 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
|
||
>
|
||
<GlyphIcon d="M5 12l4 4L19 6" size={14} />
|
||
</button>
|
||
</div>
|
||
<p
|
||
id="goal-budget-hint"
|
||
className={`mt-1.5 text-[11px] leading-4 ${
|
||
goalBudgetDraftInvalid
|
||
? "text-red-500 dark:text-red-400"
|
||
: "text-gray-400 dark:text-gray-500"
|
||
}`}
|
||
>
|
||
{goalBudgetDraftInvalid ? S.chat.goalBudgetInvalid : S.chat.goalBudgetHint}
|
||
</p>
|
||
</div>
|
||
</Dropdown>
|
||
<button
|
||
type="button"
|
||
aria-label={S.chat.goalRemove}
|
||
onClick={() => toggleGoal(false)}
|
||
className="shrink-0 rounded p-0.5 text-gray-400 transition-colors duration-150 hover:text-gray-700 dark:hover:text-gray-200"
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
)}
|
||
{/* Staged /agent handoff target: the Agent avatar (the identity tile used
|
||
everywhere Agents are picked) + its id, so the chip reads as "this goes to that
|
||
Agent" without spelling the sentence out. */}
|
||
{target !== null && (
|
||
<span
|
||
title={S.chat.handoffTargetTitle(agentDisplayName(target))}
|
||
className="anim-pop flex max-w-48 items-center gap-1 rounded-md bg-gray-100 py-0.5 pl-2 pr-1 font-mono text-sm text-gray-800 dark:bg-gray-800 dark:text-gray-200"
|
||
>
|
||
<AgentAvatar
|
||
id={target.agentId}
|
||
name={agentDisplayName(target)}
|
||
size={13}
|
||
className="shrink-0 rounded-sm"
|
||
/>
|
||
<span className="truncate">{target.agentId}</span>
|
||
<button
|
||
type="button"
|
||
aria-label={S.chat.handoffRemove}
|
||
onClick={() => {
|
||
setTarget(null);
|
||
onHandoffTargetChange?.(null);
|
||
textareaRef.current?.focus();
|
||
}}
|
||
className="shrink-0 rounded p-0.5 text-gray-400 transition-colors duration-150 hover:text-gray-700 dark:hover:text-gray-200"
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
)}
|
||
{/* Staged /model switch: provider logo + model name, matching the composer's own
|
||
model display; sending forks the conversation onto it. */}
|
||
{pendingModel !== null && (
|
||
<span
|
||
title={S.chat.modelSwitchTargetTitle(modelLabel(pendingModel))}
|
||
className="anim-pop flex max-w-48 items-center gap-1 rounded-md bg-gray-100 py-0.5 pl-2 pr-1 text-sm text-gray-800 dark:bg-gray-800 dark:text-gray-200"
|
||
>
|
||
<ProviderLogo provider={pendingModel.provider} className="h-3.5 w-3.5 shrink-0" />
|
||
<span className="truncate">{modelLabel(pendingModel)}</span>
|
||
<button
|
||
type="button"
|
||
aria-label={S.chat.modelSwitchRemove}
|
||
onClick={() => {
|
||
stageModel(null);
|
||
textareaRef.current?.focus();
|
||
}}
|
||
className="shrink-0 rounded p-0.5 text-gray-400 transition-colors duration-150 hover:text-gray-700 dark:hover:text-gray-200"
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
)}
|
||
{selectedSkills.map((name) => {
|
||
const meta = skills.find((sk) => sk.name === name);
|
||
return (
|
||
<span
|
||
key={name}
|
||
className="anim-pop flex max-w-48 items-center gap-1 rounded-md bg-gray-100 py-0.5 pl-2 pr-1 font-mono text-sm text-gray-800 dark:bg-gray-800 dark:text-gray-200"
|
||
{...(meta ? { title: localizedShortText(locale, meta) } : {})}
|
||
>
|
||
<SkillIcon
|
||
icon={meta?.icon}
|
||
size={13}
|
||
className="shrink-0 text-gray-500 dark:text-gray-400"
|
||
/>
|
||
<span className="truncate">{name}</span>
|
||
<button
|
||
type="button"
|
||
aria-label={`${S.chat.skillRemove} ${name}`}
|
||
onClick={() => toggleSkill(name)}
|
||
className="shrink-0 rounded p-0.5 text-gray-400 transition-colors duration-150 hover:text-gray-700 dark:hover:text-gray-200"
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{/* Multi-line input area (defaults to 2 lines, auto-grows, scrolls internally beyond the cap) */}
|
||
<textarea
|
||
ref={textareaRef}
|
||
rows={2}
|
||
value={text}
|
||
autoFocus={autoFocus}
|
||
onChange={(e) => {
|
||
const value = e.target.value;
|
||
const caretNow = e.target.selectionStart ?? value.length;
|
||
setText(value);
|
||
onTextChange?.(value);
|
||
setCaret(caretNow);
|
||
setSlashIndex(0);
|
||
// Closing via Escape only persists for "the same token": continuing to type within
|
||
// that slash command won't reopen the menu; it re-opens once the cursor is no longer
|
||
// on that token (deleted, moved away, or replaced by a new one).
|
||
setSlashDismissed((d) => {
|
||
if (d === null) return null;
|
||
const m = matchSlash(value, caretNow);
|
||
return m && m.start === d ? d : null;
|
||
});
|
||
}}
|
||
// Cursor movement (arrow keys/click) syncs to caret: the slash menu matches the token at the cursor.
|
||
onSelect={(e) => setCaret(e.currentTarget.selectionStart ?? 0)}
|
||
onKeyDown={onKeyDown}
|
||
onPaste={onPaste}
|
||
disabled={modelAuthDead}
|
||
placeholder={
|
||
modelAuthDead
|
||
? S.chat.modelAuthDeadPlaceholder
|
||
: running && followUpMode
|
||
? narrow
|
||
? S.chat.followUpPlaceholderShort
|
||
: S.chat.followUpPlaceholder
|
||
: running && onSteer
|
||
? narrow
|
||
? S.chat.steerPlaceholderShort
|
||
: S.chat.steerPlaceholder
|
||
: narrow
|
||
? S.chat.inputPlaceholderShort
|
||
: S.chat.inputPlaceholder
|
||
}
|
||
className="block max-h-44 min-h-[60px] w-full resize-none bg-transparent px-1 py-0.5 text-base leading-6 placeholder:text-gray-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 dark:placeholder:text-gray-500"
|
||
/>
|
||
|
||
{/* Bottom toolbar row — one line, two groups: the settings controls sit left, the
|
||
status/model/action controls right (`justify-between`). The left group is the only
|
||
one allowed to give way: `min-w-0` + horizontal scroll means a crowded phone
|
||
viewport scrolls those controls instead of pushing the right group (and with it the
|
||
action button) off-screen. The right group is `shrink-0` so the action button is
|
||
always reachable. */}
|
||
<div className="mt-1 flex items-center justify-between gap-2 text-xs">
|
||
<div className="no-scrollbar flex min-w-0 flex-1 items-center gap-2 overflow-x-auto">
|
||
{/* The image picker's actual input: kept mounted here (outside the menu, which
|
||
unmounts its items on select) and driven by the menu entry below. */}
|
||
<input
|
||
ref={imageInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
multiple
|
||
disabled={goalOn}
|
||
className="hidden"
|
||
onChange={onPickFiles}
|
||
/>
|
||
{/* The file picker's actual input, same arrangement as the image one above; no
|
||
`accept` — an attachment can be any type, the model reads it from disk. */}
|
||
<input
|
||
ref={attachmentInputRef}
|
||
type="file"
|
||
multiple
|
||
disabled={goalOn}
|
||
className="hidden"
|
||
onChange={onPickAttachments}
|
||
/>
|
||
{/* "+" extension menu, leading the row: input add-ons (image upload, file
|
||
attachment, goal mode) plus the input settings footer (mid-run send mode —
|
||
usable while running, which is exactly when it matters, so the button itself
|
||
never disables). The uploads live in here rather than as their own toolbar
|
||
buttons: one 8x8 slot instead of three, which is the difference between the
|
||
phone row scrolling and not. */}
|
||
<PlusMenu
|
||
items={[
|
||
{
|
||
key: "image",
|
||
icon: IMAGE_ICON,
|
||
label: S.chat.uploadImage,
|
||
// Without vision the images still send — as scratchpad file paths — so the
|
||
// entry stays usable and the hint explains what will happen instead.
|
||
desc: vision ? S.chat.uploadImageDesc : S.chat.imagesAsPathHint,
|
||
active: images.length > 0,
|
||
// Goal mode is text-only (the objective is re-injected each round).
|
||
disabled: goalOn,
|
||
onSelect: () => imageInputRef.current?.click(),
|
||
},
|
||
{
|
||
key: "file",
|
||
icon: PAPERCLIP_ICON,
|
||
label: S.chat.uploadFile,
|
||
// The description doubles as the explanation of where the file ends up:
|
||
// it is filed into the session scratchpad and reached by path, never
|
||
// inlined into the conversation.
|
||
desc: S.chat.uploadFileDesc,
|
||
active: attachments.length > 0,
|
||
// Same rule as images: goal input is text-only.
|
||
disabled: goalOn,
|
||
onSelect: () => attachmentInputRef.current?.click(),
|
||
},
|
||
{
|
||
key: "goal",
|
||
icon: GOAL_ICON,
|
||
label: S.chat.goalMode,
|
||
desc: S.chat.goalModeDesc,
|
||
active: goalOn,
|
||
disabled: running || compacting || busy,
|
||
onSelect: () => toggleGoal(!goalOn),
|
||
},
|
||
]}
|
||
footer={<SteerModeRow steerMode={steerMode} onChangeSteerMode={setSteerMode} />}
|
||
direction={models && onChangeModel ? "down" : "up"}
|
||
/>
|
||
<ApprovalModeSelect
|
||
value={approvalMode}
|
||
onChange={onChangeApprovalMode}
|
||
disabled={modeSaving}
|
||
direction={models && onChangeModel ? "down" : "up"}
|
||
/>
|
||
{/* Multi-select skills dropdown (after approval mode): selected state is conveyed via the button badge. */}
|
||
<SkillSelect
|
||
skills={skills}
|
||
selected={selectedSkills}
|
||
onToggle={toggleSkill}
|
||
disabled={running || compacting || busy}
|
||
direction={models && onChangeModel ? "down" : "up"}
|
||
/>
|
||
{/* Help text: shown only when the card is wide enough (@lg); it never competes for
|
||
space on phones, where the group scrolls instead. */}
|
||
<span
|
||
title={S.chat.slashHint}
|
||
className="hidden min-w-0 truncate text-gray-300 @lg:block dark:text-gray-600"
|
||
>
|
||
{S.chat.slashHint}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Right group: status + model + the single action button; never shrinks. */}
|
||
<div className="flex shrink-0 items-center gap-2">
|
||
{/* Draft state (model still changeable = no session created yet) has no context usage to speak of: the ring isn't shown, it displays as usual once the session is created. */}
|
||
{!onChangeModel && (
|
||
<ContextGauge
|
||
now={contextNow}
|
||
unknown={contextStale}
|
||
{...(contextWindow !== undefined ? { window: contextWindow } : {})}
|
||
/>
|
||
)}
|
||
{/* Draft state: conversation-time thinking level (backed by Agent settings), docked left of the model selector. */}
|
||
{models && onChangeModel && onChangeThinkingLevel && (
|
||
<ThinkingLevelSelect
|
||
value={thinkingLevel ?? null}
|
||
onChange={onChangeThinkingLevel}
|
||
disabled={busy}
|
||
/>
|
||
)}
|
||
{/* Session state: per-turn thinking level (editable) — displays the user's pick,
|
||
else the Agent config's level (auto-follow; the parent resolves it). While
|
||
untouched nothing rides on tasks; a pick sticks for the session and is sent
|
||
with every subsequent send, never writing through to the Agent config. */}
|
||
{!onChangeModel && onChangeTurnThinkingLevel && (
|
||
<ThinkingLevelSelect
|
||
value={turnThinkingLevel ?? ""}
|
||
onChange={onChangeTurnThinkingLevel}
|
||
disabled={busy}
|
||
direction="up"
|
||
/>
|
||
)}
|
||
{/* Left of the send button: model selector in draft state; once the Session is created the model is locked, shown read-only (still with the provider logo). */}
|
||
{models && onChangeModel ? (
|
||
<ModelSelect
|
||
models={models}
|
||
value={modelRef}
|
||
{...(defaultModel !== undefined ? { defaultModel } : {})}
|
||
onChange={onChangeModel}
|
||
disabled={busy}
|
||
/>
|
||
) : (
|
||
<span
|
||
title={modelRef?.modelId ?? ""}
|
||
className="flex h-8 min-w-0 max-w-44 shrink items-center gap-1.5 px-1 text-gray-400 dark:text-gray-500"
|
||
>
|
||
{/* Read-only display in session state: both the logo and the name come from the Session DTO's paired fields (no prefix parsing). */}
|
||
<ProviderLogo
|
||
provider={modelRef?.provider ?? "custom"}
|
||
className="h-4 w-4 shrink-0"
|
||
/>
|
||
<span className="hidden min-w-0 truncate @md:block">
|
||
{(() => {
|
||
const m = models?.find((x) => sameModelRef(x, modelRef));
|
||
return m ? modelLabel(m) : (modelRef?.modelId ?? "…");
|
||
})()}
|
||
</span>
|
||
</span>
|
||
)}
|
||
{/* One action button, never two: while running an empty composer means "Stop"
|
||
(abort), and typing turns the very same button into "Send" — which, mid-run,
|
||
steers or queues per the remembered send mode (the "+" menu's settings row).
|
||
Idle/compacting keeps the ordinary send button (disabled while compacting via
|
||
canSend). Merging the pair keeps the running-state row within a 320px viewport. */}
|
||
<button
|
||
type="button"
|
||
title={stopAction ? S.chat.stop : running ? midRunSendLabel : S.chat.send}
|
||
aria-label={stopAction ? S.chat.stop : running ? midRunSendLabel : S.chat.send}
|
||
disabled={stopAction ? false : running ? !canMidRunSend : !canSend}
|
||
onClick={() => (stopAction ? void onStop() : void send())}
|
||
className={
|
||
stopAction
|
||
? "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-red-50 text-red-600 transition-colors duration-150 hover:bg-red-100 dark:bg-red-950/60 dark:text-red-400 dark:hover:bg-red-950"
|
||
: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-gray-900 text-white transition-colors duration-150 hover:bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:text-gray-400 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300 dark:disabled:bg-gray-800 dark:disabled:text-gray-600"
|
||
}
|
||
>
|
||
{stopAction ? (
|
||
/* Stop (filled square) */
|
||
<svg width="14" height="14" viewBox="0 0 14 14" aria-hidden className="block">
|
||
<rect x="2" y="2" width="10" height="10" rx="2" fill="currentColor" />
|
||
</svg>
|
||
) : (
|
||
/* Up arrow (send) */
|
||
<svg
|
||
width="17"
|
||
height="17"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth="2"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
aria-hidden
|
||
className="block"
|
||
>
|
||
<path d="M12 19V5M5 12l7-7 7 7" />
|
||
</svg>
|
||
)}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|