Mintplex-Labs · timothycarambat · May 8, 2024 · May 2, 2024 · May 3, 2024 · May 3, 2024
diff --git a/embed/README.md b/embed/README.md
@@ -87,6 +87,12 @@ REQUIRED data attributes:
 
 - `data-assistant-icon` - Set the icon of the chat assistant.
 
+- `data-window-height` - Set the chat window height. **must include CSS suffix:** `px`,`%`,`rem`
+
+- `data-window-width` - Set the chat window width. **must include CSS suffix:** `px`,`%`,`rem`
+
+- `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.

diff --git a/embed/index.html b/embed/index.html
@@ -1,5 +1,6 @@
 <!doctype html>
 <html lang="en">
+
   <body>
     <h1>This is an example testing page for embedded AnythingLLM.</h1>
     <!--
@@ -8,4 +9,5 @@ <h1>This is an example testing page for embedded AnythingLLM.</h1>
       </script>
     -->
   </body>
-</html>
+
+</html>
diff --git a/embed/src/App.jsx b/embed/src/App.jsx
@@ -27,13 +27,19 @@ export default function App() {
   };
 
   const position = embedSettings.position || "bottom-right";
+  const windowWidth = embedSettings.windowWidth
+    ? `md:max-w-[${embedSettings.windowWidth}]`
+    : "md:max-w-[400px]";
+  const windowHeight = embedSettings.windowHeight
+    ? `md:max-h-[${embedSettings.windowHeight}]`
+    : "md:max-h-[700px]";
 
   return (
     <>
       <Head />
       <div className={`fixed inset-0 z-50 ${isChatOpen ? "block" : "hidden"}`}>
         <div
-          className={`w-full h-full bg-white md:max-w-[400px] md:max-h-[700px] 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 && (

diff --git a/embed/src/components/ChatWindow/ChatContainer/ChatHistory/HistoricalMessage/index.jsx b/embed/src/components/ChatWindow/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
@@ -13,6 +13,10 @@ const HistoricalMessage = forwardRef(
     { uuid = v4(), message, role, sources = [], error = false, sentAt },
     ref
   ) => {
+    const textSize = !!embedderSettings.settings.textSize
+      ? `text-[${embedderSettings.settings.textSize}px]`
+      : "text-sm";
+
     return (
       <div className="py-[5px]">
         {role === "assistant" && (
@@ -61,7 +65,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)),
                   }}

diff --git a/embed/src/components/ChatWindow/ChatContainer/ChatHistory/index.jsx b/embed/src/components/ChatWindow/ChatContainer/ChatHistory/index.jsx
@@ -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}
     >

diff --git a/embed/src/components/ChatWindow/ChatContainer/PromptInput/index.jsx b/embed/src/components/ChatWindow/ChatContainer/PromptInput/index.jsx
@@ -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">
+    <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"

diff --git a/embed/src/components/ChatWindow/ChatContainer/index.jsx b/embed/src/components/ChatWindow/ChatContainer/index.jsx
@@ -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">
-      <ChatHistory settings={settings} history={chatHistory} />
+    <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}

diff --git a/embed/src/components/ChatWindow/index.jsx b/embed/src/components/ChatWindow/index.jsx
@@ -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}
       />
-      <ChatContainer
-        sessionId={sessionId}
-        settings={settings}
-        knownHistory={chatHistory}
-      />
-      <div className="-mt-2 pb-6 h-fit gap-y-2 z-10">
+      <div className="flex-grow overflow-y-auto">
+        <ChatContainer
+          sessionId={sessionId}
+          settings={settings}
+          knownHistory={chatHistory}
+        />
+      </div>
+      <div className="mt-4 pb-4 h-fit gap-y-2 z-10">
         <Sponsor settings={settings} />
         <ResetChat
           setChatHistory={setChatHistory}
@@ -64,13 +67,15 @@ 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"
     )?.innerText;
   if (!markdown) return false;
 
   window.navigator.clipboard.writeText(markdown);
+
   target.classList.add("text-green-500");
   const originalText = target.innerHTML;
   target.innerText = "Copied!";

diff --git a/embed/src/hooks/useScriptAttributes.js b/embed/src/hooks/useScriptAttributes.js
@@ -23,6 +23,9 @@ const DEFAULT_SETTINGS = {
   position: "bottom-right", // position of chat button/window
   assistantName: "AnythingLLM Chat Assistant", // default assistant name
   assistantIcon: null, // default assistant icon
+  windowHeight: null, // height of chat window in number:css-prefix
+  windowWidth: null, // width of chat window in number:css-prefix
+  textSize: null, // text size in px (number only)
 
   // behaviors
   openOnLoad: "off", // or "on"

diff --git a/frontend/public/embed/anythingllm-chat-widget.min.js b/frontend/public/embed/anythingllm-chat-widget.min.js