From 5d881e91d40f9032b0a3d115159252f4b92fa4d6 Mon Sep 17 00:00:00 2001
From: Aviv Keller <me@aviv.sh>
Date: Thu, 13 Nov 2025 19:03:45 -0500
Subject: [PATCH 1/8] chore(orama): move some components to ui-components

---
 .../Common/Searchbox/ChatMessage/index.tsx    |   2 +-
 .../Common/Searchbox/EmptyResults/index.tsx   |  65 ---------
 .../InnerSearchboxModal/index.module.css      |  19 ---
 .../Searchbox/InnerSearchboxModal/index.tsx   |  68 ----------
 .../Searchbox/MobileTopBar/index.module.css   |  67 ----------
 .../Common/Searchbox/MobileTopBar/index.tsx   |  63 ---------
 .../Common/Searchbox/Search/index.module.css  |  78 -----------
 .../Common/Searchbox/Search/index.tsx         |  50 -------
 .../Common/Searchbox/Search/utils.ts          |  11 --
 .../Common/Searchbox/SearchItem/index.tsx     |  53 ++++----
 .../Common/Searchbox/SearchResults/index.tsx  | 126 ------------------
 .../Searchbox/SlidingChatPanel/index.tsx      |  12 +-
 .../components/Common/Searchbox/index.tsx     |  86 ++++++------
 apps/site/providers/searchboxProvider.tsx     |  37 -----
 apps/site/reducers/searchboxReducer.ts        |  54 --------
 apps/site/types/index.ts                      |   1 -
 apps/site/types/searchbox.ts                  |  24 ----
 packages/ui-components/package.json           |   2 +
 .../Search/Chat/Actions}/index.module.css     |   0
 .../src/Common/Search/Chat/Actions}/index.tsx |   4 +-
 .../Search/Chat/Input}/index.module.css       |   4 +-
 .../src/Common/Search/Chat/Input}/index.tsx   |  40 +++---
 .../src/Common/Search/Input/index.module.css  |  32 +++++
 .../src/Common/Search/Input/index.tsx         |  31 +++++
 .../src/Common/Search/Modal}/index.module.css |  32 ++---
 .../src/Common/Search/Modal/index.tsx         |  47 +++++++
 .../Search/Results/Empty}/index.module.css    |   0
 .../src/Common/Search/Results/Empty/index.tsx |  40 ++++++
 .../Search/Results/Skeleton/index.module.css  |  43 ++++++
 .../Common/Search/Results/Skeleton/index.tsx  |  35 +++++
 .../Search/Results/Tabs/index.module.css      |  50 +++++++
 .../src/Common/Search/Results/Tabs/index.tsx  |  39 ++++++
 .../Common/Search/Results}/index.module.css   |  99 +-------------
 .../src/Common/Search/Results/index.tsx       |  91 +++++++++++++
 .../ui-components/src/Common/Search/index.tsx |  22 +++
 pnpm-lock.yaml                                |   6 +
 36 files changed, 555 insertions(+), 878 deletions(-)
 delete mode 100644 apps/site/components/Common/Searchbox/EmptyResults/index.tsx
 delete mode 100644 apps/site/components/Common/Searchbox/InnerSearchboxModal/index.module.css
 delete mode 100644 apps/site/components/Common/Searchbox/InnerSearchboxModal/index.tsx
 delete mode 100644 apps/site/components/Common/Searchbox/MobileTopBar/index.module.css
 delete mode 100644 apps/site/components/Common/Searchbox/MobileTopBar/index.tsx
 delete mode 100644 apps/site/components/Common/Searchbox/Search/index.module.css
 delete mode 100644 apps/site/components/Common/Searchbox/Search/index.tsx
 delete mode 100644 apps/site/components/Common/Searchbox/Search/utils.ts
 delete mode 100644 apps/site/components/Common/Searchbox/SearchResults/index.tsx
 delete mode 100644 apps/site/providers/searchboxProvider.tsx
 delete mode 100644 apps/site/reducers/searchboxReducer.ts
 delete mode 100644 apps/site/types/searchbox.ts
 rename {apps/site/components/Common/Searchbox/ChatActions => packages/ui-components/src/Common/Search/Chat/Actions}/index.module.css (100%)
 rename {apps/site/components/Common/Searchbox/ChatActions => packages/ui-components/src/Common/Search/Chat/Actions}/index.tsx (94%)
 rename {apps/site/components/Common/Searchbox/ChatInput => packages/ui-components/src/Common/Search/Chat/Input}/index.module.css (97%)
 rename {apps/site/components/Common/Searchbox/ChatInput => packages/ui-components/src/Common/Search/Chat/Input}/index.tsx (71%)
 create mode 100644 packages/ui-components/src/Common/Search/Input/index.module.css
 create mode 100644 packages/ui-components/src/Common/Search/Input/index.tsx
 rename {apps/site/components/Common/Searchbox => packages/ui-components/src/Common/Search/Modal}/index.module.css (78%)
 create mode 100644 packages/ui-components/src/Common/Search/Modal/index.tsx
 rename {apps/site/components/Common/Searchbox/EmptyResults => packages/ui-components/src/Common/Search/Results/Empty}/index.module.css (100%)
 create mode 100644 packages/ui-components/src/Common/Search/Results/Empty/index.tsx
 create mode 100644 packages/ui-components/src/Common/Search/Results/Skeleton/index.module.css
 create mode 100644 packages/ui-components/src/Common/Search/Results/Skeleton/index.tsx
 create mode 100644 packages/ui-components/src/Common/Search/Results/Tabs/index.module.css
 create mode 100644 packages/ui-components/src/Common/Search/Results/Tabs/index.tsx
 rename {apps/site/components/Common/Searchbox/SearchResults => packages/ui-components/src/Common/Search/Results}/index.module.css (52%)
 create mode 100644 packages/ui-components/src/Common/Search/Results/index.tsx
 create mode 100644 packages/ui-components/src/Common/Search/index.tsx

diff --git a/apps/site/components/Common/Searchbox/ChatMessage/index.tsx b/apps/site/components/Common/Searchbox/ChatMessage/index.tsx
index 8b94f31ef9f96..8fb1d537ccfdb 100644
--- a/apps/site/components/Common/Searchbox/ChatMessage/index.tsx
+++ b/apps/site/components/Common/Searchbox/ChatMessage/index.tsx
@@ -1,8 +1,8 @@
+import ChatActions from '@node-core/ui-components/Common/Search/Chat/Actions';
 import type { Interaction } from '@orama/core';
 import { ChatInteractions } from '@orama/ui/components';
 import type { FC } from 'react';
 
-import { ChatActions } from '../ChatActions';
 import ChatSources from '../ChatSources';
 import styles from './index.module.css';
 
diff --git a/apps/site/components/Common/Searchbox/EmptyResults/index.tsx b/apps/site/components/Common/Searchbox/EmptyResults/index.tsx
deleted file mode 100644
index 9671ed04ae32f..0000000000000
--- a/apps/site/components/Common/Searchbox/EmptyResults/index.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-'use client';
-
-import { SparklesIcon } from '@heroicons/react/24/outline';
-import { SearchResults, Suggestions } from '@orama/ui/components';
-import { useTranslations } from 'next-intl';
-import { type FC } from 'react';
-
-import { useSearchbox } from '#site/providers/searchboxProvider';
-
-import styles from './index.module.css';
-
-export const EmptyResults: FC = () => {
-  const t = useTranslations();
-  const searchbox = useSearchbox();
-  const isSearchMode = searchbox?.mode === 'search';
-
-  return (
-    <SearchResults.NoResults>
-      {term => (
-        <>
-          {term ? (
-            <div className={styles.noResultsWrapper}>
-              <p>
-                {t('components.search.noResultsFoundFor')} "{term}"
-              </p>
-            </div>
-          ) : (
-            <Suggestions.Wrapper className={styles.suggestionsWrapper}>
-              <p className={styles.suggestionsTitle}>
-                {t('components.search.suggestions')}
-              </p>
-              <Suggestions.Item
-                onClick={() => searchbox?.switchTo('chat')}
-                tabIndex={isSearchMode ? 0 : -1}
-                aria-hidden={!isSearchMode}
-                className={styles.suggestionItem}
-              >
-                <SparklesIcon />
-                {t('components.search.suggestionOne')}
-              </Suggestions.Item>
-              <Suggestions.Item
-                onClick={() => searchbox?.switchTo('chat')}
-                tabIndex={isSearchMode ? 0 : -1}
-                aria-hidden={!isSearchMode}
-                className={styles.suggestionItem}
-              >
-                <SparklesIcon />
-                {t('components.search.suggestionTwo')}
-              </Suggestions.Item>
-              <Suggestions.Item
-                tabIndex={isSearchMode ? 0 : -1}
-                aria-hidden={!isSearchMode}
-                onClick={() => searchbox?.switchTo('chat')}
-                className={styles.suggestionItem}
-              >
-                <SparklesIcon />
-                {t('components.search.suggestionThree')}
-              </Suggestions.Item>
-            </Suggestions.Wrapper>
-          )}
-        </>
-      )}
-    </SearchResults.NoResults>
-  );
-};
diff --git a/apps/site/components/Common/Searchbox/InnerSearchboxModal/index.module.css b/apps/site/components/Common/Searchbox/InnerSearchboxModal/index.module.css
deleted file mode 100644
index 211eedd672b8d..0000000000000
--- a/apps/site/components/Common/Searchbox/InnerSearchboxModal/index.module.css
+++ /dev/null
@@ -1,19 +0,0 @@
-@reference "../../../../styles/index.css";
-
-.mobileChatContainer {
-  @apply flex
-    grow
-    flex-col
-    overflow-hidden
-    px-4
-    pb-4;
-}
-
-.mobileChatTop {
-  @apply grow
-    overflow-hidden;
-}
-
-.mobileChatBottom {
-  @apply mt-4;
-}
diff --git a/apps/site/components/Common/Searchbox/InnerSearchboxModal/index.tsx b/apps/site/components/Common/Searchbox/InnerSearchboxModal/index.tsx
deleted file mode 100644
index 99b3385250a70..0000000000000
--- a/apps/site/components/Common/Searchbox/InnerSearchboxModal/index.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-'use client';
-import type { FC, PropsWithChildren } from 'react';
-import { useEffect, useState, useRef } from 'react';
-
-import { useSearchbox } from '#site/providers/searchboxProvider';
-
-import { ChatInput } from '../ChatInput';
-import { ChatInteractionsContainer } from '../ChatInteractions';
-import { Footer } from '../Footer';
-import { MobileTopBar } from '../MobileTopBar';
-import { Search } from '../Search';
-import { SlidingChatPanel } from '../SlidingChatPanel';
-import styles from './index.module.css';
-
-export const InnerSearchboxModal: FC<PropsWithChildren> = () => {
-  const searchbox = useSearchbox();
-  const [isMobileScreen, setIsMobileScreen] = useState(false);
-  const searchInputRef = useRef<HTMLInputElement>(null);
-
-  const displaySearch =
-    !isMobileScreen || (isMobileScreen && searchbox?.mode === 'search');
-
-  useEffect(() => {
-    const checkScreenSize = () => {
-      setIsMobileScreen(window.innerWidth < 1024);
-    };
-    checkScreenSize();
-    window.addEventListener('resize', checkScreenSize);
-    return () => {
-      window.removeEventListener('resize', checkScreenSize);
-    };
-  }, []);
-
-  return (
-    <>
-      {isMobileScreen && (
-        <MobileTopBar
-          isChatOpen={searchbox?.mode === 'chat'}
-          onSelect={searchbox?.switchTo}
-        />
-      )}
-      {displaySearch && <Search ref={searchInputRef} />}
-      {isMobileScreen && searchbox?.mode === 'chat' && (
-        <>
-          <div className={styles.mobileChatContainer}>
-            <div className={styles.mobileChatTop}>
-              <ChatInteractionsContainer />
-            </div>
-            <div className={styles.mobileChatBottom}>
-              <ChatInput />
-            </div>
-          </div>
-          <Footer />
-        </>
-      )}
-      {!isMobileScreen && searchbox?.mode === 'chat' && (
-        <SlidingChatPanel
-          open={searchbox?.isChatOpen}
-          onClose={() => {
-            searchbox?.closeChatAndReset(() => {
-              searchInputRef.current?.focus();
-            });
-          }}
-        />
-      )}
-    </>
-  );
-};
diff --git a/apps/site/components/Common/Searchbox/MobileTopBar/index.module.css b/apps/site/components/Common/Searchbox/MobileTopBar/index.module.css
deleted file mode 100644
index 88c270ac7bff7..0000000000000
--- a/apps/site/components/Common/Searchbox/MobileTopBar/index.module.css
+++ /dev/null
@@ -1,67 +0,0 @@
-@reference "../../../../styles/index.css";
-
-.topBar {
-  @apply relative
-    flex
-    justify-center
-    p-4
-    lg:hidden;
-}
-
-.topBarArrow {
-  @apply absolute
-    top-1/2
-    left-4
-    -translate-y-1/2
-    text-neutral-900
-    dark:text-neutral-200;
-
-  svg {
-    @apply size-4;
-  }
-}
-
-.topBarTabs {
-  @apply flex
-    rounded-4xl
-    bg-neutral-200
-    p-1
-    text-sm
-    text-neutral-900
-    dark:bg-neutral-900
-    dark:text-neutral-200;
-}
-
-.topBarTab {
-  @apply flex
-    items-center
-    gap-1
-    px-4
-    py-1;
-
-  svg {
-    @apply size-4;
-  }
-}
-
-.topBarTabActive {
-  @apply relative
-    z-10
-    text-white
-    before:absolute
-    before:inset-0
-    before:z-[-1]
-    before:rounded-4xl
-    before:bg-black
-    motion-safe:transition-colors
-    dark:text-neutral-900
-    dark:before:bg-white;
-
-  &.topBarTabAnimated:first-of-type {
-    @apply before:animate-slide-to-left;
-  }
-
-  &.topBarTabAnimated:last-of-type {
-    @apply before:animate-slide-to-right;
-  }
-}
diff --git a/apps/site/components/Common/Searchbox/MobileTopBar/index.tsx b/apps/site/components/Common/Searchbox/MobileTopBar/index.tsx
deleted file mode 100644
index 8aab4ccb8dbf7..0000000000000
--- a/apps/site/components/Common/Searchbox/MobileTopBar/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-'use client';
-
-import {
-  MagnifyingGlassIcon,
-  ArrowLeftIcon,
-  SparklesIcon,
-} from '@heroicons/react/24/solid';
-import { Modal } from '@orama/ui/components/Modal';
-import classNames from 'classnames';
-import type { FC } from 'react';
-import { useState } from 'react';
-
-import '@orama/ui/styles.css';
-
-import styles from './index.module.css';
-
-export const MobileTopBar: FC<{
-  isChatOpen: boolean;
-  onSelect?: (mode: 'search' | 'chat') => void;
-}> = ({ isChatOpen, onSelect }) => {
-  const [animated, setAnimated] = useState(false);
-
-  function selectMode(mode: 'search' | 'chat') {
-    onSelect?.(mode);
-
-    if (!animated) {
-      setAnimated(true);
-    }
-  }
-
-  return (
-    <div className={styles.topBar}>
-      <Modal.Close
-        className={styles.topBarArrow}
-        aria-label="Close search modal"
-      >
-        <ArrowLeftIcon />
-      </Modal.Close>
-      <div className={styles.topBarTabs}>
-        <button
-          className={classNames(styles.topBarTab, {
-            [styles.topBarTabActive]: !isChatOpen,
-            [styles.topBarTabAnimated]: animated,
-          })}
-          onClick={() => selectMode('search')}
-        >
-          <span>Search</span>
-          <MagnifyingGlassIcon />
-        </button>
-        <button
-          className={classNames(styles.topBarTab, {
-            [styles.topBarTabActive]: isChatOpen,
-            [styles.topBarTabAnimated]: animated,
-          })}
-          onClick={() => selectMode('chat')}
-        >
-          <SparklesIcon />
-          <span>Ask AI</span>
-        </button>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/site/components/Common/Searchbox/Search/index.module.css b/apps/site/components/Common/Searchbox/Search/index.module.css
deleted file mode 100644
index 0be466bb89498..0000000000000
--- a/apps/site/components/Common/Searchbox/Search/index.module.css
+++ /dev/null
@@ -1,78 +0,0 @@
-@reference "../../../../styles/index.css";
-
-.searchContainer {
-  @apply flex
-    grow
-    flex-col
-    overflow-hidden;
-}
-
-.searchInputWrapper {
-  @apply relative;
-
-  svg {
-    @apply absolute
-      top-1/2
-      left-3
-      size-4
-      -translate-y-1/2
-      text-neutral-500
-      dark:text-neutral-600;
-  }
-}
-
-.searchInput {
-  @apply w-full
-    border-b
-    border-neutral-200
-    bg-transparent
-    py-4
-    pr-4
-    pl-9
-    text-sm
-    text-neutral-900
-    placeholder:text-neutral-500
-    focus:outline-none
-    dark:border-neutral-900
-    dark:text-neutral-200
-    dark:placeholder:text-neutral-600;
-}
-
-.chatButtonWrapper {
-  @apply hidden
-    border-b
-    border-neutral-200
-    p-2
-    lg:block
-    dark:border-neutral-900;
-
-  svg {
-    @apply size-4;
-  }
-}
-
-.chatButton {
-  @apply flex
-    w-full
-    cursor-pointer
-    items-center
-    gap-2
-    rounded-lg
-    border
-    border-transparent
-    bg-transparent
-    p-3
-    text-sm
-    duration-300
-    hover:bg-neutral-300
-    focus-visible:border-green-600
-    focus-visible:outline-none
-    motion-safe:transition-colors
-    dark:hover:bg-neutral-900
-    dark:focus-visible:border-green-400;
-}
-
-.chatButtonWithSearch {
-  @apply bg-neutral-300
-    dark:bg-neutral-900;
-}
diff --git a/apps/site/components/Common/Searchbox/Search/index.tsx b/apps/site/components/Common/Searchbox/Search/index.tsx
deleted file mode 100644
index 3c006d0be61ea..0000000000000
--- a/apps/site/components/Common/Searchbox/Search/index.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client';
-
-import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
-import { SearchInput } from '@orama/ui/components';
-import { useTranslations } from 'next-intl';
-import type { FC, PropsWithChildren } from 'react';
-
-import { DEFAULT_ORAMA_QUERY_PARAMS } from '#site/next.constants.mjs';
-import { useSearchbox } from '#site/providers/searchboxProvider';
-
-import { Footer } from '../Footer';
-import { SearchResultsWrapper } from '../SearchResults';
-import styles from './index.module.css';
-
-type SearchProps = PropsWithChildren & React.RefAttributes<HTMLInputElement>;
-
-export const Search: FC<SearchProps> = ({ ref }) => {
-  const t = useTranslations();
-  const searchbox = useSearchbox();
-  const isSearchMode = searchbox?.mode === 'search';
-
-  return (
-    <div className={styles.searchContainer}>
-      <SearchInput.Wrapper className={styles.searchInputWrapper}>
-        <MagnifyingGlassIcon />
-        <SearchInput.Input
-          inputId="orama-doc-search"
-          ariaLabel={t('components.search.searchPlaceholder')}
-          placeholder={t('components.search.searchPlaceholder')}
-          tabIndex={isSearchMode ? 0 : -1}
-          aria-hidden={!isSearchMode}
-          className={styles.searchInput}
-          searchParams={{
-            ...DEFAULT_ORAMA_QUERY_PARAMS,
-            groupBy: {
-              properties: ['siteSection'],
-            },
-            facets: {
-              siteSection: {},
-            },
-          }}
-          ref={ref}
-        />
-      </SearchInput.Wrapper>
-
-      <SearchResultsWrapper />
-      <Footer />
-    </div>
-  );
-};
diff --git a/apps/site/components/Common/Searchbox/Search/utils.ts b/apps/site/components/Common/Searchbox/Search/utils.ts
deleted file mode 100644
index 5fc41ceac70f1..0000000000000
--- a/apps/site/components/Common/Searchbox/Search/utils.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const uppercaseFirst = (word: string) =>
-  word.charAt(0).toUpperCase() + word.slice(1);
-
-export const getFormattedPath = (path: string, title: string) =>
-  `${path
-    .replace(/#.+$/, '')
-    .split('/')
-    .map(element => element.replaceAll('-', ' '))
-    .map(element => uppercaseFirst(element))
-    .filter(Boolean)
-    .join(' > ')} — ${title}`;
diff --git a/apps/site/components/Common/Searchbox/SearchItem/index.tsx b/apps/site/components/Common/Searchbox/SearchItem/index.tsx
index 32cb73025e0d7..7be5d4d704191 100644
--- a/apps/site/components/Common/Searchbox/SearchItem/index.tsx
+++ b/apps/site/components/Common/Searchbox/SearchItem/index.tsx
@@ -2,9 +2,7 @@
 
 import { DocumentTextIcon } from '@heroicons/react/24/outline';
 import { SearchResults } from '@orama/ui/components';
-import { useReducer, type FC } from 'react';
-
-import searchReducer, { searchState } from '#site/reducers/searchboxReducer';
+import type { FC } from 'react';
 
 import { DocumentLink } from '../DocumentLink';
 import type { Document } from '../DocumentLink';
@@ -13,32 +11,29 @@ import { getFormattedPath } from './utils';
 
 type SearchItemProps = {
   document: Document;
+  mode?: 'search' | 'chat';
 };
 
-export const SearchItem: FC<SearchItemProps> = ({ document }) => {
-  const [state] = useReducer(searchReducer, searchState);
-  const isSearchMode = state.mode === 'search';
-  return (
-    <SearchResults.Item className={styles.searchResultsItem}>
-      <DocumentLink
-        document={document as Document}
-        tabIndex={isSearchMode ? 0 : -1}
-        aria-hidden={!isSearchMode}
-        data-focus-on-arrow-nav
-      >
-        <DocumentTextIcon />
-        <div>
-          {typeof document?.pageSectionTitle === 'string' && (
-            <h3>{document.pageSectionTitle}</h3>
+export const SearchItem: FC<SearchItemProps> = ({ document, mode }) => (
+  <SearchResults.Item className={styles.searchResultsItem}>
+    <DocumentLink
+      document={document as Document}
+      tabIndex={mode === 'search' ? 0 : -1}
+      aria-hidden={mode === 'chat'}
+      data-focus-on-arrow-nav
+    >
+      <DocumentTextIcon />
+      <div>
+        {typeof document?.pageSectionTitle === 'string' && (
+          <h3>{document.pageSectionTitle}</h3>
+        )}
+        {typeof document?.pageSectionTitle === 'string' &&
+          typeof document?.path === 'string' && (
+            <p className={styles.searchResultsItemDescription}>
+              {getFormattedPath(document.path, document.pageSectionTitle)}
+            </p>
           )}
-          {typeof document?.pageSectionTitle === 'string' &&
-            typeof document?.path === 'string' && (
-              <p className={styles.searchResultsItemDescription}>
-                {getFormattedPath(document.path, document.pageSectionTitle)}
-              </p>
-            )}
-        </div>
-      </DocumentLink>
-    </SearchResults.Item>
-  );
-};
+      </div>
+    </DocumentLink>
+  </SearchResults.Item>
+);
diff --git a/apps/site/components/Common/Searchbox/SearchResults/index.tsx b/apps/site/components/Common/Searchbox/SearchResults/index.tsx
deleted file mode 100644
index a2f8f9529d94a..0000000000000
--- a/apps/site/components/Common/Searchbox/SearchResults/index.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-'use client';
-
-import { SparklesIcon } from '@heroicons/react/24/outline';
-import { FacetTabs, SearchResults, SlidingPanel } from '@orama/ui/components';
-import { useSearch } from '@orama/ui/hooks/useSearch';
-import classNames from 'classnames';
-import { useTranslations } from 'next-intl';
-import { type FC } from 'react';
-
-import { DEFAULT_ORAMA_QUERY_PARAMS } from '#site/next.constants.mjs';
-import { useSearchbox } from '#site/providers/searchboxProvider';
-
-import styles from './index.module.css';
-import type { Document } from '../DocumentLink';
-import { EmptyResults } from '../EmptyResults';
-import { SearchItem } from '../SearchItem';
-
-export const SearchResultsWrapper: FC = () => {
-  const t = useTranslations();
-  const {
-    context: { searchTerm, selectedFacet },
-  } = useSearch();
-  const searchbox = useSearchbox();
-  const isSearchMode = searchbox?.mode === 'search';
-
-  return (
-    <div className={styles.searchResultsContainer}>
-      <div className={styles.chatButtonWrapper}>
-        <SlidingPanel.Trigger
-          onClick={() => searchbox?.switchTo('chat')}
-          className={classNames(styles.chatButton, {
-            [styles.chatButtonWithSearch]: searchTerm,
-          })}
-          tabIndex={isSearchMode ? 0 : -1}
-          aria-hidden={!isSearchMode}
-          initialPrompt={searchTerm || undefined}
-          data-focus-on-arrow-nav
-        >
-          <SparklesIcon />
-          <span>
-            {searchTerm ? `${searchTerm} - ` : ''}
-            {t('components.search.chatButtonLabel')}
-          </span>
-        </SlidingPanel.Trigger>
-      </div>
-
-      <div className={styles.searchResultsWrapper}>
-        <SearchResults.Wrapper>
-          <FacetTabs.Wrapper className={styles.facetTabsWrapper}>
-            <FacetTabs.List className={styles.facetTabsList}>
-              {(group, isSelected) => (
-                <>
-                  <FacetTabs.Item
-                    isSelected={group.name === selectedFacet}
-                    group={group}
-                    filterBy="siteSection"
-                    searchParams={{
-                      ...DEFAULT_ORAMA_QUERY_PARAMS,
-                      term: searchTerm ?? '',
-                    }}
-                    tabIndex={isSearchMode ? 0 : -1}
-                    aria-hidden={!isSearchMode}
-                    className={classNames(
-                      isSelected && styles.facetTabItemSelected,
-                      styles.facetTabItem
-                    )}
-                  >
-                    {group.name}
-                    <span className={styles.facetTabItemCount}>
-                      ({group.count})
-                    </span>
-                  </FacetTabs.Item>
-                </>
-              )}
-            </FacetTabs.List>
-          </FacetTabs.Wrapper>
-
-          <SearchResults.Loading>
-            <div className={styles.skeletonWrapper}>
-              {[...Array(3)].map((_, index) => (
-                <div key={index} className={styles.skeletonItem}>
-                  <div
-                    className={classNames(
-                      styles.skeletonAnim,
-                      styles.skeletonAvatar
-                    )}
-                  />
-                  <div className={styles.skeletonText}>
-                    <div
-                      className={classNames(
-                        styles.skeletonAnim,
-                        styles.skeletonLineShort
-                      )}
-                    />
-                    <div
-                      className={classNames(
-                        styles.skeletonAnim,
-                        styles.skeletonLineLong
-                      )}
-                    />
-                  </div>
-                </div>
-              ))}
-            </div>
-          </SearchResults.Loading>
-
-          <EmptyResults />
-
-          <SearchResults.GroupsWrapper
-            className={styles.searchResultsGroupWrapper}
-            groupBy="siteSection"
-          >
-            {group => (
-              <div key={group.name} className={styles.searchResultsGroup}>
-                <h2 className={styles.searchResultsGroupTitle}>{group.name}</h2>
-                <SearchResults.GroupList group={group}>
-                  {hit => <SearchItem document={hit.document as Document} />}
-                </SearchResults.GroupList>
-              </div>
-            )}
-          </SearchResults.GroupsWrapper>
-        </SearchResults.Wrapper>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/site/components/Common/Searchbox/SlidingChatPanel/index.tsx b/apps/site/components/Common/Searchbox/SlidingChatPanel/index.tsx
index 94a7b1acb3a76..e9a3c68a5c19f 100644
--- a/apps/site/components/Common/Searchbox/SlidingChatPanel/index.tsx
+++ b/apps/site/components/Common/Searchbox/SlidingChatPanel/index.tsx
@@ -1,11 +1,11 @@
 'use client';
 
 import { XMarkIcon } from '@heroicons/react/24/solid';
+import ChatInput from '@node-core/ui-components/Common/Search/Chat/Input/index.jsx';
 import { SlidingPanel } from '@orama/ui/components';
 import { useTranslations } from 'next-intl';
 import type { FC, PropsWithChildren } from 'react';
 
-import { ChatInput } from '../ChatInput';
 import styles from './index.module.css';
 import { ChatInteractionsContainer } from '../ChatInteractions';
 
@@ -37,7 +37,15 @@ export const SlidingChatPanel: FC<SlidingChatPanelProps> = ({
           <div className={styles.slidingPanelInner}>
             <ChatInteractionsContainer />
             <div className={styles.slidingPanelBottom}>
-              <ChatInput />
+              <ChatInput
+                suggestions={[
+                  t('components.search.suggestionOne'),
+                  t('components.search.suggestionTwo'),
+                  t('components.search.suggestionThree'),
+                ]}
+                placeholder={t('components.search.chatPlaceholder')}
+                disclaimer={t('components.search.disclaimer')}
+              />
             </div>
           </div>
         </SlidingPanel.Content>
diff --git a/apps/site/components/Common/Searchbox/index.tsx b/apps/site/components/Common/Searchbox/index.tsx
index 1077e42274838..96d82ca827f0c 100644
--- a/apps/site/components/Common/Searchbox/index.tsx
+++ b/apps/site/components/Common/Searchbox/index.tsx
@@ -1,58 +1,56 @@
 'use client';
 
-import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
-import { SearchRoot, ChatRoot, Modal } from '@orama/ui/components';
+import Search from '@node-core/ui-components/Common/Search';
+import SearchModal from '@node-core/ui-components/Common/Search/Modal';
 import { useTranslations } from 'next-intl';
-import type { FC } from 'react';
+import { useState, type FC } from 'react';
 
-import '@orama/ui/styles.css';
-import { SearchboxProvider } from '#site/providers/searchboxProvider';
+import { DEFAULT_ORAMA_QUERY_PARAMS } from '#site/next.constants.mjs';
 
-import styles from './index.module.css';
-import { InnerSearchboxModal } from './InnerSearchboxModal';
+import type { Document } from './DocumentLink';
+import { Footer } from './Footer';
 import { oramaClient } from './orama-client';
+import { SearchItem } from './SearchItem';
+import { SlidingChatPanel } from './SlidingChatPanel';
 
 const Searchbox: FC = () => {
   const t = useTranslations();
+  const [mode, setMode] = useState<'chat' | 'search'>('search');
 
   return (
-    <SearchboxProvider>
-      <div className={styles.searchboxContainer}>
-        <Modal.Root>
-          <Modal.Trigger
-            type="button"
-            disabled={!oramaClient}
-            enableCmdK
-            className={styles.searchButton}
-          >
-            <div className={styles.searchButtonContent}>
-              <MagnifyingGlassIcon />
-              {t('components.search.searchPlaceholder')}
-            </div>
-            <span className={styles.searchButtonShortcut}>⌘ K</span>
-          </Modal.Trigger>
-
-          <Modal.Wrapper
-            closeOnOutsideClick
-            closeOnEscape
-            className={styles.modalWrapper}
-          >
-            <SearchRoot client={oramaClient}>
-              <ChatRoot
-                client={oramaClient}
-                askOptions={{ throttle_delay: 50 }}
-              >
-                <Modal.Inner className={styles.modalInner}>
-                  <Modal.Content className={styles.modalContent}>
-                    <InnerSearchboxModal />
-                  </Modal.Content>
-                </Modal.Inner>
-              </ChatRoot>
-            </SearchRoot>
-          </Modal.Wrapper>
-        </Modal.Root>
-      </div>
-    </SearchboxProvider>
+    <SearchModal
+      client={oramaClient}
+      placeholder={t('components.search.searchPlaceholder')}
+    >
+      <Search
+        input={{
+          placeholder: t('components.search.searchPlaceholder'),
+          ariaLabel: t('components.search.searchPlaceholder'),
+        }}
+        results={{
+          suggestions: [
+            t('components.search.suggestionOne'),
+            t('components.search.suggestionTwo'),
+            t('components.search.suggestionThree'),
+          ],
+          suggestionsTitle: t('components.search.suggestions'),
+          noResultsTitle: t('components.search.noResultsFoundFor'),
+          chatLabel: t('components.search.chatButtonLabel'),
+          onChat: () => setMode('chat'),
+          onHit: hit => (
+            <SearchItem document={hit.document as Document} mode={mode} />
+          ),
+        }}
+        tabIndex={mode === 'search' ? 0 : -1}
+        aria-hidden={mode === 'chat'}
+        searchParams={DEFAULT_ORAMA_QUERY_PARAMS}
+      />
+      <Footer />
+      <SlidingChatPanel
+        open={mode === 'chat'}
+        onClose={() => setMode('search')}
+      />
+    </SearchModal>
   );
 };
 
diff --git a/apps/site/providers/searchboxProvider.tsx b/apps/site/providers/searchboxProvider.tsx
deleted file mode 100644
index 25ac547e9f313..0000000000000
--- a/apps/site/providers/searchboxProvider.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client';
-
-import type { FC, PropsWithChildren } from 'react';
-import { createContext, useContext, useReducer } from 'react';
-
-import searchReducer, {
-  searchState,
-  getActions,
-} from '#site/reducers/searchboxReducer';
-import type * as Types from '#site/types/searchbox';
-
-type SearchboxContextType =
-  | (Types.SearchboxState & Types.SearchboxDispatchActions)
-  | null;
-
-const SearchboxContext = createContext<SearchboxContextType>(null);
-
-export const SearchboxProvider: FC<PropsWithChildren> = ({ children }) => {
-  const [state, dispatch] = useReducer(searchReducer, searchState);
-  const actions = getActions(dispatch);
-
-  const contextValue: SearchboxContextType = {
-    ...state,
-    ...actions,
-  };
-
-  return (
-    <SearchboxContext.Provider value={contextValue}>
-      {children}
-    </SearchboxContext.Provider>
-  );
-};
-
-export const useSearchbox = (): SearchboxContextType => {
-  const context = useContext(SearchboxContext);
-  return context;
-};
diff --git a/apps/site/reducers/searchboxReducer.ts b/apps/site/reducers/searchboxReducer.ts
deleted file mode 100644
index 576f19dfa312c..0000000000000
--- a/apps/site/reducers/searchboxReducer.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { Dispatch } from 'react';
-
-import type * as Types from '#site/types/searchbox';
-
-export const searchState: Types.SearchboxState = {
-  // Default mode is search
-  mode: 'search',
-  // Chat panel starts closed
-  isChatOpen: false,
-};
-
-export const getActions = (
-  dispatch: Dispatch<Types.SearchboxAction>
-): Types.SearchboxDispatchActions => ({
-  setMode: payload => dispatch({ type: 'SET_MODE', payload }),
-  setChatOpen: payload => dispatch({ type: 'SET_CHAT_OPEN', payload }),
-  closeChatAndReset: (onComplete?: () => void) =>
-    dispatch({
-      type: 'CLOSE_CHAT_AND_RESET',
-      payload: { onComplete },
-    }),
-  switchTo: payload => dispatch({ type: 'SWITCH_TO', payload }),
-});
-
-const reducer = (
-  state: Types.SearchboxState,
-  action: Types.SearchboxAction
-): Types.SearchboxState => {
-  switch (action.type) {
-    case 'SET_MODE':
-      return { ...state, mode: action.payload };
-    case 'SET_CHAT_OPEN':
-      return { ...state, isChatOpen: action.payload };
-    case 'CLOSE_CHAT_AND_RESET':
-      if (action.payload?.onComplete) {
-        setTimeout(action.payload.onComplete, 0);
-      }
-      return {
-        ...state,
-        isChatOpen: false,
-        mode: 'search',
-      };
-    case 'SWITCH_TO':
-      return {
-        ...state,
-        mode: action.payload,
-        isChatOpen: action.payload === 'chat',
-      };
-    default:
-      return state;
-  }
-};
-
-export default reducer;
diff --git a/apps/site/types/index.ts b/apps/site/types/index.ts
index 23ed74f0acf4c..35643a647dbbe 100644
--- a/apps/site/types/index.ts
+++ b/apps/site/types/index.ts
@@ -16,4 +16,3 @@ export * from './download';
 export * from './userAgent';
 export * from './vulnerabilities';
 export * from './page';
-export * from './searchbox';
diff --git a/apps/site/types/searchbox.ts b/apps/site/types/searchbox.ts
deleted file mode 100644
index bb013be28f1ae..0000000000000
--- a/apps/site/types/searchbox.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export type SearchboxMode = 'search' | 'chat';
-
-export type SearchboxState = {
-  // The current mode (search or chat)
-  mode: SearchboxMode;
-  // Whether chat panel is open (for desktop)
-  isChatOpen: boolean;
-};
-
-export type SearchboxAction =
-  | { type: 'SET_MODE'; payload: SearchboxMode }
-  | { type: 'SET_CHAT_OPEN'; payload: boolean }
-  | {
-      type: 'CLOSE_CHAT_AND_RESET';
-      payload?: { onComplete?: () => void };
-    }
-  | { type: 'SWITCH_TO'; payload: SearchboxMode };
-
-export type SearchboxDispatchActions = {
-  setMode: (mode: SearchboxMode) => void;
-  setChatOpen: (isOpen: boolean) => void;
-  closeChatAndReset: (onComplete?: () => void) => void;
-  switchTo: (mode: SearchboxMode) => void;
-};
diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index 7100f1117a1fa..8c51a373a3a9f 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
+    "@orama/ui": "^1.3.2",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "~2.1.16",
@@ -52,6 +53,7 @@
     "tailwindcss": "catalog:"
   },
   "devDependencies": {
+    "@orama/core": "^1.2.13",
     "@storybook/addon-styling-webpack": "^2.0.0",
     "@storybook/addon-themes": "^10.0.2",
     "@storybook/addon-webpack5-compiler-swc": "^4.0.1",
diff --git a/apps/site/components/Common/Searchbox/ChatActions/index.module.css b/packages/ui-components/src/Common/Search/Chat/Actions/index.module.css
similarity index 100%
rename from apps/site/components/Common/Searchbox/ChatActions/index.module.css
rename to packages/ui-components/src/Common/Search/Chat/Actions/index.module.css
diff --git a/apps/site/components/Common/Searchbox/ChatActions/index.tsx b/packages/ui-components/src/Common/Search/Chat/Actions/index.tsx
similarity index 94%
rename from apps/site/components/Common/Searchbox/ChatActions/index.tsx
rename to packages/ui-components/src/Common/Search/Chat/Actions/index.tsx
index 79f25bfd0e840..eab95a852512d 100644
--- a/apps/site/components/Common/Searchbox/ChatActions/index.tsx
+++ b/packages/ui-components/src/Common/Search/Chat/Actions/index.tsx
@@ -18,7 +18,7 @@ type ChatActionsProps = {
   interaction: Interaction;
 };
 
-export const ChatActions: FC<ChatActionsProps> = ({ interaction }) => {
+const ChatActions: FC<ChatActionsProps> = ({ interaction }) => {
   const [isDisliked, setIsDisliked] = useState(false);
 
   const dislikeMessage = () => setIsDisliked(!isDisliked);
@@ -68,3 +68,5 @@ export const ChatActions: FC<ChatActionsProps> = ({ interaction }) => {
     </div>
   );
 };
+
+export default ChatActions;
diff --git a/apps/site/components/Common/Searchbox/ChatInput/index.module.css b/packages/ui-components/src/Common/Search/Chat/Input/index.module.css
similarity index 97%
rename from apps/site/components/Common/Searchbox/ChatInput/index.module.css
rename to packages/ui-components/src/Common/Search/Chat/Input/index.module.css
index 9334c1668cd84..568b6fa540741 100644
--- a/apps/site/components/Common/Searchbox/ChatInput/index.module.css
+++ b/packages/ui-components/src/Common/Search/Chat/Input/index.module.css
@@ -63,11 +63,11 @@
   @apply mb-4
     flex
     items-center
+    justify-center
     gap-2
     overflow-x-auto
     px-1
-    text-sm
-    lg:justify-center;
+    text-sm;
 
   &::-webkit-scrollbar {
     @apply hidden;
diff --git a/apps/site/components/Common/Searchbox/ChatInput/index.tsx b/packages/ui-components/src/Common/Search/Chat/Input/index.tsx
similarity index 71%
rename from apps/site/components/Common/Searchbox/ChatInput/index.tsx
rename to packages/ui-components/src/Common/Search/Chat/Input/index.tsx
index 013d86518b611..85ce165ada01a 100644
--- a/apps/site/components/Common/Searchbox/ChatInput/index.tsx
+++ b/packages/ui-components/src/Common/Search/Chat/Input/index.tsx
@@ -4,26 +4,27 @@ import { PaperAirplaneIcon } from '@heroicons/react/20/solid';
 import { PauseCircleIcon } from '@heroicons/react/24/solid';
 import { PromptTextArea, Suggestions } from '@orama/ui/components';
 import { useChat } from '@orama/ui/hooks';
-import { useTranslations } from 'next-intl';
-import type { FC } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import { useEffect, useRef } from 'react';
 
 import styles from './index.module.css';
 
-export const ChatInput: FC = () => {
-  const t = useTranslations();
+type ChatInputProps = {
+  suggestions: Array<string>;
+  placeholder: string;
+  disclaimer: string;
+};
+
+const ChatInput: FC<PropsWithChildren<ChatInputProps>> = ({
+  suggestions,
+  placeholder,
+  disclaimer,
+}) => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
   const {
     context: { interactions },
   } = useChat();
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  const suggestions = [
-    t('components.search.suggestionOne'),
-    t('components.search.suggestionTwo'),
-    t('components.search.suggestionThree'),
-  ];
-
-  const hasInteractions = !!interactions?.length;
 
   useEffect(() => {
     const timeoutId = setTimeout(() => {
@@ -37,13 +38,10 @@ export const ChatInput: FC = () => {
 
   return (
     <>
-      {!hasInteractions && (
+      {!!interactions?.length && (
         <Suggestions.Wrapper className={styles.suggestionsWrapper}>
           {suggestions.map(suggestion => (
-            <Suggestions.Item
-              className={styles.suggestionsItem}
-              key={suggestion}
-            >
+            <Suggestions.Item className={styles.suggestionsItem}>
               {suggestion}
             </Suggestions.Item>
           ))}
@@ -54,7 +52,7 @@ export const ChatInput: FC = () => {
           <PromptTextArea.Field
             id="orama-chat-input"
             name="chat-input"
-            placeholder={t('components.search.chatPlaceholder')}
+            placeholder={placeholder}
             rows={1}
             maxLength={500}
             autoFocus
@@ -69,9 +67,11 @@ export const ChatInput: FC = () => {
           </PromptTextArea.Button>
         </PromptTextArea.Wrapper>
         <div className={styles.textareaFooter}>
-          <small>{t('components.search.disclaimer')}</small>
+          <small>{disclaimer}</small>
         </div>
       </div>
     </>
   );
 };
+
+export default ChatInput;
diff --git a/packages/ui-components/src/Common/Search/Input/index.module.css b/packages/ui-components/src/Common/Search/Input/index.module.css
new file mode 100644
index 0000000000000..af4e9f049a631
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Input/index.module.css
@@ -0,0 +1,32 @@
+@reference "../../../styles/index.css";
+
+.searchInputWrapper {
+  @apply relative;
+
+  svg {
+    @apply absolute
+      top-1/2
+      left-3
+      size-4
+      -translate-y-1/2
+      text-neutral-500
+      dark:text-neutral-600;
+  }
+}
+
+.searchInput {
+  @apply w-full
+    border-b
+    border-neutral-200
+    bg-transparent
+    py-4
+    pr-4
+    pl-9
+    text-sm
+    text-neutral-900
+    placeholder:text-neutral-500
+    focus:outline-none
+    dark:border-neutral-900
+    dark:text-neutral-200
+    dark:placeholder:text-neutral-600;
+}
diff --git a/packages/ui-components/src/Common/Search/Input/index.tsx b/packages/ui-components/src/Common/Search/Input/index.tsx
new file mode 100644
index 0000000000000..d3762ea58d63d
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Input/index.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
+import { SearchInput } from '@orama/ui/components';
+import type { ComponentProps, FC } from 'react';
+
+import styles from './index.module.css';
+
+type SearchProps = ComponentProps<typeof SearchInput.Input>;
+
+const Input: FC<SearchProps> = ({ searchParams, ...props }) => (
+  <SearchInput.Wrapper className={styles.searchInputWrapper}>
+    <MagnifyingGlassIcon />
+    <SearchInput.Input
+      inputId="orama-doc-search"
+      className={styles.searchInput}
+      searchParams={{
+        ...searchParams,
+        groupBy: {
+          properties: ['siteSection'],
+        },
+        facets: {
+          siteSection: {},
+        },
+      }}
+      {...props}
+    />
+  </SearchInput.Wrapper>
+);
+
+export default Input;
diff --git a/apps/site/components/Common/Searchbox/index.module.css b/packages/ui-components/src/Common/Search/Modal/index.module.css
similarity index 78%
rename from apps/site/components/Common/Searchbox/index.module.css
rename to packages/ui-components/src/Common/Search/Modal/index.module.css
index 5c94c5cb4b1a5..997c502c9a433 100644
--- a/apps/site/components/Common/Searchbox/index.module.css
+++ b/packages/ui-components/src/Common/Search/Modal/index.module.css
@@ -45,14 +45,13 @@
 }
 
 .searchButtonShortcut {
-  @apply hidden
+  @apply inline
     rounded-md
     bg-neutral-300
     px-2
     py-1
     text-sm
     text-neutral-800
-    lg:inline
     dark:bg-neutral-900
     dark:text-neutral-400;
 }
@@ -69,37 +68,30 @@
     items-start
     justify-center
     bg-white/70
-    lg:pt-[5vh]
+    pt-[5vh]
     dark:bg-zinc-950/70;
 }
 
 .modalInner {
   @apply fixed
-    top-0
-    bottom-0
+    top-auto
+    bottom-auto
     mx-auto
     my-0
     flex
-    h-full
-    max-w-none
-    bg-white
-    lg:top-auto
-    lg:bottom-auto
-    lg:h-auto
-    lg:max-w-3xl
-    lg:bg-neutral-100
-    dark:bg-zinc-950
-    lg:dark:bg-neutral-950;
+    h-auto
+    max-w-3xl
+    bg-neutral-100
+    dark:bg-neutral-950;
 }
 
 .modalContent {
   @apply flex
-    h-full
+    h-auto
+    max-h-[70vh]
     flex-col
+    rounded-xl
+    border
     border-neutral-200
-    lg:h-auto
-    lg:max-h-[70vh]
-    lg:rounded-xl
-    lg:border
     dark:border-neutral-900;
 }
diff --git a/packages/ui-components/src/Common/Search/Modal/index.tsx b/packages/ui-components/src/Common/Search/Modal/index.tsx
new file mode 100644
index 0000000000000..d5ff6c9369e62
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Modal/index.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
+import type { OramaCloud } from '@orama/core';
+import { SearchRoot, ChatRoot, Modal } from '@orama/ui/components';
+import type { FC, PropsWithChildren } from 'react';
+
+import styles from './index.module.css';
+
+const SearchModal: FC<
+  PropsWithChildren<{ client: OramaCloud | null; placeholder: string }>
+> = ({ children, client, placeholder }) => (
+  <div className={styles.searchboxContainer}>
+    <Modal.Root>
+      <Modal.Trigger
+        type="button"
+        disabled={!client}
+        enableCmdK
+        className={styles.searchButton}
+      >
+        <div className={styles.searchButtonContent}>
+          <MagnifyingGlassIcon />
+          {placeholder}
+        </div>
+        <span className={styles.searchButtonShortcut}>⌘ K</span>
+      </Modal.Trigger>
+
+      <Modal.Wrapper
+        closeOnOutsideClick
+        closeOnEscape
+        className={styles.modalWrapper}
+      >
+        <SearchRoot client={client}>
+          <ChatRoot client={client} askOptions={{ throttle_delay: 50 }}>
+            <Modal.Inner className={styles.modalInner}>
+              <Modal.Content className={styles.modalContent}>
+                {children}
+              </Modal.Content>
+            </Modal.Inner>
+          </ChatRoot>
+        </SearchRoot>
+      </Modal.Wrapper>
+    </Modal.Root>
+  </div>
+);
+
+export default SearchModal;
diff --git a/apps/site/components/Common/Searchbox/EmptyResults/index.module.css b/packages/ui-components/src/Common/Search/Results/Empty/index.module.css
similarity index 100%
rename from apps/site/components/Common/Searchbox/EmptyResults/index.module.css
rename to packages/ui-components/src/Common/Search/Results/Empty/index.module.css
diff --git a/packages/ui-components/src/Common/Search/Results/Empty/index.tsx b/packages/ui-components/src/Common/Search/Results/Empty/index.tsx
new file mode 100644
index 0000000000000..6a37e2df069b1
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Results/Empty/index.tsx
@@ -0,0 +1,40 @@
+import { SparklesIcon } from '@heroicons/react/24/outline';
+import { SearchResults, Suggestions } from '@orama/ui/components';
+import type { ComponentProps, FC } from 'react';
+
+import styles from './index.module.css';
+
+type EmptyResultsProps = {
+  suggestions: Array<string>;
+  suggestionsTitle?: string;
+  noResultsTitle?: string;
+} & Omit<ComponentProps<typeof Suggestions.Item>, 'children'>;
+
+const SearchResultsEmpty: FC<EmptyResultsProps> = ({
+  suggestions,
+  noResultsTitle,
+  suggestionsTitle,
+  ...props
+}) => (
+  <SearchResults.NoResults>
+    {term =>
+      term ? (
+        <div className={styles.noResultsWrapper}>
+          {noResultsTitle} "{term}"
+        </div>
+      ) : (
+        <Suggestions.Wrapper className={styles.suggestionsWrapper}>
+          <p className={styles.suggestionsTitle}>{suggestionsTitle}</p>
+          {suggestions.map(suggestion => (
+            <Suggestions.Item {...props} className={styles.suggestionItem}>
+              <SparklesIcon />
+              {suggestion}
+            </Suggestions.Item>
+          ))}
+        </Suggestions.Wrapper>
+      )
+    }
+  </SearchResults.NoResults>
+);
+
+export default SearchResultsEmpty;
diff --git a/packages/ui-components/src/Common/Search/Results/Skeleton/index.module.css b/packages/ui-components/src/Common/Search/Results/Skeleton/index.module.css
new file mode 100644
index 0000000000000..39e7d9b3bfaba
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Results/Skeleton/index.module.css
@@ -0,0 +1,43 @@
+@reference "../../../../styles/index.css";
+
+.skeletonWrapper {
+  @apply flex
+    flex-col
+    gap-5
+    py-6;
+}
+
+.skeletonItem {
+  @apply flex
+    items-center
+    gap-4;
+}
+
+.skeletonAnim {
+  @apply dark:animate-pulse-dark
+    animate-pulse
+    rounded-md;
+}
+
+.skeletonAvatar {
+  @apply h-6
+    w-5
+    shrink-0;
+}
+
+.skeletonText {
+  @apply flex
+    flex-1
+    flex-col
+    gap-2;
+}
+
+.skeletonLineShort {
+  @apply h-3
+    w-1/3;
+}
+
+.skeletonLineLong {
+  @apply h-3
+    w-2/3;
+}
diff --git a/packages/ui-components/src/Common/Search/Results/Skeleton/index.tsx b/packages/ui-components/src/Common/Search/Results/Skeleton/index.tsx
new file mode 100644
index 0000000000000..65f6b0bca974e
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Results/Skeleton/index.tsx
@@ -0,0 +1,35 @@
+import { SearchResults } from '@orama/ui/components';
+import classNames from 'classnames';
+import { type FC } from 'react';
+
+import styles from './index.module.css';
+
+const SearchResultsSkeleton: FC = () => (
+  <SearchResults.Loading>
+    <div className={styles.skeletonWrapper}>
+      {[...Array(3)].map((_, index) => (
+        <div key={index} className={styles.skeletonItem}>
+          <div
+            className={classNames(styles.skeletonAnim, styles.skeletonAvatar)}
+          />
+          <div className={styles.skeletonText}>
+            <div
+              className={classNames(
+                styles.skeletonAnim,
+                styles.skeletonLineShort
+              )}
+            />
+            <div
+              className={classNames(
+                styles.skeletonAnim,
+                styles.skeletonLineLong
+              )}
+            />
+          </div>
+        </div>
+      ))}
+    </div>
+  </SearchResults.Loading>
+);
+
+export default SearchResultsSkeleton;
diff --git a/packages/ui-components/src/Common/Search/Results/Tabs/index.module.css b/packages/ui-components/src/Common/Search/Results/Tabs/index.module.css
new file mode 100644
index 0000000000000..e0a279af86fd3
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Results/Tabs/index.module.css
@@ -0,0 +1,50 @@
+@reference "../../../../styles/index.css";
+
+.facetTabsWrapper {
+  @apply mb-2
+    overflow-x-auto;
+
+  &::-webkit-scrollbar {
+    @apply hidden;
+  }
+}
+
+.facetTabItem {
+  @apply flex
+    cursor-pointer
+    items-center
+    gap-2
+    rounded-3xl
+    border
+    border-neutral-200
+    px-3
+    py-1
+    text-sm
+    duration-300
+    focus:outline-none
+    focus-visible:bg-neutral-300
+    motion-safe:transition-colors
+    dark:border-neutral-900
+    dark:focus-visible:bg-neutral-900;
+}
+
+.facetTabItemSelected {
+  @apply border-2
+    border-green-600
+    dark:border-green-400;
+}
+
+.facetTabsList {
+  @apply flex
+    items-center
+    gap-2
+    overflow-x-auto;
+
+  &::-webkit-scrollbar {
+    @apply hidden;
+  }
+}
+
+.facetTabItemCount {
+  @apply text-neutral-700;
+}
diff --git a/packages/ui-components/src/Common/Search/Results/Tabs/index.tsx b/packages/ui-components/src/Common/Search/Results/Tabs/index.tsx
new file mode 100644
index 0000000000000..10f11bac6035b
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Results/Tabs/index.tsx
@@ -0,0 +1,39 @@
+import { FacetTabs } from '@orama/ui/components';
+import classNames from 'classnames';
+import type { ComponentProps, FC } from 'react';
+
+import styles from './index.module.css';
+
+type TabsProps = Omit<
+  ComponentProps<typeof FacetTabs.Item>,
+  'group' | 'filterBy'
+> & {
+  selectedFacet?: string | null;
+  searchTerm?: string | null;
+};
+
+const Tabs: FC<TabsProps> = ({ selectedFacet, ...props }) => {
+  return (
+    <FacetTabs.Wrapper className={styles.facetTabsWrapper}>
+      <FacetTabs.List className={styles.facetTabsList}>
+        {(group, isSelected) => (
+          <FacetTabs.Item
+            {...props}
+            isSelected={group.name === selectedFacet}
+            group={group}
+            filterBy="siteSection"
+            className={classNames(
+              isSelected && styles.facetTabItemSelected,
+              styles.facetTabItem
+            )}
+          >
+            {group.name}
+            <span className={styles.facetTabItemCount}>({group.count})</span>
+          </FacetTabs.Item>
+        )}
+      </FacetTabs.List>
+    </FacetTabs.Wrapper>
+  );
+};
+
+export default Tabs;
diff --git a/apps/site/components/Common/Searchbox/SearchResults/index.module.css b/packages/ui-components/src/Common/Search/Results/index.module.css
similarity index 52%
rename from apps/site/components/Common/Searchbox/SearchResults/index.module.css
rename to packages/ui-components/src/Common/Search/Results/index.module.css
index 6957f388fedbf..2e12b9019984e 100644
--- a/apps/site/components/Common/Searchbox/SearchResults/index.module.css
+++ b/packages/ui-components/src/Common/Search/Results/index.module.css
@@ -1,4 +1,4 @@
-@reference "../../../../styles/index.css";
+@reference "../../../styles/index.css";
 
 .searchResultsContainer {
   @apply flex
@@ -8,11 +8,10 @@
 }
 
 .chatButtonWrapper {
-  @apply hidden
+  @apply block
     border-b
     border-neutral-200
     p-2
-    lg:block
     dark:border-neutral-900;
 
   svg {
@@ -47,12 +46,11 @@
 }
 
 .searchResultsWrapper {
-  @apply grow
+  @apply grow-0
     overflow-y-auto
     px-5
     pt-3
     text-neutral-900
-    lg:grow-0
     dark:text-neutral-200;
 
   &::-webkit-scrollbar {
@@ -69,55 +67,6 @@
   }
 }
 
-.facetTabsWrapper {
-  @apply mb-2
-    overflow-x-auto;
-
-  &::-webkit-scrollbar {
-    @apply hidden;
-  }
-}
-
-.facetTabItem {
-  @apply flex
-    cursor-pointer
-    items-center
-    gap-2
-    rounded-3xl
-    border
-    border-neutral-200
-    px-3
-    py-1
-    text-sm
-    duration-300
-    focus:outline-none
-    focus-visible:bg-neutral-300
-    motion-safe:transition-colors
-    dark:border-neutral-900
-    dark:focus-visible:bg-neutral-900;
-}
-
-.facetTabItemSelected {
-  @apply border-2
-    border-green-600
-    dark:border-green-400;
-}
-
-.facetTabsList {
-  @apply flex
-    items-center
-    gap-2
-    overflow-x-auto;
-
-  &::-webkit-scrollbar {
-    @apply hidden;
-  }
-}
-
-.facetTabItemCount {
-  @apply text-neutral-700;
-}
-
 .searchResultsGroupWrapper {
   @apply relative
     items-start
@@ -144,45 +93,3 @@
     text-neutral-600
     dark:text-neutral-600;
 }
-
-.skeletonWrapper {
-  @apply flex
-    flex-col
-    gap-5
-    py-6;
-}
-
-.skeletonItem {
-  @apply flex
-    items-center
-    gap-4;
-}
-
-.skeletonAnim {
-  @apply dark:animate-pulse-dark
-    animate-pulse
-    rounded-md;
-}
-
-.skeletonAvatar {
-  @apply h-6
-    w-5
-    shrink-0;
-}
-
-.skeletonText {
-  @apply flex
-    flex-1
-    flex-col
-    gap-2;
-}
-
-.skeletonLineShort {
-  @apply h-3
-    w-1/3;
-}
-
-.skeletonLineLong {
-  @apply h-3
-    w-2/3;
-}
diff --git a/packages/ui-components/src/Common/Search/Results/index.tsx b/packages/ui-components/src/Common/Search/Results/index.tsx
new file mode 100644
index 0000000000000..f24282f26865d
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Results/index.tsx
@@ -0,0 +1,91 @@
+'use client';
+
+import { SparklesIcon } from '@heroicons/react/24/outline';
+import { SearchResults, SlidingPanel } from '@orama/ui/components';
+import { useSearch } from '@orama/ui/hooks/useSearch';
+import classNames from 'classnames';
+import type { ComponentProps, FC } from 'react';
+
+import SearchResultsEmpty from './Empty';
+import styles from './index.module.css';
+import SearchResultsSkeleton from './Skeleton';
+import Tabs from './Tabs';
+
+type SearchResultsWrapperProps = {
+  chatLabel?: string;
+  onChat: () => void;
+  searchParams: Omit<ComponentProps<typeof Tabs>['searchParams'], 'term'>;
+  onHit: ComponentProps<typeof SearchResults.GroupList>['children'];
+} & ComponentProps<typeof SearchResultsEmpty>;
+
+const SearchResultsWrapper: FC<SearchResultsWrapperProps> = ({
+  onChat,
+  chatLabel,
+  searchParams,
+  onHit,
+  suggestionsTitle,
+  suggestions,
+  noResultsTitle,
+  ...props
+}) => {
+  const {
+    context: { searchTerm, selectedFacet },
+  } = useSearch();
+
+  return (
+    <div className={styles.searchResultsContainer}>
+      {chatLabel && (
+        <div className={styles.chatButtonWrapper}>
+          <SlidingPanel.Trigger
+            onClick={onChat}
+            className={classNames(styles.chatButton, {
+              [styles.chatButtonWithSearch]: searchTerm,
+            })}
+            initialPrompt={searchTerm || undefined}
+            data-focus-on-arrow-nav
+            {...props}
+          >
+            <SparklesIcon />
+            <span>
+              {searchTerm ? `${searchTerm} - ` : ''}
+              {chatLabel}
+            </span>
+          </SlidingPanel.Trigger>
+        </div>
+      )}
+
+      <div className={styles.searchResultsWrapper}>
+        <SearchResults.Wrapper>
+          <Tabs
+            {...props}
+            searchParams={{ ...searchParams, term: searchTerm ?? '' }}
+            selectedFacet={selectedFacet}
+          />
+          <SearchResultsSkeleton />
+          <SearchResultsEmpty
+            suggestionsTitle={suggestionsTitle}
+            suggestions={suggestions}
+            noResultsTitle={noResultsTitle}
+            {...props}
+          />
+
+          <SearchResults.GroupsWrapper
+            className={styles.searchResultsGroupWrapper}
+            groupBy="siteSection"
+          >
+            {group => (
+              <div key={group.name} className={styles.searchResultsGroup}>
+                <h2 className={styles.searchResultsGroupTitle}>{group.name}</h2>
+                <SearchResults.GroupList group={group}>
+                  {onHit}
+                </SearchResults.GroupList>
+              </div>
+            )}
+          </SearchResults.GroupsWrapper>
+        </SearchResults.Wrapper>
+      </div>
+    </div>
+  );
+};
+
+export default SearchResultsWrapper;
diff --git a/packages/ui-components/src/Common/Search/index.tsx b/packages/ui-components/src/Common/Search/index.tsx
new file mode 100644
index 0000000000000..46721f05f99c4
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/index.tsx
@@ -0,0 +1,22 @@
+import type { ComponentProps, FC } from 'react';
+
+import SearchInput from '@node-core/ui-components/Common/Search/Input';
+import SearchResults from '@node-core/ui-components/Common/Search/Results';
+
+type SearchProps = {
+  input: Partial<ComponentProps<typeof SearchInput>>;
+  results: Partial<ComponentProps<typeof SearchResults>>;
+} & Omit<Partial<ComponentProps<typeof SearchInput>>, 'results'> &
+  Omit<Partial<ComponentProps<typeof SearchResults>>, 'results'>;
+
+const Search: FC<SearchProps> = ({ input, results, ...props }) => (
+  <>
+    <SearchInput {...input} {...props} />
+    <SearchResults
+      {...(results as ComponentProps<typeof SearchResults>)}
+      {...props}
+    />
+  </>
+);
+
+export default Search;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 57429fbf842fb..b9230b3b3909a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -465,6 +465,9 @@ importers:
       '@heroicons/react':
         specifier: ^2.2.0
         version: 2.2.0(react@19.2.0)
+      '@orama/ui':
+        specifier: ^1.3.2
+        version: 1.3.2(@orama/core@1.2.13)(@types/react@19.2.2)(react@19.2.0)
       '@radix-ui/react-avatar':
         specifier: ^1.1.10
         version: 1.1.10(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -508,6 +511,9 @@ importers:
         specifier: 'catalog:'
         version: 4.0.17
     devDependencies:
+      '@orama/core':
+        specifier: ^1.2.13
+        version: 1.2.13
       '@storybook/addon-styling-webpack':
         specifier: ^2.0.0
         version: 2.0.0(storybook@10.0.7(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(webpack@5.102.0(@swc/core@1.13.5))

From c8c51c12d0c79eb5632ccaeb7470f3c683ed26f2 Mon Sep 17 00:00:00 2001
From: Aviv Keller <me@aviv.sh>
Date: Fri, 14 Nov 2025 21:06:02 -0500
Subject: [PATCH 2/8] fixup!

---
 .../site/components/Common/Searchbox/SlidingChatPanel/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/site/components/Common/Searchbox/SlidingChatPanel/index.tsx b/apps/site/components/Common/Searchbox/SlidingChatPanel/index.tsx
index e9a3c68a5c19f..42d46bab4b55c 100644
--- a/apps/site/components/Common/Searchbox/SlidingChatPanel/index.tsx
+++ b/apps/site/components/Common/Searchbox/SlidingChatPanel/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { XMarkIcon } from '@heroicons/react/24/solid';
-import ChatInput from '@node-core/ui-components/Common/Search/Chat/Input/index.jsx';
+import ChatInput from '@node-core/ui-components/Common/Search/Chat/Input';
 import { SlidingPanel } from '@orama/ui/components';
 import { useTranslations } from 'next-intl';
 import type { FC, PropsWithChildren } from 'react';

From 83a5e6e762767b589dc8f57569c36a2696fd49d5 Mon Sep 17 00:00:00 2001
From: Aviv Keller <me@aviv.sh>
Date: Sat, 15 Nov 2025 12:39:46 -0500
Subject: [PATCH 3/8] fixup!

---
 .../Common/Searchbox/index.module.css         |  8 ++
 .../components/Common/Searchbox/index.tsx     | 53 ++++++-----
 .../Search/Chat/Trigger/index.module.css      | 39 ++++++++
 .../src/Common/Search/Chat/Trigger/index.tsx  | 37 ++++++++
 .../src/Common/Search/Modal/index.tsx         | 20 ++++-
 .../src/Common/Search/Results/Empty/index.tsx | 27 ++----
 .../Common/Search/Results/index.module.css    | 45 ----------
 .../src/Common/Search/Results/index.tsx       | 88 ++++++-------------
 .../Search/Suggestions/index.module.css       | 47 ++++++++++
 .../src/Common/Search/Suggestions/index.tsx   | 28 ++++++
 .../ui-components/src/Common/Search/index.tsx | 22 -----
 11 files changed, 239 insertions(+), 175 deletions(-)
 create mode 100644 apps/site/components/Common/Searchbox/index.module.css
 create mode 100644 packages/ui-components/src/Common/Search/Chat/Trigger/index.module.css
 create mode 100644 packages/ui-components/src/Common/Search/Chat/Trigger/index.tsx
 create mode 100644 packages/ui-components/src/Common/Search/Suggestions/index.module.css
 create mode 100644 packages/ui-components/src/Common/Search/Suggestions/index.tsx
 delete mode 100644 packages/ui-components/src/Common/Search/index.tsx

diff --git a/apps/site/components/Common/Searchbox/index.module.css b/apps/site/components/Common/Searchbox/index.module.css
new file mode 100644
index 0000000000000..207d7ab262ae6
--- /dev/null
+++ b/apps/site/components/Common/Searchbox/index.module.css
@@ -0,0 +1,8 @@
+@reference "../../../styles/index.css";
+
+.searchResultsContainer {
+  @apply flex
+    grow
+    flex-col
+    overflow-y-auto;
+}
diff --git a/apps/site/components/Common/Searchbox/index.tsx b/apps/site/components/Common/Searchbox/index.tsx
index 96d82ca827f0c..52127f6243d34 100644
--- a/apps/site/components/Common/Searchbox/index.tsx
+++ b/apps/site/components/Common/Searchbox/index.tsx
@@ -1,7 +1,9 @@
 'use client';
 
-import Search from '@node-core/ui-components/Common/Search';
+import ChatTrigger from '@node-core/ui-components/Common/Search/Chat/Trigger';
 import SearchModal from '@node-core/ui-components/Common/Search/Modal';
+import SearchResults from '@node-core/ui-components/Common/Search/Results';
+import SearchSuggestions from '@node-core/ui-components/Common/Search/Suggestions';
 import { useTranslations } from 'next-intl';
 import { useState, type FC } from 'react';
 
@@ -9,6 +11,7 @@ import { DEFAULT_ORAMA_QUERY_PARAMS } from '#site/next.constants.mjs';
 
 import type { Document } from './DocumentLink';
 import { Footer } from './Footer';
+import styles from './index.module.css';
 import { oramaClient } from './orama-client';
 import { SearchItem } from './SearchItem';
 import { SlidingChatPanel } from './SlidingChatPanel';
@@ -17,34 +20,38 @@ const Searchbox: FC = () => {
   const t = useTranslations();
   const [mode, setMode] = useState<'chat' | 'search'>('search');
 
+  const sharedProps = {
+    searchParams: DEFAULT_ORAMA_QUERY_PARAMS,
+    tabIndex: mode === 'search' ? 0 : -1,
+    'aria-hidden': mode === 'chat',
+  };
+
   return (
     <SearchModal
       client={oramaClient}
       placeholder={t('components.search.searchPlaceholder')}
     >
-      <Search
-        input={{
-          placeholder: t('components.search.searchPlaceholder'),
-          ariaLabel: t('components.search.searchPlaceholder'),
-        }}
-        results={{
-          suggestions: [
-            t('components.search.suggestionOne'),
-            t('components.search.suggestionTwo'),
-            t('components.search.suggestionThree'),
-          ],
-          suggestionsTitle: t('components.search.suggestions'),
-          noResultsTitle: t('components.search.noResultsFoundFor'),
-          chatLabel: t('components.search.chatButtonLabel'),
-          onChat: () => setMode('chat'),
-          onHit: hit => (
+      <div className={styles.searchResultsContainer}>
+        <ChatTrigger onClick={() => setMode('chat')}>
+          {t('components.search.chatButtonLabel')}
+        </ChatTrigger>
+        <SearchResults
+          noResultsTitle={t('components.search.noResultsFoundFor')}
+          onHit={hit => (
             <SearchItem document={hit.document as Document} mode={mode} />
-          ),
-        }}
-        tabIndex={mode === 'search' ? 0 : -1}
-        aria-hidden={mode === 'chat'}
-        searchParams={DEFAULT_ORAMA_QUERY_PARAMS}
-      />
+          )}
+          {...sharedProps}
+        >
+          <SearchSuggestions
+            suggestions={[
+              t('components.search.suggestionOne'),
+              t('components.search.suggestionTwo'),
+              t('components.search.suggestionThree'),
+            ]}
+            label={t('components.search.suggestions')}
+          />
+        </SearchResults>
+      </div>
       <Footer />
       <SlidingChatPanel
         open={mode === 'chat'}
diff --git a/packages/ui-components/src/Common/Search/Chat/Trigger/index.module.css b/packages/ui-components/src/Common/Search/Chat/Trigger/index.module.css
new file mode 100644
index 0000000000000..12666b7b9fb13
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Chat/Trigger/index.module.css
@@ -0,0 +1,39 @@
+@reference "../../../../styles/index.css";
+
+.chatButtonWrapper {
+  @apply block
+    border-b
+    border-neutral-200
+    p-2
+    dark:border-neutral-900;
+
+  svg {
+    @apply size-4;
+  }
+}
+
+.chatButton {
+  @apply flex
+    w-full
+    cursor-pointer
+    items-center
+    gap-2
+    rounded-lg
+    border
+    border-transparent
+    bg-transparent
+    p-3
+    text-sm
+    duration-300
+    hover:bg-neutral-300
+    focus-visible:border-green-600
+    focus-visible:outline-none
+    motion-safe:transition-colors
+    dark:hover:bg-neutral-900
+    dark:focus-visible:border-green-400;
+}
+
+.chatButtonWithSearch {
+  @apply bg-neutral-300
+    dark:bg-neutral-900;
+}
diff --git a/packages/ui-components/src/Common/Search/Chat/Trigger/index.tsx b/packages/ui-components/src/Common/Search/Chat/Trigger/index.tsx
new file mode 100644
index 0000000000000..d1d103a175694
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Chat/Trigger/index.tsx
@@ -0,0 +1,37 @@
+import { SparklesIcon } from '@heroicons/react/24/outline';
+import { SlidingPanel } from '@orama/ui/components/SlidingPanel';
+import { useSearch } from '@orama/ui/hooks/useSearch';
+import classNames from 'classnames';
+import type { ComponentProps, FC } from 'react';
+
+import styles from './index.module.css';
+
+const ChatTrigger: FC<ComponentProps<typeof SlidingPanel.Trigger>> = ({
+  children,
+  ...props
+}) => {
+  const {
+    context: { searchTerm },
+  } = useSearch();
+
+  return (
+    <div className={styles.chatButtonWrapper}>
+      <SlidingPanel.Trigger
+        className={classNames(styles.chatButton, {
+          [styles.chatButtonWithSearch]: searchTerm,
+        })}
+        initialPrompt={searchTerm || undefined}
+        data-focus-on-arrow-nav
+        {...props}
+      >
+        <SparklesIcon />
+        <span>
+          {searchTerm ? `${searchTerm} - ` : ''}
+          {children}
+        </span>
+      </SlidingPanel.Trigger>
+    </div>
+  );
+};
+
+export default ChatTrigger;
diff --git a/packages/ui-components/src/Common/Search/Modal/index.tsx b/packages/ui-components/src/Common/Search/Modal/index.tsx
index d5ff6c9369e62..d760273d9b5be 100644
--- a/packages/ui-components/src/Common/Search/Modal/index.tsx
+++ b/packages/ui-components/src/Common/Search/Modal/index.tsx
@@ -3,13 +3,21 @@
 import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
 import type { OramaCloud } from '@orama/core';
 import { SearchRoot, ChatRoot, Modal } from '@orama/ui/components';
-import type { FC, PropsWithChildren } from 'react';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
 
 import styles from './index.module.css';
+import SearchInput from '../Input';
 
-const SearchModal: FC<
-  PropsWithChildren<{ client: OramaCloud | null; placeholder: string }>
-> = ({ children, client, placeholder }) => (
+type SearchModalProps = {
+  client: OramaCloud | null;
+  placeholder: string;
+} & ComponentProps<typeof SearchInput>;
+
+const SearchModal: FC<PropsWithChildren<SearchModalProps>> = ({
+  children,
+  client,
+  placeholder,
+}) => (
   <div className={styles.searchboxContainer}>
     <Modal.Root>
       <Modal.Trigger
@@ -34,6 +42,10 @@ const SearchModal: FC<
           <ChatRoot client={client} askOptions={{ throttle_delay: 50 }}>
             <Modal.Inner className={styles.modalInner}>
               <Modal.Content className={styles.modalContent}>
+                <SearchInput
+                  placeholder={placeholder}
+                  ariaLabel={placeholder}
+                />
                 {children}
               </Modal.Content>
             </Modal.Inner>
diff --git a/packages/ui-components/src/Common/Search/Results/Empty/index.tsx b/packages/ui-components/src/Common/Search/Results/Empty/index.tsx
index 6a37e2df069b1..0fb90251c35fc 100644
--- a/packages/ui-components/src/Common/Search/Results/Empty/index.tsx
+++ b/packages/ui-components/src/Common/Search/Results/Empty/index.tsx
@@ -1,37 +1,24 @@
-import { SparklesIcon } from '@heroicons/react/24/outline';
 import { SearchResults, Suggestions } from '@orama/ui/components';
-import type { ComponentProps, FC } from 'react';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
 
 import styles from './index.module.css';
 
 type EmptyResultsProps = {
-  suggestions: Array<string>;
-  suggestionsTitle?: string;
-  noResultsTitle?: string;
+  label?: string;
 } & Omit<ComponentProps<typeof Suggestions.Item>, 'children'>;
 
-const SearchResultsEmpty: FC<EmptyResultsProps> = ({
-  suggestions,
-  noResultsTitle,
-  suggestionsTitle,
-  ...props
+const SearchResultsEmpty: FC<PropsWithChildren<EmptyResultsProps>> = ({
+  children,
+  label,
 }) => (
   <SearchResults.NoResults>
     {term =>
       term ? (
         <div className={styles.noResultsWrapper}>
-          {noResultsTitle} "{term}"
+          {label} "{term}"
         </div>
       ) : (
-        <Suggestions.Wrapper className={styles.suggestionsWrapper}>
-          <p className={styles.suggestionsTitle}>{suggestionsTitle}</p>
-          {suggestions.map(suggestion => (
-            <Suggestions.Item {...props} className={styles.suggestionItem}>
-              <SparklesIcon />
-              {suggestion}
-            </Suggestions.Item>
-          ))}
-        </Suggestions.Wrapper>
+        children
       )
     }
   </SearchResults.NoResults>
diff --git a/packages/ui-components/src/Common/Search/Results/index.module.css b/packages/ui-components/src/Common/Search/Results/index.module.css
index 2e12b9019984e..23d0f01a0f107 100644
--- a/packages/ui-components/src/Common/Search/Results/index.module.css
+++ b/packages/ui-components/src/Common/Search/Results/index.module.css
@@ -1,50 +1,5 @@
 @reference "../../../styles/index.css";
 
-.searchResultsContainer {
-  @apply flex
-    grow
-    flex-col
-    overflow-y-auto;
-}
-
-.chatButtonWrapper {
-  @apply block
-    border-b
-    border-neutral-200
-    p-2
-    dark:border-neutral-900;
-
-  svg {
-    @apply size-4;
-  }
-}
-
-.chatButton {
-  @apply flex
-    w-full
-    cursor-pointer
-    items-center
-    gap-2
-    rounded-lg
-    border
-    border-transparent
-    bg-transparent
-    p-3
-    text-sm
-    duration-300
-    hover:bg-neutral-300
-    focus-visible:border-green-600
-    focus-visible:outline-none
-    motion-safe:transition-colors
-    dark:hover:bg-neutral-900
-    dark:focus-visible:border-green-400;
-}
-
-.chatButtonWithSearch {
-  @apply bg-neutral-300
-    dark:bg-neutral-900;
-}
-
 .searchResultsWrapper {
   @apply grow-0
     overflow-y-auto
diff --git a/packages/ui-components/src/Common/Search/Results/index.tsx b/packages/ui-components/src/Common/Search/Results/index.tsx
index f24282f26865d..0f70e80b339cc 100644
--- a/packages/ui-components/src/Common/Search/Results/index.tsx
+++ b/packages/ui-components/src/Common/Search/Results/index.tsx
@@ -1,9 +1,7 @@
 'use client';
 
-import { SparklesIcon } from '@heroicons/react/24/outline';
-import { SearchResults, SlidingPanel } from '@orama/ui/components';
+import { SearchResults } from '@orama/ui/components';
 import { useSearch } from '@orama/ui/hooks/useSearch';
-import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
 
 import SearchResultsEmpty from './Empty';
@@ -12,19 +10,14 @@ import SearchResultsSkeleton from './Skeleton';
 import Tabs from './Tabs';
 
 type SearchResultsWrapperProps = {
-  chatLabel?: string;
-  onChat: () => void;
   searchParams: Omit<ComponentProps<typeof Tabs>['searchParams'], 'term'>;
   onHit: ComponentProps<typeof SearchResults.GroupList>['children'];
-} & ComponentProps<typeof SearchResultsEmpty>;
+  noResultsTitle: string;
+} & Omit<ComponentProps<typeof SearchResultsEmpty>, 'label'>;
 
 const SearchResultsWrapper: FC<SearchResultsWrapperProps> = ({
-  onChat,
-  chatLabel,
   searchParams,
   onHit,
-  suggestionsTitle,
-  suggestions,
   noResultsTitle,
   ...props
 }) => {
@@ -33,57 +26,30 @@ const SearchResultsWrapper: FC<SearchResultsWrapperProps> = ({
   } = useSearch();
 
   return (
-    <div className={styles.searchResultsContainer}>
-      {chatLabel && (
-        <div className={styles.chatButtonWrapper}>
-          <SlidingPanel.Trigger
-            onClick={onChat}
-            className={classNames(styles.chatButton, {
-              [styles.chatButtonWithSearch]: searchTerm,
-            })}
-            initialPrompt={searchTerm || undefined}
-            data-focus-on-arrow-nav
-            {...props}
-          >
-            <SparklesIcon />
-            <span>
-              {searchTerm ? `${searchTerm} - ` : ''}
-              {chatLabel}
-            </span>
-          </SlidingPanel.Trigger>
-        </div>
-      )}
-
-      <div className={styles.searchResultsWrapper}>
-        <SearchResults.Wrapper>
-          <Tabs
-            {...props}
-            searchParams={{ ...searchParams, term: searchTerm ?? '' }}
-            selectedFacet={selectedFacet}
-          />
-          <SearchResultsSkeleton />
-          <SearchResultsEmpty
-            suggestionsTitle={suggestionsTitle}
-            suggestions={suggestions}
-            noResultsTitle={noResultsTitle}
-            {...props}
-          />
-
-          <SearchResults.GroupsWrapper
-            className={styles.searchResultsGroupWrapper}
-            groupBy="siteSection"
-          >
-            {group => (
-              <div key={group.name} className={styles.searchResultsGroup}>
-                <h2 className={styles.searchResultsGroupTitle}>{group.name}</h2>
-                <SearchResults.GroupList group={group}>
-                  {onHit}
-                </SearchResults.GroupList>
-              </div>
-            )}
-          </SearchResults.GroupsWrapper>
-        </SearchResults.Wrapper>
-      </div>
+    <div className={styles.searchResultsWrapper}>
+      <SearchResults.Wrapper>
+        <Tabs
+          {...props}
+          searchParams={{ ...searchParams, term: searchTerm ?? '' }}
+          selectedFacet={selectedFacet}
+        />
+        <SearchResultsSkeleton />
+        <SearchResultsEmpty label={noResultsTitle} {...props} />
+
+        <SearchResults.GroupsWrapper
+          className={styles.searchResultsGroupWrapper}
+          groupBy="siteSection"
+        >
+          {group => (
+            <div key={group.name} className={styles.searchResultsGroup}>
+              <h2 className={styles.searchResultsGroupTitle}>{group.name}</h2>
+              <SearchResults.GroupList group={group}>
+                {onHit}
+              </SearchResults.GroupList>
+            </div>
+          )}
+        </SearchResults.GroupsWrapper>
+      </SearchResults.Wrapper>
     </div>
   );
 };
diff --git a/packages/ui-components/src/Common/Search/Suggestions/index.module.css b/packages/ui-components/src/Common/Search/Suggestions/index.module.css
new file mode 100644
index 0000000000000..2d09b2ce3b549
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Suggestions/index.module.css
@@ -0,0 +1,47 @@
+@reference "../../../styles/index.css";
+
+.suggestionsWrapper {
+  @apply flex
+    min-h-0
+    flex-1
+    flex-col
+    overflow-y-auto
+    pb-4
+    text-neutral-900
+    dark:text-neutral-200;
+}
+
+.suggestionsList {
+  @apply mt-1
+    space-y-1;
+}
+
+.suggestionsTitle {
+  @apply my-3
+    text-xs
+    font-semibold
+    text-neutral-800
+    uppercase
+    dark:text-neutral-500;
+}
+
+.suggestionItem {
+  @apply flex
+    cursor-pointer
+    items-center
+    gap-2
+    rounded-lg
+    border
+    border-transparent
+    py-2
+    text-sm
+    text-green-600
+    focus-visible:border-green-600
+    focus-visible:outline-none
+    dark:text-green-400
+    dark:focus-visible:border-green-400;
+
+  svg {
+    @apply size-5;
+  }
+}
diff --git a/packages/ui-components/src/Common/Search/Suggestions/index.tsx b/packages/ui-components/src/Common/Search/Suggestions/index.tsx
new file mode 100644
index 0000000000000..548c252b8c783
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Suggestions/index.tsx
@@ -0,0 +1,28 @@
+import { SparklesIcon } from '@heroicons/react/24/outline';
+import { Suggestions } from '@orama/ui/components/Suggestions';
+import type { ComponentProps, FC } from 'react';
+
+import styles from './index.module.css';
+
+type SearchSuggestionsProps = {
+  suggestions: Array<string>;
+  label: string;
+} & Omit<ComponentProps<typeof Suggestions.Item>, 'children'>;
+
+const SearchSuggestions: FC<SearchSuggestionsProps> = ({
+  suggestions,
+  label,
+  ...props
+}) => (
+  <Suggestions.Wrapper className={styles.suggestionsWrapper}>
+    <p className={styles.suggestionsTitle}>{label}</p>
+    {suggestions.map(suggestion => (
+      <Suggestions.Item {...props} className={styles.suggestionItem}>
+        <SparklesIcon />
+        {suggestion}
+      </Suggestions.Item>
+    ))}
+  </Suggestions.Wrapper>
+);
+
+export default SearchSuggestions;
diff --git a/packages/ui-components/src/Common/Search/index.tsx b/packages/ui-components/src/Common/Search/index.tsx
deleted file mode 100644
index 46721f05f99c4..0000000000000
--- a/packages/ui-components/src/Common/Search/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { ComponentProps, FC } from 'react';
-
-import SearchInput from '@node-core/ui-components/Common/Search/Input';
-import SearchResults from '@node-core/ui-components/Common/Search/Results';
-
-type SearchProps = {
-  input: Partial<ComponentProps<typeof SearchInput>>;
-  results: Partial<ComponentProps<typeof SearchResults>>;
-} & Omit<Partial<ComponentProps<typeof SearchInput>>, 'results'> &
-  Omit<Partial<ComponentProps<typeof SearchResults>>, 'results'>;
-
-const Search: FC<SearchProps> = ({ input, results, ...props }) => (
-  <>
-    <SearchInput {...input} {...props} />
-    <SearchResults
-      {...(results as ComponentProps<typeof SearchResults>)}
-      {...props}
-    />
-  </>
-);
-
-export default Search;

From ca19a5d6ef9155adb8fe2188e79a0bbb7c0895d7 Mon Sep 17 00:00:00 2001
From: Aviv Keller <me@aviv.sh>
Date: Sat, 15 Nov 2025 12:42:41 -0500
Subject: [PATCH 4/8] no use client in ui components

---
 packages/ui-components/src/Common/Search/Chat/Actions/index.tsx | 2 --
 packages/ui-components/src/Common/Search/Chat/Input/index.tsx   | 2 --
 packages/ui-components/src/Common/Search/Input/index.tsx        | 2 --
 packages/ui-components/src/Common/Search/Results/index.tsx      | 2 --
 4 files changed, 8 deletions(-)

diff --git a/packages/ui-components/src/Common/Search/Chat/Actions/index.tsx b/packages/ui-components/src/Common/Search/Chat/Actions/index.tsx
index eab95a852512d..572da9f734730 100644
--- a/packages/ui-components/src/Common/Search/Chat/Actions/index.tsx
+++ b/packages/ui-components/src/Common/Search/Chat/Actions/index.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import {
   DocumentCheckIcon,
   ClipboardIcon,
diff --git a/packages/ui-components/src/Common/Search/Chat/Input/index.tsx b/packages/ui-components/src/Common/Search/Chat/Input/index.tsx
index 85ce165ada01a..3f4be90d471d8 100644
--- a/packages/ui-components/src/Common/Search/Chat/Input/index.tsx
+++ b/packages/ui-components/src/Common/Search/Chat/Input/index.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { PaperAirplaneIcon } from '@heroicons/react/20/solid';
 import { PauseCircleIcon } from '@heroicons/react/24/solid';
 import { PromptTextArea, Suggestions } from '@orama/ui/components';
diff --git a/packages/ui-components/src/Common/Search/Input/index.tsx b/packages/ui-components/src/Common/Search/Input/index.tsx
index d3762ea58d63d..46b838e95089a 100644
--- a/packages/ui-components/src/Common/Search/Input/index.tsx
+++ b/packages/ui-components/src/Common/Search/Input/index.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
 import { SearchInput } from '@orama/ui/components';
 import type { ComponentProps, FC } from 'react';
diff --git a/packages/ui-components/src/Common/Search/Results/index.tsx b/packages/ui-components/src/Common/Search/Results/index.tsx
index 0f70e80b339cc..71e076ff3308f 100644
--- a/packages/ui-components/src/Common/Search/Results/index.tsx
+++ b/packages/ui-components/src/Common/Search/Results/index.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { SearchResults } from '@orama/ui/components';
 import { useSearch } from '@orama/ui/hooks/useSearch';
 import type { ComponentProps, FC } from 'react';

From 89411ec0045b47eeb66b9cb61918d4baec3c0963 Mon Sep 17 00:00:00 2001
From: Aviv Keller <me@aviv.sh>
Date: Sat, 15 Nov 2025 12:45:03 -0500
Subject: [PATCH 5/8] fix css

---
 .../Common/Searchbox/SlidingChatPanel/index.module.css           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/site/components/Common/Searchbox/SlidingChatPanel/index.module.css b/apps/site/components/Common/Searchbox/SlidingChatPanel/index.module.css
index d515baea87855..4e9612bb55082 100644
--- a/apps/site/components/Common/Searchbox/SlidingChatPanel/index.module.css
+++ b/apps/site/components/Common/Searchbox/SlidingChatPanel/index.module.css
@@ -28,6 +28,7 @@
     box-border
     h-[95vh]
     w-full
+    justify-self-center
     overflow-hidden
     rounded-lg
     border

From 9316b28ab2e56b4f29e0f2fdd828d8050ccccb48 Mon Sep 17 00:00:00 2001
From: Aviv Keller <me@aviv.sh>
Date: Sat, 15 Nov 2025 12:50:24 -0500
Subject: [PATCH 6/8] fixup!

---
 .../Common/Search/Chat/Input/index.module.css | 39 ----------------
 .../src/Common/Search/Chat/Input/index.tsx    | 13 ++----
 .../Search/Results/Empty/index.module.css     | 46 -------------------
 .../src/Common/Search/Suggestions/index.tsx   |  8 ++--
 4 files changed, 7 insertions(+), 99 deletions(-)

diff --git a/packages/ui-components/src/Common/Search/Chat/Input/index.module.css b/packages/ui-components/src/Common/Search/Chat/Input/index.module.css
index 568b6fa540741..27ef869d7e08b 100644
--- a/packages/ui-components/src/Common/Search/Chat/Input/index.module.css
+++ b/packages/ui-components/src/Common/Search/Chat/Input/index.module.css
@@ -58,42 +58,3 @@
     sm:text-sm
     dark:text-neutral-500;
 }
-
-.suggestionsWrapper {
-  @apply mb-4
-    flex
-    items-center
-    justify-center
-    gap-2
-    overflow-x-auto
-    px-1
-    text-sm;
-
-  &::-webkit-scrollbar {
-    @apply hidden;
-  }
-}
-
-.suggestionsItem {
-  @apply flex
-    size-max
-    cursor-pointer
-    rounded-full
-    border
-    border-neutral-300
-    bg-neutral-200
-    px-3
-    py-1
-    whitespace-nowrap
-    text-neutral-900
-    duration-300
-    hover:bg-neutral-300
-    focus:bg-neutral-300
-    focus:outline-none
-    motion-safe:transition-colors
-    dark:border-neutral-900
-    dark:bg-neutral-950
-    dark:text-neutral-200
-    dark:hover:bg-neutral-900
-    dark:focus:bg-neutral-900;
-}
diff --git a/packages/ui-components/src/Common/Search/Chat/Input/index.tsx b/packages/ui-components/src/Common/Search/Chat/Input/index.tsx
index 3f4be90d471d8..d9f4cdb5e0439 100644
--- a/packages/ui-components/src/Common/Search/Chat/Input/index.tsx
+++ b/packages/ui-components/src/Common/Search/Chat/Input/index.tsx
@@ -1,11 +1,12 @@
 import { PaperAirplaneIcon } from '@heroicons/react/20/solid';
 import { PauseCircleIcon } from '@heroicons/react/24/solid';
-import { PromptTextArea, Suggestions } from '@orama/ui/components';
+import { PromptTextArea } from '@orama/ui/components';
 import { useChat } from '@orama/ui/hooks';
 import type { FC, PropsWithChildren } from 'react';
 import { useEffect, useRef } from 'react';
 
 import styles from './index.module.css';
+import SearchSuggestions from '../../Suggestions';
 
 type ChatInputProps = {
   suggestions: Array<string>;
@@ -36,15 +37,7 @@ const ChatInput: FC<PropsWithChildren<ChatInputProps>> = ({
 
   return (
     <>
-      {!!interactions?.length && (
-        <Suggestions.Wrapper className={styles.suggestionsWrapper}>
-          {suggestions.map(suggestion => (
-            <Suggestions.Item className={styles.suggestionsItem}>
-              {suggestion}
-            </Suggestions.Item>
-          ))}
-        </Suggestions.Wrapper>
-      )}
+      {!interactions?.length && <SearchSuggestions suggestions={suggestions} />}
       <div className={styles.textareaContainer}>
         <PromptTextArea.Wrapper className={styles.textareaWrapper}>
           <PromptTextArea.Field
diff --git a/packages/ui-components/src/Common/Search/Results/Empty/index.module.css b/packages/ui-components/src/Common/Search/Results/Empty/index.module.css
index acd79e2c7740e..32a6b73458497 100644
--- a/packages/ui-components/src/Common/Search/Results/Empty/index.module.css
+++ b/packages/ui-components/src/Common/Search/Results/Empty/index.module.css
@@ -1,51 +1,5 @@
 @reference "../../../../styles/index.css";
 
-.suggestionsWrapper {
-  @apply flex
-    min-h-0
-    flex-1
-    flex-col
-    overflow-y-auto
-    pb-4
-    text-neutral-900
-    dark:text-neutral-200;
-}
-
-.suggestionsList {
-  @apply mt-1
-    space-y-1;
-}
-
-.suggestionsTitle {
-  @apply my-3
-    text-xs
-    font-semibold
-    text-neutral-800
-    uppercase
-    dark:text-neutral-500;
-}
-
-.suggestionItem {
-  @apply flex
-    cursor-pointer
-    items-center
-    gap-2
-    rounded-lg
-    border
-    border-transparent
-    py-2
-    text-sm
-    text-green-600
-    focus-visible:border-green-600
-    focus-visible:outline-none
-    dark:text-green-400
-    dark:focus-visible:border-green-400;
-
-  svg {
-    @apply size-5;
-  }
-}
-
 .noResultsWrapper {
   @apply flex
     h-full
diff --git a/packages/ui-components/src/Common/Search/Suggestions/index.tsx b/packages/ui-components/src/Common/Search/Suggestions/index.tsx
index 548c252b8c783..f457695e98b1e 100644
--- a/packages/ui-components/src/Common/Search/Suggestions/index.tsx
+++ b/packages/ui-components/src/Common/Search/Suggestions/index.tsx
@@ -6,7 +6,7 @@ import styles from './index.module.css';
 
 type SearchSuggestionsProps = {
   suggestions: Array<string>;
-  label: string;
+  label?: string;
 } & Omit<ComponentProps<typeof Suggestions.Item>, 'children'>;
 
 const SearchSuggestions: FC<SearchSuggestionsProps> = ({
@@ -15,9 +15,9 @@ const SearchSuggestions: FC<SearchSuggestionsProps> = ({
   ...props
 }) => (
   <Suggestions.Wrapper className={styles.suggestionsWrapper}>
-    <p className={styles.suggestionsTitle}>{label}</p>
-    {suggestions.map(suggestion => (
-      <Suggestions.Item {...props} className={styles.suggestionItem}>
+    {label && <p className={styles.suggestionsTitle}>{label}</p>}
+    {suggestions.map((suggestion, i) => (
+      <Suggestions.Item {...props} key={i} className={styles.suggestionItem}>
         <SparklesIcon />
         {suggestion}
       </Suggestions.Item>

From 86333ef87fab44d219a77a3ea09d032e7701f7a3 Mon Sep 17 00:00:00 2001
From: Aviv Keller <me@aviv.sh>
Date: Sat, 15 Nov 2025 13:00:06 -0500
Subject: [PATCH 7/8] fixup!

---
 .../Common/Searchbox/ChatInteractions/index.module.css       | 3 +--
 .../Common/Searchbox/DocumentLink/index.module.css           | 3 +--
 .../components/Common/Searchbox/SearchItem/index.module.css  | 5 ++---
 .../ui-components/src/Common/Search/Modal/index.module.css   | 5 +++++
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/site/components/Common/Searchbox/ChatInteractions/index.module.css b/apps/site/components/Common/Searchbox/ChatInteractions/index.module.css
index 2bb4384ee51f5..9c3231c65b06c 100644
--- a/apps/site/components/Common/Searchbox/ChatInteractions/index.module.css
+++ b/apps/site/components/Common/Searchbox/ChatInteractions/index.module.css
@@ -39,7 +39,7 @@
 
 .scrollDownButton {
   @apply absolute
-    bottom-36
+    bottom-28
     left-1/2
     inline-flex
     -translate-x-1/2
@@ -53,7 +53,6 @@
     focus:bg-neutral-300
     focus:outline-none
     motion-safe:transition-colors
-    lg:bottom-28
     dark:bg-neutral-900
     dark:text-neutral-200
     focus:dark:bg-neutral-800;
diff --git a/apps/site/components/Common/Searchbox/DocumentLink/index.module.css b/apps/site/components/Common/Searchbox/DocumentLink/index.module.css
index 9e0483cb5c47c..d5a426fe2194f 100644
--- a/apps/site/components/Common/Searchbox/DocumentLink/index.module.css
+++ b/apps/site/components/Common/Searchbox/DocumentLink/index.module.css
@@ -2,7 +2,7 @@
 
 .documentLink {
   @apply rounded-xl
-    bg-white
+    bg-neutral-100
     px-4
     py-2
     text-neutral-900
@@ -10,7 +10,6 @@
     hover:bg-neutral-200
     focus:bg-neutral-200
     motion-safe:transition-colors
-    lg:bg-neutral-100
     dark:bg-neutral-950
     dark:text-neutral-200
     hover:dark:bg-neutral-900
diff --git a/apps/site/components/Common/Searchbox/SearchItem/index.module.css b/apps/site/components/Common/Searchbox/SearchItem/index.module.css
index d731764ed2baf..6db5acb033ecb 100644
--- a/apps/site/components/Common/Searchbox/SearchItem/index.module.css
+++ b/apps/site/components/Common/Searchbox/SearchItem/index.module.css
@@ -17,9 +17,8 @@
       focus-visible:border-green-600
       focus-visible:bg-transparent
       motion-safe:transition-colors
-      dark:bg-zinc-950
-      dark:hover:bg-neutral-900
-      lg:dark:bg-neutral-950;
+      dark:bg-neutral-950
+      dark:hover:bg-neutral-900;
   }
 
   svg {
diff --git a/packages/ui-components/src/Common/Search/Modal/index.module.css b/packages/ui-components/src/Common/Search/Modal/index.module.css
index 997c502c9a433..d18772c8885f8 100644
--- a/packages/ui-components/src/Common/Search/Modal/index.module.css
+++ b/packages/ui-components/src/Common/Search/Modal/index.module.css
@@ -80,9 +80,14 @@
     my-0
     flex
     h-auto
+    w-full
     max-w-3xl
     bg-neutral-100
     dark:bg-neutral-950;
+
+  > section {
+    @apply w-full;
+  }
 }
 
 .modalContent {

From 0685173a407010790a5ae281b16c37f9746ef4b3 Mon Sep 17 00:00:00 2001
From: Aviv Keller <me@aviv.sh>
Date: Sat, 15 Nov 2025 13:17:28 -0500
Subject: [PATCH 8/8] fix imports

---
 .../components/Common/Searchbox/index.tsx     |  3 +-
 .../src/Common/Search/Chat/Input/index.tsx    |  3 +-
 .../src/Common/Search/Modal/index.tsx         |  5 +--
 .../Common/Search/Results/Skeleton/index.tsx  |  2 +-
 .../src/Common/Search/Results/Tabs/index.tsx  | 44 +++++++++----------
 .../src/Common/Search/Results/index.tsx       |  7 +--
 6 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/apps/site/components/Common/Searchbox/index.tsx b/apps/site/components/Common/Searchbox/index.tsx
index 52127f6243d34..4ead827d34ddd 100644
--- a/apps/site/components/Common/Searchbox/index.tsx
+++ b/apps/site/components/Common/Searchbox/index.tsx
@@ -5,7 +5,8 @@ import SearchModal from '@node-core/ui-components/Common/Search/Modal';
 import SearchResults from '@node-core/ui-components/Common/Search/Results';
 import SearchSuggestions from '@node-core/ui-components/Common/Search/Suggestions';
 import { useTranslations } from 'next-intl';
-import { useState, type FC } from 'react';
+import { useState } from 'react';
+import type { FC } from 'react';
 
 import { DEFAULT_ORAMA_QUERY_PARAMS } from '#site/next.constants.mjs';
 
diff --git a/packages/ui-components/src/Common/Search/Chat/Input/index.tsx b/packages/ui-components/src/Common/Search/Chat/Input/index.tsx
index d9f4cdb5e0439..bc6e596b1a8aa 100644
--- a/packages/ui-components/src/Common/Search/Chat/Input/index.tsx
+++ b/packages/ui-components/src/Common/Search/Chat/Input/index.tsx
@@ -5,8 +5,9 @@ import { useChat } from '@orama/ui/hooks';
 import type { FC, PropsWithChildren } from 'react';
 import { useEffect, useRef } from 'react';
 
+import SearchSuggestions from '#ui/Common/Search/Suggestions';
+
 import styles from './index.module.css';
-import SearchSuggestions from '../../Suggestions';
 
 type ChatInputProps = {
   suggestions: Array<string>;
diff --git a/packages/ui-components/src/Common/Search/Modal/index.tsx b/packages/ui-components/src/Common/Search/Modal/index.tsx
index d760273d9b5be..9b28325af2adc 100644
--- a/packages/ui-components/src/Common/Search/Modal/index.tsx
+++ b/packages/ui-components/src/Common/Search/Modal/index.tsx
@@ -1,12 +1,11 @@
-'use client';
-
 import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
 import type { OramaCloud } from '@orama/core';
 import { SearchRoot, ChatRoot, Modal } from '@orama/ui/components';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 
+import SearchInput from '#ui/Common/Search/Input';
+
 import styles from './index.module.css';
-import SearchInput from '../Input';
 
 type SearchModalProps = {
   client: OramaCloud | null;
diff --git a/packages/ui-components/src/Common/Search/Results/Skeleton/index.tsx b/packages/ui-components/src/Common/Search/Results/Skeleton/index.tsx
index 65f6b0bca974e..c0b0ee619b41f 100644
--- a/packages/ui-components/src/Common/Search/Results/Skeleton/index.tsx
+++ b/packages/ui-components/src/Common/Search/Results/Skeleton/index.tsx
@@ -1,6 +1,6 @@
 import { SearchResults } from '@orama/ui/components';
 import classNames from 'classnames';
-import { type FC } from 'react';
+import type { FC } from 'react';
 
 import styles from './index.module.css';
 
diff --git a/packages/ui-components/src/Common/Search/Results/Tabs/index.tsx b/packages/ui-components/src/Common/Search/Results/Tabs/index.tsx
index 10f11bac6035b..bd764911cbc9d 100644
--- a/packages/ui-components/src/Common/Search/Results/Tabs/index.tsx
+++ b/packages/ui-components/src/Common/Search/Results/Tabs/index.tsx
@@ -12,28 +12,26 @@ type TabsProps = Omit<
   searchTerm?: string | null;
 };
 
-const Tabs: FC<TabsProps> = ({ selectedFacet, ...props }) => {
-  return (
-    <FacetTabs.Wrapper className={styles.facetTabsWrapper}>
-      <FacetTabs.List className={styles.facetTabsList}>
-        {(group, isSelected) => (
-          <FacetTabs.Item
-            {...props}
-            isSelected={group.name === selectedFacet}
-            group={group}
-            filterBy="siteSection"
-            className={classNames(
-              isSelected && styles.facetTabItemSelected,
-              styles.facetTabItem
-            )}
-          >
-            {group.name}
-            <span className={styles.facetTabItemCount}>({group.count})</span>
-          </FacetTabs.Item>
-        )}
-      </FacetTabs.List>
-    </FacetTabs.Wrapper>
-  );
-};
+const Tabs: FC<TabsProps> = ({ selectedFacet, ...props }) => (
+  <FacetTabs.Wrapper className={styles.facetTabsWrapper}>
+    <FacetTabs.List className={styles.facetTabsList}>
+      {(group, isSelected) => (
+        <FacetTabs.Item
+          {...props}
+          isSelected={group.name === selectedFacet}
+          group={group}
+          filterBy="siteSection"
+          className={classNames(
+            isSelected && styles.facetTabItemSelected,
+            styles.facetTabItem
+          )}
+        >
+          {group.name}
+          <span className={styles.facetTabItemCount}>({group.count})</span>
+        </FacetTabs.Item>
+      )}
+    </FacetTabs.List>
+  </FacetTabs.Wrapper>
+);
 
 export default Tabs;
diff --git a/packages/ui-components/src/Common/Search/Results/index.tsx b/packages/ui-components/src/Common/Search/Results/index.tsx
index 71e076ff3308f..2af135130d5e5 100644
--- a/packages/ui-components/src/Common/Search/Results/index.tsx
+++ b/packages/ui-components/src/Common/Search/Results/index.tsx
@@ -2,10 +2,11 @@ import { SearchResults } from '@orama/ui/components';
 import { useSearch } from '@orama/ui/hooks/useSearch';
 import type { ComponentProps, FC } from 'react';
 
-import SearchResultsEmpty from './Empty';
+import SearchResultsEmpty from '#ui/Common/Search/Results/Empty';
+import SearchResultsSkeleton from '#ui/Common/Search/Results/Skeleton';
+import Tabs from '#ui/Common/Search/Results/Tabs';
+
 import styles from './index.module.css';
-import SearchResultsSkeleton from './Skeleton';
-import Tabs from './Tabs';
 
 type SearchResultsWrapperProps = {
   searchParams: Omit<ComponentProps<typeof Tabs>['searchParams'], 'term'>;