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

package/README.md

@@ -0,0 +1,215 @@
+# @solidxai/core-ui
+
+> The React UI framework behind every SolidX application — auth flows, metadata-driven forms and tables, dashboards, and full state management — wired up and ready to use.
+
+`@solidxai/core-ui` is the frontend counterpart to [`@solidxai/core`](https://www.npmjs.com/package/@solidxai/core). It ships a complete set of React components, Redux slices, RTK Query API integrations, route guards, and utility hooks designed to work with the SolidX backend platform — so you can build production-grade admin and data-management interfaces without rebuilding the same infrastructure on every project.
+
+[![npm version](https://img.shields.io/npm/v/@solidxai/core-ui)](https://www.npmjs.com/package/@solidxai/core-ui)
+[![License: BSL](https://img.shields.io/badge/License-BSL-blue.svg)](https://opensource.org/licenses/BSL-1.1)
+[![Documentation](https://img.shields.io/badge/docs-solidxai.com-blue)](https://docs.solidxai.com/docs)
+
+
+## Why @solidxai/core-ui?
+
+Building admin dashboards and data-management UIs involves the same heavy lifting every time: authentication screens, data tables with filtering and pagination, form builders for every field type, role-aware UI elements, file upload flows, and a global state layer that ties it all together.
+
+`@solidxai/core-ui` bundles all of that into a single, cohesive package that is:
+
+- **Metadata-driven** — point `SolidListView` or `SolidFormView` at a model name and get a fully functional table or form without writing column definitions or field components by hand.
+- **Fully typed** — complete TypeScript definitions for every component, hook, slice, and utility.
+- **Extensible** — register custom components and functions into the extension registry; the core engine picks them up automatically.
+- **Backend-agnostic escape hatches** — pre-configured Axios instance and RTK Query base query, but nothing prevents you from calling your own endpoints alongside them.
+
+
+## Core Capabilities
+
+### Metadata-driven Views
+
+The centrepiece of the library. Describe your data model once and get complete UI for free.
+
+- **`SolidListView`** — data table with multi-column sorting, rich filter expressions, group-by, column visibility, row actions, import/export, and pagination; supports 15+ column types including relations, media, rich text, and computed fields.
+- **`SolidFormView`** — full create/edit form rendered from model metadata; supports 15+ field types — boolean, date/time, decimal, integer, short/long text, rich text, JSON, media (single & multiple), static/dynamic selection, relation, email, password, and more.
+- **`SolidFormStepper`** — multi-step wizard wrapper for any form.
+- **`SolidTreeView` / `SolidTreeTable`** — hierarchical tree display, with optional table columns.
+- **`SolidKanbanView`** — kanban board view backed by the same model metadata.
+
+### Authentication
+
+Complete auth UI with no extra wiring needed.
+
+- Login, registration, forgot/reset password, and force-change-password screens
+- OTP / passwordless flows (SMS and email)
+- Google OAuth2 integration
+- JWT access/refresh token management via `authSlice` and the `baseQueryWithAuth` RTK Query adapter
+- `AuthGuard` and `GuestGuard` route protection components
+
+### Layouts & Navigation
+
+- `AdminLayout` / `Layout` — shell layouts with sidebar, header, and footer regions
+- `SolidAiStudioLayout` / `SolidStudio` — studio/configuration mode for admin users
+- `NavbarOne`, `NavbarTwo` — responsive top navigation bars
+- `AdminSidebar`, `UserSidebar` — collapsible sidebars
+- `GlobalSearch` — application-wide search component
+- `FilterMenu` — slide-in advanced filter panel
+
+### Dashboards
+
+- `SolidDashboard` — drag-and-drop dashboard grid backed by Gridstack
+- `SolidViewLayoutManager` — layout composer for arranging views
+- Chart.js integration: bar, line, pie, doughnut, data table, and meter-group chart types
+- Security-aware aggregates that respect the active user's role
+
+### Redux Store & API Layer
+
+A pre-wired Redux Toolkit store with slices and RTK Query API definitions ready to drop in.
+
+| Slices | Purpose |
+|---|---|
+| `authSlice` | Token storage and logout |
+| `userSlice` | Current user and authentication state |
+| `themeSlice` | Light / dark theme |
+| `toastSlice` | Toast notification queue |
+| `popupSlice` | Modal open/close state |
+| `navbarSlice` | Navbar visibility |
+| `dataViewSlice` | Grid vs list view toggle |
+
+API slices (RTK Query) cover: auth, users, roles, modules, models, fields, views, menus, media, import/export, dashboards, settings, chatter, API keys, and AI interactions.
+
+### UI Component Library
+
+A complete set of primitives built on Radix UI, PrimeReact, and Bootstrap, including:
+
+- Buttons, inputs, textareas, password fields, date pickers, autocomplete
+- Dialogs, popovers, tooltips, accordions, tabs, dropdowns
+- Checkboxes, radio groups, switches, sliders, progress bars
+- Rich text editor (Quill), code editor (Monaco / CodeMirror)
+- Media lightbox, image viewer, PDF viewer
+- `SolidIcon` — custom icon registry backed by Lucide React
+
+### State, Routing & Providers
+
+- `StoreProvider` — wraps the app with the Redux store
+- `SolidThemeProvider` — theme context
+- `SolidToastProvider` — toast notification context
+- `SolidLayoutRegistryProvider` — layout registry context
+- `getSolidRoutes` — generates the full route tree from module metadata
+- `useSession`, `useRouter`, `usePathname`, `useSearchParams` — familiar routing hooks
+
+### Utilities & Helpers
+
+- `solidAxios` — pre-configured Axios instance with auth headers
+- `solidGet`, `solidPost`, `solidPut`, `solidPatch`, `solidDelete` — typed HTTP helpers
+- `signIn`, `signOut`, `getSession`, `refreshAccessToken` — auth session helpers
+- `permissionExpression`, `hasAnyRole` — permission evaluation helpers
+- `downloadFileWithProgress`, `downloadMediaFile`, `fetchS3Url` — file utilities
+- `eventBus` / `AppEvents` — application-wide event system
+- `registerExtensionComponent`, `registerExtensionFunction` — extension registry
+
+### Chatter
+
+- `SolidChatter` — per-record messaging thread and activity feed component, mirroring the backend Chatter feature
+
+
+## Installation
+
+```bash
+npm install @solidxai/core-ui
+```
+
+### Peer dependencies
+
+```bash
+npm install react react-dom react-router-dom \
+  @reduxjs/toolkit react-redux \
+  bootstrap primereact primeicons primeflex
+```
+
+
+## Quick Setup
+
+### 1. Create the store
+
+```typescript
+import { createSolidStore } from '@solidxai/core-ui';
+
+export const store = createSolidStore({
+  entities: ['User', 'Post'],   // your entity names
+  reducers: { mySlice: myReducer },
+  middlewares: [myMiddleware],
+});
+```
+
+### 2. Wrap your app
+
+```typescript
+import {
+  StoreProvider,
+  SolidThemeProvider,
+  SolidToastProvider,
+} from '@solidxai/core-ui';
+
+export default function App() {
+  return (
+    <StoreProvider store={store}>
+      <SolidThemeProvider>
+        <SolidToastProvider>
+          <Router />
+        </SolidToastProvider>
+      </SolidThemeProvider>
+    </StoreProvider>
+  );
+}
+```
+
+### 3. Use metadata-driven views
+
+```typescript
+import { SolidListView, SolidFormView } from '@solidxai/core-ui';
+
+// Renders a full data table for the "users" model
+<SolidListView moduleName="users" viewName="list" />
+
+// Renders a create/edit form for the "users" model
+<SolidFormView moduleName="users" viewName="create" />
+```
+
+For full configuration options — environment variables, theming, extension points, and advanced layout setup — see the [Developer Documentation](https://docs.solidxai.com/docs).
+
+
+## Technology Stack
+
+| Concern | Technology |
+|---|---|
+| Framework | React 18 + TypeScript |
+| Routing | React Router DOM 7 |
+| State management | Redux Toolkit + RTK Query |
+| HTTP | Axios |
+| UI primitives | Radix UI · PrimeReact · Bootstrap 5 |
+| Data tables | TanStack Table 8 |
+| Charts | Chart.js |
+| Dashboard grid | Gridstack · React Grid Layout |
+| Rich text | Quill |
+| Code editor | Monaco Editor · CodeMirror |
+| Forms | Formik + Yup |
+| Drag and drop | @hello-pangea/dnd |
+| Date/time | Day.js |
+| Icons | Lucide React |
+
+---
+
+## Part of the SolidX Platform
+
+`@solidxai/core-ui` is the frontend foundation of the [SolidX](https://solidxai.com) low-code development platform. It pairs with [`@solidxai/core`](https://www.npmjs.com/package/@solidxai/core) (the NestJS backend module) to form a complete full-stack framework. SolidX generates fully open-source, standards-based NestJS + React code that your team owns outright — no proprietary runtime, no lock-in.
+
+| | |
+|---|---|
+| Website | [solidxai.com](https://solidxai.com) |
+| Documentation | [docs.solidxai.com](https://docs.solidxai.com/docs) |
+| Backend package | [@solidxai/core](https://www.npmjs.com/package/@solidxai/core) |
+| Support | support@solidxai.com |
+
+---
+
+## License
+
+BSL-1.1 © [Logicloop](https://logicloop.io)

package/dist/components/auth/SolidOTPVerify.d.ts

@@ -0,0 +1,3 @@
+declare const SolidOTPVerify: () => import("react/jsx-runtime").JSX.Element;
+export default SolidOTPVerify;
+//# sourceMappingURL=SolidOTPVerify.d.ts.map

package/dist/components/auth/SolidOTPVerify.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidOTPVerify.d.ts","sourceRoot":"./","sources":["components/auth/SolidOTPVerify.tsx"],"names":[],"mappings":"AAiBA,QAAA,MAAM,cAAc,+CAmHnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/auth/SolidOTPVerify.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Form, Formik } from "formik";
+import { signIn } from "next-auth/react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Button } from "primereact/button";
+import { InputOtp } from "primereact/inputotp";
+import { Message } from "primereact/message";
+import { Toast } from "primereact/toast";
+import { useRef, useState } from "react";
+import * as Yup from "yup";
+import { useSelector } from "react-redux";
+import Image from "next/image";
+import SolidLogo from '../../resources/images/SolidXLogo.svg';
+import { ERROR_MESSAGES } from "../../constants/error-messages";
+const SolidOTPVerify = () => {
+    // const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();
+    // useEffect(() => {
+    //     trigger("") // Fetch settings on mount
+    // }, [trigger])
+    const solidSettingsData = useSelector((state) => state.settingsState?.solidSettings);
+    const [otp, setOTP] = useState();
+    const toast = useRef(null);
+    const router = useRouter();
+    const [password, setPassword] = useState('');
+    const [checked, setChecked] = useState(false);
+    const validationSchema = Yup.object({
+        email: Yup.string()
+            .email(ERROR_MESSAGES.FIELD_INVALID(' email address'))
+            .required(ERROR_MESSAGES.FIELD_REUQIRED('Email')),
+    });
+    const showToast = (severity, summary, detail) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            ...(severity === "error"
+                ? { sticky: true } // stays until user closes
+                : { life: 3000 }),
+        });
+    };
+    const isFormFieldValid = (formik, fieldName) => formik.touched[fieldName] && formik.errors[fieldName];
+    return (_jsxs(_Fragment, { children: [_jsx(Toast, { ref: toast }), _jsxs("div", { className: `auth-container ${solidSettingsData?.authPagesLayout === 'center' ? 'center' : 'side'}`, style: { minWidth: 480 }, children: [solidSettingsData?.authPagesLayout === 'center' &&
+                        _jsx("div", { className: "flex justify-content-center", children: _jsx("div", { className: `solid-logo flex align-items-center ${solidSettingsData?.appLogoPosition}`, children: _jsx(Image, { alt: "solid logo", src: solidSettingsData?.appLogo || SolidLogo, className: "relative", fill: true }) }) }), _jsx("h2", { className: `solid-auth-title ${solidSettingsData?.authPagesLayout === 'center' ? 'text-center' : 'text-left'}`, children: "OTP Verification" }), _jsx("p", { className: "solid-auth-subtitle text-sm", children: "Please enter the OTP sent to your email to complete verification" }), _jsx(_Fragment, { children: _jsx(Formik, { initialValues: {
+                                email: "",
+                                password: "",
+                            }, validationSchema: validationSchema, onSubmit: async (values) => {
+                                // Handle form submission
+                                const email = values.email;
+                                const password = values.password;
+                                const response = await signIn("credentials", {
+                                    redirect: false,
+                                    email,
+                                    password,
+                                });
+                                if (response?.error) {
+                                    showToast("error", ERROR_MESSAGES.LOGIN_ERROR, response.error);
+                                }
+                                else {
+                                    showToast("success", ERROR_MESSAGES.LOGIN_SUCCESS, ERROR_MESSAGES.DASHBOARD_REDIRECTING);
+                                    router.push(`${process.env.NEXT_PUBLIC_LOGIN_REDIRECT_URL}`);
+                                }
+                            }, children: (formik) => (_jsxs(Form, { children: [_jsxs("div", { className: "flex flex-column gap-2 px-3", children: [_jsx("label", { htmlFor: "email", className: "solid-auth-input-label", children: "Enter OTP" }), _jsx(InputOtp, { value: otp, onChange: (e) => setOTP(e.value), length: 6, style: { width: '100%' } }), isFormFieldValid(formik, "email") && _jsx(Message, { className: "text-red-500 text-sm", severity: "error", text: formik?.errors?.email?.toString() }), _jsxs("div", { className: "flex align-items-center justify-content-between", children: [_jsx(Button, { type: "button", icon: 'pi pi-refresh', iconPos: "left", link: true, label: "Resend Code", className: "px-0 text-sm font-normal" }), _jsx("p", { className: "m-0 text-sm text-color", children: "Time left: 00:28" })] })] }), _jsx("div", { className: "mt-4", children: _jsx(Button, { type: "submit", className: "w-full font-light auth-submit-button", label: "Verify", disabled: formik.isSubmitting, loading: formik.isSubmitting }) })] })) }) })] }), _jsx("div", { className: "text-center mt-5", children: _jsxs("div", { className: "text-sm text-400 secondary-dark-color", children: ['<', " Back to ", _jsx(Link, { className: "font-bold", href: "/auth/login", children: "Sign In" })] }) })] }));
+};
+export default SolidOTPVerify;
+//# sourceMappingURL=SolidOTPVerify.js.map

package/dist/components/auth/SolidOTPVerify.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidOTPVerify.js","sourceRoot":"./","sources":["components/auth/SolidOTPVerify.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport { Form, Formik } from \"formik\";\nimport { signIn } from \"next-auth/react\";\nimport Link from \"next/link\";\nimport { useRouter } from \"next/navigation\";\nimport { Button } from \"primereact/button\";\nimport { InputOtp } from \"primereact/inputotp\";\nimport { Message } from \"primereact/message\";\nimport { Toast } from \"primereact/toast\";\nimport { useRef, useState } from \"react\";\nimport * as Yup from \"yup\";\nimport { useSelector } from \"react-redux\";\nimport Image from \"next/image\";\nimport SolidLogo from '../../resources/images/SolidXLogo.svg'\nimport { ERROR_MESSAGES } from \"../../constants/error-messages\";\n\nconst SolidOTPVerify = () => {\n\n    // const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();\n    // useEffect(() => {\n    //     trigger(\"\") // Fetch settings on mount\n    // }, [trigger])\n\n    const solidSettingsData = useSelector((state: any) => state.settingsState?.solidSettings);\n\n    const [otp, setOTP] = useState<number | any>();\n\n    const toast = useRef<Toast>(null);\n    const router = useRouter();\n\n    const [password, setPassword] = useState('');\n    const [checked, setChecked] = useState<boolean>(false);\n\n    const validationSchema = Yup.object({\n        email: Yup.string()\n            .email(ERROR_MESSAGES.FIELD_INVALID(' email address'))\n            .required(ERROR_MESSAGES.FIELD_REUQIRED('Email')),\n    });\n\n    const showToast = (severity: \"success\" | \"error\", summary: string, detail: string) => {\n        toast.current?.show({\n            severity,\n            summary,\n            detail,\n            ...(severity === \"error\"\n                ? { sticky: true }            // stays until user closes\n                : { life: 3000 }),\n        });\n    };\n\n    const isFormFieldValid = (formik: any, fieldName: string) =>\n        formik.touched[fieldName] && formik.errors[fieldName];\n\n    return (\n        <>\n            <Toast ref={toast} />\n            <div className={`auth-container ${solidSettingsData?.authPagesLayout === 'center' ? 'center' : 'side'}`} style={{ minWidth: 480 }}>\n                {solidSettingsData?.authPagesLayout === 'center' &&\n                    <div className=\"flex justify-content-center\">\n                        <div className={`solid-logo flex align-items-center ${solidSettingsData?.appLogoPosition}`}>\n                            <Image\n                                alt=\"solid logo\"\n                                src={solidSettingsData?.appLogo || SolidLogo}\n                                className=\"relative\"\n                                fill\n                            />\n                        </div>\n                    </div>\n                }\n                <h2 className={`solid-auth-title ${solidSettingsData?.authPagesLayout === 'center' ? 'text-center' : 'text-left'}`}>OTP Verification</h2>\n                <p className=\"solid-auth-subtitle text-sm\">\n                    Please enter the OTP sent to your email to complete verification\n                </p>\n                <>\n                    <Formik\n                        initialValues={{\n                            email: \"\",\n                            password: \"\",\n                        }}\n                        validationSchema={validationSchema}\n                        onSubmit={async (values) => {\n                            // Handle form submission\n                            const email = values.email;\n                            const password = values.password;\n\n                            const response = await signIn(\"credentials\", {\n                                redirect: false,\n                                email,\n                                password,\n                            });\n                            if (response?.error) {\n                                showToast(\"error\", ERROR_MESSAGES.LOGIN_ERROR, response.error);\n                            } else {\n                                showToast(\"success\", ERROR_MESSAGES.LOGIN_SUCCESS, ERROR_MESSAGES.DASHBOARD_REDIRECTING);\n                                router.push(`${process.env.NEXT_PUBLIC_LOGIN_REDIRECT_URL}`);\n                            }\n\n                        }}\n                    >\n                        {(formik) => (\n                            <Form>\n                                <div className=\"flex flex-column gap-2 px-3\">\n                                    <label htmlFor=\"email\" className=\"solid-auth-input-label\">Enter OTP</label>\n                                    <InputOtp value={otp} onChange={(e) => setOTP(e.value)} length={6} style={{ width: '100%' }} />\n                                    {isFormFieldValid(formik, \"email\") && <Message\n                                        className=\"text-red-500 text-sm\"\n                                        severity=\"error\"\n                                        text={formik?.errors?.email?.toString()}\n                                    />}\n                                    <div className=\"flex align-items-center justify-content-between\">\n                                        <Button type=\"button\" icon='pi pi-refresh' iconPos=\"left\" link label=\"Resend Code\" className=\"px-0 text-sm font-normal\" />\n                                        <p className=\"m-0 text-sm text-color\">\n                                            Time left: 00:28\n                                        </p>\n                                    </div>\n                                </div>\n                                <div className=\"mt-4\">\n                                    <Button type=\"submit\" className=\"w-full font-light auth-submit-button\" label=\"Verify\" disabled={formik.isSubmitting} loading={formik.isSubmitting} />\n                                </div>\n                            </Form>\n                        )}\n                    </Formik>\n                </>\n            </div>\n            <div className=\"text-center mt-5\">\n                <div className=\"text-sm text-400 secondary-dark-color\">\n                    {'<'} Back to <Link className=\"font-bold\" href=\"/auth/login\">Sign In</Link>\n                </div>\n            </div>\n        </>\n    );\n};\n\nexport default SolidOTPVerify;"]}

package/dist/components/auth/SolidOTPVerify.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { Form, Formik } from "formik";
+import { signIn } from "next-auth/react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Button } from "primereact/button";
+import { InputOtp } from "primereact/inputotp";
+import { Message } from "primereact/message";
+import { Toast } from "primereact/toast";
+import { useEffect, useRef, useState } from "react";
+import * as Yup from "yup";
+import Image from "next/image";
+import SolidLogo from '../../resources/images/SolidXLogo.svg'
+import { ERROR_MESSAGES } from "../../constants/error-messages";
+import { useLazyGetAuthSettingsQuery } from "../../redux/api/solidSettingsApi";
+
+const SolidOTPVerify = () => {
+
+    const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();
+    useEffect(() => {
+        trigger("") // Fetch settings on mount
+    }, [trigger])
+
+    const [otp, setOTP] = useState<number | any>();
+
+    const toast = useRef<Toast>(null);
+    const router = useRouter();
+
+    const [password, setPassword] = useState('');
+    const [checked, setChecked] = useState<boolean>(false);
+
+    const validationSchema = Yup.object({
+        email: Yup.string()
+            .email(ERROR_MESSAGES.FIELD_INVALID(' email address'))
+            .required(ERROR_MESSAGES.FIELD_REUQIRED('Email')),
+    });
+
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            ...(severity === "error"
+                ? { sticky: true }            // stays until user closes
+                : { life: 3000 }),
+        });
+    };
+
+    const isFormFieldValid = (formik: any, fieldName: string) =>
+        formik.touched[fieldName] && formik.errors[fieldName];
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <div className={`auth-container ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'center' : 'side'}`} style={{ minWidth: 480 }}>
+                {solidSettingsData?.data?.authPagesLayout === 'center' &&
+                    <div className="flex justify-content-center">
+                        <div className={`solid-logo flex align-items-center ${solidSettingsData?.data?.appLogoPosition}`}>
+                            <Image
+                                alt="solid logo"
+                                src={solidSettingsData?.data?.appLogo || SolidLogo}
+                                className="relative"
+                                fill
+                            />
+                        </div>
+                    </div>
+                }
+                <h2 className={`solid-auth-title ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'text-center' : 'text-left'}`}>OTP Verification</h2>
+                <p className="solid-auth-subtitle text-sm">
+                    Please enter the OTP sent to your email to complete verification
+                </p>
+                <>
+                    <Formik
+                        initialValues={{
+                            email: "",
+                            password: "",
+                        }}
+                        validationSchema={validationSchema}
+                        onSubmit={async (values) => {
+                            // Handle form submission
+                            const email = values.email;
+                            const password = values.password;
+
+                            const response = await signIn("credentials", {
+                                redirect: false,
+                                email,
+                                password,
+                            });
+                            if (response?.error) {
+                                showToast("error", ERROR_MESSAGES.LOGIN_ERROR, response.error);
+                            } else {
+                                showToast("success", ERROR_MESSAGES.LOGIN_SUCCESS, ERROR_MESSAGES.DASHBOARD_REDIRECTING);
+                                router.push(`${process.env.NEXT_PUBLIC_LOGIN_REDIRECT_URL}`);
+                            }
+
+                        }}
+                    >
+                        {(formik) => (
+                            <Form>
+                                <div className="flex flex-column gap-2 px-3">
+                                    <label htmlFor="email" className="solid-auth-input-label">Enter OTP</label>
+                                    <InputOtp value={otp} onChange={(e) => setOTP(e.value)} length={6} style={{ width: '100%' }} />
+                                    {isFormFieldValid(formik, "email") && <Message
+                                        className="text-red-500 text-sm"
+                                        severity="error"
+                                        text={formik?.errors?.email?.toString()}
+                                    />}
+                                    <div className="flex align-items-center justify-content-between">
+                                        <Button type="button" icon='pi pi-refresh' iconPos="left" link label="Resend Code" className="px-0 text-sm font-normal" />
+                                        <p className="m-0 text-sm text-color">
+                                            Time left: 00:28
+                                        </p>
+                                    </div>
+                                </div>
+                                <div className="mt-4">
+                                    <Button type="submit" className="w-full font-light auth-submit-button" label="Verify" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
+                                </div>
+                            </Form>
+                        )}
+                    </Formik>
+                </>
+            </div>
+            <div className="text-center mt-5">
+                <div className="text-sm text-400 secondary-dark-color">
+                    {'<'} Back to <Link className="font-bold" href="/auth/login">Sign In</Link>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default SolidOTPVerify;

package/dist/components/common/AuthBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthBanner.js","sourceRoot":"","sources":["../../../src/components/common/AuthBanner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAEzC,IAAM,UAAU,GAAG;IACjB,OAAO,CACL,cACE,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,aAAa;YACrB,UAAU,EAAE,4BAA4B;YACxC,8CAA8C;YAC9C,cAAc,EAAE,OAAO;YACvB,SAAS,EAAE,GAAG,CAAC,6BAA6B,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;SAClE,EACD,SAAS,EAAC,yBAAyB,YAEnC,cAAK,SAAS,EAAC,UAAU,YACvB,eAAK,SAAS,EAAC,eAAe,aAC5B,cAAK,SAAS,EAAC,iDAAiD,YAC7D,GAAG,CAAC,iBAAiB,CAAC,GACnB,EACN,cAAK,SAAS,EAAC,kCAAkC,YAC9C,GAAG,CAAC,mCAAmC,CAAC,GACrC,EACN,cAAK,SAAS,EAAC,MAAM,GASf,IACF,GACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { env } from \"../../adapters/env\";\n\nconst AuthBanner = () => {\n  return (\n    <div\n      style={{\n        position: \"relative\",\n        width: \"100%\",\n        height: \"calc(100vh)\",\n        background: 'url(/images/loginhero.png)',\n        // background: 'url(/images/LoginBanner.png)',\n        backgroundSize: 'cover',\n        marginTop: env(\"ENABLE_CUSTOM_HEADER_FOOTER\") === \"true\" ? 70 : 0\n      }}\n      className=\"flex align-items-center\"\n    >\n      <div className=\"grid m-0\">\n        <div className=\"col-8 mx-auto\">\n          <div className=\"text-5xl text-white font-semibold line-height-3\">\n            {env(\"SOLID_APP_TITLE\")}\n          </div>\n          <div className=\"text-sm text-white line-height-3\">\n            {env(\"NEXT_PUBLIC_SOLID_APP_DESCRIPTION\")}\n          </div>\n          <div className=\"mt-5\">\n            {/* <AvatarGroup>\n              <Avatar image=\"/images/AvatarDemo.png\" size=\"large\" shape=\"circle\" />\n              <Avatar image=\"/images/AvatarDemo.png\" size=\"large\" shape=\"circle\" />\n              <Avatar image=\"/images/AvatarDemo.png\" size=\"large\" shape=\"circle\" />\n              <Avatar image=\"/images/AvatarDemo.png\" size=\"large\" shape=\"circle\" />\n              <Avatar image=\"/images/AvatarDemo.png\" size=\"large\" shape=\"circle\" />\n              <Avatar label=\"60k+\" shape=\"circle\" size=\"large\" className=\"text-sm text-bold\" style={{ color: '#191866', backgroundColor: '#fff' }} />\n            </AvatarGroup> */}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default AuthBanner;\n"]}
+{"version":3,"file":"AuthBanner.js","sourceRoot":"","sources":["../../../src/components/common/AuthBanner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAEzC,IAAM,UAAU,GAAG;IACjB,OAAO,CACL,cACE,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,aAAa;YACrB,UAAU,EAAE,4BAA4B;YACxC,8CAA8C;YAC9C,cAAc,EAAE,OAAO;YACvB,SAAS,EAAE,GAAG,CAAC,6BAA6B,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;SAClE,EACD,SAAS,EAAC,yBAAyB,YAEnC,cAAK,SAAS,EAAC,UAAU,YACvB,eAAK,SAAS,EAAC,eAAe,aAC5B,cAAK,SAAS,EAAC,iDAAiD,YAC7D,GAAG,CAAC,iBAAiB,CAAC,GACnB,EACN,cAAK,SAAS,EAAC,kCAAkC,YAC9C,GAAG,CAAC,mCAAmC,CAAC,GACrC,EACN,cAAK,SAAS,EAAC,MAAM,GASf,IACF,GACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/common/GeneralSettings.js

@@ -60,7 +60,7 @@ import { useDropzone } from 'react-dropzone';
 import { SettingDropzoneActivePlaceholder } from './SolidSettings/SettingDropzoneActivePlaceholder';
 import { SolidUploadedImage } from './SolidSettings/SolidUploadedImage';
 import { SettingsImageRemoveButton } from './SolidSettings/SettingsImageRemoveButton';
-import { AiModelConfigTab } from './SolidSettings/LlmSettings/AiModelConfigTab';
+import { ModelConfigTab, ProvidersTab, ensureBuiltInProviders } from './SolidSettings/LlmSettings/AiModelConfigTab';
 import { useDispatch } from 'react-redux';
 import { ERROR_MESSAGES } from '../../constants/error-messages';
 import { useBulkUpdateSolidSettingsMutation, useLazyGetSolidSettingsQuery } from '../../redux/api/solidSettingsApi';
@@ -117,8 +117,8 @@ export var GeneralSettings = function () {
             var _a;
             var defaultAiConfig = {
                 models: {
-                    default: { providerKey: "", behavior: { streaming: false, custom: "" } },
-                    fast: { providerKey: "", behavior: { streaming: false, custom: "" } },
+                    default: { providerId: "", model: "", behavior: { streaming: false, custom: "" } },
+                    fast: { providerId: "", model: "", behavior: { streaming: false, custom: "" } },
                 },
                 providers: {},
             };
@@ -456,35 +456,37 @@ export var GeneralSettings = function () {
                                     _jsx(AiSettingsSection, { aiConfig: formik.values.solidXGenAiCodeBuilderConfig, onAiConfigChange: handleAiConfigChange }), pathname.includes("api-keys") && ((_43 = session === null || session === void 0 ? void 0 : session.user) === null || _43 === void 0 ? void 0 : _43.id) &&
                                     _jsx(ApiKeysTab, { userId: session.user.id, canCreate: (_45 = (_44 = session === null || session === void 0 ? void 0 : session.user) === null || _44 === void 0 ? void 0 : _44.isAllowedToGenerateApiKeys) !== null && _45 !== void 0 ? _45 : false })] })] }) }) }) }));
 };
-var AI_TABS = [
-    { key: "fast", label: "Fast Model", title: "Fast Model" },
-    { key: "default", label: "Intelligent Model", title: "Intelligent Model (Reasoning & tool use)" },
-];
 var DEFAULT_BEHAVIOR = { streaming: false, custom: "" };
+var DEFAULT_MODEL_ENTRY = { providerId: "", model: "", behavior: DEFAULT_BEHAVIOR };
 var AiSettingsSection = function (_a) {
+    var _b, _c, _d, _e, _f;
     var aiConfig = _a.aiConfig, onAiConfigChange = _a.onAiConfigChange;
-    var _b = useState("fast"), activeTab = _b[0], setActiveTab = _b[1];
-    var tabItems = AI_TABS.map(function (tab) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        var modelEntry = (_b = (_a = aiConfig.models) === null || _a === void 0 ? void 0 : _a[tab.key]) !== null && _b !== void 0 ? _b : { providerKey: "", behavior: DEFAULT_BEHAVIOR };
-        var providerKey = (_c = modelEntry.providerKey) !== null && _c !== void 0 ? _c : "";
-        var providerConfig = (_e = (_d = aiConfig.providers) === null || _d === void 0 ? void 0 : _d[providerKey]) !== null && _e !== void 0 ? _e : { provider: providerKey, apiKey: "", model: "" };
-        var behavior = (_f = modelEntry.behavior) !== null && _f !== void 0 ? _f : DEFAULT_BEHAVIOR;
-        return {
-            value: tab.key,
-            label: tab.label,
-            content: (_jsx(AiModelConfigTab, { providerKey: providerKey, providerConfig: providerConfig, behavior: behavior, allProviders: (_g = aiConfig.providers) !== null && _g !== void 0 ? _g : {}, onProviderKeyChange: function (newKey, newConfig) {
-                    var _a, _b;
-                    onAiConfigChange(__assign(__assign({}, aiConfig), { models: __assign(__assign({}, aiConfig.models), (_a = {}, _a[tab.key] = __assign(__assign({}, modelEntry), { providerKey: newKey }), _a)), providers: __assign(__assign({}, aiConfig.providers), (_b = {}, _b[newKey] = newConfig, _b)) }));
-                }, onProviderConfigChange: function (pk, config) {
-                    var _a;
-                    onAiConfigChange(__assign(__assign({}, aiConfig), { providers: __assign(__assign({}, aiConfig.providers), (_a = {}, _a[pk] = config, _a)) }));
-                }, onBehaviorChange: function (newBehavior) {
-                    var _a;
-                    onAiConfigChange(__assign(__assign({}, aiConfig), { models: __assign(__assign({}, aiConfig.models), (_a = {}, _a[tab.key] = __assign(__assign({}, modelEntry), { behavior: newBehavior }), _a)) }));
+    var _g = useState("providers"), activeTab = _g[0], setActiveTab = _g[1];
+    var _h = useState(false), showAddProvider = _h[0], setShowAddProvider = _h[1];
+    var providers = ensureBuiltInProviders((_b = aiConfig.providers) !== null && _b !== void 0 ? _b : {});
+    var tabItems = [
+        {
+            value: "providers",
+            label: "Providers",
+            content: (_jsx(ProvidersTab, { providers: providers, onProvidersChange: function (newProviders) {
+                    onAiConfigChange(__assign(__assign({}, aiConfig), { providers: newProviders }));
+                }, showAddModal: showAddProvider, onAddModalClose: function () { return setShowAddProvider(false); } })),
+        },
+        {
+            value: "default",
+            label: "Intelligent Model",
+            content: (_jsx(ModelConfigTab, { modelEntry: (_d = (_c = aiConfig.models) === null || _c === void 0 ? void 0 : _c.default) !== null && _d !== void 0 ? _d : DEFAULT_MODEL_ENTRY, providers: providers, onModelEntryChange: function (entry) {
+                    onAiConfigChange(__assign(__assign({}, aiConfig), { models: __assign(__assign({}, aiConfig.models), { default: entry }) }));
                 } })),
-        };
-    });
-    return (_jsxs("div", { children: [_jsx("p", { className: "solid-settings-heading", style: { marginBottom: "1rem" }, children: "AI Model Configuration" }), _jsx(SolidTabGroup, { tabs: tabItems, value: activeTab, onValueChange: function (value) { return setActiveTab(value); }, tabPosition: "left" })] }));
+        },
+        {
+            value: "fast",
+            label: "Fast Model",
+            content: (_jsx(ModelConfigTab, { modelEntry: (_f = (_e = aiConfig.models) === null || _e === void 0 ? void 0 : _e.fast) !== null && _f !== void 0 ? _f : DEFAULT_MODEL_ENTRY, providers: providers, onModelEntryChange: function (entry) {
+                    onAiConfigChange(__assign(__assign({}, aiConfig), { models: __assign(__assign({}, aiConfig.models), { fast: entry }) }));
+                } })),
+        },
+    ];
+    return (_jsxs("div", { children: [_jsx("p", { className: "solid-settings-heading", style: { marginBottom: "1rem" }, children: "AI Model Configuration" }), _jsx(SolidTabGroup, { tabs: tabItems, value: activeTab, onValueChange: function (value) { return setActiveTab(value); }, tabPosition: "left", extra: activeTab === "providers" ? (_jsx(SolidButton, { size: "sm", onClick: function () { return setShowAddProvider(true); }, children: "Add" })) : undefined })] }));
 };
 //# sourceMappingURL=GeneralSettings.js.map