timothycarambat
parent
27381a612c
commit
9fc45daf77
|
|
@ -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.
|
||||
|
||||
**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.
|
||||
|
||||
|
|
|
|||
|
|
@ -3,9 +3,11 @@
|
|||
|
||||
<body>
|
||||
<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> -->
|
||||
<!--
|
||||
<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"> USE THIS SRC FOR DEVELOPMENT SO CHANGES APPEAR!
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -12,7 +12,9 @@ export default function App() {
|
|||
const sessionId = useSessionId();
|
||||
|
||||
useEffect(() => {
|
||||
toggleOpenChat(embedSettings.openOnLoad === "on");
|
||||
if (embedSettings.openOnLoad === "on") {
|
||||
toggleOpenChat(true);
|
||||
}
|
||||
}, [embedSettings.loaded]);
|
||||
|
||||
if (!embedSettings.loaded) return null;
|
||||
|
|
@ -41,7 +43,7 @@ export default function App() {
|
|||
<OpenButton
|
||||
settings={embedSettings}
|
||||
isOpen={isChatOpen}
|
||||
toggleOpen={toggleOpenChat}
|
||||
toggleOpen={() => toggleOpenChat(true)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, { memo, forwardRef } from "react";
|
|||
import { Warning } from "@phosphor-icons/react";
|
||||
// import Actions from "./Actions";
|
||||
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 createDOMPurify from "dompurify";
|
||||
|
||||
|
|
@ -17,8 +17,8 @@ const HistoricalMessage = forwardRef(
|
|||
error
|
||||
? "bg-red-200"
|
||||
: role === "user"
|
||||
? USER_BACKGROUND_COLOR
|
||||
: AI_BACKGROUND_COLOR
|
||||
? embedderSettings.USER_BACKGROUND_COLOR
|
||||
: embedderSettings.AI_BACKGROUND_COLOR
|
||||
}`}
|
||||
>
|
||||
<div className={`py-2 px-2 w-full flex flex-col`}>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { forwardRef, memo } from "react";
|
||||
import { Warning } from "@phosphor-icons/react";
|
||||
import renderMarkdown from "@/utils/chat/markdown";
|
||||
import { AI_BACKGROUND_COLOR } from "@/utils/constants";
|
||||
import { embedderSettings } from "@/main";
|
||||
|
||||
const PromptReply = forwardRef(
|
||||
({ uuid, reply, pending, error, sources = [] }, ref) => {
|
||||
|
|
@ -11,7 +11,7 @@ const PromptReply = forwardRef(
|
|||
return (
|
||||
<div
|
||||
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="flex gap-x-5">
|
||||
|
|
@ -44,7 +44,7 @@ const PromptReply = forwardRef(
|
|||
<div
|
||||
key={uuid}
|
||||
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="flex gap-x-5">
|
||||
|
|
|
|||
|
|
@ -159,14 +159,6 @@ const customCss = `
|
|||
.bg-black-900 {
|
||||
background: #141414;
|
||||
}
|
||||
|
||||
.bg-historical-msg-system {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.bg-historical-msg-user {
|
||||
background: #2C2F35;
|
||||
}
|
||||
`;
|
||||
|
||||
export default function Head() {
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@ import {
|
|||
|
||||
const CHAT_ICONS = {
|
||||
plus: Plus,
|
||||
"chat-circle-dots": ChatCircleDots,
|
||||
headset: Headset,
|
||||
binoculars: Binoculars,
|
||||
magnifying: MagnifyingGlass,
|
||||
chatBubble: ChatCircleDots,
|
||||
support: Headset,
|
||||
search2: Binoculars,
|
||||
search: MagnifyingGlass,
|
||||
magic: MagicWand,
|
||||
};
|
||||
|
||||
|
|
@ -24,7 +24,7 @@ export default function OpenButton({ settings, isOpen, toggleOpen }) {
|
|||
return (
|
||||
<button
|
||||
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"
|
||||
>
|
||||
<ChatIcon className="text-white" />
|
||||
|
|
|
|||
|
|
@ -1,8 +1,16 @@
|
|||
import { CHAT_UI_REOPEN } from "@/utils/constants";
|
||||
import { useState } from "react";
|
||||
|
||||
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??
|
||||
return { isChatOpen: isOpen, toggleOpenChat: setOpen };
|
||||
function toggleOpenChat(newValue) {
|
||||
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 };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,9 @@ const DEFAULT_SETTINGS = {
|
|||
chatIcon: "plus",
|
||||
brandImageUrl: null, // will be forced into 100x50px container
|
||||
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
|
||||
openOnLoad: "off", // or "on"
|
||||
|
|
|
|||
|
|
@ -11,6 +11,12 @@ root.render(
|
|||
</React.StrictMode>
|
||||
);
|
||||
|
||||
const scriptSettings = Object.assign(
|
||||
{},
|
||||
document?.currentScript?.dataset || {}
|
||||
);
|
||||
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"}]`,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1 @@
|
|||
// export const USER_BACKGROUND_COLOR = "bg-gray-700";
|
||||
// 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";
|
||||
export const CHAT_UI_REOPEN = "___anythingllm-chat-widget-open___";
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue