Added the AiGenie component

What does this MR do and why?

The MR introduces the new AI Genie component (with AI Genie Chat), which is used to communicate code explanations to the users using AI. The component is used to explain selected code snippets.

Screenshots or screen recordings

On text selection	On toggle click (response loading)	On response

How to set up and validate locally

Since the feature itself is not integrated yet (the next MR), here's the quick & dirty patch to apply to get the feature working in local GDK:

diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index 236351005e7d..5121d22c6396 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -34,6 +34,7 @@ export default {
     ForkSuggestion,
     WebIdeLink,
     CodeIntelligence,
+    AiGenie: () => import('ee_component/ai/components/ai_genie.vue'),
   },
   mixins: [getRefMixin, glFeatureFlagMixin()],
   inject: {
@@ -316,9 +317,9 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="gl-relative">
     <gl-loading-icon v-if="isLoading" size="sm" />
-    <div v-if="blobInfo && !isLoading" class="file-holder">
+    <div v-if="blobInfo && !isLoading" id="fileHolder" class="file-holder">
       <blob-header
         :blob="blobInfo"
         :hide-viewer-switcher="!hasRichViewer || isBinaryFileType || isUsingLfs"
@@ -393,5 +394,6 @@ export default {
         :wrap-text-nodes="glFeatures.highlightJs"
       />
     </div>
+    <ai-genie container-id="fileHolder" :file-path="path" class="gl-ml-7" />
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
index 1690e666d3c4..f121e84e1ded 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
@@ -38,7 +38,7 @@ export default {
       class="gl-p-0! gl-absolute gl-z-index-3 diff-line-num gl-border-r gl-display-flex line-links line-numbers"
     >
       <a
-        class="gl-user-select-none gl-shadow-none! file-line-blame"
+        class="gl-user-select-none gl-shadow-none! file-line-blame gl-mx-n2 gl-flex-grow-1"
         :href="`${blamePath}${pageSearchString}#L${number}`"
       ></a>
       <a

1. Go to a file in a repository
2. Select some lines of content in the viewer
3. The "question mark" icon should be rendered on the same line as "blame" and "link" on the very first line of selection
4. Click the icon - the "Code Explanation" overlay should be shown with the copy of your selected code/text and the skeleton loader
5. Once the AI responds, the skeleton should be replaced with the AI-generated text.

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.

Related to #403727