@gitlab/duo-ui 11.2.2 → 11.3.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [11.3.0](https://gitlab.com/gitlab-org/duo-ui/compare/v11.2.2...v11.3.0) (2025-10-03)
+
+
+### Bug Fixes
+
+* **MCP:** Display correct cancelPrompt state after approvals ([d82ae48](https://gitlab.com/gitlab-org/duo-ui/commit/d82ae48267f1689f16680670d18faf5d97dab6f7))
+
+
+### Features
+
+* **header:** Adden new boolean to hide only part of header ([ec361ad](https://gitlab.com/gitlab-org/duo-ui/commit/ec361adccc4886c292c6a8061718d5bf1ebdbe50))
+
 ## [11.2.2](https://gitlab.com/gitlab-org/duo-ui/compare/v11.2.1...v11.2.2) (2025-10-03)
 
 

package/dist/components/agentic_chat/agentic_duo_chat.js

@@ -377,6 +377,13 @@ var script = {
     },
     activeThreadTitleForView() {
       return this.currentView === VIEW_TYPES.CHAT && this.activeThreadTitle || '';
+    },
+    isAwaitingToolApproval() {
+      if (!this.messages || this.messages.length === 0) {
+        return false;
+      }
+      const lastMessage = this.messages[this.messages.length - 1];
+      return Boolean(lastMessage && lastMessage.message_type === 'request' && lastMessage.tool_info !== undefined);
     }
   },
   watch: {
@@ -384,16 +391,28 @@ var script = {
       this.currentView = newView;
     },
     isLoading(loading) {
-      if (!loading && !this.isStreaming) {
+      if (!loading && !this.isStreaming && !this.isToolApprovalProcessing && !this.isAwaitingToolApproval) {
         this.canSubmit = true; // Re-enable submit button when loading stops
       }
       this.isHidden = false;
     },
     isStreaming(streaming) {
-      if (!streaming && !this.isLoading) {
+      if (!streaming && !this.isLoading && !this.isToolApprovalProcessing && !this.isAwaitingToolApproval) {
         this.canSubmit = true; // Re-enable submit button when streaming stops
       }
     },
+    isToolApprovalProcessing(processing) {
+      if (!processing && !this.isLoading && !this.isStreaming && !this.isAwaitingToolApproval) {
+        this.canSubmit = true; // Re-enable submit button when tool approval processing stops
+      }
+    },
+    isAwaitingToolApproval(awaiting) {
+      if (awaiting) {
+        this.canSubmit = false; // Show cancel button when tool approval is needed
+      } else if (!this.isLoading && !this.isStreaming && !this.isToolApprovalProcessing) {
+        this.canSubmit = true; // Re-enable submit button when tool approval is no longer needed
+      }
+    },
     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
@@ -412,6 +431,13 @@ var script = {
   },
   created() {
     this.handleScrollingThrottled = throttle(this.handleScrolling, 200); // Assume a 200ms throttle for example
+
+    // Set initial canSubmit state based on current conditions
+    // Note: We don't check isStreaming here because the component should allow
+    // the first submission even if it starts with streaming messages
+    if (this.isAwaitingToolApproval || this.isLoading || this.isToolApprovalProcessing) {
+      this.canSubmit = false;
+    }
   },
   mounted() {
     this.scrollToBottom();

package/dist/components/agentic_chat/web_agentic_duo_chat.js

@@ -210,6 +210,14 @@ var script = {
       required: false,
       default: true
     },
+    /**
+     * Whether the studio style header should be displayed.
+     */
+    showStudioHeader: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     /**
      * Override the default empty state title text.
      */
@@ -681,7 +689,7 @@ var 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 web-only gl-relative 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-[80px] 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":[
+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,"show-studio-header":_vm.showStudioHeader},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 web-only gl-relative 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-[80px] 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',

package/dist/components/chat/components/duo_chat_header/web_duo_chat_header.js

@@ -82,6 +82,11 @@ var script = {
       type: Array,
       required: false,
       default: () => []
+    },
+    showStudioHeader: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   computed: {
@@ -121,7 +126,7 @@ var 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('header',{staticClass:"gl-border-b gl-shrink-0 gl-bg-default gl-p-0",attrs:{"data-testid":"chat-header"}},[_c('div',{staticClass:"gl-border-b gl-flex gl-w-full gl-items-center gl-px-5 gl-py-3"},[(_vm.subtitle)?_c('h4',{staticClass:"gl-mb-0 gl-max-w-17/20 gl-flex-1 gl-shrink-0 gl-overflow-hidden gl-truncate gl-text-ellipsis gl-whitespace-nowrap gl-pr-3 gl-text-sm gl-font-normal gl-text-subtle",attrs:{"data-testid":"chat-subtitle"}},[_vm._v("\n      "+_vm._s(_vm.subtitle)+"\n    ")]):_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":function($event){return _vm.$emit('close')}}})],1),_vm._v(" "),_c('div',{staticClass:"drawer-title gl-flex gl-items-center gl-justify-start gl-p-5"},[_c('div',{staticClass:"gl-flex gl-flex-1 gl-overflow-hidden"},[_c('gl-avatar',{staticClass:"gl-mr-3",attrs:{"size":32,"entity-name":_vm.title,"shape":"circle"}}),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-items-center"},[_c('h3',{staticClass:"gl-my-0 gl-text-[0.875rem]"},[_vm._v(_vm._s(_vm.title))])])],1),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-gap-3"},[(
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('header',{staticClass:"gl-border-b gl-shrink-0 gl-bg-default gl-p-0",attrs:{"data-testid":"chat-header"}},[(!_vm.showStudioHeader)?_c('div',{staticClass:"gl-border-b gl-flex gl-w-full gl-items-center gl-px-5 gl-py-3",attrs:{"data-testid":"chat-top-header"}},[(_vm.subtitle)?_c('h4',{staticClass:"gl-mb-0 gl-max-w-17/20 gl-flex-1 gl-shrink-0 gl-overflow-hidden gl-truncate gl-text-ellipsis gl-whitespace-nowrap gl-pr-3 gl-text-sm gl-font-normal gl-text-subtle",attrs:{"data-testid":"chat-subtitle"}},[_vm._v("\n      "+_vm._s(_vm.subtitle)+"\n    ")]):_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":function($event){return _vm.$emit('close')}}})],1):_vm._e(),_vm._v(" "),_c('div',{staticClass:"drawer-title gl-flex gl-items-center gl-justify-start gl-p-5"},[_c('div',{staticClass:"gl-flex gl-flex-1 gl-overflow-hidden"},[_c('gl-avatar',{staticClass:"gl-mr-3",attrs:{"size":32,"entity-name":_vm.title,"shape":"circle"}}),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-items-center"},[_c('h3',{staticClass:"gl-my-0 gl-text-[0.875rem]"},[_vm._v(_vm._s(_vm.title))])])],1),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-gap-3"},[(
           _vm.isMultithreaded && (_vm.activeThreadId || _vm.currentView === _vm.VIEW_TYPES.LIST || _vm.hasManyAgents)
         )?[(_vm.hasManyAgents)?_c('gl-disclosure-dropdown',{attrs:{"title":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"toggle-text":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"items":_vm.agents,"data-testid":"chat-new-button","variant":"confirm","category":"tertiary","size":"small","icon":"duo-chat-new","text-sr-only":"","aria-label":_vm.$options.i18n.CHAT_NEW_LABEL,"no-caret":""},on:{"action":_vm.startNewChat},scopedSlots:_vm._u([{key:"list-item",fn:function(ref){
         var item = ref.item;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/duo-ui",
-  "version": "11.2.2",
+  "version": "11.3.0",
   "description": "Duo UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/agentic_chat/agentic_duo_chat.vue

@@ -453,22 +453,53 @@ export default {
     activeThreadTitleForView() {
       return (this.currentView === VIEW_TYPES.CHAT && this.activeThreadTitle) || '';
     },
+    isAwaitingToolApproval() {
+      if (!this.messages || this.messages.length === 0) {
+        return false;
+      }
+      const lastMessage = this.messages[this.messages.length - 1];
+      return Boolean(
+        lastMessage && lastMessage.message_type === 'request' && lastMessage.tool_info !== undefined
+      );
+    },
   },
   watch: {
     multiThreadedView(newView) {
       this.currentView = newView;
     },
     isLoading(loading) {
-      if (!loading && !this.isStreaming) {
+      if (
+        !loading &&
+        !this.isStreaming &&
+        !this.isToolApprovalProcessing &&
+        !this.isAwaitingToolApproval
+      ) {
         this.canSubmit = true; // Re-enable submit button when loading stops
       }
       this.isHidden = false;
     },
     isStreaming(streaming) {
-      if (!streaming && !this.isLoading) {
+      if (
+        !streaming &&
+        !this.isLoading &&
+        !this.isToolApprovalProcessing &&
+        !this.isAwaitingToolApproval
+      ) {
         this.canSubmit = true; // Re-enable submit button when streaming stops
       }
     },
+    isToolApprovalProcessing(processing) {
+      if (!processing && !this.isLoading && !this.isStreaming && !this.isAwaitingToolApproval) {
+        this.canSubmit = true; // Re-enable submit button when tool approval processing stops
+      }
+    },
+    isAwaitingToolApproval(awaiting) {
+      if (awaiting) {
+        this.canSubmit = false; // Show cancel button when tool approval is needed
+      } else if (!this.isLoading && !this.isStreaming && !this.isToolApprovalProcessing) {
+        this.canSubmit = true; // Re-enable submit button when tool approval is no longer needed
+      }
+    },
     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
@@ -487,6 +518,13 @@ export default {
   },
   created() {
     this.handleScrollingThrottled = throttle(this.handleScrolling, 200); // Assume a 200ms throttle for example
+
+    // Set initial canSubmit state based on current conditions
+    // Note: We don't check isStreaming here because the component should allow
+    // the first submission even if it starts with streaming messages
+    if (this.isAwaitingToolApproval || this.isLoading || this.isToolApprovalProcessing) {
+      this.canSubmit = false;
+    }
   },
   mounted() {
     this.scrollToBottom();

package/src/components/agentic_chat/web_agentic_duo_chat.vue

@@ -273,6 +273,14 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * Whether the studio style header should be displayed.
+     */
+    showStudioHeader: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     /**
      * Override the default empty state title text.
      */
@@ -784,6 +792,7 @@ export default {
       :badge-type="isMultithreaded ? null : badgeType"
       :session-id="sessionId"
       :agents="agents"
+      :show-studio-header="showStudioHeader"
       @go-back="onGoBack"
       @new-chat="onNewChat"
       @close="hideChat"

package/src/components/chat/components/duo_chat_header/web_duo_chat_header.vue

@@ -103,6 +103,11 @@ export default {
       required: false,
       default: () => [],
     },
+    showStudioHeader: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     VIEW_TYPES() {
@@ -140,7 +145,11 @@ export default {
 
 <template>
   <header data-testid="chat-header" class="gl-border-b gl-shrink-0 gl-bg-default gl-p-0">
-    <div class="gl-border-b gl-flex gl-w-full gl-items-center gl-px-5 gl-py-3">
+    <div
+      v-if="!showStudioHeader"
+      class="gl-border-b gl-flex gl-w-full gl-items-center gl-px-5 gl-py-3"
+      data-testid="chat-top-header"
+    >
       <h4
         v-if="subtitle"
         class="gl-mb-0 gl-max-w-17/20 gl-flex-1 gl-shrink-0 gl-overflow-hidden gl-truncate gl-text-ellipsis gl-whitespace-nowrap gl-pr-3 gl-text-sm gl-font-normal gl-text-subtle"