rohit-chat-widget 1.0.0

package/README.md

@@ -0,0 +1,455 @@
+# @smarteremr/chat-widget
+
+A comprehensive React-based chat widget component for SmarterEMR client applications with real-time messaging capabilities powered by Azure Communication Services (ACS).
+
+## 🚀 Features
+
+- 💬 **Real-time messaging** - Powered by Azure Communication Services
+- 🎨 **Customizable theming** - Full control over colors and styling
+- 📱 **Responsive design** - Works seamlessly on desktop and mobile
+- ⚡ **TypeScript support** - Full type definitions included
+- 🔒 **Error boundaries** - Graceful error handling and recovery
+- ♿ **Accessibility** - WCAG compliant components
+- 🎯 **Redux integration** - Built-in state management
+- 🔧 **Configurable menu** - Customizable dropdown menu options
+- 📊 **Message history** - Load and display conversation history
+- 🛡️ **Input validation** - Built-in XSS protection and validation
+
+## 📦 Installation
+
+```bash
+npm install @smarteremr/chat-widget
+```
+
+### Peer Dependencies
+
+Ensure you have the required peer dependencies installed:
+
+```bash
+npm install react@>=16.8.0 react-dom@>=16.8.0
+```
+
+## 🎯 Quick Start
+
+### Basic Implementation
+
+```tsx
+import React from 'react';
+import { ChatWidget } from '@smarteremr/chat-widget';
+import '@smarteremr/chat-widget/lib/styles.css';
+
+function App() {
+  const initParams = {
+    baseUrl: 'https://your-api-endpoint.com',
+    apiKey: 'your-api-key',
+    userInfo: {
+      userEmail: 'user@example.com',
+      firstName: 'John',
+      lastName: 'Doe'
+    },
+    metaData: {
+      orderNumber: 'ORD-12345'
+    }
+  };
+
+  const menuItems = [
+    {
+      id: 'help',
+      label: 'Help Center',
+      onClick: () => window.open('/help', '_blank')
+    },
+    {
+      id: 'feedback',
+      label: 'Send Feedback',
+      onClick: () => console.log('Feedback clicked')
+    }
+  ];
+
+  return (
+    <div className="app">
+      <ChatWidget
+        initParams={initParams}
+        primaryColor="#007bff"
+        secondaryColor="#6c757d"
+        menuItems={menuItems}
+        showMenu={true}
+      />
+    </div>
+  );
+}
+
+export default App;
+```
+
+### With Custom Redux Store
+
+```tsx
+import React from 'react';
+import { Provider } from 'react-redux';
+import { ChatWidget } from '@smarteremr/chat-widget';
+import { store } from './store';
+
+function App() {
+  return (
+    <Provider store={store}>
+      <ChatWidget
+        initParams={initParams}
+        primaryColor="#007bff"
+        secondaryColor="#6c757d"
+        menuItems={[]}
+        showMenu={false}
+      />
+    </Provider>
+  );
+}
+```
+
+## 📚 API Reference
+
+### ChatWidget Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `initParams` | `InitiateChatRequest` | ✅ | API configuration and user information |
+| `primaryColor` | `string` | ✅ | Primary theme color (hex format) |
+| `secondaryColor` | `string` | ✅ | Secondary theme color (hex format) |
+| `menuItems` | `MenuItemConfig[]` | ✅ | Dropdown menu configuration |
+| `showMenu` | `boolean` | ✅ | Whether to show the dropdown menu |
+
+### InitiateChatRequest Interface
+
+```tsx
+interface InitiateChatRequest {
+  baseUrl: string;           // Your backend API base URL
+  apiKey: string;            // API authentication key
+  userInfo: {
+    userEmail: string;       // User's email address
+    firstName: string;       // User's first name
+    lastName: string;        // User's last name
+  };
+  metaData: {
+    orderNumber?: string;    // Optional order/reference number
+  };
+}
+```
+
+### MenuItemConfig Interface
+
+```tsx
+interface MenuItemConfig {
+  id: string;                // Unique identifier
+  label: string;             // Display text
+  onClick: () => void;       // Click handler function
+  icon?: string;             // Optional icon class/name
+  disabled?: boolean;        // Whether item is disabled
+}
+```
+
+## 🎨 Theming & Customization
+
+### CSS Custom Properties
+
+The widget uses CSS custom properties for theming. You can override these in your CSS:
+
+```css
+:root {
+  --chat-primary-color: #007bff;
+  --chat-primary-hover: #0056b3;
+  --chat-background-color: #ffffff;
+  --chat-text-color: #333333;
+  --chat-border-color: #e0e0e0;
+  --chat-shadow-color: rgba(0, 0, 0, 0.1);
+  --chat-user-message-bg: #007bff;
+  --chat-agent-message-bg: #e9ecef;
+  --chat-input-bg: #ffffff;
+  --chat-header-bg: #007bff;
+}
+```
+
+### Using StyleManager
+
+```tsx
+import { StyleManager, applyDefaultTheme } from '@smarteremr/chat-widget';
+
+// Apply default theme
+applyDefaultTheme();
+
+// Or customize individual properties
+const styleManager = StyleManager.getInstance();
+styleManager.setProperty('primary-color', '#ff6b6b');
+styleManager.setProperty('background-color', '#f8f9fa');
+
+// Set multiple properties at once
+styleManager.setTheme({
+  'primary-color': '#28a745',
+  'user-message-bg': '#28a745',
+  'header-bg': '#28a745'
+});
+```
+
+## 🔧 Advanced Usage
+
+### Using Hooks
+
+```tsx
+import { useChatInit } from '@smarteremr/chat-widget';
+
+function CustomChatComponent() {
+  const {
+    isInitializing,
+    isInitialized,
+    error,
+    initializeChat,
+    sendMessage,
+    loadMessages
+  } = useChatInit();
+
+  const handleSendMessage = async (message: string) => {
+    const result = await sendMessage(message);
+    if (!result.success) {
+      console.error('Failed to send message:', result.error);
+    }
+  };
+
+  return (
+    <div>
+      {isInitializing && <div>Initializing chat...</div>}
+      {error && <div>Error: {error}</div>}
+      {/* Your custom UI */}
+    </div>
+  );
+}
+```
+
+### Redux Store Integration
+
+```tsx
+import { 
+  store, 
+  useAppDispatch, 
+  useAppSelector,
+  selectMessages,
+  addNewMessage 
+} from '@smarteremr/chat-widget';
+
+function MessageDisplay() {
+  const messages = useAppSelector(selectMessages);
+  const dispatch = useAppDispatch();
+
+  const handleAddMessage = () => {
+    dispatch(addNewMessage({
+      id: Date.now().toString(),
+      content: 'New message',
+      senderDisplayName: 'User',
+      senderACSId: 'user-123',
+      version: 1,
+      createdOn: new Date().toISOString(),
+      updatedOn: new Date().toISOString()
+    }));
+  };
+
+  return (
+    <div>
+      {messages.map(message => (
+        <div key={message.id}>{message.content}</div>
+      ))}
+    </div>
+  );
+}
+```
+
+## 🛠️ Utilities
+
+### Date Utilities
+
+```tsx
+import { formatTime, formatDate, getRelativeTime } from '@smarteremr/chat-widget';
+
+const now = new Date();
+console.log(formatTime(now));        // "2:30 PM"
+console.log(formatDate(now));        // "12/25/2023"
+console.log(getRelativeTime(now));   // "Just now"
+```
+
+### Validation Utilities
+
+```tsx
+import { 
+  validateMessage, 
+  validateEmail, 
+  sanitizeInput,
+  isValidUUID 
+} from '@smarteremr/chat-widget';
+
+console.log(validateMessage('Hello'));                    // true
+console.log(validateEmail('user@example.com'));          // true
+console.log(sanitizeInput('<script>alert("xss")</script>')); // Safe HTML
+console.log(isValidUUID('123e4567-e89b-12d3-a456-426614174000')); // true
+```
+
+## 📁 Project Structure
+
+```
+@smarteremr-chat-widget/
+├── src/
+│   ├── components/          # React components
+│   │   ├── ChatWidget/      # Main widget component
+│   │   ├── ChatContainer/   # Message container
+│   │   ├── ChatHeader/      # Header with controls
+│   │   ├── MessageList/     # Message display
+│   │   ├── MessageInput/    # Input component
+│   │   ├── MessageBubble/   # Individual message
+│   │   ├── LoadingIndicator/# Loading states
+│   │   ├── ErrorBoundary/   # Error handling
+│   │   ├── ErrorDisplay/    # Error UI
+│   │   ├── DropdownMenu/    # Menu component
+│   │   ├── MenuButton/      # Menu button
+│   │   ├── MenuItem/        # Menu items
+│   │   └── StatusIndicator/ # Status display
+│   ├── config/              # Configuration
+│   │   ├── api.ts          # API interfaces
+│   │   └── constants.ts    # Constants
+│   ├── hooks/              # Custom hooks
+│   │   ├── useChatInit.ts  # Chat initialization
+│   │   └── index.ts        # Hook exports
+│   ├── services/           # Business logic
+│   │   ├── chatService.ts  # Main chat service
+│   │   ├── acs/            # Azure Communication Services
+│   │   └── api/            # API services
+│   ├── store/              # Redux store
+│   │   ├── store.ts        # Store configuration
+│   │   └── slices/         # Redux slices
+│   ├── styles/             # SCSS styles
+│   │   ├── global.scss     # Global styles
+│   │   ├── reset.scss      # CSS reset
+│   │   └── components/     # Component styles
+│   ├── types/              # TypeScript types
+│   ├── utils/              # Utility functions
+│   │   ├── dateUtils.ts    # Date formatting
+│   │   ├── validation.ts   # Input validation
+│   │   └── styleManager.ts # Theme management
+│   └── index.ts            # Main export
+├── lib/                    # Compiled output
+├── tests/                  # Test files
+├── package.json           # Package configuration
+├── tsconfig.json          # TypeScript config
+├── rollup.config.cjs      # Build configuration
+└── README.md              # This file
+```
+
+## 🧪 Testing
+
+```bash
+# Run tests
+npm test
+
+# Run tests in watch mode
+npm run test:watch
+
+# Run linting
+npm run lint
+```
+
+## 🏗️ Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the package
+npm run build
+
+# Build in watch mode
+npm run build:watch
+
+# Clean build artifacts
+npm run clean
+```
+
+## 📋 Requirements
+
+- **Node.js**: >= 16.0.0
+- **npm**: >= 8.0.0
+- **React**: >= 16.8.0
+- **React DOM**: >= 16.8.0
+
+## 🌐 Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+- Mobile browsers (iOS Safari, Chrome Mobile)
+
+## 🔒 Security
+
+The widget includes built-in security features:
+
+- **XSS Protection**: All user inputs are sanitized
+- **Input Validation**: Message length and format validation
+- **Error Boundaries**: Prevents crashes from propagating
+- **Secure API Communication**: Uses API keys for authentication
+
+## 🚨 Error Handling
+
+The widget provides comprehensive error handling:
+
+```tsx
+// Error boundary catches component errors
+<ErrorBoundary 
+  onError={(error, errorInfo) => {
+    console.error('Chat widget error:', error, errorInfo);
+  }}
+  fallback={<CustomErrorComponent />}
+>
+  <ChatWidget {...props} />
+</ErrorBoundary>
+```
+
+## 📈 Performance
+
+- **Code Splitting**: Components are lazy-loaded where possible
+- **Memoization**: React.memo used for expensive components
+- **Efficient Rendering**: Redux selectors prevent unnecessary re-renders
+- **Bundle Size**: Optimized build with tree-shaking
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create a feature branch: `git checkout -b feature/new-feature`
+3. Make your changes and add tests
+4. Run tests: `npm test`
+5. Commit your changes: `git commit -am 'Add new feature'`
+6. Push to the branch: `git push origin feature/new-feature`
+7. Submit a pull request
+
+## 📄 License
+
+MIT License - see [LICENSE](LICENSE) file for details.
+
+## 👥 Author
+
+**SmarterEMR Dev Team**
+
+## 🆘 Support
+
+For support and questions:
+
+1. Check the [documentation](#-api-reference)
+2. Search existing [issues](https://github.com/your-repo/issues)
+3. Create a new issue with detailed information
+4. Contact the development team
+
+## 📝 Changelog
+
+### v1.1.21
+- Current stable release
+- Full TypeScript support
+- Azure Communication Services integration
+- Comprehensive theming system
+- Error boundary implementation
+- Mobile responsiveness improvements
+
+---
+
+**Made with ❤️ for SmarterEMR**

package/lib/components/ChatContainer/ChatContainer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface ChatContainerProps {
+    isLoading?: boolean;
+    className?: string;
+    showDateSeparator?: boolean;
+    welcomeMessage?: string;
+}
+export declare const ChatContainer: React.FC<ChatContainerProps>;
+export default ChatContainer;
+//# sourceMappingURL=ChatContainer.d.ts.map

package/lib/components/ChatContainer/ChatContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatContainer.d.ts","sourceRoot":"","sources":["../../../src/components/ChatContainer/ChatContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqBtD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/ChatContainer/ChatContainer.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './ChatContainer.module.scss';
+import { MessageList } from '../MessageList';
+import { MessageInput } from '../MessageInput';
+export const ChatContainer = ({ isLoading = false, className }) => {
+    return (_jsxs("div", { className: `${styles.chatContainer} ${className || ''}`, children: [_jsx("div", { className: styles.messagesSection, children: _jsx(MessageList, { isLoading: isLoading }) }), _jsx("div", { className: styles.disclaimer, role: "note", "aria-live": "polite", children: "This is a private channel with your doctor for clinical questions. For billing/shipping/account issues, please reach out to support." }), _jsx("div", { className: styles.chatInputWrapper, children: _jsx(MessageInput, { disabled: false }) })] }));
+};
+export default ChatContainer;
+//# sourceMappingURL=ChatContainer.js.map

package/lib/components/ChatContainer/ChatContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatContainer.js","sourceRoot":"","sources":["../../../src/components/ChatContainer/ChatContainer.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,6BAA6B,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAS/C,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,SAAS,GAAG,KAAK,EACjB,SAAS,EACV,EAAE,EAAE;IACH,OAAO,CACL,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,aAAa,IAAI,SAAS,IAAI,EAAE,EAAE,aAC1D,cAAK,SAAS,EAAE,MAAM,CAAC,eAAe,YACpC,KAAC,WAAW,IAAC,SAAS,EAAE,SAAS,GAAI,GACjC,EAGN,cAAK,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,IAAI,EAAC,MAAM,eAAW,QAAQ,qJAE3D,EAGN,cAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,YACrC,KAAC,YAAY,IAAC,QAAQ,EAAE,KAAK,GAAI,GAC7B,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/ChatContainer/index.d.ts

@@ -0,0 +1,2 @@
+export { ChatContainer } from './ChatContainer';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/ChatContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ChatContainer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/components/ChatContainer/index.js

@@ -0,0 +1,2 @@
+export { ChatContainer } from './ChatContainer';
+//# sourceMappingURL=index.js.map

package/lib/components/ChatContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ChatContainer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/components/ChatHeader/ChatHeader.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { MenuItemConfig } from '../DropdownMenu';
+export interface ChatHeaderProps {
+    title?: string;
+    className?: string;
+    onRefresh?: () => void;
+    menuItems?: MenuItemConfig[];
+    showMenu?: boolean;
+}
+export declare const ChatHeader: React.FC<ChatHeaderProps>;
+export default ChatHeader;
+//# sourceMappingURL=ChatHeader.d.ts.map

package/lib/components/ChatHeader/ChatHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ChatHeader/ChatHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIjD,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkGhD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/ChatHeader/ChatHeader.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import styles from './ChatHeader.module.scss';
+import { DropdownMenu } from '../DropdownMenu';
+import { useSelector } from 'react-redux';
+import { selectThread } from '@/store/slices/threadSlice';
+export const ChatHeader = ({ title = 'Provider', className, onRefresh, menuItems = [], showMenu = false, }) => {
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const thread = useSelector(selectThread);
+    const headerTitle = thread?.threadType === 'medical' ? 'Provider' : 'Support';
+    const toggleMenu = () => {
+        setIsMenuOpen(!isMenuOpen);
+    };
+    const handleMenuButtonClick = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        toggleMenu();
+    };
+    const closeMenu = () => {
+        setIsMenuOpen(false);
+    };
+    return (_jsx("div", { className: `${styles.chatHeader} chat-header ${className || ''}`, children: _jsxs("div", { className: styles.headerContent, children: [_jsxs("div", { className: styles.leftSection, children: [_jsx("svg", { width: "26", height: "26", viewBox: "0 0 26 26", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M5 10.9998H6C6.92047 10.9998 7.66667 11.746 7.66667 12.6665V17.3332C7.66667 18.2536 6.92047 18.9998 6 18.9998H5C2.79086 18.9998 1 17.209 1 14.9998C1 12.7907 2.79086 10.9998 5 10.9998ZM5 10.9998V9.6665C5 5.24823 8.58172 1.6665 13 1.6665C17.4183 1.6665 21 5.24823 21 9.6665V10.9998M21 10.9998H20C19.0795 10.9998 18.3333 11.746 18.3333 12.6665V17.3332C18.3333 18.2536 19.0795 18.9998 20 18.9998H21M21 10.9998C23.2091 10.9998 25 12.7907 25 14.9998C25 17.209 23.2091 18.9998 21 18.9998M21 18.9998L20.1716 22.3133C19.8749 23.5004 18.8082 24.3332 17.5846 24.3332H14.3333", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("h3", { className: styles.title, children: headerTitle })] }), _jsxs("div", { className: styles.headerActions, children: [_jsx("button", { className: styles.actionButton, "aria-label": "Refresh", onClick: onRefresh, children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("g", { clipPath: "url(#clip0_55864_4683)", children: _jsx("path", { d: "M8 0C6.03034 0.00140425 4.13075 0.731081 2.66667 2.04867V0.666667C2.66667 0.489856 2.59643 0.320286 2.4714 0.195262C2.34638 0.0702379 2.17681 0 2 0C1.82319 0 1.65362 0.0702379 1.5286 0.195262C1.40357 0.320286 1.33333 0.489856 1.33333 0.666667V2.66667C1.33333 3.1971 1.54405 3.70581 1.91912 4.08088C2.29419 4.45595 2.8029 4.66667 3.33333 4.66667H5.33333C5.51015 4.66667 5.67971 4.59643 5.80474 4.47141C5.92976 4.34638 6 4.17681 6 4C6 3.82319 5.92976 3.65362 5.80474 3.5286C5.67971 3.40357 5.51015 3.33333 5.33333 3.33333H3.33333C3.31085 3.33 3.28859 3.32533 3.26667 3.31933C4.35301 2.22522 5.78542 1.54205 7.31938 1.38644C8.85333 1.23084 10.3938 1.61244 11.6777 2.46611C12.9616 3.31978 13.9095 4.5926 14.3595 6.0673C14.8094 7.54201 14.7337 9.12717 14.1451 10.5522C13.5564 11.9773 12.4915 13.1539 11.132 13.8812C9.77246 14.6085 8.20266 14.8414 6.69054 14.5401C5.17843 14.2389 3.81772 13.4222 2.8407 12.2295C1.86368 11.0367 1.33091 9.54183 1.33333 8C1.33333 7.82319 1.2631 7.65362 1.13807 7.5286C1.01305 7.40357 0.843478 7.33333 0.666667 7.33333C0.489856 7.33333 0.320286 7.40357 0.195262 7.5286C0.0702379 7.65362 0 7.82319 0 8C0 9.58225 0.469192 11.129 1.34824 12.4446C2.22729 13.7602 3.47672 14.7855 4.93853 15.391C6.40034 15.9965 8.00887 16.155 9.56072 15.8463C11.1126 15.5376 12.538 14.7757 13.6569 13.6569C14.7757 12.538 15.5376 11.1126 15.8463 9.56072C16.155 8.00887 15.9965 6.40034 15.391 4.93853C14.7855 3.47672 13.7602 2.22729 12.4446 1.34824C11.129 0.469192 9.58225 0 8 0V0Z", fill: "currentColor" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_55864_4683", children: _jsx("rect", { width: "16", height: "16", fill: "white" }) }) })] }) }), showMenu && (_jsxs("div", { className: styles.menuButtonContainer, onClick: (e) => e.stopPropagation(), children: [_jsx("button", { className: styles.actionButton, "aria-label": "Menu", onClick: handleMenuButtonClick, type: "button", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 13a1 1 0 100-2 1 1 0 000 2zM12 7a1 1 0 100-2 1 1 0 000 2zM12 19a1 1 0 100-2 1 1 0 000 2z" }) }) }), _jsx(DropdownMenu, { isOpen: isMenuOpen, onClose: closeMenu, menuItems: menuItems, position: "bottom-right" })] }))] })] }) }));
+};
+export default ChatHeader;
+//# sourceMappingURL=ChatHeader.js.map

package/lib/components/ChatHeader/ChatHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatHeader.js","sourceRoot":"","sources":["../../../src/components/ChatHeader/ChatHeader.tsx"],"names":[],"mappings":"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"}

package/lib/components/ChatHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { ChatHeader } from './ChatHeader';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/ChatHeader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ChatHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/lib/components/ChatHeader/index.js

@@ -0,0 +1,2 @@
+export { ChatHeader } from './ChatHeader';
+//# sourceMappingURL=index.js.map

package/lib/components/ChatHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ChatHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/lib/components/ChatWidget/ChatWidget.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { InitiateChatRequest } from '../../config/api';
+import { MenuItemConfig } from '../DropdownMenu';
+export interface ChatWidgetProps {
+    initParams: InitiateChatRequest;
+    primaryColor: string;
+    secondaryColor: string;
+    menuItems: MenuItemConfig[];
+    showMenu: boolean;
+}
+export declare const ChatWidget: React.FC<ChatWidgetProps>;
+export default ChatWidget;
+//# sourceMappingURL=ChatWidget.d.ts.map

package/lib/components/ChatWidget/ChatWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWidget.d.ts","sourceRoot":"","sources":["../../../src/components/ChatWidget/ChatWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAOzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIjD,MAAM,WAAW,eAAe;IAE9B,UAAU,EAAE,mBAAmB,CAAC;IAGhC,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IAGvB,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;CACnB;AA2ED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4BhD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/ChatWidget/ChatWidget.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Provider, ReactReduxContext } from 'react-redux';
+import { store } from '../../store';
+import { updateApiConfig } from '../../services/api/backendApi';
+import styles from './ChatWidget.module.scss';
+import { ChatContainer } from '../ChatContainer';
+import { ChatHeader } from '../ChatHeader';
+import { useChatInit } from '../../hooks';
+import { ErrorBoundary } from '../ErrorBoundary';
+import { ErrorDisplay } from '../ErrorDisplay';
+const InnerChatWidget = ({ initParams, primaryColor, secondaryColor, menuItems, showMenu }) => {
+    const { isInitializing, error, initializeChat } = useChatInit();
+    // Apply primary color to CSS custom properties
+    useEffect(() => {
+        if (primaryColor) {
+            document.documentElement.style.setProperty('--chat-primary-color', primaryColor);
+        }
+        if (secondaryColor) {
+            document.documentElement.style.setProperty('--chat-secondary-color', secondaryColor);
+        }
+    }, [primaryColor, secondaryColor]);
+    useEffect(() => {
+        const initialize = async () => {
+            if (!initParams || !initParams.baseUrl || !initParams.apiKey) {
+                return;
+            }
+            try {
+                const result = await initializeChat(initParams);
+                if (!result.success && result.error) {
+                    console.error('Chat initialization failed:', result.error);
+                }
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+                console.error('Error during chat initialization:', errorMessage);
+            }
+        };
+        initialize();
+    }, [initParams]);
+    const handleRefresh = () => {
+        // Check if we have valid API credentials before making any API calls
+        if (!initParams.baseUrl || !initParams.apiKey) {
+            return;
+        }
+        // Clear existing messages before reinitializing
+        initializeChat(initParams);
+    };
+    // If there's an initialization error, show error UI directly
+    if (error) {
+        return (_jsx(ErrorDisplay, { primaryColor: primaryColor, message: "We're having trouble loading this page. Please try again. If the issue persists, contact support.", onRetry: handleRefresh }));
+    }
+    return (_jsx("div", { className: styles.chatWidget, children: _jsxs("div", { className: styles.chatWindow, children: [_jsx(ChatHeader, { className: styles.header, onRefresh: handleRefresh, menuItems: menuItems, showMenu: showMenu }), _jsx(ChatContainer, { isLoading: isInitializing })] }) }));
+};
+export const ChatWidget = (props) => {
+    // Ensure API config is set synchronously so any initialization that runs
+    // during mount has the correct headers available. Calling this during
+    // render is safe because it only updates a module-level config object.
+    if (props.initParams && props.initParams.baseUrl && props.initParams.apiKey) {
+        updateApiConfig(props.initParams.baseUrl, props.initParams.apiKey);
+    }
+    return (_jsx(ReactReduxContext.Consumer, { children: (context) => 
+        // If the host app provides a Redux store via context, give that store
+        // reference to the chatService so service actions dispatch to the
+        // host store and selectors in components will update correctly.
+        context && context.store ? (_jsx(ErrorBoundary, { primaryColor: props.primaryColor, children: _jsx(InnerChatWidget, { ...props }) })) : (_jsx(Provider, { store: store, children: _jsx(ErrorBoundary, { primaryColor: props.primaryColor, children: _jsx(InnerChatWidget, { ...props }) }) })) }));
+};
+export default ChatWidget;
+//# sourceMappingURL=ChatWidget.js.map

package/lib/components/ChatWidget/ChatWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWidget.js","sourceRoot":"","sources":["../../../src/components/ChatWidget/ChatWidget.tsx"],"names":[],"mappings":"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"}

package/lib/components/ChatWidget/index.d.ts

@@ -0,0 +1,2 @@
+export { ChatWidget } from './ChatWidget';
+//# sourceMappingURL=index.d.ts.map