121 lines
2.8 KiB
Vue
121 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { RouterLink } from 'vue-router'
|
|
import {
|
|
ref, computed, reactive,
|
|
onMounted, onUnmounted,
|
|
} from "vue";
|
|
|
|
import * as backend from '../../backend';
|
|
import * as ui from '../../ui';
|
|
|
|
const collapsed = ref(false);
|
|
const mode = ref('chats');
|
|
const chats = ref([]);
|
|
const agents = ref([]);
|
|
|
|
onMounted(async () => {
|
|
chats.value = (await backend.getChats()).map(it => {
|
|
return {id: it.id, name: it.name};
|
|
});
|
|
agents.value = (await backend.getAgents()).map(it => {
|
|
return {id: it.id, name: it.name};
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<button class="nav-button expand-navbar" v-if="collapsed" @click="collapsed=false;">
|
|
</button>
|
|
|
|
<aside class="sidebar" style="min-width:8em" v-else>
|
|
<div class="drag-bar"></div>
|
|
<ul class="tab-bar">
|
|
<li @click="mode='chats'" :class="{active: mode=='chats'}">
|
|
<i class="fa-solid fa-message"></i>
|
|
</li>
|
|
<li @click="mode='agents'" :class="{active: mode=='agents'}">
|
|
<i class="fa-solid fa-user-group"></i>
|
|
</li>
|
|
<li><i class="fa-solid fa-angles-left"></i></li>
|
|
</ul>
|
|
<nav v-if="mode=='chats'">
|
|
<RouterLink v-for="it in chats" :to="'/chat/' + it.id" class="nav-item">{{it.name}}</RouterLink>
|
|
<RouterLink to="/chat/create" class="nav-item">Create Chat</RouterLink>
|
|
</nav>
|
|
<nav v-if="mode=='agents'">
|
|
<RouterLink v-for="it in agents" :to="'/agent/' + it.id" class="nav-item">{{it.name}}</RouterLink>
|
|
<RouterLink to="/agent/create" class="nav-item">Create Agent</RouterLink>
|
|
</nav>
|
|
</aside>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
.tab-bar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.tab-bar li {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
list-style-type: none;
|
|
border-radius: var(--border-radius);
|
|
width: 3em;
|
|
height: 3em;
|
|
transition: background-color 0.5s;
|
|
}
|
|
|
|
.tab-bar li:hover {
|
|
background-color: var(--color-background-mute);
|
|
}
|
|
|
|
.tab-bar li.active {
|
|
background-color: var(--color-background-soft);
|
|
}
|
|
|
|
.nav-item {
|
|
display: block;
|
|
|
|
color: inherit;
|
|
background-color: transparent;
|
|
border: none;
|
|
|
|
border-radius: 0;
|
|
padding: 0.2em 0.4em;
|
|
width: 100%;
|
|
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
|
|
font-size: inherit;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.nav-item i {
|
|
font-size: 80%;
|
|
padding-left: 0.5em;
|
|
padding-right: 0.5em;
|
|
}
|
|
|
|
.drag-bar {
|
|
height: 100%;
|
|
border-right: 1px solid var(--color-border);
|
|
width: 0.5em;
|
|
position: absolute;
|
|
right: 0;
|
|
cursor: ew-resize;
|
|
}
|
|
</style> |