[BUILD-426] feat: Update chatbot element style (PR #2156)

Related issues

  • Closes #

Proposed changes

Describe the big picture of your changes here to communicate to the reviewers why we should accept this pull request. If it fixes a bug or resolves a feature request, be sure to link to that issue.

How to reproduce

Explain like if someone who doesn’t know this project is reviewing your changes and how they can replicate this.

Screenshots and videos

Paste here any screenshots or videos related to your changes, if applicable.

Further comments

If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc…


Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 97.81%. Comparing base (1e63861) to head (a7a5f3e).
Report is 6 commits behind head on dev.

Additional details and impacted files
@@            Coverage Diff             @@
##              dev    #2156      +/-   ##
- Coverage   97.82%   97.81%   -0.01%     
  Files         156      160       +4     
  Lines       21895    22258     +363     
+ Hits        21419    21772     +353     
- Misses        476      486      +10     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:bulb: Here you are using createQuestionElement and createAnswerElement to generate the HTML templates of the message balloons, right? I was thinking that if we used the HTML template Element (see here) we could create the AnswerElement and QuestionElement directly in the HTML as templates, which would make the HTML/CSS involved here easier to read and maintain.

Then, since templates are not visible in the DOM by default, at the event listener callback below we could do something like the example that could be found in the docs above:

  const chatWindow = document.querySelector("...");
  const answerTemplate = document.querySelector("#...");
  const questionTemplate = document.querySelector("#...");

  // Clone the templates and append them to the chat window
  const questionMessage = questionTemplate.content.cloneNode(true);
  const answerMessage = questionTemplate.content.cloneNode(true);

  chatWindow.appendChild(answerMessage); // here we append the answer message empty
  // Here I hope the answerMessage keeps the same reference after we appended
  // it to the chatWindow, if not, we can querySelect it again.
  // Now, we can add the three dots to indicate loading (this can also be a HTML template element instead of raw HTML directly in the javascript!)

  // Finally, we do the request to stream and all the other other stuff here,
  // while updating the answerMessage element in real time (appending the stream)

  // End: Add the footer text span (can also be a HTML template element)

What do you think? If you think this is going to be a huge refactor, I’m ok if we merge as it is. I tested and everything is working fine.

The title of this pull request changed from “Feat/update chatbot element style” to "[BUILD-426] feat: Update chatbot element style

I’ve added a commit with the required changes to use the HTML template tag :slight_smile: