Merge remote-tracking branch 'origin/dev' into dev

Author: CGQAQ

src/app/[lang]/chatgpt-startling-by-each-step/[id]/StartlingStepDetail.tsx

@@ -1,16 +1,17 @@
 "use client";
 
 import React, { useEffect } from "react";
+import { Textarea } from "@chakra-ui/react";
+
 import { HumanBlock } from "@/app/[lang]/chatgpt-samples/components/HumanBlock";
 import { Avatar, Box } from "@/components/ChakraUI";
 import SimpleMarkdown from "@/components/SimpleMarkdown";
 import { AiBlock } from "@/app/[lang]/chatgpt-samples/components/AiBlock";
 import { ChatGptIcon } from "@/components/CustomIcon";
 import { StartlingStep } from "@/app/[lang]/chatgpt-startling-by-each-step/[id]/startling.type";
-import { Textarea } from "@chakra-ui/react";
 import { fillStepWithValued, StepDetail } from "@/app/[lang]/chatgpt-startling-by-each-step/[id]/StepDetail";
 import { ResponseSend } from "@/pages/api/chatgpt/chat";
-import { ExecutePromptButton } from "@/components/ClickPrompt/ExecutePromptButton";
+import ExecutePromptButton from "@/components/ClickPrompt/ExecutePromptButton";
 
 type StepProps = {
   index: number;
@@ -90,11 +91,11 @@ function StartlingStepDetail({
         </Box>
       </HumanBlock>
       <ExecutePromptButton
-        conversationId={conversationId}
-        updateConversationId={updateConversationId}
         text={ask}
-        handleResponse={handleResponse}
         name={content.name}
+        handleResponse={handleResponse}
+        conversationId={conversationId}
+        updateConversationId={updateConversationId}
       />
       <AiBlock direction='row' gap='2'>
         <Box>

src/components/ChatGPTApp.tsx

@@ -2,11 +2,22 @@
 
 import { ChatRoom } from "@/app/[lang]/chatgpt/ChatRoom";
 import { LoginPage } from "@/app/[lang]/chatgpt/LoginPage";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 
-export const ChatGPTApp = ({ loggedIn, initMessage }: { loggedIn?: boolean; initMessage?: string }) => {
+type ChatGPTAppProps = {
+  loggedIn?: boolean;
+  updateLoginStatus?: (loggedIn: boolean) => void;
+  initMessage?: string;
+};
+export const ChatGPTApp = ({ loggedIn, initMessage, updateLoginStatus }: ChatGPTAppProps) => {
   const [isLoggedIn, setIsLoggedIn] = useState(loggedIn ?? false);
 
+  useEffect(() => {
+    if (updateLoginStatus) {
+      updateLoginStatus(isLoggedIn);
+    }
+  }, [isLoggedIn]);
+
   return isLoggedIn ? (
     <ChatRoom setIsLoggedIn={setIsLoggedIn} initMessage={initMessage} />
   ) : (

src/components/ClickPrompt/ExecutePromptButton.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { MouseEventHandler, useState } from "react";
+import React, { MouseEventHandler, useEffect, useState } from "react";
 import { Text, useDisclosure } from "@chakra-ui/react";
 import * as UserAPI from "@/api/user";
 import { ResponseCreateConversation } from "@/pages/api/chatgpt/conversation";
@@ -20,62 +20,85 @@ export type ExecButtonProps = {
   text: string;
   size?: ButtonSize;
   children?: React.ReactNode;
-  handleResponse?: any;
+  handleResponse?: (response: ResponseSend) => void;
   conversationId?: number;
   updateConversationId?: (conversationId: number) => void;
 };
 
-export function ExecutePromptButton(props: ExecButtonProps) {
+function ExecutePromptButton(props: ExecButtonProps) {
   const [isLoading, setIsLoading] = useState(props.loading);
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [hasLogin, setHasLogin] = useState(false);
-  const [localId, setLocalId] = useState(props.conversationId);
 
   const handleClick = async () => {
+    setIsLoading(true);
+
     try {
-      await UserAPI.isLoggedIn();
+      const response = await UserAPI.isLoggedIn();
+      if (!response.loggedIn) {
+        onOpen();
+        setIsLoading(false);
+        return;
+      }
+
+      setHasLogin(true);
     } catch (e) {
-      onOpen();
+      console.log(e);
       setHasLogin(false);
     }
 
-    if (!localId) {
-      setIsLoading(true);
-      let conversation: ResponseCreateConversation = await createConversation();
+    let conversationId = props.conversationId;
+    if (!props.conversationId) {
+      const conversation: ResponseCreateConversation = await createConversation();
       if (!conversation) {
         return;
       }
 
-      let conversationId = conversation.id || 0;
-      setLocalId(conversationId);
+      conversationId = conversation.id as number;
       props.updateConversationId ? props.updateConversationId(conversationId) : null;
     }
 
-    let response: any = await sendMessage(localId!!, props.text);
-    console.log(response);
-    if (!response) {
-      props.handleResponse ? props.handleResponse(response as ResponseSend) : null;
+    if (conversationId) {
+      const response: any = await sendMessage(conversationId, props.text);
+      if (response && props.handleResponse) {
+        props.handleResponse(response as ResponseSend);
+      }
     }
 
-    onClose();
     setIsLoading(false);
   };
 
+  useEffect(() => {
+    console.log(`hasLogin: ${hasLogin}`);
+    if (hasLogin) {
+      onClose();
+    }
+  }, [hasLogin]);
+
   const handleClose = () => {
     onClose();
   };
 
+  const updateLoginStatus = (status: boolean) => {
+    if (status) {
+      setHasLogin(true);
+      onClose();
+    }
+  };
+
   return (
     <>
       <StyledPromptButton>
-        <Button colorScheme='twitter' className='bg-blue' onClick={handleClick} {...props}>
+        <Button colorScheme='twitter' className='bg-blue' onClick={handleClick}>
           {props.children}
           {!isLoading && <Text>Prompt</Text>}
           {isLoading && <BeatLoader size={8} color='black' />}
         </Button>
         <ClickPromptBird />
       </StyledPromptButton>
-      {!hasLogin && LoggingDrawer(isOpen, handleClose, hasLogin, props)}
+      {!hasLogin && LoggingDrawer(isOpen, handleClose, hasLogin, props, updateLoginStatus)}
     </>
   );
 }
+
+export default ExecutePromptButton;

src/components/ClickPrompt/LoggingDrawer.tsx

@@ -5,15 +5,21 @@ import { ChatGPTApp } from "@/components/ChatGPTApp";
 import React from "react";
 import { CPButtonProps } from "@/components/ClickPrompt/Button.shared";
 
-export function LoggingDrawer(isOpen: boolean, handleClose: () => void, isLoggedIn: boolean, props: CPButtonProps) {
+export function LoggingDrawer(
+  isOpen: boolean,
+  handleClose: () => void,
+  isLoggedIn: boolean,
+  props: CPButtonProps,
+  updateStatus?: (loggedIn: boolean) => void,
+) {
   return (
     <Drawer isOpen={isOpen} placement='right' onClose={handleClose} size={"2xl"}>
       <DrawerOverlay />
       <DrawerContent>
         <DrawerCloseButton className='text-white z-50' />
         <DrawerBody padding={0}>
           <div className='bg-[#343541] flex flex-1 h-[100%] overflow-y-auto items-center justify-center'>
-            <ChatGPTApp loggedIn={isLoggedIn} initMessage={props.text} />
+            <ChatGPTApp loggedIn={isLoggedIn} initMessage={props.text} updateLoginStatus={updateStatus} />
           </div>
         </DrawerBody>
       </DrawerContent>

tsconfig.json

@@ -39,7 +39,8 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    "/Volumes/source/ai/prompt-cheatsheet/.next/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"