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

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

@@ -1,20 +1,32 @@
-import React from "react";
-import { SolidInput, SolidSelect, SolidSwitch, SolidTextarea } from "../../../shad-cn-ui";
+import React, { useState } from "react";
+import {
+  SolidButton,
+  SolidDialog,
+  SolidDialogBody,
+  SolidDialogFooter,
+  SolidDialogHeader,
+  SolidDialogTitle,
+  SolidInput,
+  SolidSelect,
+  SolidSwitch,
+  SolidTextarea,
+} from "../../../shad-cn-ui";
+
 
 export interface ModelBehavior {
   streaming: boolean;
   custom: string;
 }
 
-export interface ProviderConfig {
-  provider: string;
+export interface ProviderEntry {
+  type: string;
   apiKey: string;
-  model: string;
   baseUrl?: string;
 }
 
 export interface ModelEntry {
-  providerKey: string;
+  providerId: string;
+  model: string;
   behavior: ModelBehavior;
 }
 
@@ -23,125 +35,353 @@ export interface SolidAiConfig {
     default: ModelEntry;
     fast: ModelEntry;
   };
-  providers: Record<string, ProviderConfig>;
+  providers: Record<string, ProviderEntry>;
 }
 
-interface Props {
-  providerKey: string;
-  providerConfig: ProviderConfig;
-  behavior: ModelBehavior;
-  allProviders: Record<string, ProviderConfig>;
-  onProviderKeyChange: (newProviderKey: string, config: ProviderConfig) => void;
-  onProviderConfigChange: (providerKey: string, config: ProviderConfig) => void;
-  onBehaviorChange: (behavior: ModelBehavior) => void;
-}
 
-const PROVIDER_OPTIONS = [
+const PROVIDER_TYPE_OPTIONS = [
   { label: "OpenAI", value: "openai" },
   { label: "Anthropic", value: "anthropic" },
   { label: "OpenAI Compatible", value: "openai-compatible" },
   { label: "Anthropic Compatible", value: "anthropic-compatible" },
 ];
 
-const COMPATIBLE_PROVIDERS = ["openai-compatible", "anthropic-compatible"];
+const COMPATIBLE_TYPES = ["openai-compatible", "anthropic-compatible"];
 
-const DEFAULT_PROVIDER_CONFIGS: Record<string, ProviderConfig> = {
-  openai: { provider: "openai", apiKey: "", model: "" },
-  anthropic: { provider: "anthropic", apiKey: "", model: "" },
-  "openai-compatible": { provider: "openai-compatible", apiKey: "", model: "", baseUrl: "" },
-  "anthropic-compatible": { provider: "anthropic-compatible", apiKey: "", model: "", baseUrl: "" },
+const BUILT_IN_TYPES = ["openai", "anthropic"];
+
+const DEFAULT_BUILT_IN_PROVIDERS: Record<string, ProviderEntry> = {
+  openai: { type: "openai", apiKey: "" },
+  anthropic: { type: "anthropic", apiKey: "" },
 };
 
-export const AiModelConfigTab = ({
-  providerKey,
-  providerConfig,
-  behavior,
-  allProviders,
-  onProviderKeyChange,
-  onProviderConfigChange,
-  onBehaviorChange,
-}: Props) => {
-  const isCompatible = COMPATIBLE_PROVIDERS.includes(providerKey);
-
-  const handleProviderSelect = (value: string) => {
-    const existingConfig = allProviders[value];
-    const newConfig = existingConfig ?? DEFAULT_PROVIDER_CONFIGS[value] ?? { provider: value, apiKey: "", model: "" };
-    onProviderKeyChange(value, newConfig);
-  };
+export const ensureBuiltInProviders = (providers: Record<string, ProviderEntry>): Record<string, ProviderEntry> => ({
+  ...DEFAULT_BUILT_IN_PROVIDERS,
+  ...providers,
+});
+
+const cardStyle: React.CSSProperties = {
+  border: "1px solid var(--solid-border-color, #e2e8f0)",
+  borderRadius: "0.5rem",
+  padding: "1.25rem",
+  background: "var(--solid-card-bg, var(--solid-surface-bg, transparent))",
+};
+
+
+interface ProviderModalProps {
+  visible: boolean;
+  onHide: () => void;
+  providers: Record<string, ProviderEntry>;
+  onProvidersChange: (providers: Record<string, ProviderEntry>) => void;
+  editKey?: string | null; // null = add mode, string = edit mode
+}
+
+const ProviderModal = ({ visible, onHide, providers, onProvidersChange, editKey }: ProviderModalProps) => {
+  const isEdit = !!editKey;
+  const existingEntry = isEdit ? providers[editKey] : null;
+
+  const [providerType, setProviderType] = useState(existingEntry?.type ?? "");
+  const [providerName, setProviderName] = useState(editKey && !BUILT_IN_TYPES.includes(editKey) ? editKey : "");
+  const [providerBaseUrl, setProviderBaseUrl] = useState(existingEntry?.baseUrl ?? "");
+  const [providerApiKey, setProviderApiKey] = useState(existingEntry?.apiKey ?? "");
+
+  const isCompatible = COMPATIBLE_TYPES.includes(providerType);
+
+  // Reset state when modal opens with new data
+  React.useEffect(() => {
+    if (visible) {
+      const entry = editKey ? providers[editKey] : null;
+      setProviderType(entry?.type ?? "");
+      setProviderName(editKey && !BUILT_IN_TYPES.includes(editKey) ? editKey : "");
+      setProviderBaseUrl(entry?.baseUrl ?? "");
+      setProviderApiKey(entry?.apiKey ?? "");
+    }
+  }, [visible, editKey]);
+
+  // In add mode, only show compatible types (built-ins are always pre-added)
+  // In edit mode, show all types but lock the value
+  const typeOptions = isEdit
+    ? PROVIDER_TYPE_OPTIONS
+    : PROVIDER_TYPE_OPTIONS.filter((opt) => COMPATIBLE_TYPES.includes(opt.value));
+
+  const handleSave = () => {
+    if (!providerType) return;
 
-  const handleConfigUpdate = (key: keyof ProviderConfig, value: string) => {
-    onProviderConfigChange(providerKey, { ...providerConfig, [key]: value });
+    let key: string;
+    const entry: ProviderEntry = { type: providerType, apiKey: providerApiKey };
+
+    if (isCompatible) {
+      if (!providerName.trim()) return;
+      key = providerName.trim();
+      entry.baseUrl = providerBaseUrl;
+    } else {
+      key = providerType;
+    }
+
+    // In add mode, don't overwrite existing
+    if (!isEdit && providers[key]) return;
+
+    const next = { ...providers };
+
+    // If editing and key changed (shouldn't happen for built-in), remove old
+    if (isEdit && editKey !== key) {
+      delete next[editKey!];
+    }
+
+    next[key] = entry;
+    onProvidersChange(next);
+    onHide();
   };
 
-  const cardStyle: React.CSSProperties = {
-    border: "1px solid var(--solid-border-color, #e2e8f0)",
-    borderRadius: "0.5rem",
-    padding: "1.25rem",
-    background: "var(--solid-card-bg, var(--solid-surface-bg, transparent))",
+  const handleRemove = () => {
+    if (!editKey) return;
+    const next = { ...providers };
+    delete next[editKey];
+    onProvidersChange(next);
+    onHide();
   };
 
+  const canSave = providerType && (isCompatible ? providerName.trim() : true);
+
   return (
-    <div className="flex flex-column gap-4">
-      <div style={cardStyle}>
-        <p className="solid-settings-subheading">Provider Config</p>
-        <div className="flex flex-column gap-3 mt-3">
-          <div className="flex flex-column gap-2">
-            <label className="form-field-label">Provider</label>
-            <SolidSelect
-              className="w-full"
-              value={providerKey}
-              options={PROVIDER_OPTIONS}
-              onChange={(e) => handleProviderSelect(e.value)}
-              placeholder="Select Provider"
-            />
-          </div>
-          {isCompatible && (
-            <div className="flex flex-column gap-2">
-              <label className="form-field-label">Base URL</label>
-              <SolidInput
-                placeholder="http://localhost:8000"
-                value={providerConfig?.baseUrl || ""}
-                onChange={(e) => handleConfigUpdate("baseUrl", e.target.value)}
+    <SolidDialog open={visible} onOpenChange={(open) => !open && onHide()} style={{ width: "500px" }}>
+      <SolidDialogHeader>
+        <SolidDialogTitle>
+          {isEdit
+            ? `Edit Provider — ${BUILT_IN_TYPES.includes(editKey!) ? PROVIDER_TYPE_OPTIONS.find((o) => o.value === editKey)?.label : editKey}`
+            : "Add Provider"}
+        </SolidDialogTitle>
+      </SolidDialogHeader>
+      <SolidDialogBody>
+        <div className="flex flex-column gap-3">
+          {!(isEdit && BUILT_IN_TYPES.includes(editKey!)) && (
+            <div>
+              <label className="form-field-label">Provider Type</label>
+              <SolidSelect
                 className="w-full"
+                value={providerType}
+                options={typeOptions}
+                onChange={(e) => {
+                  setProviderType(e.value);
+                  if (!isEdit) {
+                    setProviderName("");
+                    setProviderBaseUrl("");
+                  }
+                }}
+                placeholder="Select Provider Type"
+                disabled={isEdit}
               />
             </div>
           )}
-          <div className="flex flex-column gap-2">
+          {isCompatible && (
+            <>
+              {!isEdit && (
+                <div>
+                  <label className="form-field-label">Name (unique identifier)</label>
+                  <SolidInput
+                    placeholder="e.g. openrouter, together-ai"
+                    value={providerName}
+                    onChange={(e) => setProviderName(e.target.value)}
+                    className="w-full"
+                  />
+                </div>
+              )}
+              <div>
+                <label className="form-field-label">Base URL</label>
+                <SolidInput
+                  placeholder="https://openrouter.ai/api/v1"
+                  value={providerBaseUrl}
+                  onChange={(e) => setProviderBaseUrl(e.target.value)}
+                  className="w-full"
+                />
+              </div>
+            </>
+          )}
+          <div>
             <label className="form-field-label">API Key</label>
             <SolidInput
               type="password"
+              value={providerApiKey}
+              onChange={(e) => setProviderApiKey(e.target.value)}
+              className="w-full"
+            />
+          </div>
+        </div>
+      </SolidDialogBody>
+      <SolidDialogFooter>
+        <div className="flex justify-content-between w-full">
+          <div>
+            {isEdit && !BUILT_IN_TYPES.includes(editKey!) && (
+              <SolidButton variant="ghost" onClick={handleRemove} style={{ color: "var(--solid-danger-color, #ef4444)" }}>
+                Remove
+              </SolidButton>
+            )}
+          </div>
+          <div className="flex gap-2">
+            <SolidButton variant="outline" onClick={onHide}>
+              Cancel
+            </SolidButton>
+            <SolidButton onClick={handleSave} disabled={!canSave}>
+              {isEdit ? "Save" : "Add"}
+            </SolidButton>
+          </div>
+        </div>
+      </SolidDialogFooter>
+    </SolidDialog>
+  );
+};
+
+// --- Providers Tab (List View) ---
+
+interface ProvidersTabProps {
+  providers: Record<string, ProviderEntry>;
+  onProvidersChange: (providers: Record<string, ProviderEntry>) => void;
+  showAddModal?: boolean;
+  onAddModalClose?: () => void;
+}
+
+export const ProvidersTab = ({ providers, onProvidersChange, showAddModal, onAddModalClose }: ProvidersTabProps) => {
+  const [editKey, setEditKey] = useState<string | null>(null);
+  const [modalVisible, setModalVisible] = useState(false);
+
+  // Ensure built-in providers are always present
+  const allProviders = ensureBuiltInProviders(providers);
+
+  // Open modal when parent triggers add
+  React.useEffect(() => {
+    if (showAddModal) {
+      setEditKey(null);
+      setModalVisible(true);
+    }
+  }, [showAddModal]);
+
+  const providerEntries = Object.entries(allProviders);
+
+  const handleRowClick = (key: string) => {
+    setEditKey(key);
+    setModalVisible(true);
+  };
+
+  return (
+    <>
+      <div className="solid-simple-table">
+        <table style={{ width: "100%" }}>
+          <thead>
+            <tr>
+              <th style={{ textAlign: "left", padding: "0.75rem 1rem" }}>Name</th>
+              <th style={{ textAlign: "left", padding: "0.75rem 1rem" }}>Type</th>
+              <th style={{ textAlign: "left", padding: "0.75rem 1rem" }}>API Key</th>
+              <th style={{ textAlign: "left", padding: "0.75rem 1rem" }}>Base URL</th>
+            </tr>
+          </thead>
+          <tbody>
+            {providerEntries.length === 0 && (
+              <tr>
+                <td colSpan={4} style={{ textAlign: "center", padding: "2rem 1rem", opacity: 0.5 }}>
+                  No providers configured.
+                </td>
+              </tr>
+            )}
+            {providerEntries.map(([key, entry]) => {
+              const typeLabel = PROVIDER_TYPE_OPTIONS.find((o) => o.value === entry.type)?.label ?? entry.type;
+              const isBuiltIn = BUILT_IN_TYPES.includes(key);
+              const displayName = isBuiltIn ? typeLabel : key;
+              const maskedKey = entry.apiKey ? "\u2022".repeat(Math.min(entry.apiKey.length, 8)) : "-";
+
+              return (
+                <tr
+                  key={key}
+                  onClick={() => handleRowClick(key)}
+                  style={{ cursor: "pointer" }}
+                  className="solid-table-row-hover"
+                >
+                  <td style={{ padding: "0.75rem 1rem", fontWeight: 500 }}>{displayName}</td>
+                  <td style={{ padding: "0.75rem 1rem" }}>{typeLabel}</td>
+                  <td style={{ padding: "0.75rem 1rem" }}>{maskedKey}</td>
+                  <td style={{ padding: "0.75rem 1rem" }}>{entry.baseUrl || "-"}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      <ProviderModal
+        visible={modalVisible}
+        onHide={() => {
+          setModalVisible(false);
+          setEditKey(null);
+          onAddModalClose?.();
+        }}
+        providers={allProviders}
+        onProvidersChange={onProvidersChange}
+        editKey={editKey}
+      />
+    </>
+  );
+};
+
+// --- Model Config Tab (used for Intelligent Model & Fast Model) ---
+
+interface ModelConfigTabProps {
+  modelEntry: ModelEntry;
+  providers: Record<string, ProviderEntry>;
+  onModelEntryChange: (entry: ModelEntry) => void;
+}
+
+export const ModelConfigTab = ({ modelEntry, providers, onModelEntryChange }: ModelConfigTabProps) => {
+  const providerOptions = Object.entries(providers).map(([key, entry]) => {
+    const typeLabel = PROVIDER_TYPE_OPTIONS.find((o) => o.value === entry.type)?.label ?? entry.type;
+    const label = BUILT_IN_TYPES.includes(key) ? typeLabel : `${key} (${typeLabel})`;
+    return { label, value: key };
+  });
+
+  return (
+    <div className="flex flex-column gap-4">
+      <div style={{ ...cardStyle, width: "50%" }}>
+        <p className="solid-settings-subheading">Model Config</p>
+        <div className="flex flex-column gap-3 mt-3">
+          <div>
+            <label className="form-field-label">Provider</label>
+            <SolidSelect
               className="w-full"
-              value={providerConfig?.apiKey || ""}
-              onChange={(e) => handleConfigUpdate("apiKey", e.target.value)}
+              value={modelEntry.providerId}
+              options={providerOptions}
+              onChange={(e) => onModelEntryChange({ ...modelEntry, providerId: e.value })}
+              placeholder="Select Provider"
             />
           </div>
-          <div className="flex flex-column gap-2">
+          <div>
             <label className="form-field-label">Model</label>
             <SolidInput
               placeholder="e.g. gpt-4o-mini"
-              value={providerConfig?.model || ""}
-              onChange={(e) => handleConfigUpdate("model", e.target.value)}
+              value={modelEntry.model || ""}
+              onChange={(e) => onModelEntryChange({ ...modelEntry, model: e.target.value })}
               className="w-full"
             />
           </div>
         </div>
       </div>
 
-      <div style={cardStyle}>
+      <div style={{ ...cardStyle, width: "50%" }}>
         <p className="solid-settings-subheading">Behavior</p>
         <div className="flex flex-column gap-3 mt-3">
           <div className="flex align-items-center gap-2">
             <SolidSwitch
-              checked={behavior.streaming}
-              onChange={(val) => onBehaviorChange({ ...behavior, streaming: val })}
+              checked={modelEntry.behavior.streaming}
+              onChange={(val) =>
+                onModelEntryChange({ ...modelEntry, behavior: { ...modelEntry.behavior, streaming: val } })
+              }
             />
             <label className="form-field-label" style={{ marginBottom: 0 }}>Streaming</label>
           </div>
-          <div className="flex flex-column gap-2">
+          <div>
             <label className="form-field-label">Custom Params (JSON)</label>
             <SolidTextarea
-              value={behavior.custom}
-              onChange={(e) => onBehaviorChange({ ...behavior, custom: e.target.value })}
+              value={modelEntry.behavior.custom}
+              onChange={(e) =>
+                onModelEntryChange({ ...modelEntry, behavior: { ...modelEntry.behavior, custom: e.target.value } })
+              }
               placeholder='{ "temperature": 0.7, "maxTokens": 1000 }'
               rows={4}
               className="w-full"
@@ -149,7 +389,6 @@ export const AiModelConfigTab = ({
           </div>
         </div>
       </div>
-
     </div>
   );
 };

package/dist/components/core/common/LoadDynamicJsxComponent.d.ts

@@ -0,0 +1,2 @@
+export declare const LoadDynamicJsxComponent: ({ context }: any) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LoadDynamicJsxComponent.d.ts.map

package/dist/components/core/common/LoadDynamicJsxComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadDynamicJsxComponent.d.ts","sourceRoot":"./","sources":["components/core/common/LoadDynamicJsxComponent.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,uBAAuB,gBAAiB,GAAG,4CAoDvD,CAAA"}

package/dist/components/core/common/LoadDynamicJsxComponent.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ERROR_MESSAGES } from "../../../constants/error-messages";
+import dynamic from "next/dynamic";
+import { useState, useEffect } from "react";
+// Fallback component for missing components
+const FallbackComponent = ({ componentName }) => (_jsxs("div", { style: { color: "red" }, children: ["Could not load ", _jsx("strong", { children: componentName })] }));
+export const LoadDynamicJsxComponent = ({ context }) => {
+    // const Component = dynamic<Props>(
+    //     async () => {
+    //         try {
+    //             const componentName = context?.rowAction?.action?.customComponent.split('/').pop();
+    //             const mod = await import();
+    //             // Return the default export or a named export matching the componentName
+    //             return mod.default || mod[componentName];
+    //         } catch (error) {
+    //             console.error(`Failed to load component "${context?.rowAction?.action?.customComponent}":`, error);
+    //             // Return a fallback component if the import fails
+    //             return () => <GenerateModelCodeRowAction context={context} />;
+    //         }
+    //     },
+    //     { ssr: false } // Disable server-side rendering
+    // );
+    const [Component, setComponent] = useState(null);
+    const componentPath = context?.rowAction?.action?.customComponent;
+    const componentKey = componentPath?.split("/")?.pop();
+    const componentMap = {
+        "GenerateModelCodeRowAction": dynamic(() => import("../extension/solid-core/modelMetadata/list/GenerateModelCodeRowAction"), { ssr: false }),
+        "GenerateModuleCodeRowAction": dynamic(() => import("../extension/solid-core/moduleMetadata/list/GenerateModuleCodeRowAction"), { ssr: false }),
+    };
+    useEffect(() => {
+        if (!componentKey)
+            return;
+        if (componentMap[componentKey]) {
+            setComponent(() => () => setComponent(() => componentMap[componentKey]));
+        }
+        else {
+            import(componentPath)
+                .then((mod) => setComponent(() => mod.default || mod))
+                .catch((err) => {
+                console.error(` ${ERROR_MESSAGES.LOADING_COMPONENT} ${componentPath}:`, err);
+                setComponent(() => () => _jsx(FallbackComponent, { componentName: componentKey }));
+            });
+        }
+    }, [componentKey]);
+    if (!Component)
+        return _jsx("p", { children: "Loading..." });
+    return _jsx(Component, { context: context });
+};
+//# sourceMappingURL=LoadDynamicJsxComponent.js.map

package/dist/components/core/common/LoadDynamicJsxComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadDynamicJsxComponent.js","sourceRoot":"./","sources":["components/core/common/LoadDynamicJsxComponent.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,OAAO,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,4CAA4C;AAC5C,MAAM,iBAAiB,GAAG,CAAC,EAAE,aAAa,EAAO,EAAE,EAAE,CAAC,CAClD,eAAK,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,gCACT,2BAAS,aAAa,GAAU,IAC7C,CACT,CAAC;AAMF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,OAAO,EAAO,EAAE,EAAE;IAGxD,oCAAoC;IACpC,oBAAoB;IACpB,gBAAgB;IAEhB,kGAAkG;IAClG,0CAA0C;IAC1C,wFAAwF;IACxF,wDAAwD;IACxD,4BAA4B;IAC5B,kHAAkH;IAClH,iEAAiE;IACjE,6EAA6E;IAC7E,YAAY;IACZ,SAAS;IACT,sDAAsD;IACtD,KAAK;IACL,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAM,IAAI,CAAC,CAAC;IACtD,MAAM,aAAa,GAAG,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,eAAe,CAAC;IAClE,MAAM,YAAY,GAAG,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC;IAEtD,MAAM,YAAY,GAAwB;QACtC,4BAA4B,EAAE,OAAO,CACnC,GAAG,EAAE,CAAC,MAAM,CAAC,uEAAuE,CAAC,EACrF,EAAE,GAAG,EAAE,KAAK,EAAE,CACf;QACD,6BAA6B,EAAE,OAAO,CAClC,GAAG,EAAE,CAAC,MAAM,CAAC,yEAAyE,CAAC,EACvF,EAAE,GAAG,EAAE,KAAK,EAAE,CACjB;KACJ,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,YAAY;YAAE,OAAO;QAE1B,IAAI,YAAY,CAAC,YAAY,CAAC,EAAE;YAC5B,YAAY,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;SAC5E;aAAM;YACP,MAAM,CAAC,aAAa,CAAC;iBAChB,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,CAAC;iBACrD,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE;gBACf,OAAO,CAAC,KAAK,CAAC,IAAI,cAAc,CAAC,iBAAiB,IAAI,aAAa,GAAG,EAAE,GAAG,CAAC,CAAC;gBAC7E,YAAY,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,KAAC,iBAAiB,IAAC,aAAa,EAAE,YAAY,GAAI,CAAC,CAAC;YAC7E,CAAC,CAAC,CAAC;SACN;IACL,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,IAAI,CAAC,SAAS;QAAE,OAAO,qCAAiB,CAAC;IAEzC,OAAO,KAAC,SAAS,IAAC,OAAO,EAAE,OAAO,GAAI,CAAC;AAC3C,CAAC,CAAA","sourcesContent":["'use client';\nimport { ERROR_MESSAGES } from \"../../../constants/error-messages\";\nimport dynamic from \"next/dynamic\";\nimport { useState, useEffect } from \"react\";\n// Fallback component for missing components\nconst FallbackComponent = ({ componentName }: any) => (\n    <div style={{ color: \"red\" }}>\n        Could not load <strong>{componentName}</strong>\n    </div>\n);\n\ntype Props = {\n    context: any;\n};\n\nexport const LoadDynamicJsxComponent = ({ context }: any) => {\n\n    \n    // const Component = dynamic<Props>(\n    //     async () => {\n    //         try {\n               \n    //             const componentName = context?.rowAction?.action?.customComponent.split('/').pop();\n    //             const mod = await import();\n    //             // Return the default export or a named export matching the componentName\n    //             return mod.default || mod[componentName];\n    //         } catch (error) {\n    //             console.error(`Failed to load component \"${context?.rowAction?.action?.customComponent}\":`, error);\n    //             // Return a fallback component if the import fails\n    //             return () => <GenerateModelCodeRowAction context={context} />;\n    //         }\n    //     },\n    //     { ssr: false } // Disable server-side rendering\n    // );\n    const [Component, setComponent] = useState<any>(null);\n    const componentPath = context?.rowAction?.action?.customComponent;\n    const componentKey = componentPath?.split(\"/\")?.pop();\n\n    const componentMap: Record<string, any> = {\n        \"GenerateModelCodeRowAction\": dynamic(\n          () => import(\"../extension/solid-core/modelMetadata/list/GenerateModelCodeRowAction\"),\n          { ssr: false }\n        ),\n        \"GenerateModuleCodeRowAction\": dynamic(\n            () => import(\"../extension/solid-core/moduleMetadata/list/GenerateModuleCodeRowAction\"),\n            { ssr: false }\n        ),\n    };\n\n    useEffect(() => {\n        if (!componentKey) return;\n\n        if (componentMap[componentKey]) {\n            setComponent(() => () => setComponent(() => componentMap[componentKey]));\n        } else {\n        import(componentPath)\n            .then((mod) => setComponent(() => mod.default || mod))\n            .catch((err) => {\n            console.error(` ${ERROR_MESSAGES.LOADING_COMPONENT} ${componentPath}:`, err);\n            setComponent(() => () => <FallbackComponent componentName={componentKey} />);\n            });\n        }\n    }, [componentKey]);\n\n    if (!Component) return <p>Loading...</p>;\n\n    return <Component context={context} />;\n}\n\n\n"]}

package/dist/components/core/common/LoadDynamicJsxComponent.tsx

@@ -0,0 +1,70 @@
+'use client';
+import { ERROR_MESSAGES } from "../../../constants/error-messages";
+import dynamic from "next/dynamic";
+import { useState, useEffect } from "react";
+// Fallback component for missing components
+const FallbackComponent = ({ componentName }: any) => (
+    <div style={{ color: "red" }}>
+        Could not load <strong>{componentName}</strong>
+    </div>
+);
+
+type Props = {
+    context: any;
+};
+
+export const LoadDynamicJsxComponent = ({ context }: any) => {
+
+    
+    // const Component = dynamic<Props>(
+    //     async () => {
+    //         try {
+               
+    //             const componentName = context?.rowAction?.action?.customComponent.split('/').pop();
+    //             const mod = await import();
+    //             // Return the default export or a named export matching the componentName
+    //             return mod.default || mod[componentName];
+    //         } catch (error) {
+    //             console.error(`Failed to load component "${context?.rowAction?.action?.customComponent}":`, error);
+    //             // Return a fallback component if the import fails
+    //             return () => <GenerateModelCodeRowAction context={context} />;
+    //         }
+    //     },
+    //     { ssr: false } // Disable server-side rendering
+    // );
+    const [Component, setComponent] = useState<any>(null);
+    const componentPath = context?.rowAction?.action?.customComponent;
+    const componentKey = componentPath?.split("/")?.pop();
+
+    const componentMap: Record<string, any> = {
+        "GenerateModelCodeRowAction": dynamic(
+          () => import("../extension/solid-core/modelMetadata/list/GenerateModelCodeRowAction"),
+          { ssr: false }
+        ),
+        "GenerateModuleCodeRowAction": dynamic(
+            () => import("../extension/solid-core/moduleMetadata/list/GenerateModuleCodeRowAction"),
+            { ssr: false }
+        ),
+    };
+
+    useEffect(() => {
+        if (!componentKey) return;
+
+        if (componentMap[componentKey]) {
+            setComponent(() => () => setComponent(() => componentMap[componentKey]));
+        } else {
+        import(componentPath)
+            .then((mod) => setComponent(() => mod.default || mod))
+            .catch((err) => {
+            console.error(` ${ERROR_MESSAGES.LOADING_COMPONENT} ${componentPath}:`, err);
+            setComponent(() => () => <FallbackComponent componentName={componentKey} />);
+            });
+        }
+    }, [componentKey]);
+
+    if (!Component) return <p>Loading...</p>;
+
+    return <Component context={context} />;
+}
+
+

package/dist/components/core/kanban/SolidManyToOneFilterElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidManyToOneFilterElement.d.ts","sourceRoot":"","sources":["../../../../src/components/core/kanban/SolidManyToOneFilterElement.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,2BAA2B,kDAAmD,GAAG,4CAmD7F,CAAA"}
+{"version":3,"file":"SolidManyToOneFilterElement.d.ts","sourceRoot":"","sources":["../../../../src/components/core/kanban/SolidManyToOneFilterElement.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,2BAA2B,kDAAmD,GAAG,4CAmD7F,CAAA"}

package/dist/components/core/kanban/SolidManyToOneFilterElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidManyToOneFilterElement.js","sourceRoot":"","sources":["../../../../src/components/core/kanban/SolidManyToOneFilterElement.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,YAAY,EAA6B,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,IAAI,CAAC;AAGpB,MAAM,CAAC,IAAM,2BAA2B,GAAG,UAAC,EAAkD;QAAhD,KAAK,WAAA,EAAE,YAAY,kBAAA,EAAE,KAAK,WAAA,EAAE,aAAa,mBAAA;IAEnF,IAAM,SAAS,GAAG,oBAAoB,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;IAC1E,IAAA,4BAA4B,GAAK,SAAS,6BAAd,CAAe;IAC5C,IAAA,uBAAuB,GAAI,4BAA4B,EAAE,GAAlC,CAAmC;IAE3D,IAAA,KAA4C,QAAQ,CAAC,EAAE,CAAC,EAAvD,iBAAiB,QAAA,EAAE,oBAAoB,QAAgB,CAAC;IAC/D,IAAM,kBAAkB,GAAG,UAAO,KAAgC;;;;;;;oBAGxD,SAAS,GAAG;wBACd,MAAM,EAAE,CAAC;wBACT,KAAK,EAAE,EAAE;wBACT,OAAO;4BACH,GAAC,MAAA,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,aAAa,0CAAE,YAAY,0CAAE,IAAI,IAAG;gCAChD,UAAU,EAAE,KAAK,CAAC,KAAK;6BAC1B;+BACJ;qBACJ,CAAC;oBAEI,cAAc,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE;wBAC3C,gBAAgB,EAAE,IAAI;qBACzB,CAAC,CAAC;oBAG0B,qBAAM,uBAAuB,CAAC,cAAc,CAAC,EAAA;;oBAApE,oBAAoB,GAAG,SAA6C;oBAGpE,gBAAgB,GAAG,oBAAoB,CAAC,IAAI,CAAC;oBAEnD,IAAI,gBAAgB,EAAE;wBACZ,sBAAoB,gBAAgB,CAAC,OAAO,CAAC,GAAG,CAAC,UAAC,IAAS;;4BAC7D,OAAO;gCACH,KAAK,EAAE,IAAI,CAAC,MAAA,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,aAAa,0CAAE,YAAY,0CAAE,IAAI,CAAC;gCAC7D,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC;6BACpB,CAAA;wBACL,CAAC,CAAC,CAAC;wBACH,oBAAoB,CAAC,mBAAiB,CAAC,CAAC;qBAC3C;;;;SACJ,CAAA;IAED,OAAO,CACH,KAAC,YAAY,IACT,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,iBAAiB,EAC9B,cAAc,EAAE,kBAAkB,EAClC,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,EAA5B,CAA4B,EAC7C,SAAS,EAAC,6BAA6B,GACzC,CACL,CAAA;AACL,CAAC,CAAA","sourcesContent":["import { createSolidEntityApi } from \"../../../redux/api/solidEntityApi\";\nimport { AutoComplete, AutoCompleteCompleteEvent } from \"primereact/autocomplete\";\nimport { useState } from \"react\";\nimport qs from \"qs\";\n\n\nexport const SolidManyToOneFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {\n\n    const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);\n    const { useLazyGetSolidEntitiesQuery } = entityApi;\n    const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();\n\n    const [autoCompleteItems, setAutoCompleteItems] = useState([]);\n    const autoCompleteSearch = async (event: AutoCompleteCompleteEvent) => {\n\n        // Get the list view layout & metadata first. \n        const queryData = {\n            offset: 0,\n            limit: 10,\n            filters: {\n                [fieldMetadata?.relationModel?.userKeyField?.name]: {\n                    $containsi: event.query\n                }\n            }\n        };\n\n        const autocompleteQs = qs.stringify(queryData, {\n            encodeValuesOnly: true,\n        });\n\n        // TODO: do error handling here, possible errors like modelname is incorrect etc...\n        const autocompleteResponse = await triggerGetSolidEntities(autocompleteQs);\n\n        // TODO: if no data found then can we show no matching \"entities\", where entities can be replaced with the model plural name,\n        const autocompleteData = autocompleteResponse.data;\n\n        if (autocompleteData) {\n            const autoCompleteItems = autocompleteData.records.map((item: any) => {\n                return {\n                    label: item[fieldMetadata?.relationModel?.userKeyField?.name],\n                    value: item['id']\n                }\n            });\n            setAutoCompleteItems(autoCompleteItems);\n        }\n    }\n\n    return (\n        <AutoComplete\n            field=\"label\"\n            value={value}\n            suggestions={autoCompleteItems}\n            completeMethod={autoCompleteSearch}\n            onChange={(e) => updateInputs(index, e.value)}\n            className=\"solid-standard-autocomplete\"\n        />\n    )\n}\n"]}
+{"version":3,"file":"SolidManyToOneFilterElement.js","sourceRoot":"","sources":["../../../../src/components/core/kanban/SolidManyToOneFilterElement.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAEzE,OAAO,EAAE,YAAY,EAA6B,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,IAAI,CAAC;AAGpB,MAAM,CAAC,IAAM,2BAA2B,GAAG,UAAC,EAAkD;QAAhD,KAAK,WAAA,EAAE,YAAY,kBAAA,EAAE,KAAK,WAAA,EAAE,aAAa,mBAAA;IAEnF,IAAM,SAAS,GAAG,oBAAoB,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;IAC1E,IAAA,4BAA4B,GAAK,SAAS,6BAAd,CAAe;IAC5C,IAAA,uBAAuB,GAAI,4BAA4B,EAAE,GAAlC,CAAmC;IAE3D,IAAA,KAA4C,QAAQ,CAAC,EAAE,CAAC,EAAvD,iBAAiB,QAAA,EAAE,oBAAoB,QAAgB,CAAC;IAC/D,IAAM,kBAAkB,GAAG,UAAO,KAAgC;;;;;;;oBAGxD,SAAS,GAAG;wBACd,MAAM,EAAE,CAAC;wBACT,KAAK,EAAE,EAAE;wBACT,OAAO;4BACH,GAAC,MAAA,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,aAAa,0CAAE,YAAY,0CAAE,IAAI,IAAG;gCAChD,UAAU,EAAE,KAAK,CAAC,KAAK;6BAC1B;+BACJ;qBACJ,CAAC;oBAEI,cAAc,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE;wBAC3C,gBAAgB,EAAE,IAAI;qBACzB,CAAC,CAAC;oBAG0B,qBAAM,uBAAuB,CAAC,cAAc,CAAC,EAAA;;oBAApE,oBAAoB,GAAG,SAA6C;oBAGpE,gBAAgB,GAAG,oBAAoB,CAAC,IAAI,CAAC;oBAEnD,IAAI,gBAAgB,EAAE;wBACZ,sBAAoB,gBAAgB,CAAC,OAAO,CAAC,GAAG,CAAC,UAAC,IAAS;;4BAC7D,OAAO;gCACH,KAAK,EAAE,IAAI,CAAC,MAAA,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,aAAa,0CAAE,YAAY,0CAAE,IAAI,CAAC;gCAC7D,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC;6BACpB,CAAA;wBACL,CAAC,CAAC,CAAC;wBACH,oBAAoB,CAAC,mBAAiB,CAAC,CAAC;qBAC3C;;;;SACJ,CAAA;IAED,OAAO,CACH,KAAC,YAAY,IACT,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,iBAAiB,EAC9B,cAAc,EAAE,kBAAkB,EAClC,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,EAA5B,CAA4B,EAC7C,SAAS,EAAC,6BAA6B,GACzC,CACL,CAAA;AACL,CAAC,CAAA","sourcesContent":["import { createSolidEntityApi } from \"../../../redux/api/solidEntityApi\";\nimport { InputTypes } from \"./SolidVarInputsFilterElement\"\nimport { AutoComplete, AutoCompleteCompleteEvent } from \"primereact/autocomplete\";\nimport { useState } from \"react\";\nimport qs from \"qs\";\n\n\nexport const SolidManyToOneFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {\n\n    const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);\n    const { useLazyGetSolidEntitiesQuery } = entityApi;\n    const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();\n\n    const [autoCompleteItems, setAutoCompleteItems] = useState([]);\n    const autoCompleteSearch = async (event: AutoCompleteCompleteEvent) => {\n\n        // Get the list view layout & metadata first. \n        const queryData = {\n            offset: 0,\n            limit: 10,\n            filters: {\n                [fieldMetadata?.relationModel?.userKeyField?.name]: {\n                    $containsi: event.query\n                }\n            }\n        };\n\n        const autocompleteQs = qs.stringify(queryData, {\n            encodeValuesOnly: true,\n        });\n\n        // TODO: do error handling here, possible errors like modelname is incorrect etc...\n        const autocompleteResponse = await triggerGetSolidEntities(autocompleteQs);\n\n        // TODO: if no data found then can we show no matching \"entities\", where entities can be replaced with the model plural name,\n        const autocompleteData = autocompleteResponse.data;\n\n        if (autocompleteData) {\n            const autoCompleteItems = autocompleteData.records.map((item: any) => {\n                return {\n                    label: item[fieldMetadata?.relationModel?.userKeyField?.name],\n                    value: item['id']\n                }\n            });\n            setAutoCompleteItems(autoCompleteItems);\n        }\n    }\n\n    return (\n        <AutoComplete\n            field=\"label\"\n            value={value}\n            suggestions={autoCompleteItems}\n            completeMethod={autoCompleteSearch}\n            onChange={(e) => updateInputs(index, e.value)}\n            className=\"solid-standard-autocomplete\"\n        />\n    )\n}"]}

package/dist/components/core/kanban/SolidManyToOneFilterElement.tsx

@@ -1,4 +1,5 @@
 import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
+import { InputTypes } from "./SolidVarInputsFilterElement"
 import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 import { useState } from "react";
 import qs from "qs";
@@ -55,4 +56,4 @@ export const SolidManyToOneFilterElement = ({ value, updateInputs, index, fieldM
             className="solid-standard-autocomplete"
         />
     )
-}
+}

package/dist/components/core/kanban/kanban-fields/SolidMediaMultipleKanbanField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidMediaMultipleKanbanField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/kanban/kanban-fields/SolidMediaMultipleKanbanField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAavE,QAAA,MAAM,6BAA6B,oGAAqG,2BAA2B,4CAqIlK,CAAC;AAEF,eAAe,6BAA6B,CAAC"}
+{"version":3,"file":"SolidMediaMultipleKanbanField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/kanban/kanban-fields/SolidMediaMultipleKanbanField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAOvE,QAAA,MAAM,6BAA6B,oGAAqG,2BAA2B,4CA+HlK,CAAC;AAEF,eAAe,6BAA6B,CAAC"}