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

[FEAT] Remove custom logo onboarding screen (#1252)

Browse Source 
remove custom logo onboarding screen
This commit is contained in:
Sean Hatfield 2024-05-01 16:26:14 -07:00 committed by GitHub
parent 43e54a19dc
commit a156a1e58c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 2 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
frontend/src/pages/OnboardingFlow/Steps/CustomLogo/index.jsx
View File

@ -1,140 +0,0 @@
import useLogo from "@/hooks/useLogo";
import System from "@/models/system";
import showToast from "@/utils/toast";
import { Plus } from "@phosphor-icons/react";
import React, { useState, useEffect } from "react";
import AnythingLLM from "@/media/logo/anything-llm.png";
import paths from "@/utils/paths";
import { useNavigate } from "react-router-dom";
const TITLE = "Custom Logo";
const DESCRIPTION =
"Upload your custom logo to make your chatbot yours. Optional.";
export default function CustomLogo({ setHeader, setForwardBtn, setBackBtn }) {
const navigate = useNavigate();
function handleForward() {
navigate(paths.onboarding.userSetup());
}
function handleBack() {
navigate(paths.onboarding.llmPreference());
}
useEffect(() => {
setHeader({ title: TITLE, description: DESCRIPTION });
setForwardBtn({ showing: true, disabled: false, onClick: handleForward });
setBackBtn({ showing: true, disabled: false, onClick: handleBack });
}, []);
const { logo: _initLogo, setLogo: _setLogo } = useLogo();
const [logo, setLogo] = useState("");
const [isDefaultLogo, setIsDefaultLogo] = useState(true);
useEffect(() => {
async function logoInit() {
setLogo(_initLogo || "");
const _isDefaultLogo = await System.isDefaultLogo();
setIsDefaultLogo(_isDefaultLogo);
}
logoInit();
}, [_initLogo]);
const handleFileUpload = async (event) => {
const file = event.target.files[0];
if (!file) return false;
const objectURL = URL.createObjectURL(file);
setLogo(objectURL);
const formData = new FormData();
formData.append("logo", file);
const { success, error } = await System.uploadLogo(formData);
if (!success) {
showToast(`Failed to upload logo: ${error}`, "error");
setLogo(_initLogo);
return;
}
const logoURL = await System.fetchLogo();
_setLogo(logoURL);
setIsDefaultLogo(false);
};
const handleRemoveLogo = async () => {
setLogo("");
setIsDefaultLogo(true);
const { success, error } = await System.removeCustomLogo();
if (!success) {
console.error("Failed to remove logo:", error);
showToast(`Failed to remove logo: ${error}`, "error");
const logoURL = await System.fetchLogo();
setLogo(logoURL);
setIsDefaultLogo(false);
return;
}
const logoURL = await System.fetchLogo();
_setLogo(logoURL);
};
return (
<div className="flex items-center w-full">
<div className="flex gap-x-8 flex-col w-full">
{isDefaultLogo ? (
<label className="mt-5 hover:opacity-60 w-full flex justify-center transition-all duration-300">
<input
id="logo-upload"
type="file"
accept="image/*"
className="hidden"
onChange={handleFileUpload}
/>
<div
className="max-w-[600px] w-full h-64 max-h-[600px] py-4 bg-zinc-900/50 rounded-2xl border-2 border-dashed border-white border-opacity-60 justify-center items-center inline-flex cursor-pointer"
htmlFor="logo-upload"
>
<div className="flex flex-col items-center justify-center">
<div className="rounded-full bg-white/40">
<Plus className="w-6 h-6 text-black/80 m-2" />
</div>
<div className="text-white text-opacity-80 text-sm font-semibold py-1">
Add a custom logo
</div>
<div className="text-white text-opacity-60 text-xs font-medium py-1">
Recommended size: 800 x 200
</div>
</div>
</div>
</label>
) : (
<div className="w-full flex justify-center">
<img
src={logo}
alt="Uploaded Logo"
className="w-48 h-48 object-contain mr-6"
hidden={isDefaultLogo}
onError={(e) => (e.target.src = AnythingLLM)}
/>
</div>
)}
{!isDefaultLogo ? (
<button
onClick={handleRemoveLogo}
className="text-white text-base font-medium hover:text-opacity-60 mt-8"
>
Remove logo
</button>
) : (
<button
onClick={handleForward}
className="text-white text-base font-medium hover:text-opacity-60 mt-8"
>
Skip
</button>
)}
</div>
</div>
);
}

2
frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx
View File

@ -203,7 +203,7 @@ export default function LLMPreference({
showToast(`Failed to save LLM settings: ${error}`, "error");
return;
}
navigate(paths.onboarding.customLogo());
navigate(paths.onboarding.userSetup());
};
useEffect(() => {

2
frontend/src/pages/OnboardingFlow/Steps/UserSetup/index.jsx
View File

@ -29,7 +29,7 @@ export default function UserSetup({ setHeader, setForwardBtn, setBackBtn }) {
}
function handleBack() {
navigate(paths.onboarding.customLogo());
navigate(paths.onboarding.llmPreference());
}
useEffect(() => {

2
frontend/src/pages/OnboardingFlow/Steps/index.jsx
View File

@ -3,7 +3,6 @@ import { useState } from "react";
import { isMobile } from "react-device-detect";
import Home from "./Home";
import LLMPreference from "./LLMPreference";
import CustomLogo from "./CustomLogo";
import UserSetup from "./UserSetup";
import DataHandling from "./DataHandling";
import Survey from "./Survey";
@ -12,7 +11,6 @@ import CreateWorkspace from "./CreateWorkspace";
const OnboardingSteps = {
home: Home,
"llm-preference": LLMPreference,
"custom-logo": CustomLogo,
"user-setup": UserSetup,
"data-handling": DataHandling,
survey: Survey,

3
frontend/src/utils/paths.js
View File

@ -23,9 +23,6 @@ export default {
vectorDatabase: () => {
return "/onboarding/vector-database";
},
customLogo: () => {
return "/onboarding/custom-logo";
},
userSetup: () => {
return "/onboarding/user-setup";
},