added delete

app/components/chat/attachment.js

@@ -2,9 +2,11 @@ import Component from '@glimmer/component';
 
 // One row of the bijlagen overview: what it is, and where to get it.
 export default class ChatAttachment extends Component {
-  // The file service serves every bijlage at /files/<uuid>/download.
+  // The file service serves every bijlage at /files/<uuid>/download. It
+  // names the download after the physical file unless ?name= says otherwise.
   get href() {
-    return `/files/${this.uuid}/download`;
+    const name = encodeURIComponent(this.args.document.filename || '');
+    return `/files/${this.uuid}/download?name=${name}`;
   }
 
   get uuid() {

app/components/chat/sidebar.hbs

@@ -5,7 +5,7 @@
   <div class="au-c-sidebar__content">
     <ul class="au-c-list-navigation chat-sidebar__list">
       {{#each @conversations as |conversation|}}
-        <li class="au-c-list-navigation__item">
+        <li class="au-c-list-navigation__item chat-sidebar__item">
           <AuNavigationLink
             @route="conversation"
             @model={{conversation.id}}
@@ -18,6 +18,15 @@
               {{format-datetime conversation.lastActivity}}
             </span>
           </AuNavigationLink>
+          <button
+            type="button"
+            class="chat-sidebar__delete"
+            title="Gesprek verwijderen"
+            aria-label="Gesprek verwijderen"
+            {{on "click" (fn this.delete conversation)}}
+          >
+            <AuIcon @icon="trash" @ariaHidden="true" />
+          </button>
         </li>
       {{else}}
         <li class="au-c-list-navigation__item">

app/components/chat/sidebar.js

@@ -0,0 +1,34 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+import ENV from 'frontend-lblod-chat/config/environment';
+import { setting } from 'frontend-lblod-chat/utils/setting';
+
+export default class ChatSidebar extends Component {
+  @service store;
+  @service router;
+  assistantPath = setting(ENV.assistantPath, '/assistant');
+
+  // The trash bin behind a conversation. The backend removes the messages,
+  // the bijlagen and the reports with it.
+  @action
+  async delete(conversation) {
+    if (!window.confirm('Dit gesprek verwijderen?')) return;
+    const res = await fetch(
+      `${this.assistantPath}/conversations/${conversation.id}`,
+      { method: 'DELETE' },
+    );
+    if (!res.ok) {
+      window.alert('Het gesprek kon niet verwijderd worden.');
+      return;
+    }
+    this.store.unloadRecord(conversation);
+    // The open conversation is gone; leave its route before it 404s. Any
+    // other route only needs its sidebar list refreshed.
+    if (this.args.currentConversation?.id === conversation.id) {
+      this.router.transitionTo('conversations');
+    } else {
+      this.router.refresh();
+    }
+  }
+}

app/styles/app.scss

@@ -45,10 +45,46 @@
 .chat-sidebar__list {
   display: block;
 }
+/* The trash bin of a conversation, on the right of its row. The link gets
+   extra room so a truncated title does not run under the button. */
+.chat-sidebar__item {
+  position: relative;
+}
 .chat-sidebar__link {
   flex-direction: column;
   align-items: flex-start;
   gap: 0.1rem;
+  padding-right: $au-unit;
+}
+.chat-sidebar__delete {
+  position: absolute;
+  top: 50%;
+  right: $au-unit-tiny;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: $au-unit * 1.2;
+  height: $au-unit * 1.2;
+  padding: 0;
+  border: none;
+  border-radius: 0.2rem;
+  background: none;
+  color: var(--au-gray-600);
+  cursor: pointer;
+  transition:
+    color var(--au-transition),
+    background-color var(--au-transition);
+
+  &:hover,
+  &:focus {
+    color: var(--au-red-600);
+    background-color: var(--au-gray-200);
+  }
+
+  &:focus {
+    outline: var(--au-outline);
+  }
 }
 .chat-sidebar__title {
   max-width: 100%;

app/templates/conversation.hbs

@@ -1,5 +1,8 @@
 <div class="au-c-main-container__sidebar chat-sidebar">
-  <Chat::Sidebar @conversations={{@model.conversations}} />
+  <Chat::Sidebar
+    @conversations={{@model.conversations}}
+    @currentConversation={{@model.conversation}}
+  />
 </div>
 
 <div