{"_id":"@bernierllc/messaging-ui","_rev":"8-3720f33777bc2998f7eea3098e3afa7e","name":"@bernierllc/messaging-ui","dist-tags":{"latest":"0.4.0"},"versions":{"0.1.1":{"name":"@bernierllc/messaging-ui","version":"0.1.1","keywords":["messaging","chat","ui","react","components","real-time","typescript"],"author":{"name":"Bernier LLC"},"license":"SEE LICENSE IN LICENSE","_id":"@bernierllc/messaging-ui@0.1.1","maintainers":[{"name":"alikhan410","email":"mczeyo@gmail.com"},{"name":"mkbernier","email":"mkbernier@gmail.com"}],"dist":{"shasum":"fba22c5f02c1bf67a3bcfa4246909068139903a3","tarball":"https://registry.npmjs.org/@bernierllc/messaging-ui/-/messaging-ui-0.1.1.tgz","fileCount":91,"integrity":"sha512-Gnq5hQ8CoqEmiqbW4XUH4+DXB1wBR9OEqdOBRn2foNSVABbdAAxHn8E3zjMZ2pA+0mbAa5DYZyQlwt3IxtZzgQ==","signatures":[{"sig":"MEUCIDXcQkjsofWaxL6qE/Z+vFKCXxRFHoCcN9ebyt4IGZu1AiEAtDk+mduWSYC/hyl9qkq9oihDZsSE38OqMj3MFCIsIQs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":225039},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"7b1b950de120c2f5fbd85ab3888683a222c484e7","scripts":{"dev":"tsc --watch","lint":"eslint src --ext .ts,.tsx","test":"echo 'Tests skipped for initial publish'","build":"tsc","clean":"rm -rf dist","test:run":"echo 'Tests skipped for initial publish'","test:watch":"jest --watch","test:coverage":"jest --coverage"},"_npmUser":{"name":"mkbernier","email":"mkbernier@gmail.com"},"_npmVersion":"11.4.2","description":"React components for messaging interfaces with real-time chat features","directories":{},"_nodeVersion":"24.4.1","dependencies":{"react":"^18.0.0","lodash":"^4.17.21","date-fns":"^2.30.0","react-dom":"^18.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","eslint":"^8.45.0","ts-jest":"^29.1.0","typescript":"^5.0.0","@types/jest":"^29.5.0","@types/react":"^18.0.0","@types/lodash":"^4.14.0","@types/react-dom":"^18.0.0","@testing-library/react":"^13.4.0","jest-environment-jsdom":"^29.5.0","@testing-library/jest-dom":"^5.16.0","@typescript-eslint/parser":"^6.0.0","@testing-library/user-event":"^14.4.0","@typescript-eslint/eslint-plugin":"^6.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/messaging-ui_0.1.1_1756313652799_0.8453855452322696","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@bernierllc/messaging-ui","version":"0.1.3","keywords":["messaging","chat","ui","react","components","real-time","typescript"],"author":{"name":"Bernier LLC"},"license":"SEE LICENSE IN LICENSE","_id":"@bernierllc/messaging-ui@0.1.3","maintainers":[{"name":"alikhan410","email":"mczeyo@gmail.com"},{"name":"mkbernier","email":"mkbernier@gmail.com"}],"dist":{"shasum":"4c3764927afd68efe6a86e7e32bda0baee8fee88","tarball":"https://registry.npmjs.org/@bernierllc/messaging-ui/-/messaging-ui-0.1.3.tgz","fileCount":91,"integrity":"sha512-mi048dSDu2Hbj94ix7eF41vimyZz+xpu3i/jJJZSIcdGz9y6+2uQFt53DzbS9KniCFVWymS91st/9kzFzUaDHA==","signatures":[{"sig":"MEUCIGctIAgsC2sP7PdSpPtufd1qM0tFG+HhEcgghHELRv+TAiEA/fGKCPpKK8wPND2k5zOiShxAmyjnIKuS5TWwd5IGssw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":225128},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"683786f5b043d9a96c9f49ed1f04f9dccd79eed3","scripts":{"dev":"tsc --watch","lint":"eslint src --ext .ts,.tsx","test":"echo 'Tests skipped for initial publish'","build":"tsc","clean":"rm -rf dist","test:run":"jest --watchAll=false","test:watch":"jest --watch","test:coverage":"jest --coverage"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:73c2a176-1fd1-4cec-bb43-4c3c9361f7b4"}},"_npmVersion":"lerna/9.0.3/node@v20.19.6+x64 (linux)","description":"React components for messaging interfaces with real-time chat features","directories":{},"_nodeVersion":"20.19.6","dependencies":{"react":"^18.0.0","lodash":"^4.17.21","date-fns":"^2.30.0","react-dom":"^18.0.0"},"publishConfig":{"access":"restricted","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","eslint":"^8.45.0","ts-jest":"^29.1.0","typescript":"^5.0.0","@types/jest":"^29.5.0","@types/react":"^18.0.0","@types/lodash":"^4.14.0","@types/react-dom":"^18.0.0","@testing-library/react":"^13.4.0","jest-environment-jsdom":"^29.5.0","@testing-library/jest-dom":"^5.16.0","@typescript-eslint/parser":"^6.0.0","@testing-library/user-event":"^14.4.0","@typescript-eslint/eslint-plugin":"^6.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/messaging-ui_0.1.3_1767644256728_0.2921478607856598","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@bernierllc/messaging-ui","version":"0.1.4","keywords":["messaging","chat","ui","react","components","real-time","typescript"],"author":{"name":"Bernier LLC"},"license":"SEE LICENSE IN LICENSE","_id":"@bernierllc/messaging-ui@0.1.4","maintainers":[{"name":"alikhan410","email":"mczeyo@gmail.com"},{"name":"mkbernier","email":"mkbernier@gmail.com"}],"dist":{"shasum":"61d1b461bc3082ec93839f0435dba190d721bce8","tarball":"https://registry.npmjs.org/@bernierllc/messaging-ui/-/messaging-ui-0.1.4.tgz","fileCount":91,"integrity":"sha512-TQdQnQBN8wL1if/Pe2MiDF6PBMwaNh1mmbY1QkyWyAY0irsi08Jic5su1OUDFX9Hx84h5dqgxyKl+nceLl++JQ==","signatures":[{"sig":"MEUCIQCK4aGuAB6VlhwXQURHLAlNI4WrLGTZ5k8QH/4JGB5atwIgMTm4NNTBVXrfgo7rz2Xe89xGwyzivAYIDMMOeXTyzio=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":225066},"main":"dist/index.js","_from":"file:bernierllc-messaging-ui-0.1.4.tgz","types":"dist/index.d.ts","scripts":{"dev":"tsc --watch","lint":"eslint src --ext .ts,.tsx","test":"echo 'Tests skipped for initial publish'","build":"tsc","clean":"rm -rf dist","test:run":"jest --watchAll=false","test:watch":"jest --watch","test:coverage":"jest --coverage"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:73c2a176-1fd1-4cec-bb43-4c3c9361f7b4"}},"_resolved":"/tmp/deca5bf4e90503c8c393de804cde4fdf/bernierllc-messaging-ui-0.1.4.tgz","_integrity":"sha512-TQdQnQBN8wL1if/Pe2MiDF6PBMwaNh1mmbY1QkyWyAY0irsi08Jic5su1OUDFX9Hx84h5dqgxyKl+nceLl++JQ==","_npmVersion":"11.11.0","description":"React components for messaging interfaces with real-time chat features","directories":{},"_nodeVersion":"20.20.0","dependencies":{"react":"^18.0.0","lodash":"^4.17.21","date-fns":"^2.30.0","react-dom":"^18.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","eslint":"^8.45.0","ts-jest":"^29.1.0","typescript":"^5.0.0","@types/jest":"^29.5.0","@types/react":"^18.0.0","@types/lodash":"^4.14.0","@types/react-dom":"^18.0.0","@testing-library/react":"^13.4.0","jest-environment-jsdom":"^29.5.0","@testing-library/jest-dom":"^5.16.0","@typescript-eslint/parser":"^6.0.0","@testing-library/user-event":"^14.4.0","@typescript-eslint/eslint-plugin":"^6.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/messaging-ui_0.1.4_1773078152323_0.10381612263834206","host":"s3://npm-registry-packages-npm-production"}},"0.1.5":{"name":"@bernierllc/messaging-ui","version":"0.1.5","keywords":["messaging","chat","ui","react","components","real-time","typescript"],"author":{"name":"Bernier LLC"},"license":"SEE LICENSE IN LICENSE","_id":"@bernierllc/messaging-ui@0.1.5","maintainers":[{"name":"alikhan410","email":"mczeyo@gmail.com"},{"name":"mkbernier","email":"mkbernier@gmail.com"}],"dist":{"shasum":"2238b17d8ba0dfe4ea3f5400f1cd796d9a15d86e","tarball":"https://registry.npmjs.org/@bernierllc/messaging-ui/-/messaging-ui-0.1.5.tgz","fileCount":91,"integrity":"sha512-wF51QEIxAWfNKFGVtAA0zlk67HCVPNuX4iiivIQOsZdLSr92LNkKEtBE92bqgBT9OCx2X0Ui6b7VCvq1+Yd24Q==","signatures":[{"sig":"MEUCIBtEDVoerElc8WAIeGxXnPdRrBwmJSORBJLmsLI5lWreAiEAvPVVoc+swOiJBkh2vjyTAswOBWzzKOtx1s3tL9AGwNs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":225066},"main":"dist/index.js","_from":"file:bernierllc-messaging-ui-0.1.5.tgz","types":"dist/index.d.ts","scripts":{"dev":"tsc --watch","lint":"eslint src --ext .ts,.tsx","test":"echo 'Tests skipped for initial publish'","build":"tsc","clean":"rm -rf dist","test:run":"jest --watchAll=false","test:watch":"jest --watch","test:coverage":"jest --coverage"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:73c2a176-1fd1-4cec-bb43-4c3c9361f7b4"}},"_resolved":"/home/runner/work/tools/tools/packages/ui/messaging-ui/bernierllc-messaging-ui-0.1.5.tgz","_integrity":"sha512-wF51QEIxAWfNKFGVtAA0zlk67HCVPNuX4iiivIQOsZdLSr92LNkKEtBE92bqgBT9OCx2X0Ui6b7VCvq1+Yd24Q==","_npmVersion":"11.11.0","description":"React components for messaging interfaces with real-time chat features","directories":{},"_nodeVersion":"20.20.0","dependencies":{"react":"^18.0.0","lodash":"^4.17.21","date-fns":"^2.30.0","react-dom":"^18.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","eslint":"^8.45.0","ts-jest":"^29.1.0","typescript":"^5.0.0","@types/jest":"^29.5.0","@types/react":"^18.0.0","@types/lodash":"^4.14.0","@types/react-dom":"^18.0.0","@testing-library/react":"^13.4.0","jest-environment-jsdom":"^29.5.0","@testing-library/jest-dom":"^5.16.0","@typescript-eslint/parser":"^6.0.0","@testing-library/user-event":"^14.4.0","@typescript-eslint/eslint-plugin":"^6.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/messaging-ui_0.1.5_1773163817830_0.556924193071769","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@bernierllc/messaging-ui","version":"0.2.0","keywords":["messaging","chat","ui","react","components","real-time","typescript"],"author":{"name":"Bernier LLC"},"license":"SEE LICENSE IN LICENSE","_id":"@bernierllc/messaging-ui@0.2.0","maintainers":[{"name":"alikhan410","email":"mczeyo@gmail.com"},{"name":"mkbernier","email":"mkbernier@gmail.com"}],"dist":{"shasum":"834fc4bae72067ea16fcbdb05bc6488994c98b85","tarball":"https://registry.npmjs.org/@bernierllc/messaging-ui/-/messaging-ui-0.2.0.tgz","fileCount":91,"integrity":"sha512-GJ0Mzk2n9NUmsGK6nFnB2uyqJLzrrh5JWdU7iY/9z3zEXd7ziVoFU2RRJTbup6IHtaF7iNYtw2tTSM8s4eLyOA==","signatures":[{"sig":"MEQCIC/LhzGg67zf2P1iCwBzYn1+FHzquPAU/bY5zrIjXcM2AiBBI2t9A7OnW+nOjm+Ny+DxmYbXQG++IcnxWSMjMXNHkA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":225066},"main":"dist/index.js","_from":"file:bernierllc-messaging-ui-0.2.0.tgz","types":"dist/index.d.ts","scripts":{"dev":"tsc --watch","lint":"eslint src --ext .ts,.tsx","test":"echo 'Tests skipped for initial publish'","build":"tsc","clean":"rm -rf dist","test:run":"jest --watchAll=false","test:watch":"jest --watch","test:coverage":"jest --coverage"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:73c2a176-1fd1-4cec-bb43-4c3c9361f7b4"}},"_resolved":"/home/runner/work/tools/tools/packages/ui/messaging-ui/bernierllc-messaging-ui-0.2.0.tgz","_integrity":"sha512-GJ0Mzk2n9NUmsGK6nFnB2uyqJLzrrh5JWdU7iY/9z3zEXd7ziVoFU2RRJTbup6IHtaF7iNYtw2tTSM8s4eLyOA==","_npmVersion":"11.14.1","description":"React components for messaging interfaces with real-time chat features","directories":{},"_nodeVersion":"20.20.2","dependencies":{"react":"^18.0.0","lodash":"^4.17.21","date-fns":"^2.30.0","react-dom":"^18.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","eslint":"^8.45.0","ts-jest":"^29.1.0","typescript":"^5.0.0","@types/jest":"^29.5.0","@types/react":"^18.0.0","@types/lodash":"^4.14.0","@types/react-dom":"^18.0.0","@testing-library/react":"^13.4.0","jest-environment-jsdom":"^29.5.0","@testing-library/jest-dom":"^5.16.0","@typescript-eslint/parser":"^6.0.0","@testing-library/user-event":"^14.4.0","@typescript-eslint/eslint-plugin":"^6.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/messaging-ui_0.2.0_1779242036675_0.6105948621677759","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@bernierllc/messaging-ui","version":"0.4.0","description":"React components for messaging interfaces with real-time chat features","main":"dist/index.js","types":"dist/index.d.ts","keywords":["messaging","chat","ui","react","components","real-time","typescript"],"author":{"name":"Bernier LLC"},"license":"SEE LICENSE IN LICENSE","dependencies":{"date-fns":"^2.30.0","lodash":"^4.17.21","react":"^18.0.0","react-dom":"^18.0.0"},"devDependencies":{"@testing-library/jest-dom":"^5.16.0","@testing-library/react":"^13.4.0","@testing-library/user-event":"^14.4.0","@types/jest":"^29.5.0","@types/lodash":"^4.14.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","eslint":"^8.45.0","jest":"^29.5.0","jest-environment-jsdom":"^29.5.0","ts-jest":"^29.1.0","typescript":"^5.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"scripts":{"build":"tsc","dev":"tsc --watch","test":"echo 'Tests skipped for initial publish'","test:run":"jest --watchAll=false","test:watch":"jest --watch","test:coverage":"jest --coverage","lint":"eslint src --ext .ts,.tsx","clean":"rm -rf dist"},"_id":"@bernierllc/messaging-ui@0.4.0","_integrity":"sha512-0ZMO/4tph0kB5Nd+wvIQwYZPF1Y3pTThGYmmnYmZpPUlH69pXNZBvh4N7HWVusZ14We8/VPDxq9MN93M3uuM+w==","_resolved":"/home/runner/work/tools/tools/packages/ui/messaging-ui/bernierllc-messaging-ui-0.4.0.tgz","_from":"file:bernierllc-messaging-ui-0.4.0.tgz","_nodeVersion":"20.20.2","_npmVersion":"11.14.1","dist":{"integrity":"sha512-0ZMO/4tph0kB5Nd+wvIQwYZPF1Y3pTThGYmmnYmZpPUlH69pXNZBvh4N7HWVusZ14We8/VPDxq9MN93M3uuM+w==","shasum":"5a72647d8c6ff9e941c6ee86f61ed9796584962c","tarball":"https://registry.npmjs.org/@bernierllc/messaging-ui/-/messaging-ui-0.4.0.tgz","fileCount":95,"unpackedSize":227809,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEohdBkftVPrQDZpVY7bmWhCXv+AwXTxTkUBum1w07cOAiAJImXpL/l3Uhnnotw9MV9PP2NPk8uHnu2Hj8cgVHkYIw=="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:73c2a176-1fd1-4cec-bb43-4c3c9361f7b4"}},"directories":{},"maintainers":[{"name":"alikhan410","email":"mczeyo@gmail.com"},{"name":"mkbernier","email":"mkbernier@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/messaging-ui_0.4.0_1779250789964_0.07999126025531922"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-27T16:54:12.683Z","modified":"2026-05-20T04:19:50.252Z","0.1.1":"2025-08-27T16:54:13.069Z","0.1.3":"2026-01-05T20:17:36.876Z","0.1.4":"2026-03-09T17:42:32.467Z","0.1.5":"2026-03-10T17:30:17.967Z","0.2.0":"2026-05-20T01:53:56.821Z","0.4.0":"2026-05-20T04:19:50.097Z"},"author":{"name":"Bernier LLC"},"license":"SEE LICENSE IN LICENSE","keywords":["messaging","chat","ui","react","components","real-time","typescript"],"description":"React components for messaging interfaces with real-time chat features","maintainers":[{"name":"alikhan410","email":"mczeyo@gmail.com"},{"name":"mkbernier","email":"mkbernier@gmail.com"}],"readme":"# @bernierllc/messaging-ui\n\nReact components for messaging interfaces with real-time chat features.\n\n## Installation\n\n```bash\nnpm install @bernierllc/messaging-ui\n```\n\n## Usage\n\n### Basic Chat Interface\n\n```typescript\nimport React, { useState } from 'react';\nimport { \n  ChatInterface, \n  User, \n  ChatRoom, \n  Message, \n  MessageData \n} from '@bernierllc/messaging-ui';\n\nconst MyChatApp: React.FC = () => {\n  const [messages, setMessages] = useState<Message[]>([]);\n  const [rooms, setRooms] = useState<ChatRoom[]>([]);\n  const [users, setUsers] = useState<User[]>([]);\n\n  const currentUser: User = {\n    id: 'user-1',\n    name: 'John Doe',\n    status: 'online',\n    metadata: {}\n  };\n\n  const handleSendMessage = (messageData: MessageData) => {\n    const newMessage: Message = {\n      id: `msg-${Date.now()}`,\n      content: messageData.content,\n      type: messageData.type,\n      sender: currentUser,\n      roomId: messageData.roomId,\n      timestamp: new Date(),\n      reactions: [],\n      status: 'sending',\n      metadata: {}\n    };\n    \n    setMessages(prev => [...prev, newMessage]);\n    \n    // Simulate message being sent\n    setTimeout(() => {\n      setMessages(prev => \n        prev.map(msg => \n          msg.id === newMessage.id \n            ? { ...msg, status: 'delivered' }\n            : msg\n        )\n      );\n    }, 1000);\n  };\n\n  const handleJoinRoom = (roomId: string) => {\n    console.log(`Joined room: ${roomId}`);\n  };\n\n  const handleLeaveRoom = (roomId: string) => {\n    console.log(`Left room: ${roomId}`);\n  };\n\n  const handleUserSelect = (user: User) => {\n    console.log(`Selected user: ${user.name}`);\n  };\n\n  return (\n    <div style={{ height: '100vh', width: '100%' }}>\n      <ChatInterface\n        currentUser={currentUser}\n        rooms={rooms}\n        messages={messages}\n        users={users}\n        onSendMessage={handleSendMessage}\n        onJoinRoom={handleJoinRoom}\n        onLeaveRoom={handleLeaveRoom}\n        onUserSelect={handleUserSelect}\n      />\n    </div>\n  );\n};\n\nexport default MyChatApp;\n```\n\n### Individual Components\n\n#### MessageList\n\n```typescript\nimport { MessageList } from '@bernierllc/messaging-ui';\n\nconst MyMessageList: React.FC = () => {\n  const handleMessageReact = (messageId: string, reaction: string) => {\n    console.log(`React to ${messageId} with ${reaction}`);\n  };\n\n  const handleMessageReply = (message: Message) => {\n    console.log('Reply to message:', message);\n  };\n\n  const handleMessageEdit = (messageId: string, content: string) => {\n    console.log(`Edit message ${messageId}: ${content}`);\n  };\n\n  const handleMessageDelete = (messageId: string) => {\n    console.log(`Delete message ${messageId}`);\n  };\n\n  return (\n    <MessageList\n      messages={messages}\n      currentUser={currentUser}\n      onMessageReact={handleMessageReact}\n      onMessageReply={handleMessageReply}\n      onMessageEdit={handleMessageEdit}\n      onMessageDelete={handleMessageDelete}\n      hasMore={true}\n      onLoadMore={() => console.log('Load more messages')}\n    />\n  );\n};\n```\n\n#### MessageInput\n\n```typescript\nimport { MessageInput } from '@bernierllc/messaging-ui';\n\nconst MyMessageInput: React.FC = () => {\n  const handleSendMessage = (content: string, attachments?: File[]) => {\n    console.log('Send message:', { content, attachments });\n  };\n\n  const handleTyping = (isTyping: boolean) => {\n    console.log('Typing status:', isTyping);\n  };\n\n  return (\n    <MessageInput\n      onSendMessage={handleSendMessage}\n      onTyping={handleTyping}\n      placeholder=\"Type a message...\"\n      allowAttachments={true}\n      allowEmojis={true}\n      maxLength={1000}\n    />\n  );\n};\n```\n\n#### UserList\n\n```typescript\nimport { UserList } from '@bernierllc/messaging-ui';\n\nconst MyUserList: React.FC = () => {\n  const handleUserSelect = (user: User) => {\n    console.log('Selected user:', user);\n  };\n\n  return (\n    <UserList\n      users={users}\n      currentUser={currentUser}\n      onUserSelect={handleUserSelect}\n    />\n  );\n};\n```\n\n## API Reference\n\n### Core Types\n\n#### User\n```typescript\ninterface User {\n  id: string;\n  name: string;\n  avatar?: string;\n  status: 'online' | 'offline' | 'away' | 'busy';\n  lastSeen?: Date;\n  isTyping?: boolean;\n  metadata: Record<string, unknown>;\n}\n```\n\n#### Message\n```typescript\ninterface Message {\n  id: string;\n  content: string;\n  type: 'text' | 'image' | 'file' | 'system';\n  sender: User;\n  roomId: string;\n  timestamp: Date;\n  editedAt?: Date;\n  reactions: MessageReaction[];\n  attachments?: MessageAttachment[];\n  replyTo?: Message;\n  status: 'sending' | 'sent' | 'delivered' | 'read' | 'error';\n  metadata: Record<string, unknown>;\n}\n```\n\n#### ChatRoom\n```typescript\ninterface ChatRoom {\n  id: string;\n  name: string;\n  type: 'direct' | 'group' | 'channel';\n  participants: User[];\n  lastMessage?: Message;\n  unreadCount: number;\n  isActive: boolean;\n  createdAt: Date;\n  updatedAt: Date;\n  metadata: Record<string, unknown>;\n}\n```\n\n### Components\n\n#### ChatInterface\nComplete chat interface with sidebar and message area.\n\n**Props:**\n- `currentUser: User` - The current logged-in user\n- `rooms: ChatRoom[]` - Array of available chat rooms\n- `messages: Message[]` - Array of messages to display\n- `users: User[]` - Array of all users\n- `onSendMessage: (message: MessageData) => void` - Handle message sending\n- `onJoinRoom: (roomId: string) => void` - Handle room joining\n- `onLeaveRoom: (roomId: string) => void` - Handle room leaving\n- `onUserSelect: (user: User) => void` - Handle user selection\n- `loading?: boolean` - Show loading state\n- `error?: string` - Show error state\n- `className?: string` - Additional CSS classes\n\n#### MessageList\nScrollable list of messages with actions.\n\n**Props:**\n- `messages: Message[]` - Messages to display\n- `currentUser: User` - Current user for message ownership\n- `onMessageReact: (messageId: string, reaction: string) => void` - Handle reactions\n- `onMessageReply: (message: Message) => void` - Handle replies\n- `onMessageEdit: (messageId: string, content: string) => void` - Handle editing\n- `onMessageDelete: (messageId: string) => void` - Handle deletion\n- `loading?: boolean` - Show loading indicator\n- `hasMore?: boolean` - Whether more messages can be loaded\n- `onLoadMore?: () => void` - Load more messages\n- `className?: string` - Additional CSS classes\n\n#### MessageInput\nInput field for typing and sending messages.\n\n**Props:**\n- `onSendMessage: (content: string, attachments?: File[]) => void` - Handle message sending\n- `onTyping: (isTyping: boolean) => void` - Handle typing indicator\n- `placeholder?: string` - Input placeholder text\n- `disabled?: boolean` - Disable input\n- `maxLength?: number` - Maximum message length (default: 1000)\n- `allowAttachments?: boolean` - Enable file attachments (default: true)\n- `allowEmojis?: boolean` - Enable emoji picker (default: true)\n- `className?: string` - Additional CSS classes\n\n#### MessageBubble\nIndividual message display with reactions and actions.\n\n**Props:**\n- `message: Message` - Message to display\n- `currentUser: User` - Current user for ownership checks\n- `showTimestamp?: boolean` - Show message timestamp (default: true)\n- `showStatus?: boolean` - Show message status (default: true)\n- `onReact: (reaction: string) => void` - Handle reactions\n- `onReply: () => void` - Handle reply action\n- `onEdit: (content: string) => void` - Handle edit action\n- `onDelete: () => void` - Handle delete action\n- `className?: string` - Additional CSS classes\n\n#### UserList\nList of users with status indicators.\n\n**Props:**\n- `users: User[]` - Users to display\n- `currentUser: User` - Current user (excluded from list)\n- `onUserSelect: (user: User) => void` - Handle user selection\n- `className?: string` - Additional CSS classes\n\n#### RoomList\nList of chat rooms with unread indicators.\n\n**Props:**\n- `rooms: ChatRoom[]` - Rooms to display\n- `currentUser: User` - Current user\n- `selectedRoom?: ChatRoom | null` - Currently selected room\n- `onRoomSelect: (room: ChatRoom) => void` - Handle room selection\n- `onRoomLeave: (roomId: string) => void` - Handle room leaving\n- `className?: string` - Additional CSS classes\n\n#### Supporting Components\n\n- `UserAvatar` - User avatar with status indicator\n- `MessageStatus` - Message delivery status indicator\n- `MessageTimestamp` - Formatted message timestamp\n- `UnreadBadge` - Unread message count badge\n- `TypingIndicator` - Shows when users are typing\n- `MessageReactions` - Display and interact with message reactions\n- `FileUpload` - File attachment upload button\n- `EmojiPicker` - Emoji selection interface\n- `SearchBar` - Search input with clear functionality\n\n## Features\n\n### Real-time Messaging\n- Live message updates\n- Typing indicators\n- User presence status\n- Message delivery status\n\n### Rich Message Features\n- Text messages with mentions and URLs\n- File attachments (images, videos, audio, documents)\n- Message reactions with emoji\n- Reply to messages\n- Edit and delete messages\n- Message timestamps\n\n### User Interface\n- Responsive design (mobile-friendly)\n- Dark/light theme support\n- Keyboard shortcuts\n- Accessibility support\n- Virtual scrolling for performance\n\n### Chat Management\n- Multiple room types (direct, group, channel)\n- Room creation and management\n- User lists with online status\n- Search functionality\n- Message history with pagination\n\n## Styling\n\nThe components use CSS classes that can be styled with your preferred styling solution:\n\n```css\n/* Main chat interface */\n.chat-interface {\n  display: flex;\n  height: 100%;\n}\n\n.chat-sidebar {\n  width: 250px;\n  background: #f5f5f5;\n}\n\n.chat-main {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n/* Message components */\n.message-bubble {\n  padding: 8px 12px;\n  margin: 4px 0;\n  border-radius: 12px;\n}\n\n.message-bubble--own {\n  background: #007bff;\n  color: white;\n  margin-left: auto;\n}\n\n.message-bubble--other {\n  background: #e9ecef;\n  color: #333;\n}\n\n/* Input components */\n.message-input {\n  padding: 16px;\n  border-top: 1px solid #dee2e6;\n}\n\n.message-textarea {\n  width: 100%;\n  border: none;\n  outline: none;\n  resize: none;\n}\n\n/* User components */\n.user-avatar {\n  position: relative;\n  display: inline-block;\n}\n\n.user-status {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  border: 2px solid white;\n}\n```\n\n## Integration Examples\n\n### With Socket.IO\n```typescript\nimport io from 'socket.io-client';\n\nconst socket = io('ws://localhost:3001');\n\nconst ChatApp: React.FC = () => {\n  // ... state management\n\n  useEffect(() => {\n    socket.on('message', (message: Message) => {\n      setMessages(prev => [...prev, message]);\n    });\n\n    socket.on('typing', (data: { userId: string; isTyping: boolean }) => {\n      // Update typing state\n    });\n\n    return () => {\n      socket.off('message');\n      socket.off('typing');\n    };\n  }, []);\n\n  const handleSendMessage = (messageData: MessageData) => {\n    socket.emit('sendMessage', messageData);\n  };\n\n  const handleTyping = (isTyping: boolean) => {\n    socket.emit('typing', { isTyping });\n  };\n\n  // ... render ChatInterface\n};\n```\n\n### With Redux/Context\n```typescript\nimport { useContext } from 'react';\nimport { ChatContext } from './ChatContext';\n\nconst ChatApp: React.FC = () => {\n  const {\n    currentUser,\n    rooms,\n    messages,\n    users,\n    sendMessage,\n    joinRoom,\n    leaveRoom,\n    selectUser\n  } = useContext(ChatContext);\n\n  return (\n    <ChatInterface\n      currentUser={currentUser}\n      rooms={rooms}\n      messages={messages}\n      users={users}\n      onSendMessage={sendMessage}\n      onJoinRoom={joinRoom}\n      onLeaveRoom={leaveRoom}\n      onUserSelect={selectUser}\n    />\n  );\n};\n```\n\n## Accessibility\n\nThe components include ARIA labels, keyboard navigation, and screen reader support:\n\n- Keyboard navigation with Tab, Enter, and Escape\n- ARIA labels for interactive elements\n- Screen reader announcements for new messages\n- High contrast mode support\n- Focus management\n\n## Performance\n\n- Virtual scrolling for large message lists\n- Debounced typing indicators\n- Optimized re-renders with React.memo\n- Efficient message grouping algorithms\n- Lazy loading of message history\n\n## Browser Support\n\n- Modern browsers (Chrome, Firefox, Safari, Edge)\n- ES2020+ JavaScript features\n- React 18+ required\n- TypeScript support included\n\n## Contributing\n\nThis package is part of the BernierLLC tools ecosystem. For development guidelines, see the main repository documentation.\n\n## License\n\nCopyright (c) 2025 Bernier LLC. All rights reserved.\n\nThis file is licensed to the client under a limited-use license. The client may use and modify this code only within the scope of the project it was delivered for. Redistribution or use in other products or commercial offerings is not permitted without written consent from Bernier LLC.","readmeFilename":"README.md"}