@blumessage/react-chat 1.0.0

package/README.md

@@ -0,0 +1,182 @@
+# @blumessage/react-chat
+
+A beautiful, customizable React chat component with BlueMessage AI integration built with TypeScript and Tailwind CSS.
+
+## Features
+
+- 💬 Real-time messaging interface with AI responses
+- 👤 User avatars and names
+- ⏰ Timestamps and message status
+- 📱 Responsive design
+- 🎨 Highly customizable styling
+- 📝 TypeScript support
+- ✨ Smooth animations and transitions
+- 🤖 BlueMessage AI integration
+- 🔧 Extensive customization options
+
+## Installation
+
+```bash
+npm install @blumessage/react-chat
+```
+
+## Quick Start
+
+```tsx
+import React from 'react';
+import { BlumessageChat } from '@blumessage/react-chat';
+
+function App() {
+  return (
+    <div style={{ height: '500px' }}>
+      <BlumessageChat
+        apiKey="your-blumessage-api-key"
+        headerTitle="Support Chat"
+        primaryColor="#3b82f6"
+      />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## API Key Setup
+
+1. Sign up for a BlueMessage API key at [blumessage.com](https://blumessage.com)
+2. Pass your API key to the `apiKey` prop
+3. For testing purposes, you can use `apiKey="test"` to enable demo mode
+
+**Note:** Without a valid API key, the chat component will be disabled and an error will be logged to the console.
+
+## Props
+
+### Core Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `apiKey` | `string` | `undefined` | **Required** - BlueMessage API key for chat functionality. Use `"test"` for demo purposes |
+| `messages` | `Message[]` | `[]` | Array of messages to display |
+| `onSendMessage` | `(message: string) => void` | `undefined` | Callback when user sends a message |
+| `currentUser` | `User` | `{ id: 'user1', name: 'You' }` | Current user information |
+| `inputPlaceholder` | `string` | `'Type a message...'` | Input placeholder text |
+| `className` | `string` | `''` | Additional CSS classes |
+
+### Header Customization
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `headerTitle` | `string` | `'BlueMessage AI'` | Chat header title |
+| `headerDescription` | `string` | `'Online • Instant responses'` | Subtitle text in header |
+| `headerColor` | `string` | `undefined` | Header background color (uses primaryColor if not set) |
+| `headerIcon` | `string` | `'mdi:message-text'` | Iconify icon name for header |
+| `headerIconColor` | `string` | `'white'` | Header icon color |
+| `headerIconHide` | `boolean` | `false` | Hide header icon |
+| `headerAvatarColor` | `string` | `'rgba(255, 255, 255, 0.2)'` | Header avatar background color |
+
+### Layout & Behavior
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` | Chat window size |
+| `floatingButtonPosition` | `'top-right' \| 'top-left' \| 'bottom-left' \| 'bottom-right'` | `'bottom-right'` | Position of floating chat button |
+| `autoOpen` | `boolean` | `false` | Auto-open chat on load |
+| `forceOpen` | `boolean` | `false` | Force chat to stay open (removes close button) |
+| `maximize` | `boolean` | `false` | Start maximized |
+| `maximizeToggle` | `boolean` | `true` | Show maximize/minimize button |
+
+### Colors & Styling
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `primaryColor` | `string` | `'#3b82f6'` | Main theme color |
+| `secondaryColor` | `string` | `'#2563eb'` | Secondary theme color |
+| `messageUserColor` | `string` | `undefined` | User message background (uses gradient if not set) |
+| `messageAssistantColor` | `string` | `'#f3f4f6'` | Assistant message background |
+| `sendButtonColor` | `string` | `undefined` | Send button color (uses gradient if not set) |
+| `inputOutlineColor` | `string` | `'#3b82f6'` | Input focus border color |
+| `floatingButtonBackgroundColor` | `string` | `undefined` | Floating button background |
+| `floatingButtonIcon` | `string` | `undefined` | Floating button icon (uses headerIcon if not set) |
+| `floatingButtonIconColor` | `string` | `'white'` | Floating button icon color |
+
+### Message Customization
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `messageTimestamps` | `boolean` | `true` | Show message timestamps |
+| `messageUserAvatarVisibility` | `boolean` | `false` | Show user avatars |
+| `messageUserAvatarIcon` | `string` | `'mdi:account'` | User avatar icon |
+| `messageUserAvatarColor` | `string` | `'#3b82f6'` | User avatar background color |
+| `messageAssistantAvatarVisibility` | `boolean` | `false` | Show assistant avatars |
+| `messageAssistantAvatarIcon` | `string` | `'mdi:robot'` | Assistant avatar icon |
+| `messageAssistantAvatarColor` | `string` | `'#6b7280'` | Assistant avatar background color |
+| `messageUserName` | `string \| null` | `null` | Display name for user messages |
+| `messageAssistantName` | `string \| null` | `null` | Display name for assistant messages |
+| `sendButtonIcon` | `string` | `'mdi:send'` | Send button icon |
+
+## Types
+
+```tsx
+interface User {
+  id: string;
+  name: string;
+  avatar?: string;
+}
+
+interface Message {
+  id: string;
+  text: string;
+  sender: User;
+  timestamp: Date;
+  isOwn: boolean;
+}
+```
+
+## Advanced Usage
+
+### Custom Styling
+
+```tsx
+<BlumessageChat
+  apiKey="your-api-key"
+  primaryColor="#10b981"
+  secondaryColor="#059669"
+  headerTitle="Customer Support"
+  headerDescription="We're here to help!"
+  size="large"
+  messageTimestamps={true}
+  messageAssistantAvatarVisibility={true}
+/>
+```
+
+### Event Handling
+
+```tsx
+const handleSendMessage = (message: string) => {
+  console.log('User sent:', message);
+  // Add your custom logic here
+};
+
+<BlumessageChat
+  apiKey="your-api-key"
+  onSendMessage={handleSendMessage}
+  currentUser={{
+    id: 'user123',
+    name: 'John Doe',
+    avatar: '👤'
+  }}
+/>
+```
+
+## Requirements
+
+- React 18+
+- TypeScript (recommended)
+
+## License
+
+MIT © BlueMessage
+
+## Support
+
+For support and questions, visit [blumessage.com](https://blumessage.com) or create an issue on GitHub.

package/dist/components/ChatComponent.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+interface Message {
+    id: string;
+    text: string;
+    sender: {
+        id: string;
+        name: string;
+        avatar?: string;
+    };
+    timestamp: Date;
+    isOwn: boolean;
+}
+type ChatSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type FloatingButtonPosition = 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right';
+interface ChatComponentProps {
+    messages?: Message[];
+    onSendMessage?: (message: string) => void;
+    currentUser?: {
+        id: string;
+        name: string;
+        avatar?: string;
+    };
+    inputPlaceholder?: string;
+    className?: string;
+    headerTitle?: string;
+    headerDescription?: string;
+    headerColor?: string;
+    headerIcon?: string;
+    headerIconColor?: string;
+    headerIconHide?: boolean;
+    headerAvatarColor?: string;
+    primaryColor?: string;
+    secondaryColor?: string;
+    messageUserColor?: string;
+    messageAssistantColor?: string;
+    messageTimestamps?: boolean;
+    messageUserAvatarVisibility?: boolean;
+    messageUserAvatarIcon?: string;
+    messageUserAvatarColor?: string;
+    messageAssistantAvatarVisibility?: boolean;
+    messageAssistantAvatarIcon?: string;
+    messageAssistantAvatarColor?: string;
+    messageUserName?: string | null;
+    messageAssistantName?: string | null;
+    sendButtonIcon?: string;
+    sendButtonColor?: string;
+    inputOutlineColor?: string;
+    floatingButtonPosition?: FloatingButtonPosition;
+    floatingButtonIcon?: string;
+    floatingButtonIconColor?: string;
+    floatingButtonBackgroundColor?: string;
+    size?: ChatSize;
+    maximizeToggle?: boolean;
+    maximize?: boolean;
+    autoOpen?: boolean;
+    forceOpen?: boolean;
+    apiKey?: string;
+}
+declare const ChatComponent: React.FC<ChatComponentProps>;
+export default ChatComponent;
+//# sourceMappingURL=ChatComponent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatComponent.d.ts","sourceRoot":"","sources":["../../src/components/ChatComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,UAAU,OAAO;IACf,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE;QACN,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,KAAK,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AACnE,KAAK,sBAAsB,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,GAAG,cAAc,CAAC;AAExF,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE;QACZ,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAChD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsjB/C,CAAC;AAEF,eAAe,aAAa,CAAC"}