55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import type { A2UIResolvedComponent, A2UIClientAction } from '../../../main/a2ui/types';
|
|
|
|
interface A2UIComponentProps {
|
|
component: A2UIResolvedComponent;
|
|
surfaceId: string;
|
|
onAction: (action: A2UIClientAction) => void;
|
|
onDataChange?: (surfaceId: string, path: string, value: unknown) => void;
|
|
renderChildren?: (children: A2UIResolvedComponent[]) => React.ReactNode;
|
|
}
|
|
|
|
export const A2UICard: React.FC<A2UIComponentProps> = ({ component, surfaceId, onAction }) => {
|
|
const title = String(component.properties.title ?? '');
|
|
const body = String(component.properties.body ?? '');
|
|
const subtitle = component.properties.subtitle as string | undefined;
|
|
const actions = component.actions ?? [];
|
|
|
|
const triggerAction = (actionDef: typeof actions[number]) => {
|
|
if (actionDef.policy === 'confirm' || actionDef.policy === 'danger') {
|
|
const confirmed = window.confirm(actionDef.action);
|
|
if (!confirmed) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
onAction({
|
|
surfaceId,
|
|
componentId: component.id,
|
|
action: actionDef.action,
|
|
payload: actionDef.payload,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<article className="assistant-panel-card">
|
|
<h4>{title}</h4>
|
|
{subtitle && <p className="assistant-panel-card-subtitle">{subtitle}</p>}
|
|
<p>{body}</p>
|
|
{actions.length > 0 && (
|
|
<div className="assistant-panel-card-actions">
|
|
{actions.map((actionDef, index) => (
|
|
<button
|
|
key={`${component.id}-action-${index}`}
|
|
type="button"
|
|
onClick={() => triggerAction(actionDef)}
|
|
>
|
|
{String(actionDef.payload?.label ?? actionDef.action)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</article>
|
|
);
|
|
};
|