Merge pull request #31 from youngle316/dev

automatic and handle scroll to bottom

README.md

@@ -80,6 +80,18 @@ copy these code to replace **"firebase.ts"** file
 
 ![image.png](https://obsidian-picgo-le.oss-cn-hangzhou.aliyuncs.com/img/20230225072554.png)
 
+### Add Redirect Url
+
+1. go to [google cloud console](https://console.cloud.google.com/)
+2. select your project
+3. add redirect url for your project
+
+![](https://obsidian-picgo-le.oss-cn-hangzhou.aliyuncs.com/img/SCR-20230310-ej9.png)
+
+![](https://obsidian-picgo-le.oss-cn-hangzhou.aliyuncs.com/img/SCR-20230310-ejm.png)
+
+![](https://obsidian-picgo-le.oss-cn-hangzhou.aliyuncs.com/img/SCR-20230310-ejx.png)
+
 ### Start Project
 
 ```shell

package.json

@@ -27,6 +27,7 @@
     "react-dom": "18.2.0",
     "react-firebase-hooks": "^5.1.1",
     "react-hot-toast": "^2.4.0",
+    "react-intersection-observer": "^9.4.3",
     "react-markdown": "^8.0.5",
     "react-select": "^5.7.0",
     "react-syntax-highlighter": "^15.5.0",

src/components/chatInput/ChatInput.tsx

@@ -8,7 +8,9 @@ import { toast } from 'react-hot-toast';
 import { db } from '../../service/firebase/firebase';
 import { useRecoilState } from 'recoil';
 import { parentMessageIdState } from '@/recoil/atom/AtomChat';
+import { showBottomDivRef } from '@/recoil/atom/AtomRef';
 import { useRouter } from 'next/navigation';
+import { useScrollToView } from '@/hook/useScrollToView';
 
 type ChatProps = {
   chatId: string;
@@ -18,6 +20,9 @@ function ChatInput({ chatId }: ChatProps) {
   const [prompt, setPrompt] = useState('');
   const { data: session } = useSession();
   const [parentMessageId] = useRecoilState(parentMessageIdState);
+  const [showBottomDiv] = useRecoilState(showBottomDivRef);
+
+  const scrollIntoView = useScrollToView(showBottomDiv);
 
   const router = useRouter();
 
@@ -31,6 +36,8 @@ function ChatInput({ chatId }: ChatProps) {
 
     setPrompt('');
 
+    scrollIntoView();
+
     let pageId = chatId;
 
     if (!chatId) {
@@ -85,6 +92,7 @@ function ChatInput({ chatId }: ChatProps) {
       toast.success('ChatGPT has responded!', {
         id: notification
       });
+      scrollIntoView();
     });
   };
 

src/components/contentContainer/index.tsx

@@ -1,12 +1,36 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
 import ChatInput from '../chatInput/ChatInput';
 import TopBar from '../topBar/TopBar';
+import { useRecoilState } from 'recoil';
+import { showBottomDivRef } from '@/recoil/atom/AtomRef';
+import { ArrowSmallDownIcon } from '@heroicons/react/24/outline';
+import { useScrollToView } from '@/hook/useScrollToView';
+import { useInView } from 'react-intersection-observer';
 
 type ContentContainerProps = {
   children: React.ReactNode;
   pageId?: string;
 };
 
 function ContentContainer({ children, pageId }: ContentContainerProps) {
+  const messageEndRef = useRef<HTMLDivElement | null>(null);
+
+  const [ShowBottomDiv, setShowBottomDivRef] = useRecoilState(showBottomDivRef);
+
+  const scrollIntoView = useScrollToView(ShowBottomDiv);
+
+  const { ref, inView } = useInView();
+
+  useEffect(() => {
+    setShowBottomDivRef(messageEndRef);
+  }, []);
+
+  const scrollTobBottom = () => {
+    scrollIntoView();
+  };
+
   return (
     <div className="main">
       <TopBar />
@@ -16,8 +40,19 @@ function ContentContainer({ children, pageId }: ContentContainerProps) {
             <div className="h-full w-full overflow-y-auto">
               <div className="flex flex-col items-center text-sm dark:bg-gray-800">
                 {children}
+                <div
+                  ref={messageEndRef}
+                  className="h-32 w-full flex-shrink-0 md:h-48"
+                >
+                  <div ref={ref} />
+                </div>
               </div>
-              <div className="md-h-48 h-32 w-full flex-shrink-0"></div>
+              <button
+                onClick={scrollTobBottom}
+                className={`scrollDown ${inView && 'hidden'}`}
+              >
+                <ArrowSmallDownIcon className="m-1 h-4 w-4" />
+              </button>
             </div>
           </div>
         </div>

src/hook/useScrollToView.ts

@@ -0,0 +1,8 @@
+// scrolls the element's ancestor containers is visible to the user.
+export const useScrollToView = (ref: any) => {
+  const scrollToView = () => {
+    ref.current && ref.current.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  return scrollToView;
+};

src/recoil/atom/AtomRef.ts

@@ -0,0 +1,9 @@
+import { atom } from 'recoil';
+
+const showBottomDivRef = atom({
+  key: 'showBottomDivRef',
+  default: {},
+  dangerouslyAllowMutability: true
+});
+
+export { showBottomDivRef };

src/styles/tailwind.css

@@ -45,4 +45,9 @@
   .sidebar-container {
     @apply hidden h-full bg-gray-900 md:fixed md:inset-0 md:flex md:w-[260px] md:flex-col;
   }
+
+  .scrollDown {
+    @apply absolute right-6 bottom-[124px] z-10 cursor-pointer rounded-full border border-gray-200 bg-gray-50 text-gray-600 
+    dark:border-white/10 dark:bg-white/10 dark:text-gray-200 md:bottom-[120px];
+  }
 }