WIP: feat: add AiChat sidebar plugin for learning MFE notifications slot

[zamanafzal]

What are the relevant tickets?

https://github.com/mitodl/hq/issues/9143

Description (What does it do?)

This PR migrates the AI chat interface from a drawer-based implementation to a sidebar slot integration in the Learning MFE. The AiChat component now renders within the existing notifications/discussions sidebar slot instead of using a separate drawer overlay.

Removed

• Drawer-based AI chat implementation: Removed the previous drawer/overlay approach for displaying the AI chat interface

Added

• AiChatSidebar component (AiChatSidebar.jsx): New React component that integrates with the org.openedx.frontend.learning.notifications_discussions_sidebar.v1 slot
• Plugin registration: Registered the AiChatSidebar plugin in the learning MFE configuration for MITx Online deployments

How It Works

1. Event-driven activation: The component listens for postMessage events (smoot-design::tutor-drawer-open and smoot-design::tutor-drawer-close) to show/hide the chat interface

2. Dynamic loading: When triggered, the component dynamically loads the aiChat.umd.js bundle from /static/smoot-design/aiChat.umd.js and initializes the chat interface

3. Sidebar integration: The chat panel renders within the existing notifications/discussions sidebar slot, temporarily hiding default sidebar content while the chat is active

4. Responsive behavior:

   • Desktop: Displays as a sidebar panel (45rem width)
   • Mobile: Displays full-screen with a back button

Technical Details

• Uses DIRECT_PLUGIN type with PLUGIN_OPERATIONS.Insert to add the component to the slot
• Maintains keepDefault: true to preserve existing sidebar functionality when chat is not active
• Includes error handling and loading states for the dynamic script loading

Screenshots (if appropriate):

How can this be tested?

To test this feature locally:

1. Set up Tutor instance locally as described in this guide

2. Mount frontend-app-learning locally

3. Enable AI Chatbot by following the configuration steps in the ol_openedx_chat plugin documentation

4. Install smoot-design bundle in your local learning MFE.
   This copies a pre-published version of this branch into the frontend-app-learning repo

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

5. Add AiChatSidebar component: Copy AiChatSidebar.jsx to the root of your local frontend-app-learning repository (alongside the .env file)

6. Update configuration: Update env.config.jsx with the content from learning-mfe-config.env.jsx in this PR

Now, on clicking the AskTim Button, it will open the Chatbot inside the Notifications/Discussions sidebar slot.