src/App.tsx

/**
 * Copyright 2024 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React, { useEffect, useRef, useState } from "react";
import "./App.scss";
import { LiveAPIProvider } from "./contexts/LiveAPIContext";
import SidePanel from "./components/side-panel/SidePanel";
import { Altair } from "./components/altair/Altair";
import ControlTray from "./components/control-tray/ControlTray";
import { IOSModal } from "./components/ios-modal/IOSModal";
import { isIOS } from "./lib/platform";
import cn from "classnames";

// تعریف نوع برای پیکربندی اولیه
interface LiveConfig {
  model: string;
  systemInstruction: {
    parts: Array<{ text: string }>;
  };
}

function App() {
  const videoRef = useRef<HTMLVideoElement>(null);
  const [videoStream, setVideoStream] = useState<MediaStream | null>(null);
  const [showIOSModal, setShowIOSModal] = useState(false);

  useEffect(() => {
    if (isIOS()) {
      setShowIOSModal(true);
    }
  }, []);

  // دستورالعمل شخصی‌سازی شده با شخصیت شوخ طبع
  const myCustomInstruction = `
  // ... [همان محتوای قبلی دستورالعمل شوخ طبع]
  `.trim();

  // اگر LiveAPIProvider از initialConfig پشتیبانی نمی‌کند، می‌توانیم از useEffect برای تنظیمات استفاده کنیم
  // یا اگر API دیگری دارد، از آن استفاده کنیم

  return (
    <div className="App">
      <LiveAPIProvider>
        <div className="streaming-console">
          <SidePanel />
          <main>
            <div className="main-app-area">
              <Altair />
              <video
                className={cn("stream", {
                  hidden: !videoRef.current || !videoStream,
                })}
                ref={videoRef}
                autoPlay
                playsInline
              />
            </div>
            <ControlTray
              videoRef={videoRef}
              supportsVideo={true}
              onVideoStreamChange={setVideoStream}
            />
          </main>
        </div>
      </LiveAPIProvider>

      <IOSModal
        isOpen={showIOSModal}
        onClose={() => setShowIOSModal(false)}
      />
    </div>
  );
}

export default App;