Add the GitLab Duo chat component to @gitlab/ui

The implementation blueprint

GitLab Duo Chat has been available in GitLab product since around "%16.0" in that or another form behind the feature flags. Since %16.4 the chat is enabled by default, anybody on the Ultimate license can access it.

The Duo Chat is the set of the UI components connected into a compound component, used by GitLab in the Web UI.

Why to move to gitlab-ui?

The GitLab Duo Chat is supposed to be available not only in Web UI, but also in different other environments like Web IDE, and different desktop IDEs. To minimize the implementation and maintenance costs, we need to DRY out the chat UI implementation and, preferably, make it once and use it everywhere. One of the solutions in this case would be to move the chat UI out of the GitLab product into a separate package and make it a dependency for all environments the chat is supposed to be used in. However, this unnecessarily increases the implementation and maintenance costs due to the need to set up the release, review, etc. processes for the new package.

At the same time, we already have a package containing re-usable components, which can be installed anywhere and has all processes in place. That's gitlab-ui. Converting the Duo Chat into a shared component removes the need for separate engineers on different IDE teams to implement and maintain the chat UI, which dramatically reduces time-to-market in those environments and cuts the costs for each particular team.

The Cons of moving to gitlab-ui

• Duo Chat can not be updated instantly within the GitLab product. We will have to wait for the new release of gitlab-ui and for the updated version picked up by an environment (GitLab product for Web UI, VSCode extension for the chat in VSCode, etc.) to make the changes available
• even with https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/translation.md?ref_type=heads in place, gitlab-ui still has limited i18n capabilities, compared to GitLab product

The Pros of moving to gitlab-ui

• established automated release routines in gitlab-ui. Even though Duo Chat will have to wait for the new release of gitlab-ui when adding/updating features, the release process is automated at least in the context of gitlab-ui
• superb visual testing capabilities for the component, using the Storybook. It also provides a much better developer experience for those groups willing to see what is possible with Duo Chat by playing with the props in Storybook and instantly seeing the result
• having Duo Chat in gitlab-ui removes the psychological barriers for those willing to use and contribute to chat but are intimidated by it being some voodoo AI magic

Considering the points above, it has been suggested by groupai framework to move the component into gitlab-ui to make sharing the chat UI easier among all possible consumers.

Some implementation details

The way the component is suggested to be implemented should not create new patterns or dependencies for gitlab-ui package. This might require re-architecting the Duo Chat component to meet the following criteria:

• The component should not connect or deal with data itself. It should be a pure UI component, taking props and emitting events to communicate with the component consumers
• The component should not create new dependencies in gitlab-ui
• To highlight that this component (and any possible supporting components worth being added as re-usable for other AI features' benefit) is different from the base ones, it is suggested to put it into src/components/experimental folder, as suggested by @markrian in the Slack discusson.
• At the time of writing, there is supposed to be 3 new public components added:
  • GlExperimentBadge feat(GlExperimentBadge): Implement GlExperiment... (gitlab-ui!3686 - merged) - the badge, which is supposed to be used by all AI experiments in the product to mark their "experimental" nature
  • GlDuoUserFeedback feat(GlDuoUserFeedback): Added the component (gitlab-ui!3689 - merged) - the shared UserFeedback component with advanced feedback form. Is supposed to be used anywhere the AI experiment produces the results and the group, owning the experiment, needs to gather user feedback (technically, always)
  • GlDuoChat feat(GlDuoChat): Added the component (gitlab-ui!3694 - merged) - the core chat UI component, using the two components above among a bunch of non-public ones. The complete list of the non-public components to be implemented as part of GlDuoChat:
    • GlDuoChatLoader: feat(GlDuoChatLoader): added component (gitlab-ui!3700 - merged)
    • GlDuoChatMessageSources: feat(GlDuoChatMessageSources): Implemented comp... (gitlab-ui!3707 - merged)
    • GlDuoChatPredefinedPrompts: feat(GlDuoChatPredefinedPrompts): new component (gitlab-ui!3701 - merged)
    • GlDuoChatMessage: feat(GlDuoChatMesage): Implemented component (gitlab-ui!3709 - merged)
    • GlDuoChatConversation: feat(GlDuoChatConversation): Implemented component (gitlab-ui!3710 - merged)

For easier understanding of all components involved and their relationship, here's the visual anatomy of the GlDuoChat component:

What's next after the component lands in gitlab-ui?

It is suggested that the frontend members of groupai framework (only @dmishunov at the time of writing) are added to:

• maintainers of the gitlab/ui package,
• CODEOWNERS for src/components/experimental folder of gitlab-ui with required approval