@blogmcp/community 0.0.0-stage → 0.2.0

package/src/ui/DiscussionView.vue

@@ -0,0 +1,334 @@
+<script lang="ts">
+/**
+ * A refused age band, per element: kb-api keeps nothing of it (§7.4.2), so the element does, for its whole life —
+ * a discussion started again (another language) and the element put back by its host included.
+ */
+const refusedAges = new WeakMap<object, number>()
+</script>
+
+<script setup lang="ts">
+/**
+ * `<blogmcp-discussion>`: the discussion of one article (m1-contracts.md §10.4). Lives in a shadow root; talks
+ * only to the host's relative `api-base` through the SDK client; renders nothing when discussions are off,
+ * and one sentence while the discussion takes no writes yet.
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, shallowRef, useHost, watch } from 'vue'
+import { communityMessageAnchor, communityMessageSeqFromHash, signInLink, statementPath, type CommunityTransport, type DiscussionRestriction } from '@blogmcp/sdk/community'
+import { parseRoutes, routesWithDefaults } from '../core/attrs'
+import { communityClientFor, siteBaseFor, warnOnce } from '../core/client'
+import { createDiscussionController, type DiscussionController } from '../core/discussion'
+import type { DiscussionRealtime } from '../core/realtime'
+import { formatDate } from '../core/format'
+import { documentLang, pickLang, type Lang } from '../core/i18n'
+import { failureText } from '../core/outcomes'
+import ConfirmDialog from './ConfirmDialog.vue'
+import MessageComposer from './MessageComposer.vue'
+import MessageItem from './MessageItem.vue'
+import OnboardingSteps from './OnboardingSteps.vue'
+import ReactionBar from './ReactionBar.vue'
+import ReportDialog from './ReportDialog.vue'
+import { provideText, uid } from './context'
+import { provideDiscussion } from './discussion-context'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  articleId?: string
+  /** The host's relative base (default `${siteBase}/api/community`). */
+  apiBase?: string
+  /** The path the site is served under (`/blog` on a managed blog): its proxy and its pages, as the defaults. */
+  siteBase?: string
+  lang?: string
+  /** The site's sign-in page; the current path goes in its fragment. */
+  signInHref?: string
+  /** JSON (or an object): `statementPath`, `myCommunityPath`, `rulesPath`, `reportPath`, `noticesPath`. */
+  routes?: string | Record<string, unknown>
+  /** Head poll interval in ms (default 20 000; 0 = off). */
+  pollMs?: number
+  /** A replacement transport (a property, never an attribute): tests, a signing transport later. */
+  transport?: CommunityTransport
+  /**
+   * M2: live updates — the host's session factory (`createRealtimeSession` of `@blogmcp/sdk/community/realtime`), a
+   * property, never an attribute. Absent: the head poll.
+   */
+  realtime?: DiscussionRealtime
+}>()
+
+const host = useHost()
+const lang = ref<Lang>(pickLang(props.lang, documentLang()))
+const { t, text } = provideText(lang)
+watch(
+  () => props.lang,
+  (v) => {
+    lang.value = pickLang(v, documentLang())
+  },
+)
+
+const headingId = uid('bcm-discussion')
+const heading = ref<HTMLElement | null>(null)
+const generation = ref(0)
+const current = shallowRef<DiscussionController | null>(null)
+const siteBase = computed(() => siteBaseFor(props.siteBase))
+
+function create(): DiscussionController | null {
+  const articleId = props.articleId?.trim()
+  if (!articleId) {
+    warnOnce('article-id', '[blogmcp-community] <blogmcp-discussion> needs an article-id')
+    return null
+  }
+  if (siteBase.value === null) return null
+  const client = communityClientFor(props.apiBase, props.transport, siteBase.value)
+  if (!client) return null
+  return createDiscussionController({
+    client,
+    articleId,
+    lang: lang.value,
+    pollMs: props.pollMs,
+    realtime: typeof props.realtime === 'function' ? props.realtime : null,
+    refusedAge: (host && refusedAges.get(host)) ?? null,
+    onAgeRefused: (minAge) => {
+      if (host) refusedAges.set(host, minAge)
+    },
+    onPosted: (state) => host?.dispatchEvent(new CustomEvent('bcm-posted', { detail: { state }, bubbles: true, composed: true })),
+  })
+}
+
+const opened = reactive(new Set<number>())
+const originals = reactive(new Set<number>())
+const allReplies = reactive(new Set<number>())
+const deleting = ref<number | null>(null)
+
+const parsedRoutes = computed(() => parseRoutes(props.routes))
+const routes = computed(() => routesWithDefaults(parsedRoutes.value, current.value?.state.me?.links, siteBase.value ?? ''))
+
+provideDiscussion({
+  get ctl() {
+    return current.value as DiscussionController
+  },
+  routes,
+  opened,
+  originals,
+  allReplies,
+  focusHeading: () => heading.value,
+  deleteMessage: (seq) => {
+    deleting.value = seq
+  },
+})
+
+let observer: IntersectionObserver | null = null
+const section = ref<HTMLElement | null>(null)
+/** The page's `#bcm-msg-<seq>` was looked for once this discussion's first page was in. */
+let anchored = false
+
+/**
+ * M2 T10: a link to one message (the notification centre's: `<article>#bcm-msg-<seq>`). The rows live in this shadow
+ * root, so the browser cannot scroll to the fragment: once the first page is in, the row is scrolled into view — a
+ * reply hidden behind „more replies" is shown first. A message beyond the first page is not looked for.
+ */
+async function scrollToAnchor(): Promise<void> {
+  if (anchored || typeof location === 'undefined') return
+  anchored = true
+  const seq = communityMessageSeqFromHash(location.hash)
+  const id = seq === null ? null : communityMessageAnchor(seq)
+  if (seq === null || id === null) return
+  const parent = state.value?.thread.messages.find((m) => m.replies.some((r) => r.seq === seq))
+  if (parent) allReplies.add(parent.seq)
+  await nextTick()
+  const row = section.value?.querySelector<HTMLElement>(`#${id}`)
+  if (typeof row?.scrollIntoView === 'function') row.scrollIntoView({ block: 'start' })
+}
+
+function start(): void {
+  anchored = false
+  current.value?.dispose()
+  opened.clear()
+  originals.clear()
+  allReplies.clear()
+  deleting.value = null
+  current.value = create()
+  generation.value += 1
+  void current.value?.start()
+}
+
+onMounted(() => {
+  start()
+  if (host && typeof IntersectionObserver !== 'undefined') {
+    observer = new IntersectionObserver((entries) => {
+      const e = entries[entries.length - 1]
+      if (e) current.value?.setInView(e.isIntersecting)
+    }, { rootMargin: '200px' })
+    observer.observe(host)
+  }
+})
+// Another article, base or language is another discussion (the language picks the translations and the posts' languageCode).
+watch(() => [props.articleId, props.apiBase, siteBase.value, props.transport, props.realtime, props.pollMs, lang.value] as const, () => start())
+onBeforeUnmount(() => {
+  observer?.disconnect()
+  current.value?.dispose()
+  current.value = null
+})
+
+const ctl = computed(() => current.value)
+const state = computed(() => current.value?.state ?? null)
+watch(
+  () => state.value?.phase,
+  (phase) => {
+    if (phase === 'ready') void scrollToAnchor()
+  },
+)
+const mode = computed(() => current.value?.mode() ?? 'pending')
+const composer = ref<InstanceType<typeof MessageComposer> | null>(null)
+// Joined: the reader goes on where the onboarding was, in the composer. A refusal closed: to the discussion's heading
+// (the onboarding's button the focus was on is gone).
+watch(mode, (now, before) => {
+  if (now === 'write' && before === 'onboarding') void nextTick(() => composer.value?.focus())
+  if (now === 'ageRefused' && before === 'onboarding') void nextTick(() => heading.value?.focus())
+})
+const needKey = computed(() => {
+  const n = current.value?.needs()
+  return n?.onboarding ? 'need.onboarding' : n?.rules ? 'need.reconsent_rules' : 'need.art9_consent'
+})
+
+function signInHref(): string | null {
+  return signInLink(props.signInHref, typeof location === 'undefined' ? null : location.pathname)
+}
+
+function sanctionText(r: DiscussionRestriction): string {
+  const date = r.endsAt ? formatDate(lang.value, r.endsAt) : ''
+  if (r.kind === 'ban') return t('sanction.ban')
+  if (r.kind === 'suspension') return date ? t('sanction.suspensionUntil', { date }) : t('sanction.suspension')
+  return date ? t('sanction.restrictionUntil', { date }) : t('sanction.restriction')
+}
+
+const loadFailure = computed(() => {
+  const f = state.value?.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+
+// One live region, present from the start; the same outcome twice is announced twice (cleared in between).
+const liveText = ref('')
+watch(
+  () => state.value?.announceId,
+  () => {
+    liveText.value = ''
+    const next = text(state.value?.announcement)
+    void nextTick(() => {
+      liveText.value = next
+    })
+  },
+)
+
+async function confirmDelete(): Promise<void> {
+  const seq = deleting.value
+  if (seq === null || !current.value) return
+  await current.value.remove(seq)
+  deleting.value = null
+}
+</script>
+
+<template>
+  <section v-if="ctl && state && state.phase !== 'hidden'" ref="section" :key="generation" class="bcm bcm-discussion" :lang="lang" :aria-labelledby="headingId">
+    <header class="bcm-head">
+      <h2 :id="headingId" ref="heading" tabindex="-1">{{ t('discussion.title') }}</h2>
+      <span v-if="state.phase === 'ready'" class="bcm-count">{{ t('discussion.count', { count: state.thread.count }) }}</span>
+    </header>
+
+    <p v-if="state.phase === 'loading'" class="bcm-muted" role="status">{{ t('discussion.loading') }}</p>
+
+    <div v-else-if="state.phase === 'failed'" class="bcm-banner" role="alert">
+      <span>{{ loadFailure }}</span>
+      <button type="button" class="bcm-btn" @click="ctl.refresh()">{{ t('common.retry') }}</button>
+    </div>
+
+    <template v-else>
+      <ReactionBar
+        :reaction-set="state.thread.reactionSet"
+        :summary="state.thread.articleReactions"
+        :interactive="ctl.canReact()"
+        :busy="!!state.busy['react:article']"
+        @react="(emoji: string) => ctl && ctl.react({ articleId: state!.thread.articleId ?? articleId ?? '' }, emoji)"
+      />
+
+      <div v-if="state.newMessages" class="bcm-banner" role="status">
+        <span>{{ t('discussion.newMessages') }}</span>
+        <button type="button" class="bcm-btn" :disabled="state.refreshing" @click="ctl.refresh()">{{ t('discussion.refresh') }}</button>
+      </div>
+
+      <p v-if="state.realtimeOff" class="bcm-hint" role="status">{{ t('realtime.off') }}</p>
+
+      <p v-if="state.thread.messages.length === 0" class="bcm-muted">{{ t('discussion.empty') }}</p>
+      <ol v-else class="bcm-thread">
+        <MessageItem v-for="m in state.thread.messages" :key="m.id" :message="m" />
+      </ol>
+
+      <div v-if="state.thread.nextCursor !== null" class="bcm-row">
+        <button type="button" class="bcm-btn" :disabled="state.loadingMore" @click="ctl.loadMore()">{{ t('discussion.loadMore') }}</button>
+      </div>
+
+      <div class="bcm-section">
+        <p v-if="mode === 'write' && state.art9RefusedNote" class="bcm-hint">{{ t('onboarding.art9RefusedDone') }}</p>
+        <MessageComposer
+          v-if="mode === 'write'"
+          ref="composer"
+          kind="new"
+          :draft="state.composer"
+          :wait="ctl.waitLeft(state.composer)"
+          :rules-href="routes.rulesPath"
+          :mentions-max="ctl.mentionCap()"
+          @submit="ctl.submit()"
+          @confirm="(code: string, checked: boolean) => ctl && ctl.setConfirmed(state!.composer, code, checked)"
+          @confirmed="ctl.sendConfirmed(state.composer)"
+        />
+        <div v-else-if="mode === 'signIn'" class="bcm-row">
+          <p>{{ t('discussion.signInPrompt') }}</p>
+          <a v-if="signInHref()" class="bcm-btn bcm-primary" :href="signInHref() ?? undefined">{{ t('common.signIn') }}</a>
+        </div>
+        <template v-else-if="mode === 'onboarding'">
+          <OnboardingSteps v-if="ctl.onboarding.value" :model="ctl.onboarding.value" :rules-href="routes.rulesPath" @cancel="ctl.cancelOnboarding()" />
+          <div v-else class="bcm-row">
+            <p>{{ t(needKey) }}</p>
+            <button type="button" class="bcm-btn bcm-primary" @click="ctl.beginOnboarding()">{{ t('onboarding.continue') }}</button>
+          </div>
+        </template>
+        <p v-else-if="mode === 'ageRefused'" class="bcm-note">{{ t('onboarding.ageBelow', { min: state.refusedAge ?? 18 }) }}</p>
+        <div v-else-if="mode === 'sanction'" class="bcm-section">
+          <p v-for="r in state.thread.viewer.restrictions" :key="r.decisionId" class="bcm-note">
+            {{ sanctionText(r) }}
+            <a v-if="statementPath(routes.statementPath, r.decisionId)" :href="statementPath(routes.statementPath, r.decisionId) ?? undefined">{{ t('sanction.statement') }}</a>
+          </p>
+        </div>
+        <p v-else-if="mode === 'notMoved'" class="bcm-note">{{ t('error.notMoved') }}</p>
+        <p v-else-if="mode === 'braked'" class="bcm-note" role="status">{{ t('state.braked') }}</p>
+        <p v-else-if="mode === 'restricted'" class="bcm-note">
+          {{ t('error.restricted') }}
+          <a :href="routes.myCommunityPath">{{ t('panel.title') }}</a>
+        </p>
+      </div>
+    </template>
+
+    <p class="bcm-sr" aria-live="polite">{{ liveText }}</p>
+
+    <ReportDialog
+      v-if="state.report"
+      :report="state.report"
+      :my-community-href="routes.myCommunityPath"
+      :rules-href="routes.rulesPath"
+      :fallback-focus="() => heading"
+      @submit="ctl.submitReport()"
+      @close="ctl.closeReport()"
+    />
+    <ConfirmDialog
+      v-if="deleting !== null"
+      title="discussion.deleteTitle"
+      explain="discussion.deleteExplain"
+      confirm="discussion.deleteConfirm"
+      danger
+      :busy="!!state.busy[`delete:${deleting}`]"
+      :fallback-focus="() => heading"
+      @confirm="confirmDelete()"
+      @cancel="deleting = null"
+    />
+  </section>
+</template>

package/src/ui/LinkedText.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+/**
+ * A member's text, as text: runs of text nodes, the web addresses in it as links that went through sanitizeUrl
+ * (core/text.ts) — `rel="nofollow ugc noopener noreferrer"`, a new tab — and, with `profilePath` (M2), each `@handle`
+ * as a link to that member's profile page on this site. Never HTML.
+ */
+import { computed } from 'vue'
+import { profilePath as profilePathOf } from '@blogmcp/sdk/community'
+import { linkifyWithMentions, UGC_LINK_REL } from '../core/text'
+
+const props = defineProps<{ text: string | null; profilePath?: string | null }>()
+const segments = computed(() => {
+  const template = props.profilePath
+  return linkifyWithMentions(props.text ?? '', template ? (handle: string) => profilePathOf(template, handle) : null)
+})
+</script>
+
+<template>
+  <template v-for="(s, i) in segments" :key="i">
+    <a v-if="s.kind === 'link'" :href="s.href" :rel="UGC_LINK_REL" target="_blank">{{ s.text }}</a>
+    <a v-else-if="s.kind === 'mention'" class="bcm-mention" :href="s.href">{{ s.text }}</a>
+    <template v-else>{{ s.text }}</template>
+  </template>
+</template>

package/src/ui/MemberSettingsView.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+/**
+ * `<blogmcp-member-settings>`: the member's notification settings (m2-contracts.md §3.3, §3.4, §3.10) — the six
+ * switches saved one by one, this browser's push (only while the module offers it: „Zapnout upozornění" on the
+ * member's click, „Vypnout", the sentence about what a notification carries, „Otevřít v prohlížeči" in Facebook's or
+ * Instagram's in-app browser, the install guide on iOS outside the home screen), and the digest's one-click
+ * unsubscribe when the e-mail's link (`#u=`) brought the member here — which works without a session too.
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useHost, watch } from 'vue'
+import { signInLink, type CommunityMessageKey, type CommunityTransport } from '@blogmcp/sdk/community'
+import { isSitePath } from '../core/attrs'
+import { communityClientFor, siteBaseFor, warnOnce } from '../core/client'
+import { digestTokenForElement } from '../core/digest-token'
+import { documentLang, pickLang, type Lang } from '../core/i18n'
+import { failureText } from '../core/outcomes'
+import { createMemberSettings, SETTING_KEYS, type MemberSettingsController, type SettingKey } from '../core/settings'
+import { provideText, uid } from './context'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  apiBase?: string
+  siteBase?: string
+  lang?: string
+  /** The host's service worker script (default `<site-base>/sw.js`): served from @blogmcp/sdk/community/sw. */
+  swPath?: string
+  routes?: string | Record<string, unknown>
+  signInHref?: string
+  transport?: CommunityTransport
+}>()
+
+const lang = ref<Lang>(pickLang(props.lang, documentLang()))
+const { t, text } = provideText(lang)
+const id = uid('bcm-settings')
+const host = useHost()
+
+const siteBase = siteBaseFor(props.siteBase)
+const client = siteBase === null ? null : communityClientFor(props.apiBase, props.transport, siteBase)
+
+function swPathOf(value: string | undefined): string | null {
+  if (value === undefined || value === '') return `${siteBase ?? ''}/sw.js`
+  if (isSitePath(value)) return value
+  warnOnce('sw-path', '[blogmcp-community] sw-path must be a path on this site (e.g. "/blog/sw.js"): the service worker is the site’s own')
+  return null
+}
+// The digest's token is read and cleared from the address first, whatever follows: a misconfigured element (no
+// client, a refused sw-path) renders nothing, but never leaves the member's capability in the URL or its history.
+const digestToken = digestTokenForElement(host)
+const swPath = swPathOf(props.swPath)
+const ctl: MemberSettingsController | null = client && swPath ? createMemberSettings({ client, swPath, digestToken }) : null
+const state = ctl?.state ?? null
+
+onMounted(() => void ctl?.load())
+onBeforeUnmount(() => ctl?.dispose())
+
+const LABELS: Readonly<Record<SettingKey, CommunityMessageKey>> = Object.freeze({
+  notifyReply: 'settings.notifyReply',
+  notifyMention: 'settings.notifyMention',
+  notifyTopic: 'settings.notifyTopic',
+  pushEnabled: 'settings.pushEnabled',
+  digestEmail: 'settings.digestEmail',
+  quietHours: 'settings.quietHours',
+})
+
+const failure = computed(() => {
+  const f = state?.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+const pushFailure = computed(() => {
+  const f = state?.push.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+const digestFailure = computed(() => {
+  const f = state?.digest.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+const pageUrl = computed(() => (typeof location === 'undefined' ? '' : location.href))
+
+function signInHref(): string | null {
+  return signInLink(props.signInHref, typeof location === 'undefined' ? null : location.pathname)
+}
+
+function onSwitch(key: SettingKey, e: Event): void {
+  void ctl?.toggle(key, (e.target as HTMLInputElement).checked)
+}
+
+const liveText = ref('')
+watch(
+  () => state?.announceId,
+  () => {
+    liveText.value = ''
+    const next = text(state?.announcement)
+    void nextTick(() => {
+      liveText.value = next
+    })
+  },
+)
+</script>
+
+<template>
+  <section v-if="ctl && state" class="bcm bcm-settings" :lang="lang" :aria-labelledby="`${id}-title`">
+    <h2 :id="`${id}-title`">{{ t('settings.title') }}</h2>
+
+    <!-- the digest's unsubscribe link: offered whoever is signed in (the link is the authorisation) -->
+    <section v-if="state.digest.offered" class="bcm-card" :aria-labelledby="`${id}-digest`">
+      <h3 :id="`${id}-digest`">{{ t('settings.digestEmail') }}</h3>
+      <p v-if="state.digest.outcome === 'unsubscribed'" role="status">{{ t('settings.digest.unsubscribed') }}</p>
+      <p v-else-if="state.digest.outcome === 'staleLink'" class="bcm-note" role="alert">{{ t('settings.digest.staleLink') }}</p>
+      <template v-else>
+        <p>{{ t('settings.digest.prompt') }}</p>
+        <p v-if="digestFailure" class="bcm-error" role="alert">{{ digestFailure }}</p>
+        <div class="bcm-row">
+          <button type="button" class="bcm-btn bcm-primary" :disabled="state.digest.sending" @click="ctl.unsubscribeDigest()">{{ t('settings.digest.confirm') }}</button>
+        </div>
+      </template>
+    </section>
+
+    <p v-if="state.phase === 'loading' || state.phase === 'idle'" class="bcm-muted" role="status">{{ t('common.loading') }}</p>
+    <div v-else-if="state.phase === 'signIn'" class="bcm-row">
+      <p>{{ t('settings.signIn') }}</p>
+      <a v-if="signInHref()" class="bcm-btn bcm-primary" :href="signInHref() ?? undefined">{{ t('common.signIn') }}</a>
+    </div>
+    <div v-else-if="state.phase === 'failed'" class="bcm-banner" role="alert">
+      <span>{{ failure }}</span>
+      <button type="button" class="bcm-btn" @click="ctl.load()">{{ t('common.retry') }}</button>
+    </div>
+    <template v-else-if="state.settings">
+      <ul class="bcm-switches">
+        <li v-for="key in SETTING_KEYS" :key="key">
+          <label class="bcm-check">
+            <input type="checkbox" :name="key" :checked="state.settings[key]" :disabled="!!state.saving[key]" @change="onSwitch(key, $event)" />
+            <span>{{ t(LABELS[key]) }}</span>
+          </label>
+        </li>
+      </ul>
+
+      <!-- this browser's push -->
+      <section v-if="ctl.pushShown()" class="bcm-card" :aria-labelledby="`${id}-push`">
+        <h3 :id="`${id}-push`">{{ t('settings.pushEnabled') }}</h3>
+        <p class="bcm-hint">{{ t('settings.push.carries') }}</p>
+        <template v-if="state.push.support === 'inApp'">
+          <p>{{ t('settings.push.inAppExplain') }}</p>
+          <p><a :href="pageUrl" target="_blank" rel="noopener">{{ t('settings.push.openInBrowser') }}</a></p>
+          <p class="bcm-url">{{ pageUrl }}</p>
+        </template>
+        <p v-else-if="state.push.support === 'iosInstall'">{{ t('settings.push.iosGuide') }}</p>
+        <p v-else-if="state.push.support === 'unsupported'">{{ t('settings.push.unsupported') }}</p>
+        <template v-else>
+          <p v-if="state.push.note === 'reset'" class="bcm-note">{{ t('settings.push.reset') }}</p>
+          <p v-else-if="state.push.note === 'denied'" class="bcm-note" role="alert">{{ t('settings.push.denied') }}</p>
+          <p v-else-if="state.push.note === 'refused'" class="bcm-note" role="alert">{{ t('settings.push.refused') }}</p>
+          <p v-if="pushFailure && state.push.note === null" class="bcm-error" role="alert">{{ pushFailure }}</p>
+          <div class="bcm-row">
+            <button v-if="state.push.status === 'on'" type="button" class="bcm-btn" @click="ctl.disablePush()">{{ t('settings.push.disable') }}</button>
+            <button
+              v-else
+              type="button"
+              class="bcm-btn bcm-primary"
+              :disabled="state.push.status === 'busy' || state.push.status === 'checking'"
+              @click="ctl.enablePush()"
+            >{{ t('settings.push.enable') }}</button>
+          </div>
+        </template>
+      </section>
+    </template>
+
+    <p class="bcm-sr" aria-live="polite">{{ liveText }}</p>
+  </section>
+</template>