chore: copy click prompt button related component and setup its package

Signed-off-by: teobler <teobler@163.com>

Author: teobler

package-lock.json

@@ -1,3 +1,5 @@
 # ClickPromptButton - shift your prompt to everywhere
 
-click prompt button is a component that can be used to execute a prompt from ChatGPT in any web page. It is a part of the [ClickPrompt](https://www.clickprompt.org/)
+click prompt button is react component that can be used to execute a prompt from ChatGPT in any web page. It is a part of the [ClickPrompt](https://www.clickprompt.org/)
+
+notice: click prompt button is just for nextjs now, will update it to support React.

packages/click-prompt-button/README.md

@@ -0,0 +1,39 @@
+{
+  "name": "click-prompt-button",
+  "version": "0.1.0",
+  "description": "click prompt button is react component that can be used to execute a prompt from ChatGPT in any web page. It is a part of the ClickPrompt",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@chakra-ui/icons": "^2.0.17",
+    "@chakra-ui/react": "^2.5.1",
+    "@chakra-ui/spinner": "^2.0.13",
+    "@chakra-ui/system": "^2.5.1",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "client-only": "^0.0.1",
+    "mermaid": "^10.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-markdown": "^8.0.5",
+    "react-spinners": "^0.13.8",
+    "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^3.0.1",
+    "svg-pan-zoom": "^3.6.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^3.1.0",
+    "vite": "^4.2.1",
+    "vite-plugin-dts": "^2.1.0",
+    "vite-plugin-linter": "^2.0.2",
+    "vite-tsconfig-paths": "^4.0.7"
+  },
+  "peerDependencies": {
+    "next": ">=13.0.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  }
+}

packages/click-prompt-button/package.json

@@ -0,0 +1,26 @@
+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;
+  isLoggedIn: () => Promise<any>;
+};

packages/click-prompt-button/src/Button.shared.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import { Box, Button, Text, Tooltip, useDisclosure } from "@chakra-ui/react";
+import { BeatLoader } from "react-spinners";
+import { ClickPromptSmall } from "./CustomIcon";
+import clickPromptLogo from "@/assets/clickprompt-light.svg?url";
+import { CPButtonProps, StyledBird, StyledPromptButton } from "./Button.shared";
+import { LoggingDrawer } from "./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 isLoggedIn = await props.isLoggedIn();
+    setIsLoggedIn(isLoggedIn);
+    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>
+  );
+}

packages/click-prompt-button/src/ClickPromptButton.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import Image from "next/image";
+import clickPromptSmall from "@/assets/clickprompt-small.svg?url";
+
+export function ClickPromptSmall({ width = 32, height = 32 }) {
+  return <Image className="inline-block" src={clickPromptSmall} alt="ClickPrompt Logo" width={width} height={height} />;
+}

packages/click-prompt-button/src/CustomIcon.tsx

@@ -0,0 +1,97 @@
+import React, { MouseEventHandler, useEffect, useState } from "react";
+import { Button, Text, useDisclosure } from "@chakra-ui/react";
+import { BeatLoader } from "react-spinners";
+import { ClickPromptBird } from "./ClickPromptButton";
+import { ButtonSize, StyledPromptButton } from "./Button.shared";
+import { LoggingDrawer } from "./LoggingDrawer";
+
+export type ExecButtonProps = {
+  loading?: boolean;
+  onClick?: MouseEventHandler;
+  name: string;
+  text: string;
+  size?: ButtonSize;
+  children?: React.ReactNode;
+  handleResponse?: (response: any) => void;
+  conversationId?: number;
+  updateConversationId?: (conversationId: number) => void;
+  isLoggedIn: () => Promise<any>;
+  createConversation: (name?: string) => Promise<any>;
+  sendMessage: (conversageId: number, message: string, name?: string) => Promise<any>;
+};
+
+function ExecutePromptButton(props: ExecButtonProps) {
+  const [isLoading, setIsLoading] = useState(props.loading);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [hasLogin, setHasLogin] = useState(false);
+
+  const handleClick = async () => {
+    setIsLoading(true);
+
+    try {
+      const isLoggedIn = await props.isLoggedIn();
+      if (!isLoggedIn) {
+        onOpen();
+        setIsLoading(false);
+        return;
+      }
+    } catch (e) {
+      console.log(e);
+      setHasLogin(false);
+    }
+
+    let conversationId = props.conversationId;
+    if (!props.conversationId) {
+      const conversation = await props.createConversation();
+      if (!conversation) {
+        return;
+      }
+
+      conversationId = conversation.id as number;
+      props.updateConversationId ? props.updateConversationId(conversationId) : null;
+    }
+
+    if (conversationId) {
+      const response: any = await props.sendMessage(conversationId, props.text);
+      if (response && props.handleResponse) {
+        props.handleResponse(response as any);
+      }
+    }
+
+    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.children}
+          {!isLoading && <Text>Prompt</Text>}
+          {isLoading && <BeatLoader size={8} color="black" />}
+        </Button>
+        <ClickPromptBird />
+      </StyledPromptButton>
+      {!hasLogin && LoggingDrawer(isOpen, handleClose, hasLogin, props, updateLoginStatus)}
+    </>
+  );
+}
+
+export default ExecutePromptButton;

packages/click-prompt-button/src/ExecutePromptButton.tsx

@@ -0,0 +1,26 @@
+import { Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerOverlay } from "@chakra-ui/react";
+import { ChatGPTApp } from "@/chatgpt/ChatGPTApp";
+import React from "react";
+import { CPButtonProps } from "./Button.shared";
+
+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} updateLoginStatus={updateStatus} />
+          </div>
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
+  );
+}