Chat History — UI Customization

Change the parts and the order of the two chat panels, and choose when each part shows.

The elements from the quick start are the whole chat UI, so you change it in the HTML. Below we move and remove parts of the panels, and then use visible-when to show a line when the reader has no chats yet.

You need a working chat page first. See Chat History — Quick Start.

Move, add and remove elements

<miso-history> and <miso-conversation> are the two containers. Each one connects the Miso elements inside it to its workflow, so keep each element in its own panel:

Inside a container, put the elements in any order, leave out the ones you do not want, and add your own HTML between them. This version puts the New chat button under the list, and removes the subscription toggle and the delete button from the header:

<miso-history class="miso-history">
  <miso-threads></miso-threads>
  <miso-new-thread></miso-new-thread>
</miso-history>

<miso-conversation class="miso-conversation">
  <div class="miso-conversation__header" visible-when="nonempty">
    <div class="miso-conversation__header-row">
      <miso-title></miso-title>
      <miso-rename></miso-rename>
    </div>
  </div>
  <div class="miso-conversation__intro" visible-when="ready+empty">
    What can I help with?
  </div>
  <miso-messages></miso-messages>
  <miso-query visible-when="ready"></miso-query>
</miso-conversation>

Each thread in the list keeps its own menu to rename, subscribe or delete. The SDK draws that menu as part of <miso-threads>, so these changes do not touch it.

Show a part at the right moment

The visible-when attribute shows an element only in the states it names. Put it on a <miso-history> or a <miso-conversation>, or on an element inside one.

• Separate values with spaces to show the element in any of them: visible-when="initial loading".
• Join a state to empty or nonempty with + to need both: visible-when="ready+empty".
• Only the Miso elements that show data count toward empty and nonempty. The query box and the buttons do not.
• The SDK shows the element with display: block !important. To lay it out as a flex row or a grid, put visible-when on a wrapper around it.

The quick start uses it three times in <miso-conversation>:

The header puts visible-when on miso-conversation__header, and lays out the row on miso-conversation__header-row inside it. visible-when sets display: block, so the flex row needs a wrapper of its own.

The thread list shows nothing when the reader has no chats. Add a line for that case:

<miso-history class="miso-history">
  <miso-new-thread></miso-new-thread>
  <p visible-when="ready+empty">Your chats show here.</p>
  <miso-threads></miso-threads>
</miso-history>

If it does not work

Next

• API Configuration — how many threads load at a time, and which articles the answers can cite.
• Citation Links — the class, the attributes and the tooltip of each citation.