@progress/kendo-react-conversational-ui/chat/components/AttachmentGroup.js

React Chat component allows the user to participate in chat sessions with users or chat bots. KendoReact Conversational UI components

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";const B=require("react"),m=require("@progress/kendo-react-common"),v=require("@progress/kendo-svg-icons"),D=require("./Attachment.js"),S=require("@progress/kendo-react-buttons");function x(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const r in o)if(r!=="default"){const u=Object.getOwnPropertyDescriptor(o,r);Object.defineProperty(e,r,u.get?u:{enumerable:!0,get:()=>o[r]})}}return e.default=o,Object.freeze(e)}const n=x(B),E=o=>{const{group:e,itemTemplate:r,selected:u,isLastGroup:L,onRequestSelection:g}=o,[l,d]=n.useState(null);n.useEffect(()=>{!u&&l!==null?d(null):u&&l===null&&d(0)},[u,l]);const a=n.useCallback(t=>t.attachmentLayout!=="list",[]),h=n.useCallback(()=>e.attachments?e.attachments.length-1:-1,[e.attachments]),b=n.useCallback(()=>e.attachments.length-1,[e.attachments]),i=n.useCallback((t,s=0)=>{let c=null;return t?l===null?c=s:l<h()&&(c=l+1):l===null?c=0:l>0&&(c=l-1),c!==null&&d(c),c},[l,h]),f=n.useCallback(()=>{g(e.selectionIndex)},[g,e.selectionIndex]),p=n.useCallback(t=>{let s=null,c,C;a(e)?(c=m.Keys.left,C=m.Keys.right):(c=m.Keys.up,C=m.Keys.down),t.keyCode===c?s=i(!1):t.keyCode===C&&(s=i(!0)),s!==null&&(t.preventDefault(),t.stopPropagation())},[i,a,e]),K=n.useCallback(t=>{f(),d(t)},[f]),k=n.useCallback(t=>{f(),i(t,1)},[f,i]),R=n.useCallback(()=>{let t=null;return a(e)&&l&&(t=n.createElement(S.Button,{icon:"chevron-left",onClick:()=>k(!1),svgIcon:v.chevronLeftIcon})),t},[a,e,l,k]),q=n.useCallback(()=>{let t=null;return a(e)&&l!==b()&&(t=n.createElement(S.Button,{icon:"chevron-right",onClick:()=>k(!0),svgIcon:v.chevronRightIcon})),t},[a,e,l,b,k]),w=n.useCallback(()=>m.classNames({"k-card-list":e.attachmentLayout,"k-card-deck":a(e)}),[e.attachmentLayout,e,a]),y=a(e),I=n.createElement("div",{className:w(),onKeyDown:y?void 0:p},e.attachments.map((t,s)=>n.createElement(D,{item:t,template:r,selected:s===l,tabbable:L&&s===l,onClick:()=>K(s),key:t.content})));return y?n.createElement("div",{className:"k-card-deck-scrollwrap",onKeyDown:p},R(),I,q()):I};module.exports=E;