@worktual/react-native-ai-bot 1.0.0

package/README.md

@@ -0,0 +1,136 @@
+# @worktual/react-native-ai-bot
+
+Embeddable AI chatbot for React Native applications. Add a fully-featured AI assistant to your app with just a few lines of code.
+
+## Installation
+
+```bash
+npm install @worktual/react-native-ai-bot
+```
+
+### Peer Dependencies
+
+Make sure these are installed in your project:
+
+```bash
+npm install react-native-webview react-native-safe-area-context
+```
+
+For iOS:
+```bash
+cd ios && pod install
+```
+
+## Quick Start
+
+```tsx
+import React from "react";
+import { WorktualAIBot } from "@worktual/react-native-ai-bot";
+
+const ChatBotScreen = ({ navigation }) => {
+  return (
+    <WorktualAIBot
+      webchatId="YOUR_WEBCHAT_ID"
+      onClose={() => navigation.goBack()}
+    />
+  );
+};
+
+export default ChatBotScreen;
+```
+
+Register it as a screen in your navigator:
+
+```tsx
+<Stack.Screen name="ChatBot" component={ChatBotScreen} />
+```
+
+Then navigate to it from anywhere (e.g. a floating button):
+
+```tsx
+<TouchableOpacity onPress={() => navigation.navigate("ChatBot")}>
+  <Text>Open AI Chat</Text>
+</TouchableOpacity>
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `webchatId` | `string` | Yes | — | Your unique webchat ID provided by Worktual |
+| `onClose` | `() => void` | Yes | — | Called when the chat ends (navigate back / dismiss) |
+| `baseUrl` | `string` | No | Worktual production URL | Custom bot URL if self-hosted |
+| `loadingTitle` | `string` | No | `"AI Assistant"` | Title shown on loading screen |
+| `loadingSubtitle` | `string` | No | `"Loading your chat..."` | Subtitle shown on loading screen |
+| `primaryColor` | `string` | No | `"#575CFF"` | Colour for progress bar & spinner |
+| `loadingBackground` | `string` | No | `"#f8f9fb"` | Loading screen background colour |
+| `maxLoadTime` | `number` | No | `6000` | Max ms to wait before force-showing chat |
+| `onReady` | `() => void` | No | — | Called when chat content is fully loaded |
+| `onMessage` | `(data) => void` | No | — | Called on every message from the chat |
+
+## Customisation Examples
+
+### Custom branding
+
+```tsx
+<WorktualAIBot
+  webchatId="YOUR_WEBCHAT_ID"
+  onClose={() => navigation.goBack()}
+  loadingTitle="Support Chat"
+  loadingSubtitle="Connecting to an agent..."
+  primaryColor="#FF6B00"
+  loadingBackground="#FFF8F0"
+/>
+```
+
+### Inside a Modal
+
+```tsx
+import { Modal } from "react-native";
+
+const App = () => {
+  const [showBot, setShowBot] = useState(false);
+
+  return (
+    <>
+      <Button title="Chat" onPress={() => setShowBot(true)} />
+      <Modal visible={showBot} animationType="slide">
+        <WorktualAIBot
+          webchatId="YOUR_WEBCHAT_ID"
+          onClose={() => setShowBot(false)}
+        />
+      </Modal>
+    </>
+  );
+};
+```
+
+### Listen for events
+
+```tsx
+<WorktualAIBot
+  webchatId="YOUR_WEBCHAT_ID"
+  onClose={() => navigation.goBack()}
+  onReady={() => console.log("Bot is ready!")}
+  onMessage={(data) => console.log("Bot event:", data)}
+/>
+```
+
+## How It Works
+
+1. Client taps a button → navigates to the bot screen
+2. A branded loading screen appears (with animated progress bar)
+3. The chat loads behind the loading screen
+4. Once chat content is rendered, the loader fades out smoothly
+5. When the user closes the chat (via the bot's close button), `onClose` is called
+
+## Requirements
+
+- React Native >= 0.65
+- react-native-webview >= 11.0
+- react-native-safe-area-context >= 4.0
+- iOS 13+ / Android 5+
+
+## Support
+
+Contact your Worktual account manager for your `webchatId` and integration support.

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@worktual/react-native-ai-bot",
+  "version": "1.0.0",
+  "description": "Worktual AI Bot - Embeddable AI chatbot for React Native apps",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react-native",
+    "ai",
+    "chatbot",
+    "worktual",
+    "webchat"
+  ],
+  "author": "Worktual",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-native": ">=0.65.0",
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-webview": ">=11.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "*",
+    "@types/react-native": "*",
+    "typescript": "^5.9.3"
+  },
+  "files": [
+    "src/",
+    "README.md"
+  ]
+}

package/src/WorktualAIBot.tsx

@@ -0,0 +1,293 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import {
+  View,
+  StyleSheet,
+  Animated,
+  Text,
+  ActivityIndicator,
+  StatusBar,
+  Platform,
+} from "react-native";
+import { WebView, WebViewMessageEvent } from "react-native-webview";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+/* ────────────────────────────────────────────────────────
+ *  Public types
+ * ──────────────────────────────────────────────────────── */
+
+export interface WorktualAIBotProps {
+  /** Your unique webchat ID provided by Worktual */
+  webchatId: string;
+
+  /** Called when the bot sends a close/end event (navigate back, dismiss modal, etc.) */
+  onClose: () => void;
+
+  /** Optional: custom base URL (defaults to Worktual production) */
+  baseUrl?: string;
+
+  /** Optional: loading screen title (default: "AI Assistant") */
+  loadingTitle?: string;
+
+  /** Optional: loading screen subtitle (default: "Loading your chat...") */
+  loadingSubtitle?: string;
+
+  /** Optional: primary colour for progress bar & spinner (default: "#575CFF") */
+  primaryColor?: string;
+
+  /** Optional: loading screen background colour (default: "#f8f9fb") */
+  loadingBackground?: string;
+
+  /** Optional: maximum time (ms) to wait before force-hiding loader (default: 6000) */
+  maxLoadTime?: number;
+
+  /** Optional: called when bot content is fully loaded */
+  onReady?: () => void;
+
+  /** Optional: called on every postMessage from the WebView */
+  onMessage?: (data: Record<string, unknown>) => void;
+}
+
+/* ────────────────────────────────────────────────────────
+ *  Constants
+ * ──────────────────────────────────────────────────────── */
+
+const DEFAULT_BASE_URL =
+  "https://ccaas-storage.worktual.co.uk/chat/ailivebot.html";
+
+const buildUrl = (baseUrl: string, webchatId: string): string => {
+  const sep = baseUrl.includes("?") ? "&" : "?";
+  return `${baseUrl}${sep}webchatid=${webchatId}&isHeader=1`;
+};
+
+/** Injected JS – polls for chat content then posts webchat_ready */
+const buildInjectedJS = (maxMs: number): string => `
+  (function() {
+    var t = setInterval(function() {
+      var m = document.querySelectorAll(
+        '.message, .chat-message, .msg-content, [class*="message"]'
+      );
+      var i = document.querySelector('input[placeholder], textarea[placeholder]');
+      if (m.length > 0 || i) {
+        clearInterval(t);
+        window.ReactNativeWebView.postMessage(
+          JSON.stringify({ type: "webchat_ready" })
+        );
+      }
+    }, 200);
+    setTimeout(function() {
+      clearInterval(t);
+      window.ReactNativeWebView.postMessage(
+        JSON.stringify({ type: "webchat_ready" })
+      );
+    }, ${maxMs});
+  })();
+  true;
+`;
+
+/* ────────────────────────────────────────────────────────
+ *  Component
+ * ──────────────────────────────────────────────────────── */
+
+const WorktualAIBot: React.FC<WorktualAIBotProps> = ({
+  webchatId,
+  onClose,
+  baseUrl = DEFAULT_BASE_URL,
+  loadingTitle = "AI Assistant",
+  loadingSubtitle = "Loading your chat...",
+  primaryColor = "#575CFF",
+  loadingBackground = "#f8f9fb",
+  maxLoadTime = 6000,
+  onReady,
+  onMessage: onMessageProp,
+}) => {
+  const insets = useSafeAreaInsets();
+  const [showLoader, setShowLoader] = useState(true);
+
+  // Animations
+  const progressAnim = useRef(new Animated.Value(0)).current;
+  const fadeAnim = useRef(new Animated.Value(1)).current;
+  const dotAnim = useRef(new Animated.Value(0)).current;
+
+  const url = buildUrl(baseUrl, webchatId);
+  const injectedJS = buildInjectedJS(maxLoadTime);
+
+  /* ── Animations ── */
+  useEffect(() => {
+    // Progress bar: fast to 70%, then slow to 90%
+    Animated.sequence([
+      Animated.timing(progressAnim, {
+        toValue: 0.7,
+        duration: 800,
+        useNativeDriver: false,
+      }),
+      Animated.timing(progressAnim, {
+        toValue: 0.9,
+        duration: 2500,
+        useNativeDriver: false,
+      }),
+    ]).start();
+
+    // Pulsing dots
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(dotAnim, { toValue: 1, duration: 500, useNativeDriver: true }),
+        Animated.timing(dotAnim, { toValue: 0.3, duration: 500, useNativeDriver: true }),
+      ])
+    ).start();
+  }, []);
+
+  /* ── Hide loader ── */
+  const hideLoader = useCallback(() => {
+    if (!showLoader) return;
+    // Complete progress bar
+    Animated.timing(progressAnim, {
+      toValue: 1,
+      duration: 150,
+      useNativeDriver: false,
+    }).start();
+
+    // Fade out
+    setTimeout(() => {
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }).start(() => setShowLoader(false));
+    }, 150);
+  }, [showLoader]);
+
+  /* ── WebView message handler ── */
+  const handleMessage = useCallback(
+    (event: WebViewMessageEvent) => {
+      try {
+        const data = JSON.parse(event.nativeEvent.data);
+
+        // Forward to client's onMessage if provided
+        onMessageProp?.(data);
+
+        if (data?.type === "webchat_ready") {
+          hideLoader();
+          onReady?.();
+        }
+        if (data?.type === "webchat_end") {
+          onClose();
+        }
+      } catch (_) {
+        // Ignore non-JSON messages
+      }
+    },
+    [hideLoader, onClose, onReady, onMessageProp]
+  );
+
+  /* ── Render ── */
+  const progressWidth = progressAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0%", "100%"],
+  });
+
+  return (
+    <View style={[styles.container, { paddingTop: insets.top }]}>
+      <StatusBar barStyle="dark-content" backgroundColor="#fff" />
+
+      {/* WebView loads immediately behind the loader */}
+      <WebView
+        source={{ uri: url }}
+        style={styles.webview}
+        javaScriptEnabled
+        domStorageEnabled
+        allowsInlineMediaPlayback
+        mediaPlaybackRequiresUserAction={false}
+        onMessage={handleMessage}
+        injectedJavaScript={injectedJS}
+        // Prevent white flash on Android
+        {...(Platform.OS === "android" && {
+          overScrollMode: "never" as const,
+          setBuiltInZoomControls: false,
+        })}
+      />
+
+      {/* Loading overlay */}
+      {showLoader && (
+        <Animated.View
+          style={[
+            styles.loaderOverlay,
+            { opacity: fadeAnim, backgroundColor: loadingBackground },
+          ]}
+        >
+          {/* Spinner */}
+          <ActivityIndicator
+            size="large"
+            color={primaryColor}
+            style={styles.spinner}
+          />
+
+          {/* Title */}
+          <Text style={styles.loaderTitle}>{loadingTitle}</Text>
+
+          {/* Subtitle with pulsing opacity */}
+          <Animated.Text
+            style={[styles.loaderSubtitle, { opacity: dotAnim }]}
+          >
+            {loadingSubtitle}
+          </Animated.Text>
+
+          {/* Progress bar */}
+          <View style={styles.progressTrack}>
+            <Animated.View
+              style={[
+                styles.progressBar,
+                { width: progressWidth, backgroundColor: primaryColor },
+              ]}
+            />
+          </View>
+        </Animated.View>
+      )}
+    </View>
+  );
+};
+
+/* ────────────────────────────────────────────────────────
+ *  Styles
+ * ──────────────────────────────────────────────────────── */
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  webview: {
+    flex: 1,
+  },
+  loaderOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  spinner: {
+    marginBottom: 20,
+  },
+  loaderTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#1a1a2e",
+    marginBottom: 6,
+  },
+  loaderSubtitle: {
+    fontSize: 14,
+    color: "#8e8ea0",
+    marginBottom: 28,
+  },
+  progressTrack: {
+    width: 200,
+    height: 4,
+    backgroundColor: "#e4e4e7",
+    borderRadius: 2,
+    overflow: "hidden",
+  },
+  progressBar: {
+    height: "100%",
+    borderRadius: 2,
+  },
+});
+
+export default WorktualAIBot;

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as WorktualAIBot } from "./WorktualAIBot";
+export type { WorktualAIBotProps } from "./WorktualAIBot";