@redocly/theme 0.70.0-next.8 → 0.70.0-next.9

package/src/components/Search/SearchDialog.tsx

@@ -1,790 +0,0 @@
-import React, { Fragment, useRef, useState, useEffect, useCallback } from 'react';
-import styled from 'styled-components';
-
-import type { JSX, PointerEvent } from 'react';
-import type { SearchItemData } from '@redocly/theme/core/types';
-
-import { SearchInput } from '@redocly/theme/components/Search/SearchInput';
-import { SearchShortcut } from '@redocly/theme/components/Search/SearchShortcut';
-import { shouldShowLoadMore } from '@redocly/theme/components/Search/should-show-load-more';
-import { Button } from '@redocly/theme/components/Button/Button';
-import { breakpoints, concatClassNames, getBaseDataAttributes } from '@redocly/theme/core/utils';
-import { Portal } from '@redocly/theme/components/Portal/Portal';
-import { SearchItem } from '@redocly/theme/components/Search/SearchItem';
-import { SearchRecent } from '@redocly/theme/components/Search/SearchRecent';
-import { SearchSuggestedPages } from '@redocly/theme/components/Search/SearchSuggestedPages';
-import {
-  useThemeHooks,
-  useDialogHotKeys,
-  useSearchFilter,
-  useRecentSearches,
-  useModalScrollLock,
-  usePersistedQuickFilter,
-} from '@redocly/theme/core/hooks';
-import { Tag } from '@redocly/theme/components/Tag/Tag';
-import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
-import { SearchFilter } from '@redocly/theme/components/Search/SearchFilter';
-import { SearchGroups } from '@redocly/theme/components/Search/SearchGroups';
-import { Typography } from '@redocly/theme/components/Typography/Typography';
-import { SpinnerLoader } from '@redocly/theme/components/Loaders/SpinnerLoader';
-import { SearchAiDialog } from '@redocly/theme/components/Search/SearchAiDialog';
-import { useSearchSession } from '@redocly/theme/core/contexts';
-import { SettingsIcon } from '@redocly/theme/icons/SettingsIcon/SettingsIcon';
-import { AiStarsIcon } from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
-import { ReturnKeyIcon } from '@redocly/theme/icons/ReturnKeyIcon/ReturnKeyIcon';
-import { ChevronLeftIcon } from '@redocly/theme/icons/ChevronLeftIcon/ChevronLeftIcon';
-import { EditIcon } from '@redocly/theme/icons/EditIcon/EditIcon';
-import { AiStarsGradientIcon } from '@redocly/theme/icons/AiStarsGradientIcon/AiStarsGradientIcon';
-import { ResetIcon } from '@redocly/theme/icons/ResetIcon/ResetIcon';
-import { CloseFilledIcon } from '@redocly/theme/icons/CloseFilledIcon/CloseFilledIcon';
-
-export type SearchDialogProps = {
-  onClose: () => void;
-  className?: string;
-  initialMode?: 'search' | 'ai-dialog';
-};
-
-export function SearchDialog({
-  onClose,
-  className,
-  initialMode = 'search',
-}: SearchDialogProps): JSX.Element {
-  const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useTelemetry } =
-    useThemeHooks();
-  const telemetry = useTelemetry();
-  const { searchSessionId, refreshSearchSessionId } = useSearchSession();
-  const products = useProducts();
-  const currentProduct = useCurrentProduct();
-  const [product, setProduct] = useState(currentProduct);
-  const [mode, setMode] = useState<'search' | 'ai-dialog'>(initialMode);
-  const autoSearchDisabled = mode !== 'search';
-  const {
-    query,
-    setQuery,
-    filter,
-    setFilter,
-    items,
-    isSearchLoading,
-    facets,
-    groupCounts,
-    setLoadMore,
-    advancedSearch,
-    askAi,
-    groupField,
-    searchError,
-    retrySearch,
-  } = useSearch(product?.name, autoSearchDisabled);
-  const {
-    isFilterOpen,
-    onFilterToggle,
-    onFilterChange,
-    onFilterReset,
-    onFacetReset,
-    onQuickFilterReset,
-  } = useSearchFilter(filter, setFilter);
-  usePersistedQuickFilter({
-    filter,
-    setFilter,
-    facets,
-    groupField,
-    query,
-    isSearchLoading,
-    searchError,
-    enabled: initialMode === 'search',
-  });
-  const { addSearchHistoryItem } = useRecentSearches();
-  const aiSearch = useAiSearch({ filter: filter, product: product?.name });
-  useModalScrollLock(true);
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  const [isMobile, setIsMobile] = useState(false);
-
-  useEffect(() => {
-    const mediaQuery = window.matchMedia(`(max-width: ${breakpoints.small})`);
-    setIsMobile(mediaQuery.matches);
-
-    const handleChange = (e: MediaQueryListEvent) => {
-      setIsMobile(e.matches);
-    };
-    mediaQuery.addEventListener('change', handleChange);
-    return () => mediaQuery.removeEventListener('change', handleChange);
-  }, []);
-
-  const aiQueryRef = useRef<HTMLDivElement>(null);
-  const firstSearchResultRef = useRef<HTMLAnchorElement>(null);
-  const searchKeysWithResults = items ? Object.keys(items).filter((key) => items[key]?.length) : [];
-
-  const { translate } = useTranslate();
-
-  const handleClose = useCallback(() => {
-    const value = searchInputRef?.current?.value;
-    if (value) {
-      addSearchHistoryItem(value);
-    }
-
-    // Refresh the search session id so a new session starts on next open
-    refreshSearchSessionId();
-
-    onClose();
-  }, [addSearchHistoryItem, onClose, refreshSearchSessionId]);
-
-  useDialogHotKeys(modalRef, handleClose);
-
-  const focusSearchInput = () => {
-    requestAnimationFrame(() => {
-      searchInputRef.current?.focus();
-    });
-  };
-
-  useEffect(() => {
-    if (mode === 'ai-dialog' && aiSearch.isGeneratingResponse) {
-      setQuery('');
-    }
-  }, [mode, aiSearch.isGeneratingResponse, setQuery]);
-
-  useEffect(focusSearchInput, []);
-
-  const handleOverlayClick = useCallback(
-    (event: PointerEvent<HTMLElement>) => {
-      if (event.button !== 0) return;
-      const target = event.target as HTMLElement;
-      if (typeof target.className !== 'string') return;
-      if (target.className?.includes(' overlay')) {
-        handleClose();
-      }
-    },
-    [handleClose],
-  );
-
-  const mapItem = useCallback(
-    (
-      item: SearchItemData,
-      index: number,
-      results: SearchItemData[],
-      innerRef?: React.Ref<HTMLAnchorElement>,
-    ) => {
-      let itemProduct;
-      if (!product && item.document.product) {
-        const folder = item.document.product?.folder;
-        const resolvedProduct = products.find((product) =>
-          product.slug.match(`/${folder.startsWith('./') ? folder.slice(2) : folder}/`),
-        );
-        itemProduct = resolvedProduct
-          ? { name: resolvedProduct.name, icon: resolvedProduct.icon }
-          : undefined;
-      }
-
-      return (
-        <SearchItem
-          key={`${index}-${item.document.id}`}
-          item={item}
-          product={itemProduct}
-          innerRef={innerRef}
-          onClick={() => {
-            addSearchHistoryItem(query);
-            telemetry.sendSearchResultClickedMessage([
-              {
-                ...getBaseDataAttributes('searchResultItem', 'search', item.document.url),
-                query: query,
-                totalResults: results.length.toString(),
-                index: index.toString(),
-                searchEngine: mode,
-                searchSessionId,
-              },
-            ]);
-            onClose();
-          }}
-        />
-      );
-    },
-    [onClose, product, products, addSearchHistoryItem, query, telemetry, mode, searchSessionId],
-  );
-
-  const showLoadMore = useCallback(
-    (groupKey: string, currentCount: number = 0) =>
-      shouldShowLoadMore({ groupKey, currentCount, groupCounts, facets, groupField }),
-    [groupCounts, facets, groupField],
-  );
-
-  const showResults = !!((filter && filter.length) || query);
-  const showSearchFilterButton = advancedSearch && mode === 'search';
-  const showAiSearchButton = askAi && mode === 'search';
-  const showAiSearchItem = showAiSearchButton && query;
-  const showHeaderButtons = showSearchFilterButton || showAiSearchButton;
-
-  return (
-    <Portal>
-      <SearchOverlay
-        data-component-name="Search/SearchDialog"
-        ref={modalRef}
-        onPointerDown={handleOverlayClick}
-        className={concatClassNames('overlay', className)}
-      >
-        <SearchDialogWrapper className="scroll-lock" role="dialog">
-          <SearchDialogHeader>
-            {product && (
-              <SearchProductTag color="product">
-                {product.name}
-                <CloseIcon onClick={() => setProduct(undefined)} color="--icon-color-additional" />
-              </SearchProductTag>
-            )}
-            {mode === 'search' ? (
-              <>
-                <SearchInput
-                  value={query}
-                  onChange={setQuery}
-                  placeholder={translate('search.label', 'Search docs...')}
-                  isLoading={isSearchLoading}
-                  inputRef={searchInputRef}
-                  onSubmit={() => {
-                    if (isSearchLoading) return;
-
-                    if (showAiSearchButton && aiQueryRef.current) {
-                      aiQueryRef.current.focus();
-                    } else {
-                      firstSearchResultRef.current?.focus();
-                    }
-                  }}
-                  data-translation-key="search.label"
-                />
-                {showHeaderButtons && (
-                  <SearchHeaderButtons>
-                    {showAiSearchButton ? (
-                      <SearchAiButton
-                        icon={<AiStarsGradientIcon color="var(--search-ai-button-icon-color)" />}
-                        onClick={() => {
-                          setMode('ai-dialog');
-                          if (query.trim()) {
-                            aiSearch.askQuestion(query);
-                          }
-                          telemetry.sendSearchAiOpenedMessage([
-                            {
-                              ...getBaseDataAttributes('searchAiButton', 'search'),
-                              method: 'ai_search_button',
-                            },
-                          ]);
-                        }}
-                      >
-                        {translate('search.ai.button', 'Search with AI')}
-                      </SearchAiButton>
-                    ) : null}
-                    {showSearchFilterButton && (
-                      <SearchFilterToggleButton icon={<SettingsIcon />} onClick={onFilterToggle} />
-                    )}
-                  </SearchHeaderButtons>
-                )}
-              </>
-            ) : (
-              <AiDialogHeaderWrapper>
-                {initialMode === 'ai-dialog' ? (
-                  <AiDialogHeaderTitle>
-                    <AiStarsGradientIcon
-                      color="var(--search-ai-button-icon-color)"
-                      size="1.25rem"
-                    />
-                    {translate('search.ai.assistant', 'Assistant')}
-                  </AiDialogHeaderTitle>
-                ) : (
-                  <Button
-                    variant="secondary"
-                    onClick={() => {
-                      setMode('search');
-                      aiSearch.clearConversation();
-                      focusSearchInput();
-                    }}
-                    tabIndex={0}
-                    icon={<ChevronLeftIcon />}
-                  >
-                    {isMobile
-                      ? translate('search.ai.back', 'Back')
-                      : translate('search.ai.backToSearch', 'Back to search')}
-                  </Button>
-                )}
-                <AiDialogHeaderActionsWrapper>
-                  <Button
-                    variant="secondary"
-                    disabled={!aiSearch.conversation.length}
-                    onClick={() => {
-                      refreshSearchSessionId();
-                      aiSearch.clearConversation();
-                    }}
-                    tabIndex={0}
-                    icon={<EditIcon />}
-                  >
-                    {translate('search.ai.newConversation', 'New conversation')}
-                  </Button>
-                  {isMobile && <Button variant="text" icon={<CloseIcon />} onClick={handleClose} />}
-                </AiDialogHeaderActionsWrapper>
-              </AiDialogHeaderWrapper>
-            )}
-          </SearchDialogHeader>
-
-          <SearchDialogBody>
-            {mode === 'search' ? (
-              <>
-                {advancedSearch && isFilterOpen && (
-                  <SearchDialogBodyFilterView>
-                    <SearchFilter
-                      facets={facets}
-                      filter={filter}
-                      query={query}
-                      quickFilterFields={[groupField]}
-                      onFilterChange={onFilterChange}
-                      onFilterReset={onFilterReset}
-                      onFacetReset={onFacetReset}
-                    />
-                  </SearchDialogBodyFilterView>
-                )}
-                <SearchDialogBodyMainView>
-                  <SearchGroups
-                    facets={facets}
-                    searchFilter={filter}
-                    onFilterChange={onFilterChange}
-                    onQuickFilterReset={onQuickFilterReset}
-                    groupField={groupField}
-                  />
-
-                  {showAiSearchItem && (
-                    <SearchWithAI
-                      onClick={() => {
-                        setMode('ai-dialog');
-                        if (query.trim()) {
-                          aiSearch.askQuestion(query);
-                        }
-                        telemetry.sendSearchAiOpenedMessage([
-                          {
-                            ...getBaseDataAttributes('searchAiInput', 'search'),
-                            method: 'ai_search_input',
-                          },
-                        ]);
-                      }}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter') {
-                          setMode('ai-dialog');
-                          if (query.trim()) {
-                            aiSearch.askQuestion(query);
-                          }
-                          telemetry.sendSearchAiOpenedMessage([
-                            {
-                              ...getBaseDataAttributes('searchAiInput', 'search'),
-                              method: 'ai_search_input',
-                            },
-                          ]);
-                        }
-                      }}
-                      ref={aiQueryRef}
-                      tabIndex={0}
-                      role="option"
-                      aria-selected="true"
-                    >
-                      <AiStarsIcon
-                        style={{ flexShrink: 0 }}
-                        color="var(--search-ai-icon-color)"
-                        size="36px"
-                        background="var(--search-ai-icon-bg-color)"
-                        margin="0 var(--spacing-md) 0 0"
-                        borderRadius="var(--border-radius-lg)"
-                      />
-                      <QueryWrapper>
-                        <Typography fontWeight="var(--font-weight-semibold)">{query}</Typography>
-                      </QueryWrapper>
-                      <Typography>- {translate('search.ai.label', 'Ask AI assistant')}</Typography>
-                      <ReturnKeyIcon color="var(--search-item-text-color)" />
-                    </SearchWithAI>
-                  )}
-                  {showResults ? (
-                    searchKeysWithResults.length ? (
-                      searchKeysWithResults.map((key, searchGroupKeyIdx) => {
-                        const searchResultItems = items[key];
-
-                        if (searchResultItems?.length) {
-                          return (
-                            <Fragment key={key}>
-                              <SearchGroupTitle data-testid="search-group-title">
-                                {key}
-                              </SearchGroupTitle>
-                              {searchResultItems.map((item, idx, resultsArr) =>
-                                mapItem(
-                                  item,
-                                  idx,
-                                  resultsArr,
-                                  searchGroupKeyIdx === 0 ? firstSearchResultRef : undefined,
-                                ),
-                              )}
-                              {showLoadMore(key, searchResultItems.length || 0) && (
-                                <SearchGroupFooter
-                                  tabIndex={0}
-                                  data-translation-key="search.showMore"
-                                  onKeyDown={(e) => {
-                                    if (e.key === 'Enter') {
-                                      setLoadMore({
-                                        groupKey: key,
-                                        offset: searchResultItems.length || 0,
-                                      });
-                                    }
-                                  }}
-                                  onClick={() =>
-                                    setLoadMore({
-                                      groupKey: key,
-                                      offset: searchResultItems.length || 0,
-                                    })
-                                  }
-                                >
-                                  {translate('search.showMore', 'Show more')}
-                                </SearchGroupFooter>
-                              )}
-                            </Fragment>
-                          );
-                        }
-
-                        return null;
-                      })
-                    ) : isSearchLoading ? (
-                      <SearchMessage data-translation-key="search.loading">
-                        <SpinnerLoader size="26px" color="var(--search-input-icon-color)" />
-                        {translate('search.loading', 'Loading...')}
-                      </SearchMessage>
-                    ) : searchError ? (
-                      <SearchMessage data-translation-key="search.error">
-                        <CloseFilledIcon size="21px" color="var(--color-error-base)" />
-                        {translate('search.error.title', 'Oops! Something went wrong.')}
-                        <Button
-                          variant="secondary"
-                          size="small"
-                          onClick={retrySearch}
-                          icon={<ResetIcon />}
-                        >
-                          {translate('search.error.button', 'Try again')}
-                        </Button>
-                      </SearchMessage>
-                    ) : (
-                      <SearchMessage data-translation-key="search.noResults">
-                        <b>{translate('search.noResults.title', 'No results')}</b>
-                      </SearchMessage>
-                    )
-                  ) : (
-                    <>
-                      <SearchRecent
-                        onSelect={(query, index) => {
-                          telemetry.sendSearchRecentClickedMessage([
-                            {
-                              ...getBaseDataAttributes('searchRecentItem', 'search'),
-                              query,
-                              index: index.toString(),
-                              searchSessionId,
-                            },
-                          ]);
-                          setQuery(query);
-                          focusSearchInput();
-                        }}
-                      />
-                      <SearchSuggestedPages />
-                    </>
-                  )}
-                </SearchDialogBodyMainView>
-              </>
-            ) : (
-              <SearchAiDialog
-                initialMessage={query}
-                response={aiSearch.response}
-                isGeneratingResponse={aiSearch.isGeneratingResponse}
-                error={aiSearch.error}
-                resources={aiSearch.resources}
-                conversation={aiSearch.conversation}
-                setConversation={aiSearch.setConversation}
-                onMessageSent={aiSearch.askQuestion}
-                toolCalls={aiSearch.toolCalls}
-                contentSegments={aiSearch.contentSegments}
-              />
-            )}
-          </SearchDialogBody>
-          <SearchDialogFooter>
-            {mode === 'ai-dialog' ? (
-              <AiDisclaimer>
-                {translate(
-                  'search.ai.disclaimer',
-                  'AI assistant might provide incomplete or incorrect results. Verify important information.',
-                )}
-              </AiDisclaimer>
-            ) : (
-              <>
-                <SearchShortcuts>
-                  <SearchShortcut
-                    data-translation-key="search.keys.navigate"
-                    combination="Tab"
-                    text={translate('search.keys.navigate', 'to navigate')}
-                  />
-                  <SearchShortcut
-                    data-translation-key="search.keys.select"
-                    combination="⏎"
-                    text={translate('search.keys.select', 'to select')}
-                  />
-                  <SearchShortcut
-                    data-translation-key="search.keys.exit"
-                    combination="Esc"
-                    text={translate('search.keys.exit', 'to exit')}
-                  />
-                </SearchShortcuts>
-                {isSearchLoading && (
-                  <SearchLoading>
-                    <SpinnerLoader size="16px" color="var(--search-input-icon-color)" />
-                    {translate('search.loading', 'Loading...')}
-                  </SearchLoading>
-                )}
-                <SearchCancelButton
-                  data-translation-key="search.cancel"
-                  variant="secondary"
-                  size="small"
-                  onClick={handleClose}
-                >
-                  {translate('search.cancel', 'Cancel')}
-                </SearchCancelButton>
-              </>
-            )}
-          </SearchDialogFooter>
-        </SearchDialogWrapper>
-      </SearchOverlay>
-    </Portal>
-  );
-}
-
-const SearchOverlay = styled.div`
-  position: fixed;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: var(--bg-color-modal-overlay);
-  z-index: var(--z-index-overlay);
-
-  @media screen and (max-width: ${breakpoints.small}) {
-    align-items: start;
-    position: fixed;
-    overflow: hidden;
-    overscroll-behavior: none;
-  }
-`;
-
-const SearchDialogWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  width: 100vw;
-  height: 100vh;
-  background: var(--search-modal-bg-color);
-  box-shadow: var(--search-modal-box-shadow);
-  border-radius: 0;
-
-  @media screen and (max-width: ${breakpoints.small}) {
-    min-height: -webkit-fill-available;
-    min-height: 100dvh;
-    height: 100dvh;
-    width: 100vw;
-  }
-
-  @media screen and (min-width: ${breakpoints.small}) {
-    border-radius: var(--search-modal-border-radius);
-    width: min(var(--search-modal-width), 95vw);
-    min-height: min(var(--search-modal-min-height), 95vh);
-    min-width: min(var(--search-modal-min-width), 95vw);
-    max-width: 95vw;
-    max-height: 95vh;
-    height: min(var(--search-modal-min-height), 95vh);
-    resize: both;
-  }
-`;
-
-const SearchDialogHeader = styled.header`
-  display: flex;
-  align-items: center;
-  border-bottom: var(--search-modal-border);
-  background-color: var(--search-modal-header-bg-color);
-  padding: var(--search-modal-header-padding);
-`;
-
-const AiDialogHeaderWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-`;
-const AiDialogHeaderActionsWrapper = styled.div`
-  display: flex;
-  gap: var(--spacing-xxs);
-`;
-
-const AiDialogHeaderTitle = styled.span`
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  font-weight: var(--font-weight-semibold);
-  font-size: var(--font-size-lg);
-`;
-
-const SearchDialogBody = styled.div`
-  display: flex;
-  flex-direction: row-reverse;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-
-  @media screen and (max-width: ${breakpoints.small}) {
-    min-height: 0;
-  }
-`;
-
-const SearchDialogBodyMainView = styled.div`
-  flex: 2;
-  flex-grow: 2;
-  overflow-y: scroll;
-  overscroll-behavior: contain;
-  border-right: var(--search-modal-border);
-`;
-
-const SearchDialogBodyFilterView = styled.div`
-  overflow: scroll;
-  max-width: var(--search-filter-width);
-  width: 100%;
-`;
-
-const SearchDialogFooter = styled.footer`
-  display: flex;
-  gap: var(--search-modal-footer-gap);
-  padding: var(--search-modal-footer-padding);
-  border-top: var(--search-modal-border);
-`;
-
-const SearchShortcuts = styled.div`
-  display: none;
-  justify-content: flex-start;
-  align-items: center;
-  gap: var(--search-shortcuts-gap);
-
-  @media screen and (min-width: ${breakpoints.small}) {
-    display: flex;
-  }
-`;
-
-const SearchMessage = styled.div`
-  display: flex;
-  height: 40%;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  font-size: var(--search-message-font-size);
-  font-weight: var(--search-message-font-weight);
-  line-height: var(--search-message-line-height);
-  color: var(--search-message-text-color);
-  gap: var(--search-message-gap);
-`;
-
-const SearchProductTag = styled(Tag)`
-  border: none;
-  margin: var(--spacing-xs) var(--spacing-sm) !important;
-`;
-
-const SearchFilterToggleButton = styled(Button)`
-  margin-left: 0;
-`;
-
-const SearchAiButton = styled(Button)`
-  margin-left: 0;
-`;
-
-const SearchCancelButton = styled(Button)`
-  width: 100%;
-
-  @media screen and (min-width: ${breakpoints.small}) {
-    display: none;
-  }
-`;
-
-const SearchGroupTitle = styled.div`
-  border-bottom: var(--search-modal-border);
-  padding: var(--search-group-title-padding);
-  background-color: var(--search-group-title-bg-color);
-`;
-
-const SearchGroupFooter = styled.div`
-  display: flex;
-  justify-content: center;
-  padding: var(--search-group-footer-padding);
-  color: var(--search-group-footer-text-color);
-  cursor: pointer;
-`;
-
-const SearchLoading = styled.div`
-  display: none;
-  align-items: center;
-  gap: var(--spacing-xs);
-
-  @media screen and (min-width: ${breakpoints.small}) {
-    display: flex;
-  }
-`;
-
-const SearchHeaderButtons = styled.div`
-  display: flex;
-  gap: var(--search-header-buttons-gap);
-  padding-left: var(--search-header-buttons-padding-left);
-  border-left: var(--search-header-buttons-border-left);
-`;
-
-const AiDisclaimer = styled.div`
-  font-size: var(--search-ai-disclaimer-font-size);
-  line-height: var(--search-ai-disclaimer-line-height);
-  color: var(--search-ai-disclaimer-text-color);
-  margin: 0 auto;
-  text-align: center;
-`;
-
-const SearchWithAI = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  cursor: pointer;
-  gap: var(--spacing-unit);
-  padding: var(--spacing-md);
-
-  color: var(--search-item-text-color);
-  background-color: var(--search-item-bg-color);
-  text-decoration: none;
-  white-space: normal;
-  outline: none;
-  border-top: 1px solid var(--search-item-border-color);
-  border-bottom: 1px solid var(--search-item-border-color);
-  border-radius: var(--search-item-border-radius);
-
-  transition: all 0.3s ease;
-
-  ${ReturnKeyIcon} {
-    opacity: 0;
-  }
-
-  &:focus,
-  &:hover {
-    color: var(--search-item-text-color-hover);
-    background-color: var(--search-item-bg-color-hover);
-
-    ${ReturnKeyIcon} {
-      opacity: 1;
-    }
-  }
-
-  &:focus {
-    border-top: 1px solid var(--search-item-border-color-focused);
-    border-bottom: 1px solid var(--search-item-border-color-focused);
-  }
-
-  & > :first-child {
-    margin-right: var(--spacing-xs);
-  }
-`;
-
-const QueryWrapper = styled.div`
-  word-break: break-word;
-`;