Petals banner (#498)

* Petals banner * Petals banner * fiw warning
bit-gpt · Nov 7, 2023 · e00150f · e00150f
1 parent 6bea21d
commit e00150f
Show file tree

Hide file tree

Showing 9 changed files with 112 additions and 52 deletions.
diff --git a/src/modules/prem-chat/components/Header.tsx b/src/modules/prem-chat/components/Header.tsx
@@ -1,52 +1,63 @@
 import hamburgerMenu from "assets/images/hamburger-menu.svg";
 import setting from "assets/images/setting.svg";
 import WarningModal from "modules/service/components/WarningModal";
-import { useState } from "react";
+import { type ForwardedRef, forwardRef, useState } from "react";
 import WarningIcon from "shared/components/WarningIcon";
 import type { HeaderProps } from "shared/types";
 
-const Header = ({ setRightSidebar, hamburgerMenuOpen, setHamburgerMenu, title }: HeaderProps) => {
-  const [open, setIsOpen] = useState(false);
+import PetalsBanner from "../../../shared/components/PetalsBanner";
 
-  const closeModal = () => {
-    setIsOpen(false);
-  };
+const Header = forwardRef(
+  (
+    { setRightSidebar, hamburgerMenuOpen, setHamburgerMenu, title, isPetals = false }: HeaderProps,
+    ref: ForwardedRef<HTMLInputElement>,
+  ) => {
+    const [open, setIsOpen] = useState(false);
 
-  const openModal = () => {
-    setIsOpen(true);
-  };
+    const closeModal = () => {
+      setIsOpen(false);
+    };
 
-  return (
-    <>
-      <div className="md:border-b border-light w-full h-[77px] py-3 flex sticky bg-grey-900 z-[11] top-0">
-        <div className="max-md:w-full flex md:justify-center header__center max-md:items-center">
-          <button
-            onClick={() => setHamburgerMenu(!hamburgerMenuOpen)}
-            className="md:hidden ml-5 w-10 h-10"
-          >
-            <img src={hamburgerMenu} alt="msg" width={22} height={22} className="mx-auto" />
-          </button>
-          <h1 className="flex items-center text-white md:text-xl text-md  mx-[18px]">{title}</h1>
-        </div>
-        <div className="md:border-l border-light md:pl-6 flex items-center ml-auto max-w-max w-full md:absolute md:right-0">
-          <button type="button" onClick={openModal} className="share-chat__btn">
-            Share Chat
-          </button>
-          <button onClick={() => setRightSidebar(true)} className="setting__btn" type="button">
-            <img src={setting} alt="msg" width={22} height={22} />
-          </button>
+    const openModal = () => {
+      setIsOpen(true);
+    };
+
+    return (
+      <>
+        {isPetals ? <PetalsBanner /> : null}
+        <div
+          className="md:border-b border-light w-full h-[77px] py-3 flex sticky bg-grey-900 z-[11] top-0"
+          ref={ref}
+        >
+          <div className="max-md:w-full flex md:justify-center header__center max-md:items-center">
+            <button
+              onClick={() => setHamburgerMenu(!hamburgerMenuOpen)}
+              className="md:hidden ml-5 w-10 h-10"
+            >
+              <img src={hamburgerMenu} alt="msg" width={22} height={22} className="mx-auto" />
+            </button>
+            <h1 className="flex items-center text-white md:text-xl text-md  mx-[18px]">{title}</h1>
+          </div>
+          <div className="md:border-l border-light md:pl-6 flex items-center ml-auto max-w-max w-full md:absolute md:right-0">
+            <button type="button" onClick={openModal} className="share-chat__btn">
+              Share Chat
+            </button>
+            <button onClick={() => setRightSidebar(true)} className="setting__btn" type="button">
+              <img src={setting} alt="msg" width={22} height={22} />
+            </button>
+          </div>
         </div>
-      </div>
-      <WarningModal
-        description="Share Chat is not available yet"
-        title="Coming Soon"
-        isOpen={open}
-        onCancel={closeModal}
-        onOk={closeModal}
-        icon={<WarningIcon className="w-32 h-32" />}
-      />
-    </>
-  );
-};
+        <WarningModal
+          description="Share Chat is not available yet"
+          title="Coming Soon"
+          isOpen={open}
+          onCancel={closeModal}
+          onOk={closeModal}
+          icon={<WarningIcon className="w-32 h-32" />}
+        />
+      </>
+    );
+  },
+);
 
 export default Header;
diff --git a/src/modules/prem-chat/components/PremChat.tsx b/src/modules/prem-chat/components/PremChat.tsx
@@ -25,6 +25,7 @@ function PremChat() {
       serviceName={service?.name ?? ""}
       serviceId={serviceId!}
       serviceType={serviceType!}
+      isPetals={service?.petals ?? false}
     />
   );
 }

diff --git a/src/modules/prem-chat/components/PremChatContainer.tsx b/src/modules/prem-chat/components/PremChatContainer.tsx
@@ -19,6 +19,7 @@ const PremChatContainer = ({
   serviceId,
   serviceType,
   serviceName,
+  isPetals,
 }: PremChatContainerProps) => {
   const model = serviceId;
   const [rightSidebar, setRightSidebar] = useState(false);
@@ -27,6 +28,8 @@ const PremChatContainer = ({
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const { height } = useWindowSize();
   const responsiveMatches = useMediaQuery("(min-width: 768px)");
+  const headerRef = useRef(null);
+  const [headerVisibleHeight, setHeaderVisibleHeight] = useState(0);
 
   const {
     chatMessages,
@@ -41,6 +44,22 @@ const PremChatContainer = ({
     abort,
   } = usePremChatStream(serviceId, serviceType, chatId || null);
 
+  const handleScroll = () => {
+    if (headerRef.current) {
+      const rect = (headerRef.current as any).getBoundingClientRect();
+      const windowHeight = window.innerHeight;
+      const visibleHeight = Math.min(rect.bottom, windowHeight) - Math.max(rect.top, 0);
+      setHeaderVisibleHeight(visibleHeight);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
   useAutosizeTextArea(textAreaRef.current, question);
 
   useEffect(() => {
@@ -64,28 +83,37 @@ const PremChatContainer = ({
 
   return (
     <section>
-      <div className="md:flex md:h-screen w-full relative">
+      <div className="md:flex w-full relative">
         <div
-          className={clsx("prem-chat-sidebar md:relative", { "max-md:hidden": hamburgerMenuOpen })}
+          className={clsx("flex flex-col prem-chat-sidebar md:relative", {
+            "max-md:hidden": hamburgerMenuOpen,
+          })}
         >
           <PremChatSidebar setHamburgerMenu={setHamburgerMenu} />
         </div>
         <div className="flex flex-1 prem-chat-container">
           <div className="bg-lines bg-grey-900 relative h-full w-full">
             <div
-              className="main-content h-full z-10 relative max-h-full overflow-hidden scrollbar-none"
+              className="main-content h-screen z-10 relative overflow-hidden scrollbar-none"
               ref={chatMessageListRef}
             >
               <Header
+                ref={headerRef}
                 hamburgerMenuOpen={hamburgerMenuOpen}
                 setHamburgerMenu={setHamburgerMenu}
                 title={serviceName}
                 setRightSidebar={setRightSidebar}
                 rightSidebar={rightSidebar}
+                isPetals={isPetals}
               />
               <div
-                className="z-10 relative md:mt-[40px] mt-0 flex flex-col prem-chat-body scrollbar-none"
-                style={{ height: height - (responsiveMatches ? 200 : 100) }}
+                className="z-10 relative flex flex-col prem-chat-body scrollbar-none"
+                style={{
+                  height:
+                    height -
+                    headerVisibleHeight -
+                    (responsiveMatches ? (isPetals ? 215 : 160) : 120),
+                }}
               >
                 <div className="md:w-[65%] w-[90%] mx-auto md:mt-8">
                   {chatMessages.map((message: Message, index: number) => (
@@ -100,11 +128,9 @@ const PremChatContainer = ({
                 </div>
               </div>
               <div className="prem-chat-bottom border-transparent">
-                <div className="md:w-[55%] sm:w-[85%] w-[88%] mx-auto max-md:mt-[14px]">
+                <div className="md:w-[55%] sm:w-[85%] w-[88%] mx-auto mt-4">
                   {chatMessages.length > 0 && !isLoading && !isError && (
-                    <div>
-                      <RegenerateButton onRgenerateClick={onRegenerate} />
-                    </div>
+                    <RegenerateButton onRgenerateClick={onRegenerate} />
                   )}
                   <form onSubmit={onSubmit}>
                     <div className="autosize-textarea-container">

diff --git a/src/modules/prem-chat/components/RegenerateButton.tsx b/src/modules/prem-chat/components/RegenerateButton.tsx
@@ -5,7 +5,7 @@ import type { RegenerateButtonProps } from "../types";
 const RegenerateButton = ({ onRgenerateClick }: RegenerateButtonProps) => {
   return (
     <button
-      className="border mx-auto  flex items-center border-white rounded-md text-white py-[9px] px-[13px]"
+      className="border mx-auto flex items-center border-white rounded-md text-white py-[9px] px-[13px]"
       onClick={onRgenerateClick}
     >
       <img width={16} height={16} src={regenerate} alt="regenerate-logo" className="mr-3" />

diff --git a/src/modules/prem-chat/types.ts b/src/modules/prem-chat/types.ts
@@ -56,6 +56,7 @@ export type PremChatContainerProps = {
   serviceId: string;
   serviceType: Service["serviceType"];
   serviceName: string;
+  isPetals: boolean;
 };
 
 export interface ChatRightSidebarProps extends RightSidebarProps {

diff --git a/src/shared/components/LeftSidebar.tsx b/src/shared/components/LeftSidebar.tsx
@@ -17,7 +17,7 @@ const LeftSidebar = ({ setHamburgerMenu, children }: LeftSidebarProps) => {
   };
 
   return (
-    <div className="md:pt-7 !bg-grey-800 pt-[22px] pb-[10px] flex-col px-2 flex md:h-screen sidebar md:!w-[259px]">
+    <div className="md:pt-7 !bg-grey-800 pt-[22px] pb-[10px] flex flex-col flex-1 px-2 sidebar md:!w-[259px]">
       <div className="flex max-md:flex-wrap md:gap-4">
         <button className="mx-2" onClick={onCloseClick}>
           <img src={leftArrow} alt="left-arrow" className="max-md:max-w-[15px]" />

diff --git a/src/shared/components/NetworkIcon.tsx b/src/shared/components/NetworkIcon.tsx
@@ -1,7 +1,7 @@
 import icon from "../../assets/images/network.png";
 
 const NetworkIcon = () => {
-  return <img src={icon} style={{ height: "25px" }} />;
+  return <img src={icon} style={{ height: "25px" }} alt="network-icon" />;
 };
 
 export default NetworkIcon;
diff --git a/src/shared/components/PetalsBanner.tsx b/src/shared/components/PetalsBanner.tsx
@@ -0,0 +1,20 @@
+const PetalsBanner = () => {
+  return (
+    <div className="flex items-center bg-primary p-4">
+      <p className="z-10">
+        Feeling slow with the Public Network?{" "}
+        <a
+          href="mailto:[email protected]"
+          target="_blank"
+          rel="noreferrer"
+          className="underline font-bold"
+        >
+          Get in Touch
+        </a>{" "}
+        for the Pro Plan!
+      </p>
+    </div>
+  );
+};
+
+export default PetalsBanner;
diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts
@@ -132,6 +132,7 @@ export type HeaderProps = {
   hamburgerMenuOpen: boolean;
   setHamburgerMenu: (value: boolean) => void;
   title: string;
+  isPetals?: boolean;
 };
 
 export type HamburgerMenuProps = {