Jesse_ChenandClaude Opus 5
071317f7ee
产品真机走查： 1. agent 头像加回来（推翻 R3 的 D7）。R3 删它的理由是「一屏几十条时是重复度 最高的元素」，但没有它助手那一轮就没有视觉归属——生时校正面尤其明显， 旁白、题干、选项全是平铺文字。--assistant-content-inset 随之回到 「32px 头像 + 间隙」，追问 chip 与运行时间轴重新对齐正文。 2. 时间范围带用的是 --color-action-soft，那是给文字底色用的浅色调， 画在画布上几乎看不见——而它是整条轴上唯一必须一眼看到的标记。 改成 color-mix(--color-action-strong 32%, --color-canvas)。 测试 3369，fail 仍 31 且与基线逐条一致；四个路由标记不变。 未修：生时校正面顶部溢出。工作区在栅格里、没有脱离定位， chat-panel.is-rectification 仍是 46px + 1fr 两行，从代码上看不出 46px 顶栏为什么会消失，待产品确认截图是否裁切。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0193vBv6w5MV2cifdTUu9H5P
29 lines
1.5 KiB
TypeScript
29 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { ChatMessageContent } from "@/components/chat-message-content";
|
|
import { AgentAvatar } from "@/components/chat-message-row";
|
|
import { protectOnboardingPhrases } from "@/lib/onboarding-copy";
|
|
import type { Message } from "@/lib/home-types";
|
|
|
|
export function OnboardingChatMessage({ role, text, streaming = false, length = text.length, phraseSafe = false }: { role: Message["role"]; text: string; streaming?: boolean; length?: number; phraseSafe?: boolean }) {
|
|
const visibleText = streaming ? text.slice(0, length) : text;
|
|
const protectedVisibleText = protectOnboardingPhrases(visibleText);
|
|
return (
|
|
<article className={`message message-${role} onboarding-message${phraseSafe ? " is-phrase-safe" : ""}`} aria-label={role === "assistant" ? "Jyotisha" : "你"}>
|
|
{role === "assistant" && <AgentAvatar />}
|
|
<div className="message-content">
|
|
<div className="message-bubble">
|
|
{role === "assistant" ? (
|
|
streaming ? (
|
|
<>
|
|
<div className={`onboarding-stream ${length >= text.length ? "is-complete" : ""}`} aria-hidden="true"><ChatMessageContent text={protectedVisibleText} /></div>
|
|
<span className="sr-only" role="status" aria-live="polite" aria-atomic="true">{length >= text.length ? text : ""}</span>
|
|
</>
|
|
) : <ChatMessageContent text={protectedVisibleText} />
|
|
) : <p>{protectedVisibleText}</p>}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|