@kite-copilot/chat-panel 0.2.39 → 0.2.42
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/auto.cjs +235 -71
- package/dist/auto.d.cts +1 -1
- package/dist/auto.d.ts +1 -1
- package/dist/auto.js +1 -1
- package/dist/{chunk-D4Z7O3Y7.js → chunk-XP6Y7EP7.js} +243 -79
- package/dist/{createKiteChat-jmAPjuv_.d.cts → createKiteChat-o5u-5Sor.d.cts} +8 -2
- package/dist/{createKiteChat-jmAPjuv_.d.ts → createKiteChat-o5u-5Sor.d.ts} +8 -2
- package/dist/embed.global.js +24 -59
- package/dist/index.cjs +235 -71
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/styles.css +1 -1
- package/package.json +3 -2
package/dist/auto.cjs
CHANGED
|
@@ -39,7 +39,7 @@ var import_react = __toESM(require("react"), 1);
|
|
|
39
39
|
var import_client = require("react-dom/client");
|
|
40
40
|
|
|
41
41
|
// src/ChatPanel.tsx
|
|
42
|
-
var
|
|
42
|
+
var React5 = __toESM(require("react"), 1);
|
|
43
43
|
var import_supabase_js = require("@supabase/supabase-js");
|
|
44
44
|
|
|
45
45
|
// src/lib/utils.ts
|
|
@@ -338,6 +338,58 @@ function useGuideCursor() {
|
|
|
338
338
|
};
|
|
339
339
|
}
|
|
340
340
|
|
|
341
|
+
// src/hooks/useUserAuth.ts
|
|
342
|
+
var React4 = __toESM(require("react"), 1);
|
|
343
|
+
function useUserAuth({
|
|
344
|
+
productBackendUrl,
|
|
345
|
+
sessionId,
|
|
346
|
+
enabled = true
|
|
347
|
+
}) {
|
|
348
|
+
const [authState, setAuthState] = React4.useState({ status: "idle" });
|
|
349
|
+
const lastSessionIdRef = React4.useRef(null);
|
|
350
|
+
const fetchUser = React4.useCallback(async () => {
|
|
351
|
+
if (!productBackendUrl || !enabled) {
|
|
352
|
+
setAuthState({ status: "idle" });
|
|
353
|
+
return;
|
|
354
|
+
}
|
|
355
|
+
setAuthState({ status: "loading" });
|
|
356
|
+
try {
|
|
357
|
+
const response = await fetch(`${productBackendUrl}/users/me`, {
|
|
358
|
+
method: "GET",
|
|
359
|
+
credentials: "include",
|
|
360
|
+
// Include cookies for authentication
|
|
361
|
+
headers: {
|
|
362
|
+
"Accept": "application/json"
|
|
363
|
+
}
|
|
364
|
+
});
|
|
365
|
+
if (!response.ok) {
|
|
366
|
+
if (response.status === 401) {
|
|
367
|
+
throw new Error("Please log in to use the chat assistant.");
|
|
368
|
+
}
|
|
369
|
+
if (response.status === 403) {
|
|
370
|
+
throw new Error("You do not have permission to access this feature.");
|
|
371
|
+
}
|
|
372
|
+
throw new Error(`Authentication failed (${response.status})`);
|
|
373
|
+
}
|
|
374
|
+
const user = await response.json();
|
|
375
|
+
setAuthState({ status: "authenticated", user });
|
|
376
|
+
} catch (error) {
|
|
377
|
+
const message = error instanceof Error ? error.message : "Unable to verify your identity. Please try again.";
|
|
378
|
+
setAuthState({ status: "error", error: message });
|
|
379
|
+
}
|
|
380
|
+
}, [productBackendUrl, enabled]);
|
|
381
|
+
React4.useEffect(() => {
|
|
382
|
+
if (sessionId !== lastSessionIdRef.current) {
|
|
383
|
+
lastSessionIdRef.current = sessionId;
|
|
384
|
+
fetchUser();
|
|
385
|
+
}
|
|
386
|
+
}, [sessionId, fetchUser]);
|
|
387
|
+
const retry = React4.useCallback(() => {
|
|
388
|
+
fetchUser();
|
|
389
|
+
}, [fetchUser]);
|
|
390
|
+
return { authState, retry };
|
|
391
|
+
}
|
|
392
|
+
|
|
341
393
|
// src/components/ui/card.tsx
|
|
342
394
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
343
395
|
function Card({ className, ...props }) {
|
|
@@ -915,7 +967,7 @@ function TypingIndicator({ className = "" }) {
|
|
|
915
967
|
|
|
916
968
|
// src/ChatPanel.tsx
|
|
917
969
|
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
918
|
-
var CHAT_PANEL_VERSION = true ? "0.2.
|
|
970
|
+
var CHAT_PANEL_VERSION = true ? "0.2.42" : "dev";
|
|
919
971
|
var DEFAULT_AGENT_URL = "http://localhost:5002";
|
|
920
972
|
var PANEL_WIDTH = 340;
|
|
921
973
|
function unescapeJsonString(str) {
|
|
@@ -1333,6 +1385,32 @@ var guides = {
|
|
|
1333
1385
|
}
|
|
1334
1386
|
};
|
|
1335
1387
|
var initialMessages = [];
|
|
1388
|
+
function AuthLoadingState() {
|
|
1389
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-center justify-center h-full p-6", children: [
|
|
1390
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Loader2, { className: "h-8 w-8 animate-spin text-gray-400 mb-3" }),
|
|
1391
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-gray-500", children: "Verifying your identity..." })
|
|
1392
|
+
] });
|
|
1393
|
+
}
|
|
1394
|
+
function AuthErrorState({
|
|
1395
|
+
error,
|
|
1396
|
+
onRetry
|
|
1397
|
+
}) {
|
|
1398
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-center justify-center h-full p-6 text-center", children: [
|
|
1399
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.X, { className: "h-6 w-6 text-red-600" }) }),
|
|
1400
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-sm font-semibold text-gray-900 mb-2", children: "Unable to Start Chat" }),
|
|
1401
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-gray-500 mb-4 max-w-[240px]", children: error }),
|
|
1402
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1403
|
+
Button,
|
|
1404
|
+
{
|
|
1405
|
+
variant: "secondary",
|
|
1406
|
+
size: "sm",
|
|
1407
|
+
onClick: onRetry,
|
|
1408
|
+
className: "h-8 px-4 text-xs",
|
|
1409
|
+
children: "Try Again"
|
|
1410
|
+
}
|
|
1411
|
+
)
|
|
1412
|
+
] });
|
|
1413
|
+
}
|
|
1336
1414
|
function ChatPanel({
|
|
1337
1415
|
isOpen = true,
|
|
1338
1416
|
onClose,
|
|
@@ -1350,21 +1428,46 @@ function ChatPanel({
|
|
|
1350
1428
|
userEmail,
|
|
1351
1429
|
userOrganization,
|
|
1352
1430
|
supabaseUrl,
|
|
1353
|
-
supabaseAnonKey
|
|
1431
|
+
supabaseAnonKey,
|
|
1432
|
+
productBackendUrl
|
|
1354
1433
|
} = {}) {
|
|
1355
|
-
const [messages, setMessages] =
|
|
1356
|
-
const [input, setInput] =
|
|
1357
|
-
const [sessionId, setSessionId] =
|
|
1358
|
-
const
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1434
|
+
const [messages, setMessages] = React5.useState(initialMessages);
|
|
1435
|
+
const [input, setInput] = React5.useState("");
|
|
1436
|
+
const [sessionId, setSessionId] = React5.useState(() => crypto.randomUUID());
|
|
1437
|
+
const { authState, retry: retryAuth } = useUserAuth({
|
|
1438
|
+
productBackendUrl,
|
|
1439
|
+
sessionId,
|
|
1440
|
+
enabled: !!productBackendUrl
|
|
1441
|
+
// Only enable if URL is provided
|
|
1442
|
+
});
|
|
1443
|
+
const effectiveUser = React5.useMemo(() => {
|
|
1444
|
+
if (authState.status === "authenticated") {
|
|
1445
|
+
return {
|
|
1446
|
+
userId: authState.user.id,
|
|
1447
|
+
userName: authState.user.name,
|
|
1448
|
+
userEmail: authState.user.email,
|
|
1449
|
+
userRole: authState.user.role,
|
|
1450
|
+
isInternal: authState.user.isInternal
|
|
1451
|
+
};
|
|
1452
|
+
}
|
|
1453
|
+
return {
|
|
1454
|
+
userId: userId || "anonymous",
|
|
1455
|
+
userName: userName || "Anonymous User",
|
|
1456
|
+
userEmail: userEmail || "Not provided",
|
|
1457
|
+
userRole: void 0,
|
|
1458
|
+
isInternal: false
|
|
1459
|
+
};
|
|
1460
|
+
}, [authState, userId, userName, userEmail]);
|
|
1461
|
+
const [isEscalated, setIsEscalated] = React5.useState(false);
|
|
1462
|
+
const escalationWsRef = React5.useRef(null);
|
|
1463
|
+
const [agentIsTyping, setAgentIsTyping] = React5.useState(false);
|
|
1464
|
+
const supabaseRef = React5.useRef(null);
|
|
1465
|
+
const typingChannelRef = React5.useRef(null);
|
|
1466
|
+
const typingTimeoutRef = React5.useRef(null);
|
|
1467
|
+
React5.useEffect(() => {
|
|
1365
1468
|
console.log(`[KiteChat] Chat Panel v${CHAT_PANEL_VERSION} loaded`);
|
|
1366
1469
|
}, []);
|
|
1367
|
-
const resetSession =
|
|
1470
|
+
const resetSession = React5.useCallback(() => {
|
|
1368
1471
|
console.log("[KiteChat] resetSession called", { isEscalated, hasSupabase: !!supabaseRef.current, sessionId });
|
|
1369
1472
|
if (isEscalated && supabaseRef.current && sessionId) {
|
|
1370
1473
|
console.log("[KiteChat] Updating customer_status to disconnected for session:", sessionId);
|
|
@@ -1394,12 +1497,12 @@ function ChatPanel({
|
|
|
1394
1497
|
typingChannelRef.current = null;
|
|
1395
1498
|
}
|
|
1396
1499
|
}, [isEscalated, sessionId]);
|
|
1397
|
-
|
|
1500
|
+
React5.useEffect(() => {
|
|
1398
1501
|
if (supabaseUrl && supabaseAnonKey && !supabaseRef.current) {
|
|
1399
1502
|
supabaseRef.current = (0, import_supabase_js.createClient)(supabaseUrl, supabaseAnonKey);
|
|
1400
1503
|
}
|
|
1401
1504
|
}, [supabaseUrl, supabaseAnonKey]);
|
|
1402
|
-
|
|
1505
|
+
React5.useEffect(() => {
|
|
1403
1506
|
if (!isEscalated || !sessionId || !supabaseRef.current) {
|
|
1404
1507
|
return;
|
|
1405
1508
|
}
|
|
@@ -1436,8 +1539,8 @@ function ChatPanel({
|
|
|
1436
1539
|
}
|
|
1437
1540
|
};
|
|
1438
1541
|
}, [isEscalated, sessionId]);
|
|
1439
|
-
const heartbeatIntervalRef =
|
|
1440
|
-
const updateCustomerStatus =
|
|
1542
|
+
const heartbeatIntervalRef = React5.useRef(null);
|
|
1543
|
+
const updateCustomerStatus = React5.useCallback(async (status) => {
|
|
1441
1544
|
if (!supabaseRef.current || !sessionId) return;
|
|
1442
1545
|
try {
|
|
1443
1546
|
await supabaseRef.current.from("escalations").update({
|
|
@@ -1448,7 +1551,7 @@ function ChatPanel({
|
|
|
1448
1551
|
console.error("[KiteChat] Failed to update customer status:", err);
|
|
1449
1552
|
}
|
|
1450
1553
|
}, [sessionId]);
|
|
1451
|
-
|
|
1554
|
+
React5.useEffect(() => {
|
|
1452
1555
|
if (!isEscalated || !sessionId || !supabaseRef.current) {
|
|
1453
1556
|
return;
|
|
1454
1557
|
}
|
|
@@ -1496,7 +1599,7 @@ function ChatPanel({
|
|
|
1496
1599
|
}
|
|
1497
1600
|
};
|
|
1498
1601
|
}, [isEscalated, sessionId, updateCustomerStatus]);
|
|
1499
|
-
const sendTypingIndicator =
|
|
1602
|
+
const sendTypingIndicator = React5.useCallback((isTyping) => {
|
|
1500
1603
|
if (!typingChannelRef.current) {
|
|
1501
1604
|
console.log("[KiteChat] Cannot send typing - channel not ready");
|
|
1502
1605
|
return;
|
|
@@ -1512,8 +1615,8 @@ function ChatPanel({
|
|
|
1512
1615
|
payload: { sender: "user", isTyping }
|
|
1513
1616
|
});
|
|
1514
1617
|
}, [isEscalated]);
|
|
1515
|
-
const userTypingTimeoutRef =
|
|
1516
|
-
const handleTypingStart =
|
|
1618
|
+
const userTypingTimeoutRef = React5.useRef(null);
|
|
1619
|
+
const handleTypingStart = React5.useCallback(() => {
|
|
1517
1620
|
if (!isEscalated || !supabaseRef.current) return;
|
|
1518
1621
|
sendTypingIndicator(true);
|
|
1519
1622
|
updateCustomerStatus("active");
|
|
@@ -1524,19 +1627,19 @@ function ChatPanel({
|
|
|
1524
1627
|
sendTypingIndicator(false);
|
|
1525
1628
|
}, 1500);
|
|
1526
1629
|
}, [isEscalated, sendTypingIndicator, updateCustomerStatus]);
|
|
1527
|
-
const streamIntervals =
|
|
1630
|
+
const streamIntervals = React5.useRef({});
|
|
1528
1631
|
const isEmpty = messages.length === 0;
|
|
1529
|
-
const [phase, setPhase] =
|
|
1530
|
-
const [progressSteps, setProgressSteps] =
|
|
1531
|
-
const phaseTimers =
|
|
1632
|
+
const [phase, setPhase] = React5.useState("idle");
|
|
1633
|
+
const [progressSteps, setProgressSteps] = React5.useState([]);
|
|
1634
|
+
const phaseTimers = React5.useRef([]);
|
|
1532
1635
|
const lastRole = messages.length ? messages[messages.length - 1].role : void 0;
|
|
1533
|
-
const [panelView, setPanelView] =
|
|
1636
|
+
const [panelView, setPanelView] = React5.useState(
|
|
1534
1637
|
"landing"
|
|
1535
1638
|
);
|
|
1536
|
-
const [currentFolderId, setCurrentFolderId] =
|
|
1537
|
-
const [startingQuestions, setStartingQuestions] =
|
|
1538
|
-
const [loadingQuestions, setLoadingQuestions] =
|
|
1539
|
-
|
|
1639
|
+
const [currentFolderId, setCurrentFolderId] = React5.useState(void 0);
|
|
1640
|
+
const [startingQuestions, setStartingQuestions] = React5.useState(startingQuestionsProp || defaultStartingQuestions);
|
|
1641
|
+
const [loadingQuestions, setLoadingQuestions] = React5.useState(false);
|
|
1642
|
+
React5.useEffect(() => {
|
|
1540
1643
|
if (startingQuestionsEndpoint && !startingQuestionsProp) {
|
|
1541
1644
|
setLoadingQuestions(true);
|
|
1542
1645
|
fetch(startingQuestionsEndpoint).then((res) => res.json()).then((data) => {
|
|
@@ -1548,16 +1651,16 @@ function ChatPanel({
|
|
|
1548
1651
|
}).finally(() => setLoadingQuestions(false));
|
|
1549
1652
|
}
|
|
1550
1653
|
}, [startingQuestionsEndpoint, startingQuestionsProp]);
|
|
1551
|
-
|
|
1654
|
+
React5.useEffect(() => {
|
|
1552
1655
|
if (startingQuestionsProp) {
|
|
1553
1656
|
setStartingQuestions(startingQuestionsProp);
|
|
1554
1657
|
}
|
|
1555
1658
|
}, [startingQuestionsProp]);
|
|
1556
|
-
const [activeGuide, setActiveGuide] =
|
|
1557
|
-
const activeGuideRef =
|
|
1558
|
-
const latestBulkSummaryNavigationRef =
|
|
1559
|
-
const [guideComplete, setGuideComplete] =
|
|
1560
|
-
|
|
1659
|
+
const [activeGuide, setActiveGuide] = React5.useState(void 0);
|
|
1660
|
+
const activeGuideRef = React5.useRef(void 0);
|
|
1661
|
+
const latestBulkSummaryNavigationRef = React5.useRef(null);
|
|
1662
|
+
const [guideComplete, setGuideComplete] = React5.useState(false);
|
|
1663
|
+
React5.useEffect(() => {
|
|
1561
1664
|
window.resetIntegrationNotification = () => {
|
|
1562
1665
|
localStorage.removeItem("gmailNotificationSeen");
|
|
1563
1666
|
console.log(
|
|
@@ -1591,7 +1694,7 @@ function ChatPanel({
|
|
|
1591
1694
|
);
|
|
1592
1695
|
};
|
|
1593
1696
|
}, []);
|
|
1594
|
-
|
|
1697
|
+
React5.useEffect(() => {
|
|
1595
1698
|
if (activeGuide) {
|
|
1596
1699
|
if (!activeGuideRef.current || activeGuideRef.current.id !== activeGuide.id || activeGuideRef.current.stepIndex !== activeGuide.stepIndex) {
|
|
1597
1700
|
activeGuideRef.current = activeGuide;
|
|
@@ -1600,21 +1703,21 @@ function ChatPanel({
|
|
|
1600
1703
|
activeGuideRef.current = void 0;
|
|
1601
1704
|
}
|
|
1602
1705
|
}, [activeGuide]);
|
|
1603
|
-
const [pendingNavigation, setPendingNavigation] =
|
|
1604
|
-
const [pendingAction, setPendingAction] =
|
|
1605
|
-
const [actionFormData, setActionFormData] =
|
|
1606
|
-
const messagesEndRef =
|
|
1607
|
-
const messagesContainerRef =
|
|
1608
|
-
const currentStepRef =
|
|
1706
|
+
const [pendingNavigation, setPendingNavigation] = React5.useState(null);
|
|
1707
|
+
const [pendingAction, setPendingAction] = React5.useState(null);
|
|
1708
|
+
const [actionFormData, setActionFormData] = React5.useState({});
|
|
1709
|
+
const messagesEndRef = React5.useRef(null);
|
|
1710
|
+
const messagesContainerRef = React5.useRef(null);
|
|
1711
|
+
const currentStepRef = React5.useRef(null);
|
|
1609
1712
|
const { cursorState, moveTo, hide } = useGuideCursor();
|
|
1610
|
-
const [pendingFile, setPendingFile] =
|
|
1611
|
-
const [pendingBulkSession, setPendingBulkSession] =
|
|
1612
|
-
const pendingBulkSessionRef =
|
|
1613
|
-
const fileInputRef =
|
|
1614
|
-
const [searchExpanded, setSearchExpanded] =
|
|
1615
|
-
const [searchInput, setSearchInput] =
|
|
1616
|
-
const searchInputRef =
|
|
1617
|
-
|
|
1713
|
+
const [pendingFile, setPendingFile] = React5.useState(null);
|
|
1714
|
+
const [pendingBulkSession, setPendingBulkSession] = React5.useState(null);
|
|
1715
|
+
const pendingBulkSessionRef = React5.useRef(null);
|
|
1716
|
+
const fileInputRef = React5.useRef(null);
|
|
1717
|
+
const [searchExpanded, setSearchExpanded] = React5.useState(false);
|
|
1718
|
+
const [searchInput, setSearchInput] = React5.useState("");
|
|
1719
|
+
const searchInputRef = React5.useRef(null);
|
|
1720
|
+
React5.useEffect(() => {
|
|
1618
1721
|
if (!activeGuide || activeGuide.id !== "add-api-key" || activeGuide.stepIndex !== 2) {
|
|
1619
1722
|
return;
|
|
1620
1723
|
}
|
|
@@ -1640,7 +1743,7 @@ function ChatPanel({
|
|
|
1640
1743
|
const interval = setInterval(checkForDialogOpen, 300);
|
|
1641
1744
|
return () => clearInterval(interval);
|
|
1642
1745
|
}, [activeGuide, hide]);
|
|
1643
|
-
|
|
1746
|
+
React5.useEffect(() => {
|
|
1644
1747
|
return () => {
|
|
1645
1748
|
Object.values(streamIntervals.current).forEach(
|
|
1646
1749
|
(id) => window.clearInterval(id)
|
|
@@ -1650,7 +1753,7 @@ function ChatPanel({
|
|
|
1650
1753
|
phaseTimers.current = [];
|
|
1651
1754
|
};
|
|
1652
1755
|
}, []);
|
|
1653
|
-
|
|
1756
|
+
React5.useEffect(() => {
|
|
1654
1757
|
if (activeGuide && messages.length > 0) {
|
|
1655
1758
|
const lastMessage = messages[messages.length - 1];
|
|
1656
1759
|
if (lastMessage.kind === "guideStep" || lastMessage.kind === "guideComplete") {
|
|
@@ -1667,7 +1770,7 @@ function ChatPanel({
|
|
|
1667
1770
|
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
1668
1771
|
}
|
|
1669
1772
|
}, [messages, phase, activeGuide]);
|
|
1670
|
-
const latestBulkSummaryNavigation =
|
|
1773
|
+
const latestBulkSummaryNavigation = React5.useMemo(() => {
|
|
1671
1774
|
for (let i = messages.length - 1; i >= 0; i--) {
|
|
1672
1775
|
const msg = messages[i];
|
|
1673
1776
|
if (msg.kind === "bulkSummary" && msg.bulkSummary?.navigationPage && msg.bulkSummary.successes > 0) {
|
|
@@ -1676,13 +1779,13 @@ function ChatPanel({
|
|
|
1676
1779
|
}
|
|
1677
1780
|
return null;
|
|
1678
1781
|
}, [messages]);
|
|
1679
|
-
|
|
1782
|
+
React5.useEffect(() => {
|
|
1680
1783
|
latestBulkSummaryNavigationRef.current = latestBulkSummaryNavigation;
|
|
1681
1784
|
}, [latestBulkSummaryNavigation]);
|
|
1682
|
-
|
|
1785
|
+
React5.useEffect(() => {
|
|
1683
1786
|
pendingBulkSessionRef.current = pendingBulkSession;
|
|
1684
1787
|
}, [pendingBulkSession]);
|
|
1685
|
-
|
|
1788
|
+
React5.useEffect(() => {
|
|
1686
1789
|
const handleKeyDown = (e) => {
|
|
1687
1790
|
if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
|
|
1688
1791
|
const currentBulkSession = pendingBulkSessionRef.current;
|
|
@@ -1745,7 +1848,7 @@ function ChatPanel({
|
|
|
1745
1848
|
guideComplete,
|
|
1746
1849
|
onNavigate
|
|
1747
1850
|
]);
|
|
1748
|
-
const connectToEscalationWs =
|
|
1851
|
+
const connectToEscalationWs = React5.useCallback((currentSessionId) => {
|
|
1749
1852
|
if (!agentUrl) return;
|
|
1750
1853
|
if (escalationWsRef.current) {
|
|
1751
1854
|
escalationWsRef.current.close();
|
|
@@ -1788,7 +1891,7 @@ function ChatPanel({
|
|
|
1788
1891
|
};
|
|
1789
1892
|
escalationWsRef.current = ws;
|
|
1790
1893
|
}, [agentUrl]);
|
|
1791
|
-
const sendEscalatedMessage =
|
|
1894
|
+
const sendEscalatedMessage = React5.useCallback(async (content) => {
|
|
1792
1895
|
if (!escalationWsRef.current || escalationWsRef.current.readyState !== WebSocket.OPEN) {
|
|
1793
1896
|
console.error("[KiteChat] Escalation WebSocket not connected");
|
|
1794
1897
|
return false;
|
|
@@ -1805,14 +1908,14 @@ function ChatPanel({
|
|
|
1805
1908
|
return false;
|
|
1806
1909
|
}
|
|
1807
1910
|
}, [updateCustomerStatus]);
|
|
1808
|
-
|
|
1911
|
+
React5.useEffect(() => {
|
|
1809
1912
|
return () => {
|
|
1810
1913
|
if (escalationWsRef.current) {
|
|
1811
1914
|
escalationWsRef.current.close();
|
|
1812
1915
|
}
|
|
1813
1916
|
};
|
|
1814
1917
|
}, []);
|
|
1815
|
-
|
|
1918
|
+
React5.useEffect(() => {
|
|
1816
1919
|
if (isEscalated && sessionId) {
|
|
1817
1920
|
connectToEscalationWs(sessionId);
|
|
1818
1921
|
}
|
|
@@ -2087,9 +2190,9 @@ function ChatPanel({
|
|
|
2087
2190
|
session_id: sessionId,
|
|
2088
2191
|
message: userText,
|
|
2089
2192
|
current_page: currentPage || "dashboard",
|
|
2090
|
-
user_id: userId,
|
|
2091
|
-
user_name: userName,
|
|
2092
|
-
user_email: userEmail,
|
|
2193
|
+
user_id: effectiveUser.userId,
|
|
2194
|
+
user_name: effectiveUser.userName,
|
|
2195
|
+
user_email: effectiveUser.userEmail,
|
|
2093
2196
|
user_organization: userOrganization,
|
|
2094
2197
|
org_id: orgId
|
|
2095
2198
|
}),
|
|
@@ -3032,6 +3135,64 @@ ${userText}`
|
|
|
3032
3135
|
] })
|
|
3033
3136
|
] }) }) });
|
|
3034
3137
|
}
|
|
3138
|
+
if (productBackendUrl) {
|
|
3139
|
+
if (authState.status === "loading") {
|
|
3140
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
3141
|
+
"section",
|
|
3142
|
+
{
|
|
3143
|
+
className: `fixed top-0 right-0 z-40 flex flex-col bg-white border-l border-gray-200 h-full overflow-hidden transition-transform duration-300 ${isOpen ? "translate-x-0" : "translate-x-full"}`,
|
|
3144
|
+
style: { width: `${PANEL_WIDTH}px` },
|
|
3145
|
+
children: [
|
|
3146
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white shrink-0", children: [
|
|
3147
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2.5", children: [
|
|
3148
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Sparkles, { className: "h-3.5 w-3.5 text-black", fill: "currentColor" }),
|
|
3149
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-sm font-semibold text-gray-800", children: "Copilot" })
|
|
3150
|
+
] }),
|
|
3151
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
3152
|
+
Button,
|
|
3153
|
+
{
|
|
3154
|
+
variant: "ghost",
|
|
3155
|
+
size: "sm",
|
|
3156
|
+
className: "h-7 w-7 p-0 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full",
|
|
3157
|
+
onClick: () => onClose?.(),
|
|
3158
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Minus, { className: "h-3.5 w-3.5" })
|
|
3159
|
+
}
|
|
3160
|
+
)
|
|
3161
|
+
] }),
|
|
3162
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AuthLoadingState, {})
|
|
3163
|
+
]
|
|
3164
|
+
}
|
|
3165
|
+
);
|
|
3166
|
+
}
|
|
3167
|
+
if (authState.status === "error") {
|
|
3168
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
3169
|
+
"section",
|
|
3170
|
+
{
|
|
3171
|
+
className: `fixed top-0 right-0 z-40 flex flex-col bg-white border-l border-gray-200 h-full overflow-hidden transition-transform duration-300 ${isOpen ? "translate-x-0" : "translate-x-full"}`,
|
|
3172
|
+
style: { width: `${PANEL_WIDTH}px` },
|
|
3173
|
+
children: [
|
|
3174
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white shrink-0", children: [
|
|
3175
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2.5", children: [
|
|
3176
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Sparkles, { className: "h-3.5 w-3.5 text-black", fill: "currentColor" }),
|
|
3177
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-sm font-semibold text-gray-800", children: "Copilot" })
|
|
3178
|
+
] }),
|
|
3179
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
3180
|
+
Button,
|
|
3181
|
+
{
|
|
3182
|
+
variant: "ghost",
|
|
3183
|
+
size: "sm",
|
|
3184
|
+
className: "h-7 w-7 p-0 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full",
|
|
3185
|
+
onClick: () => onClose?.(),
|
|
3186
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Minus, { className: "h-3.5 w-3.5" })
|
|
3187
|
+
}
|
|
3188
|
+
)
|
|
3189
|
+
] }),
|
|
3190
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AuthErrorState, { error: authState.error, onRetry: retryAuth })
|
|
3191
|
+
]
|
|
3192
|
+
}
|
|
3193
|
+
);
|
|
3194
|
+
}
|
|
3195
|
+
}
|
|
3035
3196
|
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
3036
3197
|
"section",
|
|
3037
3198
|
{
|
|
@@ -4149,7 +4310,7 @@ ${userText}`
|
|
|
4149
4310
|
message.id
|
|
4150
4311
|
);
|
|
4151
4312
|
}
|
|
4152
|
-
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
4313
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(React5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
4153
4314
|
"div",
|
|
4154
4315
|
{
|
|
4155
4316
|
ref: isCurrentGuideStep ? currentStepRef : null,
|
|
@@ -4383,9 +4544,10 @@ function ChatPanelWithToggle({
|
|
|
4383
4544
|
userEmail,
|
|
4384
4545
|
userOrganization,
|
|
4385
4546
|
supabaseUrl,
|
|
4386
|
-
supabaseAnonKey
|
|
4547
|
+
supabaseAnonKey,
|
|
4548
|
+
productBackendUrl
|
|
4387
4549
|
}) {
|
|
4388
|
-
const [internalIsOpen, setInternalIsOpen] =
|
|
4550
|
+
const [internalIsOpen, setInternalIsOpen] = React5.useState(defaultOpen);
|
|
4389
4551
|
const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
|
|
4390
4552
|
const setIsOpen = (open) => {
|
|
4391
4553
|
if (controlledIsOpen === void 0) {
|
|
@@ -4393,7 +4555,7 @@ function ChatPanelWithToggle({
|
|
|
4393
4555
|
}
|
|
4394
4556
|
onOpenChange?.(open);
|
|
4395
4557
|
};
|
|
4396
|
-
|
|
4558
|
+
React5.useEffect(() => {
|
|
4397
4559
|
const originalPadding = document.body.style.paddingRight;
|
|
4398
4560
|
const originalTransition = document.body.style.transition;
|
|
4399
4561
|
document.body.style.transition = "padding-right 0.3s ease";
|
|
@@ -4421,7 +4583,8 @@ function ChatPanelWithToggle({
|
|
|
4421
4583
|
userEmail,
|
|
4422
4584
|
userOrganization,
|
|
4423
4585
|
supabaseUrl,
|
|
4424
|
-
supabaseAnonKey
|
|
4586
|
+
supabaseAnonKey,
|
|
4587
|
+
productBackendUrl
|
|
4425
4588
|
}
|
|
4426
4589
|
);
|
|
4427
4590
|
}
|
|
@@ -4481,7 +4644,8 @@ function KiteChatWrapper({
|
|
|
4481
4644
|
userEmail: config.userEmail,
|
|
4482
4645
|
userOrganization: config.userOrganization,
|
|
4483
4646
|
supabaseUrl: config.supabaseUrl,
|
|
4484
|
-
supabaseAnonKey: config.supabaseAnonKey
|
|
4647
|
+
supabaseAnonKey: config.supabaseAnonKey,
|
|
4648
|
+
productBackendUrl: config.productBackendUrl
|
|
4485
4649
|
}
|
|
4486
4650
|
);
|
|
4487
4651
|
}
|
package/dist/auto.d.cts
CHANGED
package/dist/auto.d.ts
CHANGED