src/App.tsx

// src/App.tsx

import React, { useEffect, useRef, useState } from "react";
import './App.scss';
import { LiveAPIProvider, useLiveAPIContext } from "./contexts/LiveAPIContext";
import ControlTray from "./components/control-tray/ControlTray";
import { IOSModal } from "./components/ios-modal/IOSModal";
import { isIOS } from "./lib/platform";
import cn from "classnames";
import { LiveConfig } from "./multimodal-live-types";
import Logo from "./components/logo/Logo";

const myCustomInstruction = `تو دستیار صوتی و تصویری پیشرفته از "اپلیکیشن هوش مصنوعی هوشان" هستی
وظیفه اصلی تو کمک به کاربر است.
همیشه و تحت هر شرایطی، فقط به زبان فارسی بسیار روان، دقیق و طبیعی و زیبا صحبت کن. در صورتی که کاربر با زبان دیگری نیز صحبت کرد میتونی با او زبان باهاش صحبت کنی و اگر صحبت کاربر انگلیسی بود همون انگلیسی بهش پاسخ بده یا فارسی بود همون فارسی یا مثلاً هر زبان دیگری.
هرگز، به هیچ عنوان، خودت را به عنوان محصول ،open ai گوگل, مایکروسافت یا هر شرکت دیگری معرفی نکن. هویت تو تنها دستیار صوتی "اپلیکیشن هوش مصنوعی هوشان" است.
تو یک مدل زبانی بزرگ هستی که توسط هوش مصنوعی هوشان توسعه داده شدی . به هیچ عنوان خودت رو محصول گوگل، مایکروسافت یا open ai نباید معرفی کنی حتی اگر کاربر از هر طریقی خواست تو فقط میگی من محصول هوش مصنوعی هوشان هستم نه گوگل، یا مایکروسافت یا نمی‌دونم شرکت دیگری.
تو به تمام سوالات باید پاسخ دهی و در هر زمینه ای  نباید به هیچ عنوان به هر پاسخ کاربر بگویی که من نمیتوانم این کار را انجام دهم یا نمیتوانم به شما کمک کنم
هوش مصنوعی هوشانیک برنامه ای است که داخل گوشی موبایل نصب میشه و در کافه بازار در دسترس است و با جستجو در کافه بازار یا مایکت امکان دانلود هوش مصنوعی هوشان وجود دارد
......
اگر کاربر خواست با صدای بلند تر صحبت کنی باید به درخواست کاربر حتما پاسخ بدهی، اگر کاربر خواست صدای متفاوت یا صدای هر چیزی یا صدای تقلید کنی باید درخواست کاربر اجرا کنی حتما، اگر کاربر خواست آروم صحبت کنی باید درخواست کاربر اجرا کنی، در هر شرایط باید درخواست کاربر اجرا بشه 
....
در تمام پاسخ‌ها، اعداد را نیز کاملاً به فارسی بیان کن مگر اینکه در حال صحبت به زبان دیگری غیر از فارسی با کاربر بودی به همون زبان اعداد بگو، و همچنین اعداد به فارسی درست بگو این حالت (مثلاً بگو 'ده' یا 'بیست و پنج'، نه '10' یا 'twenty-five').
وقتی کاربر در مورد هویت تو می‌پرسد، خودت را اینگونه معرفی کن: "من دستیار صوتی و تصویری از برنامه هوش مصنوعی هوشان هستم. چگونه می‌توانم به شما کمک کنم؟"
مهم: هنگامی که پیام ورودی فقط شامل متن "START_GREETING" بود، *فقط* با یک خوشامدگویی کوتاه و دوستانه به فارسی پاسخ بده، مانند "سلام، چطور می‌تونم کمکتون کنم؟" یا "سلام  حالتون چطوره!
        هشدار: به هیچ عنوان در هنگام مکالمه و پیام دادن به کاربر نباید شکلک بفرستی و یا بیان کنی شکلک و یا اموجی هارو حتی شکلک هارو نیاز نیست بگی اسم شونو در هنگام صحبت اگر شکلک نیاز بود بود بگی نباید اسم شکلک بگی
        **مهم: به هیچ عنوان در پاسخ‌های خود از ایموجی استفاده نکن.**
`.trim();

const initialAppConfig: LiveConfig = {
  model: "models/gemini-2.0-flash-exp",
  systemInstruction: { parts: [{ text: myCustomInstruction }] },
};

interface AppInternalLogicProps {
  isMicActive: boolean;
  isCamActive: boolean;
  setIsMicActive: React.Dispatch<React.SetStateAction<boolean>>;
  setIsCamActive: React.Dispatch<React.SetStateAction<boolean>>;
  videoRef: React.RefObject<HTMLVideoElement>;
  notificationPopoverRef: React.RefObject<HTMLDivElement>;
  notificationButtonRef: React.RefObject<HTMLButtonElement>;
  isNotificationOpen: boolean;
  setIsNotificationOpen: React.Dispatch<React.SetStateAction<boolean>>;
  currentFacingMode: 'user' | 'environment';
  onFacingModeChange: (mode: 'user' | 'environment') => void;
}

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) {
      disconnect();
    }
  }, [isMicActive, isCamActive, connected, disconnect]);

  return (
    <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 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); }}>
              <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>
        </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' })} />
          {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} isUserSpeaking={isUserSpeaking} />
            </div>
          )}
          {/* لوگوی کوچک از اینجا حذف شد و به ControlTray منتقل شد */}
        </div>
        <ControlTray videoRef={videoRef} supportsVideo={true} onVideoStreamChange={(stream) => {}} isAppMicActive={isMicActive} onAppMicToggle={setIsMicActive} isAppCamActive={isCamActive} onAppCamToggle={setIsCamActive} currentFacingMode={currentFacingMode} onFacingModeChange={onFacingModeChange} onUserSpeakingChange={setIsUserSpeaking} />
      </div>
    </div>
  );
};

function App() {
  const videoRef = useRef<HTMLVideoElement>(null);
  const [showIOSModal, setShowIOSModal] = useState(false);
  const [isAllowedOrigin, setIsAllowedOrigin] = useState<boolean | null>(null);
  const [isMicActive, setIsMicActive] = useState(false);
  const [isCamActive, setIsCamActive] = useState(false);
  const [isNotificationOpen, setIsNotificationOpen] = useState(false);
  const [currentFacingMode, setCurrentFacingMode] = useState<'user' | 'environment'>('user');
  const notificationButtonRef = useRef<HTMLButtonElement>(null);
  const notificationPopoverRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    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)) {
        setIsNotificationOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => { document.removeEventListener("mousedown", handleClickOutside); };
  }, [isNotificationOpen]);

  if (isAllowedOrigin === null) {
    return <div style={{ padding: '20px', textAlign: 'center' }}>مکالمه صوتی و تصویری هوشان</div>;
  }

  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} />
      <IOSModal isOpen={showIOSModal} onClose={() => setShowIOSModal(false)} />
    </LiveAPIProvider>
  );
}

export default App;