kamp/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2024-11-19 12:40:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

UI Cleanup (#2270)

Browse Source 
Remove FineTuningBanner
remove AgentAlert for first time users
This commit is contained in:
Timothy Carambat 2024-09-11 13:17:29 -07:00 committed by GitHub
parent 43b6ece0a5
commit de9f9a0ce8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 1 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/SettingsSidebar/index.jsx
View File

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

73
frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AgentMenu/index.jsx
View File

@ -1,8 +1,6 @@
import { useEffect, useRef, useState } from "react";
import { Tooltip } from "react-tooltip";
import { At, Flask, X } from "@phosphor-icons/react";
import ModalWrapper from "@/components/ModalWrapper";
import { useModal } from "@/hooks/useModal";
import { At } from "@phosphor-icons/react";
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>
);
}

28
frontend/src/index.css
View File

@ -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;

66
frontend/src/pages/FineTuning/Banner/index.jsx
View File

@ -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")
);
}

2
frontend/src/pages/Main/index.jsx
View File

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

2
frontend/src/pages/WorkspaceChat/index.jsx
View File

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