@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.
Files changed (62) hide show
  1. package/README.md +42 -1
  2. package/dist/agent-avatar/index.js +6 -16
  3. package/dist/agent-avatar/index.mjs +75 -4
  4. package/dist/approval-card/index.js +6 -16
  5. package/dist/approval-card/index.mjs +86 -4
  6. package/dist/attachment-card/index.js +5 -17
  7. package/dist/attachment-card/index.mjs +101 -4
  8. package/dist/code-block/index.js +2 -3
  9. package/dist/code-block/index.mjs +76 -3
  10. package/dist/constants/a11y-labels.d.mts +86 -0
  11. package/dist/constants/a11y-labels.d.ts +86 -0
  12. package/dist/constants/a11y-labels.js +105 -0
  13. package/dist/{chunk-SCZ4BQ2G.mjs → constants/a11y-labels.mjs} +21 -17
  14. package/dist/context-panel/index.js +2 -3
  15. package/dist/context-panel/index.mjs +99 -3
  16. package/dist/diff-viewer/index.js +8 -17
  17. package/dist/diff-viewer/index.mjs +155 -4
  18. package/dist/feedback-buttons/index.js +7 -16
  19. package/dist/feedback-buttons/index.mjs +65 -4
  20. package/dist/index.js +36 -1732
  21. package/dist/index.mjs +18 -55
  22. package/dist/message-bubble/index.js +5 -15
  23. package/dist/message-bubble/index.mjs +98 -4
  24. package/dist/plan-card/index.js +6 -28
  25. package/dist/plan-card/index.mjs +143 -4
  26. package/dist/recovery-banner/index.js +1 -3
  27. package/dist/recovery-banner/index.mjs +70 -3
  28. package/dist/run-progress/index.js +5 -19
  29. package/dist/run-progress/index.mjs +128 -4
  30. package/dist/source-panel/index.js +5 -15
  31. package/dist/source-panel/index.mjs +88 -4
  32. package/dist/step-timeline/index.js +3 -17
  33. package/dist/step-timeline/index.mjs +69 -4
  34. package/dist/streaming-text/index.js +2 -3
  35. package/dist/streaming-text/index.mjs +59 -3
  36. package/dist/surface-renderer/index.js +1 -3
  37. package/dist/surface-renderer/index.mjs +79 -3
  38. package/dist/thinking-indicator/index.js +3 -5
  39. package/dist/thinking-indicator/index.mjs +45 -3
  40. package/dist/token-usage-indicator/index.js +1 -3
  41. package/dist/token-usage-indicator/index.mjs +81 -3
  42. package/dist/tool-call-card/index.js +5 -18
  43. package/dist/tool-call-card/index.mjs +108 -4
  44. package/package.json +35 -5
  45. package/dist/chunk-42KEAZ2Y.mjs +0 -109
  46. package/dist/chunk-4CMUEGLK.mjs +0 -80
  47. package/dist/chunk-4V4BWBRC.mjs +0 -77
  48. package/dist/chunk-7HTVJ6MK.mjs +0 -94
  49. package/dist/chunk-DPLGRVNQ.mjs +0 -95
  50. package/dist/chunk-FYAMA32G.mjs +0 -50
  51. package/dist/chunk-GQYOOLDL.mjs +0 -63
  52. package/dist/chunk-IOF4OET6.mjs +0 -162
  53. package/dist/chunk-J4FIMXXG.mjs +0 -106
  54. package/dist/chunk-JY7MTMMB.mjs +0 -83
  55. package/dist/chunk-KJVPVBET.mjs +0 -103
  56. package/dist/chunk-OYQX3SL4.mjs +0 -152
  57. package/dist/chunk-QS6GQNSE.mjs +0 -86
  58. package/dist/chunk-R4CMHIRO.mjs +0 -72
  59. package/dist/chunk-SCXUEQLI.mjs +0 -136
  60. package/dist/chunk-UDL4M5RP.mjs +0 -75
  61. package/dist/chunk-WFYQINWD.mjs +0 -115
  62. package/dist/chunk-ZW4Z27AB.mjs +0 -84
@@ -1,94 +0,0 @@
1
- import {
2
- SEVERITY_LABELS
3
- } from "./chunk-SCZ4BQ2G.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-status-info)]",
12
- icon: "text-[var(--axis-status-info)]",
13
- bg: "bg-[var(--axis-surface-info)]"
14
- },
15
- warning: {
16
- border: "border-l-[var(--axis-status-warning)]",
17
- icon: "text-[var(--axis-status-warning)]",
18
- bg: "bg-[var(--axis-surface-warning)]"
19
- },
20
- error: {
21
- border: "border-l-[var(--axis-status-error)]",
22
- icon: "text-[var(--axis-status-error)]",
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-[var(--axis-button-text-default)] 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-[var(--axis-button-destructive-text-default)] 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,95 +0,0 @@
1
- import {
2
- SOURCE_TYPE_LABELS
3
- } from "./chunk-SCZ4BQ2G.mjs";
4
-
5
- // src/source-panel/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 sourceIcons = {
10
- 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" }) }),
11
- 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" }) }),
12
- 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" }) }),
13
- 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" }) })
14
- };
15
- function SourcePanel({
16
- sources,
17
- expandable = true,
18
- defaultExpanded = false,
19
- maxItems = 5,
20
- className
21
- }) {
22
- const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
23
- const displayedSources = isExpanded ? sources : sources.slice(0, maxItems);
24
- const hasMore = sources.length > maxItems;
25
- const listId = React.useId();
26
- if (sources.length === 0) return null;
27
- return /* @__PURE__ */ jsxs(
28
- "div",
29
- {
30
- className: cn(
31
- "rounded-lg border p-3",
32
- "bg-[var(--axis-surface-secondary)] border-[var(--axis-border-default)]",
33
- className
34
- ),
35
- children: [
36
- /* @__PURE__ */ jsxs("h4", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-2", children: [
37
- "\uCD9C\uCC98 (",
38
- sources.length,
39
- "\uAC1C)"
40
- ] }),
41
- /* @__PURE__ */ jsx("div", { id: listId, role: "list", "aria-label": "\uCD9C\uCC98 \uBAA9\uB85D", className: "space-y-2", children: displayedSources.map((source) => /* @__PURE__ */ jsxs(
42
- "div",
43
- {
44
- role: "listitem",
45
- className: "flex items-start gap-2 p-2 rounded-md bg-[var(--axis-surface-default)]",
46
- children: [
47
- /* @__PURE__ */ jsx("span", { className: "text-[var(--axis-icon-secondary)] mt-0.5", "aria-hidden": "true", children: sourceIcons[source.type] }),
48
- /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
49
- /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
50
- SOURCE_TYPE_LABELS[source.type],
51
- ":"
52
- ] }),
53
- /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--axis-text-primary)] truncate", children: source.url ? /* @__PURE__ */ jsxs(
54
- "a",
55
- {
56
- href: source.url,
57
- target: "_blank",
58
- rel: "noopener noreferrer",
59
- className: "hover:underline",
60
- "aria-label": `${source.title} (\uC0C8 \uCC3D\uC5D0\uC11C \uC5F4\uB9BC)`,
61
- children: [
62
- source.title,
63
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: ", \uC0C8 \uCC3D\uC5D0\uC11C \uC5F4\uB9BC" })
64
- ]
65
- }
66
- ) : source.title }),
67
- source.snippet && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--axis-text-secondary)] line-clamp-2 mt-0.5", children: source.snippet }),
68
- source.path && /* @__PURE__ */ jsx("code", { className: "text-xs text-[var(--axis-text-tertiary)]", children: source.path })
69
- ] }),
70
- source.relevance !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: [
71
- Math.round(source.relevance * 100),
72
- "%"
73
- ] })
74
- ]
75
- },
76
- source.id
77
- )) }),
78
- expandable && hasMore && /* @__PURE__ */ jsx(
79
- "button",
80
- {
81
- onClick: () => setIsExpanded(!isExpanded),
82
- "aria-expanded": isExpanded,
83
- "aria-controls": listId,
84
- className: "mt-2 text-xs text-[var(--axis-text-brand)] hover:underline",
85
- children: isExpanded ? "\uC811\uAE30" : `${sources.length - maxItems}\uAC1C \uB354 \uBCF4\uAE30`
86
- }
87
- )
88
- ]
89
- }
90
- );
91
- }
92
-
93
- export {
94
- SourcePanel
95
- };
@@ -1,50 +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
- role: "status",
23
- "aria-live": "polite",
24
- "aria-label": text,
25
- className: cn(
26
- "flex items-center text-[var(--axis-text-secondary)]",
27
- sizeStyles[size],
28
- className
29
- ),
30
- children: [
31
- /* @__PURE__ */ jsx("span", { children: text }),
32
- /* @__PURE__ */ jsx("div", { className: "flex gap-0.5", "aria-hidden": "true", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
33
- "div",
34
- {
35
- className: cn(
36
- "rounded-full bg-current animate-bounce",
37
- dotSizes[size]
38
- ),
39
- style: { animationDelay: `${i * 150}ms` }
40
- },
41
- i
42
- )) })
43
- ]
44
- }
45
- );
46
- }
47
-
48
- export {
49
- ThinkingIndicator
50
- };
@@ -1,63 +0,0 @@
1
- // src/streaming-text/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
- 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
- }
60
-
61
- export {
62
- StreamingText
63
- };
@@ -1,162 +0,0 @@
1
- import {
2
- DIFF_LABELS
3
- } from "./chunk-SCZ4BQ2G.mjs";
4
-
5
- // src/diff-viewer/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
- function computeDiff(before, after) {
10
- const oldLines = before.split("\n");
11
- const newLines = after.split("\n");
12
- const m = oldLines.length;
13
- const n = newLines.length;
14
- const dp = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0));
15
- for (let i2 = 1; i2 <= m; i2++) {
16
- for (let j2 = 1; j2 <= n; j2++) {
17
- if (oldLines[i2 - 1] === newLines[j2 - 1]) {
18
- dp[i2][j2] = dp[i2 - 1][j2 - 1] + 1;
19
- } else {
20
- dp[i2][j2] = Math.max(dp[i2 - 1][j2], dp[i2][j2 - 1]);
21
- }
22
- }
23
- }
24
- const result = [];
25
- let i = m;
26
- let j = n;
27
- while (i > 0 || j > 0) {
28
- if (i > 0 && j > 0 && oldLines[i - 1] === newLines[j - 1]) {
29
- result.unshift({ type: "unchanged", content: oldLines[i - 1], oldLineNumber: i, newLineNumber: j });
30
- i--;
31
- j--;
32
- } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
33
- result.unshift({ type: "added", content: newLines[j - 1], newLineNumber: j });
34
- j--;
35
- } else if (i > 0) {
36
- result.unshift({ type: "removed", content: oldLines[i - 1], oldLineNumber: i });
37
- i--;
38
- }
39
- }
40
- return result;
41
- }
42
- var lineTypeStyles = {
43
- added: "bg-[color:color-mix(in_srgb,var(--axis-diff-added)_10%,transparent)]",
44
- removed: "bg-[color:color-mix(in_srgb,var(--axis-diff-removed)_10%,transparent)]",
45
- unchanged: ""
46
- };
47
- var lineTypeTextStyles = {
48
- added: "text-[var(--axis-diff-added-text)]",
49
- removed: "text-[var(--axis-diff-removed-text)]",
50
- unchanged: "text-[var(--axis-text-primary)]"
51
- };
52
- var lineTypeSymbols = {
53
- added: "+",
54
- removed: "-",
55
- unchanged: " "
56
- };
57
- function DiffViewer({
58
- before,
59
- after,
60
- filename,
61
- viewMode = "unified",
62
- className
63
- }) {
64
- const [mode, setMode] = React.useState(viewMode);
65
- const diffLines = React.useMemo(() => computeDiff(before, after), [before, after]);
66
- const addedCount = diffLines.filter((l) => l.type === "added").length;
67
- const removedCount = diffLines.filter((l) => l.type === "removed").length;
68
- return /* @__PURE__ */ jsxs(
69
- "div",
70
- {
71
- role: "region",
72
- "aria-label": filename ? `${filename} \uBCC0\uACBD\uC0AC\uD56D` : "\uCF54\uB4DC \uBCC0\uACBD\uC0AC\uD56D",
73
- className: cn(
74
- "rounded-lg border overflow-hidden",
75
- "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
76
- className
77
- ),
78
- children: [
79
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-b border-[var(--axis-border-default)] bg-[var(--axis-surface-secondary)]", children: [
80
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
81
- /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-[var(--axis-icon-secondary)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h7" }) }),
82
- filename && /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-[var(--axis-text-primary)] truncate", children: filename }),
83
- /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-diff-added)]", "aria-label": `${addedCount}\uC904 ${DIFF_LABELS.added}`, children: [
84
- "+",
85
- addedCount
86
- ] }),
87
- /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-diff-removed)]", "aria-label": `${removedCount}\uC904 ${DIFF_LABELS.removed}`, children: [
88
- "-",
89
- removedCount
90
- ] })
91
- ] }),
92
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 bg-[var(--axis-surface-tertiary)] rounded-md p-0.5", children: [
93
- /* @__PURE__ */ jsx(
94
- "button",
95
- {
96
- onClick: () => setMode("unified"),
97
- "aria-pressed": mode === "unified",
98
- className: cn(
99
- "px-2 py-0.5 text-xs rounded transition-colors",
100
- mode === "unified" ? "bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)] shadow-sm" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)]"
101
- ),
102
- children: "\uD1B5\uD569"
103
- }
104
- ),
105
- /* @__PURE__ */ jsx(
106
- "button",
107
- {
108
- onClick: () => setMode("split"),
109
- "aria-pressed": mode === "split",
110
- className: cn(
111
- "px-2 py-0.5 text-xs rounded transition-colors",
112
- mode === "split" ? "bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)] shadow-sm" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)]"
113
- ),
114
- children: "\uBD84\uD560"
115
- }
116
- )
117
- ] })
118
- ] }),
119
- /* @__PURE__ */ jsx("div", { className: "overflow-auto", children: mode === "unified" ? /* @__PURE__ */ jsx(UnifiedView, { lines: diffLines }) : /* @__PURE__ */ jsx(SplitView, { lines: diffLines }) })
120
- ]
121
- }
122
- );
123
- }
124
- function UnifiedView({ lines }) {
125
- return /* @__PURE__ */ jsx("table", { className: "w-full text-xs font-mono border-collapse", role: "presentation", children: /* @__PURE__ */ jsx("tbody", { children: lines.map((line, i) => /* @__PURE__ */ jsxs("tr", { className: lineTypeStyles[line.type], children: [
126
- /* @__PURE__ */ jsx("td", { className: "select-none text-right px-2 py-0.5 text-[var(--axis-text-tertiary)] w-10 border-r border-[var(--axis-border-default)]", children: line.oldLineNumber ?? "" }),
127
- /* @__PURE__ */ jsx("td", { className: "select-none text-right px-2 py-0.5 text-[var(--axis-text-tertiary)] w-10 border-r border-[var(--axis-border-default)]", children: line.newLineNumber ?? "" }),
128
- /* @__PURE__ */ jsx("td", { className: cn("select-none w-4 text-center py-0.5", lineTypeTextStyles[line.type]), children: lineTypeSymbols[line.type] }),
129
- /* @__PURE__ */ jsx("td", { className: cn("px-2 py-0.5 whitespace-pre", lineTypeTextStyles[line.type]), children: line.content })
130
- ] }, i)) }) });
131
- }
132
- function SplitView({ lines }) {
133
- const leftLines = [];
134
- const rightLines = [];
135
- for (const line of lines) {
136
- if (line.type === "unchanged") {
137
- leftLines.push(line);
138
- rightLines.push(line);
139
- } else if (line.type === "removed") {
140
- leftLines.push(line);
141
- rightLines.push(null);
142
- } else {
143
- leftLines.push(null);
144
- rightLines.push(line);
145
- }
146
- }
147
- return /* @__PURE__ */ jsx("table", { className: "w-full text-xs font-mono border-collapse", role: "presentation", children: /* @__PURE__ */ jsx("tbody", { children: leftLines.map((leftLine, i) => {
148
- const rightLine = rightLines[i];
149
- return /* @__PURE__ */ jsxs("tr", { children: [
150
- /* @__PURE__ */ jsx("td", { className: cn("select-none text-right px-2 py-0.5 text-[var(--axis-text-tertiary)] w-10 border-r border-[var(--axis-border-default)]", leftLine ? lineTypeStyles[leftLine.type] : ""), children: leftLine?.oldLineNumber ?? "" }),
151
- /* @__PURE__ */ jsx("td", { className: cn("select-none w-4 text-center py-0.5", leftLine ? lineTypeTextStyles[leftLine.type] : ""), children: leftLine ? lineTypeSymbols[leftLine.type] : "" }),
152
- /* @__PURE__ */ jsx("td", { className: cn("px-2 py-0.5 whitespace-pre w-1/2 border-r border-[var(--axis-border-default)]", leftLine ? cn(lineTypeStyles[leftLine.type], lineTypeTextStyles[leftLine.type]) : ""), children: leftLine?.content ?? "" }),
153
- /* @__PURE__ */ jsx("td", { className: cn("select-none text-right px-2 py-0.5 text-[var(--axis-text-tertiary)] w-10 border-r border-[var(--axis-border-default)]", rightLine ? lineTypeStyles[rightLine.type] : ""), children: rightLine?.newLineNumber ?? "" }),
154
- /* @__PURE__ */ jsx("td", { className: cn("select-none w-4 text-center py-0.5", rightLine ? lineTypeTextStyles[rightLine.type] : ""), children: rightLine ? lineTypeSymbols[rightLine.type] : "" }),
155
- /* @__PURE__ */ jsx("td", { className: cn("px-2 py-0.5 whitespace-pre w-1/2", rightLine ? cn(lineTypeStyles[rightLine.type], lineTypeTextStyles[rightLine.type]) : ""), children: rightLine?.content ?? "" })
156
- ] }, i);
157
- }) }) });
158
- }
159
-
160
- export {
161
- DiffViewer
162
- };
@@ -1,106 +0,0 @@
1
- import {
2
- MESSAGE_ROLE_LABELS
3
- } from "./chunk-SCZ4BQ2G.mjs";
4
-
5
- // src/message-bubble/index.tsx
6
- import { cn } from "@axis-ds/ui-react";
7
- import { jsx, jsxs } from "react/jsx-runtime";
8
- var roleStyles = {
9
- user: {
10
- container: "flex-row-reverse",
11
- bubble: "bg-[var(--axis-agent-message-user-bg)] text-[var(--axis-agent-message-user-text)] rounded-br-sm"
12
- },
13
- assistant: {
14
- container: "flex-row",
15
- bubble: "bg-[var(--axis-surface-secondary)] text-[var(--axis-text-primary)] rounded-bl-sm"
16
- },
17
- system: {
18
- container: "justify-center",
19
- bubble: "bg-[var(--axis-surface-tertiary)] text-[var(--axis-text-secondary)] text-xs italic"
20
- }
21
- };
22
- var statusIcons = {
23
- sending: /* @__PURE__ */ jsxs("svg", { className: "w-3 h-3 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
24
- /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
25
- /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
26
- ] }),
27
- sent: /* @__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" }) }),
28
- 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: "M12 8v4m0 4h.01" }) })
29
- };
30
- function MessageBubble({
31
- role,
32
- content,
33
- timestamp,
34
- avatar,
35
- status,
36
- actions,
37
- metadata,
38
- className
39
- }) {
40
- const roleLabel = MESSAGE_ROLE_LABELS[role];
41
- const renderAvatar = () => {
42
- if (!avatar) return null;
43
- if (typeof avatar === "string") {
44
- return /* @__PURE__ */ jsx(
45
- "img",
46
- {
47
- src: avatar,
48
- alt: "",
49
- "aria-hidden": "true",
50
- className: "w-8 h-8 rounded-full object-cover flex-shrink-0"
51
- }
52
- );
53
- }
54
- return /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: avatar });
55
- };
56
- return /* @__PURE__ */ jsxs(
57
- "div",
58
- {
59
- role: "article",
60
- "aria-label": `${roleLabel} \uBA54\uC2DC\uC9C0`,
61
- className: cn("flex items-start gap-2", roleStyles[role].container, className),
62
- children: [
63
- role !== "system" && renderAvatar(),
64
- /* @__PURE__ */ jsxs("div", { className: cn("max-w-[80%]", role === "system" && "max-w-full"), children: [
65
- /* @__PURE__ */ jsx(
66
- "div",
67
- {
68
- className: cn(
69
- "rounded-lg px-3 py-2",
70
- roleStyles[role].bubble
71
- ),
72
- children: /* @__PURE__ */ jsx("div", { className: "text-sm whitespace-pre-wrap", children: content })
73
- }
74
- ),
75
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1 px-1", children: [
76
- timestamp && /* @__PURE__ */ jsx(
77
- "time",
78
- {
79
- dateTime: timestamp.toISOString(),
80
- className: "text-xs text-[var(--axis-text-tertiary)]",
81
- children: timestamp.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit" })
82
- }
83
- ),
84
- metadata && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: metadata }),
85
- status && /* @__PURE__ */ jsx(
86
- "span",
87
- {
88
- className: cn(
89
- "text-[var(--axis-text-tertiary)]",
90
- status === "error" && "text-[var(--axis-text-error)]"
91
- ),
92
- "aria-label": status === "sending" ? "\uC804\uC1A1 \uC911" : status === "sent" ? "\uC804\uC1A1\uB428" : "\uC804\uC1A1 \uC2E4\uD328",
93
- children: statusIcons[status]
94
- }
95
- )
96
- ] }),
97
- actions && /* @__PURE__ */ jsx("div", { className: "mt-1", children: actions })
98
- ] })
99
- ]
100
- }
101
- );
102
- }
103
-
104
- export {
105
- MessageBubble
106
- };
@@ -1,83 +0,0 @@
1
- import {
2
- AGENT_STATUS_LABELS
3
- } from "./chunk-SCZ4BQ2G.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-status-success)]",
16
- busy: "bg-[var(--axis-status-warning)]",
17
- offline: "bg-[var(--axis-status-neutral)]"
18
- };
19
- var typeColors = {
20
- assistant: "bg-[var(--axis-agent-avatar-assistant)]",
21
- tool: "bg-[var(--axis-agent-avatar-tool)]",
22
- system: "bg-[var(--axis-agent-avatar-system)]"
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-[var(--axis-agent-avatar-text)]",
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
- };