@inappai/react 1.0.0 → 1.0.1

package/README.md

@@ -8,11 +8,11 @@ Beautiful, customizable AI chat component for React applications. Built by [InAp
 ## Features
 
 - ✨ **Beautiful UI** - Polished interface out of the box
-- 🎨 **Fully Customizable** - 7 built-in themes + custom styling support
+- 🎨 **7 Built-in Themes** - Light, dark, professional, playful, minimal, ocean, sunset
 - 📱 **Responsive Design** - Works seamlessly on desktop and mobile
 - 🎯 **Multiple Display Modes** - Popup, sidebar, panel, or embedded
-- 🎛️ **Controlled Mode** - External message management for multi-conversation support
-- 🔧 **Tool Support** - Register custom tools for AI agent interactions
+- 🎛️ **Controlled Mode** - Full control over message state
+- 🔧 **Tool Support** - Function calling for AI agent interactions
 - ⚡ **Zero Config** - Works with sensible defaults
 - 📦 **Lightweight** - Minimal bundle size (~60KB)
 - 🔷 **TypeScript** - Full type safety included
@@ -27,33 +27,38 @@ npm install @inappai/react
 ## Quick Start
 
 ```tsx
-import { InAppAI } from '@inappai/react';
+import { useState } from 'react';
+import { InAppAI, Message } from '@inappai/react';
 import '@inappai/react/styles.css';
 
 function App() {
+  const [messages, setMessages] = useState<Message[]>([]);
+
   return (
     <InAppAI
-      endpoint="https://api.inappai.com/api"
       agentId="your-agent-id"
-      position="bottom-right"
-      theme="light"
+      messages={messages}
+      onMessagesChange={setMessages}
     />
   );
 }
 ```
 
+Get your agent ID from [inappai.com](https://www.inappai.com).
+
 ## Display Modes
 
 ### Popup Mode (Default)
 
-Chat appears as a floating bubble in the corner of your app:
+Chat appears as a floating bubble in the corner:
 
 ```tsx
 <InAppAI
-  endpoint="https://api.inappai.com/api"
   agentId="your-agent-id"
-  position="bottom-right"
+  messages={messages}
+  onMessagesChange={setMessages}
   displayMode="popup"
+  position="bottom-right"
 />
 ```
 
@@ -63,22 +68,24 @@ Chat slides in from the side:
 
 ```tsx
 <InAppAI
-  endpoint="https://api.inappai.com/api"
   agentId="your-agent-id"
-  position="right"
-  displayMode="sidebar"
+  messages={messages}
+  onMessagesChange={setMessages}
+  displayMode="sidebar-right"
 />
 ```
 
 ### Panel Mode
 
-Overlay panel that covers the screen:
+Resizable panel overlay:
 
 ```tsx
 <InAppAI
-  endpoint="https://api.inappai.com/api"
   agentId="your-agent-id"
-  displayMode="panel"
+  messages={messages}
+  onMessagesChange={setMessages}
+  displayMode="panel-right"
+  panelDefaultWidth="400px"
 />
 ```
 
@@ -89,8 +96,9 @@ Embed chat directly in your layout:
 ```tsx
 <div style={{ height: '600px', width: '400px' }}>
   <InAppAI
-    endpoint="https://api.inappai.com/api"
     agentId="your-agent-id"
+    messages={messages}
+    onMessagesChange={setMessages}
     displayMode="embedded"
     showHeader={false}
   />
@@ -103,9 +111,10 @@ Choose from 7 built-in themes:
 
 ```tsx
 <InAppAI
-  endpoint="https://api.inappai.com/api"
   agentId="your-agent-id"
-  theme="dark" // light | dark | ocean | forest | sunset | midnight | rose
+  messages={messages}
+  onMessagesChange={setMessages}
+  theme="dark" // light | dark | professional | playful | minimal | ocean | sunset
 />
 ```
 
@@ -115,98 +124,138 @@ Override styles with custom CSS:
 
 ```tsx
 <InAppAI
-  endpoint="https://api.inappai.com/api"
   agentId="your-agent-id"
+  messages={messages}
+  onMessagesChange={setMessages}
   customStyles={{
     primaryColor: '#FF6B6B',
-    backgroundColor: '#FFFFFF',
-    textColor: '#333333',
-    bubbleBgColor: '#F0F0F0',
+    headerTitle: 'Support Chat',
+    buttonIcon: '💬',
   }}
 />
 ```
 
-## Controlled Mode
+## Tool Support
 
-Manage messages externally for multi-conversation support:
+Register custom tools for AI function calling:
 
 ```tsx
-import { InAppAI, Message } from '@inappai/react';
-import { useState } from 'react';
+import { InAppAI, Tool } from '@inappai/react';
+
+const tools: Tool[] = [
+  {
+    name: 'get_weather',
+    description: 'Get current weather for a location',
+    parameters: {
+      type: 'object',
+      properties: {
+        location: { type: 'string', description: 'City name' },
+      },
+      required: ['location'],
+    },
+    handler: async ({ location }) => {
+      const weather = await fetchWeather(location);
+      return { temperature: weather.temp, condition: weather.condition };
+    },
+  },
+];
 
-function MultiChatApp() {
+function App() {
   const [messages, setMessages] = useState<Message[]>([]);
-  const [conversationId, setConversationId] = useState('chat-1');
 
   return (
     <InAppAI
-      endpoint="https://api.inappai.com/api"
       agentId="your-agent-id"
-      displayMode="embedded"
-      conversationId={conversationId}
       messages={messages}
       onMessagesChange={setMessages}
+      tools={tools}
     />
   );
 }
 ```
 
-## Tool Support
+## Context Passing
 
-Register custom tools for AI agent interactions:
+Send application context to make responses more relevant:
 
 ```tsx
-import { InAppAI, useToolRegistry } from '@inappai/react';
-
-function AppWithTools() {
-  const tools = [
-    {
-      name: 'get_weather',
-      description: 'Get current weather for a location',
-      parameters: {
-        type: 'object',
-        properties: {
-          location: { type: 'string', description: 'City name' },
-        },
-        required: ['location'],
-      },
-      handler: async ({ location }) => {
-        const weather = await fetchWeather(location);
-        return { temperature: weather.temp, condition: weather.condition };
-      },
-    },
-  ];
+<InAppAI
+  agentId="your-agent-id"
+  messages={messages}
+  onMessagesChange={setMessages}
+  context={{
+    page: 'dashboard',
+    userId: user.id,
+    userRole: user.role,
+  }}
+/>
+```
 
-  return (
-    <InAppAI
-      endpoint="https://api.inappai.com/api"
-      agentId="your-agent-id"
-      tools={tools}
-    />
-  );
-}
+Or use dynamic context:
+
+```tsx
+<InAppAI
+  agentId="your-agent-id"
+  messages={messages}
+  onMessagesChange={setMessages}
+  context={() => ({
+    currentUrl: window.location.pathname,
+    selectedText: window.getSelection()?.toString(),
+  })}
+/>
 ```
 
 ## API Reference
 
-### Props
+### Required Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `agentId` | `string` | Your agent ID from InAppAI platform |
+| `messages` | `Message[]` | Array of conversation messages |
+| `onMessagesChange` | `(messages: Message[]) => void` | Callback when messages change |
+
+### Display Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `endpoint` | `string` | **required** | Backend API endpoint |
-| `agentId` | `string` | **required** | Your agent ID |
-| `displayMode` | `'popup' \| 'sidebar' \| 'panel' \| 'embedded'` | `'popup'` | Display mode |
-| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' \| 'left' \| 'right'` | `'bottom-right'` | Position for popup/sidebar |
-| `theme` | `'light' \| 'dark' \| 'ocean' \| 'forest' \| 'sunset' \| 'midnight' \| 'rose'` | `'light'` | Color theme |
-| `title` | `string` | `'AI Assistant'` | Chat header title |
-| `placeholder` | `string` | `'Type a message...'` | Input placeholder |
+| `displayMode` | `'popup' \| 'sidebar-left' \| 'sidebar-right' \| 'panel-left' \| 'panel-right' \| 'embedded'` | `'popup'` | Layout mode |
+| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Button position (popup only) |
+| `defaultFolded` | `boolean` | `false` | Start folded (sidebar/panel only) |
 | `showHeader` | `boolean` | `true` | Show/hide header |
-| `initialOpen` | `boolean` | `false` | Initially open state |
+
+### Styling Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `theme` | `'light' \| 'dark' \| 'professional' \| 'playful' \| 'minimal' \| 'ocean' \| 'sunset'` | `'light'` | Built-in theme |
 | `customStyles` | `CustomStyles` | `{}` | Custom style overrides |
-| `tools` | `Tool[]` | `[]` | Custom tools for AI agent |
-| `conversationId` | `string` | - | Conversation ID for controlled mode |
-| `messages` | `Message[]` | - | Messages for controlled mode |
-| `onMessagesChange` | `(messages: Message[]) => void` | - | Message update callback |
+
+### Data Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `context` | `Record<string, any> \| (() => Record<string, any>)` | - | App context sent with messages |
+| `conversationId` | `string` | Auto-generated | Conversation identifier |
+| `authToken` | `string` | - | JWT token for authentication |
+| `tools` | `Tool[]` | `[]` | Custom tools for function calling |
+
+### Panel Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `panelMinWidth` | `string` | `'20%'` | Minimum panel width |
+| `panelMaxWidth` | `string` | `'33.33%'` | Maximum panel width |
+| `panelDefaultWidth` | `string` | `'25%'` | Initial panel width |
+| `onPanelResize` | `(width: number) => void` | - | Panel resize callback |
+
+### Event Hooks
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `onMessageSent` | `(message: Message) => void` | Called when user sends message |
+| `onMessageReceived` | `(message: Message) => void` | Called when AI responds |
+| `onError` | `(error: Error) => void` | Called on errors |
 
 ### Types
 
@@ -226,14 +275,47 @@ interface Tool {
 
 interface CustomStyles {
   primaryColor?: string;
-  backgroundColor?: string;
-  textColor?: string;
-  bubbleBgColor?: string;
-  borderRadius?: string;
-  fontFamily?: string;
+  headerTitle?: string;
+  buttonIcon?: string;
+  windowWidth?: string;
+  // ... and many more
 }
 ```
 
+## Advanced Configuration
+
+### Self-Hosted Backend
+
+By default, the component uses the hosted InAppAI backend. For self-hosted:
+
+```tsx
+<InAppAI
+  endpoint="https://your-backend.com/api"
+  agentId="your-agent-id"
+  messages={messages}
+  onMessagesChange={setMessages}
+/>
+```
+
+### Authentication
+
+Use JWT tokens for authenticated requests:
+
+```tsx
+const { token } = useAuth();
+
+<InAppAI
+  agentId="your-agent-id"
+  messages={messages}
+  onMessagesChange={setMessages}
+  authToken={token}
+  context={{
+    userId: user.id,
+    userName: user.name,
+  }}
+/>
+```
+
 ## Resources
 
 - [GitHub Repository](https://github.com/InAppAI/react)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inappai/react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Beautiful, customizable AI chat component for React applications",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",