react-mention-input 1.1.25 → 1.1.27

package/dist/MentionInput.d.ts

@@ -32,6 +32,8 @@ interface MentionInputProps {
     }) => void;
     suggestionPosition?: 'top' | 'bottom' | 'left' | 'right';
     onImageUpload?: (file: File) => Promise<string>;
+    getAuthHeaders?: () => Record<string, string> | Promise<Record<string, string>>;
+    isProtectedUrl?: boolean | ((url: string) => boolean);
 }
 declare const MentionInput: React.FC<MentionInputProps>;
 export default MentionInput;

package/dist/MentionInput.js

@@ -46,9 +46,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import React, { useState, useRef, useEffect } from "react";
 import ReactDOM from "react-dom";
 import "./MentionInput.css";
+import { useProtectedImage } from "./useProtectedImage";
 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 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 ? 'top' : _d, onImageUpload = _a.onImageUpload, getAuthHeaders = _a.getAuthHeaders, isProtectedUrl = _a.isProtectedUrl;
     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];
@@ -56,6 +57,12 @@ var MentionInput = function (_a) {
     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];
+    // Use protected image hook to handle authenticated image URLs
+    var displayImageUrl = useProtectedImage({
+        url: imageUrl,
+        isProtected: isProtectedUrl,
+        getAuthHeaders: getAuthHeaders,
+    });
     var inputRef = useRef(null);
     var suggestionListRef = useRef(null);
     var caretOffsetRef = useRef(0);
@@ -229,6 +236,7 @@ var MentionInput = function (_a) {
         }
     };
     var renderSuggestions = function () {
+        var _a, _b, _c, _d, _e, _f;
         if (!showSuggestions || !inputRef.current)
             return null;
         var getInitials = function (name) {
@@ -240,27 +248,32 @@ var MentionInput = function (_a) {
             return initials;
         };
         var inputRect = inputRef.current.getBoundingClientRect();
+        var scrollLeft = (_c = (_b = (_a = window.scrollX) !== null && _a !== void 0 ? _a : window.pageXOffset) !== null && _b !== void 0 ? _b : document.documentElement.scrollLeft) !== null && _c !== void 0 ? _c : 0;
+        var scrollTop = (_f = (_e = (_d = window.scrollY) !== null && _d !== void 0 ? _d : window.pageYOffset) !== null && _e !== void 0 ? _e : document.documentElement.scrollTop) !== null && _f !== void 0 ? _f : 0;
         var styles = {
             position: 'absolute',
             zIndex: 1000,
+            minWidth: inputRect.width,
         };
         // Use suggestionPosition prop to adjust tooltip position
         switch (suggestionPosition) {
             case 'top':
-                styles.left = "".concat(inputRect.left, "px");
-                styles.top = "".concat(inputRect.top - 150, "px");
+                styles.left = "".concat(inputRect.left + scrollLeft, "px");
+                styles.top = "".concat(inputRect.top + scrollTop - 8, "px");
+                styles.transform = 'translateY(-100%)';
                 break;
             case 'bottom':
-                styles.left = "".concat(inputRect.left, "px");
-                styles.top = "".concat(inputRect.bottom, "px");
+                styles.left = "".concat(inputRect.left + scrollLeft, "px");
+                styles.top = "".concat(inputRect.bottom + scrollTop + 8, "px");
                 break;
             case 'left':
-                styles.left = "".concat(inputRect.left - 150, "px");
-                styles.top = "".concat(inputRect.top, "px");
+                styles.left = "".concat(inputRect.left + scrollLeft - 8, "px");
+                styles.top = "".concat(inputRect.top + scrollTop, "px");
+                styles.transform = "".concat(styles.transform ? "".concat(styles.transform, " ") : '', "translateX(-100%)");
                 break;
             case 'right':
-                styles.left = "".concat(inputRect.right, "px");
-                styles.top = "".concat(inputRect.top, "px");
+                styles.left = "".concat(inputRect.right + scrollLeft + 8, "px");
+                styles.top = "".concat(inputRect.top + scrollTop, "px");
                 break;
             default:
                 break;
@@ -438,8 +451,8 @@ var MentionInput = function (_a) {
         }
     };
     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 }),
+        displayImageUrl && selectedImage && (React.createElement("div", { className: "image-preview-card ".concat(attachedImageContainerClassName || ""), style: attachedImageContainerStyle },
+            React.createElement("img", { src: displayImageUrl, 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" },

package/dist/ShowMessageCard.d.ts

@@ -46,6 +46,8 @@ interface ShowMessageCardProps {
         item: MessageCardProps;
     }) => ReactNode;
     renderItem?: (element: MessageCardProps) => ReactNode;
+    getAuthHeaders?: () => Record<string, string> | Promise<Record<string, string>>;
+    isProtectedUrl?: boolean | ((url: string) => boolean);
 }
 export declare const ShowMessageCard: React.FC<ShowMessageCardProps>;
 export {};

package/dist/ShowMessageCard.js

@@ -20,6 +20,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import React, { useState } from "react";
 import "./ShowMessageCard.css";
+import { useProtectedImage } from "./useProtectedImage";
 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
@@ -29,7 +30,8 @@ export var ShowMessageCard = function (_a) {
     _j = _a.objectTypeIconKey, // Default key for revision
     objectTypeIconKey = _j === void 0 ? "object_type_icon" : _j, // Default key for object type icon
     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, revisionClassName = _a.revisionClassName, revisionStyle = _a.revisionStyle, objectChipRender = _a.objectChipRender, // Custom render function for object chip
-    renderItem = _a.renderItem;
+    renderItem = _a.renderItem, // Custom render function
+    getAuthHeaders = _a.getAuthHeaders, isProtectedUrl = _a.isProtectedUrl;
     // State to manage initials for images that fail to load
     var _k = useState({}), initialsState = _k[0], setInitialsState = _k[1];
     // Handle image load failure
@@ -48,6 +50,23 @@ export var ShowMessageCard = function (_a) {
             .join("");
         return initials;
     };
+    // Component to render protected images
+    var ProtectedImage = 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,
+            isProtected: isProtectedUrl,
+            getAuthHeaders: getAuthHeaders,
+        });
+        if (!displayUrl) {
+            return null;
+        }
+        var imgElement = (React.createElement("img", { src: displayUrl, alt: alt, className: className, style: style, onError: onError }));
+        if (renderInContainer && containerClassName) {
+            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
@@ -82,15 +101,14 @@ export var ShowMessageCard = function (_a) {
         return (React.createElement("div", { key: item.id || index, className: "message-card-wrapper" },
             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); } })),
+                    showInitials ? (React.createElement("div", { className: "message-card-initials ".concat(imgClassName || ""), style: imgStyle }, getInitials(item[nameKey]))) : (React.createElement(ProtectedImage, { url: item[imgSrcKey], alt: item[nameKey], className: "message-card-img ".concat(imgClassName || ""), style: imgStyle, onError: function () { return handleImageError(item.id || index); }, renderInContainer: false })),
                     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])))),
             React.createElement("div", { className: "message-card ".concat(cardClassName || ""), style: cardStyle },
                 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 }))),
+                    (item === null || item === void 0 ? void 0 : item[imageUrlKey]) && (React.createElement(ProtectedImage, { url: item[imageUrlKey], alt: "Attached", className: "message-card-attached-image ".concat(attachedImageClassName || ""), style: attachedImageStyle, containerClassName: "message-card-attached-image-container ".concat(attachedImageContainerClassName || ""), containerStyle: attachedImageContainerStyle })),
                     item[objectNameKey] && (React.createElement("div", { className: "message-card-related" },
                         React.createElement("span", { className: "related-label" }, "Related: "),
                         (item[objectNameKey] || item[revisionKey] || item[objectTypeIconKey]) && (React.createElement(React.Fragment, null, objectChipRender ? (objectChipRender({

package/dist/useProtectedImage.d.ts

@@ -0,0 +1,12 @@
+interface UseProtectedImageOptions {
+    url: string | null;
+    isProtected?: boolean | ((url: string) => boolean);
+    getAuthHeaders?: () => Record<string, string> | Promise<Record<string, 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.
+ */
+export declare const useProtectedImage: ({ url, isProtected, getAuthHeaders, }: UseProtectedImageOptions) => string | null;
+export {};

package/dist/useProtectedImage.js

@@ -0,0 +1,129 @@
+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);
+};
+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 { useState, useEffect, useRef } from 'react';
+/**
+ * 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.
+ */
+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);
+    useEffect(function () {
+        // Cleanup previous blob URL
+        if (blobUrlRef.current) {
+            URL.revokeObjectURL(blobUrlRef.current);
+            blobUrlRef.current = null;
+        }
+        setBlobUrl(null);
+        if (!url) {
+            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) {
+            return;
+        }
+        // Fetch protected image with auth headers
+        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())];
+                    case 1:
+                        headers = _a.sent();
+                        return [4 /*yield*/, fetch(url, {
+                                method: 'GET',
+                                headers: __assign({}, headers),
+                            })];
+                    case 2:
+                        response = _a.sent();
+                        if (!response.ok) {
+                            throw new Error("Failed to fetch protected image: ".concat(response.statusText));
+                        }
+                        return [4 /*yield*/, response.blob()];
+                    case 3:
+                        blob = _a.sent();
+                        newBlobUrl = URL.createObjectURL(blob);
+                        blobUrlRef.current = newBlobUrl;
+                        setBlobUrl(newBlobUrl);
+                        return [3 /*break*/, 5];
+                    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*/];
+                }
+            });
+        }); };
+        fetchProtectedImage();
+        // Cleanup function
+        return function () {
+            if (blobUrlRef.current) {
+                URL.revokeObjectURL(blobUrlRef.current);
+                blobUrlRef.current = null;
+            }
+        };
+    }, [url, isProtected, getAuthHeaders]);
+    // 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);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mention-input",
-  "version": "1.1.25",
+  "version": "1.1.27",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {

package/src/MentionInput.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef, ReactNode, useEffect } from "react";
 import ReactDOM from "react-dom";
 import "./MentionInput.css";
+import { useProtectedImage } from "./useProtectedImage";
 
 interface User {
   id: number;
@@ -32,6 +33,8 @@ interface MentionInputProps {
   }) => void;
   suggestionPosition?: 'top' | 'bottom' | 'left' | 'right'; // New prop for tooltip position
   onImageUpload?: (file: File) => Promise<string>; // New prop for image upload
+  getAuthHeaders?: () => Record<string, string> | Promise<Record<string, string>>; // Function to get auth headers for protected images
+  isProtectedUrl?: boolean | ((url: string) => boolean); // Boolean or function to determine if a URL is protected and requires auth
 }
 
 const MentionInput: React.FC<MentionInputProps> = ({
@@ -50,8 +53,10 @@ const MentionInput: React.FC<MentionInputProps> = ({
   sendButtonIcon,
   attachmentButtonIcon,
   onSendMessage,
-  suggestionPosition = 'bottom',
+  suggestionPosition = 'top',
   onImageUpload,
+  getAuthHeaders,
+  isProtectedUrl,
 }) => {
   const [inputValue, setInputValue] = useState<string>(""); // Plain text
   const [suggestions, setSuggestions] = useState<User[]>([]);
@@ -61,6 +66,13 @@ const MentionInput: React.FC<MentionInputProps> = ({
   const [isUploading, setIsUploading] = useState<boolean>(false);
   const [isDraggingOver, setIsDraggingOver] = useState<boolean>(false);
   
+  // Use protected image hook to handle authenticated image URLs
+  const displayImageUrl = useProtectedImage({
+    url: imageUrl,
+    isProtected: isProtectedUrl,
+    getAuthHeaders,
+  });
+  
 
 
   const inputRef = useRef<HTMLDivElement>(null);
@@ -302,28 +314,35 @@ const MentionInput: React.FC<MentionInputProps> = ({
     };
     
     const inputRect = inputRef.current.getBoundingClientRect();
+    const scrollLeft =
+      window.scrollX ?? window.pageXOffset ?? document.documentElement.scrollLeft ?? 0;
+    const scrollTop =
+      window.scrollY ?? window.pageYOffset ?? document.documentElement.scrollTop ?? 0;
     const styles: React.CSSProperties = {
       position: 'absolute',
       zIndex: 1000,
+      minWidth: inputRect.width,
     };
 
     // Use suggestionPosition prop to adjust tooltip position
     switch (suggestionPosition) {
       case 'top':
-        styles.left = `${inputRect.left}px`;
-        styles.top = `${inputRect.top - 150}px`;
+        styles.left = `${inputRect.left + scrollLeft}px`;
+        styles.top = `${inputRect.top + scrollTop - 8}px`;
+        styles.transform = 'translateY(-100%)';
         break;
       case 'bottom':
-        styles.left = `${inputRect.left}px`;
-        styles.top = `${inputRect.bottom}px`;
+        styles.left = `${inputRect.left + scrollLeft}px`;
+        styles.top = `${inputRect.bottom + scrollTop + 8}px`;
         break;
       case 'left':
-        styles.left = `${inputRect.left - 150}px`;
-        styles.top = `${inputRect.top}px`;
+        styles.left = `${inputRect.left + scrollLeft - 8}px`;
+        styles.top = `${inputRect.top + scrollTop}px`;
+        styles.transform = `${styles.transform ? `${styles.transform} ` : ''}translateX(-100%)`;
         break;
       case 'right':
-        styles.left = `${inputRect.right}px`;
-        styles.top = `${inputRect.top}px`;
+        styles.left = `${inputRect.right + scrollLeft + 8}px`;
+        styles.top = `${inputRect.top + scrollTop}px`;
         break;
       default:
         break;
@@ -525,10 +544,10 @@ const MentionInput: React.FC<MentionInputProps> = ({
 
   return (
     <div className={`mention-container ${containerClassName || ""}`}>
-      {imageUrl && selectedImage && (
+      {displayImageUrl && selectedImage && (
         <div className={`image-preview-card ${attachedImageContainerClassName || ""}`} style={attachedImageContainerStyle}>
           <img 
-            src={imageUrl} 
+            src={displayImageUrl} 
             alt="Preview" 
             className={imgClassName || ""}
             style={imgStyle}

package/src/ShowMessageCard.tsx

@@ -1,5 +1,6 @@
 import React, { CSSProperties, useState, ReactNode } from "react";
 import "./ShowMessageCard.css";
+import { useProtectedImage } from "./useProtectedImage";
 
 interface MessageCardProps {
   [key: string]: any; // Support dynamic keys
@@ -43,6 +44,8 @@ interface ShowMessageCardProps {
   revisionStyle?: CSSProperties; // Style for the revision (top-right)
   objectChipRender?: (objectData: { objectName?: string; revision?: string; objectTypeIcon?: string; item: MessageCardProps }) => ReactNode; // Custom render function for object chip
   renderItem?: (element: MessageCardProps) => ReactNode; // Custom render function
+  getAuthHeaders?: () => Record<string, string> | Promise<Record<string, string>>; // Function to get auth headers for protected images
+  isProtectedUrl?: boolean | ((url: string) => boolean); // Boolean or function to determine if a URL is protected and requires auth
 }
 
 export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
@@ -83,6 +86,8 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
   revisionStyle,
   objectChipRender, // Custom render function for object chip
   renderItem, // Custom render function
+  getAuthHeaders,
+  isProtectedUrl,
 }) => {
   // State to manage initials for images that fail to load
   const [initialsState, setInitialsState] = useState<{ [key: string]: boolean }>(
@@ -107,6 +112,48 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
     return initials;
   };
 
+  // Component to render protected images
+  const ProtectedImage: React.FC<{ 
+    url: string; 
+    alt: string; 
+    className?: string; 
+    style?: CSSProperties;
+    containerClassName?: string;
+    containerStyle?: CSSProperties;
+    onError?: () => void;
+    renderInContainer?: boolean;
+  }> = ({ url, alt, className, style, containerClassName, containerStyle, onError, renderInContainer = true }) => {
+    const displayUrl = useProtectedImage({
+      url,
+      isProtected: isProtectedUrl,
+      getAuthHeaders,
+    });
+
+    if (!displayUrl) {
+      return null;
+    }
+
+    const imgElement = (
+      <img
+        src={displayUrl}
+        alt={alt}
+        className={className}
+        style={style}
+        onError={onError}
+      />
+    );
+
+    if (renderInContainer && containerClassName) {
+      return (
+        <div className={containerClassName} style={containerStyle}>
+          {imgElement}
+        </div>
+      );
+    }
+
+    return imgElement;
+  };
+
   // Helper function to extract hashtags and mentions from text
   const extractTagsAndMentions = (text: string) => {
     // First extract from HTML with spans
@@ -171,12 +218,13 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
                     {getInitials(item[nameKey])}
                   </div>
                 ) : (
-                  <img
-                    src={item[imgSrcKey]}
+                  <ProtectedImage
+                    url={item[imgSrcKey]}
                     alt={item[nameKey]}
                     className={`message-card-img ${imgClassName || ""}`}
                     style={imgStyle}
                     onError={() => handleImageError(item.id || index)}
+                    renderInContainer={false}
                   />
                 )}
                 <div
@@ -216,17 +264,14 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
                 
                 {/* Display attached image if available */}
                 {item?.[imageUrlKey] && (
-                  <div
-                    className={`message-card-attached-image-container ${attachedImageContainerClassName || ""}`}
-                    style={attachedImageContainerStyle}
-                  >
-                    <img
-                      src={item[imageUrlKey]}
-                      alt="Attached"
-                      className={`message-card-attached-image ${attachedImageClassName || ""}`}
-                      style={attachedImageStyle}
-                    />
-                  </div>
+                  <ProtectedImage
+                    url={item[imageUrlKey]}
+                    alt="Attached"
+                    className={`message-card-attached-image ${attachedImageClassName || ""}`}
+                    style={attachedImageStyle}
+                    containerClassName={`message-card-attached-image-container ${attachedImageContainerClassName || ""}`}
+                    containerStyle={attachedImageContainerStyle}
+                  />
                 )}
                 
                 {/* Display related object at bottom-left */}

package/src/useProtectedImage.ts

@@ -0,0 +1,91 @@
+import { useState, useEffect, useRef } from 'react';
+
+interface UseProtectedImageOptions {
+  url: string | null;
+  isProtected?: boolean | ((url: string) => boolean);
+  getAuthHeaders?: () => Record<string, string> | Promise<Record<string, 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.
+ */
+export const useProtectedImage = ({
+  url,
+  isProtected,
+  getAuthHeaders,
+}: UseProtectedImageOptions): string | null => {
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const blobUrlRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    // Cleanup previous blob URL
+    if (blobUrlRef.current) {
+      URL.revokeObjectURL(blobUrlRef.current);
+      blobUrlRef.current = null;
+    }
+    setBlobUrl(null);
+
+    if (!url) {
+      return;
+    }
+
+    // Check if URL is protected
+    const shouldUseAuth = typeof isProtected === 'boolean' 
+      ? isProtected 
+      : isProtected ? isProtected(url) : false;
+
+    // If not protected, don't fetch - will use original URL
+    if (!shouldUseAuth || !getAuthHeaders) {
+      return;
+    }
+
+    // Fetch protected image with auth headers
+    const fetchProtectedImage = async () => {
+      try {
+        const headers = await Promise.resolve(getAuthHeaders());
+        const response = await fetch(url, {
+          method: 'GET',
+          headers: {
+            ...headers,
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`Failed to fetch protected image: ${response.statusText}`);
+        }
+
+        const blob = await response.blob();
+        const newBlobUrl = URL.createObjectURL(blob);
+        blobUrlRef.current = newBlobUrl;
+        setBlobUrl(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);
+      }
+    };
+
+    fetchProtectedImage();
+
+    // Cleanup function
+    return () => {
+      if (blobUrlRef.current) {
+        URL.revokeObjectURL(blobUrlRef.current);
+        blobUrlRef.current = null;
+      }
+    };
+  }, [url, isProtected, getAuthHeaders]);
+
+  // 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);
+};
+