fix: change the chat input action icon

Co-authored-by: Yurii Kinakh <yuriikinakh5@gmail.com>

Author: ye231101

src/App.css

@@ -239,7 +239,7 @@
 .vp-chat-overlay {
   position: absolute !important;
   top: 64px !important;
-  bottom: 56px !important;
+  bottom: 80px !important;
   left: 0 !important;
   right: 48px !important;
   display: flex !important;
@@ -304,15 +304,15 @@
   bottom: 0 !important;
   left: 0 !important;
   right: 0 !important;
-  height: 56px !important;
+  height: 64px !important;
   display: flex !important;
-  align-items: center !important;
-  padding: 0 16px !important;
+  flex-direction: column !important;
+  justify-content: space-between !important;
+  padding: 8px 16px !important;
 }
 
 .vp-chat-input-container {
   height: 40px !important;
-  flex: 1 !important;
   display: flex !important;
   flex-direction: row !important;
   align-items: center !important;
@@ -334,10 +334,17 @@
 }
 
 .vp-chat-input::placeholder {
-  color: rgba(255, 255, 255, 0.8) !important;
+  color: rgba(255, 255, 255, 0.7) !important;
 }
 
-.vp-chat-send-btn {
+.vp-chat-camera-off {
+  text-align: center !important;
+  color: rgba(255, 255, 255, 0.5) !important;
+  font-size: 14px !important;
+  line-height: 1 !important;
+}
+
+.vp-chat-action-btn {
   width: 40px !important;
   height: 100% !important;
   display: flex !important;
@@ -349,6 +356,55 @@
   cursor: pointer !important;
 }
 
+.vp-chat-input-listening {
+  flex: 1 !important;
+  color: rgba(255, 255, 255, 0.7) !important;
+  font-style: italic !important;
+  font-size: 14px !important;
+}
+
+.vp-audio-bars {
+  display: flex !important;
+  flex-shrink: 0 !important;
+  align-items: center !important;
+  gap: 2px !important;
+  height: 16px !important;
+  margin-right: 4px !important;
+}
+
+.vp-audio-bars span {
+  width: 3px !important;
+  border-radius: 2px !important;
+  background: #ffffff !important;
+  animation: vp-audio-bar 0.8s ease-in-out infinite !important;
+}
+
+.vp-audio-bars span:nth-child(1) {
+  animation-delay: 0s !important;
+}
+
+.vp-audio-bars span:nth-child(2) {
+  animation-delay: 0.15s !important;
+}
+
+.vp-audio-bars span:nth-child(3) {
+  animation-delay: 0.3s !important;
+}
+
+.vp-audio-bars span:nth-child(4) {
+  animation-delay: 0.45s !important;
+}
+
+@keyframes vp-audio-bar {
+  0%, 100% {
+    height: 4px;
+  }
+
+  50% {
+    height: 16px;
+  }
+}
+
 @media (min-width: 768px) {
   .vp-room {
     bottom: 20px !important;

src/components/RoomScreen.js

@@ -10,7 +10,7 @@ import {
   useTracks,
 } from '@livekit/components-react';
 import { Track, AudioPresets, RoomEvent, VideoQuality } from 'livekit-client';
-import { X, SendHorizonal } from 'lucide-react';
+import { X, Mic, MicOff, SendHorizonal } from 'lucide-react';
 import { api } from '../utils/api';
 import { AVATAR_URL, LIVEKIT_URL, USERNAME } from '../utils/constants';
 
@@ -136,7 +136,7 @@ function ParticipantTile({ participant }) {
 }
 
 function RoomContainer({ roomName, onLeave }) {
-  const { disableMic } = useMediaControls();
+  const { isMuted, enableMic, disableMic } = useMediaControls();
   const { messages, message, setMessage, sendMessage } = useChat();
   const messagesEndRef = useRef(null);
 
@@ -311,20 +311,50 @@ function RoomContainer({ roomName, onLeave }) {
       {remoteParticipants.length > 0 && (
         <div className="vp-chat-input-bar">
           <div className="vp-chat-input-container">
-            <input
-              className="vp-chat-input"
-              type="text"
-              placeholder="Type a message..."
-              value={message}
-              onChange={(e) => setMessage(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') sendMessage();
+            {!isMuted ? (
+              <>
+                <span className="vp-chat-input-listening">Listening...</span>
+                <div className="vp-audio-bars">
+                  <span />
+                  <span />
+                  <span />
+                  <span />
+                </div>
+              </>
+            ) : (
+              <input
+                className="vp-chat-input"
+                type="text"
+                placeholder="Type a message..."
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') sendMessage();
+                }}
+              />
+            )}
+            <div
+              className="vp-chat-action-btn"
+              onClick={() => {
+                if (message.trim()) {
+                  sendMessage();
+                } else if (isMuted) {
+                  enableMic();
+                } else {
+                  disableMic();
+                }
               }}
-            />
-            <div className="vp-chat-send-btn" onClick={sendMessage}>
-              <SendHorizonal size={20} color="white" />
+            >
+              {message.trim() ? (
+                <SendHorizonal size={20} color="white" />
+              ) : isMuted ? (
+                <Mic size={20} color="white" />
+              ) : (
+                <MicOff size={20} color="white" />
+              )}
             </div>
           </div>
+          <span className="vp-chat-camera-off">Your camera is off</span>
         </div>
       )}
     </div>