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.

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,14 +1,14 @@
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
-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}`,
+    `${getConfig().CHAT_RESPONSE_URL}/${courseId}?unitId=${unitId}`,
   );
 
   const { data } = await getAuthenticatedHttpClient().post(url.href, payload);

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 {
@@ -22,6 +22,7 @@ const Xpert = ({ courseId, contentToolsEnabled }) => {
         isOpen={sidebarIsOpen}
         setIsOpen={setSidebarIsOpen}
         contentToolsEnabled={contentToolsEnabled}
+        unitId={unitId}
       />
       <Sidebar
         courseId={courseId}
@@ -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;