mirror of
https://github.com/HumanAIGC-Engineering/gradio-webrtc.git
synced 2026-02-05 09:59:22 +08:00
[feat] update some feature
sync code of fastrtc, add text support through datachannel, fix safari connect problem support chat without camera or mic
This commit is contained in:
huangbinchao.hbc
104
frontend/shared/VideoChat/components/ChatBtn.svelte
Normal file
104
frontend/shared/VideoChat/components/ChatBtn.svelte
Normal file
@@ -0,0 +1,104 @@
|
||||
<script lang="ts">
|
||||
import { Spinner } from "@gradio/icons";
|
||||
import AudioWave from "../../AudioWave.svelte";
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let stream_state;
|
||||
export let onStartChat
|
||||
export let audio_source_callback
|
||||
export let wave_color
|
||||
</script>
|
||||
|
||||
<div class="player-controls">
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class="chat-btn"
|
||||
class:start-chat={stream_state === "closed"}
|
||||
class:stop-chat={stream_state === "open"}
|
||||
on:click={onStartChat}
|
||||
>
|
||||
{#if stream_state === "closed"}
|
||||
<span>点击开始对话</span>
|
||||
{:else if stream_state === "waiting"}
|
||||
<div class="waiting-icon-text">
|
||||
<div class="icon" title="spinner">
|
||||
<Spinner />
|
||||
</div>
|
||||
<span>等待中</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="stop-chat-inner"></div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if stream_state === "open"}
|
||||
<div class="input-audio-wave">
|
||||
<AudioWave {audio_source_callback} {stream_state} {wave_color} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="less">
|
||||
.player-controls {
|
||||
height: 15%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 84px;
|
||||
|
||||
.chat-btn {
|
||||
height: 64px;
|
||||
width: 296px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 999px;
|
||||
opacity: 1;
|
||||
background: linear-gradient(180deg, #7873f6 0%, #524de1 100%);
|
||||
transition: all 0.3s;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
.start-chat {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
.waiting-icon-text {
|
||||
width: 80px;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
margin: 0 var(--spacing-sm);
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
gap: var(--size-1);
|
||||
.icon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
fill: #ffffff;
|
||||
stroke: #ffffff;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.stop-chat {
|
||||
width: 64px;
|
||||
.stop-chat-inner {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 6.25px;
|
||||
background: #fafafa;
|
||||
}
|
||||
}
|
||||
|
||||
.input-audio-wave {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
172
frontend/shared/VideoChat/components/ChatInput.svelte
Normal file
172
frontend/shared/VideoChat/components/ChatInput.svelte
Normal file
@@ -0,0 +1,172 @@
|
||||
<script lang="ts">
|
||||
import { IconFont, Send, Stop } from "../icons";
|
||||
import { insertStringAt } from "../utils";
|
||||
|
||||
export let replying;
|
||||
export let onSend;
|
||||
export let onStop;
|
||||
export let onInterrupt;
|
||||
|
||||
let inputHeight = 24;
|
||||
let rowsDivRef: HTMLDivElement;
|
||||
let chatInputRef: HTMLTextAreaElement;
|
||||
let inputValue = "";
|
||||
function on_chat_input_keydown(event: KeyboardEvent) {
|
||||
if (event.key === "Enter") {
|
||||
if (event.altKey) {
|
||||
chatInputRef.value = insertStringAt(
|
||||
chatInputRef.value,
|
||||
"\n",
|
||||
chatInputRef.selectionStart,
|
||||
);
|
||||
chatInputRef.dispatchEvent(new InputEvent("input"));
|
||||
} else {
|
||||
event.preventDefault();
|
||||
on_send();
|
||||
}
|
||||
}
|
||||
}
|
||||
async function on_send() {
|
||||
await onSend(chatInputRef.value);
|
||||
chatInputRef.value = "";
|
||||
}
|
||||
function on_chat_input(event: InputEvent) {
|
||||
if (rowsDivRef) {
|
||||
rowsDivRef.textContent = (event.target as any).value.replace(
|
||||
/\n$/,
|
||||
"\n\n",
|
||||
);
|
||||
inputHeight = rowsDivRef.offsetHeight;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="chat-input-container">
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div class="stop-chat-btn" on:click={onStop}></div>
|
||||
|
||||
<div class="chat-input-inner">
|
||||
<div class="chat-input-wrapper">
|
||||
<textarea
|
||||
class="chat-input"
|
||||
bind:this={chatInputRef}
|
||||
on:keydown={on_chat_input_keydown}
|
||||
on:input={on_chat_input}
|
||||
style={`height:${inputHeight}px`}
|
||||
/>
|
||||
<div class="rowsDiv" bind:this={rowsDivRef}>{inputValue}</div>
|
||||
</div>
|
||||
{#if replying}
|
||||
<button class="interrupt-btn" on:click={onInterrupt}></button>
|
||||
{:else}
|
||||
<button class="send-btn" on:click={on_send}>
|
||||
<IconFont icon={Send} color={"#fff"} ></IconFont>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="less">
|
||||
.chat-input-container {
|
||||
height: 15%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 84px;
|
||||
// padding: 0 12px;
|
||||
|
||||
.chat-input-inner {
|
||||
padding: 0 12px;
|
||||
background-color: #fff;
|
||||
height: 64px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #e8eaf2;
|
||||
border-radius: 12px;
|
||||
border-radius: 20px;
|
||||
box-shadow:
|
||||
0 12px 24px -16px rgba(54, 54, 73, 0.04),
|
||||
0 12px 40px 0 rgba(51, 51, 71, 0.08),
|
||||
0 0 1px 0 rgba(44, 44, 54, 0.02);
|
||||
|
||||
.chat-input-wrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.chat-input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #26244c;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
resize: none;
|
||||
padding: 0;
|
||||
margin: 8px 0;
|
||||
line-height: 24px;
|
||||
max-height: 48px;
|
||||
min-height: 24px;
|
||||
}
|
||||
.rowsDiv {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
visibility: hidden;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.send-btn,.interrupt-btn {
|
||||
flex: 0 0 auto;
|
||||
background: #615ced;
|
||||
border-radius: 20px;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.interrupt-btn{
|
||||
&::after {
|
||||
content: " ";
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
background: #fafafa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stop-chat-btn {
|
||||
cursor: pointer;
|
||||
margin-right: 12px;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 999px;
|
||||
opacity: 1;
|
||||
background: linear-gradient(180deg, #7873f6 0%, #524de1 100%);
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
background: #fafafa;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
26
frontend/shared/VideoChat/components/ChatMessage.svelte
Normal file
26
frontend/shared/VideoChat/components/ChatMessage.svelte
Normal file
@@ -0,0 +1,26 @@
|
||||
<script lang="ts">
|
||||
export let message;
|
||||
export let style = '';
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="answer-message-container"
|
||||
{style}
|
||||
>
|
||||
<div class="answer-message-text">
|
||||
{message}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="less">
|
||||
.answer-message-container {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
z-index: 101;
|
||||
padding: 6px 12px;
|
||||
border-radius: 12px;
|
||||
width: 200px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
bottom: 166px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user