Add code snippet rendering to ai_genie_chat
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
- Apply the following patch: ai_genie_markdown.patch
- 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)
- 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
- Navigate to a Project -> Ci/CD -> Editor (for example https://gdk.test:3443/flightjs/Flight/-/ci/editor?branch_name=master)
- If there's no
.gitlab-ci.yaml
file pressConfigure pipeline
button - 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.
-
I have evaluated the MR acceptance checklist for this MR.