@copilotz/chat-ui 0.9.4 → 0.9.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -1179,6 +1179,7 @@ var Message = (0, import_react2.memo)(({
1179
1179
  const [isEditing, setIsEditing] = (0, import_react2.useState)(false);
1180
1180
  const [editContent, setEditContent] = (0, import_react2.useState)(message.content);
1181
1181
  const [showActions, setShowActions] = (0, import_react2.useState)(false);
1182
+ const [actionsFocused, setActionsFocused] = (0, import_react2.useState)(false);
1182
1183
  const [copied, setCopied] = (0, import_react2.useState)(false);
1183
1184
  const messageIsUser = isUser ?? message.role === "user";
1184
1185
  if (!hasRenderableAssistantBody(message)) {
@@ -1192,7 +1193,6 @@ var Message = (0, import_react2.memo)(({
1192
1193
  compactMode
1193
1194
  });
1194
1195
  const canEdit = enableEdit && messageIsUser;
1195
- const canRegenerate = enableRegenerate && !messageIsUser;
1196
1196
  const normalizedPreviewChars = Math.max(longMessagePreviewChars, 1);
1197
1197
  const normalizedChunkChars = Math.max(longMessageChunkChars, 1);
1198
1198
  const previewOverride = typeof message.metadata?.previewContent === "string" ? message.metadata.previewContent : void 0;
@@ -1226,9 +1226,6 @@ var Message = (0, import_react2.memo)(({
1226
1226
  setEditContent(message.content);
1227
1227
  setIsEditing(false);
1228
1228
  };
1229
- const handleRegenerate = () => {
1230
- onAction?.({ action: "regenerate", messageId: message.id });
1231
- };
1232
1229
  const handleToggleExpanded = () => {
1233
1230
  onToggleExpanded?.(message.id);
1234
1231
  };
@@ -1244,6 +1241,12 @@ var Message = (0, import_react2.memo)(({
1244
1241
  className: `flex w-full flex-col ${className} max-w-[800px] mx-auto`,
1245
1242
  onMouseEnter: () => setShowActions(true),
1246
1243
  onMouseLeave: () => setShowActions(false),
1244
+ onFocusCapture: () => setActionsFocused(true),
1245
+ onBlurCapture: (event) => {
1246
+ if (!event.currentTarget.contains(event.relatedTarget)) {
1247
+ setActionsFocused(false);
1248
+ }
1249
+ },
1247
1250
  children: [
1248
1251
  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `flex gap-3 ${messageIsUser ? "flex-row-reverse" : "flex-row"} w-full mb-1`, children: [
1249
1252
  showAvatar && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex-shrink-0 ${compactMode ? "mt-1" : "mt-0"}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -1269,8 +1272,8 @@ var Message = (0, import_react2.memo)(({
1269
1272
  message.isEdited && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Badge, { variant: "outline", className: "text-xs", children: "editado" })
1270
1273
  ] })
1271
1274
  ] }),
1272
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex-1 min-w-0 ${messageIsUser ? "text-right" : "text-left"} ${horizontalOffsetClass}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `relative overflow-hidden text-left ${messageIsUser ? "ml-auto inline-flex max-w-[85%] flex-col rounded-lg bg-primary p-3 text-primary-foreground" : "flex w-full max-w-full flex-col"}`, children: [
1273
- isEditing ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-2", children: [
1275
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `flex-1 min-w-0 ${messageIsUser ? "text-right" : "text-left"} ${horizontalOffsetClass}`, children: [
1276
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `relative overflow-hidden text-left ${messageIsUser ? "ml-auto inline-flex max-w-[85%] flex-col rounded-lg bg-primary p-3 text-primary-foreground" : "flex w-full max-w-full flex-col"}`, children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-2", children: [
1274
1277
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
1275
1278
  Textarea,
1276
1279
  {
@@ -1323,49 +1326,44 @@ var Message = (0, import_react2.memo)(({
1323
1326
  }
1324
1327
  ) }),
1325
1328
  message.attachments && message.attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3 space-y-2", children: message.attachments.map((attachment, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MediaRenderer, { attachment }, index)) })
1326
- ] }),
1327
- !isEditing && (showActions || copied) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `absolute -top-2 flex gap-1 ${messageIsUser ? "-left-2" : "-right-2"}`, children: [
1328
- enableCopy && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tooltip, { children: [
1329
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
1330
- Button,
1331
- {
1332
- variant: "secondary",
1333
- size: "icon",
1334
- className: "h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity",
1335
- onClick: handleCopy,
1336
- children: copied ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Check, { className: "h-3 w-3 text-green-500" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Copy, { className: "h-3 w-3" })
1337
- }
1338
- ) }),
1339
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipContent, { children: copied ? "Copiado!" : "Copiar" })
1340
- ] }),
1341
- canEdit && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tooltip, { children: [
1342
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
1343
- Button,
1344
- {
1345
- variant: "secondary",
1346
- size: "icon",
1347
- className: "h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity",
1348
- onClick: handleEdit,
1349
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Edit, { className: "h-3 w-3" })
1350
- }
1351
- ) }),
1352
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipContent, { children: "Editar" })
1353
- ] }),
1354
- canRegenerate && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tooltip, { children: [
1355
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
1356
- Button,
1357
- {
1358
- variant: "secondary",
1359
- size: "icon",
1360
- className: "h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity",
1361
- onClick: handleRegenerate,
1362
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.RotateCcw, { className: "h-3 w-3" })
1363
- }
1364
- ) }),
1365
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipContent, { children: "Regenerar" })
1366
- ] })
1367
- ] })
1368
- ] }) })
1329
+ ] }) }),
1330
+ !isEditing && (showActions || actionsFocused || copied) && (enableCopy || canEdit) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
1331
+ "div",
1332
+ {
1333
+ className: `mt-1 flex items-center gap-1 text-muted-foreground transition-opacity ${messageIsUser ? "justify-end" : "justify-start"}`,
1334
+ children: [
1335
+ canEdit && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tooltip, { children: [
1336
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
1337
+ Button,
1338
+ {
1339
+ type: "button",
1340
+ variant: "ghost",
1341
+ size: "icon",
1342
+ className: "h-7 w-7",
1343
+ onClick: handleEdit,
1344
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Edit, { className: "h-3.5 w-3.5" })
1345
+ }
1346
+ ) }),
1347
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipContent, { children: labels?.editMessage || "Edit" })
1348
+ ] }),
1349
+ enableCopy && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tooltip, { children: [
1350
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
1351
+ Button,
1352
+ {
1353
+ type: "button",
1354
+ variant: "ghost",
1355
+ size: "icon",
1356
+ className: "h-7 w-7",
1357
+ onClick: handleCopy,
1358
+ children: copied ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Check, { className: "h-3.5 w-3.5 text-green-500" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Copy, { className: "h-3.5 w-3.5" })
1359
+ }
1360
+ ) }),
1361
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipContent, { children: copied ? "Copied" : labels?.copyMessage || "Copy" })
1362
+ ] })
1363
+ ]
1364
+ }
1365
+ )
1366
+ ] })
1369
1367
  ]
1370
1368
  }
1371
1369
  );