rename frontend directory

frontend/src/views/ChatCreate.vue

@@ -0,0 +1,77 @@
+<script setup>
+  import {
+    ref, computed, reactive,
+    onMounted, onUnmounted,
+  } from "vue";
+
+  import * as backend from '../backend';
+  import * as ui from '../ui';
+
+  // List of agents, with their id, name, and whether they're currently selected
+  const agents = ref([]);
+  const title = ref("");
+
+  async function submitChat () {
+    const selectedAgents = agents.value.filter(agent => agent.selected).map(agent => agent.id);
+
+    let response = await backend.sendAction("create-chat", {
+      'name': title.value,
+      'members': selectedAgents,
+    });
+
+    if (response.error) {
+      ui.alert(`Could not create chat\n${response.error}`);
+    } else {
+      ui.alert(`Created Chat "${title.value}"`);
+      backend.invalidateCache({chats: true});
+      ui.goto(`/chat/${response.chatId}`);
+    }
+  }
+
+  onMounted(async () => {
+    agents.value = (await backend.getAgents()).map(it => ({
+      id: it.id,
+      name: it.name,
+      selected: false,
+    }));
+  });
+</script>
+
+<template>
+  <main>
+    <h1>Create New Chat</h1>
+
+    <div class="main-container">
+      <input v-model="title" type="text" placeholder="title">
+      <div class="multi-select-box">
+        <div v-for="agent in agents" :class="{selected: Boolean(agent.selected)}" @click="agent.selected = !agent.selected">{{agent.name}}</div>
+      </div>
+      <button @click="submitChat()">Create Chat</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>