{{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>
  {{if and (eq .Role "assistant") .TraceID}}
  {{if .Corrected}}
  <div class=chat-correct><span class="badge badge-ok" title="the label is kept; the transcript still expires in 14 days">corrected: {{.Corrected}}</span></div>
  {{else}}
  <form method=post action=/api/correct class=chat-correct>
    <input type=hidden name=trace_id value="{{.TraceID}}">
    <input type=hidden name=q value="{{$.UserText}}">
    <input type=hidden name=rep value="{{.Text}}">
    <input type=hidden name=s value="{{.Source}}">
    <button class="btn btn-sm" title="wrong, and I am not saying what it was">wrong</button>
    <span class=chat-correct-label>should have been:</span>
    {{range $.Targets}}<button class="btn btn-sm btn-muted" name=should_be value="{{.}}">{{.}}</button>{{end}}
  </form>
  {{end}}
  {{end}}
{{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"}}