build chatbot post api

api/app/controllers/posts_controller.rb

@@ -10,6 +10,12 @@ def index
     def create
         user = @current_user
         competition = Competition.find(params[:competition_id])
+        if params[:post_type] == "bot"
+            user = competition.users.where(user_type: "bot")[0]
+        else
+            user = @current_user
+        end
+
         post = Post.create!(user_id: user.id, competition_id: competition.id, description: params[:description])
         render json: post, status: :created
     end

client/src/components/Main.css

@@ -30,7 +30,7 @@
 }
 
 .banner--fadeBottom {
-  height: 62vh;
+  height: 66.15vh;
   background-image: linear-gradient(180deg,
       transparent,
       rgba(37, 37, 37, 0.61),

client/src/components/NotificationPopup.css

@@ -0,0 +1,28 @@
+.popup {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    user-select: none;
+}
+
+.popup .notification__content {
+    visibility: hidden;
+    width: 15em;
+    background-color: #b2b2b2;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 8px 0;
+    position: absolute;
+    left: 32em;
+    bottom: -3em;
+    z-index: 1;
+    margin-left: -80px;
+}
+
+/* Toggle this class - hide and show the popup */
+.popup .show {
+    visibility: visible;
+    -webkit-animation: fadeIn 1s;
+    animation: fadeIn 1s;
+}

client/src/components/NotificationPopup.jsx

@@ -0,0 +1,16 @@
+
+
+import "./NotificationPopup.css"
+
+const NotificationPopup = () => {
+    return (
+        <div className="popup">
+            <div id="notification-popup" className="notification__content">
+                <p>Notifications</p>
+
+            </div>
+        </div>
+    );
+};
+
+export default NotificationPopup;

client/src/pages/tournaments/Posts.jsx

@@ -1,29 +1,40 @@
 import PostCard from "./PostCard";
+import LoadingSpinner from "../auth/LoadingSpinner";
 import CreateIcon from '@mui/icons-material/Create';
 import InputOption from '../account/InputOption';
-import ImageIcon from '@mui/icons-material/Image';
-import SubscriptionsIcon from '@mui/icons-material/Subscriptions';
-import EventNoteIcon from '@mui/icons-material/EventNote';
+// import ImageIcon from '@mui/icons-material/Image';
+// import SubscriptionsIcon from '@mui/icons-material/Subscriptions';
+// import EventNoteIcon from '@mui/icons-material/EventNote';
 import InsertCommentIcon from '@mui/icons-material/InsertComment';
 import { useForm } from "react-hook-form";
 import * as yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useDispatch, useSelector } from "react-redux";
 import { setPosts } from "../../store/game/feedSlice";
 import { selectCurrentUser } from "../../store/auth/userSlice";
-
 import { useAddPostMutation } from "../../store/game/feedApiSlice";
 import { useGetPostsQuery } from "../../store/game/feedApiSlice";
+import { usePostChatBotCommentMutation } from "../../store/openai/chatbotApiSlice";
 
 function Posts({ posts, comp }) {
   const { refetch } = useGetPostsQuery(comp.id);
   const renderedPosts = posts?.map((post) => {
     return <PostCard key={post.id} post={post} />;
   });
 
+  const workoutContextArray = posts?.filter(post => {
+    return post.description.includes("just posted a workout");
+  }).map(post => {
+    return {
+      "role": "user",
+      "content": `On ${post.created_at.slice(0, 10)}, ${post.description.replace("just ", "")}`
+    }
+  });
+
   const dispatch = useDispatch();
   const user = useSelector(selectCurrentUser);
   const [addPost, { isLoading }] = useAddPostMutation();
+  const [getChatBotComment, { isLoading: isChatBotLoading }] = usePostChatBotCommentMutation();
 
   const schema = yup.object().shape({
     description: yup.string().required(),
@@ -42,11 +53,25 @@ function Posts({ posts, comp }) {
     const newPost = await addPost({
       description: data.description,
       competition_id: comp.id,
+      post_type: data.post_type || null,
     }).unwrap();
     dispatch(setPosts([...posts, newPost]));
     setValue("description", "");
   };
 
+  const handleChatBotClick = async (e) => {
+    try {
+      let request = await getChatBotComment(workoutContextArray);
+      const data = {
+        description: request.data.gpt_response,
+        post_type: "bot"
+      };
+      onSubmit(data);
+    } catch (error) {
+      console.error(error);
+    };
+  };
+
   return (
     <div className="posts">
       <div className="feed__inputContainer">
@@ -72,7 +97,12 @@ function Posts({ posts, comp }) {
               />
             </button>
           </form>
+          <button
+            onClick={handleChatBotClick}
+          >ChatBot
+          </button>
         </div>
+        {isChatBotLoading && <LoadingSpinner />}
         {/* <div className="feed__inputOptions">
           <InputOption Icon={ImageIcon} title="Photo" color="#70B5F9" />
           <InputOption Icon={SubscriptionsIcon} title="Video" color="#E7A33E" />

client/src/store/openai/chatbotApiSlice.js

@@ -0,0 +1,15 @@
+import { apiSlice } from "../../app/api/apiSlice";
+
+export const chatbotApiSlice = apiSlice.injectEndpoints({
+    endpoints: (builder) => ({
+        postChatBotComment: builder.mutation({
+            query: (workoutHistory) => ({
+                url: "http://localhost:8000/fitbot/botcomment/",
+                method: "POST",
+                body: { "prompts": workoutHistory }
+            }),
+        }),
+    }),
+});
+
+export const { usePostChatBotCommentMutation } = chatbotApiSlice;