dsfr_typesense-2.1.x-dev/templates/search-api-typesense-converse.html.twig

{# {{ attach_library('search_api_typesense/converse') }} #}
{{ attach_library('dsfr_typesense/converse') }}

<div class="fr-container fr-mt-3w">
  <div id="chat-wrapper" class="fr-grid-row fr-grid-row--gutters fr-mt-2w">
    <div id="chat" class="fr-col-12 fr-col-lg-4">
      <div id="chat-models" class="fr-hidden">
        <label for="chat-select-model">Select a conversation model</label>
        <select id="chat-select-model" class="fr-select">
          {% for model in models %}
            <option value="{{ model.id }}">{{ model.id }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="fr-search-bar" id="chat-input" role="search">
        <label class="fr-label" for="chat-input-text">
            Rechercher
        </label>
        <input class="fr-input" placeholder="Poser ici votre question" type="search" id="chat-input-text" name="chat-input-text">
        <button class="fr-btn" title="Envoyer votre question" id="chat-input-send">
          Envoyer
        </button>
      </div>
    </div>
    <div id="response" class="fr-col-12 fr-col-lg-8">
      <div id="response-message" class="fr-callout">
          <p class="fr-callout__text">Posez une question pour obtenir une réponse.</p>
      </div>

      <div id="response-hits-wrapper" class="fr-downloads-group fr-downloads-group--bordered" style="display: none;">
          <h3 class="fr-downloads-group__title">Sources</h3>
          <div id="response-hits"></div>
      </div>
    </div>
  </div>
</div>