diff --git a/app/components/assistant-ui/assistant-modal.tsx b/app/components/assistant-ui/assistant-modal.tsx index 43e7b5e..621f5a5 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,11 +25,61 @@ 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 && ( +
+
+
+ 有问题可以问我哦~ +
+ {/* 气泡尾巴箭头 - 指向下方按钮 */} +
+
+
+
+
+
+ )} + - +
= ({ ); }; -type AssistantModalButtonProps = { "data-state"?: "open" | "closed" }; +type AssistantModalButtonProps = { + "data-state"?: "open" | "closed"; + onCloseBubble?: () => void; + onClick?: (e: React.MouseEvent) => void; +}; const AssistantModalButton = forwardRef< HTMLButtonElement, AssistantModalButtonProps ->(({ "data-state": state, ...rest }, ref) => { +>(({ "data-state": state, onCloseBubble, ...rest }, ref) => { const tooltip = state === "open" ? "Close Assistant" : "Open Assistant"; + const handleClick = (e: React.MouseEvent) => { + // 当点击open按钮时,关闭气泡对话 + if (onCloseBubble) { + onCloseBubble(); + } + // 继续执行原有的点击事件 + if (rest.onClick) { + rest.onClick(e); + } + }; + return (