feat(website): implement search functionality for documentation and blog with backend integration

Author: aymericzip

apps/backend/src/controllers/search.controller.ts

@@ -0,0 +1,31 @@
+import type { ResponseWithInformation } from '@middlewares/sessionAuth.middleware';
+import * as askDocQuestionUtil from '@utils/AI/askDocQuestion/askDocQuestion';
+import { formatResponse, type ResponseData } from '@utils/responseData';
+import type { Request } from 'express';
+
+export type SearchDocUtilParams = {
+  input: string;
+};
+export type SearchDocUtilResult = ResponseData<string[]>;
+
+export const searchDocUtil = async (
+  req: Request<unknown, unknown, unknown, SearchDocUtilParams>,
+  res: ResponseWithInformation<SearchDocUtilResult>
+) => {
+  const { input } = req.query;
+
+  const response = await askDocQuestionUtil.searchChunkReference(
+    input,
+    30,
+    0.2
+  );
+  const docFileList = response.map((doc) => doc.fileKey);
+
+  const uniqueDocFileList = Array.from(new Set(docFileList));
+
+  const responseData = formatResponse<string[]>({
+    data: uniqueDocFileList,
+  });
+
+  res.json(responseData);
+};

apps/backend/src/export.ts

@@ -13,6 +13,7 @@ export type * from '@controllers/oAuth2.controller';
 export type * from '@controllers/organization.controller';
 export type * from '@controllers/project.controller';
 export type * from '@controllers/projectAccessKey.controller';
+export type * from '@controllers/search.controller';
 export type * from '@controllers/sessionAuth.controller';
 export type * from '@controllers/stripe.controller';
 export type * from '@controllers/tag.controller';

apps/backend/src/index.ts

@@ -16,22 +16,23 @@ import {
 import { logAPIRequestURL } from '@middlewares/request.middleware';
 import {
   type ResponseWithInformation,
-  checkUser,
+  checkAdmin,
   checkOrganization,
   checkProject,
-  checkAdmin,
+  checkUser,
 } from '@middlewares/sessionAuth.middleware';
 
 // Routes
+import { aiRouter } from '@routes/ai.routes';
 import { dictionaryRouter } from '@routes/dictionary.routes';
+import { eventListenerRouter } from '@routes/eventListener.routes';
 import { organizationRouter } from '@routes/organization.routes';
 import { projectRouter } from '@routes/project.routes';
-import { tagRouter } from '@routes/tags.routes';
+import { searchRouter } from '@routes/search.routes';
 import { sessionAuthRouter } from '@routes/sessionAuth.routes';
-import { userRouter } from '@routes/user.routes';
 import { stripeRouter } from '@routes/stripe.routes';
-import { aiRouter } from '@routes/ai.routes';
-import { eventListenerRouter } from '@routes/eventListener.routes';
+import { tagRouter } from '@routes/tags.routes';
+import { userRouter } from '@routes/user.routes';
 
 // Webhooks
 import { stripeWebhook } from '@webhooks/stripe.webhook';
@@ -187,6 +188,7 @@ app.use('/api/dictionary', dictionaryRouter);
 app.use('/api/stripe', stripeRouter);
 app.use('/api/ai', aiRouter);
 app.use('/api/event-listener', eventListenerRouter);
+app.use('/api/search', searchRouter);
 
 // Server
 app.listen(process.env.PORT, () => {

apps/backend/src/routes/search.routes.ts

@@ -0,0 +1,18 @@
+import type { Routes } from '@/types/Routes';
+import { searchDocUtil } from '@controllers/search.controller';
+import { Router } from 'express';
+
+export const searchRouter: Router = Router();
+
+const baseURL = () => `${process.env.BACKEND_URL}/api/search`;
+
+export const getSearchRoutes = () =>
+  ({
+    doc: {
+      urlModel: '/doc',
+      url: `${baseURL()}/doc`,
+      method: 'GET',
+    },
+  }) satisfies Routes;
+
+searchRouter.get(getSearchRoutes().doc.urlModel, searchDocUtil);

apps/backend/src/utils/AI/askDocQuestion/askDocQuestion.ts

@@ -212,7 +212,9 @@ indexMarkdownFiles();
  * @returns An array of the top matching document chunks' content
  */
 export const searchChunkReference = async (
-  query: string
+  query: string,
+  maxResults: number = MAX_RELEVANT_CHUNKS_NB,
+  minSimilarity: number = MIN_RELEVANT_CHUNKS_SIMILARITY
 ): Promise<VectorStoreEl[]> => {
   // Generate an embedding for the user's query
   const queryEmbedding = await generateEmbedding(query);
@@ -223,9 +225,9 @@ export const searchChunkReference = async (
       ...chunk,
       similarity: cosineSimilarity(queryEmbedding, chunk.embedding), // Add similarity score to each doc
     }))
-    .filter((chunk) => chunk.similarity > MIN_RELEVANT_CHUNKS_SIMILARITY) // Filter out documents with low similarity scores
+    .filter((chunk) => chunk.similarity > minSimilarity) // Filter out documents with low similarity scores
     .sort((a, b) => b.similarity - a.similarity) // Sort documents by highest similarity first
-    .slice(0, MAX_RELEVANT_CHUNKS_NB); // Select the top 6 most similar documents
+    .slice(0, maxResults); // Select the top 6 most similar documents
 
   // Return the content of the top matching documents
   return results;

apps/website/src/app/[locale]/(landing)/blog/search/page.tsx

@@ -1,4 +1,4 @@
-import { SearchView } from '@components/BlogPage/Search/SearchView';
+import { SearchView } from '@components/DocPage/Search/SearchView';
 import { Container, H1, Loader } from '@intlayer/design-system';
 import { WebsiteHeader } from '@structuredData/WebsiteHeader';
 import type { NextPageIntlayer } from 'next-intlayer';

apps/website/src/components/BlogPage/BlogNavList.tsx

@@ -1,21 +1,21 @@
 'use client';
 
-import { SearchTrigger } from '@components/BlogPage/Search/SearchTrigger';
+import { PagesRoutes } from '@/Routes';
+import { SearchTrigger } from '@components/DocPage/Search/SearchTrigger';
 import { Link } from '@components/Link/Link';
 import {
-  Container,
   Accordion,
   Button,
-  MaxWidthSmoother,
   ClickOutsideDiv,
+  Container,
+  MaxWidthSmoother,
 } from '@intlayer/design-system';
 import { useDevice } from '@intlayer/design-system/hooks';
 import { cn } from '@utils/cn';
 import { ArrowLeftToLine } from 'lucide-react';
 import { useIntlayer } from 'next-intlayer';
 import { useState, type ComponentProps, type FC } from 'react';
 import type { Section } from './types';
-import { PagesRoutes } from '@/Routes';
 
 type OptionalLinkProps = ComponentProps<typeof Link>;