@channlize/react 0.1.0-alpha.1

package/dist/index.d.ts

@@ -0,0 +1,203 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { ChannlizeConfig, ChannlizeClient, CreateContactResponse, ChannlizeError, ContactFormData, ChatMessage, ChatSession } from '@channlize/core';
+export { AuthenticationError, ChannlizeConfig, ChannlizeError, ChatMessage, ChatSession, ContactFormData, CreateChatSessionResponse, CreateContactResponse, FileAttachment, RateLimitError, SendMessageResponse, ValidationError } from '@channlize/core';
+
+interface ChannlizeContextValue {
+    client: ChannlizeClient;
+    config: ChannlizeConfig;
+}
+interface ChannlizeProviderProps {
+    config: ChannlizeConfig;
+    children: ReactNode;
+}
+/**
+ * Provider component that makes Channlize client available to all child components
+ */
+declare function ChannlizeProvider({ config, children }: ChannlizeProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access the Channlize client and configuration
+ */
+declare function useChannlize(): ChannlizeContextValue;
+
+interface UseContactFormOptions {
+    onSuccess?: (response: CreateContactResponse) => void;
+    onError?: (error: ChannlizeError) => void;
+}
+interface UseContactFormReturn {
+    submit: (data: ContactFormData) => Promise<void>;
+    isSubmitting: boolean;
+    isSuccess: boolean;
+    error: ChannlizeError | null;
+    reset: () => void;
+}
+/**
+ * Hook for handling contact form submissions
+ */
+declare function useContactForm(options?: UseContactFormOptions): UseContactFormReturn;
+
+interface UseChatSessionOptions {
+    autoConnect?: boolean;
+    metadata?: Record<string, unknown>;
+    onMessage?: (message: ChatMessage) => void;
+    onError?: (error: ChannlizeError) => void;
+    sessionId?: string;
+    persistSession?: boolean;
+    storageKey?: string;
+}
+interface UseChatSessionReturn {
+    session: ChatSession | null;
+    messages: ChatMessage[];
+    isConnecting: boolean;
+    isConnected: boolean;
+    error: ChannlizeError | null;
+    sendMessage: (content: string, attachments?: File[]) => Promise<void>;
+    startSession: () => Promise<void>;
+    endSession: () => Promise<void>;
+}
+/**
+ * Hook for managing chat sessions with real-time messaging
+ */
+declare function useChatSession(options?: UseChatSessionOptions): UseChatSessionReturn;
+
+interface FormProps {
+    /** Custom fields to include in the form */
+    customFields?: Array<{
+        name: string;
+        label: string;
+        type: 'text' | 'email' | 'textarea' | 'select';
+        required?: boolean;
+        options?: string[];
+    }>;
+    /** Callback when form is successfully submitted */
+    onSuccess?: () => void;
+    /** Callback when form submission fails */
+    onError?: (error: Error) => void;
+    /** Custom CSS classes */
+    className?: string;
+    /** Custom styles for form elements */
+    styles?: {
+        form?: React.CSSProperties;
+        field?: React.CSSProperties;
+        label?: React.CSSProperties;
+        input?: React.CSSProperties;
+        textarea?: React.CSSProperties;
+        button?: React.CSSProperties;
+        error?: React.CSSProperties;
+        success?: React.CSSProperties;
+    };
+    /** Button text */
+    submitText?: string;
+    /** Success message */
+    successMessage?: string;
+}
+
+/**
+ * ContactForm component - Alias for Form component
+ * Provides a form for collecting contact information and messages
+ */
+declare function ContactForm(props: FormProps): react_jsx_runtime.JSX.Element;
+
+interface SupportChatProps extends UseChatSessionOptions {
+    /** Custom CSS classes */
+    className?: string;
+    /** Custom styles for chat elements */
+    styles?: {
+        container?: React.CSSProperties;
+        header?: React.CSSProperties;
+        messagesContainer?: React.CSSProperties;
+        message?: React.CSSProperties;
+        userMessage?: React.CSSProperties;
+        agentMessage?: React.CSSProperties;
+        inputContainer?: React.CSSProperties;
+        input?: React.CSSProperties;
+        button?: React.CSSProperties;
+        error?: React.CSSProperties;
+        timestamp?: React.CSSProperties;
+    };
+    /** Placeholder text for message input */
+    placeholder?: string;
+    /** Header title */
+    title?: string;
+    /** Button text */
+    sendButtonText?: string;
+    /** Show timestamps on messages */
+    showTimestamps?: boolean;
+    /** Allow file attachments */
+    allowAttachments?: boolean;
+}
+/**
+ * SupportChat component - Real-time chat interface
+ * Provides a complete chat UI with message history and real-time updates
+ */
+declare function SupportChat({ autoConnect, metadata, onMessage, onError, sessionId, persistSession, storageKey, className, styles, placeholder, title, sendButtonText, showTimestamps, allowAttachments, }: SupportChatProps): react_jsx_runtime.JSX.Element;
+
+interface ChannlizeChatProps {
+    /** Channlize configuration */
+    config: ChannlizeConfig;
+    /** Position of the floating button */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** Offset from edges in pixels */
+    offset?: {
+        x?: number;
+        y?: number;
+    };
+    /** Custom button element (overrides default button) */
+    buttonElement?: ReactNode;
+    /** Custom button icon (only used if buttonElement is not provided) */
+    buttonIcon?: ReactNode;
+    /** Button size in pixels */
+    buttonSize?: number;
+    /** Button colors */
+    buttonColors?: {
+        background?: string;
+        hover?: string;
+        text?: string;
+    };
+    /** Chat window props (passed to SupportChat) */
+    chatProps?: Omit<SupportChatProps, 'autoConnect'>;
+    /** Whether to start closed or open */
+    defaultOpen?: boolean;
+    /** Whether to show badge with unread count */
+    showBadge?: boolean;
+    /** Unread count (for badge) */
+    unreadCount?: number;
+    /** Custom z-index */
+    zIndex?: number;
+    /** Whether to show on mobile */
+    showOnMobile?: boolean;
+    /** Callback when chat opens */
+    onOpen?: () => void;
+    /** Callback when chat closes */
+    onClose?: () => void;
+    /** Whether to enable animations */
+    enableAnimations?: boolean;
+    /** Custom class for button container */
+    buttonClassName?: string;
+    /** Custom class for chat container */
+    chatClassName?: string;
+}
+/**
+ * ChannlizeChat - All-in-one floating chat widget with provider
+ *
+ * Drop this component anywhere in your React app for instant live chat support.
+ * Includes the provider, floating button, and chat window.
+ *
+ * @example
+ * ```tsx
+ * <ChannlizeChat
+ *   config={{
+ *     apiKey: "your-widget-key",
+ *     projectId: "your-project-id",
+ *   }}
+ *   position="bottom-right"
+ *   chatProps={{
+ *     title: "Customer Support",
+ *     placeholder: "How can we help?"
+ *   }}
+ * />
+ * ```
+ */
+declare function ChannlizeChat({ config, position, offset, buttonElement, buttonIcon, buttonSize, buttonColors, chatProps, defaultOpen, showBadge, unreadCount, zIndex, showOnMobile, onOpen, onClose, enableAnimations, buttonClassName, chatClassName, }: ChannlizeChatProps): react_jsx_runtime.JSX.Element | null;
+
+export { ChannlizeChat, ChannlizeProvider, ContactForm, SupportChat, useChannlize, useChatSession, useContactForm };