fix: xclaw_used切换欢迎样式和对话样式
This commit is contained in:
parent
df9279469e
commit
efd6d267bf
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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 };
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue