Function SearchBox

packages/docsearch-react/src/SearchBox.tsx:64–322

({
  translations = {},
  askAiState,
  onAskAiToggle,
  setAskAiState,
  ...props
}: SearchBoxProps)

}

export function SearchBox({
  translations = {},
  askAiState,
  onAskAiToggle,
  setAskAiState,
  ...props
}: SearchBoxProps): JSX.Element {
  const {
    clearButtonTitle = 'Clear',
    clearButtonAriaLabel = 'Clear the query',
    closeButtonText = 'Close',
    closeButtonAriaLabel = 'Close',
    searchInputLabel = 'Search',
    backToKeywordSearchButtonText = 'Back to keyword search',
    backToKeywordSearchButtonAriaLabel = 'Back to keyword search',
    placeholderTextAskAiStreaming = 'Answering...',
    newConversationPlaceholder = 'Ask a question',
    conversationHistoryTitle = 'My conversation history',
    startNewConversationText = 'Start a new conversation',
    viewConversationHistoryText = 'Conversation history',
    threadDepthErrorPlaceholder = 'Conversation limit reached',
  } = translations;
  const { onReset } = props.getFormProps({
    inputElement: props.inputRef.current,
  });

  React.useEffect(() => {
    if (props.autoFocus && props.inputRef.current) {
      props.inputRef.current.focus();
    }
  }, [props.autoFocus, props.inputRef]);

  React.useEffect(() => {
    if (props.isFromSelection && props.inputRef.current) {
      props.inputRef.current.select();
    }
  }, [props.isFromSelection, props.inputRef]);

  const hasRecentConversations = React.useMemo(() => {
    const askAiSource = props.state.collections[2];

    if (!askAiSource) {
      return false;
    }

    return askAiSource.items.length > 0;
  }, [props.state.collections]);

  const baseInputProps = props.getInputProps({
    inputElement: props.inputRef.current!,
    autoFocus: props.autoFocus,
    maxLength: MAX_QUERY_SIZE,
  });

  const blockedKeys = new Set(['ArrowUp', 'ArrowDown', 'Enter']);
  const origOnKeyDown = baseInputProps.onKeyDown;
  const origOnChange = baseInputProps.onChange;
  const isAskAiStreaming = props.askAiStatus === 'streaming' || props.askAiStatus === 'submitted';