chore(orama): translate search box (#7799)

* chore(orama): translate search box

* Apply suggestions from code review

Co-authored-by: Brian Muenzenmeyer <[email protected]>
Signed-off-by: Aviv Keller <[email protected]>

---------

Signed-off-by: Aviv Keller <[email protected]>
Co-authored-by: Brian Muenzenmeyer <[email protected]>

Author: avivkeller

apps/site/components/Common/Search/index.tsx

@@ -21,7 +21,7 @@ type ResultMapDescription = {
 
 type ResultMapPath = { path: string; siteSection: string };
 
-import { themeConfig } from './utils';
+import { themeConfig, translationKeys } from './utils';
 
 const uppercaseFirst = (word: string) =>
   word.charAt(0).toUpperCase() + word.slice(1);
@@ -63,9 +63,9 @@ const SearchButton: FC = () => {
         style={{ flexGrow: 1 }}
         colorScheme={colorScheme}
         themeConfig={themeConfig}
-        aria-label={t('components.search.searchBox.placeholder')}
+        aria-label={t('components.search.searchPlaceholder')}
       >
-        {t('components.search.searchBox.placeholder')}
+        {t('components.search.searchPlaceholder')}
       </OramaSearchButton>
 
       <OramaSearchBox
@@ -82,6 +82,9 @@ const SearchButton: FC = () => {
           HTMLTag: 'b',
           CSSClass: 'font-bold',
         }}
+        dictionary={Object.fromEntries(
+          translationKeys.map(key => [key, t(`components.search.${key}`)])
+        )}
         searchParams={DEFAULT_ORAMA_QUERY_PARAMS}
         suggestions={DEFAULT_ORAMA_SUGGESTIONS}
         chatMarkdownLinkHref={({ href }) => {

apps/site/components/Common/Search/utils.ts

@@ -41,3 +41,20 @@ export const themeConfig = {
     },
   },
 };
+
+export const translationKeys = [
+  'searchPlaceholder',
+  'chatPlaceholder',
+  'noResultsFoundFor',
+  'suggestions',
+  'seeAll',
+  'addMore',
+  'clearChat',
+  'errorMessage',
+  'disclaimer',
+  'startYourSearch',
+  'initErrorSearch',
+  'initErrorChat',
+  'chatButtonLabel',
+  'searchButtonLabel',
+] as const;

apps/site/package.json

@@ -37,7 +37,7 @@
     "@opentelemetry/instrumentation": "~0.200.0",
     "@opentelemetry/resources": "~1.30.1",
     "@opentelemetry/sdk-logs": "~0.200.0",
-    "@orama/react-components": "^0.7.0",
+    "@orama/react-components": "^0.8.0",
     "@oramacloud/client": "^2.1.4",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.3",

packages/i18n/locales/en.json

@@ -238,9 +238,20 @@
       "tableOfContents": "Table of Contents"
     },
     "search": {
-      "searchBox": {
-        "placeholder": "Start typing..."
-      }
+      "searchPlaceholder": "Start typing...",
+      "chatPlaceholder": "Ask me anything",
+      "noResultsFoundFor": "No results found for",
+      "suggestions": "Suggestions",
+      "seeAll": "See all",
+      "addMore": "Add more",
+      "clearChat": "Clear chat",
+      "errorMessage": "An error occurred while trying to search. Please try again.",
+      "disclaimer": "AI summaries can make mistakes. Please verify the information.",
+      "startYourSearch": "Start your search",
+      "initErrorSearch": "Unable to initialize search service",
+      "initErrorChat": "Unable to initialize chat service",
+      "chatButtonLabel": "Get an AI summary",
+      "searchButtonLabel": "Search"
     },
     "blog": {
       "blogHeader": {