From ee126a23505711e06c1e49e8bdc35e2c3b8a8d40 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Sat, 24 Aug 2024 23:05:12 -0400
Subject: [PATCH] style: temporarily remove scrolling, add better styling

---
 .../components/Artifacts/ArtifactButton.tsx   |  1 +
 client/src/components/Artifacts/Artifacts.tsx | 11 +--
 client/src/components/Artifacts/Code.tsx      | 86 +++++++------------
 client/src/hooks/Artifacts/useAutoScroll.ts   | 30 +++++++
 4 files changed, 63 insertions(+), 65 deletions(-)
 create mode 100644 client/src/hooks/Artifacts/useAutoScroll.ts

diff --git a/client/src/components/Artifacts/ArtifactButton.tsx b/client/src/components/Artifacts/ArtifactButton.tsx
index a1f32e8e73..de3e7b32c5 100644
--- a/client/src/components/Artifacts/ArtifactButton.tsx
+++ b/client/src/components/Artifacts/ArtifactButton.tsx
@@ -32,6 +32,7 @@ const ArtifactButton = ({ artifact }: { artifact: Artifact | null }) => {
           </div>
         </div>
       </button>
+      <br />
     </div>
   );
 };
diff --git a/client/src/components/Artifacts/Artifacts.tsx b/client/src/components/Artifacts/Artifacts.tsx
index 9eea91b45b..ffb60e4cc3 100644
--- a/client/src/components/Artifacts/Artifacts.tsx
+++ b/client/src/components/Artifacts/Artifacts.tsx
@@ -1,7 +1,7 @@
 import * as Tabs from '@radix-ui/react-tabs';
-import { getFileExtension } from '~/utils/artifacts';
 import useArtifacts from '~/hooks/Artifacts/useArtifacts';
 import { CodeMarkdown, CopyCodeButton } from './Code';
+import { getFileExtension } from '~/utils/artifacts';
 import { ArtifactPreview } from './ArtifactPreview';
 import { cn } from '~/utils';
 
@@ -10,7 +10,6 @@ export default function Artifacts() {
     isVisible,
     activeTab,
     setActiveTab,
-    isSubmitting,
     currentIndex,
     cycleArtifact,
     currentArtifact,
@@ -80,19 +79,13 @@ export default function Artifacts() {
           {/* Content */}
           <Tabs.Content
             value="code"
-            className={cn(
-              'flex-grow overflow-auto bg-gray-900',
-              isSubmitting ? 'submitting' : '',
-              isSubmitting && (currentArtifact.content?.length ?? 0) > 0 ? 'result-streaming' : '',
-            )}
+            className={cn('flex-grow overflow-x-auto overflow-y-scroll bg-gray-900 p-4')}
           >
             <CodeMarkdown
-              showCursor={isSubmitting}
               content={`\`\`\`${getFileExtension(currentArtifact.type)}\n${
                 currentArtifact.content ?? ''
               }\`\`\``}
             />
-            {/* hidden div to scroll to could go here */}
           </Tabs.Content>
           <Tabs.Content value="preview" className="flex-grow overflow-auto bg-white">
             <ArtifactPreview artifact={currentArtifact} />
diff --git a/client/src/components/Artifacts/Code.tsx b/client/src/components/Artifacts/Code.tsx
index c07fd5c616..5b94bf8580 100644
--- a/client/src/components/Artifacts/Code.tsx
+++ b/client/src/components/Artifacts/Code.tsx
@@ -1,36 +1,13 @@
-import React, { useRef, RefObject, memo, useState } from 'react';
+import React, { memo, useState } from 'react';
 import rehypeKatex from 'rehype-katex';
 import ReactMarkdown from 'react-markdown';
 import rehypeHighlight from 'rehype-highlight';
 import copy from 'copy-to-clipboard';
-import { handleDoubleClick, cn, langSubset } from '~/utils';
+import { handleDoubleClick, langSubset } from '~/utils';
 import Clipboard from '~/components/svg/Clipboard';
 import CheckMark from '~/components/svg/CheckMark';
 import useLocalize from '~/hooks/useLocalize';
 
-type CodeBarProps = {
-  lang: string;
-  codeRef: RefObject<HTMLElement>;
-};
-
-type CodeBlockProps = Pick<CodeBarProps, 'lang'> & {
-  codeChildren: React.ReactNode;
-  classProp?: string;
-};
-
-const CodeBlock: React.FC<CodeBlockProps> = ({ lang, codeChildren, classProp = '' }) => {
-  const codeRef = useRef<HTMLElement>(null);
-  return (
-    <div className="w-full rounded-md bg-gray-900 text-xs text-white/80">
-      <div className={cn(classProp, 'overflow-y-auto p-4')}>
-        <code ref={codeRef} className={`hljs language-${lang} !whitespace-pre`}>
-          {codeChildren}
-        </code>
-      </div>
-    </div>
-  );
-};
-
 type TCodeProps = {
   inline: boolean;
   className?: string;
@@ -49,41 +26,38 @@ export const code: React.ElementType = memo(({ inline, className, children }: TC
     );
   }
 
-  return <CodeBlock lang={lang ?? 'text'} codeChildren={children} />;
+  return <code className={`hljs language-${lang} !whitespace-pre`}>{children}</code>;
 });
 
-const cursor = ' ';
-export const CodeMarkdown = memo(
-  ({ content = '', showCursor }: { content: string; showCursor?: boolean }) => {
-    const currentContent = content;
-    const rehypePlugins = [
-      [rehypeKatex, { output: 'mathml' }],
-      [
-        rehypeHighlight,
-        {
-          detect: true,
-          ignoreMissing: true,
-          subset: langSubset,
-        },
-      ],
-    ];
+export const CodeMarkdown = memo(({ content = '' }: { content: string }) => {
+  const currentContent = content;
+  const rehypePlugins = [
+    [rehypeKatex, { output: 'mathml' }],
+    [
+      rehypeHighlight,
+      {
+        detect: true,
+        ignoreMissing: true,
+        subset: langSubset,
+      },
+    ],
+  ];
 
-    return (
-      <ReactMarkdown
-        /* @ts-ignore */
-        rehypePlugins={rehypePlugins}
-        // linkTarget="_new"
-        components={
-          { code } as {
-            [key: string]: React.ElementType;
-          }
+  return (
+    <ReactMarkdown
+      /* @ts-ignore */
+      rehypePlugins={rehypePlugins}
+      // linkTarget="_new"
+      components={
+        { code } as {
+          [key: string]: React.ElementType;
         }
-      >
-        {showCursor === true ? currentContent + cursor : currentContent}
-      </ReactMarkdown>
-    );
-  },
-);
+      }
+    >
+      {currentContent}
+    </ReactMarkdown>
+  );
+});
 
 export const CopyCodeButton: React.FC<{ content: string }> = ({ content }) => {
   const localize = useLocalize();
diff --git a/client/src/hooks/Artifacts/useAutoScroll.ts b/client/src/hooks/Artifacts/useAutoScroll.ts
new file mode 100644
index 0000000000..3a03fc20fd
--- /dev/null
+++ b/client/src/hooks/Artifacts/useAutoScroll.ts
@@ -0,0 +1,30 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { useChatContext } from '~/Providers';
+
+export default function useAutoScroll() {
+  const { isSubmitting } = useChatContext();
+  const [showScrollButton, setShowScrollButton] = useState(false);
+  const scrollableRef = useRef<HTMLDivElement | null>(null);
+  const contentEndRef = useRef<HTMLDivElement | null>(null);
+
+  const scrollToBottom = useCallback(() => {
+    if (scrollableRef.current) {
+      scrollableRef.current.scrollTop = scrollableRef.current.scrollHeight;
+    }
+  }, []);
+
+  const handleScroll = useCallback(() => {
+    if (scrollableRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
+      setShowScrollButton(scrollHeight - scrollTop - clientHeight > 100);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isSubmitting) {
+      scrollToBottom();
+    }
+  }, [isSubmitting, scrollToBottom]);
+
+  return { scrollableRef, contentEndRef, handleScroll, scrollToBottom, showScrollButton };
+}