Conversation

A conversation is one timeline of messages, event lines and dates, with the newest at the bottom. People and agents post the same kind of message, because in Raft they do the same work in the same place; an agent is told apart by its avatar, not by a different kind of message.

When it applies

Any place people and agents talk: a channel, a direct message, a thread, a task's thread. The message itself is in MessageItem. Which places a product has, and what their headers hold, is on the product's own page (Raft Chat — Channel).

Structure

跟随页面浅色深色并排

• The timeline: messages, event lines (SystemMessage) and date lines, newest at the bottom.
• Inside a message: mentions, reference chips, blue links, inline code, code blocks, quotes, attachments and action cards.
• Under a message: one row with the task marker, the Saved marker and the reactions, and under it the thread replies, with at most 3 shown as a preview (MessageReplies).
• At the bottom: the Composer, with the attach buttons on the left of its toolbar, and the As Task checkbox and the send button on the right.

Rules

Dates and grouping

• Put a date line before the first message of the timeline and before the first message of each new day: Today, Yesterday, or the weekday and date.
• Merge consecutive messages from the same sender on the same day, with no time limit: a run of messages from one sender reads as one turn.
• Don't merge a message that carries a task or a thread, and don't merge event lines into messages.
• Treat a message a person's assistant sent for them as a different sender: it doesn't merge into the person's own messages, and theirs don't merge into it. Only the first row of a group shows the avatar and the name line, so a message merged under the person's own header would look as if they wrote it. Consecutive messages the same assistant sent for the same person merge like any others, and each continuation ends with "(sent by Friday)" (Identity and presence).
• Put a message's time right after its sender, never across the row from it: who said it and when read as one (MessageItem).
• On hover, show the time of a merged message in the empty space on its left, without animation.
• On a touch screen, don't show the time of a merged message at rest: a time beside every message repeats the header and makes the list busy, and a tap on a message already does other things. The message menu carries it instead (see Actions).
• Fold 2 or more event lines in a row into one line with a disclosure ("There are 3 task updates"), so a busy agent doesn't push the messages out of view.

Mentions

• Set a mention of someone else in bold ink, underlined in ink only on hover, like all clickable text (Clickable text).
• Show a mention of the person reading as a small yellow sticker: yellow is "you" (Color).
• Group the @ suggestions by whether people and agents are in the place: those in it first, people and agents together, then those who aren't, dimmed. In a thread, rank the people who replied first.
• After a message mentions someone who isn't in the place, offer to add or notify them in a strip above the composer. Otherwise the mention reaches no one, and nothing says so.

Actions

• On desktop, show a small toolbar on the top edge of the hovered message: Reply in Thread, Add Reaction, Save Message. Inside a thread, leave out Reply in Thread.
• Put every other action in the message menu. Right-click on desktop and press and hold on a touch screen open the same menu, so an action is in one place on every device.
• Open that menu with the message's full date and time, as a label that can't be chosen: on a touch screen it is the only place a merged message's time shows, and the full date settles which day a long group spans. Arrow keys skip it.
• Make the quick reactions the first row under it, with a separator between them and the actions.
• Don't show the hover toolbar on a touch screen: there is no hover, and press and hold opens the menu instead.
• Let hover only add: the toolbar appears where nothing was, and the header gives it room, so it never covers the name or the time.
• To act on several messages (forward, copy), choose Select Message in the menu; the toolbar for selected messages appears at the bottom of the conversation (Built from existing parts).

跟随页面浅色深色并排

The composer

• Make the send button the conversation's one pink button: sending is what the screen exists for (Color).
• Name the place in the placeholder: "Message #launch-week", "Message @Martin".
• On a touch screen held upright, make Return insert a new line and send with the send button, because there is no Shift key to reach for. Elsewhere Return sends and Shift+Return inserts a new line.
• In a product with tasks, the As Task checkbox makes the message sent a task (Tasks).

Threads

跟随页面浅色深色并排

• Open a thread in the side panel (ThreadPanel), so the conversation it came from stays in view. It sits beside the conversation or covers it, depending on the width (Responsive layout); on a phone it always covers the conversation, with Back.
• Title it Thread, with the place and the number of replies as its subtitle: "#launch-week · 4 replies". Selecting the title scrolls to the top of the thread.
• Show the message the thread started from at the top, then the replies, then the composer. A thread has no tabs and no As Task.
• When the person isn't in the place the thread belongs to, replace the composer with a pink Join button ("Join channel to reply" in Raft Chat), so the reason they can't reply is also the way to fix it.
• Put the agents that follow the thread at the right of its header, as an avatar stack and a count.

Floating controls

Three kinds of control float over a conversation: the jump pills over the list (Back to Bottom, "3 New Messages", "Next Unread Thread (3)", MessageList), the hover toolbar on a message, and the toolbar over selected text (MessageItem). They are one family and share one set of metrics: a label in text-control at 700 (13/18 on a phone, 14/22 on a desktop), 16px icons, and 32px controls: a pill is 32px from edge to edge, the size of an ordinary button such as Save in a settings row (Button), and a toolbar's buttons are 28px inside a 36px toolbar.

• Make a single action a Button at outline and md: the jump pills. It stands alone, so its own ink edge marks it as a control, and it is built from the Button recipe, so it can't drift from the buttons around Raft.
• Make a group of actions on one message or one selection a toolbar: 28px buttons 4px inside the frame and 4px apart, so the toolbar is 36px tall, on layer-popover with a seam ring and the soft shadow. It is a popup over the content it acts on, appearing on hover or on selection (Elevation); the frame is the edge, so its buttons have none of their own, and at 28px three fit on the sender line without covering it.
• Don't give a pill the toolbar's frame or shadow, and don't make a toolbar's buttons Buttons: a pill is a control that stays in place while the list scrolls; a toolbar comes and goes with the content under it.

Search

• Group results by kind: places and people first, then messages. Group hits in one thread under that thread.
• Show matched words as small yellow stickers (Search).
• Highlight the message a result jumps to as in Navigation.

Related

• Hand-offs and approvals: event lines, status and action cards.
• Navigation: reference chips and links.
• Comments: comments on a document, beside the passage they are about; they are not messages.
• Built from existing parts: link cards, forwarded messages, translations and multi-select.