Show block parameters when an action is active (#1437)

This commit is contained in:
Shuchang Zheng
2024-12-25 01:02:26 -08:00
committed by GitHub
parent a703ef4c62
commit 1d24d7dfdb
4 changed files with 48 additions and 25 deletions

View File

@@ -1,5 +1,6 @@
import { ActionsApiResponse, Status } from "@/api/types"; import { ActionsApiResponse, Status } from "@/api/types";
import { isTaskVariantBlock, WorkflowBlockType } from "./workflowTypes"; import { isTaskVariantBlock, WorkflowBlockType } from "./workflowTypes";
import { ActionItem } from "../workflowRun/WorkflowRunOverview";
export const WorkflowRunTimelineItemTypes = { export const WorkflowRunTimelineItemTypes = {
Thought: "thought", Thought: "thought",
@@ -123,6 +124,17 @@ export function isAction(item: unknown): item is ActionsApiResponse {
return typeof item === "object" && item !== null && "action_id" in item; return typeof item === "object" && item !== null && "action_id" in item;
} }
export function isActionItem(item: unknown): item is ActionItem {
return (
typeof item === "object" &&
item !== null &&
"block" in item &&
isWorkflowRunBlock(item.block) &&
"action" in item &&
isAction(item.action)
);
}
export function hasExtractedInformation( export function hasExtractedInformation(
item: unknown, item: unknown,
): item is { extracted_information: unknown } { ): item is { extracted_information: unknown } {

View File

@@ -9,7 +9,7 @@ import { ActionScreenshot } from "@/routes/tasks/detail/ActionScreenshot";
import { WorkflowRunTimelineBlockItem } from "./WorkflowRunTimelineBlockItem"; import { WorkflowRunTimelineBlockItem } from "./WorkflowRunTimelineBlockItem";
import { ThoughtCard } from "./ThoughtCard"; import { ThoughtCard } from "./ThoughtCard";
import { import {
isAction, isActionItem,
isBlockItem, isBlockItem,
isObserverThought, isObserverThought,
isThoughtItem, isThoughtItem,
@@ -24,8 +24,13 @@ import { WorkflowRunTimelineItemInfoSection } from "./WorkflowRunTimelineItemInf
import { ObserverThoughtScreenshot } from "./ObserverThoughtScreenshot"; import { ObserverThoughtScreenshot } from "./ObserverThoughtScreenshot";
import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area"; import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
export type ActionItem = {
block: WorkflowRunBlock;
action: ActionsApiResponse;
};
export type WorkflowRunOverviewActiveElement = export type WorkflowRunOverviewActiveElement =
| ActionsApiResponse | ActionItem
| ObserverThought | ObserverThought
| WorkflowRunBlock | WorkflowRunBlock
| "stream" | "stream"
@@ -68,9 +73,11 @@ function WorkflowRunOverview() {
timelineItem.block.actions.length > 0 timelineItem.block.actions.length > 0
) { ) {
const last = timelineItem.block.actions.length - 1; const last = timelineItem.block.actions.length - 1;
return timelineItem.block.actions[ const actionItem: ActionItem = {
last block: timelineItem.block,
] as WorkflowRunOverviewActiveElement; action: timelineItem.block.actions[last]!,
};
return actionItem;
} }
return timelineItem.block; return timelineItem.block;
} }
@@ -89,10 +96,10 @@ function WorkflowRunOverview() {
<div className="w-2/3 space-y-4"> <div className="w-2/3 space-y-4">
<AspectRatio ratio={16 / 9} className="overflow-y-hidden"> <AspectRatio ratio={16 / 9} className="overflow-y-hidden">
{selection === "stream" && <WorkflowRunStream />} {selection === "stream" && <WorkflowRunStream />}
{selection !== "stream" && isAction(selection) && ( {selection !== "stream" && isActionItem(selection) && (
<ActionScreenshot <ActionScreenshot
index={selection.action_order ?? 0} index={selection.action.action_order ?? 0}
stepId={selection.step_id ?? ""} stepId={selection.action.step_id ?? ""}
/> />
)} )}
{isWorkflowRunBlock(selection) && ( {isWorkflowRunBlock(selection) && (
@@ -107,7 +114,7 @@ function WorkflowRunOverview() {
)} )}
</AspectRatio> </AspectRatio>
<WorkflowRunTimelineItemInfoSection item={selection} /> <WorkflowRunTimelineItemInfoSection activeItem={selection} />
</div> </div>
<div className="w-1/3 min-w-0 rounded bg-slate-elevation1 p-4"> <div className="w-1/3 min-w-0 rounded bg-slate-elevation1 p-4">
<ScrollArea> <ScrollArea>

View File

@@ -1,19 +1,21 @@
import { ActionsApiResponse } from "@/api/types";
import { import {
isAction, isActionItem,
isWorkflowRunBlock, isWorkflowRunBlock,
WorkflowRunBlock, WorkflowRunBlock,
} from "../types/workflowRunTypes"; } from "../types/workflowRunTypes";
import { ActionCard } from "./ActionCard"; import { ActionCard } from "./ActionCard";
import { BlockCard } from "./BlockCard"; import { BlockCard } from "./BlockCard";
import { WorkflowRunOverviewActiveElement } from "./WorkflowRunOverview"; import {
ActionItem,
WorkflowRunOverviewActiveElement,
} from "./WorkflowRunOverview";
type Props = { type Props = {
activeItem: WorkflowRunOverviewActiveElement; activeItem: WorkflowRunOverviewActiveElement;
block: WorkflowRunBlock; block: WorkflowRunBlock;
subBlocks: Array<WorkflowRunBlock>; subBlocks: Array<WorkflowRunBlock>;
onBlockItemClick: (block: WorkflowRunBlock) => void; onBlockItemClick: (block: WorkflowRunBlock) => void;
onActionClick: (action: ActionsApiResponse) => void; onActionClick: (action: ActionItem) => void;
}; };
function WorkflowRunTimelineBlockItem({ function WorkflowRunTimelineBlockItem({
@@ -33,11 +35,16 @@ function WorkflowRunTimelineBlockItem({
key={action.action_id} key={action.action_id}
action={action} action={action}
active={ active={
isAction(activeItem) && activeItem.action_id === action.action_id isActionItem(activeItem) &&
activeItem.action.action_id === action.action_id
} }
index={actions.length - index} index={actions.length - index}
onClick={() => { onClick={() => {
onActionClick(action); const actionItem: ActionItem = {
block,
action,
};
onActionClick(actionItem);
}} }}
/> />
); );

View File

@@ -1,11 +1,10 @@
import { ActionsApiResponse, Status } from "@/api/types"; import { Status } from "@/api/types";
import { import {
hasExtractedInformation, hasExtractedInformation,
isAction, isAction,
isActionItem,
isObserverThought, isObserverThought,
isWorkflowRunBlock, isWorkflowRunBlock,
ObserverThought,
WorkflowRunBlock,
} from "../types/workflowRunTypes"; } from "../types/workflowRunTypes";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { CodeEditor } from "../components/CodeEditor"; import { CodeEditor } from "../components/CodeEditor";
@@ -13,17 +12,15 @@ import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResi
import { WorkflowBlockTypes } from "../types/workflowTypes"; import { WorkflowBlockTypes } from "../types/workflowTypes";
import { statusIsAFailureType } from "@/routes/tasks/types"; import { statusIsAFailureType } from "@/routes/tasks/types";
import { SendEmailBlockInfo } from "./blockInfo/SendEmailBlockInfo"; import { SendEmailBlockInfo } from "./blockInfo/SendEmailBlockInfo";
import { WorkflowRunOverviewActiveElement } from "./WorkflowRunOverview";
type Props = { type Props = {
item: activeItem: WorkflowRunOverviewActiveElement;
| ActionsApiResponse
| ObserverThought
| WorkflowRunBlock
| "stream"
| null;
}; };
function WorkflowRunTimelineItemInfoSection({ item }: Props) { function WorkflowRunTimelineItemInfoSection({ activeItem }: Props) {
const item = isActionItem(activeItem) ? activeItem.block : activeItem;
if (!item) { if (!item) {
return null; return null;
} }