@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/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 React4 = __toESM(require("react"), 1);
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.39" : "dev";
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] = React4.useState(initialMessages);
1410
- const [input, setInput] = React4.useState("");
1411
- const [sessionId, setSessionId] = React4.useState(() => crypto.randomUUID());
1412
- const [isEscalated, setIsEscalated] = React4.useState(false);
1413
- const escalationWsRef = React4.useRef(null);
1414
- const [agentIsTyping, setAgentIsTyping] = React4.useState(false);
1415
- const supabaseRef = React4.useRef(null);
1416
- const typingChannelRef = React4.useRef(null);
1417
- const typingTimeoutRef = React4.useRef(null);
1418
- React4.useEffect(() => {
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 = React4.useCallback(() => {
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
- React4.useEffect(() => {
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
- React4.useEffect(() => {
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 = React4.useRef(null);
1494
- const updateCustomerStatus = React4.useCallback(async (status) => {
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
- React4.useEffect(() => {
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 = React4.useCallback((isTyping) => {
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 = React4.useRef(null);
1570
- const handleTypingStart = React4.useCallback(() => {
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 = React4.useRef({});
1684
+ const streamIntervals = React5.useRef({});
1582
1685
  const isEmpty = messages.length === 0;
1583
- const [phase, setPhase] = React4.useState("idle");
1584
- const [progressSteps, setProgressSteps] = React4.useState([]);
1585
- const phaseTimers = React4.useRef([]);
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] = React4.useState(
1690
+ const [panelView, setPanelView] = React5.useState(
1588
1691
  "landing"
1589
1692
  );
1590
- const [currentFolderId, setCurrentFolderId] = React4.useState(void 0);
1591
- const [startingQuestions, setStartingQuestions] = React4.useState(startingQuestionsProp || defaultStartingQuestions);
1592
- const [loadingQuestions, setLoadingQuestions] = React4.useState(false);
1593
- React4.useEffect(() => {
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
- React4.useEffect(() => {
1708
+ React5.useEffect(() => {
1606
1709
  if (startingQuestionsProp) {
1607
1710
  setStartingQuestions(startingQuestionsProp);
1608
1711
  }
1609
1712
  }, [startingQuestionsProp]);
1610
- const [activeGuide, setActiveGuide] = React4.useState(void 0);
1611
- const activeGuideRef = React4.useRef(void 0);
1612
- const latestBulkSummaryNavigationRef = React4.useRef(null);
1613
- const [guideComplete, setGuideComplete] = React4.useState(false);
1614
- React4.useEffect(() => {
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
- React4.useEffect(() => {
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] = React4.useState(null);
1658
- const [pendingAction, setPendingAction] = React4.useState(null);
1659
- const [actionFormData, setActionFormData] = React4.useState({});
1660
- const messagesEndRef = React4.useRef(null);
1661
- const messagesContainerRef = React4.useRef(null);
1662
- const currentStepRef = React4.useRef(null);
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] = React4.useState(null);
1665
- const [pendingBulkSession, setPendingBulkSession] = React4.useState(null);
1666
- const pendingBulkSessionRef = React4.useRef(null);
1667
- const fileInputRef = React4.useRef(null);
1668
- const [searchExpanded, setSearchExpanded] = React4.useState(false);
1669
- const [searchInput, setSearchInput] = React4.useState("");
1670
- const searchInputRef = React4.useRef(null);
1671
- React4.useEffect(() => {
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
- React4.useEffect(() => {
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
- React4.useEffect(() => {
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 = React4.useMemo(() => {
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
- React4.useEffect(() => {
1836
+ React5.useEffect(() => {
1734
1837
  latestBulkSummaryNavigationRef.current = latestBulkSummaryNavigation;
1735
1838
  }, [latestBulkSummaryNavigation]);
1736
- React4.useEffect(() => {
1839
+ React5.useEffect(() => {
1737
1840
  pendingBulkSessionRef.current = pendingBulkSession;
1738
1841
  }, [pendingBulkSession]);
1739
- React4.useEffect(() => {
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 = React4.useCallback((currentSessionId) => {
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 = React4.useCallback(async (content) => {
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
- React4.useEffect(() => {
1965
+ React5.useEffect(() => {
1863
1966
  return () => {
1864
1967
  if (escalationWsRef.current) {
1865
1968
  escalationWsRef.current.close();
1866
1969
  }
1867
1970
  };
1868
1971
  }, []);
1869
- React4.useEffect(() => {
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)(React4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
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] = React4.useState(defaultOpen);
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
- React4.useEffect(() => {
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-jmAPjuv_.cjs';
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-jmAPjuv_.js';
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';
package/dist/index.js CHANGED
@@ -31,7 +31,7 @@ import {
31
31
  cn,
32
32
  createKiteChat,
33
33
  useGuideCursor
34
- } from "./chunk-D4Z7O3Y7.js";
34
+ } from "./chunk-XP6Y7EP7.js";
35
35
  export {
36
36
  ApiKeyList,
37
37
  AssistantActivity,