@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 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.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.1",
92
- "@axis-ds/ui-react": "1.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
  }
@@ -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
- };
@@ -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
- };
@@ -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
- };
@@ -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
- };
@@ -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
- };
@@ -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
- };