Fix scrolling on answer

SciPhi-AI · Jun 26, 2024 · f5c826d · f5c826d
1 parent e39ebd4
commit f5c826d
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 41 deletions.
diff --git a/package.json b/package.json
@@ -63,7 +63,7 @@
     "pnpm": "^9.4.0",
     "postcss": "^8.4.38",
     "posthog-js": "^1.141.4",
-    "r2r-js": "^1.0.24",
+    "r2r-js": "^1.0.26",
     "radix-ui": "^1.0.1",
     "react": "18.3.1",
     "react-chartjs-2": "^5.2.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/ChatDemo/answer.tsx b/src/components/ChatDemo/answer.tsx
@@ -65,7 +65,7 @@ export const Answer: FC<{
       }
       content={
         markdown ? (
-          <div className="prose prose-sm max-w-full text-zinc-300">
+          <div className="prose prose-sm max-w-full text-zinc-300 overflow-y-auto max-h-[700px]">
             <Markdown
               components={{
                 h1: ({ node, ...props }) => (

diff --git a/src/pages/pipeline/[pipelineId]/playground.tsx b/src/pages/pipeline/[pipelineId]/playground.tsx
@@ -272,42 +272,44 @@ const Index: React.FC = () => {
 
                 <div
                   ref={contentAreaRef}
-                  className="flex-1 bg-zinc-800 rounded-r-2xl relative border-2 border-zinc-600 h-full overflow-hidden"
+                  className="flex-1 bg-zinc-800 rounded-r-2xl relative border-2 border-zinc-600 h-full flex flex-col"
                 >
                   <div className="h-20 pointer-events-none w-full backdrop-filter absolute top-0"></div>
-                  <div className="px-4 md:px-8 pt-6 pb-24 h-full">
-                    {activeTab === 'query' && (
-                      <>
-                        <Title
-                          query={query}
-                          userId={userId}
-                          model={selectedModel}
-                          setModel={setSelectedModel}
-                        ></Title>
-                        <Result
-                          key={`${query}-${Date.now()}`}
-                          query={query}
-                          model={selectedModel}
-                          userId={userId}
-                          apiUrl={apiUrl}
-                          temperature={temperature}
-                          topP={topP}
-                          topK={top_k}
-                          maxTokensToSample={max_tokens_to_sample}
-                          uploadedDocuments={uploadedDocuments}
-                          setUploadedDocuments={setUploadedDocuments}
-                          switches={switches}
-                        ></Result>
-                      </>
-                    )}
-                    {activeTab === 'graph' && (
-                      <div className="w-full h-full">
-                        <Neo4jGraph
-                          width={graphDimensions.width}
-                          height={graphDimensions.height}
-                        />
-                      </div>
-                    )}
+                  <div className="flex-grow overflow-y-auto">
+                    <div className="px-4 md:px-8 pt-6 pb-24 h-full">
+                      {activeTab === 'query' && (
+                        <>
+                          <Title
+                            query={query}
+                            userId={userId}
+                            model={selectedModel}
+                            setModel={setSelectedModel}
+                          ></Title>
+                          <Result
+                            key={`${query}-${Date.now()}`}
+                            query={query}
+                            model={selectedModel}
+                            userId={userId}
+                            apiUrl={apiUrl}
+                            temperature={temperature}
+                            topP={topP}
+                            topK={top_k}
+                            maxTokensToSample={max_tokens_to_sample}
+                            uploadedDocuments={uploadedDocuments}
+                            setUploadedDocuments={setUploadedDocuments}
+                            switches={switches}
+                          ></Result>
+                        </>
+                      )}
+                      {activeTab === 'graph' && (
+                        <div className="w-full h-full">
+                          <Neo4jGraph
+                            width={graphDimensions.width}
+                            height={graphDimensions.height}
+                          />
+                        </div>
+                      )}
+                    </div>
                   </div>
                   <div className="h-80 pointer-events-none w-full backdrop-filter absolute bottom-0 bg-gradient-to-b from-transparent to-zinc-900 [mask-image:linear-gradient(to_top,zinc-800,transparent)]"></div>
                   <div className="absolute inset-x-0 bottom-6 px-4 md:px-8">