57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
/**
|
||
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
|
||
* SPDX-license-identifier: BSD-3-Clause
|
||
*/
|
||
|
||
import { useState } from 'react';
|
||
import { useDispatch, useSelector } from 'react-redux';
|
||
import { RootState } from '@/store';
|
||
import CheckScene from './CheckScene';
|
||
import { updateScene } from '@/store/slices/room';
|
||
import style from './index.module.less';
|
||
import { Scenes, SceneMap } from '@/config';
|
||
import { useVisionMode } from '@/lib/useCommon';
|
||
|
||
function AIChangeCard() {
|
||
const room = useSelector((state: RootState) => state.room);
|
||
const dispatch = useDispatch();
|
||
const [scene, setScene] = useState(room.scene);
|
||
const { isVisionMode } = useVisionMode();
|
||
const avatar = SceneMap[scene]?.icon;
|
||
|
||
const handleChecked = (checkedScene: string) => {
|
||
setScene(checkedScene);
|
||
dispatch(updateScene({ scene: checkedScene }));
|
||
};
|
||
|
||
return (
|
||
<div className={style.card}>
|
||
<div className={style.avatar}>
|
||
<img id="avatar-card" src={avatar} alt="Avatar" />
|
||
</div>
|
||
<div className={style.title}>
|
||
<div>Hi，欢迎体验实时对话式 AI</div>
|
||
<div className={style.desc}>
|
||
{isVisionMode ? <>支持豆包 Vision 模型和 深度思考模型，</> : ''}
|
||
超多对话场景等你开启
|
||
</div>
|
||
</div>
|
||
<div className={style.sceneContainer}>
|
||
{Scenes.map((key) =>
|
||
key ? (
|
||
<CheckScene
|
||
key={key.name}
|
||
icon={key.icon}
|
||
title={key.name}
|
||
checked={key.name === scene}
|
||
onClick={() => handleChecked(key.name)}
|
||
/>
|
||
) : null
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default AIChangeCard;
|