<miso-threads>
The list of the reader's chat threads, newest first. When the reader selects a
thread, it opens in <miso-conversation>:
<miso-history class="miso-history">
<miso-new-thread></miso-new-thread>
<miso-threads></miso-threads>
</miso-history>
Containers
| Container | Layout |
|---|---|
<miso-history> | threads |
threads is the only layout for this element. The options below go to
useLayouts on client.ui.history, under the role threads.
Items
Each thread is a <miso-thread-item> with the title of the thread and a menu.
The menu opens from the three dots on the item, and holds Rename,
Subscribe or Unsubscribe, and Delete. A thread with no title shows
Untitled.
The SDK puts these attributes on each <miso-thread-item>, so you can style
the items from your CSS:
| Attribute | On a thread that |
|---|---|
data-selected | Is open in <miso-conversation>. |
data-unread | Is subscribed, and has an answer update. |
data-thread-id | Has a thread ID. The value is the ID. A thread that is still being created has no ID. |
miso-thread-item[data-unread] .miso-threads__title {
font-weight: 600;
}
The menu items are elements of the thread, so you change their labels on
client.ui.history by their own roles:
client.ui.history.useLayouts({
rename: { text: "Edit title" },
subscription: { text: "Follow", checkedText: "Unfollow" },
delete: { text: "Remove" },
});
Loading
The list loads 100 threads at a time. When the reader scrolls to the end of the list, it loads the next page. To change the page size, see Number of threads.
A reader with no threads sees an empty list. To show a line in its place, put
an element with visible-when="ready+empty" next to it. See
Chat History — UI Customization.
Errors
When the list cannot load, a notice takes its place:
| Cause | Text |
|---|---|
| The session has expired (status 401) | "Your session has expired. Please sign in again." |
| Any other failure | "Your conversations could not be loaded." |
The errorMessage template returns the text. It gets (layout, error), and
error.status is the HTTP status:
client.ui.history.useLayouts({
threads: {
templates: {
errorMessage: (layout, error) =>
error && error.status === 401
? "Sign in again to see your chats."
: "We could not load your chats.",
},
},
});
Next
- Chat History — Quick Start: build the thread list and the open thread.
<miso-messages>: the messages of the open thread.
