react-mention-input 1.1.15 → 1.1.16

package/demo.tsx

@@ -0,0 +1,98 @@
+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: '2 hours ago',
+      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>',
+      itemName: '26may_item001 (A)',
+    },
+    {
+      id: 2,
+      name: 'Mike Johnson',
+      date: '1 day ago',
+      comment: 'Revision A completed successfully. Ready for next phase. <span class="hashtag-highlight">#milestone</span>',
+      itemName: '26may_item001 (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,
+      itemName: 'new_item001 (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>
+        </ul>
+      </div>
+
+      <div style={{ marginBottom: '20px' }}>
+        <MentionInput
+          users={users}
+          placeholder="Type a message with @mentions and #hashtags..."
+          onSendMessage={handleSendMessage}
+          suggestionPosition="bottom"
+        />
+      </div>
+
+      <div>
+        <h3>Messages:</h3>
+        <ShowMessageCard data={messages} />
+      </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>
+      </div>
+    </div>
+  );
+};
+
+export default Demo; 

package/dist/MentionInput.css

@@ -193,6 +193,14 @@
   font-weight: 500;
 }
 
+.hashtag-highlight {
+  background-color: rgba(255, 165, 0, 0.1);
+  color: #FF8C00;
+  border-radius: 4px;
+  padding: 1px 4px;
+  font-weight: 500;
+}
+
 .link-highlight {
   color: #2684FF;
   text-decoration: none;

package/dist/ShowMessageCard.css

@@ -21,9 +21,25 @@
 .message-card-header {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   margin-bottom: 8px; /* Space between header and body */
 }
 
+.message-card-header-left {
+  display: flex;
+  align-items: center;
+}
+
+.message-card-item-name {
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+  background-color: #f5f5f5;
+  padding: 4px 8px;
+  border-radius: 6px;
+  border: 1px solid #e0e0e0;
+}
+
 .message-card-img,
 .message-card-initials {
   width: 48px;
@@ -72,4 +88,40 @@
   color: #007bff;
   padding: 2px 4px;
   border-radius: 4px;
+}
+
+.hashtag-highlight {
+  background-color: rgba(255, 165, 0, 0.15);
+  color: #FF8C00;
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+/* Tag chips styling */
+.message-card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.tag-chip {
+  padding: 6px 12px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 500;
+  border: none;
+  display: inline-block;
+  white-space: nowrap;
+}
+
+.hashtag-chip {
+  background-color: #D4A574;
+  color: #FFFFFF;
+}
+
+.mention-chip {
+  background-color: #2684FF;
+  color: #FFFFFF;
 }

package/dist/demo.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Demo: React.FC;
+export default Demo;

package/dist/demo.js

@@ -0,0 +1,80 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useState } from 'react';
+import { MentionInput, ShowMessageCard } from './src';
+var Demo = function () {
+    var _a = useState([
+        {
+            id: 1,
+            name: 'John Doe',
+            date: '2 hours ago',
+            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>',
+            itemName: '26may_item001 (A)',
+        },
+        {
+            id: 2,
+            name: 'Mike Johnson',
+            date: '1 day ago',
+            comment: 'Revision A completed successfully. Ready for next phase. <span class="hashtag-highlight">#milestone</span>',
+            itemName: '26may_item001 (A)',
+        }
+    ]), messages = _a[0], setMessages = _a[1];
+    // Sample users for mentions
+    var users = [
+        { id: 1, name: 'John Doe' },
+        { id: 2, name: 'Jane Smith' },
+        { id: 3, name: 'Mike Johnson' },
+        { id: 4, name: 'Sarah Wilson' },
+    ];
+    var handleSendMessage = function (messageData) {
+        console.log('Message Data:', messageData);
+        console.log('Extracted Tags:', messageData.tags);
+        // Create a new message for display
+        var newMessage = {
+            id: Date.now(),
+            name: 'You',
+            date: new Date().toLocaleTimeString(),
+            comment: messageData.messageHTML,
+            imageUrl: messageData.imageUrl,
+            tags: messageData.tags,
+            mentions: messageData.userSelectListName,
+            itemName: 'new_item001 (A)', // You can customize this or make it dynamic
+        };
+        setMessages(__spreadArray(__spreadArray([], messages, true), [newMessage], false));
+    };
+    return (React.createElement("div", { style: { maxWidth: '600px', margin: '20px auto', padding: '20px' } },
+        React.createElement("h1", null, "React Mention Input with Hashtag Support"),
+        React.createElement("div", { style: { marginBottom: '20px' } },
+            React.createElement("h3", null, "Features:"),
+            React.createElement("ul", null,
+                React.createElement("li", null,
+                    "Type ",
+                    React.createElement("strong", null, "@"),
+                    " to mention users (e.g., @John Doe)"),
+                React.createElement("li", null,
+                    "Type ",
+                    React.createElement("strong", null, "#"),
+                    " to create hashtags (e.g., #urgent #review #milestone)"),
+                React.createElement("li", null, "Links are automatically detected and highlighted"),
+                React.createElement("li", null, "Hashtags are extracted and returned in the tags array"))),
+        React.createElement("div", { style: { marginBottom: '20px' } },
+            React.createElement(MentionInput, { users: users, placeholder: "Type a message with @mentions and #hashtags...", onSendMessage: handleSendMessage, suggestionPosition: "bottom" })),
+        React.createElement("div", null,
+            React.createElement("h3", null, "Messages:"),
+            React.createElement(ShowMessageCard, { data: messages })),
+        React.createElement("div", { style: { marginTop: '20px', padding: '15px', backgroundColor: '#f5f5f5', borderRadius: '8px' } },
+            React.createElement("h4", null, "Example Usage:"),
+            React.createElement("p", null, "Try typing these examples:"),
+            React.createElement("ul", null,
+                React.createElement("li", null, "\"Project update complete. Ready for @John Doe review #milestone #completed\""),
+                React.createElement("li", null, "\"Need urgent help with deployment @Jane Smith @Mike Johnson #urgent #deployment #help\""),
+                React.createElement("li", null, "\"Meeting scheduled for tomorrow #meeting #planning\"")))));
+};
+export default Demo;

package/dist/main.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/main.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import Demo from './demo';
+ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(React.StrictMode, null,
+    React.createElement(Demo, null)));

package/dist/src/MentionInput.d.ts

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,376 @@
+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

@@ -0,0 +1,41 @@
+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;
+    itemNameKey?: 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;
+    itemNameClassName?: string;
+    itemNameStyle?: CSSProperties;
+    renderItem?: (element: MessageCardProps) => ReactNode;
+}
+export declare const ShowMessageCard: React.FC<ShowMessageCardProps>;
+export {};

package/dist/src/ShowMessageCard.js

@@ -0,0 +1,71 @@
+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.itemNameKey, // Default key for attached image
+    itemNameKey = _g === void 0 ? "name" : _g, // Default key for item 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, itemNameClassName = _a.itemNameClassName, itemNameStyle = _a.itemNameStyle, renderItem = _a.renderItem;
+    // 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[itemNameKey] && (React.createElement("div", { className: "message-card-item-name ".concat(itemNameClassName || ""), style: itemNameStyle }, item[itemNameKey]))),
+            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

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

package/dist/src/index.js

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

package/dist/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/dist/vite.config.js

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

package/index.html

@@ -0,0 +1,12 @@
+<!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

@@ -0,0 +1,9 @@
+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/package.json

@@ -1,12 +1,14 @@
 {
   "name": "react-mention-input",
-  "version": "1.1.15",
+  "version": "1.1.16",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc && npm run copy-css",
-    "copy-css": "copyfiles -u 1 src/**/*.css dist"
+    "copy-css": "copyfiles -u 1 src/**/*.css dist",
+    "dev": "vite",
+    "demo": "vite"
   },
   "keywords": [
     "mention",
@@ -27,13 +29,15 @@
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.6.0",
     "copyfiles": "^2.4.1",
     "csstype": "^3.1.3",
     "sass": "^1.81.0",
-    "typescript": "^5.6.3"
+    "typescript": "^5.6.3",
+    "vite": "^7.0.0"
   },
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }

package/src/MentionInput.css

@@ -193,6 +193,14 @@
   font-weight: 500;
 }
 
+.hashtag-highlight {
+  background-color: rgba(255, 165, 0, 0.1);
+  color: #FF8C00;
+  border-radius: 4px;
+  padding: 1px 4px;
+  font-weight: 500;
+}
+
 .link-highlight {
   color: #2684FF;
   text-decoration: none;

package/src/MentionInput.tsx

@@ -27,6 +27,7 @@ interface MentionInputProps {
     messageHTML: string;
     userSelectListWithIds: { id: number; name: string }[];
     userSelectListName: string[];
+    tags: string[];
     images?: File[];
     imageUrl?: string | null;
   }) => void;
@@ -68,17 +69,29 @@ const MentionInput: React.FC<MentionInputProps> = ({
   const caretOffsetRef = useRef<number>(0);
   const userSelectListRef = useRef<string[]>([]); // Only unique names
   const userSelectListWithIdsRef = useRef<{ id: number; name: string }[]>([]); // Unique IDs with names
+  const tagsListRef = useRef<string[]>([]); // Store hashtags
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const highlightMentionsAndLinks = (text: string): string => {
     // Regular expression for detecting links
     const linkRegex = /(https?:\/\/[^\s]+)/g;
+    
+    // Regular expression for detecting hashtags
+    const hashtagRegex = /#[\w]+/g;
   
     // Highlight links
     let highlightedText = text.replace(
       linkRegex,
       '<a href="$1" target="_blank" rel="noopener noreferrer" class="link-highlight">$1</a>'
     );
+    
+    // Highlight hashtags
+    highlightedText = highlightedText.replace(
+      hashtagRegex,
+      (match) => {
+        return `<span class="hashtag-highlight">${match}</span>`;
+      }
+    );
   
     // Highlight mentions manually based on `userSelectListRef`
     userSelectListRef?.current.forEach((userName) => {
@@ -160,8 +173,17 @@ const MentionInput: React.FC<MentionInputProps> = ({
       setShowSuggestions(false);
     }
     
-    // Only apply highlighting if we have mentions or links to highlight
-    if (userSelectListRef.current.length > 0 || plainText.match(/(https?:\/\/[^\s]+)/g)) {
+    // Extract and store hashtags
+    const hashtagMatches = plainText.match(/#[\w]+/g);
+    if (hashtagMatches) {
+      const 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)) {
       const currentHTML = inputRef.current.innerHTML;
       const htmlWithHighlights = highlightMentionsAndLinks(plainText);
       
@@ -373,6 +395,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
           messageHTML,
           userSelectListWithIds: userSelectListWithIdsRef.current,
           userSelectListName: userSelectListRef.current,
+          tags: tagsListRef.current,
           images: selectedImage ? [selectedImage] : [],
           imageUrl: imageUrl
         });
@@ -383,6 +406,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
         setImageUrl(null);
         userSelectListRef.current = [];
         userSelectListWithIdsRef.current = [];
+        tagsListRef.current = [];
       }
     }
   };
@@ -394,8 +418,6 @@ const MentionInput: React.FC<MentionInputProps> = ({
     }
   };
 
-  console.log(inputValue, inputRef.current?.innerText.trim(), "inputValue====")
-
   return (
     <div className={`mention-container ${containerClassName || ""}`}>
       {imageUrl && selectedImage && (

package/src/ShowMessageCard.css

@@ -21,9 +21,25 @@
 .message-card-header {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   margin-bottom: 8px; /* Space between header and body */
 }
 
+.message-card-header-left {
+  display: flex;
+  align-items: center;
+}
+
+.message-card-item-name {
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+  background-color: #f5f5f5;
+  padding: 4px 8px;
+  border-radius: 6px;
+  border: 1px solid #e0e0e0;
+}
+
 .message-card-img,
 .message-card-initials {
   width: 48px;
@@ -72,4 +88,40 @@
   color: #007bff;
   padding: 2px 4px;
   border-radius: 4px;
+}
+
+.hashtag-highlight {
+  background-color: rgba(255, 165, 0, 0.15);
+  color: #FF8C00;
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+/* Tag chips styling */
+.message-card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.tag-chip {
+  padding: 6px 12px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 500;
+  border: none;
+  display: inline-block;
+  white-space: nowrap;
+}
+
+.hashtag-chip {
+  background-color: #D4A574;
+  color: #FFFFFF;
+}
+
+.mention-chip {
+  background-color: #2684FF;
+  color: #FFFFFF;
 }

package/src/ShowMessageCard.tsx

@@ -12,6 +12,7 @@ interface ShowMessageCardProps {
   commentKey?: string; // Custom key for comment
   imgSrcKey?: string; // Custom key for image source
   imageUrlKey?: string; // Custom key for attached image URL
+  itemNameKey?: string; // Custom key for item identifier (top-right)
   containerClassName?: string; // Class for the outermost container
   containerStyle?: CSSProperties; // Style for the outermost container
   cardClassName?: string; // Class for the card
@@ -34,6 +35,8 @@ interface ShowMessageCardProps {
   attachedImageStyle?: CSSProperties; // Style for the attached image
   attachedImageContainerClassName?: string; // Class for the attached image container
   attachedImageContainerStyle?: CSSProperties; // Style for the attached image container
+  itemNameClassName?: string; // Class for the item name (top-right)
+  itemNameStyle?: CSSProperties; // Style for the item name (top-right)
   renderItem?: (element: MessageCardProps) => ReactNode; // Custom render function
 }
 
@@ -44,6 +47,7 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
   commentKey = "comment",
   imgSrcKey = "imgSrc",
   imageUrlKey = "imageUrl", // Default key for attached image
+  itemNameKey = "name", // Default key for item identifier
   containerClassName,
   containerStyle,
   cardClassName,
@@ -66,6 +70,8 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
   attachedImageStyle,
   attachedImageContainerClassName,
   attachedImageContainerStyle,
+  itemNameClassName,
+  itemNameStyle,
   renderItem, // Custom render function
 }) => {
   // State to manage initials for images that fail to load
@@ -91,6 +97,18 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
     return initials;
   };
 
+  // Helper function to extract hashtags and mentions from text
+  const extractTagsAndMentions = (text: string) => {
+    const plainText = text.replace(/<[^>]*>/g, ''); // Remove HTML tags to get plain text
+    const hashtags = plainText.match(/#[\w]+/g) || [];
+    const mentions = plainText.match(/@[\w\s-]+/g) || [];
+    
+    return {
+      hashtags: Array.from(new Set(hashtags)), // Remove duplicates
+      mentions: Array.from(new Set(mentions.map(mention => mention.trim()))) // Remove duplicates and trim
+    };
+  };
+
   return (
     <div
       className={`message-card-container ${containerClassName || ""}`}
@@ -107,6 +125,9 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
         }
 
         const showInitials = initialsState[item.id || index] || !item[imgSrcKey]; // Decide whether to show initials
+        
+        // Extract tags and mentions from the comment
+        const { hashtags, mentions } = extractTagsAndMentions(item[commentKey] || '');
 
         return (
           <div
@@ -118,39 +139,51 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
               className={`message-card-header ${headerClassName || ""}`}
               style={headerStyle}
             >
-              {showInitials ? (
+              <div className="message-card-header-left">
+                {showInitials ? (
+                  <div
+                    className={`message-card-initials ${imgClassName || ""}`}
+                    style={imgStyle}
+                  >
+                    {getInitials(item[nameKey])}
+                  </div>
+                ) : (
+                  <img
+                    src={item[imgSrcKey]}
+                    alt={item[nameKey]}
+                    className={`message-card-img ${imgClassName || ""}`}
+                    style={imgStyle}
+                    onError={() => handleImageError(item.id || index)} // Pass card id or index
+                  />
+                )}
                 <div
-                  className={`message-card-initials ${imgClassName || ""}`}
-                  style={imgStyle}
+                  className={`message-card-info ${infoClassName || ""}`}
+                  style={infoStyle}
                 >
-                  {getInitials(item[nameKey])}
+                  <h3
+                    className={`message-card-name ${nameClassName || ""}`}
+                    style={nameStyle}
+                  >
+                    {item[nameKey]}
+                  </h3>
+                  <p
+                    className={`message-card-date ${dateClassName || ""}`}
+                    style={dateStyle}
+                  >
+                    {item[dateKey]}
+                  </p>
                 </div>
-              ) : (
-                <img
-                  src={item[imgSrcKey]}
-                  alt={item[nameKey]}
-                  className={`message-card-img ${imgClassName || ""}`}
-                  style={imgStyle}
-                  onError={() => handleImageError(item.id || index)} // Pass card id or index
-                />
-              )}
-              <div
-                className={`message-card-info ${infoClassName || ""}`}
-                style={infoStyle}
-              >
-                <h3
-                  className={`message-card-name ${nameClassName || ""}`}
-                  style={nameStyle}
-                >
-                  {item[nameKey]}
-                </h3>
-                <p
-                  className={`message-card-date ${dateClassName || ""}`}
-                  style={dateStyle}
-                >
-                  {item[dateKey]}
-                </p>
               </div>
+              
+              {/* Item identifier in top-right corner */}
+              {item[itemNameKey] && (
+                <div
+                  className={`message-card-item-name ${itemNameClassName || ""}`}
+                  style={itemNameStyle}
+                >
+                  {item[itemNameKey]}
+                </div>
+              )}
             </div>
             <div
               className={`message-card-body ${bodyClassName || ""}`}
@@ -176,6 +209,22 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
                   />
                 </div>
               )}
+              
+              {/* Display hashtags and mentions as chips */}
+              {(hashtags.length > 0 || mentions.length > 0) && (
+                <div className="message-card-tags">
+                  {hashtags.map((tag, tagIndex) => (
+                    <span key={`hashtag-${tagIndex}`} className="tag-chip hashtag-chip">
+                      {tag}
+                    </span>
+                  ))}
+                  {mentions.map((mention, mentionIndex) => (
+                    <span key={`mention-${mentionIndex}`} className="tag-chip mention-chip">
+                      {mention}
+                    </span>
+                  ))}
+                </div>
+              )}
             </div>
           </div>
         );

package/vite.config.ts

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