@gitlab/duo-ui 10.23.1 → 11.0.1

package/dist/components/agentic_chat/web_agentic_duo_chat.js

@@ -0,0 +1,725 @@
+import throttle from 'lodash/throttle';
+import { GlButton, GlFormTextarea, GlForm, GlCard, GlDropdownItem, GlSafeHtmlDirective } from '@gitlab/ui';
+import { translate, sprintf, translatePlural } from '@gitlab/ui/dist/utils/i18n';
+import { badgeTypes, badgeTypeValidator, MAX_PROMPT_LENGTH, PROMPT_LENGTH_WARNING, CHAT_RESET_MESSAGE, CHAT_INCLUDE_MESSAGE, MESSAGE_MODEL_ROLES, CHAT_BASE_COMMANDS } from '../chat/constants';
+import { VIEW_TYPES } from '../chat/components/duo_chat_header/constants';
+import DuoChatLoader from '../chat/components/duo_chat_loader/duo_chat_loader';
+import DuoChatPredefinedPrompts from '../chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts';
+import DuoChatConversation from '../chat/components/duo_chat_conversation/duo_chat_conversation';
+import WebDuoChatHeader from '../chat/components/duo_chat_header/web_duo_chat_header';
+import DuoChatThreads from '../chat/components/duo_chat_threads/duo_chat_threads';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+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 === null || item === void 0 ? void 0 : item.role);
+const isSlashCommand = command => Boolean(command) && (command === null || command === void 0 ? void 0 : 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;
+  }
+};
+var script = {
+  name: 'DuoChat',
+  components: {
+    GlButton,
+    GlFormTextarea,
+    GlForm,
+    DuoChatLoader,
+    DuoChatPredefinedPrompts,
+    DuoChatConversation,
+    WebDuoChatHeader,
+    DuoChatThreads,
+    GlCard,
+    GlDropdownItem
+  },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective
+  },
+  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() {
+      var _this$messages;
+      return ((_this$messages = this.messages) === null || _this$messages === void 0 ? void 0 : _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() {
+      var _this$messages2;
+      return (_this$messages2 = this.messages) === null || _this$messages2 === void 0 ? void 0 : _this$messages2[this.messages.length - 1];
+    },
+    caseInsensitivePrompt() {
+      return this.prompt.toLowerCase().trim();
+    },
+    isPromptEmpty() {
+      return this.caseInsensitivePrompt.length === 0;
+    },
+    isStreaming() {
+      var _this$lastMessage, _this$lastMessage$chu, _this$lastMessage2, _this$lastMessage3;
+      return Boolean(((_this$lastMessage = this.lastMessage) === null || _this$lastMessage === void 0 ? void 0 : (_this$lastMessage$chu = _this$lastMessage.chunks) === null || _this$lastMessage$chu === void 0 ? void 0 : _this$lastMessage$chu.length) > 0 && !((_this$lastMessage2 = this.lastMessage) !== null && _this$lastMessage2 !== void 0 && _this$lastMessage2.content) || typeof ((_this$lastMessage3 = this.lastMessage) === null || _this$lastMessage3 === void 0 ? void 0 : _this$lastMessage3.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() {
+      var _this$activeThread;
+      return (_this$activeThread = this.activeThread) === null || _this$activeThread === void 0 ? void 0 : _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 === null || newMessage === void 0 ? void 0 : 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 === null || newPrompt === void 0 ? void 0 : 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() {
+      var _this$$refs$anchor, _this$$refs$anchor$sc;
+      await this.$nextTick();
+      (_this$$refs$anchor = this.$refs.anchor) === null || _this$$refs$anchor === void 0 ? void 0 : (_this$$refs$anchor$sc = _this$$refs$anchor.scrollIntoView) === null || _this$$refs$anchor$sc === void 0 ? void 0 : _this$$refs$anchor$sc.call(_this$$refs$anchor);
+    },
+    focusChatInput() {
+      var _this$$refs$prompt, _this$$refs$prompt$$e, _this$$refs$prompt$$e2, _this$$refs$prompt$$e3;
+      (_this$$refs$prompt = this.$refs.prompt) === null || _this$$refs$prompt === void 0 ? void 0 : (_this$$refs$prompt$$e = _this$$refs$prompt.$el) === null || _this$$refs$prompt$$e === void 0 ? void 0 : (_this$$refs$prompt$$e2 = _this$$refs$prompt$$e.querySelector) === null || _this$$refs$prompt$$e2 === void 0 ? void 0 : (_this$$refs$prompt$$e3 = _this$$refs$prompt$$e2.call(_this$$refs$prompt$$e, 'textarea')) === null || _this$$refs$prompt$$e3 === void 0 ? void 0 : _this$$refs$prompt$$e3.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) {
+        var _this$contextItemMenu;
+        if (!this.shouldShowContextItemSelectionMenu) {
+          this.contextItemsMenuIsOpen = false;
+        }
+        (_this$contextItemMenu = this.contextItemMenuRef) === null || _this$contextItemMenu === void 0 ? void 0 : _this$contextItemMenu.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() {
+      let prompt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      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) {
+      var _document$execCommand, _document;
+      event.preventDefault();
+      (_document$execCommand = (_document = document).execCommand) === null || _document$execCommand === void 0 ? void 0 : _document$execCommand.call(_document, 'undo');
+    },
+    handleRedo(event) {
+      var _document$execCommand2, _document2;
+      event.preventDefault();
+      (_document$execCommand2 = (_document2 = document).execCommand) === null || _document$execCommand2 === void 0 ? void 0 : _document$execCommand2.call(_document2, '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 */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"markdown-code-block duo-chat gl-bottom-0 gl-flex gl-max-h-full gl-flex-grow gl-flex-col",attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"}},[(_vm.showHeader)?_c('web-duo-chat-header',{ref:"header",attrs:{"active-thread-id":_vm.activeThreadId,"title":_vm.isMultithreaded && _vm.currentView === 'list' ? _vm.$options.i18n.CHAT_HISTORY_TITLE : _vm.title,"subtitle":_vm.activeThreadTitleForView,"error":_vm.error,"is-multithreaded":_vm.isMultithreaded,"current-view":_vm.currentView,"should-render-resizable":_vm.shouldRenderResizable,"badge-type":_vm.isMultithreaded ? null : _vm.badgeType,"session-id":_vm.sessionId,"agents":_vm.agents},on:{"go-back":_vm.onGoBack,"new-chat":_vm.onNewChat,"close":_vm.hideChat},scopedSlots:_vm._u([{key:"subheader",fn:function(){return [_vm._t("subheader")]},proxy:true}],null,true)}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-flex-1 gl-flex-grow gl-flex-col gl-overflow-y-auto gl-overscroll-contain gl-bg-inherit",attrs:{"data-testid":"chat-history"},on:{"scroll":_vm.handleScrollingThrottled}},[(_vm.shouldShowThreadList)?_c('duo-chat-threads',{attrs:{"threads":_vm.threadList,"preferred-locale":_vm.preferredLocale},on:{"new-chat":_vm.onNewChat,"select-thread":_vm.onSelectThread,"delete-thread":_vm.onDeleteThread,"close":_vm.hideChat}}):_c('transition-group',{staticClass:"duo-chat-history gl-mt-auto gl-p-5",attrs:{"mode":"out-in","tag":"section","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('duo-chat-conversation',{key:("conversation-" + index),attrs:{"enable-code-insertion":_vm.enableCodeInsertion,"messages":conversation,"show-delimiter":index > 0,"with-feedback":_vm.withFeedback,"is-tool-approval-processing":_vm.isToolApprovalProcessing,"working-directory":_vm.workingDirectory},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet,"copy-message":_vm.onCopyMessage,"get-context-item-content":_vm.onGetContextItemContent,"approve-tool":_vm.onApproveToolCall,"deny-tool":_vm.onDenyToolCall,"open-file-path":_vm.onOpenFilePath}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state-message",staticClass:"duo-chat-message gl-rounded-bl-none gl-leading-20 gl-text-gray-900 gl-break-anywhere",attrs:{"data-testid":"gl-duo-chat-empty-state"}},[(_vm.emptyStateTitle)?_c('p',{staticClass:"gl-m-0",attrs:{"data-testid":"gl-duo-chat-empty-state-title"}},[_vm._v("\n            "+_vm._s(_vm.emptyStateTitle)+"\n          ")]):_vm._e(),_vm._v(" "),_c('duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})],1)]:_vm._e(),_vm._v(" "),(_vm.isLoading)?_c('duo-chat-loader',{key:"loader",attrs:{"tool-name":_vm.toolName}}):_vm._e(),_vm._v(" "),_c('div',{key:"anchor",ref:"anchor",staticClass:"scroll-anchor"})],2)],1),_vm._v(" "),(_vm.isChatAvailable && !_vm.shouldShowThreadList)?_c('footer',{staticClass:"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': !_vm.scrolledToBottom },attrs:{"data-testid":"chat-footer"}},[_c('gl-form',{attrs:{"data-testid":"chat-prompt-form"},on:{"submit":function($event){$event.stopPropagation();$event.preventDefault();return _vm.sendChatPrompt.apply(null, arguments)}}},[_c('div',{staticClass:"gl-relative gl-max-w-full"},[_vm._t("context-items-menu",null,{"isOpen":_vm.contextItemsMenuIsOpen,"onClose":_vm.closeContextItemsMenuOpen,"setRef":_vm.setContextItemsMenuRef,"focusPrompt":_vm.focusChatInput})],2),_vm._v(" "),_c('div',{staticClass:"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"},[_c('div',{staticClass:"gl-flex gl-justify-between gl-border-0 gl-border-b-1 gl-border-solid gl-border-strong gl-px-4 gl-py-4"},[_c('div',[_vm._v(_vm._s(_vm.$options.i18n.CHAT_MODEL_PLACEHOLDER))]),_vm._v(" "),_c('div',[_vm._t("agentic-switch")],2)]),_vm._v(" "),_c('div',{staticClass:"gl-h-[40px] gl-grow",attrs:{"data-value":_vm.prompt}},[(_vm.shouldShowSlashCommands)?_c('gl-card',{ref:"commands",staticClass:"slash-commands !gl-absolute gl-w-full -gl-translate-y-full gl-list-none gl-pl-0 gl-shadow-md",attrs:{"body-class":"!gl-p-2"}},_vm._l((_vm.filteredSlashCommands),function(command,index){return _c('gl-dropdown-item',{key:command.name,class:{ 'active-command': index === _vm.activeCommandIndex },on:{"click":function($event){return _vm.selectSlashCommand(index)}},nativeOn:{"mouseenter":function($event){_vm.activeCommandIndex = index;}}},[_c('span',{staticClass:"gl-flex gl-justify-between"},[_c('span',{staticClass:"gl-block"},[_vm._v(_vm._s(command.name))]),_vm._v(" "),_c('small',{staticClass:"gl-pl-3 gl-text-right gl-italic gl-text-subtle"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",attrs:{"disabled":!_vm.canSubmit,"data-testid":"chat-prompt-input","placeholder":_vm.inputPlaceholder,"character-count-limit":_vm.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': !_vm.prompt } ],"aria-label":"Chat prompt input","autofocus":""},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"z",undefined,$event.key,undefined)){ return null; }if(!$event.ctrlKey){ return null; }if($event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.handleUndo.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"z",undefined,$event.key,undefined)){ return null; }if(!$event.metaKey){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey){ return null; }return _vm.handleUndo.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"z",undefined,$event.key,undefined)){ return null; }if(!$event.ctrlKey){ return null; }if(!$event.shiftKey){ return null; }if($event.altKey||$event.metaKey){ return null; }return _vm.handleRedo.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"z",undefined,$event.key,undefined)){ return null; }if(!$event.metaKey){ return null; }if(!$event.shiftKey){ return null; }if($event.ctrlKey||$event.altKey){ return null; }return _vm.handleRedo.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"y",undefined,$event.key,undefined)){ return null; }if(!$event.ctrlKey){ return null; }if($event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.handleRedo.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"y",undefined,$event.key,undefined)){ return null; }if(!$event.metaKey){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey){ return null; }return _vm.handleRedo.apply(null, arguments)}],"compositionend":_vm.compositionEnd},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }$event.preventDefault();},"keyup":function($event){return _vm.onInputKeyup.apply(null, arguments)}},scopedSlots:_vm._u([{key:"remaining-character-count-text",fn:function(ref){
+            var count = ref.count;
+return [(count <= _vm.promptLengthWarningCount)?_c('span',{staticClass:"gl-absolute gl-bottom-[-25px] gl-right-px gl-pr-3"},[_vm._v("\n                "+_vm._s(_vm.remainingCharacterCountMessage(count))+"\n              ")]):_vm._e()]}},{key:"character-count-over-limit-text",fn:function(ref){
+            var count = ref.count;
+return [_c('span',{staticClass:"gl-absolute gl-bottom-[-25px] gl-right-px gl-pr-3"},[_vm._v(_vm._s(_vm.overLimitCharacterCountMessage(count)))])]}}],null,false,839584904),model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-justify-end gl-px-3 gl-pb-3"},[(_vm.canSubmit)?_c('gl-button',{staticClass:"gl-bottom-2 gl-right-2 gl-ml-auto !gl-rounded-full",attrs:{"icon":"paper-airplane","category":"primary","variant":"confirm","type":"submit","disabled":_vm.isPromptEmpty || !_vm.hasValidPrompt,"data-testid":"chat-prompt-submit-button","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL}}):_c('gl-button',{staticClass:"gl-bottom-2 gl-right-2 !gl-rounded-full",attrs:{"icon":"stop","category":"primary","variant":"default","data-testid":"chat-prompt-cancel-button","aria-label":_vm.$options.i18n.CHAT_CANCEL_LABEL},on:{"click":_vm.cancelPrompt}})],1)])]),_vm._v(" "),_vm._t("footer-controls"),_vm._v(" "),_c('p',{staticClass:"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': _vm.prompt.length >= _vm.maxPromptLengthWarning }},[_vm._v("\n      "+_vm._s(_vm.$options.i18n.CHAT_DISCLAMER)+"\n    ")])],2):_vm._e()],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+export { i18n };