Add PWA service worker (via vite plugin), use dynamic viewport units for interface size (improves mobile experience), replace default vue homepage with basic info

backend/src/chat.py

@@ -41,13 +41,16 @@ class Thread:
         self.memories = []
 
 class ChatView:
-    def __init__(self, app, chat_id):
+    def __init__(self, app, chat_id, participant_type=None, participant_id=None):
         self.app = app
         self.chat_id = chat_id
 
         self.name = None
         self.description = None
 
+        self.participant_type = participant_type
+        self.participant_id = participant_id
+
         # Thread holding messages without a set thread id
         self.default_thread = Thread(None, chat_id)
         # Most recent thread objects, earliest to latest

backend/src/database.py

@@ -62,6 +62,11 @@ class Chat(Base):
     last_message_preview: Mapped[Optional[str]]
     last_message_time: Mapped[Optional[int]]
 
+    # Chat Controller defines when to forward messages to agents and users, and what messages each can see
+    # Controllers are: default (all messages to all participants), mention (notify agents by specific mentions), active (llm agent selecting next agent to respond), arena
+    #controller_kind: Mapped[str]
+    #controller_data = mapped_column(JSON, default={})
+
 # Stores membership of agents in chats. If a record exists linking an agent and a chat,
 # it means the agent participates in that chat.
 class Membership(Base):

frontend/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "vite-plugin-pwa": "^1.0.2",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1"
   },

frontend/src/assets/base.css

@@ -82,7 +82,7 @@
 }
 
 body {
-  min-height: 100vh;
+  min-height: 100lvh;
   color: var(--color-text);
   background: var(--color-background);
   transition:

frontend/src/assets/main.css

@@ -2,6 +2,34 @@
 
 *[hidden] { display: none !important; }
 
+body {
+  display: flex;
+  direction: row;
+}
+
+main {
+  height: 100dvh;
+  flex-grow: 1;
+  overflow: auto;
+}
+
+.main-sidebar {
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: var(--z-index-sidebar);
+  background-color: var(--color-background);
+}
+
+.main-header {
+  height: 3em;
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 a {
   text-decoration: none;
   color: var(--color-blue);
@@ -20,17 +48,6 @@ button {
   border-color: var(--color-border-hover);
 }
 
-body {
-  display: flex;
-  direction: row;
-}
-
-main {
-  height: 100vh;
-  flex-grow: 1;
-  overflow: auto;
-}
-
 .with-sidebar-expanded .when-sidebar-collapsed {
   display: none;
 }

frontend/src/components/TitleBar.vue

@@ -7,7 +7,7 @@
 </script>
 
 <template>
-  <header>
+  <header class="main-header">
     <button class="when-sidebar-collapsed" @click="sidebarExpand()">
       >>
     </button>
@@ -20,14 +20,6 @@
 </template>
 
 <style scoped>
-  header {
-    height: 3em;
-    border-bottom: 1px solid var(--color-border);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-
   :slotted(h1) {
     font-size: 160%;
     font-weight: bold;

frontend/src/components/main/Sidebar.vue

@@ -80,7 +80,7 @@
 </script>
 
 <template>
-  <aside class="sidebar" :style="sidebarStyle()" v-if="sidebarExpanded">
+  <aside class="main-sidebar" :style="sidebarStyle()" v-if="sidebarExpanded">
     <div class="drag-bar" @mousedown="dragBarMouseDown($event)"></div>
     <div class="tab-bar">
       <div class="tab-group">
@@ -109,14 +109,6 @@
 </template>
 
 <style scoped>
-  .sidebar {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    z-index: var(--z-index-sidebar);
-    background-color: var(--color-background);
-  }
-
   .tab-bar, .tab-group {
     display: flex;
     flex-direction: row;

frontend/src/views/HomeView.vue

@@ -1,9 +1,29 @@
 <script setup>
-import TheWelcome from '../components/TheWelcome.vue'
+  //import TheWelcome from '../components/TheWelcome.vue'
+  import TitleBar from '../components/TitleBar.vue';
 </script>
 
 <template>
   <main>
-    <TheWelcome />
+    <TitleBar>
+      <h1>Horde Agent Hub</h1>
+    </TitleBar>
+
+    <div class="home-content">
+      <p>This is the Hub for Horde Agents. You can configure agents, interact and chat with them.</p>
+      <p>In the left panel, you can open chats from the <strong>Chats Tab</strong> and edit agents from the <strong>Agents Tab</strong>.</p>
+      <br>
+      <p>We accept contributions at our <a href="javascript:;">github repository</a></p>
+    </div>
+
+    <!--TheWelcome /-->
   </main>
 </template>
+
+<style scoped>
+  .home-content {
+    max-width: 900px;
+    margin: 2em auto auto;
+    padding: 0 5em 0 2em;
+  }
+</style>

frontend/vite.config.js

@@ -3,12 +3,17 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
+import { VitePWA } from 'vite-plugin-pwa'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     vueDevTools(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      devOptions: {enabled: true},
+    }),
   ],
   build: {
     sourcemap: true,