@qafka/react-native 2.0.0

package/dist/themes/dark.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.darkTheme = void 0;
+/**
+ * Dark theme configuration
+ */
+exports.darkTheme = {
+    name: 'dark',
+    colors: {
+        // Primary colors - iOS blue (adjusted for dark mode)
+        primary: '#0A84FF',
+        primaryLight: '#64D2FF',
+        primaryDark: '#0051D5',
+        // Background colors
+        background: '#000000',
+        surface: '#1C1C1E',
+        overlay: 'rgba(0, 0, 0, 0.7)',
+        // Text colors
+        text: '#FFFFFF',
+        textSecondary: '#8E8E93',
+        textLight: '#48484A',
+        textInverse: '#000000',
+        // Message bubble colors
+        userBubble: '#0A84FF',
+        userBubbleText: '#FFFFFF',
+        aiBubble: '#2C2C2E',
+        aiBubbleText: '#FFFFFF',
+        // UI element colors
+        border: '#38383A',
+        divider: '#2C2C2E',
+        error: '#FF453A',
+        success: '#32D74B',
+        warning: '#FF9F0A',
+        info: '#64D2FF',
+        // Input colors
+        inputBackground: '#1C1C1E',
+        inputBorder: '#38383A',
+        inputPlaceholder: '#8E8E93',
+        // Button colors
+        buttonBackground: '#0A84FF',
+        buttonText: '#FFFFFF',
+        buttonDisabled: '#48484A',
+        // Badge/notification
+        badge: '#FF453A',
+        badgeText: '#FFFFFF',
+    },
+    spacing: {
+        xs: 4,
+        sm: 8,
+        md: 16,
+        lg: 24,
+        xl: 32,
+        xxl: 48,
+    },
+    borderRadius: {
+        sm: 8,
+        md: 12,
+        lg: 16,
+        xl: 24,
+        full: 9999,
+    },
+    typography: {
+        fontFamily: 'System',
+        fontSize: {
+            xs: 12,
+            sm: 14,
+            md: 16,
+            lg: 18,
+            xl: 20,
+            xxl: 24,
+        },
+        fontWeight: {
+            regular: '400',
+            medium: '500',
+            semibold: '600',
+            bold: '700',
+        },
+        lineHeight: {
+            tight: 1.2,
+            normal: 1.5,
+            relaxed: 1.8,
+        },
+    },
+    shadows: {
+        small: {
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.3,
+            shadowRadius: 2,
+            elevation: 2,
+        },
+        medium: {
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.4,
+            shadowRadius: 4,
+            elevation: 4,
+        },
+        large: {
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 4 },
+            shadowOpacity: 0.5,
+            shadowRadius: 8,
+            elevation: 8,
+        },
+    },
+    animation: {
+        duration: {
+            fast: 150,
+            normal: 300,
+            slow: 500,
+        },
+        easing: {
+            easeIn: 'ease-in',
+            easeOut: 'ease-out',
+            easeInOut: 'ease-in-out',
+        },
+    },
+    messages: {
+        user: {
+            padding: 12,
+            maxWidth: 70, // 70% of container width
+        },
+        ai: {
+            padding: 12,
+            maxWidth: 70, // 70% of container width
+        },
+    },
+};

package/dist/themes/index.d.ts

@@ -0,0 +1,12 @@
+export * from './types';
+export * from './light';
+export * from './dark';
+import { Theme } from './types';
+/**
+ * Get theme by name
+ */
+export declare function getTheme(themeName: 'light' | 'dark'): Theme;
+/**
+ * Default theme
+ */
+export declare const defaultTheme: Theme;

package/dist/themes/index.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultTheme = void 0;
+exports.getTheme = getTheme;
+__exportStar(require("./types"), exports);
+__exportStar(require("./light"), exports);
+__exportStar(require("./dark"), exports);
+const light_1 = require("./light");
+const dark_1 = require("./dark");
+/**
+ * Get theme by name
+ */
+function getTheme(themeName) {
+    return themeName === 'dark' ? dark_1.darkTheme : light_1.lightTheme;
+}
+/**
+ * Default theme
+ */
+exports.defaultTheme = light_1.lightTheme;

package/dist/themes/light.d.ts

@@ -0,0 +1,5 @@
+import { Theme } from './types';
+/**
+ * Light theme configuration
+ */
+export declare const lightTheme: Theme;

package/dist/themes/light.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lightTheme = void 0;
+/**
+ * Light theme configuration
+ */
+exports.lightTheme = {
+    name: 'light',
+    colors: {
+        // Primary colors - iOS blue
+        primary: '#007AFF',
+        primaryLight: '#5AC8FA',
+        primaryDark: '#0051D5',
+        // Background colors
+        background: '#FFFFFF',
+        surface: '#F2F2F7',
+        overlay: 'rgba(0, 0, 0, 0.5)',
+        // Text colors
+        text: '#000000',
+        textSecondary: '#8E8E93',
+        textLight: '#C7C7CC',
+        textInverse: '#FFFFFF',
+        // Message bubble colors
+        userBubble: '#007AFF',
+        userBubbleText: '#FFFFFF',
+        aiBubble: '#E9E9EB',
+        aiBubbleText: '#000000',
+        // UI element colors
+        border: '#C6C6C8',
+        divider: '#E5E5EA',
+        error: '#FF3B30',
+        success: '#34C759',
+        warning: '#FF9500',
+        info: '#5AC8FA',
+        // Input colors
+        inputBackground: '#F2F2F7',
+        inputBorder: '#C6C6C8',
+        inputPlaceholder: '#8E8E93',
+        // Button colors
+        buttonBackground: '#007AFF',
+        buttonText: '#FFFFFF',
+        buttonDisabled: '#C7C7CC',
+        // Badge/notification
+        badge: '#FF3B30',
+        badgeText: '#FFFFFF',
+    },
+    spacing: {
+        xs: 4,
+        sm: 8,
+        md: 16,
+        lg: 24,
+        xl: 32,
+        xxl: 48,
+    },
+    borderRadius: {
+        sm: 8,
+        md: 12,
+        lg: 16,
+        xl: 24,
+        full: 9999,
+    },
+    typography: {
+        fontFamily: 'System',
+        fontSize: {
+            xs: 12,
+            sm: 14,
+            md: 16,
+            lg: 18,
+            xl: 20,
+            xxl: 24,
+        },
+        fontWeight: {
+            regular: '400',
+            medium: '500',
+            semibold: '600',
+            bold: '700',
+        },
+        lineHeight: {
+            tight: 1.2,
+            normal: 1.5,
+            relaxed: 1.8,
+        },
+    },
+    shadows: {
+        small: {
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.1,
+            shadowRadius: 2,
+            elevation: 2,
+        },
+        medium: {
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.15,
+            shadowRadius: 4,
+            elevation: 4,
+        },
+        large: {
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 4 },
+            shadowOpacity: 0.2,
+            shadowRadius: 8,
+            elevation: 8,
+        },
+    },
+    animation: {
+        duration: {
+            fast: 150,
+            normal: 300,
+            slow: 500,
+        },
+        easing: {
+            easeIn: 'ease-in',
+            easeOut: 'ease-out',
+            easeInOut: 'ease-in-out',
+        },
+    },
+    messages: {
+        user: {
+            padding: 12,
+            maxWidth: 70, // 70% of container width
+        },
+        ai: {
+            padding: 12,
+            maxWidth: 70, // 70% of container width
+        },
+    },
+};

package/dist/themes/types.d.ts

@@ -0,0 +1,155 @@
+/**
+ * Theme types for QafkaSDK
+ */
+export interface ThemeColors {
+    primary: string;
+    primaryLight: string;
+    primaryDark: string;
+    background: string;
+    surface: string;
+    overlay: string;
+    text: string;
+    textSecondary: string;
+    textLight: string;
+    textInverse: string;
+    userBubble: string;
+    userBubbleText: string;
+    aiBubble: string;
+    aiBubbleText: string;
+    border: string;
+    divider: string;
+    error: string;
+    success: string;
+    warning: string;
+    info: string;
+    inputBackground: string;
+    inputBorder: string;
+    inputPlaceholder: string;
+    buttonBackground: string;
+    buttonText: string;
+    buttonDisabled: string;
+    badge: string;
+    badgeText: string;
+}
+export interface ThemeSpacing {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+}
+export interface ThemeBorderRadius {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    full: number;
+}
+export interface ThemeTypography {
+    fontFamily: string;
+    fontSize: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        xxl: number;
+    };
+    /**
+    * Optional mapping for specific font families per weight/style.
+    * Useful for Android where font weights might need specific font files.
+    */
+    fonts?: {
+        regular?: string;
+        medium?: string;
+        semibold?: string;
+        bold?: string;
+        italic?: string;
+        light?: string;
+        code?: string;
+    };
+    fontWeight: {
+        regular: '400';
+        medium: '500';
+        semibold: '600';
+        bold: '700';
+    };
+    lineHeight: {
+        tight: number;
+        normal: number;
+        relaxed: number;
+    };
+}
+export interface ThemeShadows {
+    small: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    medium: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    large: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+}
+export interface ThemeAnimation {
+    duration: {
+        fast: number;
+        normal: number;
+        slow: number;
+    };
+    easing: {
+        easeIn: string;
+        easeOut: string;
+        easeInOut: string;
+    };
+}
+export interface ThemeMessages {
+    user: {
+        padding: number;
+        maxWidth: number;
+    };
+    ai: {
+        padding: number;
+        maxWidth: number;
+    };
+}
+export interface Theme {
+    name: 'light' | 'dark';
+    colors: ThemeColors;
+    spacing: ThemeSpacing;
+    borderRadius: ThemeBorderRadius;
+    typography: ThemeTypography;
+    shadows: ThemeShadows;
+    animation: ThemeAnimation;
+    messages?: ThemeMessages;
+}
+/**
+ * Partial theme type for overrides
+ * Allows specifying only the properties you want to change
+ */
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+export type ThemeOverride = DeepPartial<Theme>;

package/dist/themes/types.js

@@ -0,0 +1,5 @@
+"use strict";
+/**
+ * Theme types for QafkaSDK
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types/chat.d.ts

@@ -0,0 +1,126 @@
+/**
+ * Chat and messaging related types
+ */
+import { NavigationSuggestion } from './navigation';
+import { ExternalSuggestion } from './external-navigation';
+/**
+ * Message role
+ */
+export type MessageRole = 'user' | 'assistant' | 'system';
+/**
+ * Action button types
+ */
+export type ActionButtonType = 'navigation' | 'custom';
+/**
+ * Action button for interactive messages
+ */
+export interface ActionButton {
+    id: string;
+    type: ActionButtonType;
+    label: string;
+    icon?: string;
+    data?: any;
+    style?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning';
+}
+/**
+ * Chat message
+ */
+export interface ChatMessage {
+    id: string;
+    role: MessageRole;
+    text: string;
+    content: string;
+    timestamp: Date;
+    isStreaming?: boolean;
+    actions?: ActionButton[];
+    metadata?: {
+        isInitialMessage?: boolean;
+    };
+    /** Action execution results attached to this message */
+    actionResults?: Array<{
+        actionType: string;
+        success: boolean;
+        message: string;
+    }>;
+    /** Completed steps for multi-step tool flows */
+    completedSteps?: Array<{
+        tool: string;
+        step: string;
+        data: Record<string, any>;
+    }>;
+    /**
+    * External suggestions (WhatsApp, phone, map, etc.) attached to this
+    * assistant message.
+    */
+    externalSuggestions?: ExternalSuggestion[];
+    toolResponse?: {
+        toolKey: string;
+        data: any;
+        tool: {
+            key: string;
+            name: string;
+            response: {
+                type: 'list' | 'card' | 'detail' | 'table';
+                dataPath?: string;
+                itemComponent?: string;
+                maxItems?: number;
+                fallbackMessage?: string;
+            };
+        };
+    };
+    /**
+    * Optional card payload rendered alongside this message when a tool returns
+    * a card-type response. Rendered automatically by the widget; for headless
+    * usage the payload can also be passed directly to `<CardRenderer />`.
+    */
+    card?: {
+        templateId: string;
+        templateSlug: string;
+        /** CardDefinition — opaque to types.ts to avoid circular import. */
+        definition: any;
+        data: any;
+    };
+}
+/**
+ * Chat response from SDK or API
+ */
+export interface ChatResponse {
+    id: string;
+    text?: string;
+    timestamp: Date;
+    navigationSuggestion?: NavigationSuggestion;
+    /** External suggestions (WhatsApp, phone, map, etc.) attached to the assistant reply. */
+    externalSuggestions?: ExternalSuggestion[];
+}
+/**
+ * SDK-supplied context attached to every backend request.
+ *
+ * Only universal temporal fields are auto-collected. Pass anything else
+ * (platform, device, user metadata) via `<Qafka context={...} />`.
+ */
+export interface SdkContext {
+    dateTime: string;
+    timezone: string;
+    locale?: string;
+}
+export interface ChatRequest {
+    message: string;
+    sessionId: string;
+    conversationId?: string;
+    subProjectId?: string;
+    /**
+     * Explicit end-user identifier. Always a coerced/validated string by
+     * the time it leaves the SDK (the public `endUserId` prop accepts
+     * `string | number`; `validate-end-user.ts` normalises).
+     */
+    endUserId?: string;
+    /** Opt-in structured profile data for operator dashboards and tool action templates. */
+    endUserData?: Record<string, unknown>;
+    context?: {
+        currentRoute?: string;
+        previousMessages?: number;
+        metadata?: Record<string, any>;
+    };
+    sdkContext?: SdkContext;
+    isInitialMessage?: boolean;
+}

package/dist/types/chat.js

@@ -0,0 +1,5 @@
+"use strict";
+/**
+ * Chat and messaging related types
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types/components.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Component Registry types for Tool Registry
+ */
+/**
+ * Props passed to custom components
+ */
+export interface ToolComponentProps {
+    /**
+    * The data item to render (from API response)
+    */
+    data: any;
+    /**
+    * Tool definition (includes response config)
+    */
+    tool?: {
+        key: string;
+        response: {
+            type: 'list' | 'card' | 'detail' | 'table';
+            dataPath?: string;
+            itemComponent?: string;
+            maxItems?: number;
+            fallbackMessage?: string;
+        };
+    };
+    /**
+    * Theme object for styling
+    */
+    theme?: any;
+    /**
+    * Action callback for interactive elements
+    */
+    onAction?: (actionType: string, data: any) => void;
+}
+/**
+ * React Component Type (simple function component)
+ */
+export type ComponentType<P = any> = (props: P) => any;
+/**
+ * Component registry - maps component names to React components
+ */
+export interface ComponentRegistry {
+    [componentName: string]: ComponentType<ToolComponentProps>;
+}
+/**
+ * Default component names
+ */
+export declare enum DefaultComponents {
+    Card = "DefaultCard",
+    List = "DefaultList",
+    Detail = "DefaultDetail",
+    Table = "DefaultTable"
+}
+/**
+ * Tool response render type
+ */
+export type ToolResponseType = 'list' | 'card' | 'detail' | 'table' | 'raw';

package/dist/types/components.js

@@ -0,0 +1,16 @@
+"use strict";
+/**
+ * Component Registry types for Tool Registry
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultComponents = void 0;
+/**
+ * Default component names
+ */
+var DefaultComponents;
+(function (DefaultComponents) {
+    DefaultComponents["Card"] = "DefaultCard";
+    DefaultComponents["List"] = "DefaultList";
+    DefaultComponents["Detail"] = "DefaultDetail";
+    DefaultComponents["Table"] = "DefaultTable";
+})(DefaultComponents || (exports.DefaultComponents = DefaultComponents = {}));

package/dist/types/external-navigation.d.ts

@@ -0,0 +1,19 @@
+/**
+ * External Navigation — SDK types.
+ *
+ * Describes external destinations (WhatsApp, phone, map, app store, etc.)
+ * that buttons under chat messages can redirect to outside the host app.
+ */
+export type ExternalType = 'whatsapp' | 'phone' | 'sms' | 'email' | 'website' | 'map' | 'app_store' | 'social' | 'deeplink';
+/**
+ * External suggestion emitted by the backend via the
+ * `external_navigation` SSE event after each assistant message.
+ */
+export interface ExternalSuggestion {
+    id: string;
+    type: ExternalType;
+    label: string;
+    icon: string;
+    url: string;
+    fallbackUrl?: string;
+}