-
+
-
+
+ ++
+ -
+
+ {(copied: boolean) => + copied ? ( + <> + ++ Copied + + ) : ( + <> + + Copy + + ) + } +
+ - + + +
+
+ {(document: AnyObject, index: number) => (
+
+
+ );
+};
diff --git a/astro/src/components/patterns/Searchbox/Search.css b/astro/src/components/patterns/Searchbox/Search.css
new file mode 100644
index 0000000000..fcf4eb69f6
--- /dev/null
+++ b/astro/src/components/patterns/Searchbox/Search.css
@@ -0,0 +1,323 @@
+@layer patterns {
+ /* ============================================
+ Search Tab
+ ============================================ */
+
+ .search-tab-panel {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ flex: 1;
+ min-height: 0;
+ }
+
+ .search-tabs-scroll-container {
+ position: relative;
+ overflow: hidden;
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ width: var(--space-10);
+ pointer-events: none;
+ background: linear-gradient(to right, transparent, var(--color-bg-primary));
+ }
+ }
+
+ .search-tabs {
+ display: flex;
+ gap: var(--space-1);
+ overflow-x: auto;
+ scrollbar-width: none;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+ }
+
+ .search-tab {
+ font-size: var(--font-size-base);
+ color: var(--color-text-secondary);
+ background: none;
+ border-radius: var(--radius-base);
+ padding: var(--space-1-5) var(--space-3);
+ cursor: pointer;
+ transition:
+ color var(--duration-150) var(--ease-in-out),
+ background-color var(--duration-150) var(--ease-in-out);
+ border: var(--border-width-1) solid transparent;
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+
+ &:hover:not(.search-tab--selected) {
+ color: var(--color-text-primary);
+ background-color: var(--color-bg-secondary);
+ }
+
+ &:focus-visible {
+ outline: 1px solid var(--color-focus-ring);
+ }
+
+ &--selected,
+ &[data-state='active'] {
+ font-weight: var(--font-weight-semibold);
+ color: var(--color-text-primary);
+ background-color: var(--color-bg-tertiary);
+ border: var(--border-width-1) solid var(--color-border-tertiary);
+ }
+ }
+
+ .search-tab-count {
+ margin: 0;
+ }
+
+ .search-input-wrapper {
+ padding: var(--space-3) var(--space-4);
+ border-top: var(--border-width-1) solid var(--color-border-secondary);
+ background-color: var(--color-bg-secondary);
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ gap: var(--space-3);
+ width: 100%;
+ }
+
+ .search-input-form {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ }
+
+ .search-ask-button {
+ display: flex;
+ align-items: center;
+ gap: var(--space-1-5);
+ padding: var(--space-1) var(--space-2-5);
+ border-radius: var(--radius-base);
+ border: var(--border-width-1) solid var(--color-border-secondary);
+ background-color: var(--color-bg-tertiary);
+ color: var(--color-text-secondary);
+ font-size: var(--font-size-sm);
+ font-family: inherit;
+ cursor: pointer;
+ flex-shrink: 0;
+ transition:
+ background-color var(--duration-150) var(--ease-in-out),
+ color var(--duration-150) var(--ease-in-out),
+ border-color var(--duration-150) var(--ease-in-out);
+
+ svg {
+ color: var(--color-icon-primary);
+ }
+
+ &:hover {
+ background-color: var(--color-bg-mute);
+ color: var(--color-text-primary);
+ }
+
+ &:focus-visible {
+ outline: 1px solid var(--color-focus-ring);
+ }
+
+ &:disabled {
+ opacity: 0.8;
+ cursor: not-allowed;
+ background-color: var(--color-bg-secondary);
+ color: var(--color-text-tertiary);
+ border-color: var(--color-border-secondary);
+
+ svg {
+ color: var(--color-icon-secondary);
+ }
+ }
+ }
+
+ .search-input-field {
+ width: 100%;
+ font-size: var(--font-size-md);
+ color: var(--color-text-primary);
+ flex-grow: 1;
+ background: none;
+ border: none;
+ outline: none;
+ font-family: inherit;
+
+ &::placeholder {
+ color: var(--color-text-tertiary);
+ }
+ }
+
+ .search-results-wrapper {
+ overflow-y: auto;
+ flex: 1;
+ min-height: 0;
+ padding: var(--space-6);
+ padding-top: var(--space-3);
+
+ /* Firefox */
+ scrollbar-width: thin;
+ scrollbar-color: var(--color-border-primary) transparent;
+
+ /* Chrome / Safari / Edge */
+ &::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: var(--color-border-primary);
+ border-radius: 9999px;
+ }
+ }
+
+ .search-no-results {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: var(--space-8) var(--space-4);
+ color: var(--color-text-secondary);
+ font-size: var(--font-size-sm);
+ }
+
+ .search-loading {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-1);
+ padding: var(--space-6);
+ padding-top: var(--space-3);
+ }
+
+ .search-skeleton-item {
+ display: flex;
+ align-items: center;
+ gap: var(--space-3);
+ padding: var(--space-4) var(--space-2);
+ }
+
+ .search-skeleton-icon {
+ flex-shrink: 0;
+ width: 1.25rem;
+ height: 1.25rem;
+ border-radius: var(--radius-base);
+ background: linear-gradient(
+ 90deg,
+ var(--color-bg-tertiary) 25%,
+ var(--color-bg-secondary) 50%,
+ var(--color-bg-tertiary) 75%
+ );
+ background-size: 400% 100%;
+ animation: search-shimmer 1.4s ease-in-out infinite;
+ }
+
+ .search-skeleton-text {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-2);
+ flex: 1;
+ }
+
+ .search-skeleton-line {
+ border-radius: var(--radius-full);
+ background: linear-gradient(
+ 90deg,
+ var(--color-bg-tertiary) 25%,
+ var(--color-bg-secondary) 50%,
+ var(--color-bg-tertiary) 75%
+ );
+ background-size: 400% 100%;
+ animation: search-shimmer 1.4s ease-in-out infinite;
+
+ &--title {
+ height: 0.75rem;
+ }
+ &--desc {
+ height: 0.625rem;
+ }
+ }
+
+ @keyframes search-shimmer {
+ 0% {
+ background-position: 200% 0;
+ }
+ 100% {
+ background-position: -200% 0;
+ }
+ }
+
+ .search-results-group-title {
+ font-size: var(--font-size-base);
+ color: var(--color-text-secondary);
+ text-transform: uppercase;
+ letter-spacing: var(--letter-spacing-wide);
+ margin: var(--space-4) 0;
+ }
+
+ .search-results-list {
+ list-style: none;
+ margin: var(--space-4) 0 var(--space-6) 0;
+ padding: 0;
+ }
+
+ .search-result-item {
+ border-radius: var(--radius-base);
+ overflow: hidden;
+ }
+
+ .search-result-link {
+ display: flex;
+ align-items: center;
+ gap: var(--space-3);
+ padding: var(--space-4) var(--space-2);
+ border-radius: var(--radius-base);
+ color: var(--color-text-primary);
+ text-decoration: none;
+ transition: background-color var(--duration-150) var(--ease-in-out);
+
+ svg {
+ flex-shrink: 0;
+ }
+
+ &:hover,
+ &:focus-visible {
+ background-color: var(--color-bg-secondary);
+ outline: none;
+ }
+
+ &:focus-visible {
+ outline: 1px solid var(--color-focus-ring);
+ }
+ }
+
+ .search-result-description {
+ font-size: var(--font-size-base);
+ color: color-mix(in oklch, var(--color-text-primary) 80%, transparent);
+ letter-spacing: var(--letter-spacing-wide);
+ margin: var(--space-1) 0 0 0;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ }
+
+ .search-result-breadcrumb {
+ font-size: var(--font-size-base);
+ font-weight: var(--font-weight-medium);
+ color: var(--color-text-tertiary);
+ margin: 0 0 var(--space-2) 0;
+ }
+
+ .search-result-title {
+ font-size: var(--font-size-base);
+ color: var(--color-text-primary);
+ font-weight: var(--font-weight-medium);
+ margin: 0;
+ }
+}
diff --git a/astro/src/components/patterns/Searchbox/Search.tsx b/astro/src/components/patterns/Searchbox/Search.tsx
new file mode 100644
index 0000000000..0e4f59d8a4
--- /dev/null
+++ b/astro/src/components/patterns/Searchbox/Search.tsx
@@ -0,0 +1,186 @@
+import { useEffect, useRef, useState } from 'react';
+import { FacetTabs, SearchInput, SearchResults } from '@orama/ui/components';
+import type { Hit } from '@orama/core';
+import SearchNoResults from './SearchNoResults';
+import './Search.css';
+import Document20Regular from '~icons/fluent/document-20-regular';
+import Search16Regular from '~icons/fluent/search-16-regular';
+import Sparkle16Filled from '~icons/fluent/sparkle-16-filled';
+import { useSearch } from '@orama/ui/hooks/useSearch';
+import { useTranslations } from '@/i18n/utils';
+import type { ui } from '@/i18n/locales';
+import { useChat } from '@orama/ui/hooks/useChat';
+
+type DocDocument = {
+ title: string;
+ description?: string;
+ category?: string;
+ path?: string;
+ content?: string;
+ version?: string;
+};
+
+function getPathBreadcrumb(path: string, category: string, t: (key: string) => string): string {
+ const rootLabel = t(category);
+ const categorySlug = rootLabel.toLowerCase();
+
+ const segments = path
+ .split('/')
+ .filter(Boolean)
+ .slice(1) // remove language prefix (e.g., 'en')
+ .filter((s) => s !== categorySlug) // remove redundant category segment
+ .slice(0, -1) // remove last segment (the document page itself)
+ .map((s) =>
+ s
+ .split('-')
+ .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+ .join(' ')
+ );
+
+ return [rootLabel, ...segments].join(' > ');
+}
+
+interface SearchProps {
+ lang: string;
+ placeholder: string;
+ mode: 'search' | 'chat';
+ onModeChange: (mode: 'search' | 'chat') => void;
+}
+
+export default function Search({ lang, placeholder, mode, onModeChange }: SearchProps) {
+ const t = useTranslations(lang as keyof typeof ui);
+ const {
+ context: { searchTerm, selectedFacet },
+ } = useSearch();
+ const { ask } = useChat();
+ const [lastChatTerm, setLastChatTerm] = useState
+ {!!document.title && typeof document.title === 'string' && (
+
+
+
+
+ )}
+
+
+ + {(document.content as string).slice(0, 60)} + ... +
+ + )} +
+
+
+ ))}
+
+
+
+
+
+
+
+ {(group, isSelected) => (
+ <>
+
+ {t(group.name)}
+ ({group.count})
+
+
+ )}
+
+
+
+
+
+
+ {(result: Hit) => {
+ const document = result.document as DocDocument;
+ return (
+
+
+
+ )}
+ {t(group.name)}
+
+
+
+ );
+ }}
+ + {getPathBreadcrumb(document?.path ?? '', document?.category ?? '', t)} +
+{document?.title}
+ {document?.description && ( +{document.description}
+ )} +
+
+
+
+
+
+
+
+
+ esc
+ close
+
+
+ Powered by
+ 
+ 
+
+
+ );
+}
diff --git a/astro/src/components/patterns/Searchbox/SearchNoResults.css b/astro/src/components/patterns/Searchbox/SearchNoResults.css
new file mode 100644
index 0000000000..6050a145b6
--- /dev/null
+++ b/astro/src/components/patterns/Searchbox/SearchNoResults.css
@@ -0,0 +1,54 @@
+@layer patterns {
+ .search-empty-image {
+ width: var(--size-36);
+ }
+
+ :root[data-theme='light'] .search-empty-image--dark,
+ :root[data-theme='dark'] .search-empty-image--light {
+ display: none;
+ }
+
+ .search-image-wrapper {
+ display: block;
+ text-align: center;
+ }
+
+ .search-suggestions {
+ margin-top: var(--space-3);
+
+ ul {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--space-3);
+ padding-left: 0;
+ flex-wrap: wrap;
+ }
+
+ li {
+ }
+ }
+
+ .search-suggestion__item {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ padding: var(--space-1-5) var(--space-3);
+ border-radius: var(--radius-base);
+ border: var(--border-width-1) solid var(--color-border-primary);
+ color: var(--color-text-primary);
+ cursor: pointer;
+ transition:
+ background-color 0.2s,
+ color 0.2s;
+
+ &:hover {
+ background-color: var(--color-bg-tertiary);
+ color: var(--color-text-primary);
+ }
+
+ svg {
+ color: var(--color-icon-primary);
+ }
+ }
+}
diff --git a/astro/src/components/patterns/Searchbox/SearchNoResults.tsx b/astro/src/components/patterns/Searchbox/SearchNoResults.tsx
new file mode 100644
index 0000000000..6df01296f1
--- /dev/null
+++ b/astro/src/components/patterns/Searchbox/SearchNoResults.tsx
@@ -0,0 +1,60 @@
+import { SearchResults, Suggestions } from '@orama/ui/components';
+import Sparkle20Filled from '~icons/fluent/sparkle-20-filled';
+import ExpressLogoWhite from '../../../icons/logo-express-white.svg?react';
+import ExpressLogoBlack from '../../../icons/logo-express-black.svg?react';
+import './SearchNoResults.css';
+
+const SUGGESTIONS = [
+ 'Can you give me a guide to install Express.js',
+ 'What are the advantages of version 5',
+ 'What are Express Superpowers',
+];
+
+interface SearchNoResultsProps {
+ onSuggestionClick?: (text: string) => void;
+}
+
+export default function SearchNoResults({ onSuggestionClick }: SearchNoResultsProps) {
+ return (
+
+
+
+
+ What would you like to know about Express and its features?
+-
+ {SUGGESTIONS.map((text) => (
+
-
+
onSuggestionClick?.(text)} + className="search-suggestion__item" + > + ++ {text} +
+ ))}
+
+
+ );
+}
+
+export default function Searchbox({ lang, placeholder, ariaLabel }: SearchboxProps) {
+ const [shortcutKey, setShortcutKey] = useState('⌘ K');
+ const [mounted, setMounted] = useState(false);
+ const [mode, setMode] = useState<'search' | 'chat'>('search');
+
+ useEffect(() => {
+ setMounted(true);
+ const nav = navigator as Navigator & { userAgentData?: { platform: string } };
+ const isMac = nav.userAgentData?.platform
+ ? /mac/i.test(nav.userAgentData.platform)
+ : /Mac|iPhone|iPod|iPad/i.test(navigator.userAgent);
+ setShortcutKey(isMac ? '⌘ K' : 'Ctrl K');
+ }, []);
+
+ return (
+
+ {(mode === 'chat' || searchTerm) && (
+
+ )}
+ {interactions && interactions.length > 0 && (
+
+ )}
+
+
+
+
+
+
+
+
+
+ {placeholder}
+
+ {shortcutKey}
+
+
+
+
+
+ {mode === 'chat' &&
+
+