Merge pull request #254 from toyamarinyon/rerun

[feat] Add flow retry capability with state preservation
giselles-ai · Dec 18, 2024 · 2b8caf0 · 2b8caf0
2 parents 2ee6165 + 441b0ad
commit 2b8caf0
Show file tree

Hide file tree

Showing 8 changed files with 439 additions and 54 deletions.
diff --git a/app/(playground)/p/[agentId]/components/header.tsx b/app/(playground)/p/[agentId]/components/header.tsx
@@ -1,15 +1,31 @@
 import { GiselleLogo } from "@/components/giselle-logo";
 import Link from "next/link";
-import type { ReactNode } from "react";
+import type { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode } from "react";
 import { useExecution } from "../contexts/execution";
 import { useGraph } from "../contexts/graph";
 import {
 	type PlaygroundMode,
 	usePlaygroundMode,
 } from "../contexts/playground-mode";
-// import { RunButton } from "./flow/components/run-button";
 import { SparklesIcon } from "./icons/sparkles";
-import { Button } from "./ui/button";
+
+function Button({
+	className,
+	...props
+}: DetailedHTMLProps<
+	ButtonHTMLAttributes<HTMLButtonElement>,
+	HTMLButtonElement
+>) {
+	return (
+		<button
+			className="px-[16px] py-[8px] rounded-[8px] flex items-center gap-[2px] bg-[hsla(207,19%,77%,0.3)] font-rosart"
+			style={{
+				boxShadow: "0px 0px 3px 0px hsla(0, 0%, 100%, 0.25) inset",
+			}}
+			{...props}
+		/>
+	);
+}
 
 function SelectionIndicator() {
 	return (

diff --git a/app/(playground)/p/[agentId]/components/ui/button.tsx b/app/(playground)/p/[agentId]/components/ui/button.tsx
@@ -11,10 +11,11 @@ export function Button({
 	return (
 		<button
 			className={clsx(
-				"px-[16px] py-[8px] rounded-[8px] flex items-center gap-[2px] bg-[hsla(207,19%,77%,0.3)] font-rosart",
+				"px-[16px] h-[36px] rounded-full flex items-center gap-[2px] font-rosart text-black-30",
+				className,
 			)}
 			style={{
-				boxShadow: "0px 0px 3px 0px hsla(0, 0%, 100%, 0.25) inset",
+				boxShadow: "0px 0px 3px 0px hsla(0, 0%, 100%, 0.4) inset",
 			}}
 			{...props}
 		/>

diff --git a/app/(playground)/p/[agentId]/components/viewer.tsx b/app/(playground)/p/[agentId]/components/viewer.tsx
@@ -14,6 +14,7 @@ import ClipboardButton from "./clipboard-button";
 import { ContentTypeIcon } from "./content-type-icon";
 import { Header } from "./header";
 import { Markdown } from "./markdown";
+import { Button } from "./ui/button";
 import { EmptyState } from "./ui/empty-state";
 
 interface StepExecutionButtonProps
@@ -68,6 +69,7 @@ function ExecutionViewer({
 	execution: tmpExecution,
 }: { execution: Execution }) {
 	const { graph } = useGraph();
+	const { retryFlowExecution } = useExecution();
 	const execution = useMemo(
 		() => ({
 			...tmpExecution,
@@ -79,6 +81,7 @@ function ExecutionViewer({
 							(node) => node.id === stepExecution.nodeId,
 						);
 						if (node === undefined) {
+							console.log(`${stepExecution.nodeId} not found`);
 							return null;
 						}
 						const artifact = tmpExecution.artifacts.find((artifact) => {
@@ -130,7 +133,19 @@ function ExecutionViewer({
 						<Tabs.Content key={stepExecution.id} value={stepExecution.id}>
 							{stepExecution.status === "pending" && <p>Pending</p>}
 							{stepExecution.status === "failed" && (
-								<p>{stepExecution.error}</p>
+								<div className="flex flex-col gap-[8px]">
+									<p>{stepExecution.error}</p>
+									<div>
+										<Button
+											type="button"
+											onClick={() => {
+												retryFlowExecution(execution.id);
+											}}
+										>
+											Retry
+										</Button>
+									</div>
+								</div>
 							)}
 							{stepExecution.status === "running" ||
 								(stepExecution.status === "completed" && (