@steerable/agent-ui 0.6.27 → 0.6.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cards/ToolExecutionCard.d.ts +7 -0
- package/dist/cards/ToolExecutionCard.d.ts.map +1 -1
- package/dist/cards/ToolExecutionCard.js +8 -3
- package/dist/cards/ToolExecutionCard.js.map +1 -1
- package/dist/cards/index.d.ts +2 -1
- package/dist/cards/index.d.ts.map +1 -1
- package/dist/cards/index.js +3 -0
- package/dist/cards/index.js.map +1 -1
- package/package.json +2 -2
- package/src/cards/ToolExecutionCard.tsx +55 -29
- package/src/cards/cards.test.tsx +50 -0
- package/src/cards/index.ts +7 -0
|
@@ -13,8 +13,15 @@ export interface ToolExecutionCardProps {
|
|
|
13
13
|
payload: ToolExecutionPayload;
|
|
14
14
|
className?: string;
|
|
15
15
|
defaultExpanded?: boolean;
|
|
16
|
+
/** Replaces the default zap icon before the tool name. */
|
|
17
|
+
lead?: React.ReactNode;
|
|
18
|
+
/** Header title; defaults to `payload.name`. */
|
|
19
|
+
label?: string;
|
|
16
20
|
renderArgs?: (args: unknown) => React.ReactNode;
|
|
17
21
|
renderOutput?: (output: unknown) => React.ReactNode;
|
|
22
|
+
/** Header body click (chevron still toggles expand). */
|
|
23
|
+
onActivate?: () => void;
|
|
24
|
+
activateTitle?: string;
|
|
18
25
|
}
|
|
19
26
|
export declare const ToolExecutionCard: React.FC<ToolExecutionCardProps>;
|
|
20
27
|
export default ToolExecutionCard;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolExecutionCard.d.ts","sourceRoot":"","sources":["../../src/cards/ToolExecutionCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AA8BtE,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,oBAAoB,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IAChD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"ToolExecutionCard.d.ts","sourceRoot":"","sources":["../../src/cards/ToolExecutionCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AA8BtE,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,oBAAoB,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0DAA0D;IAC1D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IAChD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACpD,wDAAwD;IACxD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAiCD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAiG9D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -51,15 +51,20 @@ function defaultRender(value) {
|
|
|
51
51
|
}
|
|
52
52
|
return (_jsx("pre", { className: "whitespace-pre-wrap break-words rounded bg-[var(--agent-muted,#f3f4f6)] px-2 py-1.5 text-[11px] text-[var(--agent-foreground,#111827)]", children: text }));
|
|
53
53
|
}
|
|
54
|
-
export const ToolExecutionCard = ({ payload, className, defaultExpanded = false, renderArgs, renderOutput, }) => {
|
|
54
|
+
export const ToolExecutionCard = ({ payload, className, defaultExpanded = false, lead, label, renderArgs, renderOutput, onActivate, activateTitle, }) => {
|
|
55
55
|
const expandable = payload.expandable !== false;
|
|
56
56
|
const [expanded, setExpanded] = React.useState(defaultExpanded);
|
|
57
57
|
const status = (payload.status ?? 'pending');
|
|
58
|
+
const title = label ?? payload.name;
|
|
58
59
|
return (_jsxs("div", { className: [
|
|
59
60
|
'steerable-tool-execution rounded-lg border border-[var(--agent-border,#e5e7eb)] bg-[var(--agent-card-bg,#fff)] text-xs',
|
|
60
61
|
className,
|
|
61
|
-
].filter(Boolean).join(' '), children: [_jsxs("button", { type: "button", onClick: () =>
|
|
62
|
-
|
|
62
|
+
].filter(Boolean).join(' '), children: [_jsxs("div", { className: "flex w-full items-stretch", children: [expandable && (_jsx("button", { type: "button", onClick: () => setExpanded((v) => !v), className: "flex shrink-0 items-center px-2.5 py-1 text-[var(--agent-muted-foreground,#6b7280)]", "aria-expanded": expanded, "aria-label": expanded ? '收起详情' : '展开详情', children: expanded ? _jsx(ChevronDownIcon, { size: 12 }) : _jsx(ChevronRightIcon, { size: 12 }) })), _jsxs("button", { type: "button", onClick: () => {
|
|
63
|
+
if (onActivate)
|
|
64
|
+
onActivate();
|
|
65
|
+
else if (expandable)
|
|
66
|
+
setExpanded((v) => !v);
|
|
67
|
+
}, className: `flex min-w-0 flex-1 items-center gap-1.5 py-1 pr-2.5 text-left ${expandable ? '' : 'pl-2.5'} ${onActivate ? 'cursor-pointer hover:bg-[var(--agent-muted,#f3f4f6)]/60' : ''}`, "aria-expanded": onActivate ? undefined : expanded, "aria-label": onActivate ? activateTitle : undefined, title: onActivate ? activateTitle : undefined, "data-testid": onActivate ? 'tool-activate' : undefined, children: [lead ?? (_jsx(ZapIcon, { size: 12, className: "shrink-0 text-[var(--agent-muted-foreground,#6b7280)]" })), _jsx("span", { className: "shrink-0 font-medium text-[var(--agent-foreground,#111827)]", children: title }), payload.summary && (_jsx("span", { className: "min-w-0 flex-1 truncate text-[var(--agent-muted-foreground,#6b7280)]", children: payload.summary })), _jsxs("span", { className: "ml-auto inline-flex shrink-0 items-center gap-1 whitespace-nowrap", children: [_jsx(StatusIcon, { status: status }), _jsx("span", { className: STATUS_TONE[status], children: STATUS_LABEL[status] }), typeof payload.durationMs === 'number' && (_jsxs("span", { className: "text-[var(--agent-muted-foreground,#9ca3af)]", children: ["\u00B7 ", payload.durationMs, "ms"] }))] })] })] }), expandable && expanded && (_jsxs("div", { className: "space-y-1.5 border-t border-[var(--agent-border,#e5e7eb)] px-2.5 py-1.5", children: [payload.args !== undefined && (_jsxs("section", { children: [_jsx("div", { className: "mb-1 text-[10px] uppercase tracking-wider text-[var(--agent-muted-foreground,#6b7280)]", children: "\u8F93\u5165" }), renderArgs ? renderArgs(payload.args) : defaultRender(payload.args)] })), payload.output !== undefined && (_jsxs("section", { children: [_jsx("div", { className: "mb-1 text-[10px] uppercase tracking-wider text-[var(--agent-muted-foreground,#6b7280)]", children: "\u8F93\u51FA" }), renderOutput ? renderOutput(payload.output) : defaultRender(payload.output)] })), payload.error && (_jsxs("section", { children: [_jsx("div", { className: "mb-1 text-[10px] uppercase tracking-wider text-rose-600", children: "\u9519\u8BEF" }), _jsx("pre", { className: "whitespace-pre-wrap break-words rounded bg-rose-50/60 px-2 py-1.5 text-[11px] text-rose-700", children: payload.error })] }))] }))] }));
|
|
63
68
|
};
|
|
64
69
|
export default ToolExecutionCard;
|
|
65
70
|
//# sourceMappingURL=ToolExecutionCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolExecutionCard.js","sourceRoot":"","sources":["../../src/cards/ToolExecutionCard.tsx"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,SAAS,EACT,UAAU,EACV,SAAS,EACT,OAAO,EACP,eAAe,EACf,gBAAgB,EAChB,QAAQ,EACR,QAAQ,GACT,MAAM,YAAY,CAAC;AAIpB,MAAM,YAAY,GAA2B;IAC3C,OAAO,EAAE,KAAK;IACd,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,KAAK;IAChB,MAAM,EAAE,IAAI;IACZ,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,MAAM,WAAW,GAA2B;IAC1C,OAAO,EAAE,8CAA8C;IACvD,OAAO,EAAE,gBAAgB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,MAAM,EAAE,eAAe;IACvB,SAAS,EAAE,8CAA8C;CAC1D,CAAC;
|
|
1
|
+
{"version":3,"file":"ToolExecutionCard.js","sourceRoot":"","sources":["../../src/cards/ToolExecutionCard.tsx"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,SAAS,EACT,UAAU,EACV,SAAS,EACT,OAAO,EACP,eAAe,EACf,gBAAgB,EAChB,QAAQ,EACR,QAAQ,GACT,MAAM,YAAY,CAAC;AAIpB,MAAM,YAAY,GAA2B;IAC3C,OAAO,EAAE,KAAK;IACd,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,KAAK;IAChB,MAAM,EAAE,IAAI;IACZ,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,MAAM,WAAW,GAA2B;IAC1C,OAAO,EAAE,8CAA8C;IACvD,OAAO,EAAE,gBAAgB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,MAAM,EAAE,eAAe;IACvB,SAAS,EAAE,8CAA8C;CAC1D,CAAC;AAiBF,SAAS,UAAU,CAAC,EAAE,MAAM,EAAsB;IAChD,MAAM,GAAG,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IAChC,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,SAAS;YACZ,OAAO,KAAC,UAAU,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,GAAI,CAAC;QAClD,KAAK,WAAW;YACd,OAAO,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,GAAI,CAAC;QACjD,KAAK,QAAQ;YACX,OAAO,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,GAAI,CAAC;QACjD,KAAK,WAAW;YACd,OAAO,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,GAAI,CAAC;QAChD;YACE,OAAO,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,GAAI,CAAC;IAClD,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,KAAc;IACnC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IACvD,IAAI,IAAY,CAAC;IACjB,IAAI,CAAC;QACH,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAC5E,CAAC;IAAC,MAAM,CAAC;QACP,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IACD,OAAO,CACL,cAAK,SAAS,EAAC,wIAAwI,YACpJ,IAAI,GACD,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAClE,OAAO,EACP,SAAS,EACT,eAAe,GAAG,KAAK,EACvB,IAAI,EACJ,KAAK,EACL,UAAU,EACV,YAAY,EACZ,UAAU,EACV,aAAa,GACd,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,KAAK,KAAK,CAAC;IAChD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;IAChE,MAAM,MAAM,GAAG,CAAC,OAAO,CAAC,MAAM,IAAI,SAAS,CAAW,CAAC;IACvD,MAAM,KAAK,GAAG,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IAEpC,OAAO,CACL,eACE,SAAS,EAAE;YACT,wHAAwH;YACxH,SAAS;SACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAE3B,eAAK,SAAS,EAAC,2BAA2B,aACvC,UAAU,IAAI,CACb,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EACrC,SAAS,EAAC,qFAAqF,mBAChF,QAAQ,gBACX,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,YAErC,QAAQ,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,KAAC,gBAAgB,IAAC,IAAI,EAAE,EAAE,GAAI,GACnE,CACV,EACD,kBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,UAAU;gCAAE,UAAU,EAAE,CAAC;iCACxB,IAAI,UAAU;gCAAE,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;wBAC9C,CAAC,EACD,SAAS,EAAE,kEAAkE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,UAAU,CAAC,CAAC,CAAC,yDAAyD,CAAC,CAAC,CAAC,EAAE,EAAE,mBACzK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,gBACpC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAClD,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,iBAChC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,aAEpD,IAAI,IAAI,CACP,KAAC,OAAO,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,uDAAuD,GAAG,CACxF,EACD,eAAM,SAAS,EAAC,6DAA6D,YAC1E,KAAK,GACD,EACN,OAAO,CAAC,OAAO,IAAI,CAClB,eAAM,SAAS,EAAC,sEAAsE,YACnF,OAAO,CAAC,OAAO,GACX,CACR,EACD,gBAAM,SAAS,EAAC,mEAAmE,aACjF,KAAC,UAAU,IAAC,MAAM,EAAE,MAAM,GAAI,EAC9B,eAAM,SAAS,EAAE,WAAW,CAAC,MAAM,CAAC,YAAG,YAAY,CAAC,MAAM,CAAC,GAAQ,EAClE,OAAO,OAAO,CAAC,UAAU,KAAK,QAAQ,IAAI,CACzC,gBAAM,SAAS,EAAC,8CAA8C,wBAAI,OAAO,CAAC,UAAU,UAAU,CAC/F,IACI,IACA,IACL,EACL,UAAU,IAAI,QAAQ,IAAI,CACzB,eAAK,SAAS,EAAC,yEAAyE,aACrF,OAAO,CAAC,IAAI,KAAK,SAAS,IAAI,CAC7B,8BACE,cAAK,SAAS,EAAC,wFAAwF,6BAEjG,EACL,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,IAC5D,CACX,EACA,OAAO,CAAC,MAAM,KAAK,SAAS,IAAI,CAC/B,8BACE,cAAK,SAAS,EAAC,wFAAwF,6BAEjG,EACL,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,IACpE,CACX,EACA,OAAO,CAAC,KAAK,IAAI,CAChB,8BACE,cAAK,SAAS,EAAC,yDAAyD,6BAAS,EACjF,cAAK,SAAS,EAAC,6FAA6F,YACzG,OAAO,CAAC,KAAK,GACV,IACE,CACX,IACG,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
package/dist/cards/index.d.ts
CHANGED
|
@@ -8,7 +8,8 @@
|
|
|
8
8
|
* select, remediate, ...) flow through props -- apps stay in charge of state.
|
|
9
9
|
*/
|
|
10
10
|
export { OrchestrationPlanCard } from './OrchestrationPlanCard.js';
|
|
11
|
-
export
|
|
11
|
+
export { ORCHESTRATION_STATUS_LABEL, ORCHESTRATION_DOT_CLASS, } from './OrchestrationPlanCard.js';
|
|
12
|
+
export type { OrchestrationPlanCardProps, OrchestrationTask, OrchestrationTaskStatus, } from './OrchestrationPlanCard.js';
|
|
12
13
|
export { QuizCard } from './QuizCard.js';
|
|
13
14
|
export type { QuizCardProps } from './QuizCard.js';
|
|
14
15
|
export { CoverageReportCard } from './CoverageReportCard.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/cards/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/cards/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAGnE,OAAO,EACL,0BAA0B,EAC1B,uBAAuB,GACxB,MAAM,4BAA4B,CAAC;AACpC,YAAY,EACV,0BAA0B,EAC1B,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,YAAY,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAEvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,YAAY,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAE3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,YAAY,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAEnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,YAAY,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAE3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,YAAY,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAE3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,YAAY,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAEzE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,YAAY,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAEnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAErE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,YAAY,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAEvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAErE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC"}
|
package/dist/cards/index.js
CHANGED
|
@@ -8,6 +8,9 @@
|
|
|
8
8
|
* select, remediate, ...) flow through props -- apps stay in charge of state.
|
|
9
9
|
*/
|
|
10
10
|
export { OrchestrationPlanCard } from './OrchestrationPlanCard.js';
|
|
11
|
+
// Row-level status vocabulary, exported so a host that overrides `renderTaskRow`
|
|
12
|
+
// keeps the card's own labels and dot colors instead of copying them.
|
|
13
|
+
export { ORCHESTRATION_STATUS_LABEL, ORCHESTRATION_DOT_CLASS, } from './OrchestrationPlanCard.js';
|
|
11
14
|
export { QuizCard } from './QuizCard.js';
|
|
12
15
|
export { CoverageReportCard } from './CoverageReportCard.js';
|
|
13
16
|
export { AnalysisDocumentCard } from './AnalysisDocumentCard.js';
|
package/dist/cards/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/cards/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/cards/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,iFAAiF;AACjF,sEAAsE;AACtE,OAAO,EACL,0BAA0B,EAC1B,uBAAuB,GACxB,MAAM,4BAA4B,CAAC;AAOpC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAG7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAGjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAGzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAGjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAGjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAG/D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAGzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAG3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAG7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAG3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@steerable/agent-ui",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.29",
|
|
4
4
|
"description": "Steerable framework Tier 4 — headless React hooks (useAgentSession, useChatStream, useToolCallStatus) and Tailwind-themed components (ChatPanel, MessageList, OrchestrationPlanCard, ToolCallRenderer, SSEStreamView) for embedding Steerable agents in any React app.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"homepage": "https://steerableframework.com/storybook/",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"README.md"
|
|
58
58
|
],
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@steerable/agent-protocol": "0.6.
|
|
60
|
+
"@steerable/agent-protocol": "0.6.29"
|
|
61
61
|
},
|
|
62
62
|
"peerDependencies": {
|
|
63
63
|
"react": ">=18.0.0",
|
|
@@ -42,8 +42,15 @@ export interface ToolExecutionCardProps {
|
|
|
42
42
|
payload: ToolExecutionPayload;
|
|
43
43
|
className?: string;
|
|
44
44
|
defaultExpanded?: boolean;
|
|
45
|
+
/** Replaces the default zap icon before the tool name. */
|
|
46
|
+
lead?: React.ReactNode;
|
|
47
|
+
/** Header title; defaults to `payload.name`. */
|
|
48
|
+
label?: string;
|
|
45
49
|
renderArgs?: (args: unknown) => React.ReactNode;
|
|
46
50
|
renderOutput?: (output: unknown) => React.ReactNode;
|
|
51
|
+
/** Header body click (chevron still toggles expand). */
|
|
52
|
+
onActivate?: () => void;
|
|
53
|
+
activateTitle?: string;
|
|
47
54
|
}
|
|
48
55
|
|
|
49
56
|
function StatusIcon({ status }: { status: Status }) {
|
|
@@ -81,12 +88,17 @@ export const ToolExecutionCard: React.FC<ToolExecutionCardProps> = ({
|
|
|
81
88
|
payload,
|
|
82
89
|
className,
|
|
83
90
|
defaultExpanded = false,
|
|
91
|
+
lead,
|
|
92
|
+
label,
|
|
84
93
|
renderArgs,
|
|
85
94
|
renderOutput,
|
|
95
|
+
onActivate,
|
|
96
|
+
activateTitle,
|
|
86
97
|
}) => {
|
|
87
98
|
const expandable = payload.expandable !== false;
|
|
88
99
|
const [expanded, setExpanded] = React.useState(defaultExpanded);
|
|
89
100
|
const status = (payload.status ?? 'pending') as Status;
|
|
101
|
+
const title = label ?? payload.name;
|
|
90
102
|
|
|
91
103
|
return (
|
|
92
104
|
<div
|
|
@@ -95,38 +107,52 @@ export const ToolExecutionCard: React.FC<ToolExecutionCardProps> = ({
|
|
|
95
107
|
className,
|
|
96
108
|
].filter(Boolean).join(' ')}
|
|
97
109
|
>
|
|
98
|
-
<
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
<ChevronDownIcon size={12}
|
|
108
|
-
|
|
109
|
-
<ChevronRightIcon size={12} className="shrink-0" />
|
|
110
|
-
))}
|
|
111
|
-
<ZapIcon size={12} className="shrink-0 text-[var(--agent-muted-foreground,#6b7280)]" />
|
|
112
|
-
<span className="shrink-0 font-medium text-[var(--agent-foreground,#111827)]">
|
|
113
|
-
{payload.name}
|
|
114
|
-
</span>
|
|
115
|
-
{payload.summary && (
|
|
116
|
-
<span className="min-w-0 flex-1 truncate text-[var(--agent-muted-foreground,#6b7280)]">
|
|
117
|
-
{payload.summary}
|
|
118
|
-
</span>
|
|
110
|
+
<div className="flex w-full items-stretch">
|
|
111
|
+
{expandable && (
|
|
112
|
+
<button
|
|
113
|
+
type="button"
|
|
114
|
+
onClick={() => setExpanded((v) => !v)}
|
|
115
|
+
className="flex shrink-0 items-center px-2.5 py-1 text-[var(--agent-muted-foreground,#6b7280)]"
|
|
116
|
+
aria-expanded={expanded}
|
|
117
|
+
aria-label={expanded ? '收起详情' : '展开详情'}
|
|
118
|
+
>
|
|
119
|
+
{expanded ? <ChevronDownIcon size={12} /> : <ChevronRightIcon size={12} />}
|
|
120
|
+
</button>
|
|
119
121
|
)}
|
|
120
|
-
<
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
122
|
+
<button
|
|
123
|
+
type="button"
|
|
124
|
+
onClick={() => {
|
|
125
|
+
if (onActivate) onActivate();
|
|
126
|
+
else if (expandable) setExpanded((v) => !v);
|
|
127
|
+
}}
|
|
128
|
+
className={`flex min-w-0 flex-1 items-center gap-1.5 py-1 pr-2.5 text-left ${expandable ? '' : 'pl-2.5'} ${onActivate ? 'cursor-pointer hover:bg-[var(--agent-muted,#f3f4f6)]/60' : ''}`}
|
|
129
|
+
aria-expanded={onActivate ? undefined : expanded}
|
|
130
|
+
aria-label={onActivate ? activateTitle : undefined}
|
|
131
|
+
title={onActivate ? activateTitle : undefined}
|
|
132
|
+
data-testid={onActivate ? 'tool-activate' : undefined}
|
|
133
|
+
>
|
|
134
|
+
{lead ?? (
|
|
135
|
+
<ZapIcon size={12} className="shrink-0 text-[var(--agent-muted-foreground,#6b7280)]" />
|
|
136
|
+
)}
|
|
137
|
+
<span className="shrink-0 font-medium text-[var(--agent-foreground,#111827)]">
|
|
138
|
+
{title}
|
|
139
|
+
</span>
|
|
140
|
+
{payload.summary && (
|
|
141
|
+
<span className="min-w-0 flex-1 truncate text-[var(--agent-muted-foreground,#6b7280)]">
|
|
142
|
+
{payload.summary}
|
|
143
|
+
</span>
|
|
125
144
|
)}
|
|
126
|
-
|
|
127
|
-
|
|
145
|
+
<span className="ml-auto inline-flex shrink-0 items-center gap-1 whitespace-nowrap">
|
|
146
|
+
<StatusIcon status={status} />
|
|
147
|
+
<span className={STATUS_TONE[status]}>{STATUS_LABEL[status]}</span>
|
|
148
|
+
{typeof payload.durationMs === 'number' && (
|
|
149
|
+
<span className="text-[var(--agent-muted-foreground,#9ca3af)]">· {payload.durationMs}ms</span>
|
|
150
|
+
)}
|
|
151
|
+
</span>
|
|
152
|
+
</button>
|
|
153
|
+
</div>
|
|
128
154
|
{expandable && expanded && (
|
|
129
|
-
<div className="space-y-
|
|
155
|
+
<div className="space-y-1.5 border-t border-[var(--agent-border,#e5e7eb)] px-2.5 py-1.5">
|
|
130
156
|
{payload.args !== undefined && (
|
|
131
157
|
<section>
|
|
132
158
|
<div className="mb-1 text-[10px] uppercase tracking-wider text-[var(--agent-muted-foreground,#6b7280)]">
|
package/src/cards/cards.test.tsx
CHANGED
|
@@ -513,6 +513,56 @@ describe('ToolExecutionCard', () => {
|
|
|
513
513
|
expect(screen.getByText(/"q": "foo"/)).toBeTruthy();
|
|
514
514
|
expect(screen.getByText('timeout')).toBeTruthy();
|
|
515
515
|
});
|
|
516
|
+
|
|
517
|
+
it('onActivate 接管标题点击，箭头仍展开', () => {
|
|
518
|
+
const onActivate = vi.fn();
|
|
519
|
+
render(
|
|
520
|
+
<ToolExecutionCard
|
|
521
|
+
payload={{
|
|
522
|
+
id: 't',
|
|
523
|
+
name: 'search.web',
|
|
524
|
+
status: 'failed',
|
|
525
|
+
summary: '搜索失败',
|
|
526
|
+
args: { q: 'foo' },
|
|
527
|
+
output: null,
|
|
528
|
+
error: 'timeout',
|
|
529
|
+
durationMs: 1200,
|
|
530
|
+
icon: null,
|
|
531
|
+
expandable: true,
|
|
532
|
+
}}
|
|
533
|
+
onActivate={onActivate}
|
|
534
|
+
/>,
|
|
535
|
+
);
|
|
536
|
+
fireEvent.click(screen.getByText('search.web'));
|
|
537
|
+
expect(onActivate).toHaveBeenCalledTimes(1);
|
|
538
|
+
expect(screen.queryByText(/"q": "foo"/)).toBeNull();
|
|
539
|
+
fireEvent.click(screen.getByRole('button', { name: '展开详情' }));
|
|
540
|
+
expect(screen.getByText(/"q": "foo"/)).toBeTruthy();
|
|
541
|
+
});
|
|
542
|
+
|
|
543
|
+
it('renders label and lead instead of the payload name', () => {
|
|
544
|
+
render(
|
|
545
|
+
<ToolExecutionCard
|
|
546
|
+
payload={{
|
|
547
|
+
id: 't',
|
|
548
|
+
name: 'delegate_subagent',
|
|
549
|
+
status: 'running',
|
|
550
|
+
summary: '探环境',
|
|
551
|
+
args: null,
|
|
552
|
+
output: null,
|
|
553
|
+
error: null,
|
|
554
|
+
durationMs: null,
|
|
555
|
+
icon: null,
|
|
556
|
+
expandable: true,
|
|
557
|
+
}}
|
|
558
|
+
label="委派 · 调研员"
|
|
559
|
+
lead={<span data-testid="lead-dot" />}
|
|
560
|
+
/>,
|
|
561
|
+
);
|
|
562
|
+
expect(screen.getByText('委派 · 调研员')).toBeTruthy();
|
|
563
|
+
expect(screen.queryByText('delegate_subagent')).toBeNull();
|
|
564
|
+
expect(screen.getByTestId('lead-dot')).toBeTruthy();
|
|
565
|
+
});
|
|
516
566
|
});
|
|
517
567
|
|
|
518
568
|
describe('ActionSegmentCard', () => {
|
package/src/cards/index.ts
CHANGED
|
@@ -8,8 +8,15 @@
|
|
|
8
8
|
* select, remediate, ...) flow through props -- apps stay in charge of state.
|
|
9
9
|
*/
|
|
10
10
|
export { OrchestrationPlanCard } from './OrchestrationPlanCard.js';
|
|
11
|
+
// Row-level status vocabulary, exported so a host that overrides `renderTaskRow`
|
|
12
|
+
// keeps the card's own labels and dot colors instead of copying them.
|
|
13
|
+
export {
|
|
14
|
+
ORCHESTRATION_STATUS_LABEL,
|
|
15
|
+
ORCHESTRATION_DOT_CLASS,
|
|
16
|
+
} from './OrchestrationPlanCard.js';
|
|
11
17
|
export type {
|
|
12
18
|
OrchestrationPlanCardProps,
|
|
19
|
+
OrchestrationTask,
|
|
13
20
|
OrchestrationTaskStatus,
|
|
14
21
|
} from './OrchestrationPlanCard.js';
|
|
15
22
|
|