minor: prettier messages (#321)

latitude-dev · Oct 1, 2024 · bfef1ef · bfef1ef
1 parent bf8b9b9
commit bfef1ef
Show file tree

Hide file tree

Showing 12 changed files with 57 additions and 128 deletions.
diff --git a/...on)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Chat/index.tsx b/...on)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Chat/index.tsx
@@ -156,18 +156,14 @@ export default function Chat({
               messages={
                 conversation?.messages.slice(chainLength - 1, chainLength) ?? []
               }
-              variant='accent'
             />
             {endTime && <Timer timeMs={endTime - startTime} />}
           </>
         )}
         {(conversation?.messages.length ?? 0) > chainLength && (
           <>
             <Text.H6M>Chat</Text.H6M>
-            <MessageList
-              messages={conversation!.messages.slice(chainLength)}
-              variant='outline'
-            />
+            <MessageList messages={conversation!.messages.slice(chainLength)} />
           </>
         )}
         {error ? (
@@ -188,7 +184,7 @@ export default function Chat({
         />
       </div>
       <div className='flex items-center justify-center'>
-        <Button fancy onClick={clearChat} variant='outline'>
+        <Button fancy onClick={clearChat}>
           Clear chat
         </Button>
       </div>

diff --git a/...b/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/import-logs/page.tsx b/...b/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/import-logs/page.tsx
@@ -10,6 +10,7 @@ import {
   Button,
   CloseTrigger,
   Modal,
+  roleVariant,
   Table,
   TableBody,
   TableCell,
@@ -225,19 +226,6 @@ const printMessageContent = (content: string | MessageContent[]) => {
   return '-'
 }
 
-const roleVariant = (role: string) => {
-  switch (role) {
-    case 'user':
-      return 'purple'
-    case 'system':
-      return 'outline'
-    case 'assistant':
-      return 'yellow'
-    default:
-      return 'default'
-  }
-}
-
 function ellipsis(str: string) {
   if (!str) return null
   return str.length > 30 ? str.substring(0, 30) + '...' : str

diff --git a/...ommitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/Chat.tsx b/...ommitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/Chat.tsx
@@ -210,18 +210,14 @@ export default function Chat({
               messages={
                 conversation?.messages.slice(chainLength - 1, chainLength) ?? []
               }
-              variant='accent'
             />
             {time && <Timer timeMs={time} />}
           </>
         )}
         {(conversation?.messages.length ?? 0) > chainLength && (
           <>
             <Text.H6M>Chat</Text.H6M>
-            <MessageList
-              messages={conversation!.messages.slice(chainLength)}
-              variant='outline'
-            />
+            <MessageList messages={conversation!.messages.slice(chainLength)} />
           </>
         )}
         {error ? (
@@ -320,7 +316,6 @@ export function StreamMessage({
       <Message
         role={MessageRole.assistant}
         content={[{ type: ContentType.text, text: responseStream }]}
-        variant='accent'
       />
     )
   }
@@ -329,7 +324,6 @@ export function StreamMessage({
     <Message
       role={MessageRole.assistant}
       content={[{ type: ContentType.text, text: responseStream }]}
-      variant='outline'
     />
   )
 }

diff --git a/...itUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/Preview.tsx b/...itUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/Preview.tsx
@@ -59,10 +59,12 @@ export default function Preview({
       ref={containerRef}
       className='flex flex-col gap-3 h-full overflow-y-auto'
     >
-      <Text.H6M>Preview</Text.H6M>
-      {(conversation?.messages ?? []).map((message, index) => (
-        <Message key={index} role={message.role} content={message.content} />
-      ))}
+      <div className='flex flex-col gap-2'>
+        <Text.H6M>Preview</Text.H6M>
+        {(conversation?.messages ?? []).map((message, index) => (
+          <Message key={index} role={message.role} content={message.content} />
+        ))}
+      </div>
       {error !== undefined && <ErrorMessage error={error} />}
       {!completed && (
         <div className='w-full py-1 px-4 bg-secondary rounded-lg'>

diff --git a/...mmitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/index.tsx b/...mmitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/index.tsx
@@ -65,7 +65,7 @@ export default function Playground({
         )}
       </Header>
       <div className='flex flex-col gap-6 relative'>
-        <div className='flex flex-col gap-3 max-h-[35vh] overflow-y-auto'>
+        <div className='flex flex-col gap-3 max-h-[35vh] overflow-y-auto pr-4 pb-4'>
           <Text.H6M>Inputs</Text.H6M>
           {Object.keys(inputs).length > 0 ? (
             Object.entries(inputs).map(([param, value], idx) => (

diff --git a/...ersions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/index.tsx b/...ersions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/index.tsx
@@ -158,7 +158,7 @@ export default function DocumentEditor({
             />
           </Suspense>
         </div>
-        <div className='flex flex-col flex-1 gap-2 overflow-y-auto max-h-[calc(100vh-150px)]'>
+        <div className='flex flex-col flex-1 gap-2 overflow-y-auto max-h-[calc(100vh-170px)]'>
           <Playground document={document} metadata={metadata!} />
         </div>
       </div>

diff --git a/...valuations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/Messages.tsx b/...valuations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/Messages.tsx
@@ -22,12 +22,6 @@ export function EvaluationResultMessages({
   }, [providerLog])
 
   if (!providerLog) return null
-  return (
-    <MessageList
-      messages={messages}
-      messageLayout='vertical'
-      separator
-      size='small'
-    />
-  )
+
+  return <MessageList messages={messages} />
 }
diff --git a/...Uuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogInfo/Messages.tsx b/...Uuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogInfo/Messages.tsx
@@ -23,12 +23,6 @@ export function DocumentLogMessages({
   }, [providerLogs])
 
   if (!providerLogs) return null
-  return (
-    <MessageList
-      messages={messages}
-      messageLayout='vertical'
-      separator
-      size='small'
-    />
-  )
+
+  return <MessageList messages={messages} />
 }
diff --git a/packages/web-ui/src/ds/molecules/Chat/ErrorMessage/index.tsx b/packages/web-ui/src/ds/molecules/Chat/ErrorMessage/index.tsx
@@ -1,16 +1,11 @@
-import { CompileError, ContentType } from '@latitude-data/compiler'
+import { CompileError } from '@latitude-data/compiler'
 
-import { Text } from '../../../atoms'
-import { Message } from '../Message'
+import { Alert, Text } from '../../../atoms'
 
 export function ErrorMessage({ error }: { error: Error }) {
   return (
     <div className='flex flex-col gap-2'>
-      <Message
-        role='Error'
-        content={[{ type: ContentType.text, text: error.message }]}
-        variant='destructive'
-      />
+      <Alert title='Error' description={error.message} variant='destructive' />
       {error instanceof CompileError && (
         <div className='flex flex-col w-full relative overflow-auto border border-destructive p-4 rounded-lg gap-0'>
           {error

diff --git a/packages/web-ui/src/ds/molecules/Chat/Message/helpers.ts b/packages/web-ui/src/ds/molecules/Chat/Message/helpers.ts
@@ -0,0 +1,12 @@
+export const roleVariant = (role: string) => {
+  switch (role) {
+    case 'user':
+      return 'purple'
+    case 'system':
+      return 'outline'
+    case 'assistant':
+      return 'yellow'
+    default:
+      return 'default'
+  }
+}
diff --git a/packages/web-ui/src/ds/molecules/Chat/Message/index.tsx b/packages/web-ui/src/ds/molecules/Chat/Message/index.tsx
@@ -5,39 +5,16 @@ import {
 } from '@latitude-data/compiler'
 
 import { cn } from '../../../../lib/utils'
-import { Badge, BadgeProps, Text } from '../../../atoms'
+import { Badge, Text } from '../../../atoms'
 import { TextColor } from '../../../tokens'
+import { roleVariant } from './helpers'
 
-type MessageVariant = {
-  badgeVariant: BadgeProps['variant']
-  textColor: TextColor
-}
-
-const MessageVariants = {
-  muted: {
-    badgeVariant: 'muted',
-    textColor: 'foregroundMuted',
-  } as MessageVariant,
-  accent: {
-    badgeVariant: 'accent',
-    textColor: 'accentForeground',
-  } as MessageVariant,
-  outline: {
-    badgeVariant: 'outline',
-    textColor: 'foregroundMuted',
-  } as MessageVariant,
-  destructive: {
-    badgeVariant: 'destructive',
-    textColor: 'destructive',
-  } as MessageVariant,
-}
+export { roleVariant } from './helpers'
 
 export type MessageProps = {
   role: string
   content: MessageContent[] | string
   className?: string
-  variant?: keyof typeof MessageVariants
-  layout?: 'horizontal' | 'vertical'
   size?: 'default' | 'small'
   animatePulse?: boolean
 }
@@ -46,38 +23,36 @@ export function Message({
   role,
   content,
   animatePulse,
-  variant = 'muted',
-  layout = 'horizontal',
   size = 'default',
 }: MessageProps) {
-  const { badgeVariant, textColor } = MessageVariants[variant]
   return (
     <div
-      className={cn('flex w-full items-start', {
+      className={cn('flex flex-col gap-1 w-full items-start', {
         'animate-pulse': animatePulse,
-        'flex-row gap-4': layout === 'horizontal',
-        'flex-col gap-2': layout === 'vertical',
       })}
     >
-      <div className='min-w-24'>
-        <Badge variant={badgeVariant}>
+      <div>
+        <Badge variant={roleVariant(role)}>
           {role.charAt(0).toUpperCase() + role.slice(1)}
         </Badge>
       </div>
-      <div className='flex flex-col gap-1'>
-        {typeof content === 'string' ? (
-          <ContentValue value={content} color={textColor} size={size} />
-        ) : (
-          content.map((c, idx) => (
-            <ContentValue
-              key={idx}
-              index={idx}
-              color={textColor}
-              value={(c as TextContent)?.text || (c as ImageContent)?.image}
-              size={size}
-            />
-          ))
-        )}
+      <div className='flex flex-row items-stretch gap-4 pl-4'>
+        <div className='flex-shrink-0 bg-muted w-1 rounded-lg' />
+        <div className={cn('flex flex-col gap-1')}>
+          {typeof content === 'string' ? (
+            <ContentValue value={content} color='foregroundMuted' size={size} />
+          ) : (
+            content.map((c, idx) => (
+              <ContentValue
+                key={idx}
+                index={idx}
+                color='foregroundMuted'
+                value={(c as TextContent)?.text || (c as ImageContent)?.image}
+                size={size}
+              />
+            ))
+          )}
+        </div>
       </div>
     </div>
   )

diff --git a/packages/web-ui/src/ds/molecules/Chat/MessageList/index.tsx b/packages/web-ui/src/ds/molecules/Chat/MessageList/index.tsx
@@ -4,35 +4,14 @@ import { Fragment } from 'react'
 
 import { Message as ConversationMessage } from '@latitude-data/compiler'
 
-import { Message, MessageProps } from '../Message'
+import { Message } from '../Message'
 
-export function MessageList({
-  messages,
-  variant,
-  messageLayout,
-  separator = false,
-  size,
-}: {
-  messages: ConversationMessage[]
-  variant?: MessageProps['variant']
-  messageLayout?: MessageProps['layout']
-  size?: MessageProps['size']
-  separator?: boolean
-}) {
+export function MessageList({ messages }: { messages: ConversationMessage[] }) {
   return (
     <div className='flex flex-col gap-4'>
       {messages.map((message, index) => (
         <Fragment key={index}>
-          {separator && index > 0 && (
-            <div className='h-px min-h-px w-full bg-border' />
-          )}
-          <Message
-            role={message.role}
-            content={message.content}
-            variant={variant}
-            layout={messageLayout}
-            size={size}
-          />
+          <Message role={message.role} content={message.content} />
         </Fragment>
       ))}
     </div>