Translations

Localize DocSearch UI strings for internationalization.

DocSearch supports localization through the translations prop. All translation strings are optional and fall back to English defaults.

Translation Structure

The translations object has three main sections:

type DocSearchTranslations = Partial<{
  button: ButtonTranslations;        // Search button translations
  modal: ModalTranslations;          // Modal UI translations
}>;

Button Translations

Translations for the search button that triggers the modal.

button.buttonText · string · default: "Search"

Text displayed on the search button.

button.buttonAriaLabel · string · default: "Search"

Accessible label for the search button.

English (Default)

<DocSearch
  translations={{
    button: {
      buttonText: 'Search',
      buttonAriaLabel: 'Search'
    }
  }}
/>

Modal Translations

Translations for the modal interface. The modal section is divided into multiple subsections.

Search Box

modal.searchBox.clearButtonTitle · string · default: "Clear"

Title for the clear button.

modal.searchBox.clearButtonAriaLabel · string · default: "Clear the query"

Accessible label for the clear button.

modal.searchBox.closeButtonText · string · default: "Close"

Text for the close button.

modal.searchBox.closeButtonAriaLabel · string · default: "Close"

Accessible label for the close button.

modal.searchBox.placeholderText · string · default: "Search docs"

Placeholder text for the search input.

modal.searchBox.placeholderTextAskAi · string · default: "Ask another question..."

Placeholder text when in Ask AI mode.

modal.searchBox.placeholderTextAskAiStreaming · string · default: "Answering..."

Placeholder text when AI is streaming a response.

modal.searchBox.enterKeyHint · string · default: "Search"

Enter key hint for standard search.

modal.searchBox.enterKeyHintAskAi · string · default: "Ask"

Enter key hint for Ask AI mode.

modal.searchBox.searchInputLabel · string · default: "Search"

Accessible label for the search input.

modal.searchBox.backToKeywordSearchButtonText · string · default: "Back to keyword search"

Text for the button that exits Ask AI mode.

modal.searchBox.backToKeywordSearchButtonAriaLabel · string · default: "Back to keyword search"

Accessible label for the back button.

modal.searchBox.newConversationPlaceholder · string · default: "Ask a question"

Placeholder text for starting a new AI conversation.

modal.searchBox.conversationHistoryTitle · string · default: "My conversation history"

Title for the conversation history screen.

modal.searchBox.startNewConversationText · string · default: "Start a new conversation"

Text for the new conversation menu item.

modal.searchBox.viewConversationHistoryText · string · default: "Conversation history"

Text for the conversation history menu item.

modal.searchBox.threadDepthErrorPlaceholder · string · default: "Conversation limit reached"

Placeholder shown when conversation depth limit is reached.

Footer

modal.footer.selectText · string · default: "Select"

Label for the select action in keyword search mode.

modal.footer.submitQuestionText · string · default: "Submit question"

Label for the submit action in Ask AI mode.

modal.footer.selectKeyAriaLabel · string · default: "Enter key"

Accessible label for the Enter key icon.

modal.footer.navigateText · string · default: "Navigate"

Label for navigation action.

modal.footer.navigateUpKeyAriaLabel · string · default: "Arrow up"

Accessible label for the up arrow key.

modal.footer.navigateDownKeyAriaLabel · string · default: "Arrow down"

Accessible label for the down arrow key.

modal.footer.closeText · string · default: "Close"

Label for the close action in keyword search mode.

modal.footer.backToSearchText · string · default: "Back to search"

Label for the escape action in Ask AI mode.

modal.footer.closeKeyAriaLabel · string · default: "Escape key"

Accessible label for the Escape key.

modal.footer.poweredByText · string · default: "Powered by"

Text for the “Powered by” Algolia branding.

Error Screen

modal.errorScreen.titleText · string · default: "Unable to fetch results"

Error title when search fails.

modal.errorScreen.helpText · string

Error help text.

No Results Screen

modal.noResultsScreen.noResultsText · string · default: "No results found for"

Text shown when no results are found.

modal.noResultsScreen.suggestedQueryText · string · default: "Try searching for"

Text for suggested queries section.

modal.noResultsScreen.reportMissingResultsText · string · default: "Believe this query should return results?"

Text prompting users to report missing results.

modal.noResultsScreen.reportMissingResultsLinkText · string · default: "Let us know."

Link text for reporting missing results.

Results Screen

modal.resultsScreen.askAiPlaceholder · string

Placeholder for Ask AI action in results.

modal.resultsScreen.noResultsAskAiPlaceholder · string

Placeholder for Ask AI action when no results are found.

Start Screen

modal.startScreen.recentSearchesTitle · string · default: "Recent"

Title for recent searches section.

modal.startScreen.noRecentSearchesText · string

Text shown when there are no recent searches.

modal.startScreen.saveRecentSearchButtonTitle · string · default: "Save this search"

Title for save to favorites button.

modal.startScreen.removeRecentSearchButtonTitle · string · default: "Remove this search from history"

Title for remove from recents button.

modal.startScreen.favoriteSearchesTitle · string · default: "Favorite"

Title for favorite searches section.

modal.startScreen.removeFavoriteSearchButtonTitle · string · default: "Remove this search from favorites"

Title for remove from favorites button.

modal.startScreen.recentConversationsTitle · string · default: "Recent conversations"

Title for recent AI conversations section.

modal.startScreen.removeRecentConversationButtonTitle · string · default: "Remove this conversation from history"

Title for remove conversation button.

New Conversation Screen

modal.newConversation.newConversationTitle · string · default: "How can I help you today?"

Title for new AI conversation screen.

modal.newConversation.newConversationDescription · string

Description text for new conversation screen.

Ask AI Screen

modal.askAiScreen.disclaimerText · string

Disclaimer text shown in Ask AI mode.

modal.askAiScreen.relatedSourcesText · string · default: "Related sources"

Title for related sources section.

modal.askAiScreen.thinkingText · string · default: "Thinking..."

Text shown when AI is thinking.

modal.askAiScreen.copyButtonText · string · default: "Copy"

Text for copy button.

modal.askAiScreen.copyButtonCopiedText · string · default: "Copied!"

Text shown after copying.

modal.askAiScreen.copyButtonTitle · string · default: "Copy"

Title for copy button.

modal.askAiScreen.likeButtonTitle · string · default: "Like"

Title for like button.

modal.askAiScreen.dislikeButtonTitle · string · default: "Dislike"

Title for dislike button.

modal.askAiScreen.thanksForFeedbackText · string · default: "Thanks for your feedback!"

Text shown after submitting feedback.

modal.askAiScreen.preToolCallText · string · default: "Searching..."

Text shown before AI starts searching.

modal.askAiScreen.duringToolCallText · string · default: "Searching..."

Text shown during AI search.

modal.askAiScreen.afterToolCallText · string · default: "Searched for"

Text shown after AI completes search.

modal.askAiScreen.stoppedStreamingText · string · default: "You stopped this response"

Text shown when user stops streaming.

modal.askAiScreen.errorTitleText · string · default: "Chat error"

Title for chat errors.

modal.askAiScreen.threadDepthExceededMessage · string

Message shown when conversation depth limit is reached.

modal.askAiScreen.startNewConversationButtonText · string · default: "Start a new conversation"

Button text for starting new conversation after error.

modal.askAiScreen.aggregatedToolCallNode · (queries: string[], onSearchQueryClick: (query: string) => void) => React.ReactNode

Custom JSX element for the aggregated search block. Completely overrides the default renderer.

modal.askAiScreen.aggregatedToolCallText · (queries: string[]) => { before?: string; separator?: string; lastSeparator?: string; after?: string }

Generate list connective parts for aggregated searches (backwards compatibility).

translations={{
  modal: {
    askAiScreen: {
      aggregatedToolCallText: (queries) => ({
        before: 'searched for ',
        separator: ', ',
        lastSeparator: ' and ',
        after: ''
      })
    }
  }
}}

Complete Example

English (Default)

<DocSearch
  appId="YOUR_APP_ID"
  apiKey="YOUR_API_KEY"
  indexName="docs"
  // All defaults shown explicitly
  translations={{
    button: {
      buttonText: 'Search',
      buttonAriaLabel: 'Search'
    },
    modal: {
      searchBox: {
        clearButtonTitle: 'Clear',
        clearButtonAriaLabel: 'Clear the query',
        closeButtonText: 'Close',
        closeButtonAriaLabel: 'Close',
        placeholderText: 'Search docs',
        searchInputLabel: 'Search'
      },
      footer: {
        selectText: 'Select',
        navigateText: 'Navigate',
        closeText: 'Close',
        poweredByText: 'Powered by'
      },
      errorScreen: {
        titleText: 'Unable to fetch results',
        helpText: 'You might want to check your network connection.'
      },
      noResultsScreen: {
        noResultsText: 'No results found for',
        suggestedQueryText: 'Try searching for'
      },
      startScreen: {
        recentSearchesTitle: 'Recent',
        favoriteSearchesTitle: 'Favorite'
      }
    }
  }}
/>