@qafka/react-native 2.0.0

package/dist/components/InputArea.js

@@ -0,0 +1,142 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputArea = InputArea;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const fontUtils_1 = require("../utils/fontUtils");
+/**
+ * InputArea Component
+ *
+ * Text input area with send button for chat messages.
+ *
+ * Features:
+ * - Multi-line text input
+ * - Character limit with counter
+ * - Send button with loading state
+ * - Auto-disable when empty or sending
+ * - Theme support
+ *
+ * @example
+ * ```tsx
+ * <InputArea
+ * theme={lightTheme}
+ * placeholder="Type a message..."
+ * onSend={(msg) => handleSend(msg)}
+ * isSending={loading}
+ * maxLength={500}
+ * showCharacterCount
+ * />
+ * ```
+ */
+function InputArea({ theme, placeholder = 'Type a message...', onSend, isSending = false, maxLength = 500, disabled = false, showCharacterCount = false, }) {
+    const [text, setText] = (0, react_1.useState)('');
+    const handleSend = () => {
+        const trimmedText = text?.trim?.() || '';
+        if (!trimmedText || isSending || disabled)
+            return;
+        onSend(trimmedText);
+        setText('');
+    };
+    const canSend = text.trim().length > 0 && !isSending && !disabled;
+    const containerStyle = {
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.sm,
+        backgroundColor: theme.colors.background,
+        borderTopWidth: 1,
+        borderTopColor: theme.colors.border,
+    };
+    const inputContainerStyle = {
+        flex: 1,
+        backgroundColor: theme.colors.inputBackground,
+        borderRadius: theme.borderRadius.xl,
+        borderWidth: 1,
+        borderColor: theme.colors.inputBorder,
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.sm,
+        marginRight: theme.spacing.sm,
+        maxHeight: 100,
+    };
+    const inputStyle = {
+        fontSize: theme.typography.fontSize.md,
+        color: theme.colors.text,
+        lineHeight: theme.typography.fontSize.md * theme.typography.lineHeight.normal,
+        minHeight: 20,
+        fontFamily: (0, fontUtils_1.getFontFamily)(theme, 'regular'),
+    };
+    const sendButtonStyle = {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: canSend
+            ? theme.colors.buttonBackground
+            : theme.colors.buttonDisabled,
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...theme.shadows.small,
+    };
+    const sendButtonTextStyle = {
+        fontSize: theme.typography.fontSize.lg,
+        color: theme.colors.buttonText,
+        fontFamily: (0, fontUtils_1.getFontFamily)(theme, 'medium'),
+    };
+    const charCountStyle = {
+        fontSize: theme.typography.fontSize.xs,
+        color: text.length >= maxLength
+            ? theme.colors.error
+            : theme.colors.textSecondary,
+        marginTop: theme.spacing.xs / 2,
+        marginLeft: theme.spacing.sm,
+        fontFamily: (0, fontUtils_1.getFontFamily)(theme, 'regular'),
+    };
+    return (<react_native_1.View>
+ <react_native_1.View style={containerStyle}>
+ <react_native_1.View style={inputContainerStyle}>
+ <react_native_1.TextInput style={inputStyle} value={text} onChangeText={setText} placeholder={placeholder} placeholderTextColor={theme.colors.inputPlaceholder} multiline maxLength={maxLength} editable={!disabled && !isSending} returnKeyType="default" blurOnSubmit={false}/>
+ </react_native_1.View>
+
+ <react_native_1.TouchableOpacity style={sendButtonStyle} onPress={handleSend} disabled={!canSend} activeOpacity={0.7}>
+ {isSending ? (<react_native_1.ActivityIndicator color={theme.colors.buttonText} size="small"/>) : (<react_native_1.Text style={sendButtonTextStyle}>↑</react_native_1.Text>)}
+ </react_native_1.TouchableOpacity>
+ </react_native_1.View>
+
+ {/* Character counter */}
+ {showCharacterCount && text.length > 0 && (<react_native_1.Text style={charCountStyle}>
+ {text.length} / {maxLength}
+ </react_native_1.Text>)}
+ </react_native_1.View>);
+}

package/dist/components/MarkdownText.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TextStyle } from 'react-native';
+import { Theme } from '../themes/types';
+interface MarkdownTextProps {
+    children: string;
+    style: TextStyle;
+    theme: Theme;
+    isUserMessage: boolean;
+}
+/**
+ * Enhanced Markdown Renderer
+ * Supports: headings (###), **bold**, *italic*, `code`, ```code blocks```, links, bullet lists, numbered lists
+ */
+export declare function MarkdownText({ children, style, theme, isUserMessage, }: MarkdownTextProps): React.JSX.Element;
+export {};

package/dist/components/MarkdownText.js

@@ -0,0 +1,283 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkdownText = MarkdownText;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const fontUtils_1 = require("../utils/fontUtils");
+/**
+ * Enhanced Markdown Renderer
+ * Supports: headings (###), **bold**, *italic*, `code`, ```code blocks```, links, bullet lists, numbered lists
+ */
+function MarkdownText({ children, style, theme, isUserMessage, }) {
+    // Extract base styles (without fontWeight/fontStyle that might interfere with markdown)
+    const baseTextStyle = {
+        color: style.color,
+        fontSize: style.fontSize,
+        lineHeight: style.lineHeight,
+        fontFamily: (0, fontUtils_1.getFontFamily)(theme, 'regular'),
+    };
+    // Process line by line for block elements
+    const processLine = (line, lineIndex) => {
+        // Check for headings (### Heading)
+        const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
+        if (headingMatch) {
+            const level = headingMatch[1].length;
+            const headingText = headingMatch[2];
+            const headingSize = style.fontSize + (6 - level) * 2;
+            return (<react_native_1.Text key={`heading-${lineIndex}`} style={[
+                    baseTextStyle,
+                    {
+                        fontSize: headingSize,
+                        fontWeight: '700',
+                        marginTop: theme.spacing.sm,
+                        marginBottom: theme.spacing.xs,
+                        fontFamily: (0, fontUtils_1.getFontFamily)(theme, 'bold'),
+                    },
+                ]}>
+ {parseInlineMarkdown(headingText)}
+ </react_native_1.Text>);
+        }
+        // Check for bullet lists (- item or * item)
+        const bulletMatch = line.match(/^[\-\*]\s+(.+)$/);
+        if (bulletMatch) {
+            return (<react_native_1.View key={`bullet-${lineIndex}`} style={{
+                    flexDirection: 'row',
+                    marginBottom: theme.spacing.xs / 2,
+                    paddingLeft: theme.spacing.md,
+                }}>
+ <react_native_1.Text style={[baseTextStyle, { marginRight: theme.spacing.xs }]}>
+ •
+ </react_native_1.Text>
+ <react_native_1.Text style={[baseTextStyle, { flexShrink: 1 }]}>
+ {parseInlineMarkdown(bulletMatch[1])}
+ </react_native_1.Text>
+ </react_native_1.View>);
+        }
+        // Check for numbered lists (1. item)
+        const numberedMatch = line.match(/^(\d+)\.\s+(.+)$/);
+        if (numberedMatch) {
+            return (<react_native_1.View key={`numbered-${lineIndex}`} style={{
+                    flexDirection: 'row',
+                    marginBottom: theme.spacing.xs / 2,
+                    paddingLeft: theme.spacing.md,
+                }}>
+ <react_native_1.Text style={[baseTextStyle, { marginRight: theme.spacing.xs }]}>
+ {numberedMatch[1]}.
+ </react_native_1.Text>
+ <react_native_1.Text style={[baseTextStyle, { flexShrink: 1 }]}>
+ {parseInlineMarkdown(numberedMatch[2])}
+ </react_native_1.Text>
+ </react_native_1.View>);
+        }
+        // Check for code blocks (```code```)
+        if (line.startsWith('```')) {
+            return null; // Handle code blocks separately
+        }
+        // Regular paragraph
+        return (<react_native_1.Text key={`line-${lineIndex}`} style={baseTextStyle}>
+ {parseInlineMarkdown(line)}
+ </react_native_1.Text>);
+    };
+    const parseInlineMarkdown = (text) => {
+        const elements = [];
+        let currentIndex = 0;
+        let key = 0;
+        // Regex patterns for inline formatting
+        // Process in order: bold first, then italic (to avoid conflicts)
+        const patterns = {
+            bold: /\*\*(.+?)\*\*/g,
+            italic: /(?<!\*)\*(?!\*)(.+?)(?<!\*)\*(?!\*)/g, // Negative lookahead/behind to avoid **
+            code: /`(.+?)`/g,
+            link: /\[(.+?)\]\((.+?)\)/g,
+        };
+        // Find all matches
+        const allMatches = [];
+        // Bold - process first
+        let boldMatch;
+        while ((boldMatch = patterns.bold.exec(text)) !== null) {
+            allMatches.push({
+                index: boldMatch.index,
+                length: boldMatch[0].length,
+                type: 'bold',
+                content: boldMatch[1],
+            });
+        }
+        // Italic - check if not overlapping with bold
+        const italicPattern = /\*(.+?)\*/g;
+        let italicMatch;
+        while ((italicMatch = italicPattern.exec(text)) !== null) {
+            // Check if this position is inside a bold match
+            const isInsideBold = allMatches.some((m) => m.type === 'bold' &&
+                italicMatch.index >= m.index &&
+                italicMatch.index < m.index + m.length);
+            // Also check if preceded or followed by another asterisk (bold marker)
+            const prevChar = text[italicMatch.index - 1];
+            const nextChar = text[italicMatch.index + italicMatch[0].length];
+            const isBoldMarker = prevChar === '*' || nextChar === '*';
+            if (!isInsideBold && !isBoldMarker) {
+                allMatches.push({
+                    index: italicMatch.index,
+                    length: italicMatch[0].length,
+                    type: 'italic',
+                    content: italicMatch[1],
+                });
+            }
+        }
+        // Code
+        patterns.code.lastIndex = 0;
+        let codeMatch;
+        while ((codeMatch = patterns.code.exec(text)) !== null) {
+            allMatches.push({
+                index: codeMatch.index,
+                length: codeMatch[0].length,
+                type: 'code',
+                content: codeMatch[1],
+            });
+        }
+        // Links
+        patterns.link.lastIndex = 0;
+        let linkMatch;
+        while ((linkMatch = patterns.link.exec(text)) !== null) {
+            allMatches.push({
+                index: linkMatch.index,
+                length: linkMatch[0].length,
+                type: 'link',
+                content: linkMatch[1],
+                url: linkMatch[2],
+            });
+        }
+        // Sort by index
+        allMatches.sort((a, b) => a.index - b.index);
+        // Build elements
+        allMatches.forEach((item) => {
+            // Add text before match
+            if (currentIndex < item.index) {
+                const plainText = text.substring(currentIndex, item.index);
+                elements.push(<react_native_1.Text key={`text-${key++}`} style={baseTextStyle}>
+ {plainText}
+ </react_native_1.Text>);
+            }
+            // Add formatted text
+            switch (item.type) {
+                case 'bold':
+                    elements.push(<react_native_1.Text key={`bold-${key++}`} style={[
+                            baseTextStyle,
+                            {
+                                fontWeight: 'bold',
+                                fontFamily: (0, fontUtils_1.getFontFamily)(theme, 'bold'),
+                            },
+                        ]}>
+ {item.content}
+ </react_native_1.Text>);
+                    break;
+                case 'italic':
+                    elements.push(<react_native_1.Text key={`italic-${key++}`} style={[
+                            baseTextStyle,
+                            {
+                                fontStyle: 'italic',
+                                fontFamily: (0, fontUtils_1.getFontFamily)(theme, 'italic'),
+                            },
+                        ]}>
+ {item.content}
+ </react_native_1.Text>);
+                    break;
+                case 'code':
+                    elements.push(<react_native_1.Text key={`code-${key++}`} style={[
+                            baseTextStyle,
+                            {
+                                backgroundColor: isUserMessage
+                                    ? 'rgba(255,255,255,0.2)'
+                                    : theme.colors.surface,
+                                paddingHorizontal: theme.spacing.xs,
+                                paddingVertical: 2,
+                                borderRadius: theme.borderRadius.sm,
+                                fontFamily: (0, fontUtils_1.getFontFamily)(theme, 'code') || 'Courier',
+                            },
+                        ]}>
+ {item.content}
+ </react_native_1.Text>);
+                    break;
+                case 'link':
+                    elements.push(<react_native_1.Text key={`link-${key++}`} style={[
+                            baseTextStyle,
+                            {
+                                color: isUserMessage
+                                    ? baseTextStyle.color
+                                    : theme.colors.primary,
+                                textDecorationLine: 'underline',
+                            },
+                        ]}>
+ {item.content}
+ </react_native_1.Text>);
+                    break;
+            }
+            currentIndex = item.index + item.length;
+        });
+        // Add remaining text
+        if (currentIndex < text.length) {
+            const remainingText = text.substring(currentIndex);
+            elements.push(<react_native_1.Text key={`text-${key++}`} style={baseTextStyle}>
+ {remainingText}
+ </react_native_1.Text>);
+        }
+        return elements.length > 0 ? (elements) : (<react_native_1.Text style={baseTextStyle}>{text}</react_native_1.Text>);
+    };
+    // Split into lines and process
+    const lines = children.split('\n');
+    const processedLines = [];
+    let codeBlockLines = [];
+    let inCodeBlock = false;
+    let codeBlockKey = 0;
+    lines.forEach((line, index) => {
+        // Handle code blocks
+        if (line.trim().startsWith('```')) {
+            if (!inCodeBlock) {
+                // Start code block
+                inCodeBlock = true;
+                codeBlockLines = [];
+            }
+            else {
+                // End code block
+                inCodeBlock = false;
+                if (codeBlockLines.length > 0) {
+                    processedLines.push(<react_native_1.View key={`codeblock-${codeBlockKey++}`} style={{
+                            backgroundColor: isUserMessage
+                                ? 'rgba(255,255,255,0.2)'
+                                : theme.colors.surface,
+                            padding: theme.spacing.sm,
+                            borderRadius: theme.borderRadius.sm,
+                            marginVertical: theme.spacing.xs,
+                        }}>
+ <react_native_1.Text style={[
+                            baseTextStyle,
+                            {
+                                fontFamily: (0, fontUtils_1.getFontFamily)(theme, 'code') || 'Courier',
+                                fontSize: theme.typography.fontSize.sm,
+                            },
+                        ]}>
+ {codeBlockLines.join('\n')}
+ </react_native_1.Text>
+ </react_native_1.View>);
+                }
+            }
+            return;
+        }
+        if (inCodeBlock) {
+            codeBlockLines.push(line);
+            return;
+        }
+        // Process regular line
+        const processed = processLine(line, index);
+        if (processed) {
+            processedLines.push(processed);
+        }
+        // Add spacing between lines
+        if (index < lines.length - 1 && line.trim() !== '') {
+            processedLines.push(<react_native_1.View key={`spacing-${index}`} style={{ height: theme.spacing.xs / 2 }}/>);
+        }
+    });
+    return <react_native_1.View>{processedLines}</react_native_1.View>;
+}

package/dist/components/MessageBubble.d.ts

@@ -0,0 +1,134 @@
+import React from 'react';
+import { Theme } from '../themes/types';
+import { ComponentRegistry } from '../types/components';
+import { NavigationButtonProps } from './Qafka.types';
+import { ExternalSuggestion } from '../types/external-navigation';
+export interface MessageBubbleProps {
+    /**
+    * Message content
+    */
+    message: string;
+    /**
+    * Message role - user or AI assistant
+    */
+    role: 'user' | 'assistant';
+    /**
+    * Message timestamp
+    */
+    timestamp: Date;
+    /**
+    * Theme configuration
+    */
+    theme: Theme;
+    /**
+    * Show timestamp below message
+    */
+    showTimestamp?: boolean;
+    /**
+    * Action buttons to display below message
+    */
+    actions?: Array<{
+        id: string;
+        type: 'navigation' | 'api' | 'custom';
+        label: string;
+        icon?: string;
+        data?: any;
+        style?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning';
+    }>;
+    /**
+    * Callback when action button is pressed
+    */
+    onActionPress?: (action: any) => void;
+    /**
+    * Component registry for rendering tool responses
+    */
+    componentRegistry?: ComponentRegistry;
+    /**
+    * Custom Navigation Button Component
+    * Overrides the default navigation button
+    */
+    NavigationButtonComponent?: React.ComponentType<NavigationButtonProps>;
+    /**
+    * Tool definition (if this message contains tool result)
+    */
+    toolDefinition?: {
+        key: string;
+        response: {
+            type: 'list' | 'card' | 'detail' | 'table';
+            dataPath?: string;
+            itemComponent?: string;
+            maxItems?: number;
+            fallbackMessage?: string;
+            layout?: 'vertical' | 'horizontal' | 'custom';
+            position?: 'before' | 'after';
+        };
+    };
+    /**
+    * Tool result data (if this message contains tool result)
+    */
+    toolResultData?: any;
+    /**
+    * Action execution results to display as badges
+    */
+    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, app store, …)
+    * to render as tappable buttons below the message.
+    */
+    externalSuggestions?: ExternalSuggestion[];
+    /**
+    * Callback when user taps an external suggestion button.
+    */
+    onExternalPress?: (suggestion: ExternalSuggestion) => void;
+    /**
+    * Card Template envelope to render below the message bubble.
+    * Populated when the tool's `uiTemplateType === "card"`.
+    */
+    card?: {
+        templateId: string;
+        templateSlug: string;
+        definition: any;
+        data: any;
+    };
+    /**
+    * Host callbacks invoked from card CTAs.
+    * Forwarded directly to the CardRenderer.
+    */
+    cardHostCallbacks?: import('../cards/cta/types').CardCTAHostCallbacks;
+    /**
+    * CTA telemetry / lifecycle hooks.
+    */
+    cardLifecycle?: import('../cards/cta/types').CardCTALifecycle;
+}
+/**
+ * MessageBubble Component
+ *
+ * Displays a chat message bubble with support for:
+ * - User and AI messages with different styles
+ * - Timestamps
+ * - Theming support
+ *
+ * @example
+ * ```tsx
+ * <MessageBubble
+ * message="Hello, how can I help?"
+ * role="assistant"
+ * timestamp={new Date()}
+ * theme={lightTheme}
+ * showTimestamp
+ * />
+ * ```
+ */
+export declare function MessageBubble({ message, role, timestamp, theme, showTimestamp, actions, onActionPress, componentRegistry, toolDefinition, toolResultData, NavigationButtonComponent, actionResults, completedSteps, externalSuggestions, onExternalPress, card, cardHostCallbacks, cardLifecycle, }: MessageBubbleProps): React.JSX.Element;