@solidstarters/solid-core-ui 1.1.211 → 1.1.212

package/dist/components/common/SolidPopupContainer.tsx

@@ -0,0 +1,37 @@
+"use client"
+// components/PopupContainer.tsx
+import { useSelector, useDispatch } from 'react-redux';
+import { RootState } from '../../types/solid-core';
+import { closePopup } from '../../redux/features/popupSlice';
+import { Dialog } from 'primereact/dialog';
+import { get } from 'lodash';
+import { getExtensionComponent } from '../../helpers/registry';
+import { Button } from 'primereact/button';
+
+
+const SolidPopupContainer = () => {
+    const { isOpen, event } = useSelector((state: RootState) => state.popup);
+    const dispatch = useDispatch();
+
+    if (!isOpen) return null;
+
+    const DynamicComponent = getExtensionComponent(event?.action);
+
+    return (
+        <Dialog
+            visible={isOpen}
+            onHide={() => dispatch(closePopup())}
+            closable={false}
+            style={{ width: event.popupWidth ? event.popupWidth : '50vw' }}
+            modal
+            headerClassName='p-0'
+            contentClassName='p-0'
+            contentStyle={{ borderRadius: 6 }}
+            className='solid-common-dialog'
+        >
+            {DynamicComponent && <DynamicComponent {...event} />}
+        </Dialog>
+    );
+};
+
+export default SolidPopupContainer;

package/dist/components/common/SolidSettings/LlmSettings/AnthropicProviderComponent.tsx

@@ -0,0 +1,45 @@
+import { InputText } from "primereact/inputtext";
+import { Password } from "primereact/password";
+
+export const AnthropicProviderComponent = ({ profile, onUpdate }: any) => {
+  return (
+    <div className="grid">
+      <div className="field col-12 md:col-6 pl-3">
+        <div className="flex flex-column gap-2 mt-3">
+          <label htmlFor="displayName" className="form-field-label">
+            Base URL
+          </label>
+          <InputText
+            value={profile?.baseUrl || ""}
+            onChange={(e) => onUpdate("baseUrl", e.target.value)}
+            className="w-full"
+          />
+        </div>
+
+        <div className="flex flex-column gap-2 mt-3">
+          <label htmlFor="displayName" className="form-field-label">
+            Api Key
+          </label>
+          <Password
+            className="w-full"
+            value={profile?.apiKey || ""}
+            onChange={(e) => onUpdate("apiKey", e.target.value)}
+            toggleMask
+            feedback={false}
+            inputClassName="w-full"
+          />
+        </div>
+        <div className="flex flex-column gap-2 mt-3">
+          <label htmlFor="displayName" className="form-field-label">
+            Model Name
+          </label>
+          <InputText
+            value={profile?.modelName || ""}
+            onChange={(e) => onUpdate("modelName", e.target.value)}
+            className="w-full"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/dist/components/common/SolidSettings/LlmSettings/OpenAiProviderComponent.tsx

@@ -0,0 +1,45 @@
+import { InputText } from "primereact/inputtext";
+import { Password } from "primereact/password";
+
+export const OpenAiProviderComponent = ({ profile, onUpdate }: any) => {
+  return (
+    <div className="grid">
+      <div className="field col-12 md:col-6 pl-3">
+        <div className="flex flex-column gap-2 mt-3">
+          <label htmlFor="displayName" className="form-field-label">
+            Base URL
+          </label>
+          <InputText
+            value={profile?.baseUrl || ""}
+            onChange={(e) => onUpdate("baseUrl", e.target.value)}
+            className="w-full"
+          />
+        </div>
+
+        <div className="flex flex-column gap-2 mt-3">
+          <label htmlFor="displayName" className="form-field-label">
+            Api Key
+          </label>
+          <Password
+            className="w-full"
+            value={profile?.apiKey || ""}
+            onChange={(e) => onUpdate("apiKey", e.target.value)}
+            toggleMask
+            feedback={false}
+            inputClassName="w-full"
+          />
+        </div>
+        <div className="flex flex-column gap-2 mt-3">
+          <label htmlFor="displayName" className="form-field-label">
+            Model Name
+          </label>
+          <InputText
+            value={profile?.modelName || ""}
+            onChange={(e) => onUpdate("modelName", e.target.value)}
+            className="w-full"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/dist/components/common/SolidSettings/SettingDropzoneActivePlaceholder.tsx

@@ -0,0 +1,20 @@
+import { Button } from 'primereact/button'
+import React from 'react'
+
+export const SettingDropzoneActivePlaceholder = ({note}:any) => {
+    return (
+        <div className='solid-dropzone'>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                <path d="M11 16V7.85L8.4 10.45L7 9L12 4L17 9L15.6 10.45L13 7.85V16H11ZM6 20C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18V15H6V18H18V15H20V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20H6Z" fill="#666666" />
+            </svg>
+            <div className='font-bold mt-2 text-center'>
+                Drag and Drop or <span className='text-primary'> Logo</span> to upload
+            </div>
+            <p className='text-center'>Supported format:PNG, JPG, JPEG, SVG, WEBP | Max size: 2 MB</p>
+            <small className='mb-2 text-center'>Note: {note ? note : "200px image width is ideal."}</small>
+            <div>
+                <Button outlined size='small' severity='secondary' label='Click to Browse' type="button" />
+            </div>
+        </div>
+    )
+}

package/dist/components/common/SolidSettings/SettingsImageRemoveButton.tsx

@@ -0,0 +1,15 @@
+import { Button } from 'primereact/button'
+import React from 'react'
+
+export const SettingsImageRemoveButton = ({ onClick }: any) => {
+    return (
+        <Button
+            label="Remove"
+            severity="danger"
+            icon="pi pi-times"
+            size="small"
+            className="mt-2"
+            onClick={onClick}
+        />
+    )
+}

package/dist/components/common/SolidSettings/SolidUploadedImage.tsx

@@ -0,0 +1,16 @@
+import Image from 'next/image'
+import React from 'react'
+
+export const SolidUploadedImage = ({ src, height, width, maxHeight,className }: any) => {
+    return (
+        <Image
+            src={src}
+            alt="App Logo"
+            width={width ? width : 200}
+            height={height ? height : 120}
+            style={{ objectFit: "contain", maxHeight: maxHeight ? maxHeight : 150 , maxWidth:'100%' }}
+            unoptimized
+            className={className}
+        />
+    )
+}

package/dist/components/common/SolidThemeLink.tsx

@@ -0,0 +1,6 @@
+"use client"
+export const SolidThemeLink = () => {
+    return (
+        <link id="theme-css" href={`/themes/solid-light-purple/theme.css`} rel="stylesheet"></link>
+    )
+}

package/dist/components/common/SolidThemeProvider.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import { useSelector } from "react-redux";
+import { useLazyGetAuthSettingsQuery } from "../../redux/api/solidSettingsApi";
+
+export const SolidThemeProvider = () => {
+    const pathname = usePathname();
+    const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery()
+    useEffect(() => {
+        if (pathname.includes("/auth/")) {
+            trigger("");
+        }
+    }, [pathname, trigger]);
+
+    const [theme, setTheme] = useState("solid-light-purple");
+    useEffect(() => {
+        if (pathname.includes("/auth/") && solidSettingsData?.data?.authPagesTheme) {
+            const selectedTheme =
+                solidSettingsData?.data?.authPagesTheme === "dark" ? "solid-dark-purple" : "solid-light-purple";
+            setTheme(selectedTheme);
+        } else {
+            setTheme("solid-light-purple");
+        }
+    }, [pathname, solidSettingsData]);
+
+    useEffect(() => {
+        // Find or create <link> element
+        let themeLink = document.getElementById("theme-css") as HTMLLinkElement;
+
+        // if (!themeLink) {
+        //     themeLink = document.createElement("link");
+        //     themeLink.id = "theme-css";
+        //     themeLink.rel = "stylesheet";
+        //     document.head.appendChild(themeLink);
+        // }
+
+        // Update theme link dynamically
+        themeLink.href = `/themes/${theme}/theme.css`;
+    }, [theme]);
+
+    return null;
+}

package/dist/components/common/StepperArrows/ActiveArrowStep.tsx

@@ -0,0 +1,18 @@
+"use client"
+export const ActiveArrowStep = () => {
+    return (
+        <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" fill="#000000" transform="rotate(30)"
+            height="48px"
+            width="48px"
+        >
+            <g id="SVGRepo_iconCarrier">
+                <g id="color">
+                    <polygon fill={"var(--primary-color)"} points="36,62 65,12 7,12" />
+                </g>
+                <g id="line">
+                    <polyline fill="none" stroke="" strokeMiterlimit="10" strokeWidth="1.5" points="36,62 65,12 7,12" />
+                </g>
+            </g>
+        </svg>
+    )
+}

package/dist/components/common/StepperArrows/ActiveBeforeStepArrow.tsx

@@ -0,0 +1,18 @@
+"use client"
+export const ActiveBeforeStepArrow = () => {
+    return (
+        <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" fill="#000000" transform="rotate(30)"
+            height="48px"
+            width="48px"
+        >
+            <g id="SVGRepo_iconCarrier">
+                <g id="color">
+                    <polygon fill="#EAEDF1" points="36,62 65,12 7,12" />
+                </g>
+                <g id="line">
+                    <polyline fill="none" stroke="var(--solid-stepper-border)" strokeMiterlimit="10" strokeWidth="1.5" points="36,62 65,12 7,12" />
+                </g>
+            </g>
+        </svg>
+    )
+}

package/dist/components/common/StepperArrows/InactiveStepArrow.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+export const InactiveStepArrow = () => {
+    return (
+        <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" fill="#000000" transform="rotate(30)"
+            height="48px"
+            width="48px"
+        >
+            <g id="SVGRepo_iconCarrier">
+                <g id="color">
+                    <polygon fill="#fff" points="36,62 65,12 7,12" />
+                </g>
+                <g id="line">
+                    <polyline fill="none" stroke="var(--solid-stepper-border)" strokeMiterlimit="10" strokeWidth="1.5" points="36,62 65,12 7,12" />
+                </g>
+            </g>
+        </svg>
+    )
+}

package/dist/components/common/error.tsx

@@ -0,0 +1,30 @@
+"use client"; // Error components must be Client Components
+
+interface CustomError extends Error {
+  errMessage: string;
+}
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: CustomError;
+  reset?: () => void;
+}) {
+  return (
+    <div>
+      <div className="d-flex justify-content-center align-items-center vh-100">
+        <div className="text-center">
+          <h2 className="display-4 fw-bold">{error?.errMessage}</h2>
+          <p className="fs-3">
+            <span className="text-danger">Opps!</span> Something went wrong!
+          </p>
+          <p className="lead">Sorry for inconvience</p>
+          <button className="btn btn-primary" onClick={() => reset?.()}>
+            Try again
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/components/common/useHandleFormCustomButtonClick.ts

@@ -0,0 +1,40 @@
+"usec client";
+import { useDispatch } from "react-redux";
+import { getExtensionComponent, getExtensionFunction } from "../../helpers/registry";
+import { openPopup } from "../../redux/features/popupSlice";
+import React, { ComponentType } from "react";
+import { ERROR_MESSAGES } from "../../constants/error-messages";
+type CustomButtonData = {
+    icon?: string,
+    className?: string,
+    label: string,
+    action: string,
+    openInPopup: boolean,
+    actionInContextMenu: boolean,
+    customComponentIsSystem: string,
+    closable: boolean
+}
+
+
+export const useHandleFormCustomButtonClickaction = () => {
+    const dispatch = useDispatch();
+
+    return (buttonAttrs: any, event: any) => {
+        const { action, openInPopup, closable }: CustomButtonData = buttonAttrs;
+
+        if (openInPopup === true) {
+            const eventData = { ...event, action: action, closable: closable };
+            dispatch(openPopup(eventData));
+
+        } else {
+            const eventData = { ...event, action: action, closable: closable};
+            const dynamicFunction = getExtensionFunction(action);
+            if (!dynamicFunction) {
+                console.error(ERROR_MESSAGES.ACTION_FUNCTION(action));
+                return;
+            }
+            dynamicFunction(eventData);
+        }
+
+    };
+};

package/dist/components/common/useHandleListCustomButtonClick.ts

@@ -0,0 +1,42 @@
+"usec client";
+
+import { useDispatch } from "react-redux";
+import { getExtensionComponent, getExtensionFunction } from "../../helpers/registry";
+import { openPopup } from "../../redux/features/popupSlice";
+import React, { ComponentType } from "react";
+import { ERROR_MESSAGES } from "../../constants/error-messages";
+type CustomButtonData = {
+    icon?: string,
+    className?: string,
+    label: string,
+    action: string,
+    openInPopup: boolean,
+    actionInContextMenu: boolean,
+    customComponentIsSystem: string,
+    popupWidth?: string,
+    closable?: boolean
+}
+
+
+export const useHandleListCustomButtonClick = () => {
+    const dispatch = useDispatch();
+
+    return (buttonAttrs: any, event: any) => {
+        const { action, openInPopup }: CustomButtonData = buttonAttrs;
+
+        if (openInPopup === true) {
+            const eventData = { ...event, ...buttonAttrs };
+            dispatch(openPopup(eventData));
+
+        } else {
+            const eventData = { ...event, ...buttonAttrs };
+            const dynamicFunction = getExtensionFunction(action);
+            if (!dynamicFunction) {
+                console.error(ERROR_MESSAGES.ACTION_FUNCTION(action));
+                return;
+            }
+            dynamicFunction(eventData);
+        }
+
+    };
+};

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

@@ -0,0 +1,248 @@
+"use client"
+import React, { useState, useEffect } from 'react'
+import { SolidChatterHeader } from './SolidChatterHeader'
+import { SolidChatterDateDivider } from './SolidChatterDateDivider'
+import { SolidChatterMessageBox } from './SolidChatterMessageBox'
+import { useLazyGetchatterMessageQuery } from '../../../redux/api/solidChatterMessageApi'
+import qs from "qs";
+import { ERROR_MESSAGES } from '../../../constants/error-messages'
+import { permissionExpression } from '../../../helpers/permissions'
+
+interface FilterState {
+    name: string;
+    startDate: Date | null;
+    endDate: Date | null;
+}
+
+export const SolidChatter = ({ modelSingularName, id, refreshChatterMessage, setRefreshChatterMessage, actionsAllowed=[] }: { modelSingularName: any, id: any, refreshChatterMessage: boolean, setRefreshChatterMessage: (value: boolean) => void , actionsAllowed?:string[]}) => {    
+    const [activeTab, setActiveTab] = useState<'email-message' | 'log' | null>('email-message');
+    const [visibleBox, setVisibleBox] = useState<'email-message' | 'log' | null>(null);
+    const [messages, setMessages] = useState<any[]>([]);
+    const [limit, setLimit] = useState<number>(25);
+    const [totalRecords, setTotalRecords] = useState<number>(0);
+    const [filters, setFilters] = useState<FilterState>({
+        name: '',
+        startDate: null,
+        endDate: null
+    });
+
+    const [getchatterMessage, { isLoading: isChatterLoading }] = useLazyGetchatterMessageQuery();
+
+    useEffect(() => {
+        if (refreshChatterMessage) {
+            if (id !== 'new') {
+                fetchData();
+                setRefreshChatterMessage(false);
+            }
+        }
+    }, [refreshChatterMessage]);
+
+    useEffect(() => {
+        if (id !== 'new') {
+            fetchData();
+        }
+    }, [filters, limit]);
+
+    const handleTabClick = (tab: 'email-message' | 'log') => {
+        setActiveTab(tab);
+        setVisibleBox(prev => (prev === tab ? null : tab));
+    }
+
+    const formatDate = (dateString: string) => {
+        const date = new Date(dateString);
+        const today = new Date();
+        const yesterday = new Date(today);
+        yesterday.setDate(yesterday.getDate() - 1);
+
+        if (date.toDateString() === today.toDateString()) {
+            return 'Today';
+        } else if (date.toDateString() === yesterday.toDateString()) {
+            return 'Yesterday';
+        } else {
+            return date.toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric'
+            });
+        }
+    };
+
+    const fetchData = async () => {
+        try {
+            const queryData: any = {
+                populate: ['user', 'chatterMessageDetails'],
+                limit: limit
+            };
+
+            if (filters.name) {
+                queryData.filters = queryData.filters || {};
+                queryData.filters['user'] = { fullName: { $containsi: filters.name }};
+            }
+            if (filters.startDate && filters.endDate) {
+                queryData.filters = queryData.filters || {};
+                queryData.filters.createdAt = {
+                    $between: [filters.startDate.toISOString(), filters.endDate.toISOString()]
+                };
+            } else if (filters.startDate) {
+                queryData.filters = queryData.filters || {};
+                queryData.filters.createdAt = { $gte: filters.startDate.toISOString() };
+            } else if (filters.endDate) {
+                queryData.filters = queryData.filters || {};
+                queryData.filters.createdAt = { $lte: filters.endDate.toISOString() };
+            }
+
+            const queryString = qs.stringify(queryData, {
+                encodeValuesOnly: true,
+            });
+            const response = await getchatterMessage({
+                entityId: id,
+                entityName: modelSingularName,
+                qs: queryString
+            }).unwrap();
+            const processedMessages = response.data.records.map((msg: any) => {
+                if (msg.messageType === 'custom') {
+                    // Custom message
+                    return {
+                        id: msg.id,
+                        user: msg.user?.fullName || "System",
+                        messageType: "custom",
+                        message: msg.messageBody,
+                        time: new Date(msg.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+                        createdAt: msg.createdAt,
+                        date: formatDate(msg.createdAt),
+                        media: msg._media,
+                        messageSubType: msg.messageSubType,
+                        modelDisplayName: msg.modelDisplayName,
+                        modelUserKey: msg.modelUserKey
+                    };
+                } else {
+                    // Audit message
+                    const auditRecord = msg.chatterMessageDetails?.map((detail: any) => ({
+                        field: detail.fieldName,
+                        fieldDisplayName: detail.fieldDisplayName,
+                        previous: detail.oldValueDisplay || detail.oldValue || 'None',
+                        current: detail.newValueDisplay || detail.newValue
+                    })) || [];
+
+                    return {
+                        id: msg.id,
+                        user: msg.user?.fullName || "System",
+                        messageType: "audit",
+                        time: new Date(msg.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+                        auditRecord: auditRecord,
+                        createdAt: msg.createdAt,
+                        date: formatDate(msg.createdAt),
+                        messageSubType: msg.messageSubType,
+                        modelDisplayName: msg.modelDisplayName,
+                        modelUserKey: msg.modelUserKey,
+                        message: msg.messageBody,
+                    };
+                }
+            });
+            setMessages(processedMessages);
+            setTotalRecords(response?.data?.meta?.totalRecords || 0);
+        } catch (error) {
+            console.error(ERROR_MESSAGES.FETCHING_MESSAGE, error);
+        }
+    }
+
+    const handleFilterChange = (newFilters: FilterState) => {
+        setFilters({
+            name: newFilters.name,
+            startDate: newFilters.startDate,
+            endDate: newFilters.endDate
+        });
+        setLimit(25);
+    };
+
+    const handleLoadMore = () => {
+        setLimit(prevLimit => prevLimit + 25);
+    };
+
+    return (
+        <div className='h-full'>
+            <SolidChatterHeader
+                id={id}
+                refetch={fetchData}
+                modelSingularName={modelSingularName}
+                activeTab={activeTab}
+                handleTabClick={handleTabClick}
+                visibleBox={visibleBox}
+                onFilterChange={handleFilterChange}
+            />
+            <div className='p-3' style={{
+                overflowY: 'scroll',
+                height:
+                    visibleBox === 'email-message'
+                        ? 'calc(100vh - 196px)'
+                        : visibleBox === 'log'
+                            ? 'calc(100vh - 172px)'
+                            : 'calc(100vh - 65px)',
+            }}>
+                {isChatterLoading ? (
+                    <div className='flex align-items-center justify-content-center h-full font-medium'>
+                        Loading...
+                    </div>
+                ) : messages.length === 0 ? (
+                    <div className='flex align-items-center justify-content-center h-full font-medium'>
+                        No Data Available
+                    </div>
+                ) : (
+                    <>
+                        {actionsAllowed.includes(`${permissionExpression('chatterMessage', 'findMany')}`) ?
+                            (messages.map((message, index) => {
+                                const showDateDivider = index === 0 || message.date !== messages[index - 1].date;
+                                return (
+                                    <div key={message.id}>
+                                        {showDateDivider && <SolidChatterDateDivider date={message.date} />}
+                                        <SolidChatterMessageBox
+                                            user={message.user}
+                                            messageType={message.messageType}
+                                            message={message.message}
+                                            time={message.time}
+                                            auditRecord={message.auditRecord}
+                                            media={message.media}
+                                            messageSubType={message.messageSubType}
+                                            modelDisplayName={message.modelDisplayName}
+                                            modelUserKey={message.modelUserKey}
+                                        />
+                                    </div>
+                                );
+                            }))
+                            : <div className="p-3">
+                                <div className='p-3 border-round text-red-500 bg-red-50 flex align-items-center gap-3'>
+                                    <i className="pi pi-exclamation-triangle" />
+                                    You do not have permission to view these messages.
+                                </div>
+                            </div>
+                        }
+                        {totalRecords > messages.length && (
+                            <div className='flex justify-content-center mt-3 mb-3'>
+                                <span
+                                    onClick={handleLoadMore}
+                                    className='cursor-pointer text-primary font-medium px-4 py-2'
+                                    style={{
+                                        userSelect: 'none',
+                                        borderRadius: '6px',
+                                        transition: 'all 0.2s ease',
+                                        display: 'inline-block'
+                                    }}
+                                    onMouseEnter={(e) => {
+                                        e.currentTarget.style.backgroundColor = 'rgba(59, 130, 246, 0.1)';
+                                        e.currentTarget.style.transform = 'translateY(-1px)';
+                                    }}
+                                    onMouseLeave={(e) => {
+                                        e.currentTarget.style.backgroundColor = 'transparent';
+                                        e.currentTarget.style.transform = 'translateY(0)';
+                                    }}
+                                >
+                                    Load More...
+                                </span>
+                            </div>
+                        )}
+                    </>
+                )}
+            </div>
+        </div>
+    )
+}