multiple messages UI

frontend/src/AI.js

@@ -1,14 +1,14 @@
 import ReactMarkdown from "react-markdown";
-import {bookSetState, bookState, currentPage, currentStep} from "./book/store";
+import {bookState, currentPage, currentStep, receiveAiMessage, sendAiMessage} from "./book/store";
 import {requirementText} from "./Requirements";
 import terms from "./terms.json";
 import React from "react";
 import {useInput} from "./frontendlib/HookInput";
 import LoadingIndicator from "./components/LoadingIndicator";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faPaperPlane, faRobot} from "@fortawesome/free-solid-svg-icons";
+import {faPaperPlane} from "@fortawesome/free-solid-svg-icons";
 
-export function AI({ response, running }) {
+export function AI({ messages, running }) {
   const userMessage = useInput("", {
     placeholder: "Enter message...",  // TODO terms
     type: 'text',
@@ -17,59 +17,71 @@ export function AI({ response, running }) {
       width: "100%",
     },
   });
-  return <form onSubmit={async (e) => {
-    e.preventDefault();
-    const page = currentPage();
-    const step = currentStep();
-    const requirements = step.requirements.map((requirement) =>
-      requirementText(
-        { ...requirement, ...(requirement.unparsed || {}) },
-        terms.unparsed,
-      ));
-    const { editorContent, assistant } = bookState;
-    const data = {
-      page,
-      stepName: step.name,
-      requirements,
-      editorContent,
-      assistant,
-      terms: terms.unparsed,
-      userMessage: userMessage.value,
-    };
-    bookSetState("assistant.ai.running", true)
-    const res = await fetch(
-      "http://127.0.0.1:5001/futurecoder-io/us-central1/chat",
-      {
-        method: "POST",
-        body: JSON.stringify(data),
-        headers: {
-          "Content-Type": "application/json",
-        },
-      }
-    );
-    bookSetState("assistant.ai.running", false)
-    bookSetState("assistant.ai.response", await res.text());
-    userMessage.setHookValue("");
-  }}>
-    <div>
-      {userMessage.input}
-    </div>
-    <br/>
-    <button
-      type="submit"
-      className="btn btn-primary"
-      disabled={running}
-    >
-      {running ?
-        <LoadingIndicator/> :
-        <>
-          <FontAwesomeIcon icon={faPaperPlane}/> Send {/* TODO terms */}
-        </>
-      }
-    </button>
-    <br/>
-    <ReactMarkdown>
-      {response}
-    </ReactMarkdown>
-  </form>;
+  return <div>
+    {messages.map((message, index) =>
+      <div key={index}>
+        {message.role === "user" ?
+          <>
+            <strong>You:</strong> {message.content}
+          </>
+          :
+          <ReactMarkdown>
+            {"**Bot:** " + message.content}
+          </ReactMarkdown>
+        }
+        <hr/>
+      </div>
+    )}
+    <form onSubmit={async (e) => {
+      e.preventDefault();
+      const page = currentPage();
+      const step = currentStep();
+      const requirements = step.requirements.map((requirement) =>
+        requirementText(
+          { ...requirement, ...(requirement.unparsed || {}) },
+          terms.unparsed,
+        ));
+      const { editorContent, assistant } = bookState;
+      const data = {
+        page,
+        stepName: step.name,
+        requirements,
+        editorContent,
+        assistant,
+        terms: terms.unparsed,
+        userMessage: userMessage.value,
+      };
+      sendAiMessage(userMessage.value);
+      userMessage.setHookValue("");
+      const res = await fetch(
+        "http://127.0.0.1:5001/futurecoder-io/us-central1/chat",
+        {
+          method: "POST",
+          body: JSON.stringify(data),
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+      const response = await res.text();
+      receiveAiMessage(response);
+    }}>
+      <div>
+        {userMessage.input}
+      </div>
+      <br/>
+      <button
+        type="submit"
+        className="btn btn-primary"
+        disabled={running}
+      >
+        {running ?
+          <LoadingIndicator/> :
+          <>
+            <FontAwesomeIcon icon={faPaperPlane}/> Send {/* TODO terms */}
+          </>
+        }
+      </button>
+    </form>
+  </div>;
 }

frontend/src/book/store.js

@@ -91,7 +91,8 @@ const initialState = {
     requestingSolution: 0,
     lastSeenMessageSections: [],
     ai: {
-      response: "",
+      messages: [],
+      running: false,
     }
   },
   prediction: {
@@ -533,3 +534,21 @@ export function postCodeEntry(codeEntry) {
     databaseRequest("POST", codeEntry, "code_entries").catch(e => console.error(e));
   }
 }
+
+export const sendAiMessage = makeAction(
+  'SEND_AI_MESSAGE',
+  (state, {value}) => {
+    state = ipush(state, "assistant.ai.messages", { role: "user", content: value });
+    state = iset(state, "assistant.ai.running", true);
+    return state;
+  }
+);
+
+export const receiveAiMessage = makeAction(
+  'RECEIVE_AI_MESSAGE',
+  (state, {value}) => {
+    state = ipush(state, "assistant.ai.messages", { role: "assistant", content: value });
+    state = iset(state, "assistant.ai.running", false);
+    return state;
+  }
+);