Add decorator autocomplete

src/lib/UI/GUI/TextAreaInput.svelte

@@ -115,7 +115,7 @@
 </div>
 <script lang="ts">
     import { textAreaSize, textAreaTextSize } from 'src/ts/gui/guisize'
-    import { highlighter, getNewHighlightId, removeHighlight, AllCBS } from 'src/ts/gui/highlight'
+    import { highlighter, getNewHighlightId, removeHighlight, AllCBS, decorators } from 'src/ts/gui/highlight'
     import { isMobile } from 'src/ts/globalApi.svelte';
     import { isFirefox, sleep } from 'src/ts/util';
     import { onDestroy, onMount } from 'svelte';
@@ -159,7 +159,7 @@
     let autocompleteContents:string[] = $state([])
     let inputDom: HTMLDivElement = $state()
 
-    const autoComplete = () => {
+    const autoComplete = (type:'cbs'|'decorator'|'both' = 'both') => {
         if(isMobile){
             return
         }
@@ -174,14 +174,24 @@
 
         if(range){
             const qValue = (range.startContainer).textContent
-            const splited = qValue.substring(0, range.startOffset).split('{{')
+            const splited = qValue.substring(0, range.startOffset).split(type === 'decorator' ? '@@' : '{{')
             if(splited.length === 1){
+                if(type === 'both'){
+                    return autoComplete('decorator')
+                }
                 hideAutoComplete()
                 return
             }
             const qText = splited.pop()
-            let filtered = AllCBS.filter((cb) => cb.startsWith(qText))
+            let filtered = (type === 'decorator' ? decorators : AllCBS).filter((cb) => cb.startsWith(qText))
+            if(type === 'decorator'){
+                filtered = filtered.map((cb) => '@' + cb)
+            }
+
             if(filtered.length === 0){
+                if(type === 'both'){
+                    return autoComplete('decorator')
+                }
                 hideAutoComplete()
                 return
             }
@@ -211,8 +221,11 @@
             let contentStart = content.substring(0, range.startOffset)
             let contentEnd = content.substring(range.startOffset)
             if(type === 'autoComplete'){
-                contentStart = contentStart.substring(0, contentStart.lastIndexOf('{{'))
-                if(insertContent.endsWith(':')){
+                contentStart = contentStart.substring(0, contentStart.lastIndexOf(insertContent.startsWith('@') ? '@@' : '{{'))
+                if(insertContent.startsWith('@')){
+                    insertContent = `@${insertContent}`
+                }
+                else if(insertContent.endsWith(':')){
                     insertContent = `{{${insertContent}:`
                 }
                 else if(insertContent.startsWith('#')){

src/ts/gui/highlight.ts

@@ -126,7 +126,7 @@ const deprecatedCBSwithParams = [
     'remaind', 'pow'
 ]
 
-const decorators = [
+export const decorators = [
     'activate_only_after', 'activate_only_every', 'keep_activate_after_match', 'dont_activate_after_match', 'depth', 'reverse_depth',
     'instruct_depth', 'reverse_instruct_depth', 'instruct_scan_depth', 'role', 'scan_depth', 'is_greeting', 'position', 'ignore_on_max_context',
     'additional_keys', 'exclude_keys', 'is_user_icon', 'activate', 'dont_activate', 'disable_ui_prompt', 'probability', 'exclude_keys_all', 'match_full_word', 'match_partial_word'