@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.4

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

@@ -1,12 +1,13 @@
 
 import { getTextColor, stringToColor } from '../../../helpers/getRandomColors'
 import Image from "../../common/Image"
-import { Avatar } from 'primereact/avatar'
-import { Dialog } from 'primereact/dialog'
 import { useMemo, useState } from 'react'
 import styles from './chatter.module.css'
 import { SolidChatterCustomMessage } from './SolidChatterCustomMessage'
 import { SolidChatterAuditMessage } from './SolidChatterAuditMessage'
+import { GitBranch, MessageSquare } from 'lucide-react'
+import { SolidLightbox, SolidTooltip, SolidTooltipContent, SolidTooltipTrigger, SolidIcon, type SolidIconName } from '../../shad-cn-ui'
+import type { SolidLightboxSlide } from '../../shad-cn-ui/SolidLightbox'
 
 interface Props {
     user: string,
@@ -28,40 +29,63 @@ interface Props {
     };
 }
 
-const getFileIcon = (mimeType: string) => {
+const getFileIcon = (mimeType: string): SolidIconName => {
     if (mimeType.startsWith('image/')) {
-        return 'pi pi-image';
+        return 'si-image';
     }
     switch (mimeType) {
         case 'application/pdf':
-            return 'pi pi-file-pdf';
+            return 'si-file-pdf';
         case 'application/vnd.ms-excel':
         case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
-            return 'pi pi-file-excel';
+            return 'si-file-excel';
         case 'application/msword':
         case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
-            return 'pi pi-file-word';
+            return 'si-file-word';
         case 'text/plain':
-            return 'pi pi-file';
+            return 'si-file';
         default:
-            return 'pi pi-file';
+            return 'si-file';
     }
 };
 
 export const SolidChatterMessageBox = (props: Props) => {
     const { user, messageType, message, time, auditRecord, media, messageSubType, modelDisplayName, modelUserKey } = props;
-    const [selectedImage, setSelectedImage] = useState<string | null>(null);
-    const [isImageDialogVisible, setIsImageDialogVisible] = useState(false);
+    const [lightboxSlides, setLightboxSlides] = useState<SolidLightboxSlide[]>([]);
+    const [openLightbox, setOpenLightbox] = useState(false);
 
     const avatarStyle = useMemo(() => {
         const bg = stringToColor(user)
         const color = getTextColor(bg)
-        return { backgroundColor: bg, color, height: 24, width: 24, fontSize: 10, fontWeight: 600 }
+        return { backgroundColor: bg, color }
     }, [user])
 
+    const initials = useMemo(() => {
+        if (!user) return "";
+        return user
+            .split(" ")
+            .map(part => part.charAt(0))
+            .filter(Boolean)
+            .slice(0, 2)
+            .join("")
+            .toUpperCase();
+    }, [user]);
+
     const handleImageClick = (url: string) => {
-        setSelectedImage(url);
-        setIsImageDialogVisible(true);
+        const imageAttachments = media?.messageAttachments?.filter(att => att.mimeType?.startsWith('image/')) || [];
+        if (imageAttachments.length === 0) return;
+
+        const startIndex = imageAttachments.findIndex(att => att._full_url === url);
+        const ordered = startIndex >= 0
+            ? [...imageAttachments.slice(startIndex), ...imageAttachments.slice(0, startIndex)]
+            : imageAttachments;
+
+        const slides: SolidLightboxSlide[] = ordered.map(att => ({
+            src: att._full_url
+        }));
+
+        setLightboxSlides(slides);
+        setOpenLightbox(true);
     };
 
     const renderMessageContent = () => {
@@ -74,90 +98,99 @@ export const SolidChatterMessageBox = (props: Props) => {
         }
     };
 
+    const messageLabel = messageType === 'audit'
+        ? (messageSubType === "audit_update"
+            ? "Updated"
+            : messageSubType === "audit_insert"
+                ? "Inserted"
+                : "Audit record")
+        : "Internal note";
+
+    const TypeIcon = messageType === 'audit' ? GitBranch : MessageSquare;
+
     return (
         <div className={styles.solidChatterMessageBox}>
-            <div className='flex align-items-center'>
-                <div style={{ width: 32 }}>
-                    <Avatar label={user.charAt(0).toUpperCase()} style={avatarStyle} shape="circle" />
-                </div>
-                <div className='flex align-items-center justify-content-between' style={{ width: '100%' }}>
-                    <div className='text-sm'>
-                        <span className='font-bold'>{user}</span>
-                        <span className='ml-2' style={{ color: '#949494' }}>
-                            {messageType === 'audit' ? messageSubType === "audit_update"
-                                ? <>Updated {modelUserKey && <span style={{ fontStyle: 'italic', fontWeight: '600' }}>({modelUserKey})</span>}</>
-                                : messageSubType === "audit_insert"
-                                    ? <>Inserted {modelUserKey && <span style={{ fontStyle: 'italic', fontWeight: '600' }}>({modelUserKey})</span>}</>
-                                    : "Custom" : "Custom"}
-                        </span>
+            <div className={styles.solidChatterMessageCard}>
+                <div className={styles.solidChatterMessageLayout}>
+                    <div className={styles.solidChatterAvatar} style={avatarStyle}>
+                        {initials || user.charAt(0).toUpperCase()}
                     </div>
-                    {modelDisplayName && <span style={{ fontStyle: 'italic', fontWeight: '600' }}>{modelDisplayName}</span>}
-                </div>
-            </div>
-            <div className='flex align-items-center mt-1'>
-                <div style={{ width: 32 }}>
-                </div>
-                <div style={{ width: '100%' }}>
-                    <p className='mb-1 text-sm font-bold' style={{ color: '#949494' }}>
-                        {time}
-                    </p>
-                    {message && <div className={styles.solidMessageWrapper}>
-                        {renderMessageContent()}
-                    </div>}
-                    {media?.messageAttachments && media.messageAttachments.length > 0 && (
-                        <div className='flex flex-wrap gap-2 mt-2'>
-                            {media.messageAttachments.map((attachment) => {
-                                const isImage = attachment.mimeType.startsWith('image/');
-                                return (
-                                    <div key={attachment.id} className='flex align-items-center gap-2 bg-gray-100 p-2 rounded'>
-                                        {isImage ? (
-                                            <div
-                                                className='cursor-pointer'
-                                                onClick={() => handleImageClick(attachment._full_url)}
-                                            >
-                                                <Image
-                                                    src={encodeURI(attachment._full_url)}
-                                                    alt={attachment.originalFileName}
-                                                    width={50}
-                                                    height={50}
-                                                    className='rounded'
-                                                    style={{ objectFit: 'cover' }}
-                                                />
-                                            </div>
-                                        ) : (
-                                            <a
-                                                href={encodeURI(attachment._full_url)}
-                                                target="_blank"
-                                                rel="noopener noreferrer"
-                                                className='flex align-items-center gap-2 text-decoration-none'
+                    <div className={styles.solidChatterMessageContent}>
+                        <div className={styles.solidChatterMessageHeader}>
+                            <div className='flex align-items-center gap-2 flex-wrap'>
+                                <p className={styles.solidChatterUser}>{user}</p>
+                                <SolidTooltip>
+                                    <SolidTooltipTrigger asChild>
+                                        <span
+                                            className={`${styles.solidChatterBadge} ${messageType === 'audit' ? styles.audit : styles.custom}`}
+                                            aria-label={messageLabel}
+                                        >
+                                            <TypeIcon size={12} />
+                                        </span>
+                                    </SolidTooltipTrigger>
+                                    <SolidTooltipContent side="right">
+                                        {messageLabel}
+                                    </SolidTooltipContent>
+                                </SolidTooltip>
+                            </div>
+                            <span className={styles.solidChatterTime}>{time}</span>
+                        </div>
+                        {modelDisplayName && (
+                            <p className={`${styles.solidChatterMeta} m-0`}>
+                                {modelDisplayName}
+                                {modelUserKey && <> · <span className='font-medium'>{modelUserKey}</span></>}
+                            </p>
+                        )}
+                        {message && (
+                            <div className={styles.solidMessageWrapper}>
+                                {renderMessageContent()}
+                            </div>
+                        )}
+                        {media?.messageAttachments && media.messageAttachments.length > 0 && (
+                            <div className={styles.solidChatterAttachments}>
+                                {media.messageAttachments.map((attachment) => {
+                                    const isImage = attachment.mimeType.startsWith('image/');
+                                    return (
+                                        <div key={attachment.id} className={styles.solidChatterAttachment}>
+                                            {isImage ? (
+                                                <div
+                                                    className='cursor-pointer'
+                                                    onClick={() => handleImageClick(attachment._full_url)}
+                                                >
+                                                    <Image
+                                                        src={encodeURI(attachment._full_url)}
+                                                        alt={attachment.originalFileName}
+                                                        width={54}
+                                                        height={54}
+                                                        style={{ objectFit: 'cover' }}
+                                                    />
+                                                </div>
+                                            ) : (
+                                                <a
+                                                    href={encodeURI(attachment._full_url)}
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
+                                                className='flex align-items-center gap-2 text-decoration-none text-sm'
                                             >
-                                                <i className={getFileIcon(attachment.mimeType)} />
-                                                <span className='text-sm'>{attachment.originalFileName}</span>
+                                                <SolidIcon name={getFileIcon(attachment.mimeType)} aria-hidden />
+                                                <span>{attachment.originalFileName}</span>
                                             </a>
-                                        )}
-                                    </div>
-                                );
-                            })}
-                        </div>
-                    )}
+                                            )}
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        )}
+                    </div>
                 </div>
             </div>
-            <Dialog
-                visible={isImageDialogVisible}
-                onHide={() => setIsImageDialogVisible(false)}
-                className='w-9 '
-                modal
-            >
-                {selectedImage && (
-                    <Image
-                        src={selectedImage}
-                        alt="Preview"
-                        width={800}
-                        height={600}
-                        style={{ width: '100%', height: 'auto' }}
-                    />
-                )}
-            </Dialog>
+            {openLightbox && (
+                <SolidLightbox
+                    open={openLightbox}
+                    slides={lightboxSlides}
+                    onClose={() => setOpenLightbox(false)}
+                />
+            )}
         </div>
     )
 }

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

@@ -1,7 +1,10 @@
-export declare const SolidMessageComposer: ({ type, modelSingularName, refetch, id }: {
-    type?: string | undefined;
+interface SolidMessageComposerProps {
+    type?: string;
     modelSingularName?: any;
     refetch?: any;
     id?: any;
-}) => import("react/jsx-runtime").JSX.Element;
+    onCancel?: () => void;
+}
+export declare const SolidMessageComposer: ({ type, modelSingularName, refetch, id, onCancel }: SolidMessageComposerProps) => import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=SolidMessageComposer.d.ts.map

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,eAAO,MAAM,oBAAoB;;wBAAmF,GAAG;cAAY,GAAG;SAAO,GAAG;6CAyI/I,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;CACzB;AAED,eAAO,MAAM,oBAAoB,uDAAwD,yBAAyB,4CA0KjH,CAAA"}

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

@@ -44,15 +44,15 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { InputText } from 'primereact/inputtext';
 import styles from './chatter.module.css';
-import { Button } from 'primereact/button';
 import { useCreateChatterMessageMutation } 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';
 export var SolidMessageComposer = function (_a) {
-    var type = _a.type, modelSingularName = _a.modelSingularName, refetch = _a.refetch, id = _a.id;
+    var type = _a.type, modelSingularName = _a.modelSingularName, refetch = _a.refetch, id = _a.id, onCancel = _a.onCancel;
     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;
@@ -111,9 +111,17 @@ export var SolidMessageComposer = function (_a) {
             refetch();
         }
     }, [isSuccess]);
-    return (_jsxs("form", { className: styles.chatterMessageComposer, onSubmit: handleSubmit, children: [_jsxs("div", { className: 'flex align-items-center gap-2', children: [_jsx(InputText, { type: "text", value: message, onChange: function (e) { return setMessage(e.target.value); }, placeholder: type === 'email' ? 'Send a message to followers' : 'Log an internal note.', className: "p-inputtext-sm w-full p-2 ".concat(styles.chatterMessageInput) }), _jsx("input", { type: "file", ref: fileInputRef, onChange: handleFileSelect, multiple: true, style: { display: 'none' } }), _jsx(Button, { icon: "pi pi-plus", className: "p-button-rounded p-button-text", onClick: function () { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, tooltip: "Attach files", tooltipOptions: { position: 'top' }, type: 'button' })] }), selectedFiles.length > 0 && (_jsx("div", { className: 'flex flex-wrap gap-2 mt-2', children: selectedFiles.map(function (file, index) { return (_jsxs("div", { className: 'flex align-items-center gap-2 bg-gray-100 p-2 rounded', children: [_jsx("span", { className: 'text-sm', children: file.name }), _jsx(Button, { icon: "pi pi-times", className: "p-button-rounded p-button-text p-button-sm", onClick: function () { return setSelectedFiles(function (prev) { return prev.filter(function (_, i) { return i !== index; }); }); } })] }, index)); }) })), _jsxs("div", { className: 'mt-3 flex align-items-center gap-2', children: [_jsx(Button, { label: type === 'email' ? 'Send' : 'Log', size: 'small', type: 'submit', loading: isLoading }), _jsx(Button, { label: 'Cancel', size: 'small', type: 'button', text: true, severity: 'contrast', onClick: function () {
-                            setMessage('');
-                            setSelectedFiles([]);
-                        } })] })] }));
+    var formatFileSize = function (size) {
+        if (!size)
+            return "";
+        return size >= 1024 * 1024
+            ? "".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 () {
+                                            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)); }) }))] }));
 };
 //# 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 { InputText } from 'primereact/inputtext'\nimport styles from './chatter.module.css'\nimport { Button } from 'primereact/button'\nimport { useCreateChatterMessageMutation } from '../../../redux/api/solidChatterMessageApi'\nimport { useEffect, useState, useRef } from 'react'\nimport { ERROR_MESSAGES } from '../../../constants/error-messages'\nimport { useSession } from '../../../hooks/useSession'\n\nexport const SolidMessageComposer = ({ type, modelSingularName, refetch, id }: { type?: string, modelSingularName?: any, refetch?: any, id?: any }) => {\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            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    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={`pi pi-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='flex align-items-center gap-2'>\n                <InputText\n                    type=\"text\"\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={`p-inputtext-sm w-full p-2 ${styles.chatterMessageInput}`}\n                />\n                <input\n                    type=\"file\"\n                    ref={fileInputRef}\n                    onChange={handleFileSelect}\n                    multiple\n                    style={{ display: 'none' }}\n                />\n                <Button\n                    icon=\"pi pi-plus\"\n                    className=\"p-button-rounded p-button-text\"\n                    onClick={() => fileInputRef.current?.click()}\n                    tooltip=\"Attach files\"\n                    tooltipOptions={{ position: 'top' }}\n                    type='button'\n                />\n            </div>\n            {selectedFiles.length > 0 && (\n                <div className='flex flex-wrap gap-2 mt-2'>\n                    {selectedFiles.map((file, index) => (\n                        <div key={index} className='flex align-items-center gap-2 bg-gray-100 p-2 rounded'>\n                            <span className='text-sm'>{file.name}</span>\n                            <Button\n                                icon=\"pi pi-times\"\n                                className=\"p-button-rounded p-button-text p-button-sm\"\n                                onClick={() => setSelectedFiles(prev => prev.filter((_, i) => i !== index))}\n                            />\n                        </div>\n                    ))}\n                </div>\n            )}\n            <div className='mt-3 flex align-items-center gap-2'>\n                <Button\n                    label={type === 'email' ? 'Send' : 'Log'}\n                    size='small'\n                    type='submit'\n                    loading={isLoading}\n                />\n                <Button\n                    label='Cancel'\n                    size='small'\n                    type='button'\n                    text\n                    severity='contrast'\n                    onClick={() => {\n                        setMessage('');\n                        setSelectedFiles([]);\n                    }}\n                />\n            </div>\n        </form>\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}\n\nexport const SolidMessageComposer = ({ type, modelSingularName, refetch, id, onCancel }: 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            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"]}

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

@@ -1,12 +1,20 @@
-import { InputText } from 'primereact/inputtext'
 import styles from './chatter.module.css'
-import { Button } from 'primereact/button'
 import { useCreateChatterMessageMutation } 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'
 
-export const SolidMessageComposer = ({ type, modelSingularName, refetch, id }: { type?: string, modelSingularName?: any, refetch?: any, id?: any }) => {
+interface SolidMessageComposerProps {
+    type?: string;
+    modelSingularName?: any;
+    refetch?: any;
+    id?: any;
+    onCancel?: () => void;
+}
+
+export const SolidMessageComposer = ({ type, modelSingularName, refetch, id, onCancel }: SolidMessageComposerProps) => {
     const [message, setMessage] = useState('');
     const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
 
@@ -61,6 +69,13 @@ export const SolidMessageComposer = ({ type, modelSingularName, refetch, id }: {
         }
     }, [isSuccess]);
 
+    const formatFileSize = (size: number) => {
+        if (!size) return "";
+        return size >= 1024 * 1024
+            ? `${(size / (1024 * 1024)).toFixed(1)} MB`
+            : `${(size / 1024).toFixed(1)} KB`;
+    };
+
     return (
         <form className={styles.chatterMessageComposer} onSubmit={handleSubmit}>
             {/* {type === 'email' &&
@@ -73,7 +88,7 @@ export const SolidMessageComposer = ({ type, modelSingularName, refetch, id }: {
                             </span>
                         ))}
                     </div>
-                    <div className={`pi pi-sort-down-fill text-primary ${styles.emailTooltipIcon}`} style={{ fontSize: 8 }}>
+                    <div className={`si si-sort-down-fill text-primary ${styles.emailTooltipIcon}`} style={{ fontSize: 8 }}>
                         <div className={styles.emailsTooltip}>
                             {tempEmails.map((mail, index) => (
                                 <span key={index} className='text-color text-sm'>
@@ -84,63 +99,89 @@ export const SolidMessageComposer = ({ type, modelSingularName, refetch, id }: {
                     </div>
                 </div>
             } */}
-            <div className='flex align-items-center gap-2'>
-                <InputText
-                    type="text"
+            <div className={`${styles.solidMessageWrapper} flex flex-column gap-2 w-full`}>
+                <div className='flex align-items-center justify-content-between'>
+                    <p className='form-field-label m-0'>
+                        {type === 'email' ? 'Email Message' : 'Internal Note'}
+                    </p>
+                </div>
+                <SolidTextarea
                     value={message}
                     onChange={(e) => setMessage(e.target.value)}
                     placeholder={type === 'email' ? 'Send a message to followers' : 'Log an internal note.'}
-                    className={`p-inputtext-sm w-full p-2 ${styles.chatterMessageInput}`}
-                />
-                <input
-                    type="file"
-                    ref={fileInputRef}
-                    onChange={handleFileSelect}
-                    multiple
-                    style={{ display: 'none' }}
-                />
-                <Button
-                    icon="pi pi-plus"
-                    className="p-button-rounded p-button-text"
-                    onClick={() => fileInputRef.current?.click()}
-                    tooltip="Attach files"
-                    tooltipOptions={{ position: 'top' }}
-                    type='button'
+                    className="w-full p-1"
+                    rows={4}
                 />
+                <div className='flex align-items-center justify-content-between flex-wrap gap-2'>
+                    <div className='flex align-items-center gap-2'>
+                        <input
+                            type="file"
+                            ref={fileInputRef}
+                            onChange={handleFileSelect}
+                            multiple
+                            style={{ display: 'none' }}
+                        />
+                        <SolidButton
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            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 gap-2'>
+                        <SolidButton
+                            type='submit'
+                            size='sm'
+                            className='gap-2 solid-purple-button'
+                            variant='primary'
+                            loading={isLoading}
+                        >
+                            {type === 'email' ? 'Send' : 'Log'}
+                        </SolidButton>
+                        <SolidButton
+                            type='button'
+                            size='sm'
+                            variant='ghost'
+                            onClick={() => {
+                                setMessage('');
+                                setSelectedFiles([]);
+                                onCancel?.();
+                            }}
+                        >
+                            Cancel
+                        </SolidButton>
+                    </div>
+                </div>
             </div>
             {selectedFiles.length > 0 && (
-                <div className='flex flex-wrap gap-2 mt-2'>
+                <div className={styles.chatterSelectedFiles}>
                     {selectedFiles.map((file, index) => (
-                        <div key={index} className='flex align-items-center gap-2 bg-gray-100 p-2 rounded'>
-                            <span className='text-sm'>{file.name}</span>
-                            <Button
-                                icon="pi pi-times"
-                                className="p-button-rounded p-button-text p-button-sm"
+                        <div key={index} className={styles.chatterSelectedFileCard}>
+                            <div className={styles.chatterSelectedFileIcon}>
+                                <FileText size={16} />
+                            </div>
+                            <div className={styles.chatterSelectedFileMeta}>
+                                <p className={styles.chatterSelectedFileName}>{file.name}</p>
+                                <span className={styles.chatterSelectedFileSize}>{formatFileSize(file.size)}</span>
+                            </div>
+                            <SolidButton
+                                type="button"
+                                variant="ghost"
+                                size="sm"
+                                className="solid-icon-button"
+                                leftIcon={<X size={12} />}
                                 onClick={() => setSelectedFiles(prev => prev.filter((_, i) => i !== index))}
+                                aria-label={`Remove ${file.name}`}
                             />
                         </div>
                     ))}
                 </div>
             )}
-            <div className='mt-3 flex align-items-center gap-2'>
-                <Button
-                    label={type === 'email' ? 'Send' : 'Log'}
-                    size='small'
-                    type='submit'
-                    loading={isLoading}
-                />
-                <Button
-                    label='Cancel'
-                    size='small'
-                    type='button'
-                    text
-                    severity='contrast'
-                    onClick={() => {
-                        setMessage('');
-                        setSelectedFiles([]);
-                    }}
-                />
-            </div>
         </form>
     )
-}
+}