From 6deccc8138d46f9aef2c0f551df8a3330f1a90a9 Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Mon, 9 Mar 2026 17:30:08 +0100 Subject: [PATCH 1/4] Minor adjustments to search --- src/experimental/Search/styling/Search.scss | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/experimental/Search/styling/Search.scss b/src/experimental/Search/styling/Search.scss index 295f4ae39..289cbe2d4 100644 --- a/src/experimental/Search/styling/Search.scss +++ b/src/experimental/Search/styling/Search.scss @@ -9,7 +9,7 @@ .str-chat__search-bar { padding-inline: var(--spacing-md); display: flex; - gap: var(--spacing-xs); + gap: var(--spacing-xxxs); .str-chat__search-bar__input-wrapper { display: flex; @@ -19,19 +19,14 @@ border-radius: var(--radius-max); border: 1px solid var(--input-border-default); color: var(--input-text-placeholder); - font-family: var(--typography-font-family-sans); - font-size: var(--typography-font-size-sm); + font: var(--str_chat__heading-xs-text); + // FIXME: there's no proper variation so we need to adjust font-weight separately font-weight: var(--typography-font-weight-regular); - line-height: var(--typography-line-height-normal); flex-shrink: 1; flex-grow: 1; - // &:focus-visible:focus-within { - // outline: 2px solid var(--border-utility-focus); - // outline-offset: 2px; - // } - .str-chat__search-bar__input { + min-height: 24px; border: none; background: none; width: 100%; @@ -43,6 +38,10 @@ } } + .str-chat__search-bar__clear-button { + flex-shrink: 0; + } + padding-block: var(--spacing-xs); padding-inline: var(--spacing-sm); From 626012f86c0286dd7db81ef7f0df9a9368bb487f Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Mon, 9 Mar 2026 17:30:20 +0100 Subject: [PATCH 2/4] Fix extended list scrolling --- src/components/Reactions/styling/ReactionSelector.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Reactions/styling/ReactionSelector.scss b/src/components/Reactions/styling/ReactionSelector.scss index 11522451f..81deeb879 100644 --- a/src/components/Reactions/styling/ReactionSelector.scss +++ b/src/components/Reactions/styling/ReactionSelector.scss @@ -12,7 +12,6 @@ border: 1px solid var(--border-core-surface-subtle, #e2e6ea); background: var(--background-elevation-elevation-2, #fff); - /* shadow/ios/light/elevation-3 */ box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16); &:has(.str-chat__reaction-selector-extended-list) { @@ -35,7 +34,6 @@ } .str-chat__reaction-selector-extended-list { - @include utils.scrollable-y; display: grid; grid-template-columns: repeat(7, 1fr); height: 100%; From f4599d77f084c5b03da4345d0ff94ea69f6d62c8 Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Tue, 10 Mar 2026 11:44:25 +0100 Subject: [PATCH 3/4] Add back user search --- src/components/Avatar/styling/Avatar.scss | 1 + src/components/Button/styling/Button.scss | 2 +- src/components/Chat/Chat.tsx | 2 +- .../Search/SearchResults/SearchResultItem.tsx | 41 +++++---- .../SearchResults/SearchResultsHeader.tsx | 9 +- src/experimental/Search/styling/Search.scss | 88 +++++++++++++++++++ 6 files changed, 124 insertions(+), 19 deletions(-) diff --git a/src/components/Avatar/styling/Avatar.scss b/src/components/Avatar/styling/Avatar.scss index 1dff595ed..ebf94a120 100644 --- a/src/components/Avatar/styling/Avatar.scss +++ b/src/components/Avatar/styling/Avatar.scss @@ -57,6 +57,7 @@ position: absolute; width: var(--avatar-status-badge-size); height: var(--avatar-status-badge-size); + z-index: 1; left: calc( var(--avatar-size) / 2 + var(--avatar-size) / 2 * diff --git a/src/components/Button/styling/Button.scss b/src/components/Button/styling/Button.scss index 35f03b9ff..b0f1299ba 100644 --- a/src/components/Button/styling/Button.scss +++ b/src/components/Button/styling/Button.scss @@ -93,7 +93,7 @@ &:not(:disabled)[aria-pressed='true'] { // toggled - @include utils.overlay-after(0.1); + @include utils.overlay-after(var(--background-core-selected)); } &:disabled { diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx index 3258835c8..a2faddbba 100644 --- a/src/components/Chat/Chat.tsx +++ b/src/components/Chat/Chat.tsx @@ -90,7 +90,7 @@ export const Chat = (props: PropsWithChildren) => { new SearchController({ sources: [ new ChannelSearchSource(client), - // new UserSearchSource(client), + new UserSearchSource(client), // new MessageSearchSource(client), ], }), diff --git a/src/experimental/Search/SearchResults/SearchResultItem.tsx b/src/experimental/Search/SearchResults/SearchResultItem.tsx index 86ff7dddb..b47fa832b 100644 --- a/src/experimental/Search/SearchResults/SearchResultItem.tsx +++ b/src/experimental/Search/SearchResults/SearchResultItem.tsx @@ -8,6 +8,7 @@ import { Avatar } from '../../../components/Avatar'; import { ChannelPreview } from '../../../components/ChannelPreview'; import { useChannelListContext, useChatContext } from '../../../context'; import { DEFAULT_JUMP_TO_PAGE_SIZE } from '../../../constants/limits'; +import { Timestamp } from '../../../components/Message/Timestamp'; export type ChannelSearchResultItemProps = { item: Channel; @@ -104,21 +105,31 @@ export const UserSearchResultItem = ({ item }: UserSearchResultItemProps) => { }, [client, item, setActiveChannel, setChannels, directMessagingChannelType]); return ( - +
+ +
); }; diff --git a/src/experimental/Search/SearchResults/SearchResultsHeader.tsx b/src/experimental/Search/SearchResults/SearchResultsHeader.tsx index 5e13d7195..8c23d0d95 100644 --- a/src/experimental/Search/SearchResults/SearchResultsHeader.tsx +++ b/src/experimental/Search/SearchResults/SearchResultsHeader.tsx @@ -5,6 +5,7 @@ import type { SearchSource, SearchSourceState } from 'stream-chat'; import { useSearchContext } from '../SearchContext'; import { useTranslationContext } from '../../../context'; import { useStateStore } from '../../../store'; +import { Button } from '../../../components'; const searchSourceStateSelector = (nextValue: SearchSourceState) => ({ isActive: nextValue.isActive, @@ -36,8 +37,10 @@ const SearchSourceFilterButton = ({ source }: SearchSourceFilterButtonProps) => ); return ( - + ); }; diff --git a/src/experimental/Search/styling/Search.scss b/src/experimental/Search/styling/Search.scss index 289cbe2d4..17c18c58c 100644 --- a/src/experimental/Search/styling/Search.scss +++ b/src/experimental/Search/styling/Search.scss @@ -56,6 +56,94 @@ } } +.str-chat__search-results { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + + .str-chat__search-results-header { + overflow-x: auto; + scrollbar-width: none; + + .str-chat__search-results-header__filter-source-buttons { + display: flex; + gap: var(--spacing-xxs); + padding-inline: var(--spacing-md); + + & > .str-chat__button { + flex-shrink: 0; + } + } + } +} + +.str-chat__search-source-result-list { + .str-chat__search-result-container { + padding: var(--spacing-xxs); + border-bottom: 1px solid var(--border-core-subtle); + + .str-chat__search-result { + &--user { + display: flex; + align-items: center; + gap: var(--spacing-md); + padding: var(--spacing-sm); + border-radius: var(--radius-lg); + width: 100%; + border: none; + background: none; + cursor: pointer; + + .str-chat__avatar { + flex-shrink: 0; + } + + .str-chat__search-result-data { + display: flex; + flex-direction: column; + gap: var(--spacing-xxs); + flex: 1 0 0; + min-width: 0; + text-align: start; + + .str-chat__search-result__display-name { + font: var(--str-chat__heading-xs-text); + color: var(--text-primary); + flex: 1; + min-width: 0; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + .str-chat__search-result__last-active-timestamp { + flex: 1; + min-width: 0; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + font-weight: var(--typography-font-weight-regular); + font-size: var(--typography-font-size-sm); + color: var(--text-tertiary); + line-height: var(--typography-line-height-normal); + } + } + + background: var(--background-elevation-elevation-1); + &:not(:disabled):hover { + background: var(--background-core-hover); + } + &:not(:disabled):active { + background: var(--background-core-pressed); + } + &:not(:disabled)[aria-pressed='true'] { + background: var(--background-core-selected); + } + } + } + } +} + .str-chat__search-source-result-list__footer, .str-chat__search-results-presearch, .str-chat__search-source-results-empty { From b2047e20a9f5b999c9e6f1b820bd33421d5645d5 Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Tue, 10 Mar 2026 16:17:26 +0100 Subject: [PATCH 4/4] Allow searching for public channels --- examples/vite/src/App.tsx | 31 ++++++++++++++++++++++++++++++- src/components/Chat/Chat.tsx | 2 +- 2 files changed, 31 insertions(+), 2 deletions(-) diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx index 6777b442f..cbb3cc526 100644 --- a/examples/vite/src/App.tsx +++ b/examples/vite/src/App.tsx @@ -9,6 +9,9 @@ import { createDraftCommandInjectionMiddleware, createActiveCommandGuardMiddleware, createCommandStringExtractionMiddleware, + SearchController, + ChannelSearchSource, + UserSearchSource, } from 'stream-chat'; import { AIStateIndicator, @@ -134,6 +137,28 @@ const App = () => { userData: { id: userId }, }); + const searchController = useMemo(() => { + if (!chatClient) return undefined; + + return new SearchController({ + sources: [ + new ChannelSearchSource(chatClient, undefined, { + initialFilterConfig: { + $or: { + enabled: true, + generate: () => ({ + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + $or: [{ members: { $in: [chatClient.userID!] } }, { type: 'public' }], + members: undefined, + }), + }, + }, + }), + new UserSearchSource(chatClient), + ], + }); + }, [chatClient]); + const filters: ChannelFilters = useMemo( () => ({ $or: [ @@ -198,7 +223,11 @@ const App = () => { reactionOptions: newReactionOptions, }} > - + ) => { sources: [ new ChannelSearchSource(client), new UserSearchSource(client), - // new MessageSearchSource(client), + new MessageSearchSource(client), ], }), [client, customChannelSearchController],