feat(frontend): Add ready-to-test prompt after agent creation [SECRT-1882] (#11975)

## Summary
- Add special UI prompt when agent is successfully created in chat
- Show "Agent Created Successfully" with agent name
- Provide two action buttons:
- **Run with example values**: Sends chat message asking AI to run with
placeholders
- **Run with my inputs**: Opens RunAgentModal for custom input
configuration
- After run/schedule, automatically send chat message with execution
details for AI monitoring



https://github.com/user-attachments/assets/b11e118c-de59-4b79-a629-8bd0d52d9161



## Test plan
- [x] Create an agent through chat
- [x] Verify "Agent Created Successfully" prompt appears
- [x] Click "Run with example values" - verify chat message is sent
- [x] Click "Run with my inputs" - verify RunAgentModal opens
- [x] Fill inputs and run - verify chat message with execution ID is
sent
- [x] Fill inputs and schedule - verify chat message with schedule
details is sent

---------

Co-authored-by: Otto <otto@agpt.co>

autogpt_platform/frontend/src/components/contextual/Chat/components/ChatMessage/ChatMessage.tsx

@@ -346,6 +346,7 @@ export function ChatMessage({
           toolId={message.toolId}
           toolName={message.toolName}
           result={message.result}
+          onSendMessage={onSendMessage}
         />
       </div>
     );

autogpt_platform/frontend/src/components/contextual/Chat/components/MessageList/MessageList.tsx

@@ -73,6 +73,7 @@ export function MessageList({
                     key={index}
                     message={message}
                     prevMessage={messages[index - 1]}
+                    onSendMessage={onSendMessage}
                   />
                 );
               }

autogpt_platform/frontend/src/components/contextual/Chat/components/MessageList/components/LastToolResponse/LastToolResponse.tsx

@@ -5,11 +5,13 @@ import { shouldSkipAgentOutput } from "../../helpers";
 export interface LastToolResponseProps {
   message: ChatMessageData;
   prevMessage: ChatMessageData | undefined;
+  onSendMessage?: (content: string) => void;
 }
 
 export function LastToolResponse({
   message,
   prevMessage,
+  onSendMessage,
 }: LastToolResponseProps) {
   if (message.type !== "tool_response") return null;
 
@@ -21,6 +23,7 @@ export function LastToolResponse({
         toolId={message.toolId}
         toolName={message.toolName}
         result={message.result}
+        onSendMessage={onSendMessage}
       />
     </div>
   );

autogpt_platform/frontend/src/components/contextual/Chat/components/ToolResponseMessage/AgentCreatedPrompt.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useGetV2GetLibraryAgent } from "@/app/api/__generated__/endpoints/library/library";
+import { GraphExecutionJobInfo } from "@/app/api/__generated__/models/graphExecutionJobInfo";
+import { GraphExecutionMeta } from "@/app/api/__generated__/models/graphExecutionMeta";
+import { RunAgentModal } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/RunAgentModal";
+import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
+import {
+  CheckCircleIcon,
+  PencilLineIcon,
+  PlayIcon,
+} from "@phosphor-icons/react";
+import { AIChatBubble } from "../AIChatBubble/AIChatBubble";
+
+interface Props {
+  agentName: string;
+  libraryAgentId: string;
+  onSendMessage?: (content: string) => void;
+}
+
+export function AgentCreatedPrompt({
+  agentName,
+  libraryAgentId,
+  onSendMessage,
+}: Props) {
+  // Fetch library agent eagerly so modal is ready when user clicks
+  const { data: libraryAgentResponse, isLoading } = useGetV2GetLibraryAgent(
+    libraryAgentId,
+    {
+      query: {
+        enabled: !!libraryAgentId,
+      },
+    },
+  );
+
+  const libraryAgent =
+    libraryAgentResponse?.status === 200 ? libraryAgentResponse.data : null;
+
+  function handleRunWithPlaceholders() {
+    onSendMessage?.(
+      `Run the agent "${agentName}" with placeholder/example values so I can test it.`,
+    );
+  }
+
+  function handleRunCreated(execution: GraphExecutionMeta) {
+    onSendMessage?.(
+      `I've started the agent "${agentName}". The execution ID is ${execution.id}. Please monitor its progress and let me know when it completes.`,
+    );
+  }
+
+  function handleScheduleCreated(schedule: GraphExecutionJobInfo) {
+    const scheduleInfo = schedule.cron
+      ? `with cron schedule "${schedule.cron}"`
+      : "to run on the specified schedule";
+    onSendMessage?.(
+      `I've scheduled the agent "${agentName}" ${scheduleInfo}. The schedule ID is ${schedule.id}.`,
+    );
+  }
+
+  return (
+    <AIChatBubble>
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center gap-2">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-green-100">
+            <CheckCircleIcon
+              size={18}
+              weight="fill"
+              className="text-green-600"
+            />
+          </div>
+          <div>
+            <Text variant="body-medium" className="text-neutral-900">
+              Agent Created Successfully
+            </Text>
+            <Text variant="small" className="text-neutral-500">
+              &quot;{agentName}&quot; is ready to test
+            </Text>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <Text variant="small-medium" className="text-neutral-700">
+            Ready to test?
+          </Text>
+          <div className="flex flex-wrap gap-2">
+            <Button
+              variant="outline"
+              size="small"
+              onClick={handleRunWithPlaceholders}
+              className="gap-2"
+            >
+              <PlayIcon size={16} />
+              Run with example values
+            </Button>
+            {libraryAgent ? (
+              <RunAgentModal
+                triggerSlot={
+                  <Button variant="outline" size="small" className="gap-2">
+                    <PencilLineIcon size={16} />
+                    Run with my inputs
+                  </Button>
+                }
+                agent={libraryAgent}
+                onRunCreated={handleRunCreated}
+                onScheduleCreated={handleScheduleCreated}
+              />
+            ) : (
+              <Button
+                variant="outline"
+                size="small"
+                loading={isLoading}
+                disabled
+                className="gap-2"
+              >
+                <PencilLineIcon size={16} />
+                Run with my inputs
+              </Button>
+            )}
+          </div>
+          <Text variant="small" className="text-neutral-500">
+            or just ask me
+          </Text>
+        </div>
+      </div>
+    </AIChatBubble>
+  );
+}

autogpt_platform/frontend/src/components/contextual/Chat/components/ToolResponseMessage/ToolResponseMessage.tsx

@@ -2,11 +2,13 @@ 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 { AgentCreatedPrompt } from "./AgentCreatedPrompt";
 import { AIChatBubble } from "../AIChatBubble/AIChatBubble";
 import { MarkdownContent } from "../MarkdownContent/MarkdownContent";
 import {
   formatToolResponse,
   getErrorMessage,
+  isAgentSavedResponse,
   isErrorResponse,
 } from "./helpers";
 
@@ -16,6 +18,7 @@ export interface ToolResponseMessageProps {
   result?: ToolResult;
   success?: boolean;
   className?: string;
+  onSendMessage?: (content: string) => void;
 }
 
 export function ToolResponseMessage({
@@ -24,6 +27,7 @@ export function ToolResponseMessage({
   result,
   success: _success,
   className,
+  onSendMessage,
 }: ToolResponseMessageProps) {
   if (isErrorResponse(result)) {
     const errorMessage = getErrorMessage(result);
@@ -43,6 +47,18 @@ export function ToolResponseMessage({
     );
   }
 
+  // Check for agent_saved response - show special prompt
+  const agentSavedData = isAgentSavedResponse(result);
+  if (agentSavedData.isSaved) {
+    return (
+      <AgentCreatedPrompt
+        agentName={agentSavedData.agentName}
+        libraryAgentId={agentSavedData.libraryAgentId}
+        onSendMessage={onSendMessage}
+      />
+    );
+  }
+
   const formattedText = formatToolResponse(result, toolName);
 
   return (

autogpt_platform/frontend/src/components/contextual/Chat/components/ToolResponseMessage/helpers.ts

@@ -6,6 +6,43 @@ function stripInternalReasoning(content: string): string {
     .trim();
 }
 
+export interface AgentSavedData {
+  isSaved: boolean;
+  agentName: string;
+  agentId: string;
+  libraryAgentId: string;
+  libraryAgentLink: string;
+}
+
+export function isAgentSavedResponse(result: unknown): AgentSavedData {
+  if (typeof result !== "object" || result === null) {
+    return {
+      isSaved: false,
+      agentName: "",
+      agentId: "",
+      libraryAgentId: "",
+      libraryAgentLink: "",
+    };
+  }
+  const response = result as Record<string, unknown>;
+  if (response.type === "agent_saved") {
+    return {
+      isSaved: true,
+      agentName: (response.agent_name as string) || "Agent",
+      agentId: (response.agent_id as string) || "",
+      libraryAgentId: (response.library_agent_id as string) || "",
+      libraryAgentLink: (response.library_agent_link as string) || "",
+    };
+  }
+  return {
+    isSaved: false,
+    agentName: "",
+    agentId: "",
+    libraryAgentId: "",
+    libraryAgentLink: "",
+  };
+}
+
 export function isErrorResponse(result: unknown): boolean {
   if (typeof result === "string") {
     const lower = result.toLowerCase();