+
+ );
+};
diff --git a/apps/site/components/Common/Searchbox/Chat/ChatInput/index.module.css b/apps/site/components/Common/Searchbox/Chat/ChatInput/index.module.css
new file mode 100644
index 0000000000000..e4f57a0ba823d
--- /dev/null
+++ b/apps/site/components/Common/Searchbox/Chat/ChatInput/index.module.css
@@ -0,0 +1,42 @@
+.promptWrapperCustom {
+ @apply relative;
+}
+
+.promptFieldCustom {
+ font-family: inherit !important;
+}
+
+.promptButtonCustom {
+ @apply absolute;
+ @apply right-3;
+ @apply top-1/2;
+ @apply -translate-y-1/2;
+ @apply border-none;
+ @apply rounded-lg;
+ @apply text-white;
+ @apply cursor-pointer;
+ @apply p-2;
+ @apply transition-colors;
+ @apply duration-300;
+ @apply bg-green-500;
+ @apply flex;
+ @apply items-center;
+ @apply justify-center;
+ @apply min-h-8;
+ @apply min-w-8;
+}
+
+.promptButtonCustom:hover:not(:disabled) {
+ @apply bg-green-600;
+}
+
+.promptButtonCustom:disabled {
+ @apply bg-gray-200;
+ @apply text-gray-500;
+ @apply cursor-not-allowed;
+ @apply opacity-60;
+}
+
+.slidingPanelFooter {
+ @apply flex;
+}
diff --git a/apps/site/components/Common/Searchbox/Chat/ChatInput/index.tsx b/apps/site/components/Common/Searchbox/Chat/ChatInput/index.tsx
new file mode 100644
index 0000000000000..fc5efda45990b
--- /dev/null
+++ b/apps/site/components/Common/Searchbox/Chat/ChatInput/index.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import { PaperAirplaneIcon } from '@heroicons/react/20/solid';
+import { PauseCircleIcon } from '@heroicons/react/24/solid';
+import { PromptTextArea } from '@orama/ui/components';
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+
+import styles from './index.module.css';
+
+export const ChatInput: FC = () => {
+ const t = useTranslations();
+
+ return (
+ -
+ {index === totalInteractions - 1 && (
+
-
+
+ ++
+ )}
+ -
+
+ {(copied: boolean) => + copied ? ( + ++ ) : ( + + ) + } +
+
+
+
+
+ );
+};
diff --git a/apps/site/components/Common/Searchbox/Chat/ChatMessage/index.module.css b/apps/site/components/Common/Searchbox/Chat/ChatMessage/index.module.css
new file mode 100644
index 0000000000000..2aaacc1d6f8c6
--- /dev/null
+++ b/apps/site/components/Common/Searchbox/Chat/ChatMessage/index.module.css
@@ -0,0 +1,159 @@
+.chatUserPrompt {
+ @apply block;
+}
+
+.chatLoader {
+ @apply my-4;
+}
+
+.chatLoadingWrapper {
+ @apply mx-8;
+ @apply mb-6;
+ @apply flex;
+ @apply min-h-[60px];
+ @apply items-center;
+ @apply justify-center;
+ @apply rounded-xl;
+ @apply p-6;
+ @apply bg-[#0d121c];
+}
+
+.typingIndicator {
+ @apply flex;
+ @apply gap-2;
+}
+
+.typingDot {
+ @apply h-3;
+ @apply w-3;
+ @apply rounded-full;
+ @apply bg-white;
+ @apply opacity-80;
+
+ animation: typing 1.4s infinite ease-in-out;
+}
+
+.typingDot:nth-child(1) {
+ animation-delay: 0s;
+}
+
+.typingDot:nth-child(2) {
+ animation-delay: 0.2s;
+}
+
+.typingDot:nth-child(3) {
+ animation-delay: 0.4s;
+}
+
+@keyframes typing {
+ 0%,
+ 60%,
+ 100% {
+ opacity: 0.7;
+ transform: translateY(0);
+ }
+
+ 30% {
+ opacity: 1;
+ transform: translateY(-10px);
+ }
+}
+
+.chatAssistantMessageMain {
+ @apply mb-4,
+ text-base,
+ text-neutral-900,
+ dark:text-neutral-200;
+}
+
+.chatAssistantMessageWrapper {
+ @apply block;
+}
+
+.chatAssistantMessage {
+ @apply my-4,
+ mb-6,
+ max-w-full,
+ rounded-xl,
+ px-6,
+ py-4,
+ text-base;
+
+ background: transparent;
+ border: none;
+
+ @apply !text-white;
+
+ margin: 0;
+ padding: 0;
+}
+
+.chatAssistantMessage p {
+ @apply font-sm-line-height,
+ mb-3,
+ text-white;
+}
+
+.chatAssistantMessage pre {
+ @apply my-4,
+ rounded-md,
+ bg-black/20,
+ p-4,
+ text-xs,
+ text-white;
+
+ code {
+ @apply rounded-lg,
+ p-3,
+ text-sm;
+ }
+}
+
+.chatAssistantMessage code {
+ @apply rounded,
+ bg-black/30,
+ p-1,
+ text-white;
+}
+
+.chatAssistantMessage ul {
+ @apply list-disc,
+ pl-6;
+}
+
+.chatAssistantMessage ol {
+ @apply list-decimal,
+ pl-6;
+}
+
+.chatAssistantMessage li {
+ @apply mb-1;
+}
+
+.chatAssistantMessage h1,
+.chatAssistantMessage h2,
+.chatAssistantMessage h3 {
+ @apply mb-2,
+ text-lg,
+ font-bold;
+}
+
+.markdownPre {
+ border-radius: 0.5rem !important;
+ padding: 0.1875rem 0.3125rem !important;
+}
+
+:global(pre[class*='prism']) {
+ border-radius: 0.5rem !important;
+ padding: 0.1875rem 0.3125rem !important;
+}
+
+:global(.chatAssistantMessage pre) {
+ border-radius: 0.5rem !important;
+ padding: 0.1875rem 0.3125rem !important;
+}
+
+:global(pre[style*='background-color']) {
+ border-radius: 0.5rem !important;
+ padding: 0.1875rem 0.3125rem !important;
+}
diff --git a/apps/site/components/Common/Searchbox/Chat/ChatMessage/index.tsx b/apps/site/components/Common/Searchbox/Chat/ChatMessage/index.tsx
new file mode 100644
index 0000000000000..51d7e643202c5
--- /dev/null
+++ b/apps/site/components/Common/Searchbox/Chat/ChatMessage/index.tsx
@@ -0,0 +1,88 @@
+'use client';
+
+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';
+
+type ChatMessageProps = {
+ interaction: Interaction;
+ index: number;
+ totalInteractions: number;
+};
+
+const TypingIndicator: FC = () => (
+
+ {t('components.search.disclaimer')}
+
+
+
+
+
+
+);
+
+export const ChatMessage: FC{interaction?.query || ''}
+
+
+
+
+ {interaction.response || ''}
+
+
+
+
+
+ )}
+
+ );
+};
diff --git a/apps/site/components/Common/Searchbox/Chat/ChatSources/index.module.css b/apps/site/components/Common/Searchbox/Chat/ChatSources/index.module.css
new file mode 100644
index 0000000000000..40d5f69dfcd9e
--- /dev/null
+++ b/apps/site/components/Common/Searchbox/Chat/ChatSources/index.module.css
@@ -0,0 +1,45 @@
+.chatSources {
+ @apply mb-4;
+ @apply flex;
+ @apply flex-nowrap;
+ @apply items-center;
+ @apply gap-3;
+ @apply overflow-x-scroll;
+ @apply scroll-smooth;
+ @apply [scrollbar-width:none];
+ @apply [&::-webkit-scrollbar]:hidden;
+}
+
+.chatSource {
+ @apply flex;
+ @apply max-w-xs;
+ @apply items-center;
+ @apply gap-2;
+ @apply text-base;
+}
+
+.chatSourceLink {
+ @apply rounded-xl;
+ @apply bg-neutral-100;
+ @apply px-4;
+ @apply py-2;
+ @apply text-neutral-900;
+ @apply transition-colors;
+ @apply duration-300;
+ @apply hover:bg-neutral-200;
+ @apply focus:bg-neutral-200;
+ @apply dark:bg-neutral-950;
+ @apply dark:text-neutral-200;
+ @apply hover:dark:bg-neutral-900;
+ @apply focus:dark:bg-neutral-900;
+}
+
+.chatSourceTitle {
+ @apply max-w-full;
+ @apply overflow-hidden;
+ @apply truncate;
+ @apply text-ellipsis;
+ @apply whitespace-nowrap;
+ @apply text-sm;
+ @apply font-semibold;
+}
diff --git a/apps/site/components/Common/Searchbox/Chat/ChatSources/index.tsx b/apps/site/components/Common/Searchbox/Chat/ChatSources/index.tsx
new file mode 100644
index 0000000000000..3c3cf04b576ad
--- /dev/null
+++ b/apps/site/components/Common/Searchbox/Chat/ChatSources/index.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import type { Interaction, AnyObject } from '@orama/core';
+import { ChatInteractions } from '@orama/ui/components';
+import type { FC } from 'react';
+
+import styles from './index.module.css';
+import { DocumentLink } from '../../DocumentLink';
+
+type DocumentSource = {
+ path: string;
+ siteSection: string;
+ pageSectionTitle?: string;
+ [key: string]: unknown;
+};
+
+type ChatSourcesProps = {
+ interaction: Interaction;
+};
+
+export const ChatSources: FC
+
+
+ {document.pageSectionTitle as string}
+
+
+
+ )}
+
+
+
+ scrollToBottom({ animated: true })}
+ className={`${styles.chatMobilePadding} relative h-full items-start overflow-y-auto`}
+ style={{ maxHeight: '100%', overflowY: 'auto' }}
+ >
+ {(
+ interaction: Interaction,
+ index?: number,
+ totalInteractions?: number
+ ) => (
+
+
+
+ {showGoToBottomButton && (
+
+ )}
+
+
+
+
+ );
+};
diff --git a/apps/site/components/Common/Searchbox/Search/utils.ts b/apps/site/components/Common/Searchbox/Search/utils.ts
new file mode 100644
index 0000000000000..5fc41ceac70f1
--- /dev/null
+++ b/apps/site/components/Common/Searchbox/Search/utils.ts
@@ -0,0 +1,11 @@
+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/index.module.css b/apps/site/components/Common/Searchbox/index.module.css
new file mode 100644
index 0000000000000..1afbb11123492
--- /dev/null
+++ b/apps/site/components/Common/Searchbox/index.module.css
@@ -0,0 +1,185 @@
+@reference "../../../styles/index.css";
+
+/* .searchWrapper {
+ @apply relative
+ flex
+ w-full
+ flex-shrink-0;
+} */
+
+.searchButton {
+ @apply flex
+ grow
+ cursor-pointer
+ items-center
+ justify-between
+ gap-1
+ rounded-xl
+ border
+ border-neutral-300
+ bg-white
+ py-1
+ pl-2
+ pr-1
+ text-neutral-900
+ transition-colors
+ duration-300
+ hover:bg-neutral-100
+ dark:border-neutral-900
+ dark:bg-neutral-950
+ dark:text-neutral-200
+ hover:dark:bg-neutral-900;
+}
+
+.searchButtonContent {
+ @apply relative
+ flex
+ flex-nowrap
+ items-center
+ gap-1
+ p-2
+ text-sm;
+
+ svg {
+ @apply h-4
+ w-4;
+ }
+}
+
+.searchButtonShortcut {
+ @apply hidden
+ rounded-md
+ bg-neutral-300
+ px-2
+ py-1
+ text-sm
+ text-neutral-800
+ sm:inline
+ dark:bg-neutral-900
+ dark:text-neutral-400;
+}
+
+.modalWrapper {
+ @apply fixed
+ left-0
+ top-0
+ z-50
+ flex
+ h-full
+ w-full
+ bg-white/70
+ dark:bg-neutral-950/85;
+
+ align-items: flex-start;
+ justify-content: center;
+ padding-top: 5vh;
+}
+
+.mobileOnly {
+ display: none;
+}
+
+.modalInner {
+ @apply flex
+ flex-col
+ bg-neutral-100
+ dark:bg-neutral-950;
+
+ inset: 0;
+
+ /* Mobile styles */
+ position: fixed;
+
+ /* Desktop styles */
+ @media (min-width: 640px) {
+ border: 1px solid rgb(229 229 229);
+ border-radius: 12px;
+ height: auto;
+ max-height: none;
+ max-width: 720px;
+ min-height: auto;
+ padding: 0;
+ position: static;
+ width: 80%;
+ }
+
+ @media (min-width: 640px) and (prefers-color-scheme: dark) {
+ border-color: rgb(38 38 38);
+ }
+}
+
+.modalWrapper.modalWrapperWithResults .modalInner {
+ display: flex;
+ flex-direction: column;
+ max-height: 70vh;
+}
+
+.modalContent {
+ @apply flex
+ flex-col;
+
+ /* Mobile full height */
+ height: 100%;
+ min-height: 0;
+ overflow: hidden;
+
+ /* Desktop auto height - fit content exactly */
+ @media (min-width: 640px) {
+ flex-shrink: 0;
+ height: fit-content;
+ min-height: 0;
+ }
+}
+
+.active {
+ @apply block;
+}
+
+@media (max-width: 600px) {
+ .mobileOnly {
+ @apply block;
+ }
+
+ .mobileTopBar {
+ align-items: center;
+ background: #181c23;
+ border-bottom: 1px solid #222;
+ display: flex;
+ padding: 0.5rem 1rem;
+ }
+
+ .mobileTopBarArrow {
+ align-items: center;
+ background: none;
+ border: none;
+ color: #fff;
+ display: flex;
+ font-size: 1.5rem;
+ margin-right: 1rem;
+ }
+
+ .mobileTopBarTabs {
+ display: flex;
+ flex: 1;
+ justify-content: center;
+ }
+
+ .mobileTopBarTab {
+ background: none;
+ border: none;
+ border-radius: 999px;
+ color: #aaa;
+ font-size: 1rem;
+ font-weight: 500;
+ padding: 0.5rem 1rem;
+ transition:
+ background 0.2s,
+ color 0.2s;
+ }
+
+ .mobileTopBarTab.active,
+ .mobileTopBarTab:focus {
+ background: #23272f;
+ color: #fff;
+ }
+}
diff --git a/apps/site/components/Common/Searchbox/index.tsx b/apps/site/components/Common/Searchbox/index.tsx
new file mode 100644
index 0000000000000..c2449964ad942
--- /dev/null
+++ b/apps/site/components/Common/Searchbox/index.tsx
@@ -0,0 +1,174 @@
+'use client';
+
+import { MagnifyingGlassIcon, ArrowLeftIcon } from '@heroicons/react/24/solid';
+import { OramaCloud } from '@orama/core';
+import { SearchRoot, ChatRoot, Modal } from '@orama/ui/components';
+import { useSearchContext, useChatDispatch } from '@orama/ui/contexts';
+import classNames from 'classnames';
+import { useTranslations } from 'next-intl';
+import { useState, type FC, type PropsWithChildren } from 'react';
+import '@orama/ui/styles.css';
+
+import {
+ ORAMA_CLOUD_PROJECT_ID,
+ ORAMA_CLOUD_API_KEY,
+} from '#site/next.constants.mjs';
+
+import { SlidingChatPanel } from './Chat';
+import styles from './index.module.css';
+import { Search } from './Search';
+
+const orama = new OramaCloud({
+ projectId: ORAMA_CLOUD_PROJECT_ID,
+ apiKey: ORAMA_CLOUD_API_KEY,
+});
+
+const InnerSearchBox: FC
+
+
+
+
+
+ {facetsEverShown && displayFacetsList.length > 1 && (
+
+ {term => (
+ <>
+ {term ? (
+
+
+
+
+
+
+
+
+ )}
+
+ )}
+
+
+
+ {group => (
+
+
+
+
+
+
+ )}
+
+ -
+
+
+ ) : (
+ + {t('components.search.noResultsFoundFor')} "{term}" +
++ {t('components.search.suggestions')} +
+
+ {/* header without counts */}
+
+ {hit => (
+
+
+
+
+ )}
+
+
+ )}
+ + {group.name} +
+
+ {typeof hit.document?.pageSectionTitle ===
+ 'string' && (
+
+ + {hit.document?.pageSectionTitle} +
+ )} + {typeof hit.document?.pageSectionTitle === + 'string' && + typeof hit.document?.path === 'string' && ( ++ {getFormattedPath( + hit.document?.path, + hit.document?.pageSectionTitle + )} +
+ )} +
+
+
+
+
+
+
+
+
+
+
+
+ esc
+
+ {t('components.search.keyboardShortcuts.close')}
+
+
+ 
+
+
+
+ );
+
+ return (
+ <>
+ {/* Only show on mobile */}
+
+
+
+
+
+
+ {mode === 'search' && (
+