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

#37)

* 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.

* refactor: send MessageForm as child prop to Disclosure component

This commit refactors the Disclosure component to receive the MessageForm component as a child prop. This avoids the need to pass the courseId and unitId props through to the Disclosure component, which does not make use of either prop. This decreases the prop drilling and only passes these props through to components that actively use them.

src/components/Disclosure/index.jsx

@@ -5,10 +5,9 @@ import { Hyperlink, Icon } from '@edx/paragon';
 import { Chat } from '@edx/paragon/icons';
 import { getConfig } from '@edx/frontend-platform/config';
 
-import MessageForm from '../MessageForm';
 import './Disclosure.scss';
 
-const Disclosure = ({ courseId }) => (
+const Disclosure = ({ children }) => (
   <div className="disclosure d-flex flex-column align-items-stretch px-4 py-3">
     <h2 className="text-light-100">
       Xpert
@@ -45,12 +44,12 @@ const Disclosure = ({ courseId }) => (
       </Hyperlink>
       .
     </p>
-    <MessageForm courseId={courseId} />
+    {children}
   </div>
 );
 
 Disclosure.propTypes = {
-  courseId: PropTypes.string.isRequired,
+  children: PropTypes.node.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,
@@ -82,6 +83,10 @@ const Sidebar = ({
     });
   };
 
+  const getMessageForm = () => (
+    <MessageForm courseId={courseId} shouldAutofocus unitId={unitId} />
+  );
+
   const getSidebar = () => (
     <div className="h-100 d-flex flex-column justify-content-stretch">
       <div className="d-flex flex-column align-items-center p-3">
@@ -106,7 +111,7 @@ const Sidebar = ({
           </div>
         )
       }
-      <MessageForm courseId={courseId} shouldAutofocus />
+      {getMessageForm()}
       <div className="d-flex justify-content-start">
         <Button
           className="clear mx-2 mb-2 border-0"
@@ -136,7 +141,7 @@ const Sidebar = ({
           variant="primary"
           invertColors={!disclosureAcknowledged}
         />
-        {disclosureAcknowledged ? (getSidebar()) : (<Disclosure courseId={courseId} />)}
+        {disclosureAcknowledged ? (getSidebar()) : (<Disclosure>{getMessageForm()}</Disclosure>)}
       </div>
     )
   );
@@ -146,6 +151,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 {
@@ -14,7 +14,6 @@ const Xpert = ({ courseId, contentToolsEnabled }) => {
   const setSidebarIsOpen = (isOpen) => {
     dispatch(updateSidebarIsOpen(isOpen));
   };
-
   return (
     <div>
       <ToggleXpert
@@ -27,6 +26,7 @@ const Xpert = ({ courseId, contentToolsEnabled }) => {
         courseId={courseId}
         isOpen={sidebarIsOpen}
         setIsOpen={setSidebarIsOpen}
+        unitId={unitId}
       />
     </div>
   );
@@ -35,6 +35,7 @@ const Xpert = ({ courseId, contentToolsEnabled }) => {
 Xpert.propTypes = {
   courseId: PropTypes.string.isRequired,
   contentToolsEnabled: PropTypes.bool.isRequired,
+  unitId: PropTypes.string.isRequired,
 };
 
 export default Xpert;