diff --git a/app/components/assistant-ui/assistant-modal.tsx b/app/components/assistant-ui/assistant-modal.tsx index 43e7b5e..8b9046a 100644 --- a/app/components/assistant-ui/assistant-modal.tsx +++ b/app/components/assistant-ui/assistant-modal.tsx @@ -2,11 +2,17 @@ import { BotIcon, ChevronDownIcon } from "lucide-react"; -import { type FC, forwardRef } from "react"; +import { type FC, forwardRef, useState, useEffect } from "react"; import { AssistantModalPrimitive } from "@assistant-ui/react"; +import { usePathname } from "next/navigation"; import { Thread } from "@/app/components/assistant-ui/thread"; import { TooltipIconButton } from "@/app/components/assistant-ui/tooltip-icon-button"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/app/components/ui/tooltip"; interface AssistantModalProps { errorMessage?: string; @@ -19,9 +25,59 @@ export const AssistantModal: FC = ({ showSettingsAction = false, onClearError, }) => { + const [showBubble, setShowBubble] = useState(false); + + useEffect(() => { + // 检查本次访问是否已关闭过气泡 + const bubbleClosed = sessionStorage.getItem("ai-bubble-closed"); + + if (!bubbleClosed) { + // 页面加载后2秒显示气泡提示 + const showTimer = setTimeout(() => { + setShowBubble(true); + }, 2000); + + // 15秒后自动关闭气泡 + const hideTimer = setTimeout(() => { + setShowBubble(false); + sessionStorage.setItem("ai-bubble-closed", "true"); + }, 17000); // 2秒显示 + 15秒停留 = 17秒 + + return () => { + clearTimeout(showTimer); + clearTimeout(hideTimer); + }; + } + }, []); + + const handleCloseBubble = () => { + setShowBubble(false); + // 记录本次访问已关闭气泡 + sessionStorage.setItem("ai-bubble-closed", "true"); + }; + return ( + {/* 自定义气泡组件 */} + {showBubble && ( +
+
+
+ 有问题可以问我哦~ +
+ {/* 气泡尾巴箭头 - 指向下方按钮 */} +
+
+
+
+
+
+ )} + @@ -54,7 +110,7 @@ const AssistantModalButton = forwardRef< tooltip={tooltip} side="left" {...rest} - className="aui-modal-button size-full rounded-full shadow transition-transform hover:scale-110 active:scale-90" + className="aui-modal-button size-full rounded-full shadow transition-transform hover:scale-110 active:scale-90 cursor-pointer" ref={ref} >