Lihat sumber Arsitektur dan Fungsi Komponen Soneur Meeting Room

[[Berkas:Halaman depan Soneur.png|jmpl|Halaman depan Soneur]]
Soneur Meeting Room adalah sebuah implementasi antarmuka berbasis [[React (JavaScript library)|React]] yang mengintegrasikan berbagai komponen interaktif untuk menunjang kolaborasi daring berbasis [[kecerdasan buatan]]. Sistem ini memanfaatkan ''hooks'' seperti ''useState'' dan ''useEffect'' untuk pengelolaan [[state]], serta memanggil layanan eksternal seperti Azure OpenAI, ElevenLabs, dan Tavus untuk fungsi-fungsi analisis, sintesis suara, hingga percakapan video cerdas. Aplikasi ini dirancang dalam konteks pertemuan daring yang kaya fitur, dengan dukungan presentasi, kuis, ''mindmap'', ''roadmap'', dan kartu belajar interaktif.

== Demo Aplikasi ==
{{#ev:youtube|https://www.youtube.com/watch?v=65HocfaxMVo}}

== Integrasi Layanan AI ==
Salah satu aspek penting dari Soneur Meeting Room adalah kemampuannya mengintegrasikan layanan [[pemrosesan bahasa alami]] dan [[sintesis suara]] untuk interaksi yang lebih imersif. Layanan Azure OpenAI digunakan untuk menghasilkan konten seperti presentasi, kuis, dan analisis gambar atau tangkapan layar. ElevenLabs bertanggung jawab untuk sintesis suara yang menyerupai manusia, sedangkan Tavus memungkinkan percakapan video interaktif dengan agen AI. Ketiga layanan ini diorkestrasi untuk bekerja sinkron, sehingga pengguna mendapatkan pengalaman kolaborasi yang menyeluruh.

== Manajemen State dan Event ==
Pengelolaan state dilakukan melalui ''React Hooks'', mencakup variabel untuk tujuan rapat, bahasa yang dipilih, daftar anggota tim AI, status audio dan video, serta urutan fokus jendela ''draggable''. Event listener ditambahkan untuk mengatur notifikasi, mendeteksi perangkat, dan merespons perubahan status audio. Pendekatan ini memastikan UI merespons secara real-time terhadap perubahan kondisi pertemuan.

== Komponen Interaktif ==
Aplikasi ini memanfaatkan berbagai komponen modular seperti ''ParticipantsPanel'', ''VideoTile'', ''ChatPanel'', ''MeetingControls'', serta berbagai jendela ''DraggableWindow'' untuk konten spesifik. Setiap komponen memiliki fungsi tertentu: ''ParticipantsPanel'' mengatur daftar peserta, ''VideoTile'' menampilkan video setiap anggota, sedangkan ''ChatPanel'' mengelola percakapan teks. ''MeetingControls'' menyediakan kontrol pusat untuk audio, video, rekaman, berbagi layar, dan pemanggilan konten AI.

== Fitur Konten Dinamis ==
Konten dinamis dihasilkan melalui integrasi layanan AI, mencakup presentasi, kuis, ''mindmap'', ''roadmap'', dan kartu pengingat (''flashcard''). Mekanisme ''manual-only'' dan ''voice-and-chat'' memberikan kontrol kepada pengguna apakah konten dihasilkan melalui perintah suara/chat atau hanya melalui antarmuka grafis. Setiap jenis konten memiliki struktur data tersendiri yang disimpan dalam state dan dapat ditampilkan dalam jendela yang dapat dipindahkan serta diubah ukurannya.

== Daftar Komponen Penting ==
# [[React (JavaScript library)|React]] dan ''hooks'' seperti ''useState'', ''useEffect''
# Komponen visual: ''VideoTile'', ''ParticipantsPanel'', ''ChatPanel''
# Kontrol rapat: ''MeetingControls''
# Konten AI: ''PresentationWindow'', ''QuizWindow'', ''MindmapWindow'', ''RoadmapWindow'', ''FlashcardWindow''
# Layanan eksternal: Azure OpenAI, ElevenLabs, Tavus
# Manajer percakapan: ''conversationManager''
# Modul autentikasi: ''AuthProvider'', ''AuthModal'', ''ProtectedRoute''
# Komponen utilitas: ''DraggableWindow'', ''ScreenShare''

== Pengelolaan Audio dan Video ==
Sistem ini memiliki mekanisme untuk mengatur audio dan video, termasuk mematikan semua peserta, menetapkan mikrofon eksklusif, dan memulihkan status audio sebelumnya. Saat percakapan video Tavus aktif, sistem secara otomatis mematikan audio semua peserta AI untuk menghindari gangguan, kemudian memulihkannya setelah sesi berakhir. Hal ini juga mencakup penghentian audio TTS jika status mikrofon berubah dari aktif menjadi nonaktif.

== Bahasa dan Lokalisasi ==
Terdapat daftar pilihan bahasa yang mencakup berbagai bahasa dunia seperti ''English'', ''French'', ''German'', ''Spanish'', ''Indonesian'', dan lainnya. Pilihan bahasa ini mempengaruhi input dan output layanan AI, termasuk teks dan sintesis suara. Dengan demikian, sistem mampu beroperasi secara multibahasa, mendukung kebutuhan pengguna internasional.

== Analisis Gambar dan Tangkapan Layar ==
Fitur berbagi layar dan tangkapan layar memungkinkan anggota tim AI menganalisis konten visual secara langsung. Proses ini melibatkan pengiriman data gambar ke Azure OpenAI untuk dianalisis, kemudian hasilnya disampaikan melalui teks atau audio. Analisis dapat dilokalkan sesuai bahasa pilihan, sehingga relevan untuk pengguna dari berbagai latar belakang.

== Mekanisme Percakapan AI ==
Pemilihan anggota tim AI yang merespons dilakukan melalui fungsi seleksi yang mempertimbangkan penyebutan langsung nama anggota atau kecocokan kata kunci bidang keahlian. Jika tidak ada kecocokan eksplisit, sistem memilih anggota yang belum aktif berbicara dalam sejarah percakapan terkini. Strategi ini memastikan distribusi interaksi yang merata dan relevan terhadap konteks pertemuan.