.container-fluid data-controller="assistant"
  .row
    .col-md-3
      = render partial: "respondent_categories/sidebar"
    .col-md-9
      = render_breadcrumbs([                                                              \
          { name: 'Home', path: projects_path },                                          \
          { name: @project.title, path: project_path(@project) },                         \
          { name: @respondent_category.name, path: [@project, @respondent_category] },    \
          { name: "Assistant"  }                                                          \
        ])

      #questionAssistant.p-3.border.rounded.shadow-sm.bg-light v-cloak=""
        .d-flex.flex-column
          .chat-messages.flex-grow-1.border.rounded.p-3.mb-3 ref="chatContainer" style="height: calc(60vh - 5px); overflow-y: auto; background-color: #F9FAFB;"
            .message-container v-bind:data-index="index" v-for="(message, index) in messages" class="mb-4"
              .message.p-3.rounded v-if="message.role == 'assistant'" style="background-color: #E5F0FB;"
                .mb-2
                  strong.text-purple= t(:assistant)
                .markdown-content v-html="markdowned(message?.content[0].text?.value)"
                .typing-indicator.d-flex.align-items-center v-if="loading && index === messages.length - 1 && message.content[0].text.value === ''"
                  span.dot
                  span.dot
                  span.dot
              
              .message.p-3.rounded v-if="message.role == 'user'" style="background-color: #ffffff; border: 1px solid #E5F0FB;"
                .mb-2
                  strong.text-primary= t(:you)
                div v-html="message?.content[0].text?.value"
          
          .mt-2
            .d-flex.justify-content-between.align-items-center.mb-2
              strong.text-black Question
              small.text-muted.ms-2 Press Enter to submit, Shift+Enter for new line
            .form-group
              .input-group
                textarea.form-control v-model="question" v-bind:disabled="answering" rows="3" v-on:keyup.enter.exact="!answering && (question.length !== 0) && ask()" v-on:keydown.enter.exact.prevent="" style="border-radius: 0.375rem 0 0 0.375rem;"
                button.btn.btn-success.d-flex.align-items-center.justify-content-center v-on:click="ask()" v-bind:disabled="answering || (question.length === 0)" type="button" style="background-color: #8DD262; width: 100px; border-radius: 0 0.375rem 0.375rem 0;"
                  = t(:ask)
        
        #citation.modal.fade data-bs-backdrop="static" data-bs-keyboard="true" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"
          .modal-dialog
            .modal-content
              .modal-header.bg-secondary
                h5.modal-title Source
                button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
              .modal-body
                p