polish

Author: thomasyuill-livekit

app/ui/page.tsx

@@ -1,5 +1,4 @@
 import { Track } from 'livekit-client';
-import { type ReceivedChatMessage } from '@livekit/components-react';
 import { PlusIcon } from '@phosphor-icons/react/dist/ssr';
 import { AgentControlBar } from '@/components/livekit/agent-control-bar/agent-control-bar';
 import { TrackDeviceSelect } from '@/components/livekit/agent-control-bar/track-device-select';
@@ -119,28 +118,6 @@ export default function Base() {
             ))}
           </tbody>
         </table>
-        {/* {toggleVariants.map((variant) => (
-          <div key={variant}>
-            <StoryTitle>{variant}</StoryTitle>
-            <div className="flex justify-center gap-8">
-              <div>
-                <Toggle key={variant} variant={variant} size="sm">
-                  Size sm
-                </Toggle>
-              </div>
-              <div>
-                <Toggle key={variant} variant={variant}>
-                  Size default
-                </Toggle>
-              </div>
-              <div>
-                <Toggle key={variant} variant={variant} size="lg">
-                  Size lg
-                </Toggle>
-              </div>
-            </div>
-          </div>
-        ))} */}
       </Container>
 
       {/* Alert */}
@@ -252,40 +229,33 @@ export default function Base() {
       <Container componentName="ChatEntry">
         <div className="mx-auto max-w-prose space-y-4">
           <ChatEntry
-            entry={
-              {
-                id: '1',
-                timestamp: Date.now(),
-                message: 'Hello, how are you?',
-                from: {
-                  identity: 'user',
-                  isLocal: true,
-                  name: 'User',
-                  audioTrackPublications: new Map(),
-                  videoTrackPublications: new Map(),
-                  trackPublications: new Map(),
-                  audioLevel: 0,
-                },
-              } as ReceivedChatMessage
-            }
+            locale="en-US"
+            timestamp={Date.now() + 1000}
+            message="Hello, how are you?"
+            messageOrigin="local"
+            name="User"
           />
           <ChatEntry
-            entry={
-              {
-                id: '1',
-                timestamp: Date.now(),
-                message: 'I am good, how about you?',
-                from: {
-                  identity: 'agent',
-                  isLocal: false,
-                  name: 'Agent',
-                  audioTrackPublications: new Map(),
-                  videoTrackPublications: new Map(),
-                  trackPublications: new Map(),
-                  audioLevel: 0,
-                },
-              } as ReceivedChatMessage
-            }
+            locale="en-US"
+            timestamp={Date.now() + 5000}
+            message="I am good, how about you?"
+            messageOrigin="remote"
+            name="Agent"
+            //   {
+            //     id: '1',
+            //     timestamp: Date.now(),
+            //     message: 'I am good, how about you?',
+            //     from: {
+            //       identity: 'agent',
+            //       isLocal: false,
+            //       name: 'Agent',
+            //       audioTrackPublications: new Map(),
+            //       videoTrackPublications: new Map(),
+            //       trackPublications: new Map(),
+            //       audioLevel: 0,
+            //     },
+            //   } as ReceivedChatMessage
+            // }
           />
         </div>
       </Container>

components/app/chat-transcript.tsx

@@ -63,15 +63,13 @@ export function ChatTranscript({
       {!hidden && (
         <MotionContainer {...CONTAINER_MOTION_PROPS} {...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}

components/app/session-view.tsx

@@ -92,7 +92,6 @@ export const SessionView = ({
         <Fade top className="absolute inset-x-4 top-0 h-40" />
         <ScrollArea className="px-4 pt-40 pb-[150px] md:px-6 md:pb-[180px]">
           <ChatTranscript
-            hideName
             hidden={!chatOpen}
             messages={messages}
             className="mx-auto max-w-2xl space-y-3 transition-opacity duration-300 ease-out"

components/app/tile-layout.tsx

@@ -165,11 +165,9 @@ export function TileLayout({ chatOpen }: TileLayoutProps) {
                     ...ANIMATION_TRANSITION,
                     delay: animationDelay,
                     maskImage: {
-                      ease: 'easeIn',
                       duration: 1,
                     },
                     filter: {
-                      ease: 'easeIn',
                       duration: 1,
                     },
                   }}

components/livekit/agent-control-bar/track-selector.tsx

@@ -51,15 +51,15 @@ export function TrackSelector({
             barCount={3}
             options={{ minHeight: 5 }}
             trackRef={audioTrackRef}
-            className="audiovisualizer flex h-full w-auto items-center justify-center gap-0.5"
+            className="audiovisualizer flex h-6 w-auto items-center justify-center gap-0.5"
           >
             <span
               className={cn([
                 'h-full w-0.5 origin-center rounded-2xl',
                 'group-data-[state=on]/track:bg-foreground group-data-[state=off]/track:bg-destructive',
                 'data-lk-muted:bg-muted',
               ])}
-            ></span>
+            />
           </BarVisualizer>
         )}
       </TrackToggle>

components/livekit/chat-entry.tsx

@@ -36,16 +36,18 @@ export const ChatEntry = ({
       className={cn('group flex w-full flex-col gap-0.5', className)}
       {...props}
     >
-      {name && (
-        <header className="text-muted-foreground flex text-sm">
-          {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>
-      )}
-
+      <header
+        className={cn(
+          'text-muted-foreground flex items-center gap-2 text-sm',
+          messageOrigin === 'local' ? 'flex-row-reverse' : 'text-left'
+        )}
+      >
+        {name && <strong>{name}</strong>}
+        <span className="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]',