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
}>;
Text displayed on the search button.
Accessible label for the search button.
<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
Title for the clear button.
modal.searchBox.clearButtonAriaLabel
string
default:"Clear the query"
Accessible label for the clear button.
modal.searchBox.closeButtonText
Text for the close button.
modal.searchBox.closeButtonAriaLabel
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
Enter key hint for standard search.
modal.searchBox.enterKeyHintAskAi
Enter key hint for Ask AI mode.
modal.searchBox.searchInputLabel
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.
Label for the select action in keyword search mode.
Label for the submit action in Ask AI mode.
Accessible label for the Enter key icon.
Label for navigation action.
Accessible label for the up arrow key.
Accessible label for the down arrow key.
Label for the close action in keyword search mode.
Label for the escape action in Ask AI mode.
Accessible label for the Escape key.
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
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
Placeholder for Ask AI action in results.
modal.resultsScreen.noResultsAskAiPlaceholder
Placeholder for Ask AI action when no results are found.
Start Screen
modal.startScreen.recentSearchesTitle
Title for recent searches section.
modal.startScreen.noRecentSearchesText
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
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
Description text for new conversation screen.
Ask AI Screen
modal.askAiScreen.disclaimerText
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
Text for copy button.
modal.askAiScreen.copyButtonCopiedText
Text shown after copying.
modal.askAiScreen.copyButtonTitle
Title for copy button.
modal.askAiScreen.likeButtonTitle
Title for like button.
modal.askAiScreen.dislikeButtonTitle
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
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
<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'
}
}
}}
/>
