import throttle from 'lodash/throttle';
import emptySvg from '@gitlab/svgs/dist/illustrations/empty-state/empty-activity-md.svg';
import GlDropdownItem from '../../../base/dropdown/dropdown_item';
import GlCard from '../../../base/card/card';
import GlEmptyState from '../../../regions/empty_state/empty_state';
import GlButton from '../../../base/button/button';
import GlAlert from '../../../base/alert/alert';
import GlFormInputGroup from '../../../base/form/form_input_group/form_input_group';
import GlFormTextarea from '../../../base/form/form_textarea/form_textarea';
import GlForm from '../../../base/form/form';
import GlExperimentBadge from '../../experiment_badge/experiment_badge';
import { badgeTypes, badgeTypeValidator } from '../../experiment_badge/constants';
import { SafeHtmlDirective } from '../../../../directives/safe_html/safe_html';
import { translate } from '../../../../utils/i18n';
import GlDuoChatLoader from './components/duo_chat_loader/duo_chat_loader';
import GlDuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts';
import GlDuoChatConversation from './components/duo_chat_conversation/duo_chat_conversation';
import { CHAT_RESET_MESSAGE, CHAT_INCLUDE_MESSAGE, MESSAGE_MODEL_ROLES, CHAT_CLEAR_MESSAGE } from './constants';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

/**
 * This component has been migrated to the Duo-UI library (https://gitlab.com/gitlab-org/duo-ui).
 *
 * Please use the corresponding component in Duo-UI going forward.
 * All future development and maintenance for Duo components should take place in Duo-UI.
 *
 * For more details, see the migration epic: https://gitlab.com/groups/gitlab-org/-/epics/15344 or reach out to the Duo-Chat team in #g_duo_chat.
 */
const i18n = {
  CHAT_DEFAULT_TITLE: translate('GlDuoChat.chatDefaultTitle', 'GitLab Duo Chat'),
  CHAT_CLOSE_LABEL: translate('GlDuoChat.chatCloseLabel', 'Close the Code Explanation'),
  CHAT_EMPTY_STATE_TITLE: translate('GlDuoChat.chatEmptyStateTitle', 'Ask a question'),
  CHAT_EMPTY_STATE_DESC: translate('GlDuoChat.chatEmptyStateDesc', 'GitLab Duo Chat is your AI-powered assistant.'),
  CHAT_EMPTY_STATE_SECONDARY_DESC: translate('GlDuoChat.chatEmptyStateSecondaryDesc', 'Responses may be inaccurate. Verify before use.'),
  CHAT_PROMPT_PLACEHOLDER_DEFAULT: translate('GlDuoChat.chatPromptPlaceholderDefault', 'GitLab Duo Chat'),
  CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: translate('GlDuoChat.chatPromptPlaceholderWithCommands', 'Type /help to learn more'),
  CHAT_SUBMIT_LABEL: translate('GlDuoChat.chatSubmitLabel', 'Send chat message.'),
  CHAT_CANCEL_LABEL: translate('GlDuoChat.chatCancelLabel', 'Cancel'),
  CHAT_DEFAULT_PREDEFINED_PROMPTS: [translate('GlDuoChat.chatDefaultPredefinedPromptsChangePassword', 'How do I change my password in GitLab?'), translate('GlDuoChat.chatDefaultPredefinedPromptsForkProject', 'How do I fork a project?'), translate('GlDuoChat.chatDefaultPredefinedPromptsCloneRepository', 'How do I clone a repository?'), translate('GlDuoChat.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);
var script = {
  name: 'GlDuoChat',
  components: {
    GlEmptyState,
    GlButton,
    GlAlert,
    GlFormInputGroup,
    GlFormTextarea,
    GlForm,
    GlExperimentBadge,
    GlDuoChatLoader,
    GlDuoChatPredefinedPrompts,
    GlDuoChatConversation,
    GlCard,
    GlDropdownItem
  },
  directives: {
    SafeHtml: SafeHtmlDirective
  },
  props: {
    /**
     * 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
    },
    /**
     * Array of RequestIds that have been canceled.
     */
    canceledRequestIds: {
      type: Array,
      required: false,
      default: () => []
    },
    /**
     * A non-recoverable error message to display in the chat.
     */
    error: {
      type: String,
      required: false,
      default: ''
    },
    /**
     * 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
    },
    /**
     * URL to the help page. This is passed down to the `GlExperimentBadge` component.
     */
    badgeHelpPageUrl: {
      type: String,
      required: false,
      default: ''
    },
    /**
     * 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 `GlDuoChatLoader` 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 empty state description text.
     */
    emptyStateDescription: {
      type: String,
      required: false,
      default: i18n.CHAT_EMPTY_STATE_DESC
    },
    /**
     * Override the default empty state description secondary text.
     */
    emptyStateSecondaryDescription: {
      type: String,
      required: false,
      default: i18n.CHAT_EMPTY_STATE_SECONDARY_DESC
    },
    /**
     * Override the default chat prompt placeholder text.
     */
    chatPromptPlaceholder: {
      type: String,
      required: false,
      default: ''
    }
  },
  data() {
    return {
      isHidden: false,
      prompt: '',
      scrolledToBottom: true,
      activeCommandIndex: 0,
      displaySubmitButton: true,
      compositionJustEnded: false,
      contextItemsMenuIsOpen: false,
      contextItemMenuRef: null
    };
  },
  computed: {
    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();
    },
    resetDisabled() {
      var _this$lastMessage;
      if (this.isLoading || !this.hasMessages) {
        return true;
      }
      return ((_this$lastMessage = this.lastMessage) === null || _this$lastMessage === void 0 ? void 0 : _this$lastMessage.content) === CHAT_RESET_MESSAGE;
    },
    isStreaming() {
      var _this$lastMessage2, _this$lastMessage3, _this$lastMessage3$ch, _this$lastMessage4, _this$lastMessage5;
      if (this.canceledRequestIds.includes((_this$lastMessage2 = this.lastMessage) === null || _this$lastMessage2 === void 0 ? void 0 : _this$lastMessage2.requestId)) {
        return false;
      }
      return Boolean(((_this$lastMessage3 = this.lastMessage) === null || _this$lastMessage3 === void 0 ? void 0 : (_this$lastMessage3$ch = _this$lastMessage3.chunks) === null || _this$lastMessage3$ch === void 0 ? void 0 : _this$lastMessage3$ch.length) > 0 && !((_this$lastMessage4 = this.lastMessage) !== null && _this$lastMessage4 !== void 0 && _this$lastMessage4.content) || typeof ((_this$lastMessage5 = this.lastMessage) === null || _this$lastMessage5 === void 0 ? void 0 : _this$lastMessage5.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);
    }
  },
  watch: {
    isLoading(newVal) {
      if (!newVal && !this.isStreaming) {
        this.displaySubmitButton = true; // Re-enable submit button when loading stops
      }
      this.isHidden = false;
    },
    isStreaming(newVal) {
      if (!newVal && !this.isLoading) {
        this.displaySubmitButton = 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();
      }
    }
  },
  created() {
    this.handleScrollingTrottled = throttle(this.handleScrolling, 200); // Assume a 200ms throttle for example
  },
  mounted() {
    this.scrollToBottom();
  },
  methods: {
    compositionEnd() {
      this.compositionJustEnded = true;
    },
    hideChat() {
      this.isHidden = true;
      /**
       * 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.displaySubmitButton = true;
      this.$emit('chat-cancel');
      this.setPromptAndFocus();
    },
    sendChatPrompt() {
      if (!this.displaySubmitButton || this.contextItemsMenuIsOpen) {
        return;
      }
      if (this.prompt) {
        if (this.caseInsensitivePrompt === CHAT_RESET_MESSAGE && this.resetDisabled) {
          return;
        }
        if (this.caseInsensitivePrompt.startsWith(CHAT_INCLUDE_MESSAGE) && this.hasContextItemSelectionMenu) {
          this.contextItemsMenuIsOpen = true;
          return;
        }
        if (![CHAT_RESET_MESSAGE, CHAT_CLEAR_MESSAGE].includes(this.caseInsensitivePrompt)) {
          this.displaySubmitButton = false;
        }

        /**
         * Emitted when a new user prompt should be sent out.
         *
         * @param {String} prompt The user prompt to send.
         */
        this.$emit('send-chat-prompt', this.prompt.trim());
        this.setPromptAndFocus();
      }
    },
    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 method is also called directly by consumers of this component
      // https://gitlab.com/gitlab-org/gitlab-vscode-extension/-/blob/dae2d4669ab4da327921492a2962beae8a05c290/webviews/vue2/gitlab_duo_chat/src/App.vue#L109
      (_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$$e.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);
    },
    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;
    }
  },
  i18n,
  emptySvg
};

/* script */
const __vue_script__ = script;

/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.isHidden)?_c('aside',{staticClass:"markdown-code-block duo-chat-drawer duo-chat gl-bottom-0 gl-max-h-full",attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"}},[(_vm.showHeader)?_c('header',{staticClass:"duo-chat-drawer-header duo-chat-drawer-header-sticky gl-z-200 gl-border-0 gl-bg-default !gl-p-0",attrs:{"data-testid":"chat-header"}},[_c('div',{staticClass:"drawer-title gl-flex gl-items-center gl-justify-start gl-p-5"},[_c('h3',{staticClass:"gl-my-0 gl-text-size-h2"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),(_vm.badgeType)?_c('gl-experiment-badge',{attrs:{"help-page-url":_vm.badgeHelpPageUrl,"type":_vm.badgeType,"container-id":"chat-component"}}):_vm._e(),_vm._v(" "),_c('gl-button',{staticClass:"gl-ml-auto",attrs:{"category":"tertiary","variant":"default","icon":"close","size":"small","data-testid":"chat-close-button","aria-label":_vm.$options.i18n.CHAT_CLOSE_LABEL},on:{"click":_vm.hideChat}})],1),_vm._v(" "),_vm._t("subheader"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"!gl-pl-9",attrs:{"dismissible":false,"variant":"danger","role":"alert","data-testid":"chat-error"}},[_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.error),expression:"error"}]})]):_vm._e()],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"duo-chat-drawer-body gl-bg-default",attrs:{"data-testid":"chat-history"},on:{"scroll":_vm.handleScrollingTrottled}},[_c('transition-group',{staticClass:"duo-chat-history gl-flex gl-flex-col gl-justify-end",class:[
        {
          'gl-h-full': !_vm.hasMessages,
          'force-scroll-bar': _vm.hasMessages,
        } ],attrs:{"tag":"section","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('gl-duo-chat-conversation',{key:("conversation-" + index),attrs:{"enable-code-insertion":_vm.enableCodeInsertion,"messages":conversation,"canceled-request-ids":_vm.canceledRequestIds,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet,"get-context-item-content":_vm.onGetContextItemContent}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('gl-empty-state',{key:"empty-state",staticClass:"gl-flex-grow gl-justify-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.emptyStateTitle},scopedSlots:_vm._u([{key:"description",fn:function(){return [_c('p',{staticClass:"gl-mb-3",attrs:{"data-testid":"gl-duo-chat-empty-state-description"}},[_vm._v("\n              "+_vm._s(_vm.emptyStateDescription)+"\n            ")]),_vm._v(" "),_c('p',{staticClass:"gl-mt-3 gl-text-sm gl-text-subtle",attrs:{"data-testid":"gl-duo-chat-empty-state-secondary-description"}},[_vm._v("\n              "+_vm._s(_vm.emptyStateSecondaryDescription)+"\n            ")])]},proxy:true}],null,false,460840487)}),_vm._v(" "),_c('gl-duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})]:_vm._e(),_vm._v(" "),(_vm.isLoading)?_c('gl-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)?_c('footer',{staticClass:"duo-chat-drawer-footer duo-chat-drawer-footer-sticky gl-border-0 gl-bg-default gl-p-5",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('gl-form-input-group',{scopedSlots:_vm._u([{key:"append",fn:function(){return [(_vm.displaySubmitButton)?_c('gl-button',{staticClass:"!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-full",attrs:{"icon":"paper-airplane","category":"primary","variant":"confirm","type":"submit","data-testid":"chat-prompt-submit-button","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL}}):_c('gl-button',{staticClass:"!gl-absolute 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}})]},proxy:true}],null,false,608602988)},[_c('div',{staticClass:"duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-align-top",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",staticClass:"gl-absolute !gl-h-full gl-rounded-br-none gl-rounded-tr-none !gl-bg-transparent !gl-py-4 !gl-shadow-none",class:{ 'gl-truncate': !_vm.prompt },attrs:{"data-testid":"chat-prompt-input","placeholder":_vm.inputPlaceholder,"autofocus":""},on:{"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)}},model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1)])],1)],1):_vm._e()]):_vm._e()};
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 };
