npm - @burdenoff/microfe-conversations - Versions diffs - 2026.527.2 → 2026.528.2 - Mend

@burdenoff/microfe-conversations 2026.527.2 → 2026.528.2

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.

Files changed (33) hide show

package/dist/conversations/pages/NewConversationPage.js CHANGED Viewed

@@ -1,290 +1,29 @@
 import { useConversations as e } from "../providers/ConversationsProvider.js";
 import { joinPath as t } from "../utils/navigation.js";
-import { useTr as n } from "../utils/i18n.js";
-import { cn as r } from "../utils/cn.js";
-import { PageLayout as i } from "../components/PageLayout.js";
-import { useCreateConversation as a } from "../hooks/useConversationQueries.js";
-import { PermissionGuard as o } from "../components/PermissionGuard.js";
-import { CONVERSATIONS_PERMISSIONS as s } from "../constants/permissions.js";
-import { nativeImpact as c, nativeNotify as l } from "../../utils/nativeBridge.js";
-import { useCallback as u, useMemo as d, useState as f } from "react";
-import { ArrowLeft as p, Globe as m, Hash as h, Lock as g, Megaphone as _, MessageCircle as v, Plus as ee, Shield as y, Users as b, X as x } from "lucide-react";
-import { useNavigate as S } from "react-router-dom";
-import { useEventBus as C } from "@burdenoff/fe-libs/shared/events";
-import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import { PermissionGuard as n } from "../components/PermissionGuard.js";
+import { CONVERSATIONS_PERMISSIONS as r } from "../constants/permissions.js";
+import { NewConversationDialog as i } from "../components/NewConversationDialog.js";
+import { useCallback as a } from "react";
+import { useNavigate as o } from "react-router-dom";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/conversations/pages/NewConversationPage.tsx
-function E(e) {
-	if ("graphQLErrors" in e) {
-		let t = e.graphQLErrors;
-		if (t && t.length > 0 && t[0]?.message) return t[0].message;
-	}
-	return e.message;
-}
-function D() {
-	let D = S(), { basePath: O } = e(), { createConversation: k, loading: A, error: j } = a(), M = C(), N = n(), P = d(() => [
-		{
-			type: "DIRECT",
-			label: N("conversations.directMessage", "Direct Message"),
-			description: N("conversations.directMessageDescription", "One-on-one private conversation"),
-			icon: /* @__PURE__ */ w(v, { size: 20 })
-		},
-		{
-			type: "GROUP",
-			label: N("conversations.groupChat", "Group Chat"),
-			description: N("conversations.groupChatDescription", "Invite multiple people to a group conversation"),
-			icon: /* @__PURE__ */ w(b, { size: 20 })
-		},
-		{
-			type: "CHANNEL",
-			label: N("conversations.channel", "Channel"),
-			description: N("conversations.channelDescription", "A topic-based channel that anyone can join"),
-			icon: /* @__PURE__ */ w(h, { size: 20 })
-		},
-		{
-			type: "ANNOUNCEMENT",
-			label: N("conversations.announcement", "Announcement"),
-			description: N("conversations.announcementDescription", "Broadcast messages to a large audience"),
-			icon: /* @__PURE__ */ w(_, { size: 20 })
-		}
-	], [N]), F = d(() => [
-		{
-			value: "PUBLIC",
-			label: N("conversations.public", "Public"),
-			description: N("conversations.publicDescription", "Anyone in the workspace can discover and join"),
-			icon: /* @__PURE__ */ w(m, { size: 16 })
-		},
-		{
-			value: "PRIVATE",
-			label: N("conversations.private", "Private"),
-			description: N("conversations.privateDescription", "Only invited members can access"),
-			icon: /* @__PURE__ */ w(g, { size: 16 })
-		},
-		{
-			value: "PROTECTED",
-			label: N("conversations.protected", "Protected"),
-			description: N("conversations.protectedDescription", "Discoverable but requires approval to join"),
-			icon: /* @__PURE__ */ w(y, { size: 16 })
-		}
-	], [N]), [I, L] = f("GROUP"), [R, z] = f(""), [B, V] = f(""), [H, U] = f("PRIVATE"), [W, G] = f(""), [K, q] = f([]), J = I === "DIRECT", Y = !J, X = u(() => {
-		let e = W.trim();
-		!e || K.includes(e) || (q(J ? [e] : (t) => [...t, e]), G(""));
-	}, [
-		W,
-		K,
-		J
-	]), Z = u((e) => {
-		q((t) => t.filter((t) => t !== e));
-	}, []), Q = I === "DIRECT" || I === "GROUP", te = u(async () => {
-		if (!(Q && K.length === 0) && !(Y && !R.trim())) {
-			c("light");
-			try {
-				let e = await k({
-					type: I,
-					title: Y ? R.trim() : void 0,
-					description: B.trim() || void 0,
-					participantIds: K,
-					visibility: H
-				});
-				if (!e) {
-					l("error");
-					return;
-				}
-				l("success"), M.emit("conversations.conversation.created", {
-					conversationId: e.id,
-					conversationType: I,
-					source: "new-conversation-page"
-				}), D(t(O || "/conversations", e.id));
-			} catch (e) {
-				throw l("error"), e;
-			}
-		}
-	}, [
-		O,
-		M,
-		Q,
-		K,
-		Y,
-		R,
-		k,
-		I,
-		B,
-		H,
-		D
-	]), $ = (!Q || K.length > 0) && (!Y || R.trim().length > 0);
-	return /* @__PURE__ */ w(o, {
-		permission: s.CONVERSATION_CREATE,
+function c() {
+	let c = o(), { basePath: l } = e(), u = l || "/conversations", d = a((e) => {
+		e || c(`${u}?new=true`, { replace: !0 });
+	}, [c, u]), f = a((e) => {
+		c(t(u, e));
+	}, [c, u]);
+	return /* @__PURE__ */ s(n, {
+		permission: r.CONVERSATION_CREATE,
 		allowUnavailablePermissions: !0,
-		children: /* @__PURE__ */ T(i, {
-			title: N("conversations.newConversation", "New Conversation"),
-			subtitle: N("conversations.newConversationSubtitle", "Start a new conversation with your team"),
-			icon: /* @__PURE__ */ w(ee, { size: 24 }),
-			maxWidth: "lg",
-			headerActions: /* @__PURE__ */ T("button", {
-				type: "button",
-				onClick: () => D(O || "/conversations"),
-				className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors",
-				children: [/* @__PURE__ */ w(p, { size: 16 }), N("conversations.back", "Back")]
-			}),
-			children: [
-				/* @__PURE__ */ T("section", {
-					"data-tour": "conversation-type-selector",
-					className: "space-y-3",
-					children: [/* @__PURE__ */ w("h3", {
-						className: "text-sm font-semibold text-foreground",
-						children: N("conversations.conversationType", "Conversation Type")
-					}), /* @__PURE__ */ w("div", {
-						className: "grid grid-cols-1 sm:grid-cols-2 gap-3",
-						children: P.map((e) => /* @__PURE__ */ T("button", {
-							type: "button",
-							onClick: () => {
-								L(e.type), e.type === "DIRECT" && q((e) => e.slice(0, 1));
-							},
-							className: r("flex items-start gap-3 p-4 rounded-xl border text-left transition-all duration-150", I === e.type ? "border-primary bg-primary/5 ring-1 ring-primary/20" : "border-border hover:border-muted-foreground/30 hover:bg-muted/30"),
-							children: [/* @__PURE__ */ w("div", {
-								className: r("p-2 rounded-lg", I === e.type ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"),
-								children: e.icon
-							}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
-								className: "text-sm font-medium text-foreground",
-								children: e.label
-							}), /* @__PURE__ */ w("p", {
-								className: "text-xs text-muted-foreground mt-0.5",
-								children: e.description
-							})] })]
-						}, e.type))
-					})]
-				}),
-				!J && /* @__PURE__ */ T("section", {
-					"data-tour": "conversation-visibility-selector",
-					className: "space-y-3",
-					children: [
-						/* @__PURE__ */ w("h3", {
-							className: "text-sm font-semibold text-foreground",
-							children: N("conversations.visibility", "Visibility")
-						}),
-						/* @__PURE__ */ w("div", {
-							className: "flex gap-2",
-							children: F.map((e) => /* @__PURE__ */ T("button", {
-								type: "button",
-								onClick: () => U(e.value),
-								className: r("flex items-center gap-2 px-4 py-2.5 rounded-lg border text-sm transition-all", H === e.value ? "border-primary bg-primary/5 text-primary font-medium" : "border-border text-muted-foreground hover:text-foreground hover:bg-muted/30"),
-								children: [e.icon, e.label]
-							}, e.value))
-						}),
-						/* @__PURE__ */ w("p", {
-							className: "text-xs text-muted-foreground",
-							children: F.find((e) => e.value === H)?.description
-						})
-					]
-				}),
-				Y && /* @__PURE__ */ T("section", {
-					"data-tour": "conversation-create-details",
-					className: "space-y-3",
-					children: [/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("label", {
-						htmlFor: "conv-title",
-						className: "text-sm font-semibold text-foreground",
-						children: [
-							N("conversations.name", "Name"),
-							" ",
-							/* @__PURE__ */ w("span", {
-								className: "text-destructive",
-								children: "*"
-							})
-						]
-					}), /* @__PURE__ */ w("input", {
-						id: "conv-title",
-						type: "text",
-						value: R,
-						onChange: (e) => z(e.target.value),
-						placeholder: I === "CHANNEL" ? N("conversations.channelNamePlaceholder", "e.g., engineering-general") : N("conversations.conversationNamePlaceholder", "e.g., Product Launch Q1"),
-						maxLength: 200,
-						className: "mt-1.5 w-full px-3 py-2 text-sm rounded-lg border border-border bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
-					})] }), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("label", {
-						htmlFor: "conv-desc",
-						className: "text-sm font-semibold text-foreground",
-						children: N("conversations.description", "Description")
-					}), /* @__PURE__ */ w("textarea", {
-						id: "conv-desc",
-						value: B,
-						onChange: (e) => V(e.target.value),
-						placeholder: N("conversations.descriptionPlaceholder", "What is this conversation about?"),
-						rows: 2,
-						maxLength: 1e3,
-						className: "mt-1.5 w-full px-3 py-2 text-sm rounded-lg border border-border bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none"
-					})] })]
-				}),
-				/* @__PURE__ */ T("section", {
-					"data-tour": "conversation-participants",
-					className: "space-y-3",
-					children: [
-						/* @__PURE__ */ T("h3", {
-							className: "text-sm font-semibold text-foreground",
-							children: [J ? N("conversations.participantId", "Participant ID") : N("conversations.participantIds", "Participant IDs"), !Q && /* @__PURE__ */ T("span", {
-								className: "ml-1.5 text-xs font-normal text-muted-foreground",
-								children: [
-									"(",
-									N("conversations.optional", "optional"),
-									")"
-								]
-							})]
-						}),
-						K.length > 0 && /* @__PURE__ */ w("div", {
-							className: "flex flex-wrap gap-2",
-							children: K.map((e) => /* @__PURE__ */ T("span", {
-								className: "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-primary/10 text-primary text-xs font-medium",
-								children: [e, /* @__PURE__ */ w("button", {
-									type: "button",
-									"aria-label": N("conversations.removeParticipant", "Remove participant"),
-									onClick: () => Z(e),
-									className: "p-0.5 rounded-full hover:bg-primary/20",
-									children: /* @__PURE__ */ w(x, { size: 12 })
-								})]
-							}, e))
-						}),
-						/* @__PURE__ */ T("div", {
-							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ w("input", {
-								type: "text",
-								"aria-label": N("conversations.participantInputLabel", "Add participant"),
-								value: W,
-								onChange: (e) => G(e.target.value),
-								onKeyDown: (e) => {
-									e.key === "Enter" && (e.preventDefault(), X());
-								},
-								placeholder: N("conversations.participantInputPlaceholder", "Enter user ID and press Enter"),
-								className: "w-full px-3 py-2 text-sm rounded-lg border border-border bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
-							}), /* @__PURE__ */ w("button", {
-								type: "button",
-								onClick: X,
-								className: "px-3 py-2 text-sm rounded-lg border border-border hover:bg-muted/50",
-								children: N("conversations.add", "Add")
-							})]
-						})
-					]
-				}),
-				j && /* @__PURE__ */ w("div", {
-					className: "text-xs text-destructive rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2",
-					children: E(j)
-				}),
-				/* @__PURE__ */ T("div", {
-					className: "flex justify-end gap-3 pt-4 border-t border-border",
-					children: [/* @__PURE__ */ w("button", {
-						type: "button",
-						onClick: () => D(".."),
-						className: "px-4 py-2 text-sm font-medium rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors",
-						children: N("conversations.cancel", "Cancel")
-					}), /* @__PURE__ */ w("button", {
-						type: "button",
-						onClick: () => void te(),
-						disabled: !$ || A,
-						className: r("inline-flex items-center gap-2 px-5 py-2 text-sm font-medium rounded-lg transition-all", $ && !A ? "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm" : "bg-muted text-muted-foreground cursor-not-allowed"),
-						children: A ? N("conversations.creating", "Creating...") : N("conversations.createConversation", "Create Conversation")
-					})]
-				})
-			]
+		children: /* @__PURE__ */ s(i, {
+			open: !0,
+			onOpenChange: d,
+			onCreated: f
 		})
 	});
 }
 //#endregion
-export { D as NewConversationPage };
+export { c as NewConversationPage };
 //# sourceMappingURL=NewConversationPage.js.map

package/dist/conversations/pages/NewConversationPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NewConversationPage.js","names":[],"sources":["../../../src/conversations/pages/NewConversationPage.tsx"],"sourcesContent":["import { useState, useCallback, useMemo } from \"react\";\nimport { useTr } from \"../utils/i18n\";\nimport { useEventBus } from \"@burdenoff/fe-libs/shared/events\";\nimport { useNavigate } from \"react-router-dom\";\nimport {\n ArrowLeft,\n Globe,\n Hash,\n Lock,\n Megaphone,\n MessageCircle,\n Plus,\n Shield,\n Users,\n X,\n} from \"lucide-react\";\nimport { cn } from \"../utils/cn\";\nimport { PageLayout } from \"../components/PageLayout\";\nimport { useCreateConversation } from \"../hooks/useConversationQueries\";\nimport { useConversations } from \"../providers/ConversationsProvider\";\nimport type { ConversationType, ConversationVisibility } from \"../types\";\nimport { PermissionGuard } from \"../components/PermissionGuard\";\nimport { CONVERSATIONS_PERMISSIONS } from \"../constants/permissions\";\nimport { joinPath } from \"../utils/navigation\";\nimport { nativeImpact, nativeNotify } from \"../../utils/nativeBridge\";\n\n/** Extract the first meaningful GraphQL error message from an ApolloError. /\nfunction getErrorMessage(error: Error): string {\n if (\"graphQLErrors\" in error) {\n const gqlErrors = (error as { graphQLErrors?: Array<{ message?: string }> })\n .graphQLErrors;\n if (gqlErrors && gqlErrors.length > 0 && gqlErrors[0]?.message) {\n return gqlErrors[0].message;\n }\n }\n return error.message;\n}\n\ninterface ConversationTypeOption {\n type: ConversationType;\n label: string;\n description: string;\n icon: React.ReactNode;\n}\n\nexport function NewConversationPage() {\n const navigate = useNavigate();\n const { basePath } = useConversations();\n const { createConversation, loading, error } = useCreateConversation();\n const bus = useEventBus();\n const tr = useTr();\n\n const CONVERSATION_TYPES: ConversationTypeOption[] = useMemo(\n () => [\n {\n type: \"DIRECT\" as ConversationType,\n label: tr(\"conversations.directMessage\", \"Direct Message\"),\n description: tr(\n \"conversations.directMessageDescription\",\n \"One-on-one private conversation\",\n ),\n icon: <MessageCircle size={20} />,\n },\n {\n type: \"GROUP\" as ConversationType,\n label: tr(\"conversations.groupChat\", \"Group Chat\"),\n description: tr(\n \"conversations.groupChatDescription\",\n \"Invite multiple people to a group conversation\",\n ),\n icon: <Users size={20} />,\n },\n {\n type: \"CHANNEL\" as ConversationType,\n label: tr(\"conversations.channel\", \"Channel\"),\n description: tr(\n \"conversations.channelDescription\",\n \"A topic-based channel that anyone can join\",\n ),\n icon: <Hash size={20} />,\n },\n {\n type: \"ANNOUNCEMENT\" as ConversationType,\n label: tr(\"conversations.announcement\", \"Announcement\"),\n description: tr(\n \"conversations.announcementDescription\",\n \"Broadcast messages to a large audience\",\n ),\n icon: <Megaphone size={20} />,\n },\n ],\n [tr],\n );\n\n const VISIBILITY_OPTIONS: Array<{\n value: ConversationVisibility;\n label: string;\n description: string;\n icon: React.ReactNode;\n }> = useMemo(\n () => [\n {\n value: \"PUBLIC\" as ConversationVisibility,\n label: tr(\"conversations.public\", \"Public\"),\n description: tr(\n \"conversations.publicDescription\",\n \"Anyone in the workspace can discover and join\",\n ),\n icon: <Globe size={16} />,\n },\n {\n value: \"PRIVATE\" as ConversationVisibility,\n label: tr(\"conversations.private\", \"Private\"),\n description: tr(\n \"conversations.privateDescription\",\n \"Only invited members can access\",\n ),\n icon: <Lock size={16} />,\n },\n {\n value: \"PROTECTED\" as ConversationVisibility,\n label: tr(\"conversations.protected\", \"Protected\"),\n description: tr(\n \"conversations.protectedDescription\",\n \"Discoverable but requires approval to join\",\n ),\n icon: <Shield size={16} />,\n },\n ],\n [tr],\n );\n\n const [selectedType, setSelectedType] = useState<ConversationType>(\"GROUP\");\n const [title, setTitle] = useState(\"\");\n const [description, setDescription] = useState(\"\");\n const [visibility, setVisibility] =\n useState<ConversationVisibility>(\"PRIVATE\");\n const [participantInput, setParticipantInput] = useState(\"\");\n const [participantIds, setParticipantIds] = useState<string[]>([]);\n\n const isDirectMessage = selectedType === \"DIRECT\";\n const needsTitle = !isDirectMessage;\n\n const addParticipant = useCallback(() => {\n const value = participantInput.trim();\n if (!value \|\| participantIds.includes(value)) return;\n if (isDirectMessage) {\n setParticipantIds([value]);\n } else {\n setParticipantIds((prev) => [...prev, value]);\n }\n setParticipantInput(\"\");\n }, [participantInput, participantIds, isDirectMessage]);\n\n const removeParticipant = useCallback((participantId: string) => {\n setParticipantIds((prev) => prev.filter((id) => id !== participantId));\n }, []);\n\n const requiresParticipants =\n selectedType === \"DIRECT\" \|\| selectedType === \"GROUP\";\n\n const handleCreate = useCallback(async () => {\n if (requiresParticipants && participantIds.length === 0) return;\n if (needsTitle && !title.trim()) return;\n\n nativeImpact(\"light\");\n try {\n const conversation = await createConversation({\n type: selectedType,\n title: needsTitle ? title.trim() : undefined,\n description: description.trim() \|\| undefined,\n participantIds,\n visibility,\n });\n\n if (!conversation) {\n nativeNotify(\"error\");\n return;\n }\n nativeNotify(\"success\");\n bus.emit(\"conversations.conversation.created\", {\n conversationId: conversation.id,\n conversationType: selectedType,\n source: \"new-conversation-page\",\n });\n navigate(joinPath(basePath \|\| \"/conversations\", conversation.id));\n } catch (error) {\n nativeNotify(\"error\");\n throw error;\n }\n }, [\n basePath,\n bus,\n requiresParticipants,\n participantIds,\n needsTitle,\n title,\n createConversation,\n selectedType,\n description,\n visibility,\n navigate,\n ]);\n\n const canCreate =\n (!requiresParticipants \|\| participantIds.length > 0) &&\n (!needsTitle \|\| title.trim().length > 0);\n\n return (\n <PermissionGuard\n permission={CONVERSATIONS_PERMISSIONS.CONVERSATION_CREATE}\n allowUnavailablePermissions\n >\n <PageLayout\n title={tr(\"conversations.newConversation\", \"New Conversation\")}\n subtitle={tr(\n \"conversations.newConversationSubtitle\",\n \"Start a new conversation with your team\",\n )}\n icon={<Plus size={24} />}\n maxWidth=\"lg\"\n headerActions={\n <button\n type=\"button\"\n onClick={() => navigate(basePath \|\| \"/conversations\")}\n className=\"inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors\"\n >\n <ArrowLeft size={16} />\n {tr(\"conversations.back\", \"Back\")}\n </button>\n }\n >\n <section data-tour=\"conversation-type-selector\" className=\"space-y-3\">\n <h3 className=\"text-sm font-semibold text-foreground\">\n {tr(\"conversations.conversationType\", \"Conversation Type\")}\n </h3>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n {CONVERSATION_TYPES.map((option) => (\n <button\n key={option.type}\n type=\"button\"\n onClick={() => {\n setSelectedType(option.type);\n if (option.type === \"DIRECT\") {\n setParticipantIds((prev) => prev.slice(0, 1));\n }\n }}\n className={cn(\n \"flex items-start gap-3 p-4 rounded-xl border text-left transition-all duration-150\",\n selectedType === option.type\n ? \"border-primary bg-primary/5 ring-1 ring-primary/20\"\n : \"border-border hover:border-muted-foreground/30 hover:bg-muted/30\",\n )}\n >\n <div\n className={cn(\n \"p-2 rounded-lg\",\n selectedType === option.type\n ? \"bg-primary/10 text-primary\"\n : \"bg-muted text-muted-foreground\",\n )}\n >\n {option.icon}\n </div>\n <div>\n <p className=\"text-sm font-medium text-foreground\">\n {option.label}\n </p>\n <p className=\"text-xs text-muted-foreground mt-0.5\">\n {option.description}\n </p>\n </div>\n </button>\n ))}\n </div>\n </section>\n\n {!isDirectMessage && (\n <section\n data-tour=\"conversation-visibility-selector\"\n className=\"space-y-3\"\n >\n <h3 className=\"text-sm font-semibold text-foreground\">\n {tr(\"conversations.visibility\", \"Visibility\")}\n </h3>\n <div className=\"flex gap-2\">\n {VISIBILITY_OPTIONS.map((option) => (\n <button\n key={option.value}\n type=\"button\"\n onClick={() => setVisibility(option.value)}\n className={cn(\n \"flex items-center gap-2 px-4 py-2.5 rounded-lg border text-sm transition-all\",\n visibility === option.value\n ? \"border-primary bg-primary/5 text-primary font-medium\"\n : \"border-border text-muted-foreground hover:text-foreground hover:bg-muted/30\",\n )}\n >\n {option.icon}\n {option.label}\n </button>\n ))}\n </div>\n <p className=\"text-xs text-muted-foreground\">\n {\n VISIBILITY_OPTIONS.find((option) => option.value === visibility)\n ?.description\n }\n </p>\n </section>\n )}\n\n {needsTitle && (\n <section\n data-tour=\"conversation-create-details\"\n className=\"space-y-3\"\n >\n <div>\n <label\n htmlFor=\"conv-title\"\n className=\"text-sm font-semibold text-foreground\"\n >\n {tr(\"conversations.name\", \"Name\")}{\" \"}\n <span className=\"text-destructive\"></span>\n </label>\n <input\n id=\"conv-title\"\n type=\"text\"\n value={title}\n onChange={(event) => setTitle(event.target.value)}\n placeholder={\n selectedType === \"CHANNEL\"\n ? tr(\n \"conversations.channelNamePlaceholder\",\n \"e.g., engineering-general\",\n )\n : tr(\n \"conversations.conversationNamePlaceholder\",\n \"e.g., Product Launch Q1\",\n )\n }\n maxLength={200}\n className=\"mt-1.5 w-full px-3 py-2 text-sm rounded-lg border border-border bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring\"\n />\n </div>\n <div>\n <label\n htmlFor=\"conv-desc\"\n className=\"text-sm font-semibold text-foreground\"\n >\n {tr(\"conversations.description\", \"Description\")}\n </label>\n <textarea\n id=\"conv-desc\"\n value={description}\n onChange={(event) => setDescription(event.target.value)}\n placeholder={tr(\n \"conversations.descriptionPlaceholder\",\n \"What is this conversation about?\",\n )}\n rows={2}\n maxLength={1000}\n className=\"mt-1.5 w-full px-3 py-2 text-sm rounded-lg border border-border bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none\"\n />\n </div>\n </section>\n )}\n\n <section data-tour=\"conversation-participants\" className=\"space-y-3\">\n <h3 className=\"text-sm font-semibold text-foreground\">\n {isDirectMessage\n ? tr(\"conversations.participantId\", \"Participant ID\")\n : tr(\"conversations.participantIds\", \"Participant IDs\")}\n {!requiresParticipants && (\n <span className=\"ml-1.5 text-xs font-normal text-muted-foreground\">\n ({tr(\"conversations.optional\", \"optional\")})\n </span>\n )}\n </h3>\n\n {participantIds.length > 0 && (\n <div className=\"flex flex-wrap gap-2\">\n {participantIds.map((participantId) => (\n <span\n key={participantId}\n className=\"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-primary/10 text-primary text-xs font-medium\"\n >\n {participantId}\n <button\n type=\"button\"\n aria-label={tr(\n \"conversations.removeParticipant\",\n \"Remove participant\",\n )}\n onClick={() => removeParticipant(participantId)}\n className=\"p-0.5 rounded-full hover:bg-primary/20\"\n >\n <X size={12} />\n </button>\n </span>\n ))}\n </div>\n )}\n\n <div className=\"flex items-center gap-2\">\n <input\n type=\"text\"\n aria-label={tr(\n \"conversations.participantInputLabel\",\n \"Add participant\",\n )}\n value={participantInput}\n onChange={(event) => setParticipantInput(event.target.value)}\n onKeyDown={(event) => {\n if (event.key !== \"Enter\") return;\n event.preventDefault();\n addParticipant();\n }}\n placeholder={tr(\n \"conversations.participantInputPlaceholder\",\n \"Enter user ID and press Enter\",\n )}\n className=\"w-full px-3 py-2 text-sm rounded-lg border border-border bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring\"\n />\n <button\n type=\"button\"\n onClick={addParticipant}\n className=\"px-3 py-2 text-sm rounded-lg border border-border hover:bg-muted/50\"\n >\n {tr(\"conversations.add\", \"Add\")}\n </button>\n </div>\n </section>\n\n {error && (\n <div className=\"text-xs text-destructive rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2\">\n {getErrorMessage(error)}\n </div>\n )}\n\n <div className=\"flex justify-end gap-3 pt-4 border-t border-border\">\n <button\n type=\"button\"\n onClick={() => navigate(\"..\")}\n className=\"px-4 py-2 text-sm font-medium rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors\"\n >\n {tr(\"conversations.cancel\", \"Cancel\")}\n </button>\n <button\n type=\"button\"\n onClick={() => void handleCreate()}\n disabled={!canCreate \|\| loading}\n className={cn(\n \"inline-flex items-center gap-2 px-5 py-2 text-sm font-medium rounded-lg transition-all\",\n canCreate && !loading\n ? \"bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm\"\n : \"bg-muted text-muted-foreground cursor-not-allowed\",\n )}\n >\n {loading\n ? tr(\"conversations.creating\", \"Creating...\")\n : tr(\"conversations.createConversation\", \"Create Conversation\")}\n </button>\n </div>\n </PageLayout>\n </PermissionGuard>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"NewConversationPage.js","names":[],"sources":["../../../src/conversations/pages/NewConversationPage.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { PermissionGuard } from \"../components/PermissionGuard\";\nimport { CONVERSATIONS_PERMISSIONS } from \"../constants/permissions\";\nimport { NewConversationDialog } from \"../components/NewConversationDialog\";\nimport { useConversations } from \"../providers/ConversationsProvider\";\nimport { joinPath } from \"../utils/navigation\";\n\n/*\n Legacy `/conversations/new` route.\n \n The canonical UX is now the in-place `<NewConversationDialog>` opened via\n * the `?new=true` URL param on the landing page — no full-page navigation.\n * This wrapper preserves the old route for any deep links that still exist\n * in the wild: it mounts the dialog as already-open and routes the user\n * back to the inbox (with `?new=true`) on close, so the dialog stays open\n * and they end up in the canonical surface.\n \n On successful create the dialog itself navigates to the new conversation\n * detail page via the `onCreated` callback.\n */\nexport function NewConversationPage() {\n const navigate = useNavigate();\n const { basePath } = useConversations();\n const root = basePath \|\| \"/conversations\";\n\n const handleOpenChange = useCallback(\n (open: boolean) => {\n if (open) return;\n // Closing the dialog from the legacy route lands the user on the\n // inbox; we keep `?new=true` so the dialog re-opens in-place there\n // — this mirrors what would have happened had they clicked the\n // primary CTA on the inbox itself.\n navigate(`${root}?new=true`, { replace: true });\n },\n [navigate, root],\n );\n\n const handleCreated = useCallback(\n (conversationId: string) => {\n navigate(joinPath(root, conversationId));\n },\n [navigate, root],\n );\n\n return (\n <PermissionGuard\n permission={CONVERSATIONS_PERMISSIONS.CONVERSATION_CREATE}\n allowUnavailablePermissions\n >\n <NewConversationDialog\n open\n onOpenChange={handleOpenChange}\n onCreated={handleCreated}\n />\n </PermissionGuard>\n );\n}\n"],"mappings":";;;;;;;;;AAqBA,SAAgB,IAAsB;CACpC,IAAM,IAAW,GAAa,EACxB,EAAE,gBAAa,GAAkB,EACjC,IAAO,KAAY,kBAEnB,IAAmB,GACtB,MAAkB;AACb,OAKJ,EAAS,GAAG,EAAK,YAAY,EAAE,SAAS,IAAM,CAAC;IAEjD,CAAC,GAAU,EAAK,CACjB,EAEK,IAAgB,GACnB,MAA2B;AAC1B,IAAS,EAAS,GAAM,EAAe,CAAC;IAE1C,CAAC,GAAU,EAAK,CACjB;AAED,QACE,kBAAC,GAAD;EACE,YAAY,EAA0B;EACtC,6BAAA;YAEA,kBAAC,GAAD;GACE,MAAA;GACA,cAAc;GACd,WAAW;GACX,CAAA;EACc,CAAA"}