mirror of
https://github.com/Mintplex-Labs/anything-llm.git
synced 2024-11-14 10:30:10 +01:00
fix UI when resizing window and add text size customization option
This commit is contained in:
shatfield4
parent
6d736bcae9
commit
6c619b5f88
@ -91,6 +91,8 @@ REQUIRED data attributes:
|
||||
|
||||
- `data-window-width` - Set the chat window width in pixels.
|
||||
|
||||
- `data-text-size` - Set the text size of the chats in pixels.
|
||||
|
||||
**Behavior Overrides**
|
||||
|
||||
- `data-open-on-load` — Once loaded, open the chat as default. It can still be closed by the user.
|
||||
|
||||
@ -7,18 +7,5 @@
|
||||
src="/dist/anythingllm-chat-widget.js"> USE THIS SRC FOR DEVELOPMENT SO CHANGES APPEAR!
|
||||
</script>
|
||||
-->
|
||||
|
||||
<!--
|
||||
Paste this script at the bottom of your HTML before the </body> tag.
|
||||
See more style and config options on our docs
|
||||
https://github.com/Mintplex-Labs/anything-llm/tree/master/embed/README.md
|
||||
-->
|
||||
<script
|
||||
data-embed-id="1090945e-1bd1-4714-87f9-707a9a8305b3"
|
||||
data-base-api-url="http://localhost:3001/api/embed"
|
||||
data-window-height="500"
|
||||
data-window-width="1000"
|
||||
src="/dist/anythingllm-chat-widget.js"></script>
|
||||
<!-- AnythingLLM (https://useanything.com) -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -28,19 +28,18 @@ export default function App() {
|
||||
|
||||
const position = embedSettings.position || "bottom-right";
|
||||
const windowHeight = embedSettings.windowHeight
|
||||
? `h-full md:max-h-[${embedSettings.windowHeight}px]`
|
||||
: "h-full md:max-h-[700px]";
|
||||
|
||||
? `md:max-h-[${embedSettings.windowHeight}px]`
|
||||
: "md:max-h-[700px]";
|
||||
const windowWidth = embedSettings.windowWidth
|
||||
? `w-full md:max-w-[${embedSettings.windowWidth}px]`
|
||||
: "w-full md:max-w-[400px]";
|
||||
? `md:max-w-[${embedSettings.windowWidth}px]`
|
||||
: "md:max-w-[400px]";
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head />
|
||||
<div className={`fixed inset-0 z-50 ${isChatOpen ? "block" : "hidden"}`}>
|
||||
<div
|
||||
className={`${windowHeight} ${windowWidth} bg-white md:fixed md:bottom-0 md:right-0 md:mb-4 md:mr-4 md:rounded-2xl md:border md:border-gray-300 md:shadow-[0_4px_14px_rgba(0,0,0,0.25)] ${positionClasses[position]}`}
|
||||
className={`${windowHeight} ${windowWidth} h-full w-full bg-white md:fixed md:bottom-0 md:right-0 md:mb-4 md:mr-4 md:rounded-2xl md:border md:border-gray-300 md:shadow-[0_4px_14px_rgba(0,0,0,0.25)] ${positionClasses[position]}`}
|
||||
id="anything-llm-chat"
|
||||
>
|
||||
{isChatOpen && (
|
||||
|
||||
@ -13,6 +13,11 @@ const HistoricalMessage = forwardRef(
|
||||
{ uuid = v4(), message, role, sources = [], error = false, sentAt },
|
||||
ref
|
||||
) => {
|
||||
console.log("text size", embedderSettings.settings.textSize);
|
||||
const textSize = !!embedderSettings.settings.textSize
|
||||
? `text-[${embedderSettings.settings.textSize}px]`
|
||||
: "text-sm";
|
||||
|
||||
return (
|
||||
<div className="py-[5px]">
|
||||
{role === "assistant" && (
|
||||
@ -61,7 +66,7 @@ const HistoricalMessage = forwardRef(
|
||||
</div>
|
||||
) : (
|
||||
<span
|
||||
className={`whitespace-pre-line font-medium flex flex-col gap-y-1 text-sm leading-[20px]`}
|
||||
className={`whitespace-pre-line font-medium flex flex-col gap-y-1 ${textSize} leading-[20px]`}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: DOMPurify.sanitize(renderMarkdown(message)),
|
||||
}}
|
||||
|
||||
@ -58,7 +58,7 @@ export default function ChatHistory({ settings = {}, history = [] }) {
|
||||
|
||||
return (
|
||||
<div
|
||||
className="pb-[30px] pt-[5px] rounded-lg px-2 h-full gap-y-2 overflow-y-scroll flex flex-col justify-start no-scroll md:max-h-[500px] max-h-[calc(100vh-200px)]"
|
||||
className="pb-[30px] pt-[5px] rounded-lg px-2 h-full gap-y-2 overflow-y-scroll flex flex-col justify-start no-scroll md:max-h-[500px]"
|
||||
id="chat-history"
|
||||
ref={chatHistoryRef}
|
||||
>
|
||||
|
||||
@ -46,7 +46,7 @@ export default function PromptInput({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full absolute left-0 bottom-[25px] z-10 flex justify-center items-center px-5 bg-white">
|
||||
<div className="w-full sticky bottom-0 z-10 flex justify-center items-center px-5 bg-white">
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="flex flex-col gap-y-1 rounded-t-lg w-full items-center justify-center"
|
||||
|
||||
@ -26,6 +26,7 @@ export default function ChatContainer({
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (!message || message === "") return false;
|
||||
|
||||
const prevChatHistory = [
|
||||
@ -39,7 +40,6 @@ export default function ChatContainer({
|
||||
animate: true,
|
||||
},
|
||||
];
|
||||
|
||||
setChatHistory(prevChatHistory);
|
||||
setMessage("");
|
||||
setLoadingResponse(true);
|
||||
@ -72,12 +72,15 @@ export default function ChatContainer({
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
loadingResponse === true && fetchReply();
|
||||
}, [loadingResponse, chatHistory]);
|
||||
|
||||
return (
|
||||
<div className="h-full w-full relative">
|
||||
<div className="h-full w-full flex flex-col">
|
||||
<div className="flex-grow overflow-y-auto">
|
||||
<ChatHistory settings={settings} history={chatHistory} />
|
||||
</div>
|
||||
<PromptInput
|
||||
message={message}
|
||||
submit={handleSubmit}
|
||||
|
||||
@ -32,6 +32,7 @@ export default function ChatWindow({ closeChat, settings, sessionId }) {
|
||||
}
|
||||
|
||||
setEventDelegatorForCodeSnippets();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<ChatWindowHeader
|
||||
@ -41,12 +42,14 @@ export default function ChatWindow({ closeChat, settings, sessionId }) {
|
||||
closeChat={closeChat}
|
||||
setChatHistory={setChatHistory}
|
||||
/>
|
||||
<div className="flex-grow overflow-y-auto">
|
||||
<ChatContainer
|
||||
sessionId={sessionId}
|
||||
settings={settings}
|
||||
knownHistory={chatHistory}
|
||||
/>
|
||||
<div className="-mt-2 pb-6 h-fit gap-y-2 z-10">
|
||||
</div>
|
||||
<div className="mt-4 pb-4 h-fit gap-y-2 z-10">
|
||||
<Sponsor settings={settings} />
|
||||
<ResetChat
|
||||
setChatHistory={setChatHistory}
|
||||
@ -64,6 +67,7 @@ export default function ChatWindow({ closeChat, settings, sessionId }) {
|
||||
function copyCodeSnippet(uuid) {
|
||||
const target = document.querySelector(`[data-code="${uuid}"]`);
|
||||
if (!target) return false;
|
||||
|
||||
const markdown =
|
||||
target.parentElement?.parentElement?.querySelector(
|
||||
"pre:first-of-type"
|
||||
@ -71,6 +75,7 @@ function copyCodeSnippet(uuid) {
|
||||
if (!markdown) return false;
|
||||
|
||||
window.navigator.clipboard.writeText(markdown);
|
||||
|
||||
target.classList.add("text-green-500");
|
||||
const originalText = target.innerHTML;
|
||||
target.innerText = "Copied!";
|
||||
|
||||
@ -25,6 +25,7 @@ const DEFAULT_SETTINGS = {
|
||||
assistantIcon: null, // default assistant icon
|
||||
windowHeight: null, // height of chat window in px
|
||||
windowWidth: null, // width of chat window in px
|
||||
textSize: null, // text size in px
|
||||
|
||||
// behaviors
|
||||
openOnLoad: "off", // or "on"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user