letagents 0.12.34 → 0.12.36

package/shared/ui/GitHubEventCard.vue

@@ -0,0 +1,229 @@
+<template>
+  <article class="github-event-card" :class="{ 'is-preview': compact, 'is-room-event': room, 'is-activity': room && !['pull-request', 'issue'].includes(event.kind) }" :data-tone="event.tone" :data-kind="event.kind" :data-status="event.statusLabel">
+    <div class="github-event-header">
+      <svg class="github-event-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <template v-if="event.kind === 'pull-request'">
+          <circle cx="4" cy="3" r="1.5" /><circle cx="4" cy="13" r="1.5" /><circle cx="12" cy="13" r="1.5" />
+          <path d="M4 4.5v7M12 11.5V6a3 3 0 0 0-3-3H8m2-2L8 3l2 2" />
+        </template>
+        <template v-else-if="event.kind === 'issue'">
+          <circle cx="8" cy="8" r="5.5" /><path d="M8 5v3M8 11h.01" />
+        </template>
+        <template v-else-if="event.kind === 'review' || event.kind === 'comment'">
+          <path d="M3 3h10v8H8l-3 2v-2H3z" />
+          <path v-if="event.kind === 'review'" d="m5.5 7 1.5 1.5 3.5-3" />
+          <path v-else d="M5.5 6h5M5.5 8h3" />
+        </template>
+        <template v-else-if="event.kind === 'check'">
+          <rect x="2.5" y="2.5" width="11" height="11" rx="3" />
+          <path v-if="/^(success|passed)$/i.test(event.statusLabel || '')" d="m5 8 2 2 4-4" />
+          <path v-else-if="event.tone === 'rose'" d="m5.5 5.5 5 5m0-5-5 5" />
+          <path v-else d="M8 5v3l2 1" />
+        </template>
+        <path v-else-if="event.kind === 'repository'" d="M2.5 4h4l1.5 2h5.5v6.5h-11z" />
+        <template v-else><circle cx="8" cy="8" r="5.5" /><path d="M8 5v3M8 11h.01" /></template>
+      </svg>
+      <p v-if="room" class="github-event-title">{{ title }}</p>
+      <span v-else class="github-event-kind">{{ event.kindLabel }}</span>
+      <span v-if="event.statusLabel" class="github-event-status">{{ statusLabel }}</span>
+    </div>
+
+    <div v-if="!room || description" class="github-event-content">
+      <p v-if="!room" class="github-event-title">{{ title }}</p>
+      <p v-if="description" class="github-event-description">{{ description }}</p>
+    </div>
+
+    <div v-if="event.repository || event.taskId" class="github-event-context">
+      <span v-if="event.repository" class="github-event-repository">{{ event.repository }}</span>
+      <span v-if="event.repository && event.taskId" class="github-event-separator" aria-hidden="true">·</span>
+      <button
+        v-if="event.taskId && taskLinkEnabled"
+        type="button"
+        class="github-event-task"
+        :title="`Open ${event.taskId} on the Board`"
+        :data-task-reference-id="event.taskId"
+        @click="emit('openTask', event.taskId)"
+      >{{ event.taskId }}</button>
+      <span v-else-if="event.taskId" class="github-event-task">{{ event.taskId }}</span>
+    </div>
+
+    <div v-if="event.url" class="github-event-actions">
+      <slot name="actions" />
+      <a class="github-event-action" :href="event.url" target="_blank" rel="noopener noreferrer">
+        {{ event.urlLabel }}
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 11 11 5M5 5h6v6" /></svg>
+      </a>
+      <button v-if="showEventLink && !compact" type="button" class="github-event-action is-secondary" @click="emit('openEvent', event.url)">
+        View in Events
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 4 4 4-4 4" /></svg>
+      </button>
+    </div>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  event: {
+    kind: string;
+    tone: string;
+    kindLabel: string;
+    statusLabel: string | null;
+    headline: string;
+    detail: string | null;
+    repository: string | null;
+    taskId: string | null;
+    url: string | null;
+    urlLabel: string;
+  };
+  compact?: boolean;
+  room?: boolean;
+  taskLinkEnabled?: boolean;
+  showEventLink?: boolean;
+}>();
+
+const emit = defineEmits<{
+  openTask: [taskId: string];
+  openEvent: [url: string];
+}>();
+
+// PR/issue details carry the artifact title; other events carry supporting text.
+const titleFirst = computed(() => Boolean(props.event.detail) && ['pull-request', 'issue'].includes(props.event.kind));
+const title = computed(() => titleFirst.value ? props.event.detail : props.event.headline);
+const description = computed(() => titleFirst.value ? props.event.headline : props.event.detail);
+const statusLabel = computed(() => {
+  const label = props.event.statusLabel || '';
+  return label.charAt(0).toUpperCase() + label.slice(1);
+});
+</script>
+
+<style scoped>
+.github-event-card {
+  --event-accent: var(--text-secondary);
+  display: grid;
+  gap: 10px;
+  width: 100%;
+  max-width: 560px;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 14px 16px 10px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-lg, 12px);
+  background: var(--bg-card);
+  color: var(--text);
+  font-family: var(--font-sans);
+}
+.github-event-card:not(.is-preview) { container-type: inline-size; }
+.github-event-card[data-tone="violet"] { --event-accent: var(--task-assigned); }
+.github-event-card[data-tone="emerald"] { --event-accent: var(--green-text); }
+.github-event-card[data-tone="rose"] { --event-accent: var(--red-text); }
+.github-event-card[data-tone="amber"] { --event-accent: var(--amber-text); }
+.github-event-card[data-tone="sky"] { --event-accent: var(--blue-text); }
+.github-event-header { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.github-event-icon { width: 16px; height: 16px; flex: none; color: var(--event-accent); }
+.github-event-kind { color: var(--text-secondary); font-size: 12px; font-weight: 500; line-height: 1.5; }
+.github-event-status {
+  margin-left: auto;
+  padding: 2px 7px;
+  border-radius: 5px;
+  background: color-mix(in srgb, var(--event-accent) 10%, transparent);
+  color: var(--text);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+.github-event-content { display: grid; gap: 4px; min-width: 0; }
+.github-event-title { margin: 0; color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
+.github-event-description { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
+.github-event-context { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.5; }
+.github-event-repository { overflow-wrap: anywhere; }
+.github-event-task { display: inline-flex; align-items: center; min-height: 24px; padding: 0 4px; border: 0; border-radius: 4px; background: transparent; color: var(--text-secondary); font: inherit; font-family: var(--font-mono); }
+button.github-event-task { cursor: pointer; }
+.github-event-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
+.github-event-action,
+.github-event-actions :deep(.pull-request-changes-button) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  min-height: 32px;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: 5px 9px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-secondary);
+  font: 500 12px/1.5 var(--font-sans);
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 120ms ease, color 120ms ease;
+}
+.github-event-action:first-child,
+.github-event-actions :deep(.pull-request-changes-button) { border-color: var(--border); background: var(--accent-dim); color: var(--text); }
+@container (min-width: 420px) {
+  .github-event-action.is-secondary { margin-left: auto; }
+}
+.github-event-action svg { width: 14px; height: 14px; flex: none; }
+@media (hover: hover) and (pointer: fine) {
+  .github-event-action:hover,
+  .github-event-actions :deep(.pull-request-changes-button:hover),
+  button.github-event-task:hover { background: var(--accent-hover); color: var(--text); text-decoration: none; }
+}
+.github-event-action:active,
+.github-event-actions :deep(.pull-request-changes-button:active),
+button.github-event-task:active { background: var(--accent-active); color: var(--text); transition: none; }
+.github-event-action:focus-visible,
+.github-event-actions :deep(.pull-request-changes-button:focus-visible),
+button.github-event-task:focus-visible { outline: 2px solid var(--blue-text); outline-offset: 2px; }
+.github-event-card.is-preview { margin-top: 6px; gap: 8px; padding: 12px 14px 8px; }
+@media (pointer: coarse) {
+  .github-event-action,
+  .github-event-actions :deep(.pull-request-changes-button),
+  button.github-event-task { min-height: 44px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .github-event-action,
+  .github-event-actions :deep(.pull-request-changes-button) { transition: none; }
+}
+@media (prefers-contrast: more) {
+  .github-event-card { border-color: var(--text-secondary); }
+  .github-event-status { outline: 1px solid var(--event-accent); }
+}
+/* Room events share the conversation column, with flat, semantic borders. */
+.github-event-card.is-room-event {
+  max-width: 100%;
+  gap: 6px;
+  padding: 11px 14px 8px;
+  border-color: color-mix(in srgb, var(--event-accent) 45%, var(--border-strong));
+  border-radius: 9px;
+  background: color-mix(in srgb, var(--bg-card) 65%, var(--bg));
+  box-shadow: none;
+}
+.is-room-event .github-event-title { font-size: 13px; font-weight: 550; }
+.is-room-event .github-event-description { font-size: 11px; }
+.is-room-event .github-event-actions { border: 0; padding-top: 0; gap: 8px; }
+.is-room-event .github-event-action,
+.is-room-event .github-event-actions :deep(.pull-request-changes-button) {
+  min-height: 26px; padding: 3px 0; border: 0; background: transparent; font-size: 11px;
+}
+.is-activity { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
+.is-activity .github-event-header { flex: 1 1 220px; }
+.is-activity .github-event-kind { display: none; }
+.is-activity .github-event-status { margin-left: 0; }
+.is-activity .github-event-content { display: none; }
+.is-activity .github-event-title { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
+.is-activity .github-event-description, .is-activity .github-event-repository, .is-activity .github-event-separator { display: none; }
+.is-activity .github-event-context,
+.is-activity .github-event-actions { grid-column: 1 / -1; }
+@media (pointer: coarse) {
+  .is-room-event .github-event-action,
+  .is-room-event .github-event-actions :deep(.pull-request-changes-button) { min-height: 44px; }
+}
+@media (prefers-contrast: more) {
+  .github-event-card.is-room-event { border-color: var(--event-accent); }
+}
+</style>

package/shared/ui/MessageReactionBar.vue

@@ -0,0 +1,65 @@
+<template>
+  <div v-if="reactions.length" class="message-reactions" role="group" aria-label="Reactions">
+    <component
+      :is="canReact ? 'button' : 'span'"
+      v-for="reaction in reactions"
+      :key="reaction.emoji"
+      class="message-reaction"
+      :type="canReact ? 'button' : undefined"
+      :role="canReact ? undefined : 'img'"
+      :aria-pressed="canReact ? viewerReacted(reaction.emoji) : undefined"
+      :aria-label="label(reaction)"
+      :title="label(reaction)"
+      @click="canReact && emit('toggle', reaction.emoji)"
+    >
+      <span class="message-reaction-emoji" aria-hidden="true">{{ reaction.emoji }}</span>
+      <span class="message-reaction-count" aria-hidden="true">{{ reaction.count }}</span>
+    </component>
+    <button
+      v-if="canReact"
+      class="message-reaction message-reaction-add"
+      type="button"
+      aria-label="Add reaction"
+      title="Add reaction"
+      aria-haspopup="dialog"
+      :aria-expanded="pickerOpen ?? false"
+      @click="emit('add', $event)"
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M22 11v1a10 10 0 1 1-9-10" />
+        <path d="M8 14s1.5 2 4 2 4-2 4-2" />
+        <path d="M9 9h.01M15 9h.01" />
+        <path d="M16 5h6M19 2v6" />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { describeMessageReaction, type MessageReaction } from "../message-reactions.mjs";
+
+const props = defineProps<{
+  reactions: readonly MessageReaction[];
+  viewerLogin: string | null;
+  /** Whether the viewer reacted with this emoji, including when they are past the listed reactors. */
+  viewerReacted: (emoji: string) => boolean;
+  canReact: boolean;
+  pickerOpen?: boolean;
+}>();
+
+const emit = defineEmits<{
+  toggle: [emoji: string];
+  /** The click that asked for the picker; its target is the anchor. */
+  add: [event: MouseEvent];
+}>();
+
+function label(reaction: MessageReaction): string {
+  const description = describeMessageReaction(reaction, props.viewerLogin);
+  // The list may not name the viewer when many people reacted.
+  return props.viewerReacted(reaction.emoji) && !description.startsWith("You")
+    ? `You and others reacted with ${reaction.emoji}`
+    : description;
+}
+</script>
+
+<style src="./message-reactions.css"></style>

package/shared/ui/MessageReactionPicker.vue

@@ -0,0 +1,291 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="anchor"
+      ref="panel"
+      class="message-reaction-picker"
+      role="dialog"
+      aria-label="Add a reaction"
+      :style="{ left: `${position.left}px`, top: `${position.top}px` }"
+      :data-side="position.side"
+      :data-align="position.align"
+      :data-placed="placed"
+      :data-instant="instant"
+      @keydown="handleKeydown"
+      @focusout="handleFocusOut"
+      @pointerdown.stop
+      @contextmenu.stop
+    >
+      <div class="message-reaction-picker-grid" role="group" aria-label="Common reactions">
+        <button
+          v-for="(emoji, index) in MESSAGE_REACTION_QUICK_EMOJI"
+          :key="emoji"
+          class="message-reaction-picker-emoji"
+          type="button"
+          :tabindex="index === activeIndex ? 0 : -1"
+          :aria-pressed="viewerReacted(emoji)"
+          @click="choose(emoji)"
+          @focus="activeIndex = index"
+        >
+          {{ emoji }}
+        </button>
+      </div>
+      <form class="message-reaction-picker-custom" novalidate @submit.prevent="chooseCustom">
+        <input
+          ref="customInput"
+          v-model="custom"
+          class="message-reaction-picker-input"
+          type="text"
+          autocomplete="off"
+          autocapitalize="off"
+          spellcheck="false"
+          maxlength="32"
+          placeholder="Or type any emoji, then Enter"
+          aria-label="React with any emoji"
+          :aria-invalid="customInvalid"
+          :aria-describedby="customInvalid ? hintId : undefined"
+          @input="customInvalid = false"
+        />
+        <p v-if="customInvalid" :id="hintId" class="message-reaction-picker-hint" role="alert">
+          Enter one emoji.
+        </p>
+      </form>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, reactive, ref, useId, watch } from "vue";
+import { MESSAGE_REACTION_QUICK_EMOJI, normalizeMessageReactionEmoji } from "../message-reactions.mjs";
+
+export interface MessageReactionPickerAnchor {
+  element: HTMLElement;
+  /** Context-menu position, kept relative to the message as it scrolls. */
+  point?: { x: number; y: number };
+}
+
+const COLUMNS = 8;
+const GAP = 6;
+const MARGIN = 8;
+
+const props = defineProps<{
+  /** Live control or message anchoring the picker; null closes it. */
+  anchor: MessageReactionPickerAnchor | null;
+  viewerReacted: (emoji: string) => boolean;
+  /** Opened from the keyboard: appear without motion. */
+  instant?: boolean;
+}>();
+
+const emit = defineEmits<{
+  select: [emoji: string];
+  /**
+   * `restoreFocus` is true when the person dismissed it from the keyboard or
+   * chose an emoji. `pressed` is what a dismissing press landed on, so the
+   * host can tell a press on the control that opened the picker.
+   */
+  close: [restoreFocus: boolean, pressed?: EventTarget | null];
+}>();
+
+const panel = ref<HTMLElement | null>(null);
+const customInput = ref<HTMLInputElement | null>(null);
+const activeIndex = ref(0);
+const custom = ref("");
+const customInvalid = ref(false);
+const placed = ref(false);
+const position = reactive({ left: 0, top: 0, side: "above" as "above" | "below", align: "start" as "start" | "end" });
+const hintId = useId();
+let frame: number | null = null;
+let pointOffset: { x: number; y: number } | null = null;
+let focusOnPlacement = false;
+let scrollViewport: HTMLElement | null = null;
+
+function nearestScrollViewport(element: HTMLElement): HTMLElement | null {
+  for (let parent = element.parentElement; parent; parent = parent.parentElement) {
+    if (/^(auto|scroll)$/.test(window.getComputedStyle(parent).overflowY)) return parent;
+  }
+  return null;
+}
+
+function place(): void {
+  const element = panel.value;
+  const source = props.anchor;
+  if (!element || !source) return;
+  if (!source.element.isConnected) {
+    dismiss();
+    return;
+  }
+  // All geometry is read in this animation frame, before reactive style writes.
+  const rect = source.element.getBoundingClientRect();
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  const clip = scrollViewport?.getBoundingClientRect();
+  const visible = {
+    left: Math.max(0, clip?.left ?? 0),
+    right: Math.min(viewportWidth, clip?.right ?? viewportWidth),
+    top: Math.max(0, clip?.top ?? 0),
+    bottom: Math.min(viewportHeight, clip?.bottom ?? viewportHeight),
+  };
+  if (source.point && !pointOffset) {
+    pointOffset = { x: source.point.x - rect.left, y: source.point.y - rect.top };
+  }
+  const anchor = pointOffset
+    ? { left: rect.left + pointOffset.x, right: rect.left + pointOffset.x,
+        top: rect.top + pointOffset.y, bottom: rect.top + pointOffset.y }
+    : rect;
+  // A context menu follows its click point, even when the rest of a tall
+  // message is still visible. Controls stay anchored while partially visible.
+  if (anchor.bottom <= visible.top || anchor.top >= visible.bottom
+    || anchor.right <= visible.left || anchor.left >= visible.right
+    || visible.bottom <= visible.top || visible.right <= visible.left) {
+    dismiss();
+    return;
+  }
+  const { width, height } = element.getBoundingClientRect();
+  const fitsAbove = anchor.top - GAP - height >= MARGIN;
+  const fitsBelow = anchor.bottom + GAP + height <= viewportHeight - MARGIN;
+  position.side = fitsAbove || !fitsBelow ? "above" : "below";
+  const top = position.side === "above" ? anchor.top - GAP - height : anchor.bottom + GAP;
+  // Grow away from whichever edge of the window the control is nearer to.
+  position.align = (anchor.left + anchor.right) / 2 > viewportWidth / 2 ? "end" : "start";
+  const left = position.align === "end" ? anchor.right - width : anchor.left;
+  position.left = Math.round(Math.min(Math.max(left, MARGIN), Math.max(MARGIN, viewportWidth - width - MARGIN)));
+  position.top = Math.round(Math.min(Math.max(top, MARGIN), Math.max(MARGIN, viewportHeight - height - MARGIN)));
+  placed.value = true;
+}
+
+function schedulePlace(): void {
+  if (frame !== null || !listening) return;
+  frame = window.requestAnimationFrame(() => {
+    frame = null;
+    place();
+    if (focusOnPlacement && placed.value) {
+      focusOnPlacement = false;
+      // Position must be rendered before the initially hidden picker can focus.
+      void nextTick(() => { if (listening && props.anchor) focusEmoji(0); });
+    }
+  });
+}
+
+function focusEmoji(index: number): void {
+  const count = MESSAGE_REACTION_QUICK_EMOJI.length;
+  activeIndex.value = Math.min(Math.max(index, 0), count - 1);
+  panel.value?.querySelectorAll<HTMLButtonElement>(".message-reaction-picker-emoji")[activeIndex.value]?.focus();
+}
+
+function choose(emoji: string): void {
+  emit("select", emoji);
+  emit("close", true);
+}
+
+function chooseCustom(): void {
+  const emoji = normalizeMessageReactionEmoji(custom.value);
+  if (!emoji) {
+    customInvalid.value = true;
+    return;
+  }
+  choose(emoji);
+}
+
+function handleKeydown(event: KeyboardEvent): void {
+  if (event.key === "Escape") {
+    event.preventDefault();
+    event.stopPropagation();
+    emit("close", true);
+    return;
+  }
+  const inInput = event.target === customInput.value;
+  // There are two tab stops: the active emoji and the custom input. Exiting
+  // either end returns to the opener instead of losing focus in the teleport.
+  if (event.key === "Tab" && (event.shiftKey ? !inInput : inInput)) {
+    event.preventDefault();
+    event.stopPropagation();
+    emit("close", true);
+    return;
+  }
+  if (inInput) {
+    // Leave the caret keys to the text field, except the way back up to the grid.
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      focusEmoji(activeIndex.value);
+    }
+    return;
+  }
+  const index = activeIndex.value;
+  const last = MESSAGE_REACTION_QUICK_EMOJI.length - 1;
+  const moves: Record<string, number | "input"> = {
+    ArrowRight: Math.min(index + 1, last),
+    ArrowLeft: Math.max(index - 1, 0),
+    ArrowUp: index - COLUMNS >= 0 ? index - COLUMNS : index,
+    ArrowDown: index + COLUMNS <= last ? index + COLUMNS : "input",
+    Home: 0,
+    End: last,
+  };
+  const move = moves[event.key];
+  if (move === undefined) return;
+  event.preventDefault();
+  if (move === "input") customInput.value?.focus();
+  else focusEmoji(move);
+}
+
+function handleFocusOut(event: FocusEvent): void {
+  // Focus left the picker for something else in the app: it is done.
+  const next = event.relatedTarget;
+  if (next instanceof Node && !panel.value?.contains(next)) emit("close", false);
+}
+
+function dismiss(): void {
+  emit("close", false);
+}
+
+// These listen in the capture phase, so they also see events from inside the picker.
+function dismissUnlessInside(event: Event): void {
+  if (event.target instanceof Node && panel.value?.contains(event.target)) return;
+  emit("close", false, event.type === "pointerdown" ? event.target : null);
+}
+
+let listening = false;
+function listen(on: boolean): void {
+  if (on === listening) return;
+  listening = on;
+  if (on) {
+    window.addEventListener("pointerdown", dismissUnlessInside, true);
+    window.addEventListener("scroll", schedulePlace, true);
+    window.addEventListener("resize", schedulePlace);
+    window.addEventListener("blur", dismiss);
+  } else {
+    window.removeEventListener("pointerdown", dismissUnlessInside, true);
+    window.removeEventListener("scroll", schedulePlace, true);
+    window.removeEventListener("resize", schedulePlace);
+    window.removeEventListener("blur", dismiss);
+    if (frame !== null) window.cancelAnimationFrame(frame);
+    frame = null;
+    focusOnPlacement = false;
+    scrollViewport = null;
+  }
+}
+
+watch(
+  () => props.anchor,
+  async (anchor, previous) => {
+    if (anchor && !previous) {
+      placed.value = false;
+      custom.value = "";
+      customInvalid.value = false;
+      activeIndex.value = 0;
+      pointOffset = null;
+      scrollViewport = nearestScrollViewport(anchor.element);
+      focusOnPlacement = true;
+      listen(true);
+      await nextTick();
+      schedulePlace();
+    } else if (!anchor && previous) {
+      listen(false);
+    }
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => listen(false));
+</script>
+
+<style src="./message-reactions.css"></style>