skills
/
deerflow2
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 b412b5193b
commit 0f607441c8
1 changed files with 27 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/app/workspace/chats/[thread_id]/page.tsx
View File

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