feat(orama): use new UI components #7971

aileenvl · 2025-07-09T19:07:52Z

Preview this PR at https://nodejs-org-git-fork-oramasearch-main-openjs.vercel.app/en

Description

Validation

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.

vercel · 2025-07-09T19:07:57Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
nodejs-org	Ready	Preview	Sep 9, 2025 10:15am

avivkeller

Thank you so much!

I've left some comments, and I am here to help you implement anything you need help with, just ping me :-).

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

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

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

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

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

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

github-actions · 2025-07-10T02:15:27Z

Note

Your Pull Request seems to be updating Translations of the Node.js Website.

Whilst we appreciate your intent; Any Translation update should be done through our Crowdin Project.
We recommend giving a read on our Translation Guidelines.

Thank you!

Copilot

Pull Request Overview

This PR modernizes the Orama search integration by migrating from @orama/react-components to the new @orama/ui package and updating the sync script to use @orama/core. The changes implement a more customizable search and chat interface with mobile support and keyboard navigation.

Key Changes

Migrated from @orama/react-components to @orama/ui components for better customization
Updated sync script to use new @orama/core API instead of @oramacloud/client
Added comprehensive search and chat UI components with mobile responsiveness

Reviewed Changes

Copilot reviewed 23 out of 24 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
`packages/i18n/src/locales/en.json`	Added new translation keys for search UI features
`apps/site/scripts/orama-search/sync-orama-cloud.mjs`	Migrated to new Orama Cloud API using `@orama/core`
`apps/site/package.json`	Updated dependencies to include new Orama packages
`apps/site/components/Common/Searchbox/`	New comprehensive search interface with chat integration
`apps/site/components/withNavBar.tsx`	Updated import path for search component

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

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

Copilot · 2025-08-26T18:43:54Z

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

+// The new API from @orama/core might have a different approach for full sync.
+// Based on the provided examples, we are now only running the update.


The comment mentions that the new API 'might have a different approach for full sync' but doesn't provide certainty. This suggests the migration may be incomplete - consider verifying the new API behavior for data synchronization.

Suggested change

// The new API from @orama/core might have a different approach for full sync.

// Based on the provided examples, we are now only running the update.

// To ensure a true full sync, we clear the index before inserting new documents.

// This prevents orphaned documents from remaining in the index.

if (typeof datasource.deleteAllDocuments === 'function') {

await datasource.deleteAllDocuments();

} else {

// TODO: Implement logic to remove documents not present in siteContent

console.warn('WARNING: datasource.deleteAllDocuments() is not available. The index may accumulate stale documents.');

}

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

MattIPv4 · 2025-08-26T18:52:51Z

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

+  projectId: process.env.NEW_ORAMA_PROJECT_ID || '',
+  apiKey: process.env.NEW_ORAMA_API_KEY || '',


I suspect the GitHub Actions workflow needs to be updated to expose these new env vars?

avivkeller

I'm still seeing one styling inconsistencies.

I'd love if: @apply was used when possible, and manual css was only on a if-needed basis.

Additionally, no style attributes should be needed.

Let me know if you need help with that

avivkeller · 2025-08-26T18:59:24Z

apps/site/components/Common/Searchbox/Chat/ChatMessage/index.module.css

+.chatLoadingWrapper {
+  align-items: center;
+  background-color: #0d121c;
+  border-radius: var(--radius-m, calc(12rem / var(--orama-base-font-size, 16)));
+  display: flex;
+  justify-content: center;
+  margin: 0 var(--spacing-l, calc(16rem / var(--orama-base-font-size, 16)));
+  margin-bottom: 24px;
+  min-height: 60px;
+  padding: 24px;
+}


Can all of these / most of these be tailwind?

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

avivkeller · 2025-08-30T15:02:10Z

@aileenvl Do you mind if I rebase this + fix some of the formatting to align with our codebase?

(I'd need access to edit this PR

avivkeller

This cannot land until all of the following constraints are met:

CSS should use Tailwind when possible
Styles should (almost) never be defined via style=
Any/all environment constants should come from next.constants.mjs

aileenvl · 2025-08-30T16:56:55Z

This cannot land until all of the following constraints are met:

CSS should use Tailwind when possible

Styles should (almost) never be defined via style=

Any/all environment constants should come from next.constants.mjs

Will address this asap @avivkeller , thank you for the review

avivkeller · 2025-08-30T17:55:07Z

Please use requested changes for these cases, the blocked tag should be used when there are things out of our reach blocking the pr.

@araujogui Those were unrelated. The (now-removed) blocked label was referring to the unset API keys.

araujogui · 2025-08-30T18:30:02Z

Please use requested changes for these cases, the blocked tag should be used when there are things out of our reach blocking the pr.

@araujogui Those were unrelated. The (now-removed) blocked label was referring to the unset API keys.

Yeah, i misunderstood, mb

avivkeller

Really nice, but the CSS needs some work.

avivkeller · 2025-09-05T23:59:58Z

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

+          rows={1}
+          maxLength={500}
+          autoFocus
+          className={`${styles.promptFieldCustom} m-0 w-full resize-none border-none bg-transparent p-0 font-normal leading-relaxed text-white outline-none`}


These should all use the classNames function

avivkeller · 2025-09-06T00:02:06Z

apps/site/components/Common/Searchbox/Chat/ChatMessage/index.module.css

+  padding: 0;
+}
+
+.chatAssistantMessage p {


These can be nested

avivkeller · 2025-09-06T00:02:27Z

apps/site/components/Common/Searchbox/Chat/ChatMessage/index.module.css

+}
+
+.chatAssistantMessage ul {
+  @apply list-disc,


No comma needed. I was incorrect earlier.

This reverts commit 43d8cac.

g-francesca and others added 12 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

aileenvl requested review from a team as code owners July 9, 2025 19:07

vercel bot deployed to Preview July 9, 2025 19:09 View deployment

avivkeller added the blocked label Jul 9, 2025

avivkeller reviewed Jul 9, 2025

View reviewed changes

avivkeller marked this pull request as draft July 9, 2025 20:00

avivkeller changed the title ~~DRAFT: Orama core updates~~ feat(orama): use new UI components Jul 9, 2025

avivkeller reviewed Jul 9, 2025

View reviewed changes

apps/site/scripts/orama-search/sync-orama-cloud.mjs Outdated Show resolved Hide resolved

aileenvl and others added 5 commits July 9, 2025 19:24

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]>

vercel bot deployed to Preview July 10, 2025 01:26 View deployment

aileenvl added 2 commits July 9, 2025 20:14

fix height and pr comments

d37297f

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

954ee99

avivkeller added the blocked label Aug 25, 2025

fix blur

4892e1d

Copilot AI review requested due to automatic review settings August 26, 2025 18:42

Copilot AI reviewed Aug 26, 2025

View reviewed changes

vercel bot deployed to Preview August 26, 2025 18:43 View deployment

MattIPv4 reviewed Aug 26, 2025

View reviewed changes

avivkeller reviewed Aug 26, 2025

View reviewed changes

env variables and dispatcher

db4f272

vercel bot deployed to Preview August 26, 2025 19:12 View deployment

MattIPv4 reviewed Aug 26, 2025

View reviewed changes

apps/site/components/Common/Searchbox/Search/index.tsx Outdated Show resolved Hide resolved

MattIPv4 mentioned this pull request Aug 26, 2025

Prepare for new Orama API Keys #8012

Closed

avivkeller removed the blocked label Aug 29, 2025

avivkeller requested changes Aug 30, 2025

View reviewed changes

change css to tailwind, remove inline styles and add env constant

e7c235e

vercel bot deployed to Preview September 1, 2025 05:56 View deployment

update orama core and add data source

5e3d6e5

vercel bot deployed to Preview September 2, 2025 17:02 View deployment

avivkeller reviewed Sep 6, 2025

View reviewed changes

fixes css

43d8cac

vercel bot had a problem deploying to Preview September 8, 2025 14:30 Failure

Revert "fixes css"

ec1c340

This reverts commit 43d8cac.

vercel bot had a problem deploying to Preview September 8, 2025 14:40 Failure

Add .env to gitignore to prevent accidental commits

f1d7ac0

vercel bot deployed to Preview September 8, 2025 14:45 View deployment

Merge remote-tracking branch 'upstream/main'

3a209c7

vercel bot deployed to Preview September 9, 2025 10:15 View deployment

		// The new API from @orama/core might have a different approach for full sync.
		// Based on the provided examples, we are now only running the update.

-// The new API from @orama/core might have a different approach for full sync.
-// Based on the provided examples, we are now only running the update.
+// To ensure a true full sync, we clear the index before inserting new documents.
+// This prevents orphaned documents from remaining in the index.
+if (typeof datasource.deleteAllDocuments === 'function') {
+  await datasource.deleteAllDocuments();
+} else {
+  // TODO: Implement logic to remove documents not present in siteContent
+  console.warn('WARNING: datasource.deleteAllDocuments() is not available. The index may accumulate stale documents.');
+}

		projectId: process.env.NEW_ORAMA_PROJECT_ID \|\| '',
		apiKey: process.env.NEW_ORAMA_API_KEY \|\| '',

Uh oh!

feat(orama): use new UI components #7971

Are you sure you want to change the base?

feat(orama): use new UI components #7971

Conversation

aileenvl commented Jul 9, 2025 • edited by avivkeller Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Validation

Related Issues

Check List

Uh oh!

vercel bot commented Jul 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

avivkeller 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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Jul 10, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Key Changes

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI Aug 26, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

MattIPv4 Aug 26, 2025

Choose a reason for hiding this comment

Uh oh!

avivkeller left a comment

Choose a reason for hiding this comment

Uh oh!

avivkeller Aug 26, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

avivkeller commented Aug 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

avivkeller left a comment

Choose a reason for hiding this comment

Uh oh!

aileenvl commented Aug 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

avivkeller commented Aug 30, 2025

Uh oh!

araujogui commented Aug 30, 2025

Uh oh!

avivkeller left a comment

Choose a reason for hiding this comment

Uh oh!

avivkeller Sep 5, 2025

Choose a reason for hiding this comment

Uh oh!

avivkeller Sep 6, 2025

Choose a reason for hiding this comment

Uh oh!

avivkeller Sep 6, 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!

Uh oh!

aileenvl commented Jul 9, 2025 •

edited by avivkeller

Loading

vercel bot commented Jul 9, 2025 •

edited

Loading

avivkeller commented Aug 30, 2025 •

edited

Loading

aileenvl commented Aug 30, 2025 •

edited

Loading

avivkeller Sep 6, 2025 •

edited

Loading