Skip to content

Add Ai assistant toggle button

Andrei Zubov requested to merge azubov-ci-chat-frontend into master

What does this MR do and why?

Describe in detail what your merge request does and why.

This issue implements a frontend part for. https://gitlab.com/gitlab-org/gitlab/-/issues/407739+

I had to fork ai_genie_chat.vue component, as the current implementation doesn't have all the features necessary for our use-case (for example proper rendering of code snippets with a copy button), and integration of features needed for us is currently under the review: !119030 (closed). Once it is merged, we'll switch to a common solution, which should be straightforward.

You can find additional information and a video presentation in the showcase issue: Ops Showcase Presentation: Conversational Inter... (gitlab-org/ci-cd/section-showcases#17 - closed)

Screenshots or screen recordings

https://www.loom.com/share/0a2736061a04465cad137d37adae109b

How to set up and validate locally

In order to test it locally you need a backend implementation. This feature relies on changes from this MR: !117924 (closed)

For your convenience I've prepared a patch that you can just apply and have all the neccessary backend changes integrated: ai_editor_backend.patch

After this patch is applied (or the MR is merged into your branch) you'll need to follow these steps:

  1. Enable the feature flag for this feature ai_ci_config_creator

    Feature.enable(:ai_ci_config_generator)
  2. Enable the :openai_experimentation feature flag that the llm_client is behind

    Feature.enable(:openai_experimentation)
  3. Run rails c then setup the api key locally. You have to request one: https://gitlab.slack.com/archives/C0517A9PZ8S/p1681445186381439

    Gitlab::CurrentSettings.update(openai_api_key: "<your-key>")
  4. Then navigate to your gitlab-ci editor page, for example https://gdk.test:3443/flightjs/Flight/-/ci/editor?branch_name=master

  5. Check that AI Assistant button is visible (the button should not be visible if the feature toggle is off). Click the button to show Ai Assistant drawer.

  6. Engage in a conversation with the chat bot. You should be able to see rendered

Note

To clear up the conversation you can use the following method:

  1. rails c
  2. Destroy all messages
Ci::Editor::AiConversation::Message.destroy_all

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Andrei Zubov

Merge request reports