{{template "shellTop" "chat"}}
<h1>Chat</h1>
<section class=card>
{{if .Error}}<div class="msg msg-err">{{.Error}}</div>{{end}}
<div class="scroll chat-scroll" id=chatHistory>
{{range .Messages}}
  <div class="chat-msg {{.Role}}"><strong>{{if eq .Role "user"}}you{{else}}maven{{end}}:</strong> {{.Text}}{{if .Source}} <span class="badge badge-accent" title="the query source that claimed this turn">{{.Source}}</span>{{end}}</div>
{{else}}
  <div class=empty>
    <svg class=icon width="20" height="20"><use href="/ethos-icons.svg#i-message"/></svg>
    <div>start a conversation</div>
  </div>
{{end}}
</div>
<form method=post action=/api/chat class=chat-form>
  <input type=text name=text class=input-wide placeholder="type a message..." required autofocus>
  <button class=btn>send</button>
</form>
</section>
<script>
var ch = document.getElementById('chatHistory');
if(ch) ch.scrollTop = ch.scrollHeight;
</script>
{{template "shellBottom"}}