@solidxai/core-ui 0.1.13-beta.0 → 0.1.13-beta.2

package/dist/components/core/chatter/SolidChatterMessageBox.tsx

@@ -10,6 +10,9 @@ import { SolidButton, SolidLightbox, SolidTag, SolidTooltip, SolidTooltipContent
 import type { SolidLightboxSlide } from '../../shad-cn-ui/SolidLightbox'
 import { usePatchChatterMessageMutation, useUpdateChatterNoteMessageMutation } from '../../../redux/api/solidChatterMessageApi'
 import { useSession } from '../../../hooks/useSession'
+import { buildMessageBodyWithMentionTokens, parseMessageBodyMentions } from './chatterMentions'
+import { useChatterMentions } from './useChatterMentions'
+import { SolidChatterMentionMenu } from './SolidChatterMentionMenu'
 
 interface Props {
     messageId?: number | string,
@@ -17,6 +20,7 @@ interface Props {
     userId?: number,
     messageType?: string,
     message?: any,
+    messageBodyMentions?: unknown,
     time?: string,
     auditRecord?: any,
     messageSubType?: string,
@@ -56,7 +60,7 @@ const getFileIcon = (mimeType: string): SolidIconName => {
 };
 
 export const SolidChatterMessageBox = (props: Props) => {
-    const { messageId, user, userId, messageType, message, time, auditRecord, media, messageSubType, status, modelDisplayName, modelUserKey, onRefresh } = props;
+    const { messageId, user, userId, messageType, message, messageBodyMentions, time, auditRecord, media, messageSubType, status, modelDisplayName, modelUserKey, onRefresh } = props;
     const [lightboxSlides, setLightboxSlides] = useState<SolidLightboxSlide[]>([]);
     const [openLightbox, setOpenLightbox] = useState(false);
     const [taskStatus, setTaskStatus] = useState<string | undefined>(status);
@@ -69,9 +73,27 @@ export const SolidChatterMessageBox = (props: Props) => {
     const [optimisticRemovedAttachmentIds, setOptimisticRemovedAttachmentIds] = useState<number[]>([]);
     const [hasPendingOptimisticAttachmentUpdate, setHasPendingOptimisticAttachmentUpdate] = useState(false);
     const fileInputRef = useRef<HTMLInputElement>(null);
+    const editTextareaRef = useRef<HTMLTextAreaElement | null>(null);
     const [patchChatterMessage, { isLoading: isUpdatingTaskStatus }] = usePatchChatterMessageMutation();
     const [updateChatterNoteMessage, { isLoading: isUpdatingNote }] = useUpdateChatterNoteMessageMutation();
     const { data: session } = useSession();
+    const {
+        mentions: editMentions,
+        mentionRange,
+        mentionSuggestions,
+        activeMentionIndex,
+        isFetchingMentionUsers,
+        handleMentionTextChange,
+        handleMentionKeyDown,
+        handleMentionKeyUp,
+        handleMentionClick,
+        handleSelectMention,
+        resetMentions,
+    } = useChatterMentions({
+        value: editedMessage,
+        onChange: setEditedMessage,
+        textareaRef: editTextareaRef,
+    });
 
     const avatarStyle = useMemo(() => {
         const bg = stringToColor(user)
@@ -208,8 +230,10 @@ export const SolidChatterMessageBox = (props: Props) => {
         }
         setIsEditing(false);
         try {
+            const messageBody = buildMessageBodyWithMentionTokens(nextMessage, editMentions);
             const formData = new FormData();
-            formData.append('messageBody', nextMessage);
+            formData.append('messageBody', messageBody.body);
+            formData.append('messageBodyMentions', JSON.stringify(messageBody.mentions));
             if (removedAttachmentIds.length > 0) {
                 formData.append('removeAttachmentIds', removedAttachmentIds.join(','));
             }
@@ -227,10 +251,21 @@ export const SolidChatterMessageBox = (props: Props) => {
         }
     };
 
+    const handleEditKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        handleMentionKeyDown(event);
+        if (event.defaultPrevented) return;
+
+        if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+            event.preventDefault();
+            handleEditSave();
+        }
+    };
+
     const handleCancelEdit = () => {
         setEditedMessage(localMessage ?? '');
         setSelectedFiles([]);
         setRemovedAttachmentIds([]);
+        resetMentions(parseMessageBodyMentions(messageBodyMentions));
         setIsEditing(false);
     };
 
@@ -290,7 +325,10 @@ export const SolidChatterMessageBox = (props: Props) => {
                                         variant="ghost"
                                         className="solid-icon-button"
                                         leftIcon={<Pencil size={12} />}
-                                        onClick={() => setIsEditing(true)}
+                                        onClick={() => {
+                                            resetMentions(parseMessageBodyMentions(messageBodyMentions));
+                                            setIsEditing(true);
+                                        }}
                                         aria-label="Edit note"
                                         title="Edit note"
                                     />
@@ -314,11 +352,26 @@ export const SolidChatterMessageBox = (props: Props) => {
                         {isEditing && (
                             <div className='flex flex-col gap-2'>
                                 <SolidTextarea
+                                    ref={editTextareaRef}
                                     value={editedMessage}
-                                    onChange={(e) => setEditedMessage(e.target.value)}
+                                    onChange={handleMentionTextChange}
+                                    onKeyDown={handleEditKeyDown}
+                                    onKeyUp={handleMentionKeyUp}
+                                    onClick={handleMentionClick}
                                     rows={4}
                                     className="w-full py-2"
                                 />
+                                <p className={styles.chatterComposerHelp}>
+                                    Type @ to mention a user. Press Ctrl+Enter to save.
+                                </p>
+                                {mentionRange && (
+                                    <SolidChatterMentionMenu
+                                        isLoading={isFetchingMentionUsers}
+                                        users={mentionSuggestions}
+                                        activeIndex={activeMentionIndex}
+                                        onSelect={handleSelectMention}
+                                    />
+                                )}
                                 <div className='flex flex-col gap-2'>
                                     <input
                                         ref={fileInputRef}

package/dist/components/core/chatter/SolidMessageComposer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidMessageComposer.d.ts","sourceRoot":"","sources":["../../../../src/components/core/chatter/SolidMessageComposer.tsx"],"names":[],"mappings":"AAQA,UAAU,yBAAyB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,GAAG,CAAC;IACxB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,oBAAoB,qEAAsE,yBAAyB,4CA6K/H,CAAA"}
+{"version":3,"file":"SolidMessageComposer.d.ts","sourceRoot":"","sources":["../../../../src/components/core/chatter/SolidMessageComposer.tsx"],"names":[],"mappings":"AAUA,UAAU,yBAAyB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,GAAG,CAAC;IACxB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,oBAAoB,qEAAsE,yBAAyB,4CAsN/H,CAAA"}

package/dist/components/core/chatter/SolidMessageComposer.js

@@ -45,26 +45,27 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './chatter.module.css';
-import { useCreateChatterMessageMutation } from '../../../redux/api/solidChatterMessageApi';
+import { usePostChatterMessageMutation } from '../../../redux/api/solidChatterMessageApi';
 import { useEffect, useState, useRef } from 'react';
 import { ERROR_MESSAGES } from '../../../constants/error-messages';
-import { useSession } from '../../../hooks/useSession';
 import { SolidButton, SolidTextarea } from '../../shad-cn-ui';
 import { FileText, Paperclip, X } from 'lucide-react';
+import { buildMessageBodyWithMentionTokens } from './chatterMentions';
+import { useChatterMentions } from './useChatterMentions';
+import { SolidChatterMentionMenu } from './SolidChatterMentionMenu';
 export var SolidMessageComposer = function (_a) {
     var type = _a.type, modelSingularName = _a.modelSingularName, refetch = _a.refetch, id = _a.id, onCancel = _a.onCancel, modelUserKey = _a.modelUserKey;
     var _b = useState(''), message = _b[0], setMessage = _b[1];
     var _c = useState([]), selectedFiles = _c[0], setSelectedFiles = _c[1];
-    var _d = useSession(), session = _d.data, status = _d.status;
-    var user = session === null || session === void 0 ? void 0 : session.user;
     var fileInputRef = useRef(null);
+    var textareaRef = useRef(null);
     // const { data: viewLayoutData } = useGetSolidViewLayoutQuery(null);
-    var _e = useCreateChatterMessageMutation(), createChatterMessage = _e[0], _f = _e[1], isLoading = _f.isLoading, isSuccess = _f.isSuccess, isError = _f.isError;
-    var tempEmails = [
-        "johndoe@gmal.com",
-        "tempmail@gmail.com",
-        "example@mail.com"
-    ];
+    var _d = usePostChatterMessageMutation(), postChatterMessage = _d[0], _e = _d[1], isLoading = _e.isLoading, isSuccess = _e.isSuccess;
+    var _f = useChatterMentions({
+        value: message,
+        onChange: setMessage,
+        textareaRef: textareaRef,
+    }), mentions = _f.mentions, mentionRange = _f.mentionRange, mentionSuggestions = _f.mentionSuggestions, activeMentionIndex = _f.activeMentionIndex, isFetchingMentionUsers = _f.isFetchingMentionUsers, handleMentionTextChange = _f.handleMentionTextChange, handleMentionKeyDown = _f.handleMentionKeyDown, handleMentionKeyUp = _f.handleMentionKeyUp, handleMentionClick = _f.handleMentionClick, handleSelectMention = _f.handleSelectMention, resetMentions = _f.resetMentions;
     var handleFileSelect = function (event) {
         if (event.target.files) {
             var files_1 = Array.from(event.target.files);
@@ -72,7 +73,7 @@ export var SolidMessageComposer = function (_a) {
         }
     };
     var handleSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        var formData_1, error_1;
+        var messageBody, formData_1, error_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -82,23 +83,26 @@ export var SolidMessageComposer = function (_a) {
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
+                    messageBody = buildMessageBodyWithMentionTokens(message, mentions);
                     formData_1 = new FormData();
-                    formData_1.append('messageType', "custom");
                     formData_1.append('messageSubType', "note");
-                    formData_1.append('messageBody', message);
+                    formData_1.append('messageBody', messageBody.body);
                     formData_1.append('coModelEntityId', id);
                     formData_1.append('coModelName', modelSingularName);
-                    formData_1.append('userId', (user === null || user === void 0 ? void 0 : user.id) || 1);
+                    if (messageBody.mentions.length > 0) {
+                        formData_1.append('messageBodyMentions', JSON.stringify(messageBody.mentions));
+                    }
                     if (modelUserKey)
                         formData_1.append('modelUserKey', modelUserKey);
-                    selectedFiles.forEach(function (file, index) {
+                    selectedFiles.forEach(function (file) {
                         formData_1.append("messageAttachments", file);
                     });
-                    return [4 /*yield*/, createChatterMessage(formData_1).unwrap()];
+                    return [4 /*yield*/, postChatterMessage(formData_1).unwrap()];
                 case 2:
                     _a.sent();
                     setMessage('');
                     setSelectedFiles([]);
+                    resetMentions();
                     onCancel === null || onCancel === void 0 ? void 0 : onCancel();
                     return [3 /*break*/, 4];
                 case 3:
@@ -109,6 +113,22 @@ export var SolidMessageComposer = function (_a) {
             }
         });
     }); };
+    var handleComposerKeyDown = function (event) {
+        var _a;
+        handleMentionKeyDown(event);
+        if (event.defaultPrevented)
+            return;
+        if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+            event.preventDefault();
+            (_a = event.currentTarget.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
+        }
+    };
+    var resetComposer = function () {
+        setMessage('');
+        setSelectedFiles([]);
+        resetMentions();
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    };
     useEffect(function () {
         if (isSuccess) {
             refetch();
@@ -121,10 +141,6 @@ export var SolidMessageComposer = function (_a) {
             ? "".concat((size / (1024 * 1024)).toFixed(1), " MB")
             : "".concat((size / 1024).toFixed(1), " KB");
     };
-    return (_jsxs("form", { className: styles.chatterMessageComposer, onSubmit: handleSubmit, children: [_jsxs("div", { className: "".concat(styles.solidMessageWrapper, " flex flex-col gap-2 w-full"), children: [_jsx("div", { className: 'flex items-center justify-between', children: _jsx("p", { className: 'form-field-label m-0', children: type === 'email' ? 'Email Message' : 'Internal Note' }) }), _jsx(SolidTextarea, { value: message, onChange: function (e) { return setMessage(e.target.value); }, placeholder: type === 'email' ? 'Send a message to followers' : 'Log an internal note.', className: "w-full p-2", rows: 4 }), _jsxs("div", { className: 'flex items-center justify-between flex-wrap gap-2', children: [_jsxs("div", { className: 'flex items-center gap-2', children: [_jsx("input", { type: "file", ref: fileInputRef, onChange: handleFileSelect, multiple: true, style: { display: 'none' } }), _jsx(SolidButton, { type: "button", variant: "outline", size: "sm", className: "solid-icon-button", leftIcon: _jsx(Paperclip, { size: 14 }), onClick: function () { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, "aria-label": "Attach files", title: "Attach files" }), _jsx("span", { className: 'text-xs text-color-secondary', children: "Attach file" })] }), _jsxs("div", { className: 'flex items-center gap-2', children: [_jsx(SolidButton, { type: 'submit', size: 'sm', className: 'gap-2 solid-purple-button', variant: 'primary', loading: isLoading, disabled: !message.trim() && selectedFiles.length === 0, children: type === 'email' ? 'Send' : 'Log' }), _jsx(SolidButton, { type: 'button', size: 'sm', variant: 'ghost', onClick: function () {
-                                            setMessage('');
-                                            setSelectedFiles([]);
-                                            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-                                        }, children: "Cancel" })] })] })] }), selectedFiles.length > 0 && (_jsx("div", { className: styles.chatterSelectedFiles, children: selectedFiles.map(function (file, index) { return (_jsxs("div", { className: styles.chatterSelectedFileCard, children: [_jsx("div", { className: styles.chatterSelectedFileIcon, children: _jsx(FileText, { size: 16 }) }), _jsxs("div", { className: styles.chatterSelectedFileMeta, children: [_jsx("p", { className: styles.chatterSelectedFileName, children: file.name }), _jsx("span", { className: styles.chatterSelectedFileSize, children: formatFileSize(file.size) })] }), _jsx(SolidButton, { type: "button", variant: "ghost", size: "sm", className: "solid-icon-button", leftIcon: _jsx(X, { size: 12 }), onClick: function () { return setSelectedFiles(function (prev) { return prev.filter(function (_, i) { return i !== index; }); }); }, "aria-label": "Remove ".concat(file.name) })] }, index)); }) }))] }));
+    return (_jsxs("form", { className: styles.chatterMessageComposer, onSubmit: handleSubmit, children: [_jsxs("div", { className: "".concat(styles.solidMessageWrapper, " flex flex-col gap-2 w-full"), children: [_jsx("div", { className: 'flex items-center justify-between', children: _jsx("p", { className: 'form-field-label m-0', children: type === 'email' ? 'Email Message' : 'Internal Note' }) }), _jsx(SolidTextarea, { ref: textareaRef, value: message, onChange: handleMentionTextChange, onKeyDown: handleComposerKeyDown, onKeyUp: handleMentionKeyUp, onClick: handleMentionClick, placeholder: type === 'email' ? 'Send a message to followers' : 'Log an internal note.', className: "w-full p-2", rows: 4 }), _jsx("p", { className: styles.chatterComposerHelp, children: "Type @ to mention a user. Press Ctrl+Enter to save." }), mentionRange && (_jsx(SolidChatterMentionMenu, { isLoading: isFetchingMentionUsers, users: mentionSuggestions, activeIndex: activeMentionIndex, onSelect: handleSelectMention })), _jsxs("div", { className: 'flex items-center justify-between flex-wrap gap-2', children: [_jsxs("div", { className: 'flex items-center gap-2', children: [_jsx("input", { type: "file", ref: fileInputRef, onChange: handleFileSelect, multiple: true, style: { display: 'none' } }), _jsx(SolidButton, { type: "button", variant: "outline", size: "sm", className: "solid-icon-button", leftIcon: _jsx(Paperclip, { size: 14 }), onClick: function () { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, "aria-label": "Attach files", title: "Attach files" }), _jsx("span", { className: 'text-xs text-color-secondary', children: "Attach file" })] }), _jsxs("div", { className: 'flex items-center gap-2', children: [_jsx(SolidButton, { type: 'submit', size: 'sm', className: 'gap-2 solid-purple-button', variant: 'primary', loading: isLoading, disabled: !message.trim() && selectedFiles.length === 0, children: type === 'email' ? 'Send' : 'Log' }), _jsx(SolidButton, { type: 'button', size: 'sm', variant: 'ghost', onClick: resetComposer, children: "Cancel" })] })] })] }), selectedFiles.length > 0 && (_jsx("div", { className: styles.chatterSelectedFiles, children: selectedFiles.map(function (file, index) { return (_jsxs("div", { className: styles.chatterSelectedFileCard, children: [_jsx("div", { className: styles.chatterSelectedFileIcon, children: _jsx(FileText, { size: 16 }) }), _jsxs("div", { className: styles.chatterSelectedFileMeta, children: [_jsx("p", { className: styles.chatterSelectedFileName, children: file.name }), _jsx("span", { className: styles.chatterSelectedFileSize, children: formatFileSize(file.size) })] }), _jsx(SolidButton, { type: "button", variant: "ghost", size: "sm", className: "solid-icon-button", leftIcon: _jsx(X, { size: 12 }), onClick: function () { return setSelectedFiles(function (prev) { return prev.filter(function (_, i) { return i !== index; }); }); }, "aria-label": "Remove ".concat(file.name) })] }, index)); }) }))] }));
 };
 //# sourceMappingURL=SolidMessageComposer.js.map

package/dist/components/core/chatter/SolidMessageComposer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidMessageComposer.js","sourceRoot":"","sources":["../../../../src/components/core/chatter/SolidMessageComposer.tsx"],"names":[],"mappings":"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","sourcesContent":["import styles from './chatter.module.css'\nimport { useCreateChatterMessageMutation } from '../../../redux/api/solidChatterMessageApi'\nimport { useEffect, useState, useRef } from 'react'\nimport { ERROR_MESSAGES } from '../../../constants/error-messages'\nimport { useSession } from '../../../hooks/useSession'\nimport { SolidButton, SolidTextarea } from '../../shad-cn-ui'\nimport { FileText, Paperclip, X } from 'lucide-react'\n\ninterface SolidMessageComposerProps {\n    type?: string;\n    modelSingularName?: any;\n    refetch?: any;\n    id?: any;\n    onCancel?: () => void;\n    modelUserKey?: string;\n}\n\nexport const SolidMessageComposer = ({ type, modelSingularName, refetch, id, onCancel, modelUserKey }: SolidMessageComposerProps) => {\n    const [message, setMessage] = useState('');\n    const [selectedFiles, setSelectedFiles] = useState<File[]>([]);\n\n    const { data: session, status } = useSession();\n    const user = session?.user;\n    const fileInputRef = useRef<HTMLInputElement>(null);\n\n    // const { data: viewLayoutData } = useGetSolidViewLayoutQuery(null);\n    const [createChatterMessage, { isLoading, isSuccess, isError }] = useCreateChatterMessageMutation();\n\n    const tempEmails = [\n        \"johndoe@gmal.com\",\n        \"tempmail@gmail.com\",\n        \"example@mail.com\"\n    ]\n\n    const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (event.target.files) {\n            const files = Array.from(event.target.files);\n            setSelectedFiles(prev => [...prev, ...files]);\n        }\n    };\n\n    const handleSubmit = async (e: React.FormEvent) => {\n        e.preventDefault();\n        if (!message.trim() && selectedFiles.length === 0) return;\n\n        try {\n            const formData = new FormData();\n            formData.append('messageType', \"custom\");\n            formData.append('messageSubType', \"note\");\n            formData.append('messageBody', message);\n            formData.append('coModelEntityId', id);\n            formData.append('coModelName', modelSingularName);\n            formData.append('userId', user?.id || 1);\n\n            if (modelUserKey) formData.append('modelUserKey', modelUserKey);\n            selectedFiles.forEach((file, index) => {\n                formData.append(`messageAttachments`, file);\n            });\n\n            await createChatterMessage(formData).unwrap();\n            setMessage('');\n            setSelectedFiles([]);\n            onCancel?.();\n        } catch (error) {\n            console.error(ERROR_MESSAGES.FETCHING_MESSAGE, error);\n        }\n    };\n\n    useEffect(() => {\n        if (isSuccess) {\n            refetch()\n        }\n    }, [isSuccess]);\n\n    const formatFileSize = (size: number) => {\n        if (!size) return \"\";\n        return size >= 1024 * 1024\n            ? `${(size / (1024 * 1024)).toFixed(1)} MB`\n            : `${(size / 1024).toFixed(1)} KB`;\n    };\n\n    return (\n        <form className={styles.chatterMessageComposer} onSubmit={handleSubmit}>\n            {/* {type === 'email' &&\n                <div className='mb-2 flex items-center gap-1 text-sm'>\n                    <span className='font-bold'>To:</span>\n                    <div className={styles.chatterEmails}>\n                        {tempEmails.map((mail, index) => (\n                            <span key={index}>\n                                {mail}\n                            </span>\n                        ))}\n                    </div>\n                    <div className={`si si-sort-down-fill text-[var(--primary-color)] ${styles.emailTooltipIcon}`} style={{ fontSize: 8 }}>\n                        <div className={styles.emailsTooltip}>\n                            {tempEmails.map((mail, index) => (\n                                <span key={index} className='text-color text-sm'>\n                                    {mail}\n                                </span>\n                            ))}\n                        </div>\n                    </div>\n                </div>\n            } */}\n            <div className={`${styles.solidMessageWrapper} flex flex-col gap-2 w-full`}>\n                <div className='flex items-center justify-between'>\n                    <p className='form-field-label m-0'>\n                        {type === 'email' ? 'Email Message' : 'Internal Note'}\n                    </p>\n                </div>\n                <SolidTextarea\n                    value={message}\n                    onChange={(e) => setMessage(e.target.value)}\n                    placeholder={type === 'email' ? 'Send a message to followers' : 'Log an internal note.'}\n                    className=\"w-full p-2\"\n                    rows={4}\n                />\n                <div className='flex items-center justify-between flex-wrap gap-2'>\n                    <div className='flex items-center gap-2'>\n                        <input\n                            type=\"file\"\n                            ref={fileInputRef}\n                            onChange={handleFileSelect}\n                            multiple\n                            style={{ display: 'none' }}\n                        />\n                        <SolidButton\n                            type=\"button\"\n                            variant=\"outline\"\n                            size=\"sm\"\n                            className=\"solid-icon-button\"\n                            leftIcon={<Paperclip size={14} />}\n                            onClick={() => fileInputRef.current?.click()}\n                            aria-label=\"Attach files\"\n                            title=\"Attach files\"\n                        />\n                        <span className='text-xs text-color-secondary'>Attach file</span>\n                    </div>\n                    <div className='flex items-center gap-2'>\n                        <SolidButton\n                            type='submit'\n                            size='sm'\n                            className='gap-2 solid-purple-button'\n                            variant='primary'\n                            loading={isLoading}\n                            disabled={!message.trim() && selectedFiles.length === 0}\n                        >\n                            {type === 'email' ? 'Send' : 'Log'}\n                        </SolidButton>\n                        <SolidButton\n                            type='button'\n                            size='sm'\n                            variant='ghost'\n                            onClick={() => {\n                                setMessage('');\n                                setSelectedFiles([]);\n                                onCancel?.();\n                            }}\n                        >\n                            Cancel\n                        </SolidButton>\n                    </div>\n                </div>\n            </div>\n            {selectedFiles.length > 0 && (\n                <div className={styles.chatterSelectedFiles}>\n                    {selectedFiles.map((file, index) => (\n                        <div key={index} className={styles.chatterSelectedFileCard}>\n                            <div className={styles.chatterSelectedFileIcon}>\n                                <FileText size={16} />\n                            </div>\n                            <div className={styles.chatterSelectedFileMeta}>\n                                <p className={styles.chatterSelectedFileName}>{file.name}</p>\n                                <span className={styles.chatterSelectedFileSize}>{formatFileSize(file.size)}</span>\n                            </div>\n                            <SolidButton\n                                type=\"button\"\n                                variant=\"ghost\"\n                                size=\"sm\"\n                                className=\"solid-icon-button\"\n                                leftIcon={<X size={12} />}\n                                onClick={() => setSelectedFiles(prev => prev.filter((_, i) => i !== index))}\n                                aria-label={`Remove ${file.name}`}\n                            />\n                        </div>\n                    ))}\n                </div>\n            )}\n        </form>\n    )\n}\n"]}
+{"version":3,"file":"SolidMessageComposer.js","sourceRoot":"","sources":["../../../../src/components/core/chatter/SolidMessageComposer.tsx"],"names":[],"mappings":"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","sourcesContent":["import styles from './chatter.module.css'\nimport { usePostChatterMessageMutation } from '../../../redux/api/solidChatterMessageApi'\nimport { useEffect, useState, useRef } from 'react'\nimport { ERROR_MESSAGES } from '../../../constants/error-messages'\nimport { SolidButton, SolidTextarea } from '../../shad-cn-ui'\nimport { FileText, Paperclip, X } from 'lucide-react'\nimport { buildMessageBodyWithMentionTokens } from './chatterMentions'\nimport { useChatterMentions } from './useChatterMentions'\nimport { SolidChatterMentionMenu } from './SolidChatterMentionMenu'\n\ninterface SolidMessageComposerProps {\n    type?: string;\n    modelSingularName?: any;\n    refetch?: any;\n    id?: any;\n    onCancel?: () => void;\n    modelUserKey?: string;\n}\n\nexport const SolidMessageComposer = ({ type, modelSingularName, refetch, id, onCancel, modelUserKey }: SolidMessageComposerProps) => {\n    const [message, setMessage] = useState('');\n    const [selectedFiles, setSelectedFiles] = useState<File[]>([]);\n\n    const fileInputRef = useRef<HTMLInputElement>(null);\n    const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n\n    // const { data: viewLayoutData } = useGetSolidViewLayoutQuery(null);\n    const [postChatterMessage, { isLoading, isSuccess }] = usePostChatterMessageMutation();\n    const {\n        mentions,\n        mentionRange,\n        mentionSuggestions,\n        activeMentionIndex,\n        isFetchingMentionUsers,\n        handleMentionTextChange,\n        handleMentionKeyDown,\n        handleMentionKeyUp,\n        handleMentionClick,\n        handleSelectMention,\n        resetMentions,\n    } = useChatterMentions({\n        value: message,\n        onChange: setMessage,\n        textareaRef,\n    });\n\n    const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (event.target.files) {\n            const files = Array.from(event.target.files);\n            setSelectedFiles(prev => [...prev, ...files]);\n        }\n    };\n\n    const handleSubmit = async (e: React.FormEvent) => {\n        e.preventDefault();\n        if (!message.trim() && selectedFiles.length === 0) return;\n\n        try {\n            const messageBody = buildMessageBodyWithMentionTokens(message, mentions);\n            const formData = new FormData();\n            formData.append('messageSubType', \"note\");\n            formData.append('messageBody', messageBody.body);\n            formData.append('coModelEntityId', id);\n            formData.append('coModelName', modelSingularName);\n            if (messageBody.mentions.length > 0) {\n                formData.append('messageBodyMentions', JSON.stringify(messageBody.mentions));\n            }\n\n            if (modelUserKey) formData.append('modelUserKey', modelUserKey);\n            selectedFiles.forEach((file) => {\n                formData.append(`messageAttachments`, file);\n            });\n\n            await postChatterMessage(formData).unwrap();\n            setMessage('');\n            setSelectedFiles([]);\n            resetMentions();\n            onCancel?.();\n        } catch (error) {\n            console.error(ERROR_MESSAGES.FETCHING_MESSAGE, error);\n        }\n    };\n\n    const handleComposerKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        handleMentionKeyDown(event);\n        if (event.defaultPrevented) return;\n\n        if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {\n            event.preventDefault();\n            event.currentTarget.form?.requestSubmit();\n        }\n    };\n\n    const resetComposer = () => {\n        setMessage('');\n        setSelectedFiles([]);\n        resetMentions();\n        onCancel?.();\n    };\n\n    useEffect(() => {\n        if (isSuccess) {\n            refetch()\n        }\n    }, [isSuccess]);\n\n    const formatFileSize = (size: number) => {\n        if (!size) return \"\";\n        return size >= 1024 * 1024\n            ? `${(size / (1024 * 1024)).toFixed(1)} MB`\n            : `${(size / 1024).toFixed(1)} KB`;\n    };\n\n    return (\n        <form className={styles.chatterMessageComposer} onSubmit={handleSubmit}>\n            {/* {type === 'email' &&\n                <div className='mb-2 flex items-center gap-1 text-sm'>\n                    <span className='font-bold'>To:</span>\n                    <div className={styles.chatterEmails}>\n                        {tempEmails.map((mail, index) => (\n                            <span key={index}>\n                                {mail}\n                            </span>\n                        ))}\n                    </div>\n                    <div className={`si si-sort-down-fill text-[var(--primary-color)] ${styles.emailTooltipIcon}`} style={{ fontSize: 8 }}>\n                        <div className={styles.emailsTooltip}>\n                            {tempEmails.map((mail, index) => (\n                                <span key={index} className='text-color text-sm'>\n                                    {mail}\n                                </span>\n                            ))}\n                        </div>\n                    </div>\n                </div>\n            } */}\n            <div className={`${styles.solidMessageWrapper} flex flex-col gap-2 w-full`}>\n                <div className='flex items-center justify-between'>\n                    <p className='form-field-label m-0'>\n                        {type === 'email' ? 'Email Message' : 'Internal Note'}\n                    </p>\n                </div>\n                <SolidTextarea\n                    ref={textareaRef}\n                    value={message}\n                    onChange={handleMentionTextChange}\n                    onKeyDown={handleComposerKeyDown}\n                    onKeyUp={handleMentionKeyUp}\n                    onClick={handleMentionClick}\n                    placeholder={type === 'email' ? 'Send a message to followers' : 'Log an internal note.'}\n                    className=\"w-full p-2\"\n                    rows={4}\n                />\n                <p className={styles.chatterComposerHelp}>\n                    Type @ to mention a user. Press Ctrl+Enter to save.\n                </p>\n                {mentionRange && (\n                    <SolidChatterMentionMenu\n                        isLoading={isFetchingMentionUsers}\n                        users={mentionSuggestions}\n                        activeIndex={activeMentionIndex}\n                        onSelect={handleSelectMention}\n                    />\n                )}\n                <div className='flex items-center justify-between flex-wrap gap-2'>\n                    <div className='flex items-center gap-2'>\n                        <input\n                            type=\"file\"\n                            ref={fileInputRef}\n                            onChange={handleFileSelect}\n                            multiple\n                            style={{ display: 'none' }}\n                        />\n                        <SolidButton\n                            type=\"button\"\n                            variant=\"outline\"\n                            size=\"sm\"\n                            className=\"solid-icon-button\"\n                            leftIcon={<Paperclip size={14} />}\n                            onClick={() => fileInputRef.current?.click()}\n                            aria-label=\"Attach files\"\n                            title=\"Attach files\"\n                        />\n                        <span className='text-xs text-color-secondary'>Attach file</span>\n                    </div>\n                    <div className='flex items-center gap-2'>\n                        <SolidButton\n                            type='submit'\n                            size='sm'\n                            className='gap-2 solid-purple-button'\n                            variant='primary'\n                            loading={isLoading}\n                            disabled={!message.trim() && selectedFiles.length === 0}\n                        >\n                            {type === 'email' ? 'Send' : 'Log'}\n                        </SolidButton>\n                        <SolidButton\n                            type='button'\n                            size='sm'\n                            variant='ghost'\n                            onClick={resetComposer}\n                        >\n                            Cancel\n                        </SolidButton>\n                    </div>\n                </div>\n            </div>\n            {selectedFiles.length > 0 && (\n                <div className={styles.chatterSelectedFiles}>\n                    {selectedFiles.map((file, index) => (\n                        <div key={index} className={styles.chatterSelectedFileCard}>\n                            <div className={styles.chatterSelectedFileIcon}>\n                                <FileText size={16} />\n                            </div>\n                            <div className={styles.chatterSelectedFileMeta}>\n                                <p className={styles.chatterSelectedFileName}>{file.name}</p>\n                                <span className={styles.chatterSelectedFileSize}>{formatFileSize(file.size)}</span>\n                            </div>\n                            <SolidButton\n                                type=\"button\"\n                                variant=\"ghost\"\n                                size=\"sm\"\n                                className=\"solid-icon-button\"\n                                leftIcon={<X size={12} />}\n                                onClick={() => setSelectedFiles(prev => prev.filter((_, i) => i !== index))}\n                                aria-label={`Remove ${file.name}`}\n                            />\n                        </div>\n                    ))}\n                </div>\n            )}\n        </form>\n    )\n}\n"]}

package/dist/components/core/chatter/SolidMessageComposer.tsx

@@ -1,10 +1,12 @@
 import styles from './chatter.module.css'
-import { useCreateChatterMessageMutation } from '../../../redux/api/solidChatterMessageApi'
+import { usePostChatterMessageMutation } from '../../../redux/api/solidChatterMessageApi'
 import { useEffect, useState, useRef } from 'react'
 import { ERROR_MESSAGES } from '../../../constants/error-messages'
-import { useSession } from '../../../hooks/useSession'
 import { SolidButton, SolidTextarea } from '../../shad-cn-ui'
 import { FileText, Paperclip, X } from 'lucide-react'
+import { buildMessageBodyWithMentionTokens } from './chatterMentions'
+import { useChatterMentions } from './useChatterMentions'
+import { SolidChatterMentionMenu } from './SolidChatterMentionMenu'
 
 interface SolidMessageComposerProps {
     type?: string;
@@ -19,18 +21,28 @@ export const SolidMessageComposer = ({ type, modelSingularName, refetch, id, onC
     const [message, setMessage] = useState('');
     const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
 
-    const { data: session, status } = useSession();
-    const user = session?.user;
     const fileInputRef = useRef<HTMLInputElement>(null);
+    const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
     // const { data: viewLayoutData } = useGetSolidViewLayoutQuery(null);
-    const [createChatterMessage, { isLoading, isSuccess, isError }] = useCreateChatterMessageMutation();
-
-    const tempEmails = [
-        "johndoe@gmal.com",
-        "tempmail@gmail.com",
-        "example@mail.com"
-    ]
+    const [postChatterMessage, { isLoading, isSuccess }] = usePostChatterMessageMutation();
+    const {
+        mentions,
+        mentionRange,
+        mentionSuggestions,
+        activeMentionIndex,
+        isFetchingMentionUsers,
+        handleMentionTextChange,
+        handleMentionKeyDown,
+        handleMentionKeyUp,
+        handleMentionClick,
+        handleSelectMention,
+        resetMentions,
+    } = useChatterMentions({
+        value: message,
+        onChange: setMessage,
+        textareaRef,
+    });
 
     const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
         if (event.target.files) {
@@ -44,28 +56,48 @@ export const SolidMessageComposer = ({ type, modelSingularName, refetch, id, onC
         if (!message.trim() && selectedFiles.length === 0) return;
 
         try {
+            const messageBody = buildMessageBodyWithMentionTokens(message, mentions);
             const formData = new FormData();
-            formData.append('messageType', "custom");
             formData.append('messageSubType', "note");
-            formData.append('messageBody', message);
+            formData.append('messageBody', messageBody.body);
             formData.append('coModelEntityId', id);
             formData.append('coModelName', modelSingularName);
-            formData.append('userId', user?.id || 1);
+            if (messageBody.mentions.length > 0) {
+                formData.append('messageBodyMentions', JSON.stringify(messageBody.mentions));
+            }
 
             if (modelUserKey) formData.append('modelUserKey', modelUserKey);
-            selectedFiles.forEach((file, index) => {
+            selectedFiles.forEach((file) => {
                 formData.append(`messageAttachments`, file);
             });
 
-            await createChatterMessage(formData).unwrap();
+            await postChatterMessage(formData).unwrap();
             setMessage('');
             setSelectedFiles([]);
+            resetMentions();
             onCancel?.();
         } catch (error) {
             console.error(ERROR_MESSAGES.FETCHING_MESSAGE, error);
         }
     };
 
+    const handleComposerKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        handleMentionKeyDown(event);
+        if (event.defaultPrevented) return;
+
+        if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+            event.preventDefault();
+            event.currentTarget.form?.requestSubmit();
+        }
+    };
+
+    const resetComposer = () => {
+        setMessage('');
+        setSelectedFiles([]);
+        resetMentions();
+        onCancel?.();
+    };
+
     useEffect(() => {
         if (isSuccess) {
             refetch()
@@ -109,12 +141,27 @@ export const SolidMessageComposer = ({ type, modelSingularName, refetch, id, onC
                     </p>
                 </div>
                 <SolidTextarea
+                    ref={textareaRef}
                     value={message}
-                    onChange={(e) => setMessage(e.target.value)}
+                    onChange={handleMentionTextChange}
+                    onKeyDown={handleComposerKeyDown}
+                    onKeyUp={handleMentionKeyUp}
+                    onClick={handleMentionClick}
                     placeholder={type === 'email' ? 'Send a message to followers' : 'Log an internal note.'}
                     className="w-full p-2"
                     rows={4}
                 />
+                <p className={styles.chatterComposerHelp}>
+                    Type @ to mention a user. Press Ctrl+Enter to save.
+                </p>
+                {mentionRange && (
+                    <SolidChatterMentionMenu
+                        isLoading={isFetchingMentionUsers}
+                        users={mentionSuggestions}
+                        activeIndex={activeMentionIndex}
+                        onSelect={handleSelectMention}
+                    />
+                )}
                 <div className='flex items-center justify-between flex-wrap gap-2'>
                     <div className='flex items-center gap-2'>
                         <input
@@ -151,11 +198,7 @@ export const SolidMessageComposer = ({ type, modelSingularName, refetch, id, onC
                             type='button'
                             size='sm'
                             variant='ghost'
-                            onClick={() => {
-                                setMessage('');
-                                setSelectedFiles([]);
-                                onCancel?.();
-                            }}
+                            onClick={resetComposer}
                         >
                             Cancel
                         </SolidButton>

package/dist/components/core/chatter/chatter.module.css

@@ -13,6 +13,69 @@
     color: color-mix(in srgb, var(--muted-foreground) 52%, transparent);
 }
 
+.chatterMentionMenu {
+    width: min(22rem, 100%);
+    max-height: 13rem;
+    overflow-y: auto;
+    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
+    border-radius: 0.5rem;
+    background: var(--popover, var(--card));
+    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
+    padding: 0.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    z-index: 20;
+}
+
+.chatterMentionOption {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    color: var(--foreground);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+    padding: 0.45rem 0.55rem;
+    text-align: left;
+    border-radius: 0.35rem;
+}
+
+.chatterMentionOption:hover,
+.chatterMentionOption:focus {
+    background: color-mix(in srgb, var(--primary-color, var(--primary)) 10%, transparent);
+    outline: none;
+}
+
+.chatterMentionOptionActive {
+    background: color-mix(in srgb, var(--primary-color, var(--primary)) 12%, transparent);
+}
+
+.chatterMentionName {
+    font-size: 0.78rem;
+    font-weight: 600;
+    line-height: 1.2;
+}
+
+.chatterMentionUsername,
+.chatterMentionEmpty {
+    font-size: 0.72rem;
+    color: var(--muted-foreground);
+}
+
+.chatterMentionEmpty {
+    padding: 0.5rem 0.55rem;
+}
+
+.chatterComposerHelp {
+    margin: -0.2rem 0 0;
+    font-size: 0.68rem;
+    font-style: italic;
+    line-height: 1.3;
+    color: var(--muted-foreground);
+}
+
 .chatterEmails {
     max-width: 80%;
     overflow: hidden;

package/dist/components/core/chatter/chatterMentions.d.ts

@@ -0,0 +1,17 @@
+export interface ChatterMention {
+    username: string;
+    display_name: string;
+    id: string;
+}
+export declare const parseMessageBodyMentions: (value: unknown) => ChatterMention[];
+export declare const renderMessageBodyMentions: (messageBody: string | null | undefined, messageBodyMentions: unknown) => string | null | undefined;
+export declare const buildMessageBodyWithMentionTokens: (message: string, mentions: ChatterMention[]) => {
+    body: string;
+    mentions: ChatterMention[];
+};
+export declare const getMentionCandidate: (value: string, cursorPosition: number) => {
+    query: string;
+    start: number;
+    end: number;
+} | null;
+//# sourceMappingURL=chatterMentions.d.ts.map

package/dist/components/core/chatter/chatterMentions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatterMentions.d.ts","sourceRoot":"","sources":["../../../../src/components/core/chatter/chatterMentions.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,wBAAwB,UAAW,OAAO,KAAG,cAAc,EAWvE,CAAC;AAEF,eAAO,MAAM,yBAAyB,gBAAiB,MAAM,GAAG,IAAI,GAAG,SAAS,uBAAuB,OAAO,8BAO7G,CAAC;AAIF,eAAO,MAAM,iCAAiC,YAAa,MAAM,YAAY,cAAc,EAAE;;;CAe5F,CAAC;AAEF,eAAO,MAAM,mBAAmB,UAAW,MAAM,kBAAkB,MAAM;;;;QAWxE,CAAC"}

package/dist/components/core/chatter/chatterMentions.js

@@ -0,0 +1,50 @@
+export var parseMessageBodyMentions = function (value) {
+    if (!value)
+        return [];
+    if (Array.isArray(value))
+        return value;
+    if (typeof value !== 'string')
+        return [];
+    try {
+        var parsed = JSON.parse(value);
+        return Array.isArray(parsed) ? parsed : [];
+    }
+    catch (_a) {
+        return [];
+    }
+};
+export var renderMessageBodyMentions = function (messageBody, messageBodyMentions) {
+    var mentions = parseMessageBodyMentions(messageBodyMentions);
+    if (!messageBody || mentions.length === 0)
+        return messageBody;
+    return mentions.reduce(function (nextMessage, mention, index) { return (nextMessage.replace(new RegExp("\\{\\{\\s*".concat(index, "\\s*\\}\\}"), 'g'), "@".concat(mention.username))); }, messageBody);
+};
+var escapeRegExp = function (value) { return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); };
+export var buildMessageBodyWithMentionTokens = function (message, mentions) {
+    var activeMentions = mentions.filter(function (mention, index, arr) {
+        return message.includes("@".concat(mention.username)) &&
+            arr.findIndex(function (item) { return item.username === mention.username; }) === index;
+    });
+    var body = activeMentions.reduce(function (nextMessage, mention, index) {
+        var mentionRegex = new RegExp("@".concat(escapeRegExp(mention.username), "\\b"), 'g');
+        return nextMessage.replace(mentionRegex, "{{ ".concat(index, " }}"));
+    }, message);
+    return {
+        body: body,
+        mentions: activeMentions,
+    };
+};
+export var getMentionCandidate = function (value, cursorPosition) {
+    var _a;
+    var beforeCursor = value.slice(0, cursorPosition);
+    var match = beforeCursor.match(/(^|\s)@([\w.]*)$/);
+    if (!match || match.index === undefined)
+        return null;
+    var prefixLength = ((_a = match[1]) === null || _a === void 0 ? void 0 : _a.length) || 0;
+    return {
+        query: match[2] || '',
+        start: match.index + prefixLength,
+        end: cursorPosition,
+    };
+};
+//# sourceMappingURL=chatterMentions.js.map

package/dist/components/core/chatter/chatterMentions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatterMentions.js","sourceRoot":"","sources":["../../../../src/components/core/chatter/chatterMentions.ts"],"names":[],"mappings":"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","sourcesContent":["export interface ChatterMention {\n    username: string;\n    display_name: string;\n    id: string;\n}\n\nexport const parseMessageBodyMentions = (value: unknown): ChatterMention[] => {\n    if (!value) return [];\n    if (Array.isArray(value)) return value as ChatterMention[];\n    if (typeof value !== 'string') return [];\n\n    try {\n        const parsed = JSON.parse(value);\n        return Array.isArray(parsed) ? parsed : [];\n    } catch {\n        return [];\n    }\n};\n\nexport const renderMessageBodyMentions = (messageBody: string | null | undefined, messageBodyMentions: unknown) => {\n    const mentions = parseMessageBodyMentions(messageBodyMentions);\n    if (!messageBody || mentions.length === 0) return messageBody;\n\n    return mentions.reduce((nextMessage, mention, index) => (\n        nextMessage.replace(new RegExp(`\\\\{\\\\{\\\\s*${index}\\\\s*\\\\}\\\\}`, 'g'), `@${mention.username}`)\n    ), messageBody);\n};\n\nconst escapeRegExp = (value: string) => value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n\nexport const buildMessageBodyWithMentionTokens = (message: string, mentions: ChatterMention[]) => {\n    const activeMentions = mentions.filter((mention, index, arr) =>\n        message.includes(`@${mention.username}`) &&\n        arr.findIndex(item => item.username === mention.username) === index\n    );\n\n    const body = activeMentions.reduce((nextMessage, mention, index) => {\n        const mentionRegex = new RegExp(`@${escapeRegExp(mention.username)}\\\\b`, 'g');\n        return nextMessage.replace(mentionRegex, `{{ ${index} }}`);\n    }, message);\n\n    return {\n        body,\n        mentions: activeMentions,\n    };\n};\n\nexport const getMentionCandidate = (value: string, cursorPosition: number) => {\n    const beforeCursor = value.slice(0, cursorPosition);\n    const match = beforeCursor.match(/(^|\\s)@([\\w.]*)$/);\n    if (!match || match.index === undefined) return null;\n\n    const prefixLength = match[1]?.length || 0;\n    return {\n        query: match[2] || '',\n        start: match.index + prefixLength,\n        end: cursorPosition,\n    };\n};\n"]}