Adds Ai agents debug chat interface

What does this MR do and why?

This MR adds a chat interface (based on GlDuoChatcomponent) for AI Agents. An AI agent is basically a versioned prompt registry, so we'd like to display a chat interface to debug and try out the specified prompt.

Contributes to #436471 (closed)

Initial evaluation phase (completed)

Click to expand

Goals

1. Evaluate whether we can reuse existing components, especially those from GitLab Duo chat
2. Get a feel for the architecture
3. Explore how we can send requests to the AI abstraction layer

Findings

1. <gl-duo-chat /> is in the GitLab UI library 😐
   1. We cannot get the chat out of the sidebar implementation and hide or modify certain parts.
   2. We cannot change that easily and demo it in a single MR.
   3. I'd like to have a minimal version of the chat that strips off most of the outer layout so we can add it to any place. Also I'd like to modify the blank state text. See example below and feat(GlDuoChat): Adds empty state and prompt in... (gitlab-ui!3906 - merged) for the basic idea.

      <gl-duo-chat 
        ... 
        appearance="full|minimal"
        emptyStateTitle="s__('AIAgent|Try out your prompt')"
        emptyStateDescription="s_('AIAgent|Your agent prompt will be applied to the chat input.')"
        ... />

2. We can handle sending the prompt in our component 👍 That means:
   1. We can modify the prompt: Use the agent prompt as a foundation and inject the input prompt by replacing a placeholder { content }.
   2. We decide how we build the request. We can use different endpoints based on the selected model or pass the model as an argument to the endpoint.

Screenshots

Screen_Recording_2024-01-12_at_16.06.35

Please note, that we print the full prompt to the chat right now which we won't do in the final product. This is to only demonstrate that we use the agent prompt and replace any placeholders.

Also, see this modified version that integrates the duo chat more nicely:

Final review phase

We chose to extend the Duo Chat backend to also support the agentVersionId argument. This will prepend the agent version system prompt and directly send the request to the AI gateway. Processing and response delivery is the same as for Duo Chat.

The current state of this MR uses the GraphQl mutation and subscription to send and fetch messages.

It doesn't support streaming, state management, commands etc. We aim for a first iteration and want to build on top of that in follow-up MRs. So this is the first most simple iteration.

❗ We are aware that we'll need to modify the subscription / trigger so it also supports the agentVersionId parameter. Right now messages from the agent debug chat also appear in the Duo Chat because we use the same subscription. This is marked as a blocker for the feature flag rollout. So we'll address this in a follow up MR. See Add agentVersionId to aiCompletionResponse trig... (#441658 - closed)

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Empty chat

Chat with messages

Screen recording

Screen_Recording_2024-02-14_at_18.11.51

How to set up and validate locally

I'm not sure whether all of these steps are necessary, but this made it work for me locally. In theory if you have a local Duo chat working, you should be able to test this MR.

1. Set up AI features and have a local AI gateway running (aka set up local Duo chat).
   1. FWIW I didn't set up CustomerDot and I didn't install a separate GDK instance. Instead I modified my instance. This is my local env.runit in the GDK root folder:

      export GITLAB_SIMULATE_SAAS=1
      export AI_GATEWAY_URL=http://0.0.0.0:5052 # URL to the local AI Gateway instance
      export LLM_DEBUG=1                        # Enable debug logging
      export CODE_SUGGESTIONS_BASE_URL=http://0.0.0.0:5052 # URL to the local AI Gateway instance
      
      export GITLAB_LICENSE_MODE=test
      export CUSTOMER_PORTAL_URL="https://customers.staging.gitlab.com"

      CUSTOMER_PORTAL_URL is there because that's the recommended way to set up a development EE license (taken from my AR issue).
   2. I made a top-level group a Ultimate plan group.
   3. My logged in user is an owner of the group
   4. I think I also set something in the namespace settings to true.

      Project.find(7).namespace.namespace_settings.update!(experiment_features_enabled: true)

2. Enable the feature flag agent_registry

   Feature.enable(:agent_registry)

3. Go to http://127.0.0.1:3000/flightjs/Flight/-/ml/agents And create an agent. Example inputs:
   1. name: pirate_agent
   2. prompt: You are a pirate. Answer every question as a pirate.
4. Chat with the agent.