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	Aug 26, 2025 7:12pm

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

avivkeller · 2025-07-09T19:53:01Z

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

+                        (hit.document.siteSection as string).toLowerCase() ===
+                        'docs'
+                          ? `/${hit.document.path}`
+                          : `/${locale}/${hit.document.path}`
+                      }


Can we put this in utils?

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!

avivkeller · 2025-08-23T13:41:00Z

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

@@ -1,18 +1,16 @@
-import { CloudManager } from '@oramacloud/client';
+import { OramaCloud } from '@orama/core';

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

 // The following follows the instructions at https://docs.orama.com/cloud/data-sources/custom-integrations/webhooks


Is there a new link for this?

avivkeller · 2025-08-23T13:43:27Z

Unblocking, since the environment variables have been set, I believe

ovflowd · 2025-08-25T17:26:48Z

Unblocking, since the environment variables have been set, I believe

@MattIPv4 have they? 🤔

MattIPv4 · 2025-08-25T17:55:09Z

Unless you've set the production ones in Vercel that I couldn't, no, they've not been set. I've also not been sent any of the preview environment variables to be set yet.

ovflowd · 2025-08-25T18:09:51Z

Unless you've set the production ones in Vercel that I couldn't, no, they've not been set. I've also not been sent any of the preview environment variables to be set yet.

I don't have the production ones either. I think we can get the PR from nodejs/email merged and that should do it. Or you can attempt to login again and I'll send you the codes for the meantime :)

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?

MattIPv4 · 2025-08-26T19:42:46Z

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

+  });
+
+  const dataSourcesRef = useRef<Array<string>>([
+    process.env.NEXT_PUBLIC_ORAMA_DATASOURCE_ID || '',


This env var does not exist, as I was told it was not needed for the frontend. Should it be set in Vercel, or can the code be written here such that its not needed?

Hi @MattIPv4 yes sorry this one will also be needed

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

vercel bot deployed to Preview August 23, 2025 01:49 View deployment

fix facet count

5a7c885

vercel bot deployed to Preview August 23, 2025 02:05 View deployment

reset searchTerm

7aa8350

vercel bot deployed to Preview August 23, 2025 02:34 View deployment

old logo

89d9d71

vercel bot deployed to Preview August 23, 2025 02:36 View deployment

fix mobile search

80065bf

vercel bot deployed to Preview August 23, 2025 02:52 View deployment

chat mobile

78c4f3f

vercel bot deployed to Preview August 23, 2025 03:37 View deployment

mobile enhacements

29f2faf

vercel bot deployed to Preview August 23, 2025 06:45 View deployment

avivkeller reviewed Aug 23, 2025

View reviewed changes

avivkeller removed the blocked label Aug 23, 2025

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

MattIPv4 mentioned this pull request Aug 26, 2025

Prepare for new Orama API Keys #8012

Open

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

avivkeller Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Jul 10, 2025

Uh oh!

avivkeller Aug 23, 2025

Choose a reason for hiding this comment

Uh oh!

avivkeller commented Aug 23, 2025

Uh oh!

ovflowd commented Aug 25, 2025

Uh oh!

MattIPv4 commented Aug 25, 2025

Uh oh!

ovflowd commented Aug 25, 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!

MattIPv4 Aug 26, 2025

Choose a reason for hiding this comment

Uh oh!

aileenvl Aug 26, 2025

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