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-09-24T13:25:28Z

@node-core/website:dev:  ⨯ Error: Endpoint and API Key are required to create a Profile
@node-core/website:dev:     at __TURBOPACK__module__evaluation__ (components\Common\Searchbox\index.tsx:29:15)
@node-core/website:dev:     at __TURBOPACK__module__evaluation__ (components\withNavBar.tsx:21:1)
@node-core/website:dev:     at <unknown> (layouts\GlowingBackdrop.tsx:6:1)
@node-core/website:dev:     at __TURBOPACK__module__evaluation__ (C:\Users\telav\Documents\projects\nodejs.org\apps\site\.next\server\chunks\ssr\[root-of-the-server]__35d9ee3d._.js:7550:30)
@node-core/website:dev:     at <unknown> (app\global-error.tsx:8:1)
@node-core/website:dev:     at __TURBOPACK__module__evaluation__ (C:\Users\telav\Documents\projects\nodejs.org\apps\site\.next\server\chunks\ssr\[root-of-the-server]__35d9ee3d._.js:7616:30)
@node-core/website:dev:   27 | import { SlidingChatPanel } from './SlidingChatPanel';
@node-core/website:dev:   28 |
@node-core/website:dev: > 29 | const orama = new OramaCloud({
@node-core/website:dev:      |               ^
@node-core/website:dev:   30 |   projectId: ORAMA_CLOUD_PROJECT_ID,
@node-core/website:dev:   31 |   apiKey: ORAMA_CLOUD_READ_API_KEY,
@node-core/website:dev:   32 | }); {
@node-core/website:dev:   digest: '184109325',
@node-core/website:dev:   page: '/en'

This needs to work in a way where users can locally use the site

Right, I’m now first checking if the orama env variables are defined. Otherwise, I set orama to null and disable the SearchButton. Wdyt? @avivkeller

Concerns resolved :-)

g-francesca · 2025-09-30T15:16:05Z

@avivkeller @canerakdas I've fixed the points reported. Thank you for your review. Please let me know if there's anything else to adjust. Thank you!

canerakdas

Apologies for the delay, I’ve added my final comments as well. Thank you for the quick responses 🚀

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

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

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

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

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

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

avivkeller

Wonderful work!

g-francesca · 2025-10-01T07:46:22Z

Apologies for the delay, I’ve added my final comments as well. Thank you for the quick responses 🚀

Thank you! I'll cover them today!

g-francesca · 2025-10-02T13:55:46Z

Apologies for the delay, I’ve added my final comments as well. Thank you for the quick responses 🚀

Thank you! I'll cover them today!

@avivkeller @canerakdas fyi I've addressed the latest points reported, thank you.

codecov · 2025-10-02T13:59:54Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.65%. Comparing base (5140729) to head (8667e5c).
⚠️ Report is 13 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8175      +/-   ##
==========================================
+ Coverage   76.58%   76.65%   +0.07%     
==========================================
  Files         115      115              
  Lines        9602     9627      +25     
  Branches      322      322              
==========================================
+ Hits         7354     7380      +26     
+ Misses       2247     2246       -1     
  Partials        1        1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

canerakdas

LGTM! Awesome work 🚀 🐢

avivkeller · 2025-10-02T22:25:48Z

@g-francesca Can you fix or remove the playwright tests? After that, this'll be ready to land!

github-actions · 2025-10-02T22:27:29Z

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🔴 60	🟢 100	🟢 100	🟢 100	🔗
/en/about	🟢 99	🟢 97	🟢 100	🟠 88	🔗
/en/about/previous-releases	🟢 96	🟢 93	🟢 100	🟢 100	🔗
/en/download	🟢 94	🟢 100	🟢 96	🟢 100	🔗
/en/download/archive/current	🟢 99	🟢 100	🟢 96	🟢 100	🔗
/en/blog	🟢 98	🟢 100	🟢 96	🟢 100	🔗

avivkeller · 2025-10-02T22:29:09Z

apps/site/scripts/orama-search/sync-orama-cloud.mjs

+import { OramaCloud } from '@orama/core';

-import { getDocuments } from './get-documents.mjs';
+import { siteContent } from './get-documents.mjs';


Suggested change

import { siteContent } from './get-documents.mjs';

import { getDocuments } from './get-documents.mjs';

This export is getDocuments, not siteContent

thanks, I've replaced it

g-francesca · 2025-10-06T09:21:26Z

@g-francesca Can you fix or remove the playwright tests? After that, this'll be ready to land!

Yes! Some selectors were still targeting old web components. @avivkeller I added data-testid attributes to the new React components and updated the Playwright locators accordingly. Can you please double-check? TY!

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 September 24, 2025 09:31 View deployment

fix: modal search focus trap

9d131c3

vercel bot deployed to Preview September 24, 2025 13:09 View deployment

style: fix color contrast

4836c80

vercel bot deployed to Preview September 24, 2025 13:15 View deployment

fix: disable search button when no env vars

950d7ad

vercel bot deployed to Preview September 24, 2025 13:28 View deployment

fix: ssr searchbox

6c23e1c

vercel bot deployed to Preview September 24, 2025 13:36 View deployment

canerakdas reviewed Sep 30, 2025

View reviewed changes

avivkeller approved these changes Sep 30, 2025

View reviewed changes

fix: clean up code

8667e5c

vercel bot deployed to Preview October 2, 2025 13:54 View deployment

canerakdas approved these changes Oct 2, 2025

View reviewed changes

avivkeller added the github_actions:pull-request Trigger Pull Request Checks label Oct 2, 2025

avivkeller deployed to Storybook October 2, 2025 22:27 — with GitHub Actions View deployment

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

avivkeller reviewed Oct 2, 2025

View reviewed changes

g-francesca added 2 commits October 6, 2025 10:32

fix: import get documents

347abf6

fix: playwright tests for search

7f252e0

vercel bot deployed to Preview October 6, 2025 08:54 View deployment

	import { siteContent } from './get-documents.mjs';
	import { getDocuments } from './get-documents.mjs';

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 Sep 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

g-francesca commented Sep 30, 2025

Uh oh!

canerakdas left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

avivkeller left a comment

Choose a reason for hiding this comment

Uh oh!

g-francesca commented Oct 1, 2025

Uh oh!

g-francesca commented Oct 2, 2025

Uh oh!

codecov bot commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

canerakdas left a comment

Choose a reason for hiding this comment

Uh oh!

avivkeller commented Oct 2, 2025

Uh oh!

github-actions bot commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

avivkeller Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

avivkeller Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

g-francesca Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

g-francesca commented Oct 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

g-francesca commented Sep 24, 2025 •

edited

Loading

codecov bot commented Oct 2, 2025 •

edited

Loading

github-actions bot commented Oct 2, 2025 •

edited

Loading

g-francesca commented Oct 6, 2025 •

edited

Loading