Temporary agents and chats

frontend/src/views/AgentCreate.vue

@@ -32,6 +32,10 @@
       payload.identifier = agent.value.identifier;
     }
 
+    if (agent.value.temporary) {
+      payload.temporary = true;
+    }
+
     let response = await backend.sendAction("create-agent", payload);
 
     if (response.error) {
@@ -54,39 +58,54 @@
       <h1>Create Agent</h1>
     </TitleBar>
 
-    <div class="main-container">
-      <input v-model="agent.name" type="text" placeholder="name">
-      <input v-model="agent.identifier" type="text" placeholder="identifier">
-      <select v-model="agent.kind">
-        <option v-for="k in kinds" :value="k">{{k}}</option>
+    <section class="container">
+      <input v-model="agent.name" placeholder="Name" />
+      <input v-model="agent.identifier" placeholder="Identifier (optional)" />
+      <select v-model="agent.kind" :class="{ placeholder: !agent.kind }">
+        <option value="" disabled>Select type</option>
+        <option v-for="k in kinds" :key="k" :value="k">{{ k }}</option>
       </select>
-
-      <button @click="submitAgent()">Create Agent</button>
-    </div>
+      <label class="checkbox">
+        <input type="checkbox" v-model="agent.temporary" />
+        Temporary
+      </label>
+      <button @click="submitAgent()">Create</button>
+    </section>
   </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);
-  }
+section {
+  margin: 1em;
+  padding: 1em;
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+}
+.container {
+  display: flex;
+  flex-direction: column;
+}
+input, select {
+  padding: 10px;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  font-size: 14px;
+  background: var(--color-background);
+}
+input::placeholder, select.placeholder {
+  color: var(--color-text-light);
+}
+input:focus, select:focus { outline: none; border-color: var(--color-primary); }
+.checkbox { display: flex; align-items: center; gap: 6px; cursor: pointer; }
+button {
+  margin-top: 4px;
+  padding: 10px;
+  background: var(--color-primary);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 500;
+  cursor: pointer;
+}
+button:hover { opacity: 0.9; }
 </style>

frontend/src/views/Chat.vue

@@ -59,11 +59,9 @@
   // === State Management === //
 
   async function loadChatState (newId) {
-    chatId = parseInt(newId);
-    if (chatId == null || isNaN(chatId)) {
-      console.error("Invalid chat id", chatId);
-      return;
-    }
+    // This line was converting newId into an integer.
+    // Some parts of the program may still rely on it.
+    chatId = newId;
 
     // Create an agent name dictionary
     const _agents = await backend.getAgents();
@@ -307,7 +305,7 @@
 
   async function startNewThread () {
     const res = await backend.sendAction("create-chat-thread", {chatId});
-    console.log("Starting a new thread", res);
+    console.log("Starting a nedeleteChatw thread", res);
     if (res.threadId != null) {
       currentThreadId.value = res.threadId;
       expandThread(res.threadId, true);
@@ -325,6 +323,16 @@
     }
   }
 
+  async function deleteChat (chat) {
+    if (!await ui.confirm(`Delete Chat ${chat.name} with id ${chat.id}`)) return;
+    const res = await backend.sendAction("delete-chat", {chatId: chat.id});
+    console.log("Chat Delete Output", res);
+  }
+
+  async function renameChat (chat) {
+    ui.alert("TODO: Rename Chats");
+  }
+
 
   // === Special Chat Functions === //
 
@@ -418,6 +426,10 @@
   <main>
     <TitleBar>
       <h1>{{ chat.name || 'Chat #' + chat.id }}</h1>
+      <div>
+        <button @click="renameChat(chat)">Rename</button>
+        <button @click="deleteChat(chat)">Delete</button>
+      </div>
     </TitleBar>
 
     <div class="messages-container" ref="chatContainerElem">

frontend/src/views/ChatCreate.vue

@@ -12,14 +12,20 @@
   // List of agents, with their id, name, and whether they're currently selected
   const agents = ref([]);
   const title = ref("");
+  const temporary = ref(false);
 
   async function submitChat () {
     const selectedAgents = agents.value.filter(agent => agent.selected).map(agent => agent.id);
 
-    let response = await backend.sendAction("create-chat", {
+    let payload = {
       'name': title.value,
       'members': selectedAgents,
-    });
+    };
+    if (temporary.value) {
+      payload.temporary = true;
+    }
+
+    let response = await backend.sendAction("create-chat", payload);
 
     if (response.error) {
       ui.alert(`Could not create chat\n${response.error}`);
@@ -50,6 +56,10 @@
       <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>
+      <label class="checkbox">
+        <input type="checkbox" v-model="temporary" />
+        Temporary
+      </label>
       <button @click="submitChat()">Create Chat</button>
     </div>
   </main>