remove chat-input overflow dropdown

.changeset/chat-input-component.md

@@ -2,4 +2,4 @@
 '@siemens/ix': minor
 ---
 
-Add the `ix-chat-input` component for AI prompt entry, including multiline input behavior, responsive attachment overflow support with `ix-chat-prompt-attachment`, action slots, submit handling, processing state, threshold-based character limit guidance, form integration, and disclaimer text.
+Add the `ix-chat-input` component for AI prompt entry, including multiline input behavior, attachment support with `ix-chat-prompt-attachment`, action slots, submit handling, processing state, threshold-based character limit guidance, form integration, and disclaimer text.

.changeset/chat-user-message-component.md

@@ -2,4 +2,4 @@
 '@siemens/ix': minor
 ---
 
-Add the `ix-chat` component for composing chat layouts with messages and a chat input, add the `ix-chat-user-message` component for displaying right-aligned user messages in chat interfaces with optional contextual actions and sent attachments, and add the `ix-chat-ai-message` component for displaying slotted AI-generated responses with optional actions and sources. The existing `ix-chat-prompt-attachment` component now renders with `ix-chip`, supports a compact `sent` variant, supports preview-enabled attachments with `previewSupported`, emits `attachmentClick` only for those preview interactions, and no longer exposes a retry action for failed attachments. `ix-chat-input` can display wrapped attachment overflow with `ix-dropdown-button` and slotted `ix-dropdown-item` entries, and now provides a `follow-up` slot for follow-up prompt actions.
+Add the `ix-chat` component for composing chat layouts with messages and a chat input, add the `ix-chat-user-message` component for displaying right-aligned user messages in chat interfaces with optional contextual actions and sent attachments, and add the `ix-chat-ai-message` component for displaying slotted AI-generated responses with optional actions and sources. The existing `ix-chat-prompt-attachment` component now renders with `ix-chip`, supports a compact `sent` variant, supports preview-enabled attachments with `previewSupported`, emits `attachmentClick` only for those preview interactions, and no longer exposes a retry action for failed attachments. `ix-chat-input` can display prompt attachments and now provides a `follow-up` slot for follow-up prompt actions.

packages/angular/src/components.ts

@@ -447,16 +447,16 @@ export declare interface IxChatAiMessage extends Components.IxChatAiMessage {}
 
 
 @ProxyCmp({
-  inputs: ['attachmentLayout', 'attachmentOverflowCount', 'attachmentOverflowLabel', 'characterLimit', 'characterLimitWarningThreshold', 'disabled', 'disclaimer', 'insertLineBreakOnEnter', 'maxLength', 'maxRows', 'minRows', 'name', 'placeholder', 'readonly', 'state', 'textareaLabel', 'value'],
+  inputs: ['attachmentLayout', 'characterLimit', 'characterLimitWarningThreshold', 'disabled', 'disclaimer', 'insertLineBreakOnEnter', 'maxLength', 'maxRows', 'minRows', 'name', 'placeholder', 'readonly', 'state', 'textareaLabel', 'value'],
   methods: ['getNativeInputElement', 'focusInput']
 })
 @Component({
   selector: 'ix-chat-input',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['attachmentLayout', 'attachmentOverflowCount', 'attachmentOverflowLabel', 'characterLimit', 'characterLimitWarningThreshold', 'disabled', 'disclaimer', 'insertLineBreakOnEnter', 'maxLength', 'maxRows', 'minRows', 'name', 'placeholder', 'readonly', 'state', 'textareaLabel', 'value'],
-  outputs: ['valueChange', 'ixBlur', 'ixChange', 'promptSubmit', 'attachmentOverflowChange'],
+  inputs: ['attachmentLayout', 'characterLimit', 'characterLimitWarningThreshold', 'disabled', 'disclaimer', 'insertLineBreakOnEnter', 'maxLength', 'maxRows', 'minRows', 'name', 'placeholder', 'readonly', 'state', 'textareaLabel', 'value'],
+  outputs: ['valueChange', 'ixBlur', 'ixChange', 'promptSubmit'],
   standalone: false
 })
 export class IxChatInput {
@@ -465,7 +465,6 @@ export class IxChatInput {
   @Output() ixBlur = new EventEmitter<CustomEvent<void>>();
   @Output() ixChange = new EventEmitter<CustomEvent<string>>();
   @Output() promptSubmit = new EventEmitter<CustomEvent<string>>();
-  @Output() attachmentOverflowChange = new EventEmitter<CustomEvent<boolean>>();
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -490,10 +489,6 @@ export declare interface IxChatInput extends Components.IxChatInput {
    * Event emitted when the prompt is submitted by the send button or Enter key. @since 5.0.0
    */
   promptSubmit: EventEmitter<CustomEvent<string>>;
-  /**
-   * Event emitted when the attachment overflow expanded state changes. @since 5.0.0
-   */
-  attachmentOverflowChange: EventEmitter<CustomEvent<boolean>>;
 }
 
 

packages/angular/standalone/src/components.ts

@@ -552,24 +552,23 @@
 
 @ProxyCmp({
   defineCustomElementFn: defineIxChatInput,
-  inputs: ['attachmentLayout', 'attachmentOverflowCount', 'attachmentOverflowLabel', 'characterLimit', 'characterLimitWarningThreshold', 'disabled', 'disclaimer', 'insertLineBreakOnEnter', 'maxLength', 'maxRows', 'minRows', 'name', 'placeholder', 'readonly', 'state', 'textareaLabel', 'value'],
+  inputs: ['attachmentLayout', 'characterLimit', 'characterLimitWarningThreshold', 'disabled', 'disclaimer', 'insertLineBreakOnEnter', 'maxLength', 'maxRows', 'minRows', 'name', 'placeholder', 'readonly', 'state', 'textareaLabel', 'value'],
   methods: ['getNativeInputElement', 'focusInput']
 })
 @Component({
   selector: 'ix-chat-input',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['attachmentLayout', 'attachmentOverflowCount', 'attachmentOverflowLabel', 'characterLimit', 'characterLimitWarningThreshold', 'disabled', 'disclaimer', 'insertLineBreakOnEnter', 'maxLength', 'maxRows', 'minRows', 'name', 'placeholder', 'readonly', 'state', 'textareaLabel', 'value'],
-  outputs: ['valueChange', 'ixBlur', 'ixChange', 'promptSubmit', 'attachmentOverflowChange'],
+  inputs: ['attachmentLayout', 'characterLimit', 'characterLimitWarningThreshold', 'disabled', 'disclaimer', 'insertLineBreakOnEnter', 'maxLength', 'maxRows', 'minRows', 'name', 'placeholder', 'readonly', 'state', 'textareaLabel', 'value'],
+  outputs: ['valueChange', 'ixBlur', 'ixChange', 'promptSubmit'],
 })
 export class IxChatInput {
   protected el: HTMLIxChatInputElement;
   @Output() valueChange = new EventEmitter<CustomEvent<string>>();
   @Output() ixBlur = new EventEmitter<CustomEvent<void>>();
   @Output() ixChange = new EventEmitter<CustomEvent<string>>();
   @Output() promptSubmit = new EventEmitter<CustomEvent<string>>();
-  @Output() attachmentOverflowChange = new EventEmitter<CustomEvent<boolean>>();
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -594,10 +593,6 @@
    * Event emitted when the prompt is submitted by the send button or Enter key. @since 5.0.0
    */
   promptSubmit: EventEmitter<CustomEvent<string>>;
-  /**
-   * Event emitted when the attachment overflow expanded state changes. @since 5.0.0
-   */
-  attachmentOverflowChange: EventEmitter<CustomEvent<boolean>>;
 }
 
 
@@ -611,7 +606,7 @@
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
   inputs: ['fileName', 'hideRemoveButton', 'icon', 'previewSupported', 'removeAriaLabel', 'status'],
   outputs: ['attachmentClick', 'removeClick'],
 })
 export class IxChatPromptAttachment {
   protected el: HTMLIxChatPromptAttachmentElement;
@@ -646,7 +641,7 @@
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
   inputs: ['attachmentCount', 'attachmentOverflowLabel', 'message'],
   outputs: ['attachmentOverflowChange'],
 })
 export class IxChatUserMessage {
   protected el: HTMLIxChatUserMessageElement;

packages/core/src/components.d.ts

@@ -649,17 +649,6 @@ export namespace Components {
           * @default 'wrap'
          */
         "attachmentLayout": ChatInputAttachmentLayout;
-        /**
-          * Number of attachments represented by the attachment overflow trigger.
-          * @since 5.0.0
-         */
-        "attachmentOverflowCount"?: number;
-        /**
-          * Label displayed after the attachment overflow count.
-          * @since 5.0.0
-          * @default 'more'
-         */
-        "attachmentOverflowLabel": string;
         /**
           * Character limit used for the optional inline character limit message. Falls back to `maxLength` when not set.
           * @since 5.0.0
@@ -5213,7 +5202,6 @@ declare global {
         "ixBlur": void;
         "ixChange": string;
         "promptSubmit": string;
-        "attachmentOverflowChange": boolean;
     }
     /**
      * @since 5.0.0
@@ -7267,17 +7255,6 @@ declare namespace LocalJSX {
           * @default 'wrap'
          */
         "attachmentLayout"?: ChatInputAttachmentLayout;
-        /**
-          * Number of attachments represented by the attachment overflow trigger.
-          * @since 5.0.0
-         */
-        "attachmentOverflowCount"?: number;
-        /**
-          * Label displayed after the attachment overflow count.
-          * @since 5.0.0
-          * @default 'more'
-         */
-        "attachmentOverflowLabel"?: string;
         /**
           * Character limit used for the optional inline character limit message. Falls back to `maxLength` when not set.
           * @since 5.0.0
@@ -7333,11 +7310,6 @@ declare namespace LocalJSX {
           * @since 5.0.0
          */
         "name"?: string;
-        /**
-          * Event emitted when the attachment overflow expanded state changes.
-          * @since 5.0.0
-         */
-        "onAttachmentOverflowChange"?: (event: IxChatInputCustomEvent<boolean>) => void;
         /**
           * Event emitted when the chat input loses focus.
           * @since 5.0.0
@@ -11787,8 +11759,6 @@ declare namespace LocalJSX {
         "characterLimit": number;
         "characterLimitWarningThreshold": number;
         "attachmentLayout": ChatInputAttachmentLayout;
-        "attachmentOverflowCount": number;
-        "attachmentOverflowLabel": string;
         "minRows": number;
         "maxRows": number;
         "insertLineBreakOnEnter": boolean;

packages/core/src/components/chat-input/chat-input.scss

@@ -90,38 +90,17 @@
 
     @include scrollbar.scrollbar($include-current: true);
   }
-  .attachments ::slotted(ix-chat-prompt-attachment) {
-    flex: 0 1 auto;
-  }
-
-  .attachments--scroll ::slotted(ix-chat-prompt-attachment) {
-    flex: 0 0 auto;
-  }
-
-  .attachment-overflow {
-    flex: 0 0 5rem;
-    height: 2rem;
-    --ix-dropdown-button-border-radius-left: var(--theme-small-border-radius);
-    --ix-dropdown-button-border-radius-right: var(--theme-small-border-radius);
-  }
 
-  .attachment-overflow-menu-item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    min-width: 0;
+  .attachments.has-attachment-scrollbar {
+    padding-bottom: 0.25rem;
   }
 
-  .attachment-overflow-menu-item ix-dropdown-item {
-    flex: 1 1 auto;
-    min-width: 0;
+  .attachments ::slotted(ix-chat-prompt-attachment) {
+    flex: 0 1 auto;
   }
 
-  .attachment-overflow-remove-button {
+  .attachments--scroll ::slotted(ix-chat-prompt-attachment) {
     flex: 0 0 auto;
-
-    position: absolute;
-    right: 0.5rem;
   }
 
   textarea {