@sunboard/react 1.0.0 → 1.1.0

package/README.md

@@ -207,7 +207,7 @@ Call `useLauncher()` once for your help menu and pass what it returns down.
 | `tourRunning` | `true` while a tour runs. |
 | `opened()` | Call it when your menu opens, so the open counts in Analytics. |
 | `start(guideKey, replyId?)` | Starts a guide. Pass the id of the answer that offered it, and the conversation gets a line after that answer when the tour ends. |
-| `messages` | The conversation with the assistant, oldest first. Each `Message` has an `id` and a `kind`: `question`, `waiting`, `reply`, `error` or `tour`. A `reply` holds an `AskReply` with the answer's text in `answer`, the articles it came from in `sources`, and `guideKey` when it offers a guide to start. |
+| `messages` | The conversation with the assistant, oldest first. Each `Message` has an `id` and a `kind`: `question`, `waiting`, `reply`, `error` or `tour`. A `reply` holds an `AskReply` with the answer's text in `answer` and `guideKey` when it offers a guide to start. |
 | `waiting` | `true` while a question is out and its answer has not come back. |
 | `rateLimitedUntil` | While the user has asked too many questions this hour, the time they can ask again, as an ISO string. Otherwise `undefined`. |
 | `handedOff` | `true` while a tour started from the conversation runs. It turns `false` when the tour ends, the moment to show your panel again. |

package/dist/index.d.mts

@@ -332,22 +332,11 @@ type GuideEventReport = {
 });
 /**
  * ANSWERED is an answer written from the docs and checked against them.
- * UNSUPPORTED is one the check did not back, so the visitor is pointed at the
- * section instead.
- * GUIDE offers a tour, with an answer when sections were found too.
+ * UNSUPPORTED is one the check did not back twice, so the visitor gets the
+ * not-covered reply. NONE found nothing to answer with.
+ * GUIDE offers a tour, with an answer when one was written and backed.
  */
 type AskOutcome = "GUIDE" | "ANSWERED" | "UNSUPPORTED" | "NONE";
-/** One section the answer came from. */
-interface AskArticle {
-  /** The section's id. */
-  id: string;
-  /** The article's title. */
-  title: string;
-  /** Where the article is read. An article written in Sunboard has none. */
-  url?: string;
-  /** The section's heading, when it has one. */
-  heading?: string;
-}
 /** `id` is the stored question's id. `answer` is the whole text to show. */
 interface AskReply {
   id: string;
@@ -356,11 +345,13 @@ interface AskReply {
   /** This question opened its conversation, so the widget greets the visitor. */
   firstTurn: boolean;
   outcome: AskOutcome;
-  /** Plain text with blank lines between paragraphs, `1.` and `-` lists, and `**bold**`. */
+  /**
+   * Plain text with blank lines between paragraphs, `1.` and `-` lists, and
+   * `**bold**`. Empty when a guide is offered with nothing written.
+   */
   answer: string;
-  /** At most three, in the order the answer used them. */
-  sources: AskArticle[];
   guideKey?: string;
+  /** Set when the answer is the not-covered sentence and the project has a support link. */
   supportUrl?: string;
 }
 /** What the server is doing while the visitor waits, in this order. */
@@ -402,8 +393,6 @@ interface Labels {
     send: string;
     /** The pill that scrolls back down to the newest message. */
     latest: string;
-    /** On an older reply whose sources are folded away. */
-    sourcesCount: (count: number) => string;
     /** Over the first answer of a conversation. `name` is the connection's `user.firstName`. */
     greeting: (name?: string) => string;
     /** Under an answer that offers a guide, above Show me how. */
@@ -428,8 +417,6 @@ interface Labels {
       /** After six seconds of waiting. */
       slow: string;
     };
-    /** The name of the group of sections an answer came from, for a screen reader. */
-    sources: string;
     /** Over the guides listed before the first question, this page's first. */
     commonQuestions: string;
     /** The one button under an answer that has a guide behind it. */
@@ -447,12 +434,10 @@ interface Labels {
     lostBody: string;
     tryAgain: string;
     /**
-     * What the server answers when nothing was written: no guide and no
-     * section, a section with no backed answer, a guide with no section.
+     * What the server answers when there is nothing to show: no guide and no
+     * section, or no guide and an answer the check did not back twice.
      */
     notCovered: (product: string) => string;
-    coveredBy: (article: string, heading?: string) => string;
-    guideFound: string;
     closeAria: string;
     poweredBy: string;
   };
@@ -970,4 +955,4 @@ interface LauncherProps {
 }
 export declare function Launcher({ inline }?: LauncherProps): import("react").JSX.Element | null;
 //#endregion
-export type { ActiveTour, Anchor, AnchorElementState, AnchorMatch, AskArticle, AskFailure, AskOutcome, AskQuestion, AskReply, AskResult, AskScript, AskStage, BootstrapAnswer, BootstrapData, BootstrapOff, ComponentSettings, GuideContent, GuideStep, GuideType, GuidesApi, GuidesTransport, HttpTransportConfig, LabelOverrides, Labels, LauncherList, LauncherOptions, LauncherProps, MemoryTransportOptions, Message, Palette, PinPosition, ScriptedReply, StepPlacement, StepPrimitive, SunboardOverlayProps, SunboardProviderProps, Theme, ThemeMode, ThemeModeSetting, TourEnd, TourEnding, UserState, VisitorDetails };
+export type { ActiveTour, Anchor, AnchorElementState, AnchorMatch, AskFailure, AskOutcome, AskQuestion, AskReply, AskResult, AskScript, AskStage, BootstrapAnswer, BootstrapData, BootstrapOff, ComponentSettings, GuideContent, GuideStep, GuideType, GuidesApi, GuidesTransport, HttpTransportConfig, LabelOverrides, Labels, LauncherList, LauncherOptions, LauncherProps, MemoryTransportOptions, Message, Palette, PinPosition, ScriptedReply, StepPlacement, StepPrimitive, SunboardOverlayProps, SunboardProviderProps, Theme, ThemeMode, ThemeModeSetting, TourEnd, TourEnding, UserState, VisitorDetails };

package/dist/index.mjs

@@ -3,7 +3,6 @@
 import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { FloatingArrow, FloatingPortal, arrow, autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/react";
-import { flushSync } from "react-dom";
 //#region src/debug.ts
 const noLog = () => {};
 function consoleLogger() {
@@ -220,7 +219,6 @@ const enLabels = {
 		cancel: "Cancel",
 		send: "Send",
 		latest: "Latest",
-		sourcesCount: (count) => `${count} ${count === 1 ? "source" : "sources"}`,
 		greeting: (name) => name ? `Hey ${name},` : "Hey there,",
 		guideClosing: "I put together a guide for you that walks you through it.",
 		tourFinishedAsk: "Tour finished, how was your experience?",
@@ -236,7 +234,6 @@ const enLabels = {
 			checking: "Checking it against the docs",
 			slow: "Taking a little longer than usual"
 		},
-		sources: "Sources",
 		commonQuestions: "Common questions",
 		showMeHow: "Show me how",
 		newTab: "(opens in a new tab)",
@@ -249,8 +246,6 @@ const enLabels = {
 		lostBody: "Check your connection and try again.",
 		tryAgain: "Try again",
 		notCovered: (product) => `The ${product} help docs don't cover this yet.`,
-		coveredBy: (article, heading) => heading ? `The section "${heading}" of the article "${article}" covers this.` : `The article "${article}" covers this.`,
-		guideFound: "There is a guide for this.",
 		closeAria: "Close help",
 		poweredBy: "Powered by"
 	},
@@ -1654,39 +1649,20 @@ function stringOrUndefined(value) {
 function optionalString(value) {
 	return value === void 0 || typeof value === "string";
 }
-function parseSource(value) {
-	if (!isRecord$1(value)) return void 0;
-	const { id, title, url, heading } = value;
-	if (typeof id !== "string" || typeof title !== "string") return void 0;
-	if (!optionalString(url) || !optionalString(heading)) return void 0;
-	return {
-		id,
-		title,
-		...url === void 0 ? {} : { url },
-		...heading === void 0 ? {} : { heading }
-	};
-}
 /** A reply as the server sends it, or as the thread kept it in session storage. */
 function parseReply(value) {
 	if (!isRecord$1(value)) return void 0;
-	const { id, conversationId, firstTurn, outcome, answer, sources, guideKey, supportUrl } = value;
+	const { id, conversationId, firstTurn, outcome, answer, guideKey, supportUrl } = value;
 	if (typeof id !== "string" || typeof conversationId !== "string") return void 0;
 	if (typeof firstTurn !== "boolean") return void 0;
 	if (!isAskOutcome(outcome) || typeof answer !== "string") return void 0;
-	if (!Array.isArray(sources) || !optionalString(guideKey) || !optionalString(supportUrl)) return;
-	const parsed = [];
-	for (const source of sources) {
-		const article = parseSource(source);
-		if (!article) return void 0;
-		parsed.push(article);
-	}
+	if (!optionalString(guideKey) || !optionalString(supportUrl)) return void 0;
 	return {
 		id,
 		conversationId,
 		firstTurn,
 		outcome,
 		answer,
-		sources: parsed,
 		...guideKey === void 0 ? {} : { guideKey },
 		...supportUrl === void 0 ? {} : { supportUrl }
 	};
@@ -2720,12 +2696,6 @@ function PlayIcon() {
 		children: /* @__PURE__ */ jsx("path", { d: "M7 4.5v15l12-7.5z" })
 	});
 }
-function DocIcon() {
-	return /* @__PURE__ */ jsxs(Glyph, {
-		width: 1.8,
-		children: [/* @__PURE__ */ jsx("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ jsx("path", { d: "M14 3v5h5M9 13h6M9 17h4" })]
-	});
-}
 function ExternalIcon() {
 	return /* @__PURE__ */ jsx(Glyph, {
 		width: 1.8,
@@ -2763,12 +2733,6 @@ function RestartIcon() {
 function SendIcon() {
 	return /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "M12 19V5M5 12l7-7 7 7" }) });
 }
-function ChevronDownIcon() {
-	return /* @__PURE__ */ jsx(Glyph, {
-		width: 1.8,
-		children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
-	});
-}
 function CheckIcon() {
 	return /* @__PURE__ */ jsx(Glyph, {
 		width: 1.8,
@@ -4022,16 +3986,6 @@ function QuestionPanel({ inline, launcher, close, focusBox }) {
 		followRef.current = false;
 		measure();
 	}, [messages]);
-	const keepInPlace = (change) => {
-		const box = scrollRef.current;
-		const before = box ? {
-			height: box.scrollHeight,
-			top: box.scrollTop
-		} : null;
-		flushSync(change);
-		if (box && before && anchored) box.scrollTop = before.top - (box.scrollHeight - before.height);
-		measure();
-	};
 	useEffect(() => {
 		const seen = seenRef.current;
 		let finished = null;
@@ -4040,7 +3994,7 @@ function QuestionPanel({ inline, launcher, close, focusBox }) {
 			if (message.kind === "waiting") continue;
 			seen.add(message.id);
 			if (message.kind === "reply") {
-				const { greeting, closing } = replyWords(message, listed, api.firstName, L);
+				const { greeting, closing } = replyWords(message, api.firstName, L);
 				finished = [
 					greeting,
 					plainAnswer(message.reply.answer),
@@ -4230,10 +4184,9 @@ function QuestionPanel({ inline, launcher, close, focusBox }) {
 									latest: item.question.id === latestQuestion,
 									fresh: !seenRef.current.has(item.response.id),
 									guide: guideFor(item.response, listed),
-									words: replyWords(item.response, listed, api.firstName, L),
+									words: replyWords(item.response, api.firstName, L),
 									labels: L,
-									onShowMe: inline ? void 0 : start,
-									keepInPlace
+									onShowMe: inline ? void 0 : start
 								}, item.response.id),
 								item.response?.kind === "error" && /* @__PURE__ */ jsx(FailureNote, {
 									message: item.response,
@@ -4311,16 +4264,15 @@ function guideFor(message, listed) {
 	return key === void 0 ? void 0 : listed.find((guide) => guide.key === key);
 }
 /**
-* The assistant's own lines around a written answer: the greeting on the
-* first reply of a conversation, and the closing under one that offers a
-* guide. A reply with nothing to offer gets neither.
+* The assistant's own lines around a reply: the greeting on the first reply
+* of a conversation that offers a guide or an answer, and the closing under
+* any reply that offers a guide.
 */
-function replyWords(message, listed, name, labels) {
-	const { reply } = message;
-	if (reply.outcome === "NONE") return {};
+function replyWords({ reply }, name, labels) {
+	const offers = reply.outcome === "GUIDE" || reply.outcome === "ANSWERED";
 	return {
-		greeting: reply.firstTurn ? labels.greeting(name) : void 0,
-		closing: guideFor(message, listed) ? labels.guideClosing : void 0
+		greeting: reply.firstTurn && offers ? labels.greeting(name) : void 0,
+		closing: reply.guideKey !== void 0 ? labels.guideClosing : void 0
 	};
 }
 const SUGGESTION_LIMIT = 4;
@@ -4414,7 +4366,7 @@ function Waiting({ stage, since, labels, productName }) {
 		]
 	});
 }
-function ReplyArticle({ message, latest, fresh, guide, words, labels, onShowMe, keepInPlace }) {
+function ReplyArticle({ message, latest, fresh, guide, words, labels, onShowMe }) {
 	const { reply } = message;
 	const primary = latest && !message.toured;
 	const [arrived] = useState(fresh);
@@ -4428,7 +4380,7 @@ function ReplyArticle({ message, latest, fresh, guide, words, labels, onShowMe,
 						className: "sb-reply-greeting",
 						children: words.greeting
 					}),
-					/* @__PURE__ */ jsx(AnswerText, { text: reply.answer }),
+					reply.answer !== "" && /* @__PURE__ */ jsx(AnswerText, { text: reply.answer }),
 					words.closing && /* @__PURE__ */ jsx("p", {
 						className: "sb-reply-closing",
 						children: words.closing
@@ -4444,7 +4396,7 @@ function ReplyArticle({ message, latest, fresh, guide, words, labels, onShowMe,
 					children: [/* @__PURE__ */ jsx(PlayIcon, {}), labels.showMeHow]
 				})
 			}),
-			reply.outcome === "NONE" && reply.supportUrl && /* @__PURE__ */ jsxs("div", {
+			reply.supportUrl && /* @__PURE__ */ jsxs("div", {
 				className: "sb-support",
 				children: [/* @__PURE__ */ jsx("span", { children: labels.supportOffer }), /* @__PURE__ */ jsxs("a", {
 					className: "sb-support-link",
@@ -4460,82 +4412,10 @@ function ReplyArticle({ message, latest, fresh, guide, words, labels, onShowMe,
 						})
 					]
 				})]
-			}),
-			reply.sources.length > 0 && (latest ? /* @__PURE__ */ jsx(Sources, {
-				sources: reply.sources,
-				labels
-			}) : /* @__PURE__ */ jsx(FoldedSources, {
-				sources: reply.sources,
-				labels,
-				keepInPlace
-			}))
+			})
 		]
 	});
 }
-function Sources({ sources, labels }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "sb-sources",
-		role: "group",
-		"aria-label": labels.sources,
-		children: /* @__PURE__ */ jsx(SourceRows, {
-			sources,
-			labels
-		})
-	});
-}
-function FoldedSources({ sources, labels, keepInPlace }) {
-	const [open, setOpen] = useState(false);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "sb-sources",
-		role: "group",
-		"aria-label": labels.sources,
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			className: "sb-sources-toggle",
-			"aria-expanded": open,
-			onClick: () => keepInPlace(() => setOpen((now) => !now)),
-			children: [
-				/* @__PURE__ */ jsx(DocIcon, {}),
-				/* @__PURE__ */ jsx("span", { children: labels.sourcesCount(sources.length) }),
-				/* @__PURE__ */ jsx(ChevronDownIcon, {})
-			]
-		}), open && /* @__PURE__ */ jsx(SourceRows, {
-			sources,
-			labels
-		})]
-	});
-}
-function SourceRows({ sources, labels }) {
-	return /* @__PURE__ */ jsx(Fragment, { children: sources.map((source) => {
-		const name = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DocIcon, {}), /* @__PURE__ */ jsxs("span", {
-			className: "sb-doc-text",
-			children: [source.heading !== void 0 && /* @__PURE__ */ jsx("span", {
-				className: "sb-doc-trail",
-				children: `${source.title} › `
-			}), /* @__PURE__ */ jsx("span", {
-				className: "sb-doc-title",
-				children: source.heading ?? source.title
-			})]
-		})] });
-		return source.url === void 0 ? /* @__PURE__ */ jsx("div", {
-			className: "sb-doc",
-			children: name
-		}, source.id) : /* @__PURE__ */ jsxs("a", {
-			className: "sb-doc",
-			href: source.url,
-			target: "_blank",
-			rel: "noreferrer",
-			children: [
-				name,
-				/* @__PURE__ */ jsx(ExternalIcon, {}),
-				/* @__PURE__ */ jsx("span", {
-					className: "sb-sr",
-					children: labels.newTab
-				})
-			]
-		}, source.id);
-	}) });
-}
 function FailureNote({ message, fresh, labels, onRetry }) {
 	const { failure } = message;
 	const lost = failure.kind === "lost";

package/dist/styles.css

@@ -560,74 +560,6 @@
   color: var(--sb-accent);
 }
 
-.sb-root .sb-sources {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--sb-border);
-  border-radius: var(--sb-r2);
-  overflow: hidden;
-}
-.sb-root .sb-doc,
-.sb-root .sb-sources-toggle {
-  width: 100%;
-  min-height: 44px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 0 12px;
-  font-size: calc(var(--sb-size-base) - 1px);
-}
-.sb-root .sb-doc {
-  color: var(--sb-text);
-  text-decoration: none;
-}
-.sb-root .sb-doc + .sb-doc,
-.sb-root .sb-sources-toggle + .sb-doc {
-  border-top: 1px solid var(--sb-border);
-}
-.sb-root a.sb-doc:hover,
-.sb-root .sb-sources-toggle:hover {
-  background: var(--sb-surface-hover);
-}
-.sb-root .sb-doc > svg {
-  flex-shrink: 0;
-  width: 15px;
-  height: 15px;
-  color: var(--sb-text-muted);
-}
-.sb-root .sb-doc-text + svg {
-  width: 14px;
-  height: 14px;
-}
-.sb-root .sb-doc-text {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.sb-root .sb-doc-trail {
-  color: var(--sb-text-muted);
-}
-.sb-root .sb-sources-toggle {
-  border: 0;
-  background: transparent;
-  color: var(--sb-text-muted);
-  text-align: left;
-  cursor: pointer;
-}
-.sb-root .sb-sources-toggle span {
-  flex: 1;
-}
-.sb-root .sb-sources-toggle svg {
-  flex-shrink: 0;
-  width: 15px;
-  height: 15px;
-}
-.sb-root .sb-sources-toggle[aria-expanded="true"] svg:last-child {
-  transform: rotate(180deg);
-}
-
 .sb-root .sb-support {
   display: flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sunboard/react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Product tours, tooltips and a Help launcher with an assistant, for your React app. Sunboard creates the guides from your docs and keeps them working as your app changes.",
   "license": "MIT",
   "homepage": "https://sunboardhq.com",