edit btn added and display component updated

frontend-ai-chat-bot/src/App.jsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from 'react';
 import Button from "./components/Button";
 import Display from "./components/Display";
 import Answer from "./components/Answer";
@@ -7,13 +7,16 @@ import Greetings from "./components/Greetings";
 import { Stack, Box, AppBar, CircularProgress } from "@mui/material";
 
 const App = (props) => {
+  // State variables
   const [userInput, setUserInput] = useState("");
-  const [search, setSearch] = useState(props.suggestions);
+  const [suggestedResponses, setSuggestedResponses] = useState(props.suggestions);
   const [response, setResponse] = useState([]);
   const [history, setHistory] = useState([]);
   const [showSuggested, setShowSuggested] = useState(true);
   const [waiting, setWaiting] = useState(false);
+  const [editingId, setEditingId] = useState(null); // State to track editing ID
 
+  // Array of various bot responses
   const variousBotResponses = [
     "I dont understand",
     'Let"s talk about that ',
@@ -24,12 +27,12 @@ const App = (props) => {
     "I got you in my next iteration",
   ];
 
+  // Handle user input change
   const handleUserInput = (event) => {
     setUserInput(event.target.value);
   };
 
-  // On a form submit, we select a random response from the variousBotResponses array
-  // Use a newResponse object with the user's input and a randomly selected bot reply, update the response state array with this new response, and clear the userInput state.
+  // Handle form submission
   const handleFormSubmit = (event) => {
     event.preventDefault();
     if (userInput < 1) {
@@ -53,34 +56,44 @@ const App = (props) => {
     }, 3000);
   };
 
-  // Handling responses for suggested questions button that are on site at page load
+  // Toggle suggested responses
   const getAutomatedBotResponse = (showSuggested) => {
     setShowSuggested(showSuggested);
   };
 
-  //  Handling the static response from BOT will change when we plug in api
+  // Handle automated bot response
   const automatedResponseHandler = (event) => {
     getAutomatedBotResponse();
-    // map through all of the props.suggestions and which response matched  the current id (event.target.id) return the object that does and insert into response object
-    const sqs = props.suggestions;
-    const currentSuggestions = sqs.map((suggested) => {
-      if (suggested.userId === event.target.id) {
-        return setResponse(response.concat(suggested));
-      }
-    });
+    const matchedSuggestion = suggestedResponses.find(
+      (suggested) => suggested.userId === event.target.id
+    );
+    if (matchedSuggestion) {
+      setResponse([...response, matchedSuggestion]);
+    }
     setShowSuggested(false);
   };
 
+  // Handle editing an entry
+  const handleEdit = (id, newText) => {
+    const updatedResponse = response.map((entry) =>
+      entry.id === id ? { ...entry, question: newText } : entry
+    );
+    setResponse(updatedResponse);
+    setEditingId(null); // Reset editing ID
+  };
+
+  // Handle new search
   const handleNewSearch = () => {
     setHistory(history.concat(response));
     setShowSuggested(true);
     setUserInput("");
-    setSearch([]);
+    setSuggestedResponses([]);
     setResponse([]);
   };
 
   return (
     <>
+      {/* Header */}
       <AppBar
         sx={{
           backgroundColor: "#242424",
@@ -99,6 +112,7 @@ const App = (props) => {
         spacing={2}
         sx={{ display: "flex", "align-items": "center" }}
       >
+        {/* Main content */}
         <div></div>
         <Box
           sx={{
@@ -116,32 +130,39 @@ const App = (props) => {
             <CircularProgress sx={{ color: "LightGray", margin: "0 1rem" }} />
           ) : (
             <ul className="outer-ul">
+              {/* Map through response array to render Display and Answer components */}
               {response.map((input) => (
-                <>
-                  <Display key={input.id} response={input.question} />
+                <React.Fragment key={input.id}>
+                  <Display
+                    key={`display-${input.id}`}
+                    response={input.question}
+                    id={input.id}
+                    onEdit={handleEdit}
+                    isEditing={editingId === input.id}
+                  />
                   <Answer
-                    key={input.userId}
+                    key={`answer-${input.id}`}
                     response={input.botReply}
                     variousBotResponses={variousBotResponses}
                     setResponse={setResponse}
                   />
-                </>
+                </React.Fragment>
               ))}
             </ul>
           )}
         </Box>
+        {/* Suggested buttons and form */}
         <div className="search-container">
           <div className="btn-container">
             {showSuggested &&
-              props.suggestions.map((suggested) => (
-                <>
-                  <Button
-                    text={suggested.question}
-                    id={suggested.userId}
-                    onClick={automatedResponseHandler}
-                    type="text"
-                  />
-                </>
+              suggestedResponses.map((suggested) => (
+                <Button
+                  key={suggested.userId}
+                  text={suggested.question}
+                  id={suggested.userId}
+                  onClick={automatedResponseHandler}
+                  type="text"
+                />
               ))}
           </div>
 
@@ -162,4 +183,4 @@ const App = (props) => {
   );
 };
 
-export default App;
+export default App;

frontend-ai-chat-bot/src/components/Display.jsx

@@ -1,16 +1,42 @@
-import { FaRegUser } from "react-icons/fa";
-import { Stack } from "@mui/material";
+import React, { useState } from 'react';
+import { FaRegUser, FaEdit, FaSave } from 'react-icons/fa';
+import { Stack } from '@mui/material';
+
+const Display = ({ response, id, onEdit }) => {
+  const [editText, setEditText] = useState(response);
+  const [isEditing, setIsEditing] = useState(false); // State to track if editing mode is active
+
+  // Handle editing mode
+  const handleEdit = () => {
+    onEdit(id, editText); // Call the onEdit function with the id and edited text
+    setIsEditing(false); // Exit editing mode after saving
+  };
 
-const Display = ({ response }) => {
   return (
     <div>
       <li>
         <Stack direction="row" spacing={2}>
           <FaRegUser />
-          <span>{response}</span>
+          {isEditing ? (
+            // Render textarea and save button in editing mode
+            <>
+              <textarea
+                value={editText}
+                onChange={(e) => setEditText(e.target.value)}
+              />
+              <FaSave onClick={handleEdit} />
+            </>
+          ) : (
+            // Render span and edit button in view mode
+            <>
+              <span>{response}</span>
+              <FaEdit onClick={() => setIsEditing(true)} />
+            </>
+          )}
         </Stack>
       </li>
     </div>
   );
 };
-export default Display;
+
+export default Display;