@haklex/rich-ext-chat 0.4.1 → 0.5.0

package/dist/edit-C2JFybx6.js

@@ -0,0 +1,421 @@
+import { A as variantPill, C as participantLabel, D as rail, E as participantRow, M as variantPillHint, N as variantPillName, O as sectionLabel, P as variantStack, S as participantInput, T as participantPillUser, _ as modalBody, a as buttonGhost, b as pane, c as editLabel, d as messageActions, f as messageCard, g as modal, h as messageTextarea, i as button, j as variantPillActive, k as semanticClassNames, l as editOverlay, m as messageSelect, n as addMessage, o as buttonPrimary, p as messageHead, r as addMessageButton, s as editContainer, t as ChatRenderer, u as editorDialogPopup, v as modalFooter, w as participantPill, x as participantCard, y as modalHeader } from "./ChatRenderer-DYZpPFed.js";
+import { i as _defineProperty, n as $isChatNode, o as createMessageId, r as ChatNode } from "./ChatNode-DIZ2_6jG.js";
+import { $getNodeByKey, $insertNodes } from "lexical";
+import { ArrowDown, ArrowUp, MessageSquare, Pencil, Trash2 } from "lucide-react";
+import { createContext, createElement, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { useColorScheme } from "@haklex/rich-editor";
+import { presentDialog } from "@haklex/rich-editor-ui";
+import { usePortalTheme } from "@haklex/rich-style-token";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../../node_modules/.pnpm/@lexical+react@0.44.0_react-dom@19.2.5_react@19.2.5__react@19.2.5_yjs@13.6.29/node_modules/@lexical/react/LexicalComposerContext.prod.mjs
+/**
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
+var r = createContext(null);
+function o() {
+	const n = useContext(r);
+	return n ?? function(n, ...e) {
+		const r = new URL("https://lexical.dev/docs/error"), t = new URLSearchParams();
+		t.append("code", n);
+		for (const n of e) t.append("v", n);
+		throw r.search = t.toString(), Error(`Minified Lexical error #${n}; visit ${r.toString()} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`);
+	}(8), n;
+}
+//#endregion
+//#region src/variant-reducer.ts
+function switchVariant(next, participants) {
+	return participants.map((p, idx) => {
+		if (idx !== 1) return p;
+		if (next === "user-user") return {
+			...p,
+			kind: "user"
+		};
+		return {
+			...p,
+			kind: "agent"
+		};
+	});
+}
+//#endregion
+//#region src/ChatEditorModal.tsx
+var VARIANT_LABELS = {
+	"user-agent": {
+		name: "user · agent",
+		hint: "Bubble + article"
+	},
+	"user-user": {
+		name: "user · user",
+		hint: "Both bubbles"
+	}
+};
+function defaultName(p) {
+	return p.name ?? (p.kind === "agent" ? "Assistant" : "User");
+}
+var ChatEditorModal = ({ initial, dismiss, onCommit, onCancel }) => {
+	const [variant, setVariant] = useState(initial.variant);
+	const [participants, setParticipants] = useState(initial.participants);
+	const [messages, setMessages] = useState(initial.messages);
+	const handleVariantChange = useCallback((next) => {
+		setVariant(next);
+		setParticipants((current) => switchVariant(next, current));
+	}, []);
+	const updateParticipant = useCallback((id, patch) => {
+		setParticipants((prev) => prev.map((p) => p.id === id ? {
+			...p,
+			...patch
+		} : p));
+	}, []);
+	const addMessage$1 = useCallback(() => {
+		setMessages((prev) => {
+			const recent = prev.at(-1);
+			const fallback = participants[0]?.id ?? "";
+			const participantId = recent ? recent.participantId : fallback;
+			return [...prev, {
+				id: createMessageId(),
+				participantId,
+				content: ""
+			}];
+		});
+	}, [participants]);
+	const updateMessage = useCallback((id, patch) => {
+		setMessages((prev) => prev.map((m) => m.id === id ? {
+			...m,
+			...patch
+		} : m));
+	}, []);
+	const moveMessage = useCallback((id, direction) => {
+		setMessages((prev) => {
+			const idx = prev.findIndex((m) => m.id === id);
+			if (idx < 0) return prev;
+			const target = idx + direction;
+			if (target < 0 || target >= prev.length) return prev;
+			const next = [...prev];
+			[next[idx], next[target]] = [next[target], next[idx]];
+			return next;
+		});
+	}, []);
+	const deleteMessage = useCallback((id) => {
+		setMessages((prev) => prev.filter((m) => m.id !== id));
+	}, []);
+	const handleDone = useCallback(() => {
+		onCommit?.({
+			variant,
+			participants,
+			messages
+		});
+		dismiss();
+	}, [
+		onCommit,
+		variant,
+		participants,
+		messages,
+		dismiss
+	]);
+	const handleCancel = useCallback(() => {
+		onCancel?.();
+		dismiss();
+	}, [onCancel, dismiss]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: modal,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: modalHeader,
+				children: "Edit chat"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: modalBody,
+				children: [/* @__PURE__ */ jsxs("aside", {
+					className: rail,
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: sectionLabel,
+							children: "Variant"
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: variantStack,
+							children: Object.keys(VARIANT_LABELS).map((key) => /* @__PURE__ */ jsxs("button", {
+								className: `${variantPill} ${variant === key ? variantPillActive : ""}`,
+								type: "button",
+								onClick: () => handleVariantChange(key),
+								children: [/* @__PURE__ */ jsx("div", {
+									className: variantPillName,
+									children: VARIANT_LABELS[key].name
+								}), /* @__PURE__ */ jsx("div", {
+									className: variantPillHint,
+									children: VARIANT_LABELS[key].hint
+								})]
+							}, key))
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: sectionLabel,
+							children: "Participants"
+						}),
+						participants.map((p) => /* @__PURE__ */ jsxs("div", {
+							className: participantCard,
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: participantRow,
+								children: [/* @__PURE__ */ jsx("span", {
+									className: `${participantPill} ${p.kind === "user" ? participantPillUser : ""}`,
+									children: p.kind
+								}), /* @__PURE__ */ jsx("input", {
+									className: participantInput,
+									placeholder: "Display name",
+									type: "text",
+									value: p.name ?? "",
+									onChange: (e) => updateParticipant(p.id, { name: e.target.value || void 0 })
+								})]
+							}), /* @__PURE__ */ jsxs("div", {
+								className: participantRow,
+								children: [/* @__PURE__ */ jsx("span", {
+									className: participantLabel,
+									children: "Avatar"
+								}), /* @__PURE__ */ jsx("input", {
+									className: participantInput,
+									placeholder: "URL (optional)",
+									type: "text",
+									value: p.avatar ?? "",
+									onChange: (e) => updateParticipant(p.id, { avatar: e.target.value || void 0 })
+								})]
+							})]
+						}, p.id))
+					]
+				}), /* @__PURE__ */ jsxs("main", {
+					className: pane,
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: sectionLabel,
+							children: ["Messages — ", messages.length]
+						}),
+						messages.map((m) => /* @__PURE__ */ jsxs("div", {
+							className: messageCard,
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: messageHead,
+								children: [/* @__PURE__ */ jsx("select", {
+									className: messageSelect,
+									value: m.participantId,
+									onChange: (e) => updateMessage(m.id, { participantId: e.target.value }),
+									children: participants.map((p) => /* @__PURE__ */ jsxs("option", {
+										value: p.id,
+										children: [
+											defaultName(p),
+											" (",
+											p.kind,
+											")"
+										]
+									}, p.id))
+								}), /* @__PURE__ */ jsxs("div", {
+									className: messageActions,
+									children: [
+										/* @__PURE__ */ jsx("button", {
+											"aria-label": "Move up",
+											className: `${button} ${buttonGhost}`,
+											type: "button",
+											onClick: () => moveMessage(m.id, -1),
+											children: /* @__PURE__ */ jsx(ArrowUp, { size: 12 })
+										}),
+										/* @__PURE__ */ jsx("button", {
+											"aria-label": "Move down",
+											className: `${button} ${buttonGhost}`,
+											type: "button",
+											onClick: () => moveMessage(m.id, 1),
+											children: /* @__PURE__ */ jsx(ArrowDown, { size: 12 })
+										}),
+										/* @__PURE__ */ jsx("button", {
+											"aria-label": "Delete",
+											className: `${button} ${buttonGhost}`,
+											type: "button",
+											onClick: () => deleteMessage(m.id),
+											children: /* @__PURE__ */ jsx(Trash2, { size: 12 })
+										})
+									]
+								})]
+							}), /* @__PURE__ */ jsx("textarea", {
+								className: messageTextarea,
+								value: m.content,
+								onChange: (e) => updateMessage(m.id, { content: e.target.value })
+							})]
+						}, m.id)),
+						/* @__PURE__ */ jsx("div", {
+							className: addMessage,
+							children: /* @__PURE__ */ jsx("button", {
+								className: addMessageButton,
+								type: "button",
+								onClick: addMessage$1,
+								children: "+ Add message"
+							})
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: modalFooter,
+				children: [/* @__PURE__ */ jsx("button", {
+					className: button,
+					type: "button",
+					onClick: handleCancel,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx("button", {
+					className: `${button} ${buttonPrimary}`,
+					type: "button",
+					onClick: handleDone,
+					children: "Done"
+				})]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/ChatEditRenderer.tsx
+var ChatEditRenderer = ({ variant, participants, messages, onChange, onCancel, registerOpenTrigger }) => {
+	const { className: portalClassName } = usePortalTheme();
+	const colorScheme = useColorScheme();
+	const openEditor = useCallback(() => {
+		presentDialog({
+			content: ({ dismiss }) => /* @__PURE__ */ jsx(ChatEditorModal, {
+				dismiss,
+				initial: {
+					variant,
+					participants,
+					messages
+				},
+				onCancel,
+				onCommit: onChange
+			}),
+			className: editorDialogPopup,
+			portalClassName,
+			theme: colorScheme,
+			showCloseButton: false,
+			clickOutsideToDismiss: false
+		});
+	}, [
+		variant,
+		participants,
+		messages,
+		onChange,
+		onCancel,
+		portalClassName,
+		colorScheme
+	]);
+	useEffect(() => {
+		registerOpenTrigger?.(openEditor);
+	}, [openEditor, registerOpenTrigger]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `${editContainer} ${semanticClassNames.editContainer}`,
+		children: [/* @__PURE__ */ jsx(ChatRenderer, {
+			messages,
+			participants,
+			variant
+		}), /* @__PURE__ */ jsx("button", {
+			"aria-label": "Edit chat",
+			className: `${editOverlay} ${semanticClassNames.editOverlay}`,
+			type: "button",
+			onClick: openEditor,
+			children: /* @__PURE__ */ jsxs("span", {
+				className: `${editLabel} ${semanticClassNames.editLabel}`,
+				children: [/* @__PURE__ */ jsx(Pencil, { size: 14 }), " Edit"]
+			})
+		})]
+	});
+};
+//#endregion
+//#region src/ChatEditDecorator.tsx
+var ChatEditDecorator = ({ nodeKey, variant, participants, messages }) => {
+	const [editor] = o();
+	const hasOpenedRef = useRef(false);
+	const openTriggerRef = useRef(null);
+	const messagesLengthRef = useRef(messages.length);
+	const onChange = useCallback((next) => {
+		editor.update(() => {
+			const node = $getNodeByKey(nodeKey);
+			if ($isChatNode(node)) {
+				node.setVariant(next.variant);
+				node.setParticipants(next.participants);
+				node.setMessages(next.messages);
+			}
+		});
+	}, [editor, nodeKey]);
+	const onCancel = useCallback(() => {
+		editor.update(() => {
+			const node = $getNodeByKey(nodeKey);
+			if ($isChatNode(node) && node.getMessages().length === 0) node.remove();
+		});
+	}, [editor, nodeKey]);
+	useEffect(() => {
+		if (hasOpenedRef.current) return;
+		if (messagesLengthRef.current > 0) return;
+		const trigger = openTriggerRef.current;
+		if (!trigger) return;
+		hasOpenedRef.current = true;
+		trigger();
+	}, []);
+	return /* @__PURE__ */ jsx(ChatEditRenderer, {
+		messages,
+		participants,
+		variant,
+		registerOpenTrigger: (open) => {
+			openTriggerRef.current = open;
+		},
+		onCancel,
+		onChange
+	});
+};
+//#endregion
+//#region src/nodes/ChatEditNode.ts
+var ChatEditNode = class ChatEditNode extends ChatNode {
+	static clone(node) {
+		return new ChatEditNode({
+			variant: node.__variant,
+			participants: node.__participants,
+			messages: node.__messages
+		}, node.__key);
+	}
+	static importJSON(serializedNode) {
+		return new ChatEditNode({
+			variant: serializedNode.variant,
+			participants: serializedNode.participants,
+			messages: serializedNode.messages
+		});
+	}
+	decorate(_editor, _config) {
+		return createElement(ChatEditDecorator, {
+			nodeKey: this.__key,
+			variant: this.__variant,
+			participants: this.__participants,
+			messages: this.__messages
+		});
+	}
+};
+_defineProperty(ChatEditNode, "commandItems", [{
+	title: "Chat",
+	icon: createElement(MessageSquare, { size: 20 }),
+	description: "Embed a conversation snapshot",
+	keywords: [
+		"chat",
+		"conversation",
+		"dialog",
+		"agent"
+	],
+	section: "MEDIA",
+	placement: ["slash", "toolbar"],
+	group: "insert",
+	onSelect: (editor) => {
+		editor.update(() => {
+			$insertNodes([$createChatEditNode({ variant: "user-agent" })]);
+		});
+	}
+}]);
+function $createChatEditNode(payload) {
+	return new ChatEditNode(payload);
+}
+function $isChatEditNode(node) {
+	return node instanceof ChatEditNode;
+}
+//#endregion
+//#region src/edit.ts
+var chatEditNodes = [ChatEditNode];
+//#endregion
+export { ChatEditDecorator as a, ChatEditNode as i, $createChatEditNode as n, ChatEditRenderer as o, $isChatEditNode as r, ChatEditorModal as s, chatEditNodes as t };

package/dist/edit.d.ts

@@ -0,0 +1,10 @@
+import { Klass, LexicalNode } from 'lexical';
+export type { ChatEditDecoratorProps } from './ChatEditDecorator';
+export { ChatEditDecorator } from './ChatEditDecorator';
+export type { ChatEditorModalProps } from './ChatEditorModal';
+export { ChatEditorModal } from './ChatEditorModal';
+export type { ChatEditRendererProps } from './ChatEditRenderer';
+export { ChatEditRenderer } from './ChatEditRenderer';
+export { $createChatEditNode, $isChatEditNode, ChatEditNode } from './nodes/ChatEditNode';
+export declare const chatEditNodes: Array<Klass<LexicalNode>>;
+//# sourceMappingURL=edit.d.ts.map

package/dist/edit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../src/edit.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAIlD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAE1F,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAkB,CAAC"}

package/dist/edit.mjs

@@ -0,0 +1,2 @@
+import { a as ChatEditDecorator, i as ChatEditNode, n as $createChatEditNode, o as ChatEditRenderer, r as $isChatEditNode, s as ChatEditorModal, t as chatEditNodes } from "./edit-C2JFybx6.js";
+export { $createChatEditNode, $isChatEditNode, ChatEditDecorator, ChatEditNode, ChatEditRenderer, ChatEditorModal, chatEditNodes };

package/dist/index.d.ts

@@ -1,12 +1,4 @@
-export type { ChatEditDecoratorProps } from './ChatEditDecorator';
-export { ChatEditDecorator } from './ChatEditDecorator';
-export type { ChatEditorModalProps } from './ChatEditorModal';
-export { ChatEditorModal } from './ChatEditorModal';
-export type { ChatEditRendererProps } from './ChatEditRenderer';
-export { ChatEditRenderer } from './ChatEditRenderer';
-export { ChatRenderer } from './ChatRenderer';
-export { chatEditNodes, chatNodes } from './nodes';
-export { $createChatEditNode, $isChatEditNode, ChatEditNode } from './nodes/ChatEditNode';
-export { $createChatNode, $isChatNode, ChatNode } from './nodes/ChatNode';
-export type { ChatMessage, ChatParticipant, ChatParticipantKind, ChatRendererProps, ChatVariant, SerializedChatNode, } from './types';
+export * from './edit';
+export * from './node';
+export * from './renderer';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC1F,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC1E,YAAY,EACV,WAAW,EACX,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,WAAW,EACX,kBAAkB,GACnB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC"}