@afncdelacru/brady-chat 0.1.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/dist/index.d.mts +82 -0
- package/dist/index.d.ts +82 -0
- package/dist/index.js +1405 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +1374 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +34 -0
- package/src/index.ts +4 -0
- package/src/lib/BradyChatContext.tsx +203 -0
- package/src/lib/EnhancedBradyChat.tsx +590 -0
- package/src/lib/ImageWithFallback.tsx +28 -0
- package/src/lib/InfoRequestForm.tsx +115 -0
- package/src/lib/LeadershipCallForm.tsx +161 -0
- package/src/lib/ModePromptTree.tsx +277 -0
- package/src/lib/PersonalizedOverviewForm.tsx +132 -0
- package/src/lib/QuickSuggestions.tsx +33 -0
- package/src/lib/api/afnBradyApi.ts +48 -0
- package/src/lib/api/bradyHealth.ts +13 -0
- package/tsconfig.json +17 -0
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,1374 @@
|
|
|
1
|
+
// src/lib/BradyChatContext.tsx
|
|
2
|
+
import { createContext, useContext, useState } from "react";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
var BradyChatContext = createContext(void 0);
|
|
5
|
+
var initialMessages = [
|
|
6
|
+
{
|
|
7
|
+
type: "brady",
|
|
8
|
+
text: "Hi \u2014 I'm Brady \u{1F44B}\n\nI can help answer questions about AFN, run scenarios, or walk you through what working here looks like.\n\nWhat would you like to explore?"
|
|
9
|
+
}
|
|
10
|
+
];
|
|
11
|
+
function BradyChatProvider({ children }) {
|
|
12
|
+
const [workflowType, setWorkflowType] = useState("free");
|
|
13
|
+
const [messages, setMessages] = useState(initialMessages);
|
|
14
|
+
const [activeMode, setActiveMode] = useState("none");
|
|
15
|
+
const [modeStep, setModeStep] = useState("initial");
|
|
16
|
+
const [modeData, setModeData] = useState({});
|
|
17
|
+
const [calculatorOpen, setCalculatorOpen] = useState(false);
|
|
18
|
+
const [isHidden, setIsHidden] = useState(true);
|
|
19
|
+
const [wasBradyVisibleBeforeModal, setWasBradyVisibleBeforeModal] = useState(false);
|
|
20
|
+
const hideBradyForModal = () => {
|
|
21
|
+
setWasBradyVisibleBeforeModal(!isHidden);
|
|
22
|
+
setIsHidden(true);
|
|
23
|
+
};
|
|
24
|
+
const restoreBradyAfterModal = () => {
|
|
25
|
+
if (wasBradyVisibleBeforeModal) setIsHidden(false);
|
|
26
|
+
};
|
|
27
|
+
const startWorkflow = (workflow) => {
|
|
28
|
+
setWorkflowType(workflow);
|
|
29
|
+
if (workflow === "info-request") {
|
|
30
|
+
setMessages([
|
|
31
|
+
{
|
|
32
|
+
type: "brady",
|
|
33
|
+
text: "Happy to send you a personalized overview.\n\nIf you share your contact details below, we'll email you more information about AFN and how it could fit your goals."
|
|
34
|
+
}
|
|
35
|
+
]);
|
|
36
|
+
} else if (workflow === "leadership-call") {
|
|
37
|
+
setMessages([
|
|
38
|
+
{
|
|
39
|
+
type: "brady",
|
|
40
|
+
text: "Happy to connect you with AFN leadership.\n\nShare your details below and we'll have someone reach out shortly.\nIf you'd like, you can also suggest a good time to talk."
|
|
41
|
+
}
|
|
42
|
+
]);
|
|
43
|
+
} else if (workflow === "personalized-overview-request") {
|
|
44
|
+
setMessages([
|
|
45
|
+
{
|
|
46
|
+
type: "brady",
|
|
47
|
+
text: "I'll help you get a personalized dashboard and earnings calculator.\n\nShare your details below and we'll create a custom overview showing exactly what your business could look like at AFN."
|
|
48
|
+
}
|
|
49
|
+
]);
|
|
50
|
+
} else {
|
|
51
|
+
setMessages(initialMessages);
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
const addMessage = (message) => {
|
|
55
|
+
setMessages((prev) => [...prev, message]);
|
|
56
|
+
};
|
|
57
|
+
const setWorkflow = (workflow) => {
|
|
58
|
+
setWorkflowType(workflow);
|
|
59
|
+
};
|
|
60
|
+
const resetChat = () => {
|
|
61
|
+
setWorkflowType("free");
|
|
62
|
+
setMessages(initialMessages);
|
|
63
|
+
resetMode();
|
|
64
|
+
};
|
|
65
|
+
const activateMode = (mode) => {
|
|
66
|
+
setActiveMode(mode);
|
|
67
|
+
setModeStep("initial");
|
|
68
|
+
setModeData({});
|
|
69
|
+
if (mode === "earnings") {
|
|
70
|
+
setMessages([
|
|
71
|
+
{
|
|
72
|
+
type: "brady",
|
|
73
|
+
text: "Earnings Mode is on.\n\nI'll focus on how volume, efficiency, and time savings can impact your income."
|
|
74
|
+
}
|
|
75
|
+
]);
|
|
76
|
+
setModeStep("volume");
|
|
77
|
+
} else if (mode === "profit") {
|
|
78
|
+
setMessages([
|
|
79
|
+
{
|
|
80
|
+
type: "brady",
|
|
81
|
+
text: "Profit Mode is on.\n\nI'll focus on branch economics\u2014volume, margin, expenses, and profitability."
|
|
82
|
+
}
|
|
83
|
+
]);
|
|
84
|
+
setModeStep("volume");
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
const updateModeData = (data) => {
|
|
88
|
+
setModeData((prev) => ({ ...prev, ...data }));
|
|
89
|
+
};
|
|
90
|
+
const resetMode = () => {
|
|
91
|
+
setActiveMode("none");
|
|
92
|
+
setModeStep("initial");
|
|
93
|
+
setModeData({});
|
|
94
|
+
setCalculatorOpen(false);
|
|
95
|
+
};
|
|
96
|
+
return /* @__PURE__ */ jsx(
|
|
97
|
+
BradyChatContext.Provider,
|
|
98
|
+
{
|
|
99
|
+
value: {
|
|
100
|
+
workflowType,
|
|
101
|
+
messages,
|
|
102
|
+
startWorkflow,
|
|
103
|
+
addMessage,
|
|
104
|
+
setWorkflow,
|
|
105
|
+
resetChat,
|
|
106
|
+
activeMode,
|
|
107
|
+
modeStep,
|
|
108
|
+
modeData,
|
|
109
|
+
activateMode,
|
|
110
|
+
setModeStep,
|
|
111
|
+
updateModeData,
|
|
112
|
+
resetMode,
|
|
113
|
+
calculatorOpen,
|
|
114
|
+
setCalculatorOpen,
|
|
115
|
+
isHidden,
|
|
116
|
+
setIsHidden,
|
|
117
|
+
hideBradyForModal,
|
|
118
|
+
restoreBradyAfterModal
|
|
119
|
+
},
|
|
120
|
+
children
|
|
121
|
+
}
|
|
122
|
+
);
|
|
123
|
+
}
|
|
124
|
+
function useBradyChat() {
|
|
125
|
+
const context = useContext(BradyChatContext);
|
|
126
|
+
if (context === void 0) {
|
|
127
|
+
throw new Error("useBradyChat must be used within a BradyChatProvider");
|
|
128
|
+
}
|
|
129
|
+
return context;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// src/lib/EnhancedBradyChat.tsx
|
|
133
|
+
import { useState as useState6, useRef, useEffect } from "react";
|
|
134
|
+
import { motion as motion6, AnimatePresence } from "motion/react";
|
|
135
|
+
import { Send, Mic } from "lucide-react";
|
|
136
|
+
|
|
137
|
+
// src/lib/api/bradyHealth.ts
|
|
138
|
+
async function checkBradyHealth() {
|
|
139
|
+
try {
|
|
140
|
+
const res = await fetch("https://afn-bradyjr-api-dev.azurewebsites.net/api/Health");
|
|
141
|
+
if (!res.ok) return false;
|
|
142
|
+
return true;
|
|
143
|
+
} catch {
|
|
144
|
+
return false;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
// src/lib/api/afnBradyApi.ts
|
|
149
|
+
var API_URL = "https://afn-bradyjr-api-dev.azurewebsites.net/api/chat/prompt";
|
|
150
|
+
var DEFAULT_BRADY_API_KEY = "za2345DDDzXycXKHJvVj80TIsPgooB7iNbwcS9KLzoeaOljlXmJQQJ99BJAC4f1cMXJ3w3AAAAACOGQzXz";
|
|
151
|
+
async function sendBradyPrompt(messages, apiKey = DEFAULT_BRADY_API_KEY) {
|
|
152
|
+
const res = await fetch(API_URL, {
|
|
153
|
+
method: "POST",
|
|
154
|
+
headers: {
|
|
155
|
+
"Content-Type": "application/json",
|
|
156
|
+
"X-API-KEY": apiKey
|
|
157
|
+
},
|
|
158
|
+
body: JSON.stringify({ messages })
|
|
159
|
+
});
|
|
160
|
+
if (!res.ok) throw new Error("Brady API error: " + res.status);
|
|
161
|
+
const data = await res.json();
|
|
162
|
+
if (process.env.NODE_ENV === "development") {
|
|
163
|
+
console.log("[Brady API Response]", data);
|
|
164
|
+
}
|
|
165
|
+
return data;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
// src/lib/InfoRequestForm.tsx
|
|
169
|
+
import { useState as useState2 } from "react";
|
|
170
|
+
import { motion } from "motion/react";
|
|
171
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
172
|
+
function InfoRequestForm({ onSubmit, onCancel }) {
|
|
173
|
+
const [formData, setFormData] = useState2({
|
|
174
|
+
firstName: "",
|
|
175
|
+
lastName: "",
|
|
176
|
+
email: "",
|
|
177
|
+
phone: ""
|
|
178
|
+
});
|
|
179
|
+
const [errors, setErrors] = useState2({});
|
|
180
|
+
const handleSubmit = (e) => {
|
|
181
|
+
e.preventDefault();
|
|
182
|
+
const newErrors = {};
|
|
183
|
+
if (!formData.firstName.trim()) {
|
|
184
|
+
newErrors.firstName = "First name is required";
|
|
185
|
+
}
|
|
186
|
+
if (!formData.lastName.trim()) {
|
|
187
|
+
newErrors.lastName = "Last name is required";
|
|
188
|
+
}
|
|
189
|
+
if (!formData.email.trim()) {
|
|
190
|
+
newErrors.email = "Email is required";
|
|
191
|
+
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
|
|
192
|
+
newErrors.email = "Please enter a valid email address";
|
|
193
|
+
}
|
|
194
|
+
if (Object.keys(newErrors).length > 0) {
|
|
195
|
+
setErrors(newErrors);
|
|
196
|
+
return;
|
|
197
|
+
}
|
|
198
|
+
onSubmit(formData);
|
|
199
|
+
};
|
|
200
|
+
return /* @__PURE__ */ jsxs(
|
|
201
|
+
motion.div,
|
|
202
|
+
{
|
|
203
|
+
initial: { opacity: 0, y: 10 },
|
|
204
|
+
animate: { opacity: 1, y: 0 },
|
|
205
|
+
className: "bg-gradient-to-br from-white to-zinc-50 dark:from-zinc-800 dark:to-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-2xl p-6 max-h-[360px]",
|
|
206
|
+
children: [
|
|
207
|
+
/* @__PURE__ */ jsx2("h3", { className: "text-lg text-zinc-900 dark:text-white mb-4", children: "Send Me More Information" }),
|
|
208
|
+
/* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-3", children: [
|
|
209
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
210
|
+
/* @__PURE__ */ jsx2(
|
|
211
|
+
"input",
|
|
212
|
+
{
|
|
213
|
+
type: "text",
|
|
214
|
+
placeholder: "First Name",
|
|
215
|
+
value: formData.firstName,
|
|
216
|
+
onChange: (e) => setFormData({ ...formData, firstName: e.target.value }),
|
|
217
|
+
className: "w-full px-4 py-2.5 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white placeholder-zinc-500 focus:border-[#8B5CF6] focus:outline-none transition-colors"
|
|
218
|
+
}
|
|
219
|
+
),
|
|
220
|
+
errors.firstName && /* @__PURE__ */ jsx2("p", { className: "text-red-500 text-xs mt-1", children: errors.firstName })
|
|
221
|
+
] }),
|
|
222
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
223
|
+
/* @__PURE__ */ jsx2(
|
|
224
|
+
"input",
|
|
225
|
+
{
|
|
226
|
+
type: "text",
|
|
227
|
+
placeholder: "Last Name",
|
|
228
|
+
value: formData.lastName,
|
|
229
|
+
onChange: (e) => setFormData({ ...formData, lastName: e.target.value }),
|
|
230
|
+
className: "w-full px-4 py-2.5 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white placeholder-zinc-500 focus:border-[#8B5CF6] focus:outline-none transition-colors"
|
|
231
|
+
}
|
|
232
|
+
),
|
|
233
|
+
errors.lastName && /* @__PURE__ */ jsx2("p", { className: "text-red-500 text-xs mt-1", children: errors.lastName })
|
|
234
|
+
] }),
|
|
235
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
236
|
+
/* @__PURE__ */ jsx2(
|
|
237
|
+
"input",
|
|
238
|
+
{
|
|
239
|
+
type: "email",
|
|
240
|
+
placeholder: "Email Address",
|
|
241
|
+
value: formData.email,
|
|
242
|
+
onChange: (e) => setFormData({ ...formData, email: e.target.value }),
|
|
243
|
+
className: "w-full px-4 py-2.5 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white placeholder-zinc-500 focus:border-[#8B5CF6] focus:outline-none transition-colors"
|
|
244
|
+
}
|
|
245
|
+
),
|
|
246
|
+
errors.email && /* @__PURE__ */ jsx2("p", { className: "text-red-500 text-xs mt-1", children: errors.email })
|
|
247
|
+
] }),
|
|
248
|
+
/* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2(
|
|
249
|
+
"input",
|
|
250
|
+
{
|
|
251
|
+
type: "tel",
|
|
252
|
+
placeholder: "Phone (optional)",
|
|
253
|
+
value: formData.phone,
|
|
254
|
+
onChange: (e) => setFormData({ ...formData, phone: e.target.value }),
|
|
255
|
+
className: "w-full px-4 py-2.5 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white placeholder-zinc-500 focus:border-[#8B5CF6] focus:outline-none transition-colors"
|
|
256
|
+
}
|
|
257
|
+
) }),
|
|
258
|
+
/* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-2", children: [
|
|
259
|
+
/* @__PURE__ */ jsx2(
|
|
260
|
+
"button",
|
|
261
|
+
{
|
|
262
|
+
type: "submit",
|
|
263
|
+
className: "flex-1 bg-[#8B5CF6] hover:bg-[#7C3AED] text-white py-2.5 rounded-lg transition-colors",
|
|
264
|
+
children: "Send Information"
|
|
265
|
+
}
|
|
266
|
+
),
|
|
267
|
+
/* @__PURE__ */ jsx2(
|
|
268
|
+
"button",
|
|
269
|
+
{
|
|
270
|
+
type: "button",
|
|
271
|
+
onClick: onCancel,
|
|
272
|
+
className: "px-4 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors",
|
|
273
|
+
children: "Cancel"
|
|
274
|
+
}
|
|
275
|
+
)
|
|
276
|
+
] })
|
|
277
|
+
] })
|
|
278
|
+
]
|
|
279
|
+
}
|
|
280
|
+
);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
// src/lib/LeadershipCallForm.tsx
|
|
284
|
+
import { useState as useState3 } from "react";
|
|
285
|
+
import { motion as motion2 } from "motion/react";
|
|
286
|
+
import { Calendar, Clock } from "lucide-react";
|
|
287
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
288
|
+
function LeadershipCallForm({ onSubmit, onCancel }) {
|
|
289
|
+
const [formData, setFormData] = useState3({
|
|
290
|
+
firstName: "",
|
|
291
|
+
lastName: "",
|
|
292
|
+
email: "",
|
|
293
|
+
phone: "",
|
|
294
|
+
preferredDate: "",
|
|
295
|
+
preferredTime: ""
|
|
296
|
+
});
|
|
297
|
+
const [errors, setErrors] = useState3({});
|
|
298
|
+
const handleSubmit = (e) => {
|
|
299
|
+
e.preventDefault();
|
|
300
|
+
const newErrors = {};
|
|
301
|
+
if (!formData.firstName.trim()) {
|
|
302
|
+
newErrors.firstName = "First name is required";
|
|
303
|
+
}
|
|
304
|
+
if (!formData.lastName.trim()) {
|
|
305
|
+
newErrors.lastName = "Last name is required";
|
|
306
|
+
}
|
|
307
|
+
if (!formData.email.trim()) {
|
|
308
|
+
newErrors.email = "Email is required";
|
|
309
|
+
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
|
|
310
|
+
newErrors.email = "Please enter a valid email address";
|
|
311
|
+
}
|
|
312
|
+
if (!formData.phone.trim()) {
|
|
313
|
+
newErrors.phone = "Phone number is required";
|
|
314
|
+
}
|
|
315
|
+
if (Object.keys(newErrors).length > 0) {
|
|
316
|
+
setErrors(newErrors);
|
|
317
|
+
return;
|
|
318
|
+
}
|
|
319
|
+
onSubmit(formData);
|
|
320
|
+
};
|
|
321
|
+
const timeSlots = ["Morning (8am - 12pm)", "Afternoon (12pm - 5pm)", "Evening (5pm - 8pm)"];
|
|
322
|
+
return /* @__PURE__ */ jsxs2(
|
|
323
|
+
motion2.div,
|
|
324
|
+
{
|
|
325
|
+
initial: { opacity: 0, y: 10 },
|
|
326
|
+
animate: { opacity: 1, y: 0 },
|
|
327
|
+
className: "bg-gradient-to-br from-white to-zinc-50 dark:from-zinc-800 dark:to-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-2xl p-6",
|
|
328
|
+
children: [
|
|
329
|
+
/* @__PURE__ */ jsx3("h3", { className: "text-lg text-zinc-900 dark:text-white mb-4", children: "Talk to AFN Leadership" }),
|
|
330
|
+
/* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className: "space-y-3", children: [
|
|
331
|
+
/* @__PURE__ */ jsxs2("div", { children: [
|
|
332
|
+
/* @__PURE__ */ jsx3(
|
|
333
|
+
"input",
|
|
334
|
+
{
|
|
335
|
+
type: "text",
|
|
336
|
+
placeholder: "First Name",
|
|
337
|
+
value: formData.firstName,
|
|
338
|
+
onChange: (e) => setFormData({ ...formData, firstName: e.target.value }),
|
|
339
|
+
className: "w-full px-4 py-2.5 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white placeholder-zinc-500 focus:border-[#8B5CF6] focus:outline-none transition-colors"
|
|
340
|
+
}
|
|
341
|
+
),
|
|
342
|
+
errors.firstName && /* @__PURE__ */ jsx3("p", { className: "text-red-500 text-xs mt-1", children: errors.firstName })
|
|
343
|
+
] }),
|
|
344
|
+
/* @__PURE__ */ jsxs2("div", { children: [
|
|
345
|
+
/* @__PURE__ */ jsx3(
|
|
346
|
+
"input",
|
|
347
|
+
{
|
|
348
|
+
type: "text",
|
|
349
|
+
placeholder: "Last Name",
|
|
350
|
+
value: formData.lastName,
|
|
351
|
+
onChange: (e) => setFormData({ ...formData, lastName: e.target.value }),
|
|
352
|
+
className: "w-full px-4 py-2.5 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white placeholder-zinc-500 focus:border-[#8B5CF6] focus:outline-none transition-colors"
|
|
353
|
+
}
|
|
354
|
+
),
|
|
355
|
+
errors.lastName && /* @__PURE__ */ jsx3("p", { className: "text-red-500 text-xs mt-1", children: errors.lastName })
|
|
356
|
+
] }),
|
|
357
|
+
/* @__PURE__ */ jsxs2("div", { children: [
|
|
358
|
+
/* @__PURE__ */ jsx3(
|
|
359
|
+
"input",
|
|
360
|
+
{
|
|
361
|
+
type: "email",
|
|
362
|
+
placeholder: "Email Address",
|
|
363
|
+
value: formData.email,
|
|
364
|
+
onChange: (e) => setFormData({ ...formData, email: e.target.value }),
|
|
365
|
+
className: "w-full px-4 py-2.5 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white placeholder-zinc-500 focus:border-[#8B5CF6] focus:outline-none transition-colors"
|
|
366
|
+
}
|
|
367
|
+
),
|
|
368
|
+
errors.email && /* @__PURE__ */ jsx3("p", { className: "text-red-500 text-xs mt-1", children: errors.email })
|
|
369
|
+
] }),
|
|
370
|
+
/* @__PURE__ */ jsxs2("div", { children: [
|
|
371
|
+
/* @__PURE__ */ jsx3(
|
|
372
|
+
"input",
|
|
373
|
+
{
|
|
374
|
+
type: "tel",
|
|
375
|
+
placeholder: "Phone Number",
|
|
376
|
+
value: formData.phone,
|
|
377
|
+
onChange: (e) => setFormData({ ...formData, phone: e.target.value }),
|
|
378
|
+
className: "w-full px-4 py-2.5 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white placeholder-zinc-500 focus:border-[#8B5CF6] focus:outline-none transition-colors"
|
|
379
|
+
}
|
|
380
|
+
),
|
|
381
|
+
errors.phone && /* @__PURE__ */ jsx3("p", { className: "text-red-500 text-xs mt-1", children: errors.phone })
|
|
382
|
+
] }),
|
|
383
|
+
/* @__PURE__ */ jsxs2("div", { className: "pt-2 border-t border-zinc-200 dark:border-zinc-700", children: [
|
|
384
|
+
/* @__PURE__ */ jsx3("p", { className: "text-sm text-zinc-600 dark:text-zinc-400 mb-2", children: "Preferred Call Time (optional)" }),
|
|
385
|
+
/* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-2 gap-2", children: [
|
|
386
|
+
/* @__PURE__ */ jsxs2("div", { className: "relative", children: [
|
|
387
|
+
/* @__PURE__ */ jsx3(Calendar, { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500" }),
|
|
388
|
+
/* @__PURE__ */ jsx3(
|
|
389
|
+
"input",
|
|
390
|
+
{
|
|
391
|
+
type: "date",
|
|
392
|
+
value: formData.preferredDate,
|
|
393
|
+
onChange: (e) => setFormData({ ...formData, preferredDate: e.target.value }),
|
|
394
|
+
className: "w-full pl-12 pr-4 py-2.5 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm focus:border-[#8B5CF6] focus:outline-none transition-colors"
|
|
395
|
+
}
|
|
396
|
+
)
|
|
397
|
+
] }),
|
|
398
|
+
/* @__PURE__ */ jsxs2("div", { className: "relative", children: [
|
|
399
|
+
/* @__PURE__ */ jsx3(Clock, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500" }),
|
|
400
|
+
/* @__PURE__ */ jsxs2(
|
|
401
|
+
"select",
|
|
402
|
+
{
|
|
403
|
+
value: formData.preferredTime,
|
|
404
|
+
onChange: (e) => setFormData({ ...formData, preferredTime: e.target.value }),
|
|
405
|
+
className: "w-full pl-10 pr-4 py-2.5 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm focus:border-[#8B5CF6] focus:outline-none transition-colors appearance-none",
|
|
406
|
+
children: [
|
|
407
|
+
/* @__PURE__ */ jsx3("option", { value: "", children: "Select time" }),
|
|
408
|
+
timeSlots.map((slot) => /* @__PURE__ */ jsx3("option", { value: slot, children: slot }, slot))
|
|
409
|
+
]
|
|
410
|
+
}
|
|
411
|
+
)
|
|
412
|
+
] })
|
|
413
|
+
] })
|
|
414
|
+
] }),
|
|
415
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex gap-2 pt-2", children: [
|
|
416
|
+
/* @__PURE__ */ jsx3(
|
|
417
|
+
"button",
|
|
418
|
+
{
|
|
419
|
+
type: "submit",
|
|
420
|
+
className: "flex-1 bg-[#8B5CF6] hover:bg-[#7C3AED] text-white py-2.5 rounded-lg transition-colors",
|
|
421
|
+
children: "Request Call"
|
|
422
|
+
}
|
|
423
|
+
),
|
|
424
|
+
/* @__PURE__ */ jsx3(
|
|
425
|
+
"button",
|
|
426
|
+
{
|
|
427
|
+
type: "button",
|
|
428
|
+
onClick: onCancel,
|
|
429
|
+
className: "px-4 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors",
|
|
430
|
+
children: "Cancel"
|
|
431
|
+
}
|
|
432
|
+
)
|
|
433
|
+
] })
|
|
434
|
+
] })
|
|
435
|
+
]
|
|
436
|
+
}
|
|
437
|
+
);
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
// src/lib/PersonalizedOverviewForm.tsx
|
|
441
|
+
import { useState as useState4 } from "react";
|
|
442
|
+
import { motion as motion3 } from "motion/react";
|
|
443
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
444
|
+
function PersonalizedOverviewForm({ onSubmit, onCancel }) {
|
|
445
|
+
const [formData, setFormData] = useState4({
|
|
446
|
+
firstName: "",
|
|
447
|
+
lastName: "",
|
|
448
|
+
email: "",
|
|
449
|
+
phone: "",
|
|
450
|
+
nmlsId: ""
|
|
451
|
+
});
|
|
452
|
+
const [errors, setErrors] = useState4({});
|
|
453
|
+
const handleSubmit = (e) => {
|
|
454
|
+
e.preventDefault();
|
|
455
|
+
const newErrors = {};
|
|
456
|
+
if (!formData.firstName.trim()) {
|
|
457
|
+
newErrors.firstName = "First name is required";
|
|
458
|
+
}
|
|
459
|
+
if (!formData.lastName.trim()) {
|
|
460
|
+
newErrors.lastName = "Last name is required";
|
|
461
|
+
}
|
|
462
|
+
if (!formData.email.trim()) {
|
|
463
|
+
newErrors.email = "Email is required";
|
|
464
|
+
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
|
|
465
|
+
newErrors.email = "Please enter a valid email address";
|
|
466
|
+
}
|
|
467
|
+
if (Object.keys(newErrors).length > 0) {
|
|
468
|
+
setErrors(newErrors);
|
|
469
|
+
return;
|
|
470
|
+
}
|
|
471
|
+
onSubmit(formData);
|
|
472
|
+
};
|
|
473
|
+
return /* @__PURE__ */ jsxs3(
|
|
474
|
+
motion3.div,
|
|
475
|
+
{
|
|
476
|
+
initial: { opacity: 0, y: 10 },
|
|
477
|
+
animate: { opacity: 1, y: 0 },
|
|
478
|
+
className: "bg-gradient-to-br from-white to-zinc-50 dark:from-zinc-800 dark:to-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-2xl p-6",
|
|
479
|
+
children: [
|
|
480
|
+
/* @__PURE__ */ jsx4("h3", { className: "text-lg text-zinc-900 dark:text-white mb-4", children: "Request Personalized Overview" }),
|
|
481
|
+
/* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className: "space-y-3", children: [
|
|
482
|
+
/* @__PURE__ */ jsxs3("div", { children: [
|
|
483
|
+
/* @__PURE__ */ jsx4(
|
|
484
|
+
"input",
|
|
485
|
+
{
|
|
486
|
+
type: "text",
|
|
487
|
+
placeholder: "First Name",
|
|
488
|
+
value: formData.firstName,
|
|
489
|
+
onChange: (e) => setFormData({ ...formData, firstName: e.target.value }),
|
|
490
|
+
className: "w-full px-4 py-2.5 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white placeholder-zinc-500 focus:border-[#8B5CF6] focus:outline-none transition-colors"
|
|
491
|
+
}
|
|
492
|
+
),
|
|
493
|
+
errors.firstName && /* @__PURE__ */ jsx4("p", { className: "text-red-500 text-xs mt-1", children: errors.firstName })
|
|
494
|
+
] }),
|
|
495
|
+
/* @__PURE__ */ jsxs3("div", { children: [
|
|
496
|
+
/* @__PURE__ */ jsx4(
|
|
497
|
+
"input",
|
|
498
|
+
{
|
|
499
|
+
type: "text",
|
|
500
|
+
placeholder: "Last Name",
|
|
501
|
+
value: formData.lastName,
|
|
502
|
+
onChange: (e) => setFormData({ ...formData, lastName: e.target.value }),
|
|
503
|
+
className: "w-full px-4 py-2.5 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white placeholder-zinc-500 focus:border-[#8B5CF6] focus:outline-none transition-colors"
|
|
504
|
+
}
|
|
505
|
+
),
|
|
506
|
+
errors.lastName && /* @__PURE__ */ jsx4("p", { className: "text-red-500 text-xs mt-1", children: errors.lastName })
|
|
507
|
+
] }),
|
|
508
|
+
/* @__PURE__ */ jsxs3("div", { children: [
|
|
509
|
+
/* @__PURE__ */ jsx4(
|
|
510
|
+
"input",
|
|
511
|
+
{
|
|
512
|
+
type: "email",
|
|
513
|
+
placeholder: "Email Address",
|
|
514
|
+
value: formData.email,
|
|
515
|
+
onChange: (e) => setFormData({ ...formData, email: e.target.value }),
|
|
516
|
+
className: "w-full px-4 py-2.5 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white placeholder-zinc-500 focus:border-[#8B5CF6] focus:outline-none transition-colors"
|
|
517
|
+
}
|
|
518
|
+
),
|
|
519
|
+
errors.email && /* @__PURE__ */ jsx4("p", { className: "text-red-500 text-xs mt-1", children: errors.email })
|
|
520
|
+
] }),
|
|
521
|
+
/* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(
|
|
522
|
+
"input",
|
|
523
|
+
{
|
|
524
|
+
type: "tel",
|
|
525
|
+
placeholder: "Phone (optional)",
|
|
526
|
+
value: formData.phone,
|
|
527
|
+
onChange: (e) => setFormData({ ...formData, phone: e.target.value }),
|
|
528
|
+
className: "w-full px-4 py-2.5 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white placeholder-zinc-500 focus:border-[#8B5CF6] focus:outline-none transition-colors"
|
|
529
|
+
}
|
|
530
|
+
) }),
|
|
531
|
+
/* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(
|
|
532
|
+
"input",
|
|
533
|
+
{
|
|
534
|
+
type: "text",
|
|
535
|
+
placeholder: "NMLS ID (optional)",
|
|
536
|
+
value: formData.nmlsId,
|
|
537
|
+
onChange: (e) => setFormData({ ...formData, nmlsId: e.target.value }),
|
|
538
|
+
className: "w-full px-4 py-2.5 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white placeholder-zinc-500 focus:border-[#8B5CF6] focus:outline-none transition-colors"
|
|
539
|
+
}
|
|
540
|
+
) }),
|
|
541
|
+
/* @__PURE__ */ jsxs3("div", { className: "flex gap-2 pt-2", children: [
|
|
542
|
+
/* @__PURE__ */ jsx4(
|
|
543
|
+
"button",
|
|
544
|
+
{
|
|
545
|
+
type: "submit",
|
|
546
|
+
className: "flex-1 bg-[#8B5CF6] hover:bg-[#7C3AED] text-white py-2.5 rounded-lg transition-colors",
|
|
547
|
+
children: "Request Overview"
|
|
548
|
+
}
|
|
549
|
+
),
|
|
550
|
+
/* @__PURE__ */ jsx4(
|
|
551
|
+
"button",
|
|
552
|
+
{
|
|
553
|
+
type: "button",
|
|
554
|
+
onClick: onCancel,
|
|
555
|
+
className: "px-4 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors",
|
|
556
|
+
children: "Cancel"
|
|
557
|
+
}
|
|
558
|
+
)
|
|
559
|
+
] })
|
|
560
|
+
] })
|
|
561
|
+
]
|
|
562
|
+
}
|
|
563
|
+
);
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
// src/lib/QuickSuggestions.tsx
|
|
567
|
+
import { motion as motion4 } from "motion/react";
|
|
568
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
569
|
+
function QuickSuggestions({ suggestions }) {
|
|
570
|
+
return /* @__PURE__ */ jsx5(
|
|
571
|
+
motion4.div,
|
|
572
|
+
{
|
|
573
|
+
initial: { opacity: 0, y: 10 },
|
|
574
|
+
animate: { opacity: 1, y: 0 },
|
|
575
|
+
className: "flex flex-wrap gap-2",
|
|
576
|
+
children: suggestions.map((suggestion, idx) => /* @__PURE__ */ jsx5(
|
|
577
|
+
"button",
|
|
578
|
+
{
|
|
579
|
+
onClick: suggestion.action,
|
|
580
|
+
className: "px-3 py-1.5 bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 text-sm rounded-full border border-zinc-300 dark:border-zinc-700 transition-colors",
|
|
581
|
+
children: suggestion.text
|
|
582
|
+
},
|
|
583
|
+
idx
|
|
584
|
+
))
|
|
585
|
+
}
|
|
586
|
+
);
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
// src/lib/ModePromptTree.tsx
|
|
590
|
+
import { motion as motion5 } from "motion/react";
|
|
591
|
+
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
592
|
+
function ModePromptTree({ mode, step, hasPersonalizedData, onResponse }) {
|
|
593
|
+
if (mode === "earnings") {
|
|
594
|
+
if (step === "volume") {
|
|
595
|
+
if (hasPersonalizedData) {
|
|
596
|
+
return /* @__PURE__ */ jsx6(motion5.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, className: "space-y-3", children: /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-1 gap-2", children: [
|
|
597
|
+
/* @__PURE__ */ jsx6(
|
|
598
|
+
"button",
|
|
599
|
+
{
|
|
600
|
+
onClick: () => onResponse("yes", { volumeMultiplier: 1 }),
|
|
601
|
+
className: "px-4 py-3 bg-[#8B5CF6] hover:bg-[#7C3AED] text-white rounded-lg text-sm transition-colors text-left",
|
|
602
|
+
children: "Yes, that's about right"
|
|
603
|
+
}
|
|
604
|
+
),
|
|
605
|
+
/* @__PURE__ */ jsx6(
|
|
606
|
+
"button",
|
|
607
|
+
{
|
|
608
|
+
onClick: () => onResponse("higher", { volumeMultiplier: 1.1 }),
|
|
609
|
+
className: "px-4 py-3 dark:bg-zinc-800 bg-zinc-100 dark:hover:bg-zinc-700 hover:bg-zinc-200 dark:text-white text-zinc-900 rounded-lg text-sm transition-colors text-left",
|
|
610
|
+
children: "It's a bit higher"
|
|
611
|
+
}
|
|
612
|
+
),
|
|
613
|
+
/* @__PURE__ */ jsx6(
|
|
614
|
+
"button",
|
|
615
|
+
{
|
|
616
|
+
onClick: () => onResponse("lower", { volumeMultiplier: 0.9 }),
|
|
617
|
+
className: "px-4 py-3 dark:bg-zinc-800 bg-zinc-100 dark:hover:bg-zinc-700 hover:bg-zinc-200 dark:text-white text-zinc-900 rounded-lg text-sm transition-colors text-left",
|
|
618
|
+
children: "It's a bit lower"
|
|
619
|
+
}
|
|
620
|
+
)
|
|
621
|
+
] }) });
|
|
622
|
+
}
|
|
623
|
+
return /* @__PURE__ */ jsx6(motion5.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, className: "space-y-3", children: /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-1 gap-2", children: [
|
|
624
|
+
/* @__PURE__ */ jsx6(
|
|
625
|
+
"button",
|
|
626
|
+
{
|
|
627
|
+
onClick: () => onResponse("Under $500k", { volume: 4e5 }),
|
|
628
|
+
className: "px-4 py-3 bg-[#8B5CF6] hover:bg-[#7C3AED] text-white rounded-lg text-sm transition-colors text-left",
|
|
629
|
+
children: "Under $500k"
|
|
630
|
+
}
|
|
631
|
+
),
|
|
632
|
+
/* @__PURE__ */ jsx6(
|
|
633
|
+
"button",
|
|
634
|
+
{
|
|
635
|
+
onClick: () => onResponse("$500k \u2013 $1M", { volume: 75e4 }),
|
|
636
|
+
className: "px-4 py-3 dark:bg-zinc-800 bg-zinc-100 dark:hover:bg-zinc-700 hover:bg-zinc-200 dark:text-white text-zinc-900 rounded-lg text-sm transition-colors text-left",
|
|
637
|
+
children: "$500k \u2013 $1M"
|
|
638
|
+
}
|
|
639
|
+
),
|
|
640
|
+
/* @__PURE__ */ jsx6(
|
|
641
|
+
"button",
|
|
642
|
+
{
|
|
643
|
+
onClick: () => onResponse("$1M \u2013 $2M", { volume: 15e5 }),
|
|
644
|
+
className: "px-4 py-3 dark:bg-zinc-800 bg-zinc-100 dark:hover:bg-zinc-700 hover:bg-zinc-200 dark:text-white text-zinc-900 rounded-lg text-sm transition-colors text-left",
|
|
645
|
+
children: "$1M \u2013 $2M"
|
|
646
|
+
}
|
|
647
|
+
),
|
|
648
|
+
/* @__PURE__ */ jsx6(
|
|
649
|
+
"button",
|
|
650
|
+
{
|
|
651
|
+
onClick: () => onResponse("$2M+", { volume: 25e5 }),
|
|
652
|
+
className: "px-4 py-3 dark:bg-zinc-800 bg-zinc-100 dark:hover:bg-zinc-700 hover:bg-zinc-200 dark:text-white text-zinc-900 rounded-lg text-sm transition-colors text-left",
|
|
653
|
+
children: "$2M+"
|
|
654
|
+
}
|
|
655
|
+
)
|
|
656
|
+
] }) });
|
|
657
|
+
}
|
|
658
|
+
if (step === "comp") {
|
|
659
|
+
return /* @__PURE__ */ jsx6(motion5.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, className: "space-y-3", children: /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-1 gap-2", children: [
|
|
660
|
+
/* @__PURE__ */ jsx6(
|
|
661
|
+
"button",
|
|
662
|
+
{
|
|
663
|
+
onClick: () => onResponse("Under 100 bps", { comp: 0.95 }),
|
|
664
|
+
className: "px-4 py-3 bg-[#8B5CF6] hover:bg-[#7C3AED] text-white rounded-lg text-sm transition-colors text-left",
|
|
665
|
+
children: "Under 100 bps"
|
|
666
|
+
}
|
|
667
|
+
),
|
|
668
|
+
/* @__PURE__ */ jsx6(
|
|
669
|
+
"button",
|
|
670
|
+
{
|
|
671
|
+
onClick: () => onResponse("Around 125 bps", { comp: 1.25 }),
|
|
672
|
+
className: "px-4 py-3 dark:bg-zinc-800 bg-zinc-100 dark:hover:bg-zinc-700 hover:bg-zinc-200 dark:text-white text-zinc-900 rounded-lg text-sm transition-colors text-left",
|
|
673
|
+
children: "Around 125 bps"
|
|
674
|
+
}
|
|
675
|
+
),
|
|
676
|
+
/* @__PURE__ */ jsx6(
|
|
677
|
+
"button",
|
|
678
|
+
{
|
|
679
|
+
onClick: () => onResponse("150+ bps", { comp: 1.5 }),
|
|
680
|
+
className: "px-4 py-3 dark:bg-zinc-800 bg-zinc-100 dark:hover:bg-zinc-700 hover:bg-zinc-200 dark:text-white text-zinc-900 rounded-lg text-sm transition-colors text-left",
|
|
681
|
+
children: "150+ bps"
|
|
682
|
+
}
|
|
683
|
+
),
|
|
684
|
+
/* @__PURE__ */ jsx6(
|
|
685
|
+
"button",
|
|
686
|
+
{
|
|
687
|
+
onClick: () => onResponse("I'm not sure", { comp: 1.15 }),
|
|
688
|
+
className: "px-4 py-3 dark:bg-zinc-800 bg-zinc-100 dark:hover:bg-zinc-700 hover:bg-zinc-200 dark:text-white text-zinc-900 rounded-lg text-sm transition-colors text-left",
|
|
689
|
+
children: "I'm not sure"
|
|
690
|
+
}
|
|
691
|
+
)
|
|
692
|
+
] }) });
|
|
693
|
+
}
|
|
694
|
+
if (step === "complete") {
|
|
695
|
+
return /* @__PURE__ */ jsx6(motion5.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, className: "space-y-3", children: /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-1 gap-2", children: [
|
|
696
|
+
/* @__PURE__ */ jsx6(
|
|
697
|
+
"button",
|
|
698
|
+
{
|
|
699
|
+
onClick: () => onResponse("Talk through this with AFN"),
|
|
700
|
+
className: "px-4 py-3 bg-[#8B5CF6] hover:bg-[#7C3AED] text-white rounded-lg text-sm transition-colors text-left",
|
|
701
|
+
children: "Talk through this with AFN"
|
|
702
|
+
}
|
|
703
|
+
),
|
|
704
|
+
/* @__PURE__ */ jsx6(
|
|
705
|
+
"button",
|
|
706
|
+
{
|
|
707
|
+
onClick: () => onResponse("Adjust the numbers"),
|
|
708
|
+
className: "px-4 py-3 dark:bg-zinc-800 bg-zinc-100 dark:hover:bg-zinc-700 hover:bg-zinc-200 dark:text-white text-zinc-900 rounded-lg text-sm transition-colors text-left",
|
|
709
|
+
children: "Adjust the numbers"
|
|
710
|
+
}
|
|
711
|
+
),
|
|
712
|
+
/* @__PURE__ */ jsx6(
|
|
713
|
+
"button",
|
|
714
|
+
{
|
|
715
|
+
onClick: () => onResponse("Keep exploring"),
|
|
716
|
+
className: "px-4 py-3 dark:bg-zinc-800 bg-zinc-100 dark:hover:bg-zinc-700 hover:bg-zinc-200 dark:text-white text-zinc-900 rounded-lg text-sm transition-colors text-left",
|
|
717
|
+
children: "Keep exploring"
|
|
718
|
+
}
|
|
719
|
+
)
|
|
720
|
+
] }) });
|
|
721
|
+
}
|
|
722
|
+
}
|
|
723
|
+
if (mode === "profit") {
|
|
724
|
+
if (step === "volume") {
|
|
725
|
+
if (hasPersonalizedData) {
|
|
726
|
+
return /* @__PURE__ */ jsx6(motion5.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, className: "space-y-3", children: /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-1 gap-2", children: [
|
|
727
|
+
/* @__PURE__ */ jsx6(
|
|
728
|
+
"button",
|
|
729
|
+
{
|
|
730
|
+
onClick: () => onResponse("Yes", { volumeMultiplier: 1 }),
|
|
731
|
+
className: "px-4 py-3 bg-[#4399D1] hover:bg-[#2B7AB8] text-white rounded-lg text-sm transition-colors text-left",
|
|
732
|
+
children: "Yes"
|
|
733
|
+
}
|
|
734
|
+
),
|
|
735
|
+
/* @__PURE__ */ jsx6(
|
|
736
|
+
"button",
|
|
737
|
+
{
|
|
738
|
+
onClick: () => onResponse("Volume is higher", { volumeMultiplier: 1.1 }),
|
|
739
|
+
className: "px-4 py-3 dark:bg-zinc-800 bg-zinc-100 dark:hover:bg-zinc-700 hover:bg-zinc-200 dark:text-white text-zinc-900 rounded-lg text-sm transition-colors text-left",
|
|
740
|
+
children: "Volume is higher"
|
|
741
|
+
}
|
|
742
|
+
),
|
|
743
|
+
/* @__PURE__ */ jsx6(
|
|
744
|
+
"button",
|
|
745
|
+
{
|
|
746
|
+
onClick: () => onResponse("Volume is lower", { volumeMultiplier: 0.9 }),
|
|
747
|
+
className: "px-4 py-3 dark:bg-zinc-800 bg-zinc-100 dark:hover:bg-zinc-700 hover:bg-zinc-200 dark:text-white text-zinc-900 rounded-lg text-sm transition-colors text-left",
|
|
748
|
+
children: "Volume is lower"
|
|
749
|
+
}
|
|
750
|
+
)
|
|
751
|
+
] }) });
|
|
752
|
+
}
|
|
753
|
+
return /* @__PURE__ */ jsx6(motion5.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, className: "space-y-3", children: /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-1 gap-2", children: [
|
|
754
|
+
/* @__PURE__ */ jsx6(
|
|
755
|
+
"button",
|
|
756
|
+
{
|
|
757
|
+
onClick: () => onResponse("Under $100M", { volume: 75e6 }),
|
|
758
|
+
className: "px-4 py-3 bg-[#4399D1] hover:bg-[#2B7AB8] text-white rounded-lg text-sm transition-colors text-left",
|
|
759
|
+
children: "Under $100M"
|
|
760
|
+
}
|
|
761
|
+
),
|
|
762
|
+
/* @__PURE__ */ jsx6(
|
|
763
|
+
"button",
|
|
764
|
+
{
|
|
765
|
+
onClick: () => onResponse("$100M \u2013 $250M", { volume: 175e6 }),
|
|
766
|
+
className: "px-4 py-3 dark:bg-zinc-800 bg-zinc-100 dark:hover:bg-zinc-700 hover:bg-zinc-200 dark:text-white text-zinc-900 rounded-lg text-sm transition-colors text-left",
|
|
767
|
+
children: "$100M \u2013 $250M"
|
|
768
|
+
}
|
|
769
|
+
),
|
|
770
|
+
/* @__PURE__ */ jsx6(
|
|
771
|
+
"button",
|
|
772
|
+
{
|
|
773
|
+
onClick: () => onResponse("$250M \u2013 $500M", { volume: 375e6 }),
|
|
774
|
+
className: "px-4 py-3 dark:bg-zinc-800 bg-zinc-100 dark:hover:bg-zinc-700 hover:bg-zinc-200 dark:text-white text-zinc-900 rounded-lg text-sm transition-colors text-left",
|
|
775
|
+
children: "$250M \u2013 $500M"
|
|
776
|
+
}
|
|
777
|
+
),
|
|
778
|
+
/* @__PURE__ */ jsx6(
|
|
779
|
+
"button",
|
|
780
|
+
{
|
|
781
|
+
onClick: () => onResponse("$500M+", { volume: 65e7 }),
|
|
782
|
+
className: "px-4 py-3 dark:bg-zinc-800 bg-zinc-100 dark:hover:bg-zinc-700 hover:bg-zinc-200 dark:text-white text-zinc-900 rounded-lg text-sm transition-colors text-left",
|
|
783
|
+
children: "$500M+"
|
|
784
|
+
}
|
|
785
|
+
)
|
|
786
|
+
] }) });
|
|
787
|
+
}
|
|
788
|
+
if (step === "economics") {
|
|
789
|
+
return /* @__PURE__ */ jsx6(motion5.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, className: "space-y-3", children: /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-1 gap-2", children: [
|
|
790
|
+
/* @__PURE__ */ jsx6(
|
|
791
|
+
"button",
|
|
792
|
+
{
|
|
793
|
+
onClick: () => onResponse("Sounds right", { margin: 3, grossProfit: 1.5, opEx: 0.75 }),
|
|
794
|
+
className: "px-4 py-3 bg-[#4399D1] hover:bg-[#2B7AB8] text-white rounded-lg text-sm transition-colors text-left",
|
|
795
|
+
children: "Sounds right"
|
|
796
|
+
}
|
|
797
|
+
),
|
|
798
|
+
/* @__PURE__ */ jsx6(
|
|
799
|
+
"button",
|
|
800
|
+
{
|
|
801
|
+
onClick: () => onResponse("Margin is higher", {
|
|
802
|
+
margin: 3.5,
|
|
803
|
+
grossProfit: 1.75,
|
|
804
|
+
opEx: 0.75
|
|
805
|
+
}),
|
|
806
|
+
className: "px-4 py-3 dark:bg-zinc-800 bg-zinc-100 dark:hover:bg-zinc-700 hover:bg-zinc-200 dark:text-white text-zinc-900 rounded-lg text-sm transition-colors text-left",
|
|
807
|
+
children: "Margin is higher"
|
|
808
|
+
}
|
|
809
|
+
),
|
|
810
|
+
/* @__PURE__ */ jsx6(
|
|
811
|
+
"button",
|
|
812
|
+
{
|
|
813
|
+
onClick: () => onResponse("Expenses are higher", {
|
|
814
|
+
margin: 3,
|
|
815
|
+
grossProfit: 1.5,
|
|
816
|
+
opEx: 0.95
|
|
817
|
+
}),
|
|
818
|
+
className: "px-4 py-3 dark:bg-zinc-800 bg-zinc-100 dark:hover:bg-zinc-700 hover:bg-zinc-200 dark:text-white text-zinc-900 rounded-lg text-sm transition-colors text-left",
|
|
819
|
+
children: "Expenses are higher"
|
|
820
|
+
}
|
|
821
|
+
),
|
|
822
|
+
/* @__PURE__ */ jsx6(
|
|
823
|
+
"button",
|
|
824
|
+
{
|
|
825
|
+
onClick: () => onResponse("Let me adjust", {
|
|
826
|
+
margin: 3,
|
|
827
|
+
grossProfit: 1.5,
|
|
828
|
+
opEx: 0.75
|
|
829
|
+
}),
|
|
830
|
+
className: "px-4 py-3 dark:bg-zinc-800 bg-zinc-100 dark:hover:bg-zinc-700 hover:bg-zinc-200 dark:text-white text-zinc-900 rounded-lg text-sm transition-colors text-left",
|
|
831
|
+
children: "Let me adjust"
|
|
832
|
+
}
|
|
833
|
+
)
|
|
834
|
+
] }) });
|
|
835
|
+
}
|
|
836
|
+
if (step === "complete") {
|
|
837
|
+
return /* @__PURE__ */ jsx6(motion5.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, className: "space-y-3", children: /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-1 gap-2", children: [
|
|
838
|
+
/* @__PURE__ */ jsx6(
|
|
839
|
+
"button",
|
|
840
|
+
{
|
|
841
|
+
onClick: () => onResponse("Sanity-check with AFN"),
|
|
842
|
+
className: "px-4 py-3 bg-[#4399D1] hover:bg-[#2B7AB8] text-white rounded-lg text-sm transition-colors text-left",
|
|
843
|
+
children: "Sanity-check with AFN"
|
|
844
|
+
}
|
|
845
|
+
),
|
|
846
|
+
/* @__PURE__ */ jsx6(
|
|
847
|
+
"button",
|
|
848
|
+
{
|
|
849
|
+
onClick: () => onResponse("Adjust assumptions"),
|
|
850
|
+
className: "px-4 py-3 dark:bg-zinc-800 bg-zinc-100 dark:hover:bg-zinc-700 hover:bg-zinc-200 dark:text-white text-zinc-900 rounded-lg text-sm transition-colors text-left",
|
|
851
|
+
children: "Adjust assumptions"
|
|
852
|
+
}
|
|
853
|
+
),
|
|
854
|
+
/* @__PURE__ */ jsx6(
|
|
855
|
+
"button",
|
|
856
|
+
{
|
|
857
|
+
onClick: () => onResponse("Schedule leadership call"),
|
|
858
|
+
className: "px-4 py-3 dark:bg-zinc-800 bg-zinc-100 dark:hover:bg-zinc-700 hover:bg-zinc-200 dark:text-white text-zinc-900 rounded-lg text-sm transition-colors text-left",
|
|
859
|
+
children: "Schedule leadership call"
|
|
860
|
+
}
|
|
861
|
+
)
|
|
862
|
+
] }) });
|
|
863
|
+
}
|
|
864
|
+
}
|
|
865
|
+
return null;
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
// src/lib/ImageWithFallback.tsx
|
|
869
|
+
import { useState as useState5 } from "react";
|
|
870
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
871
|
+
var ERROR_IMG_SRC = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg==";
|
|
872
|
+
function ImageWithFallback(props) {
|
|
873
|
+
const [didError, setDidError] = useState5(false);
|
|
874
|
+
const handleError = () => {
|
|
875
|
+
setDidError(true);
|
|
876
|
+
};
|
|
877
|
+
const { src, alt, style, className, ...rest } = props;
|
|
878
|
+
return didError ? /* @__PURE__ */ jsx7(
|
|
879
|
+
"div",
|
|
880
|
+
{
|
|
881
|
+
className: `inline-block bg-gray-100 text-center align-middle ${className ?? ""}`,
|
|
882
|
+
style,
|
|
883
|
+
children: /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-center w-full h-full", children: /* @__PURE__ */ jsx7("img", { src: ERROR_IMG_SRC, alt: "Error loading image", ...rest, "data-original-url": src }) })
|
|
884
|
+
}
|
|
885
|
+
) : /* @__PURE__ */ jsx7("img", { src, alt, className, style, ...rest, onError: handleError });
|
|
886
|
+
}
|
|
887
|
+
|
|
888
|
+
// src/lib/EnhancedBradyChat.tsx
|
|
889
|
+
import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
890
|
+
function EnhancedBradyChat({ modeVariant = "loan-officer", avatarSrc }) {
|
|
891
|
+
const [bradyHealthy, setBradyHealthy] = useState6(true);
|
|
892
|
+
const {
|
|
893
|
+
workflowType,
|
|
894
|
+
messages,
|
|
895
|
+
addMessage,
|
|
896
|
+
resetChat,
|
|
897
|
+
setWorkflow,
|
|
898
|
+
activeMode,
|
|
899
|
+
modeStep,
|
|
900
|
+
modeData,
|
|
901
|
+
setModeStep,
|
|
902
|
+
updateModeData,
|
|
903
|
+
setCalculatorOpen,
|
|
904
|
+
activateMode,
|
|
905
|
+
resetMode,
|
|
906
|
+
isHidden,
|
|
907
|
+
setIsHidden
|
|
908
|
+
} = useBradyChat();
|
|
909
|
+
const [inputValue, setInputValue] = useState6("");
|
|
910
|
+
const [showForm, setShowForm] = useState6(false);
|
|
911
|
+
const [inputDisabled, setInputDisabled] = useState6(false);
|
|
912
|
+
const [showModePrompts, setShowModePrompts] = useState6(false);
|
|
913
|
+
const messagesEndRef = useRef(null);
|
|
914
|
+
const [suggestionLinks, setSuggestionLinks] = useState6(null);
|
|
915
|
+
const isBranchManager = modeVariant === "branch-manager";
|
|
916
|
+
const pageMode = isBranchManager ? "profit" : "earnings";
|
|
917
|
+
const isModeActive = activeMode === pageMode;
|
|
918
|
+
const hasPersonalizedData = false;
|
|
919
|
+
const handleFocusToggle = () => {
|
|
920
|
+
if (isModeActive) {
|
|
921
|
+
resetMode();
|
|
922
|
+
} else {
|
|
923
|
+
activateMode(pageMode);
|
|
924
|
+
setTimeout(() => {
|
|
925
|
+
addMessage({
|
|
926
|
+
type: "brady",
|
|
927
|
+
text: `${isBranchManager ? "Profit" : "Earnings"} Mode is on.
|
|
928
|
+
|
|
929
|
+
I'll focus on ways to increase ${isBranchManager ? "profit" : "income"} using ${isBranchManager ? "branch economics, recruiting leverage, and operational efficiency" : "volume, efficiency, and time savings"}.`
|
|
930
|
+
});
|
|
931
|
+
}, 300);
|
|
932
|
+
}
|
|
933
|
+
};
|
|
934
|
+
useEffect(() => {
|
|
935
|
+
let mounted = true;
|
|
936
|
+
const checkHealth = async () => {
|
|
937
|
+
const healthy = await checkBradyHealth();
|
|
938
|
+
if (mounted) setBradyHealthy(healthy);
|
|
939
|
+
};
|
|
940
|
+
checkHealth();
|
|
941
|
+
const interval = setInterval(checkHealth, 6e4);
|
|
942
|
+
return () => {
|
|
943
|
+
mounted = false;
|
|
944
|
+
clearInterval(interval);
|
|
945
|
+
};
|
|
946
|
+
}, []);
|
|
947
|
+
useEffect(() => {
|
|
948
|
+
if (workflowType === "info-request" || workflowType === "leadership-call" || workflowType === "personalized-overview-request") {
|
|
949
|
+
setShowForm(true);
|
|
950
|
+
setInputDisabled(true);
|
|
951
|
+
setShowModePrompts(false);
|
|
952
|
+
} else {
|
|
953
|
+
setShowForm(false);
|
|
954
|
+
setInputDisabled(false);
|
|
955
|
+
}
|
|
956
|
+
}, [workflowType]);
|
|
957
|
+
useEffect(() => {
|
|
958
|
+
if (activeMode !== "none" && modeStep === "volume") {
|
|
959
|
+
setShowModePrompts(true);
|
|
960
|
+
if (activeMode === "earnings") {
|
|
961
|
+
if (hasPersonalizedData) {
|
|
962
|
+
setTimeout(() => {
|
|
963
|
+
addMessage({
|
|
964
|
+
type: "brady",
|
|
965
|
+
text: "I have an estimate of your recent production.\nDoes this feel close?"
|
|
966
|
+
});
|
|
967
|
+
}, 500);
|
|
968
|
+
} else {
|
|
969
|
+
setTimeout(() => {
|
|
970
|
+
addMessage({
|
|
971
|
+
type: "brady",
|
|
972
|
+
text: "To keep this realistic, about how much volume do you fund in an average month?"
|
|
973
|
+
});
|
|
974
|
+
}, 500);
|
|
975
|
+
}
|
|
976
|
+
} else if (activeMode === "profit") {
|
|
977
|
+
if (hasPersonalizedData) {
|
|
978
|
+
setTimeout(() => {
|
|
979
|
+
addMessage({
|
|
980
|
+
type: "brady",
|
|
981
|
+
text: "I have a baseline view of your branch.\nDoes this feel directionally right?"
|
|
982
|
+
});
|
|
983
|
+
}, 500);
|
|
984
|
+
} else {
|
|
985
|
+
setTimeout(() => {
|
|
986
|
+
addMessage({
|
|
987
|
+
type: "brady",
|
|
988
|
+
text: "To start, about how much volume does your branch fund annually?"
|
|
989
|
+
});
|
|
990
|
+
}, 500);
|
|
991
|
+
}
|
|
992
|
+
}
|
|
993
|
+
}
|
|
994
|
+
}, [activeMode, modeStep, addMessage]);
|
|
995
|
+
useEffect(() => {
|
|
996
|
+
scrollToBottom();
|
|
997
|
+
}, [messages, showForm, showModePrompts]);
|
|
998
|
+
const scrollToBottom = () => {
|
|
999
|
+
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
1000
|
+
};
|
|
1001
|
+
const handleModeResponse = (response, data) => {
|
|
1002
|
+
addMessage({ type: "user", text: response });
|
|
1003
|
+
setShowModePrompts(false);
|
|
1004
|
+
if (data) {
|
|
1005
|
+
updateModeData(data);
|
|
1006
|
+
}
|
|
1007
|
+
if (activeMode === "earnings") {
|
|
1008
|
+
if (modeStep === "volume") {
|
|
1009
|
+
setTimeout(() => {
|
|
1010
|
+
addMessage({
|
|
1011
|
+
type: "brady",
|
|
1012
|
+
text: "And roughly how do you get paid today?"
|
|
1013
|
+
});
|
|
1014
|
+
setModeStep("comp");
|
|
1015
|
+
setShowModePrompts(true);
|
|
1016
|
+
}, 800);
|
|
1017
|
+
} else if (modeStep === "comp") {
|
|
1018
|
+
setTimeout(() => {
|
|
1019
|
+
addMessage({
|
|
1020
|
+
type: "brady",
|
|
1021
|
+
text: "Got it. I'll pull this together so you can see it clearly."
|
|
1022
|
+
});
|
|
1023
|
+
setModeStep("calculator");
|
|
1024
|
+
setTimeout(() => {
|
|
1025
|
+
setCalculatorOpen(true);
|
|
1026
|
+
setModeStep("complete");
|
|
1027
|
+
setTimeout(() => {
|
|
1028
|
+
addMessage({
|
|
1029
|
+
type: "brady",
|
|
1030
|
+
text: "Want to sanity-check these assumptions together?"
|
|
1031
|
+
});
|
|
1032
|
+
setShowModePrompts(true);
|
|
1033
|
+
}, 1e3);
|
|
1034
|
+
}, 800);
|
|
1035
|
+
}, 800);
|
|
1036
|
+
} else if (modeStep === "complete") {
|
|
1037
|
+
if (response.includes("Talk through")) {
|
|
1038
|
+
setShowModePrompts(false);
|
|
1039
|
+
setTimeout(() => {
|
|
1040
|
+
startWorkflow("leadership-call");
|
|
1041
|
+
}, 500);
|
|
1042
|
+
} else if (response.includes("Adjust")) {
|
|
1043
|
+
setShowModePrompts(false);
|
|
1044
|
+
setTimeout(() => {
|
|
1045
|
+
setCalculatorOpen(true);
|
|
1046
|
+
}, 500);
|
|
1047
|
+
} else {
|
|
1048
|
+
setShowModePrompts(false);
|
|
1049
|
+
setTimeout(() => {
|
|
1050
|
+
addMessage({
|
|
1051
|
+
type: "brady",
|
|
1052
|
+
text: "I'm here whenever you need me. What else would you like to explore?"
|
|
1053
|
+
});
|
|
1054
|
+
}, 800);
|
|
1055
|
+
}
|
|
1056
|
+
}
|
|
1057
|
+
} else if (activeMode === "profit") {
|
|
1058
|
+
if (modeStep === "volume") {
|
|
1059
|
+
setTimeout(() => {
|
|
1060
|
+
addMessage({
|
|
1061
|
+
type: "brady",
|
|
1062
|
+
text: "For modeling, I'll assume:\n\u2022 ~300 bps branch margin\n\u2022 ~150 bps gross profit\n\u2022 ~75 bps operating expenses\n\nWe can adjust all of this."
|
|
1063
|
+
});
|
|
1064
|
+
setModeStep("economics");
|
|
1065
|
+
setShowModePrompts(true);
|
|
1066
|
+
}, 800);
|
|
1067
|
+
} else if (modeStep === "economics") {
|
|
1068
|
+
setTimeout(() => {
|
|
1069
|
+
addMessage({
|
|
1070
|
+
type: "brady",
|
|
1071
|
+
text: "Here's a clean P&L view based on what we discussed."
|
|
1072
|
+
});
|
|
1073
|
+
setModeStep("calculator");
|
|
1074
|
+
setTimeout(() => {
|
|
1075
|
+
setCalculatorOpen(true);
|
|
1076
|
+
setModeStep("complete");
|
|
1077
|
+
setTimeout(() => {
|
|
1078
|
+
addMessage({
|
|
1079
|
+
type: "brady",
|
|
1080
|
+
text: "Want help building a realistic pro forma based on AFN's structure?"
|
|
1081
|
+
});
|
|
1082
|
+
setShowModePrompts(true);
|
|
1083
|
+
}, 1e3);
|
|
1084
|
+
}, 800);
|
|
1085
|
+
}, 800);
|
|
1086
|
+
} else if (modeStep === "complete") {
|
|
1087
|
+
if (response.includes("Sanity-check") || response.includes("leadership")) {
|
|
1088
|
+
setShowModePrompts(false);
|
|
1089
|
+
setTimeout(() => {
|
|
1090
|
+
startWorkflow("leadership-call");
|
|
1091
|
+
}, 500);
|
|
1092
|
+
} else if (response.includes("Adjust")) {
|
|
1093
|
+
setShowModePrompts(false);
|
|
1094
|
+
setTimeout(() => {
|
|
1095
|
+
setCalculatorOpen(true);
|
|
1096
|
+
}, 500);
|
|
1097
|
+
}
|
|
1098
|
+
}
|
|
1099
|
+
}
|
|
1100
|
+
};
|
|
1101
|
+
const handleSend = async () => {
|
|
1102
|
+
if (inputValue.trim() && !inputDisabled) {
|
|
1103
|
+
const userText = inputValue;
|
|
1104
|
+
addMessage({ type: "user", text: userText });
|
|
1105
|
+
setInputValue("");
|
|
1106
|
+
try {
|
|
1107
|
+
const apiResponse = await sendBradyPrompt([{ role: "user", content: userText }]);
|
|
1108
|
+
let mappedType = "brady";
|
|
1109
|
+
if (apiResponse.role === "user") mappedType = "user";
|
|
1110
|
+
addMessage({ type: mappedType, text: apiResponse.content });
|
|
1111
|
+
} catch {
|
|
1112
|
+
addMessage({ type: "brady", text: "Sorry, Brady AI is currently unavailable." });
|
|
1113
|
+
}
|
|
1114
|
+
}
|
|
1115
|
+
};
|
|
1116
|
+
const handleQuickSuggestion = async (text) => {
|
|
1117
|
+
addMessage({ type: "user", text });
|
|
1118
|
+
try {
|
|
1119
|
+
const apiResponse = await sendBradyPrompt([{ role: "user", content: text }]);
|
|
1120
|
+
if (Array.isArray(apiResponse.suggestionLink)) {
|
|
1121
|
+
setSuggestionLinks(apiResponse.suggestionLink);
|
|
1122
|
+
}
|
|
1123
|
+
let mappedType = "brady";
|
|
1124
|
+
if (apiResponse.role === "user") mappedType = "user";
|
|
1125
|
+
addMessage({ type: mappedType, text: apiResponse.content });
|
|
1126
|
+
} catch {
|
|
1127
|
+
addMessage({ type: "brady", text: "Sorry, Brady AI is currently unavailable." });
|
|
1128
|
+
}
|
|
1129
|
+
};
|
|
1130
|
+
const handleInfoFormSubmit = (data) => {
|
|
1131
|
+
addMessage({
|
|
1132
|
+
type: "brady",
|
|
1133
|
+
text: "Got it \u2014 thanks.\n\nWe'll email you a personalized overview shortly.\nIf you have questions in the meantime, I'm here to help."
|
|
1134
|
+
});
|
|
1135
|
+
setShowForm(false);
|
|
1136
|
+
setInputDisabled(false);
|
|
1137
|
+
setWorkflow("free");
|
|
1138
|
+
};
|
|
1139
|
+
const handleLeadershipFormSubmit = (data) => {
|
|
1140
|
+
addMessage({
|
|
1141
|
+
type: "brady",
|
|
1142
|
+
text: "Thanks \u2014 you're all set.\n\nSomeone from AFN leadership will reach out shortly to connect.\nIn the meantime, feel free to ask me anything."
|
|
1143
|
+
});
|
|
1144
|
+
setShowForm(false);
|
|
1145
|
+
setInputDisabled(false);
|
|
1146
|
+
setWorkflow("free");
|
|
1147
|
+
};
|
|
1148
|
+
const handlePersonalizedOverviewFormSubmit = (data) => {
|
|
1149
|
+
addMessage({
|
|
1150
|
+
type: "brady",
|
|
1151
|
+
text: "Perfect \u2014 thanks!\n\nWe'll create a personalized dashboard and earnings calculator based on your information and send it to you shortly.\n\nYou'll be able to see exactly what your business could look like at AFN with specific projections tailored to your situation."
|
|
1152
|
+
});
|
|
1153
|
+
setShowForm(false);
|
|
1154
|
+
setInputDisabled(false);
|
|
1155
|
+
setWorkflow("free");
|
|
1156
|
+
};
|
|
1157
|
+
const handleFormCancel = () => {
|
|
1158
|
+
setShowForm(false);
|
|
1159
|
+
setInputDisabled(false);
|
|
1160
|
+
resetChat();
|
|
1161
|
+
};
|
|
1162
|
+
const buildSuggestions = () => {
|
|
1163
|
+
if (suggestionLinks && suggestionLinks.length > 0) {
|
|
1164
|
+
return suggestionLinks.map((s) => ({
|
|
1165
|
+
text: s.text,
|
|
1166
|
+
action: () => handleQuickSuggestion(s.prompt)
|
|
1167
|
+
}));
|
|
1168
|
+
}
|
|
1169
|
+
return [
|
|
1170
|
+
{
|
|
1171
|
+
text: "How does AFN help LOs grow?",
|
|
1172
|
+
action: () => handleQuickSuggestion("How does AFN help LOs grow?")
|
|
1173
|
+
},
|
|
1174
|
+
{
|
|
1175
|
+
text: "How does AFN help branch managers earn more?",
|
|
1176
|
+
action: () => handleQuickSuggestion("How does AFN help branch managers earn more?")
|
|
1177
|
+
},
|
|
1178
|
+
{
|
|
1179
|
+
text: "Why do people choose AFN?",
|
|
1180
|
+
action: () => handleQuickSuggestion("Why do people choose AFN?")
|
|
1181
|
+
},
|
|
1182
|
+
{
|
|
1183
|
+
text: "The AFN Advantage",
|
|
1184
|
+
action: () => handleQuickSuggestion("See How AFN Supports Loan Officer Success")
|
|
1185
|
+
},
|
|
1186
|
+
{
|
|
1187
|
+
text: "Why AFN?",
|
|
1188
|
+
action: () => handleQuickSuggestion("Why AFN?")
|
|
1189
|
+
},
|
|
1190
|
+
{
|
|
1191
|
+
text: "How does AI help me earn more?",
|
|
1192
|
+
action: () => handleQuickSuggestion("How does AI help me earn more?")
|
|
1193
|
+
},
|
|
1194
|
+
{
|
|
1195
|
+
text: "What makes AFN different?",
|
|
1196
|
+
action: () => handleQuickSuggestion("What makes AFN different?")
|
|
1197
|
+
}
|
|
1198
|
+
];
|
|
1199
|
+
};
|
|
1200
|
+
const initialSuggestions = buildSuggestions();
|
|
1201
|
+
const postSubmitSuggestions = buildSuggestions();
|
|
1202
|
+
const showPostSubmitSuggestions = messages.length > 2 && !showForm && workflowType === "free" && activeMode === "none";
|
|
1203
|
+
const startWorkflow = (workflow) => {
|
|
1204
|
+
setWorkflow(workflow);
|
|
1205
|
+
if (workflow === "info-request") {
|
|
1206
|
+
setShowForm(true);
|
|
1207
|
+
setInputDisabled(true);
|
|
1208
|
+
} else if (workflow === "leadership-call") {
|
|
1209
|
+
setShowForm(true);
|
|
1210
|
+
setInputDisabled(true);
|
|
1211
|
+
}
|
|
1212
|
+
};
|
|
1213
|
+
const modeBadge = activeMode !== "none" ? /* @__PURE__ */ jsx8(
|
|
1214
|
+
"div",
|
|
1215
|
+
{
|
|
1216
|
+
className: `px-3 py-1 rounded-full text-xs font-medium ${activeMode === "earnings" ? "bg-[#8B5CF6]/20 text-[#8B5CF6] border border-[#8B5CF6]/30" : "bg-[#4399D1]/20 text-[#4399D1] border border-[#4399D1]/30"}`,
|
|
1217
|
+
children: activeMode === "earnings" ? "Earnings Mode" : "Profit Mode"
|
|
1218
|
+
}
|
|
1219
|
+
) : null;
|
|
1220
|
+
if (isHidden) return null;
|
|
1221
|
+
return /* @__PURE__ */ jsxs5("div", { className: "fixed top-0 right-0 w-full md:w-[360px] h-screen flex flex-col bg-gradient-to-br dark:from-zinc-900 dark:to-zinc-800 from-white to-zinc-50 border-l md:border-l dark:border-zinc-700 border-zinc-300 shadow-2xl z-[100] overflow-hidden transition-all duration-300", children: [
|
|
1222
|
+
/* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between px-4 py-3 border-b dark:border-zinc-800 border-zinc-200 dark:bg-zinc-950/80 bg-white/95 backdrop-blur-lg", children: [
|
|
1223
|
+
/* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3", children: [
|
|
1224
|
+
/* @__PURE__ */ jsx8("div", { className: "relative", children: /* @__PURE__ */ jsxs5("span", { className: "relative w-10 h-10 block group", children: [
|
|
1225
|
+
/* @__PURE__ */ jsx8(
|
|
1226
|
+
"span",
|
|
1227
|
+
{
|
|
1228
|
+
className: `absolute inset-0 rounded-full transition-colors duration-300 ${bradyHealthy ? "dark:bg-zinc-700/40 bg-transparent" : "bg-red-600/80 dark:bg-red-700/80"}`
|
|
1229
|
+
}
|
|
1230
|
+
),
|
|
1231
|
+
/* @__PURE__ */ jsx8(
|
|
1232
|
+
ImageWithFallback,
|
|
1233
|
+
{
|
|
1234
|
+
src: avatarSrc,
|
|
1235
|
+
alt: "Brady AI",
|
|
1236
|
+
className: "w-10 h-10 relative z-10",
|
|
1237
|
+
onClick: () => setIsHidden(true)
|
|
1238
|
+
}
|
|
1239
|
+
)
|
|
1240
|
+
] }) }),
|
|
1241
|
+
/* @__PURE__ */ jsx8("div", { className: "dark:text-white text-zinc-900", children: "Brady AI" })
|
|
1242
|
+
] }),
|
|
1243
|
+
/* @__PURE__ */ jsxs5("div", { className: "relative inline-flex items-center h-[34px] w-[150px] dark:bg-zinc-800/50 bg-zinc-200 rounded-full p-1", children: [
|
|
1244
|
+
/* @__PURE__ */ jsx8(
|
|
1245
|
+
"button",
|
|
1246
|
+
{
|
|
1247
|
+
onClick: () => isModeActive && resetMode(),
|
|
1248
|
+
className: `relative z-10 flex-1 h-full rounded-full text-[11px] tracking-wide uppercase font-medium transition-all duration-300 flex items-center justify-center ${!isModeActive ? "text-white" : "dark:text-zinc-500 text-zinc-600 hover:dark:bg-zinc-700/50 hover:bg-zinc-300/50"}`,
|
|
1249
|
+
children: "NORMAL"
|
|
1250
|
+
}
|
|
1251
|
+
),
|
|
1252
|
+
/* @__PURE__ */ jsxs5("div", { className: "relative flex-1", children: [
|
|
1253
|
+
!isModeActive && /* @__PURE__ */ jsx8(
|
|
1254
|
+
"div",
|
|
1255
|
+
{
|
|
1256
|
+
className: "absolute inset-0 rounded-full animate-pulse",
|
|
1257
|
+
style: {
|
|
1258
|
+
boxShadow: isBranchManager ? "0 0 16px rgba(67, 153, 209, 0.6), inset 0 0 10px rgba(67, 153, 209, 0.3)" : "0 0 16px rgba(139, 92, 246, 0.6), inset 0 0 10px rgba(139, 92, 246, 0.3)",
|
|
1259
|
+
animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
|
|
1260
|
+
}
|
|
1261
|
+
}
|
|
1262
|
+
),
|
|
1263
|
+
/* @__PURE__ */ jsx8(
|
|
1264
|
+
"button",
|
|
1265
|
+
{
|
|
1266
|
+
onClick: () => !isModeActive && handleFocusToggle(),
|
|
1267
|
+
className: `relative z-10 w-full h-full rounded-full text-[11px] tracking-wide uppercase font-medium transition-all duration-300 flex items-center justify-center ${isModeActive ? "text-white" : "dark:text-zinc-500 text-zinc-600 hover:dark:bg-zinc-700/50 hover:bg-zinc-300/50"}`,
|
|
1268
|
+
children: isBranchManager ? "PROFIT" : "EARNINGS"
|
|
1269
|
+
}
|
|
1270
|
+
)
|
|
1271
|
+
] }),
|
|
1272
|
+
/* @__PURE__ */ jsx8(
|
|
1273
|
+
"div",
|
|
1274
|
+
{
|
|
1275
|
+
className: `absolute top-1 bottom-1 rounded-full transition-all duration-300 ${isModeActive ? "left-[50%] right-1" : "left-1 right-[50%]"}`,
|
|
1276
|
+
style: isModeActive ? {
|
|
1277
|
+
background: isBranchManager ? "linear-gradient(135deg, #4399D1 0%, #3b82d9 100%)" : "linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%)",
|
|
1278
|
+
boxShadow: isBranchManager ? "0 0 16px rgba(67, 153, 209, 0.15)" : "0 0 16px rgba(139, 92, 246, 0.15)"
|
|
1279
|
+
} : {
|
|
1280
|
+
background: "var(--tw-gradient-stops)",
|
|
1281
|
+
backgroundImage: "linear-gradient(135deg, rgb(82, 82, 91) 0%, rgb(63, 63, 70) 100%)"
|
|
1282
|
+
}
|
|
1283
|
+
}
|
|
1284
|
+
)
|
|
1285
|
+
] })
|
|
1286
|
+
] }),
|
|
1287
|
+
modeBadge && /* @__PURE__ */ jsx8("div", { className: "px-4 py-2 border-b dark:border-zinc-800 border-zinc-200", children: modeBadge }),
|
|
1288
|
+
/* @__PURE__ */ jsxs5("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: [
|
|
1289
|
+
/* @__PURE__ */ jsx8(AnimatePresence, { children: messages.map((msg, idx) => /* @__PURE__ */ jsx8(
|
|
1290
|
+
motion6.div,
|
|
1291
|
+
{
|
|
1292
|
+
initial: { opacity: 0, y: 10 },
|
|
1293
|
+
animate: { opacity: 1, y: 0 },
|
|
1294
|
+
className: `flex ${msg.type === "user" ? "justify-end" : "justify-start"}`,
|
|
1295
|
+
children: /* @__PURE__ */ jsx8(
|
|
1296
|
+
"div",
|
|
1297
|
+
{
|
|
1298
|
+
className: `px-4 py-3 rounded-2xl whitespace-pre-line ${msg.type === "user" ? "bg-[#8B5CF6] text-white rounded-br-sm" : "dark:bg-zinc-800 bg-zinc-100 dark:text-zinc-100 text-zinc-900 rounded-bl-sm"}`,
|
|
1299
|
+
children: msg.text
|
|
1300
|
+
}
|
|
1301
|
+
)
|
|
1302
|
+
},
|
|
1303
|
+
idx
|
|
1304
|
+
)) }),
|
|
1305
|
+
showForm && workflowType === "info-request" && /* @__PURE__ */ jsx8(InfoRequestForm, { onSubmit: handleInfoFormSubmit, onCancel: handleFormCancel }),
|
|
1306
|
+
showForm && workflowType === "leadership-call" && /* @__PURE__ */ jsx8(LeadershipCallForm, { onSubmit: handleLeadershipFormSubmit, onCancel: handleFormCancel }),
|
|
1307
|
+
showForm && workflowType === "personalized-overview-request" && /* @__PURE__ */ jsx8(
|
|
1308
|
+
PersonalizedOverviewForm,
|
|
1309
|
+
{
|
|
1310
|
+
onSubmit: handlePersonalizedOverviewFormSubmit,
|
|
1311
|
+
onCancel: handleFormCancel
|
|
1312
|
+
}
|
|
1313
|
+
),
|
|
1314
|
+
showModePrompts && activeMode !== "none" && /* @__PURE__ */ jsx8(
|
|
1315
|
+
ModePromptTree,
|
|
1316
|
+
{
|
|
1317
|
+
mode: activeMode,
|
|
1318
|
+
step: modeStep,
|
|
1319
|
+
hasPersonalizedData,
|
|
1320
|
+
onResponse: handleModeResponse
|
|
1321
|
+
}
|
|
1322
|
+
),
|
|
1323
|
+
!showForm && !showModePrompts && messages.length === 1 && workflowType === "free" && activeMode === "none" && /* @__PURE__ */ jsx8(QuickSuggestions, { suggestions: initialSuggestions }),
|
|
1324
|
+
showPostSubmitSuggestions && !showModePrompts && /* @__PURE__ */ jsx8(QuickSuggestions, { suggestions: postSubmitSuggestions }),
|
|
1325
|
+
/* @__PURE__ */ jsx8("div", { ref: messagesEndRef })
|
|
1326
|
+
] }),
|
|
1327
|
+
/* @__PURE__ */ jsx8("div", { className: "p-4 border-t dark:border-zinc-800 border-zinc-200 dark:bg-zinc-900 bg-zinc-50", children: /* @__PURE__ */ jsxs5(
|
|
1328
|
+
"div",
|
|
1329
|
+
{
|
|
1330
|
+
className: `flex items-center gap-2 dark:bg-zinc-800 bg-white rounded-full px-4 py-3 border dark:border-zinc-700 border-zinc-300 focus-within:border-[#8B5CF6] transition-colors ${inputDisabled || showModePrompts ? "opacity-50 cursor-not-allowed" : ""}`,
|
|
1331
|
+
children: [
|
|
1332
|
+
/* @__PURE__ */ jsx8(
|
|
1333
|
+
"input",
|
|
1334
|
+
{
|
|
1335
|
+
type: "text",
|
|
1336
|
+
value: inputValue,
|
|
1337
|
+
onChange: (e) => setInputValue(e.target.value),
|
|
1338
|
+
onKeyPress: (e) => e.key === "Enter" && handleSend(),
|
|
1339
|
+
placeholder: inputDisabled || showModePrompts ? "Use buttons above..." : "Ask me anything...",
|
|
1340
|
+
disabled: inputDisabled || showModePrompts,
|
|
1341
|
+
className: "flex-1 bg-transparent dark:text-white text-zinc-900 dark:placeholder-zinc-500 placeholder-zinc-400 outline-none text-sm disabled:cursor-not-allowed"
|
|
1342
|
+
}
|
|
1343
|
+
),
|
|
1344
|
+
/* @__PURE__ */ jsx8(
|
|
1345
|
+
"button",
|
|
1346
|
+
{
|
|
1347
|
+
className: "dark:text-zinc-400 text-zinc-500 dark:hover:text-white hover:text-zinc-900 transition-colors disabled:opacity-50",
|
|
1348
|
+
disabled: inputDisabled || showModePrompts,
|
|
1349
|
+
children: /* @__PURE__ */ jsx8(Mic, { className: "w-5 h-5" })
|
|
1350
|
+
}
|
|
1351
|
+
),
|
|
1352
|
+
/* @__PURE__ */ jsx8(
|
|
1353
|
+
"button",
|
|
1354
|
+
{
|
|
1355
|
+
onClick: handleSend,
|
|
1356
|
+
disabled: inputDisabled || showModePrompts,
|
|
1357
|
+
className: "bg-[#8B5CF6] hover:bg-[#7C3AED] text-white rounded-full p-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
|
|
1358
|
+
children: /* @__PURE__ */ jsx8(Send, { className: "w-4 h-4" })
|
|
1359
|
+
}
|
|
1360
|
+
)
|
|
1361
|
+
]
|
|
1362
|
+
}
|
|
1363
|
+
) })
|
|
1364
|
+
] });
|
|
1365
|
+
}
|
|
1366
|
+
export {
|
|
1367
|
+
BradyChatProvider,
|
|
1368
|
+
DEFAULT_BRADY_API_KEY,
|
|
1369
|
+
EnhancedBradyChat,
|
|
1370
|
+
checkBradyHealth,
|
|
1371
|
+
sendBradyPrompt,
|
|
1372
|
+
useBradyChat
|
|
1373
|
+
};
|
|
1374
|
+
//# sourceMappingURL=index.mjs.map
|