420 lines
11 KiB
Vue
420 lines
11 KiB
Vue
<script setup>
|
|
import {
|
|
ref, watch, reactive,
|
|
onMounted, onUnmounted,
|
|
} from "vue";
|
|
|
|
import TitleBar from '../components/TitleBar.vue';
|
|
|
|
import * as backend from '../backend';
|
|
import * as ui from '../ui';
|
|
|
|
const props = defineProps({
|
|
id: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const agent = ref({});
|
|
const kindInfo = ref({});
|
|
const configFields = ref([]);
|
|
// Only used for scripted agents.
|
|
const actionDefinitions = ref([]);
|
|
const modelList = ref([]);
|
|
|
|
|
|
// === State Management === //
|
|
|
|
async function loadAgentData (agentId) {
|
|
const _agent = await backend.getAgent(agentId);
|
|
if (!_agent) {
|
|
ui.alert("Agent not found");
|
|
return;
|
|
}
|
|
|
|
agent.value = {
|
|
id: _agent.id,
|
|
name: _agent.name,
|
|
agentname: _agent.agentname,
|
|
description: _agent.description,
|
|
picture: _agent.picture,
|
|
};
|
|
|
|
backend.sendAction("get-agent-kind-info", {kind: _agent.kind}).then(res => {
|
|
kindInfo.value.description = res.info.description;
|
|
kindInfo.value.name = _agent.kind;
|
|
});
|
|
|
|
backend.sendAction('get-agent-config-fields', {agentId}).then(res => {
|
|
const dataObject = Object.fromEntries(res.fields.map(
|
|
field => [field.name, field.value]
|
|
));
|
|
|
|
configFields.value = res.fields.map(field => ({
|
|
name: field.name,
|
|
type: field.type,
|
|
value: field.value,
|
|
kind: field.type,
|
|
default: null,
|
|
enabled: field.value != null,
|
|
}));
|
|
|
|
if (dataObject.actions) {
|
|
actionDefinitions.value = dataObject.actions.map(name => {
|
|
const fieldName = 'action_' + name;
|
|
const fieldData = dataObject[fieldName];
|
|
return {
|
|
name,
|
|
argument: fieldData ? JSON.stringify(fieldData.argument) : "{}",
|
|
body: fieldData && fieldData.body || "pass",
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
async function loadModels () {
|
|
let res = await backend.sendAction("get-models");
|
|
modelList.value = res.models;
|
|
}
|
|
|
|
// This won't fire when immediately, the mounted callback will take care
|
|
watch(() => props.id, newId => {
|
|
loadAgentData(newId);
|
|
})
|
|
|
|
onMounted(async () => {
|
|
loadAgentData(props.id);
|
|
loadModels();
|
|
});
|
|
|
|
// === Prompt === //
|
|
const promptInstructionEnabled = ref(false);
|
|
const promptInstruction = ref("");
|
|
const promptInput = ref("");
|
|
|
|
const promptInputElem = ref(null);
|
|
const promptHistory = ref([
|
|
//{instruction: 'Do something', input: 'With this data', output: "Doing thing with the data"},
|
|
//{input: 'Do this thing specifically', output: "Ok, I'll do the thing"},
|
|
//{input: 'Now, do something else', loading: true},
|
|
]);
|
|
|
|
async function sendPrompt () {
|
|
let instruction = promptInstruction.value;
|
|
let input = promptInput.value;
|
|
|
|
promptInstruction.value = "";
|
|
promptInput.value = "";
|
|
|
|
let payload = {agentId: agent.value.id};
|
|
let historyEntry = reactive({loading: true});
|
|
|
|
if (promptInstructionEnabled.value) {
|
|
payload.instruction = instruction;
|
|
payload.input = input;
|
|
|
|
historyEntry.instruction = instruction;
|
|
historyEntry.input = input;
|
|
} else {
|
|
// uhm
|
|
payload.instruction = input;
|
|
historyEntry.input = input;
|
|
}
|
|
|
|
promptHistory.value.push(historyEntry);
|
|
let res = await backend.sendAction("send-agent-prompt", payload);
|
|
|
|
if (res.error) {
|
|
historyEntry.error = res.error;
|
|
} else {
|
|
historyEntry.output = res.response;
|
|
}
|
|
historyEntry.loading = false;
|
|
}
|
|
|
|
function promptKeyDown (event, stage) {
|
|
if (event.key == "Enter" && event.ctrlKey) {
|
|
event.preventDefault();
|
|
switch (stage) {
|
|
case 1:
|
|
promptInputElem.value.focus();
|
|
break;
|
|
case 2:
|
|
sendPrompt();
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
// === Configuration === //
|
|
|
|
function updateIdentifier() {
|
|
const value = prompt(`Enter a new identifier for ${agent.value.name}`);
|
|
if (value) {
|
|
backend.sendAction("update-agent", {
|
|
agentId: agent.value.id,
|
|
agentname: value,
|
|
}).then(res => {
|
|
ui.alert(res.error ?
|
|
'Error updating agent identifier' :
|
|
'Agent identifier updated'
|
|
);
|
|
if (!res.error) {
|
|
agent.value.agentname = value;
|
|
backend.invalidateCache({agents: true});
|
|
}
|
|
});
|
|
} else {
|
|
ui.alert("Cancelled identifier update");
|
|
}
|
|
}
|
|
|
|
function updateName() {
|
|
const value = prompt(`Enter a new name for ${agent.value.name}`);
|
|
if (value) {
|
|
backend.sendAction("update-agent", {
|
|
agentId: agent.value.id,
|
|
agentname: value,
|
|
}).then(res => {
|
|
ui.alert(res.error ?
|
|
'Error updating agent name' :
|
|
'Agent name updated'
|
|
);
|
|
if (!res.error) {
|
|
agent.value.name = value;
|
|
backend.invalidateCache({agents: true});
|
|
}
|
|
});
|
|
} else {
|
|
ui.alert("Cancelled name update");
|
|
}
|
|
}
|
|
async function saveChanges() {
|
|
const dataObject = {};
|
|
for (let field of configFields.value) {
|
|
if (field.enabled) {
|
|
let value = field.value;
|
|
if (field.kind == 'number') {
|
|
try {
|
|
value = parseFloat(value);
|
|
} catch (e) {
|
|
ui.alert("bad number at field " + field.name);
|
|
return;
|
|
}
|
|
} else if (field.kind != 'string') {
|
|
try {
|
|
value = JSON.parse(value);
|
|
} catch (e) {
|
|
ui.alert("bad JSON value at field " + field.name);
|
|
return;
|
|
}
|
|
}
|
|
dataObject[field.name] = value;
|
|
}
|
|
}
|
|
|
|
let res = await backend.sendAction("update-agent", {
|
|
agentId: agent.value.id,
|
|
data: dataObject,
|
|
});
|
|
|
|
ui.alert(res.error ?
|
|
'Error updating agent' :
|
|
'Agent updated'
|
|
);
|
|
|
|
if (!res.error) {
|
|
backend.invalidateCache({agents: true});
|
|
}
|
|
}
|
|
|
|
// == Scripted Agent Actions == //
|
|
function createAction () {
|
|
const value = prompt(`Enter an identifier for the new action`);
|
|
if (value) {
|
|
const def = {
|
|
name: value,
|
|
argument: "{}",
|
|
body: "pass",
|
|
};
|
|
const actionsField = configFields.value.find(field => field.name == 'actions');
|
|
if (actionsField) {
|
|
actionsField.value.push(def.name);
|
|
} else {
|
|
configFields.value.push({
|
|
name: def.name,
|
|
value: [def.name],
|
|
enabled: true,
|
|
});
|
|
}
|
|
saveAction(def);
|
|
} else {
|
|
ui.alert('Action creation cancelled');
|
|
}
|
|
}
|
|
// Update the config fields relevant to the action and saves changes automatically. Doesn't update 'actions'.
|
|
function saveAction (actionDef) {
|
|
let argSchema;
|
|
try {
|
|
argSchema = JSON.parse(actionDef.argument);
|
|
} catch (e) {
|
|
ui.alert("Bad Argument JSON: " + e.message);
|
|
return;
|
|
}
|
|
|
|
const fieldName = 'action_' + actionDef.name;
|
|
const actionField = configFields.value.find(field => field.name == fieldName);
|
|
if (actionField) {
|
|
actionField.arguments = argSchema;
|
|
actionField.body = actionDef.body;
|
|
} else {
|
|
configFields.value.push({
|
|
name: fieldName,
|
|
value: {
|
|
argument: argSchema,
|
|
body: actionDef.body,
|
|
},
|
|
enabled: true,
|
|
});
|
|
}
|
|
|
|
saveChanges();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<main>
|
|
<TitleBar>
|
|
<h1>{{ agent.name || `Agent-${id}` }}</h1>
|
|
</TitleBar>
|
|
|
|
<section class="top-section">
|
|
<p style="white-space: pre-wrap; padding-bottom: 1em; border-bottom: 1px solid var(--color-border)">{{ kindInfo.description }}</p>
|
|
|
|
<div class="basic-config" style="padding-top: 1em;">
|
|
<div>
|
|
<span class="label">Agent ID</span>
|
|
<span class="value">{{id}}</span>
|
|
</div>
|
|
<div>
|
|
<span class="label">Identifier</span>
|
|
<span class="value">{{agent.agentname}}</span>
|
|
<button @click="updateIdentifier">Edit</button>
|
|
</div>
|
|
<div>
|
|
<button @click="updateName">Change Name</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<h3>Prompt</h3>
|
|
|
|
<div>
|
|
<span class="label">Enable Instruction/Input</span>
|
|
<input type="checkbox" v-model="promptInstructionEnabled" />
|
|
</div>
|
|
<textarea v-if="promptInstructionEnabled" v-model="promptInstruction" class="config-input" @keydown="promptKeyDown($event, 1)" />
|
|
<textarea v-model="promptInput" class="config-input" ref="promptInputElem" @keydown="promptKeyDown($event, 2)" />
|
|
<div>
|
|
<button @click="sendPrompt()">Send Prompt</button>
|
|
</div>
|
|
|
|
<div v-for="entry in promptHistory" class="prompt-history-entry">
|
|
<div v-if="entry.instruction">
|
|
<div class="label">Instruction</div>
|
|
<pre>{{entry.instruction}}</pre>
|
|
</div>
|
|
<div>
|
|
<div class="label" v-if="entry.instruction">Input</div>
|
|
<div class="label" v-else>Prompt</div>
|
|
<pre>{{entry.input}}</pre>
|
|
</div>
|
|
<div>
|
|
<div class="label">Output</div>
|
|
<div v-if="entry.loading">Loading...</div>
|
|
<pre v-if="entry.output">{{entry.output}}</pre>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
<template v-if="actionDefinitions && kindInfo.name == 'scripted'">
|
|
<section v-for="(actionDef, index) in actionDefinitions" :key="index">
|
|
<h3>Action {{actionDef.name}}</h3>
|
|
<span class="label">argument</span>
|
|
<br>
|
|
<textarea v-model="actionDef.argument" class="config-input"/>
|
|
<br>
|
|
<span class="label">body</span>
|
|
<br>
|
|
<textarea v-model="actionDef.body" class="config-input"/>
|
|
<button @click="saveAction(actionDef)">Save Action</button>
|
|
</section>
|
|
<section>
|
|
<button @click="createAction()">Create Action</button>
|
|
</section>
|
|
</template>
|
|
<section>
|
|
<div v-for="(configField, index) in configFields" :key="index">
|
|
<span class="label">{{ configField.name }}</span>
|
|
<input type="checkbox" v-model="configField.enabled" />
|
|
<br>
|
|
<select v-if="configField.kind == 'model_id'" v-model="configField.value" :disabled="!configField.enabled">
|
|
<option v-if="!modelList.length" disabled>empty</option>
|
|
<option :value="model.id" v-for="model in modelList">{{ model.name }}</option>
|
|
</select>
|
|
<input v-else-if="configField.kind=='number'" type="number" v-model="configField.value" class="config-input" :disabled="!configField.enabled"/>
|
|
<textarea v-else v-model="configField.value" class="config-input" :disabled="!configField.enabled"/>
|
|
</div>
|
|
|
|
<button type="submit" @click="saveChanges()">Save</button>
|
|
</section>
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped>
|
|
section {
|
|
margin: 1em;
|
|
padding: 1em;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.basic-config > div {
|
|
margin-right: 2em;
|
|
display: inline-block;
|
|
}
|
|
|
|
.prompt-history-entry {
|
|
border-top: 1px dashed var(--color-border);
|
|
padding: 1em 0;
|
|
}
|
|
|
|
.prompt-history-entry pre {
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--border-radius);
|
|
padding: 0.5em;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.label {
|
|
font-size: 80%;
|
|
font-weight: bold;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.value {
|
|
padding: 0 0.5em;
|
|
padding-top: 0.35em;
|
|
|
|
border: 1px solid var(--color-border);
|
|
font-family: monospace;
|
|
}
|
|
|
|
textarea.config-input {
|
|
width: 100%;
|
|
resize: vertical;
|
|
height: 5em;
|
|
}
|
|
</style> |