(feat:action-buttons) combine the buttons at the top of layout

frontend/src/App.tsx

@@ -13,6 +13,7 @@ import Navigation from './Navigation';
 import PageNotFound from './PageNotFound';
 import Setting from './settings';
 import Agents from './agents';
+import ActionButtons from './components/ActionButtons';
 
 function AuthWrapper({ children }: { children: React.ReactNode }) {
   const { isAuthLoading } = useTokenAuth();
@@ -34,6 +35,7 @@ function MainLayout() {
   return (
     <div className="relative h-screen overflow-auto dark:bg-raisin-black">
       <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />
+      <ActionButtons showNewChat={true} showShare={true} />
       <div
         className={`h-[calc(100dvh-64px)] md:h-screen ${
           !isMobile

frontend/src/components/ActionButtons.tsx

@@ -0,0 +1,86 @@
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import newChatIcon from '../assets/openNewChat.svg';
+import ShareIcon from '../assets/share.svg';
+import { ShareConversationModal } from '../modals/ShareConversationModal';
+import { useState } from 'react';
+import { selectConversationId } from '../preferences/preferenceSlice';
+import { useDispatch } from 'react-redux';
+import { AppDispatch } from '../store';
+import {
+  setConversation,
+  updateConversationId,
+} from '../conversation/conversationSlice';
+
+interface ActionButtonsProps {
+  className?: string;
+  showNewChat?: boolean;
+  showShare?: boolean;
+}
+
+export default function ActionButtons({
+  className = '',
+  showNewChat = true,
+  showShare = true,
+}: ActionButtonsProps) {
+  const { t } = useTranslation();
+  const dispatch = useDispatch<AppDispatch>();
+  const conversationId = useSelector(selectConversationId);
+  const [isShareModalOpen, setShareModalState] = useState<boolean>(false);
+
+  const newChat = () => {
+    dispatch(setConversation([]));
+    dispatch(
+      updateConversationId({
+        query: { conversationId: null },
+      }),
+    );
+  };
+
+  return (
+    <div className="absolute right-4 top-4 z-20">
+      <div className={`flex items-center gap-2 sm:gap-4 ${className}`}>
+        {showNewChat && (
+          <button
+            title="Open New Chat"
+            onClick={newChat}
+            className="flex items-center gap-1 rounded-full p-2 hover:bg-bright-gray dark:hover:bg-[#28292E] lg:hidden"
+          >
+            <img
+              className="filter dark:invert"
+              alt="NewChat"
+              width={21}
+              height={21}
+              src={newChatIcon}
+            />
+          </button>
+        )}
+
+        {showShare && conversationId && (
+          <>
+            <button
+              title="Share"
+              onClick={() => setShareModalState(true)}
+              className="rounded-full p-2 hover:bg-bright-gray dark:hover:bg-[#28292E]"
+            >
+              <img
+                className="filter dark:invert"
+                alt="share"
+                width={16}
+                height={16}
+                src={ShareIcon}
+              />
+            </button>
+            {isShareModalOpen && (
+              <ShareConversationModal
+                close={() => setShareModalState(false)}
+                conversationId={conversationId}
+              />
+            )}
+          </>
+        )}
+        <div>{/* <UserButton  /> */}</div>
+      </div>
+    </div>
+  );
+}

frontend/src/conversation/Conversation.tsx

@@ -4,11 +4,8 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import DragFileUpload from '../assets/DragFileUpload.svg';
-import newChatIcon from '../assets/openNewChat.svg';
-import ShareIcon from '../assets/share.svg';
 import MessageInput from '../components/MessageInput';
 import { useMediaQuery } from '../hooks';
-import { ShareConversationModal } from '../modals/ShareConversationModal';
 import { ActiveState } from '../models/misc';
 import {
   selectConversationId,
@@ -184,10 +181,6 @@ export default function Conversation() {
     );
   };
 
-  const newChat = () => {
-    if (queries && queries.length > 0) resetConversation();
-  };
-
   useEffect(() => {
     if (queries.length) {
       queries[queries.length - 1].error && setLastQueryReturnedErr(true);
@@ -196,50 +189,6 @@ export default function Conversation() {
   }, [queries[queries.length - 1]]);
   return (
     <div className="flex h-full flex-col justify-end gap-1">
-      {conversationId && queries.length > 0 && (
-        <div className="absolute right-20 top-4">
-          <div className="mt-2 flex items-center gap-4">
-            {isMobile && queries.length > 0 && (
-              <button
-                title="Open New Chat"
-                onClick={() => {
-                  newChat();
-                }}
-                className="rounded-full p-2 hover:bg-bright-gray dark:hover:bg-[#28292E]"
-              >
-                <img
-                  className="h-5 w-5 filter dark:invert"
-                  alt="NewChat"
-                  src={newChatIcon}
-                />
-              </button>
-            )}
-
-            <button
-              title="Share"
-              onClick={() => {
-                setShareModalState(true);
-              }}
-              className="rounded-full p-2 hover:bg-bright-gray dark:hover:bg-[#28292E]"
-            >
-              <img
-                className="h-5 w-5 filter dark:invert"
-                alt="share"
-                src={ShareIcon}
-              />
-            </button>
-          </div>
-          {isShareModalOpen && (
-            <ShareConversationModal
-              close={() => {
-                setShareModalState(false);
-              }}
-              conversationId={conversationId}
-            />
-          )}
-        </div>
-      )}
-
       <ConversationMessages
         handleQuestion={handleQuestion}
         handleQuestionSubmission={handleQuestionSubmission}