Merge pull request #23 from youngle316/dev

feat: track conversation

lib/chatGPTApi.ts

@@ -0,0 +1,7 @@
+import { ChatGPTAPI } from 'chatgpt';
+
+const api = new ChatGPTAPI({
+  apiKey: process.env.OPENAI_API_KEY as string
+});
+
+export { api };

lib/queryApi.ts

@@ -1,19 +1,12 @@
-import { ChatGPTAPI } from 'chatgpt';
-
-const chatgptQuery = async (prompt: string) => {
-  const api = new ChatGPTAPI({
-    apiKey: process.env.OPENAI_API_KEY || ''
-  });
+import { api } from './chatGPTApi';
 
+const chatgptQuery = async (prompt: string, parentMessageId: string) => {
   const res = await api
-    .sendMessage(prompt)
+    .sendMessage(prompt, { parentMessageId: parentMessageId || undefined })
     .then((res) => {
-      return res.text;
+      return res;
     })
-    .catch(
-      () =>
-        `ChatGPT was unable to find an answer to your question. Please try again later.`
-    );
+    .catch();
 
   return res;
 };

src/atom/AtomChat.ts

@@ -0,0 +1,11 @@
+import { atom } from 'recoil';
+
+/**
+ * This is the state for the parent message id. Track the conversation.
+ */
+const parentMessageIdState = atom({
+  key: 'parentMessageIdState',
+  default: ''
+});
+
+export { parentMessageIdState };

src/components/Chat.tsx

@@ -1,18 +1,22 @@
 'use client';
 
+import { useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
 import { ArrowDownCircleIcon } from '@heroicons/react/24/outline';
 import { collection, orderBy, query } from 'firebase/firestore';
 import { useSession } from 'next-auth/react';
 import { useCollection } from 'react-firebase-hooks/firestore';
 import { db } from '../../firebase';
 import Message from './Message';
+import { parentMessageIdState } from '@/atom/AtomChat';
 
 type ChatProps = {
   chatId: string;
 };
 
 function Chat({ chatId }: ChatProps) {
   const { data: session } = useSession();
+  const setParentMessageId = useSetRecoilState(parentMessageIdState);
 
   const [messages] = useCollection(
     session &&
@@ -29,6 +33,12 @@ function Chat({ chatId }: ChatProps) {
       )
   );
 
+  useEffect(() => {
+    const data = messages?.docs;
+    const lastData = data && data[data.length - 1];
+    setParentMessageId(lastData ? lastData.get('parentMessageId')! : '');
+  }, [messages]);
+
   return (
     <div className="flex-1 overflow-y-auto overflow-x-hidden">
       {messages?.empty && (

src/components/ChatInput.tsx

@@ -5,8 +5,9 @@ import { addDoc, collection, serverTimestamp } from 'firebase/firestore';
 import { useSession } from 'next-auth/react';
 import { FormEvent, useState } from 'react';
 import { toast } from 'react-hot-toast';
-import useSWR from 'swr';
 import { db } from '../../firebase';
+import { useRecoilState } from 'recoil';
+import { parentMessageIdState } from '@/atom/AtomChat';
 
 type ChatProps = {
   chatId: string;
@@ -15,10 +16,7 @@ type ChatProps = {
 function ChatInput({ chatId }: ChatProps) {
   const [prompt, setPrompt] = useState('');
   const { data: session } = useSession();
-
-  const { data: model } = useSWR('model', {
-    fallbackData: 'text-davinci-003'
-  });
+  const [parentMessageId] = useRecoilState(parentMessageIdState);
 
   const sendMessage = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -62,8 +60,8 @@ function ChatInput({ chatId }: ChatProps) {
       body: JSON.stringify({
         prompt: input,
         chatId,
-        model,
-        session
+        session,
+        parentMessageId
       })
     }).then(() => {
       toast.success('ChatGPT has responded!', {

src/components/ChatRow.tsx

@@ -41,7 +41,6 @@ function ChatRow({ id }: ChatRowProps) {
     router.replace('/');
   };
 
-  //
   const linkToChat = () => {
     openStateChange(false);
   };

src/pages/api/askQuestion.ts

@@ -5,13 +5,14 @@ import { adminDb } from 'firebaseAdmin';
 
 type Data = {
   answer: string;
+  result?: any;
 };
 
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse<Data>
 ) {
-  const { prompt, chatId, model, session } = req.body;
+  const { prompt, chatId, model, session, parentMessageId } = req.body;
 
   if (!prompt) {
     res.status(400).json({ answer: 'Please Provider A Prompt' });
@@ -21,11 +22,12 @@ export default async function handler(
     res.status(400).json({ answer: 'Please Provider A Valid Chat ID' });
   }
 
-  const response = await chatgptQuery(prompt);
+  const result = await chatgptQuery(prompt, parentMessageId);
 
   const message: Message = {
+    parentMessageId: result.id,
     text:
-      response ||
+      result.text ||
       'ChatGPT was unable to find an answer to your question. Please try again later.',
     createAt: admin.firestore.Timestamp.now(),
     user: {
@@ -44,5 +46,5 @@ export default async function handler(
     .collection('messages')
     .add(message);
 
-  res.status(200).json({ answer: message.text });
+  res.status(200).json({ answer: message.text, result });
 }

typing.d.ts

@@ -1,4 +1,5 @@
 interface Message {
+  parentMessageId?: string;
   text: string;
   createAt: admin.firestore.Timestamp;
   user: {