zoushiyang/page-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ext): refactor event card; the result also counts as a step

Browse Source
This commit is contained in:
Simon
2026-01-21 17:25:44 +08:00
parent 189e9f3d39
commit 7dcfad42f5
1 changed files with 75 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
packages/extension/src/entrypoints/sidepanel/components/cards/index.tsx
View File

@@ -1,3 +1,4 @@
import { type AgentStep, type ErrorEvent, type ObservationEvent } from '@page-agent/core'
import {
CheckCircle,
ChevronDown,
@@ -143,24 +144,7 @@ function RawResponseSection({ rawResponse }: { rawResponse: unknown }) {
)
}
// History event card component
export function EventCard({ event }: { event: HistoricalEvent }) {
// Done action - show as result card
if (event.type === 'step' && event.action?.name === 'done') {
const input = event.action.input as { text?: string; success?: boolean }
return (
<div>
<ResultCard
success={input?.success ?? true}
text={input?.text || event.action.output || ''}
>
{!event.rawResponse || <RawResponseSection rawResponse={event.rawResponse as any} />}
</ResultCard>
</div>
)
}
if (event.type === 'step') {
function StepCard({ event }: { event: AgentStep }) {
return (
<div className="rounded-lg border-l-2 border-l-blue-500/50 border bg-muted/40 p-2.5">
<div className="text-[11px] font-semibold text-foreground tracking-wide mb-2">
@@ -184,9 +168,11 @@ export function EventCard({ event }: { event: HistoricalEvent }) {
<div className="flex-1 min-w-0">
<p className="text-xs text-foreground/80 mb-0.5">
<span className="font-medium text-foreground/70">{event.action.name}</span>
{event.action.name !== 'done' && (
<span className="text-muted-foreground/70 ml-1.5">
{JSON.stringify(event.action.input)}
</span>
)}
</p>
<p className="text-[11px] text-muted-foreground/70">└ {event.action.output}</p>
</div>
@@ -198,9 +184,9 @@ export function EventCard({ event }: { event: HistoricalEvent }) {
{!event.rawResponse || <RawResponseSection rawResponse={event.rawResponse as any} />}
</div>
)
}
}
if (event.type === 'observation') {
function ObservationCard({ event }: { event: ObservationEvent }) {
return (
<div className="rounded-lg border-l-2 border-l-green-500/50 border bg-muted/40 p-2.5">
{/* <div className="text-[11px] font-semibold text-foreground uppercase tracking-wide mb-2">
@@ -212,9 +198,9 @@ export function EventCard({ event }: { event: HistoricalEvent }) {
</div>
</div>
)
}
}
if (event.type === 'error') {
function ErrorCard({ event }: { event: ErrorEvent }) {
return (
<div className="rounded-lg border border-destructive/30 bg-destructive/10 p-2.5">
<div className="flex items-start gap-1.5">
@@ -224,6 +210,36 @@ export function EventCard({ event }: { event: HistoricalEvent }) {
{!event.rawResponse || <RawResponseSection rawResponse={event.rawResponse as any} />}
</div>
)
}
// History event card component
export function EventCard({ event }: { event: HistoricalEvent }) {
// Done action - show as result card
if (event.type === 'step' && event.action?.name === 'done') {
const input = event.action.input as { text?: string; success?: boolean }
return (
<>
<StepCard event={event as AgentStep} />
<ResultCard
success={input?.success ?? true}
text={input?.text || event.action.output || ''}
>
{!event.rawResponse || <RawResponseSection rawResponse={event.rawResponse as any} />}
</ResultCard>
</>
)
}
if (event.type === 'step') {
return <StepCard event={event as AgentStep} />
}
if (event.type === 'observation') {
return <ObservationCard event={event as ObservationEvent} />
}
if (event.type === 'error') {
return <ErrorCard event={event as ErrorEvent} />
}
return null