@solidxai/core-ui 0.1.0 → 0.1.2

package/src/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler.ts

@@ -1,64 +0,0 @@
-import { useState } from "react";
-import qs from "qs";
-import { createSolidEntityApi } from "../../../../../../../redux/api/solidEntityApi";
-
-export const useRelationEntityHandler = ({ fieldContext, formik, autoCompleteLimit = 1000 }: any) => {
-  const fieldMetadata = fieldContext.fieldMetadata;
-  const fieldLayoutInfo = fieldContext.field;
-
-  const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
-  const { useLazyGetSolidEntitiesQuery } = entityApi;
-  const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();
-
-  const [autoCompleteItems, setAutoCompleteItems] = useState([]);
-
-  const fetchRelationEntities = async (autocompleteQs = "", limit = autoCompleteLimit) => {
-    // const queryData = {
-    //   offset: 0,
-    //   limit: limit,
-    //   filters: {
-    //     [fieldMetadata?.relationModel?.userKeyField?.name]: {
-    //       '$containsi': query
-    //     }
-    //   }
-    // };
-
-    // const autocompleteQs = qs.stringify(queryData, { encodeValuesOnly: true });
-
-    const response = await triggerGetSolidEntities(autocompleteQs);
-    const data = response.data;
-
-    if (data) {
-      const mappedItems = data.records.map((item: any) => ({
-        label: item[fieldMetadata?.relationModel?.userKeyField?.name],
-        value: item['id'],
-        original: item
-      }));
-      setAutoCompleteItems(mappedItems);
-    }
-  };
-
-  const addNewRelation = (values: any) => {
-    const currentData = formik.values[fieldLayoutInfo.attrs.name] || [];
-    const jsonValues = Object.fromEntries(values.entries());
-    const newItem = {
-      label: jsonValues[fieldMetadata?.relationModel?.userKeyField?.name],
-      value: "new",
-      original: jsonValues,
-    };
-
-    formik.setFieldValue(fieldLayoutInfo.attrs.name, [...currentData, newItem]);
-
-    // Optionally add to autocomplete list
-    setAutoCompleteItems((prev: any) => {
-      const exists = prev.some((item: any) => item.label === newItem.label);
-      return exists ? prev : [...prev, newItem];
-    });
-  };
-
-  return {
-    autoCompleteItems,
-    fetchRelationEntities,
-    addNewRelation
-  };
-};

package/src/components/core/form/fields/solidFields.module.css

@@ -1,7 +0,0 @@
-.solidCustomSlider {
-    height: 0.625rem;
-}
-.solidCustomSlider .p-slider .p-slider-handle {
-    background: var(--primary-color);
-    border: 2px solid #fff;
-}

package/src/components/core/form/fields/widgets/SolidAiInteractionMessageFieldFormWidget.tsx

@@ -1,135 +0,0 @@
-
-import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
-import MarkdownViewer from "../../../../../components/common/MarkdownViewer";
-import ReactCodeMirror, { EditorView } from "@uiw/react-codemirror";
-import { javascript } from '@codemirror/lang-javascript';
-import { oneDark } from '@codemirror/theme-one-dark';
-import { ERROR_MESSAGES } from "../../../../../constants/error-messages";
-
-
-export const SolidAiInteractionMessageFieldFormWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;
-    const value = formik.values[fieldLayoutInfo.attrs.name];
-    const contentType = formik?.values?.contentType ? formik?.values?.contentType : "markdown"
-
-    const renderContent = () => {
-
-        switch (contentType) {
-            case 'json':
-                return (
-                    <JsonDisplay message={value} />
-                )
-            case 'markdown':
-                return (
-                    <MarkdownDisplay message={value} />
-                )
-            case 'plain_text':
-            default:
-                return <PlainTextDisplay message={value} />
-        }
-    }
-
-    return (
-        <div className="mt-2 flex-column">
-            <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
-            {value && renderContent()}
-        </div>
-    );
-}
-
-
-
-export interface MarkdownDisplayProps {
-    message: any
-}
-
-export const MarkdownDisplay: React.FC<MarkdownDisplayProps> = ({ message }) => {
-    // const jsonMsg = JSON.parse(interaction.message);
-    // const markdown = jsonMsg.data;
-    let jsonMsg: any;
-    let markdown: string;
-
-    try {
-        if (typeof message === "string") {
-            try {
-                jsonMsg = JSON.parse(message.trim());
-                markdown = jsonMsg?.data ?? "";
-            } catch (jsonErr) {
-                // Not valid JSON → treat the raw string as markdown
-                markdown = message.trim();
-            }
-        } else if (typeof message === "object" && message !== null) {
-            // Already an object
-            jsonMsg = message;
-            markdown = jsonMsg?.data ?? "";
-        } else {
-            // Fallback for other types
-            markdown = String(message ?? "");
-        }
-    } catch (err: any) {
-        // Worst-case fallback: put the error string in markdown
-        markdown = ERROR_MESSAGES.INTERATCTION_MESSGAE(err?.message,err);
-        
-    }
-    // 🔧 Normalize escaped newlines, tabs, and quotes
-    if (markdown.includes("\\n")) {
-        markdown = markdown
-            .replace(/\\n/g, "\n")
-            .replace(/\\t/g, "\t")
-            .replace(/\\r/g, "")
-            .replace(/\\"/g, '"');
-    }
-
-    // ✅ markdown is now clean and render-ready
-
-    return (
-        <div className={`p-3 `} style={{ width: '100%' }}>
-            <MarkdownViewer data={markdown} />
-        </div>
-    )
-}
-
-
-export interface JsonDisplayProps {
-    message: any
-}
-
-export const JsonDisplay: React.FC<JsonDisplayProps> = ({ message }) => {
-    let formattedJson = ''
-    try {
-        const parsed = JSON.parse(message)
-        formattedJson = JSON.stringify(parsed, null, 2)
-    } catch (e) {
-        // formattedJson = 'Invalid JSON'
-        formattedJson = message;
-    }
-
-    return (
-        <div className={`p-3 `} style={{ width: '100%' }}>
-            <ReactCodeMirror
-                value={formattedJson}
-                style={{ fontSize: '10px' }}
-                theme={oneDark}
-                extensions={[javascript(), EditorView.lineWrapping]}
-            />
-        </div>
-    )
-}
-
-
-
-export interface PlainTextDisplayProps {
-    message: any
-}
-
-export const PlainTextDisplay: React.FC<PlainTextDisplayProps> = ({ message }) => {
-    return (
-        <div className={`p-3`}>
-            {message}
-        </div>
-    )
-}

package/src/components/core/form/fields/widgets/SolidAiInteractionMetadataFieldFormWidget.tsx

@@ -1,144 +0,0 @@
-
-import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
-import MarkdownViewer from "../../../../../components/common/MarkdownViewer";
-import { Accordion, AccordionTab } from "primereact/accordion";
-import { Button } from "primereact/button";
-import { TabView, TabPanel } from "primereact/tabview";
-import ReactCodeMirror, { EditorView, oneDark } from "@uiw/react-codemirror";
-import { javascript } from "@codemirror/lang-javascript";
-
-export const SolidAiInteractionMetadataFieldFormWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;
-    const value = formik.values[fieldLayoutInfo.attrs.name];
-
-    return (
-        <div className="mt-2 flex-column">
-            {/* <p className="m-0 form-field-label font-medium">{fieldLabel}</p> */}
-
-            <TabView>
-                {/* -------------------- Tab 1: Metadata & Prompts -------------------- */}
-                <TabPanel header="Chunks">
-                    <div className="solid-layout-accordion">
-                        <Accordion multiple expandIcon="pi pi-chevron-down" collapseIcon="pi pi-chevron-up" activeIndex={[0]}>
-                            {value?.chunks?.map((c: any) => {
-                                let processedText = c.text || '';
-                                const meta = c.metadata || {};
-
-                                // 🧠 Identify type
-                                const isDoc = !!meta.path || meta.source === "docusaurus";
-                                const isModule = meta.type === "module";
-                                const isModel = meta.type === "model";
-
-                                // 🧹 Clean text for docs
-                                if (isDoc) {
-                                    processedText = processedText
-                                        .replace(/^Document Title:\s*/i, "")
-                                        .replace(/^Text:\s*/i, "")
-                                        .trim();
-                                }
-
-                                // 🧩 Extract "Full model metadata json" if present
-                                if (isModel) {
-                                    const match = processedText.match(/Full model metadata json:\s*\n?({[\s\S]+})/);
-                                    if (match) {
-                                        try {
-                                            // Format the JSON nicely
-                                            const pretty = JSON.stringify(JSON.parse(match[1]), null, 2);
-                                            // Replace the raw JSON text with a fenced code block
-                                            processedText = processedText.replace(
-                                                match[0],
-                                                `**Full model metadata json:**\n\n\`\`\`json\n${pretty}\n\`\`\``
-                                            );
-                                        } catch {
-                                            // Fallback: wrap raw text if JSON invalid
-                                            processedText = processedText.replace(
-                                                match[0],
-                                                `**Full model metadata json (raw):**\n\n\`\`\`\n${match[1]}\n\`\`\``
-                                            );
-                                        }
-                                    }
-                                }
-
-                                // 🏷️ Header label
-                                let headerTitle = "Unknown";
-                                if (isModule) {
-                                    headerTitle = `Module: ${meta.moduleName} (${meta.modelCount} models)`;
-                                } else if (isModel) {
-                                    headerTitle = `Model: ${meta.modelName} (${meta.fieldCount} fields)`;
-                                } else if (isDoc) {
-                                    headerTitle = `Doc: ${meta.title || meta.doc_title || meta.path}`;
-                                }
-
-                                // 🌐 External link (docs only)
-                                const openDoc = (e: any) => {
-                                    e.stopPropagation();
-                                    if (isDoc) {
-                                        const cleanPath = (meta.path || "").replace(/\.md$/, "");
-                                        const url = `https://docs.solidxai.com/docs/${cleanPath}`;
-                                        window.open(url, "_blank");
-                                    }
-                                };
-
-                                return (
-                                    <AccordionTab
-                                        key={c.id}
-                                        header={
-                                            <div className="flex justify-between items-center w-full">
-                                                <span className="font-medium">{headerTitle}</span>
-                                                {isDoc && (
-                                                    <Button
-                                                        icon="pi pi-external-link"
-                                                        rounded
-                                                        text
-                                                        outlined
-                                                        style={{ height: "1.5rem" }}
-                                                        onClick={openDoc}
-                                                    />
-                                                )}
-                                            </div>
-                                        }
-                                    >
-                                        <div key={c.id} className="shadow-1 bg-bluegray-50 p-3">
-                                            <MarkdownViewer data={processedText} />
-                                        </div>
-                                    </AccordionTab>
-                                );
-                            })}
-                        </Accordion>
-                    </div>
-                </TabPanel>
-                <TabPanel header="System Prompt">
-                    {value?.system_prompt && (
-                        <div>
-                            <MarkdownViewer data={value.system_prompt} />
-                        </div>
-                    )}
-                </TabPanel>
-                <TabPanel header="User Prompt">
-                    {value?.user_prompt && (
-                        <div>
-                            <MarkdownViewer data={value.user_prompt} />
-                        </div>
-                    )}
-                </TabPanel>
-                <TabPanel header="Token Usage">
-                    {value?.tokenUsage && (
-                        <div className={`p-3 `} style={{ width: '100%' }}>
-                            <ReactCodeMirror
-                                value={JSON.stringify(value.tokenUsage, null, 2)}
-                                style={{ fontSize: '10px' }}
-                                theme={oneDark}
-                                extensions={[javascript(), EditorView.lineWrapping]}
-                            />
-                        </div>
-                    )}
-                </TabPanel>
-            </TabView>
-        </div>
-    );
-}
-

package/src/components/core/form/fields/widgets/SolidIconEditWidget.tsx

@@ -1,265 +0,0 @@
-
-import { solidIcons } from "../../../../../helpers/solidIcons";
-import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
-import { Dropdown } from "primereact/dropdown";
-import { InputText } from "primereact/inputtext";
-import { useEffect, useState } from "react";
-
-export const SolidIconEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-    console.log("SolidIconWidget", "formik : ", formik, "fieldContext : ", fieldContext);
-
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const fieldName = fieldLayoutInfo?.attrs?.name;
-
-    const [openIconDialog, setOpenIconDialog] = useState(false);
-    const [selectedCategory, setSelectedCategory] = useState("All");
-    const [searchIcon, setSearchIcon] = useState("");
-    const [selectedIcon, setSelectedIcon] = useState(formik.values?.[fieldName] || "");
-
-    // const [iconVariant, setIconVariant] = useState(formik.values.iconVariant || "outlined");
-
-    // const iconVariants = [
-    //     { label: "Outlined", value: "outlined" },
-    //     { label: "Rounded", value: "rounded" },
-    //     { label: "Sharp", value: "sharp" }
-    // ];
-
-    const allIcons = solidIcons.flatMap(({ category, icons }) =>
-        icons.map((icon) => ({ icon, category }))
-    );
-
-    const filteredIcons = (selectedCategory === "All" ? allIcons :
-        allIcons.filter((i) => i.category === selectedCategory)
-    ).filter(({ icon }) => icon.toLowerCase().includes(searchIcon.toLowerCase()));
-
-    const tabs = ["All", ...solidIcons.map((c) => c.category)];
-
-    useEffect(() => {
-        if (openIconDialog) {
-            setSelectedIcon(formik?.values?.[fieldName] ?? "");
-            // setIconVariant(formik.values.iconVariant ?? "outlined");
-        }
-    }, [openIconDialog]);
-
-    const handleSelectIcon = (icon: string) => {
-        setSelectedIcon(icon);
-        // setIconVariant(variant)
-        formik.setFieldValue(fieldName, icon);
-        // formik.setFieldValue("iconVariant", variant);
-    };
-
-    const handleRemoveIcon = () => {
-        setSelectedIcon("");
-        // setIconVariant(null)
-        formik.setFieldTouched(fieldName, true);
-        formik.setFieldValue(fieldName, "", true);
-        // formik.setFieldValue("iconVariant", null);
-    };
-
-    return (
-        <div>
-            <label className="form-field-label">{fieldLabel}</label>
-            <div className="flex align-items-end gap-3 mt-2">
-                <div style={{ display: 'inline-block' }}>
-                    {selectedIcon ? (
-                        // <Button
-                        //     type="button"
-                        //     icon={<span className={`material-symbols-outlined`}>{selectedIcon}</span>}
-                        //     onClick={() => setOpenIconDialog(true)}
-                        //     outlined
-                        // />
-                        <div>
-                            <span className={`material-symbols-outlined`} style={{ fontSize: 48, cursor: 'pointer' }} onClick={() => setOpenIconDialog(true)}>
-                                {selectedIcon}
-                            </span>
-                            <p className="mb-0 text-center">
-                                {selectedIcon
-                                    .split('_')
-                                    .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))
-                                    .join(' ')
-                                }
-                            </p>
-                        </div>
-                    ) : (
-                        <Button
-                            type="button"
-                            size="small"
-                            label="Select Icon"
-                            onClick={() => setOpenIconDialog(true)}
-                            outlined
-                        />
-                    )}
-                </div>
-                {selectedIcon && (
-                    <div>
-                        <Button
-                            type="button"
-                            label="Remove"
-                            className="p-button-text p-button-danger ml-2"
-                            onClick={() => {
-                                setSelectedIcon("");
-                                formik.setFieldValue(fieldName, "");
-                            }}
-                        />
-                    </div>
-                )}
-            </div>
-            <Dialog contentClassName="p-0" className="solid-icon-dialog" contentStyle={{ borderRadius: 6 }} showHeader={false} header={false} closable={false} visible={openIconDialog} style={{ width: '70vw', height: '70vh' }} breakpoints={{ '1024px': '75vw','991px': '90vw','767px':'94w', '250px': '96vw'}} onHide={() => setOpenIconDialog(false)}>
-                <div>
-                    <div className="grid m-0 flex-column md:flex-row ">
-                        <div className="col-12 lg:col-3 p-0">
-                            <div className="flex flex-column justify-content-between p-3 lg:p-4" style={{ height: '100%' }}>
-                                <div className="">
-                                    {/* <p className="font-medium">Variant</p>
-                                    <Dropdown
-                                        value={iconVariant}
-                                        onChange={(e) => setIconVariant(e.value)}
-                                        options={iconVariants}
-                                        optionLabel="label"
-                                        className="w-full mb-3"
-                                        checkmark
-                                        highlightOnSelect={false}
-                                        placeholder="Select Variant"
-                                    /> */}
-
-                                    <p className="font-medium">Category</p>
-                                    <div style={{ marginBottom: "1rem", display: "flex", gap: "1rem", flexWrap: "wrap" }} className="solid-icon-category-wrapper">
-                                        {tabs.map((tab) => (
-                                            <Button
-                                                type='button'
-                                                key={tab}
-                                                size="small"
-                                                onClick={() => {
-                                                    setSelectedCategory(tab);
-                                                    setSearchIcon("");
-                                                }}
-                                                outlined={selectedCategory === tab ? false : true}
-                                                style={{
-                                                    padding: "8px 16px",
-                                                    fontSize: 12
-                                                }}
-                                                className="solid-icon-category"
-                                                severity="secondary"
-                                            >
-                                                {tab}
-                                            </Button>
-                                        ))}
-                                    </div>
-                                </div>
-                                <div className="flex gap-3">
-                                    <Button type="button" size="small" label="Select" onClick={() => setOpenIconDialog(false)} />
-                                    <Button type="button" size="small" outlined label="Cancel" onClick={() => setOpenIconDialog(false)} />
-                                </div>
-                            </div>
-                        </div>
-
-                        <div className="col-6 p-0 flex lg:hidden">
-                            <div className="p-3 lg:p-4">
-                                <p className="font-medium">Selected Icon</p>
-                                {selectedIcon && (
-                                    <>
-                                        <div className="flex justify-content-center">
-                                            <span className={`material-symbols-outlined`} style={{ fontSize: 100 }}>
-                                                {selectedIcon}
-                                            </span>
-                                        </div>
-                                        <p className='mt-2 text-center'>
-                                            {selectedIcon
-                                                .split('_')
-                                                .map((word: any) => word.charAt(0).toUpperCase() + word.slice(1))
-                                                .join(' ')
-                                            }
-                                        </p>
-                                        {/* <code className="mt-2 d-block">
-                                            {`<span class="material-symbols-${iconVariant || "outlined"}">${selectedIcon}</span>`}
-                                        </code> */}
-                                    </>
-                                )}
-                            </div>
-
-                        </div>
-                        <div className="col-12 lg:col-6 p-0" style={{ borderLeft: '1px solid var(--primary-light-color)', borderRight: '1px solid var(--primary-light-color)' }}>
-                            <div className="px-3 lg:px-4 pt-3 lg:pt-4">
-                                <div>
-                                    <p className="font-medium">Select Icon</p>
-                                    <InputText
-                                        type="text"
-                                        placeholder={`Search icons in "${selectedCategory}"`}
-                                        value={searchIcon}
-                                        onChange={(e) => setSearchIcon(e.target.value)}
-                                        className="w-full"
-                                    />
-                                </div>
-                            </div>
-                            <div style={{ height: 'calc(70vh - 125px)', overflowY: 'auto', overflowX: 'hidden' }} className="px-4 pb-3 mt-4">
-                                <div className="grid">
-                                    {filteredIcons.length > 0 ? (
-                                        filteredIcons.map(({ icon, category }) => (
-                                            <div className="col-3" key={icon}>
-                                                <div className="w-full flex flex-column align-items-center justify-content-center gap-3">
-                                                    <span
-                                                        className={`material-symbols-outlined`}
-                                                        style={{
-                                                            fontSize: 32,
-                                                            cursor: "pointer",
-                                                            padding: "8px",
-                                                            border: selectedIcon === icon ? "2px solid var(--primary-color)" : "2px solid transparent",
-                                                            borderRadius: "6px",
-                                                        }}
-                                                        onClick={() => handleSelectIcon(icon)}
-                                                        title={`${icon} (${category})`}
-                                                    >
-                                                        {icon}
-                                                    </span>
-                                                    <p className='mb-0 mt-1 text-center'>
-                                                        {icon
-                                                            .split('_')
-                                                            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-                                                            .join(' ')
-                                                        }
-                                                    </p>
-                                                </div>
-                                            </div>
-                                        ))
-                                    ) : (
-                                        <p className="mt">No icons found.</p>
-                                    )}
-                                </div>
-                            </div>
-                        </div>
-
-                        <div className="col-3 p-0 hidden lg:flex">
-                            <div className="p-3 lg:p-4">
-                                <p className="font-medium">Selected Icon</p>
-                                {selectedIcon && (
-                                    <>
-                                        <div className="flex justify-content-center">
-                                            <span className={`material-symbols-outlined`} style={{ fontSize: 100 }}>
-                                                {selectedIcon}
-                                            </span>
-                                        </div>
-                                        <p className='mt-2 text-center'>
-                                            {selectedIcon
-                                                .split('_')
-                                                .map((word: any) => word.charAt(0).toUpperCase() + word.slice(1))
-                                                .join(' ')
-                                            }
-                                        </p>
-                                        {/* <code className="mt-2 d-block">
-                                            {`<span class="material-symbols-${iconVariant || "outlined"}">${selectedIcon}</span>`}
-                                        </code> */}
-                                    </>
-                                )}
-                            </div>
-
-                        </div>
-                    </div>
-                </div>
-            </Dialog>
-        </div>
-    );
-};

package/src/components/core/form/fields/widgets/SolidIconViewWidget.tsx

@@ -1,32 +0,0 @@
-import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
-
-export const SolidIconViewWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const fieldName = fieldLayoutInfo?.attrs?.name;
-    const selectedIcon = formik.values?.[fieldName];
-
-    const formattedIconName = selectedIcon
-        ? selectedIcon
-            .split('_')
-            .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))
-            .join(' ')
-        : '';
-
-    return (
-        <div>
-            <label className="form-field-label">{fieldLabel}</label>
-            {selectedIcon ? (
-                <div className="mt-2" style={{display:'inline-block'}}>
-                    <span className="material-symbols-outlined" style={{ fontSize: 48 , cursor:'pointer'}}>
-                        {selectedIcon}
-                    </span>
-                    <p className="mb-0 text-center">{formattedIconName}</p>
-                </div>
-            ) : (
-                <p className="mt-2">No icon selected.</p>
-            )}
-        </div>
-    );
-};