Merge pull request #1233 from JeevaRamanathan/fix/1227-share_button

fix: share button available in mobile view

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 conversationService from './api/services/conversationService';
 import userService from './api/services/userService';
 import Add from './assets/add.svg';
@@ -10,7 +9,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 SettingGear from './assets/settingGear.svg';
 import Twitter from './assets/TwitterX.svg';
 import UploadIcon from './assets/upload.svg';
@@ -40,8 +38,10 @@ import {
   setSourceDocs,
 } from './preferences/preferenceSlice';
 import Upload from './upload/Upload';
+import ShareButton from './components/ShareButton';
 import Help from './components/Help';
 
+
 interface NavigationProps {
   navOpen: boolean;
   setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -73,7 +73,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const [isDarkTheme] = useDarkTheme();
   const [isDocsListOpen, setIsDocsListOpen] = useState(false);
   const { t } = useTranslation();
-
   const isApiKeySet = useSelector(selectApiKeyStatus);
   const [apiKeyModalState, setApiKeyModalState] =
     useState<ActiveState>('INACTIVE');
@@ -412,15 +411,21 @@ 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 && <ShareButton conversationId={conversationId} />}
       </div>
       <APIKeyModal
         modalState={apiKeyModalState}

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}
+        />
+      )}
+    </>
+  );
+}

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}