@siemens/element-ng 49.8.0 → 49.10.0

package/fesm2022/siemens-element-ng-breadcrumb-router.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-breadcrumb-router.mjs","sources":["../../../../projects/element-ng/breadcrumb-router/si-breadcrumb-default-resolver.service.ts","../../../../projects/element-ng/breadcrumb-router/si-breadcrumb-router.model.ts","../../../../projects/element-ng/breadcrumb-router/si-breadcrumb-router.component.ts","../../../../projects/element-ng/breadcrumb-router/si-breadcrumb-router.component.html","../../../../projects/element-ng/breadcrumb-router/si-breadcrumb-router.module.ts","../../../../projects/element-ng/breadcrumb-router/index.ts","../../../../projects/element-ng/breadcrumb-router/siemens-element-ng-breadcrumb-router.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { inject, Injectable, LOCALE_ID } from '@angular/core';\nimport { ActivatedRouteSnapshot } from '@angular/router';\nimport { BreadcrumbItem } from '@siemens/element-ng/breadcrumb';\nimport { Observable } from 'rxjs';\n\nimport { BreadcrumbRouterLink, SiBreadcrumbResolverService } from './si-breadcrumb-router.model';\n\n@Injectable({ providedIn: 'root' })\nexport class SiBreadcrumbDefaultResolverService implements SiBreadcrumbResolverService {\n  private locale = inject(LOCALE_ID).toString();\n\n  /**\n   * Method which resolves the route and creates the breadcrumb items from it.\n   * Is called by the `si-breadcrumb-router-component` but can also be called manually in inheritance patterns.\n   */\n  resolve(route: ActivatedRouteSnapshot): BreadcrumbItem[] | Observable<BreadcrumbItem[]> {\n    if (route.data.siBreadcrumb) {\n      return this.resolveCustomRoutePart(route)!;\n    } else {\n      return this.resolveDefault(route);\n    }\n  }\n\n  private resolveCustomRoutePart(route: ActivatedRouteSnapshot): BreadcrumbItem[] | undefined {\n    if (route.data.siBreadcrumb) {\n      const rawLinks = route.data.siBreadcrumb as BreadcrumbRouterLink[];\n      return rawLinks.map(\n        rl =>\n          ({\n            title: this.calculateName(route, rl.title),\n            link: rl.link ? this.calculateUrl(route, rl.link) : route.fragment!\n          }) as BreadcrumbItem\n      );\n    }\n    return;\n  }\n\n  private resolveDefault(route: ActivatedRouteSnapshot | null): BreadcrumbItem[] {\n    const links: BreadcrumbItem[] = [];\n    let currRoute = route;\n    while (currRoute != null) {\n      if (currRoute.data.siBreadcrumb) {\n        links.unshift(...this.resolveCustomRoutePart(currRoute)!);\n      } else if (currRoute.url.length > 0) {\n        const routeUrl: string = this.getUrl(currRoute);\n        const routeName: string = this.getName(currRoute);\n        let link: BreadcrumbItem;\n        if (links.length === 0) {\n          link = { title: routeName } as BreadcrumbItem;\n        } else {\n          link = { title: routeName, link: routeUrl } as BreadcrumbItem;\n        }\n        links.unshift(link);\n      }\n      currRoute = currRoute.parent;\n    }\n    return links;\n  }\n\n  private getUrl(route: ActivatedRouteSnapshot): string {\n    const parent = route.parent;\n    let url: string;\n    if (parent != null) {\n      url = this.getUrl(parent);\n    } else {\n      url = '';\n    }\n    const currentRouteUrl = route.url.map(o => o.toString()).join('/');\n    if (!url.endsWith('/')) {\n      url = url + '/';\n    }\n    url = url + currentRouteUrl;\n    return url;\n  }\n\n  private getName(route: ActivatedRouteSnapshot): string {\n    let name: string = route.data.title ?? route.url[0].path;\n    if (typeof name === 'object') {\n      name = name[this.locale];\n    }\n\n    return this.calculateName(route, name);\n  }\n\n  private calculateName(route: ActivatedRouteSnapshot, baseName: string): string {\n    return this.calculate(route, baseName, /{(\\w+)}/g);\n  }\n\n  private calculateUrl(route: ActivatedRouteSnapshot, baseName: string): string {\n    return this.calculate(route, baseName, /:(\\w+)\\/?/g, ':', '');\n  }\n\n  private calculate(\n    route: ActivatedRouteSnapshot,\n    base: string,\n    pattern: RegExp,\n    replaceStart = '{',\n    replaceEnd = '}'\n  ): string {\n    let name = base;\n    const values: string[] = [];\n\n    let finding: RegExpExecArray | null;\n    // tslint:disable-next-line:no-conditional-assignment\n    while ((finding = pattern.exec(name)) != null) {\n      values.push(finding[1]);\n    }\n\n    values.forEach(value => {\n      let replace = this.findParam(route, value);\n      if (route.data.replaceValues) {\n        replace = route.data.replaceValues[replace] ?? replace;\n      }\n      name = name.replace(`${replaceStart}${value}${replaceEnd}`, replace);\n    });\n\n    return name;\n  }\n\n  private findParam(route: ActivatedRouteSnapshot, paramKey: string): string {\n    return (\n      route.paramMap.get(paramKey) ??\n      (route.parent ? this.findParam(route.parent, paramKey) : paramKey)\n    );\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { inject, InjectionToken } from '@angular/core';\nimport { ActivatedRouteSnapshot } from '@angular/router';\nimport { BreadcrumbItem } from '@siemens/element-ng/breadcrumb';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\nimport { Observable } from 'rxjs';\n\nimport { SiBreadcrumbDefaultResolverService } from './si-breadcrumb-default-resolver.service';\n\n/**\n * Defines the title and link of a breadcrumb item in a\n * route configuration and compatible to {@link BreadcrumbItem}.\n *\n * ```\n * {\n *   path: 'user-manual',\n *   component: UserManualComponent,\n *   data: {\n *     siBreadcrumb: [\n *       { title: 'USER_MANUAL.HEADING', link: '/main/user-manual' }\n *     ]\n *   }\n * }\n * ```\n *\n */\nexport interface BreadcrumbRouterLink {\n  /**\n   * Angular router link for the breadcrumb item.\n   */\n  link?: string;\n  /**\n   * Breadcrumb item title that will be translated.\n   */\n  title: TranslatableString;\n}\n\n/**\n * Service interface to resolve the breadcrumb items on the base of a route.\n */\nexport interface SiBreadcrumbResolverService {\n  resolve(route: ActivatedRouteSnapshot): BreadcrumbItem[] | Observable<BreadcrumbItem[]>;\n}\n\n/**\n * Injection token to provide your own `SiBreadcrumbResolverService` implementation.\n *\n * ```\n * providers: [{\n *   provide: SI_BREADCRUMB_RESOLVER_SERVICE,\n *   useClass: CustomBreadcrumbResolverService,\n * }]\n * ```\n */\nexport const SI_BREADCRUMB_RESOLVER_SERVICE = new InjectionToken<SiBreadcrumbResolverService>(\n  'si.breadcrumb.resolver.service',\n  { providedIn: 'root', factory: () => inject(SiBreadcrumbDefaultResolverService) }\n);\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Component, inject, input, OnDestroy, OnInit, signal } from '@angular/core';\nimport { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';\nimport { BreadcrumbItem, SiBreadcrumbComponent } from '@siemens/element-ng/breadcrumb';\nimport { Observable, Subject, Subscription } from 'rxjs';\nimport { filter, takeUntil } from 'rxjs/operators';\n\nimport { SI_BREADCRUMB_RESOLVER_SERVICE } from './si-breadcrumb-router.model';\n\n@Component({\n  selector: 'si-breadcrumb-router',\n  imports: [SiBreadcrumbComponent],\n  templateUrl: './si-breadcrumb-router.component.html'\n})\nexport class SiBreadcrumbRouterComponent implements OnInit, OnDestroy {\n  /**\n   * Aria label for the main breadcrumb navigation. Needed for a11y.\n   *\n   * @defaultValue 'breadcrumb'\n   */\n  readonly ariaLabel = input('breadcrumb');\n\n  protected readonly items = signal<BreadcrumbItem[]>([]);\n\n  private readonly currentCalcUrl = signal<string | undefined>(undefined);\n  private nextRoute = new Subject<void>();\n  private resolverService = inject(SI_BREADCRUMB_RESOLVER_SERVICE);\n  private route? = inject(ActivatedRoute, { optional: true });\n  private router? = inject(Router, { optional: true });\n  private routerSubscription?: Subscription;\n\n  ngOnInit(): void {\n    this.checkItems();\n  }\n\n  ngOnDestroy(): void {\n    this.routerSubscription?.unsubscribe();\n    this.nextRoute.next();\n  }\n\n  private checkItems(): void {\n    if (!this.routerSubscription && this.route && this.router) {\n      this.routerSubscription = this.router.events\n        .pipe(filter(e => e instanceof NavigationEnd))\n        .subscribe(navigationEvent => {\n          const event = navigationEvent as NavigationEnd;\n          // Get the new url\n          const newUrl = event.urlAfterRedirects || event.url;\n          // Only update when url differs from previous url\n\n          if (this.currentCalcUrl() !== newUrl) {\n            this.currentCalcUrl.set(newUrl);\n            this.nextRoute.next();\n            this.computePath();\n          }\n        });\n\n      if (this.router.navigated) {\n        this.currentCalcUrl.set(this.router.url);\n        this.computePath();\n      }\n    }\n  }\n\n  private computePath(): void {\n    if (!this.route || !this.resolverService) {\n      return;\n    }\n\n    // Get a snapshot of the all current activate routes\n    const pathFromRoot: ActivatedRouteSnapshot[] = this.route.snapshot.pathFromRoot;\n\n    // Find the child/leaf route that fits to the url\n    const route = this.findRouteWithUrl(pathFromRoot, this.currentCalcUrl()?.split('?')[0] ?? '');\n\n    if (route) {\n      // Workaround to fix a bug that the route is null, in some cases\n      const links$ = this.resolverService.resolve(route);\n      if (links$ instanceof Observable) {\n        links$.pipe(takeUntil(this.nextRoute)).subscribe(links => {\n          this.items.set([{ link: '/', title: '/' }, ...links]);\n        });\n      } else {\n        this.items.set([{ link: '/', title: '/' }, ...links$]);\n      }\n    }\n  }\n\n  private findRouteWithUrl(\n    routes: ActivatedRouteSnapshot[],\n    url: string\n  ): ActivatedRouteSnapshot | null {\n    let result: ActivatedRouteSnapshot | null = null;\n    for (const route of routes) {\n      const routeUrl = this.getUrl(route);\n      if (url === routeUrl && !route.data?.siBreadcrumbIgnore) {\n        result = route;\n        break;\n      } else {\n        result = this.findRouteWithUrl(route.children, url);\n        if (result != null) {\n          break;\n        }\n      }\n    }\n    return result;\n  }\n\n  private getUrl(route: ActivatedRouteSnapshot): string {\n    let url = '';\n    for (const routeSegment of route.pathFromRoot) {\n      const segmentUrl = routeSegment.url.map(o => o.toString()).join('/');\n      if (!url.endsWith('/')) {\n        url = url + '/';\n      }\n      url = url + segmentUrl;\n    }\n    return url;\n  }\n}\n","<si-breadcrumb [items]=\"items()\" [ariaLabel]=\"ariaLabel()\" />\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiBreadcrumbRouterComponent } from './si-breadcrumb-router.component';\n\n@NgModule({\n  imports: [SiBreadcrumbRouterComponent],\n  exports: [SiBreadcrumbRouterComponent]\n})\nexport class SiBreadcrumbRouterModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-breadcrumb-default-resolver.service';\nexport * from './si-breadcrumb-router.component';\nexport * from './si-breadcrumb-router.model';\nexport * from './si-breadcrumb-router.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"siemens-element-ng-breadcrumb-router.mjs","sources":["../../../../projects/element-ng/breadcrumb-router/si-breadcrumb-default-resolver.service.ts","../../../../projects/element-ng/breadcrumb-router/si-breadcrumb-router.model.ts","../../../../projects/element-ng/breadcrumb-router/si-breadcrumb-router.component.ts","../../../../projects/element-ng/breadcrumb-router/si-breadcrumb-router.component.html","../../../../projects/element-ng/breadcrumb-router/si-breadcrumb-router.module.ts","../../../../projects/element-ng/breadcrumb-router/index.ts","../../../../projects/element-ng/breadcrumb-router/siemens-element-ng-breadcrumb-router.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { inject, Injectable, LOCALE_ID } from '@angular/core';\nimport { ActivatedRouteSnapshot } from '@angular/router';\nimport { BreadcrumbItem } from '@siemens/element-ng/breadcrumb';\nimport { Observable } from 'rxjs';\n\nimport { BreadcrumbRouterLink, SiBreadcrumbResolverService } from './si-breadcrumb-router.model';\n\n@Injectable({ providedIn: 'root' })\nexport class SiBreadcrumbDefaultResolverService implements SiBreadcrumbResolverService {\n  private locale = inject(LOCALE_ID).toString();\n\n  /**\n   * Method which resolves the route and creates the breadcrumb items from it.\n   * Is called by the `si-breadcrumb-router-component` but can also be called manually in inheritance patterns.\n   */\n  resolve(route: ActivatedRouteSnapshot): BreadcrumbItem[] | Observable<BreadcrumbItem[]> {\n    if (route.data.siBreadcrumb) {\n      return this.resolveCustomRoutePart(route)!;\n    } else {\n      return this.resolveDefault(route);\n    }\n  }\n\n  private resolveCustomRoutePart(route: ActivatedRouteSnapshot): BreadcrumbItem[] | undefined {\n    if (route.data.siBreadcrumb) {\n      const rawLinks = route.data.siBreadcrumb as BreadcrumbRouterLink[];\n      return rawLinks.map(\n        rl =>\n          ({\n            title: this.calculateName(route, rl.title),\n            link: rl.link ? this.calculateUrl(route, rl.link) : route.fragment!\n          }) as BreadcrumbItem\n      );\n    }\n    return;\n  }\n\n  private resolveDefault(route: ActivatedRouteSnapshot | null): BreadcrumbItem[] {\n    const links: BreadcrumbItem[] = [];\n    let currRoute = route;\n    while (currRoute != null) {\n      if (currRoute.data.siBreadcrumb) {\n        links.unshift(...this.resolveCustomRoutePart(currRoute)!);\n      } else if (currRoute.url.length > 0) {\n        const routeUrl: string = this.getUrl(currRoute);\n        const routeName: string = this.getName(currRoute);\n        let link: BreadcrumbItem;\n        if (links.length === 0) {\n          link = { title: routeName } as BreadcrumbItem;\n        } else {\n          link = { title: routeName, link: routeUrl } as BreadcrumbItem;\n        }\n        links.unshift(link);\n      }\n      currRoute = currRoute.parent;\n    }\n    return links;\n  }\n\n  private getUrl(route: ActivatedRouteSnapshot): string {\n    const parent = route.parent;\n    let url: string;\n    if (parent != null) {\n      url = this.getUrl(parent);\n    } else {\n      url = '';\n    }\n    const currentRouteUrl = route.url.map(o => o.toString()).join('/');\n    if (!url.endsWith('/')) {\n      url = url + '/';\n    }\n    url = url + currentRouteUrl;\n    return url;\n  }\n\n  private getName(route: ActivatedRouteSnapshot): string {\n    let name: string = route.data.title ?? route.url[0].path;\n    if (typeof name === 'object') {\n      name = name[this.locale];\n    }\n\n    return this.calculateName(route, name);\n  }\n\n  private calculateName(route: ActivatedRouteSnapshot, baseName: string): string {\n    return this.calculate(route, baseName, /{(\\w+)}/g);\n  }\n\n  private calculateUrl(route: ActivatedRouteSnapshot, baseName: string): string {\n    return this.calculate(route, baseName, /:(\\w+)\\/?/g, ':', '');\n  }\n\n  private calculate(\n    route: ActivatedRouteSnapshot,\n    base: string,\n    pattern: RegExp,\n    replaceStart = '{',\n    replaceEnd = '}'\n  ): string {\n    let name = base;\n    const values: string[] = [];\n\n    let finding: RegExpExecArray | null;\n    // tslint:disable-next-line:no-conditional-assignment\n    while ((finding = pattern.exec(name)) != null) {\n      values.push(finding[1]);\n    }\n\n    values.forEach(value => {\n      let replace = this.findParam(route, value);\n      if (route.data.replaceValues) {\n        replace = route.data.replaceValues[replace] ?? replace;\n      }\n      name = name.replace(`${replaceStart}${value}${replaceEnd}`, replace);\n    });\n\n    return name;\n  }\n\n  private findParam(route: ActivatedRouteSnapshot, paramKey: string): string {\n    return (\n      route.paramMap.get(paramKey) ??\n      (route.parent ? this.findParam(route.parent, paramKey) : paramKey)\n    );\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { inject, InjectionToken } from '@angular/core';\nimport { ActivatedRouteSnapshot } from '@angular/router';\nimport { BreadcrumbItem } from '@siemens/element-ng/breadcrumb';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\nimport { Observable } from 'rxjs';\n\nimport { SiBreadcrumbDefaultResolverService } from './si-breadcrumb-default-resolver.service';\n\n/**\n * Defines the title and link of a breadcrumb item in a\n * route configuration and compatible to {@link BreadcrumbItem}.\n *\n * ```\n * {\n *   path: 'user-manual',\n *   component: UserManualComponent,\n *   data: {\n *     siBreadcrumb: [\n *       { title: 'USER_MANUAL.HEADING', link: '/main/user-manual' }\n *     ]\n *   }\n * }\n * ```\n *\n */\nexport interface BreadcrumbRouterLink {\n  /**\n   * Angular router link for the breadcrumb item.\n   */\n  link?: string;\n  /**\n   * Breadcrumb item title that will be translated.\n   */\n  title: TranslatableString;\n}\n\n/**\n * Service interface to resolve the breadcrumb items on the base of a route.\n */\nexport interface SiBreadcrumbResolverService {\n  resolve(route: ActivatedRouteSnapshot): BreadcrumbItem[] | Observable<BreadcrumbItem[]>;\n}\n\n/**\n * Injection token to provide your own `SiBreadcrumbResolverService` implementation.\n *\n * ```\n * providers: [{\n *   provide: SI_BREADCRUMB_RESOLVER_SERVICE,\n *   useClass: CustomBreadcrumbResolverService,\n * }]\n * ```\n */\nexport const SI_BREADCRUMB_RESOLVER_SERVICE = new InjectionToken<SiBreadcrumbResolverService>(\n  'si.breadcrumb.resolver.service',\n  { providedIn: 'root', factory: () => inject(SiBreadcrumbDefaultResolverService) }\n);\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Component, inject, input, OnDestroy, OnInit, signal } from '@angular/core';\nimport { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';\nimport { BreadcrumbItem, SiBreadcrumbComponent } from '@siemens/element-ng/breadcrumb';\nimport { t } from '@siemens/element-translate-ng/translate';\nimport { Observable, Subject, Subscription } from 'rxjs';\nimport { filter, takeUntil } from 'rxjs/operators';\n\nimport { SI_BREADCRUMB_RESOLVER_SERVICE } from './si-breadcrumb-router.model';\n\n@Component({\n  selector: 'si-breadcrumb-router',\n  imports: [SiBreadcrumbComponent],\n  templateUrl: './si-breadcrumb-router.component.html'\n})\nexport class SiBreadcrumbRouterComponent implements OnInit, OnDestroy {\n  /**\n   * Aria label for the main breadcrumb navigation. Needed for a11y.\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_BREADCRUMB_ROUTER_LABEL:breadcrumb`)\n   * ```\n   */\n  readonly ariaLabel = input(t(() => $localize`:@@SI_BREADCRUMB_ROUTER_LABEL:breadcrumb`));\n\n  protected readonly items = signal<BreadcrumbItem[]>([]);\n\n  private readonly currentCalcUrl = signal<string | undefined>(undefined);\n  private nextRoute = new Subject<void>();\n  private resolverService = inject(SI_BREADCRUMB_RESOLVER_SERVICE);\n  private route? = inject(ActivatedRoute, { optional: true });\n  private router? = inject(Router, { optional: true });\n  private routerSubscription?: Subscription;\n\n  ngOnInit(): void {\n    this.checkItems();\n  }\n\n  ngOnDestroy(): void {\n    this.routerSubscription?.unsubscribe();\n    this.nextRoute.next();\n  }\n\n  private checkItems(): void {\n    if (!this.routerSubscription && this.route && this.router) {\n      this.routerSubscription = this.router.events\n        .pipe(filter(e => e instanceof NavigationEnd))\n        .subscribe(navigationEvent => {\n          const event = navigationEvent as NavigationEnd;\n          // Get the new url\n          const newUrl = event.urlAfterRedirects || event.url;\n          // Only update when url differs from previous url\n\n          if (this.currentCalcUrl() !== newUrl) {\n            this.currentCalcUrl.set(newUrl);\n            this.nextRoute.next();\n            this.computePath();\n          }\n        });\n\n      if (this.router.navigated) {\n        this.currentCalcUrl.set(this.router.url);\n        this.computePath();\n      }\n    }\n  }\n\n  private computePath(): void {\n    if (!this.route || !this.resolverService) {\n      return;\n    }\n\n    // Get a snapshot of the all current activate routes\n    const pathFromRoot: ActivatedRouteSnapshot[] = this.route.snapshot.pathFromRoot;\n\n    // Find the child/leaf route that fits to the url\n    const route = this.findRouteWithUrl(pathFromRoot, this.currentCalcUrl()?.split('?')[0] ?? '');\n\n    if (route) {\n      // Workaround to fix a bug that the route is null, in some cases\n      const links$ = this.resolverService.resolve(route);\n      if (links$ instanceof Observable) {\n        links$.pipe(takeUntil(this.nextRoute)).subscribe(links => {\n          this.items.set([{ link: '/', title: '/' }, ...links]);\n        });\n      } else {\n        this.items.set([{ link: '/', title: '/' }, ...links$]);\n      }\n    }\n  }\n\n  private findRouteWithUrl(\n    routes: ActivatedRouteSnapshot[],\n    url: string\n  ): ActivatedRouteSnapshot | null {\n    let result: ActivatedRouteSnapshot | null = null;\n    for (const route of routes) {\n      const routeUrl = this.getUrl(route);\n      if (url === routeUrl && !route.data?.siBreadcrumbIgnore) {\n        result = route;\n        break;\n      } else {\n        result = this.findRouteWithUrl(route.children, url);\n        if (result != null) {\n          break;\n        }\n      }\n    }\n    return result;\n  }\n\n  private getUrl(route: ActivatedRouteSnapshot): string {\n    let url = '';\n    for (const routeSegment of route.pathFromRoot) {\n      const segmentUrl = routeSegment.url.map(o => o.toString()).join('/');\n      if (!url.endsWith('/')) {\n        url = url + '/';\n      }\n      url = url + segmentUrl;\n    }\n    return url;\n  }\n}\n","<si-breadcrumb [items]=\"items()\" [ariaLabel]=\"ariaLabel()\" />\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiBreadcrumbRouterComponent } from './si-breadcrumb-router.component';\n\n@NgModule({\n  imports: [SiBreadcrumbRouterComponent],\n  exports: [SiBreadcrumbRouterComponent]\n})\nexport class SiBreadcrumbRouterModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-breadcrumb-default-resolver.service';\nexport * from './si-breadcrumb-router.component';\nexport * from './si-breadcrumb-router.model';\nexport * from './si-breadcrumb-router.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/siemens-element-ng-chat-messages.mjs

@@ -1,7 +1,7 @@
 import { CdkMenuTrigger } from '@angular/cdk/menu';
 import * as i0 from '@angular/core';
 import { Directive, input, Component, viewChild, signal, effect, booleanAttribute, inject, output, PLATFORM_ID, model, computed } from '@angular/core';
-import { elementOptionsVertical, elementDocument, elementDelete, elementStopFilled, elementSendFilled, elementAttachment } from '@siemens/element-icons';
+import { elementOptionsVertical, elementDocument, elementStateClose, elementStopFilled, elementSendFilled, elementPlus, elementAttachment } from '@siemens/element-icons';
 import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
 import { SiMenuFactoryComponent } from '@siemens/element-ng/menu';
 import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
@@ -206,7 +206,7 @@ class SiAiMessageComponent {
      */
     secondaryActionsLabel = input(t(() => $localize `:@@SI_AI_MESSAGE.SECONDARY_ACTIONS:More actions`), ...(ngDevMode ? [{ debugName: "secondaryActionsLabel" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiAiMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiAiMessageComponent, isStandalone: true, selector: "si-ai-message", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, contentFormatter: { classPropertyName: "contentFormatter", publicName: "contentFormatter", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null }, secondaryActionsLabel: { classPropertyName: "secondaryActionsLabel", publicName: "secondaryActionsLabel", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "formattedContent", first: true, predicate: ["formattedContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<si-chat-message alignment=\"start\" actionsPosition=\"bottom\" [loading]=\"loading()\">\n  @if (content()) {\n    @let content = textContent();\n    @if (content) {\n      <span class=\"text-pre-wrap\">{{ content }}</span>\n    } @else {\n      <div #formattedContent> </div>\n    }\n  }\n\n  @if (actions().length > 0 || secondaryActions().length > 0) {\n    <div class=\"d-flex gap-4 ai-message-actions\" siChatMessageAction>\n      @for (action of actions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [disabled]=\"action.disabled\"\n          [attr.aria-label]=\"action.label | translate\"\n          (click)=\"action.action(actionParam(), action)\"\n        >\n          <si-icon [icon]=\"action.icon\" />\n        </button>\n      }\n\n      @if (secondaryActions().length > 0) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          [attr.title]=\"secondaryActionsLabel() | translate\"\n        >\n          <si-icon [icon]=\"icons.elementOptionsVertical\" />\n        </button>\n\n        <ng-template #secondaryActionsMenu>\n          <si-menu-factory [items]=\"secondaryActions()\" [actionParam]=\"actionParam()\" />\n        </ng-template>\n      }\n    </div>\n  }\n</si-chat-message>\n", styles: [":host{display:block}si-chat-message{--chat-message-bubble-bg: transparent;--chat-message-bubble-padding: 0;margin-block-end:-4px}.ai-message-actions{margin-block-start:8px}:host ::ng-deep si-loading-spinner{--loading-spinner-size: 1.5em}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: SiChatMessageComponent, selector: "si-chat-message", inputs: ["loading", "alignment", "actionsPosition"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "directive", type: SiChatMessageActionDirective, selector: "[siChatMessageAction]" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiAiMessageComponent, isStandalone: true, selector: "si-ai-message", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, contentFormatter: { classPropertyName: "contentFormatter", publicName: "contentFormatter", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null }, secondaryActionsLabel: { classPropertyName: "secondaryActionsLabel", publicName: "secondaryActionsLabel", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "formattedContent", first: true, predicate: ["formattedContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<si-chat-message alignment=\"start\" actionsPosition=\"bottom\" [loading]=\"loading()\">\n  @if (content()) {\n    @let content = textContent();\n    @if (content) {\n      <span class=\"text-pre-wrap\">{{ content }}</span>\n    } @else {\n      <div #formattedContent> </div>\n    }\n  }\n\n  @if (actions().length > 0 || secondaryActions().length > 0) {\n    <div class=\"btn-group ai-message-actions\" role=\"group\" siChatMessageAction>\n      @for (action of actions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [disabled]=\"action.disabled\"\n          [attr.aria-label]=\"action.label | translate\"\n          (click)=\"action.action(actionParam(), action)\"\n        >\n          <si-icon [icon]=\"action.icon\" />\n        </button>\n      }\n\n      @if (secondaryActions().length > 0) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          [attr.title]=\"secondaryActionsLabel() | translate\"\n        >\n          <si-icon [icon]=\"icons.elementOptionsVertical\" />\n        </button>\n\n        <ng-template #secondaryActionsMenu>\n          <si-menu-factory [items]=\"secondaryActions()\" [actionParam]=\"actionParam()\" />\n        </ng-template>\n      }\n    </div>\n  }\n</si-chat-message>\n", styles: [":host{display:block}si-chat-message{--chat-message-bubble-bg: transparent;--chat-message-bubble-padding: 0;margin-block-end:-4px}.ai-message-actions{margin-block-start:8px}:host ::ng-deep si-loading-spinner{--loading-spinner-size: 1.5em}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: SiChatMessageComponent, selector: "si-chat-message", inputs: ["loading", "alignment", "actionsPosition"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "directive", type: SiChatMessageActionDirective, selector: "[siChatMessageAction]" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiAiMessageComponent, decorators: [{
             type: Component,
@@ -217,7 +217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiMenuFactoryComponent,
                         SiChatMessageActionDirective,
                         SiTranslatePipe
-                    ], template: "<si-chat-message alignment=\"start\" actionsPosition=\"bottom\" [loading]=\"loading()\">\n  @if (content()) {\n    @let content = textContent();\n    @if (content) {\n      <span class=\"text-pre-wrap\">{{ content }}</span>\n    } @else {\n      <div #formattedContent> </div>\n    }\n  }\n\n  @if (actions().length > 0 || secondaryActions().length > 0) {\n    <div class=\"d-flex gap-4 ai-message-actions\" siChatMessageAction>\n      @for (action of actions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [disabled]=\"action.disabled\"\n          [attr.aria-label]=\"action.label | translate\"\n          (click)=\"action.action(actionParam(), action)\"\n        >\n          <si-icon [icon]=\"action.icon\" />\n        </button>\n      }\n\n      @if (secondaryActions().length > 0) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          [attr.title]=\"secondaryActionsLabel() | translate\"\n        >\n          <si-icon [icon]=\"icons.elementOptionsVertical\" />\n        </button>\n\n        <ng-template #secondaryActionsMenu>\n          <si-menu-factory [items]=\"secondaryActions()\" [actionParam]=\"actionParam()\" />\n        </ng-template>\n      }\n    </div>\n  }\n</si-chat-message>\n", styles: [":host{display:block}si-chat-message{--chat-message-bubble-bg: transparent;--chat-message-bubble-padding: 0;margin-block-end:-4px}.ai-message-actions{margin-block-start:8px}:host ::ng-deep si-loading-spinner{--loading-spinner-size: 1.5em}\n"] }]
+                    ], template: "<si-chat-message alignment=\"start\" actionsPosition=\"bottom\" [loading]=\"loading()\">\n  @if (content()) {\n    @let content = textContent();\n    @if (content) {\n      <span class=\"text-pre-wrap\">{{ content }}</span>\n    } @else {\n      <div #formattedContent> </div>\n    }\n  }\n\n  @if (actions().length > 0 || secondaryActions().length > 0) {\n    <div class=\"btn-group ai-message-actions\" role=\"group\" siChatMessageAction>\n      @for (action of actions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [disabled]=\"action.disabled\"\n          [attr.aria-label]=\"action.label | translate\"\n          (click)=\"action.action(actionParam(), action)\"\n        >\n          <si-icon [icon]=\"action.icon\" />\n        </button>\n      }\n\n      @if (secondaryActions().length > 0) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          [attr.title]=\"secondaryActionsLabel() | translate\"\n        >\n          <si-icon [icon]=\"icons.elementOptionsVertical\" />\n        </button>\n\n        <ng-template #secondaryActionsMenu>\n          <si-menu-factory [items]=\"secondaryActions()\" [actionParam]=\"actionParam()\" />\n        </ng-template>\n      }\n    </div>\n  }\n</si-chat-message>\n", styles: [":host{display:block}si-chat-message{--chat-message-bubble-bg: transparent;--chat-message-bubble-padding: 0;margin-block-end:-4px}.ai-message-actions{margin-block-start:8px}:host ::ng-deep si-loading-spinner{--loading-spinner-size: 1.5em}\n"] }]
         }], ctorParameters: () => [], propDecorators: { formattedContent: [{ type: i0.ViewChild, args: ['formattedContent', { isSignal: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], contentFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentFormatter", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], secondaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActions", required: false }] }], actionParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionParam", required: false }] }], secondaryActionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActionsLabel", required: false }] }] } });
 
 /**
@@ -248,7 +248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  */
 class SiAttachmentListComponent {
     modalService = inject(SiModalService);
-    icons = addIcons({ elementDelete, elementDocument });
+    icons = addIcons({ elementStateClose, elementDocument });
     /**
      * List of attachments to display
      * @defaultValue []
@@ -299,11 +299,11 @@ class SiAttachmentListComponent {
         return this.icons.elementDocument;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiAttachmentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiAttachmentListComponent, isStandalone: true, selector: "si-attachment-list", inputs: { attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"d-flex flex-wrap gap-4\" [class.justify-content-end]=\"alignment() === 'end'\">\n  @for (attachment of attachments(); track $index) {\n    <div class=\"attachment-item d-flex align-items-stretch\" role=\"group\">\n      @if (attachment.previewTemplate) {\n        <button\n          type=\"button\"\n          class=\"attachment-main focus-inside d-flex align-items-center flex-grow-1 min-width-0\"\n          [attr.title]=\"attachment.name\"\n          [attr.aria-label]=\"attachment.name\"\n          (click)=\"openPreview($event, attachment)\"\n          (keydown.enter)=\"openPreview($event, attachment)\"\n          (keydown.space)=\"openPreview($event, attachment)\"\n        >\n          <si-icon\n            class=\"attachment-icon icon flex-shrink-0 mx-1\"\n            [icon]=\"getFileIcon(attachment.name)\"\n          />\n          <div class=\"attachment-info flex-grow-1 min-width-0\">\n            <span\n              class=\"attachment-name me-4 text-truncate si-body-2 d-block\"\n              [title]=\"attachment.name\"\n            >\n              {{ attachment.name }}\n            </span>\n          </div>\n        </button>\n      } @else {\n        <div class=\"attachment-main--static d-flex align-items-center flex-grow-1 min-width-0\">\n          <si-icon\n            class=\"attachment-icon icon flex-shrink-0 mx-1\"\n            [icon]=\"getFileIcon(attachment.name)\"\n          />\n          <div class=\"attachment-info flex-grow-1 min-width-0\">\n            <span\n              class=\"attachment-name me-4 text-truncate si-body-2 d-block\"\n              [title]=\"attachment.name\"\n            >\n              {{ attachment.name }}\n            </span>\n          </div>\n        </div>\n      }\n\n      @if (removable()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon expand-button flex-shrink-0 ms-auto align-self-center focus-inside\"\n          [attr.aria-label]=\"(removeLabel() | translate) + ' ' + attachment.name\"\n          (click)=\"remove.emit(attachment); $event.stopPropagation()\"\n        >\n          <si-icon class=\"icon\" [icon]=\"icons.elementDelete\" />\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--attachment-list-bg: var(--element-base-1-hover);--attachment-name-color: var(--element-text-primary)}.attachment-item{border-radius:var(--element-radius-2);overflow:hidden;background-color:var(--attachment-list-bg);color:var(--attachment-name-color)}.attachment-main{appearance:none;border:0;background:none;padding:0;margin:0;inline-size:100%;text-align:inherit;color:inherit;cursor:pointer}.attachment-icon{display:flex;align-items:center;justify-content:center}.attachment-info{display:flex;flex-direction:column;gap:2px;min-inline-size:0}.attachment-info .attachment-name{line-height:1.2}.attachment-info .attachment-size{line-height:1}.expand-button{border-radius:0}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiAttachmentListComponent, isStandalone: true, selector: "si-attachment-list", inputs: { attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"d-flex flex-wrap gap-4\" [class.justify-content-end]=\"alignment() === 'end'\">\n  @for (attachment of attachments(); track $index) {\n    <div class=\"attachment-item d-flex align-items-stretch\" role=\"group\">\n      @if (attachment.previewTemplate) {\n        <button\n          type=\"button\"\n          class=\"attachment-main focus-inside d-flex align-items-center flex-grow-1 min-width-0\"\n          [attr.title]=\"attachment.name\"\n          [attr.aria-label]=\"attachment.name\"\n          (click)=\"openPreview($event, attachment)\"\n          (keydown.enter)=\"openPreview($event, attachment)\"\n          (keydown.space)=\"openPreview($event, attachment)\"\n        >\n          <si-icon\n            class=\"attachment-icon icon flex-shrink-0 m-2\"\n            [icon]=\"getFileIcon(attachment.name)\"\n          />\n          <div class=\"attachment-info flex-grow-1 min-width-0\">\n            <span\n              class=\"attachment-name me-4 text-truncate si-body-2 d-block\"\n              [title]=\"attachment.name\"\n            >\n              {{ attachment.name }}\n            </span>\n          </div>\n        </button>\n      } @else {\n        <div class=\"attachment-main--static d-flex align-items-center flex-grow-1 min-width-0\">\n          <si-icon\n            class=\"attachment-icon icon flex-shrink-0 m-2\"\n            [icon]=\"getFileIcon(attachment.name)\"\n          />\n          <div class=\"attachment-info flex-grow-1 min-width-0\">\n            <span\n              class=\"attachment-name me-4 text-truncate si-body-2 d-block\"\n              [title]=\"attachment.name\"\n            >\n              {{ attachment.name }}\n            </span>\n          </div>\n        </div>\n      }\n\n      @if (removable()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-sm btn-icon expand-button flex-shrink-0 ms-auto align-self-center focus-inside m-2\"\n          [attr.aria-label]=\"(removeLabel() | translate) + ' ' + attachment.name\"\n          (click)=\"remove.emit(attachment); $event.stopPropagation()\"\n        >\n          <si-icon class=\"icon\" [icon]=\"icons.elementStateClose\" />\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--attachment-list-bg: transparent;--attachment-name-color: var(--element-text-secondary)}.attachment-item{border-radius:var(--element-radius-2);overflow:hidden;background-color:var(--attachment-list-bg);color:var(--attachment-name-color);border:1px solid var(--element-ui-4)}.attachment-main{appearance:none;border:0;background:none;padding:0;margin:0;inline-size:100%;text-align:inherit;color:inherit;cursor:pointer}.attachment-icon{display:flex;align-items:center;justify-content:center;color:var(--element-text-primary)}.attachment-info{display:flex;flex-direction:column;gap:2px;min-inline-size:0}.attachment-info .attachment-name{line-height:1.2}.attachment-info .attachment-size{line-height:1}.expand-button{border-radius:var(--element-radius-2)}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiAttachmentListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-attachment-list', imports: [SiIconComponent, SiTranslatePipe], template: "<div class=\"d-flex flex-wrap gap-4\" [class.justify-content-end]=\"alignment() === 'end'\">\n  @for (attachment of attachments(); track $index) {\n    <div class=\"attachment-item d-flex align-items-stretch\" role=\"group\">\n      @if (attachment.previewTemplate) {\n        <button\n          type=\"button\"\n          class=\"attachment-main focus-inside d-flex align-items-center flex-grow-1 min-width-0\"\n          [attr.title]=\"attachment.name\"\n          [attr.aria-label]=\"attachment.name\"\n          (click)=\"openPreview($event, attachment)\"\n          (keydown.enter)=\"openPreview($event, attachment)\"\n          (keydown.space)=\"openPreview($event, attachment)\"\n        >\n          <si-icon\n            class=\"attachment-icon icon flex-shrink-0 mx-1\"\n            [icon]=\"getFileIcon(attachment.name)\"\n          />\n          <div class=\"attachment-info flex-grow-1 min-width-0\">\n            <span\n              class=\"attachment-name me-4 text-truncate si-body-2 d-block\"\n              [title]=\"attachment.name\"\n            >\n              {{ attachment.name }}\n            </span>\n          </div>\n        </button>\n      } @else {\n        <div class=\"attachment-main--static d-flex align-items-center flex-grow-1 min-width-0\">\n          <si-icon\n            class=\"attachment-icon icon flex-shrink-0 mx-1\"\n            [icon]=\"getFileIcon(attachment.name)\"\n          />\n          <div class=\"attachment-info flex-grow-1 min-width-0\">\n            <span\n              class=\"attachment-name me-4 text-truncate si-body-2 d-block\"\n              [title]=\"attachment.name\"\n            >\n              {{ attachment.name }}\n            </span>\n          </div>\n        </div>\n      }\n\n      @if (removable()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon expand-button flex-shrink-0 ms-auto align-self-center focus-inside\"\n          [attr.aria-label]=\"(removeLabel() | translate) + ' ' + attachment.name\"\n          (click)=\"remove.emit(attachment); $event.stopPropagation()\"\n        >\n          <si-icon class=\"icon\" [icon]=\"icons.elementDelete\" />\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--attachment-list-bg: var(--element-base-1-hover);--attachment-name-color: var(--element-text-primary)}.attachment-item{border-radius:var(--element-radius-2);overflow:hidden;background-color:var(--attachment-list-bg);color:var(--attachment-name-color)}.attachment-main{appearance:none;border:0;background:none;padding:0;margin:0;inline-size:100%;text-align:inherit;color:inherit;cursor:pointer}.attachment-icon{display:flex;align-items:center;justify-content:center}.attachment-info{display:flex;flex-direction:column;gap:2px;min-inline-size:0}.attachment-info .attachment-name{line-height:1.2}.attachment-info .attachment-size{line-height:1}.expand-button{border-radius:0}\n"] }]
+            args: [{ selector: 'si-attachment-list', imports: [SiIconComponent, SiTranslatePipe], template: "<div class=\"d-flex flex-wrap gap-4\" [class.justify-content-end]=\"alignment() === 'end'\">\n  @for (attachment of attachments(); track $index) {\n    <div class=\"attachment-item d-flex align-items-stretch\" role=\"group\">\n      @if (attachment.previewTemplate) {\n        <button\n          type=\"button\"\n          class=\"attachment-main focus-inside d-flex align-items-center flex-grow-1 min-width-0\"\n          [attr.title]=\"attachment.name\"\n          [attr.aria-label]=\"attachment.name\"\n          (click)=\"openPreview($event, attachment)\"\n          (keydown.enter)=\"openPreview($event, attachment)\"\n          (keydown.space)=\"openPreview($event, attachment)\"\n        >\n          <si-icon\n            class=\"attachment-icon icon flex-shrink-0 m-2\"\n            [icon]=\"getFileIcon(attachment.name)\"\n          />\n          <div class=\"attachment-info flex-grow-1 min-width-0\">\n            <span\n              class=\"attachment-name me-4 text-truncate si-body-2 d-block\"\n              [title]=\"attachment.name\"\n            >\n              {{ attachment.name }}\n            </span>\n          </div>\n        </button>\n      } @else {\n        <div class=\"attachment-main--static d-flex align-items-center flex-grow-1 min-width-0\">\n          <si-icon\n            class=\"attachment-icon icon flex-shrink-0 m-2\"\n            [icon]=\"getFileIcon(attachment.name)\"\n          />\n          <div class=\"attachment-info flex-grow-1 min-width-0\">\n            <span\n              class=\"attachment-name me-4 text-truncate si-body-2 d-block\"\n              [title]=\"attachment.name\"\n            >\n              {{ attachment.name }}\n            </span>\n          </div>\n        </div>\n      }\n\n      @if (removable()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-sm btn-icon expand-button flex-shrink-0 ms-auto align-self-center focus-inside m-2\"\n          [attr.aria-label]=\"(removeLabel() | translate) + ' ' + attachment.name\"\n          (click)=\"remove.emit(attachment); $event.stopPropagation()\"\n        >\n          <si-icon class=\"icon\" [icon]=\"icons.elementStateClose\" />\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--attachment-list-bg: transparent;--attachment-name-color: var(--element-text-secondary)}.attachment-item{border-radius:var(--element-radius-2);overflow:hidden;background-color:var(--attachment-list-bg);color:var(--attachment-name-color);border:1px solid var(--element-ui-4)}.attachment-main{appearance:none;border:0;background:none;padding:0;margin:0;inline-size:100%;text-align:inherit;color:inherit;cursor:pointer}.attachment-icon{display:flex;align-items:center;justify-content:center;color:var(--element-text-primary)}.attachment-info{display:flex;flex-direction:column;gap:2px;min-inline-size:0}.attachment-info .attachment-name{line-height:1.2}.attachment-info .attachment-size{line-height:1}.expand-button{border-radius:var(--element-radius-2)}\n"] }]
         }], propDecorators: { attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }] } });
 
 /**
@@ -476,14 +476,14 @@ class SiChatContainerComponent {
         container?.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiChatContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: SiChatContainerComponent, isStandalone: true, selector: "si-chat-container", inputs: { colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, noAutoScroll: { classPropertyName: "noAutoScroll", publicName: "noAutoScroll", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "colorVariant()" }, classAttribute: "d-flex si-layout-inner flex-grow-1 flex-column h-100 w-100" }, viewQueries: [{ propertyName: "messagesContainer", first: true, predicate: ["messagesContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"chat-container d-flex flex-column flex-grow-1 px-6 px-md-9 py-6 w-100\">\n  <div\n    #messagesContainer\n    class=\"messages-container d-flex flex-column flex-grow-1 w-100 align-self-center\"\n    tabindex=\"0\"\n    (scroll)=\"onScroll()\"\n  >\n    <ng-content />\n  </div>\n\n  <div class=\"chat-input-area py-3 pt-0 mt-6 d-flex flex-column align-items-center\">\n    <ng-content select=\"si-inline-notification\" />\n    <ng-content select=\"si-chat-input,[siChatContainerInput]\" />\n  </div>\n</div>\n", styles: [":host{overflow-y:hidden;overflow-x:visible}:host.base-0{background-color:var(--element-base-0)}:host.base-1{background-color:var(--element-base-1)}.chat-container.initialized{scroll-behavior:smooth}::ng-deep .chat-container:has(si-ai-welcome-screen){inline-size:100%;padding-inline-start:0!important;padding-inline-end:0!important}::ng-deep .chat-container:has(si-ai-welcome-screen) .chat-input-area,::ng-deep .chat-container:has(si-ai-welcome-screen) si-ai-welcome-screen{padding-inline-start:16px;padding-inline-end:16px}.chat-container{min-block-size:0;overflow-y:auto;overflow-x:visible}.messages-container{overflow-y:auto;overflow-x:visible;min-block-size:5rem;gap:40px}.messages-container ::ng-deep si-user-message:not(.last){margin-block-end:-40px}::ng-deep .messages-container:not(:has(si-ai-welcome-screen)){max-inline-size:720px}::ng-deep .messages-container:has(si-ai-welcome-screen){inline-size:100%}.chat-input-area{justify-self:flex-end;align-self:center;overflow:visible;inline-size:100%}.chat-input-area>::ng-deep *{max-inline-size:720px}::ng-deep .chat-input-area:empty:not(:has(si-inline-notification)),::ng-deep .chat-input-area:has([sichatcontainerinput]:empty):not(:has(si-inline-notification)){display:none!important}.chat-input-area:empty ::ng-deep>si-inline-notification,.chat-input-area:empty ::ng-deep *>si-inline-notification,.chat-input-area:has([sichatcontainerinput]:empty) ::ng-deep>si-inline-notification,.chat-input-area:has([sichatcontainerinput]:empty) ::ng-deep *>si-inline-notification{margin-block-end:0!important}.chat-container:has(.messages-container:not(:empty)) .messages-empty-state{display:none!important}:host-context(.si-container-xs,.si-container-sm) ::ng-deep si-inline-notification .alert,:host-context(.si-container-xs,.si-container-sm) ::ng-deep si-inline-notification .alert-link{font-size:.875rem}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: SiChatContainerComponent, isStandalone: true, selector: "si-chat-container", inputs: { colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, noAutoScroll: { classPropertyName: "noAutoScroll", publicName: "noAutoScroll", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "colorVariant()" }, classAttribute: "d-flex si-layout-inner flex-grow-1 flex-column h-100 w-100" }, viewQueries: [{ propertyName: "messagesContainer", first: true, predicate: ["messagesContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"chat-container d-flex flex-column flex-grow-1 px-6 px-md-9 py-6 w-100\">\n  <div\n    #messagesContainer\n    class=\"messages-container d-flex flex-column flex-grow-1 w-100 align-self-center\"\n    tabindex=\"0\"\n    (scroll)=\"onScroll()\"\n  >\n    <ng-content />\n  </div>\n\n  <div class=\"chat-input-area py-3 pt-0 mt-6 d-flex flex-column align-items-center\">\n    <ng-content select=\"si-inline-notification\" />\n    <ng-content select=\"si-chat-input,[siChatContainerInput]\" />\n  </div>\n</div>\n", styles: [":host{overflow-y:hidden;overflow-x:visible}:host.base-0{background-color:var(--element-base-0)}:host.base-1{background-color:var(--element-base-1)}.chat-container.initialized{scroll-behavior:smooth}::ng-deep .chat-container:has(si-ai-welcome-screen){inline-size:100%;padding-inline-start:0!important;padding-inline-end:0!important}::ng-deep .chat-container:has(si-ai-welcome-screen) .chat-input-area,::ng-deep .chat-container:has(si-ai-welcome-screen) si-ai-welcome-screen{padding-inline-start:16px;padding-inline-end:16px}.chat-container{min-block-size:0;overflow-y:auto;overflow-x:visible}.messages-container{overflow-y:auto;overflow-x:visible;padding-inline:8px;min-block-size:5rem;gap:40px}.messages-container ::ng-deep si-user-message:not(.last){margin-block-end:-40px}::ng-deep .messages-container:not(:has(si-ai-welcome-screen)){max-inline-size:720px}::ng-deep .messages-container:has(si-ai-welcome-screen){inline-size:100%}.chat-input-area{justify-self:flex-end;align-self:center;overflow:visible;inline-size:100%}.chat-input-area>::ng-deep *{max-inline-size:720px}::ng-deep .chat-input-area:empty:not(:has(si-inline-notification)),::ng-deep .chat-input-area:has([sichatcontainerinput]:empty):not(:has(si-inline-notification)){display:none!important}.chat-input-area:empty ::ng-deep>si-inline-notification,.chat-input-area:empty ::ng-deep *>si-inline-notification,.chat-input-area:has([sichatcontainerinput]:empty) ::ng-deep>si-inline-notification,.chat-input-area:has([sichatcontainerinput]:empty) ::ng-deep *>si-inline-notification{margin-block-end:0!important}.chat-container:has(.messages-container:not(:empty)) .messages-empty-state{display:none!important}:host-context(.si-container-xs,.si-container-sm) ::ng-deep si-inline-notification .alert,:host-context(.si-container-xs,.si-container-sm) ::ng-deep si-inline-notification .alert-link{font-size:.875rem}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiChatContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-chat-container', host: {
                         class: 'd-flex si-layout-inner flex-grow-1 flex-column h-100 w-100',
                         '[class]': 'colorVariant()'
-                    }, template: "<div class=\"chat-container d-flex flex-column flex-grow-1 px-6 px-md-9 py-6 w-100\">\n  <div\n    #messagesContainer\n    class=\"messages-container d-flex flex-column flex-grow-1 w-100 align-self-center\"\n    tabindex=\"0\"\n    (scroll)=\"onScroll()\"\n  >\n    <ng-content />\n  </div>\n\n  <div class=\"chat-input-area py-3 pt-0 mt-6 d-flex flex-column align-items-center\">\n    <ng-content select=\"si-inline-notification\" />\n    <ng-content select=\"si-chat-input,[siChatContainerInput]\" />\n  </div>\n</div>\n", styles: [":host{overflow-y:hidden;overflow-x:visible}:host.base-0{background-color:var(--element-base-0)}:host.base-1{background-color:var(--element-base-1)}.chat-container.initialized{scroll-behavior:smooth}::ng-deep .chat-container:has(si-ai-welcome-screen){inline-size:100%;padding-inline-start:0!important;padding-inline-end:0!important}::ng-deep .chat-container:has(si-ai-welcome-screen) .chat-input-area,::ng-deep .chat-container:has(si-ai-welcome-screen) si-ai-welcome-screen{padding-inline-start:16px;padding-inline-end:16px}.chat-container{min-block-size:0;overflow-y:auto;overflow-x:visible}.messages-container{overflow-y:auto;overflow-x:visible;min-block-size:5rem;gap:40px}.messages-container ::ng-deep si-user-message:not(.last){margin-block-end:-40px}::ng-deep .messages-container:not(:has(si-ai-welcome-screen)){max-inline-size:720px}::ng-deep .messages-container:has(si-ai-welcome-screen){inline-size:100%}.chat-input-area{justify-self:flex-end;align-self:center;overflow:visible;inline-size:100%}.chat-input-area>::ng-deep *{max-inline-size:720px}::ng-deep .chat-input-area:empty:not(:has(si-inline-notification)),::ng-deep .chat-input-area:has([sichatcontainerinput]:empty):not(:has(si-inline-notification)){display:none!important}.chat-input-area:empty ::ng-deep>si-inline-notification,.chat-input-area:empty ::ng-deep *>si-inline-notification,.chat-input-area:has([sichatcontainerinput]:empty) ::ng-deep>si-inline-notification,.chat-input-area:has([sichatcontainerinput]:empty) ::ng-deep *>si-inline-notification{margin-block-end:0!important}.chat-container:has(.messages-container:not(:empty)) .messages-empty-state{display:none!important}:host-context(.si-container-xs,.si-container-sm) ::ng-deep si-inline-notification .alert,:host-context(.si-container-xs,.si-container-sm) ::ng-deep si-inline-notification .alert-link{font-size:.875rem}\n"] }]
+                    }, template: "<div class=\"chat-container d-flex flex-column flex-grow-1 px-6 px-md-9 py-6 w-100\">\n  <div\n    #messagesContainer\n    class=\"messages-container d-flex flex-column flex-grow-1 w-100 align-self-center\"\n    tabindex=\"0\"\n    (scroll)=\"onScroll()\"\n  >\n    <ng-content />\n  </div>\n\n  <div class=\"chat-input-area py-3 pt-0 mt-6 d-flex flex-column align-items-center\">\n    <ng-content select=\"si-inline-notification\" />\n    <ng-content select=\"si-chat-input,[siChatContainerInput]\" />\n  </div>\n</div>\n", styles: [":host{overflow-y:hidden;overflow-x:visible}:host.base-0{background-color:var(--element-base-0)}:host.base-1{background-color:var(--element-base-1)}.chat-container.initialized{scroll-behavior:smooth}::ng-deep .chat-container:has(si-ai-welcome-screen){inline-size:100%;padding-inline-start:0!important;padding-inline-end:0!important}::ng-deep .chat-container:has(si-ai-welcome-screen) .chat-input-area,::ng-deep .chat-container:has(si-ai-welcome-screen) si-ai-welcome-screen{padding-inline-start:16px;padding-inline-end:16px}.chat-container{min-block-size:0;overflow-y:auto;overflow-x:visible}.messages-container{overflow-y:auto;overflow-x:visible;padding-inline:8px;min-block-size:5rem;gap:40px}.messages-container ::ng-deep si-user-message:not(.last){margin-block-end:-40px}::ng-deep .messages-container:not(:has(si-ai-welcome-screen)){max-inline-size:720px}::ng-deep .messages-container:has(si-ai-welcome-screen){inline-size:100%}.chat-input-area{justify-self:flex-end;align-self:center;overflow:visible;inline-size:100%}.chat-input-area>::ng-deep *{max-inline-size:720px}::ng-deep .chat-input-area:empty:not(:has(si-inline-notification)),::ng-deep .chat-input-area:has([sichatcontainerinput]:empty):not(:has(si-inline-notification)){display:none!important}.chat-input-area:empty ::ng-deep>si-inline-notification,.chat-input-area:empty ::ng-deep *>si-inline-notification,.chat-input-area:has([sichatcontainerinput]:empty) ::ng-deep>si-inline-notification,.chat-input-area:has([sichatcontainerinput]:empty) ::ng-deep *>si-inline-notification{margin-block-end:0!important}.chat-container:has(.messages-container:not(:empty)) .messages-empty-state{display:none!important}:host-context(.si-container-xs,.si-container-sm) ::ng-deep si-inline-notification .alert,:host-context(.si-container-xs,.si-container-sm) ::ng-deep si-inline-notification .alert-link{font-size:.875rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { messagesContainer: [{ type: i0.ViewChild, args: ['messagesContainer', { isSignal: true }] }], colorVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorVariant", required: false }] }], noAutoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "noAutoScroll", required: false }] }] } });
 
 /**
@@ -551,11 +551,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 class SiChatInputComponent {
     static idCounter = 0;
     textInput = viewChild('textInput', ...(ngDevMode ? [{ debugName: "textInput" }] : []));
-    projectedContent = viewChild('projected', ...(ngDevMode ? [{ debugName: "projectedContent" }] : []));
     fileUploadDirective = viewChild(SiFileUploadDirective, ...(ngDevMode ? [{ debugName: "fileUploadDirective" }] : []));
+    fileInput = viewChild('fileInput', ...(ngDevMode ? [{ debugName: "fileInput" }] : []));
     icons = addIcons({
         elementAttachment,
-        elementOptionsVertical,
+        elementPlus,
         elementSendFilled,
         elementStopFilled
     });
@@ -715,6 +715,31 @@ class SiChatInputComponent {
     hasAttachments = computed(() => this.attachments().length > 0, ...(ngDevMode ? [{ debugName: "hasAttachments" }] : []));
     hasActions = computed(() => this.actions().length > 0, ...(ngDevMode ? [{ debugName: "hasActions" }] : []));
     hasSecondaryActions = computed(() => this.secondaryActions().length > 0, ...(ngDevMode ? [{ debugName: "hasSecondaryActions" }] : []));
+    allMenuActions = computed(() => [
+        ...(this.allowAttachments()
+            ? [
+                {
+                    type: 'action',
+                    label: this.attachFileLabel(),
+                    icon: this.icons.elementAttachment,
+                    disabled: this.disabled(),
+                    action: () => this.triggerFileInput()
+                }
+            ]
+            : []),
+        ...this.actions().map((a) => ({
+            type: 'action',
+            label: a.label,
+            icon: a.icon,
+            disabled: a.disabled,
+            action: (param) => a.action(param, a)
+        })),
+        ...this.secondaryActions()
+    ], ...(ngDevMode ? [{ debugName: "allMenuActions" }] : []));
+    hasMenuActions = computed(() => this.allowAttachments() || this.hasActions() || this.hasSecondaryActions(), ...(ngDevMode ? [{ debugName: "hasMenuActions" }] : []));
+    triggerFileInput() {
+        this.fileInput()?.nativeElement.click();
+    }
     canSend = computed(() => (this.hasContent() || this.hasAttachments()) && !this.disabled() && !this.sending(), ...(ngDevMode ? [{ debugName: "canSend" }] : []));
     showInterruptButton = computed(() => this.interruptible(), ...(ngDevMode ? [{ debugName: "showInterruptButton" }] : []));
     buttonDisabled = computed(() => {
@@ -791,8 +816,7 @@ class SiChatInputComponent {
             target.tagName === 'TEXTAREA' ||
             target.closest('button') ||
             target.closest('[siChatMessageAction]') ||
-            (target.closest('si-attachment-list') && target.closest('.attachment-item')) ||
-            this.projectedContent()?.nativeElement?.contains(target)) {
+            (target.closest('si-attachment-list') && target.closest('.attachment-item'))) {
             return;
         }
         this.focus();
@@ -858,7 +882,7 @@ class SiChatInputComponent {
         textarea.style.height = finalHeight + 'px';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiChatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiChatInputComponent, isStandalone: true, selector: "si-chat-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, sending: { classPropertyName: "sending", publicName: "sending", isSignal: true, isRequired: false, transformFunction: null }, interruptible: { classPropertyName: "interruptible", publicName: "interruptible", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, disclaimer: { classPropertyName: "disclaimer", publicName: "disclaimer", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, allowAttachments: { classPropertyName: "allowAttachments", publicName: "allowAttachments", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null }, sendButtonLabel: { classPropertyName: "sendButtonLabel", publicName: "sendButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, sendButtonIcon: { classPropertyName: "sendButtonIcon", publicName: "sendButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, interruptButtonLabel: { classPropertyName: "interruptButtonLabel", publicName: "interruptButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, attachFileLabel: { classPropertyName: "attachFileLabel", publicName: "attachFileLabel", isSignal: true, isRequired: false, transformFunction: null }, removeAttachmentLabel: { classPropertyName: "removeAttachmentLabel", publicName: "removeAttachmentLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryActionsLabel: { classPropertyName: "secondaryActionsLabel", publicName: "secondaryActionsLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", attachments: "attachmentsChange", send: "send", interrupt: "interrupt", fileError: "fileError" }, viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true, isSignal: true }, { propertyName: "projectedContent", first: true, predicate: ["projected"], descendants: true, isSignal: true }, { propertyName: "fileUploadDirective", first: true, predicate: SiFileUploadDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"input-wrapper border rounded-3 bg-body\"\n  [class.drag-over]=\"dragOver\"\n  (click)=\"onContainerClick($event)\"\n  (drop)=\"dropHandler($event)\"\n  (dragover)=\"dragOverHandler($event)\"\n  (dragleave)=\"dragOver = false\"\n>\n  @if (hasAttachments()) {\n    <div class=\"p-4 pb-0\">\n      <si-attachment-list\n        [attachments]=\"attachmentList\"\n        [removeLabel]=\"removeAttachmentLabel()\"\n        [removable]=\"true\"\n        (remove)=\"removeAttachment($event)\"\n      />\n    </div>\n  }\n\n  <div class=\"p-4 pe-2 pb-0 si-body-2\">\n    <label class=\"form-label d-none\" [for]=\"id\">{{ label() | translate }}</label>\n    <textarea\n      #textInput\n      class=\"chat-textarea w-100 border-0 p-2\"\n      rows=\"1\"\n      [id]=\"id\"\n      [placeholder]=\"placeholder() | translate\"\n      [disabled]=\"disabled()\"\n      [maxlength]=\"maxLength() || null\"\n      [(ngModel)]=\"value\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"adjustTextareaHeight($event)\"\n    ></textarea>\n  </div>\n\n  <div class=\"d-flex align-items-center justify-content-between px-4 ps-5 pb-2\">\n    <div class=\"d-flex align-items-center gap-4\">\n      @if (allowAttachments()) {\n        <input\n          #fileInput\n          type=\"file\"\n          class=\"d-none\"\n          siFileUpload\n          [accept]=\"accept()\"\n          [maxFileSize]=\"maxFileSize()\"\n          [multiple]=\"true\"\n          (validFiles)=\"onFilesAdded($event)\"\n          (fileError)=\"onFileError($event)\"\n        />\n\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [attr.aria-label]=\"attachFileLabel() | translate\"\n          [disabled]=\"disabled()\"\n          (click)=\"fileInput.click()\"\n        >\n          <si-icon [icon]=\"icons.elementAttachment\" />\n        </button>\n      }\n\n      @if (hasActions() || hasSecondaryActions()) {\n        <div class=\"d-flex gap-4 ai-message-actions\" siChatMessageAction>\n          @for (action of actions(); track $index) {\n            <button\n              type=\"button\"\n              class=\"btn btn-tertiary-ghost btn-icon\"\n              [disabled]=\"action.disabled\"\n              [attr.aria-label]=\"action.label | translate\"\n              (click)=\"action.action(actionParam(), action)\"\n            >\n              <si-icon [icon]=\"action.icon\" />\n            </button>\n          }\n\n          @if (secondaryActions().length > 0) {\n            <button\n              type=\"button\"\n              class=\"btn btn-tertiary-ghost btn-icon\"\n              [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n              [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n              [attr.title]=\"secondaryActionsLabel() | translate\"\n            >\n              <si-icon [icon]=\"icons.elementOptionsVertical\" />\n            </button>\n\n            <ng-template #secondaryActionsMenu>\n              <si-menu-factory [items]=\"secondaryActions()\" [actionParam]=\"actionParam()\" />\n            </ng-template>\n          }\n        </div>\n      }\n      <div #projected class=\"d-flex flex-wrap align-items-start gap-4\">\n        <ng-content />\n      </div>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"btn btn-tertiary-ghost btn-icon\"\n      [disabled]=\"buttonDisabled()\"\n      [attr.aria-label]=\"buttonLabel() | translate\"\n      (click)=\"onButtonClick()\"\n    >\n      <si-icon class=\"text-primary\" [icon]=\"buttonIcon()\" />\n    </button>\n  </div>\n</div>\n\n<div class=\"disclaimer-wrapper text-center mt-4 px-3\">\n  @if (disclaimer()) {\n    <span class=\"si-caption text-secondary d-block\">{{ disclaimer() | translate }}</span>\n  }\n  <ng-content select=\"[siChatInputDisclaimer]\" />\n</div>\n", styles: [":host{max-inline-size:720px}.input-wrapper{border-color:var(--element-ui-4);background-color:var(--element-base-input-experimental)}.input-wrapper.drag-over{border:1px solid var(--element-focus-default);box-shadow:0 0 0 1px var(--element-focus-default)}.chat-textarea{min-block-size:1.7142857143em;font-family:inherit;outline:none;resize:none;background-color:transparent!important}.chat-textarea::placeholder{color:var(--element-text-secondary)}.chat-textarea:disabled{background-color:transparent!important;color:var(--element-text-disabled);cursor:not-allowed}.chat-textarea:disabled::placeholder{color:var(--element-text-disabled)}.input-wrapper:has(.chat-textarea:focus-visible){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width);border-color:var(--element-ui-1)}.disclaimer-wrapper:empty{display:none}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiAttachmentListComponent, selector: "si-attachment-list", inputs: ["attachments", "alignment", "removable", "removeLabel"], outputs: ["remove"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "directive", type: SiFileUploadDirective, selector: "input[type=\"file\"][siFileUpload]", inputs: ["errorTextFileType", "errorTextFileMaxSize", "accept", "maxFileSize", "multiple", "directoryUpload"], outputs: ["validFiles", "filesAdded", "fileError"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiChatInputComponent, isStandalone: true, selector: "si-chat-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, sending: { classPropertyName: "sending", publicName: "sending", isSignal: true, isRequired: false, transformFunction: null }, interruptible: { classPropertyName: "interruptible", publicName: "interruptible", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, disclaimer: { classPropertyName: "disclaimer", publicName: "disclaimer", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, allowAttachments: { classPropertyName: "allowAttachments", publicName: "allowAttachments", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null }, sendButtonLabel: { classPropertyName: "sendButtonLabel", publicName: "sendButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, sendButtonIcon: { classPropertyName: "sendButtonIcon", publicName: "sendButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, interruptButtonLabel: { classPropertyName: "interruptButtonLabel", publicName: "interruptButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, attachFileLabel: { classPropertyName: "attachFileLabel", publicName: "attachFileLabel", isSignal: true, isRequired: false, transformFunction: null }, removeAttachmentLabel: { classPropertyName: "removeAttachmentLabel", publicName: "removeAttachmentLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryActionsLabel: { classPropertyName: "secondaryActionsLabel", publicName: "secondaryActionsLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", attachments: "attachmentsChange", send: "send", interrupt: "interrupt", fileError: "fileError" }, viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true, isSignal: true }, { propertyName: "fileUploadDirective", first: true, predicate: SiFileUploadDirective, descendants: true, isSignal: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"input-wrapper border rounded-3\"\n  [class.drag-over]=\"dragOver\"\n  (click)=\"onContainerClick($event)\"\n  (drop)=\"dropHandler($event)\"\n  (dragover)=\"dragOverHandler($event)\"\n  (dragleave)=\"dragOver = false\"\n>\n  @if (hasAttachments()) {\n    <si-attachment-list\n      [attachments]=\"attachmentList\"\n      [removeLabel]=\"removeAttachmentLabel()\"\n      [removable]=\"true\"\n      (remove)=\"removeAttachment($event)\"\n    />\n  }\n\n  <div class=\"si-body-2\">\n    <label class=\"form-label d-none\" [for]=\"id\">{{ label() | translate }}</label>\n    <textarea\n      #textInput\n      class=\"chat-textarea w-100 border-0\"\n      rows=\"1\"\n      [id]=\"id\"\n      [placeholder]=\"placeholder() | translate\"\n      [disabled]=\"disabled()\"\n      [maxlength]=\"maxLength() || null\"\n      [(ngModel)]=\"value\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"adjustTextareaHeight($event)\"\n    ></textarea>\n  </div>\n\n  <div class=\"d-flex align-items-center justify-content-between\">\n    <div class=\"btn-group\" role=\"group\">\n      <input\n        #fileInput\n        type=\"file\"\n        class=\"d-none\"\n        siFileUpload\n        [accept]=\"accept()\"\n        [maxFileSize]=\"maxFileSize()\"\n        [multiple]=\"true\"\n        (validFiles)=\"onFilesAdded($event)\"\n        (fileError)=\"onFileError($event)\"\n      />\n\n      @if (hasMenuActions()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [cdkMenuTriggerFor]=\"allActionsMenu\"\n          [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          [attr.title]=\"secondaryActionsLabel() | translate\"\n        >\n          <si-icon [icon]=\"icons.elementPlus\" />\n        </button>\n\n        <ng-template #allActionsMenu>\n          <si-menu-factory [items]=\"allMenuActions()\" [actionParam]=\"actionParam()\" />\n        </ng-template>\n      }\n      <ng-content />\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"btn btn-tertiary-ghost btn-icon\"\n      [disabled]=\"buttonDisabled()\"\n      [attr.aria-label]=\"buttonLabel() | translate\"\n      (click)=\"onButtonClick()\"\n    >\n      <si-icon class=\"text-primary\" [icon]=\"buttonIcon()\" />\n    </button>\n  </div>\n</div>\n\n<div class=\"disclaimer-wrapper text-center mt-4 px-3\">\n  @if (disclaimer()) {\n    <span class=\"si-caption text-secondary d-block\">{{ disclaimer() | translate }}</span>\n  }\n  <ng-content select=\"[siChatInputDisclaimer]\" />\n</div>\n", styles: [":host{max-inline-size:720px}.input-wrapper{border-color:var(--element-ui-4);background-color:var(--element-base-1);padding-block:12px 8px;padding-inline:12px;display:flex;flex-direction:column;gap:12px}.input-wrapper:hover,.input-wrapper:active{background-color:var(--element-base-input-experimental);border-color:var(--element-ui-1)}.input-wrapper.drag-over{border:1px solid var(--element-focus-default);box-shadow:0 0 0 1px var(--element-focus-default)}.chat-textarea{min-block-size:1lh;font-family:inherit;padding-block:0;display:block;outline:none;resize:none;background-color:transparent}.chat-textarea::placeholder{color:var(--element-text-secondary)}.chat-textarea:disabled{background-color:transparent;color:var(--element-text-disabled);cursor:not-allowed}.chat-textarea:disabled::placeholder{color:var(--element-text-disabled)}.input-wrapper:has(.chat-textarea:focus-visible){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width);border-color:var(--element-ui-1)}.disclaimer-wrapper:empty{display:none}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiAttachmentListComponent, selector: "si-attachment-list", inputs: ["attachments", "alignment", "removable", "removeLabel"], outputs: ["remove"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "directive", type: SiFileUploadDirective, selector: "input[type=\"file\"][siFileUpload]", inputs: ["errorTextFileType", "errorTextFileMaxSize", "accept", "maxFileSize", "multiple", "directoryUpload"], outputs: ["validFiles", "filesAdded", "fileError"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiChatInputComponent, decorators: [{
             type: Component,
@@ -870,8 +894,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiAttachmentListComponent,
                         SiMenuFactoryComponent,
                         SiFileUploadDirective
-                    ], template: "<div\n  class=\"input-wrapper border rounded-3 bg-body\"\n  [class.drag-over]=\"dragOver\"\n  (click)=\"onContainerClick($event)\"\n  (drop)=\"dropHandler($event)\"\n  (dragover)=\"dragOverHandler($event)\"\n  (dragleave)=\"dragOver = false\"\n>\n  @if (hasAttachments()) {\n    <div class=\"p-4 pb-0\">\n      <si-attachment-list\n        [attachments]=\"attachmentList\"\n        [removeLabel]=\"removeAttachmentLabel()\"\n        [removable]=\"true\"\n        (remove)=\"removeAttachment($event)\"\n      />\n    </div>\n  }\n\n  <div class=\"p-4 pe-2 pb-0 si-body-2\">\n    <label class=\"form-label d-none\" [for]=\"id\">{{ label() | translate }}</label>\n    <textarea\n      #textInput\n      class=\"chat-textarea w-100 border-0 p-2\"\n      rows=\"1\"\n      [id]=\"id\"\n      [placeholder]=\"placeholder() | translate\"\n      [disabled]=\"disabled()\"\n      [maxlength]=\"maxLength() || null\"\n      [(ngModel)]=\"value\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"adjustTextareaHeight($event)\"\n    ></textarea>\n  </div>\n\n  <div class=\"d-flex align-items-center justify-content-between px-4 ps-5 pb-2\">\n    <div class=\"d-flex align-items-center gap-4\">\n      @if (allowAttachments()) {\n        <input\n          #fileInput\n          type=\"file\"\n          class=\"d-none\"\n          siFileUpload\n          [accept]=\"accept()\"\n          [maxFileSize]=\"maxFileSize()\"\n          [multiple]=\"true\"\n          (validFiles)=\"onFilesAdded($event)\"\n          (fileError)=\"onFileError($event)\"\n        />\n\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [attr.aria-label]=\"attachFileLabel() | translate\"\n          [disabled]=\"disabled()\"\n          (click)=\"fileInput.click()\"\n        >\n          <si-icon [icon]=\"icons.elementAttachment\" />\n        </button>\n      }\n\n      @if (hasActions() || hasSecondaryActions()) {\n        <div class=\"d-flex gap-4 ai-message-actions\" siChatMessageAction>\n          @for (action of actions(); track $index) {\n            <button\n              type=\"button\"\n              class=\"btn btn-tertiary-ghost btn-icon\"\n              [disabled]=\"action.disabled\"\n              [attr.aria-label]=\"action.label | translate\"\n              (click)=\"action.action(actionParam(), action)\"\n            >\n              <si-icon [icon]=\"action.icon\" />\n            </button>\n          }\n\n          @if (secondaryActions().length > 0) {\n            <button\n              type=\"button\"\n              class=\"btn btn-tertiary-ghost btn-icon\"\n              [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n              [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n              [attr.title]=\"secondaryActionsLabel() | translate\"\n            >\n              <si-icon [icon]=\"icons.elementOptionsVertical\" />\n            </button>\n\n            <ng-template #secondaryActionsMenu>\n              <si-menu-factory [items]=\"secondaryActions()\" [actionParam]=\"actionParam()\" />\n            </ng-template>\n          }\n        </div>\n      }\n      <div #projected class=\"d-flex flex-wrap align-items-start gap-4\">\n        <ng-content />\n      </div>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"btn btn-tertiary-ghost btn-icon\"\n      [disabled]=\"buttonDisabled()\"\n      [attr.aria-label]=\"buttonLabel() | translate\"\n      (click)=\"onButtonClick()\"\n    >\n      <si-icon class=\"text-primary\" [icon]=\"buttonIcon()\" />\n    </button>\n  </div>\n</div>\n\n<div class=\"disclaimer-wrapper text-center mt-4 px-3\">\n  @if (disclaimer()) {\n    <span class=\"si-caption text-secondary d-block\">{{ disclaimer() | translate }}</span>\n  }\n  <ng-content select=\"[siChatInputDisclaimer]\" />\n</div>\n", styles: [":host{max-inline-size:720px}.input-wrapper{border-color:var(--element-ui-4);background-color:var(--element-base-input-experimental)}.input-wrapper.drag-over{border:1px solid var(--element-focus-default);box-shadow:0 0 0 1px var(--element-focus-default)}.chat-textarea{min-block-size:1.7142857143em;font-family:inherit;outline:none;resize:none;background-color:transparent!important}.chat-textarea::placeholder{color:var(--element-text-secondary)}.chat-textarea:disabled{background-color:transparent!important;color:var(--element-text-disabled);cursor:not-allowed}.chat-textarea:disabled::placeholder{color:var(--element-text-disabled)}.input-wrapper:has(.chat-textarea:focus-visible){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width);border-color:var(--element-ui-1)}.disclaimer-wrapper:empty{display:none}\n"] }]
-        }], propDecorators: { textInput: [{ type: i0.ViewChild, args: ['textInput', { isSignal: true }] }], projectedContent: [{ type: i0.ViewChild, args: ['projected', { isSignal: true }] }], fileUploadDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiFileUploadDirective), { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], sending: [{ type: i0.Input, args: [{ isSignal: true, alias: "sending", required: false }] }], interruptible: [{ type: i0.Input, args: [{ isSignal: true, alias: "interruptible", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], disclaimer: [{ type: i0.Input, args: [{ isSignal: true, alias: "disclaimer", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], secondaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActions", required: false }] }], allowAttachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAttachments", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: false }] }, { type: i0.Output, args: ["attachmentsChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], actionParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionParam", required: false }] }], sendButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendButtonLabel", required: false }] }], sendButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendButtonIcon", required: false }] }], interruptButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "interruptButtonLabel", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], attachFileLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachFileLabel", required: false }] }], removeAttachmentLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeAttachmentLabel", required: false }] }], secondaryActionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActionsLabel", required: false }] }], send: [{ type: i0.Output, args: ["send"] }], interrupt: [{ type: i0.Output, args: ["interrupt"] }], fileError: [{ type: i0.Output, args: ["fileError"] }] } });
+                    ], template: "<div\n  class=\"input-wrapper border rounded-3\"\n  [class.drag-over]=\"dragOver\"\n  (click)=\"onContainerClick($event)\"\n  (drop)=\"dropHandler($event)\"\n  (dragover)=\"dragOverHandler($event)\"\n  (dragleave)=\"dragOver = false\"\n>\n  @if (hasAttachments()) {\n    <si-attachment-list\n      [attachments]=\"attachmentList\"\n      [removeLabel]=\"removeAttachmentLabel()\"\n      [removable]=\"true\"\n      (remove)=\"removeAttachment($event)\"\n    />\n  }\n\n  <div class=\"si-body-2\">\n    <label class=\"form-label d-none\" [for]=\"id\">{{ label() | translate }}</label>\n    <textarea\n      #textInput\n      class=\"chat-textarea w-100 border-0\"\n      rows=\"1\"\n      [id]=\"id\"\n      [placeholder]=\"placeholder() | translate\"\n      [disabled]=\"disabled()\"\n      [maxlength]=\"maxLength() || null\"\n      [(ngModel)]=\"value\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"adjustTextareaHeight($event)\"\n    ></textarea>\n  </div>\n\n  <div class=\"d-flex align-items-center justify-content-between\">\n    <div class=\"btn-group\" role=\"group\">\n      <input\n        #fileInput\n        type=\"file\"\n        class=\"d-none\"\n        siFileUpload\n        [accept]=\"accept()\"\n        [maxFileSize]=\"maxFileSize()\"\n        [multiple]=\"true\"\n        (validFiles)=\"onFilesAdded($event)\"\n        (fileError)=\"onFileError($event)\"\n      />\n\n      @if (hasMenuActions()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [cdkMenuTriggerFor]=\"allActionsMenu\"\n          [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          [attr.title]=\"secondaryActionsLabel() | translate\"\n        >\n          <si-icon [icon]=\"icons.elementPlus\" />\n        </button>\n\n        <ng-template #allActionsMenu>\n          <si-menu-factory [items]=\"allMenuActions()\" [actionParam]=\"actionParam()\" />\n        </ng-template>\n      }\n      <ng-content />\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"btn btn-tertiary-ghost btn-icon\"\n      [disabled]=\"buttonDisabled()\"\n      [attr.aria-label]=\"buttonLabel() | translate\"\n      (click)=\"onButtonClick()\"\n    >\n      <si-icon class=\"text-primary\" [icon]=\"buttonIcon()\" />\n    </button>\n  </div>\n</div>\n\n<div class=\"disclaimer-wrapper text-center mt-4 px-3\">\n  @if (disclaimer()) {\n    <span class=\"si-caption text-secondary d-block\">{{ disclaimer() | translate }}</span>\n  }\n  <ng-content select=\"[siChatInputDisclaimer]\" />\n</div>\n", styles: [":host{max-inline-size:720px}.input-wrapper{border-color:var(--element-ui-4);background-color:var(--element-base-1);padding-block:12px 8px;padding-inline:12px;display:flex;flex-direction:column;gap:12px}.input-wrapper:hover,.input-wrapper:active{background-color:var(--element-base-input-experimental);border-color:var(--element-ui-1)}.input-wrapper.drag-over{border:1px solid var(--element-focus-default);box-shadow:0 0 0 1px var(--element-focus-default)}.chat-textarea{min-block-size:1lh;font-family:inherit;padding-block:0;display:block;outline:none;resize:none;background-color:transparent}.chat-textarea::placeholder{color:var(--element-text-secondary)}.chat-textarea:disabled{background-color:transparent;color:var(--element-text-disabled);cursor:not-allowed}.chat-textarea:disabled::placeholder{color:var(--element-text-disabled)}.input-wrapper:has(.chat-textarea:focus-visible){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width);border-color:var(--element-ui-1)}.disclaimer-wrapper:empty{display:none}\n"] }]
+        }], propDecorators: { textInput: [{ type: i0.ViewChild, args: ['textInput', { isSignal: true }] }], fileUploadDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiFileUploadDirective), { isSignal: true }] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], sending: [{ type: i0.Input, args: [{ isSignal: true, alias: "sending", required: false }] }], interruptible: [{ type: i0.Input, args: [{ isSignal: true, alias: "interruptible", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], disclaimer: [{ type: i0.Input, args: [{ isSignal: true, alias: "disclaimer", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], secondaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActions", required: false }] }], allowAttachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAttachments", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: false }] }, { type: i0.Output, args: ["attachmentsChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], actionParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionParam", required: false }] }], sendButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendButtonLabel", required: false }] }], sendButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendButtonIcon", required: false }] }], interruptButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "interruptButtonLabel", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], attachFileLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachFileLabel", required: false }] }], removeAttachmentLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeAttachmentLabel", required: false }] }], secondaryActionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActionsLabel", required: false }] }], send: [{ type: i0.Output, args: ["send"] }], interrupt: [{ type: i0.Output, args: ["interrupt"] }], fileError: [{ type: i0.Output, args: ["fileError"] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -1005,7 +1029,7 @@ class SiUserMessageComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiUserMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiUserMessageComponent, isStandalone: true, selector: "si-user-message", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, contentFormatter: { classPropertyName: "contentFormatter", publicName: "contentFormatter", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null }, secondaryActionsLabel: { classPropertyName: "secondaryActionsLabel", publicName: "secondaryActionsLabel", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "formattedContent", first: true, predicate: ["formattedContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<si-chat-message alignment=\"end\" actionsPosition=\"bottom\" [loading]=\"false\">\n  @if (hasAttachments()) {\n    <si-attachment-list alignment=\"end\" [attachments]=\"attachments()\" [removable]=\"false\" />\n  }\n\n  @if (content()) {\n    @let content = textContent();\n    @if (content) {\n      <span class=\"text-pre-wrap\">{{ content }}</span>\n    } @else {\n      <div #formattedContent> </div>\n    }\n  }\n  @if (actions().length > 0 || secondaryActions().length > 0) {\n    <div class=\"d-flex gap-4 user-message-actions\" siChatMessageAction>\n      @for (action of actions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [disabled]=\"action.disabled\"\n          [attr.aria-label]=\"action.label | translate\"\n          (click)=\"action.action(actionParam(), action)\"\n        >\n          <si-icon [icon]=\"action.icon\" />\n        </button>\n      }\n\n      @if (secondaryActions().length > 0) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          [attr.title]=\"secondaryActionsLabel() | translate\"\n        >\n          <si-icon [icon]=\"icons.elementOptionsVertical\" />\n        </button>\n\n        <ng-template #secondaryActionsMenu>\n          <si-menu-factory [items]=\"secondaryActions()\" [actionParam]=\"actionParam()\" />\n        </ng-template>\n      }\n    </div>\n  }\n</si-chat-message>\n", styles: [":host{display:block}:host:not(:has([siChatMessageAction])) si-chat-message{padding-block-end:36px!important}.user-message-actions{opacity:0;transition:opacity .2s ease}si-chat-message{--chat-message-bubble-bg: var(--element-base-input-experimental);max-inline-size:600px;margin-inline-start:auto}:host:hover .user-message-actions,.user-message-actions:hover,.user-message-actions:has(::ng-deep [aria-expanded=true]),:host-context(.si-container-xs,.si-container-sm) .user-message-actions:active{opacity:1}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: SiAttachmentListComponent, selector: "si-attachment-list", inputs: ["attachments", "alignment", "removable", "removeLabel"], outputs: ["remove"] }, { kind: "component", type: SiChatMessageComponent, selector: "si-chat-message", inputs: ["loading", "alignment", "actionsPosition"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "directive", type: SiChatMessageActionDirective, selector: "[siChatMessageAction]" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiUserMessageComponent, isStandalone: true, selector: "si-user-message", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, contentFormatter: { classPropertyName: "contentFormatter", publicName: "contentFormatter", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null }, secondaryActionsLabel: { classPropertyName: "secondaryActionsLabel", publicName: "secondaryActionsLabel", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "formattedContent", first: true, predicate: ["formattedContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<si-chat-message alignment=\"end\" actionsPosition=\"bottom\" [loading]=\"false\">\n  @if (hasAttachments()) {\n    <si-attachment-list alignment=\"end\" [attachments]=\"attachments()\" [removable]=\"false\" />\n  }\n\n  @if (content()) {\n    @let content = textContent();\n    @if (content) {\n      <span class=\"text-pre-wrap\">{{ content }}</span>\n    } @else {\n      <div #formattedContent> </div>\n    }\n  }\n  @if (actions().length > 0 || secondaryActions().length > 0) {\n    <div class=\"btn-group user-message-actions\" role=\"group\" siChatMessageAction>\n      @for (action of actions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [disabled]=\"action.disabled\"\n          [attr.aria-label]=\"action.label | translate\"\n          (click)=\"action.action(actionParam(), action)\"\n        >\n          <si-icon [icon]=\"action.icon\" />\n        </button>\n      }\n\n      @if (secondaryActions().length > 0) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          [attr.title]=\"secondaryActionsLabel() | translate\"\n        >\n          <si-icon [icon]=\"icons.elementOptionsVertical\" />\n        </button>\n\n        <ng-template #secondaryActionsMenu>\n          <si-menu-factory [items]=\"secondaryActions()\" [actionParam]=\"actionParam()\" />\n        </ng-template>\n      }\n    </div>\n  }\n</si-chat-message>\n", styles: [":host{display:block}:host:not(:has([siChatMessageAction])) si-chat-message{padding-block-end:36px!important}.user-message-actions{opacity:0;transition:opacity .2s ease}si-chat-message{--chat-message-bubble-bg: var(--element-base-4);max-inline-size:600px;margin-inline-start:auto}:host:hover .user-message-actions,.user-message-actions:hover,.user-message-actions:has(::ng-deep [aria-expanded=true]),:host-context(.si-container-xs,.si-container-sm) .user-message-actions:active{opacity:1}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: SiAttachmentListComponent, selector: "si-attachment-list", inputs: ["attachments", "alignment", "removable", "removeLabel"], outputs: ["remove"] }, { kind: "component", type: SiChatMessageComponent, selector: "si-chat-message", inputs: ["loading", "alignment", "actionsPosition"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "directive", type: SiChatMessageActionDirective, selector: "[siChatMessageAction]" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiUserMessageComponent, decorators: [{
             type: Component,
@@ -1017,7 +1041,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiMenuFactoryComponent,
                         SiChatMessageActionDirective,
                         SiTranslatePipe
-                    ], template: "<si-chat-message alignment=\"end\" actionsPosition=\"bottom\" [loading]=\"false\">\n  @if (hasAttachments()) {\n    <si-attachment-list alignment=\"end\" [attachments]=\"attachments()\" [removable]=\"false\" />\n  }\n\n  @if (content()) {\n    @let content = textContent();\n    @if (content) {\n      <span class=\"text-pre-wrap\">{{ content }}</span>\n    } @else {\n      <div #formattedContent> </div>\n    }\n  }\n  @if (actions().length > 0 || secondaryActions().length > 0) {\n    <div class=\"d-flex gap-4 user-message-actions\" siChatMessageAction>\n      @for (action of actions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [disabled]=\"action.disabled\"\n          [attr.aria-label]=\"action.label | translate\"\n          (click)=\"action.action(actionParam(), action)\"\n        >\n          <si-icon [icon]=\"action.icon\" />\n        </button>\n      }\n\n      @if (secondaryActions().length > 0) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          [attr.title]=\"secondaryActionsLabel() | translate\"\n        >\n          <si-icon [icon]=\"icons.elementOptionsVertical\" />\n        </button>\n\n        <ng-template #secondaryActionsMenu>\n          <si-menu-factory [items]=\"secondaryActions()\" [actionParam]=\"actionParam()\" />\n        </ng-template>\n      }\n    </div>\n  }\n</si-chat-message>\n", styles: [":host{display:block}:host:not(:has([siChatMessageAction])) si-chat-message{padding-block-end:36px!important}.user-message-actions{opacity:0;transition:opacity .2s ease}si-chat-message{--chat-message-bubble-bg: var(--element-base-input-experimental);max-inline-size:600px;margin-inline-start:auto}:host:hover .user-message-actions,.user-message-actions:hover,.user-message-actions:has(::ng-deep [aria-expanded=true]),:host-context(.si-container-xs,.si-container-sm) .user-message-actions:active{opacity:1}\n"] }]
+                    ], template: "<si-chat-message alignment=\"end\" actionsPosition=\"bottom\" [loading]=\"false\">\n  @if (hasAttachments()) {\n    <si-attachment-list alignment=\"end\" [attachments]=\"attachments()\" [removable]=\"false\" />\n  }\n\n  @if (content()) {\n    @let content = textContent();\n    @if (content) {\n      <span class=\"text-pre-wrap\">{{ content }}</span>\n    } @else {\n      <div #formattedContent> </div>\n    }\n  }\n  @if (actions().length > 0 || secondaryActions().length > 0) {\n    <div class=\"btn-group user-message-actions\" role=\"group\" siChatMessageAction>\n      @for (action of actions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [disabled]=\"action.disabled\"\n          [attr.aria-label]=\"action.label | translate\"\n          (click)=\"action.action(actionParam(), action)\"\n        >\n          <si-icon [icon]=\"action.icon\" />\n        </button>\n      }\n\n      @if (secondaryActions().length > 0) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          [attr.title]=\"secondaryActionsLabel() | translate\"\n        >\n          <si-icon [icon]=\"icons.elementOptionsVertical\" />\n        </button>\n\n        <ng-template #secondaryActionsMenu>\n          <si-menu-factory [items]=\"secondaryActions()\" [actionParam]=\"actionParam()\" />\n        </ng-template>\n      }\n    </div>\n  }\n</si-chat-message>\n", styles: [":host{display:block}:host:not(:has([siChatMessageAction])) si-chat-message{padding-block-end:36px!important}.user-message-actions{opacity:0;transition:opacity .2s ease}si-chat-message{--chat-message-bubble-bg: var(--element-base-4);max-inline-size:600px;margin-inline-start:auto}:host:hover .user-message-actions,.user-message-actions:hover,.user-message-actions:has(::ng-deep [aria-expanded=true]),:host-context(.si-container-xs,.si-container-sm) .user-message-actions:active{opacity:1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { formattedContent: [{ type: i0.ViewChild, args: ['formattedContent', { isSignal: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], contentFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentFormatter", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], secondaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActions", required: false }] }], attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: false }] }], actionParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionParam", required: false }] }], secondaryActionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActionsLabel", required: false }] }] } });
 
 /**
@@ -1069,13 +1093,13 @@ class SiAiWelcomeScreenComponent {
         this.promptSelected.emit(suggestion);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiAiWelcomeScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiAiWelcomeScreenComponent, isStandalone: true, selector: "si-ai-welcome-screen", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, selectedCategory: { classPropertyName: "selectedCategory", publicName: "selectedCategory", isSignal: true, isRequired: false, transformFunction: null }, promptSuggestions: { classPropertyName: "promptSuggestions", publicName: "promptSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedCategory: "selectedCategoryChange", promptSelected: "promptSelected" }, host: { classAttribute: "d-block" }, ngImport: i0, template: "<div class=\"d-flex flex-column gap-10 align-items-center w-100\">\n  <!-- Welcome Header -->\n  <div class=\"welcome-header d-flex flex-column gap-4 w-100 pt-10 pb-8\">\n    <ng-content />\n  </div>\n\n  <!-- Prompt Categories and Suggestions -->\n  <div class=\"prompt-suggestions d-flex flex-column gap-6 align-items-center w-100\">\n    @if (categories().length > 0) {\n      <div class=\"d-flex gap-4 align-items-center w-100\">\n        @for (category of categories(); track $index) {\n          <si-summary-chip\n            class=\"user-select-none\"\n            [label]=\"category.label\"\n            [selected]=\"selectedCategory() === category.label\"\n            (selectedChange)=\"onCategoryClick(category.label)\"\n          />\n        }\n      </div>\n    }\n\n    @if (promptSuggestions().length > 0) {\n      <div class=\"d-flex flex-column gap-4 w-100\">\n        @for (suggestion of promptSuggestions(); track $index) {\n          <button si-action-card type=\"button\" class=\"w-100\" (click)=\"onPromptClick(suggestion)\">\n            <div body class=\"card-body card-text\">\n              {{ suggestion.text }}\n            </div>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".welcome-header{max-inline-size:720px;overflow-x:visible;position:relative}.welcome-header:before{position:absolute;content:\"\";inset-inline-start:-104px;inset-block-start:50%;transform:translateY(-50%);inline-size:168px;block-size:168px;background-image:var(--element-brand-ai-key-visual);background-size:contain;background-repeat:no-repeat;background-position:center}:host{container-type:inline-size}@container (max-width: 767.98px){:host .welcome-header:before{display:none}}.prompt-suggestions{max-inline-size:720px}.prompt-suggestions>div:first-child{flex-wrap:wrap}:host{inline-size:100%}::ng-deep button[si-action-card]{background-color:var(--element-base-input-experimental)}\n"], dependencies: [{ kind: "component", type: SiActionCardComponent, selector: "button[si-action-card]", inputs: ["selectable", "selected"], outputs: ["selectedChange"] }, { kind: "component", type: SiSummaryChipComponent, selector: "si-summary-chip", inputs: ["status", "icon", "color", "stackedIcon", "stackedColor", "label", "value", "selected", "disabled", "hideLabel"], outputs: ["selectedChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiAiWelcomeScreenComponent, isStandalone: true, selector: "si-ai-welcome-screen", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, selectedCategory: { classPropertyName: "selectedCategory", publicName: "selectedCategory", isSignal: true, isRequired: false, transformFunction: null }, promptSuggestions: { classPropertyName: "promptSuggestions", publicName: "promptSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedCategory: "selectedCategoryChange", promptSelected: "promptSelected" }, host: { classAttribute: "d-block" }, ngImport: i0, template: "<div class=\"d-flex flex-column gap-10 align-items-center w-100\">\n  <!-- Welcome Header -->\n  <div class=\"welcome-header d-flex flex-column gap-4 w-100 pt-10 pb-8\">\n    <ng-content />\n  </div>\n\n  <!-- Prompt Categories and Suggestions -->\n  <div class=\"prompt-suggestions d-flex flex-column gap-6 align-items-center w-100\">\n    @if (categories().length > 0) {\n      <div class=\"d-flex gap-4 align-items-center w-100\">\n        @for (category of categories(); track $index) {\n          <si-summary-chip\n            class=\"user-select-none\"\n            [label]=\"category.label\"\n            [selected]=\"selectedCategory() === category.label\"\n            (selectedChange)=\"onCategoryClick(category.label)\"\n          />\n        }\n      </div>\n    }\n\n    @if (promptSuggestions().length > 0) {\n      <div class=\"d-flex flex-column gap-4 w-100\">\n        @for (suggestion of promptSuggestions(); track $index) {\n          <button si-action-card type=\"button\" class=\"w-100\" (click)=\"onPromptClick(suggestion)\">\n            <div body class=\"card-body card-text\">\n              {{ suggestion.text }}\n            </div>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".welcome-header{max-inline-size:720px;overflow-x:visible;position:relative}.welcome-header:before{position:absolute;content:\"\";inset-inline-start:-104px;inset-block-start:50%;transform:translateY(-50%);inline-size:168px;block-size:168px;background-image:var(--element-brand-ai-key-visual);background-size:contain;background-repeat:no-repeat;background-position:center}:host{container-type:inline-size}@container (max-width: 767.98px){:host .welcome-header:before{display:none}}.prompt-suggestions{max-inline-size:720px}.prompt-suggestions>div:first-child{flex-wrap:wrap}:host{inline-size:100%}::ng-deep button[si-action-card]{background-color:transparent;border-radius:var(--element-radius-2);border:1px solid var(--element-ui-4)}\n"], dependencies: [{ kind: "component", type: SiActionCardComponent, selector: "button[si-action-card]", inputs: ["selectable", "selected"], outputs: ["selectedChange"] }, { kind: "component", type: SiSummaryChipComponent, selector: "si-summary-chip", inputs: ["status", "icon", "color", "stackedIcon", "stackedColor", "label", "value", "selected", "disabled", "hideLabel"], outputs: ["selectedChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiAiWelcomeScreenComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-ai-welcome-screen', imports: [SiActionCardComponent, SiSummaryChipComponent], host: {
                         class: 'd-block'
-                    }, template: "<div class=\"d-flex flex-column gap-10 align-items-center w-100\">\n  <!-- Welcome Header -->\n  <div class=\"welcome-header d-flex flex-column gap-4 w-100 pt-10 pb-8\">\n    <ng-content />\n  </div>\n\n  <!-- Prompt Categories and Suggestions -->\n  <div class=\"prompt-suggestions d-flex flex-column gap-6 align-items-center w-100\">\n    @if (categories().length > 0) {\n      <div class=\"d-flex gap-4 align-items-center w-100\">\n        @for (category of categories(); track $index) {\n          <si-summary-chip\n            class=\"user-select-none\"\n            [label]=\"category.label\"\n            [selected]=\"selectedCategory() === category.label\"\n            (selectedChange)=\"onCategoryClick(category.label)\"\n          />\n        }\n      </div>\n    }\n\n    @if (promptSuggestions().length > 0) {\n      <div class=\"d-flex flex-column gap-4 w-100\">\n        @for (suggestion of promptSuggestions(); track $index) {\n          <button si-action-card type=\"button\" class=\"w-100\" (click)=\"onPromptClick(suggestion)\">\n            <div body class=\"card-body card-text\">\n              {{ suggestion.text }}\n            </div>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".welcome-header{max-inline-size:720px;overflow-x:visible;position:relative}.welcome-header:before{position:absolute;content:\"\";inset-inline-start:-104px;inset-block-start:50%;transform:translateY(-50%);inline-size:168px;block-size:168px;background-image:var(--element-brand-ai-key-visual);background-size:contain;background-repeat:no-repeat;background-position:center}:host{container-type:inline-size}@container (max-width: 767.98px){:host .welcome-header:before{display:none}}.prompt-suggestions{max-inline-size:720px}.prompt-suggestions>div:first-child{flex-wrap:wrap}:host{inline-size:100%}::ng-deep button[si-action-card]{background-color:var(--element-base-input-experimental)}\n"] }]
+                    }, template: "<div class=\"d-flex flex-column gap-10 align-items-center w-100\">\n  <!-- Welcome Header -->\n  <div class=\"welcome-header d-flex flex-column gap-4 w-100 pt-10 pb-8\">\n    <ng-content />\n  </div>\n\n  <!-- Prompt Categories and Suggestions -->\n  <div class=\"prompt-suggestions d-flex flex-column gap-6 align-items-center w-100\">\n    @if (categories().length > 0) {\n      <div class=\"d-flex gap-4 align-items-center w-100\">\n        @for (category of categories(); track $index) {\n          <si-summary-chip\n            class=\"user-select-none\"\n            [label]=\"category.label\"\n            [selected]=\"selectedCategory() === category.label\"\n            (selectedChange)=\"onCategoryClick(category.label)\"\n          />\n        }\n      </div>\n    }\n\n    @if (promptSuggestions().length > 0) {\n      <div class=\"d-flex flex-column gap-4 w-100\">\n        @for (suggestion of promptSuggestions(); track $index) {\n          <button si-action-card type=\"button\" class=\"w-100\" (click)=\"onPromptClick(suggestion)\">\n            <div body class=\"card-body card-text\">\n              {{ suggestion.text }}\n            </div>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".welcome-header{max-inline-size:720px;overflow-x:visible;position:relative}.welcome-header:before{position:absolute;content:\"\";inset-inline-start:-104px;inset-block-start:50%;transform:translateY(-50%);inline-size:168px;block-size:168px;background-image:var(--element-brand-ai-key-visual);background-size:contain;background-repeat:no-repeat;background-position:center}:host{container-type:inline-size}@container (max-width: 767.98px){:host .welcome-header:before{display:none}}.prompt-suggestions{max-inline-size:720px}.prompt-suggestions>div:first-child{flex-wrap:wrap}:host{inline-size:100%}::ng-deep button[si-action-card]{background-color:transparent;border-radius:var(--element-radius-2);border:1px solid var(--element-ui-4)}\n"] }]
         }], propDecorators: { categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: false }] }], selectedCategory: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCategory", required: false }] }, { type: i0.Output, args: ["selectedCategoryChange"] }], promptSuggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "promptSuggestions", required: false }] }], promptSelected: [{ type: i0.Output, args: ["promptSelected"] }] } });
 
 /**