<miso-conversation>
The container of the Conversation workflow: the open thread of the chat history interface. Miso elements inside it show the messages of that thread and the box to ask the next question:
<miso-conversation>
<miso-title></miso-title>
<miso-messages></miso-messages>
<miso-query></miso-query>
</miso-conversation>
<miso-history> holds the list of threads beside it. To build both panels,
see Chat History — Quick Start.
Elements
| Element | Shows |
|---|---|
<miso-delete> | The button that deletes a thread. |
<miso-error> | The error message shown when the workflow fails. |
<miso-messages> | The questions and answers of the open thread. |
<miso-query> | The query box. |
<miso-rename> | The button that renames a thread. |
<miso-subscription> | The toggle that subscribes a thread to answer updates. |
<miso-title> | The title of a thread. |
<miso-messages> draws each message in a <miso-message-item> of its own,
which holds the question, the answer and the sources of that message.
Attributes
logo
Controls the Miso logo at the end of the container. The logo is off in the
chat panels, so it shows only with logo="true".
| Value | The logo shows |
|---|---|
| Attribute left out | Never. |
true | Once the thread has loaded. |
false | Never. |
Any other value is an error.
visible-when
Shows the container only in the states it names. It also works on an element inside the container.
| Value | Shows the element when |
|---|---|
initial | The workflow has not sent a request yet. |
loading | The request is out, and no data has arrived. |
ready | The data is arriving or has arrived. |
ongoing | The data is still arriving. |
done | All the data has arrived. |
erroneous | The request failed. |
empty | No Miso element in the container has data. |
nonempty | At least one Miso element in the container has data. |
- Separate values with spaces to show the element in any of them:
visible-when="initial loading". - Join a state to
emptyornonemptywith+to need both:visible-when="ready+empty". - Only the Miso elements that show data count toward
emptyandnonempty. 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, putvisible-whenon a wrapper around it.
Next
- Chat History — UI Customization — the parts and the order of the two panels.
<miso-history>— the thread list.
