feat: add segment events (#5)

package.json

@@ -56,7 +56,8 @@
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
     "redux": "4.2.1",
-    "regenerator-runtime": "0.13.11"
+    "regenerator-runtime": "0.13.11",
+    "uuid": "9.0.0"
   },
   "peerDependencies": {
     "@reduxjs/toolkit": "^1.5.1"

src/components/ToggleXpertButton/index.jsx

@@ -1,10 +1,17 @@
 import { ChevronRight } from 'react-feather';
 import PropTypes from 'prop-types';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { ReactComponent as NewXeySvg } from '../../assets/new_xey.svg';
 import './index.css';
 
-const ToggleXpert = ({ isOpen, setIsOpen }) => {
+const ToggleXpert = ({ isOpen, setIsOpen, courseId }) => {
   const handleClick = () => {
+    // log event if the tool is opened
+    if (!isOpen) {
+      sendTrackEvent('edx.ui.lms.learning_assistant.launch', {
+        course_id: courseId,
+      });
+    }
     setIsOpen(!isOpen);
   };
 
@@ -39,6 +46,7 @@ const ToggleXpert = ({ isOpen, setIsOpen }) => {
 ToggleXpert.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   setIsOpen: PropTypes.func.isRequired,
+  courseId: PropTypes.string.isRequired,
 };
 
 export default ToggleXpert;

src/data/slice.js

@@ -1,12 +1,14 @@
 /* eslint-disable no-param-reassign */
 import { createSlice } from '@reduxjs/toolkit';
+import { v4 as uuidv4 } from 'uuid';
 
 export const learningAssistantSlice = createSlice({
   name: 'learning-assistant',
   initialState: {
     currentMessage: '',
     messageList: [],
     apiError: false,
+    conversationId: uuidv4(),
   },
   reducers: {
     setCurrentMessage: (state, { payload }) => {

src/data/thunks.js

@@ -1,3 +1,4 @@
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import fetchChatResponse from './api';
 import {
   setCurrentMessage,
@@ -8,14 +9,20 @@ import {
 
 export function addChatMessage(role, content) {
   return (dispatch, getState) => {
-    const { messageList } = getState().learningAssistant;
+    const { messageList, conversationId } = getState().learningAssistant;
     const message = {
       role,
       content,
       timestamp: new Date(),
     };
     const updatedMessageList = [...messageList, message];
     dispatch(setMessageList({ messageList: updatedMessageList }));
+    sendTrackEvent('edx.ui.lms.learning_assistant.message', {
+      id: conversationId,
+      timestamp: message.timestamp,
+      role: message.role,
+      content: message.content,
+    });
   };
 }
 

src/widgets/Xpert.jsx

@@ -1,22 +1,23 @@
+import PropTypes from 'prop-types';
 import { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import ToggleXpert from '../components/ToggleXpertButton';
 import Sidebar from '../components/Sidebar';
 import { getChatResponse } from '../data/thunks';
 
-const Xpert = () => {
+const Xpert = ({ courseId }) => {
   const { messageList } = useSelector(state => state.learningAssistant);
   const [sidebarIsOpen, setSidebarIsOpen] = useState(false);
 
   useEffect(() => {
     if (messageList[messageList.length - 1].role === 'user') {
-      getChatResponse();
+      getChatResponse(courseId);
     }
-  }, [messageList]);
+  }, [messageList, courseId]);
 
   return (
     <div>
-      <ToggleXpert isOpen={sidebarIsOpen} setIsOpen={setSidebarIsOpen} />
+      <ToggleXpert isOpen={sidebarIsOpen} setIsOpen={setSidebarIsOpen} courseId={courseId} />
       <Sidebar
         isOpen={sidebarIsOpen}
         setIsOpen={setSidebarIsOpen}
@@ -25,4 +26,8 @@ const Xpert = () => {
   );
 };
 
+Xpert.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
 export default Xpert;