@gitlab/duo-ui 10.23.1 → 11.0.1

package/src/components/agentic_chat/web_agentic_duo_chat.vue

@@ -0,0 +1,978 @@
+<script>
+import throttle from 'lodash/throttle';
+
+import {
+  GlButton,
+  GlDropdownItem,
+  GlCard,
+  GlFormTextarea,
+  GlForm,
+  GlSafeHtmlDirective as SafeHtml,
+} from '@gitlab/ui';
+
+import { sprintf, translate, translatePlural } from '@gitlab/ui/dist/utils/i18n';
+
+import {
+  badgeTypes,
+  badgeTypeValidator,
+  CHAT_RESET_MESSAGE,
+  CHAT_INCLUDE_MESSAGE,
+  CHAT_BASE_COMMANDS,
+  MESSAGE_MODEL_ROLES,
+  MAX_PROMPT_LENGTH,
+  PROMPT_LENGTH_WARNING,
+} from '../chat/constants';
+import { VIEW_TYPES } from '../chat/components/duo_chat_header/constants';
+import DuoChatLoader from '../chat/components/duo_chat_loader/duo_chat_loader.vue';
+import DuoChatPredefinedPrompts from '../chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
+import DuoChatConversation from '../chat/components/duo_chat_conversation/duo_chat_conversation.vue';
+import WebDuoChatHeader from '../chat/components/duo_chat_header/web_duo_chat_header.vue';
+import DuoChatThreads from '../chat/components/duo_chat_threads/duo_chat_threads.vue';
+
+export const i18n = {
+  CHAT_DEFAULT_TITLE: translate('WebAgenticDuoChat.chatDefaultTitle', 'GitLab Duo Agentic Chat'),
+  CHAT_HISTORY_TITLE: translate('WebAgenticDuoChat.chatHistoryTitle', 'Chat history'),
+  CHAT_DISCLAMER: translate(
+    'WebAgenticDuoChat.chatDisclamer',
+    'Responses may be inaccurate. Verify before use.'
+  ),
+  CHAT_EMPTY_STATE_TITLE: translate(
+    'WebAgenticDuoChat.chatEmptyStateTitle',
+    '👋 I am GitLab Duo Agentic Chat, your personal AI-powered assistant. How can I help you today?'
+  ),
+  CHAT_PROMPT_PLACEHOLDER_DEFAULT: translate(
+    'WebAgenticDuoChat.chatPromptPlaceholderDefault',
+    "Let's work through this together..."
+  ),
+  CHAT_MODEL_PLACEHOLDER: translate(
+    'WebAgenticDuoChat.chatModelPlaceholder',
+    'GitLab Duo Agentic Chat'
+  ),
+  CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: translate(
+    'WebAgenticDuoChat.chatPromptPlaceholderWithCommands',
+    'Type /help to learn more'
+  ),
+  CHAT_SUBMIT_LABEL: translate('WebAgenticDuoChat.chatSubmitLabel', 'Send chat message.'),
+  CHAT_CANCEL_LABEL: translate('WebAgenticDuoChat.chatCancelLabel', 'Cancel'),
+  CHAT_DEFAULT_PREDEFINED_PROMPTS: [
+    translate(
+      'WebAgenticDuoChat.chatDefaultPredefinedPromptsChangePassword',
+      'How do I change my password in GitLab?'
+    ),
+    translate(
+      'WebAgenticDuoChat.chatDefaultPredefinedPromptsForkProject',
+      'How do I fork a project?'
+    ),
+    translate(
+      'WebAgenticDuoChat.chatDefaultPredefinedPromptsCloneRepository',
+      'How do I clone a repository?'
+    ),
+    translate(
+      'WebAgenticDuoChat.chatDefaultPredefinedPromptsCreateTemplate',
+      'How do I create a template?'
+    ),
+  ],
+};
+
+const isMessage = (item) => Boolean(item) && item?.role;
+const isSlashCommand = (command) => Boolean(command) && command?.name && command.description;
+
+// eslint-disable-next-line unicorn/no-array-callback-reference
+const itemsValidator = (items) => items.every(isMessage);
+// eslint-disable-next-line unicorn/no-array-callback-reference
+const slashCommandsValidator = (commands) => commands.every(isSlashCommand);
+
+const isThread = (thread) =>
+  (typeof thread === 'object' &&
+    typeof thread.id === 'string' &&
+    typeof thread.lastUpdatedAt === 'string') ||
+  (typeof thread.updatedAt === 'string' &&
+    (thread.title === null || typeof thread.title === 'string' || typeof thread.goal === 'string'));
+
+// eslint-disable-next-line unicorn/no-array-callback-reference
+const threadListValidator = (threads) => threads.every(isThread);
+
+const localeValidator = (value) => {
+  try {
+    Intl.getCanonicalLocales(value);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export default {
+  name: 'DuoChat',
+  components: {
+    GlButton,
+    GlFormTextarea,
+    GlForm,
+    DuoChatLoader,
+    DuoChatPredefinedPrompts,
+    DuoChatConversation,
+    WebDuoChatHeader,
+    DuoChatThreads,
+    GlCard,
+    GlDropdownItem,
+  },
+  directives: {
+    SafeHtml,
+  },
+  props: {
+    /**
+     * Determines if the component should be resizable. When true, it renders inside
+     * a `vue-resizable` wrapper; otherwise, a standard `div` is used.
+     */
+    shouldRenderResizable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Defines the dimensions of the chat container when resizable.
+     * By default, the height is set to match the height of the browser window,
+     * and the width is fixed at 400px. The `top` position is left undefined,
+     * allowing it to be dynamically adjusted if needed.
+     */
+    dimensions: {
+      type: Object,
+      required: false,
+      default: () => ({
+        width: undefined,
+        height: undefined,
+        top: undefined,
+        left: undefined,
+        maxWidth: undefined,
+        minWidth: 400,
+        maxHeight: undefined,
+        minHeight: 400,
+      }),
+    },
+    agents: {
+      type: Array,
+
+      required: false,
+      default: () => [],
+    },
+    /**
+     * The title of the chat/feature.
+     */
+    title: {
+      type: String,
+      required: false,
+      default: i18n.CHAT_DEFAULT_TITLE,
+    },
+    /**
+     * Array of messages to display in the chat.
+     */
+    messages: {
+      type: Array,
+      required: false,
+      default: () => [],
+      validator: itemsValidator,
+    },
+    /**
+     * The ID of the active thread (if any).
+     */
+    activeThreadId: {
+      type: String,
+      required: false,
+      default: () => '',
+    },
+    /**
+     * The chat page that should be shown.
+     */
+    multiThreadedView: {
+      type: String,
+      required: false,
+      default: VIEW_TYPES.LIST,
+      validator: (value) => [VIEW_TYPES.LIST, VIEW_TYPES.CHAT].includes(value),
+    },
+
+    /**
+     * A non-recoverable error message to display in the chat.
+     */
+    error: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * Array of messages to display in the chat.
+     */
+    threadList: {
+      type: Array,
+      required: false,
+      default: () => [],
+      validator: threadListValidator,
+    },
+
+    /**
+     * Whether the chat is currently fetching a response from AI.
+     */
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Whether the conversational interfaces should be enabled.
+     */
+    isChatAvailable: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    /**
+     * Whether the insertCode feature should be available.
+     */
+    enableCodeInsertion: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Array of predefined prompts to display in the chat to start a conversation.
+     */
+    predefinedPrompts: {
+      type: Array,
+      required: false,
+      default: () => i18n.CHAT_DEFAULT_PREDEFINED_PROMPTS,
+    },
+    /**
+     * The type of the badge. This is passed down to the `GlExperimentBadge` component. Refer that component for more information.
+     */
+    badgeType: {
+      type: String || null,
+      required: false,
+      default: badgeTypes[0],
+      validator: badgeTypeValidator,
+    },
+    /**
+     * The current tool's name to display in the loading message while waiting for a response from AI. Refer the `DuoChatLoader` component for more information.
+     */
+    toolName: {
+      type: String,
+      required: false,
+      default: i18n.CHAT_DEFAULT_TITLE,
+    },
+    /**
+     * Array of slash commands to display in the chat.
+     */
+    slashCommands: {
+      type: Array,
+      required: false,
+      default: () => [],
+      validator: slashCommandsValidator,
+    },
+    /**
+     * Whether the header should be displayed.
+     */
+    showHeader: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    /**
+     * Override the default empty state title text.
+     */
+    emptyStateTitle: {
+      type: String,
+      required: false,
+      default: i18n.CHAT_EMPTY_STATE_TITLE,
+    },
+    /**
+     * Override the default chat prompt placeholder text.
+     */
+    chatPromptPlaceholder: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * Whether the chat is running in multi-threaded mode
+     */
+    isMultithreaded: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * The preferred locale for the chat interface.
+     * Follows BCP 47 language tag format (e.g., 'en-US', 'fr-FR', 'es-ES').
+     */
+    preferredLocale: {
+      type: Array,
+      required: false,
+      default: () => ['en-US', 'en'],
+      validator: localeValidator,
+    },
+    /**
+     * Whether the chat should show the feedback link on the assistant messages.
+     */
+    withFeedback: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    /**
+     * Whether the tool call is currently being processed.
+     */
+    isToolApprovalProcessing: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Optional parameter to pass in the working directory - needed for MessageMap Tool type
+     */
+    workingDirectory: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * Optional parameter to expose the workflow/session ID in the Agentic Chat UI via a copy Session ID dropdown.
+     */
+    sessionId: {
+      type: String,
+      required: false,
+      default: () => '',
+    },
+  },
+  data() {
+    return {
+      prompt: '',
+      scrolledToBottom: true,
+      activeCommandIndex: 0,
+      canSubmit: true,
+      hasValidPrompt: true,
+      compositionJustEnded: false,
+      contextItemsMenuIsOpen: false,
+      contextItemMenuRef: null,
+      currentView: this.multiThreadedView,
+      maxPromptLength: MAX_PROMPT_LENGTH,
+      maxPromptLengthWarning: PROMPT_LENGTH_WARNING,
+      promptLengthWarningCount: MAX_PROMPT_LENGTH - PROMPT_LENGTH_WARNING,
+    };
+  },
+  computed: {
+    shouldShowThreadList() {
+      return this.isMultithreaded && this.currentView === VIEW_TYPES.LIST;
+    },
+    withSlashCommands() {
+      return this.slashCommands.length > 0;
+    },
+    hasMessages() {
+      return this.messages?.length > 0;
+    },
+    conversations() {
+      if (!this.hasMessages) return [];
+
+      return this.messages.reduce(
+        (acc, message) => {
+          if (message.content === CHAT_RESET_MESSAGE) {
+            acc.push([]);
+          } else {
+            acc[acc.length - 1].push(message);
+          }
+          return acc;
+        },
+        [[]]
+      );
+    },
+    lastMessage() {
+      return this.messages?.[this.messages.length - 1];
+    },
+    caseInsensitivePrompt() {
+      return this.prompt.toLowerCase().trim();
+    },
+    isPromptEmpty() {
+      return this.caseInsensitivePrompt.length === 0;
+    },
+    isStreaming() {
+      return Boolean(
+        (this.lastMessage?.chunks?.length > 0 && !this.lastMessage?.content) ||
+          typeof this.lastMessage?.chunkId === 'number'
+      );
+    },
+    filteredSlashCommands() {
+      return this.slashCommands
+        .filter((c) => c.name.toLowerCase().startsWith(this.caseInsensitivePrompt))
+        .filter((c) => {
+          if (c.name === CHAT_INCLUDE_MESSAGE) {
+            return this.hasContextItemSelectionMenu;
+          }
+          return true;
+        });
+    },
+    shouldShowSlashCommands() {
+      if (!this.withSlashCommands || this.contextItemsMenuIsOpen) return false;
+      const startsWithSlash = this.caseInsensitivePrompt.startsWith('/');
+      const startsWithSlashCommand = this.slashCommands.some((c) =>
+        this.caseInsensitivePrompt.startsWith(c.name)
+      );
+      return startsWithSlash && this.filteredSlashCommands.length && !startsWithSlashCommand;
+    },
+    shouldShowContextItemSelectionMenu() {
+      if (!this.hasContextItemSelectionMenu) {
+        return false;
+      }
+
+      const isSlash = this.caseInsensitivePrompt === '/';
+      if (!this.caseInsensitivePrompt || isSlash) {
+        // if user has removed entire command (or whole command except for '/') we should close context item menu and allow slash command menu to show again
+        return false;
+      }
+
+      return CHAT_INCLUDE_MESSAGE.startsWith(this.caseInsensitivePrompt);
+    },
+    inputPlaceholder() {
+      if (this.chatPromptPlaceholder) {
+        return this.chatPromptPlaceholder;
+      }
+
+      return this.withSlashCommands
+        ? i18n.CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS
+        : i18n.CHAT_PROMPT_PLACEHOLDER_DEFAULT;
+    },
+    hasContextItemSelectionMenu() {
+      return Boolean(this.contextItemMenuRef);
+    },
+    activeThread() {
+      return this.activeThreadId
+        ? this.threadList.find((thread) => thread.id === this.activeThreadId)
+        : null;
+    },
+    activeThreadTitle() {
+      return this.activeThread?.title;
+    },
+    activeThreadTitleForView() {
+      return (this.currentView === VIEW_TYPES.CHAT && this.activeThreadTitle) || '';
+    },
+  },
+  watch: {
+    multiThreadedView(newView) {
+      this.currentView = newView;
+    },
+    isLoading(loading) {
+      if (!loading && !this.isStreaming) {
+        this.canSubmit = true; // Re-enable submit button when loading stops
+      }
+    },
+    isStreaming(streaming) {
+      if (!streaming && !this.isLoading) {
+        this.canSubmit = true; // Re-enable submit button when streaming stops
+      }
+    },
+    lastMessage(newMessage) {
+      if (this.scrolledToBottom || newMessage?.role.toLowerCase() === MESSAGE_MODEL_ROLES.user) {
+        // only scroll to bottom on new message if the user hasn't explicitly scrolled up to view an earlier message
+        // or if the user has just submitted a new message
+        this.scrollToBottom();
+      }
+    },
+    shouldShowSlashCommands(shouldShow) {
+      if (shouldShow) {
+        this.onShowSlashCommands();
+      }
+    },
+    prompt(newPrompt) {
+      this.hasValidPrompt = newPrompt?.length < MAX_PROMPT_LENGTH + 1;
+    },
+  },
+  created() {
+    this.handleScrollingThrottled = throttle(this.handleScrolling, 200); // Assume a 200ms throttle for example
+  },
+  mounted() {
+    this.scrollToBottom();
+  },
+
+  methods: {
+    onGoBack() {
+      this.$emit('back-to-list');
+    },
+    onNewChat(agent) {
+      this.$emit('new-chat', agent);
+
+      this.$nextTick(() => {
+        this.focusChatInput();
+      });
+    },
+    compositionEnd() {
+      this.compositionJustEnded = true;
+    },
+    hideChat() {
+      /**
+       * Emitted when clicking the cross in the title and the chat gets closed.
+       */
+      this.$emit('chat-hidden');
+    },
+    cancelPrompt() {
+      /**
+       * Emitted when user clicks the stop button in the textarea
+       */
+      this.canSubmit = true;
+      this.$emit('chat-cancel');
+      this.setPromptAndFocus();
+    },
+    async sendChatPrompt() {
+      if (!this.canSubmit || this.contextItemsMenuIsOpen) {
+        return;
+      }
+
+      if (this.prompt) {
+        // Store these before any async operations that might clear the prompt
+        const trimmedPrompt = this.prompt.trim();
+        const lowerCasePrompt = this.prompt.toLowerCase().trim();
+
+        if (lowerCasePrompt.startsWith(CHAT_INCLUDE_MESSAGE) && this.hasContextItemSelectionMenu) {
+          this.contextItemsMenuIsOpen = true;
+          return;
+        }
+
+        /**
+         * Emitted when a new user prompt should be sent out.
+         *
+         * @param {String} prompt The user prompt to send.
+         */
+        this.$emit('send-chat-prompt', trimmedPrompt);
+
+        // Always clear the prompt after sending, regardless of the command type
+        await this.setPromptAndFocus();
+        // Check if it was a special command using the stored value (before clearing)
+        if (!CHAT_BASE_COMMANDS.includes(lowerCasePrompt)) {
+          // Wait for all reactive updates to complete before setting canSubmit
+          await this.$nextTick();
+          this.canSubmit = false;
+        }
+      }
+    },
+    sendPredefinedPrompt(prompt) {
+      this.contextItemsMenuIsOpen = false;
+      this.prompt = prompt;
+      this.sendChatPrompt();
+    },
+    handleScrolling(event) {
+      const { scrollTop, offsetHeight, scrollHeight } = event.target;
+      this.scrolledToBottom = scrollTop + offsetHeight >= scrollHeight;
+    },
+    async scrollToBottom() {
+      await this.$nextTick();
+
+      this.$refs.anchor?.scrollIntoView?.();
+    },
+    focusChatInput() {
+      this.$refs.prompt?.$el?.querySelector?.('textarea')?.focus();
+    },
+    onTrackFeedback(event) {
+      /**
+       * Notify listeners about the feedback form submission on a response message.
+       * @param {*} event An event, containing the feedback choices and the extended feedback text.
+       */
+      this.$emit('track-feedback', event);
+    },
+    onShowSlashCommands() {
+      /**
+       * Emitted when user opens the slash commands menu
+       */
+      this.$emit('chat-slash');
+    },
+    sendChatPromptOnEnter(e) {
+      const { metaKey, ctrlKey, altKey, shiftKey, isComposing } = e;
+      const isModifierKey = metaKey || ctrlKey || altKey || shiftKey;
+
+      return !(isModifierKey || isComposing || this.compositionJustEnded);
+    },
+    onInputKeyup(e) {
+      const { key } = e;
+      if (this.contextItemsMenuIsOpen) {
+        if (!this.shouldShowContextItemSelectionMenu) {
+          this.contextItemsMenuIsOpen = false;
+        }
+        this.contextItemMenuRef?.handleKeyUp(e);
+        return;
+      }
+      if (this.caseInsensitivePrompt === CHAT_INCLUDE_MESSAGE) {
+        this.contextItemsMenuIsOpen = true;
+        return;
+      }
+
+      if (this.shouldShowSlashCommands) {
+        e.preventDefault();
+
+        if (key === 'Enter') {
+          this.selectSlashCommand(this.activeCommandIndex);
+        } else if (key === 'ArrowUp') {
+          this.prevCommand();
+        } else if (key === 'ArrowDown') {
+          this.nextCommand();
+        } else {
+          this.activeCommandIndex = 0;
+        }
+      } else if (key === 'Enter' && this.sendChatPromptOnEnter(e)) {
+        e.preventDefault();
+
+        this.sendChatPrompt();
+      }
+
+      this.compositionJustEnded = false;
+    },
+    prevCommand() {
+      this.activeCommandIndex -= 1;
+      this.wrapCommandIndex();
+    },
+    nextCommand() {
+      this.activeCommandIndex += 1;
+      this.wrapCommandIndex();
+    },
+    wrapCommandIndex() {
+      if (this.activeCommandIndex < 0) {
+        this.activeCommandIndex = this.filteredSlashCommands.length - 1;
+      } else if (this.activeCommandIndex >= this.filteredSlashCommands.length) {
+        this.activeCommandIndex = 0;
+      }
+    },
+    async setPromptAndFocus(prompt = '') {
+      this.prompt = prompt;
+      await this.$nextTick();
+      this.focusChatInput();
+    },
+    selectSlashCommand(index) {
+      const command = this.filteredSlashCommands[index];
+      if (command.shouldSubmit) {
+        this.prompt = command.name;
+        this.sendChatPrompt();
+      } else {
+        this.setPromptAndFocus(`${command.name} `);
+
+        if (command.name === CHAT_INCLUDE_MESSAGE && this.hasContextItemSelectionMenu) {
+          this.contextItemsMenuIsOpen = true;
+        }
+      }
+    },
+    onInsertCodeSnippet(e) {
+      /**
+       * Emit insert-code-snippet event that clients can use to interact with a suggested code.
+       * @param {*} event An event containing code string in the "detail.code" field.
+       */
+      this.$emit('insert-code-snippet', e);
+    },
+    onCopyCodeSnippet(e) {
+      /**
+       * Emit copy-code-snippet event that clients can use to interact with a suggested code.
+       * @param {*} event An event containing code string in the "detail.code" field.
+       */
+      this.$emit('copy-code-snippet', e);
+    },
+    onCopyMessage(e) {
+      /**
+       * Emit copy-message event that clients can use to copy chat message content.
+       * @param {*} event An event containing code string in the "detail.message" field.
+       */
+      this.$emit('copy-message', e);
+    },
+    onGetContextItemContent(event) {
+      /**
+       * Emit get-context-item-content event that tells clients to load the full file content for a selected context item.
+       * The fully hydrated context item should be updated in the chat message context item.
+       * @param {*} event An event containing the message ID and context item to hydrate
+       */
+      this.$emit('get-context-item-content', event);
+    },
+    closeContextItemsMenuOpen() {
+      this.contextItemsMenuIsOpen = false;
+      this.setPromptAndFocus();
+    },
+    setContextItemsMenuRef(ref) {
+      this.contextItemMenuRef = ref;
+    },
+    onSelectThread(thread) {
+      /**
+       * Emitted when a thread is selected from the history.
+       * @param {Object} thread The selected thread object
+       */
+      this.$emit('thread-selected', thread);
+    },
+    onDeleteThread(threadId) {
+      /**
+       * Emitted when a thread is deleted from the history.
+       * @param {String} threadId The ID of the thread to delete
+       */
+      this.$emit('delete-thread', threadId);
+    },
+    onApproveToolCall() {
+      /**
+       * Emitted when a user approves a tool call.
+       */
+      this.$emit('approve-tool');
+    },
+    onDenyToolCall(reason) {
+      /**
+       * Emitted when a user denies a tool call.
+       * @param {String} reason The reason for denying the tool call.
+       */
+      this.$emit('deny-tool', reason);
+    },
+    onOpenFilePath(filePath) {
+      /**
+       * Emitted when a file path link is clicked in a chat message.
+       * @param {String} filePath The file path to open
+       */
+      this.$emit('open-file-path', filePath);
+    },
+    handleUndo(event) {
+      event.preventDefault();
+      document.execCommand?.('undo');
+    },
+    handleRedo(event) {
+      event.preventDefault();
+      document.execCommand?.('redo');
+    },
+    remainingCharacterCountMessage(count) {
+      return sprintf(
+        translatePlural(
+          'WebAgenticDuoChat.remainingCharacterCountMessage',
+          '%{count} character remaining.',
+          '%{count} characters remaining.'
+        )(count),
+        {
+          count,
+        }
+      );
+    },
+    overLimitCharacterCountMessage(count) {
+      return sprintf(
+        translatePlural(
+          'WebAgenticDuoChat.overLimitCharacterCountMessage',
+          '%{count} character over limit.',
+          '%{count} characters over limit.'
+        )(count),
+        {
+          count,
+        }
+      );
+    },
+  },
+  i18n,
+};
+</script>
+<template>
+  <div
+    id="chat-component"
+    class="markdown-code-block duo-chat gl-bottom-0 gl-flex gl-max-h-full gl-flex-grow gl-flex-col"
+    role="complementary"
+    data-testid="chat-component"
+  >
+    <web-duo-chat-header
+      v-if="showHeader"
+      ref="header"
+      :active-thread-id="activeThreadId"
+      :title="isMultithreaded && currentView === 'list' ? $options.i18n.CHAT_HISTORY_TITLE : title"
+      :subtitle="activeThreadTitleForView"
+      :error="error"
+      :is-multithreaded="isMultithreaded"
+      :current-view="currentView"
+      :should-render-resizable="shouldRenderResizable"
+      :badge-type="isMultithreaded ? null : badgeType"
+      :session-id="sessionId"
+      :agents="agents"
+      @go-back="onGoBack"
+      @new-chat="onNewChat"
+      @close="hideChat"
+    >
+      <template #subheader>
+        <slot name="subheader"></slot>
+      </template>
+    </web-duo-chat-header>
+
+    <div
+      class="gl-flex gl-flex-1 gl-flex-grow gl-flex-col gl-overflow-y-auto gl-overscroll-contain gl-bg-inherit"
+      data-testid="chat-history"
+      @scroll="handleScrollingThrottled"
+    >
+      <duo-chat-threads
+        v-if="shouldShowThreadList"
+        :threads="threadList"
+        :preferred-locale="preferredLocale"
+        @new-chat="onNewChat"
+        @select-thread="onSelectThread"
+        @delete-thread="onDeleteThread"
+        @close="hideChat"
+      />
+      <transition-group
+        v-else
+        mode="out-in"
+        tag="section"
+        name="message"
+        class="duo-chat-history gl-mt-auto gl-p-5"
+      >
+        <duo-chat-conversation
+          v-for="(conversation, index) in conversations"
+          :key="`conversation-${index}`"
+          :enable-code-insertion="enableCodeInsertion"
+          :messages="conversation"
+          :show-delimiter="index > 0"
+          :with-feedback="withFeedback"
+          :is-tool-approval-processing="isToolApprovalProcessing"
+          :working-directory="workingDirectory"
+          @track-feedback="onTrackFeedback"
+          @insert-code-snippet="onInsertCodeSnippet"
+          @copy-code-snippet="onCopyCodeSnippet"
+          @copy-message="onCopyMessage"
+          @get-context-item-content="onGetContextItemContent"
+          @approve-tool="onApproveToolCall"
+          @deny-tool="onDenyToolCall"
+          @open-file-path="onOpenFilePath"
+        />
+        <template v-if="!hasMessages && !isLoading">
+          <div
+            key="empty-state-message"
+            class="duo-chat-message gl-rounded-bl-none gl-leading-20 gl-text-gray-900 gl-break-anywhere"
+            data-testid="gl-duo-chat-empty-state"
+          >
+            <p v-if="emptyStateTitle" data-testid="gl-duo-chat-empty-state-title" class="gl-m-0">
+              {{ emptyStateTitle }}
+            </p>
+            <duo-chat-predefined-prompts
+              key="predefined-prompts"
+              :prompts="predefinedPrompts"
+              @click="sendPredefinedPrompt"
+            />
+          </div>
+        </template>
+        <duo-chat-loader v-if="isLoading" key="loader" :tool-name="toolName" />
+        <div key="anchor" ref="anchor" class="scroll-anchor"></div>
+      </transition-group>
+    </div>
+    <footer
+      v-if="isChatAvailable && !shouldShowThreadList"
+      data-testid="chat-footer"
+      class="duo-chat-drawer-footer gl-relative gl-z-2 gl-shrink-0 gl-border-0 gl-bg-default gl-pb-3"
+      :class="{ 'duo-chat-drawer-body-scrim-on-footer': !scrolledToBottom }"
+    >
+      <gl-form data-testid="chat-prompt-form" @submit.stop.prevent="sendChatPrompt">
+        <div class="gl-relative gl-max-w-full">
+          <!--
+              @slot For integrating `<gl-context-items-menu>` component if pinned-context should be available. The following scopedSlot properties are provided: `isOpen`, `onClose`, `setRef`, `focusPrompt`, which should be passed to the `<gl-context-items-menu>` component when rendering, e.g. `<template #context-items-menu="{ isOpen, onClose, setRef, focusPrompt }">` `<duo-chat-context-item-menu :ref="setRef" :open="isOpen" @close="onClose" @focus-prompt="focusPrompt" ...`
+            -->
+          <slot
+            name="context-items-menu"
+            :is-open="contextItemsMenuIsOpen"
+            :on-close="closeContextItemsMenuOpen"
+            :set-ref="setContextItemsMenuRef"
+            :focus-prompt="focusChatInput"
+          ></slot>
+        </div>
+
+        <div
+          class="duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-flex-col gl-rounded-bl-[12px] gl-rounded-br-[18px] gl-rounded-tl-[12px] gl-rounded-tr-[12px] gl-align-top"
+        >
+          <div
+            class="gl-flex gl-justify-between gl-border-0 gl-border-b-1 gl-border-solid gl-border-strong gl-px-4 gl-py-4"
+          >
+            <div>{{ $options.i18n.CHAT_MODEL_PLACEHOLDER }}</div>
+            <div><slot name="agentic-switch"></slot></div>
+          </div>
+          <div :data-value="prompt" class="gl-h-[40px] gl-grow">
+            <gl-card
+              v-if="shouldShowSlashCommands"
+              ref="commands"
+              class="slash-commands !gl-absolute gl-w-full -gl-translate-y-full gl-list-none gl-pl-0 gl-shadow-md"
+              body-class="!gl-p-2"
+            >
+              <gl-dropdown-item
+                v-for="(command, index) in filteredSlashCommands"
+                :key="command.name"
+                :class="{ 'active-command': index === activeCommandIndex }"
+                @mouseenter.native="activeCommandIndex = index"
+                @click="selectSlashCommand(index)"
+              >
+                <span class="gl-flex gl-justify-between">
+                  <span class="gl-block">{{ command.name }}</span>
+                  <small class="gl-pl-3 gl-text-right gl-italic gl-text-subtle">{{
+                    command.description
+                  }}</small>
+                </span>
+              </gl-dropdown-item>
+            </gl-card>
+
+            <gl-form-textarea
+              ref="prompt"
+              v-model="prompt"
+              :disabled="!canSubmit"
+              data-testid="chat-prompt-input"
+              :placeholder="inputPlaceholder"
+              :character-count-limit="maxPromptLength"
+              :textarea-classes="[
+                '!gl-h-full',
+                '!gl-bg-transparent',
+                '!gl-py-4',
+                '!gl-shadow-none',
+                'form-control',
+                'gl-form-input',
+                'gl-form-textarea',
+                { 'gl-truncate': !prompt },
+              ]"
+              aria-label="Chat prompt input"
+              autofocus
+              @keydown.enter.exact.native.prevent
+              @keydown.ctrl.z.exact="handleUndo"
+              @keydown.meta.z.exact="handleUndo"
+              @keydown.ctrl.shift.z.exact="handleRedo"
+              @keydown.meta.shift.z.exact="handleRedo"
+              @keydown.ctrl.y.exact="handleRedo"
+              @keydown.meta.y.exact="handleRedo"
+              @keyup.native="onInputKeyup"
+              @compositionend="compositionEnd"
+            >
+              <template #remaining-character-count-text="{ count }">
+                <span
+                  v-if="count <= promptLengthWarningCount"
+                  class="gl-absolute gl-bottom-[-25px] gl-right-px gl-pr-3"
+                >
+                  {{ remainingCharacterCountMessage(count) }}
+                </span>
+              </template>
+              <template #character-count-over-limit-text="{ count }">
+                <span class="gl-absolute gl-bottom-[-25px] gl-right-px gl-pr-3">{{
+                  overLimitCharacterCountMessage(count)
+                }}</span>
+              </template>
+            </gl-form-textarea>
+          </div>
+          <div class="gl-flex gl-justify-end gl-px-3 gl-pb-3">
+            <gl-button
+              v-if="canSubmit"
+              icon="paper-airplane"
+              category="primary"
+              variant="confirm"
+              class="gl-bottom-2 gl-right-2 gl-ml-auto !gl-rounded-full"
+              type="submit"
+              :disabled="isPromptEmpty || !hasValidPrompt"
+              data-testid="chat-prompt-submit-button"
+              :aria-label="$options.i18n.CHAT_SUBMIT_LABEL"
+            />
+            <gl-button
+              v-else
+              icon="stop"
+              category="primary"
+              variant="default"
+              class="gl-bottom-2 gl-right-2 !gl-rounded-full"
+              data-testid="chat-prompt-cancel-button"
+              :aria-label="$options.i18n.CHAT_CANCEL_LABEL"
+              @click="cancelPrompt"
+            />
+          </div>
+        </div>
+      </gl-form>
+      <slot name="footer-controls"></slot>
+      <p
+        class="gl-mb-0 gl-mt-3 gl-px-4 gl-text-sm gl-text-secondary"
+        :class="{ 'gl-mt-6 sm:gl-mt-3 sm:gl-max-w-1/2': prompt.length >= maxPromptLengthWarning }"
+      >
+        {{ $options.i18n.CHAT_DISCLAMER }}
+      </p>
+    </footer>
+  </div>
+</template>