diff --git a/app/components/chat/attachment.js b/app/components/chat/attachment.js index b5c860f..97ca03a 100644 --- a/app/components/chat/attachment.js +++ b/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//download. + // The file service serves every bijlage at /files//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() { diff --git a/app/components/chat/sidebar.hbs b/app/components/chat/sidebar.hbs index 64c0c55..868b14f 100644 --- a/app/components/chat/sidebar.hbs +++ b/app/components/chat/sidebar.hbs @@ -5,7 +5,7 @@
    {{#each @conversations as |conversation|}} -
  • +
  • +
  • {{else}}
  • diff --git a/app/components/chat/sidebar.js b/app/components/chat/sidebar.js new file mode 100644 index 0000000..af913cd --- /dev/null +++ b/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(); + } + } +} diff --git a/app/styles/app.scss b/app/styles/app.scss index 03821cd..1cfc703 100644 --- a/app/styles/app.scss +++ b/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%; diff --git a/app/templates/conversation.hbs b/app/templates/conversation.hbs index 13036ff..575fdab 100644 --- a/app/templates/conversation.hbs +++ b/app/templates/conversation.hbs @@ -1,5 +1,8 @@
    - +