@things-factory/ai-assistant 10.1.208 → 10.1.210

package/client/components/assistant-chat.ts

@@ -1,5 +1,8 @@
 import { replyDestination, quotedReply } from './reply-message.js'
-import { rosterInviteState, rosterName } from './roster-identity'
+import { rosterName } from './roster-identity'
+import { notify } from '@operato/layout'
+import './assistant-invite.js'
+import { TypingRoom } from '../utils/assistant-typing.js'
 /**
  * <ox-assistant-chat> — AI 도우미 채팅 컴포넌트 (Lit).
  *
@@ -336,6 +339,7 @@ const CHAT_MESSAGE_SUBSCRIPTION = gql`
 // C4 presence/roster — 세션 참여자 목록 + 마지막 접속(online 판정용).
 const CHAT_PARTICIPANTS_QUERY = gql`
   query ChatSessionParticipants($sessionId: String!) {
+    mayInviteToAISession(sessionId: $sessionId)
     chatSessionParticipants(sessionId: $sessionId) {
       id
       role
@@ -344,10 +348,38 @@ const CHAT_PARTICIPANTS_QUERY = gql`
         id
         name
         username
+        email
       }
     }
   }
 `
+/*
+ * A group conversation (ADR-0073 decision 3) - bringing someone in and sending them out, and the room's
+ * "typing" line. The doors decide who may; the roster only offers what the server said this person may do.
+ */
+const INVITE_MUTATION = gql`
+  mutation InviteToAISession($sessionId: String!, $userIds: [String!]!) {
+    inviteToAISession(sessionId: $sessionId, userIds: $userIds)
+  }
+`
+const REMOVE_MUTATION = gql`
+  mutation RemoveFromAISession($sessionId: String!, $userId: String!) {
+    removeFromAISession(sessionId: $sessionId, userId: $userId)
+  }
+`
+const SAY_TYPING_MUTATION = gql`
+  mutation SayTyping($sessionId: String!) {
+    sayTyping(sessionId: $sessionId)
+  }
+`
+const CHAT_TYPING_SUBSCRIPTION = gql`
+  subscription ChatTyping($sessionId: String!) {
+    chatTyping(sessionId: $sessionId) {
+      userId
+      name
+    }
+  }
+`
 const TOUCH_PRESENCE_MUTATION = gql`
   mutation TouchPresence($sessionId: String!) {
     touchPresence(sessionId: $sessionId)
@@ -365,6 +397,8 @@ export class OxAssistantChat extends LitElement {
   @property({ type: String, attribute: 'session-id' })
   sessionId?: string
   @property({ attribute: false }) prepareSession?: (adopt: (id: string) => void) => Promise<string | undefined>
+  /** Who reads this conversation - 'open' · 'group' · 'private'. The host passes what its list says; the roster follows it. */
+  @property({ type: String }) visibility?: string
   private adoptingSession = false
 
   /**
@@ -939,8 +973,17 @@ export class OxAssistantChat extends LitElement {
 
   /** C4 presence/roster — 세션 참여자 목록. lastSeenAt 으로 online 판정. */
   @state()
-  private participants: Array<{ id: string; role: string; lastSeenAt?: string; user?: { id: string; name?: string; username?: string } }> = []
+  private participants: Array<{ id: string; role: string; lastSeenAt?: string; user?: { id: string; name?: string; username?: string; email?: string } }> = []
   @state() private rosterLoaded = false
+  /** May I bring someone in here - the server's answer (`mayInviteToAISession`); unknown until the roster is read. */
+  @state() private mayInvite?: boolean
+  /** The name box under the roster is open. */
+  @state() private inviting = false
+  /** Who is typing now, by name - kept by `typingRoom`, redrawn on each notice and as they fade. */
+  @state() private typingNames: string[] = []
+  private typingRoom = new TypingRoom()
+  private _typingSub?: { unsubscribe: () => void }
+  private _typingTimer?: ReturnType<typeof setInterval>
 
   /** roster online 재평가 트리거 — heartbeat tick 마다 갱신(시간 경과 반영). */
   @state()
@@ -1209,6 +1252,52 @@ export class OxAssistantChat extends LitElement {
     .roster-chip.online .roster-dot {
       background: #22c55e;
     }
+    .roster-remove {
+      display: inline-flex;
+      border: 0;
+      padding: 0;
+      margin-left: 1px;
+      background: none;
+      color: inherit;
+      opacity: 0.6;
+      cursor: pointer;
+      border-radius: 50%;
+    }
+    .roster-remove:hover {
+      opacity: 1;
+    }
+    .roster-remove md-icon {
+      --md-icon-size: 11px;
+    }
+    .roster-invite {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      padding: 1px 7px 1px 5px;
+      border: 1px solid var(--md-sys-color-outline-variant, #cbd5e1);
+      border-radius: 9px;
+      background: none;
+      color: inherit;
+      font: inherit;
+      font-size: 10px;
+      cursor: pointer;
+    }
+    .roster-invite:hover {
+      background: var(--md-sys-color-surface-container-high, #eef2f7);
+    }
+    .roster-invite md-icon {
+      --md-icon-size: 12px;
+    }
+    .typing-line .typing-dots { gap: 3px; }
+    .typing-line .typing-dots > span { width: 4px; height: 4px; }
+    .typing-line {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin: 0 2px 4px;
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      font-size: 11.5px;
+    }
 
     /* ── Session tabs ─────────────────────────────────── */
     .session-tabs {
@@ -2920,6 +3009,10 @@ export class OxAssistantChat extends LitElement {
       this.input = ''
       this.participants = []
       this.rosterLoaded = false
+      this.mayInvite = undefined
+      this.inviting = false
+      this.typingRoom.clear()
+      this.typingNames = []
       this.replyingTo = undefined
       this._seenMessageIds.clear() // 세션 전환 — 에코 dedup 컨텍스트 리셋
       if (this.sessionId) {
@@ -2992,6 +3085,7 @@ export class OxAssistantChat extends LitElement {
   private _startMessageSubscription() {
     this._stopMessageSubscription()
     if (!this.sessionId) return
+    this._startTypingSubscription()
     try {
       this._messageSub = client
         .subscribe({ query: CHAT_MESSAGE_SUBSCRIPTION, variables: { sessionId: this.sessionId } })
@@ -3006,7 +3100,47 @@ export class OxAssistantChat extends LitElement {
     }
   }
 
+  /** The room's "typing" line - notices of the others, which fade by themselves (`TypingRoom`). */
+  private _startTypingSubscription() {
+    try {
+      this._typingSub = client
+        .subscribe({ query: CHAT_TYPING_SUBSCRIPTION, variables: { sessionId: this.sessionId } })
+        .subscribe({
+          next: ({ data }: any) => {
+            if (!data?.chatTyping) return
+            this.typingRoom.heard(data.chatTyping)
+            this._refreshTyping()
+          },
+          error: () => {
+            /* no typing line - the conversation itself is unaffected */
+          }
+        })
+    } catch {
+      /* subscriptions unavailable */
+    }
+  }
+
+  private _refreshTyping() {
+    this.typingNames = this.typingRoom.typing()
+    if (this.typingNames.length && !this._typingTimer) {
+      this._typingTimer = setInterval(() => this._refreshTyping(), 1_000)
+    } else if (!this.typingNames.length && this._typingTimer) {
+      clearInterval(this._typingTimer)
+      this._typingTimer = undefined
+    }
+  }
+
   private _stopMessageSubscription() {
+    try {
+      this._typingSub?.unsubscribe()
+    } catch {
+      /* already closed */
+    }
+    this._typingSub = undefined
+    if (this._typingTimer) {
+      clearInterval(this._typingTimer)
+      this._typingTimer = undefined
+    }
     if (this._messageSub) {
       try {
         this._messageSub.unsubscribe()
@@ -3027,6 +3161,8 @@ export class OxAssistantChat extends LitElement {
    * 자기 발신 메시지의 id 는 전송 reconcile 에서 이미 _seenMessageIds 에 등록됨.
    */
   private _onRemoteMessage(m: any) {
+    /* Their words arrived - they are not typing them any more. */
+    if (this.typingRoom.spoke(m?.creator?.id)) this._refreshTyping()
     const next = receiveRemoteMessage(this.lines as any, this._seenMessageIds, m)
     if (!next) return
     this._seenMessageIds = next.seen
@@ -3050,6 +3186,7 @@ export class OxAssistantChat extends LitElement {
       const result = await client.query({query:CHAT_PARTICIPANTS_QUERY,variables:{sessionId},fetchPolicy:'network-only'})
       if (this.sessionId !== sessionId) return
       this.participants=result.data?.chatSessionParticipants??[]
+      this.mayInvite=result.data?.mayInviteToAISession === true
       this.rosterLoaded=true
     } catch {
       if (this.sessionId === sessionId) this.rosterLoaded=false
@@ -3327,6 +3464,7 @@ export class OxAssistantChat extends LitElement {
           <button type="button" aria-label=${i18next.t('ai-assistant.button.cancel-reply')}
             @click=${() => this.cancelReply()}><md-icon>close</md-icon></button>
         </div>` : nothing}
+        ${this.renderTyping()}
         ${this.renderInviteNotice()}
         ${this.addressesPeople
           ? html`<div class="send-destination" aria-live="polite">
@@ -3509,7 +3647,8 @@ export class OxAssistantChat extends LitElement {
       .map(([token]) => token)
     if (incoming.length === 0) return nothing
 
-    const inviteState = rosterInviteState(this.participants,this._myUserId,this.rosterLoaded)
+    /* What the server said this person may do here - no copy of the rule on the screen (`maySeat`). */
+    const inviteState = !this.rosterLoaded || this.mayInvite === undefined ? 'checking' : this.mayInvite ? 'allowed' : 'denied'
     const mayInvite = inviteState === 'allowed'
     const names = incoming.map(token => `@${token}`).join(', ')
 
@@ -3522,10 +3661,15 @@ export class OxAssistantChat extends LitElement {
                 names,
                 defaultValue: '{names} will join this conversation when you send'
               })
-            : i18next.t('ai-assistant.text.cannot-invite', {
-                names,
-                defaultValue: '{names} will not join — only the people already in this conversation can bring someone in'
-              })}
+            : this.visibility === 'private'
+              ? i18next.t('ai-assistant.text.cannot-invite-private', {
+                  names,
+                  defaultValue: '{names} will not join — a private conversation is yours alone. Make it a group to bring people in'
+                })
+              : i18next.t('ai-assistant.text.cannot-invite-group', {
+                  names,
+                  defaultValue: '{names} will not join — only the person who started this group can bring someone in'
+                })}
         </span>
       </div>
     `
@@ -3662,6 +3806,7 @@ export class OxAssistantChat extends LitElement {
   private onTextareaInput(e: Event) {
     const ta = e.target as HTMLTextAreaElement
     this.input = ta.value
+    this._sayTyping()
     if (this.inputDebounceTimer) clearTimeout(this.inputDebounceTimer)
     this.inputDebounceTimer = setTimeout(() => {
       this.refreshMentionPopup(ta)
@@ -4018,27 +4163,111 @@ export class OxAssistantChat extends LitElement {
   }
 
   /** C4 roster — 세션 참여자 + online 표시. 참여자 2명 미만이면 숨김(혼자면 의미 없음). */
+  /**
+   * Who is in the room. A group shows it always - its people are the point of it, and the owner brings them in
+   * here; any other room once someone else has joined. The buttons follow what the server said this person may
+   * do (`mayInviteToAISession`, the owner's role); the doors decide again.
+   */
   private renderRoster() {
-    if (!this.sessionId || this.participants.length < 2) return nothing
+    if (!this.sessionId) return nothing
+    const group = this.visibility === 'group'
+    if (!group && this.participants.length < 2) return nothing
     const online = this.participants.filter(p => this._isOnline(p.lastSeenAt)).length
+    /* Who I am is my email here, as everywhere in this chat - the credential carries no user id. */
+    const myEmail = this._myEmail
+    const iOwn = !!myEmail && this.participants.some(p => p.role === 'owner' && p.user?.email === myEmail)
+    const inviteLabel = i18next.t('ai-assistant.button.invite', { defaultValue: 'Invite' })
     return html`
-      <div class="roster" role="group" aria-label="participants">
+      <div class="roster" role="group" aria-label=${i18next.t('ai-assistant.label.participants', { defaultValue: 'People in this conversation' })}>
         <span class="roster-count" title=${`${online} online / ${this.participants.length} total`}>
           <md-icon>group</md-icon>${online}/${this.participants.length}
         </span>
         ${this.participants.map(p => {
           const name = rosterName(p,String(i18next.t('ai-assistant.text.participant-unavailable')))
           const on = this._isOnline(p.lastSeenAt)
+          const removable = iOwn && p.role === 'member' && !!p.user?.id
           return html`<span
             class="roster-chip ${on ? 'online' : 'offline'}"
             title=${`${name} · ${p.role}${on ? ' · online' : ''}`}>
             <span class="roster-dot"></span><span class="roster-name">${name}</span>
+            ${removable
+              ? html`<button
+                  type="button"
+                  class="roster-remove"
+                  aria-label=${i18next.t('ai-assistant.button.remove-participant', { name, defaultValue: 'Send {name} out' })}
+                  title=${i18next.t('ai-assistant.button.remove-participant', { name, defaultValue: 'Send {name} out' })}
+                  @click=${() => this._removeParticipant(p.user!.id, name)}><md-icon>close</md-icon></button>`
+              : nothing}
           </span>`
         })}
+        ${this.mayInvite && !this.inviting
+          ? html`<button type="button" class="roster-invite" @click=${() => (this.inviting = true)}>
+              <md-icon>person_add</md-icon>${inviteLabel}
+            </button>`
+          : nothing}
       </div>
+      ${this.inviting
+        ? html`<ox-assistant-invite
+            .search=${(query: string) => (this.userProvider ? Promise.resolve(this.userProvider(query)) : this.fetchDomainUsers(query))}
+            .exclude=${this.participants.map(p => p.user?.id).filter(Boolean) as string[]}
+            @assistant-invite-pick=${(e: CustomEvent) => this._invite(e.detail.userId, e.detail.name)}
+            @assistant-invite-close=${() => (this.inviting = false)}></ox-assistant-invite>`
+        : nothing}
     `
   }
 
+  /** Bring someone in - the door seats them and tells them (`inviteToAISession`). */
+  private async _invite(userId: string, name: string) {
+    const sessionId = this.sessionId
+    if (!sessionId || !userId) return
+    try {
+      const result = await client.mutate({ mutation: INVITE_MUTATION, variables: { sessionId, userIds: [userId] } })
+      if (result.errors?.length) throw new Error(result.errors[0].message)
+      if (this.sessionId !== sessionId) return
+      this.inviting = false
+      notify({ level: 'info', message: i18next.t('ai-assistant.text.invited', { name, defaultValue: '{name} can now read and write here, and has been told.' }) })
+      await this._loadParticipants()
+    } catch (error) {
+      this.errorMessage = error instanceof Error ? error.message : String(error)
+    }
+  }
+
+  /** Send a member out - in a group they no longer read or write here. Bringing them back is inviting them again. */
+  private async _removeParticipant(userId: string, name: string) {
+    const sessionId = this.sessionId
+    if (!sessionId) return
+    try {
+      const result = await client.mutate({ mutation: REMOVE_MUTATION, variables: { sessionId, userId } })
+      if (result.errors?.length) throw new Error(result.errors[0].message)
+      if (this.sessionId !== sessionId) return
+      notify({ level: 'info', message: i18next.t('ai-assistant.text.removed-participant', { name, defaultValue: '{name} has left this conversation.' }) })
+      await this._loadParticipants()
+    } catch (error) {
+      this.errorMessage = error instanceof Error ? error.message : String(error)
+    }
+  }
+
+  /** Tell the others I am typing - only where someone else could hear it, and not on every key (`TypingRoom`). */
+  private _sayTyping() {
+    const sessionId = this.sessionId
+    if (!sessionId || this.visibility === 'private') return
+    if (this.visibility !== 'open' && this.participants.length < 2) return
+    if (!this.typingRoom.shouldSay(this.input)) return
+    client.mutate({ mutation: SAY_TYPING_MUTATION, variables: { sessionId } }).catch(() => {
+      /* a missed notice is a line that does not show */
+    })
+  }
+
+  /** "Kim is typing…" - over the box, while their notices keep coming. */
+  private renderTyping() {
+    const names = this.typingNames
+    if (!names.length) return nothing
+    const who = names.length > 2 ? i18next.t('ai-assistant.text.typing-many', { count: names.length, defaultValue: '{count} people are typing' }) : i18next.t('ai-assistant.text.typing', { names: names.join(', '), defaultValue: '{names} typing' })
+    return html`<div class="typing-line" role="status" aria-live="polite">
+      <span class="typing-dots"><span></span><span></span><span></span></span><span>${who}</span>
+    </div>`
+  }
+
   private _onSessionTabClick(sessionId: string) {
     if (sessionId === this.sessionId) return
     this.dispatchEvent(

package/client/components/assistant-dock.ts

@@ -577,10 +577,12 @@ export class AssistantDock extends localize(i18next)(LitElement) {
     if (!ask) return
 
     if (!ask.continueCurrent && (ask.name || ask.context || ask.transcript?.length)) {
-      const id = await this.startCarried(ask).catch(error => {
-        notify({ level: 'error', message: (error as Error).message })
+      const id = await this.startCarried(ask).catch(() => {
+        notify({ level: 'error', message: t('carry-failed', 'The selected context could not be attached. Nothing was sent. Try again from the original screen.') })
         return undefined
       })
+      // Never send a context-dependent request into the previous conversation after a failed handoff.
+      if (!id) return
       if (id) {
         await this.reloadSessions()
         this.controller.select(id)
@@ -605,10 +607,11 @@ export class AssistantDock extends localize(i18next)(LitElement) {
       `,
       variables: { t: anchor.anchorType, i: anchor.anchorId, n: ask.name || null }
     })
+    if (created.errors?.length) throw new Error(created.errors[0].message)
     const id = created.data?.createAISession?.id
-    if (!id) return undefined
+    if (!id) throw new Error('Session was not created')
     if (ask.context) {
-      await client.mutate({
+      const attached = await client.mutate({
         mutation: gql`
           mutation ($id: String!, $c: String!) {
             appendSessionNote(sessionId: $id, content: $c)
@@ -616,6 +619,7 @@ export class AssistantDock extends localize(i18next)(LitElement) {
         `,
         variables: { id, c: ask.context }
       })
+      if (attached.errors?.length) throw new Error(attached.errors[0].message)
     }
     if (ask.transcript?.length) {
       await client.mutate({
@@ -847,6 +851,7 @@ export class AssistantDock extends localize(i18next)(LitElement) {
             html`<ox-assistant-chat
               ?hidden=${this.showingHistory}
               .sessionId=${this.sessionId}
+              .visibility=${this.audience}
               .prepareSession=${(adopt: (id: string) => void) => this.controller.prepareSession(adopt)}
               .contextProvider=${() => {
                 /* The screen moved on between writing and sending - do not answer about the old one. */

package/client/components/assistant-invite.ts

@@ -0,0 +1,138 @@
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement, nothing, type PropertyValues } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+
+export interface InviteCandidate {
+  id: string
+  name?: string | null
+  email?: string | null
+}
+
+/**
+ * Bring someone into the conversation - a name box under the roster, and the people of the domain who match.
+ *
+ * It only picks. The chat calls the door (`inviteToAISession`), and the door decides: anyone in an open room, the
+ * owner in a group, nobody in a private one. People already in the room are not offered.
+ *
+ * Events:
+ *   assistant-invite-pick   { userId, name }
+ *   assistant-invite-close
+ */
+@customElement('ox-assistant-invite')
+export class AssistantInvite extends LitElement {
+  static styles = css`
+    :host { display: block; padding: 4px 8px 6px; border-bottom: 1px solid var(--md-sys-color-outline-variant, #e2e8f0); }
+    .box { display: flex; align-items: center; gap: 4px; }
+    input { flex: 1; min-width: 0; font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--md-sys-color-outline-variant, #cbd5e1); border-radius: 4px; background: var(--md-sys-color-surface, #fff); color: inherit; }
+    button { font: inherit; cursor: pointer; }
+    .close { border: 0; background: none; padding: 2px; border-radius: 4px; color: var(--md-sys-color-on-surface-variant); line-height: 0; }
+    .close md-icon { --md-icon-size: 16px; }
+    ul { list-style: none; margin: 4px 0 0; padding: 0; max-height: 160px; overflow: auto; }
+    li button { display: flex; gap: 6px; align-items: baseline; width: 100%; text-align: start; border: 0; border-radius: 4px; padding: 3px 6px; background: none; color: inherit; font-size: 12px; }
+    li button:hover, li button.active { background: var(--md-sys-color-surface-container-high, #eef2f7); }
+    .email { font-size: 11px; color: var(--md-sys-color-on-surface-variant); }
+    .note { margin-top: 4px; font-size: 11px; color: var(--md-sys-color-on-surface-variant); }
+  `
+
+  /** Finds the people of the domain by a part of a name or an email. */
+  @property({ attribute: false }) search?: (query: string) => Promise<InviteCandidate[]>
+  /** Ids already in the room - not offered. */
+  @property({ attribute: false }) exclude: string[] = []
+
+  @state() private query = ''
+  @state() private found: InviteCandidate[] = []
+  @state() private active = 0
+  @state() private searched = false
+
+  private generation = 0
+  private timer?: ReturnType<typeof setTimeout>
+
+  protected firstUpdated() {
+    this.renderRoot.querySelector('input')?.focus()
+    void this.lookUp()
+  }
+
+  protected updated(changed: PropertyValues) {
+    if (changed.has('exclude') && changed.get('exclude') !== undefined) void this.lookUp()
+  }
+
+  disconnectedCallback() {
+    clearTimeout(this.timer)
+    this.generation++
+    super.disconnectedCallback()
+  }
+
+  private async lookUp() {
+    const generation = ++this.generation
+    const people = this.search ? await this.search(this.query.trim()).catch(() => []) : []
+    if (generation !== this.generation) return
+    const here = new Set(this.exclude)
+    this.found = people.filter(person => person?.id && !here.has(person.id)).slice(0, 8)
+    this.active = 0
+    this.searched = true
+  }
+
+  private onInput(value: string) {
+    this.query = value
+    clearTimeout(this.timer)
+    this.timer = setTimeout(() => void this.lookUp(), 150)
+  }
+
+  private onKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      event.stopPropagation()
+      this.emit('assistant-invite-close')
+    } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault()
+      const step = event.key === 'ArrowDown' ? 1 : -1
+      if (this.found.length) this.active = (this.active + step + this.found.length) % this.found.length
+    } else if (event.key === 'Enter' && !event.isComposing) {
+      event.preventDefault()
+      const person = this.found[this.active]
+      if (person) this.pick(person)
+    }
+  }
+
+  private pick(person: InviteCandidate) {
+    this.emit('assistant-invite-pick', { userId: person.id, name: person.name || person.email || '' })
+  }
+
+  private emit(name: string, detail?: unknown) {
+    this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }))
+  }
+
+  render() {
+    const label = i18next.t('ai-assistant.text.invite-search', { defaultValue: 'Name or email' })
+    return html`
+      <div class="box">
+        <input
+          .value=${this.query}
+          placeholder=${label}
+          aria-label=${label}
+          @input=${(e: Event) => this.onInput((e.target as HTMLInputElement).value)}
+          @keydown=${(e: KeyboardEvent) => this.onKeyDown(e)} />
+        <button
+          class="close"
+          aria-label=${i18next.t('ai-assistant.button.close')}
+          title=${i18next.t('ai-assistant.button.close')}
+          @click=${() => this.emit('assistant-invite-close')}><md-icon>close</md-icon></button>
+      </div>
+      ${this.found.length
+        ? html`<ul role="listbox" aria-label=${label}>
+            ${this.found.map(
+              (person, i) => html`<li>
+                <button role="option" aria-selected=${i === this.active ? 'true' : 'false'} class=${i === this.active ? 'active' : ''} @click=${() => this.pick(person)}>
+                  <span>${person.name || person.email}</span>${person.name && person.email ? html`<span class="email">${person.email}</span>` : nothing}
+                </button>
+              </li>`
+            )}
+          </ul>`
+        : this.searched
+          ? html`<div class="note" role="status">${i18next.t('ai-assistant.text.invite-none-found', { defaultValue: 'No one else here by that name.' })}</div>`
+          : nothing}
+    `
+  }
+}