@kite-copilot/chat-panel 0.1.2 → 0.2.1

package/dist/createKiteChat-CFo7NUHz.d.cts

@@ -0,0 +1,254 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type Page = "dashboard" | "customers" | "payments" | "settings" | "support" | "disputes" | "radar";
+type SettingsTab = "general" | "billing" | "security" | "api" | "notifications" | "integrations";
+type NavigationTarget = {
+    page: Page;
+    subtab?: SettingsTab;
+};
+type ActionType = "updateCompanyInfo" | "addApiKey" | "addCustomer" | "enable2FA" | "disable2FA" | "changePassword" | "revokeSession" | "toggleNotification" | "connectIntegration" | "disconnectIntegration" | "addPaymentMethod" | "removePaymentMethod" | "deleteApiKey" | "addWebhook" | "updateCurrency" | "updateTimezone" | "refundPayment" | "createSubscription" | "exportCertificate" | "toggleBlockRule" | "enableBlockRule" | "disableBlockRule";
+type CompanyInfoData = {
+    companyName?: string;
+    email?: string;
+    address?: string;
+    phone?: string;
+    website?: string;
+};
+type ApiKeyData = {
+    name?: string;
+    keyId?: string;
+};
+type CustomerData = {
+    name?: string;
+    email?: string;
+    location?: string;
+    subscription?: "Starter" | "Professional" | "Enterprise";
+};
+type PasswordData = {
+    currentPassword?: string;
+    newPassword?: string;
+    confirmPassword?: string;
+};
+type NotificationData = {
+    notificationType?: "paymentReceived" | "paymentFailed" | "invoicePaid" | "monthlySummary" | "productUpdates";
+    enabled?: boolean;
+};
+type IntegrationData = {
+    integrationName?: "Slack" | "Zapier" | "Webhook";
+};
+type SessionData = {
+    sessionId?: string;
+    device?: string;
+};
+type PaymentMethodData = {
+    cardNumber?: string;
+    expiryDate?: string;
+};
+type WebhookData = {
+    url?: string;
+    name?: string;
+};
+type CurrencyData = {
+    currency?: "USD" | "EUR" | "GBP" | "JPY";
+};
+type TimezoneData = {
+    timezone?: "America/Los_Angeles" | "America/New_York" | "Europe/London" | "Asia/Tokyo";
+};
+type RefundData = {
+    transactionId?: string;
+    customer?: string;
+    amount?: string;
+    reason?: string;
+};
+type SubscriptionData = {
+    customerEmail?: string;
+    customerId?: string;
+    plan?: "Starter" | "Professional" | "Enterprise";
+    billingCycle?: "monthly" | "yearly";
+};
+type CertificateData = {
+    format?: "pdf" | "json";
+};
+type BlockRuleData = {
+    ruleId?: string;
+    ruleName?: string;
+    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 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
+ *
+ * Industry-standard SDK pattern for embedding the Kite chat widget.
+ * No globals, explicit lifecycle control, tree-shakeable.
+ *
+ * Usage:
+ * ```ts
+ * import { createKiteChat } from '@kite-copilot/chat-panel';
+ * import '@kite-copilot/chat-panel/style.css';
+ *
+ * const chat = createKiteChat({
+ *   userId: 'user-123',
+ *   orgId: 'org-456',
+ *   agentUrl: 'https://api.example.com',
+ *   onNavigate: (page) => router.push(`/${page}`),
+ * });
+ *
+ * chat.mount('#chat-container');
+ * chat.open(); // Opens the side panel
+ * chat.close(); // Closes the side panel
+ * chat.setCurrentPage('settings');
+ * chat.unmount();
+ * ```
+ */
+
+/**
+ * Configuration options for the Kite chat widget.
+ */
+interface KiteChatConfig {
+    /** Unique identifier for the current user */
+    userId: string;
+    /** Organization identifier */
+    orgId: string;
+    /** Backend agent API URL (defaults to http://localhost:5002) */
+    agentUrl?: string;
+    /** Current page context for the chat (e.g., 'dashboard', 'settings') */
+    currentPage?: string;
+    /** Theme mode */
+    theme?: 'light' | 'dark' | 'system';
+    /** Callback when the chat suggests navigation */
+    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.
+ */
+interface KiteChatInstance {
+    /** Mount the chat widget into a container element */
+    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.) */
+    updateConfig: (config: Partial<KiteChatConfig>) => void;
+    /** Check if the widget is currently mounted */
+    isMounted: () => boolean;
+}
+/**
+ * Create a new Kite chat widget instance.
+ *
+ * This is the primary API for embedding the chat widget.
+ * Returns an instance with explicit lifecycle control.
+ *
+ * @param config - Configuration options
+ * @returns KiteChatInstance with mount/unmount/update methods
+ *
+ * @example
+ * ```ts
+ * const chat = createKiteChat({
+ *   userId: 'user-123',
+ *   orgId: 'org-456',
+ *   onNavigate: (page) => router.push(`/${page}`)
+ * });
+ *
+ * chat.mount('#chat-container');
+ * chat.open(); // Open the side panel
+ * ```
+ */
+declare function createKiteChat(config: KiteChatConfig): KiteChatInstance;
+
+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-CFo7NUHz.d.ts

@@ -0,0 +1,254 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type Page = "dashboard" | "customers" | "payments" | "settings" | "support" | "disputes" | "radar";
+type SettingsTab = "general" | "billing" | "security" | "api" | "notifications" | "integrations";
+type NavigationTarget = {
+    page: Page;
+    subtab?: SettingsTab;
+};
+type ActionType = "updateCompanyInfo" | "addApiKey" | "addCustomer" | "enable2FA" | "disable2FA" | "changePassword" | "revokeSession" | "toggleNotification" | "connectIntegration" | "disconnectIntegration" | "addPaymentMethod" | "removePaymentMethod" | "deleteApiKey" | "addWebhook" | "updateCurrency" | "updateTimezone" | "refundPayment" | "createSubscription" | "exportCertificate" | "toggleBlockRule" | "enableBlockRule" | "disableBlockRule";
+type CompanyInfoData = {
+    companyName?: string;
+    email?: string;
+    address?: string;
+    phone?: string;
+    website?: string;
+};
+type ApiKeyData = {
+    name?: string;
+    keyId?: string;
+};
+type CustomerData = {
+    name?: string;
+    email?: string;
+    location?: string;
+    subscription?: "Starter" | "Professional" | "Enterprise";
+};
+type PasswordData = {
+    currentPassword?: string;
+    newPassword?: string;
+    confirmPassword?: string;
+};
+type NotificationData = {
+    notificationType?: "paymentReceived" | "paymentFailed" | "invoicePaid" | "monthlySummary" | "productUpdates";
+    enabled?: boolean;
+};
+type IntegrationData = {
+    integrationName?: "Slack" | "Zapier" | "Webhook";
+};
+type SessionData = {
+    sessionId?: string;
+    device?: string;
+};
+type PaymentMethodData = {
+    cardNumber?: string;
+    expiryDate?: string;
+};
+type WebhookData = {
+    url?: string;
+    name?: string;
+};
+type CurrencyData = {
+    currency?: "USD" | "EUR" | "GBP" | "JPY";
+};
+type TimezoneData = {
+    timezone?: "America/Los_Angeles" | "America/New_York" | "Europe/London" | "Asia/Tokyo";
+};
+type RefundData = {
+    transactionId?: string;
+    customer?: string;
+    amount?: string;
+    reason?: string;
+};
+type SubscriptionData = {
+    customerEmail?: string;
+    customerId?: string;
+    plan?: "Starter" | "Professional" | "Enterprise";
+    billingCycle?: "monthly" | "yearly";
+};
+type CertificateData = {
+    format?: "pdf" | "json";
+};
+type BlockRuleData = {
+    ruleId?: string;
+    ruleName?: string;
+    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 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
+ *
+ * Industry-standard SDK pattern for embedding the Kite chat widget.
+ * No globals, explicit lifecycle control, tree-shakeable.
+ *
+ * Usage:
+ * ```ts
+ * import { createKiteChat } from '@kite-copilot/chat-panel';
+ * import '@kite-copilot/chat-panel/style.css';
+ *
+ * const chat = createKiteChat({
+ *   userId: 'user-123',
+ *   orgId: 'org-456',
+ *   agentUrl: 'https://api.example.com',
+ *   onNavigate: (page) => router.push(`/${page}`),
+ * });
+ *
+ * chat.mount('#chat-container');
+ * chat.open(); // Opens the side panel
+ * chat.close(); // Closes the side panel
+ * chat.setCurrentPage('settings');
+ * chat.unmount();
+ * ```
+ */
+
+/**
+ * Configuration options for the Kite chat widget.
+ */
+interface KiteChatConfig {
+    /** Unique identifier for the current user */
+    userId: string;
+    /** Organization identifier */
+    orgId: string;
+    /** Backend agent API URL (defaults to http://localhost:5002) */
+    agentUrl?: string;
+    /** Current page context for the chat (e.g., 'dashboard', 'settings') */
+    currentPage?: string;
+    /** Theme mode */
+    theme?: 'light' | 'dark' | 'system';
+    /** Callback when the chat suggests navigation */
+    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.
+ */
+interface KiteChatInstance {
+    /** Mount the chat widget into a container element */
+    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.) */
+    updateConfig: (config: Partial<KiteChatConfig>) => void;
+    /** Check if the widget is currently mounted */
+    isMounted: () => boolean;
+}
+/**
+ * Create a new Kite chat widget instance.
+ *
+ * This is the primary API for embedding the chat widget.
+ * Returns an instance with explicit lifecycle control.
+ *
+ * @param config - Configuration options
+ * @returns KiteChatInstance with mount/unmount/update methods
+ *
+ * @example
+ * ```ts
+ * const chat = createKiteChat({
+ *   userId: 'user-123',
+ *   orgId: 'org-456',
+ *   onNavigate: (page) => router.push(`/${page}`)
+ * });
+ *
+ * chat.mount('#chat-container');
+ * chat.open(); // Open the side panel
+ * ```
+ */
+declare function createKiteChat(config: KiteChatConfig): KiteChatInstance;
+
+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 };