45 |
46 |
71 | );
72 | }
73 |
74 | export default AvatarCard;
75 |
--------------------------------------------------------------------------------
/src/components/CheckBox/index.module.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | .noStyle {
7 | display: flex;
8 | flex-direction: row;
9 | justify-content: flex-start;
10 | align-items: center;
11 |
12 | .icon {
13 | margin-right: 12px;
14 | width: 48px;
15 | height: 48px;
16 | }
17 | .content {
18 | display: flex;
19 | flex-direction: column;
20 | justify-content: center;
21 | align-items: flex-start;
22 |
23 | .label {
24 | font-size: 14px;
25 | font-weight: 500;
26 | line-height: 22px;
27 | }
28 |
29 | .description {
30 | font-size: 12px;
31 | font-weight: 400;
32 | line-height: 20px;
33 | text-align: left;
34 | }
35 | }
36 | }
37 |
38 |
39 |
40 | .wrapper {
41 | width: 260px;
42 | height: 88px;
43 | padding: 3px 16px 3px 16px;
44 | border-radius: 12px;
45 | border: 1px solid;
46 |
47 | border-color: rgba(22, 100, 255, 0.3);
48 | display: flex;
49 | flex-direction: row;
50 | justify-content: flex-start;
51 | align-items: center;
52 | cursor: pointer;
53 |
54 | .icon {
55 | border-radius: 50%;
56 | margin-right: 12px;
57 | width: 48px;
58 | height: 48px;
59 | }
60 |
61 | .content {
62 | display: flex;
63 | flex-direction: column;
64 | justify-content: center;
65 | align-items: flex-start;
66 |
67 | .label {
68 | font-family: PingFang SC;
69 | font-size: 14px;
70 | font-weight: 500;
71 | line-height: 22px;
72 | }
73 |
74 | .description {
75 | font-family: PingFang SC;
76 | font-size: 12px;
77 | font-weight: 400;
78 | line-height: 20px;
79 | text-align: left;
80 | }
81 | }
82 | }
83 |
84 | .wrapper:hover {
85 | box-shadow: 0px 5px 6px 0px rgba(82, 102, 133, 0.15);
86 | }
87 |
88 | .active {
89 | position: relative;
90 | border: 1px solid;
91 | border-color: rgba(0, 104, 255, 1);
92 |
93 | .checkIcon {
94 | position: absolute;
95 | bottom: 0px;
96 | right: 0px;
97 | }
98 | }
--------------------------------------------------------------------------------
/src/components/CheckBox/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import { ReactNode } from 'react';
7 | // import { Button } from '@arco-design/web-react';
8 | import CheckedSVG from '@/assets/img/Checked.svg';
9 | import styles from './index.module.less';
10 |
11 | interface IProps {
12 | className?: string;
13 | checked?: boolean;
14 | onClick?: () => void;
15 | icon?: string;
16 | label?: string | ReactNode;
17 | description?: string | ReactNode;
18 | suffix?: string | ReactNode;
19 | noStyle?: boolean;
20 | }
21 |
22 | function CheckBox(props: IProps) {
23 | const {
24 | noStyle,
25 | className = '',
26 | icon = '',
27 | checked,
28 | label,
29 | description,
30 | suffix,
31 | onClick,
32 | } = props;
33 |
34 | if (noStyle) {
35 | return (
36 |
47 | 
53 |
54 |
55 |
56 |
70 |
57 |
69 | {Name[scene]}
58 | 声源来自 {ReversedVoiceType[voice || '']}
59 |
60 | {modelMode === MODEL_MODE.ORIGINAL
61 | ? `模型 ${LLMConfig.ModelName}`
62 | : `模型来源 ${SourceName[modelMode]}`}
63 |
64 |
37 | {icon ? 
: ''}
38 |
43 | );
44 | }
45 |
46 | return (
47 |
39 |
42 | {label}
40 | {description}
41 |
51 | {icon ? : ''}
52 | 
: ''}
58 |
59 | );
60 | }
61 |
62 | export default CheckBox;
63 |
--------------------------------------------------------------------------------
/src/components/CheckBoxSelector/index.module.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | .wrapper {
7 | width: 100%;
8 | display: flex;
9 | flex-direction: row;
10 | align-items: center;
11 |
12 | .placeholder {
13 | font-size: 14px;
14 | font-weight: 400;
15 | line-height: 22px;
16 | color: var(--text-color-text-3, rgba(115, 122, 135, 1));
17 | }
18 |
19 | .box {
20 | margin-right: 16px;
21 | }
22 |
23 | .seeMore {
24 | display: flex;
25 | padding: 6px 12px;
26 | justify-content: center;
27 | align-items: center;
28 | gap: var(--border-radius-small, 4px);
29 | border-radius: 6px;
30 | background: linear-gradient(96deg, rgba(22, 100, 255, 0.10) 0%, rgba(128, 64, 255, 0.10) 97.7%);
31 |
32 | .seeMoreText {
33 | font-family: "PingFang SC";
34 | font-size: 13px;
35 | font-style: normal;
36 | font-weight: 500;
37 | line-height: 22px; /* 169.231% */
38 | letter-spacing: 0.039px;
39 | background: var(--Linear, linear-gradient(90deg, #004FFF 38.86%, #9865FF 100%));
40 | background-clip: text;
41 | -webkit-background-clip: text;
42 | -webkit-text-fill-color: transparent;
43 | }
44 | }
45 | }
46 |
47 | :global {
48 |
49 | .ant-modal-content {
50 | border-radius: 8px;
51 | }
52 | .ant-modal-footer {
53 | border-top: 0px;
54 | }
55 |
56 | .ant-modal-body {
57 | padding-top: 8px;
58 | padding-bottom: 16px;
59 | }
60 |
61 | .ant-modal-header {
62 | border-bottom: 0px;
63 | border-radius: 8px;
64 | }
65 | }
66 |
67 | .footer {
68 | width: calc(100% - 12px);
69 | display: flex;
70 | flex-direction: row;
71 | justify-content: flex-end;
72 | align-items: center;
73 | gap: 12px;
74 |
75 | .cancel {
76 | width: 88px;
77 | height: 32px;
78 | border-radius: 6px;
79 | border: 1px solid var(--line-color-border-3, rgba(221, 226, 233, 1))
80 | }
81 |
82 | .confirm {
83 | width: 88px;
84 | height: 32px;
85 | border-radius: 6px;
86 | background: linear-gradient(95.87deg, #1664FF 0%, #8040FF 97.7%);
87 | color: white !important;
88 | }
89 |
90 | .confirm:hover {
91 | opacity: .8;
92 | }
93 |
94 | .confirm:active {
95 | opacity: 1;
96 | }
97 | }
98 |
99 | .modalInner {
100 | width: 100%;
101 | // max-height: 500px;
102 | display: flex;
103 | flex: row;
104 | flex-wrap: wrap;
105 | overflow: auto;
106 | gap: 12px;
107 | }
108 |
109 | .modal {
110 | // max-height: 650px;
111 | overflow: hidden;
112 | }
113 |
114 | .modalInner::-webkit-scrollbar {
115 | width: 8px;
116 | height: 8px;
117 | border-radius: 5px;
118 | }
119 |
120 | .modalInner::-webkit-scrollbar-thumb {
121 | background: rgb(205, 204, 204);
122 | border-radius: 0px;
123 | border-radius: 5px;
124 | }
125 |
126 | .modalInner::-webkit-scrollbar-track {
127 | background: rgb(255, 255, 255);
128 | border-radius: 0px;
129 | }
--------------------------------------------------------------------------------
/src/components/CheckBoxSelector/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import { useEffect, useMemo, useState, memo } from 'react';
7 | import { Button, Drawer } from '@arco-design/web-react';
8 | import CheckBox from '@/components/CheckBox';
9 | import styles from './index.module.less';
10 | import utils from '@/utils/utils';
11 |
12 | export interface ICheckBoxItemProps {
13 | icon?: string;
14 | label: string;
15 | description?: string;
16 | key: string;
17 | }
18 |
19 | interface IProps {
20 | data?: ICheckBoxItemProps[];
21 | onChange?: (key: string) => void;
22 | value?: string;
23 | label?: string;
24 | moreIcon?: string;
25 | moreText?: string;
26 | placeHolder?: string;
27 | }
28 |
29 | function CheckBoxSelector(props: IProps) {
30 | const { placeHolder, label = '', data = [], value, onChange, moreIcon, moreText } = props;
31 | const [visible, setVisible] = useState(false);
32 | const [selected, setSelected] = useState
53 |
56 | {suffix}
57 | {checked ? {label}
54 | {description}
55 |
44 | {selectedOne ? (
45 |
60 | {placeHolder}
54 | )}
55 |
59 |
86 | {data.map((item) => (
87 | setSelected(item.key)}
95 | />
96 | ))}
97 |
98 |
24 | {tag ? : ''}
30 |
31 | );
32 | }
33 |
34 | export default CheckIcon;
35 |
--------------------------------------------------------------------------------
/src/components/DrawerRowItem/index.module.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | .row {
7 | width: 100%;
8 | display: flex;
9 | flex-direction: row;
10 | align-items: center;
11 | cursor: pointer;
12 |
13 | .firstPart {
14 | display: flex;
15 | flex-direction: row;
16 | align-items: center;
17 | width: 90%;
18 | color: var(--text-color-text-2, var(--text-color-text-2, #42464E));
19 | text-align: center;
20 |
21 | /* Body/body-2 medium */
22 | font-family: "PingFang SC";
23 | font-size: 13px;
24 | font-style: normal;
25 | font-weight: 500;
26 | line-height: 22px; /* 169.231% */
27 | letter-spacing: 0.039px;
28 | }
29 |
30 | .finalPart {
31 | display: flex;
32 | flex-direction: row;
33 | align-items: center;
34 | width: 10%;
35 | justify-content: flex-end;
36 |
37 | .rightOutlined {
38 | font-size: 12px;
39 | }
40 | }
41 |
42 | .icon {
43 | margin-right: 4px;
44 | }
45 | }
46 |
47 |
48 |
49 | .footer {
50 | width: calc(100% - 12px);
51 | display: flex;
52 | flex-direction: row;
53 | justify-content: flex-end;
54 | align-items: center;
55 |
56 | .cancel {
57 | width: 88px;
58 | height: 32px;
59 | border-radius: 6px;
60 | border: 1px solid var(--line-color-border-3, rgba(221, 226, 233, 1));
61 | margin-right: 12px;
62 | }
63 |
64 | .confirm {
65 | width: 88px;
66 | height: 32px;
67 | border-radius: 6px;
68 | background: linear-gradient(95.87deg, #1664FF 0%, #8040FF 97.7%);
69 | color: white;
70 | }
71 | }
72 |
73 | .children {
74 | width: 100%;
75 | height: 100%;
76 | position: relative;
77 | overflow: hidden;
78 | }
79 |
80 | :global {
81 | .ant-drawer-body {
82 | padding: 12px 24px 0px 24px;
83 | }
84 | }
--------------------------------------------------------------------------------
/src/components/DrawerRowItem/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import React, { useState } from 'react';
7 | import { Drawer } from '@arco-design/web-react';
8 | import { IconRight } from '@arco-design/web-react/icon';
9 | import styles from './index.module.less';
10 |
11 | type IDrawerRowItemProps = {
12 | btnSrc?: string;
13 | btnText: string;
14 | suffix?: React.ReactNode;
15 | drawer?: {
16 | title: string;
17 | width?: string | number;
18 | onOpen?: () => void;
19 | onClose?: () => void;
20 | onCancel?: () => void;
21 | onConfirm?: (handleClose: () => void) => void;
22 | children?: React.ReactNode;
23 | footer?: boolean;
24 | };
25 | } & React.HTMLAttributes{tag}
: ''}
25 |
26 | {icon ? : ''}
27 |
29 | {checked ? {title}
28 |
48 |
57 |
49 | {btnSrc ? 
: ''}
50 | {btnText}
51 | {suffix}
52 |
53 |
54 |
56 | {drawer?.children}
67 |
47 | 
70 |
74 | {children}
75 | {utils.isMobile() ? null : (
76 |
48 | {utils.isMobile() ? null : (
49 |
52 | {MenuProps.map((menuItem) => (
53 |
62 | ))}
63 |
64 | }
65 | >
66 |
77 |
97 | )}
98 |
99 | );
100 | }
101 |
102 | export default Header;
103 |
--------------------------------------------------------------------------------
/src/components/Loading/AudioLoading/index.module.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | .loader {
7 | display: flex;
8 | flex-direction: row;
9 | justify-content: center;
10 | align-items: center;
11 | gap: 6px;
12 | height: 36px;
13 | margin-top: 4px;
14 | }
15 |
16 | .dot {
17 | width: 20px;
18 | height: 20px;
19 | border-radius: 12px;
20 | background-color: rgba(148, 116, 255, 1);
21 | }
22 |
23 | .dotter {
24 | animation: glow 0.9s infinite;
25 | }
26 |
27 | @keyframes glow {
28 | 0% {
29 | height: 20px;
30 | }
31 | 50% {
32 | height: 36px;
33 | }
34 | 100% {
35 | height: 20px;
36 | }
37 | }
--------------------------------------------------------------------------------
/src/components/Loading/AudioLoading/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import { memo } from 'react';
7 | import style from './index.module.less';
8 |
9 | interface IAudioLoadingProps extends React.HTMLAttributes
80 | window.open('https://www.volcengine.com/product/veRTC/ConversationalAI', '_blank')
81 | }
82 | >
83 | 官网链接
84 |
85 |
88 | window.open(
89 | 'https://www.volcengine.com/contact/product?t=%E5%AF%B9%E8%AF%9D%E5%BC%8Fai&source=%E4%BA%A7%E5%93%81%E5%92%A8%E8%AF%A2',
90 | '_blank'
91 | )
92 | }
93 | >
94 | 联系我们
95 |
96 |
17 | {Array(3)
18 | .fill(0)
19 | .map((_, index) => (
20 |
27 | ))}
28 |
29 | );
30 | }
31 |
32 | export default memo(AudioLoading);
33 |
--------------------------------------------------------------------------------
/src/components/Loading/HorizonLoading/index.module.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | .loader {
7 | display: flex;
8 | }
9 |
10 | .dot {
11 | width: 10px;
12 | height: 10px;
13 | border-radius: 50%;
14 | background-color: white;
15 | animation: glow 0.9s infinite;
16 | }
--------------------------------------------------------------------------------
/src/components/Loading/HorizonLoading/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import { memo } from 'react';
7 | import style from './index.module.less';
8 |
9 | interface ILoadingProps extends React.HTMLAttributes
25 | {Array(3)
26 | .fill(0)
27 | .map((_, index) => (
28 |
36 | ))}
37 |
38 | );
39 | }
40 |
41 | export default memo(Loading);
42 |
--------------------------------------------------------------------------------
/src/components/Loading/VerticalLoading/index.module.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | .loader {
7 | width: 40px;
8 | height: 10px;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | margin: 6px 0px;
13 | }
14 |
15 | .bar {
16 | width: 3px;
17 | height: 12px;
18 | margin: 1px;
19 | display: inline-block;
20 | animation: shake 0.6s ease infinite;
21 | }
22 |
23 | /* 为每个 bar 指定不同的延迟来实现抖动效果 */
24 | .bar:nth-child(1) {
25 | animation-delay: -0.2s;
26 | }
27 |
28 | .bar:nth-child(2) {
29 | animation-delay: -0.1s;
30 | }
31 |
32 | .bar:nth-child(3) {
33 | }
34 |
35 | @keyframes shake {
36 | 0% {
37 | transform: scaleY(1);
38 | background-color: var(--primary-color-primary-7, rgba(23, 89, 221, 1));
39 | }
40 | 50% {
41 | transform: scaleY(0.5);
42 | background-color: var(--primary-color-primary-3, rgba(151, 188, 255, 1));
43 | }
44 | 100% {
45 | transform: scaleY(1);
46 | background-color: var(--primary-color-primary-7, rgba(23, 89, 221, 1));
47 | }
48 | }
--------------------------------------------------------------------------------
/src/components/Loading/VerticalLoading/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import { memo } from 'react';
7 | import styles from './index.module.less';
8 |
9 | function Loading() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 | );
17 | }
18 |
19 | export default memo(Loading);
20 |
--------------------------------------------------------------------------------
/src/components/NetworkIndicator/index.module.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | .panel {
7 | display: flex;
8 |
9 | .label {
10 | width: 90px;
11 | display: flex;
12 | flex-direction: column;
13 | gap: 4px;
14 |
15 | .state {
16 | font-weight: bold;
17 | }
18 | }
19 |
20 | .value {
21 | display: flex;
22 | flex-direction: column;
23 | gap: 4px;
24 | width: max-content;
25 |
26 | .state {
27 | font-weight: bold;
28 | }
29 |
30 | .loss {
31 | display: flex;
32 | flex-direction: row;
33 | justify-content: space-between;
34 | gap: 12px;
35 | }
36 | }
37 | }
38 |
39 | .wrapper {
40 | display: flex;
41 | align-items: flex-end;
42 | height: 14px;
43 | width: 14px;
44 | margin: 14px;
45 | column-gap: 1.5px;
46 | background-color: rgba(142, 142, 142, 0.05);
47 | border-radius: 3px;
48 | padding: 2px;
49 |
50 | .indicator {
51 | width: 30%;
52 | border-color: rgba(127, 127, 127, 0.184);
53 | border-width: 1px;
54 | border-radius: 1px;
55 | border-style: solid;
56 | opacity: 0.8;
57 | transition: height 0.3s;
58 | box-sizing: border-box;
59 | }
60 | }
--------------------------------------------------------------------------------
/src/components/NetworkIndicator/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import { useMemo } from 'react';
7 | import { Popover } from '@arco-design/web-react';
8 | import { useSelector } from 'react-redux';
9 | import { IconArrowDown, IconArrowUp } from '@arco-design/web-react/icon';
10 | import { NetworkQuality } from '@volcengine/rtc';
11 | import { RootState } from '@/store';
12 | import style from './index.module.less';
13 | import Config from '@/config';
14 |
15 | enum INDICATOR_COLORS {
16 | GREAT = 'rgba(35, 195, 67, 1)',
17 | FAIR = 'rgba(208, 141, 6, 1)',
18 | BAD = 'rgba(245, 78, 78, 1)',
19 | PLACE_HOLDER = 'transparent',
20 | }
21 |
22 | const INDICATOR_TEXT = {
23 | [NetworkQuality.UNKNOWN]: '正常',
24 | [NetworkQuality.EXCELLENT]: '正常',
25 | [NetworkQuality.GOOD]: '正常',
26 | [NetworkQuality.POOR]: '一般',
27 | [NetworkQuality.BAD]: '一般',
28 | [NetworkQuality.VBAD]: '较差',
29 | [NetworkQuality.DOWN]: '较差',
30 | };
31 |
32 | function NetworkIndicator() {
33 | const room = useSelector((state: RootState) => state.room);
34 | const networkQuality = room.networkQuality;
35 | const delay = room.localUser.audioStats?.rtt;
36 | const audioLossRateUpper = room.localUser.audioStats?.audioLossRate || 0;
37 | const audioLossRateLower =
38 | room.remoteUsers.find((user) => user.userId === Config.BotName)?.audioStats?.audioLossRate || 0;
39 |
40 | const indicators = useMemo(() => {
41 | switch (networkQuality) {
42 | case NetworkQuality.UNKNOWN:
43 | case NetworkQuality.EXCELLENT:
44 | case NetworkQuality.GOOD:
45 | return Array(3).fill(INDICATOR_COLORS.GREAT);
46 | case NetworkQuality.POOR:
47 | case NetworkQuality.BAD:
48 | return Array(2).fill(INDICATOR_COLORS.FAIR).concat(INDICATOR_COLORS.PLACE_HOLDER);
49 | case NetworkQuality.VBAD:
50 | case NetworkQuality.DOWN:
51 | default:
52 | return [INDICATOR_COLORS.BAD].concat(...Array(2).fill(INDICATOR_COLORS.PLACE_HOLDER));
53 | }
54 | }, [networkQuality]);
55 |
56 | return (
57 |
62 |
66 | 网络状态
63 | 延迟
64 | 丢包率
65 |
67 |
91 |
92 | }
93 | >
94 |
73 | {INDICATOR_TEXT[networkQuality]}
74 |
75 | {delay ? delay.toFixed(0) : '- '}ms
76 |
77 |
90 |
78 |
83 |
84 |
89 |
95 | {indicators.map((color, index) => (
96 |
104 | ))}
105 |
106 |
34 | {children}
35 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/TitleCard/index.module.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | .wrapper {
7 | width: 100%;
8 | box-sizing: border-box;
9 | height: max-content;
10 | display: flex;
11 | flex-direction: row;
12 | align-items: center;
13 | min-height: 54px;
14 | padding: 20px 16px;
15 | border-radius: 8px;
16 | border: 1px solid rgba(229, 238, 255, 1);
17 | backdrop-filter: blur(28px);
18 | box-shadow: 0px 0px 16px 0px 0px 4px 4px 0px rgba(255, 255, 255, 0.15) inset;
19 | backdrop-filter: blur(28px);
20 |
21 | .title {
22 | position: absolute;
23 | font-size: 12px;
24 | left: 10px;
25 | top: 0px;
26 | transform: translateY(-50%);
27 | padding: 0px 6px;
28 | z-index: 1;
29 | color: var(--text-color-text-3, rgba(115, 122, 135, 1));
30 | background-color: white;
31 | width: max-content;
32 | display: flex;
33 | flex-direction: row;
34 | justify-content: center;
35 | align-items: center;
36 |
37 | .required {
38 | height: max-content;
39 | width: max-content;
40 | color: red;
41 | margin-right: 6px;
42 | padding-top: 4.5px;
43 | font-size: 14px;
44 | }
45 | }
46 |
47 | div {
48 | width: 100%;
49 | }
50 | }
--------------------------------------------------------------------------------
/src/components/TitleCard/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import styles from './index.module.less';
7 |
8 | interface ITitleCardProps extends React.HTMLAttributes
17 |
23 | );
24 | }
25 | export default TitleCard;
26 |
--------------------------------------------------------------------------------
/src/config/index.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import { ConfigFactory } from './config';
7 |
8 | export * from './common';
9 |
10 | export const AIGC_PROXY_HOST = 'http://localhost:3001/proxyAIGCFetch';
11 |
12 | export const Config = ConfigFactory;
13 | export default new ConfigFactory();
14 |
--------------------------------------------------------------------------------
/src/index.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | @import './theme.less';
7 |
8 | body {
9 | margin: 0;
10 | overflow: hidden;
11 | width: 100% !important;
12 | background: linear-gradient(109.22deg, rgba(116, 37, 255, 0.05) 0.27%, rgba(39, 88, 255, 0.05) 51.39%, rgba(0, 102, 255, 0.05) 99.54%);
13 |
14 | img {
15 | user-drag: none;
16 | -webkit-user-drag: none;
17 | user-select: none;
18 | -webkit-user-select: none;
19 | -moz-user-select: none;
20 | -ms-user-select: none;
21 | }
22 | }
23 |
24 | @keyframes glow {
25 | 0% {
26 | opacity: 1;
27 | }
28 | 40% {
29 | opacity: 0.7;
30 | }
31 | 100% {
32 | opacity: 0.3;
33 | }
34 | }
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import ReactDOM from 'react-dom/client';
7 | import { Provider } from 'react-redux';
8 | import App from './App';
9 | import store from './store';
10 | import './index.less';
11 |
12 | const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
13 | root.render(
14 |
18 | {required ?
21 | *
: ''}
19 | {title}
20 | {children}
22 |
20 |
30 | );
31 | }
32 |
33 | export default InvokeButton;
34 |
--------------------------------------------------------------------------------
/src/pages/MainPage/MainArea/Antechamber/InvokeButton/loading.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import style from './index.module.less';
7 |
8 | function Loading(props: React.HTMLAttributes
21 | 
22 | {loading ? (
23 | 
26 | )}
27 |
28 | {loading ? '连接中' : '通话'}
29 |
12 | {Array(3)
13 | .fill(0)
14 | .map((_, index) => (
15 |
22 | ))}
23 |
24 | );
25 | }
26 |
27 | export default Loading;
28 |
--------------------------------------------------------------------------------
/src/pages/MainPage/MainArea/Antechamber/index.module.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | .wrapper {
7 | position: relative;
8 | width: 100%;
9 | height: 100%;
10 | border-radius: 16px;
11 | display: flex;
12 | flex-direction: column;
13 | align-items: center;
14 | justify-content: center;
15 |
16 | .avatar {
17 | /**
18 | * height = 128px in AvatarCard.avatar
19 | *
20 | */
21 | margin-top: -128px;
22 | /**
23 | * width = 128px in AvatarCard.avatar
24 | * 128px / 2 = 64px
25 | *
26 | */
27 | transform: translateX(calc(50% - 64px));
28 | }
29 |
30 | .mobile {
31 | transform: none !important;
32 | }
33 |
34 | .title {
35 | font-size: 24px;
36 | font-weight: 500;
37 | line-height: 32px;
38 | text-align: center;
39 | margin-top: 24px;
40 | }
41 |
42 | .description {
43 | font-size: 12px;
44 | font-weight: 400;
45 | line-height: 20px;
46 | text-align: center;
47 | color: rgba(66, 70, 78, 1);
48 | margin-top: 4px;
49 | }
50 |
51 | .invoke-btn {
52 | position: absolute;
53 | bottom: 120px;
54 | }
55 | }
--------------------------------------------------------------------------------
/src/pages/MainPage/MainArea/Antechamber/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import AvatarCard from '@/components/AvatarCard';
7 | import Utils from '@/utils/utils';
8 | import aigcConfig from '@/config';
9 | import InvokeButton from '@/pages/MainPage/MainArea/Antechamber/InvokeButton';
10 | import { useJoin } from '@/lib/useCommon';
11 | import style from './index.module.less';
12 |
13 | function Antechamber() {
14 | const [joining, dispatchJoin] = useJoin();
15 | const username = aigcConfig.BaseConfig.UserId;
16 | const roomId = aigcConfig.BaseConfig.RoomId;
17 |
18 | const handleJoinRoom = () => {
19 | if (!joining) {
20 | dispatchJoin(
21 | {
22 | username,
23 | roomId,
24 | publishAudio: true,
25 | },
26 | false
27 | );
28 | }
29 | };
30 |
31 | return (
32 |
33 |
38 | );
39 | }
40 |
41 | export default Antechamber;
42 |
--------------------------------------------------------------------------------
/src/pages/MainPage/MainArea/Room/AudioController.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import { useDispatch, useSelector } from 'react-redux';
7 | import AudioLoading from '@/components/Loading/AudioLoading';
8 | import { RootState } from '@/store';
9 | import RtcClient from '@/lib/RtcClient';
10 | import { setInterruptMsg } from '@/store/slices/room';
11 | import { useDeviceState } from '@/lib/useCommon';
12 | import { COMMAND } from '@/utils/handler';
13 | import style from './index.module.less';
14 | import StopRobotBtn from '@/assets/img/StopRobotBtn.svg';
15 |
16 | const THRESHOLD_VOLUME = 18;
17 |
18 | function AudioController(props: React.HTMLAttributesAI 语音助手
35 | Powered by 豆包大模型和火山引擎视频云 RTC
36 |
33 | {isAudioPublished ? (
34 | isAITalking ? (
35 |
47 | );
48 | }
49 | export default AudioController;
50 |
--------------------------------------------------------------------------------
/src/pages/MainPage/MainArea/Room/CameraArea.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import { useSelector } from 'react-redux';
7 | import { useEffect } from 'react';
8 | import { RootState } from '@/store';
9 | import { useDeviceState, useVisionMode } from '@/lib/useCommon';
10 | import RtcClient from '@/lib/RtcClient';
11 | import { ScreenShareScene } from '@/config';
12 |
13 | import styles from './index.module.less';
14 | import CameraCloseNoteSVG from '@/assets/img/CameraCloseNote.svg';
15 | import ScreenCloseNoteSVG from '@/assets/img/ScreenCloseNote.svg';
16 |
17 | const LocalVideoID = 'local-video-player';
18 | const LocalScreenID = 'local-screen-player';
19 |
20 | function CameraArea(props: React.HTMLAttributes
36 | 
37 | 点击打断
38 |
39 | ) : (
40 | 正在听...
41 | )
42 | ) : (
43 | 你已关闭麦克风
44 | )}
45 |
52 |
58 |
64 |
89 | ) : null;
90 | }
91 |
92 | export default CameraArea;
93 |
--------------------------------------------------------------------------------
/src/pages/MainPage/MainArea/Room/Conversation.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import React, { useRef, useEffect } from 'react';
7 | import { useSelector } from 'react-redux';
8 | import { Tag, Spin } from '@arco-design/web-react';
9 | import { RootState } from '@/store';
10 | import Loading from '@/components/Loading/HorizonLoading';
11 | import Config from '@/config';
12 | import styles from './index.module.less';
13 |
14 | const lines: (string | React.ReactNode)[] = [];
15 |
16 | function Conversation(props: React.HTMLAttributes
69 | 
74 |
88 |
75 | 请
76 | {isScreenMode ? (
77 |
78 | 打开屏幕采集
79 |
80 | ) : (
81 |
82 | 打开摄像头
83 |
84 | )}
85 |
86 | 体验豆包视觉理解模型
87 |
41 | {lines.map((line) => line)}
42 | {!isAIReady ? (
43 |
78 | );
79 | }
80 |
81 | export default Conversation;
82 |
--------------------------------------------------------------------------------
/src/pages/MainPage/MainArea/Room/ToolBar.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import { useSelector } from 'react-redux';
7 | import { memo, useState } from 'react';
8 | import { Drawer } from '@arco-design/web-react';
9 | import { useDeviceState, useLeave } from '@/lib/useCommon';
10 | import { RootState } from '@/store';
11 | import { isVisionMode } from '@/config/common';
12 | import { ScreenShareScene } from '@/config';
13 | import utils from '@/utils/utils';
14 | import Menu from '../../Menu';
15 |
16 | import style from './index.module.less';
17 | import CameraOpenSVG from '@/assets/img/CameraOpen.svg';
18 | import CameraCloseSVG from '@/assets/img/CameraClose.svg';
19 | import MicOpenSVG from '@/assets/img/MicOpen.svg';
20 | import SettingSVG from '@/assets/img/Setting.svg';
21 | import MicCloseSVG from '@/assets/img/MicClose.svg';
22 | import LeaveRoomSVG from '@/assets/img/LeaveRoom.svg';
23 | import ScreenOnSVG from '@/assets/img/ScreenOn.svg';
24 | import ScreenOffSVG from '@/assets/img/ScreenOff.svg';
25 |
26 | function ToolBar(props: React.HTMLAttributes
44 |
47 | ) : (
48 | ''
49 | )}
50 | {msgHistory?.map(({ value, user, isInterrupted }, index) => {
51 | const isUserMsg = user === userId;
52 | const isRobotMsg = user === Config.BotName;
53 | if (!isUserMsg && !isRobotMsg) {
54 | return '';
55 | }
56 | return (
57 |
61 | 已打断 : ''}
74 |
75 | );
76 | })}
77 |
62 | {value}
63 |
73 | {!isUserMsg && isInterrupted ?
64 | {isAIReady &&
65 | (isUserTextLoading(user) || isAITextLoading(user)) &&
66 | index === msgHistory.length - 1 ? (
67 |
72 |
47 | {utils.isMobile() ? (
48 | 
49 | ) : null}
50 | 
switchMic(true)}
53 | className={style.btn}
54 | alt="mic"
55 | />
56 | {isVisionMode(model) ? (
57 | isScreenMode ? (
58 | 
switchScreenCapture()}
61 | className={style.btn}
62 | alt="screenShare"
63 | />
64 | ) : (
65 | 
switchCamera(true)}
68 | className={style.btn}
69 | alt="camera"
70 | />
71 | )
72 | ) : (
73 | ''
74 | )}
75 | 
76 | {utils.isMobile() ? (
77 | setOpen(false)}
81 | style={{
82 | width: 'max-content',
83 | }}
84 | footer={null}
85 | >
86 |
87 |
88 | ) : null}
89 |
90 | );
91 | }
92 | export default memo(ToolBar);
93 |
--------------------------------------------------------------------------------
/src/pages/MainPage/MainArea/Room/index.module.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | .wrapper {
7 | position: relative;
8 | width: 100%;
9 | height: 100%;
10 | border-radius: 16px;
11 | padding: 36px 72px;
12 | box-sizing: border-box;
13 |
14 | .conversation {
15 | width: 100%;
16 | position: relative;
17 | height: 100%;
18 | /**
19 | * 100% 为容器高度
20 | * 128px 为上层 DouBao Card Height
21 | * 24px 为 margin top
22 | * 36px * 2 为容器 padding
23 | * 128 + 24 + 36 * 2 = 224px
24 | */
25 | max-height: calc(100% - 224px - 8px);
26 | display: flex;
27 | flex-direction: column;
28 | padding-bottom: 12px;
29 | // background-color: black;
30 | overflow-x: hidden;
31 | overflow-y: auto;
32 | margin-top: 24px;
33 |
34 | .sentence {
35 | position: relative;
36 | display: flex;
37 | flex-direction: row;
38 | justify-content: flex-start;
39 | align-items: center;
40 | width: max-content;
41 | white-space: normal;
42 | max-width: 100%;
43 | line-height: 28px;
44 |
45 | .content {
46 | width: max-content;
47 | }
48 | }
49 |
50 | .user {
51 | width: max-content;
52 | border: 0px solid;
53 | align-self: flex-end;
54 | padding: 8px 12px 8px 12px;
55 | border-radius: 12px 0px 12px 12px;
56 | background: var(--background-color-bg-5, rgba(241, 243, 245, 1));
57 | margin-top: 12px;
58 | margin-bottom: 12px;
59 | }
60 | .robot {
61 | font-family: PingFang SC;
62 | font-size: 14px;
63 | font-weight: 400;
64 | letter-spacing: 0.003em;
65 |
66 | border: 0px solid;
67 | align-self: flex-start;
68 | padding: 3px 12px 3px 0px;
69 | }
70 |
71 | .loading-wrapper {
72 | width: max-content;
73 | display: inline-block;
74 |
75 | .loading {
76 | margin-left: 8px;
77 | width: max-content;
78 | }
79 |
80 | .dot {
81 | background-color: rgba(193, 163, 237, 1);
82 | width: 8px;
83 | height: 8px;
84 | }
85 | }
86 |
87 | .aiReadying {
88 | font-family: PingFang SC;
89 | font-size: 16px;
90 | font-weight: 500;
91 | color: rgba(27, 30, 61, 0.6);
92 | text-align: center;
93 | display: flex;
94 | flex-direction: row;
95 | justify-content: flex-start;
96 | align-items: center;
97 | line-height: 28px;
98 | }
99 |
100 | .aiReading-spin {
101 | margin-right: 12px;
102 | line-height: 16px;
103 | }
104 |
105 | .interruptTag {
106 | width: max-content;
107 | height: 22px;
108 | padding: 0px 6px 0px 6px;
109 | border-radius: 4px;
110 | margin-left: 6px;
111 | font-family: PingFang SC;
112 | font-size: 12px;
113 | font-weight: 400;
114 | line-height: 22px;
115 | letter-spacing: 0.003em;
116 | color: var(--text-color-text-3, rgba(115, 122, 135, 1));
117 | background: var(--security-unknown-tag-unknown-1, rgba(241, 243, 245, 1));
118 | }
119 | }
120 |
121 | .conversation::-webkit-scrollbar {
122 | width: 0px;
123 | height: 0px;
124 | }
125 |
126 | .conversation::-webkit-scrollbar-thumb {
127 | background: rgba(0,0,0,0);
128 | border-radius: 0px;
129 | }
130 |
131 | .conversation::-webkit-scrollbar-track {
132 | background: rgba(0,0,0,0);
133 | border-radius: 0px;
134 | }
135 |
136 | .toolBar {
137 | position: absolute;
138 | right: 0px;
139 | margin-right: 36px;
140 | bottom: 36px;
141 | }
142 |
143 | .controller {
144 | position: absolute;
145 | left: 0px;
146 | bottom: 36px;
147 | margin-left: 50%;
148 | transform: translateX(-50%);
149 | }
150 |
151 | .declare {
152 | position: absolute;
153 | bottom: 8px;
154 | left: 12px;
155 | color: var(--text-color-text-4, rgba(199, 204, 214, 1));
156 | font-size: 10px;
157 | font-weight: 400;
158 | line-height: 20px;
159 | }
160 | }
161 |
162 | .mobile {
163 | padding: 12px 28px;
164 | }
165 |
166 | .text {
167 | width: 100%;
168 | text-align: center;
169 | color: rgba(148, 116, 255, 1);
170 | font-size: 14px;
171 | font-weight: 500;
172 | line-height: 22px;
173 | }
174 |
175 | .closed {
176 | width: 100%;
177 | text-align: center;
178 | color: #737A87;
179 | font-size: 14px;
180 | font-weight: 400;
181 | line-height: 19.6px;
182 | }
183 |
184 | .btns {
185 | width: 100%;
186 | display: flex;
187 | flex-direction: row;
188 | justify-content: flex-end;
189 | align-items: center;
190 | gap: 16px;
191 |
192 | .setting {
193 | background-color: rgba(111, 111, 111, 0.497);
194 | border-radius: 50%;
195 | width: 48px;
196 | height: 48px;
197 | padding: 12px;
198 | box-sizing: border-box;
199 | cursor: pointer;
200 | }
201 |
202 | .btn {
203 | cursor: pointer;
204 | }
205 |
206 | .btn:hover {
207 | opacity: 0.8;
208 | }
209 |
210 | .btn:active {
211 | opacity: 1;
212 | }
213 | }
214 |
215 | .column {
216 | flex-direction: column !important;
217 | align-items: flex-end !important;
218 | }
219 |
220 | .interrupt {
221 | display: flex;
222 | flex-direction: row;
223 | justify-content: center;
224 | align-items: center;
225 | background: #FFFFFF;
226 | border-radius: 4px;
227 | box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.08), 0px 0px 0px 1px rgba(221, 226, 233, 1);
228 | border-color: #d9d9d9;
229 | width: 81px;
230 | height: 24px;
231 | gap: 4px;
232 | cursor: pointer;
233 | user-select: none;
234 | -webkit-user-select: none; /* Safari */
235 | -moz-user-select: none; /* Firefox */
236 | -ms-user-select: none; /* Internet Explorer/Edge */
237 |
238 | .interrupt-text {
239 | color: var(--text-color-text-3, rgba(115, 122, 135, 1));
240 | font-size: 12px;
241 | }
242 |
243 | &:hover {
244 | opacity: 0.8;
245 | }
246 |
247 | &:active {
248 | opacity: 1;
249 | }
250 | }
251 |
252 | .camera-wrapper {
253 | position: absolute;
254 | top: 16px;
255 | right: 16px;
256 | width: 320px;
257 | height: 200px;
258 | border-radius: 8px;
259 | background: var(--line-color-border-2, rgba(234, 237, 241, 1));
260 | display: flex;
261 | flex-direction: column;
262 | justify-content: center;
263 | align-items: center;
264 | border: 0.81px solid var(--line-color-border-3, rgba(221, 226, 233, 1));
265 | overflow: hidden;
266 | z-index: 4;
267 |
268 | .camera-player {
269 | width: 100%;
270 | height: 100%;
271 | border-radius: 8px;
272 | }
273 |
274 | .camera-player-hidden {
275 | display: none !important;
276 | }
277 |
278 | .camera-placeholder {
279 | width: 100%;
280 | display: flex;
281 | flex-direction: column;
282 | justify-content: center;
283 | align-items: center;
284 | font-size: 12px;
285 | color: var(--text-color-text-3, rgba(115, 122, 135, 1));
286 |
287 | .camera-placeholder-close-note {
288 | margin-bottom: 8px;
289 | width: 60px;
290 | height: 60px;
291 | }
292 |
293 | .camera-open-btn {
294 | color: var(--primary-color-primary-6, rgba(22, 100, 255, 1));
295 | cursor: pointer;
296 | }
297 | }
298 | }
--------------------------------------------------------------------------------
/src/pages/MainPage/MainArea/Room/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import AvatarCard from '@/components/AvatarCard';
7 | import Conversation from './Conversation';
8 | import ToolBar from './ToolBar';
9 | import CameraArea from './CameraArea';
10 | import AudioController from './AudioController';
11 | import utils from '@/utils/utils';
12 | import style from './index.module.less';
13 | import DoubaoAvatar from '@/assets/img/DoubaoAvatar.png';
14 |
15 | function Room() {
16 | return (
17 |
18 |
25 | );
26 | }
27 |
28 | export default Room;
29 |
--------------------------------------------------------------------------------
/src/pages/MainPage/MainArea/index.module.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | .wrapper {
7 | width: 100%;
8 | height: 100%;
9 | background-color: white;
10 | border: 1px solid var(--line-color-border-2, rgba(234, 237, 241, 1));
11 | border-radius: 16px;
12 | padding: 20px 12.5%;
13 |
14 | .space {
15 | width: 100%;
16 | min-height: 40px;
17 | }
18 |
19 | .doubaoIcon {
20 | width: 111px;
21 | height: 111px;
22 | min-height: 111px;
23 | overflow: hidden;
24 | }
25 |
26 | .interruptTag {
27 | width: max-content;
28 | height: 22px;
29 | padding: 0px 6px 0px 6px;
30 | border-radius: 4px;
31 | margin-left: 4px;
32 | font-family: PingFang SC;
33 | font-size: 12px;
34 | font-weight: 400;
35 | line-height: 22px;
36 | letter-spacing: 0.003em;
37 | color: var(--text-color-text-3, rgba(115, 122, 135, 1));
38 | background: var(--security-unknown-tag-unknown-1, rgba(241, 243, 245, 1));
39 | }
40 |
41 | .welcome {
42 | font-family: PingFang SC;
43 | font-size: 24px;
44 | font-weight: 500;
45 | line-height: 32px;
46 | letter-spacing: 0.003em;
47 | text-align: left;
48 | margin-top: 8px;
49 | }
50 |
51 | .weight {
52 | background: linear-gradient(90deg, #004FFF 38.86%, #9865FF 100%);
53 | -webkit-background-clip: text;
54 | background-clip: text;
55 | color: transparent;
56 | }
57 |
58 | .tip {
59 | font-family: PingFang SC;
60 | font-size: 13px;
61 | font-weight: 400;
62 | line-height: 22px;
63 | letter-spacing: 0.003em;
64 | text-align: left;
65 | color: rgba(27, 30, 61, 0.6);
66 | margin-top: 18px;
67 | margin-bottom: 18px;
68 | }
69 |
70 | .tagProblem {
71 | width: max-content;
72 | border-radius: 4px;
73 | font-family: PingFang SC;
74 | font-size: 12px;
75 | font-weight: 500;
76 | line-height: 20px;
77 | letter-spacing: 0.003em;
78 | text-align: center;
79 | margin-bottom: 12px;
80 | color: rgba(66, 70, 78, 1);
81 | }
82 |
83 | .conversation {
84 | overflow-x: hidden;
85 | overflow-y: auto;
86 | width: 100%;
87 | position: relative;
88 | height: calc(75% - 12px);
89 | display: flex;
90 | flex-direction: column;
91 | padding-bottom: 12px;
92 |
93 | .aiReadying {
94 | font-family: PingFang SC;
95 | font-size: 16px;
96 | font-weight: 500;
97 | line-height: 18px;
98 | letter-spacing: 0.003em;
99 | color: rgba(27, 30, 61, 0.6);
100 | margin-top: 12px;
101 | text-align: center;
102 | display: flex;
103 | flex-direction: row;
104 | justify-content: flex-start;
105 | align-items: center;
106 | }
107 |
108 | .aiReading-spin {
109 | margin-right: 12px;
110 | }
111 | }
112 |
113 | .conversation::-webkit-scrollbar {
114 | width: 0px;
115 | height: 0px;
116 | }
117 |
118 | .conversation::-webkit-scrollbar-thumb {
119 | background: rgba(0,0,0,0);
120 | border-radius: 0px;
121 | }
122 |
123 | .conversation::-webkit-scrollbar-track {
124 | background: rgba(0,0,0,0);
125 | border-radius: 0px;
126 | }
127 |
128 | .sentence {
129 | display: flex;
130 | flex-direction: row;
131 | justify-content: flex-start;
132 | align-items: center;
133 | width: 100%;
134 | }
135 | .user {
136 | width: max-content;
137 | border: 0px solid;
138 | align-self: flex-end;
139 | padding: 8px 12px 8px 12px;
140 | border-radius: 12px 0px 12px 12px;
141 | background: var(--background-color-bg-5, rgba(241, 243, 245, 1));
142 | margin-top: 12px;
143 | }
144 | .robot {
145 | font-family: PingFang SC;
146 | font-size: 14px;
147 | font-weight: 400;
148 | letter-spacing: 0.003em;
149 |
150 | border: 0px solid;
151 | align-self: flex-start;
152 | padding: 3px 12px 3px 0px;
153 | }
154 |
155 | .userTalkingWave {
156 | height: 100px;
157 | }
158 |
159 | .userStopTalkingWave {
160 | height: 100px;
161 | transform: scaleY(.5);
162 | }
163 |
164 | .status {
165 | overflow: hidden;
166 | width: 100%;
167 | height: 25%;
168 | display: flex;
169 | flex-direction: column;
170 | justify-content: flex-end;
171 | align-items: center;
172 | gap: 8px;
173 |
174 | .status-row {
175 | display: flex;
176 | flex-direction: row;
177 | justify-content: center;
178 | align-items: center;
179 |
180 | .status-icon {
181 | width: 24px;
182 | height: 24px;
183 | margin-right: 6px;
184 | }
185 |
186 | .status-text {
187 | font-family: PingFang SC;
188 | font-size: 14px;
189 | font-weight: 500;
190 | line-height: 22px;
191 | letter-spacing: 0.003em;
192 | }
193 | }
194 |
195 | .desc {
196 | font-family: PingFang SC;
197 | font-size: 10px;
198 | font-weight: 400;
199 | line-height: 18px;
200 | letter-spacing: 0.003em;
201 | text-align: center;
202 | color: var(--text-color-text-4, rgba(199, 204, 214, 1));
203 | }
204 |
205 | .micNotify {
206 | display: flex;
207 | flex-direction: row;
208 | justify-content: center;
209 | align-items: center;
210 | }
211 |
212 | .micReopen {
213 | position: relative;
214 | width: 107px;
215 | height: 40px;
216 | padding: 5px 16px 5px 16px;
217 | margin-left: 12px;
218 | margin-right: 12px;
219 | background-clip: padding-box; /* 确保背景不覆盖边框 */
220 | border-radius: 12px;
221 |
222 | &:hover,
223 | &:active,
224 | &:focus {
225 | opacity: 1;
226 | color: rgba(0, 0, 0, 0.85);
227 | border-color: #d9d9d9;
228 | }
229 | }
230 | }
231 |
232 | .interrupt {
233 | display: flex;
234 | flex-direction: row;
235 | justify-content: center;
236 | align-items: center;
237 | margin-top: 12px;
238 | width: max-content;
239 | line-height: 28px;
240 | padding: 1px 6px 1px 6px;
241 | border-radius: 4px;
242 | margin-left: 4px;
243 | font-family: PingFang SC;
244 | font-size: 12px;
245 | font-weight: 400;
246 | letter-spacing: 0.003em;
247 | text-align: left;
248 | box-shadow: 0px 0px 0px 1px rgba(221, 226, 233, 1);
249 | color: var(--text-color-text-3, rgba(115, 122, 135, 1));
250 |
251 | &:hover,
252 | &:active,
253 | &:focus {
254 | opacity: 1;
255 | border-color: #d9d9d9;
256 | }
257 |
258 | img {
259 | margin-right: 8px;
260 | }
261 | }
262 | }
--------------------------------------------------------------------------------
/src/pages/MainPage/MainArea/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import { useSelector } from 'react-redux';
7 | import Antechamber from './Antechamber';
8 | import Room from './Room';
9 |
10 | function MainArea() {
11 | const room = useSelector((state: any) => state.room);
12 | const isJoined = room.isJoined;
13 | return isJoined ? AI生成内容由大模型生成，不能完全保障真实
24 |
19 |
24 | AI 设置
20 |
21 |
23 | {DEVICE_NAME[type]}
72 |
73 | switcher(enable)}
77 | disabled={!permission}
78 | />
79 |
86 |
87 |
88 | ),
89 | }}
90 | />
91 | );
92 | }
93 |
94 | export default DeviceDrawerButton;
95 |
--------------------------------------------------------------------------------
/src/pages/MainPage/Menu/components/Interrupt/index.module.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | .interrupt {
7 | position: relative;
8 | display: flex;
9 | flex-direction: row;
10 | align-items: center;
11 | justify-content: space-between;
12 |
13 | .label {
14 | font-size: 13px;
15 | font-weight: 400;
16 | line-height: 22px;
17 | color: var(--text-color-text-1, rgba(12, 13, 14, 1));
18 |
19 | .icon {
20 | margin-left: 4px;
21 | }
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/pages/MainPage/Menu/components/Interrupt/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import { Popover, Switch } from '@arco-design/web-react';
7 | import { IconQuestionCircle } from '@arco-design/web-react/icon';
8 | import { useState } from 'react';
9 | import { useDispatch } from 'react-redux';
10 | import Config from '@/config';
11 | import styles from './index.module.less';
12 | import RtcClient from '@/lib/RtcClient';
13 | import { clearHistoryMsg } from '@/store/slices/room';
14 |
15 | function Interrupt() {
16 | const dispatch = useDispatch();
17 | const [switchAble, setSwitchAble] = useState(true);
18 | const [enable, setEnable] = useState(Config.InterruptMode);
19 | const handleChange = () => {
20 | setSwitchAble(false);
21 | setEnable(!enable);
22 | Config.InterruptMode = !enable;
23 | if (RtcClient.getAudioBotEnabled()) {
24 | dispatch(clearHistoryMsg());
25 | }
26 | RtcClient.updateAudioBot();
27 | setTimeout(() => {
28 | setSwitchAble(true);
29 | }, 3000);
30 | };
31 | return (
32 |
33 |
43 | );
44 | }
45 |
46 | export default Interrupt;
47 |
--------------------------------------------------------------------------------
/src/pages/MainPage/Menu/components/Operation/index.module.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | .device {
7 | display: flex;
8 | flex-direction: column;
9 | gap: 16px;
10 | }
11 |
12 | .box {
13 | position: relative;
14 | width: 100%;
15 | border-radius: 16px;
16 | background-color: white;
17 | border: 1px solid var(--line-color-border-2, rgba(234, 237, 241, 1));
18 | padding: 16px 24px 16px 24px;
19 | box-sizing: border-box;
20 | margin-bottom: 16px;
21 | }
--------------------------------------------------------------------------------
/src/pages/MainPage/Menu/components/Operation/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import { MediaType } from '@volcengine/rtc';
7 | import DeviceDrawerButton from '../DeviceDrawerButton';
8 | import { useVisionMode } from '@/lib/useCommon';
9 | import AISettingAnchor from '../AISettingAnchor';
10 | import Interrupt from '../Interrupt';
11 | import styles from './index.module.less';
12 |
13 | function Operation() {
14 | const { isVisionMode, isScreenMode } = useVisionMode();
15 | return (
16 |
34 | 语音打断
35 |
36 |
38 |
39 |
40 |
42 |
17 |
22 | );
23 | }
24 |
25 | export default Operation;
26 |
--------------------------------------------------------------------------------
/src/pages/MainPage/Menu/index.module.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | .wrapper {
7 | width: 200px;
8 | height: 100%;
9 | border-radius: 16px;
10 | display: flex;
11 | flex-direction: column;
12 | align-items: center;
13 |
14 | .info {
15 | .bold {
16 | font-size: 13px;
17 | font-weight: 500;
18 | line-height: 22px;
19 | color: var(--text-color-text-1, rgba(12, 13, 14, 1));
20 | }
21 |
22 | .gray {
23 | display: flex;
24 | flex-direction: row;
25 | align-items: center;
26 | font-size: 13px;
27 | font-weight: 400;
28 | line-height: 22px;
29 | color: var(--text-color-text-3, rgba(115, 122, 135, 1));
30 |
31 | .value {
32 | width: 65%;
33 | font-size: 12px;
34 | font-weight: 500;
35 | margin-left: 5px;
36 | }
37 |
38 | :global {
39 | .arco-typography {
40 | margin-bottom: 0px;
41 | }
42 | }
43 | }
44 |
45 | .buttonArea {
46 | width: 100%;
47 | display: flex;
48 | flex-direction: row;
49 | align-items: center;
50 | justify-content: space-between;
51 | margin-top: 8px;
52 |
53 | .getMore {
54 | width: 100%;
55 | color: #fff;
56 | height: 32px;
57 | text-shadow: none;
58 | box-shadow: none;
59 | border: none;
60 | padding: 0px 24px;
61 | background: linear-gradient(56.59deg, #3C73FF 15.53%, #6E41EE 62.28%, #D641EE 90.32%),
62 | radial-gradient(203.56% 121.74% at 27.12% -21.74%, rgba(82, 182, 255, 0.2) 0%, rgba(143, 65, 238, 0) 100%),
63 | radial-gradient(134.75% 51.95% at 26.69% 5.8%, rgba(157, 214, 255, 0.1) 0%, rgba(143, 65, 238, 0) 100%),
64 | radial-gradient(82.39% 83.92% at 147.46% 76.45%, rgba(82, 99, 255, 0.8) 0%, rgba(143, 65, 238, 0) 100%);
65 | border-radius: 4px;
66 | display: flex;
67 | flex-direction: row;
68 | justify-content: center;
69 | align-items: center;
70 |
71 | color: var(--Primary-Neutral-0, #FFF);
72 | text-align: center;
73 |
74 | /* Body/body-2 medium */
75 | font-family: "PingFang SC";
76 | font-size: 13px;
77 | font-style: normal;
78 | font-weight: 500;
79 | cursor: pointer;
80 | }
81 |
82 | .getMore:hover {
83 | opacity: 0.9;
84 | }
85 |
86 | .getMore:active {
87 | opacity: 1;
88 | }
89 |
90 | .getMore[disabled],
91 | .getMore[disabled]:hover {
92 | color: #fff;
93 | background: linear-gradient(95.87deg, #1664FF 0%, #8040FF 97.7%);
94 | opacity: 0.8;
95 | }
96 | }
97 | }
98 |
99 | .questions {
100 | display: flex;
101 | flex-direction: column;
102 | gap: 8px;
103 |
104 | .title {
105 | font-size: 13px;
106 | font-weight: 500;
107 | line-height: 22px;
108 | }
109 |
110 | .line {
111 | font-size: 12px;
112 | font-weight: 400;
113 | line-height: 20px;
114 | color: rgba(66, 70, 78, 1);
115 | cursor: pointer;
116 | }
117 | }
118 |
119 | .device {
120 | display: flex;
121 | flex-direction: column;
122 | gap: 16px;
123 | }
124 |
125 | .box {
126 | position: relative;
127 | width: 100%;
128 | border-radius: 16px;
129 | background-color: white;
130 | border: 1px solid var(--line-color-border-2, rgba(234, 237, 241, 1));
131 | padding: 16px 24px 16px 24px;
132 | box-sizing: border-box;
133 | margin-bottom: 16px;
134 | }
135 |
136 | .resetTime {
137 | position: relative;
138 | width: 100%;
139 | border-radius: 16px;
140 | padding: 0px 24px 8px 24px;
141 | box-sizing: border-box;
142 | display: flex;
143 | flex-direction: row;
144 | justify-content: center;
145 | align-items: center;
146 |
147 | user-select: none;
148 | -webkit-user-select: none;
149 | -moz-user-select: none;
150 | -ms-user-select: none;
151 |
152 | .normalLine {
153 | color: #42464E;
154 | /* Body/body-1 regular */
155 | font-family: "PingFang SC";
156 | font-size: 12px;
157 | font-style: normal;
158 | font-weight: 400;
159 | line-height: 20px; /* 166.667% */
160 | letter-spacing: 0.036px;
161 | opacity: 0.8;
162 | }
163 | }
164 | }
165 |
166 | .mobile-camera-wrapper {
167 | position: relative;
168 | width: 100%;
169 | height: 100%;
170 | border-radius: 16px;
171 | display: flex;
172 | flex-direction: column;
173 | justify-content: center;
174 | align-items: center;
175 | margin-bottom: 16px;
176 |
177 | .mobile-camera {
178 | position: relative !important;
179 | width: 100% !important;
180 | height: 100% !important;
181 | top: auto !important;
182 | right: auto !important;
183 | }
184 | }
--------------------------------------------------------------------------------
/src/pages/MainPage/Menu/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import VERTC from '@volcengine/rtc';
7 | import { useEffect, useState } from 'react';
8 | import { Tooltip, Typography } from '@arco-design/web-react';
9 | import { useDispatch, useSelector } from 'react-redux';
10 | import { useVisionMode } from '@/lib/useCommon';
11 | import { RootState } from '@/store';
12 | import RtcClient from '@/lib/RtcClient';
13 | import Operation from './components/Operation';
14 | import { Questions } from '@/config';
15 | import { COMMAND, INTERRUPT_PRIORITY } from '@/utils/handler';
16 | import CameraArea from '../MainArea/Room/CameraArea';
17 | import { setHistoryMsg, setInterruptMsg } from '@/store/slices/room';
18 | import utils from '@/utils/utils';
19 | import packageJson from '../../../../package.json';
20 | import styles from './index.module.less';
21 |
22 | function Menu() {
23 | const dispatch = useDispatch();
24 | const [question, setQuestion] = useState('');
25 | const room = useSelector((state: RootState) => state.room);
26 | const scene = room.scene;
27 | const isJoined = room?.isJoined;
28 | const isVisionMode = useVisionMode();
29 |
30 | const handleQuestion = (que: string) => {
31 | RtcClient.commandAudioBot(COMMAND.EXTERNAL_TEXT_TO_LLM, INTERRUPT_PRIORITY.HIGH, que);
32 | setQuestion(que);
33 | };
34 |
35 | useEffect(() => {
36 | if (question && !room.isAITalking) {
37 | dispatch(setInterruptMsg());
38 | dispatch(
39 | setHistoryMsg({
40 | text: question,
41 | user: RtcClient.basicInfo.user_id,
42 | paragraph: true,
43 | definite: true,
44 | })
45 | );
46 | setQuestion('');
47 | }
48 | }, [question, room.isAITalking]);
49 |
50 | return (
51 |
52 | {isJoined && utils.isMobile() && isVisionMode ? (
53 |
93 | );
94 | }
95 |
96 | export default Menu;
97 |
--------------------------------------------------------------------------------
/src/pages/MainPage/index.module.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | .main {
7 | position: relative;
8 | width: 100%;
9 | height: calc(100% - 48px);
10 | display: flex;
11 | flex-direction: row;
12 | align-items: center;
13 | box-sizing: border-box;
14 |
15 | .mainArea {
16 | position: relative;
17 | width: calc(100% - 220px);
18 | height: 100%;
19 | margin-right: 2%;
20 | background-color: white;
21 | border-radius: 16px;
22 | overflow: hidden;
23 | }
24 |
25 | .isMobile {
26 | width: 100% !important;
27 | margin-right: 0% !important;
28 | border-radius: 0px !important;
29 | }
30 |
31 | .operationArea {
32 | position: relative;
33 | width: 200px;
34 | height: 100%;
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/pages/MainPage/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
3 | * SPDX-license-identifier: BSD-3-Clause
4 | */
5 |
6 | import Header from '@/components/Header';
7 | import ResizeWrapper from '@/components/ResizeWrapper';
8 | import Menu from './Menu';
9 | import utils from '@/utils/utils';
10 | import MainArea from './MainArea';
11 | import styles from './index.module.less';
12 |
13 | export default function () {
14 | return (
15 |
54 |
56 | ) : null}
57 |
58 |
79 | {isJoined ? (
80 | Demo Version {packageJson.version}
59 | SDK Version {VERTC.getSdkVersion()}
60 | {isJoined ? (
61 |
62 | 房间ID{' '}
63 |
64 |
71 | {room.roomId || '-'}
72 |
73 |
74 |
75 | ) : (
76 | ''
77 | )}
78 |
81 |
88 | ) : (
89 | ''
90 | )}
91 | {isJoined ? 点击下述问题进行提问:
82 | {Questions[scene].map((question) => (
83 | handleQuestion(question)} className={styles.line} key={question}>
84 | {question}
85 |
86 | ))}
87 |
23 |
32 |
24 |
26 | {utils.isMobile() ? null : (
27 |
28 |
29 |
30 | )}
31 |