refactor: run pnpm format

Author: 1egoman

components/embed-iframe/agent-client.tsx

@@ -8,7 +8,6 @@ import { toastAlert } from '@/components/alert-toast';
 import { Toaster } from '@/components/ui/sonner';
 import useConnectionDetails from '@/hooks/use-connection-details';
 import type { AppConfig } from '@/lib/types';
-
 import { SessionView } from './session-view';
 import { WelcomeView } from './welcome-view';
 

components/embed-iframe/session-view.tsx

@@ -14,10 +14,10 @@ import { toastAlert } from '@/components/alert-toast';
 import { DeviceSelect } from '@/components/livekit/device-select';
 import { TrackToggle } from '@/components/livekit/track-toggle';
 import { Button } from '@/components/ui/button';
+import { useAgentControlBar } from '@/hooks/use-agent-control-bar';
 import { useDebugMode } from '@/hooks/useDebug';
 import type { AppConfig } from '@/lib/types';
 import { cn } from '@/lib/utils';
-import { useAgentControlBar } from '@/hooks/use-agent-control-bar';
 
 function isAgentAvailable(agentState: AgentState) {
   return agentState == 'listening' || agentState == 'thinking' || agentState == 'speaking';

components/embed-popup/agent-client.tsx

@@ -4,19 +4,14 @@ import { useEffect, useMemo, useState } from 'react';
 import { Room, RoomEvent } from 'livekit-client';
 import { motion } from 'motion/react';
 import { RoomAudioRenderer, RoomContext, StartAudio } from '@livekit/components-react';
+import { CaretDownIcon } from '@phosphor-icons/react';
 import { toastAlert } from '@/components/alert-toast';
 import { PopupView } from '@/components/embed-popup/popup-view';
-import useConnectionDetails from '@/hooks/use-connection-details';
-import type { AppConfig } from '@/lib/types';
-
 import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Toaster } from '@/components/ui/sonner';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
-import { CaretDownIcon } from '@phosphor-icons/react';
+import useConnectionDetails from '@/hooks/use-connection-details';
+import type { AppConfig } from '@/lib/types';
 import { cn } from '@/lib/utils';
 
 export type EmbedFixedAgentClientProps = {
@@ -27,7 +22,10 @@ export type EmbedFixedAgentClientProps = {
   buttonPosition?: 'fixed' | 'static';
 };
 
-function EmbedFixedAgentClient({ appConfig, buttonPosition='fixed' }: EmbedFixedAgentClientProps) {
+function EmbedFixedAgentClient({
+  appConfig,
+  buttonPosition = 'fixed',
+}: EmbedFixedAgentClientProps) {
   const [popupOpen, setPopupOpen] = useState(false);
 
   const room = useMemo(() => new Room(), []);
@@ -90,12 +88,12 @@ function EmbedFixedAgentClient({ appConfig, buttonPosition='fixed' }: EmbedFixed
     <Button
       variant="primary"
       size="lg"
-      className={cn("w-12 h-12 p-0", {
-        "fixed bottom-4 right-4": buttonPosition === 'fixed',
+      className={cn('h-12 w-12 p-0', {
+        'fixed right-4 bottom-4': buttonPosition === 'fixed',
       })}
-      onClick={() => popupOpen ? setPopupOpen(false) : setPopupOpen(true)}
+      onClick={() => (popupOpen ? setPopupOpen(false) : setPopupOpen(true))}
     >
-      <div className="flex items-center justify-center bg-background w-10 h-10 rounded-full">
+      <div className="bg-background flex h-10 w-10 items-center justify-center rounded-full">
         {popupOpen ? (
           <CaretDownIcon size={24} className="text-fg1" />
         ) : (
@@ -130,14 +128,12 @@ function EmbedFixedAgentClient({ appConfig, buttonPosition='fixed' }: EmbedFixed
       return (
         <>
           {/* Backdrop */}
-          {popupOpen ? (
-            <div className="fixed inset-0" onClick={() => setPopupOpen(false)} />
-          ) : null}
+          {popupOpen ? <div className="fixed inset-0" onClick={() => setPopupOpen(false)} /> : null}
 
           {triggerButton}
 
           <motion.div
-            className="fixed right-4 bottom-20 w-full max-w-[360px] h-[480px] rounded-md bg-bg2"
+            className="bg-bg2 fixed right-4 bottom-20 h-[480px] w-full max-w-[360px] rounded-md"
             initial={false}
             animate={{
               opacity: popupOpen ? 1 : 0,
@@ -152,15 +148,13 @@ function EmbedFixedAgentClient({ appConfig, buttonPosition='fixed' }: EmbedFixed
     case 'static':
       return (
         <Popover open={popupOpen} onOpenChange={setPopupOpen}>
-          <PopoverTrigger asChild>
-            {triggerButton}
-          </PopoverTrigger>
-          <PopoverContent className="p-0 bg-bg2 w-[360px] h-[480px]" align="end">
+          <PopoverTrigger asChild>{triggerButton}</PopoverTrigger>
+          <PopoverContent className="bg-bg2 h-[480px] w-[360px] p-0" align="end">
             {popupContents}
           </PopoverContent>
         </Popover>
       );
-    }
+  }
 }
 
 export default EmbedFixedAgentClient;

components/embed-popup/popup-view.tsx

@@ -1,26 +1,25 @@
 'use client';
 
 import React, { useEffect } from 'react';
-import { AnimatePresence, motion } from 'motion/react';
 import { Track } from 'livekit-client';
+import { AnimatePresence, motion } from 'motion/react';
 import {
   type AgentState,
+  BarVisualizer,
   useRoomContext,
   useVoiceAssistant,
-  BarVisualizer,
 } from '@livekit/components-react';
 import { PhoneDisconnectIcon } from '@phosphor-icons/react/dist/ssr';
-
 import { toastAlert } from '@/components/alert-toast';
-import { Button } from '@/components/ui/button';
-import { useAgentControlBar } from '@/hooks/use-agent-control-bar';
+import { ChatEntry } from '@/components/livekit/chat/chat-entry';
 import { DeviceSelect } from '@/components/livekit/device-select';
 import { TrackToggle } from '@/components/livekit/track-toggle';
+import { Button } from '@/components/ui/button';
+import { useAgentControlBar } from '@/hooks/use-agent-control-bar';
+import useChatAndTranscription from '@/hooks/use-chat-and-transcription';
 import { useDebugMode } from '@/hooks/useDebug';
 import type { AppConfig } from '@/lib/types';
 import { cn } from '@/lib/utils';
-import useChatAndTranscription from '@/hooks/use-chat-and-transcription';
-import { ChatEntry } from '@/components/livekit/chat/chat-entry';
 import { ChatInput } from '../livekit/chat/chat-input';
 
 function isAgentAvailable(agentState: AgentState) {
@@ -50,7 +49,7 @@ export const PopupView = ({
     handleDisconnect,
   } = useAgentControlBar({
     controls: { microphone: true },
-    saveUserChoices: true
+    saveUserChoices: true,
   });
   const { messages, send } = useChatAndTranscription();
 
@@ -102,18 +101,17 @@ export const PopupView = ({
     return () => clearTimeout(timeout);
   }, [agentState, sessionStarted, room]);
 
-  const showAgentListening = (
-    appConfig.isPreConnectBufferEnabled && 
+  const showAgentListening =
+    appConfig.isPreConnectBufferEnabled &&
     agentState !== 'disconnected' &&
     agentState !== 'connecting' &&
-    agentState !== 'initializing'
-  );
+    agentState !== 'initializing';
 
   return (
-    <div ref={ref} inert={disabled} className="flex flex-col w-full h-full">
-      <div className="relative flex flex-col justify-end h-0 p-2 grow-1 shrink-1 overflow-y-auto">
+    <div ref={ref} inert={disabled} className="flex h-full w-full flex-col">
+      <div className="relative flex h-0 shrink-1 grow-1 flex-col justify-end overflow-y-auto p-2">
         <motion.div
-          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center"
+          className="absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center"
           initial={false}
           animate={{
             opacity: agentState === 'connecting' ? 1 : 0,
@@ -169,15 +167,15 @@ export const PopupView = ({
 
       <div
         aria-label="Voice assistant controls"
-        className="relative flex items-center gap-1 px-2 h-12 grow-0 shrink-0"
+        className="relative flex h-12 shrink-0 grow-0 items-center gap-1 px-2"
       >
         <motion.div
           initial={false}
           animate={{
             opacity: showAgentListening ? 1 : 0,
             pointerEvents: showAgentListening ? 'auto' : 'none',
           }}
-          className="absolute -top-8 right-2 flex justify-center items-center gap-2 bg-bg2 px-3 py-0.5 rounded-full"
+          className="bg-bg2 absolute -top-8 right-2 flex items-center justify-center gap-2 rounded-full px-3 py-0.5"
         >
           <BarVisualizer
             barCount={3}
@@ -245,7 +243,7 @@ export const PopupView = ({
           {/* FIXME: do I need to handle the other channels here? */}
         </div>
 
-        <ChatInput className="w-0 grow-1 shrink-1" onSend={onSend} />
+        <ChatInput className="w-0 shrink-1 grow-1" onSend={onSend} />
       </div>
     </div>
   );

components/embed-popup/standalone-bundle-root.tsx

@@ -1,21 +1,20 @@
-import ReactDOM from 'react-dom/client';
 import * as React from 'react';
-import EmbedFixedAgentClient, { EmbedFixedAgentClientProps } from './agent-client';
+import ReactDOM from 'react-dom/client';
 import { APP_CONFIG_DEFAULTS } from '@/app-config';
-
 import globalCss from '../../app/globals.css';
+import EmbedFixedAgentClient, { EmbedFixedAgentClientProps } from './agent-client';
 
-const wrapper = document.createElement("div");
-wrapper.setAttribute("id", "lk-embed-wrapper");
+const wrapper = document.createElement('div');
+wrapper.setAttribute('id', 'lk-embed-wrapper');
 document.body.appendChild(wrapper);
 
 const shadowRoot = wrapper.attachShadow({ mode: 'open' });
 
-const styleTag = document.createElement("style");
+const styleTag = document.createElement('style');
 styleTag.textContent = globalCss;
 shadowRoot.appendChild(styleTag);
 
-const reactRoot = document.createElement("div");
+const reactRoot = document.createElement('div');
 shadowRoot.appendChild(reactRoot);
 
 const root = ReactDOM.createRoot(reactRoot);

components/livekit/chat/chat-entry.tsx

@@ -47,7 +47,12 @@ export const ChatEntry = ({
         </span>
       )}
 
-      <span className={cn('max-w-4/5 rounded-[20px] p-2 text-sm', isUser ? 'bg-muted ml-auto' : 'mr-auto')}>
+      <span
+        className={cn(
+          'max-w-4/5 rounded-[20px] p-2 text-sm',
+          isUser ? 'bg-muted ml-auto' : 'mr-auto'
+        )}
+      >
         {message}
       </span>
     </li>

components/livekit/chat/chat-input.tsx

@@ -42,7 +42,7 @@ export function ChatInput({ onSend, className, disabled, ...props }: ChatInputPr
         disabled={disabled}
         placeholder="Type something..."
         onChange={(e) => setMessage(e.target.value)}
-        className="grow-1 shrink-1 w-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+        className="w-0 shrink-1 grow-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
       />
       <Button
         size="sm"

components/livekit/chat/hooks/utils.ts

@@ -12,4 +12,4 @@ export const useChatMessage = (entry: ReceivedChatMessage, messageFormatter?: Me
   const name = entry.from?.name && entry.from.name !== '' ? entry.from.name : entry.from?.identity;
 
   return { message: formattedMessage, hasBeenEdited, time, locale, name };
-};
+};

components/theme-toggle.tsx

@@ -2,8 +2,8 @@
 
 import { useEffect, useState } from 'react';
 import { MonitorIcon, MoonIcon, SunIcon } from '@phosphor-icons/react';
-import type { ThemeMode } from '@/lib/types';
 import { THEME_MEDIA_QUERY, THEME_STORAGE_KEY } from '@/lib/env';
+import type { ThemeMode } from '@/lib/types';
 import { cn } from '@/lib/utils';
 
 const THEME_SCRIPT = `

components/ui/popover.tsx

@@ -1,25 +1,20 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '@/lib/utils';
 
-import { cn } from "@/lib/utils"
-
-function Popover({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
-function PopoverTrigger({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
 function PopoverContent({
   className,
-  align = "center",
+  align = 'center',
   sideOffset = 4,
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
@@ -30,19 +25,17 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
           className
         )}
         {...props}
       />
     </PopoverPrimitive.Portal>
-  )
+  );
 }
 
-function PopoverAnchor({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };