feat: add CLI Apps settings MVP
This commit is contained in:
Xubin Ren
@@ -0,0 +1,148 @@
|
||||
import { useState } from "react";
|
||||
|
||||
import type { CliAppInfo } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export type CliAppMentionSegment =
|
||||
| { kind: "text"; text: string }
|
||||
| { kind: "cli"; text: string; app: CliAppInfo };
|
||||
|
||||
export function cliAppInitials(app: CliAppInfo): string {
|
||||
const value = app.display_name || app.name;
|
||||
return (
|
||||
value
|
||||
.split(/\s+/)
|
||||
.filter(Boolean)
|
||||
.slice(0, 2)
|
||||
.map((part) => part[0]?.toUpperCase())
|
||||
.join("") || app.name.slice(0, 2).toUpperCase()
|
||||
);
|
||||
}
|
||||
|
||||
export function splitCliAppMentionSegments(
|
||||
value: string,
|
||||
cliApps: CliAppInfo[],
|
||||
): CliAppMentionSegment[] {
|
||||
if (!value || cliApps.length === 0) return value ? [{ kind: "text", text: value }] : [];
|
||||
const appsByName = new Map(
|
||||
cliApps
|
||||
.filter((app) => app.installed)
|
||||
.map((app) => [app.name.toLowerCase(), app]),
|
||||
);
|
||||
if (appsByName.size === 0) return [{ kind: "text", text: value }];
|
||||
|
||||
const segments: CliAppMentionSegment[] = [];
|
||||
const mentionRe = /(^|[\s([{])@([a-z0-9_-]+)\b/gi;
|
||||
let cursor = 0;
|
||||
let match: RegExpExecArray | null;
|
||||
while ((match = mentionRe.exec(value)) !== null) {
|
||||
const prefix = match[1] ?? "";
|
||||
const name = match[2] ?? "";
|
||||
const app = appsByName.get(name.toLowerCase());
|
||||
if (!app) continue;
|
||||
|
||||
const mentionStart = match.index + prefix.length;
|
||||
const mentionEnd = mentionStart + name.length + 1;
|
||||
if (mentionStart > cursor) {
|
||||
segments.push({ kind: "text", text: value.slice(cursor, mentionStart) });
|
||||
}
|
||||
segments.push({ kind: "cli", text: value.slice(mentionStart, mentionEnd), app });
|
||||
cursor = mentionEnd;
|
||||
}
|
||||
if (cursor < value.length) {
|
||||
segments.push({ kind: "text", text: value.slice(cursor) });
|
||||
}
|
||||
return segments.length ? segments : [{ kind: "text", text: value }];
|
||||
}
|
||||
|
||||
export function CliAppMentionText({
|
||||
text,
|
||||
cliApps,
|
||||
}: {
|
||||
text: string;
|
||||
cliApps: CliAppInfo[];
|
||||
}) {
|
||||
const segments = splitCliAppMentionSegments(text, cliApps);
|
||||
if (!segments.some((segment) => segment.kind === "cli")) return <>{text}</>;
|
||||
return (
|
||||
<>
|
||||
{segments.map((segment, index) => {
|
||||
if (segment.kind === "text") {
|
||||
return <span key={`text-${index}`}>{segment.text}</span>;
|
||||
}
|
||||
return (
|
||||
<CliAppMentionToken
|
||||
key={`cli-${segment.app.name}-${index}`}
|
||||
app={segment.app}
|
||||
label={segment.text}
|
||||
variant="message"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function CliAppMentionToken({
|
||||
app,
|
||||
label,
|
||||
variant,
|
||||
isHero = false,
|
||||
}: {
|
||||
app: CliAppInfo;
|
||||
label: string;
|
||||
variant: "composer" | "message";
|
||||
isHero?: boolean;
|
||||
}) {
|
||||
const [failed, setFailed] = useState(false);
|
||||
const color = app.brand_color || "hsl(var(--primary))";
|
||||
const mentionName = label.startsWith("@") ? label.slice(1) : label;
|
||||
const showLogo = Boolean(app.logo_url) && !failed;
|
||||
const testIdPrefix = variant === "composer" ? "composer" : "message";
|
||||
|
||||
return (
|
||||
<span
|
||||
data-testid={`${testIdPrefix}-cli-mention-${app.name}`}
|
||||
className="relative inline transition-[color,text-shadow] duration-150"
|
||||
style={{
|
||||
color,
|
||||
textShadow: `0 0 10px ${alphaColor(color, 24)}`,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className={cn("relative inline-block", showLogo && "text-transparent")}
|
||||
style={{ lineHeight: "inherit" }}
|
||||
>
|
||||
@
|
||||
{showLogo ? (
|
||||
<span
|
||||
data-testid={`${testIdPrefix}-cli-mention-logo-${app.name}`}
|
||||
className={cn(
|
||||
"absolute left-1/2 top-1/2 grid place-items-center overflow-hidden rounded-[3px]",
|
||||
"-translate-x-1/2 -translate-y-1/2",
|
||||
isHero ? "h-[0.74em] w-[0.74em]" : "h-[0.72em] w-[0.72em]",
|
||||
)}
|
||||
>
|
||||
<img
|
||||
src={app.logo_url ?? ""}
|
||||
alt=""
|
||||
className="h-full w-full object-contain"
|
||||
onError={() => setFailed(true)}
|
||||
/>
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
{mentionName}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function alphaColor(color: string, percent: number): string {
|
||||
if (/^#[0-9a-f]{6}$/i.test(color)) {
|
||||
const alpha = Math.round((percent / 100) * 255)
|
||||
.toString(16)
|
||||
.padStart(2, "0");
|
||||
return `${color}${alpha}`;
|
||||
}
|
||||
return `color-mix(in srgb, ${color} ${percent}%, transparent)`;
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
type ReactNode,
|
||||
@@ -8,16 +9,18 @@ import {
|
||||
import { Check, ChevronRight, Copy, FileIcon, ImageIcon, PlaySquare, Sparkles, Wrench } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { CliAppMentionText } from "@/components/CliAppMentionText";
|
||||
import { ImageLightbox } from "@/components/ImageLightbox";
|
||||
import { MarkdownText, preloadMarkdownText } from "@/components/MarkdownText";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { formatTurnLatency } from "@/lib/format";
|
||||
import type { UIImage, UIMediaAttachment, UIMessage } from "@/lib/types";
|
||||
import type { CliAppInfo, UICliAppAttachment, UIImage, UIMediaAttachment, UIMessage } from "@/lib/types";
|
||||
|
||||
interface MessageBubbleProps {
|
||||
message: UIMessage;
|
||||
/** When false, hide the assistant reply copy button (mid-turn text before more agent activity). Default true. */
|
||||
showAssistantCopyAction?: boolean;
|
||||
cliApps?: CliAppInfo[];
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -32,11 +35,16 @@ interface MessageBubbleProps {
|
||||
export function MessageBubble({
|
||||
message,
|
||||
showAssistantCopyAction = true,
|
||||
cliApps = [],
|
||||
}: MessageBubbleProps) {
|
||||
const { t } = useTranslation();
|
||||
const [copied, setCopied] = useState(false);
|
||||
const copyResetRef = useRef<number | null>(null);
|
||||
const baseAnim = "animate-in fade-in-0 slide-in-from-bottom-1 duration-300";
|
||||
const mentionCliApps = useMemo(
|
||||
() => mergeCliMentionApps(cliApps, message.cliApps),
|
||||
[cliApps, message.cliApps],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
@@ -88,7 +96,7 @@ export function MessageBubble({
|
||||
"text-left text-[16px]/[1.75] whitespace-pre-wrap break-words",
|
||||
)}
|
||||
>
|
||||
{message.content}
|
||||
<CliAppMentionText text={message.content} cliApps={mentionCliApps} />
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
@@ -158,6 +166,36 @@ export function MessageBubble({
|
||||
);
|
||||
}
|
||||
|
||||
function mergeCliMentionApps(
|
||||
cliApps: CliAppInfo[],
|
||||
attachments: UICliAppAttachment[] | undefined,
|
||||
): CliAppInfo[] {
|
||||
if (!attachments?.length) return cliApps;
|
||||
const byName = new Map(cliApps.map((app) => [app.name.toLowerCase(), app]));
|
||||
for (const attachment of attachments) {
|
||||
const name = attachment.name?.trim();
|
||||
if (!name) continue;
|
||||
const existing = byName.get(name.toLowerCase());
|
||||
byName.set(name.toLowerCase(), {
|
||||
name,
|
||||
display_name: attachment.display_name || existing?.display_name || name,
|
||||
category: attachment.category || existing?.category || "cli",
|
||||
description: existing?.description || "",
|
||||
requires: existing?.requires || "",
|
||||
source: existing?.source || "attached",
|
||||
entry_point: attachment.entry_point || existing?.entry_point || "",
|
||||
install_supported: existing?.install_supported ?? true,
|
||||
installed: true,
|
||||
available: existing?.available ?? true,
|
||||
status: existing?.status || "installed",
|
||||
logo_url: attachment.logo_url ?? existing?.logo_url ?? null,
|
||||
brand_color: attachment.brand_color ?? existing?.brand_color ?? null,
|
||||
skill_installed: existing?.skill_installed ?? true,
|
||||
});
|
||||
}
|
||||
return Array.from(byName.values());
|
||||
}
|
||||
|
||||
function MessageMedia({
|
||||
media,
|
||||
align,
|
||||
|
||||
@@ -32,6 +32,8 @@ import {
|
||||
Loader2,
|
||||
LogOut,
|
||||
Moon,
|
||||
Package,
|
||||
PlayCircle,
|
||||
Orbit,
|
||||
Palette,
|
||||
Pencil,
|
||||
@@ -41,6 +43,7 @@ import {
|
||||
ShieldCheck,
|
||||
SlidersHorizontal,
|
||||
Sparkles,
|
||||
Trash2,
|
||||
Triangle,
|
||||
Waves,
|
||||
Zap,
|
||||
@@ -59,6 +62,8 @@ import {
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
fetchSettings,
|
||||
fetchCliApps,
|
||||
runCliAppAction,
|
||||
updateImageGenerationSettings,
|
||||
updateProviderSettings,
|
||||
updateSettings,
|
||||
@@ -67,6 +72,8 @@ import {
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useClient } from "@/providers/ClientProvider";
|
||||
import type {
|
||||
CliAppInfo,
|
||||
CliAppsPayload,
|
||||
ImageGenerationSettingsUpdate,
|
||||
SettingsPayload,
|
||||
WebSearchSettingsUpdate,
|
||||
@@ -79,6 +86,7 @@ type SettingsSectionKey =
|
||||
| "providers"
|
||||
| "image"
|
||||
| "web"
|
||||
| "cliApps"
|
||||
| "runtime"
|
||||
| "advanced";
|
||||
|
||||
@@ -89,6 +97,7 @@ interface LocalPreferences {
|
||||
density: LocalDensity;
|
||||
activityMode: LocalActivityMode;
|
||||
codeWrap: boolean;
|
||||
brandLogos: boolean;
|
||||
}
|
||||
|
||||
interface AgentSettingsDraft {
|
||||
@@ -110,6 +119,7 @@ const DEFAULT_LOCAL_PREFS: LocalPreferences = {
|
||||
density: "comfortable",
|
||||
activityMode: "auto",
|
||||
codeWrap: true,
|
||||
brandLogos: true,
|
||||
};
|
||||
|
||||
const LOCAL_UNCONFIGURED_PROVIDER_ORDER = new Map(
|
||||
@@ -146,6 +156,7 @@ function readLocalPreferences(): LocalPreferences {
|
||||
density: parsed.density === "compact" ? "compact" : "comfortable",
|
||||
activityMode: parsed.activityMode === "expanded" ? "expanded" : "auto",
|
||||
codeWrap: parsed.codeWrap !== false,
|
||||
brandLogos: parsed.brandLogos !== false,
|
||||
};
|
||||
} catch {
|
||||
return DEFAULT_LOCAL_PREFS;
|
||||
@@ -177,8 +188,11 @@ export function SettingsView({
|
||||
const { t } = useTranslation();
|
||||
const { token } = useClient();
|
||||
const [settings, setSettings] = useState<SettingsPayload | null>(null);
|
||||
const [cliApps, setCliApps] = useState<CliAppsPayload | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [cliAppsLoading, setCliAppsLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [cliAppsAction, setCliAppsAction] = useState<string | null>(null);
|
||||
const [providerSaving, setProviderSaving] = useState<string | null>(null);
|
||||
const [webSearchSaving, setWebSearchSaving] = useState(false);
|
||||
const [imageGenerationSaving, setImageGenerationSaving] = useState(false);
|
||||
@@ -186,6 +200,12 @@ export function SettingsView({
|
||||
const [activeSection, setActiveSection] = useState<SettingsSectionKey>("overview");
|
||||
const [expandedProvider, setExpandedProvider] = useState<string | null>(null);
|
||||
const [providerQuery, setProviderQuery] = useState("");
|
||||
const [cliAppsQuery, setCliAppsQuery] = useState("");
|
||||
const [cliAppsCategory, setCliAppsCategory] = useState("all");
|
||||
const [cliAppsInstallFilter, setCliAppsInstallFilter] = useState<"all" | "installed" | "notInstalled">("all");
|
||||
const [cliAppsMessage, setCliAppsMessage] = useState<string | null>(null);
|
||||
const [cliAppsError, setCliAppsError] = useState<string | null>(null);
|
||||
const [cliAppsFocusName, setCliAppsFocusName] = useState<string | null>(null);
|
||||
const [providerForms, setProviderForms] = useState<Record<string, { apiKey: string; apiBase: string }>>({});
|
||||
const [visibleProviderKeys, setVisibleProviderKeys] = useState<Record<string, boolean>>({});
|
||||
const [editingProviderKeys, setEditingProviderKeys] = useState<Record<string, boolean>>({});
|
||||
@@ -285,6 +305,27 @@ export function SettingsView({
|
||||
};
|
||||
}, [applyPayload, token]);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setCliAppsLoading(true);
|
||||
fetchCliApps(token)
|
||||
.then((payload) => {
|
||||
if (!cancelled) {
|
||||
setCliApps(payload);
|
||||
setCliAppsError(null);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
if (!cancelled) setCliAppsError((err as Error).message);
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setCliAppsLoading(false);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
window.localStorage.setItem(LOCAL_PREFS_STORAGE_KEY, JSON.stringify(localPrefs));
|
||||
@@ -574,6 +615,26 @@ export function SettingsView({
|
||||
});
|
||||
};
|
||||
|
||||
const handleCliAppAction = async (
|
||||
action: "install" | "update" | "uninstall" | "test",
|
||||
name: string,
|
||||
) => {
|
||||
const key = `${action}:${name}`;
|
||||
setCliAppsAction(key);
|
||||
setCliAppsMessage(null);
|
||||
setCliAppsError(null);
|
||||
try {
|
||||
const payload = await runCliAppAction(token, action, name);
|
||||
setCliApps(payload);
|
||||
setCliAppsMessage(payload.last_action?.message ?? null);
|
||||
setCliAppsFocusName(action === "uninstall" ? null : name);
|
||||
} catch (err) {
|
||||
setCliAppsError((err as Error).message);
|
||||
} finally {
|
||||
setCliAppsAction(null);
|
||||
}
|
||||
};
|
||||
|
||||
const renderSection = () => {
|
||||
if (!settings) return null;
|
||||
switch (activeSection) {
|
||||
@@ -618,6 +679,7 @@ export function SettingsView({
|
||||
editingProviderKeys={editingProviderKeys}
|
||||
providerSaving={providerSaving}
|
||||
query={providerQuery}
|
||||
showBrandLogos={localPrefs.brandLogos}
|
||||
onQueryChange={setProviderQuery}
|
||||
onToggleProvider={handleToggleProvider}
|
||||
onToggleProviderKey={toggleProviderKeyVisibility}
|
||||
@@ -677,6 +739,26 @@ export function SettingsView({
|
||||
requiresRestartPending={pendingRestartSections.web}
|
||||
/>
|
||||
);
|
||||
case "cliApps":
|
||||
return (
|
||||
<CliAppsSettings
|
||||
payload={cliApps}
|
||||
loading={cliAppsLoading}
|
||||
query={cliAppsQuery}
|
||||
category={cliAppsCategory}
|
||||
installFilter={cliAppsInstallFilter}
|
||||
actionKey={cliAppsAction}
|
||||
message={cliAppsMessage}
|
||||
error={cliAppsError}
|
||||
focusName={cliAppsFocusName}
|
||||
showBrandLogos={localPrefs.brandLogos}
|
||||
onQueryChange={setCliAppsQuery}
|
||||
onCategoryChange={setCliAppsCategory}
|
||||
onInstallFilterChange={setCliAppsInstallFilter}
|
||||
onAction={handleCliAppAction}
|
||||
onBackToChat={onBackToChat}
|
||||
/>
|
||||
);
|
||||
case "runtime":
|
||||
return (
|
||||
<RuntimeSettings
|
||||
@@ -752,6 +834,7 @@ const SETTINGS_NAV_ITEMS: Array<{ key: SettingsSectionKey; icon: LucideIcon; fal
|
||||
{ key: "providers", icon: KeyRound, fallback: "Providers" },
|
||||
{ key: "image", icon: ImageIcon, fallback: "Image" },
|
||||
{ key: "web", icon: Globe2, fallback: "Web" },
|
||||
{ key: "cliApps", icon: Package, fallback: "CLI Apps" },
|
||||
{ key: "runtime", icon: Server, fallback: "Runtime" },
|
||||
{ key: "advanced", icon: ShieldCheck, fallback: "Advanced" },
|
||||
];
|
||||
@@ -1077,6 +1160,16 @@ function AppearanceSettings({
|
||||
label={localPrefs.codeWrap ? tx("settings.values.on", "On") : tx("settings.values.off", "Off")}
|
||||
/>
|
||||
</SettingsRow>
|
||||
<SettingsRow
|
||||
title={tx("settings.rows.brandLogos", "Brand logos")}
|
||||
description={tx("settings.help.brandLogos", "Show third-party provider and CLI logos in Settings.")}
|
||||
>
|
||||
<ToggleButton
|
||||
checked={localPrefs.brandLogos}
|
||||
onChange={(brandLogos) => onChangeLocalPrefs((prev) => ({ ...prev, brandLogos }))}
|
||||
label={localPrefs.brandLogos ? tx("settings.values.on", "On") : tx("settings.values.off", "Off")}
|
||||
/>
|
||||
</SettingsRow>
|
||||
</SettingsGroup>
|
||||
</section>
|
||||
</div>
|
||||
@@ -1211,6 +1304,7 @@ function ProvidersSettings({
|
||||
editingProviderKeys,
|
||||
providerSaving,
|
||||
query,
|
||||
showBrandLogos,
|
||||
onQueryChange,
|
||||
onToggleProvider,
|
||||
onToggleProviderKey,
|
||||
@@ -1229,6 +1323,7 @@ function ProvidersSettings({
|
||||
editingProviderKeys: Record<string, boolean>;
|
||||
providerSaving: string | null;
|
||||
query: string;
|
||||
showBrandLogos: boolean;
|
||||
onQueryChange: (query: string) => void;
|
||||
onToggleProvider: (provider: string) => void;
|
||||
onToggleProviderKey: (provider: string) => void;
|
||||
@@ -1272,7 +1367,10 @@ function ProvidersSettings({
|
||||
className="flex min-h-[70px] w-full items-center justify-between gap-4 px-4 py-3 text-left transition-colors hover:bg-muted/35 sm:px-5"
|
||||
>
|
||||
<span className="flex min-w-0 items-center gap-3">
|
||||
<ProviderIcon provider={provider.name} />
|
||||
<ProviderIcon
|
||||
provider={provider.name}
|
||||
showBrandLogos={showBrandLogos}
|
||||
/>
|
||||
<span className="min-w-0">
|
||||
<span className="block truncate text-[15px] font-semibold leading-5 text-foreground">
|
||||
{provider.label}
|
||||
@@ -1437,6 +1535,7 @@ function ProvidersSettings({
|
||||
>
|
||||
{filteredUnconfigured.map(renderProviderRow)}
|
||||
</ProviderSection>
|
||||
<ThirdPartyBrandNotice />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1831,6 +1930,383 @@ function WebSettings({
|
||||
);
|
||||
}
|
||||
|
||||
function CliAppsSettings({
|
||||
payload,
|
||||
loading,
|
||||
query,
|
||||
category,
|
||||
installFilter,
|
||||
actionKey,
|
||||
message,
|
||||
error,
|
||||
focusName,
|
||||
showBrandLogos,
|
||||
onQueryChange,
|
||||
onCategoryChange,
|
||||
onInstallFilterChange,
|
||||
onAction,
|
||||
onBackToChat,
|
||||
}: {
|
||||
payload: CliAppsPayload | null;
|
||||
loading: boolean;
|
||||
query: string;
|
||||
category: string;
|
||||
installFilter: "all" | "installed" | "notInstalled";
|
||||
actionKey: string | null;
|
||||
message: string | null;
|
||||
error: string | null;
|
||||
focusName: string | null;
|
||||
showBrandLogos: boolean;
|
||||
onQueryChange: (value: string) => void;
|
||||
onCategoryChange: (value: string) => void;
|
||||
onInstallFilterChange: (value: "all" | "installed" | "notInstalled") => void;
|
||||
onAction: (action: "install" | "update" | "uninstall" | "test", name: string) => void;
|
||||
onBackToChat: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const tx = (key: string, fallback: string) => t(key, { defaultValue: fallback });
|
||||
const apps = payload?.apps ?? [];
|
||||
const categories = useMemo(
|
||||
() => ["all", ...Array.from(new Set(apps.map((app) => app.category))).sort()],
|
||||
[apps],
|
||||
);
|
||||
const normalizedQuery = query.trim().toLowerCase();
|
||||
const filteredApps = apps.filter((app) => {
|
||||
const categoryMatch = category === "all" || app.category === category;
|
||||
if (!categoryMatch) return false;
|
||||
if (installFilter === "installed" && !app.installed) return false;
|
||||
if (installFilter === "notInstalled" && app.installed) return false;
|
||||
if (!normalizedQuery) return true;
|
||||
return (
|
||||
app.display_name.toLowerCase().includes(normalizedQuery) ||
|
||||
app.name.toLowerCase().includes(normalizedQuery) ||
|
||||
app.description.toLowerCase().includes(normalizedQuery) ||
|
||||
app.category.toLowerCase().includes(normalizedQuery)
|
||||
);
|
||||
});
|
||||
const categoryLabel =
|
||||
category === "all"
|
||||
? tx("settings.cliApps.allCategories", "All categories")
|
||||
: category;
|
||||
const installFilterOptions = [
|
||||
{ value: "all", label: tx("settings.cliApps.filterAll", "All") },
|
||||
{ value: "installed", label: tx("settings.cliApps.filterInstalled", "Installed CLIs") },
|
||||
{ value: "notInstalled", label: tx("settings.cliApps.filterNotInstalled", "Not installed") },
|
||||
];
|
||||
const focusedApp = focusName
|
||||
? apps.find((app) => app.name === focusName && app.installed)
|
||||
: null;
|
||||
const visibleStatusMessage = error || (!focusedApp ? message : null);
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<section className="space-y-4">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div>
|
||||
<SettingsSectionTitle>{tx("settings.sections.cliApps", "CLI Apps")}</SettingsSectionTitle>
|
||||
<p className="mt-1 text-[13px] text-muted-foreground">
|
||||
{tx("settings.cliApps.summary", "{{installed}} of {{total}} CLIs installed")
|
||||
.replace("{{installed}}", String(payload?.installed_count ?? 0))
|
||||
.replace("{{total}}", String(apps.length))}
|
||||
</p>
|
||||
</div>
|
||||
<SegmentedControl
|
||||
value={installFilter}
|
||||
options={installFilterOptions}
|
||||
onChange={(value) => onInstallFilterChange(value as "all" | "installed" | "notInstalled")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="relative flex-1">
|
||||
<Search className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" aria-hidden />
|
||||
<Input
|
||||
value={query}
|
||||
onChange={(event) => onQueryChange(event.target.value)}
|
||||
placeholder={tx("settings.cliApps.searchPlaceholder", "Search CLIs")}
|
||||
className="h-10 w-full rounded-full border-border/65 bg-card/80 pl-9 text-[13px] shadow-sm sm:max-w-[320px]"
|
||||
/>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="h-10 justify-between rounded-full bg-card/80 px-4">
|
||||
<span className="max-w-[180px] truncate">{categoryLabel}</span>
|
||||
<ChevronDown className="ml-2 h-3.5 w-3.5" aria-hidden />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="max-h-[320px] overflow-y-auto">
|
||||
{categories.map((item) => (
|
||||
<DropdownMenuItem key={item} onClick={() => onCategoryChange(item)}>
|
||||
{item === "all" ? tx("settings.cliApps.allCategories", "All categories") : item}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{visibleStatusMessage ? (
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-[10px] border px-3.5 py-2.5 text-[12.5px]",
|
||||
error
|
||||
? "border-destructive/20 bg-destructive/5 text-destructive"
|
||||
: "border-border/55 bg-muted/35 text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{visibleStatusMessage}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{focusedApp ? (
|
||||
<CliAppReadyPanel
|
||||
app={focusedApp}
|
||||
showBrandLogos={showBrandLogos}
|
||||
onBackToChat={onBackToChat}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{loading ? (
|
||||
<div className="flex h-36 items-center justify-center rounded-[8px] border border-border/45 bg-card/82 text-sm text-muted-foreground">
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden />
|
||||
{tx("settings.cliApps.loading", "Loading CLI Apps...")}
|
||||
</div>
|
||||
) : (
|
||||
<section>
|
||||
<div className="grid gap-2">
|
||||
{filteredApps.map((app) => (
|
||||
<CliAppCard
|
||||
key={app.name}
|
||||
app={app}
|
||||
actionKey={actionKey}
|
||||
showBrandLogos={showBrandLogos}
|
||||
onAction={onAction}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{!filteredApps.length ? (
|
||||
<div className="rounded-[8px] border border-border/45 bg-card/82 px-4 py-8 text-center text-sm text-muted-foreground">
|
||||
{tx("settings.cliApps.empty", "No CLI Apps match this filter.")}
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
)}
|
||||
<ThirdPartyBrandNotice />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CliAppReadyPanel({
|
||||
app,
|
||||
showBrandLogos,
|
||||
onBackToChat,
|
||||
}: {
|
||||
app: CliAppInfo;
|
||||
showBrandLogos: boolean;
|
||||
onBackToChat: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [copied, setCopied] = useState(false);
|
||||
const prompt = t("settings.cliApps.readyPrompt", {
|
||||
name: app.name,
|
||||
defaultValue: "Use @{{name}} to inspect what this CLI can do.",
|
||||
});
|
||||
const copyPrompt = () => {
|
||||
if (!navigator.clipboard) return;
|
||||
void navigator.clipboard.writeText(prompt).then(() => {
|
||||
setCopied(true);
|
||||
window.setTimeout(() => setCopied(false), 1400);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
className={cn(
|
||||
"rounded-[12px] border border-border/55 bg-card/88 px-4 py-3",
|
||||
"shadow-[0_8px_26px_rgba(15,23,42,0.055)]",
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||
<CliAppLogo app={app} showBrandLogos={showBrandLogos} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex min-w-0 flex-wrap items-center gap-2">
|
||||
<h3 className="truncate text-[14px] font-semibold leading-5 text-foreground">
|
||||
{app.display_name}
|
||||
</h3>
|
||||
<span className="inline-flex shrink-0 items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[10.5px] font-medium text-muted-foreground">
|
||||
<Check className="h-3 w-3 text-emerald-600 dark:text-emerald-300" aria-hidden />
|
||||
{t("settings.cliApps.readyStatus", { defaultValue: "Ready" })}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-0.5 flex min-w-0 flex-wrap items-center gap-1.5 text-[12px] text-muted-foreground">
|
||||
<span className="font-mono">@{app.name}</span>
|
||||
<span aria-hidden>·</span>
|
||||
<span className="truncate font-mono">{app.entry_point || app.name}</span>
|
||||
<span aria-hidden>·</span>
|
||||
<span>{app.category}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 flex-wrap gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={copyPrompt}
|
||||
className="h-8 rounded-full px-3 text-[12px] font-medium text-muted-foreground hover:bg-muted/65 hover:text-foreground"
|
||||
>
|
||||
{copied ? <Check className="mr-1.5 h-3.5 w-3.5" aria-hidden /> : null}
|
||||
{copied
|
||||
? t("settings.cliApps.readyCopied", { defaultValue: "Copied" })
|
||||
: t("settings.cliApps.readyTry", { name: app.name, defaultValue: "Try @{{name}}" })}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={onBackToChat}
|
||||
className="h-8 rounded-full px-3 text-[12px] font-semibold"
|
||||
>
|
||||
{t("settings.cliApps.openChat", { defaultValue: "Open chat" })}
|
||||
<ChevronRight className="ml-1.5 h-3.5 w-3.5" aria-hidden />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CliAppCard({
|
||||
app,
|
||||
actionKey,
|
||||
showBrandLogos,
|
||||
onAction,
|
||||
}: {
|
||||
app: CliAppInfo;
|
||||
actionKey: string | null;
|
||||
showBrandLogos: boolean;
|
||||
onAction: (action: "install" | "update" | "uninstall" | "test", name: string) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const tx = (key: string, fallback: string) => t(key, { defaultValue: fallback });
|
||||
const installBusy = actionKey === `install:${app.name}`;
|
||||
const updateBusy = actionKey === `update:${app.name}`;
|
||||
const uninstallBusy = actionKey === `uninstall:${app.name}`;
|
||||
const testBusy = actionKey === `test:${app.name}`;
|
||||
const busy = installBusy || updateBusy || uninstallBusy || testBusy;
|
||||
|
||||
return (
|
||||
<article className="flex min-w-0 items-center gap-3 rounded-[8px] border border-border/45 bg-card/82 px-4 py-3 shadow-[0_6px_22px_rgba(15,23,42,0.045)]">
|
||||
<CliAppLogo app={app} showBrandLogos={showBrandLogos} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex min-w-0 items-baseline gap-2">
|
||||
<h3 className="truncate text-[14px] font-semibold leading-5 text-foreground">
|
||||
{app.display_name}
|
||||
</h3>
|
||||
<span className="shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10.5px] font-medium text-muted-foreground">
|
||||
{app.category}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-0.5 truncate text-[12px] text-muted-foreground">
|
||||
{app.entry_point || app.name}
|
||||
</div>
|
||||
<p className="mt-1 truncate text-[12px] leading-5 text-muted-foreground">
|
||||
{app.requires
|
||||
? `${tx("settings.cliApps.requires", "Requires")}: ${app.requires}`
|
||||
: app.description || tx("settings.cliApps.noDescription", "No description available.")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="shrink-0">
|
||||
{app.installed ? (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={busy}
|
||||
className="h-8 rounded-full border-emerald-500/20 bg-emerald-500/10 px-3 text-[12px] font-semibold text-emerald-700 hover:bg-emerald-500/12 dark:text-emerald-300"
|
||||
>
|
||||
{busy ? <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" aria-hidden /> : <Check className="mr-1.5 h-3.5 w-3.5" aria-hidden />}
|
||||
{tx("settings.cliApps.statusInstalled", "CLI installed")}
|
||||
<ChevronDown className="ml-1.5 h-3 w-3" aria-hidden />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem disabled={busy} onClick={() => onAction("test", app.name)}>
|
||||
<PlayCircle className="mr-2 h-3.5 w-3.5" aria-hidden />
|
||||
{tx("settings.cliApps.test", "Test CLI")}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem disabled={busy} onClick={() => onAction("update", app.name)}>
|
||||
<RotateCcw className="mr-2 h-3.5 w-3.5" aria-hidden />
|
||||
{tx("settings.cliApps.update", "Update CLI")}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem disabled={busy} onClick={() => onAction("uninstall", app.name)}>
|
||||
<Trash2 className="mr-2 h-3.5 w-3.5" aria-hidden />
|
||||
{tx("settings.cliApps.uninstall", "Uninstall CLI")}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
) : app.install_supported ? (
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={busy}
|
||||
onClick={() => onAction("install", app.name)}
|
||||
className="h-8 rounded-full px-4 text-[12px] font-semibold"
|
||||
>
|
||||
{installBusy ? <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" aria-hidden /> : null}
|
||||
{tx("settings.cliApps.install", "Install CLI")}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled
|
||||
className="h-8 rounded-full px-3 text-[12px] font-semibold"
|
||||
>
|
||||
{tx("settings.cliApps.unavailable", "Unavailable")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function CliAppLogo({ app, showBrandLogos }: { app: CliAppInfo; showBrandLogos: boolean }) {
|
||||
const [failed, setFailed] = useState(false);
|
||||
const bg = app.brand_color || "hsl(var(--muted))";
|
||||
const initials = app.display_name
|
||||
.split(/\s+/)
|
||||
.filter(Boolean)
|
||||
.slice(0, 2)
|
||||
.map((part) => part[0]?.toUpperCase())
|
||||
.join("") || app.name.slice(0, 2).toUpperCase();
|
||||
if (showBrandLogos && app.logo_url && !failed) {
|
||||
return (
|
||||
<span
|
||||
className="grid h-11 w-11 shrink-0 place-items-center rounded-[8px] border border-border/45 bg-background"
|
||||
style={{ boxShadow: `inset 0 0 0 1px ${app.brand_color ?? "transparent"}22` }}
|
||||
>
|
||||
<img
|
||||
src={app.logo_url}
|
||||
alt=""
|
||||
className="h-6 w-6 object-contain"
|
||||
onError={() => setFailed(true)}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span
|
||||
className="grid h-11 w-11 shrink-0 place-items-center rounded-[8px] text-[13px] font-semibold text-white"
|
||||
style={{ backgroundColor: bg }}
|
||||
>
|
||||
{initials}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function RuntimeSettings({
|
||||
form,
|
||||
setForm,
|
||||
@@ -2079,6 +2555,18 @@ function ByokEmptyState({ children }: { children: ReactNode }) {
|
||||
);
|
||||
}
|
||||
|
||||
function ThirdPartyBrandNotice() {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<p className="px-1 text-[11.5px] leading-5 text-muted-foreground/75">
|
||||
{t("settings.legal.thirdPartyBrands", {
|
||||
defaultValue:
|
||||
"Product names, logos, and brands are property of their respective owners. Use is for identification only and does not imply endorsement.",
|
||||
})}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
function orderUnconfiguredProviders(
|
||||
providers: SettingsPayload["providers"],
|
||||
): SettingsPayload["providers"] {
|
||||
@@ -2126,6 +2614,63 @@ function providerLabel(
|
||||
return providers.find((provider) => provider.name === value)?.label ?? value;
|
||||
}
|
||||
|
||||
interface ProviderBrand {
|
||||
logoUrl: string;
|
||||
color: string;
|
||||
initials: string;
|
||||
}
|
||||
|
||||
function faviconUrl(domain: string): string {
|
||||
return `https://www.google.com/s2/favicons?domain=${domain}&sz=64`;
|
||||
}
|
||||
|
||||
const PROVIDER_BRAND_ALIASES: Record<string, string> = {
|
||||
byteplus_coding_plan: "byteplus",
|
||||
minimax_anthropic: "minimax",
|
||||
openai_codex: "openai",
|
||||
volcengine_coding_plan: "volcengine",
|
||||
};
|
||||
|
||||
const PROVIDER_BRANDS: Record<string, ProviderBrand> = {
|
||||
aihubmix: { logoUrl: faviconUrl("aihubmix.com"), color: "#111827", initials: "AH" },
|
||||
ant_ling: { logoUrl: faviconUrl("ant-ling.com"), color: "#7C3AED", initials: "AL" },
|
||||
anthropic: { logoUrl: faviconUrl("anthropic.com"), color: "#D97757", initials: "A" },
|
||||
atomic_chat: { logoUrl: faviconUrl("atomic.chat"), color: "#111827", initials: "AC" },
|
||||
azure_openai: { logoUrl: faviconUrl("azure.microsoft.com"), color: "#0078D4", initials: "AZ" },
|
||||
bedrock: { logoUrl: faviconUrl("aws.amazon.com"), color: "#FF9900", initials: "AWS" },
|
||||
byteplus: { logoUrl: faviconUrl("byteplus.com"), color: "#325CFF", initials: "BP" },
|
||||
dashscope: { logoUrl: faviconUrl("dashscope.aliyun.com"), color: "#FF6A00", initials: "DS" },
|
||||
deepseek: { logoUrl: faviconUrl("deepseek.com"), color: "#4D6BFE", initials: "DS" },
|
||||
gemini: { logoUrl: faviconUrl("gemini.google.com"), color: "#4285F4", initials: "G" },
|
||||
github_copilot: { logoUrl: faviconUrl("github.com"), color: "#24292F", initials: "GH" },
|
||||
groq: { logoUrl: faviconUrl("groq.com"), color: "#F55036", initials: "GQ" },
|
||||
huggingface: { logoUrl: faviconUrl("huggingface.co"), color: "#FF9D00", initials: "HF" },
|
||||
lm_studio: { logoUrl: faviconUrl("lmstudio.ai"), color: "#111827", initials: "LM" },
|
||||
longcat: { logoUrl: faviconUrl("longcat.chat"), color: "#111827", initials: "LC" },
|
||||
minimax: { logoUrl: faviconUrl("minimax.io"), color: "#111827", initials: "MM" },
|
||||
mistral: { logoUrl: faviconUrl("mistral.ai"), color: "#FA520F", initials: "M" },
|
||||
moonshot: { logoUrl: faviconUrl("moonshot.ai"), color: "#111827", initials: "MS" },
|
||||
novita: { logoUrl: faviconUrl("novita.ai"), color: "#7C3AED", initials: "N" },
|
||||
nvidia: { logoUrl: faviconUrl("nvidia.com"), color: "#76B900", initials: "NV" },
|
||||
ollama: { logoUrl: faviconUrl("ollama.com"), color: "#111827", initials: "O" },
|
||||
openai: { logoUrl: faviconUrl("openai.com"), color: "#111827", initials: "AI" },
|
||||
openrouter: { logoUrl: faviconUrl("openrouter.ai"), color: "#111827", initials: "OR" },
|
||||
ovms: { logoUrl: faviconUrl("openvino.ai"), color: "#0071C5", initials: "OV" },
|
||||
qianfan: { logoUrl: faviconUrl("cloud.baidu.com"), color: "#2932E1", initials: "QF" },
|
||||
siliconflow: { logoUrl: faviconUrl("siliconflow.cn"), color: "#111827", initials: "SF" },
|
||||
skywork: { logoUrl: faviconUrl("skywork.ai"), color: "#5B5BF6", initials: "SW" },
|
||||
stepfun: { logoUrl: faviconUrl("stepfun.com"), color: "#2F6BFF", initials: "SF" },
|
||||
volcengine: { logoUrl: faviconUrl("volcengine.com"), color: "#1664FF", initials: "VE" },
|
||||
vllm: { logoUrl: faviconUrl("vllm.ai"), color: "#2563EB", initials: "VL" },
|
||||
xiaomi_mimo: { logoUrl: faviconUrl("xiaomimimo.com"), color: "#FF6900", initials: "MI" },
|
||||
zhipu: { logoUrl: faviconUrl("bigmodel.cn"), color: "#155EEF", initials: "Z" },
|
||||
};
|
||||
|
||||
function providerBrand(provider: string): ProviderBrand | null {
|
||||
const key = PROVIDER_BRAND_ALIASES[provider] ?? provider;
|
||||
return PROVIDER_BRANDS[key] ?? null;
|
||||
}
|
||||
|
||||
const PROVIDER_ICONS: Record<string, LucideIcon> = {
|
||||
custom: Hexagon,
|
||||
openrouter: Sparkles,
|
||||
@@ -2160,8 +2705,44 @@ const PROVIDER_ICONS: Record<string, LucideIcon> = {
|
||||
nvidia: Zap,
|
||||
};
|
||||
|
||||
function ProviderIcon({ provider }: { provider: string }) {
|
||||
function ProviderIcon({
|
||||
provider,
|
||||
showBrandLogos,
|
||||
}: {
|
||||
provider: string;
|
||||
showBrandLogos: boolean;
|
||||
}) {
|
||||
const [failed, setFailed] = useState(false);
|
||||
const brand = providerBrand(provider);
|
||||
const Icon = PROVIDER_ICONS[provider] ?? Hexagon;
|
||||
if (showBrandLogos && brand?.logoUrl && !failed) {
|
||||
return (
|
||||
<span
|
||||
data-testid={`provider-logo-${provider}`}
|
||||
className="grid h-10 w-10 shrink-0 place-items-center overflow-hidden rounded-[14px] border border-border/45 bg-background shadow-[inset_0_0_0_1px_rgba(0,0,0,0.025)]"
|
||||
style={{ boxShadow: `inset 0 0 0 1px ${brand.color}22` }}
|
||||
>
|
||||
<img
|
||||
src={brand.logoUrl}
|
||||
alt=""
|
||||
className="h-6 w-6 object-contain"
|
||||
onError={() => setFailed(true)}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (showBrandLogos && brand) {
|
||||
return (
|
||||
<span
|
||||
data-testid={`provider-logo-fallback-${provider}`}
|
||||
className="grid h-10 w-10 shrink-0 place-items-center rounded-[14px] text-[11px] font-semibold text-white shadow-[inset_0_0_0_1px_rgba(255,255,255,0.18)]"
|
||||
style={{ backgroundColor: brand.color }}
|
||||
aria-hidden
|
||||
>
|
||||
{brand.initials}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span className="grid h-10 w-10 shrink-0 place-items-center rounded-2xl bg-muted text-foreground/82 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.025)] dark:bg-muted/70">
|
||||
<Icon className="h-5 w-5" strokeWidth={2} aria-hidden />
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
||||
import { AlertCircle, ChevronRight, Layers } from "lucide-react";
|
||||
import { AlertCircle, ChevronRight, Layers, Terminal } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { cliAppInitials } from "@/components/CliAppMentionText";
|
||||
import { FileReferenceChip } from "@/components/FileReferenceChip";
|
||||
import { ReasoningBubble, StreamingLabelSheen, TraceGroup } from "@/components/MessageBubble";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { UIFileEdit, UIMessage } from "@/lib/types";
|
||||
import type { CliAppInfo, ToolProgressEvent, UIFileEdit, UIMessage } from "@/lib/types";
|
||||
|
||||
/** Scrollport height for the Cursor-style “live trace” strip (tailwind spacing). */
|
||||
const CLUSTER_SCROLL_MAX_CLASS = "max-h-52";
|
||||
@@ -24,6 +25,7 @@ export function isAgentActivityMember(m: UIMessage): boolean {
|
||||
interface ActivityCounts {
|
||||
reasoningSteps: number;
|
||||
toolCalls: number;
|
||||
cliCount: number;
|
||||
fileCount: number;
|
||||
added: number;
|
||||
deleted: number;
|
||||
@@ -32,6 +34,8 @@ interface ActivityCounts {
|
||||
hasFailedFiles: boolean;
|
||||
primaryFilePath?: string;
|
||||
primaryFileTooltipPath?: string;
|
||||
primaryCliName?: string;
|
||||
primaryCliStatus?: CliRunStatus;
|
||||
}
|
||||
|
||||
interface FileEditSummary {
|
||||
@@ -47,17 +51,41 @@ interface FileEditSummary {
|
||||
error?: string;
|
||||
}
|
||||
|
||||
function countActivity(messages: UIMessage[], fileEdits: FileEditSummary[]): ActivityCounts {
|
||||
interface CliRunSummary {
|
||||
key: string;
|
||||
name: string;
|
||||
args: string[];
|
||||
json: boolean;
|
||||
workingDir?: string;
|
||||
status: CliRunStatus;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
type CliRunStatus = "running" | "done" | "error";
|
||||
|
||||
function countActivity(
|
||||
messages: UIMessage[],
|
||||
fileEdits: FileEditSummary[],
|
||||
cliRuns: CliRunSummary[],
|
||||
): ActivityCounts {
|
||||
let reasoningSteps = 0;
|
||||
let toolCalls = 0;
|
||||
const cliCount = cliRuns.length;
|
||||
const primaryCli = cliRuns[cliRuns.length - 1];
|
||||
const primaryCliName = primaryCli?.name;
|
||||
const primaryCliStatus = primaryCli?.status;
|
||||
for (const m of messages) {
|
||||
if (isReasoningOnlyAssistant(m)) {
|
||||
reasoningSteps += 1;
|
||||
continue;
|
||||
}
|
||||
if (m.kind === "trace") {
|
||||
const lines = m.traces?.length ?? (m.content.trim() ? 1 : 0);
|
||||
toolCalls += lines;
|
||||
const lines = traceLines(m);
|
||||
for (const line of lines) {
|
||||
if (!isCliRunTraceLine(line)) {
|
||||
toolCalls += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
let added = 0;
|
||||
@@ -89,6 +117,7 @@ function countActivity(messages: UIMessage[], fileEdits: FileEditSummary[]): Act
|
||||
return {
|
||||
reasoningSteps,
|
||||
toolCalls,
|
||||
cliCount,
|
||||
fileCount: fileEdits.length,
|
||||
added,
|
||||
deleted,
|
||||
@@ -97,6 +126,8 @@ function countActivity(messages: UIMessage[], fileEdits: FileEditSummary[]): Act
|
||||
hasFailedFiles: fileEdits.length > 0 && failedFileCount === fileEdits.length,
|
||||
primaryFilePath,
|
||||
primaryFileTooltipPath,
|
||||
primaryCliName,
|
||||
primaryCliStatus,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -105,6 +136,7 @@ interface AgentActivityClusterProps {
|
||||
/** True while the session turn is still running (drives “Working…” copy + header sheen). */
|
||||
isTurnStreaming: boolean;
|
||||
hasBodyBelow: boolean;
|
||||
cliApps?: CliAppInfo[];
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -115,15 +147,22 @@ export function AgentActivityCluster({
|
||||
messages,
|
||||
isTurnStreaming,
|
||||
hasBodyBelow,
|
||||
cliApps = [],
|
||||
}: AgentActivityClusterProps) {
|
||||
const { t } = useTranslation();
|
||||
const fileEdits = useMemo(
|
||||
() => summarizeFileEdits(collectFileEdits(messages), isTurnStreaming),
|
||||
[messages, isTurnStreaming],
|
||||
);
|
||||
const cliRuns = useMemo(() => collectCliRuns(messages), [messages]);
|
||||
const cliAppsByName = useMemo(
|
||||
() => new Map(cliApps.map((app) => [app.name.toLowerCase(), app])),
|
||||
[cliApps],
|
||||
);
|
||||
const {
|
||||
reasoningSteps,
|
||||
toolCalls,
|
||||
cliCount,
|
||||
fileCount,
|
||||
added,
|
||||
deleted,
|
||||
@@ -132,7 +171,9 @@ export function AgentActivityCluster({
|
||||
hasFailedFiles,
|
||||
primaryFilePath,
|
||||
primaryFileTooltipPath,
|
||||
} = countActivity(messages, fileEdits);
|
||||
primaryCliName,
|
||||
primaryCliStatus,
|
||||
} = countActivity(messages, fileEdits, cliRuns);
|
||||
const hasPendingFileEdit = fileEdits.some((edit) => edit.pending);
|
||||
|
||||
const [userToggledOuter, setUserToggledOuter] = useState(false);
|
||||
@@ -148,7 +189,7 @@ export function AgentActivityCluster({
|
||||
const headerBusy = fileCount > 0 ? hasEditingFiles : isTurnStreaming;
|
||||
const singleFilePath = fileCount === 1 ? primaryFilePath : undefined;
|
||||
const singleFileTooltipPath = fileCount === 1 ? primaryFileTooltipPath : undefined;
|
||||
const hasVisibleActivity = reasoningSteps > 0 || toolCalls > 0 || fileCount > 0;
|
||||
const hasVisibleActivity = reasoningSteps > 0 || toolCalls > 0 || cliCount > 0 || fileCount > 0;
|
||||
|
||||
const fileActivitySummary = fileCount > 0
|
||||
? hasPendingFileEdit && !singleFilePath
|
||||
@@ -164,8 +205,22 @@ export function AgentActivityCluster({
|
||||
})
|
||||
: "";
|
||||
|
||||
const cliActivitySummary = cliCount > 0
|
||||
? cliCount === 1 && primaryCliName
|
||||
? t(cliActivitySummaryKey(primaryCliStatus, isTurnStreaming), {
|
||||
name: primaryCliName,
|
||||
defaultValue: cliActivitySummaryDefault(primaryCliStatus, isTurnStreaming),
|
||||
})
|
||||
: t(cliActivityManySummaryKey(cliRuns, isTurnStreaming), {
|
||||
count: cliCount,
|
||||
defaultValue: cliActivityManySummaryDefault(cliRuns, isTurnStreaming),
|
||||
})
|
||||
: "";
|
||||
|
||||
const summary = fileCount > 0
|
||||
? fileActivitySummary
|
||||
: cliCount > 0
|
||||
? cliActivitySummary
|
||||
: isTurnStreaming
|
||||
? reasoningSteps > 0
|
||||
? t("message.agentActivityLiveSummary", {
|
||||
@@ -254,6 +309,8 @@ export function AgentActivityCluster({
|
||||
|
||||
if (!hasVisibleActivity) return null;
|
||||
|
||||
const HeaderIcon = cliCount > 0 && fileCount === 0 && toolCalls === 0 ? Terminal : Layers;
|
||||
|
||||
return (
|
||||
<div className={cn("w-full", hasBodyBelow && "mb-2")}>
|
||||
<button
|
||||
@@ -266,7 +323,7 @@ export function AgentActivityCluster({
|
||||
aria-expanded={outerExpanded}
|
||||
aria-label={summary}
|
||||
>
|
||||
<Layers className="h-3.5 w-3.5 shrink-0" aria-hidden />
|
||||
<HeaderIcon className="h-3.5 w-3.5 shrink-0" aria-hidden />
|
||||
<span className="flex min-w-0 flex-1 flex-wrap items-center gap-x-1.5 gap-y-0.5 text-left">
|
||||
{singleFilePath ? (
|
||||
<span className="inline-flex min-w-0 items-center gap-1.5">
|
||||
@@ -337,15 +394,25 @@ export function AgentActivityCluster({
|
||||
);
|
||||
}
|
||||
if (m.kind === "trace") {
|
||||
const hasTraceLines = (m.traces?.length ?? 0) > 0 || m.content.trim().length > 0;
|
||||
return hasTraceLines ? (
|
||||
const normalLines = traceLines(m).filter((line) => !parseCliRunTrace(line));
|
||||
return normalLines.length > 0 ? (
|
||||
<div key={m.id} className="flex flex-col gap-1">
|
||||
<TraceGroup message={m} animClass="" />
|
||||
<TraceGroup
|
||||
message={{
|
||||
...m,
|
||||
traces: normalLines,
|
||||
content: normalLines[normalLines.length - 1],
|
||||
}}
|
||||
animClass=""
|
||||
/>
|
||||
</div>
|
||||
) : null;
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
{cliRuns.length ? (
|
||||
<CliRunGroup runs={cliRuns} active={isTurnStreaming} cliAppsByName={cliAppsByName} />
|
||||
) : null}
|
||||
{fileEdits.length ? <FileEditGroup edits={fileEdits} /> : null}
|
||||
</div>
|
||||
</div>
|
||||
@@ -359,6 +426,181 @@ function shortFileName(path: string): string {
|
||||
return path.split(/[\\/]/).pop() || path;
|
||||
}
|
||||
|
||||
function traceLines(message: UIMessage): string[] {
|
||||
if (message.traces?.length) return message.traces;
|
||||
return message.content.trim() ? [message.content] : [];
|
||||
}
|
||||
|
||||
const CLI_RUN_TOOL_NAMES = new Set(["run_cli_app", "cli_anything_run"]);
|
||||
const CLI_RUN_STATUS_RANK: Record<CliRunStatus, number> = { running: 1, done: 2, error: 3 };
|
||||
|
||||
function isCliRunTraceLine(line: string): boolean {
|
||||
return /^(run_cli_app|cli_anything_run)\(/.test(line.trim());
|
||||
}
|
||||
|
||||
function parseCliRunTrace(line: string, status: CliRunStatus = "running"): CliRunSummary | null {
|
||||
const match = /^(run_cli_app|cli_anything_run)\((.*)\)$/.exec(line.trim());
|
||||
if (!match) return null;
|
||||
const argsText = match[2].trim();
|
||||
let argsObject: unknown = {};
|
||||
if (argsText) {
|
||||
try {
|
||||
argsObject = JSON.parse(argsText);
|
||||
} catch {
|
||||
return {
|
||||
key: line,
|
||||
name: "cli",
|
||||
args: [argsText],
|
||||
json: false,
|
||||
status,
|
||||
};
|
||||
}
|
||||
}
|
||||
return cliRunFromArguments(argsObject, { key: line, status });
|
||||
}
|
||||
|
||||
function parseToolEventArguments(event: ToolProgressEvent): unknown {
|
||||
const fnArgs = (event as { function?: { arguments?: unknown } }).function?.arguments;
|
||||
const raw = fnArgs ?? event.arguments;
|
||||
if (typeof raw !== "string") return raw ?? {};
|
||||
if (!raw.trim()) return {};
|
||||
try {
|
||||
return JSON.parse(raw);
|
||||
} catch {
|
||||
return { args: [raw] };
|
||||
}
|
||||
}
|
||||
|
||||
function cliRunStatusFromPhase(phase: unknown): CliRunStatus {
|
||||
if (phase === "error") return "error";
|
||||
if (phase === "end") return "done";
|
||||
return "running";
|
||||
}
|
||||
|
||||
function cliRunError(event: ToolProgressEvent): string | undefined {
|
||||
const error = event.error;
|
||||
if (typeof error === "string") return error;
|
||||
if (error && typeof error === "object") return JSON.stringify(error);
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function cliRunFromArguments(
|
||||
argsObject: unknown,
|
||||
options: { key: string; status: CliRunStatus; error?: string },
|
||||
): CliRunSummary {
|
||||
if (!argsObject || typeof argsObject !== "object" || Array.isArray(argsObject)) {
|
||||
return {
|
||||
key: options.key,
|
||||
name: "cli",
|
||||
args: [],
|
||||
json: false,
|
||||
status: options.status,
|
||||
error: options.error,
|
||||
};
|
||||
}
|
||||
const record = argsObject as Record<string, unknown>;
|
||||
const appName = typeof record.name === "string" && record.name.trim()
|
||||
? record.name.trim()
|
||||
: "cli";
|
||||
const rawArgs = Array.isArray(record.args) ? record.args : [];
|
||||
const cliArgs = rawArgs.filter((item): item is string => typeof item === "string");
|
||||
return {
|
||||
key: options.key,
|
||||
name: appName,
|
||||
args: cliArgs,
|
||||
json: record.json === true || record.json === "true",
|
||||
workingDir: typeof record.working_dir === "string" ? record.working_dir : undefined,
|
||||
status: options.status,
|
||||
error: options.error,
|
||||
};
|
||||
}
|
||||
|
||||
function cliRunFromEvent(event: ToolProgressEvent): CliRunSummary | null {
|
||||
const name =
|
||||
typeof (event as { function?: { name?: unknown } }).function?.name === "string"
|
||||
? String((event as { function?: { name?: unknown } }).function?.name)
|
||||
: typeof event.name === "string"
|
||||
? event.name
|
||||
: "";
|
||||
if (!CLI_RUN_TOOL_NAMES.has(name)) return null;
|
||||
const argsObject = parseToolEventArguments(event);
|
||||
const key = event.call_id ? `call:${event.call_id}` : `${name}:${JSON.stringify(argsObject)}`;
|
||||
return cliRunFromArguments(argsObject, {
|
||||
key,
|
||||
status: cliRunStatusFromPhase(event.phase),
|
||||
error: cliRunError(event),
|
||||
});
|
||||
}
|
||||
|
||||
function mergeCliRun(existing: CliRunSummary | undefined, incoming: CliRunSummary): CliRunSummary {
|
||||
if (!existing) return incoming;
|
||||
return CLI_RUN_STATUS_RANK[incoming.status] >= CLI_RUN_STATUS_RANK[existing.status]
|
||||
? { ...existing, ...incoming }
|
||||
: existing;
|
||||
}
|
||||
|
||||
function collectCliRuns(messages: UIMessage[]): CliRunSummary[] {
|
||||
const runsByKey = new Map<string, CliRunSummary>();
|
||||
for (const message of messages) {
|
||||
if (message.kind !== "trace") continue;
|
||||
let hasStructuredCliRun = false;
|
||||
for (const event of message.toolEvents ?? []) {
|
||||
const run = cliRunFromEvent(event);
|
||||
if (!run) continue;
|
||||
hasStructuredCliRun = true;
|
||||
runsByKey.set(run.key, mergeCliRun(runsByKey.get(run.key), run));
|
||||
}
|
||||
if (hasStructuredCliRun) continue;
|
||||
for (const line of traceLines(message)) {
|
||||
const run = parseCliRunTrace(line);
|
||||
if (!run || runsByKey.has(run.key)) continue;
|
||||
runsByKey.set(run.key, run);
|
||||
}
|
||||
}
|
||||
return [...runsByKey.values()];
|
||||
}
|
||||
|
||||
function displayCliArg(arg: string): string {
|
||||
return /\s/.test(arg) ? JSON.stringify(arg) : arg;
|
||||
}
|
||||
|
||||
function formatCliArgs(run: CliRunSummary): string {
|
||||
const args = [...(run.json ? ["--json"] : []), ...run.args].map(displayCliArg);
|
||||
return args.join(" ");
|
||||
}
|
||||
|
||||
function cliActivitySummaryKey(status: CliRunStatus | undefined, active: boolean): string {
|
||||
if (status === "error") return "message.cliActivityFailedOne";
|
||||
return active && status === "running" ? "message.cliActivityRunningOne" : "message.cliActivityRanOne";
|
||||
}
|
||||
|
||||
function cliActivitySummaryDefault(status: CliRunStatus | undefined, active: boolean): string {
|
||||
if (status === "error") return "CLI failed @{{name}}";
|
||||
return `${active && status === "running" ? "Running" : "Ran"} CLI @{{name}}`;
|
||||
}
|
||||
|
||||
function cliActivityManySummaryKey(runs: CliRunSummary[], active: boolean): string {
|
||||
if (runs.some((run) => run.status === "error")) return "message.cliActivityFailedMany";
|
||||
return active && runs.some((run) => run.status === "running")
|
||||
? "message.cliActivityRunningMany"
|
||||
: "message.cliActivityRanMany";
|
||||
}
|
||||
|
||||
function cliActivityManySummaryDefault(runs: CliRunSummary[], active: boolean): string {
|
||||
if (runs.some((run) => run.status === "error")) return "{{count}} CLI failed";
|
||||
return `${active && runs.some((run) => run.status === "running") ? "Running" : "Ran"} {{count}} CLIs`;
|
||||
}
|
||||
|
||||
function cliRunLabelKey(run: CliRunSummary, active: boolean): string {
|
||||
if (run.status === "error") return "message.cliRunFailed";
|
||||
return active && run.status === "running" ? "message.cliRunRunning" : "message.cliRunRan";
|
||||
}
|
||||
|
||||
function cliRunLabelDefault(run: CliRunSummary, active: boolean): string {
|
||||
if (run.status === "error") return "CLI failed";
|
||||
return active && run.status === "running" ? "Running CLI" : "Ran CLI";
|
||||
}
|
||||
|
||||
function fileActivityVerb(editing: boolean, failed: boolean): string {
|
||||
if (failed) return "Failed";
|
||||
return editing ? "Editing" : "Edited";
|
||||
@@ -519,6 +761,120 @@ function hasVisibleDiffStats(edit: Pick<FileEditSummary, "added" | "deleted">):
|
||||
return edit.added > 0 || edit.deleted > 0;
|
||||
}
|
||||
|
||||
function CliRunGroup({
|
||||
runs,
|
||||
active,
|
||||
cliAppsByName,
|
||||
}: {
|
||||
runs: CliRunSummary[];
|
||||
active: boolean;
|
||||
cliAppsByName: Map<string, CliAppInfo>;
|
||||
}) {
|
||||
if (runs.length === 0) return null;
|
||||
return (
|
||||
<ul className="space-y-1 border-l border-cyan-500/20 pl-3" data-testid="activity-cli-runs">
|
||||
{runs.map((run) => (
|
||||
<CliRunRow
|
||||
key={run.key}
|
||||
run={run}
|
||||
active={active}
|
||||
app={cliAppsByName.get(run.name.toLowerCase())}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
function CliRunRow({ run, active, app }: { run: CliRunSummary; active: boolean; app?: CliAppInfo }) {
|
||||
const { t } = useTranslation();
|
||||
const [logoFailed, setLogoFailed] = useState(false);
|
||||
const args = formatCliArgs(run);
|
||||
const failed = run.status === "error";
|
||||
const rowActive = active && run.status === "running";
|
||||
const color = failed ? "#DC2626" : app?.brand_color || "#0891B2";
|
||||
const logoUrl = app?.logo_url && !logoFailed ? app.logo_url : null;
|
||||
return (
|
||||
<li
|
||||
className={cn(
|
||||
"grid min-w-0 grid-cols-[minmax(0,1fr)] rounded-[10px] border px-2.5 py-2 text-xs",
|
||||
"shadow-[0_6px_18px_rgba(15,23,42,0.045)] transition-colors",
|
||||
)}
|
||||
style={{
|
||||
borderColor: alphaColor(color, rowActive ? 34 : failed ? 28 : 22),
|
||||
backgroundColor: alphaColor(color, rowActive ? 9 : failed ? 7 : 6),
|
||||
}}
|
||||
>
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<span
|
||||
data-testid={`activity-cli-logo-${run.name.toLowerCase()}`}
|
||||
className={cn(
|
||||
"grid h-7 w-7 shrink-0 place-items-center overflow-hidden rounded-[8px] border text-[10px] font-semibold text-white",
|
||||
rowActive && "animate-pulse",
|
||||
)}
|
||||
style={{
|
||||
borderColor: alphaColor(color, 26),
|
||||
backgroundColor: logoUrl ? "hsl(var(--background))" : color,
|
||||
boxShadow: `0 0 0 3px ${alphaColor(color, rowActive ? 10 : 6)}`,
|
||||
}}
|
||||
>
|
||||
{logoUrl ? (
|
||||
<img
|
||||
src={logoUrl}
|
||||
alt=""
|
||||
className="h-[70%] w-[70%] object-contain"
|
||||
onError={() => setLogoFailed(true)}
|
||||
/>
|
||||
) : app ? (
|
||||
cliAppInitials(app).slice(0, 2)
|
||||
) : (
|
||||
<Terminal className="h-3.5 w-3.5" aria-hidden />
|
||||
)}
|
||||
</span>
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="flex min-w-0 items-center gap-1.5">
|
||||
<StreamingLabelSheen active={rowActive} className="shrink-0 text-[12px]">
|
||||
{t(cliRunLabelKey(run, active), {
|
||||
defaultValue: cliRunLabelDefault(run, active),
|
||||
})}
|
||||
</StreamingLabelSheen>
|
||||
<span className="min-w-0 truncate font-mono text-[12px] font-semibold text-foreground/90">
|
||||
@{run.name}
|
||||
</span>
|
||||
{failed ? (
|
||||
<AlertCircle className="h-3 w-3 shrink-0 text-destructive/75" aria-hidden />
|
||||
) : null}
|
||||
</span>
|
||||
{args ? (
|
||||
<span className="mt-0.5 block truncate font-mono text-[11px] leading-relaxed text-muted-foreground/82">
|
||||
{args}
|
||||
</span>
|
||||
) : null}
|
||||
{run.error ? (
|
||||
<span className="mt-0.5 block truncate text-[10.5px] leading-relaxed text-destructive/70">
|
||||
{run.error}
|
||||
</span>
|
||||
) : null}
|
||||
{run.workingDir ? (
|
||||
<span className="mt-0.5 block truncate text-[10.5px] leading-relaxed text-muted-foreground/58">
|
||||
{run.workingDir}
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function alphaColor(color: string, percent: number): string {
|
||||
if (/^#[0-9a-f]{6}$/i.test(color)) {
|
||||
const alpha = Math.round((percent / 100) * 255)
|
||||
.toString(16)
|
||||
.padStart(2, "0");
|
||||
return `${color}${alpha}`;
|
||||
}
|
||||
return `color-mix(in srgb, ${color} ${percent}%, transparent)`;
|
||||
}
|
||||
|
||||
function FileEditGroup({ edits }: { edits: FileEditSummary[] }) {
|
||||
if (edits.length === 0) return null;
|
||||
return (
|
||||
|
||||
@@ -9,9 +9,16 @@ import {
|
||||
} from "react";
|
||||
|
||||
import { MarkdownText, preloadMarkdownText } from "@/components/MarkdownText";
|
||||
import {
|
||||
CliAppMentionToken,
|
||||
cliAppInitials,
|
||||
splitCliAppMentionSegments,
|
||||
type CliAppMentionSegment,
|
||||
} from "@/components/CliAppMentionText";
|
||||
import {
|
||||
Activity,
|
||||
ArrowUp,
|
||||
AtSign,
|
||||
BookOpen,
|
||||
Check,
|
||||
ChevronDown,
|
||||
@@ -41,7 +48,7 @@ import {
|
||||
} from "@/hooks/useAttachedImages";
|
||||
import { useClipboardAndDrop } from "@/hooks/useClipboardAndDrop";
|
||||
import type { SendImage, SendOptions } from "@/hooks/useNanobotStream";
|
||||
import type { SlashCommand, GoalStateWsPayload } from "@/lib/types";
|
||||
import type { CliAppInfo, GoalStateWsPayload, OutboundCliAppMention, SlashCommand } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/** ``<input accept>``: aligned with the server's MIME whitelist. SVG is
|
||||
@@ -62,6 +69,7 @@ interface ThreadComposerProps {
|
||||
modelLabel?: string | null;
|
||||
variant?: "thread" | "hero";
|
||||
slashCommands?: SlashCommand[];
|
||||
cliApps?: CliAppInfo[];
|
||||
imageMode?: boolean;
|
||||
onImageModeChange?: (enabled: boolean) => void;
|
||||
onStop?: () => void;
|
||||
@@ -98,6 +106,12 @@ interface SlashPaletteLayout {
|
||||
maxHeight: number;
|
||||
}
|
||||
|
||||
interface CliAppMentionQuery {
|
||||
query: string;
|
||||
start: number;
|
||||
end: number;
|
||||
}
|
||||
|
||||
function slashCommandI18nKey(command: string): string {
|
||||
return command.replace(/^\//, "").replace(/-/g, "_");
|
||||
}
|
||||
@@ -167,6 +181,17 @@ function buildGoalMarkdownBody(summary: string, objective: string): string {
|
||||
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 RunElapsedStrip({
|
||||
startedAt,
|
||||
goalState,
|
||||
@@ -371,6 +396,7 @@ export function ThreadComposer({
|
||||
modelLabel = null,
|
||||
variant = "thread",
|
||||
slashCommands = [],
|
||||
cliApps = [],
|
||||
imageMode: controlledImageMode,
|
||||
onImageModeChange,
|
||||
onStop,
|
||||
@@ -382,6 +408,9 @@ export function ThreadComposer({
|
||||
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);
|
||||
@@ -491,6 +520,52 @@ export function ThreadComposer({
|
||||
}, [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 filteredCliApps = useMemo(() => {
|
||||
if (!cliAppMention) return [];
|
||||
return 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);
|
||||
})
|
||||
.slice(0, 8);
|
||||
}, [cliAppMention, cliApps]);
|
||||
|
||||
const showCliAppMenu = filteredCliApps.length > 0;
|
||||
const showAnyPalette = showSlashMenu || showCliAppMenu;
|
||||
const mentionSegments = useMemo(
|
||||
() => splitCliAppMentionSegments(value, cliApps),
|
||||
[cliApps, value],
|
||||
);
|
||||
const hasCliMentionDecorations = mentionSegments.some((segment) => segment.kind === "cli");
|
||||
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 [slashPaletteLayout, setSlashPaletteLayout] = useState<SlashPaletteLayout>({
|
||||
placement: "above",
|
||||
maxHeight: SLASH_PALETTE_MAX_HEIGHT_PX,
|
||||
@@ -500,6 +575,10 @@ export function ThreadComposer({
|
||||
setSelectedCommandIndex(0);
|
||||
}, [slashQuery]);
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedCliAppIndex(0);
|
||||
}, [cliAppMention?.query]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedCommandIndex >= filteredSlashCommands.length) {
|
||||
setSelectedCommandIndex(0);
|
||||
@@ -507,22 +586,29 @@ export function ThreadComposer({
|
||||
}, [filteredSlashCommands.length, selectedCommandIndex]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!showSlashMenu) return;
|
||||
if (selectedCliAppIndex >= filteredCliApps.length) {
|
||||
setSelectedCliAppIndex(0);
|
||||
}
|
||||
}, [filteredCliApps.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);
|
||||
};
|
||||
}, [showSlashMenu]);
|
||||
}, [showAnyPalette]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!showSlashMenu) return;
|
||||
if (!showAnyPalette) return;
|
||||
|
||||
const updateLayout = () => {
|
||||
const form = formRef.current;
|
||||
@@ -554,7 +640,7 @@ export function ThreadComposer({
|
||||
window.removeEventListener("resize", updateLayout);
|
||||
document.removeEventListener("scroll", updateLayout, true);
|
||||
};
|
||||
}, [filteredSlashCommands.length, showSlashMenu]);
|
||||
}, [filteredCliApps.length, filteredSlashCommands.length, showAnyPalette]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!aspectMenuOpen) return;
|
||||
@@ -602,12 +688,36 @@ export function ThreadComposer({
|
||||
(command: SlashCommand) => {
|
||||
setValue(command.argHint ? `${command.command} ` : command.command);
|
||||
setSlashMenuDismissed(true);
|
||||
setCliAppMenuDismissed(false);
|
||||
setInlineError(null);
|
||||
resizeTextarea();
|
||||
},
|
||||
[resizeTextarea],
|
||||
);
|
||||
|
||||
const chooseCliApp = useCallback(
|
||||
(app: CliAppInfo) => {
|
||||
if (!cliAppMention) return;
|
||||
const suffix = value.slice(cliAppMention.end);
|
||||
const mention = `@${app.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();
|
||||
@@ -625,14 +735,21 @@ export function ThreadComposer({
|
||||
preview: { url: img.dataUrl, name: img.file.name },
|
||||
}))
|
||||
: undefined;
|
||||
const options: SendOptions | undefined = imageMode
|
||||
? {
|
||||
imageGeneration: {
|
||||
enabled: true,
|
||||
aspect_ratio: imageAspectRatio === "auto" ? null : imageAspectRatio,
|
||||
},
|
||||
}
|
||||
: undefined;
|
||||
const attachedCliApps = activeCliMentionApps.map(cliAppMentionPayload);
|
||||
const options: SendOptions | undefined =
|
||||
imageMode || attachedCliApps.length > 0
|
||||
? {
|
||||
...(imageMode
|
||||
? {
|
||||
imageGeneration: {
|
||||
enabled: true,
|
||||
aspect_ratio: imageAspectRatio === "auto" ? null : imageAspectRatio,
|
||||
},
|
||||
}
|
||||
: {}),
|
||||
...(attachedCliApps.length > 0 ? { cliApps: attachedCliApps } : {}),
|
||||
}
|
||||
: undefined;
|
||||
onSend(trimmed, payload, options);
|
||||
setValue("");
|
||||
setInlineError(null);
|
||||
@@ -640,10 +757,36 @@ export function ThreadComposer({
|
||||
// preview here without affecting the rendered message.
|
||||
clear();
|
||||
setSlashMenuDismissed(false);
|
||||
setCliAppMenuDismissed(false);
|
||||
setCursorPosition(0);
|
||||
resizeTextarea();
|
||||
}, [canSend, clear, imageAspectRatio, imageMode, onSend, readyImages, resizeTextarea, value]);
|
||||
}, [activeCliMentionApps, 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) % filteredCliApps.length);
|
||||
return;
|
||||
}
|
||||
if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
setSelectedCliAppIndex(
|
||||
(idx) => (idx - 1 + filteredCliApps.length) % filteredCliApps.length,
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (e.key === "Tab" || (e.key === "Enter" && !e.shiftKey)) {
|
||||
e.preventDefault();
|
||||
chooseCliApp(filteredCliApps[selectedCliAppIndex]);
|
||||
return;
|
||||
}
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
setCliAppMenuDismissed(true);
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (showSlashMenu) {
|
||||
if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
@@ -719,6 +862,12 @@ export function ThreadComposer({
|
||||
|
||||
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
|
||||
@@ -743,6 +892,16 @@ export function ThreadComposer({
|
||||
onChoose={chooseSlashCommand}
|
||||
/>
|
||||
) : null}
|
||||
{showCliAppMenu ? (
|
||||
<CliAppMentionPalette
|
||||
apps={filteredCliApps}
|
||||
selectedIndex={selectedCliAppIndex}
|
||||
layout={slashPaletteLayout}
|
||||
isHero={isHero}
|
||||
onHover={setSelectedCliAppIndex}
|
||||
onChoose={chooseCliApp}
|
||||
/>
|
||||
) : null}
|
||||
<div
|
||||
className={cn(
|
||||
"relative mx-auto flex w-full flex-col overflow-visible transition-all duration-200",
|
||||
@@ -787,30 +946,42 @@ export function ThreadComposer({
|
||||
{runStartedAt != null || goalState?.active ? (
|
||||
<RunElapsedStrip startedAt={runStartedAt} goalState={goalState} />
|
||||
) : null}
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={value}
|
||||
onChange={(e) => {
|
||||
setValue(e.target.value);
|
||||
setSlashMenuDismissed(false);
|
||||
}}
|
||||
onInput={onInput}
|
||||
onKeyDown={onKeyDown}
|
||||
onPaste={onPaste}
|
||||
rows={1}
|
||||
placeholder={resolvedPlaceholder}
|
||||
disabled={disabled}
|
||||
aria-label={t("thread.composer.inputAria")}
|
||||
className={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",
|
||||
"placeholder:text-muted-foreground/70",
|
||||
"focus:outline-none focus-visible:outline-none",
|
||||
"disabled:cursor-not-allowed",
|
||||
)}
|
||||
/>
|
||||
<div className="relative">
|
||||
{hasCliMentionDecorations ? (
|
||||
<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",
|
||||
hasCliMentionDecorations && "text-transparent selection:bg-primary/20",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
{inlineError ? (
|
||||
<div
|
||||
role="alert"
|
||||
@@ -962,6 +1133,40 @@ export function ThreadComposer({
|
||||
);
|
||||
}
|
||||
|
||||
function ComposerCliMentionOverlay({
|
||||
segments,
|
||||
isHero,
|
||||
className,
|
||||
}: {
|
||||
segments: CliAppMentionSegment[];
|
||||
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>;
|
||||
}
|
||||
return (
|
||||
<CliAppMentionToken
|
||||
key={`cli-${segment.app.name}-${index}`}
|
||||
app={segment.app}
|
||||
label={segment.text}
|
||||
variant="composer"
|
||||
isHero={isHero}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
interface SlashCommandPaletteProps {
|
||||
commands: SlashCommand[];
|
||||
selectedIndex: number;
|
||||
@@ -971,6 +1176,15 @@ interface SlashCommandPaletteProps {
|
||||
onChoose: (command: SlashCommand) => void;
|
||||
}
|
||||
|
||||
interface CliAppMentionPaletteProps {
|
||||
apps: CliAppInfo[];
|
||||
selectedIndex: number;
|
||||
layout: SlashPaletteLayout;
|
||||
isHero: boolean;
|
||||
onHover: (index: number) => void;
|
||||
onChoose: (app: CliAppInfo) => void;
|
||||
}
|
||||
|
||||
function ImageAspectMenu({
|
||||
selected,
|
||||
isHero,
|
||||
@@ -1024,6 +1238,121 @@ function ImageAspectMenu({
|
||||
);
|
||||
}
|
||||
|
||||
function CliAppMentionPalette({
|
||||
apps,
|
||||
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-[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="flex items-center gap-1.5 px-2 pb-1 pt-1 text-[11px] font-medium tracking-[0.08em] text-muted-foreground/70">
|
||||
<AtSign className="h-3 w-3" aria-hidden />
|
||||
<span>{t("thread.composer.mentions.label")}</span>
|
||||
</div>
|
||||
<div className="overflow-y-auto pr-0.5" style={{ maxHeight: listMaxHeight }}>
|
||||
{apps.map((app, index) => {
|
||||
const selected = index === selectedIndex;
|
||||
return (
|
||||
<button
|
||||
key={app.name}
|
||||
type="button"
|
||||
role="option"
|
||||
aria-selected={selected}
|
||||
onMouseEnter={() => onHover(index)}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
onChoose(app);
|
||||
}}
|
||||
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",
|
||||
)}
|
||||
>
|
||||
<CliAppMentionLogo app={app} selected={selected} />
|
||||
<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">
|
||||
@{app.name}
|
||||
</span>
|
||||
<span className="truncate text-[13px] font-medium">
|
||||
{app.display_name}
|
||||
</span>
|
||||
</span>
|
||||
<span className="mt-0.5 block truncate text-[12px] text-muted-foreground">
|
||||
{app.category}
|
||||
{app.entry_point ? ` · ${app.entry_point}` : ""}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
function CliAppMentionLogo({
|
||||
app,
|
||||
selected,
|
||||
}: {
|
||||
app: CliAppInfo;
|
||||
selected: boolean;
|
||||
}) {
|
||||
const [failed, setFailed] = useState(false);
|
||||
const color = app.brand_color || "hsl(var(--primary))";
|
||||
if (app.logo_url && !failed) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"flex h-8 w-8 shrink-0 items-center justify-center rounded-[8px] border bg-background",
|
||||
selected ? "border-primary/25" : "border-border/65",
|
||||
)}
|
||||
>
|
||||
<img
|
||||
src={app.logo_url}
|
||||
alt=""
|
||||
className="h-4.5 w-4.5 object-contain"
|
||||
onError={() => setFailed(true)}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span
|
||||
className="flex h-8 w-8 shrink-0 items-center justify-center rounded-[8px] text-[10.5px] font-semibold text-white"
|
||||
style={{ backgroundColor: color }}
|
||||
>
|
||||
{cliAppInitials(app)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function SlashCommandPalette({
|
||||
commands,
|
||||
selectedIndex,
|
||||
|
||||
@@ -6,7 +6,7 @@ import {
|
||||
AgentActivityCluster,
|
||||
isAgentActivityMember,
|
||||
} from "@/components/thread/AgentActivityCluster";
|
||||
import type { UIMessage } from "@/lib/types";
|
||||
import type { CliAppInfo, UIMessage } from "@/lib/types";
|
||||
|
||||
interface ThreadMessagesProps {
|
||||
messages: UIMessage[];
|
||||
@@ -14,6 +14,7 @@ interface ThreadMessagesProps {
|
||||
isStreaming?: boolean;
|
||||
hiddenMessageCount?: number;
|
||||
onLoadEarlier?: () => void;
|
||||
cliApps?: CliAppInfo[];
|
||||
}
|
||||
|
||||
export type DisplayUnit =
|
||||
@@ -164,6 +165,7 @@ export function ThreadMessages({
|
||||
isStreaming = false,
|
||||
hiddenMessageCount = 0,
|
||||
onLoadEarlier,
|
||||
cliApps = [],
|
||||
}: ThreadMessagesProps) {
|
||||
const { t } = useTranslation();
|
||||
const units = useMemo(() => buildDisplayUnits(messages), [messages]);
|
||||
@@ -208,6 +210,7 @@ export function ThreadMessages({
|
||||
messages={unit.messages}
|
||||
isTurnStreaming={index === liveActivityClusterIndex}
|
||||
hasBodyBelow={hasBodyBelow}
|
||||
cliApps={cliApps}
|
||||
/>
|
||||
) : (
|
||||
<MessageBubble
|
||||
@@ -217,6 +220,7 @@ export function ThreadMessages({
|
||||
? copyFlags[index]
|
||||
: true
|
||||
}
|
||||
cliApps={cliApps}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -19,8 +19,8 @@ import { StreamErrorNotice } from "@/components/thread/StreamErrorNotice";
|
||||
import { ThreadViewport } from "@/components/thread/ThreadViewport";
|
||||
import { useNanobotStream, type SendImage, type SendOptions } from "@/hooks/useNanobotStream";
|
||||
import { useSessionHistory } from "@/hooks/useSessions";
|
||||
import { listSlashCommands } from "@/lib/api";
|
||||
import type { ChatSummary, SlashCommand, UIMessage } from "@/lib/types";
|
||||
import { fetchCliApps, listSlashCommands } from "@/lib/api";
|
||||
import type { ChatSummary, CliAppInfo, SlashCommand, UIMessage } from "@/lib/types";
|
||||
import { normalizeLegacyLongTaskMessages } from "@/lib/thread-display-compat";
|
||||
import { scrubSubagentUiMessages } from "@/lib/subagent-channel-display";
|
||||
import { useClient } from "@/providers/ClientProvider";
|
||||
@@ -97,6 +97,7 @@ export function ThreadShell({
|
||||
const { client, modelName, token } = useClient();
|
||||
const [booting, setBooting] = useState(false);
|
||||
const [slashCommands, setSlashCommands] = useState<SlashCommand[]>([]);
|
||||
const [cliApps, setCliApps] = useState<CliAppInfo[]>([]);
|
||||
const [heroImageMode, setHeroImageMode] = useState(false);
|
||||
const [scrollToBottomSignal, setScrollToBottomSignal] = useState(0);
|
||||
const pendingFirstRef = useRef<PendingFirstMessage | null>(null);
|
||||
@@ -247,6 +248,40 @@ export function ThreadShell({
|
||||
};
|
||||
}, [token]);
|
||||
|
||||
const refreshCliApps = useCallback(async () => {
|
||||
try {
|
||||
const payload = await fetchCliApps(token);
|
||||
setCliApps(payload.apps.filter((app) => app.installed));
|
||||
} catch {
|
||||
setCliApps([]);
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
const load = async () => {
|
||||
try {
|
||||
const payload = await fetchCliApps(token);
|
||||
if (!cancelled) setCliApps(payload.apps.filter((app) => app.installed));
|
||||
} catch {
|
||||
if (!cancelled) setCliApps([]);
|
||||
}
|
||||
};
|
||||
load();
|
||||
|
||||
const refreshOnFocus = () => {
|
||||
if (document.visibilityState === "hidden") return;
|
||||
void refreshCliApps();
|
||||
};
|
||||
window.addEventListener("focus", refreshOnFocus);
|
||||
document.addEventListener("visibilitychange", refreshOnFocus);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
window.removeEventListener("focus", refreshOnFocus);
|
||||
document.removeEventListener("visibilitychange", refreshOnFocus);
|
||||
};
|
||||
}, [refreshCliApps, token]);
|
||||
|
||||
const handleWelcomeSend = useCallback(
|
||||
async (content: string, images?: SendImage[], options?: SendOptions) => {
|
||||
if (booting) return;
|
||||
@@ -332,6 +367,7 @@ export function ThreadShell({
|
||||
modelLabel={toModelBadgeLabel(modelName)}
|
||||
variant={showHeroComposer ? "hero" : "thread"}
|
||||
slashCommands={slashCommands}
|
||||
cliApps={cliApps}
|
||||
imageMode={showHeroComposer ? heroImageMode : undefined}
|
||||
onImageModeChange={showHeroComposer ? setHeroImageMode : undefined}
|
||||
onStop={stop}
|
||||
@@ -351,6 +387,7 @@ export function ThreadShell({
|
||||
modelLabel={toModelBadgeLabel(modelName)}
|
||||
variant="hero"
|
||||
slashCommands={slashCommands}
|
||||
cliApps={cliApps}
|
||||
imageMode={heroImageMode}
|
||||
onImageModeChange={setHeroImageMode}
|
||||
runStartedAt={runStartedAt}
|
||||
@@ -391,6 +428,7 @@ export function ThreadShell({
|
||||
scrollToBottomSignal={scrollToBottomSignal}
|
||||
conversationKey={historyKey}
|
||||
showScrollToBottomButton={!!session}
|
||||
cliApps={cliApps}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -14,7 +14,7 @@ import { ThreadMessages } from "@/components/thread/ThreadMessages";
|
||||
import { isAgentActivityMember } from "@/components/thread/AgentActivityCluster";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { UIMessage } from "@/lib/types";
|
||||
import type { CliAppInfo, UIMessage } from "@/lib/types";
|
||||
|
||||
interface ThreadViewportProps {
|
||||
messages: UIMessage[];
|
||||
@@ -24,6 +24,7 @@ interface ThreadViewportProps {
|
||||
scrollToBottomSignal?: number;
|
||||
conversationKey?: string | null;
|
||||
showScrollToBottomButton?: boolean;
|
||||
cliApps?: CliAppInfo[];
|
||||
}
|
||||
|
||||
const NEAR_BOTTOM_PX = 48;
|
||||
@@ -53,6 +54,7 @@ export function ThreadViewport({
|
||||
scrollToBottomSignal = 0,
|
||||
conversationKey = null,
|
||||
showScrollToBottomButton = true,
|
||||
cliApps = [],
|
||||
}: ThreadViewportProps) {
|
||||
const { t } = useTranslation();
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
@@ -249,6 +251,7 @@ export function ThreadViewport({
|
||||
isStreaming={isStreaming}
|
||||
hiddenMessageCount={hiddenMessageCount}
|
||||
onLoadEarlier={loadEarlierMessages}
|
||||
cliApps={cliApps}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user