fix: xclaw_used切换欢迎样式和对话样式

This commit is contained in:
肖应宇 2026-04-02 09:52:53 +08:00
parent df9279469e
commit efd6d267bf
4 changed files with 28 additions and 26 deletions

View File

@ -37,7 +37,7 @@ export default function AgentChatPage() {
const { agent } = useAgent(agent_name); const { agent } = useAgent(agent_name);
const { threadId, isNewThread, setIsNewThread } = useThreadChat(); const { threadId, isNewThread, setIsNewThread, showWelcomeStyle } = useThreadChat();
const { showNotification } = useNotification(); const { showNotification } = useNotification();
const [thread, sendMessage] = useThreadStream({ const [thread, sendMessage] = useThreadStream({
@ -155,7 +155,7 @@ export default function AgentChatPage() {
<InputBox <InputBox
className={cn("bg-background/5 w-full -translate-y-4")} className={cn("bg-background/5 w-full -translate-y-4")}
isNewThread={isNewThread} showWelcomeStyle={showWelcomeStyle}
autoFocus={isNewThread} autoFocus={isNewThread}
status={ status={
thread.error thread.error

View File

@ -56,14 +56,14 @@ export default function ChatPage() {
setFullscreen: setArtifactsFullscreen, setFullscreen: setArtifactsFullscreen,
fullscreen, fullscreen,
} = useArtifacts(); } = useArtifacts();
const { threadId, isNewThread, setIsNewThread, isMock } = useThreadChat(); const { threadId, isNewThread, setIsNewThread, isMock, showWelcomeStyle } = useThreadChat();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
// History render rules: // History render rules:
// - /workspace/chats/{thread_id}: always render history // - /workspace/chats/{thread_id}: always render history
// - /workspace/chats/new: render history only when xclaw_used=true // - /workspace/chats/new: render history only when xclaw_used=true
const shouldRenderHistory = const shouldRenderHistory =
!isNewThread || !showWelcomeStyle ||
searchParams.get("xclaw_used")?.trim().toLowerCase() === "true"; searchParams.get("xclaw_used")?.trim().toLowerCase() === "true";
// Original strategy: // Original strategy:
@ -81,9 +81,9 @@ export default function ChatPage() {
if (reuseExistingThread) { if (reuseExistingThread) {
return false; return false;
} }
if (searchParams.get("xclaw_used")?.trim().toLowerCase() !== "true") { // if (searchParams.get("xclaw_used")?.trim().toLowerCase() !== "true") {
return true; // return true;
} // }
return searchParams.get("isnew")?.trim().toLowerCase() === "true"; return searchParams.get("isnew")?.trim().toLowerCase() === "true";
}, [isNewThread, searchParams]); }, [isNewThread, searchParams]);
console.log(createNewSession, "createNewSession"); console.log(createNewSession, "createNewSession");
@ -140,7 +140,7 @@ export default function ChatPage() {
}, [thread.values?.title]); }, [thread.values?.title]);
const [hasSubmitted, setHasSubmitted] = useState(false); const [hasSubmitted, setHasSubmitted] = useState(false);
const showInputBox = !(isNewThread && thread.isThreadLoading); const showInputBox = !(showWelcomeStyle && thread.isThreadLoading);
const [historyCutoff, setHistoryCutoff] = useState<number | null>(null); const [historyCutoff, setHistoryCutoff] = useState<number | null>(null);
useEffect(() => { useEffect(() => {
@ -259,7 +259,7 @@ export default function ChatPage() {
<header <header
className={cn( className={cn(
"bg-background absolute top-0 right-0 left-0 z-30 mx-4 grid h-[58px] shrink-0 grid-cols-3 items-center border-b transition-all duration-300 ease-in-out", "bg-background absolute top-0 right-0 left-0 z-30 mx-4 grid h-[58px] shrink-0 grid-cols-3 items-center border-b transition-all duration-300 ease-in-out",
isNewThread && !hasSubmitted ? "hidden" : "", showWelcomeStyle && !hasSubmitted ? "hidden" : "",
)} )}
> >
<div className="flex items-center justify-start overflow-hidden text-sm font-medium"> <div className="flex items-center justify-start overflow-hidden text-sm font-medium">
@ -329,14 +329,14 @@ export default function ChatPage() {
<main <main
className={cn( className={cn(
"flex min-h-0 max-w-full grow flex-col", "flex min-h-0 max-w-full grow flex-col",
isNewThread && !hasSubmitted ? "bg-white" : "bg-background", showWelcomeStyle && !hasSubmitted ? "bg-white" : "bg-background",
)} )}
> >
<div className="flex size-full justify-center"> <div className="flex size-full justify-center">
<MessageList <MessageList
className={cn( className={cn(
"size-full", "size-full",
(!isNewThread || hasSubmitted) && "pt-[58px]", (!showWelcomeStyle || hasSubmitted) && "pt-[58px]",
)} )}
threadId={threadId} threadId={threadId}
thread={thread} thread={thread}
@ -426,16 +426,16 @@ export default function ChatPage() {
<div <div
className={cn( className={cn(
"pointer-events-auto relative w-full max-w-[720px]", "pointer-events-auto relative w-full max-w-[720px]",
isNewThread && !hasSubmitted && "-translate-y-[calc(50vh-96px)]", showWelcomeStyle && !hasSubmitted && "-translate-y-[calc(50vh-96px)]",
)} )}
> >
{showInputBox ? ( {showInputBox ? (
<InputBox <InputBox
className={cn("w-full rounded-[20px] bg-[#FBFAFC]")} className={cn("w-full rounded-[20px] bg-[#FBFAFC]")}
threadId={threadId} threadId={threadId}
isNewThread={isNewThread} showWelcomeStyle={showWelcomeStyle}
hasSubmitted={hasSubmitted} hasSubmitted={hasSubmitted}
autoFocus={isNewThread} autoFocus={showWelcomeStyle}
status={ status={
thread.error thread.error
? "error" ? "error"
@ -446,7 +446,7 @@ export default function ChatPage() {
context={settings.context} context={settings.context}
extraHeader={ extraHeader={
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
{isNewThread && !hasSubmitted && ( {showWelcomeStyle && !hasSubmitted && (
<Welcome mode={settings.context.mode} /> <Welcome mode={settings.context.mode} />
)} )}
</div> </div>
@ -485,7 +485,7 @@ export default function ChatPage() {
<DevDialogTitle></DevDialogTitle> <DevDialogTitle></DevDialogTitle>
</DevDialogHeader> </DevDialogHeader>
<p className="text-muted-foreground text-sm"> <p className="text-muted-foreground text-sm">
退 退
</p> </p>
<DevDialogFooter> <DevDialogFooter>
<Button <Button

View File

@ -62,6 +62,8 @@ export function useThreadChat() {
}; };
const isNewRequested = const isNewRequested =
searchParams.get("isnew")?.trim().toLowerCase() === "true"; searchParams.get("isnew")?.trim().toLowerCase() === "true";
// 是否显示欢迎界面:当 xclaw_used=false 或 isnew=true 时显示。
const showWelcomeStyle= searchParams.get("xclaw_used") === "false" || isNewRequested;
const effectiveThreadIdFromPath = const effectiveThreadIdFromPath =
normalizeThreadId(threadIdFromPath) ?? readStoredThreadId(); normalizeThreadId(threadIdFromPath) ?? readStoredThreadId();
// console.log("[useThreadChat] effectiveThreadIdFromPath", effectiveThreadIdFromPath); // console.log("[useThreadChat] effectiveThreadIdFromPath", effectiveThreadIdFromPath);
@ -85,5 +87,5 @@ export function useThreadChat() {
setThreadId(normalizeThreadId(threadIdFromPath)); setThreadId(normalizeThreadId(threadIdFromPath));
}, [pathname, router, searchParams, threadIdFromPath]); }, [pathname, router, searchParams, threadIdFromPath]);
const isMock = searchParams.get("mock") === "true"; const isMock = searchParams.get("mock") === "true";
return { threadId, isNewThread, setIsNewThread, isMock }; return { threadId, isNewThread, setIsNewThread, isMock, showWelcomeStyle };
} }

View File

@ -91,7 +91,7 @@ export function InputBox({
status = "ready", status = "ready",
context, context,
extraHeader, extraHeader,
isNewThread, showWelcomeStyle,
hasSubmitted, hasSubmitted,
initialValue, initialValue,
onContextChange, onContextChange,
@ -110,7 +110,7 @@ export function InputBox({
mode: "flash" | "thinking" | "pro" | "ultra" | undefined; mode: "flash" | "thinking" | "pro" | "ultra" | undefined;
}; };
extraHeader?: React.ReactNode; extraHeader?: React.ReactNode;
isNewThread?: boolean; showWelcomeStyle?: boolean;
hasSubmitted?: boolean; hasSubmitted?: boolean;
initialValue?: string; initialValue?: string;
onContextChange?: ( onContextChange?: (
@ -145,7 +145,7 @@ export function InputBox({
// isNewThread 时禁用收缩,始终保持展开(除非已提交消息) // isNewThread 时禁用收缩,始终保持展开(除非已提交消息)
const effectiveIsFocused = const effectiveIsFocused =
((isNewThread ?? false) && !hasSubmitted) || isFocused; ((showWelcomeStyle ?? false) && !hasSubmitted) || isFocused;
// 点击外部区域时收起输入框 // 点击外部区域时收起输入框
useEffect(() => { useEffect(() => {
@ -211,7 +211,7 @@ export function InputBox({
return; return;
} }
setIsFocused(false); setIsFocused(false);
if (isNewThread) { if (showWelcomeStyle) {
sendToParent({ sendToParent({
type: POST_MESSAGE_TYPES.XCLAW_USED, type: POST_MESSAGE_TYPES.XCLAW_USED,
XClawUsed: true, XClawUsed: true,
@ -219,7 +219,7 @@ export function InputBox({
} }
onSubmit?.(message); onSubmit?.(message);
}, },
[isNewThread, onSubmit, onStop, status], [showWelcomeStyle, onSubmit, onStop, status],
); );
const requestFormSubmit = useCallback(() => { const requestFormSubmit = useCallback(() => {
@ -292,7 +292,7 @@ export function InputBox({
return () => controller.abort(); return () => controller.abort();
*/ */
}, [disabled, isNewThread, threadId]); }, [disabled, showWelcomeStyle, threadId]);
return ( return (
<div <div
@ -318,7 +318,7 @@ export function InputBox({
inputGroupClassName={cn( inputGroupClassName={cn(
"border-0 rounded-[20px] backdrop-blur-sm", "border-0 rounded-[20px] backdrop-blur-sm",
"transition-[height] duration-300 ease-out shadow-none ", "transition-[height] duration-300 ease-out shadow-none ",
!isNewThread && "h-[200px] shadow-[0_0_20px_0_rgba(0,0,0,0.10)]", !showWelcomeStyle && "h-[200px] shadow-[0_0_20px_0_rgba(0,0,0,0.10)]",
hasSubmitted && "shadow-[0_0_20px_0_rgba(0,0,0,0.10)]!", hasSubmitted && "shadow-[0_0_20px_0_rgba(0,0,0,0.10)]!",
effectiveIsFocused ? "h-[200px]" : "h-[80px]", effectiveIsFocused ? "h-[200px]" : "h-[80px]",
)} )}
@ -423,14 +423,14 @@ export function InputBox({
/> />
</PromptInput> </PromptInput>
{isNewThread && !hasSubmitted && searchParams.get("mode") !== "skill" && ( {showWelcomeStyle && !hasSubmitted && searchParams.get("mode") !== "skill" && (
<SuggestionListContainer <SuggestionListContainer
sendSelectSkill={iframeSkill.sendSelectSkill} sendSelectSkill={iframeSkill.sendSelectSkill}
/> />
)} )}
{!disabled && {!disabled &&
!isNewThread && !showWelcomeStyle &&
!followupsHidden && !followupsHidden &&
(followupsLoading || followups.length > 0) && ( (followupsLoading || followups.length > 0) && (
<div className="absolute -top-20 right-0 left-0 z-20 flex items-center justify-center"> <div className="absolute -top-20 right-0 left-0 z-20 flex items-center justify-center">