@adecore/agents-react 0.31.12 → 0.33.0

package/dist/chat/ui/composer/ComposerMenu.js

@@ -1,46 +1,374 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
 import { MessageSquare, SquareSlash, Zap } from 'lucide-react';
 import { FileIcon, Icon, Menu, MiddleTruncate } from '@adecore/ui';
 import { optionIdOf } from './menu-aria.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function splitPath(path) {
-    const slash = path.lastIndexOf('/');
-    return slash < 0 ? { name: path, dir: '' } : { name: path.slice(slash + 1), dir: path.slice(0, slash) };
+  const slash = path.lastIndexOf('/');
+  return slash < 0 ? {
+    name: path,
+    dir: ''
+  } : {
+    name: path.slice(slash + 1),
+    dir: path.slice(0, slash)
+  };
 }
 /* A row of a picker. The focus stays in the editor, which names the active row through `aria-activedescendant`. */
-function MenuOption({ menus, index, className, onPick, children }) {
-    return (_jsx("button", { id: optionIdOf(menus.listId, index), role: "option", "aria-selected": index === menus.activeIndex, tabIndex: -1, "data-active": index === menus.activeIndex, className: clsx('cursor-row flex w-full gap-2 rounded-md px-2 py-1 text-left text-xs text-text-muted', className), onMouseEnter: () => menus.setMenuIndex(index), onMouseDown: (e) => e.preventDefault(), onClick: onPick, children: children }));
+function MenuOption(t0) {
+  const $ = _c(16);
+  const {
+    menus,
+    index,
+    className,
+    onPick,
+    children
+  } = t0;
+  let t1;
+  if ($[0] !== index || $[1] !== menus.listId) {
+    t1 = optionIdOf(menus.listId, index);
+    $[0] = index;
+    $[1] = menus.listId;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const t2 = index === menus.activeIndex;
+  const t3 = index === menus.activeIndex;
+  let t4;
+  if ($[3] !== className) {
+    t4 = clsx("cursor-row flex w-full gap-2 rounded-md px-2 py-1 text-left text-xs text-text-muted", className);
+    $[3] = className;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== index || $[6] !== menus) {
+    t5 = () => menus.setMenuIndex(index);
+    $[5] = index;
+    $[6] = menus;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== children || $[9] !== onPick || $[10] !== t1 || $[11] !== t2 || $[12] !== t3 || $[13] !== t4 || $[14] !== t5) {
+    t6 = /*#__PURE__*/_jsx("button", {
+      id: t1,
+      role: "option",
+      "aria-selected": t2,
+      tabIndex: -1,
+      "data-active": t3,
+      className: t4,
+      onMouseEnter: t5,
+      onMouseDown: _temp,
+      onClick: onPick,
+      children: children
+    });
+    $[8] = children;
+    $[9] = onPick;
+    $[10] = t1;
+    $[11] = t2;
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = t5;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  return t6;
 }
-function CommandMenu({ menus }) {
-    const { t } = useTranslation('agent-chat');
-    return (_jsx("div", { id: menus.listId, role: "listbox", "aria-label": t('composer.menu.commands'), className: "border-b border-border px-1.5 py-1.5", children: menus.commands.map((command, index) => (_jsxs(MenuOption, { menus: menus, index: index, className: "items-center", onPick: () => menus.pickCommand(command, index), children: [_jsx(Icon, { icon: command.skill ? Zap : SquareSlash, size: 12, className: clsx('shrink-0', command.skill ? 'text-skill' : 'text-text-faint') }), _jsxs("span", { className: "font-mono text-text", children: ["/", command.name] }), _jsx("span", { className: "text-text-faint", children: command.hint })] }, command.name))) }));
+function _temp(e) {
+  return e.preventDefault();
 }
-function SkillMenu({ menus }) {
-    const { t } = useTranslation('agent-chat');
-    return (_jsx("div", { id: menus.listId, role: "listbox", "aria-label": t('composer.menu.skills'), className: "border-b border-border px-1.5 py-1.5", children: menus.skillMatches.map((skill, index) => (_jsxs(MenuOption, { menus: menus, index: index, className: "items-start", onPick: () => menus.chooseSkill(skill.name), children: [_jsx(Icon, { icon: Zap, size: 12, className: "mt-0.5 shrink-0 text-skill" }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsxs("span", { className: "truncate font-mono text-text", children: ["$", skill.name] }), skill.description !== '' && _jsx("span", { className: "line-clamp-1 text-text-faint", children: skill.description })] })] }, skill.name))) }));
+function CommandMenu(t0) {
+  const $ = _c(8);
+  const {
+    menus
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const t1 = menus.listId;
+  let t2;
+  if ($[0] !== t) {
+    t2 = t("composer.menu.commands");
+    $[0] = t;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== menus) {
+    t3 = menus.commands.map((command, index) => /*#__PURE__*/_jsxs(MenuOption, {
+      menus: menus,
+      index: index,
+      className: "items-center",
+      onPick: () => menus.pickCommand(command, index),
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: command.skill ? Zap : SquareSlash,
+        size: 12,
+        className: clsx("shrink-0", command.skill ? "text-skill" : "text-text-faint")
+      }), /*#__PURE__*/_jsxs("span", {
+        className: "font-mono text-text",
+        children: ["/", command.name]
+      }), /*#__PURE__*/_jsx("span", {
+        className: "text-text-faint",
+        children: command.hint
+      })]
+    }, command.name));
+    $[2] = menus;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== menus.listId || $[5] !== t2 || $[6] !== t3) {
+    t4 = /*#__PURE__*/_jsx("div", {
+      id: t1,
+      role: "listbox",
+      "aria-label": t2,
+      className: "border-b border-border px-1.5 py-1.5",
+      children: t3
+    });
+    $[4] = menus.listId;
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  return t4;
 }
-function MentionMenu({ menus, query }) {
-    const { t } = useTranslation('agent-chat');
-    const { listId, chatMatches, files, mentionCount } = menus;
-    const mentionsLabelId = `${listId}-chats`;
-    const filesLabelId = `${listId}-files`;
-    const filesLabelShown = query === '' || chatMatches.length > 0;
-    return (_jsxs("div", { className: "border-b border-border px-1.5 py-1.5", children: [mentionCount > 0 && (_jsxs("div", { id: listId, role: "listbox", "aria-label": t('composer.menu.mentions'), children: [chatMatches.length > 0 && (_jsxs("div", { role: "group", "aria-labelledby": mentionsLabelId, children: [_jsx(Menu.Label, { id: mentionsLabelId, children: t('composer.mentions.chats') }), chatMatches.map((chat, index) => (_jsxs(MenuOption, { menus: menus, index: index, className: "items-center", onPick: () => menus.chooseChat(chat.id), children: [_jsx(Icon, { icon: MessageSquare, size: 14, className: "shrink-0 text-text-faint" }), _jsx("span", { className: "truncate text-text", children: chat.title || t('chatReference.untitled') })] }, chat.id)))] })), files.length > 0 && (_jsxs("div", { role: "group", ...(filesLabelShown ? { 'aria-labelledby': filesLabelId } : { 'aria-label': t('composer.mentions.files') }), children: [filesLabelShown && (_jsx(Menu.Label, { id: filesLabelId, children: query === '' ? t('composer.mentions.here') : t('composer.mentions.files') })), files.map((path, index) => {
-                                const { name, dir } = splitPath(path);
-                                return (_jsxs(MenuOption, { menus: menus, index: chatMatches.length + index, className: "items-center", onPick: () => menus.chooseMention(path), children: [_jsx(FileIcon, { path: path, size: 14 }), _jsx("span", { className: "truncate font-mono text-text", children: name }), dir && _jsx(MiddleTruncate, { text: dir, tooltip: false, className: "text-text-faint" })] }, path));
-                            })] }))] })), mentionCount === 0 && (_jsx("div", { className: "px-2 py-1 text-xs text-text-faint", children: query ? t('composer.mentions.noMatch') : t('composer.mentions.empty') }))] }));
+function SkillMenu(t0) {
+  const $ = _c(8);
+  const {
+    menus
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const t1 = menus.listId;
+  let t2;
+  if ($[0] !== t) {
+    t2 = t("composer.menu.skills");
+    $[0] = t;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== menus) {
+    t3 = menus.skillMatches.map((skill, index) => /*#__PURE__*/_jsxs(MenuOption, {
+      menus: menus,
+      index: index,
+      className: "items-start",
+      onPick: () => menus.chooseSkill(skill.name),
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: Zap,
+        size: 12,
+        className: "mt-0.5 shrink-0 text-skill"
+      }), /*#__PURE__*/_jsxs("span", {
+        className: "flex min-w-0 flex-col",
+        children: [/*#__PURE__*/_jsxs("span", {
+          className: "truncate font-mono text-text",
+          children: ["$", skill.name]
+        }), skill.description !== "" && /*#__PURE__*/_jsx("span", {
+          className: "line-clamp-1 text-text-faint",
+          children: skill.description
+        })]
+      })]
+    }, skill.name));
+    $[2] = menus;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== menus.listId || $[5] !== t2 || $[6] !== t3) {
+    t4 = /*#__PURE__*/_jsx("div", {
+      id: t1,
+      role: "listbox",
+      "aria-label": t2,
+      className: "border-b border-border px-1.5 py-1.5",
+      children: t3
+    });
+    $[4] = menus.listId;
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  return t4;
+}
+function MentionMenu(t0) {
+  const $ = _c(18);
+  const {
+    menus,
+    query
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const {
+    listId,
+    chatMatches,
+    files,
+    mentionCount
+  } = menus;
+  const mentionsLabelId = `${listId}-chats`;
+  const filesLabelId = `${listId}-files`;
+  const filesLabelShown = query === "" || chatMatches.length > 0;
+  let t1;
+  if ($[0] !== chatMatches || $[1] !== files || $[2] !== filesLabelId || $[3] !== filesLabelShown || $[4] !== listId || $[5] !== mentionCount || $[6] !== mentionsLabelId || $[7] !== menus || $[8] !== query || $[9] !== t) {
+    t1 = mentionCount > 0 && /*#__PURE__*/_jsxs("div", {
+      id: listId,
+      role: "listbox",
+      "aria-label": t("composer.menu.mentions"),
+      children: [chatMatches.length > 0 && /*#__PURE__*/_jsxs("div", {
+        role: "group",
+        "aria-labelledby": mentionsLabelId,
+        children: [/*#__PURE__*/_jsx(Menu.Label, {
+          id: mentionsLabelId,
+          children: t("composer.mentions.chats")
+        }), chatMatches.map((chat, index) => /*#__PURE__*/_jsxs(MenuOption, {
+          menus: menus,
+          index: index,
+          className: "items-center",
+          onPick: () => menus.chooseChat(chat.id),
+          children: [/*#__PURE__*/_jsx(Icon, {
+            icon: MessageSquare,
+            size: 14,
+            className: "shrink-0 text-text-faint"
+          }), /*#__PURE__*/_jsx("span", {
+            className: "truncate text-text",
+            children: chat.title || t("chatReference.untitled")
+          })]
+        }, chat.id))]
+      }), files.length > 0 && /*#__PURE__*/_jsxs("div", {
+        role: "group",
+        ...(filesLabelShown ? {
+          "aria-labelledby": filesLabelId
+        } : {
+          "aria-label": t("composer.mentions.files")
+        }),
+        children: [filesLabelShown && /*#__PURE__*/_jsx(Menu.Label, {
+          id: filesLabelId,
+          children: query === "" ? t("composer.mentions.here") : t("composer.mentions.files")
+        }), files.map((path, index_0) => {
+          const {
+            name,
+            dir
+          } = splitPath(path);
+          return /*#__PURE__*/_jsxs(MenuOption, {
+            menus: menus,
+            index: chatMatches.length + index_0,
+            className: "items-center",
+            onPick: () => menus.chooseMention(path),
+            children: [/*#__PURE__*/_jsx(FileIcon, {
+              path: path,
+              size: 14
+            }), /*#__PURE__*/_jsx("span", {
+              className: "truncate font-mono text-text",
+              children: name
+            }), dir && /*#__PURE__*/_jsx(MiddleTruncate, {
+              text: dir,
+              tooltip: false,
+              className: "text-text-faint"
+            })]
+          }, path);
+        })]
+      })]
+    });
+    $[0] = chatMatches;
+    $[1] = files;
+    $[2] = filesLabelId;
+    $[3] = filesLabelShown;
+    $[4] = listId;
+    $[5] = mentionCount;
+    $[6] = mentionsLabelId;
+    $[7] = menus;
+    $[8] = query;
+    $[9] = t;
+    $[10] = t1;
+  } else {
+    t1 = $[10];
+  }
+  let t2;
+  if ($[11] !== mentionCount || $[12] !== query || $[13] !== t) {
+    t2 = mentionCount === 0 && /*#__PURE__*/_jsx("div", {
+      className: "px-2 py-1 text-xs text-text-faint",
+      children: query ? t("composer.mentions.noMatch") : t("composer.mentions.empty")
+    });
+    $[11] = mentionCount;
+    $[12] = query;
+    $[13] = t;
+    $[14] = t2;
+  } else {
+    t2 = $[14];
+  }
+  let t3;
+  if ($[15] !== t1 || $[16] !== t2) {
+    t3 = /*#__PURE__*/_jsxs("div", {
+      className: "border-b border-border px-1.5 py-1.5",
+      children: [t1, t2]
+    });
+    $[15] = t1;
+    $[16] = t2;
+    $[17] = t3;
+  } else {
+    t3 = $[17];
+  }
+  return t3;
 }
 /* Whichever picker the caret opened, over the box. */
-export function ComposerMenu({ menus }) {
-    if (menus.commandMenuOpen) {
-        return _jsx(CommandMenu, { menus: menus });
+export function ComposerMenu(t0) {
+  const $ = _c(6);
+  const {
+    menus
+  } = t0;
+  if (menus.commandMenuOpen) {
+    let t1;
+    if ($[0] !== menus) {
+      t1 = /*#__PURE__*/_jsx(CommandMenu, {
+        menus: menus
+      });
+      $[0] = menus;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
     }
-    if (menus.skillMenuOpen) {
-        return _jsx(SkillMenu, { menus: menus });
+    return t1;
+  }
+  if (menus.skillMenuOpen) {
+    let t1;
+    if ($[2] !== menus) {
+      t1 = /*#__PURE__*/_jsx(SkillMenu, {
+        menus: menus
+      });
+      $[2] = menus;
+      $[3] = t1;
+    } else {
+      t1 = $[3];
     }
-    if (menus.mentionMenuOpen && menus.mention !== null) {
-        return _jsx(MentionMenu, { menus: menus, query: menus.mention.query });
+    return t1;
+  }
+  if (menus.mentionMenuOpen && menus.mention !== null) {
+    let t1;
+    if ($[4] !== menus) {
+      t1 = /*#__PURE__*/_jsx(MentionMenu, {
+        menus: menus,
+        query: menus.mention.query
+      });
+      $[4] = menus;
+      $[5] = t1;
+    } else {
+      t1 = $[5];
     }
-    return null;
-}
+    return t1;
+  }
+  return null;
+}

package/dist/chat/ui/composer/DraftParts.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useTranslation } from 'react-i18next';
 import { Paperclip, X } from 'lucide-react';
 import { Icon, IconButton, Tooltip } from '@adecore/ui';
@@ -7,19 +7,193 @@ import { formatBytes, isImageAttachment, uploadBytes } from '../../attachments.j
 import { jumpToTimelineItem } from '../../timeline-scroll.js';
 import { ChatReferenceChip } from '../ChatReferenceChip.js';
 import { UploadThumb } from '../UploadThumb.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ROW = 'px-5 pt-4 @max-md/composer:px-3.5 @max-md/composer:pt-3';
 /* The quote that goes above the message, as a blockquote. */
-export function DraftQuote({ chatId, quote, source, onRemove, onSourceGone }) {
-    const { t } = useTranslation('agent-chat');
-    const scope = useChatScope();
-    return (_jsxs("div", { className: `flex items-center gap-2 ${ROW}`, children: [source === null ? (_jsx("span", { className: "min-w-0 grow truncate border-l-2 border-border-strong pl-2.5 text-xs text-text-muted", children: quote })) : (_jsx(Tooltip, { label: t('composer.quote.goToSource'), children: _jsx("button", { type: "button", className: "min-w-0 grow truncate border-l-2 border-border-strong pl-2.5 text-left text-xs text-text-muted hover:text-text", onClick: () => jumpToTimelineItem(scope.keyOf(chatId), source, { flash: true, onMissing: onSourceGone }), children: quote }) })), _jsx(IconButton, { icon: X, size: "2xs", label: t('composer.quote.remove'), onClick: onRemove })] }));
+export function DraftQuote(t0) {
+  const $ = _c(15);
+  const {
+    chatId,
+    quote,
+    source,
+    onRemove,
+    onSourceGone
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const scope = useChatScope();
+  let t1;
+  if ($[0] !== chatId || $[1] !== onSourceGone || $[2] !== quote || $[3] !== scope || $[4] !== source || $[5] !== t) {
+    t1 = source === null ? /*#__PURE__*/_jsx("span", {
+      className: "min-w-0 grow truncate border-l-2 border-border-strong pl-2.5 text-xs text-text-muted",
+      children: quote
+    }) : /*#__PURE__*/_jsx(Tooltip, {
+      label: t("composer.quote.goToSource"),
+      children: /*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: "min-w-0 grow truncate border-l-2 border-border-strong pl-2.5 text-left text-xs text-text-muted hover:text-text",
+        onClick: () => jumpToTimelineItem(scope.keyOf(chatId), source, {
+          flash: true,
+          onMissing: onSourceGone
+        }),
+        children: quote
+      })
+    });
+    $[0] = chatId;
+    $[1] = onSourceGone;
+    $[2] = quote;
+    $[3] = scope;
+    $[4] = source;
+    $[5] = t;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  let t2;
+  if ($[7] !== t) {
+    t2 = t("composer.quote.remove");
+    $[7] = t;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  let t3;
+  if ($[9] !== onRemove || $[10] !== t2) {
+    t3 = /*#__PURE__*/_jsx(IconButton, {
+      icon: X,
+      size: "2xs",
+      label: t2,
+      onClick: onRemove
+    });
+    $[9] = onRemove;
+    $[10] = t2;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  let t4;
+  if ($[12] !== t1 || $[13] !== t3) {
+    t4 = /*#__PURE__*/_jsxs("div", {
+      className: `flex items-center gap-2 ${ROW}`,
+      children: [t1, t3]
+    });
+    $[12] = t1;
+    $[13] = t3;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  return t4;
 }
 /* Other chats the message points at, beside the text rather than in it. */
-export function DraftChats({ chats, onRemove }) {
-    return (_jsx("div", { className: `flex flex-wrap gap-1.5 ${ROW}`, children: chats.map((id) => (_jsx(ChatReferenceChip, { chatId: id, onRemove: () => onRemove(id) }, id))) }));
+export function DraftChats(t0) {
+  const $ = _c(7);
+  const {
+    chats,
+    onRemove
+  } = t0;
+  let t1;
+  if ($[0] !== chats || $[1] !== onRemove) {
+    let t2;
+    if ($[3] !== onRemove) {
+      t2 = id => /*#__PURE__*/_jsx(ChatReferenceChip, {
+        chatId: id,
+        onRemove: () => onRemove(id)
+      }, id);
+      $[3] = onRemove;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    t1 = chats.map(t2);
+    $[0] = chats;
+    $[1] = onRemove;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[5] !== t1) {
+    t2 = /*#__PURE__*/_jsx("div", {
+      className: `flex flex-wrap gap-1.5 ${ROW}`,
+      children: t1
+    });
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
 }
 /* The files the message carries: an image as a thumbnail, anything else by its name and size. */
-export function DraftAttachments({ attachments, onRemove }) {
-    const { t } = useTranslation('agent-chat');
-    return (_jsx("div", { className: `flex flex-wrap gap-2 ${ROW}`, children: attachments.map((attachment, index) => (_jsxs("div", { className: "group/thumb relative", children: [isImageAttachment(attachment.mime) ? (_jsx(UploadThumb, { upload: attachment })) : (_jsxs("span", { className: "flex h-14 w-36 flex-col justify-center gap-0.5 rounded-lg border border-border bg-surface-sunken px-2.5", children: [_jsxs("span", { className: "flex items-center gap-1.5 text-xs text-text", children: [_jsx(Icon, { icon: Paperclip, size: 12, className: "shrink-0 text-text-faint" }), _jsx("span", { className: "truncate", children: attachment.name })] }), _jsx("span", { className: "pl-5 text-xs text-text-faint", children: formatBytes(uploadBytes(attachment)) })] })), _jsx(IconButton, { icon: X, size: "2xs", label: t('composer.removeAttachment', { name: attachment.name }), className: "absolute -top-1.5 -right-1.5 border border-border bg-surface-raised opacity-0 transition-opacity group-hover/thumb:opacity-100 focus-visible:opacity-100", onClick: () => onRemove(index) })] }, `${attachment.name}-${index}`))) }));
-}
+export function DraftAttachments(t0) {
+  const $ = _c(9);
+  const {
+    attachments,
+    onRemove
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  let t1;
+  if ($[0] !== attachments || $[1] !== onRemove || $[2] !== t) {
+    let t2;
+    if ($[4] !== onRemove || $[5] !== t) {
+      t2 = (attachment, index) => /*#__PURE__*/_jsxs("div", {
+        className: "group/thumb relative",
+        children: [isImageAttachment(attachment.mime) ? /*#__PURE__*/_jsx(UploadThumb, {
+          upload: attachment
+        }) : /*#__PURE__*/_jsxs("span", {
+          className: "flex h-14 w-36 flex-col justify-center gap-0.5 rounded-lg border border-border bg-surface-sunken px-2.5",
+          children: [/*#__PURE__*/_jsxs("span", {
+            className: "flex items-center gap-1.5 text-xs text-text",
+            children: [/*#__PURE__*/_jsx(Icon, {
+              icon: Paperclip,
+              size: 12,
+              className: "shrink-0 text-text-faint"
+            }), /*#__PURE__*/_jsx("span", {
+              className: "truncate",
+              children: attachment.name
+            })]
+          }), /*#__PURE__*/_jsx("span", {
+            className: "pl-5 text-xs text-text-faint",
+            children: formatBytes(uploadBytes(attachment))
+          })]
+        }), /*#__PURE__*/_jsx(IconButton, {
+          icon: X,
+          size: "2xs",
+          label: t("composer.removeAttachment", {
+            name: attachment.name
+          }),
+          className: "absolute -top-1.5 -right-1.5 border border-border bg-surface-raised opacity-0 transition-opacity group-hover/thumb:opacity-100 focus-visible:opacity-100",
+          onClick: () => onRemove(index)
+        })]
+      }, `${attachment.name}-${index}`);
+      $[4] = onRemove;
+      $[5] = t;
+      $[6] = t2;
+    } else {
+      t2 = $[6];
+    }
+    t1 = attachments.map(t2);
+    $[0] = attachments;
+    $[1] = onRemove;
+    $[2] = t;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[7] !== t1) {
+    t2 = /*#__PURE__*/_jsx("div", {
+      className: `flex flex-wrap gap-2 ${ROW}`,
+      children: t1
+    });
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+}