From 085e1b6c41856ebd2692de1a0b1445c9f0cf92c4 Mon Sep 17 00:00:00 2001
From: JeevaRamanathan <jeevaramanathan.m@infosys.com>
Date: Fri, 4 Oct 2024 21:34:40 +0530
Subject: [PATCH 1/2] fix: share button available in mobile view

Signed-off-by: JeevaRamanathan <jeevaramanathan.m@infosys.com>
---
 frontend/src/Navigation.tsx | 45 +++++++++++++++++++++++++++++++------
 1 file changed, 38 insertions(+), 7 deletions(-)

diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 87cbbe514..12b0a7412 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { NavLink, useNavigate } from 'react-router-dom';
-
+import { ShareConversationModal } from './modals/ShareConversationModal';
 import conversationService from './api/services/conversationService';
 import userService from './api/services/userService';
 import Add from './assets/add.svg';
@@ -10,7 +10,6 @@ import DocsGPT3 from './assets/cute_docsgpt3.svg';
 import Discord from './assets/discord.svg';
 import Expand from './assets/expand.svg';
 import Github from './assets/github.svg';
-import Hamburger from './assets/hamburger.svg';
 import Info from './assets/info.svg';
 import SettingGear from './assets/settingGear.svg';
 import Twitter from './assets/TwitterX.svg';
@@ -41,6 +40,7 @@ import {
   setSourceDocs,
 } from './preferences/preferenceSlice';
 import Upload from './upload/Upload';
+import ShareIcon from './assets/share.svg';
 
 interface NavigationProps {
   navOpen: boolean;
@@ -73,7 +73,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const [isDarkTheme] = useDarkTheme();
   const [isDocsListOpen, setIsDocsListOpen] = useState(false);
   const { t } = useTranslation();
-
+  const [isShareModalOpen, setShareModalState] = useState<boolean>(false);
   const isApiKeySet = useSelector(selectApiKeyStatus);
   const [apiKeyModalState, setApiKeyModalState] =
     useState<ActiveState>('INACTIVE');
@@ -383,15 +383,46 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
       </div>
       <div className="sticky z-10 h-16 w-full border-b-2 bg-gray-50 dark:border-b-purple-taupe dark:bg-chinese-black md:hidden">
         <button
-          className="mt-5 ml-6 h-6 w-6 md:hidden"
-          onClick={() => setNavOpen(true)}
+          className="m-5"
+          onClick={() => {
+            setNavOpen(!navOpen);
+          }}
         >
           <img
-            src={Hamburger}
+            src={Expand}
             alt="menu toggle"
-            className="w-7 filter dark:invert"
+            className={`${
+              !navOpen ? 'rotate-180' : 'rotate-0'
+            } m-auto transition-all duration-200`}
           />
         </button>
+
+        {conversationId && (
+          <>
+            {' '}
+            <button
+              title="Share"
+              onClick={() => {
+                setShareModalState(true);
+              }}
+              className="absolute top-4 right-20 z-20 rounded-full hover:bg-bright-gray dark:hover:bg-[#28292E]"
+            >
+              <img
+                className="m-2 h-5 w-5 filter dark:invert"
+                alt="share"
+                src={ShareIcon}
+              />
+            </button>
+            {isShareModalOpen && (
+              <ShareConversationModal
+                close={() => {
+                  setShareModalState(false);
+                }}
+                conversationId={conversationId}
+              />
+            )}
+          </>
+        )}
       </div>
       <APIKeyModal
         modalState={apiKeyModalState}

From c440e6f8fac342cbf0dc16b3ddcd9852ddf1607e Mon Sep 17 00:00:00 2001
From: JeevaRamanathan <jeevaramanathan.m@infosys.com>
Date: Sun, 13 Oct 2024 15:32:17 +0530
Subject: [PATCH 2/2] fixed overlapping

---
 frontend/src/Navigation.tsx                | 31 ++-----------------
 frontend/src/components/ShareButton.tsx    | 36 ++++++++++++++++++++++
 frontend/src/conversation/Conversation.tsx | 31 +++----------------
 3 files changed, 42 insertions(+), 56 deletions(-)
 create mode 100644 frontend/src/components/ShareButton.tsx

diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index fe52001ac..0bf3e3409 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -2,7 +2,6 @@ import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { NavLink, useNavigate } from 'react-router-dom';
-import { ShareConversationModal } from './modals/ShareConversationModal';
 import conversationService from './api/services/conversationService';
 import userService from './api/services/userService';
 import Add from './assets/add.svg';
@@ -40,7 +39,7 @@ import {
   setSourceDocs,
 } from './preferences/preferenceSlice';
 import Upload from './upload/Upload';
-import ShareIcon from './assets/share.svg';
+import ShareButton from './components/ShareButton';
 
 interface NavigationProps {
   navOpen: boolean;
@@ -73,7 +72,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const [isDarkTheme] = useDarkTheme();
   const [isDocsListOpen, setIsDocsListOpen] = useState(false);
   const { t } = useTranslation();
-  const [isShareModalOpen, setShareModalState] = useState<boolean>(false);
   const isApiKeySet = useSelector(selectApiKeyStatus);
   const [apiKeyModalState, setApiKeyModalState] =
     useState<ActiveState>('INACTIVE');
@@ -441,32 +439,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           />
         </button>
 
-        {conversationId && (
-          <>
-            {' '}
-            <button
-              title="Share"
-              onClick={() => {
-                setShareModalState(true);
-              }}
-              className="absolute top-4 right-20 z-20 rounded-full hover:bg-bright-gray dark:hover:bg-[#28292E]"
-            >
-              <img
-                className="m-2 h-5 w-5 filter dark:invert"
-                alt="share"
-                src={ShareIcon}
-              />
-            </button>
-            {isShareModalOpen && (
-              <ShareConversationModal
-                close={() => {
-                  setShareModalState(false);
-                }}
-                conversationId={conversationId}
-              />
-            )}
-          </>
-        )}
+        {conversationId && <ShareButton conversationId={conversationId} />}
       </div>
       <APIKeyModal
         modalState={apiKeyModalState}
diff --git a/frontend/src/components/ShareButton.tsx b/frontend/src/components/ShareButton.tsx
new file mode 100644
index 000000000..8d4a93de0
--- /dev/null
+++ b/frontend/src/components/ShareButton.tsx
@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import ShareIcon from '../assets/share.svg';
+import { ShareConversationModal } from '../modals/ShareConversationModal';
+
+type ShareButtonProps = {
+  conversationId: string;
+};
+
+export default function ShareButton({ conversationId }: ShareButtonProps) {
+  const [isShareModalOpen, setShareModalState] = useState<boolean>(false);
+  return (
+    <>
+      <button
+        title="Share"
+        onClick={() => {
+          setShareModalState(true);
+        }}
+        className="absolute top-4 right-20 z-20 rounded-full hover:bg-bright-gray dark:hover:bg-[#28292E]"
+      >
+        <img
+          className="m-2 h-5 w-5 filter dark:invert"
+          alt="share"
+          src={ShareIcon}
+        />
+      </button>
+      {isShareModalOpen && (
+        <ShareConversationModal
+          close={() => {
+            setShareModalState(false);
+          }}
+          conversationId={conversationId}
+        />
+      )}
+    </>
+  );
+}
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index fb8199222..ae4ed7a92 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -5,13 +5,11 @@ import { useDispatch, useSelector } from 'react-redux';
 import ArrowDown from '../assets/arrow-down.svg';
 import Send from '../assets/send.svg';
 import SendDark from '../assets/send_dark.svg';
-import ShareIcon from '../assets/share.svg';
 import SpinnerDark from '../assets/spinner-dark.svg';
 import Spinner from '../assets/spinner.svg';
 import RetryIcon from '../components/RetryIcon';
 import Hero from '../Hero';
 import { useDarkTheme, useMediaQuery } from '../hooks';
-import { ShareConversationModal } from '../modals/ShareConversationModal';
 import { selectConversationId } from '../preferences/preferenceSlice';
 import { AppDispatch } from '../store';
 import ConversationBubble from './ConversationBubble';
@@ -24,6 +22,7 @@ import {
   selectStatus,
   updateQuery,
 } from './conversationSlice';
+import ShareButton from '../components/ShareButton';
 
 export default function Conversation() {
   const queries = useSelector(selectQueries);
@@ -37,7 +36,6 @@ export default function Conversation() {
   const fetchStream = useRef<any>(null);
   const [eventInterrupt, setEventInterrupt] = useState(false);
   const [lastQueryReturnedErr, setLastQueryReturnedErr] = useState(false);
-  const [isShareModalOpen, setShareModalState] = useState<boolean>(false);
   const { t } = useTranslation();
   const { isMobile } = useMediaQuery();
 
@@ -199,30 +197,9 @@ export default function Conversation() {
   return (
     <div className="flex flex-col gap-1 h-full justify-end">
       {conversationId && (
-        <>
-          {' '}
-          <button
-            title="Share"
-            onClick={() => {
-              setShareModalState(true);
-            }}
-            className="absolute top-4 right-20 z-20 rounded-full hover:bg-bright-gray dark:hover:bg-[#28292E]"
-          >
-            <img
-              className="m-2 h-5 w-5 filter dark:invert"
-              alt="share"
-              src={ShareIcon}
-            />
-          </button>
-          {isShareModalOpen && (
-            <ShareConversationModal
-              close={() => {
-                setShareModalState(false);
-              }}
-              conversationId={conversationId}
-            />
-          )}
-        </>
+        <div className="hidden md:block">
+          <ShareButton conversationId={conversationId} />
+        </div>
       )}
       <div
         ref={conversationRef}