VDB AI Chat

A cross-platform AI chat widget that works on React Native (iOS/Android) and Web (as an embeddable widget).

Installation

npm install vdb-ai-chat
# or
yarn add vdb-ai-chat

Usage

React Native (iOS / Android)

import React from 'react';
import { SafeAreaView } from 'react-native';
import { ChatWidget } from 'vdb-ai-chat';

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ChatWidget
        apiUrl="https://your-api.com/v3/chat"
        theme={{
          primaryColor: '#804195',
        }}
        placeholder="Ask me anything..."
        onClose={() => console.log('Chat closed')}
      />
    </SafeAreaView>
  );
}

Web Widget (Embeddable Script)

Build the widget bundle:

npm run build:web

This creates dist/chat-widget.js. Host it on your CDN, then embed:

<script src="https://your-cdn.com/chat-widget.js"></script>
<script>
  createChatWidget({
    id: "vdb-chat",
    apiUrl: "https://your-api.com/v3/chat",
    theme: {
      primaryColor: "#804195"
    },
    button: {
      buttonPosition: { bottom: "24px", right: "24px" }
    }
  });
</script>

Props

| Prop | Type | Description | |------|------|-------------| | apiUrl | string | Required. Your chat API endpoint | | userId | string | Optional. User identifier | | userToken | string | Optional. Auth token | | theme | Partial<ChatTheme> | Optional. Theme customization | | placeholder | string | Optional. Input placeholder text | | onClose | () => void | Optional. Called when chat is closed | | onClearChat | () => void | Optional. Called when chat is cleared |

Theme Customization

interface ChatTheme {
  primaryColor: string;
  backgroundColor: string;
  inputColor: string;
  inputBackgroundColor: string;
  inputBorderRadius: number;
  inputTextColor: string;
  userBubbleColor: string;
  userTextColor: string;
  botBubbleColor: string;
  botTextColor: string;
  borderRadius: number;
  fontFamily?: string;
  fontSize: number;
  listContentBackgroundColor?: string;
}

Development

# Install dependencies
npm install

# Start web dev server
npm run start:web

# Build library (for npm)
npm run build:lib

# Build web widget
npm run build:web

# Build everything
npm run build

Local Testing (Before Publishing)

To test the package locally in another project:

# In this project
npm run build:lib
npm pack
# Creates vdb-ai-chat-1.0.0.tgz

# In your React Native app
npm install /path/to/vdb-ai-chat-1.0.0.tgz

Or use npm link:

# In this project
npm run build:lib
npm link

# In your React Native app
npm link vdb-ai-chat

Publishing to npm

# Login to npm
npm login

# Publish
npm publish

License

MIT