feat(chats): implement dynamic styling based on xclaw_used parameter
This commit is contained in:
parent
45b95c4538
commit
db0ea1ab18
|
|
@ -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" ||
|
||||
|
|
|
|||
Loading…
Reference in New Issue