feat: AI Chat drawer #422

asadali145 · 2025-01-08T12:02:41Z

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/6514

Description (What does it do?)

Adds chat AI button when it is enabled for a problem or a video block. Also, fixes an issue with the Aside field naming + adds a new field for the drawer title.

Screenshots (if appropriate):

Desktop Non-Staff User	Desktop Staff User

Tablet Non-Staff User	Tablet Staff User

Mobile Non-Staff User	Mobile Staff User

How can this be tested?

Generate package by checking out this branch and running pants package :: .
Enable xBlock configurations in CMS <STUDIO_URL>/admin/xblock_config/studioconfig/
Enable xBlock asides in LMS <LMS_URL>/admin/lms_xblock/xblockasidesconfig/
Install the ol-openedx-chat in LMS and CMS, Reload them
In frontend-app-learning:
- Create env.config.jsx and add the below code:

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

remoteAiChatDrawer.init({
  messageOrigin: "http://local.openedx.io:8000",
  transformBody: messages => ({ message: messages[messages.length - 1].content }),
})

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

export default config;

Now run the below in the shell inside the learning MFE folder:
npm pack @mitodl/smoot-design@3.4.0
tar -xvzf mitodl-smoot-design-3.4.0.tgz
mv package mitodl-smoot-design
Now start learning MFE by npm run dev
Visit the CMS and enable the chat for a few problem and video blocks.
Visit LMS and you should see the button for AI Chat drawer and clicking on the button should open a drawer.
To communicate with the LEARN AI backend, you can add the API URL in LMS private.py: LEARN_AI_API_URL = "http://ai.open.odl.local:8002/http/recommendation_agent/"

pdpinch · 2025-01-17T13:30:28Z

will this close https://github.com/mitodl/hq/issues/6514

asadali145 · 2025-01-17T13:32:24Z

will this close mitodl/hq#6514

Yes, It will. I can add the issue in the PR description.

ChristopherChudzicki · 2025-02-20T15:20:21Z

src/ol_openedx_chat/static/js/ai_chat.js

+              conversationStarters: starters,
+            },
+          },
+          "http://apps.local.openedx.io:2000", // Ensure correct parent origin


Can this be an env var?

Good catch, Let me fix this.

src/ol_openedx_chat/static/js/ai_chat.js

ChristopherChudzicki

This looks good! Tested a few problems using LEARN_AI_API_URL="http://ai.open.odl.local:8002/http/recommendation_agent/"

One non-blocking issue I did notice was the studio UI workflow seems a little odd. Maybe this is a quirk of xblock asides in studio:

Excited to see this on RC!

ChristopherChudzicki · 2025-02-20T16:05:17Z

src/ol_openedx_chat/static/html/student_view.html

+    {% elif block_type == "video" %}
+      <p><b>Questions about this video?</b><br>AskTim</p>
+    {% endif %}
+    <img src="/static/images/icon.svg" alt="Chat Icon" class="chat-icon">


Suggested change

<img src="/static/images/icon.svg" alt="Chat Icon" class="chat-icon">

<img src="/static/images/icon.svg" alt="" class="chat-icon">

The icon is purely decorative. Better for screenreaders to ignore it. The button text is all that screenreaders need.

asadali145 · 2025-02-20T16:28:57Z

One non-blocking issue I did notice was the studio UI workflow seems a little odd. Maybe this is a quirk of xblock asides in studio:

I noticed this as well. I can work on this in a follow-up PR while we test it out on RC. I can create an issue for this tomorrow.

arslanashraf7 · 2025-02-21T11:41:11Z

src/ol_openedx_chat/block.py

+        if getattr(block, "category", None) == "video":
+            try:
+                content, filename, mimetype = get_transcript_from_contentstore(
+                    block, "en", "txt", block.get_transcripts_info()


Question: Was there any specific reason for requesting the .txt transcripts? .srt in my opinion is more widely used.

We are not using the transcript for now. It's better to remove this as we will pass the block ID and the transcript will be fetched separately. I can remove this.

arslanashraf7 · 2025-02-21T11:56:06Z

src/ol_openedx_chat/block.py

+    ask_tim_drawer_title = String(
+        display_name=_("Open Learning Drawer Title"),
+        default="",
+        scope=Scope.content,
+        help=_("Drawer title displayed in the chat drawer"),
+    )


nit: I have two suggestions here:

We might want to use enforce_type to make sure it is always stored as string.

I haven't run the block but I think we should set about {block.display_name} from below code as a default here. We would probably save some if conditions.

Also, Have we tested this if the title is too long? Would that break the design?

Should we not use settings scope?

I have followed the existing field pattern that you added. We haven't used enforced_type + the settings scope. Looking at what it means makes me think that we should set the settings scope for all other fields as well.

Also, Have we tested this if the title is too long? Would that break the design?

This will be passed to the drawer from the smooth design. I can test it but it is not related to the current PR.

but I think we should set about {block.display_name} from below code as a default here

We don't have a block here it self, I am not sure of a way to set the default here. That is why I used the defaults when displaying in CMS/LMS.

Drawer title looks good I think. No ellipsis but its fine for now.

arslanashraf7 · 2025-02-21T11:56:22Z

src/ol_openedx_chat/block.py

+        drawer_title = (
+            self.ask_tim_drawer_title
+            if self.ask_tim_drawer_title
+            else f"about {block.display_name}"


Related comment above

arslanashraf7 · 2025-02-21T11:58:36Z

src/ol_openedx_chat/block.py

+            except Exception:  # noqa: BLE001
+                content = ""
+
+            extra_context["video_transcript"] = content


I believe we are passing the whole transcript here. I might be wrong but my understanding was that we will pass an id. Sorry, if this sounds like an unreasonable question.

This can be removed as I mentioned above.

arslanashraf7

This was just a code review from my side.
I didn't test it due to time constraints but I am ok since you and Chris have tested it. Good to go from my side. 👍

asadali145 changed the title ~~feat: AI Chat js bundle component~~ feat: use AI Chat js bundle component Jan 8, 2025

asadali145 changed the base branch from asad/basic-lms-chat-v2 to main January 15, 2025 12:12

asadali145 force-pushed the asad/smoot-js-bundle branch 5 times, most recently from c14e729 to 6531a8a Compare January 17, 2025 12:45

asadali145 force-pushed the asad/smoot-js-bundle branch from eda4f72 to f8383d8 Compare January 21, 2025 07:37

asadali145 force-pushed the asad/smoot-js-bundle branch 3 times, most recently from 78a02d6 to 3745128 Compare February 14, 2025 15:58

asadali145 force-pushed the asad/smoot-js-bundle branch 2 times, most recently from 2aec05b to 3b39b6f Compare February 19, 2025 13:22

asadali145 added 13 commits February 20, 2025 17:45

feat: add basic lms chat

995c25a

refactor imports

7bf8278

comment transcript code

14ea368

more enhancemen to provide context

4b7f105

fix chat display for all problems

4f83f8a

more enhancements

4c21c67

more changes for the post message

6695c97

styling of launch button

da75caf

pass context from backend + added setting for the learn ai api URL

854ab95

pre-commit fixes

644414e

add ask tim input + fixed styling

6a867fd

pre-commit fixes

51a6fcd

fix bu

77ef5dc

asadali145 force-pushed the asad/smoot-js-bundle branch from e4ba490 to 77ef5dc Compare February 20, 2025 14:45

asadali145 marked this pull request as ready for review February 20, 2025 14:51

asadali145 requested a review from ChristopherChudzicki February 20, 2025 14:55

asadali145 added the Needs Review label Feb 20, 2025

ChristopherChudzicki self-assigned this Feb 20, 2025

ChristopherChudzicki reviewed Feb 20, 2025

View reviewed changes

src/ol_openedx_chat/static/js/ai_chat.js Show resolved Hide resolved

add chatId + pass Learning MFE URL

935ded5

ChristopherChudzicki approved these changes Feb 20, 2025

View reviewed changes

remove chat button alt

6f9d2ed

ChristopherChudzicki added Waiting on Author and removed Needs Review labels Feb 20, 2025

arslanashraf7 reviewed Feb 21, 2025

View reviewed changes

review changes

359da82

asadali145 requested a review from arslanashraf7 February 21, 2025 13:01

arslanashraf7 approved these changes Feb 21, 2025

View reviewed changes

asadali145 changed the title ~~feat: use AI Chat js bundle component~~ feat: AI Chat drawer Feb 21, 2025

asadali145 merged commit 8e960bf into main Feb 21, 2025
8 checks passed

asadali145 deleted the asad/smoot-js-bundle branch February 21, 2025 13:45

This was referenced Feb 26, 2025

Asad/aside with react #416

Closed

feat: add basic lms chat #398

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: AI Chat drawer #422

feat: AI Chat drawer #422

asadali145 commented Jan 8, 2025 •

edited

Loading

pdpinch commented Jan 17, 2025

asadali145 commented Jan 17, 2025

ChristopherChudzicki Feb 20, 2025

asadali145 Feb 20, 2025

ChristopherChudzicki left a comment

ChristopherChudzicki Feb 20, 2025

asadali145 commented Feb 20, 2025

arslanashraf7 Feb 21, 2025

asadali145 Feb 21, 2025

arslanashraf7 Feb 21, 2025

asadali145 Feb 21, 2025

asadali145 Feb 21, 2025

arslanashraf7 Feb 21, 2025

arslanashraf7 Feb 21, 2025

asadali145 Feb 21, 2025

arslanashraf7 left a comment

	<img src="/static/images/icon.svg" alt="Chat Icon" class="chat-icon">
	<img src="/static/images/icon.svg" alt="" class="chat-icon">

feat: AI Chat drawer #422

feat: AI Chat drawer #422

Conversation

asadali145 commented Jan 8, 2025 • edited Loading

What are the relevant tickets?

Description (What does it do?)

Screenshots (if appropriate):

How can this be tested?

pdpinch commented Jan 17, 2025

asadali145 commented Jan 17, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ChristopherChudzicki left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

asadali145 commented Feb 20, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arslanashraf7 left a comment

Choose a reason for hiding this comment

asadali145 commented Jan 8, 2025 •

edited

Loading