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

CGQAQ · CGQAQ · commit bb519845d431 · 2023-03-12T10:05:29.000+08:00
diff --git a/src/app/[lang]/chatgpt-general/page.client.tsx b/src/app/[lang]/chatgpt-general/page.client.tsx
@@ -3,7 +3,7 @@
 import React from "react";
 import { DataTable } from "@/components/DataTable/DataTable";
 import { createColumnHelper } from "@tanstack/react-table";
-import { ClickPromptButton } from "@/components/ClickPromptButton";
+import { ClickPromptButton } from "@/components/ClickPrompt/ClickPromptButton";
 
 import gptCategorySamples from "@/assets/chatgpt/category/index.json";
 import {
diff --git a/src/app/[lang]/chatgpt-generator-cot/page.client.tsx b/src/app/[lang]/chatgpt-generator-cot/page.client.tsx
@@ -9,7 +9,7 @@ import { Form, Formik } from "formik";
 import { numberToChineseOrdinal } from "chinese-numbering";
 
 import CopyComponent from "@/components/CopyComponent";
-import { ClickPromptButton } from "@/components/ClickPromptButton";
+import { ClickPromptButton } from "@/components/ClickPrompt/ClickPromptButton";
 
 function ChatGptCotGenerator({ i18n, locale }: GeneralI18nProps) {
   const dict = i18n.dict;
diff --git a/src/app/[lang]/chatgpt-prompt-role-play/page.client.tsx b/src/app/[lang]/chatgpt-prompt-role-play/page.client.tsx
@@ -7,7 +7,7 @@ import { DataTable } from "@/components/DataTable/DataTable";
 import { LinkIcon } from "@chakra-ui/icons";
 import CopyComponent from "@/components/CopyComponent";
 import Highlight from "@/components/Highlight";
-import { ClickPromptButton } from "@/components/ClickPromptButton";
+import { ClickPromptButton } from "@/components/ClickPrompt/ClickPromptButton";
 import { Pagination, usePagination, type PaginationState } from "@/components/Pagination";
 
 type ActPrompt = {
diff --git a/src/app/[lang]/chatgpt-samples/[id]/page.tsx b/src/app/[lang]/chatgpt-samples/[id]/page.tsx
@@ -2,7 +2,7 @@ import React, { Fragment } from "react";
 import CopyComponent from "@/components/CopyComponent";
 import SimpleMarkdown from "@/components/SimpleMarkdown";
 import { ChatGptIcon } from "@/components/CustomIcon";
-import { ClickPromptButton } from "@/components/ClickPromptButton";
+import { ClickPromptButton } from "@/components/ClickPrompt/ClickPromptButton";
 import {
   Avatar,
   Box,
diff --git a/src/app/[lang]/chatgpt-samples/page.client.tsx b/src/app/[lang]/chatgpt-samples/page.client.tsx
@@ -24,7 +24,7 @@ import Link from "next/link";
 import samples from "@/assets/chatgpt/samples/index.json";
 import { ExternalLinkIcon } from "@chakra-ui/icons";
 import SimpleMarkdown from "@/components/SimpleMarkdown";
-import { ClickPromptButton } from "@/components/ClickPromptButton";
+import { ClickPromptButton } from "@/components/ClickPrompt/ClickPromptButton";
 import { CP_GITHUB_ASSETS } from "@/configs/constants";
 
 function ChatGptSamples({ i18n }: GeneralI18nProps) {
diff --git a/src/app/[lang]/chatgpt-startling-by-each-step/[id]/StartlingStepDetail.tsx b/src/app/[lang]/chatgpt-startling-by-each-step/[id]/StartlingStepDetail.tsx
@@ -4,20 +4,22 @@ import React, { useEffect } from "react";
 import { HumanBlock } from "@/app/[lang]/chatgpt-samples/components/HumanBlock";
 import { Avatar, Box } from "@/components/ChakraUI";
 import SimpleMarkdown from "@/components/SimpleMarkdown";
-import { ExecutePromptButton } from "@/components/ClickPromptButton";
 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";
 
 type StepProps = {
   index: number;
   step: StepDetail;
   content: StartlingStep;
   cachedValue: Record<number, any>;
   onCache?: (step: number, response: string) => void;
+  conversationId?: number;
+  updateConversationId?: (conversationId: number) => void;
 };
 
 type AskRendererProps = { step: StepDetail; onAskUpdate: (ask: string) => void; cachedValue: Record<number, any> };
@@ -41,7 +43,15 @@ function AskRenderer({ step, onAskUpdate, cachedValue }: AskRendererProps) {
   return <SimpleMarkdown content={step.ask} />;
 }
 
-function StartlingStepDetail({ index, step, content, onCache, cachedValue }: StepProps) {
+function StartlingStepDetail({
+  index,
+  step,
+  content,
+  onCache,
+  cachedValue,
+  conversationId,
+  updateConversationId,
+}: StepProps) {
   const [response, setResponse] = React.useState<string | undefined>(undefined);
 
   const handleResponse = (response: ResponseSend) => {
@@ -79,7 +89,13 @@ function StartlingStepDetail({ index, step, content, onCache, cachedValue }: Ste
           <AskRenderer step={step} onAskUpdate={setAsk} cachedValue={cachedValue} />
         </Box>
       </HumanBlock>
-      <ExecutePromptButton text={ask} handleResponse={handleResponse} name={content.name} />
+      <ExecutePromptButton
+        conversationId={conversationId}
+        updateConversationId={updateConversationId}
+        text={ask}
+        handleResponse={handleResponse}
+        name={content.name}
+      />
       <AiBlock direction='row' gap='2'>
         <Box>
           <ChatGptIcon />
diff --git a/src/app/[lang]/chatgpt-startling-by-each-step/[id]/StartlingStepPage.tsx b/src/app/[lang]/chatgpt-startling-by-each-step/[id]/StartlingStepPage.tsx
@@ -6,12 +6,15 @@ import StartlingStepDetail from "@/app/[lang]/chatgpt-startling-by-each-step/[id
 import { StartlingStep } from "@/app/[lang]/chatgpt-startling-by-each-step/[id]/startling.type";
 
 function StartlingStepPage({ content, id }: { content: StartlingStep; id: string }) {
+  const [conversationId, setConversationId] = React.useState<number | undefined>(undefined);
   const [cachedValue, setCachedValue] = React.useState<Record<number, any>>({});
 
   const updateCached = (index: number, value: any) => {
-    console.log("updateCached", index, value);
     setCachedValue((prev) => ({ ...prev, [index]: value }));
-    console.log(cachedValue);
+  };
+
+  const updateConversationId = (conversationId: number) => {
+    setConversationId(conversationId);
   };
 
   return (
@@ -41,6 +44,8 @@ function StartlingStepPage({ content, id }: { content: StartlingStep; id: string
                   content={content}
                   onCache={updateCached}
                   cachedValue={cachedValue}
+                  conversationId={conversationId}
+                  updateConversationId={updateConversationId}
                 />
               ))}
             </SimpleGrid>
diff --git a/src/app/[lang]/page.tsx b/src/app/[lang]/page.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Box, Button, Container, Heading, Stack, Text } from "@/components/ChakraUI";
 import { ClickPromptHome } from "@/components/CustomIcon";
 import { GITHUB_URL } from "@/configs/constants";
-import { ClickPromptButton } from "@/components/ClickPromptButton";
+import { ClickPromptButton } from "@/components/ClickPrompt/ClickPromptButton";
 import { getAppData } from "@/i18n";
 
 async function Page() {
diff --git a/src/app/[lang]/stable-diffusion-generator/PromptFieldForm.tsx b/src/app/[lang]/stable-diffusion-generator/PromptFieldForm.tsx
diff --git a/src/app/[lang]/stable-diffusion-generator/page.client.tsx b/src/app/[lang]/stable-diffusion-generator/page.client.tsx
@@ -23,10 +23,10 @@ import {
 import { useFormik } from "formik";
 import Image from "next/image";
 import CopyComponent from "@/components/CopyComponent";
-import PromptFieldForm, { SdPromptField } from "@/components/PromptFieldForm";
+import PromptFieldForm, { SdPromptField } from "@/app/[lang]/stable-diffusion-generator/PromptFieldForm";
 import sdImage from "@/assets/images/stable-diffusion-demo.jpeg";
 import { WebStorage } from "@/storage/webstorage";
-import { ClickPromptButton } from "@/components/ClickPromptButton";
+import { ClickPromptButton } from "@/components/ClickPrompt/ClickPromptButton";
 import { HuggingFaceTxt2Img } from "@/components/StableDiffusion/HuggingFaceTxt2Img";
 import { SdPrompt } from "@/components/StableDiffusion/SdPrompt";
 import { StableDiffusionGenData } from "@/data-processor/StableDiffusionGenData";
diff --git a/src/components/ChatGPT.tsx b/src/components/ChatGPT.tsx
diff --git a/src/components/ClickPrompt/Button.shared.tsx b/src/components/ClickPrompt/Button.shared.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import Image from "next/image";
+import React, { MouseEventHandler } from "react";
+import styled from "@emotion/styled";
+
+export type ButtonSize = "sm" | "md" | "lg";
+
+export const StyledBird = styled(Image)`
+  position: absolute;
+  top: -20px;
+  right: -20px;
+`;
+
+export const StyledPromptButton = styled.div`
+  position: relative;
+  width: min-content;
+`;
+
+export type CPButtonProps = {
+  loading?: boolean;
+  onClick?: MouseEventHandler;
+  size?: ButtonSize;
+  text: string;
+  children?: React.ReactNode;
+  [key: string]: any;
+};
diff --git a/src/components/ClickPrompt/ClickPrompt.tsx b/src/components/ClickPrompt/ClickPrompt.tsx
diff --git a/src/components/ClickPrompt/ClickPromptButton.tsx b/src/components/ClickPrompt/ClickPromptButton.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import React, { useState } from "react";
+import { Box, Text, Tooltip, useDisclosure } from "@chakra-ui/react";
+import { Button } from "@/components/ChakraUI";
+import { BeatLoader } from "react-spinners";
+import { ClickPromptSmall } from "@/components/CustomIcon";
+import clickPromptLogo from "@/assets/clickprompt-light.svg?url";
+import { CPButtonProps, StyledBird, StyledPromptButton } from "@/components/ClickPrompt/Button.shared";
+import { LoggingDrawer } from "@/components/ClickPrompt/LoggingDrawer";
+
+export type ClickPromptBirdParams = { width?: number; height?: number };
+
+export function ClickPromptBird(props: ClickPromptBirdParams) {
+  const width = props.width || 38;
+  const height = props.height || 32;
+
+  return <StyledBird src={clickPromptLogo} alt='ClickPrompt Logo' width={width} height={height} />;
+}
+
+export function ClickPromptButton(props: CPButtonProps) {
+  const [isLoading, setIsLoading] = useState(props.loading);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const handleClick = async (event: any) => {
+    setIsLoading(true);
+    const response = await fetch("/api/chatgpt/verify");
+    const data = await response.json();
+    setIsLoggedIn(data.loggedIn);
+    onOpen();
+    props.onClick && props.onClick(event);
+  };
+
+  const handleClose = () => {
+    setIsLoading(false);
+    onClose();
+  };
+
+  function NormalSize() {
+    return (
+      <StyledPromptButton>
+        <Button colorScheme='twitter' className='bg-blue' onClick={handleClick} {...props}>
+          {props.children}
+          {!isLoading && <Text>Prompt</Text>}
+          {isLoading && <BeatLoader size={8} color='black' />}
+        </Button>
+        <ClickPromptBird />
+      </StyledPromptButton>
+    );
+  }
+
+  function SmallSize() {
+    return (
+      <Button variant='unstyled' onClick={handleClick} {...props}>
+        {props.children}
+        <Tooltip label='Execute ChatGPT Prompt' aria-label='A tooltip'>
+          <ClickPromptSmall width={32} height={32} />
+        </Tooltip>
+      </Button>
+    );
+  }
+
+  return (
+    <Box>
+      {props.size !== "sm" && <NormalSize />}
+      {props.size === "sm" && <SmallSize />}
+
+      {LoggingDrawer(isOpen, handleClose, isLoggedIn, props)}
+    </Box>
+  );
+}
diff --git a/src/components/ClickPrompt/ExecutePromptButton.tsx b/src/components/ClickPrompt/ExecutePromptButton.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import React, { MouseEventHandler, useState } from "react";
+import { Text, useDisclosure } from "@chakra-ui/react";
+import * as UserAPI from "@/api/user";
+import { ResponseCreateConversation } from "@/pages/api/chatgpt/conversation";
+import { createConversation } from "@/api/conversation";
+import { sendMessage } from "@/api/chat";
+import { ResponseSend } from "@/pages/api/chatgpt/chat";
+import { Button } from "@/components/ChakraUI";
+import { BeatLoader } from "react-spinners";
+import { ClickPromptBird } from "@/components/ClickPrompt/ClickPromptButton";
+import { ButtonSize, StyledPromptButton } from "./Button.shared";
+import { LoggingDrawer } from "@/components/ClickPrompt/LoggingDrawer";
+
+export type ExecButtonProps = {
+  loading?: boolean;
+  onClick?: MouseEventHandler;
+  name: string;
+  text: string;
+  size?: ButtonSize;
+  children?: React.ReactNode;
+  handleResponse?: any;
+  conversationId?: number;
+  updateConversationId?: (conversationId: number) => void;
+};
+
+export 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 () => {
+    try {
+      await UserAPI.isLoggedIn();
+    } catch (e) {
+      onOpen();
+      setHasLogin(false);
+    }
+
+    if (!localId) {
+      setIsLoading(true);
+      let conversation: ResponseCreateConversation = await createConversation();
+      if (!conversation) {
+        return;
+      }
+
+      let conversationId = conversation.id || 0;
+      setLocalId(conversationId);
+      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;
+    }
+
+    onClose();
+    setIsLoading(false);
+  };
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  return (
+    <>
+      <StyledPromptButton>
+        <Button colorScheme='twitter' className='bg-blue' onClick={handleClick} {...props}>
+          {props.children}
+          {!isLoading && <Text>Prompt</Text>}
+          {isLoading && <BeatLoader size={8} color='black' />}
+        </Button>
+        <ClickPromptBird />
+      </StyledPromptButton>
+      {!hasLogin && LoggingDrawer(isOpen, handleClose, hasLogin, props)}
+    </>
+  );
+}
diff --git a/src/components/ClickPrompt/LoggingDrawer.tsx b/src/components/ClickPrompt/LoggingDrawer.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerOverlay } from "@chakra-ui/react";
+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) {
+  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} />
+          </div>
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
+  );
+}
diff --git a/src/components/ClickPrompt/MessageComponent.tsx b/src/components/ClickPrompt/MessageComponent.tsx
diff --git a/src/components/ClickPromptButton.tsx b/src/components/ClickPromptButton.tsx
