feat(chat): optimize switch to other route (Issue #2773) (#2848)

epam · Dec 19, 2024 · 7ce3b0c · 7ce3b0c
1 parent fd27029
commit 7ce3b0c
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 32 deletions.
diff --git a/apps/chat/src/components/Chat/TalkTo/TalkToModal.tsx b/apps/chat/src/components/Chat/TalkTo/TalkToModal.tsx
@@ -7,7 +7,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { useTranslation } from 'next-i18next';
-import { useRouter } from 'next/router';
+import Link from 'next/link';
 
 import classNames from 'classnames';
 
@@ -177,8 +177,6 @@ const TalkToModalView = ({
 }: TalkToModalViewProps) => {
   const { t } = useTranslation(Translation.Chat);
 
-  const router = useRouter();
-
   const dispatch = useDispatch();
 
   const allModels = useAppSelector(ModelsSelectors.selectModels);
@@ -582,21 +580,20 @@ const TalkToModalView = ({
             )}
           </div>
           {isMarketplaceEnabled && (
-            <button
-              onClick={() =>
-                router.push(
-                  `/marketplace?${MarketplaceQueryParams.fromConversation}=${ApiUtils.encodeApiUrl(conversation.id)}`,
-                )
+            <Link
+              href={`/marketplace?${MarketplaceQueryParams.fromConversation}=${ApiUtils.encodeApiUrl(conversation.id)}`}
+              shallow
+              onClick={(e) =>
+                conversation.playback?.isPlayback ? e.preventDefault() : null
               }
               className={classNames(
                 'mt-4 text-accent-primary md:mt-0',
                 conversation.playback?.isPlayback && 'cursor-not-allowed',
               )}
               data-qa="go-to-my-workspace"
-              disabled={conversation.playback?.isPlayback}
             >
               {t('Go to My workspace')}
-            </button>
+            </Link>
           )}
         </div>
       </div>

diff --git a/apps/chat/src/components/Chatbar/Chatbar.tsx b/apps/chat/src/components/Chatbar/Chatbar.tsx
@@ -2,7 +2,9 @@ import { IconApps } from '@tabler/icons-react';
 import { DragEvent, useCallback, useMemo } from 'react';
 
 import { useTranslation } from 'next-i18next';
-import { useRouter } from 'next/router';
+import Link from 'next/link';
+
+import classNames from 'classnames';
 
 import { isEntityNameOnSameLevelUnique } from '@/src/utils/app/common';
 import { getConversationRootId } from '@/src/utils/app/id';
@@ -29,7 +31,6 @@ import { Conversations } from './Conversations';
 import { ConversationInfo, Feature } from '@epam/ai-dial-shared';
 
 const ChatActionsBlock = () => {
-  const router = useRouter();
   const { t } = useTranslation(Translation.SideBar);
   const messageIsStreaming = useAppSelector(
     ConversationsSelectors.selectIsConversationsStreaming,
@@ -51,17 +52,23 @@ const ChatActionsBlock = () => {
     <>
       {isMarketplaceEnabled && (
         <div className="flex px-2 py-1">
-          <button
-            className="flex shrink-0 grow cursor-pointer select-none items-center gap-3 rounded px-3 py-[5px] transition-colors duration-200 hover:bg-accent-primary-alpha disabled:cursor-not-allowed hover:disabled:bg-transparent"
-            onClick={() => router.push('/marketplace')}
+          <Link
+            href="/marketplace"
+            shallow
+            className={classNames(
+              'flex shrink-0 grow select-none items-center gap-3 rounded px-3 py-[5px] transition-colors duration-200',
+              messageIsStreaming
+                ? 'cursor-not-allowed bg-transparent'
+                : 'cursor-pointer hover:bg-accent-primary-alpha',
+            )}
+            onClick={(e) => (messageIsStreaming ? e.preventDefault() : null)}
             data-qa="link-to-marketplace"
-            disabled={messageIsStreaming}
           >
             <Tooltip tooltip={t('DIAL Marketplace')}>
               <IconApps className="text-secondary" width={24} height={24} />
             </Tooltip>
             {t('DIAL Marketplace')}
-          </button>
+          </Link>
         </div>
       )}
     </>

diff --git a/apps/chat/src/components/Header/BackToChat.tsx b/apps/chat/src/components/Header/BackToChat.tsx
@@ -1,7 +1,7 @@
 import { IconMessage2 } from '@tabler/icons-react';
 
 import { useTranslation } from 'next-i18next';
-import { useRouter } from 'next/router';
+import Link from 'next/link';
 
 import { Translation } from '@/src/types/translation';
 
@@ -10,23 +10,20 @@ import Tooltip from '../Common/Tooltip';
 export const BackToChat = () => {
   const { t } = useTranslation(Translation.Header);
 
-  const router = useRouter();
-
   return (
     <Tooltip isTriggerClickable tooltip={t('Back to Chat')}>
-      <button
+      <Link
+        href="/"
+        shallow
         className="flex h-full items-center justify-center border-r border-tertiary px-[9px]"
-        onClick={() => {
-          router.push('/');
-        }}
       >
         <div
-          className="flex cursor-pointer items-center justify-center rounded border border-transparent bg-accent-primary-alpha p-[2px] hover:border-accent-primary disabled:cursor-not-allowed md:px-[10px]"
+          className="flex cursor-pointer items-center justify-center rounded border border-transparent bg-accent-primary-alpha p-[2px] hover:border-accent-primary md:px-[10px]"
           data-qa="back-to-chat"
         >
           <IconMessage2 className="text-accent-primary" size={24} />
         </div>
-      </button>
+      </Link>
     </Tooltip>
   );
 };
diff --git a/apps/chat/src/components/Header/Logo.tsx b/apps/chat/src/components/Header/Logo.tsx
@@ -1,5 +1,10 @@
+import { MouseEventHandler } from 'react';
+
+import Link from 'next/link';
 import { useRouter } from 'next/router';
 
+import classNames from 'classnames';
+
 import { ApiUtils } from '@/src/utils/server/api';
 
 import {
@@ -51,23 +56,28 @@ export const Logo = () => {
     dispatch(ConversationsActions.resetSearch());
   };
 
-  const handleLogoClick = () => {
+  const handleLogoClick: MouseEventHandler<HTMLAnchorElement> = (e) => {
+    if (messageIsStreaming) return e.preventDefault();
     if (router.route === '/') createNewConversation();
     else {
-      router.push('/').then(createNewConversation);
+      createNewConversation();
     }
   };
 
   return (
-    <button
+    <Link
+      href={'/'}
+      shallow
       onClick={handleLogoClick}
-      disabled={messageIsStreaming}
-      className="mx-auto min-w-[110px] bg-contain bg-center bg-no-repeat disabled:cursor-not-allowed md:ml-5 lg:bg-left"
+      className={classNames(
+        'mx-auto min-w-[110px] bg-contain bg-center bg-no-repeat md:ml-5 lg:bg-left',
+        messageIsStreaming && 'cursor-not-allowed',
+      )}
       style={{
         backgroundImage: customLogoUrl
           ? `url(${cssEscape(customLogoUrl)})`
           : `var(--app-logo)`,
       }}
-    ></button>
+    ></Link>
   );
 };