<miso-messages>
The questions and answers of the open thread, oldest at the top. A new answer types out at the bottom:
<miso-conversation class="miso-conversation">
<miso-messages></miso-messages>
<miso-query></miso-query>
</miso-conversation>
Containers
| Container | Layout |
|---|---|
<miso-conversation> | messages |
messages is the only layout for this element. The options below go to
useLayouts on client.ui.conversation, under the role messages.
Messages
Each message is a <miso-message-item>, a container of its own. It holds these
elements, in this order:
| Element | Shows |
|---|---|
<miso-question> | The question. A message that Miso wrote, such as an answer update, has a Written by Miso label. |
<miso-answer> | The answer. |
<miso-feedback> | The buttons that rate the answer. |
<miso-sources> | The articles that the answer cites, under a Sources heading. The heading hides when there are none. |
<miso-follow-up-questions> | Suggested questions, under Related questions you can explore, once the answer is done. Selecting one asks it in the same thread. |
The elements in a message take their options from client.ui.conversation.
To change the sources of every message, for example, use the role sources:
client.ui.conversation.useLayouts({
sources: "list",
});
<miso-message-item> has a data-live attribute on a message asked on this
page. A message from an earlier visit shows when all of it has loaded, so its
parts do not appear one at a time.
Loading and scrolling
The thread opens with its 30 newest messages. When the reader scrolls to the top, the older messages load above.
The list stays at the bottom as an answer types out. When the reader scrolls
up, it stays where the reader left it. While an answer is on its way,
<miso-query> in the same container is off, so the reader cannot ask the next
question too early.
Errors
When the thread cannot load, a notice takes the place of the list:
| Cause | Text |
|---|---|
| The session has expired (status 401) | "Your session has expired. Please sign in again." |
| Any other failure | "This conversation could not be loaded." |
When one message fails, a notice takes the place of that message only. It reads "Something went wrong with this message.", or the session text above.
Two templates return the text. Both get (layout, error), and error.status
is the HTTP status:
client.ui.conversation.useLayouts({
messages: {
templates: {
errorMessage: (layout, error) => "We could not open this chat.",
},
},
error: {
templates: {
message: (layout, error) => "This answer could not be loaded.",
},
},
});
messages.templates.errorMessage is the text for the thread, and
error.templates.message is the text for one message.
Next
- Chat History — Quick Start: build the thread list and the open thread.
- Chat History — Citation Links: the citations in the answers.
<miso-threads>: the list of threads.
