[feat] update some feature

sync code of  fastrtc,
add text support through datachannel,
fix safari connect problem
support chat without camera or mic

frontend/shared/AudioWave.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { onDestroy } from 'svelte';
-  import type {ComponentType} from 'svelte';
+  import { onDestroy } from "svelte";
+  import type { ComponentType } from "svelte";
 
-  import PulsingIcon from './PulsingIcon.svelte';
+  import PulsingIcon from "./PulsingIcon.svelte";
 
   export let numBars = 16;
   export let stream_state: "open" | "closed" | "waiting" = "closed";
@@ -16,13 +16,13 @@
   let analyser: AnalyserNode;
   let dataArray: Uint8Array;
   let animationId: number;
-  let pulseScale = 1;
+  export let pulseScale = 1;
 
-  $: containerWidth = icon 
+  $: containerWidth = icon
     ? "128px"
     : `calc((var(--boxSize) + var(--gutter)) * ${numBars} + 80px)`;
 
-  $: if(stream_state === "open") setupAudioContext();
+  $: if (stream_state === "open") setupAudioContext();
 
   onDestroy(() => {
     if (animationId) {
@@ -34,12 +34,17 @@
   });
 
   function setupAudioContext() {
+    // @ts-ignore
     audioContext = new (window.AudioContext || window.webkitAudioContext)();
     analyser = audioContext.createAnalyser();
-    const source = audioContext.createMediaStreamSource(audio_source_callback());
-    
+    const streamSource = audio_source_callback()
+    if(!streamSource)return
+    const source = audioContext.createMediaStreamSource(
+      streamSource,
+    );
+
     source.connect(analyser);
-    
+
     analyser.fftSize = 64;
     analyser.smoothingTimeConstant = 0.8;
     dataArray = new Uint8Array(analyser.frequencyBinCount);
@@ -73,21 +78,23 @@
 </script>
 
 <div class="gradio-webrtc-waveContainer">
-{#if icon}
-  <div class="gradio-webrtc-icon-container">
-    <div 
-      class="gradio-webrtc-icon" 
-      style:transform={`scale(${pulseScale})`}
-      style:background={icon_button_color}
-    >
-      <PulsingIcon
-        {stream_state}
-        {pulse_color}
-        {icon}
-        {icon_button_color}
-        {audio_source_callback}/>
+  {#if icon && !pending}
+    <div class="gradio-webrtc-icon-container">
+      <div
+        class="gradio-webrtc-icon"
+        style:transform={`scale(${pulseScale})`}
+        style:background={icon_button_color}
+      >
+        <PulsingIcon
+          {stream_state}
+          {pulse_color}
+          {icon}
+          {icon_button_color}
+          {icon_radius}
+          {audio_source_callback}
+        />
+      </div>
     </div>
-  </div>
 {:else}
   <div class="gradio-webrtc-boxContainer" style:width={containerWidth}>
     {#each Array(numBars/2) as _}
@@ -102,14 +109,14 @@
 </div>
 
 <style>
-.gradio-webrtc-waveContainer {
-  position: relative;
-  display: flex;
-  min-height: 100px;
-  max-height: 128px;
-  justify-content: center;
-  align-items: center;
-}
+  .gradio-webrtc-waveContainer {
+    position: relative;
+    display: flex;
+    min-height: 100px;
+    max-height: 128px;
+    justify-content: center;
+    align-items: center;
+  }
 
 .gradio-webrtc-boxContainer {
   display: flex;
@@ -130,47 +137,47 @@
   transition: transform 0.05s ease;
 }
 
-.gradio-webrtc-icon-container {
-  position: relative;
-  width: 128px;
-  height: 128px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+  .gradio-webrtc-icon-container {
+    position: relative;
+    width: 128px;
+    height: 128px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 
-.gradio-webrtc-icon {
-  position: relative;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  transition: transform 0.1s ease;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 2;
-}
+  .gradio-webrtc-icon {
+    position: relative;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    transition: transform 0.1s ease;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 2;
+  }
 
-.icon-image {
-  width: 32px;
-  height: 32px;
-  object-fit: contain;
-  filter: brightness(0) invert(1);
-}
+  .icon-image {
+    width: 32px;
+    height: 32px;
+    object-fit: contain;
+    filter: brightness(0) invert(1);
+  }
 
-.pulse-ring {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  opacity: 0.5;
-}
+  .pulse-ring {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    opacity: 0.5;
+  }
 
-@keyframes pulse {
+  @keyframes pulse {
     0% {
       transform: translate(-50%, -50%) scale(1);
       opacity: 0.5;
@@ -180,4 +187,39 @@
       opacity: 0;
     }
   }
-</style>
+
+  .dots {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    height: 64px;
+  }
+
+  .dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    opacity: 0.5;
+    animation: pulse 1.5s infinite;
+  }
+
+  .dot:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+
+  .dot:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 0.4;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1.1);
+    }
+  }
+</style>