|
|
@@ -203,6 +203,8 @@ export const ChatBotPage = () => {
|
|
|
firstLine: string;
|
|
|
} | null>(null);
|
|
|
const [currentTopicIndex, setCurrentTopicIndex] = useState(0);
|
|
|
+ // 情景对话：是否已经在当前场景当前话题下真正开始对话（首条语音已发送）
|
|
|
+ const [scenarioConversationStarted, setScenarioConversationStarted] = useState(false);
|
|
|
const hasSentScenarioContextRef = useRef(false);
|
|
|
const greetingContextRef = useRef(greetingContext);
|
|
|
useEffect(() => {
|
|
|
@@ -2266,9 +2268,11 @@ export const ChatBotPage = () => {
|
|
|
const idx = ctx.topics.findIndex((t) => t.key === ctx.topic);
|
|
|
setCurrentTopicIndex(idx >= 0 ? idx : 0);
|
|
|
hasSentScenarioContextRef.current = false;
|
|
|
+ setScenarioConversationStarted(false);
|
|
|
if (ctx.firstLine) setRecognizedText(ctx.firstLine);
|
|
|
} else {
|
|
|
setGreetingContext(null);
|
|
|
+ setScenarioConversationStarted(false);
|
|
|
}
|
|
|
break;
|
|
|
}
|
|
|
@@ -2677,6 +2681,7 @@ export const ChatBotPage = () => {
|
|
|
!hasSentScenarioContextRef.current
|
|
|
? (() => {
|
|
|
hasSentScenarioContextRef.current = true;
|
|
|
+ setScenarioConversationStarted(true);
|
|
|
return { scene: ctx.scene, topic: ctx.topic };
|
|
|
})()
|
|
|
: undefined;
|
|
|
@@ -2787,6 +2792,7 @@ export const ChatBotPage = () => {
|
|
|
ctx && ctx.scene !== 'default' && !hasSentScenarioContextRef.current
|
|
|
? (() => {
|
|
|
hasSentScenarioContextRef.current = true;
|
|
|
+ setScenarioConversationStarted(true);
|
|
|
return { scene: ctx.scene, topic: ctx.topic };
|
|
|
})()
|
|
|
: undefined;
|
|
|
@@ -3289,7 +3295,8 @@ export const ChatBotPage = () => {
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
- {/* 情景对话：字幕区域上方话题名称 + 切换话题按钮（仅特殊场景展示），与字幕左对齐 */}
|
|
|
+ {/* 情景对话：字幕区域上方话题名称 + 切换话题按钮（仅特殊场景展示），与字幕左对齐；
|
|
|
+ 用户在该场景该话题下开始对话后仅隐藏“切换话题按钮”，话题标签仍保留 */}
|
|
|
{greetingContext && greetingContext.scene !== 'default' && greetingContext.topics.length > 0 && (() => {
|
|
|
const currentTopic = greetingContext.topics[currentTopicIndex];
|
|
|
const topicLabel = currentTopic
|
|
|
@@ -3299,7 +3306,8 @@ export const ChatBotPage = () => {
|
|
|
<div
|
|
|
className="absolute flex items-center"
|
|
|
style={{
|
|
|
- top: px2vmin(530 - 32 - 8, 'v2'),
|
|
|
+ // 保持与字幕容器间距 5px，字幕 top=540、高度 72
|
|
|
+ top: px2vmin(540 - 32 - 5, 'v2'),
|
|
|
left: '50%',
|
|
|
transform: 'translateX(-50%)',
|
|
|
width: px2vmin(312, 'v2'),
|
|
|
@@ -3322,6 +3330,7 @@ export const ChatBotPage = () => {
|
|
|
>
|
|
|
{topicLabel}
|
|
|
</div>
|
|
|
+ {!scenarioConversationStarted && (
|
|
|
<button
|
|
|
type="button"
|
|
|
aria-label="Switch topic"
|
|
|
@@ -3333,6 +3342,10 @@ export const ChatBotPage = () => {
|
|
|
minHeight: px2vmin(32, 'v2'),
|
|
|
}}
|
|
|
onClick={wrapTrackedClick('chatbot', 'topic_toggle', () => {
|
|
|
+ // AI 语音播放中或发送中时禁止切换话题，避免话题与字幕不一致
|
|
|
+ if (currentState === 'playing' || currentState === 'sending') {
|
|
|
+ return;
|
|
|
+ }
|
|
|
const next = (currentTopicIndex + 1) % greetingContext.topics.length;
|
|
|
setCurrentTopicIndex(next);
|
|
|
const nextTopic = greetingContext.topics[next];
|
|
|
@@ -3353,18 +3366,19 @@ export const ChatBotPage = () => {
|
|
|
draggable={false}
|
|
|
/>
|
|
|
</button>
|
|
|
+ )}
|
|
|
</div>
|
|
|
);
|
|
|
})()}
|
|
|
- {/* 字幕区域 - 设计稿 393×852：top 500，高 92，宽 312，左右居中 */}
|
|
|
+ {/* 字幕区域 - 设计稿 393×852：top 510（按钮上方 10px），高 72，宽 312，左右居中 */}
|
|
|
{subtitleOn && subtitleVisible && recognizedText && (
|
|
|
<div
|
|
|
ref={subtitleContainerRef}
|
|
|
className="chatbot-subtitle-container"
|
|
|
style={{
|
|
|
position: 'absolute',
|
|
|
- // 设计稿 393×852：top 500px → 使用 px2vmin 按 min(vw, vh) 适配
|
|
|
- top: px2vmin(530, 'v2'),
|
|
|
+ // 设计稿 393×852：在原基础上整体向下移动 30px → 顶部 540
|
|
|
+ top: px2vmin(540, 'v2'),
|
|
|
left: '50%',
|
|
|
transform: 'translateX(-50%)',
|
|
|
// 设计稿宽度 312px、高度 92px
|
