refactor: extract shared api params

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

Author: teobler

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<any>;
-  changeConversationNameApi: (conversation_id: number, name: string) => Promise<any>;
-  createConversationApi: (name?: string) => Promise<any>;
-  getChatsByConversationIdApi: (conversationId: number) => Promise<any>;
-  deleteConversationApi: (conversationId: number) => Promise<any>;
-  deleteAllConversationsApi: () => Promise<any>;
-  sendMsgWithStreamResApi: (conversageId: number, message: string, name?: string) => Promise<any>;
-  logoutApi: () => Promise<any>;
 }
 
 export function ClickPromptButton({

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<any>;
-  sendMessage: (conversageId: number, message: string, name?: string) => Promise<any>;
-  isLoggedInApi: () => Promise<any>;
-  changeConversationNameApi: (conversation_id: number, name: string) => Promise<any>;
-  createConversationApi: (name?: string) => Promise<any>;
-  getChatsByConversationIdApi: (conversationId: number) => Promise<any>;
-  deleteConversationApi: (conversationId: number) => Promise<any>;
-  deleteAllConversationsApi: () => Promise<any>;
-  sendMsgWithStreamResApi: (conversageId: number, message: string, name?: string) => Promise<any>;
-  logoutApi: () => Promise<any>;
-};
+}
 
 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,
         })}
     </>
   );

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<SharedApi, "isLoggedInApi"> {
   isOpen: boolean;
   handleClose: () => void;
   isLoggedIn: boolean;
   updateStatus?: (loggedIn: boolean) => void;
   initMessage: string;
-  changeConversationNameApi: (conversation_id: number, name: string) => Promise<any>;
-  createConversationApi: (name?: string) => Promise<any>;
-  getChatsByConversationIdApi: (conversationId: number) => Promise<any>;
-  deleteConversationApi: (conversationId: number) => Promise<any>;
-  deleteAllConversationsApi: () => Promise<any>;
-  sendMsgWithStreamResApi: (conversageId: number, message: string, name?: string) => Promise<any>;
-  logoutApi: () => Promise<any>;
 }
 
 export function LoggingDrawer({

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<SharedApi, "isLoggedInApi"> {
   loggedIn?: boolean;
   updateLoginStatus?: (loggedIn: boolean) => void;
   initMessage?: string;
-  changeConversationNameApi: (conversation_id: number, name: string) => Promise<any>;
-  createConversationApi: (name?: string) => Promise<any>;
-  getChatsByConversationIdApi: (conversationId: number) => Promise<any>;
-  deleteConversationApi: (conversationId: number) => Promise<any>;
-  deleteAllConversationsApi: () => Promise<any>;
-  sendMsgWithStreamResApi: (conversageId: number, message: string, name?: string) => Promise<any>;
-  logoutApi: () => Promise<any>;
 };
 export const ChatGPTApp = ({
   loggedIn,

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<SharedApi, "isLoggedInApi"> {
+  setIsLoggedIn: Dispatch<SetStateAction<boolean>>;
+  initMessage?: string;
+}
+
 export const ChatRoom = ({
   setIsLoggedIn,
   initMessage,
@@ -84,17 +90,7 @@ export const ChatRoom = ({
   deleteAllConversationsApi,
   sendMsgWithStreamResApi,
   logoutApi,
-}: {
-  setIsLoggedIn: Dispatch<SetStateAction<boolean>>;
-  initMessage?: string;
-  changeConversationNameApi: (conversation_id: number, name: string) => Promise<any>;
-  createConversationApi: (name?: string) => Promise<any>;
-  getChatsByConversationIdApi: (conversationId: number) => Promise<any>;
-  deleteConversationApi: (conversationId: number) => Promise<any>;
-  deleteAllConversationsApi: () => Promise<any>;
-  sendMsgWithStreamResApi: (conversageId: number, message: string, name?: string) => Promise<any>;
-  logoutApi: () => Promise<any>;
-}) => {
+}: ChatRoomProps) => {
   const chatsWrapper = React.useRef<HTMLDivElement>(null);
   const [disable, setDisable] = React.useState(false);
   const [chatHistory, setChatHistory] = React.useState<any>([]);

packages/click-prompt-button/src/types/shared.ts

@@ -0,0 +1,10 @@
+export interface SharedApi {
+  isLoggedInApi: () => Promise<any>;
+  changeConversationNameApi: (conversation_id: number, name: string) => Promise<any>;
+  createConversationApi: (name?: string) => Promise<any>;
+  getChatsByConversationIdApi: (conversationId: number) => Promise<any>;
+  deleteConversationApi: (conversationId: number) => Promise<any>;
+  deleteAllConversationsApi: () => Promise<any>;
+  sendMsgWithStreamResApi: (conversageId: number, message: string, name?: string) => Promise<any>;
+  logoutApi: () => Promise<any>;
+}