82 lines
2.0 KiB
Vue
82 lines
2.0 KiB
Vue
<script setup>
|
|
import {
|
|
ref, computed, reactive,
|
|
onMounted, onUnmounted,
|
|
} from "vue";
|
|
|
|
import TitleBar from '../components/TitleBar.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>
|
|
<TitleBar>
|
|
<h1>Create Chat</h1>
|
|
</TitleBar>
|
|
|
|
<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>
|