feat: receive unitId as prop and forward to learning-assistant backend

This commit modifies the Xpert components to accept a new unitId prop, which presents the unit usage key in which the Xpert is being rendered. This unit ID is forwarded to the chat completion backend API.

package.json

@@ -48,6 +48,7 @@
     "@optimizely/react-sdk": "^2.9.2",
     "core-js": "3.31.1",
     "prop-types": "15.8.1",
+    "query-string": "^8.1.0",
     "react-markdown": "^8.0.5",
     "uuid": "9.0.0"
   },

src/components/MessageForm/index.jsx

@@ -12,7 +12,7 @@ import {
   updateCurrentMessage,
 } from '../../data/thunks';
 
-const MessageForm = ({ courseId, shouldAutofocus }) => {
+const MessageForm = ({ courseId, shouldAutofocus, unitId }) => {
   const { apiIsLoading, currentMessage, apiError } = useSelector(state => state.learningAssistant);
   const dispatch = useDispatch();
   const inputRef = useRef();
@@ -28,7 +28,7 @@ const MessageForm = ({ courseId, shouldAutofocus }) => {
     if (currentMessage) {
       dispatch(acknowledgeDisclosure(true));
       dispatch(addChatMessage('user', currentMessage, courseId));
-      dispatch(getChatResponse(courseId));
+      dispatch(getChatResponse(courseId, unitId));
     }
   };
 
@@ -67,6 +67,7 @@ const MessageForm = ({ courseId, shouldAutofocus }) => {
 
 MessageForm.propTypes = {
   courseId: PropTypes.string.isRequired,
+  unitId: PropTypes.string.isRequired,
   shouldAutofocus: PropTypes.bool,
 };
 

src/components/Sidebar/index.jsx

@@ -22,6 +22,7 @@ const Sidebar = ({
   courseId,
   isOpen,
   setIsOpen,
+  unitId,
 }) => {
   const {
     apiError,
@@ -106,7 +107,7 @@ const Sidebar = ({
           </div>
         )
       }
-      <MessageForm courseId={courseId} shouldAutofocus />
+      <MessageForm courseId={courseId} shouldAutofocus unitId={unitId} />
       <div className="d-flex justify-content-start">
         <Button
           className="clear mx-2 mb-2 border-0"
@@ -146,6 +147,7 @@ Sidebar.propTypes = {
   courseId: PropTypes.string.isRequired,
   isOpen: PropTypes.bool.isRequired,
   setIsOpen: PropTypes.func.isRequired,
+  unitId: PropTypes.string.isRequired,
 };
 
 export default Sidebar;

src/data/api.js

@@ -1,15 +1,19 @@
-import { getConfig } from '@edx/frontend-platform';
+import { getConfig, snakeCaseObject } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import queryString from 'query-string';
 
-async function fetchChatResponse(courseId, messageList) {
+async function fetchChatResponse(courseId, messageList, unitId) {
   const payload = messageList.map((message) => ({
     role: message?.role,
     content: message?.content,
   }));
 
-  const url = new URL(
-    `${getConfig().CHAT_RESPONSE_URL}/${courseId}`,
-  );
+  const baseUrl = `${getConfig().CHAT_RESPONSE_URL}/${courseId}`;
+  let queryParams = { unitId };
+  queryParams = snakeCaseObject(queryParams);
+
+  let url = queryString.stringifyUrl({ url: baseUrl, query: queryParams });
+  url = new URL(url);
 
   const { data } = await getAuthenticatedHttpClient().post(url.href, payload);
   return data;

src/data/thunks.js

@@ -43,13 +43,13 @@ export function addChatMessage(role, content, courseId) {
   };
 }
 
-export function getChatResponse(courseId) {
+export function getChatResponse(courseId, unitId) {
   return async (dispatch, getState) => {
     const { messageList } = getState().learningAssistant;
 
     dispatch(setApiIsLoading(true));
     try {
-      const message = await fetchChatResponse(courseId, messageList);
+      const message = await fetchChatResponse(courseId, messageList, unitId);
       dispatch(setApiIsLoading(false));
       dispatch(addChatMessage(message.role, message.content, courseId));
     } catch (error) {

src/widgets/Xpert.jsx

@@ -4,7 +4,7 @@ import { updateSidebarIsOpen } from '../data/thunks';
 import ToggleXpert from '../components/ToggleXpertButton';
 import Sidebar from '../components/Sidebar';
 
-const Xpert = ({ courseId, contentToolsEnabled }) => {
+const Xpert = ({ courseId, contentToolsEnabled, unitId }) => {
   const dispatch = useDispatch();
 
   const {
@@ -27,6 +27,7 @@ const Xpert = ({ courseId, contentToolsEnabled }) => {
         courseId={courseId}
         isOpen={sidebarIsOpen}
         setIsOpen={setSidebarIsOpen}
+        unitId={unitId}
       />
     </div>
   );
@@ -35,6 +36,7 @@ const Xpert = ({ courseId, contentToolsEnabled }) => {
 Xpert.propTypes = {
   courseId: PropTypes.string.isRequired,
   contentToolsEnabled: PropTypes.bool.isRequired,
+  unitId: PropTypes.string.isRequired,
 };
 
 export default Xpert;