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

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

@@ -4,6 +4,9 @@ import { useEffect, useState, useRef } from 'react'
 import { ERROR_MESSAGES } from '../../../constants/error-messages'
 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,9 +22,27 @@ export const SolidMessageComposer = ({ type, modelSingularName, refetch, id, onC
     const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
 
     const fileInputRef = useRef<HTMLInputElement>(null);
+    const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
     // const { data: viewLayoutData } = useGetSolidViewLayoutQuery(null);
     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) {
@@ -35,11 +56,15 @@ 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('messageSubType', "note");
-            formData.append('messageBody', message);
+            formData.append('messageBody', messageBody.body);
             formData.append('coModelEntityId', id);
             formData.append('coModelName', modelSingularName);
+            if (messageBody.mentions.length > 0) {
+                formData.append('messageBodyMentions', JSON.stringify(messageBody.mentions));
+            }
 
             if (modelUserKey) formData.append('modelUserKey', modelUserKey);
             selectedFiles.forEach((file) => {
@@ -49,12 +74,30 @@ export const SolidMessageComposer = ({ type, modelSingularName, refetch, id, onC
             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()
@@ -98,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
@@ -140,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"]}

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

@@ -0,0 +1,59 @@
+export interface ChatterMention {
+    username: string;
+    display_name: string;
+    id: string;
+}
+
+export const parseMessageBodyMentions = (value: unknown): ChatterMention[] => {
+    if (!value) return [];
+    if (Array.isArray(value)) return value as ChatterMention[];
+    if (typeof value !== 'string') return [];
+
+    try {
+        const parsed = JSON.parse(value);
+        return Array.isArray(parsed) ? parsed : [];
+    } catch {
+        return [];
+    }
+};
+
+export const renderMessageBodyMentions = (messageBody: string | null | undefined, messageBodyMentions: unknown) => {
+    const mentions = parseMessageBodyMentions(messageBodyMentions);
+    if (!messageBody || mentions.length === 0) return messageBody;
+
+    return mentions.reduce((nextMessage, mention, index) => (
+        nextMessage.replace(new RegExp(`\\{\\{\\s*${index}\\s*\\}\\}`, 'g'), `@${mention.username}`)
+    ), messageBody);
+};
+
+const escapeRegExp = (value: string) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+export const buildMessageBodyWithMentionTokens = (message: string, mentions: ChatterMention[]) => {
+    const activeMentions = mentions.filter((mention, index, arr) =>
+        message.includes(`@${mention.username}`) &&
+        arr.findIndex(item => item.username === mention.username) === index
+    );
+
+    const body = activeMentions.reduce((nextMessage, mention, index) => {
+        const mentionRegex = new RegExp(`@${escapeRegExp(mention.username)}\\b`, 'g');
+        return nextMessage.replace(mentionRegex, `{{ ${index} }}`);
+    }, message);
+
+    return {
+        body,
+        mentions: activeMentions,
+    };
+};
+
+export const getMentionCandidate = (value: string, cursorPosition: number) => {
+    const beforeCursor = value.slice(0, cursorPosition);
+    const match = beforeCursor.match(/(^|\s)@([\w.]*)$/);
+    if (!match || match.index === undefined) return null;
+
+    const prefixLength = match[1]?.length || 0;
+    return {
+        query: match[2] || '',
+        start: match.index + prefixLength,
+        end: cursorPosition,
+    };
+};

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

@@ -0,0 +1,26 @@
+import { type ChangeEvent, type KeyboardEvent, type MouseEvent, type RefObject } from 'react';
+import { ChatterMention } from './chatterMentions';
+interface UseChatterMentionsProps {
+    value: string;
+    onChange: (value: string) => void;
+    textareaRef: RefObject<HTMLTextAreaElement | null>;
+}
+export declare const useChatterMentions: ({ value, onChange, textareaRef }: UseChatterMentionsProps) => {
+    mentions: ChatterMention[];
+    setMentions: import("react").Dispatch<import("react").SetStateAction<ChatterMention[]>>;
+    mentionRange: {
+        start: number;
+        end: number;
+    } | null;
+    mentionSuggestions: any[];
+    activeMentionIndex: number;
+    isFetchingMentionUsers: boolean;
+    handleMentionTextChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+    handleMentionKeyDown: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+    handleMentionKeyUp: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+    handleMentionClick: (event: MouseEvent<HTMLTextAreaElement>) => void;
+    handleSelectMention: (user: any) => void;
+    resetMentions: (nextMentions?: ChatterMention[]) => void;
+};
+export {};
+//# sourceMappingURL=useChatterMentions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChatterMentions.d.ts","sourceRoot":"","sources":["../../../../src/components/core/chatter/useChatterMentions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAEnH,OAAO,EAAE,cAAc,EAAuB,MAAM,mBAAmB,CAAC;AAExE,UAAU,uBAAuB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,kBAAkB,qCAAsC,uBAAuB;;;;eAG9B,MAAM;aAAO,MAAM;;;;;qCAuBrC,YAAY,mBAAmB,CAAC;kCAMnC,cAAc,mBAAmB,CAAC;gCAmCpC,cAAc,mBAAmB,CAAC;gCAMlC,WAAW,mBAAmB,CAAC;gCAI/B,GAAG;mCA4BD,cAAc,EAAE;CA4CxD,CAAC"}

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

@@ -0,0 +1,204 @@
+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;
+    return g = { next: verb(0), "throw": verb(1), "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 };
+    }
+};
+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 { useEffect, useState } from 'react';
+import { useLazyGetusersQuery } from '../../../redux/api/userApi';
+import { getMentionCandidate } from './chatterMentions';
+export var useChatterMentions = function (_a) {
+    var value = _a.value, onChange = _a.onChange, textareaRef = _a.textareaRef;
+    var _b = useState([]), mentions = _b[0], setMentions = _b[1];
+    var _c = useState(''), mentionQuery = _c[0], setMentionQuery = _c[1];
+    var _d = useState(null), mentionRange = _d[0], setMentionRange = _d[1];
+    var _e = useState([]), mentionSuggestions = _e[0], setMentionSuggestions = _e[1];
+    var _f = useState(0), activeMentionIndex = _f[0], setActiveMentionIndex = _f[1];
+    var _g = useLazyGetusersQuery(), getUsers = _g[0], isFetchingMentionUsers = _g[1].isFetching;
+    var closeMentionMenu = function () {
+        setMentionRange(null);
+        setMentionQuery('');
+        setMentionSuggestions([]);
+        setActiveMentionIndex(0);
+    };
+    var updateMentionState = function (nextValue, cursorPosition) {
+        var candidate = getMentionCandidate(nextValue, cursorPosition);
+        if (!candidate) {
+            closeMentionMenu();
+            return;
+        }
+        setMentionRange({ start: candidate.start, end: candidate.end });
+        setMentionQuery(candidate.query);
+    };
+    var handleMentionTextChange = function (event) {
+        var _a;
+        var nextValue = event.target.value;
+        onChange(nextValue);
+        updateMentionState(nextValue, (_a = event.target.selectionStart) !== null && _a !== void 0 ? _a : nextValue.length);
+    };
+    var handleMentionKeyDown = function (event) {
+        if (!mentionRange)
+            return;
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            setActiveMentionIndex(function (prev) {
+                if (mentionSuggestions.length === 0)
+                    return 0;
+                return (prev + 1) % mentionSuggestions.length;
+            });
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            setActiveMentionIndex(function (prev) {
+                if (mentionSuggestions.length === 0)
+                    return 0;
+                return (prev - 1 + mentionSuggestions.length) % mentionSuggestions.length;
+            });
+            return;
+        }
+        if (event.key === 'Enter' || event.key === 'Tab') {
+            if (mentionSuggestions[activeMentionIndex]) {
+                event.preventDefault();
+                handleSelectMention(mentionSuggestions[activeMentionIndex]);
+            }
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            closeMentionMenu();
+        }
+    };
+    var handleMentionKeyUp = function (event) {
+        var _a;
+        if (['ArrowDown', 'ArrowUp', 'Enter', 'Tab', 'Escape'].includes(event.key))
+            return;
+        var target = event.currentTarget;
+        updateMentionState(target.value, (_a = target.selectionStart) !== null && _a !== void 0 ? _a : target.value.length);
+    };
+    var handleMentionClick = function (event) {
+        var _a;
+        updateMentionState(event.currentTarget.value, (_a = event.currentTarget.selectionStart) !== null && _a !== void 0 ? _a : event.currentTarget.value.length);
+    };
+    var handleSelectMention = function (user) {
+        if (!mentionRange)
+            return;
+        var username = user === null || user === void 0 ? void 0 : user.username;
+        if (!username)
+            return;
+        var mention = {
+            username: username,
+            display_name: (user === null || user === void 0 ? void 0 : user.fullName) || username,
+            id: String(user === null || user === void 0 ? void 0 : user.id),
+        };
+        var mentionText = "@".concat(mention.username);
+        var nextValue = "".concat(value.slice(0, mentionRange.start)).concat(mentionText, " ").concat(value.slice(mentionRange.end));
+        var nextCursorPosition = mentionRange.start + mentionText.length + 1;
+        onChange(nextValue);
+        setMentions(function (prev) { return (prev.some(function (item) { return item.id === mention.id || item.username === mention.username; })
+            ? prev
+            : __spreadArray(__spreadArray([], prev, true), [mention], false)); });
+        closeMentionMenu();
+        window.requestAnimationFrame(function () {
+            var _a, _b;
+            (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = textareaRef.current) === null || _b === void 0 ? void 0 : _b.setSelectionRange(nextCursorPosition, nextCursorPosition);
+        });
+    };
+    var resetMentions = function (nextMentions) {
+        if (nextMentions === void 0) { nextMentions = []; }
+        setMentions(nextMentions);
+        closeMentionMenu();
+    };
+    useEffect(function () {
+        if (!mentionRange)
+            return;
+        var isActive = true;
+        var timeout = window.setTimeout(function () { return __awaiter(void 0, void 0, void 0, function () {
+            var encodedQuery, queryString, response, error_1;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 2, , 3]);
+                        encodedQuery = encodeURIComponent(mentionQuery);
+                        queryString = mentionQuery
+                            ? "filters[username][$containsi]=".concat(encodedQuery, "&limit=8")
+                            : 'limit=8';
+                        return [4 /*yield*/, getUsers(queryString).unwrap()];
+                    case 1:
+                        response = _b.sent();
+                        if (!isActive)
+                            return [2 /*return*/];
+                        setMentionSuggestions(((_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.records) || []);
+                        setActiveMentionIndex(0);
+                        return [3 /*break*/, 3];
+                    case 2:
+                        error_1 = _b.sent();
+                        if (isActive)
+                            setMentionSuggestions([]);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); }, 180);
+        return function () {
+            isActive = false;
+            window.clearTimeout(timeout);
+        };
+    }, [mentionQuery, mentionRange, getUsers]);
+    return {
+        mentions: mentions,
+        setMentions: setMentions,
+        mentionRange: mentionRange,
+        mentionSuggestions: mentionSuggestions,
+        activeMentionIndex: activeMentionIndex,
+        isFetchingMentionUsers: isFetchingMentionUsers,
+        handleMentionTextChange: handleMentionTextChange,
+        handleMentionKeyDown: handleMentionKeyDown,
+        handleMentionKeyUp: handleMentionKeyUp,
+        handleMentionClick: handleMentionClick,
+        handleSelectMention: handleSelectMention,
+        resetMentions: resetMentions,
+    };
+};
+//# sourceMappingURL=useChatterMentions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChatterMentions.js","sourceRoot":"","sources":["../../../../src/components/core/chatter/useChatterMentions.ts"],"names":[],"mappings":"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","sourcesContent":["import { type ChangeEvent, type KeyboardEvent, type MouseEvent, type RefObject, useEffect, useState } from 'react';\nimport { useLazyGetusersQuery } from '../../../redux/api/userApi';\nimport { ChatterMention, getMentionCandidate } from './chatterMentions';\n\ninterface UseChatterMentionsProps {\n    value: string;\n    onChange: (value: string) => void;\n    textareaRef: RefObject<HTMLTextAreaElement | null>;\n}\n\nexport const useChatterMentions = ({ value, onChange, textareaRef }: UseChatterMentionsProps) => {\n    const [mentions, setMentions] = useState<ChatterMention[]>([]);\n    const [mentionQuery, setMentionQuery] = useState('');\n    const [mentionRange, setMentionRange] = useState<{ start: number; end: number } | null>(null);\n    const [mentionSuggestions, setMentionSuggestions] = useState<any[]>([]);\n    const [activeMentionIndex, setActiveMentionIndex] = useState(0);\n    const [getUsers, { isFetching: isFetchingMentionUsers }] = useLazyGetusersQuery();\n\n    const closeMentionMenu = () => {\n        setMentionRange(null);\n        setMentionQuery('');\n        setMentionSuggestions([]);\n        setActiveMentionIndex(0);\n    };\n\n    const updateMentionState = (nextValue: string, cursorPosition: number) => {\n        const candidate = getMentionCandidate(nextValue, cursorPosition);\n        if (!candidate) {\n            closeMentionMenu();\n            return;\n        }\n\n        setMentionRange({ start: candidate.start, end: candidate.end });\n        setMentionQuery(candidate.query);\n    };\n\n    const handleMentionTextChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n        const nextValue = event.target.value;\n        onChange(nextValue);\n        updateMentionState(nextValue, event.target.selectionStart ?? nextValue.length);\n    };\n\n    const handleMentionKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n        if (!mentionRange) return;\n\n        if (event.key === 'ArrowDown') {\n            event.preventDefault();\n            setActiveMentionIndex(prev => {\n                if (mentionSuggestions.length === 0) return 0;\n                return (prev + 1) % mentionSuggestions.length;\n            });\n            return;\n        }\n\n        if (event.key === 'ArrowUp') {\n            event.preventDefault();\n            setActiveMentionIndex(prev => {\n                if (mentionSuggestions.length === 0) return 0;\n                return (prev - 1 + mentionSuggestions.length) % mentionSuggestions.length;\n            });\n            return;\n        }\n\n        if (event.key === 'Enter' || event.key === 'Tab') {\n            if (mentionSuggestions[activeMentionIndex]) {\n                event.preventDefault();\n                handleSelectMention(mentionSuggestions[activeMentionIndex]);\n            }\n            return;\n        }\n\n        if (event.key === 'Escape') {\n            event.preventDefault();\n            closeMentionMenu();\n        }\n    };\n\n    const handleMentionKeyUp = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n        if (['ArrowDown', 'ArrowUp', 'Enter', 'Tab', 'Escape'].includes(event.key)) return;\n        const target = event.currentTarget;\n        updateMentionState(target.value, target.selectionStart ?? target.value.length);\n    };\n\n    const handleMentionClick = (event: MouseEvent<HTMLTextAreaElement>) => {\n        updateMentionState(event.currentTarget.value, event.currentTarget.selectionStart ?? event.currentTarget.value.length);\n    };\n\n    const handleSelectMention = (user: any) => {\n        if (!mentionRange) return;\n        const username = user?.username;\n        if (!username) return;\n\n        const mention: ChatterMention = {\n            username,\n            display_name: user?.fullName || username,\n            id: String(user?.id),\n        };\n        const mentionText = `@${mention.username}`;\n        const nextValue = `${value.slice(0, mentionRange.start)}${mentionText} ${value.slice(mentionRange.end)}`;\n        const nextCursorPosition = mentionRange.start + mentionText.length + 1;\n\n        onChange(nextValue);\n        setMentions(prev => (\n            prev.some(item => item.id === mention.id || item.username === mention.username)\n                ? prev\n                : [...prev, mention]\n        ));\n        closeMentionMenu();\n\n        window.requestAnimationFrame(() => {\n            textareaRef.current?.focus();\n            textareaRef.current?.setSelectionRange(nextCursorPosition, nextCursorPosition);\n        });\n    };\n\n    const resetMentions = (nextMentions: ChatterMention[] = []) => {\n        setMentions(nextMentions);\n        closeMentionMenu();\n    };\n\n    useEffect(() => {\n        if (!mentionRange) return;\n\n        let isActive = true;\n        const timeout = window.setTimeout(async () => {\n            try {\n                const encodedQuery = encodeURIComponent(mentionQuery);\n                const queryString = mentionQuery\n                    ? `filters[username][$containsi]=${encodedQuery}&limit=8`\n                    : 'limit=8';\n                const response = await getUsers(queryString).unwrap();\n                if (!isActive) return;\n                setMentionSuggestions(response?.data?.records || []);\n                setActiveMentionIndex(0);\n            } catch (error) {\n                if (isActive) setMentionSuggestions([]);\n            }\n        }, 180);\n\n        return () => {\n            isActive = false;\n            window.clearTimeout(timeout);\n        };\n    }, [mentionQuery, mentionRange, getUsers]);\n\n    return {\n        mentions,\n        setMentions,\n        mentionRange,\n        mentionSuggestions,\n        activeMentionIndex,\n        isFetchingMentionUsers,\n        handleMentionTextChange,\n        handleMentionKeyDown,\n        handleMentionKeyUp,\n        handleMentionClick,\n        handleSelectMention,\n        resetMentions,\n    };\n};\n"]}