cosmic-ai-genius 0.3.7 → 0.3.8

package/README.md

@@ -1,658 +1,7 @@
-# Cosmic AI Genius SDK for React
+# cosmic-ai-genius
 
-A powerful, customizable AI chatbot SDK for React applications with voice capabilities and modern UI design.
+Private AI SDK for internal use only.
 
-## Features
+---
 
-- ✨ **Modern UI** - Beautiful, responsive chatbot interface matching Figma designs
-- 🎤 **Voice Integration** - Voice call functionality with animated waveforms
-- 🎨 **Fully Customizable** - Themes, positioning, and behavior customization
-- 📱 **Mobile Responsive** - Optimized for all screen sizes
-- 🚀 **Easy Integration** - Simple provider pattern for seamless integration
-- ⚡ **TypeScript Support** - Full type safety and IntelliSense
-- 🎯 **Multiple Components** - Flexible component architecture
-- 🔄 **Streaming Support** - Real-time streaming responses with SSE
-- 🤖 **Backend Integration** - Connect to AI backends with RAG support
-- 📝 **Markdown Rendering** - Rich text formatting in messages
-- 📚 **Source Citations** - Display grounding sources for AI responses
-
-## Installation
-
-Install the package from npm:
-
-```bash
-# Using npm
-npm install cosmic-ai-genius
-
-# Using yarn
-yarn add cosmic-ai-genius
-
-# Using pnpm
-pnpm add cosmic-ai-genius
-```
-
-## Quick Start
-
-### 1. Basic Setup
-
-Wrap your app with the `GeniusChatbotProvider`:
-
-```tsx
-import { GeniusChatbotProvider, GeniusToggle } from 'cosmic-ai-genius';
-
-function App() {
-  return (
-    <GeniusChatbotProvider 
-      config={{
-        welcomeMessage: "Hi! How can I help you today?",
-        suggestions: ['How to get started?', 'Pricing', 'Support'],
-        position: 'bottom-right'
-      }}
-    >
-      <YourAppContent />
-      <GeniusToggle />
-    </GeniusChatbotProvider>
-  );
-}
-```
-
-### 2. Programmatic Control
-
-Use the `useGeniusChatbot` hook for programmatic control:
-
-```tsx
-import { useGeniusChatbot } from 'cosmic-ai-genius';
-
-function MyComponent() {
-  const { openChatbot, closeChatbot, toggleChatbot, isOpen } = useGeniusChatbot();
-
-  return (
-    <div>
-      <button onClick={openChatbot}>Open Chat</button>
-      <button onClick={toggleChatbot}>Toggle Chat</button>
-      <p>Chat is {isOpen ? 'open' : 'closed'}</p>
-    </div>
-  );
-}
-```
-
-## Components
-
-### GeniusChatbotProvider
-
-The main provider component that manages chatbot state and configuration.
-
-```tsx
-<GeniusChatbotProvider
-  config={{
-    // API Configuration
-    apiKey: "your-api-key",
-    apiEndpoint: "https://your-api.com/chat",
-    
-    // UI Customization
-    welcomeMessage: "Welcome to Cosmic AI Genius!",
-    placeholder: "Type your message...",
-    suggestions: ['FAQ', 'Pricing', 'Contact'],
-    
-    // Positioning & Theming
-    position: 'bottom-right',
-    width: 440,
-    height: 680,
-    theme: {
-      primaryColor: '#1b85ff',
-      backgroundColor: '#ffffff'
-    },
-    
-    // Event Handlers
-    onMessage: (message) => console.log('New message:', message),
-    onClose: () => console.log('Chatbot closed'),
-    onExpand: () => console.log('Chatbot expanded')
-  }}
-  defaultOpen={false}
->
-  {children}
-</GeniusChatbotProvider>
-```
-
-### GeniusChatbot
-
-The main chatbot interface component (automatically rendered by provider):
-
-```tsx
-// Rendered automatically when chatbot is open
-// Features:
-// - Expandable interface (50% screen width on desktop)
-// - Voice call integration
-// - Message history
-// - Suggested replies
-// - Mobile responsive design
-```
-
-### GeniusToggle
-
-A floating toggle button to open the chatbot:
-
-```tsx
-<GeniusToggle
-  position="bottom-right"  // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
-  offsetX={20}            // Horizontal offset from edge
-  offsetY={20}            // Vertical offset from edge
-/>
-```
-
-### VoiceCall
-
-Voice call interface component (automatically shown when voice is activated):
-
-```tsx
-// Activated when waveform icon is clicked
-// Features:
-// - Animated waveform visualization
-// - Microphone and end call controls
-// - Compact floating design
-// - Smooth transitions
-```
-
-## Configuration Options
-
-### GeniusChatbotConfig
-
-```typescript
-interface GeniusChatbotConfig {
-  // API Settings
-  apiKey?: string;
-  baseUrl?: string;  // Base URL for backend (e.g., 'https://api.example.com')
-  endpoints?: {      // Custom endpoints (optional)
-    chat?: string;   // Non-streaming chat endpoint
-    stream?: string; // Streaming chat endpoint
-  };
-  useStreaming?: boolean; // Enable real-time streaming responses
-  
-  // Content
-  welcomeMessage?: string;
-  placeholder?: string;
-  suggestions?: string[];
-  
-  // Layout
-  position?: 'bottom-right' | 'bottom-left' | 'center';
-  width?: number;
-  height?: number;
-  
-  // Theming
-  theme?: {
-    primaryColor?: string;
-    backgroundColor?: string;
-    textColor?: string;
-    borderRadius?: number;
-    fontFamily?: string;
-    [key: string]: any;
-  };
-  
-  // Event Handlers
-  onMessage?: (message: Message) => void;
-  onClose?: () => void;
-  onExpand?: () => void;
-}
-```
-
-### Message Interface
-
-```typescript
-interface Message {
-  id: string;
-  content: string;
-  role: 'user' | 'assistant';
-  timestamp: Date;
-  sources?: GroundingChunk[]; // Optional source citations
-}
-
-interface GroundingChunk {
-  text: string;
-  title: string;
-  uri: string;
-}
-```
-
-## Backend Integration
-
-The SDK supports integration with AI backends, including the provided Python FastAPI server with Google Gemini and RAG support.
-
-### Quick Backend Setup
-
-1. **Start the backend server** (see `/backend/README.md` for details):
-   ```bash
-   cd backend
-   ./run.sh
-   ```
-
-2. **Configure the SDK with backend URL**:
-   ```tsx
-   <GeniusChatbotProvider
-     config={{
-       baseUrl: 'http://localhost:8001',
-       useStreaming: true,  // Enable real-time responses
-     }}
-   >
-   ```
-
-### Backend Configuration Options
-
-```tsx
-// Option 1: Simple base URL (recommended)
-config={{
-  baseUrl: 'https://api.example.com',
-  // SDK will append /chat and /chat/stream
-}}
-
-// Option 2: Custom endpoints
-config={{
-  endpoints: {
-    chat: 'https://api.example.com/v1/chat',
-    stream: 'https://streaming.example.com/sse'
-  }
-}}
-
-// Option 3: Mix and match
-config={{
-  baseUrl: 'https://api.example.com',
-  endpoints: {
-    stream: 'https://fast-stream.example.com/chat'
-  }
-}}
-```
-
-## Advanced Usage
-
-### Custom API Integration
-
-```tsx
-<GeniusChatbotProvider
-  config={{
-    baseUrl: "https://your-api.com",
-    apiKey: "your-secret-key",
-    useStreaming: true,
-    onMessage: async (message) => {
-      // Custom message handling
-      console.log('User sent:', message.content);
-      
-      // Send to your analytics
-      analytics.track('chat_message_sent', {
-        content: message.content,
-        timestamp: message.timestamp
-      });
-    }
-  }}
->
-```
-
-### Custom Theming
-
-```tsx
-<GeniusChatbotProvider
-  config={{
-    theme: {
-      // Override CSS custom properties
-      '--genius-primary-blue': '#your-brand-color',
-      '--genius-background': '#f8f9fa',
-      '--genius-text-primary': '#1a1a1a',
-      '--genius-border-radius': '16px',
-      fontFamily: 'Inter, sans-serif'
-    }
-  }}
->
-```
-
-### Multiple Chatbot Instances
-
-```tsx
-// You can have multiple chatbot providers for different contexts
-function App() {
-  return (
-    <div>
-      {/* Support chatbot */}
-      <GeniusChatbotProvider config={{ 
-        welcomeMessage: "Need help? I'm here to assist!",
-        position: 'bottom-right'
-      }}>
-        <SupportSection />
-        <GeniusToggle />
-      </GeniusChatbotProvider>
-      
-      {/* Sales chatbot */}
-      <GeniusChatbotProvider config={{ 
-        welcomeMessage: "Interested in our products?",
-        position: 'bottom-left'
-      }}>
-        <SalesSection />
-        <GeniusToggle position="bottom-left" />
-      </GeniusChatbotProvider>
-    </div>
-  );
-}
-```
-
-### Voice Call Integration
-
-The voice call feature is automatically available when using the chatbot:
-
-1. **Activation**: Click the waveform icon when no text is entered
-2. **Interface**: Shows compact voice call UI with animated waveform
-3. **Controls**: Microphone status and end call button
-4. **Exit**: Click end call button to return to chat interface
-
-```tsx
-// Voice call is automatically integrated
-// No additional setup required
-// Activated by clicking waveform icon in chat input
-```
-
-## Responsive Behavior
-
-### Desktop
-- Default size: 440px × 680px
-- Expandable to 50% screen width
-- Floating position with shadows
-
-### Mobile
-- Full screen overlay
-- Auto-collapse when expanded
-- Hide expand/collapse buttons
-- Touch-optimized interface
-
-### Tablet
-- Responsive sizing between mobile and desktop
-- Optimized button sizes and spacing
-
-## Events & Callbacks
-
-### Message Events
-
-```tsx
-const handleMessage = (message: Message) => {
-  console.log('New message:', message);
-  
-  // Send to analytics
-  if (message.role === 'user') {
-    analytics.track('user_message', { content: message.content });
-  }
-};
-
-<GeniusChatbotProvider config={{ onMessage: handleMessage }} />
-```
-
-### Lifecycle Events
-
-```tsx
-const config = {
-  onClose: () => {
-    console.log('Chatbot closed');
-    // Save conversation state
-  },
-  
-  onExpand: () => {
-    console.log('Chatbot expanded');
-    // Track engagement
-  }
-};
-```
-
-## Styling & Customization
-
-### CSS Custom Properties
-
-The SDK uses CSS custom properties for easy theming:
-
-```css
-:root {
-  --genius-primary-blue: #1B85FF;
-  --genius-grey-600: #8A8A8E;
-  --genius-grey-500: #9C9C9F;
-  --genius-grey-200: #E0E0E0;
-  --genius-grey-100: #EDEDED;
-  --genius-text-primary: #1c1c1c;
-  --genius-text-secondary: #5f5f5f;
-  --genius-white: #ffffff;
-  --genius-background: #fcfcfc;
-}
-```
-
-### Override Styles
-
-```css
-/* Custom styles for your application */
-.genius-chatbot-container {
-  border-radius: 20px !important;
-  box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
-}
-
-.genius-chatbot-send-button {
-  background: linear-gradient(45deg, #ff6b6b, #4ecdc4) !important;
-}
-```
-
-## TypeScript Support
-
-The SDK is fully typed with TypeScript. Import types as needed:
-
-```typescript
-import type { 
-  GeniusChatbotConfig, 
-  Message,
-  GeniusChatbotContextType 
-} from 'cosmic-ai-genius';
-
-const config: GeniusChatbotConfig = {
-  welcomeMessage: "Hello!",
-  suggestions: ["Help", "Info"]
-};
-
-const handleMessage = (message: Message) => {
-  // Fully typed message object
-  console.log(message.content, message.role, message.timestamp);
-};
-```
-
-## Browser Support
-
-- ✅ Chrome 90+
-- ✅ Firefox 88+
-- ✅ Safari 14+
-- ✅ Edge 90+
-- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
-
-## Performance
-
-- **Bundle size**: ~45KB gzipped
-- **Runtime**: Lightweight React components
-- **Memory**: Efficient state management
-- **Animations**: Hardware-accelerated CSS animations
-
-## Development
-
-### Local Development
-
-1. **Clone the repository:**
-   ```bash
-   git clone https://github.com/cosmic-ai/genius-sdk.git
-   cd genius-sdk
-   ```
-
-2. **Install dependencies:**
-   ```bash
-   npm install
-   ```
-
-3. **Start development server:**
-   ```bash
-   npm run dev
-   ```
-
-4. **Build the SDK:**
-   ```bash
-   npm run build:sdk
-   ```
-
-### Publishing Updates
-
-1. **Update version:**
-   ```bash
-   npm version patch  # or minor/major
-   ```
-
-2. **Build and publish:**
-   ```bash
-   npm run build:sdk
-   npm publish
-   ```
-
-## Troubleshooting
-
-### Common Issues
-
-1. **Chatbot not appearing**
-   ```tsx
-   // Ensure you're using the provider
-   <GeniusChatbotProvider>
-     <YourApp />
-   </GeniusChatbotProvider>
-   ```
-
-2. **Styling conflicts**
-   ```css
-   /* Use more specific selectors */
-   .your-app .genius-chatbot-container {
-     /* Your overrides */
-   }
-   ```
-
-3. **TypeScript errors**
-   ```tsx
-   // Import types explicitly
-   import type { GeniusChatbotConfig } from 'cosmic-ai-genius';
-   ```
-
-4. **Installation issues**
-   ```bash
-   # Clear cache and reinstall
-   npm cache clean --force
-   npm install cosmic-ai-genius
-   ```
-
-### Debug Mode
-
-Enable debug logging:
-
-```tsx
-<GeniusChatbotProvider 
-  config={{ 
-    debug: true,  // Enable console logs
-    onMessage: (msg) => console.log('Debug:', msg)
-  }}
-/>
-```
-
-## ReScript Integration
-
-The SDK can be used with ReScript by creating bindings:
-
-### 1. Create SDK bindings (`GeniusSDK.res`):
-
-```rescript
-module GeniusChatbotProvider = {
-  @module("cosmic-ai-genius") @react.component
-  external make: (
-    ~config: GeniusConfig.t,
-    ~defaultOpen: bool=?,
-    ~children: React.element
-  ) => React.element = "GeniusChatbotProvider"
-}
-
-module GeniusToggle = {
-  @module("cosmic-ai-genius") @react.component
-  external make: (
-    ~position: [#"bottom-right" | #"bottom-left" | #"top-right" | #"top-left"]=?,
-    ~offsetX: int=?,
-    ~offsetY: int=?
-  ) => React.element = "GeniusToggle"
-}
-
-@module("cosmic-ai-genius")
-external useGeniusChatbot: unit => {
-  "openChatbot": unit => unit,
-  "closeChatbot": unit => unit,
-  "toggleChatbot": unit => unit,
-  "isOpen": bool
-} = "useGeniusChatbot"
-```
-
-### 2. Define configuration types (`GeniusConfig.res`):
-
-```rescript
-type theme = {
-  primaryColor?: string,
-  backgroundColor?: string,
-  textColor?: string,
-}
-
-type endpoints = {
-  chat?: string,
-  stream?: string,
-}
-
-type message = {
-  id: string,
-  content: string,
-  role: [#user | #assistant],
-  timestamp: Js.Date.t,
-}
-
-type t = {
-  apiKey?: string,
-  baseUrl?: string,
-  endpoints?: endpoints,
-  welcomeMessage?: string,
-  placeholder?: string,
-  suggestions?: array<string>,
-  position?: [#"bottom-right" | #"bottom-left" | #center],
-  useStreaming?: bool,
-  onMessage?: message => unit,
-  onClose?: unit => unit,
-  onExpand?: unit => unit,
-}
-```
-
-### 3. Use in your app:
-
-```rescript
-@react.component
-let make = () => {
-  let config = {
-    GeniusConfig.welcomeMessage: Some("How can I help you?"),
-    suggestions: Some(["Question 1", "Question 2"]),
-    baseUrl: Some("http://localhost:8001"),
-    useStreaming: Some(true),
-    // ... other fields
-  }
-
-  <GeniusSDK.GeniusChatbotProvider config defaultOpen=false>
-    <div className="app">
-      <YourAppContent />
-      <GeniusSDK.GeniusToggle />
-    </div>
-  </GeniusSDK.GeniusChatbotProvider>
-}
-```
-
-## Examples
-
-Check out the `/src/App.tsx` file in this repository for a complete working example with all features demonstrated.
-
-## Contributing
-
-We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
-
-## License
-
-MIT License - see [LICENSE](LICENSE) file for details.
-
-Made with ❤️ by the Cosmic AI Team
+(c) Cosmic AI Team

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cosmic-ai-genius",
   "private": false,
-  "version": "0.3.7",
+  "version": "0.3.8",
   "type": "module",
   "description": "A powerful, customizable AI chatbot SDK for React applications with voice capabilities and modern UI design",
   "keywords": [