feat(search): use new Orama components #8175

micheleriva · 2025-09-23T12:41:48Z

This PR supersedes #7971 and integrates the new Orama components, powered by the new OramaCore backend.

Description

New components - React-based to replace the old WebComponents-based ones. New backend (OramaCore instead of old Orama Cloud), all hosted and maintained on https://app.orama.com. Credentials have been shared privately with the repository maintainers on Slack.

Validation

Tested locally and on remote demo environment.

Related Issues

Check List

I have read the Contributing Guidelines and made commit messages that follow the guideline.
I have run pnpm format to ensure the code follows the style guide.
I have run pnpm test to check if all tests are passing.
I have run pnpm build to check if the website builds without errors.
I've covered new added functionality with unit tests if necessary.

Co-authored-by: Aviv Keller <[email protected]> Signed-off-by: Aileen Villanueva Lecuona <[email protected]>

g-francesca · 2025-10-31T16:25:56Z

@ovflowd I’ve addressed the points you mentioned. Thank you for your feedback. Feel free to review it again when you have a moment.

ovflowd · 2025-11-02T04:59:33Z

apps/site/components/Common/Searchbox/orama-client.ts

+
+export const oramaClient =
+  ORAMA_CLOUD_PROJECT_ID && ORAMA_CLOUD_READ_API_KEY
+    ? new OramaCloud({


Out of curiosity: What happens if we create the instance with these params being undefined? Does anything happen during instance creattion?

If the instance is created with the env vars being undefined, the Orama SDK throws an error like Endpoint and API keys are required. I added a check before creating the instance, so we either have a valid instance or null. When the instance is null, the search button is disabled to prevent runtime errors for contributors who don’t have those vars and don’t need them.

ovflowd · 2025-11-02T05:01:08Z

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

+import '@orama/ui/styles.css';
+import { SearchboxProvider } from '#site/providers/searchboxProvider';
+
+import styles from './index.module.css';


CSS files should be loaded after everything. I believe there's a rule for that? Pretty much:

import { InnerSearchboxModal } from './InnerSearchboxModal'; import { oramaClient } from './orama-client'; import styles from './index.module.css';

@ovflowd I tried to update the import order, but on save, VSCode automatically sorts imports because editor.formatOnSave is enabled, and ESLint’s import-x/order rule enforces grouping and newlines. On save, the CSS import gets reordered.

ovflowd · 2025-11-02T05:02:09Z

apps/site/components/withNavBar.tsx

-  ),
-});
-
 const ThemeToggle = dynamic(


I know unrelated to this PR, but @nodejs/nodejs-website what's the reason behind this? Usage of dynamic makes Next.js eject SSR.

ovflowd · 2025-11-02T05:03:26Z

apps/site/components/Common/Searchbox/ChatInteractions/index.tsx

+import { useTranslations } from 'next-intl';
+
+import { ChatMessage } from '../ChatMessage';
+import styles from './index.module.css';


tiny nit: we always keep styles after all other imports and separated by an empty line (afaics)

ovflowd · 2025-11-02T05:03:42Z

apps/site/components/Common/Searchbox/ChatMessage/index.tsx

+import { ChatInteractions } from '@orama/ui/components';
+import type { FC } from 'react';
+
+import styles from './index.module.css';


nit: style imports after all others

ovflowd · 2025-11-02T05:04:01Z

apps/site/components/Common/Searchbox/ChatSources/index.tsx

+import { ChatInteractions } from '@orama/ui/components';
+import type { FC } from 'react';
+
+import styles from './index.module.css';


nit: style imports after all others

ovflowd · 2025-11-02T05:04:23Z

apps/site/components/Common/Searchbox/InnerSearchboxModal/index.tsx

+import { ChatInput } from '../ChatInput';
+import { ChatInteractionsContainer } from '../ChatInteractions';
+import { Footer } from '../Footer';
+import styles from './index.module.css';


nit: style imports after all others

ovflowd · 2025-11-02T05:05:06Z

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

+import { DEFAULT_ORAMA_QUERY_PARAMS } from '#site/next.constants.mjs';
+import { useSearchbox } from '#site/providers/searchboxProvider';
+
+import styles from './index.module.css';


nit: style imports after all others

ovflowd · 2025-11-02T05:05:18Z

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

+import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
+import { SearchInput } from '@orama/ui/components';
+import { useTranslations } from 'next-intl';
+import { type FC, type PropsWithChildren } from 'react';


small nit: this can be a type import

Suggested change

import { type FC, type PropsWithChildren } from 'react';

import type { FC, PropsWithChildren } from 'react';

ovflowd · 2025-11-02T05:06:06Z

apps/site/components/Common/Searchbox/SearchItem/index.tsx

+import { SearchResults } from '@orama/ui/components';
+import { useReducer, type FC } from 'react';
+
+import searchboxReducer, {


nit: simplify this to just seachReducer, searchState

ovflowd · 2025-11-02T05:06:30Z

apps/site/components/Common/Searchbox/SearchResults/index.tsx

+import { DEFAULT_ORAMA_QUERY_PARAMS } from '#site/next.constants.mjs';
+import { useSearchbox } from '#site/providers/searchboxProvider';
+
+import styles from './index.module.css';


nit: style iports after all others

ovflowd · 2025-11-02T05:06:45Z

apps/site/components/Common/Searchbox/SlidingChatPanel/index.tsx

+import type { FC, PropsWithChildren } from 'react';
+
+import { ChatInput } from '../ChatInput';
+import styles from './index.module.css';


nit: style imports after all others

ovflowd · 2025-11-02T05:07:19Z

apps/site/reducers/searchboxReducer.ts

@@ -0,0 +1,54 @@
+import type { Dispatch } from 'react';
+
+import type * as Types from '#site/types/searchbox';


cc @nodejs/nodejs-website do we use to do wildcard imports of types?

ovflowd

SGTM! I left a few final comment reviews that I'd appreciate to get answered still in this PR, but I believe this PR isn't anymore in a blocked state and ultimately "could" get merged as is.

@nodejs/nodejs-website, team keep me humble. Can y'all also give a final round of reviews here and help me out?

And finally for the Orama team. Thank you so so much for your patience and for the incredible work done here. Really appreciate it!!!!

ovflowd · 2025-11-02T05:09:12Z

(Also, thank you @g-francesca for your patience 🙇)

g-francesca · 2025-11-03T14:56:05Z

(Also, thank you @g-francesca for your patience 🙇)

With pleasure 🤗 . Thank you too for the time spent improving this PR. I'm addressing the latest comments rn.

g-francesca and others added 30 commits July 9, 2025 11:54

feat: add new searchbox - initial setup

7c4f8e5

style: search button

e4d0c1d

style: searchbox empty state

086dd84

style: modal search

8451f80

style: prompt wrapper

8ecdf9e

fix: layout sliding panel

6ac3d65

style: chat sources

87db2f9

refactor: search component

40ea1c8

feat: add translations for search component

31273fd

update orama core and update logo

31e2db8

update sync

2a22940

update pnpm-lock

65ecd9f

Update apps/site/components/Common/Searchbox/Chat.tsx

834636f

Co-authored-by: Aviv Keller <[email protected]> Signed-off-by: Aileen Villanueva Lecuona <[email protected]>

Update apps/site/components/Common/Searchbox/Chat.tsx

f088203

Co-authored-by: Aviv Keller <[email protected]> Signed-off-by: Aileen Villanueva Lecuona <[email protected]>

Update apps/site/components/Common/Searchbox/Search.tsx

3d582dd

Co-authored-by: Aviv Keller <[email protected]> Signed-off-by: Aileen Villanueva Lecuona <[email protected]>

Update apps/site/components/Common/Searchbox/Search.tsx

b1fff6a

Co-authored-by: Aviv Keller <[email protected]> Signed-off-by: Aileen Villanueva Lecuona <[email protected]>

Update apps/site/components/Common/Searchbox/Search.tsx

e09fa32

Co-authored-by: Aviv Keller <[email protected]> Signed-off-by: Aileen Villanueva Lecuona <[email protected]>

fix height and pr comments

d37297f

Merge branch 'main' of https://github.com/oramasearch/nodejs.org

954ee99

fix import and add directories for Search and Chat

ff59f5b

update icon and orama ui components

8d7657e

rollback translation changes

43c56bd

update on datasource and ui components

83a0c1b

update env variables

f4e51bf

pr comments and facets added

242c667

pr comments

535d6a8

fixes in styles and facets

992f1fe

facets search fix

d73687a

push facets query fix

e7a64b9

feat: adds filters to search

dbd4637

vercel bot deployed to Preview October 31, 2025 14:57 View deployment

refactor: remove oramaProvider

c7a49ea

vercel bot deployed to Preview October 31, 2025 15:16 View deployment

fix: remove throw error

e2cee95

vercel bot deployed to Preview October 31, 2025 16:25 View deployment

ovflowd reviewed Nov 2, 2025

View reviewed changes

ovflowd approved these changes Nov 2, 2025

View reviewed changes

g-francesca added 4 commits November 3, 2025 14:19

Merge remote-tracking branch 'upstream/main'

d82468f

Merge branch 'main' into review-orama-searchbox

e0824a9

refactor: rename search state and reducer

fc357d4

fix: check pageSectionTitle for source

42974a6

vercel bot had a problem deploying to Preview November 3, 2025 14:55 Failure

g-francesca added 2 commits November 3, 2025 16:10

Merge remote-tracking branch 'upstream/main'

31552e4

Merge branch 'main' into review-orama-searchbox

10a6a04

vercel bot deployed to Preview November 3, 2025 15:12 View deployment

	import { type FC, type PropsWithChildren } from 'react';
	import type { FC, PropsWithChildren } from 'react';

		@@ -0,0 +1,54 @@
		import type { Dispatch } from 'react';

		import type * as Types from '#site/types/searchbox';

Uh oh!

feat(search): use new Orama components #8175

Are you sure you want to change the base?

feat(search): use new Orama components #8175

Conversation

micheleriva commented Sep 23, 2025

Description

Validation

Related Issues

Check List

Uh oh!

g-francesca commented Oct 31, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ovflowd Nov 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ovflowd left a comment

Choose a reason for hiding this comment

Uh oh!

ovflowd commented Nov 2, 2025

Uh oh!

g-francesca commented Nov 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

ovflowd Nov 2, 2025 •

edited

Loading