From 891bdce685d4b7c4b79c6aa13c78afafe105f5c7 Mon Sep 17 00:00:00 2001 From: teobler Date: Wed, 22 Mar 2023 15:28:25 +0800 Subject: [PATCH 01/22] refactor: extract component individually Signed-off-by: teobler --- .../src/ClickPromptBird.tsx | 9 ++ .../src/ClickPromptButton.tsx | 17 +--- .../src/ExecutePromptButton.tsx | 83 +++++++++++++------ .../{Button.shared.tsx => SharedButton.tsx} | 0 packages/click-prompt-button/src/index.tsx | 3 + 5 files changed, 74 insertions(+), 38 deletions(-) create mode 100644 packages/click-prompt-button/src/ClickPromptBird.tsx rename packages/click-prompt-button/src/{Button.shared.tsx => SharedButton.tsx} (100%) create mode 100644 packages/click-prompt-button/src/index.tsx diff --git a/packages/click-prompt-button/src/ClickPromptBird.tsx b/packages/click-prompt-button/src/ClickPromptBird.tsx new file mode 100644 index 0000000..0e3a7e2 --- /dev/null +++ b/packages/click-prompt-button/src/ClickPromptBird.tsx @@ -0,0 +1,9 @@ +import { StyledBird } from "@/SharedButton"; +import clickPromptLogo from "*.svg?url"; +import React from "react"; + +type ClickPromptBirdProps = { width?: number; height?: number }; + +export const ClickPromptBird = ({ width = 38, height = 32 }: ClickPromptBirdProps) => ( + +); diff --git a/packages/click-prompt-button/src/ClickPromptButton.tsx b/packages/click-prompt-button/src/ClickPromptButton.tsx index 82eea45..25be8e2 100644 --- a/packages/click-prompt-button/src/ClickPromptButton.tsx +++ b/packages/click-prompt-button/src/ClickPromptButton.tsx @@ -1,10 +1,10 @@ import React, { MouseEventHandler, 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 { ButtonSize, StyledBird, StyledPromptButton } from "./Button.shared"; -import { LoggingDrawer } from "./LoggingDrawer"; +import { ClickPromptSmall } from "@/CustomIcon"; +import { ButtonSize, StyledPromptButton } from "@/SharedButton"; +import { LoggingDrawer } from "@/LoggingDrawer"; +import { ClickPromptBird } from "@/ClickPromptBird"; interface ClickPromptButtonProps { loading?: boolean; @@ -22,15 +22,6 @@ interface ClickPromptButtonProps { logoutApi: () => Promise; } -export type ClickPromptBirdParams = { width?: number; height?: number }; - -export function ClickPromptBird(props: ClickPromptBirdParams) { - const width = props.width || 38; - const height = props.height || 32; - - return ; -} - export function ClickPromptButton({ isLoggedInApi, children, diff --git a/packages/click-prompt-button/src/ExecutePromptButton.tsx b/packages/click-prompt-button/src/ExecutePromptButton.tsx index fc4ce47..85c6f9e 100644 --- a/packages/click-prompt-button/src/ExecutePromptButton.tsx +++ b/packages/click-prompt-button/src/ExecutePromptButton.tsx @@ -1,27 +1,48 @@ -import React, { MouseEventHandler, useEffect, useState } from "react"; +import React, { 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"; +import { StyledPromptButton } from "@/SharedButton"; +import { LoggingDrawer } from "@/LoggingDrawer"; +import { ClickPromptBird } from "@/ClickPromptBird"; 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; createConversation: (name?: string) => Promise; sendMessage: (conversageId: number, message: string, name?: string) => Promise; + isLoggedInApi: () => Promise; + changeConversationNameApi: (conversation_id: number, name: string) => Promise; + createConversationApi: (name?: string) => Promise; + getChatsByConversationIdApi: (conversationId: number) => Promise; + deleteConversationApi: (conversationId: number) => Promise; + deleteAllConversationsApi: () => Promise; + sendMsgWithStreamResApi: (conversageId: number, message: string, name?: string) => Promise; + logoutApi: () => Promise; }; -function ExecutePromptButton(props: ExecButtonProps) { - const [isLoading, setIsLoading] = useState(props.loading); +export const ExecutePromptButton = ({ + loading, + text, + children, + handleResponse, + conversationId, + updateConversationId, + createConversation, + sendMessage, + isLoggedInApi, + changeConversationNameApi, + createConversationApi, + getChatsByConversationIdApi, + deleteConversationApi, + deleteAllConversationsApi, + sendMsgWithStreamResApi, + logoutApi, +}: ExecButtonProps) => { + const [isLoading, setIsLoading] = useState(loading); const { isOpen, onOpen, onClose } = useDisclosure(); const [hasLogin, setHasLogin] = useState(false); @@ -29,7 +50,7 @@ function ExecutePromptButton(props: ExecButtonProps) { setIsLoading(true); try { - const isLoggedIn = await props.isLoggedIn(); + const isLoggedIn = await isLoggedInApi(); if (!isLoggedIn) { onOpen(); setIsLoading(false); @@ -40,21 +61,21 @@ function ExecutePromptButton(props: ExecButtonProps) { setHasLogin(false); } - let conversationId = props.conversationId; - if (!props.conversationId) { - const conversation = await props.createConversation(); + let newConversationId = conversationId; + if (!conversationId) { + const conversation = await createConversation(); if (!conversation) { return; } - conversationId = conversation.id as number; - props.updateConversationId ? props.updateConversationId(conversationId) : null; + newConversationId = conversation.id as number; + updateConversationId ? updateConversationId(newConversationId) : null; } - if (conversationId) { - const response: any = await props.sendMessage(conversationId, props.text); - if (response && props.handleResponse) { - props.handleResponse(response as any); + if (newConversationId) { + const response: any = await sendMessage(newConversationId, text); + if (response && handleResponse) { + handleResponse(response as any); } } @@ -83,15 +104,27 @@ function ExecutePromptButton(props: ExecButtonProps) { <> - {!hasLogin && LoggingDrawer(isOpen, handleClose, hasLogin, props, updateLoginStatus)} + {!hasLogin && + LoggingDrawer({ + isOpen, + handleClose, + updateStatus: updateLoginStatus, + isLoggedIn: hasLogin, + initMessage: text, + changeConversationNameApi: changeConversationNameApi, + createConversationApi: createConversationApi, + getChatsByConversationIdApi: getChatsByConversationIdApi, + deleteConversationApi: deleteConversationApi, + deleteAllConversationsApi: deleteAllConversationsApi, + sendMsgWithStreamResApi: sendMsgWithStreamResApi, + logoutApi: logoutApi, + })} ); -} - -export default ExecutePromptButton; +}; diff --git a/packages/click-prompt-button/src/Button.shared.tsx b/packages/click-prompt-button/src/SharedButton.tsx similarity index 100% rename from packages/click-prompt-button/src/Button.shared.tsx rename to packages/click-prompt-button/src/SharedButton.tsx diff --git a/packages/click-prompt-button/src/index.tsx b/packages/click-prompt-button/src/index.tsx new file mode 100644 index 0000000..7f764d5 --- /dev/null +++ b/packages/click-prompt-button/src/index.tsx @@ -0,0 +1,3 @@ +"use client"; + +export { ClickPromptButton } from "./ClickPromptButton"; From 8b331d6b7130f7eb3c32629363f70e44d871a9ee Mon Sep 17 00:00:00 2001 From: teobler Date: Wed, 22 Mar 2023 15:54:01 +0800 Subject: [PATCH 02/22] refactor: extract shared api params Signed-off-by: teobler --- .../src/ClickPromptButton.tsx | 11 ++---- .../src/ExecutePromptButton.tsx | 35 +++++++------------ .../click-prompt-button/src/LoggingDrawer.tsx | 10 ++---- .../src/chatgpt/ChatGPTApp.tsx | 10 ++---- .../src/chatgpt/ChatRoom.tsx | 18 ++++------ .../click-prompt-button/src/types/shared.ts | 10 ++++++ 6 files changed, 35 insertions(+), 59 deletions(-) create mode 100644 packages/click-prompt-button/src/types/shared.ts diff --git a/packages/click-prompt-button/src/ClickPromptButton.tsx b/packages/click-prompt-button/src/ClickPromptButton.tsx index 25be8e2..3a78ebe 100644 --- a/packages/click-prompt-button/src/ClickPromptButton.tsx +++ b/packages/click-prompt-button/src/ClickPromptButton.tsx @@ -5,21 +5,14 @@ import { ClickPromptSmall } from "@/CustomIcon"; import { ButtonSize, StyledPromptButton } from "@/SharedButton"; import { LoggingDrawer } from "@/LoggingDrawer"; import { ClickPromptBird } from "@/ClickPromptBird"; +import { SharedApi } from "@/types/shared"; -interface ClickPromptButtonProps { +interface ClickPromptButtonProps extends SharedApi { loading?: boolean; onClick?: MouseEventHandler; size?: ButtonSize; text: string; children?: React.ReactNode; - isLoggedInApi: () => Promise; - changeConversationNameApi: (conversation_id: number, name: string) => Promise; - createConversationApi: (name?: string) => Promise; - getChatsByConversationIdApi: (conversationId: number) => Promise; - deleteConversationApi: (conversationId: number) => Promise; - deleteAllConversationsApi: () => Promise; - sendMsgWithStreamResApi: (conversageId: number, message: string, name?: string) => Promise; - logoutApi: () => Promise; } export function ClickPromptButton({ diff --git a/packages/click-prompt-button/src/ExecutePromptButton.tsx b/packages/click-prompt-button/src/ExecutePromptButton.tsx index 85c6f9e..a9a1d18 100644 --- a/packages/click-prompt-button/src/ExecutePromptButton.tsx +++ b/packages/click-prompt-button/src/ExecutePromptButton.tsx @@ -4,25 +4,16 @@ import { BeatLoader } from "react-spinners"; import { StyledPromptButton } from "@/SharedButton"; import { LoggingDrawer } from "@/LoggingDrawer"; import { ClickPromptBird } from "@/ClickPromptBird"; +import { SharedApi } from "@/types/shared"; -export type ExecButtonProps = { +interface ExecButtonProps extends SharedApi { loading?: boolean; text: string; children?: React.ReactNode; handleResponse?: (response: any) => void; conversationId?: number; updateConversationId?: (conversationId: number) => void; - createConversation: (name?: string) => Promise; - sendMessage: (conversageId: number, message: string, name?: string) => Promise; - isLoggedInApi: () => Promise; - changeConversationNameApi: (conversation_id: number, name: string) => Promise; - createConversationApi: (name?: string) => Promise; - getChatsByConversationIdApi: (conversationId: number) => Promise; - deleteConversationApi: (conversationId: number) => Promise; - deleteAllConversationsApi: () => Promise; - sendMsgWithStreamResApi: (conversageId: number, message: string, name?: string) => Promise; - logoutApi: () => Promise; -}; +} export const ExecutePromptButton = ({ loading, @@ -31,8 +22,6 @@ export const ExecutePromptButton = ({ handleResponse, conversationId, updateConversationId, - createConversation, - sendMessage, isLoggedInApi, changeConversationNameApi, createConversationApi, @@ -63,7 +52,7 @@ export const ExecutePromptButton = ({ let newConversationId = conversationId; if (!conversationId) { - const conversation = await createConversation(); + const conversation = await createConversationApi(); if (!conversation) { return; } @@ -73,7 +62,7 @@ export const ExecutePromptButton = ({ } if (newConversationId) { - const response: any = await sendMessage(newConversationId, text); + const response: any = await sendMsgWithStreamResApi(newConversationId, text); if (response && handleResponse) { handleResponse(response as any); } @@ -117,13 +106,13 @@ export const ExecutePromptButton = ({ updateStatus: updateLoginStatus, isLoggedIn: hasLogin, initMessage: text, - changeConversationNameApi: changeConversationNameApi, - createConversationApi: createConversationApi, - getChatsByConversationIdApi: getChatsByConversationIdApi, - deleteConversationApi: deleteConversationApi, - deleteAllConversationsApi: deleteAllConversationsApi, - sendMsgWithStreamResApi: sendMsgWithStreamResApi, - logoutApi: logoutApi, + changeConversationNameApi, + createConversationApi, + getChatsByConversationIdApi, + deleteConversationApi, + deleteAllConversationsApi, + sendMsgWithStreamResApi, + logoutApi, })} ); diff --git a/packages/click-prompt-button/src/LoggingDrawer.tsx b/packages/click-prompt-button/src/LoggingDrawer.tsx index 64ab117..9e90463 100644 --- a/packages/click-prompt-button/src/LoggingDrawer.tsx +++ b/packages/click-prompt-button/src/LoggingDrawer.tsx @@ -1,20 +1,14 @@ import { Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerOverlay } from "@chakra-ui/react"; import { ChatGPTApp } from "@/chatgpt/ChatGPTApp"; import React from "react"; +import { SharedApi } from "@/types/shared"; -interface LoggingDrawerProps { +interface LoggingDrawerProps extends Omit { isOpen: boolean; handleClose: () => void; isLoggedIn: boolean; updateStatus?: (loggedIn: boolean) => void; initMessage: string; - changeConversationNameApi: (conversation_id: number, name: string) => Promise; - createConversationApi: (name?: string) => Promise; - getChatsByConversationIdApi: (conversationId: number) => Promise; - deleteConversationApi: (conversationId: number) => Promise; - deleteAllConversationsApi: () => Promise; - sendMsgWithStreamResApi: (conversageId: number, message: string, name?: string) => Promise; - logoutApi: () => Promise; } export function LoggingDrawer({ diff --git a/packages/click-prompt-button/src/chatgpt/ChatGPTApp.tsx b/packages/click-prompt-button/src/chatgpt/ChatGPTApp.tsx index 37d9f68..e6e22af 100644 --- a/packages/click-prompt-button/src/chatgpt/ChatGPTApp.tsx +++ b/packages/click-prompt-button/src/chatgpt/ChatGPTApp.tsx @@ -1,18 +1,12 @@ import { ChatRoom } from "@/chatgpt/ChatRoom"; import { LoginPage } from "@/chatgpt/LoginPage"; import React, { useEffect, useState } from "react"; +import { SharedApi } from "@/types/shared"; -type ChatGPTAppProps = { +interface ChatGPTAppProps extends Omit { loggedIn?: boolean; updateLoginStatus?: (loggedIn: boolean) => void; initMessage?: string; - changeConversationNameApi: (conversation_id: number, name: string) => Promise; - createConversationApi: (name?: string) => Promise; - getChatsByConversationIdApi: (conversationId: number) => Promise; - deleteConversationApi: (conversationId: number) => Promise; - deleteAllConversationsApi: () => Promise; - sendMsgWithStreamResApi: (conversageId: number, message: string, name?: string) => Promise; - logoutApi: () => Promise; }; export const ChatGPTApp = ({ loggedIn, diff --git a/packages/click-prompt-button/src/chatgpt/ChatRoom.tsx b/packages/click-prompt-button/src/chatgpt/ChatRoom.tsx index e0a59e0..907ad4d 100644 --- a/packages/click-prompt-button/src/chatgpt/ChatRoom.tsx +++ b/packages/click-prompt-button/src/chatgpt/ChatRoom.tsx @@ -10,6 +10,7 @@ import { BeatLoader } from "react-spinners"; import { useDebouncedCallback } from "use-debounce"; import { Input } from "@chakra-ui/react"; import SimpleMarkdown from "@/markdown/SimpleMarkdown"; +import { SharedApi } from "@/types/shared"; const ChatInput = styled("input")` background: #ffffff; @@ -74,6 +75,11 @@ const ChatSendButton = styled("button")` outline: none; `; +interface ChatRoomProps extends Omit { + setIsLoggedIn: Dispatch>; + initMessage?: string; +} + export const ChatRoom = ({ setIsLoggedIn, initMessage, @@ -84,17 +90,7 @@ export const ChatRoom = ({ deleteAllConversationsApi, sendMsgWithStreamResApi, logoutApi, -}: { - setIsLoggedIn: Dispatch>; - initMessage?: string; - changeConversationNameApi: (conversation_id: number, name: string) => Promise; - createConversationApi: (name?: string) => Promise; - getChatsByConversationIdApi: (conversationId: number) => Promise; - deleteConversationApi: (conversationId: number) => Promise; - deleteAllConversationsApi: () => Promise; - sendMsgWithStreamResApi: (conversageId: number, message: string, name?: string) => Promise; - logoutApi: () => Promise; -}) => { +}: ChatRoomProps) => { const chatsWrapper = React.useRef(null); const [disable, setDisable] = React.useState(false); const [chatHistory, setChatHistory] = React.useState([]); diff --git a/packages/click-prompt-button/src/types/shared.ts b/packages/click-prompt-button/src/types/shared.ts new file mode 100644 index 0000000..a8f20a0 --- /dev/null +++ b/packages/click-prompt-button/src/types/shared.ts @@ -0,0 +1,10 @@ +export interface SharedApi { + isLoggedInApi: () => Promise; + changeConversationNameApi: (conversation_id: number, name: string) => Promise; + createConversationApi: (name?: string) => Promise; + getChatsByConversationIdApi: (conversationId: number) => Promise; + deleteConversationApi: (conversationId: number) => Promise; + deleteAllConversationsApi: () => Promise; + sendMsgWithStreamResApi: (conversageId: number, message: string, name?: string) => Promise; + logoutApi: () => Promise; +} From 285eb5964174eec2a26f39188a493fa90414f726 Mon Sep 17 00:00:00 2001 From: teobler Date: Wed, 22 Mar 2023 21:19:55 +0800 Subject: [PATCH 03/22] feature: add build script via vite Signed-off-by: teobler --- .gitignore | 2 +- package-lock.json | 526 +++++------------- packages/click-prompt-button/package.json | 11 +- .../src/ClickPromptBird.tsx | 13 +- .../click-prompt-button/src/CustomIcon.tsx | 4 +- .../click-prompt-button/src/SharedButton.tsx | 7 - .../src/assets/clickprompt-light.svg | 16 + .../src/assets/icons/send.svg | 1 + .../src/chatgpt/ChatRoom.tsx | 10 +- packages/click-prompt-button/src/index.ts | 7 + packages/click-prompt-button/src/index.tsx | 3 - packages/click-prompt-button/src/types.d.ts | 13 +- packages/click-prompt-button/vite.config.ts | 21 +- 13 files changed, 185 insertions(+), 449 deletions(-) create mode 100644 packages/click-prompt-button/src/assets/clickprompt-light.svg create mode 100644 packages/click-prompt-button/src/assets/icons/send.svg create mode 100644 packages/click-prompt-button/src/index.ts delete mode 100644 packages/click-prompt-button/src/index.tsx diff --git a/.gitignore b/.gitignore index 72eca3f..60704f4 100644 --- a/.gitignore +++ b/.gitignore @@ -38,7 +38,7 @@ yarn-error.log* next-env.d.ts .idea -/dist +**/dist public/sitemap-0.xml src/assets/resources/**/*.json diff --git a/package-lock.json b/package-lock.json index 8f46455..b267887 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6552,6 +6552,28 @@ "type-fest": "^2.0.0" } }, + "node_modules/@rollup/plugin-url": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/@rollup/plugin-url/-/plugin-url-8.0.1.tgz", + "integrity": "sha512-8ajztphXb5e19dk3Iwjtm2eSYJR8jFQubZ8pJ1GG2MBMM7/qUedLnZAN+Vt4jqbcT/m27jfjIBocvrzV0giNRw==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^5.0.1", + "make-dir": "^3.1.0", + "mime": "^3.0.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, "node_modules/@rollup/pluginutils": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz", @@ -7040,6 +7062,43 @@ "@svgr/core": "*" } }, + "node_modules/@svgr/rollup": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/rollup/-/rollup-6.5.1.tgz", + "integrity": "sha512-GeUfq0grJfpcn2jRWRaZ4npn27nnWK21vUj6MqDqknuJnEqGADcZZjO9wrUAaPLr3InAnQi0Z7nwiNUdzkaj6A==", + "dev": true, + "dependencies": { + "@babel/core": "^7.19.6", + "@babel/plugin-transform-react-constant-elements": "^7.18.12", + "@babel/preset-env": "^7.19.4", + "@babel/preset-react": "^7.18.6", + "@babel/preset-typescript": "^7.18.6", + "@rollup/pluginutils": "^4.2.1", + "@svgr/core": "^6.5.1", + "@svgr/plugin-jsx": "^6.5.1", + "@svgr/plugin-svgo": "^6.5.1" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, + "node_modules/@svgr/rollup/node_modules/@rollup/pluginutils": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz", + "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==", + "dev": true, + "dependencies": { + "estree-walker": "^2.0.1", + "picomatch": "^2.2.2" + }, + "engines": { + "node": ">= 8.0.0" + } + }, "node_modules/@svgr/webpack": { "version": "6.5.1", "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-6.5.1.tgz", @@ -7657,16 +7716,6 @@ "resolved": "https://registry.npmjs.org/@types/direction/-/direction-1.0.0.tgz", "integrity": "sha512-et1wmqXm/5smJ8lTJfBnwD12/2Y7eVJLKbuaRT0h2xaKAoo1h8Dz2Io22GObDLFwxY1ddXRTLH3Gq5v44Fl/2w==" }, - "node_modules/@types/eslint": { - "version": "8.4.10", - "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.10.tgz", - "integrity": "sha512-Sl/HOqN8NKPmhWo2VBEPm0nvHnu2LL3v9vKo8MEq0EtbJ4eVzGPl41VNPvn5E1i5poMk4/XD8UriLHpJvEP/Nw==", - "dev": true, - "dependencies": { - "@types/estree": "*", - "@types/json-schema": "*" - } - }, "node_modules/@types/estree": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz", @@ -17040,6 +17089,18 @@ "node": ">=8.6" } }, + "node_modules/mime": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz", + "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==", + "dev": true, + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/mime-db": { "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", @@ -21230,224 +21291,6 @@ "node": ">=12" } }, - "node_modules/vite-plugin-linter": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/vite-plugin-linter/-/vite-plugin-linter-2.0.2.tgz", - "integrity": "sha512-ssIrqn9k+eVFw5D6jPyNA7qWmzQBilTZQyv0SxPGl1TZacae/mzue9253kT1VklcrVtPMua1KOSmrop95Vp/gg==", - "dev": true, - "dependencies": { - "@rollup/pluginutils": "5.0.2", - "@types/eslint": "8.4.10", - "chokidar": "3.5.3", - "eslint": "8.29.0", - "typescript": "4.9.3" - }, - "bin": { - "vite-plugin-linter": "dist/lintCommand.js" - } - }, - "node_modules/vite-plugin-linter/node_modules/@eslint/eslintrc": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz", - "integrity": "sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==", - "dev": true, - "dependencies": { - "ajv": "^6.12.4", - "debug": "^4.3.2", - "espree": "^9.4.0", - "globals": "^13.19.0", - "ignore": "^5.2.0", - "import-fresh": "^3.2.1", - "js-yaml": "^4.1.0", - "minimatch": "^3.1.2", - "strip-json-comments": "^3.1.1" - }, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "funding": { - "url": "https://opencollective.com/eslint" - } - }, - "node_modules/vite-plugin-linter/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/vite-plugin-linter/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/vite-plugin-linter/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/vite-plugin-linter/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "node_modules/vite-plugin-linter/node_modules/eslint": { - "version": "8.29.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.29.0.tgz", - "integrity": "sha512-isQ4EEiyUjZFbEKvEGJKKGBwXtvXX+zJbkVKCgTuB9t/+jUBcy8avhkEwWJecI15BkRkOYmvIM5ynbhRjEkoeg==", - "dev": true, - "dependencies": { - "@eslint/eslintrc": "^1.3.3", - "@humanwhocodes/config-array": "^0.11.6", - "@humanwhocodes/module-importer": "^1.0.1", - "@nodelib/fs.walk": "^1.2.8", - "ajv": "^6.10.0", - "chalk": "^4.0.0", - "cross-spawn": "^7.0.2", - "debug": "^4.3.2", - "doctrine": "^3.0.0", - "escape-string-regexp": "^4.0.0", - "eslint-scope": "^7.1.1", - "eslint-utils": "^3.0.0", - "eslint-visitor-keys": "^3.3.0", - "espree": "^9.4.0", - "esquery": "^1.4.0", - "esutils": "^2.0.2", - "fast-deep-equal": "^3.1.3", - "file-entry-cache": "^6.0.1", - "find-up": "^5.0.0", - "glob-parent": "^6.0.2", - "globals": "^13.15.0", - "grapheme-splitter": "^1.0.4", - "ignore": "^5.2.0", - "import-fresh": "^3.0.0", - "imurmurhash": "^0.1.4", - "is-glob": "^4.0.0", - "is-path-inside": "^3.0.3", - "js-sdsl": "^4.1.4", - "js-yaml": "^4.1.0", - "json-stable-stringify-without-jsonify": "^1.0.1", - "levn": "^0.4.1", - "lodash.merge": "^4.6.2", - "minimatch": "^3.1.2", - "natural-compare": "^1.4.0", - "optionator": "^0.9.1", - "regexpp": "^3.2.0", - "strip-ansi": "^6.0.1", - "strip-json-comments": "^3.1.0", - "text-table": "^0.2.0" - }, - "bin": { - "eslint": "bin/eslint.js" - }, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "funding": { - "url": "https://opencollective.com/eslint" - } - }, - "node_modules/vite-plugin-linter/node_modules/eslint-scope": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz", - "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==", - "dev": true, - "dependencies": { - "esrecurse": "^4.3.0", - "estraverse": "^5.2.0" - }, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - } - }, - "node_modules/vite-plugin-linter/node_modules/globals": { - "version": "13.20.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz", - "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==", - "dev": true, - "dependencies": { - "type-fest": "^0.20.2" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/vite-plugin-linter/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/vite-plugin-linter/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/vite-plugin-linter/node_modules/type-fest": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", - "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", - "dev": true, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/vite-plugin-linter/node_modules/typescript": { - "version": "4.9.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz", - "integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==", - "dev": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } - }, "node_modules/vite-tsconfig-paths": { "version": "4.0.7", "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.0.7.tgz", @@ -22102,16 +21945,17 @@ "svg-pan-zoom": "^3.6.1" }, "devDependencies": { + "@rollup/plugin-url": "^8.0.1", + "@svgr/rollup": "^6.5.1", "@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" + "next": "^13.2.4", + "react": "^18.2.0", + "react-dom": "^18.2.0" } } }, @@ -26688,6 +26532,17 @@ "type-fest": "^2.0.0" } }, + "@rollup/plugin-url": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/@rollup/plugin-url/-/plugin-url-8.0.1.tgz", + "integrity": "sha512-8ajztphXb5e19dk3Iwjtm2eSYJR8jFQubZ8pJ1GG2MBMM7/qUedLnZAN+Vt4jqbcT/m27jfjIBocvrzV0giNRw==", + "dev": true, + "requires": { + "@rollup/pluginutils": "^5.0.1", + "make-dir": "^3.1.0", + "mime": "^3.0.0" + } + }, "@rollup/pluginutils": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz", @@ -27018,6 +26873,35 @@ "svgo": "^2.8.0" } }, + "@svgr/rollup": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@svgr/rollup/-/rollup-6.5.1.tgz", + "integrity": "sha512-GeUfq0grJfpcn2jRWRaZ4npn27nnWK21vUj6MqDqknuJnEqGADcZZjO9wrUAaPLr3InAnQi0Z7nwiNUdzkaj6A==", + "dev": true, + "requires": { + "@babel/core": "^7.19.6", + "@babel/plugin-transform-react-constant-elements": "^7.18.12", + "@babel/preset-env": "^7.19.4", + "@babel/preset-react": "^7.18.6", + "@babel/preset-typescript": "^7.18.6", + "@rollup/pluginutils": "^4.2.1", + "@svgr/core": "^6.5.1", + "@svgr/plugin-jsx": "^6.5.1", + "@svgr/plugin-svgo": "^6.5.1" + }, + "dependencies": { + "@rollup/pluginutils": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz", + "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==", + "dev": true, + "requires": { + "estree-walker": "^2.0.1", + "picomatch": "^2.2.2" + } + } + } + }, "@svgr/webpack": { "version": "6.5.1", "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-6.5.1.tgz", @@ -27553,16 +27437,6 @@ "resolved": "https://registry.npmjs.org/@types/direction/-/direction-1.0.0.tgz", "integrity": "sha512-et1wmqXm/5smJ8lTJfBnwD12/2Y7eVJLKbuaRT0h2xaKAoo1h8Dz2Io22GObDLFwxY1ddXRTLH3Gq5v44Fl/2w==" }, - "@types/eslint": { - "version": "8.4.10", - "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.10.tgz", - "integrity": "sha512-Sl/HOqN8NKPmhWo2VBEPm0nvHnu2LL3v9vKo8MEq0EtbJ4eVzGPl41VNPvn5E1i5poMk4/XD8UriLHpJvEP/Nw==", - "dev": true, - "requires": { - "@types/estree": "*", - "@types/json-schema": "*" - } - }, "@types/estree": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz", @@ -28997,6 +28871,8 @@ "@chakra-ui/system": "^2.5.1", "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", + "@rollup/plugin-url": "^8.0.1", + "@svgr/rollup": "^6.5.1", "@vitejs/plugin-react": "^3.1.0", "client-only": "^0.0.1", "mermaid": "^10.0.2", @@ -29009,7 +28885,6 @@ "svg-pan-zoom": "^3.6.1", "vite": "^4.2.1", "vite-plugin-dts": "^2.1.0", - "vite-plugin-linter": "^2.0.2", "vite-tsconfig-paths": "^4.0.7" } }, @@ -34524,6 +34399,12 @@ "picomatch": "^2.3.1" } }, + "mime": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz", + "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==", + "dev": true + }, "mime-db": { "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", @@ -37509,165 +37390,6 @@ } } }, - "vite-plugin-linter": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/vite-plugin-linter/-/vite-plugin-linter-2.0.2.tgz", - "integrity": "sha512-ssIrqn9k+eVFw5D6jPyNA7qWmzQBilTZQyv0SxPGl1TZacae/mzue9253kT1VklcrVtPMua1KOSmrop95Vp/gg==", - "dev": true, - "requires": { - "@rollup/pluginutils": "5.0.2", - "@types/eslint": "8.4.10", - "chokidar": "3.5.3", - "eslint": "8.29.0", - "typescript": "4.9.3" - }, - "dependencies": { - "@eslint/eslintrc": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz", - "integrity": "sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==", - "dev": true, - "requires": { - "ajv": "^6.12.4", - "debug": "^4.3.2", - "espree": "^9.4.0", - "globals": "^13.19.0", - "ignore": "^5.2.0", - "import-fresh": "^3.2.1", - "js-yaml": "^4.1.0", - "minimatch": "^3.1.2", - "strip-json-comments": "^3.1.1" - } - }, - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "eslint": { - "version": "8.29.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.29.0.tgz", - "integrity": "sha512-isQ4EEiyUjZFbEKvEGJKKGBwXtvXX+zJbkVKCgTuB9t/+jUBcy8avhkEwWJecI15BkRkOYmvIM5ynbhRjEkoeg==", - "dev": true, - "requires": { - "@eslint/eslintrc": "^1.3.3", - "@humanwhocodes/config-array": "^0.11.6", - "@humanwhocodes/module-importer": "^1.0.1", - "@nodelib/fs.walk": "^1.2.8", - "ajv": "^6.10.0", - "chalk": "^4.0.0", - "cross-spawn": "^7.0.2", - "debug": "^4.3.2", - "doctrine": "^3.0.0", - "escape-string-regexp": "^4.0.0", - "eslint-scope": "^7.1.1", - "eslint-utils": "^3.0.0", - "eslint-visitor-keys": "^3.3.0", - "espree": "^9.4.0", - "esquery": "^1.4.0", - "esutils": "^2.0.2", - "fast-deep-equal": "^3.1.3", - "file-entry-cache": "^6.0.1", - "find-up": "^5.0.0", - "glob-parent": "^6.0.2", - "globals": "^13.15.0", - "grapheme-splitter": "^1.0.4", - "ignore": "^5.2.0", - "import-fresh": "^3.0.0", - "imurmurhash": "^0.1.4", - "is-glob": "^4.0.0", - "is-path-inside": "^3.0.3", - "js-sdsl": "^4.1.4", - "js-yaml": "^4.1.0", - "json-stable-stringify-without-jsonify": "^1.0.1", - "levn": "^0.4.1", - "lodash.merge": "^4.6.2", - "minimatch": "^3.1.2", - "natural-compare": "^1.4.0", - "optionator": "^0.9.1", - "regexpp": "^3.2.0", - "strip-ansi": "^6.0.1", - "strip-json-comments": "^3.1.0", - "text-table": "^0.2.0" - } - }, - "eslint-scope": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz", - "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==", - "dev": true, - "requires": { - "esrecurse": "^4.3.0", - "estraverse": "^5.2.0" - } - }, - "globals": { - "version": "13.20.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz", - "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==", - "dev": true, - "requires": { - "type-fest": "^0.20.2" - } - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "requires": { - "has-flag": "^4.0.0" - } - }, - "type-fest": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", - "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", - "dev": true - }, - "typescript": { - "version": "4.9.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz", - "integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==", - "dev": true - } - } - }, "vite-tsconfig-paths": { "version": "4.0.7", "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.0.7.tgz", diff --git a/packages/click-prompt-button/package.json b/packages/click-prompt-button/package.json index 1a026b3..8ac0713 100644 --- a/packages/click-prompt-button/package.json +++ b/packages/click-prompt-button/package.json @@ -5,7 +5,7 @@ "main": "index.js", "license": "MIT", "scripts": { - "build": "echo build" + "build": "vite build" }, "dependencies": { "@chakra-ui/icons": "^2.0.17", @@ -25,15 +25,16 @@ "svg-pan-zoom": "^3.6.1" }, "devDependencies": { + "@rollup/plugin-url": "^8.0.1", + "@svgr/rollup": "^6.5.1", "@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" + "next": "^13.2.4", + "react": "^18.2.0", + "react-dom": "^18.2.0" } } diff --git a/packages/click-prompt-button/src/ClickPromptBird.tsx b/packages/click-prompt-button/src/ClickPromptBird.tsx index 0e3a7e2..b3f928c 100644 --- a/packages/click-prompt-button/src/ClickPromptBird.tsx +++ b/packages/click-prompt-button/src/ClickPromptBird.tsx @@ -1,9 +1,16 @@ -import { StyledBird } from "@/SharedButton"; -import clickPromptLogo from "*.svg?url"; +import clickPromptLogoUrl from "@/assets/clickprompt-light.svg"; import React from "react"; +import styled from "@emotion/styled"; +import Image from "next/image"; type ClickPromptBirdProps = { width?: number; height?: number }; +const StyledBird = styled(Image)` + position: absolute; + top: -20px; + right: -20px; +`; + export const ClickPromptBird = ({ width = 38, height = 32 }: ClickPromptBirdProps) => ( - + ); diff --git a/packages/click-prompt-button/src/CustomIcon.tsx b/packages/click-prompt-button/src/CustomIcon.tsx index 4299171..7ea89a8 100644 --- a/packages/click-prompt-button/src/CustomIcon.tsx +++ b/packages/click-prompt-button/src/CustomIcon.tsx @@ -1,7 +1,7 @@ import React from "react"; import Image from "next/image"; -import clickPromptSmall from "@/assets/clickprompt-small.svg?url"; +import clickPromptSmallUrl from "@/assets/clickprompt-small.svg"; export function ClickPromptSmall({ width = 32, height = 32 }) { - return ClickPrompt Logo; + return ClickPrompt Logo; } diff --git a/packages/click-prompt-button/src/SharedButton.tsx b/packages/click-prompt-button/src/SharedButton.tsx index 9a85677..7c6feb6 100644 --- a/packages/click-prompt-button/src/SharedButton.tsx +++ b/packages/click-prompt-button/src/SharedButton.tsx @@ -1,15 +1,8 @@ -import Image from "next/image"; import React 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; diff --git a/packages/click-prompt-button/src/assets/clickprompt-light.svg b/packages/click-prompt-button/src/assets/clickprompt-light.svg new file mode 100644 index 0000000..71967b8 --- /dev/null +++ b/packages/click-prompt-button/src/assets/clickprompt-light.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/packages/click-prompt-button/src/assets/icons/send.svg b/packages/click-prompt-button/src/assets/icons/send.svg new file mode 100644 index 0000000..8d97864 --- /dev/null +++ b/packages/click-prompt-button/src/assets/icons/send.svg @@ -0,0 +1 @@ + diff --git a/packages/click-prompt-button/src/chatgpt/ChatRoom.tsx b/packages/click-prompt-button/src/chatgpt/ChatRoom.tsx index 907ad4d..59de694 100644 --- a/packages/click-prompt-button/src/chatgpt/ChatRoom.tsx +++ b/packages/click-prompt-button/src/chatgpt/ChatRoom.tsx @@ -1,9 +1,9 @@ -import NewChat from "@/assets/icons/new-chat.svg"; -import TrashcanIcon from "@/assets/icons/trashcan.svg"; -import LogoutIcon from "@/assets/icons/logout.svg"; +import { ReactComponent as NewChat } from "@/assets/icons/new-chat.svg"; +import { ReactComponent as TrashcanIcon } from "@/assets/icons/trashcan.svg"; +import { ReactComponent as LogoutIcon } from "@/assets/icons/logout.svg"; import Image from "next/image"; import content from "@/assets/images/content.png"; -import send from "@/assets/icons/send.svg?url"; +import sendIconUrl from "@/assets/icons/send.svg"; import React, { Dispatch, SetStateAction, useEffect, useState } from "react"; import styled from "@emotion/styled"; import { BeatLoader } from "react-spinners"; @@ -66,7 +66,7 @@ const ChatSendButton = styled("button")` right: 8px; width: 48px; height: 48px; - background-image: url(${send}); + background-image: url(${sendIconUrl}); background-size: 24px; background-position: center; background-repeat: no-repeat; diff --git a/packages/click-prompt-button/src/index.ts b/packages/click-prompt-button/src/index.ts new file mode 100644 index 0000000..1b5d01c --- /dev/null +++ b/packages/click-prompt-button/src/index.ts @@ -0,0 +1,7 @@ +"use client"; + +export { ClickPromptButton } from "@/ClickPromptButton"; +export { ExecutePromptButton } from "@/ExecutePromptButton"; +export { ChatGPTApp } from "@/chatgpt/ChatGPTApp"; +export { ChatRoom } from "@/chatgpt/ChatRoom"; +export { LoginPage } from "@/chatgpt/LoginPage"; diff --git a/packages/click-prompt-button/src/index.tsx b/packages/click-prompt-button/src/index.tsx deleted file mode 100644 index 7f764d5..0000000 --- a/packages/click-prompt-button/src/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -"use client"; - -export { ClickPromptButton } from "./ClickPromptButton"; diff --git a/packages/click-prompt-button/src/types.d.ts b/packages/click-prompt-button/src/types.d.ts index 8c7b24c..b959fd6 100644 --- a/packages/click-prompt-button/src/types.d.ts +++ b/packages/click-prompt-button/src/types.d.ts @@ -1,14 +1,11 @@ -declare module "*.svg?url" { - const content: string; - export default content; -} - declare module "*.png" { const content: any; export default content; } -declare module "*.svg" { - const content: any; - export default content; +declare module '*.svg' { + import React = require('react'); + export const ReactComponent: React.FC>; + const src: string; + export default src; } diff --git a/packages/click-prompt-button/vite.config.ts b/packages/click-prompt-button/vite.config.ts index b44ca25..3463802 100644 --- a/packages/click-prompt-button/vite.config.ts +++ b/packages/click-prompt-button/vite.config.ts @@ -1,33 +1,28 @@ import { resolve } from "node:path"; - import react from "@vitejs/plugin-react"; import { defineConfig } from "vite"; import dts from "vite-plugin-dts"; -import EsLint from "vite-plugin-linter"; import tsConfigPaths from "vite-tsconfig-paths"; import * as packageJson from "./package.json"; - -const { EsLinter, linterPlugin } = EsLint; +import url from "@rollup/plugin-url"; +import svgr from "@svgr/rollup"; // https://vitejs.dev/config/ export default defineConfig((configEnv) => ({ plugins: [ + url(), + svgr(), dts({ - include: ["src/component/"], + include: ["src/"], }), react(), tsConfigPaths(), - linterPlugin({ - include: ["./src}/**/*.{ts,tsx}"], - linters: [new EsLinter({ configEnv })], - }), ], build: { lib: { - entry: resolve("src", "component/index.ts"), - name: "ReactViteLibrary", - formats: ["es", "umd"], - fileName: (format) => `react-vite-library.${format}.js`, + entry: resolve("src", "index.ts"), + name: "ClickPromptButton", + formats: ["es"], }, rollupOptions: { external: [...Object.keys(packageJson.peerDependencies)], From 1e92f0d842a6a8310f11463fb11bbaeb849b0418 Mon Sep 17 00:00:00 2001 From: teobler Date: Wed, 22 Mar 2023 21:52:19 +0800 Subject: [PATCH 04/22] refactor: remove all unnecessary any type guard Signed-off-by: teobler --- .../src/ClickPromptButton.tsx | 7 ++- .../src/ExecutePromptButton.tsx | 11 +++-- .../click-prompt-button/src/LoggingDrawer.tsx | 5 +- .../src/chatgpt/ChatGPTApp.tsx | 13 ++--- .../src/chatgpt/ChatRoom.tsx | 24 +++++----- .../src/chatgpt/LoginPage.tsx | 3 +- .../click-prompt-button/src/types/shared.ts | 47 +++++++++++++++---- 7 files changed, 74 insertions(+), 36 deletions(-) diff --git a/packages/click-prompt-button/src/ClickPromptButton.tsx b/packages/click-prompt-button/src/ClickPromptButton.tsx index 3a78ebe..6c3853b 100644 --- a/packages/click-prompt-button/src/ClickPromptButton.tsx +++ b/packages/click-prompt-button/src/ClickPromptButton.tsx @@ -5,7 +5,7 @@ import { ClickPromptSmall } from "@/CustomIcon"; import { ButtonSize, StyledPromptButton } from "@/SharedButton"; import { LoggingDrawer } from "@/LoggingDrawer"; import { ClickPromptBird } from "@/ClickPromptBird"; -import { SharedApi } from "@/types/shared"; +import type { Response, SharedApi } from "@/types/shared"; interface ClickPromptButtonProps extends SharedApi { loading?: boolean; @@ -13,6 +13,7 @@ interface ClickPromptButtonProps extends SharedApi { size?: ButtonSize; text: string; children?: React.ReactNode; + loginApi: () => Promise; } export function ClickPromptButton({ @@ -29,12 +30,13 @@ export function ClickPromptButton({ deleteAllConversationsApi, sendMsgWithStreamResApi, logoutApi, + loginApi, }: ClickPromptButtonProps) { const [isLoading, setIsLoading] = useState(loading); const [isLoggedIn, setIsLoggedIn] = useState(false); const { isOpen, onOpen, onClose } = useDisclosure(); - const handleClick = async (event: any) => { + const handleClick = async (event: React.MouseEvent) => { setIsLoading(true); const isLoggedIn = await isLoggedInApi(); setIsLoggedIn(isLoggedIn); @@ -90,6 +92,7 @@ export function ClickPromptButton({ deleteAllConversationsApi, sendMsgWithStreamResApi, logoutApi, + loginApi, })} ); diff --git a/packages/click-prompt-button/src/ExecutePromptButton.tsx b/packages/click-prompt-button/src/ExecutePromptButton.tsx index a9a1d18..4898b74 100644 --- a/packages/click-prompt-button/src/ExecutePromptButton.tsx +++ b/packages/click-prompt-button/src/ExecutePromptButton.tsx @@ -4,15 +4,16 @@ import { BeatLoader } from "react-spinners"; import { StyledPromptButton } from "@/SharedButton"; import { LoggingDrawer } from "@/LoggingDrawer"; import { ClickPromptBird } from "@/ClickPromptBird"; -import { SharedApi } from "@/types/shared"; +import type { Response, SharedApi } from "@/types/shared"; interface ExecButtonProps extends SharedApi { loading?: boolean; text: string; children?: React.ReactNode; - handleResponse?: (response: any) => void; + handleResponse?: (response: ReadableStream | null) => void; conversationId?: number; updateConversationId?: (conversationId: number) => void; + loginApi: () => Promise; } export const ExecutePromptButton = ({ @@ -30,6 +31,7 @@ export const ExecutePromptButton = ({ deleteAllConversationsApi, sendMsgWithStreamResApi, logoutApi, + loginApi, }: ExecButtonProps) => { const [isLoading, setIsLoading] = useState(loading); const { isOpen, onOpen, onClose } = useDisclosure(); @@ -62,9 +64,9 @@ export const ExecutePromptButton = ({ } if (newConversationId) { - const response: any = await sendMsgWithStreamResApi(newConversationId, text); + const response = await sendMsgWithStreamResApi(newConversationId, text); if (response && handleResponse) { - handleResponse(response as any); + handleResponse(response); } } @@ -113,6 +115,7 @@ export const ExecutePromptButton = ({ deleteAllConversationsApi, sendMsgWithStreamResApi, logoutApi, + loginApi, })} ); diff --git a/packages/click-prompt-button/src/LoggingDrawer.tsx b/packages/click-prompt-button/src/LoggingDrawer.tsx index 9e90463..6613e9d 100644 --- a/packages/click-prompt-button/src/LoggingDrawer.tsx +++ b/packages/click-prompt-button/src/LoggingDrawer.tsx @@ -1,7 +1,7 @@ import { Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerOverlay } from "@chakra-ui/react"; import { ChatGPTApp } from "@/chatgpt/ChatGPTApp"; import React from "react"; -import { SharedApi } from "@/types/shared"; +import type { Response, SharedApi } from "@/types/shared"; interface LoggingDrawerProps extends Omit { isOpen: boolean; @@ -9,6 +9,7 @@ interface LoggingDrawerProps extends Omit { isLoggedIn: boolean; updateStatus?: (loggedIn: boolean) => void; initMessage: string; + loginApi: () => Promise; } export function LoggingDrawer({ @@ -24,6 +25,7 @@ export function LoggingDrawer({ deleteAllConversationsApi, sendMsgWithStreamResApi, logoutApi, + loginApi, }: LoggingDrawerProps) { return ( @@ -43,6 +45,7 @@ export function LoggingDrawer({ deleteAllConversationsApi={deleteAllConversationsApi} sendMsgWithStreamResApi={sendMsgWithStreamResApi} logoutApi={logoutApi} + loginApi={loginApi} /> diff --git a/packages/click-prompt-button/src/chatgpt/ChatGPTApp.tsx b/packages/click-prompt-button/src/chatgpt/ChatGPTApp.tsx index e6e22af..6910583 100644 --- a/packages/click-prompt-button/src/chatgpt/ChatGPTApp.tsx +++ b/packages/click-prompt-button/src/chatgpt/ChatGPTApp.tsx @@ -1,13 +1,14 @@ import { ChatRoom } from "@/chatgpt/ChatRoom"; import { LoginPage } from "@/chatgpt/LoginPage"; import React, { useEffect, useState } from "react"; -import { SharedApi } from "@/types/shared"; +import type { Response, SharedApi } from "@/types/shared"; interface ChatGPTAppProps extends Omit { loggedIn?: boolean; updateLoginStatus?: (loggedIn: boolean) => void; initMessage?: string; -}; + loginApi: () => Promise; +} export const ChatGPTApp = ({ loggedIn, initMessage, @@ -19,6 +20,7 @@ export const ChatGPTApp = ({ deleteAllConversationsApi, sendMsgWithStreamResApi, logoutApi, + loginApi, }: ChatGPTAppProps) => { const [isLoggedIn, setIsLoggedIn] = useState(loggedIn ?? false); @@ -41,11 +43,6 @@ export const ChatGPTApp = ({ logoutApi={logoutApi} /> ) : ( - { - throw new Error("Function not implemented."); - }} - /> + ); }; diff --git a/packages/click-prompt-button/src/chatgpt/ChatRoom.tsx b/packages/click-prompt-button/src/chatgpt/ChatRoom.tsx index 59de694..e525b2e 100644 --- a/packages/click-prompt-button/src/chatgpt/ChatRoom.tsx +++ b/packages/click-prompt-button/src/chatgpt/ChatRoom.tsx @@ -10,7 +10,7 @@ import { BeatLoader } from "react-spinners"; import { useDebouncedCallback } from "use-debounce"; import { Input } from "@chakra-ui/react"; import SimpleMarkdown from "@/markdown/SimpleMarkdown"; -import { SharedApi } from "@/types/shared"; +import type { Chat, Conversation, SharedApi } from "@/types/shared"; const ChatInput = styled("input")` background: #ffffff; @@ -93,10 +93,10 @@ export const ChatRoom = ({ }: ChatRoomProps) => { const chatsWrapper = React.useRef(null); const [disable, setDisable] = React.useState(false); - const [chatHistory, setChatHistory] = React.useState([]); + const [chatHistory, setChatHistory] = React.useState([]); const [message, setMessage] = React.useState(initMessage ?? ""); - const [conversations, setConversations] = useState([]); + const [conversations, setConversations] = useState([]); const [currentConversation, setCurrentConversation] = useState(null); // editing conversation name const [editing, setEditing] = useState(null); @@ -110,11 +110,11 @@ export const ChatRoom = ({ method: "POST", body: JSON.stringify({ action: "get_conversations", - } as any), + }), }); - const data = (await response.json()) as any; + const data = await response.json(); if (!response.ok) { - alert("Error: " + JSON.stringify((data as any).error)); + alert("Error: " + JSON.stringify(data.error)); return; } setConversations(data); @@ -155,7 +155,7 @@ export const ChatRoom = ({ async function changeConversationName(conversationId: number, name: string) { await changeConversationNameApi(conversationId, name); - setConversations((c: any[]) => + setConversations((c) => c.map((conversation) => { if (conversation.id === conversationId) { return { @@ -175,7 +175,7 @@ export const ChatRoom = ({ if (conversationId == null) { return; } - setEditingName(conversations.find((c: any) => c.id === conversationId)?.name ?? ""); + setEditingName(conversations.find((c) => c.id === conversationId)?.name ?? ""); setEditing(conversationId); return; } @@ -208,7 +208,7 @@ export const ChatRoom = ({ if (!data) { return; } - setConversations(conversations.filter((conversation: any) => conversation.id !== conversationId)); + setConversations(conversations.filter((conversation) => conversation.id !== conversationId)); } async function deleteAllConversations() { @@ -242,7 +242,7 @@ export const ChatRoom = ({ // TODO(CGQAQ): custom name of user // name: "User", }, - ] as any; + ] as Chat[]; setChatHistory([...updatedHistory]); @@ -312,7 +312,7 @@ export const ChatRoom = ({ New chat
- {conversations.map((conversation: any) => ( + {conversations.map((conversation) => (
- {chatHistory.map((chat: any, index: number) => { + {chatHistory.map((chat, index) => { return (
{chat.role === "user" ? ( diff --git a/packages/click-prompt-button/src/chatgpt/LoginPage.tsx b/packages/click-prompt-button/src/chatgpt/LoginPage.tsx index 1953e11..e58a065 100644 --- a/packages/click-prompt-button/src/chatgpt/LoginPage.tsx +++ b/packages/click-prompt-button/src/chatgpt/LoginPage.tsx @@ -1,12 +1,13 @@ import React, { Dispatch, SetStateAction } from "react"; import { Button, Input } from "@chakra-ui/react"; +import type { Response } from "@/types/shared"; export const LoginPage = ({ setIsLoggedIn, loginApi, }: { setIsLoggedIn: Dispatch>; - loginApi: (key: string) => Promise; + loginApi: (key: string) => Promise; }) => { const [openAiKey, setOpenAiKey] = React.useState(""); diff --git a/packages/click-prompt-button/src/types/shared.ts b/packages/click-prompt-button/src/types/shared.ts index a8f20a0..d75f80b 100644 --- a/packages/click-prompt-button/src/types/shared.ts +++ b/packages/click-prompt-button/src/types/shared.ts @@ -1,10 +1,41 @@ export interface SharedApi { - isLoggedInApi: () => Promise; - changeConversationNameApi: (conversation_id: number, name: string) => Promise; - createConversationApi: (name?: string) => Promise; - getChatsByConversationIdApi: (conversationId: number) => Promise; - deleteConversationApi: (conversationId: number) => Promise; - deleteAllConversationsApi: () => Promise; - sendMsgWithStreamResApi: (conversageId: number, message: string, name?: string) => Promise; - logoutApi: () => Promise; + isLoggedInApi: () => Promise; + changeConversationNameApi: (conversationId: number, name: string) => Promise; + createConversationApi: (name?: string) => Promise; + getChatsByConversationIdApi: (conversationId: number) => Promise; + deleteConversationApi: (conversationId: number) => Promise; + deleteAllConversationsApi: () => Promise; + sendMsgWithStreamResApi: ( + conversationId: number, + message: string, + name?: string + ) => Promise | null>; + logoutApi: () => Promise; } + +export interface Conversation { + id: number; + user_id: number; + name: string; + deleted?: NumBool; + created_at?: string; +} + +enum NumBool { + True = 1, + False = 0, +} + +export interface Chat { + id?: number; + conversation_id: number; + role: string; // line 14 + content: string; + name?: string; + created_at?: string; +} + +export type Response = { + message?: string; + error?: string; +}; From 6e6b54332f068f071deec889719d79ae40a80539 Mon Sep 17 00:00:00 2001 From: teobler Date: Wed, 22 Mar 2023 21:56:45 +0800 Subject: [PATCH 05/22] chore: update gitignore Signed-off-by: teobler --- .gitignore | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index 60704f4..c74dead 100644 --- a/.gitignore +++ b/.gitignore @@ -16,6 +16,8 @@ pnpm-lock.yaml # production /build +**/dist +**/.turbo # misc .DS_Store @@ -29,6 +31,7 @@ yarn-error.log* # local env files .env*.local +.env # vercel .vercel @@ -36,10 +39,10 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +# intellij .idea -**/dist +# generated public/sitemap-0.xml src/assets/resources/**/*.json - -.env From 04f32070ec572ddf6ffeb7fbcc800e2122f5f84a Mon Sep 17 00:00:00 2001 From: teobler Date: Mon, 27 Mar 2023 10:20:10 +0800 Subject: [PATCH 06/22] chore: update package meta Signed-off-by: teobler --- .gitignore | 8 ++++---- packages/click-prompt-button/package.json | 9 +++++++-- packages/click-prompt-button/src/index.ts | 2 -- 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/.gitignore b/.gitignore index c74dead..71e917b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,13 +1,13 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies -/node_modules +**/node_modules /.pnp .pnp.js -pnpm-lock.yaml +**/pnpm-lock.yaml # testing -/coverage +**/coverage # next.js /.next/ @@ -15,7 +15,7 @@ pnpm-lock.yaml /out/ # production -/build +**/build **/dist **/.turbo diff --git a/packages/click-prompt-button/package.json b/packages/click-prompt-button/package.json index 8ac0713..7b65663 100644 --- a/packages/click-prompt-button/package.json +++ b/packages/click-prompt-button/package.json @@ -2,10 +2,15 @@ "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", + "type": "module", + "module": "./dist/click-prompt-button.js", + "types": "./dist/index.d.ts", "license": "MIT", + "files": [ + "dist" + ], "scripts": { - "build": "vite build" + "build": "tsc && vite build" }, "dependencies": { "@chakra-ui/icons": "^2.0.17", diff --git a/packages/click-prompt-button/src/index.ts b/packages/click-prompt-button/src/index.ts index 1b5d01c..67de7c4 100644 --- a/packages/click-prompt-button/src/index.ts +++ b/packages/click-prompt-button/src/index.ts @@ -1,5 +1,3 @@ -"use client"; - export { ClickPromptButton } from "@/ClickPromptButton"; export { ExecutePromptButton } from "@/ExecutePromptButton"; export { ChatGPTApp } from "@/chatgpt/ChatGPTApp"; From adbe75684edbb4d0e61f44c69e107dadc0477a8f Mon Sep 17 00:00:00 2001 From: teobler Date: Mon, 27 Mar 2023 22:12:07 +0800 Subject: [PATCH 07/22] refactor: rename api params and extract them into a map Signed-off-by: teobler --- .../src/ClickPromptButton.tsx | 34 +++------------ .../src/ExecutePromptButton.tsx | 33 ++++----------- .../click-prompt-button/src/LoggingDrawer.tsx | 24 +++-------- .../src/chatgpt/ChatGPTApp.tsx | 34 +++------------ .../src/chatgpt/ChatRoom.tsx | 31 +++++--------- .../src/chatgpt/LoginPage.tsx | 6 +-- .../src/types/llmServiceApi.ts | 42 +++++++++++++++++++ .../click-prompt-button/src/types/shared.ts | 41 ------------------ 8 files changed, 82 insertions(+), 163 deletions(-) create mode 100644 packages/click-prompt-button/src/types/llmServiceApi.ts delete mode 100644 packages/click-prompt-button/src/types/shared.ts diff --git a/packages/click-prompt-button/src/ClickPromptButton.tsx b/packages/click-prompt-button/src/ClickPromptButton.tsx index 6c3853b..d5ede5f 100644 --- a/packages/click-prompt-button/src/ClickPromptButton.tsx +++ b/packages/click-prompt-button/src/ClickPromptButton.tsx @@ -5,40 +5,25 @@ import { ClickPromptSmall } from "@/CustomIcon"; import { ButtonSize, StyledPromptButton } from "@/SharedButton"; import { LoggingDrawer } from "@/LoggingDrawer"; import { ClickPromptBird } from "@/ClickPromptBird"; -import type { Response, SharedApi } from "@/types/shared"; +import type { LlmServiceApi } from "@/types/llmServiceApi"; -interface ClickPromptButtonProps extends SharedApi { +interface ClickPromptButtonProps { loading?: boolean; onClick?: MouseEventHandler; size?: ButtonSize; text: string; children?: React.ReactNode; - loginApi: () => Promise; + llmServiceApi: LlmServiceApi; } -export function ClickPromptButton({ - isLoggedInApi, - children, - size, - text, - onClick, - loading, - changeConversationNameApi, - createConversationApi, - getChatsByConversationIdApi, - deleteConversationApi, - deleteAllConversationsApi, - sendMsgWithStreamResApi, - logoutApi, - loginApi, -}: ClickPromptButtonProps) { +export function ClickPromptButton({ children, size, text, onClick, loading, llmServiceApi }: ClickPromptButtonProps) { const [isLoading, setIsLoading] = useState(loading); const [isLoggedIn, setIsLoggedIn] = useState(false); const { isOpen, onOpen, onClose } = useDisclosure(); const handleClick = async (event: React.MouseEvent) => { setIsLoading(true); - const isLoggedIn = await isLoggedInApi(); + const isLoggedIn = await llmServiceApi.isLoggedIn(); setIsLoggedIn(isLoggedIn); onOpen(); onClick && onClick(event); @@ -85,14 +70,7 @@ export function ClickPromptButton({ handleClose, isLoggedIn, initMessage: text, - changeConversationNameApi, - createConversationApi, - getChatsByConversationIdApi, - deleteConversationApi, - deleteAllConversationsApi, - sendMsgWithStreamResApi, - logoutApi, - loginApi, + llmServiceApi, })} ); diff --git a/packages/click-prompt-button/src/ExecutePromptButton.tsx b/packages/click-prompt-button/src/ExecutePromptButton.tsx index 4898b74..2f1e05e 100644 --- a/packages/click-prompt-button/src/ExecutePromptButton.tsx +++ b/packages/click-prompt-button/src/ExecutePromptButton.tsx @@ -4,16 +4,16 @@ import { BeatLoader } from "react-spinners"; import { StyledPromptButton } from "@/SharedButton"; import { LoggingDrawer } from "@/LoggingDrawer"; import { ClickPromptBird } from "@/ClickPromptBird"; -import type { Response, SharedApi } from "@/types/shared"; +import type { LlmServiceApi } from "@/types/llmServiceApi"; -interface ExecButtonProps extends SharedApi { +interface ExecButtonProps { loading?: boolean; text: string; children?: React.ReactNode; handleResponse?: (response: ReadableStream | null) => void; conversationId?: number; updateConversationId?: (conversationId: number) => void; - loginApi: () => Promise; + llmServiceApi: LlmServiceApi; } export const ExecutePromptButton = ({ @@ -23,15 +23,7 @@ export const ExecutePromptButton = ({ handleResponse, conversationId, updateConversationId, - isLoggedInApi, - changeConversationNameApi, - createConversationApi, - getChatsByConversationIdApi, - deleteConversationApi, - deleteAllConversationsApi, - sendMsgWithStreamResApi, - logoutApi, - loginApi, + llmServiceApi, }: ExecButtonProps) => { const [isLoading, setIsLoading] = useState(loading); const { isOpen, onOpen, onClose } = useDisclosure(); @@ -41,8 +33,8 @@ export const ExecutePromptButton = ({ setIsLoading(true); try { - const isLoggedIn = await isLoggedInApi(); - if (!isLoggedIn) { + const isUserLoggedIn = await llmServiceApi.isLoggedIn(); + if (!isUserLoggedIn) { onOpen(); setIsLoading(false); return; @@ -54,7 +46,7 @@ export const ExecutePromptButton = ({ let newConversationId = conversationId; if (!conversationId) { - const conversation = await createConversationApi(); + const conversation = await llmServiceApi.createConversation(); if (!conversation) { return; } @@ -64,7 +56,7 @@ export const ExecutePromptButton = ({ } if (newConversationId) { - const response = await sendMsgWithStreamResApi(newConversationId, text); + const response = await llmServiceApi.sendMsgWithStreamRes(newConversationId, text); if (response && handleResponse) { handleResponse(response); } @@ -108,14 +100,7 @@ export const ExecutePromptButton = ({ updateStatus: updateLoginStatus, isLoggedIn: hasLogin, initMessage: text, - changeConversationNameApi, - createConversationApi, - getChatsByConversationIdApi, - deleteConversationApi, - deleteAllConversationsApi, - sendMsgWithStreamResApi, - logoutApi, - loginApi, + llmServiceApi, })} ); diff --git a/packages/click-prompt-button/src/LoggingDrawer.tsx b/packages/click-prompt-button/src/LoggingDrawer.tsx index 6613e9d..4246968 100644 --- a/packages/click-prompt-button/src/LoggingDrawer.tsx +++ b/packages/click-prompt-button/src/LoggingDrawer.tsx @@ -1,15 +1,15 @@ import { Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerOverlay } from "@chakra-ui/react"; import { ChatGPTApp } from "@/chatgpt/ChatGPTApp"; import React from "react"; -import type { Response, SharedApi } from "@/types/shared"; +import type { LlmServiceApi } from "@/types/llmServiceApi"; -interface LoggingDrawerProps extends Omit { +interface LoggingDrawerProps { isOpen: boolean; handleClose: () => void; isLoggedIn: boolean; updateStatus?: (loggedIn: boolean) => void; initMessage: string; - loginApi: () => Promise; + llmServiceApi: LlmServiceApi; } export function LoggingDrawer({ @@ -18,14 +18,7 @@ export function LoggingDrawer({ isLoggedIn, updateStatus, initMessage, - changeConversationNameApi, - createConversationApi, - getChatsByConversationIdApi, - deleteConversationApi, - deleteAllConversationsApi, - sendMsgWithStreamResApi, - logoutApi, - loginApi, + llmServiceApi, }: LoggingDrawerProps) { return ( @@ -38,14 +31,7 @@ export function LoggingDrawer({ loggedIn={isLoggedIn} initMessage={initMessage} updateLoginStatus={updateStatus} - changeConversationNameApi={changeConversationNameApi} - createConversationApi={createConversationApi} - getChatsByConversationIdApi={getChatsByConversationIdApi} - deleteConversationApi={deleteConversationApi} - deleteAllConversationsApi={deleteAllConversationsApi} - sendMsgWithStreamResApi={sendMsgWithStreamResApi} - logoutApi={logoutApi} - loginApi={loginApi} + llmServiceApi={llmServiceApi} />
diff --git a/packages/click-prompt-button/src/chatgpt/ChatGPTApp.tsx b/packages/click-prompt-button/src/chatgpt/ChatGPTApp.tsx index 6910583..b1d6f8e 100644 --- a/packages/click-prompt-button/src/chatgpt/ChatGPTApp.tsx +++ b/packages/click-prompt-button/src/chatgpt/ChatGPTApp.tsx @@ -1,27 +1,15 @@ import { ChatRoom } from "@/chatgpt/ChatRoom"; import { LoginPage } from "@/chatgpt/LoginPage"; import React, { useEffect, useState } from "react"; -import type { Response, SharedApi } from "@/types/shared"; +import type { LlmServiceApi } from "@/types/llmServiceApi"; -interface ChatGPTAppProps extends Omit { +interface ChatGPTAppProps { loggedIn?: boolean; updateLoginStatus?: (loggedIn: boolean) => void; initMessage?: string; - loginApi: () => Promise; + llmServiceApi: LlmServiceApi; } -export const ChatGPTApp = ({ - loggedIn, - initMessage, - updateLoginStatus, - changeConversationNameApi, - createConversationApi, - getChatsByConversationIdApi, - deleteConversationApi, - deleteAllConversationsApi, - sendMsgWithStreamResApi, - logoutApi, - loginApi, -}: ChatGPTAppProps) => { +export const ChatGPTApp = ({ loggedIn, initMessage, updateLoginStatus, llmServiceApi }: ChatGPTAppProps) => { const [isLoggedIn, setIsLoggedIn] = useState(loggedIn ?? false); useEffect(() => { @@ -31,18 +19,8 @@ export const ChatGPTApp = ({ }, [isLoggedIn]); return isLoggedIn ? ( - + ) : ( - + ); }; diff --git a/packages/click-prompt-button/src/chatgpt/ChatRoom.tsx b/packages/click-prompt-button/src/chatgpt/ChatRoom.tsx index e525b2e..303aac8 100644 --- a/packages/click-prompt-button/src/chatgpt/ChatRoom.tsx +++ b/packages/click-prompt-button/src/chatgpt/ChatRoom.tsx @@ -10,7 +10,7 @@ import { BeatLoader } from "react-spinners"; import { useDebouncedCallback } from "use-debounce"; import { Input } from "@chakra-ui/react"; import SimpleMarkdown from "@/markdown/SimpleMarkdown"; -import type { Chat, Conversation, SharedApi } from "@/types/shared"; +import type { Chat, Conversation, LlmServiceApi } from "@/types/llmServiceApi"; const ChatInput = styled("input")` background: #ffffff; @@ -75,22 +75,13 @@ const ChatSendButton = styled("button")` outline: none; `; -interface ChatRoomProps extends Omit { +interface ChatRoomProps { setIsLoggedIn: Dispatch>; initMessage?: string; + llmServiceApi: Omit; } -export const ChatRoom = ({ - setIsLoggedIn, - initMessage, - changeConversationNameApi, - createConversationApi, - getChatsByConversationIdApi, - deleteConversationApi, - deleteAllConversationsApi, - sendMsgWithStreamResApi, - logoutApi, -}: ChatRoomProps) => { +export const ChatRoom = ({ setIsLoggedIn, initMessage, llmServiceApi }: ChatRoomProps) => { const chatsWrapper = React.useRef(null); const [disable, setDisable] = React.useState(false); const [chatHistory, setChatHistory] = React.useState([]); @@ -143,7 +134,7 @@ export const ChatRoom = ({ }; async function createConversation() { - const data = await createConversationApi(); + const data = await llmServiceApi.createConversation(); if (!data) { return; } @@ -153,7 +144,7 @@ export const ChatRoom = ({ } async function changeConversationName(conversationId: number, name: string) { - await changeConversationNameApi(conversationId, name); + await changeConversationName(conversationId, name); setConversations((c) => c.map((conversation) => { @@ -189,7 +180,7 @@ export const ChatRoom = ({ try { setCurrentConversation(conversationId); - const data = await getChatsByConversationIdApi(conversationId); + const data = await llmServiceApi.getChatsByConversationId(conversationId); if (!data) { return; } @@ -204,7 +195,7 @@ export const ChatRoom = ({ ); async function deleteConversation(conversationId: number) { - const data = await deleteConversationApi(conversationId); + const data = await llmServiceApi.deleteConversation(conversationId); if (!data) { return; } @@ -212,7 +203,7 @@ export const ChatRoom = ({ } async function deleteAllConversations() { - const data = await deleteAllConversationsApi(); + const data = await llmServiceApi.deleteAllConversations(); if (!data) { return; } @@ -246,7 +237,7 @@ export const ChatRoom = ({ setChatHistory([...updatedHistory]); - const data = await sendMsgWithStreamResApi(currentConversation as number, message); + const data = await llmServiceApi.sendMsgWithStreamRes(currentConversation as number, message); if (!data) { setDisable(false); setChatHistory([...updatedHistory.slice(0, updatedHistory.length - 1)]); @@ -296,7 +287,7 @@ export const ChatRoom = ({ } async function logout() { - await logoutApi(); + await logout(); setIsLoggedIn(false); } diff --git a/packages/click-prompt-button/src/chatgpt/LoginPage.tsx b/packages/click-prompt-button/src/chatgpt/LoginPage.tsx index e58a065..2d65e94 100644 --- a/packages/click-prompt-button/src/chatgpt/LoginPage.tsx +++ b/packages/click-prompt-button/src/chatgpt/LoginPage.tsx @@ -1,13 +1,13 @@ import React, { Dispatch, SetStateAction } from "react"; import { Button, Input } from "@chakra-ui/react"; -import type { Response } from "@/types/shared"; +import { LlmServiceApi } from "@/types/llmServiceApi"; export const LoginPage = ({ setIsLoggedIn, - loginApi, + login: loginApi, }: { setIsLoggedIn: Dispatch>; - loginApi: (key: string) => Promise; + login: LlmServiceApi["login"]; }) => { const [openAiKey, setOpenAiKey] = React.useState(""); diff --git a/packages/click-prompt-button/src/types/llmServiceApi.ts b/packages/click-prompt-button/src/types/llmServiceApi.ts new file mode 100644 index 0000000..dbe39a3 --- /dev/null +++ b/packages/click-prompt-button/src/types/llmServiceApi.ts @@ -0,0 +1,42 @@ +export interface LlmServiceApi { + login: (key: string) => Promise; + logout: () => Promise; + isLoggedIn: () => Promise; + changeConversationName: (conversationId: number, name: string) => Promise; + createConversation: (name?: string) => Promise; + getChatsByConversationId: (conversationId: number) => Promise; + deleteConversation: (conversationId: number) => Promise; + deleteAllConversations: () => Promise; + sendMsgWithStreamRes: ( + conversationId: number, + message: string, + name?: string + ) => Promise | null>; +} + +export interface Conversation { + id: number; + user_id: number; + name: string; + deleted?: NumBool; + created_at?: string; +} + +enum NumBool { + True = 1, + False = 0, +} + +export interface Chat { + id?: number; + conversation_id: number; + role: string; // line 14 + content: string; + name?: string; + created_at?: string; +} + +export type Response = { + message?: string; + error?: string; +}; diff --git a/packages/click-prompt-button/src/types/shared.ts b/packages/click-prompt-button/src/types/shared.ts deleted file mode 100644 index d75f80b..0000000 --- a/packages/click-prompt-button/src/types/shared.ts +++ /dev/null @@ -1,41 +0,0 @@ -export interface SharedApi { - isLoggedInApi: () => Promise; - changeConversationNameApi: (conversationId: number, name: string) => Promise; - createConversationApi: (name?: string) => Promise; - getChatsByConversationIdApi: (conversationId: number) => Promise; - deleteConversationApi: (conversationId: number) => Promise; - deleteAllConversationsApi: () => Promise; - sendMsgWithStreamResApi: ( - conversationId: number, - message: string, - name?: string - ) => Promise | null>; - logoutApi: () => Promise; -} - -export interface Conversation { - id: number; - user_id: number; - name: string; - deleted?: NumBool; - created_at?: string; -} - -enum NumBool { - True = 1, - False = 0, -} - -export interface Chat { - id?: number; - conversation_id: number; - role: string; // line 14 - content: string; - name?: string; - created_at?: string; -} - -export type Response = { - message?: string; - error?: string; -}; From b36e1c7fb9cf10a6b5f657af3aa43556131e993b Mon Sep 17 00:00:00 2001 From: teobler Date: Tue, 28 Mar 2023 21:51:55 +0800 Subject: [PATCH 08/22] feature: prepare needed exports for integration Signed-off-by: teobler --- package-lock.json | 82 ++++++++++--------- packages/click-prompt-button/package.json | 14 ++-- .../src/ClickPromptButton.tsx | 20 +++-- .../src/ExecutePromptButton.tsx | 8 +- packages/click-prompt-button/src/index.ts | 1 + .../src/types/llmServiceApi.ts | 8 +- packages/click-prompt/package.json | 5 +- 7 files changed, 80 insertions(+), 58 deletions(-) diff --git a/package-lock.json b/package-lock.json index b267887..9cb1075 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2997,6 +2997,10 @@ "react": ">=18" } }, + "node_modules/@click-prompt/click-prompt-button": { + "resolved": "packages/click-prompt-button", + "link": true + }, "node_modules/@corex/deepmerge": { "version": "4.0.37", "resolved": "https://registry.npmjs.org/@corex/deepmerge/-/deepmerge-4.0.37.tgz", @@ -9486,10 +9490,6 @@ "resolved": "packages/click-prompt", "link": true }, - "node_modules/click-prompt-button": { - "resolved": "packages/click-prompt-button", - "link": true - }, "node_modules/client-only": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", @@ -21835,8 +21835,9 @@ "@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", + "@click-prompt/click-prompt-button": "0.1.0", + "@emotion/react": "11.10.6", + "@emotion/styled": "11.10.6", "@formatjs/intl-localematcher": "^0.2.32", "@planetscale/database": "^1.6.0", "@remirror/pm": "^2.0.4", @@ -21925,6 +21926,7 @@ } }, "packages/click-prompt-button": { + "name": "@click-prompt/click-prompt-button", "version": "0.1.0", "license": "MIT", "dependencies": { @@ -21932,12 +21934,12 @@ "@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", + "@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": "18.2.0", + "react-dom": "18.2.0", "react-markdown": "^8.0.5", "react-spinners": "^0.13.8", "react-syntax-highlighter": "^15.5.0", @@ -21957,6 +21959,9 @@ "react": "^18.2.0", "react-dom": "^18.2.0" } + }, + "packages/click-prompt/click-prompt-button": { + "extraneous": true } }, "dependencies": { @@ -24105,6 +24110,32 @@ "integrity": "sha512-WWULIiucYRBIewHKFA7BssQ2ABLHLVd9lrUo3N3SZgR0u4ZRDDVEUNOy+r+9ruDze8+36dGbN9wsN1IdELtdOw==", "requires": {} }, + "@click-prompt/click-prompt-button": { + "version": "file:packages/click-prompt-button", + "requires": { + "@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", + "@rollup/plugin-url": "^8.0.1", + "@svgr/rollup": "^6.5.1", + "@vitejs/plugin-react": "^3.1.0", + "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", + "vite": "^4.2.1", + "vite-plugin-dts": "^2.1.0", + "vite-tsconfig-paths": "^4.0.7" + } + }, "@corex/deepmerge": { "version": "4.0.37", "resolved": "https://registry.npmjs.org/@corex/deepmerge/-/deepmerge-4.0.37.tgz", @@ -28779,8 +28810,9 @@ "@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", + "@click-prompt/click-prompt-button": "0.1.0", + "@emotion/react": "11.10.6", + "@emotion/styled": "11.10.6", "@formatjs/intl-localematcher": "^0.2.32", "@planetscale/database": "^1.6.0", "@remirror/pm": "^2.0.4", @@ -28862,32 +28894,6 @@ "yaml-loader": "^0.8.0" } }, - "click-prompt-button": { - "version": "file:packages/click-prompt-button", - "requires": { - "@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", - "@rollup/plugin-url": "^8.0.1", - "@svgr/rollup": "^6.5.1", - "@vitejs/plugin-react": "^3.1.0", - "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", - "vite": "^4.2.1", - "vite-plugin-dts": "^2.1.0", - "vite-tsconfig-paths": "^4.0.7" - } - }, "client-only": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", diff --git a/packages/click-prompt-button/package.json b/packages/click-prompt-button/package.json index 7b65663..415eacf 100644 --- a/packages/click-prompt-button/package.json +++ b/packages/click-prompt-button/package.json @@ -1,5 +1,5 @@ { - "name": "click-prompt-button", + "name": "@click-prompt/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", "type": "module", @@ -17,12 +17,12 @@ "@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", + "@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": "18.2.0", + "react-dom": "18.2.0", "react-markdown": "^8.0.5", "react-spinners": "^0.13.8", "react-syntax-highlighter": "^15.5.0", @@ -40,6 +40,8 @@ "peerDependencies": { "next": "^13.2.4", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "@emotion/react": "11.10.6", + "@emotion/styled": "11.10.6" } } diff --git a/packages/click-prompt-button/src/ClickPromptButton.tsx b/packages/click-prompt-button/src/ClickPromptButton.tsx index d5ede5f..cf89eb7 100644 --- a/packages/click-prompt-button/src/ClickPromptButton.tsx +++ b/packages/click-prompt-button/src/ClickPromptButton.tsx @@ -1,5 +1,5 @@ import React, { MouseEventHandler, useState } from "react"; -import { Box, Button, Text, Tooltip, useDisclosure } from "@chakra-ui/react"; +import { Box, Button, ButtonProps, Text, Tooltip, useDisclosure } from "@chakra-ui/react"; import { BeatLoader } from "react-spinners"; import { ClickPromptSmall } from "@/CustomIcon"; import { ButtonSize, StyledPromptButton } from "@/SharedButton"; @@ -7,7 +7,7 @@ import { LoggingDrawer } from "@/LoggingDrawer"; import { ClickPromptBird } from "@/ClickPromptBird"; import type { LlmServiceApi } from "@/types/llmServiceApi"; -interface ClickPromptButtonProps { +interface ClickPromptButtonProps extends ButtonProps { loading?: boolean; onClick?: MouseEventHandler; size?: ButtonSize; @@ -16,7 +16,15 @@ interface ClickPromptButtonProps { llmServiceApi: LlmServiceApi; } -export function ClickPromptButton({ children, size, text, onClick, loading, llmServiceApi }: ClickPromptButtonProps) { +export function ClickPromptButton({ + children, + size, + text, + onClick, + loading, + llmServiceApi, + ...rest +}: ClickPromptButtonProps) { const [isLoading, setIsLoading] = useState(loading); const [isLoggedIn, setIsLoggedIn] = useState(false); const { isOpen, onOpen, onClose } = useDisclosure(); @@ -37,8 +45,7 @@ export function ClickPromptButton({ children, size, text, onClick, loading, llmS function NormalSize() { return ( - {/*TODO: check ...props with what is passed in*/} - + + + + + + + ); +}; diff --git a/packages/click-prompt/src/app/[lang]/page.tsx b/packages/click-prompt/src/app/[lang]/page.tsx index e8f04d4..3c31524 100644 --- a/packages/click-prompt/src/app/[lang]/page.tsx +++ b/packages/click-prompt/src/app/[lang]/page.tsx @@ -1,56 +1,11 @@ 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/ClickPrompt/ClickPromptButton"; import { getAppData } from "@/i18n"; +import { HomeClient } from "@/app/[lang]/page.client"; async function Page() { const { i18n } = await getAppData(); - const t = i18n.tFactory("/"); - return ( - - - - - - - {t("title")} - - - - {t("description")} - - - - - - - - - - - ); + return ; } export default Page; diff --git a/packages/click-prompt/src/app/[lang]/stable-diffusion-generator/page.client.tsx b/packages/click-prompt/src/app/[lang]/stable-diffusion-generator/page.client.tsx index 39ea908..d4a7458 100644 --- a/packages/click-prompt/src/app/[lang]/stable-diffusion-generator/page.client.tsx +++ b/packages/click-prompt/src/app/[lang]/stable-diffusion-generator/page.client.tsx @@ -4,21 +4,21 @@ import React, { ChangeEvent, useEffect, useMemo, useState } from "react"; import { Button, Flex, + FormControl, Grid, Heading, Input, InputGroup, InputRightElement, Link, + Radio, + RadioGroup, SimpleGrid, Stack, - Text, Tag, TagCloseButton, - FormControl, TagLabel, - RadioGroup, - Radio, + Text, } from "@chakra-ui/react"; import { useFormik } from "formik"; import Image from "next/image"; @@ -26,10 +26,30 @@ import CopyComponent from "@/components/CopyComponent"; 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/ClickPrompt/ClickPromptButton"; +import { ClickPromptButton } from "@/components/ClickPromptButton"; import { HuggingFaceTxt2Img } from "@/components/StableDiffusion/HuggingFaceTxt2Img"; import { SdPrompt } from "@/components/StableDiffusion/SdPrompt"; import { StableDiffusionGenData } from "@/data-processor/StableDiffusionGenData"; +import { isLoggedIn, login, logout } from "@/api/user"; +import { + changeConversationName, + createConversation, + deleteAllConversations, + deleteConversation, +} from "@/api/conversation"; +import { getChatsByConversationId, sendMsgWithStreamRes } from "@/api/chat"; + +const llmServiceApi: any = { + login, + logout, + isLoggedIn, + changeConversationName, + createConversation, + getChatsByConversationId, + deleteConversation, + deleteAllConversations, + sendMsgWithStreamRes, +}; const sdDetailedPromptFields: SdPromptField[] = [ { @@ -520,7 +540,7 @@ function StableDiffusionGenerator({ i18n }: GeneralI18nProps) { - + diff --git a/packages/click-prompt/src/components/ClickPrompt/Button.shared.tsx b/packages/click-prompt/src/components/ClickPrompt/Button.shared.tsx deleted file mode 100644 index 87b880e..0000000 --- a/packages/click-prompt/src/components/ClickPrompt/Button.shared.tsx +++ /dev/null @@ -1,27 +0,0 @@ -"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/packages/click-prompt/src/components/ClickPrompt/ClickPromptButton.tsx b/packages/click-prompt/src/components/ClickPrompt/ClickPromptButton.tsx deleted file mode 100644 index 0d13c9c..0000000 --- a/packages/click-prompt/src/components/ClickPrompt/ClickPromptButton.tsx +++ /dev/null @@ -1,72 +0,0 @@ -"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"; -import * as UserAPI from "@/api/user"; - -export type ClickPromptBirdParams = { width?: number; height?: number }; - -export function ClickPromptBird(props: ClickPromptBirdParams) { - const width = props.width || 38; - const height = props.height || 32; - - return ; -} - -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 UserAPI.isLoggedIn(); - setIsLoggedIn(isLoggedIn); - onOpen(); - props.onClick && props.onClick(event); - }; - - const handleClose = () => { - setIsLoading(false); - onClose(); - }; - - function NormalSize() { - return ( - - - - - ); - } - - function SmallSize() { - return ( - - ); - } - - return ( - - {props.size !== "sm" && } - {props.size === "sm" && } - - {LoggingDrawer(isOpen, handleClose, isLoggedIn, props)} - - ); -} diff --git a/packages/click-prompt/src/components/ClickPrompt/ExecutePromptButton.tsx b/packages/click-prompt/src/components/ClickPrompt/ExecutePromptButton.tsx deleted file mode 100644 index 8b4fc32..0000000 --- a/packages/click-prompt/src/components/ClickPrompt/ExecutePromptButton.tsx +++ /dev/null @@ -1,102 +0,0 @@ -"use client"; - -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"; -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?: (response: ResponseSend) => void; - conversationId?: number; - updateConversationId?: (conversationId: number) => void; -}; - -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 UserAPI.isLoggedIn(); - if (!isLoggedIn) { - onOpen(); - setIsLoading(false); - return; - } - } catch (e) { - console.log(e); - setHasLogin(false); - } - - let conversationId = props.conversationId; - if (!props.conversationId) { - const conversation: ResponseCreateConversation = await createConversation(); - if (!conversation) { - return; - } - - conversationId = conversation.id as number; - props.updateConversationId ? props.updateConversationId(conversationId) : null; - } - - if (conversationId) { - const response: any = await sendMessage(conversationId, props.text); - if (response && props.handleResponse) { - props.handleResponse(response as ResponseSend); - } - } - - setIsLoading(false); - }; - - useEffect(() => { - console.log(`hasLogin: ${hasLogin}`); - if (hasLogin) { - onClose(); - } - }, [hasLogin]); - - const handleClose = () => { - onClose(); - }; - - const updateLoginStatus = (status: boolean) => { - if (status) { - setHasLogin(true); - onClose(); - } - }; - - return ( - <> - - - - - {!hasLogin && LoggingDrawer(isOpen, handleClose, hasLogin, props, updateLoginStatus)} - - ); -} - -export default ExecutePromptButton; diff --git a/packages/click-prompt/src/components/ClickPrompt/LoggingDrawer.tsx b/packages/click-prompt/src/components/ClickPrompt/LoggingDrawer.tsx deleted file mode 100644 index fa38b14..0000000 --- a/packages/click-prompt/src/components/ClickPrompt/LoggingDrawer.tsx +++ /dev/null @@ -1,28 +0,0 @@ -"use client"; - -import { Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerOverlay } from "@chakra-ui/react"; -import { ChatGPTApp } from "@/components/chatgpt/ChatGPTApp"; -import React from "react"; -import { CPButtonProps } from "@/components/ClickPrompt/Button.shared"; - -export function LoggingDrawer( - isOpen: boolean, - handleClose: () => void, - isLoggedIn: boolean, - props: CPButtonProps, - updateStatus?: (loggedIn: boolean) => void, -) { - return ( - - - - - -
- -
- - - - ); -} diff --git a/packages/click-prompt/src/components/ClickPromptButton/index.tsx b/packages/click-prompt/src/components/ClickPromptButton/index.tsx new file mode 100644 index 0000000..2ab599e --- /dev/null +++ b/packages/click-prompt/src/components/ClickPromptButton/index.tsx @@ -0,0 +1,3 @@ +"use client"; + +export { ClickPromptButton, ExecutePromptButton, Chat, ChatGPTApp } from "@click-prompt/click-prompt-button"; diff --git a/packages/click-prompt/src/components/chatgpt/ChatGPTApp.tsx b/packages/click-prompt/src/components/chatgpt/ChatGPTApp.tsx deleted file mode 100644 index 8884d57..0000000 --- a/packages/click-prompt/src/components/chatgpt/ChatGPTApp.tsx +++ /dev/null @@ -1,26 +0,0 @@ -"use client"; - -import { ChatRoom } from "@/components/chatgpt/ChatRoom"; -import { LoginPage } from "@/components/chatgpt/LoginPage"; -import React, { useEffect, useState } from "react"; - -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 ? ( - - ) : ( - - ); -}; diff --git a/packages/click-prompt/src/components/chatgpt/ChatRoom.tsx b/packages/click-prompt/src/components/chatgpt/ChatRoom.tsx deleted file mode 100644 index 8d7df4e..0000000 --- a/packages/click-prompt/src/components/chatgpt/ChatRoom.tsx +++ /dev/null @@ -1,439 +0,0 @@ -"use client"; - -import NewChat from "@/assets/icons/new-chat.svg"; -import TrashcanIcon from "@/assets/icons/trashcan.svg"; -import LogoutIcon from "@/assets/icons/logout.svg"; -import Image from "next/image"; -import content from "@/assets/images/content.png"; -import send from "@/assets/icons/send.svg?url"; -import React, { Dispatch, SetStateAction, useEffect, useState } from "react"; -import styled from "@emotion/styled"; -import type { RequestGetConversations, ResponseGetConversations } from "@/pages/api/chatgpt/conversation"; -import { ResponseGetChats, ResponseSend } from "@/pages/api/chatgpt/chat"; -import { BeatLoader } from "react-spinners"; -import { useDebouncedCallback } from "use-debounce"; -import { Input } from "@chakra-ui/react"; -import * as ChatAPI from "@/api/chat"; -import * as ConversationAPI from "@/api/conversation"; -import * as UserAPI from "@/api/user"; -import SimpleMarkdown from "@/components/markdown/SimpleMarkdown"; - -const ChatInput = styled("input")` - background: #ffffff; - border-radius: 8px; - border: none; - padding: 0.5rem 1rem; - width: 768px; - height: 48px; - font-size: 1rem; - font-weight: 500; - color: #1e1e1e; - outline: none; - transition: all 0.2s ease-in-out; - - &:focus { - box-shadow: 0 0 0 2px #1e1e1e; - } - - &:focus::placeholder { - color: #1e1e1e; - } -`; -const ChatInputWrapper = styled("div")` - position: absolute; - bottom: 8px; - width: 768px; - height: 48px; - background-color: #fff; - border-radius: 8px; -`; -const ChatsWrapper = styled("div")` - // good looking scrollbar - &::-webkit-scrollbar { - width: 8px; - } - - &::-webkit-scrollbar-track { - background: #f1f1f1; - } - - &::-webkit-scrollbar-thumb { - background: #888; - } - - &::-webkit-scrollbar-thumb:hover { - background: #555; - } -`; -const ChatSendButton = styled("button")` - position: absolute; - top: 0; - bottom: 0; - right: 8px; - width: 48px; - height: 48px; - background-image: url(${send}); - background-size: 24px; - background-position: center; - background-repeat: no-repeat; - cursor: pointer; - border: none; - outline: none; -`; - -export const ChatRoom = ({ - setIsLoggedIn, - initMessage, -}: { - setIsLoggedIn: Dispatch>; - initMessage?: string; -}) => { - const chatsWrapper = React.useRef(null); - const [disable, setDisable] = React.useState(false); - const [chatHistory, setChatHistory] = React.useState([]); - const [message, setMessage] = React.useState(initMessage ?? ""); - - const [conversations, setConversations] = useState([]); - const [currentConversation, setCurrentConversation] = useState(null); - // editing conversation name - const [editing, setEditing] = useState(null); - const [editingName, setEditingName] = useState(""); - - // get conversations - useEffect(() => { - (async () => { - try { - const response = await fetch("/api/chatgpt/conversation", { - method: "POST", - body: JSON.stringify({ - action: "get_conversations", - } as RequestGetConversations), - }); - const data = (await response.json()) as ResponseGetConversations; - if (!response.ok) { - alert("Error: " + JSON.stringify((data as any).error)); - return; - } - setConversations(data); - } catch (error) { - setConversations([]); - alert("Error: " + JSON.stringify(error)); - } - })(); - }, []); - - // scroll to bottom - useEffect(() => { - setTimeout(() => { - if (chatsWrapper.current) { - chatsWrapper.current.scrollTop = chatsWrapper.current.scrollHeight; - } - }); - }, [chatHistory]); - - const onEnterForSendMessage: React.KeyboardEventHandler = (event) => { - if (event.code === "Enter" || event.code === "NumpadEnter") { - event.preventDefault(); - - sendMessage(); - } - }; - - async function createConversation() { - const data = await ConversationAPI.createConversation(); - if (!data) { - return; - } - - setConversations([data, ...conversations]); - return data; - } - - async function changeConversationName(conversationId: number, name: string) { - await ConversationAPI.changeConversationName(conversationId, name); - - setConversations((c) => - c.map((conversation) => { - if (conversation.id === conversationId) { - return { - ...conversation, - name, - }; - } - return conversation; - }), - ); - } - - const handleConversation = useDebouncedCallback( - async (conversationId: number | null, event: React.MouseEvent) => { - if (event.detail > 1) { - // double click - if (conversationId == null) { - return; - } - setEditingName(conversations.find((c) => c.id === conversationId)?.name ?? ""); - setEditing(conversationId); - return; - } - - if (conversationId == null) { - setCurrentConversation(null); - setChatHistory([]); - return; - } - setDisable(true); - - try { - setCurrentConversation(conversationId); - const data = await ChatAPI.getChatsByConversationId(conversationId); - if (!data) { - return; - } - setChatHistory(data); - } catch (e) { - console.log("changeConversation: ", e); - } finally { - setDisable(false); - } - }, - 200, - ); - - async function deleteConversation(conversationId: number) { - const data = await ConversationAPI.deleteConversation(conversationId); - if (!data) { - return; - } - setConversations(conversations.filter((conversation) => conversation.id !== conversationId)); - } - - async function deleteAllConversations() { - const data = await ConversationAPI.deleteAllConversations(); - if (!data) { - return; - } - setConversations([]); - } - // FIXME anti-pattern, should use `useState` - let codeMark = ""; - async function sendMessage() { - if (message.length === 0) { - alert("Please enter your message first."); - return; - } - - try { - setDisable(true); - if (currentConversation == null) { - const created = await createConversation(); - setCurrentConversation(created?.id ?? null); - } - - setMessage(""); - let updatedHistory = [ - ...chatHistory, - { - role: "user", - content: message, - // TODO(CGQAQ): custom name of user - // name: "User", - }, - ] as ResponseSend; - - setChatHistory([...updatedHistory]); - - const data = await ChatAPI.sendMsgWithStreamRes(currentConversation as number, message); - if (!data) { - setDisable(false); - setChatHistory([...updatedHistory.slice(0, updatedHistory.length - 1)]); - return; - } - const reader = data.getReader(); - const decoder = new TextDecoder(); - let isDone = false; - while (!isDone) { - const { value, done } = await reader.read(); - isDone = done; - const chunkValue = decoder.decode(value); - const lines = chunkValue.split("\n").filter((line) => line.trim() !== ""); - for (const line of lines) { - const message = line.replace(/^data: /, ""); - if (message === "[DONE]") { - setDisable(false); - } else { - const parsed = JSON.parse(message).choices[0].delta; - if (parsed && Object.keys(parsed).length > 0) { - if (!!parsed.role) { - parsed.content = ""; - updatedHistory = [...updatedHistory, parsed]; - } else if (!!parsed.content) { - if (parsed.content === "```") { - // code block start - if (!codeMark) { - codeMark = parsed.content; - } else { - // code block end remove it - codeMark = ""; - } - } - updatedHistory[updatedHistory.length - 1].content += parsed.content; - } - setChatHistory([...updatedHistory]); - } - } - } - } - } catch (err) { - console.log(err); - setDisable(false); - } finally { - // setDisable(false); - } - } - - async function logout() { - await UserAPI.logout(); - setIsLoggedIn(false); - } - - return ( -
- {/* left */} -
-
- - New chat -
-
- {conversations.map((conversation) => ( -
{ - handleConversation(conversation.id!, event); - }} - > - {editing === conversation.id ? ( - { - setEditingName(ev.currentTarget.value); - }} - onKeyDown={(ev) => { - if (ev.key === "Enter" || ev.key === "NumpadEnter") { - ev.preventDefault(); - changeConversationName(conversation.id!, ev.currentTarget.value).finally(() => { - setEditing(null); - }); - } else if (ev.key === "Escape") { - ev.preventDefault(); - setEditing(null); - } - }} - onBlur={async (ev) => { - await changeConversationName(conversation.id!, ev.currentTarget.value); - setEditing(null); - }} - /> - ) : ( - <> -
- {conversation.name} -
- {/* delete button */} -
{ - e.stopPropagation(); - if (confirm("Are you sure to delete this conversation?")) { - deleteConversation(conversation.id!); - } - }} - > - -
- - )} -
- ))} -
-
-
{ - e.stopPropagation(); - if (confirm("Are you sure to delete ALL conversations?")) { - deleteAllConversations(); - } - }} - > - - Clear conversations -
-
- - Log out -
-
-
- - {/* right */} -
- {chatHistory.length === 0 && background image} - - {/* chats */} - - {chatHistory.map((chat, index) => { - return ( -
- {chat.role === "user" ? ( -
- {/* chat bubble badge */} -
- -
-
- ) : ( -
-
- -
-
- )} -
- ); - })} - - - - setMessage(ev.target.value)} - onKeyDown={onEnterForSendMessage} - className='w-full pr-10 md:w-11/12 border-0 md:pr-0 focus:ring-0' - /> - {disable ? ( - - ) : ( - - )} - -
-
- ); -}; diff --git a/packages/click-prompt/src/components/chatgpt/LoginPage.tsx b/packages/click-prompt/src/components/chatgpt/LoginPage.tsx deleted file mode 100644 index 625a4c0..0000000 --- a/packages/click-prompt/src/components/chatgpt/LoginPage.tsx +++ /dev/null @@ -1,61 +0,0 @@ -"use client"; - -import { Button, Input } from "@/components/ChakraUI"; -import React, { Dispatch, SetStateAction } from "react"; -import * as UserApi from "@/api/user"; - -export const LoginPage = ({ setIsLoggedIn }: { setIsLoggedIn: Dispatch> }) => { - const [openAiKey, setOpenAiKey] = React.useState(""); - - async function login(key: string) { - if (key.length === 0) { - alert("Please enter your OpenAI API key first."); - return; - } - - const data = await UserApi.login(key); - if (data) { - setIsLoggedIn(true); - } else { - alert("Login failed. Please check your API key."); - setIsLoggedIn(false); - } - } - - return ( -
-

ChatGPT

-

You need to login first use your own key.

-
-
- 1. Sign up for the   - - OpenAI Platform. - -
-
- 2. Create a new secret key in   - - Settings → API keys. - -
-
3. Copy and paste your API key here:
-
-
- setOpenAiKey(ev.target.value)} - > - -
-
- ); -}; From 30db07bc719bbed3d416f7d142a40ade7c864056 Mon Sep 17 00:00:00 2001 From: teobler Date: Tue, 28 Mar 2023 22:01:01 +0800 Subject: [PATCH 10/22] refactor: extract all llm related api Signed-off-by: teobler --- packages/click-prompt/src/api/llmService.ts | 33 +++++++++++++++++++ .../[lang]/chatgpt-general/page.client.tsx | 25 ++------------ .../chatgpt-generator-cot/page.client.tsx | 23 ++----------- .../chatgpt-prompt-role-play/page.client.tsx | 23 ++----------- .../app/[lang]/chatgpt-samples/[id]/page.tsx | 23 ++----------- .../[lang]/chatgpt-samples/page.client.tsx | 23 ++----------- .../chatgpt-visual-novel/page.client.tsx | 21 +----------- .../src/app/[lang]/chatgpt/page.tsx | 24 ++------------ .../click-flow/[id]/StartlingStepDetail.tsx | 21 +----------- .../src/app/[lang]/page.client.tsx | 29 +++++----------- .../page.client.tsx | 23 ++----------- 11 files changed, 59 insertions(+), 209 deletions(-) create mode 100644 packages/click-prompt/src/api/llmService.ts diff --git a/packages/click-prompt/src/api/llmService.ts b/packages/click-prompt/src/api/llmService.ts new file mode 100644 index 0000000..08c8344 --- /dev/null +++ b/packages/click-prompt/src/api/llmService.ts @@ -0,0 +1,33 @@ +import { isLoggedIn, login, logout } from "@/api/user"; +import { + changeConversationName, + createConversation, + deleteAllConversations, + deleteConversation, +} from "@/api/conversation"; +import { getChatsByConversationId, sendMessage, sendMsgWithStreamRes } from "@/api/chat"; +import { LlmServiceApi } from "@click-prompt/click-prompt-button"; + +export const llmServiceApiWithStream: LlmServiceApi = { + login, + logout, + isLoggedIn, + changeConversationName, + createConversation, + getChatsByConversationId, + deleteConversation, + deleteAllConversations, + sendMsgWithStreamRes, +}; + +export const llmServiceApi: LlmServiceApi = { + login, + logout, + isLoggedIn, + changeConversationName, + createConversation, + getChatsByConversationId, + deleteConversation, + deleteAllConversations, + sendMessage, +}; diff --git a/packages/click-prompt/src/app/[lang]/chatgpt-general/page.client.tsx b/packages/click-prompt/src/app/[lang]/chatgpt-general/page.client.tsx index d04df3f..20aab4c 100644 --- a/packages/click-prompt/src/app/[lang]/chatgpt-general/page.client.tsx +++ b/packages/click-prompt/src/app/[lang]/chatgpt-general/page.client.tsx @@ -23,14 +23,7 @@ import SimpleMarkdown from "@/components/markdown/SimpleMarkdown"; import { ExternalLinkIcon } from "@chakra-ui/icons"; import { CP_GITHUB_ASSETS } from "@/configs/constants"; import styled from "@emotion/styled"; -import { isLoggedIn, login, logout } from "@/api/user"; -import { - changeConversationName, - createConversation, - deleteAllConversations, - deleteConversation, -} from "@/api/conversation"; -import { getChatsByConversationId, sendMsgWithStreamRes } from "@/api/chat"; +import { llmServiceApiWithStream } from "@/api/llmService"; type GeneralCommand = { type: string; @@ -55,18 +48,6 @@ type CategoryGpt = { type ChatgptSpecific = { type: string; description: string; example: string; prompt: string }[]; -const llmServiceApi: any = { - login, - logout, - isLoggedIn, - changeConversationName, - createConversation, - getChatsByConversationId, - deleteConversation, - deleteAllConversations, - sendMsgWithStreamRes, -}; - function ChatGptGeneral({ locale, i18n, chatgptSpecific }: { chatgptSpecific: ChatgptSpecific } & GeneralI18nProps) { const dict = i18n.dict; @@ -85,7 +66,7 @@ function ChatGptGeneral({ locale, i18n, chatgptSpecific }: { chatgptSpecific: Ch columnHelper.accessor("clickPrompt", { cell: (info) => { return info.row.original.prompt !== "" ? ( - + ) : null; }, header: "", @@ -120,7 +101,7 @@ function ChatGptGeneral({ locale, i18n, chatgptSpecific }: { chatgptSpecific: Ch {sample.name} - + diff --git a/packages/click-prompt/src/app/[lang]/chatgpt-generator-cot/page.client.tsx b/packages/click-prompt/src/app/[lang]/chatgpt-generator-cot/page.client.tsx index 01b338e..8436ce3 100644 --- a/packages/click-prompt/src/app/[lang]/chatgpt-generator-cot/page.client.tsx +++ b/packages/click-prompt/src/app/[lang]/chatgpt-generator-cot/page.client.tsx @@ -10,26 +10,7 @@ import { numberToChineseOrdinal } from "chinese-numbering"; import CopyComponent from "@/components/CopyComponent"; import { ClickPromptButton } from "@/components/ClickPromptButton"; -import { isLoggedIn, login, logout } from "@/api/user"; -import { - changeConversationName, - createConversation, - deleteAllConversations, - deleteConversation, -} from "@/api/conversation"; -import { getChatsByConversationId, sendMsgWithStreamRes } from "@/api/chat"; - -const llmServiceApi: any = { - login, - logout, - isLoggedIn, - changeConversationName, - createConversation, - getChatsByConversationId, - deleteConversation, - deleteAllConversations, - sendMsgWithStreamRes, -}; +import { llmServiceApiWithStream } from "@/api/llmService"; function ChatGptCotGenerator({ i18n, locale }: GeneralI18nProps) { const dict = i18n.dict; @@ -106,7 +87,7 @@ ${dict["introduction-tail"]}`.replaceAll("", name), - + (); -const llmServiceApi: any = { - login, - logout, - isLoggedIn, - changeConversationName, - createConversation, - getChatsByConversationId, - deleteConversation, - deleteAllConversations, - sendMsgWithStreamRes, -}; - const genColumns = (dict: Record, highlight: string) => [ columnHelper.accessor("act", { cell: (info) => , @@ -56,7 +37,7 @@ const genColumns = (dict: Record, highlight: string) => [ columnHelper.accessor("clickPrompt", { cell: (info) => { return info.row.original.prompt !== "" ? ( - + ) : null; }, header: "", diff --git a/packages/click-prompt/src/app/[lang]/chatgpt-samples/[id]/page.tsx b/packages/click-prompt/src/app/[lang]/chatgpt-samples/[id]/page.tsx index a99a2a8..5522b70 100644 --- a/packages/click-prompt/src/app/[lang]/chatgpt-samples/[id]/page.tsx +++ b/packages/click-prompt/src/app/[lang]/chatgpt-samples/[id]/page.tsx @@ -18,26 +18,7 @@ import { AiBlock } from "@/components/chatgpt/AiBlock"; import { HumanBlock } from "@/components/chatgpt/HumanBlock"; import { getAppData } from "@/i18n"; import type { Sample, SampleDetail } from "../type"; -import { isLoggedIn, login, logout } from "@/api/user"; -import { - changeConversationName, - createConversation, - deleteAllConversations, - deleteConversation, -} from "@/api/conversation"; -import { getChatsByConversationId, sendMsgWithStreamRes } from "@/api/chat"; - -const llmServiceApi: any = { - login, - logout, - isLoggedIn, - changeConversationName, - createConversation, - getChatsByConversationId, - deleteConversation, - deleteAllConversations, - sendMsgWithStreamRes, -}; +import { llmServiceApiWithStream } from "@/api/llmService"; const getSampleNames = async (locale: GeneralI18nProps["locale"]) => { const index = await import(`@/assets/chatgpt/samples/index_${locale}.json`).then((mod) => mod.default); @@ -96,7 +77,7 @@ async function ChatGptSampleDetail({ params }: { params: { id: string } }) { - + diff --git a/packages/click-prompt/src/app/[lang]/chatgpt-samples/page.client.tsx b/packages/click-prompt/src/app/[lang]/chatgpt-samples/page.client.tsx index b161b33..e544147 100644 --- a/packages/click-prompt/src/app/[lang]/chatgpt-samples/page.client.tsx +++ b/packages/click-prompt/src/app/[lang]/chatgpt-samples/page.client.tsx @@ -24,26 +24,7 @@ import SimpleMarkdown from "@/components/markdown/SimpleMarkdown"; import { ClickPromptButton } from "@/components/ClickPromptButton"; import { CP_GITHUB_ASSETS } from "@/configs/constants"; import type { Sample } from "./type"; -import { isLoggedIn, login, logout } from "@/api/user"; -import { - changeConversationName, - createConversation, - deleteAllConversations, - deleteConversation, -} from "@/api/conversation"; -import { getChatsByConversationId, sendMsgWithStreamRes } from "@/api/chat"; - -const llmServiceApi: any = { - login, - logout, - isLoggedIn, - changeConversationName, - createConversation, - getChatsByConversationId, - deleteConversation, - deleteAllConversations, - sendMsgWithStreamRes, -}; +import { llmServiceApiWithStream } from "@/api/llmService"; function ChatGptSamples({ i18n, samples }: { samples: Sample[] } & GeneralI18nProps) { const chatgptLink = `${CP_GITHUB_ASSETS}/chatgpt`; @@ -81,7 +62,7 @@ function ChatGptSamples({ i18n, samples }: { samples: Sample[] } & GeneralI18nPr - + diff --git a/packages/click-prompt/src/app/[lang]/chatgpt-visual-novel/page.client.tsx b/packages/click-prompt/src/app/[lang]/chatgpt-visual-novel/page.client.tsx index 5dd1f5c..a303329 100644 --- a/packages/click-prompt/src/app/[lang]/chatgpt-visual-novel/page.client.tsx +++ b/packages/click-prompt/src/app/[lang]/chatgpt-visual-novel/page.client.tsx @@ -37,14 +37,7 @@ import { upperFirst } from "lodash-es"; import { Chat, ExecutePromptButton } from "@/components/ClickPromptButton"; import SimpleMarkdown from "@/components/markdown/SimpleMarkdown"; import CopyComponent from "@/components/CopyComponent"; -import { isLoggedIn, login, logout } from "@/api/user"; -import { - changeConversationName, - createConversation, - deleteAllConversations, - deleteConversation, -} from "@/api/conversation"; -import { getChatsByConversationId, sendMessage } from "@/api/chat"; +import { llmServiceApi } from "@/api/llmService"; type StoryLine = { speaker: string; @@ -59,18 +52,6 @@ type Scene = { story: StoryLine[]; }; -const llmServiceApi: any = { - login, - logout, - isLoggedIn, - changeConversationName, - createConversation, - getChatsByConversationId, - deleteConversation, - deleteAllConversations, - sendMessage, -}; - function ChatGptVisualNovel({ i18n }: GeneralI18nProps) { const dict = i18n.dict; const genres = ["romance", "fantasy", "horror", "sci-fi", "crime"]; diff --git a/packages/click-prompt/src/app/[lang]/chatgpt/page.tsx b/packages/click-prompt/src/app/[lang]/chatgpt/page.tsx index 924c3ae..c24defe 100644 --- a/packages/click-prompt/src/app/[lang]/chatgpt/page.tsx +++ b/packages/click-prompt/src/app/[lang]/chatgpt/page.tsx @@ -4,26 +4,8 @@ import React from "react"; import { cookies } from "next/headers"; import { SITE_USER_COOKIE } from "@/configs/constants"; import { ChatGPTApp } from "@/components/ClickPromptButton"; -import { isLoggedIn, login, logout } from "@/api/user"; -import { - changeConversationName, - createConversation, - deleteAllConversations, - deleteConversation, -} from "@/api/conversation"; -import { getChatsByConversationId, sendMsgWithStreamRes } from "@/api/chat"; - -const llmServiceApi: any = { - login, - logout, - isLoggedIn, - changeConversationName, - createConversation, - getChatsByConversationId, - deleteConversation, - deleteAllConversations, - sendMsgWithStreamRes, -}; +import { isLoggedIn } from "@/api/user"; +import { llmServiceApiWithStream } from "@/api/llmService"; export default async function ChatGPTPage() { const hashedKey = cookies().get(SITE_USER_COOKIE)?.value as string; @@ -38,7 +20,7 @@ export default async function ChatGPTPage() { return (
- +
); } diff --git a/packages/click-prompt/src/app/[lang]/click-flow/[id]/StartlingStepDetail.tsx b/packages/click-prompt/src/app/[lang]/click-flow/[id]/StartlingStepDetail.tsx index 0c8eb97..cce5529 100644 --- a/packages/click-prompt/src/app/[lang]/click-flow/[id]/StartlingStepDetail.tsx +++ b/packages/click-prompt/src/app/[lang]/click-flow/[id]/StartlingStepDetail.tsx @@ -15,26 +15,7 @@ import CopyComponent from "@/components/CopyComponent"; import PostFlowAction from "@/flows/components/PostFlowAction"; import PreFlowAction from "@/flows/components/PreFlowAction"; import { fillStepWithValued, FlowStep } from "@/flows/types/flow-step"; -import { isLoggedIn, login, logout } from "@/api/user"; -import { - changeConversationName, - createConversation, - deleteAllConversations, - deleteConversation, -} from "@/api/conversation"; -import { getChatsByConversationId, sendMessage } from "@/api/chat"; - -const llmServiceApi: any = { - login, - logout, - isLoggedIn, - changeConversationName, - createConversation, - getChatsByConversationId, - deleteConversation, - deleteAllConversations, - sendMessage, -}; +import { llmServiceApi } from "@/api/llmService"; type StepProps = { index: number; diff --git a/packages/click-prompt/src/app/[lang]/page.client.tsx b/packages/click-prompt/src/app/[lang]/page.client.tsx index c388061..d267677 100644 --- a/packages/click-prompt/src/app/[lang]/page.client.tsx +++ b/packages/click-prompt/src/app/[lang]/page.client.tsx @@ -5,26 +5,7 @@ import { ClickPromptHome } from "@/components/CustomIcon"; import { GITHUB_URL } from "@/configs/constants"; import { ClickPromptButton } from "@/components/ClickPromptButton"; import React from "react"; -import { isLoggedIn, login, logout } from "@/api/user"; -import { - changeConversationName, - createConversation, - deleteAllConversations, - deleteConversation, -} from "@/api/conversation"; -import { getChatsByConversationId, sendMsgWithStreamRes } from "@/api/chat"; - -const llmServiceApi: any = { - login, - logout, - isLoggedIn, - changeConversationName, - createConversation, - getChatsByConversationId, - deleteConversation, - deleteAllConversations, - sendMsgWithStreamRes, -}; +import { llmServiceApiWithStream } from "@/api/llmService"; export const HomeClient = ({ dict }: { dict: Record }) => { return ( @@ -62,7 +43,13 @@ export const HomeClient = ({ dict }: { dict: Record }) => { - + diff --git a/packages/click-prompt/src/app/[lang]/stable-diffusion-generator/page.client.tsx b/packages/click-prompt/src/app/[lang]/stable-diffusion-generator/page.client.tsx index d4a7458..5b40cae 100644 --- a/packages/click-prompt/src/app/[lang]/stable-diffusion-generator/page.client.tsx +++ b/packages/click-prompt/src/app/[lang]/stable-diffusion-generator/page.client.tsx @@ -30,26 +30,7 @@ import { ClickPromptButton } from "@/components/ClickPromptButton"; import { HuggingFaceTxt2Img } from "@/components/StableDiffusion/HuggingFaceTxt2Img"; import { SdPrompt } from "@/components/StableDiffusion/SdPrompt"; import { StableDiffusionGenData } from "@/data-processor/StableDiffusionGenData"; -import { isLoggedIn, login, logout } from "@/api/user"; -import { - changeConversationName, - createConversation, - deleteAllConversations, - deleteConversation, -} from "@/api/conversation"; -import { getChatsByConversationId, sendMsgWithStreamRes } from "@/api/chat"; - -const llmServiceApi: any = { - login, - logout, - isLoggedIn, - changeConversationName, - createConversation, - getChatsByConversationId, - deleteConversation, - deleteAllConversations, - sendMsgWithStreamRes, -}; +import { llmServiceApiWithStream } from "@/api/llmService"; const sdDetailedPromptFields: SdPromptField[] = [ { @@ -540,7 +521,7 @@ function StableDiffusionGenerator({ i18n }: GeneralI18nProps) { - + From 929cc17a734d1257c7b2c52dbafd94776cdc3e20 Mon Sep 17 00:00:00 2001 From: teobler Date: Tue, 28 Mar 2023 22:21:06 +0800 Subject: [PATCH 11/22] fix: add max_old_space_size to fix heap out of memory issue during building in github actions Signed-off-by: teobler --- .github/workflows/ci.yaml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index c7a1499..eeae2cd 100644 --- a/.github/workflows/ci.yaml +++ b/.github/workflows/ci.yaml @@ -25,7 +25,9 @@ jobs: - run: npm ci - - run: npm run build --if-present + - run: | + export NODE_OPTIONS="--max_old_space_size=4096" + npm run build --if-present - run: npm run test lint: From 2bab7a08b3535981f6f9e8826e0ac5d37e2fc2be Mon Sep 17 00:00:00 2001 From: teobler Date: Tue, 28 Mar 2023 22:31:26 +0800 Subject: [PATCH 12/22] chore: add name for each github actions for better understanding Signed-off-by: teobler --- .github/workflows/ci.yaml | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index eeae2cd..ec9d3b1 100644 --- a/.github/workflows/ci.yaml +++ b/.github/workflows/ci.yaml @@ -19,19 +19,23 @@ jobs: with: persist-credentials: false - - uses: actions/setup-node@v3 + - name: Setup Node 🧰 + uses: actions/setup-node@v3 with: node-version: 16 - - run: npm ci + - name: Install Dependencies 🗂 + run: npm ci - - run: | + - name: Build 🛠 + run: | export NODE_OPTIONS="--max_old_space_size=4096" npm run build --if-present - - run: npm run test + - name: Test 🔧 + run: npm run test lint: - name: format and lint + name: Format & Lint runs-on: ubuntu-latest steps: - name: Checkout 🛎️ @@ -39,11 +43,13 @@ jobs: with: persist-credentials: false - - uses: actions/setup-node@v3 + - name: Setup Node 🧰 + uses: actions/setup-node@v3 with: node-version: 16 - - run: npm ci - - run: npm run format + - name: Install Dependencies 🗂 + run: npm ci - - run: npm run lint + - name: Lint 💄 + run: npm run lint From c75726fd4c787241fa564b93a9be0f1b93e5a6b9 Mon Sep 17 00:00:00 2001 From: teobler Date: Thu, 30 Mar 2023 14:39:29 +0800 Subject: [PATCH 13/22] fix: fix ssr error by import componment from click-prompt-button dynamicly Signed-off-by: teobler --- package-lock.json | 324 ++++++++++++------ packages/click-prompt-button/package.json | 13 +- .../click-prompt-button/postcss.config.cjs | 6 + .../src/ClickPromptButton.tsx | 2 +- .../src/ExecutePromptButton.tsx | 2 +- .../src/chatgpt/ChatGPTApp.tsx | 2 +- packages/click-prompt-button/src/index.css | 5 + packages/click-prompt-button/src/index.ts | 19 +- .../click-prompt-button/tailwind.config.cjs | 21 ++ .../chatgpt-visual-novel/page.client.tsx | 3 +- .../click-flow/[id]/StartlingStepDetail.tsx | 3 +- .../components/ClickPromptButton/index.tsx | 30 +- 12 files changed, 299 insertions(+), 131 deletions(-) create mode 100644 packages/click-prompt-button/postcss.config.cjs create mode 100644 packages/click-prompt-button/src/index.css create mode 100644 packages/click-prompt-button/tailwind.config.cjs diff --git a/package-lock.json b/package-lock.json index 9cb1075..f97ed35 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8491,38 +8491,6 @@ "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, - "node_modules/acorn-node": { - "version": "1.8.2", - "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz", - "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==", - "dev": true, - "dependencies": { - "acorn": "^7.0.0", - "acorn-walk": "^7.0.0", - "xtend": "^4.0.2" - } - }, - "node_modules/acorn-node/node_modules/acorn": { - "version": "7.4.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", - "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", - "dev": true, - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/acorn-node/node_modules/acorn-walk": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz", - "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==", - "dev": true, - "engines": { - "node": ">=0.4.0" - } - }, "node_modules/acorn-walk": { "version": "8.2.0", "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz", @@ -8620,6 +8588,12 @@ "node": ">=4" } }, + "node_modules/any-promise": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", + "dev": true + }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -10581,15 +10555,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/defined": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz", - "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==", - "dev": true, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/delaunator": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.0.tgz", @@ -10636,23 +10601,6 @@ "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz", "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==" }, - "node_modules/detective": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz", - "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==", - "dev": true, - "dependencies": { - "acorn-node": "^1.8.2", - "defined": "^1.0.0", - "minimist": "^1.2.6" - }, - "bin": { - "detective": "bin/detective.js" - }, - "engines": { - "node": ">=0.8.0" - } - }, "node_modules/didyoumean": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", @@ -15379,6 +15327,15 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, + "node_modules/jiti": { + "version": "1.18.2", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz", + "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==", + "dev": true, + "bin": { + "jiti": "bin/jiti.js" + } + }, "node_modules/jju": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz", @@ -17237,6 +17194,17 @@ } } }, + "node_modules/mz": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", + "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", + "dev": true, + "dependencies": { + "any-promise": "^1.0.0", + "object-assign": "^4.0.1", + "thenify-all": "^1.0.0" + } + }, "node_modules/nano-css": { "version": "5.3.5", "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.5.tgz", @@ -20190,6 +20158,56 @@ "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz", "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==" }, + "node_modules/sucrase": { + "version": "3.31.0", + "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.31.0.tgz", + "integrity": "sha512-6QsHnkqyVEzYcaiHsOKkzOtOgdJcb8i54x6AV2hDwyZcY9ZyykGZVw6L/YN98xC0evwTP6utsWWrKRaa8QlfEQ==", + "dev": true, + "dependencies": { + "commander": "^4.0.0", + "glob": "7.1.6", + "lines-and-columns": "^1.1.6", + "mz": "^2.7.0", + "pirates": "^4.0.1", + "ts-interface-checker": "^0.1.9" + }, + "bin": { + "sucrase": "bin/sucrase", + "sucrase-node": "bin/sucrase-node" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/sucrase/node_modules/commander": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, + "node_modules/sucrase/node_modules/glob": { + "version": "7.1.6", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", + "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -20289,20 +20307,20 @@ } }, "node_modules/tailwindcss": { - "version": "3.2.7", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.7.tgz", - "integrity": "sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.0.tgz", + "integrity": "sha512-hOXlFx+YcklJ8kXiCAfk/FMyr4Pm9ck477G0m/us2344Vuj355IpoEDB5UmGAsSpTBmr+4ZhjzW04JuFXkb/fw==", "dev": true, "dependencies": { "arg": "^5.0.2", "chokidar": "^3.5.3", "color-name": "^1.1.4", - "detective": "^5.2.1", "didyoumean": "^1.2.2", "dlv": "^1.1.3", "fast-glob": "^3.2.12", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", + "jiti": "^1.17.2", "lilconfig": "^2.0.6", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", @@ -20316,7 +20334,8 @@ "postcss-selector-parser": "^6.0.11", "postcss-value-parser": "^4.2.0", "quick-lru": "^5.1.1", - "resolve": "^1.22.1" + "resolve": "^1.22.1", + "sucrase": "^3.29.0" }, "bin": { "tailwind": "lib/cli.js", @@ -20390,6 +20409,27 @@ "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, + "node_modules/thenify": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", + "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", + "dev": true, + "dependencies": { + "any-promise": "^1.0.0" + } + }, + "node_modules/thenify-all": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", + "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", + "dev": true, + "dependencies": { + "thenify": ">= 3.1.0 < 4" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/throttle-debounce": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz", @@ -20518,6 +20558,12 @@ "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz", "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==" }, + "node_modules/ts-interface-checker": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", + "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", + "dev": true + }, "node_modules/ts-morph": { "version": "17.0.1", "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-17.0.1.tgz", @@ -21938,8 +21984,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", @@ -21950,11 +21994,18 @@ "@rollup/plugin-url": "^8.0.1", "@svgr/rollup": "^6.5.1", "@vitejs/plugin-react": "^3.1.0", + "autoprefixer": "^10.4.14", + "postcss": "^8.4.21", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "tailwindcss": "^3.3.0", "vite": "^4.2.1", "vite-plugin-dts": "^2.1.0", "vite-tsconfig-paths": "^4.0.7" }, "peerDependencies": { + "@emotion/react": "11.10.6", + "@emotion/styled": "11.10.6", "next": "^13.2.4", "react": "^18.2.0", "react-dom": "^18.2.0" @@ -24122,15 +24173,18 @@ "@rollup/plugin-url": "^8.0.1", "@svgr/rollup": "^6.5.1", "@vitejs/plugin-react": "^3.1.0", + "autoprefixer": "^10.4.14", "client-only": "^0.0.1", "mermaid": "^10.0.2", - "react": "18.2.0", - "react-dom": "18.2.0", + "postcss": "^8.4.21", + "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", + "tailwindcss": "^3.3.0", "vite": "^4.2.1", "vite-plugin-dts": "^2.1.0", "vite-tsconfig-paths": "^4.0.7" @@ -28106,31 +28160,6 @@ "dev": true, "requires": {} }, - "acorn-node": { - "version": "1.8.2", - "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz", - "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==", - "dev": true, - "requires": { - "acorn": "^7.0.0", - "acorn-walk": "^7.0.0", - "xtend": "^4.0.2" - }, - "dependencies": { - "acorn": { - "version": "7.4.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", - "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", - "dev": true - }, - "acorn-walk": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz", - "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==", - "dev": true - } - } - }, "acorn-walk": { "version": "8.2.0", "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz", @@ -28199,6 +28228,12 @@ "color-convert": "^1.9.0" } }, + "any-promise": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", + "dev": true + }, "anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -29727,12 +29762,6 @@ "object-keys": "^1.1.1" } }, - "defined": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz", - "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==", - "dev": true - }, "delaunator": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.0.tgz", @@ -29767,17 +29796,6 @@ "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz", "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==" }, - "detective": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz", - "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==", - "dev": true, - "requires": { - "acorn-node": "^1.8.2", - "defined": "^1.0.0", - "minimist": "^1.2.6" - } - }, "didyoumean": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", @@ -33229,6 +33247,12 @@ } } }, + "jiti": { + "version": "1.18.2", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz", + "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==", + "dev": true + }, "jju": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz", @@ -34505,6 +34529,17 @@ "w3c-keyname": "^2.2.4" } }, + "mz": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", + "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", + "dev": true, + "requires": { + "any-promise": "^1.0.0", + "object-assign": "^4.0.1", + "thenify-all": "^1.0.0" + } + }, "nano-css": { "version": "5.3.5", "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.5.tgz", @@ -36642,6 +36677,42 @@ "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz", "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==" }, + "sucrase": { + "version": "3.31.0", + "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.31.0.tgz", + "integrity": "sha512-6QsHnkqyVEzYcaiHsOKkzOtOgdJcb8i54x6AV2hDwyZcY9ZyykGZVw6L/YN98xC0evwTP6utsWWrKRaa8QlfEQ==", + "dev": true, + "requires": { + "commander": "^4.0.0", + "glob": "7.1.6", + "lines-and-columns": "^1.1.6", + "mz": "^2.7.0", + "pirates": "^4.0.1", + "ts-interface-checker": "^0.1.9" + }, + "dependencies": { + "commander": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "dev": true + }, + "glob": { + "version": "7.1.6", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", + "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", + "dev": true, + "requires": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + } + } + } + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -36719,20 +36790,20 @@ } }, "tailwindcss": { - "version": "3.2.7", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.7.tgz", - "integrity": "sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.0.tgz", + "integrity": "sha512-hOXlFx+YcklJ8kXiCAfk/FMyr4Pm9ck477G0m/us2344Vuj355IpoEDB5UmGAsSpTBmr+4ZhjzW04JuFXkb/fw==", "dev": true, "requires": { "arg": "^5.0.2", "chokidar": "^3.5.3", "color-name": "^1.1.4", - "detective": "^5.2.1", "didyoumean": "^1.2.2", "dlv": "^1.1.3", "fast-glob": "^3.2.12", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", + "jiti": "^1.17.2", "lilconfig": "^2.0.6", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", @@ -36746,7 +36817,8 @@ "postcss-selector-parser": "^6.0.11", "postcss-value-parser": "^4.2.0", "quick-lru": "^5.1.1", - "resolve": "^1.22.1" + "resolve": "^1.22.1", + "sucrase": "^3.29.0" }, "dependencies": { "color-name": { @@ -36803,6 +36875,24 @@ "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, + "thenify": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", + "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", + "dev": true, + "requires": { + "any-promise": "^1.0.0" + } + }, + "thenify-all": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", + "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", + "dev": true, + "requires": { + "thenify": ">= 3.1.0 < 4" + } + }, "throttle-debounce": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz", @@ -36905,6 +36995,12 @@ "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz", "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==" }, + "ts-interface-checker": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", + "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", + "dev": true + }, "ts-morph": { "version": "17.0.1", "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-17.0.1.tgz", diff --git a/packages/click-prompt-button/package.json b/packages/click-prompt-button/package.json index 415eacf..eedefcb 100644 --- a/packages/click-prompt-button/package.json +++ b/packages/click-prompt-button/package.json @@ -21,8 +21,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", @@ -33,15 +31,20 @@ "@rollup/plugin-url": "^8.0.1", "@svgr/rollup": "^6.5.1", "@vitejs/plugin-react": "^3.1.0", + "autoprefixer": "^10.4.14", + "postcss": "^8.4.21", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "tailwindcss": "^3.3.0", "vite": "^4.2.1", "vite-plugin-dts": "^2.1.0", "vite-tsconfig-paths": "^4.0.7" }, "peerDependencies": { + "@emotion/react": "11.10.6", + "@emotion/styled": "11.10.6", "next": "^13.2.4", "react": "^18.2.0", - "react-dom": "^18.2.0", - "@emotion/react": "11.10.6", - "@emotion/styled": "11.10.6" + "react-dom": "^18.2.0" } } diff --git a/packages/click-prompt-button/postcss.config.cjs b/packages/click-prompt-button/postcss.config.cjs new file mode 100644 index 0000000..12a703d --- /dev/null +++ b/packages/click-prompt-button/postcss.config.cjs @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/packages/click-prompt-button/src/ClickPromptButton.tsx b/packages/click-prompt-button/src/ClickPromptButton.tsx index cf89eb7..3ab2a04 100644 --- a/packages/click-prompt-button/src/ClickPromptButton.tsx +++ b/packages/click-prompt-button/src/ClickPromptButton.tsx @@ -7,7 +7,7 @@ import { LoggingDrawer } from "@/LoggingDrawer"; import { ClickPromptBird } from "@/ClickPromptBird"; import type { LlmServiceApi } from "@/types/llmServiceApi"; -interface ClickPromptButtonProps extends ButtonProps { +export interface ClickPromptButtonProps extends ButtonProps { loading?: boolean; onClick?: MouseEventHandler; size?: ButtonSize; diff --git a/packages/click-prompt-button/src/ExecutePromptButton.tsx b/packages/click-prompt-button/src/ExecutePromptButton.tsx index 4098058..29be7b1 100644 --- a/packages/click-prompt-button/src/ExecutePromptButton.tsx +++ b/packages/click-prompt-button/src/ExecutePromptButton.tsx @@ -6,7 +6,7 @@ import { LoggingDrawer } from "@/LoggingDrawer"; import { ClickPromptBird } from "@/ClickPromptBird"; import type { Chat, LlmServiceApi } from "@/types/llmServiceApi"; -interface ExecButtonProps { +export interface ExecButtonProps { loading?: boolean; text: string; children?: React.ReactNode; diff --git a/packages/click-prompt-button/src/chatgpt/ChatGPTApp.tsx b/packages/click-prompt-button/src/chatgpt/ChatGPTApp.tsx index b1d6f8e..d20c0e7 100644 --- a/packages/click-prompt-button/src/chatgpt/ChatGPTApp.tsx +++ b/packages/click-prompt-button/src/chatgpt/ChatGPTApp.tsx @@ -3,7 +3,7 @@ import { LoginPage } from "@/chatgpt/LoginPage"; import React, { useEffect, useState } from "react"; import type { LlmServiceApi } from "@/types/llmServiceApi"; -interface ChatGPTAppProps { +export interface ChatGPTAppProps { loggedIn?: boolean; updateLoginStatus?: (loggedIn: boolean) => void; initMessage?: string; diff --git a/packages/click-prompt-button/src/index.css b/packages/click-prompt-button/src/index.css new file mode 100644 index 0000000..7f39374 --- /dev/null +++ b/packages/click-prompt-button/src/index.css @@ -0,0 +1,5 @@ +@tailwind base; + +@tailwind components; + +@tailwind utilities; diff --git a/packages/click-prompt-button/src/index.ts b/packages/click-prompt-button/src/index.ts index a18c0d5..4b9d64c 100644 --- a/packages/click-prompt-button/src/index.ts +++ b/packages/click-prompt-button/src/index.ts @@ -1,6 +1,13 @@ -export { ClickPromptButton } from "@/ClickPromptButton"; -export { ExecutePromptButton } from "@/ExecutePromptButton"; -export { ChatGPTApp } from "@/chatgpt/ChatGPTApp"; -export { ChatRoom } from "@/chatgpt/ChatRoom"; -export { LoginPage } from "@/chatgpt/LoginPage"; -export type { Chat, LlmServiceApi } from "@/types/llmServiceApi"; +import "./index.css"; +import type { ClickPromptButtonProps } from "@/ClickPromptButton"; +import { ClickPromptButton } from "@/ClickPromptButton"; +import { ExecutePromptButton } from "@/ExecutePromptButton"; +import type { ExecButtonProps } from "@/ExecutePromptButton"; +import { ChatGPTApp } from "@/chatgpt/ChatGPTApp"; +import type { ChatGPTAppProps } from "@/chatgpt/ChatGPTApp"; +import { ChatRoom } from "@/chatgpt/ChatRoom"; +import { LoginPage } from "@/chatgpt/LoginPage"; +import type { Chat, LlmServiceApi } from "@/types/llmServiceApi"; + +export { ClickPromptButton, ExecutePromptButton, ChatGPTApp, ChatRoom, LoginPage }; +export type { Chat, LlmServiceApi, ClickPromptButtonProps, ChatGPTAppProps, ExecButtonProps }; diff --git a/packages/click-prompt-button/tailwind.config.cjs b/packages/click-prompt-button/tailwind.config.cjs new file mode 100644 index 0000000..b65fef7 --- /dev/null +++ b/packages/click-prompt-button/tailwind.config.cjs @@ -0,0 +1,21 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: ["./src/**/*.{js,ts,jsx,tsx}"], + theme: { + extend: { + colors: { + // generate by https://huemint.com/website-magazine/ + white: "#ffffff", + // Pohutukawa + black: "#16245d", + light: "#F8F4EA", + blue: "#0A5CD6", + }, + }, + }, + plugins: [], + corePlugins: { + preflight: false, + }, + prefix: "click-prompt-button-", +}; diff --git a/packages/click-prompt/src/app/[lang]/chatgpt-visual-novel/page.client.tsx b/packages/click-prompt/src/app/[lang]/chatgpt-visual-novel/page.client.tsx index a303329..255a646 100644 --- a/packages/click-prompt/src/app/[lang]/chatgpt-visual-novel/page.client.tsx +++ b/packages/click-prompt/src/app/[lang]/chatgpt-visual-novel/page.client.tsx @@ -34,7 +34,8 @@ import restaurant from "@/assets/images/visual-novel/00146-2156326714.png"; import Image, { StaticImageData } from "next/image"; import { upperFirst } from "lodash-es"; -import { Chat, ExecutePromptButton } from "@/components/ClickPromptButton"; +import type { Chat } from "@/components/ClickPromptButton"; +import { ExecutePromptButton } from "@/components/ClickPromptButton"; import SimpleMarkdown from "@/components/markdown/SimpleMarkdown"; import CopyComponent from "@/components/CopyComponent"; import { llmServiceApi } from "@/api/llmService"; diff --git a/packages/click-prompt/src/app/[lang]/click-flow/[id]/StartlingStepDetail.tsx b/packages/click-prompt/src/app/[lang]/click-flow/[id]/StartlingStepDetail.tsx index cce5529..3a94fba 100644 --- a/packages/click-prompt/src/app/[lang]/click-flow/[id]/StartlingStepDetail.tsx +++ b/packages/click-prompt/src/app/[lang]/click-flow/[id]/StartlingStepDetail.tsx @@ -9,7 +9,8 @@ import SimpleMarkdown from "@/components/markdown/SimpleMarkdown"; import { AiBlock } from "@/components/chatgpt/AiBlock"; import { ChatGptIcon } from "@/components/CustomIcon"; import { StartlingFlow } from "@/flows/types/click-flow"; -import { Chat, ExecutePromptButton } from "@/components/ClickPromptButton"; +import type { Chat } from "@/components/ClickPromptButton"; +import { ExecutePromptButton } from "@/components/ClickPromptButton"; import { AskRenderer } from "@/app/[lang]/click-flow/[id]/AskRenderer"; import CopyComponent from "@/components/CopyComponent"; import PostFlowAction from "@/flows/components/PostFlowAction"; diff --git a/packages/click-prompt/src/components/ClickPromptButton/index.tsx b/packages/click-prompt/src/components/ClickPromptButton/index.tsx index 2ab599e..41136ca 100644 --- a/packages/click-prompt/src/components/ClickPromptButton/index.tsx +++ b/packages/click-prompt/src/components/ClickPromptButton/index.tsx @@ -1,3 +1,31 @@ "use client"; -export { ClickPromptButton, ExecutePromptButton, Chat, ChatGPTApp } from "@click-prompt/click-prompt-button"; +import dynamic from "next/dynamic"; +import type { Chat, ClickPromptButtonProps, LlmServiceApi } from "@click-prompt/click-prompt-button"; + +// TODO: investigate why this is needed - it should be possible to import the components directly(before monorepo it can) +export const ClickPromptButton = (props: ClickPromptButtonProps) => { + const CPB = dynamic(() => import("@click-prompt/click-prompt-button").then((module) => module.ClickPromptButton), { + ssr: false, + }); + + return ; +}; + +export const ChatGPTApp = (props: ClickPromptButtonProps) => { + const GPT = dynamic(() => import("@click-prompt/click-prompt-button").then((module) => module.ChatGPTApp), { + ssr: false, + }); + + return ; +}; + +export const ExecutePromptButton = (props: ClickPromptButtonProps) => { + const EPB = dynamic(() => import("@click-prompt/click-prompt-button").then((module) => module.ExecutePromptButton), { + ssr: false, + }); + + return ; +}; + +export type { Chat, LlmServiceApi, ClickPromptButtonProps }; From 07e6b0d87340f6e2dec778cf3ce801abbadd12f3 Mon Sep 17 00:00:00 2001 From: teobler Date: Fri, 31 Mar 2023 15:22:26 +0800 Subject: [PATCH 14/22] fix: fix style issue Signed-off-by: teobler --- package-lock.json | 438 +++++++++++++++++- packages/click-prompt-button/package.json | 12 +- .../src/ClickPromptButton.tsx | 2 +- .../click-prompt-button/src/CustomIcon.tsx | 2 +- .../src/ExecutePromptButton.tsx | 2 +- .../click-prompt-button/src/LoggingDrawer.tsx | 4 +- .../src/chatgpt/ChatRoom.tsx | 18 +- .../src/chatgpt/LoginPage.tsx | 14 +- packages/click-prompt-button/src/index.css | 5 - packages/click-prompt-button/src/index.ts | 6 +- .../src/markdown/Mermaid.tsx | 2 +- .../src/markdown/SimpleMarkdown.tsx | 2 +- .../click-prompt-button/tailwind.config.cjs | 2 +- .../components/ClickPromptButton/index.tsx | 1 + 14 files changed, 474 insertions(+), 36 deletions(-) delete mode 100644 packages/click-prompt-button/src/index.css diff --git a/package-lock.json b/package-lock.json index f97ed35..1cda652 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9223,6 +9223,16 @@ "node": ">=6" } }, + "node_modules/camel-case": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz", + "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==", + "dev": true, + "dependencies": { + "pascal-case": "^3.1.2", + "tslib": "^2.0.3" + } + }, "node_modules/camelcase": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", @@ -9259,6 +9269,17 @@ } ] }, + "node_modules/capital-case": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz", + "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + } + }, "node_modules/case-anything": { "version": "2.1.10", "resolved": "https://registry.npmjs.org/case-anything/-/case-anything-2.1.10.tgz", @@ -9312,6 +9333,26 @@ "node": ">=0.8.0" } }, + "node_modules/change-case": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz", + "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==", + "dev": true, + "dependencies": { + "camel-case": "^4.1.2", + "capital-case": "^1.0.4", + "constant-case": "^3.0.4", + "dot-case": "^3.0.4", + "header-case": "^2.0.4", + "no-case": "^3.0.4", + "param-case": "^3.0.4", + "pascal-case": "^3.1.2", + "path-case": "^3.0.4", + "sentence-case": "^3.0.4", + "snake-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/char-regex": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz", @@ -9666,6 +9707,23 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dev": true }, + "node_modules/console": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/console/-/console-0.7.2.tgz", + "integrity": "sha512-+JSDwGunA4MTEgAV/4VBKwUHonP8CzJ/6GIuwPi6acKFqFfHUdSGCm89ZxZ5FfGWdZfkdgAroy5bJ5FSeN/t4g==", + "dev": true + }, + "node_modules/constant-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz", + "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case": "^2.0.2" + } + }, "node_modules/convert-source-map": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", @@ -10772,6 +10830,16 @@ "url": "https://github.com/fb55/domutils?sponsor=1" } }, + "node_modules/dot-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", + "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/dotparser": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/dotparser/-/dotparser-1.1.1.tgz", @@ -10967,6 +11035,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/es-module-lexer": { + "version": "0.9.3", + "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz", + "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==", + "dev": true + }, "node_modules/es-set-tostringtag": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz", @@ -12621,6 +12695,16 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/header-case": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz", + "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==", + "dev": true, + "dependencies": { + "capital-case": "^1.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/heap": { "version": "0.2.7", "resolved": "https://registry.npmjs.org/heap/-/heap-0.2.7.tgz", @@ -16128,6 +16212,15 @@ "loose-envify": "cli.js" } }, + "node_modules/lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "dependencies": { + "tslib": "^2.0.3" + } + }, "node_modules/lowlight": { "version": "1.20.0", "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz", @@ -17376,6 +17469,16 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "dependencies": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, "node_modules/node-abi": { "version": "3.33.0", "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.33.0.tgz", @@ -17825,6 +17928,16 @@ "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.0.tgz", "integrity": "sha512-ZBQABWG09p+u8rFoJVl/GhgxZ5zy9Zh1Lu/LVc7VX5T4nljjC14/YTcpebYwqP218B9X307eBOP7Tuhoqv7v7w==" }, + "node_modules/param-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", + "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==", + "dev": true, + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -17895,12 +18008,32 @@ "url": "https://github.com/inikulin/parse5?sponsor=1" } }, + "node_modules/pascal-case": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", + "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/path-browserify": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz", "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==", "dev": true }, + "node_modules/path-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz", + "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==", + "dev": true, + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -17941,6 +18074,12 @@ "node": ">=8" } }, + "node_modules/pathe": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.2.0.tgz", + "integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==", + "dev": true + }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -19590,6 +19729,17 @@ "semver": "bin/semver.js" } }, + "node_modules/sentence-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz", + "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + } + }, "node_modules/server-only": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz", @@ -19799,6 +19949,16 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/snake-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", + "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", + "dev": true, + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", @@ -21036,6 +21196,24 @@ "browserslist": ">= 4.21.0" } }, + "node_modules/upper-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz", + "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==", + "dev": true, + "dependencies": { + "tslib": "^2.0.3" + } + }, + "node_modules/upper-case-first": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz", + "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==", + "dev": true, + "dependencies": { + "tslib": "^2.0.3" + } + }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", @@ -21337,6 +21515,46 @@ "node": ">=12" } }, + "node_modules/vite-plugin-style-import": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/vite-plugin-style-import/-/vite-plugin-style-import-2.0.0.tgz", + "integrity": "sha512-qtoHQae5dSUQPo/rYz/8p190VU5y19rtBaeV7ryLa/AYAU/e9CG89NrN/3+k7MR8mJy/GPIu91iJ3zk9foUOSA==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^4.1.2", + "change-case": "^4.1.2", + "console": "^0.7.2", + "es-module-lexer": "^0.9.3", + "fs-extra": "^10.0.0", + "magic-string": "^0.25.7", + "pathe": "^0.2.0" + }, + "peerDependencies": { + "vite": ">=2.0.0" + } + }, + "node_modules/vite-plugin-style-import/node_modules/@rollup/pluginutils": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz", + "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==", + "dev": true, + "dependencies": { + "estree-walker": "^2.0.1", + "picomatch": "^2.2.2" + }, + "engines": { + "node": ">= 8.0.0" + } + }, + "node_modules/vite-plugin-style-import/node_modules/magic-string": { + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz", + "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==", + "dev": true, + "dependencies": { + "sourcemap-codec": "^1.4.8" + } + }, "node_modules/vite-tsconfig-paths": { "version": "4.0.7", "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.0.7.tgz", @@ -21980,8 +22198,6 @@ "@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-markdown": "^8.0.5", @@ -21991,6 +22207,8 @@ "svg-pan-zoom": "^3.6.1" }, "devDependencies": { + "@emotion/react": "11.10.6", + "@emotion/styled": "11.10.6", "@rollup/plugin-url": "^8.0.1", "@svgr/rollup": "^6.5.1", "@vitejs/plugin-react": "^3.1.0", @@ -22001,6 +22219,7 @@ "tailwindcss": "^3.3.0", "vite": "^4.2.1", "vite-plugin-dts": "^2.1.0", + "vite-plugin-style-import": "^2.0.0", "vite-tsconfig-paths": "^4.0.7" }, "peerDependencies": { @@ -24187,6 +24406,7 @@ "tailwindcss": "^3.3.0", "vite": "^4.2.1", "vite-plugin-dts": "^2.1.0", + "vite-plugin-style-import": "^2.0.0", "vite-tsconfig-paths": "^4.0.7" } }, @@ -28686,6 +28906,16 @@ "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==" }, + "camel-case": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz", + "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==", + "dev": true, + "requires": { + "pascal-case": "^3.1.2", + "tslib": "^2.0.3" + } + }, "camelcase": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", @@ -28703,6 +28933,17 @@ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001468.tgz", "integrity": "sha512-zgAo8D5kbOyUcRAgSmgyuvBkjrGk5CGYG5TYgFdpQv+ywcyEpo1LOWoG8YmoflGnh+V+UsNuKYedsoYs0hzV5A==" }, + "capital-case": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz", + "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==", + "dev": true, + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + } + }, "case-anything": { "version": "2.1.10", "resolved": "https://registry.npmjs.org/case-anything/-/case-anything-2.1.10.tgz", @@ -28738,6 +28979,26 @@ } } }, + "change-case": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz", + "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==", + "dev": true, + "requires": { + "camel-case": "^4.1.2", + "capital-case": "^1.0.4", + "constant-case": "^3.0.4", + "dot-case": "^3.0.4", + "header-case": "^2.0.4", + "no-case": "^3.0.4", + "param-case": "^3.0.4", + "pascal-case": "^3.1.2", + "path-case": "^3.0.4", + "sentence-case": "^3.0.4", + "snake-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "char-regex": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz", @@ -29096,6 +29357,23 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dev": true }, + "console": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/console/-/console-0.7.2.tgz", + "integrity": "sha512-+JSDwGunA4MTEgAV/4VBKwUHonP8CzJ/6GIuwPi6acKFqFfHUdSGCm89ZxZ5FfGWdZfkdgAroy5bJ5FSeN/t4g==", + "dev": true + }, + "constant-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz", + "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==", + "dev": true, + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case": "^2.0.2" + } + }, "convert-source-map": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", @@ -29926,6 +30204,16 @@ "domhandler": "^4.2.0" } }, + "dot-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", + "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "dev": true, + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "dotparser": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/dotparser/-/dotparser-1.1.1.tgz", @@ -30080,6 +30368,12 @@ "stop-iteration-iterator": "^1.0.0" } }, + "es-module-lexer": { + "version": "0.9.3", + "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz", + "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==", + "dev": true + }, "es-set-tostringtag": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz", @@ -31294,6 +31588,16 @@ } } }, + "header-case": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz", + "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==", + "dev": true, + "requires": { + "capital-case": "^1.0.4", + "tslib": "^2.0.3" + } + }, "heap": { "version": "0.2.7", "resolved": "https://registry.npmjs.org/heap/-/heap-0.2.7.tgz", @@ -33837,6 +34141,15 @@ "js-tokens": "^3.0.0 || ^4.0.0" } }, + "lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "requires": { + "tslib": "^2.0.3" + } + }, "lowlight": { "version": "1.20.0", "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz", @@ -34638,6 +34951,16 @@ "minimist": "^1.2.8" } }, + "no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "requires": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, "node-abi": { "version": "3.33.0", "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.33.0.tgz", @@ -34968,6 +35291,16 @@ "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.0.tgz", "integrity": "sha512-ZBQABWG09p+u8rFoJVl/GhgxZ5zy9Zh1Lu/LVc7VX5T4nljjC14/YTcpebYwqP218B9X307eBOP7Tuhoqv7v7w==" }, + "param-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", + "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==", + "dev": true, + "requires": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -35019,12 +35352,32 @@ "entities": "^4.4.0" } }, + "pascal-case": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", + "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==", + "dev": true, + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "path-browserify": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz", "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==", "dev": true }, + "path-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz", + "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==", + "dev": true, + "requires": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -35053,6 +35406,12 @@ "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==" }, + "pathe": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.2.0.tgz", + "integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==", + "dev": true + }, "picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -36264,6 +36623,17 @@ "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", "dev": true }, + "sentence-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz", + "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==", + "dev": true, + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + } + }, "server-only": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz", @@ -36408,6 +36778,16 @@ } } }, + "snake-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", + "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", + "dev": true, + "requires": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", @@ -37309,6 +37689,24 @@ "picocolors": "^1.0.0" } }, + "upper-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz", + "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==", + "dev": true, + "requires": { + "tslib": "^2.0.3" + } + }, + "upper-case-first": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz", + "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==", + "dev": true, + "requires": { + "tslib": "^2.0.3" + } + }, "uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", @@ -37492,6 +37890,42 @@ } } }, + "vite-plugin-style-import": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/vite-plugin-style-import/-/vite-plugin-style-import-2.0.0.tgz", + "integrity": "sha512-qtoHQae5dSUQPo/rYz/8p190VU5y19rtBaeV7ryLa/AYAU/e9CG89NrN/3+k7MR8mJy/GPIu91iJ3zk9foUOSA==", + "dev": true, + "requires": { + "@rollup/pluginutils": "^4.1.2", + "change-case": "^4.1.2", + "console": "^0.7.2", + "es-module-lexer": "^0.9.3", + "fs-extra": "^10.0.0", + "magic-string": "^0.25.7", + "pathe": "^0.2.0" + }, + "dependencies": { + "@rollup/pluginutils": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz", + "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==", + "dev": true, + "requires": { + "estree-walker": "^2.0.1", + "picomatch": "^2.2.2" + } + }, + "magic-string": { + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz", + "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==", + "dev": true, + "requires": { + "sourcemap-codec": "^1.4.8" + } + } + } + }, "vite-tsconfig-paths": { "version": "4.0.7", "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.0.7.tgz", diff --git a/packages/click-prompt-button/package.json b/packages/click-prompt-button/package.json index eedefcb..dea7e4d 100644 --- a/packages/click-prompt-button/package.json +++ b/packages/click-prompt-button/package.json @@ -3,9 +3,14 @@ "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", "type": "module", - "module": "./dist/click-prompt-button.js", "types": "./dist/index.d.ts", "license": "MIT", + "exports": { + ".": { + "import": "./dist/click-prompt-button.js" + }, + "./style.css": "./dist/style.css" + }, "files": [ "dist" ], @@ -17,8 +22,6 @@ "@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-markdown": "^8.0.5", @@ -28,6 +31,8 @@ "svg-pan-zoom": "^3.6.1" }, "devDependencies": { + "@emotion/react": "11.10.6", + "@emotion/styled": "11.10.6", "@rollup/plugin-url": "^8.0.1", "@svgr/rollup": "^6.5.1", "@vitejs/plugin-react": "^3.1.0", @@ -38,6 +43,7 @@ "tailwindcss": "^3.3.0", "vite": "^4.2.1", "vite-plugin-dts": "^2.1.0", + "vite-plugin-style-import": "^2.0.0", "vite-tsconfig-paths": "^4.0.7" }, "peerDependencies": { diff --git a/packages/click-prompt-button/src/ClickPromptButton.tsx b/packages/click-prompt-button/src/ClickPromptButton.tsx index 3ab2a04..9e2780f 100644 --- a/packages/click-prompt-button/src/ClickPromptButton.tsx +++ b/packages/click-prompt-button/src/ClickPromptButton.tsx @@ -45,7 +45,7 @@ export function ClickPromptButton({ function NormalSize() { return ( - @@ -57,9 +57,9 @@ export function ClickPromptButton({ function SmallSize() { return ( - diff --git a/packages/click-prompt-button/src/CustomIcon.tsx b/packages/click-prompt-button/src/CustomIcon.tsx index fff7bb9..df3a248 100644 --- a/packages/click-prompt-button/src/CustomIcon.tsx +++ b/packages/click-prompt-button/src/CustomIcon.tsx @@ -3,5 +3,13 @@ import Image from "next/image"; import clickPromptSmallUrl from "@/assets/clickprompt-small.svg"; export function ClickPromptSmall({ width = 32, height = 32 }) { - return ClickPrompt Logo; + return ( + ClickPrompt Logo + ); } diff --git a/packages/click-prompt-button/src/ExecutePromptButton.tsx b/packages/click-prompt-button/src/ExecutePromptButton.tsx index 3a8704a..10d300e 100644 --- a/packages/click-prompt-button/src/ExecutePromptButton.tsx +++ b/packages/click-prompt-button/src/ExecutePromptButton.tsx @@ -88,10 +88,10 @@ export const ExecutePromptButton = ({ return ( <> - diff --git a/packages/click-prompt-button/src/LoggingDrawer.tsx b/packages/click-prompt-button/src/LoggingDrawer.tsx index 8e59cb1..0a7f770 100644 --- a/packages/click-prompt-button/src/LoggingDrawer.tsx +++ b/packages/click-prompt-button/src/LoggingDrawer.tsx @@ -21,12 +21,12 @@ export function LoggingDrawer({ llmServiceApi, }: LoggingDrawerProps) { return ( - + - + -
+
+
{/* left */} -
+
- + New chat
-
+
{conversations.map((conversation) => (
) : ( <> -
+
{conversation.name}
{/* delete button */}
{ e.stopPropagation(); if (confirm("Are you sure to delete this conversation?")) { @@ -353,7 +353,7 @@ export const ChatRoom = ({ setIsLoggedIn, initMessage, llmServiceApi }: ChatRoom } }} > - +
)} @@ -362,7 +362,7 @@ export const ChatRoom = ({ setIsLoggedIn, initMessage, llmServiceApi }: ChatRoom
{ e.stopPropagation(); if (confirm("Are you sure to delete ALL conversations?")) { @@ -370,43 +370,43 @@ export const ChatRoom = ({ setIsLoggedIn, initMessage, llmServiceApi }: ChatRoom } }} > - + Clear conversations
- + Log out
{/* right */} -
+
{chatHistory.length === 0 && ( - background image + background image )} {/* chats */} {chatHistory.map((chat, index) => { return ( -
+
{chat.role === "user" ? ( -
+
{/* chat bubble badge */} -
+
) : ( -
-
+
+
@@ -416,24 +416,24 @@ export const ChatRoom = ({ setIsLoggedIn, initMessage, llmServiceApi }: ChatRoom })} - + setMessage(ev.target.value)} onKeyDown={onEnterForSendMessage} - className="button-w-full button-pr-10 md:button-w-11/12 button-border-0 md:button-pr-0 focus:button-ring-0" + className='button-w-full button-pr-10 md:button-w-11/12 button-border-0 md:button-pr-0 focus:button-ring-0' /> {disable ? ( // check this ) : ( - + )}
diff --git a/packages/click-prompt-button/src/chatgpt/LoginPage.tsx b/packages/click-prompt-button/src/chatgpt/LoginPage.tsx index 53908f9..c140b62 100644 --- a/packages/click-prompt-button/src/chatgpt/LoginPage.tsx +++ b/packages/click-prompt-button/src/chatgpt/LoginPage.tsx @@ -27,32 +27,32 @@ export const LoginPage = ({ } return ( -
-

ChatGPT

-

You need to login first use your own key.

-
+
+

ChatGPT

+

You need to login first use your own key.

+
1. Sign up for the   - + OpenAI Platform.
2. Create a new secret key in   - + Settings → API keys.
3. Copy and paste your API key here:
-
+
setOpenAiKey(ev.target.value)} >