refactor: rename api params and extract them into a map

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

Author: teobler

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<Response>;
+  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,
       })}
     </Box>
   );

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<Uint8Array> | null) => void;
   conversationId?: number;
   updateConversationId?: (conversationId: number) => void;
-  loginApi: () => Promise<Response>;
+  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,
         })}
     </>
   );

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<SharedApi, "isLoggedInApi"> {
+interface LoggingDrawerProps {
   isOpen: boolean;
   handleClose: () => void;
   isLoggedIn: boolean;
   updateStatus?: (loggedIn: boolean) => void;
   initMessage: string;
-  loginApi: () => Promise<Response>;
+  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 (
     <Drawer isOpen={isOpen} placement="right" onClose={handleClose} size={"2xl"}>
@@ -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}
             />
           </div>
         </DrawerBody>

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<SharedApi, "isLoggedInApi"> {
+interface ChatGPTAppProps {
   loggedIn?: boolean;
   updateLoginStatus?: (loggedIn: boolean) => void;
   initMessage?: string;
-  loginApi: () => Promise<Response>;
+  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 ? (
-    <ChatRoom
-      setIsLoggedIn={setIsLoggedIn}
-      initMessage={initMessage}
-      changeConversationNameApi={changeConversationNameApi}
-      createConversationApi={createConversationApi}
-      getChatsByConversationIdApi={getChatsByConversationIdApi}
-      deleteConversationApi={deleteConversationApi}
-      deleteAllConversationsApi={deleteAllConversationsApi}
-      sendMsgWithStreamResApi={sendMsgWithStreamResApi}
-      logoutApi={logoutApi}
-    />
+    <ChatRoom setIsLoggedIn={setIsLoggedIn} initMessage={initMessage} llmServiceApi={llmServiceApi} />
   ) : (
-    <LoginPage setIsLoggedIn={setIsLoggedIn} loginApi={loginApi} />
+    <LoginPage setIsLoggedIn={setIsLoggedIn} login={llmServiceApi.login} />
   );
 };

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<SharedApi, "isLoggedInApi"> {
+interface ChatRoomProps {
   setIsLoggedIn: Dispatch<SetStateAction<boolean>>;
   initMessage?: string;
+  llmServiceApi: Omit<LlmServiceApi, "isLoggedIn">;
 }
 
-export const ChatRoom = ({
-  setIsLoggedIn,
-  initMessage,
-  changeConversationNameApi,
-  createConversationApi,
-  getChatsByConversationIdApi,
-  deleteConversationApi,
-  deleteAllConversationsApi,
-  sendMsgWithStreamResApi,
-  logoutApi,
-}: ChatRoomProps) => {
+export const ChatRoom = ({ setIsLoggedIn, initMessage, llmServiceApi }: ChatRoomProps) => {
   const chatsWrapper = React.useRef<HTMLDivElement>(null);
   const [disable, setDisable] = React.useState(false);
   const [chatHistory, setChatHistory] = React.useState<Chat[]>([]);
@@ -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,15 +195,15 @@ export const ChatRoom = ({
   );
 
   async function deleteConversation(conversationId: number) {
-    const data = await deleteConversationApi(conversationId);
+    const data = await llmServiceApi.deleteConversation(conversationId);
     if (!data) {
       return;
     }
     setConversations(conversations.filter((conversation) => conversation.id !== conversationId));
   }
 
   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);
   }
 

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<SetStateAction<boolean>>;
-  loginApi: (key: string) => Promise<Response>;
+  login: LlmServiceApi["login"];
 }) => {
   const [openAiKey, setOpenAiKey] = React.useState("");