From 4249ec34d9232549ecf7f353af44b172ee5075fc Mon Sep 17 00:00:00 2001 From: shatfield4 Date: Tue, 15 Aug 2023 12:06:44 -0700 Subject: [PATCH 01/11] added ui for custom welcome messages and added label for custom logo in admin settings --- frontend/src/pages/Admin/Appearance/index.jsx | 156 ++++++++++++++++-- 1 file changed, 143 insertions(+), 13 deletions(-) diff --git a/frontend/src/pages/Admin/Appearance/index.jsx b/frontend/src/pages/Admin/Appearance/index.jsx index e9dc5148620..969e992f693 100644 --- a/frontend/src/pages/Admin/Appearance/index.jsx +++ b/frontend/src/pages/Admin/Appearance/index.jsx @@ -7,12 +7,27 @@ import AnythingLLMDark from "../../../media/logo/anything-llm-dark.png"; import usePrefersDarkMode from "../../../hooks/usePrefersDarkMode"; import useLogo from "../../../hooks/useLogo"; import System from "../../../models/system"; +import { X } from "react-feather"; export default function Appearance() { const { logo: _initLogo } = useLogo(); const [logo, setLogo] = useState(""); const prefersDarkMode = usePrefersDarkMode(); const [errorMsg, setErrorMsg] = useState(""); + const [messages, setMessages] = useState([ + { + user: "", + response: "Welcome to AnythingLLM, AnythingLLM is an open-source AI tool by Mintplex Labs that turns anything into a trained chatbot you can query and chat with. AnythingLLM is a BYOK (bring-your-own-keys) software so there is no subscription, fee, or charges for this software outside of the services you want to use with it.", + }, + { + user: "", + response: "AnythingLLM is the easiest way to put powerful AI products like OpenAi, GPT-4, LangChain, PineconeDB, ChromaDB, and other services together in a neat package with no fuss to increase your productivity by 100x.", + }, + { + user: "How do I get started?!", + response: "", + }, + ]); useEffect(() => { async function setInitLogo() { @@ -62,6 +77,77 @@ export default function Appearance() { window.location.reload(); }; + const addMessage = (type) => { + if (type === "user") { + setMessages([...messages, { user: "Double click to edit...", response: "" }]); + } else { + setMessages([...messages, { user: "", response: "Double click to edit..." }]); + } + }; + + const removeMessage = (index) => { + setMessages(messages.filter((_, i) => i !== index)); + }; + + const handleMessageChange = (index, type, value) => { + const newMessages = [...messages]; + newMessages[index][type] = value; + setMessages(newMessages); + }; + + const handleMessageSave = () => { + console.log(messages); + }; + + const ChatBubble = ({ message, index, type }) => { + const [isEditing, setIsEditing] = useState(false); + const [tempMessage, setTempMessage] = useState(message[type]); + const isUser = type === 'user'; + + return ( +
+ {isUser && ( + + )} +
setIsEditing(true)} + > + {isEditing ? ( + setTempMessage(e.target.value)} + onBlur={() => { + handleMessageChange(index, type, tempMessage); + setIsEditing(false); + }} + autoFocus + /> + ) : ( + tempMessage &&

+ {tempMessage} +

+ )} +
+ {!isUser && ( + + )} +
+ ); + }; + + + return (
{!isMobile && } @@ -79,18 +165,22 @@ export default function Appearance() { Customize the appearance settings of your platform.

- -
- Uploaded Logo - (e.target.src = prefersDarkMode - ? AnythingLLMLight - : AnythingLLMDark) - } - /> +
+
+

+ Custom Logo +

+

+ Change the logo that appears in the sidebar. +

+
+
+ Uploaded Logo (e.target.src = defaultLogo)} + />
@@ -115,7 +205,47 @@ export default function Appearance() {
- +
+
+
+

+ Custom Messages +

+

+ Change the default messages that are displayed to the users. +

+
+
+ {messages.map((message, index) => ( +
+ {message.user && } + {message.response && } +
+ ))} +
+ + +
+
+
+ +
+
{errorMsg && (
{errorMsg} From 3674a0a90ef3a958432eebc848dc6e3402934fcb Mon Sep 17 00:00:00 2001 From: shatfield4 Date: Tue, 15 Aug 2023 12:07:09 -0700 Subject: [PATCH 02/11] linting --- frontend/src/pages/Admin/Appearance/index.jsx | 96 ++++++++++++------- 1 file changed, 61 insertions(+), 35 deletions(-) diff --git a/frontend/src/pages/Admin/Appearance/index.jsx b/frontend/src/pages/Admin/Appearance/index.jsx index 969e992f693..a923908da14 100644 --- a/frontend/src/pages/Admin/Appearance/index.jsx +++ b/frontend/src/pages/Admin/Appearance/index.jsx @@ -17,11 +17,13 @@ export default function Appearance() { const [messages, setMessages] = useState([ { user: "", - response: "Welcome to AnythingLLM, AnythingLLM is an open-source AI tool by Mintplex Labs that turns anything into a trained chatbot you can query and chat with. AnythingLLM is a BYOK (bring-your-own-keys) software so there is no subscription, fee, or charges for this software outside of the services you want to use with it.", + response: + "Welcome to AnythingLLM, AnythingLLM is an open-source AI tool by Mintplex Labs that turns anything into a trained chatbot you can query and chat with. AnythingLLM is a BYOK (bring-your-own-keys) software so there is no subscription, fee, or charges for this software outside of the services you want to use with it.", }, { user: "", - response: "AnythingLLM is the easiest way to put powerful AI products like OpenAi, GPT-4, LangChain, PineconeDB, ChromaDB, and other services together in a neat package with no fuss to increase your productivity by 100x.", + response: + "AnythingLLM is the easiest way to put powerful AI products like OpenAi, GPT-4, LangChain, PineconeDB, ChromaDB, and other services together in a neat package with no fuss to increase your productivity by 100x.", }, { user: "How do I get started?!", @@ -79,9 +81,15 @@ export default function Appearance() { const addMessage = (type) => { if (type === "user") { - setMessages([...messages, { user: "Double click to edit...", response: "" }]); + setMessages([ + ...messages, + { user: "Double click to edit...", response: "" }, + ]); } else { - setMessages([...messages, { user: "", response: "Double click to edit..." }]); + setMessages([ + ...messages, + { user: "", response: "Double click to edit..." }, + ]); } }; @@ -102,10 +110,14 @@ export default function Appearance() { const ChatBubble = ({ message, index, type }) => { const [isEditing, setIsEditing] = useState(false); const [tempMessage, setTempMessage] = useState(message[type]); - const isUser = type === 'user'; + const isUser = type === "user"; return ( -
+
{isUser && ( -
-
- Upload your logo. Recommended size: 800x200. +
+
+ + +
+
+ Upload your logo. Recommended size: 800x200. +
-

@@ -218,8 +236,16 @@ export default function Appearance() {
{messages.map((message, index) => (
- {message.user && } - {message.response && } + {message.user && ( + + )} + {message.response && ( + + )}
))}
From 4ab4dc724e5b89cf202905657802866c8daa3760 Mon Sep 17 00:00:00 2001 From: shatfield4 Date: Tue, 15 Aug 2023 12:11:03 -0700 Subject: [PATCH 03/11] fixing img to use light/dark modes --- frontend/src/pages/Admin/Appearance/index.jsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/Admin/Appearance/index.jsx b/frontend/src/pages/Admin/Appearance/index.jsx index a923908da14..6bb4421743d 100644 --- a/frontend/src/pages/Admin/Appearance/index.jsx +++ b/frontend/src/pages/Admin/Appearance/index.jsx @@ -197,9 +197,12 @@ export default function Appearance() { src={logo} alt="Uploaded Logo" className="w-48 h-48 object-contain mr-6" - onError={(e) => (e.target.src = defaultLogo)} + onError={(e) => + (e.target.src = prefersDarkMode + ? AnythingLLMLight + : AnythingLLMDark) + } /> -