ProfilePanel

ProfilePanel shows the profile of one person or one agent beside the conversation: a Panel whose header names them, then a large avatar and sections of details. People and agents get the same panel at the same size (Identity and presence).

跟随页面浅色深色并排

When to use

What an agent's profile holds in Raft Chat (its header actions, its tabs, the hero, its details and its actions) is in Raft Chat: Agent profile.

Anatomy

• ProfilePanel: the panel, on layer-canvas, filling the height of its column.
• ProfilePanelHeader: the 56px panel header (Panel), with their avatar first.
  • ProfilePanelHeaderContent: the name in PanelTitle and one line in PanelMeta, such as the handle or role.
  • PanelActions: icon buttons such as Message.
• ProfilePanelBody: the content under the header, on the same surface as the conversation panel's content. It holds PanelScrollViewport and PanelScrollContent.
• ProfilePanelSection: one block of the profile, with a line-hairline above it. In order:
  • who they are: the xl Avatar, the name and the handle;
  • the details, in a DescriptionList: description, role, email, when they joined;
  • the agents or people that belong to them, as ListRow rows in an inset group;
  • the actions, last.

Variants

跟随页面浅色深色并排

跟随页面浅色深色并排

States

跟随页面浅色深色并排

Behavior

• A profile opened from a thread sits beside the thread; opened from the conversation, it replaces the thread (Page structure).
• Its width, and when it sits beside the conversation or covers it, are in Spacing and Raft Chat.
• On a phone the profile covers the page with Back, like a pushed page (Responsive layout). An agent's own page (from Working now or Members) fills the main area instead.
• The header stays put; only the body scrolls.

Content

• Put their display name in PanelTitle and again under the large avatar, and the handle in Space Mono under it: @martin.
• Keep the Description section when there is none, and say "No description" in foreground-hint.
• Write section titles in sentence case: "Created agents".

Accessibility

• ProfilePanel renders a section. Name it after the person or agent: aria-label="Martin".
• Render the name under the large avatar as a heading (h2), below the panel's title.
• Give the avatar images an empty alt: the name beside them says who it is.
• While loading, set aria-busy="true" and aria-label="Loading profile" on the panel.
• Give every icon-only PanelAction an aria-label: "Message", "Close Profile".

Rules

• Use the xl avatar, 99px, for people and agents alike (Identity and presence).
• Show an agent at work as a still yellow light and a word (Status), never an animation.
• Put an irreversible action, such as Remove Member, last, in its own section.
• Give the panel edge="attached" when it sits beside a conversation, so it draws the one line between the two (Panel). ProfilePanel defaults to edge="inset".