Update src/App.tsx

src/App.tsx

@@ -10,8 +10,7 @@ import cn from "classnames";
 import { LiveConfig } from "./multimodal-live-types";
 import Logo from "./components/logo/Logo";
 
-const myCustomInstruction = `
-تو دستیار صوتی و تصویری پیشرفته از "اپلیکیشن هوش مصنوعی هوشان" هستی
+const myCustomInstruction = `تو دستیار صوتی و تصویری پیشرفته از "اپلیکیشن هوش مصنوعی هوشان" هستی
 وظیفه اصلی تو کمک به کاربر است.
 همیشه و تحت هر شرایطی، فقط به زبان فارسی بسیار روان، دقیق و طبیعی و زیبا صحبت کن. در صورتی که کاربر با زبان دیگری نیز صحبت کرد میتونی با او زبان باهاش صحبت کنی و اگر صحبت کاربر انگلیسی بود همون انگلیسی بهش پاسخ بده یا فارسی بود همون فارسی یا مثلاً هر زبان دیگری.
 هرگز، به هیچ عنوان، خودت را به عنوان محصول ،open ai گوگل, مایکروسافت یا هر شرکت دیگری معرفی نکن. هویت تو تنها دستیار صوتی "اپلیکیشن هوش مصنوعی هوشان" است.
@@ -30,9 +29,7 @@ const myCustomInstruction = `
 
 const initialAppConfig: LiveConfig = {
   model: "models/gemini-2.0-flash-exp",
-  systemInstruction: {
-    parts: [{ text: myCustomInstruction }],
-  },
+  systemInstruction: { parts: [{ text: myCustomInstruction }] },
 };
 
 interface AppInternalLogicProps {
@@ -49,20 +46,9 @@ interface AppInternalLogicProps {
   onFacingModeChange: (mode: 'user' | 'environment') => void;
 }
 
-const AppInternalLogic: React.FC<AppInternalLogicProps> = ({
-  isMicActive,
-  isCamActive,
-  setIsMicActive,
-  setIsCamActive,
-  videoRef,
-  notificationPopoverRef,
-  notificationButtonRef,
-  isNotificationOpen,
-  setIsNotificationOpen,
-  currentFacingMode,
-  onFacingModeChange,
-}) => {
+const AppInternalLogic: React.FC<AppInternalLogicProps> = ({ isMicActive, isCamActive, setIsMicActive, setIsCamActive, videoRef, notificationPopoverRef, notificationButtonRef, isNotificationOpen, setIsNotificationOpen, currentFacingMode, onFacingModeChange }) => {
   const { connected, disconnect, volume } = useLiveAPIContext();
+  const [isUserSpeaking, setIsUserSpeaking] = useState(false);
 
   useEffect(() => {
     if (!isMicActive && !isCamActive && connected) {
@@ -74,75 +60,32 @@ const AppInternalLogic: React.FC<AppInternalLogicProps> = ({
     <div className="w-full flex flex-col items-center justify-center min-h-screen text-foreground antialiased">
       <div className="main-wrapper max-w-3xl w-full flex flex-col items-center justify-center h-full relative">
         <div className="header-controls">
-          <div /> 
+          <div />
           <div id="notification-trigger-container">
-            <button
-              ref={notificationButtonRef}
-              id="notification-button"
-              aria-label="Notifications"
-              className="p-2 bg-transparent text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white transition-colors"
-              onClick={(e) => {
-                  e.stopPropagation();
-                  setIsNotificationOpen(!isNotificationOpen);
-                }}
-            >
+            <button ref={notificationButtonRef} id="notification-button" aria-label="Notifications" className="p-2 bg-transparent text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white transition-colors" onClick={(e) => { e.stopPropagation(); setIsNotificationOpen(!isNotificationOpen); }}>
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
             </button>
           </div>
         </div>
-
         <div ref={notificationPopoverRef} id="notification-popover-wrapper" className="notification-popover-wrapper">
-          <div
-            id="notification-popover"
-            className={cn("popover-content", {
-              "open animate-popover-open-top-center": isNotificationOpen,
-              "animate-popover-close-top-center": !isNotificationOpen && document.getElementById('notification-popover')?.classList.contains('open'),
-            })}
-          >
-            <div className="notification-popover-text-content">
-              مدل‌های هوش مصنوعی می‌توانند اشتباه کنند، صحت اطلاعات مهم را بررسی کنید و از بیان اطلاعات حساس بپرهیزید.
-            </div>
+          <div id="notification-popover" className={cn("popover-content", { "open animate-popover-open-top-center": isNotificationOpen, "animate-popover-close-top-center": !isNotificationOpen && document.getElementById('notification-popover')?.classList.contains('open'), })}>
+            <div className="notification-popover-text-content">مدل‌های هوش مصنوعی می‌توانند اشتباه کنند، صحت اطلاعات مهم را بررسی کنید و از بیان اطلاعات حساس بپرهیزید.</div>
           </div>
         </div>
-
         <div className="media-area w-full flex flex-col items-center justify-center flex-grow relative">
-          <video
-            id="video-feed"
-            ref={videoRef}
-            autoPlay
-            playsInline
-            className={cn(
-              "absolute top-0 left-0 w-full h-full object-cover",
-              { "hidden": !isCamActive },
-              { "scale-x-[-1]": currentFacingMode === 'user' }
-            )}
-          />
+          <video id="video-feed" ref={videoRef} autoPlay playsInline className={cn("absolute top-0 left-0 w-full h-full object-cover", { "hidden": !isCamActive }, { "scale-x-[-1]": currentFacingMode === 'user' })} />
           {isMicActive && !isCamActive && (
-            <div
-              id="large-logo-container"
-              className="absolute top-0 left-0 w-full h-full flex items-center justify-center pointer-events-none"
-            >
-              <Logo 
-                isMini={false} 
-                isActive={true} 
-                isAi={false} 
-                speakingVolume={volume} 
-              />
+            <div id="large-logo-container" className="absolute top-0 left-0 w-full h-full flex items-center justify-center pointer-events-none">
+              <Logo isMini={false} isActive={true} isAi={false} speakingVolume={volume} isUserSpeaking={isUserSpeaking} />
+            </div>
+          )}
+          {isCamActive && (
+            <div className="absolute bottom-24 right-4 z-20 pointer-events-none">
+              <Logo isMini={true} isActive={true} isAi={false} speakingVolume={volume} isUserSpeaking={isUserSpeaking} />
             </div>
           )}
         </div>
-
-        <ControlTray
-          videoRef={videoRef}
-          supportsVideo={true}
-          onVideoStreamChange={(stream) => {}}
-          isAppMicActive={isMicActive}
-          onAppMicToggle={setIsMicActive}
-          isAppCamActive={isCamActive}
-          onAppCamToggle={setIsCamActive}
-          currentFacingMode={currentFacingMode}
-          onFacingModeChange={onFacingModeChange}
-        />
+        <ControlTray videoRef={videoRef} supportsVideo={true} onVideoStreamChange={(stream) => {}} isAppMicActive={isMicActive} onAppMicToggle={setIsMicActive} isAppCamActive={isCamActive} onAppCamToggle={setIsCamActive} currentFacingMode={currentFacingMode} onFacingModeChange={onFacingModeChange} onUserSpeakingChange={setIsUserSpeaking} />
       </div>
     </div>
   );
@@ -160,31 +103,19 @@ function App() {
   const notificationPopoverRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (isIOS()) {
-      setShowIOSModal(true);
-    }
-    const timer = setTimeout(() => {
-        setIsAllowedOrigin(true);
-    }, 100);
+    if (isIOS()) setShowIOSModal(true);
+    const timer = setTimeout(() => { setIsAllowedOrigin(true); }, 100);
     return () => clearTimeout(timer);
   }, []);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (
-        isNotificationOpen &&
-        notificationPopoverRef.current &&
-        !notificationPopoverRef.current.contains(event.target as Node) &&
-        notificationButtonRef.current &&
-        !notificationButtonRef.current.contains(event.target as Node)
-      ) {
+      if (isNotificationOpen && notificationPopoverRef.current && !notificationPopoverRef.current.contains(event.target as Node) && notificationButtonRef.current && !notificationButtonRef.current.contains(event.target as Node)) {
         setIsNotificationOpen(false);
       }
     };
     document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
+    return () => { document.removeEventListener("mousedown", handleClickOutside); };
   }, [isNotificationOpen]);
 
   if (isAllowedOrigin === null) {
@@ -193,19 +124,7 @@ function App() {
 
   return (
     <LiveAPIProvider initialConfig={initialAppConfig}>
-      <AppInternalLogic
-        isMicActive={isMicActive}
-        setIsMicActive={setIsMicActive}
-        isCamActive={isCamActive}
-        setIsCamActive={setIsCamActive}
-        videoRef={videoRef}
-        notificationPopoverRef={notificationPopoverRef}
-        notificationButtonRef={notificationButtonRef}
-        isNotificationOpen={isNotificationOpen}
-        setIsNotificationOpen={setIsNotificationOpen}
-        currentFacingMode={currentFacingMode}
-        onFacingModeChange={setCurrentFacingMode}
-      />
+      <AppInternalLogic isMicActive={isMicActive} setIsMicActive={setIsMicActive} isCamActive={isCamActive} setIsCamActive={setIsCamActive} videoRef={videoRef} notificationPopoverRef={notificationPopoverRef} notificationButtonRef={notificationButtonRef} isNotificationOpen={isNotificationOpen} setIsNotificationOpen={setIsNotificationOpen} currentFacingMode={currentFacingMode} onFacingModeChange={setCurrentFacingMode} />
       <IOSModal isOpen={showIOSModal} onClose={() => setShowIOSModal(false)} />
     </LiveAPIProvider>
   );