@planningcenter/chat-react-native 4.3.0-rc.8 → 4.3.0

package/src/screens/conversation_select_recipients/conversation_select_direct_message_recipients_screen.tsx

@@ -1,6 +1,6 @@
 import { PlatformPressable } from '@react-navigation/elements'
 import { StackActions, useNavigation } from '@react-navigation/native'
-import { RefObject, useEffect, useRef, useState } from 'react'
+import { RefObject, useRef, useState } from 'react'
 import { FlatList, Pressable, StyleSheet, TextInput, View } from 'react-native'
 import { Avatar, Badge, Banner, Icon, KeyboardView, Spinner, Text } from '../../components'
 import { ActionButton } from '../../components/display/action_button'
@@ -11,6 +11,7 @@ import { useDirectMessageAffiliations } from '../../hooks/direct_messages/use_di
 import { useDirectMessageCandidates } from '../../hooks/direct_messages/use_direct_message_candidates'
 import { useDirectMessageConversationValidate } from '../../hooks/direct_messages/use_direct_message_conversation_validate'
 import { useFindOrCreateDirectMessageConversation } from '../../hooks/direct_messages/use_find_or_create_direct_message_conversation'
+import { useDebouncedSearchTerm } from '../../hooks/use_debounced_search_term'
 import { availableFeatures, useFeatures } from '../../hooks/use_features'
 import { DirectMessageCandidateResource } from '../../types/resources/direct_message_candidate'
 import { ResultsHeading } from './components/results_heading'
@@ -26,7 +27,7 @@ export function ConversationSelectDirectMessageRecipientsScreen({
   const navigation = useNavigation()
   const { featureEnabled } = useFeatures()
   const [searchTerm, setSearchTerm] = useState('')
-  const [debouncedTerm, setDebouncedTerm] = useState('')
+  const debouncedTerm = useDebouncedSearchTerm(searchTerm)
   const [selectedPeople, setSelectedPeople] = useState<Map<string, DirectMessageCandidateResource>>(
     () =>
       new Map(
@@ -45,16 +46,10 @@ export function ConversationSelectDirectMessageRecipientsScreen({
   )
   const searchInputRef = useRef<TextInput>(null)
 
-  useEffect(() => {
-    const timer = setTimeout(() => setDebouncedTerm(searchTerm), 200)
-    return () => clearTimeout(timer)
-  }, [searchTerm])
-
   const selectPerson = (person: DirectMessageCandidateResource) => {
     if (selectedPeople.size >= MAX_RECIPIENTS) return
     setSelectedPeople(prev => new Map(prev).set(person.id, person))
     setSearchTerm('')
-    setDebouncedTerm('')
     // Controlled TextInput can retain stale native text on iOS when the value
     // is cleared while it stays focused (keyboardShouldPersistTaps keeps it
     // focused through the tap) — clear() forces the native view to sync. Gated

package/src/screens/search/__tests__/search_screen.test.tsx

@@ -0,0 +1,64 @@
+import { act, fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import type { useSearchResults } from '../../../hooks/use_search_results'
+import { SearchScreen } from '../search_screen'
+
+const mockUseSearchResults = jest.fn<ReturnType<typeof useSearchResults>, [string]>()
+jest.mock('../../../hooks/use_search_results', () => ({
+  useSearchResults: (term: string) => mockUseSearchResults(term),
+}))
+jest.mock('../../../components/display/keyboard_view', () => ({
+  ...jest.requireActual('../../../components/display/keyboard_view'),
+  KeyboardView: ({ children }: { children: React.ReactNode }) => children,
+}))
+
+const inputLabel = 'Search titles and messages'
+
+beforeEach(() => {
+  jest.useFakeTimers()
+  mockUseSearchResults.mockReset().mockReturnValue({
+    results: [],
+    failedTypes: [],
+    isPending: true,
+    isError: false,
+    isFetchNextPageError: false,
+    loadMore: jest.fn(),
+    hasNextPage: false,
+    isFetchingNextPage: false,
+  })
+})
+
+afterEach(() => jest.useRealTimers())
+
+describe('SearchScreen', () => {
+  it('searches once with the trimmed term after typing settles', () => {
+    const view = render(<SearchScreen />)
+    const input = view.getByLabelText(inputLabel)
+
+    fireEvent.changeText(input, 'bud')
+    fireEvent.changeText(input, ' budget ')
+
+    expect(view.getByText('Search chat')).toBeTruthy()
+    expect(mockUseSearchResults).not.toHaveBeenCalled()
+
+    act(() => jest.advanceTimersByTime(200))
+
+    const searchedTerms = new Set(mockUseSearchResults.mock.calls.map(([term]) => term))
+    expect([...searchedTerms]).toEqual(['budget'])
+    expect(view.queryByText('Search chat')).toBeNull()
+    expect(view.getByLabelText('Loading results')).toBeTruthy()
+  })
+
+  it('returns to the prompt as soon as the term is cleared', () => {
+    const view = render(<SearchScreen />)
+    const input = view.getByLabelText(inputLabel)
+
+    fireEvent.changeText(input, 'budget')
+    act(() => jest.advanceTimersByTime(200))
+    expect(view.queryByText('Search chat')).toBeNull()
+
+    fireEvent.changeText(input, '   ')
+
+    expect(view.getByText('Search chat')).toBeTruthy()
+  })
+})

package/src/screens/search/components/__tests__/conversation_results.test.tsx

@@ -0,0 +1,55 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import type { ConversationSearchResultResource } from '../../../../types'
+import { ConversationResults } from '../conversation_results'
+
+const buildResults = (count: number, prefix = 'Conversation') =>
+  Array.from({ length: count }, (_, index) => ({
+    type: 'conversation' as const,
+    id: `${prefix}-${index + 1}`,
+    title: `${prefix} ${index + 1}`,
+    url: `/conversations/${index + 1}`,
+    extra: { avatar: { previewAvatarUrls: [] } },
+  })) satisfies ConversationSearchResultResource[]
+
+describe('ConversationResults', () => {
+  it('caps at five rows until View more is pressed, then offers View less', () => {
+    const view = render(<ConversationResults results={buildResults(6)} onSelect={jest.fn()} />)
+
+    expect(view.getByText('Conversation 5')).toBeTruthy()
+    expect(view.queryByText('Conversation 6')).toBeNull()
+
+    fireEvent.press(view.getByText('View more'))
+
+    expect(view.getByText('Conversation 6')).toBeTruthy()
+    expect(view.getByText('View less')).toBeTruthy()
+    expect(view.queryByText('View more')).toBeNull()
+  })
+
+  it('renders no footer for five or fewer results', () => {
+    const view = render(<ConversationResults results={buildResults(4)} onSelect={jest.fn()} />)
+
+    expect(view.getByText('Conversation 4')).toBeTruthy()
+    expect(view.queryByText('View more')).toBeNull()
+  })
+
+  it('stays expanded when the parent re-renders with a new results array', () => {
+    const view = render(<ConversationResults results={buildResults(6)} onSelect={jest.fn()} />)
+    fireEvent.press(view.getByText('View more'))
+
+    view.rerender(<ConversationResults results={buildResults(6)} onSelect={jest.fn()} />)
+
+    expect(view.getByText('Conversation 6')).toBeTruthy()
+    expect(view.getByText('View less')).toBeTruthy()
+  })
+
+  it('passes the pressed result to onSelect', () => {
+    const onSelect = jest.fn()
+    const results = buildResults(2)
+    const view = render(<ConversationResults results={results} onSelect={onSelect} />)
+
+    fireEvent.press(view.getByText('Conversation 2'))
+
+    expect(onSelect).toHaveBeenCalledWith(results[1])
+  })
+})

package/src/screens/search/components/__tests__/message_result_row.test.tsx

@@ -0,0 +1,65 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import type { MessageSearchResultResource } from '../../../../types/resources/search_result'
+import { formatDatePreview } from '../../../../utils/date'
+import { defaultTheme } from '../../../../utils/theme'
+import { MessageResultRow } from '../message_result_row'
+
+const result: MessageSearchResultResource = {
+  id: '42',
+  type: 'message',
+  title: 'Worship Team',
+  url: '/conversations/7?message_id=42',
+  extra: {
+    conversationId: 7,
+    authorName: 'Ada Lovelace',
+    snippet: [
+      { text: '…planning the ', match: false },
+      { text: 'budget', match: true },
+      { text: ' meeting for next week', match: false },
+    ],
+    createdAt: '2026-03-04T15:30:00Z',
+    avatar: {
+      customAvatarType: null,
+      customAvatarKey: null,
+      customAvatarColor: null,
+      customAvatarImageUrl: null,
+      previewAvatarUrls: [],
+    },
+  },
+}
+
+const interactionColor = defaultTheme('light').colors.interaction
+
+describe('MessageResultRow', () => {
+  it('renders the title, author, snippet, and date', () => {
+    const view = render(<MessageResultRow result={result} onPress={jest.fn()} />)
+
+    expect(view.getByText('Worship Team')).toBeTruthy()
+    expect(view.getByText('Ada Lovelace:', { exact: false })).toBeTruthy()
+    expect(view.getByText('…planning the ')).toBeTruthy()
+    expect(view.getByText('budget')).toBeTruthy()
+    expect(view.getByText(' meeting for next week')).toBeTruthy()
+    expect(view.getByText(formatDatePreview(result.extra.createdAt))).toBeTruthy()
+  })
+
+  it('colors matched segments with the interaction color', () => {
+    const view = render(<MessageResultRow result={result} onPress={jest.fn()} />)
+
+    expect(view.getByText('budget')).toHaveStyle({ color: interactionColor })
+    expect(view.getByText('…planning the ')).not.toHaveStyle({ color: interactionColor })
+  })
+
+  it('exposes the row as a button with a composed label and reports presses', () => {
+    const onPress = jest.fn()
+    const date = formatDatePreview(result.extra.createdAt)
+    const view = render(<MessageResultRow result={result} onPress={onPress} />)
+
+    const row = view.getByRole('button', {
+      name: `Worship Team, Ada Lovelace: …planning the budget meeting for next week, ${date}`,
+    })
+    fireEvent.press(row)
+
+    expect(onPress).toHaveBeenCalledWith(result)
+  })
+})

package/src/screens/search/components/__tests__/result_row.test.tsx

@@ -0,0 +1,33 @@
+import { render } from '@testing-library/react-native'
+import React from 'react'
+import { Text } from 'react-native'
+import { useAtFontScaleBreakpoint } from '../../../../hooks/use_at_font_scale_breakpoint'
+import { ResultRow } from '../result_row'
+
+jest.mock('../../../../hooks/use_at_font_scale_breakpoint')
+
+const mockUseAtFontScaleBreakpoint = jest.mocked(useAtFontScaleBreakpoint)
+
+describe('ResultRow', () => {
+  it('lays children out in a row below the font scale breakpoint', () => {
+    mockUseAtFontScaleBreakpoint.mockReturnValue(false)
+    const view = render(
+      <ResultRow accessibilityLabel="Row" onPress={jest.fn()} alignItems="center">
+        <Text>child</Text>
+      </ResultRow>
+    )
+
+    expect(view.getByRole('button')).toHaveStyle({ flexDirection: 'row', alignItems: 'center' })
+  })
+
+  it('stacks children at the font scale breakpoint', () => {
+    mockUseAtFontScaleBreakpoint.mockReturnValue(true)
+    const view = render(
+      <ResultRow accessibilityLabel="Row" onPress={jest.fn()} alignItems="center">
+        <Text>child</Text>
+      </ResultRow>
+    )
+
+    expect(view.getByRole('button')).toHaveStyle({ flexDirection: 'column', alignItems: 'stretch' })
+  })
+})

package/src/screens/search/components/__tests__/search_blank_states.test.tsx

@@ -0,0 +1,20 @@
+import { render } from '@testing-library/react-native'
+import React from 'react'
+import { NoResultsBlankState, SearchPromptBlankState } from '../search_blank_states'
+
+describe('SearchPromptBlankState', () => {
+  it('renders the prompt heading', () => {
+    const view = render(<SearchPromptBlankState />)
+
+    expect(view.getByText('Search chat')).toBeTruthy()
+  })
+})
+
+describe('NoResultsBlankState', () => {
+  it('renders the heading and the searched term', () => {
+    const view = render(<NoResultsBlankState term="budget" />)
+
+    expect(view.getByText('No results')).toBeTruthy()
+    expect(view.getByText(/Nothing matches “budget\.”/)).toBeTruthy()
+  })
+})

package/src/screens/search/components/__tests__/search_results_list.test.tsx

@@ -0,0 +1,135 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import { FlatList } from 'react-native'
+import type { useSearchResults } from '../../../../hooks/use_search_results'
+import type {
+  ConversationSearchResultResource,
+  MessageSearchResultResource,
+} from '../../../../types/resources/search_result'
+import { SearchResultsList } from '../search_results_list'
+
+const mockUseSearchResults = jest.fn<ReturnType<typeof useSearchResults>, [string]>()
+jest.mock('../../../../hooks/use_search_results', () => ({
+  useSearchResults: (term: string) => mockUseSearchResults(term),
+}))
+
+type SearchState = ReturnType<typeof useSearchResults>
+
+const searchState = (overrides: Partial<SearchState> = {}): SearchState => ({
+  results: [],
+  failedTypes: [],
+  isPending: false,
+  isError: false,
+  isFetchNextPageError: false,
+  loadMore: jest.fn(),
+  hasNextPage: false,
+  isFetchingNextPage: false,
+  ...overrides,
+})
+
+const conversationResult = (id: string): ConversationSearchResultResource => ({
+  type: 'conversation',
+  id,
+  title: `Conversation ${id}`,
+  url: `/conversations/${id}`,
+  extra: { avatar: { previewAvatarUrls: [] } },
+})
+
+const messageResult = (id: string): MessageSearchResultResource => ({
+  type: 'message',
+  id,
+  title: `Message ${id}`,
+  url: `/conversations/1/messages/${id}`,
+  extra: {
+    conversationId: 1,
+    authorName: 'Ann',
+    snippet: [{ text: 'potluck', match: true }],
+    createdAt: '2026-01-01T00:00:00Z',
+    avatar: { previewAvatarUrls: [] },
+  },
+})
+
+const renderList = (state: Partial<SearchState>) => {
+  mockUseSearchResults.mockReturnValue(searchState(state))
+  return render(<SearchResultsList term="potluck" onSelect={jest.fn()} />)
+}
+
+describe('SearchResultsList', () => {
+  it('shows a spinner while pending', () => {
+    const view = renderList({ isPending: true })
+
+    expect(view.getByLabelText('Loading results')).toBeTruthy()
+  })
+
+  it('shows an error banner when the search fails', () => {
+    const view = renderList({ isError: true })
+
+    expect(view.getByText("Couldn't search right now. Try again.")).toBeTruthy()
+  })
+
+  it('shows the no-results state with the term when nothing matches', () => {
+    const view = renderList({})
+
+    expect(view.getByText(/Nothing matches “potluck\.”/)).toBeTruthy()
+  })
+
+  it('renders both section headings when both types have results', () => {
+    const view = renderList({ results: [conversationResult('1'), messageResult('1')] })
+
+    expect(view.getByText('Conversations')).toBeTruthy()
+    expect(view.getByText('Messages')).toBeTruthy()
+    expect(view.getByText('Message 1')).toBeTruthy()
+  })
+
+  it('renders the failure text for a failed type instead of the no-results state', () => {
+    const view = renderList({ failedTypes: ['message'] })
+
+    expect(view.getByText('Couldn’t load messages.')).toBeTruthy()
+    expect(view.queryByText('No results')).toBeNull()
+  })
+
+  it('keeps the no-results state hidden when only conversations match', () => {
+    const view = renderList({ results: [conversationResult('1')] })
+
+    expect(view.getByText('Conversations')).toBeTruthy()
+    expect(view.queryByText('No results')).toBeNull()
+  })
+
+  it('loads the next page once when the end is reached', () => {
+    const loadMore = jest.fn()
+    const view = renderList({ results: [messageResult('1')], hasNextPage: true, loadMore })
+
+    fireEvent(view.UNSAFE_getByType(FlatList), 'onEndReached')
+
+    expect(loadMore).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not load more while a page is already fetching', () => {
+    const loadMore = jest.fn()
+    const view = renderList({
+      results: [messageResult('1')],
+      hasNextPage: true,
+      isFetchingNextPage: true,
+      loadMore,
+    })
+
+    fireEvent(view.UNSAFE_getByType(FlatList), 'onEndReached')
+
+    expect(view.getByLabelText('Loading more results')).toBeTruthy()
+    expect(loadMore).not.toHaveBeenCalled()
+  })
+
+  it('offers a retry after a paging failure', () => {
+    const loadMore = jest.fn()
+    const view = renderList({
+      results: [messageResult('1')],
+      hasNextPage: true,
+      isFetchNextPageError: true,
+      loadMore,
+    })
+
+    fireEvent.press(view.getByText('Try again'))
+
+    expect(loadMore).toHaveBeenCalledTimes(1)
+  })
+})

package/src/screens/search/components/conversation_result_row.tsx

@@ -0,0 +1,36 @@
+import { StyleSheet } from 'react-native'
+import { ConversationAvatar, Heading } from '../../../components'
+import { useScalableNumberOfLines, useTheme } from '../../../hooks'
+import type { ConversationSearchResultResource } from '../../../types'
+import { ResultRow } from './result_row'
+
+interface ConversationResultRowProps {
+  result: ConversationSearchResultResource
+  onPress: () => void
+}
+
+export function ConversationResultRow({ result, onPress }: ConversationResultRowProps) {
+  const styles = useStyles()
+  const numberOfLines = useScalableNumberOfLines(1)
+
+  return (
+    <ResultRow accessibilityLabel={result.title} onPress={onPress} alignItems="center">
+      <ConversationAvatar conversation={result.extra.avatar} size="lg" />
+      <Heading variant="h3" numberOfLines={numberOfLines} style={styles.title}>
+        {result.title}
+      </Heading>
+    </ResultRow>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    title: {
+      flex: 1,
+      fontSize: 16,
+      color: colors.textColorDefaultPrimary,
+    },
+  })
+}

package/src/screens/search/components/conversation_results.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react'
+import type { ConversationSearchResultResource } from '../../../types'
+import { ViewMoreLinkRow } from '../../conversation_select_recipients/components/view_more_link_row'
+import { ConversationResultRow } from './conversation_result_row'
+import { ResultsSection } from './results_section'
+
+const COLLAPSED_COUNT = 5
+
+interface ConversationResultsProps {
+  results: ConversationSearchResultResource[]
+  onSelect: (result: ConversationSearchResultResource) => void
+}
+
+export function ConversationResults({ results, onSelect }: ConversationResultsProps) {
+  const [expanded, setExpanded] = useState(false)
+  const visible = expanded ? results : results.slice(0, COLLAPSED_COUNT)
+
+  if (results.length === 0) return null
+
+  const footer = results.length > COLLAPSED_COUNT && (
+    <ViewMoreLinkRow
+      expanded={expanded}
+      onPress={() => setExpanded(!expanded)}
+      accessibilityHint={
+        expanded
+          ? `Shows the first ${COLLAPSED_COUNT} conversation results`
+          : `Shows all ${results.length} conversation results`
+      }
+    />
+  )
+
+  return (
+    <ResultsSection title="Conversations" footer={footer}>
+      {visible.map(result => (
+        <ConversationResultRow key={result.id} result={result} onPress={() => onSelect(result)} />
+      ))}
+    </ResultsSection>
+  )
+}

package/src/screens/search/components/message_result_row.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { ConversationAvatar, Text } from '../../../components/display'
+import { useScalableNumberOfLines } from '../../../hooks'
+import type { MessageSearchResultResource } from '../../../types/resources/search_result'
+import { platformFontWeightMedium } from '../../../utils'
+import { formatDatePreview } from '../../../utils/date'
+import { ResultRow } from './result_row'
+import { plainSnippetText, Snippet } from './snippet'
+
+interface MessageResultRowProps {
+  result: MessageSearchResultResource
+  onPress: (result: MessageSearchResultResource) => void
+}
+
+export function MessageResultRow({ result, onPress }: MessageResultRowProps) {
+  const { authorName, avatar, snippet, createdAt } = result.extra
+  const titleNumberOfLines = useScalableNumberOfLines(1)
+  const previewNumberOfLines = useScalableNumberOfLines(2)
+  const date = formatDatePreview(createdAt)
+  const accessibilityLabel = `${result.title}, ${authorName}: ${plainSnippetText(snippet)}, ${date}`
+
+  return (
+    <ResultRow accessibilityLabel={accessibilityLabel} onPress={() => onPress(result)}>
+      <ConversationAvatar conversation={avatar} size="lg" />
+      <View style={styles.body}>
+        <Text numberOfLines={titleNumberOfLines} style={styles.title}>
+          {result.title}
+        </Text>
+        <Text variant="tertiary" numberOfLines={previewNumberOfLines}>
+          {authorName}: <Snippet segments={snippet} />
+        </Text>
+      </View>
+      <Text variant="footnote">{date}</Text>
+    </ResultRow>
+  )
+}
+
+const styles = StyleSheet.create({
+  body: {
+    flex: 1,
+    rowGap: 2,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: platformFontWeightMedium,
+  },
+})

package/src/screens/search/components/result_row.tsx

@@ -0,0 +1,58 @@
+import React, { type ReactNode } from 'react'
+import { Pressable, StyleSheet } from 'react-native'
+import { useAtFontScaleBreakpoint, useTheme } from '../../../hooks'
+import { platformPressedOpacityStyle } from '../../../utils'
+
+interface ResultRowProps {
+  accessibilityLabel: string
+  onPress: () => void
+  alignItems?: 'flex-start' | 'center'
+  children: ReactNode
+}
+
+export function ResultRow({
+  accessibilityLabel,
+  onPress,
+  alignItems = 'flex-start',
+  children,
+}: ResultRowProps) {
+  const { colors } = useTheme()
+  const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
+  const styles = useStyles()
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.row,
+        atFontScaleBreakpoint ? styles.stacked : { alignItems },
+        pressed && platformPressedOpacityStyle,
+      ]}
+      android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }}
+    >
+      {children}
+    </Pressable>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    row: {
+      flexDirection: 'row',
+      gap: 8,
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.borderColorDefaultDim,
+    },
+    stacked: {
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      borderBottomColor: colors.borderColorDefaultDark,
+    },
+  })
+}

package/src/screens/search/components/results_section.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Text } from '../../../components'
+
+interface ResultsSectionProps {
+  title: string
+  footer?: ReactNode
+  children?: ReactNode
+}
+
+export function ResultsSection({ title, footer, children }: ResultsSectionProps) {
+  return (
+    <View>
+      <View style={styles.headingRow}>
+        <Text accessibilityRole="header" style={styles.heading}>
+          {title}
+        </Text>
+      </View>
+      {children}
+      {footer}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  headingRow: {
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: 8,
+  },
+  heading: {
+    fontWeight: '600',
+  },
+})

package/src/screens/search/components/search_blank_states.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import BlankState from '../../../components/primitive/blank_state_primitive'
+
+export function SearchPromptBlankState() {
+  return (
+    <BlankState.Root>
+      <BlankState.Imagery name="general.search" />
+      <BlankState.Content>
+        <BlankState.Heading>Search chat</BlankState.Heading>
+        <BlankState.Text>
+          Find conversations by title, or search for words from a message.
+        </BlankState.Text>
+      </BlankState.Content>
+    </BlankState.Root>
+  )
+}
+
+interface NoResultsBlankStateProps {
+  term: string
+}
+
+export function NoResultsBlankState({ term }: NoResultsBlankStateProps) {
+  return (
+    <BlankState.Root>
+      <BlankState.Imagery name="general.search" />
+      <BlankState.Content>
+        <BlankState.Heading>No results</BlankState.Heading>
+        <BlankState.Text>
+          Nothing matches &ldquo;{term}.&rdquo; Try a conversation title, or a word from a message.
+        </BlankState.Text>
+      </BlankState.Content>
+    </BlankState.Root>
+  )
+}