feat: AiChatContext / useAiChat

[ChristopherChudzicki]

What are the relevant tickets?

For https://github.com/mitodl/hq/issues/7168

Description (What does it do?)

Refactors AiChat to be AiChatContext + AiChatDisplay. This enables using the chat state from outside AiChatDisplay if needed.

How can this be tested?

1. Run yarn start. All stories should behave just like before.
2. If you want to see it in action, view this branch of learn-ai: add metadata and error display learn-ai#171
3. ...or this branch of MIT Learn: cc/smoot-preview. There should be no visible changes.

[gemini-code-assist]

Hello @ChristopherChudzicki, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

Summary of Changes

This pull request introduces an AiChatContext using React's context API, along with a useAiChat hook, to manage and provide state and functions for the AI chat component. The existing AiChat component is refactored into AiChatDisplay and AiChat, where AiChat now serves as a provider wrapping AiChatDisplay. This change centralizes state management, simplifies component usage, and avoids issues related to re-initialization of the useChat hook from the ai/react library. The changes also include updates to types and stories to reflect the new context-based approach.

Highlights

• Context API Integration: Introduces AiChatContext and useAiChat to manage chat state, providing a centralized and accessible way to interact with the chat functionality.
• Component Refactoring: Refactors the AiChat component into AiChatDisplay (for the UI) and AiChat (as a provider), improving separation of concerns and component reusability.
• Custom Fetcher: Implements a custom fetcher within the AiChatContext to handle API requests, including transforming the request body and setting appropriate headers.
• Storybook Updates: Updates the Storybook stories to demonstrate the usage of AiChatContext and AiChatDisplay, showcasing how to access and utilize the chat state.

Changelog

Click here to see the changelog

• src/ai.ts
  • Exports AiChatDisplay, AiChatProvider, and useAiChat.
  • Updates type exports to include AiChatContextProps and AiChatDisplayProps.
• src/bundles/RemoteTutorDrawer/RemoteTutorDrawer.stories.tsx
  • Adds component: RemoteTutorDrawer to the meta object.
• src/bundles/RemoteTutorDrawer/RemoteTutorDrawer.tsx
  • Imports AiChatProps and AiChatMessage types directly from ../../components/AiChat/types.
• src/components/AiChat/AiChat.tsx
  • Renames the main component to AiChatDisplay and extracts provider logic.
  • Removes direct dependency on requestOpts and initialMessages.
  • Imports AiChatProvider and useAiChat from ./AiChatContext.
  • Adds a new AiChat component that wraps AiChatDisplay with AiChatProvider.
• src/components/AiChat/AiChatContext.stories.tsx
  • Creates a new story to demonstrate the usage of AiChatContext and useAiChat.
  • Includes a MessageCounter component that uses useAiChat to display the number of messages.
• src/components/AiChat/AiChatContext.tsx
  • Creates AiChatContext and AiChatProvider components.
  • Implements useAiChat hook to access the context.
  • Defines a custom fetcher to handle API requests.
  • Uses useChat from ai/react to manage chat state within the context.
• src/components/AiChat/types.ts
  • Splits AiChatProps into AiChatContextProps and AiChatDisplayProps.
  • Updates type definitions to reflect the new component structure.
• src/components/AiChat/utils.ts
  • Removes the useAiChat hook and related fetcher logic, as it is now part of AiChatContext.tsx.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

---

In React's realm, a context blooms,
Sharing state, dispelling glooms.
useAiChat now sings,
A hook that brings,
The chat's heart to every room.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a new context provider and refactors the AiChat component. The changes aim to improve state management and component composition. The code is generally well-structured, but there are a few areas that could be improved for clarity and maintainability.

Summary of Findings

• Type Definition Consistency: The AiChatProps type is being redefined in AiChat.tsx and AiChatContext.stories.tsx. This duplication can lead to inconsistencies and should be resolved by importing the type from a single source.
• Component Composition and Props: The AiChat component is refactored to use AiChatProvider and AiChatDisplay. Ensure that all props are correctly passed down and that the component composition is well-documented for future maintainability.
• Context Provider Usage: The useAiChat hook relies on the AiChatContext.Provider. Ensure that the hook is always used within the provider to prevent runtime errors. The error message thrown when the hook is used outside the provider should be clear and helpful.
• Fetch API Configuration: The getFetcher function in AiChatContext.tsx configures the fetch API. Ensure that all necessary headers and body transformations are applied correctly and that error handling is robust.

Merge Readiness

The pull request introduces significant changes to the AiChat component and its context. While the code appears functional, addressing the identified issues, particularly regarding type definition consistency and context provider usage, would improve the code's robustness and maintainability. I am unable to approve this pull request, and recommend that others review and approve this code before merging. It is recommended that the pull request not be merged until the medium and high severity issues are addressed.

[github-actions]

Pre-release workflow has completed successfully.
Published version: 0.0.0-cf541fb

To update a previously-installed version with yarn:

yarn up @mitodl/[email protected]

[jonkafton]

All looks great! Very clean.

[jonkafton]

Let's link to useChat() return docs as it may not be immediately obvious that we're getting all these on the context (and nicely from the hook!) https://sdk.vercel.ai/docs/reference/ai-sdk-ui/use-chat#returns.

In the comments here or perhaps a note in the story file.

[ChristopherChudzicki]

👍 done!

[github-actions]

🎉 This PR is included in version 6.3.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀