;
+ setAnswers(parsed);
+ } else {
+ setAnswers({});
+ }
+ setIsSubmitted(false);
+ } catch {
+ setAnswers({});
+ setIsSubmitted(false);
+ }
+ lastSessionIdRef.current = sessionId;
+ }, [sessionId]);
+
+ useEffect(() => {
+ if (lastSessionIdRef.current !== sessionId) {
+ return;
+ }
+ const storageKey = getStorageKey(sessionId);
+ if (!storageKey) return;
+
+ const hasAnswers = Object.values(answers).some((v) => v.trim());
+ try {
+ if (hasAnswers) {
+ localStorage.setItem(storageKey, JSON.stringify(answers));
+ } else {
+ localStorage.removeItem(storageKey);
+ }
+ } catch {}
+ }, [answers, sessionId]);
function handleAnswerChange(keyword: string, value: string) {
setAnswers((prev) => ({ ...prev, [keyword]: value }));
}
function handleSubmit() {
- // Check if all questions are answered
const allAnswered = questions.every((q) => answers[q.keyword]?.trim());
if (!allAnswered) {
return;
}
+ setIsSubmitted(true);
onSubmitAnswers(answers);
+
+ const storageKey = getStorageKey(sessionId);
+ try {
+ if (storageKey) {
+ localStorage.removeItem(storageKey);
+ }
+ } catch {}
}
const allAnswered = questions.every((q) => answers[q.keyword]?.trim());
+ if (isAnswered || isSubmitted) {
+ return (
+
+
+
+
+
+
+ Answers submitted
+
+
+ Processing your responses...
+
+
+
+
+
);
}
+
+function getStorageKey(sessionId?: string): string | null {
+ if (!sessionId) return null;
+ return `clarification_answers_${sessionId}`;
+}
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/helpers.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/helpers.tsx
new file mode 100644
index 0000000000..bd47eac051
--- /dev/null
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/helpers.tsx
@@ -0,0 +1,186 @@
+import type { AgentPreviewResponse } from "@/app/api/__generated__/models/agentPreviewResponse";
+import type { AgentSavedResponse } from "@/app/api/__generated__/models/agentSavedResponse";
+import type { ClarificationNeededResponse } from "@/app/api/__generated__/models/clarificationNeededResponse";
+import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
+import type { OperationInProgressResponse } from "@/app/api/__generated__/models/operationInProgressResponse";
+import type { OperationPendingResponse } from "@/app/api/__generated__/models/operationPendingResponse";
+import type { OperationStartedResponse } from "@/app/api/__generated__/models/operationStartedResponse";
+import { ResponseType } from "@/app/api/__generated__/models/responseType";
+import {
+ PlusCircleIcon,
+ PlusIcon,
+ WarningDiamondIcon,
+} from "@phosphor-icons/react";
+import type { ToolUIPart } from "ai";
+import { OrbitLoader } from "../../components/OrbitLoader/OrbitLoader";
+
+export type CreateAgentToolOutput =
+ | OperationStartedResponse
+ | OperationPendingResponse
+ | OperationInProgressResponse
+ | AgentPreviewResponse
+ | AgentSavedResponse
+ | ClarificationNeededResponse
+ | ErrorResponse;
+
+function parseOutput(output: unknown): CreateAgentToolOutput | null {
+ if (!output) return null;
+ if (typeof output === "string") {
+ const trimmed = output.trim();
+ if (!trimmed) return null;
+ try {
+ return parseOutput(JSON.parse(trimmed) as unknown);
+ } catch {
+ return null;
+ }
+ }
+ if (typeof output === "object") {
+ const type = (output as { type?: unknown }).type;
+ if (
+ type === ResponseType.operation_started ||
+ type === ResponseType.operation_pending ||
+ type === ResponseType.operation_in_progress ||
+ type === ResponseType.agent_preview ||
+ type === ResponseType.agent_saved ||
+ type === ResponseType.clarification_needed ||
+ type === ResponseType.error
+ ) {
+ return output as CreateAgentToolOutput;
+ }
+ if ("operation_id" in output && "tool_name" in output)
+ return output as OperationStartedResponse | OperationPendingResponse;
+ if ("tool_call_id" in output) return output as OperationInProgressResponse;
+ if ("agent_json" in output && "agent_name" in output)
+ return output as AgentPreviewResponse;
+ if ("agent_id" in output && "library_agent_id" in output)
+ return output as AgentSavedResponse;
+ if ("questions" in output) return output as ClarificationNeededResponse;
+ if ("error" in output || "details" in output)
+ return output as ErrorResponse;
+ }
+ return null;
+}
+
+export function getCreateAgentToolOutput(
+ part: unknown,
+): CreateAgentToolOutput | null {
+ if (!part || typeof part !== "object") return null;
+ return parseOutput((part as { output?: unknown }).output);
+}
+
+export function isOperationStartedOutput(
+ output: CreateAgentToolOutput,
+): output is OperationStartedResponse {
+ return (
+ output.type === ResponseType.operation_started ||
+ ("operation_id" in output && "tool_name" in output)
+ );
+}
+
+export function isOperationPendingOutput(
+ output: CreateAgentToolOutput,
+): output is OperationPendingResponse {
+ return output.type === ResponseType.operation_pending;
+}
+
+export function isOperationInProgressOutput(
+ output: CreateAgentToolOutput,
+): output is OperationInProgressResponse {
+ return (
+ output.type === ResponseType.operation_in_progress ||
+ "tool_call_id" in output
+ );
+}
+
+export function isAgentPreviewOutput(
+ output: CreateAgentToolOutput,
+): output is AgentPreviewResponse {
+ return output.type === ResponseType.agent_preview || "agent_json" in output;
+}
+
+export function isAgentSavedOutput(
+ output: CreateAgentToolOutput,
+): output is AgentSavedResponse {
+ return (
+ output.type === ResponseType.agent_saved || "agent_page_link" in output
+ );
+}
+
+export function isClarificationNeededOutput(
+ output: CreateAgentToolOutput,
+): output is ClarificationNeededResponse {
+ return (
+ output.type === ResponseType.clarification_needed || "questions" in output
+ );
+}
+
+export function isErrorOutput(
+ output: CreateAgentToolOutput,
+): output is ErrorResponse {
+ return output.type === ResponseType.error || "error" in output;
+}
+
+export function getAnimationText(part: {
+ state: ToolUIPart["state"];
+ input?: unknown;
+ output?: unknown;
+}): string {
+ switch (part.state) {
+ case "input-streaming":
+ case "input-available":
+ return "Creating a new agent";
+ case "output-available": {
+ const output = parseOutput(part.output);
+ if (!output) return "Creating a new agent";
+ if (isOperationStartedOutput(output)) return "Agent creation started";
+ if (isOperationPendingOutput(output)) return "Agent creation in progress";
+ if (isOperationInProgressOutput(output))
+ return "Agent creation already in progress";
+ if (isAgentSavedOutput(output)) return `Saved "${output.agent_name}"`;
+ if (isAgentPreviewOutput(output)) return `Preview "${output.agent_name}"`;
+ if (isClarificationNeededOutput(output)) return "Needs clarification";
+ return "Error creating agent";
+ }
+ case "output-error":
+ return "Error creating agent";
+ default:
+ return "Creating a new agent";
+ }
+}
+
+export function ToolIcon({
+ isStreaming,
+ isError,
+}: {
+ isStreaming?: boolean;
+ isError?: boolean;
+}) {
+ if (isError) {
+ return (
+
+ );
+ }
+ if (isStreaming) {
+ return
;
+ }
+ return
;
+}
+
+export function AccordionIcon() {
+ return
;
+}
+
+export function formatMaybeJson(value: unknown): string {
+ if (typeof value === "string") return value;
+ try {
+ return JSON.stringify(value, null, 2);
+ } catch {
+ return String(value);
+ }
+}
+
+export function truncateText(text: string, maxChars: number): string {
+ const trimmed = text.trim();
+ if (trimmed.length <= maxChars) return trimmed;
+ return `${trimmed.slice(0, maxChars).trimEnd()}…`;
+}
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/EditAgent/EditAgent.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/EditAgent/EditAgent.tsx
new file mode 100644
index 0000000000..6766a5cb49
--- /dev/null
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/EditAgent/EditAgent.tsx
@@ -0,0 +1,231 @@
+"use client";
+
+import { WarningDiamondIcon } from "@phosphor-icons/react";
+import type { ToolUIPart } from "ai";
+import { useCopilotChatActions } from "../../components/CopilotChatActionsProvider/useCopilotChatActions";
+import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
+import { OrbitLoader } from "../../components/OrbitLoader/OrbitLoader";
+import { ProgressBar } from "../../components/ProgressBar/ProgressBar";
+import {
+ ContentCardDescription,
+ ContentCodeBlock,
+ ContentGrid,
+ ContentHint,
+ ContentLink,
+ ContentMessage,
+} from "../../components/ToolAccordion/AccordionContent";
+import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
+import { useAsymptoticProgress } from "../../hooks/useAsymptoticProgress";
+import {
+ ClarificationQuestionsCard,
+ ClarifyingQuestion,
+} from "../CreateAgent/components/ClarificationQuestionsCard";
+import {
+ AccordionIcon,
+ formatMaybeJson,
+ getAnimationText,
+ getEditAgentToolOutput,
+ isAgentPreviewOutput,
+ isAgentSavedOutput,
+ isClarificationNeededOutput,
+ isErrorOutput,
+ isOperationInProgressOutput,
+ isOperationPendingOutput,
+ isOperationStartedOutput,
+ ToolIcon,
+ truncateText,
+ type EditAgentToolOutput,
+} from "./helpers";
+
+export interface EditAgentToolPart {
+ type: string;
+ toolCallId: string;
+ state: ToolUIPart["state"];
+ input?: unknown;
+ output?: unknown;
+}
+
+interface Props {
+ part: EditAgentToolPart;
+}
+
+function getAccordionMeta(output: EditAgentToolOutput): {
+ icon: React.ReactNode;
+ title: string;
+ titleClassName?: string;
+ description?: string;
+} {
+ const icon =
;
+
+ if (isAgentSavedOutput(output)) {
+ return { icon, title: output.agent_name };
+ }
+ if (isAgentPreviewOutput(output)) {
+ return {
+ icon,
+ title: output.agent_name,
+ description: `${output.node_count} block${output.node_count === 1 ? "" : "s"}`,
+ };
+ }
+ if (isClarificationNeededOutput(output)) {
+ const questions = output.questions ?? [];
+ return {
+ icon,
+ title: "Needs clarification",
+ description: `${questions.length} question${questions.length === 1 ? "" : "s"}`,
+ };
+ }
+ if (
+ isOperationStartedOutput(output) ||
+ isOperationPendingOutput(output) ||
+ isOperationInProgressOutput(output)
+ ) {
+ return { icon:
, title: "Editing agent" };
+ }
+ return {
+ icon: (
+
+ ),
+ title: "Error",
+ titleClassName: "text-red-500",
+ };
+}
+
+export function EditAgentTool({ part }: Props) {
+ const text = getAnimationText(part);
+ const { onSend } = useCopilotChatActions();
+ const isStreaming =
+ part.state === "input-streaming" || part.state === "input-available";
+
+ const output = getEditAgentToolOutput(part);
+ const isError =
+ part.state === "output-error" || (!!output && isErrorOutput(output));
+ const isOperating =
+ !!output &&
+ (isOperationStartedOutput(output) ||
+ isOperationPendingOutput(output) ||
+ isOperationInProgressOutput(output));
+ const progress = useAsymptoticProgress(isOperating);
+ const hasExpandableContent =
+ part.state === "output-available" &&
+ !!output &&
+ (isOperationStartedOutput(output) ||
+ isOperationPendingOutput(output) ||
+ isOperationInProgressOutput(output) ||
+ isAgentPreviewOutput(output) ||
+ isAgentSavedOutput(output) ||
+ isClarificationNeededOutput(output) ||
+ isErrorOutput(output));
+
+ function handleClarificationAnswers(answers: Record
) {
+ const questions =
+ output && isClarificationNeededOutput(output)
+ ? (output.questions ?? [])
+ : [];
+
+ const contextMessage = questions
+ .map((q) => {
+ const answer = answers[q.keyword] || "";
+ return `> ${q.question}\n\n${answer}`;
+ })
+ .join("\n\n");
+
+ onSend(
+ `**Here are my answers:**\n\n${contextMessage}\n\nPlease proceed with editing the agent.`,
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ {hasExpandableContent && output && (
+
+ {isOperating && (
+
+
+
+ This could take a few minutes, grab a coffee ☕
+
+
+ )}
+
+ {isAgentSavedOutput(output) && (
+
+ {output.message}
+
+
+ Open in library
+
+
+ Open in builder
+
+
+
+ {truncateText(
+ formatMaybeJson({ agent_id: output.agent_id }),
+ 800,
+ )}
+
+
+ )}
+
+ {isAgentPreviewOutput(output) && (
+
+ {output.message}
+ {output.description?.trim() && (
+
+ {output.description}
+
+ )}
+
+ {truncateText(formatMaybeJson(output.agent_json), 1600)}
+
+
+ )}
+
+ {isClarificationNeededOutput(output) && (
+ {
+ const item: ClarifyingQuestion = {
+ question: q.question,
+ keyword: q.keyword,
+ };
+ const example =
+ typeof q.example === "string" && q.example.trim()
+ ? q.example.trim()
+ : null;
+ if (example) item.example = example;
+ return item;
+ })}
+ message={output.message}
+ onSubmitAnswers={handleClarificationAnswers}
+ />
+ )}
+
+ {isErrorOutput(output) && (
+
+ {output.message}
+ {output.error && (
+
+ {formatMaybeJson(output.error)}
+
+ )}
+ {output.details && (
+
+ {formatMaybeJson(output.details)}
+
+ )}
+
+ )}
+
+ )}
+
+
+
+
+
+
+ {hasAgents && agentsFoundOutput && (
+
}
+ title="Agent results"
+ description={accordionDescription}
+ >
+
+ {agentsFoundOutput.agents.map((agent) => {
+ const href = getAgentHref(agent);
+ const agentSource =
+ agent.source === "library"
+ ? "Library"
+ : agent.source === "marketplace"
+ ? "Marketplace"
+ : null;
+ return (
+
+ Open : null
+ }
+ >
+
+ {agent.name}
+ {agentSource && (
+ {agentSource}
+ )}
+
+
+ {agent.description}
+
+
+
+ );
+ })}
+
+
+ )}
+
+
+
+
+
+
+ {hasBlocks && parsed && (
+
}
+ title="Block results"
+ description={accordionDescription}
+ >
+
+ {parsed.blocks.map((block) => (
+
+ ))}
+
+
+ )}
+
+
+
+
+
+
+ {hasExpandableContent && output && (
+
+ {isRunAgentExecutionStartedOutput(output) && (
+
+ )}
+
+ {isRunAgentAgentDetailsOutput(output) && (
+
+ )}
+
+ {isRunAgentSetupRequirementsOutput(output) && (
+
+ )}
+
+ {isRunAgentNeedLoginOutput(output) && (
+ {output.message}
+ )}
+
+ {isRunAgentErrorOutput(output) && }
+
+ )}
+
+
+ Run this agent with example values or your own inputs.
+
+
+
+
+
+
+
+
+ {showInputForm && buildInputSchema(output.agent.inputs) && (
+
+
+
Enter your inputs
+
setInputValues(v.formData ?? {})}
+ uiSchema={{
+ "ui:submitButtonOptions": { norender: true },
+ }}
+ initialValues={inputValues}
+ formContext={{
+ showHandles: false,
+ size: "small",
+ }}
+ />
+
+
+
+
+
+
+
{output.message}
+
+ {credentialFields.length > 0 && (
+
+
+ {isAllComplete && !hasSent && (
+
+ )}
+
+ )}
+
+ {expectedInputs.length > 0 && (
+
+
+ Expected inputs
+
+
+ {expectedInputs.map((input) => (
+
+
+
+ {input.title}
+
+
+ {input.required ? "Required" : "Optional"}
+
+
+
+ {input.name} • {input.type}
+ {input.description ? ` \u2022 ${input.description}` : ""}
+
+
+ ))}
+
+
+ )}
+
+
+
+
+
+
+ {hasExpandableContent && output && (
+
+ {isRunBlockBlockOutput(output) && }
+
+ {isRunBlockSetupRequirementsOutput(output) && (
+
+ )}
+
+ {isRunBlockErrorOutput(output) && }
+
+ )}
+
+ {outputKey}
+
+ {items.length} item{items.length === 1 ? "" : "s"}
+
+
+
+ {visibleItems.map((item, i) => (
+
+ ))}
+
+ {hasMoreItems && (
+
+ )}
+
+ );
+}
+
+export function BlockOutputCard({ output }: Props) {
+ return (
+
+ {output.message}
+
+ {Object.entries(output.outputs ?? {}).map(([key, items]) => (
+
+ ))}
+
+ );
+}
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/ErrorCard/ErrorCard.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/ErrorCard/ErrorCard.tsx
new file mode 100644
index 0000000000..7990428947
--- /dev/null
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/ErrorCard/ErrorCard.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
+import {
+ ContentCodeBlock,
+ ContentGrid,
+ ContentMessage,
+} from "../../../../components/ToolAccordion/AccordionContent";
+import { formatMaybeJson } from "../../helpers";
+
+interface Props {
+ output: ErrorResponse;
+}
+
+export function ErrorCard({ output }: Props) {
+ return (
+
+ {output.message}
+ {output.error && (
+ {formatMaybeJson(output.error)}
+ )}
+ {output.details && (
+ {formatMaybeJson(output.details)}
+ )}
+
+ );
+}
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/SetupRequirementsCard/SetupRequirementsCard.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/SetupRequirementsCard/SetupRequirementsCard.tsx
new file mode 100644
index 0000000000..e98fea2850
--- /dev/null
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/SetupRequirementsCard/SetupRequirementsCard.tsx
@@ -0,0 +1,197 @@
+"use client";
+
+import type { SetupRequirementsResponse } from "@/app/api/__generated__/models/setupRequirementsResponse";
+import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
+import { CredentialsGroupedView } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView";
+import { FormRenderer } from "@/components/renderers/InputRenderer/FormRenderer";
+import type { CredentialsMetaInput } from "@/lib/autogpt-server-api/types";
+import { AnimatePresence, motion } from "framer-motion";
+import { useState } from "react";
+import { useCopilotChatActions } from "../../../../components/CopilotChatActionsProvider/useCopilotChatActions";
+import {
+ ContentBadge,
+ ContentCardDescription,
+ ContentCardTitle,
+ ContentMessage,
+} from "../../../../components/ToolAccordion/AccordionContent";
+import {
+ buildExpectedInputsSchema,
+ coerceCredentialFields,
+ coerceExpectedInputs,
+} from "./helpers";
+
+interface Props {
+ output: SetupRequirementsResponse;
+}
+
+export function SetupRequirementsCard({ output }: Props) {
+ const { onSend } = useCopilotChatActions();
+
+ const [inputCredentials, setInputCredentials] = useState<
+ Record
+ >({});
+ const [hasSentCredentials, setHasSentCredentials] = useState(false);
+
+ const [showInputForm, setShowInputForm] = useState(false);
+ const [inputValues, setInputValues] = useState>({});
+
+ const { credentialFields, requiredCredentials } = coerceCredentialFields(
+ output.setup_info.user_readiness?.missing_credentials,
+ );
+
+ const expectedInputs = coerceExpectedInputs(
+ (output.setup_info.requirements as Record)?.inputs,
+ );
+
+ const inputSchema = buildExpectedInputsSchema(expectedInputs);
+
+ function handleCredentialChange(key: string, value?: CredentialsMetaInput) {
+ setInputCredentials((prev) => ({ ...prev, [key]: value }));
+ }
+
+ const isAllCredentialsComplete =
+ credentialFields.length > 0 &&
+ [...requiredCredentials].every((key) => !!inputCredentials[key]);
+
+ function handleProceedCredentials() {
+ setHasSentCredentials(true);
+ onSend(
+ "I've configured the required credentials. Please re-run the block now.",
+ );
+ }
+
+ function handleRunWithInputs() {
+ const nonEmpty = Object.fromEntries(
+ Object.entries(inputValues).filter(
+ ([, v]) => v !== undefined && v !== null && v !== "",
+ ),
+ );
+ onSend(
+ `Run the block with these inputs: ${JSON.stringify(nonEmpty, null, 2)}`,
+ );
+ setShowInputForm(false);
+ setInputValues({});
+ }
+
+ return (
+
+
{output.message}
+
+ {credentialFields.length > 0 && (
+
+
+ {isAllCredentialsComplete && !hasSentCredentials && (
+
+ )}
+
+ )}
+
+ {inputSchema && (
+
+
+
+ )}
+
+
+ {showInputForm && inputSchema && (
+
+
+
Block inputs
+
setInputValues(v.formData ?? {})}
+ uiSchema={{
+ "ui:submitButtonOptions": { norender: true },
+ }}
+ initialValues={inputValues}
+ formContext={{
+ showHandles: false,
+ size: "small",
+ }}
+ />
+
+
+
+
+
+
+ {expectedInputs.length > 0 && !inputSchema && (
+
+
+ Expected inputs
+
+
+ {expectedInputs.map((input) => (
+
+
+
+ {input.title}
+
+
+ {input.required ? "Required" : "Optional"}
+
+
+
+ {input.name} • {input.type}
+ {input.description ? ` \u2022 ${input.description}` : ""}
+
+
+ ))}
+
+
+ )}
+
+
+
+
+
+
+ {hasExpandableContent && normalized && (
+
}
+ title={normalized.title}
+ description={accordionDescription}
+ >
+ {docSearchOutput && (
+
+ {docSearchOutput.results.map((r) => {
+ const href = r.doc_url ?? toDocsUrl(r.path);
+ return (
+
+ Open}
+ >
+ {r.title}
+
+ {r.path}
+ {r.section ? ` • ${r.section}` : ""}
+
+
+ {truncate(r.snippet, 240)}
+
+
+
+ );
+ })}
+
+ )}
+
+ {docPageOutput && (
+
+
+ Open
+
+ }
+ >
+ {docPageOutput.title}
+ {docPageOutput.path}
+
+
+ {truncate(docPageOutput.content, 800)}
+
+
+ )}
+
+ {noResultsOutput && (
+
+ {noResultsOutput.message}
+ {noResultsOutput.suggestions &&
+ noResultsOutput.suggestions.length > 0 && (
+
+ )}
+
+ )}
+
+ {errorOutput && (
+
+ {errorOutput.message}
+ {errorOutput.error && (
+
+ {errorOutput.error}
+
+ )}
+
+ )}
+
+ )}
+
+
+
+
+
+
+ {hasExpandableContent && output && (
+
+ {isAgentOutputResponse(output) && (
+
+
+ Open
+
+ ) : null
+ }
+ >
+ {output.message}
+
+
+ {output.execution ? (
+
+
+
+ Execution
+
+
+ {output.execution.execution_id}
+
+
+ Status: {output.execution.status}
+
+
+
+ {output.execution.inputs_summary && (
+
+
+ Inputs summary
+
+
+
+
+
+ )}
+
+ {Object.entries(output.execution.outputs ?? {}).map(
+ ([key, items]) => (
+
+
+
+ {key}
+
+
+ {items.length} item
+ {items.length === 1 ? "" : "s"}
+
+
+
+ {items.slice(0, 3).map((item, i) => (
+
+ ))}
+
+
+ ),
+ )}
+
+ ) : (
+
+ No execution selected.
+
+ Try asking for a specific run or execution_id.
+
+
+ )}
+
+ )}
+
+ {isNoResultsResponse(output) && (
+
+ {output.message}
+ {output.suggestions && output.suggestions.length > 0 && (
+
+ )}
+
+ )}
+
+ {isErrorResponse(output) && (
+
+ {output.message}
+ {output.error && (
+
+ {formatMaybeJson(output.error)}
+
+ )}
+ {output.details && (
+
+ {formatMaybeJson(output.details)}
+
+ )}
+
+ )}
+
+ )}
+
- Started {moment(run.started_at).fromNow()}
+ Started{" "}
+ {run.started_at
+ ? formatDistanceToNow(run.started_at, { addSuffix: true })
+ : "—"}
|
@@ -62,7 +65,7 @@ export function RunDetailHeader({ agent, run, scheduleRecurrence }: Props) {
|
Duration:{" "}
- {moment.duration(run.stats.duration, "seconds").humanize()}
+ {formatDistanceStrict(0, run.stats.duration * 1000)}
)}
diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/ScheduleListItem.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/ScheduleListItem.tsx
index a389fb4fc8..1ad40fcef4 100644
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/ScheduleListItem.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/ScheduleListItem.tsx
@@ -3,7 +3,7 @@
import { GraphExecutionJobInfo } from "@/app/api/__generated__/models/graphExecutionJobInfo";
import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
import { ClockClockwiseIcon } from "@phosphor-icons/react";
-import moment from "moment";
+import { formatDistanceToNow } from "date-fns";
import { IconWrapper } from "./IconWrapper";
import { ScheduleActionsDropdown } from "./ScheduleActionsDropdown";
import { SidebarItemCard } from "./SidebarItemCard";
@@ -26,7 +26,9 @@ export function ScheduleListItem({
return (
}
title={template.name}
- description={moment(template.updated_at).fromNow()}
+ description={formatDistanceToNow(template.updated_at, {
+ addSuffix: true,
+ })}
onClick={onClick}
selected={selected}
actions={
diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/TriggerListItem.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/TriggerListItem.tsx
index 4c399e640a..c7b0473a9b 100644
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/TriggerListItem.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/TriggerListItem.tsx
@@ -3,7 +3,7 @@
import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
import { LibraryAgentPreset } from "@/app/api/__generated__/models/libraryAgentPreset";
import { LightningIcon } from "@phosphor-icons/react";
-import moment from "moment";
+import { formatDistanceToNow } from "date-fns";
import { IconWrapper } from "./IconWrapper";
import { SidebarItemCard } from "./SidebarItemCard";
import { TriggerActionsDropdown } from "./TriggerActionsDropdown";
@@ -31,7 +31,7 @@ export function TriggerListItem({
}
title={trigger.name}
- description={moment(trigger.updated_at).fromNow()}
+ description={formatDistanceToNow(trigger.updated_at, { addSuffix: true })}
onClick={onClick}
selected={selected}
actions={
diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-details-view.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-details-view.tsx
index f51c44c243..eb5224c958 100644
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-details-view.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-details-view.tsx
@@ -1,5 +1,5 @@
"use client";
-import moment from "moment";
+import { format, formatDistanceToNow, formatDistanceStrict } from "date-fns";
import React, { useCallback, useMemo, useEffect } from "react";
import {
@@ -90,13 +90,15 @@ export function AgentRunDetailsView({
},
{
label: "Started",
- value: `${moment(run.started_at).fromNow()}, ${moment(run.started_at).format("HH:mm")}`,
+ value: run.started_at
+ ? `${formatDistanceToNow(run.started_at, { addSuffix: true })}, ${format(run.started_at, "HH:mm")}`
+ : "—",
},
...(run.stats
? [
{
label: "Duration",
- value: moment.duration(run.stats.duration, "seconds").humanize(),
+ value: formatDistanceStrict(0, run.stats.duration * 1000),
},
{ label: "Steps", value: run.stats.node_exec_count },
{ label: "Cost", value: formatCredits(run.stats.cost) },
diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-draft-view.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-draft-view.tsx
index 0147c19a5c..b0c3a6ff7b 100644
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-draft-view.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-draft-view.tsx
@@ -10,8 +10,8 @@ import React, {
import {
CredentialsMetaInput,
CredentialsType,
+ Graph,
GraphExecutionID,
- GraphMeta,
LibraryAgentPreset,
LibraryAgentPresetID,
LibraryAgentPresetUpdatable,
@@ -69,7 +69,7 @@ export function AgentRunDraftView({
className,
recommendedScheduleCron,
}: {
- graph: GraphMeta;
+ graph: Graph;
agentActions?: ButtonAction[];
recommendedScheduleCron?: string | null;
doRun?: (
diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-summary-card.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-summary-card.tsx
index 423495878b..6f7d7865bc 100644
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-summary-card.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-summary-card.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import moment from "moment";
+import { formatDistanceToNow, isPast } from "date-fns";
import { cn } from "@/lib/utils";
@@ -118,10 +118,10 @@ export function AgentRunSummaryCard({
{timestamp && (
- {moment(timestamp).isBefore() ? "Ran" : "Runs in"}{" "}
- {moment(timestamp).fromNow()}
+ {isPast(timestamp) ? "Ran" : "Runs in"}{" "}
+ {formatDistanceToNow(timestamp, { addSuffix: true })}
)}
diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-schedule-details-view.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-schedule-details-view.tsx
index 61161088fc..30b0a82e65 100644
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-schedule-details-view.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-schedule-details-view.tsx
@@ -2,8 +2,8 @@
import React, { useCallback, useMemo } from "react";
import {
+ Graph,
GraphExecutionID,
- GraphMeta,
Schedule,
ScheduleID,
} from "@/lib/autogpt-server-api";
@@ -35,7 +35,7 @@ export function AgentScheduleDetailsView({
onForcedRun,
doDeleteSchedule,
}: {
- graph: GraphMeta;
+ graph: Graph;
schedule: Schedule;
agentActions: ButtonAction[];
onForcedRun: (runID: GraphExecutionID) => void;
diff --git a/autogpt_platform/frontend/src/app/(platform)/library/components/LibrarySearchBar/useLibrarySearchbar.tsx b/autogpt_platform/frontend/src/app/(platform)/library/components/LibrarySearchBar/useLibrarySearchbar.tsx
index 74b8e9874c..efeb654ed5 100644
--- a/autogpt_platform/frontend/src/app/(platform)/library/components/LibrarySearchBar/useLibrarySearchbar.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/components/LibrarySearchBar/useLibrarySearchbar.tsx
@@ -1,4 +1,4 @@
-import { debounce } from "lodash";
+import debounce from "lodash/debounce";
import { useCallback, useEffect } from "react";
interface Props {
diff --git a/autogpt_platform/frontend/src/app/(platform)/login/actions.ts b/autogpt_platform/frontend/src/app/(platform)/login/actions.ts
index 936c879d69..c4867dd123 100644
--- a/autogpt_platform/frontend/src/app/(platform)/login/actions.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/login/actions.ts
@@ -4,7 +4,7 @@ import BackendAPI from "@/lib/autogpt-server-api";
import { getServerSupabase } from "@/lib/supabase/server/getServerSupabase";
import { loginFormSchema } from "@/types/auth";
import * as Sentry from "@sentry/nextjs";
-import { shouldShowOnboarding } from "../../api/helpers";
+import { getOnboardingStatus } from "../../api/helpers";
export async function login(email: string, password: string) {
try {
@@ -36,11 +36,13 @@ export async function login(email: string, password: string) {
const api = new BackendAPI();
await api.createUser();
- const onboarding = await shouldShowOnboarding();
+ // Get onboarding status from backend (includes chat flag evaluated for this user)
+ const { shouldShowOnboarding } = await getOnboardingStatus();
+ const next = shouldShowOnboarding ? "/onboarding" : "/";
return {
success: true,
- onboarding,
+ next,
};
} catch (err) {
Sentry.captureException(err);
diff --git a/autogpt_platform/frontend/src/app/(platform)/login/useLoginPage.ts b/autogpt_platform/frontend/src/app/(platform)/login/useLoginPage.ts
index 9bde570548..9b81965c31 100644
--- a/autogpt_platform/frontend/src/app/(platform)/login/useLoginPage.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/login/useLoginPage.ts
@@ -1,8 +1,6 @@
import { useToast } from "@/components/molecules/Toast/use-toast";
-import { getHomepageRoute } from "@/lib/constants";
import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
import { environment } from "@/services/environment";
-import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
import { loginFormSchema, LoginProvider } from "@/types/auth";
import { zodResolver } from "@hookform/resolvers/zod";
import { useRouter, useSearchParams } from "next/navigation";
@@ -22,17 +20,15 @@ export function useLoginPage() {
const [isGoogleLoading, setIsGoogleLoading] = useState(false);
const [showNotAllowedModal, setShowNotAllowedModal] = useState(false);
const isCloudEnv = environment.isCloud();
- const isChatEnabled = useGetFlag(Flag.CHAT);
- const homepageRoute = getHomepageRoute(isChatEnabled);
// Get redirect destination from 'next' query parameter
const nextUrl = searchParams.get("next");
useEffect(() => {
if (isLoggedIn && !isLoggingIn) {
- router.push(nextUrl || homepageRoute);
+ router.push(nextUrl || "/");
}
- }, [homepageRoute, isLoggedIn, isLoggingIn, nextUrl, router]);
+ }, [isLoggedIn, isLoggingIn, nextUrl, router]);
const form = useForm>({
resolver: zodResolver(loginFormSchema),
@@ -97,13 +93,8 @@ export function useLoginPage() {
throw new Error(result.error || "Login failed");
}
- if (nextUrl) {
- router.replace(nextUrl);
- } else if (result.onboarding) {
- router.replace("/onboarding");
- } else {
- router.replace(homepageRoute);
- }
+ // Prefer URL's next parameter, then use backend-determined route
+ router.replace(nextUrl || result.next || "/");
} catch (error) {
toast({
title:
diff --git a/autogpt_platform/frontend/src/app/(platform)/monitoring/components/AgentFlowList.tsx b/autogpt_platform/frontend/src/app/(platform)/monitoring/components/AgentFlowList.tsx
index badba61bf1..a306275f10 100644
--- a/autogpt_platform/frontend/src/app/(platform)/monitoring/components/AgentFlowList.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/monitoring/components/AgentFlowList.tsx
@@ -30,7 +30,7 @@ import {
TableHeader,
TableRow,
} from "@/components/__legacy__/ui/table";
-import moment from "moment/moment";
+import { formatDistanceToNow } from "date-fns";
import { DialogTitle } from "@/components/__legacy__/ui/dialog";
import { AgentImportForm } from "./AgentImportForm";
@@ -161,8 +161,12 @@ export const AgentFlowList = ({
(!lastRun ? (
) : (
-
- {moment(lastRun.started_at).fromNow()}
+
+ {lastRun.started_at
+ ? formatDistanceToNow(lastRun.started_at, {
+ addSuffix: true,
+ })
+ : "—"}
))}
diff --git a/autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunInfo.tsx b/autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunInfo.tsx
index e619c2fd3d..0fdf39e8d9 100644
--- a/autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunInfo.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunInfo.tsx
@@ -10,7 +10,7 @@ import Link from "next/link";
import { Button, buttonVariants } from "@/components/__legacy__/ui/button";
import { IconSquare } from "@/components/__legacy__/ui/icons";
import { ExitIcon, Pencil2Icon } from "@radix-ui/react-icons";
-import moment from "moment/moment";
+import { format } from "date-fns";
import { FlowRunStatusBadge } from "@/app/(platform)/monitoring/components/FlowRunStatusBadge";
import { useBackendAPI } from "@/lib/autogpt-server-api/context";
import RunnerOutputUI, {
@@ -111,11 +111,15 @@ export const FlowRunInfo: React.FC<
Started:{" "}
- {moment(execution.started_at).format("YYYY-MM-DD HH:mm:ss")}
+ {execution.started_at
+ ? format(execution.started_at, "yyyy-MM-dd HH:mm:ss")
+ : "—"}
Finished:{" "}
- {moment(execution.ended_at).format("YYYY-MM-DD HH:mm:ss")}
+ {execution.ended_at
+ ? format(execution.ended_at, "yyyy-MM-dd HH:mm:ss")
+ : "—"}
{execution.stats && (
diff --git a/autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsList.tsx b/autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsList.tsx
index a99d9309b5..c4a2a40447 100644
--- a/autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsList.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsList.tsx
@@ -14,7 +14,7 @@ import {
TableHeader,
TableRow,
} from "@/components/__legacy__/ui/table";
-import moment from "moment/moment";
+import { format } from "date-fns";
import { FlowRunStatusBadge } from "@/app/(platform)/monitoring/components/FlowRunStatusBadge";
import { TextRenderer } from "../../../../components/__legacy__/ui/render";
@@ -59,7 +59,9 @@ export const FlowRunsList: React.FC<{
/>
- {moment(execution.started_at).format("HH:mm")}
+ {execution.started_at
+ ? format(execution.started_at, "HH:mm")
+ : "—"}
{
- const now = moment();
- const time = moment(unixTime);
- return now.diff(time, "hours") < 24
- ? time.format("HH:mm")
- : time.format("YYYY-MM-DD HH:mm");
+ const now = new Date();
+ const time = new Date(unixTime);
+ return differenceInHours(now, time) < 24
+ ? format(time, "HH:mm")
+ : format(time, "yyyy-MM-dd HH:mm");
}}
name="Time"
scale="time"
@@ -79,7 +79,9 @@ export const FlowRunsTimeline = ({
Started:{" "}
- {moment(data.started_at).format("YYYY-MM-DD HH:mm:ss")}
+ {data.started_at
+ ? format(data.started_at, "yyyy-MM-dd HH:mm:ss")
+ : "—"}
{data.stats && (
diff --git a/autogpt_platform/frontend/src/app/(platform)/signup/actions.ts b/autogpt_platform/frontend/src/app/(platform)/signup/actions.ts
index 6d68782e7a..204482dbe9 100644
--- a/autogpt_platform/frontend/src/app/(platform)/signup/actions.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/signup/actions.ts
@@ -1,18 +1,16 @@
"use server";
-import { getHomepageRoute } from "@/lib/constants";
import { getServerSupabase } from "@/lib/supabase/server/getServerSupabase";
import { signupFormSchema } from "@/types/auth";
import * as Sentry from "@sentry/nextjs";
import { isWaitlistError, logWaitlistError } from "../../api/auth/utils";
-import { shouldShowOnboarding } from "../../api/helpers";
+import { getOnboardingStatus } from "../../api/helpers";
export async function signup(
email: string,
password: string,
confirmPassword: string,
agreeToTerms: boolean,
- isChatEnabled: boolean,
) {
try {
const parsed = signupFormSchema.safeParse({
@@ -59,10 +57,9 @@ export async function signup(
await supabase.auth.setSession(data.session);
}
- const isOnboardingEnabled = await shouldShowOnboarding();
- const next = isOnboardingEnabled
- ? "/onboarding"
- : getHomepageRoute(isChatEnabled);
+ // Get onboarding status from backend (includes chat flag evaluated for this user)
+ const { shouldShowOnboarding } = await getOnboardingStatus();
+ const next = shouldShowOnboarding ? "/onboarding" : "/";
return { success: true, next };
} catch (err) {
diff --git a/autogpt_platform/frontend/src/app/(platform)/signup/useSignupPage.ts b/autogpt_platform/frontend/src/app/(platform)/signup/useSignupPage.ts
index 5bd53ca846..fd78b48735 100644
--- a/autogpt_platform/frontend/src/app/(platform)/signup/useSignupPage.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/signup/useSignupPage.ts
@@ -1,8 +1,6 @@
import { useToast } from "@/components/molecules/Toast/use-toast";
-import { getHomepageRoute } from "@/lib/constants";
import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
import { environment } from "@/services/environment";
-import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
import { LoginProvider, signupFormSchema } from "@/types/auth";
import { zodResolver } from "@hookform/resolvers/zod";
import { useRouter, useSearchParams } from "next/navigation";
@@ -22,17 +20,15 @@ export function useSignupPage() {
const [isGoogleLoading, setIsGoogleLoading] = useState(false);
const [showNotAllowedModal, setShowNotAllowedModal] = useState(false);
const isCloudEnv = environment.isCloud();
- const isChatEnabled = useGetFlag(Flag.CHAT);
- const homepageRoute = getHomepageRoute(isChatEnabled);
// Get redirect destination from 'next' query parameter
const nextUrl = searchParams.get("next");
useEffect(() => {
if (isLoggedIn && !isSigningUp) {
- router.push(nextUrl || homepageRoute);
+ router.push(nextUrl || "/");
}
- }, [homepageRoute, isLoggedIn, isSigningUp, nextUrl, router]);
+ }, [isLoggedIn, isSigningUp, nextUrl, router]);
const form = useForm>({
resolver: zodResolver(signupFormSchema),
@@ -108,7 +104,6 @@ export function useSignupPage() {
data.password,
data.confirmPassword,
data.agreeToTerms,
- isChatEnabled === true,
);
setIsLoading(false);
@@ -134,7 +129,7 @@ export function useSignupPage() {
}
// Prefer the URL's next parameter, then result.next (for onboarding), then default
- const redirectTo = nextUrl || result.next || homepageRoute;
+ const redirectTo = nextUrl || result.next || "/";
router.replace(redirectTo);
} catch (error) {
setIsLoading(false);
diff --git a/autogpt_platform/frontend/src/app/api/chat/sessions/[sessionId]/stream/route.ts b/autogpt_platform/frontend/src/app/api/chat/sessions/[sessionId]/stream/route.ts
index d63eed0ca2..6facf80c58 100644
--- a/autogpt_platform/frontend/src/app/api/chat/sessions/[sessionId]/stream/route.ts
+++ b/autogpt_platform/frontend/src/app/api/chat/sessions/[sessionId]/stream/route.ts
@@ -88,39 +88,27 @@ export async function POST(
}
/**
- * Legacy GET endpoint for backward compatibility
+ * Resume an active stream for a session.
+ *
+ * Called by the AI SDK's `useChat(resume: true)` on page load.
+ * Proxies to the backend which checks for an active stream and either
+ * replays it (200 + SSE) or returns 204 No Content.
*/
export async function GET(
- request: NextRequest,
+ _request: NextRequest,
{ params }: { params: Promise<{ sessionId: string }> },
) {
const { sessionId } = await params;
- const searchParams = request.nextUrl.searchParams;
- const message = searchParams.get("message");
- const isUserMessage = searchParams.get("is_user_message");
-
- if (!message) {
- return new Response("Missing message parameter", { status: 400 });
- }
try {
- // Get auth token from server-side session
const token = await getServerAuthToken();
- // Build backend URL
const backendUrl = environment.getAGPTServerBaseUrl();
const streamUrl = new URL(
`/api/chat/sessions/${sessionId}/stream`,
backendUrl,
);
- streamUrl.searchParams.set("message", message);
- // Pass is_user_message parameter if provided
- if (isUserMessage !== null) {
- streamUrl.searchParams.set("is_user_message", isUserMessage);
- }
-
- // Forward request to backend with auth header
const headers: Record = {
Accept: "text/event-stream",
"Cache-Control": "no-cache",
@@ -136,6 +124,11 @@ export async function GET(
headers,
});
+ // 204 = no active stream to resume
+ if (response.status === 204) {
+ return new Response(null, { status: 204 });
+ }
+
if (!response.ok) {
const error = await response.text();
return new Response(error, {
@@ -144,17 +137,17 @@ export async function GET(
});
}
- // Return the SSE stream directly
return new Response(response.body, {
headers: {
"Content-Type": "text/event-stream",
"Cache-Control": "no-cache, no-transform",
Connection: "keep-alive",
"X-Accel-Buffering": "no",
+ "x-vercel-ai-ui-message-stream": "v1",
},
});
} catch (error) {
- console.error("SSE proxy error:", error);
+ console.error("Resume stream proxy error:", error);
return new Response(
JSON.stringify({
error: "Failed to connect to chat service",
diff --git a/autogpt_platform/frontend/src/app/api/chat/tasks/[taskId]/stream/route.ts b/autogpt_platform/frontend/src/app/api/chat/tasks/[taskId]/stream/route.ts
new file mode 100644
index 0000000000..336786bfdb
--- /dev/null
+++ b/autogpt_platform/frontend/src/app/api/chat/tasks/[taskId]/stream/route.ts
@@ -0,0 +1,81 @@
+import { environment } from "@/services/environment";
+import { getServerAuthToken } from "@/lib/autogpt-server-api/helpers";
+import { NextRequest } from "next/server";
+
+/**
+ * SSE Proxy for task stream reconnection.
+ *
+ * This endpoint allows clients to reconnect to an ongoing or recently completed
+ * background task's stream. It replays missed messages from Redis Streams and
+ * subscribes to live updates if the task is still running.
+ *
+ * Client contract:
+ * 1. When receiving an operation_started event, store the task_id
+ * 2. To reconnect: GET /api/chat/tasks/{taskId}/stream?last_message_id={idx}
+ * 3. Messages are replayed from the last_message_id position
+ * 4. Stream ends when "finish" event is received
+ */
+export async function GET(
+ request: NextRequest,
+ { params }: { params: Promise<{ taskId: string }> },
+) {
+ const { taskId } = await params;
+ const searchParams = request.nextUrl.searchParams;
+ const lastMessageId = searchParams.get("last_message_id") || "0-0";
+
+ try {
+ // Get auth token from server-side session
+ const token = await getServerAuthToken();
+
+ // Build backend URL
+ const backendUrl = environment.getAGPTServerBaseUrl();
+ const streamUrl = new URL(`/api/chat/tasks/${taskId}/stream`, backendUrl);
+ streamUrl.searchParams.set("last_message_id", lastMessageId);
+
+ // Forward request to backend with auth header
+ const headers: Record = {
+ Accept: "text/event-stream",
+ "Cache-Control": "no-cache",
+ Connection: "keep-alive",
+ };
+
+ if (token) {
+ headers["Authorization"] = `Bearer ${token}`;
+ }
+
+ const response = await fetch(streamUrl.toString(), {
+ method: "GET",
+ headers,
+ });
+
+ if (!response.ok) {
+ const error = await response.text();
+ return new Response(error, {
+ status: response.status,
+ headers: { "Content-Type": "application/json" },
+ });
+ }
+
+ // Return the SSE stream directly
+ return new Response(response.body, {
+ headers: {
+ "Content-Type": "text/event-stream",
+ "Cache-Control": "no-cache, no-transform",
+ Connection: "keep-alive",
+ "X-Accel-Buffering": "no",
+ },
+ });
+ } catch (error) {
+ console.error("Task stream proxy error:", error);
+ return new Response(
+ JSON.stringify({
+ error: "Failed to connect to task stream",
+ detail: error instanceof Error ? error.message : String(error),
+ }),
+ {
+ status: 500,
+ headers: { "Content-Type": "application/json" },
+ },
+ );
+ }
+}
diff --git a/autogpt_platform/frontend/src/app/api/helpers.ts b/autogpt_platform/frontend/src/app/api/helpers.ts
index e9a708ba4c..226f5fa786 100644
--- a/autogpt_platform/frontend/src/app/api/helpers.ts
+++ b/autogpt_platform/frontend/src/app/api/helpers.ts
@@ -175,9 +175,11 @@ export async function resolveResponse<
return res.data;
}
-export async function shouldShowOnboarding() {
- const isEnabled = await resolveResponse(getV1IsOnboardingEnabled());
+export async function getOnboardingStatus() {
+ const status = await resolveResponse(getV1IsOnboardingEnabled());
const onboarding = await resolveResponse(getV1OnboardingState());
const isCompleted = onboarding.completedSteps.includes("CONGRATS");
- return isEnabled && !isCompleted;
+ return {
+ shouldShowOnboarding: status.is_onboarding_enabled && !isCompleted,
+ };
}
diff --git a/autogpt_platform/frontend/src/app/api/proxy/[...path]/route.ts b/autogpt_platform/frontend/src/app/api/proxy/[...path]/route.ts
index 293c406373..442bd77e0f 100644
--- a/autogpt_platform/frontend/src/app/api/proxy/[...path]/route.ts
+++ b/autogpt_platform/frontend/src/app/api/proxy/[...path]/route.ts
@@ -1,5 +1,6 @@
import {
ApiError,
+ getServerAuthToken,
makeAuthenticatedFileUpload,
makeAuthenticatedRequest,
} from "@/lib/autogpt-server-api/helpers";
@@ -15,6 +16,69 @@ function buildBackendUrl(path: string[], queryString: string): string {
return `${environment.getAGPTServerBaseUrl()}/${backendPath}${queryString}`;
}
+/**
+ * Check if this is a workspace file download request that needs binary response handling.
+ */
+function isWorkspaceDownloadRequest(path: string[]): boolean {
+ // Match pattern: api/workspace/files/{id}/download (5 segments)
+ return (
+ path.length == 5 &&
+ path[0] === "api" &&
+ path[1] === "workspace" &&
+ path[2] === "files" &&
+ path[path.length - 1] === "download"
+ );
+}
+
+/**
+ * Handle workspace file download requests with proper binary response streaming.
+ */
+async function handleWorkspaceDownload(
+ req: NextRequest,
+ backendUrl: string,
+): Promise {
+ const token = await getServerAuthToken();
+
+ const headers: Record = {};
+ if (token && token !== "no-token-found") {
+ headers["Authorization"] = `Bearer ${token}`;
+ }
+
+ const response = await fetch(backendUrl, {
+ method: "GET",
+ headers,
+ redirect: "follow", // Follow redirects to signed URLs
+ });
+
+ if (!response.ok) {
+ return NextResponse.json(
+ { error: `Failed to download file: ${response.statusText}` },
+ { status: response.status },
+ );
+ }
+
+ // Get the content type from the backend response
+ const contentType =
+ response.headers.get("Content-Type") || "application/octet-stream";
+ const contentDisposition = response.headers.get("Content-Disposition");
+
+ // Stream the response body
+ const responseHeaders: Record = {
+ "Content-Type": contentType,
+ };
+
+ if (contentDisposition) {
+ responseHeaders["Content-Disposition"] = contentDisposition;
+ }
+
+ // Return the binary content
+ const arrayBuffer = await response.arrayBuffer();
+ return new NextResponse(arrayBuffer, {
+ status: 200,
+ headers: responseHeaders,
+ });
+}
+
async function handleJsonRequest(
req: NextRequest,
method: string,
@@ -180,6 +244,11 @@ async function handler(
};
try {
+ // Handle workspace file downloads separately (binary response)
+ if (method === "GET" && isWorkspaceDownloadRequest(path)) {
+ return await handleWorkspaceDownload(req, backendUrl);
+ }
+
if (method === "GET" || method === "DELETE") {
responseBody = await handleGetDeleteRequest(method, backendUrl, req);
} else if (contentType?.includes("application/json")) {
diff --git a/autogpt_platform/frontend/src/app/api/transcribe/route.ts b/autogpt_platform/frontend/src/app/api/transcribe/route.ts
new file mode 100644
index 0000000000..10c182cdfa
--- /dev/null
+++ b/autogpt_platform/frontend/src/app/api/transcribe/route.ts
@@ -0,0 +1,77 @@
+import { getServerAuthToken } from "@/lib/autogpt-server-api/helpers";
+import { NextRequest, NextResponse } from "next/server";
+
+const WHISPER_API_URL = "https://api.openai.com/v1/audio/transcriptions";
+const MAX_FILE_SIZE = 25 * 1024 * 1024; // 25MB - Whisper's limit
+
+function getExtensionFromMimeType(mimeType: string): string {
+ const subtype = mimeType.split("/")[1]?.split(";")[0];
+ return subtype || "webm";
+}
+
+export async function POST(request: NextRequest) {
+ const token = await getServerAuthToken();
+
+ if (!token || token === "no-token-found") {
+ return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+ }
+
+ const apiKey = process.env.OPENAI_API_KEY;
+
+ if (!apiKey) {
+ return NextResponse.json(
+ { error: "OpenAI API key not configured" },
+ { status: 401 },
+ );
+ }
+
+ try {
+ const formData = await request.formData();
+ const audioFile = formData.get("audio");
+
+ if (!audioFile || !(audioFile instanceof Blob)) {
+ return NextResponse.json(
+ { error: "No audio file provided" },
+ { status: 400 },
+ );
+ }
+
+ if (audioFile.size > MAX_FILE_SIZE) {
+ return NextResponse.json(
+ { error: "File too large. Maximum size is 25MB." },
+ { status: 413 },
+ );
+ }
+
+ const ext = getExtensionFromMimeType(audioFile.type);
+ const whisperFormData = new FormData();
+ whisperFormData.append("file", audioFile, `recording.${ext}`);
+ whisperFormData.append("model", "whisper-1");
+
+ const response = await fetch(WHISPER_API_URL, {
+ method: "POST",
+ headers: {
+ Authorization: `Bearer ${apiKey}`,
+ },
+ body: whisperFormData,
+ });
+
+ if (!response.ok) {
+ const errorData = await response.json().catch(() => ({}));
+ console.error("Whisper API error:", errorData);
+ return NextResponse.json(
+ { error: errorData.error?.message || "Transcription failed" },
+ { status: response.status },
+ );
+ }
+
+ const result = await response.json();
+ return NextResponse.json({ text: result.text });
+ } catch (error) {
+ console.error("Transcription error:", error);
+ return NextResponse.json(
+ { error: "Failed to process audio" },
+ { status: 500 },
+ );
+ }
+}
diff --git a/autogpt_platform/frontend/src/app/globals.css b/autogpt_platform/frontend/src/app/globals.css
index 1f782f753b..dd1d17cde7 100644
--- a/autogpt_platform/frontend/src/app/globals.css
+++ b/autogpt_platform/frontend/src/app/globals.css
@@ -1,6 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+@source "../node_modules/streamdown/dist/*.js";
@layer base {
:root {
@@ -29,6 +30,14 @@
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
+ --sidebar-background: 0 0% 98%;
+ --sidebar-foreground: 240 5.3% 26.1%;
+ --sidebar-primary: 240 5.9% 10%;
+ --sidebar-primary-foreground: 0 0% 98%;
+ --sidebar-accent: 240 4.8% 95.9%;
+ --sidebar-accent-foreground: 240 5.9% 10%;
+ --sidebar-border: 220 13% 91%;
+ --sidebar-ring: 217.2 91.2% 59.8%;
}
.dark {
@@ -56,6 +65,14 @@
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
+ --sidebar-background: 240 5.9% 10%;
+ --sidebar-foreground: 240 4.8% 95.9%;
+ --sidebar-primary: 224.3 76.3% 48%;
+ --sidebar-primary-foreground: 0 0% 100%;
+ --sidebar-accent: 240 3.7% 15.9%;
+ --sidebar-accent-foreground: 240 4.8% 95.9%;
+ --sidebar-border: 240 3.7% 15.9%;
+ --sidebar-ring: 217.2 91.2% 59.8%;
}
* {
diff --git a/autogpt_platform/frontend/src/app/page.tsx b/autogpt_platform/frontend/src/app/page.tsx
index dbfab49469..ce67760eda 100644
--- a/autogpt_platform/frontend/src/app/page.tsx
+++ b/autogpt_platform/frontend/src/app/page.tsx
@@ -1,27 +1,15 @@
"use client";
-import { getHomepageRoute } from "@/lib/constants";
-import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
+import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
import { useRouter } from "next/navigation";
import { useEffect } from "react";
export default function Page() {
- const isChatEnabled = useGetFlag(Flag.CHAT);
const router = useRouter();
- const homepageRoute = getHomepageRoute(isChatEnabled);
- const envEnabled = process.env.NEXT_PUBLIC_LAUNCHDARKLY_ENABLED === "true";
- const clientId = process.env.NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_ID;
- const isLaunchDarklyConfigured = envEnabled && Boolean(clientId);
- const isFlagReady =
- !isLaunchDarklyConfigured || typeof isChatEnabled === "boolean";
- useEffect(
- function redirectToHomepage() {
- if (!isFlagReady) return;
- router.replace(homepageRoute);
- },
- [homepageRoute, isFlagReady, router],
- );
+ useEffect(() => {
+ router.replace("/copilot");
+ }, [router]);
- return null;
+ return ;
}
diff --git a/autogpt_platform/frontend/src/components/__legacy__/ui/render.tsx b/autogpt_platform/frontend/src/components/__legacy__/ui/render.tsx
index 5173326f23..b290c51809 100644
--- a/autogpt_platform/frontend/src/components/__legacy__/ui/render.tsx
+++ b/autogpt_platform/frontend/src/components/__legacy__/ui/render.tsx
@@ -22,7 +22,7 @@ const isValidVideoUrl = (url: string): boolean => {
if (url.startsWith("data:video")) {
return true;
}
- const videoExtensions = /\.(mp4|webm|ogg)$/i;
+ const videoExtensions = /\.(mp4|webm|ogg|mov|avi|mkv|m4v)$/i;
const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.?be)\/.+$/;
const cleanedUrl = url.split("?")[0];
return (
@@ -44,11 +44,29 @@ const isValidAudioUrl = (url: string): boolean => {
if (url.startsWith("data:audio")) {
return true;
}
- const audioExtensions = /\.(mp3|wav)$/i;
+ const audioExtensions = /\.(mp3|wav|ogg|m4a|aac|flac)$/i;
const cleanedUrl = url.split("?")[0];
return isValidMediaUri(url) && audioExtensions.test(cleanedUrl);
};
+const getVideoMimeType = (url: string): string => {
+ if (url.startsWith("data:video/")) {
+ const match = url.match(/^data:(video\/[^;]+)/);
+ return match?.[1] || "video/mp4";
+ }
+ const extension = url.split("?")[0].split(".").pop()?.toLowerCase();
+ const mimeMap: Record = {
+ mp4: "video/mp4",
+ webm: "video/webm",
+ ogg: "video/ogg",
+ mov: "video/quicktime",
+ avi: "video/x-msvideo",
+ mkv: "video/x-matroska",
+ m4v: "video/mp4",
+ };
+ return mimeMap[extension || ""] || "video/mp4";
+};
+
const VideoRenderer: React.FC<{ videoUrl: string }> = ({ videoUrl }) => {
const videoId = getYouTubeVideoId(videoUrl);
return (
@@ -63,7 +81,7 @@ const VideoRenderer: React.FC<{ videoUrl: string }> = ({ videoUrl }) => {
>
) : (
)}
diff --git a/autogpt_platform/frontend/src/components/ai-elements/conversation.tsx b/autogpt_platform/frontend/src/components/ai-elements/conversation.tsx
new file mode 100644
index 0000000000..92e940c715
--- /dev/null
+++ b/autogpt_platform/frontend/src/components/ai-elements/conversation.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { scrollbarStyles } from "@/components/styles/scrollbars";
+import { cn } from "@/lib/utils";
+import { ArrowDownIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+import { useCallback } from "react";
+import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+
+export type ConversationProps = ComponentProps;
+
+export const Conversation = ({ className, ...props }: ConversationProps) => (
+
+);
+
+export type ConversationContentProps = ComponentProps<
+ typeof StickToBottom.Content
+>;
+
+export const ConversationContent = ({
+ className,
+ ...props
+}: ConversationContentProps) => (
+
+);
+
+export type ConversationEmptyStateProps = ComponentProps<"div"> & {
+ title?: string;
+ description?: string;
+ icon?: React.ReactNode;
+};
+
+export const ConversationEmptyState = ({
+ className,
+ title = "No messages yet",
+ description = "Start a conversation to see messages here",
+ icon,
+ children,
+ ...props
+}: ConversationEmptyStateProps) => (
+
+ {children ?? (
+ <>
+ {icon && (
+
{icon}
+ )}
+
+
{title}
+ {description && (
+
+ {description}
+
+ )}
+
+
+ )}
+
+ {children}
+
+);
+
+export type MessageActionsProps = ComponentProps<"div">;
+
+export const MessageActions = ({
+ className,
+ children,
+ ...props
+}: MessageActionsProps) => (
+
+ {children}
+
+);
+
+export type MessageActionProps = ComponentProps & {
+ tooltip?: string;
+ label?: string;
+};
+
+export const MessageAction = ({
+ tooltip,
+ children,
+ label,
+ variant = "ghost",
+ size = "icon-sm",
+ ...props
+}: MessageActionProps) => {
+ const button = (
+
+ );
+
+ if (tooltip) {
+ return (
+
+
+ {button}
+
+ {tooltip}
+
+
+
+ );
+ }
+
+ return button;
+};
+
+interface MessageBranchContextType {
+ currentBranch: number;
+ totalBranches: number;
+ goToPrevious: () => void;
+ goToNext: () => void;
+ branches: ReactElement[];
+ setBranches: (branches: ReactElement[]) => void;
+}
+
+const MessageBranchContext = createContext(
+ null,
+);
+
+const useMessageBranch = () => {
+ const context = useContext(MessageBranchContext);
+
+ if (!context) {
+ throw new Error("MessageBranch components must be used within");
+ }
+
+ return context;
+};
+
+export type MessageBranchProps = HTMLAttributes & {
+ defaultBranch?: number;
+ onBranchChange?: (branchIndex: number) => void;
+};
+
+export const MessageBranch = ({
+ defaultBranch = 0,
+ onBranchChange,
+ className,
+ ...props
+}: MessageBranchProps) => {
+ const [currentBranch, setCurrentBranch] = useState(defaultBranch);
+ const [branches, setBranches] = useState([]);
+
+ const handleBranchChange = (newBranch: number) => {
+ setCurrentBranch(newBranch);
+ onBranchChange?.(newBranch);
+ };
+
+ const goToPrevious = () => {
+ const newBranch =
+ currentBranch > 0 ? currentBranch - 1 : branches.length - 1;
+ handleBranchChange(newBranch);
+ };
+
+ const goToNext = () => {
+ const newBranch =
+ currentBranch < branches.length - 1 ? currentBranch + 1 : 0;
+ handleBranchChange(newBranch);
+ };
+
+ const contextValue: MessageBranchContextType = {
+ currentBranch,
+ totalBranches: branches.length,
+ goToPrevious,
+ goToNext,
+ branches,
+ setBranches,
+ };
+
+ return (
+
+ div]:pb-0", className)}
+ {...props}
+ />
+
+ );
+};
+
+export type MessageBranchContentProps = HTMLAttributes
;
+
+export const MessageBranchContent = ({
+ children,
+ ...props
+}: MessageBranchContentProps) => {
+ const { currentBranch, setBranches, branches } = useMessageBranch();
+ const childrenArray = Array.isArray(children) ? children : [children];
+
+ // Use useEffect to update branches when they change
+ useEffect(() => {
+ if (branches.length !== childrenArray.length) {
+ setBranches(childrenArray);
+ }
+ }, [childrenArray, branches, setBranches]);
+
+ return childrenArray.map((branch, index) => (
+ div]:pb-0",
+ index === currentBranch ? "block" : "hidden",
+ )}
+ key={branch.key}
+ {...props}
+ >
+ {branch}
+
+ ));
+};
+
+export type MessageBranchSelectorProps = HTMLAttributes & {
+ from: UIMessage["role"];
+};
+
+export const MessageBranchSelector = ({
+ className,
+ from: _from,
+ ...props
+}: MessageBranchSelectorProps) => {
+ const { totalBranches } = useMessageBranch();
+
+ // Don't render if there's only one branch
+ if (totalBranches <= 1) {
+ return null;
+ }
+
+ return (
+ *:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md",
+ className,
+ )}
+ orientation="horizontal"
+ {...props}
+ />
+ );
+};
+
+export type MessageBranchPreviousProps = ComponentProps;
+
+export const MessageBranchPrevious = ({
+ children,
+ ...props
+}: MessageBranchPreviousProps) => {
+ const { goToPrevious, totalBranches } = useMessageBranch();
+
+ return (
+
+ );
+};
+
+export type MessageBranchNextProps = ComponentProps;
+
+export const MessageBranchNext = ({
+ children,
+ ...props
+}: MessageBranchNextProps) => {
+ const { goToNext, totalBranches } = useMessageBranch();
+
+ return (
+
+ );
+};
+
+export type MessageBranchPageProps = HTMLAttributes;
+
+export const MessageBranchPage = ({
+ className,
+ ...props
+}: MessageBranchPageProps) => {
+ const { currentBranch, totalBranches } = useMessageBranch();
+
+ return (
+
+ {currentBranch + 1} of {totalBranches}
+
+ );
+};
+
+export type MessageResponseProps = ComponentProps;
+
+export const MessageResponse = memo(
+ ({ className, ...props }: MessageResponseProps) => (
+ *:first-child]:mt-0 [&>*:last-child]:mb-0 [&_pre]:!bg-white",
+ className,
+ )}
+ plugins={{ code, mermaid, math, cjk }}
+ {...props}
+ />
+ ),
+ (prevProps, nextProps) => prevProps.children === nextProps.children,
+);
+
+MessageResponse.displayName = "MessageResponse";
+
+export type MessageToolbarProps = ComponentProps<"div">;
+
+export const MessageToolbar = ({
+ className,
+ children,
+ ...props
+}: MessageToolbarProps) => (
+
+ {children}
+
+);
diff --git a/autogpt_platform/frontend/src/components/atoms/FileInput/FileInput.tsx b/autogpt_platform/frontend/src/components/atoms/FileInput/FileInput.tsx
index d43063b411..2677a7483b 100644
--- a/autogpt_platform/frontend/src/components/atoms/FileInput/FileInput.tsx
+++ b/autogpt_platform/frontend/src/components/atoms/FileInput/FileInput.tsx
@@ -104,7 +104,31 @@ export function FileInput(props: Props) {
return false;
}
- const getFileLabelFromValue = (val: string) => {
+ const getFileLabelFromValue = (val: unknown): string => {
+ // Handle object format from external API: { name, type, size, data }
+ if (val && typeof val === "object") {
+ const obj = val as Record;
+ if (typeof obj.name === "string") {
+ return getFileLabel(
+ obj.name,
+ typeof obj.type === "string" ? obj.type : "",
+ );
+ }
+ if (typeof obj.type === "string") {
+ const mimeParts = obj.type.split("/");
+ if (mimeParts.length > 1) {
+ return `${mimeParts[1].toUpperCase()} file`;
+ }
+ return `${obj.type} file`;
+ }
+ return "File";
+ }
+
+ // Handle string values (data URIs or file paths)
+ if (typeof val !== "string") {
+ return "File";
+ }
+
if (val.startsWith("data:")) {
const matches = val.match(/^data:([^;]+);/);
if (matches?.[1]) {
diff --git a/autogpt_platform/frontend/src/components/atoms/OverflowText/OverflowText.tsx b/autogpt_platform/frontend/src/components/atoms/OverflowText/OverflowText.tsx
index efc345f79c..b118cc5aa0 100644
--- a/autogpt_platform/frontend/src/components/atoms/OverflowText/OverflowText.tsx
+++ b/autogpt_platform/frontend/src/components/atoms/OverflowText/OverflowText.tsx
@@ -77,7 +77,7 @@ export function OverflowText(props: Props) {
"block min-w-0 overflow-hidden text-ellipsis whitespace-nowrap",
)}
>
-
+
{value}
diff --git a/autogpt_platform/frontend/src/components/atoms/Text/Text.tsx b/autogpt_platform/frontend/src/components/atoms/Text/Text.tsx
index 8bae184e5b..86c39b6436 100644
--- a/autogpt_platform/frontend/src/components/atoms/Text/Text.tsx
+++ b/autogpt_platform/frontend/src/components/atoms/Text/Text.tsx
@@ -1,4 +1,5 @@
import React from "react";
+import { cn } from "@/lib/utils";
import { As, Variant, variantElementMap, variants } from "./helpers";
type CustomProps = {
@@ -22,7 +23,7 @@ export function Text({
}: TextProps) {
const variantClasses = variants[size || variant] || variants.body;
const Element = outerAs || variantElementMap[variant];
- const combinedClassName = `${variantClasses} ${className}`.trim();
+ const combinedClassName = cn(variantClasses, className);
return React.createElement(
Element,
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/Chat.tsx b/autogpt_platform/frontend/src/components/contextual/Chat/Chat.tsx
deleted file mode 100644
index ba7584765d..0000000000
--- a/autogpt_platform/frontend/src/components/contextual/Chat/Chat.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-"use client";
-
-import { Text } from "@/components/atoms/Text/Text";
-import { cn } from "@/lib/utils";
-import { useEffect, useRef } from "react";
-import { ChatContainer } from "./components/ChatContainer/ChatContainer";
-import { ChatErrorState } from "./components/ChatErrorState/ChatErrorState";
-import { ChatLoader } from "./components/ChatLoader/ChatLoader";
-import { useChat } from "./useChat";
-
-export interface ChatProps {
- className?: string;
- urlSessionId?: string | null;
- initialPrompt?: string;
- onSessionNotFound?: () => void;
- onStreamingChange?: (isStreaming: boolean) => void;
-}
-
-export function Chat({
- className,
- urlSessionId,
- initialPrompt,
- onSessionNotFound,
- onStreamingChange,
-}: ChatProps) {
- const hasHandledNotFoundRef = useRef(false);
- const {
- messages,
- isLoading,
- isCreating,
- error,
- isSessionNotFound,
- sessionId,
- createSession,
- showLoader,
- } = useChat({ urlSessionId });
-
- useEffect(
- function handleMissingSession() {
- if (!onSessionNotFound) return;
- if (!urlSessionId) return;
- if (!isSessionNotFound || isLoading || isCreating) return;
- if (hasHandledNotFoundRef.current) return;
- hasHandledNotFoundRef.current = true;
- onSessionNotFound();
- },
- [onSessionNotFound, urlSessionId, isSessionNotFound, isLoading, isCreating],
- );
-
- return (
-
- {/* Main Content */}
-
- {/* Loading State */}
- {showLoader && (isLoading || isCreating) && (
-
-
-
-
- Loading your chats...
-
-
-
-
- {children}
-
- );
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/components/AgentCarouselMessage/AgentCarouselMessage.tsx b/autogpt_platform/frontend/src/components/contextual/Chat/components/AgentCarouselMessage/AgentCarouselMessage.tsx
deleted file mode 100644
index 582b24de5e..0000000000
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/AgentCarouselMessage/AgentCarouselMessage.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { Button } from "@/components/atoms/Button/Button";
-import { Card } from "@/components/atoms/Card/Card";
-import { Text } from "@/components/atoms/Text/Text";
-import { cn } from "@/lib/utils";
-import { ArrowRight, List, Robot } from "@phosphor-icons/react";
-import Image from "next/image";
-
-export interface Agent {
- id: string;
- name: string;
- description: string;
- version?: number;
- image_url?: string;
-}
-
-export interface AgentCarouselMessageProps {
- agents: Agent[];
- totalCount?: number;
- onSelectAgent?: (agentId: string) => void;
- className?: string;
-}
-
-export function AgentCarouselMessage({
- agents,
- totalCount,
- onSelectAgent,
- className,
-}: AgentCarouselMessageProps) {
- const displayCount = totalCount ?? agents.length;
-
- return (
-
- {/* Header */}
-
-
-
-
-
-
- Found {displayCount} {displayCount === 1 ? "Agent" : "Agents"}
-
-
- Select an agent to view details or run it
-
-
-
-
- {/* Agent Cards */}
-
- {agents.map((agent) => (
-
-
-
- {agent.image_url ? (
-
- ) : (
-
-
-
- )}
-
-
-
-
- {agent.name}
-
- {agent.version && (
-
- v{agent.version}
-
- )}
-
-
- {agent.description}
-
- {onSelectAgent && (
-
- )}
-
-
- ))}
-
-
- {totalCount && totalCount > agents.length && (
-
- Showing {agents.length} of {totalCount} results
-
- )}
-
-
-
-
-
-
- {agentName ? `Configure ${agentName}` : "Agent Configuration"}
-
-
- {message}
-
-
- {inputFields.length > 0 && (
-
- {inputFields.map(([key, inputSubSchema]) => (
- setInputValue(key, value)}
- />
- ))}
-
- )}
-
- {credentialFields.length > 0 && (
-
- {credentialFields.map(([key, schema]) => {
- const requiredCredentials = new Set(
- (credentialsSchemaObj.required as string[]) || [],
- );
- return (
-
- setCredentialsValue(key, value)
- }
- siblingInputs={mergedInputValues}
- isOptional={!requiredCredentials.has(key)}
- />
- );
- })}
-
- )}
-
-
-
- {onCancel && (
-
- )}
-
-
-
-
-
-
-
-
-
-
- Authentication Required
-
-
- Sign in to set up and manage agents
-
-
-
-
-
-
{message}
- {agentInfo && (
-
-
- Ready to set up:{" "}
- {agentInfo.name}
-
-
- Type:{" "}
- {agentInfo.trigger_type}
-
-
- )}
-
-
-
-
-
-
-
-
- Your chat session will be preserved after signing in
-
-
-
-
-
- The Autogpt AI model is not available in your region or your
- connection is blocking it. Please try again with a different
- connection.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Credentials Required
-
-
- {message}
-
-
-
-
- {credentials.map((cred, index) => {
- const schema = createSchemaFromCredentialInfo(cred);
- const isSelected = !!selectedCredentials[cred.provider];
-
- return (
-
-
- {isSelected ? (
-
- ) : (
-
- )}
-
- {cred.providerName}
-
-
-
-
- handleCredentialSelect(cred.provider, credMeta)
- }
- />
-
- );
- })}
-
-
-
-
-
-
-
-
- );
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/ChatInput.tsx b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/ChatInput.tsx
deleted file mode 100644
index c45e8dc250..0000000000
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/ChatInput.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Button } from "@/components/atoms/Button/Button";
-import { cn } from "@/lib/utils";
-import { ArrowUpIcon, StopIcon } from "@phosphor-icons/react";
-import { useChatInput } from "./useChatInput";
-
-export interface Props {
- onSend: (message: string) => void;
- disabled?: boolean;
- isStreaming?: boolean;
- onStop?: () => void;
- placeholder?: string;
- className?: string;
-}
-
-export function ChatInput({
- onSend,
- disabled = false,
- isStreaming = false,
- onStop,
- placeholder = "Type your message...",
- className,
-}: Props) {
- const inputId = "chat-input";
- const { value, handleKeyDown, handleSubmit, handleChange, hasMultipleLines } =
- useChatInput({
- onSend,
- disabled: disabled || isStreaming,
- maxRows: 4,
- inputId,
- });
-
- return (
-
- );
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatLoader/ChatLoader.tsx b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatLoader/ChatLoader.tsx
deleted file mode 100644
index 76cee8dbae..0000000000
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatLoader/ChatLoader.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export function ChatLoader() {
- return (
-
- );
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatLoadingState/ChatLoadingState.tsx b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatLoadingState/ChatLoadingState.tsx
deleted file mode 100644
index c0cdb33c50..0000000000
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatLoadingState/ChatLoadingState.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
-import { cn } from "@/lib/utils";
-
-export interface ChatLoadingStateProps {
- message?: string;
- className?: string;
-}
-
-export function ChatLoadingState({ className }: ChatLoadingStateProps) {
- return (
-
- );
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatMessage/ChatMessage.tsx b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatMessage/ChatMessage.tsx
deleted file mode 100644
index 0fee33dbc0..0000000000
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatMessage/ChatMessage.tsx
+++ /dev/null
@@ -1,399 +0,0 @@
-"use client";
-
-import { Button } from "@/components/atoms/Button/Button";
-import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
-import { cn } from "@/lib/utils";
-import {
- ArrowsClockwiseIcon,
- CheckCircleIcon,
- CheckIcon,
-} from "@phosphor-icons/react";
-import { useRouter } from "next/navigation";
-import { useCallback, useState } from "react";
-import { AgentCarouselMessage } from "../AgentCarouselMessage/AgentCarouselMessage";
-import { AIChatBubble } from "../AIChatBubble/AIChatBubble";
-import { AuthPromptWidget } from "../AuthPromptWidget/AuthPromptWidget";
-import { ChatCredentialsSetup } from "../ChatCredentialsSetup/ChatCredentialsSetup";
-import { ClarificationQuestionsWidget } from "../ClarificationQuestionsWidget/ClarificationQuestionsWidget";
-import { ExecutionStartedMessage } from "../ExecutionStartedMessage/ExecutionStartedMessage";
-import { MarkdownContent } from "../MarkdownContent/MarkdownContent";
-import { NoResultsMessage } from "../NoResultsMessage/NoResultsMessage";
-import { ToolCallMessage } from "../ToolCallMessage/ToolCallMessage";
-import { ToolResponseMessage } from "../ToolResponseMessage/ToolResponseMessage";
-import { UserChatBubble } from "../UserChatBubble/UserChatBubble";
-import { useChatMessage, type ChatMessageData } from "./useChatMessage";
-
-function stripInternalReasoning(content: string): string {
- const cleaned = content.replace(
- /[\s\S]*?<\/internal_reasoning>/gi,
- "",
- );
- return cleaned.replace(/\n{3,}/g, "\n\n").trim();
-}
-
-function getDisplayContent(message: ChatMessageData, isUser: boolean): string {
- if (message.type !== "message") return "";
- if (isUser) return message.content;
- return stripInternalReasoning(message.content);
-}
-
-export interface ChatMessageProps {
- message: ChatMessageData;
- messages?: ChatMessageData[];
- index?: number;
- isStreaming?: boolean;
- className?: string;
- onDismissLogin?: () => void;
- onDismissCredentials?: () => void;
- onSendMessage?: (content: string, isUserMessage?: boolean) => void;
- agentOutput?: ChatMessageData;
- isFinalMessage?: boolean;
-}
-
-export function ChatMessage({
- message,
- messages = [],
- index = -1,
- isStreaming = false,
- className,
- onDismissCredentials,
- onSendMessage,
- agentOutput,
- isFinalMessage = true,
-}: ChatMessageProps) {
- const { user } = useSupabase();
- const router = useRouter();
- const [copied, setCopied] = useState(false);
- const {
- isUser,
- isToolCall,
- isToolResponse,
- isLoginNeeded,
- isCredentialsNeeded,
- isClarificationNeeded,
- } = useChatMessage(message);
- const displayContent = getDisplayContent(message, isUser);
-
- const handleAllCredentialsComplete = useCallback(
- function handleAllCredentialsComplete() {
- // Send a user message that explicitly asks to retry the setup
- // This ensures the LLM calls get_required_setup_info again and proceeds with execution
- if (onSendMessage) {
- onSendMessage(
- "I've configured the required credentials. Please check if everything is ready and proceed with setting up the agent.",
- );
- }
- // Optionally dismiss the credentials prompt
- if (onDismissCredentials) {
- onDismissCredentials();
- }
- },
- [onSendMessage, onDismissCredentials],
- );
-
- function handleCancelCredentials() {
- // Dismiss the credentials prompt
- if (onDismissCredentials) {
- onDismissCredentials();
- }
- }
-
- function handleClarificationAnswers(answers: Record) {
- if (onSendMessage) {
- const contextMessage = Object.entries(answers)
- .map(([keyword, answer]) => `${keyword}: ${answer}`)
- .join("\n");
-
- onSendMessage(
- `I have the answers to your questions:\n\n${contextMessage}\n\nPlease proceed with creating the agent.`,
- );
- }
- }
-
- const handleCopy = useCallback(
- async function handleCopy() {
- if (message.type !== "message") return;
- if (!displayContent) return;
-
- try {
- await navigator.clipboard.writeText(displayContent);
- setCopied(true);
- setTimeout(() => setCopied(false), 2000);
- } catch (error) {
- console.error("Failed to copy:", error);
- }
- },
- [displayContent, message],
- );
-
- function isLongResponse(content: string): boolean {
- return content.split("\n").length > 5;
- }
-
- const handleTryAgain = useCallback(() => {
- if (message.type !== "message" || !onSendMessage) return;
- onSendMessage(message.content, message.role === "user");
- }, [message, onSendMessage]);
-
- const handleViewExecution = useCallback(() => {
- if (message.type === "execution_started" && message.libraryAgentLink) {
- router.push(message.libraryAgentLink);
- }
- }, [message, router]);
-
- // Render credentials needed messages
- if (isCredentialsNeeded && message.type === "credentials_needed") {
- return (
-
- );
- }
-
- if (isClarificationNeeded && message.type === "clarification_needed") {
- return (
-
- );
- }
-
- // Render login needed messages
- if (isLoginNeeded && message.type === "login_needed") {
- // If user is already logged in, show success message instead of auth prompt
- if (user) {
- return (
-
-
-
-
-
-
-
-
-
- Successfully Authenticated
-
-
- You're now signed in and ready to continue
-
-
-
-
-
-
-
-
- );
- }
-
- // Render no_results messages - use dedicated component, not ToolResponseMessage
- if (message.type === "no_results") {
- return (
-
-
-
- );
- }
-
- // Render agent_carousel messages - use dedicated component, not ToolResponseMessage
- if (message.type === "agent_carousel") {
- return (
-
- );
- }
-
- // Render execution_started messages - use dedicated component, not ToolResponseMessage
- if (message.type === "execution_started") {
- return (
-
-
-
- );
- }
-
- // Render tool response messages (but skip agent_output if it's being rendered inside assistant message)
- if (isToolResponse && message.type === "tool_response") {
- return (
-
-
-
- );
- }
-
- // Render regular chat messages
- if (message.type === "message") {
- return (
-
-
-
- {isUser ? (
-
-
-
- ) : (
-
-
- {agentOutput && agentOutput.type === "tool_response" && (
-
-
-
- )}
-
- )}
-
- {isUser && onSendMessage && (
-
- )}
- {!isUser && isFinalMessage && isLongResponse(displayContent) && (
-
- )}
-
-
-
-
- {/* Icon & Header */}
-
-
-
-
-
-
- Execution Started
-
-
- {message}
-
-
-
-
- {/* Details */}
-
-
- {agentName && (
-
-
- Agent:
-
-
- {agentName}
-
-
- )}
-
-
- Execution ID:
-
-
- {executionId.slice(0, 16)}...
-
-
-
-
-
- {/* Action Buttons */}
- {onViewExecution && (
-
- )}
-
-
-
-
- Your agent is now running. You can monitor its progress in the monitor
- page.
-
-
-
-
{
- const isInline = !className?.includes("language-");
- if (isInline) {
- return (
-
- {children}
-
- );
- }
- return (
-
- {children}
-
- );
- },
- pre: ({ children, ...props }) => (
-
- {children}
-
- ),
- a: ({ children, href, ...props }) => (
-
- {children}
-
- ),
- strong: ({ children, ...props }) => (
-
- {children}
-
- ),
- em: ({ children, ...props }) => (
-
- {children}
-
- ),
- del: ({ children, ...props }) => (
-
- {children}
-
- ),
- ul: ({ children, ...props }: ListProps) => (
-
- ),
- ol: ({ children, ...props }) => (
-
- {children}
-
- ),
- li: ({ children, ...props }: ListItemProps) => (
-
- {children}
-
- ),
- input: ({ ...props }: InputProps) => {
- if (props.type === "checkbox") {
- return (
-
- );
- }
- return ;
- },
- blockquote: ({ children, ...props }) => (
-
- {children}
-
- ),
- h1: ({ children, ...props }) => (
-
- {children}
-
- ),
- h2: ({ children, ...props }) => (
-
- {children}
-
- ),
- h3: ({ children, ...props }) => (
-
- {children}
-
- ),
- h4: ({ children, ...props }) => (
-
- {children}
-
- ),
- h5: ({ children, ...props }) => (
-
- {children}
-
- ),
- h6: ({ children, ...props }) => (
-
- {children}
-
- ),
- p: ({ children, ...props }) => (
-
- {children}
-
- ),
- hr: ({ ...props }) => (
-
- ),
- table: ({ children, ...props }) => (
-
- ),
- th: ({ children, ...props }) => (
-
- {children}
- |
- ),
- td: ({ children, ...props }) => (
-
- {children}
- |
- ),
- }}
- >
- {content}
-
-
- {/* Gradient flare background */}
-
-
- {children}
-
-
- {/* Top fade shadow */}
-
-
-
-
- {/* Render all persisted messages */}
- {(() => {
- const lastAssistantMessageIndex = findLastMessageIndex(
- messages,
- (msg) => msg.type === "message" && msg.role === "assistant",
- );
-
- const lastToolResponseIndex = findLastMessageIndex(
- messages,
- (msg) => msg.type === "tool_response",
- );
-
- return messages.map((message, index) => {
- // Skip agent_output tool_responses that should be rendered inside assistant messages
- if (shouldSkipAgentOutput(message, messages[index - 1])) {
- return null;
- }
-
- // Render last tool_response as AIChatBubble
- if (
- message.type === "tool_response" &&
- index === lastToolResponseIndex
- ) {
- return (
-
- );
- }
-
- return (
-
- );
- });
- })()}
-
- {/* Render thinking message when streaming but no chunks yet */}
- {isStreaming && streamingChunks.length === 0 &&
}
-
- {/* Render streaming message if active */}
- {isStreaming && streamingChunks.length > 0 && (
-
- )}
-
- {/* Invisible div to scroll to */}
-
-
-
-
- {/* Bottom fade shadow */}
-
-
-
-
- );
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/components/MessageList/components/MessageItem/MessageItem.tsx b/autogpt_platform/frontend/src/components/contextual/Chat/components/MessageList/components/MessageItem/MessageItem.tsx
deleted file mode 100644
index d455633b66..0000000000
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/MessageList/components/MessageItem/MessageItem.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { ChatMessage } from "../../../ChatMessage/ChatMessage";
-import type { ChatMessageData } from "../../../ChatMessage/useChatMessage";
-import { useMessageItem } from "./useMessageItem";
-
-export interface MessageItemProps {
- message: ChatMessageData;
- messages: ChatMessageData[];
- index: number;
- lastAssistantMessageIndex: number;
- isStreaming?: boolean;
- onSendMessage?: (content: string) => void;
-}
-
-export function MessageItem({
- message,
- messages,
- index,
- lastAssistantMessageIndex,
- isStreaming = false,
- onSendMessage,
-}: MessageItemProps) {
- const { messageToRender, agentOutput, isFinalMessage } = useMessageItem({
- message,
- messages,
- index,
- lastAssistantMessageIndex,
- });
-
- return (
-
- );
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/components/MessageList/components/MessageItem/useMessageItem.ts b/autogpt_platform/frontend/src/components/contextual/Chat/components/MessageList/components/MessageItem/useMessageItem.ts
deleted file mode 100644
index 65c2e02cc8..0000000000
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/MessageList/components/MessageItem/useMessageItem.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import type { ChatMessageData } from "../../../ChatMessage/useChatMessage";
-import { isAgentOutputResult, isToolOutputPattern } from "../../helpers";
-
-export interface UseMessageItemArgs {
- message: ChatMessageData;
- messages: ChatMessageData[];
- index: number;
- lastAssistantMessageIndex: number;
-}
-
-export function useMessageItem({
- message,
- messages,
- index,
- lastAssistantMessageIndex,
-}: UseMessageItemArgs) {
- let agentOutput: ChatMessageData | undefined;
- let messageToRender: ChatMessageData = message;
-
- // Check if assistant message follows a tool_call and looks like a tool output
- if (message.type === "message" && message.role === "assistant") {
- const prevMessage = messages[index - 1];
-
- // Check if next message is an agent_output tool_response to include in current assistant message
- const nextMessage = messages[index + 1];
- if (
- nextMessage &&
- nextMessage.type === "tool_response" &&
- nextMessage.result
- ) {
- if (isAgentOutputResult(nextMessage.result)) {
- agentOutput = nextMessage;
- }
- }
-
- // Only convert to tool_response if it follows a tool_call AND looks like a tool output
- if (prevMessage && prevMessage.type === "tool_call") {
- if (isToolOutputPattern(message.content)) {
- // Convert this message to a tool_response format for rendering
- messageToRender = {
- type: "tool_response",
- toolId: prevMessage.toolId,
- toolName: prevMessage.toolName,
- result: message.content,
- success: true,
- timestamp: message.timestamp,
- } as ChatMessageData;
- }
- }
- }
-
- const isFinalMessage =
- messageToRender.type !== "message" ||
- messageToRender.role !== "assistant" ||
- index === lastAssistantMessageIndex;
-
- return {
- messageToRender,
- agentOutput,
- isFinalMessage,
- };
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/components/MessageList/helpers.ts b/autogpt_platform/frontend/src/components/contextual/Chat/components/MessageList/helpers.ts
deleted file mode 100644
index f6731c66c7..0000000000
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/MessageList/helpers.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import type { ChatMessageData } from "../ChatMessage/useChatMessage";
-
-export function parseToolResult(
- result: unknown,
-): Record | null {
- try {
- return typeof result === "string"
- ? JSON.parse(result)
- : (result as Record);
- } catch {
- return null;
- }
-}
-
-export function isAgentOutputResult(result: unknown): boolean {
- const parsed = parseToolResult(result);
- return parsed?.type === "agent_output";
-}
-
-export function isToolOutputPattern(content: string): boolean {
- const normalizedContent = content.toLowerCase().trim();
-
- return (
- normalizedContent.startsWith("no agents found") ||
- normalizedContent.startsWith("no results found") ||
- normalizedContent.includes("no agents found matching") ||
- !!normalizedContent.match(/^no \w+ found/i) ||
- (content.length < 150 && normalizedContent.includes("try different")) ||
- (content.length < 200 &&
- !normalizedContent.includes("i'll") &&
- !normalizedContent.includes("let me") &&
- !normalizedContent.includes("i can") &&
- !normalizedContent.includes("i will"))
- );
-}
-
-export function formatToolResultValue(result: unknown): string {
- return typeof result === "string"
- ? result
- : result
- ? JSON.stringify(result, null, 2)
- : "";
-}
-
-export function findLastMessageIndex(
- messages: ChatMessageData[],
- predicate: (msg: ChatMessageData) => boolean,
-): number {
- for (let i = messages.length - 1; i >= 0; i--) {
- if (predicate(messages[i])) return i;
- }
- return -1;
-}
-
-export function shouldSkipAgentOutput(
- message: ChatMessageData,
- prevMessage: ChatMessageData | undefined,
-): boolean {
- if (message.type !== "tool_response" || !message.result) return false;
-
- const isAgentOutput = isAgentOutputResult(message.result);
- return (
- isAgentOutput &&
- !!prevMessage &&
- prevMessage.type === "message" &&
- prevMessage.role === "assistant"
- );
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/components/MessageList/useMessageList.ts b/autogpt_platform/frontend/src/components/contextual/Chat/components/MessageList/useMessageList.ts
deleted file mode 100644
index 3dcc75df3c..0000000000
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/MessageList/useMessageList.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useEffect, useRef, useCallback } from "react";
-
-interface UseMessageListArgs {
- messageCount: number;
- isStreaming: boolean;
-}
-
-export function useMessageList({
- messageCount,
- isStreaming,
-}: UseMessageListArgs) {
- const messagesEndRef = useRef(null);
- const messagesContainerRef = useRef(null);
-
- const scrollToBottom = useCallback(() => {
- messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
- }, []);
-
- useEffect(() => {
- scrollToBottom();
- }, [messageCount, isStreaming, scrollToBottom]);
-
- return {
- messagesEndRef,
- messagesContainerRef,
- scrollToBottom,
- };
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/components/NoResultsMessage/NoResultsMessage.tsx b/autogpt_platform/frontend/src/components/contextual/Chat/components/NoResultsMessage/NoResultsMessage.tsx
deleted file mode 100644
index b6adc8b93c..0000000000
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/NoResultsMessage/NoResultsMessage.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Text } from "@/components/atoms/Text/Text";
-import { cn } from "@/lib/utils";
-import { MagnifyingGlass, X } from "@phosphor-icons/react";
-
-export interface NoResultsMessageProps {
- message: string;
- suggestions?: string[];
- className?: string;
-}
-
-export function NoResultsMessage({
- message,
- suggestions = [],
- className,
-}: NoResultsMessageProps) {
- return (
-
- {/* Icon */}
-
-
- {/* Content */}
-
-
- No Results Found
-
-
- {message}
-
-
-
- {/* Suggestions */}
- {suggestions.length > 0 && (
-
-
- Try these suggestions:
-
-
- {suggestions.map((suggestion, index) => (
- -
- •
- {suggestion}
-
- ))}
-
-
- )}
-
-
-
-
- {title}
-
-
- {description}
-
-
-
- {actions.map((action) => {
- // Use slate theme for all cards
- const theme = {
- bg: "bg-slate-50/10",
- border: "border-slate-100",
- hoverBg: "hover:bg-slate-50/20",
- hoverBorder: "hover:border-slate-200",
- gradient: "from-slate-200/20 via-slate-300/10 to-transparent",
- text: "text-slate-900",
- hoverText: "group-hover:text-slate-900",
- };
-
- return (
-
- );
- })}
-
-
-
-
-
- Chat Sessions
-
-
-
-
- {isLoading ? (
-
-
- Loading sessions...
-
-
- ) : sessions.length === 0 ? (
-
-
- You don't have previously started chats
-
-
- ) : (
-
- {sessions.map((session) => {
- const isActive = session.id === currentSessionId;
- const updatedAt = session.updated_at
- ? formatDistanceToNow(new Date(session.updated_at), {
- addSuffix: true,
- })
- : "";
-
- return (
-
- );
- })}
-
- )}
-
-
-
-
-
- {showCoffeeMessage ? (
-
- This could take a few minutes, grab a coffee ☕️
-
- ) : showSlowLoader ? (
-
- Taking a bit more time...
-
- ) : (
-
- Thinking...
-
- )}
-
-
-
-
-
-
-
- {displayText}
-
-
-
- );
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/components/ToolCallMessage/helpers.ts b/autogpt_platform/frontend/src/components/contextual/Chat/components/ToolCallMessage/helpers.ts
deleted file mode 100644
index 2f9f50b455..0000000000
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ToolCallMessage/helpers.ts
+++ /dev/null
@@ -1,184 +0,0 @@
-import type { ToolArguments } from "@/types/chat";
-import {
- BrainIcon,
- EyeIcon,
- FileMagnifyingGlassIcon,
- FileTextIcon,
- MagnifyingGlassIcon,
- PackageIcon,
- PencilLineIcon,
- PlayIcon,
- PlusIcon,
- SquaresFourIcon,
- type Icon,
-} from "@phosphor-icons/react";
-
-/**
- * Maps internal tool names to human-friendly action phrases (present continuous).
- * Used for tool call messages to indicate what action is currently happening.
- *
- * @param toolName - The internal tool name from the backend
- * @returns A human-friendly action phrase in present continuous tense
- */
-export function getToolActionPhrase(toolName: string): string {
- const normalizedName = toolName.trim();
- if (!normalizedName) return "Executing";
- if (normalizedName.toLowerCase().startsWith("executing")) {
- return normalizedName;
- }
- if (normalizedName.toLowerCase() === "unknown") return "Executing";
- const toolActionPhrases: Record = {
- add_understanding: "Updating your business information",
- create_agent: "Creating a new agent",
- edit_agent: "Editing the agent",
- find_agent: "Looking for agents in the marketplace",
- find_block: "Searching for blocks",
- find_library_agent: "Looking for library agents",
- run_agent: "Running the agent",
- run_block: "Running the block",
- view_agent_output: "Retrieving agent output",
- search_docs: "Searching documentation",
- get_doc_page: "Loading documentation page",
- agent_carousel: "Looking for agents in the marketplace",
- execution_started: "Running the agent",
- get_required_setup_info: "Getting setup requirements",
- schedule_agent: "Scheduling the agent to run",
- };
-
- // Return mapped phrase or generate human-friendly fallback
- return (
- toolActionPhrases[toolName] ||
- toolName
- .replace(/_/g, " ")
- .replace(/\b\w/g, (l) => l.toUpperCase())
- .replace(/^/, "Executing ")
- );
-}
-
-/**
- * Formats tool call arguments into user-friendly text.
- * Handles different tool types and formats their arguments nicely.
- *
- * @param toolName - The tool name
- * @param args - The tool arguments
- * @returns Formatted user-friendly text to append to action phrase
- */
-export function formatToolArguments(
- toolName: string,
- args: ToolArguments | undefined,
-): string {
- if (!args || Object.keys(args).length === 0) {
- return "";
- }
-
- switch (toolName) {
- case "find_agent":
- case "find_library_agent":
- case "agent_carousel":
- if (args.query) {
- return ` matching "${args.query as string}"`;
- }
- break;
-
- case "find_block":
- if (args.query) {
- return ` matching "${args.query as string}"`;
- }
- break;
-
- case "search_docs":
- if (args.query) {
- return ` for "${args.query as string}"`;
- }
- break;
-
- case "get_doc_page":
- if (args.path) {
- return ` "${args.path as string}"`;
- }
- break;
-
- case "run_agent":
- if (args.username_agent_slug) {
- return ` "${args.username_agent_slug as string}"`;
- }
- if (args.library_agent_id) {
- return ` (library agent)`;
- }
- break;
-
- case "run_block":
- if (args.block_id) {
- return ` "${args.block_id as string}"`;
- }
- break;
-
- case "view_agent_output":
- if (args.library_agent_id) {
- return ` (library agent)`;
- }
- if (args.username_agent_slug) {
- return ` "${args.username_agent_slug as string}"`;
- }
- break;
-
- case "create_agent":
- case "edit_agent":
- if (args.name) {
- return ` "${args.name as string}"`;
- }
- break;
-
- case "add_understanding":
- const understandingFields = Object.entries(args)
- .filter(
- ([_, value]) => value !== null && value !== undefined && value !== "",
- )
- .map(([key, value]) => {
- if (key === "user_name" && typeof value === "string") {
- return `for ${value}`;
- }
- if (typeof value === "string") {
- return `${key}: ${value}`;
- }
- if (Array.isArray(value) && value.length > 0) {
- return `${key}: ${value.slice(0, 2).join(", ")}${value.length > 2 ? ` (+${value.length - 2} more)` : ""}`;
- }
- return key;
- });
- if (understandingFields.length > 0) {
- return ` ${understandingFields[0]}`;
- }
- break;
- }
-
- return "";
-}
-
-/**
- * Maps tool names to their corresponding Phosphor icon components.
- *
- * @param toolName - The tool name from the backend
- * @returns The Icon component for the tool
- */
-export function getToolIcon(toolName: string): Icon {
- const iconMap: Record = {
- add_understanding: BrainIcon,
- create_agent: PlusIcon,
- edit_agent: PencilLineIcon,
- find_agent: SquaresFourIcon,
- find_library_agent: MagnifyingGlassIcon,
- find_block: PackageIcon,
- run_agent: PlayIcon,
- run_block: PlayIcon,
- view_agent_output: EyeIcon,
- search_docs: FileMagnifyingGlassIcon,
- get_doc_page: FileTextIcon,
- agent_carousel: MagnifyingGlassIcon,
- execution_started: PlayIcon,
- get_required_setup_info: SquaresFourIcon,
- schedule_agent: PlayIcon,
- };
-
- return iconMap[toolName] || SquaresFourIcon;
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/components/ToolResponseMessage/ToolResponseMessage.tsx b/autogpt_platform/frontend/src/components/contextual/Chat/components/ToolResponseMessage/ToolResponseMessage.tsx
deleted file mode 100644
index 27da02beb8..0000000000
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ToolResponseMessage/ToolResponseMessage.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Text } from "@/components/atoms/Text/Text";
-import { cn } from "@/lib/utils";
-import type { ToolResult } from "@/types/chat";
-import { WarningCircleIcon } from "@phosphor-icons/react";
-import { AIChatBubble } from "../AIChatBubble/AIChatBubble";
-import { MarkdownContent } from "../MarkdownContent/MarkdownContent";
-import {
- formatToolResponse,
- getErrorMessage,
- isErrorResponse,
-} from "./helpers";
-
-export interface ToolResponseMessageProps {
- toolId?: string;
- toolName: string;
- result?: ToolResult;
- success?: boolean;
- className?: string;
-}
-
-export function ToolResponseMessage({
- toolId: _toolId,
- toolName,
- result,
- success: _success,
- className,
-}: ToolResponseMessageProps) {
- if (isErrorResponse(result)) {
- const errorMessage = getErrorMessage(result);
- return (
-
-
-
-
- {errorMessage}
-
-
-
- );
- }
-
- const formattedText = formatToolResponse(result, toolName);
-
- return (
-
-
-
- );
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/components/ToolResponseMessage/helpers.ts b/autogpt_platform/frontend/src/components/contextual/Chat/components/ToolResponseMessage/helpers.ts
deleted file mode 100644
index 400f32936e..0000000000
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ToolResponseMessage/helpers.ts
+++ /dev/null
@@ -1,295 +0,0 @@
-function stripInternalReasoning(content: string): string {
- return content
- .replace(/[\s\S]*?<\/internal_reasoning>/gi, "")
- .replace(/[\s\S]*?<\/thinking>/gi, "")
- .replace(/\n{3,}/g, "\n\n")
- .trim();
-}
-
-export function isErrorResponse(result: unknown): boolean {
- if (typeof result === "string") {
- const lower = result.toLowerCase();
- return (
- lower.startsWith("error:") ||
- lower.includes("not found") ||
- lower.includes("does not exist") ||
- lower.includes("failed to") ||
- lower.includes("unable to")
- );
- }
- if (typeof result === "object" && result !== null) {
- const response = result as Record;
- return response.type === "error" || response.error !== undefined;
- }
- return false;
-}
-
-export function getErrorMessage(result: unknown): string {
- if (typeof result === "string") {
- return stripInternalReasoning(result.replace(/^error:\s*/i, ""));
- }
- if (typeof result === "object" && result !== null) {
- const response = result as Record;
- if (response.error) return stripInternalReasoning(String(response.error));
- if (response.message)
- return stripInternalReasoning(String(response.message));
- }
- return "An error occurred";
-}
-
-function getToolCompletionPhrase(toolName: string): string {
- const toolCompletionPhrases: Record = {
- add_understanding: "Updated your business information",
- create_agent: "Created the agent",
- edit_agent: "Updated the agent",
- find_agent: "Found agents in the marketplace",
- find_block: "Found blocks",
- find_library_agent: "Found library agents",
- run_agent: "Started agent execution",
- run_block: "Executed the block",
- view_agent_output: "Retrieved agent output",
- search_docs: "Found documentation",
- get_doc_page: "Loaded documentation page",
- };
-
- // Return mapped phrase or generate human-friendly fallback
- return (
- toolCompletionPhrases[toolName] ||
- `Completed ${toolName.replace(/_/g, " ").replace("...", "")}`
- );
-}
-
-export function formatToolResponse(result: unknown, toolName: string): string {
- if (typeof result === "string") {
- const trimmed = result.trim();
- if (trimmed.startsWith("{") && trimmed.endsWith("}")) {
- try {
- const parsed = JSON.parse(trimmed);
- return formatToolResponse(parsed, toolName);
- } catch {
- return stripInternalReasoning(trimmed);
- }
- }
- return stripInternalReasoning(result);
- }
-
- if (typeof result !== "object" || result === null) {
- return String(result);
- }
-
- const response = result as Record;
-
- // Handle different response types
- const responseType = response.type as string | undefined;
-
- if (!responseType) {
- if (response.message) {
- return String(response.message);
- }
- return getToolCompletionPhrase(toolName);
- }
-
- switch (responseType) {
- case "agents_found":
- const agents = (response.agents as Array<{ name: string }>) || [];
- const count =
- typeof response.count === "number" && !isNaN(response.count)
- ? response.count
- : agents.length;
- if (count === 0) {
- return "No agents found matching your search.";
- }
- return `Found ${count} agent${count === 1 ? "" : "s"}: ${agents
- .slice(0, 3)
- .map((a) => a.name)
- .join(", ")}${count > 3 ? ` and ${count - 3} more` : ""}`;
-
- case "agent_details":
- const agent = response.agent as { name: string; description?: string };
- if (agent) {
- return `Agent: ${agent.name}${agent.description ? `\n\n${agent.description}` : ""}`;
- }
- break;
-
- case "block_list":
- const blocks = (response.blocks as Array<{ name: string }>) || [];
- const blockCount =
- typeof response.count === "number" && !isNaN(response.count)
- ? response.count
- : blocks.length;
- if (blockCount === 0) {
- return "No blocks found matching your search.";
- }
- return `Found ${blockCount} block${blockCount === 1 ? "" : "s"}: ${blocks
- .slice(0, 3)
- .map((b) => b.name)
- .join(", ")}${blockCount > 3 ? ` and ${blockCount - 3} more` : ""}`;
-
- case "block_output":
- const blockName = (response.block_name as string) || "Block";
- const outputs = response.outputs as Record | undefined;
- if (outputs && Object.keys(outputs).length > 0) {
- const outputKeys = Object.keys(outputs);
- return `${blockName} executed successfully. Outputs: ${outputKeys.join(", ")}`;
- }
- return `${blockName} executed successfully.`;
-
- case "doc_search_results":
- const docResults = (response.results as Array<{ title: string }>) || [];
- const docCount =
- typeof response.count === "number" && !isNaN(response.count)
- ? response.count
- : docResults.length;
- if (docCount === 0) {
- return "No documentation found matching your search.";
- }
- return `Found ${docCount} documentation result${docCount === 1 ? "" : "s"}: ${docResults
- .slice(0, 3)
- .map((r) => r.title)
- .join(", ")}${docCount > 3 ? ` and ${docCount - 3} more` : ""}`;
-
- case "doc_page":
- const title = (response.title as string) || "Documentation";
- const content = (response.content as string) || "";
- if (content) {
- const preview = content.substring(0, 200).trim();
- return `${title}\n\n${preview}${content.length > 200 ? "..." : ""}`;
- }
- return title;
-
- case "understanding_updated":
- const currentUnderstanding = response.current_understanding as
- | Record
- | undefined;
- const fields = (response.updated_fields as string[]) || [];
-
- if (response.message && typeof response.message === "string") {
- let message = response.message;
- if (currentUnderstanding) {
- for (const [key, value] of Object.entries(currentUnderstanding)) {
- if (value !== null && value !== undefined && value !== "") {
- const placeholder = key;
- const actualValue = String(value);
- message = message.replace(
- new RegExp(`\\b${placeholder}\\b`, "g"),
- actualValue,
- );
- }
- }
- }
- return message;
- }
-
- if (
- currentUnderstanding &&
- Object.keys(currentUnderstanding).length > 0
- ) {
- const understandingEntries = Object.entries(currentUnderstanding)
- .filter(
- ([_, value]) =>
- value !== null && value !== undefined && value !== "",
- )
- .map(([key, value]) => {
- if (key === "user_name" && typeof value === "string") {
- return `Updated information for ${value}`;
- }
- return `${key}: ${String(value)}`;
- });
- if (understandingEntries.length > 0) {
- return understandingEntries[0];
- }
- }
- if (fields.length > 0) {
- return `Updated business information: ${fields.join(", ")}`;
- }
- return "Updated your business information.";
-
- case "agent_saved":
- const agentName = (response.agent_name as string) || "Agent";
- return `Successfully saved "${agentName}" to your library.`;
-
- case "agent_preview":
- const previewAgentName = (response.agent_name as string) || "Agent";
- const nodeCount = (response.node_count as number) || 0;
- const linkCount = (response.link_count as number) || 0;
- const description = (response.description as string) || "";
- let previewText = `Preview: "${previewAgentName}"`;
- if (description) {
- previewText += `\n\n${description}`;
- }
- previewText += `\n\n${nodeCount} node${nodeCount === 1 ? "" : "s"}, ${linkCount} link${linkCount === 1 ? "" : "s"}`;
- return previewText;
-
- case "clarification_needed":
- const questions =
- (response.questions as Array<{ question: string }>) || [];
- if (questions.length === 0) {
- return response.message
- ? String(response.message)
- : "I need more information to proceed.";
- }
- if (questions.length === 1) {
- return questions[0].question;
- }
- return `I need clarification on ${questions.length} points:\n\n${questions
- .map((q, i) => `${i + 1}. ${q.question}`)
- .join("\n")}`;
-
- case "agent_output":
- if (response.message) {
- return String(response.message);
- }
- const outputAgentName = (response.agent_name as string) || "Agent";
- const execution = response.execution as
- | {
- status?: string;
- outputs?: Record;
- }
- | undefined;
- if (execution) {
- const status = execution.status || "completed";
- const outputs = execution.outputs || {};
- const outputKeys = Object.keys(outputs);
- if (outputKeys.length > 0) {
- return `${outputAgentName} execution ${status}. Outputs: ${outputKeys.join(", ")}`;
- }
- return `${outputAgentName} execution ${status}.`;
- }
- return `${outputAgentName} output retrieved.`;
-
- case "execution_started":
- const execAgentName = (response.graph_name as string) || "Agent";
- if (response.message) {
- return String(response.message);
- }
- return `Started execution of "${execAgentName}".`;
-
- case "error":
- const errorMsg =
- (response.error as string) || response.message || "An error occurred";
- return `Error: ${errorMsg}`;
-
- case "no_results":
- const suggestions = (response.suggestions as string[]) || [];
- let noResultsText = (response.message as string) || "No results found.";
- if (suggestions.length > 0) {
- noResultsText += `\n\nSuggestions: ${suggestions.join(", ")}`;
- }
- return noResultsText;
-
- default:
- // Try to extract a message field
- if (response.message) {
- return String(response.message);
- }
- // Fallback: try to stringify nicely
- if (Object.keys(response).length === 0) {
- return getToolCompletionPhrase(toolName);
- }
- // If we have a response object but no recognized type, try to format it nicely
- // Don't return raw JSON - return a completion phrase instead
- return getToolCompletionPhrase(toolName);
- }
-
- return getToolCompletionPhrase(toolName);
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/components/UserChatBubble/UserChatBubble.tsx b/autogpt_platform/frontend/src/components/contextual/Chat/components/UserChatBubble/UserChatBubble.tsx
deleted file mode 100644
index 46459ff894..0000000000
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/UserChatBubble/UserChatBubble.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { cn } from "@/lib/utils";
-import { ReactNode } from "react";
-
-export interface UserChatBubbleProps {
- children: ReactNode;
- className?: string;
-}
-
-export function UserChatBubble({ children, className }: UserChatBubbleProps) {
- return (
-
- );
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/stream-executor.ts b/autogpt_platform/frontend/src/components/contextual/Chat/stream-executor.ts
deleted file mode 100644
index b0d970c286..0000000000
--- a/autogpt_platform/frontend/src/components/contextual/Chat/stream-executor.ts
+++ /dev/null
@@ -1,142 +0,0 @@
-import type {
- ActiveStream,
- StreamChunk,
- VercelStreamChunk,
-} from "./chat-types";
-import {
- INITIAL_RETRY_DELAY,
- MAX_RETRIES,
- normalizeStreamChunk,
- parseSSELine,
-} from "./stream-utils";
-
-function notifySubscribers(stream: ActiveStream, chunk: StreamChunk) {
- stream.chunks.push(chunk);
- for (const callback of stream.onChunkCallbacks) {
- try {
- callback(chunk);
- } catch (err) {
- console.warn("[StreamExecutor] Subscriber callback error:", err);
- }
- }
-}
-
-export async function executeStream(
- stream: ActiveStream,
- message: string,
- isUserMessage: boolean,
- context?: { url: string; content: string },
- retryCount: number = 0,
-): Promise {
- const { sessionId, abortController } = stream;
-
- try {
- const url = `/api/chat/sessions/${sessionId}/stream`;
- const body = JSON.stringify({
- message,
- is_user_message: isUserMessage,
- context: context || null,
- });
-
- const response = await fetch(url, {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- Accept: "text/event-stream",
- },
- body,
- signal: abortController.signal,
- });
-
- if (!response.ok) {
- const errorText = await response.text();
- throw new Error(errorText || `HTTP ${response.status}`);
- }
-
- if (!response.body) {
- throw new Error("Response body is null");
- }
-
- const reader = response.body.getReader();
- const decoder = new TextDecoder();
- let buffer = "";
-
- while (true) {
- const { done, value } = await reader.read();
-
- if (done) {
- notifySubscribers(stream, { type: "stream_end" });
- stream.status = "completed";
- return;
- }
-
- buffer += decoder.decode(value, { stream: true });
- const lines = buffer.split("\n");
- buffer = lines.pop() || "";
-
- for (const line of lines) {
- const data = parseSSELine(line);
- if (data !== null) {
- if (data === "[DONE]") {
- notifySubscribers(stream, { type: "stream_end" });
- stream.status = "completed";
- return;
- }
-
- try {
- const rawChunk = JSON.parse(data) as
- | StreamChunk
- | VercelStreamChunk;
- const chunk = normalizeStreamChunk(rawChunk);
- if (!chunk) continue;
-
- notifySubscribers(stream, chunk);
-
- if (chunk.type === "stream_end") {
- stream.status = "completed";
- return;
- }
-
- if (chunk.type === "error") {
- stream.status = "error";
- stream.error = new Error(
- chunk.message || chunk.content || "Stream error",
- );
- return;
- }
- } catch (err) {
- console.warn("[StreamExecutor] Failed to parse SSE chunk:", err);
- }
- }
- }
- }
- } catch (err) {
- if (err instanceof Error && err.name === "AbortError") {
- notifySubscribers(stream, { type: "stream_end" });
- stream.status = "completed";
- return;
- }
-
- if (retryCount < MAX_RETRIES) {
- const retryDelay = INITIAL_RETRY_DELAY * Math.pow(2, retryCount);
- console.log(
- `[StreamExecutor] Retrying in ${retryDelay}ms (attempt ${retryCount + 1}/${MAX_RETRIES})`,
- );
- await new Promise((resolve) => setTimeout(resolve, retryDelay));
- return executeStream(
- stream,
- message,
- isUserMessage,
- context,
- retryCount + 1,
- );
- }
-
- stream.status = "error";
- stream.error = err instanceof Error ? err : new Error("Stream failed");
- notifySubscribers(stream, {
- type: "error",
- message: stream.error.message,
- });
- }
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/stream-utils.ts b/autogpt_platform/frontend/src/components/contextual/Chat/stream-utils.ts
deleted file mode 100644
index 4100926e79..0000000000
--- a/autogpt_platform/frontend/src/components/contextual/Chat/stream-utils.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import type { ToolArguments, ToolResult } from "@/types/chat";
-import type { StreamChunk, VercelStreamChunk } from "./chat-types";
-
-const LEGACY_STREAM_TYPES = new Set([
- "text_chunk",
- "text_ended",
- "tool_call",
- "tool_call_start",
- "tool_response",
- "login_needed",
- "need_login",
- "credentials_needed",
- "error",
- "usage",
- "stream_end",
-]);
-
-export function isLegacyStreamChunk(
- chunk: StreamChunk | VercelStreamChunk,
-): chunk is StreamChunk {
- return LEGACY_STREAM_TYPES.has(chunk.type as StreamChunk["type"]);
-}
-
-export function normalizeStreamChunk(
- chunk: StreamChunk | VercelStreamChunk,
-): StreamChunk | null {
- if (isLegacyStreamChunk(chunk)) return chunk;
-
- switch (chunk.type) {
- case "text-delta":
- return { type: "text_chunk", content: chunk.delta };
- case "text-end":
- return { type: "text_ended" };
- case "tool-input-available":
- return {
- type: "tool_call_start",
- tool_id: chunk.toolCallId,
- tool_name: chunk.toolName,
- arguments: chunk.input as ToolArguments,
- };
- case "tool-output-available":
- return {
- type: "tool_response",
- tool_id: chunk.toolCallId,
- tool_name: chunk.toolName,
- result: chunk.output as ToolResult,
- success: chunk.success ?? true,
- };
- case "usage":
- return {
- type: "usage",
- promptTokens: chunk.promptTokens,
- completionTokens: chunk.completionTokens,
- totalTokens: chunk.totalTokens,
- };
- case "error":
- return {
- type: "error",
- message: chunk.errorText,
- code: chunk.code,
- details: chunk.details,
- };
- case "finish":
- return { type: "stream_end" };
- case "start":
- case "text-start":
- return null;
- case "tool-input-start":
- return {
- type: "tool_call_start",
- tool_id: chunk.toolCallId,
- tool_name: chunk.toolName,
- arguments: {},
- };
- }
-}
-
-export const MAX_RETRIES = 3;
-export const INITIAL_RETRY_DELAY = 1000;
-
-export function parseSSELine(line: string): string | null {
- if (line.startsWith("data: ")) return line.slice(6);
- return null;
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/useChat.ts b/autogpt_platform/frontend/src/components/contextual/Chat/useChat.ts
deleted file mode 100644
index f6b2031059..0000000000
--- a/autogpt_platform/frontend/src/components/contextual/Chat/useChat.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-"use client";
-
-import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
-import { useEffect, useRef, useState } from "react";
-import { useChatSession } from "./useChatSession";
-import { useChatStream } from "./useChatStream";
-
-interface UseChatArgs {
- urlSessionId?: string | null;
-}
-
-export function useChat({ urlSessionId }: UseChatArgs = {}) {
- const hasClaimedSessionRef = useRef(false);
- const { user } = useSupabase();
- const { sendMessage: sendStreamMessage } = useChatStream();
- const [showLoader, setShowLoader] = useState(false);
- const {
- session,
- sessionId: sessionIdFromHook,
- messages,
- isLoading,
- isCreating,
- error,
- isSessionNotFound,
- createSession,
- claimSession,
- clearSession: clearSessionBase,
- loadSession,
- } = useChatSession({
- urlSessionId,
- autoCreate: false,
- });
-
- useEffect(
- function autoClaimSession() {
- if (
- session &&
- !session.user_id &&
- user &&
- !hasClaimedSessionRef.current &&
- !isLoading &&
- sessionIdFromHook
- ) {
- hasClaimedSessionRef.current = true;
- claimSession(sessionIdFromHook)
- .then(() => {
- sendStreamMessage(
- sessionIdFromHook,
- "User has successfully logged in.",
- () => {},
- false,
- ).catch(() => {});
- })
- .catch(() => {
- hasClaimedSessionRef.current = false;
- });
- }
- },
- [
- session,
- user,
- isLoading,
- sessionIdFromHook,
- claimSession,
- sendStreamMessage,
- ],
- );
-
- useEffect(
- function showLoaderWithDelay() {
- if (isLoading || isCreating) {
- const timer = setTimeout(() => setShowLoader(true), 300);
- return () => clearTimeout(timer);
- }
- setShowLoader(false);
- },
- [isLoading, isCreating],
- );
-
- function clearSession() {
- clearSessionBase();
- hasClaimedSessionRef.current = false;
- }
-
- return {
- session,
- messages,
- isLoading,
- isCreating,
- error,
- isSessionNotFound,
- createSession,
- clearSession,
- loadSession,
- sessionId: sessionIdFromHook,
- showLoader,
- };
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/useChatSession.ts b/autogpt_platform/frontend/src/components/contextual/Chat/useChatSession.ts
deleted file mode 100644
index dd743874f7..0000000000
--- a/autogpt_platform/frontend/src/components/contextual/Chat/useChatSession.ts
+++ /dev/null
@@ -1,274 +0,0 @@
-import {
- getGetV2GetSessionQueryKey,
- getGetV2GetSessionQueryOptions,
- getGetV2ListSessionsQueryKey,
- postV2CreateSession,
- useGetV2GetSession,
- usePatchV2SessionAssignUser,
- usePostV2CreateSession,
-} from "@/app/api/__generated__/endpoints/chat/chat";
-import type { SessionDetailResponse } from "@/app/api/__generated__/models/sessionDetailResponse";
-import { okData } from "@/app/api/helpers";
-import { isValidUUID } from "@/lib/utils";
-import { useQueryClient } from "@tanstack/react-query";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { toast } from "sonner";
-
-interface UseChatSessionArgs {
- urlSessionId?: string | null;
- autoCreate?: boolean;
-}
-
-export function useChatSession({
- urlSessionId,
- autoCreate = false,
-}: UseChatSessionArgs = {}) {
- const queryClient = useQueryClient();
- const [sessionId, setSessionId] = useState(null);
- const [error, setError] = useState(null);
- const justCreatedSessionIdRef = useRef(null);
-
- useEffect(() => {
- if (urlSessionId) {
- if (!isValidUUID(urlSessionId)) {
- console.error("Invalid session ID format:", urlSessionId);
- toast.error("Invalid session ID", {
- description:
- "The session ID in the URL is not valid. Starting a new session...",
- });
- setSessionId(null);
- return;
- }
- setSessionId(urlSessionId);
- } else if (autoCreate) {
- setSessionId(null);
- } else {
- setSessionId(null);
- }
- }, [urlSessionId, autoCreate]);
-
- const { isPending: isCreating, error: createError } =
- usePostV2CreateSession();
-
- const {
- data: sessionData,
- isLoading: isLoadingSession,
- error: loadError,
- refetch,
- } = useGetV2GetSession(sessionId || "", {
- query: {
- enabled: !!sessionId,
- select: okData,
- retry: shouldRetrySessionLoad,
- retryDelay: getSessionRetryDelay,
- },
- });
-
- const { mutateAsync: claimSessionMutation } = usePatchV2SessionAssignUser();
-
- const session = useMemo(() => {
- if (sessionData) return sessionData;
-
- if (sessionId && justCreatedSessionIdRef.current === sessionId) {
- return {
- id: sessionId,
- user_id: null,
- messages: [],
- created_at: new Date().toISOString(),
- updated_at: new Date().toISOString(),
- } as SessionDetailResponse;
- }
- return null;
- }, [sessionData, sessionId]);
-
- const messages = session?.messages || [];
- const isLoading = isCreating || isLoadingSession;
-
- useEffect(() => {
- if (createError) {
- setError(
- createError instanceof Error
- ? createError
- : new Error("Failed to create session"),
- );
- } else if (loadError) {
- setError(
- loadError instanceof Error
- ? loadError
- : new Error("Failed to load session"),
- );
- } else {
- setError(null);
- }
- }, [createError, loadError]);
-
- useEffect(
- function refreshSessionsListOnLoad() {
- if (sessionId && sessionData && !isLoadingSession) {
- queryClient.invalidateQueries({
- queryKey: getGetV2ListSessionsQueryKey(),
- });
- }
- },
- [sessionId, sessionData, isLoadingSession, queryClient],
- );
-
- async function createSession() {
- try {
- setError(null);
- const response = await postV2CreateSession({
- body: JSON.stringify({}),
- });
- if (response.status !== 200) {
- throw new Error("Failed to create session");
- }
- const newSessionId = response.data.id;
- setSessionId(newSessionId);
- justCreatedSessionIdRef.current = newSessionId;
- setTimeout(() => {
- if (justCreatedSessionIdRef.current === newSessionId) {
- justCreatedSessionIdRef.current = null;
- }
- }, 10000);
- return newSessionId;
- } catch (err) {
- const error =
- err instanceof Error ? err : new Error("Failed to create session");
- setError(error);
- toast.error("Failed to create chat session", {
- description: error.message,
- });
- throw error;
- }
- }
-
- async function loadSession(id: string) {
- try {
- setError(null);
- // Invalidate the query cache for this session to force a fresh fetch
- await queryClient.invalidateQueries({
- queryKey: getGetV2GetSessionQueryKey(id),
- });
- // Set sessionId after invalidation to ensure the hook refetches
- setSessionId(id);
- // Force fetch with fresh data (bypass cache)
- const queryOptions = getGetV2GetSessionQueryOptions(id, {
- query: {
- staleTime: 0, // Force fresh fetch
- retry: shouldRetrySessionLoad,
- retryDelay: getSessionRetryDelay,
- },
- });
- const result = await queryClient.fetchQuery(queryOptions);
- if (!result || ("status" in result && result.status !== 200)) {
- console.warn("Session not found on server");
- setSessionId(null);
- throw new Error("Session not found");
- }
- } catch (err) {
- const error =
- err instanceof Error ? err : new Error("Failed to load session");
- setError(error);
- throw error;
- }
- }
-
- async function refreshSession() {
- if (!sessionId) return;
- try {
- setError(null);
- await refetch();
- } catch (err) {
- const error =
- err instanceof Error ? err : new Error("Failed to refresh session");
- setError(error);
- throw error;
- }
- }
-
- async function claimSession(id: string) {
- try {
- setError(null);
- await claimSessionMutation({ sessionId: id });
- if (justCreatedSessionIdRef.current === id) {
- justCreatedSessionIdRef.current = null;
- }
- await queryClient.invalidateQueries({
- queryKey: getGetV2GetSessionQueryKey(id),
- });
- await refetch();
- toast.success("Session claimed successfully", {
- description: "Your chat history has been saved to your account",
- });
- } catch (err: unknown) {
- const error =
- err instanceof Error ? err : new Error("Failed to claim session");
- const is404 =
- (typeof err === "object" &&
- err !== null &&
- "status" in err &&
- err.status === 404) ||
- (typeof err === "object" &&
- err !== null &&
- "response" in err &&
- typeof err.response === "object" &&
- err.response !== null &&
- "status" in err.response &&
- err.response.status === 404);
- if (!is404) {
- setError(error);
- toast.error("Failed to claim session", {
- description: error.message || "Unable to claim session",
- });
- }
- throw error;
- }
- }
-
- function clearSession() {
- setSessionId(null);
- setError(null);
- justCreatedSessionIdRef.current = null;
- }
-
- return {
- session,
- sessionId,
- messages,
- isLoading,
- isCreating,
- error,
- isSessionNotFound: isNotFoundError(loadError),
- createSession,
- loadSession,
- refreshSession,
- claimSession,
- clearSession,
- };
-}
-
-function isNotFoundError(error: unknown): boolean {
- if (!error || typeof error !== "object") return false;
- if ("status" in error && error.status === 404) return true;
- if (
- "response" in error &&
- typeof error.response === "object" &&
- error.response !== null &&
- "status" in error.response &&
- error.response.status === 404
- ) {
- return true;
- }
- return false;
-}
-
-function shouldRetrySessionLoad(failureCount: number, error: unknown): boolean {
- if (!isNotFoundError(error)) return false;
- return failureCount <= 2;
-}
-
-function getSessionRetryDelay(attemptIndex: number): number {
- if (attemptIndex === 0) return 3000;
- if (attemptIndex === 1) return 5000;
- return 0;
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/useChatStream.ts b/autogpt_platform/frontend/src/components/contextual/Chat/useChatStream.ts
deleted file mode 100644
index 5a9f637457..0000000000
--- a/autogpt_platform/frontend/src/components/contextual/Chat/useChatStream.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-import { toast } from "sonner";
-import { useChatStore } from "./chat-store";
-import type { StreamChunk } from "./chat-types";
-
-export type { StreamChunk } from "./chat-types";
-
-export function useChatStream() {
- const [isStreaming, setIsStreaming] = useState(false);
- const [error, setError] = useState(null);
- const currentSessionIdRef = useRef(null);
- const onChunkCallbackRef = useRef<((chunk: StreamChunk) => void) | null>(
- null,
- );
-
- const stopStream = useChatStore((s) => s.stopStream);
- const unregisterActiveSession = useChatStore(
- (s) => s.unregisterActiveSession,
- );
- const isSessionActive = useChatStore((s) => s.isSessionActive);
- const onStreamComplete = useChatStore((s) => s.onStreamComplete);
- const getCompletedStream = useChatStore((s) => s.getCompletedStream);
- const registerActiveSession = useChatStore((s) => s.registerActiveSession);
- const startStream = useChatStore((s) => s.startStream);
- const getStreamStatus = useChatStore((s) => s.getStreamStatus);
-
- function stopStreaming(sessionId?: string) {
- const targetSession = sessionId || currentSessionIdRef.current;
- if (targetSession) {
- stopStream(targetSession);
- unregisterActiveSession(targetSession);
- }
- setIsStreaming(false);
- }
-
- useEffect(() => {
- return function cleanup() {
- const sessionId = currentSessionIdRef.current;
- if (sessionId && !isSessionActive(sessionId)) {
- stopStream(sessionId);
- }
- currentSessionIdRef.current = null;
- onChunkCallbackRef.current = null;
- };
- }, []);
-
- useEffect(() => {
- const unsubscribe = onStreamComplete(
- function handleStreamComplete(completedSessionId) {
- if (completedSessionId !== currentSessionIdRef.current) return;
-
- setIsStreaming(false);
- const completed = getCompletedStream(completedSessionId);
- if (completed?.error) {
- setError(completed.error);
- }
- unregisterActiveSession(completedSessionId);
- },
- );
-
- return unsubscribe;
- }, []);
-
- async function sendMessage(
- sessionId: string,
- message: string,
- onChunk: (chunk: StreamChunk) => void,
- isUserMessage: boolean = true,
- context?: { url: string; content: string },
- ) {
- const previousSessionId = currentSessionIdRef.current;
- if (previousSessionId && previousSessionId !== sessionId) {
- stopStreaming(previousSessionId);
- }
-
- currentSessionIdRef.current = sessionId;
- onChunkCallbackRef.current = onChunk;
- setIsStreaming(true);
- setError(null);
-
- registerActiveSession(sessionId);
-
- try {
- await startStream(sessionId, message, isUserMessage, context, onChunk);
-
- const status = getStreamStatus(sessionId);
- if (status === "error") {
- const completed = getCompletedStream(sessionId);
- if (completed?.error) {
- setError(completed.error);
- toast.error("Connection Failed", {
- description: "Unable to connect to chat service. Please try again.",
- });
- throw completed.error;
- }
- }
- } catch (err) {
- const streamError =
- err instanceof Error ? err : new Error("Failed to start stream");
- setError(streamError);
- throw streamError;
- } finally {
- setIsStreaming(false);
- }
- }
-
- return {
- isStreaming,
- error,
- sendMessage,
- stopStreaming,
- };
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/usePageContext.ts b/autogpt_platform/frontend/src/components/contextual/Chat/usePageContext.ts
deleted file mode 100644
index c567422a5c..0000000000
--- a/autogpt_platform/frontend/src/components/contextual/Chat/usePageContext.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { useCallback } from "react";
-
-export interface PageContext {
- url: string;
- content: string;
-}
-
-const MAX_CONTENT_CHARS = 10000;
-
-/**
- * Hook to capture the current page context (URL + full page content)
- * Privacy-hardened: removes sensitive inputs and enforces content size limits
- */
-export function usePageContext() {
- const capturePageContext = useCallback((): PageContext => {
- if (typeof window === "undefined" || typeof document === "undefined") {
- return { url: "", content: "" };
- }
-
- const url = window.location.href;
-
- // Clone document to avoid modifying the original
- const clone = document.cloneNode(true) as Document;
-
- // Remove script, style, and noscript elements
- const scripts = clone.querySelectorAll("script, style, noscript");
- scripts.forEach((el) => el.remove());
-
- // Remove sensitive elements and their content
- const sensitiveSelectors = [
- "input",
- "textarea",
- "[contenteditable]",
- 'input[type="password"]',
- 'input[type="email"]',
- 'input[type="tel"]',
- 'input[type="search"]',
- 'input[type="hidden"]',
- "form",
- "[data-sensitive]",
- "[data-sensitive='true']",
- ];
-
- sensitiveSelectors.forEach((selector) => {
- const elements = clone.querySelectorAll(selector);
- elements.forEach((el) => {
- // For form elements, remove the entire element
- if (el.tagName === "FORM") {
- el.remove();
- } else {
- // For inputs and textareas, clear their values but keep the element structure
- if (
- el instanceof HTMLInputElement ||
- el instanceof HTMLTextAreaElement
- ) {
- el.value = "";
- el.textContent = "";
- } else {
- // For other sensitive elements, remove them entirely
- el.remove();
- }
- }
- });
- });
-
- // Strip any remaining input values that might have been missed
- const allInputs = clone.querySelectorAll("input, textarea");
- allInputs.forEach((el) => {
- if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
- el.value = "";
- el.textContent = "";
- }
- });
-
- // Get text content from body
- const body = clone.body;
- const content = body?.textContent || body?.innerText || "";
-
- // Clean up whitespace
- let cleanedContent = content
- .replace(/\s+/g, " ")
- .replace(/\n\s*\n/g, "\n")
- .trim();
-
- // Enforce maximum content size
- if (cleanedContent.length > MAX_CONTENT_CHARS) {
- cleanedContent =
- cleanedContent.substring(0, MAX_CONTENT_CHARS) + "... [truncated]";
- }
-
- return {
- url,
- content: cleanedContent,
- };
- }, []);
-
- return { capturePageContext };
-}
diff --git a/autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/HotScopedCredentialsModal/HotScopedCredentialsModal.tsx b/autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/HotScopedCredentialsModal/HotScopedCredentialsModal.tsx
index 547952841b..63d2ae1ac5 100644
--- a/autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/HotScopedCredentialsModal/HotScopedCredentialsModal.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/HotScopedCredentialsModal/HotScopedCredentialsModal.tsx
@@ -41,7 +41,17 @@ export function HostScopedCredentialsModal({
const currentHost = currentUrl ? getHostFromUrl(currentUrl) : "";
const formSchema = z.object({
- host: z.string().min(1, "Host is required"),
+ host: z
+ .string()
+ .min(1, "Host is required")
+ .refine((val) => !/^[a-zA-Z][a-zA-Z\d+\-.]*:\/\//.test(val), {
+ message: "Enter only the host (e.g. api.example.com), not a full URL",
+ })
+ .refine((val) => !val.includes("/"), {
+ message:
+ "Enter only the host (e.g. api.example.com), without a trailing path. " +
+ "You may specify a port (e.g. api.example.com:8080) if needed.",
+ }),
title: z.string().optional(),
headers: z.record(z.string()).optional(),
});
diff --git a/autogpt_platform/frontend/src/components/contextual/CredentialsInput/helpers.ts b/autogpt_platform/frontend/src/components/contextual/CredentialsInput/helpers.ts
index ef965d5382..57653f3804 100644
--- a/autogpt_platform/frontend/src/components/contextual/CredentialsInput/helpers.ts
+++ b/autogpt_platform/frontend/src/components/contextual/CredentialsInput/helpers.ts
@@ -26,6 +26,7 @@ export const providerIcons: Partial<
nvidia: fallbackIcon,
discord: FaDiscord,
d_id: fallbackIcon,
+ elevenlabs: fallbackIcon,
google_maps: FaGoogle,
jina: fallbackIcon,
ideogram: fallbackIcon,
diff --git a/autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx b/autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx
index f4bdecd1df..ce5992b4be 100644
--- a/autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx
+++ b/autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx
@@ -47,7 +47,7 @@ export function Navbar() {
const actualLoggedInLinks = [
{ name: "Home", href: homeHref },
- ...(isChatEnabled === true ? [{ name: "Tasks", href: "/library" }] : []),
+ ...(isChatEnabled === true ? [{ name: "Agents", href: "/library" }] : []),
...loggedInLinks,
];
@@ -62,7 +62,7 @@ export function Navbar() {
) : null}