UI Cleanup (#2270)

Remove FineTuningBanner
remove AgentAlert for first time users

frontend/src/components/SettingsSidebar/index.jsx

@@ -21,7 +21,6 @@ import { useTranslation } from "react-i18next";
 import showToast from "@/utils/toast";
 import System from "@/models/system";
 import Option from "./MenuOption";
-import { FineTuningAlert } from "@/pages/FineTuning/Banner";
 
 export default function SettingsSidebar() {
   const { t } = useTranslation();
@@ -178,7 +177,6 @@ export default function SettingsSidebar() {
           </div>
         </div>
       </div>
-      <FineTuningAlert />
     </>
   );
 }

frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AgentMenu/index.jsx

@@ -1,8 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { Tooltip } from "react-tooltip";
-import { At, Flask, X } from "@phosphor-icons/react";
+import { At } from "@phosphor-icons/react";
-import ModalWrapper from "@/components/ModalWrapper";
-import { useModal } from "@/hooks/useModal";
 import { useIsAgentSessionActive } from "@/utils/chat/agent";
 
 export default function AvailableAgentsButton({ showing, setShowAgents }) {
@@ -107,7 +105,6 @@ export function AvailableAgents({
           </div>
         </div>
       </div>
-      {showing && <FirstTimeAgentUser />}
     </>
   );
 }
@@ -116,71 +113,3 @@ export function useAvailableAgents() {
   const [showAgents, setShowAgents] = useState(false);
   return { showAgents, setShowAgents };
 }
-
-const SEEN_FT_AGENT_MODAL = "anythingllm_seen_first_time_agent_modal";
-function FirstTimeAgentUser() {
-  const { isOpen, openModal, closeModal } = useModal();
-  useEffect(() => {
-    function firstTimeShow() {
-      if (!window) return;
-      if (!window.localStorage.getItem(SEEN_FT_AGENT_MODAL)) openModal();
-    }
-    firstTimeShow();
-  }, []);
-
-  const dismiss = () => {
-    closeModal();
-    window.localStorage.setItem(SEEN_FT_AGENT_MODAL, 1);
-  };
-
-  return (
-    <ModalWrapper isOpen={isOpen}>
-      <div className="relative w-[500px] max-w-2xl max-h-full">
-        <div className="relative bg-main-gradient rounded-lg shadow">
-          <div className="flex items-center gap-x-1 justify-between p-4 border-b rounded-t border-gray-600">
-            <Flask className="text-green-400" size={24} weight="fill" />
-            <h3 className="text-xl font-semibold text-white">
-              You just discovered Agents!
-            </h3>
-            <button
-              onClick={dismiss}
-              type="button"
-              className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
-              data-modal-hide="staticModal"
-            >
-              <X className="text-gray-300 text-lg" />
-            </button>
-          </div>
-          <div className="p-6 space-y-6 flex h-full w-full">
-            <div className="w-full flex flex-col gap-y-4">
-              <p className="text-white/80 text-xs md:text-sm">
-                Agents are your LLM, but with special abilities that{" "}
-                <u>do something beyond chatting with your documents</u>.
-                <br />
-                <br />
-                Now you can use agents for real-time web search and scraping,
-                saving documents to your browser, summarizing documents, and
-                more.
-              </p>
-              <p className="text-green-300/60 text-xs md:text-sm">
-                This feature is currently early access and fully custom agents
-                with custom integrations & code execution will be in a future
-                update.
-              </p>
-            </div>
-          </div>
-          <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-600">
-            <div />
-            <button
-              onClick={dismiss}
-              type="button"
-              className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300"
-            >
-              Continue
-            </button>
-          </div>
-        </div>
-      </div>
-    </ModalWrapper>
-  );
-}

frontend/src/index.css

@@ -767,34 +767,6 @@ does not extend the close button beyond the viewport. */
   }
 }
 
-.top-banner {
-  animation: popTop 500ms forwards;
-}
-
-@keyframes popTop {
-  0% {
-    top: -3.5rem;
-  }
-
-  100% {
-    top: 0px;
-  }
-}
-
-.rm-top-banner {
-  animation: rmPopTop 500ms forwards;
-}
-
-@keyframes rmPopTop {
-  0% {
-    top: 0px;
-  }
-
-  100% {
-    top: -3.5rem;
-  }
-}
-
 /* Math/Katex formatting to prevent duplication of content on screen */
 .katex-html[aria-hidden="true"] {
   display: none;

frontend/src/pages/FineTuning/Banner/index.jsx

@@ -1,66 +0,0 @@
-import { useEffect, useState } from "react";
-import useUser from "@/hooks/useUser";
-import FineTuning from "@/models/experimental/fineTuning";
-import { createPortal } from "react-dom";
-import { Sparkle } from "@phosphor-icons/react";
-import { Link, useLocation } from "react-router-dom";
-import paths from "@/utils/paths";
-
-export function FineTuningAlert() {
-  const { user } = useUser();
-  const location = useLocation();
-  const [className, setClassName] = useState("top-banner");
-  const [isEligible, setIsEligible] = useState(false);
-
-  function dismissAlert() {
-    setClassName("rm-top-banner");
-    window?.localStorage?.setItem(FineTuning.cacheKeys.dismissed_cta, "1");
-    setTimeout(() => {
-      setIsEligible(false);
-    }, 550);
-  }
-
-  useEffect(() => {
-    if (!FineTuning.canAlert(user)) return;
-    if (
-      location.pathname === paths.orderFineTune() ||
-      location.pathname === paths.settings.chats()
-    )
-      return;
-    FineTuning.checkEligibility()
-      .then((eligible) => setIsEligible(eligible))
-      .catch(() => null);
-  }, [user]);
-
-  if (!isEligible) return null;
-  return createPortal(
-    <div
-      className={`fixed ${className} left-0 right-0 h-14 bg-orange-400 flex items-center justify-end px-4 z-[9999]`}
-    >
-      <Link
-        onClick={dismissAlert}
-        to={paths.orderFineTune()}
-        className="grow w-full h-full ml-4 py-1"
-      >
-        <div className="flex flex-col items-center w-full">
-          <div className="flex w-full justify-center items-center gap-x-2">
-            <Sparkle size={20} className="text-white" />
-            <p className="text-white font-medium text-lg">
-              You have enough data for a fine-tune!
-            </p>
-          </div>
-          <p className="text-xs text-white">click to learn more &rarr;</p>
-        </div>
-      </Link>
-      <div className="flex items-center gap-x-2 shrink-0">
-        <button
-          onClick={dismissAlert}
-          className="border-none text-white font-medium text-sm px-[10px] py-[6px] rounded-md bg-white/5 hover:bg-white/10"
-        >
-          Dismiss
-        </button>
-      </div>
-    </div>,
-    document.getElementById("root")
-  );
-}

frontend/src/pages/Main/index.jsx

@@ -5,7 +5,6 @@ import PasswordModal, { usePasswordModal } from "@/components/Modals/Password";
 import { isMobile } from "react-device-detect";
 import { FullScreenLoader } from "@/components/Preloader";
 import UserMenu from "@/components/UserMenu";
-import { FineTuningAlert } from "../FineTuning/Banner";
 
 export default function Main() {
   const { loading, requiresAuth, mode } = usePasswordModal();
@@ -23,7 +22,6 @@ export default function Main() {
           <DefaultChatContainer />
         </div>
       </UserMenu>
-      <FineTuningAlert />
     </>
   );
 }

frontend/src/pages/WorkspaceChat/index.jsx

@@ -6,7 +6,6 @@ import Workspace from "@/models/workspace";
 import PasswordModal, { usePasswordModal } from "@/components/Modals/Password";
 import { isMobile } from "react-device-detect";
 import { FullScreenLoader } from "@/components/Preloader";
-import { FineTuningAlert } from "../FineTuning/Banner";
 
 export default function WorkspaceChat() {
   const { loading, requiresAuth, mode } = usePasswordModal();
@@ -50,7 +49,6 @@ function ShowWorkspaceChat() {
         {!isMobile && <Sidebar />}
         <WorkspaceChatContainer loading={loading} workspace={workspace} />
       </div>
-      <FineTuningAlert />
     </>
   );
 }