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 <me@aviv.sh> Signed-off-by: Aileen Villanueva Lecuona <aileenvl@gmail.com>

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.

efekrskl · 2025-11-07T17:04:31Z

Sorry if this was already discussed (200+ hidden items 😅) but I'm a bit worried about how relevant items are sorted in the search. For example:

Under learn we have the Memory article (https://nodejs.org/en/learn/diagnostics/memory) and if I search for Memory in production it is listed at the top of the search

However, in the preview Docs are listed before Learn but even if I select "Learn" articles, the main article is buried deep

Another example, ABI Stability sub content being sorted above the main article called "ABI Stability"

micheleriva · 2025-11-07T17:20:11Z

@efekrskl we can tweak the search result ranking using BM25F field boosting (https://docs.orama.com/docs/cloud/performing-search/search-modes/full-text-search#field-boosting). We should gather a few example and work on the configuration until the results matches the expectations

bjohansebas

LGTM, thanks

bmuenzenmeyer · 2025-11-07T17:46:24Z

thoughts on these CI failures?

edit:

as far as I can tell, it's flakey problems with doc-kit and the linting, which we encountered elsewhere too

[Error [ERR_TEST_FAILURE]: Expected values to be strictly deep-equal:
+ actual - expected

+ [
+   'Invalid type reference: {custom}'
+ ]
- []
] {
  code: 'ERR_TEST_FAILURE',
  failureType: 'testCodeFailure',
  cause: AssertionError [ERR_ASSERTION]: Expected values to be strictly deep-equal:
  + actual - expected
  
  + [
  +   'Invalid type reference: {custom}'
  + ]
  - []
  
      at testRule (file:.../runner/work/nodejs.org/nodejs..../rules/__tests__/utils.mjs:31:10)
      at TestContext.<anonymous> (file:.../runner/work/nodejs.org/nodejs..../rules/__tests__/invalid-type-reference.test.mjs:49:7)
      at Test.runInAsyncScope (node:async_hooks:211:14)
      at Test.run (node:internal/test_runner/test:979:25)
      at Suite.processPendingSubtests (node:internal/test_runner/test:677:18)
      at Test.postRun (node:internal/test_runner/test:1090:19)
      at Test.run (node:internal/test_runner/test:1018:12)
      at async Suite.processPendingSubtests (node:internal/test_runner/test:677:7) {
    generatedMessage: true,
    code: 'ERR_ASSERTION',
    actual: [ 'Invalid type reference: {custom}' ],
    expected: [],
    operator: 'deepStrictEqual'
  }
}

bmuenzenmeyer · 2025-11-07T17:56:09Z

merging - this has requisite approvals and has been floating long enough. let's iterate on what needs work, move to orama's new tech, and celebrate !

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 <me@aviv.sh> Signed-off-by: Aileen Villanueva Lecuona <aileenvl@gmail.com>

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

f088203

Co-authored-by: Aviv Keller <me@aviv.sh> Signed-off-by: Aileen Villanueva Lecuona <aileenvl@gmail.com>

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

3d582dd

Co-authored-by: Aviv Keller <me@aviv.sh> Signed-off-by: Aileen Villanueva Lecuona <aileenvl@gmail.com>

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

b1fff6a

Co-authored-by: Aviv Keller <me@aviv.sh> Signed-off-by: Aileen Villanueva Lecuona <aileenvl@gmail.com>

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

e09fa32

Co-authored-by: Aviv Keller <me@aviv.sh> Signed-off-by: Aileen Villanueva Lecuona <aileenvl@gmail.com>

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

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

micheleriva mentioned this pull request Nov 7, 2025

Search is broken for certain articles #8337

Closed

bjohansebas added the github_actions:pull-request Trigger Pull Request Checks label Nov 7, 2025

bjohansebas deployed to Storybook November 7, 2025 17:34 — with GitHub Actions View deployment

bjohansebas approved these changes Nov 7, 2025

View reviewed changes

github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label Nov 7, 2025

bmuenzenmeyer merged commit e6dd0f7 into nodejs:main Nov 7, 2025
17 of 20 checks passed

bmuenzenmeyer mentioned this pull request Nov 7, 2025

resolve prettier issues on main #8339

Merged

5 tasks

ovflowd mentioned this pull request Nov 9, 2025

[task] adopt new orama search components from the website nodejs/doc-kit#487

Open

	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

feat(search): use new Orama components #8175

Conversation

micheleriva commented Sep 23, 2025

Description

Validation

Related Issues

Check List

Uh oh!

ovflowd Nov 2, 2025

Choose a reason for hiding this comment

Uh oh!

ovflowd Nov 2, 2025

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!

ovflowd Nov 2, 2025

Choose a reason for hiding this comment

Uh oh!

ovflowd Nov 2, 2025

Choose a reason for hiding this comment

Uh oh!

ovflowd Nov 2, 2025

Choose a reason for hiding this comment

Uh oh!

ovflowd Nov 2, 2025

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!

efekrskl commented Nov 7, 2025

Uh oh!

micheleriva commented Nov 7, 2025

Uh oh!

bjohansebas left a comment

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

bmuenzenmeyer commented Nov 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

ovflowd Nov 2, 2025 •

edited

Loading

bmuenzenmeyer commented Nov 7, 2025 •

edited

Loading