Merge pull request #32 from youngle316/dev

v2.1.0
youngle316 · Mar 17, 2023 · 677c393 · 677c393
2 parents e94055f + 588f2c7
commit 677c393
Show file tree

Hide file tree

Showing 8 changed files with 144 additions and 33 deletions.
diff --git a/public/assets/github.svg b/public/assets/github.svg
diff --git a/public/assets/twitter.svg b/public/assets/twitter.svg
diff --git a/src/components/chatInput/ChatInput.tsx b/src/components/chatInput/ChatInput.tsx
@@ -1,7 +1,13 @@
 'use client';
 
 import { PaperAirplaneIcon } from '@heroicons/react/24/outline';
-import { addDoc, collection, serverTimestamp } from 'firebase/firestore';
+import {
+  addDoc,
+  collection,
+  doc,
+  serverTimestamp,
+  updateDoc
+} from 'firebase/firestore';
 import { useSession } from 'next-auth/react';
 import { FormEvent, useState } from 'react';
 import { toast } from 'react-hot-toast';
@@ -11,6 +17,8 @@ import { parentMessageIdState } from '@/recoil/atom/AtomChat';
 import { showBottomDivRef } from '@/recoil/atom/AtomRef';
 import { useRouter } from 'next/navigation';
 import { useScrollToView } from '@/hook/useScrollToView';
+import TwitterSvg from 'public/assets/twitter.svg';
+import GitHubSvg from 'public/assets/github.svg';
 
 type ChatProps = {
   chatId: string;
@@ -53,8 +61,6 @@ function ChatInput({ chatId }: ChatProps) {
       pageId = doc.id;
     }
 
-    const notification = toast.loading('ChatGPT is thinking...');
-
     const message: Message = {
       text: input,
       createAt: serverTimestamp(),
@@ -77,23 +83,72 @@ function ChatInput({ chatId }: ChatProps) {
       message
     );
 
-    await fetch('/api/askQuestion', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        prompt: input,
-        chatId: pageId,
-        session,
-        parentMessageId
+    const chatGPTMessage: Message = {
+      isLoading: true,
+      text: 'ChatGPT is thinking...',
+      createAt: serverTimestamp(),
+      user: {
+        _id: 'ChatGPT',
+        name: 'ChatGPT',
+        avatar:
+          'https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/ChatGPT_logo.svg/480px-ChatGPT_logo.svg.png'
+      }
+    };
+
+    await addDoc(
+      collection(
+        db,
+        'users',
+        session?.user?.email!,
+        'chats',
+        pageId,
+        'messages'
+      ),
+      chatGPTMessage
+    )
+      .then((docRef) => {
+        scrollIntoView();
+        fetch('/api/askQuestion', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            prompt: input,
+            chatId: pageId,
+            session,
+            parentMessageId,
+            fireBaseMessageID: docRef.id
+          })
+        }).then((response) => {
+          if (response.status === 504) {
+            const message = {
+              fireBaseMessageID: docRef.id,
+              isLoading: false,
+              text: 'Server Timeout.',
+              createAt: serverTimestamp()
+            };
+
+            updateDoc(
+              doc(
+                db,
+                'users',
+                session?.user?.email!,
+                'chats',
+                chatId,
+                'messages',
+                docRef.id
+              ),
+              {
+                ...message
+              }
+            );
+          }
+        });
       })
-    }).then(() => {
-      toast.success('ChatGPT has responded!', {
-        id: notification
+      .then(() => {
+        scrollIntoView();
       });
-      scrollIntoView();
-    });
   };
 
   return (
@@ -117,15 +172,31 @@ function ChatInput({ chatId }: ChatProps) {
           </div>
         </div>
       </form>
-      <div className="px-3 pt-2 pb-3 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6">
-        Developed using gpt-3.5-turbo API by &nbsp;
+      <div className="flex justify-center gap-3 px-3 pt-2 pb-3 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6">
+        <div>
+          Developed using gpt-3.5-turbo API by &nbsp;
+          <a
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+            href="https://github.com/transitive-bullshit/chatgpt-api"
+          >
+            chatgpt-api
+          </a>
+        </div>
+        <a
+          target="_blank"
+          rel="noreferrer"
+          href="https://twitter.com/youngle316"
+        >
+          <TwitterSvg className="h-4 w-4" />
+        </a>
         <a
-          className="underline"
           target="_blank"
           rel="noreferrer"
-          href="https://github.com/transitive-bullshit/chatgpt-api"
+          href="https://github.com/youngle316"
         >
-          chatgpt-api
+          <GitHubSvg className="h-4 w-4" />
         </a>
       </div>
     </>

diff --git a/src/components/contentContainer/index.tsx b/src/components/contentContainer/index.tsx
@@ -56,10 +56,7 @@ function ContentContainer({ children, pageId }: ContentContainerProps) {
             </div>
           </div>
         </div>
-        <div
-          className="absolute bottom-0 left-0 w-full border-t bg-white dark:border-white/20 dark:bg-gray-800 
-        md:border-t-0 md:border-transparent md:!bg-transparent md:dark:border-transparent"
-        >
+        <div className="chatInput">
           <ChatInput chatId={pageId as string} />
         </div>
       </main>

diff --git a/src/pages/api/askQuestion.ts b/src/pages/api/askQuestion.ts
@@ -1,6 +1,6 @@
 import chatgptQuery from '../../api/chatgptApi/queryApi';
 import type { NextApiRequest, NextApiResponse } from 'next';
-import { addDoc, collection, serverTimestamp } from 'firebase/firestore';
+import { doc, serverTimestamp, updateDoc } from 'firebase/firestore';
 import { db } from '@/service/firebase/firebase';
 
 type Data = {
@@ -12,7 +12,8 @@ export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse<Data>
 ) {
-  const { prompt, chatId, session, parentMessageId } = req.body;
+  const { prompt, chatId, session, parentMessageId, fireBaseMessageID } =
+    req.body;
 
   if (!prompt) {
     res.status(400).json({ answer: 'Please Provider A Prompt' });
@@ -25,6 +26,8 @@ export default async function handler(
   const result = await chatgptQuery(prompt, parentMessageId);
 
   const message: Message = {
+    fireBaseMessageID,
+    isLoading: false,
     parentMessageId: result.id || '',
     text:
       result.text ||
@@ -38,9 +41,19 @@ export default async function handler(
     }
   };
 
-  await addDoc(
-    collection(db, 'users', session?.user?.email!, 'chats', chatId, 'messages'),
-    message
+  await updateDoc(
+    doc(
+      db,
+      'users',
+      session?.user?.email!,
+      'chats',
+      chatId,
+      'messages',
+      fireBaseMessageID
+    ),
+    {
+      ...message
+    }
   );
 
   res.status(200).json({ answer: message.text, result });

diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -50,4 +50,26 @@
     @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];
   }
+
+  .chatInput {
+    @apply md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient absolute bottom-0 left-0 w-full border-t 
+    bg-white dark:border-white/20 dark:bg-gray-800 
+    md:border-t-0 md:border-transparent md:!bg-transparent md:dark:border-transparent;
+  }
+
+  .bg-vert-light-gradient {
+    background-image: linear-gradient(
+      180deg,
+      hsla(0, 0%, 100%, 0) 13.94%,
+      #fff 54.73%
+    );
+  }
+
+  .bg-vert-dark-gradient {
+    background-image: linear-gradient(
+      180deg,
+      rgba(53, 55, 64, 0),
+      #353740 58.85%
+    );
+  }
 }
diff --git a/src/views/chat/Message.tsx b/src/views/chat/Message.tsx
@@ -28,7 +28,11 @@ function Message({ message }: MessageProps) {
 
         <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
           <div className="flex flex-grow flex-col gap-4">
-            <ConvertToMarkdown content={message.text} />
+            {message?.isLoading ? (
+              <div className="animate-pulse">ChatGPT is thinking...</div>
+            ) : (
+              <ConvertToMarkdown content={message.text} />
+            )}
           </div>
         </div>
       </div>

diff --git a/typing.d.ts b/typing.d.ts
@@ -1,4 +1,6 @@
 interface Message {
+  fireBaseMessageID?: string;
+  isLoading?: boolean;
   parentMessageId?: string;
   text: string;
   createAt: admin.firestore.Timestamp;