Merge pull request #31 from DevoteamNL/feature/stream-ai-response

Feature/stream ai response
DevoteamNL · May 14, 2024 · 3ba06b2 · 3ba06b2
2 parents 1d94438 + b7cf2cd
commit 3ba06b2
Show file tree

Hide file tree

Showing 2 changed files with 403 additions and 109 deletions.
diff --git a/src/components/ChatWindow/ChatWindow.tsx b/src/components/ChatWindow/ChatWindow.tsx
@@ -17,7 +17,7 @@ import {
 import React, { useEffect, useRef, useState } from "react";
 import { useAuthContext } from "../../context/AuthContext";
 import { useSettings } from "../../context/SettingsContext";
-import { Thread, useThreadContext } from "../../context/ThreadContext";
+import { Role, Thread, useThreadContext } from "../../context/ThreadContext";
 import PluginSelector from "../PluginSelector/PluginSelector";
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 // Define the MainContentProps interface for the component's props
@@ -127,7 +127,7 @@ const MainContent: React.FC<MainContentProps> = () => {
   // Effect for auto-scrolling to the latest message
   useEffect(() => {
     chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages, addingFeedback]);
+  }, [messages, addingFeedback, threads]);
 
   const sendFeedback = (feedbackRating: FeedbackRating) => {
     if (checkExpired()) return;
@@ -184,15 +184,15 @@ const MainContent: React.FC<MainContentProps> = () => {
         display: "flex",
         flexDirection: "column",
         height: "100vh",
+        width: "100%",
+        paddingTop: "80px"
       }}
     >
-      <br />
-      <br />
       <PluginSelector
         plugin={selectedThread?.plugin || plugin}
         onPluginChange={setPlugin}
         disabled={selectedThread?.messages.some(
-          (message) => message.data.role === "user",
+          (message) => message.data.role === Role.USER,
         )}
       ></PluginSelector>
       {messages?.length === 0 ? (
@@ -318,14 +318,15 @@ const MainContent: React.FC<MainContentProps> = () => {
       ) : (
         <Box sx={{ flexGrow: 1, overflowY: "auto" }}>
           <List>
-            {messages?.map((msg) => (
-              <Message
-                key={msg.id}
-                sender={msg.data.role === "user"}
-                message={msg.data.content}
-                caption={new Date().toLocaleTimeString() /** Mock sent date */}
-              ></Message>
-            ))}
+            {messages?.filter(msg => msg.data.content.length !== 0)
+              .map((msg) => (
+                <Message
+                  key={msg.id}
+                  sender={msg.data.role === Role.USER}
+                  message={msg.data.content}
+                  caption={msg.createdAt as string}
+                ></Message>
+              ))}
 
             {selectedThread?.replying ? (
               <Message sender={false} caption="thinking..."></Message>
@@ -334,13 +335,12 @@ const MainContent: React.FC<MainContentProps> = () => {
                 <Message
                   sender={false}
                   caption=""
-                  message={`Can you share a bit more info on what you ${
-                    {
-                      [FeedbackRating.NEUTRAL]: "think of",
-                      [FeedbackRating.BAD]: "dislike about",
-                      [FeedbackRating.GOOD]: "like about",
-                    }[addingFeedback]
-                  } the previous response or your general experience with the app?`}
+                  message={`Can you share a bit more info on what you ${{
+                    [FeedbackRating.NEUTRAL]: "think of",
+                    [FeedbackRating.BAD]: "dislike about",
+                    [FeedbackRating.GOOD]: "like about",
+                  }[addingFeedback]
+                    } the previous response or your general experience with the app?`}
                 ></Message>
                 <Stack
                   direction="row"