@enhearten/knowledge-base-module 1.0.1 → 1.0.3

package/dist/components/DataUploadModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataUploadModal.d.ts","sourceRoot":"","sources":["../../src/components/DataUploadModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,UAAU,oBAAoB;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,WAAW,GAAG,UAAU,CAAC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAChC;AAmCD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6K1D,CAAC"}
+{"version":3,"file":"DataUploadModal.d.ts","sourceRoot":"","sources":["../../src/components/DataUploadModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,UAAU,oBAAoB;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,WAAW,GAAG,UAAU,CAAC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAChC;AAmCD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA+K1D,CAAC"}

package/dist/components/DataUploadModal.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Button, Card, Text, XStack, YStack, Spinner, Sheet } from 'tamagui';
+import { Button, Card, Text, XStack, YStack, Spinner, Sheet, Theme } from 'tamagui';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import * as DocumentPicker from 'expo-document-picker';
 import { uploadUserData } from '../services/api';
@@ -96,39 +96,40 @@ export const DataUploadModal = ({ open, onClose, serviceName, entityId, onUpload
             onClose();
         }
     };
-    return (React.createElement(Sheet, { modal: true, open: open, onOpenChange: (isOpen) => !isOpen && handleClose(), snapPoints: [85], dismissOnSnapToBottom: true },
-        React.createElement(Sheet.Overlay, null),
-        React.createElement(Sheet.Frame, { padding: "$4", backgroundColor: "white" },
-            React.createElement(Sheet.Handle, null),
-            React.createElement(YStack, { space: "$4", paddingTop: "$4" },
-                React.createElement(XStack, { alignItems: "center", space: "$2" },
-                    React.createElement(MaterialCommunityIcons, { name: instructions.icon, size: 28, color: serviceName === 'instagram' ? '#E4405F' : '#25D366' }),
-                    React.createElement(Text, { fontSize: "$6", fontWeight: "bold" }, instructions.title)),
-                React.createElement(Card, { bordered: true, padding: "$3", backgroundColor: "$gray2" },
-                    React.createElement(YStack, { space: "$2" },
-                        React.createElement(Text, { fontSize: "$4", fontWeight: "600" }, "How to download your data:"),
-                        instructions.steps.map((step, index) => (React.createElement(XStack, { key: index, space: "$2", alignItems: "flex-start" },
-                            React.createElement(Text, { fontSize: "$3", color: "$gray11", minWidth: 20 },
-                                index + 1,
-                                "."),
-                            React.createElement(Text, { fontSize: "$3", color: "$gray11", flex: 1 }, step)))))),
-                React.createElement(YStack, { gap: "$3" },
-                    React.createElement(Button, { size: "$4", onPress: handlePickFiles, disabled: uploading, icon: React.createElement(MaterialCommunityIcons, { name: "file-upload", size: 20, color: "white" }) }, selectedFiles.length > 0
-                        ? `${selectedFiles.length} file(s) selected`
-                        : 'Select File(s)'),
-                    selectedFiles.length > 0 && (React.createElement(Card, { bordered: true, padding: "$2", backgroundColor: "$green2" },
-                        React.createElement(YStack, { space: "$1" }, selectedFiles.map((file, index) => (React.createElement(XStack, { key: index, alignItems: "center", space: "$2" },
-                            React.createElement(MaterialCommunityIcons, { name: "file-check", size: 16, color: "green" }),
-                            React.createElement(Text, { fontSize: "$2", flex: 1, numberOfLines: 1 }, file.name),
-                            React.createElement(Text, { fontSize: "$1", color: "$gray10" },
-                                (file.size ? file.size / 1024 / 1024 : 0).toFixed(2),
-                                " MB"))))))),
-                    error && (React.createElement(Card, { bordered: true, padding: "$2", backgroundColor: "$red2", borderColor: "$red8" },
-                        React.createElement(Text, { color: "$red10", fontSize: "$3" }, error))),
-                    uploadProgress && (React.createElement(XStack, { alignItems: "center", space: "$2" },
-                        React.createElement(Spinner, { size: "small" }),
-                        React.createElement(Text, { fontSize: "$3", color: "$gray10" }, uploadProgress))),
-                    React.createElement(XStack, { gap: "$3", justifyContent: "flex-end" },
-                        React.createElement(Button, { size: "$4", variant: "outlined", onPress: handleClose, disabled: uploading }, "Cancel"),
-                        React.createElement(Button, { size: "$4", themeInverse: true, onPress: handleUpload, disabled: uploading || selectedFiles.length === 0, icon: uploading ? React.createElement(Spinner, { size: "small", color: "white" }) : undefined }, uploading ? 'Uploading...' : 'Upload Data')))))));
+    return (React.createElement(Theme, { name: "light" },
+        React.createElement(Sheet, { modal: true, open: open, onOpenChange: (isOpen) => !isOpen && handleClose(), snapPoints: [85], dismissOnSnapToBottom: true },
+            React.createElement(Sheet.Overlay, null),
+            React.createElement(Sheet.Frame, { padding: "$4", backgroundColor: "white" },
+                React.createElement(Sheet.Handle, null),
+                React.createElement(YStack, { space: "$4", paddingTop: "$4" },
+                    React.createElement(XStack, { alignItems: "center", space: "$2" },
+                        React.createElement(MaterialCommunityIcons, { name: instructions.icon, size: 28, color: serviceName === 'instagram' ? '#E4405F' : '#25D366' }),
+                        React.createElement(Text, { fontSize: "$6", fontWeight: "bold" }, instructions.title)),
+                    React.createElement(Card, { bordered: true, padding: "$3", backgroundColor: "$gray2" },
+                        React.createElement(YStack, { space: "$2" },
+                            React.createElement(Text, { fontSize: "$4", fontWeight: "600" }, "How to download your data:"),
+                            instructions.steps.map((step, index) => (React.createElement(XStack, { key: index, space: "$2", alignItems: "flex-start" },
+                                React.createElement(Text, { fontSize: "$3", color: "$gray11", minWidth: 20 },
+                                    index + 1,
+                                    "."),
+                                React.createElement(Text, { fontSize: "$3", color: "$gray11", flex: 1 }, step)))))),
+                    React.createElement(YStack, { gap: "$3" },
+                        React.createElement(Button, { size: "$4", onPress: handlePickFiles, disabled: uploading, icon: React.createElement(MaterialCommunityIcons, { name: "file-upload", size: 20, color: "white" }) }, selectedFiles.length > 0
+                            ? `${selectedFiles.length} file(s) selected`
+                            : 'Select File(s)'),
+                        selectedFiles.length > 0 && (React.createElement(Card, { bordered: true, padding: "$2", backgroundColor: "$green2" },
+                            React.createElement(YStack, { space: "$1" }, selectedFiles.map((file, index) => (React.createElement(XStack, { key: index, alignItems: "center", space: "$2" },
+                                React.createElement(MaterialCommunityIcons, { name: "file-check", size: 16, color: "green" }),
+                                React.createElement(Text, { fontSize: "$2", flex: 1, numberOfLines: 1 }, file.name),
+                                React.createElement(Text, { fontSize: "$1", color: "$gray10" },
+                                    (file.size ? file.size / 1024 / 1024 : 0).toFixed(2),
+                                    " MB"))))))),
+                        error && (React.createElement(Card, { bordered: true, padding: "$2", backgroundColor: "$red2", borderColor: "$red8" },
+                            React.createElement(Text, { color: "$red10", fontSize: "$3" }, error))),
+                        uploadProgress && (React.createElement(XStack, { alignItems: "center", space: "$2" },
+                            React.createElement(Spinner, { size: "small" }),
+                            React.createElement(Text, { fontSize: "$3", color: "$gray10" }, uploadProgress))),
+                        React.createElement(XStack, { gap: "$3", justifyContent: "flex-end" },
+                            React.createElement(Button, { size: "$4", variant: "outlined", onPress: handleClose, disabled: uploading }, "Cancel"),
+                            React.createElement(Button, { size: "$4", themeInverse: true, onPress: handleUpload, disabled: uploading || selectedFiles.length === 0, icon: uploading ? React.createElement(Spinner, { size: "small", color: "white" }) : undefined }, uploading ? 'Uploading...' : 'Upload Data'))))))));
 };

package/dist/components/SettingsModal.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SettingsModalProps {
+    open: boolean;
+    onClose: () => void;
+}
+export declare const SettingsModal: React.FC<SettingsModalProps>;
+export {};
+//# sourceMappingURL=SettingsModal.d.ts.map

package/dist/components/SettingsModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsModal.d.ts","sourceRoot":"","sources":["../../src/components/SettingsModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,UAAU,kBAAkB;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+ItD,CAAC"}

package/dist/components/SettingsModal.js

@@ -0,0 +1,84 @@
+import React, { useState, useEffect } from 'react';
+import { Button, Input, Label, Sheet, Text, XStack, YStack, Theme, Spinner } from 'tamagui';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { configure } from '../services/api';
+export const SettingsModal = ({ open, onClose }) => {
+    const [backendUrl, setBackendUrl] = useState('');
+    const [composioKey, setComposioKey] = useState('');
+    const [googleKey, setGoogleKey] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [saving, setSaving] = useState(false);
+    useEffect(() => {
+        if (open) {
+            loadSettings();
+        }
+    }, [open]);
+    const loadSettings = async () => {
+        setLoading(true);
+        try {
+            const storedUrl = await AsyncStorage.getItem('kb_backend_url');
+            const storedComposioKey = await AsyncStorage.getItem('kb_composio_key');
+            const storedGoogleKey = await AsyncStorage.getItem('kb_google_key');
+            if (storedUrl)
+                setBackendUrl(storedUrl);
+            if (storedComposioKey)
+                setComposioKey(storedComposioKey);
+            if (storedGoogleKey)
+                setGoogleKey(storedGoogleKey);
+        }
+        catch (error) {
+            console.error('Failed to load settings', error);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleSave = async () => {
+        setSaving(true);
+        try {
+            // Remove trailing slash from URL if present
+            const cleanUrl = backendUrl.replace(/\/$/, '');
+            await AsyncStorage.setItem('kb_backend_url', cleanUrl);
+            await AsyncStorage.setItem('kb_composio_key', composioKey);
+            await AsyncStorage.setItem('kb_google_key', googleKey);
+            configure({
+                backendUrl: cleanUrl,
+                headers: {
+                    'x-composio-key': composioKey,
+                    'x-google-key': googleKey
+                }
+            });
+            onClose();
+        }
+        catch (error) {
+            console.error('Failed to save settings', error);
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    return (React.createElement(Theme, { name: "light" },
+        React.createElement(Sheet, { modal: true, open: open, onOpenChange: (isOpen) => !isOpen && onClose(), snapPoints: [85], dismissOnSnapToBottom: true },
+            React.createElement(Sheet.Overlay, null),
+            React.createElement(Sheet.Frame, { padding: "$4", backgroundColor: "white" },
+                React.createElement(Sheet.Handle, null),
+                React.createElement(YStack, { space: "$4", paddingTop: "$4" },
+                    React.createElement(XStack, { alignItems: "center", space: "$2" },
+                        React.createElement(MaterialCommunityIcons, { name: "cog", size: 28, color: "#333" }),
+                        React.createElement(Text, { fontSize: "$6", fontWeight: "bold" }, "Settings")),
+                    React.createElement(Text, { color: "$gray11" }, "Configure your Cloudflare Worker URL and API keys."),
+                    loading ? (React.createElement(Spinner, { size: "large", color: "$blue10" })) : (React.createElement(YStack, { space: "$4" },
+                        React.createElement(YStack, { space: "$2" },
+                            React.createElement(Label, { htmlFor: "backendUrl", fontWeight: "600" }, "Backend URL (Cloudflare Worker)"),
+                            React.createElement(Input, { id: "backendUrl", placeholder: "https://knowledge-base-worker.your-subdomain.workers.dev", value: backendUrl, onChangeText: setBackendUrl, autoCapitalize: "none", autoCorrect: false })),
+                        React.createElement(YStack, { space: "$2" },
+                            React.createElement(Label, { htmlFor: "composioKey", fontWeight: "600" }, "Composio API Key"),
+                            React.createElement(Input, { id: "composioKey", placeholder: "Enter your Composio API Key", value: composioKey, onChangeText: setComposioKey, secureTextEntry: true })),
+                        React.createElement(YStack, { space: "$2" },
+                            React.createElement(Label, { htmlFor: "googleKey", fontWeight: "600" }, "Google Gemini API Key"),
+                            React.createElement(Input, { id: "googleKey", placeholder: "Enter your Google Gemini API Key", value: googleKey, onChangeText: setGoogleKey, secureTextEntry: true })),
+                        React.createElement(XStack, { gap: "$3", justifyContent: "flex-end", marginTop: "$4" },
+                            React.createElement(Button, { size: "$4", variant: "outlined", onPress: onClose, disabled: saving }, "Cancel"),
+                            React.createElement(Button, { size: "$4", themeInverse: true, onPress: handleSave, disabled: saving, icon: saving ? React.createElement(Spinner, { size: "small", color: "white" }) : undefined }, saving ? 'Saving...' : 'Save Settings')))))))));
+};

package/dist/hooks/useServiceConnection.d.ts

@@ -2,6 +2,7 @@ export declare const useServiceConnection: (appName: string, entityId: string, s
     connected: boolean;
     loading: boolean;
     disconnecting: boolean;
+    error: string | null;
     handleConnect: () => Promise<void>;
     handleCancel: () => void;
     handleDisconnect: () => Promise<void>;

package/dist/hooks/useServiceConnection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useServiceConnection.d.ts","sourceRoot":"","sources":["../../src/hooks/useServiceConnection.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB,GAAI,SAAS,MAAM,EAAE,UAAU,MAAM,EAAE,cAAa,MAAM,EAAc;;;;;;;CAgFxG,CAAC"}
+{"version":3,"file":"useServiceConnection.d.ts","sourceRoot":"","sources":["../../src/hooks/useServiceConnection.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB,GAAI,SAAS,MAAM,EAAE,UAAU,MAAM,EAAE,cAAa,MAAM,EAAc;;;;;;;;CA4FxG,CAAC"}

package/dist/hooks/useServiceConnection.js

@@ -1,12 +1,15 @@
 import { useState, useEffect, useRef } from 'react';
-import { Linking } from 'react-native';
-import { startConnection, getConnectionStatus, disconnectApp } from '../services/api';
+import { Linking, Alert } from 'react-native';
+import { startConnection, getConnectionStatus, disconnectApp, isConfigured } from '../services/api';
 export const useServiceConnection = (appName, entityId, searchTerms = [appName]) => {
     const [loading, setLoading] = useState(false);
     const [disconnecting, setDisconnecting] = useState(false);
     const [connected, setConnected] = useState(false);
+    const [error, setError] = useState(null);
     const pollingInterval = useRef(null);
     const checkStatus = async () => {
+        if (!isConfigured())
+            return false;
         try {
             const data = await getConnectionStatus(entityId);
             const isConnected = data.connectedApps && data.connectedApps.some((a) => searchTerms.some(term => a.toLowerCase().includes(term.toLowerCase())));
@@ -28,8 +31,14 @@ export const useServiceConnection = (appName, entityId, searchTerms = [appName])
         };
     }, [entityId]);
     const handleConnect = async () => {
+        if (!isConfigured()) {
+            setError('Configuration missing. Please set up the API URL and keys.');
+            Alert.alert('Configuration Missing', 'Please configure the backend URL and API keys in settings.');
+            return;
+        }
         try {
             setLoading(true);
+            setError(null);
             const data = await startConnection(appName, entityId);
             if (data.url)
                 await Linking.openURL(data.url);
@@ -54,6 +63,7 @@ export const useServiceConnection = (appName, entityId, searchTerms = [appName])
         catch (error) {
             console.error(error);
             console.error(`Failed to connect ${appName}`);
+            setError(`Failed to connect ${appName}`);
             setLoading(false);
         }
     };
@@ -65,6 +75,8 @@ export const useServiceConnection = (appName, entityId, searchTerms = [appName])
         setLoading(false);
     };
     const handleDisconnect = async () => {
+        if (!isConfigured())
+            return;
         try {
             setDisconnecting(true);
             await disconnectApp(appName, entityId);
@@ -72,10 +84,11 @@ export const useServiceConnection = (appName, entityId, searchTerms = [appName])
         }
         catch (error) {
             console.error(`Failed to disconnect ${appName}:`, error);
+            setError(`Failed to disconnect ${appName}`);
         }
         finally {
             setDisconnecting(false);
         }
     };
-    return { connected, loading, disconnecting, handleConnect, handleCancel, handleDisconnect };
+    return { connected, loading, disconnecting, error, handleConnect, handleCancel, handleDisconnect };
 };

package/dist/index.d.mts

@@ -9,6 +9,7 @@ export { ConnectInstagram } from './components/ConnectInstagram';
 export { ConnectLinkedIn } from './components/ConnectLinkedIn';
 export { ConnectWhatsApp } from './components/ConnectWhatsApp';
 export { DataUploadModal } from './components/DataUploadModal';
+export { SettingsModal } from './components/SettingsModal';
 export { useServiceConnection } from './hooks/useServiceConnection';
 export { configure, startConnection, executeAction, getConnectionStatus, disconnectApp, uploadUserData, getUserDataStatus, deleteUserData } from './services/api';
 export { searchPerson, getGiftIdeas, draftEmail, summarizeRecent } from './services/api';

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export { ConnectInstagram } from './components/ConnectInstagram';
 export { ConnectLinkedIn } from './components/ConnectLinkedIn';
 export { ConnectWhatsApp } from './components/ConnectWhatsApp';
 export { DataUploadModal } from './components/DataUploadModal';
+export { SettingsModal } from './components/SettingsModal';
 export { useServiceConnection } from './hooks/useServiceConnection';
 export { configure, startConnection, executeAction, getConnectionStatus, disconnectApp, uploadUserData, getUserDataStatus, deleteUserData } from './services/api';
 export { searchPerson, getGiftIdeas, draftEmail, summarizeRecent } from './services/api';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAG/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAGpE,OAAO,EACH,SAAS,EACT,eAAe,EACf,aAAa,EACb,mBAAmB,EACnB,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,cAAc,EACjB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EACH,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,eAAe,EAClB,MAAM,gBAAgB,CAAC;AAGxB,YAAY,EACR,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,EACjB,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAGpE,OAAO,EACH,SAAS,EACT,eAAe,EACf,aAAa,EACb,mBAAmB,EACnB,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,cAAc,EACjB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EACH,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,eAAe,EAClB,MAAM,gBAAgB,CAAC;AAGxB,YAAY,EACR,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,EACjB,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -10,6 +10,7 @@ export { ConnectInstagram } from './components/ConnectInstagram';
 export { ConnectLinkedIn } from './components/ConnectLinkedIn';
 export { ConnectWhatsApp } from './components/ConnectWhatsApp';
 export { DataUploadModal } from './components/DataUploadModal';
+export { SettingsModal } from './components/SettingsModal';
 // Hooks
 export { useServiceConnection } from './hooks/useServiceConnection';
 // Core API functions

package/dist/index.mjs

@@ -10,6 +10,7 @@ export { ConnectInstagram } from './components/ConnectInstagram';
 export { ConnectLinkedIn } from './components/ConnectLinkedIn';
 export { ConnectWhatsApp } from './components/ConnectWhatsApp';
 export { DataUploadModal } from './components/DataUploadModal';
+export { SettingsModal } from './components/SettingsModal';
 // Hooks
 export { useServiceConnection } from './hooks/useServiceConnection';
 // Core API functions

package/dist/services/api.d.ts

@@ -1,11 +1,17 @@
 /**
- * Configure the backend URL for the knowledge base API.
- * Call this before using any other functions if your backend is not at localhost:3000.
- * @param url - The base URL of the backend (e.g., 'https://api.example.com')
+ * Configure the backend URL and optional headers for the knowledge base API.
+ * Call this before using any other functions if your backend is not at localhost:3000
+ * or if you need to pass specific API keys.
+ * @param options - The configuration options
  */
 export declare const configure: (options: {
     backendUrl: string;
+    headers?: Record<string, string>;
 }) => void;
+/**
+ * Check if the API is configured (has a backend URL set).
+ */
+export declare const isConfigured: () => boolean;
 export declare const startConnection: (appName: string, entityId: string) => Promise<any>;
 export declare const executeAction: (prompt: string, entityId: string) => Promise<any>;
 export declare const getConnectionStatus: (entityId: string) => Promise<any>;

package/dist/services/api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../src/services/api.ts"],"names":[],"mappings":"AAYA;;;;GAIG;AACH,eAAO,MAAM,SAAS,GAAI,SAAS;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,SAExD,CAAC;AAEF,eAAO,MAAM,eAAe,GAAU,SAAS,MAAM,EAAE,UAAU,MAAM,iBAetE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAU,QAAQ,MAAM,EAAE,UAAU,MAAM,iBAenE,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAU,UAAU,MAAM,iBAUzD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAU,SAAS,MAAM,EAAE,UAAU,MAAM,iBAepE,CAAC;AAEF,MAAM,WAAW,cAAc;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,GACvB,aAAa,WAAW,GAAG,UAAU,EACrC,UAAU,MAAM,EAChB,MAAM,cAAc,iBAgCvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAU,UAAU,MAAM,EAAE,aAAa,MAAM,iBAY5E,CAAC;AAEF,eAAO,MAAM,cAAc,GAAU,aAAa,MAAM,EAAE,UAAU,MAAM,iBAezE,CAAC;AAMF,MAAM,WAAW,mBAAmB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAU,SAAS,mBAAmB,iBAM9D,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAU,SAAS,gBAAgB,iBAO3D,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;;;GAIG;AACH,eAAO,MAAM,UAAU,GAAU,SAAS,iBAAiB,iBAM1D,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,KAAK,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAU,SAAS,sBAAsB,iBAOpE,CAAC"}
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../src/services/api.ts"],"names":[],"mappings":"AAaA;;;;;GAKG;AACH,eAAO,MAAM,SAAS,GAAI,SAAS;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,SAK1F,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,eAExB,CAAC;AASF,eAAO,MAAM,eAAe,GAAU,SAAS,MAAM,EAAE,UAAU,MAAM,iBAatE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAU,QAAQ,MAAM,EAAE,UAAU,MAAM,iBAanE,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAU,UAAU,MAAM,iBAYzD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAU,SAAS,MAAM,EAAE,UAAU,MAAM,iBAapE,CAAC;AAEF,MAAM,WAAW,cAAc;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,GACvB,aAAa,WAAW,GAAG,UAAU,EACrC,UAAU,MAAM,EAChB,MAAM,cAAc,iBAgCvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAU,UAAU,MAAM,EAAE,aAAa,MAAM,iBAY5E,CAAC;AAEF,eAAO,MAAM,cAAc,GAAU,aAAa,MAAM,EAAE,UAAU,MAAM,iBAezE,CAAC;AAMF,MAAM,WAAW,mBAAmB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAU,SAAS,mBAAmB,iBAM9D,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAU,SAAS,gBAAgB,iBAO3D,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;;;GAIG;AACH,eAAO,MAAM,UAAU,GAAU,SAAS,iBAAiB,iBAM1D,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,KAAK,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAU,SAAS,sBAAsB,iBAOpE,CAAC"}

package/dist/services/api.js

@@ -1,5 +1,6 @@
 import { Platform } from 'react-native';
 let _backendUrl = null;
+let _headers = {};
 const getBackendUrl = () => {
     if (_backendUrl)
         return _backendUrl;
@@ -9,20 +10,34 @@ const getBackendUrl = () => {
     });
 };
 /**
- * Configure the backend URL for the knowledge base API.
- * Call this before using any other functions if your backend is not at localhost:3000.
- * @param url - The base URL of the backend (e.g., 'https://api.example.com')
+ * Configure the backend URL and optional headers for the knowledge base API.
+ * Call this before using any other functions if your backend is not at localhost:3000
+ * or if you need to pass specific API keys.
+ * @param options - The configuration options
  */
 export const configure = (options) => {
     _backendUrl = options.backendUrl;
+    if (options.headers) {
+        _headers = { ..._headers, ...options.headers };
+    }
+};
+/**
+ * Check if the API is configured (has a backend URL set).
+ */
+export const isConfigured = () => {
+    return _backendUrl !== null;
+};
+const getHeaders = () => {
+    return {
+        'Content-Type': 'application/json',
+        ..._headers
+    };
 };
 export const startConnection = async (appName, entityId) => {
     try {
         const response = await fetch(`${getBackendUrl()}/start-connection`, {
             method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
+            headers: getHeaders(),
             body: JSON.stringify({ appName, entityId }),
         });
         const data = await response.json();
@@ -37,9 +52,7 @@ export const executeAction = async (prompt, entityId) => {
     try {
         const response = await fetch(`${getBackendUrl()}/execute`, {
             method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
+            headers: getHeaders(),
             body: JSON.stringify({ prompt, entityId }),
         });
         const data = await response.json();
@@ -52,7 +65,9 @@ export const executeAction = async (prompt, entityId) => {
 };
 export const getConnectionStatus = async (entityId) => {
     try {
-        const response = await fetch(`${getBackendUrl()}/connection-status?entityId=${entityId}`);
+        const response = await fetch(`${getBackendUrl()}/connection-status?entityId=${entityId}`, {
+            headers: getHeaders()
+        });
         if (!response.ok)
             throw new Error('Failed to fetch status');
         const data = await response.json();
@@ -67,9 +82,7 @@ export const disconnectApp = async (appName, entityId) => {
     try {
         const response = await fetch(`${getBackendUrl()}/disconnect`, {
             method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
+            headers: getHeaders(),
             body: JSON.stringify({ appName, entityId }),
         });
         const data = await response.json();
@@ -148,7 +161,7 @@ export const searchPerson = async (options) => {
     const { entityId, personName, context } = options;
     const prompt = context
         ? `Search all my connected accounts for information about ${personName}. Context: ${context}`
-        : `Search all my connected accounts for information about ${personName}. Look for emails, messages, shared documents, or any other relevant information that could help me understand my relationship with this person, their interests, and recent interactions.`;
+        : `Search all my connected accounts for information about ${personName}. Look for any relevant information that could help me understand my relationship with this person, their interests, and recent interactions.`;
     return executeAction(prompt, entityId);
 };
 /**
@@ -158,7 +171,7 @@ export const searchPerson = async (options) => {
  */
 export const getGiftIdeas = async (options) => {
     const { entityId, personName, occasion, budget } = options;
-    let prompt = `Based on my emails, messages, and other connected accounts, suggest gift ideas for ${personName}.`;
+    let prompt = `Based on my connected accounts, suggest gift ideas for ${personName}.`;
     if (occasion)
         prompt += ` The occasion is: ${occasion}.`;
     if (budget)

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@enhearten/knowledge-base-module",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Connect accounts (Gmail, GitHub, Discord, etc.) and search across them with AI to execute actions",
   "main": "index.ts",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     },
     "./backend": {
       "require": "./backend/app.js"

package/src/components/DataUploadModal.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Button, Card, Text, XStack, YStack, Spinner, Sheet } from 'tamagui';
+import { Button, Card, Text, XStack, YStack, Spinner, Sheet, Theme } from 'tamagui';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import * as DocumentPicker from 'expo-document-picker';
 import { uploadUserData } from '../services/api';
@@ -120,102 +120,104 @@ export const DataUploadModal: React.FC<DataUploadModalProps> = ({
     };
 
     return (
-        <Sheet
-            modal
-            open={open}
-            onOpenChange={(isOpen: boolean) => !isOpen && handleClose()}
-            snapPoints={[85]}
-            dismissOnSnapToBottom
-        >
-            <Sheet.Overlay />
-            <Sheet.Frame padding="$4" backgroundColor="white">
-                <Sheet.Handle />
-                
-                <YStack space="$4" paddingTop="$4">
-                    <XStack alignItems="center" space="$2">
-                        <MaterialCommunityIcons 
-                            name={instructions.icon} 
-                            size={28} 
-                            color={serviceName === 'instagram' ? '#E4405F' : '#25D366'} 
-                        />
-                        <Text fontSize="$6" fontWeight="bold">{instructions.title}</Text>
-                    </XStack>
-
-                    <Card bordered padding="$3" backgroundColor="$gray2">
-                        <YStack space="$2">
-                            <Text fontSize="$4" fontWeight="600">How to download your data:</Text>
-                            {instructions.steps.map((step, index) => (
-                                <XStack key={index} space="$2" alignItems="flex-start">
-                                    <Text fontSize="$3" color="$gray11" minWidth={20}>{index + 1}.</Text>
-                                    <Text fontSize="$3" color="$gray11" flex={1}>{step}</Text>
-                                </XStack>
-                            ))}
-                        </YStack>
-                    </Card>
-
-                    <YStack gap="$3">
-                        <Button
-                            size="$4"
-                            onPress={handlePickFiles}
-                            disabled={uploading}
-                            icon={<MaterialCommunityIcons name="file-upload" size={20} color="white" />}
-                        >
-                            {selectedFiles.length > 0 
-                                ? `${selectedFiles.length} file(s) selected` 
-                                : 'Select File(s)'}
-                        </Button>
-
-                        {selectedFiles.length > 0 && (
-                            <Card bordered padding="$2" backgroundColor="$green2">
-                                <YStack space="$1">
-                                    {selectedFiles.map((file, index) => (
-                                        <XStack key={index} alignItems="center" space="$2">
-                                            <MaterialCommunityIcons name="file-check" size={16} color="green" />
-                                            <Text fontSize="$2" flex={1} numberOfLines={1}>{file.name}</Text>
-                                            <Text fontSize="$1" color="$gray10">
-                                                {(file.size ? file.size / 1024 / 1024 : 0).toFixed(2)} MB
-                                            </Text>
-                                        </XStack>
-                                    ))}
-                                </YStack>
-                            </Card>
-                        )}
-
-                        {error && (
-                            <Card bordered padding="$2" backgroundColor="$red2" borderColor="$red8">
-                                <Text color="$red10" fontSize="$3">{error}</Text>
-                            </Card>
-                        )}
-
-                        {uploadProgress && (
-                            <XStack alignItems="center" space="$2">
-                                <Spinner size="small" />
-                                <Text fontSize="$3" color="$gray10">{uploadProgress}</Text>
-                            </XStack>
-                        )}
+        <Theme name="light">
+            <Sheet
+                modal
+                open={open}
+                onOpenChange={(isOpen: boolean) => !isOpen && handleClose()}
+                snapPoints={[85]}
+                dismissOnSnapToBottom
+            >
+                <Sheet.Overlay />
+                <Sheet.Frame padding="$4" backgroundColor="white">
+                    <Sheet.Handle />
+                    
+                    <YStack space="$4" paddingTop="$4">
+                        <XStack alignItems="center" space="$2">
+                            <MaterialCommunityIcons 
+                                name={instructions.icon} 
+                                size={28} 
+                                color={serviceName === 'instagram' ? '#E4405F' : '#25D366'} 
+                            />
+                            <Text fontSize="$6" fontWeight="bold">{instructions.title}</Text>
+                        </XStack>
 
-                        <XStack gap="$3" justifyContent="flex-end">
+                        <Card bordered padding="$3" backgroundColor="$gray2">
+                            <YStack space="$2">
+                                <Text fontSize="$4" fontWeight="600">How to download your data:</Text>
+                                {instructions.steps.map((step, index) => (
+                                    <XStack key={index} space="$2" alignItems="flex-start">
+                                        <Text fontSize="$3" color="$gray11" minWidth={20}>{index + 1}.</Text>
+                                        <Text fontSize="$3" color="$gray11" flex={1}>{step}</Text>
+                                    </XStack>
+                                ))}
+                            </YStack>
+                        </Card>
+
+                        <YStack gap="$3">
                             <Button
                                 size="$4"
-                                variant="outlined"
-                                onPress={handleClose}
+                                onPress={handlePickFiles}
                                 disabled={uploading}
+                                icon={<MaterialCommunityIcons name="file-upload" size={20} color="white" />}
                             >
-                                Cancel
-                            </Button>
-                            <Button
-                                size="$4"
-                                themeInverse
-                                onPress={handleUpload}
-                                disabled={uploading || selectedFiles.length === 0}
-                                icon={uploading ? <Spinner size="small" color="white" /> : undefined}
-                            >
-                                {uploading ? 'Uploading...' : 'Upload Data'}
+                                {selectedFiles.length > 0 
+                                    ? `${selectedFiles.length} file(s) selected` 
+                                    : 'Select File(s)'}
                             </Button>
-                        </XStack>
+
+                            {selectedFiles.length > 0 && (
+                                <Card bordered padding="$2" backgroundColor="$green2">
+                                    <YStack space="$1">
+                                        {selectedFiles.map((file, index) => (
+                                            <XStack key={index} alignItems="center" space="$2">
+                                                <MaterialCommunityIcons name="file-check" size={16} color="green" />
+                                                <Text fontSize="$2" flex={1} numberOfLines={1}>{file.name}</Text>
+                                                <Text fontSize="$1" color="$gray10">
+                                                    {(file.size ? file.size / 1024 / 1024 : 0).toFixed(2)} MB
+                                                </Text>
+                                            </XStack>
+                                        ))}
+                                    </YStack>
+                                </Card>
+                            )}
+
+                            {error && (
+                                <Card bordered padding="$2" backgroundColor="$red2" borderColor="$red8">
+                                    <Text color="$red10" fontSize="$3">{error}</Text>
+                                </Card>
+                            )}
+
+                            {uploadProgress && (
+                                <XStack alignItems="center" space="$2">
+                                    <Spinner size="small" />
+                                    <Text fontSize="$3" color="$gray10">{uploadProgress}</Text>
+                                </XStack>
+                            )}
+
+                            <XStack gap="$3" justifyContent="flex-end">
+                                <Button
+                                    size="$4"
+                                    variant="outlined"
+                                    onPress={handleClose}
+                                    disabled={uploading}
+                                >
+                                    Cancel
+                                </Button>
+                                <Button
+                                    size="$4"
+                                    themeInverse
+                                    onPress={handleUpload}
+                                    disabled={uploading || selectedFiles.length === 0}
+                                    icon={uploading ? <Spinner size="small" color="white" /> : undefined}
+                                >
+                                    {uploading ? 'Uploading...' : 'Upload Data'}
+                                </Button>
+                            </XStack>
+                        </YStack>
                     </YStack>
-                </YStack>
-            </Sheet.Frame>
-        </Sheet>
+                </Sheet.Frame>
+            </Sheet>
+        </Theme>
     );
 };

package/src/components/SettingsModal.tsx

@@ -0,0 +1,155 @@
+import React, { useState, useEffect } from 'react';
+import { Button, Card, Input, Label, Sheet, Text, XStack, YStack, Theme, Spinner } from 'tamagui';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { configure } from '../services/api';
+
+interface SettingsModalProps {
+    open: boolean;
+    onClose: () => void;
+}
+
+export const SettingsModal: React.FC<SettingsModalProps> = ({ open, onClose }) => {
+    const [backendUrl, setBackendUrl] = useState('');
+    const [composioKey, setComposioKey] = useState('');
+    const [googleKey, setGoogleKey] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [saving, setSaving] = useState(false);
+
+    useEffect(() => {
+        if (open) {
+            loadSettings();
+        }
+    }, [open]);
+
+    const loadSettings = async () => {
+        setLoading(true);
+        try {
+            const storedUrl = await AsyncStorage.getItem('kb_backend_url');
+            const storedComposioKey = await AsyncStorage.getItem('kb_composio_key');
+            const storedGoogleKey = await AsyncStorage.getItem('kb_google_key');
+
+            if (storedUrl) setBackendUrl(storedUrl);
+            if (storedComposioKey) setComposioKey(storedComposioKey);
+            if (storedGoogleKey) setGoogleKey(storedGoogleKey);
+        } catch (error) {
+            console.error('Failed to load settings', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleSave = async () => {
+        setSaving(true);
+        try {
+            // Remove trailing slash from URL if present
+            const cleanUrl = backendUrl.replace(/\/$/, '');
+
+            await AsyncStorage.setItem('kb_backend_url', cleanUrl);
+            await AsyncStorage.setItem('kb_composio_key', composioKey);
+            await AsyncStorage.setItem('kb_google_key', googleKey);
+
+            configure({
+                backendUrl: cleanUrl,
+                headers: {
+                    'x-composio-key': composioKey,
+                    'x-google-key': googleKey
+                }
+            });
+
+            onClose();
+        } catch (error) {
+            console.error('Failed to save settings', error);
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    return (
+        <Theme name="light">
+            <Sheet
+                modal
+                open={open}
+                onOpenChange={(isOpen: boolean) => !isOpen && onClose()}
+                snapPoints={[85]}
+                dismissOnSnapToBottom
+            >
+                <Sheet.Overlay />
+                <Sheet.Frame padding="$4" backgroundColor="white">
+                    <Sheet.Handle />
+                    
+                    <YStack space="$4" paddingTop="$4">
+                        <XStack alignItems="center" space="$2">
+                            <MaterialCommunityIcons name="cog" size={28} color="#333" />
+                            <Text fontSize="$6" fontWeight="bold">Settings</Text>
+                        </XStack>
+
+                        <Text color="$gray11">
+                            Configure your Cloudflare Worker URL and API keys.
+                        </Text>
+
+                        {loading ? (
+                            <Spinner size="large" color="$blue10" />
+                        ) : (
+                            <YStack space="$4">
+                                <YStack space="$2">
+                                    <Label htmlFor="backendUrl" fontWeight="600">Backend URL (Cloudflare Worker)</Label>
+                                    <Input
+                                        id="backendUrl"
+                                        placeholder="https://knowledge-base-worker.your-subdomain.workers.dev"
+                                        value={backendUrl}
+                                        onChangeText={setBackendUrl}
+                                        autoCapitalize="none"
+                                        autoCorrect={false}
+                                    />
+                                </YStack>
+
+                                <YStack space="$2">
+                                    <Label htmlFor="composioKey" fontWeight="600">Composio API Key</Label>
+                                    <Input
+                                        id="composioKey"
+                                        placeholder="Enter your Composio API Key"
+                                        value={composioKey}
+                                        onChangeText={setComposioKey}
+                                        secureTextEntry
+                                    />
+                                </YStack>
+
+                                <YStack space="$2">
+                                    <Label htmlFor="googleKey" fontWeight="600">Google Gemini API Key</Label>
+                                    <Input
+                                        id="googleKey"
+                                        placeholder="Enter your Google Gemini API Key"
+                                        value={googleKey}
+                                        onChangeText={setGoogleKey}
+                                        secureTextEntry
+                                    />
+                                </YStack>
+
+                                <XStack gap="$3" justifyContent="flex-end" marginTop="$4">
+                                    <Button
+                                        size="$4"
+                                        variant="outlined"
+                                        onPress={onClose}
+                                        disabled={saving}
+                                    >
+                                        Cancel
+                                    </Button>
+                                    <Button
+                                        size="$4"
+                                        themeInverse
+                                        onPress={handleSave}
+                                        disabled={saving}
+                                        icon={saving ? <Spinner size="small" color="white" /> : undefined}
+                                    >
+                                        {saving ? 'Saving...' : 'Save Settings'}
+                                    </Button>
+                                </XStack>
+                            </YStack>
+                        )}
+                    </YStack>
+                </Sheet.Frame>
+            </Sheet>
+        </Theme>
+    );
+};

package/src/hooks/useServiceConnection.ts

@@ -1,14 +1,16 @@
 import { useState, useEffect, useRef } from 'react';
-import { Linking } from 'react-native';
-import { startConnection, getConnectionStatus, disconnectApp } from '../services/api';
+import { Linking, Alert } from 'react-native';
+import { startConnection, getConnectionStatus, disconnectApp, isConfigured } from '../services/api';
 
 export const useServiceConnection = (appName: string, entityId: string, searchTerms: string[] = [appName]) => {
     const [loading, setLoading] = useState(false);
     const [disconnecting, setDisconnecting] = useState(false);
     const [connected, setConnected] = useState(false);
+    const [error, setError] = useState<string | null>(null);
     const pollingInterval = useRef<NodeJS.Timeout | null>(null);
 
     const checkStatus = async () => {
+        if (!isConfigured()) return false;
         try {
             const data = await getConnectionStatus(entityId);
             const isConnected = data.connectedApps && data.connectedApps.some((a: string) =>
@@ -32,8 +34,15 @@ export const useServiceConnection = (appName: string, entityId: string, searchTe
     }, [entityId]);
 
     const handleConnect = async () => {
+        if (!isConfigured()) {
+            setError('Configuration missing. Please set up the API URL and keys.');
+            Alert.alert('Configuration Missing', 'Please configure the backend URL and API keys in settings.');
+            return;
+        }
+
         try {
             setLoading(true);
+            setError(null);
             const data = await startConnection(appName, entityId);
             if (data.url) await Linking.openURL(data.url);
 
@@ -57,6 +66,7 @@ export const useServiceConnection = (appName: string, entityId: string, searchTe
         } catch (error) {
             console.error(error);
             console.error(`Failed to connect ${appName}`);
+            setError(`Failed to connect ${appName}`);
             setLoading(false);
         }
     };
@@ -70,16 +80,18 @@ export const useServiceConnection = (appName: string, entityId: string, searchTe
     };
 
     const handleDisconnect = async () => {
+        if (!isConfigured()) return;
         try {
             setDisconnecting(true);
             await disconnectApp(appName, entityId);
             setConnected(false);
         } catch (error) {
             console.error(`Failed to disconnect ${appName}:`, error);
+            setError(`Failed to disconnect ${appName}`);
         } finally {
             setDisconnecting(false);
         }
     };
 
-    return { connected, loading, disconnecting, handleConnect, handleCancel, handleDisconnect };
+    return { connected, loading, disconnecting, error, handleConnect, handleCancel, handleDisconnect };
 };

package/src/index.ts

@@ -10,6 +10,7 @@ export { ConnectInstagram } from './components/ConnectInstagram';
 export { ConnectLinkedIn } from './components/ConnectLinkedIn';
 export { ConnectWhatsApp } from './components/ConnectWhatsApp';
 export { DataUploadModal } from './components/DataUploadModal';
+export { SettingsModal } from './components/SettingsModal';
 
 // Hooks
 export { useServiceConnection } from './hooks/useServiceConnection';

package/src/services/api.ts

@@ -1,6 +1,7 @@
 import { Platform } from 'react-native';
 
 let _backendUrl: string | null = null;
+let _headers: Record<string, string> = {};
 
 const getBackendUrl = () => {
     if (_backendUrl) return _backendUrl;
@@ -11,21 +12,37 @@ const getBackendUrl = () => {
 };
 
 /**
- * Configure the backend URL for the knowledge base API.
- * Call this before using any other functions if your backend is not at localhost:3000.
- * @param url - The base URL of the backend (e.g., 'https://api.example.com')
+ * Configure the backend URL and optional headers for the knowledge base API.
+ * Call this before using any other functions if your backend is not at localhost:3000
+ * or if you need to pass specific API keys.
+ * @param options - The configuration options
  */
-export const configure = (options: { backendUrl: string }) => {
+export const configure = (options: { backendUrl: string; headers?: Record<string, string> }) => {
     _backendUrl = options.backendUrl;
+    if (options.headers) {
+        _headers = { ..._headers, ...options.headers };
+    }
+};
+
+/**
+ * Check if the API is configured (has a backend URL set).
+ */
+export const isConfigured = () => {
+    return _backendUrl !== null;
+};
+
+const getHeaders = () => {
+    return {
+        'Content-Type': 'application/json',
+        ..._headers
+    };
 };
 
 export const startConnection = async (appName: string, entityId: string) => {
     try {
         const response = await fetch(`${getBackendUrl()}/start-connection`, {
             method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
+            headers: getHeaders(),
             body: JSON.stringify({ appName, entityId }),
         });
         const data = await response.json();
@@ -40,9 +57,7 @@ export const executeAction = async (prompt: string, entityId: string) => {
     try {
         const response = await fetch(`${getBackendUrl()}/execute`, {
             method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
+            headers: getHeaders(),
             body: JSON.stringify({ prompt, entityId }),
         });
         const data = await response.json();
@@ -55,7 +70,9 @@ export const executeAction = async (prompt: string, entityId: string) => {
 
 export const getConnectionStatus = async (entityId: string) => {
     try {
-        const response = await fetch(`${getBackendUrl()}/connection-status?entityId=${entityId}`);
+        const response = await fetch(`${getBackendUrl()}/connection-status?entityId=${entityId}`, {
+            headers: getHeaders()
+        });
         if (!response.ok) throw new Error('Failed to fetch status');
         const data = await response.json();
         return data;
@@ -69,9 +86,7 @@ export const disconnectApp = async (appName: string, entityId: string) => {
     try {
         const response = await fetch(`${getBackendUrl()}/disconnect`, {
             method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
+            headers: getHeaders(),
             body: JSON.stringify({ appName, entityId }),
         });
         const data = await response.json();
@@ -176,7 +191,7 @@ export const searchPerson = async (options: SearchPersonOptions) => {
     const { entityId, personName, context } = options;
     const prompt = context 
         ? `Search all my connected accounts for information about ${personName}. Context: ${context}`
-        : `Search all my connected accounts for information about ${personName}. Look for emails, messages, shared documents, or any other relevant information that could help me understand my relationship with this person, their interests, and recent interactions.`;
+        : `Search all my connected accounts for information about ${personName}. Look for any relevant information that could help me understand my relationship with this person, their interests, and recent interactions.`;
     return executeAction(prompt, entityId);
 };
 
@@ -194,7 +209,7 @@ export interface GiftIdeasOptions {
  */
 export const getGiftIdeas = async (options: GiftIdeasOptions) => {
     const { entityId, personName, occasion, budget } = options;
-    let prompt = `Based on my emails, messages, and other connected accounts, suggest gift ideas for ${personName}.`;
+    let prompt = `Based on my connected accounts, suggest gift ideas for ${personName}.`;
     if (occasion) prompt += ` The occasion is: ${occasion}.`;
     if (budget) prompt += ` Budget: ${budget}.`;
     prompt += ` Look for their interests, hobbies, recent conversations, and anything that might hint at what they would appreciate.`;