add mobile ad
This commit is contained in:
hobby
@@ -17,6 +17,19 @@ interface AdBannerProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const AdSection: React.FC<AdSectionProps> = ({ isOpen}) => {
|
const AdSection: React.FC<AdSectionProps> = ({ isOpen}) => {
|
||||||
|
const [isMobile, setIsMobile] = useState(false);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const checkDevice = () => {
|
||||||
|
setIsMobile(window.innerWidth <= 768);
|
||||||
|
};
|
||||||
|
|
||||||
|
checkDevice();
|
||||||
|
window.addEventListener('resize', checkDevice);
|
||||||
|
|
||||||
|
return () => window.removeEventListener('resize', checkDevice);
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-3 border-t border-border/40">
|
<div className="p-3 border-t border-border/40">
|
||||||
<div className={cn(
|
<div className={cn(
|
||||||
@@ -39,31 +52,63 @@ const AdSection: React.FC<AdSectionProps> = ({ isOpen}) => {
|
|||||||
<div className="text-sm font-medium text-center text-gray-400">万能的助手, 懂你的伙伴</div>
|
<div className="text-sm font-medium text-center text-gray-400">万能的助手, 懂你的伙伴</div>
|
||||||
<div className="text-[10px] font-medium text-center text-gray-400 flex items-center justify-center gap-1">由 <img src="https://files.monica.cn/assets/botgroup/deepseek.png" className="inline-block w-16"/> 驱动</div>
|
<div className="text-[10px] font-medium text-center text-gray-400 flex items-center justify-center gap-1">由 <img src="https://files.monica.cn/assets/botgroup/deepseek.png" className="inline-block w-16"/> 驱动</div>
|
||||||
<div className="flex flex-col items-center justify-center gap-2 mt-3">
|
<div className="flex flex-col items-center justify-center gap-2 mt-3">
|
||||||
<Popover>
|
|
||||||
<PopoverTrigger asChild>
|
{isMobile ? (
|
||||||
<button className="p-2 bg-white rounded-full text-xs font-medium text-blue-500 font-bold hover:bg-gray-50 transition-colors shadow-sm flex items-center gap-1 group">
|
<button onClick={() => {
|
||||||
<img src="https://files.monica.cn/assets/botgroup/wechat.png" className="w-4 h-4" alt="WeChat" />
|
window.open('https://mp.weixin.qq.com/s/9l9zz_8wXOmxkKIVd0j9Nw', '_blank');
|
||||||
在微信中使用
|
}} className="p-1 bg-white rounded-full text-xs font-medium text-blue-500 font-bold hover:bg-gray-50 transition-colors shadow-sm flex items-center gap-1 group">
|
||||||
<img src="https://files.monica.cn/assets/botgroup/arrow-up.png" className="w-4 h-4" alt="WeChat" />
|
<img src="https://files.monica.cn/assets/botgroup/wechat.png" className="w-4 h-4" alt="WeChat" />
|
||||||
</button>
|
在微信中使用
|
||||||
</PopoverTrigger>
|
|
||||||
<PopoverContent className="w-40 p-0" side="top" align="center" sideOffset={5} onPointerDownOutside={(e) => e.preventDefault()}>
|
|
||||||
<div className="flex flex-col items-center">
|
|
||||||
<img
|
|
||||||
src="https://assets.monica.cn/home-web/_next/static/media/wechatQrcode.29848e06.png"
|
|
||||||
alt="公众号二维码"
|
|
||||||
className="w-40 h-40"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</PopoverContent>
|
|
||||||
</Popover>
|
|
||||||
<button onClick={() => {
|
|
||||||
window.open('https://monica.cn/home/chat/Monica/monica', '_blank');
|
|
||||||
}} className="p-2 bg-white rounded-full text-xs font-medium text-blue-500 font-bold hover:bg-gray-50 transition-colors shadow-sm flex items-center gap-1">
|
|
||||||
<img src="https://files.monica.cn/assets/botgroup/computer.png" className="w-4 h-4" alt="WeChat" />
|
|
||||||
在网页中对话
|
|
||||||
<img src="https://files.monica.cn/assets/botgroup/arrow-up.png" className="w-4 h-4" alt="WeChat" />
|
<img src="https://files.monica.cn/assets/botgroup/arrow-up.png" className="w-4 h-4" alt="WeChat" />
|
||||||
</button>
|
</button> ) :
|
||||||
|
(
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<button className="p-2 bg-white rounded-full text-xs font-medium text-blue-500 font-bold hover:bg-gray-50 transition-colors shadow-sm flex items-center gap-1 group">
|
||||||
|
<img src="https://files.monica.cn/assets/botgroup/wechat.png" className="w-4 h-4" alt="WeChat" />
|
||||||
|
在微信中使用
|
||||||
|
<img src="https://files.monica.cn/assets/botgroup/arrow-up.png" className="w-4 h-4" alt="WeChat" />
|
||||||
|
</button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-40 p-0" side="top" align="center" sideOffset={5} onPointerDownOutside={(e) => e.preventDefault()}>
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<img
|
||||||
|
src="https://assets.monica.cn/home-web/_next/static/media/wechatQrcode.29848e06.png"
|
||||||
|
alt="公众号二维码"
|
||||||
|
className="w-40 h-40"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{isMobile ? (
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
window.open('https://app.adjust.com/1mh0qgab?fallback=https%3A%2F%2Fmonica.cn%2Fapp-download&redirect_macos=https%3A%2F%2Fmonica.cn%2Fapp-download', '_blank');
|
||||||
|
}}
|
||||||
|
className="p-2 bg-white rounded-full text-xs font-medium text-blue-500 font-bold hover:bg-gray-50 transition-colors shadow-sm flex items-center gap-1"
|
||||||
|
>
|
||||||
|
<img src="https://files.monica.cn/assets/botgroup/mobile-banner-mobile.png" className="w-4 h-4" alt="Mobile" />
|
||||||
|
下载APP
|
||||||
|
<img src="https://files.monica.cn/assets/botgroup/arrow-up.png" className="w-4 h-4" alt="Arrow" />
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
window.open('https://monica.cn/home/chat/Monica/monica', '_blank');
|
||||||
|
}}
|
||||||
|
className="p-2 bg-white rounded-full text-xs font-medium text-blue-500 font-bold hover:bg-gray-50 transition-colors shadow-sm flex items-center gap-1"
|
||||||
|
>
|
||||||
|
<img src="https://files.monica.cn/assets/botgroup/computer.png" className="w-4 h-4" alt="Computer" />
|
||||||
|
在网页中对话
|
||||||
|
<img src="https://files.monica.cn/assets/botgroup/arrow-up.png" className="w-4 h-4" alt="Arrow" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -88,33 +133,38 @@ const AdBanner: React.FC<AdBannerProps> = ({ show, closeAd }) => {
|
|||||||
<div className="flex items-center justify-center w-20 pl-2">
|
<div className="flex items-center justify-center w-20 pl-2">
|
||||||
<img src="https://files.monica.cn/assets/botgroup/monica.png"/>
|
<img src="https://files.monica.cn/assets/botgroup/monica.png"/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-center gap-3 px-2">
|
<div className="flex items-center justify-between gap-3 px-2 flex-1">
|
||||||
<Popover>
|
<div className="flex items-center gap-3">
|
||||||
<PopoverTrigger asChild>
|
<Popover>
|
||||||
<button className="p-1 bg-white rounded-full text-xs font-medium text-blue-500 font-bold hover:bg-gray-50 transition-colors shadow-sm flex items-center gap-1 group">
|
<PopoverTrigger asChild>
|
||||||
<img src="https://files.monica.cn/assets/botgroup/wechat.png" className="w-4 h-4" alt="WeChat" />
|
<button className="p-1 bg-white rounded-full text-xs font-medium text-blue-500 font-bold hover:bg-gray-50 transition-colors shadow-sm flex items-center gap-1 group">
|
||||||
在微信中使用
|
<img src="https://files.monica.cn/assets/botgroup/wechat.png" className="w-4 h-4" alt="WeChat" />
|
||||||
<img src="https://files.monica.cn/assets/botgroup/arrow-up.png" className="w-4 h-4" alt="WeChat" />
|
在微信中使用
|
||||||
</button>
|
<img src="https://files.monica.cn/assets/botgroup/arrow-up.png" className="w-4 h-4" alt="WeChat" />
|
||||||
</PopoverTrigger>
|
</button>
|
||||||
<PopoverContent className="w-40 p-0" side="top" align="center" sideOffset={5} onPointerDownOutside={(e) => e.preventDefault()}>
|
</PopoverTrigger>
|
||||||
<div className="flex flex-col items-center">
|
<PopoverContent className="w-40 p-0" side="top" align="center" sideOffset={5} onPointerDownOutside={(e) => e.preventDefault()}>
|
||||||
<img
|
<div className="flex flex-col items-center">
|
||||||
src="https://assets.monica.cn/home-web/_next/static/media/wechatQrcode.29848e06.png"
|
<img
|
||||||
alt="公众号二维码"
|
src="https://assets.monica.cn/home-web/_next/static/media/wechatQrcode.29848e06.png"
|
||||||
className="w-40 h-40"
|
alt="公众号二维码"
|
||||||
/>
|
className="w-40 h-40"
|
||||||
|
/>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</PopoverContent>
|
</PopoverContent>
|
||||||
</Popover>
|
</Popover>
|
||||||
<button onClick={() => {
|
<button
|
||||||
window.open('https://monica.cn/home/chat/Monica/monica', '_blank');
|
onClick={() => {
|
||||||
}} className="p-1 bg-white rounded-full text-xs font-medium text-blue-500 font-bold hover:bg-gray-50 transition-colors shadow-sm flex items-center gap-1">
|
window.open('https://app.adjust.com/1mh0qgab?fallback=https%3A%2F%2Fmonica.cn%2Fapp-download&redirect_macos=https%3A%2F%2Fmonica.cn%2Fapp-download', '_blank');
|
||||||
<img src="https://files.monica.cn/assets/botgroup/computer.png" className="w-4 h-4" alt="WeChat" />
|
}}
|
||||||
在网页中使用
|
className="p-1 bg-white rounded-full text-xs font-medium text-blue-500 font-bold hover:bg-gray-50 transition-colors shadow-sm flex items-center gap-1"
|
||||||
<img src="https://files.monica.cn/assets/botgroup/arrow-up.png" className="w-4 h-4" alt="WeChat" />
|
>
|
||||||
</button>
|
<img src="https://files.monica.cn/assets/botgroup/mobile-banner-mobile.png" className="w-4 h-4" alt="Mobile" />
|
||||||
|
下载APP
|
||||||
|
<img src="https://files.monica.cn/assets/botgroup/arrow-up.png" className="w-4 h-4" alt="Arrow" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<button onClick={closeAd} className="flex items-center">
|
<button onClick={closeAd} className="flex items-center">
|
||||||
<img src="https://files.monica.cn/assets/botgroup/banner-delete.png" className="w-4 h-4" alt="Delete" />
|
<img src="https://files.monica.cn/assets/botgroup/banner-delete.png" className="w-4 h-4" alt="Delete" />
|
||||||
</button>
|
</button>
|
||||||
@@ -125,4 +175,63 @@ const AdBanner: React.FC<AdBannerProps> = ({ show, closeAd }) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export { AdSection, AdBanner };
|
const AdBannerMobile: React.FC<AdBannerProps> = ({ show, closeAd }) => {
|
||||||
|
const [isMobile, setIsMobile] = useState(false);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const checkDevice = () => {
|
||||||
|
setIsMobile(window.innerWidth <= 768);
|
||||||
|
};
|
||||||
|
|
||||||
|
checkDevice();
|
||||||
|
window.addEventListener('resize', checkDevice);
|
||||||
|
|
||||||
|
return () => window.removeEventListener('resize', checkDevice);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (!show) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full relative overflow-hidden py-2 pl-2 h-8 flex flex-col justify-center transition-all duration-200 bg-cover bg-center bg-no-repeat"
|
||||||
|
style={{
|
||||||
|
backgroundImage: "url('https://files.monica.cn/assets/botgroup/mobile-banner-background.png')"
|
||||||
|
}}>
|
||||||
|
<div className="absolute top-0 left-0 bg-gray-300/40 text-gray-400 text-[8px] px-1 py-1.5">
|
||||||
|
广<br/>告
|
||||||
|
</div>
|
||||||
|
<div className="relative z-10">
|
||||||
|
<div className="flex items-center gap-1 justify-center">
|
||||||
|
<div className="flex items-center justify-center w-20 pl-2">
|
||||||
|
<img src="https://files.monica.cn/assets/botgroup/monica.png"/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between gap-3 px-2 flex-1">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<button onClick={() => {
|
||||||
|
window.open('https://mp.weixin.qq.com/s/9l9zz_8wXOmxkKIVd0j9Nw', '_blank');
|
||||||
|
}} className="p-1 bg-white rounded-full text-xs font-medium text-blue-500 font-bold hover:bg-gray-50 transition-colors shadow-sm flex items-center gap-1 group">
|
||||||
|
<img src="https://files.monica.cn/assets/botgroup/wechat.png" className="w-4 h-4" alt="WeChat" />
|
||||||
|
在微信中使用
|
||||||
|
<img src="https://files.monica.cn/assets/botgroup/arrow-up.png" className="w-4 h-4" alt="WeChat" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
window.open('https://app.adjust.com/1mh0qgab?fallback=https%3A%2F%2Fmonica.cn%2Fapp-download&redirect_macos=https%3A%2F%2Fmonica.cn%2Fapp-download', '_blank');
|
||||||
|
}}
|
||||||
|
className="p-1 bg-white rounded-full text-xs font-medium text-blue-500 font-bold hover:bg-gray-50 transition-colors shadow-sm flex items-center gap-1"
|
||||||
|
>
|
||||||
|
<img src="https://files.monica.cn/assets/botgroup/mobile-banner-mobile.png" className="w-4 h-4" alt="Mobile" />
|
||||||
|
下载APP
|
||||||
|
<img src="https://files.monica.cn/assets/botgroup/arrow-up.png" className="w-4 h-4" alt="Arrow" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button onClick={closeAd} className="flex items-center">
|
||||||
|
<img src="https://files.monica.cn/assets/botgroup/banner-delete.png" className="w-4 h-4" alt="Delete" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { AdSection, AdBanner, AdBannerMobile };
|
||||||
@@ -22,7 +22,7 @@ import rehypeKatex from 'rehype-katex'
|
|||||||
import { SharePoster } from '@/components/SharePoster';
|
import { SharePoster } from '@/components/SharePoster';
|
||||||
import { MembersManagement } from '@/components/MembersManagement';
|
import { MembersManagement } from '@/components/MembersManagement';
|
||||||
import Sidebar from './Sidebar';
|
import Sidebar from './Sidebar';
|
||||||
import { AdBanner } from './AdSection';
|
import { AdBanner, AdBannerMobile } from './AdSection';
|
||||||
// 使用本地头像数据，避免外部依赖
|
// 使用本地头像数据，避免外部依赖
|
||||||
const getAvatarData = (name: string) => {
|
const getAvatarData = (name: string) => {
|
||||||
const colors = ['#1abc9c', '#3498db', '#9b59b6', '#f1c40f', '#e67e22'];
|
const colors = ['#1abc9c', '#3498db', '#9b59b6', '#f1c40f', '#e67e22'];
|
||||||
@@ -194,6 +194,12 @@ const ChatUI = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (messages.length > 0) {
|
||||||
|
setShowAd(false);
|
||||||
|
}
|
||||||
|
}, [messages]);
|
||||||
|
|
||||||
const handleSendMessage = async () => {
|
const handleSendMessage = async () => {
|
||||||
//判断是否Loding
|
//判断是否Loding
|
||||||
if (isLoading) return;
|
if (isLoading) return;
|
||||||
@@ -493,7 +499,11 @@ const ChatUI = () => {
|
|||||||
|
|
||||||
{/* Main Chat Area */}
|
{/* Main Chat Area */}
|
||||||
<div className="flex-1 overflow-hidden bg-gray-100">
|
<div className="flex-1 overflow-hidden bg-gray-100">
|
||||||
<ScrollArea className="h-full px-2 py-1" ref={chatAreaRef}>
|
|
||||||
|
<ScrollArea className={`h-full ${!showAd ? 'px-2 py-1' : ''} md:px-2 md:py-1`} ref={chatAreaRef}>
|
||||||
|
<div className="md:hidden">
|
||||||
|
<AdBannerMobile show={showAd} closeAd={() => setShowAd(false)} />
|
||||||
|
</div>
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
{messages.map((message) => (
|
{messages.map((message) => (
|
||||||
<div key={message.id}
|
<div key={message.id}
|
||||||
|
|||||||
Reference in New Issue
Block a user