refactor ChatEntry

Author: thomasyuill-livekit

components/app/chat-transcript.tsx

@@ -56,25 +56,31 @@ interface ChatTranscriptProps extends Omit<ChatEntryProps, 'entry'> {
 export function ChatTranscript({
   hidden = false,
   messages = [],
-  hideName,
-  hideTimestamp,
-  messageFormatter,
   ...props
 }: ChatTranscriptProps & Omit<HTMLMotionProps<'div'>, 'ref'>) {
   return (
     <AnimatePresence>
       {!hidden && (
         <MotionContainer {...CONTAINER_MOTION_PROPS} {...props}>
-          {messages.map((message: ReceivedChatMessage) => (
-            <MotionChatEntry
-              key={message.id}
-              entry={message}
-              hideName={hideName}
-              hideTimestamp={hideTimestamp}
-              messageFormatter={messageFormatter}
-              {...MESSAGE_MOTION_PROPS}
-            />
-          ))}
+          {messages.map(({ id, timestamp, from, message, editTimestamp }: ReceivedChatMessage) => {
+            const name = from?.name ?? from?.identity;
+            const locale = navigator?.language ?? 'en-US';
+            const messageOrigin = from?.isLocal ? 'local' : 'remote';
+            const hasBeenEdited = !!editTimestamp;
+
+            return (
+              <MotionChatEntry
+                key={id}
+                name={name}
+                locale={locale}
+                timestamp={timestamp}
+                message={message}
+                messageOrigin={messageOrigin}
+                hasBeenEdited={hasBeenEdited}
+                {...MESSAGE_MOTION_PROPS}
+              />
+            );
+          })}
         </MotionContainer>
       )}
     </AnimatePresence>

components/livekit/chat-entry.tsx

@@ -1,62 +1,58 @@
 import * as React from 'react';
-import { useMemo } from 'react';
-import type { MessageFormatter, ReceivedChatMessage } from '@livekit/components-react';
 import { cn } from '@/lib/utils';
 
 export interface ChatEntryProps extends React.HTMLAttributes<HTMLLIElement> {
-  /** The chat massage object to display. */
-  entry: ReceivedChatMessage;
-  /** Hide sender name. Useful when displaying multiple consecutive chat messages from the same person. */
-  hideName?: boolean;
-  /** Hide message timestamp. */
-  hideTimestamp?: boolean;
-  /** An optional formatter for the message body. */
-  messageFormatter?: MessageFormatter;
+  /** The locale to use for the timestamp. */
+  locale: string;
+  /** The timestamp of the message. */
+  timestamp: number;
+  /** The message to display. */
+  message: string;
+  /** The origin of the message. */
+  messageOrigin: 'local' | 'remote';
+  /** The sender's name. */
+  name?: string;
+  /** Whether the message has been edited. */
+  hasBeenEdited?: boolean;
 }
 
 export const ChatEntry = ({
-  entry,
-  hideName = false,
-  hideTimestamp = false,
+  name,
+  locale,
+  timestamp,
+  message,
+  messageOrigin,
+  hasBeenEdited = false,
   className,
-  messageFormatter,
   ...props
 }: ChatEntryProps) => {
-  const time = new Date(entry.timestamp);
-  const hasBeenEdited = !!entry.editTimestamp;
-  const name = entry.from?.name || entry.from?.identity;
-  const locale = typeof navigator !== 'undefined' ? navigator.language : 'en-US';
-
-  const isUser = entry.from?.isLocal ?? false;
-  const messageOrigin = isUser ? 'remote' : 'local';
-  const showHeader = !hideTimestamp || !hideName || hasBeenEdited;
+  const time = new Date(timestamp);
   const title = time.toLocaleTimeString(locale, { timeStyle: 'full' });
 
-  const formattedMessage = useMemo(() => {
-    return messageFormatter ? messageFormatter(entry.message) : entry.message;
-  }, [entry.message, messageFormatter]);
-
   return (
     <li
       title={title}
       data-lk-message-origin={messageOrigin}
       className={cn('group flex w-full flex-col gap-0.5', className)}
       {...props}
     >
-      {showHeader && (
+      {name && (
         <header className="text-muted-foreground flex text-sm">
-          {!hideName && <strong className="mt-2">{name}</strong>}
-          {!hideTimestamp && (
-            <span className="align-self-end ml-auto font-mono text-xs opacity-0 transition-opacity ease-linear group-hover:opacity-100">
-              {hasBeenEdited && '*'}
-              {time.toLocaleTimeString(locale, { timeStyle: 'short' })}
-            </span>
-          )}
+          {name && <strong className="mt-2">{name}</strong>}
+          <span className="align-self-end ml-auto font-mono text-xs opacity-0 transition-opacity ease-linear group-hover:opacity-100">
+            {hasBeenEdited && '*'}
+            {time.toLocaleTimeString(locale, { timeStyle: 'short' })}
+          </span>
         </header>
       )}
 
-      <span className={cn('max-w-4/5 rounded-[20px]', isUser ? 'bg-muted ml-auto p-2' : 'mr-auto')}>
-        {formattedMessage}
+      <span
+        className={cn(
+          'max-w-4/5 rounded-[20px]',
+          messageOrigin === 'local' ? 'bg-muted ml-auto p-2' : 'mr-auto'
+        )}
+      >
+        {message}
       </span>
     </li>
   );