Catalog Chat

<.timeline>

ConnieUI.Chat

Sofie Lindqvist 09:12
Can we look at the fee clause again? Twelve shooting days feels short for this one.
Mikkel Sørensen 09:20
Agreed. The schedule we sent has fourteen, with two pickup days.
Maja Olsen 09:31
I'll update it to fourteen and add a day rate for pickups.
Sofie Lindqvist 09:46
Perfect. @Maja Olsen can you send it to legal after?
HEEx 
<div class="flex h-80 w-md flex-col rounded-xl bg-primary ring-1 ring-secondary ring-inset">
  <ConnieUI.Chat.timeline
    class="[&_[data-timeline-scroller]]:space-y-4 [&_[data-timeline-scroller]]:p-4"
    id="catalog-chat-timeline"
  >
    <ConnieUI.Chat.comment_message
      :for={message <- @thread.messages}
      id={"chat-message-#{message.id}"}
      data-timeline-message
      tabindex="-1"
      name={message.author}
    >
      <:avatar>
        <ConnieUI.Avatars.avatar image={message.image} size="size-6" />
      </:avatar>
      <:meta>{message.at}</:meta>
      {message.body}
    </ConnieUI.Chat.comment_message>
  </ConnieUI.Chat.timeline>
</div>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

:string

whether there is more thread above; drives loading as the reader nears the top

:string
:string

names the log for a screen reader landing in it

whether the timeline fills the height it is given. True for a panel with a height of its own, such as a sidebar. False where the surface is sized by what is in it, such as a comment popover: the timeline is then as tall as the conversation, and only starts scrolling once the surface's own `max-height` stops it growing

Set by the example

class target

Docs

The scrolling timeline. A message list is upside down relative to normal page flow: the newest messages sit at the bottom and are the ones you want to see first. Left to itself the browser opens it at the top, showing the oldest thing in the thread. This keeps the view pinned to the bottom, and keeps it there as messages arrive, but only while the reader is already at the bottom. Someone who has scrolled up to read something is not yanked away from it; a button appears instead, and the count on it is what they have not seen scroll past. The `column-reverse` trick gets the same result with no scripting, and was the first thing tried. It was dropped because it needs the DOM in reverse chronological order, and screen readers follow DOM order: the conversation would be announced newest-first.
Attribute Type Default Description
id * :string
class :any nil
target :any nil
has_older :boolean false
whether there is more thread above; drives loading as the reader nears the top
load_older_event :string "load_older"
label :string "Conversation"
names the log for a screen reader landing in it
grow :boolean true
whether the timeline fills the height it is given. True for a panel with a height of its own, such as a sidebar. False where the surface is sized by what is in it, such as a comment popover: the timeline is then as tall as the conversation, and only starts scrolling once the surface's own `max-height` stops it growing
Slot Slot attributes Description
inner_block *
:overlay pinned above the conversation, the way the jump button is pinned below it