Merge branch 'develop' of https://github.com/mezonai/mezon into fix-channel-list

Author: kind6688

README.md

@@ -28,7 +28,7 @@
 
 ## The Live, Work, and Play Platform the best Discord Alternative
 
-Mezon is great for playing games and chilling with friends, or even building a worldwide community. Customize your own space to talk, play, and hang out., Mezon delivers enterprise-grade performance with sub-millisecond response times and support for millions of concurrent connections.
+Mezon is a Live, Work, and Play platform. It’s perfect for gaming and chilling with friends, or even building a global community. Customize your own space to talk, play, and hang out. Mezon also delivers enterprise-grade performance with sub-millisecond response times and support for millions of concurrent connections.
 
 <div align="center">
   <img src="docs/mezon_header_bot_battle.png" alt="Mezon Platform Overview" width="100%">

apps/chat/src/app/app.tsx

@@ -46,6 +46,9 @@ import { preloadedState } from './mock/state';
 import { Routes } from './routes';
 
 import { ThemeManager } from '@mezon/themes';
+import { LogLevel, setLogLevel } from 'livekit-client';
+
+setLogLevel(LogLevel.silent);
 
 ThemeManager.initializeTheme();
 

apps/chat/src/app/pages/brandcenter/index.tsx

@@ -163,7 +163,7 @@ const ChannelMainContentText = ({ channelId, canSendMessage }: ChannelMainConten
 			? ChannelStreamMode.STREAM_MODE_CHANNEL
 			: ChannelStreamMode.STREAM_MODE_THREAD;
 
-	const [canSendMessageDelayed, setCanSendMessageDelayed] = useState<boolean | null>(null);
+	const [canSendMessageDelayed, setCanSendMessageDelayed] = useState<boolean>(false);
 	const isAppChannel = currentChannel?.type === ChannelType.CHANNEL_TYPE_APP;
 
 	const currentClanId = useSelector(selectCurrentClanId);
@@ -205,14 +205,6 @@ const ChannelMainContentText = ({ channelId, canSendMessage }: ChannelMainConten
 		return selectUserProcessing?.onboarding_step !== DONE_ONBOARDING_STATUS && currentClanIsOnboarding;
 	}, [selectUserProcessing?.onboarding_step, currentClanIsOnboarding, previewMode, currentClanId]);
 	const isBanned = useAppSelector((state) => selectBanMeInChannel(state, currentChannel.id));
-	if (canSendMessageDelayed === null) {
-		return (
-			<div
-				className="h-11 opacity-80 bg-theme-input text-theme-primary ml-4 mb-4 py-2 pl-2 w-widthInputViewChannelPermission rounded one-line"
-				data-e2e={generateE2eId('chat.message_box.input.no_permission')}
-			></div>
-		);
-	}
 	if (!canSendMessageDelayed) {
 		return (
 			<div

apps/chat/src/app/pages/channel/index.tsx

@@ -107,12 +107,12 @@ const Footer = ({ downloadUrl, universalUrl }: FooterProps) => {
 						<h3 className="font-semibold text-xs md:text-md uppercase tracking-wider mb-4 md:mb-5 text-white">Company</h3>
 						<div className="space-y-2 md:space-y-3">
 							<a
-								href="https://mezon.ai/blogs/mediakit"
+								href="brand-center"
 								target="_blank"
 								rel="noreferrer"
 								className="text-white/90 hover:text-white transition-colors text-xs md:text-sm leading-relaxed block"
 							>
-								Media Kit
+								Brand Center
 							</a>
 							<a
 								href="/contact-us"

apps/chat/src/app/pages/homepage/mezonpage/footer/index.tsx

@@ -46,7 +46,7 @@ export const AiAgentSection = () => {
 							className={`absolute inset-0 bg-gradient-to-br from-[#8661df] to-[#7979ed] rounded-2xl transition-opacity duration-300 ${imageLoaded ? 'opacity-0' : 'opacity-100'}`}
 						/>
 						<img
-							src="https://cdn.mezon.ai/landing-page-mezon/ai-agentnew.webp"
+							src="https://cdn.mezon.ai/landing-page-mezon/section-aiagent.webp"
 							alt="Engage"
 							className="max-w-[68vw] lg:max-w-[35vw] object-contain drop-shadow-2xl rounded-2xl relative z-10"
 							loading="lazy"

apps/chat/src/app/pages/homepage/mezonpage/sections/AiAgentSection.tsx

@@ -48,15 +48,21 @@ const FormLoginOTP = ({ handleChangeMethod, onStepChange }: { handleChangeMethod
 		setOtp(e);
 	};
 
-	const handleEmailChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-		const value = e.target.value;
-		setEmail(value);
-		setOtp(Array(6).fill(''));
-		setErrors((prev) => ({
-			...prev,
-			email: validateEmail(value)
-		}));
-	}, []);
+	const handleEmailChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>) => {
+			if (step) {
+				return;
+			}
+			const value = e.target.value;
+			setEmail(value);
+			setOtp(Array(6).fill(''));
+			setErrors((prev) => ({
+				...prev,
+				email: validateEmail(value)
+			}));
+		},
+		[step]
+	);
 
 	useEffect(() => {
 		if (!reqId) return;
@@ -105,7 +111,7 @@ const FormLoginOTP = ({ handleChangeMethod, onStepChange }: { handleChangeMethod
 					</div>
 				)}
 
-				<div className="flex overflow-hidden items-center  gap-2">
+				<div className="flex overflow-hidden items-center gap-3">
 					<div className={`flex flex-col w-full shrink-0 ${step === null ? '' : step ? 'animate-login_otp' : 'animate-login_email'}`}>
 						<div className="flex flex-col gap-2">
 							<label htmlFor="email" className="block text-sm font-medium text-black dark:text-gray-300 leading-10 ml-2 ">
@@ -125,17 +131,17 @@ const FormLoginOTP = ({ handleChangeMethod, onStepChange }: { handleChangeMethod
 						{errors.email && <FormError message={errors.email} />}
 					</div>
 					<div className={`flex flex-col w-full shrink-0 ${step === null ? 'hidden' : step ? 'animate-login_otp' : 'animate-login_email'}`}>
-						<p className="text-sm text-gray-700 dark:text-gray-300 text-center mb-4">
+						<p className="text-sm text-gray-700 dark:text-gray-300 text-center mb-6">
 							{t('login.otpSentMessage', {
 								email: email.replace(/^(.{3})(.*)(@.*)$/, (_, p1, p2, p3) => `${p1}${'*'.repeat(p2.length)}${p3}`)
 							})}
 						</p>
 						<div className={`flex flex-col gap-2`}>
-							<OtpConfirm otp={otp} handleSetOTP={handleSetOTP} />
+							<OtpConfirm otp={otp} handleSetOTP={handleSetOTP} className="pr-[5px]" />
 						</div>
 					</div>
 				</div>
-				<div className="p-1 mt-2">
+				<div className="p-1 mt-3">
 					<ButtonLoading
 						className="w-full h-10 btn-primary btn-primary-hover"
 						disabled={!step ? !!errors.email || (step === null && errors.email === undefined) || disabled : disabled || count > 0}

apps/chat/src/app/pages/login/FormLoginOTP.tsx

@@ -54,6 +54,7 @@ const InvitePage = lazy(() => import(/* webpackChunkName: "invite-pages" */ '../
 const TextChannelPage = lazy(() => import(/* webpackChunkName: "textchannel-page" */ '../pages/textchannel'));
 const TermOfServivePage = lazy(() => import(/* webpackChunkName: "termofservice-page" */ '../pages/termofservices'));
 const PrivacyMezonPage = lazy(() => import(/* webpackChunkName: "privacymetzon-page" */ '../pages/privacymezon'));
+const BrandCenterPage = lazy(() => import(/* webpackChunkName: "brandcenter-page" */ '../pages/brandcenter'));
 const ContactUsPage = lazy(() => import(/* webpackChunkName: "contactus-page" */ '../pages/contactus'));
 const MezonDongPage = lazy(() => import(/* webpackChunkName: "textchannel-page" */ '../pages/mezondong'));
 const IntegrationsPage = lazy(() => import(/* webpackChunkName: "integrations-page" */ '../pages/integrations'));
@@ -245,6 +246,14 @@ export const Routes = memo(() => {
 							</Suspense>
 						)
 					},
+					{
+						path: '/brand-center',
+						element: (
+							<Suspense fallback={<SuspenseFallback />}>
+								<BrandCenterPage />
+							</Suspense>
+						)
+					},
 					{
 						path: '/mezondong',
 						element: (

apps/chat/src/app/routes/index.tsx

@@ -80,7 +80,8 @@ export function sanitizeUrl(url: string): string {
 		if (parsed.protocol === 'data:' && !encodedUrl.startsWith('data:image/')) {
 			return '';
 		}
-		return encodedUrl;
+
+		return encodedUrl.replace(/"/g, '&quot;').replace(/'/g, '&#039;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 	} catch (e) {
 		return '';
 	}

apps/desktop/src/app/utils/index.ts

@@ -389,6 +389,69 @@ width : 0 !important;
         opacity: 1;
     }
 
+    .skeleton {
+        animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        border-radius: 6px;
+    }
+
+    @keyframes skeleton-pulse {
+        0%, 100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.5;
+        }
+    }
+
+    .skeleton-main {
+        position: absolute;
+        z-index: 1;
+        display: none;
+        opacity: 0;
+        transition: opacity 0.3s ease-in-out;
+        background-color: #2e2e2e;
+        border-radius: 10px;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .skeleton-main.visible {
+        display: flex;
+        opacity: 1;
+    }
+
+    .skeleton-icon {
+        width: 64px;
+        height: 64px;
+        color: #4a4a4a;
+    }
+
+    .skeleton-thumbnail {
+        width: 88px;
+        height: 88px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #2e2e2e;
+    }
+
+    .skeleton-thumbnail .skeleton-icon {
+        width: 32px;
+        height: 32px;
+    }
+
+    .image-loading {
+        opacity: 0;
+        transition: opacity 0.3s ease-in-out;
+    }
+
+    .image-loaded {
+        opacity: 1;
+    }
+
 
 `;
 export default image_window_css;