react-mention-input 1.1.28 → 1.1.30

package/dist/ShowMessageCard.js

@@ -18,7 +18,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import React, { useState } from "react";
+import React, { useState, memo } from "react";
 import "./ShowMessageCard.css";
 import { useProtectedImage } from "./useProtectedImage";
 export var ShowMessageCard = function (_a) {
@@ -50,8 +50,8 @@ export var ShowMessageCard = function (_a) {
             .join("");
         return initials;
     };
-    // Component to render protected images
-    var ProtectedImage = function (_a) {
+    // Component to render protected images - memoized to prevent recreation on every render
+    var ProtectedImage = memo(function (_a) {
         var url = _a.url, alt = _a.alt, className = _a.className, style = _a.style, containerClassName = _a.containerClassName, containerStyle = _a.containerStyle, onError = _a.onError, _b = _a.renderInContainer, renderInContainer = _b === void 0 ? true : _b;
         var displayUrl = useProtectedImage({
             url: url,
@@ -66,7 +66,7 @@ export var ShowMessageCard = function (_a) {
             return (React.createElement("div", { className: containerClassName, style: containerStyle }, imgElement));
         }
         return imgElement;
-    };
+    });
     // Helper function to extract hashtags and mentions from text
     var extractTagsAndMentions = function (text) {
         // First extract from HTML with spans

package/dist/useProtectedImage.d.ts

@@ -7,6 +7,7 @@ interface UseProtectedImageOptions {
  * Custom hook to handle protected image URLs that require authentication tokens in headers.
  * For protected URLs, it fetches the image with auth headers and converts it to a blob URL.
  * For non-protected URLs, it returns the URL as-is.
+ * Uses a module-level cache to prevent blinking on re-renders.
  */
 export declare const useProtectedImage: ({ url, isProtected, getAuthHeaders, }: UseProtectedImageOptions) => string | null;
 export {};

package/dist/useProtectedImage.js

@@ -46,41 +46,86 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { useState, useEffect, useRef } from 'react';
+// Module-level cache to persist blob URLs across component re-renders
+var blobUrlCache = new Map();
+var fetchingUrls = new Set();
 /**
  * Custom hook to handle protected image URLs that require authentication tokens in headers.
  * For protected URLs, it fetches the image with auth headers and converts it to a blob URL.
  * For non-protected URLs, it returns the URL as-is.
+ * Uses a module-level cache to prevent blinking on re-renders.
  */
 export var useProtectedImage = function (_a) {
     var url = _a.url, isProtected = _a.isProtected, getAuthHeaders = _a.getAuthHeaders;
-    var _b = useState(null), blobUrl = _b[0], setBlobUrl = _b[1];
-    var blobUrlRef = useRef(null);
+    var _b = useState(function () {
+        // Initialize from cache if available
+        return url ? blobUrlCache.get(url) || null : null;
+    }), blobUrl = _b[0], setBlobUrl = _b[1];
+    var previousUrlRef = useRef(null);
+    var isProtectedRef = useRef(isProtected);
+    var getAuthHeadersRef = useRef(getAuthHeaders);
+    var mountedRef = useRef(true);
+    // Update refs when props change (but don't trigger re-fetch)
     useEffect(function () {
-        // Cleanup previous blob URL
-        if (blobUrlRef.current) {
-            URL.revokeObjectURL(blobUrlRef.current);
-            blobUrlRef.current = null;
+        isProtectedRef.current = isProtected;
+        getAuthHeadersRef.current = getAuthHeaders;
+    }, [isProtected, getAuthHeaders]);
+    useEffect(function () {
+        mountedRef.current = true;
+        return function () {
+            mountedRef.current = false;
+        };
+    }, []);
+    useEffect(function () {
+        // Always check cache first and restore if needed (synchronous)
+        if (url && blobUrlCache.has(url) && !blobUrl) {
+            var cachedBlobUrl = blobUrlCache.get(url);
+            setBlobUrl(cachedBlobUrl);
         }
-        setBlobUrl(null);
+        // If URL hasn't changed, keep using cached blob URL
+        if (url === previousUrlRef.current) {
+            return;
+        }
+        var oldUrl = previousUrlRef.current;
+        previousUrlRef.current = url;
         if (!url) {
+            setBlobUrl(null);
             return;
         }
         // Check if URL is protected
-        var shouldUseAuth = typeof isProtected === 'boolean'
-            ? isProtected
-            : isProtected ? isProtected(url) : false;
-        // If not protected, don't fetch - will use original URL
-        if (!shouldUseAuth || !getAuthHeaders) {
+        var shouldUseAuth = typeof isProtectedRef.current === 'boolean'
+            ? isProtectedRef.current
+            : isProtectedRef.current ? isProtectedRef.current(url) : false;
+        // If not protected, use original URL
+        if (!shouldUseAuth || !getAuthHeadersRef.current) {
+            // Clear any cached blob URL for this URL
+            if (blobUrlCache.has(url)) {
+                var cachedBlobUrl = blobUrlCache.get(url);
+                URL.revokeObjectURL(cachedBlobUrl);
+                blobUrlCache.delete(url);
+            }
+            setBlobUrl(null);
+            return;
+        }
+        // Check cache first - if we have a cached blob URL, use it immediately
+        if (blobUrlCache.has(url)) {
+            var cachedBlobUrl = blobUrlCache.get(url);
+            setBlobUrl(cachedBlobUrl);
+            return;
+        }
+        // If already fetching this URL, don't fetch again
+        if (fetchingUrls.has(url)) {
             return;
         }
         // Fetch protected image with auth headers
+        fetchingUrls.add(url);
         var fetchProtectedImage = function () { return __awaiter(void 0, void 0, void 0, function () {
             var headers, response, blob, newBlobUrl, error_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        _a.trys.push([0, 4, , 5]);
-                        return [4 /*yield*/, Promise.resolve(getAuthHeaders())];
+                        _a.trys.push([0, 4, 5, 6]);
+                        return [4 /*yield*/, Promise.resolve(getAuthHeadersRef.current())];
                     case 1:
                         headers = _a.sent();
                         return [4 /*yield*/, fetch(url, {
@@ -96,34 +141,47 @@ export var useProtectedImage = function (_a) {
                     case 3:
                         blob = _a.sent();
                         newBlobUrl = URL.createObjectURL(blob);
-                        blobUrlRef.current = newBlobUrl;
-                        setBlobUrl(newBlobUrl);
-                        return [3 /*break*/, 5];
+                        // Only update if URL hasn't changed during fetch and component is still mounted
+                        if (previousUrlRef.current === url && mountedRef.current) {
+                            // Cache the blob URL
+                            blobUrlCache.set(url, newBlobUrl);
+                            setBlobUrl(newBlobUrl);
+                        }
+                        else {
+                            // URL changed during fetch or component unmounted, revoke this blob URL
+                            URL.revokeObjectURL(newBlobUrl);
+                        }
+                        return [3 /*break*/, 6];
                     case 4:
                         error_1 = _a.sent();
                         console.error('Error fetching protected image:', error_1);
-                        // On error, fallback to original URL (might show broken image, but won't crash)
-                        setBlobUrl(null);
-                        return [3 /*break*/, 5];
-                    case 5: return [2 /*return*/];
+                        // On error, only clear if URL hasn't changed and component is mounted
+                        if (previousUrlRef.current === url && mountedRef.current) {
+                            setBlobUrl(null);
+                        }
+                        return [3 /*break*/, 6];
+                    case 5:
+                        fetchingUrls.delete(url);
+                        return [7 /*endfinally*/];
+                    case 6: return [2 /*return*/];
                 }
             });
         }); };
         fetchProtectedImage();
-        // Cleanup function
-        return function () {
-            if (blobUrlRef.current) {
-                URL.revokeObjectURL(blobUrlRef.current);
-                blobUrlRef.current = null;
-            }
-        };
-    }, [url, isProtected, getAuthHeaders]);
+    }, [url]); // Only depend on url
+    // Cleanup: Don't revoke blob URLs on unmount - keep them in cache for reuse
+    // They will be cleaned up when the URL changes or when the cache is cleared
     // Return blob URL if available, otherwise return original URL (or null)
     if (!url) {
         return null;
     }
-    var isUrlProtected = typeof isProtected === 'boolean'
-        ? isProtected
-        : isProtected ? isProtected(url) : false;
-    return blobUrl || (!isUrlProtected ? url : null);
+    var isUrlProtected = typeof isProtectedRef.current === 'boolean'
+        ? isProtectedRef.current
+        : isProtectedRef.current ? isProtectedRef.current(url) : false;
+    // For protected URLs, return cached blob URL or current blobUrl state
+    // For non-protected URLs, return the original URL
+    if (isUrlProtected) {
+        return blobUrl || blobUrlCache.get(url) || null;
+    }
+    return url;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mention-input",
-  "version": "1.1.28",
+  "version": "1.1.30",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -25,7 +25,7 @@
   "description": "A React component for input with @mention functionality.",
   "repository": {
     "type": "git",
-    "url": "https://github.com/yourusername/react-mention-input.git"
+    "url": "git+https://github.com/yourusername/react-mention-input.git"
   },
   "devDependencies": {
     "@types/node": "^22.9.0",

package/src/ShowMessageCard.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useState, ReactNode } from "react";
+import React, { CSSProperties, useState, ReactNode, useMemo, memo } from "react";
 import "./ShowMessageCard.css";
 import { useProtectedImage } from "./useProtectedImage";
 
@@ -112,8 +112,8 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
     return initials;
   };
 
-  // Component to render protected images
-  const ProtectedImage: React.FC<{ 
+  // Component to render protected images - memoized to prevent recreation on every render
+  const ProtectedImage = memo<{ 
     url: string; 
     alt: string; 
     className?: string; 
@@ -122,7 +122,7 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
     containerStyle?: CSSProperties;
     onError?: () => void;
     renderInContainer?: boolean;
-  }> = ({ url, alt, className, style, containerClassName, containerStyle, onError, renderInContainer = true }) => {
+  }>(({ url, alt, className, style, containerClassName, containerStyle, onError, renderInContainer = true }) => {
     const displayUrl = useProtectedImage({
       url,
       isProtected: isProtectedUrl,
@@ -152,7 +152,7 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
     }
 
     return imgElement;
-  };
+  });
 
   // Helper function to extract hashtags and mentions from text
   const extractTagsAndMentions = (text: string) => {

package/src/useProtectedImage.ts

@@ -6,45 +6,97 @@ interface UseProtectedImageOptions {
   getAuthHeaders?: () => Record<string, string> | Promise<Record<string, string>>;
 }
 
+// Module-level cache to persist blob URLs across component re-renders
+const blobUrlCache = new Map<string, string>();
+const fetchingUrls = new Set<string>();
+
 /**
  * Custom hook to handle protected image URLs that require authentication tokens in headers.
  * For protected URLs, it fetches the image with auth headers and converts it to a blob URL.
  * For non-protected URLs, it returns the URL as-is.
+ * Uses a module-level cache to prevent blinking on re-renders.
  */
 export const useProtectedImage = ({
   url,
   isProtected,
   getAuthHeaders,
 }: UseProtectedImageOptions): string | null => {
-  const [blobUrl, setBlobUrl] = useState<string | null>(null);
-  const blobUrlRef = useRef<string | null>(null);
+  const [blobUrl, setBlobUrl] = useState<string | null>(() => {
+    // Initialize from cache if available
+    return url ? blobUrlCache.get(url) || null : null;
+  });
+  const previousUrlRef = useRef<string | null>(null);
+  const isProtectedRef = useRef(isProtected);
+  const getAuthHeadersRef = useRef(getAuthHeaders);
+  const mountedRef = useRef(true);
+
+  // Update refs when props change (but don't trigger re-fetch)
+  useEffect(() => {
+    isProtectedRef.current = isProtected;
+    getAuthHeadersRef.current = getAuthHeaders;
+  }, [isProtected, getAuthHeaders]);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
 
   useEffect(() => {
-    // Cleanup previous blob URL
-    if (blobUrlRef.current) {
-      URL.revokeObjectURL(blobUrlRef.current);
-      blobUrlRef.current = null;
+    // Always check cache first and restore if needed (synchronous)
+    if (url && blobUrlCache.has(url) && !blobUrl) {
+      const cachedBlobUrl = blobUrlCache.get(url)!;
+      setBlobUrl(cachedBlobUrl);
     }
-    setBlobUrl(null);
+
+    // If URL hasn't changed, keep using cached blob URL
+    if (url === previousUrlRef.current) {
+      return;
+    }
+
+    const oldUrl = previousUrlRef.current;
+    previousUrlRef.current = url;
 
     if (!url) {
+      setBlobUrl(null);
       return;
     }
 
     // Check if URL is protected
-    const shouldUseAuth = typeof isProtected === 'boolean' 
-      ? isProtected 
-      : isProtected ? isProtected(url) : false;
+    const shouldUseAuth = typeof isProtectedRef.current === 'boolean' 
+      ? isProtectedRef.current 
+      : isProtectedRef.current ? isProtectedRef.current(url) : false;
+
+    // If not protected, use original URL
+    if (!shouldUseAuth || !getAuthHeadersRef.current) {
+      // Clear any cached blob URL for this URL
+      if (blobUrlCache.has(url)) {
+        const cachedBlobUrl = blobUrlCache.get(url)!;
+        URL.revokeObjectURL(cachedBlobUrl);
+        blobUrlCache.delete(url);
+      }
+      setBlobUrl(null);
+      return;
+    }
 
-    // If not protected, don't fetch - will use original URL
-    if (!shouldUseAuth || !getAuthHeaders) {
+    // Check cache first - if we have a cached blob URL, use it immediately
+    if (blobUrlCache.has(url)) {
+      const cachedBlobUrl = blobUrlCache.get(url)!;
+      setBlobUrl(cachedBlobUrl);
+      return;
+    }
+
+    // If already fetching this URL, don't fetch again
+    if (fetchingUrls.has(url)) {
       return;
     }
 
     // Fetch protected image with auth headers
+    fetchingUrls.add(url);
     const fetchProtectedImage = async () => {
       try {
-        const headers = await Promise.resolve(getAuthHeaders());
+        const headers = await Promise.resolve(getAuthHeadersRef.current!());
         const response = await fetch(url, {
           method: 'GET',
           headers: {
@@ -58,34 +110,48 @@ export const useProtectedImage = ({
 
         const blob = await response.blob();
         const newBlobUrl = URL.createObjectURL(blob);
-        blobUrlRef.current = newBlobUrl;
-        setBlobUrl(newBlobUrl);
+        
+        // Only update if URL hasn't changed during fetch and component is still mounted
+        if (previousUrlRef.current === url && mountedRef.current) {
+          // Cache the blob URL
+          blobUrlCache.set(url, newBlobUrl);
+          setBlobUrl(newBlobUrl);
+        } else {
+          // URL changed during fetch or component unmounted, revoke this blob URL
+          URL.revokeObjectURL(newBlobUrl);
+        }
       } catch (error) {
         console.error('Error fetching protected image:', error);
-        // On error, fallback to original URL (might show broken image, but won't crash)
-        setBlobUrl(null);
+        // On error, only clear if URL hasn't changed and component is mounted
+        if (previousUrlRef.current === url && mountedRef.current) {
+          setBlobUrl(null);
+        }
+      } finally {
+        fetchingUrls.delete(url);
       }
     };
 
     fetchProtectedImage();
+  }, [url]); // Only depend on url
 
-    // Cleanup function
-    return () => {
-      if (blobUrlRef.current) {
-        URL.revokeObjectURL(blobUrlRef.current);
-        blobUrlRef.current = null;
-      }
-    };
-  }, [url, isProtected, getAuthHeaders]);
+  // Cleanup: Don't revoke blob URLs on unmount - keep them in cache for reuse
+  // They will be cleaned up when the URL changes or when the cache is cleared
 
   // Return blob URL if available, otherwise return original URL (or null)
   if (!url) {
     return null;
   }
   
-  const isUrlProtected = typeof isProtected === 'boolean' 
-    ? isProtected 
-    : isProtected ? isProtected(url) : false;
-  return blobUrl || (!isUrlProtected ? url : null);
+  const isUrlProtected = typeof isProtectedRef.current === 'boolean' 
+    ? isProtectedRef.current 
+    : isProtectedRef.current ? isProtectedRef.current(url) : false;
+  
+  // For protected URLs, return cached blob URL or current blobUrl state
+  // For non-protected URLs, return the original URL
+  if (isUrlProtected) {
+    return blobUrl || blobUrlCache.get(url) || null;
+  }
+  
+  return url;
 };
 

package/demo.tsx

@@ -1,167 +0,0 @@
-import React, { useState } from 'react';
-import { MentionInput, ShowMessageCard } from './src';
-
-const Demo: React.FC = () => {
-  const [messages, setMessages] = useState<any[]>([
-    {
-      id: 1,
-      name: 'John Doe',
-      date: '14/07/2025 04:15 PM',
-      comment: 'Updated the status to Draft. Need <span class="mention-highlight">@team-leads</span> review before proceeding. <span class="hashtag-highlight">#urgent</span> <span class="hashtag-highlight">#review</span>',
-      objectName: '26may_item001',
-      revision: 'A',
-      object_type_icon: '📄',
-      relatedObject: 'test_jeet_july2334 (A)',
-    },
-    {
-      id: 2,
-      name: 'Mike Johnson',
-      date: '14/07/2025 04:15 PM',
-      comment: 'Revision A completed successfully. Ready for next phase. <span class="hashtag-highlight">#milestone</span>',
-      objectName: '26may_item001',
-      revision: 'A',
-      object_type_icon: '📋',
-      relatedObject: 'test_jeet_july2334 (A)',
-    }
-  ]);
-
-  // Sample users for mentions
-  const users = [
-    { id: 1, name: 'John Doe' },
-    { id: 2, name: 'Jane Smith' },
-    { id: 3, name: 'Mike Johnson' },
-    { id: 4, name: 'Sarah Wilson' },
-  ];
-
-  const handleSendMessage = (messageData: {
-    messageText: string;
-    messageHTML: string;
-    userSelectListWithIds: { id: number; name: string }[];
-    userSelectListName: string[];
-    tags: string[];
-    images?: File[];
-    imageUrl?: string | null;
-  }) => {
-    console.log('Message Data:', messageData);
-    console.log('Extracted Tags:', messageData.tags);
-
-    // Create a new message for display
-    const newMessage = {
-      id: Date.now(),
-      name: 'You',
-      date: new Date().toLocaleTimeString(),
-      comment: messageData.messageHTML,
-      imageUrl: messageData.imageUrl,
-      tags: messageData.tags,
-      mentions: messageData.userSelectListName,
-      objectName: 'new_item001', // You can customize this or make it dynamic
-      revision: 'A', // You can customize this or make it dynamic
-      object_type_icon: '✨', // You can customize this or make it dynamic
-      relatedObject: 'test_jeet_july2334 (A)', // You can customize this or make it dynamic
-    };
-
-    setMessages([...messages, newMessage]);
-  };
-
-  return (
-    <div style={{ maxWidth: '600px', margin: '20px auto', padding: '20px' }}>
-      <h1>React Mention Input with Hashtag Support</h1>
-      
-      <div style={{ marginBottom: '20px' }}>
-        <h3>Features:</h3>
-        <ul>
-          <li>Type <strong>@</strong> to mention users (e.g., @John Doe)</li>
-          <li>Type <strong>#</strong> to create hashtags (e.g., #urgent #review #milestone)</li>
-          <li>Links are automatically detected and highlighted</li>
-          <li>Hashtags are extracted and returned in the tags array</li>
-          <li><strong>Custom Object Chip</strong> rendering with objectChipRender prop</li>
-          <li><strong>Object Type Icons</strong> for visual identification</li>
-        </ul>
-      </div>
-
-      <div style={{ marginBottom: '20px' }}>
-        <MentionInput
-          users={users}
-          placeholder="Type @ to mention and inform someone"
-          onSendMessage={handleSendMessage}
-          suggestionPosition="bottom"
-        />
-      </div>
-
-      <div>
-        <h3>Messages (Default Object Chip):</h3>
-        <ShowMessageCard data={messages} />
-      </div>
-
-      <div style={{ marginTop: '30px' }}>
-        <h3>Messages (Custom Object Chip):</h3>
-        <ShowMessageCard 
-          data={messages} 
-          objectChipRender={({ objectName, revision, objectTypeIcon, item }) => (
-            <div style={{
-              backgroundColor: '#007bff',
-              color: 'white',
-              padding: '6px 12px',
-              borderRadius: '20px',
-              fontSize: '12px',
-              fontWeight: '600',
-              boxShadow: '0 2px 4px rgba(0,123,255,0.3)',
-              display: 'flex',
-              alignItems: 'center',
-              gap: '4px'
-            }}>
-              {objectTypeIcon && <span>{objectTypeIcon}</span>}
-              {objectName && <span>{objectName}</span>}
-              {revision && <span style={{ opacity: 0.8 }}> v{revision}</span>}
-            </div>
-          )}
-        />
-      </div>
-
-      <div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#f5f5f5', borderRadius: '8px' }}>
-        <h4>Example Usage:</h4>
-        <p>Try typing these examples:</p>
-        <ul>
-          <li>"Project update complete. Ready for @John Doe review #milestone #completed"</li>
-          <li>"Need urgent help with deployment @Jane Smith @Mike Johnson #urgent #deployment #help"</li>
-          <li>"Meeting scheduled for tomorrow #meeting #planning"</li>
-        </ul>
-        
-        <h4 style={{ marginTop: '20px' }}>objectChipRender Example:</h4>
-        <pre style={{ backgroundColor: '#2d3748', color: '#e2e8f0', padding: '12px', borderRadius: '6px', fontSize: '12px', overflow: 'auto' }}>
-{`<ShowMessageCard 
-  data={messages} 
-  objectChipRender={({ objectName, revision, objectTypeIcon, item }) => (
-    <div style={{ 
-      backgroundColor: '#007bff', 
-      color: 'white', 
-      padding: '6px 12px', 
-      borderRadius: '20px',
-      display: 'flex',
-      alignItems: 'center',
-      gap: '4px'
-    }}>
-      {objectTypeIcon && <span>{objectTypeIcon}</span>}
-      {objectName} v{revision}
-    </div>
-  )}
-/>`}
-        </pre>
-        
-        <h4 style={{ marginTop: '20px' }}>Data Structure with Icon:</h4>
-        <pre style={{ backgroundColor: '#2d3748', color: '#e2e8f0', padding: '12px', borderRadius: '6px', fontSize: '12px', overflow: 'auto' }}>
-{`const messageData = {
-  name: 'John Doe',
-  objectName: '26may_item001',
-  revision: 'A',
-  object_type_icon: '📄', // Document icon
-  relatedObject: 'test_jeet_july2334 (A)', // Related object
-  comment: 'Message content...'
-};`}
-        </pre>
-      </div>
-    </div>
-  );
-};
-
-export default Demo; 

package/dist/src/MentionInput.d.ts

@@ -1,38 +0,0 @@
-import React, { ReactNode } from "react";
-import "./MentionInput.css";
-interface User {
-    id: number;
-    name: string;
-}
-interface MentionInputProps {
-    users: User[];
-    placeholder?: string;
-    containerClassName?: string;
-    inputContainerClassName?: string;
-    inputClassName?: string;
-    sendBtnClassName?: string;
-    suggestionListClassName?: string;
-    suggestionItemClassName?: string;
-    attachedImageContainerClassName?: string;
-    attachedImageContainerStyle?: React.CSSProperties;
-    imgClassName?: string;
-    imgStyle?: React.CSSProperties;
-    sendButtonIcon?: ReactNode;
-    attachmentButtonIcon?: ReactNode;
-    onSendMessage?: (obj: {
-        messageText: string;
-        messageHTML: string;
-        userSelectListWithIds: {
-            id: number;
-            name: string;
-        }[];
-        userSelectListName: string[];
-        tags: string[];
-        images?: File[];
-        imageUrl?: string | null;
-    }) => void;
-    suggestionPosition?: 'top' | 'bottom' | 'left' | 'right';
-    onImageUpload?: (file: File) => Promise<string>;
-}
-declare const MentionInput: React.FC<MentionInputProps>;
-export default MentionInput;

package/dist/src/MentionInput.js

@@ -1,376 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import React, { useState, useRef } from "react";
-import ReactDOM from "react-dom";
-import "./MentionInput.css";
-var MentionInput = function (_a) {
-    var _b;
-    var users = _a.users, _c = _a.placeholder, placeholder = _c === void 0 ? "Type a message... (or drag & drop an image)" : _c, containerClassName = _a.containerClassName, inputContainerClassName = _a.inputContainerClassName, inputClassName = _a.inputClassName, sendBtnClassName = _a.sendBtnClassName, suggestionListClassName = _a.suggestionListClassName, suggestionItemClassName = _a.suggestionItemClassName, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle, attachedImageContainerClassName = _a.attachedImageContainerClassName, attachedImageContainerStyle = _a.attachedImageContainerStyle, sendButtonIcon = _a.sendButtonIcon, attachmentButtonIcon = _a.attachmentButtonIcon, onSendMessage = _a.onSendMessage, _d = _a.suggestionPosition, suggestionPosition = _d === void 0 ? 'bottom' : _d, onImageUpload = _a.onImageUpload;
-    var _e = useState(""), inputValue = _e[0], setInputValue = _e[1]; // Plain text
-    var _f = useState([]), suggestions = _f[0], setSuggestions = _f[1];
-    var _g = useState(false), showSuggestions = _g[0], setShowSuggestions = _g[1];
-    var _h = useState(null), selectedImage = _h[0], setSelectedImage = _h[1];
-    var _j = useState(null), imageUrl = _j[0], setImageUrl = _j[1];
-    var _k = useState(false), isUploading = _k[0], setIsUploading = _k[1];
-    var _l = useState(false), isDraggingOver = _l[0], setIsDraggingOver = _l[1];
-    var inputRef = useRef(null);
-    var suggestionListRef = useRef(null);
-    var caretOffsetRef = useRef(0);
-    var userSelectListRef = useRef([]); // Only unique names
-    var userSelectListWithIdsRef = useRef([]); // Unique IDs with names
-    var tagsListRef = useRef([]); // Store hashtags
-    var fileInputRef = useRef(null);
-    var highlightMentionsAndLinks = function (text) {
-        // Regular expression for detecting links
-        var linkRegex = /(https?:\/\/[^\s]+)/g;
-        // Regular expression for detecting hashtags
-        var hashtagRegex = /#[\w]+/g;
-        // Highlight links
-        var highlightedText = text.replace(linkRegex, '<a href="$1" target="_blank" rel="noopener noreferrer" class="link-highlight">$1</a>');
-        // Highlight hashtags
-        highlightedText = highlightedText.replace(hashtagRegex, function (match) {
-            return "<span class=\"hashtag-highlight\">".concat(match, "</span>");
-        });
-        // Highlight mentions manually based on `userSelectListRef`
-        userSelectListRef === null || userSelectListRef === void 0 ? void 0 : userSelectListRef.current.forEach(function (userName) {
-            var mentionPattern = new RegExp("@".concat(userName, "(\\s|$)"), "g");
-            highlightedText = highlightedText.replace(mentionPattern, function (match) {
-                return "<span class=\"mention-highlight\">".concat(match.trim(), "</span>&nbsp;");
-            });
-        });
-        return highlightedText;
-    };
-    var restoreCaretPosition = function (node, caretOffset) {
-        var range = document.createRange();
-        var sel = window.getSelection();
-        var charCount = 0;
-        var findCaret = function (currentNode) {
-            var _a;
-            for (var _i = 0, _b = Array.from(currentNode.childNodes); _i < _b.length; _i++) {
-                var child = _b[_i];
-                if (child.nodeType === Node.TEXT_NODE) {
-                    var textLength = ((_a = child.textContent) === null || _a === void 0 ? void 0 : _a.length) || 0;
-                    if (charCount + textLength >= caretOffset) {
-                        range.setStart(child, caretOffset - charCount);
-                        range.collapse(true);
-                        return true;
-                    }
-                    else {
-                        charCount += textLength;
-                    }
-                }
-                else if (child.nodeType === Node.ELEMENT_NODE) {
-                    if (findCaret(child))
-                        return true;
-                }
-            }
-            return false;
-        };
-        findCaret(node);
-        if (sel) {
-            sel.removeAllRanges();
-            sel.addRange(range);
-        }
-    };
-    var handleInputChange = function () {
-        if (!inputRef.current)
-            return;
-        // Store current selection before modifications
-        var selection = window.getSelection();
-        var range = selection === null || selection === void 0 ? void 0 : selection.getRangeAt(0);
-        var newCaretOffset = 0;
-        if (range && inputRef.current.contains(range.startContainer)) {
-            var preCaretRange = range.cloneRange();
-            preCaretRange.selectNodeContents(inputRef.current);
-            preCaretRange.setEnd(range.startContainer, range.startOffset);
-            newCaretOffset = preCaretRange.toString().length;
-        }
-        caretOffsetRef.current = newCaretOffset;
-        var plainText = inputRef.current.innerText;
-        setInputValue(plainText);
-        // Process for mention suggestions
-        var mentionMatch = plainText.slice(0, newCaretOffset).match(/@(\S*)$/);
-        if (mentionMatch) {
-            var query_1 = mentionMatch[1].toLowerCase();
-            var filteredUsers = query_1 === "" ? users : users.filter(function (user) {
-                return user.name.toLowerCase().includes(query_1);
-            });
-            setSuggestions(filteredUsers);
-            setShowSuggestions(filteredUsers.length > 0);
-        }
-        else {
-            setShowSuggestions(false);
-        }
-        // Extract and store hashtags
-        var hashtagMatches = plainText.match(/#[\w]+/g);
-        if (hashtagMatches) {
-            var uniqueTags = Array.from(new Set(hashtagMatches));
-            tagsListRef.current = uniqueTags;
-        }
-        else {
-            tagsListRef.current = [];
-        }
-        // Only apply highlighting if we have mentions, hashtags, or links to highlight
-        if (userSelectListRef.current.length > 0 || plainText.match(/(https?:\/\/[^\s]+)/g) || plainText.match(/#[\w]+/g)) {
-            var currentHTML = inputRef.current.innerHTML;
-            var htmlWithHighlights = highlightMentionsAndLinks(plainText);
-            // Only update if the highlighted HTML is different to avoid cursor jumping
-            if (currentHTML !== htmlWithHighlights) {
-                inputRef.current.innerHTML = htmlWithHighlights;
-                // Restore cursor position after changing innerHTML
-                restoreCaretPosition(inputRef.current, newCaretOffset);
-            }
-        }
-    };
-    var renderSuggestions = function () {
-        if (!showSuggestions || !inputRef.current)
-            return null;
-        var getInitials = function (name) {
-            var nameParts = name.split(" ");
-            var initials = nameParts
-                .map(function (part) { var _a; return ((_a = part[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || ""; })
-                .slice(0, 2)
-                .join("");
-            return initials;
-        };
-        var inputRect = inputRef.current.getBoundingClientRect();
-        var styles = {
-            position: 'absolute',
-            zIndex: 1000,
-        };
-        // Use suggestionPosition prop to adjust tooltip position
-        switch (suggestionPosition) {
-            case 'top':
-                styles.left = "".concat(inputRect.left, "px");
-                styles.top = "".concat(inputRect.top - 150, "px");
-                break;
-            case 'bottom':
-                styles.left = "".concat(inputRect.left, "px");
-                styles.top = "".concat(inputRect.bottom, "px");
-                break;
-            case 'left':
-                styles.left = "".concat(inputRect.left - 150, "px");
-                styles.top = "".concat(inputRect.top, "px");
-                break;
-            case 'right':
-                styles.left = "".concat(inputRect.right, "px");
-                styles.top = "".concat(inputRect.top, "px");
-                break;
-            default:
-                break;
-        }
-        return ReactDOM.createPortal(React.createElement("div", { className: "suggestion-container ".concat(suggestionListClassName || ''), style: styles },
-            React.createElement("ul", { className: "suggestion-list", ref: suggestionListRef }, suggestions.map(function (user) { return (React.createElement("li", { key: user.id, onClick: function () { return handleSuggestionClick(user); }, className: "suggestion-item ".concat(suggestionItemClassName || ''), role: "option", tabIndex: 0, "aria-selected": "false" },
-                React.createElement("div", { className: "user-icon" }, getInitials(user === null || user === void 0 ? void 0 : user.name)),
-                React.createElement("span", { className: "user-name" }, user.name))); }))), window.document.body);
-    };
-    var handleSuggestionClick = function (user) {
-        if (!inputRef.current)
-            return;
-        var plainText = inputValue;
-        var caretOffset = caretOffsetRef.current;
-        var mentionMatch = plainText.slice(0, caretOffset).match(/@(\S*)$/);
-        if (!userSelectListRef.current.includes(user.name)) {
-            userSelectListRef.current.push(user.name);
-        }
-        // Check if the ID is already stored
-        var isIdExists = userSelectListWithIdsRef.current.some(function (item) { return item.id === user.id; });
-        if (!isIdExists) {
-            userSelectListWithIdsRef.current.push(user);
-        }
-        if (!mentionMatch)
-            return;
-        var mentionIndex = plainText.slice(0, caretOffset).lastIndexOf("@");
-        // Append space after the mention
-        var newValue = plainText.substring(0, mentionIndex + 1) + user.name + " " + plainText.substring(caretOffset);
-        setInputValue(newValue);
-        inputRef.current.innerText = newValue;
-        // Highlight mentions and links with &nbsp;
-        var htmlWithHighlights = highlightMentionsAndLinks(newValue);
-        // Set highlighted content
-        inputRef.current.innerHTML = htmlWithHighlights;
-        setShowSuggestions(false);
-        // Adjust caret position after adding the mention and space
-        var mentionEnd = mentionIndex + user.name.length + 1;
-        restoreCaretPosition(inputRef.current, mentionEnd + 1); // +1 for the space
-    };
-    var handleImageSelect = function (event) { return __awaiter(void 0, void 0, void 0, function () {
-        var files, file;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    files = Array.from(event.target.files || []);
-                    if (!(files.length > 0)) return [3 /*break*/, 2];
-                    file = files[0];
-                    if (!file.type.startsWith('image/')) return [3 /*break*/, 2];
-                    return [4 /*yield*/, uploadImage(file)];
-                case 1:
-                    _a.sent();
-                    _a.label = 2;
-                case 2: return [2 /*return*/];
-            }
-        });
-    }); };
-    var handleDragOver = function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        // Only set dragging if files are being dragged
-        if (e.dataTransfer.types.includes('Files')) {
-            setIsDraggingOver(true);
-        }
-    };
-    var handleDragLeave = function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        // Check if we're leaving the container, not just moving between children
-        var rect = e.currentTarget.getBoundingClientRect();
-        var x = e.clientX;
-        var y = e.clientY;
-        if (x <= rect.left ||
-            x >= rect.right ||
-            y <= rect.top ||
-            y >= rect.bottom) {
-            setIsDraggingOver(false);
-        }
-    };
-    var handleDrop = function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        var files, imageFiles;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    e.preventDefault();
-                    e.stopPropagation();
-                    setIsDraggingOver(false);
-                    files = Array.from(e.dataTransfer.files);
-                    if (!(files.length > 0)) return [3 /*break*/, 2];
-                    imageFiles = files.filter(function (file) { return file.type.startsWith('image/'); });
-                    if (!(imageFiles.length > 0)) return [3 /*break*/, 2];
-                    return [4 /*yield*/, uploadImage(imageFiles[0])];
-                case 1:
-                    _a.sent();
-                    _a.label = 2;
-                case 2: return [2 /*return*/];
-            }
-        });
-    }); };
-    var uploadImage = function (file) { return __awaiter(void 0, void 0, void 0, function () {
-        var url, error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!onImageUpload) {
-                        // If no upload function provided, store the file directly
-                        setSelectedImage(file);
-                        setImageUrl(URL.createObjectURL(file));
-                        return [2 /*return*/];
-                    }
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, 4, 5]);
-                    setIsUploading(true);
-                    return [4 /*yield*/, onImageUpload(file)];
-                case 2:
-                    url = _a.sent();
-                    setSelectedImage(file);
-                    setImageUrl(url);
-                    return [3 /*break*/, 5];
-                case 3:
-                    error_1 = _a.sent();
-                    console.error('Error uploading image:', error_1);
-                    return [3 /*break*/, 5];
-                case 4:
-                    setIsUploading(false);
-                    return [7 /*endfinally*/];
-                case 5: return [2 /*return*/];
-            }
-        });
-    }); };
-    var removeImage = function () {
-        setSelectedImage(null);
-        setImageUrl(null);
-    };
-    var handleSendMessage = function () {
-        if (inputRef.current) {
-            var messageText = inputRef.current.innerText.trim();
-            var messageHTML = inputRef.current.innerHTML.trim();
-            if ((messageText || selectedImage) && onSendMessage) {
-                onSendMessage({
-                    messageText: messageText,
-                    messageHTML: messageHTML,
-                    userSelectListWithIds: userSelectListWithIdsRef.current,
-                    userSelectListName: userSelectListRef.current,
-                    tags: tagsListRef.current,
-                    images: selectedImage ? [selectedImage] : [],
-                    imageUrl: imageUrl
-                });
-                setInputValue("");
-                setShowSuggestions(false);
-                inputRef.current.innerText = "";
-                setSelectedImage(null);
-                setImageUrl(null);
-                userSelectListRef.current = [];
-                userSelectListWithIdsRef.current = [];
-                tagsListRef.current = [];
-            }
-        }
-    };
-    var handleKeyDown = function (event) {
-        if (event.key === "Enter" && !event.shiftKey) {
-            event.preventDefault(); // Prevent newline in content-editable
-            handleSendMessage(); // Trigger the same function as the Send button
-        }
-    };
-    return (React.createElement("div", { className: "mention-container ".concat(containerClassName || "") },
-        imageUrl && selectedImage && (React.createElement("div", { className: "image-preview-card ".concat(attachedImageContainerClassName || ""), style: attachedImageContainerStyle },
-            React.createElement("img", { src: imageUrl, alt: "Preview", className: imgClassName || "", style: imgStyle }),
-            React.createElement("button", { onClick: removeImage, className: "remove-image-btn", "aria-label": "Remove image" }, "\u00D7"))),
-        React.createElement("div", { className: "mention-input-container ".concat(inputContainerClassName || "", " ").concat(isDraggingOver ? 'dragging-over' : ''), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDragEnd: function () { return setIsDraggingOver(false); }, onDrop: handleDrop },
-            isDraggingOver && (React.createElement("div", { className: "drag-overlay" },
-                React.createElement("div", { className: "drag-message" },
-                    React.createElement("span", null, "Drop to upload")))),
-            React.createElement("button", { onClick: function () { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, className: "attachment-button", type: "button", "aria-label": "Attach image" },
-                React.createElement("span", { className: "attachment-icon" }, attachmentButtonIcon || "📷")),
-            React.createElement("div", { className: "mention-input-wrapper" },
-                (!inputValue || !inputRef.current || ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.innerText.trim()) === "") && (React.createElement("span", { className: "placeholder" }, placeholder)),
-                React.createElement("div", { ref: inputRef, contentEditable: true, suppressContentEditableWarning: true, className: "mention-input ".concat(inputClassName || ""), onInput: handleInputChange, onKeyDown: handleKeyDown, onFocus: function () { return document.execCommand('styleWithCSS', false, 'false'); } })),
-            React.createElement("button", { onClick: handleSendMessage, className: "send-button ".concat(sendBtnClassName || ""), "aria-label": "Send message" }, sendButtonIcon || "➤"),
-            React.createElement("input", { type: "file", ref: fileInputRef, accept: "image/*", onChange: handleImageSelect, style: { display: 'none' } }),
-            isUploading && (React.createElement("div", { className: "upload-loading" },
-                React.createElement("span", null, "Uploading...")))),
-        renderSuggestions()));
-};
-export default MentionInput;

package/dist/src/ShowMessageCard.d.ts

@@ -1,41 +0,0 @@
-import React, { CSSProperties, ReactNode } from "react";
-import "./ShowMessageCard.css";
-interface MessageCardProps {
-    [key: string]: any;
-}
-interface ShowMessageCardProps {
-    data: MessageCardProps[];
-    nameKey?: string;
-    dateKey?: string;
-    commentKey?: string;
-    imgSrcKey?: string;
-    imageUrlKey?: string;
-    objectNameKey?: string;
-    containerClassName?: string;
-    containerStyle?: CSSProperties;
-    cardClassName?: string;
-    cardStyle?: CSSProperties;
-    headerClassName?: string;
-    headerStyle?: CSSProperties;
-    imgClassName?: string;
-    imgStyle?: CSSProperties;
-    infoClassName?: string;
-    infoStyle?: CSSProperties;
-    nameClassName?: string;
-    nameStyle?: CSSProperties;
-    dateClassName?: string;
-    dateStyle?: CSSProperties;
-    bodyClassName?: string;
-    bodyStyle?: CSSProperties;
-    commentClassName?: string;
-    commentStyle?: CSSProperties;
-    attachedImageClassName?: string;
-    attachedImageStyle?: CSSProperties;
-    attachedImageContainerClassName?: string;
-    attachedImageContainerStyle?: CSSProperties;
-    objectNameClassName?: string;
-    objectNameStyle?: CSSProperties;
-    renderItem?: (element: MessageCardProps) => ReactNode;
-}
-export declare const ShowMessageCard: React.FC<ShowMessageCardProps>;
-export {};

package/dist/src/ShowMessageCard.js

@@ -1,72 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import React, { useState } from "react";
-import "./ShowMessageCard.css";
-export var ShowMessageCard = function (_a) {
-    var data = _a.data, _b = _a.nameKey, nameKey = _b === void 0 ? "name" : _b, _c = _a.dateKey, dateKey = _c === void 0 ? "date" : _c, _d = _a.commentKey, commentKey = _d === void 0 ? "comment" : _d, _e = _a.imgSrcKey, imgSrcKey = _e === void 0 ? "imgSrc" : _e, _f = _a.imageUrlKey, imageUrlKey = _f === void 0 ? "imageUrl" : _f, // Default key for attached image
-    _g = _a.objectNameKey, // Default key for attached image
-    objectNameKey = _g === void 0 ? "objectName" : _g, // Default key for object identifier
-    containerClassName = _a.containerClassName, containerStyle = _a.containerStyle, cardClassName = _a.cardClassName, cardStyle = _a.cardStyle, headerClassName = _a.headerClassName, headerStyle = _a.headerStyle, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle, infoClassName = _a.infoClassName, infoStyle = _a.infoStyle, nameClassName = _a.nameClassName, nameStyle = _a.nameStyle, dateClassName = _a.dateClassName, dateStyle = _a.dateStyle, bodyClassName = _a.bodyClassName, bodyStyle = _a.bodyStyle, commentClassName = _a.commentClassName, commentStyle = _a.commentStyle, attachedImageClassName = _a.attachedImageClassName, attachedImageStyle = _a.attachedImageStyle, attachedImageContainerClassName = _a.attachedImageContainerClassName, attachedImageContainerStyle = _a.attachedImageContainerStyle, objectNameClassName = _a.objectNameClassName, objectNameStyle = _a.objectNameStyle, renderItem = _a.renderItem;
-    console.log(data, "data==");
-    // State to manage initials for images that fail to load
-    var _h = useState({}), initialsState = _h[0], setInitialsState = _h[1];
-    // Handle image load failure
-    var handleImageError = function (id) {
-        setInitialsState(function (prevState) {
-            var _a;
-            return (__assign(__assign({}, prevState), (_a = {}, _a[id] = true, _a)));
-        });
-    };
-    // Helper function to generate initials from the name
-    var getInitials = function (name) {
-        var nameParts = name.split(" ");
-        var initials = nameParts
-            .map(function (part) { var _a; return ((_a = part[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || ""; }) // Take the first letter of each part
-            .slice(0, 2) // Limit to 2 letters
-            .join("");
-        return initials;
-    };
-    // Helper function to extract hashtags and mentions from text
-    var extractTagsAndMentions = function (text) {
-        var plainText = text.replace(/<[^>]*>/g, ''); // Remove HTML tags to get plain text
-        var hashtags = plainText.match(/#[\w]+/g) || [];
-        var mentions = plainText.match(/@[\w\s-]+/g) || [];
-        return {
-            hashtags: Array.from(new Set(hashtags)), // Remove duplicates
-            mentions: Array.from(new Set(mentions.map(function (mention) { return mention.trim(); }))) // Remove duplicates and trim
-        };
-    };
-    return (React.createElement("div", { className: "message-card-container ".concat(containerClassName || ""), style: containerStyle }, data.map(function (item, index) {
-        if (renderItem !== undefined) {
-            // Use custom render function if provided
-            return (React.createElement(React.Fragment, { key: item.id || index }, renderItem(item)));
-        }
-        var showInitials = initialsState[item.id || index] || !item[imgSrcKey]; // Decide whether to show initials
-        // Extract tags and mentions from the comment
-        var _a = extractTagsAndMentions(item[commentKey] || ''), hashtags = _a.hashtags, mentions = _a.mentions;
-        return (React.createElement("div", { key: item.id || index, className: "message-card ".concat(cardClassName || ""), style: cardStyle },
-            React.createElement("div", { className: "message-card-header ".concat(headerClassName || ""), style: headerStyle },
-                React.createElement("div", { className: "message-card-header-left" },
-                    showInitials ? (React.createElement("div", { className: "message-card-initials ".concat(imgClassName || ""), style: imgStyle }, getInitials(item[nameKey]))) : (React.createElement("img", { src: item[imgSrcKey], alt: item[nameKey], className: "message-card-img ".concat(imgClassName || ""), style: imgStyle, onError: function () { return handleImageError(item.id || index); } })),
-                    React.createElement("div", { className: "message-card-info ".concat(infoClassName || ""), style: infoStyle },
-                        React.createElement("h3", { className: "message-card-name ".concat(nameClassName || ""), style: nameStyle }, item[nameKey]),
-                        React.createElement("p", { className: "message-card-date ".concat(dateClassName || ""), style: dateStyle }, item[dateKey]))),
-                item[objectNameKey] && (React.createElement("div", { className: "message-card-item-name ".concat(objectNameClassName || ""), style: objectNameStyle }, item[objectNameKey]))),
-            React.createElement("div", { className: "message-card-body ".concat(bodyClassName || ""), style: bodyStyle },
-                React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ""), style: commentStyle, dangerouslySetInnerHTML: { __html: item[commentKey] } }),
-                (item === null || item === void 0 ? void 0 : item[imageUrlKey]) && (React.createElement("div", { className: "message-card-attached-image-container ".concat(attachedImageContainerClassName || ""), style: attachedImageContainerStyle },
-                    React.createElement("img", { src: item[imageUrlKey], alt: "Attached", className: "message-card-attached-image ".concat(attachedImageClassName || ""), style: attachedImageStyle }))),
-                (hashtags.length > 0 || mentions.length > 0) && (React.createElement("div", { className: "message-card-tags" },
-                    hashtags.map(function (tag, tagIndex) { return (React.createElement("span", { key: "hashtag-".concat(tagIndex), className: "tag-chip hashtag-chip" }, tag)); }),
-                    mentions.map(function (mention, mentionIndex) { return (React.createElement("span", { key: "mention-".concat(mentionIndex), className: "tag-chip mention-chip" }, mention)); }))))));
-    })));
-};

package/dist/src/index.d.ts

@@ -1,2 +0,0 @@
-export { default as MentionInput } from './MentionInput';
-export { ShowMessageCard } from './ShowMessageCard';

package/dist/src/index.js

@@ -1,2 +0,0 @@
-export { default as MentionInput } from './MentionInput';
-export { ShowMessageCard } from './ShowMessageCard';

package/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React Mention Input Demo</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/main.tsx"></script>
-  </body>
-</html> 

package/main.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import Demo from './demo'
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <Demo />
-  </React.StrictMode>,
-) 

package/tsconfig.json

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES5",
-    "sourceMap": false,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "jsx": "react",
-    "lib": ["dom", "es6"],
-    "declaration": true,
-    "outDir": "./dist",
-    "strict": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "skipLibCheck": true
-  },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist",
-    "demo.tsx",
-    "main.tsx",
-    "vite.config.ts",
-    "**/*.test.*",
-    "**/*.spec.*"
-  ]
-}

package/vite.config.ts

@@ -1,10 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    port: 3000,
-    open: true
-  }
-})