@wealthx/shadcn 1.5.36 → 1.5.38
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/.turbo/turbo-build.log +125 -119
- package/CHANGELOG.md +12 -0
- package/dist/{chunk-734FOOJC.mjs → chunk-B5PSUONN.mjs} +25 -58
- package/dist/chunk-EFHPSKVF.mjs +192 -0
- package/dist/{chunk-NB3ZL36B.mjs → chunk-MZI77ZMX.mjs} +17 -2
- package/dist/chunk-R7M657QL.mjs +587 -0
- package/dist/{chunk-DIH2NZZ3.mjs → chunk-RRROLESJ.mjs} +33 -23
- package/dist/components/ui/ai-assistant-drawer.js +269 -121
- package/dist/components/ui/ai-assistant-drawer.mjs +2 -1
- package/dist/components/ui/ai-conversations/index.js +474 -286
- package/dist/components/ui/ai-conversations/index.mjs +2 -1
- package/dist/components/ui/chat-input-area.js +429 -0
- package/dist/components/ui/chat-input-area.mjs +11 -0
- package/dist/components/ui/page-top-bar.js +182 -5
- package/dist/components/ui/page-top-bar.mjs +3 -1
- package/dist/components/ui/support-agent/index.js +1131 -0
- package/dist/components/ui/support-agent/index.mjs +27 -0
- package/dist/index.js +4760 -4027
- package/dist/index.mjs +54 -36
- package/dist/styles.css +1 -1
- package/package.json +11 -1
- package/src/components/index.tsx +24 -0
- package/src/components/ui/ai-assistant-drawer.tsx +24 -51
- package/src/components/ui/ai-conversations/index.tsx +16 -8
- package/src/components/ui/ai-conversations/thread.tsx +38 -27
- package/src/components/ui/chat-input-area.tsx +244 -0
- package/src/components/ui/page-top-bar.tsx +31 -5
- package/src/components/ui/support-agent/index.tsx +25 -0
- package/src/components/ui/support-agent/support-agent-fab.tsx +116 -0
- package/src/components/ui/support-agent/support-agent-panel.tsx +498 -0
- package/src/components/ui/support-agent/support-agent-primitives.tsx +354 -0
- package/src/styles/globals.css +1 -0
- package/src/styles/styles-css.ts +1 -1
- package/tsup.config.ts +2 -0
|
@@ -0,0 +1,1131 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __defProps = Object.defineProperties;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
10
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
+
var __spreadValues = (a, b) => {
|
|
14
|
+
for (var prop in b || (b = {}))
|
|
15
|
+
if (__hasOwnProp.call(b, prop))
|
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
|
17
|
+
if (__getOwnPropSymbols)
|
|
18
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
+
if (__propIsEnum.call(b, prop))
|
|
20
|
+
__defNormalProp(a, prop, b[prop]);
|
|
21
|
+
}
|
|
22
|
+
return a;
|
|
23
|
+
};
|
|
24
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
|
+
var __objRest = (source, exclude) => {
|
|
26
|
+
var target = {};
|
|
27
|
+
for (var prop in source)
|
|
28
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
if (source != null && __getOwnPropSymbols)
|
|
31
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
+
target[prop] = source[prop];
|
|
34
|
+
}
|
|
35
|
+
return target;
|
|
36
|
+
};
|
|
37
|
+
var __export = (target, all) => {
|
|
38
|
+
for (var name in all)
|
|
39
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
40
|
+
};
|
|
41
|
+
var __copyProps = (to, from, except, desc) => {
|
|
42
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
43
|
+
for (let key of __getOwnPropNames(from))
|
|
44
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
45
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
46
|
+
}
|
|
47
|
+
return to;
|
|
48
|
+
};
|
|
49
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
50
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
51
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
52
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
53
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
54
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
55
|
+
mod
|
|
56
|
+
));
|
|
57
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
58
|
+
|
|
59
|
+
// src/components/ui/support-agent/index.tsx
|
|
60
|
+
var support_agent_exports = {};
|
|
61
|
+
__export(support_agent_exports, {
|
|
62
|
+
SupportAgentFAB: () => SupportAgentFAB,
|
|
63
|
+
SupportAgentPanel: () => SupportAgentPanel,
|
|
64
|
+
SupportArticleCard: () => SupportArticleCard,
|
|
65
|
+
SupportContextChip: () => SupportContextChip,
|
|
66
|
+
SupportStepGuideCard: () => SupportStepGuideCard,
|
|
67
|
+
SupportSuggestedQuestion: () => SupportSuggestedQuestion
|
|
68
|
+
});
|
|
69
|
+
module.exports = __toCommonJS(support_agent_exports);
|
|
70
|
+
|
|
71
|
+
// src/components/ui/support-agent/support-agent-primitives.tsx
|
|
72
|
+
var React2 = __toESM(require("react"));
|
|
73
|
+
var import_lucide_react2 = require("lucide-react");
|
|
74
|
+
|
|
75
|
+
// src/lib/utils.ts
|
|
76
|
+
var import_clsx = require("clsx");
|
|
77
|
+
var import_tailwind_merge = require("tailwind-merge");
|
|
78
|
+
var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
|
|
79
|
+
extend: {
|
|
80
|
+
classGroups: {
|
|
81
|
+
"font-size": [
|
|
82
|
+
{
|
|
83
|
+
text: [
|
|
84
|
+
"display-large",
|
|
85
|
+
"display-medium",
|
|
86
|
+
"display-small",
|
|
87
|
+
"h1",
|
|
88
|
+
"h2",
|
|
89
|
+
"h3",
|
|
90
|
+
"h4",
|
|
91
|
+
"h5",
|
|
92
|
+
"h6",
|
|
93
|
+
"body-large",
|
|
94
|
+
"body-medium",
|
|
95
|
+
"body-small",
|
|
96
|
+
"label-large",
|
|
97
|
+
"label-medium",
|
|
98
|
+
"label-small",
|
|
99
|
+
"button",
|
|
100
|
+
"button-xs",
|
|
101
|
+
"caption",
|
|
102
|
+
"overline",
|
|
103
|
+
"code"
|
|
104
|
+
]
|
|
105
|
+
}
|
|
106
|
+
]
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
function cn(...inputs) {
|
|
111
|
+
return twMerge((0, import_clsx.clsx)(inputs));
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// src/components/ui/button.tsx
|
|
115
|
+
var import_react = require("react");
|
|
116
|
+
var import_class_variance_authority = require("class-variance-authority");
|
|
117
|
+
var import_lucide_react = require("lucide-react");
|
|
118
|
+
|
|
119
|
+
// src/lib/slot.tsx
|
|
120
|
+
var React = __toESM(require("react"));
|
|
121
|
+
function mergeRefs(...refs) {
|
|
122
|
+
return (value) => {
|
|
123
|
+
for (const ref of refs) {
|
|
124
|
+
if (typeof ref === "function") ref(value);
|
|
125
|
+
else if (ref !== null)
|
|
126
|
+
ref.current = value;
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
}
|
|
130
|
+
var Slot = React.forwardRef(
|
|
131
|
+
(_a, forwardedRef) => {
|
|
132
|
+
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
|
133
|
+
const child = React.Children.only(children);
|
|
134
|
+
if (!React.isValidElement(child)) return null;
|
|
135
|
+
const childProps = child.props;
|
|
136
|
+
const merged = __spreadValues({}, props);
|
|
137
|
+
for (const key of Object.keys(childProps)) {
|
|
138
|
+
if (key === "className") {
|
|
139
|
+
merged.className = [props.className, childProps.className].filter(Boolean).join(" ");
|
|
140
|
+
} else if (key === "style") {
|
|
141
|
+
merged.style = __spreadValues(__spreadValues({}, props.style), childProps.style);
|
|
142
|
+
} else if (key.startsWith("on") && typeof childProps[key] === "function") {
|
|
143
|
+
const parentHandler = props[key];
|
|
144
|
+
if (typeof parentHandler === "function") {
|
|
145
|
+
merged[key] = (...args) => {
|
|
146
|
+
childProps[key](...args);
|
|
147
|
+
parentHandler(...args);
|
|
148
|
+
};
|
|
149
|
+
} else {
|
|
150
|
+
merged[key] = childProps[key];
|
|
151
|
+
}
|
|
152
|
+
} else {
|
|
153
|
+
merged[key] = childProps[key];
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
const childRef = child.ref;
|
|
157
|
+
merged.ref = forwardedRef ? mergeRefs(forwardedRef, childRef) : childRef;
|
|
158
|
+
return React.cloneElement(
|
|
159
|
+
child,
|
|
160
|
+
merged
|
|
161
|
+
);
|
|
162
|
+
}
|
|
163
|
+
);
|
|
164
|
+
Slot.displayName = "Slot";
|
|
165
|
+
|
|
166
|
+
// src/components/ui/button.tsx
|
|
167
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
168
|
+
var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
169
|
+
"inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 font-sans text-button whitespace-nowrap transition-all active:scale-[0.98] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
170
|
+
{
|
|
171
|
+
variants: {
|
|
172
|
+
variant: {
|
|
173
|
+
default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
|
174
|
+
secondary: "bg-brand-secondary text-brand-secondary-foreground shadow-xs hover:bg-brand-secondary/80 focus-visible:ring-brand-secondary/30",
|
|
175
|
+
destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
|
|
176
|
+
outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground focus-visible:border-border focus-visible:ring-border/50 dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
177
|
+
"outline-primary": "border border-primary text-foreground bg-transparent shadow-xs hover:bg-primary/5 focus-visible:ring-primary/50",
|
|
178
|
+
"outline-secondary": "border border-brand-secondary text-brand-secondary bg-transparent shadow-xs hover:bg-brand-secondary/10 focus-visible:border-brand-secondary focus-visible:ring-brand-secondary/30",
|
|
179
|
+
ghost: "hover:bg-accent hover:text-accent-foreground hover:shadow-xs focus-visible:ring-border/50 dark:hover:bg-accent/50",
|
|
180
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
181
|
+
},
|
|
182
|
+
size: {
|
|
183
|
+
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
184
|
+
xs: "h-6 gap-1 px-2 text-button-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
|
|
185
|
+
sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
|
|
186
|
+
lg: "h-10 px-6 has-[>svg]:px-4",
|
|
187
|
+
icon: "size-9",
|
|
188
|
+
"icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
|
|
189
|
+
"icon-sm": "size-8",
|
|
190
|
+
"icon-lg": "size-10"
|
|
191
|
+
}
|
|
192
|
+
},
|
|
193
|
+
defaultVariants: {
|
|
194
|
+
variant: "default",
|
|
195
|
+
size: "default"
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
);
|
|
199
|
+
var Button = (0, import_react.forwardRef)(function Button2(_a, ref) {
|
|
200
|
+
var _b = _a, {
|
|
201
|
+
className,
|
|
202
|
+
variant,
|
|
203
|
+
size,
|
|
204
|
+
asChild = false,
|
|
205
|
+
loading = false,
|
|
206
|
+
disabled,
|
|
207
|
+
type = "button",
|
|
208
|
+
children
|
|
209
|
+
} = _b, props = __objRest(_b, [
|
|
210
|
+
"className",
|
|
211
|
+
"variant",
|
|
212
|
+
"size",
|
|
213
|
+
"asChild",
|
|
214
|
+
"loading",
|
|
215
|
+
"disabled",
|
|
216
|
+
"type",
|
|
217
|
+
"children"
|
|
218
|
+
]);
|
|
219
|
+
const Comp = asChild ? Slot : "button";
|
|
220
|
+
const isIconOnly = size === "icon" || size === "icon-xs" || size === "icon-sm" || size === "icon-lg";
|
|
221
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
222
|
+
Comp,
|
|
223
|
+
__spreadProps(__spreadValues({
|
|
224
|
+
className: cn(buttonVariants({ variant, size, className })),
|
|
225
|
+
"data-size": size,
|
|
226
|
+
"data-slot": "button",
|
|
227
|
+
"data-variant": variant,
|
|
228
|
+
disabled: loading || disabled,
|
|
229
|
+
ref,
|
|
230
|
+
type
|
|
231
|
+
}, props), {
|
|
232
|
+
children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
233
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Loader2, { "aria-hidden": "true", className: "animate-spin" }),
|
|
234
|
+
!isIconOnly && children
|
|
235
|
+
] }) : children
|
|
236
|
+
})
|
|
237
|
+
);
|
|
238
|
+
});
|
|
239
|
+
|
|
240
|
+
// src/components/ui/skeleton.tsx
|
|
241
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
242
|
+
function Skeleton(_a) {
|
|
243
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
244
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
245
|
+
"div",
|
|
246
|
+
__spreadValues({
|
|
247
|
+
className: cn("animate-pulse bg-muted", className),
|
|
248
|
+
"data-slot": "skeleton"
|
|
249
|
+
}, props)
|
|
250
|
+
);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
// src/components/ui/support-agent/support-agent-primitives.tsx
|
|
254
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
255
|
+
function SupportContextChip({
|
|
256
|
+
context,
|
|
257
|
+
isLoading = false,
|
|
258
|
+
className
|
|
259
|
+
}) {
|
|
260
|
+
if (isLoading) {
|
|
261
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
262
|
+
Skeleton,
|
|
263
|
+
{
|
|
264
|
+
className: cn("h-6 w-48", className),
|
|
265
|
+
"data-slot": "support-context-chip"
|
|
266
|
+
}
|
|
267
|
+
);
|
|
268
|
+
}
|
|
269
|
+
if (!context) return null;
|
|
270
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
271
|
+
"div",
|
|
272
|
+
{
|
|
273
|
+
className: cn(
|
|
274
|
+
"flex w-fit items-center gap-1.5 bg-muted px-2.5 py-1 text-xs text-muted-foreground",
|
|
275
|
+
className
|
|
276
|
+
),
|
|
277
|
+
"data-slot": "support-context-chip",
|
|
278
|
+
children: [
|
|
279
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.MapPin, { className: "size-3 shrink-0", "aria-hidden": "true" }),
|
|
280
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "font-medium text-foreground", children: context.pageLabel }),
|
|
281
|
+
context.entityLabel && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
282
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": "true", children: "\u203A" }),
|
|
283
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "truncate max-w-[160px]", children: context.entityLabel })
|
|
284
|
+
] })
|
|
285
|
+
]
|
|
286
|
+
}
|
|
287
|
+
);
|
|
288
|
+
}
|
|
289
|
+
function SupportSuggestedQuestion({
|
|
290
|
+
question,
|
|
291
|
+
onSelect,
|
|
292
|
+
className
|
|
293
|
+
}) {
|
|
294
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
295
|
+
Button,
|
|
296
|
+
{
|
|
297
|
+
type: "button",
|
|
298
|
+
variant: "ghost",
|
|
299
|
+
onClick: () => onSelect(question),
|
|
300
|
+
className: cn(
|
|
301
|
+
"h-auto w-full justify-start border border-border bg-background px-3 py-2.5 text-left text-sm font-normal text-foreground hover:bg-muted/50",
|
|
302
|
+
className
|
|
303
|
+
),
|
|
304
|
+
"data-slot": "support-suggested-question",
|
|
305
|
+
children: question
|
|
306
|
+
}
|
|
307
|
+
);
|
|
308
|
+
}
|
|
309
|
+
function SupportStepGuideCard({
|
|
310
|
+
title,
|
|
311
|
+
steps,
|
|
312
|
+
onHighlight,
|
|
313
|
+
onStepComplete,
|
|
314
|
+
defaultExpanded,
|
|
315
|
+
className
|
|
316
|
+
}) {
|
|
317
|
+
const isLong = steps.length > 5;
|
|
318
|
+
const [expanded, setExpanded] = React2.useState(defaultExpanded != null ? defaultExpanded : !isLong);
|
|
319
|
+
const completedCount = steps.filter((s) => s.completed).length;
|
|
320
|
+
const allDone = completedCount === steps.length;
|
|
321
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
322
|
+
"div",
|
|
323
|
+
{
|
|
324
|
+
className: cn("mt-2 border border-border bg-background", className),
|
|
325
|
+
"data-slot": "support-step-guide-card",
|
|
326
|
+
children: [
|
|
327
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
328
|
+
"button",
|
|
329
|
+
{
|
|
330
|
+
type: "button",
|
|
331
|
+
onClick: () => setExpanded((v) => !v),
|
|
332
|
+
className: "flex w-full items-center justify-between gap-2 px-3 py-2.5 text-left hover:bg-muted/30",
|
|
333
|
+
"aria-expanded": expanded,
|
|
334
|
+
children: [
|
|
335
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
|
|
336
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm font-semibold text-foreground", children: title }),
|
|
337
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs text-muted-foreground", children: allDone ? "All steps complete" : `${completedCount} of ${steps.length} complete` })
|
|
338
|
+
] }),
|
|
339
|
+
expanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
340
|
+
import_lucide_react2.ChevronUp,
|
|
341
|
+
{
|
|
342
|
+
className: "size-4 shrink-0 text-muted-foreground",
|
|
343
|
+
"aria-hidden": "true"
|
|
344
|
+
}
|
|
345
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
346
|
+
import_lucide_react2.ChevronDown,
|
|
347
|
+
{
|
|
348
|
+
className: "size-4 shrink-0 text-muted-foreground",
|
|
349
|
+
"aria-hidden": "true"
|
|
350
|
+
}
|
|
351
|
+
)
|
|
352
|
+
]
|
|
353
|
+
}
|
|
354
|
+
),
|
|
355
|
+
expanded && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ol", { className: "flex flex-col divide-y divide-border border-t border-border", children: steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
356
|
+
"li",
|
|
357
|
+
{
|
|
358
|
+
className: cn(
|
|
359
|
+
"flex items-start gap-3 px-3 py-2.5",
|
|
360
|
+
step.completed && "opacity-60"
|
|
361
|
+
),
|
|
362
|
+
children: [
|
|
363
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
364
|
+
"button",
|
|
365
|
+
{
|
|
366
|
+
type: "button",
|
|
367
|
+
onClick: () => !step.completed && (onStepComplete == null ? void 0 : onStepComplete(step.id)),
|
|
368
|
+
disabled: step.completed,
|
|
369
|
+
title: step.completed ? "Step complete" : "Mark as done",
|
|
370
|
+
className: cn(
|
|
371
|
+
"mt-0.5 flex size-5 shrink-0 items-center justify-center border text-xs font-semibold",
|
|
372
|
+
step.completed ? "border-primary bg-primary text-primary-foreground" : "border-border text-muted-foreground hover:bg-muted"
|
|
373
|
+
),
|
|
374
|
+
"aria-label": step.completed ? `Step ${index + 1} complete` : `Mark step ${index + 1} as done`,
|
|
375
|
+
children: step.completed ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Check, { className: "size-3", "aria-hidden": "true" }) : index + 1
|
|
376
|
+
}
|
|
377
|
+
),
|
|
378
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-1 flex-col gap-1", children: [
|
|
379
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm text-foreground leading-snug", children: step.label }),
|
|
380
|
+
step.elementId && onHighlight && !step.completed && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
381
|
+
Button,
|
|
382
|
+
{
|
|
383
|
+
type: "button",
|
|
384
|
+
variant: "ghost",
|
|
385
|
+
size: "sm",
|
|
386
|
+
onClick: () => onHighlight(step.elementId),
|
|
387
|
+
className: "h-auto w-fit gap-1 px-0 py-0 text-xs text-primary hover:bg-transparent hover:underline",
|
|
388
|
+
children: [
|
|
389
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.MousePointerClick, { className: "size-3", "aria-hidden": "true" }),
|
|
390
|
+
"Show me"
|
|
391
|
+
]
|
|
392
|
+
}
|
|
393
|
+
)
|
|
394
|
+
] })
|
|
395
|
+
]
|
|
396
|
+
},
|
|
397
|
+
step.id
|
|
398
|
+
)) })
|
|
399
|
+
]
|
|
400
|
+
}
|
|
401
|
+
);
|
|
402
|
+
}
|
|
403
|
+
function SupportArticleCard({
|
|
404
|
+
title,
|
|
405
|
+
excerpt,
|
|
406
|
+
href,
|
|
407
|
+
isExternal = false,
|
|
408
|
+
className
|
|
409
|
+
}) {
|
|
410
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
411
|
+
"a",
|
|
412
|
+
{
|
|
413
|
+
href,
|
|
414
|
+
target: isExternal ? "_blank" : void 0,
|
|
415
|
+
rel: isExternal ? "noopener noreferrer" : void 0,
|
|
416
|
+
className: cn(
|
|
417
|
+
"mt-2 flex flex-col gap-1.5 border border-border bg-background px-3 py-2.5 text-left no-underline hover:bg-muted/30 text-foreground",
|
|
418
|
+
className
|
|
419
|
+
),
|
|
420
|
+
"data-slot": "support-article-card",
|
|
421
|
+
children: [
|
|
422
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
|
|
423
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-foreground", children: title }),
|
|
424
|
+
isExternal && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
425
|
+
import_lucide_react2.ExternalLink,
|
|
426
|
+
{
|
|
427
|
+
className: "size-3.5 shrink-0 text-muted-foreground",
|
|
428
|
+
"aria-hidden": "true"
|
|
429
|
+
}
|
|
430
|
+
)
|
|
431
|
+
] }),
|
|
432
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-xs text-muted-foreground line-clamp-2 leading-relaxed", children: excerpt }),
|
|
433
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs font-medium text-primary", children: isExternal ? "Open article \u2192" : "Read more \u2192" })
|
|
434
|
+
]
|
|
435
|
+
}
|
|
436
|
+
);
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
// src/components/ui/support-agent/support-agent-fab.tsx
|
|
440
|
+
var import_lucide_react3 = require("lucide-react");
|
|
441
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
442
|
+
function SupportAgentFAB({
|
|
443
|
+
isOpen = false,
|
|
444
|
+
onClick,
|
|
445
|
+
hasNudge = false,
|
|
446
|
+
nudgeMessage,
|
|
447
|
+
onDismissNudge,
|
|
448
|
+
position = "bottom-right",
|
|
449
|
+
className
|
|
450
|
+
}) {
|
|
451
|
+
const showBubble = hasNudge && !!nudgeMessage && !isOpen;
|
|
452
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
453
|
+
"div",
|
|
454
|
+
{
|
|
455
|
+
className: cn(
|
|
456
|
+
"fixed bottom-6 z-50 flex flex-col items-end gap-2",
|
|
457
|
+
position === "bottom-right" ? "right-6" : "left-6",
|
|
458
|
+
className
|
|
459
|
+
),
|
|
460
|
+
"data-slot": "support-agent-fab",
|
|
461
|
+
children: [
|
|
462
|
+
showBubble && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative flex max-w-[220px] items-start gap-2 border border-border bg-background px-3 py-2 shadow-md", children: [
|
|
463
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "flex-1 text-xs text-foreground leading-relaxed", children: nudgeMessage }),
|
|
464
|
+
onDismissNudge && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
465
|
+
"button",
|
|
466
|
+
{
|
|
467
|
+
type: "button",
|
|
468
|
+
onClick: onDismissNudge,
|
|
469
|
+
className: "mt-0.5 shrink-0 text-muted-foreground hover:text-foreground",
|
|
470
|
+
"aria-label": "Dismiss",
|
|
471
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.X, { className: "size-3" })
|
|
472
|
+
}
|
|
473
|
+
),
|
|
474
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
475
|
+
"span",
|
|
476
|
+
{
|
|
477
|
+
className: "absolute -bottom-[5px] right-4 size-2.5 rotate-45 border-b border-r border-border bg-background",
|
|
478
|
+
"aria-hidden": "true"
|
|
479
|
+
}
|
|
480
|
+
)
|
|
481
|
+
] }),
|
|
482
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative", children: [
|
|
483
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
484
|
+
Button,
|
|
485
|
+
{
|
|
486
|
+
type: "button",
|
|
487
|
+
size: "icon",
|
|
488
|
+
onClick,
|
|
489
|
+
className: "size-12 rounded-full shadow-lg",
|
|
490
|
+
"aria-label": isOpen ? "Close support assistant" : "Open support assistant",
|
|
491
|
+
"data-state": isOpen ? "open" : "closed",
|
|
492
|
+
children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.X, { className: "size-5", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.HelpCircle, { className: "size-5", "aria-hidden": "true" })
|
|
493
|
+
}
|
|
494
|
+
),
|
|
495
|
+
hasNudge && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
496
|
+
"span",
|
|
497
|
+
{
|
|
498
|
+
className: "absolute -right-0.5 -top-0.5 size-3 rounded-full border-2 border-background bg-destructive",
|
|
499
|
+
"aria-label": "New suggestion",
|
|
500
|
+
role: "status"
|
|
501
|
+
}
|
|
502
|
+
)
|
|
503
|
+
] })
|
|
504
|
+
]
|
|
505
|
+
}
|
|
506
|
+
);
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
// src/components/ui/support-agent/support-agent-panel.tsx
|
|
510
|
+
var React5 = __toESM(require("react"));
|
|
511
|
+
var import_lucide_react7 = require("lucide-react");
|
|
512
|
+
|
|
513
|
+
// src/components/ui/sheet.tsx
|
|
514
|
+
var import_lucide_react4 = require("lucide-react");
|
|
515
|
+
var import_dialog = require("@base-ui/react/dialog");
|
|
516
|
+
|
|
517
|
+
// src/lib/theme-provider.tsx
|
|
518
|
+
var import_react2 = require("react");
|
|
519
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
520
|
+
var ThemeVarsContext = (0, import_react2.createContext)({});
|
|
521
|
+
function useThemeVars() {
|
|
522
|
+
return (0, import_react2.useContext)(ThemeVarsContext);
|
|
523
|
+
}
|
|
524
|
+
|
|
525
|
+
// src/components/ui/sheet.tsx
|
|
526
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
527
|
+
var SIDE_CLASSES = {
|
|
528
|
+
right: "inset-y-0 right-0 h-full w-1/2 border-l data-ending-style:slide-out-to-right data-open:slide-in-from-right",
|
|
529
|
+
left: "inset-y-0 left-0 h-full w-1/2 border-r data-ending-style:slide-out-to-left data-open:slide-in-from-left",
|
|
530
|
+
top: "inset-x-0 top-0 h-auto border-b data-ending-style:slide-out-to-top data-open:slide-in-from-top",
|
|
531
|
+
bottom: "inset-x-0 bottom-0 h-auto border-t data-ending-style:slide-out-to-bottom data-open:slide-in-from-bottom"
|
|
532
|
+
};
|
|
533
|
+
function Sheet(_a) {
|
|
534
|
+
var props = __objRest(_a, []);
|
|
535
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dialog.Dialog.Root, __spreadValues({ "data-slot": "sheet" }, props));
|
|
536
|
+
}
|
|
537
|
+
function SheetPortal(_a) {
|
|
538
|
+
var props = __objRest(_a, []);
|
|
539
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dialog.Dialog.Portal, __spreadValues({ "data-slot": "sheet-portal" }, props));
|
|
540
|
+
}
|
|
541
|
+
function SheetOverlay(_a) {
|
|
542
|
+
var _b = _a, {
|
|
543
|
+
className
|
|
544
|
+
} = _b, props = __objRest(_b, [
|
|
545
|
+
"className"
|
|
546
|
+
]);
|
|
547
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
548
|
+
import_dialog.Dialog.Backdrop,
|
|
549
|
+
__spreadValues({
|
|
550
|
+
className: cn(
|
|
551
|
+
"fixed inset-0 z-50 bg-foreground/50 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0",
|
|
552
|
+
className
|
|
553
|
+
),
|
|
554
|
+
"data-slot": "sheet-overlay"
|
|
555
|
+
}, props)
|
|
556
|
+
);
|
|
557
|
+
}
|
|
558
|
+
function SheetContent(_a) {
|
|
559
|
+
var _b = _a, {
|
|
560
|
+
className,
|
|
561
|
+
children,
|
|
562
|
+
side = "right",
|
|
563
|
+
showCloseButton = true,
|
|
564
|
+
style
|
|
565
|
+
} = _b, props = __objRest(_b, [
|
|
566
|
+
"className",
|
|
567
|
+
"children",
|
|
568
|
+
"side",
|
|
569
|
+
"showCloseButton",
|
|
570
|
+
"style"
|
|
571
|
+
]);
|
|
572
|
+
const themeVars = useThemeVars();
|
|
573
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(SheetPortal, { children: [
|
|
574
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SheetOverlay, {}),
|
|
575
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
576
|
+
import_dialog.Dialog.Popup,
|
|
577
|
+
__spreadProps(__spreadValues({
|
|
578
|
+
className: cn(
|
|
579
|
+
"fixed z-50 flex flex-col gap-4 bg-background transition ease-in-out data-ending-style:animate-out data-ending-style:duration-300 data-ending-style:fill-mode-forwards data-open:animate-in data-open:duration-500",
|
|
580
|
+
SIDE_CLASSES[side],
|
|
581
|
+
className
|
|
582
|
+
),
|
|
583
|
+
"data-slot": "sheet-content",
|
|
584
|
+
style: __spreadValues(__spreadValues({}, themeVars), style)
|
|
585
|
+
}, props), {
|
|
586
|
+
children: [
|
|
587
|
+
children,
|
|
588
|
+
showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
589
|
+
import_dialog.Dialog.Close,
|
|
590
|
+
{
|
|
591
|
+
className: "absolute top-4 right-4 transition-colors hover:bg-foreground/5 focus:outline-hidden focus:ring-2 focus:ring-border focus:ring-offset-0 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
592
|
+
"data-slot": "sheet-icon-close",
|
|
593
|
+
children: [
|
|
594
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.XIcon, {}),
|
|
595
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sr-only", children: "Close" })
|
|
596
|
+
]
|
|
597
|
+
}
|
|
598
|
+
) : null
|
|
599
|
+
]
|
|
600
|
+
})
|
|
601
|
+
)
|
|
602
|
+
] });
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
// src/components/ui/chat-input-area.tsx
|
|
606
|
+
var React4 = __toESM(require("react"));
|
|
607
|
+
var import_lucide_react5 = require("lucide-react");
|
|
608
|
+
|
|
609
|
+
// src/components/ui/textarea.tsx
|
|
610
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
611
|
+
function Textarea(_a) {
|
|
612
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
613
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
614
|
+
"textarea",
|
|
615
|
+
__spreadValues({
|
|
616
|
+
className: cn(
|
|
617
|
+
// WealthX: removed shadow-xs (flat panels), added font-sans
|
|
618
|
+
"flex field-sizing-content min-h-16 w-full border border-input bg-transparent px-3 py-2 text-body-medium font-sans transition-[color,box-shadow] outline-none placeholder:font-normal placeholder:text-muted-foreground focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
|
|
619
|
+
className
|
|
620
|
+
),
|
|
621
|
+
"data-slot": "textarea"
|
|
622
|
+
}, props)
|
|
623
|
+
);
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
// src/components/ui/chat-input-area.tsx
|
|
627
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
628
|
+
var DEFAULT_HINT = "Enter to send \xB7 Shift+Enter for new line";
|
|
629
|
+
function ChatInputArea({
|
|
630
|
+
value,
|
|
631
|
+
onChange,
|
|
632
|
+
onSend,
|
|
633
|
+
onAttachFile,
|
|
634
|
+
onAttachImage,
|
|
635
|
+
disabled = false,
|
|
636
|
+
placeholder = "Type your message\u2026",
|
|
637
|
+
hint = DEFAULT_HINT,
|
|
638
|
+
maxHeight = 160,
|
|
639
|
+
autoFocus = false,
|
|
640
|
+
className
|
|
641
|
+
}) {
|
|
642
|
+
const textareaRef = React4.useRef(null);
|
|
643
|
+
const fileInputRef = React4.useRef(null);
|
|
644
|
+
const imageInputRef = React4.useRef(null);
|
|
645
|
+
React4.useEffect(() => {
|
|
646
|
+
if (autoFocus) {
|
|
647
|
+
setTimeout(() => {
|
|
648
|
+
var _a;
|
|
649
|
+
return (_a = textareaRef.current) == null ? void 0 : _a.focus();
|
|
650
|
+
}, 50);
|
|
651
|
+
}
|
|
652
|
+
}, [autoFocus]);
|
|
653
|
+
const handleSend = React4.useCallback(() => {
|
|
654
|
+
const text = value.trim();
|
|
655
|
+
if (!text || disabled) return;
|
|
656
|
+
onSend(text);
|
|
657
|
+
if (textareaRef.current) {
|
|
658
|
+
textareaRef.current.style.height = "auto";
|
|
659
|
+
}
|
|
660
|
+
}, [value, disabled, onSend]);
|
|
661
|
+
const handleKeyDown = React4.useCallback(
|
|
662
|
+
(e) => {
|
|
663
|
+
if (e.key === "Enter" && !e.shiftKey) {
|
|
664
|
+
e.preventDefault();
|
|
665
|
+
handleSend();
|
|
666
|
+
}
|
|
667
|
+
},
|
|
668
|
+
[handleSend]
|
|
669
|
+
);
|
|
670
|
+
const handleTextareaChange = React4.useCallback(
|
|
671
|
+
(e) => {
|
|
672
|
+
onChange(e.target.value);
|
|
673
|
+
const el = e.target;
|
|
674
|
+
el.style.height = "auto";
|
|
675
|
+
el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
|
|
676
|
+
},
|
|
677
|
+
[onChange, maxHeight]
|
|
678
|
+
);
|
|
679
|
+
const handleFileChange = React4.useCallback(
|
|
680
|
+
(e) => {
|
|
681
|
+
var _a;
|
|
682
|
+
if ((_a = e.target.files) == null ? void 0 : _a.length) {
|
|
683
|
+
onAttachFile == null ? void 0 : onAttachFile(e.target.files);
|
|
684
|
+
e.target.value = "";
|
|
685
|
+
}
|
|
686
|
+
},
|
|
687
|
+
[onAttachFile]
|
|
688
|
+
);
|
|
689
|
+
const handleImageChange = React4.useCallback(
|
|
690
|
+
(e) => {
|
|
691
|
+
var _a;
|
|
692
|
+
if ((_a = e.target.files) == null ? void 0 : _a.length) {
|
|
693
|
+
onAttachImage == null ? void 0 : onAttachImage(e.target.files);
|
|
694
|
+
e.target.value = "";
|
|
695
|
+
}
|
|
696
|
+
},
|
|
697
|
+
[onAttachImage]
|
|
698
|
+
);
|
|
699
|
+
const showFileButton = typeof onAttachFile === "function";
|
|
700
|
+
const showImageButton = typeof onAttachImage === "function";
|
|
701
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
702
|
+
"div",
|
|
703
|
+
{
|
|
704
|
+
"data-slot": "chat-input-area",
|
|
705
|
+
className: cn("flex flex-col gap-1.5", className),
|
|
706
|
+
children: [
|
|
707
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "border border-border bg-background flex flex-col focus-within:ring-1 focus-within:ring-ring", children: [
|
|
708
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
709
|
+
Textarea,
|
|
710
|
+
{
|
|
711
|
+
ref: textareaRef,
|
|
712
|
+
value,
|
|
713
|
+
onChange: handleTextareaChange,
|
|
714
|
+
onKeyDown: handleKeyDown,
|
|
715
|
+
placeholder,
|
|
716
|
+
disabled,
|
|
717
|
+
rows: 3,
|
|
718
|
+
className: "resize-none text-sm border-0 shadow-none focus-visible:ring-0 px-3 pt-3 pb-1 min-h-[72px]",
|
|
719
|
+
"aria-label": placeholder
|
|
720
|
+
}
|
|
721
|
+
),
|
|
722
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between px-2 pb-2", children: [
|
|
723
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-0.5", children: [
|
|
724
|
+
showFileButton && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
|
|
725
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
726
|
+
Button,
|
|
727
|
+
{
|
|
728
|
+
variant: "ghost",
|
|
729
|
+
size: "icon-sm",
|
|
730
|
+
type: "button",
|
|
731
|
+
title: "Attach file",
|
|
732
|
+
"aria-label": "Attach file",
|
|
733
|
+
disabled,
|
|
734
|
+
onClick: () => {
|
|
735
|
+
var _a;
|
|
736
|
+
return (_a = fileInputRef.current) == null ? void 0 : _a.click();
|
|
737
|
+
},
|
|
738
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.Paperclip, { className: "size-3.5", "aria-hidden": "true" })
|
|
739
|
+
}
|
|
740
|
+
),
|
|
741
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
742
|
+
"input",
|
|
743
|
+
{
|
|
744
|
+
ref: fileInputRef,
|
|
745
|
+
type: "file",
|
|
746
|
+
multiple: true,
|
|
747
|
+
className: "sr-only",
|
|
748
|
+
tabIndex: -1,
|
|
749
|
+
onChange: handleFileChange
|
|
750
|
+
}
|
|
751
|
+
)
|
|
752
|
+
] }),
|
|
753
|
+
showImageButton && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
|
|
754
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
755
|
+
Button,
|
|
756
|
+
{
|
|
757
|
+
variant: "ghost",
|
|
758
|
+
size: "icon-sm",
|
|
759
|
+
type: "button",
|
|
760
|
+
title: "Upload image",
|
|
761
|
+
"aria-label": "Upload image",
|
|
762
|
+
disabled,
|
|
763
|
+
onClick: () => {
|
|
764
|
+
var _a;
|
|
765
|
+
return (_a = imageInputRef.current) == null ? void 0 : _a.click();
|
|
766
|
+
},
|
|
767
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.ImagePlus, { className: "size-3.5", "aria-hidden": "true" })
|
|
768
|
+
}
|
|
769
|
+
),
|
|
770
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
771
|
+
"input",
|
|
772
|
+
{
|
|
773
|
+
ref: imageInputRef,
|
|
774
|
+
type: "file",
|
|
775
|
+
multiple: true,
|
|
776
|
+
accept: "image/*",
|
|
777
|
+
className: "sr-only",
|
|
778
|
+
tabIndex: -1,
|
|
779
|
+
onChange: handleImageChange
|
|
780
|
+
}
|
|
781
|
+
)
|
|
782
|
+
] })
|
|
783
|
+
] }),
|
|
784
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
785
|
+
Button,
|
|
786
|
+
{
|
|
787
|
+
size: "icon-sm",
|
|
788
|
+
type: "button",
|
|
789
|
+
"aria-label": "Send message",
|
|
790
|
+
disabled: !value.trim() || disabled,
|
|
791
|
+
onClick: handleSend,
|
|
792
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.Send, { className: "size-3.5", "aria-hidden": "true" })
|
|
793
|
+
}
|
|
794
|
+
)
|
|
795
|
+
] })
|
|
796
|
+
] }),
|
|
797
|
+
hint !== false && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-xs text-muted-foreground", children: hint })
|
|
798
|
+
]
|
|
799
|
+
}
|
|
800
|
+
);
|
|
801
|
+
}
|
|
802
|
+
|
|
803
|
+
// src/components/ui/spinner.tsx
|
|
804
|
+
var import_class_variance_authority2 = require("class-variance-authority");
|
|
805
|
+
var import_lucide_react6 = require("lucide-react");
|
|
806
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
807
|
+
var spinnerVariants = (0, import_class_variance_authority2.cva)("animate-spin shrink-0", {
|
|
808
|
+
variants: {
|
|
809
|
+
size: {
|
|
810
|
+
sm: "size-3",
|
|
811
|
+
default: "size-4",
|
|
812
|
+
lg: "size-6",
|
|
813
|
+
xl: "size-8"
|
|
814
|
+
}
|
|
815
|
+
},
|
|
816
|
+
defaultVariants: {
|
|
817
|
+
size: "default"
|
|
818
|
+
}
|
|
819
|
+
});
|
|
820
|
+
function Spinner(_a) {
|
|
821
|
+
var _b = _a, { className, size } = _b, props = __objRest(_b, ["className", "size"]);
|
|
822
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
823
|
+
import_lucide_react6.LoaderCircle,
|
|
824
|
+
__spreadValues({
|
|
825
|
+
"aria-hidden": "true",
|
|
826
|
+
className: cn(spinnerVariants({ size }), className),
|
|
827
|
+
"data-slot": "spinner"
|
|
828
|
+
}, props)
|
|
829
|
+
);
|
|
830
|
+
}
|
|
831
|
+
|
|
832
|
+
// src/components/ui/support-agent/support-agent-panel.tsx
|
|
833
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
834
|
+
function SupportTypingIndicator() {
|
|
835
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
836
|
+
"span",
|
|
837
|
+
{
|
|
838
|
+
className: "flex items-center gap-1 py-1",
|
|
839
|
+
"aria-label": "Assistant is thinking",
|
|
840
|
+
role: "status",
|
|
841
|
+
children: [0, 150, 300].map((delay) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
842
|
+
"span",
|
|
843
|
+
{
|
|
844
|
+
className: "size-1.5 rounded-full bg-current animate-bounce",
|
|
845
|
+
style: { animationDelay: `${delay}ms` },
|
|
846
|
+
"aria-hidden": "true"
|
|
847
|
+
},
|
|
848
|
+
delay
|
|
849
|
+
))
|
|
850
|
+
}
|
|
851
|
+
);
|
|
852
|
+
}
|
|
853
|
+
function MessageBubble({ message }) {
|
|
854
|
+
const isUser = message.role === "user";
|
|
855
|
+
const isEmpty = !message.content.trim();
|
|
856
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
857
|
+
"div",
|
|
858
|
+
{
|
|
859
|
+
className: cn(
|
|
860
|
+
"flex w-full flex-col",
|
|
861
|
+
isUser ? "items-end" : "items-start"
|
|
862
|
+
),
|
|
863
|
+
children: [
|
|
864
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
865
|
+
"div",
|
|
866
|
+
{
|
|
867
|
+
className: cn(
|
|
868
|
+
"max-w-[88%] px-3 py-2 text-sm",
|
|
869
|
+
isUser ? "bg-primary text-primary-foreground" : "bg-muted text-foreground",
|
|
870
|
+
message.isErrored && "bg-destructive/10 text-destructive"
|
|
871
|
+
),
|
|
872
|
+
"data-slot": "support-message-bubble",
|
|
873
|
+
"data-role": message.role,
|
|
874
|
+
children: [
|
|
875
|
+
isEmpty && message.isStreaming ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SupportTypingIndicator, {}) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "whitespace-pre-wrap break-words leading-relaxed", children: message.content }),
|
|
876
|
+
message.isErrored && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "mt-1 text-xs opacity-70", children: "Failed to send. Please try again." })
|
|
877
|
+
]
|
|
878
|
+
}
|
|
879
|
+
),
|
|
880
|
+
!isUser && message.richContent && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-full max-w-[88%]", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RichContentRenderer, { richContent: message.richContent }) })
|
|
881
|
+
]
|
|
882
|
+
}
|
|
883
|
+
);
|
|
884
|
+
}
|
|
885
|
+
function RichContentRenderer({ richContent }) {
|
|
886
|
+
if (richContent.type === "step-guide") {
|
|
887
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
888
|
+
SupportStepGuideCard,
|
|
889
|
+
{
|
|
890
|
+
title: richContent.title,
|
|
891
|
+
steps: richContent.steps
|
|
892
|
+
}
|
|
893
|
+
);
|
|
894
|
+
}
|
|
895
|
+
if (richContent.type === "article") {
|
|
896
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
897
|
+
SupportArticleCard,
|
|
898
|
+
{
|
|
899
|
+
title: richContent.title,
|
|
900
|
+
excerpt: richContent.excerpt,
|
|
901
|
+
href: richContent.href,
|
|
902
|
+
isExternal: richContent.isExternal
|
|
903
|
+
}
|
|
904
|
+
);
|
|
905
|
+
}
|
|
906
|
+
return null;
|
|
907
|
+
}
|
|
908
|
+
function SupportAgentPanel({
|
|
909
|
+
open,
|
|
910
|
+
onClose,
|
|
911
|
+
messages = [],
|
|
912
|
+
recentConversations,
|
|
913
|
+
suggestedQuestions = [],
|
|
914
|
+
conversationTitle,
|
|
915
|
+
context,
|
|
916
|
+
isStreaming = false,
|
|
917
|
+
isLoading = false,
|
|
918
|
+
onSendMessage,
|
|
919
|
+
onAttachFile,
|
|
920
|
+
onAttachImage,
|
|
921
|
+
onNewChat,
|
|
922
|
+
onBack,
|
|
923
|
+
onOpenConversation,
|
|
924
|
+
onViewAllConversations,
|
|
925
|
+
className
|
|
926
|
+
}) {
|
|
927
|
+
var _a;
|
|
928
|
+
const [inputValue, setInputValue] = React5.useState("");
|
|
929
|
+
const messagesEndRef = React5.useRef(null);
|
|
930
|
+
const hasMessages = messages.length > 0;
|
|
931
|
+
const isChatMode = hasMessages && !!conversationTitle;
|
|
932
|
+
React5.useEffect(() => {
|
|
933
|
+
if (!messagesEndRef.current) return;
|
|
934
|
+
messagesEndRef.current.scrollIntoView({
|
|
935
|
+
behavior: "smooth",
|
|
936
|
+
block: "nearest"
|
|
937
|
+
});
|
|
938
|
+
}, [messages.length]);
|
|
939
|
+
const handleSend = React5.useCallback(
|
|
940
|
+
(text) => {
|
|
941
|
+
onSendMessage == null ? void 0 : onSendMessage(text);
|
|
942
|
+
setInputValue("");
|
|
943
|
+
},
|
|
944
|
+
[onSendMessage]
|
|
945
|
+
);
|
|
946
|
+
const handleQuestionSelect = React5.useCallback(
|
|
947
|
+
(question) => {
|
|
948
|
+
onSendMessage == null ? void 0 : onSendMessage(question);
|
|
949
|
+
},
|
|
950
|
+
[onSendMessage]
|
|
951
|
+
);
|
|
952
|
+
const hasRecents = !!(recentConversations == null ? void 0 : recentConversations.length);
|
|
953
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Sheet, { open, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
954
|
+
SheetContent,
|
|
955
|
+
{
|
|
956
|
+
side: "right",
|
|
957
|
+
showCloseButton: false,
|
|
958
|
+
className: cn(
|
|
959
|
+
"flex w-[400px] max-w-full flex-col gap-0 p-0",
|
|
960
|
+
className
|
|
961
|
+
),
|
|
962
|
+
"data-slot": "support-agent-panel",
|
|
963
|
+
children: [
|
|
964
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "shrink-0 border-b border-border px-3 py-2.5", children: [
|
|
965
|
+
isChatMode ? (
|
|
966
|
+
/* Chat mode: [←] Conversation title [✕] */
|
|
967
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
968
|
+
onBack && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
969
|
+
Button,
|
|
970
|
+
{
|
|
971
|
+
variant: "ghost",
|
|
972
|
+
size: "icon",
|
|
973
|
+
className: "size-7 shrink-0",
|
|
974
|
+
onClick: onBack,
|
|
975
|
+
title: "Back to conversations",
|
|
976
|
+
children: [
|
|
977
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.ChevronLeft, { className: "size-3.5" }),
|
|
978
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "sr-only", children: "Back" })
|
|
979
|
+
]
|
|
980
|
+
}
|
|
981
|
+
),
|
|
982
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex-1 truncate px-1 text-sm font-medium text-foreground", children: conversationTitle }),
|
|
983
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
984
|
+
Button,
|
|
985
|
+
{
|
|
986
|
+
variant: "ghost",
|
|
987
|
+
size: "icon",
|
|
988
|
+
className: "size-7 shrink-0",
|
|
989
|
+
onClick: onClose,
|
|
990
|
+
title: "Close",
|
|
991
|
+
children: [
|
|
992
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.X, { className: "size-3.5" }),
|
|
993
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "sr-only", children: "Close" })
|
|
994
|
+
]
|
|
995
|
+
}
|
|
996
|
+
)
|
|
997
|
+
] })
|
|
998
|
+
) : (
|
|
999
|
+
/* Home mode: [Bot icon] Support Assistant [✕] */
|
|
1000
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between", children: [
|
|
1001
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2.5", children: [
|
|
1002
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex size-7 shrink-0 items-center justify-center rounded-full border border-primary/40 bg-primary/10", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1003
|
+
import_lucide_react7.Bot,
|
|
1004
|
+
{
|
|
1005
|
+
className: "size-3.5 text-foreground",
|
|
1006
|
+
"aria-hidden": "true"
|
|
1007
|
+
}
|
|
1008
|
+
) }),
|
|
1009
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm font-semibold text-foreground", children: "Support Assistant" })
|
|
1010
|
+
] }),
|
|
1011
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
1012
|
+
Button,
|
|
1013
|
+
{
|
|
1014
|
+
variant: "ghost",
|
|
1015
|
+
size: "icon",
|
|
1016
|
+
className: "size-7",
|
|
1017
|
+
onClick: onClose,
|
|
1018
|
+
title: "Close",
|
|
1019
|
+
children: [
|
|
1020
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.X, { className: "size-3.5" }),
|
|
1021
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "sr-only", children: "Close" })
|
|
1022
|
+
]
|
|
1023
|
+
}
|
|
1024
|
+
)
|
|
1025
|
+
] })
|
|
1026
|
+
),
|
|
1027
|
+
context && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SupportContextChip, { context }) })
|
|
1028
|
+
] }),
|
|
1029
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-1 flex-col overflow-y-auto", children: isLoading ? (
|
|
1030
|
+
/* Loading state */
|
|
1031
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-1 items-center justify-center py-20", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
|
|
1032
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Spinner, { size: "lg", className: "text-muted-foreground" }),
|
|
1033
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm text-muted-foreground", children: "Loading\u2026" })
|
|
1034
|
+
] }) })
|
|
1035
|
+
) : !hasMessages ? (
|
|
1036
|
+
/* Home state — Rovo pattern: New Chat CTA + Recents + Suggested */
|
|
1037
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-5 p-4", children: [
|
|
1038
|
+
onNewChat && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
1039
|
+
Button,
|
|
1040
|
+
{
|
|
1041
|
+
variant: "outline",
|
|
1042
|
+
className: "w-full justify-start gap-2 text-sm font-medium",
|
|
1043
|
+
onClick: onNewChat,
|
|
1044
|
+
disabled: isLoading,
|
|
1045
|
+
children: [
|
|
1046
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.SquarePen, { className: "size-3.5", "aria-hidden": "true" }),
|
|
1047
|
+
"New chat"
|
|
1048
|
+
]
|
|
1049
|
+
}
|
|
1050
|
+
),
|
|
1051
|
+
hasRecents && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-1", children: [
|
|
1052
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Recents" }),
|
|
1053
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col", children: recentConversations.map((conv) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
1054
|
+
"button",
|
|
1055
|
+
{
|
|
1056
|
+
type: "button",
|
|
1057
|
+
onClick: () => onOpenConversation == null ? void 0 : onOpenConversation(conv.id),
|
|
1058
|
+
className: "flex w-full items-center justify-between gap-2 px-1 py-2.5 text-left text-sm text-foreground hover:bg-muted/50",
|
|
1059
|
+
children: [
|
|
1060
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex-1 truncate", children: conv.title }),
|
|
1061
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1062
|
+
import_lucide_react7.ChevronRight,
|
|
1063
|
+
{
|
|
1064
|
+
className: "size-3.5 shrink-0 text-muted-foreground",
|
|
1065
|
+
"aria-hidden": "true"
|
|
1066
|
+
}
|
|
1067
|
+
)
|
|
1068
|
+
]
|
|
1069
|
+
},
|
|
1070
|
+
conv.id
|
|
1071
|
+
)) }),
|
|
1072
|
+
onViewAllConversations && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
1073
|
+
Button,
|
|
1074
|
+
{
|
|
1075
|
+
variant: "ghost",
|
|
1076
|
+
size: "sm",
|
|
1077
|
+
onClick: onViewAllConversations,
|
|
1078
|
+
className: "h-auto w-fit gap-0.5 px-1 py-1 text-xs text-muted-foreground hover:bg-transparent hover:text-foreground",
|
|
1079
|
+
children: [
|
|
1080
|
+
"View all conversations",
|
|
1081
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.ChevronRight, { className: "size-3.5", "aria-hidden": "true" })
|
|
1082
|
+
]
|
|
1083
|
+
}
|
|
1084
|
+
)
|
|
1085
|
+
] }),
|
|
1086
|
+
suggestedQuestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
|
|
1087
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Suggested" }),
|
|
1088
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col gap-1.5", children: suggestedQuestions.map((q) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1089
|
+
SupportSuggestedQuestion,
|
|
1090
|
+
{
|
|
1091
|
+
question: q,
|
|
1092
|
+
onSelect: handleQuestionSelect
|
|
1093
|
+
},
|
|
1094
|
+
q
|
|
1095
|
+
)) })
|
|
1096
|
+
] }),
|
|
1097
|
+
!onNewChat && !hasRecents && !suggestedQuestions.length && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm text-muted-foreground", children: "How can I help you today?" })
|
|
1098
|
+
] })
|
|
1099
|
+
) : (
|
|
1100
|
+
/* Chat thread */
|
|
1101
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-3 p-4", children: [
|
|
1102
|
+
messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessageBubble, { message: msg }, msg.id)),
|
|
1103
|
+
isStreaming && ((_a = messages[messages.length - 1]) == null ? void 0 : _a.role) === "user" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-muted px-3 py-2 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SupportTypingIndicator, {}) }) }),
|
|
1104
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: messagesEndRef, "aria-hidden": "true" })
|
|
1105
|
+
] })
|
|
1106
|
+
) }),
|
|
1107
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "shrink-0 border-t border-border p-3", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1108
|
+
ChatInputArea,
|
|
1109
|
+
{
|
|
1110
|
+
value: inputValue,
|
|
1111
|
+
onChange: setInputValue,
|
|
1112
|
+
onSend: handleSend,
|
|
1113
|
+
onAttachFile,
|
|
1114
|
+
onAttachImage,
|
|
1115
|
+
disabled: isLoading || isStreaming,
|
|
1116
|
+
placeholder: "Ask anything\u2026"
|
|
1117
|
+
}
|
|
1118
|
+
) })
|
|
1119
|
+
]
|
|
1120
|
+
}
|
|
1121
|
+
) });
|
|
1122
|
+
}
|
|
1123
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
1124
|
+
0 && (module.exports = {
|
|
1125
|
+
SupportAgentFAB,
|
|
1126
|
+
SupportAgentPanel,
|
|
1127
|
+
SupportArticleCard,
|
|
1128
|
+
SupportContextChip,
|
|
1129
|
+
SupportStepGuideCard,
|
|
1130
|
+
SupportSuggestedQuestion
|
|
1131
|
+
});
|