fix UI when resizing window and add text size customization option

2024-11-14 02:20:12 +01:00 · 2024-05-03 13:45:15 -07:00 · 2024-05-03 13:45:15 -07:00 · 6c619b5f88
commit 6c619b5f88
parent 6d736bcae9
9 changed files with 33 additions and 31 deletions
--- a/embed/README.md
+++ b/embed/README.md
@ -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.
--- a/embed/index.html
+++ b/embed/index.html
@ -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>
--- a/embed/src/App.jsx
+++ b/embed/src/App.jsx
@ -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 && (
--- a/embed/src/components/ChatWindow/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
+++ b/embed/src/components/ChatWindow/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
@ -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)),
                  }}
--- 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}
    >
--- 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 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"
--- 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}
--- 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,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!";
--- a/embed/src/hooks/useScriptAttributes.js
+++ b/embed/src/hooks/useScriptAttributes.js
@ -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"