2258 lines
72 KiB
TypeScript
2258 lines
72 KiB
TypeScript
/**
|
|
* Custom agent CLI for structured/headless profiles (#147).
|
|
*
|
|
* This is an alternative human view for an agent cell, not a replacement for
|
|
* the native TUI. It uses the structured chat commands when available and
|
|
* deliberately does not try to parse PTY bytes.
|
|
*/
|
|
|
|
import {
|
|
useCallback,
|
|
useEffect,
|
|
useMemo,
|
|
useRef,
|
|
useState,
|
|
type ClipboardEvent,
|
|
type KeyboardEvent,
|
|
type MouseEvent as ReactMouseEvent,
|
|
} from "react";
|
|
|
|
import type {
|
|
AgentProfile,
|
|
GatewayError,
|
|
ReplyChunk,
|
|
ReplyProgress,
|
|
ReplyProgressKind,
|
|
ReplyProgressSource,
|
|
ReplyProgressStage,
|
|
SlashCommand,
|
|
} from "@/domain";
|
|
import { useGateways } from "@/app/di";
|
|
import { usePluginRuntime } from "@/features/plugins/PluginRuntimeProvider";
|
|
import {
|
|
markProjectCliInteractionFinished,
|
|
markProjectCliInteractionStarted,
|
|
markProjectCliInteractionStopped,
|
|
} from "@/features/projects/projectCliInteractionActivity";
|
|
import { Button, Spinner, cn } from "@/shared";
|
|
import type { ChatAttachmentInput, ChatDraftScope } from "@/ports";
|
|
|
|
export interface CustomAgentChatViewProps {
|
|
projectId: string;
|
|
agentId: string;
|
|
agentName: string;
|
|
profile: AgentProfile;
|
|
cwd: string;
|
|
layoutId?: string;
|
|
nodeId: string;
|
|
sessionId: string | null;
|
|
conversationId: string | null;
|
|
composerHeightPx?: number;
|
|
composerDefaultHeightPx?: number;
|
|
onComposerHeightPxChange?: (heightPx: number) => void;
|
|
onSessionId: (sessionId: string | null) => void;
|
|
onConversationId: (conversationId: string | null) => void;
|
|
}
|
|
|
|
type ChatTurn =
|
|
| { role: "user"; text: string; attachments?: string[] }
|
|
| { role: "agent"; text: string; pending?: boolean }
|
|
| { role: "tool"; label: string }
|
|
| { role: "progress"; progress: ReplyProgress; settled?: boolean }
|
|
| { role: "final"; text: string }
|
|
| { role: "error"; text: string }
|
|
| { role: "unknown"; text: string };
|
|
|
|
interface CachedChatView {
|
|
turns: ChatTurn[];
|
|
progressIndex: Map<string, ProgressIndexEntry>;
|
|
chunkCount: number;
|
|
}
|
|
|
|
const chatSessionViewCache = new Map<string, CachedChatView>();
|
|
const EMPTY_MODEL_RESPONSE_MESSAGE = "Le modèle n'a renvoyé aucune réponse.";
|
|
const COMPOSER_RESIZE_STEP = 12;
|
|
const FALLBACK_COMPOSER_HEIGHT = 64;
|
|
|
|
export function __clearCustomAgentChatViewCacheForTests() {
|
|
chatSessionViewCache.clear();
|
|
}
|
|
|
|
interface AttachmentDraft {
|
|
id: string;
|
|
label: string;
|
|
input: ChatAttachmentInput;
|
|
previewUrl?: string;
|
|
dedupeKey?: string;
|
|
token?: string;
|
|
}
|
|
|
|
interface ProgressIndexEntry {
|
|
firstOccurredAtMs: number;
|
|
sequence: number;
|
|
}
|
|
|
|
interface ProfileCommandDialogState {
|
|
profiles: AgentProfile[];
|
|
selectedProfileId: string;
|
|
confirmedReset: boolean;
|
|
busy: boolean;
|
|
error: string | null;
|
|
}
|
|
|
|
interface SlashCommandInvocation {
|
|
name: string;
|
|
arguments: unknown[];
|
|
}
|
|
|
|
function describe(e: unknown): string {
|
|
if (e && typeof e === "object" && "message" in e) {
|
|
return String((e as GatewayError).message);
|
|
}
|
|
return String(e);
|
|
}
|
|
|
|
function instrumentationError(e: unknown): Record<string, unknown> {
|
|
if (e && typeof e === "object") {
|
|
const err = e as GatewayError & { name?: string };
|
|
return {
|
|
code: err.code,
|
|
message: err.message,
|
|
name: err.name,
|
|
raw: e,
|
|
};
|
|
}
|
|
return { message: String(e), raw: e };
|
|
}
|
|
|
|
function isNotFound(e: unknown): boolean {
|
|
if (e && typeof e === "object" && (e as GatewayError).code === "NOT_FOUND") {
|
|
return true;
|
|
}
|
|
const message =
|
|
typeof e === "string"
|
|
? e
|
|
: e && typeof e === "object" && "message" in e
|
|
? String((e as GatewayError).message)
|
|
: "";
|
|
return /^not found: structured session\b/i.test(message);
|
|
}
|
|
|
|
function unknownChunkLabel(chunk: unknown): string {
|
|
try {
|
|
return JSON.stringify(chunk);
|
|
} catch {
|
|
return String(chunk);
|
|
}
|
|
}
|
|
|
|
function isReplyRecord(chunk: unknown): chunk is Record<string, unknown> {
|
|
return Boolean(chunk && typeof chunk === "object" && "kind" in chunk);
|
|
}
|
|
|
|
function appendAgentDelta(turns: ChatTurn[], text: string): ChatTurn[] {
|
|
const next = [...turns];
|
|
const last = next[next.length - 1];
|
|
if (last?.role === "agent") {
|
|
next[next.length - 1] = {
|
|
role: "agent",
|
|
text: last.text + text,
|
|
pending: true,
|
|
};
|
|
return next;
|
|
}
|
|
next.push({ role: "agent", text, pending: true });
|
|
return next;
|
|
}
|
|
|
|
function attachmentLabels(value: unknown): string[] {
|
|
return Array.isArray(value)
|
|
? value.filter((item): item is string => typeof item === "string" && item.trim() !== "")
|
|
: [];
|
|
}
|
|
|
|
function appendUserPrompt(
|
|
turns: ChatTurn[],
|
|
text: string,
|
|
attachments: string[] = [],
|
|
): ChatTurn[] {
|
|
const last = turns[turns.length - 1];
|
|
if (
|
|
last?.role === "user" &&
|
|
last.text === text &&
|
|
JSON.stringify(last.attachments ?? []) === JSON.stringify(attachments)
|
|
) {
|
|
return turns;
|
|
}
|
|
return [
|
|
...turns,
|
|
{
|
|
role: "user",
|
|
text,
|
|
...(attachments.length > 0 ? { attachments } : {}),
|
|
},
|
|
];
|
|
}
|
|
|
|
function isReplyProgressSource(value: unknown): value is ReplyProgressSource {
|
|
return value === "providerNative" || value === "ideaLocal";
|
|
}
|
|
|
|
function isReplyProgressKind(value: unknown): value is ReplyProgressKind {
|
|
return (
|
|
value === "turn" ||
|
|
value === "message" ||
|
|
value === "tool" ||
|
|
value === "mcp" ||
|
|
value === "other"
|
|
);
|
|
}
|
|
|
|
function isReplyProgressStage(value: unknown): value is ReplyProgressStage {
|
|
return (
|
|
value === "started" ||
|
|
value === "delta" ||
|
|
value === "completed" ||
|
|
value === "info"
|
|
);
|
|
}
|
|
|
|
function optionalString(value: unknown): string | undefined {
|
|
return typeof value === "string" && value.trim() ? value : undefined;
|
|
}
|
|
|
|
function normalizeProgress(raw: unknown): ReplyProgress | null {
|
|
if (!raw || typeof raw !== "object") return null;
|
|
const record = raw as Record<string, unknown>;
|
|
const label = optionalString(record.label);
|
|
if (!label) return null;
|
|
return {
|
|
progressId: optionalString(record.progressId),
|
|
occurredAtMs:
|
|
typeof record.occurredAtMs === "number" && Number.isFinite(record.occurredAtMs)
|
|
? record.occurredAtMs
|
|
: undefined,
|
|
source: isReplyProgressSource(record.source) ? record.source : "providerNative",
|
|
kind: isReplyProgressKind(record.kind) ? record.kind : "other",
|
|
stage: isReplyProgressStage(record.stage) ? record.stage : "info",
|
|
label,
|
|
text: optionalString(record.text),
|
|
provider: optionalString(record.provider),
|
|
nativeEvent: optionalString(record.nativeEvent),
|
|
toolName: optionalString(record.toolName),
|
|
};
|
|
}
|
|
|
|
function progressKey(progress: ReplyProgress): string {
|
|
return [
|
|
progress.source,
|
|
progress.kind,
|
|
progress.stage,
|
|
progress.toolName ?? "",
|
|
progress.label,
|
|
progress.text ?? "",
|
|
].join("\u0000");
|
|
}
|
|
|
|
function progressUpsertKey(progress: ReplyProgress): string {
|
|
const progressId = progress.progressId?.trim();
|
|
if (progressId) return progressId;
|
|
const entity = progressEntityKey(progress);
|
|
if (entity) return `legacy-entity:${entity}`;
|
|
return `legacy:${progressDisplayKey(progress)}`;
|
|
}
|
|
|
|
function normalizedProgressToolName(progress: ReplyProgress): string | null {
|
|
const name = progress.toolName ?? progress.label;
|
|
const normalized = name.trim().toLowerCase();
|
|
return normalized || null;
|
|
}
|
|
|
|
function isDelegationProgress(progress: ReplyProgress): boolean {
|
|
const name = normalizedProgressToolName(progress);
|
|
return name === "idea_ask_agent" || name === "idea_ask_agents";
|
|
}
|
|
|
|
function progressEntityKey(progress: ReplyProgress): string | null {
|
|
const name = normalizedProgressToolName(progress);
|
|
if (!name) return null;
|
|
if (isDelegationProgress(progress)) return `delegation:${name}`;
|
|
if (progress.kind === "tool" || progress.kind === "mcp") return `tool:${name}`;
|
|
return null;
|
|
}
|
|
|
|
function progressStageBucket(progress: ReplyProgress): string {
|
|
if (!isCenteredToolProgress(progress)) return progress.stage;
|
|
if (progress.stage === "started" || progress.stage === "delta") return "started";
|
|
if (progress.stage === "completed") return "completed";
|
|
return "info";
|
|
}
|
|
|
|
function progressDisplayKey(progress: ReplyProgress): string {
|
|
const entity = progressEntityKey(progress);
|
|
if (entity) return `${entity}\u0000${progressStageBucket(progress)}`;
|
|
return progressKey(progress);
|
|
}
|
|
|
|
interface ChatViewState {
|
|
turns: ChatTurn[];
|
|
progressIndex: Map<string, ProgressIndexEntry>;
|
|
}
|
|
|
|
function emptyChatViewState(): ChatViewState {
|
|
return { turns: [], progressIndex: new Map() };
|
|
}
|
|
|
|
function appendProgress(state: ChatViewState, progress: ReplyProgress): ChatViewState {
|
|
const key = progressUpsertKey(progress);
|
|
const existingIndex = state.turns.findIndex(
|
|
(turn) => turn.role === "progress" && progressUpsertKey(turn.progress) === key,
|
|
);
|
|
const existingProgress =
|
|
existingIndex >= 0 && state.turns[existingIndex].role === "progress"
|
|
? state.turns[existingIndex].progress
|
|
: null;
|
|
const merged =
|
|
existingProgress && progress.stage === "completed"
|
|
? mergeCompletedProgress(existingProgress, progress)
|
|
: progress;
|
|
const nextIndex = new Map(state.progressIndex);
|
|
const existingEntry = nextIndex.get(key);
|
|
const firstOccurredAtMs =
|
|
existingEntry?.firstOccurredAtMs ??
|
|
progress.occurredAtMs ??
|
|
Date.now();
|
|
const sequence = existingEntry?.sequence ?? nextIndex.size;
|
|
nextIndex.set(key, { firstOccurredAtMs, sequence });
|
|
|
|
if (existingIndex >= 0) {
|
|
const nextTurns = [...state.turns];
|
|
nextTurns[existingIndex] = { role: "progress", progress: merged };
|
|
return { turns: nextTurns, progressIndex: nextIndex };
|
|
}
|
|
|
|
const insertAt = state.turns.findIndex((turn) => {
|
|
if (turn.role !== "progress") return false;
|
|
const candidate = state.progressIndex.get(progressUpsertKey(turn.progress));
|
|
if (!candidate) return false;
|
|
if (candidate.firstOccurredAtMs !== firstOccurredAtMs) {
|
|
return candidate.firstOccurredAtMs > firstOccurredAtMs;
|
|
}
|
|
return candidate.sequence > sequence;
|
|
});
|
|
const nextTurn = { role: "progress" as const, progress: merged };
|
|
if (insertAt < 0) {
|
|
return { turns: [...state.turns, nextTurn], progressIndex: nextIndex };
|
|
}
|
|
return {
|
|
turns: [
|
|
...state.turns.slice(0, insertAt),
|
|
nextTurn,
|
|
...state.turns.slice(insertAt),
|
|
],
|
|
progressIndex: nextIndex,
|
|
};
|
|
}
|
|
|
|
function mergeCompletedProgress(
|
|
running: ReplyProgress,
|
|
completed: ReplyProgress,
|
|
): ReplyProgress {
|
|
if (!isDelegationProgress(running) || !completed.text) return completed;
|
|
if (delegationSummary(completed).target) return completed;
|
|
return {
|
|
...completed,
|
|
text: running.text,
|
|
};
|
|
}
|
|
|
|
function completeRunningProgress(turns: ChatTurn[]): ChatTurn[] {
|
|
const completedEntities = new Set(
|
|
turns
|
|
.filter(
|
|
(turn): turn is Extract<ChatTurn, { role: "progress" }> =>
|
|
turn.role === "progress" &&
|
|
progressStageBucket(turn.progress) === "completed" &&
|
|
Boolean(progressEntityKey(turn.progress)),
|
|
)
|
|
.map((turn) => progressEntityKey(turn.progress)),
|
|
);
|
|
return turns.map((turn) => {
|
|
if (
|
|
turn.role !== "progress" ||
|
|
turn.progress.kind === "turn" ||
|
|
(turn.progress.stage !== "started" && turn.progress.stage !== "delta")
|
|
) {
|
|
return turn;
|
|
}
|
|
const entity = progressEntityKey(turn.progress);
|
|
if (entity && completedEntities.has(entity)) {
|
|
return {
|
|
...turn,
|
|
settled: true,
|
|
progress: {
|
|
...turn.progress,
|
|
stage: "completed",
|
|
},
|
|
};
|
|
}
|
|
return {
|
|
...turn,
|
|
progress: {
|
|
...turn.progress,
|
|
stage: "completed",
|
|
},
|
|
};
|
|
});
|
|
}
|
|
|
|
function completeChatViewProgress(state: ChatViewState): ChatViewState {
|
|
return {
|
|
turns: completeRunningProgress(state.turns),
|
|
progressIndex: state.progressIndex,
|
|
};
|
|
}
|
|
|
|
function isRecoverableNoResponseTurn(turn: ChatTurn | undefined): boolean {
|
|
return turn?.role === "error" && turn.text === EMPTY_MODEL_RESPONSE_MESSAGE;
|
|
}
|
|
|
|
function turnsIndicateBusy(state: ChatViewState): boolean {
|
|
for (let index = state.turns.length - 1; index >= 0; index -= 1) {
|
|
const turn = state.turns[index];
|
|
if (turn.role === "final" || turn.role === "error") return false;
|
|
if (turn.role === "agent" && turn.pending) return true;
|
|
if (
|
|
turn.role === "progress" &&
|
|
!turn.settled &&
|
|
progressStageBucket(turn.progress) !== "completed"
|
|
) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function insertTextAtSelection(
|
|
text: string,
|
|
insertion: string,
|
|
selectionStart: number,
|
|
selectionEnd: number,
|
|
): string {
|
|
return text.slice(0, selectionStart) + insertion + text.slice(selectionEnd);
|
|
}
|
|
|
|
function removeAttachmentToken(text: string, token: string): string {
|
|
const index = text.indexOf(token);
|
|
if (index < 0) return text;
|
|
const before = text.slice(0, index);
|
|
const after = text.slice(index + token.length);
|
|
if (/\s$/.test(before) && /^\s/.test(after)) {
|
|
return before + after.replace(/^\s+/, "");
|
|
}
|
|
return before + after;
|
|
}
|
|
|
|
function fileExtension(mime: string): string {
|
|
if (mime === "image/png") return "png";
|
|
if (mime === "image/jpeg") return "jpg";
|
|
if (mime === "image/gif") return "gif";
|
|
if (mime === "image/webp") return "webp";
|
|
return "img";
|
|
}
|
|
|
|
function pathBasename(path: string): string {
|
|
return path.split(/[\\/]/).filter(Boolean).at(-1) ?? path;
|
|
}
|
|
|
|
function bytesToBase64(bytes: Uint8Array): string {
|
|
let binary = "";
|
|
const chunkSize = 0x8000;
|
|
for (let i = 0; i < bytes.length; i += chunkSize) {
|
|
const chunk = bytes.subarray(i, i + chunkSize);
|
|
binary += String.fromCharCode(...chunk);
|
|
}
|
|
return btoa(binary);
|
|
}
|
|
|
|
async function clipboardFileToAttachment(file: File): Promise<AttachmentDraft> {
|
|
const mime = file.type || "application/octet-stream";
|
|
const contentBase64 = bytesToBase64(new Uint8Array(await file.arrayBuffer()));
|
|
const filename =
|
|
file.name ||
|
|
(mime.startsWith("image/")
|
|
? `clipboard-image-${Date.now()}.${fileExtension(mime)}`
|
|
: `clipboard-file-${Date.now()}`);
|
|
return {
|
|
id: `clipboard-${Date.now()}-${Math.random().toString(36).slice(2)}`,
|
|
label: filename,
|
|
previewUrl: mime.startsWith("image/")
|
|
? `data:${mime};base64,${contentBase64}`
|
|
: undefined,
|
|
dedupeKey: file.name
|
|
? fileMetadataKey(file)
|
|
: `${mime}\u0000${file.size}\u0000${contentBase64}`,
|
|
input: {
|
|
filename,
|
|
contentBase64,
|
|
mime,
|
|
sourceKind: "clipboard",
|
|
},
|
|
};
|
|
}
|
|
|
|
function fileMetadataKey(file: File): string {
|
|
return `${file.name}\u0000${file.type}\u0000${file.size}\u0000${file.lastModified}`;
|
|
}
|
|
|
|
function dataTransferFiles(clipboardData: DataTransfer): File[] {
|
|
const clipboardItems = clipboardData.items
|
|
? Array.from(clipboardData.items)
|
|
: [];
|
|
const clipboardFiles = clipboardData.files
|
|
? Array.from(clipboardData.files)
|
|
: [];
|
|
const fromItems = clipboardItems
|
|
.filter((item) => item.kind === "file")
|
|
.map((item) => item.getAsFile())
|
|
.filter((file): file is File => Boolean(file));
|
|
const seen = new Set<string>();
|
|
return [...fromItems, ...clipboardFiles].filter((file) => {
|
|
const key = fileMetadataKey(file);
|
|
if (seen.has(key)) return false;
|
|
seen.add(key);
|
|
return true;
|
|
});
|
|
}
|
|
|
|
async function asyncClipboardImageFiles(): Promise<File[]> {
|
|
if (
|
|
typeof navigator === "undefined" ||
|
|
typeof navigator.clipboard?.read !== "function"
|
|
) {
|
|
return [];
|
|
}
|
|
const items = await navigator.clipboard.read();
|
|
const files: File[] = [];
|
|
for (const item of items) {
|
|
for (const type of item.types) {
|
|
if (!type.startsWith("image/")) continue;
|
|
const blob = await item.getType(type);
|
|
files.push(new File([blob], "", { type, lastModified: 0 }));
|
|
}
|
|
}
|
|
return files;
|
|
}
|
|
|
|
function slashCommandPrefix(draft: string): string | null {
|
|
if (!draft.startsWith("/")) return null;
|
|
if (/\s/.test(draft)) return null;
|
|
return draft;
|
|
}
|
|
|
|
function slashCommandInvocation(text: string): SlashCommandInvocation | null {
|
|
if (!text.startsWith("/")) return null;
|
|
const [name, ...argumentParts] = text.split(/\s+/);
|
|
if (!name) return null;
|
|
const rawArguments = argumentParts.join(" ").trim();
|
|
return {
|
|
name,
|
|
arguments: rawArguments ? [rawArguments] : [],
|
|
};
|
|
}
|
|
|
|
function isSlashCommandAvailable(command: SlashCommand): boolean {
|
|
return command.availability.status === "available";
|
|
}
|
|
|
|
function formatSlashCommandHelp(commands: SlashCommand[]): string {
|
|
return commands
|
|
.map((command) => `${command.name} - ${command.shortDescription}`)
|
|
.join("\n");
|
|
}
|
|
|
|
function foldChunk(state: ChatViewState, raw: unknown): ChatViewState {
|
|
const { turns } = state;
|
|
if (!isReplyRecord(raw)) {
|
|
return {
|
|
turns: [...turns, { role: "unknown", text: unknownChunkLabel(raw) }],
|
|
progressIndex: state.progressIndex,
|
|
};
|
|
}
|
|
const last = turns[turns.length - 1];
|
|
if (
|
|
(last?.role === "final" || last?.role === "error") &&
|
|
raw.kind !== "userPrompt" &&
|
|
raw.kind !== "UserPrompt"
|
|
) {
|
|
if (isRecoverableNoResponseTurn(last) && raw.kind !== "error") {
|
|
return foldChunk({ ...state, turns: turns.slice(0, -1) }, raw);
|
|
}
|
|
return state;
|
|
}
|
|
switch (raw.kind) {
|
|
case "textDelta":
|
|
return {
|
|
turns: appendAgentDelta(turns, String(raw.text ?? "")),
|
|
progressIndex: state.progressIndex,
|
|
};
|
|
case "toolActivity":
|
|
return {
|
|
turns: [...turns, { role: "tool", label: String(raw.label ?? "Activité") }],
|
|
progressIndex: state.progressIndex,
|
|
};
|
|
case "progress": {
|
|
const progress = normalizeProgress(raw.progress);
|
|
if (!progress) {
|
|
return {
|
|
turns: [...turns, { role: "unknown", text: unknownChunkLabel(raw) }],
|
|
progressIndex: state.progressIndex,
|
|
};
|
|
}
|
|
return appendProgress(state, progress);
|
|
}
|
|
case "final": {
|
|
const content = String(raw.content ?? "");
|
|
const completedState = completeChatViewProgress(state);
|
|
const next = [...completedState.turns];
|
|
const last = next[next.length - 1];
|
|
if (last?.role === "agent") next[next.length - 1] = { ...last, pending: false };
|
|
next.push({ role: "final", text: content });
|
|
return { turns: next, progressIndex: completedState.progressIndex };
|
|
}
|
|
case "error": {
|
|
const completedState = completeChatViewProgress(state);
|
|
const next = [...completedState.turns];
|
|
const last = next[next.length - 1];
|
|
if (last?.role === "agent") next[next.length - 1] = { ...last, pending: false };
|
|
next.push({ role: "error", text: String(raw.message ?? "Erreur agent") });
|
|
return { turns: next, progressIndex: completedState.progressIndex };
|
|
}
|
|
case "userPrompt":
|
|
case "UserPrompt":
|
|
return {
|
|
turns: appendUserPrompt(
|
|
turns,
|
|
String(raw.text ?? raw.prompt ?? ""),
|
|
attachmentLabels(raw.attachments),
|
|
),
|
|
progressIndex: state.progressIndex,
|
|
};
|
|
default:
|
|
return {
|
|
turns: [...turns, { role: "unknown", text: unknownChunkLabel(raw) }],
|
|
progressIndex: state.progressIndex,
|
|
};
|
|
}
|
|
}
|
|
|
|
export function CustomAgentChatView({
|
|
projectId,
|
|
agentId,
|
|
agentName,
|
|
profile,
|
|
cwd,
|
|
layoutId,
|
|
nodeId,
|
|
sessionId,
|
|
conversationId,
|
|
composerHeightPx = FALLBACK_COMPOSER_HEIGHT,
|
|
composerDefaultHeightPx = FALLBACK_COMPOSER_HEIGHT,
|
|
onComposerHeightPxChange,
|
|
onSessionId,
|
|
onConversationId,
|
|
}: CustomAgentChatViewProps) {
|
|
const { agent, profile: profileGateway, system } = useGateways();
|
|
const pluginRuntime = usePluginRuntime();
|
|
const [turns, setTurns] = useState<ChatTurn[]>(
|
|
() => (sessionId ? (chatSessionViewCache.get(sessionId)?.turns ?? []) : []),
|
|
);
|
|
const [progressIndex, setProgressIndex] = useState<Map<string, ProgressIndexEntry>>(new Map());
|
|
const [currentSession, setCurrentSession] = useState(sessionId);
|
|
const [externalSessionId, setExternalSessionId] = useState(sessionId);
|
|
const [draft, setDraft] = useState("");
|
|
const [attachments, setAttachments] = useState<AttachmentDraft[]>([]);
|
|
const [slashCommands, setSlashCommands] = useState<SlashCommand[]>([]);
|
|
const [slashMenuOpen, setSlashMenuOpen] = useState(false);
|
|
const [slashActiveIndex, setSlashActiveIndex] = useState(0);
|
|
const [profileDialog, setProfileDialog] =
|
|
useState<ProfileCommandDialogState | null>(null);
|
|
const [opening, setOpening] = useState(Boolean(sessionId));
|
|
const [busy, setBusy] = useState(false);
|
|
const [stopping, setStopping] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const scrollRef = useRef<HTMLDivElement | null>(null);
|
|
const composerRef = useRef<HTMLTextAreaElement | null>(null);
|
|
const chatRootRef = useRef<HTMLDivElement | null>(null);
|
|
const turnsRef = useRef(turns);
|
|
const progressIndexRef = useRef(progressIndex);
|
|
const sessionRef = useRef<string | null>(sessionId);
|
|
sessionRef.current = currentSession;
|
|
const scrollbackChunkCountRef = useRef(
|
|
sessionId ? (chatSessionViewCache.get(sessionId)?.chunkCount ?? 0) : 0,
|
|
);
|
|
const detachAgentChatRef = useRef(agent.detachAgentChat);
|
|
detachAgentChatRef.current = agent.detachAgentChat;
|
|
const slashQuerySeqRef = useRef(0);
|
|
const draftSaveSeqRef = useRef(0);
|
|
const interactionSeqRef = useRef(0);
|
|
const activeInteractionIdRef = useRef<string | null>(null);
|
|
const draftHydratedRef = useRef(false);
|
|
const draftEditedBeforeHydrationRef = useRef(false);
|
|
const lastPersistedDraftRef = useRef("");
|
|
const draftRef = useRef("");
|
|
draftRef.current = draft;
|
|
const attachmentsRef = useRef<AttachmentDraft[]>([]);
|
|
attachmentsRef.current = attachments;
|
|
const imageTokenSeqRef = useRef(0);
|
|
const mountedRef = useRef(false);
|
|
const openOrAttachCountRef = useRef(0);
|
|
const selfEmittedSessionIdRef = useRef<string | null | undefined>(undefined);
|
|
const onSessionIdRef = useRef(onSessionId);
|
|
onSessionIdRef.current = onSessionId;
|
|
const onConversationIdRef = useRef(onConversationId);
|
|
onConversationIdRef.current = onConversationId;
|
|
|
|
const clampComposerHeight = useCallback(
|
|
(heightPx: number): number => {
|
|
const visibleHeight =
|
|
chatRootRef.current?.getBoundingClientRect().height ??
|
|
composerRef.current?.closest<HTMLElement>("[data-custom-chat-shell]")
|
|
?.getBoundingClientRect().height ??
|
|
0;
|
|
const maxHeight =
|
|
visibleHeight > 0
|
|
? Math.max(composerDefaultHeightPx, Math.floor(visibleHeight * 0.5))
|
|
: Number.POSITIVE_INFINITY;
|
|
return Math.round(
|
|
Math.min(Math.max(heightPx, composerDefaultHeightPx), maxHeight),
|
|
);
|
|
},
|
|
[composerDefaultHeightPx],
|
|
);
|
|
|
|
const commitComposerHeight = useCallback(
|
|
(heightPx: number): void => {
|
|
onComposerHeightPxChange?.(clampComposerHeight(heightPx));
|
|
},
|
|
[clampComposerHeight, onComposerHeightPxChange],
|
|
);
|
|
|
|
const startComposerResize = useCallback(
|
|
(event: ReactMouseEvent<HTMLButtonElement>) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
const startY = event.clientY;
|
|
const startHeight = composerHeightPx;
|
|
const onMove = (moveEvent: MouseEvent) => {
|
|
commitComposerHeight(startHeight + startY - moveEvent.clientY);
|
|
};
|
|
const onUp = () => {
|
|
window.removeEventListener("mousemove", onMove);
|
|
window.removeEventListener("mouseup", onUp);
|
|
};
|
|
window.addEventListener("mousemove", onMove);
|
|
window.addEventListener("mouseup", onUp);
|
|
},
|
|
[commitComposerHeight, composerHeightPx],
|
|
);
|
|
|
|
const handleComposerResizeKeyDown = useCallback(
|
|
(event: KeyboardEvent<HTMLButtonElement>) => {
|
|
if (event.key === "ArrowUp") {
|
|
event.preventDefault();
|
|
commitComposerHeight(composerHeightPx + COMPOSER_RESIZE_STEP);
|
|
} else if (event.key === "ArrowDown") {
|
|
event.preventDefault();
|
|
commitComposerHeight(composerHeightPx - COMPOSER_RESIZE_STEP);
|
|
}
|
|
},
|
|
[commitComposerHeight, composerHeightPx],
|
|
);
|
|
|
|
const applyChatViewState = useCallback((next: ChatViewState) => {
|
|
turnsRef.current = next.turns;
|
|
progressIndexRef.current = next.progressIndex;
|
|
setTurns(next.turns);
|
|
setProgressIndex(next.progressIndex);
|
|
}, []);
|
|
|
|
const updateChatViewState = useCallback(
|
|
(updater: (prev: ChatViewState) => ChatViewState) => {
|
|
applyChatViewState(
|
|
updater({
|
|
turns: turnsRef.current,
|
|
progressIndex: progressIndexRef.current,
|
|
}),
|
|
);
|
|
},
|
|
[applyChatViewState],
|
|
);
|
|
|
|
const supported = Boolean(
|
|
profile.structuredAdapter &&
|
|
agent.launchAgentChat &&
|
|
agent.reattachAgentChat &&
|
|
agent.sendAgentChat &&
|
|
agent.cancelAgentChat &&
|
|
agent.closeAgentChat,
|
|
);
|
|
const slashPrefix = slashCommandPrefix(draft);
|
|
const draftScope = useMemo<ChatDraftScope | null>(
|
|
() => (layoutId ? { projectId, layoutId, nodeId } : null),
|
|
[layoutId, nodeId, projectId],
|
|
);
|
|
const displayTurns = turns;
|
|
|
|
const clearPersistedDraft = useCallback(async () => {
|
|
if (!draftScope) return;
|
|
draftSaveSeqRef.current += 1;
|
|
lastPersistedDraftRef.current = "";
|
|
try {
|
|
if (agent.clearChatDraft) {
|
|
await agent.clearChatDraft(draftScope);
|
|
} else if (agent.saveChatDraft) {
|
|
await agent.saveChatDraft(draftScope, "");
|
|
}
|
|
} catch (e) {
|
|
console.warn("[chat-draft] clear failed", instrumentationError(e));
|
|
}
|
|
}, [agent, draftScope]);
|
|
|
|
const editDraft = useCallback((text: string) => {
|
|
if (!draftHydratedRef.current) draftEditedBeforeHydrationRef.current = true;
|
|
setDraft(text);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
mountedRef.current = true;
|
|
return () => {
|
|
mountedRef.current = false;
|
|
const sid = sessionRef.current;
|
|
if (!sid) return;
|
|
void detachAgentChatRef.current?.(sid).catch((e) => {
|
|
if (!isNotFound(e)) {
|
|
console.warn("[ticket188] detachAgentChat failed", instrumentationError(e));
|
|
}
|
|
});
|
|
};
|
|
}, []);
|
|
|
|
const receive = useCallback(
|
|
(chunk: ReplyChunk) => {
|
|
scrollbackChunkCountRef.current += 1;
|
|
const activeInteractionId = activeInteractionIdRef.current;
|
|
if (
|
|
activeInteractionId &&
|
|
chunk.kind === "progress" &&
|
|
chunk.progress.kind === "turn"
|
|
) {
|
|
if (
|
|
chunk.progress.stage === "started" ||
|
|
chunk.progress.stage === "delta"
|
|
) {
|
|
markProjectCliInteractionStarted(projectId, activeInteractionId);
|
|
}
|
|
if (chunk.progress.stage === "completed") {
|
|
markProjectCliInteractionFinished(projectId, activeInteractionId);
|
|
activeInteractionIdRef.current = null;
|
|
}
|
|
}
|
|
updateChatViewState((prev) => foldChunk(prev, chunk));
|
|
if (chunk.kind === "final" || chunk.kind === "error") {
|
|
if (activeInteractionIdRef.current) {
|
|
markProjectCliInteractionFinished(projectId, activeInteractionIdRef.current);
|
|
activeInteractionIdRef.current = null;
|
|
}
|
|
setBusy(false);
|
|
}
|
|
},
|
|
[projectId, updateChatViewState],
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!currentSession) return;
|
|
chatSessionViewCache.set(currentSession, {
|
|
turns,
|
|
progressIndex,
|
|
chunkCount: scrollbackChunkCountRef.current,
|
|
});
|
|
}, [currentSession, progressIndex, turns]);
|
|
|
|
useEffect(() => {
|
|
draftSaveSeqRef.current += 1;
|
|
draftHydratedRef.current = false;
|
|
draftEditedBeforeHydrationRef.current = false;
|
|
lastPersistedDraftRef.current = "";
|
|
setDraft("");
|
|
if (!draftScope || !agent.readChatDraft) {
|
|
draftHydratedRef.current = true;
|
|
return;
|
|
}
|
|
|
|
let cancelled = false;
|
|
agent
|
|
.readChatDraft(draftScope)
|
|
.then((snapshot) => {
|
|
if (cancelled || !mountedRef.current) return;
|
|
const restored = snapshot.text ?? "";
|
|
lastPersistedDraftRef.current = restored;
|
|
if (!draftEditedBeforeHydrationRef.current) {
|
|
setDraft(restored);
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
if (!cancelled) {
|
|
console.warn("[chat-draft] read failed", instrumentationError(e));
|
|
}
|
|
})
|
|
.finally(() => {
|
|
if (!cancelled) {
|
|
draftHydratedRef.current = true;
|
|
if (
|
|
draftEditedBeforeHydrationRef.current &&
|
|
agent.saveChatDraft &&
|
|
draftRef.current !== lastPersistedDraftRef.current
|
|
) {
|
|
const text = draftRef.current;
|
|
void agent
|
|
.saveChatDraft(draftScope, text)
|
|
.then(() => {
|
|
lastPersistedDraftRef.current = text;
|
|
})
|
|
.catch((e) => {
|
|
console.warn("[chat-draft] save failed", instrumentationError(e));
|
|
});
|
|
}
|
|
}
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [agent, draftScope]);
|
|
|
|
useEffect(() => {
|
|
if (!draftScope || !agent.saveChatDraft || !draftHydratedRef.current) return;
|
|
if (draft === lastPersistedDraftRef.current) return;
|
|
|
|
const seq = ++draftSaveSeqRef.current;
|
|
const timeout = window.setTimeout(() => {
|
|
if (draftSaveSeqRef.current !== seq) return;
|
|
agent
|
|
.saveChatDraft!(draftScope, draft)
|
|
.then(() => {
|
|
if (draftSaveSeqRef.current === seq) {
|
|
lastPersistedDraftRef.current = draft;
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
console.warn("[chat-draft] save failed", instrumentationError(e));
|
|
});
|
|
}, 250);
|
|
return () => window.clearTimeout(timeout);
|
|
}, [agent, draft, draftScope]);
|
|
|
|
useEffect(() => {
|
|
if (
|
|
!supported ||
|
|
!agent.listSlashCommands ||
|
|
slashPrefix === null ||
|
|
busy ||
|
|
opening
|
|
) {
|
|
setSlashMenuOpen(false);
|
|
setSlashCommands([]);
|
|
setSlashActiveIndex(0);
|
|
return;
|
|
}
|
|
|
|
const seq = ++slashQuerySeqRef.current;
|
|
agent
|
|
.listSlashCommands(slashPrefix)
|
|
.then((commands) => {
|
|
if (slashQuerySeqRef.current !== seq) return;
|
|
setSlashCommands(commands);
|
|
setSlashMenuOpen(commands.length > 0);
|
|
const firstAvailable = commands.findIndex(isSlashCommandAvailable);
|
|
setSlashActiveIndex(firstAvailable >= 0 ? firstAvailable : 0);
|
|
})
|
|
.catch(() => {
|
|
if (slashQuerySeqRef.current !== seq) return;
|
|
setSlashCommands([]);
|
|
setSlashMenuOpen(false);
|
|
setSlashActiveIndex(0);
|
|
});
|
|
}, [agent, busy, opening, slashPrefix, supported]);
|
|
|
|
const selectSlashCommand = useCallback((command: SlashCommand) => {
|
|
if (!isSlashCommandAvailable(command)) return;
|
|
editDraft(`${command.name} `);
|
|
setSlashMenuOpen(false);
|
|
setSlashCommands([]);
|
|
setSlashActiveIndex(0);
|
|
requestAnimationFrame(() => composerRef.current?.focus());
|
|
}, [editDraft]);
|
|
|
|
const publishSessionId = useCallback((nextSessionId: string | null) => {
|
|
selfEmittedSessionIdRef.current = nextSessionId;
|
|
onSessionIdRef.current(nextSessionId);
|
|
}, []);
|
|
|
|
const reattachStructuredSession = useCallback(
|
|
async (sid: string, options: { applyScrollback?: boolean } = {}) => {
|
|
if (!agent.reattachAgentChat) throw new Error("Structured reattach unavailable");
|
|
console.debug("[ticket149] reattachStructuredSession:start", {
|
|
timestamp: new Date().toISOString(),
|
|
sessionId: sid,
|
|
options,
|
|
});
|
|
let reattached: Awaited<ReturnType<NonNullable<typeof agent.reattachAgentChat>>>;
|
|
try {
|
|
reattached = await agent.reattachAgentChat(sid, receive);
|
|
} catch (e) {
|
|
console.error("[ticket149] reattachStructuredSession:error", {
|
|
timestamp: new Date().toISOString(),
|
|
sessionId: sid,
|
|
error: instrumentationError(e),
|
|
});
|
|
throw e;
|
|
}
|
|
console.debug("[ticket149] reattachStructuredSession:success", {
|
|
timestamp: new Date().toISOString(),
|
|
requestedSessionId: sid,
|
|
returnedSessionId: reattached.sessionId,
|
|
scrollbackCount: reattached.scrollback.length,
|
|
});
|
|
if (!mountedRef.current) return reattached.sessionId;
|
|
setCurrentSession(reattached.sessionId);
|
|
if (options.applyScrollback) {
|
|
scrollbackChunkCountRef.current = reattached.scrollback.length;
|
|
const replayed = reattached.scrollback.reduce(foldChunk, emptyChatViewState());
|
|
applyChatViewState(replayed);
|
|
setBusy(turnsIndicateBusy(replayed));
|
|
}
|
|
return reattached.sessionId;
|
|
},
|
|
[agent, applyChatViewState, receive],
|
|
);
|
|
|
|
const recoverStructuredSession = useCallback(
|
|
async (
|
|
options: {
|
|
applyScrollback?: boolean;
|
|
retryAttachNotFound?: boolean;
|
|
conversationId?: string | null;
|
|
} = {},
|
|
) => {
|
|
if (!agent.launchAgentChat) throw new Error("Structured launch unavailable");
|
|
console.debug("[ticket149] recoverStructuredSession:start", {
|
|
timestamp: new Date().toISOString(),
|
|
currentSession: sessionRef.current,
|
|
conversationId,
|
|
options,
|
|
});
|
|
let retryAttachNotFound = Boolean(options.retryAttachNotFound);
|
|
for (;;) {
|
|
const launchRequest = {
|
|
cwd,
|
|
rows: 24,
|
|
cols: 80,
|
|
conversationId:
|
|
options.conversationId === undefined
|
|
? conversationId ?? undefined
|
|
: options.conversationId ?? undefined,
|
|
nodeId,
|
|
};
|
|
console.debug("[ticket149] recoverStructuredSession:launchAgentChat:start", {
|
|
timestamp: new Date().toISOString(),
|
|
projectId,
|
|
agentId,
|
|
request: launchRequest,
|
|
options,
|
|
retryAttachNotFound,
|
|
});
|
|
let launched: Awaited<ReturnType<NonNullable<typeof agent.launchAgentChat>>>;
|
|
try {
|
|
launched = await agent.launchAgentChat(projectId, agentId, launchRequest);
|
|
} catch (e) {
|
|
console.error("[ticket149] recoverStructuredSession:launchAgentChat:error", {
|
|
timestamp: new Date().toISOString(),
|
|
projectId,
|
|
agentId,
|
|
request: launchRequest,
|
|
error: instrumentationError(e),
|
|
});
|
|
throw e;
|
|
}
|
|
console.debug("[ticket149] recoverStructuredSession:launchAgentChat:success", {
|
|
timestamp: new Date().toISOString(),
|
|
projectId,
|
|
agentId,
|
|
launched,
|
|
});
|
|
if (!mountedRef.current) return launched.sessionId;
|
|
scrollbackChunkCountRef.current = 0;
|
|
setCurrentSession(launched.sessionId);
|
|
publishSessionId(launched.sessionId);
|
|
if (launched.assignedConversationId) {
|
|
onConversationIdRef.current(launched.assignedConversationId);
|
|
}
|
|
try {
|
|
const recoveredSessionId = await reattachStructuredSession(launched.sessionId, {
|
|
applyScrollback: options.applyScrollback,
|
|
});
|
|
console.debug("[ticket149] recoverStructuredSession:success", {
|
|
timestamp: new Date().toISOString(),
|
|
launchedSessionId: launched.sessionId,
|
|
recoveredSessionId,
|
|
});
|
|
return recoveredSessionId;
|
|
} catch (e) {
|
|
if (isNotFound(e) && retryAttachNotFound) {
|
|
retryAttachNotFound = false;
|
|
if (mountedRef.current) {
|
|
setCurrentSession(null);
|
|
publishSessionId(null);
|
|
}
|
|
continue;
|
|
}
|
|
console.error("[ticket149] recoverStructuredSession:reattach:error", {
|
|
timestamp: new Date().toISOString(),
|
|
launchedSessionId: launched.sessionId,
|
|
error: instrumentationError(e),
|
|
});
|
|
throw e;
|
|
}
|
|
}
|
|
},
|
|
[
|
|
agent,
|
|
projectId,
|
|
agentId,
|
|
cwd,
|
|
nodeId,
|
|
conversationId,
|
|
reattachStructuredSession,
|
|
publishSessionId,
|
|
],
|
|
);
|
|
|
|
useEffect(() => {
|
|
const el = scrollRef.current;
|
|
if (el) el.scrollTop = el.scrollHeight;
|
|
}, [displayTurns]);
|
|
|
|
useEffect(() => {
|
|
if (selfEmittedSessionIdRef.current === sessionId) {
|
|
console.debug("[ticket149] openOrAttach:self-session-echo:skip", {
|
|
timestamp: new Date().toISOString(),
|
|
sessionId,
|
|
});
|
|
selfEmittedSessionIdRef.current = undefined;
|
|
return;
|
|
}
|
|
setExternalSessionId(sessionId);
|
|
}, [sessionId]);
|
|
|
|
useEffect(() => {
|
|
if (!supported) return;
|
|
let cancelled = false;
|
|
|
|
async function openOrAttach() {
|
|
const execution = openOrAttachCountRef.current + 1;
|
|
openOrAttachCountRef.current = execution;
|
|
console.debug("[ticket149] openOrAttach:start", {
|
|
timestamp: new Date().toISOString(),
|
|
execution,
|
|
sessionId: externalSessionId,
|
|
});
|
|
setOpening(true);
|
|
setError(null);
|
|
try {
|
|
if (externalSessionId) {
|
|
const cached = chatSessionViewCache.get(externalSessionId);
|
|
if (cached) {
|
|
scrollbackChunkCountRef.current = cached.chunkCount;
|
|
applyChatViewState({
|
|
turns: cached.turns,
|
|
progressIndex: cached.progressIndex ?? new Map(),
|
|
});
|
|
}
|
|
try {
|
|
await reattachStructuredSession(externalSessionId, { applyScrollback: true });
|
|
if (cancelled) return;
|
|
console.debug("[ticket149] openOrAttach:reattach-existing:success", {
|
|
timestamp: new Date().toISOString(),
|
|
execution,
|
|
sessionId: externalSessionId,
|
|
});
|
|
return;
|
|
} catch (e) {
|
|
// The backend contract for `reattach_agent_chat` (NOT_FOUND) is that
|
|
// the session is gone (closed/never live) and the caller falls back
|
|
// to a fresh launch — any other error still surfaces to the user.
|
|
if (!isNotFound(e)) throw e;
|
|
if (!cancelled) {
|
|
setCurrentSession(null);
|
|
publishSessionId(null);
|
|
}
|
|
console.debug("[ticket149] openOrAttach:reattach-existing:not-found", {
|
|
timestamp: new Date().toISOString(),
|
|
execution,
|
|
sessionId: externalSessionId,
|
|
error: instrumentationError(e),
|
|
});
|
|
}
|
|
}
|
|
await recoverStructuredSession({
|
|
applyScrollback: false,
|
|
retryAttachNotFound: true,
|
|
});
|
|
if (cancelled) return;
|
|
console.debug("[ticket149] openOrAttach:recover:success", {
|
|
timestamp: new Date().toISOString(),
|
|
execution,
|
|
receivedSessionId: externalSessionId,
|
|
});
|
|
} catch (e) {
|
|
console.error("[ticket149] openOrAttach:error", {
|
|
timestamp: new Date().toISOString(),
|
|
execution,
|
|
sessionId: externalSessionId,
|
|
error: instrumentationError(e),
|
|
});
|
|
if (!cancelled) setError(describe(e));
|
|
} finally {
|
|
if (!cancelled) setOpening(false);
|
|
}
|
|
}
|
|
|
|
void openOrAttach();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [
|
|
supported,
|
|
externalSessionId,
|
|
reattachStructuredSession,
|
|
recoverStructuredSession,
|
|
publishSessionId,
|
|
applyChatViewState,
|
|
]);
|
|
|
|
const canSend = useMemo(
|
|
() =>
|
|
supported &&
|
|
(Boolean(draft.trim()) || attachments.length > 0) &&
|
|
!busy &&
|
|
!opening,
|
|
[supported, draft, attachments.length, busy, opening],
|
|
);
|
|
|
|
async function openProfileDialog() {
|
|
const availableProfiles = (await profileGateway.listProfiles()).filter((candidate) =>
|
|
Boolean(candidate.structuredAdapter),
|
|
);
|
|
if (availableProfiles.length === 0) {
|
|
throw new Error("Aucun profil compatible avec la CLI custom n'est configuré.");
|
|
}
|
|
setDraft("");
|
|
setProfileDialog({
|
|
profiles: availableProfiles,
|
|
selectedProfileId:
|
|
availableProfiles.find((candidate) => candidate.id !== profile.id)?.id ??
|
|
availableProfiles[0].id,
|
|
confirmedReset: false,
|
|
busy: false,
|
|
error: null,
|
|
});
|
|
}
|
|
|
|
async function confirmProfileCommandChange() {
|
|
if (!profileDialog) return;
|
|
if (!agent.changeAgentProfile) {
|
|
setProfileDialog((prev) =>
|
|
prev ? { ...prev, error: "Changement de profil indisponible." } : prev,
|
|
);
|
|
return;
|
|
}
|
|
const selected = profileDialog.profiles.find(
|
|
(candidate) => candidate.id === profileDialog.selectedProfileId,
|
|
);
|
|
if (!selected) return;
|
|
|
|
setProfileDialog((prev) => (prev ? { ...prev, busy: true, error: null } : prev));
|
|
try {
|
|
const { relaunchedSession } = await agent.changeAgentProfile(
|
|
projectId,
|
|
agentId,
|
|
selected.id,
|
|
24,
|
|
80,
|
|
);
|
|
applyChatViewState(emptyChatViewState());
|
|
setCurrentSession(null);
|
|
publishSessionId(null);
|
|
onConversationIdRef.current(null);
|
|
|
|
if (relaunchedSession?.sessionId) {
|
|
try {
|
|
setCurrentSession(relaunchedSession.sessionId);
|
|
publishSessionId(relaunchedSession.sessionId);
|
|
await reattachStructuredSession(relaunchedSession.sessionId, {
|
|
applyScrollback: false,
|
|
});
|
|
} catch {
|
|
await recoverStructuredSession({
|
|
applyScrollback: false,
|
|
retryAttachNotFound: true,
|
|
conversationId: null,
|
|
});
|
|
}
|
|
} else {
|
|
await recoverStructuredSession({
|
|
applyScrollback: false,
|
|
retryAttachNotFound: true,
|
|
conversationId: null,
|
|
});
|
|
}
|
|
|
|
applyChatViewState({
|
|
turns: [{ role: "tool", label: `Profil changé vers ${selected.name}.` }],
|
|
progressIndex: new Map(),
|
|
});
|
|
setProfileDialog(null);
|
|
} catch (e) {
|
|
setProfileDialog((prev) =>
|
|
prev ? { ...prev, busy: false, error: describe(e) } : prev,
|
|
);
|
|
}
|
|
}
|
|
|
|
async function executeSlashCommand(invocation: SlashCommandInvocation) {
|
|
if (!agent.executeSlashCommand) {
|
|
setError(`Commande ${invocation.name} indisponible dans ce runtime.`);
|
|
return;
|
|
}
|
|
setDraft("");
|
|
void clearPersistedDraft();
|
|
setError(null);
|
|
try {
|
|
const sid =
|
|
currentSession ??
|
|
(await recoverStructuredSession({
|
|
applyScrollback: false,
|
|
retryAttachNotFound: true,
|
|
}));
|
|
const result = await agent.executeSlashCommand(invocation.name, {
|
|
sessionId: sid,
|
|
...(invocation.arguments.length > 0
|
|
? { arguments: invocation.arguments }
|
|
: {}),
|
|
});
|
|
if (result.effect.kind === "help") {
|
|
const helpText = formatSlashCommandHelp(result.effect.commands);
|
|
updateChatViewState((prev) => ({
|
|
turns: [...prev.turns, { role: "agent", text: helpText }],
|
|
progressIndex: prev.progressIndex,
|
|
}));
|
|
return;
|
|
}
|
|
if (result.effect.kind === "cleanConversation") {
|
|
applyChatViewState(emptyChatViewState());
|
|
return;
|
|
}
|
|
if (result.effect.kind === "profileSwitch") {
|
|
await openProfileDialog();
|
|
return;
|
|
}
|
|
if (result.effect.kind === "pluginCallback") {
|
|
await pluginRuntime.registry.runCommandStrict(
|
|
result.effect.pluginId,
|
|
result.effect.commandId,
|
|
...result.effect.arguments,
|
|
);
|
|
updateChatViewState((prev) => ({
|
|
turns: [
|
|
...prev.turns,
|
|
{ role: "tool", label: `Commande plugin ${result.command.name} exécutée.` },
|
|
],
|
|
progressIndex: prev.progressIndex,
|
|
}));
|
|
return;
|
|
}
|
|
} catch (e) {
|
|
const message = `Commande ${invocation.name} échouée: ${describe(e)}`;
|
|
setError(message);
|
|
updateChatViewState((prev) => ({
|
|
turns: [...prev.turns, { role: "error", text: message }],
|
|
progressIndex: prev.progressIndex,
|
|
}));
|
|
}
|
|
}
|
|
|
|
async function pickAttachment() {
|
|
const path = await system.pickFile();
|
|
if (path) {
|
|
setAttachments((prev) => [
|
|
...prev,
|
|
{
|
|
id: `path-${Date.now()}-${Math.random().toString(36).slice(2)}`,
|
|
label: pathBasename(path),
|
|
input: { path, sourceKind: "localFile" },
|
|
},
|
|
]);
|
|
}
|
|
}
|
|
|
|
function removeAttachment(item: AttachmentDraft) {
|
|
setAttachments((prev) =>
|
|
prev.filter((candidate) => candidate.id !== item.id),
|
|
);
|
|
if (item.token) {
|
|
editDraft(removeAttachmentToken(draftRef.current, item.token));
|
|
}
|
|
}
|
|
|
|
async function pasteClipboardFiles(
|
|
event: ClipboardEvent<HTMLTextAreaElement>,
|
|
) {
|
|
const target = event.currentTarget;
|
|
const pastedText = event.clipboardData.getData("text/plain");
|
|
const selectionStart = target.selectionStart;
|
|
const selectionEnd = target.selectionEnd;
|
|
const filesFromEvent = dataTransferFiles(event.clipboardData);
|
|
try {
|
|
const files =
|
|
filesFromEvent.length > 0 ? filesFromEvent : await asyncClipboardImageFiles();
|
|
if (files.length === 0) return;
|
|
|
|
if (filesFromEvent.length > 0) event.preventDefault();
|
|
const nextAttachments = await Promise.all(
|
|
files.map(clipboardFileToAttachment),
|
|
);
|
|
const known = new Set(
|
|
attachmentsRef.current
|
|
.map((attachment) => attachment.dedupeKey)
|
|
.filter((key): key is string => Boolean(key)),
|
|
);
|
|
const uniqueAttachments = nextAttachments
|
|
.filter((attachment) => {
|
|
if (!attachment.dedupeKey) return true;
|
|
if (known.has(attachment.dedupeKey)) return false;
|
|
known.add(attachment.dedupeKey);
|
|
return true;
|
|
})
|
|
.map((attachment) => {
|
|
if (!attachment.previewUrl) return attachment;
|
|
const token = `[Image ${++imageTokenSeqRef.current}]`;
|
|
return { ...attachment, token };
|
|
});
|
|
if (uniqueAttachments.length > 0) {
|
|
setAttachments((prev) => [...prev, ...uniqueAttachments]);
|
|
}
|
|
const imageTokens = uniqueAttachments
|
|
.map((attachment) => attachment.token)
|
|
.filter((token): token is string => Boolean(token));
|
|
const insertionParts = [
|
|
...(pastedText ? [pastedText] : []),
|
|
...(imageTokens.length > 0 ? [imageTokens.join(" ")] : []),
|
|
];
|
|
if (insertionParts.length > 0) {
|
|
if (!draftHydratedRef.current) draftEditedBeforeHydrationRef.current = true;
|
|
setDraft((prev) =>
|
|
insertTextAtSelection(
|
|
prev,
|
|
insertionParts.join(" "),
|
|
selectionStart,
|
|
selectionEnd,
|
|
),
|
|
);
|
|
}
|
|
} catch (e) {
|
|
setError(describe(e));
|
|
}
|
|
}
|
|
|
|
async function send() {
|
|
const text = draft.trim();
|
|
if (!canSend || !agent.sendAgentChat) return;
|
|
const slashInvocation = slashCommandInvocation(text);
|
|
if (slashInvocation) {
|
|
await executeSlashCommand(slashInvocation);
|
|
return;
|
|
}
|
|
const outgoingAttachments = attachments;
|
|
const attachmentInputs = outgoingAttachments.map((item) => item.input);
|
|
const attachmentLabels = outgoingAttachments.map((item) => item.label);
|
|
const displayText = text || "Pièce jointe";
|
|
const interactionId = `${agentId}:${++interactionSeqRef.current}`;
|
|
activeInteractionIdRef.current = interactionId;
|
|
markProjectCliInteractionStarted(projectId, interactionId);
|
|
const finishInteraction = () => {
|
|
if (activeInteractionIdRef.current !== interactionId) return;
|
|
markProjectCliInteractionFinished(projectId, interactionId);
|
|
activeInteractionIdRef.current = null;
|
|
};
|
|
setDraft("");
|
|
setAttachments([]);
|
|
imageTokenSeqRef.current = 0;
|
|
void clearPersistedDraft();
|
|
setBusy(true);
|
|
setError(null);
|
|
updateChatViewState((prev) => ({
|
|
turns: [
|
|
...prev.turns,
|
|
{
|
|
role: "user",
|
|
text: displayText,
|
|
...(attachmentLabels.length > 0 ? { attachments: attachmentLabels } : {}),
|
|
},
|
|
],
|
|
progressIndex: prev.progressIndex,
|
|
}));
|
|
const sendTurn = (sid: string) =>
|
|
attachmentInputs.length > 0
|
|
? agent.sendAgentChat!(sid, text, receive, { attachments: attachmentInputs })
|
|
: agent.sendAgentChat!(sid, text, receive);
|
|
try {
|
|
const sid =
|
|
currentSession ??
|
|
(await recoverStructuredSession({
|
|
applyScrollback: false,
|
|
retryAttachNotFound: true,
|
|
}));
|
|
await sendTurn(sid);
|
|
finishInteraction();
|
|
} catch (e) {
|
|
if (isNotFound(e)) {
|
|
try {
|
|
setCurrentSession(null);
|
|
publishSessionId(null);
|
|
const recoveredSession = await recoverStructuredSession({
|
|
applyScrollback: false,
|
|
retryAttachNotFound: true,
|
|
});
|
|
await sendTurn(recoveredSession);
|
|
finishInteraction();
|
|
return;
|
|
} catch (recoveryError) {
|
|
finishInteraction();
|
|
setBusy(false);
|
|
setError(describe(recoveryError));
|
|
updateChatViewState((prev) => ({
|
|
turns: [...prev.turns, { role: "error", text: describe(recoveryError) }],
|
|
progressIndex: prev.progressIndex,
|
|
}));
|
|
return;
|
|
}
|
|
}
|
|
finishInteraction();
|
|
setBusy(false);
|
|
setError(describe(e));
|
|
updateChatViewState((prev) => ({
|
|
turns: [...prev.turns, { role: "error", text: describe(e) }],
|
|
progressIndex: prev.progressIndex,
|
|
}));
|
|
}
|
|
}
|
|
|
|
async function stopAgent() {
|
|
const sid = sessionRef.current;
|
|
if (!sid || !agent.stopLiveAgent || stopping) return;
|
|
setStopping(true);
|
|
setError(null);
|
|
try {
|
|
const stopped = await agent.stopLiveAgent(projectId, agentId);
|
|
if (activeInteractionIdRef.current) {
|
|
markProjectCliInteractionStopped(projectId, activeInteractionIdRef.current);
|
|
activeInteractionIdRef.current = null;
|
|
}
|
|
setBusy(false);
|
|
setOpening(false);
|
|
setCurrentSession(null);
|
|
publishSessionId(null);
|
|
updateChatViewState((prev) => {
|
|
const completed = completeChatViewProgress(prev);
|
|
return {
|
|
turns: [
|
|
...completed.turns,
|
|
{
|
|
role: "tool",
|
|
label:
|
|
stopped.kind === "structured"
|
|
? "Agent arrêté. Cascade d'arrêt demandée pour les tâches et appels MCP liés."
|
|
: "Agent arrêté.",
|
|
},
|
|
],
|
|
progressIndex: completed.progressIndex,
|
|
};
|
|
});
|
|
} catch (e) {
|
|
if (isNotFound(e)) {
|
|
if (activeInteractionIdRef.current) {
|
|
markProjectCliInteractionStopped(projectId, activeInteractionIdRef.current);
|
|
activeInteractionIdRef.current = null;
|
|
}
|
|
setBusy(false);
|
|
setOpening(false);
|
|
setCurrentSession(null);
|
|
publishSessionId(null);
|
|
updateChatViewState((prev) => {
|
|
const completed = completeChatViewProgress(prev);
|
|
return {
|
|
turns: [
|
|
...completed.turns,
|
|
{ role: "tool", label: "Session déjà arrêtée." },
|
|
],
|
|
progressIndex: completed.progressIndex,
|
|
};
|
|
});
|
|
return;
|
|
}
|
|
setError(describe(e));
|
|
updateChatViewState((prev) => ({
|
|
turns: [
|
|
...prev.turns,
|
|
{ role: "error", text: `Arrêt de l'agent échoué: ${describe(e)}` },
|
|
],
|
|
progressIndex: prev.progressIndex,
|
|
}));
|
|
} finally {
|
|
setStopping(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={chatRootRef}
|
|
data-testid="custom-agent-chat-view"
|
|
className="flex h-full min-h-0 flex-col overflow-hidden bg-surface text-content"
|
|
>
|
|
<div
|
|
role="toolbar"
|
|
aria-label="custom agent chat actions"
|
|
className="relative z-20 flex shrink-0 items-center gap-2 overflow-hidden border-b border-border px-3 py-2"
|
|
>
|
|
<div className="min-w-0 flex-1 overflow-hidden">
|
|
<div className="truncate text-sm font-medium">{agentName}</div>
|
|
<div className="truncate text-xs text-muted">
|
|
CLI custom · {profile.name}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{!supported && (
|
|
<p role="alert" className="m-3 rounded-md border border-warning/40 bg-warning/10 p-2 text-xs text-warning">
|
|
CLI custom indisponible pour ce profil ou ce transport. Utilisez la TUI native.
|
|
</p>
|
|
)}
|
|
{error && (
|
|
<p role="alert" className="m-3 rounded-md border border-danger/40 bg-danger/10 p-2 text-xs text-danger">
|
|
{error}
|
|
</p>
|
|
)}
|
|
{profileDialog && (
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby={`profile-command-title-${nodeId}`}
|
|
className="m-3 rounded-md border border-border bg-surface p-3 shadow-lg"
|
|
>
|
|
<div className="flex min-w-0 items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<h2
|
|
id={`profile-command-title-${nodeId}`}
|
|
className="text-sm font-semibold text-content"
|
|
>
|
|
Changer de profil
|
|
</h2>
|
|
<p className="mt-1 text-xs text-muted">
|
|
Valider ce changement va réinitialiser la session courante. L'historique de cette CLI custom sera perdu.
|
|
</p>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
disabled={profileDialog.busy}
|
|
onClick={() => setProfileDialog(null)}
|
|
>
|
|
Fermer
|
|
</Button>
|
|
</div>
|
|
<div className="mt-3 flex min-w-0 flex-col gap-2">
|
|
<label className="flex min-w-0 flex-col gap-1 text-xs text-muted">
|
|
Profil
|
|
<select
|
|
aria-label="profil cible"
|
|
value={profileDialog.selectedProfileId}
|
|
disabled={profileDialog.busy}
|
|
className="rounded-md border border-border bg-raised px-2 py-1 text-sm text-content"
|
|
onChange={(event) =>
|
|
setProfileDialog((prev) =>
|
|
prev
|
|
? {
|
|
...prev,
|
|
selectedProfileId: event.target.value,
|
|
confirmedReset: false,
|
|
}
|
|
: prev,
|
|
)
|
|
}
|
|
>
|
|
{profileDialog.profiles.map((candidate) => (
|
|
<option key={candidate.id} value={candidate.id}>
|
|
{candidate.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<label className="flex items-start gap-2 text-xs text-content">
|
|
<input
|
|
type="checkbox"
|
|
checked={profileDialog.confirmedReset}
|
|
disabled={profileDialog.busy}
|
|
onChange={(event) =>
|
|
setProfileDialog((prev) =>
|
|
prev ? { ...prev, confirmedReset: event.target.checked } : prev,
|
|
)
|
|
}
|
|
/>
|
|
<span>Je confirme que la session courante sera reset.</span>
|
|
</label>
|
|
{profileDialog.error && (
|
|
<p role="alert" className="text-xs text-danger">
|
|
{profileDialog.error}
|
|
</p>
|
|
)}
|
|
<div className="flex justify-end gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
disabled={profileDialog.busy}
|
|
onClick={() => setProfileDialog(null)}
|
|
>
|
|
Annuler
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="danger"
|
|
disabled={!profileDialog.confirmedReset || profileDialog.busy}
|
|
loading={profileDialog.busy}
|
|
onClick={() => void confirmProfileCommandChange()}
|
|
>
|
|
Reset et changer le profil
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
ref={scrollRef}
|
|
data-testid="custom-agent-chat-scroll"
|
|
className="flex min-h-0 flex-1 basis-0 flex-col gap-2 overflow-x-hidden overflow-y-auto px-3 py-3"
|
|
>
|
|
{opening && displayTurns.length === 0 ? (
|
|
<div className="flex items-center gap-2 text-sm text-muted">
|
|
<Spinner size={14} />
|
|
<span>
|
|
{externalSessionId ? "Reprise en cours..." : "Ouverture de la session structurée…"}
|
|
</span>
|
|
</div>
|
|
) : displayTurns.length === 0 ? (
|
|
<p className="m-auto text-xs text-muted">
|
|
Envoyez un message pour démarrer la conversation structurée.
|
|
</p>
|
|
) : (
|
|
displayTurns.map((turn, index) => (
|
|
<ChatBubble key={index} turn={turn} requesterName={agentName} />
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
<div
|
|
data-testid="custom-agent-chat-composer"
|
|
className="flex shrink-0 flex-col gap-2 border-t border-border bg-raised/40 p-2"
|
|
>
|
|
{attachments.length > 0 && (
|
|
<div className="flex min-w-0 flex-wrap gap-2">
|
|
{attachments.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className="flex max-w-full items-center gap-2 rounded-md border border-border bg-surface px-2 py-1 text-xs text-muted"
|
|
>
|
|
{item.previewUrl && (
|
|
<img
|
|
src={item.previewUrl}
|
|
alt=""
|
|
data-testid={`attachment-preview-${item.label}`}
|
|
className="h-8 w-8 shrink-0 rounded border border-border object-cover"
|
|
/>
|
|
)}
|
|
<span className="min-w-0 truncate">Fichier joint: {item.label}</span>
|
|
<button
|
|
type="button"
|
|
aria-label={`retirer ${item.label}`}
|
|
className="shrink-0 text-content"
|
|
onClick={() => removeAttachment(item)}
|
|
>
|
|
Retirer
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
{slashMenuOpen && slashCommands.length > 0 && (
|
|
<div
|
|
id={`slash-command-menu-${nodeId}`}
|
|
role="listbox"
|
|
aria-label="suggestions commandes slash"
|
|
className="max-h-48 overflow-y-auto rounded-md border border-border bg-surface py-1 shadow-lg"
|
|
>
|
|
{slashCommands.map((command, index) => {
|
|
const available = isSlashCommandAvailable(command);
|
|
const selected = index === slashActiveIndex;
|
|
return (
|
|
<button
|
|
key={command.name}
|
|
type="button"
|
|
id={`slash-command-${nodeId}-${index}`}
|
|
role="option"
|
|
aria-selected={selected}
|
|
aria-disabled={!available}
|
|
className={cn(
|
|
"flex w-full min-w-0 items-start gap-3 px-2.5 py-1.5 text-left text-xs",
|
|
selected ? "bg-primary/15 text-content" : "text-content",
|
|
!available && "cursor-not-allowed opacity-55",
|
|
)}
|
|
onMouseDown={(e) => e.preventDefault()}
|
|
onClick={() => selectSlashCommand(command)}
|
|
>
|
|
<span className="shrink-0 font-semibold">{command.name}</span>
|
|
<span className="min-w-0 flex-1 truncate text-muted">
|
|
{command.shortDescription}
|
|
</span>
|
|
{command.requiresConfirmation && (
|
|
<span className="shrink-0 text-muted">confirm</span>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
<div className="flex min-w-0 items-end gap-2">
|
|
<div className="relative flex min-w-0 flex-1">
|
|
<textarea
|
|
ref={composerRef}
|
|
aria-label={`message CLI custom ${nodeId}`}
|
|
aria-controls={slashMenuOpen ? `slash-command-menu-${nodeId}` : undefined}
|
|
aria-activedescendant={
|
|
slashMenuOpen ? `slash-command-${nodeId}-${slashActiveIndex}` : undefined
|
|
}
|
|
className={cn(
|
|
"min-h-10 flex-1 resize-none rounded-md border border-border bg-surface p-2 pr-7 text-sm text-content outline-none",
|
|
"focus:border-primary disabled:cursor-not-allowed disabled:opacity-50",
|
|
)}
|
|
rows={2}
|
|
value={draft}
|
|
disabled={!supported || opening || busy}
|
|
placeholder="Message à l'agent…"
|
|
style={{ height: clampComposerHeight(composerHeightPx) }}
|
|
onChange={(e) => editDraft(e.target.value)}
|
|
onPaste={(e) => void pasteClipboardFiles(e)}
|
|
onKeyDown={(e) => {
|
|
if (slashMenuOpen && slashCommands.length > 0) {
|
|
if (e.key === "ArrowDown") {
|
|
e.preventDefault();
|
|
setSlashActiveIndex((prev) => (prev + 1) % slashCommands.length);
|
|
return;
|
|
}
|
|
if (e.key === "ArrowUp") {
|
|
e.preventDefault();
|
|
setSlashActiveIndex(
|
|
(prev) => (prev - 1 + slashCommands.length) % slashCommands.length,
|
|
);
|
|
return;
|
|
}
|
|
if (e.key === "Escape") {
|
|
e.preventDefault();
|
|
setSlashMenuOpen(false);
|
|
return;
|
|
}
|
|
if (e.key === "Enter" || e.key === "Tab") {
|
|
e.preventDefault();
|
|
const command = slashCommands[slashActiveIndex];
|
|
if (command) selectSlashCommand(command);
|
|
return;
|
|
}
|
|
}
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
e.preventDefault();
|
|
void send();
|
|
}
|
|
}}
|
|
/>
|
|
<button
|
|
type="button"
|
|
aria-label={`redimensionner le composer ${nodeId}`}
|
|
title="Redimensionner le composer"
|
|
className="absolute right-1.5 top-1.5 h-4 w-4 rounded-sm border border-border bg-raised text-[9px] leading-3 text-muted hover:text-content focus:border-primary focus:outline-none"
|
|
style={{ cursor: "ns-resize" }}
|
|
onMouseDown={startComposerResize}
|
|
onDoubleClick={(e) => {
|
|
e.preventDefault();
|
|
commitComposerHeight(composerDefaultHeightPx);
|
|
}}
|
|
onKeyDown={handleComposerResizeKeyDown}
|
|
>
|
|
↕
|
|
</button>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className="shrink-0 whitespace-nowrap"
|
|
disabled={!supported || opening || busy}
|
|
onClick={() => void pickAttachment()}
|
|
>
|
|
Joindre
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant={busy ? "danger" : undefined}
|
|
className="shrink-0 whitespace-nowrap"
|
|
disabled={
|
|
busy
|
|
? !supported || !currentSession || !agent.stopLiveAgent || stopping
|
|
: !canSend
|
|
}
|
|
loading={stopping}
|
|
onClick={() => (busy ? void stopAgent() : void send())}
|
|
>
|
|
{stopping ? "Arrêt en cours..." : busy ? "Stop" : "Envoyer"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ChatBubble({
|
|
turn,
|
|
requesterName,
|
|
}: {
|
|
turn: ChatTurn;
|
|
requesterName: string;
|
|
}) {
|
|
if (turn.role === "tool") {
|
|
return (
|
|
<div className="flex min-w-0 justify-center">
|
|
<span className="max-w-[80%] truncate rounded-md border border-border bg-raised px-2 py-1 text-xs text-muted">
|
|
{turn.label}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
if (turn.role === "progress") {
|
|
return (
|
|
<ProgressBubble
|
|
progress={turn.progress}
|
|
requesterName={requesterName}
|
|
/>
|
|
);
|
|
}
|
|
if (turn.role === "final") {
|
|
return (
|
|
<div className="flex min-w-0 justify-end">
|
|
<div className="min-w-0 max-w-[82%] overflow-hidden rounded-md border border-success/50 bg-success/10 px-3 py-2 text-sm text-content">
|
|
<div className="mb-1 text-xs font-semibold text-success">Terminé</div>
|
|
<p className="whitespace-pre-wrap break-words">{turn.text}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
if (turn.role === "error" || turn.role === "unknown") {
|
|
return (
|
|
<div className="flex min-w-0 justify-center">
|
|
<div className="min-w-0 max-w-[86%] overflow-hidden rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-xs text-danger">
|
|
{turn.role === "error" && (
|
|
<div className="mb-1 font-semibold">Échec</div>
|
|
)}
|
|
{turn.role === "unknown" ? "Chunk inconnu reçu: " : ""}
|
|
<span className="whitespace-pre-wrap break-words">{turn.text}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const user = turn.role === "user";
|
|
return (
|
|
<div className="flex min-w-0 justify-start">
|
|
<div
|
|
className={cn(
|
|
"min-w-0 max-w-[82%] overflow-hidden rounded-lg border px-3 py-2 text-sm text-content",
|
|
user ? "border-border bg-raised" : "border-primary/25 bg-primary/10",
|
|
)}
|
|
>
|
|
<p className="whitespace-pre-wrap break-words">{turn.text}</p>
|
|
{user && turn.attachments && turn.attachments.length > 0 && (
|
|
<div className="mt-1 flex flex-col gap-0.5 text-xs text-muted">
|
|
{turn.attachments.map((attachment) => (
|
|
<p key={attachment} className="truncate">
|
|
Fichier: {attachment}
|
|
</p>
|
|
))}
|
|
</div>
|
|
)}
|
|
{!user && turn.pending && (
|
|
<span className="mt-1 inline-flex items-center gap-1 text-xs text-muted">
|
|
<Spinner size={12} />
|
|
Réponse en cours
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function progressTitle(progress: ReplyProgress): string {
|
|
if (isDelegationProgress(progress)) return "Délégation";
|
|
if (progress.kind === "mcp") return "MCP";
|
|
if (progress.kind === "tool") return "Tool";
|
|
if (progress.kind === "message") return "Progress";
|
|
if (progress.kind === "turn") return "Tour";
|
|
return "Activité";
|
|
}
|
|
|
|
function progressSourceLabel(progress: ReplyProgress): string {
|
|
if (progress.source === "ideaLocal") return "IdeA";
|
|
return progress.provider ?? "Provider";
|
|
}
|
|
|
|
function progressStageLabel(stage: ReplyProgressStage): string {
|
|
switch (stage) {
|
|
case "started":
|
|
return "En cours";
|
|
case "delta":
|
|
return "En cours";
|
|
case "completed":
|
|
return "Terminé";
|
|
case "info":
|
|
return "info";
|
|
}
|
|
}
|
|
|
|
function progressTone(progress: ReplyProgress): string {
|
|
if (isDelegationProgress(progress)) {
|
|
return "border-primary/45 bg-primary/10 text-content";
|
|
}
|
|
if (progress.kind === "mcp") {
|
|
return "border-warning/45 bg-warning/10 text-content";
|
|
}
|
|
if (progress.kind === "tool") {
|
|
return "border-border bg-raised/70 text-content";
|
|
}
|
|
return "border-border/80 bg-surface/70 text-muted";
|
|
}
|
|
|
|
function isCenteredToolProgress(progress: ReplyProgress): boolean {
|
|
return (
|
|
progress.kind === "tool" ||
|
|
progress.kind === "mcp" ||
|
|
isDelegationProgress(progress)
|
|
);
|
|
}
|
|
|
|
function isTimelineProgress(progress: ReplyProgress): boolean {
|
|
return progress.kind === "turn";
|
|
}
|
|
|
|
function compactToolName(progress: ReplyProgress): string {
|
|
return progress.toolName ?? progress.label;
|
|
}
|
|
|
|
function previewText(text: string, maxLineLength = 160): string {
|
|
return text
|
|
.replace(/\r\n/g, "\n")
|
|
.replace(/\r/g, "\n")
|
|
.split("\n")
|
|
.map((line) => line.trim())
|
|
.filter(Boolean)
|
|
.slice(0, 4)
|
|
.map((line) =>
|
|
line.length > maxLineLength
|
|
? `${line.slice(0, Math.max(0, maxLineLength - 3))}...`
|
|
: line,
|
|
)
|
|
.join("\n");
|
|
}
|
|
|
|
function parseKeyValue(text: string, key: string): string | null {
|
|
const match = new RegExp(
|
|
`(?:^|\\s)${key}=([^\\n]+?)(?=\\s\\w+=|$)`,
|
|
"i",
|
|
).exec(text);
|
|
return match?.[1]?.trim().replace(/^["']|["']$/g, "") || null;
|
|
}
|
|
|
|
function delegationSummary(progress: ReplyProgress): {
|
|
requester: string | null;
|
|
target: string | null;
|
|
excerpt: string | null;
|
|
} {
|
|
const text = progress.text ?? "";
|
|
const requester = parseKeyValue(text, "requester");
|
|
const target = parseKeyValue(text, "target");
|
|
const task = parseKeyValue(text, "task");
|
|
const fallback = text && !target && !task ? text : null;
|
|
return {
|
|
requester,
|
|
target,
|
|
excerpt: task
|
|
? previewText(task, 92)
|
|
: fallback
|
|
? previewText(fallback, 92)
|
|
: null,
|
|
};
|
|
}
|
|
|
|
const fourLineClamp = {
|
|
display: "-webkit-box",
|
|
WebkitBoxOrient: "vertical",
|
|
WebkitLineClamp: 4,
|
|
} as const;
|
|
|
|
function TurnMarker({ progress }: { progress: ReplyProgress }) {
|
|
const stage = progressStageLabel(progress.stage);
|
|
const label = progress.label.trim() || "Tour";
|
|
return (
|
|
<div data-testid="chat-turn-marker" className="flex min-w-0 justify-center">
|
|
<div className="flex max-w-[72%] items-center gap-2 overflow-hidden text-[11px] text-muted">
|
|
<span className="h-px w-8 shrink-0 bg-border" aria-hidden />
|
|
<span className="shrink-0 rounded-full border border-border bg-surface px-2 py-0.5">
|
|
{stage}
|
|
</span>
|
|
<span className="truncate">{label}</span>
|
|
<span className="h-px w-8 shrink-0 bg-border" aria-hidden />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ToolProgressCard({
|
|
progress,
|
|
requesterName,
|
|
}: {
|
|
progress: ReplyProgress;
|
|
requesterName: string;
|
|
}) {
|
|
const stage = progressStageLabel(progress.stage);
|
|
const detail =
|
|
progress.text && !isDelegationProgress(progress) ? previewText(progress.text) : null;
|
|
const delegation = isDelegationProgress(progress) ? delegationSummary(progress) : null;
|
|
const title = delegation
|
|
? delegation.target
|
|
? `${delegation.requester ?? requesterName} ${
|
|
progress.stage === "completed" ? "←" : "→"
|
|
} ${delegation.target}`
|
|
: "Appel inter-agent"
|
|
: progressTitle(progress);
|
|
return (
|
|
<div data-testid="chat-tool-progress" className="flex min-w-0 justify-center">
|
|
<div
|
|
className={cn(
|
|
"min-w-0 max-w-[72%] overflow-hidden rounded-md border px-2.5 py-1.5 text-xs",
|
|
progressTone(progress),
|
|
)}
|
|
>
|
|
<div className="flex min-w-0 items-center justify-center gap-1.5">
|
|
<span className="shrink-0 font-semibold">{title}</span>
|
|
{!delegation && (
|
|
<span className="min-w-0 truncate text-muted">{compactToolName(progress)}</span>
|
|
)}
|
|
<span className="shrink-0 text-muted">· {stage}</span>
|
|
</div>
|
|
{delegation?.excerpt && (
|
|
<p className="mt-1 text-center text-[11px] text-content" style={fourLineClamp}>
|
|
{delegation.excerpt}
|
|
</p>
|
|
)}
|
|
{delegation && (
|
|
<p className="mt-0.5 truncate text-center text-[11px] text-muted">
|
|
{compactToolName(progress)}
|
|
</p>
|
|
)}
|
|
{(progress.source || progress.nativeEvent || progress.provider) && (
|
|
<div className="mt-0.5 flex min-w-0 flex-wrap justify-center gap-x-2 gap-y-0.5 text-[11px] text-muted">
|
|
<span>{progressSourceLabel(progress)}</span>
|
|
{progress.nativeEvent && (
|
|
<span className="truncate">event: {progress.nativeEvent}</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
{detail && (
|
|
<p
|
|
className="mt-1 overflow-hidden whitespace-pre-wrap break-words text-center text-[11px] text-content"
|
|
style={fourLineClamp}
|
|
>
|
|
{detail}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ProgressBubble({
|
|
progress,
|
|
requesterName,
|
|
}: {
|
|
progress: ReplyProgress;
|
|
requesterName: string;
|
|
}) {
|
|
if (isTimelineProgress(progress)) return <TurnMarker progress={progress} />;
|
|
if (isCenteredToolProgress(progress)) {
|
|
return (
|
|
<ToolProgressCard
|
|
progress={progress}
|
|
requesterName={requesterName}
|
|
/>
|
|
);
|
|
}
|
|
const title = progressTitle(progress);
|
|
const stage = progressStageLabel(progress.stage);
|
|
const source = progressSourceLabel(progress);
|
|
const detail = progress.text ? previewText(progress.text, 180) : null;
|
|
return (
|
|
<div data-testid="chat-progress-status" className="flex min-w-0 justify-end">
|
|
<div
|
|
className={cn(
|
|
"min-w-0 max-w-[58%] overflow-hidden rounded-md border px-2.5 py-1.5 text-xs",
|
|
progressTone(progress),
|
|
)}
|
|
>
|
|
<div className="flex min-w-0 items-center gap-1.5">
|
|
<span className="shrink-0 font-semibold">{title}</span>
|
|
<span className="min-w-0 truncate text-muted">{progress.label}</span>
|
|
<span className="shrink-0 text-muted">· {stage}</span>
|
|
</div>
|
|
<div className="mt-0.5 flex min-w-0 flex-wrap justify-end gap-x-2 gap-y-0.5 text-[11px] text-muted">
|
|
<span>{source}</span>
|
|
{progress.nativeEvent && (
|
|
<span className="truncate">event: {progress.nativeEvent}</span>
|
|
)}
|
|
</div>
|
|
{detail && (
|
|
<p
|
|
className="mt-1 overflow-hidden whitespace-pre-wrap break-words text-content"
|
|
style={fourLineClamp}
|
|
>
|
|
{detail}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|