Tanuki Bot Chat

What does this MR do and why?

This change introduces Tanuki Bot to the Help section of the Sidebar nav. This chat will be powered by the Tanuki Bot Project. The intention here is that the Tanuki Bot can answer GitLab related questions by utilizing our GitLab Handbook, Docs, and Blogs.

Screenshots or screen recordings

Demo

Screen_Recording_2023-04-14_at_11.57.12_AM

How to set up and validate locally

Important: The API is not yet implemented fully in Production and thus we will need to run it locally or spoof the bot responses while testing the UX until that work is complete. I will provide setup instructions below for both approaches.

(Option 1: Challenging) How to fully setup Tanuki Bot and run it locally

This setup is currently outdated, please use Option 2

Setup:

• Ensure you are on GitLab Ultimate with a valid license
• Enable Feature Flags: Feature.enable(:openai_experimentation) and Feature.enable(:tanuki_bot)
• Ensure you have an OpenAI API key and set it up in your terminal and in your rails c
  • export OPENAI_API_KEY=YOUR_KEY
  • Gitlab::CurrentSettings.update(openai_api_key: "YOUR_KEY")

1. Clone Tanuki Bot Repo and follow instructions to setup DB
2. Follow Tanuki Bot Repo README instructions to run it
3. Now Tanuki Bot is running, head over to your GDK
4. Fetch the API branch git fetch origin tchu-bot-create-new-api
5. Fetch and checkout this branch git fetch origin tanuki-bot-chat-drawer-mvc
6. Rebase this branch on top of the API branch git rebase -i origin/tchu-bot-create-new-api
7. Run your GDK and proceed to testing instructions below

(Option 2: Easier) How to spoof Tanuki Bot and strictly test the UI interactions

1. Fetch and checkout this branch git fetch origin tanuki-bot-chat-drawer-mvc
2. Copy patch below to clipboard (CMD/Ctrl + C)

Patch

diff --git a/ee/app/assets/javascripts/ai/tanuki_bot/store/actions.js b/ee/app/assets/javascripts/ai/tanuki_bot/store/actions.js
index 59c34f5e83aa..5224fed50bde 100644
--- a/ee/app/assets/javascripts/ai/tanuki_bot/store/actions.js
+++ b/ee/app/assets/javascripts/ai/tanuki_bot/store/actions.js
@@ -1,12 +1,45 @@
-import axios from '~/lib/utils/axios_utils';
+// import axios from '~/lib/utils/axios_utils';
+import { s__ } from '~/locale'
 import * as types from './mutation_types';
 
+const sleep = (ms) => {
+  // eslint-disable-next-line no-promise-executor-return
+  return new Promise((resolve) => setTimeout(resolve, ms));
+};
+
+
 export const sendMessage = async ({ commit }, msg) => {
   try {
     commit(types.SET_LOADING, true);
     commit(types.ADD_USER_MESSAGE, msg);
 
-    const { data } = await axios.post('-/llm/tanuki_bot/ask', { q: msg });
+    // const { data } = await axios.post('-/llm/tanuki_bot/ask', { q: msg });
+
+    await sleep(2000);
+
+    if (msg === 'error') {
+      throw new Error('error')
+    }
+
+    const sources = [
+      {
+        title: 'GitLab Handbook',
+        source_type: 'handbook',
+        source_url: 'https://about.gitlab.com/handbook/'
+      },
+      {
+        title: 'GitLab Team Page',
+        source_type: 'doc',
+        source_url: 'https://about.gitlab.com/company/team/'
+      },
+    ]
+
+    const data = {
+      msg: s__(
+        'TanukiBot|I am not yet a trained AI and this is a test response. I am so excited to be able to answer your questions! In the meantime check out these links below until I finish my coursework.',
+      ),
+      sources,
+    }
 
     commit(types.ADD_TANUKI_MESSAGE, data);
   } catch {
diff --git a/ee/app/helpers/ee/tanuki_bot_helper.rb b/ee/app/helpers/ee/tanuki_bot_helper.rb
index 8f82db4bece0..440508d217c0 100644
--- a/ee/app/helpers/ee/tanuki_bot_helper.rb
+++ b/ee/app/helpers/ee/tanuki_bot_helper.rb
@@ -3,6 +3,7 @@
 module EE
   module TanukiBotHelper
     def show_tanuki_bot_chat?
+      true
       return false unless License.feature_available?(:ai_tanuki_bot)
       return false if ::Gitlab.com? && !current_user&.has_paid_namespace?(plans: [::Plan::ULTIMATE])
 

3. Navigate to your /gitlab directory in your terminal
4. Enter pbpaste | git apply to apply patch
5. Run your GDK and proceed to testing instructions below
6. note: When spoofing, if you simple message Tanuki error it will respond with what an error message will look like.

Testing Instructions

1. Ensure the New navigation is enabled. You can enable it by clicking your User profile photo in the top right and toggle the switch
2. Click the help link in the bottom left of the new Sidebar navigation
3. Click Ask the Tanuki Bot link
4. Ensure drawer slides out and you can chat with the bot

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.