8 clear chat (#11)

* New service for chatting

* Can clear the chat

frontend/src/components/ChatBox.css

@@ -4,6 +4,12 @@
   flex-grow: 1;
 }
 
+#chat-box-footer {
+  align-items: center;
+  display: flex;
+  padding: 0 32px;
+}
+
 #chat-box-input {
   align-self: flex-end;
   display: flex;
@@ -13,11 +19,31 @@
 }
 
 #chat-box-input input {
-  width: 85%;
+  width: 100%;
   height: 40px;
   border: 1px solid #ccc;
   border-radius: 5px;
   padding: 0 12px;
   font-size: 16px;
   box-sizing: border-box;
 }
+
+#chat-box-button {
+  padding-left: 20px;
+}
+
+#chat-box-button button {
+  width: 100%;
+  height: 40px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 0 12px;
+  font-size: 16px;
+  box-sizing: border-box;
+  color: #666;
+}
+
+#chat-box-button button:hover {
+  background-color: #ccc;
+  color: #fff;
+}

frontend/src/components/ChatBox.jsx

@@ -2,49 +2,54 @@ import React, { useState } from "react";
 
 import "./ChatBox.css";
 import ChatBoxFeed from "./ChatBoxFeed";
+import { clearOpenAiChat, openAiSendMessage } from "../service/openai";
 
 function ChatBox() {
   const [messages, setMessages] = useState([]);
 
-  const onKeyUpValue = (event) => {
+  const clearClicked = () => {
+    // clear local messages
+    setMessages([]);
+    // clear remote messages
+    clearOpenAiChat();
+  };
+
+  const onKeyUpValue = async (event) => {
     if (event.key === "Enter") {
       // get the message
       const message = event.target.value;
       // add it to the list of messages
-      setMessages((messages) => [...messages, { message, isUser: true }]);
+      setMessages((messages) => [
+        ...messages,
+        { message: message, isUser: true },
+      ]);
       // clear the input
       event.target.value = "";
 
-      // send the message to the backend
-      fetch("http://localhost:3001/openai/chat", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ message }),
-      }).then((response) => {
-        // get the response message
-        response.text().then((data) => {
-          // add it to the list of messages
-          setMessages((messages) => [
-            ...messages,
-            { message: data, isUser: false },
-          ]);
-        });
-      });
+      const reply = await openAiSendMessage(message);
+      // add it to the list of messages
+      setMessages((messages) => [
+        ...messages,
+        { message: reply, isUser: false },
+      ]);
     }
   };
 
   return (
     <div id="chat-box">
       <ChatBoxFeed messages={messages} />
-      <div id="chat-box-input">
-        <input
-          type="text"
-          placeholder="Chat to ChatGPT..."
-          autoFocus
-          onKeyUp={onKeyUpValue.bind(this)}
-        />
+      <div id="chat-box-footer">
+        <div id="chat-box-input">
+          <input
+            type="text"
+            placeholder="Chat to ChatGPT..."
+            autoFocus
+            onKeyUp={onKeyUpValue.bind(this)}
+          />
+        </div>
+        <div id="chat-box-button" onClick={clearClicked.bind(this)}>
+          <button>clear</button>
+        </div>
       </div>
     </div>
   );

frontend/src/service/openai.js

@@ -0,0 +1,22 @@
+const URL = "http://localhost:3001/openai/";
+
+async function clearOpenAiChat() {
+  const response = await fetch(URL + "clear", {
+    method: "POST",
+  });
+  return response.status === 200;
+}
+
+async function openAiSendMessage(message) {
+  const response = await fetch(URL + "chat", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ message }),
+  });
+  const data = await response.text();
+  return data;
+}
+
+export { clearOpenAiChat, openAiSendMessage };