@axis-ds/agentic-ui 1.1.1 → 1.1.3
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/index.mjs +6 -6
- package/package.json +7 -3
- package/dist/chunk-2BWCQQLU.mjs +0 -136
- package/dist/chunk-3TH7GFBD.mjs +0 -83
- package/dist/chunk-4PCJFQHQ.mjs +0 -66
- package/dist/chunk-D6GHMPBC.mjs +0 -76
- package/dist/chunk-DPENLPBM.mjs +0 -105
- package/dist/chunk-EF4MECAI.mjs +0 -81
- package/dist/chunk-HLW7VEFF.mjs +0 -47
- package/dist/chunk-HWISMHCP.mjs +0 -33
- package/dist/chunk-MGQ7AEYE.mjs +0 -94
- package/dist/chunk-O5VXD6C3.mjs +0 -114
- package/dist/chunk-O5WFJCWK.mjs +0 -63
- package/dist/chunk-OOFM7NNH.mjs +0 -68
- package/dist/chunk-PAKLXPHD.mjs +0 -115
- package/dist/chunk-S3HVRSN2.mjs +0 -95
- package/dist/chunk-TCCZL2D5.mjs +0 -51
- package/dist/chunk-TKUAT5WE.mjs +0 -105
- package/dist/chunk-UG4H7RIP.mjs +0 -77
- package/dist/chunk-VKLPWFAI.mjs +0 -79
package/dist/index.mjs
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import {
|
|
2
2
|
ThinkingIndicator
|
|
3
3
|
} from "./chunk-FYAMA32G.mjs";
|
|
4
|
-
import {
|
|
5
|
-
ToolCallCard
|
|
6
|
-
} from "./chunk-FAJF5RCY.mjs";
|
|
7
4
|
import {
|
|
8
5
|
TokenUsageIndicator
|
|
9
6
|
} from "./chunk-H6VXOP7U.mjs";
|
|
7
|
+
import {
|
|
8
|
+
ToolCallCard
|
|
9
|
+
} from "./chunk-FAJF5RCY.mjs";
|
|
10
10
|
import {
|
|
11
11
|
MessageBubble
|
|
12
12
|
} from "./chunk-657RY6MM.mjs";
|
|
@@ -40,12 +40,12 @@ import {
|
|
|
40
40
|
import {
|
|
41
41
|
AttachmentCard
|
|
42
42
|
} from "./chunk-FPOHPDZ2.mjs";
|
|
43
|
-
import {
|
|
44
|
-
ContextPanel
|
|
45
|
-
} from "./chunk-KJVPVBET.mjs";
|
|
46
43
|
import {
|
|
47
44
|
CodeBlock
|
|
48
45
|
} from "./chunk-RGBY6EEU.mjs";
|
|
46
|
+
import {
|
|
47
|
+
ContextPanel
|
|
48
|
+
} from "./chunk-KJVPVBET.mjs";
|
|
49
49
|
import {
|
|
50
50
|
DiffViewer
|
|
51
51
|
} from "./chunk-NRBIHROX.mjs";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@axis-ds/agentic-ui",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.3",
|
|
4
4
|
"description": "AXIS Design System - Agentic UI Components for AI/LLM Applications",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -88,14 +88,17 @@
|
|
|
88
88
|
"clsx": "^2.1.0",
|
|
89
89
|
"framer-motion": "^11.0.0",
|
|
90
90
|
"tailwind-merge": "^2.5.0",
|
|
91
|
-
"@axis-ds/tokens": "1.1.
|
|
92
|
-
"@axis-ds/ui-react": "1.1.
|
|
91
|
+
"@axis-ds/tokens": "1.1.3",
|
|
92
|
+
"@axis-ds/ui-react": "1.1.3"
|
|
93
93
|
},
|
|
94
94
|
"devDependencies": {
|
|
95
95
|
"@testing-library/jest-dom": "^6.9.1",
|
|
96
96
|
"@testing-library/react": "^16.3.2",
|
|
97
97
|
"@types/react": "^18.2.0",
|
|
98
98
|
"@vitejs/plugin-react": "^5.1.2",
|
|
99
|
+
"@vitest/coverage-v8": "^2.1.0",
|
|
100
|
+
"jest-axe": "^9.0.0",
|
|
101
|
+
"@types/jest-axe": "^3.5.9",
|
|
99
102
|
"jsdom": "^27.4.0",
|
|
100
103
|
"react": "^18.2.0",
|
|
101
104
|
"react-dom": "^18.2.0",
|
|
@@ -124,6 +127,7 @@
|
|
|
124
127
|
"dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react",
|
|
125
128
|
"clean": "rm -rf dist",
|
|
126
129
|
"test": "vitest run",
|
|
130
|
+
"test:coverage": "vitest run --coverage",
|
|
127
131
|
"test:watch": "vitest",
|
|
128
132
|
"type-check": "tsc --noEmit"
|
|
129
133
|
}
|
package/dist/chunk-2BWCQQLU.mjs
DELETED
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
STATUS_LABELS
|
|
3
|
-
} from "./chunk-HWISMHCP.mjs";
|
|
4
|
-
|
|
5
|
-
// src/run-progress/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 statusColors = {
|
|
10
|
-
pending: "bg-[var(--axis-color-gray-300)]",
|
|
11
|
-
running: "bg-[var(--axis-color-blue-500)] animate-pulse",
|
|
12
|
-
complete: "bg-[var(--axis-color-green-500)]",
|
|
13
|
-
error: "bg-[var(--axis-color-red-500)]"
|
|
14
|
-
};
|
|
15
|
-
var statusIcons = {
|
|
16
|
-
pending: null,
|
|
17
|
-
running: /* @__PURE__ */ jsxs("svg", { className: "w-3 h-3 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
|
|
18
|
-
/* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
|
|
19
|
-
/* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
|
|
20
|
-
] }),
|
|
21
|
-
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" }) }),
|
|
22
|
-
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" }) })
|
|
23
|
-
};
|
|
24
|
-
function RunProgress({
|
|
25
|
-
status,
|
|
26
|
-
steps,
|
|
27
|
-
currentStep,
|
|
28
|
-
onCancel,
|
|
29
|
-
onRetry,
|
|
30
|
-
className
|
|
31
|
-
}) {
|
|
32
|
-
const progressPercent = React.useMemo(() => {
|
|
33
|
-
const completed = steps.filter((s) => s.status === "complete").length;
|
|
34
|
-
return Math.round(completed / steps.length * 100);
|
|
35
|
-
}, [steps]);
|
|
36
|
-
return /* @__PURE__ */ jsxs(
|
|
37
|
-
"div",
|
|
38
|
-
{
|
|
39
|
-
className: cn(
|
|
40
|
-
"rounded-lg border p-4",
|
|
41
|
-
"bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
|
|
42
|
-
className
|
|
43
|
-
),
|
|
44
|
-
children: [
|
|
45
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
|
|
46
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
47
|
-
status === "running" && /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[var(--axis-color-blue-500)] animate-pulse" }),
|
|
48
|
-
/* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[var(--axis-text-primary)]", children: [
|
|
49
|
-
status === "idle" && "\uB300\uAE30 \uC911",
|
|
50
|
-
status === "running" && "\uC2E4\uD589 \uC911",
|
|
51
|
-
status === "complete" && "\uC644\uB8CC",
|
|
52
|
-
status === "error" && "\uC624\uB958 \uBC1C\uC0DD"
|
|
53
|
-
] })
|
|
54
|
-
] }),
|
|
55
|
-
/* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-text-secondary)]", children: [
|
|
56
|
-
progressPercent,
|
|
57
|
-
"%"
|
|
58
|
-
] })
|
|
59
|
-
] }),
|
|
60
|
-
/* @__PURE__ */ jsx(
|
|
61
|
-
"div",
|
|
62
|
-
{
|
|
63
|
-
role: "progressbar",
|
|
64
|
-
"aria-valuenow": progressPercent,
|
|
65
|
-
"aria-valuemin": 0,
|
|
66
|
-
"aria-valuemax": 100,
|
|
67
|
-
"aria-label": `\uC2E4\uD589 \uC9C4\uD589\uB960 ${progressPercent}%`,
|
|
68
|
-
className: "w-full h-1.5 rounded-full bg-[var(--axis-surface-secondary)] mb-4",
|
|
69
|
-
children: /* @__PURE__ */ jsx(
|
|
70
|
-
"div",
|
|
71
|
-
{
|
|
72
|
-
className: "h-full rounded-full bg-[var(--axis-color-blue-500)] transition-all duration-300",
|
|
73
|
-
style: { width: `${progressPercent}%` }
|
|
74
|
-
}
|
|
75
|
-
)
|
|
76
|
-
}
|
|
77
|
-
),
|
|
78
|
-
/* @__PURE__ */ jsx("div", { role: "list", "aria-label": "\uC2E4\uD589 \uB2E8\uACC4", className: "space-y-2", children: steps.map((step, index) => /* @__PURE__ */ jsxs(
|
|
79
|
-
"div",
|
|
80
|
-
{
|
|
81
|
-
role: "listitem",
|
|
82
|
-
"aria-current": currentStep === index ? "step" : void 0,
|
|
83
|
-
className: cn(
|
|
84
|
-
"flex items-center gap-3 p-2 rounded-md transition-colors",
|
|
85
|
-
currentStep === index && "bg-[var(--axis-surface-secondary)]"
|
|
86
|
-
),
|
|
87
|
-
children: [
|
|
88
|
-
/* @__PURE__ */ jsx(
|
|
89
|
-
"div",
|
|
90
|
-
{
|
|
91
|
-
className: cn(
|
|
92
|
-
"w-5 h-5 rounded-full flex items-center justify-center text-white text-xs",
|
|
93
|
-
statusColors[step.status]
|
|
94
|
-
),
|
|
95
|
-
"aria-hidden": "true",
|
|
96
|
-
children: statusIcons[step.status] || index + 1
|
|
97
|
-
}
|
|
98
|
-
),
|
|
99
|
-
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
100
|
-
/* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
|
|
101
|
-
STATUS_LABELS[step.status],
|
|
102
|
-
":"
|
|
103
|
-
] }),
|
|
104
|
-
/* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--axis-text-primary)] truncate", children: step.label }),
|
|
105
|
-
step.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--axis-text-secondary)] truncate", children: step.description })
|
|
106
|
-
] })
|
|
107
|
-
]
|
|
108
|
-
},
|
|
109
|
-
step.id
|
|
110
|
-
)) }),
|
|
111
|
-
(onCancel || onRetry) && /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 mt-4 pt-4 border-t border-[var(--axis-border-default)]", children: [
|
|
112
|
-
status === "running" && onCancel && /* @__PURE__ */ jsx(
|
|
113
|
-
"button",
|
|
114
|
-
{
|
|
115
|
-
onClick: onCancel,
|
|
116
|
-
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)]",
|
|
117
|
-
children: "\uCDE8\uC18C"
|
|
118
|
-
}
|
|
119
|
-
),
|
|
120
|
-
status === "error" && onRetry && /* @__PURE__ */ jsx(
|
|
121
|
-
"button",
|
|
122
|
-
{
|
|
123
|
-
onClick: onRetry,
|
|
124
|
-
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)]",
|
|
125
|
-
children: "\uC7AC\uC2DC\uB3C4"
|
|
126
|
-
}
|
|
127
|
-
)
|
|
128
|
-
] })
|
|
129
|
-
]
|
|
130
|
-
}
|
|
131
|
-
);
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
export {
|
|
135
|
-
RunProgress
|
|
136
|
-
};
|
package/dist/chunk-3TH7GFBD.mjs
DELETED
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
AGENT_STATUS_LABELS
|
|
3
|
-
} from "./chunk-HWISMHCP.mjs";
|
|
4
|
-
|
|
5
|
-
// src/agent-avatar/index.tsx
|
|
6
|
-
import { cn } from "@axis-ds/ui-react";
|
|
7
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
-
var sizeStyles = {
|
|
9
|
-
sm: "w-6 h-6 text-xs",
|
|
10
|
-
md: "w-8 h-8 text-sm",
|
|
11
|
-
lg: "w-10 h-10 text-base",
|
|
12
|
-
xl: "w-12 h-12 text-lg"
|
|
13
|
-
};
|
|
14
|
-
var statusStyles = {
|
|
15
|
-
online: "bg-[var(--axis-color-green-500)]",
|
|
16
|
-
busy: "bg-[var(--axis-color-yellow-500)]",
|
|
17
|
-
offline: "bg-[var(--axis-color-gray-400)]"
|
|
18
|
-
};
|
|
19
|
-
var typeColors = {
|
|
20
|
-
assistant: "bg-[var(--axis-color-purple-500)]",
|
|
21
|
-
tool: "bg-[var(--axis-color-blue-500)]",
|
|
22
|
-
system: "bg-[var(--axis-color-gray-600)]"
|
|
23
|
-
};
|
|
24
|
-
function AgentAvatar({
|
|
25
|
-
name,
|
|
26
|
-
src,
|
|
27
|
-
size = "md",
|
|
28
|
-
status,
|
|
29
|
-
type = "assistant",
|
|
30
|
-
className
|
|
31
|
-
}) {
|
|
32
|
-
const initials = name.split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase();
|
|
33
|
-
const statusLabel = status ? AGENT_STATUS_LABELS[status] : "";
|
|
34
|
-
const ariaLabel = `${name}${statusLabel ? `, ${statusLabel}` : ""}`;
|
|
35
|
-
return /* @__PURE__ */ jsxs(
|
|
36
|
-
"div",
|
|
37
|
-
{
|
|
38
|
-
role: "img",
|
|
39
|
-
"aria-label": ariaLabel,
|
|
40
|
-
className: cn("relative inline-flex", className),
|
|
41
|
-
children: [
|
|
42
|
-
src ? /* @__PURE__ */ jsx(
|
|
43
|
-
"img",
|
|
44
|
-
{
|
|
45
|
-
src,
|
|
46
|
-
alt: "",
|
|
47
|
-
"aria-hidden": "true",
|
|
48
|
-
className: cn(
|
|
49
|
-
"rounded-full object-cover",
|
|
50
|
-
sizeStyles[size]
|
|
51
|
-
)
|
|
52
|
-
}
|
|
53
|
-
) : /* @__PURE__ */ jsx(
|
|
54
|
-
"div",
|
|
55
|
-
{
|
|
56
|
-
"aria-hidden": "true",
|
|
57
|
-
className: cn(
|
|
58
|
-
"rounded-full flex items-center justify-center font-medium text-white",
|
|
59
|
-
sizeStyles[size],
|
|
60
|
-
typeColors[type]
|
|
61
|
-
),
|
|
62
|
-
children: initials
|
|
63
|
-
}
|
|
64
|
-
),
|
|
65
|
-
status && /* @__PURE__ */ jsx(
|
|
66
|
-
"span",
|
|
67
|
-
{
|
|
68
|
-
"aria-hidden": "true",
|
|
69
|
-
className: cn(
|
|
70
|
-
"absolute bottom-0 right-0 rounded-full border-2 border-[var(--axis-surface-default)]",
|
|
71
|
-
size === "sm" ? "w-2 h-2" : "w-3 h-3",
|
|
72
|
-
statusStyles[status]
|
|
73
|
-
)
|
|
74
|
-
}
|
|
75
|
-
)
|
|
76
|
-
]
|
|
77
|
-
}
|
|
78
|
-
);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
export {
|
|
82
|
-
AgentAvatar
|
|
83
|
-
};
|
package/dist/chunk-4PCJFQHQ.mjs
DELETED
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
// src/agent-avatar/index.tsx
|
|
2
|
-
import { cn } from "@axis-ds/ui-react";
|
|
3
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
var sizeStyles = {
|
|
5
|
-
sm: "w-6 h-6 text-xs",
|
|
6
|
-
md: "w-8 h-8 text-sm",
|
|
7
|
-
lg: "w-10 h-10 text-base",
|
|
8
|
-
xl: "w-12 h-12 text-lg"
|
|
9
|
-
};
|
|
10
|
-
var statusStyles = {
|
|
11
|
-
online: "bg-[var(--axis-color-green-500)]",
|
|
12
|
-
busy: "bg-[var(--axis-color-yellow-500)]",
|
|
13
|
-
offline: "bg-[var(--axis-color-gray-400)]"
|
|
14
|
-
};
|
|
15
|
-
var typeColors = {
|
|
16
|
-
assistant: "bg-[var(--axis-color-purple-500)]",
|
|
17
|
-
tool: "bg-[var(--axis-color-blue-500)]",
|
|
18
|
-
system: "bg-[var(--axis-color-gray-600)]"
|
|
19
|
-
};
|
|
20
|
-
function AgentAvatar({
|
|
21
|
-
name,
|
|
22
|
-
src,
|
|
23
|
-
size = "md",
|
|
24
|
-
status,
|
|
25
|
-
type = "assistant",
|
|
26
|
-
className
|
|
27
|
-
}) {
|
|
28
|
-
const initials = name.split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase();
|
|
29
|
-
return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-flex", className), children: [
|
|
30
|
-
src ? /* @__PURE__ */ jsx(
|
|
31
|
-
"img",
|
|
32
|
-
{
|
|
33
|
-
src,
|
|
34
|
-
alt: name,
|
|
35
|
-
className: cn(
|
|
36
|
-
"rounded-full object-cover",
|
|
37
|
-
sizeStyles[size]
|
|
38
|
-
)
|
|
39
|
-
}
|
|
40
|
-
) : /* @__PURE__ */ jsx(
|
|
41
|
-
"div",
|
|
42
|
-
{
|
|
43
|
-
className: cn(
|
|
44
|
-
"rounded-full flex items-center justify-center font-medium text-white",
|
|
45
|
-
sizeStyles[size],
|
|
46
|
-
typeColors[type]
|
|
47
|
-
),
|
|
48
|
-
children: initials
|
|
49
|
-
}
|
|
50
|
-
),
|
|
51
|
-
status && /* @__PURE__ */ jsx(
|
|
52
|
-
"span",
|
|
53
|
-
{
|
|
54
|
-
className: cn(
|
|
55
|
-
"absolute bottom-0 right-0 rounded-full border-2 border-[var(--axis-surface-default)]",
|
|
56
|
-
size === "sm" ? "w-2 h-2" : "w-3 h-3",
|
|
57
|
-
statusStyles[status]
|
|
58
|
-
)
|
|
59
|
-
}
|
|
60
|
-
)
|
|
61
|
-
] });
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
export {
|
|
65
|
-
AgentAvatar
|
|
66
|
-
};
|
package/dist/chunk-D6GHMPBC.mjs
DELETED
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
// src/approval-card/index.tsx
|
|
2
|
-
import { cn } from "@axis-ds/ui-react";
|
|
3
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
var severityStyles = {
|
|
5
|
-
info: {
|
|
6
|
-
border: "border-l-[var(--axis-color-blue-500)]",
|
|
7
|
-
icon: "text-[var(--axis-color-blue-500)]",
|
|
8
|
-
bg: "bg-[var(--axis-surface-info)]"
|
|
9
|
-
},
|
|
10
|
-
warning: {
|
|
11
|
-
border: "border-l-[var(--axis-color-yellow-500)]",
|
|
12
|
-
icon: "text-[var(--axis-color-yellow-500)]",
|
|
13
|
-
bg: "bg-[var(--axis-surface-warning)]"
|
|
14
|
-
},
|
|
15
|
-
error: {
|
|
16
|
-
border: "border-l-[var(--axis-color-red-500)]",
|
|
17
|
-
icon: "text-[var(--axis-color-red-500)]",
|
|
18
|
-
bg: "bg-[var(--axis-surface-error)]"
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
var severityIcons = {
|
|
22
|
-
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" }) }),
|
|
23
|
-
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" }) }),
|
|
24
|
-
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" }) })
|
|
25
|
-
};
|
|
26
|
-
var actionVariantStyles = {
|
|
27
|
-
default: "bg-[var(--axis-button-bg-default)] text-white hover:bg-[var(--axis-button-bg-hover)]",
|
|
28
|
-
secondary: "bg-[var(--axis-button-secondary-bg-default)] text-[var(--axis-text-primary)] hover:bg-[var(--axis-button-secondary-bg-hover)]",
|
|
29
|
-
ghost: "bg-transparent text-[var(--axis-text-primary)] hover:bg-[var(--axis-surface-secondary)]",
|
|
30
|
-
destructive: "bg-[var(--axis-button-destructive-bg-default)] text-white hover:bg-[var(--axis-button-destructive-bg-hover)]"
|
|
31
|
-
};
|
|
32
|
-
function ApprovalCard({
|
|
33
|
-
title,
|
|
34
|
-
description,
|
|
35
|
-
severity = "info",
|
|
36
|
-
actions,
|
|
37
|
-
children,
|
|
38
|
-
className
|
|
39
|
-
}) {
|
|
40
|
-
const styles = severityStyles[severity];
|
|
41
|
-
return /* @__PURE__ */ jsx(
|
|
42
|
-
"div",
|
|
43
|
-
{
|
|
44
|
-
className: cn(
|
|
45
|
-
"rounded-lg border border-l-4 p-4",
|
|
46
|
-
"bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
|
|
47
|
-
styles.border,
|
|
48
|
-
className
|
|
49
|
-
),
|
|
50
|
-
children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
|
|
51
|
-
/* @__PURE__ */ jsx("div", { className: cn("flex-shrink-0 mt-0.5", styles.icon), children: severityIcons[severity] }),
|
|
52
|
-
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
53
|
-
/* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold text-[var(--axis-text-primary)]", children: title }),
|
|
54
|
-
description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[var(--axis-text-secondary)]", children: description }),
|
|
55
|
-
children && /* @__PURE__ */ jsx("div", { className: "mt-3", children }),
|
|
56
|
-
/* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 mt-4", children: actions.map((action, index) => /* @__PURE__ */ jsx(
|
|
57
|
-
"button",
|
|
58
|
-
{
|
|
59
|
-
onClick: action.onClick,
|
|
60
|
-
className: cn(
|
|
61
|
-
"px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
|
|
62
|
-
actionVariantStyles[action.variant || "default"]
|
|
63
|
-
),
|
|
64
|
-
children: action.label
|
|
65
|
-
},
|
|
66
|
-
index
|
|
67
|
-
)) })
|
|
68
|
-
] })
|
|
69
|
-
] })
|
|
70
|
-
}
|
|
71
|
-
);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
export {
|
|
75
|
-
ApprovalCard
|
|
76
|
-
};
|
package/dist/chunk-DPENLPBM.mjs
DELETED
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
// src/tool-call-card/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 statusConfig = {
|
|
6
|
-
pending: {
|
|
7
|
-
color: "text-[var(--axis-color-gray-400)]",
|
|
8
|
-
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 }) })
|
|
9
|
-
},
|
|
10
|
-
running: {
|
|
11
|
-
color: "text-[var(--axis-color-blue-500)]",
|
|
12
|
-
icon: /* @__PURE__ */ jsxs("svg", { className: "w-4 h-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
|
|
13
|
-
/* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
|
|
14
|
-
/* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
|
|
15
|
-
] })
|
|
16
|
-
},
|
|
17
|
-
success: {
|
|
18
|
-
color: "text-[var(--axis-color-green-500)]",
|
|
19
|
-
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" }) })
|
|
20
|
-
},
|
|
21
|
-
error: {
|
|
22
|
-
color: "text-[var(--axis-color-red-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: "M6 18L18 6M6 6l12 12" }) })
|
|
24
|
-
}
|
|
25
|
-
};
|
|
26
|
-
function ToolCallCard({
|
|
27
|
-
toolName,
|
|
28
|
-
description,
|
|
29
|
-
status,
|
|
30
|
-
input,
|
|
31
|
-
output,
|
|
32
|
-
error,
|
|
33
|
-
duration,
|
|
34
|
-
defaultExpanded = false,
|
|
35
|
-
className
|
|
36
|
-
}) {
|
|
37
|
-
const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
|
|
38
|
-
const config = statusConfig[status];
|
|
39
|
-
return /* @__PURE__ */ jsxs(
|
|
40
|
-
"div",
|
|
41
|
-
{
|
|
42
|
-
className: cn(
|
|
43
|
-
"rounded-lg border overflow-hidden",
|
|
44
|
-
"bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
|
|
45
|
-
className
|
|
46
|
-
),
|
|
47
|
-
children: [
|
|
48
|
-
/* @__PURE__ */ jsxs(
|
|
49
|
-
"button",
|
|
50
|
-
{
|
|
51
|
-
onClick: () => setIsExpanded(!isExpanded),
|
|
52
|
-
className: "w-full flex items-center justify-between p-3 hover:bg-[var(--axis-surface-secondary)] transition-colors",
|
|
53
|
-
children: [
|
|
54
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
55
|
-
/* @__PURE__ */ jsx("span", { className: config.color, children: config.icon }),
|
|
56
|
-
/* @__PURE__ */ jsx("code", { className: "text-sm font-mono text-[var(--axis-text-primary)]", children: toolName }),
|
|
57
|
-
description && /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-text-secondary)]", children: [
|
|
58
|
-
"\u2014 ",
|
|
59
|
-
description
|
|
60
|
-
] })
|
|
61
|
-
] }),
|
|
62
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
63
|
-
duration !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: [
|
|
64
|
-
duration,
|
|
65
|
-
"ms"
|
|
66
|
-
] }),
|
|
67
|
-
/* @__PURE__ */ jsx(
|
|
68
|
-
"svg",
|
|
69
|
-
{
|
|
70
|
-
className: cn(
|
|
71
|
-
"w-4 h-4 text-[var(--axis-text-secondary)] transition-transform",
|
|
72
|
-
isExpanded && "rotate-180"
|
|
73
|
-
),
|
|
74
|
-
fill: "none",
|
|
75
|
-
stroke: "currentColor",
|
|
76
|
-
viewBox: "0 0 24 24",
|
|
77
|
-
children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
|
|
78
|
-
}
|
|
79
|
-
)
|
|
80
|
-
] })
|
|
81
|
-
]
|
|
82
|
-
}
|
|
83
|
-
),
|
|
84
|
-
isExpanded && /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--axis-border-default)] p-3 space-y-3", children: [
|
|
85
|
-
input && /* @__PURE__ */ jsxs("div", { children: [
|
|
86
|
-
/* @__PURE__ */ jsx("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uC785\uB825" }),
|
|
87
|
-
/* @__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) }) })
|
|
88
|
-
] }),
|
|
89
|
-
output !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
|
|
90
|
-
/* @__PURE__ */ jsx("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uCD9C\uB825" }),
|
|
91
|
-
/* @__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) }) })
|
|
92
|
-
] }),
|
|
93
|
-
error && /* @__PURE__ */ jsxs("div", { children: [
|
|
94
|
-
/* @__PURE__ */ jsx("h5", { className: "text-xs font-medium text-[var(--axis-text-error)] mb-1", children: "\uC5D0\uB7EC" }),
|
|
95
|
-
/* @__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 }) })
|
|
96
|
-
] })
|
|
97
|
-
] })
|
|
98
|
-
]
|
|
99
|
-
}
|
|
100
|
-
);
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
export {
|
|
104
|
-
ToolCallCard
|
|
105
|
-
};
|
package/dist/chunk-EF4MECAI.mjs
DELETED
|
@@ -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
|
-
};
|
package/dist/chunk-HLW7VEFF.mjs
DELETED
|
@@ -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
|
-
};
|