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

Author: yaroslav8765

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

@@ -43,7 +43,7 @@ async function allowedForSuperAdmins({ adminUser }: { adminUser: AdminUser }): P
 }
 
 export default {
-  dataSource: 'sqlite',
+  dataSource: 'maindb',
   table: 'sessions',
   resourceId: 'sessions',
   label: 'Sessions',
@@ -102,7 +102,7 @@ async function allowedForSuperAdmins({ adminUser }: { adminUser: AdminUser }): P
 }
 
 export default {
-  dataSource: 'sqlite',
+  dataSource: 'maindb',
   table: 'turns',
   resourceId: 'turns',
   label: 'Turns',
@@ -479,11 +479,17 @@ The plugin ships with bundled skills from `plugins/adminforth-agent/custom/skill
 | `mutate_data` | `mutate_data` | Create, update, delete, or run actions on records. Before any mutation it must show the exact target row and ask the user for confirmation. |
 
 
-## Persistent checkpointer
+## Persistent agent memory
 
-If you do not configure `checkpointResource`, the plugin falls back to an in-memory `MemorySaver`. This is fine for local testing, but checkpoints are lost on process restart.
+The plugin stores visible chat history in the `sessions` and `turns` resources. This is what users see in the chat sidebar and in old conversations.
 
-If you want persistent LangGraph checkpoints between requests, add a dedicated resource and pass it via `checkpointResource`.
+The agent also needs its own internal conversation state to continue an existing chat. If you do not configure `checkpointResource`, that internal state is kept only in the Node.js process memory. This is fine for local testing and for new chats, but it is not durable:
+
+- after a server restart, users can still see old chat messages because `sessions` and `turns` are stored in your database
+- after a server restart, users can continue an old chat, but the agent will treat it like a new conversation because its internal state was lost
+- new chats will work normally again until the next restart
+
+For production, configure `checkpointResource` so the agent can safely continue old chats after restarts and deployments.
 
 You can use your own table and field names. The plugin does not require a specific schema name, only a mapping for these logical fields:
 
@@ -508,7 +514,7 @@ import { AdminForthDataTypes } from 'adminforth';
 import type { AdminForthResourceInput } from 'adminforth';
 
 export default {
-  dataSource: 'sqlite',
+  dataSource: 'maindb',
   table: 'checkpoints',
   resourceId: 'checkpoints',
   label: 'Checkpoints',

adminforth/spa/src/components/AcceptModal.vue

@@ -6,34 +6,70 @@
       backgroundCustomClasses="z-[998]"
       modalCustomClasses="z-[999]"
     >
-      <div class="relative p-4 w-full max-w-md max-h-full" >
-        <button type="button" @click="modalStore.togleModal()" class="absolute top-3 end-2.5 text-lightAcceptModalCloseIcon bg-transparent hover:bg-lightAcceptModalCloseIconHoverBackground hover:text-lightAcceptModalCloseIconHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkAcceptModalCloseIcon dark:hover:bg-darkAcceptModalCloseIconHoverBackground dark:hover:text-darkAcceptModalCloseIconHover" >
-          <svg class="w-3 h-3"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+      <div class="relative p-6 sm:p-8 w-[440px] bg-white rounded-2xl shadow-xl dark:bg-gray-800" >
+        
+        <button type="button" @click="modalStore.togleModal()" class="absolute top-4 right-4 text-gray-400 hover:text-gray-900 transition-colors dark:hover:text-white" >
+          <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
           </svg>
-          <span class="sr-only">{{ $t('Close modal') }}</span>
         </button>
-        <div class="p-4 md:p-5 text-center">
-          <svg class="mx-auto mb-4 text-lightAcceptModalWarningIcon w-12 h-12 dark:text-darkAcceptModalWarningIcon"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
-          </svg>
-          <h3 class="afcl-confirmation-title mb-5 text-lg font-normal text-lightAcceptModalText dark:text-darkAcceptModalText">{{ modalStore?.modalContent?.content }}</h3>
-          <h3 class=" afcl-confirmation-title mb-5 text-lg font-normal text-lightAcceptModalText dark:text-darkAcceptModalText" v-html="modalStore?.modalContent?.contentHTML"></h3>
 
-          <button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="afcl-confirmation-accept-button text-lightAcceptModalConfirmButtonText bg-lightAcceptModalConfirmButtonBackground hover:bg-lightAcceptModalConfirmButtonBackgroundHover focus:ring-4 focus:outline-none focus:ring-lightAcceptModalConfirmButtonFocus font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center dark:text-darkAcceptModalConfirmButtonText dark:bg-darkAcceptModalConfirmButtonBackground dark:hover:bg-darkAcceptModalConfirmButtonBackgroundHover dark:focus:ring-darkAcceptModalConfirmButtonFocus">
-              {{ modalStore?.modalContent?.acceptText }}
-          </button>
-          <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}"  type="button" class="afcl-confirmation-cancel-button py-2.5 px-5 ms-3 text-sm font-medium text-lightAcceptModalCancelButtonText focus:outline-none bg-lightAcceptModalCancelButtonBackground rounded-lg border border-lightAcceptModalCancelButtonBorder hover:bg-lightAcceptModalCancelButtonBackgroundHover hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-lightAcceptModalCancelButtonFocus dark:focus:ring-darkAcceptModalCancelButtonFocus dark:bg-darkAcceptModalCancelButtonBackground dark:text-darkAcceptModalCancelButtonText dark:border-darkAcceptModalCancelButtonBorder dark:hover:text-darkAcceptModalCancelButtonTextHover dark:hover:bg-darkAcceptModalCancelButtonBackgroundHover">{{ modalStore?.modalContent?.cancelText }}</button>
+        <div class="text-center">
+          <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-red-50 mb-5 relative dark:bg-red-900/20">
+            <IconClipboardDocumentSolid class="w-10 h-10 text-red-500" />
+          <div class="absolute bottom-1 right-1 bg-red-500 rounded-full w-[18px] h-[18px] flex items-center justify-center border-2 border-white dark:border-gray-800">
+              <span class="text-white text-[10px] font-medium">!</span>
+          </div>
+        </div>
+          
+          <h3 class="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
+            There are unsaved changes.
+          </h3>
+          
+          <div class="mb-2 text-[15px] text-gray-600 dark:text-gray-300">
+            <div v-if="modalStore?.modalContent?.contentHTML" class="font-medium" v-html="modalStore.modalContent.contentHTML"></div>
+            <p v-else-if="modalStore?.modalContent?.content" class="font-medium">{{ modalStore.modalContent.content }}</p>
+          </div>
+
+          <hr class="border-t border-gray-100 dark:border-gray-700 mb-6">
+
+          <div class="flex justify-center gap-4 w-full">
+            <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}" type="button" class="flex-1 py-2.5 px-4 text-sm font-medium text-gray-700 bg-white rounded-lg border border-gray-200 hover:bg-gray-50 focus:ring-4 focus:ring-gray-100 transition-all dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
+                Stay and continue
+            </button>
+            
+            <button 
+              @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" 
+              type="button" 
+              class="flex-1 flex items-center justify-center py-2.5 px-4 text-sm font-medium transition-all focus:outline-none 
+                    text-white bg-red-600 hover:bg-red-700 
+                    dark:bg-red-500 dark:hover:bg-red-600 
+                    border border-red-700 dark:border-red-600 
+                    rounded-lg shadow-sm focus:z-10 focus:ring-4 
+                    focus:ring-red-100 dark:focus:ring-red-900 gap-1">
+                Leave without saving
+            </button>
+          </div>
+
+          <div class="flex items-center justify-center mt-5 text-xs text-gray-400 gap-1.5 font-medium">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
+            </svg>
+            <span>Your changes will not be saved</span>
+          </div>
+
         </div>
       </div>
     </Modal>
   </Teleport>
 </template>
 
 <script setup lang="ts">
-import { watch, onMounted, nextTick, ref } from 'vue';
+import { watch, ref } from 'vue';
 import { useModalStore } from '@/stores/modal';
 import { Modal } from '@/afcl';
+import { IconClipboardDocumentSolid } from '@iconify-prerendered/vue-heroicons';
+
 
 const modalRef = ref();
 const modalStore = useModalStore();

adminforth/spa/src/utils/utils.ts

@@ -707,7 +707,16 @@ export function generateMessageHtmlForRecordChange(changedFields: Record<string,
   }).join('');
 
   const listHtml = items ? `<ul class="mt-2 list-disc list-inside">${items}</ul>` : '';
-  const messageHtml = `<div>${escapeHtml(t('There are unsaved changes. Are you sure you want to leave this page?'))}${listHtml}</div>`;
+  const messageHtml = `
+    <div class="flex flex-col gap-y-2 text-center">
+      <div class="text-gray-500 dark:text-gray-400">
+        ${listHtml}
+      </div>
+      <p class="font-medium text-gray-900 dark:text-white mt-4"> 
+        ${escapeHtml(t('Are you sure you want to leave this page?'))}
+      </p>
+    </div>
+  `;
   return messageHtml; 
 }