Skip to content

Update frontend directions for AskTim drawer #494

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+21 −12
Open

Update frontend directions for AskTim drawer #494

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2ee05aa
update readme
ChristopherChudzicki May 6, 2025
318231a
update readme
ChristopherChudzicki May 7, 2025
d6923fc
readme formatting fixes
ChristopherChudzicki May 8, 2025
bfe6789
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] May 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 21 additions & 12 deletions src/ol_openedx_chat/README.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,14 @@ Configuration

3. In frontend-app-learning, Run the below in the shell inside the learning MFE folder:
---------------------------------------------------------------------------------------
This will generate a bundle for the remoteAiChatDrawer. This bundle will be used in the learning MFE to render the chat drawer.
This will download the smoot-design package and copy the pre-bundled JS file to a location loadable by OpenEdx.

.. code-block:: sh

npm pack @mitodl/smoot-design@^6.0.0
npm pack @mitodl/smoot-design@^6.4.0
tar -xvzf mitodl-smoot-design*.tgz
mv package mitodl-smoot-design
mkdir -p public/static/smoot-design
cp package/dist/bundles/* public/static/smoot-design

4. Create env.config.jsx in the frontend-app-learning and add the below code:
-----------------------------------------------------------------------------
Expand All @@ -63,26 +64,34 @@ The Unit is rendered inside an Iframe and we use postMessage to communicate betw

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code chunk below is not getting rendered. We might want to bring back this new line. This is how it currently looks
image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, formatting issues should be fixed now.

import { getConfig } from '@edx/frontend-platform';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might want to retain this to load the configuration and the LMS URL dynamically instead of hardcoding the LMS base URL.


import * as remoteTutorDrawer from "./mitodl-smoot-design/dist/bundles/remoteTutorDrawer.umd.js";

remoteTutorDrawer.init({
messageOrigin: getConfig().LMS_BASE_URL,
transformBody: messages => ({ message: messages[messages.length - 1].content }),
import(
/* webpackIgnore: true */
"/static/smoot-design/remoteTutorDrawer.es.js").then(module => {
module.init({
messageOrigin: getConfig().LMS_BASE_URL,
transformBody: messages => ({ message: messages[messages.length - 1].content }),
})
})

const config = {
...process.env,
};
const config = {
...process.env,
};

export default config;

(Alternatively, you can import the drawer code from a CDN like kg.com/@mitodl/[email protected]/dist/bundles/remoteTutorDrawer.umd.js to skip Step 3. However, the steps outlined here are most similar to what we do in production.)

5. Start learning MFE by ``npm run dev``
-------------------
6. In LMS, enable the ``ol_openedx_chat.ol_openedx_chat_enabled`` waffle flag at ``<LMS>/admin/waffle/flag/``
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know it's not part of this PR, but for the point/7 to work, we need an additional setting. We need to enable ENABLE_OTHER_COURSE_SETTINGS in FEATURES for Other Course Settings to display.

This can be done via private.py or tutor config --set command.

If you can add it then that's fine, otherwise we can add that in another PR.

-------------------------------------------------------------------------------------------------------------
This will enable the ol_openedx_chat plugin for all courses. You can disable it and add a ``Waffle Flag Course Override`` at ``/admin/waffle_utils/waffleflagcourseoverridemodel/`` to enable it for a single course.

7. Go to any course in CMS > Settings > Advanced Settings and add the below in "Other Course Settings"
7. Set `FEATURES["ENABLE_OTHER_COURSE_SETTINGS"] = True` in your `cms/envs/private.py` and `lms/envs/private.py` files
----------------------------------------------------------
This enables "Other Course Settings" below.

8. Go to any course in CMS > Settings > Advanced Settings and add the below in "Other Course Settings"
------------------------------------------------------------------------------------------------------
.. code-block::

Expand Down
Loading