@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 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 React4 = __toESM(require("react"), 1);
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.39" : "dev";
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] = React4.useState(initialMessages);
1356
- const [input, setInput] = React4.useState("");
1357
- const [sessionId, setSessionId] = React4.useState(() => crypto.randomUUID());
1358
- const [isEscalated, setIsEscalated] = React4.useState(false);
1359
- const escalationWsRef = React4.useRef(null);
1360
- const [agentIsTyping, setAgentIsTyping] = React4.useState(false);
1361
- const supabaseRef = React4.useRef(null);
1362
- const typingChannelRef = React4.useRef(null);
1363
- const typingTimeoutRef = React4.useRef(null);
1364
- React4.useEffect(() => {
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 = React4.useCallback(() => {
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
- React4.useEffect(() => {
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
- React4.useEffect(() => {
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 = React4.useRef(null);
1440
- const updateCustomerStatus = React4.useCallback(async (status) => {
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
- React4.useEffect(() => {
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 = React4.useCallback((isTyping) => {
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 = React4.useRef(null);
1516
- const handleTypingStart = React4.useCallback(() => {
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 = React4.useRef({});
1630
+ const streamIntervals = React5.useRef({});
1528
1631
  const isEmpty = messages.length === 0;
1529
- const [phase, setPhase] = React4.useState("idle");
1530
- const [progressSteps, setProgressSteps] = React4.useState([]);
1531
- const phaseTimers = React4.useRef([]);
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] = React4.useState(
1636
+ const [panelView, setPanelView] = React5.useState(
1534
1637
  "landing"
1535
1638
  );
1536
- const [currentFolderId, setCurrentFolderId] = React4.useState(void 0);
1537
- const [startingQuestions, setStartingQuestions] = React4.useState(startingQuestionsProp || defaultStartingQuestions);
1538
- const [loadingQuestions, setLoadingQuestions] = React4.useState(false);
1539
- React4.useEffect(() => {
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
- React4.useEffect(() => {
1654
+ React5.useEffect(() => {
1552
1655
  if (startingQuestionsProp) {
1553
1656
  setStartingQuestions(startingQuestionsProp);
1554
1657
  }
1555
1658
  }, [startingQuestionsProp]);
1556
- const [activeGuide, setActiveGuide] = React4.useState(void 0);
1557
- const activeGuideRef = React4.useRef(void 0);
1558
- const latestBulkSummaryNavigationRef = React4.useRef(null);
1559
- const [guideComplete, setGuideComplete] = React4.useState(false);
1560
- React4.useEffect(() => {
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
- React4.useEffect(() => {
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] = React4.useState(null);
1604
- const [pendingAction, setPendingAction] = React4.useState(null);
1605
- const [actionFormData, setActionFormData] = React4.useState({});
1606
- const messagesEndRef = React4.useRef(null);
1607
- const messagesContainerRef = React4.useRef(null);
1608
- const currentStepRef = React4.useRef(null);
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] = React4.useState(null);
1611
- const [pendingBulkSession, setPendingBulkSession] = React4.useState(null);
1612
- const pendingBulkSessionRef = React4.useRef(null);
1613
- const fileInputRef = React4.useRef(null);
1614
- const [searchExpanded, setSearchExpanded] = React4.useState(false);
1615
- const [searchInput, setSearchInput] = React4.useState("");
1616
- const searchInputRef = React4.useRef(null);
1617
- React4.useEffect(() => {
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
- React4.useEffect(() => {
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
- React4.useEffect(() => {
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 = React4.useMemo(() => {
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
- React4.useEffect(() => {
1782
+ React5.useEffect(() => {
1680
1783
  latestBulkSummaryNavigationRef.current = latestBulkSummaryNavigation;
1681
1784
  }, [latestBulkSummaryNavigation]);
1682
- React4.useEffect(() => {
1785
+ React5.useEffect(() => {
1683
1786
  pendingBulkSessionRef.current = pendingBulkSession;
1684
1787
  }, [pendingBulkSession]);
1685
- React4.useEffect(() => {
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 = React4.useCallback((currentSessionId) => {
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 = React4.useCallback(async (content) => {
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
- React4.useEffect(() => {
1911
+ React5.useEffect(() => {
1809
1912
  return () => {
1810
1913
  if (escalationWsRef.current) {
1811
1914
  escalationWsRef.current.close();
1812
1915
  }
1813
1916
  };
1814
1917
  }, []);
1815
- React4.useEffect(() => {
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)(React4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
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] = React4.useState(defaultOpen);
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
- React4.useEffect(() => {
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
@@ -1,4 +1,4 @@
1
- import { K as KiteChatConfig, a as KiteChatInstance } from './createKiteChat-jmAPjuv_.cjs';
1
+ import { K as KiteChatConfig, a as KiteChatInstance } from './createKiteChat-o5u-5Sor.cjs';
2
2
  import 'react/jsx-runtime';
3
3
 
4
4
  /**
package/dist/auto.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { K as KiteChatConfig, a as KiteChatInstance } from './createKiteChat-jmAPjuv_.js';
1
+ import { K as KiteChatConfig, a as KiteChatInstance } from './createKiteChat-o5u-5Sor.js';
2
2
  import 'react/jsx-runtime';
3
3
 
4
4
  /**
package/dist/auto.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  createKiteChat
3
- } from "./chunk-D4Z7O3Y7.js";
3
+ } from "./chunk-XP6Y7EP7.js";
4
4
 
5
5
  // src/auto.ts
6
6
  function mountKiteChat(config) {