fix: fix styles for chat buttons

src/components/Experts/ExpertDetails.tsx

@@ -51,10 +51,12 @@ export const ExpertCard: FC<ExpertDetailsProps> = ({ expert, locale, expertId })
         }
     }, []);
 
-    const handleJoinChat = (id: number) => {
-        joinChatPerson(id).then((res: any) => {
-            router.push(`/account/messages/${res.id}` as string);
-        })
+    const handleJoinChat = (id?: number) => {
+        if (id) {
+            joinChatPerson(id).then((res: any) => {
+                router.push(`/account/messages/${res.id}` as string);
+            })
+        }
     }
 
     const checkSession = (data?: SignupSessionData) => {
@@ -106,11 +108,13 @@ export const ExpertCard: FC<ExpertDetailsProps> = ({ expert, locale, expertId })
                         <Button className="btn-apply" onClick={() => handleJoinChat(id)}>
                             {i18nText('chat.join', locale)}
                         </Button>
-                        {botUserId && (
-                            <Button className="btn-apply" onClick={() => handleJoinChat(botUserId)}>
-                                {i18nText('chat.joinAI', locale)}
-                            </Button>
-                        )}
+                        <Button
+                            className={`btn-apply${!botUserId ? ' btn-disabled' : ''}`}
+                            disabled={!botUserId}
+                            onClick={botUserId ? () => handleJoinChat(botUserId) : undefined}
+                        >
+                            {i18nText('chat.joinAI', locale)}
+                        </Button>
                         {/*
                             <a href="#" className="btn-video">
                                 <img src="/images/videocam-outline.svg" className="" alt=""/>

src/styles/_default.scss

@@ -563,6 +563,10 @@ a {
   }
 }
 
+.btn-disabled {
+  opacity: .4 !important;
+}
+
 .btn-back {
   user-select: none;
   outline: none;