Agent creation and editing support via UI

frontend-vue/src/views/AgentCreate.vue

@@ -0,0 +1,88 @@
+<script setup>
+  import {
+    ref, computed, reactive,
+    onMounted, onUnmounted,
+  } from "vue";
+
+  import * as backend from '../backend';
+  import * as ui from '../ui';
+
+  // List of agent class names
+  const kinds = ref([]);
+  const agent = ref({
+    name: "",
+    identifier: "",
+    kind: "",
+  });
+
+  async function submitAgent () {
+    const payload = {
+      'name': agent.value.name,
+      'kind': agent.value.kind,
+    };
+
+    if (!payload.kind) {
+      ui.alert("You must select a kind");
+      return;
+    }
+
+    if (agent.value.identifier) {
+      payload.identifier = agent.value.identifier;
+    }
+
+    let response = await backend.sendAction("create-agent", payload);
+
+    if (response.error) {
+      ui.alert(`Could not create agent\n${response.error}`);
+    } else {
+      ui.alert(`Created Agent "${payload.name}"`);
+      backend.invalidateCache({agents: true});
+      ui.goto(`/agent/${response.agentId}`);
+    }
+  }
+
+  onMounted(async () => {
+    kinds.value = (await backend.sendAction("get-agent-kinds")).kinds;
+  });
+</script>
+
+<template>
+  <main>
+    <h1>Create New Chat</h1>
+
+    <div class="main-container">
+      <input v-model="agent.name" type="text" placeholder="name">
+      <input v-model="agent.identifier" type="text" placeholder="identifier">
+      <select v-model="agent.kind">
+        <option v-for="k in kinds" :value="k">{{k}}</option>
+      </select>
+
+      <button @click="submitAgent()">Create Agent</button>
+    </div>
+  </main>
+</template>
+
+<style scoped>
+  .main-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .multi-select-box {
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius);
+  }
+
+  .multi-select-box div {
+    border-bottom: 1px solid var(--color-border);
+  }
+  .multi-select-box div:last {
+    border-bottom: none;
+  }
+  .multi-select-box div:hover {
+    background-color: var(--color-background-mute);
+  }
+  .multi-select-box div.selected {
+    background-color: var(--color-background-soft);
+  }
+</style>