Sharkey/packages/client/src/widgets/aiscript.vue

175 lines
3.6 KiB
Vue
Raw Normal View History

2021-02-06 14:36:47 +02:00
<template>
<MkContainer :show-header="widgetProps.showHeader">
<template #header><i class="fas fa-terminal"></i>{{ $ts._widgets.aiscript }}</template>
2021-02-06 14:36:47 +02:00
<div class="uylguesu _monospace">
<textarea v-model="widgetProps.script" placeholder="(1 + 1)"></textarea>
2021-11-19 12:36:12 +02:00
<button class="_buttonPrimary" @click="run">RUN</button>
2021-02-06 14:36:47 +02:00
<div class="logs">
2021-11-19 12:36:12 +02:00
<div v-for="log in logs" :key="log.id" class="log" :class="{ print: log.print }">{{ log.text }}</div>
2021-02-06 14:36:47 +02:00
</div>
</div>
</MkContainer>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref, watch } from 'vue';
import { GetFormResultType } from '@/scripts/form';
import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
2021-11-11 19:02:25 +02:00
import * as os from '@/os';
import MkContainer from '@/components/ui/container.vue';
2021-02-06 14:36:47 +02:00
import { AiScript, parse, utils } from '@syuilo/aiscript';
2021-11-11 19:02:25 +02:00
import { createAiScriptEnv } from '@/scripts/aiscript/api';
import { $i } from '@/account';
2021-02-06 14:36:47 +02:00
const name = 'aiscript';
2021-02-06 14:36:47 +02:00
const widgetPropsDef = {
showHeader: {
type: 'boolean' as const,
default: true,
2021-02-06 14:36:47 +02:00
},
script: {
type: 'string' as const,
multiline: true,
default: '(1 + 1)',
hidden: true,
2021-02-06 14:36:47 +02:00
},
};
2021-02-06 14:36:47 +02:00
type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
2021-02-06 14:36:47 +02:00
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
//const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef,
props,
emit,
);
const logs = ref<{
id: string;
text: string;
print: boolean;
}[]>([]);
const run = async () => {
logs.value = [];
const aiscript = new AiScript(createAiScriptEnv({
storageKey: 'widget',
token: $i?.token,
}), {
in: (q) => {
return new Promise(ok => {
os.inputText({
title: q,
}).then(({ canceled, result: a }) => {
ok(a);
2021-02-06 14:36:47 +02:00
});
});
},
out: (value) => {
logs.value.push({
id: Math.random().toString(),
text: value.type === 'str' ? value.value : utils.valToString(value),
print: true,
});
2021-02-06 14:36:47 +02:00
},
log: (type, params) => {
switch (type) {
case 'end': logs.value.push({
id: Math.random().toString(),
text: utils.valToString(params.val, true),
print: false,
}); break;
default: break;
}
}
});
let ast;
try {
ast = parse(widgetProps.script);
} catch (err) {
os.alert({
type: 'error',
text: 'Syntax error :(',
});
return;
2021-02-06 14:36:47 +02:00
}
try {
await aiscript.exec(ast);
} catch (err) {
os.alert({
type: 'error',
text: err,
});
}
};
defineExpose<WidgetComponentExpose>({
name,
configure,
id: props.widget ? props.widget.id : null,
2021-02-06 14:36:47 +02:00
});
</script>
<style lang="scss" scoped>
.uylguesu {
text-align: right;
> textarea {
display: block;
width: 100%;
max-width: 100%;
min-width: 100%;
padding: 16px;
color: var(--fg);
background: transparent;
border: none;
border-bottom: solid 0.5px var(--divider);
2021-02-06 14:36:47 +02:00
border-radius: 0;
box-sizing: border-box;
font: inherit;
2021-10-02 20:46:58 +03:00
&:focus-visible {
2021-02-06 14:36:47 +02:00
outline: none;
}
}
> button {
display: inline-block;
margin: 8px;
padding: 0 10px;
height: 28px;
outline: none;
border-radius: 4px;
&:disabled {
opacity: 0.7;
cursor: default;
}
}
> .logs {
border-top: solid 0.5px var(--divider);
2021-02-06 14:36:47 +02:00
text-align: left;
padding: 16px;
&:empty {
display: none;
}
> .log {
&:not(.print) {
opacity: 0.7;
}
}
}
}
</style>