@axis-ds/agentic-ui 1.1.2 → 1.2.0

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.
@@ -1,81 +0,0 @@
1
- // src/surface-renderer/index.tsx
2
- import { cn } from "@axis-ds/ui-react";
3
- import { jsx, jsxs } from "react/jsx-runtime";
4
- function SurfaceRenderer({
5
- surface,
6
- renderCustom,
7
- className
8
- }) {
9
- const renderContent = () => {
10
- switch (surface.type) {
11
- case "text":
12
- return /* @__PURE__ */ jsx("div", { className: "prose prose-sm max-w-none text-[var(--axis-text-primary)]", children: String(surface.content) });
13
- case "code":
14
- return /* @__PURE__ */ jsx("pre", { className: "p-3 rounded-md bg-[var(--axis-surface-secondary)] overflow-x-auto", children: /* @__PURE__ */ jsx("code", { className: "text-sm font-mono text-[var(--axis-text-primary)]", children: String(surface.content) }) });
15
- case "table":
16
- const tableData = surface.content;
17
- return /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
18
- /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b border-[var(--axis-border-default)]", children: tableData.headers.map((header, i) => /* @__PURE__ */ jsx(
19
- "th",
20
- {
21
- className: "px-3 py-2 text-left font-medium text-[var(--axis-text-secondary)]",
22
- children: header
23
- },
24
- i
25
- )) }) }),
26
- /* @__PURE__ */ jsx("tbody", { children: tableData.rows.map((row, i) => /* @__PURE__ */ jsx(
27
- "tr",
28
- {
29
- className: "border-b border-[var(--axis-border-default)] last:border-0",
30
- children: row.map((cell, j) => /* @__PURE__ */ jsx(
31
- "td",
32
- {
33
- className: "px-3 py-2 text-[var(--axis-text-primary)]",
34
- children: cell
35
- },
36
- j
37
- ))
38
- },
39
- i
40
- )) })
41
- ] }) });
42
- case "chart":
43
- return /* @__PURE__ */ jsxs("div", { className: "p-4 text-center text-[var(--axis-text-secondary)]", children: [
44
- "[\uCC28\uD2B8: ",
45
- surface.title || "\uB370\uC774\uD130 \uC2DC\uAC01\uD654",
46
- "]"
47
- ] });
48
- case "form":
49
- return /* @__PURE__ */ jsxs("div", { className: "p-4 text-center text-[var(--axis-text-secondary)]", children: [
50
- "[\uD3FC: ",
51
- surface.title || "\uC785\uB825 \uC591\uC2DD",
52
- "]"
53
- ] });
54
- case "custom":
55
- if (renderCustom) {
56
- return renderCustom(surface);
57
- }
58
- return /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-[var(--axis-text-secondary)]", children: "[\uCEE4\uC2A4\uD140 Surface]" });
59
- default:
60
- return null;
61
- }
62
- };
63
- return /* @__PURE__ */ jsxs(
64
- "div",
65
- {
66
- className: cn(
67
- "rounded-lg border p-4",
68
- "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
69
- className
70
- ),
71
- children: [
72
- surface.title && /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium text-[var(--axis-text-primary)] mb-3", children: surface.title }),
73
- renderContent()
74
- ]
75
- }
76
- );
77
- }
78
-
79
- export {
80
- SurfaceRenderer
81
- };
@@ -1,47 +0,0 @@
1
- // src/thinking-indicator/index.tsx
2
- import { cn } from "@axis-ds/ui-react";
3
- import { jsx, jsxs } from "react/jsx-runtime";
4
- var sizeStyles = {
5
- sm: "text-xs gap-1",
6
- md: "text-sm gap-1.5",
7
- lg: "text-base gap-2"
8
- };
9
- var dotSizes = {
10
- sm: "w-1 h-1",
11
- md: "w-1.5 h-1.5",
12
- lg: "w-2 h-2"
13
- };
14
- function ThinkingIndicator({
15
- text = "\uC0DD\uAC01 \uC911",
16
- size = "md",
17
- className
18
- }) {
19
- return /* @__PURE__ */ jsxs(
20
- "div",
21
- {
22
- className: cn(
23
- "flex items-center text-[var(--axis-text-secondary)]",
24
- sizeStyles[size],
25
- className
26
- ),
27
- children: [
28
- /* @__PURE__ */ jsx("span", { children: text }),
29
- /* @__PURE__ */ jsx("div", { className: "flex gap-0.5", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
30
- "div",
31
- {
32
- className: cn(
33
- "rounded-full bg-current animate-bounce",
34
- dotSizes[size]
35
- ),
36
- style: { animationDelay: `${i * 150}ms` }
37
- },
38
- i
39
- )) })
40
- ]
41
- }
42
- );
43
- }
44
-
45
- export {
46
- ThinkingIndicator
47
- };
@@ -1,33 +0,0 @@
1
- // src/constants/a11y-labels.ts
2
- var STATUS_LABELS = {
3
- pending: "\uB300\uAE30 \uC911",
4
- running: "\uC2E4\uD589 \uC911",
5
- complete: "\uC644\uB8CC",
6
- success: "\uC131\uACF5",
7
- error: "\uC624\uB958",
8
- skipped: "\uAC74\uB108\uB700",
9
- idle: "\uB300\uAE30 \uC911"
10
- };
11
- var SEVERITY_LABELS = {
12
- info: "\uC815\uBCF4",
13
- warning: "\uC8FC\uC758",
14
- error: "\uC624\uB958"
15
- };
16
- var AGENT_STATUS_LABELS = {
17
- online: "\uC628\uB77C\uC778",
18
- busy: "\uC0AC\uC6A9 \uC911",
19
- offline: "\uC624\uD504\uB77C\uC778"
20
- };
21
- var SOURCE_TYPE_LABELS = {
22
- web: "\uC6F9 \uD398\uC774\uC9C0",
23
- file: "\uD30C\uC77C",
24
- database: "\uB370\uC774\uD130\uBCA0\uC774\uC2A4",
25
- api: "API"
26
- };
27
-
28
- export {
29
- STATUS_LABELS,
30
- SEVERITY_LABELS,
31
- AGENT_STATUS_LABELS,
32
- SOURCE_TYPE_LABELS
33
- };
@@ -1,94 +0,0 @@
1
- import {
2
- SEVERITY_LABELS
3
- } from "./chunk-HWISMHCP.mjs";
4
-
5
- // src/approval-card/index.tsx
6
- import * as React from "react";
7
- import { cn } from "@axis-ds/ui-react";
8
- import { jsx, jsxs } from "react/jsx-runtime";
9
- var severityStyles = {
10
- info: {
11
- border: "border-l-[var(--axis-color-blue-500)]",
12
- icon: "text-[var(--axis-color-blue-500)]",
13
- bg: "bg-[var(--axis-surface-info)]"
14
- },
15
- warning: {
16
- border: "border-l-[var(--axis-color-yellow-500)]",
17
- icon: "text-[var(--axis-color-yellow-500)]",
18
- bg: "bg-[var(--axis-surface-warning)]"
19
- },
20
- error: {
21
- border: "border-l-[var(--axis-color-red-500)]",
22
- icon: "text-[var(--axis-color-red-500)]",
23
- bg: "bg-[var(--axis-surface-error)]"
24
- }
25
- };
26
- var severityIcons = {
27
- info: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
28
- warning: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
29
- error: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) })
30
- };
31
- var actionVariantStyles = {
32
- default: "bg-[var(--axis-button-bg-default)] text-white hover:bg-[var(--axis-button-bg-hover)]",
33
- secondary: "bg-[var(--axis-button-secondary-bg-default)] text-[var(--axis-text-primary)] hover:bg-[var(--axis-button-secondary-bg-hover)]",
34
- ghost: "bg-transparent text-[var(--axis-text-primary)] hover:bg-[var(--axis-surface-secondary)]",
35
- destructive: "bg-[var(--axis-button-destructive-bg-default)] text-white hover:bg-[var(--axis-button-destructive-bg-hover)]"
36
- };
37
- function ApprovalCard({
38
- id,
39
- title,
40
- description,
41
- severity = "info",
42
- actions,
43
- children,
44
- className
45
- }) {
46
- const styles = severityStyles[severity];
47
- const generatedId = React.useId();
48
- const baseId = id || generatedId;
49
- const titleId = `${baseId}-title`;
50
- const descId = `${baseId}-desc`;
51
- const severityLabel = SEVERITY_LABELS[severity];
52
- return /* @__PURE__ */ jsx(
53
- "div",
54
- {
55
- role: "region",
56
- "aria-labelledby": titleId,
57
- "aria-describedby": description ? descId : void 0,
58
- className: cn(
59
- "rounded-lg border border-l-4 p-4",
60
- "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
61
- styles.border,
62
- className
63
- ),
64
- children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
65
- /* @__PURE__ */ jsx("div", { className: cn("flex-shrink-0 mt-0.5", styles.icon), "aria-hidden": "true", children: severityIcons[severity] }),
66
- /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
67
- /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
68
- severityLabel,
69
- " \uC54C\uB9BC:"
70
- ] }),
71
- /* @__PURE__ */ jsx("h4", { id: titleId, className: "text-sm font-semibold text-[var(--axis-text-primary)]", children: title }),
72
- description && /* @__PURE__ */ jsx("p", { id: descId, className: "mt-1 text-sm text-[var(--axis-text-secondary)]", children: description }),
73
- children && /* @__PURE__ */ jsx("div", { className: "mt-3", children }),
74
- /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 mt-4", children: actions.map((action, index) => /* @__PURE__ */ jsx(
75
- "button",
76
- {
77
- onClick: action.onClick,
78
- className: cn(
79
- "px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
80
- actionVariantStyles[action.variant || "default"]
81
- ),
82
- children: action.label
83
- },
84
- index
85
- )) })
86
- ] })
87
- ] })
88
- }
89
- );
90
- }
91
-
92
- export {
93
- ApprovalCard
94
- };
@@ -1,114 +0,0 @@
1
- // src/run-progress/index.tsx
2
- import * as React from "react";
3
- import { cn } from "@axis-ds/ui-react";
4
- import { jsx, jsxs } from "react/jsx-runtime";
5
- var statusColors = {
6
- pending: "bg-[var(--axis-color-gray-300)]",
7
- running: "bg-[var(--axis-color-blue-500)] animate-pulse",
8
- complete: "bg-[var(--axis-color-green-500)]",
9
- error: "bg-[var(--axis-color-red-500)]"
10
- };
11
- var statusIcons = {
12
- pending: null,
13
- running: /* @__PURE__ */ jsxs("svg", { className: "w-3 h-3 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
14
- /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
15
- /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
16
- ] }),
17
- complete: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
18
- error: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
19
- };
20
- function RunProgress({
21
- status,
22
- steps,
23
- currentStep,
24
- onCancel,
25
- onRetry,
26
- className
27
- }) {
28
- const progressPercent = React.useMemo(() => {
29
- const completed = steps.filter((s) => s.status === "complete").length;
30
- return Math.round(completed / steps.length * 100);
31
- }, [steps]);
32
- return /* @__PURE__ */ jsxs(
33
- "div",
34
- {
35
- className: cn(
36
- "rounded-lg border p-4",
37
- "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
38
- className
39
- ),
40
- children: [
41
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
42
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
43
- status === "running" && /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[var(--axis-color-blue-500)] animate-pulse" }),
44
- /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[var(--axis-text-primary)]", children: [
45
- status === "idle" && "\uB300\uAE30 \uC911",
46
- status === "running" && "\uC2E4\uD589 \uC911",
47
- status === "complete" && "\uC644\uB8CC",
48
- status === "error" && "\uC624\uB958 \uBC1C\uC0DD"
49
- ] })
50
- ] }),
51
- /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-text-secondary)]", children: [
52
- progressPercent,
53
- "%"
54
- ] })
55
- ] }),
56
- /* @__PURE__ */ jsx("div", { className: "w-full h-1.5 rounded-full bg-[var(--axis-surface-secondary)] mb-4", children: /* @__PURE__ */ jsx(
57
- "div",
58
- {
59
- className: "h-full rounded-full bg-[var(--axis-color-blue-500)] transition-all duration-300",
60
- style: { width: `${progressPercent}%` }
61
- }
62
- ) }),
63
- /* @__PURE__ */ jsx("div", { className: "space-y-2", children: steps.map((step, index) => /* @__PURE__ */ jsxs(
64
- "div",
65
- {
66
- className: cn(
67
- "flex items-center gap-3 p-2 rounded-md transition-colors",
68
- currentStep === index && "bg-[var(--axis-surface-secondary)]"
69
- ),
70
- children: [
71
- /* @__PURE__ */ jsx(
72
- "div",
73
- {
74
- className: cn(
75
- "w-5 h-5 rounded-full flex items-center justify-center text-white text-xs",
76
- statusColors[step.status]
77
- ),
78
- children: statusIcons[step.status] || index + 1
79
- }
80
- ),
81
- /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
82
- /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--axis-text-primary)] truncate", children: step.label }),
83
- step.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--axis-text-secondary)] truncate", children: step.description })
84
- ] })
85
- ]
86
- },
87
- step.id
88
- )) }),
89
- (onCancel || onRetry) && /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 mt-4 pt-4 border-t border-[var(--axis-border-default)]", children: [
90
- status === "running" && onCancel && /* @__PURE__ */ jsx(
91
- "button",
92
- {
93
- onClick: onCancel,
94
- className: "px-3 py-1.5 text-sm rounded-md bg-[var(--axis-surface-secondary)] text-[var(--axis-text-primary)] hover:bg-[var(--axis-surface-tertiary)]",
95
- children: "\uCDE8\uC18C"
96
- }
97
- ),
98
- status === "error" && onRetry && /* @__PURE__ */ jsx(
99
- "button",
100
- {
101
- onClick: onRetry,
102
- className: "px-3 py-1.5 text-sm rounded-md bg-[var(--axis-color-blue-500)] text-white hover:bg-[var(--axis-color-blue-600)]",
103
- children: "\uC7AC\uC2DC\uB3C4"
104
- }
105
- )
106
- ] })
107
- ]
108
- }
109
- );
110
- }
111
-
112
- export {
113
- RunProgress
114
- };
@@ -1,63 +0,0 @@
1
- // src/step-timeline/index.tsx
2
- import { cn } from "@axis-ds/ui-react";
3
- import { jsx, jsxs } from "react/jsx-runtime";
4
- function StepTimeline({
5
- steps,
6
- orientation = "vertical",
7
- className
8
- }) {
9
- const isVertical = orientation === "vertical";
10
- return /* @__PURE__ */ jsx(
11
- "div",
12
- {
13
- className: cn(
14
- isVertical ? "flex flex-col gap-4" : "flex items-center gap-2",
15
- className
16
- ),
17
- children: steps.map((step, index) => /* @__PURE__ */ jsxs(
18
- "div",
19
- {
20
- className: cn(
21
- "relative flex",
22
- isVertical ? "items-start gap-3" : "flex-col items-center"
23
- ),
24
- children: [
25
- index < steps.length - 1 && /* @__PURE__ */ jsx(
26
- "div",
27
- {
28
- className: cn(
29
- "absolute bg-[var(--axis-border-default)]",
30
- isVertical ? "left-2.5 top-6 w-0.5 h-full -translate-x-1/2" : "top-2.5 left-6 h-0.5 w-full"
31
- )
32
- }
33
- ),
34
- /* @__PURE__ */ jsx(
35
- "div",
36
- {
37
- className: cn(
38
- "relative z-10 w-5 h-5 rounded-full flex items-center justify-center",
39
- step.status === "complete" && "bg-[var(--axis-color-green-500)]",
40
- step.status === "running" && "bg-[var(--axis-color-blue-500)] animate-pulse",
41
- step.status === "error" && "bg-[var(--axis-color-red-500)]",
42
- step.status === "skipped" && "bg-[var(--axis-color-gray-300)]",
43
- step.status === "pending" && "bg-[var(--axis-color-gray-300)]"
44
- ),
45
- children: step.status === "complete" && /* @__PURE__ */ jsx("svg", { className: "w-3 h-3 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) })
46
- }
47
- ),
48
- /* @__PURE__ */ jsxs("div", { className: cn(isVertical ? "flex-1" : "text-center mt-2"), children: [
49
- /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--axis-text-primary)]", children: step.label }),
50
- step.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--axis-text-secondary)]", children: step.description }),
51
- step.timestamp && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--axis-text-tertiary)]", children: step.timestamp.toLocaleTimeString() })
52
- ] })
53
- ]
54
- },
55
- step.id
56
- ))
57
- }
58
- );
59
- }
60
-
61
- export {
62
- StepTimeline
63
- };
@@ -1,68 +0,0 @@
1
- // src/recovery-banner/index.tsx
2
- import { cn } from "@axis-ds/ui-react";
3
- import { jsx, jsxs } from "react/jsx-runtime";
4
- function RecoveryBanner({
5
- message,
6
- description,
7
- onRetry,
8
- onDismiss,
9
- className
10
- }) {
11
- return /* @__PURE__ */ jsxs(
12
- "div",
13
- {
14
- className: cn(
15
- "flex items-start gap-3 p-4 rounded-lg border",
16
- "bg-[var(--axis-surface-error)] border-[var(--axis-color-red-200)]",
17
- className
18
- ),
19
- role: "alert",
20
- children: [
21
- /* @__PURE__ */ jsx(
22
- "svg",
23
- {
24
- className: "w-5 h-5 text-[var(--axis-color-red-500)] flex-shrink-0 mt-0.5",
25
- fill: "none",
26
- stroke: "currentColor",
27
- viewBox: "0 0 24 24",
28
- children: /* @__PURE__ */ jsx(
29
- "path",
30
- {
31
- strokeLinecap: "round",
32
- strokeLinejoin: "round",
33
- strokeWidth: 2,
34
- d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
35
- }
36
- )
37
- }
38
- ),
39
- /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
40
- /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--axis-text-error)]", children: message }),
41
- description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[var(--axis-text-secondary)]", children: description }),
42
- /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-3", children: [
43
- onRetry && /* @__PURE__ */ jsx(
44
- "button",
45
- {
46
- onClick: onRetry,
47
- className: "px-3 py-1.5 text-sm font-medium rounded-md bg-[var(--axis-color-red-500)] text-white hover:bg-[var(--axis-color-red-600)] transition-colors",
48
- children: "\uC7AC\uC2DC\uB3C4"
49
- }
50
- ),
51
- onDismiss && /* @__PURE__ */ jsx(
52
- "button",
53
- {
54
- onClick: onDismiss,
55
- className: "px-3 py-1.5 text-sm font-medium rounded-md bg-transparent text-[var(--axis-text-primary)] hover:bg-[var(--axis-surface-secondary)] transition-colors",
56
- children: "\uBB34\uC2DC"
57
- }
58
- )
59
- ] })
60
- ] })
61
- ]
62
- }
63
- );
64
- }
65
-
66
- export {
67
- RecoveryBanner
68
- };
@@ -1,115 +0,0 @@
1
- import {
2
- STATUS_LABELS
3
- } from "./chunk-HWISMHCP.mjs";
4
-
5
- // src/tool-call-card/index.tsx
6
- import * as React from "react";
7
- import { cn } from "@axis-ds/ui-react";
8
- import { jsx, jsxs } from "react/jsx-runtime";
9
- var statusConfig = {
10
- pending: {
11
- color: "text-[var(--axis-color-gray-400)]",
12
- icon: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 }) })
13
- },
14
- running: {
15
- color: "text-[var(--axis-color-blue-500)]",
16
- icon: /* @__PURE__ */ jsxs("svg", { className: "w-4 h-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
17
- /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
18
- /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
19
- ] })
20
- },
21
- success: {
22
- color: "text-[var(--axis-color-green-500)]",
23
- icon: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })
24
- },
25
- error: {
26
- color: "text-[var(--axis-color-red-500)]",
27
- icon: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
28
- }
29
- };
30
- function ToolCallCard({
31
- toolName,
32
- description,
33
- status,
34
- input,
35
- output,
36
- error,
37
- duration,
38
- defaultExpanded = false,
39
- "aria-label": ariaLabel,
40
- className
41
- }) {
42
- const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
43
- const config = statusConfig[status];
44
- const contentId = React.useId();
45
- const statusLabel = STATUS_LABELS[status] || status;
46
- return /* @__PURE__ */ jsxs(
47
- "div",
48
- {
49
- className: cn(
50
- "rounded-lg border overflow-hidden",
51
- "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
52
- className
53
- ),
54
- children: [
55
- /* @__PURE__ */ jsxs(
56
- "button",
57
- {
58
- onClick: () => setIsExpanded(!isExpanded),
59
- "aria-expanded": isExpanded,
60
- "aria-controls": contentId,
61
- "aria-label": ariaLabel || `${toolName} - ${statusLabel}`,
62
- className: "w-full flex items-center justify-between p-3 hover:bg-[var(--axis-surface-secondary)] transition-colors",
63
- children: [
64
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
65
- /* @__PURE__ */ jsx("span", { className: config.color, "aria-hidden": "true", children: config.icon }),
66
- /* @__PURE__ */ jsx("code", { className: "text-sm font-mono text-[var(--axis-text-primary)]", children: toolName }),
67
- description && /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-text-secondary)]", children: [
68
- "\u2014 ",
69
- description
70
- ] })
71
- ] }),
72
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
73
- duration !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: [
74
- duration,
75
- "ms"
76
- ] }),
77
- /* @__PURE__ */ jsx(
78
- "svg",
79
- {
80
- className: cn(
81
- "w-4 h-4 text-[var(--axis-text-secondary)] transition-transform",
82
- isExpanded && "rotate-180"
83
- ),
84
- fill: "none",
85
- stroke: "currentColor",
86
- viewBox: "0 0 24 24",
87
- children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
88
- }
89
- )
90
- ] })
91
- ]
92
- }
93
- ),
94
- isExpanded && /* @__PURE__ */ jsxs("div", { id: contentId, className: "border-t border-[var(--axis-border-default)] p-3 space-y-3", children: [
95
- input && /* @__PURE__ */ jsxs("div", { children: [
96
- /* @__PURE__ */ jsx("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uC785\uB825" }),
97
- /* @__PURE__ */ jsx("pre", { className: "text-xs p-2 rounded bg-[var(--axis-surface-secondary)] overflow-x-auto", children: /* @__PURE__ */ jsx("code", { className: "text-[var(--axis-text-primary)]", children: JSON.stringify(input, null, 2) }) })
98
- ] }),
99
- output !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
100
- /* @__PURE__ */ jsx("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uCD9C\uB825" }),
101
- /* @__PURE__ */ jsx("pre", { className: "text-xs p-2 rounded bg-[var(--axis-surface-secondary)] overflow-x-auto", children: /* @__PURE__ */ jsx("code", { className: "text-[var(--axis-text-primary)]", children: typeof output === "string" ? output : JSON.stringify(output, null, 2) }) })
102
- ] }),
103
- error && /* @__PURE__ */ jsxs("div", { children: [
104
- /* @__PURE__ */ jsx("h5", { className: "text-xs font-medium text-[var(--axis-text-error)] mb-1", children: "\uC5D0\uB7EC" }),
105
- /* @__PURE__ */ jsx("pre", { className: "text-xs p-2 rounded bg-[var(--axis-surface-error)] overflow-x-auto", children: /* @__PURE__ */ jsx("code", { className: "text-[var(--axis-text-error)]", children: error }) })
106
- ] })
107
- ] })
108
- ]
109
- }
110
- );
111
- }
112
-
113
- export {
114
- ToolCallCard
115
- };