Added button to trigger script

src/styles.css

@@ -176,3 +176,7 @@ html, body{
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
+.x-risu-button-default{
+  @apply border text-textcolor rounded-md shadow-sm focus:outline-none focus:ring-2 transition-colors duration-200 border-darkborderc px-4 py-2 bg-darkbutton hover:bg-borderc focus:ring-borderc
+}

src/ts/observer.ts

@@ -4,43 +4,59 @@ import { CurrentCharacter, CurrentChat } from "./stores";
 import { runCharacterJS } from "./plugins/embedscript";
 
 
+function nodeObserve(node:HTMLElement){
+    const triggerName = node.getAttribute('risu-trigger');
+    const btnEvent = node.getAttribute('risu-btn');
+    const observerAdded = node.getAttribute('risu-observer');
+
+    if(observerAdded){
+        return
+    }
+    if(triggerName){
+        node.addEventListener('click', async () => {
+            const currentChar = get(CurrentCharacter)
+            if(currentChar.type === 'group'){
+                return;
+            }
+            const triggerResult = await runTrigger(currentChar, 'manual', {
+                chat: get(CurrentChat),
+                manualName: triggerName,
+            });
+
+            if(triggerResult){
+               CurrentChat.set(triggerResult.chat);
+            }
+            
+        }, {
+            passive: true,
+        });
+        node.setAttribute('risu-observer', 'true');
+        return
+    }
+
+    if(btnEvent){
+        node.addEventListener('click',async ()=>{
+            await runCharacterJS({
+                code: null,
+                mode: 'onButtonClick',
+                data: btnEvent
+            })
+        }, {passive: true})
+        node.setAttribute('risu-observer', 'true');
+        return
+    }
+}
+
 export function startObserveDom(){
     const observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
             const node = mutation.target as HTMLElement;
-            const triggerName = node.getAttribute('risu-trigger');
+            if(node.nodeType !== 1){
-            const btnEvent = node.getAttribute('risu-btn');
+                return;
-
-            if(triggerName){
-                node.addEventListener('click', async () => {
-                    const currentChar = get(CurrentCharacter)
-                    if(currentChar.type === 'group'){
-                        return;
-                    }
-                    const triggerResult = await runTrigger(currentChar, 'manual', {
-                        chat: get(CurrentChat),
-                        manualName: triggerName,
-                    });
-    
-                    if(triggerResult){
-                       CurrentChat.set(triggerResult.chat);
-                    }
-                    
-                }, {
-                    passive: true,
-                });
             }
-
+            node.querySelectorAll('[risu-trigger]').forEach(nodeObserve);
-            if(btnEvent){
+            node.querySelectorAll('[risu-btn]').forEach(nodeObserve);
-                node.addEventListener('click',async ()=>{
+            nodeObserve(node)
-                    await runCharacterJS({
-                        code: null,
-                        mode: 'onButtonClick',
-                        data: btnEvent
-                    })
-                }, {passive: true})
-            }
-
         });
     });
 
@@ -48,5 +64,6 @@ export function startObserveDom(){
         childList: true,
         subtree: true,
         attributeFilter: ['risu-trigger', 'risu-btn'],
+        attributes: true,
     });
 }

src/ts/parser.ts

@@ -732,7 +732,7 @@ const matcher = (p1:string,matcherArg:matcherArg) => {
                     return null
                 }
                 case 'button':{
-                    return `<button style="padding" x-risu-prompt="${arra[2]}">${arra[1]}</button>`
+                    return `<button class="button-default" risu-trigger="${arra[2]}">${arra[1]}</button>`
                 }
                 case 'risu':{
                     return `<img src="/logo2.png" style="height:${v || 45}px;width:${v || 45}px" />`

src/ts/storage/globalApi.ts

@@ -30,6 +30,7 @@ import type { RisuModule } from "../process/modules";
 import { listen } from '@tauri-apps/api/event'
 import { registerPlugin } from '@capacitor/core';
 import { language } from "src/lang";
+import { startObserveDom } from "../observer";
 
 //@ts-ignore
 export const isTauri = !!window.__TAURI__
@@ -508,6 +509,7 @@ export async function loadData() {
             }
             loadedStore.set(true)
             selectedCharID.set(-1)
+            startObserveDom()
             saveDb()   
         } catch (error) {
             alertError(`${error}`)