@clivly/chat-widget 0.3.0-next.7 → 0.3.0-next.8

package/dist/index.mjs

@@ -105,6 +105,23 @@ const WIDGET_STYLES = `
   font-size: 0.75rem;
   margin-top: 0.35rem;
 }
+.clivly-chat-widget__powered {
+  border-top: 1px solid var(--clivly-chat-border);
+  color: var(--clivly-chat-muted);
+  font-size: 0.6875rem;
+  font-style: italic;
+  margin: 0;
+  padding: 0.5rem 1rem;
+  text-align: center;
+}
+.clivly-chat-widget__powered a {
+  color: inherit;
+  text-decoration: none;
+}
+.clivly-chat-widget__powered a:hover,
+.clivly-chat-widget__powered a:focus-visible {
+  text-decoration: underline;
+}
 .clivly-chat-widget__composer,
 .clivly-chat-widget__form {
   border-top: 1px solid var(--clivly-chat-border);
@@ -163,7 +180,7 @@ const WIDGET_STYLES = `
   text-align: center;
 }
 `;
-const DEFAULT_STORAGE = typeof window !== "undefined" ? window.localStorage : void 0;
+const DEFAULT_STORAGE = typeof window === "undefined" ? void 0 : window.localStorage;
 function createLocalMessage(message, delivery = "sent") {
 	return {
 		...message,
@@ -183,6 +200,14 @@ function formatTimestamp(value) {
 		day: "numeric"
 	}).format(date);
 }
+/**
+* Enter sends the draft. Shift+Enter still inserts a newline, and an
+* in-progress IME composition (CJK) must never be sent — committing a
+* composition also fires Enter, which would truncate the word being typed.
+*/
+function isSendKey(event) {
+	return event.key === "Enter" && !(event.shiftKey || event.nativeEvent.isComposing);
+}
 function generateId() {
 	if (typeof crypto !== "undefined" && "randomUUID" in crypto) return crypto.randomUUID();
 	return `msg_${Math.random().toString(36).slice(2, 10)}`;
@@ -228,11 +253,9 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 	const transportRef = useRef(null);
 	const listRef = useRef(null);
 	const themeStyle = useThemeStyle(session);
-	useEffect(() => {
-		return () => {
-			transportRef.current?.close();
-			transportRef.current = null;
-		};
+	useEffect(() => () => {
+		transportRef.current?.close();
+		transportRef.current = null;
 	}, []);
 	useEffect(() => {
 		if (!listRef.current) return;
@@ -242,7 +265,7 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 		transportRef.current?.close();
 		transportRef.current = null;
 		setIsReady(false);
-		if (!session || !createTransport) return;
+		if (!(session && createTransport)) return;
 		const handleEvent = (event) => {
 			switch (event.type) {
 				case "conversation.snapshot":
@@ -309,8 +332,8 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 		}
 	};
 	const submitMessage = (event) => {
-		event.preventDefault();
-		if (!session || !transportRef.current) {
+		event?.preventDefault();
+		if (!(session && transportRef.current)) {
 			setError("Chat is not connected yet.");
 			return;
 		}
@@ -392,10 +415,10 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 									children: [/* @__PURE__ */ jsx("span", { children: message.author ?? "Clivly" }), /* @__PURE__ */ jsx("span", { children: formatTimestamp(message.createdAt) })]
 								}),
 								/* @__PURE__ */ jsx("div", { children: message.body }),
-								message.delivery !== "sent" ? /* @__PURE__ */ jsx("div", {
+								message.delivery === "sent" ? null : /* @__PURE__ */ jsx("div", {
 									className: "clivly-chat-widget__status",
 									children: message.delivery === "pending" ? "Sending…" : "Failed to send"
-								}) : null
+								})
 							]
 						}, message.id)) : /* @__PURE__ */ jsx("p", {
 							className: "clivly-chat-widget__empty",
@@ -418,6 +441,11 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 								onChange: (event) => {
 									setMessageDraft(event.target.value);
 								},
+								onKeyDown: (event) => {
+									if (!isSendKey(event)) return;
+									event.preventDefault();
+									if (messageDraft.trim() && isReady) submitMessage();
+								},
 								placeholder: "Write your message",
 								value: messageDraft
 							})]
@@ -428,7 +456,7 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 								children: isReady || !createTransport ? "Conversation ready" : "Connecting…"
 							}), /* @__PURE__ */ jsx("button", {
 								className: "clivly-chat-widget__button",
-								disabled: !messageDraft.trim() || !isReady,
+								disabled: !(messageDraft.trim() && isReady),
 								type: "submit",
 								children: "Send"
 							})]
@@ -487,6 +515,15 @@ function ChatWidget({ className, createTransport, getSession, initiallyOpen = fa
 								})]
 							})
 						]
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "clivly-chat-widget__powered",
+						children: /* @__PURE__ */ jsx("a", {
+							href: "https://clivly.com",
+							rel: "noopener",
+							target: "_blank",
+							children: "Powered by Clivly"
+						})
 					})
 				]
 			}) : null