rename frontend directory

2025-07-14 16:41:41 -05:00
1 parent f870869d47
commit c8b86927e2
@@ -0,0 +1,121 @@
+<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>