Enhance search functionality

neel1996 · Aug 31, 2023 · 49888be · 49888be
1 parent fa3426b
commit 49888be
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 7 deletions.
diff --git a/...hat/components/ChatElements/CodeBlock.jsx → src/app/CodeBlock.jsx b/...hat/components/ChatElements/CodeBlock.jsx → src/app/CodeBlock.jsx
diff --git a/src/app/api/search/search.js b/src/app/api/search/search.js
@@ -25,7 +25,7 @@ export const search = async (query) => {
   });
 
   const { text: content } = await paraphraseChain.call({
-    rawContent: closestMatch.chunk_content
+    rawContent: closestMatch.chunk_content.slice(0, 6000)
   });
 
   const { answer, error: chainError } = await sequentialPipeline({

diff --git a/src/app/chat/components/ChatElements/ChatItem.jsx b/src/app/chat/components/ChatElements/ChatItem.jsx
@@ -1,11 +1,10 @@
 import format from 'date-fns/format';
 import React, { memo, useEffect } from 'react';
 
+import CodeBlock from '@/app/CodeBlock';
 import { Face6, SmartToy } from '@mui/icons-material';
 import { Box, Card, Grid, Icon, ListItem, Typography } from '@mui/material';
 
-import CodeBlock from './CodeBlock';
-
 export default memo(function ChatItem({
   rowPosition,
   style,

diff --git a/src/app/chat/layout.js b/src/app/chat/layout.js
@@ -0,0 +1,31 @@
+import { Inter } from 'next/font/google';
+import { Suspense } from 'react';
+
+import Loading from '../loading';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata = {
+  title: 'Chat with your docs',
+  description: 'App to chat with docs'
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <script
+          type="text/javascript"
+          id="MathJax-script"
+          async
+          src="https://cdn.jsdelivr.net/npm/mathjax@3.2.1/es5/tex-mml-chtml.js"
+        ></script>
+      </head>
+      <body className={inter.className}>
+        <div>
+          <Suspense fallback={<Loading />}>{children}</Suspense>
+        </div>
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/layout.js b/src/app/layout.js
@@ -1,11 +1,13 @@
 import { Inter } from 'next/font/google';
+import { Suspense } from 'react';
 
 import './globals.css';
+import Loading from './loading';
 
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata = {
-  title: 'Just a doc QA bot!',
+  title: 'Search your docs',
   description: 'App to chat with docs'
 };
 
@@ -20,7 +22,9 @@ export default function RootLayout({ children }) {
           src="https://cdn.jsdelivr.net/npm/mathjax@3.2.1/es5/tex-mml-chtml.js"
         ></script>
       </head>
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <Suspense fallback={<Loading />}>{children}</Suspense>
+      </body>
     </html>
   );
 }
diff --git a/src/app/loading.js b/src/app/loading.js
@@ -0,0 +1,14 @@
+'use client';
+
+import React from 'react';
+import { FallingLines } from 'react-loader-spinner';
+
+import { Backdrop } from '@mui/material';
+
+export default function Loading() {
+  return (
+    <Backdrop open={true}>
+      <FallingLines color="#8b9aee" />
+    </Backdrop>
+  );
+}
diff --git a/src/app/search/ResultBox.jsx b/src/app/search/ResultBox.jsx
@@ -1,9 +1,34 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { PushPin } from '@mui/icons-material';
 import { Box, Grid, Typography } from '@mui/material';
 
+import CodeBlock from '../CodeBlock';
+
 export default function ResultBox({ answer }) {
+  useEffect(() => {
+    if (typeof window?.MathJax !== 'undefined') {
+      window.MathJax = {
+        ...window.MathJax,
+        tex: {
+          inlineMath: [
+            ['$', '$'],
+            ['\\(', '\\)']
+          ],
+          packages: { '[+]': ['mhchem', 'color'] },
+          color: {
+            padding: '5px',
+            borderWidth: '2px'
+          }
+        },
+        loader: { load: ['[tex]/mhchem', '[tex]/color'] }
+      };
+
+      window.MathJax.typesetClear();
+      window.MathJax.typesetPromise();
+    }
+  }, []);
+
   return (
     <Box
       sx={{
@@ -42,7 +67,7 @@ export default function ResultBox({ answer }) {
             }
           }}
         >
-          {answer}
+          <CodeBlock message={answer} />
         </Typography>
       </Box>
     </Box>