Catalog Chat

<.composer_form>

ConnieUI.Chat

Mikkel is typing...

HEEx 
<div class="w-md">
  <ConnieUI.Chat.composer_form form={@form} mentionable={@mentionable} id="catalog-chat-form" submit="chat:send">
    <:status>Mikkel is typing...</:status>
  </ConnieUI.Chat.composer_form>
</div>

Variant matrix

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

Controls

:string
:string

the event the form submits

:string
:string
:atom

`:box` is the conversation's composer: a field two lines tall, the keymap and a status line under it, and Send. The two pills are a comment's, after the one in Figma's comments: a single line that grows as somebody writes, with a round send button inside it that stays grey until there is something to send. `:pill` starts a thread and is a floating surface of its own, white with a soft shadow; `:reply` answers one inside a panel, smaller and set back in the tertiary grey until it has the focus.

:string

the pill's send button's name, read out and shown on hover, for a host that translates

Set by the example

form target mentionable

Docs

The composer as a whole form: the editor, and under it the keymap, a status line and Send. Every place somebody writes into a conversation draws this one, so starting a thread and answering one cannot drift apart: the same mentions, the same help, the same button. `id` is the form's, and the editor's is derived from it. `status` is the line beside the help icon, which a conversation fills with who is typing and a new thread leaves empty.
Attribute Type Default Description
id * :string
form * {:struct, Phoenix.HTML.Form}
submit * :string
the event the form submits
target :any nil
the LiveComponent the form and its events go to
mentionable :list []
placeholder :string "Message"
typing_event :string nil
autofocus :boolean false
variant :atom :box
`:box` is the conversation's composer: a field two lines tall, the keymap and a status line under it, and Send. The two pills are a comment's, after the one in Figma's comments: a single line that grows as somebody writes, with a round send button inside it that stays grey until there is something to send. `:pill` starts a thread and is a floating surface of its own, white with a soft shadow; `:reply` answers one inside a panel, smaller and set back in the tertiary grey until it has the focus. :box | :pill | :reply
send_label :string "Send"
the pill's send button's name, read out and shown on hover, for a host that translates
rest :global
Slot Slot attributes Description
:status `:box` only
:avatar who is writing, beside the pill. A thread's reply row puts the reader's avatar here