feat: wip

latitude-dev · Sep 28, 2024 · 2374049 · 2374049
1 parent 483858c
commit 2374049
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 52 deletions.
diff --git a/...valuations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/Messages.tsx b/...valuations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/Messages.tsx
@@ -23,9 +23,8 @@ export function EvaluationResultMessages({
 
   if (!providerLog) return null
   return (
-    <div className='flex flex-col gap-4 py-6 w-full max-h-full overflow-y-auto'>
+    <div className='flex flex-col gap-4 py-6 w-full max-h-full'>
       <MessageList
-        collapsable
         messages={messages}
         messageLayout='vertical'
         separator

diff --git a/...]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/index.tsx b/...]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 
 import { EvaluationDto, ProviderLogDto } from '@latitude-data/core/browser'
 import {
@@ -12,6 +12,7 @@ import {
   ReactStateDispatch,
   TabSelector,
 } from '@latitude-data/web-ui'
+import useDynamicHeight from '$/hooks/useDynamicHeight'
 import useProviderLogs from '$/stores/providerLogs'
 import useSWR from 'swr'
 
@@ -83,23 +84,35 @@ export function EvaluationResultInfo({
   evaluationResult: EvaluationResultWithMetadata
   providerLog?: ProviderLogDto
 }) {
+  const ref = useRef<HTMLDivElement>(null)
   const [selectedTab, setSelectedTab] = useState<string>('metadata')
   const [selected, setSelected] = useState<MaybeDocumentLog>(null)
   const onClickOpen = useCallback(async () => {
     setSelected(evaluationResult.documentLogId)
   }, [evaluationResult.documentLogId])
+  const height = useDynamicHeight({ ref, paddingBottom: 16 })
   return (
     <>
-      <div className='w-80 flex-shrink-0 flex flex-col border border-border rounded-lg px-4 pt-6 items-center'>
-        <TabSelector
-          options={[
-            { label: 'Metadata', value: 'metadata' },
-            { label: 'Messages', value: 'messages' },
-          ]}
-          selected={selectedTab}
-          onSelect={setSelectedTab}
-        />
-        <div className='flex flex-col relative w-full h-full max-h-full max-w-full overflow-auto'>
+      <div
+        ref={ref}
+        className='relative w-80 flex-shrink-0 flex flex-col border border-border rounded-lg items-center custom-scrollbar overflow-y-auto'
+        style={{
+          maxHeight: height ? `${height}px` : 'auto',
+        }}
+      >
+        <div className='z-10 w-full sticky top-0 px-4 bg-white flex justify-center'>
+          <div className='pt-6'>
+            <TabSelector
+              options={[
+                { label: 'Metadata', value: 'metadata' },
+                { label: 'Messages', value: 'messages' },
+              ]}
+              selected={selectedTab}
+              onSelect={setSelectedTab}
+            />
+          </div>
+        </div>
+        <div className='px-4 flex flex-col relative w-full h-full max-h-full max-w-full'>
           {selectedTab === 'metadata' && (
             <EvaluationResultMetadata
               evaluation={evaluation}

diff --git a/packages/web-ui/src/ds/molecules/Chat/MessageList/index.tsx b/packages/web-ui/src/ds/molecules/Chat/MessageList/index.tsx
@@ -1,57 +1,27 @@
 'use client'
 
-import { Fragment, useState } from 'react'
+import { Fragment } from 'react'
 
 import { Message as ConversationMessage } from '@latitude-data/compiler'
 
-import { Button } from '../../../atoms'
 import { Message, MessageProps } from '../Message'
 
 export function MessageList({
   messages,
   variant,
   messageLayout,
   separator = false,
-  collapsable = false,
   size,
 }: {
   messages: ConversationMessage[]
   variant?: MessageProps['variant']
   messageLayout?: MessageProps['layout']
-  collapsable?: boolean
   size?: MessageProps['size']
   separator?: boolean
 }) {
-  const [isCollapsed, setIsCollapsed] = useState(
-    collapsable && messages.length > 1,
-  )
-
-  const visibleMessages = isCollapsed ? messages.slice(-1) : messages
-  const hiddenMessagesCount = messages.length - visibleMessages.length
-
   return (
     <div className='flex flex-col gap-4'>
-      {isCollapsed && messages.length > 1 && (
-        <div className='relative cursor-pointer h-24 overflow-hidden'>
-          <div className='opacity-50 pointer-events-none absolute top-0 left-0 right-0 scale-90 origin-top'>
-            <Message
-              role={messages[messages.length - 2]!.role}
-              content={messages[messages.length - 2]!.content}
-              variant={variant}
-              layout={messageLayout}
-              size={size}
-            />
-          </div>
-          <div className='absolute inset-0 bg-gradient-to-t from-white via-white to-transparent' />
-          <div className='absolute bottom-0 left-0 right-0 text-center p-2 text-sm text-gray-600'>
-            <Button variant='secondary' onClick={() => setIsCollapsed(false)}>
-              {hiddenMessagesCount} previous{' '}
-              {hiddenMessagesCount > 1 ? 'messages' : 'message'}
-            </Button>
-          </div>
-        </div>
-      )}
-      {visibleMessages.map((message, index) => (
+      {messages.map((message, index) => (
         <Fragment key={index}>
           {separator && index > 0 && (
             <div className='h-px min-h-px w-full bg-border' />
@@ -65,13 +35,6 @@ export function MessageList({
           />
         </Fragment>
       ))}
-      {!isCollapsed && collapsable && messages.length > 1 && (
-        <div className='text-center cursor-pointer text-sm text-gray-600 hover:text-gray-800'>
-          <Button variant='secondary' onClick={() => setIsCollapsed(true)}>
-            Collapse conversation
-          </Button>
-        </div>
-      )}
     </div>
   )
 }