@dropby/vue 0.4.0

package/dist/components/index.js

@@ -0,0 +1,1125 @@
+import { t as useDropBy } from "../chunks/use-drop-by-4B6MMMx1.js";
+import { a as useChatThread, i as useIdeas, n as useFeatureFlag, o as useChatThreads, r as usePendingAsks } from "../chunks/use-feature-BQHA7pdn.js";
+import { n as chatAttachmentMaxByteSize, r as uuid } from "../chunks/chat-attachments-BeJa4tEd.js";
+import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, onScopeDispose, onUpdated, reactive, ref, shallowRef, toValue, watch, watchEffect } from "vue";
+import { DropByError, isVotableIdea, validateAskAnswers } from "@dropby/browser";
+import { fetchChatAttachmentFile } from "@dropby/browser/attachments";
+function asDropByError(caught) {
+	return caught instanceof DropByError ? caught : new DropByError("request_failed", caught instanceof Error ? caught.message : "DropBy request failed", { cause: caught });
+}
+function paginate(fields, size) {
+	const limit = size && size > 0 ? size : fields.length;
+	if (limit >= fields.length) return [fields];
+	const pages = [];
+	for (let i = 0; i < fields.length; i += limit) pages.push(fields.slice(i, i + limit));
+	return pages;
+}
+function toRequest(answers) {
+	return { answers: Object.entries(answers).map(([fieldId, value]) => ({
+		fieldId,
+		value
+	})) };
+}
+function issuesFor(fields, answers) {
+	const map = {};
+	for (const issue of validateAskAnswers({ fields }, toRequest(answers)).issues) map[issue.fieldId] = issue.message;
+	return map;
+}
+const AskForm = defineComponent({
+	name: "AskForm",
+	slots: Object,
+	props: {
+		ask: {
+			type: Object,
+			required: true
+		},
+		fieldsPerStep: {
+			type: Number,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const { actions } = usePendingAsks();
+		const answers = ref({});
+		const step = ref(0);
+		const submitting = ref(false);
+		const issues = ref({});
+		const failure = shallowRef(null);
+		const pages = computed(() => paginate(props.ask.fields, props.fieldsPerStep));
+		const stepCount = computed(() => pages.value.length);
+		const safeStep = computed(() => Math.min(step.value, stepCount.value - 1));
+		const fields = computed(() => pages.value[safeStep.value] ?? []);
+		const isFirst = computed(() => safeStep.value === 0);
+		const isLast = computed(() => safeStep.value === stepCount.value - 1);
+		const stepped = computed(() => stepCount.value > 1);
+		function setAnswer(fieldId, value) {
+			answers.value = {
+				...answers.value,
+				[fieldId]: value
+			};
+			if (fieldId in issues.value) {
+				const next = { ...issues.value };
+				delete next[fieldId];
+				issues.value = next;
+			}
+		}
+		function back() {
+			issues.value = {};
+			step.value = Math.max(0, step.value - 1);
+		}
+		function next() {
+			const stepIssues = issuesFor(fields.value, answers.value);
+			if (Object.keys(stepIssues).length > 0) {
+				issues.value = stepIssues;
+				return;
+			}
+			issues.value = {};
+			step.value = Math.min(stepCount.value - 1, step.value + 1);
+		}
+		async function submit() {
+			const allIssues = issuesFor(props.ask.fields, answers.value);
+			if (Object.keys(allIssues).length > 0) {
+				issues.value = allIssues;
+				const firstBadStep = pages.value.findIndex((page) => page.some((field) => allIssues[field.fieldId]));
+				if (firstBadStep >= 0) step.value = firstBadStep;
+				return;
+			}
+			await attempt("submit", () => actions.submit(props.ask.askId, toRequest(answers.value)));
+		}
+		async function dismiss() {
+			await attempt("dismiss", () => actions.dismiss(props.ask.askId));
+		}
+		async function attempt(action, run) {
+			submitting.value = true;
+			failure.value = null;
+			try {
+				await run();
+			} catch (caught) {
+				failure.value = {
+					action,
+					error: asDropByError(caught)
+				};
+			} finally {
+				submitting.value = false;
+			}
+		}
+		function handleSubmit(event) {
+			event.preventDefault();
+			if (isLast.value) submit();
+			else next();
+		}
+		return () => {
+			const state = {
+				ask: props.ask,
+				fields: fields.value,
+				answers: answers.value,
+				setAnswer,
+				step: safeStep.value,
+				stepCount: stepCount.value,
+				isFirst: isFirst.value,
+				isLast: isLast.value,
+				back,
+				next,
+				submit,
+				dismiss,
+				submitting: submitting.value,
+				issues: issues.value,
+				error: failure.value?.error ?? null
+			};
+			if (slots.default) return h("form", { onSubmit: handleSubmit }, slots.default(state));
+			return h("form", {
+				"data-step": stepped.value ? safeStep.value + 1 : void 0,
+				"data-step-count": stepped.value ? stepCount.value : void 0,
+				onSubmit: handleSubmit
+			}, [
+				...fields.value.map((field) => renderFieldControl(field, answers.value[field.fieldId], issues.value[field.fieldId], (value) => setAnswer(field.fieldId, value))),
+				failure.value ? h("p", { role: "alert" }, failure.value.action === "submit" ? "couldn't send your answer. try again." : "couldn't dismiss this. try again.") : null,
+				h("div", [
+					!isFirst.value ? h("button", {
+						type: "button",
+						onClick: back
+					}, "back") : null,
+					h("button", {
+						type: "submit",
+						"aria-busy": submitting.value ? "true" : void 0,
+						"data-busy": submitting.value ? "" : void 0,
+						disabled: submitting.value
+					}, isLast.value ? "submit" : "next"),
+					props.ask.dismissible ? h("button", {
+						type: "button",
+						onClick: () => void dismiss(),
+						disabled: submitting.value
+					}, "dismiss") : null
+				])
+			]);
+		};
+	}
+});
+function renderFieldControl(field, value, issue, onChange) {
+	return h("div", {
+		role: "group",
+		"aria-label": field.label,
+		"aria-invalid": issue ? "true" : void 0,
+		"data-field-type": field.type
+	}, [
+		h("span", `${field.label}${field.required ? " *" : ""}`),
+		renderFieldInput(field, value, onChange),
+		issue ? h("span", { role: "alert" }, issue) : null
+	]);
+}
+function renderFieldInput(field, value, onChange) {
+	if (field.type === "short_text" || field.type === "long_text") {
+		const text = typeof value === "string" ? value : "";
+		const onInput = (event) => onChange(event.target.value);
+		const shared = {
+			"aria-label": field.label,
+			maxlength: field.maxLength,
+			value: text,
+			onInput
+		};
+		return field.type === "long_text" ? h("textarea", shared) : h("input", {
+			type: "text",
+			...shared
+		});
+	}
+	if (field.type === "rating") {
+		const ratings = [];
+		for (let n = field.min; n <= field.max; n += 1) ratings.push(n);
+		return ratings.map((n) => h("label", { key: n }, [h("input", {
+			type: "radio",
+			name: field.fieldId,
+			checked: value === n,
+			onChange: () => onChange(n)
+		}), n]));
+	}
+	const selected = Array.isArray(value) ? value : [];
+	const multiple = field.type === "multi_choice";
+	const atMax = multiple && selected.length >= field.maxSelections;
+	return field.options.map((option) => {
+		const checked = selected.includes(option.optionId);
+		return h("label", { key: option.optionId }, [h("input", {
+			type: multiple ? "checkbox" : "radio",
+			name: field.fieldId,
+			checked,
+			disabled: multiple ? !checked && atMax : false,
+			onChange: () => !multiple ? onChange([option.optionId]) : onChange(checked ? selected.filter((id) => id !== option.optionId) : [...selected, option.optionId])
+		}), option.label]);
+	});
+}
+const Ask = defineComponent({
+	name: "Ask",
+	slots: Object,
+	props: {
+		ask: {
+			type: Object,
+			required: true
+		},
+		fieldsPerStep: {
+			type: Number,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		return () => {
+			if (slots.default) return h("div", { "data-pending": "" }, slots.default({ ask: props.ask }));
+			return h("div", { "data-pending": "" }, [h("strong", props.ask.title), h(AskForm, {
+				ask: props.ask,
+				...props.fieldsPerStep !== void 0 ? { fieldsPerStep: props.fieldsPerStep } : {}
+			})]);
+		};
+	}
+});
+function scrollPort(root) {
+	const doc = root.ownerDocument, win = doc.defaultView;
+	for (let element = root; element; element = element.parentElement) if (win && element.scrollHeight > element.clientHeight && /(auto|scroll|overlay)/.test(win.getComputedStyle(element).overflowY)) return {
+		element,
+		target: element,
+		top: () => element.getBoundingClientRect().top,
+		bottom: () => element.getBoundingClientRect().bottom
+	};
+	return {
+		element: doc.scrollingElement ?? doc.documentElement,
+		target: win ?? doc,
+		top: () => 0,
+		bottom: () => win?.innerHeight ?? doc.documentElement.clientHeight
+	};
+}
+function messages(root) {
+	return [...root.querySelectorAll("[data-message-id]")];
+}
+function watchChatScrollPosition(root) {
+	const port = scrollPort(root);
+	let anchorId, offset = 0;
+	const capture = () => {
+		const anchor = messages(root).find((message) => message.getBoundingClientRect().bottom > port.top());
+		anchorId = anchor?.dataset.messageId;
+		offset = anchor ? anchor.getBoundingClientRect().top - port.top() : 0;
+	};
+	capture();
+	port.target.addEventListener("scroll", capture, { passive: true });
+	const stop = () => port.target.removeEventListener("scroll", capture);
+	return {
+		stop,
+		restore: () => {
+			stop();
+			const retained = messages(root), anchor = retained.find((message) => message.dataset.messageId === anchorId);
+			if (anchor) port.element.scrollTop += anchor.getBoundingClientRect().top - port.top() - offset;
+			else if (anchorId && retained.length) scrollChatToLatest(root);
+		}
+	};
+}
+function scrollChatToLatest(root) {
+	const last = messages(root).at(-1);
+	if (!last) return;
+	const port = scrollPort(root);
+	if (port.element === root) {
+		root.scrollTop = root.scrollHeight;
+		return;
+	}
+	port.element.scrollTop += last.getBoundingClientRect().bottom - port.bottom();
+}
+function watchChatNavigationFocus(root, selector, signal) {
+	const doc = root.ownerDocument;
+	let focused = !!("activeElement" in root ? root.activeElement : doc.activeElement)?.matches(selector);
+	const capture = (event) => {
+		const element = event.composedPath()[0];
+		focused = element instanceof Element && root.contains(element) && element.matches(selector);
+	};
+	doc.addEventListener("focusin", capture, {
+		capture: true,
+		...signal ? { signal } : {}
+	});
+	const stop = () => doc.removeEventListener("focusin", capture, true);
+	return {
+		stop,
+		restore(fallback) {
+			stop();
+			if (focused) (root.querySelector(selector) ?? fallback)?.focus({ preventScroll: true });
+		}
+	};
+}
+const followSlack = 24;
+var ChatFollower = class {
+	root;
+	signal;
+	behind;
+	port = null;
+	stopListening = null;
+	end = null;
+	following = true;
+	triedLatestAt = null;
+	constructor(root, signal, behind = () => {}) {
+		this.root = root;
+		this.signal = signal;
+		this.behind = behind;
+		signal.addEventListener("abort", () => this.stopListening?.(), { once: true });
+	}
+	settle(state) {
+		if (this.signal.aborted) return;
+		const port = ownScrollContainer(this.root);
+		if (port !== this.port) this.listen(port);
+		const opened = this.end === null && state.end !== null;
+		const shownEnd = this.end;
+		const arrived = state.end !== null && this.end !== null && state.end > this.end;
+		if (port && (opened || arrived && (this.following || state.lastMine))) scrollForwardTo(port, messages(this.root).at(-1));
+		if (state.end !== null) this.end = Math.max(this.end ?? state.end, state.end);
+		this.measure();
+		const count = state.count;
+		if (port && this.following && !opened && state.end !== null && shownEnd !== null && state.end >= shownEnd && count !== null && count > state.end && this.triedLatestAt !== count) {
+			this.triedLatestAt = count;
+			this.behind();
+		}
+	}
+	listen(port) {
+		this.stopListening?.();
+		this.stopListening = null;
+		this.port = port;
+		if (!port) return;
+		const measure = () => this.measure();
+		port.addEventListener("scroll", measure, { passive: true });
+		this.stopListening = () => port.removeEventListener("scroll", measure);
+	}
+	measure() {
+		const last = messages(this.root).at(-1);
+		this.following = !this.port || !last || last.getBoundingClientRect().bottom - this.port.getBoundingClientRect().bottom <= followSlack;
+	}
+};
+function ownScrollContainer(root) {
+	const doc = root.ownerDocument;
+	const win = doc.defaultView;
+	for (let element = root; element; element = element.parentElement) {
+		if (element === doc.body || element === doc.documentElement) return null;
+		if (win && /(auto|scroll|overlay)/.test(win.getComputedStyle(element).overflowY)) return element;
+	}
+	return null;
+}
+function scrollForwardTo(port, message) {
+	if (!message) return;
+	const beyond = message.getBoundingClientRect().bottom - port.getBoundingClientRect().bottom;
+	if (beyond > 0) port.scrollTop += beyond;
+}
+const readEnd = 24;
+var ChatSeenTracker = class {
+	options;
+	observer = null;
+	observed = /* @__PURE__ */ new Map();
+	intersecting = /* @__PURE__ */ new Set();
+	renderGeneration = 0;
+	interactionGeneration = 0;
+	failedGeneration = -1;
+	inFlight = false;
+	frame = 0;
+	constructor(options) {
+		this.options = options;
+		const { root, signal } = options;
+		const interaction = () => this.interact();
+		for (const type of [
+			"pointerdown",
+			"wheel",
+			"keydown"
+		]) root.addEventListener(type, interaction, {
+			signal,
+			passive: true
+		});
+		document.addEventListener("visibilitychange", () => {
+			if (document.visibilityState === "visible") this.interact();
+		}, { signal });
+		const scroll = () => this.recheckSoon();
+		for (const target of /* @__PURE__ */ new Set([
+			root,
+			root.getRootNode(),
+			document
+		])) target.addEventListener("scroll", scroll, {
+			signal,
+			capture: true,
+			passive: true
+		});
+		signal.addEventListener("abort", () => this.disconnect(), { once: true });
+	}
+	interact() {
+		this.interactionGeneration++;
+		this.dispatch();
+	}
+	disconnect() {
+		this.renderGeneration++;
+		this.observer?.disconnect();
+		this.observer = null;
+		this.observed.clear();
+		this.intersecting.clear();
+		if (this.frame) cancelAnimationFrame(this.frame);
+		this.frame = 0;
+	}
+	observe() {
+		this.disconnect();
+		if (this.options.signal.aborted || !this.options.permitted() || typeof IntersectionObserver === "undefined") return;
+		const generation = this.renderGeneration;
+		this.observer = new IntersectionObserver((entries) => {
+			if (generation !== this.renderGeneration || !this.options.permitted()) return;
+			for (const entry of entries) if (entry.isIntersecting) this.intersecting.add(entry.target);
+			else this.intersecting.delete(entry.target);
+			this.dispatch();
+		}, { threshold: [0, 1] });
+		for (const element of this.options.root.querySelectorAll("[data-read-message-id]")) {
+			const id = element.dataset.readMessageId;
+			if (id) {
+				this.observed.set(id, element);
+				this.observer.observe(element);
+			}
+		}
+	}
+	recheckSoon() {
+		if (this.frame || this.observed.size === 0) return;
+		this.frame = requestAnimationFrame(() => {
+			this.frame = 0;
+			this.dispatch();
+		});
+	}
+	candidate() {
+		const thread = this.options.thread();
+		if (this.options.signal.aborted || !this.options.permitted() || document.visibilityState !== "visible" || !thread || thread.userSeen.unreadTeamMessageCount === 0) return null;
+		const { lastSeenTeamMessageId, unreadTeamMessageCount } = thread.userSeen;
+		const seenIndex = thread.messages.findIndex((message) => message.messageId === lastSeenTeamMessageId);
+		let unread = !thread.hasNewerMessages ? unreadTeamMessageCount : seenIndex === -1 ? 0 : Infinity;
+		for (let index = thread.messages.length - 1; index > seenIndex && unread > 0; index--) {
+			const message = thread.messages[index];
+			if (!message || message.authorType !== "team") continue;
+			unread--;
+			const element = this.observed.get(message.messageId);
+			if (element && this.intersecting.has(element) && this.options.root.contains(element) && endOnScreen(element)) return message.messageId;
+		}
+		return null;
+	}
+	dispatch() {
+		if (this.inFlight || this.failedGeneration === this.interactionGeneration) return;
+		const messageId = this.candidate();
+		const threadId = this.options.thread()?.threadId;
+		if (!messageId || !threadId) return;
+		this.inFlight = true;
+		this.options.markSeen(threadId, messageId).then(() => {
+			if (this.candidate() === messageId) this.failedGeneration = this.interactionGeneration;
+		}).catch(() => {
+			this.failedGeneration = this.interactionGeneration;
+		}).finally(() => {
+			this.inFlight = false;
+			this.dispatch();
+		});
+	}
+};
+function endOnScreen(element) {
+	if (!element.isConnected) return false;
+	const rect = element.getBoundingClientRect();
+	if (rect.width <= 0 || rect.height <= 0) return false;
+	let left = 0, top = 0, right = window.innerWidth, bottom = window.innerHeight;
+	let current = element;
+	while (current) {
+		const style = getComputedStyle(current);
+		if (current.hasAttribute("hidden") || style.display === "none" || style.visibility === "hidden" || style.visibility === "collapse" || Number.parseFloat(style.opacity) === 0) return false;
+		if (current !== element) {
+			const clip = current.getBoundingClientRect();
+			if (/hidden|clip|scroll|auto/.test(style.overflowX)) {
+				left = Math.max(left, clip.left);
+				right = Math.min(right, clip.right);
+			}
+			if (/hidden|clip|scroll|auto/.test(style.overflowY)) {
+				top = Math.max(top, clip.top);
+				bottom = Math.min(bottom, clip.bottom);
+			}
+		}
+		const tree = current.getRootNode();
+		current = current.parentElement ?? (tree instanceof ShadowRoot ? tree.host : null);
+	}
+	const endTop = rect.bottom - Math.min(readEnd, rect.height);
+	return rect.left >= left && rect.right <= right && endTop >= top && rect.bottom <= bottom;
+}
+function saveFile(file, fileName, container = document.body) {
+	const href = URL.createObjectURL(file);
+	const link = document.createElement("a");
+	link.href = href;
+	link.download = fileName;
+	link.target = "_self";
+	container.append(link);
+	link.click();
+	link.remove();
+	setTimeout(() => URL.revokeObjectURL(href), 6e4);
+}
+function attachmentFailureCopy(code) {
+	return `couldn't attach. ${code === "invalid_file_name" ? "that file name can't be used." : code === "unsupported_type" ? "that file type isn't supported." : code === "too_large" ? `that file is larger than ${chatAttachmentMaxByteSize / 1024 / 1024} MB.` : code === "classification_failed" || code === "type_mismatch" || code === "read_failed" || code === "size_mismatch" ? "that file couldn't be read." : "try again."}`;
+}
+function sameAttempt(kept, text, attachmentIds) {
+	return kept.text === text && kept.attachmentIds.length === attachmentIds.length && kept.attachmentIds.every((id, index) => id === attachmentIds[index]);
+}
+const ChatComposer = defineComponent({
+	name: "ChatComposer",
+	slots: Object,
+	props: {
+		threadId: {
+			type: String,
+			required: true
+		},
+		attachments: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const { actions } = useChatThread(() => props.threadId);
+		const draft = ref("");
+		const sending = ref(false);
+		const error = shallowRef(null);
+		const attempts = /* @__PURE__ */ new Map();
+		function setDraft(value) {
+			draft.value = value;
+		}
+		async function send() {
+			const text = draft.value.trim();
+			const attachments = props.attachments;
+			if (!text || sending.value || (attachments?.pending ?? false)) return;
+			sending.value = true;
+			error.value = null;
+			try {
+				const references = attachments?.references() ?? [];
+				const attachmentIds = references.map((reference) => reference.attachmentId);
+				const threadId = props.threadId;
+				const kept = attempts.get(threadId);
+				const key = kept && sameAttempt(kept, text, attachmentIds) ? kept.key : uuid();
+				attempts.set(threadId, {
+					key,
+					text,
+					attachmentIds
+				});
+				await actions.sendMessage(references.length > 0 ? {
+					text,
+					attachments: references
+				} : { text }, { idempotencyKey: key });
+				attempts.delete(threadId);
+				draft.value = "";
+				attachments?.clear();
+			} catch (caught) {
+				error.value = asDropByError(caught);
+			} finally {
+				sending.value = false;
+			}
+		}
+		function handleSubmit(event) {
+			event.preventDefault();
+			send();
+		}
+		return () => {
+			const attachments = props.attachments;
+			const state = {
+				draft: draft.value,
+				setDraft,
+				send,
+				sending: sending.value,
+				error: error.value,
+				attachments
+			};
+			if (slots.default) return h("form", { onSubmit: handleSubmit }, slots.default(state));
+			const sendDisabled = sending.value || draft.value.trim().length === 0 || (attachments?.pending ?? false);
+			return h("form", { onSubmit: handleSubmit }, [
+				h("textarea", {
+					"aria-label": "message",
+					value: draft.value,
+					onInput: (event) => setDraft(event.target.value)
+				}),
+				attachments ? renderAttachments(attachments) : null,
+				error.value ? h("p", { role: "alert" }, "couldn't send. your message is still here.") : null,
+				h("button", {
+					type: "submit",
+					"aria-busy": sending.value ? "true" : void 0,
+					"data-busy": sending.value ? "" : void 0,
+					disabled: sendDisabled
+				}, "send")
+			]);
+		};
+	}
+});
+function renderAttachments(attachments) {
+	return h("div", { "data-attachments": "" }, [
+		h("input", {
+			type: "file",
+			multiple: true,
+			accept: attachments.accept,
+			"aria-label": "attach files",
+			onChange: (event) => {
+				const input = event.target;
+				if (input.files && input.files.length > 0) attachments.add(input.files);
+				input.value = "";
+			}
+		}),
+		attachments.notice ? h("p", { role: "alert" }, attachments.notice) : null,
+		attachments.drafts.length > 0 ? h("ul", { "aria-label": "attachments" }, attachments.drafts.map((item) => h("li", {
+			key: item.localId,
+			"data-status": item.status,
+			"data-attachment-kind": item.kind
+		}, [
+			item.previewUrl ? h("img", {
+				src: item.previewUrl,
+				alt: "",
+				width: 48,
+				height: 48
+			}) : null,
+			h("span", item.fileName),
+			item.error ? h("span", { role: "alert" }, attachmentFailureCopy(item.error.code)) : null,
+			h("button", {
+				type: "button",
+				"aria-label": `remove ${item.fileName}`,
+				onClick: () => attachments.remove(item.localId)
+			}, "remove")
+		]))) : null
+	]);
+}
+function useChatNavigation(latestSucceeded) {
+	const root = ref(null);
+	let generation = 0, position = null, focus = null;
+	onScopeDispose(() => {
+		generation++;
+		position?.stop();
+		focus?.stop();
+		position = null;
+	});
+	async function navigate(kind, run) {
+		const element = root.value;
+		if (!element) return;
+		const ticket = ++generation;
+		position?.stop();
+		focus?.stop();
+		const captured = watchChatScrollPosition(element);
+		position = captured;
+		const capturedFocus = watchChatNavigationFocus(element, `[data-history-action="${kind}"]`);
+		focus = capturedFocus;
+		try {
+			await run();
+		} finally {
+			await nextTick();
+			if (ticket === generation && root.value === element) {
+				if (kind === "latest" && latestSucceeded()) {
+					captured.stop();
+					scrollChatToLatest(element);
+				} else captured.restore();
+				position = null;
+				capturedFocus.restore(element);
+				focus = null;
+			}
+		}
+	}
+	return {
+		root,
+		navigate
+	};
+}
+function mayAcknowledge(core) {
+	const capabilities = core.capabilities.getSnapshot();
+	return capabilities.chat.canRead && !capabilities.actionDisabled("chat.thread:seen");
+}
+function useChatSeen(core, root, id, enabled) {
+	let stop = null;
+	let tracker = null;
+	function start() {
+		const element = root.value;
+		if (stop || !enabled() || !element) return;
+		const lifetime = new AbortController();
+		const current = new ChatSeenTracker({
+			root: element,
+			signal: lifetime.signal,
+			thread: () => core.chat.getSnapshot().threadsById[id()]?.data ?? null,
+			permitted: () => mayAcknowledge(core),
+			markSeen: (threadId, messageId) => core.chat.markThreadSeen(threadId, { seenThroughMessageId: messageId })
+		});
+		let permitted = mayAcknowledge(core);
+		const stopCapabilities = core.capabilities.subscribe(() => {
+			const now = mayAcknowledge(core);
+			if (now && !permitted) {
+				current.observe();
+				current.interact();
+			}
+			permitted = now;
+		});
+		const live = () => ["open", "polling"].includes(core.connection.getSnapshot().status);
+		let connected = live();
+		const stopConnection = core.connection.subscribe(() => {
+			const now = live();
+			if (now && !connected) current.interact();
+			connected = now;
+		});
+		tracker = current;
+		current.observe();
+		stop = () => {
+			lifetime.abort();
+			stopCapabilities();
+			stopConnection();
+			tracker = null;
+			stop = null;
+		};
+	}
+	onMounted(start);
+	onUpdated(() => tracker?.observe());
+	watch(enabled, (on) => on ? start() : stop?.());
+	onBeforeUnmount(() => stop?.());
+}
+function useChatFollow(root, thread, enabled, loadLatest) {
+	const lifetime = new AbortController();
+	let follower = null;
+	const newest = () => {
+		const current = thread();
+		return {
+			end: current?.messages.at(-1)?.sequence ?? null,
+			lastMine: current?.messages.at(-1)?.authorType === "user",
+			count: current?.messageCount ?? null
+		};
+	};
+	onMounted(() => {
+		if (!enabled() || !root.value) return;
+		follower = new ChatFollower(root.value, lifetime.signal, loadLatest);
+		follower.settle(newest());
+	});
+	watch([() => newest().end, () => newest().count], () => follower?.settle(newest()), { flush: "post" });
+	onBeforeUnmount(() => lifetime.abort());
+}
+const ChatThread = defineComponent({
+	name: "ChatThread",
+	slots: Object,
+	props: {
+		id: {
+			type: String,
+			required: true
+		},
+		manualLoad: {
+			type: Boolean,
+			default: false
+		},
+		acknowledge: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(props, { slots }) {
+		const core = useDropBy();
+		const { data, actions, olderMessages, latestMessages } = useChatThread(() => props.id);
+		const navigation = useChatNavigation(() => latestMessages.value?.status === "success");
+		useChatSeen(core, navigation.root, () => props.id, () => props.acknowledge && !slots.default);
+		useChatFollow(navigation.root, () => data.value?.data, () => !slots.default, () => void actions.loadLatestMessages());
+		onMounted(() => {
+			watchEffect(() => {
+				if (!props.manualLoad && (data.value?.status ?? "idle") === "idle") actions.open();
+			});
+		});
+		return () => {
+			const resource = data.value;
+			if (slots.default) {
+				const state = {
+					thread: resource,
+					actions,
+					olderMessages: olderMessages.value,
+					latestMessages: latestMessages.value
+				};
+				return slots.default(state);
+			}
+			const status = resource?.status ?? "idle";
+			const thread = resource?.data;
+			return h("div", {
+				"data-status": status,
+				tabindex: -1,
+				ref: navigation.root
+			}, [
+				thread?.hasOlderMessages ? h("button", {
+					type: "button",
+					"data-history-action": "older",
+					disabled: olderMessages.value?.status === "loading" || latestMessages.value?.status === "loading",
+					onClick: () => void navigation.navigate("older", () => actions.loadOlderMessages())
+				}, olderMessages.value?.status === "loading" ? "loading older messages" : "load older messages") : null,
+				status === "error" && !thread ? h("p", { role: "alert" }, ["couldn't open this conversation. ", h("button", {
+					type: "button",
+					onClick: () => void actions.open()
+				}, "try again")]) : null,
+				olderMessages.value?.error ? h("p", { role: "alert" }, "couldn't load older messages. try again.") : null,
+				h("ul", { "aria-live": "polite" }, (thread?.messages ?? []).map((message) => h("li", {
+					key: message.messageId,
+					"data-message-id": message.messageId,
+					"data-read-message-id": message.authorType === "team" ? message.messageId : void 0,
+					"data-author": message.authorType
+				}, [message.text, message.attachments.length > 0 ? h("ul", {}, message.attachments.map((attachment) => h(AttachmentDownload, {
+					key: attachment.attachmentId,
+					attachment,
+					fetchFile: (id) => fetchChatAttachmentFile(core, id)
+				}))) : null]))),
+				thread && (thread.hasNewerMessages || latestMessages.value?.status === "loading" || latestMessages.value?.error) ? h("button", {
+					type: "button",
+					"data-history-action": "latest",
+					disabled: latestMessages.value?.status === "loading",
+					onClick: () => void navigation.navigate("latest", () => actions.loadLatestMessages())
+				}, latestMessages.value?.status === "loading" ? "loading latest messages" : "back to latest") : null,
+				latestMessages.value?.error ? h("p", { role: "alert" }, "couldn't load latest messages. try again.") : null,
+				h(ChatComposer, { threadId: props.id })
+			]);
+		};
+	}
+});
+const AttachmentDownload = defineComponent({
+	name: "AttachmentDownload",
+	props: {
+		attachment: {
+			type: Object,
+			required: true
+		},
+		fetchFile: {
+			type: Function,
+			required: true
+		}
+	},
+	setup(props) {
+		const downloading = ref(false);
+		const error = ref(null);
+		async function download() {
+			downloading.value = true;
+			error.value = null;
+			try {
+				saveFile(await props.fetchFile(props.attachment.attachmentId), props.attachment.fileName);
+			} catch (caught) {
+				error.value = caught instanceof Error ? caught : new Error(String(caught));
+			} finally {
+				downloading.value = false;
+			}
+		}
+		return () => h("li", {}, [h("button", {
+			type: "button",
+			"aria-label": `download ${props.attachment.fileName}`,
+			"aria-busy": downloading.value ? "true" : void 0,
+			"data-attachment-kind": props.attachment.kind,
+			"data-busy": downloading.value ? "" : void 0,
+			"data-error": error.value ? "" : void 0,
+			disabled: downloading.value,
+			onClick: () => void download()
+		}, props.attachment.fileName), error.value ? h("span", { role: "alert" }, `couldn't download ${props.attachment.fileName}. try again.`) : null]);
+	}
+});
+const ChatThreadList = defineComponent({
+	name: "ChatThreadList",
+	slots: Object,
+	props: {
+		manualLoad: {
+			type: Boolean,
+			default: false
+		},
+		selectedId: {
+			type: String,
+			default: null
+		},
+		onSelect: { type: Function }
+	},
+	setup(props, { slots }) {
+		const { data, actions } = useChatThreads();
+		onMounted(() => {
+			watchEffect(() => {
+				if (!props.manualLoad && data.value.status === "idle") actions.listThreads();
+			});
+		});
+		return () => {
+			const collection = data.value;
+			if (slots.default) {
+				const state = {
+					threads: collection,
+					actions
+				};
+				return slots.default(state);
+			}
+			const empty = collection.status === "success" && collection.items.length === 0;
+			const select = props.onSelect;
+			return h("ul", {
+				"aria-live": "polite",
+				"data-status": collection.status,
+				"data-empty": empty ? "" : void 0
+			}, [
+				h("li", [
+					h("button", {
+						type: "button",
+						disabled: collection.status === "loading",
+						onClick: () => void actions.listThreads({ filter: collection.filter })
+					}, "refresh"),
+					h("button", {
+						type: "button",
+						"aria-pressed": collection.filter === "unread",
+						onClick: () => void actions.listThreads({ filter: collection.filter === "unread" ? "all" : "unread" })
+					}, "unread"),
+					collection.status === "error" ? h("span", { role: "alert" }, "couldn't load conversations. try again.") : null
+				]),
+				...collection.items.map((thread) => {
+					const unread = thread.userSeen.unreadTeamMessageCount;
+					const summary = `${thread.lastMessagePreview || "conversation"}${unread > 0 ? ` · ${unread} unread replies` : ""}`;
+					return h("li", {
+						key: thread.threadId,
+						"data-status": thread.status,
+						"data-unread": unread > 0 ? "" : void 0
+					}, select ? h("button", {
+						type: "button",
+						"aria-current": thread.threadId === props.selectedId ? "true" : void 0,
+						onClick: () => select(thread.threadId)
+					}, summary) : summary);
+				}),
+				collection.hasMore || collection.status === "success" && collection.error ? h("li", { "data-load-more": "" }, [collection.status === "success" && collection.error ? h("span", { role: "alert" }, "couldn't load more conversations. try again.") : null, h("button", {
+					type: "button",
+					disabled: collection.loadingMore,
+					onClick: () => void actions.loadMoreThreads()
+				}, collection.loadingMore ? "loading more conversations" : "show more conversations")]) : null
+			]);
+		};
+	}
+});
+const Feature = defineComponent({
+	name: "Feature",
+	slots: Object,
+	inheritAttrs: false,
+	props: {
+		name: {
+			type: String,
+			required: true
+		},
+		equals: {
+			type: [
+				Boolean,
+				String,
+				Number
+			],
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const value = useFeatureFlag(() => props.name);
+		return () => {
+			return (props.equals === void 0 ? Boolean(value.value) : value.value === props.equals) ? slots.default?.() : slots.fallback?.();
+		};
+	}
+});
+function useIdeaVote(idea) {
+	const { actions } = useIdeas();
+	const voting = ref(false);
+	const error = shallowRef(null);
+	const current = computed(() => toValue(idea));
+	const voted = computed(() => current.value.viewerHasVoted);
+	async function run(action) {
+		voting.value = true;
+		error.value = null;
+		try {
+			await action();
+		} catch (caught) {
+			error.value = asDropByError(caught);
+		} finally {
+			voting.value = false;
+		}
+	}
+	return reactive({
+		idea: current,
+		voted,
+		votable: computed(() => isVotableIdea(current.value)),
+		voting,
+		error,
+		vote: () => run(() => actions.vote(current.value.ideaId)),
+		unvote: () => run(() => actions.unvote(current.value.ideaId)),
+		toggle: () => run(() => voted.value ? actions.unvote(current.value.ideaId) : actions.vote(current.value.ideaId))
+	});
+}
+const IdeaVoteButton = defineComponent({
+	name: "IdeaVoteButton",
+	slots: Object,
+	inheritAttrs: false,
+	props: { idea: {
+		type: Object,
+		required: true
+	} },
+	setup(props, { slots, attrs }) {
+		const state = useIdeaVote(() => props.idea);
+		function handleClick(event) {
+			for (const listener of [attrs.onClick].flat()) if (typeof listener === "function") listener(event);
+			if (event.defaultPrevented) return;
+			state.toggle();
+		}
+		return () => {
+			const passthrough = { ...attrs };
+			delete passthrough.onClick;
+			delete passthrough.disabled;
+			const disabled = attrs.disabled ?? (state.voting || !state.votable);
+			const content = slots.default ? slots.default(state) : state.idea.voteCount;
+			return h("button", {
+				type: "button",
+				"aria-pressed": state.voted ? "true" : "false",
+				"aria-busy": state.voting ? "true" : void 0,
+				"data-voted": state.voted ? "" : void 0,
+				"data-busy": state.voting ? "" : void 0,
+				...passthrough,
+				disabled,
+				onClick: handleClick
+			}, content);
+		};
+	}
+});
+const Idea = defineComponent({
+	name: "Idea",
+	slots: Object,
+	props: { idea: {
+		type: Object,
+		required: true
+	} },
+	setup(props, { slots }) {
+		return () => {
+			const voted = props.idea.viewerHasVoted ? "" : void 0;
+			if (slots.default) return h("div", { "data-voted": voted }, slots.default({ idea: props.idea }));
+			return h("div", { "data-voted": voted }, [h(IdeaVoteButton, { idea: props.idea }), h("div", [h("strong", props.idea.title), props.idea.description ? h("p", props.idea.description) : null])]);
+		};
+	}
+});
+const IdeaList = defineComponent({
+	name: "IdeaList",
+	slots: Object,
+	props: {
+		view: {
+			type: String,
+			default: void 0
+		},
+		manualLoad: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(props, { slots }) {
+		const { data, actions } = useIdeas();
+		onMounted(() => {
+			watchEffect(() => {
+				if (!props.manualLoad && data.value.status === "idle") actions.list({ view: props.view });
+			});
+		});
+		return () => {
+			const collection = data.value;
+			if (slots.default) {
+				const state = {
+					ideas: collection,
+					actions
+				};
+				return slots.default(state);
+			}
+			const empty = collection.status === "success" && collection.items.length === 0;
+			const items = collection.items.map((idea) => h("li", { key: idea.ideaId }, h(Idea, { idea })));
+			if (collection.hasMore) items.push(h("li", {
+				key: "load-more",
+				"data-load-more": ""
+			}, [h("button", {
+				type: "button",
+				disabled: collection.loadingMore,
+				onClick: () => void actions.loadMore()
+			}, collection.loadingMore ? "loading more ideas" : "show more ideas")]));
+			return h("ul", {
+				"aria-live": "polite",
+				"data-status": collection.status,
+				"data-empty": empty ? "" : void 0
+			}, items);
+		};
+	}
+});
+const PendingAsks = defineComponent({
+	name: "PendingAsks",
+	slots: Object,
+	props: {
+		fieldsPerStep: {
+			type: Number,
+			default: void 0
+		},
+		manualLoad: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(props, { slots }) {
+		const { data, actions } = usePendingAsks();
+		onMounted(() => {
+			watchEffect(() => {
+				if (!props.manualLoad && data.value.status === "idle") actions.listPending();
+			});
+		});
+		return () => {
+			const collection = data.value;
+			if (slots.default) {
+				const state = {
+					asks: collection,
+					actions
+				};
+				return slots.default(state);
+			}
+			const empty = collection.status === "success" && collection.items.length === 0;
+			return h("ul", {
+				"aria-live": "polite",
+				"data-status": collection.status,
+				"data-empty": empty ? "" : void 0
+			}, [...collection.items.map((ask) => h("li", { key: ask.askId }, h(Ask, {
+				ask,
+				...props.fieldsPerStep !== void 0 ? { fieldsPerStep: props.fieldsPerStep } : {}
+			}))), collection.status === "error" ? h("li", [h("span", { role: "status" }, "couldn’t load asks."), h("button", {
+				type: "button",
+				onClick: () => void actions.listPending()
+			}, "retry")]) : collection.hasMore || collection.error ? h("li", { "data-load-more": "" }, [collection.error ? h("span", { role: "status" }, "couldn’t load more asks.") : null, h("button", {
+				type: "button",
+				disabled: collection.loadingMore,
+				onClick: () => void actions.loadMorePending()
+			}, collection.loadingMore ? "loading more asks" : "show more asks")]) : null]);
+		};
+	}
+});
+export { Ask, AskForm, ChatComposer, ChatThread, ChatThreadList, Feature, Idea, IdeaList, IdeaVoteButton, PendingAsks };