@solidxai/core-ui 0.1.7-beta.0 → 0.1.7-beta.10

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

@@ -1,13 +1,21 @@
-
-import { Button } from 'primereact/button'
-import { Calendar } from 'primereact/calendar'
-import { Dialog } from 'primereact/dialog'
-import { AutoComplete } from 'primereact/autocomplete'
 import { useEffect, useState } from 'react'
 import styles from './chatter.module.css'
 import { SolidMessageComposer } from './SolidMessageComposer'
 import { useLazyGetusersQuery } from '../../../redux/api/userApi'
 import { ERROR_MESSAGES } from '../../../constants/error-messages'
+import {
+    SolidButton,
+    SolidDialog,
+    SolidDialogBody,
+    SolidDialogClose,
+    SolidDialogFooter,
+    SolidDialogHeader,
+    SolidDialogSeparator,
+    SolidDialogTitle,
+    SolidAutocomplete,
+    SolidDatePicker
+} from '../../shad-cn-ui'
+import { Filter, RefreshCw,Edit } from 'lucide-react'
 interface FilterState {
     name: string;
     startDate: Date | null;
@@ -22,10 +30,13 @@ interface Props {
     refetch: any,
     id: any,
     onFilterChange?: (filters: FilterState) => void;
+    onComposerCancel?: () => void;
+    title?: string;
+    modelUserKey?: string;
 }
 
 export const SolidChatterHeader = (props: Props) => {
-    const { activeTab, visibleBox, handleTabClick, modelSingularName, refetch, id, onFilterChange } = props;
+    const { activeTab, visibleBox, handleTabClick, modelSingularName, refetch, id, onFilterChange, onComposerCancel, title, modelUserKey } = props;
     const [showFilterDialog, setShowFilterDialog] = useState(false);
     const [filters, setFilters] = useState<FilterState>({
         name: '',
@@ -65,7 +76,20 @@ export const SolidChatterHeader = (props: Props) => {
         setShowFilterDialog(false);
     };
 
+    const updateNameFilter = (value: string) => {
+        setFilters(prev => {
+            if (prev.name === value) {
+                return prev;
+            }
+            return {
+                ...prev,
+                name: value
+            };
+        });
+    };
+
     const searchUsers = async (event: { query: string }) => {
+        updateNameFilter(event.query || '');
         try {
             const response = await getUsers(`filters[fullName][$containsi]=${event.query}`).unwrap();
             setSuggestions(response?.data?.records || []);
@@ -75,21 +99,25 @@ export const SolidChatterHeader = (props: Props) => {
         }
     };
 
-    const itemTemplate = (item: any) => {
-        return (
-            <div className="flex align-items-center">
-                <div>{item.fullName}</div>
-            </div>
-        );
+    const handleUserChange = (value: any) => {
+        if (!value) {
+            updateNameFilter('');
+            return;
+        }
+        if (typeof value === 'object') {
+            updateNameFilter(value.fullName || '');
+            return;
+        }
+        updateNameFilter(value);
     };
 
     return (
-        <div className={styles.chatterTitle}>
-            <div className='flex justify-content-between align-items-center'>
-                <div className="form-wrapper-title ">
-                    Activity
-                </div>
-                <div className='flex align-items-center gap-2'>
+        <div className={`${styles.chatterTitle} ${title ? styles.chatterTitleWithLabel : ''} solid-list-toolbar`}>
+            <div className='flex justify-content-between align-items-center solid-list-toolbar-row'>
+                <p className="m-0 view-title solid-text-wrapper form-wrapper-title">
+                    {title || ''}
+                </p>
+                <div className='flex align-items-center solid-header-buttons-wrapper'>
                     {/* <Button
                         label="Send Message"
                         size="small"
@@ -100,119 +128,129 @@ export const SolidChatterHeader = (props: Props) => {
                             outlined: true,
                         })}
                     /> */}
-                    <Button
+                    {/* <SolidButton
                         label="Log Note"
-                        size="small"
+                        size="sm"
                         type="button"
+                        variant="primary"
+                        className="solid-purple-button"
+                        onClick={() => handleTabClick('log')}
+                    /> */}
+                    <SolidButton
+                        size="sm"
+                        type="button"
+                        aria-label="Log Note"
+                        variant={hasActiveFilters ? 'primary' : 'outline'}
+                        className="solid-icon-button"
+                        style={{ gap: 0 }}
+                        leftIcon={<Edit size={14} />}
                         onClick={() => handleTabClick('log')}
-                        {...(activeTab !== 'log' && {
-                            severity: 'secondary',
-                            outlined: true,
-                        }
-                        )}
                     />
-                    <Button
-                        icon="pi pi-filter-fill"
-                        text
-                        size='small'
-                        severity="secondary"
+                    <SolidButton
+                        size="sm"
+                        type="button"
                         aria-label="Filter"
-                        style={{
-                            width: 20,
-                            color: hasActiveFilters ? '#722ED1' : undefined
-                        }}
+                        variant={hasActiveFilters ? 'primary' : 'outline'}
+                        className="solid-icon-button"
+                        style={{ gap: 0 }}
+                        leftIcon={<Filter size={14} />}
                         onClick={handleFilterClick}
                     />
-                    <Button
-                        icon="pi pi-refresh"
-                        text
-                        size='small'
-                        severity="secondary"
+                    <SolidButton
+                        size="sm"
+                        type="button"
                         aria-label="Refresh"
-                        style={{
-                            width: 20
-                        }}
+                        variant="outline"
+                        className="solid-icon-button"
+                        style={{ gap: 0 }}
+                        leftIcon={<RefreshCw size={14} />}
                         onClick={refetch}
                     />
                 </div>
             </div>
             {visibleBox &&
-                <div className='mt-4'>
+                <div className='mt-2'>
                     {visibleBox === "email-message" &&
-                        <SolidMessageComposer id={id} refetch={refetch} modelSingularName={modelSingularName} type={"email"} />
+                        <SolidMessageComposer id={id} refetch={refetch} modelSingularName={modelSingularName} type={"email"} onCancel={onComposerCancel} modelUserKey={modelUserKey} />
                     }
 
                     {visibleBox === "log" &&
-                        <SolidMessageComposer id={id} refetch={refetch} modelSingularName={modelSingularName} />
+                        <SolidMessageComposer id={id} refetch={refetch} modelSingularName={modelSingularName} onCancel={onComposerCancel} modelUserKey={modelUserKey} />
                     }
                 </div>
             }
-            <Dialog 
-                header="Filter Messages" 
-                visible={showFilterDialog} 
-                style={{ width: 500 }} 
-                onHide={() => setShowFilterDialog(false)}
-                className='solid-chatter-filter-main'
+            <SolidDialog
+                open={showFilterDialog}
+                onOpenChange={setShowFilterDialog}
+                className='solid-filter-dialog-shell solid-chatter-filter-main'
+                style={{ width: 500 }}
+                showHeader={false}
             >
-                <div className="p-fluid">
-                    <div className="flex flex-column gap-2">
-                        <label htmlFor="name">Name:</label>
-                        <AutoComplete
-                            id="fullName"
-                            value={filters.name}
-                            suggestions={suggestions}
-                            completeMethod={searchUsers}
-                            field="fullName"
-                            onChange={(e) => setFilters(prev => ({ 
-                                ...prev, 
-                                name: typeof e.value === 'object' ? e.value.fullName : e.value 
-                            }))}
-                            placeholder="Filter By User"
-                            itemTemplate={itemTemplate}
-                            className="w-full"
-                        />
+                <SolidDialogHeader className="solid-filter-dialog-head">
+                    <div>
+                        <SolidDialogTitle className="solid-filter-dialog-title m-0">Filter Messages</SolidDialogTitle>
                     </div>
-                    <div className="flex flex-column gap-2 mt-3">
-                        <label htmlFor="dateRange">Date Range</label>
-                        <div className="flex gap-2">
-                            <div className="flex-1">
-                                <Calendar
-                                    id="startDate"
-                                    value={filters.startDate}
-                                    onChange={(e) => setFilters(prev => ({ ...prev, startDate: e.value as Date }))}
-                                    placeholder="Start Date"
-                                    showIcon
-                                    dateFormat="dd/mm/yy"
-                                    className="w-full"
-                                />
-                            </div>
-                            <div className="flex-1">
-                                <Calendar
-                                    id="endDate"
-                                    value={filters.endDate}
-                                    onChange={(e) => setFilters(prev => ({ ...prev, endDate: e.value as Date }))}
-                                    placeholder="End Date"
-                                    showIcon
-                                    dateFormat="dd/mm/yy"
-                                    className="w-full"
-                                />
+                    <SolidDialogClose className="solid-filter-dialog-close" />
+                </SolidDialogHeader>
+                <SolidDialogSeparator className="solid-filter-dialog-sep" />
+                <SolidDialogBody className="solid-filter-dialog-body">
+                    <div className="flex flex-column gap-3">
+                        <div className="flex flex-column gap-2">
+                            <label htmlFor="fullName" className="form-field-label">User</label>
+                            <SolidAutocomplete
+                                id="fullName"
+                                value={filters.name}
+                                suggestions={suggestions}
+                                field="fullName"
+                                completeMethod={searchUsers}
+                                onChange={(e) => handleUserChange(e.value)}
+                                placeholder="Filter by user"
+                                className="w-full"
+                                inputClassName="w-full"
+                            />
+                        </div>
+                        <div className="flex flex-column gap-2">
+                            <label htmlFor="dateRange" className="form-field-label">Date Range</label>
+                            <div className="flex gap-2 flex-column md:flex-row">
+                                <div className="flex-1">
+                                    <SolidDatePicker
+                                        selected={filters.startDate ?? undefined}
+                                        onChange={(date: Date | null) => setFilters(prev => ({ ...prev, startDate: date ?? null }))}
+                                        placeholderText="Start Date"
+                                        className="w-full"
+                                        wrapperClassName="w-full"
+                                        inputClassName="w-full"
+                                    />
+                                </div>
+                                <div className="flex-1">
+                                    <SolidDatePicker
+                                        selected={filters.endDate ?? undefined}
+                                        onChange={(date: Date | null) => setFilters(prev => ({ ...prev, endDate: date ?? null }))}
+                                        placeholderText="End Date"
+                                        className="w-full"
+                                        wrapperClassName="w-full"
+                                        inputClassName="w-full"
+                                    />
+                                </div>
                             </div>
                         </div>
                     </div>
-                    <div className="flex justify-content-end gap-2 mt-4">
-                        <Button 
+                </SolidDialogBody>
+                <SolidDialogFooter>
+                        <SolidButton 
                             label="Clear" 
-                            severity="secondary" 
-                            outlined 
+                            size="sm"
+                            variant="outline"
                             onClick={handleClearFilters}
                         />
-                        <Button 
+                        <SolidButton 
                             label="Apply" 
+                            size="sm"
+                            className="solid-purple-button"
                             onClick={handleApplyFilters}
                         />
-                    </div>
-                </div>
-            </Dialog>
+                </SolidDialogFooter>
+            </SolidDialog>
         </div>
     )
-}
+}

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

@@ -1 +1 @@
-{"version":3,"file":"SolidChatterMessageBox.d.ts","sourceRoot":"","sources":["../../../../src/components/core/chatter/SolidChatterMessageBox.tsx"],"names":[],"mappings":"AAUA,UAAU,KAAK;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE;QACJ,kBAAkB,CAAC,EAAE,KAAK,CAAC;YACvB,EAAE,EAAE,MAAM,CAAC;YACX,WAAW,EAAE,MAAM,CAAC;YACpB,QAAQ,EAAE,MAAM,CAAC;YACjB,gBAAgB,EAAE,MAAM,CAAC;YACzB,SAAS,EAAE,MAAM,CAAC;SACrB,CAAC,CAAC;KACN,CAAC;CACL;AAsBD,eAAO,MAAM,sBAAsB,UAAW,KAAK,4CAgHlD,CAAA"}
+{"version":3,"file":"SolidChatterMessageBox.d.ts","sourceRoot":"","sources":["../../../../src/components/core/chatter/SolidChatterMessageBox.tsx"],"names":[],"mappings":"AAWA,UAAU,KAAK;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE;QACJ,kBAAkB,CAAC,EAAE,KAAK,CAAC;YACvB,EAAE,EAAE,MAAM,CAAC;YACX,WAAW,EAAE,MAAM,CAAC;YACpB,QAAQ,EAAE,MAAM,CAAC;YACjB,gBAAgB,EAAE,MAAM,CAAC;YACzB,SAAS,EAAE,MAAM,CAAC;SACrB,CAAC,CAAC;KACN,CAAC;CACL;AAsBD,eAAO,MAAM,sBAAsB,UAAW,KAAK,4CAgJlD,CAAA"}

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

@@ -1,43 +1,73 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 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 } from '../../shad-cn-ui';
 var getFileIcon = function (mimeType) {
     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 var SolidChatterMessageBox = function (props) {
     var user = props.user, messageType = props.messageType, message = props.message, time = props.time, auditRecord = props.auditRecord, media = props.media, messageSubType = props.messageSubType, modelDisplayName = props.modelDisplayName, modelUserKey = props.modelUserKey;
-    var _a = useState(null), selectedImage = _a[0], setSelectedImage = _a[1];
-    var _b = useState(false), isImageDialogVisible = _b[0], setIsImageDialogVisible = _b[1];
+    var _a = useState([]), lightboxSlides = _a[0], setLightboxSlides = _a[1];
+    var _b = useState(false), openLightbox = _b[0], setOpenLightbox = _b[1];
     var avatarStyle = useMemo(function () {
         var bg = stringToColor(user);
         var color = getTextColor(bg);
-        return { backgroundColor: bg, color: color, height: 24, width: 24, fontSize: 10, fontWeight: 600 };
+        return { backgroundColor: bg, color: color };
+    }, [user]);
+    var initials = useMemo(function () {
+        if (!user)
+            return "";
+        return user
+            .split(" ")
+            .map(function (part) { return part.charAt(0); })
+            .filter(Boolean)
+            .slice(0, 2)
+            .join("")
+            .toUpperCase();
     }, [user]);
     var handleImageClick = function (url) {
-        setSelectedImage(url);
-        setIsImageDialogVisible(true);
+        var _a;
+        var imageAttachments = ((_a = media === null || media === void 0 ? void 0 : media.messageAttachments) === null || _a === void 0 ? void 0 : _a.filter(function (att) { var _a; return (_a = att.mimeType) === null || _a === void 0 ? void 0 : _a.startsWith('image/'); })) || [];
+        if (imageAttachments.length === 0)
+            return;
+        var startIndex = imageAttachments.findIndex(function (att) { return att._full_url === url; });
+        var ordered = startIndex >= 0
+            ? __spreadArray(__spreadArray([], imageAttachments.slice(startIndex), true), imageAttachments.slice(0, startIndex), true) : imageAttachments;
+        var slides = ordered.map(function (att) { return ({
+            src: att._full_url
+        }); });
+        setLightboxSlides(slides);
+        setOpenLightbox(true);
     };
     var renderMessageContent = function () {
         switch (messageType) {
@@ -48,13 +78,17 @@ export var SolidChatterMessageBox = function (props) {
                 return _jsx(SolidChatterCustomMessage, { message: message });
         }
     };
-    return (_jsxs("div", { className: styles.solidChatterMessageBox, children: [_jsxs("div", { className: 'flex align-items-center', children: [_jsx("div", { style: { width: 32 }, children: _jsx(Avatar, { label: user.charAt(0).toUpperCase(), style: avatarStyle, shape: "circle" }) }), _jsxs("div", { className: 'flex align-items-center justify-content-between', style: { width: '100%' }, children: [_jsxs("div", { className: 'text-sm', children: [_jsx("span", { className: 'font-bold', children: user }), _jsx("span", { className: 'ml-2', style: { color: '#949494' }, children: messageType === 'audit' ? messageSubType === "audit_update"
-                                            ? _jsxs(_Fragment, { children: ["Updated ", modelUserKey && _jsxs("span", { style: { fontStyle: 'italic', fontWeight: '600' }, children: ["(", modelUserKey, ")"] })] })
-                                            : messageSubType === "audit_insert"
-                                                ? _jsxs(_Fragment, { children: ["Inserted ", modelUserKey && _jsxs("span", { style: { fontStyle: 'italic', fontWeight: '600' }, children: ["(", modelUserKey, ")"] })] })
-                                                : "Custom" : "Custom" })] }), modelDisplayName && _jsx("span", { style: { fontStyle: 'italic', fontWeight: '600' }, children: modelDisplayName })] })] }), _jsxs("div", { className: 'flex align-items-center mt-1', children: [_jsx("div", { style: { width: 32 } }), _jsxs("div", { style: { width: '100%' }, children: [_jsx("p", { className: 'mb-1 text-sm font-bold', style: { color: '#949494' }, children: time }), message && _jsx("div", { className: styles.solidMessageWrapper, children: renderMessageContent() }), (media === null || media === void 0 ? void 0 : media.messageAttachments) && media.messageAttachments.length > 0 && (_jsx("div", { className: 'flex flex-wrap gap-2 mt-2', children: media.messageAttachments.map(function (attachment) {
-                                    var isImage = attachment.mimeType.startsWith('image/');
-                                    return (_jsx("div", { className: 'flex align-items-center gap-2 bg-gray-100 p-2 rounded', children: isImage ? (_jsx("div", { className: 'cursor-pointer', onClick: function () { return handleImageClick(attachment._full_url); }, children: _jsx(Image, { src: encodeURI(attachment._full_url), alt: attachment.originalFileName, width: 50, height: 50, className: 'rounded', style: { objectFit: 'cover' } }) })) : (_jsxs("a", { href: encodeURI(attachment._full_url), target: "_blank", rel: "noopener noreferrer", className: 'flex align-items-center gap-2 text-decoration-none', children: [_jsx("i", { className: getFileIcon(attachment.mimeType) }), _jsx("span", { className: 'text-sm', children: attachment.originalFileName })] })) }, attachment.id));
-                                }) }))] })] }), _jsx(Dialog, { visible: isImageDialogVisible, onHide: function () { return setIsImageDialogVisible(false); }, className: 'w-9 ', modal: true, children: selectedImage && (_jsx(Image, { src: selectedImage, alt: "Preview", width: 800, height: 600, style: { width: '100%', height: 'auto' } })) })] }));
+    var messageLabel = messageType === 'audit'
+        ? (messageSubType === "audit_update"
+            ? "Updated"
+            : messageSubType === "audit_insert"
+                ? "Inserted"
+                : "Audit record")
+        : "Internal note";
+    var TypeIcon = messageType === 'audit' ? GitBranch : MessageSquare;
+    return (_jsxs("div", { className: styles.solidChatterMessageBox, children: [_jsx("div", { className: styles.solidChatterMessageCard, children: _jsxs("div", { className: styles.solidChatterMessageLayout, children: [_jsx("div", { className: styles.solidChatterAvatar, style: avatarStyle, children: initials || user.charAt(0).toUpperCase() }), _jsxs("div", { className: styles.solidChatterMessageContent, children: [_jsxs("div", { className: styles.solidChatterMessageHeader, children: [_jsxs("div", { className: 'flex align-items-center gap-2 flex-wrap', children: [_jsx("p", { className: styles.solidChatterUser, children: user }), _jsxs(SolidTooltip, { children: [_jsx(SolidTooltipTrigger, { asChild: true, children: _jsx("span", { className: "".concat(styles.solidChatterBadge, " ").concat(messageType === 'audit' ? styles.audit : styles.custom), "aria-label": messageLabel, children: _jsx(TypeIcon, { size: 12 }) }) }), _jsx(SolidTooltipContent, { side: "right", children: messageLabel })] })] }), _jsx("span", { className: styles.solidChatterTime, children: time })] }), modelDisplayName && (_jsxs("p", { className: "".concat(styles.solidChatterMeta, " m-0"), children: [modelDisplayName, modelUserKey && _jsxs(_Fragment, { children: [" \u00B7 ", _jsx("span", { className: 'font-medium', children: modelUserKey })] })] })), message && (_jsx("div", { className: styles.solidMessageWrapper, children: renderMessageContent() })), (media === null || media === void 0 ? void 0 : media.messageAttachments) && media.messageAttachments.length > 0 && (_jsx("div", { className: styles.solidChatterAttachments, children: media.messageAttachments.map(function (attachment) {
+                                        var isImage = attachment.mimeType.startsWith('image/');
+                                        return (_jsx("div", { className: styles.solidChatterAttachment, children: isImage ? (_jsx("div", { className: 'cursor-pointer', onClick: function () { return handleImageClick(attachment._full_url); }, children: _jsx(Image, { src: encodeURI(attachment._full_url), alt: attachment.originalFileName, width: 54, height: 54, style: { objectFit: 'cover' } }) })) : (_jsxs("a", { href: encodeURI(attachment._full_url), target: "_blank", rel: "noopener noreferrer", className: 'flex align-items-center gap-2 text-decoration-none text-sm', children: [_jsx(SolidIcon, { name: getFileIcon(attachment.mimeType), "aria-hidden": true }), _jsx("span", { children: attachment.originalFileName })] })) }, attachment.id));
+                                    }) }))] })] }) }), openLightbox && (_jsx(SolidLightbox, { open: openLightbox, slides: lightboxSlides, onClose: function () { return setOpenLightbox(false); } }))] }));
 };
 //# sourceMappingURL=SolidChatterMessageBox.js.map

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

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