@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/index.cjs
CHANGED
|
@@ -70,7 +70,7 @@ var import_react = __toESM(require("react"), 1);
|
|
|
70
70
|
var import_client = require("react-dom/client");
|
|
71
71
|
|
|
72
72
|
// src/ChatPanel.tsx
|
|
73
|
-
var
|
|
73
|
+
var React5 = __toESM(require("react"), 1);
|
|
74
74
|
var import_supabase_js = require("@supabase/supabase-js");
|
|
75
75
|
|
|
76
76
|
// src/lib/utils.ts
|
|
@@ -369,6 +369,58 @@ function useGuideCursor() {
|
|
|
369
369
|
};
|
|
370
370
|
}
|
|
371
371
|
|
|
372
|
+
// src/hooks/useUserAuth.ts
|
|
373
|
+
var React4 = __toESM(require("react"), 1);
|
|
374
|
+
function useUserAuth({
|
|
375
|
+
productBackendUrl,
|
|
376
|
+
sessionId,
|
|
377
|
+
enabled = true
|
|
378
|
+
}) {
|
|
379
|
+
const [authState, setAuthState] = React4.useState({ status: "idle" });
|
|
380
|
+
const lastSessionIdRef = React4.useRef(null);
|
|
381
|
+
const fetchUser = React4.useCallback(async () => {
|
|
382
|
+
if (!productBackendUrl || !enabled) {
|
|
383
|
+
setAuthState({ status: "idle" });
|
|
384
|
+
return;
|
|
385
|
+
}
|
|
386
|
+
setAuthState({ status: "loading" });
|
|
387
|
+
try {
|
|
388
|
+
const response = await fetch(`${productBackendUrl}/users/me`, {
|
|
389
|
+
method: "GET",
|
|
390
|
+
credentials: "include",
|
|
391
|
+
// Include cookies for authentication
|
|
392
|
+
headers: {
|
|
393
|
+
"Accept": "application/json"
|
|
394
|
+
}
|
|
395
|
+
});
|
|
396
|
+
if (!response.ok) {
|
|
397
|
+
if (response.status === 401) {
|
|
398
|
+
throw new Error("Please log in to use the chat assistant.");
|
|
399
|
+
}
|
|
400
|
+
if (response.status === 403) {
|
|
401
|
+
throw new Error("You do not have permission to access this feature.");
|
|
402
|
+
}
|
|
403
|
+
throw new Error(`Authentication failed (${response.status})`);
|
|
404
|
+
}
|
|
405
|
+
const user = await response.json();
|
|
406
|
+
setAuthState({ status: "authenticated", user });
|
|
407
|
+
} catch (error) {
|
|
408
|
+
const message = error instanceof Error ? error.message : "Unable to verify your identity. Please try again.";
|
|
409
|
+
setAuthState({ status: "error", error: message });
|
|
410
|
+
}
|
|
411
|
+
}, [productBackendUrl, enabled]);
|
|
412
|
+
React4.useEffect(() => {
|
|
413
|
+
if (sessionId !== lastSessionIdRef.current) {
|
|
414
|
+
lastSessionIdRef.current = sessionId;
|
|
415
|
+
fetchUser();
|
|
416
|
+
}
|
|
417
|
+
}, [sessionId, fetchUser]);
|
|
418
|
+
const retry = React4.useCallback(() => {
|
|
419
|
+
fetchUser();
|
|
420
|
+
}, [fetchUser]);
|
|
421
|
+
return { authState, retry };
|
|
422
|
+
}
|
|
423
|
+
|
|
372
424
|
// src/components/ui/card.tsx
|
|
373
425
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
374
426
|
function Card({ className, ...props }) {
|
|
@@ -969,7 +1021,7 @@ function TypingIndicator({ className = "" }) {
|
|
|
969
1021
|
|
|
970
1022
|
// src/ChatPanel.tsx
|
|
971
1023
|
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
972
|
-
var CHAT_PANEL_VERSION = true ? "0.2.
|
|
1024
|
+
var CHAT_PANEL_VERSION = true ? "0.2.42" : "dev";
|
|
973
1025
|
var DEFAULT_AGENT_URL = "http://localhost:5002";
|
|
974
1026
|
var PANEL_WIDTH = 340;
|
|
975
1027
|
function unescapeJsonString(str) {
|
|
@@ -1387,6 +1439,32 @@ var guides = {
|
|
|
1387
1439
|
}
|
|
1388
1440
|
};
|
|
1389
1441
|
var initialMessages = [];
|
|
1442
|
+
function AuthLoadingState() {
|
|
1443
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-center justify-center h-full p-6", children: [
|
|
1444
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Loader2, { className: "h-8 w-8 animate-spin text-gray-400 mb-3" }),
|
|
1445
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-gray-500", children: "Verifying your identity..." })
|
|
1446
|
+
] });
|
|
1447
|
+
}
|
|
1448
|
+
function AuthErrorState({
|
|
1449
|
+
error,
|
|
1450
|
+
onRetry
|
|
1451
|
+
}) {
|
|
1452
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-center justify-center h-full p-6 text-center", children: [
|
|
1453
|
+
/* @__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" }) }),
|
|
1454
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-sm font-semibold text-gray-900 mb-2", children: "Unable to Start Chat" }),
|
|
1455
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-gray-500 mb-4 max-w-[240px]", children: error }),
|
|
1456
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1457
|
+
Button,
|
|
1458
|
+
{
|
|
1459
|
+
variant: "secondary",
|
|
1460
|
+
size: "sm",
|
|
1461
|
+
onClick: onRetry,
|
|
1462
|
+
className: "h-8 px-4 text-xs",
|
|
1463
|
+
children: "Try Again"
|
|
1464
|
+
}
|
|
1465
|
+
)
|
|
1466
|
+
] });
|
|
1467
|
+
}
|
|
1390
1468
|
function ChatPanel({
|
|
1391
1469
|
isOpen = true,
|
|
1392
1470
|
onClose,
|
|
@@ -1404,21 +1482,46 @@ function ChatPanel({
|
|
|
1404
1482
|
userEmail,
|
|
1405
1483
|
userOrganization,
|
|
1406
1484
|
supabaseUrl,
|
|
1407
|
-
supabaseAnonKey
|
|
1485
|
+
supabaseAnonKey,
|
|
1486
|
+
productBackendUrl
|
|
1408
1487
|
} = {}) {
|
|
1409
|
-
const [messages, setMessages] =
|
|
1410
|
-
const [input, setInput] =
|
|
1411
|
-
const [sessionId, setSessionId] =
|
|
1412
|
-
const
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1488
|
+
const [messages, setMessages] = React5.useState(initialMessages);
|
|
1489
|
+
const [input, setInput] = React5.useState("");
|
|
1490
|
+
const [sessionId, setSessionId] = React5.useState(() => crypto.randomUUID());
|
|
1491
|
+
const { authState, retry: retryAuth } = useUserAuth({
|
|
1492
|
+
productBackendUrl,
|
|
1493
|
+
sessionId,
|
|
1494
|
+
enabled: !!productBackendUrl
|
|
1495
|
+
// Only enable if URL is provided
|
|
1496
|
+
});
|
|
1497
|
+
const effectiveUser = React5.useMemo(() => {
|
|
1498
|
+
if (authState.status === "authenticated") {
|
|
1499
|
+
return {
|
|
1500
|
+
userId: authState.user.id,
|
|
1501
|
+
userName: authState.user.name,
|
|
1502
|
+
userEmail: authState.user.email,
|
|
1503
|
+
userRole: authState.user.role,
|
|
1504
|
+
isInternal: authState.user.isInternal
|
|
1505
|
+
};
|
|
1506
|
+
}
|
|
1507
|
+
return {
|
|
1508
|
+
userId: userId || "anonymous",
|
|
1509
|
+
userName: userName || "Anonymous User",
|
|
1510
|
+
userEmail: userEmail || "Not provided",
|
|
1511
|
+
userRole: void 0,
|
|
1512
|
+
isInternal: false
|
|
1513
|
+
};
|
|
1514
|
+
}, [authState, userId, userName, userEmail]);
|
|
1515
|
+
const [isEscalated, setIsEscalated] = React5.useState(false);
|
|
1516
|
+
const escalationWsRef = React5.useRef(null);
|
|
1517
|
+
const [agentIsTyping, setAgentIsTyping] = React5.useState(false);
|
|
1518
|
+
const supabaseRef = React5.useRef(null);
|
|
1519
|
+
const typingChannelRef = React5.useRef(null);
|
|
1520
|
+
const typingTimeoutRef = React5.useRef(null);
|
|
1521
|
+
React5.useEffect(() => {
|
|
1419
1522
|
console.log(`[KiteChat] Chat Panel v${CHAT_PANEL_VERSION} loaded`);
|
|
1420
1523
|
}, []);
|
|
1421
|
-
const resetSession =
|
|
1524
|
+
const resetSession = React5.useCallback(() => {
|
|
1422
1525
|
console.log("[KiteChat] resetSession called", { isEscalated, hasSupabase: !!supabaseRef.current, sessionId });
|
|
1423
1526
|
if (isEscalated && supabaseRef.current && sessionId) {
|
|
1424
1527
|
console.log("[KiteChat] Updating customer_status to disconnected for session:", sessionId);
|
|
@@ -1448,12 +1551,12 @@ function ChatPanel({
|
|
|
1448
1551
|
typingChannelRef.current = null;
|
|
1449
1552
|
}
|
|
1450
1553
|
}, [isEscalated, sessionId]);
|
|
1451
|
-
|
|
1554
|
+
React5.useEffect(() => {
|
|
1452
1555
|
if (supabaseUrl && supabaseAnonKey && !supabaseRef.current) {
|
|
1453
1556
|
supabaseRef.current = (0, import_supabase_js.createClient)(supabaseUrl, supabaseAnonKey);
|
|
1454
1557
|
}
|
|
1455
1558
|
}, [supabaseUrl, supabaseAnonKey]);
|
|
1456
|
-
|
|
1559
|
+
React5.useEffect(() => {
|
|
1457
1560
|
if (!isEscalated || !sessionId || !supabaseRef.current) {
|
|
1458
1561
|
return;
|
|
1459
1562
|
}
|
|
@@ -1490,8 +1593,8 @@ function ChatPanel({
|
|
|
1490
1593
|
}
|
|
1491
1594
|
};
|
|
1492
1595
|
}, [isEscalated, sessionId]);
|
|
1493
|
-
const heartbeatIntervalRef =
|
|
1494
|
-
const updateCustomerStatus =
|
|
1596
|
+
const heartbeatIntervalRef = React5.useRef(null);
|
|
1597
|
+
const updateCustomerStatus = React5.useCallback(async (status) => {
|
|
1495
1598
|
if (!supabaseRef.current || !sessionId) return;
|
|
1496
1599
|
try {
|
|
1497
1600
|
await supabaseRef.current.from("escalations").update({
|
|
@@ -1502,7 +1605,7 @@ function ChatPanel({
|
|
|
1502
1605
|
console.error("[KiteChat] Failed to update customer status:", err);
|
|
1503
1606
|
}
|
|
1504
1607
|
}, [sessionId]);
|
|
1505
|
-
|
|
1608
|
+
React5.useEffect(() => {
|
|
1506
1609
|
if (!isEscalated || !sessionId || !supabaseRef.current) {
|
|
1507
1610
|
return;
|
|
1508
1611
|
}
|
|
@@ -1550,7 +1653,7 @@ function ChatPanel({
|
|
|
1550
1653
|
}
|
|
1551
1654
|
};
|
|
1552
1655
|
}, [isEscalated, sessionId, updateCustomerStatus]);
|
|
1553
|
-
const sendTypingIndicator =
|
|
1656
|
+
const sendTypingIndicator = React5.useCallback((isTyping) => {
|
|
1554
1657
|
if (!typingChannelRef.current) {
|
|
1555
1658
|
console.log("[KiteChat] Cannot send typing - channel not ready");
|
|
1556
1659
|
return;
|
|
@@ -1566,8 +1669,8 @@ function ChatPanel({
|
|
|
1566
1669
|
payload: { sender: "user", isTyping }
|
|
1567
1670
|
});
|
|
1568
1671
|
}, [isEscalated]);
|
|
1569
|
-
const userTypingTimeoutRef =
|
|
1570
|
-
const handleTypingStart =
|
|
1672
|
+
const userTypingTimeoutRef = React5.useRef(null);
|
|
1673
|
+
const handleTypingStart = React5.useCallback(() => {
|
|
1571
1674
|
if (!isEscalated || !supabaseRef.current) return;
|
|
1572
1675
|
sendTypingIndicator(true);
|
|
1573
1676
|
updateCustomerStatus("active");
|
|
@@ -1578,19 +1681,19 @@ function ChatPanel({
|
|
|
1578
1681
|
sendTypingIndicator(false);
|
|
1579
1682
|
}, 1500);
|
|
1580
1683
|
}, [isEscalated, sendTypingIndicator, updateCustomerStatus]);
|
|
1581
|
-
const streamIntervals =
|
|
1684
|
+
const streamIntervals = React5.useRef({});
|
|
1582
1685
|
const isEmpty = messages.length === 0;
|
|
1583
|
-
const [phase, setPhase] =
|
|
1584
|
-
const [progressSteps, setProgressSteps] =
|
|
1585
|
-
const phaseTimers =
|
|
1686
|
+
const [phase, setPhase] = React5.useState("idle");
|
|
1687
|
+
const [progressSteps, setProgressSteps] = React5.useState([]);
|
|
1688
|
+
const phaseTimers = React5.useRef([]);
|
|
1586
1689
|
const lastRole = messages.length ? messages[messages.length - 1].role : void 0;
|
|
1587
|
-
const [panelView, setPanelView] =
|
|
1690
|
+
const [panelView, setPanelView] = React5.useState(
|
|
1588
1691
|
"landing"
|
|
1589
1692
|
);
|
|
1590
|
-
const [currentFolderId, setCurrentFolderId] =
|
|
1591
|
-
const [startingQuestions, setStartingQuestions] =
|
|
1592
|
-
const [loadingQuestions, setLoadingQuestions] =
|
|
1593
|
-
|
|
1693
|
+
const [currentFolderId, setCurrentFolderId] = React5.useState(void 0);
|
|
1694
|
+
const [startingQuestions, setStartingQuestions] = React5.useState(startingQuestionsProp || defaultStartingQuestions);
|
|
1695
|
+
const [loadingQuestions, setLoadingQuestions] = React5.useState(false);
|
|
1696
|
+
React5.useEffect(() => {
|
|
1594
1697
|
if (startingQuestionsEndpoint && !startingQuestionsProp) {
|
|
1595
1698
|
setLoadingQuestions(true);
|
|
1596
1699
|
fetch(startingQuestionsEndpoint).then((res) => res.json()).then((data) => {
|
|
@@ -1602,16 +1705,16 @@ function ChatPanel({
|
|
|
1602
1705
|
}).finally(() => setLoadingQuestions(false));
|
|
1603
1706
|
}
|
|
1604
1707
|
}, [startingQuestionsEndpoint, startingQuestionsProp]);
|
|
1605
|
-
|
|
1708
|
+
React5.useEffect(() => {
|
|
1606
1709
|
if (startingQuestionsProp) {
|
|
1607
1710
|
setStartingQuestions(startingQuestionsProp);
|
|
1608
1711
|
}
|
|
1609
1712
|
}, [startingQuestionsProp]);
|
|
1610
|
-
const [activeGuide, setActiveGuide] =
|
|
1611
|
-
const activeGuideRef =
|
|
1612
|
-
const latestBulkSummaryNavigationRef =
|
|
1613
|
-
const [guideComplete, setGuideComplete] =
|
|
1614
|
-
|
|
1713
|
+
const [activeGuide, setActiveGuide] = React5.useState(void 0);
|
|
1714
|
+
const activeGuideRef = React5.useRef(void 0);
|
|
1715
|
+
const latestBulkSummaryNavigationRef = React5.useRef(null);
|
|
1716
|
+
const [guideComplete, setGuideComplete] = React5.useState(false);
|
|
1717
|
+
React5.useEffect(() => {
|
|
1615
1718
|
window.resetIntegrationNotification = () => {
|
|
1616
1719
|
localStorage.removeItem("gmailNotificationSeen");
|
|
1617
1720
|
console.log(
|
|
@@ -1645,7 +1748,7 @@ function ChatPanel({
|
|
|
1645
1748
|
);
|
|
1646
1749
|
};
|
|
1647
1750
|
}, []);
|
|
1648
|
-
|
|
1751
|
+
React5.useEffect(() => {
|
|
1649
1752
|
if (activeGuide) {
|
|
1650
1753
|
if (!activeGuideRef.current || activeGuideRef.current.id !== activeGuide.id || activeGuideRef.current.stepIndex !== activeGuide.stepIndex) {
|
|
1651
1754
|
activeGuideRef.current = activeGuide;
|
|
@@ -1654,21 +1757,21 @@ function ChatPanel({
|
|
|
1654
1757
|
activeGuideRef.current = void 0;
|
|
1655
1758
|
}
|
|
1656
1759
|
}, [activeGuide]);
|
|
1657
|
-
const [pendingNavigation, setPendingNavigation] =
|
|
1658
|
-
const [pendingAction, setPendingAction] =
|
|
1659
|
-
const [actionFormData, setActionFormData] =
|
|
1660
|
-
const messagesEndRef =
|
|
1661
|
-
const messagesContainerRef =
|
|
1662
|
-
const currentStepRef =
|
|
1760
|
+
const [pendingNavigation, setPendingNavigation] = React5.useState(null);
|
|
1761
|
+
const [pendingAction, setPendingAction] = React5.useState(null);
|
|
1762
|
+
const [actionFormData, setActionFormData] = React5.useState({});
|
|
1763
|
+
const messagesEndRef = React5.useRef(null);
|
|
1764
|
+
const messagesContainerRef = React5.useRef(null);
|
|
1765
|
+
const currentStepRef = React5.useRef(null);
|
|
1663
1766
|
const { cursorState, moveTo, hide } = useGuideCursor();
|
|
1664
|
-
const [pendingFile, setPendingFile] =
|
|
1665
|
-
const [pendingBulkSession, setPendingBulkSession] =
|
|
1666
|
-
const pendingBulkSessionRef =
|
|
1667
|
-
const fileInputRef =
|
|
1668
|
-
const [searchExpanded, setSearchExpanded] =
|
|
1669
|
-
const [searchInput, setSearchInput] =
|
|
1670
|
-
const searchInputRef =
|
|
1671
|
-
|
|
1767
|
+
const [pendingFile, setPendingFile] = React5.useState(null);
|
|
1768
|
+
const [pendingBulkSession, setPendingBulkSession] = React5.useState(null);
|
|
1769
|
+
const pendingBulkSessionRef = React5.useRef(null);
|
|
1770
|
+
const fileInputRef = React5.useRef(null);
|
|
1771
|
+
const [searchExpanded, setSearchExpanded] = React5.useState(false);
|
|
1772
|
+
const [searchInput, setSearchInput] = React5.useState("");
|
|
1773
|
+
const searchInputRef = React5.useRef(null);
|
|
1774
|
+
React5.useEffect(() => {
|
|
1672
1775
|
if (!activeGuide || activeGuide.id !== "add-api-key" || activeGuide.stepIndex !== 2) {
|
|
1673
1776
|
return;
|
|
1674
1777
|
}
|
|
@@ -1694,7 +1797,7 @@ function ChatPanel({
|
|
|
1694
1797
|
const interval = setInterval(checkForDialogOpen, 300);
|
|
1695
1798
|
return () => clearInterval(interval);
|
|
1696
1799
|
}, [activeGuide, hide]);
|
|
1697
|
-
|
|
1800
|
+
React5.useEffect(() => {
|
|
1698
1801
|
return () => {
|
|
1699
1802
|
Object.values(streamIntervals.current).forEach(
|
|
1700
1803
|
(id) => window.clearInterval(id)
|
|
@@ -1704,7 +1807,7 @@ function ChatPanel({
|
|
|
1704
1807
|
phaseTimers.current = [];
|
|
1705
1808
|
};
|
|
1706
1809
|
}, []);
|
|
1707
|
-
|
|
1810
|
+
React5.useEffect(() => {
|
|
1708
1811
|
if (activeGuide && messages.length > 0) {
|
|
1709
1812
|
const lastMessage = messages[messages.length - 1];
|
|
1710
1813
|
if (lastMessage.kind === "guideStep" || lastMessage.kind === "guideComplete") {
|
|
@@ -1721,7 +1824,7 @@ function ChatPanel({
|
|
|
1721
1824
|
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
1722
1825
|
}
|
|
1723
1826
|
}, [messages, phase, activeGuide]);
|
|
1724
|
-
const latestBulkSummaryNavigation =
|
|
1827
|
+
const latestBulkSummaryNavigation = React5.useMemo(() => {
|
|
1725
1828
|
for (let i = messages.length - 1; i >= 0; i--) {
|
|
1726
1829
|
const msg = messages[i];
|
|
1727
1830
|
if (msg.kind === "bulkSummary" && msg.bulkSummary?.navigationPage && msg.bulkSummary.successes > 0) {
|
|
@@ -1730,13 +1833,13 @@ function ChatPanel({
|
|
|
1730
1833
|
}
|
|
1731
1834
|
return null;
|
|
1732
1835
|
}, [messages]);
|
|
1733
|
-
|
|
1836
|
+
React5.useEffect(() => {
|
|
1734
1837
|
latestBulkSummaryNavigationRef.current = latestBulkSummaryNavigation;
|
|
1735
1838
|
}, [latestBulkSummaryNavigation]);
|
|
1736
|
-
|
|
1839
|
+
React5.useEffect(() => {
|
|
1737
1840
|
pendingBulkSessionRef.current = pendingBulkSession;
|
|
1738
1841
|
}, [pendingBulkSession]);
|
|
1739
|
-
|
|
1842
|
+
React5.useEffect(() => {
|
|
1740
1843
|
const handleKeyDown = (e) => {
|
|
1741
1844
|
if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
|
|
1742
1845
|
const currentBulkSession = pendingBulkSessionRef.current;
|
|
@@ -1799,7 +1902,7 @@ function ChatPanel({
|
|
|
1799
1902
|
guideComplete,
|
|
1800
1903
|
onNavigate
|
|
1801
1904
|
]);
|
|
1802
|
-
const connectToEscalationWs =
|
|
1905
|
+
const connectToEscalationWs = React5.useCallback((currentSessionId) => {
|
|
1803
1906
|
if (!agentUrl) return;
|
|
1804
1907
|
if (escalationWsRef.current) {
|
|
1805
1908
|
escalationWsRef.current.close();
|
|
@@ -1842,7 +1945,7 @@ function ChatPanel({
|
|
|
1842
1945
|
};
|
|
1843
1946
|
escalationWsRef.current = ws;
|
|
1844
1947
|
}, [agentUrl]);
|
|
1845
|
-
const sendEscalatedMessage =
|
|
1948
|
+
const sendEscalatedMessage = React5.useCallback(async (content) => {
|
|
1846
1949
|
if (!escalationWsRef.current || escalationWsRef.current.readyState !== WebSocket.OPEN) {
|
|
1847
1950
|
console.error("[KiteChat] Escalation WebSocket not connected");
|
|
1848
1951
|
return false;
|
|
@@ -1859,14 +1962,14 @@ function ChatPanel({
|
|
|
1859
1962
|
return false;
|
|
1860
1963
|
}
|
|
1861
1964
|
}, [updateCustomerStatus]);
|
|
1862
|
-
|
|
1965
|
+
React5.useEffect(() => {
|
|
1863
1966
|
return () => {
|
|
1864
1967
|
if (escalationWsRef.current) {
|
|
1865
1968
|
escalationWsRef.current.close();
|
|
1866
1969
|
}
|
|
1867
1970
|
};
|
|
1868
1971
|
}, []);
|
|
1869
|
-
|
|
1972
|
+
React5.useEffect(() => {
|
|
1870
1973
|
if (isEscalated && sessionId) {
|
|
1871
1974
|
connectToEscalationWs(sessionId);
|
|
1872
1975
|
}
|
|
@@ -2141,9 +2244,9 @@ function ChatPanel({
|
|
|
2141
2244
|
session_id: sessionId,
|
|
2142
2245
|
message: userText,
|
|
2143
2246
|
current_page: currentPage || "dashboard",
|
|
2144
|
-
user_id: userId,
|
|
2145
|
-
user_name: userName,
|
|
2146
|
-
user_email: userEmail,
|
|
2247
|
+
user_id: effectiveUser.userId,
|
|
2248
|
+
user_name: effectiveUser.userName,
|
|
2249
|
+
user_email: effectiveUser.userEmail,
|
|
2147
2250
|
user_organization: userOrganization,
|
|
2148
2251
|
org_id: orgId
|
|
2149
2252
|
}),
|
|
@@ -3086,6 +3189,64 @@ ${userText}`
|
|
|
3086
3189
|
] })
|
|
3087
3190
|
] }) }) });
|
|
3088
3191
|
}
|
|
3192
|
+
if (productBackendUrl) {
|
|
3193
|
+
if (authState.status === "loading") {
|
|
3194
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
3195
|
+
"section",
|
|
3196
|
+
{
|
|
3197
|
+
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"}`,
|
|
3198
|
+
style: { width: `${PANEL_WIDTH}px` },
|
|
3199
|
+
children: [
|
|
3200
|
+
/* @__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: [
|
|
3201
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2.5", children: [
|
|
3202
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Sparkles, { className: "h-3.5 w-3.5 text-black", fill: "currentColor" }),
|
|
3203
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-sm font-semibold text-gray-800", children: "Copilot" })
|
|
3204
|
+
] }),
|
|
3205
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
3206
|
+
Button,
|
|
3207
|
+
{
|
|
3208
|
+
variant: "ghost",
|
|
3209
|
+
size: "sm",
|
|
3210
|
+
className: "h-7 w-7 p-0 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full",
|
|
3211
|
+
onClick: () => onClose?.(),
|
|
3212
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Minus, { className: "h-3.5 w-3.5" })
|
|
3213
|
+
}
|
|
3214
|
+
)
|
|
3215
|
+
] }),
|
|
3216
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AuthLoadingState, {})
|
|
3217
|
+
]
|
|
3218
|
+
}
|
|
3219
|
+
);
|
|
3220
|
+
}
|
|
3221
|
+
if (authState.status === "error") {
|
|
3222
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
3223
|
+
"section",
|
|
3224
|
+
{
|
|
3225
|
+
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"}`,
|
|
3226
|
+
style: { width: `${PANEL_WIDTH}px` },
|
|
3227
|
+
children: [
|
|
3228
|
+
/* @__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: [
|
|
3229
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2.5", children: [
|
|
3230
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Sparkles, { className: "h-3.5 w-3.5 text-black", fill: "currentColor" }),
|
|
3231
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-sm font-semibold text-gray-800", children: "Copilot" })
|
|
3232
|
+
] }),
|
|
3233
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
3234
|
+
Button,
|
|
3235
|
+
{
|
|
3236
|
+
variant: "ghost",
|
|
3237
|
+
size: "sm",
|
|
3238
|
+
className: "h-7 w-7 p-0 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full",
|
|
3239
|
+
onClick: () => onClose?.(),
|
|
3240
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Minus, { className: "h-3.5 w-3.5" })
|
|
3241
|
+
}
|
|
3242
|
+
)
|
|
3243
|
+
] }),
|
|
3244
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AuthErrorState, { error: authState.error, onRetry: retryAuth })
|
|
3245
|
+
]
|
|
3246
|
+
}
|
|
3247
|
+
);
|
|
3248
|
+
}
|
|
3249
|
+
}
|
|
3089
3250
|
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
3090
3251
|
"section",
|
|
3091
3252
|
{
|
|
@@ -4203,7 +4364,7 @@ ${userText}`
|
|
|
4203
4364
|
message.id
|
|
4204
4365
|
);
|
|
4205
4366
|
}
|
|
4206
|
-
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
4367
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(React5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
4207
4368
|
"div",
|
|
4208
4369
|
{
|
|
4209
4370
|
ref: isCurrentGuideStep ? currentStepRef : null,
|
|
@@ -4457,9 +4618,10 @@ function ChatPanelWithToggle({
|
|
|
4457
4618
|
userEmail,
|
|
4458
4619
|
userOrganization,
|
|
4459
4620
|
supabaseUrl,
|
|
4460
|
-
supabaseAnonKey
|
|
4621
|
+
supabaseAnonKey,
|
|
4622
|
+
productBackendUrl
|
|
4461
4623
|
}) {
|
|
4462
|
-
const [internalIsOpen, setInternalIsOpen] =
|
|
4624
|
+
const [internalIsOpen, setInternalIsOpen] = React5.useState(defaultOpen);
|
|
4463
4625
|
const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
|
|
4464
4626
|
const setIsOpen = (open) => {
|
|
4465
4627
|
if (controlledIsOpen === void 0) {
|
|
@@ -4467,7 +4629,7 @@ function ChatPanelWithToggle({
|
|
|
4467
4629
|
}
|
|
4468
4630
|
onOpenChange?.(open);
|
|
4469
4631
|
};
|
|
4470
|
-
|
|
4632
|
+
React5.useEffect(() => {
|
|
4471
4633
|
const originalPadding = document.body.style.paddingRight;
|
|
4472
4634
|
const originalTransition = document.body.style.transition;
|
|
4473
4635
|
document.body.style.transition = "padding-right 0.3s ease";
|
|
@@ -4495,7 +4657,8 @@ function ChatPanelWithToggle({
|
|
|
4495
4657
|
userEmail,
|
|
4496
4658
|
userOrganization,
|
|
4497
4659
|
supabaseUrl,
|
|
4498
|
-
supabaseAnonKey
|
|
4660
|
+
supabaseAnonKey,
|
|
4661
|
+
productBackendUrl
|
|
4499
4662
|
}
|
|
4500
4663
|
);
|
|
4501
4664
|
}
|
|
@@ -4567,7 +4730,8 @@ function KiteChatWrapper({
|
|
|
4567
4730
|
userEmail: config.userEmail,
|
|
4568
4731
|
userOrganization: config.userOrganization,
|
|
4569
4732
|
supabaseUrl: config.supabaseUrl,
|
|
4570
|
-
supabaseAnonKey: config.supabaseAnonKey
|
|
4733
|
+
supabaseAnonKey: config.supabaseAnonKey,
|
|
4734
|
+
productBackendUrl: config.productBackendUrl
|
|
4571
4735
|
}
|
|
4572
4736
|
);
|
|
4573
4737
|
}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { i as ActionData, A as ActionType, C as ChatPanel, d as ChatPanelProps, b as ChatPanelWithToggle, e as ChatPanelWithToggleProps, H as HelpButton, g as HelpButtonProps, K as KiteChatConfig, a as KiteChatInstance, N as NavigationTarget, h as Page, P as PanelToggle, f as PanelToggleProps, S as SettingsTab, j as StartingQuestion, c as createKiteChat } from './createKiteChat-
|
|
1
|
+
export { i as ActionData, A as ActionType, C as ChatPanel, d as ChatPanelProps, b as ChatPanelWithToggle, e as ChatPanelWithToggleProps, H as HelpButton, g as HelpButtonProps, K as KiteChatConfig, a as KiteChatInstance, N as NavigationTarget, h as Page, P as PanelToggle, f as PanelToggleProps, S as SettingsTab, j as StartingQuestion, c as createKiteChat } from './createKiteChat-o5u-5Sor.cjs';
|
|
2
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
3
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
4
|
import * as React from 'react';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { i as ActionData, A as ActionType, C as ChatPanel, d as ChatPanelProps, b as ChatPanelWithToggle, e as ChatPanelWithToggleProps, H as HelpButton, g as HelpButtonProps, K as KiteChatConfig, a as KiteChatInstance, N as NavigationTarget, h as Page, P as PanelToggle, f as PanelToggleProps, S as SettingsTab, j as StartingQuestion, c as createKiteChat } from './createKiteChat-
|
|
1
|
+
export { i as ActionData, A as ActionType, C as ChatPanel, d as ChatPanelProps, b as ChatPanelWithToggle, e as ChatPanelWithToggleProps, H as HelpButton, g as HelpButtonProps, K as KiteChatConfig, a as KiteChatInstance, N as NavigationTarget, h as Page, P as PanelToggle, f as PanelToggleProps, S as SettingsTab, j as StartingQuestion, c as createKiteChat } from './createKiteChat-o5u-5Sor.js';
|
|
2
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
3
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
4
|
import * as React from 'react';
|