clean up frontend

app/components/chat/new-conversation.hbs

@@ -0,0 +1,9 @@
+<AuButton
+  @icon="add"
+  @size={{if @large "large"}}
+  @loading={{this.create.isRunning}}
+  ...attributes
+  {{on "click" (perform this.create)}}
+>
+  Nieuw gesprek
+</AuButton>

app/components/chat/new-conversation.js

@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+export default class ChatNewConversation extends Component {
+  @service store;
+  @service router;
+  @service currentSession;
+
+  create = task(async () => {
+    const now = new Date();
+    const conversation = this.store.createRecord('chat-conversation', {
+      created: now,
+      lastActivity: now,
+      creator: this.currentSession.user,
+    });
+    await conversation.save();
+    this.router.transitionTo('conversation', conversation.id);
+  });
+}

app/components/chat/sidebar.hbs

@@ -0,0 +1,29 @@
+<div class="au-c-sidebar">
+  <div class="au-c-sidebar__header">
+    <AuHeading @level="2" @skin="3">Gesprekken</AuHeading>
+  </div>
+  <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">
+          <AuNavigationLink
+            @route="conversation"
+            @model={{conversation.id}}
+            class="chat-sidebar__link"
+          >
+            <span class="chat-sidebar__title">
+              {{if conversation.title conversation.title "Nieuw gesprek"}}
+            </span>
+            <span class="chat-sidebar__meta">
+              {{format-datetime conversation.lastActivity}}
+            </span>
+          </AuNavigationLink>
+        </li>
+      {{else}}
+        <li class="au-c-list-navigation__item">
+          <p class="au-u-muted chat-sidebar__empty">Nog geen gesprekken.</p>
+        </li>
+      {{/each}}
+    </ul>
+  </div>
+</div>

app/components/chat/window.hbs

@@ -1,6 +1,9 @@
 {{! The list, the composer, the poll loop }}
 <div class="chat-window">
-  <div class="chat-window__messages">
+  <div
+    class="chat-window__messages"
+    {{chat-scroll-bottom this.conversation.id this.messages.length}}
+  >
     {{#unless this.messages.length}}
       <p class="au-u-muted">{{@assistant.description}}</p>
     {{/unless}}