@burdenoff/microfe-planmagnet 2026.1001.8 → 2026.1002.2

package/dist/planmagnet/comments/CommentThread.js

@@ -3,151 +3,170 @@ import { PersonName as t, usePersonProfile as n } from "../people/People.js";
 import { isForbidden as r, mutationErrorMessage as i } from "../utils/graphqlErrors.js";
 import { throwOnError as a } from "../utils/mutationResult.js";
 import { ConfirmButton as o, ErrorLine as s } from "../controls/ConfirmButton.js";
-import { MentionComposer as c, MentionText as l } from "./MentionComposer.js";
-import { TypingLine as u } from "../presence/PresenceAvatars.js";
-import { useEffect as d, useState as f } from "react";
-import { CheckCircle2 as p, ChevronDown as m, ChevronRight as h, Reply as g, RotateCcw as _, Trash2 as v } from "lucide-react";
-import { useMutation as y, useQuery as b } from "@apollo/client/react";
-import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
-import { Button as w } from "@burdenoff/fe-libs/ui";
+import { MentionComposer as c } from "./MentionComposer.js";
+import { CommentBody as l } from "./CommentBody.js";
+import { appendImageEmbed as ee, removeImageEmbed as te } from "./commentImageTokens.js";
+import { CommentAttachments as u } from "./CommentAttachments.js";
+import { CommentAttachmentUpload as ne } from "./CommentAttachmentUpload.js";
+import { TypingLine as d } from "../presence/PresenceAvatars.js";
+import { useEffect as f, useRef as re, useState as p } from "react";
+import { CheckCircle2 as m, ChevronDown as ie, ChevronRight as ae, Reply as h, RotateCcw as g, Trash2 as oe } from "lucide-react";
+import { useMutation as _, useQuery as v } from "@apollo/client/react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { Button as S } from "@burdenoff/fe-libs/ui";
 //#region src/planmagnet/comments/CommentThread.tsx
-var T = 30, E = 1e4, D = (e) => new Date(e).toLocaleString();
-function O({ targetNoun: t, idPrefix: n, query: o, add: l, edit: p, remove: m, resolve: h, refetchQueries: g, onTotalCount: _, presence: v }) {
-	let { currentUser: x, workspaceId: D, authToken: O, apiGatewayUrl: A } = e(), [j, M] = f(""), [N, P] = f(null), [F, I] = f(!1), [L, R] = f("ALL"), z = {
-		refetchQueries: g,
+var C = 30, w = 1e4, T = (e) => new Date(e).toLocaleString();
+function E({ target: t, targetNoun: n, idPrefix: o, query: l, add: u, edit: re, remove: m, resolve: ie, refetchQueries: ae, onTotalCount: h, presence: g }) {
+	let { currentUser: oe, workspaceId: y, authToken: T, apiGatewayUrl: E } = e(), [O, k] = p(""), [A, j] = p(null), [M, N] = p(!1), [P, F] = p("ALL"), [I, L] = p({
+		fileIds: [],
+		pending: !1
+	}), [R, z] = p(0), B = {
+		refetchQueries: ae,
 		awaitRefetchQueries: !0
-	}, { data: B, loading: V, error: H, fetchMore: U } = b(o.document, {
+	}, { data: se, loading: V, error: ce, fetchMore: H } = v(l.document, {
 		variables: {
-			...o.variables,
-			pagination: { first: T }
+			...l.variables,
+			pagination: { first: C }
 		},
-		skip: o.skip
-	}), [ee, W] = y(l.document, z), G = B?.[o.dataKey], K = G?.items ?? [], q = L === "ALL" ? K : K.filter((e) => e.status === L), J = K.filter((e) => e.status === "OPEN").length, Y = K.length - J, X = j.trim(), Z = X.length > E;
-	d(() => {
-		G && _?.(G.totalCount);
-	}, [G, _]);
-	let te = async (e, t) => {
-		P(null);
+		skip: l.skip
+	}), [U, W] = _(u.document, B), G = se?.[l.dataKey], K = G?.items ?? [], q = P === "ALL" ? K : K.filter((e) => e.status === P), J = K.filter((e) => e.status === "OPEN").length, le = K.length - J, Y = O.trim(), X = Y.length > w;
+	f(() => {
+		G && h?.(G.totalCount);
+	}, [G, h]);
+	let ue = async (e, t, n) => {
+		j(null);
 		try {
-			return await a(ee({ variables: l.buildVariables(e, t) })), !0;
+			return await a(U({ variables: u.buildVariables(e, t, n) })), !0;
 		} catch (e) {
-			return P(r(e) ? "Your role can read but not comment." : i(e, "The comment could not be posted.")), !1;
+			return j(r(e) ? "Your role can read but not comment." : i(e, "The comment could not be posted.")), !1;
 		}
-	}, ne = async () => {
-		await te(X, null) && M("");
-	}, re = async () => {
+	}, de = async () => {
+		await ue(Y, null, I.fileIds) && (k(""), L({
+			fileIds: [],
+			pending: !1
+		}), z((e) => e + 1));
+	}, fe = async () => {
 		let e = G?.pageInfo.endCursor;
 		if (e) {
-			I(!0);
+			N(!0);
 			try {
-				await U({
+				await H({
 					variables: {
-						...o.variables,
+						...l.variables,
 						pagination: {
-							first: T,
+							first: C,
 							after: e
 						}
 					},
-					updateQuery: (e, { fetchMoreResult: t }) => ({ [o.dataKey]: {
-						...t[o.dataKey],
-						items: [...e[o.dataKey].items, ...t[o.dataKey].items]
+					updateQuery: (e, { fetchMoreResult: t }) => ({ [l.dataKey]: {
+						...t[l.dataKey],
+						items: [...e[l.dataKey].items, ...t[l.dataKey].items]
 					} })
 				});
 			} finally {
-				I(!1);
+				N(!1);
 			}
 		}
 	};
-	return /* @__PURE__ */ C("div", {
+	return /* @__PURE__ */ x("div", {
 		className: "space-y-4",
 		"data-testid": "comment-thread",
 		children: [
-			N && /* @__PURE__ */ S(s, { message: N }),
-			V && !B && /* @__PURE__ */ S("p", {
+			A && /* @__PURE__ */ b(s, { message: A }),
+			V && !se && /* @__PURE__ */ b("p", {
 				className: "text-sm text-muted-foreground",
 				children: "Loading comments…"
 			}),
-			H && /* @__PURE__ */ S(s, { message: `Comments could not be loaded: ${H.message}` }),
-			G && K.length > 0 && /* @__PURE__ */ S("div", {
+			ce && /* @__PURE__ */ b(s, { message: `Comments could not be loaded: ${ce.message}` }),
+			G && K.length > 0 && /* @__PURE__ */ b("div", {
 				role: "group",
 				"aria-label": "Filter comments by resolution",
 				"data-testid": "comment-filter",
 				className: "flex flex-wrap gap-1",
 				children: [
 					["OPEN", `Open (${J})`],
-					["RESOLVED", `Resolved (${Y})`],
+					["RESOLVED", `Resolved (${le})`],
 					["ALL", `All (${K.length})`]
-				].map(([e, t]) => /* @__PURE__ */ S(w, {
+				].map(([e, t]) => /* @__PURE__ */ b(S, {
 					type: "button",
 					size: "sm",
-					variant: L === e ? "default" : "outline",
-					"aria-pressed": L === e,
+					variant: P === e ? "default" : "outline",
+					"aria-pressed": P === e,
 					className: "h-7 px-2.5 text-xs",
-					onClick: () => R(e),
+					onClick: () => F(e),
 					children: t
 				}, e))
 			}),
-			G && q.length === 0 && /* @__PURE__ */ S("p", {
+			G && q.length === 0 && /* @__PURE__ */ b("p", {
 				className: "text-sm text-muted-foreground",
 				children: K.length === 0 ? "No comments yet." : "No comments match this filter."
 			}),
-			/* @__PURE__ */ S("ol", {
+			/* @__PURE__ */ b("ol", {
 				className: "space-y-3",
-				children: q.map((e) => /* @__PURE__ */ S(k, {
+				children: q.map((e) => /* @__PURE__ */ b(D, {
 					comment: e,
-					currentUserId: x?.id,
-					editMutation: p,
+					target: t,
+					currentUserId: oe?.id,
+					editMutation: re,
 					removeMutation: m,
-					resolveMutation: h,
-					addMutation: l.document,
-					buildReplyVariables: (t) => l.buildVariables(t, e.id),
-					mutationRefetch: z,
-					onError: P,
-					idPrefix: n,
-					workspaceId: D,
-					authToken: O,
-					apiGatewayUrl: A,
-					onTyping: v?.notifyTyping
+					resolveMutation: ie,
+					addMutation: u.document,
+					buildReplyVariables: (t, n) => u.buildVariables(t, e.id, n),
+					mutationRefetch: B,
+					onError: j,
+					idPrefix: o,
+					workspaceId: y,
+					authToken: T,
+					apiGatewayUrl: E,
+					onTyping: g?.notifyTyping
 				}, e.id))
 			}),
-			G?.pageInfo.hasNextPage && /* @__PURE__ */ S(w, {
+			G?.pageInfo.hasNextPage && /* @__PURE__ */ b(S, {
 				size: "sm",
 				variant: "outline",
-				onClick: () => void re(),
-				disabled: F,
-				children: F ? "Loading…" : `Show more (${K.length} of ${G.totalCount})`
+				onClick: () => void fe(),
+				disabled: M,
+				children: M ? "Loading…" : `Show more (${K.length} of ${G.totalCount})`
 			}),
-			v && /* @__PURE__ */ S(u, { typingActorIds: v.typingActorIds }),
-			/* @__PURE__ */ C("div", {
+			g && /* @__PURE__ */ b(d, { typingActorIds: g.typingActorIds }),
+			/* @__PURE__ */ x("div", {
 				className: "space-y-2 border-t border-border-default pt-4",
 				children: [
-					/* @__PURE__ */ S("label", {
-						htmlFor: `${n}-add`,
+					/* @__PURE__ */ b("label", {
+						htmlFor: `${o}-add`,
 						className: "sr-only",
 						children: "Add a comment"
 					}),
-					/* @__PURE__ */ S(c, {
-						id: `${n}-add`,
-						ariaLabel: `Add a comment on this ${t}`,
+					/* @__PURE__ */ b(c, {
+						id: `${o}-add`,
+						ariaLabel: `Add a comment on this ${n}`,
 						placeholder: "Add a comment…",
 						className: "min-h-[72px]",
-						value: j,
+						value: O,
+						disabled: W.loading,
 						onChange: (e) => {
-							M(e), v?.notifyTyping();
+							k(e), g?.notifyTyping();
 						},
-						workspaceId: D,
-						authToken: O,
-						apiGatewayUrl: A
+						workspaceId: y,
+						authToken: T,
+						apiGatewayUrl: E
 					}),
-					Z && /* @__PURE__ */ S(s, { message: `A comment can be at most ${E} characters.` }),
-					/* @__PURE__ */ S("div", {
+					X && /* @__PURE__ */ b(s, { message: `A comment can be at most ${w} characters.` }),
+					/* @__PURE__ */ b(ne, {
+						idPrefix: `${o}-add`,
+						disabled: W.loading,
+						onChange: L,
+						onInsertImage: (e, t) => k((n) => ee(n, e, t)),
+						onRemoveImage: (e) => k((t) => te(t, e))
+					}, R),
+					/* @__PURE__ */ b("div", {
 						className: "flex justify-end",
-						children: /* @__PURE__ */ S(w, {
+						children: /* @__PURE__ */ b(S, {
 							size: "sm",
-							onClick: () => void ne(),
-							disabled: !X || Z || W.loading,
+							onClick: () => void de(),
+							disabled: !Y || X || W.loading || I.pending,
 							"data-testid": "comment-post",
-							children: W.loading ? "Posting…" : "Comment"
+							children: W.loading ? "Posting…" : I.pending ? "Preparing attachments…" : "Comment"
 						})
 					})
 				]
@@ -155,115 +174,123 @@ function O({ targetNoun: t, idPrefix: n, query: o, add: l, edit: p, remove: m, r
 		]
 	});
 }
-function k({ comment: e, currentUserId: u, editMutation: d, removeMutation: b, resolveMutation: T, addMutation: O, buildReplyVariables: k, mutationRefetch: j, onError: M, idPrefix: N, workspaceId: P, authToken: F, apiGatewayUrl: I, onTyping: L }) {
-	let [R, z] = f(!1), [B, V] = f(e.body), [H, U] = f(e.status !== "RESOLVED"), [ee, W] = f(!1), [G, K] = f(""), [q, J] = f(null), Y = n(e.authorId), [X, Z] = y(d, j), [te, ne] = y(b, j), [re, ie] = y(T, j), [ae, oe] = y(O, j), se = e.authorId === u, Q = e.status === "RESOLVED", ce = B.trim().length > E, le = G.trim().length > E, ue = async () => {
-		M(null);
+function D({ comment: e, target: d, currentUserId: f, editMutation: v, removeMutation: C, resolveMutation: E, addMutation: D, buildReplyVariables: k, mutationRefetch: A, onError: j, idPrefix: M, workspaceId: N, authToken: P, apiGatewayUrl: F, onTyping: I }) {
+	let [L, R] = p(!1), [z, B] = p(e.body), [se, V] = p(e.status !== "RESOLVED"), [ce, H] = p(!1), [U, W] = p(""), [G, K] = p(null), [q, J] = p({
+		fileIds: [],
+		pending: !1
+	}), [le, Y] = p(0), X = re(0), ue = () => {
+		X.current += 1, J({
+			fileIds: [],
+			pending: !1
+		}), Y(X.current);
+	}, de = n(e.authorId), [fe, pe] = _(v, A), [me, he] = _(C, A), [ge, _e] = _(E, A), [ve, Z] = _(D, A), ye = e.authorId === f, Q = e.status === "RESOLVED", be = z.trim().length > w, xe = U.trim().length > w, Se = async () => {
+		j(null);
 		try {
-			await a(X({ variables: {
+			await a(fe({ variables: {
 				id: e.id,
-				body: B.trim()
-			} })), z(!1);
+				body: z.trim()
+			} })), R(!1);
 		} catch (e) {
-			M(i(e, "The comment could not be saved."));
+			j(i(e, "The comment could not be saved."));
 		}
-	}, de = async () => {
-		M(null);
+	}, Ce = async () => {
+		j(null);
 		try {
-			await a(te({ variables: { id: e.id } }));
+			await a(me({ variables: { id: e.id } }));
 		} catch (e) {
-			M(i(e, "The comment could not be deleted."));
+			j(i(e, "The comment could not be deleted."));
 		}
-	}, fe = async () => {
-		M(null);
+	}, we = async () => {
+		j(null);
 		try {
-			await a(re({ variables: {
+			await a(ge({ variables: {
 				id: e.id,
 				resolved: !Q
 			} }));
 		} catch (e) {
-			M(r(e) ? "Your role can read but not resolve comments." : i(e, "The resolution could not be changed."));
+			j(r(e) ? "Your role can read but not resolve comments." : i(e, "The resolution could not be changed."));
 		}
-	}, pe = (e, t, n) => {
-		J(e), K(t && n ? `@[${n}](${t}) ` : ""), W(!0), U(!0);
-	}, me = async () => {
-		let e = G.trim();
+	}, Te = (e, t, n) => {
+		K(e), W(t && n ? `@[${n}](${t}) ` : ""), H(!0), V(!0);
+	}, Ee = async () => {
+		let e = U.trim();
 		if (e) {
-			M(null);
+			j(null);
 			try {
-				await a(ae({ variables: k(e) })), K(""), W(!1), J(null);
+				await a(ve({ variables: k(e, q.fileIds) })), W(""), H(!1), K(null), ue();
 			} catch (e) {
-				M(r(e) ? "Your role can read but not comment." : i(e, "The reply could not be posted."));
+				j(r(e) ? "Your role can read but not comment." : i(e, "The reply could not be posted."));
 			}
 		}
-	}, $ = `${N}-comment-${e.id}`;
-	return /* @__PURE__ */ S("li", {
+	}, $ = `${M}-comment-${e.id}`;
+	return /* @__PURE__ */ b("li", {
 		className: "rounded-md border border-border-default p-3 space-y-2",
 		"data-testid": "comment-thread-item",
-		children: Q && !H ? /* @__PURE__ */ C("div", {
+		children: Q && !se ? /* @__PURE__ */ x("div", {
 			className: "flex items-center justify-between gap-2",
-			children: [/* @__PURE__ */ C("p", {
+			children: [/* @__PURE__ */ x("p", {
 				className: "min-w-0 truncate text-sm text-muted-foreground",
 				children: [
-					/* @__PURE__ */ S(p, {
+					/* @__PURE__ */ b(m, {
 						className: "mr-1 inline h-3.5 w-3.5 text-status-success-text",
 						"aria-hidden": "true"
 					}),
 					"Resolved by ",
-					/* @__PURE__ */ S(t, { id: e.resolvedBy }),
-					e.resolvedAt ? ` · ${D(e.resolvedAt)}` : "",
+					/* @__PURE__ */ b(t, { id: e.resolvedBy }),
+					e.resolvedAt ? ` · ${T(e.resolvedAt)}` : "",
 					e.replies.length > 0 ? ` · ${e.replies.length} repl${e.replies.length === 1 ? "y" : "ies"}` : ""
 				]
-			}), /* @__PURE__ */ C(w, {
+			}), /* @__PURE__ */ x(S, {
 				size: "sm",
 				variant: "ghost",
 				className: "h-6 shrink-0 px-2 text-xs",
 				"aria-expanded": !1,
 				"aria-controls": $,
-				onClick: () => U(!0),
-				children: [/* @__PURE__ */ S(h, {
+				onClick: () => V(!0),
+				children: [/* @__PURE__ */ b(ae, {
 					className: "mr-1 h-3.5 w-3.5",
 					"aria-hidden": "true"
 				}), "Expand"]
 			})]
-		}) : /* @__PURE__ */ C("div", {
+		}) : /* @__PURE__ */ x("div", {
 			id: $,
 			className: "space-y-2",
 			children: [
-				/* @__PURE__ */ C("div", {
+				/* @__PURE__ */ x("div", {
 					className: "flex items-start justify-between gap-2 text-xs text-muted-foreground",
-					children: [/* @__PURE__ */ C("span", { children: [
-						/* @__PURE__ */ S("span", {
+					children: [/* @__PURE__ */ x("span", { children: [
+						/* @__PURE__ */ b("span", {
 							className: "font-medium text-foreground",
-							children: /* @__PURE__ */ S(t, { id: e.authorId })
+							children: /* @__PURE__ */ b(t, { id: e.authorId })
 						}),
 						" ",
 						"· ",
-						D(e.createdAt),
-						e.editedAt && /* @__PURE__ */ S("span", {
-							title: `Edited ${D(e.editedAt)}`,
+						T(e.createdAt),
+						e.editedAt && /* @__PURE__ */ b("span", {
+							title: `Edited ${T(e.editedAt)}`,
 							children: " · edited"
 						}),
-						Q && /* @__PURE__ */ C("span", {
+						Q && /* @__PURE__ */ x("span", {
 							className: "ml-1 inline-flex items-center gap-1 text-status-success-text",
-							children: [/* @__PURE__ */ S(p, {
+							children: [/* @__PURE__ */ b(m, {
 								className: "h-3.5 w-3.5",
 								"aria-hidden": "true"
 							}), "Resolved"]
 						})
-					] }), /* @__PURE__ */ C("span", {
+					] }), /* @__PURE__ */ x("span", {
 						className: "flex shrink-0 items-center gap-1",
 						children: [
-							se && !R && /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S(w, {
+							ye && !L && /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(S, {
 								size: "sm",
 								variant: "ghost",
 								className: "h-6 px-2 text-xs",
-								onClick: () => z(!0),
+								onClick: () => R(!0),
 								children: "Edit"
-							}), /* @__PURE__ */ S(o, {
+							}), /* @__PURE__ */ b(o, {
 								label: "",
 								ariaLabel: "Delete comment",
 								variant: "outline",
-								icon: /* @__PURE__ */ S(v, {
+								icon: /* @__PURE__ */ b(oe, {
 									className: "h-3.5 w-3.5",
 									"aria-hidden": "true"
 								}),
@@ -271,32 +298,32 @@ function k({ comment: e, currentUserId: u, editMutation: d, removeMutation: b, r
 								description: "It is removed from the discussion for everyone, replies included. This cannot be undone here.",
 								confirmLabel: "Delete",
 								destructive: !0,
-								disabled: ne.loading,
-								onConfirm: () => void de()
+								disabled: he.loading,
+								onConfirm: () => void Ce()
 							})] }),
-							/* @__PURE__ */ S(w, {
+							/* @__PURE__ */ b(S, {
 								size: "sm",
 								variant: Q ? "outline" : "ghost",
 								className: "h-6 px-2 text-xs",
 								"data-testid": "comment-resolve",
-								disabled: ie.loading,
-								onClick: () => void fe(),
-								children: Q ? /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S(_, {
+								disabled: _e.loading,
+								onClick: () => void we(),
+								children: Q ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(g, {
 									className: "mr-1 h-3.5 w-3.5",
 									"aria-hidden": "true"
-								}), "Reopen"] }) : /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S(p, {
+								}), "Reopen"] }) : /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(m, {
 									className: "mr-1 h-3.5 w-3.5",
 									"aria-hidden": "true"
 								}), "Resolve"] })
 							}),
-							Q && /* @__PURE__ */ C(w, {
+							Q && /* @__PURE__ */ x(S, {
 								size: "sm",
 								variant: "ghost",
 								className: "h-6 px-2 text-xs",
 								"aria-expanded": !0,
 								"aria-controls": $,
-								onClick: () => U(!1),
-								children: [/* @__PURE__ */ S(m, {
+								onClick: () => V(!1),
+								children: [/* @__PURE__ */ b(ie, {
 									className: "mr-1 h-3.5 w-3.5",
 									"aria-hidden": "true"
 								}), "Collapse"]
@@ -304,100 +331,120 @@ function k({ comment: e, currentUserId: u, editMutation: d, removeMutation: b, r
 						]
 					})]
 				}),
-				R ? /* @__PURE__ */ C("div", {
+				L ? /* @__PURE__ */ x("div", {
 					className: "space-y-2",
 					children: [
-						/* @__PURE__ */ S(c, {
+						/* @__PURE__ */ b(c, {
 							id: `${$}-edit`,
 							ariaLabel: "Edit comment",
 							className: "min-h-[60px]",
-							value: B,
-							onChange: V,
-							workspaceId: P,
-							authToken: F,
-							apiGatewayUrl: I
+							value: z,
+							onChange: B,
+							workspaceId: N,
+							authToken: P,
+							apiGatewayUrl: F
 						}),
-						ce && /* @__PURE__ */ S(s, { message: `A comment can be at most ${E} characters.` }),
-						/* @__PURE__ */ C("div", {
+						be && /* @__PURE__ */ b(s, { message: `A comment can be at most ${w} characters.` }),
+						/* @__PURE__ */ x("div", {
 							className: "flex justify-end gap-2",
-							children: [/* @__PURE__ */ S(w, {
+							children: [/* @__PURE__ */ b(S, {
 								size: "sm",
 								variant: "outline",
 								onClick: () => {
-									z(!1), V(e.body), M(null);
+									R(!1), B(e.body), j(null);
 								},
 								children: "Cancel"
-							}), /* @__PURE__ */ S(w, {
+							}), /* @__PURE__ */ b(S, {
 								size: "sm",
-								onClick: () => void ue(),
-								disabled: !B.trim() || ce || Z.loading,
-								children: Z.loading ? "Saving…" : "Save"
+								onClick: () => void Se(),
+								disabled: !z.trim() || be || pe.loading,
+								children: pe.loading ? "Saving…" : "Save"
 							})]
 						})
 					]
-				}) : /* @__PURE__ */ S(l, { text: e.body }),
-				!R && /* @__PURE__ */ C(w, {
+				}) : /* @__PURE__ */ b(l, {
+					text: e.body,
+					attachments: e.attachments,
+					target: d
+				}),
+				!L && e.attachments.length > 0 && /* @__PURE__ */ b(u, {
+					attachments: e.attachments,
+					target: d
+				}),
+				!L && /* @__PURE__ */ x(S, {
 					size: "sm",
 					variant: "ghost",
 					className: "h-6 px-2 text-xs",
 					"data-testid": "comment-reply",
-					onClick: () => pe(Y?.displayName ?? "this comment", e.authorId, Y?.displayName),
-					children: [/* @__PURE__ */ S(g, {
+					onClick: () => Te(de?.displayName ?? "this comment", e.authorId, de?.displayName),
+					children: [/* @__PURE__ */ b(h, {
 						className: "mr-1 h-3.5 w-3.5",
 						"aria-hidden": "true"
 					}), "Reply"]
 				}),
-				e.replies.length > 0 && /* @__PURE__ */ S("ol", {
+				e.replies.length > 0 && /* @__PURE__ */ b("ol", {
 					className: "ml-5 space-y-2 border-l border-border-default pl-3",
-					children: e.replies.map((e) => /* @__PURE__ */ S(A, {
+					children: e.replies.map((e) => /* @__PURE__ */ b(O, {
 						reply: e,
-						currentUserId: u,
-						editMutation: d,
-						removeMutation: b,
-						mutationRefetch: j,
-						onError: M,
-						idPrefix: N,
-						workspaceId: P,
-						authToken: F,
-						apiGatewayUrl: I,
-						onReply: pe
+						target: d,
+						currentUserId: f,
+						editMutation: v,
+						removeMutation: C,
+						mutationRefetch: A,
+						onError: j,
+						idPrefix: M,
+						workspaceId: N,
+						authToken: P,
+						apiGatewayUrl: F,
+						onReply: Te
 					}, e.id))
 				}),
-				ee && /* @__PURE__ */ C("div", {
+				ce && /* @__PURE__ */ x("div", {
 					className: "ml-5 space-y-2 border-l border-border-default pl-3",
 					children: [
-						q && /* @__PURE__ */ C("p", {
+						G && /* @__PURE__ */ x("p", {
 							className: "text-xs text-muted-foreground",
-							children: ["Replying to ", q]
+							children: ["Replying to ", G]
 						}),
-						/* @__PURE__ */ S(c, {
+						/* @__PURE__ */ b(c, {
 							id: `${$}-reply`,
 							ariaLabel: "Write a reply",
 							className: "min-h-[60px]",
-							value: G,
+							value: U,
+							disabled: Z.loading,
 							onChange: (e) => {
-								K(e), L?.();
+								W(e), I?.();
 							},
 							autoFocus: !0,
-							workspaceId: P,
-							authToken: F,
-							apiGatewayUrl: I
+							workspaceId: N,
+							authToken: P,
+							apiGatewayUrl: F
 						}),
-						le && /* @__PURE__ */ S(s, { message: `A comment can be at most ${E} characters.` }),
-						/* @__PURE__ */ C("div", {
+						xe && /* @__PURE__ */ b(s, { message: `A comment can be at most ${w} characters.` }),
+						/* @__PURE__ */ b(ne, {
+							idPrefix: `${$}-reply`,
+							disabled: Z.loading,
+							onChange: (e) => {
+								le === X.current && J(e);
+							},
+							onInsertImage: (e, t) => W((n) => ee(n, e, t)),
+							onRemoveImage: (e) => W((t) => te(t, e))
+						}, le),
+						/* @__PURE__ */ x("div", {
 							className: "flex justify-end gap-2",
-							children: [/* @__PURE__ */ S(w, {
+							children: [/* @__PURE__ */ b(S, {
 								size: "sm",
 								variant: "outline",
+								disabled: Z.loading,
 								onClick: () => {
-									W(!1), K(""), J(null);
+									H(!1), W(""), K(null), ue();
 								},
 								children: "Cancel"
-							}), /* @__PURE__ */ S(w, {
+							}), /* @__PURE__ */ b(S, {
 								size: "sm",
-								onClick: () => void me(),
-								disabled: !G.trim() || le || oe.loading,
-								children: oe.loading ? "Posting…" : "Reply"
+								onClick: () => void Ee(),
+								disabled: !U.trim() || xe || Z.loading || q.pending,
+								children: Z.loading ? "Posting…" : q.pending ? "Preparing attachments…" : "Reply"
 							})]
 						})
 					]
@@ -406,56 +453,56 @@ function k({ comment: e, currentUserId: u, editMutation: d, removeMutation: b, r
 		})
 	});
 }
-function A({ reply: e, currentUserId: r, editMutation: u, removeMutation: d, mutationRefetch: p, onError: m, idPrefix: h, workspaceId: _, authToken: b, apiGatewayUrl: x, onReply: T }) {
-	let [O, k] = f(!1), [A, j] = f(e.body), M = n(e.authorId), [N, P] = y(u, p), [F, I] = y(d, p), L = e.authorId === r, R = A.trim().length > E, z = async () => {
-		m(null);
+function O({ reply: e, target: r, currentUserId: ee, editMutation: te, removeMutation: ne, mutationRefetch: d, onError: f, idPrefix: re, workspaceId: m, authToken: ie, apiGatewayUrl: ae, onReply: g }) {
+	let [v, y] = p(!1), [C, E] = p(e.body), D = n(e.authorId), [O, k] = _(te, d), [A, j] = _(ne, d), M = e.authorId === ee, N = C.trim().length > w, P = async () => {
+		f(null);
 		try {
-			await a(N({ variables: {
+			await a(O({ variables: {
 				id: e.id,
-				body: A.trim()
-			} })), k(!1);
+				body: C.trim()
+			} })), y(!1);
 		} catch (e) {
-			m(i(e, "The reply could not be saved."));
+			f(i(e, "The reply could not be saved."));
 		}
-	}, B = async () => {
-		m(null);
+	}, F = async () => {
+		f(null);
 		try {
-			await a(F({ variables: { id: e.id } }));
+			await a(A({ variables: { id: e.id } }));
 		} catch (e) {
-			m(i(e, "The reply could not be deleted."));
+			f(i(e, "The reply could not be deleted."));
 		}
 	};
-	return /* @__PURE__ */ C("li", {
+	return /* @__PURE__ */ x("li", {
 		className: "space-y-1",
 		"data-testid": "comment-reply-item",
 		children: [
-			/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ x("div", {
 				className: "flex items-start justify-between gap-2 text-xs text-muted-foreground",
-				children: [/* @__PURE__ */ C("span", { children: [
-					/* @__PURE__ */ S("span", {
+				children: [/* @__PURE__ */ x("span", { children: [
+					/* @__PURE__ */ b("span", {
 						className: "font-medium text-foreground",
-						children: /* @__PURE__ */ S(t, { id: e.authorId })
+						children: /* @__PURE__ */ b(t, { id: e.authorId })
 					}),
 					" ",
 					"· ",
-					D(e.createdAt),
-					e.editedAt && /* @__PURE__ */ S("span", {
-						title: `Edited ${D(e.editedAt)}`,
+					T(e.createdAt),
+					e.editedAt && /* @__PURE__ */ b("span", {
+						title: `Edited ${T(e.editedAt)}`,
 						children: " · edited"
 					})
-				] }), L && !O && /* @__PURE__ */ C("span", {
+				] }), M && !v && /* @__PURE__ */ x("span", {
 					className: "flex shrink-0 items-center gap-1",
-					children: [/* @__PURE__ */ S(w, {
+					children: [/* @__PURE__ */ b(S, {
 						size: "sm",
 						variant: "ghost",
 						className: "h-6 px-2 text-xs",
-						onClick: () => k(!0),
+						onClick: () => y(!0),
 						children: "Edit"
-					}), /* @__PURE__ */ S(o, {
+					}), /* @__PURE__ */ b(o, {
 						label: "",
 						ariaLabel: "Delete reply",
 						variant: "outline",
-						icon: /* @__PURE__ */ S(v, {
+						icon: /* @__PURE__ */ b(oe, {
 							className: "h-3.5 w-3.5",
 							"aria-hidden": "true"
 						}),
@@ -463,50 +510,58 @@ function A({ reply: e, currentUserId: r, editMutation: u, removeMutation: d, mut
 						description: "It is removed from the discussion for everyone. This cannot be undone here.",
 						confirmLabel: "Delete",
 						destructive: !0,
-						disabled: I.loading,
-						onConfirm: () => void B()
+						disabled: j.loading,
+						onConfirm: () => void F()
 					})]
 				})]
 			}),
-			O ? /* @__PURE__ */ C("div", {
+			v ? /* @__PURE__ */ x("div", {
 				className: "space-y-2",
 				children: [
-					/* @__PURE__ */ S(c, {
-						id: `${h}-reply-${e.id}-edit`,
+					/* @__PURE__ */ b(c, {
+						id: `${re}-reply-${e.id}-edit`,
 						ariaLabel: "Edit reply",
 						className: "min-h-[56px]",
-						value: A,
-						onChange: j,
-						workspaceId: _,
-						authToken: b,
-						apiGatewayUrl: x
+						value: C,
+						onChange: E,
+						workspaceId: m,
+						authToken: ie,
+						apiGatewayUrl: ae
 					}),
-					R && /* @__PURE__ */ S(s, { message: `A comment can be at most ${E} characters.` }),
-					/* @__PURE__ */ C("div", {
+					N && /* @__PURE__ */ b(s, { message: `A comment can be at most ${w} characters.` }),
+					/* @__PURE__ */ x("div", {
 						className: "flex justify-end gap-2",
-						children: [/* @__PURE__ */ S(w, {
+						children: [/* @__PURE__ */ b(S, {
 							size: "sm",
 							variant: "outline",
 							onClick: () => {
-								k(!1), j(e.body), m(null);
+								y(!1), E(e.body), f(null);
 							},
 							children: "Cancel"
-						}), /* @__PURE__ */ S(w, {
+						}), /* @__PURE__ */ b(S, {
 							size: "sm",
-							onClick: () => void z(),
-							disabled: !A.trim() || R || P.loading,
-							children: P.loading ? "Saving…" : "Save"
+							onClick: () => void P(),
+							disabled: !C.trim() || N || k.loading,
+							children: k.loading ? "Saving…" : "Save"
 						})]
 					})
 				]
-			}) : /* @__PURE__ */ S(l, { text: e.body }),
-			!O && /* @__PURE__ */ C(w, {
+			}) : /* @__PURE__ */ b(l, {
+				text: e.body,
+				attachments: e.attachments,
+				target: r
+			}),
+			!v && e.attachments.length > 0 && /* @__PURE__ */ b(u, {
+				attachments: e.attachments,
+				target: r
+			}),
+			!v && /* @__PURE__ */ x(S, {
 				size: "sm",
 				variant: "ghost",
 				className: "h-6 px-2 text-xs",
 				"data-testid": "comment-reply",
-				onClick: () => T(M?.displayName ?? "this reply", e.authorId, M?.displayName),
-				children: [/* @__PURE__ */ S(g, {
+				onClick: () => g(D?.displayName ?? "this reply", e.authorId, D?.displayName),
+				children: [/* @__PURE__ */ b(h, {
 					className: "mr-1 h-3.5 w-3.5",
 					"aria-hidden": "true"
 				}), "Reply"]
@@ -515,6 +570,6 @@ function A({ reply: e, currentUserId: r, editMutation: u, removeMutation: d, mut
 	});
 }
 //#endregion
-export { O as CommentThread };
+export { E as CommentThread };
 
 //# sourceMappingURL=CommentThread.js.map