Merge branch 'next' of github.com:devforth/adminforth into next

Author: yaroslav8765

README.md

@@ -5,7 +5,7 @@
 
 [![Ask AI](http://tluma.ai/badge)](http://tluma.ai/ask-ai/devforth/adminforth)
 
-* [Try live demo](https://demo.adminforth.dev/)  (Read-only mode)
+* [Try live demo](https://demo.adminforth.dev/) 
 
 * [Hello world in 5 minutes](https://adminforth.dev/docs/tutorial/gettingStarted) with AdminForth
 

adminforth/documentation/docs/tutorial/08-Plugins/26-agent.md

@@ -5,7 +5,7 @@
 
 This plugin adds an AI agent with a chat surface to AdminForth which is capable of default skills like searching/editing data and extending with custom skills. 
 
-It stores session history in your own resources and uses any AdminForth completion adapter to generate responses.
+It stores session history in your own resources and generates responses using one of the configured `modes`.
 
 ## Installation
 
@@ -21,17 +21,21 @@ Add your LLM credentials to `.env`:
 OPENAI_API_KEY=your_key
 ```
 
-You can replace the OpenAI adapter with any completion adapter from [List of adapters](/docs/tutorial/ListOfAdapters/).
+Each mode accepts any AdminForth completion adapter, so you can replace the OpenAI adapter with another adapter from [List of adapters](/docs/tutorial/ListOfAdapters/).
 
 ## Setup
 
 First create two resources for sessions and turns:
 
 ```ts title="./resources/agent_resources/sessions.ts"
 import AdminForth, { AdminForthDataTypes } from 'adminforth';
-import type { AdminForthResourceInput } from 'adminforth';
+import type { AdminForthResourceInput, AdminUser } from 'adminforth';
 import { randomUUID } from 'crypto';
 
+async function allowedForSuperAdmins({ adminUser }: { adminUser: AdminUser }): Promise<boolean> {
+  return adminUser.dbUser.role === 'superadmin';
+}
+
 export default {
   dataSource: 'sqlite',
   table: 'sessions',
@@ -70,14 +74,27 @@ export default {
       },
     },
   ],
+  options: {
+    allowedActions: {
+      list: allowedForSuperAdmins,
+      show: allowedForSuperAdmins,
+      create: false,
+      edit: false,
+      delete: false,
+    },
+  },
 } as AdminForthResourceInput;
 ```
 
 ```ts title="./resources/agent_resources/turns.ts"
 import AdminForth, { AdminForthDataTypes } from 'adminforth';
-import type { AdminForthResourceInput } from 'adminforth';
+import type { AdminForthResourceInput, AdminUser } from 'adminforth';
 import { randomUUID } from 'crypto';
 
+async function allowedForSuperAdmins({ adminUser }: { adminUser: AdminUser }): Promise<boolean> {
+  return adminUser.dbUser.role === 'superadmin';
+}
+
 export default {
   dataSource: 'sqlite',
   table: 'turns',
@@ -116,6 +133,15 @@ export default {
       type: AdminForthDataTypes.TEXT,
     },
   ],
+  options: {
+    allowedActions: {
+      list: allowedForSuperAdmins,
+      show: allowedForSuperAdmins,
+      create: false,
+      edit: false,
+      delete: false,
+    },
+  },
 } as AdminForthResourceInput;
 ```
 
@@ -166,6 +192,8 @@ export const admin = new AdminForth({
 
 Then attach the plugin once, usually to your `adminuser` resource:
 
+Configure the plugin with `modes`. The legacy top-level `completionAdapter` setup is no longer used.
+
 ```ts title="./resources/adminuser.ts"
 import AdminForthAgent from '@adminforth/agent';
 import CompletionAdapterOpenAIChatGPT from '@adminforth/completion-adapter-open-ai-chat-gpt';
@@ -175,12 +203,45 @@ import CompletionAdapterOpenAIChatGPT from '@adminforth/completion-adapter-open-
 plugins: [
   ...
   new AdminForthAgent({
-    completionAdapter: new CompletionAdapterOpenAIChatGPT({
-      openAiApiKey: process.env.OPENAI_API_KEY as string,
-      model: 'gpt-5.4-mini',
-    }),
+    modes: [
+      {
+        name: 'Balanced',
+        completionAdapter: new CompletionAdapterOpenAIChatGPT({
+          openAiApiKey: process.env.OPENAI_API_KEY as string,
+          model: 'gpt-5.4-mini',
+          extraRequestBodyParameters: {
+            reasoning: {
+              effort: 'medium',
+            },
+          },
+        }),
+      },
+      {
+        name: 'Fast',
+        completionAdapter: new CompletionAdapterOpenAIChatGPT({
+          openAiApiKey: process.env.OPENAI_API_KEY as string,
+          model: 'gpt-5.4-mini',
+          extraRequestBodyParameters: {
+            reasoning: {
+              effort: 'low',
+            },
+          },
+        }),
+      },
+      {
+        name: 'Smart Thinking',
+        completionAdapter: new CompletionAdapterOpenAIChatGPT({
+          openAiApiKey: process.env.OPENAI_API_KEY as string,
+          model: 'gpt-5.4',
+          extraRequestBodyParameters: {
+            reasoning: {
+              effort: 'xhigh',
+            },
+          },
+        }),
+      },
+    ],
     maxTokens: 10000,
-    reasoning: 'none',
     sessionResource: {
       resourceId: 'sessions',
       idField: 'id',
@@ -203,7 +264,9 @@ plugins: [
 ]
 ```
 
-The plugin adds a chat surface to the admin UI and keeps session history per admin user.
+Each item in `modes` defines a user-selectable preset in the chat UI. The selected mode is sent to the backend and the plugin uses that mode's `completionAdapter` for the response.
+
+The plugin adds a chat surface to the admin UI, keeps session history per admin user, and shows a mode picker when `modes` are configured.
 
 ## Reverse proxy and CDN configuration for streaming
 
@@ -270,5 +333,3 @@ In skills markdown file, merge which tool exactlu agent should load.
 Skill example:
 
 // TODO
-
-

adminforth/documentation/src/css/custom.css

@@ -130,17 +130,17 @@ pre code:has(.code-block-diff-remove-line) {
   position: relative;
   z-index: 1;
   padding: 3%;
+  overflow: hidden;
   border-radius: 2vw;
   background: #ecf1f7;
   background-image: linear-gradient(to bottom, #333, #111);
   box-shadow: 0 0.1rem 0 #cfcfcf;
   border: 2px solid #ccc;
 }
-.laptop .laptop__screen img {
+.laptop .laptop__screen img,
+.laptop .laptop__screen iframe {
   display: block;
   max-width: 100%;
-  height: auto;
-  aspect-ratio: attr(width) / attr(height);
   background: #000;
 }
 .laptop .laptop__bottom {

adminforth/documentation/src/pages/index.module.css

@@ -36,16 +36,22 @@
   max-width: 500px;
 }
 
+.demoFrame {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  border: 0;
+  border-radius: 1.2vw;
+  background: #000;
+}
+
 .cardsWrapper {
   display: grid;
-  grid-template-columns: repeat(3, minmax(300px, 500px));
+  grid-template-columns: repeat(2, minmax(300px, 500px));
   gap: 4rem;
   justify-content: center;
   padding: 1rem;
 
-  @media (max-width: 1200px) {
-    grid-template-columns: repeat(2, minmax(300px, 500px));
-  }
   @media (max-width: 768px) {
     grid-template-columns: repeat(1, minmax(300px, 500px));
   }

adminforth/documentation/src/pages/index.tsx

@@ -4,23 +4,17 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import Heading from '@theme/Heading';
-import { useState } from 'react';
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import styles from './index.module.css';
 
+const LIVE_DEMO_IFRAME_URL = `https://demo.adminforth.dev/overview?autologin=${encodeURIComponent('demo@adminfoth.dev:demo')}`;
+
 
 const images = [
   {
     original: require('@site/static/img/previews/login_form.png').default,
     title: 'Authentication and Authorization',
     link: '/docs/tutorial/gettingStarted',
-    description: 'OWASP-Compliant Sign-In already there'
-  },
-  {
-    original: require('@site/static/img/previews/users_management.png').default,
-    title: 'Users management',
-    link: '/docs/tutorial/gettingStarted',
-    description: 'Manage users and roles with ease, extend as you like'
+    description: 'OWASP-Compliant Sign-In done for you'
   },
   {
     original: require('@site/static/img/previews/sso.png').default,
@@ -29,22 +23,46 @@ const images = [
     description: 'RFC 6749 SSO plugin with premade Google, Github, Facebook, Keycloak, Microsoft or any custom OAuth2 adapter'
   },
   {
-    original: require('@site/static/img/previews/ai_complete.png').default,
-    title: 'AI autocomplete Plugin - write with ChatGPT',
-    link: '/docs/tutorial/Plugins/text-complete/',
-    description: 'Provide your OpenAI API key to autocomplete plugin and AI will help you to write your content using record context'
+    original: require('@site/static/img/previews/2fa_plugin.png').default,
+    title: '2FA Plugin - secure your admin panel',
+    link: '/docs/tutorial/Plugins/TwoFactorsAuth/',
+    description: 'RFC 6238-Compliant TOTP-Based & WebAuthn PassKeys 2FA will add additional security layer (login and preferred actions)'
+  },
+  {
+    original: require('@site/static/img/previews/branding.png').default,
+    title: 'Branding and theming',
+    link: '/docs/tutorial/Customization/branding/',
+    description: 'Upload your logo, change colors, update titles, make the look to match your brand'
+  },
+  {
+    original: require('@site/static/img/previews/dashboard.png').default,
+    title: 'Custom Pages and Dashboards',
+    link: '/docs/tutorial/Customization/customPages/',
+    description: 'Create your own pages and dashboards with Vue3 components. Add any additional npm packages and extend your admin panel as you like'
+  },
+  {
+    original: require('@site/static/img/previews/users_management.png').default,
+    title: 'Users management',
+    link: '/docs/tutorial/gettingStarted',
+    description: 'Manage users and roles with ease, extend as you like'
+  },
+  {
+    original: require('@site/static/img/previews/translate.png').default,
+    title: 'LLM-based Translation Plugin - translate your admin and External apps',
+    link: '/docs/tutorial/Plugins/i18n/',
+    description: 'Use LLMs to translate any external apps (Mobile, Nuxt, etc.) OR/AND admin panel with minimal effort. Any language supported'
   },
   {
     original: require('@site/static/img/previews/auditlog.png').default,
     title: 'Audit log Plugin - know who did what',
     link: '/docs/tutorial/Plugins/AuditLog/',
-    description: 'Attach Audit log plugin with couple of lines, create table for logs and track your users actions'
+    description: 'Attach Audit log plugin with couple of lines, create table for logs and track full history of any data changes'
   },
   {
-    original: require('@site/static/img/previews/2fa_plugin.png').default,
-    title: '2FA Plugin - secure your admin panel',
-    link: '/docs/tutorial/Plugins/TwoFactorsAuth/',
-    description: 'RFC 6238-Compliant TOTP-Based 2FA will add additional security layer to your admin panel. Also supports passkeys'
+    original: require('@site/static/img/previews/ai_complete.png').default,
+    title: 'AI autocomplete Plugin - write with LLMs',
+    link: '/docs/tutorial/Plugins/text-complete/',
+    description: 'Provide your LLM API key to autocomplete plugin and AI will help you to write your content using record context'
   },
   {
     original: require('@site/static/img/previews/dark.png').default,
@@ -58,18 +76,7 @@ const images = [
     link: '/docs/tutorial/Plugins/05-0-upload/',
     description: 'Upload files to Amazon S3 with instantiating plugin and providing your S3 credentials' 
   },
-  {
-    original: require('@site/static/img/previews/dashboard.png').default,
-    title: 'Custom Pages and Dashboards',
-    link: '/docs/tutorial/Customization/customPages/',
-    description: 'Create your own pages and dashboards with Vue3 components. Add any additional npm packages and extend your admin panel as you like'
-  },
-  {
-    original: require('@site/static/img/previews/branding.png').default,
-    title: 'Branding and theming',
-    link: '/docs/tutorial/Customization/branding/',
-    description: 'Upload your logo, change colors, update titles, make the look to match your brand'
-  },
+  
   {
     original: require('@site/static/img/previews/filters.png').default,
     title: 'Filters to query your data',
@@ -100,12 +107,6 @@ const images = [
     link: '/docs/tutorial/Plugins/import-export/',
     description: 'Export tables to CSV and import from CSV with one click. Move data between environments easily'
   },
-  {
-    original: require('@site/static/img/previews/translate.png').default,
-    title: 'AI Translation Plugin - translate your admin and External apps',
-    link: '/docs/tutorial/Plugins/i18n/',
-    description: 'Use LLMs to translate any external apps (Mobile, Nuxt, etc.) OR/AND admin panel with minimal effort. Any language supported'
-  },
   {
     original: require('@site/static/img/previews/bulk-ai-flow.png').default,
     title: 'Bulk AI Plugin - generate data for your resources',
@@ -129,21 +130,13 @@ const images = [
 
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
-  // read theme from docusarus
-
-  const [theme, setTheme] = useState('light');
-
-  if (ExecutionEnvironment.canUseDOM) {
-
-    
-  } 
 
   return (
     <>
       <header className={clsx('hero', styles.heroBanner)}>
         <div className="container" >
           <Heading as="h1" className={clsx('hero__title', styles.heroBannerTitle)} >
-            The Free, Open-Source Admin Framework for Node, Vue & Tailwind
+            Open-Source Admin Framework with a native Agent
           </Heading>
           <p className="hero__subtitle">{siteConfig.tagline}</p>
 
@@ -183,15 +176,11 @@ function HomepageHeader() {
         <div className="laptop_container">
           <div className="laptop">
             <div className="laptop__screen">
-              <img 
-                src={{
-                    light: require('@site/static/img/preview_light.png').default,
-                    dark: require('@site/static/img/preview_dark.png').default,
-                  }[theme]
-                } alt="Screen" />
-              <div className="theme_switcher" onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
-                
-              </div>
+              <iframe
+                className={styles.demoFrame}
+                src={LIVE_DEMO_IFRAME_URL}
+                title="AdminForth live demo"
+              />
             </div>
             <div className="laptop__bottom">
               <div className="laptop__under"></div>