()
-
- useEffect(() => {
- rtcManager.on("networkQuality", onNetworkQuality)
-
- return () => {
- rtcManager.off("networkQuality", onNetworkQuality)
- }
- }, [])
-
- const onNetworkQuality = (quality: NetworkQuality) => {
- setNetworkQuality(quality)
- }
-
- return (
-
-
-
- )
-}
-
-export default NetWork
diff --git a/demo/src/platform/pc/header/stylePopover/colorPicker/index.module.scss b/demo/src/platform/pc/header/stylePopover/colorPicker/index.module.scss
deleted file mode 100644
index 405e7781..00000000
--- a/demo/src/platform/pc/header/stylePopover/colorPicker/index.module.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.colorPicker {
- height: 24px;
- display: flex;
- align-items: center;
-
- :global(.react-colorful) {
- width: 220px;
- height: 8px;
- }
-
- :global(.react-colorful__saturation) {
- display: none;
- }
-
- :global(.react-colorful__hue) {
- border-radius: 8px !important;
- height: 8px;
- }
-
- :global(.react-colorful__pointer) {
- width: 24px;
- height: 24px;
- }
-}
diff --git a/demo/src/platform/pc/header/stylePopover/colorPicker/index.tsx b/demo/src/platform/pc/header/stylePopover/colorPicker/index.tsx
deleted file mode 100644
index 28163d77..00000000
--- a/demo/src/platform/pc/header/stylePopover/colorPicker/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-"use client"
-
-import { HexColorPicker } from "react-colorful";
-import { useAppSelector, useAppDispatch } from "@/common"
-import { setThemeColor } from "@/store/reducers/global"
-import styles from "./index.module.scss";
-
-const ColorPicker = () => {
- const dispatch = useAppDispatch()
- const themeColor = useAppSelector(state => state.global.themeColor)
-
- const onColorChange = (color: string) => {
- console.log(color);
- dispatch(setThemeColor(color))
- };
-
- return
-
-
-};
-
-export default ColorPicker;
diff --git a/demo/src/platform/pc/header/stylePopover/index.module.scss b/demo/src/platform/pc/header/stylePopover/index.module.scss
deleted file mode 100644
index 98c7f182..00000000
--- a/demo/src/platform/pc/header/stylePopover/index.module.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.info {
- display: flex;
- padding: 12px 16px;
- flex-direction: column;
- align-items: flex-start;
- gap: 16px;
- align-self: stretch;
-
-
- .title {
- color: var(--Grey-300, #EAECF0);
- font-size: 14px;
- font-weight: 600;
- line-height: 150%;
- letter-spacing: 0.449px;
- }
-
- .color {
- font-size: 0;
- white-space: nowrap;
-
- .item {
- position: relative;
- display: inline-block;
- width: 28px;
- height: 28px;
- border-radius: 4px;
- border: 2px solid transparent;
- font-size: 0;
- cursor: pointer;
-
- .inner {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- width: 18px;
- height: 18px;
- border-radius: 2px;
- box-sizing: border-box;
- }
- }
-
- .item+.item {
- margin-left: 12px;
- }
-
- }
-
-
-}
diff --git a/demo/src/platform/pc/header/stylePopover/index.tsx b/demo/src/platform/pc/header/stylePopover/index.tsx
deleted file mode 100644
index f8508323..00000000
--- a/demo/src/platform/pc/header/stylePopover/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useMemo } from "react"
-import { COLOR_LIST, useAppSelector, useAppDispatch } from "@/common"
-import { setThemeColor } from "@/store/reducers/global"
-import ColorPicker from "./colorPicker"
-import { Popover } from 'antd';
-
-
-import styles from "./index.module.scss"
-
-interface StylePopoverProps {
- children?: React.ReactNode
-}
-
-const StylePopover = (props: StylePopoverProps) => {
- const { children } = props
- const dispatch = useAppDispatch()
- const themeColor = useAppSelector(state => state.global.themeColor)
-
-
- const onClickColor = (index: number) => {
- const target = COLOR_LIST[index]
- if (target.active !== themeColor) {
- dispatch(setThemeColor(target.active))
- }
- }
-
- const content =
- STYLE
-
- {
- COLOR_LIST.map((item, index) => {
- return onClickColor(index)}
- className={styles.item}
- key={index}>
-
-
- })
- }
-
-
-
-
-
- return {children}
-
-}
-
-export default StylePopover
diff --git a/demo/src/platform/pc/rtc/agent/index.module.scss b/demo/src/platform/pc/rtc/agent/index.module.scss
deleted file mode 100644
index fa3ae2ec..00000000
--- a/demo/src/platform/pc/rtc/agent/index.module.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.agent {
- position: relative;
- display: flex;
- height: 292px;
- padding: 20px 16px;
- flex-direction: column;
- justify-content: flex-start;
- align-items: center;
- align-self: stretch;
- background: linear-gradient(154deg, rgba(27, 66, 166, 0.16) 0%, rgba(27, 45, 140, 0.00) 18%), linear-gradient(153deg, rgba(23, 24, 28, 0.00) 53.75%, #11174E 100%), #0F0F11;
- box-shadow: 0px 3.999px 48.988px 0px rgba(0, 7, 72, 0.12);
- backdrop-filter: blur(7);
- box-sizing: border-box;
-
- .text {
- margin-top: 50px;
- color: var(--theme-color, #EAECF0);
- font-size: 24px;
- font-weight: 600;
- line-height: 150%;
- letter-spacing: 0.449px;
- }
-
- .view {
- margin-top: 32px;
- display: flex;
- align-items: center;
- justify-content: center;
- height: 56px;
- }
-}
diff --git a/demo/src/platform/pc/rtc/agent/index.tsx b/demo/src/platform/pc/rtc/agent/index.tsx
deleted file mode 100644
index a7fd7944..00000000
--- a/demo/src/platform/pc/rtc/agent/index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-"use client"
-
-import { useAppSelector, useMultibandTrackVolume } from "@/common"
-import AudioVisualizer from "../audioVisualizer"
-import { IMicrophoneAudioTrack } from 'agora-rtc-sdk-ng';
-import styles from "./index.module.scss"
-
-interface AgentProps {
- audioTrack?: IMicrophoneAudioTrack
-}
-
-const Agent = (props: AgentProps) => {
- const { audioTrack } = props
-
- const subscribedVolumes = useMultibandTrackVolume(audioTrack, 12);
-
- return
-
-}
-
-
-export default Agent;
diff --git a/demo/src/platform/pc/rtc/audioVisualizer/index.module.scss b/demo/src/platform/pc/rtc/audioVisualizer/index.module.scss
deleted file mode 100644
index 1beae944..00000000
--- a/demo/src/platform/pc/rtc/audioVisualizer/index.module.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.audioVisualizer {
- display: flex;
- justify-content: center;
- align-items: center;
-
-
- .item {}
-
- .agent {
- background-color: var(--theme-color, #EAECF0);
- box-shadow: 0 0 10px var(--theme-color, #EAECF0);
- }
-
- .user {
- background-color: var(--Grey-300, #EAECF0);
- }
-}
diff --git a/demo/src/platform/pc/rtc/audioVisualizer/index.tsx b/demo/src/platform/pc/rtc/audioVisualizer/index.tsx
deleted file mode 100644
index bc21f554..00000000
--- a/demo/src/platform/pc/rtc/audioVisualizer/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-"use client"
-
-import { useState, useEffect } from "react"
-import styles from "./index.module.scss"
-
-interface AudioVisualizerProps {
- type: "agent" | "user";
- frequencies: Float32Array[];
- gap: number;
- barWidth: number;
- minBarHeight: number;
- maxBarHeight: number
- borderRadius: number;
-}
-
-
-const AudioVisualizer = (props: AudioVisualizerProps) => {
- const { frequencies, gap, barWidth, minBarHeight, maxBarHeight, borderRadius, type } = props;
-
- const summedFrequencies = frequencies.map((bandFrequencies) => {
- const sum = bandFrequencies.reduce((a, b) => a + b, 0)
- if (sum <= 0) {
- return 0
- }
- return Math.sqrt(sum / bandFrequencies.length);
- });
-
- return {
- summedFrequencies.map((frequency, index) => {
-
- const style = {
- height: minBarHeight + frequency * (maxBarHeight - minBarHeight) + "px",
- borderRadius: borderRadius + "px",
- width: barWidth + "px",
- transition:
- "background-color 0.35s ease-out, transform 0.25s ease-out",
- // transform: transform,
- }
-
- return
- })
- }
-}
-
-
-export default AudioVisualizer;
diff --git a/demo/src/platform/pc/rtc/camSection/camSelect/index.module.scss b/demo/src/platform/pc/rtc/camSection/camSelect/index.module.scss
deleted file mode 100644
index 8ca5088b..00000000
--- a/demo/src/platform/pc/rtc/camSection/camSelect/index.module.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.select {
- flex: 0 0 200px;
- width: 200px;
-}
diff --git a/demo/src/platform/pc/rtc/camSection/camSelect/index.tsx b/demo/src/platform/pc/rtc/camSection/camSelect/index.tsx
deleted file mode 100644
index 33a5e003..00000000
--- a/demo/src/platform/pc/rtc/camSection/camSelect/index.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-"use client"
-
-import AgoraRTC, { ICameraVideoTrack } from "agora-rtc-sdk-ng"
-import { useState, useEffect } from "react"
-import { Select } from "antd"
-
-import styles from "./index.module.scss"
-
-interface CamSelectProps {
- videoTrack?: ICameraVideoTrack
-}
-
-interface SelectItem {
- label: string
- value: string
- deviceId: string
-}
-
-const DEFAULT_ITEM: SelectItem = {
- label: "Default",
- value: "default",
- deviceId: ""
-}
-
-const CamSelect = (props: CamSelectProps) => {
- const { videoTrack } = props
- const [items, setItems] = useState([DEFAULT_ITEM]);
- const [value, setValue] = useState("default");
-
- useEffect(() => {
- if (videoTrack) {
- const label = videoTrack?.getTrackLabel();
- setValue(label);
- AgoraRTC.getCameras().then(arr => {
- setItems(arr.map(item => ({
- label: item.label,
- value: item.label,
- deviceId: item.deviceId
- })));
- });
- }
- }, [videoTrack]);
-
- const onChange = async (value: string) => {
- const target = items.find(item => item.value === value);
- if (target) {
- setValue(target.value);
- if (videoTrack) {
- await videoTrack.setDevice(target.deviceId);
- }
- }
- }
-
- return
-}
-
-export default CamSelect
diff --git a/demo/src/platform/pc/rtc/camSection/index.module.scss b/demo/src/platform/pc/rtc/camSection/index.module.scss
deleted file mode 100644
index 28b88e2e..00000000
--- a/demo/src/platform/pc/rtc/camSection/index.module.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-.camera {
- position: relative;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
-
- .select {
- height: 32px;
- display: flex;
- width: 100%;
- justify-content: flex-start;
- align-items: center;
-
- .text {
- flex: 1 1 auto;
- height: 32px;
- line-height: 32px;
- color: var(--Grey-300, #EAECF0);
- font-weight: 500;
- letter-spacing: 0.449px;
- }
-
- .iconWrapper {
- flex: 0 0 auto;
- margin-right: 12px;
- display: flex;
- width: 32px;
- height: 32px;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- flex-shrink: 0;
- border-radius: 6px;
- border: 1px solid #2B2F36;
- cursor: pointer;
- }
-
- .select {
- flex: 0 0 auto;
- width: 200px;
- }
- }
-
- .view {
- position: relative;
- margin-top: 12px;
- min-height: 210px;
- height: 210px;
- border-radius: 6px;
- border: 1px solid #272A2F;
- background: #1E2024;
- box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
- }
-}
diff --git a/demo/src/platform/pc/rtc/camSection/index.tsx b/demo/src/platform/pc/rtc/camSection/index.tsx
deleted file mode 100644
index 99e5392c..00000000
--- a/demo/src/platform/pc/rtc/camSection/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-"use client"
-
-import CamSelect from "./camSelect"
-import { CamIcon } from "@/components/icons"
-import styles from "./index.module.scss"
-import { ICameraVideoTrack } from 'agora-rtc-sdk-ng';
-import { LocalStreamPlayer } from "../streamPlayer"
-import { useState, useEffect, useMemo } from 'react';
-import { useSmallScreen } from "@/common"
-
-interface CamSectionProps {
- videoTrack?: ICameraVideoTrack
-}
-
-const CamSection = (props: CamSectionProps) => {
- const { videoTrack } = props
- const [videoMute, setVideoMute] = useState(false)
- const { xs } = useSmallScreen()
-
- const CamText = useMemo(() => {
- return xs ? "CAM" : "CAMERA"
- }, [xs])
-
- useEffect(() => {
- videoTrack?.setMuted(videoMute)
- }, [videoTrack, videoMute])
-
- const onClickMute = () => {
- setVideoMute(!videoMute)
- }
-
- return
-
- {CamText}
-
-
-
-
-
-
-
-
-
- Audio & Video
- }
- options={VOICE_OPTIONS} onChange={onVoiceChange}>
-
- {/* agent */}
-
- {/* you */}
-
-
You
- {/* microphone */}
-
- {/* camera */}
-
-
-
- {MicText}
-
-
-
-
-
-
-
+
+
+ )
+}
diff --git a/demo/src/components/pdfSelect/index.module.scss b/demo/src/components/pdfSelect/index.module.scss
deleted file mode 100644
index adb93280..00000000
--- a/demo/src/components/pdfSelect/index.module.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-// .pdfSelect {
- // min-width: 200px;
- // max-width: 300px;
- // }
-.dropdownRender {
- display: flex;
- justify-content: flex-end;
-}
diff --git a/demo/src/components/pdfSelect/index.tsx b/demo/src/components/pdfSelect/index.tsx
deleted file mode 100644
index f593bf1d..00000000
--- a/demo/src/components/pdfSelect/index.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { ReactElement, useState } from "react"
-import { PdfIcon } from "@/components/icons"
-import CustomSelect from "@/components/customSelect"
-import { Divider, message } from 'antd';
-import { useEffect } from 'react';
-import { apiGetDocumentList, apiUpdateDocument, useAppSelector } from "@/common"
-import PdfUpload from "./upload"
-import { OptionType, IPdfData } from "@/types"
-
-import styles from "./index.module.scss"
-
-const PdfSelect = () => {
- const options = useAppSelector(state => state.global.options)
- const { channel } = options
- const [pdfOptions, setPdfOptions] = useState([])
- const [selectedPdf, setSelectedPdf] = useState('')
- const agentConnected = useAppSelector(state => state.global.agentConnected)
-
-
- useEffect(() => {
- if(agentConnected) {
- getPDFOptions()
- } else {
- setPdfOptions([{
- value: '',
- label: 'Please select a PDF file'
- }])
- }
- }, [agentConnected])
-
-
- const getPDFOptions = async () => {
- const res = await apiGetDocumentList()
- setPdfOptions([{
- value: '',
- label: 'Please select a PDF file'
- }].concat(res.data.map((item: any) => {
- return {
- value: item.collection,
- label: item.file_name
- }
- })))
- setSelectedPdf('')
- }
-
- const onUploadSuccess = (data: IPdfData) => {
- setPdfOptions([...pdfOptions, {
- value: data.collection,
- label: data.fileName
- }])
- setSelectedPdf(data.collection)
- }
-
- const pdfDropdownRender = (menu: ReactElement) => {
- return <>
- {menu}
-
-
-
- }
-
-
- const onSelectPdf = async (val: string) => {
- const item = pdfOptions.find(item => item.value === val)
- if (!item) {
- return message.error("Please select a PDF file")
- }
- setSelectedPdf(val)
- await apiUpdateDocument({
- collection: val,
- fileName: item.label,
- channel
- })
- }
-
-
- return }
- onChange={onSelectPdf}
- value={selectedPdf}
- options={pdfOptions}
- dropdownRender={pdfDropdownRender}
- className={styles.pdfSelect} placeholder="Select a PDF file">
-}
-
-export default PdfSelect
diff --git a/demo/src/components/pdfSelect/upload/index.module.scss b/demo/src/components/pdfSelect/upload/index.module.scss
deleted file mode 100644
index fd559b5e..00000000
--- a/demo/src/components/pdfSelect/upload/index.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.btn {
- color: var(--theme-color, #EAECF0);
-
- &:hover {
- color: var(--theme-color, #EAECF0) !important;
- }
-}
diff --git a/demo/src/components/pdfSelect/upload/index.tsx b/demo/src/components/pdfSelect/upload/index.tsx
deleted file mode 100644
index 4eab9684..00000000
--- a/demo/src/components/pdfSelect/upload/index.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Select, Button, message, Upload, UploadProps } from "antd"
-import { useState } from "react"
-import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
-import { useAppSelector, genUUID } from "@/common"
-import { IPdfData } from "@/types"
-
-import styles from "./index.module.scss"
-
-interface PdfSelectProps {
- onSuccess?: (data: IPdfData) => void
-}
-
-const PdfUpload = (props: PdfSelectProps) => {
- const { onSuccess } = props
- const agentConnected = useAppSelector(state => state.global.agentConnected)
- const options = useAppSelector(state => state.global.options)
- const { channel, userId } = options
-
- const [uploading, setUploading] = useState(false)
-
- const uploadProps: UploadProps = {
- accept: "application/pdf",
- maxCount: 1,
- showUploadList: false,
- // the request will be rewrite at middleware.tsx to send to $AGENT_SERVER_URL
- action: `/api/vector/document/upload`,
- data: {
- channel_name: channel,
- uid: String(userId),
- request_id: genUUID()
- },
- onChange: (info) => {
- const { file } = info
- const { status, name } = file
- if (status == "uploading") {
- setUploading(true)
- } else if (status == 'done') {
- setUploading(false)
- const { response } = file
- if (response.code == "0") {
- message.success(`Upload ${name} success`)
- const { collection, file_name } = response.data
- onSuccess && onSuccess({
- fileName: file_name,
- collection
- })
- } else {
- message.error(response.msg)
- }
- } else if (status == 'error') {
- setUploading(false)
- message.error(`Upload ${name} failed`)
- }
- }
- }
-
- const onClickUploadPDF = (e: any) => {
- if (!agentConnected) {
- message.error("Please connect to agent first")
- e.stopPropagation()
- }
- }
-
-
- return
-
-
-}
-
-
-export default PdfUpload
From 016d331fdfe5f0e42bb2c3f92e5f26c2db6937cc Mon Sep 17 00:00:00 2001
From: czhen <56986964+shczhen@users.noreply.github.com>
Date: Thu, 7 Nov 2024 18:13:07 +0800
Subject: [PATCH 07/10] rm legacy code
---
.../components/customSelect/index.module.scss | 22 -------------------
demo/src/components/customSelect/index.tsx | 19 ----------------
2 files changed, 41 deletions(-)
delete mode 100644 demo/src/components/customSelect/index.module.scss
delete mode 100644 demo/src/components/customSelect/index.tsx
diff --git a/demo/src/components/customSelect/index.module.scss b/demo/src/components/customSelect/index.module.scss
deleted file mode 100644
index 0649e994..00000000
--- a/demo/src/components/customSelect/index.module.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.selectWrapper {
- position: relative;
-
- .prefixIconWrapper {
- position: absolute;
- z-index: 1;
- width: 3rem;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- :global(.customSelect) {
- width: 100%;
-
- :global(.ant-select-selector) {
- padding-left: calc(3rem - 8px) !important;
- }
- }
-
-}
diff --git a/demo/src/components/customSelect/index.tsx b/demo/src/components/customSelect/index.tsx
deleted file mode 100644
index 8dd1b188..00000000
--- a/demo/src/components/customSelect/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Select, SelectProps } from "antd"
-import styles from "./index.module.scss"
-
-type CustomSelectProps = SelectProps & {
- prefixIcon?: React.ReactNode;
-}
-
-const CustomSelect = (props: CustomSelectProps) => {
-
- const { prefixIcon, className, ...rest } = props;
-
- return
- {prefixIcon &&
{prefixIcon}
}
-
-