@things-factory/ai-assistant 10.1.208 → 10.1.210

package/dist-client/components/assistant-chat.js

@@ -1,7 +1,10 @@
 var OxAssistantChat_1;
 import { __decorate, __metadata } from "tslib";
 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).
  *
@@ -235,6 +238,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
@@ -243,10 +247,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)
@@ -314,6 +346,11 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
         /** C4 presence/roster — 세션 참여자 목록. lastSeenAt 으로 online 판정. */
         this.participants = [];
         this.rosterLoaded = false;
+        /** The name box under the roster is open. */
+        this.inviting = false;
+        /** Who is typing now, by name - kept by `typingRoom`, redrawn on each notice and as they fade. */
+        this.typingNames = [];
+        this.typingRoom = new TypingRoom();
         /** roster online 재평가 트리거 — heartbeat tick 마다 갱신(시간 경과 반영). */
         this._presenceTick = 0;
         /** 이미 transcript 에 반영된 서버 메시지 id 집합 — 자기 에코·중복 방송 차단. */
@@ -850,6 +887,52 @@ let OxAssistantChat = 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 {
@@ -2560,6 +2643,10 @@ let OxAssistantChat = 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) {
@@ -2629,6 +2716,7 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
         this._stopMessageSubscription();
         if (!this.sessionId)
             return;
+        this._startTypingSubscription();
         try {
             this._messageSub = client
                 .subscribe({ query: CHAT_MESSAGE_SUBSCRIPTION, variables: { sessionId: this.sessionId } })
@@ -2643,7 +2731,49 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
             /* 구독 미지원 환경 — 조용히 스킵 */
         }
     }
+    /** The room's "typing" line - notices of the others, which fade by themselves (`TypingRoom`). */
+    _startTypingSubscription() {
+        try {
+            this._typingSub = client
+                .subscribe({ query: CHAT_TYPING_SUBSCRIPTION, variables: { sessionId: this.sessionId } })
+                .subscribe({
+                next: ({ data }) => {
+                    if (!data?.chatTyping)
+                        return;
+                    this.typingRoom.heard(data.chatTyping);
+                    this._refreshTyping();
+                },
+                error: () => {
+                    /* no typing line - the conversation itself is unaffected */
+                }
+            });
+        }
+        catch {
+            /* subscriptions unavailable */
+        }
+    }
+    _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;
+        }
+    }
     _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();
@@ -2663,6 +2793,9 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
      * 자기 발신 메시지의 id 는 전송 reconcile 에서 이미 _seenMessageIds 에 등록됨.
      */
     _onRemoteMessage(m) {
+        /* Their words arrived - they are not typing them any more. */
+        if (this.typingRoom.spoke(m?.creator?.id))
+            this._refreshTyping();
         const next = receiveRemoteMessage(this.lines, this._seenMessageIds, m);
         if (!next)
             return;
@@ -2687,6 +2820,7 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
             if (this.sessionId !== sessionId)
                 return;
             this.participants = result.data?.chatSessionParticipants ?? [];
+            this.mayInvite = result.data?.mayInviteToAISession === true;
             this.rosterLoaded = true;
         }
         catch {
@@ -2967,6 +3101,7 @@ let OxAssistantChat = 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">
@@ -3148,7 +3283,8 @@ let OxAssistantChat = 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(', ');
         return html `
@@ -3160,10 +3296,15 @@ let OxAssistantChat = 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>
     `;
@@ -3294,6 +3435,7 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
     onTextareaInput(e) {
         const ta = e.target;
         this.input = ta.value;
+        this._sayTyping();
         if (this.inputDebounceTimer)
             clearTimeout(this.inputDebounceTimer);
         this.inputDebounceTimer = setTimeout(() => {
@@ -3597,27 +3739,120 @@ let OxAssistantChat = 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.
+     */
     renderRoster() {
-        if (!this.sessionId || this.participants.length < 2)
+        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) => (this.userProvider ? Promise.resolve(this.userProvider(query)) : this.fetchDomainUsers(query))}
+            .exclude=${this.participants.map(p => p.user?.id).filter(Boolean)}
+            @assistant-invite-pick=${(e) => 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`). */
+    async _invite(userId, name) {
+        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. */
+    async _removeParticipant(userId, name) {
+        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`). */
+    _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. */
+    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>`;
+    }
     _onSessionTabClick(sessionId) {
         if (sessionId === this.sessionId)
             return;
@@ -4655,6 +4890,10 @@ __decorate([
     property({ attribute: false }),
     __metadata("design:type", Function)
 ], OxAssistantChat.prototype, "prepareSession", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], OxAssistantChat.prototype, "visibility", void 0);
 __decorate([
     property({ type: Array, attribute: false }),
     __metadata("design:type", Array)
@@ -4839,6 +5078,18 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], OxAssistantChat.prototype, "rosterLoaded", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], OxAssistantChat.prototype, "mayInvite", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxAssistantChat.prototype, "inviting", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], OxAssistantChat.prototype, "typingNames", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)