1703 lines
57 KiB
TypeScript
1703 lines
57 KiB
TypeScript
import {
|
|
useCallback,
|
|
useEffect,
|
|
useLayoutEffect,
|
|
useMemo,
|
|
useRef,
|
|
useState,
|
|
type KeyboardEvent as ReactKeyboardEvent,
|
|
} from "react";
|
|
|
|
import { MarkdownText, preloadMarkdownText } from "@/components/MarkdownText";
|
|
import {
|
|
CliAppMentionToken,
|
|
McpPresetMentionToken,
|
|
cliAppInitials,
|
|
mcpPresetInitials,
|
|
splitCapabilityMentionSegments,
|
|
type CapabilityMentionSegment,
|
|
} from "@/components/CliAppMentionText";
|
|
import {
|
|
Activity,
|
|
ArrowUp,
|
|
BookOpen,
|
|
Check,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
CircleHelp,
|
|
History,
|
|
ImageIcon,
|
|
Loader2,
|
|
Plus,
|
|
RotateCw,
|
|
Sparkles,
|
|
Square,
|
|
SquarePen,
|
|
Target,
|
|
Undo2,
|
|
X,
|
|
type LucideIcon,
|
|
} from "lucide-react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
useAttachedImages,
|
|
type AttachedImage,
|
|
type AttachmentError,
|
|
MAX_IMAGES_PER_MESSAGE,
|
|
} from "@/hooks/useAttachedImages";
|
|
import { useClipboardAndDrop } from "@/hooks/useClipboardAndDrop";
|
|
import type { SendImage, SendOptions } from "@/hooks/useNanobotStream";
|
|
import type {
|
|
CliAppInfo,
|
|
GoalStateWsPayload,
|
|
McpPresetInfo,
|
|
OutboundCliAppMention,
|
|
OutboundMcpPresetMention,
|
|
SlashCommand,
|
|
} from "@/lib/types";
|
|
import {
|
|
inferProviderFromModelName,
|
|
logoFallbackUrls,
|
|
providerBrand,
|
|
} from "@/lib/provider-brand";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/** ``<input accept>``: aligned with the server's MIME whitelist. SVG is
|
|
* deliberately excluded to avoid an embedded-script XSS surface. */
|
|
const ACCEPT_ATTR = "image/png,image/jpeg,image/webp,image/gif";
|
|
|
|
function formatBytes(n: number): string {
|
|
if (n < 1024) return `${n} B`;
|
|
if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
|
|
return `${(n / (1024 * 1024)).toFixed(1)} MB`;
|
|
}
|
|
|
|
interface ThreadComposerProps {
|
|
onSend: (content: string, images?: SendImage[], options?: SendOptions) => void;
|
|
disabled?: boolean;
|
|
placeholder?: string;
|
|
isStreaming?: boolean;
|
|
modelLabel?: string | null;
|
|
modelProvider?: string | null;
|
|
modelProviderLabel?: string | null;
|
|
variant?: "thread" | "hero";
|
|
slashCommands?: SlashCommand[];
|
|
cliApps?: CliAppInfo[];
|
|
mcpPresets?: McpPresetInfo[];
|
|
imageMode?: boolean;
|
|
onImageModeChange?: (enabled: boolean) => void;
|
|
onStop?: () => void;
|
|
/** Unix seconds from server; turn elapsed timer above input while set. */
|
|
runStartedAt?: number | null;
|
|
/** Sustained objective for this chat (WebSocket ``goal_state``). */
|
|
goalState?: GoalStateWsPayload;
|
|
}
|
|
|
|
const COMMAND_ICONS: Record<string, LucideIcon> = {
|
|
activity: Activity,
|
|
"book-open": BookOpen,
|
|
"circle-help": CircleHelp,
|
|
history: History,
|
|
"rotate-cw": RotateCw,
|
|
sparkles: Sparkles,
|
|
square: Square,
|
|
"square-pen": SquarePen,
|
|
"undo-2": Undo2,
|
|
};
|
|
|
|
type ImageAspectRatio = "auto" | "1:1" | "3:4" | "9:16" | "4:3" | "16:9";
|
|
|
|
const IMAGE_ASPECT_RATIOS: ImageAspectRatio[] = ["auto", "1:1", "3:4", "9:16", "4:3", "16:9"];
|
|
const SLASH_PALETTE_GAP_PX = 8;
|
|
const SLASH_PALETTE_MAX_HEIGHT_PX = 288;
|
|
const SLASH_PALETTE_MIN_HEIGHT_PX = 144;
|
|
const SLASH_PALETTE_CHROME_PX = 40;
|
|
|
|
type SlashPalettePlacement = "above" | "below";
|
|
|
|
interface SlashPaletteLayout {
|
|
placement: SlashPalettePlacement;
|
|
maxHeight: number;
|
|
}
|
|
|
|
interface CliAppMentionQuery {
|
|
query: string;
|
|
start: number;
|
|
end: number;
|
|
}
|
|
|
|
type MentionCandidate =
|
|
| { kind: "cli"; name: string; app: CliAppInfo }
|
|
| { kind: "mcp"; name: string; preset: McpPresetInfo };
|
|
|
|
function slashCommandI18nKey(command: string): string {
|
|
return command.replace(/^\//, "").replace(/-/g, "_");
|
|
}
|
|
|
|
function scrollNearestOverflowParent(target: EventTarget | null, deltaY: number) {
|
|
if (!(target instanceof Element) || deltaY === 0) return;
|
|
let el: HTMLElement | null = target.parentElement;
|
|
while (el) {
|
|
const style = window.getComputedStyle(el);
|
|
const canScroll = /(auto|scroll)/.test(style.overflowY) && el.scrollHeight > el.clientHeight;
|
|
if (canScroll) {
|
|
el.scrollTop += deltaY;
|
|
return;
|
|
}
|
|
el = el.parentElement;
|
|
}
|
|
}
|
|
|
|
function getVisibleBounds(el: HTMLElement): { top: number; bottom: number } {
|
|
let top = 0;
|
|
let bottom = window.innerHeight;
|
|
let parent = el.parentElement;
|
|
|
|
while (parent) {
|
|
const style = window.getComputedStyle(parent);
|
|
if (/(auto|scroll|hidden|clip)/.test(style.overflowY)) {
|
|
const rect = parent.getBoundingClientRect();
|
|
top = Math.max(top, rect.top);
|
|
bottom = Math.min(bottom, rect.bottom);
|
|
}
|
|
parent = parent.parentElement;
|
|
}
|
|
|
|
return { top, bottom };
|
|
}
|
|
|
|
function goalStateStripPreview(
|
|
goal: GoalStateWsPayload | undefined,
|
|
t: (key: string) => string,
|
|
): string | null {
|
|
if (!goal?.active) return null;
|
|
const summary = goal.ui_summary?.trim();
|
|
if (summary) return summary;
|
|
const obj = goal.objective?.trim();
|
|
if (obj) return obj.length > 72 ? `${obj.slice(0, 72)}…` : obj;
|
|
return t("thread.composer.goalStateFallback");
|
|
}
|
|
|
|
const GOAL_PANEL_VIEWPORT_TOP_PAD = 20;
|
|
const GOAL_PANEL_GAP_ABOVE_STRIP_PX = 10;
|
|
const GOAL_PANEL_MIN_HEIGHT_PX = 112;
|
|
const GOAL_PANEL_MAX_VIEWPORT_RATIO = 0.62;
|
|
|
|
function measureGoalPanelMaxCssHeight(stripTopY: number): number {
|
|
const spaceAboveStrip =
|
|
stripTopY - GOAL_PANEL_VIEWPORT_TOP_PAD - GOAL_PANEL_GAP_ABOVE_STRIP_PX;
|
|
return Math.min(
|
|
Math.max(spaceAboveStrip, GOAL_PANEL_MIN_HEIGHT_PX),
|
|
Math.floor(window.innerHeight * GOAL_PANEL_MAX_VIEWPORT_RATIO),
|
|
);
|
|
}
|
|
|
|
function buildGoalMarkdownBody(summary: string, objective: string): string {
|
|
const s = summary.trim();
|
|
const o = objective.trim();
|
|
if (s && o) return `${s}\n\n---\n\n${o}`;
|
|
return o || s;
|
|
}
|
|
|
|
function cliAppMentionPayload(app: CliAppInfo): OutboundCliAppMention {
|
|
return {
|
|
name: app.name,
|
|
display_name: app.display_name,
|
|
category: app.category,
|
|
entry_point: app.entry_point,
|
|
logo_url: app.logo_url ?? null,
|
|
brand_color: app.brand_color ?? null,
|
|
};
|
|
}
|
|
|
|
function mcpPresetMentionPayload(preset: McpPresetInfo): OutboundMcpPresetMention {
|
|
return {
|
|
name: preset.name,
|
|
display_name: preset.display_name,
|
|
category: preset.category,
|
|
transport: preset.transport,
|
|
status: preset.status,
|
|
configured: preset.configured,
|
|
logo_url: preset.logo_url ?? null,
|
|
brand_color: preset.brand_color ?? null,
|
|
};
|
|
}
|
|
|
|
function RunElapsedStrip({
|
|
startedAt,
|
|
goalState,
|
|
}: {
|
|
startedAt: number | null;
|
|
goalState?: GoalStateWsPayload;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [goalPanelOpen, setGoalPanelOpen] = useState(false);
|
|
const [, setTick] = useState(0);
|
|
const stripWrapperRef = useRef<HTMLDivElement>(null);
|
|
const panelRef = useRef<HTMLDivElement>(null);
|
|
const expandToggleRef = useRef<HTMLButtonElement>(null);
|
|
const [panelMaxPx, setPanelMaxPx] = useState(280);
|
|
|
|
useEffect(() => {
|
|
if (startedAt == null) return;
|
|
const id = window.setInterval(() => setTick((n) => n + 1), 1000);
|
|
return () => window.clearInterval(id);
|
|
}, [startedAt]);
|
|
|
|
const showTimer = startedAt != null;
|
|
const stripLabel = goalStateStripPreview(goalState, t);
|
|
const showGoal = !!stripLabel?.trim();
|
|
if (!showTimer && !showGoal) return null;
|
|
|
|
const objectiveFull = goalState?.objective?.trim() ?? "";
|
|
const summaryFull = goalState?.ui_summary?.trim() ?? "";
|
|
const canExpandGoal = !!(goalState?.active && (objectiveFull || summaryFull));
|
|
|
|
const markdownBody =
|
|
objectiveFull || summaryFull
|
|
? buildGoalMarkdownBody(summaryFull, objectiveFull)
|
|
: "";
|
|
|
|
useLayoutEffect(() => {
|
|
if (!goalPanelOpen) return;
|
|
|
|
function relayout(): void {
|
|
const el = stripWrapperRef.current;
|
|
if (!el) return;
|
|
const top = el.getBoundingClientRect().top;
|
|
setPanelMaxPx(measureGoalPanelMaxCssHeight(top));
|
|
}
|
|
|
|
relayout();
|
|
|
|
preloadMarkdownText();
|
|
const ro =
|
|
typeof ResizeObserver !== "undefined"
|
|
? new ResizeObserver(() => relayout())
|
|
: null;
|
|
if (stripWrapperRef.current && ro) {
|
|
ro.observe(stripWrapperRef.current);
|
|
}
|
|
window.addEventListener("resize", relayout);
|
|
window.addEventListener("scroll", relayout, true);
|
|
return () => {
|
|
ro?.disconnect();
|
|
window.removeEventListener("resize", relayout);
|
|
window.removeEventListener("scroll", relayout, true);
|
|
};
|
|
}, [goalPanelOpen]);
|
|
|
|
useEffect(() => {
|
|
if (!goalPanelOpen) return;
|
|
|
|
function onPointerDown(ev: MouseEvent): void {
|
|
const target = ev.target as Node | null;
|
|
if (!target) return;
|
|
if (panelRef.current?.contains(target)) return;
|
|
if (expandToggleRef.current?.contains(target)) return;
|
|
setGoalPanelOpen(false);
|
|
}
|
|
|
|
function onKey(ev: KeyboardEvent): void {
|
|
if (ev.key === "Escape") setGoalPanelOpen(false);
|
|
}
|
|
|
|
window.addEventListener("mousedown", onPointerDown);
|
|
window.addEventListener("keydown", onKey);
|
|
return () => {
|
|
window.removeEventListener("mousedown", onPointerDown);
|
|
window.removeEventListener("keydown", onKey);
|
|
};
|
|
}, [goalPanelOpen]);
|
|
|
|
const elapsed =
|
|
startedAt != null ? Math.max(0, Math.floor(Date.now() / 1000 - startedAt)) : 0;
|
|
const m = Math.floor(elapsed / 60);
|
|
const sec = elapsed % 60;
|
|
const shortElapsed = m > 0 ? `${m}:${sec.toString().padStart(2, "0")}` : `${sec}s`;
|
|
const timerTitle = showTimer
|
|
? t("thread.composer.runRuntimeTitle", { elapsed: shortElapsed })
|
|
: null;
|
|
|
|
const ariaParts = [timerTitle, showGoal ? stripLabel : null].filter(Boolean);
|
|
const ariaLabel = ariaParts.join(" · ");
|
|
|
|
return (
|
|
<div ref={stripWrapperRef} className="relative z-30">
|
|
{goalPanelOpen && canExpandGoal && markdownBody ? (
|
|
<div
|
|
ref={panelRef}
|
|
id="nanobot-goal-panel-root"
|
|
role="dialog"
|
|
aria-modal="false"
|
|
aria-labelledby="nanobot-goal-panel-title"
|
|
tabIndex={-1}
|
|
className={cn(
|
|
"absolute bottom-[calc(100%+8px)] left-3 right-3 z-[50] flex max-w-none flex-col overflow-hidden",
|
|
"rounded-2xl border border-black/[0.08] bg-card shadow-[0_12px_40px_rgba(15,23,42,0.14)]",
|
|
"backdrop-blur-sm dark:border-white/[0.1] dark:shadow-[0_16px_48px_rgba(0,0,0,0.45)]",
|
|
)}
|
|
style={{ maxHeight: `${Math.round(panelMaxPx)}px` }}
|
|
>
|
|
<div className="flex shrink-0 items-center justify-between gap-2 border-b border-black/[0.06] px-3 py-2 dark:border-white/[0.08]">
|
|
<h2
|
|
id="nanobot-goal-panel-title"
|
|
className="min-w-0 truncate text-[13px] font-semibold tracking-tight text-foreground"
|
|
>
|
|
{t("thread.composer.goalStateSheetTitle")}
|
|
</h2>
|
|
<button
|
|
type="button"
|
|
className={cn(
|
|
"inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
|
|
"text-muted-foreground transition-colors hover:bg-muted/65 hover:text-foreground",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
)}
|
|
aria-label={t("thread.composer.goalStateCloseAria")}
|
|
onClick={() => setGoalPanelOpen(false)}
|
|
>
|
|
<X className="h-4 w-4" aria-hidden />
|
|
</button>
|
|
</div>
|
|
<div
|
|
id="nanobot-goal-panel-scroll"
|
|
className="min-h-0 flex-1 overflow-y-auto scrollbar-thin px-3 pb-3 pt-2"
|
|
>
|
|
<MarkdownText className="max-w-none text-[13.5px] leading-relaxed text-foreground/90">
|
|
{markdownBody}
|
|
</MarkdownText>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
<div
|
|
className="flex min-h-[36px] items-center gap-2 border-b border-black/[0.04] px-3 py-2 dark:border-white/[0.06]"
|
|
role="status"
|
|
aria-label={ariaLabel}
|
|
>
|
|
{showTimer ? (
|
|
<Activity className="h-4 w-4 shrink-0 text-primary/80" aria-hidden />
|
|
) : (
|
|
<Target className="h-4 w-4 shrink-0 text-primary/75" aria-hidden />
|
|
)}
|
|
<span className="flex min-w-0 flex-1 items-center gap-1.5 text-[12px] font-medium text-foreground/75">
|
|
{timerTitle ? <span className="shrink-0">{timerTitle}</span> : null}
|
|
{timerTitle && showGoal ? (
|
|
<span className="shrink-0 text-muted-foreground/45" aria-hidden>
|
|
·
|
|
</span>
|
|
) : null}
|
|
{showGoal ? (
|
|
<span className="truncate">
|
|
{t("thread.composer.goalStateStrip", { label: stripLabel })}
|
|
</span>
|
|
) : null}
|
|
</span>
|
|
{canExpandGoal ? (
|
|
<button
|
|
ref={expandToggleRef}
|
|
type="button"
|
|
className={cn(
|
|
"inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
|
|
"text-muted-foreground transition-colors hover:bg-muted/55 hover:text-foreground",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
)}
|
|
aria-expanded={goalPanelOpen}
|
|
aria-controls={goalPanelOpen ? "nanobot-goal-panel-root" : undefined}
|
|
aria-label={t("thread.composer.goalStateExpandAria")}
|
|
title={t("thread.composer.goalStateExpandAria")}
|
|
onClick={() => setGoalPanelOpen((o) => !o)}
|
|
>
|
|
{goalPanelOpen ? (
|
|
<ChevronDown className="h-4 w-4" aria-hidden />
|
|
) : (
|
|
<ChevronUp className="h-4 w-4" aria-hidden />
|
|
)}
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ThreadComposer({
|
|
onSend,
|
|
disabled,
|
|
placeholder,
|
|
isStreaming = false,
|
|
modelLabel = null,
|
|
modelProvider = null,
|
|
modelProviderLabel = null,
|
|
variant = "thread",
|
|
slashCommands = [],
|
|
cliApps = [],
|
|
mcpPresets = [],
|
|
imageMode: controlledImageMode,
|
|
onImageModeChange,
|
|
onStop,
|
|
runStartedAt = null,
|
|
goalState,
|
|
}: ThreadComposerProps) {
|
|
const { t } = useTranslation();
|
|
const [value, setValue] = useState("");
|
|
const [inlineError, setInlineError] = useState<string | null>(null);
|
|
const [slashMenuDismissed, setSlashMenuDismissed] = useState(false);
|
|
const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);
|
|
const [cliAppMenuDismissed, setCliAppMenuDismissed] = useState(false);
|
|
const [selectedCliAppIndex, setSelectedCliAppIndex] = useState(0);
|
|
const [cursorPosition, setCursorPosition] = useState(0);
|
|
const [uncontrolledImageMode, setUncontrolledImageMode] = useState(false);
|
|
const [imageAspectRatio, setImageAspectRatio] = useState<ImageAspectRatio>("auto");
|
|
const [aspectMenuOpen, setAspectMenuOpen] = useState(false);
|
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
|
const formRef = useRef<HTMLFormElement>(null);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
const aspectControlRef = useRef<HTMLDivElement>(null);
|
|
const chipRefs = useRef(new Map<string, HTMLButtonElement>());
|
|
const isHero = variant === "hero";
|
|
const imageMode = controlledImageMode ?? uncontrolledImageMode;
|
|
const setImageMode = useCallback(
|
|
(enabled: boolean) => {
|
|
if (controlledImageMode === undefined) {
|
|
setUncontrolledImageMode(enabled);
|
|
}
|
|
onImageModeChange?.(enabled);
|
|
},
|
|
[controlledImageMode, onImageModeChange],
|
|
);
|
|
const resolvedPlaceholder = isStreaming
|
|
? t("thread.composer.placeholderStreaming")
|
|
: imageMode
|
|
? t("thread.composer.imageMode.placeholder")
|
|
: placeholder ?? t("thread.composer.placeholderThread");
|
|
|
|
const { images, enqueue, remove, clear, encoding, full } =
|
|
useAttachedImages();
|
|
|
|
const formatRejection = useCallback(
|
|
(reason: AttachmentError): string => {
|
|
const key = `thread.composer.imageRejected.${reason}`;
|
|
return t(key, { max: MAX_IMAGES_PER_MESSAGE });
|
|
},
|
|
[t],
|
|
);
|
|
|
|
const addFiles = useCallback(
|
|
(files: File[]) => {
|
|
if (files.length === 0) return;
|
|
const { rejected } = enqueue(files);
|
|
if (rejected.length > 0) {
|
|
setInlineError(formatRejection(rejected[0].reason));
|
|
} else {
|
|
setInlineError(null);
|
|
}
|
|
},
|
|
[enqueue, formatRejection],
|
|
);
|
|
|
|
const {
|
|
isDragging,
|
|
onPaste,
|
|
onDragEnter,
|
|
onDragOver,
|
|
onDragLeave,
|
|
onDrop,
|
|
} = useClipboardAndDrop(addFiles);
|
|
|
|
useEffect(() => {
|
|
if (disabled) return;
|
|
const el = textareaRef.current;
|
|
if (!el) return;
|
|
const id = requestAnimationFrame(() => el.focus());
|
|
return () => cancelAnimationFrame(id);
|
|
}, [disabled]);
|
|
|
|
const readyImages = useMemo(
|
|
() => images.filter((img): img is AttachedImage & { dataUrl: string } =>
|
|
img.status === "ready" && typeof img.dataUrl === "string",
|
|
),
|
|
[images],
|
|
);
|
|
const hasErrors = images.some((img) => img.status === "error");
|
|
|
|
const canSend =
|
|
!disabled
|
|
&& !encoding
|
|
&& !hasErrors
|
|
&& (value.trim().length > 0 || readyImages.length > 0);
|
|
|
|
const slashQuery = useMemo(() => {
|
|
if (disabled || slashMenuDismissed || !value.startsWith("/")) return null;
|
|
const commandToken = value.slice(1);
|
|
if (/\s/.test(commandToken)) return null;
|
|
return commandToken.toLowerCase();
|
|
}, [disabled, slashMenuDismissed, value]);
|
|
|
|
const filteredSlashCommands = useMemo(() => {
|
|
if (slashQuery === null) return [];
|
|
return slashCommands
|
|
.filter((command) => {
|
|
const haystack = [
|
|
command.command,
|
|
command.title,
|
|
command.description,
|
|
command.argHint ?? "",
|
|
t(`thread.composer.slash.commands.${slashCommandI18nKey(command.command)}.title`, {
|
|
defaultValue: "",
|
|
}),
|
|
t(`thread.composer.slash.commands.${slashCommandI18nKey(command.command)}.description`, {
|
|
defaultValue: "",
|
|
}),
|
|
].join(" ").toLowerCase();
|
|
return haystack.includes(slashQuery);
|
|
})
|
|
.slice(0, 8);
|
|
}, [slashCommands, slashQuery, t]);
|
|
|
|
const showSlashMenu = filteredSlashCommands.length > 0;
|
|
const cliAppMention = useMemo<CliAppMentionQuery | null>(() => {
|
|
if (disabled || cliAppMenuDismissed) return null;
|
|
const caret = Math.min(Math.max(cursorPosition, 0), value.length);
|
|
const beforeCaret = value.slice(0, caret);
|
|
const match = /(?:^|\s)@([a-z0-9_-]*)$/i.exec(beforeCaret);
|
|
if (!match) return null;
|
|
const query = match[1].toLowerCase();
|
|
return {
|
|
query,
|
|
start: caret - query.length - 1,
|
|
end: caret,
|
|
};
|
|
}, [cliAppMenuDismissed, cursorPosition, disabled, value]);
|
|
|
|
const filteredMentionCandidates = useMemo<MentionCandidate[]>(() => {
|
|
if (!cliAppMention) return [];
|
|
const cliCandidates: MentionCandidate[] = cliApps
|
|
.filter((app) => app.installed)
|
|
.filter((app) => {
|
|
const haystack = [
|
|
app.name,
|
|
app.display_name,
|
|
app.category,
|
|
app.description,
|
|
app.entry_point,
|
|
].join(" ").toLowerCase();
|
|
return haystack.includes(cliAppMention.query);
|
|
})
|
|
.map((app) => ({ kind: "cli", name: app.name, app }));
|
|
const mcpCandidates: MentionCandidate[] = mcpPresets
|
|
.filter((preset) => preset.installed && preset.configured)
|
|
.filter((preset) => {
|
|
const haystack = [
|
|
preset.name,
|
|
preset.display_name,
|
|
preset.category,
|
|
preset.description,
|
|
preset.transport,
|
|
].join(" ").toLowerCase();
|
|
return haystack.includes(cliAppMention.query);
|
|
})
|
|
.map((preset) => ({ kind: "mcp", name: preset.name, preset }));
|
|
return [...cliCandidates, ...mcpCandidates].slice(0, 8);
|
|
}, [cliAppMention, cliApps, mcpPresets]);
|
|
|
|
const showCliAppMenu = filteredMentionCandidates.length > 0;
|
|
const showAnyPalette = showSlashMenu || showCliAppMenu;
|
|
const mentionSegments = useMemo(
|
|
() => splitCapabilityMentionSegments(value, cliApps, mcpPresets),
|
|
[cliApps, mcpPresets, value],
|
|
);
|
|
const hasMentionDecorations = mentionSegments.some(
|
|
(segment) => segment.kind === "cli" || segment.kind === "mcp",
|
|
);
|
|
const activeCliMentionApps = useMemo(() => {
|
|
const seen = new Set<string>();
|
|
return mentionSegments.flatMap((segment) => {
|
|
if (segment.kind !== "cli" || seen.has(segment.app.name)) return [];
|
|
seen.add(segment.app.name);
|
|
return [segment.app];
|
|
});
|
|
}, [mentionSegments]);
|
|
const activeMcpPresetMentions = useMemo(() => {
|
|
const seen = new Set<string>();
|
|
return mentionSegments.flatMap((segment) => {
|
|
if (segment.kind !== "mcp" || seen.has(segment.preset.name)) return [];
|
|
seen.add(segment.preset.name);
|
|
return [segment.preset];
|
|
});
|
|
}, [mentionSegments]);
|
|
const [slashPaletteLayout, setSlashPaletteLayout] = useState<SlashPaletteLayout>({
|
|
placement: "above",
|
|
maxHeight: SLASH_PALETTE_MAX_HEIGHT_PX,
|
|
});
|
|
|
|
useEffect(() => {
|
|
setSelectedCommandIndex(0);
|
|
}, [slashQuery]);
|
|
|
|
useEffect(() => {
|
|
setSelectedCliAppIndex(0);
|
|
}, [cliAppMention?.query]);
|
|
|
|
useEffect(() => {
|
|
if (selectedCommandIndex >= filteredSlashCommands.length) {
|
|
setSelectedCommandIndex(0);
|
|
}
|
|
}, [filteredSlashCommands.length, selectedCommandIndex]);
|
|
|
|
useEffect(() => {
|
|
if (selectedCliAppIndex >= filteredMentionCandidates.length) {
|
|
setSelectedCliAppIndex(0);
|
|
}
|
|
}, [filteredMentionCandidates.length, selectedCliAppIndex]);
|
|
|
|
useEffect(() => {
|
|
if (!showAnyPalette) return;
|
|
|
|
const dismissOnPointerDown = (event: PointerEvent) => {
|
|
const target = event.target;
|
|
if (target instanceof Node && formRef.current?.contains(target)) return;
|
|
setSlashMenuDismissed(true);
|
|
setCliAppMenuDismissed(true);
|
|
};
|
|
|
|
document.addEventListener("pointerdown", dismissOnPointerDown, true);
|
|
return () => {
|
|
document.removeEventListener("pointerdown", dismissOnPointerDown, true);
|
|
};
|
|
}, [showAnyPalette]);
|
|
|
|
useLayoutEffect(() => {
|
|
if (!showAnyPalette) return;
|
|
|
|
const updateLayout = () => {
|
|
const form = formRef.current;
|
|
if (!form) return;
|
|
const rect = form.getBoundingClientRect();
|
|
if (rect.width === 0 && rect.height === 0) return;
|
|
|
|
const bounds = getVisibleBounds(form);
|
|
const spaceAbove = Math.max(0, rect.top - bounds.top - SLASH_PALETTE_GAP_PX);
|
|
const spaceBelow = Math.max(0, bounds.bottom - rect.bottom - SLASH_PALETTE_GAP_PX);
|
|
const placement: SlashPalettePlacement =
|
|
spaceAbove >= SLASH_PALETTE_MIN_HEIGHT_PX || spaceAbove >= spaceBelow
|
|
? "above"
|
|
: "below";
|
|
const available = placement === "above" ? spaceAbove : spaceBelow;
|
|
const maxHeight = Math.min(SLASH_PALETTE_MAX_HEIGHT_PX, available);
|
|
|
|
setSlashPaletteLayout((current) =>
|
|
current.placement === placement && current.maxHeight === maxHeight
|
|
? current
|
|
: { placement, maxHeight },
|
|
);
|
|
};
|
|
|
|
updateLayout();
|
|
window.addEventListener("resize", updateLayout);
|
|
document.addEventListener("scroll", updateLayout, true);
|
|
return () => {
|
|
window.removeEventListener("resize", updateLayout);
|
|
document.removeEventListener("scroll", updateLayout, true);
|
|
};
|
|
}, [filteredMentionCandidates.length, filteredSlashCommands.length, showAnyPalette]);
|
|
|
|
useEffect(() => {
|
|
if (!aspectMenuOpen) return;
|
|
|
|
const closeOnPointerDown = (event: PointerEvent) => {
|
|
const target = event.target;
|
|
if (target instanceof Node && aspectControlRef.current?.contains(target)) return;
|
|
setAspectMenuOpen(false);
|
|
};
|
|
const closeOnKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === "Escape") {
|
|
setAspectMenuOpen(false);
|
|
textareaRef.current?.focus();
|
|
}
|
|
};
|
|
const closeOnScroll = () => setAspectMenuOpen(false);
|
|
const closeOnWheel = (event: WheelEvent) => {
|
|
setAspectMenuOpen(false);
|
|
scrollNearestOverflowParent(event.target, event.deltaY);
|
|
};
|
|
|
|
document.addEventListener("pointerdown", closeOnPointerDown, true);
|
|
document.addEventListener("keydown", closeOnKeyDown);
|
|
document.addEventListener("scroll", closeOnScroll, true);
|
|
document.addEventListener("wheel", closeOnWheel, { capture: true, passive: true });
|
|
return () => {
|
|
document.removeEventListener("pointerdown", closeOnPointerDown, true);
|
|
document.removeEventListener("keydown", closeOnKeyDown);
|
|
document.removeEventListener("scroll", closeOnScroll, true);
|
|
document.removeEventListener("wheel", closeOnWheel, true);
|
|
};
|
|
}, [aspectMenuOpen]);
|
|
|
|
const resizeTextarea = useCallback(() => {
|
|
requestAnimationFrame(() => {
|
|
const el = textareaRef.current;
|
|
if (!el) return;
|
|
el.style.height = "auto";
|
|
el.style.height = `${Math.min(el.scrollHeight, 260)}px`;
|
|
el.focus();
|
|
});
|
|
}, []);
|
|
|
|
const chooseSlashCommand = useCallback(
|
|
(command: SlashCommand) => {
|
|
setValue(command.argHint ? `${command.command} ` : command.command);
|
|
setSlashMenuDismissed(true);
|
|
setCliAppMenuDismissed(false);
|
|
setInlineError(null);
|
|
resizeTextarea();
|
|
},
|
|
[resizeTextarea],
|
|
);
|
|
|
|
const chooseMentionCandidate = useCallback(
|
|
(candidate: MentionCandidate) => {
|
|
if (!cliAppMention) return;
|
|
const suffix = value.slice(cliAppMention.end);
|
|
const mention = `@${candidate.name}${suffix.startsWith(" ") ? "" : " "}`;
|
|
const next = `${value.slice(0, cliAppMention.start)}${mention}${suffix}`;
|
|
const nextCursor = cliAppMention.start + mention.length;
|
|
setValue(next);
|
|
setCursorPosition(nextCursor);
|
|
setCliAppMenuDismissed(true);
|
|
setSlashMenuDismissed(false);
|
|
setInlineError(null);
|
|
resizeTextarea();
|
|
requestAnimationFrame(() => {
|
|
const el = textareaRef.current;
|
|
if (!el) return;
|
|
el.focus();
|
|
el.setSelectionRange(nextCursor, nextCursor);
|
|
});
|
|
},
|
|
[cliAppMention, resizeTextarea, value],
|
|
);
|
|
|
|
const submit = useCallback(() => {
|
|
if (!canSend) return;
|
|
const trimmed = value.trim();
|
|
// Share the same normalized ``data:`` URL with both the wire payload and
|
|
// the optimistic bubble preview: data URLs are self-contained (no blob
|
|
// lifetime, safe under React StrictMode double-mount) and keep the
|
|
// bubble in sync with whatever the backend actually sees.
|
|
const payload: SendImage[] | undefined =
|
|
readyImages.length > 0
|
|
? readyImages.map((img) => ({
|
|
media: {
|
|
data_url: img.dataUrl,
|
|
name: img.file.name,
|
|
},
|
|
preview: { url: img.dataUrl, name: img.file.name },
|
|
}))
|
|
: undefined;
|
|
const attachedCliApps = activeCliMentionApps.map(cliAppMentionPayload);
|
|
const attachedMcpPresets = activeMcpPresetMentions.map(mcpPresetMentionPayload);
|
|
const options: SendOptions | undefined =
|
|
imageMode || attachedCliApps.length > 0 || attachedMcpPresets.length > 0
|
|
? {
|
|
...(imageMode
|
|
? {
|
|
imageGeneration: {
|
|
enabled: true,
|
|
aspect_ratio: imageAspectRatio === "auto" ? null : imageAspectRatio,
|
|
},
|
|
}
|
|
: {}),
|
|
...(attachedCliApps.length > 0 ? { cliApps: attachedCliApps } : {}),
|
|
...(attachedMcpPresets.length > 0 ? { mcpPresets: attachedMcpPresets } : {}),
|
|
}
|
|
: undefined;
|
|
onSend(trimmed, payload, options);
|
|
setValue("");
|
|
setInlineError(null);
|
|
// Bubble owns the data URL copy; safe to revoke every staged blob
|
|
// preview here without affecting the rendered message.
|
|
clear();
|
|
setSlashMenuDismissed(false);
|
|
setCliAppMenuDismissed(false);
|
|
setCursorPosition(0);
|
|
resizeTextarea();
|
|
}, [
|
|
activeCliMentionApps,
|
|
activeMcpPresetMentions,
|
|
canSend,
|
|
clear,
|
|
imageAspectRatio,
|
|
imageMode,
|
|
onSend,
|
|
readyImages,
|
|
resizeTextarea,
|
|
value,
|
|
]);
|
|
|
|
const onKeyDown = (e: ReactKeyboardEvent<HTMLTextAreaElement>) => {
|
|
if (showCliAppMenu) {
|
|
if (e.key === "ArrowDown") {
|
|
e.preventDefault();
|
|
setSelectedCliAppIndex((idx) => (idx + 1) % filteredMentionCandidates.length);
|
|
return;
|
|
}
|
|
if (e.key === "ArrowUp") {
|
|
e.preventDefault();
|
|
setSelectedCliAppIndex(
|
|
(idx) => (idx - 1 + filteredMentionCandidates.length) % filteredMentionCandidates.length,
|
|
);
|
|
return;
|
|
}
|
|
if (e.key === "Tab" || (e.key === "Enter" && !e.shiftKey)) {
|
|
e.preventDefault();
|
|
chooseMentionCandidate(filteredMentionCandidates[selectedCliAppIndex]);
|
|
return;
|
|
}
|
|
if (e.key === "Escape") {
|
|
e.preventDefault();
|
|
setCliAppMenuDismissed(true);
|
|
return;
|
|
}
|
|
}
|
|
if (showSlashMenu) {
|
|
if (e.key === "ArrowDown") {
|
|
e.preventDefault();
|
|
setSelectedCommandIndex((idx) => (idx + 1) % filteredSlashCommands.length);
|
|
return;
|
|
}
|
|
if (e.key === "ArrowUp") {
|
|
e.preventDefault();
|
|
setSelectedCommandIndex(
|
|
(idx) => (idx - 1 + filteredSlashCommands.length) % filteredSlashCommands.length,
|
|
);
|
|
return;
|
|
}
|
|
if (e.key === "Tab" || (e.key === "Enter" && !e.shiftKey)) {
|
|
e.preventDefault();
|
|
chooseSlashCommand(filteredSlashCommands[selectedCommandIndex]);
|
|
return;
|
|
}
|
|
if (e.key === "Escape") {
|
|
e.preventDefault();
|
|
setSlashMenuDismissed(true);
|
|
return;
|
|
}
|
|
}
|
|
if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
|
|
e.preventDefault();
|
|
submit();
|
|
}
|
|
};
|
|
|
|
const onInput: React.FormEventHandler<HTMLTextAreaElement> = (e) => {
|
|
const el = e.currentTarget;
|
|
el.style.height = "auto";
|
|
el.style.height = `${Math.min(el.scrollHeight, 260)}px`;
|
|
};
|
|
|
|
const onFilePick: React.ChangeEventHandler<HTMLInputElement> = (e) => {
|
|
const files = Array.from(e.target.files ?? []);
|
|
e.target.value = "";
|
|
addFiles(files);
|
|
};
|
|
|
|
const removeChip = useCallback(
|
|
(id: string) => {
|
|
const { nextFocusId } = remove(id);
|
|
setInlineError(null);
|
|
requestAnimationFrame(() => {
|
|
const el = nextFocusId ? chipRefs.current.get(nextFocusId) : null;
|
|
if (el) {
|
|
el.focus();
|
|
} else {
|
|
textareaRef.current?.focus();
|
|
}
|
|
});
|
|
},
|
|
[remove],
|
|
);
|
|
|
|
const onChipKey = useCallback(
|
|
(id: string) => (e: ReactKeyboardEvent<HTMLButtonElement>) => {
|
|
if (
|
|
e.key === "Delete" ||
|
|
e.key === "Backspace" ||
|
|
e.key === "Enter" ||
|
|
e.key === " "
|
|
) {
|
|
e.preventDefault();
|
|
removeChip(id);
|
|
}
|
|
},
|
|
[removeChip],
|
|
);
|
|
|
|
const attachButtonDisabled = disabled || full;
|
|
const showStopButton = isStreaming && !!onStop;
|
|
const inputTextClasses = cn(
|
|
"w-full resize-none bg-transparent",
|
|
isHero
|
|
? "min-h-[78px] px-5 pb-2 pt-5 text-[15px] leading-6"
|
|
: "min-h-[50px] px-4 pb-1.5 pt-3 text-[13.5px] leading-5",
|
|
);
|
|
|
|
return (
|
|
<form
|
|
ref={formRef}
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
submit();
|
|
}}
|
|
onDragEnter={onDragEnter}
|
|
onDragOver={onDragOver}
|
|
onDragLeave={onDragLeave}
|
|
onDrop={onDrop}
|
|
className={cn("relative w-full", isHero ? "px-0" : "px-1 pb-1.5 pt-1 sm:px-0")}
|
|
>
|
|
{showSlashMenu ? (
|
|
<SlashCommandPalette
|
|
commands={filteredSlashCommands}
|
|
selectedIndex={selectedCommandIndex}
|
|
layout={slashPaletteLayout}
|
|
isHero={isHero}
|
|
onHover={setSelectedCommandIndex}
|
|
onChoose={chooseSlashCommand}
|
|
/>
|
|
) : null}
|
|
{showCliAppMenu ? (
|
|
<CliAppMentionPalette
|
|
candidates={filteredMentionCandidates}
|
|
selectedIndex={selectedCliAppIndex}
|
|
layout={slashPaletteLayout}
|
|
isHero={isHero}
|
|
onHover={setSelectedCliAppIndex}
|
|
onChoose={chooseMentionCandidate}
|
|
/>
|
|
) : null}
|
|
<div
|
|
className={cn(
|
|
"relative mx-auto flex w-full flex-col overflow-visible transition-all duration-200",
|
|
isHero
|
|
? "max-w-[58rem] rounded-[28px] border border-black/[0.035] bg-card shadow-[0_20px_55px_rgba(15,23,42,0.08)] dark:border-white/[0.06] dark:shadow-[0_24px_55px_rgba(0,0,0,0.34)]"
|
|
: "max-w-[49.5rem] rounded-[22px] border border-black/[0.035] bg-card shadow-[0_12px_30px_rgba(15,23,42,0.07)] dark:border-white/[0.06] dark:shadow-[0_16px_34px_rgba(0,0,0,0.28)]",
|
|
"focus-within:ring-1 focus-within:ring-foreground/8",
|
|
disabled && "opacity-60",
|
|
isDragging && "ring-2 ring-primary/40 motion-reduce:ring-0 motion-reduce:border-primary",
|
|
goalState?.active &&
|
|
"goal-shell-glow ring-1 ring-sky-400/35 motion-reduce:ring-sky-400/25 dark:ring-sky-400/45",
|
|
)}
|
|
>
|
|
{images.length > 0 ? (
|
|
<div
|
|
className="flex flex-wrap gap-2 px-3 pt-3"
|
|
aria-label={t("thread.composer.attachImage")}
|
|
>
|
|
{images.map((img) => (
|
|
<AttachmentChip
|
|
key={img.id}
|
|
image={img}
|
|
labelRemove={t("thread.composer.remove")}
|
|
labelEncoding={t("thread.composer.encoding")}
|
|
normalizedHint={(orig, current) =>
|
|
t("thread.composer.normalizedSizeHint", {
|
|
orig: formatBytes(orig),
|
|
current: formatBytes(current),
|
|
})
|
|
}
|
|
formatError={formatRejection}
|
|
onRemove={() => removeChip(img.id)}
|
|
onKeyDown={onChipKey(img.id)}
|
|
registerRef={(el) => {
|
|
if (el) chipRefs.current.set(img.id, el);
|
|
else chipRefs.current.delete(img.id);
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
{runStartedAt != null || goalState?.active ? (
|
|
<RunElapsedStrip startedAt={runStartedAt} goalState={goalState} />
|
|
) : null}
|
|
<div className="relative">
|
|
{hasMentionDecorations ? (
|
|
<ComposerCliMentionOverlay
|
|
segments={mentionSegments}
|
|
isHero={isHero}
|
|
className={inputTextClasses}
|
|
/>
|
|
) : null}
|
|
<textarea
|
|
ref={textareaRef}
|
|
value={value}
|
|
onChange={(e) => {
|
|
setValue(e.target.value);
|
|
setSlashMenuDismissed(false);
|
|
setCliAppMenuDismissed(false);
|
|
setCursorPosition(e.target.selectionStart ?? e.target.value.length);
|
|
}}
|
|
onInput={onInput}
|
|
onKeyDown={onKeyDown}
|
|
onKeyUp={(e) => setCursorPosition(e.currentTarget.selectionStart ?? e.currentTarget.value.length)}
|
|
onSelect={(e) => setCursorPosition(e.currentTarget.selectionStart ?? e.currentTarget.value.length)}
|
|
onClick={(e) => setCursorPosition(e.currentTarget.selectionStart ?? e.currentTarget.value.length)}
|
|
onPaste={onPaste}
|
|
rows={1}
|
|
placeholder={resolvedPlaceholder}
|
|
disabled={disabled}
|
|
aria-label={t("thread.composer.inputAria")}
|
|
className={cn(
|
|
inputTextClasses,
|
|
"relative z-10 caret-foreground placeholder:text-muted-foreground/70",
|
|
"focus:outline-none focus-visible:outline-none",
|
|
"disabled:cursor-not-allowed",
|
|
hasMentionDecorations && "text-transparent selection:bg-primary/20",
|
|
)}
|
|
/>
|
|
</div>
|
|
{inlineError ? (
|
|
<div
|
|
role="alert"
|
|
className={cn(
|
|
"mx-3 mb-1 rounded-md border border-destructive/40 bg-destructive/8 px-2.5 py-1",
|
|
"text-[11.5px] font-medium text-destructive",
|
|
)}
|
|
>
|
|
{inlineError}
|
|
</div>
|
|
) : null}
|
|
<div
|
|
className={cn(
|
|
"flex items-center justify-between gap-2",
|
|
isHero ? "px-4 pb-4" : "px-3 pb-2",
|
|
)}
|
|
>
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept={ACCEPT_ATTR}
|
|
multiple
|
|
hidden
|
|
onChange={onFilePick}
|
|
/>
|
|
<Button
|
|
type="button"
|
|
size="icon"
|
|
variant="ghost"
|
|
disabled={attachButtonDisabled}
|
|
aria-label={t("thread.composer.attachImage")}
|
|
onClick={() => fileInputRef.current?.click()}
|
|
className={cn(
|
|
"rounded-full text-muted-foreground hover:text-foreground",
|
|
isHero
|
|
? "h-9 w-9 border border-border/55 bg-card shadow-[0_2px_8px_rgba(15,23,42,0.05)] hover:bg-card"
|
|
: "h-9 w-9 border border-border/55 bg-card shadow-[0_2px_8px_rgba(15,23,42,0.05)] hover:bg-card",
|
|
)}
|
|
>
|
|
<Plus className={cn(isHero ? "h-5 w-5" : "h-4 w-4")} />
|
|
</Button>
|
|
<div ref={aspectControlRef} className="relative flex items-center gap-1">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
disabled={disabled}
|
|
aria-pressed={imageMode}
|
|
aria-label={t("thread.composer.imageMode.toggle")}
|
|
onClick={() => {
|
|
setImageMode(!imageMode);
|
|
setAspectMenuOpen(false);
|
|
textareaRef.current?.focus();
|
|
}}
|
|
className={cn(
|
|
"rounded-full border border-border/55 px-2.5 font-medium shadow-[0_2px_8px_rgba(15,23,42,0.04)]",
|
|
"h-9 text-[12px]",
|
|
imageMode
|
|
? "border-primary/30 bg-primary/10 text-primary hover:bg-primary/12"
|
|
: "bg-card text-muted-foreground hover:bg-card hover:text-foreground",
|
|
)}
|
|
>
|
|
<ImageIcon className={cn("mr-1.5", isHero ? "h-4 w-4" : "h-3.5 w-3.5")} />
|
|
{t("thread.composer.imageMode.label")}
|
|
</Button>
|
|
{imageMode ? (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
disabled={disabled}
|
|
aria-haspopup="listbox"
|
|
aria-expanded={aspectMenuOpen}
|
|
aria-label={t("thread.composer.imageMode.aspectAria")}
|
|
onClick={() => setAspectMenuOpen((open) => !open)}
|
|
className={cn(
|
|
"rounded-full border border-border/55 bg-card px-2.5 font-medium text-foreground/80 shadow-[0_2px_8px_rgba(15,23,42,0.04)] hover:bg-card",
|
|
"h-9 text-[12px]",
|
|
)}
|
|
>
|
|
<span>{t(`thread.composer.imageMode.aspect.${imageAspectRatio.replace(":", "_")}`)}</span>
|
|
<ChevronDown className={cn("ml-1.5", isHero ? "h-3.5 w-3.5" : "h-3 w-3")} />
|
|
</Button>
|
|
) : null}
|
|
{imageMode && aspectMenuOpen ? (
|
|
<ImageAspectMenu
|
|
selected={imageAspectRatio}
|
|
isHero={isHero}
|
|
onSelect={(ratio) => {
|
|
setImageAspectRatio(ratio);
|
|
setAspectMenuOpen(false);
|
|
textareaRef.current?.focus();
|
|
}}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
{modelLabel ? (
|
|
<ComposerModelBadge
|
|
label={modelLabel}
|
|
provider={modelProvider}
|
|
providerLabel={modelProviderLabel}
|
|
isHero={isHero}
|
|
/>
|
|
) : null}
|
|
{!isHero ? (
|
|
<span className="hidden select-none text-[10.5px] text-muted-foreground/60 sm:inline">
|
|
{t("thread.composer.sendHint")}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<span className={cn(isHero ? "hidden" : "sm:hidden")} aria-hidden />
|
|
<Button
|
|
type={showStopButton ? "button" : "submit"}
|
|
size="icon"
|
|
disabled={showStopButton ? disabled : !canSend}
|
|
aria-label={showStopButton ? t("thread.composer.stop") : t("thread.composer.send")}
|
|
onClick={showStopButton ? onStop : undefined}
|
|
className={cn(
|
|
"rounded-full transition-transform",
|
|
showStopButton
|
|
? "border border-border/70 bg-card text-foreground/85 shadow-[0_3px_10px_rgba(15,23,42,0.08)] hover:bg-muted/65 hover:text-foreground disabled:text-muted-foreground/50"
|
|
: isHero
|
|
? "border border-foreground bg-foreground text-background shadow-[0_4px_12px_rgba(15,23,42,0.20)] hover:bg-foreground/90 disabled:border-foreground/35 disabled:bg-foreground/35 disabled:text-background/80"
|
|
: "border border-foreground bg-foreground text-background shadow-[0_3px_10px_rgba(15,23,42,0.18)] hover:bg-foreground/90 disabled:border-foreground/35 disabled:bg-foreground/35 disabled:text-background/80",
|
|
"h-9 w-9",
|
|
(canSend || showStopButton) && "hover:scale-[1.03] active:scale-95",
|
|
)}
|
|
>
|
|
{showStopButton ? (
|
|
<Square className={cn("fill-current stroke-current", isHero ? "h-3 w-3" : "h-2.5 w-2.5")} />
|
|
) : isStreaming ? (
|
|
<Loader2 className={cn(isHero ? "h-4.5 w-4.5" : "h-4 w-4", "animate-spin")} />
|
|
) : (
|
|
<ArrowUp className={cn(isHero ? "h-4.5 w-4.5" : "h-4 w-4")} />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
function ComposerModelBadge({
|
|
label,
|
|
provider,
|
|
providerLabel,
|
|
isHero,
|
|
}: {
|
|
label: string;
|
|
provider?: string | null;
|
|
providerLabel?: string | null;
|
|
isHero: boolean;
|
|
}) {
|
|
const inferredProvider = provider || inferProviderFromModelName(label);
|
|
const brand = providerBrand(inferredProvider);
|
|
const [logoIndex, setLogoIndex] = useState(0);
|
|
const logoUrl = brand?.logoUrls[logoIndex];
|
|
const showLogo = !!logoUrl;
|
|
const title = providerLabel ? `${label} · ${providerLabel}` : label;
|
|
|
|
useEffect(() => setLogoIndex(0), [inferredProvider]);
|
|
|
|
return (
|
|
<span
|
|
title={title}
|
|
className={cn(
|
|
"inline-flex min-w-0 items-center rounded-full border border-border/55 bg-card font-medium text-foreground/82",
|
|
"shadow-[0_2px_8px_rgba(15,23,42,0.045)]",
|
|
isHero ? "h-9 max-w-[13.5rem] gap-2 px-2.5 text-[12px]" : "h-9 max-w-[12rem] gap-2 px-2.5 text-[12px]",
|
|
)}
|
|
>
|
|
<span
|
|
data-testid={inferredProvider ? `composer-model-logo-${inferredProvider}` : "composer-model-logo"}
|
|
className={cn(
|
|
"grid shrink-0 place-items-center overflow-hidden rounded-full border bg-background",
|
|
"h-5 w-5",
|
|
)}
|
|
style={{
|
|
borderColor: brand ? `${brand.color}28` : undefined,
|
|
boxShadow: brand ? `inset 0 0 0 1px ${brand.color}18` : undefined,
|
|
}}
|
|
aria-hidden
|
|
>
|
|
{showLogo ? (
|
|
<img
|
|
src={logoUrl}
|
|
alt=""
|
|
className="h-3.5 w-3.5 object-contain"
|
|
onError={() => setLogoIndex((index) => index + 1)}
|
|
/>
|
|
) : brand ? (
|
|
<span
|
|
className={cn(
|
|
"grid h-full w-full place-items-center rounded-full text-white",
|
|
"text-[8px]",
|
|
)}
|
|
style={{ backgroundColor: brand.color }}
|
|
>
|
|
{brand.initials.slice(0, 2)}
|
|
</span>
|
|
) : (
|
|
<Sparkles className={cn("text-muted-foreground/65", isHero ? "h-3.5 w-3.5" : "h-3 w-3")} />
|
|
)}
|
|
</span>
|
|
<span className="truncate">{label}</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function ComposerCliMentionOverlay({
|
|
segments,
|
|
isHero,
|
|
className,
|
|
}: {
|
|
segments: CapabilityMentionSegment[];
|
|
isHero: boolean;
|
|
className: string;
|
|
}) {
|
|
return (
|
|
<div
|
|
aria-hidden
|
|
className={cn(
|
|
className,
|
|
"pointer-events-none absolute inset-0 z-0 overflow-hidden whitespace-pre-wrap break-words text-foreground",
|
|
)}
|
|
>
|
|
{segments.map((segment, index) => {
|
|
if (segment.kind === "text") {
|
|
return <span key={`text-${index}`}>{segment.text}</span>;
|
|
}
|
|
if (segment.kind === "cli") return (
|
|
<CliAppMentionToken
|
|
key={`cli-${segment.app.name}-${index}`}
|
|
app={segment.app}
|
|
label={segment.text}
|
|
variant="composer"
|
|
isHero={isHero}
|
|
/>
|
|
);
|
|
return (
|
|
<McpPresetMentionToken
|
|
key={`mcp-${segment.preset.name}-${index}`}
|
|
preset={segment.preset}
|
|
label={segment.text}
|
|
variant="composer"
|
|
isHero={isHero}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
interface SlashCommandPaletteProps {
|
|
commands: SlashCommand[];
|
|
selectedIndex: number;
|
|
layout: SlashPaletteLayout;
|
|
isHero: boolean;
|
|
onHover: (index: number) => void;
|
|
onChoose: (command: SlashCommand) => void;
|
|
}
|
|
|
|
interface CliAppMentionPaletteProps {
|
|
candidates: MentionCandidate[];
|
|
selectedIndex: number;
|
|
layout: SlashPaletteLayout;
|
|
isHero: boolean;
|
|
onHover: (index: number) => void;
|
|
onChoose: (candidate: MentionCandidate) => void;
|
|
}
|
|
|
|
function ImageAspectMenu({
|
|
selected,
|
|
isHero,
|
|
onSelect,
|
|
}: {
|
|
selected: ImageAspectRatio;
|
|
isHero: boolean;
|
|
onSelect: (ratio: ImageAspectRatio) => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div
|
|
role="listbox"
|
|
aria-label={t("thread.composer.imageMode.aspectAria")}
|
|
className={cn(
|
|
"absolute left-0 z-30 w-44 overflow-hidden rounded-[16px] border",
|
|
isHero ? "top-full mt-2" : "bottom-full mb-2",
|
|
"border-border/65 bg-popover p-1.5 text-popover-foreground shadow-[0_16px_45px_rgba(15,23,42,0.16)]",
|
|
"dark:border-white/10 dark:shadow-[0_18px_45px_rgba(0,0,0,0.42)]",
|
|
isHero ? "text-[12px]" : "text-[11.5px]",
|
|
)}
|
|
>
|
|
<div className="px-2 pb-1 pt-1 font-medium text-muted-foreground/70">
|
|
{t("thread.composer.imageMode.aspectLabel")}
|
|
</div>
|
|
{IMAGE_ASPECT_RATIOS.map((ratio) => {
|
|
const label = t(`thread.composer.imageMode.aspect.${ratio.replace(":", "_")}`);
|
|
return (
|
|
<button
|
|
key={ratio}
|
|
type="button"
|
|
role="option"
|
|
aria-selected={selected === ratio}
|
|
onMouseDown={(e) => {
|
|
e.preventDefault();
|
|
onSelect(ratio);
|
|
}}
|
|
className={cn(
|
|
"flex w-full items-center justify-between rounded-[11px] px-2.5 py-2 text-left transition-colors",
|
|
selected === ratio
|
|
? "bg-primary/10 text-foreground"
|
|
: "text-foreground/86 hover:bg-accent/55",
|
|
)}
|
|
>
|
|
<span>{label}</span>
|
|
{selected === ratio ? <Check className="h-3.5 w-3.5 text-primary" /> : null}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CliAppMentionPalette({
|
|
candidates,
|
|
selectedIndex,
|
|
layout,
|
|
isHero,
|
|
onHover,
|
|
onChoose,
|
|
}: CliAppMentionPaletteProps) {
|
|
const { t } = useTranslation();
|
|
const listMaxHeight = Math.max(
|
|
0,
|
|
layout.maxHeight - SLASH_PALETTE_CHROME_PX,
|
|
);
|
|
return (
|
|
<div
|
|
role="listbox"
|
|
aria-label={t("thread.composer.mentions.ariaLabel")}
|
|
style={{ maxHeight: layout.maxHeight }}
|
|
className={cn(
|
|
"absolute left-1/2 z-30 w-[calc(100%-0.5rem)] -translate-x-1/2 overflow-hidden rounded-[22px] border",
|
|
layout.placement === "above" ? "bottom-full mb-2" : "top-full mt-2",
|
|
"border-border/70 bg-popover p-2 text-popover-foreground shadow-[0_20px_60px_rgba(15,23,42,0.12)]",
|
|
"dark:border-white/10 dark:shadow-[0_24px_60px_rgba(0,0,0,0.42)]",
|
|
isHero ? "max-w-[58rem]" : "max-w-[49.5rem]",
|
|
)}
|
|
>
|
|
<div className="px-2 pb-1.5 pt-0.5 text-[13px] font-semibold text-muted-foreground/78">
|
|
{t("thread.composer.mentions.label")}
|
|
</div>
|
|
<div className="overflow-y-auto" style={{ maxHeight: listMaxHeight }}>
|
|
{candidates.map((candidate, index) => {
|
|
const selected = index === selectedIndex;
|
|
const name = candidate.name;
|
|
const displayName = candidate.kind === "cli"
|
|
? candidate.app.display_name
|
|
: candidate.preset.display_name;
|
|
const typeLabel = candidate.kind === "cli"
|
|
? t("thread.composer.mentions.cliBadge")
|
|
: t("thread.composer.mentions.mcpBadge");
|
|
const ariaDescription = candidate.kind === "cli"
|
|
? t("thread.composer.mentions.cliDescription", { name })
|
|
: t("thread.composer.mentions.mcpDescription", { name });
|
|
return (
|
|
<button
|
|
key={`${candidate.kind}-${name}`}
|
|
type="button"
|
|
role="option"
|
|
aria-selected={selected}
|
|
aria-label={`${displayName} @${name} ${ariaDescription} ${typeLabel}`}
|
|
onMouseEnter={() => onHover(index)}
|
|
onMouseDown={(e) => {
|
|
e.preventDefault();
|
|
onChoose(candidate);
|
|
}}
|
|
className={cn(
|
|
"flex h-10 w-full items-center gap-2.5 rounded-[13px] px-2.5 text-left transition-colors",
|
|
selected
|
|
? "bg-foreground/[0.055] text-foreground"
|
|
: "text-foreground/90 hover:bg-foreground/[0.04]",
|
|
)}
|
|
>
|
|
<MentionCandidateLogo candidate={candidate} selected={selected} />
|
|
<span className="flex min-w-0 flex-1 items-baseline gap-2">
|
|
<span className="shrink-0 text-[15px] font-medium tracking-normal text-foreground">
|
|
{displayName}
|
|
</span>
|
|
<span className="truncate text-[15px] font-normal tracking-normal text-muted-foreground/72">
|
|
@{name}
|
|
</span>
|
|
</span>
|
|
<span
|
|
className={cn(
|
|
"ml-2 shrink-0 rounded-full px-2 py-0.5 text-[11px] font-semibold tracking-normal",
|
|
candidate.kind === "cli"
|
|
? "bg-orange-500/10 text-orange-600 dark:text-orange-300"
|
|
: "bg-sky-500/10 text-sky-600 dark:text-sky-300",
|
|
)}
|
|
>
|
|
{typeLabel}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MentionCandidateLogo({
|
|
candidate,
|
|
selected,
|
|
}: {
|
|
candidate: MentionCandidate;
|
|
selected: boolean;
|
|
}) {
|
|
const [logoIndex, setLogoIndex] = useState(0);
|
|
const color = (candidate.kind === "cli"
|
|
? candidate.app.brand_color
|
|
: candidate.preset.brand_color) || "hsl(var(--primary))";
|
|
const rawLogoUrl = candidate.kind === "cli" ? candidate.app.logo_url : candidate.preset.logo_url;
|
|
const logoUrls = useMemo(() => logoFallbackUrls(rawLogoUrl), [rawLogoUrl]);
|
|
const logoUrl = logoUrls[logoIndex];
|
|
|
|
useEffect(() => setLogoIndex(0), [rawLogoUrl]);
|
|
|
|
if (logoUrl) {
|
|
return (
|
|
<span
|
|
className={cn(
|
|
"flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden rounded-[5px]",
|
|
selected ? "bg-background/55" : "bg-transparent",
|
|
)}
|
|
>
|
|
<img
|
|
src={logoUrl}
|
|
alt=""
|
|
className="h-5 w-5 object-contain"
|
|
onError={() => setLogoIndex((index) => index + 1)}
|
|
/>
|
|
</span>
|
|
);
|
|
}
|
|
return (
|
|
<span
|
|
className="flex h-5 w-5 shrink-0 items-center justify-center rounded-[5px] text-[7.5px] font-semibold text-white"
|
|
style={{ backgroundColor: color }}
|
|
>
|
|
{candidate.kind === "cli"
|
|
? cliAppInitials(candidate.app)
|
|
: mcpPresetInitials(candidate.preset)}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function SlashCommandPalette({
|
|
commands,
|
|
selectedIndex,
|
|
layout,
|
|
isHero,
|
|
onHover,
|
|
onChoose,
|
|
}: SlashCommandPaletteProps) {
|
|
const { t } = useTranslation();
|
|
const listMaxHeight = Math.max(
|
|
0,
|
|
layout.maxHeight - SLASH_PALETTE_CHROME_PX,
|
|
);
|
|
return (
|
|
<div
|
|
role="listbox"
|
|
aria-label={t("thread.composer.slash.ariaLabel")}
|
|
style={{ maxHeight: layout.maxHeight }}
|
|
className={cn(
|
|
"absolute left-1/2 z-30 w-[calc(100%-0.5rem)] -translate-x-1/2 overflow-hidden rounded-[18px] border",
|
|
layout.placement === "above" ? "bottom-full mb-2" : "top-full mt-2",
|
|
"border-border/65 bg-popover p-1.5 text-popover-foreground shadow-[0_18px_55px_rgba(15,23,42,0.18)]",
|
|
"dark:border-white/10 dark:shadow-[0_22px_55px_rgba(0,0,0,0.45)]",
|
|
isHero ? "max-w-[58rem]" : "max-w-[49.5rem]",
|
|
)}
|
|
>
|
|
<div className="px-2 pb-1 pt-1 text-[11px] font-medium tracking-[0.08em] text-muted-foreground/70">
|
|
{t("thread.composer.slash.label")}
|
|
</div>
|
|
<div className="overflow-y-auto pr-0.5" style={{ maxHeight: listMaxHeight }}>
|
|
{commands.map((command, index) => {
|
|
const Icon = COMMAND_ICONS[command.icon] ?? CircleHelp;
|
|
const selected = index === selectedIndex;
|
|
const commandKey = slashCommandI18nKey(command.command);
|
|
const title = t(`thread.composer.slash.commands.${commandKey}.title`, {
|
|
defaultValue: command.title,
|
|
});
|
|
const description = t(`thread.composer.slash.commands.${commandKey}.description`, {
|
|
defaultValue: command.description,
|
|
});
|
|
return (
|
|
<button
|
|
key={command.command}
|
|
type="button"
|
|
role="option"
|
|
aria-selected={selected}
|
|
onMouseEnter={() => onHover(index)}
|
|
onMouseDown={(e) => {
|
|
e.preventDefault();
|
|
onChoose(command);
|
|
}}
|
|
className={cn(
|
|
"flex w-full items-center gap-3 rounded-[13px] px-3 py-2.5 text-left transition-colors",
|
|
selected
|
|
? "bg-primary/10 text-foreground"
|
|
: "text-foreground/86 hover:bg-accent/55",
|
|
)}
|
|
>
|
|
<span
|
|
className={cn(
|
|
"flex h-8 w-8 shrink-0 items-center justify-center rounded-[10px] border",
|
|
selected
|
|
? "border-primary/25 bg-primary/12 text-primary"
|
|
: "border-border/65 bg-muted/45 text-muted-foreground",
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
</span>
|
|
<span className="min-w-0 flex-1">
|
|
<span className="flex min-w-0 items-baseline gap-2">
|
|
<span className="font-mono text-[13px] font-semibold text-foreground">
|
|
{command.command}
|
|
</span>
|
|
{command.argHint ? (
|
|
<span className="font-mono text-[12px] text-muted-foreground">
|
|
{command.argHint}
|
|
</span>
|
|
) : null}
|
|
<span className="truncate text-[13px] font-medium">
|
|
{title}
|
|
</span>
|
|
</span>
|
|
<span className="mt-0.5 block truncate text-[12px] text-muted-foreground">
|
|
{description}
|
|
</span>
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="flex items-center gap-2 px-2 pt-1.5 text-[10.5px] text-muted-foreground/70">
|
|
<span>{t("thread.composer.slash.navigateHint")}</span>
|
|
<span>{t("thread.composer.slash.selectHint")}</span>
|
|
<span>{t("thread.composer.slash.closeHint")}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface AttachmentChipProps {
|
|
image: AttachedImage;
|
|
labelRemove: string;
|
|
labelEncoding: string;
|
|
normalizedHint: (origBytes: number, currentBytes: number) => string;
|
|
formatError: (reason: AttachmentError) => string;
|
|
onRemove: () => void;
|
|
onKeyDown: (e: ReactKeyboardEvent<HTMLButtonElement>) => void;
|
|
registerRef: (el: HTMLButtonElement | null) => void;
|
|
}
|
|
|
|
function AttachmentChip({
|
|
image,
|
|
labelRemove,
|
|
labelEncoding,
|
|
normalizedHint,
|
|
formatError,
|
|
onRemove,
|
|
onKeyDown,
|
|
registerRef,
|
|
}: AttachmentChipProps) {
|
|
const sizeLabel =
|
|
image.status === "ready" && image.normalized && image.encodedBytes
|
|
? normalizedHint(image.file.size, image.encodedBytes)
|
|
: formatBytes(image.file.size);
|
|
const tone =
|
|
image.status === "error"
|
|
? "border-destructive/40 bg-destructive/5 text-destructive"
|
|
: "border-border/70 bg-muted/60";
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"group relative flex items-center gap-2 rounded-[12px] border px-2 py-1.5",
|
|
"transition-colors motion-reduce:transition-none",
|
|
tone,
|
|
)}
|
|
data-testid="composer-chip"
|
|
>
|
|
<div className="relative h-10 w-10 overflow-hidden rounded-md bg-background">
|
|
{image.previewUrl ? (
|
|
<img
|
|
src={image.previewUrl}
|
|
alt=""
|
|
aria-hidden
|
|
loading="eager"
|
|
draggable={false}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="flex h-full w-full items-center justify-center">
|
|
<ImageIcon className="h-4 w-4 text-muted-foreground" aria-hidden />
|
|
</div>
|
|
)}
|
|
{image.status === "encoding" ? (
|
|
<div
|
|
className="absolute inset-0 flex items-center justify-center bg-background/60"
|
|
aria-label={labelEncoding}
|
|
>
|
|
<Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" aria-hidden />
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div className="flex min-w-0 flex-col text-[11.5px] leading-4">
|
|
<span className="truncate max-w-[14rem] font-medium" title={image.file.name}>
|
|
{image.file.name}
|
|
</span>
|
|
<span className="truncate text-muted-foreground">
|
|
{image.status === "error" && image.error
|
|
? formatError(image.error)
|
|
: sizeLabel}
|
|
</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
ref={registerRef}
|
|
onClick={onRemove}
|
|
onKeyDown={onKeyDown}
|
|
aria-label={labelRemove}
|
|
className={cn(
|
|
"ml-1 grid h-5 w-5 flex-none place-items-center rounded-full",
|
|
"text-muted-foreground/80 hover:bg-foreground/8 hover:text-foreground",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/30",
|
|
)}
|
|
>
|
|
<X className="h-3.5 w-3.5" aria-hidden />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|