Assistant/chatbot UI

src/components/Feedback/Feedback.jsx

@@ -19,9 +19,72 @@ import QuestionAnswerOutlinedIcon from "@mui/icons-material/QuestionAnswerOutlin
 
 import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
 
+const API_URL = process.env.REACT_APP_MY_WEB_HOOK_URL;
+
+const getFeedbackMessage = (email, message, messageType, archiveURL = null) => {
+  if (typeof message !== "string" || typeof messageType !== "string")
+    throw new Error("Invalid message type");
+
+  return {
+    blocks: [
+      {
+        type: "header",
+        text: {
+          type: "plain_text",
+          text: "" + messageType + "",
+        },
+      },
+      ...(email
+        ? [
+            {
+              type: "section",
+              text: {
+                type: "mrkdwn",
+                text: "<mailto:" + email + ">",
+              },
+            },
+          ]
+        : []),
+      {
+        type: "section",
+        text: {
+          type: "mrkdwn",
+          text: "" + message + "",
+        },
+        ...(archiveURL // Conditionally add the accessory
+          ? {
+              accessory: {
+                type: "image",
+                image_url: archiveURL.trim(),
+                alt_text: "Problematic image",
+              },
+            }
+          : {}), // Important: Return an empty object if archiveURL is not defined
+      },
+    ],
+  };
+};
+
+const sendToSlack = async (email, message, messageType, archiveURL = null) => {
+  const feedbackMessage = getFeedbackMessage(
+    email,
+    message,
+    messageType,
+    archiveURL,
+  );
+  const response = await fetch(API_URL, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(feedbackMessage),
+  });
+
+  if (!response.ok) throw response;
+
+  return response;
+};
+
 const Feedback = () => {
   const keyword = i18nLoadNamespace("components/FeedBack");
-  const API_URL = process.env.REACT_APP_MY_WEB_HOOK_URL;
 
   const [isButtonHovered, setIsButtonHovered] = useState(false);
   const [displayCard, setDisplayCard] = useState(false);
@@ -42,56 +105,6 @@ const Feedback = () => {
 
   const containerRef = React.useRef(null);
 
-  const getFeedbackMessage = (message, messageType) => {
-    if (typeof message !== "string" || typeof messageType !== "string")
-      throw new Error("Invalid message type");
-
-    return {
-      blocks: [
-        {
-          type: "header",
-          text: {
-            type: "plain_text",
-            text: "" + messageType + "",
-          },
-        },
-        ...(email
-          ? [
-              {
-                type: "section",
-                text: {
-                  type: "mrkdwn",
-                  text: "<mailto:" + email + ">",
-                },
-              },
-            ]
-          : []),
-        {
-          type: "section",
-          text: {
-            type: "mrkdwn",
-            text: "" + message + "",
-          },
-        },
-      ],
-    };
-  };
-
-  const sendToSlack = async (message, messageType) => {
-    const feedbackMessage = getFeedbackMessage(message, messageType);
-    //console.log(feedbackMessage);
-    //console.log(JSON.stringify(feedbackMessage));
-    const response = await fetch(API_URL, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(feedbackMessage),
-    });
-
-    if (!response.ok) throw response;
-
-    return response;
-  };
-
   const validateEmail = (email) => {
     if (!email) return true; //allow to proceed if the email is empty
     const re = /\S+@\S+\.\S+/; //match [email protected]
@@ -113,7 +126,7 @@ const Feedback = () => {
 
     setIsFeedbackSending(true);
 
-    await sendToSlack(message, messageType);
+    await sendToSlack(email, message, messageType);
 
     //console.log("submitted");
 
@@ -311,3 +324,4 @@ const Feedback = () => {
 };
 
 export default Feedback;
+export { getFeedbackMessage, sendToSlack }; // Named exports

src/components/NavItems/Assistant/AssistantApiHandlers/useAssistantApi.jsx

@@ -2,6 +2,7 @@ import axios from "axios";
 
 export default function assistantApiCalls() {
   const assistantEndpoint = process.env.REACT_APP_ASSISTANT_URL;
+  const chatbotEndpoint = process.env.REACT_APP_CHATBOT_URL;
 
   function handleAssistantError(errorResponse) {
     if (errorResponse.response) {
@@ -22,6 +23,34 @@ export default function assistantApiCalls() {
     }
   }
 
+  const callChatbot = async (
+    sessionID,
+    userInput = null,
+    email = null,
+    archiveURL = null,
+    tool = null,
+    result = null,
+  ) => {
+    let chatbotResponse;
+    try {
+      chatbotResponse = await axios.post(assistantEndpoint + "gcloud/chatbot", {
+        message: userInput,
+        sessionID: sessionID,
+        tool: tool,
+        result: result,
+      });
+    } catch (error) {
+      handleAssistantError(error);
+    }
+
+    if (chatbotResponse.data.status === "success") {
+      return chatbotResponse.data;
+    } else {
+      console.log("Chatbot error:", chatbotResponse);
+      throw new Error("assistant_error_server_error");
+    }
+  };
+
   const callAssistantScraper = async (urlType, userInput) => {
     let scrapeResult;
     try {
@@ -294,6 +323,7 @@ export default function assistantApiCalls() {
   };
 
   return {
+    callChatbot,
     callAssistantScraper,
     callSourceCredibilityService,
     callNamedEntityService,

src/components/NavItems/Assistant/AssistantIntroduction.jsx

@@ -26,6 +26,7 @@ import useMyStyles from "../../Shared/MaterialUiStyles/useMyStyles";
 import {
   TransHtmlDoubleLineBreak,
   TransSupportedToolsLink,
+  TransSupportedUrlsLink,
 } from "./TransComponents";
 
 const AssistantIntroduction = (props) => {

src/components/NavItems/Assistant/AssistantScrapeResults/AssistantTextClassification.jsx

@@ -168,7 +168,10 @@ export default function AssistantTextClassification({
   if (Object.keys(filteredCategories).length === 0) {
     filteredSentences = [];
   }
-  if (credibilitySignal === keyword("subjectivity_title") && Object.keys(filteredSentences).length === 0) {
+  if (
+    credibilitySignal === keyword("subjectivity_title") &&
+    Object.keys(filteredSentences).length === 0
+  ) {
     filteredCategories = [];
   }