style: clean up code formatting and improve docstring consistency in Chatbox and ChatModeMenu components

Author: linzhengyu

app/components/layout/ChatModeMenu.tsx

@@ -10,12 +10,12 @@ interface ChatModeMenuProps {
   /**
    * Current chat mode.
    */
-  chatMode: 'text' | 'voice' 
+  chatMode: 'text' | 'voice'
   /**
    * Callback function called when a chat mode is selected.
    * @param mode The selected chat mode.
    */
-  onModeSelect: (mode: 'text' | 'voice' ) => void
+  onModeSelect: (mode: 'text' | 'voice') => void
 }
 
 /**
@@ -28,10 +28,7 @@ interface ChatModeMenuProps {
  * @param onModeSelect Callback function called when a mode is selected.
  * @returns JSX.Element The chat mode menu UI component.
  */
-export default function ChatModeMenu({
-  chatMode,
-  onModeSelect
-}: ChatModeMenuProps) {
+export default function ChatModeMenu({ chatMode, onModeSelect }: ChatModeMenuProps) {
   const { t } = useTranslation('fronted')
   const [showChatModeMenu, setShowChatModeMenu] = useState(false)
   const chatModeMenuRef = useRef<HTMLDivElement>(null)
@@ -42,7 +39,7 @@ export default function ChatModeMenu({
   useEffect(() => {
     /**
      * Handle click outside event to close the menu.
-     * 
+     *
      * @param event The mouse event.
      * @returns void
      */
@@ -63,7 +60,7 @@ export default function ChatModeMenu({
 
   /**
    * Get the display text for the current chat mode.
-   * 
+   *
    * @returns The translated text for the current chat mode.
    */
   const getChatModeText = () => {
@@ -79,13 +76,13 @@ export default function ChatModeMenu({
 
   /**
    * Handle chat mode selection.
-   * 
+   *
    * Calls the onModeSelect callback and closes the menu.
-   * 
+   *
    * @param mode The selected chat mode.
    * @returns void
    */
-  const handleChatModeSelect = (mode: 'text' | 'voice' ) => {
+  const handleChatModeSelect = (mode: 'text' | 'voice') => {
     onModeSelect(mode)
     setShowChatModeMenu(false)
   }
@@ -126,4 +123,3 @@ export default function ChatModeMenu({
     </div>
   )
 }
-

app/components/layout/Chatbox.tsx

@@ -33,10 +33,10 @@ export default function Chatbox({ globalState }: ChatboxProps) {
 
   /**
    * Handle sending chat message.
-   * 
+   *
    * Sends the current chat message to the state machine. If an animation is currently playing,
    * it will interrupt the animation before sending the message.
-   * 
+   *
    * @returns void
    */
   const handleSendMessage = () => {
@@ -56,10 +56,10 @@ export default function Chatbox({ globalState }: ChatboxProps) {
 
   /**
    * Handle Enter key press in textarea.
-   * 
+   *
    * Sends the message when Enter is pressed without Shift. Prevents default behavior
    * to avoid adding a new line.
-   * 
+   *
    * @param e The keyboard event from the textarea.
    * @returns void
    */
@@ -76,7 +76,7 @@ export default function Chatbox({ globalState }: ChatboxProps) {
         className="chatbox-textarea"
         placeholder={t('chat.inputMessagePlaceholder')}
         value={chatMessage}
-        onChange={(e) => setChatMessage(e.target.value)}
+        onChange={e => setChatMessage(e.target.value)}
         onKeyDown={handleTextareaKeyDown}
       />
       <button
@@ -89,4 +89,3 @@ export default function Chatbox({ globalState }: ChatboxProps) {
     </div>
   )
 }
-

app/contexts/BabylonJSContext.tsx

@@ -52,7 +52,7 @@ function BabylonJSProvider({
   const [globalState, setGlobalState] = useState<GlobalState>()
   const webSocketState = useWebSocket()
   const [isSceneInitialized, setIsSceneInitialized] = useState(false)
-  const [chatMode, setChatMode] = useState<'text' | 'voice' >('voice')
+  const [chatMode, setChatMode] = useState<'text' | 'voice'>('voice')
 
   // Add PCM queue to store audio data when websocket is not ready
   const pcmQueue = useRef<ArrayBuffer[]>([])
@@ -281,7 +281,7 @@ function BabylonJSProvider({
    * Handle chat mode selection.
    * Updates the local state and the record audio button visibility.
    */
-  const handleChatModeSelect = (mode: 'text' | 'voice' ) => {
+  const handleChatModeSelect = (mode: 'text' | 'voice') => {
     setChatMode(mode)
     const isVoiceMode = mode === 'voice'
     if (globalState?.gui?.recordAudioButton) {
@@ -294,9 +294,7 @@ function BabylonJSProvider({
       {children}
       <ChatModeMenu chatMode={chatMode} onModeSelect={handleChatModeSelect} />
 
-      {chatMode === 'text' && (
-        <Chatbox globalState={globalState} />
-      )}
+      {chatMode === 'text' && <Chatbox globalState={globalState} />}
     </BabylonJSContext.Provider>
   )
 }

app/library/babylonjs/runtime/gui/gui.ts

@@ -273,7 +273,10 @@ export class GUI {
             recordingStarted = true
             if (this._globalState.runtime?.streamedAnimationPlaying()) {
               this._globalState.stateMachine?.putConditionedMessage(
-                new ConditionedMessage(Conditions.USER_AUDIO_INTERRUPT_ANIMATION, null),
+                new ConditionedMessage(
+                  Conditions.USER_AUDIO_INTERRUPT_ANIMATION,
+                  null,
+                ),
               )
             } else {
               this._globalState.stateMachine?.putConditionedMessage(