Fix rendering performances issues related to scrolling events (#174)

* memoize chat related components

* Avoid re-rendering ChatInput on every message udpate

* change the way the horizontal scrollbar is hidden

* make the scroll event listener passive

* perf(Chat): fix performances issues related to autoscroll

Uses the intersection API to determine autoscroll mode instead of listening for scroll events

* tuning detection of autoscroll

components/Markdown/CodeBlock.tsx

@@ -3,7 +3,7 @@ import {
   programmingLanguages,
 } from '@/utils/app/codeblock';
 import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react';
-import { FC, useState } from 'react';
+import { FC, useState, memo } from 'react';
 import { useTranslation } from 'next-i18next';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
@@ -13,7 +13,7 @@ interface Props {
   value: string;
 }
 
-export const CodeBlock: FC<Props> = ({ language, value }) => {
+export const CodeBlock: FC<Props> = memo(({ language, value }) => {
   const { t } = useTranslation('markdown');
   const [isCopied, setIsCopied] = useState<Boolean>(false);
 
@@ -92,4 +92,5 @@ export const CodeBlock: FC<Props> = ({ language, value }) => {
       </SyntaxHighlighter>
     </div>
   );
-};
+});
+CodeBlock.displayName = 'CodeBlock';

components/Markdown/MemoizedReactMarkdown.tsx

@@ -0,0 +1,4 @@
+import { FC, memo } from 'react';
+import ReactMarkdown, { Options } from 'react-markdown';
+
+export const MemoizedReactMarkdown: FC<Options> = memo(ReactMarkdown);