@solidxai/core-ui 0.1.9-beta.2 → 0.1.9-beta.20

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

@@ -1,18 +1,20 @@
 
 import { getTextColor, stringToColor } from '../../../helpers/getRandomColors'
 import Image from "../../common/Image"
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import styles from './chatter.module.css'
 import { SolidChatterCustomMessage } from './SolidChatterCustomMessage'
 import { SolidChatterAuditMessage } from './SolidChatterAuditMessage'
-import { Check, GitBranch, MessageSquare } from 'lucide-react'
-import { SolidButton, SolidLightbox, SolidTag, SolidTooltip, SolidTooltipContent, SolidTooltipTrigger, SolidIcon, type SolidIconName } from '../../shad-cn-ui'
+import { Check, GitBranch, MessageSquare, Paperclip, Pencil, Trash2, X } from 'lucide-react'
+import { SolidButton, SolidLightbox, SolidTag, SolidTooltip, SolidTooltipContent, SolidTooltipTrigger, SolidIcon, SolidTextarea, type SolidIconName } from '../../shad-cn-ui'
 import type { SolidLightboxSlide } from '../../shad-cn-ui/SolidLightbox'
-import { usePatchChatterMessageMutation } from '../../../redux/api/solidChatterMessageApi'
+import { usePatchChatterMessageMutation, useUpdateChatterNoteMessageMutation } from '../../../redux/api/solidChatterMessageApi'
+import { useSession } from '../../../hooks/useSession'
 
 interface Props {
     messageId?: number | string,
     user: string,
+    userId?: number,
     messageType?: string,
     message?: any,
     time?: string,
@@ -54,11 +56,22 @@ const getFileIcon = (mimeType: string): SolidIconName => {
 };
 
 export const SolidChatterMessageBox = (props: Props) => {
-    const { messageId, user, messageType, message, time, auditRecord, media, messageSubType, status, modelDisplayName, modelUserKey, onRefresh } = props;
+    const { messageId, user, userId, messageType, message, 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);
+    const [isEditing, setIsEditing] = useState(false);
+    const [localMessage, setLocalMessage] = useState(message ?? '');
+    const [editedMessage, setEditedMessage] = useState(message ?? '');
+    const [hasPendingOptimisticUpdate, setHasPendingOptimisticUpdate] = useState(false);
+    const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+    const [removedAttachmentIds, setRemovedAttachmentIds] = useState<number[]>([]);
+    const [optimisticRemovedAttachmentIds, setOptimisticRemovedAttachmentIds] = useState<number[]>([]);
+    const [hasPendingOptimisticAttachmentUpdate, setHasPendingOptimisticAttachmentUpdate] = useState(false);
+    const fileInputRef = useRef<HTMLInputElement>(null);
     const [patchChatterMessage, { isLoading: isUpdatingTaskStatus }] = usePatchChatterMessageMutation();
+    const [updateChatterNoteMessage, { isLoading: isUpdatingNote }] = useUpdateChatterNoteMessageMutation();
+    const { data: session } = useSession();
 
     const avatarStyle = useMemo(() => {
         const bg = stringToColor(user)
@@ -116,6 +129,56 @@ export const SolidChatterMessageBox = (props: Props) => {
 
     const isTaskMessage = messageSubType === 'task';
     const isTaskCompleted = (taskStatus ?? '').toLowerCase() === 'completed';
+    const isCustomMessage = messageType === 'custom';
+    const isEditableSubtype = messageSubType === 'note';
+    const isCurrentUserAuthor = !!(session?.user?.id && userId && Number(session.user.id) === Number(userId));
+    const canEditNote = Boolean(messageId && isCustomMessage && isEditableSubtype && isCurrentUserAuthor);
+
+    useEffect(() => {
+        const incomingMessage = message ?? '';
+
+        // Keep optimistic message visible until server data catches up.
+        if (hasPendingOptimisticUpdate && incomingMessage !== localMessage) {
+            return;
+        }
+
+        if (hasPendingOptimisticUpdate && incomingMessage === localMessage) {
+            setHasPendingOptimisticUpdate(false);
+        }
+
+        setLocalMessage(incomingMessage);
+        if (!isEditing) {
+            setEditedMessage(incomingMessage);
+        }
+    }, [message, isEditing, hasPendingOptimisticUpdate, localMessage]);
+
+    useEffect(() => {
+        if (!isEditing) {
+            setSelectedFiles([]);
+            if (!hasPendingOptimisticAttachmentUpdate) {
+                setRemovedAttachmentIds([]);
+            }
+        }
+    }, [isEditing, hasPendingOptimisticAttachmentUpdate]);
+
+    useEffect(() => {
+        if (!hasPendingOptimisticAttachmentUpdate) return;
+        const latestAttachmentIds = (media?.messageAttachments || []).map((attachment) => attachment.id);
+        const stillPresent = optimisticRemovedAttachmentIds.some((id) => latestAttachmentIds.includes(id));
+        if (!stillPresent) {
+            setHasPendingOptimisticAttachmentUpdate(false);
+            setOptimisticRemovedAttachmentIds([]);
+            setRemovedAttachmentIds([]);
+        }
+    }, [media?.messageAttachments, hasPendingOptimisticAttachmentUpdate, optimisticRemovedAttachmentIds]);
+
+    const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (event.target.files) {
+            const files = Array.from(event.target.files);
+            setSelectedFiles(prev => [...prev, ...files]);
+            event.target.value = '';
+        }
+    };
 
     const handleMarkTaskDone = async () => {
         if (!messageId || isUpdatingTaskStatus) return;
@@ -128,6 +191,72 @@ export const SolidChatterMessageBox = (props: Props) => {
         }
     };
 
+    const handleEditSave = async () => {
+        if (!messageId || isUpdatingNote) return;
+        const trimmedMessage = editedMessage?.trim();
+        const hasBodyChange = trimmedMessage && trimmedMessage !== (message ?? '').trim();
+        const hasAttachmentOps = removedAttachmentIds.length > 0 || selectedFiles.length > 0;
+        if (!hasBodyChange && !hasAttachmentOps) return;
+        if (!trimmedMessage) return;
+        const nextMessage = trimmedMessage;
+        // Optimistic local update to remove UI lag before refetch resolves.
+        setLocalMessage(nextMessage);
+        setHasPendingOptimisticUpdate(true);
+        if (removedAttachmentIds.length > 0) {
+            setOptimisticRemovedAttachmentIds((prev) => Array.from(new Set([...prev, ...removedAttachmentIds])));
+            setHasPendingOptimisticAttachmentUpdate(true);
+        }
+        setIsEditing(false);
+        try {
+            const formData = new FormData();
+            formData.append('messageBody', nextMessage);
+            if (removedAttachmentIds.length > 0) {
+                formData.append('removeAttachmentIds', removedAttachmentIds.join(','));
+            }
+            selectedFiles.forEach((file) => formData.append('messageAttachments', file));
+
+            await updateChatterNoteMessage({ id: messageId, data: formData }).unwrap();
+            onRefresh?.();
+        } catch (e) {
+            // Revert optimistic update on failure.
+            setLocalMessage(message ?? '');
+            setHasPendingOptimisticUpdate(false);
+            setHasPendingOptimisticAttachmentUpdate(false);
+            setOptimisticRemovedAttachmentIds([]);
+            setIsEditing(true);
+        }
+    };
+
+    const handleCancelEdit = () => {
+        setEditedMessage(localMessage ?? '');
+        setSelectedFiles([]);
+        setRemovedAttachmentIds([]);
+        setIsEditing(false);
+    };
+
+    const formatFileSize = (size: number) => {
+        if (!size) return '';
+        return size >= 1024 * 1024
+            ? `${(size / (1024 * 1024)).toFixed(1)} MB`
+            : `${(size / 1024).toFixed(1)} KB`;
+    };
+
+    const hiddenAttachmentIds = new Set([
+        ...removedAttachmentIds,
+        ...optimisticRemovedAttachmentIds,
+    ]);
+    const visibleAttachments = (media?.messageAttachments || []).filter(
+        (attachment) => !hiddenAttachmentIds.has(attachment.id)
+    );
+
+    const toggleRemoveAttachment = (attachmentId: number) => {
+        setRemovedAttachmentIds(prev =>
+            prev.includes(attachmentId)
+                ? prev.filter(id => id !== attachmentId)
+                : [...prev, attachmentId]
+        );
+    };
+
     return (
         <div className={styles.solidChatterMessageBox}>
             <div className={styles.solidChatterMessageCard}>
@@ -153,7 +282,21 @@ export const SolidChatterMessageBox = (props: Props) => {
                                     </SolidTooltipContent>
                                 </SolidTooltip>
                             </div>
-                            <span className={styles.solidChatterTime}>{time}</span>
+                            <div className='flex align-items-center gap-2'>
+                                {canEditNote && !isEditing && (
+                                    <SolidButton
+                                        type="button"
+                                        size="sm"
+                                        variant="ghost"
+                                        className="solid-icon-button"
+                                        leftIcon={<Pencil size={12} />}
+                                        onClick={() => setIsEditing(true)}
+                                        aria-label="Edit note"
+                                        title="Edit note"
+                                    />
+                                )}
+                                <span className={styles.solidChatterTime}>{time}</span>
+                            </div>
                         </div>
                         {modelDisplayName && (
                             <p className={`${styles.solidChatterMeta} m-0`}>
@@ -161,17 +304,115 @@ export const SolidChatterMessageBox = (props: Props) => {
                                 {modelUserKey && <> · <span className='font-medium'>{modelUserKey}</span></>}
                             </p>
                         )}
-                        {message && (
+                        {localMessage && !isEditing && (
                             <div className={styles.solidMessageWrapper}>
-                                {renderMessageContent()}
+                                {messageType === 'audit'
+                                    ? <SolidChatterAuditMessage auditRecord={auditRecord} />
+                                    : <SolidChatterCustomMessage message={localMessage} />}
+                            </div>
+                        )}
+                        {isEditing && (
+                            <div className='flex flex-column gap-2'>
+                                <SolidTextarea
+                                    value={editedMessage}
+                                    onChange={(e) => setEditedMessage(e.target.value)}
+                                    rows={4}
+                                    className="w-full py-2"
+                                />
+                                <div className='flex flex-column gap-2'>
+                                    <input
+                                        ref={fileInputRef}
+                                        id={`note-edit-file-${messageId}`}
+                                        type="file"
+                                        multiple
+                                        onChange={handleFileSelect}
+                                        style={{ display: 'none' }}
+                                    />
+                                    {selectedFiles.length > 0 && (
+                                        <div className='flex flex-column gap-1'>
+                                            {selectedFiles.map((file, index) => (
+                                                <div key={`${file.name}-${index}`} className='flex align-items-center justify-content-between text-xs'>
+                                                    <span>{file.name} ({formatFileSize(file.size)})</span>
+                                                    <SolidButton
+                                                        type="button"
+                                                        size="sm"
+                                                        variant="ghost"
+                                                        className='solid-icon-button'
+                                                        leftIcon={<X size={12} />}
+                                                        onClick={() => setSelectedFiles(prev => prev.filter((_, i) => i !== index))}
+                                                        aria-label={`Remove ${file.name}`}
+                                                    />
+                                                </div>
+                                            ))}
+                                        </div>
+                                    )}
+                                </div>
+                                <div className='flex align-items-center justify-content-between gap-2 flex-wrap'>
+                                    <div className='flex align-items-center gap-2'>
+                                        <SolidButton
+                                            type="button"
+                                            size="sm"
+                                            variant="ghost"
+                                            className="solid-icon-button"
+                                            leftIcon={<Paperclip size={14} />}
+                                            onClick={() => fileInputRef.current?.click()}
+                                            aria-label="Attach files"
+                                            title="Attach files"
+                                        />
+                                        <span className='text-xs text-color-secondary'>Attach file</span>
+                                    </div>
+                                    <div className='flex align-items-center justify-content-end gap-2'>
+                                    <SolidButton
+                                        type="button"
+                                        size="sm"
+                                        variant="outline"
+                                        leftIcon={<X size={12} />}
+                                        onClick={handleCancelEdit}
+                                    >
+                                        Cancel
+                                    </SolidButton>
+                                    <SolidButton
+                                        type="button"
+                                        size="sm"
+                                        variant="primary"
+                                        loading={isUpdatingNote}
+                                        leftIcon={<Check size={12} />}
+                                        onClick={handleEditSave}
+                                        disabled={!editedMessage?.trim() || (removedAttachmentIds.length === 0 && selectedFiles.length === 0 && editedMessage.trim() === (message ?? '').trim())}
+                                    >
+                                        Save
+                                    </SolidButton>
+                                    </div>
+                                </div>
                             </div>
                         )}
-                        {media?.messageAttachments && media.messageAttachments.length > 0 && (
+                        {visibleAttachments.length > 0 && (
                             <div className={styles.solidChatterAttachments}>
-                                {media.messageAttachments.map((attachment) => {
+                                {visibleAttachments.map((attachment) => {
                                     const isImage = attachment.mimeType.startsWith('image/');
                                     return (
-                                        <div key={attachment.id} className={styles.solidChatterAttachment}>
+                                        <div key={attachment.id} className={styles.solidChatterAttachment} style={{ position: 'relative' }}>
+                                            {isEditing && canEditNote && (
+                                                <SolidButton
+                                                    type="button"
+                                                    size="sm"
+                                                    variant="ghost"
+                                                    className="solid-icon-button"
+                                                    leftIcon={<Trash2 size={12} color="#dc2626" />}
+                                                    onClick={() => toggleRemoveAttachment(attachment.id)}
+                                                    aria-label={`Remove ${attachment.originalFileName}`}
+                                                    title={`Remove ${attachment.originalFileName}`}
+                                                    style={{
+                                                        position: 'absolute',
+                                                        top: -8,
+                                                        right: -8,
+                                                        zIndex: 2,
+                                                        background: '#fff',
+                                                        border: '1px solid #fecaca',
+                                                        borderRadius: '999px',
+                                                    }}
+                                                />
+                                            )}
                                             {isImage ? (
                                                 <div
                                                     className='cursor-pointer'

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,4CA2K/H,CAAA"}
+{"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"}

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

@@ -84,7 +84,7 @@ export var SolidMessageComposer = function (_a) {
                     _a.trys.push([1, 3, , 4]);
                     formData_1 = new FormData();
                     formData_1.append('messageType', "custom");
-                    formData_1.append('messageSubType', "custom");
+                    formData_1.append('messageSubType', "note");
                     formData_1.append('messageBody', message);
                     formData_1.append('coModelEntityId', id);
                     formData_1.append('coModelName', modelSingularName);
@@ -99,6 +99,7 @@ export var SolidMessageComposer = function (_a) {
                     _a.sent();
                     setMessage('');
                     setSelectedFiles([]);
+                    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
                     return [3 /*break*/, 4];
                 case 3:
                     error_1 = _a.sent();
@@ -120,7 +121,7 @@ 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-column gap-2 w-full"), children: [_jsx("div", { className: 'flex align-items-center justify-content-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-1", rows: 4 }), _jsxs("div", { className: 'flex align-items-center justify-content-between flex-wrap gap-2', children: [_jsxs("div", { className: 'flex align-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 align-items-center gap-2', children: [_jsx(SolidButton, { type: 'submit', size: 'sm', className: 'gap-2 solid-purple-button', variant: 'primary', loading: isLoading, children: type === 'email' ? 'Send' : 'Log' }), _jsx(SolidButton, { type: 'button', size: 'sm', variant: 'ghost', onClick: function () {
+    return (_jsxs("form", { className: styles.chatterMessageComposer, onSubmit: handleSubmit, children: [_jsxs("div", { className: "".concat(styles.solidMessageWrapper, " flex flex-column gap-2 w-full"), children: [_jsx("div", { className: 'flex align-items-center justify-content-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 align-items-center justify-content-between flex-wrap gap-2', children: [_jsxs("div", { className: 'flex align-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 align-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();

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', \"custom\");\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        } 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='flex align-items-center gap-1 text-sm mb-2'>\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-primary ${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-column gap-2 w-full`}>\n                <div className='flex align-items-center justify-content-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-1\"\n                    rows={4}\n                />\n                <div className='flex align-items-center justify-content-between flex-wrap gap-2'>\n                    <div className='flex align-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 align-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                        >\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 { 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='flex align-items-center gap-1 text-sm mb-2'>\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-primary ${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-column gap-2 w-full`}>\n                <div className='flex align-items-center justify-content-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 align-items-center justify-content-between flex-wrap gap-2'>\n                    <div className='flex align-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 align-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"]}

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

@@ -46,7 +46,7 @@ export const SolidMessageComposer = ({ type, modelSingularName, refetch, id, onC
         try {
             const formData = new FormData();
             formData.append('messageType', "custom");
-            formData.append('messageSubType', "custom");
+            formData.append('messageSubType', "note");
             formData.append('messageBody', message);
             formData.append('coModelEntityId', id);
             formData.append('coModelName', modelSingularName);
@@ -60,6 +60,7 @@ export const SolidMessageComposer = ({ type, modelSingularName, refetch, id, onC
             await createChatterMessage(formData).unwrap();
             setMessage('');
             setSelectedFiles([]);
+            onCancel?.();
         } catch (error) {
             console.error(ERROR_MESSAGES.FETCHING_MESSAGE, error);
         }
@@ -111,7 +112,7 @@ export const SolidMessageComposer = ({ type, modelSingularName, refetch, id, onC
                     value={message}
                     onChange={(e) => setMessage(e.target.value)}
                     placeholder={type === 'email' ? 'Send a message to followers' : 'Log an internal note.'}
-                    className="w-full p-1"
+                    className="w-full p-2"
                     rows={4}
                 />
                 <div className='flex align-items-center justify-content-between flex-wrap gap-2'>
@@ -142,6 +143,7 @@ export const SolidMessageComposer = ({ type, modelSingularName, refetch, id, onC
                             className='gap-2 solid-purple-button'
                             variant='primary'
                             loading={isLoading}
+                            disabled={!message.trim() && selectedFiles.length === 0}
                         >
                             {type === 'email' ? 'Send' : 'Log'}
                         </SolidButton>

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

@@ -1,5 +1,5 @@
 .chatterTitle {
-    padding: 0.2rem 0 0.55rem;
+    padding: 0.2rem 0 0.55rem 2.75rem;
     border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
 }
 

package/dist/components/core/common/FilterComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/core/common/FilterComponent.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEvF,oBAAY,cAAc;IACxB,IAAI,SAAS;IACb,UAAU,eAAe;CAC1B;AAED,oBAAY,cAAc;IACxB,GAAG,QAAQ;IACX,EAAE,OAAO;CACV;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,cAAc,CAAC;IACrB,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;CACpC;AAmKD,QAAA,MAAM,eAAe;;;;;;;6CAuMpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"FilterComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/core/common/FilterComponent.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEvF,oBAAY,cAAc;IACxB,IAAI,SAAS;IACb,UAAU,eAAe;CAC1B;AAED,oBAAY,cAAc;IACxB,GAAG,QAAQ;IACX,EAAE,OAAO;CACV;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,cAAc,CAAC;IACrB,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;CACpC;AAuKD,QAAA,MAAM,eAAe;;;;;;;6CAuMpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/core/common/FilterComponent.js

@@ -89,7 +89,7 @@ var FilterRuleComponent = function (_a) {
             });
         setFilteredFields(filtered);
     };
-    return (_jsxs("div", { className: 'solid-filter-rule-row', children: [_jsxs("div", { className: 'solid-filter-rule-main', children: [_jsx("div", { className: 'solid-filter-rule-field', children: _jsx("div", { className: 'solid-filter-control-wrap', children: _jsx(SolidAutocomplete, { value: fieldName.name, suggestions: filteredFields, completeMethod: searchFields, field: "name", dropdown: true, forceSelection // only values from list
+    return (_jsxs("div", { className: 'solid-filter-rule-row', children: [_jsxs("div", { className: 'solid-filter-rule-main', children: [_jsx("div", { className: 'solid-filter-rule-field', children: _jsx("div", { className: 'solid-filter-control-wrap', children: _jsx(SolidAutocomplete, { value: fieldName.name, suggestions: filteredFields, completeMethod: searchFields, field: "name", dropdown: true, portal: true, forceSelection // only values from list
                                 : true, placeholder: "Select Field", className: "w-full solid-filter-auto-complete-field solid-filter-compact-control", onChange: function (e) {
                                     setFieldName({ name: e.value }); // e.value will be an object or null
                                     if (e.value && typeof e.value === "object" && e.value.value) {
@@ -97,10 +97,12 @@ var FilterRuleComponent = function (_a) {
                                     }
                                     else {
                                         onChange(rule.id, 'fieldName', '');
+                                        onChange(rule.id, 'matchMode', null);
+                                        onChange(rule.id, 'value', '');
                                     }
                                 } }) }) }), _jsx("div", { className: 'solid-filter-rule-value', children: _jsx("div", { className: 'solid-filter-control-wrap', children: rule.fieldName ?
                                 _jsx(SolidFilterFields, { viewData: viewData, fieldMetadata: viewData.data.solidFieldsMetadata[rule.fieldName], onChange: onChange, index: rule.id, rule: rule })
-                                : _jsxs("div", { className: 'solid-filter-empty-pair', children: [_jsx(SolidInput, { disabled: true, value: rule.value || '', placeholder: "Operator", className: 'w-full solid-filter-compact-control' }), _jsx(SolidInput, { disabled: true, value: rule.value || '', placeholder: "Value", className: 'w-full solid-filter-compact-control' })] }) }) })] }), _jsxs("div", { className: 'solid-filter-rule-actions', children: [_jsx(SolidButton, { variant: "ghost", size: 'sm', onClick: function () { return onAddRule(rule.parentRule); }, className: 'solid-filter-action-btn solid-filter-action-icon-btn', children: _jsx(Plus, { size: 14 }) }), _jsx(SolidButton, { variant: "ghost", size: 'sm', onClick: function () { return onAddGroup(rule.id); }, className: 'solid-filter-action-btn solid-filter-action-icon-btn', children: _jsx(FolderPlus, { size: 14 }) }), _jsx(SolidButton, { variant: "ghost", size: 'sm', onClick: function () { return onDelete(rule.id); }, className: 'solid-filter-action-btn solid-filter-action-icon-btn is-danger', children: _jsx(Trash2, { size: 14 }) })] }), rule.children && rule.children.map(function (nestedRule) { return (_jsx("div", { className: 'nested-custom-filter', children: nestedRule.type === FilterRuleType.RULE
+                                : _jsxs("div", { className: 'solid-filter-empty-pair', children: [_jsx(SolidInput, { disabled: true, value: "", placeholder: "Operator", className: 'w-full solid-filter-compact-control' }), _jsx(SolidInput, { disabled: true, value: "", placeholder: "Value", className: 'w-full solid-filter-compact-control' })] }) }) })] }), _jsxs("div", { className: 'solid-filter-rule-actions', children: [_jsx(SolidButton, { variant: "ghost", size: 'sm', onClick: function () { return onAddRule(rule.parentRule); }, className: 'solid-filter-action-btn solid-filter-action-icon-btn', children: _jsx(Plus, { size: 14 }) }), _jsx(SolidButton, { variant: "ghost", size: 'sm', onClick: function () { return onAddGroup(rule.id); }, className: 'solid-filter-action-btn solid-filter-action-icon-btn', children: _jsx(FolderPlus, { size: 14 }) }), _jsx(SolidButton, { variant: "ghost", size: 'sm', onClick: function () { return onDelete(rule.id); }, className: 'solid-filter-action-btn solid-filter-action-icon-btn is-danger', children: _jsx(Trash2, { size: 14 }) })] }), rule.children && rule.children.map(function (nestedRule) { return (_jsx("div", { className: 'nested-custom-filter', children: nestedRule.type === FilterRuleType.RULE
                     ? _jsx(FilterRuleComponent, { viewData: viewData, fields: fields, rule: nestedRule, onChange: onChange, onAddRule: onAddRule, onAddGroup: onAddGroup, onDelete: onDelete, level: level + 1 }, nestedRule.id)
                     : _jsx(FilterGroupComponent, { viewData: viewData, fields: fields, group: nestedRule, onChange: onChange, onAddRule: onAddRule, onAddGroup: onAddGroup, onDelete: onDelete, level: level + 1 }, nestedRule.id) }, nestedRule.id)); })] }));
 };
@@ -110,7 +112,7 @@ var FilterGroupComponent = function (_a) {
     return (_jsxs("div", { className: 'primary-filter-fieldset solid-filter-group-shell', children: [_jsx("div", { className: "solid-filter-group-operator-wrap", children: _jsx(SolidSelect, { value: group.matchOperator, options: [
                         { label: "OR", value: FilterOperator.OR },
                         { label: "AND", value: FilterOperator.AND },
-                    ], placeholder: "Operator", className: "solid-filter-group-operator-select", onChange: function (event) { return onChange(group.id, 'matchOperator', event.value); } }) }), group.children && group.children.map(function (rule) { return (rule.type === FilterRuleType.RULE
+                    ], native: false, placeholder: "Operator", className: "solid-filter-group-operator-select", onChange: function (event) { return onChange(group.id, 'matchOperator', event.value); } }) }), group.children && group.children.map(function (rule) { return (rule.type === FilterRuleType.RULE
                 ? _jsx(FilterRuleComponent, { viewData: viewData, fields: fields, rule: rule, onChange: onChange, onAddRule: onAddRule, onAddGroup: onAddGroup, onDelete: onDelete, level: level + 1 }, rule.id)
                 : _jsx(FilterGroupComponent, { viewData: viewData, fields: fields, group: rule, onChange: onChange, onAddRule: onAddRule, onAddGroup: onAddGroup, onDelete: onDelete, level: level + 1 }, rule.id)); }), level === 0 &&
                 _jsxs(SolidButton, { variant: "ghost", size: 'sm', onClick: function () { return onAddRule(group.id); }, className: 'px-0 mt-2 solid-filter-add-condition-btn', children: [_jsx(Plus, { size: 14 }), "Add Condition"] })] }));