movius-chats 1.0.0

package/README.md

@@ -0,0 +1,249 @@
+# React Native Modern Chats UI
+
+A highly customizable, feature-rich chats interface component for React Native applications. Built with performance and flexibility in mind, this component provides a complete solution for implementing chats functionality in your mobile applications.
+
+## Features
+
+- 🚀 Full TypeScript support
+- 📱 Native performance optimizations
+- 🎨 Extensive theme customization
+- 🖼️ Multi-media message support (text, images, video, audio)
+- 👤 Avatar and username display options
+- ⌨️ Typing indicators
+- 📎 File attachments
+- 🎥 Camera integration
+- 🎤 Voice messages
+- 💬 Message status indicators (sent, delivered, read)
+- 🎯 Custom component injection
+- 🔧 Comprehensive styling API
+
+## Installation
+
+```bash
+npm install movius-chats
+# or
+yarn add movius-chats
+```
+
+### Required Dependencies
+
+The following packages are required for movius-chats to function properly. Install them using npm or yarn:
+
+```bash
+# Using npm
+npm install react-native-image-zoom-viewer react-native-reanimated react-native-sound react-native-svg react-native-video twrnc
+
+# Using yarn
+yarn add react-native-image-zoom-viewer react-native-reanimated react-native-sound react-native-svg react-native-video twrnc
+```
+
+### Additional Setup
+
+For react-native-reanimated, add this line to your `babel.config.js`:
+
+```javascript
+module.exports = {
+  plugins: ['react-native-reanimated/plugin'],
+};
+```
+
+## Basic Usage
+
+```typescript
+import { ChatScreen, Message } from 'movius-chats';
+import { useState } from 'react';
+
+const App = () => {
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  const handleSendMessage = (message: Omit<Message, "id" | "time" | "status">) => {
+    // Handle sending message
+    const newMessage: Message = {
+      ...message,
+      id: Date.now().toString(),
+      time: new Date().toLocaleTimeString(),
+      status: 'sent'
+    };
+    setMessages(prev => [newMessage, ...prev]);
+  };
+
+  return (
+    <ChatScreen
+      messages={messages}
+      currentUserId="user123"
+      onSendMessage={handleSendMessage}
+      showAvatars
+    />
+  );
+};
+```
+
+## Props
+
+### Core Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| messages | Message[] | Yes | Array of message objects to display |
+| currentUserId | string | Yes | ID of the current user |
+| onSendMessage | (message: Omit<Message, "id" \| "time" \| "status">) => void | Yes | Callback when a message is sent |
+
+### Message Type
+
+```typescript
+interface Message {
+  id: string;
+  text?: string;
+  image?: string;
+  video?: string;
+  audio?: string;
+  senderId: string;
+  time: string;
+  status: "read" | "delivered" | "sent";
+  senderName?: string;
+  senderAvatar?: string;
+}
+```
+
+### Feature Flags
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| showAvatars | boolean | false | Show user avatars |
+| showUserNames | boolean | false | Display usernames above messages |
+| showEmojiButton | boolean | true | Show emoji picker button |
+| showAttachmentsButton | boolean | true | Show attachments button |
+| showCameraButton | boolean | true | Show camera access button |
+| showVoiceRecordButton | boolean | true | Show voice recording button |
+| showBubbleTail | boolean | true | Show message bubble tails |
+| showMessageStatus | boolean | true | Show message status indicators |
+
+### Event Handlers
+
+| Prop | Type | Description |
+|------|------|-------------|
+| onMessageLongPress | (message: Message) => void | Callback for long-pressing a message |
+| onAttachmentPress | () => void | Callback for attachment button press |
+| onAudioRecordStart | () => void | Callback when audio recording starts |
+| onAudioRecordEnd | () => void | Callback when audio recording ends |
+| onCameraPress | () => void | Callback for camera button press |
+| onTypingStart | () => void | Callback when user starts typing |
+| onTypingEnd | () => void | Callback when user stops typing |
+
+### Theming
+
+The component supports extensive theming through the `theme` prop:
+
+```typescript
+theme?: {
+  colors?: {
+    sentMessageTailColor?: string;
+    receivedMessageTailColor?: string;
+    timestamp?: string;
+    inputsIconsColor?: string;
+    sendIconsColor?: string;
+    placeholderTextColor?: string;
+    audioPlayIconColor?: string;
+    audioPauseIconColor?: string;
+    videoPlayIconColor?: string;
+  };
+  bubbleStyle?: {
+    sent?: ViewStyle;
+    received?: ViewStyle;
+    // ... other bubble styles
+  };
+  messageStyle?: {
+    textStyle?: TextStyle;
+    // ... other message styles
+  };
+  inputStyles?: {
+    inputSectionContainerStyle?: ViewStyle;
+    // ... other input styles
+  };
+}
+```
+
+### Custom Components
+
+You can provide custom components for various elements:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| renderCustomInput | () => React.ReactNode | Custom input component |
+| renderCustomVideoBubbleError | () => React.ReactNode | Custom video error display |
+| renderCustomTyping | () => React.ReactNode | Custom typing indicator |
+| CustomEmojiIcon | () => React.ReactNode | Custom emoji picker icon |
+| CustomAttachmentIcon | () => React.ReactNode | Custom attachment icon |
+| CustomCameraIcon | () => React.ReactNode | Custom camera icon |
+| CustomSendIcon | () => React.ReactNode | Custom send button icon |
+| CustomMicrophoneIcon | () => React.ReactNode | Custom microphone icon |
+| CustomPlayIcon | () => React.ReactNode | Custom play icon |
+| CustomPauseIcon | () => React.ReactNode | Custom pause icon |
+
+## Advanced Usage
+
+### Custom Theme Example
+
+```typescript
+<ChatScreen
+  messages={messages}
+  currentUserId="user123"
+  onSendMessage={handleSendMessage}
+  theme={{
+    colors: {
+      sentMessageTailColor: '#007AFF',
+      receivedMessageTailColor: '#E9E9EB',
+      timestamp: '#8E8E93',
+    },
+    bubbleStyle: {
+      sent: {
+        backgroundColor: '#007AFF',
+        borderRadius: 20,
+      },
+      received: {
+        backgroundColor: '#E9E9EB',
+        borderRadius: 20,
+      },
+    },
+  }}
+/>
+```
+
+### Custom Input Component
+
+```typescript
+<ChatScreen
+  messages={messages}
+  currentUserId="user123"
+  onSendMessage={handleSendMessage}
+  renderCustomInput={() => (
+    <YourCustomInputComponent
+      onSend={(text) => {
+        handleSendMessage({
+          text,
+          senderId: 'user123',
+        });
+      }}
+    />
+  )}
+/>
+```
+
+## Performance Considerations
+
+- Messages are rendered using `FlatList` for optimal performance
+- Avatar images are cached automatically
+- Media messages use lazy loading
+- Typing indicators are debounced
+
+## Contributing
+
+We welcome contributions! Please see our contributing guide for details.
+
+## License
+
+MIT
+
+## Support
+
+For issues and feature requests, please file an issue on the GitHub repository.

package/lib/commonjs/assets/Icons/ArrowBack2RoundedIcon.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react-native-svg"),r=require("react/jsx-runtime");exports.ArrowBack2RoundedIcon=({style:o,color:t})=>r.jsx(e,{style:o,fill:t,viewBox:"0 0 48 48",children:r.jsx(e.Path,{fillRule:"evenodd",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"4",d:"M8 9.115c0-1.82 2.235-2.694 3.47-1.356l29.432 31.884c1.182 1.282.273 3.357-1.47 3.357H10a2 2 0 0 1-2-2z",clipRule:"evenodd"})});
+//# sourceMappingURL=ArrowBack2RoundedIcon.js.map

package/lib/commonjs/assets/Icons/ArrowBack2RoundedIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowBack2RoundedIcon.js","sources":["../../../../src/assets/Icons/ArrowBack2RoundedIcon.tsx"],"sourcesContent":["\nimport { ViewStyle } from \"react-native\";\nimport Svg, { Path } from \"react-native-svg\";\n\nexport const ArrowBack2RoundedIcon = ({\n  style,\n  color,\n}: {\n  style?: ViewStyle;\n  color?: string;\n}) => {\n  return (\n    <Svg style={style} fill={color} viewBox=\"0 0 48 48\">\n      <Path\n        fillRule=\"evenodd\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"4\"\n        d=\"M8 9.115c0-1.82 2.235-2.694 3.47-1.356l29.432 31.884c1.182 1.282.273 3.357-1.47 3.357H10a2 2 0 0 1-2-2z\"\n        clipRule=\"evenodd\"\n      ></Path>\n    </Svg>\n  );\n};\n"],"names":["ArrowBack2RoundedIcon","style","color","_jsx","Svg","fill","viewBox","children","jsx","Path","fillRule","stroke","strokeLinecap","strokeLinejoin","strokeWidth","d","clipRule"],"mappings":"4GAIqCA,EACnCC,QACAC,WAMEC,EAAAA,IAACC,EAAG,CAACH,MAAOA,EAAOI,KAAMH,EAAOI,QAAQ,YAAWC,SACjDJ,EAAAK,IAACC,OAAI,CACHC,SAAS,UACTC,OAAO,eACPC,cAAc,QACdC,eAAe,QACfC,YAAY,IACZC,EAAE,0GACFC,SAAS"}

package/lib/commonjs/assets/Icons/CameraIcon.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react-native-svg"),r=require("react/jsx-runtime");exports.CameraIcon=({style:c,color:s})=>r.jsx(e.Svg,{style:c,viewBox:"0 0 24 24",children:r.jsxs(e.G,{fill:"none",strokeWidth:"1.5",stroke:s,children:[r.jsx(e.Circle,{cx:"12",cy:"13",r:"3"}),r.jsx(e.Path,{d:"M9.778 21h4.444c3.121 0 4.682 0 5.803-.735a4.4 4.4 0 0 0 1.226-1.204c.749-1.1.749-2.633.749-5.697s0-4.597-.749-5.697a4.4 4.4 0 0 0-1.226-1.204c-.72-.473-1.622-.642-3.003-.702c-.659 0-1.226-.49-1.355-1.125A2.064 2.064 0 0 0 13.634 3h-3.268c-.988 0-1.839.685-2.033 1.636c-.129.635-.696 1.125-1.355 1.125c-1.38.06-2.282.23-3.003.702A4.4 4.4 0 0 0 2.75 7.667C2 8.767 2 10.299 2 13.364s0 4.596.749 5.697c.324.476.74.885 1.226 1.204C5.096 21 6.657 21 9.778 21Z"}),r.jsx(e.Path,{strokeLinecap:"round",d:"M19 10h-1"})]})});
+//# sourceMappingURL=CameraIcon.js.map

package/lib/commonjs/assets/Icons/CameraIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CameraIcon.js","sources":["../../../../src/assets/Icons/CameraIcon.tsx"],"sourcesContent":["import { ViewStyle } from \"react-native\";\nimport { Circle, G, Path, Svg } from \"react-native-svg\";\n\nexport const CameraIcon = ({\n  style,\n  color\n}: {\n  style?: ViewStyle;\n  color?: string;\n}) => {\n  return (\n    <Svg style={style} viewBox=\"0 0 24 24\">\n      <G fill=\"none\" strokeWidth=\"1.5\" stroke={color}>\n        <Circle cx=\"12\" cy=\"13\" r=\"3\"></Circle>\n        <Path d=\"M9.778 21h4.444c3.121 0 4.682 0 5.803-.735a4.4 4.4 0 0 0 1.226-1.204c.749-1.1.749-2.633.749-5.697s0-4.597-.749-5.697a4.4 4.4 0 0 0-1.226-1.204c-.72-.473-1.622-.642-3.003-.702c-.659 0-1.226-.49-1.355-1.125A2.064 2.064 0 0 0 13.634 3h-3.268c-.988 0-1.839.685-2.033 1.636c-.129.635-.696 1.125-1.355 1.125c-1.38.06-2.282.23-3.003.702A4.4 4.4 0 0 0 2.75 7.667C2 8.767 2 10.299 2 13.364s0 4.596.749 5.697c.324.476.74.885 1.226 1.204C5.096 21 6.657 21 9.778 21Z\"></Path>\n        <Path strokeLinecap=\"round\" d=\"M19 10h-1\"></Path>\n      </G>\n    </Svg>\n  );\n};\n"],"names":["CameraIcon","style","color","_jsx","Svg","viewBox","children","_jsxs","jsxs","G","fill","strokeWidth","stroke","jsx","Circle","cx","cy","r","Path","d","strokeLinecap"],"mappings":"iGAG0BA,EACxBC,QACAC,WAMEC,EAAAA,IAACC,EAAAA,IAAG,CAACH,MAAOA,EAAOI,QAAQ,YAAWC,SACpCC,EAAAC,KAACC,IAAC,CAACC,KAAK,OAAOC,YAAY,MAAMC,OAAQV,EAAMI,SAAA,CAC7CH,EAAAU,IAACC,SAAM,CAACC,GAAG,KAAKC,GAAG,KAAKC,EAAE,MAC1Bd,EAAAU,IAACK,OAAI,CAACC,EAAE,2cACRhB,EAAAU,IAACK,OAAI,CAACE,cAAc,QAAQD,EAAE"}

package/lib/commonjs/assets/Icons/CheckAllIcon.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react-native-svg"),l=require("react/jsx-runtime");exports.CheckAllIcon=({style:r})=>l.jsx(e,{style:r,viewBox:"0 0 24 24",children:l.jsx(e.Path,{d:"M.41 13.41L6 19l1.41-1.42L1.83 12m20.41-6.42L11.66 16.17L7.5 12l-1.43 1.41L11.66 19l12-12M18 7l-1.41-1.42l-6.35 6.35l1.42 1.41z"})});
+//# sourceMappingURL=CheckAllIcon.js.map

package/lib/commonjs/assets/Icons/CheckAllIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckAllIcon.js","sources":["../../../../src/assets/Icons/CheckAllIcon.tsx"],"sourcesContent":["\nimport { ViewStyle } from \"react-native\";\nimport Svg, { Path } from \"react-native-svg\";\n\nexport const CheckAllIcon = ({ style }: { style?: ViewStyle }) => {\n  return (\n    <Svg style={style} viewBox=\"0 0 24 24\">\n      <Path\n        d=\"M.41 13.41L6 19l1.41-1.42L1.83 12m20.41-6.42L11.66 16.17L7.5 12l-1.43 1.41L11.66 19l12-12M18 7l-1.41-1.42l-6.35 6.35l1.42 1.41z\"\n      ></Path>\n    </Svg>\n  );\n};\n"],"names":["CheckAllIcon","style","_jsx","Svg","viewBox","children","jsx","Path","d"],"mappings":"mGAI4BA,EAAGC,WAE3BC,EAAAA,IAACC,EAAG,CAACF,MAAOA,EAAOG,QAAQ,YAAWC,SACpCH,EAAAI,IAACC,OAAI,CACHC,EAAE"}

package/lib/commonjs/assets/Icons/CheckIcon.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react-native-svg"),r=require("react/jsx-runtime");exports.CheckIcon=({style:t})=>r.jsx(e,{style:t,viewBox:"0 0 24 24",children:r.jsx(e.Path,{d:"m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"})});
+//# sourceMappingURL=CheckIcon.js.map

package/lib/commonjs/assets/Icons/CheckIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckIcon.js","sources":["../../../../src/assets/Icons/CheckIcon.tsx"],"sourcesContent":["\nimport { ViewStyle } from \"react-native\";\nimport Svg, { Path } from \"react-native-svg\";\n\nexport const CheckIcon = ({ style }: { style?: ViewStyle }) => {\n  return (\n    <Svg style={style} viewBox=\"0 0 24 24\">\n      <Path d=\"m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z\"></Path>\n    </Svg>\n  );\n};\n"],"names":["CheckIcon","style","_jsx","Svg","viewBox","children","jsx","Path","d"],"mappings":"gGAIyBA,EAAGC,WAExBC,EAAAA,IAACC,EAAG,CAACF,MAAOA,EAAOG,QAAQ,YAAWC,SACpCH,EAAAI,IAACC,OAAI,CAACC,EAAE"}

package/lib/commonjs/assets/Icons/EmojiFunnySquareIcon.js

@@ -0,0 +1,2 @@
+"use strict";var r=require("react-native-svg"),e=require("react/jsx-runtime");exports.EmojiFunnySquareIcon=({style:s,color:t})=>e.jsx(r,{style:s,viewBox:"0 0 24 24",children:e.jsxs(r.G,{fill:"none",stroke:t,children:[e.jsx(r.Path,{strokeLinecap:"round",strokeWidth:"1.5",d:"M8.913 15.934c1.258.315 2.685.315 4.122-.07s2.673-1.099 3.605-2.001"}),e.jsx(r.Ellipse,{cx:"14.509",cy:"9.774",fill:"currentColor",rx:"1",ry:"1.5",transform:"rotate(-15 14.51 9.774)"}),e.jsx(r.Ellipse,{cx:"8.714",cy:"11.328",fill:"currentColor",rx:"1",ry:"1.5",transform:"rotate(-15 8.714 11.328)"}),e.jsx(r.Path,{strokeWidth:"1.5",d:"M3.204 14.357c-1.112-4.147-1.667-6.22-.724-7.853s3.016-2.19 7.163-3.3c4.147-1.112 6.22-1.667 7.853-.724s2.19 3.016 3.3 7.163c1.111 4.147 1.667 6.22.724 7.853s-3.016 2.19-7.163 3.3c-4.147 1.111-6.22 1.667-7.853.724s-2.19-3.016-3.3-7.163Z"}),e.jsx(r.Path,{strokeWidth:"1.5",d:"m13 16l.478.974a1.5 1.5 0 1 0 2.693-1.322l-.46-.935"})]})});
+//# sourceMappingURL=EmojiFunnySquareIcon.js.map

package/lib/commonjs/assets/Icons/EmojiFunnySquareIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiFunnySquareIcon.js","sources":["../../../../src/assets/Icons/EmojiFunnySquareIcon.tsx"],"sourcesContent":["\nimport { ViewStyle } from \"react-native\";\nimport Svg, { Ellipse, G, Path } from \"react-native-svg\";\n\nexport const EmojiFunnySquareIcon = ({ style ,color}: { style?: ViewStyle,color?: string }) => {\n  return (\n    <Svg style={style} viewBox=\"0 0 24 24\">\n      <G fill=\"none\" stroke={color}>\n        <Path\n          strokeLinecap=\"round\"\n          strokeWidth=\"1.5\"\n          d=\"M8.913 15.934c1.258.315 2.685.315 4.122-.07s2.673-1.099 3.605-2.001\"\n        ></Path>\n        <Ellipse\n          cx=\"14.509\"\n          cy=\"9.774\"\n          fill=\"currentColor\"\n          rx=\"1\"\n          ry=\"1.5\"\n          transform=\"rotate(-15 14.51 9.774)\"\n        ></Ellipse>\n        <Ellipse\n          cx=\"8.714\"\n          cy=\"11.328\"\n          fill=\"currentColor\"\n          rx=\"1\"\n          ry=\"1.5\"\n          transform=\"rotate(-15 8.714 11.328)\"\n        ></Ellipse>\n        <Path\n          strokeWidth=\"1.5\"\n          d=\"M3.204 14.357c-1.112-4.147-1.667-6.22-.724-7.853s3.016-2.19 7.163-3.3c4.147-1.112 6.22-1.667 7.853-.724s2.19 3.016 3.3 7.163c1.111 4.147 1.667 6.22.724 7.853s-3.016 2.19-7.163 3.3c-4.147 1.111-6.22 1.667-7.853.724s-2.19-3.016-3.3-7.163Z\"\n        ></Path>\n        <Path\n          strokeWidth=\"1.5\"\n          d=\"m13 16l.478.974a1.5 1.5 0 1 0 2.693-1.322l-.46-.935\"\n        ></Path>\n      </G>\n    </Svg>\n  );\n};\n"],"names":["EmojiFunnySquareIcon","style","color","_jsx","Svg","viewBox","children","_jsxs","jsxs","G","fill","stroke","jsx","Path","strokeLinecap","strokeWidth","d","Ellipse","cx","cy","rx","ry","transform"],"mappings":"2GAIoCA,EAAGC,QAAOC,WAE1CC,EAAAA,IAACC,EAAG,CAACH,MAAOA,EAAOI,QAAQ,YAAWC,SACpCC,EAAAC,KAACC,IAAC,CAACC,KAAK,OAAOC,OAAQT,EAAMI,SAAA,CAC3BH,EAAAS,IAACC,OAAI,CACHC,cAAc,QACdC,YAAY,MACZC,EAAE,wEAEJb,EAAAS,IAACK,UAAO,CACNC,GAAG,SACHC,GAAG,QACHT,KAAK,eACLU,GAAG,IACHC,GAAG,MACHC,UAAU,4BAEZnB,EAAAS,IAACK,UAAO,CACNC,GAAG,QACHC,GAAG,SACHT,KAAK,eACLU,GAAG,IACHC,GAAG,MACHC,UAAU,6BAEZnB,EAAAS,IAACC,OAAI,CACHE,YAAY,MACZC,EAAE,iPAEJb,EAAAS,IAACC,OAAI,CACHE,YAAY,MACZC,EAAE"}

package/lib/commonjs/assets/Icons/LoadingIcon.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react-native-svg"),c=require("react/jsx-runtime");exports.LoadingIcon=({style:r})=>c.jsx(e,{style:r,viewBox:"0 0 1024 1024",children:c.jsx(e.Path,{d:"M988 548c-19.9 0-36-16.1-36-36c0-59.4-11.6-117-34.6-171.3a440.5 440.5 0 0 0-94.3-139.9a437.7 437.7 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150s83.9 101.8 109.7 162.7c26.7 63.1 40.2 130.2 40.2 199.3c.1 19.9-16 36-35.9 36"})});
+//# sourceMappingURL=LoadingIcon.js.map

package/lib/commonjs/assets/Icons/LoadingIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingIcon.js","sources":["../../../../src/assets/Icons/LoadingIcon.tsx"],"sourcesContent":["import { ViewStyle } from \"react-native\";\nimport Svg, { Path } from \"react-native-svg\";\n\nexport const LoadingIcon = ({ style }: { style?: ViewStyle }) => {\n  return (\n    <Svg\n     style={style}\n      viewBox=\"0 0 1024 1024\"\n    >\n      <Path\n        d=\"M988 548c-19.9 0-36-16.1-36-36c0-59.4-11.6-117-34.6-171.3a440.5 440.5 0 0 0-94.3-139.9a437.7 437.7 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150s83.9 101.8 109.7 162.7c26.7 63.1 40.2 130.2 40.2 199.3c.1 19.9-16 36-35.9 36\"\n      ></Path>\n    </Svg>\n  );\n};\n"],"names":["LoadingIcon","style","_jsx","Svg","viewBox","children","jsx","Path","d"],"mappings":"kGAG2BA,EAAGC,WAE1BC,EAAAA,IAACC,EAAG,CACHF,MAAOA,EACNG,QAAQ,gBAAeC,SAEvBH,EAAAI,IAACC,OAAI,CACHC,EAAE"}

package/lib/commonjs/assets/Icons/MicrophoneIcon.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react-native-svg"),r=require("react/jsx-runtime");exports.MicrophoneIcon=({style:t,color:s})=>r.jsx(e,{style:t,viewBox:"0 0 24 24",children:r.jsxs(e.G,{fill:"none",strokeWidth:"1.5",stroke:s,children:[r.jsx(e.Path,{d:"M7 8a5 5 0 0 1 10 0v3a5 5 0 0 1-10 0z"}),r.jsx(e.Path,{strokeLinecap:"round",d:"M13.5 8H17m-3.5 3H17M7 8h2m-2 3h2m11-1v1a8 8 0 0 1-8 8m-8-9v1a8 8 0 0 0 8 8m0 0v3",opacity:".5"})]})});
+//# sourceMappingURL=MicrophoneIcon.js.map

package/lib/commonjs/assets/Icons/MicrophoneIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MicrophoneIcon.js","sources":["../../../../src/assets/Icons/MicrophoneIcon.tsx"],"sourcesContent":["\nimport { ViewStyle } from \"react-native\";\nimport Svg, { G, Path } from \"react-native-svg\";\n\nexport const MicrophoneIcon = ({\n  style,\n  color,\n}: {\n  style?: ViewStyle;\n  color?: string;\n}) => {\n  return (\n    <Svg style={style} viewBox=\"0 0 24 24\">\n      <G fill=\"none\" strokeWidth=\"1.5\" stroke={color}>\n        <Path d=\"M7 8a5 5 0 0 1 10 0v3a5 5 0 0 1-10 0z\"></Path>\n        <Path\n          strokeLinecap=\"round\"\n          d=\"M13.5 8H17m-3.5 3H17M7 8h2m-2 3h2m11-1v1a8 8 0 0 1-8 8m-8-9v1a8 8 0 0 0 8 8m0 0v3\"\n          opacity=\".5\"\n        ></Path>\n      </G>\n    </Svg>\n  );\n};\n"],"names":["MicrophoneIcon","style","color","_jsx","Svg","viewBox","children","_jsxs","jsxs","G","fill","strokeWidth","stroke","jsx","Path","d","strokeLinecap","opacity"],"mappings":"qGAI8BA,EAC5BC,QACAC,WAMEC,EAAAA,IAACC,EAAG,CAACH,MAAOA,EAAOI,QAAQ,YAAWC,SACpCC,EAAAC,KAACC,IAAC,CAACC,KAAK,OAAOC,YAAY,MAAMC,OAAQV,EAAMI,SAAA,CAC7CH,EAAAU,IAACC,OAAI,CAACC,EAAE,0CACRZ,EAAAU,IAACC,OAAI,CACHE,cAAc,QACdD,EAAE,oFACFE,QAAQ"}

package/lib/commonjs/assets/Icons/PaperClipIcon.js

@@ -0,0 +1,2 @@
+"use strict";var t=require("react-native-svg"),e=require("react/jsx-runtime");exports.PaperClipIcon=({style:q,color:r})=>e.jsx(t,{style:q,fill:r,viewBox:"0 0 24 24",children:e.jsx(t.Path,{d:"M17.346 15.539q0 2.271-1.565 3.866T11.952 21t-3.838-1.595t-1.576-3.867v-8.73q0-1.587 1.092-2.697Q8.72 3 10.308 3t2.678 1.11t1.091 2.698v8.269q0 .88-.615 1.517q-.614.637-1.498.637t-1.52-.627t-.636-1.527V6.769h1v8.308q0 .479.327.816q.328.338.807.338t.807-.338t.328-.816V6.789q-.006-1.166-.802-1.977Q11.48 4 10.308 4q-1.163 0-1.966.821q-.804.821-.804 1.987v8.73q-.005 1.853 1.283 3.157Q10.11 20 11.96 20q1.823 0 3.1-1.305t1.287-3.156v-8.77h1z"})});
+//# sourceMappingURL=PaperClipIcon.js.map

package/lib/commonjs/assets/Icons/PaperClipIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaperClipIcon.js","sources":["../../../../src/assets/Icons/PaperClipIcon.tsx"],"sourcesContent":["\nimport { ViewStyle } from \"react-native\";\nimport Svg, { Path } from \"react-native-svg\";\n\nexport const PaperClipIcon = ({\n  style,\n  color,\n}: {\n  style?: ViewStyle;\n  color?: string;\n}) => {\n  return (\n    <Svg style={style} fill={color} viewBox=\"0 0 24 24\">\n      <Path d=\"M17.346 15.539q0 2.271-1.565 3.866T11.952 21t-3.838-1.595t-1.576-3.867v-8.73q0-1.587 1.092-2.697Q8.72 3 10.308 3t2.678 1.11t1.091 2.698v8.269q0 .88-.615 1.517q-.614.637-1.498.637t-1.52-.627t-.636-1.527V6.769h1v8.308q0 .479.327.816q.328.338.807.338t.807-.338t.328-.816V6.789q-.006-1.166-.802-1.977Q11.48 4 10.308 4q-1.163 0-1.966.821q-.804.821-.804 1.987v8.73q-.005 1.853 1.283 3.157Q10.11 20 11.96 20q1.823 0 3.1-1.305t1.287-3.156v-8.77h1z\"></Path>\n    </Svg>\n  );\n};\n"],"names":["PaperClipIcon","style","color","_jsx","Svg","fill","viewBox","children","jsx","Path","d"],"mappings":"oGAI6BA,EAC3BC,QACAC,WAMEC,EAAAA,IAACC,EAAG,CAACH,MAAOA,EAAOI,KAAMH,EAAOI,QAAQ,YAAWC,SACjDJ,EAAAK,IAACC,OAAI,CAACC,EAAE"}

package/lib/commonjs/assets/Icons/PaperPlaneIcon.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react-native-svg"),r=require("react/jsx-runtime");exports.PaperPlaneIcon=({style:c,color:s})=>r.jsx(e,{style:c,viewBox:"0 0 24 24",children:r.jsxs(e.G,{fill:"none",strokeWidth:"1.5",stroke:s,children:[r.jsx(e.Path,{d:"m18.636 15.67l1.716-5.15c1.5-4.498 2.25-6.747 1.062-7.934s-3.436-.438-7.935 1.062L8.33 5.364C4.7 6.574 2.885 7.18 2.37 8.067a2.72 2.72 0 0 0 0 2.73c.515.888 2.33 1.493 5.96 2.704c.584.194.875.291 1.119.454c.236.158.439.361.597.597c.163.244.26.535.454 1.118c1.21 3.63 1.816 5.446 2.703 5.962a2.72 2.72 0 0 0 2.731 0c.887-.516 1.492-2.331 2.703-5.962Z"}),r.jsx(e.Path,{strokeLinecap:"round",d:"m17.79 6.21l-4.211 4.165",opacity:".5"})]})});
+//# sourceMappingURL=PaperPlaneIcon.js.map

package/lib/commonjs/assets/Icons/PaperPlaneIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaperPlaneIcon.js","sources":["../../../../src/assets/Icons/PaperPlaneIcon.tsx"],"sourcesContent":["import { ViewStyle } from \"react-native\";\n\nimport Svg, { G, Path } from \"react-native-svg\";\n\nexport const PaperPlaneIcon = ({\n  style,\n  color,\n}: {\n  style?: ViewStyle;\n  color?: string;\n}) => {\n  return (\n    <Svg style={style} viewBox=\"0 0 24 24\">\n      <G fill=\"none\" strokeWidth=\"1.5\" stroke={color}>\n        <Path d=\"m18.636 15.67l1.716-5.15c1.5-4.498 2.25-6.747 1.062-7.934s-3.436-.438-7.935 1.062L8.33 5.364C4.7 6.574 2.885 7.18 2.37 8.067a2.72 2.72 0 0 0 0 2.73c.515.888 2.33 1.493 5.96 2.704c.584.194.875.291 1.119.454c.236.158.439.361.597.597c.163.244.26.535.454 1.118c1.21 3.63 1.816 5.446 2.703 5.962a2.72 2.72 0 0 0 2.731 0c.887-.516 1.492-2.331 2.703-5.962Z\"></Path>\n        <Path\n          strokeLinecap=\"round\"\n          d=\"m17.79 6.21l-4.211 4.165\"\n          opacity=\".5\"\n        ></Path>\n      </G>\n    </Svg>\n  );\n};\n"],"names":["PaperPlaneIcon","style","color","_jsx","Svg","viewBox","children","_jsxs","jsxs","G","fill","strokeWidth","stroke","jsx","Path","d","strokeLinecap","opacity"],"mappings":"qGAI8BA,EAC5BC,QACAC,WAMEC,EAAAA,IAACC,EAAG,CAACH,MAAOA,EAAOI,QAAQ,YAAWC,SACpCC,EAAAC,KAACC,IAAC,CAACC,KAAK,OAAOC,YAAY,MAAMC,OAAQV,EAAMI,SAAA,CAC7CH,EAAAU,IAACC,OAAI,CAACC,EAAE,kWACRZ,EAAAU,IAACC,OAAI,CACHE,cAAc,QACdD,EAAE,2BACFE,QAAQ"}

package/lib/commonjs/assets/Icons/PauseIcon.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react-native-svg"),r=require("react/jsx-runtime");exports.PauseIcon=({style:l,color:a})=>r.jsx(e,{style:l,viewBox:"0 0 15 15",children:r.jsx(e.Path,{fill:a,fillRule:"evenodd",d:"M6.05 2.75a.55.55 0 0 0-1.1 0v9.5a.55.55 0 0 0 1.1 0zm4 0a.55.55 0 0 0-1.1 0v9.5a.55.55 0 0 0 1.1 0z",clipRule:"evenodd"})});
+//# sourceMappingURL=PauseIcon.js.map

package/lib/commonjs/assets/Icons/PauseIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PauseIcon.js","sources":["../../../../src/assets/Icons/PauseIcon.tsx"],"sourcesContent":["import { ViewStyle } from \"react-native\";\nimport Svg, { Path } from \"react-native-svg\";\n\nexport const PauseIcon = ({\n  style,\n  color,\n}: {\n  style?: ViewStyle;\n  color?: string;\n}) => {\n  return (\n    <Svg style={style} viewBox=\"0 0 15 15\">\n      <Path\n        fill={color}\n        fillRule=\"evenodd\"\n        d=\"M6.05 2.75a.55.55 0 0 0-1.1 0v9.5a.55.55 0 0 0 1.1 0zm4 0a.55.55 0 0 0-1.1 0v9.5a.55.55 0 0 0 1.1 0z\"\n        clipRule=\"evenodd\"\n      ></Path>\n    </Svg>\n  );\n};\n"],"names":["PauseIcon","style","color","_jsx","Svg","viewBox","children","jsx","Path","fill","fillRule","d","clipRule"],"mappings":"gGAGyBA,EACvBC,QACAC,WAMEC,EAAAA,IAACC,EAAG,CAACH,MAAOA,EAAOI,QAAQ,YAAWC,SACpCH,EAAAI,IAACC,OAAI,CACHC,KAAMP,EACNQ,SAAS,UACTC,EAAE,uGACFC,SAAS"}

package/lib/commonjs/assets/Icons/PlayIcon.js

@@ -0,0 +1,2 @@
+"use strict";var t=require("react-native-svg"),e=require("react/jsx-runtime");exports.PlayIcon=({style:r,color:l})=>e.jsx(t,{style:r,viewBox:"0 0 24 24",children:e.jsx(t.Path,{fill:l,d:"M8 17.175V6.825q0-.425.3-.713t.7-.287q.125 0 .263.037t.262.113l8.15 5.175q.225.15.338.375t.112.475t-.112.475t-.338.375l-8.15 5.175q-.125.075-.262.113T9 18.175q-.4 0-.7-.288t-.3-.712"})});
+//# sourceMappingURL=PlayIcon.js.map

package/lib/commonjs/assets/Icons/PlayIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayIcon.js","sources":["../../../../src/assets/Icons/PlayIcon.tsx"],"sourcesContent":["import { ViewStyle } from \"react-native\";\n\nimport Svg, { Path } from \"react-native-svg\";\n\nexport const PlayIcon = ({\n  style,\n  color,\n}: {\n  style?: ViewStyle;\n  color?: string;\n}) => {\n  return (\n    <Svg style={style} viewBox=\"0 0 24 24\">\n      <Path\n        fill={color}\n        d=\"M8 17.175V6.825q0-.425.3-.713t.7-.287q.125 0 .263.037t.262.113l8.15 5.175q.225.15.338.375t.112.475t-.112.475t-.338.375l-8.15 5.175q-.125.075-.262.113T9 18.175q-.4 0-.7-.288t-.3-.712\"\n      ></Path>\n    </Svg>\n  );\n};\n"],"names":["PlayIcon","style","color","_jsx","Svg","viewBox","children","jsx","Path","fill","d"],"mappings":"+FAIwBA,EACtBC,QACAC,WAMEC,EAAAA,IAACC,EAAG,CAACH,MAAOA,EAAOI,QAAQ,YAAWC,SACpCH,EAAAI,IAACC,OAAI,CACHC,KAAMP,EACNQ,EAAE"}

package/lib/commonjs/assets/Icons/XIcon.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react-native-svg"),r=require("twrnc"),t=require("react/jsx-runtime");exports.XIcon=function({style:n}){return t.jsxs(e.Svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:r.style("feather feather-x",n),children:[t.jsx(e.Line,{x1:"18",y1:"6",x2:"6",y2:"18"}),t.jsx(e.Line,{x1:"6",y1:"6",x2:"18",y2:"18"})]})};
+//# sourceMappingURL=XIcon.js.map

package/lib/commonjs/assets/Icons/XIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"XIcon.js","sources":["../../../../src/assets/Icons/XIcon.tsx"],"sourcesContent":["import { ViewStyle } from \"react-native\";\nimport { Line, Svg } from \"react-native-svg\";\nimport tw from \"twrnc\"; // assuming you're using twrnc for styling\n\nexport function XIcon({ style }: { style?: ViewStyle }) {\n  return (\n    <Svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      style={tw.style(\"feather feather-x\", style)} \n    >\n      <Line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></Line>\n      <Line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></Line>\n    </Svg>\n  );\n}\n"],"names":["style","_jsxs","Svg","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","tw","children","_jsx","jsx","Line","x1","y1","x2","y2"],"mappings":"+GAIO,UAAeA,MAAEA,IACtB,OACEC,EAAAA,KAACC,EAAAA,IAAG,CACFC,QAAQ,YACRC,KAAK,OACLC,OAAO,eACPC,YAAY,IACZC,cAAc,QACdC,eAAe,QACfR,MAAOS,EAAGT,MAAM,oBAAqBA,GAAOU,SAAA,CAE5CC,EAAAC,IAACC,OAAI,CAACC,GAAG,KAAKC,GAAG,IAAIC,GAAG,IAAIC,GAAG,OAC/BN,EAAAC,IAACC,OAAI,CAACC,GAAG,IAAIC,GAAG,IAAIC,GAAG,KAAKC,GAAG,SAGrC"}

package/lib/commonjs/components/AudioPlayer/AudioPlayer.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react"),t=require("react-native"),s=require("react-native-reanimated"),r=require("react-native-sound"),n=require("twrnc"),a=require("../../assets/Icons/PauseIcon.js"),o=require("../../assets/Icons/PlayIcon.js"),u=require("../../context/AudioContext.js"),i=require("../../context/ChatContext.js"),l=require("../../utils/datefunc.js"),c=require("react/jsx-runtime");const d={code:"function AudioPlayerTsx1(){const{knobPosition}=this.__closure;return{transform:[{translateX:knobPosition.value}]};}",location:"/home/eadav/Documents/packages/Movius-Chats/src/components/AudioPlayer/AudioPlayer.tsx",sourceMap:'{"version":3,"names":["AudioPlayerTsx1","knobPosition","__closure","transform","translateX","value"],"sources":["/home/eadav/Documents/packages/Movius-Chats/src/components/AudioPlayer/AudioPlayer.tsx"],"mappings":"AAoIyC,SAAAA,eAAMA,CAAA,QAAAC,YAAA,OAAAC,SAAA,CAC3C,MAAO,CACLC,SAAS,CAAE,CAAC,CAAEC,UAAU,CAAEH,YAAY,CAACI,KAAM,CAAC,CAChD,CAAC,CACH","ignoreList":[]}',version:"3.16.7"},A=({audioUrl:A,audioId:y,isVideoPlaying:h})=>{const{theme:C,CustomPlayIcon:p,CustomPauseIcon:m}=i.useChatContext(),{currentlyPlayingId:v,setCurrentlyPlayingId:f}=u.useAudio(),[P,g]=e.useState(null),[x,w]=e.useState(!1),[S,j]=e.useState(0),[b,I]=e.useState(0),[R,_]=e.useState(!1),q=e.useRef(null),E=e.useRef(0),k=e.useRef(0),M=e.useRef(0),N=s.useSharedValue(0);e.useEffect((()=>{let e=!0;const t=new r(A,"",(s=>{!s&&e&&I(t.getDuration())}));return g(t),()=>{e=!1,t&&(t.pause(),t.release())}}),[A]),e.useEffect((()=>{v&&v!==y&&x&&P&&(P.pause(),w(!1),j(0),N.value=0)}),[v,y,x,P]),e.useEffect((()=>{let e;return x&&P&&!R&&(e=setInterval((()=>{P.getCurrentTime((e=>{if("number"==typeof e&&!isNaN(e)&&(j(e),E.current>0&&b>0)){const t=e/b*E.current;isNaN(t)||(N.value=s.withSpring(t,{damping:15,stiffness:100}))}}))}),100)),()=>{e&&clearInterval(e)}}),[x,P,R,b]);const D=t.PanResponder.create({onStartShouldSetPanResponder:()=>!0,onMoveShouldSetPanResponder:()=>!0,onPanResponderGrant:e=>{_(!0),M.current=e.nativeEvent.pageX-N.value},onPanResponderMove:e=>{if(E.current>0){const t=e.nativeEvent.pageX-M.current,s=Math.max(0,Math.min(t,E.current));N.value=s;const r=s/E.current*b;isNaN(r)||j(r)}},onPanResponderRelease:()=>{if(_(!1),P&&E.current>0){const e=N.value/E.current*b;isNaN(e)||P.setCurrentTime(e)}},onPanResponderTerminate:()=>{_(!1)}}),V=s.useAnimatedStyle(function(){const e=[new global.Error,-2,-27],t=function(){return{transform:[{translateX:N.value}]}};return t.__closure={knobPosition:N},t.__workletHash=1935336866997,t.__initData=d,t.__stackDetails=e,t}());return e.useEffect((()=>{h&&x&&P&&P.pause((()=>{w(!1),f(null)}))}),[h]),c.jsxs(t.View,{style:n`rounded-lg w-56`,children:[c.jsxs(t.View,{style:n`flex-row items-center gap-2 px-2 pt-2`,children:[c.jsx(t.Pressable,{onPress:()=>{P&&(x?P.pause((()=>{w(!1),f(null)})):(f(y),P.play((e=>{e&&(w(!1),j(0),N.value=s.withSpring(0),f(null))})),w(!0)))},style:[n`bg-black/40 rounded-full p-2`,C?.messageStyle?.audioPlayButtonStyle],children:x?m?c.jsx(m,{}):c.jsx(a.PauseIcon,{style:n.style("h-6 w-6"),color:C?.colors?.audioPauseIconColor||"white"}):p?c.jsx(p,{}):c.jsx(o.PlayIcon,{style:n.style("h-6 w-6"),color:C?.colors?.audioPlayIconColor||"white"})}),c.jsxs(t.View,{ref:q,onLayout:e=>{const{width:t}=e.nativeEvent.layout;E.current=t,q.current?.measure(((e,t,s,r,n)=>{k.current=n}))},style:[n`relative h-1 bg-zinc-400 rounded overflow-visible w-[75%]`,C?.messageStyle?.progressBarStyle],children:[c.jsx(t.View,{style:[n`absolute h-full bg-slate-200`,{width:(b>0?S/b*100:0)+"%"},C?.messageStyle?.activeProgressBarStyle]}),c.jsx(s.View,{...D.panHandlers,style:[V,{position:"absolute",top:-6,width:16,height:16,borderRadius:8,backgroundColor:"white",shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:.25,shadowRadius:3.84,elevation:5},{...C?.messageStyle?.audioKnobStyle}]})]})]}),c.jsx(t.View,{style:n`px-4 py-1`,children:c.jsx(t.Text,{style:[n`text-xs text-gray-500`,C?.messageStyle?.audioDurationStyle],children:isNaN(S)?"0:00":l.formatDuration(S)})})]})};var y=e.memo(A);module.exports=y;
+//# sourceMappingURL=AudioPlayer.js.map

package/lib/commonjs/components/AudioPlayer/AudioPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioPlayer.js","sources":["../../../../src/components/AudioPlayer/AudioPlayer.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { PanResponder, Pressable, Text, View } from 'react-native';\nimport Animated, {\n  useAnimatedStyle,\n  useSharedValue,\n  withSpring,\n} from 'react-native-reanimated';\nimport Sound from 'react-native-sound';\nimport tw from 'twrnc';\nimport { PauseIcon } from '../../assets/Icons/PauseIcon';\nimport { PlayIcon } from '../../assets/Icons/PlayIcon';\nimport { useAudio } from '../../context/AudioContext';\nimport { useChatContext } from '../../context/ChatContext';\nimport { formatDuration } from '../../utils/datefunc';\nimport { AudioPlayerProps } from './types';\n\nconst AudioPlayer: React.FC<AudioPlayerProps> = ({\n  audioUrl,\n  audioId,\n  isVideoPlaying,\n}) => {\n  const { theme, CustomPlayIcon, CustomPauseIcon } = useChatContext();\n  const { currentlyPlayingId, setCurrentlyPlayingId } = useAudio();\n  const [sound, setSound] = useState<Sound | null>(null);\n  const [isPlaying, setIsPlaying] = useState(false);\n  const [currentTime, setCurrentTime] = useState(0);\n  const [duration, setDuration] = useState(0);\n  const [isDragging, setIsDragging] = useState(false);\n  const progressRef = useRef<View>(null);\n  const progressWidth = useRef(0);\n  const progressX = useRef(0);\n  const startX = useRef(0);\n  const knobPosition = useSharedValue(0);\n\n  // Initialize sound\n  useEffect(() => {\n    let mounted = true;\n    const newSound = new Sound(audioUrl, '', (error) => {\n      if (!error && mounted) {\n        setDuration(newSound.getDuration());\n      }\n    });\n    setSound(newSound);\n\n    return () => {\n      mounted = false;\n      if (newSound) {\n        newSound.pause();\n        newSound.release();\n      }\n    };\n  }, [audioUrl]);\n\n  // Handle stopping playback when another audio starts\n  useEffect(() => {\n    if (\n      currentlyPlayingId &&\n      currentlyPlayingId !== audioId &&\n      isPlaying &&\n      sound\n    ) {\n      sound.pause();\n      setIsPlaying(false);\n      setCurrentTime(0);\n      knobPosition.value = 0;\n    }\n  }, [currentlyPlayingId, audioId, isPlaying, sound]);\n\n  // Update progress\n  useEffect(() => {\n    let interval: ReturnType<typeof setInterval>;\n    if (isPlaying && sound && !isDragging) {\n      interval = setInterval(() => {\n        sound.getCurrentTime((seconds) => {\n          if (typeof seconds === 'number' && !isNaN(seconds)) {\n            setCurrentTime(seconds);\n            if (progressWidth.current > 0 && duration > 0) {\n              const progress = (seconds / duration) * progressWidth.current;\n              if (!isNaN(progress)) {\n                knobPosition.value = withSpring(progress, {\n                  damping: 15,\n                  stiffness: 100,\n                });\n              }\n            }\n          }\n        });\n      }, 100);\n    }\n    return () => {\n      if (interval) clearInterval(interval);\n    };\n  }, [isPlaying, sound, isDragging, duration]);\n\n  const panResponder = PanResponder.create({\n    onStartShouldSetPanResponder: () => true,\n    onMoveShouldSetPanResponder: () => true,\n    onPanResponderGrant: (evt) => {\n      setIsDragging(true);\n      startX.current = evt.nativeEvent.pageX - knobPosition.value;\n    },\n    onPanResponderMove: (evt) => {\n      if (progressWidth.current > 0) {\n        const newPosition = evt.nativeEvent.pageX - startX.current;\n        const boundedPosition = Math.max(\n          0,\n          Math.min(newPosition, progressWidth.current)\n        );\n        knobPosition.value = boundedPosition;\n\n        const percentage = boundedPosition / progressWidth.current;\n        const newTime = percentage * duration;\n        if (!isNaN(newTime)) {\n          setCurrentTime(newTime);\n        }\n      }\n    },\n    onPanResponderRelease: () => {\n      setIsDragging(false);\n      if (sound && progressWidth.current > 0) {\n        const percentage = knobPosition.value / progressWidth.current;\n        const newTime = percentage * duration;\n        if (!isNaN(newTime)) {\n          sound.setCurrentTime(newTime);\n        }\n      }\n    },\n    onPanResponderTerminate: () => {\n      setIsDragging(false);\n    },\n  });\n\n  const animatedStyle = useAnimatedStyle(() => {\n    return {\n      transform: [{ translateX: knobPosition.value }],\n    };\n  });\n\n  const togglePlay = () => {\n    if (!sound) return;\n\n    if (isPlaying) {\n      sound.pause(() => {\n        setIsPlaying(false);\n        setCurrentlyPlayingId(null);\n      });\n    } else {\n      setCurrentlyPlayingId(audioId);\n      sound.play((success) => {\n        if (success) {\n          setIsPlaying(false);\n          setCurrentTime(0);\n          knobPosition.value = withSpring(0);\n          setCurrentlyPlayingId(null);\n        }\n      });\n      setIsPlaying(true);\n    }\n  };\n\n  // Stop audio when video starts playing\n  useEffect(() => {\n    if (isVideoPlaying && isPlaying && sound) {\n      sound.pause(() => {\n        setIsPlaying(false);\n        setCurrentlyPlayingId(null);\n      });\n    }\n  }, [isVideoPlaying]);\n\n  return (\n    <View style={tw`rounded-lg w-56`}>\n      <View style={tw`flex-row items-center gap-2 px-2 pt-2`}>\n        <Pressable\n          onPress={togglePlay}\n          style={[\n            tw`bg-black/40 rounded-full p-2`,\n            theme?.messageStyle?.audioPlayButtonStyle,\n          ]}\n        >\n          {isPlaying ? (\n            CustomPauseIcon ? (\n              <CustomPauseIcon />\n            ) : (\n              <PauseIcon\n                style={tw.style('h-6 w-6')}\n                color={theme?.colors?.audioPauseIconColor || 'white'}\n              />\n            )\n          ) : CustomPlayIcon ? (\n            <CustomPlayIcon />\n          ) : (\n            <PlayIcon\n              style={tw.style('h-6 w-6')}\n              color={theme?.colors?.audioPlayIconColor || 'white'}\n            />\n          )}\n        </Pressable>\n\n        <View\n          ref={progressRef}\n          onLayout={(e) => {\n            const { width } = e.nativeEvent.layout;\n            progressWidth.current = width;\n          progressRef.current?.measure((_, __, ___, ____, pageX) => {\n            progressX.current = pageX;\n          });\n          }}\n          style={[\n            tw`relative h-1 bg-zinc-400 rounded overflow-visible w-[75%]`,\n            theme?.messageStyle?.progressBarStyle,\n          ]}\n        >\n          <View\n            style={[\n              tw`absolute h-full bg-slate-200`,\n              {\n                width: `${duration > 0 ? (currentTime / duration) * 100 : 0}%`,\n              },\n              theme?.messageStyle?.activeProgressBarStyle,\n            ]}\n          />\n          <Animated.View\n            {...panResponder.panHandlers}\n            style={[\n              animatedStyle,\n              {\n                position: 'absolute',\n                top: -6,\n                width: 16,\n                height: 16,\n                borderRadius: 8,\n                backgroundColor: 'white',\n                shadowColor: '#000',\n                shadowOffset: { width: 0, height: 2 },\n                shadowOpacity: 0.25,\n                shadowRadius: 3.84,\n                elevation: 5,\n              },\n              { ...theme?.messageStyle?.audioKnobStyle },\n            ]}\n          />\n        </View>\n      </View>\n      <View style={tw`px-4 py-1`}>\n        <Text\n          style={[\n            tw`text-xs text-gray-500`,\n            theme?.messageStyle?.audioDurationStyle,\n          ]}\n        >\n          {!isNaN(currentTime) ? formatDuration(currentTime) : '0:00'}\n        </Text>\n      </View>\n    </View>\n  );\n};\n\nexport default React.memo(AudioPlayer);\n"],"names":["_worklet_1935336866997_init_data","code","location","sourceMap","version","AudioPlayer","audioUrl","audioId","isVideoPlaying","theme","CustomPlayIcon","CustomPauseIcon","useChatContext","currentlyPlayingId","setCurrentlyPlayingId","useAudio","sound","setSound","useState","isPlaying","setIsPlaying","currentTime","setCurrentTime","duration","setDuration","isDragging","setIsDragging","progressRef","useRef","progressWidth","progressX","startX","knobPosition","useSharedValue","useEffect","mounted","newSound","Sound","error","getDuration","pause","release","value","interval","setInterval","getCurrentTime","seconds","isNaN","current","progress","withSpring","damping","stiffness","clearInterval","panResponder","PanResponder","create","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","onPanResponderGrant","evt","nativeEvent","pageX","onPanResponderMove","newPosition","boundedPosition","Math","max","min","newTime","onPanResponderRelease","onPanResponderTerminate","animatedStyle","useAnimatedStyle","_e","global","Error","AudioPlayerTsx1","transform","translateX","__closure","__workletHash","__initData","__stackDetails","_jsxs","View","style","tw","children","jsxs","_jsx","jsx","Pressable","onPress","togglePlay","play","success","messageStyle","audioPlayButtonStyle","PauseIcon","color","colors","audioPauseIconColor","PlayIcon","audioPlayIconColor","ref","onLayout","e","width","layout","measure","_","__","___","____","progressBarStyle","activeProgressBarStyle","Animated","panHandlers","position","top","height","borderRadius","backgroundColor","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","audioKnobStyle","Text","audioDurationStyle","formatDuration","AudioPlayer$1","React","memo"],"mappings":"wYAasD,MAAAA,EAAA,CAAAC,KAAA,sHAAAC,SAAA,yFAAAC,UAAA,8WAAAC,QAAA,UAGhDC,EAA0CA,EAC9CC,WACAC,UACAC,qBAEA,MAAMC,MAAEA,EAAKC,eAAEA,EAAcC,gBAAEA,GAAoBC,oBAC7CC,mBAAEA,EAAkBC,sBAAEA,GAA0BC,cAC/CC,EAAOC,GAAYC,EAAAA,SAAuB,OAC1CC,EAAWC,GAAgBF,EAAAA,UAAS,IACpCG,EAAaC,GAAkBJ,EAAAA,SAAS,IACxCK,EAAUC,GAAeN,EAAAA,SAAS,IAClCO,EAAYC,GAAiBR,EAAAA,UAAS,GACvCS,EAAcC,EAAMA,OAAO,MAC3BC,EAAgBD,EAAMA,OAAC,GACvBE,EAAYF,EAAMA,OAAC,GACnBG,EAASH,EAAMA,OAAC,GAChBI,EAAeC,EAAcA,eAAC,GAGpCC,EAAAA,WAAU,KACR,IAAIC,GAAU,EACd,MAAMC,EAAW,IAAIC,EAAM/B,EAAU,IAAKgC,KACnCA,GAASH,GACZX,EAAYY,EAASG,cACvB,IAIF,OAFAtB,EAASmB,GAEF,KACLD,GAAU,EACNC,IACFA,EAASI,QACTJ,EAASK,UACX,CACD,GACA,CAACnC,IAGJ4B,EAAAA,WAAU,KAENrB,GACAA,IAAuBN,GACvBY,GACAH,IAEAA,EAAMwB,QACNpB,GAAa,GACbE,EAAe,GACfU,EAAaU,MAAQ,EACvB,GACC,CAAC7B,EAAoBN,EAASY,EAAWH,IAG5CkB,EAAAA,WAAU,KACR,IAAIS,EAmBJ,OAlBIxB,GAAaH,IAAUS,IACzBkB,EAAWC,aAAY,KACrB5B,EAAM6B,gBAAgBC,IACpB,GAAuB,iBAAZA,IAAyBC,MAAMD,KACxCxB,EAAewB,GACXjB,EAAcmB,QAAU,GAAKzB,EAAW,GAAG,CAC7C,MAAM0B,EAAYH,EAAUvB,EAAYM,EAAcmB,QACjDD,MAAME,KACTjB,EAAaU,MAAQQ,EAAUA,WAACD,EAAU,CACxCE,QAAS,GACTC,UAAW,MAGjB,CACF,GACA,GACD,MAEE,KACDT,GAAUU,cAAcV,EAAS,CACtC,GACA,CAACxB,EAAWH,EAAOS,EAAYF,IAElC,MAAM+B,EAAeC,EAAYA,aAACC,OAAO,CACvCC,6BAA8BA,KAAM,EACpCC,4BAA6BA,KAAM,EACnCC,oBAAsBC,IACpBlC,GAAc,GACdK,EAAOiB,QAAUY,EAAIC,YAAYC,MAAQ9B,EAAaU,KAAK,EAE7DqB,mBAAqBH,IACnB,GAAI/B,EAAcmB,QAAU,EAAG,CAC7B,MAAMgB,EAAcJ,EAAIC,YAAYC,MAAQ/B,EAAOiB,QAC7CiB,EAAkBC,KAAKC,IAC3B,EACAD,KAAKE,IAAIJ,EAAanC,EAAcmB,UAEtChB,EAAaU,MAAQuB,EAErB,MACMI,EADaJ,EAAkBpC,EAAcmB,QACtBzB,EACxBwB,MAAMsB,IACT/C,EAAe+C,EAEnB,GAEFC,sBAAuBA,KAErB,GADA5C,GAAc,GACVV,GAASa,EAAcmB,QAAU,EAAG,CACtC,MACMqB,EADarC,EAAaU,MAAQb,EAAcmB,QACzBzB,EACxBwB,MAAMsB,IACTrD,EAAMM,eAAe+C,EAEzB,GAEFE,wBAAyBA,KACvB7C,GAAc,EAAM,IAIlB8C,EAAgBC,EAAAA,iBAAiB,WAAA,MAAAC,EAAA,CAAA,IAAAC,OAAAC,OAAA,OAAAC,EAAAA,WACrC,MAAO,CACLC,UAAW,CAAC,CAAEC,WAAY/C,EAAaU,QAE1C,EAAA,OAAAmC,EAAAG,UAAA,CAAAhD,gBAAA6C,EAAAI,cAAA,cAAAJ,EAAAK,WAAAlF,EAAA6E,EAAAM,eAAAT,EAAAG,CAAA,CAJsC,IAsCvC,OATA3C,EAAAA,WAAU,KACJ1B,GAAkBW,GAAaH,GACjCA,EAAMwB,OAAM,KACVpB,GAAa,GACbN,EAAsB,KAAK,GAE/B,GACC,CAACN,IAGF4E,EAAAA,KAACC,EAAAA,KAAI,CAACC,MAAOC,CAAE,kBAAkBC,SAAA,CAC/BJ,EAAAK,KAACJ,OAAI,CAACC,MAAOC,CAAE,wCAAwCC,SAAA,CACrDE,EAAAC,IAACC,YAAS,CACRC,QApCWC,KACZ9E,IAEDG,EACFH,EAAMwB,OAAM,KACVpB,GAAa,GACbN,EAAsB,KAAK,KAG7BA,EAAsBP,GACtBS,EAAM+E,MAAMC,IACNA,IACF5E,GAAa,GACbE,EAAe,GACfU,EAAaU,MAAQQ,EAAUA,WAAC,GAChCpC,EAAsB,MACxB,IAEFM,GAAa,IACf,EAkBMkE,MAAO,CACLC,CAAE,+BACF9E,GAAOwF,cAAcC,sBACrBV,SAEDrE,EACCR,EACE+E,EAAAC,IAAChF,EAAiB,IAElB+E,EAAAC,IAACQ,YAAS,CACRb,MAAOC,EAAGD,MAAM,WAChBc,MAAO3F,GAAO4F,QAAQC,qBAAuB,UAG/C5F,EACFgF,MAAChF,EAAc,CAAA,GAEfgF,EAAAC,IAACY,WAAQ,CACPjB,MAAOC,EAAGD,MAAM,WAChBc,MAAO3F,GAAO4F,QAAQG,oBAAsB,YAKlDpB,EAAAK,KAACJ,OAAI,CACHoB,IAAK9E,EACL+E,SAAWC,IACT,MAAMC,MAAEA,GAAUD,EAAE9C,YAAYgD,OAChChF,EAAcmB,QAAU4D,EAC1BjF,EAAYqB,SAAS8D,SAAQ,CAACC,EAAGC,EAAIC,EAAKC,EAAMpD,KAC9ChC,EAAUkB,QAAUc,CAAK,GACzB,EAEFwB,MAAO,CACLC,CAAE,4DACF9E,GAAOwF,cAAckB,kBACrB3B,SAAA,CAEFE,EAAAC,IAACN,OAAI,CACHC,MAAO,CACLC,CAAE,+BACF,CACEqB,OAAUrF,EAAW,EAAKF,EAAcE,EAAY,IAAM,GAAnD,KAETd,GAAOwF,cAAcmB,0BAGzB1B,EAAAA,IAAC2B,EAAShC,KAAI,IACR/B,EAAagE,YACjBhC,MAAO,CACLd,EACA,CACE+C,SAAU,WACVC,KAAO,EACPZ,MAAO,GACPa,OAAQ,GACRC,aAAc,EACdC,gBAAiB,QACjBC,YAAa,OACbC,aAAc,CAAEjB,MAAO,EAAGa,OAAQ,GAClCK,cAAe,IACfC,aAAc,KACdC,UAAW,GAEb,IAAKvH,GAAOwF,cAAcgC,yBAKlCvC,EAAAC,IAACN,OAAI,CAACC,MAAOC,CAAE,YAAYC,SACzBE,EAAAC,IAACuC,OAAI,CACH5C,MAAO,CACLC,CAAE,wBACF9E,GAAOwF,cAAckC,oBACrB3C,SAEAzC,MAAM1B,GAA6C,OAA9B+G,EAAcA,eAAC/G,SAGrC,EAIX,IAAAgH,EAAeC,EAAMC,KAAKlI"}

package/lib/commonjs/components/ChatBubble/ChatBubble.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react"),t=require("react-native"),s=require("twrnc"),r=require("../../assets/Icons/ArrowBack2RoundedIcon.js"),l=require("../../context/ChatContext.js"),a=require("./MessageContent.js"),i=require("./MessageStatus.js"),o=require("react/jsx-runtime");const n=({message:e,isCurrentUser:n,isFirstInSequence:u,onLongPress:d})=>{const{theme:c,showAvatars:b,showUserNames:m,showBubbleTail:x,setMediaUrl:g,setIsVideoPlaying:h,isVideoPlaying:y}=l.useChatContext();return o.jsxs(t.Pressable,{onLongPress:d,style:[s`px-2 my-1 max-w-[75%] relative`,n?s`self-end mr-3`:s`self-start ml-9`,u?n?s`bg-green-500 rounded-tr-none`:s`bg-white rounded-tl-none`:n?s`bg-green-500`:s`bg-white`,{borderRadius:8,...n?c?.bubbleStyle?.sent:c?.bubbleStyle?.received}],children:[!n&&u&&b&&o.jsxs(o.Fragment,{children:[o.jsx(t.View,{style:s`absolute w-6 h-6 rounded-full top-0 -left-9 flex-row items-center`,children:e.senderAvatar?o.jsx(t.Image,{source:{uri:e.senderAvatar},style:[s`w-full h-full rounded-full`,c?.bubbleStyle?.avatarImageStyle],resizeMode:"cover"}):o.jsx(t.Text,{style:[s`text-sm text-black font-semibold capitalize rounded-full bg-zinc-300 w-full h-full text-center pt-0.5`,c?.bubbleStyle?.avatarTextStyle],children:e.senderName?.charAt(0)})}),m&&e.senderName&&o.jsx(t.Text,{style:[s`text-sm text-black font-semibold mt-1 capitalize`,c?.bubbleStyle?.userNameStyle],children:e.senderName})]}),u&&x&&o.jsx(r.ArrowBack2RoundedIcon,{style:s.style("absolute -top-1 w-6 h-6",n?"-right-3.5":"-left-3.5 mt-[1.25px]",{transform:[{rotate:n?"90deg":"180deg"}]}),color:n?`${c?.colors?.sentMessageTailColor||"rgba(34, 197, 94,1)"}`:`${c?.colors?.receivedMessageTailColor||"white"}`}),o.jsx(a,{message:e,isCurrentUser:n,isFirstInSequence:u,onMediaPress:(e,t)=>{g({imageUrl:"image"===e?t:"",videoUrl:"video"===e?t:""}),"video"===e&&h(!0)},isVideoPlaying:y}),o.jsx(i,{time:e.time,status:n?e.status:void 0,isCurrentUser:n,hasText:!!e.text,hasAudio:!!e.audio})]})};var u=e.memo(n);module.exports=u;
+//# sourceMappingURL=ChatBubble.js.map

package/lib/commonjs/components/ChatBubble/ChatBubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBubble.js","sources":["../../../../src/components/ChatBubble/ChatBubble.tsx"],"sourcesContent":["import React from 'react';\nimport { Image, Pressable, Text, View } from 'react-native';\nimport tw from 'twrnc';\nimport { ArrowBack2RoundedIcon } from '../../assets/Icons/ArrowBack2RoundedIcon';\nimport { useChatContext } from '../../context/ChatContext';\nimport MessageContent from './MessageContent';\nimport MessageStatus from './MessageStatus';\nimport { ChatBubbleProps } from './types';\n\nconst ChatBubble: React.FC<ChatBubbleProps> = ({\n  message,\n  isCurrentUser,\n  isFirstInSequence,\n  onLongPress,\n}) => {\n  const {\n    theme,\n    showAvatars,\n    showUserNames,\n    showBubbleTail,\n    setMediaUrl,\n    setIsVideoPlaying,\n    isVideoPlaying,\n  } = useChatContext();\n\n  const handleMediaPress = (type: 'image' | 'video', url: string) => {\n    setMediaUrl({\n      imageUrl: type === 'image' ? url : '',\n      videoUrl: type === 'video' ? url : '',\n    });\n    if (type === 'video') {\n      setIsVideoPlaying(true);\n    }\n  };\n\n  return (\n    <Pressable\n      onLongPress={onLongPress}\n      style={[\n        tw`px-2 my-1 max-w-[75%] relative`,\n        isCurrentUser ? tw`self-end mr-3` : tw`self-start ml-9`,\n        isFirstInSequence\n          ? isCurrentUser\n            ? tw`bg-green-500 rounded-tr-none`\n            : tw`bg-white rounded-tl-none`\n          : isCurrentUser\n            ? tw`bg-green-500`\n            : tw`bg-white`,\n        {\n          borderRadius: 8,\n          ...(isCurrentUser\n            ? theme?.bubbleStyle?.sent\n            : theme?.bubbleStyle?.received),\n        },\n      ]}\n    >\n      {/* Avatar & Sender Name for Group Chat */}\n      {!isCurrentUser && isFirstInSequence && showAvatars && (\n        <>\n          <View\n            style={tw`absolute w-6 h-6 rounded-full top-0 -left-9 flex-row items-center`}\n          >\n            {message.senderAvatar ? (\n              <Image\n                source={{ uri: message.senderAvatar }}\n                style={[\n                  tw`w-full h-full rounded-full`,\n                  theme?.bubbleStyle?.avatarImageStyle,\n                ]}\n                resizeMode=\"cover\"\n              />\n            ) : (\n              <Text\n                style={[\n                  tw`text-sm text-black font-semibold capitalize rounded-full bg-zinc-300 w-full h-full text-center pt-0.5`,\n                  theme?.bubbleStyle?.avatarTextStyle,\n                ]}\n              >\n                {message.senderName?.charAt(0)}\n              </Text>\n            )}\n          </View>\n          {showUserNames && message.senderName && (\n            <Text\n              style={[\n                tw`text-sm text-black font-semibold mt-1 capitalize`,\n                theme?.bubbleStyle?.userNameStyle,\n              ]}\n            >\n              {message.senderName}\n            </Text>\n          )}\n        </>\n      )}\n\n      {/* Bubble Tail */}\n      {isFirstInSequence && showBubbleTail && (\n        <ArrowBack2RoundedIcon\n          style={tw.style(\n            'absolute -top-1 w-6 h-6',\n            isCurrentUser ? '-right-3.5' : '-left-3.5 mt-[1.25px]',\n            {\n              transform: [{ rotate: isCurrentUser ? '90deg' : '180deg' }],\n            }\n          )}\n          color={\n            isCurrentUser\n              ? `${\n                  theme?.colors?.sentMessageTailColor || 'rgba(34, 197, 94,1)'\n                }`\n              : `${theme?.colors?.receivedMessageTailColor || 'white'}`\n          }\n        />\n      )}\n\n      {/* Message Content */}\n      <MessageContent\n        message={message}\n        isCurrentUser={isCurrentUser}\n        isFirstInSequence={isFirstInSequence}\n        onMediaPress={handleMediaPress}\n        isVideoPlaying={isVideoPlaying}\n      />\n\n      {/* Message Status */}\n      <MessageStatus\n        time={message.time}\n        status={isCurrentUser ? message.status : undefined}\n        isCurrentUser={isCurrentUser}\n        hasText={!!message.text}\n        hasAudio={!!message.audio}\n      />\n    </Pressable>\n  );\n};\n\nexport default React.memo(ChatBubble);\n"],"names":["ChatBubble","message","isCurrentUser","isFirstInSequence","onLongPress","theme","showAvatars","showUserNames","showBubbleTail","setMediaUrl","setIsVideoPlaying","isVideoPlaying","useChatContext","_jsxs","Pressable","style","tw","borderRadius","bubbleStyle","sent","received","children","jsxs","_Fragment","_jsx","jsx","View","senderAvatar","Image","source","uri","avatarImageStyle","resizeMode","Text","avatarTextStyle","senderName","charAt","userNameStyle","ArrowBack2RoundedIcon","transform","rotate","color","colors","sentMessageTailColor","receivedMessageTailColor","MessageContent","onMediaPress","handleMediaPress","type","url","imageUrl","videoUrl","MessageStatus","time","status","undefined","hasText","text","hasAudio","audio","ChatBubble$1","React","memo"],"mappings":"oRASA,MAAMA,EAAwCA,EAC5CC,UACAC,gBACAC,oBACAC,kBAEA,MAAMC,MACJA,EAAKC,YACLA,EAAWC,cACXA,EAAaC,eACbA,EAAcC,YACdA,EAAWC,kBACXA,EAAiBC,eACjBA,GACEC,mBAYJ,OACEC,EAAAA,KAACC,EAAAA,UAAS,CACRV,YAAaA,EACbW,MAAO,CACLC,CAAE,iCACFd,EAAgBc,CAAE,gBAAkBA,CAAE,kBACtCb,EACID,EACEc,CAAE,+BACFA,CAAE,2BACJd,EACEc,CAAE,eACFA,CAAE,WACR,CACEC,aAAc,KACVf,EACAG,GAAOa,aAAaC,KACpBd,GAAOa,aAAaE,WAE1BC,SAAA,EAGAnB,GAAiBC,GAAqBG,GACtCO,EAAAS,KAAAC,WAAA,CAAAF,SAAA,CACEG,EAAAC,IAACC,OAAI,CACHX,MAAOC,CAAE,oEAAoEK,SAE5EpB,EAAQ0B,aACPH,EAAAA,IAACI,EAAAA,MAAK,CACJC,OAAQ,CAAEC,IAAK7B,EAAQ0B,cACvBZ,MAAO,CACLC,CAAE,6BACFX,GAAOa,aAAaa,kBAEtBC,WAAW,UAGbR,EAAAC,IAACQ,OAAI,CACHlB,MAAO,CACLC,CAAE,wGACFX,GAAOa,aAAagB,iBACpBb,SAEDpB,EAAQkC,YAAYC,OAAO,OAIjC7B,GAAiBN,EAAQkC,YACxBX,EAAAA,IAACS,EAAAA,KAAI,CACHlB,MAAO,CACLC,CAAE,mDACFX,GAAOa,aAAamB,eACpBhB,SAEDpB,EAAQkC,gBAOhBhC,GAAqBK,GACpBgB,EAAAA,IAACc,EAAAA,sBAAqB,CACpBvB,MAAOC,EAAGD,MACR,0BACAb,EAAgB,aAAe,wBAC/B,CACEqC,UAAW,CAAC,CAAEC,OAAQtC,EAAgB,QAAU,aAGpDuC,MACEvC,EACI,GACEG,GAAOqC,QAAQC,sBAAwB,wBAEzC,GAAGtC,GAAOqC,QAAQE,0BAA4B,YAMxDpB,EAAAC,IAACoB,EAAc,CACb5C,QAASA,EACTC,cAAeA,EACfC,kBAAmBA,EACnB2C,aA/FmBC,CAACC,EAAyBC,KACjDxC,EAAY,CACVyC,SAAmB,UAATF,EAAmBC,EAAM,GACnCE,SAAmB,UAATH,EAAmBC,EAAM,KAExB,UAATD,GACFtC,GAAkB,EACpB,EAyFIC,eAAgBA,IAIlBa,EAAAC,IAAC2B,EAAa,CACZC,KAAMpD,EAAQoD,KACdC,OAAQpD,EAAgBD,EAAQqD,YAASC,EACzCrD,cAAeA,EACfsD,UAAWvD,EAAQwD,KACnBC,WAAYzD,EAAQ0D,UAEZ,EAIhB,IAAAC,EAAeC,EAAMC,KAAK9D"}

package/lib/commonjs/components/ChatBubble/MessageContent.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react"),t=require("react-native"),s=require("react-native-video"),r=require("twrnc"),i=require("../../assets/Icons/LoadingIcon.js"),o=require("../../assets/Icons/PlayIcon.js"),l=require("../../context/ChatContext.js"),a=require("../../utils/datefunc.js"),n=require("../AudioPlayer/AudioPlayer.js"),d=require("react/jsx-runtime");const u=({message:u,onMediaPress:c,isVideoPlaying:x})=>{const{theme:y,showMessageStatus:h,CustomPlayIcon:j,renderCustomVideoBubbleError:m}=l.useChatContext(),b=e.useRef(null),[f,w]=e.useState(0),[g,v]=e.useState(!1),[P,p]=e.useState(!1);return d.jsxs(t.View,{children:[u.image&&d.jsx(t.Pressable,{onPress:()=>c("image",u.image),style:r`w-60 h-80 my-2`,children:d.jsx(t.Image,{source:{uri:u.image},style:r`w-full h-full object-contain rounded-lg`})}),u.video&&d.jsxs(t.Pressable,{onPress:()=>c("video",u.video),style:r`w-60 h-80 my-2 justify-center items-center`,disabled:g,children:[d.jsx(s,{source:{uri:u.video},ref:b,paused:!0,style:{width:"100%",height:"100%",borderRadius:8,position:"relative"},resizeMode:"cover",onLoadStart:()=>{v(!0),p(!1)},onLoad:e=>{w(e.duration),v(!1)},onBuffer:({isBuffering:e})=>v(e),onError:()=>{p(!0),v(!1)}}),g?d.jsx(t.View,{style:r`absolute inset-0 flex items-center justify-center bg-black/40 rounded-full`,children:d.jsx(i.LoadingIcon,{style:r.style("h-12 w-12 fill-white animate-spin")})}):P?m?m():d.jsx(t.View,{style:r`absolute inset-0 flex items-center justify-center bg-red-500/60 p-2`,children:d.jsx(t.Text,{style:r`text-white font-bold`,children:"Failed to load video"})}):d.jsxs(d.Fragment,{children:[d.jsx(t.View,{style:r`absolute bg-black/40 rounded-full`,children:j?d.jsx(j,{}):d.jsx(o.PlayIcon,{style:r.style("h-16 w-16"),color:y?.colors?.audioPlayIconColor||"white"})}),d.jsx(t.View,{style:r`absolute bottom-2 left-2 bg-black/50 px-2 py-1 rounded-md`,children:d.jsx(t.Text,{style:r`text-white text-xs font-semibold`,children:a.formatDuration(f)})})]})]}),u.audio&&d.jsx(t.View,{style:r`my-2`,children:d.jsx(n,{audioUrl:u.audio,audioId:u.id,isVideoPlaying:x})}),u.text&&d.jsx(t.Text,{style:[r`text-gray-800 pt-1`,h?r`pb-0`:r`pb-2`,{wordBreak:"break-word",overflowWrap:"break-word"},y?.messageStyle?.textStyle],children:u.text})]})};var c=e.memo(u);module.exports=c;
+//# sourceMappingURL=MessageContent.js.map

package/lib/commonjs/components/ChatBubble/MessageContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageContent.js","sources":["../../../../src/components/ChatBubble/MessageContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Image, Pressable, Text, View } from 'react-native';\nimport Video, { VideoRef } from 'react-native-video';\nimport tw from 'twrnc';\nimport { LoadingIcon } from '../../assets/Icons/LoadingIcon';\nimport { PlayIcon } from '../../assets/Icons/PlayIcon';\nimport { useChatContext } from '../../context/ChatContext';\nimport { formatDuration } from '../../utils/datefunc';\nimport AudioPlayer from '../AudioPlayer/AudioPlayer';\nimport { MessageContentProps } from './types';\n\nconst MessageContent: React.FC<MessageContentProps> = ({\n  message,\n  onMediaPress,\n  isVideoPlaying,\n}) => {\n  const {\n    theme,\n    showMessageStatus,\n    CustomPlayIcon,\n    renderCustomVideoBubbleError,\n  } = useChatContext();\n  const videoRef = React.useRef<VideoRef>(null);\n  const [duration, setDuration] = React.useState(0);\n  const [videoIsLoading, setVideoIsLoading] = React.useState(false);\n  const [videoHasError, setVideoHasError] = React.useState(false);\n\n  return (\n    <View>\n      {message.image && (\n        <Pressable\n          onPress={() => onMediaPress('image', message.image as string)}\n          style={tw`w-60 h-80 my-2`}\n        >\n          <Image\n            source={{ uri: message.image }}\n            style={tw`w-full h-full object-contain rounded-lg`}\n          />\n        </Pressable>\n      )}\n\n      {message.video && (\n        <Pressable\n          onPress={() => onMediaPress('video', message.video as string)}\n          style={tw`w-60 h-80 my-2 justify-center items-center`}\n          disabled={videoIsLoading}\n        >\n          <Video\n            source={{ uri: message.video }}\n            ref={videoRef}\n            paused={true}\n            style={{\n              width: '100%',\n              height: '100%',\n              borderRadius: 8,\n              position: 'relative',\n            }}\n            resizeMode=\"cover\"\n            onLoadStart={() => {\n              setVideoIsLoading(true);\n              setVideoHasError(false);\n            }}\n            onLoad={(data) => {\n              setDuration(data.duration);\n              setVideoIsLoading(false);\n            }}\n            onBuffer={({ isBuffering }) => setVideoIsLoading(isBuffering)}\n            onError={() => {\n              setVideoHasError(true);\n              setVideoIsLoading(false);\n            }}\n          />\n          {videoIsLoading ? (\n            <View\n              style={tw`absolute inset-0 flex items-center justify-center bg-black/40 rounded-full`}\n            >\n              <LoadingIcon\n                style={tw.style('h-12 w-12 fill-white animate-spin')}\n              />\n            </View>\n          ) : videoHasError ? (\n            renderCustomVideoBubbleError ? (\n              renderCustomVideoBubbleError()\n            ) : (\n              <View\n                style={tw`absolute inset-0 flex items-center justify-center bg-red-500/60 p-2`}\n              >\n                <Text style={tw`text-white font-bold`}>\n                  Failed to load video\n                </Text>\n              </View>\n            )\n          ) : (\n            <>\n              <View style={tw`absolute bg-black/40 rounded-full`}>\n                {CustomPlayIcon ? (\n                  <CustomPlayIcon />\n                ) : (\n                  <PlayIcon\n                    style={tw.style('h-16 w-16')}\n                    color={theme?.colors?.audioPlayIconColor || 'white'}\n                  />\n                )}\n              </View>\n              <View\n                style={tw`absolute bottom-2 left-2 bg-black/50 px-2 py-1 rounded-md`}\n              >\n                <Text style={tw`text-white text-xs font-semibold`}>\n                  {formatDuration(duration)}\n                </Text>\n              </View>\n            </>\n          )}\n        </Pressable>\n      )}\n\n      {message.audio && (\n        <View style={tw`my-2`}>\n          <AudioPlayer\n            audioUrl={message.audio}\n            audioId={message.id}\n            isVideoPlaying={isVideoPlaying as boolean}\n          />\n        </View>\n      )}\n\n      {message.text && (\n        <Text\n          style={[\n            tw`text-gray-800 pt-1`,\n            showMessageStatus ? tw`pb-0` : tw`pb-2`,\n            { wordBreak: 'break-word', overflowWrap: 'break-word' },\n            theme?.messageStyle?.textStyle,\n          ]}\n        >\n          {message.text}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nexport default React.memo(MessageContent);\n"],"names":["MessageContent","message","onMediaPress","isVideoPlaying","theme","showMessageStatus","CustomPlayIcon","renderCustomVideoBubbleError","useChatContext","videoRef","React","useRef","duration","setDuration","useState","videoIsLoading","setVideoIsLoading","videoHasError","setVideoHasError","_jsxs","View","children","image","_jsx","Pressable","onPress","style","tw","jsx","Image","source","uri","video","disabled","Video","ref","paused","width","height","borderRadius","position","resizeMode","onLoadStart","onLoad","data","onBuffer","isBuffering","onError","LoadingIcon","Text","jsxs","_Fragment","PlayIcon","color","colors","audioPlayIconColor","formatDuration","audio","AudioPlayer","audioUrl","audioId","id","text","wordBreak","overflowWrap","messageStyle","textStyle","MessageContent$1","memo"],"mappings":"qWAWA,MAAMA,EAAgDA,EACpDC,UACAC,eACAC,qBAEA,MAAMC,MACJA,EAAKC,kBACLA,EAAiBC,eACjBA,EAAcC,6BACdA,GACEC,mBACEC,EAAWC,EAAMC,OAAiB,OACjCC,EAAUC,GAAeH,EAAMI,SAAS,IACxCC,EAAgBC,GAAqBN,EAAMI,UAAS,IACpDG,EAAeC,GAAoBR,EAAMI,UAAS,GAEzD,OACEK,EAAAA,KAACC,EAAAA,KAAI,CAAAC,UACFpB,EAAQqB,OACPC,EAAAA,IAACC,EAAAA,UAAS,CACRC,QAASA,IAAMvB,EAAa,QAASD,EAAQqB,OAC7CI,MAAOC,CAAE,iBAAiBN,SAE1BE,EAAAK,IAACC,QAAK,CACJC,OAAQ,CAAEC,IAAK9B,EAAQqB,OACvBI,MAAOC,CAAE,8CAKd1B,EAAQ+B,OACPb,EAAAA,KAACK,EAAAA,UAAS,CACRC,QAASA,IAAMvB,EAAa,QAASD,EAAQ+B,OAC7CN,MAAOC,CAAE,6CACTM,SAAUlB,EAAeM,SAAA,CAEzBE,EAAAK,IAACM,EAAK,CACJJ,OAAQ,CAAEC,IAAK9B,EAAQ+B,OACvBG,IAAK1B,EACL2B,QAAQ,EACRV,MAAO,CACLW,MAAO,OACPC,OAAQ,OACRC,aAAc,EACdC,SAAU,YAEZC,WAAW,QACXC,YAAaA,KACX1B,GAAkB,GAClBE,GAAiB,EAAM,EAEzByB,OAASC,IACP/B,EAAY+B,EAAKhC,UACjBI,GAAkB,EAAM,EAE1B6B,SAAUA,EAAGC,iBAAkB9B,EAAkB8B,GACjDC,QAASA,KACP7B,GAAiB,GACjBF,GAAkB,EAAM,IAG3BD,EACCQ,EAAAK,IAACR,OAAI,CACHM,MAAOC,CAAE,6EAA6EN,SAEtFE,EAAAK,IAACoB,cAAW,CACVtB,MAAOC,EAAGD,MAAM,yCAGlBT,EACFV,EACEA,IAEAgB,EAAAA,IAACH,EAAAA,KAAI,CACHM,MAAOC,CAAE,sEAAsEN,SAE/EE,EAAAK,IAACqB,OAAI,CAACvB,MAAOC,CAAE,uBAAuBN,SAAC,2BAM3CF,EAAA+B,KAAAC,WAAA,CAAA9B,SAAA,CACEE,EAAAK,IAACR,OAAI,CAACM,MAAOC,CAAE,oCAAoCN,SAChDf,EACCiB,MAACjB,EAAc,CAAA,GAEfiB,EAAAK,IAACwB,WAAQ,CACP1B,MAAOC,EAAGD,MAAM,aAChB2B,MAAOjD,GAAOkD,QAAQC,oBAAsB,YAIlDhC,EAAAK,IAACR,OAAI,CACHM,MAAOC,CAAE,4DAA4DN,SAErEE,EAAAK,IAACqB,OAAI,CAACvB,MAAOC,CAAE,mCAAmCN,SAC/CmC,EAAcA,eAAC5C,aAQ3BX,EAAQwD,OACPlC,EAAAA,IAACH,EAAAA,KAAI,CAACM,MAAOC,CAAE,OAAON,SACpBE,EAAAK,IAAC8B,EAAW,CACVC,SAAU1D,EAAQwD,MAClBG,QAAS3D,EAAQ4D,GACjB1D,eAAgBA,MAKrBF,EAAQ6D,MACPvC,EAAAA,IAAC0B,EAAAA,KAAI,CACHvB,MAAO,CACLC,CAAE,qBACFtB,EAAoBsB,CAAE,OAASA,CAAE,OACjC,CAAEoC,UAAW,aAAcC,aAAc,cACzC5D,GAAO6D,cAAcC,WACrB7C,SAEDpB,EAAQ6D,SAGR,EAIX,IAAAK,EAAezD,EAAM0D,KAAKpE"}

package/lib/commonjs/components/ChatBubble/MessageStatus.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react"),t=require("react-native"),s=require("twrnc"),r=require("../../assets/Icons/CheckAllIcon.js"),l=require("../../assets/Icons/CheckIcon.js"),i=require("../../context/ChatContext.js"),o=require("react/jsx-runtime");const c=({time:e,status:c,isCurrentUser:n,hasText:a,hasAudio:h})=>{const{theme:u,showMessageStatus:x}=i.useChatContext();return o.jsx(o.Fragment,{children:x&&o.jsxs(t.View,{style:[s`flex-row items-center`,a?s`justify-end pb-1 ml-4`:h?s`absolute right-3 bottom-3`:s`absolute right-3 bottom-4 bg-black/50 px-2 py-1 rounded-md`],children:[o.jsx(t.Text,{style:[s`text-xs`,{color:a||h?u?.colors?.timestamp||"rgba(107, 114, 128, 0.7)":"white"}],children:e}),n&&o.jsxs(t.View,{style:s`ml-1 flex-row items-center`,children:["sent"===c&&o.jsx(l.CheckIcon,{style:s.style("fill-[#6B7280] h-4 w-4",{opacity:.7})}),"delivered"===c&&o.jsx(r.CheckAllIcon,{style:s.style("fill-[#6B7280] h-4 w-4",{opacity:.7})}),"read"===c&&o.jsx(r.CheckAllIcon,{style:s.style("fill-[#3B82F6] h-4 w-4",{opacity:.9})})]})]})})};var n=e.memo(c);module.exports=n;
+//# sourceMappingURL=MessageStatus.js.map

package/lib/commonjs/components/ChatBubble/MessageStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageStatus.js","sources":["../../../../src/components/ChatBubble/MessageStatus.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport tw from 'twrnc';\nimport { CheckAllIcon } from '../../assets/Icons/CheckAllIcon';\nimport { CheckIcon } from '../../assets/Icons/CheckIcon';\nimport { useChatContext } from '../../context/ChatContext';\nimport { MessageStatusProps } from './types';\n\nconst MessageStatus: React.FC<MessageStatusProps> = ({\n  time,\n  status,\n  isCurrentUser,\n  hasText,\n  hasAudio,\n}) => {\n  const { theme, showMessageStatus } = useChatContext();\n  return (\n    <>\n      {showMessageStatus && (\n        <View\n          style={[\n            tw`flex-row items-center`,\n            hasText\n              ? tw`justify-end pb-1 ml-4`\n              : hasAudio\n                ? tw`absolute right-3 bottom-3`\n                : tw`absolute right-3 bottom-4 bg-black/50 px-2 py-1 rounded-md`,\n          ]}\n        >\n          <Text\n            style={[\n              tw`text-xs`,\n              {\n                color:\n                  hasText || hasAudio\n                    ? theme?.colors?.timestamp || 'rgba(107, 114, 128, 0.7)'\n                    : 'white',\n              },\n            ]}\n          >\n            {time}\n          </Text>\n          {isCurrentUser && (\n            <View style={tw`ml-1 flex-row items-center`}>\n              {status === 'sent' && (\n                <CheckIcon\n                  style={tw.style('fill-[#6B7280] h-4 w-4', { opacity: 0.7 })}\n                />\n              )}\n              {status === 'delivered' && (\n                <CheckAllIcon\n                  style={tw.style('fill-[#6B7280] h-4 w-4', { opacity: 0.7 })}\n                />\n              )}\n              {status === 'read' && (\n                <CheckAllIcon\n                  style={tw.style('fill-[#3B82F6] h-4 w-4', { opacity: 0.9 })}\n                />\n              )}\n            </View>\n          )}\n        </View>\n      )}\n    </>\n  );\n};\n\nexport default React.memo(MessageStatus);\n"],"names":["MessageStatus","time","status","isCurrentUser","hasText","hasAudio","theme","showMessageStatus","useChatContext","_jsx","_Fragment","children","_jsxs","jsxs","View","style","tw","jsx","Text","color","colors","timestamp","CheckIcon","opacity","CheckAllIcon","MessageStatus$1","React","memo"],"mappings":"uPAQA,MAAMA,EAA8CA,EAClDC,OACAC,SACAC,gBACAC,UACAC,eAEA,MAAMC,MAAEA,EAAKC,kBAAEA,GAAsBC,mBACrC,OACEC,EAAAA,IAAAC,EAAAA,SAAA,CAAAC,SACGJ,GACCK,EAAAC,KAACC,OAAI,CACHC,MAAO,CACLC,CAAE,wBACFZ,EACIY,CAAE,wBACFX,EACEW,CAAE,4BACFA,CAAE,8DACRL,SAAA,CAEFF,EAAAQ,IAACC,OAAI,CACHH,MAAO,CACLC,CAAE,UACF,CACEG,MACEf,GAAWC,EACPC,GAAOc,QAAQC,WAAa,2BAC5B,UAERV,SAEDV,IAEFE,GACCS,EAAAC,KAACC,OAAI,CAACC,MAAOC,CAAE,6BAA6BL,UAC9B,SAAXT,GACCO,EAAAA,IAACa,EAAAA,UAAS,CACRP,MAAOC,EAAGD,MAAM,yBAA0B,CAAEQ,QAAS,OAG7C,cAAXrB,GACCO,EAAAA,IAACe,EAAAA,aAAY,CACXT,MAAOC,EAAGD,MAAM,yBAA0B,CAAEQ,QAAS,OAG7C,SAAXrB,GACCO,EAAAA,IAACe,EAAAA,aAAY,CACXT,MAAOC,EAAGD,MAAM,yBAA0B,CAAEQ,QAAS,cAOhE,EAIP,IAAAE,EAAeC,EAAMC,KAAK3B"}

package/lib/commonjs/components/ChatInput/ChatInput.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("../../assets/Icons/CameraIcon.js"),s=require("../../assets/Icons/EmojiFunnySquareIcon.js"),t=require("../../assets/Icons/MicrophoneIcon.js"),o=require("../../assets/Icons/PaperClipIcon.js"),r=require("../../assets/Icons/PaperPlaneIcon.js"),n=require("react"),l=require("react-native"),i=require("../../context/ChatContext.js"),a=require("twrnc"),c=require("react/jsx-runtime");const u="ios"===l.Platform.OS?32:30,h=({onSendMessage:h,onTypingStart:m,onTypingEnd:x,onAttachmentPress:p,onCameraPress:d,onAudioRecordStart:j,onAudioRecordEnd:C,CustomEmojiIcon:y,CustomAttachmentIcon:I,CustomCameraIcon:g,CustomSendIcon:P,CustomMicrophoneIcon:S})=>{const[w,b]=n.useState(""),[f,M]=n.useState({height:u,isMultiline:!1}),{theme:q,currentUserId:E,showEmojiButton:O,showAttachmentsButton:v,showCameraButton:A,showVoiceRecordButton:T,placeholder:B}=i.useChatContext(),V=n.useCallback((e=>{const s=Math.min(Math.max(e.nativeEvent.contentSize.height,u),118);M({height:s,isMultiline:s>u})}),[]),R=n.useCallback((()=>{w.trim()&&(h({text:w.trim(),senderId:E}),b(""),M({height:u,isMultiline:!1}))}),[w,h,E]);return n.useEffect((()=>{w.trim()?m?.():x?.()}),[w,m,x]),c.jsxs(l.View,{style:[a`flex-row gap-2`,q?.inputStyles?.inputSectionContainerStyle],children:[c.jsxs(l.View,{style:[a`flex-1 bg-white px-3.5 gap-1 flex-row justify-between`,f.isMultiline?a`rounded-3xl items-end`:a`rounded-full items-center`,q?.inputStyles?.inputContainerStyle],children:[O&&c.jsx(l.Pressable,{children:y?c.jsx(y,{}):c.jsx(s.EmojiFunnySquareIcon,{style:a.style(""+("ios"===l.Platform.OS?"h-6 w-6":"w-7 h-7"),f.isMultiline?"pb-14":"pb-0"),color:q?.colors?.inputsIconsColor||"rgba(0,0,0,0.7)"})}),c.jsx(l.TextInput,{value:w,onChangeText:b,placeholder:B||"Message",style:[a`bg-transparent flex-1 pl-2 my-3`,"ios"===l.Platform.OS?a`text-[17px]`:a`text-[16px]`,{minHeight:u,maxHeight:118}],placeholderTextColor:q?.colors?.placeholderTextColor||"rgba(0, 0, 0, 0.4)",multiline:!0,textAlignVertical:"center",onContentSizeChange:V}),c.jsxs(l.View,{style:[a`gap-4 flex-row`,f.isMultiline?a`pb-4`:a`pb-0`],children:[v&&c.jsx(l.Pressable,{onPress:p,children:I?c.jsx(I,{}):c.jsx(o.PaperClipIcon,{style:a.style("ios"===l.Platform.OS?"h-6 w-6":"w-7 h-7"),color:q?.colors?.inputsIconsColor||"rgba(0,0,0,0.7)"})}),A&&!w.trim()&&c.jsx(l.Pressable,{onPress:d,children:g?c.jsx(g,{}):c.jsx(e.CameraIcon,{style:a.style("ios"===l.Platform.OS?"h-6 w-6":"w-7 h-7"),color:q?.colors?.inputsIconsColor||"rgba(0,0,0,0.7)"})})]})]}),c.jsx(l.Pressable,{style:[a`p-2 rounded-full bg-green-600 justify-center items-center`,{height:"ios"===l.Platform.OS?50:48,width:"ios"===l.Platform.OS?50:48,...q?.inputStyles?.sendButtonStyle}],onPress:w.trim()?R:j,onLongPress:j,onPressOut:C,children:w.trim()?P?c.jsx(P,{}):c.jsx(r.PaperPlaneIcon,{style:a.style("h-6 w-6"),color:q?.colors?.sendIconsColor||"rgba(255,255,255,0.7)"}):T?S?c.jsx(S,{}):c.jsx(t.MicrophoneIcon,{style:a.style("h-8 w-8"),color:q?.colors?.sendIconsColor||"rgba(255,255,255,0.7)"}):P?c.jsx(P,{}):c.jsx(r.PaperPlaneIcon,{style:a.style("h-6 w-6"),color:q?.colors?.sendIconsColor||"rgba(255,255,255,0.7)"})})]})};var m=n.memo(h);module.exports=m;
+//# sourceMappingURL=ChatInput.js.map

package/lib/commonjs/components/ChatInput/ChatInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInput.js","sources":["../../../../src/components/ChatInput/ChatInput.tsx"],"sourcesContent":["import { CameraIcon } from \"../../assets/Icons/CameraIcon\";\nimport { EmojiFunnySquareIcon } from \"../../assets/Icons/EmojiFunnySquareIcon\";\nimport { MicrophoneIcon } from \"../../assets/Icons/MicrophoneIcon\";\nimport { PaperClipIcon } from \"../../assets/Icons/PaperClipIcon\";\nimport { PaperPlaneIcon } from \"../../assets/Icons/PaperPlaneIcon\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { Platform, Pressable, TextInput, View } from \"react-native\";\nimport { useChatContext } from \"../../context/ChatContext\";\nimport { ChatInputProps, InputHeightState } from \"./types\";\nimport tw from 'twrnc';\n\nconst MIN_INPUT_HEIGHT = Platform.OS === \"ios\" ? 32 : 30;\nconst MAX_INPUT_HEIGHT = 118;\n\nconst ChatInput: React.FC<ChatInputProps> = ({\n  onSendMessage,\n  onTypingStart,\n  onTypingEnd,\n  onAttachmentPress,\n  onCameraPress,\n  onAudioRecordStart,\n  onAudioRecordEnd,\n  CustomEmojiIcon,\n  CustomAttachmentIcon,\n  CustomCameraIcon,\n  CustomSendIcon,\n  CustomMicrophoneIcon,\n}) => {\n  const [inputText, setInputText] = useState(\"\");\n  const [inputHeight, setInputHeight] = useState<InputHeightState>({\n    height: MIN_INPUT_HEIGHT,\n    isMultiline: false,\n  });\n  const {\n    theme,\n    currentUserId,\n    showEmojiButton,\n    showAttachmentsButton,\n    showCameraButton,\n    showVoiceRecordButton,\n    placeholder,\n  } = useChatContext();\n\n  const handleContentSizeChange = useCallback(\n    (event: { nativeEvent: { contentSize: { height: number } } }) => {\n      const newHeight = Math.min(\n        Math.max(event.nativeEvent.contentSize.height, MIN_INPUT_HEIGHT),\n        MAX_INPUT_HEIGHT\n      );\n      setInputHeight({\n        height: newHeight,\n        isMultiline: newHeight > MIN_INPUT_HEIGHT,\n      });\n    },\n    []\n  );\n\n  const handleSendMessage = useCallback(() => {\n    if (inputText.trim()) {\n      onSendMessage({\n        text: inputText.trim(),\n        senderId: currentUserId,\n      });\n      setInputText(\"\");\n      setInputHeight({ height: MIN_INPUT_HEIGHT, isMultiline: false });\n    }\n  }, [inputText, onSendMessage, currentUserId]);\n\n  useEffect(() => {\n    if (inputText.trim()) {\n      onTypingStart?.();\n    } else {\n      onTypingEnd?.();\n    }\n  }, [inputText, onTypingStart, onTypingEnd]);\n\n  return (\n    <View\n      style={[\n        tw`flex-row gap-2`,\n        theme?.inputStyles?.inputSectionContainerStyle,\n      ]}\n    >\n      <View\n        style={[\n          tw`flex-1 bg-white px-3.5 gap-1 flex-row justify-between`,\n          inputHeight.isMultiline\n            ? tw`rounded-3xl items-end`\n            : tw`rounded-full items-center`,\n          theme?.inputStyles?.inputContainerStyle,\n        ]}\n      >\n        {showEmojiButton && (\n          <Pressable>\n            {CustomEmojiIcon ? (\n              <CustomEmojiIcon />\n            ) : (\n              <EmojiFunnySquareIcon\n                style={tw.style(\n                  `${Platform.OS === 'ios' ? 'h-6 w-6' : 'w-7 h-7'}`,\n                  inputHeight.isMultiline ? 'pb-14' : 'pb-0'\n                )}\n                color={theme?.colors?.inputsIconsColor || 'rgba(0,0,0,0.7)'}\n              />\n            )}\n          </Pressable>\n        )}\n\n        <TextInput\n          value={inputText}\n          onChangeText={setInputText}\n          placeholder={placeholder || 'Message'}\n          style={[\n            tw`bg-transparent flex-1 pl-2 my-3`,\n            Platform.OS === 'ios' ? tw`text-[17px]` : tw`text-[16px]`,\n            { minHeight: MIN_INPUT_HEIGHT, maxHeight: MAX_INPUT_HEIGHT },\n          ]}\n          placeholderTextColor={\n            theme?.colors?.placeholderTextColor || 'rgba(0, 0, 0, 0.4)'\n          }\n          multiline\n          textAlignVertical=\"center\"\n          onContentSizeChange={handleContentSizeChange}\n        />\n\n        <View\n          style={[\n            tw`gap-4 flex-row`,\n            inputHeight.isMultiline ? tw`pb-4` : tw`pb-0`,\n          ]}\n        >\n          {showAttachmentsButton && (\n            <Pressable onPress={onAttachmentPress}>\n              {CustomAttachmentIcon ? (\n                <CustomAttachmentIcon />\n              ) : (\n                <PaperClipIcon\n                  style={tw.style(\n                    Platform.OS === 'ios' ? 'h-6 w-6' : 'w-7 h-7'\n                  )}\n                  color={theme?.colors?.inputsIconsColor || 'rgba(0,0,0,0.7)'}\n                />\n              )}\n            </Pressable>\n          )}\n          {showCameraButton && !inputText.trim() && (\n            <Pressable onPress={onCameraPress}>\n              {CustomCameraIcon ? (\n                <CustomCameraIcon />\n              ) : (\n                <CameraIcon\n                  style={tw.style(\n                    Platform.OS === 'ios' ? 'h-6 w-6' : 'w-7 h-7'\n                  )}\n                  color={theme?.colors?.inputsIconsColor || 'rgba(0,0,0,0.7)'}\n                />\n              )}\n            </Pressable>\n          )}\n        </View>\n      </View>\n\n      <Pressable\n        style={[\n          tw`p-2 rounded-full bg-green-600 justify-center items-center`,\n          {\n            height: Platform.OS === 'ios' ? 50 : 48,\n            width: Platform.OS === 'ios' ? 50 : 48,\n            ...theme?.inputStyles?.sendButtonStyle,\n          },\n        ]}\n        onPress={inputText.trim() ? handleSendMessage : onAudioRecordStart}\n        onLongPress={onAudioRecordStart}\n        onPressOut={onAudioRecordEnd}\n      >\n        {inputText.trim() ? (\n          CustomSendIcon ? (\n            <CustomSendIcon />\n          ) : (\n            <PaperPlaneIcon\n              style={tw.style('h-6 w-6')}\n              color={theme?.colors?.sendIconsColor || 'rgba(255,255,255,0.7)'}\n            />\n          )\n        ) : showVoiceRecordButton ? (\n          CustomMicrophoneIcon ? (\n            <CustomMicrophoneIcon />\n          ) : (\n            <MicrophoneIcon\n              style={tw.style('h-8 w-8')}\n              color={theme?.colors?.sendIconsColor || 'rgba(255,255,255,0.7)'}\n            />\n          )\n        ) : CustomSendIcon ? (\n          <CustomSendIcon />\n        ) : (\n          <PaperPlaneIcon\n            style={tw.style('h-6 w-6')}\n            color={theme?.colors?.sendIconsColor || 'rgba(255,255,255,0.7)'}\n          />\n        )}\n      </Pressable>\n    </View>\n  );\n};\n\nexport default React.memo(ChatInput);\n"],"names":["MIN_INPUT_HEIGHT","Platform","OS","ChatInput","onSendMessage","onTypingStart","onTypingEnd","onAttachmentPress","onCameraPress","onAudioRecordStart","onAudioRecordEnd","CustomEmojiIcon","CustomAttachmentIcon","CustomCameraIcon","CustomSendIcon","CustomMicrophoneIcon","inputText","setInputText","useState","inputHeight","setInputHeight","height","isMultiline","theme","currentUserId","showEmojiButton","showAttachmentsButton","showCameraButton","showVoiceRecordButton","placeholder","useChatContext","handleContentSizeChange","useCallback","event","newHeight","Math","min","max","nativeEvent","contentSize","handleSendMessage","trim","text","senderId","useEffect","_jsxs","View","style","tw","inputStyles","inputSectionContainerStyle","children","jsxs","inputContainerStyle","_jsx","jsx","Pressable","EmojiFunnySquareIcon","color","colors","inputsIconsColor","TextInput","value","onChangeText","minHeight","maxHeight","placeholderTextColor","multiline","textAlignVertical","onContentSizeChange","onPress","PaperClipIcon","CameraIcon","width","sendButtonStyle","onLongPress","onPressOut","PaperPlaneIcon","sendIconsColor","MicrophoneIcon","ChatInput$1","React","memo"],"mappings":"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"}

package/lib/commonjs/components/MediaViewer/MediaViewer.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("../../assets/Icons/LoadingIcon.js"),t=require("../../assets/Icons/XIcon.js"),r=require("react"),s=require("react-native"),i=require("react-native-image-zoom-viewer"),o=require("react-native-video"),n=require("twrnc"),l=require("react/jsx-runtime");const a=({imageUrl:a,videoUrl:u,onClose:c})=>{const d=r.useRef(null),[b,h]=r.useState(!1),[x,g]=r.useState(!1);return a||u?l.jsx(s.Modal,{visible:!!a||!!u,transparent:!0,children:l.jsxs(s.View,{style:n`top-0 bottom-0 left-0 right-0 bg-black/80 flex-1 absolute`,children:[l.jsx(s.Pressable,{onPress:c,style:n`absolute right-4 top-4 p-2 rounded-full bg-slate-100/70 z-10`,children:l.jsx(t.XIcon,{style:n`h-8 w-8 stroke-black`})}),a&&l.jsx(i,{imageUrls:[{url:a}],enableSwipeDown:!0,onSwipeDown:c,backgroundColor:"rgba(0,0,0,0.8)",enableImageZoom:!0,onSave:()=>a,renderIndicator:()=>l.jsx(l.Fragment,{})}),u&&l.jsxs(s.View,{style:n`justify-center items-center`,children:[l.jsx(o,{source:{uri:u},ref:d,shutterColor:"transparent",controls:!0,style:{width:"100%",height:"100%",borderRadius:8,position:"relative",marginHorizontal:48},controlsStyles:{hideSettingButton:!1,hideNext:!0,hidePrevious:!0},resizeMode:"contain",onLoadStart:()=>{h(!0),g(!1)},onLoad:()=>h(!1),onBuffer:({isBuffering:e})=>h(e),onError:()=>{g(!0),h(!1)}}),b&&l.jsx(s.View,{style:n`absolute inset-0 flex items-center justify-center bg-black/40 rounded-full`,children:l.jsx(e.LoadingIcon,{style:n.style("h-12 w-12 fill-white animate-spin")})}),x&&l.jsx(s.View,{style:n`absolute inset-0 flex items-center justify-center bg-red-500/60 p-2`,children:l.jsx(s.Text,{style:n`text-white font-bold`,children:"Failed to load video"})})]})]})}):null};var u=r.memo(a);module.exports=u;
+//# sourceMappingURL=MediaViewer.js.map

package/lib/commonjs/components/MediaViewer/MediaViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaViewer.js","sources":["../../../../src/components/MediaViewer/MediaViewer.tsx"],"sourcesContent":["import { LoadingIcon } from '../../assets/Icons/LoadingIcon';\nimport { XIcon } from '../../assets/Icons/XIcon';\nimport React, { useRef, useState } from 'react';\nimport { Modal, Pressable, Text, View } from 'react-native';\nimport ImageViewer from 'react-native-image-zoom-viewer';\nimport Video, { VideoRef } from 'react-native-video';\nimport tw from 'twrnc';\nimport { MediaViewerProps } from './types';\n\nconst MediaViewer: React.FC<MediaViewerProps> = ({\n  imageUrl,\n  videoUrl,\n  onClose,\n}) => {\n  const videoRef = useRef<VideoRef>(null);\n  const [videoIsLoading, setVideoIsLoading] = useState(false);\n  const [videoHasError, setVideoHasError] = useState(false);\n\n  if (!imageUrl && !videoUrl) return null;\n\n  return (\n    <Modal visible={!!imageUrl || !!videoUrl} transparent={true}>\n      <View\n        style={tw`top-0 bottom-0 left-0 right-0 bg-black/80 flex-1 absolute`}\n      >\n        <Pressable\n          onPress={onClose}\n          style={tw`absolute right-4 top-4 p-2 rounded-full bg-slate-100/70 z-10`}\n        >\n          <XIcon style={tw`h-8 w-8 stroke-black`} />\n        </Pressable>\n\n        {imageUrl && (\n          <ImageViewer\n            imageUrls={[{ url: imageUrl }]}\n            enableSwipeDown\n            onSwipeDown={onClose}\n            backgroundColor=\"rgba(0,0,0,0.8)\"\n            enableImageZoom\n            onSave={() => imageUrl}\n            renderIndicator={() => <></>}\n          />\n        )}\n\n        {videoUrl && (\n          <View style={tw`justify-center items-center`}>\n            <Video\n              source={{ uri: videoUrl }}\n              ref={videoRef}\n              shutterColor=\"transparent\"\n              controls={true}\n              style={{\n                width: '100%',\n                height: '100%',\n                borderRadius: 8,\n                position: 'relative',\n                marginHorizontal: 48,\n              }}\n              controlsStyles={{\n                hideSettingButton: false,\n                hideNext: true,\n                hidePrevious: true,\n              }}\n              resizeMode=\"contain\"\n              onLoadStart={() => {\n                setVideoIsLoading(true);\n                setVideoHasError(false);\n              }}\n              onLoad={() => setVideoIsLoading(false)}\n              onBuffer={({ isBuffering }) => setVideoIsLoading(isBuffering)}\n              onError={() => {\n                setVideoHasError(true);\n                setVideoIsLoading(false);\n              }}\n            />\n            {videoIsLoading && (\n              <View\n                style={tw`absolute inset-0 flex items-center justify-center bg-black/40 rounded-full`}\n              >\n                <LoadingIcon\n                  style={tw.style('h-12 w-12 fill-white animate-spin')}\n                />\n              </View>\n            )}\n            {videoHasError && (\n              <View\n                style={tw`absolute inset-0 flex items-center justify-center bg-red-500/60 p-2`}\n              >\n                <Text style={tw`text-white font-bold`}>\n                  Failed to load video\n                </Text>\n              </View>\n            )}\n          </View>\n        )}\n      </View>\n    </Modal>\n  );\n};\n\nexport default React.memo(MediaViewer);\n"],"names":["MediaViewer","imageUrl","videoUrl","onClose","videoRef","useRef","videoIsLoading","setVideoIsLoading","useState","videoHasError","setVideoHasError","_jsx","Modal","visible","transparent","children","_jsxs","jsxs","View","style","tw","jsx","Pressable","onPress","XIcon","ImageViewer","imageUrls","url","enableSwipeDown","onSwipeDown","backgroundColor","enableImageZoom","onSave","renderIndicator","_Fragment","Video","source","uri","ref","shutterColor","controls","width","height","borderRadius","position","marginHorizontal","controlsStyles","hideSettingButton","hideNext","hidePrevious","resizeMode","onLoadStart","onLoad","onBuffer","isBuffering","onError","LoadingIcon","Text","MediaViewer$1","React","memo"],"mappings":"oRASA,MAAMA,EAA0CA,EAC9CC,WACAC,WACAC,cAEA,MAAMC,EAAWC,EAAMA,OAAW,OAC3BC,EAAgBC,GAAqBC,EAAAA,UAAS,IAC9CC,EAAeC,GAAoBF,EAAAA,UAAS,GAEnD,OAAKP,GAAaC,EAGhBS,EAAAA,IAACC,EAAAA,MAAK,CAACC,UAAWZ,KAAcC,EAAUY,aAAa,EAAKC,SAC1DC,EAAAC,KAACC,OAAI,CACHC,MAAOC,CAAE,4DAA4DL,SAAA,CAErEJ,EAAAU,IAACC,YAAS,CACRC,QAASpB,EACTgB,MAAOC,CAAE,+DAA+DL,SAExEJ,EAAAU,IAACG,QAAK,CAACL,MAAOC,CAAE,2BAGjBnB,GACCU,EAAAU,IAACI,EAAW,CACVC,UAAW,CAAC,CAAEC,IAAK1B,IACnB2B,iBAAe,EACfC,YAAa1B,EACb2B,gBAAgB,kBAChBC,iBAAe,EACfC,OAAQA,IAAM/B,EACdgC,gBAAiBA,IAAMtB,MAAAuB,EAAAA,SAAI,CAAA,KAI9BhC,GACCc,EAAAC,KAACC,OAAI,CAACC,MAAOC,CAAE,8BAA8BL,SAAA,CAC3CJ,EAAAU,IAACc,EAAK,CACJC,OAAQ,CAAEC,IAAKnC,GACfoC,IAAKlC,EACLmC,aAAa,cACbC,UAAU,EACVrB,MAAO,CACLsB,MAAO,OACPC,OAAQ,OACRC,aAAc,EACdC,SAAU,WACVC,iBAAkB,IAEpBC,eAAgB,CACdC,mBAAmB,EACnBC,UAAU,EACVC,cAAc,GAEhBC,WAAW,UACXC,YAAaA,KACX5C,GAAkB,GAClBG,GAAiB,EAAM,EAEzB0C,OAAQA,IAAM7C,GAAkB,GAChC8C,SAAUA,EAAGC,iBAAkB/C,EAAkB+C,GACjDC,QAASA,KACP7C,GAAiB,GACjBH,GAAkB,EAAM,IAG3BD,GACCK,EAAAU,IAACH,OAAI,CACHC,MAAOC,CAAE,6EAA6EL,SAEtFJ,EAAAU,IAACmC,cAAW,CACVrC,MAAOC,EAAGD,MAAM,yCAIrBV,GACCE,EAAAU,IAACH,OAAI,CACHC,MAAOC,CAAE,sEAAsEL,SAE/EJ,EAAAU,IAACoC,OAAI,CAACtC,MAAOC,CAAE,uBAAuBL,SAAC,mCAtElB,IA8EzB,EAIZ,IAAA2C,EAAeC,EAAMC,KAAK5D"}

package/lib/commonjs/components/TypingComponent/TypingIndicator.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react-native"),t=require("twrnc"),r=require("../../assets/Icons/ArrowBack2RoundedIcon.js"),l=require("../../context/ChatContext.js"),n=require("react/jsx-runtime");exports.TypingIndicator=({typingUsers:s,currentUserId:i})=>{const{theme:a,showAvatars:o,renderCustomTyping:c,showBubbleTail:d}=l.useChatContext(),u=s.filter((e=>e.id!==i));if(!u.length)return null;const x=u.slice(0,2),y=u.length-2;return n.jsxs(e.View,{style:t`my-1 max-w-[75%] self-start flex-row`,children:[o&&n.jsxs(e.View,{style:t`flex-row`,children:[x.map(((r,l)=>n.jsx(e.View,{style:[t`bg-gray-400 w-6 h-6 rounded-full items-center`,{marginLeft:l>0?-10:0,zIndex:x.length+l}],children:r.avatar?n.jsx(e.Image,{source:{uri:r.avatar},style:[t`w-full h-full object-cover rounded-full`,a?.bubbleStyle?.avatarImageStyle]}):n.jsx(e.Text,{style:[t`text-sm text-black font-semibold capitalize rounded-full bg-zinc-300 w-full h-full text-center pt-0.5`,a?.bubbleStyle?.avatarTextStyle],children:r.name?.charAt(0)})},r.id))),y>0&&n.jsx(e.View,{style:[t`bg-gray-400 w-6 h-6 rounded-full items-center justify-center`,{marginLeft:-10,zIndex:3},{...a?.bubbleStyle?.additionalTypingUsersContainerStyle}],children:n.jsxs(e.Text,{style:[t`text-white text-xs font-semibold`,a?.bubbleStyle?.additionalTypingUsersTextStyle],children:["+",y]})})]}),d&&n.jsx(r.ArrowBack2RoundedIcon,{style:t.style("w-6 h-6 fill-white mt-[1.25px]",{transform:[{rotate:"180deg"},{translateX:6}]}),color:`${a?.colors?.receivedMessageTailColor||"white"}`}),n.jsx(e.View,{style:[t`px-2 my-1 bg-white rounded-tl-none rounded-lg`,a?.bubbleStyle?.typingContainerStyle],children:c?c():n.jsx(e.View,{style:t`flex-row items-center py-3 px-2 justify-center`,children:n.jsx(e.Text,{style:t`text-gray-600`,children:"Typing..."})})})]})};
+//# sourceMappingURL=TypingIndicator.js.map

package/lib/commonjs/components/TypingComponent/TypingIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypingIndicator.js","sources":["../../../../src/components/TypingComponent/TypingIndicator.tsx"],"sourcesContent":["import { Image, Text, View } from 'react-native';\nimport tw from 'twrnc';\nimport { ArrowBack2RoundedIcon } from '../../assets/Icons/ArrowBack2RoundedIcon';\nimport { useChatContext } from '../../context/ChatContext';\n\nexport interface TypingUser {\n  id: string;\n  avatar: string;\n  name: string;\n}\n\ninterface TypingIndicatorProps {\n  typingUsers: TypingUser[];\n  currentUserId: string;\n}\n\nexport const TypingIndicator = ({\n  typingUsers,\n  currentUserId,\n}: TypingIndicatorProps) => {\n  const { theme, showAvatars, renderCustomTyping, showBubbleTail } =\n    useChatContext();\n\n  const otherTypingUsers = typingUsers.filter(\n    (user) => user.id !== currentUserId\n  );\n\n  if (!otherTypingUsers.length) return null;\n\n  const displayedUsers = otherTypingUsers.slice(0, 2);\n  const additionalUsers = otherTypingUsers.length - 2;\n\n  return (\n    <View style={tw`my-1 max-w-[75%] self-start flex-row`}>\n      {showAvatars && (\n        <View style={tw`flex-row`}>\n          {displayedUsers.map((user, index) => (\n            <View\n              key={user.id}\n              style={[\n                tw`bg-gray-400 w-6 h-6 rounded-full items-center`,\n                {\n                  marginLeft: index > 0 ? -10 : 0,\n                  zIndex: displayedUsers.length + index,\n                },\n              ]}\n            >\n              {user.avatar ? (\n                <Image\n                  source={{ uri: user.avatar }}\n                  style={[\n                    tw`w-full h-full object-cover rounded-full`,\n                    theme?.bubbleStyle?.avatarImageStyle,\n                  ]}\n                />\n              ) : (\n                <Text\n                  style={[\n                    tw`text-sm text-black font-semibold capitalize rounded-full bg-zinc-300 w-full h-full text-center pt-0.5`,\n                    theme?.bubbleStyle?.avatarTextStyle,\n                  ]}\n                >\n                  {user.name?.charAt(0)}\n                </Text>\n              )}\n            </View>\n          ))}\n          {additionalUsers > 0 && (\n            <View\n              style={[\n                tw`bg-gray-400 w-6 h-6 rounded-full items-center justify-center`,\n                {\n                  marginLeft: -10,\n                  zIndex: 3,\n                },\n                { ...theme?.bubbleStyle?.additionalTypingUsersContainerStyle },\n              ]}\n            >\n              <Text\n                style={[\n                  tw`text-white text-xs font-semibold`,\n                  theme?.bubbleStyle?.additionalTypingUsersTextStyle,\n                ]}\n              >\n                +{additionalUsers}\n              </Text>\n            </View>\n          )}\n        </View>\n      )}\n      {showBubbleTail && (\n        <ArrowBack2RoundedIcon\n          style={tw.style(\n            'w-6 h-6 fill-white mt-[1.25px]', \n            {\n              transform: [{ rotate: '180deg' }, { translateX: 6 }],\n            }\n          )}\n          color={`${theme?.colors?.receivedMessageTailColor || 'white'}`}\n        />\n      )}\n\n      <View\n        style={[\n          tw`px-2 my-1 bg-white rounded-tl-none rounded-lg`,\n          theme?.bubbleStyle?.typingContainerStyle,\n        ]}\n      >\n        {renderCustomTyping ? (\n          renderCustomTyping()\n        ) : (\n          <View style={tw`flex-row items-center py-3 px-2 justify-center`}>\n            <Text style={tw`text-gray-600`}>Typing...</Text>\n          </View>\n        )}\n      </View>\n    </View>\n  );\n};\n"],"names":["TypingIndicator","typingUsers","currentUserId","theme","showAvatars","renderCustomTyping","showBubbleTail","useChatContext","otherTypingUsers","filter","user","id","length","displayedUsers","slice","additionalUsers","_jsxs","View","style","tw","children","jsxs","map","index","_jsx","jsx","marginLeft","zIndex","avatar","Image","source","uri","bubbleStyle","avatarImageStyle","Text","avatarTextStyle","name","charAt","additionalTypingUsersContainerStyle","additionalTypingUsersTextStyle","ArrowBack2RoundedIcon","transform","rotate","translateX","color","colors","receivedMessageTailColor","typingContainerStyle"],"mappings":"wNAgB+BA,EAC7BC,cACAC,oBAEA,MAAMC,MAAEA,EAAKC,YAAEA,EAAWC,mBAAEA,EAAkBC,eAAEA,GAC9CC,mBAEIC,EAAmBP,EAAYQ,QAClCC,GAASA,EAAKC,KAAOT,IAGxB,IAAKM,EAAiBI,OAAQ,OAAO,KAErC,MAAMC,EAAiBL,EAAiBM,MAAM,EAAG,GAC3CC,EAAkBP,EAAiBI,OAAS,EAElD,OACEI,EAAAA,KAACC,EAAAA,KAAI,CAACC,MAAOC,CAAE,uCAAuCC,SACnDhB,CAAAA,GACCY,EAAAK,KAACJ,OAAI,CAACC,MAAOC,CAAE,WAAWC,SACvBP,CAAAA,EAAeS,KAAI,CAACZ,EAAMa,IACzBC,EAAAC,IAACR,OAAI,CAEHC,MAAO,CACLC,CAAE,gDACF,CACEO,WAAYH,EAAQ,GAAI,GAAM,EAC9BI,OAAQd,EAAeD,OAASW,IAElCH,SAEDV,EAAKkB,OACJJ,EAAAA,IAACK,EAAAA,MAAK,CACJC,OAAQ,CAAEC,IAAKrB,EAAKkB,QACpBV,MAAO,CACLC,CAAE,0CACFhB,GAAO6B,aAAaC,oBAIxBT,EAAAC,IAACS,OAAI,CACHhB,MAAO,CACLC,CAAE,wGACFhB,GAAO6B,aAAaG,iBACpBf,SAEDV,EAAK0B,MAAMC,OAAO,MAxBlB3B,EAAKC,MA6BbI,EAAkB,GACjBS,EAAAC,IAACR,OAAI,CACHC,MAAO,CACLC,CAAE,+DACF,CACEO,YAAe,GACfC,OAAQ,GAEV,IAAKxB,GAAO6B,aAAaM,sCACzBlB,SAEFJ,EAAAK,KAACa,OAAI,CACHhB,MAAO,CACLC,CAAE,mCACFhB,GAAO6B,aAAaO,gCACpBnB,SAAA,CACH,IACGL,UAMXT,GACCkB,EAAAC,IAACe,wBAAqB,CACpBtB,MAAOC,EAAGD,MACR,iCACA,CACEuB,UAAW,CAAC,CAAEC,OAAQ,UAAY,CAAEC,WAAY,MAGpDC,MAAO,GAAGzC,GAAO0C,QAAQC,0BAA4B,YAIzDtB,EAAAC,IAACR,OAAI,CACHC,MAAO,CACLC,CAAE,gDACFhB,GAAO6B,aAAae,sBACpB3B,SAEDf,EACCA,IAEAmB,EAAAA,IAACP,EAAAA,KAAI,CAACC,MAAOC,CAAE,iDAAiDC,SAC9DI,EAAAC,IAACS,OAAI,CAAChB,MAAOC,CAAE,gBAAgBC,SAAC,oBAIjC"}