Merge pull request #37 from necyberteam/metrics-flow

Adding metrics flow

Author: bacalj

build/static/js/main.js

@@ -121,7 +121,6 @@ const QABotInternal = React.forwardRef((props, botRef) => {
 
   // loads plugins to be passed into chatbot, matching pattern in docs
   const plugins = [HtmlRenderer(), MarkdownRenderer(), InputValidator()];
-
   const flow = useMemo(() => createBotFlow({
     welcomeMessage,
     isBotLoggedIn,

build/static/js/main.js.map

@@ -6,6 +6,9 @@ export const DEFAULT_CONFIG = {
   WELCOME_MESSAGE_LOGOUT_TRANSITION: 'You have been logged out.',
   API_ENDPOINT: 'https://access-ai-grace1-external.ccs.uky.edu/access/chat/api/',
   RATING_ENDPOINT: 'https://access-ai-grace1-external.ccs.uky.edu/access/chat/rating/',
+  METRICS_API_ENDPOINT: 'https://access-ai-grace1-external.ccs.uky.edu/access/xdmod/chat/api/',
+  METRICS_RATING_ENDPOINT: 'https://access-ai-grace1-external.ccs.uky.edu/access/xdmod/chat/rating/',
+  METRICS_QUESTIONS_URL: 'https://metrics.access-ci.org/qa_bot_faq',
 
   // Netlify function URL - this should point to the Netlify functions endpoint for ticket submission
   // NOT the Q&A API endpoint
@@ -45,6 +48,18 @@ export const getRatingEndpoint = () => {
     : DEFAULT_CONFIG.RATING_ENDPOINT;
 };
 
+export const getMetricsApiEndpoint = () => {
+  return (typeof process !== 'undefined' && process.env?.REACT_APP_METRICS_API_ENDPOINT)
+    ? process.env.REACT_APP_METRICS_API_ENDPOINT
+    : DEFAULT_CONFIG.METRICS_API_ENDPOINT;
+};
+
+export const getMetricsRatingEndpoint = () => {
+  return (typeof process !== 'undefined' && process.env?.REACT_APP_METRICS_RATING_ENDPOINT)
+    ? process.env.REACT_APP_METRICS_RATING_ENDPOINT
+    : DEFAULT_CONFIG.METRICS_RATING_ENDPOINT;
+};
+
 // Helper functions from strings.js
 export const buildWelcomeMessage = (isLoggedIn, welcomeMessage) => {
   if (isLoggedIn) {

src/components/QABot.js

@@ -3,6 +3,7 @@ import LoginButton from '../components/LoginButton';
 import { buildWelcomeMessage } from '../config/constants';
 import { createMainMenuFlow } from './flows/main-menu-flow';
 import { createQAFlow } from './flows/qa-flow';
+import { createMetricsFlow } from './flows/metrics-flow';
 import { createTicketFlow } from './flows/ticket-flow';
 // import { createFeedbackFlow } from './flows/feedback-flow';
 import { createSecurityFlow } from './flows/security-flow';
@@ -53,6 +54,27 @@ function createBotFlow({
         }
       };
 
+  // Create metrics flow (requires login)
+  const metricsFlow = isBotLoggedIn
+    ? createMetricsFlow({
+        sessionId,
+        apiKey
+      })
+    : {
+        metrics_intro: {
+          message: "To investigate metrics, you need to log in first.",
+          component: <LoginButton loginUrl={loginUrl} />,
+          options: ["Back to Main Menu"],
+          chatDisabled: true,
+          path: (chatState) => {
+            if (chatState.userInput === "Back to Main Menu") {
+              return "start";
+            }
+            return "metrics_intro";
+          }
+        }
+      };
+
   // Create ticket and feedback flows (available to everyone)
   const ticketFlow = createTicketFlow({
     ticketForm,
@@ -77,6 +99,7 @@ function createBotFlow({
   const flow = {
     ...(mainMenuFlow || {}),
     ...(qaFlow || {}),
+    ...(metricsFlow || {}),
     ...(ticketFlow || {}),
     //...(feedbackFlow || {}), // TODO: add feedback flow back in
     ...(securityFlow || {})

src/config/constants.js

@@ -18,6 +18,7 @@ export const createMainMenuFlow = ({
       options: [
         "Ask a question about ACCESS", // AI loop
         "Open a Help Ticket", // Jira Ticket
+        "Usage and performance of ACCESS resources (XDMoD)", // Metrics
         // "Provide feedback to ACCESS", // TODO: Add feedback flow back in
         "Report a security issue" // Security
       ],
@@ -29,6 +30,8 @@ export const createMainMenuFlow = ({
           // Reset form data
           setTicketForm({});
           return "help_ticket";
+        } else if (chatState.userInput === "Usage and performance of ACCESS resources (XDMoD)") {
+          return "metrics_intro";
         // } else if (chatState.userInput === "Provide feedback to ACCESS") {
         //   // Reset form data
         //   setFeedbackForm({});

src/utils/create-bot-flow.js

@@ -0,0 +1,109 @@
+import { handleBotError } from '../error-handler';
+import { DEFAULT_CONFIG, getMetricsApiEndpoint, getMetricsRatingEndpoint } from '../../config/constants';
+import { v4 as uuidv4 } from 'uuid';
+import { getProcessedText } from '../getProcessedText';
+
+/**
+ * Creates the metrics conversation flow
+ *
+ * @param {Object} params Configuration
+ * @param {string} params.sessionId Current session ID
+ * @param {string} params.apiKey API key for authentication
+ * @returns {Object} Metrics flow configuration
+ */
+export const createMetricsFlow = ({ sessionId, apiKey }) => {
+  // Track the query ID for the most recent response that can receive feedback
+  let feedbackQueryId = null;
+  return {
+    metrics_intro: {
+      message: `Please type your question about usage and performance metrics (XDMoD) below. You can see some <a target="_blank" href="${DEFAULT_CONFIG.METRICS_QUESTIONS_URL}">examples here</a>.`,
+      renderHtml: ["BOT"],
+      path: "metrics_loop"
+    },
+    metrics_loop: {
+      message: async (chatState) => {
+        const { userInput } = chatState;
+
+        // Handle feedback first if it's feedback
+        if (userInput === "👍 Helpful" || userInput === "👎 Not helpful") {
+
+          // Send feedback using the captured query ID
+          if (apiKey && sessionId && feedbackQueryId) {
+            const isPositive = userInput === "👍 Helpful";
+            const headers = {
+              'Content-Type': 'application/json',
+              'X-Origin': 'metrics',
+              'X-API-KEY': apiKey,
+              'X-Session-ID': sessionId,
+              'X-Query-ID': feedbackQueryId,
+              'X-Feedback': isPositive ? 1 : 0
+            };
+
+            const endpoint = getMetricsRatingEndpoint();
+
+            try {
+              await fetch(endpoint, {
+                method: 'POST',
+                headers
+              });
+            } catch (error) {
+              console.error('Error sending metrics feedback:', error);
+            }
+          }
+          return "Thanks for the feedback! Ask another question about usage and performance metrics (XDMoD) or start a new chat.";
+        } else {
+          // Process as a question - fetch response directly
+          try {
+            // Generate our own query ID since we're bypassing useHandleAIQuery
+            const queryId = uuidv4();
+            feedbackQueryId = queryId;
+
+            const headers = {
+              'Content-Type': 'application/json',
+              'X-Origin': 'metrics',
+              'X-API-KEY': apiKey,
+              'X-Session-ID': sessionId,
+              'X-Query-ID': queryId
+            };
+
+            const response = await fetch(getMetricsApiEndpoint(), {
+              method: 'POST',
+              headers,
+              body: JSON.stringify({
+                query: userInput
+              })
+            });
+
+            const body = await response.json();
+            const text = body.response;
+            const processedText = getProcessedText(text);
+
+
+            // Inject the response
+            await chatState.injectMessage(processedText);
+
+            // Inject guidance message after a short delay to let options render first
+            setTimeout(async () => {
+              await chatState.injectMessage("Ask another question about usage and performance metrics (XDMoD) or start a new chat.");
+            }, 100);
+
+            return null;
+          } catch (error) {
+            console.error('Error in metrics flow:', error);
+            return handleBotError(error);
+          }
+        }
+      },
+      renderMarkdown: ["BOT"],
+      options: (chatState) => {
+        // Only show feedback options if the input isn't already feedback
+        if (chatState.userInput === "👍 Helpful" || chatState.userInput === "👎 Not helpful") {
+          return []; // No options after feedback is given
+        }
+        return ["👍 Helpful", "👎 Not helpful"];
+      },
+      chatDisabled: false,
+      path: "metrics_loop"
+    },
+  };
+};

src/utils/flows/main-menu-flow.js

@@ -17,7 +17,7 @@ export const createQAFlow = ({ sessionId, apiKey }) => {
 
   return {
     go_ahead_and_ask: {
-      message: "Please type your question.",
+      message: "Please type your question about ACCESS below.",
       path: "qa_loop"
     },
     qa_loop: {
@@ -50,7 +50,7 @@ export const createQAFlow = ({ sessionId, apiKey }) => {
               console.error('Error sending feedback:', error);
             }
           }
-          return "Thanks for the feedback! Feel free to ask another question.";
+          return "Thanks for the feedback! Ask another question about ACCESS or start a new chat.";
         } else {
           // Process as a question - fetch response directly
           try {
@@ -81,6 +81,12 @@ export const createQAFlow = ({ sessionId, apiKey }) => {
 
             // Inject the response
             await chatState.injectMessage(processedText);
+
+            // Inject guidance message after a short delay to let options render first
+            setTimeout(async () => {
+              await chatState.injectMessage("Ask another question about ACCESS or start a new chat.");
+            }, 100);
+
             return null;
           } catch (error) {
             console.error('Error in bot flow:', error);