[feat] trigger gui
This commit is contained in:
kwaroran
97
src/lib/SideBars/Scripts/RegexData.svelte
Normal file
97
src/lib/SideBars/Scripts/RegexData.svelte
Normal file
@@ -0,0 +1,97 @@
|
||||
<script lang="ts">
|
||||
import { XIcon } from "lucide-svelte";
|
||||
import { language } from "src/lang";
|
||||
import { alertConfirm } from "src/ts/alert";
|
||||
import type { customscript } from "src/ts/storage/database";
|
||||
import Check from "../../UI/GUI/CheckInput.svelte";
|
||||
import TextInput from "../../UI/GUI/TextInput.svelte";
|
||||
import SelectInput from "../../UI/GUI/SelectInput.svelte";
|
||||
import OptionInput from "../../UI/GUI/OptionInput.svelte";
|
||||
|
||||
export let value:customscript
|
||||
export let onRemove: () => void = () => {}
|
||||
export let onClose: () => void = () => {}
|
||||
export let onOpen: () => void = () => {}
|
||||
|
||||
export let idx:number
|
||||
let open = false
|
||||
</script>
|
||||
|
||||
<div class="w-full flex flex-col pt-2 mt-2 border-t border-t-selected first:pt-0 first:mt-0 first:border-0" data-risu-idx={idx}>
|
||||
<div class="flex items-center transition-colors w-full ">
|
||||
<button class="endflex valuer border-borderc" on:click={() => {
|
||||
open = !open
|
||||
if(open){
|
||||
onOpen()
|
||||
}
|
||||
else{
|
||||
onClose()
|
||||
}
|
||||
}}>
|
||||
<span>{value.comment.length === 0 ? 'Unnamed Script' : value.comment}</span>
|
||||
</button>
|
||||
<button class="valuer" on:click={async () => {
|
||||
const d = await alertConfirm(language.removeConfirm + value.comment)
|
||||
if(d){
|
||||
if(!open){
|
||||
onClose()
|
||||
}
|
||||
onRemove()
|
||||
}
|
||||
}}>
|
||||
<XIcon />
|
||||
</button>
|
||||
</div>
|
||||
{#if open}
|
||||
<div class="seperator p-2">
|
||||
<span class="text-neutral-200 mt-6">{language.name}</span>
|
||||
<TextInput size="sm" bind:value={value.comment} />
|
||||
<span class="text-neutral-200 mt-4">Modification Type</span>
|
||||
<SelectInput bind:value={value.type}>
|
||||
<OptionInput value="editinput">{language.editInput}</OptionInput>
|
||||
<OptionInput value="editoutput">{language.editOutput}</OptionInput>
|
||||
<OptionInput value="editprocess">{language.editProcess}</OptionInput>
|
||||
<OptionInput value="editdisplay">{language.editDisplay}</OptionInput>
|
||||
</SelectInput>
|
||||
<span class="text-neutral-200 mt-6">IN:</span>
|
||||
<TextInput size="sm" bind:value={value.in} />
|
||||
<span class="text-neutral-200 mt-6">OUT:</span>
|
||||
<TextInput size="sm" bind:value={value.out} />
|
||||
{#if value.ableFlag}
|
||||
<span class="text-neutral-200 mt-6">FLAG:</span>
|
||||
<TextInput size="sm" bind:value={value.flag} />
|
||||
{/if}
|
||||
<div class="flex items-center mt-4">
|
||||
<Check bind:check={value.ableFlag} onChange={() => {
|
||||
if(!value.flag){
|
||||
value.flag = 'g'
|
||||
}
|
||||
}}/>
|
||||
<span>Custom Flag</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.valuer:hover{
|
||||
color: rgba(16, 185, 129, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.endflex{
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.seperator{
|
||||
border: none;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
67
src/lib/SideBars/Scripts/RegexList.svelte
Normal file
67
src/lib/SideBars/Scripts/RegexList.svelte
Normal file
@@ -0,0 +1,67 @@
|
||||
<script lang="ts">
|
||||
import type { customscript } from "src/ts/storage/database";
|
||||
import RegexData from "./RegexData.svelte";
|
||||
import Sortable from "sortablejs";
|
||||
import { sleep } from "src/ts/util";
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
export let value:customscript[] = []
|
||||
let stb: Sortable = null
|
||||
let ele: HTMLDivElement
|
||||
let sorted = 0
|
||||
let opened = 0
|
||||
const createStb = () => {
|
||||
stb = Sortable.create(ele, {
|
||||
onEnd: async () => {
|
||||
let idx:number[] = []
|
||||
ele.querySelectorAll('[data-risu-idx]').forEach((e, i) => {
|
||||
idx.push(parseInt(e.getAttribute('data-risu-idx')))
|
||||
})
|
||||
let newValue:customscript[] = []
|
||||
idx.forEach((i) => {
|
||||
newValue.push(value[i])
|
||||
})
|
||||
value = newValue
|
||||
stb.destroy()
|
||||
sorted += 1
|
||||
await sleep(1)
|
||||
createStb()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const onOpen = () => {
|
||||
opened += 1
|
||||
if(stb){
|
||||
stb.destroy()
|
||||
}
|
||||
}
|
||||
const onClose = () => {
|
||||
opened -= 1
|
||||
// if(opened === 0){
|
||||
// createStb()
|
||||
// }
|
||||
}
|
||||
|
||||
// onMount(createStb)
|
||||
|
||||
onDestroy(() => {
|
||||
if(stb){
|
||||
stb.destroy()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="contain w-full max-w-full mt-4 flex flex-col p-3 border-selected border-1 bg-darkbg rounded-md" bind:this={ele}>
|
||||
{#if value.length === 0}
|
||||
<div class="text-gray-500">No Scripts</div>
|
||||
{/if}
|
||||
{#key sorted}
|
||||
{#each value as customscript, i}
|
||||
<RegexData idx={i} bind:value={value[i]} onOpen={onOpen} onClose={onClose} onRemove={() => {
|
||||
let customscript = value
|
||||
customscript.splice(i, 1)
|
||||
value = customscript
|
||||
}}/>
|
||||
{/each}
|
||||
{/key}
|
||||
</div>
|
||||
244
src/lib/SideBars/Scripts/TriggerData.svelte
Normal file
244
src/lib/SideBars/Scripts/TriggerData.svelte
Normal file
@@ -0,0 +1,244 @@
|
||||
<script lang="ts">
|
||||
import { PlusIcon, XIcon } from "lucide-svelte";
|
||||
import { language } from "src/lang";
|
||||
import { alertConfirm } from "src/ts/alert";
|
||||
import type { triggerscript } from "src/ts/storage/database";
|
||||
import Check from "../../UI/GUI/CheckInput.svelte";
|
||||
import TextInput from "../../UI/GUI/TextInput.svelte";
|
||||
import SelectInput from "../../UI/GUI/SelectInput.svelte";
|
||||
import OptionInput from "../../UI/GUI/OptionInput.svelte";
|
||||
import NumberInput from "src/lib/UI/GUI/NumberInput.svelte";
|
||||
import TextAreaInput from "src/lib/UI/GUI/TextAreaInput.svelte";
|
||||
|
||||
export let value:triggerscript
|
||||
export let onRemove: () => void = () => {}
|
||||
export let onClose: () => void = () => {}
|
||||
export let onOpen: () => void = () => {}
|
||||
|
||||
export let idx:number
|
||||
let open = false
|
||||
</script>
|
||||
|
||||
<div class="w-full flex flex-col pt-2 mt-2 border-t border-t-selected first:pt-0 first:mt-0 first:border-0" data-risu-idx={idx}>
|
||||
<div class="flex items-center transition-colors w-full ">
|
||||
<button class="endflex valuer border-borderc" on:click={() => {
|
||||
open = !open
|
||||
if(open){
|
||||
onOpen()
|
||||
}
|
||||
else{
|
||||
onClose()
|
||||
}
|
||||
}}>
|
||||
<span>{value.comment.length === 0 ? 'Unnamed Trigger' : value.comment}</span>
|
||||
</button>
|
||||
<button class="valuer" on:click={async () => {
|
||||
const d = await alertConfirm(language.removeConfirm + value.comment)
|
||||
if(d){
|
||||
if(!open){
|
||||
onClose()
|
||||
}
|
||||
onRemove()
|
||||
}
|
||||
}}>
|
||||
<XIcon />
|
||||
</button>
|
||||
</div>
|
||||
{#if open}
|
||||
<div class="seperator p-2">
|
||||
<span class="text-neutral-200 mt-6">{language.name}</span>
|
||||
<TextInput size="sm" bind:value={value.comment} />
|
||||
<span class="text-neutral-200 mt-4">{language.type}</span>
|
||||
<SelectInput bind:value={value.type}>
|
||||
<OptionInput value="output">{language.triggerOutput}</OptionInput>
|
||||
<OptionInput value="start">{language.triggerStart}</OptionInput>
|
||||
<OptionInput value="manual">{language.triggerManual}</OptionInput>
|
||||
</SelectInput>
|
||||
|
||||
<span class="text-neutral-200 mt-4">Conditions
|
||||
<button aria-labelledby="Add Conditions" class="float-right text-gray-400 hover:text-green-500" on:click={() => {
|
||||
value.conditions.push({
|
||||
type: 'exists',
|
||||
value: '',
|
||||
type2: 'loose',
|
||||
depth: 3
|
||||
})
|
||||
value.conditions = value.conditions
|
||||
|
||||
}}><PlusIcon size={18} /></button>
|
||||
</span>
|
||||
<div class="flex flex-col px-2 py-4 border border-selected rounded-md">
|
||||
{#if value.conditions.length === 0}
|
||||
<span class="text-gray-500 text-sm">{language.always}</span>
|
||||
{/if}
|
||||
{#each value.conditions as cond,i}
|
||||
{#if i > 0}
|
||||
<hr class="border-selected my-4" />
|
||||
{/if}
|
||||
<span class="text-gray-400 text-sm">{language.type}
|
||||
<button aria-labelledby="Add Conditions" class="float-right text-gray-400 hover:text-green-500" on:click={() => {
|
||||
value.conditions.splice(i, 1)
|
||||
value.conditions = value.conditions
|
||||
|
||||
}}><XIcon size={18} /></button>
|
||||
|
||||
</span>
|
||||
<SelectInput bind:value={cond.type} size="sm" on:change={() => {
|
||||
if(cond.type === 'exists'){
|
||||
cond = {
|
||||
type: 'exists',
|
||||
value: '',
|
||||
type2: 'loose',
|
||||
depth: 3
|
||||
}
|
||||
}
|
||||
if(cond.type === 'var'){
|
||||
cond = {
|
||||
type: 'var',
|
||||
var: '',
|
||||
value: '',
|
||||
operator: '='
|
||||
}
|
||||
}
|
||||
}}>
|
||||
<OptionInput value="exists">{language.triggerCondExists}</OptionInput>
|
||||
<OptionInput value="var">{language.triggerCondVar}</OptionInput>
|
||||
</SelectInput>
|
||||
|
||||
{#if cond.type === 'exists'}
|
||||
<SelectInput bind:value={cond.type2} size="sm">
|
||||
<OptionInput value="loose">{language.triggerMatchLoose}</OptionInput>
|
||||
<OptionInput value="strict">{language.triggerMatchStrict}</OptionInput>
|
||||
<OptionInput value="regex">{language.triggerMatchRegex}</OptionInput>
|
||||
</SelectInput>
|
||||
<span class="text-gray-400 text-sm">{language.value}</span>
|
||||
<TextInput size="sm" bind:value={cond.value} />
|
||||
|
||||
<span class="text-gray-400 text-sm">{language.searchDepth}</span>
|
||||
<NumberInput size="sm" bind:value={cond.depth} />
|
||||
{/if}
|
||||
{#if cond.type === 'var'}
|
||||
<span class="text-gray-400 text-sm">{language.varableName}</span>
|
||||
<TextInput size="sm" bind:value={cond.var} />
|
||||
<span class="text-gray-400 text-sm">{language.value}</span>
|
||||
<SelectInput bind:value={cond.operator} size="sm">
|
||||
<OptionInput value="=">{language.equal}</OptionInput>
|
||||
<OptionInput value="!=">{language.notEqual}</OptionInput>
|
||||
<OptionInput value=">">{language.greater}</OptionInput>
|
||||
<OptionInput value="<">{language.less}</OptionInput>
|
||||
<OptionInput value=">=">{language.greaterEqual}</OptionInput>
|
||||
<OptionInput value="<=">{language.lessEqual}</OptionInput>
|
||||
</SelectInput>
|
||||
<TextInput size="sm" bind:value={cond.value} />
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<span class="text-neutral-200 mt-4">Effects
|
||||
<button aria-labelledby="Add Effects" class="float-right text-gray-400 hover:text-green-500" on:click={() => {
|
||||
value.effect.push({
|
||||
type: 'systemprompt',
|
||||
value: '',
|
||||
location: 'historyend'
|
||||
})
|
||||
value.effect = value.effect
|
||||
|
||||
}}><PlusIcon size={18} /></button>
|
||||
</span>
|
||||
|
||||
<div class="flex flex-col px-2 py-4 border border-selected rounded-md">
|
||||
{#if value.effect.length === 0}
|
||||
<span class="text-gray-500 text-sm">{language.noEffect}</span>
|
||||
{/if}
|
||||
{#each value.effect as effect,i}
|
||||
{#if i > 0}
|
||||
<hr class="border-selected my-4" />
|
||||
{/if}
|
||||
<span class="text-gray-400 text-sm">{language.type}
|
||||
<button aria-labelledby="Add Conditions" class="float-right text-gray-400 hover:text-green-500" on:click={() => {
|
||||
value.effect.splice(i, 1)
|
||||
value.effect = value.effect
|
||||
|
||||
}}><XIcon size={18} /></button>
|
||||
|
||||
</span>
|
||||
<SelectInput bind:value={effect.type} size="sm" on:change={() => {
|
||||
if(effect.type === 'systemprompt'){
|
||||
effect = {
|
||||
type: 'systemprompt',
|
||||
value: '',
|
||||
location: 'historyend'
|
||||
}
|
||||
}
|
||||
if(effect.type === 'setvar'){
|
||||
effect = {
|
||||
type: 'setvar',
|
||||
var: '',
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
if(effect.type === 'impersonate'){
|
||||
effect = {
|
||||
type: 'impersonate',
|
||||
role: 'char',
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}}>
|
||||
<OptionInput value="systemprompt">{language.triggerEffSysPrompt}</OptionInput>
|
||||
<OptionInput value="setvar">{language.triggerEffSetVar}</OptionInput>
|
||||
<OptionInput value="impersonate">{language.triggerEffImperson}</OptionInput>
|
||||
</SelectInput>
|
||||
{#if effect.type === 'systemprompt'}
|
||||
<span class="text-gray-400 text-sm">{language.location}</span>
|
||||
<SelectInput bind:value={effect.location} size="sm">
|
||||
<OptionInput value="start">{language.promptstart}</OptionInput>
|
||||
<OptionInput value="historyend">{language.historyend}</OptionInput>
|
||||
<OptionInput value="promptend">{language.promptend}</OptionInput>
|
||||
</SelectInput>
|
||||
<span class="text-gray-400 text-sm">{language.value}</span>
|
||||
<TextAreaInput size="sm" bind:value={effect.value} />
|
||||
{/if}
|
||||
{#if effect.type === 'setvar'}
|
||||
<span class="text-gray-400 text-sm">{language.varableName}</span>
|
||||
<TextInput size="sm" bind:value={effect.var} />
|
||||
<span class="text-gray-400 text-sm">{language.value}</span>
|
||||
<TextInput size="sm" bind:value={effect.value} />
|
||||
{/if}
|
||||
{#if effect.type === 'impersonate'}
|
||||
<span class="text-gray-400 text-sm">{language.role}</span>
|
||||
<SelectInput bind:value={effect.role} size="sm">
|
||||
<OptionInput value="user">{language.user}</OptionInput>
|
||||
<OptionInput value="char">{language.character}</OptionInput>
|
||||
</SelectInput>
|
||||
<span class="text-gray-400 text-sm">{language.value}</span>
|
||||
<TextAreaInput size="sm" bind:value={effect.value} />
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.valuer:hover{
|
||||
color: rgba(16, 185, 129, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.endflex{
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.seperator{
|
||||
border: none;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
23
src/lib/SideBars/Scripts/TriggerList.svelte
Normal file
23
src/lib/SideBars/Scripts/TriggerList.svelte
Normal file
@@ -0,0 +1,23 @@
|
||||
<script lang="ts">
|
||||
import type { triggerscript } from "src/ts/storage/database";
|
||||
import TriggerData from "./TriggerData.svelte";
|
||||
export let value:triggerscript[] = []
|
||||
let ele: HTMLDivElement
|
||||
let sorted = 0
|
||||
|
||||
</script>
|
||||
|
||||
<div class="contain w-full max-w-full mt-4 flex flex-col p-3 border-selected border-1 bg-darkbg rounded-md" bind:this={ele}>
|
||||
{#if value.length === 0}
|
||||
<div class="text-gray-500">No Scripts</div>
|
||||
{/if}
|
||||
{#key sorted}
|
||||
{#each value as triggerscript, i}
|
||||
<TriggerData idx={i} bind:value={value[i]} onRemove={() => {
|
||||
let triggerscript = value
|
||||
triggerscript.splice(i, 1)
|
||||
value = triggerscript
|
||||
}}/>
|
||||
{/each}
|
||||
{/key}
|
||||
</div>
|
||||
Reference in New Issue
Block a user