llmasaservice-ui 0.6.3 → 0.6.4

package/dist/index.js

@@ -212,6 +212,7 @@ var ChatPanel = ({
   const [lastPrompt, setLastPrompt] = (0, import_react3.useState)(null);
   const [hasScroll, setHasScroll] = (0, import_react3.useState)(false);
   const bottomRef = (0, import_react3.useRef)(null);
+  const bottomPanelRef = (0, import_react3.useRef)(null);
   const [isAtBottom, setIsAtBottom] = (0, import_react3.useState)(true);
   const [isEmailModalOpen, setIsEmailModalOpen] = (0, import_react3.useState)(false);
   const [isCallToActionModalOpen, setIsCallToActionModalOpen] = (0, import_react3.useState)(false);
@@ -315,12 +316,18 @@ var ChatPanel = ({
     var _a, _b;
     if (scrollToEnd) {
       if (window.top !== window.self) {
-        (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth", block: "end" });
         const frameElement = window.frameElement;
         if (frameElement) {
-          window.parent.scrollTo({
-            top: frameElement.getBoundingClientRect().top + window.scrollY,
-            behavior: "smooth"
+          const frameRect = frameElement.getBoundingClientRect();
+          if (frameRect.bottom <= window.innerHeight) {
+            window.parent.scrollTo({
+              top: frameRect.bottom + window.scrollY - window.innerHeight,
+              behavior: "smooth"
+            });
+          }
+          (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({
+            behavior: "smooth",
+            block: "end"
           });
         }
       } else {
@@ -1052,7 +1059,7 @@ var ChatPanel = ({
       },
       "llmasaservice.io"
     )))
-  ));
+  ), /* @__PURE__ */ import_react3.default.createElement("div", { ref: bottomPanelRef }));
 };
 var ChatPanel_default = ChatPanel;
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -179,6 +179,7 @@ var ChatPanel = ({
   const [lastPrompt, setLastPrompt] = useState3(null);
   const [hasScroll, setHasScroll] = useState3(false);
   const bottomRef = useRef(null);
+  const bottomPanelRef = useRef(null);
   const [isAtBottom, setIsAtBottom] = useState3(true);
   const [isEmailModalOpen, setIsEmailModalOpen] = useState3(false);
   const [isCallToActionModalOpen, setIsCallToActionModalOpen] = useState3(false);
@@ -282,12 +283,18 @@ var ChatPanel = ({
     var _a, _b;
     if (scrollToEnd) {
       if (window.top !== window.self) {
-        (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth", block: "end" });
         const frameElement = window.frameElement;
         if (frameElement) {
-          window.parent.scrollTo({
-            top: frameElement.getBoundingClientRect().top + window.scrollY,
-            behavior: "smooth"
+          const frameRect = frameElement.getBoundingClientRect();
+          if (frameRect.bottom <= window.innerHeight) {
+            window.parent.scrollTo({
+              top: frameRect.bottom + window.scrollY - window.innerHeight,
+              behavior: "smooth"
+            });
+          }
+          (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({
+            behavior: "smooth",
+            block: "end"
           });
         }
       } else {
@@ -1019,7 +1026,7 @@ var ChatPanel = ({
       },
       "llmasaservice.io"
     )))
-  ));
+  ), /* @__PURE__ */ React3.createElement("div", { ref: bottomPanelRef }));
 };
 var ChatPanel_default = ChatPanel;
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "llmasaservice-ui",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "Prebuilt UI components for LLMAsAService.io",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/ChatPanel.tsx

@@ -116,6 +116,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   const [lastPrompt, setLastPrompt] = useState<string | null>(null);
   const [hasScroll, setHasScroll] = useState(false);
   const bottomRef = useRef<HTMLDivElement | null>(null);
+  const bottomPanelRef = useRef<HTMLDivElement | null>(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
   const [isEmailModalOpen, setIsEmailModalOpen] = useState(false);
   const [isCallToActionModalOpen, setIsCallToActionModalOpen] = useState(false);
@@ -248,16 +249,32 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
 
   useEffect(() => {
     if (scrollToEnd) {
-      
       if (window.top !== window.self) {
         // If the ChatPanel is within an iframe
-        bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
         const frameElement = window.frameElement;
         if (frameElement) {
-          window.parent.scrollTo({
-            top: frameElement.getBoundingClientRect().top + window.scrollY,
+          const frameRect = frameElement.getBoundingClientRect();
+          if (frameRect.bottom <= window.innerHeight) {
+            // Scroll the parent window to position the iframe at the bottom of the screen
+            window.parent.scrollTo({
+              top: frameRect.bottom + window.scrollY - window.innerHeight,
+              behavior: "smooth",
+            });
+          }
+
+          bottomRef.current?.scrollIntoView({
             behavior: "smooth",
+            block: "end",
           });
+
+          /*
+          // Scroll the content within the iframe
+          setTimeout(() => {
+            bottomRef.current?.scrollIntoView({
+              behavior: "smooth",
+              block: "end",
+            });
+          }, 300);*/
         }
       } else {
         // If the ChatPanel is not within an iframe
@@ -1055,6 +1072,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
           </div>
         )}
       </div>
+      <div ref={bottomPanelRef} />
     </>
   );
 };