minor: added reason and result in evaluation metadata

latitude-dev · Sep 20, 2024 · 4a3d475 · 4a3d475
1 parent c63d36f
commit 4a3d475
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 16 deletions.
diff --git a/...valuations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/Metadata.tsx b/...valuations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/Metadata.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
 
-import { ProviderLogDto } from '@latitude-data/core/browser'
+import { EvaluationDto, ProviderLogDto } from '@latitude-data/core/browser'
 import { EvaluationResultWithMetadata } from '@latitude-data/core/repositories'
 import {
   ClickToCopy,
@@ -13,40 +13,51 @@ import { formatCostInMillicents } from '$/app/_lib/formatUtils'
 import useProviderApiKeys from '$/stores/providerApiKeys'
 import { format } from 'date-fns'
 
+import { ResultCellContent } from '../EvaluationResultsTable'
+
 function MetadataItem({
   label,
+  stacked = false,
   value,
   loading,
   children,
 }: {
+  stacked?: boolean
   label: string
   value?: string
   loading?: boolean
   children?: ReactNode
 }) {
+  const className = stacked
+    ? 'flex-flex-col gap-2'
+    : 'flex flex-row justify-between items-center gap-2'
   return (
-    <div className='flex flex-row justify-between items-center gap-2'>
+    <div className={className}>
       <Text.H5M color='foreground'>{label}</Text.H5M>
-      {loading ? (
-        <Skeleton className='w-12 h-4 bg-muted-foreground/10' />
-      ) : (
-        <>
-          {value && (
-            <Text.H5 align='right' color='foregroundMuted'>
-              {value}
-            </Text.H5>
-          )}
-          {children}
-        </>
-      )}
+      <div>
+        {loading ? (
+          <Skeleton className='w-12 h-4 bg-muted-foreground/10' />
+        ) : (
+          <>
+            {value && (
+              <Text.H5 align='right' color='foregroundMuted'>
+                {value}
+              </Text.H5>
+            )}
+            {children}
+          </>
+        )}
+      </div>
     </div>
   )
 }
 
 export function EvaluationResultMetadata({
+  evaluation,
   evaluationResult,
   providerLog,
 }: {
+  evaluation: EvaluationDto
   evaluationResult: EvaluationResultWithMetadata
   providerLog?: ProviderLogDto
 }) {
@@ -112,6 +123,32 @@ export function EvaluationResultMetadata({
           </Text.H5>
         </ClickToCopy>
       </MetadataItem>
+      <MetadataItem label='Result' loading={!evaluation || !evaluationResult}>
+        <ResultCellContent
+          evaluation={evaluation}
+          value={evaluationResult.result}
+        />
+      </MetadataItem>
+      <MetadataItem
+        stacked
+        label='Result reasoning'
+        loading={!providerLog}
+        value={getReasonFromProviderLog(providerLog)}
+      />
     </div>
   )
 }
+
+function getReasonFromProviderLog(providerLog?: ProviderLogDto) {
+  if (!providerLog) return '-'
+
+  try {
+    const response = JSON.parse(providerLog?.response)
+    if (response) {
+      return response.reason || '-'
+    }
+    return '-'
+  } catch (e) {
+    return '-'
+  }
+}
diff --git a/...]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/index.tsx b/...]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/index.tsx
@@ -2,17 +2,19 @@
 
 import { useState } from 'react'
 
-import { ProviderLogDto } from '@latitude-data/core/browser'
+import { EvaluationDto, ProviderLogDto } from '@latitude-data/core/browser'
 import { EvaluationResultWithMetadata } from '@latitude-data/core/repositories'
 import { TabSelector } from '@latitude-data/web-ui'
 
 import { EvaluationResultMessages } from './Messages'
 import { EvaluationResultMetadata } from './Metadata'
 
 export function EvaluationResultInfo({
+  evaluation,
   evaluationResult,
   providerLog,
 }: {
+  evaluation: EvaluationDto
   evaluationResult: EvaluationResultWithMetadata
   providerLog?: ProviderLogDto
 }) {
@@ -30,6 +32,7 @@ export function EvaluationResultInfo({
       <div className='flex relative w-full h-full max-h-full max-w-full overflow-auto'>
         {selectedTab === 'metadata' && (
           <EvaluationResultMetadata
+            evaluation={evaluation}
             evaluationResult={evaluationResult}
             providerLog={providerLog}
           />

diff --git a/...Uuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultsTable.tsx b/...Uuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultsTable.tsx
@@ -19,7 +19,7 @@ import {
 } from '@latitude-data/web-ui'
 import { formatCostInMillicents, relativeTime } from '$/app/_lib/formatUtils'
 
-const ResultCellContent = ({
+export const ResultCellContent = ({
   evaluation,
   value,
 }: {

diff --git a/...cuments/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/index.tsx b/...cuments/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/index.tsx
@@ -68,6 +68,7 @@ export function EvaluationResults({
         </div>
         {selectedResult && (
           <EvaluationResultInfo
+            evaluation={evaluation}
             evaluationResult={selectedResult}
             providerLog={providerLog}
           />