stream-chat-react 14.4.1 → 14.6.0

package/dist/css/channel-detail.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/plugins/ChannelDetail/styling/AvatarWithChannelDetail.scss","../../src/plugins/ChannelDetail/styling/ChannelDetail.scss","../../src/plugins/ChannelDetail/styling/ChannelFilesView.scss","../../src/plugins/ChannelDetail/styling/ChannelMemberDetailView.scss","../../src/plugins/ChannelDetail/styling/ChannelManagementView.scss","../../src/plugins/ChannelDetail/styling/ChannelMediaView.scss","../../src/styling/_utils.scss","../../src/plugins/ChannelDetail/styling/ChannelMembersView.scss","../../src/plugins/ChannelDetail/styling/ChannelMembersViewListFooter.scss","../../src/plugins/ChannelDetail/styling/PinnedMessagesView.scss","../../src/plugins/ChannelDetail/SectionNavigator/styling/SectionNavigator.scss","../../src/plugins/ChannelDetail/VirtualizedList/styling/index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACRF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;AAEA;EACE;;;AAMR;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AC7EJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EAIE;;;AAGF;EACE;EACA;EACA;EACA;EAGA;;;AAGF;EACE;;;AAIA;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;ACjGA;EACE;EACA;;;AAKF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AClEF;EACE;EACA;EACA;EACA;;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAON;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EAGE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;ACjHF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;ECkFI;EAIF;EAGA;;AAGA;EACE;;AD7FJ;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAMA;EACE;;AAEA;EACE;;;AAMR;EACE;EACA;EACA;EAGA;EACA;EACA;;;AAIA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AElLF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAKA;EACE;EACA;;;AAMA;EACE;;;AAMJ;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;ACpFF;EACE;EACA;EACA;EACA;;;ACJF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAKA;EACE;EACA;;;AAMA;EACE;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;ACjFF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACE;;;AAIJ;EJyHI;EACA;EAMF;EAGA;;AAGA;EACE;;AIvIJ;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EAEA;EACA;EACA;EACA;EAMA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;AAAA;IAEE;;;AC1HJ;EACE;EACA;;AAEA;AAAA;ELoIE;EAIF;EAGA;;AAGA;AAAA;EACE;;AK/IF;AAAA;EAGE;EACA;;AAGF;EACE","file":"channel-detail.css"}

package/dist/css/index.css

@@ -1352,6 +1352,32 @@ to create clearer separation from the base surface.
   font: var(--str-chat__font-heading-xs);
   text-transform: capitalize;
 }
+.str-chat .str-chat__button.str-chat__theme-inverse {
+  --str-chat__button-primary-text: var(
+    --str-chat__button-primary-text-on-dark,
+    var(--str-chat__button-primary-text)
+  );
+  --str-chat__button-primary-border: var(
+    --str-chat__button-primary-border-on-dark,
+    var(--str-chat__button-primary-border)
+  );
+  --str-chat__button-secondary-text: var(
+    --str-chat__button-secondary-text-on-dark,
+    var(--str-chat__button-secondary-text)
+  );
+  --str-chat__button-secondary-border: var(
+    --str-chat__button-secondary-border-on-dark,
+    var(--str-chat__button-secondary-border)
+  );
+  --str-chat__button-destructive-text: var(
+    --str-chat__button-destructive-text-on-dark,
+    var(--str-chat__button-destructive-text)
+  );
+  --str-chat__button-destructive-border: var(
+    --str-chat__button-destructive-border-on-dark,
+    var(--str-chat__button-destructive-border)
+  );
+}
 .str-chat .str-chat__button.str-chat__button--solid.str-chat__button--primary {
   background-color: var(--str-chat__button-primary-bg);
   color: var(--str-chat__button-primary-text-on-accent);
@@ -1488,6 +1514,26 @@ to create clearer separation from the base surface.
   height: 20px;
 }
 
+.str-chat__checkbox,
+.str-chat__checkmark {
+  grid-column: 1;
+  grid-row: span 2;
+  height: var(--str-chat__size-24);
+  width: var(--str-chat__size-24);
+  border-radius: var(--str-chat__radius-max);
+  border: 1px solid var(--chat-border-on-chat, var(--str-chat__chat-border-on-chat-incoming));
+}
+
+.str-chat__checkbox--checked,
+.str-chat__checkmark--checked {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Im00IDkuNC00LTRMMS40IDQgNCA2LjYgMTAuNiAwIDEyIDEuNGwtOCA4WiIvPjwvc3ZnPg==");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 11px 10px;
+  background-color: var(--str-chat__control-radio-check-bg-selected);
+  border: none;
+}
+
 .str-chat__dropdown .str-chat__dropdown__open-button {
   background: none;
   border: none;
@@ -2197,53 +2243,121 @@ to create clearer separation from the base surface.
   position: absolute;
   height: var(--str-chat__dialog-overlay-height);
   width: 100%;
-  z-index: 2;
   pointer-events: none;
 }
 .str-chat__dialog-overlay .str-chat__dialog-contents {
   pointer-events: auto;
 }
 
+.str-chat__dialog-overlay--with-outside-click-capture {
+  pointer-events: auto;
+}
+
 .str-chat__prompt {
   border-radius: var(--str-chat__radius-xl);
   background: var(--str-chat__background-core-elevation-1);
   /* shadow/web/light/elevation-4 */
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 6px 12px 0 rgba(0, 0, 0, 0.16), 0 20px 32px 0 rgba(0, 0, 0, 0.12);
+  display: flex;
+  flex-direction: column;
   width: 100%;
+  min-height: 0;
 }
-.str-chat__prompt .str-chat__prompt__header {
+
+.str-chat__prompt__header {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
-  gap: var(--str-chat__spacing-xs) var(--str-chat__spacing-md);
+  gap: var(--str-chat__spacing-md);
   width: 100%;
   padding: var(--str-chat__spacing-xl);
+  /* Default (no description): a single flex row. `align-items: center`
+     vertically centers the leading slot, back button, title and trailing
+     controls against one another regardless of their individual heights — so
+     the first-row alignment never depends on the controls sharing a height. */
 }
-.str-chat__prompt .str-chat__prompt__header .str-chat__prompt__header__title-group {
+.str-chat__prompt__header .str-chat__prompt__header__title-group {
   display: flex;
-  flex-direction: column;
+  align-items: center;
   gap: var(--str-chat__spacing-xxs);
   flex: 1;
   min-width: 0;
 }
-.str-chat__prompt .str-chat__prompt__header .str-chat__prompt__header__title {
+.str-chat__prompt__header {
+  /* With a description the header becomes a grid. Every first-row item
+     (leading slot, back button, title, trailing controls) is placed on the
+     first grid row and centered via `align-items: center`, while the
+     description occupies a second row aligned under the title. Centering stays
+     robust because the row height is driven by the tallest control and all
+     items center within it — no pixel/padding matching required. The
+     title-group is flattened with `display: contents` so its children become
+     direct grid items. */
+}
+.str-chat__prompt__header.str-chat__prompt__header--withDescription {
+  display: grid;
+  align-items: center;
+  gap: 0;
+  grid-template-columns: auto auto minmax(0, 1fr) auto;
+  grid-template-areas: "leading goBack title       trailing" ".       .      description .";
+}
+.str-chat__prompt__header.str-chat__prompt__header--withDescription .str-chat__prompt__header__title-group {
+  display: contents;
+}
+.str-chat__prompt__header.str-chat__prompt__header--withDescription {
+  /* Inter-item spacing is applied as margins (rather than grid gaps) so that
+     absent leading/back-button columns collapse without leaving phantom
+     gaps before the title. */
+}
+.str-chat__prompt__header.str-chat__prompt__header--withDescription .str-chat__prompt__header__leading-content {
+  grid-area: leading;
+  margin-inline-end: var(--str-chat__spacing-md);
+}
+.str-chat__prompt__header.str-chat__prompt__header--withDescription .str-chat__prompt__header__go-back-button {
+  grid-area: goBack;
+  margin-inline-end: var(--str-chat__spacing-xxs);
+}
+.str-chat__prompt__header.str-chat__prompt__header--withDescription .str-chat__prompt__header__title {
+  grid-area: title;
+}
+.str-chat__prompt__header.str-chat__prompt__header--withDescription .str-chat__prompt__header__description {
+  grid-area: description;
+}
+.str-chat__prompt__header.str-chat__prompt__header--withDescription .str-chat__prompt__header__trailing-content {
+  grid-area: trailing;
+  margin-inline-start: var(--str-chat__spacing-md);
+}
+.str-chat__prompt__header .str-chat__prompt__header__title {
   margin: 0;
+  padding-block: var(--str-chat__spacing-xs);
   font: var(--str-chat__font-heading-sm);
   color: var(--str-chat__text-primary);
 }
-.str-chat__prompt .str-chat__prompt__header .str-chat__prompt__header__description {
+.str-chat__prompt__header .str-chat__prompt__header__description {
+  padding-block: var(--str-chat__spacing-xxxs);
   font: var(--str-chat__font-caption-default);
   color: var(--str-chat__text-secondary);
 }
-.str-chat__prompt .str-chat__prompt__header .str-chat__prompt__header__close-button {
-  align-self: flex-start;
+.str-chat__prompt__header .str-chat__prompt__header__leading-content,
+.str-chat__prompt__header .str-chat__prompt__header__trailing-content {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--str-chat__spacing-xs);
+  align-items: center;
+}
+.str-chat__prompt__header .str-chat__prompt__header__close-button {
   flex-shrink: 0;
   color: var(--str-chat__text-primary);
 }
-.str-chat__prompt .str-chat__prompt__header .str-chat__prompt__header__close-button .str-chat__icon {
-  width: var(--str-chat__icon-size-md);
-  height: var(--str-chat__icon-size-md);
+.str-chat__prompt__header .str-chat__prompt__header__close-button .str-chat__icon {
+  width: var(--str-chat__icon-size-sm);
+  height: var(--str-chat__icon-size-sm);
 }
-.str-chat__prompt .str-chat__prompt__body {
+
+.str-chat__prompt__body {
+  /* Expand into the space left by the header/footer, but never overflow the
+     prompt — content scrolls within instead of pushing the prompt taller. */
+  flex: 1 1 auto;
+  min-height: 0;
   /* Vertical padding so focus rings (e.g. TextInput wrapper box-shadow) are not clipped by scrollable-y */
   padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-xl);
   overflow-x: hidden;
@@ -2251,14 +2365,16 @@ to create clearer separation from the base surface.
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
 }
-.str-chat__prompt .str-chat__prompt__footer {
+
+.str-chat__prompt__footer {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: flex-end;
   width: 100%;
   padding: var(--str-chat__spacing-xl);
 }
-.str-chat__prompt .str-chat__prompt__footer .str-chat__prompt__footer__controls {
+.str-chat__prompt__footer .str-chat__prompt__footer__controls {
   display: flex;
   align-items: center;
   gap: var(--str-chat__spacing-xs);
@@ -2367,6 +2483,9 @@ to create clearer separation from the base surface.
   background-color: var(--str-chat__modal-overlay-color);
   backdrop-filter: var(--str-chat__modal-overlay-backdrop-filter);
 }
+.str-chat__modal--open .str-chat__modal__floating-dialog-overlay {
+  z-index: 1;
+}
 .str-chat__modal--open .str-chat__modal__overlay__close-button {
   position: absolute;
   inset-inline-end: 10px;
@@ -4575,6 +4694,115 @@ to create clearer separation from the base surface.
   overflow-x: hidden;
 }
 
+.str-chat__list-item-layout {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  min-width: 0;
+  padding-inline: var(--str-chat__spacing-xxs);
+}
+.str-chat__list-item-layout .str-chat__list-item-layout__container {
+  --list-item-padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm);
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: var(--str-chat__spacing-sm);
+  min-width: 0;
+  text-align: start;
+  padding: var(--list-item-padding);
+  border-radius: var(--str-chat__radius-md);
+}
+.str-chat__list-item-layout .str-chat__list-item-layout__container:where(button) {
+  background: none;
+  border: none;
+  padding: 0;
+  padding: var(--list-item-padding);
+  cursor: pointer;
+}
+.str-chat__list-item-layout .str-chat__list-item-layout__container:where(button):hover:not(:disabled) {
+  background: var(--str-chat__background-utility-hover);
+}
+.str-chat__list-item-layout .str-chat__list-item-layout__container:where(button):active:not(:disabled) {
+  background-color: var(--str-chat__background-utility-pressed);
+}
+.str-chat__list-item-layout .str-chat__list-item-layout__container:where(button):focus:not(:disabled) {
+  outline: 2px solid var(--str-chat__border-utility-focused);
+  outline-offset: 2px;
+}
+.str-chat__list-item-layout .str-chat__list-item-layout__container.str-chat__form__switch-field {
+  padding: var(--list-item-padding);
+}
+.str-chat__list-item-layout .str-chat__list-item-layout__container--selected {
+  background-color: var(--str-chat__background-utility-selected);
+}
+.str-chat__list-item-layout .str-chat__list-item-layout__container--destructive {
+  color: var(--str-chat__accent-error);
+}
+.str-chat__list-item-layout .str-chat__list-item-layout__container--destructive .str-chat__icon,
+.str-chat__list-item-layout .str-chat__list-item-layout__container--destructive .str-chat__list-item-layout__title,
+.str-chat__list-item-layout .str-chat__list-item-layout__container--destructive .str-chat__list-item-layout__subtitle,
+.str-chat__list-item-layout .str-chat__list-item-layout__container--destructive .str-chat__list-item-layout__description {
+  color: var(--str-chat__accent-error);
+}
+.str-chat__list-item-layout .str-chat__list-item-layout__container:disabled {
+  color: var(--str-chat__text-disabled);
+}
+.str-chat__list-item-layout .str-chat__list-item-layout__container:disabled .str-chat__list-item-layout__title,
+.str-chat__list-item-layout .str-chat__list-item-layout__container:disabled .str-chat__list-item-layout__subtitle,
+.str-chat__list-item-layout .str-chat__list-item-layout__container:disabled .str-chat__list-item-layout__description {
+  color: var(--str-chat__text-disabled);
+}
+.str-chat__list-item-layout .str-chat__list-item-layout__content {
+  flex: 1;
+  display: grid;
+  align-items: start;
+  grid-template-areas: "title" "description";
+  grid-template-columns: minmax(0, 1fr);
+  justify-items: start;
+  min-width: 0;
+}
+.str-chat__list-item-layout .str-chat__list-item-layout__content--withSubtitle {
+  grid-template-areas: "title description" "subtitle description";
+  grid-template-columns: minmax(0, 1fr) auto;
+  column-gap: var(--str-chat__spacing-sm);
+}
+.str-chat__list-item-layout .str-chat__list-item-layout__leading-icon,
+.str-chat__list-item-layout .str-chat__list-item-layout__trailing-icon {
+  display: flex;
+  flex-shrink: 0;
+}
+.str-chat__list-item-layout .str-chat__list-item-layout__description,
+.str-chat__list-item-layout .str-chat__list-item-layout__title {
+  font: var(--str-chat__font-caption-default);
+}
+.str-chat__list-item-layout .str-chat__list-item-layout__subtitle {
+  font: var(--str-chat__font-metadata-default);
+}
+.str-chat__list-item-layout .str-chat__list-item-layout__title {
+  color: var(--str-chat__text-primary);
+  grid-area: title;
+}
+.str-chat__list-item-layout .str-chat__list-item-layout__subtitle,
+.str-chat__list-item-layout .str-chat__list-item-layout__description {
+  color: var(--str-chat__text-tertiary);
+}
+.str-chat__list-item-layout .str-chat__list-item-layout__subtitle {
+  grid-area: subtitle;
+}
+.str-chat__list-item-layout .str-chat__list-item-layout__description {
+  grid-area: description;
+}
+.str-chat__list-item-layout .str-chat__list-item-layout__subtitle,
+.str-chat__list-item-layout .str-chat__list-item-layout__description,
+.str-chat__list-item-layout .str-chat__list-item-layout__title {
+  white-space: nowrap;
+  overflow-y: visible;
+  overflow-x: hidden;
+  overflow-x: clip;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
 .str-chat__loading-channels {
   display: flex;
   flex-direction: column;
@@ -6985,6 +7213,9 @@ to create clearer separation from the base surface.
   gap: var(--str-chat__spacing-sm);
   align-items: center;
 }
+.str-chat__poll-creation-dialog .str-chat__form__switch-field {
+  padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-md);
+}
 .str-chat__poll-creation-dialog .str-chat__form__input-field__value input,
 .str-chat__poll-creation-dialog .str-chat__form__input-field__value.str-chat__form-text-input .str-chat__form-text-input__wrapper {
   width: 100%;
@@ -7055,22 +7286,6 @@ to create clearer separation from the base surface.
 .str-chat__poll-option-list .str-chat__poll-option.str-chat__poll-option--votable:hover {
   cursor: pointer;
 }
-.str-chat__poll-option-list .str-chat__poll-option .str-chat__checkmark {
-  grid-column: 1;
-  grid-row: span 2;
-  height: var(--str-chat__size-24);
-  width: var(--str-chat__size-24);
-  border-radius: var(--str-chat__radius-max);
-  border: 1px solid var(--chat-border-on-chat, var(--str-chat__chat-border-on-chat-incoming));
-}
-.str-chat__poll-option-list .str-chat__poll-option .str-chat__checkmark--checked {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Im00IDkuNC00LTRMMS40IDQgNCA2LjYgMTAuNiAwIDEyIDEuNGwtOCA4WiIvPjwvc3ZnPg==");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 11px 10px;
-  background-color: var(--str-chat__control-radio-check-bg-selected);
-  border: none;
-}
 .str-chat__poll-option-list .str-chat__poll-option .str-chat__poll-option-data {
   flex: 1;
   display: flex;
@@ -7955,9 +8170,60 @@ to create clearer separation from the base surface.
   overflow-y: auto;
   scrollbar-width: none;
 }
+.str-chat .str-chat__suggestion-list.str-chat__context-menu .str-chat__list-item-layout:has(.str-chat__suggestion-list__mention) {
+  padding: var(--str-chat__spacing-none);
+}
 .str-chat .str-chat__suggestion-list .str-chat__suggestion-list-item--selected {
   background-color: var(--str-chat__dialog-menu-button-hover-background-color);
 }
+.str-chat .str-chat__suggestion-list__mention {
+  align-items: center;
+  gap: var(--str-chat__spacing-sm);
+}
+.str-chat .str-chat__suggestion-list__mention .str-chat__list-item-layout__leading-icon {
+  align-items: center;
+  background: var(--str-chat__background-core-surface-subtle);
+  border: 1px solid var(--str-chat__border-core-subtle);
+  border-radius: var(--str-chat__radius-max);
+  color: var(--str-chat__text-secondary);
+  justify-content: center;
+  padding: var(--str-chat__spacing-xs);
+}
+.str-chat .str-chat__suggestion-list__mention .str-chat__list-item-layout__leading-icon .str-chat__icon {
+  stroke-width: 1.2px;
+}
+.str-chat .str-chat__suggestion-list__item-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+.str-chat .str-chat__suggestion-list__item-title {
+  font: var(--str-chat__font-caption-default);
+  color: var(--str-chat__text-primary);
+  white-space: nowrap;
+  overflow-y: visible;
+  overflow-x: hidden;
+  overflow-x: clip;
+  text-overflow: ellipsis;
+  text-align: start;
+  min-width: 0;
+}
+.str-chat .str-chat__list-item-layout__title.str-chat__suggestion-list__mention-item-title {
+  font: var(--str-chat__font-body-default);
+}
+.str-chat .str-chat__suggestion-list__item-details {
+  font: var(--str-chat__font-metadata-default);
+  color: var(--str-chat__text-primary);
+  white-space: nowrap;
+  overflow-y: visible;
+  overflow-x: hidden;
+  overflow-x: clip;
+  text-overflow: ellipsis;
+  color: var(--str-chat__text-tertiary);
+  text-align: start;
+  min-width: 0;
+}
 
 .str-chat__thread-container {
   color: var(--str-chat__text-primary);