UNPKG

@progress/kendo-react-conversational-ui

Version:

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

67 lines (66 loc) 3.1 kB
/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import * as o from "react"; import { classNames as z, IconWrap as v, getFileExtensionIcon as w } from "@progress/kendo-react-common"; import { Button as F, DropDownButton as M } from "@progress/kendo-react-buttons"; import { xIcon as N, moreVerticalIcon as $, downloadIcon as A } from "@progress/kendo-svg-icons"; import { useLocalization as L } from "@progress/kendo-react-intl"; import { removeFile as p, messages as f, fileActions as g } from "../../../messages/index.mjs"; import { useChatContext as S } from "../ChatContext.mjs"; const V = (u) => { const { files: d, onFileRemove: s, onFileAction: l, onDownload: i, fileActions: h, renderInTextarea: k = !1 } = u, { messageFilesLayout: r = "vertical" } = S(), c = L(), m = h || [{ id: "download", label: "Download", svgIcon: A }], I = (e) => { if (e == null) return ""; if (e === 0) return "0 B"; const t = 1024, a = ["B", "KB", "MB", "GB", "TB"], n = Math.floor(Math.log(e) / Math.log(t)); return `${parseFloat((e / Math.pow(t, n)).toFixed(2))} ${a[n]}`; }, E = (e) => "." + e.split(".").pop() || "", x = (e, t) => { var a, n; (n = (a = e.syntheticEvent) == null ? void 0 : a.stopPropagation) == null || n.call(a), e.item.id === "download" && (i == null || i([t])), l == null || l(e.item, e, t); }, B = (e) => k ? /* @__PURE__ */ o.createElement( F, { fillMode: "flat", themeColor: "base", svgIcon: N, onClick: (t) => { t.stopPropagation(), s == null || s(e.name); }, "aria-label": `${c.toLanguageString(p, f[p])} ${e.name}` } ) : m.length > 0 && /* @__PURE__ */ o.createElement( M, { fillMode: "flat", themeColor: "base", svgIcon: $, onClick: (t) => { t.syntheticEvent.stopPropagation(); }, onItemClick: (t) => x(t, e), items: m.map((t) => ({ id: t.id, icon: t.icon, text: t.label, svgIcon: t.svgIcon })), "aria-label": `${c.toLanguageString( g, f[g] )} ${e.name}` } ), C = o.useCallback(() => z("k-chat-file-wrapper", { "k-chat-files-wrap": r === "wrap", "k-chat-files-horizontal": r === "horizontal" }), [r]); return /* @__PURE__ */ o.createElement("ul", { className: C() }, d.map((e) => /* @__PURE__ */ o.createElement("li", { key: e.name, className: "k-chat-file" }, /* @__PURE__ */ o.createElement(v, { size: "xlarge", ...w(E(e.name)) }), /* @__PURE__ */ o.createElement("div", { className: "k-chat-file-info" }, /* @__PURE__ */ o.createElement("span", { className: "k-chat-file-name" }, e.name), /* @__PURE__ */ o.createElement("span", { className: "k-chat-file-size" }, I(e.size))), B(e)))); }; export { V as default };