@solidstarters/solid-core-ui 1.1.210 → 1.1.211

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

@@ -0,0 +1,64 @@
+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/widgets/SolidAiInteractionMessageFieldFormWidget.tsx

@@ -0,0 +1,135 @@
+"use client";
+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

@@ -0,0 +1,144 @@
+"use client";
+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

@@ -0,0 +1,265 @@
+"use client";
+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

@@ -0,0 +1,32 @@
+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>
+    );
+};