@kite-copilot/chat-panel 0.2.29 → 0.2.33

package/README.md

@@ -49,6 +49,10 @@ const chat = createKiteChat({
   userId: 'user-123',
   orgId: 'org-456',
   agentUrl: 'https://your-api.example.com',
+  // Optional: Pass user info for session tracking in control center
+  userName: 'John Doe',
+  userEmail: 'john@example.com',
+  userOrganization: 'Acme Inc',
   onNavigate: (page, subtab) => {
     router.push(`/${page}${subtab ? `?tab=${subtab}` : ''}`);
   },
@@ -197,8 +201,13 @@ function App() {
     <>
       <YourExistingApp />
       {/* Just add this - no layout changes needed */}
-      <ChatPanelWithToggle 
+      <ChatPanelWithToggle
         agentUrl="https://your-api.example.com"
+        userId="user-123"
+        orgId="org-456"
+        userName="John Doe"
+        userEmail="john@example.com"
+        userOrganization="Acme Inc"
         onNavigate={(page) => router.push(`/${page}`)}
       />
     </>
@@ -279,6 +288,29 @@ The endpoint should return:
 ]
 ```
 
+## User Info & Session Tracking
+
+Pass user information to enable session tracking in the control center. This allows support agents to see who they're chatting with when conversations are escalated.
+
+```ts
+const chat = createKiteChat({
+  userId: 'user-123',
+  orgId: 'org-456',
+  // Optional user info for control center display
+  userName: 'John Doe',
+  userEmail: 'john@example.com',
+  userOrganization: 'Acme Inc',
+});
+```
+
+| Field | Description |
+|-------|-------------|
+| `userName` | Displayed in conversations list and live chat |
+| `userEmail` | Shown in user details panel |
+| `userOrganization` | Helps support agents identify the customer's company |
+
+**Note:** If user info is not provided, placeholder values ("Anonymous User", "Not provided", "Unknown") will be displayed in the control center.
+
 ## API Reference
 
 ### createKiteChat(config)
@@ -293,6 +325,9 @@ Creates a new chat instance with explicit lifecycle control.
 | `orgId` | `string` | Yes | Organization identifier |
 | `agentUrl` | `string` | No | Backend agent API URL |
 | `currentPage` | `string` | No | Current page context |
+| `userName` | `string` | No | User's display name (for control center) |
+| `userEmail` | `string` | No | User's email address (for control center) |
+| `userOrganization` | `string` | No | User's organization name (for control center) |
 | `theme` | `'light' \| 'dark' \| 'system'` | No | Theme preference |
 | `startingQuestions` | `StartingQuestion[]` | No | Custom starting questions |
 | `startingQuestionsEndpoint` | `string` | No | URL to fetch per-user questions |
@@ -327,6 +362,11 @@ import { ChatPanelWithToggle } from '@kite-copilot/chat-panel';
 |------|------|---------|-------------|
 | `agentUrl` | `string` | `localhost:5002` | Backend agent URL |
 | `currentPage` | `string` | - | Current page for context |
+| `userId` | `string` | - | Unique user identifier |
+| `orgId` | `string` | - | Organization identifier |
+| `userName` | `string` | - | User's display name (for control center) |
+| `userEmail` | `string` | - | User's email address (for control center) |
+| `userOrganization` | `string` | - | User's organization name (for control center) |
 | `defaultOpen` | `boolean` | `false` | Initial open state (uncontrolled) |
 | `isOpen` | `boolean` | - | Controlled open state |
 | `onOpenChange` | `(isOpen: boolean) => void` | - | Called when open state changes |
@@ -421,7 +461,10 @@ Main chat endpoint for streaming responses.
   "user_id": "user-123",
   "org_id": "org-456",
   "message": "user message",
-  "current_page": "dashboard"
+  "current_page": "dashboard",
+  "user_name": "John Doe",
+  "user_email": "john@example.com",
+  "user_organization": "Acme Inc"
 }
 ```
 

package/dist/auto.cjs

@@ -1313,7 +1313,12 @@ function ChatPanel({
   currentPage,
   agentUrl = DEFAULT_AGENT_URL,
   startingQuestions: startingQuestionsProp,
-  startingQuestionsEndpoint
+  startingQuestionsEndpoint,
+  userId,
+  orgId,
+  userName,
+  userEmail,
+  userOrganization
 } = {}) {
   const [messages, setMessages] = React4.useState(initialMessages);
   const [input, setInput] = React4.useState("");
@@ -1884,7 +1889,12 @@ function ChatPanel({
         body: JSON.stringify({
           session_id: sessionId,
           message: userText,
-          current_page: currentPage || "dashboard"
+          current_page: currentPage || "dashboard",
+          user_id: userId,
+          user_name: userName,
+          user_email: userEmail,
+          user_organization: userOrganization,
+          org_id: orgId
         }),
         signal: controller.signal
       });
@@ -2087,9 +2097,6 @@ function ChatPanel({
               };
               setMessages((prev) => [...prev, escalationMessage]);
             } else if (eventType === "token") {
-              if (process.env.NODE_ENV === "development") {
-                console.debug("[SSE] Token delta:", data.delta?.length || 0, "chars");
-              }
             }
           } catch (parseError) {
             console.error("Failed to parse SSE event:", parseError);
@@ -2147,6 +2154,7 @@ ${userText}`
       formData.append("message", userText);
       formData.append("session_id", sessionId);
       formData.append("current_page", currentPage || "dashboard");
+      if (orgId) formData.append("org_id", orgId);
       const controller = new AbortController();
       const timeoutId = setTimeout(() => controller.abort(), 12e4);
       const response = await fetch(`${agentUrl}/chat/bulk/stream`, {
@@ -2958,10 +2966,7 @@ ${userText}`
                   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "max-w-[260px] rounded-2xl rounded-br-md bg-gray-900 px-3.5 py-2.5 text-sm text-white shadow-sm", children: message.content }) }, message.id);
                 }
                 if (message.role === "agent") {
-                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex justify-start ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "max-w-[260px] rounded-2xl rounded-bl-md bg-blue-50 border border-blue-200 px-3.5 py-2.5 text-sm text-gray-900 shadow-sm", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-xs text-blue-600 font-medium mb-1", children: "Support Agent" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap leading-relaxed", children: renderMarkdown(message.content || "") })
-                  ] }) }, message.id);
+                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex justify-start ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "max-w-[260px] rounded-2xl rounded-bl-md bg-blue-500 px-3.5 py-2.5 text-sm text-white shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap leading-relaxed", children: renderMarkdown(message.content || "") }) }) }, message.id);
                 }
                 if (message.kind === "searchSummary") {
                   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -4154,7 +4159,12 @@ function ChatPanelWithToggle({
   startingQuestionsEndpoint,
   defaultOpen = false,
   isOpen: controlledIsOpen,
-  onOpenChange
+  onOpenChange,
+  userId,
+  orgId,
+  userName,
+  userEmail,
+  userOrganization
 }) {
   const [internalIsOpen, setInternalIsOpen] = React4.useState(defaultOpen);
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
@@ -4185,7 +4195,12 @@ function ChatPanelWithToggle({
       currentPage,
       agentUrl,
       startingQuestions,
-      startingQuestionsEndpoint
+      startingQuestionsEndpoint,
+      userId,
+      orgId,
+      userName,
+      userEmail,
+      userOrganization
     }
   );
 }
@@ -4238,7 +4253,12 @@ function KiteChatWrapper({
       onNavigate: (page, subtab) => config.onNavigate?.(page, subtab),
       onActionComplete: config.onActionComplete,
       startingQuestions: config.startingQuestions,
-      startingQuestionsEndpoint: config.startingQuestionsEndpoint
+      startingQuestionsEndpoint: config.startingQuestionsEndpoint,
+      userId: config.userId,
+      orgId: config.orgId,
+      userName: config.userName,
+      userEmail: config.userEmail,
+      userOrganization: config.userOrganization
     }
   );
 }

package/dist/auto.d.cts

@@ -1,4 +1,4 @@
-import { K as KiteChatConfig, a as KiteChatInstance } from './createKiteChat-CyoN-YV4.cjs';
+import { K as KiteChatConfig, a as KiteChatInstance } from './createKiteChat-DPFkdPqV.cjs';
 import 'react/jsx-runtime';
 
 /**

package/dist/auto.d.ts

@@ -1,4 +1,4 @@
-import { K as KiteChatConfig, a as KiteChatInstance } from './createKiteChat-CyoN-YV4.js';
+import { K as KiteChatConfig, a as KiteChatInstance } from './createKiteChat-DPFkdPqV.js';
 import 'react/jsx-runtime';
 
 /**

package/dist/auto.js

@@ -1,6 +1,6 @@
 import {
   createKiteChat
-} from "./chunk-DGU3KTFD.js";
+} from "./chunk-5BWUHEPW.js";
 
 // src/auto.ts
 function mountKiteChat(config) {

package/dist/{chunk-DGU3KTFD.js → chunk-5BWUHEPW.js}

@@ -1312,7 +1312,12 @@ function ChatPanel({
   currentPage,
   agentUrl = DEFAULT_AGENT_URL,
   startingQuestions: startingQuestionsProp,
-  startingQuestionsEndpoint
+  startingQuestionsEndpoint,
+  userId,
+  orgId,
+  userName,
+  userEmail,
+  userOrganization
 } = {}) {
   const [messages, setMessages] = React4.useState(initialMessages);
   const [input, setInput] = React4.useState("");
@@ -1883,7 +1888,12 @@ function ChatPanel({
         body: JSON.stringify({
           session_id: sessionId,
           message: userText,
-          current_page: currentPage || "dashboard"
+          current_page: currentPage || "dashboard",
+          user_id: userId,
+          user_name: userName,
+          user_email: userEmail,
+          user_organization: userOrganization,
+          org_id: orgId
         }),
         signal: controller.signal
       });
@@ -2086,9 +2096,6 @@ function ChatPanel({
               };
               setMessages((prev) => [...prev, escalationMessage]);
             } else if (eventType === "token") {
-              if (process.env.NODE_ENV === "development") {
-                console.debug("[SSE] Token delta:", data.delta?.length || 0, "chars");
-              }
             }
           } catch (parseError) {
             console.error("Failed to parse SSE event:", parseError);
@@ -2146,6 +2153,7 @@ ${userText}`
       formData.append("message", userText);
       formData.append("session_id", sessionId);
       formData.append("current_page", currentPage || "dashboard");
+      if (orgId) formData.append("org_id", orgId);
       const controller = new AbortController();
       const timeoutId = setTimeout(() => controller.abort(), 12e4);
       const response = await fetch(`${agentUrl}/chat/bulk/stream`, {
@@ -2957,10 +2965,7 @@ ${userText}`
                   return /* @__PURE__ */ jsx9("div", { className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ jsx9("div", { className: "max-w-[260px] rounded-2xl rounded-br-md bg-gray-900 px-3.5 py-2.5 text-sm text-white shadow-sm", children: message.content }) }, message.id);
                 }
                 if (message.role === "agent") {
-                  return /* @__PURE__ */ jsx9("div", { className: `flex justify-start ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ jsxs5("div", { className: "max-w-[260px] rounded-2xl rounded-bl-md bg-blue-50 border border-blue-200 px-3.5 py-2.5 text-sm text-gray-900 shadow-sm", children: [
-                    /* @__PURE__ */ jsx9("div", { className: "text-xs text-blue-600 font-medium mb-1", children: "Support Agent" }),
-                    /* @__PURE__ */ jsx9("div", { className: "whitespace-pre-wrap leading-relaxed", children: renderMarkdown(message.content || "") })
-                  ] }) }, message.id);
+                  return /* @__PURE__ */ jsx9("div", { className: `flex justify-start ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ jsx9("div", { className: "max-w-[260px] rounded-2xl rounded-bl-md bg-blue-500 px-3.5 py-2.5 text-sm text-white shadow-sm", children: /* @__PURE__ */ jsx9("div", { className: "whitespace-pre-wrap leading-relaxed", children: renderMarkdown(message.content || "") }) }) }, message.id);
                 }
                 if (message.kind === "searchSummary") {
                   return /* @__PURE__ */ jsx9(
@@ -4173,7 +4178,12 @@ function ChatPanelWithToggle({
   startingQuestionsEndpoint,
   defaultOpen = false,
   isOpen: controlledIsOpen,
-  onOpenChange
+  onOpenChange,
+  userId,
+  orgId,
+  userName,
+  userEmail,
+  userOrganization
 }) {
   const [internalIsOpen, setInternalIsOpen] = React4.useState(defaultOpen);
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
@@ -4204,7 +4214,12 @@ function ChatPanelWithToggle({
       currentPage,
       agentUrl,
       startingQuestions,
-      startingQuestionsEndpoint
+      startingQuestionsEndpoint,
+      userId,
+      orgId,
+      userName,
+      userEmail,
+      userOrganization
     }
   );
 }
@@ -4271,7 +4286,12 @@ function KiteChatWrapper({
       onNavigate: (page, subtab) => config.onNavigate?.(page, subtab),
       onActionComplete: config.onActionComplete,
       startingQuestions: config.startingQuestions,
-      startingQuestionsEndpoint: config.startingQuestionsEndpoint
+      startingQuestionsEndpoint: config.startingQuestionsEndpoint,
+      userId: config.userId,
+      orgId: config.orgId,
+      userName: config.userName,
+      userEmail: config.userEmail,
+      userOrganization: config.userOrganization
     }
   );
 }

package/dist/{createKiteChat-CyoN-YV4.d.cts → createKiteChat-DPFkdPqV.d.cts}

@@ -98,8 +98,18 @@ interface ChatPanelProps {
     startingQuestions?: StartingQuestion[];
     /** API endpoint to fetch starting questions */
     startingQuestionsEndpoint?: string;
+    /** Unique identifier for the current user */
+    userId?: string;
+    /** Organization identifier */
+    orgId?: string;
+    /** User's display name (for personalization and support) */
+    userName?: string;
+    /** User's email address (for support agent context) */
+    userEmail?: string;
+    /** User's organization/company name (for support agent context) */
+    userOrganization?: string;
 }
-declare function ChatPanel({ isOpen, onClose, onOpen, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint, }?: ChatPanelProps): react_jsx_runtime.JSX.Element;
+declare function ChatPanel({ isOpen, onClose, onOpen, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint, userId, orgId, userName, userEmail, userOrganization, }?: ChatPanelProps): react_jsx_runtime.JSX.Element;
 /**
  * PanelToggle - An arrow button on the right edge that toggles the side panel
  * Shows left arrow when closed (click to open), right arrow when open (click to close)
@@ -144,8 +154,18 @@ interface ChatPanelWithToggleProps {
     isOpen?: boolean;
     /** Callback when panel open state changes */
     onOpenChange?: (isOpen: boolean) => void;
+    /** Unique identifier for the current user */
+    userId?: string;
+    /** Organization identifier */
+    orgId?: string;
+    /** User's display name (for personalization and support) */
+    userName?: string;
+    /** User's email address (for support agent context) */
+    userEmail?: string;
+    /** User's organization/company name (for support agent context) */
+    userOrganization?: string;
 }
-declare function ChatPanelWithToggle({ onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions, startingQuestionsEndpoint, defaultOpen, isOpen: controlledIsOpen, onOpenChange, }: ChatPanelWithToggleProps): react_jsx_runtime.JSX.Element;
+declare function ChatPanelWithToggle({ onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions, startingQuestionsEndpoint, defaultOpen, isOpen: controlledIsOpen, onOpenChange, userId, orgId, userName, userEmail, userOrganization, }: ChatPanelWithToggleProps): react_jsx_runtime.JSX.Element;
 /**
  * @deprecated Use ChatPanelWithToggle instead for the new side panel UX
  */
@@ -206,6 +226,12 @@ interface KiteChatConfig {
     startingQuestions?: StartingQuestion[];
     /** API endpoint to fetch starting questions */
     startingQuestionsEndpoint?: string;
+    /** User's display name (optional - for personalization and support) */
+    userName?: string;
+    /** User's email address (optional - for support agent context) */
+    userEmail?: string;
+    /** User's organization/company name (optional - for support agent context) */
+    userOrganization?: string;
 }
 /**
  * Instance returned by createKiteChat with lifecycle control methods.

package/dist/{createKiteChat-CyoN-YV4.d.ts → createKiteChat-DPFkdPqV.d.ts}

@@ -98,8 +98,18 @@ interface ChatPanelProps {
     startingQuestions?: StartingQuestion[];
     /** API endpoint to fetch starting questions */
     startingQuestionsEndpoint?: string;
+    /** Unique identifier for the current user */
+    userId?: string;
+    /** Organization identifier */
+    orgId?: string;
+    /** User's display name (for personalization and support) */
+    userName?: string;
+    /** User's email address (for support agent context) */
+    userEmail?: string;
+    /** User's organization/company name (for support agent context) */
+    userOrganization?: string;
 }
-declare function ChatPanel({ isOpen, onClose, onOpen, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint, }?: ChatPanelProps): react_jsx_runtime.JSX.Element;
+declare function ChatPanel({ isOpen, onClose, onOpen, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint, userId, orgId, userName, userEmail, userOrganization, }?: ChatPanelProps): react_jsx_runtime.JSX.Element;
 /**
  * PanelToggle - An arrow button on the right edge that toggles the side panel
  * Shows left arrow when closed (click to open), right arrow when open (click to close)
@@ -144,8 +154,18 @@ interface ChatPanelWithToggleProps {
     isOpen?: boolean;
     /** Callback when panel open state changes */
     onOpenChange?: (isOpen: boolean) => void;
+    /** Unique identifier for the current user */
+    userId?: string;
+    /** Organization identifier */
+    orgId?: string;
+    /** User's display name (for personalization and support) */
+    userName?: string;
+    /** User's email address (for support agent context) */
+    userEmail?: string;
+    /** User's organization/company name (for support agent context) */
+    userOrganization?: string;
 }
-declare function ChatPanelWithToggle({ onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions, startingQuestionsEndpoint, defaultOpen, isOpen: controlledIsOpen, onOpenChange, }: ChatPanelWithToggleProps): react_jsx_runtime.JSX.Element;
+declare function ChatPanelWithToggle({ onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions, startingQuestionsEndpoint, defaultOpen, isOpen: controlledIsOpen, onOpenChange, userId, orgId, userName, userEmail, userOrganization, }: ChatPanelWithToggleProps): react_jsx_runtime.JSX.Element;
 /**
  * @deprecated Use ChatPanelWithToggle instead for the new side panel UX
  */
@@ -206,6 +226,12 @@ interface KiteChatConfig {
     startingQuestions?: StartingQuestion[];
     /** API endpoint to fetch starting questions */
     startingQuestionsEndpoint?: string;
+    /** User's display name (optional - for personalization and support) */
+    userName?: string;
+    /** User's email address (optional - for support agent context) */
+    userEmail?: string;
+    /** User's organization/company name (optional - for support agent context) */
+    userOrganization?: string;
 }
 /**
  * Instance returned by createKiteChat with lifecycle control methods.