Skip to content

Add code snippet rendering to ai_genie_chat

Andrei Zubov requested to merge azubov-improve-ai-chat-code-rendering into master

What does this MR do and why?

Describe in detail what your merge request does and why.

This MRs fixes a few UI issues in ai_genie_chat component, that were revealed while integrating it into pipeline editor page:

  • Add a component to render markdown with code snippets. Code blocks will have a copy-code button.

  • Move feature toggle check from ai_genie_chat to parent component

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Demonstration of the issue: https://www.loom.com/share/f264fb01f81b4d3a93468082acef3cb6

Demonstration of the fix: https://www.loom.com/share/e71f587010e6416cb52983283b10fcdf

How to set up and validate locally

  1. Apply the following patch: ai_genie_markdown.patch
  2. Activate the following feature toggles:
Feature.enable(:ai_experimentation_api)
Feature.enable(:openai_experimentation)
Feature.enable(:explain_code_snippet)
Feature.enable(:explain_code_chat)
Feature.enable(:ai_ci_config_generator)
  1. Navigate to any file view in a repository to activate the explain this code chat, highlight some lines and click the question mark button on the left and interact with a chat Screenshot_2023-06-01_at_15.56.02
  2. Navigate to a Project -> Ci/CD -> Editor (for example https://gdk.test:3443/flightjs/Flight/-/ci/editor?branch_name=master)
  3. If there's no .gitlab-ci.yaml file press Configure pipeline button Screenshot_2023-04-28_at_00.50.46
  4. On the editor screen press Ai assistant button (see video above) and interact with the chat.

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