letagents 0.12.34 → 0.12.35

package/shared/ui/message-reactions.css

@@ -0,0 +1,254 @@
+/* Emoji reactions under a message, and the picker that adds one. Shared by the
+   desktop and web apps; every colour comes from tokens both apps define. */
+
+.message-reactions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  margin-top: 6px;
+}
+
+.message-reaction {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  box-sizing: border-box;
+  height: 24px;
+  min-height: 0;
+  margin: 0;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--bg-subtle);
+  color: var(--text-secondary);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  white-space: nowrap;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+button.message-reaction {
+  appearance: none;
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    color 120ms ease,
+    transform 120ms var(--ease-out, ease-out);
+}
+
+button.message-reaction:active {
+  transform: scale(0.96);
+}
+
+button.message-reaction:focus-visible {
+  outline: 2px solid var(--blue);
+  outline-offset: 1px;
+}
+
+.message-reaction[aria-pressed="true"] {
+  border-color: color-mix(in srgb, var(--blue) 55%, transparent);
+  background: color-mix(in srgb, var(--blue) 14%, transparent);
+  color: var(--text);
+}
+
+.message-reaction-emoji {
+  font-size: 14px;
+  /* Emoji glyphs sit low in most system fonts; this centres them on the count. */
+  line-height: 1;
+  transform: translateY(-0.5px);
+}
+
+.message-reaction-count {
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+}
+
+.message-reaction-add {
+  padding: 0 7px;
+  color: var(--text-tertiary);
+}
+
+.message-reaction-add svg {
+  display: block;
+  width: 14px;
+  height: 14px;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  button.message-reaction:hover {
+    border-color: var(--border-strong);
+    color: var(--text);
+  }
+
+  button.message-reaction[aria-pressed="true"]:hover {
+    border-color: color-mix(in srgb, var(--blue) 75%, transparent);
+    background: color-mix(in srgb, var(--blue) 20%, transparent);
+  }
+}
+
+@media (pointer: coarse) {
+  .message-reaction {
+    height: 32px;
+    padding: 0 11px;
+  }
+}
+
+.message-reaction-picker {
+  position: fixed;
+  z-index: 1000;
+  box-sizing: border-box;
+  width: 284px;
+  max-width: calc(100vw - 16px);
+  padding: 8px;
+  border: 1px solid var(--border-strong);
+  border-radius: 12px;
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow-lg);
+  color: var(--text);
+  font-family: var(--font-sans, inherit);
+  opacity: 1;
+  transform: scale(1);
+  transition:
+    opacity 140ms var(--ease-out, ease-out),
+    transform 140ms var(--ease-out, ease-out);
+}
+
+/* The picker grows out of the control that opened it. */
+.message-reaction-picker[data-side="above"][data-align="start"] { transform-origin: bottom left; }
+.message-reaction-picker[data-side="above"][data-align="end"] { transform-origin: bottom right; }
+.message-reaction-picker[data-side="below"][data-align="start"] { transform-origin: top left; }
+.message-reaction-picker[data-side="below"][data-align="end"] { transform-origin: top right; }
+
+@starting-style {
+  .message-reaction-picker {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+/* Opened from the keyboard, or not yet measured: no motion. */
+.message-reaction-picker[data-instant="true"],
+.message-reaction-picker[data-placed="false"] {
+  transition: none;
+}
+
+.message-reaction-picker[data-placed="false"] {
+  visibility: hidden;
+}
+
+.message-reaction-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 2px;
+}
+
+.message-reaction-picker-emoji {
+  appearance: none;
+  display: grid;
+  place-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 0;
+  aspect-ratio: 1;
+  margin: 0;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  font: inherit;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color 100ms ease, transform 120ms var(--ease-out, ease-out);
+}
+
+.message-reaction-picker-emoji:active {
+  transform: scale(0.92);
+}
+
+.message-reaction-picker-emoji:focus-visible {
+  outline: 2px solid var(--blue);
+  outline-offset: -2px;
+}
+
+.message-reaction-picker-emoji[aria-pressed="true"] {
+  border-color: color-mix(in srgb, var(--blue) 55%, transparent);
+  background: color-mix(in srgb, var(--blue) 14%, transparent);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .message-reaction-picker-emoji:hover {
+    background: var(--bg-subtle);
+  }
+}
+
+.message-reaction-picker-custom {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+}
+
+.message-reaction-picker-input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 0;
+  height: 30px;
+  margin: 0;
+  padding: 0 9px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--text);
+  font: inherit;
+  font-size: 13px;
+}
+
+.message-reaction-picker-input::placeholder {
+  color: var(--text-tertiary);
+}
+
+.message-reaction-picker-input:focus-visible {
+  border-color: var(--blue);
+  outline: 0;
+}
+
+.message-reaction-picker-input[aria-invalid="true"] {
+  border-color: var(--red-text);
+}
+
+.message-reaction-picker-hint {
+  margin: 0;
+  color: var(--red-text);
+  font-size: 12px;
+  line-height: 1.3;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  button.message-reaction,
+  .message-reaction-picker-emoji {
+    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
+  }
+
+  button.message-reaction:active,
+  .message-reaction-picker-emoji:active {
+    transform: none;
+  }
+
+  .message-reaction-picker {
+    transition: opacity 140ms ease;
+    transform: none;
+  }
+
+  @starting-style {
+    .message-reaction-picker {
+      transform: none;
+    }
+  }
+}

package/shared/ui/message-search.css

@@ -0,0 +1,186 @@
+/* Matches from a room's earlier history, listed under the find control.
+   Shared by the desktop and web apps; colours come from tokens both define. */
+
+.history-search {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-height: 0;
+  color: var(--text);
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.history-search-note {
+  margin: 0;
+  padding: 2px 2px 4px;
+  color: var(--text-secondary);
+}
+
+.history-search-error {
+  color: var(--red-text);
+}
+
+.history-search-heading {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin: 0;
+  padding: 0 2px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.history-search-count {
+  color: var(--text-tertiary);
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+}
+
+.history-search-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.history-search-hit {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 4px 8px;
+  padding: 6px 8px;
+  border-radius: 8px;
+}
+
+.history-search-hit-toggle {
+  appearance: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.history-search-hit-meta {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+
+.history-search-hit-meta strong {
+  overflow: hidden;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.history-search-hit-meta time {
+  flex-shrink: 0;
+  color: var(--text-tertiary);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.history-search-hit-text {
+  display: -webkit-box;
+  overflow: hidden;
+  color: var(--text-secondary);
+  overflow-wrap: anywhere;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+
+.history-search-hit[data-expanded="true"] .history-search-hit-text {
+  display: block;
+  max-height: 40vh;
+  overflow-y: auto;
+  color: var(--text);
+  white-space: pre-wrap;
+}
+
+.history-search-hit-text mark {
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--amber) 32%, transparent);
+  color: inherit;
+}
+
+.history-search-hit-show,
+.history-search-more {
+  appearance: none;
+  min-height: 0;
+  margin: 0;
+  padding: 3px 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-secondary);
+  font: inherit;
+  font-size: 12px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: border-color 120ms ease, color 120ms ease, transform 120ms var(--ease-out, ease-out);
+}
+
+.history-search-more {
+  align-self: flex-start;
+  margin: 2px 8px 0;
+}
+
+.history-search-more:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.history-search-hit-show:active,
+.history-search-more:not(:disabled):active {
+  transform: scale(0.97);
+}
+
+.history-search-hit-toggle:focus-visible,
+.history-search-hit-show:focus-visible,
+.history-search-more:focus-visible {
+  outline: 2px solid var(--blue);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .history-search-hit:hover {
+    background: var(--bg-subtle);
+  }
+
+  .history-search-hit-show:hover,
+  .history-search-more:not(:disabled):hover {
+    border-color: var(--border-strong);
+    color: var(--text);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .history-search-hit-show,
+  .history-search-more {
+    transition: border-color 120ms ease, color 120ms ease;
+  }
+
+  .history-search-hit-show:active,
+  .history-search-more:not(:disabled):active {
+    transform: none;
+  }
+}

package/shared/ui/useComposerSlashCommands.ts

@@ -0,0 +1,92 @@
+import { computed, onScopeDispose, ref, watch, type Ref } from 'vue';
+import { completeSlashCommand, decideComposerSubmitAction, resolveSlashInput, type SlashCommand, type SlashPlatform } from '../slash-commands.mjs';
+
+/** One send gate for keyboard and button submission in both main composers. */
+export function useComposerSlashCommands(options: {
+  text: Ref<string>;
+  platform: SlashPlatform;
+  scope: () => string | null | undefined;
+  hasAttachments: () => boolean;
+  isReply: () => boolean;
+  run: (command: SlashCommand, argument: string) => boolean | Promise<boolean>;
+  focus: () => void;
+  onError: () => void;
+}) {
+  const dismissed = ref(false);
+  const activeIndex = ref(0);
+  const busy = ref(false);
+  let revision = 0;
+  onScopeDispose(() => { revision++; });
+  watch([() => options.text.value, options.scope, options.hasAttachments, options.isReply], () => {
+    revision++;
+    dismissed.value = false;
+    activeIndex.value = 0;
+  }, { flush: 'sync' });
+  const context = () => ({
+    text: options.text.value,
+    platform: options.platform,
+    hasAttachments: options.hasAttachments(),
+    isReply: options.isReply(),
+    menuDismissed: dismissed.value,
+    selectedCommandIndex: activeIndex.value,
+  });
+  const resolution = computed(() => resolveSlashInput(context()));
+  const commands = computed(() => {
+    const result = resolution.value;
+    return result.kind === 'none' ? [] : result.kind === 'menu' ? result.commands : [result.command];
+  });
+  const open = computed(() => commands.value.length > 0);
+  const hint = computed(() => resolution.value.kind === 'invalid' ? resolution.value.hint : '');
+  const candidates = computed(() => commands.value.map(command => ({
+    key: `slash-${command.name}`, label: command.usage, meta: command.description,
+  })));
+
+  function complete(index = activeIndex.value) {
+    const command = commands.value[index];
+    if (!command || busy.value) return;
+    // Tab/click complete only the name, retaining any argument already entered.
+    if (resolution.value.kind === 'menu' || !/\s/.test(options.text.value)) {
+      options.text.value = completeSlashCommand(command);
+    }
+    options.focus();
+  }
+
+  function handleKey(event: KeyboardEvent): boolean {
+    if (!open.value || event.isComposing) return false;
+    if (event.key === 'Escape') dismissed.value = true;
+    else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      activeIndex.value = (activeIndex.value + (event.key === 'ArrowDown' ? 1 : -1) + commands.value.length) % commands.value.length;
+    } else if (event.key === 'Tab') complete();
+    else return false;
+    event.preventDefault();
+    return true;
+  }
+
+  async function submit(sendMessage: () => unknown | Promise<unknown>) {
+    if (busy.value) return;
+    const decision = decideComposerSubmitAction(context());
+    if (decision.action === 'send_message') {
+      await sendMessage();
+      return;
+    }
+    if (decision.action === 'complete_command') {
+      options.text.value = decision.text;
+      options.focus();
+      return;
+    }
+    if (decision.action === 'show_hint') return;
+    const submittedRevision = revision;
+    busy.value = true;
+    try {
+      const succeeded = await options.run(decision.command, decision.argument);
+      // A late task response must not erase edits or another room's draft.
+      if (succeeded && revision === submittedRevision) options.text.value = '';
+    } catch {
+      options.onError();
+    } finally {
+      busy.value = false;
+    }
+  }
+
+  return { open, candidates, activeIndex, hint, busy, complete, handleKey, submit };
+}