mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-07-16 03:20:46 +02:00
feat: add Agents UI to proprietary right sidebar (#6454)
Update UI to include agents Run `task dev:all` to test
This commit is contained in:
EthanHealy01
@@ -0,0 +1,610 @@
|
||||
import {
|
||||
createContext,
|
||||
useContext,
|
||||
useReducer,
|
||||
useCallback,
|
||||
useRef,
|
||||
type ReactNode,
|
||||
} from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { generateId } from "@app/utils/generateId";
|
||||
import { useAllFiles, useFileActions } from "@app/contexts/FileContext";
|
||||
import apiClient from "@app/services/apiClient";
|
||||
import { getAuthHeaders } from "@app/services/apiClientSetup";
|
||||
import { createChildStub } from "@app/contexts/file/fileActions";
|
||||
import {
|
||||
createNewStirlingFileStub,
|
||||
createStirlingFile,
|
||||
type StirlingFileStub,
|
||||
} from "@app/types/fileContext";
|
||||
import type { ToolOperation } from "@app/types/file";
|
||||
|
||||
export interface ChatMessage {
|
||||
id: string;
|
||||
role: "user" | "assistant";
|
||||
content: string;
|
||||
timestamp: number;
|
||||
/**
|
||||
* Tool endpoint paths executed during this assistant turn (e.g.
|
||||
* {@code /api/v1/general/rotate-pdf}). Populated for assistant messages when the workflow
|
||||
* ran one or more tools, in execution order. Undefined for user messages and for assistant
|
||||
* turns that answered without running any tool.
|
||||
*/
|
||||
toolsUsed?: string[];
|
||||
}
|
||||
|
||||
export enum AiWorkflowPhase {
|
||||
ANALYZING = "analyzing",
|
||||
CALLING_ENGINE = "calling_engine",
|
||||
EXTRACTING_CONTENT = "extracting_content",
|
||||
EXECUTING_TOOL = "executing_tool",
|
||||
PROCESSING = "processing",
|
||||
ENGINE_PROGRESS = "engine_progress",
|
||||
}
|
||||
|
||||
/**
|
||||
* Engine-side progress detail for ENGINE_PROGRESS events. Mirrors the Python
|
||||
* {@code ProgressEvent} discriminated union (engine/src/stirling/contracts/progress.py)
|
||||
* and the Java {@code AiEngineProgressDetail} sealed interface; the {@code phase}
|
||||
* string is the discriminator. Field names are camelCase because the engine
|
||||
* serialises by alias.
|
||||
*/
|
||||
export interface WholeDocReadStartedDetail {
|
||||
phase: "whole_doc_read_started";
|
||||
question: string;
|
||||
pages: number;
|
||||
slices: number;
|
||||
}
|
||||
|
||||
export interface WholeDocSliceDoneDetail {
|
||||
phase: "whole_doc_slice_done";
|
||||
completed: number;
|
||||
total: number;
|
||||
/** Page-range label, e.g. "pages=1-5". */
|
||||
pages: string;
|
||||
durationMs: number;
|
||||
excerpts: number;
|
||||
facts: number;
|
||||
}
|
||||
|
||||
export interface WholeDocCompressionRoundDetail {
|
||||
phase: "whole_doc_compression_round";
|
||||
roundNumber: number;
|
||||
notesIn: number;
|
||||
groups: number;
|
||||
}
|
||||
|
||||
export interface WholeDocReadDoneDetail {
|
||||
phase: "whole_doc_read_done";
|
||||
completed: number;
|
||||
slices: number;
|
||||
durationSeconds: number;
|
||||
}
|
||||
|
||||
export type EngineProgressDetail =
|
||||
| WholeDocReadStartedDetail
|
||||
| WholeDocSliceDoneDetail
|
||||
| WholeDocCompressionRoundDetail
|
||||
| WholeDocReadDoneDetail;
|
||||
|
||||
/**
|
||||
* What we actually carry across the wire boundary: a known typed variant, or a
|
||||
* forward-compat shape with just the discriminator string. The "unknown" arm
|
||||
* exists so a new engine-side phase rolling out before a frontend update keeps
|
||||
* rendering the generic processing message instead of crashing the union.
|
||||
*/
|
||||
export interface UnknownEngineProgressDetail {
|
||||
phase: string;
|
||||
}
|
||||
|
||||
export type AnyEngineProgressDetail =
|
||||
| EngineProgressDetail
|
||||
| UnknownEngineProgressDetail;
|
||||
|
||||
const KNOWN_ENGINE_PHASES = new Set<string>([
|
||||
"whole_doc_read_started",
|
||||
"whole_doc_slice_done",
|
||||
"whole_doc_compression_round",
|
||||
"whole_doc_read_done",
|
||||
]);
|
||||
|
||||
export function isKnownEngineProgressDetail(
|
||||
detail: AnyEngineProgressDetail,
|
||||
): detail is EngineProgressDetail {
|
||||
return KNOWN_ENGINE_PHASES.has(detail.phase);
|
||||
}
|
||||
|
||||
export interface AiWorkflowProgress {
|
||||
phase: AiWorkflowPhase;
|
||||
/** Tool endpoint path currently executing, for EXECUTING_TOOL events. */
|
||||
tool?: string;
|
||||
/** 1-based step index, for EXECUTING_TOOL events. */
|
||||
stepIndex?: number;
|
||||
/** Total number of plan steps, for EXECUTING_TOOL events. */
|
||||
stepCount?: number;
|
||||
/**
|
||||
* Engine-side event payload, for ENGINE_PROGRESS events. Typed sub-phase
|
||||
* record (e.g. {@link WholeDocSliceDoneDetail}) the UI can render in detail.
|
||||
*/
|
||||
engineDetail?: AnyEngineProgressDetail;
|
||||
}
|
||||
|
||||
type AiWorkflowOutcome =
|
||||
| "answer"
|
||||
| "not_found"
|
||||
| "need_content"
|
||||
| "plan"
|
||||
| "need_clarification"
|
||||
| "cannot_do"
|
||||
| "tool_call"
|
||||
| "completed"
|
||||
| "unsupported_capability"
|
||||
| "cannot_continue";
|
||||
|
||||
interface AiWorkflowResultFile {
|
||||
/** Stirling file ID — download with /api/v1/general/files/{fileId}. */
|
||||
fileId: string;
|
||||
fileName: string;
|
||||
contentType: string;
|
||||
}
|
||||
|
||||
interface AiWorkflowResponse {
|
||||
outcome: AiWorkflowOutcome;
|
||||
answer?: string;
|
||||
summary?: string;
|
||||
rationale?: string;
|
||||
reason?: string;
|
||||
question?: string;
|
||||
capability?: string;
|
||||
message?: string;
|
||||
evidence?: Array<{ pageNumber: number; text: string }>;
|
||||
steps?: Array<Record<string, unknown>>;
|
||||
/** Every file produced by the workflow (empty if the outcome has no files). */
|
||||
resultFiles?: AiWorkflowResultFile[];
|
||||
// Legacy single-file fields — mirror the first entry of resultFiles.
|
||||
fileId?: string;
|
||||
fileName?: string;
|
||||
contentType?: string;
|
||||
}
|
||||
|
||||
interface ChatState {
|
||||
messages: ChatMessage[];
|
||||
isOpen: boolean;
|
||||
isLoading: boolean;
|
||||
progress: AiWorkflowProgress | null;
|
||||
}
|
||||
|
||||
type ChatAction =
|
||||
| { type: "ADD_MESSAGE"; message: ChatMessage }
|
||||
| { type: "SET_LOADING"; loading: boolean }
|
||||
| { type: "SET_PROGRESS"; progress: AiWorkflowProgress | null }
|
||||
| { type: "TOGGLE_OPEN" }
|
||||
| { type: "SET_OPEN"; open: boolean }
|
||||
| { type: "CLEAR" };
|
||||
|
||||
function chatReducer(state: ChatState, action: ChatAction): ChatState {
|
||||
switch (action.type) {
|
||||
case "ADD_MESSAGE":
|
||||
return { ...state, messages: [...state.messages, action.message] };
|
||||
case "SET_LOADING":
|
||||
return { ...state, isLoading: action.loading };
|
||||
case "SET_PROGRESS":
|
||||
return { ...state, progress: action.progress };
|
||||
case "TOGGLE_OPEN":
|
||||
return { ...state, isOpen: !state.isOpen };
|
||||
case "SET_OPEN":
|
||||
return { ...state, isOpen: action.open };
|
||||
case "CLEAR":
|
||||
return { ...state, messages: [], isLoading: false, progress: null };
|
||||
}
|
||||
}
|
||||
|
||||
type TranslateFn = ReturnType<typeof useTranslation>["t"];
|
||||
|
||||
function formatWorkflowResponse(
|
||||
data: AiWorkflowResponse,
|
||||
t: TranslateFn,
|
||||
): string {
|
||||
switch (data.outcome) {
|
||||
case "answer":
|
||||
case "completed":
|
||||
return data.answer ?? data.summary ?? t("chat.responses.done");
|
||||
case "need_clarification":
|
||||
return data.question ?? t("chat.responses.need_clarification");
|
||||
case "cannot_do":
|
||||
return data.reason ?? t("chat.responses.cannot_do");
|
||||
case "not_found":
|
||||
return data.reason ?? t("chat.responses.not_found");
|
||||
case "unsupported_capability":
|
||||
return (
|
||||
data.message ??
|
||||
t("chat.responses.unsupported_capability", {
|
||||
capability: data.capability ?? "unknown",
|
||||
})
|
||||
);
|
||||
case "cannot_continue":
|
||||
return data.reason ?? t("chat.responses.cannot_continue");
|
||||
case "plan":
|
||||
return data.rationale
|
||||
? `${data.rationale}\n\n${(data.steps ?? []).map((s, i) => `${i + 1}. ${JSON.stringify(s)}`).join("\n")}`
|
||||
: JSON.stringify(data.steps, null, 2);
|
||||
case "need_content":
|
||||
case "tool_call":
|
||||
return (
|
||||
data.rationale ??
|
||||
data.summary ??
|
||||
t("chat.responses.processing", { outcome: data.outcome })
|
||||
);
|
||||
default:
|
||||
return (
|
||||
data.answer ?? data.summary ?? data.message ?? JSON.stringify(data)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Parses an SSE text stream and invokes callbacks for each named event.
|
||||
*/
|
||||
interface ProgressEvent {
|
||||
phase: string;
|
||||
timestamp: number;
|
||||
tool?: string;
|
||||
stepIndex?: number;
|
||||
stepCount?: number;
|
||||
engineDetail?: AnyEngineProgressDetail;
|
||||
}
|
||||
|
||||
async function consumeSSEStream(
|
||||
response: Response,
|
||||
handlers: {
|
||||
onProgress: (data: ProgressEvent) => void;
|
||||
onResult: (data: AiWorkflowResponse) => void;
|
||||
onError: (data: { message: string }) => void;
|
||||
},
|
||||
) {
|
||||
if (!response.body) {
|
||||
throw new Error("Response body is null");
|
||||
}
|
||||
const reader = response.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let buffer = "";
|
||||
let currentEvent = "";
|
||||
|
||||
try {
|
||||
for (;;) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
buffer += decoder.decode(value, { stream: true });
|
||||
|
||||
// SSE frames are separated by double newlines
|
||||
let boundary = buffer.indexOf("\n\n");
|
||||
while (boundary !== -1) {
|
||||
const frame = buffer.slice(0, boundary);
|
||||
buffer = buffer.slice(boundary + 2);
|
||||
|
||||
let dataPayload = "";
|
||||
for (const line of frame.split("\n")) {
|
||||
if (line.startsWith("event:")) {
|
||||
currentEvent = line.slice(6).trim();
|
||||
} else if (line.startsWith("data:")) {
|
||||
dataPayload += line.slice(5);
|
||||
}
|
||||
}
|
||||
|
||||
if (dataPayload) {
|
||||
try {
|
||||
const parsed = JSON.parse(dataPayload);
|
||||
if (currentEvent === "progress") {
|
||||
handlers.onProgress(parsed);
|
||||
} else if (currentEvent === "result") {
|
||||
handlers.onResult(parsed);
|
||||
} else if (currentEvent === "error") {
|
||||
handlers.onError(parsed);
|
||||
}
|
||||
} catch {
|
||||
// Skip malformed JSON frames
|
||||
}
|
||||
}
|
||||
currentEvent = "";
|
||||
boundary = buffer.indexOf("\n\n");
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
reader.releaseLock();
|
||||
}
|
||||
}
|
||||
|
||||
interface ChatContextValue {
|
||||
messages: ChatMessage[];
|
||||
isOpen: boolean;
|
||||
isLoading: boolean;
|
||||
progress: AiWorkflowProgress | null;
|
||||
toggleOpen: () => void;
|
||||
setOpen: (open: boolean) => void;
|
||||
sendMessage: (content: string) => Promise<void>;
|
||||
/** Abort any in-flight request and reset the chat to an empty conversation. */
|
||||
clearChat: () => void;
|
||||
}
|
||||
|
||||
const ChatContext = createContext<ChatContextValue | null>(null);
|
||||
|
||||
const initialState: ChatState = {
|
||||
messages: [],
|
||||
isOpen: false,
|
||||
isLoading: false,
|
||||
progress: null,
|
||||
};
|
||||
|
||||
export function ChatProvider({ children }: { children: ReactNode }) {
|
||||
const { t } = useTranslation();
|
||||
const [state, dispatch] = useReducer(chatReducer, initialState);
|
||||
const { files: activeFiles, fileStubs: activeFileStubs } = useAllFiles();
|
||||
const { actions: fileActions } = useFileActions();
|
||||
const abortRef = useRef<AbortController | null>(null);
|
||||
const messagesRef = useRef<ChatMessage[]>(state.messages);
|
||||
messagesRef.current = state.messages;
|
||||
|
||||
// Download a File from the Stirling files endpoint.
|
||||
const downloadFile = useCallback(
|
||||
async (descriptor: AiWorkflowResultFile): Promise<File> => {
|
||||
const response = await apiClient.get<Blob>(
|
||||
`/api/v1/general/files/${descriptor.fileId}`,
|
||||
{ responseType: "blob" },
|
||||
);
|
||||
return new File([response.data], descriptor.fileName, {
|
||||
type: descriptor.contentType ?? response.data.type,
|
||||
});
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
// Import the files produced by an AI workflow result into FileContext.
|
||||
//
|
||||
// If the workflow produced the same number of outputs as inputs, map each output to its
|
||||
// corresponding input as a new version in the same chain. Otherwise (merge, split, etc.)
|
||||
// add the outputs as new root files.
|
||||
const importResultFile = useCallback(
|
||||
async (
|
||||
result: AiWorkflowResponse,
|
||||
sourceStubs: StirlingFileStub[],
|
||||
): Promise<void> => {
|
||||
const descriptors = result.resultFiles?.length
|
||||
? result.resultFiles
|
||||
: result.fileId && result.fileName && result.contentType
|
||||
? [
|
||||
{
|
||||
fileId: result.fileId,
|
||||
fileName: result.fileName,
|
||||
contentType: result.contentType,
|
||||
} satisfies AiWorkflowResultFile,
|
||||
]
|
||||
: [];
|
||||
if (descriptors.length === 0) return;
|
||||
|
||||
const files = await Promise.all(descriptors.map(downloadFile));
|
||||
|
||||
const operation: ToolOperation = {
|
||||
toolId: "ai-workflow",
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
const isVersionMapping =
|
||||
sourceStubs.length > 0 && files.length === sourceStubs.length;
|
||||
const stubs = files.map((file, i) =>
|
||||
isVersionMapping
|
||||
? createChildStub(sourceStubs[i], operation, file)
|
||||
: createNewStirlingFileStub(file),
|
||||
);
|
||||
const stirlingFiles = files.map((file, i) =>
|
||||
createStirlingFile(file, stubs[i].id),
|
||||
);
|
||||
|
||||
if (sourceStubs.length > 0) {
|
||||
// Always consume the inputs so merge/split inputs are removed from the workbench.
|
||||
// For 1:1 operations (rotate, compress) the outputs carry the version chain; for
|
||||
// merge/split they're fresh roots.
|
||||
await fileActions.consumeFiles(
|
||||
sourceStubs.map((s) => s.id),
|
||||
stirlingFiles,
|
||||
stubs,
|
||||
);
|
||||
} else {
|
||||
// No inputs were provided (unlikely for completed workflows, but handle it safely).
|
||||
await fileActions.addFiles(files, { selectFiles: true });
|
||||
}
|
||||
},
|
||||
[fileActions, downloadFile],
|
||||
);
|
||||
|
||||
const toggleOpen = useCallback(() => dispatch({ type: "TOGGLE_OPEN" }), []);
|
||||
const setOpen = useCallback(
|
||||
(open: boolean) => dispatch({ type: "SET_OPEN", open }),
|
||||
[],
|
||||
);
|
||||
const clearChat = useCallback(() => {
|
||||
abortRef.current?.abort();
|
||||
abortRef.current = null;
|
||||
dispatch({ type: "CLEAR" });
|
||||
}, []);
|
||||
|
||||
const sendMessage = useCallback(
|
||||
async (content: string) => {
|
||||
// Abort any in-flight request
|
||||
abortRef.current?.abort();
|
||||
const controller = new AbortController();
|
||||
abortRef.current = controller;
|
||||
|
||||
const priorMessages = messagesRef.current;
|
||||
|
||||
const userMessage: ChatMessage = {
|
||||
id: generateId(),
|
||||
role: "user",
|
||||
content,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
dispatch({ type: "ADD_MESSAGE", message: userMessage });
|
||||
dispatch({ type: "SET_LOADING", loading: true });
|
||||
dispatch({ type: "SET_PROGRESS", progress: null });
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append("userMessage", content);
|
||||
activeFiles.forEach((file, i) => {
|
||||
formData.append(`fileInputs[${i}].fileInput`, file);
|
||||
});
|
||||
priorMessages.forEach((message, i) => {
|
||||
formData.append(`conversationHistory[${i}].role`, message.role);
|
||||
formData.append(`conversationHistory[${i}].content`, message.content);
|
||||
});
|
||||
|
||||
const response = await fetch("/api/v1/ai/orchestrate/stream", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
headers: getAuthHeaders(),
|
||||
credentials: "include",
|
||||
signal: controller.signal,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
let detail: string | undefined;
|
||||
try {
|
||||
const body = await response.json();
|
||||
detail =
|
||||
body?.message ??
|
||||
body?.detail ??
|
||||
body?.error ??
|
||||
(Array.isArray(body?.errors)
|
||||
? body.errors[0]?.message
|
||||
: undefined);
|
||||
} catch {
|
||||
// non-JSON body — ignore
|
||||
}
|
||||
throw new Error(
|
||||
detail ?? `AI engine request failed: ${response.status}`,
|
||||
);
|
||||
}
|
||||
|
||||
let receivedResult = false;
|
||||
const toolsUsed: string[] = [];
|
||||
|
||||
await consumeSSEStream(response, {
|
||||
onProgress: (data) => {
|
||||
if (
|
||||
data.phase === AiWorkflowPhase.EXECUTING_TOOL &&
|
||||
typeof data.tool === "string"
|
||||
) {
|
||||
toolsUsed.push(data.tool);
|
||||
}
|
||||
dispatch({
|
||||
type: "SET_PROGRESS",
|
||||
progress: {
|
||||
phase: data.phase as AiWorkflowPhase,
|
||||
tool: data.tool,
|
||||
stepIndex: data.stepIndex,
|
||||
stepCount: data.stepCount,
|
||||
engineDetail: data.engineDetail,
|
||||
},
|
||||
});
|
||||
},
|
||||
onResult: (data) => {
|
||||
receivedResult = true;
|
||||
dispatch({ type: "SET_PROGRESS", progress: null });
|
||||
const replyContent = formatWorkflowResponse(data, t);
|
||||
dispatch({
|
||||
type: "ADD_MESSAGE",
|
||||
message: {
|
||||
id: generateId(),
|
||||
role: "assistant",
|
||||
content: replyContent,
|
||||
timestamp: Date.now(),
|
||||
toolsUsed: toolsUsed.length > 0 ? toolsUsed : undefined,
|
||||
},
|
||||
});
|
||||
if (data.fileId || data.resultFiles?.length) {
|
||||
importResultFile(data, activeFileStubs).catch((err) => {
|
||||
console.error("Failed to import AI result file", err);
|
||||
dispatch({
|
||||
type: "ADD_MESSAGE",
|
||||
message: {
|
||||
id: generateId(),
|
||||
role: "assistant",
|
||||
content:
|
||||
"The file was processed but I couldn't download it.",
|
||||
timestamp: Date.now(),
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
onError: (data) => {
|
||||
receivedResult = true;
|
||||
dispatch({ type: "SET_PROGRESS", progress: null });
|
||||
dispatch({
|
||||
type: "ADD_MESSAGE",
|
||||
message: {
|
||||
id: generateId(),
|
||||
role: "assistant",
|
||||
content: data.message || "Something went wrong.",
|
||||
timestamp: Date.now(),
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
if (!receivedResult) {
|
||||
throw new Error("Stream ended without a result");
|
||||
}
|
||||
} catch (e) {
|
||||
if ((e as Error).name === "AbortError") return;
|
||||
const err = e as Error;
|
||||
const isEngineError =
|
||||
err.message.startsWith("AI engine request failed:") ||
|
||||
err.message === "Stream ended without a result";
|
||||
const content = isEngineError
|
||||
? "Failed to get a response. The AI engine may not be available yet."
|
||||
: (err.message ??
|
||||
"Failed to get a response. The AI engine may not be available yet.");
|
||||
dispatch({ type: "SET_PROGRESS", progress: null });
|
||||
dispatch({
|
||||
type: "ADD_MESSAGE",
|
||||
message: {
|
||||
id: generateId(),
|
||||
role: "assistant",
|
||||
content,
|
||||
timestamp: Date.now(),
|
||||
},
|
||||
});
|
||||
} finally {
|
||||
dispatch({ type: "SET_LOADING", loading: false });
|
||||
if (abortRef.current === controller) {
|
||||
abortRef.current = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
[activeFiles, activeFileStubs, importResultFile],
|
||||
);
|
||||
|
||||
return (
|
||||
<ChatContext.Provider
|
||||
value={{
|
||||
messages: state.messages,
|
||||
isOpen: state.isOpen,
|
||||
isLoading: state.isLoading,
|
||||
progress: state.progress,
|
||||
toggleOpen,
|
||||
setOpen,
|
||||
sendMessage,
|
||||
clearChat,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</ChatContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useChat(): ChatContextValue {
|
||||
const context = useContext(ChatContext);
|
||||
if (!context) {
|
||||
throw new Error("useChat must be used within a ChatProvider");
|
||||
}
|
||||
return context;
|
||||
}
|
||||
@@ -0,0 +1,309 @@
|
||||
.chat-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* Match the right-rail toolbar background so dark-mode doesn't show a
|
||||
lighter card behind the chat, and so the agent-card → pill morph
|
||||
doesn't flash a different colour mid-transition. */
|
||||
background: var(--bg-toolbar);
|
||||
}
|
||||
|
||||
.chat-panel--embedded {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Top header: agent pill + close. */
|
||||
.chat-panel__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 1rem 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-panel__agent-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0.4rem 0.75rem 0.4rem 0.4rem;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 9999px;
|
||||
background: var(--mantine-color-body);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 120ms ease-out,
|
||||
border-color 120ms ease-out;
|
||||
/* Pair with .agent-button to morph between the card and the pill. */
|
||||
view-transition-name: stirling-agent;
|
||||
}
|
||||
|
||||
/* Match the active-tool morph timing for a consistent rail feel. */
|
||||
::view-transition-group(stirling-agent),
|
||||
::view-transition-old(stirling-agent),
|
||||
::view-transition-new(stirling-agent) {
|
||||
animation-duration: 220ms;
|
||||
animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
|
||||
.chat-panel__agent-pill:hover {
|
||||
background: var(--mantine-color-default-hover);
|
||||
}
|
||||
|
||||
.chat-panel__agent-pill-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 9999px;
|
||||
background: var(--mantine-color-blue-light);
|
||||
color: var(--mantine-color-blue-filled);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Dark-mode: let the pill blend into the rail. Just a thin border, no fill —
|
||||
so it doesn't read as a clashing lighter card on the dark toolbar. */
|
||||
[data-mantine-color-scheme="dark"] .chat-panel__agent-pill {
|
||||
background: transparent;
|
||||
border-color: var(--border-subtle);
|
||||
}
|
||||
|
||||
[data-mantine-color-scheme="dark"] .chat-panel__agent-pill:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
[data-mantine-color-scheme="dark"] .chat-panel__agent-pill-icon {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--mantine-color-blue-filled) 18%,
|
||||
transparent
|
||||
);
|
||||
color: var(--mantine-color-blue-3, var(--mantine-color-blue-filled));
|
||||
}
|
||||
|
||||
/* Same treatment for the input pill and quick-action cards. */
|
||||
[data-mantine-color-scheme="dark"] .chat-panel-input {
|
||||
background: transparent;
|
||||
box-shadow:
|
||||
0 0 0 1px var(--border-subtle),
|
||||
0 6px 16px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
[data-mantine-color-scheme="dark"] .chat-panel-input:focus-within {
|
||||
box-shadow:
|
||||
0 0 0 1px color-mix(in srgb, var(--mantine-color-blue-3) 40%, transparent),
|
||||
0 8px 22px color-mix(in srgb, var(--mantine-color-blue-6) 18%, transparent);
|
||||
}
|
||||
|
||||
[data-mantine-color-scheme="dark"] .chat-quick-action {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
[data-mantine-color-scheme="dark"] .chat-quick-action:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-color: var(--border-subtle);
|
||||
}
|
||||
|
||||
.chat-panel__agent-pill-label {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.chat-panel-messages {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Quick action cards above the input. */
|
||||
.chat-panel__quick-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 0.75rem 0.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-panel__quick-actions-label {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
/* File pills shown above the quick actions when files are loaded. */
|
||||
.chat-file-pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chat-file-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
max-width: 11rem;
|
||||
padding: 0.2rem 0.35rem 0.2rem 0.45rem;
|
||||
border: 1px solid var(--mantine-color-blue-light);
|
||||
border-radius: 9999px;
|
||||
background: var(--mantine-color-blue-light);
|
||||
color: var(--mantine-color-blue-filled);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.chat-file-pill__icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-file-pill__label {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chat-file-pill__remove {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition:
|
||||
background 120ms ease-out,
|
||||
opacity 120ms ease-out;
|
||||
}
|
||||
|
||||
.chat-file-pill__remove:hover {
|
||||
background: var(--mantine-color-default-hover);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.chat-file-pill--more {
|
||||
background: transparent;
|
||||
border: 1px dashed var(--border-subtle);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 0.2rem 0.55rem;
|
||||
}
|
||||
|
||||
.chat-file-pill--more:hover {
|
||||
background: var(--mantine-color-default-hover);
|
||||
}
|
||||
|
||||
.chat-quick-action {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.6rem 0.75rem;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 0.65rem;
|
||||
background: var(--mantine-color-body);
|
||||
transition:
|
||||
background 120ms ease-out,
|
||||
border-color 120ms ease-out;
|
||||
}
|
||||
|
||||
.chat-quick-action:hover {
|
||||
background: var(--mantine-color-default-hover);
|
||||
border-color: var(--mantine-color-default-border);
|
||||
}
|
||||
|
||||
.chat-quick-action__icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.5rem;
|
||||
background: var(--mantine-color-blue-light);
|
||||
color: var(--mantine-color-blue-filled);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Input area: textarea on top row, action icons on bottom row. */
|
||||
.chat-panel-input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0.85rem 1rem 0.75rem;
|
||||
margin: 0.75rem 0.75rem 1rem;
|
||||
border: none;
|
||||
border-radius: 1.1rem;
|
||||
background: var(--mantine-color-body);
|
||||
flex-shrink: 0;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(0, 0, 0, 0.04),
|
||||
0 4px 14px rgba(15, 23, 42, 0.08);
|
||||
transition: box-shadow 160ms ease-out;
|
||||
}
|
||||
|
||||
.chat-panel-input:focus-within {
|
||||
box-shadow:
|
||||
0 0 0 1px color-mix(in srgb, var(--mantine-color-blue-6) 20%, transparent),
|
||||
0 6px 18px color-mix(in srgb, var(--mantine-color-blue-6) 12%, transparent);
|
||||
}
|
||||
|
||||
/* Kill the Mantine Textarea's own border/outline — the wrapper owns the chrome. */
|
||||
.chat-panel-input__field,
|
||||
.chat-panel-input__field:focus,
|
||||
.chat-panel-input__field:focus-visible {
|
||||
font-size: 0.95rem;
|
||||
padding: 0.15rem 0 !important;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.chat-panel-input__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Message layout */
|
||||
.chat-message {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.chat-message-user {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.chat-message-assistant {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* Bubble styling */
|
||||
.chat-bubble {
|
||||
max-width: 85%;
|
||||
}
|
||||
|
||||
.chat-bubble-user {
|
||||
background: var(--mantine-color-blue-filled) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.chat-bubble-user * {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.chat-bubble-assistant {
|
||||
background: var(--mantine-color-default-hover) !important;
|
||||
}
|
||||
@@ -0,0 +1,359 @@
|
||||
import {
|
||||
useMemo,
|
||||
useRef,
|
||||
useEffect,
|
||||
useState,
|
||||
type KeyboardEvent,
|
||||
} from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
ActionIcon,
|
||||
Box,
|
||||
Collapse,
|
||||
Group,
|
||||
List,
|
||||
Loader,
|
||||
Menu,
|
||||
Paper,
|
||||
ScrollArea,
|
||||
Stack,
|
||||
Text,
|
||||
Textarea,
|
||||
UnstyledButton,
|
||||
} from "@mantine/core";
|
||||
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import DeleteSweepIcon from "@mui/icons-material/DeleteSweep";
|
||||
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
||||
import {
|
||||
useChat,
|
||||
AiWorkflowPhase,
|
||||
isKnownEngineProgressDetail,
|
||||
type AiWorkflowProgress,
|
||||
type AnyEngineProgressDetail,
|
||||
} from "@app/components/chat/ChatContext";
|
||||
import { useTranslatedToolCatalog } from "@app/data/useTranslatedToolRegistry";
|
||||
import { StirlingLogoOutline } from "@app/components/agents/StirlingLogoOutline";
|
||||
import { ChatQuickActions } from "@app/components/chat/ChatQuickActions";
|
||||
import "@app/components/chat/ChatPanel.css";
|
||||
|
||||
type TranslateFn = (key: string, options?: Record<string, unknown>) => string;
|
||||
|
||||
/** Resolver mapping a tool endpoint path to its translated display name. */
|
||||
type ToolNameResolver = (endpoint: string) => string | null;
|
||||
|
||||
/**
|
||||
* Look up a tool's translated name from the tool catalog. The catalog's {@code operationConfig}
|
||||
* exposes the full API endpoint path for each tool, so we key the lookup on the exact path that
|
||||
* arrives in SSE progress events — no string parsing.
|
||||
*/
|
||||
function useToolNameResolver(): ToolNameResolver {
|
||||
const { allTools } = useTranslatedToolCatalog();
|
||||
return useMemo(() => {
|
||||
const nameByEndpoint = new Map<string, string>();
|
||||
Object.values(allTools).forEach((tool) => {
|
||||
const endpoint = tool.operationConfig?.endpoint;
|
||||
if (typeof endpoint === "string") {
|
||||
nameByEndpoint.set(endpoint, tool.name);
|
||||
}
|
||||
});
|
||||
return (endpoint: string) => nameByEndpoint.get(endpoint) ?? null;
|
||||
}, [allTools]);
|
||||
}
|
||||
|
||||
function formatProgress(
|
||||
progress: AiWorkflowProgress,
|
||||
t: TranslateFn,
|
||||
resolveToolName: ToolNameResolver,
|
||||
): string {
|
||||
if (progress.phase === AiWorkflowPhase.EXECUTING_TOOL && progress.tool) {
|
||||
const tool = resolveToolName(progress.tool);
|
||||
const hasSteps =
|
||||
progress.stepIndex != null &&
|
||||
progress.stepCount != null &&
|
||||
progress.stepCount > 1;
|
||||
if (tool) {
|
||||
return hasSteps
|
||||
? t("chat.progress.executing_tool_step", {
|
||||
tool,
|
||||
step: progress.stepIndex,
|
||||
total: progress.stepCount,
|
||||
})
|
||||
: t("chat.progress.executing_tool_single", { tool });
|
||||
}
|
||||
return hasSteps
|
||||
? t("chat.progress.executing_tool_generic_step", {
|
||||
step: progress.stepIndex,
|
||||
total: progress.stepCount,
|
||||
})
|
||||
: t("chat.progress.executing_tool_generic");
|
||||
}
|
||||
if (progress.phase === AiWorkflowPhase.ENGINE_PROGRESS) {
|
||||
return formatEngineProgress(progress.engineDetail, t);
|
||||
}
|
||||
return t(`chat.progress.${progress.phase}`);
|
||||
}
|
||||
|
||||
function formatEngineProgress(
|
||||
detail: AnyEngineProgressDetail | undefined,
|
||||
t: TranslateFn,
|
||||
): string {
|
||||
if (!detail || !isKnownEngineProgressDetail(detail)) {
|
||||
return t("chat.progress.processing");
|
||||
}
|
||||
switch (detail.phase) {
|
||||
case "whole_doc_read_started":
|
||||
return t("chat.progress.whole_doc_read_started");
|
||||
case "whole_doc_slice_done": {
|
||||
const percent =
|
||||
detail.total > 0
|
||||
? Math.round((detail.completed / detail.total) * 100)
|
||||
: 0;
|
||||
return t("chat.progress.whole_doc_slice_done", { percent });
|
||||
}
|
||||
case "whole_doc_compression_round":
|
||||
return t("chat.progress.whole_doc_compression_round");
|
||||
case "whole_doc_read_done":
|
||||
return t("chat.progress.whole_doc_read_done");
|
||||
}
|
||||
}
|
||||
|
||||
function ToolsUsedBlock({
|
||||
tools,
|
||||
resolveToolName,
|
||||
t,
|
||||
}: {
|
||||
tools: string[];
|
||||
resolveToolName: ToolNameResolver;
|
||||
t: TranslateFn;
|
||||
}) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const names = tools.map(
|
||||
(endpoint) => resolveToolName(endpoint) ?? t("chat.toolsUsed.unknownTool"),
|
||||
);
|
||||
const label = t("chat.toolsUsed.summary", { count: tools.length });
|
||||
return (
|
||||
<Box mt={6}>
|
||||
<UnstyledButton
|
||||
onClick={() => setExpanded((v) => !v)}
|
||||
aria-expanded={expanded}
|
||||
>
|
||||
<Group gap={4} wrap="nowrap">
|
||||
{expanded ? (
|
||||
<ExpandLessIcon sx={{ fontSize: 14 }} />
|
||||
) : (
|
||||
<ExpandMoreIcon sx={{ fontSize: 14 }} />
|
||||
)}
|
||||
<Text size="xs" c="dimmed">
|
||||
{label}
|
||||
</Text>
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
<Collapse in={expanded}>
|
||||
<List
|
||||
type="ordered"
|
||||
size="xs"
|
||||
mt={4}
|
||||
pl="lg"
|
||||
styles={{ itemWrapper: { lineHeight: 1.4 } }}
|
||||
>
|
||||
{names.map((name, i) => (
|
||||
<List.Item key={i}>{name}</List.Item>
|
||||
))}
|
||||
</List>
|
||||
</Collapse>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function ChatMessageBubble({
|
||||
role,
|
||||
content,
|
||||
toolsUsed,
|
||||
resolveToolName,
|
||||
t,
|
||||
}: {
|
||||
role: "user" | "assistant";
|
||||
content: string;
|
||||
toolsUsed?: string[];
|
||||
resolveToolName: ToolNameResolver;
|
||||
t: TranslateFn;
|
||||
}) {
|
||||
return (
|
||||
<div className={`chat-message chat-message-${role}`}>
|
||||
<Paper className={`chat-bubble chat-bubble-${role}`} p="xs" radius="md">
|
||||
<Text size="sm" style={{ whiteSpace: "pre-wrap" }}>
|
||||
{content}
|
||||
</Text>
|
||||
{toolsUsed && toolsUsed.length > 0 && (
|
||||
<ToolsUsedBlock
|
||||
tools={toolsUsed}
|
||||
resolveToolName={resolveToolName}
|
||||
t={t}
|
||||
/>
|
||||
)}
|
||||
</Paper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export interface ChatPanelProps {
|
||||
/** Called when the user closes the chat to return to the tool list. */
|
||||
onBack: () => void;
|
||||
/** Accessible label for the close button. */
|
||||
backLabel: string;
|
||||
}
|
||||
|
||||
export function ChatPanel({ onBack, backLabel }: ChatPanelProps) {
|
||||
const { t } = useTranslation();
|
||||
const { messages, isLoading, progress, sendMessage, clearChat } = useChat();
|
||||
const resolveToolName = useToolNameResolver();
|
||||
const [input, setInput] = useState("");
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (scrollRef.current) {
|
||||
scrollRef.current.scrollTo({
|
||||
top: scrollRef.current.scrollHeight,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
}, [messages]);
|
||||
|
||||
useEffect(() => {
|
||||
inputRef.current?.focus();
|
||||
}, []);
|
||||
|
||||
const handleSend = (override?: string) => {
|
||||
const text = (override ?? input).trim();
|
||||
if (!text || isLoading) return;
|
||||
setInput("");
|
||||
sendMessage(text);
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSend();
|
||||
}
|
||||
};
|
||||
|
||||
const showQuickActions = messages.length === 0 && !isLoading;
|
||||
|
||||
return (
|
||||
<Box className="chat-panel chat-panel--embedded">
|
||||
<div className="chat-panel__header">
|
||||
<Menu shadow="md" width={220} position="bottom-start" withinPortal>
|
||||
<Menu.Target>
|
||||
<button
|
||||
type="button"
|
||||
className="chat-panel__agent-pill"
|
||||
aria-label={t("chat.header.agentMenu", "Stirling agent options")}
|
||||
>
|
||||
<span className="chat-panel__agent-pill-icon">
|
||||
<StirlingLogoOutline size={16} />
|
||||
</span>
|
||||
<span className="chat-panel__agent-pill-label">
|
||||
{t("agents.stirling_name", "Stirling")}
|
||||
</span>
|
||||
<KeyboardArrowDownIcon
|
||||
sx={{ fontSize: 18, color: "var(--text-muted)" }}
|
||||
/>
|
||||
</button>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<Menu.Item
|
||||
leftSection={<DeleteSweepIcon sx={{ fontSize: 18 }} />}
|
||||
onClick={clearChat}
|
||||
disabled={messages.length === 0 && !isLoading}
|
||||
>
|
||||
{t("chat.header.clearChat", "Clear chat")}
|
||||
</Menu.Item>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
size="md"
|
||||
radius="xl"
|
||||
onClick={onBack}
|
||||
aria-label={backLabel}
|
||||
>
|
||||
<CloseIcon sx={{ fontSize: 18 }} />
|
||||
</ActionIcon>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="chat-panel-messages" viewportRef={scrollRef}>
|
||||
<Stack gap="sm" p="sm">
|
||||
{messages.map((msg) => (
|
||||
<ChatMessageBubble
|
||||
key={msg.id}
|
||||
role={msg.role}
|
||||
content={msg.content}
|
||||
toolsUsed={msg.toolsUsed}
|
||||
resolveToolName={resolveToolName}
|
||||
t={t}
|
||||
/>
|
||||
))}
|
||||
{isLoading && (
|
||||
<div className="chat-message chat-message-assistant">
|
||||
<Paper
|
||||
className="chat-bubble chat-bubble-assistant"
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<Loader size="xs" type="dots" />
|
||||
<Text size="sm" c="dimmed">
|
||||
{progress
|
||||
? formatProgress(progress, t, resolveToolName)
|
||||
: t("chat.progress.thinking")}
|
||||
</Text>
|
||||
</Group>
|
||||
</Paper>
|
||||
</div>
|
||||
)}
|
||||
</Stack>
|
||||
</ScrollArea>
|
||||
|
||||
{showQuickActions && (
|
||||
<ChatQuickActions
|
||||
heading={t("chat.quickActions.heading", "Get started")}
|
||||
onAction={(text) => handleSend(text)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="chat-panel-input">
|
||||
<Textarea
|
||||
ref={inputRef}
|
||||
placeholder={t("chat.input.placeholder", "What do you want to do?")}
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.currentTarget.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
disabled={isLoading}
|
||||
autosize
|
||||
minRows={1}
|
||||
maxRows={4}
|
||||
variant="unstyled"
|
||||
classNames={{ input: "chat-panel-input__field" }}
|
||||
/>
|
||||
<div className="chat-panel-input__actions">
|
||||
<ActionIcon
|
||||
variant="filled"
|
||||
color="blue"
|
||||
radius="xl"
|
||||
size="md"
|
||||
onClick={() => handleSend()}
|
||||
disabled={!input.trim() || isLoading}
|
||||
aria-label={t("chat.input.send", "Send message")}
|
||||
>
|
||||
<ArrowUpwardIcon sx={{ fontSize: 16 }} />
|
||||
</ActionIcon>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,303 @@
|
||||
import { useMemo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Box, Group, Stack, Text, UnstyledButton } from "@mantine/core";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import CompressIcon from "@mui/icons-material/Compress";
|
||||
import ContentCutIcon from "@mui/icons-material/ContentCut";
|
||||
import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFileOutlined";
|
||||
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
||||
import LayersIcon from "@mui/icons-material/Layers";
|
||||
import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
|
||||
import RotateRightIcon from "@mui/icons-material/RotateRight";
|
||||
import UploadFileIcon from "@mui/icons-material/UploadFile";
|
||||
import { useAllFiles, useFileActions } from "@app/contexts/FileContext";
|
||||
import { useFilesModalContext } from "@app/contexts/FilesModalContext";
|
||||
import { detectFileExtension, isPdfFile } from "@app/utils/fileUtils";
|
||||
import type { StirlingFileStub } from "@app/types/fileContext";
|
||||
|
||||
const MAX_FILE_PILLS = 3;
|
||||
|
||||
interface QuickAction {
|
||||
key: string;
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
function QuickActionCard({ action }: { action: QuickAction }) {
|
||||
return (
|
||||
<UnstyledButton
|
||||
className="chat-quick-action"
|
||||
onClick={action.onClick}
|
||||
aria-label={action.title}
|
||||
>
|
||||
<Group gap="sm" wrap="nowrap" align="center">
|
||||
<Box className="chat-quick-action__icon">{action.icon}</Box>
|
||||
<Box style={{ minWidth: 0, flex: 1 }}>
|
||||
<Text size="sm" fw={500}>
|
||||
{action.title}
|
||||
</Text>
|
||||
{action.subtitle && (
|
||||
<Text size="xs" c="dimmed" truncate>
|
||||
{action.subtitle}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
<KeyboardArrowDownIcon
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
transform: "rotate(-90deg)",
|
||||
color: "var(--text-muted)",
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
);
|
||||
}
|
||||
|
||||
function WorkbenchFilePills({
|
||||
stubs,
|
||||
onOpenFilesModal,
|
||||
onRemove,
|
||||
moreLabel,
|
||||
removeLabel,
|
||||
}: {
|
||||
stubs: StirlingFileStub[];
|
||||
onOpenFilesModal: () => void;
|
||||
onRemove: (id: StirlingFileStub["id"]) => void;
|
||||
moreLabel: (count: number) => string;
|
||||
removeLabel: (name: string) => string;
|
||||
}) {
|
||||
const visible = stubs.slice(0, MAX_FILE_PILLS);
|
||||
const overflow = Math.max(0, stubs.length - visible.length);
|
||||
return (
|
||||
<div className="chat-file-pills">
|
||||
{visible.map((stub) => (
|
||||
<span key={stub.id} className="chat-file-pill">
|
||||
<InsertDriveFileIcon
|
||||
className="chat-file-pill__icon"
|
||||
sx={{ fontSize: 14 }}
|
||||
/>
|
||||
<span className="chat-file-pill__label" title={stub.name}>
|
||||
{stub.name}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="chat-file-pill__remove"
|
||||
onClick={() => onRemove(stub.id)}
|
||||
aria-label={removeLabel(stub.name)}
|
||||
>
|
||||
<CloseIcon sx={{ fontSize: 12 }} />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
{overflow > 0 && (
|
||||
<UnstyledButton
|
||||
className="chat-file-pill chat-file-pill--more"
|
||||
onClick={onOpenFilesModal}
|
||||
>
|
||||
{moreLabel(overflow)}
|
||||
</UnstyledButton>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface WorkbenchSummary {
|
||||
fileCount: number;
|
||||
pdfCount: number;
|
||||
nonPdfCount: number;
|
||||
hasNonPdf: boolean;
|
||||
singleFilePageCount: number | null;
|
||||
typeBreakdown: { label: string; count: number }[];
|
||||
}
|
||||
|
||||
function summariseWorkbench(stubs: StirlingFileStub[]): WorkbenchSummary {
|
||||
const counts = new Map<string, number>();
|
||||
let pdfCount = 0;
|
||||
let nonPdfCount = 0;
|
||||
|
||||
for (const stub of stubs) {
|
||||
const ext = detectFileExtension(stub.name ?? "");
|
||||
const isPdf = isPdfFile({ name: stub.name, type: stub.type });
|
||||
if (isPdf) pdfCount += 1;
|
||||
else nonPdfCount += 1;
|
||||
const label = ext ? ext.toUpperCase() : "FILE";
|
||||
counts.set(label, (counts.get(label) ?? 0) + 1);
|
||||
}
|
||||
|
||||
const typeBreakdown = Array.from(counts.entries())
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.map(([label, count]) => ({ label, count }));
|
||||
|
||||
return {
|
||||
fileCount: stubs.length,
|
||||
pdfCount,
|
||||
nonPdfCount,
|
||||
hasNonPdf: nonPdfCount > 0,
|
||||
singleFilePageCount:
|
||||
stubs.length === 1 ? (stubs[0].processedFile?.totalPages ?? null) : null,
|
||||
typeBreakdown,
|
||||
};
|
||||
}
|
||||
|
||||
export interface ChatQuickActionsProps {
|
||||
/** Heading text shown above the actions. */
|
||||
heading: string;
|
||||
/** Invoked when the user selects an action — sends the given text as a chat message. */
|
||||
onAction: (text: string) => void;
|
||||
}
|
||||
|
||||
export function ChatQuickActions({ heading, onAction }: ChatQuickActionsProps) {
|
||||
const { t } = useTranslation();
|
||||
const { fileStubs } = useAllFiles();
|
||||
const { actions: fileActions } = useFileActions();
|
||||
const { openFilesModal } = useFilesModalContext();
|
||||
|
||||
const summary = useMemo(() => summariseWorkbench(fileStubs), [fileStubs]);
|
||||
|
||||
const actions = useMemo<QuickAction[]>(() => {
|
||||
const send = (text: string) => () => onAction(text);
|
||||
|
||||
if (summary.fileCount === 0) {
|
||||
return [
|
||||
{
|
||||
key: "open-from-computer",
|
||||
icon: <UploadFileIcon sx={{ fontSize: 18 }} />,
|
||||
title: t("chat.quickActions.openFromComputer", "Open from computer"),
|
||||
subtitle: t("chat.quickActions.browseYourFiles", "Browse your files"),
|
||||
onClick: () => openFilesModal(),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
if (summary.fileCount === 1) {
|
||||
// Non-PDF: only suggest converting to PDF.
|
||||
if (summary.hasNonPdf) {
|
||||
const text = t(
|
||||
"chat.quickActions.convertOne",
|
||||
"Convert this document to PDF",
|
||||
);
|
||||
return [
|
||||
{
|
||||
key: "convert",
|
||||
icon: <PictureAsPdfIcon sx={{ fontSize: 18 }} />,
|
||||
title: text,
|
||||
onClick: send(text),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const result: QuickAction[] = [];
|
||||
const hasMultiplePages =
|
||||
summary.singleFilePageCount != null && summary.singleFilePageCount > 1;
|
||||
if (hasMultiplePages) {
|
||||
const text = t("chat.quickActions.splitOne", "Split this document");
|
||||
result.push({
|
||||
key: "split",
|
||||
icon: <ContentCutIcon sx={{ fontSize: 18 }} />,
|
||||
title: text,
|
||||
onClick: send(text),
|
||||
});
|
||||
}
|
||||
const compressText = t(
|
||||
"chat.quickActions.compressOne",
|
||||
"Compress this document",
|
||||
);
|
||||
const rotateText = t(
|
||||
"chat.quickActions.rotateOne",
|
||||
"Rotate this document",
|
||||
);
|
||||
result.push({
|
||||
key: "compress",
|
||||
icon: <CompressIcon sx={{ fontSize: 18 }} />,
|
||||
title: compressText,
|
||||
onClick: send(compressText),
|
||||
});
|
||||
result.push({
|
||||
key: "rotate",
|
||||
icon: <RotateRightIcon sx={{ fontSize: 18 }} />,
|
||||
title: rotateText,
|
||||
onClick: send(rotateText),
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
// Multiple files.
|
||||
const result: QuickAction[] = [];
|
||||
if (summary.hasNonPdf) {
|
||||
const text = t(
|
||||
"chat.quickActions.convertMany",
|
||||
"Convert these documents to PDF",
|
||||
);
|
||||
result.push({
|
||||
key: "convert",
|
||||
icon: <PictureAsPdfIcon sx={{ fontSize: 18 }} />,
|
||||
title: text,
|
||||
onClick: send(text),
|
||||
});
|
||||
}
|
||||
const mergeText = t("chat.quickActions.mergeMany", {
|
||||
count: summary.fileCount,
|
||||
defaultValue: "Merge these {{count}} documents into 1",
|
||||
});
|
||||
const compressText = t(
|
||||
"chat.quickActions.compressMany",
|
||||
"Compress these documents",
|
||||
);
|
||||
const rotateText = t(
|
||||
"chat.quickActions.rotateMany",
|
||||
"Rotate these documents",
|
||||
);
|
||||
result.push({
|
||||
key: "merge",
|
||||
icon: <LayersIcon sx={{ fontSize: 18 }} />,
|
||||
title: mergeText,
|
||||
onClick: send(mergeText),
|
||||
});
|
||||
result.push({
|
||||
key: "compress",
|
||||
icon: <CompressIcon sx={{ fontSize: 18 }} />,
|
||||
title: compressText,
|
||||
onClick: send(compressText),
|
||||
});
|
||||
result.push({
|
||||
key: "rotate",
|
||||
icon: <RotateRightIcon sx={{ fontSize: 18 }} />,
|
||||
title: rotateText,
|
||||
onClick: send(rotateText),
|
||||
});
|
||||
return result;
|
||||
}, [summary, t, onAction, openFilesModal]);
|
||||
|
||||
return (
|
||||
<div className="chat-panel__quick-actions">
|
||||
{summary.fileCount > 0 && (
|
||||
<WorkbenchFilePills
|
||||
stubs={fileStubs}
|
||||
onOpenFilesModal={() => openFilesModal()}
|
||||
onRemove={(id) => fileActions.removeFiles([id])}
|
||||
moreLabel={(count) =>
|
||||
t("chat.quickActions.moreFiles", {
|
||||
count,
|
||||
defaultValue: "+{{count}} more",
|
||||
})
|
||||
}
|
||||
removeLabel={(name) =>
|
||||
t("chat.quickActions.removeFile", {
|
||||
name,
|
||||
defaultValue: "Remove {{name}}",
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<Text className="chat-panel__quick-actions-label">{heading}</Text>
|
||||
<Stack gap="xs">
|
||||
{actions.map((action) => (
|
||||
<QuickActionCard key={action.key} action={action} />
|
||||
))}
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user