@axis-ds/agentic-ui 1.4.0 → 1.5.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.
- package/README.md +42 -1
- package/dist/agent-avatar/index.js +6 -16
- package/dist/agent-avatar/index.mjs +75 -4
- package/dist/approval-card/index.js +6 -16
- package/dist/approval-card/index.mjs +86 -4
- package/dist/attachment-card/index.js +5 -17
- package/dist/attachment-card/index.mjs +101 -4
- package/dist/code-block/index.js +2 -3
- package/dist/code-block/index.mjs +76 -3
- package/dist/constants/a11y-labels.d.mts +86 -0
- package/dist/constants/a11y-labels.d.ts +86 -0
- package/dist/constants/a11y-labels.js +105 -0
- package/dist/{chunk-SCZ4BQ2G.mjs → constants/a11y-labels.mjs} +21 -17
- package/dist/context-panel/index.js +2 -3
- package/dist/context-panel/index.mjs +99 -3
- package/dist/diff-viewer/index.js +8 -17
- package/dist/diff-viewer/index.mjs +155 -4
- package/dist/feedback-buttons/index.js +7 -16
- package/dist/feedback-buttons/index.mjs +65 -4
- package/dist/index.js +36 -1732
- package/dist/index.mjs +18 -55
- package/dist/message-bubble/index.js +5 -15
- package/dist/message-bubble/index.mjs +98 -4
- package/dist/plan-card/index.js +6 -28
- package/dist/plan-card/index.mjs +143 -4
- package/dist/recovery-banner/index.js +1 -3
- package/dist/recovery-banner/index.mjs +70 -3
- package/dist/run-progress/index.js +5 -19
- package/dist/run-progress/index.mjs +128 -4
- package/dist/source-panel/index.js +5 -15
- package/dist/source-panel/index.mjs +88 -4
- package/dist/step-timeline/index.js +3 -17
- package/dist/step-timeline/index.mjs +69 -4
- package/dist/streaming-text/index.js +2 -3
- package/dist/streaming-text/index.mjs +59 -3
- package/dist/surface-renderer/index.js +1 -3
- package/dist/surface-renderer/index.mjs +79 -3
- package/dist/thinking-indicator/index.js +3 -5
- package/dist/thinking-indicator/index.mjs +45 -3
- package/dist/token-usage-indicator/index.js +1 -3
- package/dist/token-usage-indicator/index.mjs +81 -3
- package/dist/tool-call-card/index.js +5 -18
- package/dist/tool-call-card/index.mjs +108 -4
- package/package.json +35 -5
- package/dist/chunk-42KEAZ2Y.mjs +0 -109
- package/dist/chunk-4CMUEGLK.mjs +0 -80
- package/dist/chunk-4V4BWBRC.mjs +0 -77
- package/dist/chunk-7HTVJ6MK.mjs +0 -94
- package/dist/chunk-DPLGRVNQ.mjs +0 -95
- package/dist/chunk-FYAMA32G.mjs +0 -50
- package/dist/chunk-GQYOOLDL.mjs +0 -63
- package/dist/chunk-IOF4OET6.mjs +0 -162
- package/dist/chunk-J4FIMXXG.mjs +0 -106
- package/dist/chunk-JY7MTMMB.mjs +0 -83
- package/dist/chunk-KJVPVBET.mjs +0 -103
- package/dist/chunk-OYQX3SL4.mjs +0 -152
- package/dist/chunk-QS6GQNSE.mjs +0 -86
- package/dist/chunk-R4CMHIRO.mjs +0 -72
- package/dist/chunk-SCXUEQLI.mjs +0 -136
- package/dist/chunk-UDL4M5RP.mjs +0 -75
- package/dist/chunk-WFYQINWD.mjs +0 -115
- package/dist/chunk-ZW4Z27AB.mjs +0 -84
|
@@ -1,7 +1,131 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
} from "
|
|
4
|
-
import "../
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { cn } from "@axis-ds/ui-react";
|
|
4
|
+
import { STATUS_LABELS } from "../constants/a11y-labels.mjs";
|
|
5
|
+
const statusColors = {
|
|
6
|
+
pending: "bg-[var(--axis-status-neutral-muted)] text-[var(--axis-status-neutral-muted-contrast)]",
|
|
7
|
+
running: "bg-[var(--axis-status-running)] text-[var(--axis-status-running-contrast)] animate-pulse",
|
|
8
|
+
complete: "bg-[var(--axis-status-success)] text-[var(--axis-status-success-contrast)]",
|
|
9
|
+
error: "bg-[var(--axis-status-error)] text-[var(--axis-status-error-contrast)]"
|
|
10
|
+
};
|
|
11
|
+
const 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-status-running)] 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(
|
|
57
|
+
"div",
|
|
58
|
+
{
|
|
59
|
+
role: "progressbar",
|
|
60
|
+
"aria-valuenow": progressPercent,
|
|
61
|
+
"aria-valuemin": 0,
|
|
62
|
+
"aria-valuemax": 100,
|
|
63
|
+
"aria-label": `\uC2E4\uD589 \uC9C4\uD589\uB960 ${progressPercent}%`,
|
|
64
|
+
className: "w-full h-1.5 rounded-full bg-[var(--axis-surface-secondary)] mb-4",
|
|
65
|
+
children: /* @__PURE__ */ jsx(
|
|
66
|
+
"div",
|
|
67
|
+
{
|
|
68
|
+
className: "h-full rounded-full bg-[var(--axis-status-running)] transition-all duration-300",
|
|
69
|
+
style: { width: `${progressPercent}%` }
|
|
70
|
+
}
|
|
71
|
+
)
|
|
72
|
+
}
|
|
73
|
+
),
|
|
74
|
+
/* @__PURE__ */ jsx("div", { role: "list", "aria-label": "\uC2E4\uD589 \uB2E8\uACC4", className: "space-y-2", children: steps.map((step, index) => /* @__PURE__ */ jsxs(
|
|
75
|
+
"div",
|
|
76
|
+
{
|
|
77
|
+
role: "listitem",
|
|
78
|
+
"aria-current": currentStep === index ? "step" : void 0,
|
|
79
|
+
className: cn(
|
|
80
|
+
"flex items-center gap-3 p-2 rounded-md transition-colors",
|
|
81
|
+
currentStep === index && "bg-[var(--axis-surface-secondary)]"
|
|
82
|
+
),
|
|
83
|
+
children: [
|
|
84
|
+
/* @__PURE__ */ jsx(
|
|
85
|
+
"div",
|
|
86
|
+
{
|
|
87
|
+
className: cn(
|
|
88
|
+
"w-5 h-5 rounded-full flex items-center justify-center text-xs",
|
|
89
|
+
statusColors[step.status]
|
|
90
|
+
),
|
|
91
|
+
"aria-hidden": "true",
|
|
92
|
+
children: statusIcons[step.status] || index + 1
|
|
93
|
+
}
|
|
94
|
+
),
|
|
95
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
96
|
+
/* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
|
|
97
|
+
STATUS_LABELS[step.status],
|
|
98
|
+
":"
|
|
99
|
+
] }),
|
|
100
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--axis-text-primary)] truncate", children: step.label }),
|
|
101
|
+
step.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--axis-text-secondary)] truncate", children: step.description })
|
|
102
|
+
] })
|
|
103
|
+
]
|
|
104
|
+
},
|
|
105
|
+
step.id
|
|
106
|
+
)) }),
|
|
107
|
+
(onCancel || onRetry) && /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 mt-4 pt-4 border-t border-[var(--axis-border-default)]", children: [
|
|
108
|
+
status === "running" && onCancel && /* @__PURE__ */ jsx(
|
|
109
|
+
"button",
|
|
110
|
+
{
|
|
111
|
+
onClick: onCancel,
|
|
112
|
+
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)]",
|
|
113
|
+
children: "\uCDE8\uC18C"
|
|
114
|
+
}
|
|
115
|
+
),
|
|
116
|
+
status === "error" && onRetry && /* @__PURE__ */ jsx(
|
|
117
|
+
"button",
|
|
118
|
+
{
|
|
119
|
+
onClick: onRetry,
|
|
120
|
+
className: "px-3 py-1.5 text-sm rounded-md bg-[var(--axis-button-bg-default)] text-[var(--axis-button-text-default)] hover:bg-[var(--axis-button-bg-hover)]",
|
|
121
|
+
children: "\uC7AC\uC2DC\uB3C4"
|
|
122
|
+
}
|
|
123
|
+
)
|
|
124
|
+
] })
|
|
125
|
+
]
|
|
126
|
+
}
|
|
127
|
+
);
|
|
128
|
+
}
|
|
5
129
|
export {
|
|
6
130
|
RunProgress
|
|
7
131
|
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use client";
|
|
1
2
|
"use strict";
|
|
2
3
|
var __create = Object.create;
|
|
3
4
|
var __defProp = Object.defineProperty;
|
|
@@ -26,27 +27,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
26
27
|
mod
|
|
27
28
|
));
|
|
28
29
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
|
|
30
|
-
// src/source-panel/index.tsx
|
|
31
30
|
var source_panel_exports = {};
|
|
32
31
|
__export(source_panel_exports, {
|
|
33
32
|
SourcePanel: () => SourcePanel
|
|
34
33
|
});
|
|
35
34
|
module.exports = __toCommonJS(source_panel_exports);
|
|
35
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var React = __toESM(require("react"));
|
|
37
37
|
var import_ui_react = require("@axis-ds/ui-react");
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
var SOURCE_TYPE_LABELS = {
|
|
41
|
-
web: "\uC6F9 \uD398\uC774\uC9C0",
|
|
42
|
-
file: "\uD30C\uC77C",
|
|
43
|
-
database: "\uB370\uC774\uD130\uBCA0\uC774\uC2A4",
|
|
44
|
-
api: "API"
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
// src/source-panel/index.tsx
|
|
48
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
49
|
-
var sourceIcons = {
|
|
38
|
+
var import_a11y_labels = require("../constants/a11y-labels.js");
|
|
39
|
+
const sourceIcons = {
|
|
50
40
|
web: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" }) }),
|
|
51
41
|
file: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }),
|
|
52
42
|
database: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" }) }),
|
|
@@ -87,7 +77,7 @@ function SourcePanel({
|
|
|
87
77
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[var(--axis-icon-secondary)] mt-0.5", "aria-hidden": "true", children: sourceIcons[source.type] }),
|
|
88
78
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 min-w-0", children: [
|
|
89
79
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "sr-only", children: [
|
|
90
|
-
SOURCE_TYPE_LABELS[source.type],
|
|
80
|
+
import_a11y_labels.SOURCE_TYPE_LABELS[source.type],
|
|
91
81
|
":"
|
|
92
82
|
] }),
|
|
93
83
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-medium text-[var(--axis-text-primary)] truncate", children: source.url ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
@@ -1,7 +1,91 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import "
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { cn } from "@axis-ds/ui-react";
|
|
5
|
+
import { SOURCE_TYPE_LABELS } from "../constants/a11y-labels.mjs";
|
|
6
|
+
const sourceIcons = {
|
|
7
|
+
web: /* @__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: "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" }) }),
|
|
8
|
+
file: /* @__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: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }),
|
|
9
|
+
database: /* @__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: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" }) }),
|
|
10
|
+
api: /* @__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: "M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
|
|
11
|
+
};
|
|
12
|
+
function SourcePanel({
|
|
13
|
+
sources,
|
|
14
|
+
expandable = true,
|
|
15
|
+
defaultExpanded = false,
|
|
16
|
+
maxItems = 5,
|
|
17
|
+
className
|
|
18
|
+
}) {
|
|
19
|
+
const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
|
|
20
|
+
const displayedSources = isExpanded ? sources : sources.slice(0, maxItems);
|
|
21
|
+
const hasMore = sources.length > maxItems;
|
|
22
|
+
const listId = React.useId();
|
|
23
|
+
if (sources.length === 0) return null;
|
|
24
|
+
return /* @__PURE__ */ jsxs(
|
|
25
|
+
"div",
|
|
26
|
+
{
|
|
27
|
+
className: cn(
|
|
28
|
+
"rounded-lg border p-3",
|
|
29
|
+
"bg-[var(--axis-surface-secondary)] border-[var(--axis-border-default)]",
|
|
30
|
+
className
|
|
31
|
+
),
|
|
32
|
+
children: [
|
|
33
|
+
/* @__PURE__ */ jsxs("h4", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-2", children: [
|
|
34
|
+
"\uCD9C\uCC98 (",
|
|
35
|
+
sources.length,
|
|
36
|
+
"\uAC1C)"
|
|
37
|
+
] }),
|
|
38
|
+
/* @__PURE__ */ jsx("div", { id: listId, role: "list", "aria-label": "\uCD9C\uCC98 \uBAA9\uB85D", className: "space-y-2", children: displayedSources.map((source) => /* @__PURE__ */ jsxs(
|
|
39
|
+
"div",
|
|
40
|
+
{
|
|
41
|
+
role: "listitem",
|
|
42
|
+
className: "flex items-start gap-2 p-2 rounded-md bg-[var(--axis-surface-default)]",
|
|
43
|
+
children: [
|
|
44
|
+
/* @__PURE__ */ jsx("span", { className: "text-[var(--axis-icon-secondary)] mt-0.5", "aria-hidden": "true", children: sourceIcons[source.type] }),
|
|
45
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
46
|
+
/* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
|
|
47
|
+
SOURCE_TYPE_LABELS[source.type],
|
|
48
|
+
":"
|
|
49
|
+
] }),
|
|
50
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--axis-text-primary)] truncate", children: source.url ? /* @__PURE__ */ jsxs(
|
|
51
|
+
"a",
|
|
52
|
+
{
|
|
53
|
+
href: source.url,
|
|
54
|
+
target: "_blank",
|
|
55
|
+
rel: "noopener noreferrer",
|
|
56
|
+
className: "hover:underline",
|
|
57
|
+
"aria-label": `${source.title} (\uC0C8 \uCC3D\uC5D0\uC11C \uC5F4\uB9BC)`,
|
|
58
|
+
children: [
|
|
59
|
+
source.title,
|
|
60
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: ", \uC0C8 \uCC3D\uC5D0\uC11C \uC5F4\uB9BC" })
|
|
61
|
+
]
|
|
62
|
+
}
|
|
63
|
+
) : source.title }),
|
|
64
|
+
source.snippet && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--axis-text-secondary)] line-clamp-2 mt-0.5", children: source.snippet }),
|
|
65
|
+
source.path && /* @__PURE__ */ jsx("code", { className: "text-xs text-[var(--axis-text-tertiary)]", children: source.path })
|
|
66
|
+
] }),
|
|
67
|
+
source.relevance !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: [
|
|
68
|
+
Math.round(source.relevance * 100),
|
|
69
|
+
"%"
|
|
70
|
+
] })
|
|
71
|
+
]
|
|
72
|
+
},
|
|
73
|
+
source.id
|
|
74
|
+
)) }),
|
|
75
|
+
expandable && hasMore && /* @__PURE__ */ jsx(
|
|
76
|
+
"button",
|
|
77
|
+
{
|
|
78
|
+
onClick: () => setIsExpanded(!isExpanded),
|
|
79
|
+
"aria-expanded": isExpanded,
|
|
80
|
+
"aria-controls": listId,
|
|
81
|
+
className: "mt-2 text-xs text-[var(--axis-text-brand)] hover:underline",
|
|
82
|
+
children: isExpanded ? "\uC811\uAE30" : `${sources.length - maxItems}\uAC1C \uB354 \uBCF4\uAE30`
|
|
83
|
+
}
|
|
84
|
+
)
|
|
85
|
+
]
|
|
86
|
+
}
|
|
87
|
+
);
|
|
88
|
+
}
|
|
5
89
|
export {
|
|
6
90
|
SourcePanel
|
|
7
91
|
};
|
|
@@ -16,28 +16,14 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
16
|
return to;
|
|
17
17
|
};
|
|
18
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
|
|
20
|
-
// src/step-timeline/index.tsx
|
|
21
19
|
var step_timeline_exports = {};
|
|
22
20
|
__export(step_timeline_exports, {
|
|
23
21
|
StepTimeline: () => StepTimeline
|
|
24
22
|
});
|
|
25
23
|
module.exports = __toCommonJS(step_timeline_exports);
|
|
26
|
-
var import_ui_react = require("@axis-ds/ui-react");
|
|
27
|
-
|
|
28
|
-
// src/constants/a11y-labels.ts
|
|
29
|
-
var STATUS_LABELS = {
|
|
30
|
-
pending: "\uB300\uAE30 \uC911",
|
|
31
|
-
running: "\uC2E4\uD589 \uC911",
|
|
32
|
-
complete: "\uC644\uB8CC",
|
|
33
|
-
success: "\uC131\uACF5",
|
|
34
|
-
error: "\uC624\uB958",
|
|
35
|
-
skipped: "\uAC74\uB108\uB700",
|
|
36
|
-
idle: "\uB300\uAE30 \uC911"
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
// src/step-timeline/index.tsx
|
|
40
24
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
|
+
var import_ui_react = require("@axis-ds/ui-react");
|
|
26
|
+
var import_a11y_labels = require("../constants/a11y-labels.js");
|
|
41
27
|
function StepTimeline({
|
|
42
28
|
steps,
|
|
43
29
|
orientation = "vertical",
|
|
@@ -90,7 +76,7 @@ function StepTimeline({
|
|
|
90
76
|
),
|
|
91
77
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_ui_react.cn)(isVertical ? "flex-1" : "text-center mt-2"), children: [
|
|
92
78
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "sr-only", children: [
|
|
93
|
-
STATUS_LABELS[step.status],
|
|
79
|
+
import_a11y_labels.STATUS_LABELS[step.status],
|
|
94
80
|
":"
|
|
95
81
|
] }),
|
|
96
82
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-medium text-[var(--axis-text-primary)]", children: step.label }),
|
|
@@ -1,7 +1,72 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
} from "../
|
|
4
|
-
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "@axis-ds/ui-react";
|
|
3
|
+
import { STATUS_LABELS } from "../constants/a11y-labels.mjs";
|
|
4
|
+
function StepTimeline({
|
|
5
|
+
steps,
|
|
6
|
+
orientation = "vertical",
|
|
7
|
+
className
|
|
8
|
+
}) {
|
|
9
|
+
const isVertical = orientation === "vertical";
|
|
10
|
+
return /* @__PURE__ */ jsx(
|
|
11
|
+
"div",
|
|
12
|
+
{
|
|
13
|
+
role: "list",
|
|
14
|
+
"aria-label": "\uC791\uC5C5 \uD0C0\uC784\uB77C\uC778",
|
|
15
|
+
className: cn(
|
|
16
|
+
isVertical ? "flex flex-col gap-4" : "flex items-center gap-2",
|
|
17
|
+
className
|
|
18
|
+
),
|
|
19
|
+
children: steps.map((step, index) => /* @__PURE__ */ jsxs(
|
|
20
|
+
"div",
|
|
21
|
+
{
|
|
22
|
+
role: "listitem",
|
|
23
|
+
"aria-current": step.status === "running" ? "step" : void 0,
|
|
24
|
+
className: cn(
|
|
25
|
+
"relative flex",
|
|
26
|
+
isVertical ? "items-start gap-3" : "flex-col items-center"
|
|
27
|
+
),
|
|
28
|
+
children: [
|
|
29
|
+
index < steps.length - 1 && /* @__PURE__ */ jsx(
|
|
30
|
+
"div",
|
|
31
|
+
{
|
|
32
|
+
"aria-hidden": "true",
|
|
33
|
+
className: cn(
|
|
34
|
+
"absolute bg-[var(--axis-border-default)]",
|
|
35
|
+
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"
|
|
36
|
+
)
|
|
37
|
+
}
|
|
38
|
+
),
|
|
39
|
+
/* @__PURE__ */ jsx(
|
|
40
|
+
"div",
|
|
41
|
+
{
|
|
42
|
+
"aria-hidden": "true",
|
|
43
|
+
className: cn(
|
|
44
|
+
"relative z-10 w-5 h-5 rounded-full flex items-center justify-center",
|
|
45
|
+
step.status === "complete" && "bg-[var(--axis-status-success)]",
|
|
46
|
+
step.status === "running" && "bg-[var(--axis-status-running)] animate-pulse",
|
|
47
|
+
step.status === "error" && "bg-[var(--axis-status-error)]",
|
|
48
|
+
step.status === "skipped" && "bg-[var(--axis-status-neutral-muted)]",
|
|
49
|
+
step.status === "pending" && "bg-[var(--axis-status-neutral-muted)]"
|
|
50
|
+
),
|
|
51
|
+
children: step.status === "complete" && /* @__PURE__ */ jsx("svg", { className: "w-3 h-3 text-[var(--axis-status-success-contrast)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) })
|
|
52
|
+
}
|
|
53
|
+
),
|
|
54
|
+
/* @__PURE__ */ jsxs("div", { className: cn(isVertical ? "flex-1" : "text-center mt-2"), children: [
|
|
55
|
+
/* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
|
|
56
|
+
STATUS_LABELS[step.status],
|
|
57
|
+
":"
|
|
58
|
+
] }),
|
|
59
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--axis-text-primary)]", children: step.label }),
|
|
60
|
+
step.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--axis-text-secondary)]", children: step.description }),
|
|
61
|
+
step.timestamp && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--axis-text-tertiary)]", children: step.timestamp.toLocaleTimeString() })
|
|
62
|
+
] })
|
|
63
|
+
]
|
|
64
|
+
},
|
|
65
|
+
step.id
|
|
66
|
+
))
|
|
67
|
+
}
|
|
68
|
+
);
|
|
69
|
+
}
|
|
5
70
|
export {
|
|
6
71
|
StepTimeline
|
|
7
72
|
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use client";
|
|
1
2
|
"use strict";
|
|
2
3
|
var __create = Object.create;
|
|
3
4
|
var __defProp = Object.defineProperty;
|
|
@@ -26,16 +27,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
26
27
|
mod
|
|
27
28
|
));
|
|
28
29
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
|
|
30
|
-
// src/streaming-text/index.tsx
|
|
31
30
|
var streaming_text_exports = {};
|
|
32
31
|
__export(streaming_text_exports, {
|
|
33
32
|
StreamingText: () => StreamingText
|
|
34
33
|
});
|
|
35
34
|
module.exports = __toCommonJS(streaming_text_exports);
|
|
35
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var React = __toESM(require("react"));
|
|
37
37
|
var import_ui_react = require("@axis-ds/ui-react");
|
|
38
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
39
38
|
function StreamingText({
|
|
40
39
|
text,
|
|
41
40
|
speed = 20,
|
|
@@ -1,6 +1,62 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { cn } from "@axis-ds/ui-react";
|
|
5
|
+
function StreamingText({
|
|
6
|
+
text,
|
|
7
|
+
speed = 20,
|
|
8
|
+
isComplete = false,
|
|
9
|
+
showCursor = true,
|
|
10
|
+
onComplete,
|
|
11
|
+
"aria-live": ariaLive,
|
|
12
|
+
"aria-label": ariaLabel,
|
|
13
|
+
className
|
|
14
|
+
}) {
|
|
15
|
+
const [displayedText, setDisplayedText] = React.useState("");
|
|
16
|
+
const [isStreaming, setIsStreaming] = React.useState(false);
|
|
17
|
+
const prevTextRef = React.useRef("");
|
|
18
|
+
React.useEffect(() => {
|
|
19
|
+
if (isComplete) {
|
|
20
|
+
setDisplayedText(text);
|
|
21
|
+
setIsStreaming(false);
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
if (text.length > prevTextRef.current.length && text.startsWith(prevTextRef.current)) {
|
|
25
|
+
const newText = text.slice(prevTextRef.current.length);
|
|
26
|
+
let charIndex = 0;
|
|
27
|
+
setIsStreaming(true);
|
|
28
|
+
const interval = setInterval(() => {
|
|
29
|
+
if (charIndex < newText.length) {
|
|
30
|
+
setDisplayedText((prev) => prev + newText[charIndex]);
|
|
31
|
+
charIndex++;
|
|
32
|
+
} else {
|
|
33
|
+
clearInterval(interval);
|
|
34
|
+
setIsStreaming(false);
|
|
35
|
+
if (onComplete) onComplete();
|
|
36
|
+
}
|
|
37
|
+
}, speed);
|
|
38
|
+
prevTextRef.current = text;
|
|
39
|
+
return () => clearInterval(interval);
|
|
40
|
+
} else if (text !== prevTextRef.current) {
|
|
41
|
+
setDisplayedText("");
|
|
42
|
+
prevTextRef.current = "";
|
|
43
|
+
}
|
|
44
|
+
}, [text, speed, isComplete, onComplete]);
|
|
45
|
+
return /* @__PURE__ */ jsxs(
|
|
46
|
+
"div",
|
|
47
|
+
{
|
|
48
|
+
role: "region",
|
|
49
|
+
"aria-label": ariaLabel || "AI \uC751\uB2F5",
|
|
50
|
+
"aria-live": ariaLive ?? "polite",
|
|
51
|
+
"aria-busy": isStreaming,
|
|
52
|
+
className: cn("relative", className),
|
|
53
|
+
children: [
|
|
54
|
+
/* @__PURE__ */ jsx("span", { className: "text-[var(--axis-text-primary)] whitespace-pre-wrap", children: displayedText }),
|
|
55
|
+
showCursor && isStreaming && /* @__PURE__ */ jsx("span", { className: "inline-block w-0.5 h-4 ml-0.5 bg-[var(--axis-text-primary)] animate-pulse", "aria-hidden": "true" })
|
|
56
|
+
]
|
|
57
|
+
}
|
|
58
|
+
);
|
|
59
|
+
}
|
|
4
60
|
export {
|
|
5
61
|
StreamingText
|
|
6
62
|
};
|
|
@@ -16,15 +16,13 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
16
|
return to;
|
|
17
17
|
};
|
|
18
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
|
|
20
|
-
// src/surface-renderer/index.tsx
|
|
21
19
|
var surface_renderer_exports = {};
|
|
22
20
|
__export(surface_renderer_exports, {
|
|
23
21
|
SurfaceRenderer: () => SurfaceRenderer
|
|
24
22
|
});
|
|
25
23
|
module.exports = __toCommonJS(surface_renderer_exports);
|
|
26
|
-
var import_ui_react = require("@axis-ds/ui-react");
|
|
27
24
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
|
+
var import_ui_react = require("@axis-ds/ui-react");
|
|
28
26
|
function SurfaceRenderer({
|
|
29
27
|
surface,
|
|
30
28
|
renderCustom,
|
|
@@ -1,6 +1,82 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "@axis-ds/ui-react";
|
|
3
|
+
function SurfaceRenderer({
|
|
4
|
+
surface,
|
|
5
|
+
renderCustom,
|
|
6
|
+
className
|
|
7
|
+
}) {
|
|
8
|
+
const renderContent = () => {
|
|
9
|
+
switch (surface.type) {
|
|
10
|
+
case "text":
|
|
11
|
+
return /* @__PURE__ */ jsx("div", { className: "prose prose-sm max-w-none text-[var(--axis-text-primary)]", children: String(surface.content) });
|
|
12
|
+
case "code":
|
|
13
|
+
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) }) });
|
|
14
|
+
case "table": {
|
|
15
|
+
const tableData = surface.content;
|
|
16
|
+
return /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { role: "table", className: "w-full text-sm", children: [
|
|
17
|
+
surface.title && /* @__PURE__ */ jsx("caption", { className: "sr-only", children: surface.title }),
|
|
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
|
+
scope: "col",
|
|
22
|
+
className: "px-3 py-2 text-left font-medium text-[var(--axis-text-secondary)]",
|
|
23
|
+
children: header
|
|
24
|
+
},
|
|
25
|
+
i
|
|
26
|
+
)) }) }),
|
|
27
|
+
/* @__PURE__ */ jsx("tbody", { children: tableData.rows.map((row, i) => /* @__PURE__ */ jsx(
|
|
28
|
+
"tr",
|
|
29
|
+
{
|
|
30
|
+
className: "border-b border-[var(--axis-border-default)] last:border-0",
|
|
31
|
+
children: row.map((cell, j) => /* @__PURE__ */ jsx(
|
|
32
|
+
"td",
|
|
33
|
+
{
|
|
34
|
+
className: "px-3 py-2 text-[var(--axis-text-primary)]",
|
|
35
|
+
children: cell
|
|
36
|
+
},
|
|
37
|
+
j
|
|
38
|
+
))
|
|
39
|
+
},
|
|
40
|
+
i
|
|
41
|
+
)) })
|
|
42
|
+
] }) });
|
|
43
|
+
}
|
|
44
|
+
case "chart":
|
|
45
|
+
return /* @__PURE__ */ jsxs("div", { className: "p-4 text-center text-[var(--axis-text-secondary)]", children: [
|
|
46
|
+
"[\uCC28\uD2B8: ",
|
|
47
|
+
surface.title || "\uB370\uC774\uD130 \uC2DC\uAC01\uD654",
|
|
48
|
+
"]"
|
|
49
|
+
] });
|
|
50
|
+
case "form":
|
|
51
|
+
return /* @__PURE__ */ jsxs("div", { className: "p-4 text-center text-[var(--axis-text-secondary)]", children: [
|
|
52
|
+
"[\uD3FC: ",
|
|
53
|
+
surface.title || "\uC785\uB825 \uC591\uC2DD",
|
|
54
|
+
"]"
|
|
55
|
+
] });
|
|
56
|
+
case "custom":
|
|
57
|
+
if (renderCustom) {
|
|
58
|
+
return renderCustom(surface);
|
|
59
|
+
}
|
|
60
|
+
return /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-[var(--axis-text-secondary)]", children: "[\uCEE4\uC2A4\uD140 Surface]" });
|
|
61
|
+
default:
|
|
62
|
+
return null;
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
return /* @__PURE__ */ jsxs(
|
|
66
|
+
"div",
|
|
67
|
+
{
|
|
68
|
+
className: cn(
|
|
69
|
+
"rounded-lg border p-4",
|
|
70
|
+
"bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
|
|
71
|
+
className
|
|
72
|
+
),
|
|
73
|
+
children: [
|
|
74
|
+
surface.title && /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium text-[var(--axis-text-primary)] mb-3", children: surface.title }),
|
|
75
|
+
renderContent()
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
}
|
|
4
80
|
export {
|
|
5
81
|
SurfaceRenderer
|
|
6
82
|
};
|
|
@@ -16,21 +16,19 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
16
|
return to;
|
|
17
17
|
};
|
|
18
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
|
|
20
|
-
// src/thinking-indicator/index.tsx
|
|
21
19
|
var thinking_indicator_exports = {};
|
|
22
20
|
__export(thinking_indicator_exports, {
|
|
23
21
|
ThinkingIndicator: () => ThinkingIndicator
|
|
24
22
|
});
|
|
25
23
|
module.exports = __toCommonJS(thinking_indicator_exports);
|
|
26
|
-
var import_ui_react = require("@axis-ds/ui-react");
|
|
27
24
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
28
|
-
var
|
|
25
|
+
var import_ui_react = require("@axis-ds/ui-react");
|
|
26
|
+
const sizeStyles = {
|
|
29
27
|
sm: "text-xs gap-1",
|
|
30
28
|
md: "text-sm gap-1.5",
|
|
31
29
|
lg: "text-base gap-2"
|
|
32
30
|
};
|
|
33
|
-
|
|
31
|
+
const dotSizes = {
|
|
34
32
|
sm: "w-1 h-1",
|
|
35
33
|
md: "w-1.5 h-1.5",
|
|
36
34
|
lg: "w-2 h-2"
|
|
@@ -1,6 +1,48 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "@axis-ds/ui-react";
|
|
3
|
+
const sizeStyles = {
|
|
4
|
+
sm: "text-xs gap-1",
|
|
5
|
+
md: "text-sm gap-1.5",
|
|
6
|
+
lg: "text-base gap-2"
|
|
7
|
+
};
|
|
8
|
+
const dotSizes = {
|
|
9
|
+
sm: "w-1 h-1",
|
|
10
|
+
md: "w-1.5 h-1.5",
|
|
11
|
+
lg: "w-2 h-2"
|
|
12
|
+
};
|
|
13
|
+
function ThinkingIndicator({
|
|
14
|
+
text = "\uC0DD\uAC01 \uC911",
|
|
15
|
+
size = "md",
|
|
16
|
+
className
|
|
17
|
+
}) {
|
|
18
|
+
return /* @__PURE__ */ jsxs(
|
|
19
|
+
"div",
|
|
20
|
+
{
|
|
21
|
+
role: "status",
|
|
22
|
+
"aria-live": "polite",
|
|
23
|
+
"aria-label": text,
|
|
24
|
+
className: cn(
|
|
25
|
+
"flex items-center text-[var(--axis-text-secondary)]",
|
|
26
|
+
sizeStyles[size],
|
|
27
|
+
className
|
|
28
|
+
),
|
|
29
|
+
children: [
|
|
30
|
+
/* @__PURE__ */ jsx("span", { children: text }),
|
|
31
|
+
/* @__PURE__ */ jsx("div", { className: "flex gap-0.5", "aria-hidden": "true", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
|
|
32
|
+
"div",
|
|
33
|
+
{
|
|
34
|
+
className: cn(
|
|
35
|
+
"rounded-full bg-current animate-bounce",
|
|
36
|
+
dotSizes[size]
|
|
37
|
+
),
|
|
38
|
+
style: { animationDelay: `${i * 150}ms` }
|
|
39
|
+
},
|
|
40
|
+
i
|
|
41
|
+
)) })
|
|
42
|
+
]
|
|
43
|
+
}
|
|
44
|
+
);
|
|
45
|
+
}
|
|
4
46
|
export {
|
|
5
47
|
ThinkingIndicator
|
|
6
48
|
};
|