@kite-copilot/chat-panel 0.2.0 → 0.2.1

package/dist/{createKiteChat-C67AkIPX.d.cts → createKiteChat-CFo7NUHz.d.cts}

@@ -75,15 +75,86 @@ type BlockRuleData = {
     disabled?: boolean;
 };
 type ActionData = CompanyInfoData | ApiKeyData | CustomerData | PasswordData | NotificationData | IntegrationData | SessionData | PaymentMethodData | WebhookData | CurrencyData | TimezoneData | RefundData | SubscriptionData | CertificateData | BlockRuleData;
+type StartingQuestion = {
+    id: string;
+    label: string;
+    prompt: string;
+    icon?: "layout" | "upload" | "setup" | "default";
+};
 
 interface ChatPanelProps {
+    /** Whether the panel is open (controlled mode) */
+    isOpen?: boolean;
+    /** Callback when the panel should close */
+    onClose?: () => void;
     onBack?: () => void;
     onNavigate?: (page: Page, subtab?: SettingsTab) => void;
     onActionComplete?: (actionType: ActionType, data: ActionData) => void;
     currentPage?: Page;
     agentUrl?: string;
+    /** Custom starting questions (fetched per-user from backend) */
+    startingQuestions?: StartingQuestion[];
+    /** API endpoint to fetch starting questions */
+    startingQuestionsEndpoint?: string;
+}
+declare function ChatPanel({ isOpen, onClose, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint }?: 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)
+ * Uses fixed positioning to sit on the right edge of the viewport
+ */
+interface PanelToggleProps {
+    isOpen: boolean;
+    onClick: () => void;
+    className?: string;
+}
+declare function PanelToggle({ isOpen, onClick, className }: PanelToggleProps): react_jsx_runtime.JSX.Element;
+/**
+ * ChatPanelWithToggle - Complete side panel with integrated toggle button
+ *
+ * This component renders a toggle arrow on the right side of the screen
+ * and a side panel that expands/collapses without overlaying existing content.
+ * When opened, it automatically adds padding to the body to push content left.
+ *
+ * Usage:
+ * ```tsx
+ * // Just drop it anywhere in your app - no layout changes needed
+ * function App() {
+ *   return (
+ *     <>
+ *       <YourExistingApp />
+ *       <ChatPanelWithToggle agentUrl="..." />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+interface ChatPanelWithToggleProps {
+    onNavigate?: (page: Page, subtab?: SettingsTab) => void;
+    onActionComplete?: (actionType: ActionType, data: ActionData) => void;
+    currentPage?: Page;
+    agentUrl?: string;
+    startingQuestions?: StartingQuestion[];
+    startingQuestionsEndpoint?: string;
+    /** Initial open state (default: false) */
+    defaultOpen?: boolean;
+    /** Controlled open state */
+    isOpen?: boolean;
+    /** Callback when panel open state changes */
+    onOpenChange?: (isOpen: boolean) => void;
 }
-declare function ChatPanel({ onBack, onNavigate, onActionComplete, currentPage, agentUrl }?: ChatPanelProps): react_jsx_runtime.JSX.Element;
+declare function ChatPanelWithToggle({ onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions, startingQuestionsEndpoint, defaultOpen, isOpen: controlledIsOpen, onOpenChange }: ChatPanelWithToggleProps): react_jsx_runtime.JSX.Element;
+/**
+ * @deprecated Use ChatPanelWithToggle instead for the new side panel UX
+ */
+interface HelpButtonProps {
+    onClick: () => void;
+    className?: string;
+}
+/**
+ * @deprecated Use ChatPanelWithToggle instead for the new side panel UX
+ */
+declare function HelpButton({ onClick, className }: HelpButtonProps): react_jsx_runtime.JSX.Element;
 
 /**
  * @kite-copilot/chat-panel - Programmatic API
@@ -104,6 +175,8 @@ declare function ChatPanel({ onBack, onNavigate, onActionComplete, currentPage,
  * });
  *
  * chat.mount('#chat-container');
+ * chat.open(); // Opens the side panel
+ * chat.close(); // Closes the side panel
  * chat.setCurrentPage('settings');
  * chat.unmount();
  * ```
@@ -127,6 +200,10 @@ interface KiteChatConfig {
     onNavigate?: (page: string, subtab?: string) => void;
     /** Callback when an action is completed */
     onActionComplete?: (actionType: ActionType, data: ActionData) => void;
+    /** Custom starting questions (fetched per-user from backend) */
+    startingQuestions?: StartingQuestion[];
+    /** API endpoint to fetch starting questions */
+    startingQuestionsEndpoint?: string;
 }
 /**
  * Instance returned by createKiteChat with lifecycle control methods.
@@ -136,6 +213,14 @@ interface KiteChatInstance {
     mount: (container: string | HTMLElement) => void;
     /** Unmount and clean up the chat widget */
     unmount: () => void;
+    /** Open the side panel */
+    open: () => void;
+    /** Close the side panel */
+    close: () => void;
+    /** Toggle the side panel */
+    toggle: () => void;
+    /** Check if the panel is open */
+    isOpen: () => boolean;
     /** Update the current page context */
     setCurrentPage: (page: string) => void;
     /** Update configuration (userId, orgId, callbacks, etc.) */
@@ -161,8 +246,9 @@ interface KiteChatInstance {
  * });
  *
  * chat.mount('#chat-container');
+ * chat.open(); // Open the side panel
  * ```
  */
 declare function createKiteChat(config: KiteChatConfig): KiteChatInstance;
 
-export { type ActionType as A, ChatPanel as C, type KiteChatConfig as K, type NavigationTarget as N, type Page as P, type SettingsTab as S, type KiteChatInstance as a, type ChatPanelProps as b, createKiteChat as c, type ActionData as d };
+export { type ActionType as A, ChatPanel as C, HelpButton as H, type KiteChatConfig as K, type NavigationTarget as N, PanelToggle as P, type SettingsTab as S, type KiteChatInstance as a, ChatPanelWithToggle as b, createKiteChat as c, type ChatPanelProps as d, type ChatPanelWithToggleProps as e, type PanelToggleProps as f, type HelpButtonProps as g, type Page as h, type ActionData as i, type StartingQuestion as j };

package/dist/{createKiteChat-C67AkIPX.d.ts → createKiteChat-CFo7NUHz.d.ts}

@@ -75,15 +75,86 @@ type BlockRuleData = {
     disabled?: boolean;
 };
 type ActionData = CompanyInfoData | ApiKeyData | CustomerData | PasswordData | NotificationData | IntegrationData | SessionData | PaymentMethodData | WebhookData | CurrencyData | TimezoneData | RefundData | SubscriptionData | CertificateData | BlockRuleData;
+type StartingQuestion = {
+    id: string;
+    label: string;
+    prompt: string;
+    icon?: "layout" | "upload" | "setup" | "default";
+};
 
 interface ChatPanelProps {
+    /** Whether the panel is open (controlled mode) */
+    isOpen?: boolean;
+    /** Callback when the panel should close */
+    onClose?: () => void;
     onBack?: () => void;
     onNavigate?: (page: Page, subtab?: SettingsTab) => void;
     onActionComplete?: (actionType: ActionType, data: ActionData) => void;
     currentPage?: Page;
     agentUrl?: string;
+    /** Custom starting questions (fetched per-user from backend) */
+    startingQuestions?: StartingQuestion[];
+    /** API endpoint to fetch starting questions */
+    startingQuestionsEndpoint?: string;
+}
+declare function ChatPanel({ isOpen, onClose, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint }?: 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)
+ * Uses fixed positioning to sit on the right edge of the viewport
+ */
+interface PanelToggleProps {
+    isOpen: boolean;
+    onClick: () => void;
+    className?: string;
+}
+declare function PanelToggle({ isOpen, onClick, className }: PanelToggleProps): react_jsx_runtime.JSX.Element;
+/**
+ * ChatPanelWithToggle - Complete side panel with integrated toggle button
+ *
+ * This component renders a toggle arrow on the right side of the screen
+ * and a side panel that expands/collapses without overlaying existing content.
+ * When opened, it automatically adds padding to the body to push content left.
+ *
+ * Usage:
+ * ```tsx
+ * // Just drop it anywhere in your app - no layout changes needed
+ * function App() {
+ *   return (
+ *     <>
+ *       <YourExistingApp />
+ *       <ChatPanelWithToggle agentUrl="..." />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+interface ChatPanelWithToggleProps {
+    onNavigate?: (page: Page, subtab?: SettingsTab) => void;
+    onActionComplete?: (actionType: ActionType, data: ActionData) => void;
+    currentPage?: Page;
+    agentUrl?: string;
+    startingQuestions?: StartingQuestion[];
+    startingQuestionsEndpoint?: string;
+    /** Initial open state (default: false) */
+    defaultOpen?: boolean;
+    /** Controlled open state */
+    isOpen?: boolean;
+    /** Callback when panel open state changes */
+    onOpenChange?: (isOpen: boolean) => void;
 }
-declare function ChatPanel({ onBack, onNavigate, onActionComplete, currentPage, agentUrl }?: ChatPanelProps): react_jsx_runtime.JSX.Element;
+declare function ChatPanelWithToggle({ onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions, startingQuestionsEndpoint, defaultOpen, isOpen: controlledIsOpen, onOpenChange }: ChatPanelWithToggleProps): react_jsx_runtime.JSX.Element;
+/**
+ * @deprecated Use ChatPanelWithToggle instead for the new side panel UX
+ */
+interface HelpButtonProps {
+    onClick: () => void;
+    className?: string;
+}
+/**
+ * @deprecated Use ChatPanelWithToggle instead for the new side panel UX
+ */
+declare function HelpButton({ onClick, className }: HelpButtonProps): react_jsx_runtime.JSX.Element;
 
 /**
  * @kite-copilot/chat-panel - Programmatic API
@@ -104,6 +175,8 @@ declare function ChatPanel({ onBack, onNavigate, onActionComplete, currentPage,
  * });
  *
  * chat.mount('#chat-container');
+ * chat.open(); // Opens the side panel
+ * chat.close(); // Closes the side panel
  * chat.setCurrentPage('settings');
  * chat.unmount();
  * ```
@@ -127,6 +200,10 @@ interface KiteChatConfig {
     onNavigate?: (page: string, subtab?: string) => void;
     /** Callback when an action is completed */
     onActionComplete?: (actionType: ActionType, data: ActionData) => void;
+    /** Custom starting questions (fetched per-user from backend) */
+    startingQuestions?: StartingQuestion[];
+    /** API endpoint to fetch starting questions */
+    startingQuestionsEndpoint?: string;
 }
 /**
  * Instance returned by createKiteChat with lifecycle control methods.
@@ -136,6 +213,14 @@ interface KiteChatInstance {
     mount: (container: string | HTMLElement) => void;
     /** Unmount and clean up the chat widget */
     unmount: () => void;
+    /** Open the side panel */
+    open: () => void;
+    /** Close the side panel */
+    close: () => void;
+    /** Toggle the side panel */
+    toggle: () => void;
+    /** Check if the panel is open */
+    isOpen: () => boolean;
     /** Update the current page context */
     setCurrentPage: (page: string) => void;
     /** Update configuration (userId, orgId, callbacks, etc.) */
@@ -161,8 +246,9 @@ interface KiteChatInstance {
  * });
  *
  * chat.mount('#chat-container');
+ * chat.open(); // Open the side panel
  * ```
  */
 declare function createKiteChat(config: KiteChatConfig): KiteChatInstance;
 
-export { type ActionType as A, ChatPanel as C, type KiteChatConfig as K, type NavigationTarget as N, type Page as P, type SettingsTab as S, type KiteChatInstance as a, type ChatPanelProps as b, createKiteChat as c, type ActionData as d };
+export { type ActionType as A, ChatPanel as C, HelpButton as H, type KiteChatConfig as K, type NavigationTarget as N, PanelToggle as P, type SettingsTab as S, type KiteChatInstance as a, ChatPanelWithToggle as b, createKiteChat as c, type ChatPanelProps as d, type ChatPanelWithToggleProps as e, type PanelToggleProps as f, type HelpButtonProps as g, type Page as h, type ActionData as i, type StartingQuestion as j };