+
diff --git a/packages/click-prompt-button/src/Button.shared.tsx b/packages/click-prompt-button/src/SharedButton.tsx
similarity index 61%
rename from packages/click-prompt-button/src/Button.shared.tsx
rename to packages/click-prompt-button/src/SharedButton.tsx
index 9a85677f..7c6feb64 100644
--- a/packages/click-prompt-button/src/Button.shared.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 00000000..71967b83
--- /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 00000000..8d97864f
--- /dev/null
+++ b/packages/click-prompt-button/src/assets/icons/send.svg
@@ -0,0 +1 @@
+
diff --git a/packages/click-prompt-button/src/chatgpt/ChatGPTApp.tsx b/packages/click-prompt-button/src/chatgpt/ChatGPTApp.tsx
index 37d9f684..d20c0e7d 100644
--- a/packages/click-prompt-button/src/chatgpt/ChatGPTApp.tsx
+++ b/packages/click-prompt-button/src/chatgpt/ChatGPTApp.tsx
@@ -1,31 +1,15 @@
import { ChatRoom } from "@/chatgpt/ChatRoom";
import { LoginPage } from "@/chatgpt/LoginPage";
import React, { useEffect, useState } from "react";
+import type { LlmServiceApi } from "@/types/llmServiceApi";
-type ChatGPTAppProps = {
+export interface ChatGPTAppProps {
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,
- initMessage,
- updateLoginStatus,
- changeConversationNameApi,
- createConversationApi,
- getChatsByConversationIdApi,
- deleteConversationApi,
- deleteAllConversationsApi,
- sendMsgWithStreamResApi,
- logoutApi,
-}: ChatGPTAppProps) => {
+ llmServiceApi: LlmServiceApi;
+}
+export const ChatGPTApp = ({ loggedIn, initMessage, updateLoginStatus, llmServiceApi }: ChatGPTAppProps) => {
const [isLoggedIn, setIsLoggedIn] = useState(loggedIn ?? false);
useEffect(() => {
@@ -35,23 +19,8 @@ export const ChatGPTApp = ({
}, [isLoggedIn]);
return isLoggedIn ? (
-
+
) : (
- {
- 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 e0a59e08..d93a2d66 100644
--- a/packages/click-prompt-button/src/chatgpt/ChatRoom.tsx
+++ b/packages/click-prompt-button/src/chatgpt/ChatRoom.tsx
@@ -1,15 +1,16 @@
-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";
import { useDebouncedCallback } from "use-debounce";
import { Input } from "@chakra-ui/react";
import SimpleMarkdown from "@/markdown/SimpleMarkdown";
+import type { Chat, Conversation, LlmServiceApi } from "@/types/llmServiceApi";
const ChatInput = styled("input")`
background: #ffffff;
@@ -65,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;
@@ -74,33 +75,19 @@ const ChatSendButton = styled("button")`
outline: none;
`;
-export const ChatRoom = ({
- setIsLoggedIn,
- initMessage,
- changeConversationNameApi,
- createConversationApi,
- getChatsByConversationIdApi,
- deleteConversationApi,
- deleteAllConversationsApi,
- sendMsgWithStreamResApi,
- logoutApi,
-}: {
+interface ChatRoomProps {
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;
-}) => {
+ llmServiceApi: Omit;
+}
+
+export const ChatRoom = ({ setIsLoggedIn, initMessage, llmServiceApi }: 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);
@@ -114,11 +101,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);
@@ -147,7 +134,7 @@ export const ChatRoom = ({
};
async function createConversation() {
- const data = await createConversationApi();
+ const data = await llmServiceApi.createConversation();
if (!data) {
return;
}
@@ -157,9 +144,9 @@ export const ChatRoom = ({
}
async function changeConversationName(conversationId: number, name: string) {
- await changeConversationNameApi(conversationId, name);
+ await changeConversationName(conversationId, name);
- setConversations((c: any[]) =>
+ setConversations((c) =>
c.map((conversation) => {
if (conversation.id === conversationId) {
return {
@@ -168,7 +155,7 @@ export const ChatRoom = ({
};
}
return conversation;
- })
+ }),
);
}
@@ -179,7 +166,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;
}
@@ -193,7 +180,7 @@ export const ChatRoom = ({
try {
setCurrentConversation(conversationId);
- const data = await getChatsByConversationIdApi(conversationId);
+ const data = await llmServiceApi.getChatsByConversationId(conversationId);
if (!data) {
return;
}
@@ -204,19 +191,19 @@ export const ChatRoom = ({
setDisable(false);
}
},
- 200
+ 200,
);
async function deleteConversation(conversationId: number) {
- const data = await deleteConversationApi(conversationId);
+ const data = await llmServiceApi.deleteConversation(conversationId);
if (!data) {
return;
}
- setConversations(conversations.filter((conversation: any) => conversation.id !== conversationId));
+ setConversations(conversations.filter((conversation) => conversation.id !== conversationId));
}
async function deleteAllConversations() {
- const data = await deleteAllConversationsApi();
+ const data = await llmServiceApi.deleteAllConversations();
if (!data) {
return;
}
@@ -246,11 +233,11 @@ export const ChatRoom = ({
// TODO(CGQAQ): custom name of user
// name: "User",
},
- ] as any;
+ ] as Chat[];
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)]);
@@ -300,28 +287,30 @@ export const ChatRoom = ({
}
async function logout() {
- await logoutApi();
+ await logout();
setIsLoggedIn(false);
}
return (
-
+
{/* left */}
-
+
-
+
New chat
-
- {conversations.map((conversation: any) => (
+
+ {conversations.map((conversation) => (
{
handleConversation(conversation.id!, event);
}}
@@ -351,12 +340,12 @@ export const ChatRoom = ({
/>
) : (
<>
-
+
{conversation.name}
{/* delete button */}
{
e.stopPropagation();
if (confirm("Are you sure to delete this conversation?")) {
@@ -364,7 +353,7 @@ export const ChatRoom = ({
}
}}
>
-
+
)}
@@ -373,7 +362,7 @@ export const ChatRoom = ({
{
e.stopPropagation();
if (confirm("Are you sure to delete ALL conversations?")) {
@@ -381,41 +370,43 @@ export const ChatRoom = ({
}
}}
>
-
+
Clear conversations
-
+
Log out
{/* right */}
-
- {chatHistory.length === 0 &&
}
+
+ {chatHistory.length === 0 && (
+
+ )}
{/* chats */}
- {chatHistory.map((chat: any, index: number) => {
+ {chatHistory.map((chat, index) => {
return (
-
+
{chat.role === "user" ? (
-
+
{/* chat bubble badge */}
-
) : (
-
-
+
@@ -425,19 +416,24 @@ export const ChatRoom = ({
})}
-
+
setMessage(ev.target.value)}
onKeyDown={onEnterForSendMessage}
- className="w-full pr-10 md:w-11/12 border-0 md:pr-0 focus: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 1953e11a..c140b621 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 { 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("");
@@ -26,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.
+
3. Copy and paste your API key here:
-
+
setOpenAiKey(ev.target.value)}
>