add mobile ad

2025-03-06 08:39:43 +08:00
parent 3a332ffc71
commit d9551e3d6c
2 changed files with 172 additions and 53 deletions
--- a/src/components/AdSection.tsx
+++ b/src/components/AdSection.tsx
@@ -17,6 +17,19 @@ interface AdBannerProps {
 }

 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 (
    <div className="p-3 border-t border-border/40">
      <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-[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">
-              <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>
-              <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" />
-                在网页中对话
+
+              {isMobile ? ( 
+                <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> ) : 
+              (
+              <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>
@@ -88,33 +133,38 @@ const AdBanner: React.FC<AdBannerProps> = ({ show, closeAd }) => {
      <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-center gap-3 px-2">
-              <Popover>
-                <PopoverTrigger asChild>
-                  <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>
-                </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 className="flex items-center justify-between gap-3 px-2 flex-1">
+              <div className="flex items-center gap-3">
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <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>
+                  </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-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/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" />
-              </button>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+                <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>
@@ -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 }; 
--- a/src/components/ChatUI.tsx
+++ b/src/components/ChatUI.tsx
@@ -22,7 +22,7 @@ import rehypeKatex from 'rehype-katex'
 import { SharePoster } from '@/components/SharePoster';
 import { MembersManagement } from '@/components/MembersManagement';
 import Sidebar from './Sidebar';
-import { AdBanner } from './AdSection';
+import { AdBanner, AdBannerMobile } from './AdSection';
 // 使用本地头像数据，避免外部依赖
 const getAvatarData = (name: string) => {
  const colors = ['#1abc9c', '#3498db', '#9b59b6', '#f1c40f', '#e67e22'];
@@ -194,6 +194,12 @@ const ChatUI = () => {
    );
  };

+  useEffect(() => {
+    if (messages.length > 0) {
+      setShowAd(false);
+    }
+  }, [messages]);
+
  const handleSendMessage = async () => {
    //判断是否Loding
    if (isLoading) return;
@@ -493,7 +499,11 @@ const ChatUI = () => {

            {/* Main Chat Area */}
            <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">
                  {messages.map((message) => (
                    <div key={message.id}