mind-link-ai-widget/README-RN.md

A react widget for React Web and React-Native Mobile integrations.

# MindLink AI Widget - React Native

A pure React Native chat widget for mental health and wellness support. Easy to integrate into any React Native mobile application.

## Installation

```bash
npm install mind-link-ai-widget
# or
yarn add mind-link-ai-widget
```

## Quick Start

### 1. Basic Usage

```jsx
import React from 'react';
import { View } from 'react-native';
import BehiveApp from 'mind-link-ai-widget/behive';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <BehiveApp />
    </View>
  );
}
```

### 2. With User Data

```jsx
import React from 'react';
import { View } from 'react-native';
import BehiveApp from 'mind-link-ai-widget/behive';

export default function App() {
  const user = {
    fname: 'John',
    lname: 'Doe',
    email: 'john.doe@example.com',
    dob: '1990-01-01',
    gender: 'male'
  };

  return (
    <View style={{ flex: 1 }}>
      <BehiveApp 
        user={user}
        product="wellness"
        client="myapp"
        channel="mobile"
        isLoggedIn={true}
      />
    </View>
  );
}
```

## Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `user` | `UserData` | No | User information for personalization |
| `product` | `string` | No | Product identifier |
| `client` | `string` | No | Client application identifier |
| `channel` | `string` | No | Channel identifier (e.g., 'mobile') |
| `isLoggedIn` | `boolean` | No | User authentication status |
| `onBack` | `() => void` | No | Callback for back navigation |
| `apiConfig` | `ApiConfig` | Yes* | API configuration for backend calls |
| `debug` | `boolean` | No | Enable debug logging (default: false) |

*Required if you want to use real API calls instead of mock responses.

### ApiConfig Type

```typescript
type ApiConfig = {
  apiHost: string;      // API base URL (no trailing slash)
  senderApp: string;    // Your application identifier
  apiKey: string;       // API key for authentication
  basicAuth: string;    // Basic auth header ("Basic <base64>")
};
```

### UserData Type

```typescript
type UserData = {
  fname: string;           // First name
  lname: string;           // Last name
  dob: string;             // Date of birth (YYYY-MM-DD)
  gender: string;          // Gender
  email: string;           // Email address
  phone?: string;          // Phone number (optional)
  address?: string;        // Street address (optional)
  city?: string;           // City (optional)
  state?: string;          // State (optional)
  zip?: string;            // ZIP code (optional)
  country?: string;        // Country (optional)
  locale?: string;         // Locale (optional)
  geolocation?: {          // Location coordinates (optional)
    lat: number;
    lon: number;
  };
  timezone?: string;       // Timezone (optional)
};
```

## Features

- **Pure React Native**: 100% compatible with React Native
- **Mental Health Focus**: Pre-configured with wellness-related conversation starters
- **Personalized Greetings**: Uses user's first name when provided
- **Responsive Design**: Adapts to different screen sizes
- **Chat Interface**: Full-featured chat with message history
- **Loading States**: Visual feedback during message processing
- **Accessibility**: Built with accessibility in mind

## Integration Examples

### With Navigation

```jsx
import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import BehiveApp from 'mind-link-ai-widget/behive';

export default function ChatScreen() {
  const navigation = useNavigation();

  const handleBack = () => {
    navigation.goBack();
  };

  return (
    <View style={{ flex: 1 }}>
      <BehiveApp onBack={handleBack} />
    </View>
  );
}
```

### With Custom Styling Container

```jsx
import React from 'react';
import { View, SafeAreaView, StatusBar } from 'react-native';
import BehiveApp from 'mind-link-ai-widget/behive';

export default function WellnessChat() {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: '#f5f5f5' }}>
      <StatusBar barStyle="dark-content" />
      <View style={{ 
        flex: 1, 
        marginHorizontal: 10,
        marginVertical: 10,
        borderRadius: 10,
        overflow: 'hidden'
      }}>
        <BehiveApp />
      </View>
    </SafeAreaView>
  );
}
```

### Modal Integration

```jsx
import React, { useState } from 'react';
import { View, Modal, TouchableOpacity, Text } from 'react-native';
import BehiveApp from 'mind-link-ai-widget/behive';

export default function App() {
  const [showChat, setShowChat] = useState(false);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity 
        onPress={() => setShowChat(true)}
        style={{ padding: 20, backgroundColor: '#007AFF', borderRadius: 10 }}
      >
        <Text style={{ color: 'white' }}>Open Wellness Chat</Text>
      </TouchableOpacity>

      <Modal visible={showChat} animationType="slide">
        <BehiveApp onBack={() => setShowChat(false)} />
      </Modal>
    </View>
  );
}
```

## Requirements

- React Native >= 0.70.0
- React >= 18.0.0

## Conversation Starters

The widget includes pre-configured conversation starters for mental health and wellness:

- "I feel stressed"
- "Tips for anxiety" 
- "My benefits"
- "Work-life balance advice"
- "Mindfulness techniques"
- "Dealing with burnout"
- "Healthy habits"
- "Managing emotions"
- And more...

## Styling

The widget uses a clean, modern design with:
- iOS-style blue accent color (#007AFF)
- Rounded message bubbles
- Responsive layout
- Proper spacing and typography

## TypeScript Support

Full TypeScript support with exported types:

```typescript
import BehiveApp, { type UserData } from 'mind-link-ai-widget/behive';
```

## API Configuration

### With Real API

```jsx
import BehiveApp from 'mind-link-ai-widget/behive';

const apiConfig = {
  apiHost: 'https://your-api.com',
  senderApp: 'your-app-name',
  apiKey: 'your-api-key',
  basicAuth: 'Basic ' + btoa('username:password')
};

<BehiveApp 
  apiConfig={apiConfig}
  user={user}
  debug={true}  // Enable for debugging
/>
```

### Debug Mode

Enable debug mode to see detailed API logs:

```jsx
<BehiveApp 
  debug={true}
  apiConfig={apiConfig}
  user={user}
/>
```

This will log:
- API endpoints being called
- Request/response details
- Authentication flow
- Error details

## Troubleshooting

### API Issues

If API calls are failing:

1. **Enable debug mode**: `<BehiveApp debug={true} ... />`
2. **Check console logs**: Look for `[API-RN]` and `[BehiveApp]` prefixed messages
3. **Verify configuration**: Ensure all `apiConfig` fields are correct
4. **Test connectivity**: Make sure your device can reach the API

See [DEBUGGING_GUIDE.md](./DEBUGGING_GUIDE.md) for detailed troubleshooting steps.

### Metro Configuration

If you encounter module resolution issues, add this to your `metro.config.js`:

```javascript
const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

config.resolver.resolverMainFields = ['react-native', 'browser', 'main'];
config.resolver.platforms = ['ios', 'android', 'native', 'web'];

module.exports = config;
```

### Network Permissions

**iOS** - Add to `Info.plist`:
```xml
<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>
```

**Android** - Add to `AndroidManifest.xml`:
```xml
<uses-permission android:name="android.permission.INTERNET" />
```

### Common Issues

1. **"API configuration is required"**: Add the `apiConfig` prop
2. **"Auth failed (401)"**: Check your `basicAuth` credentials
3. **"Network error"**: Verify API connectivity and permissions
4. **Module not found**: Import from `mind-link-ai-widget/behive`
5. **Styling issues**: Wrap in container with `flex: 1`

## Documentation

- [Quick Integration Guide](./REACT_NATIVE_INTEGRATION.md) - Get started in 2 minutes
- [Debugging Guide](./DEBUGGING_GUIDE.md) - Troubleshoot API and integration issues
- [Main README](./README.md) - Full project documentation

## Support

For issues and questions:
1. Check the [Debugging Guide](./DEBUGGING_GUIDE.md)
2. Enable `debug={true}` and check console logs
3. Create an issue on GitHub with debug logs

## License

MIT