merge(ui): resize vertical du chat + colonne tags de versions dans le graph Git — #193 (QA verte)
This commit is contained in:
@ -1681,6 +1681,7 @@ export type ReplyProgressStage = "started" | "delta" | "completed" | "info";
|
||||
|
||||
export interface ReplyProgress {
|
||||
progressId?: string;
|
||||
occurredAtMs?: number;
|
||||
source: ReplyProgressSource;
|
||||
kind: ReplyProgressKind;
|
||||
stage: ReplyProgressStage;
|
||||
|
||||
@ -78,7 +78,7 @@ describe("CustomAgentChatView", () => {
|
||||
__resetProjectCliInteractionActivityForTests();
|
||||
});
|
||||
|
||||
it("repaints compact attachment refs from legacy user prompt scrollback", async () => {
|
||||
it("repaints attachment labels from user prompt scrollback", async () => {
|
||||
const agent = {
|
||||
launchAgentChat: vi.fn(),
|
||||
reattachAgentChat: vi.fn(async (sessionId: string) => ({
|
||||
@ -119,68 +119,91 @@ describe("CustomAgentChatView", () => {
|
||||
);
|
||||
|
||||
expect(await screen.findByText("describe this")).toBeTruthy();
|
||||
expect(screen.getByText("[image 1] clipboard.png")).toBeTruthy();
|
||||
expect(screen.getByText("Fichier: clipboard.png")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("prefers canonical attachment refs from user prompt scrollback", async () => {
|
||||
it("resizes the composer vertically with mouse, keyboard, and double-click reset", async () => {
|
||||
const rectSpy = vi
|
||||
.spyOn(HTMLElement.prototype, "getBoundingClientRect")
|
||||
.mockReturnValue({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 600,
|
||||
height: 400,
|
||||
top: 0,
|
||||
right: 600,
|
||||
bottom: 400,
|
||||
left: 0,
|
||||
toJSON: () => {},
|
||||
} as DOMRect);
|
||||
const agent = {
|
||||
launchAgentChat: vi.fn(),
|
||||
reattachAgentChat: vi.fn(async (sessionId: string) => ({
|
||||
sessionId,
|
||||
scrollback: [
|
||||
{
|
||||
kind: "userPrompt" as const,
|
||||
text: "compare these",
|
||||
attachments: ["screenshot.png", "error.log"],
|
||||
attachmentRefs: [
|
||||
{
|
||||
reference: "[image 1]",
|
||||
filename: "screenshot.png",
|
||||
mime: "image/png",
|
||||
sizeBytes: 12,
|
||||
readablePath: "/repo/.ideai/attachments/screenshot.png",
|
||||
},
|
||||
{
|
||||
reference: "[file 1]",
|
||||
filename: "error.log",
|
||||
mime: "text/plain",
|
||||
sizeBytes: 34,
|
||||
readablePath: "/repo/.ideai/attachments/error.log",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
scrollback: [],
|
||||
})),
|
||||
sendAgentChat: vi.fn(async () => {}),
|
||||
cancelAgentChat: vi.fn(async () => {}),
|
||||
closeAgentChat: vi.fn(async () => {}),
|
||||
};
|
||||
|
||||
render(
|
||||
<DIProvider
|
||||
gateways={{
|
||||
agent,
|
||||
system: { pickFile: vi.fn(async () => null) },
|
||||
} as unknown as Gateways}
|
||||
>
|
||||
<CustomAgentChatView
|
||||
projectId="project-1"
|
||||
agentId="agent-1"
|
||||
agentName="Worker"
|
||||
profile={profile}
|
||||
cwd="/repo"
|
||||
nodeId="node-1"
|
||||
sessionId="chat-session-1"
|
||||
conversationId="conversation-1"
|
||||
onSessionId={vi.fn()}
|
||||
onConversationId={vi.fn()}
|
||||
/>
|
||||
</DIProvider>,
|
||||
);
|
||||
function Harness() {
|
||||
const [height, setHeight] = useState(64);
|
||||
return (
|
||||
<DIProvider
|
||||
gateways={{
|
||||
agent,
|
||||
system: { pickFile: vi.fn(async () => null) },
|
||||
} as unknown as Gateways}
|
||||
>
|
||||
<CustomAgentChatView
|
||||
projectId="project-1"
|
||||
agentId="agent-1"
|
||||
agentName="Worker"
|
||||
profile={profile}
|
||||
cwd="/repo"
|
||||
nodeId="node-1"
|
||||
sessionId="chat-session-1"
|
||||
conversationId="conversation-1"
|
||||
composerHeightPx={height}
|
||||
composerDefaultHeightPx={64}
|
||||
onComposerHeightPxChange={setHeight}
|
||||
onSessionId={vi.fn()}
|
||||
onConversationId={vi.fn()}
|
||||
/>
|
||||
</DIProvider>
|
||||
);
|
||||
}
|
||||
|
||||
expect(await screen.findByText("compare these")).toBeTruthy();
|
||||
expect(screen.getByText("[image 1] screenshot.png")).toBeTruthy();
|
||||
expect(screen.getByText("[file 1] error.log")).toBeTruthy();
|
||||
try {
|
||||
render(<Harness />);
|
||||
const composer = await screen.findByLabelText(/message CLI custom/) as HTMLTextAreaElement;
|
||||
const handle = screen.getByRole("button", {
|
||||
name: "redimensionner le composer node-1",
|
||||
});
|
||||
expect(composer.style.height).toBe("64px");
|
||||
expect(handle.style.cursor).toBe("ns-resize");
|
||||
|
||||
fireEvent.mouseDown(handle, { clientY: 200 });
|
||||
fireEvent.mouseMove(window, { clientY: 100 });
|
||||
fireEvent.mouseUp(window);
|
||||
await waitFor(() => expect(composer.style.height).toBe("164px"));
|
||||
|
||||
fireEvent.keyDown(handle, { key: "ArrowUp", shiftKey: true });
|
||||
await waitFor(() => expect(composer.style.height).toBe("176px"));
|
||||
fireEvent.keyDown(handle, { key: "ArrowDown", shiftKey: true });
|
||||
await waitFor(() => expect(composer.style.height).toBe("164px"));
|
||||
|
||||
fireEvent.mouseDown(handle, { clientY: 200 });
|
||||
fireEvent.mouseMove(window, { clientY: -200 });
|
||||
fireEvent.mouseUp(window);
|
||||
await waitFor(() => expect(composer.style.height).toBe("200px"));
|
||||
|
||||
fireEvent.doubleClick(handle);
|
||||
await waitFor(() => expect(composer.style.height).toBe("64px"));
|
||||
} finally {
|
||||
rectSpy.mockRestore();
|
||||
}
|
||||
});
|
||||
|
||||
it("detaches on unmount then reattaches with missed scrollback chunks", async () => {
|
||||
@ -895,7 +918,7 @@ describe("CustomAgentChatView", () => {
|
||||
});
|
||||
|
||||
expect(screen.getByText("Worker → QA")).toBeTruthy();
|
||||
expect(screen.getByText("Worker → QA").parentElement?.textContent).toContain("started");
|
||||
expect(screen.getByText("Worker → QA").parentElement?.textContent).toContain("En cours");
|
||||
expect(screen.queryByRole("status", { name: "Loading" })).toBeNull();
|
||||
|
||||
act(() => {
|
||||
@ -909,8 +932,8 @@ describe("CustomAgentChatView", () => {
|
||||
});
|
||||
|
||||
await screen.findByText("done");
|
||||
expect(screen.getAllByText("Worker ← QA")).toHaveLength(2);
|
||||
expect(screen.getAllByText("validate")).toHaveLength(2);
|
||||
expect(screen.getAllByText("Worker ← QA")).toHaveLength(1);
|
||||
expect(screen.getAllByText("validate")).toHaveLength(1);
|
||||
expect(screen.queryByText("Appel inter-agent")).toBeNull();
|
||||
expect(screen.queryByText("reply delivered")).toBeNull();
|
||||
expect(screen.queryByText("Tool")).toBeNull();
|
||||
@ -1072,7 +1095,7 @@ describe("CustomAgentChatView", () => {
|
||||
expect(screen.getAllByTestId("chat-tool-progress")).toHaveLength(1);
|
||||
expect(screen.queryByText("Downloading 10%")).toBeNull();
|
||||
expect(screen.getByText("Downloading 75%")).toBeTruthy();
|
||||
expect(screen.getByText("Tool").parentElement?.textContent).toContain("running");
|
||||
expect(screen.getByText("Tool").parentElement?.textContent).toContain("En cours");
|
||||
});
|
||||
|
||||
it("renders progress immediately when the chunk callback fires", async () => {
|
||||
@ -1149,6 +1172,97 @@ describe("CustomAgentChatView", () => {
|
||||
expect(screen.getAllByTestId("chat-tool-progress")).toHaveLength(1);
|
||||
});
|
||||
|
||||
it("upserts progress by progressId and keeps first emission chronological order", async () => {
|
||||
let emitChunk: ((chunk: unknown) => void) | null = null;
|
||||
const agent = {
|
||||
launchAgentChat: vi.fn(),
|
||||
reattachAgentChat: vi.fn(async (sessionId: string) => ({
|
||||
sessionId,
|
||||
scrollback: [],
|
||||
})),
|
||||
sendAgentChat: vi.fn(
|
||||
(_sessionId: string, _prompt: string, onChunk: (chunk: unknown) => void) =>
|
||||
new Promise<void>((resolve) => {
|
||||
emitChunk = (chunk: unknown) => {
|
||||
onChunk(chunk);
|
||||
if ((chunk as { kind?: string }).kind === "final") resolve();
|
||||
};
|
||||
}),
|
||||
),
|
||||
cancelAgentChat: vi.fn(async () => {}),
|
||||
closeAgentChat: vi.fn(async () => {}),
|
||||
};
|
||||
|
||||
render(
|
||||
<DIProvider
|
||||
gateways={{
|
||||
agent,
|
||||
system: { pickFile: vi.fn(async () => null) },
|
||||
} as unknown as Gateways}
|
||||
>
|
||||
<CustomAgentChatView
|
||||
projectId="project-1"
|
||||
agentId="agent-1"
|
||||
agentName="Worker"
|
||||
profile={profile}
|
||||
cwd="/repo"
|
||||
nodeId="node-1"
|
||||
sessionId="chat-session-1"
|
||||
conversationId="conversation-1"
|
||||
onSessionId={vi.fn()}
|
||||
onConversationId={vi.fn()}
|
||||
/>
|
||||
</DIProvider>,
|
||||
);
|
||||
|
||||
await waitFor(() =>
|
||||
expect(agent.reattachAgentChat).toHaveBeenCalledWith(
|
||||
"chat-session-1",
|
||||
expect.any(Function),
|
||||
),
|
||||
);
|
||||
|
||||
fireEvent.change(screen.getByLabelText(/message CLI custom/), {
|
||||
target: { value: "run tools" },
|
||||
});
|
||||
fireEvent.click(screen.getByRole("button", { name: "Envoyer" }));
|
||||
await waitFor(() => expect(emitChunk).not.toBeNull());
|
||||
|
||||
const progress = (
|
||||
progressId: string,
|
||||
occurredAtMs: number,
|
||||
stage: "started" | "completed",
|
||||
text: string,
|
||||
) => ({
|
||||
kind: "progress" as const,
|
||||
progress: {
|
||||
progressId,
|
||||
occurredAtMs,
|
||||
source: "providerNative" as const,
|
||||
kind: "tool" as const,
|
||||
stage,
|
||||
label: "shell",
|
||||
toolName: "shell",
|
||||
text,
|
||||
},
|
||||
});
|
||||
|
||||
act(() => {
|
||||
emitChunk?.(progress("process-2", 20, "started", "Process 2 start"));
|
||||
emitChunk?.(progress("process-1", 10, "started", "Process 1 start"));
|
||||
emitChunk?.(progress("process-1", 10, "completed", "Process 1 done"));
|
||||
});
|
||||
|
||||
expect(screen.getAllByTestId("chat-tool-progress")).toHaveLength(2);
|
||||
expect(screen.queryByText("Process 1 start")).toBeNull();
|
||||
expect(screen.getByText("Process 1 done")).toBeTruthy();
|
||||
const first = screen.getByText("Process 1 done");
|
||||
const second = screen.getByText("Process 2 start");
|
||||
expect(
|
||||
Boolean(first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING),
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
it("moves completed entity progress from active map to turns", async () => {
|
||||
let emitChunk: ((chunk: unknown) => void) | null = null;
|
||||
const agent = {
|
||||
@ -1225,7 +1339,7 @@ describe("CustomAgentChatView", () => {
|
||||
expect(screen.getAllByTestId("chat-tool-progress")).toHaveLength(1);
|
||||
expect(screen.queryByText("Searching...")).toBeNull();
|
||||
expect(screen.getByText("Found results")).toBeTruthy();
|
||||
expect(screen.getByText("Tool").parentElement?.textContent).toContain("done");
|
||||
expect(screen.getByText("Tool").parentElement?.textContent).toContain("Terminé");
|
||||
|
||||
act(() => {
|
||||
emitChunk?.({ kind: "final", content: "done" });
|
||||
@ -1306,7 +1420,7 @@ describe("CustomAgentChatView", () => {
|
||||
});
|
||||
|
||||
expect(screen.queryByRole("status", { name: "Loading" })).toBeNull();
|
||||
expect(screen.getByText("Progress").parentElement?.textContent).toContain("running");
|
||||
expect(screen.getByText("Progress").parentElement?.textContent).toContain("En cours");
|
||||
|
||||
act(() => {
|
||||
emitChunk?.({ kind: "final", content: "done" });
|
||||
@ -1317,93 +1431,7 @@ describe("CustomAgentChatView", () => {
|
||||
expect(screen.queryByRole("status", { name: "Loading" })).toBeNull(),
|
||||
);
|
||||
expect(screen.getByText("Lecture du contexte disponible.")).toBeTruthy();
|
||||
expect(screen.getByText("Progress").parentElement?.textContent).toContain("done");
|
||||
});
|
||||
|
||||
it("updates message progress by progressId instead of appending running and done rows", async () => {
|
||||
let emitChunk: ((chunk: unknown) => void) | null = null;
|
||||
const agent = {
|
||||
launchAgentChat: vi.fn(),
|
||||
reattachAgentChat: vi.fn(async (sessionId: string) => ({
|
||||
sessionId,
|
||||
scrollback: [],
|
||||
})),
|
||||
sendAgentChat: vi.fn(
|
||||
(_sessionId: string, _prompt: string, onChunk: (chunk: unknown) => void) =>
|
||||
new Promise<void>((resolve) => {
|
||||
emitChunk = (chunk: unknown) => {
|
||||
onChunk(chunk);
|
||||
if ((chunk as { kind?: string }).kind === "final") resolve();
|
||||
};
|
||||
}),
|
||||
),
|
||||
cancelAgentChat: vi.fn(async () => {}),
|
||||
closeAgentChat: vi.fn(async () => {}),
|
||||
};
|
||||
|
||||
render(
|
||||
<DIProvider
|
||||
gateways={{
|
||||
agent,
|
||||
system: { pickFile: vi.fn(async () => null) },
|
||||
} as unknown as Gateways}
|
||||
>
|
||||
<CustomAgentChatView
|
||||
projectId="project-1"
|
||||
agentId="agent-1"
|
||||
agentName="Worker"
|
||||
profile={profile}
|
||||
cwd="/repo"
|
||||
nodeId="node-1"
|
||||
sessionId="chat-session-1"
|
||||
conversationId="conversation-1"
|
||||
onSessionId={vi.fn()}
|
||||
onConversationId={vi.fn()}
|
||||
/>
|
||||
</DIProvider>,
|
||||
);
|
||||
|
||||
await waitFor(() =>
|
||||
expect(agent.reattachAgentChat).toHaveBeenCalledWith(
|
||||
"chat-session-1",
|
||||
expect.any(Function),
|
||||
),
|
||||
);
|
||||
|
||||
fireEvent.change(screen.getByLabelText(/message CLI custom/), {
|
||||
target: { value: "ship progress ids" },
|
||||
});
|
||||
fireEvent.click(screen.getByRole("button", { name: "Envoyer" }));
|
||||
await waitFor(() => expect(emitChunk).not.toBeNull());
|
||||
|
||||
const progress = (stage: "delta" | "completed", text: string) => ({
|
||||
kind: "progress" as const,
|
||||
progress: {
|
||||
progressId: "codex:message:item-1",
|
||||
source: "providerNative" as const,
|
||||
kind: "message" as const,
|
||||
stage,
|
||||
label: "Analyse",
|
||||
text,
|
||||
},
|
||||
});
|
||||
|
||||
act(() => {
|
||||
emitChunk?.(progress("delta", "Lecture du contexte disponible."));
|
||||
});
|
||||
|
||||
expect(screen.getAllByTestId("chat-progress-status")).toHaveLength(1);
|
||||
expect(screen.getByText("Lecture du contexte disponible.")).toBeTruthy();
|
||||
expect(screen.getByText("Progress").parentElement?.textContent).toContain("running");
|
||||
|
||||
act(() => {
|
||||
emitChunk?.(progress("completed", "Contexte lu."));
|
||||
});
|
||||
|
||||
expect(screen.getAllByTestId("chat-progress-status")).toHaveLength(1);
|
||||
expect(screen.queryByText("Lecture du contexte disponible.")).toBeNull();
|
||||
expect(screen.getByText("Contexte lu.")).toBeTruthy();
|
||||
expect(screen.getByText("Progress").parentElement?.textContent).toContain("done");
|
||||
expect(screen.getByText("Progress").parentElement?.textContent).toContain("Terminé");
|
||||
});
|
||||
|
||||
it("does not append late progress chunks after the final answer", async () => {
|
||||
@ -2123,7 +2151,8 @@ describe("CustomAgentChatView", () => {
|
||||
Object.defineProperty(file, "arrayBuffer", {
|
||||
value: vi.fn(async () => new Uint8Array([1, 2, 3]).buffer),
|
||||
});
|
||||
fireEvent.paste(screen.getByLabelText(/message CLI custom/), {
|
||||
const composer = screen.getByLabelText(/message CLI custom/) as HTMLTextAreaElement;
|
||||
fireEvent.paste(composer, {
|
||||
clipboardData: {
|
||||
items: [
|
||||
{
|
||||
@ -2138,12 +2167,14 @@ describe("CustomAgentChatView", () => {
|
||||
|
||||
expect(await screen.findByText("Fichier joint: clipboard.png")).toBeTruthy();
|
||||
expect(screen.getByTestId("attachment-preview-clipboard.png")).toBeTruthy();
|
||||
await waitFor(() => expect(composer.value).toBe("[Image 1]"));
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: "retirer clipboard.png" }));
|
||||
|
||||
await waitFor(() =>
|
||||
expect(screen.queryByText("Fichier joint: clipboard.png")).toBeNull(),
|
||||
);
|
||||
expect(composer.value).toBe("");
|
||||
expect(
|
||||
(screen.getByRole("button", { name: "Envoyer" }) as HTMLButtonElement)
|
||||
.disabled,
|
||||
@ -2223,7 +2254,7 @@ describe("CustomAgentChatView", () => {
|
||||
await waitFor(() => expect(agent.sendAgentChat).toHaveBeenCalledTimes(1));
|
||||
expect(agent.sendAgentChat).toHaveBeenCalledWith(
|
||||
"chat-session-1",
|
||||
"",
|
||||
"[Image 1]",
|
||||
expect.any(Function),
|
||||
{
|
||||
attachments: [
|
||||
@ -2389,7 +2420,7 @@ describe("CustomAgentChatView", () => {
|
||||
await waitFor(() => expect(agent.sendAgentChat).toHaveBeenCalledTimes(1));
|
||||
expect(agent.sendAgentChat).toHaveBeenCalledWith(
|
||||
"chat-session-1",
|
||||
"",
|
||||
"[Image 1]",
|
||||
expect.any(Function),
|
||||
{
|
||||
attachments: [
|
||||
@ -2402,8 +2433,8 @@ describe("CustomAgentChatView", () => {
|
||||
],
|
||||
},
|
||||
);
|
||||
expect(screen.getByText("Pièce jointe")).toBeTruthy();
|
||||
expect(screen.getByText("[image 1] paste-image.png")).toBeTruthy();
|
||||
expect(screen.getByText("[Image 1]")).toBeTruthy();
|
||||
expect(screen.getByText("Fichier: paste-image.png")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("accepts pasted generic files exposed only through clipboardData.files", async () => {
|
||||
@ -2564,7 +2595,91 @@ describe("CustomAgentChatView", () => {
|
||||
},
|
||||
);
|
||||
expect(screen.getByText("prefix inserted")).toBeTruthy();
|
||||
expect(screen.getByText("[file 1] mixed.txt")).toBeTruthy();
|
||||
expect(screen.getByText("Fichier: mixed.txt")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("inserts pasted image tokens at the cursor and sends the tokenized projection", async () => {
|
||||
const agent = {
|
||||
launchAgentChat: vi.fn(),
|
||||
reattachAgentChat: vi.fn(async (sessionId: string) => ({
|
||||
sessionId,
|
||||
scrollback: [],
|
||||
})),
|
||||
sendAgentChat: vi.fn(async () => {}),
|
||||
cancelAgentChat: vi.fn(async () => {}),
|
||||
closeAgentChat: vi.fn(async () => {}),
|
||||
};
|
||||
|
||||
render(
|
||||
<DIProvider
|
||||
gateways={{
|
||||
agent,
|
||||
system: { pickFile: vi.fn(async () => null) },
|
||||
} as unknown as Gateways}
|
||||
>
|
||||
<CustomAgentChatView
|
||||
projectId="project-1"
|
||||
agentId="agent-1"
|
||||
agentName="Worker"
|
||||
profile={profile}
|
||||
cwd="/repo"
|
||||
nodeId="node-1"
|
||||
sessionId="chat-session-1"
|
||||
conversationId="conversation-1"
|
||||
onSessionId={vi.fn()}
|
||||
onConversationId={vi.fn()}
|
||||
/>
|
||||
</DIProvider>,
|
||||
);
|
||||
|
||||
await waitFor(() =>
|
||||
expect(agent.reattachAgentChat).toHaveBeenCalledWith(
|
||||
"chat-session-1",
|
||||
expect.any(Function),
|
||||
),
|
||||
);
|
||||
|
||||
const composer = screen.getByLabelText(/message CLI custom/) as HTMLTextAreaElement;
|
||||
fireEvent.change(composer, { target: { value: "voir maintenant" } });
|
||||
composer.setSelectionRange(5, 5);
|
||||
const file = new File(["ignored"], "cursor.png", { type: "image/png" });
|
||||
Object.defineProperty(file, "arrayBuffer", {
|
||||
value: vi.fn(async () => new Uint8Array([1, 2, 3]).buffer),
|
||||
});
|
||||
|
||||
fireEvent.paste(composer, {
|
||||
clipboardData: {
|
||||
items: [
|
||||
{
|
||||
kind: "file",
|
||||
type: "image/png",
|
||||
getAsFile: () => file,
|
||||
},
|
||||
],
|
||||
getData: () => "",
|
||||
},
|
||||
});
|
||||
|
||||
await screen.findByText("Fichier joint: cursor.png");
|
||||
await waitFor(() => expect(composer.value).toBe("voir [Image 1] maintenant"));
|
||||
fireEvent.click(screen.getByRole("button", { name: "Envoyer" }));
|
||||
|
||||
await waitFor(() => expect(agent.sendAgentChat).toHaveBeenCalledTimes(1));
|
||||
expect(agent.sendAgentChat).toHaveBeenCalledWith(
|
||||
"chat-session-1",
|
||||
"voir [Image 1] maintenant",
|
||||
expect.any(Function),
|
||||
{
|
||||
attachments: [
|
||||
{
|
||||
filename: "cursor.png",
|
||||
contentBase64: "AQID",
|
||||
mime: "image/png",
|
||||
sourceKind: "clipboard",
|
||||
},
|
||||
],
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
it("deduplicates clipboard files by metadata across clipboard sources and repeated paste", async () => {
|
||||
@ -2826,13 +2941,13 @@ describe("CustomAgentChatView", () => {
|
||||
});
|
||||
await screen.findByText("Fichier joint: not-persisted.png");
|
||||
await waitFor(() =>
|
||||
expect(agent.saveChatDraft).toHaveBeenCalledWith(scope, "draft with file"),
|
||||
expect(agent.saveChatDraft).toHaveBeenCalledWith(scope, "draft with file[Image 1]"),
|
||||
);
|
||||
|
||||
first.unmount();
|
||||
renderView();
|
||||
|
||||
await screen.findByDisplayValue("draft with file");
|
||||
await screen.findByDisplayValue("draft with file[Image 1]");
|
||||
expect(screen.queryByText("Fichier joint: not-persisted.png")).toBeNull();
|
||||
});
|
||||
|
||||
|
||||
@ -13,11 +13,12 @@ import {
|
||||
useRef,
|
||||
useState,
|
||||
type ClipboardEvent,
|
||||
type KeyboardEvent,
|
||||
type MouseEvent as ReactMouseEvent,
|
||||
} from "react";
|
||||
|
||||
import type {
|
||||
AgentProfile,
|
||||
ChatPromptAttachment,
|
||||
GatewayError,
|
||||
ReplyChunk,
|
||||
ReplyProgress,
|
||||
@ -46,12 +47,15 @@ export interface CustomAgentChatViewProps {
|
||||
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?: ChatPromptAttachment[] }
|
||||
| { role: "user"; text: string; attachments?: string[] }
|
||||
| { role: "agent"; text: string; pending?: boolean }
|
||||
| { role: "tool"; label: string }
|
||||
| { role: "progress"; progress: ReplyProgress; settled?: boolean }
|
||||
@ -61,12 +65,14 @@ type ChatTurn =
|
||||
|
||||
interface CachedChatView {
|
||||
turns: ChatTurn[];
|
||||
entityProgressMap: Map<string, ReplyProgress>;
|
||||
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();
|
||||
@ -78,6 +84,12 @@ interface AttachmentDraft {
|
||||
input: ChatAttachmentInput;
|
||||
previewUrl?: string;
|
||||
dedupeKey?: string;
|
||||
token?: string;
|
||||
}
|
||||
|
||||
interface ProgressIndexEntry {
|
||||
firstOccurredAtMs: number;
|
||||
sequence: number;
|
||||
}
|
||||
|
||||
interface ProfileCommandDialogState {
|
||||
@ -159,62 +171,10 @@ function attachmentLabels(value: unknown): string[] {
|
||||
: [];
|
||||
}
|
||||
|
||||
function isImageFilename(filename: string): boolean {
|
||||
return /\.(apng|avif|gif|jpe?g|png|svg|webp)$/i.test(filename.trim());
|
||||
}
|
||||
|
||||
function fallbackAttachmentRefs(labels: string[]): ChatPromptAttachment[] {
|
||||
let imageCount = 0;
|
||||
let fileCount = 0;
|
||||
return labels.map((filename) => {
|
||||
const image = isImageFilename(filename);
|
||||
const reference = image ? `[image ${++imageCount}]` : `[file ${++fileCount}]`;
|
||||
return { reference, filename };
|
||||
});
|
||||
}
|
||||
|
||||
function attachmentRefs(value: unknown, labels: string[] = []): ChatPromptAttachment[] {
|
||||
if (Array.isArray(value)) {
|
||||
const refs = value
|
||||
.map((item): ChatPromptAttachment | null => {
|
||||
if (!item || typeof item !== "object") return null;
|
||||
const record = item as Record<string, unknown>;
|
||||
const reference = optionalString(record.reference);
|
||||
const filename = optionalString(record.filename);
|
||||
if (!reference || !filename) return null;
|
||||
return {
|
||||
reference,
|
||||
filename,
|
||||
mime: optionalString(record.mime),
|
||||
sizeBytes: typeof record.sizeBytes === "number" ? record.sizeBytes : undefined,
|
||||
readablePath: optionalString(record.readablePath),
|
||||
};
|
||||
})
|
||||
.filter((item): item is ChatPromptAttachment => Boolean(item));
|
||||
if (refs.length > 0) return refs;
|
||||
}
|
||||
return fallbackAttachmentRefs(labels);
|
||||
}
|
||||
|
||||
function attachmentRefsFromDrafts(attachments: AttachmentDraft[]): ChatPromptAttachment[] {
|
||||
let imageCount = 0;
|
||||
let fileCount = 0;
|
||||
return attachments.map((attachment) => {
|
||||
const mime = attachment.input.mime ?? "";
|
||||
const image = mime.startsWith("image/") || (!mime && isImageFilename(attachment.label));
|
||||
const reference = image ? `[image ${++imageCount}]` : `[file ${++fileCount}]`;
|
||||
return {
|
||||
reference,
|
||||
filename: attachment.label,
|
||||
mime: attachment.input.mime,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function appendUserPrompt(
|
||||
turns: ChatTurn[],
|
||||
text: string,
|
||||
attachments: ChatPromptAttachment[] = [],
|
||||
attachments: string[] = [],
|
||||
): ChatTurn[] {
|
||||
const last = turns[turns.length - 1];
|
||||
if (
|
||||
@ -268,6 +228,10 @@ function normalizeProgress(raw: unknown): ReplyProgress | null {
|
||||
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",
|
||||
@ -281,7 +245,6 @@ function normalizeProgress(raw: unknown): ReplyProgress | null {
|
||||
|
||||
function progressKey(progress: ReplyProgress): string {
|
||||
return [
|
||||
progress.progressId ?? "",
|
||||
progress.source,
|
||||
progress.kind,
|
||||
progress.stage,
|
||||
@ -291,6 +254,14 @@ function progressKey(progress: ReplyProgress): string {
|
||||
].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();
|
||||
@ -303,7 +274,6 @@ function isDelegationProgress(progress: ReplyProgress): boolean {
|
||||
}
|
||||
|
||||
function progressEntityKey(progress: ReplyProgress): string | null {
|
||||
if (progress.progressId) return `id:${progress.progressId}`;
|
||||
const name = normalizedProgressToolName(progress);
|
||||
if (!name) return null;
|
||||
if (isDelegationProgress(progress)) return `delegation:${name}`;
|
||||
@ -312,7 +282,7 @@ function progressEntityKey(progress: ReplyProgress): string | null {
|
||||
}
|
||||
|
||||
function progressStageBucket(progress: ReplyProgress): string {
|
||||
if (!progressEntityKey(progress)) return progress.stage;
|
||||
if (!isCenteredToolProgress(progress)) return progress.stage;
|
||||
if (progress.stage === "started" || progress.stage === "delta") return "started";
|
||||
if (progress.stage === "completed") return "completed";
|
||||
return "info";
|
||||
@ -326,54 +296,61 @@ function progressDisplayKey(progress: ReplyProgress): string {
|
||||
|
||||
interface ChatViewState {
|
||||
turns: ChatTurn[];
|
||||
entityProgressMap: Map<string, ReplyProgress>;
|
||||
progressIndex: Map<string, ProgressIndexEntry>;
|
||||
}
|
||||
|
||||
function emptyChatViewState(): ChatViewState {
|
||||
return { turns: [], entityProgressMap: new Map() };
|
||||
return { turns: [], progressIndex: new Map() };
|
||||
}
|
||||
|
||||
function appendProgress(state: ChatViewState, progress: ReplyProgress): ChatViewState {
|
||||
const entity = progressEntityKey(progress);
|
||||
if (entity) {
|
||||
const bucket = progressStageBucket(progress);
|
||||
const key = `${entity}\u0000${bucket}`;
|
||||
if (bucket === "started") {
|
||||
const nextMap = new Map(state.entityProgressMap);
|
||||
nextMap.set(key, progress);
|
||||
return { turns: state.turns, entityProgressMap: nextMap };
|
||||
}
|
||||
if (bucket === "completed") {
|
||||
const runningKey = `${entity}\u0000started`;
|
||||
const running = state.entityProgressMap.get(runningKey);
|
||||
const nextMap = new Map(state.entityProgressMap);
|
||||
nextMap.delete(runningKey);
|
||||
if (
|
||||
!running &&
|
||||
state.turns.some(
|
||||
(turn) => turn.role === "progress" && progressDisplayKey(turn.progress) === key,
|
||||
)
|
||||
) {
|
||||
return { turns: state.turns, entityProgressMap: nextMap };
|
||||
}
|
||||
const completed = running ? mergeCompletedProgress(running, progress) : progress;
|
||||
return {
|
||||
turns: [...state.turns, { role: "progress", progress: completed }],
|
||||
entityProgressMap: nextMap,
|
||||
};
|
||||
}
|
||||
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 key = progressDisplayKey(progress);
|
||||
if (
|
||||
state.turns.some(
|
||||
(turn) => turn.role === "progress" && progressDisplayKey(turn.progress) === key,
|
||||
)
|
||||
) {
|
||||
return state;
|
||||
|
||||
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, { role: "progress", progress }],
|
||||
entityProgressMap: state.entityProgressMap,
|
||||
turns: [
|
||||
...state.turns.slice(0, insertAt),
|
||||
nextTurn,
|
||||
...state.turns.slice(insertAt),
|
||||
],
|
||||
progressIndex: nextIndex,
|
||||
};
|
||||
}
|
||||
|
||||
@ -430,13 +407,9 @@ function completeRunningProgress(turns: ChatTurn[]): ChatTurn[] {
|
||||
}
|
||||
|
||||
function completeChatViewProgress(state: ChatViewState): ChatViewState {
|
||||
const activeTurns = Array.from(state.entityProgressMap.values()).map((progress) => ({
|
||||
role: "progress" as const,
|
||||
progress,
|
||||
}));
|
||||
return {
|
||||
turns: completeRunningProgress([...state.turns, ...activeTurns]),
|
||||
entityProgressMap: new Map(),
|
||||
turns: completeRunningProgress(state.turns),
|
||||
progressIndex: state.progressIndex,
|
||||
};
|
||||
}
|
||||
|
||||
@ -445,7 +418,6 @@ function isRecoverableNoResponseTurn(turn: ChatTurn | undefined): boolean {
|
||||
}
|
||||
|
||||
function turnsIndicateBusy(state: ChatViewState): boolean {
|
||||
if (state.entityProgressMap.size > 0) return true;
|
||||
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;
|
||||
@ -461,6 +433,26 @@ function turnsIndicateBusy(state: ChatViewState): boolean {
|
||||
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";
|
||||
@ -584,7 +576,7 @@ function foldChunk(state: ChatViewState, raw: unknown): ChatViewState {
|
||||
if (!isReplyRecord(raw)) {
|
||||
return {
|
||||
turns: [...turns, { role: "unknown", text: unknownChunkLabel(raw) }],
|
||||
entityProgressMap: state.entityProgressMap,
|
||||
progressIndex: state.progressIndex,
|
||||
};
|
||||
}
|
||||
const last = turns[turns.length - 1];
|
||||
@ -602,19 +594,19 @@ function foldChunk(state: ChatViewState, raw: unknown): ChatViewState {
|
||||
case "textDelta":
|
||||
return {
|
||||
turns: appendAgentDelta(turns, String(raw.text ?? "")),
|
||||
entityProgressMap: state.entityProgressMap,
|
||||
progressIndex: state.progressIndex,
|
||||
};
|
||||
case "toolActivity":
|
||||
return {
|
||||
turns: [...turns, { role: "tool", label: String(raw.label ?? "Activité") }],
|
||||
entityProgressMap: state.entityProgressMap,
|
||||
progressIndex: state.progressIndex,
|
||||
};
|
||||
case "progress": {
|
||||
const progress = normalizeProgress(raw.progress);
|
||||
if (!progress) {
|
||||
return {
|
||||
turns: [...turns, { role: "unknown", text: unknownChunkLabel(raw) }],
|
||||
entityProgressMap: state.entityProgressMap,
|
||||
progressIndex: state.progressIndex,
|
||||
};
|
||||
}
|
||||
return appendProgress(state, progress);
|
||||
@ -626,7 +618,7 @@ function foldChunk(state: ChatViewState, raw: unknown): ChatViewState {
|
||||
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, entityProgressMap: completedState.entityProgressMap };
|
||||
return { turns: next, progressIndex: completedState.progressIndex };
|
||||
}
|
||||
case "error": {
|
||||
const completedState = completeChatViewProgress(state);
|
||||
@ -634,7 +626,7 @@ function foldChunk(state: ChatViewState, raw: unknown): ChatViewState {
|
||||
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, entityProgressMap: completedState.entityProgressMap };
|
||||
return { turns: next, progressIndex: completedState.progressIndex };
|
||||
}
|
||||
case "userPrompt":
|
||||
case "UserPrompt":
|
||||
@ -642,14 +634,14 @@ function foldChunk(state: ChatViewState, raw: unknown): ChatViewState {
|
||||
turns: appendUserPrompt(
|
||||
turns,
|
||||
String(raw.text ?? raw.prompt ?? ""),
|
||||
attachmentRefs(raw.attachmentRefs, attachmentLabels(raw.attachments)),
|
||||
attachmentLabels(raw.attachments),
|
||||
),
|
||||
entityProgressMap: state.entityProgressMap,
|
||||
progressIndex: state.progressIndex,
|
||||
};
|
||||
default:
|
||||
return {
|
||||
turns: [...turns, { role: "unknown", text: unknownChunkLabel(raw) }],
|
||||
entityProgressMap: state.entityProgressMap,
|
||||
progressIndex: state.progressIndex,
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -664,6 +656,9 @@ export function CustomAgentChatView({
|
||||
nodeId,
|
||||
sessionId,
|
||||
conversationId,
|
||||
composerHeightPx = FALLBACK_COMPOSER_HEIGHT,
|
||||
composerDefaultHeightPx = FALLBACK_COMPOSER_HEIGHT,
|
||||
onComposerHeightPxChange,
|
||||
onSessionId,
|
||||
onConversationId,
|
||||
}: CustomAgentChatViewProps) {
|
||||
@ -672,7 +667,7 @@ export function CustomAgentChatView({
|
||||
const [turns, setTurns] = useState<ChatTurn[]>(
|
||||
() => (sessionId ? (chatSessionViewCache.get(sessionId)?.turns ?? []) : []),
|
||||
);
|
||||
const [entityProgressMap, setEntityProgressMap] = useState<Map<string, ReplyProgress>>(new Map());
|
||||
const [progressIndex, setProgressIndex] = useState<Map<string, ProgressIndexEntry>>(new Map());
|
||||
const [currentSession, setCurrentSession] = useState(sessionId);
|
||||
const [externalSessionId, setExternalSessionId] = useState(sessionId);
|
||||
const [draft, setDraft] = useState("");
|
||||
@ -688,8 +683,9 @@ export function CustomAgentChatView({
|
||||
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 entityProgressMapRef = useRef(entityProgressMap);
|
||||
const progressIndexRef = useRef(progressIndex);
|
||||
const sessionRef = useRef<string | null>(sessionId);
|
||||
sessionRef.current = currentSession;
|
||||
const scrollbackChunkCountRef = useRef(
|
||||
@ -706,6 +702,9 @@ export function CustomAgentChatView({
|
||||
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);
|
||||
@ -714,11 +713,68 @@ export function CustomAgentChatView({
|
||||
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;
|
||||
entityProgressMapRef.current = next.entityProgressMap;
|
||||
progressIndexRef.current = next.progressIndex;
|
||||
setTurns(next.turns);
|
||||
setEntityProgressMap(next.entityProgressMap);
|
||||
setProgressIndex(next.progressIndex);
|
||||
}, []);
|
||||
|
||||
const updateChatViewState = useCallback(
|
||||
@ -726,7 +782,7 @@ export function CustomAgentChatView({
|
||||
applyChatViewState(
|
||||
updater({
|
||||
turns: turnsRef.current,
|
||||
entityProgressMap: entityProgressMapRef.current,
|
||||
progressIndex: progressIndexRef.current,
|
||||
}),
|
||||
);
|
||||
},
|
||||
@ -746,16 +802,7 @@ export function CustomAgentChatView({
|
||||
() => (layoutId ? { projectId, layoutId, nodeId } : null),
|
||||
[layoutId, nodeId, projectId],
|
||||
);
|
||||
const displayTurns = useMemo<ChatTurn[]>(
|
||||
() => [
|
||||
...turns,
|
||||
...Array.from(entityProgressMap.values()).map((progress) => ({
|
||||
role: "progress" as const,
|
||||
progress,
|
||||
})),
|
||||
],
|
||||
[entityProgressMap, turns],
|
||||
);
|
||||
const displayTurns = turns;
|
||||
|
||||
const clearPersistedDraft = useCallback(async () => {
|
||||
if (!draftScope) return;
|
||||
@ -827,10 +874,10 @@ export function CustomAgentChatView({
|
||||
if (!currentSession) return;
|
||||
chatSessionViewCache.set(currentSession, {
|
||||
turns,
|
||||
entityProgressMap,
|
||||
progressIndex,
|
||||
chunkCount: scrollbackChunkCountRef.current,
|
||||
});
|
||||
}, [currentSession, entityProgressMap, turns]);
|
||||
}, [currentSession, progressIndex, turns]);
|
||||
|
||||
useEffect(() => {
|
||||
draftSaveSeqRef.current += 1;
|
||||
@ -1128,7 +1175,7 @@ export function CustomAgentChatView({
|
||||
scrollbackChunkCountRef.current = cached.chunkCount;
|
||||
applyChatViewState({
|
||||
turns: cached.turns,
|
||||
entityProgressMap: cached.entityProgressMap ?? new Map(),
|
||||
progressIndex: cached.progressIndex ?? new Map(),
|
||||
});
|
||||
}
|
||||
try {
|
||||
@ -1272,7 +1319,7 @@ export function CustomAgentChatView({
|
||||
|
||||
applyChatViewState({
|
||||
turns: [{ role: "tool", label: `Profil changé vers ${selected.name}.` }],
|
||||
entityProgressMap: new Map(),
|
||||
progressIndex: new Map(),
|
||||
});
|
||||
setProfileDialog(null);
|
||||
} catch (e) {
|
||||
@ -1307,7 +1354,7 @@ export function CustomAgentChatView({
|
||||
const helpText = formatSlashCommandHelp(result.effect.commands);
|
||||
updateChatViewState((prev) => ({
|
||||
turns: [...prev.turns, { role: "agent", text: helpText }],
|
||||
entityProgressMap: prev.entityProgressMap,
|
||||
progressIndex: prev.progressIndex,
|
||||
}));
|
||||
return;
|
||||
}
|
||||
@ -1330,7 +1377,7 @@ export function CustomAgentChatView({
|
||||
...prev.turns,
|
||||
{ role: "tool", label: `Commande plugin ${result.command.name} exécutée.` },
|
||||
],
|
||||
entityProgressMap: prev.entityProgressMap,
|
||||
progressIndex: prev.progressIndex,
|
||||
}));
|
||||
return;
|
||||
}
|
||||
@ -1339,7 +1386,7 @@ export function CustomAgentChatView({
|
||||
setError(message);
|
||||
updateChatViewState((prev) => ({
|
||||
turns: [...prev.turns, { role: "error", text: message }],
|
||||
entityProgressMap: prev.entityProgressMap,
|
||||
progressIndex: prev.progressIndex,
|
||||
}));
|
||||
}
|
||||
}
|
||||
@ -1358,6 +1405,15 @@ export function CustomAgentChatView({
|
||||
}
|
||||
}
|
||||
|
||||
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>,
|
||||
) {
|
||||
@ -1375,26 +1431,42 @@ export function CustomAgentChatView({
|
||||
const nextAttachments = await Promise.all(
|
||||
files.map(clipboardFileToAttachment),
|
||||
);
|
||||
setAttachments((prev) => {
|
||||
const known = new Set(
|
||||
prev
|
||||
.map((attachment) => attachment.dedupeKey)
|
||||
.filter((key): key is string => Boolean(key)),
|
||||
);
|
||||
const unique = nextAttachments.filter((attachment) => {
|
||||
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 };
|
||||
});
|
||||
return unique.length > 0 ? [...prev, ...unique] : prev;
|
||||
});
|
||||
if (filesFromEvent.length > 0 && pastedText) {
|
||||
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) =>
|
||||
prev.slice(0, selectionStart) +
|
||||
pastedText +
|
||||
prev.slice(selectionEnd),
|
||||
insertTextAtSelection(
|
||||
prev,
|
||||
insertionParts.join(" "),
|
||||
selectionStart,
|
||||
selectionEnd,
|
||||
),
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
@ -1412,7 +1484,7 @@ export function CustomAgentChatView({
|
||||
}
|
||||
const outgoingAttachments = attachments;
|
||||
const attachmentInputs = outgoingAttachments.map((item) => item.input);
|
||||
const attachmentRefs = attachmentRefsFromDrafts(outgoingAttachments);
|
||||
const attachmentLabels = outgoingAttachments.map((item) => item.label);
|
||||
const displayText = text || "Pièce jointe";
|
||||
const interactionId = `${agentId}:${++interactionSeqRef.current}`;
|
||||
activeInteractionIdRef.current = interactionId;
|
||||
@ -1424,6 +1496,7 @@ export function CustomAgentChatView({
|
||||
};
|
||||
setDraft("");
|
||||
setAttachments([]);
|
||||
imageTokenSeqRef.current = 0;
|
||||
void clearPersistedDraft();
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
@ -1433,10 +1506,10 @@ export function CustomAgentChatView({
|
||||
{
|
||||
role: "user",
|
||||
text: displayText,
|
||||
...(attachmentRefs.length > 0 ? { attachments: attachmentRefs } : {}),
|
||||
...(attachmentLabels.length > 0 ? { attachments: attachmentLabels } : {}),
|
||||
},
|
||||
],
|
||||
entityProgressMap: prev.entityProgressMap,
|
||||
progressIndex: prev.progressIndex,
|
||||
}));
|
||||
const sendTurn = (sid: string) =>
|
||||
attachmentInputs.length > 0
|
||||
@ -1469,7 +1542,7 @@ export function CustomAgentChatView({
|
||||
setError(describe(recoveryError));
|
||||
updateChatViewState((prev) => ({
|
||||
turns: [...prev.turns, { role: "error", text: describe(recoveryError) }],
|
||||
entityProgressMap: prev.entityProgressMap,
|
||||
progressIndex: prev.progressIndex,
|
||||
}));
|
||||
return;
|
||||
}
|
||||
@ -1479,7 +1552,7 @@ export function CustomAgentChatView({
|
||||
setError(describe(e));
|
||||
updateChatViewState((prev) => ({
|
||||
turns: [...prev.turns, { role: "error", text: describe(e) }],
|
||||
entityProgressMap: prev.entityProgressMap,
|
||||
progressIndex: prev.progressIndex,
|
||||
}));
|
||||
}
|
||||
}
|
||||
@ -1512,7 +1585,7 @@ export function CustomAgentChatView({
|
||||
: "Agent arrêté.",
|
||||
},
|
||||
],
|
||||
entityProgressMap: completed.entityProgressMap,
|
||||
progressIndex: completed.progressIndex,
|
||||
};
|
||||
});
|
||||
} catch (e) {
|
||||
@ -1532,7 +1605,7 @@ export function CustomAgentChatView({
|
||||
...completed.turns,
|
||||
{ role: "tool", label: "Session déjà arrêtée." },
|
||||
],
|
||||
entityProgressMap: completed.entityProgressMap,
|
||||
progressIndex: completed.progressIndex,
|
||||
};
|
||||
});
|
||||
return;
|
||||
@ -1543,7 +1616,7 @@ export function CustomAgentChatView({
|
||||
...prev.turns,
|
||||
{ role: "error", text: `Arrêt de l'agent échoué: ${describe(e)}` },
|
||||
],
|
||||
entityProgressMap: prev.entityProgressMap,
|
||||
progressIndex: prev.progressIndex,
|
||||
}));
|
||||
} finally {
|
||||
setStopping(false);
|
||||
@ -1552,6 +1625,7 @@ export function CustomAgentChatView({
|
||||
|
||||
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"
|
||||
>
|
||||
@ -1721,11 +1795,7 @@ export function CustomAgentChatView({
|
||||
type="button"
|
||||
aria-label={`retirer ${item.label}`}
|
||||
className="shrink-0 text-content"
|
||||
onClick={() =>
|
||||
setAttachments((prev) =>
|
||||
prev.filter((candidate) => candidate.id !== item.id),
|
||||
)
|
||||
}
|
||||
onClick={() => removeAttachment(item)}
|
||||
>
|
||||
Retirer
|
||||
</button>
|
||||
@ -1772,55 +1842,73 @@ export function CustomAgentChatView({
|
||||
</div>
|
||||
)}
|
||||
<div className="flex min-w-0 items-end gap-2">
|
||||
<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 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…"
|
||||
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;
|
||||
}
|
||||
<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
|
||||
}
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
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();
|
||||
void send();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
commitComposerHeight(composerDefaultHeightPx);
|
||||
}}
|
||||
onKeyDown={handleComposerResizeKeyDown}
|
||||
>
|
||||
↕
|
||||
</button>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
@ -1888,6 +1976,9 @@ function ChatBubble({
|
||||
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>
|
||||
@ -1908,8 +1999,8 @@ function ChatBubble({
|
||||
{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.reference}-${attachment.filename}`} className="truncate">
|
||||
{attachment.reference} {attachment.filename}
|
||||
<p key={attachment} className="truncate">
|
||||
Fichier: {attachment}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
@ -1942,11 +2033,11 @@ function progressSourceLabel(progress: ReplyProgress): string {
|
||||
function progressStageLabel(stage: ReplyProgressStage): string {
|
||||
switch (stage) {
|
||||
case "started":
|
||||
return "started";
|
||||
return "En cours";
|
||||
case "delta":
|
||||
return "running";
|
||||
return "En cours";
|
||||
case "completed":
|
||||
return "done";
|
||||
return "Terminé";
|
||||
case "info":
|
||||
return "info";
|
||||
}
|
||||
|
||||
@ -69,6 +69,8 @@ const LANE_W = 16;
|
||||
const ROW_H = 36;
|
||||
/** Radius of the commit dot. */
|
||||
const DOT_R = 4.5;
|
||||
/** Stable version tag column, kept outside the DAG lanes. */
|
||||
const TAGS_COL_W = 112;
|
||||
|
||||
/** Horizontal centre of a lane. */
|
||||
const laneX = (lane: number) => lane * LANE_W + LANE_W / 2;
|
||||
@ -283,6 +285,8 @@ export function GitGraphView({ projectId }: GitGraphViewProps) {
|
||||
)}
|
||||
{vm.rows.map((row) => {
|
||||
const isSelected = row.commit.hash === selectedHash;
|
||||
const tagRefs = row.commit.refs.filter(isTag);
|
||||
const branchRefs = row.commit.refs.filter((ref) => !isTag(ref));
|
||||
return (
|
||||
<div
|
||||
key={row.commit.hash}
|
||||
@ -297,21 +301,36 @@ export function GitGraphView({ projectId }: GitGraphViewProps) {
|
||||
)}
|
||||
style={{ height: ROW_H }}
|
||||
>
|
||||
{/* Version tags live in their own stable column, left of the DAG. */}
|
||||
<div
|
||||
data-testid={`git-tags-cell-${row.commit.hash.slice(0, 8)}`}
|
||||
className="flex shrink-0 items-center gap-1 overflow-hidden"
|
||||
style={{ width: TAGS_COL_W }}
|
||||
>
|
||||
{tagRefs.map((ref) => (
|
||||
<span
|
||||
key={ref}
|
||||
title={ref}
|
||||
className="min-w-0 max-w-full truncate rounded bg-warning/20 px-1 py-0.5 text-xs font-medium text-warning"
|
||||
>
|
||||
{ref}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* SVG lanes + node */}
|
||||
<GraphColumn row={row} laneCount={laneCount} />
|
||||
|
||||
{/* Ref badges */}
|
||||
{row.commit.refs.length > 0 && (
|
||||
<div className="flex shrink-0 flex-wrap gap-1">
|
||||
{row.commit.refs.map((ref) => (
|
||||
{/* Branch refs stay beside the graph in the existing refs zone. */}
|
||||
{branchRefs.length > 0 && (
|
||||
<div
|
||||
data-testid={`git-branch-refs-cell-${row.commit.hash.slice(0, 8)}`}
|
||||
className="flex shrink-0 flex-wrap gap-1"
|
||||
>
|
||||
{branchRefs.map((ref) => (
|
||||
<span
|
||||
key={ref}
|
||||
className={cn(
|
||||
"rounded px-1 py-0.5 text-xs font-medium",
|
||||
isTag(ref)
|
||||
? "bg-warning/20 text-warning"
|
||||
: "bg-primary/20 text-primary",
|
||||
)}
|
||||
className="rounded bg-primary/20 px-1 py-0.5 text-xs font-medium text-primary"
|
||||
>
|
||||
{ref}
|
||||
</span>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
* - Clicking close hides the detail panel.
|
||||
*/
|
||||
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { render, screen, waitFor, fireEvent } from "@testing-library/react";
|
||||
|
||||
import { MockGitGateway } from "@/adapters/mock";
|
||||
@ -22,7 +22,7 @@ import { GitGraphView } from "./GitGraphView";
|
||||
// Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function renderView(git: MockGitGateway = new MockGitGateway()) {
|
||||
function renderView(git: unknown = new MockGitGateway()) {
|
||||
const gateways = { git } as unknown as Gateways;
|
||||
return render(
|
||||
<DIProvider gateways={gateways}>
|
||||
@ -71,6 +71,10 @@ describe("GitGraphView", () => {
|
||||
expect(tagBadge).toBeTruthy();
|
||||
// Tag badge should have the warning colour class
|
||||
expect(tagBadge.className).toMatch(/warning/);
|
||||
const tagCell = screen.getByTestId("git-tags-cell-aaaaaaaa");
|
||||
expect(tagCell.textContent).toContain("tag: v1.0");
|
||||
expect(tagCell.style.width).toBe("112px");
|
||||
expect(tagBadge.className).toMatch(/truncate/);
|
||||
});
|
||||
|
||||
it("shows 'feature' branch badge", async () => {
|
||||
@ -82,6 +86,29 @@ describe("GitGraphView", () => {
|
||||
expect(featureBadge.className).toMatch(/primary/);
|
||||
});
|
||||
|
||||
it("keeps tags in the left tag column and branches in the refs zone", async () => {
|
||||
renderView({
|
||||
graph: vi.fn(async () => [
|
||||
{
|
||||
hash: "1111111111111111111111111111111111111111",
|
||||
summary: "Release build",
|
||||
parents: [],
|
||||
refs: ["main", "tag: v2026.08.14-long-release-name"],
|
||||
author: "Alice",
|
||||
timestamp: 1_717_200_000,
|
||||
},
|
||||
]),
|
||||
});
|
||||
await waitForCommits();
|
||||
|
||||
const tagCell = screen.getByTestId("git-tags-cell-11111111");
|
||||
const branchCell = screen.getByTestId("git-branch-refs-cell-11111111");
|
||||
expect(tagCell.textContent).toContain("tag: v2026.08.14-long-release-name");
|
||||
expect(tagCell.textContent).not.toContain("main");
|
||||
expect(branchCell.textContent).toContain("main");
|
||||
expect(branchCell.textContent).not.toContain("tag: v2026.08.14-long-release-name");
|
||||
});
|
||||
|
||||
it("clicking a commit row opens the detail panel", async () => {
|
||||
renderView();
|
||||
await waitForCommits();
|
||||
|
||||
@ -180,35 +180,47 @@ describe("LayoutGrid custom agent CLI (#147)", () => {
|
||||
expect(screen.getAllByText(/mock-attachment.txt/).length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("resizes the custom CLI chat locally per cell and can reset to the default size", async () => {
|
||||
it("persists custom CLI composer height per layout cell", async () => {
|
||||
const rectSpy = vi
|
||||
.spyOn(HTMLElement.prototype, "getBoundingClientRect")
|
||||
.mockReturnValue({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 600,
|
||||
height: 400,
|
||||
top: 0,
|
||||
right: 600,
|
||||
bottom: 400,
|
||||
left: 0,
|
||||
toJSON: () => {},
|
||||
} as DOMRect);
|
||||
const gateways = await seeded(structuredProfile);
|
||||
const layout = gateways.layout as MockLayoutGateway;
|
||||
const tree = await layout.loadLayout("p1");
|
||||
const leafId = leaves(tree)[0].id;
|
||||
window.localStorage.setItem(`idea.agent-cell-mode.p1.${leafId}`, "custom");
|
||||
|
||||
renderGrid(gateways);
|
||||
try {
|
||||
renderGrid(gateways);
|
||||
|
||||
const shell = await screen.findByTestId("custom-agent-chat-shell");
|
||||
expect(shell.style.width).toBe("100%");
|
||||
expect(window.localStorage.getItem(`idea.custom-chat-size.p1.${leafId}`)).toBeNull();
|
||||
const composer = await screen.findByLabelText(/message CLI custom/) as HTMLTextAreaElement;
|
||||
const handle = screen.getByRole("button", {
|
||||
name: `redimensionner le composer ${leafId}`,
|
||||
});
|
||||
expect(composer.style.height).toBe("64px");
|
||||
expect(window.localStorage.getItem(`idea.custom-chat-composer-height.p1.${leafId}`))
|
||||
.toBeNull();
|
||||
|
||||
fireEvent.mouseDown(screen.getByRole("button", { name: `resize custom chat ${leafId}` }), {
|
||||
clientX: 0,
|
||||
clientY: 0,
|
||||
});
|
||||
fireEvent.mouseMove(window, { clientX: 640, clientY: 420 });
|
||||
fireEvent.mouseUp(window);
|
||||
fireEvent.mouseDown(handle, { clientY: 200 });
|
||||
fireEvent.mouseMove(window, { clientY: 100 });
|
||||
fireEvent.mouseUp(window);
|
||||
|
||||
await waitFor(() => expect(shell.style.width).toBe("640px"));
|
||||
expect(shell.style.height).toBe("420px");
|
||||
expect(JSON.parse(window.localStorage.getItem(`idea.custom-chat-size.p1.${leafId}`) ?? "{}"))
|
||||
.toEqual({ width: 640, height: 420 });
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: `reset custom chat size ${leafId}` }));
|
||||
|
||||
await waitFor(() => expect(shell.style.width).toBe("100%"));
|
||||
expect(window.localStorage.getItem(`idea.custom-chat-size.p1.${leafId}`)).toBeNull();
|
||||
await waitFor(() => expect(composer.style.height).toBe("164px"));
|
||||
expect(window.localStorage.getItem(`idea.custom-chat-composer-height.p1.${leafId}`))
|
||||
.toBe("164");
|
||||
} finally {
|
||||
rectSpy.mockRestore();
|
||||
}
|
||||
});
|
||||
|
||||
it("opens the custom CLI even when the agent already has a structured background session (#169)", async () => {
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
* {@link normalizeWeights} function, kept out of the render for testability.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useRef, useState, type MouseEvent as ReactMouseEvent } from "react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
|
||||
import type { Agent, AgentProfile } from "@/domain";
|
||||
import type { LayoutNode } from "@/domain";
|
||||
@ -407,47 +407,16 @@ const CELL_Z = {
|
||||
turnActions: 6,
|
||||
} as const;
|
||||
|
||||
const CUSTOM_CHAT_MIN_WIDTH = 360;
|
||||
const CUSTOM_CHAT_MIN_HEIGHT = 280;
|
||||
const CUSTOM_CHAT_MAX_WIDTH = 1200;
|
||||
const CUSTOM_CHAT_MAX_HEIGHT = 900;
|
||||
const CUSTOM_CHAT_COMPOSER_DEFAULT_HEIGHT = 64;
|
||||
|
||||
interface CustomChatSize {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
function clampCustomChatSize(size: CustomChatSize): CustomChatSize {
|
||||
const viewportWidth =
|
||||
typeof window === "undefined" ? CUSTOM_CHAT_MAX_WIDTH : window.innerWidth - 24;
|
||||
const viewportHeight =
|
||||
typeof window === "undefined" ? CUSTOM_CHAT_MAX_HEIGHT : window.innerHeight - 24;
|
||||
return {
|
||||
width: Math.round(
|
||||
Math.min(
|
||||
Math.max(size.width, CUSTOM_CHAT_MIN_WIDTH),
|
||||
Math.max(CUSTOM_CHAT_MIN_WIDTH, Math.min(CUSTOM_CHAT_MAX_WIDTH, viewportWidth)),
|
||||
),
|
||||
),
|
||||
height: Math.round(
|
||||
Math.min(
|
||||
Math.max(size.height, CUSTOM_CHAT_MIN_HEIGHT),
|
||||
Math.max(CUSTOM_CHAT_MIN_HEIGHT, Math.min(CUSTOM_CHAT_MAX_HEIGHT, viewportHeight)),
|
||||
),
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
function readCustomChatSize(storageKey: string): CustomChatSize | null {
|
||||
if (typeof window === "undefined") return null;
|
||||
function readCustomChatComposerHeight(storageKey: string): number {
|
||||
if (typeof window === "undefined") return CUSTOM_CHAT_COMPOSER_DEFAULT_HEIGHT;
|
||||
try {
|
||||
const raw = window.localStorage.getItem(storageKey);
|
||||
if (!raw) return null;
|
||||
const parsed = JSON.parse(raw) as Partial<CustomChatSize>;
|
||||
if (typeof parsed.width !== "number" || typeof parsed.height !== "number") return null;
|
||||
return clampCustomChatSize({ width: parsed.width, height: parsed.height });
|
||||
const parsed = Number(window.localStorage.getItem(storageKey));
|
||||
if (!Number.isFinite(parsed)) return CUSTOM_CHAT_COMPOSER_DEFAULT_HEIGHT;
|
||||
return Math.max(CUSTOM_CHAT_COMPOSER_DEFAULT_HEIGHT, Math.round(parsed));
|
||||
} catch {
|
||||
return null;
|
||||
return CUSTOM_CHAT_COMPOSER_DEFAULT_HEIGHT;
|
||||
}
|
||||
}
|
||||
|
||||
@ -570,53 +539,25 @@ function LeafView({
|
||||
},
|
||||
[cellModeStorageKey],
|
||||
);
|
||||
const customChatSizeStorageKey = `idea.custom-chat-size.${projectId}.${id}`;
|
||||
const [customChatSize, setCustomChatSizeState] = useState<CustomChatSize | null>(() =>
|
||||
readCustomChatSize(customChatSizeStorageKey),
|
||||
const composerHeightStorageKey = `idea.custom-chat-composer-height.${projectId}.${id}`;
|
||||
const [customChatComposerHeight, setCustomChatComposerHeightState] = useState(() =>
|
||||
readCustomChatComposerHeight(composerHeightStorageKey),
|
||||
);
|
||||
const setCustomChatSize = useCallback(
|
||||
(size: CustomChatSize | null) => {
|
||||
setCustomChatSizeState(size);
|
||||
const setCustomChatComposerHeight = useCallback(
|
||||
(height: number) => {
|
||||
const nextHeight = Math.max(
|
||||
CUSTOM_CHAT_COMPOSER_DEFAULT_HEIGHT,
|
||||
Math.round(height),
|
||||
);
|
||||
setCustomChatComposerHeightState(nextHeight);
|
||||
if (typeof window === "undefined") return;
|
||||
try {
|
||||
if (size) {
|
||||
window.localStorage.setItem(customChatSizeStorageKey, JSON.stringify(size));
|
||||
} else {
|
||||
window.localStorage.removeItem(customChatSizeStorageKey);
|
||||
}
|
||||
window.localStorage.setItem(composerHeightStorageKey, String(nextHeight));
|
||||
} catch {
|
||||
/* local preference only */
|
||||
}
|
||||
},
|
||||
[customChatSizeStorageKey],
|
||||
);
|
||||
const startCustomChatResize = useCallback(
|
||||
(event: ReactMouseEvent<HTMLButtonElement>) => {
|
||||
const container = event.currentTarget.closest<HTMLElement>("[data-custom-chat-shell]");
|
||||
if (!container) return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const rect = container.getBoundingClientRect();
|
||||
const startX = event.clientX;
|
||||
const startY = event.clientY;
|
||||
const startWidth = customChatSize?.width ?? rect.width;
|
||||
const startHeight = customChatSize?.height ?? rect.height;
|
||||
const onMove = (moveEvent: MouseEvent) => {
|
||||
setCustomChatSize(
|
||||
clampCustomChatSize({
|
||||
width: startWidth + moveEvent.clientX - startX,
|
||||
height: startHeight + moveEvent.clientY - startY,
|
||||
}),
|
||||
);
|
||||
};
|
||||
const onUp = () => {
|
||||
window.removeEventListener("mousemove", onMove);
|
||||
window.removeEventListener("mouseup", onUp);
|
||||
};
|
||||
window.addEventListener("mousemove", onMove);
|
||||
window.addEventListener("mouseup", onUp);
|
||||
},
|
||||
[customChatSize, setCustomChatSize],
|
||||
[composerHeightStorageKey],
|
||||
);
|
||||
const [pendingModeSwitch, setPendingModeSwitch] =
|
||||
useState<PendingModeSwitch | null>(null);
|
||||
@ -1192,7 +1133,7 @@ function LeafView({
|
||||
minWidth: 0,
|
||||
border: "1px solid #2a2a2a",
|
||||
boxSizing: "border-box",
|
||||
overflow: customChatSize ? "visible" : "hidden",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
@ -1556,85 +1497,23 @@ function LeafView({
|
||||
onRefresh={() => void refreshStoppedAgentState()}
|
||||
/>
|
||||
) : agentId && cellMode === "custom" && effectiveCustomCliAvailable && customCliAgent && customCliProfile ? (
|
||||
<div
|
||||
data-custom-chat-shell
|
||||
data-testid="custom-agent-chat-shell"
|
||||
style={{
|
||||
position: customChatSize ? "absolute" : "relative",
|
||||
top: 0,
|
||||
left: 0,
|
||||
zIndex: customChatSize ? 2 : 0,
|
||||
width: customChatSize ? customChatSize.width : "100%",
|
||||
height: customChatSize ? customChatSize.height : "100%",
|
||||
minWidth: CUSTOM_CHAT_MIN_WIDTH,
|
||||
minHeight: CUSTOM_CHAT_MIN_HEIGHT,
|
||||
maxWidth: "calc(100vw - 24px)",
|
||||
maxHeight: "calc(100vh - 24px)",
|
||||
boxShadow: customChatSize ? "0 18px 48px rgba(0, 0, 0, 0.42)" : undefined,
|
||||
}}
|
||||
>
|
||||
<CustomAgentChatView
|
||||
key={`${id}-${agentId}-custom`}
|
||||
projectId={projectId}
|
||||
agentId={agentId}
|
||||
agentName={customCliAgent.name}
|
||||
profile={customCliProfile}
|
||||
cwd={cwd}
|
||||
layoutId={layoutId}
|
||||
nodeId={id}
|
||||
sessionId={session}
|
||||
conversationId={conversationId}
|
||||
onSessionId={(sid) => void setSessionWithInstrumentation("custom", sid)}
|
||||
onConversationId={(cid) => void vm.setCellConversation(id, cid)}
|
||||
/>
|
||||
{customChatSize && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`reset custom chat size ${id}`}
|
||||
title="Reset chat size"
|
||||
onClick={() => setCustomChatSize(null)}
|
||||
style={{
|
||||
position: "absolute",
|
||||
right: 30,
|
||||
bottom: 6,
|
||||
zIndex: 30,
|
||||
border: "1px solid var(--color-border, #3a3a3a)",
|
||||
borderRadius: 3,
|
||||
background: "var(--color-surface, #1e1e1e)",
|
||||
color: "var(--color-content, #e0e0e0)",
|
||||
cursor: "pointer",
|
||||
fontSize: 11,
|
||||
padding: "1px 6px",
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`resize custom chat ${id}`}
|
||||
title="Resize chat"
|
||||
onMouseDown={startCustomChatResize}
|
||||
style={{
|
||||
position: "absolute",
|
||||
right: 6,
|
||||
bottom: 6,
|
||||
zIndex: 30,
|
||||
width: 16,
|
||||
height: 16,
|
||||
border: "1px solid var(--color-border, #3a3a3a)",
|
||||
borderRadius: 3,
|
||||
background: "var(--color-surface, #1e1e1e)",
|
||||
color: "var(--color-muted, #9aa7b4)",
|
||||
cursor: "nwse-resize",
|
||||
fontSize: 11,
|
||||
lineHeight: "12px",
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
↘
|
||||
</button>
|
||||
</div>
|
||||
<CustomAgentChatView
|
||||
key={`${id}-${agentId}-custom`}
|
||||
projectId={projectId}
|
||||
agentId={agentId}
|
||||
agentName={customCliAgent.name}
|
||||
profile={customCliProfile}
|
||||
cwd={cwd}
|
||||
layoutId={layoutId}
|
||||
nodeId={id}
|
||||
sessionId={session}
|
||||
conversationId={conversationId}
|
||||
composerHeightPx={customChatComposerHeight}
|
||||
composerDefaultHeightPx={CUSTOM_CHAT_COMPOSER_DEFAULT_HEIGHT}
|
||||
onComposerHeightPxChange={setCustomChatComposerHeight}
|
||||
onSessionId={(sid) => void setSessionWithInstrumentation("custom", sid)}
|
||||
onConversationId={(cid) => void vm.setCellConversation(id, cid)}
|
||||
/>
|
||||
) : (
|
||||
<TerminalView
|
||||
key={`${id}-${agentId ?? "plain"}-${attachGen}`}
|
||||
|
||||
Reference in New Issue
Block a user