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/Disclosure/index.jsx

@@ -8,7 +8,7 @@ import { getConfig } from '@edx/frontend-platform/config';
 import MessageForm from '../MessageForm';
 import './Disclosure.scss';
 
-const Disclosure = ({ courseId }) => (
+const Disclosure = ({ courseId, unitId }) => (
   <div className="disclosure d-flex flex-column align-items-stretch px-4 py-3">
     <h2 className="text-light-100">
       Xpert
@@ -45,12 +45,13 @@ const Disclosure = ({ courseId }) => (
       </Hyperlink>
       .
     </p>
-    <MessageForm courseId={courseId} />
+    <MessageForm courseId={courseId} unitId={unitId} />
   </div>
 );
 
 Disclosure.propTypes = {
   courseId: PropTypes.string.isRequired,
+  unitId: PropTypes.string.isRequired,
 };
 
 export default Disclosure;

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"
@@ -136,7 +137,7 @@ const Sidebar = ({
           variant="primary"
           invertColors={!disclosureAcknowledged}
         />
-        {disclosureAcknowledged ? (getSidebar()) : (<Disclosure courseId={courseId} />)}
+        {disclosureAcknowledged ? (getSidebar()) : (<Disclosure courseId={courseId} unitId={unitId} />)}
       </div>
     )
   );
@@ -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';
 
-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}`,
-  );
+  let queryParams = { unitId };
+  queryParams = snakeCaseObject(queryParams);
+
+  let queryString = new URLSearchParams(queryParams);
+  queryString = queryString.toString();
+
+  const url = new URL(`${getConfig().CHAT_RESPONSE_URL}/${courseId}?${queryString}`);
 
   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;