feat(chats): implement dynamic styling based on xclaw_used parameter

This commit is contained in:
Titan 2026-04-05 23:39:44 +08:00
parent 45b95c4538
commit db0ea1ab18
1 changed files with 27 additions and 14 deletions

View File

@ -38,13 +38,19 @@ const UUID_REGEX =
export default function ChatPage() {
const { t } = useI18n();
const [showFollowups, setShowFollowups] = useState(false);
const searchParams = useSearchParams(); const generatedThreadIdRef = useRef<string>("");
const searchParams = useSearchParams();
const generatedThreadIdRef = useRef<string>("");
if (!generatedThreadIdRef.current) {
const queryThreadId = searchParams.get("thread_id")?.trim();
generatedThreadIdRef.current =
queryThreadId && UUID_REGEX.test(queryThreadId) ? queryThreadId : uuid();
}
// 检查 xclaw_used 参数,仅用于界面风格控制,不影响线程创建逻辑
const xclawUsedParam = searchParams.get("xclaw_used");
const initialForceNewStyle = xclawUsedParam === "false";
const [forceNewStyle, setForceNewStyle] = useState(initialForceNewStyle);
const { threadId, isNewThread, setIsNewThread, isMock } = useThreadChat({
newThreadId: generatedThreadIdRef.current,
});
@ -155,8 +161,12 @@ export default function ChatPage() {
const handleSubmit = useCallback(
(message: PromptInputMessage) => {
void sendMessage(threadId, message);
// 仅切换界面风格,不影响线程状态
if (forceNewStyle) {
setForceNewStyle(false);
}
},
[sendMessage, threadId],
[sendMessage, threadId, forceNewStyle],
);
const handleStop = useCallback(async () => {
await thread.stop();
@ -174,7 +184,7 @@ export default function ChatPage() {
<header
className={cn(
"absolute top-0 right-0 left-0 z-30 flex h-12 shrink-0 items-center px-4",
isNewThread
(forceNewStyle || isNewThread)
? "bg-background/0 backdrop-blur-none"
: "bg-background/80 shadow-xs backdrop-blur",
)}
@ -190,19 +200,22 @@ export default function ChatPage() {
</header>
<main className="flex min-h-0 max-w-full grow flex-col">
<div className="flex size-full justify-center">
<MessageList
className={cn("size-full", !isNewThread && "pt-10")}
threadId={threadId}
thread={thread}
paddingBottom={messageListPaddingBottom}
/>
{/* forceNewStyle 时隐藏消息列表,提交后再显示 */}
{!(forceNewStyle) && (
<MessageList
className={cn("size-full", !isNewThread && "pt-10")}
threadId={threadId}
thread={thread}
paddingBottom={messageListPaddingBottom}
/>
)}
</div>
<div className="absolute right-0 bottom-0 left-0 z-30 flex justify-center px-4">
<div
className={cn(
"relative w-full",
isNewThread && "-translate-y-[calc(50vh-96px)]",
isNewThread
(forceNewStyle || isNewThread) && "-translate-y-[calc(50vh-96px)]",
(forceNewStyle || isNewThread)
? "max-w-(--container-width-sm)"
: "max-w-(--container-width-md)",
)}
@ -221,9 +234,9 @@ export default function ChatPage() {
{mounted ? (
<InputBox
className={cn("bg-background/5 w-full -translate-y-4")}
isNewThread={isNewThread}
isNewThread={forceNewStyle || isNewThread}
threadId={threadId}
autoFocus={isNewThread}
autoFocus={forceNewStyle || isNewThread}
status={
thread.error
? "error"
@ -233,7 +246,7 @@ export default function ChatPage() {
}
context={settings.context}
extraHeader={
isNewThread && <Welcome mode={settings.context.mode} />
(forceNewStyle || isNewThread) && <Welcome mode={settings.context.mode} />
}
disabled={
env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" ||