dsfr_typesense-2.1.x-dev/js/converse.js

((Drupal) => {
  Drupal.behaviors.converse = {
    attach(context, settings) {
      const [chatWrapper] = once('chat_wrapper', '#chat-wrapper', context);
      if (chatWrapper === undefined) {
        return;
      }

      async function search() {
        const results = document.getElementById('response-message');
        const hitsWrapper = document.getElementById('response-hits-wrapper');
        const hits = document.getElementById('response-hits');
        const sendButton = document.getElementById('chat-input-send');
        const sendButtonInitialText = sendButton.innerHTML;

        // Start loading state.
        sendButton.disabled = true;
        sendButton.innerHTML = 'Recherche...';
        results.innerHTML = '<p class="fr-callout__text">Recherche en cours...</p>';
        hits.innerHTML = '';
        hitsWrapper.style.display = 'none';

        const text = document.getElementById('chat-input-text').value;
        const model = document.getElementById('chat-select-model').value;

        const url = `${settings.search_api_typesense.url}/multi_search?conversation=true&conversation_model_id=${model}&q=${text}`;
        try {
          const response = await fetch(url, {
            method: 'POST',
            body: `{"searches":[{"collection":"${settings.search_api_typesense.index}","query_by":"embedding","exclude_fields":"embedding,rendered_item","prefix":false}]}`,
            headers: {
              'Content-Type': 'application/json',
              'X-TYPESENSE-API-KEY': settings.search_api_typesense.api_key,
            },
          });
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }

          const json = await response.json();

          // Display the answer.
          results.innerHTML = `<p class="fr-callout__text">${json.conversation.answer}</p>`;

          // Display the sources.
          const uniqueHits = [];
          const hitIds = new Set();

          json.results.forEach(result => {
            result.hits.forEach(hit => {
              if (!hitIds.has(hit.document.nid)) {
                hitIds.add(hit.document.nid);
                uniqueHits.push(hit);
              }
            });
          });

          if (uniqueHits.length > 0) {
            let list = '<ul class="fr-downloads-group__list">';
            uniqueHits.forEach(function (hit) {
              list += `
                <li class="fr-downloads-group__item fr-downloads-group__item--row">
                  <div class="fr-downloads-group__header">
                      <div class="fr-downloads-group__icon">
                          <span aria-hidden="true"></span>
                      </div>
                      <div class="fr-downloads-group__translation">
                          <p class="fr-downloads-group__title">
                            <a class="fr-link" href="/node/${hit.document.nid}" target="_blank">${hit.document.title}</a>
                          </p>
                      </div>
                  </div>
                </li>
              `;
            });
            list += '</ul>';

            hits.innerHTML = list;
            hitsWrapper.style.display = 'block';
          }

        } catch (error) {
          console.error(error.message);
          results.innerHTML = `<p class="fr-callout__text fr-callout--error">Une erreur est survenue lors de la recherche.</p>`;
        } finally {
          // End loading state.
          sendButton.disabled = false;
          sendButton.innerHTML = sendButtonInitialText;
        }
      }

      const send = document.getElementById('chat-input-send');
      send.addEventListener('click', search);

      const input = document.getElementById('chat-input-text');
      input.addEventListener('keypress', function(event) {
        if (event.key === "Enter") {
          event.preventDefault();
          search();
        }
      });
    },
  };
})(Drupal);