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

more style support

Browse Source 
reopen if chat was last opened
This commit is contained in:
timothycarambat 2024-02-02 13:31:26 -08:00
parent 27381a612c
commit 9fc45daf77
12 changed files with 54 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
embed/README.md
View File

@ -54,7 +54,13 @@ REQUIRED data attributes:
- `data-temperature` — Override the chat model temperature. This must be a valid value for your AnythingLLM LLM provider. If unset it will use the embeds attached workspace model temperature or the system setting. - `data-temperature` — Override the chat model temperature. This must be a valid value for your AnythingLLM LLM provider. If unset it will use the embeds attached workspace model temperature or the system setting.
**Style Overrides** **Style Overrides**
- `data-chat-icon` — The chat bubble icon show when chat is closed. Options are `plus`, `chat-circle-dots`, `headset`, `binoculars`, `magnifying`, `magic`. - `data-chat-icon` — The chat bubble icon show when chat is closed. Options are `plus`, `chatCircle`, `support`, `search2`, `search`, `magic`.
- `data-button-color` — The chat bubble background color shown when chat is closed. Value must be hex color code.
- `data-user-bg-color` — The background color of the user chat bubbles when chatting. Value must be hex color code.
- `data-assistant-bg-color` — The background color of the assistant response chat bubbles when chatting. Value must be hex color code.
- `data-brand-image-url` — URL to image that will be show at the top of the chat when chat is open. - `data-brand-image-url` — URL to image that will be show at the top of the chat when chat is open.

8
embed/index.html
View File

@ -3,9 +3,11 @@
<body> <body>
<h1>This is an example testing page for embedded AnythingLLM.</h1> <h1>This is an example testing page for embedded AnythingLLM.</h1>
<!-- <script data-embed-id="example-uuid" data-base-api-url='http://localhost:3001/api/embed' data-open-on-load="on" <!--
src="/dist/anythingllm-chat-widget.js"> <script data-embed-id="example-uuid" data-base-api-url='http://localhost:3001/api/embed' data-open-on-load="on"
</script> --> src="/dist/anythingllm-chat-widget.js"> USE THIS SRC FOR DEVELOPMENT SO CHANGES APPEAR!
</script>
-->
</body> </body>
</html> </html>

6
embed/src/App.jsx
View File

@ -12,7 +12,9 @@ export default function App() {
const sessionId = useSessionId(); const sessionId = useSessionId();
useEffect(() => { useEffect(() => {
toggleOpenChat(embedSettings.openOnLoad === "on"); if (embedSettings.openOnLoad === "on") {
toggleOpenChat(true);
}
}, [embedSettings.loaded]); }, [embedSettings.loaded]);
if (!embedSettings.loaded) return null; if (!embedSettings.loaded) return null;
@ -41,7 +43,7 @@ export default function App() {
<OpenButton <OpenButton
settings={embedSettings} settings={embedSettings}
isOpen={isChatOpen} isOpen={isChatOpen}
toggleOpen={toggleOpenChat} toggleOpen={() => toggleOpenChat(true)}
/> />
</div> </div>
</div> </div>

6
embed/src/components/ChatWindow/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
View File

@ -2,7 +2,7 @@ import React, { memo, forwardRef } from "react";
import { Warning } from "@phosphor-icons/react"; import { Warning } from "@phosphor-icons/react";
// import Actions from "./Actions"; // import Actions from "./Actions";
import renderMarkdown from "@/utils/chat/markdown"; import renderMarkdown from "@/utils/chat/markdown";
import { AI_BACKGROUND_COLOR, USER_BACKGROUND_COLOR } from "@/utils/constants"; import { embedderSettings } from "@/main";
import { v4 } from "uuid"; import { v4 } from "uuid";
import createDOMPurify from "dompurify"; import createDOMPurify from "dompurify";
@ -17,8 +17,8 @@ const HistoricalMessage = forwardRef(
error error
? "bg-red-200" ? "bg-red-200"
: role === "user" : role === "user"
? USER_BACKGROUND_COLOR ? embedderSettings.USER_BACKGROUND_COLOR
: AI_BACKGROUND_COLOR : embedderSettings.AI_BACKGROUND_COLOR
}`} }`}
> >
<div className={`py-2 px-2 w-full flex flex-col`}> <div className={`py-2 px-2 w-full flex flex-col`}>

6
embed/src/components/ChatWindow/ChatContainer/ChatHistory/PromptReply/index.jsx
View File

@ -1,7 +1,7 @@
import { forwardRef, memo } from "react"; import { forwardRef, memo } from "react";
import { Warning } from "@phosphor-icons/react"; import { Warning } from "@phosphor-icons/react";
import renderMarkdown from "@/utils/chat/markdown"; import renderMarkdown from "@/utils/chat/markdown";
import { AI_BACKGROUND_COLOR } from "@/utils/constants"; import { embedderSettings } from "@/main";
const PromptReply = forwardRef( const PromptReply = forwardRef(
({ uuid, reply, pending, error, sources = [] }, ref) => { ({ uuid, reply, pending, error, sources = [] }, ref) => {
@ -11,7 +11,7 @@ const PromptReply = forwardRef(
return ( return (
<div <div
ref={ref} ref={ref}
className={`flex justify-center items-end rounded-lg w-full ${AI_BACKGROUND_COLOR}`} className={`flex justify-center items-end rounded-lg w-full ${embedderSettings.AI_BACKGROUND_COLOR}`}
> >
<div className="py-2 px-2 w-full flex flex-col"> <div className="py-2 px-2 w-full flex flex-col">
<div className="flex gap-x-5"> <div className="flex gap-x-5">
@ -44,7 +44,7 @@ const PromptReply = forwardRef(
<div <div
key={uuid} key={uuid}
ref={ref} ref={ref}
className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`} className={`flex justify-center items-end w-full ${embedderSettings.AI_BACKGROUND_COLOR}`}
> >
<div className="py-2 px-2 w-full flex flex-col"> <div className="py-2 px-2 w-full flex flex-col">
<div className="flex gap-x-5"> <div className="flex gap-x-5">

8
embed/src/components/Head.jsx
View File

@ -159,14 +159,6 @@ const customCss = `
.bg-black-900 { .bg-black-900 {
background: #141414; background: #141414;
} }
.bg-historical-msg-system {
background: #2563eb;
}
.bg-historical-msg-user {
background: #2C2F35;
}
`; `;
export default function Head() { export default function Head() {

10
embed/src/components/OpenButton/index.jsx
View File

@ -9,10 +9,10 @@ import {
const CHAT_ICONS = { const CHAT_ICONS = {
plus: Plus, plus: Plus,
"chat-circle-dots": ChatCircleDots, chatBubble: ChatCircleDots,
headset: Headset, support: Headset,
binoculars: Binoculars, search2: Binoculars,
magnifying: MagnifyingGlass, search: MagnifyingGlass,
magic: MagicWand, magic: MagicWand,
}; };
@ -24,7 +24,7 @@ export default function OpenButton({ settings, isOpen, toggleOpen }) {
return ( return (
<button <button
onClick={toggleOpen} onClick={toggleOpen}
className="flex items-center justify-center p-4 rounded-full bg-blue-500 text-white text-2xl" className={`flex items-center justify-center p-4 rounded-full bg-[${settings.buttonColor}] text-white text-2xl`}
aria-label="Toggle Menu" aria-label="Toggle Menu"
> >
<ChatIcon className="text-white" /> <ChatIcon className="text-white" />

14
embed/src/hooks/useOpen.js
View File

@ -1,8 +1,16 @@
import { CHAT_UI_REOPEN } from "@/utils/constants";
import { useState } from "react"; import { useState } from "react";
export default function useOpenChat() { export default function useOpenChat() {
const [isOpen, setOpen] = useState(false); const [isOpen, setOpen] = useState(
!!window?.localStorage?.getItem(CHAT_UI_REOPEN) || false
);
//TODO: Detect if chat was previously open?? function toggleOpenChat(newValue) {
return { isChatOpen: isOpen, toggleOpenChat: setOpen }; if (newValue === true) window.localStorage.setItem(CHAT_UI_REOPEN, "1");
if (newValue === false) window.localStorage.removeItem(CHAT_UI_REOPEN);
setOpen(newValue);
}
return { isChatOpen: isOpen, toggleOpenChat };
} }

3
embed/src/hooks/useScriptAttributes.js
View File

@ -14,6 +14,9 @@ const DEFAULT_SETTINGS = {
chatIcon: "plus", chatIcon: "plus",
brandImageUrl: null, // will be forced into 100x50px container brandImageUrl: null, // will be forced into 100x50px container
greeting: null, // empty chat window greeting. greeting: null, // empty chat window greeting.
buttonColor: "#262626", // must be hex color code
userBgColor: "#2C2F35", // user text bubble color
assistantBgColor: "#2563eb", // assistant text bubble color
// behaviors // behaviors
openOnLoad: "off", // or "on" openOnLoad: "off", // or "on"

8
embed/src/main.jsx
View File

@ -11,6 +11,12 @@ root.render(
</React.StrictMode> </React.StrictMode>
); );
const scriptSettings = Object.assign(
{},
document?.currentScript?.dataset || {}
);
export const embedderSettings = { export const embedderSettings = {
settings: Object.assign({}, document?.currentScript?.dataset || {}), settings: scriptSettings,
USER_BACKGROUND_COLOR: `bg-[${scriptSettings?.userBgColor ?? "#2C2F35"}]`,
AI_BACKGROUND_COLOR: `bg-[${scriptSettings?.assistantBgColor ?? "#2563eb"}]`,
}; };

5
embed/src/utils/constants.js
View File

@ -1,4 +1 @@
// export const USER_BACKGROUND_COLOR = "bg-gray-700"; export const CHAT_UI_REOPEN = "___anythingllm-chat-widget-open___";
// export const AI_BACKGROUND_COLOR = "bg-blue-600";
export const USER_BACKGROUND_COLOR = "bg-historical-msg-user";
export const AI_BACKGROUND_COLOR = "bg-historical-msg-system";

10
frontend/public/embed/anythingllm-chat-widget.min.js vendored
View File

File diff suppressed because one or more lines are too long