source menu style fix

curieo-org · Jun 20, 2024 · b4cf36e · b4cf36e
1 parent 838730a
commit b4cf36e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 14 deletions.
diff --git a/frontend/src/components/search/sources-menu.tsx b/frontend/src/components/search/sources-menu.tsx
@@ -1,5 +1,5 @@
 import { Source } from '@/types/search'
-import { HTMLAttributes } from 'react'
+import { HTMLAttributes, useEffect, useRef, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import LayersIcon from '../icons/layers'
 import { H2 } from '../lib/typography'
@@ -8,14 +8,36 @@ import LinkPreview from '../util/link-preview'
 type SourcesMenuProps = HTMLAttributes<HTMLDivElement> & { sources: Source[] }
 
 export default function SourcesMenu(props: SourcesMenuProps) {
+  const [updateCount, setUpdateCount] = useState(0)
+  const [listHeight, setListHeight] = useState(100)
+  const containerRef = useRef<HTMLDivElement>(null)
   const { sources, className, ...rest } = props
+
+  useEffect(() => {
+    if (updateCount < 5) {
+      const interval = setInterval(() => {
+        setUpdateCount(prevCount => prevCount + 1)
+        if (containerRef.current) {
+          setListHeight(Math.max(containerRef.current.offsetHeight - 70, 100))
+        } else {
+          clearInterval(interval)
+        }
+      }, 100)
+
+      return () => clearInterval(interval)
+    }
+  }, [updateCount])
+
   return (
-    <div className={twMerge('w-full', className)} {...rest}>
+    <div className={twMerge('w-full', className)} {...rest} ref={containerRef}>
       <div className="flex items-center justify-center gap-x-2 py-2 mb-2 mr-2.5 bg-white/10 border border-white/10 rounded-lg">
         <LayersIcon className="text-typography-light dark:text-typography-dark" size={14} />
         <H2 className="font-medium text-[#DDDDE3] text-sm">Sources</H2>
       </div>
-      <div className="flex flex-col gap-y-2.5 overflow-y-scroll scrollbar-visible h-5/6 pr-1">
+      <div
+        className="flex flex-col gap-y-2.5 overflow-y-scroll scrollbar-visible pr-1"
+        style={{ maxHeight: listHeight }}
+      >
         {sources.map((source, index) => (
           <LinkPreview
             style={{ animation: `fade-in ${Math.min(500 + index * 500, 3000)}ms` }}

diff --git a/frontend/src/components/search/thread.tsx b/frontend/src/components/search/thread.tsx
@@ -58,10 +58,6 @@ export default function Thread(props: ThreadProps) {
     }
   }, [isTimedOut])
 
-  useEffect(() => {
-    console.log('isloading', isLoading)
-  }, [isLoading])
-
   return (
     <div className={twMerge('w-full min-h-screen flex flex-col justify-between', props.className)}>
       <div className="flex flex-col">
@@ -78,7 +74,7 @@ export default function Thread(props: ThreadProps) {
         </div>
       </div>
 
-      <div className="w-full sticky bottom-0 pb-4 px-8 -mb-4 flex justify-start backdrop-blur-sm">
+      <div className="w-full sticky bottom-0 pb-4 px-8 flex justify-start backdrop-blur-sm max-w-[840px]">
         <SearchInput handleSearch={handleSearch} searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
       </div>
     </div>

diff --git a/frontend/src/queries/search/search-query.ts b/frontend/src/queries/search/search-query.ts
@@ -15,28 +15,23 @@ export const useSearchQuery = (
   const [isTimedOut, setIsTimedOut] = useState(false)
 
   useEffect(() => {
-    console.log('querytrigger', queryTrigger)
     if (queryTrigger) {
       setIsCompleted(false)
       setIsError(false)
-      console.log('event source before')
       const eventSource = new EventSource(
         `/backend-api/search?query=${searchQuery}${threadId ? `&thread_id=${threadId}` : ``}`,
         {
           withCredentials: true,
         }
       )
 
-      console.log('event source after')
-
       let timeoutId: NodeJS.Timeout
 
       const resetHeartbeatTimeout = () => {
         clearTimeout(timeoutId)
         timeoutId = setTimeout(() => {
           eventSource.close()
           setIsTimedOut(true)
-          console.log('EventSource connection closed due to heartbeat timeout')
         }, 5000)
       }
 
@@ -50,7 +45,6 @@ export const useSearchQuery = (
       }
 
       eventSource.onerror = err => {
-        console.log('event source eror', err)
         clearTimeout(timeoutId)
         setIsCompleted(true)
         eventSource.close()