@things-factory/ai-assistant 10.1.125 → 10.1.129

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

@@ -1,5 +1,7 @@
 var OxAssistantChat_1;
 import { __decorate, __metadata } from "tslib";
+import { replyDestination, quotedReply } from './reply-message.js';
+import { rosterInviteState, rosterName } from './roster-identity';
 /**
  * <ox-assistant-chat> — AI 도우미 채팅 컴포넌트 (Lit).
  *
@@ -180,8 +182,8 @@ const DOMAIN_USERS_FOR_MENTION_QUERY = gql `
   }
 `;
 const SAY_TO_ROOM_MUTATION = gql `
-  mutation SayToRoom($sessionId: String!, $content: String!) {
-    sayToRoom(sessionId: $sessionId, content: $content)
+  mutation SayToRoom($sessionId: String!, $content: String!, $replyToId: String) {
+    sayToRoom(sessionId: $sessionId, content: $content, replyToId: $replyToId)
   }
 `;
 const CHAT_MESSAGES_QUERY = gql `
@@ -198,6 +200,7 @@ const CHAT_MESSAGES_QUERY = gql `
       createdAt
       redacted
       creator {
+        id
         name
         email
       }
@@ -220,6 +223,7 @@ const CHAT_MESSAGE_SUBSCRIPTION = gql `
       createdAt
       redacted
       creator {
+        id
         name
         email
       }
@@ -236,6 +240,7 @@ const CHAT_PARTICIPANTS_QUERY = gql `
       user {
         id
         name
+        username
       }
     }
   }
@@ -248,16 +253,6 @@ const TOUCH_PRESENCE_MUTATION = gql `
 // heartbeat 주기(ms) — 서버 PRESENCE_TTL_MS(75s)의 ~1/2.5. 로컬 online 판정도 동일 TTL.
 const PRESENCE_HEARTBEAT_MS = 30_000;
 const PRESENCE_TTL_MS = 75_000;
-/** 이름 → roster chip 이니셜 (한글 1자 / 영문 최대 2자). */
-function initials(name) {
-    const n = (name || '?').trim();
-    if (!n)
-        return '?';
-    const parts = n.split(/\s+/);
-    if (parts.length >= 2)
-        return (parts[0][0] + parts[1][0]).toUpperCase();
-    return /[a-zA-Z]/.test(n) ? n.slice(0, 2).toUpperCase() : n.slice(0, 1);
-}
 let OxAssistantChat = class OxAssistantChat extends LitElement {
     constructor() {
         super(...arguments);
@@ -316,6 +311,7 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
         this.sendBlocked = '';
         /** C4 presence/roster — 세션 참여자 목록. lastSeenAt 으로 online 판정. */
         this.participants = [];
+        this.rosterLoaded = false;
         /** roster online 재평가 트리거 — heartbeat tick 마다 갱신(시간 경과 반영). */
         this._presenceTick = 0;
         /** 이미 transcript 에 반영된 서버 메시지 id 집합 — 자기 에코·중복 방송 차단. */
@@ -898,6 +894,7 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
       font-size: 10px;
       background: var(--md-sys-color-surface-variant, #f1f5f9);
     }
+    .roster-name { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
     .roster-chip.offline {
       opacity: 0.45;
     }
@@ -2407,6 +2404,21 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
 
     /* ── Input area ───────────────────────────────────── */
     /* border-top 은 .composer 가 담당 (actions-row 가 같은 wrapper 안) */
+    .reply-preview {
+      display: flex; gap: 8px; margin: 4px 14px; padding: 8px 10px;
+      border-left: 3px solid var(--md-sys-color-primary);
+      background: var(--md-sys-color-surface-container, #f1f5f9); border-radius: 6px;
+    }
+    .reply-preview > div { flex: 1; min-width: 0; }
+    .reply-preview strong { display: block; font-size: 12px; }
+    .reply-preview span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
+    .reply-preview button { border: 0; background: transparent; color: inherit; cursor: pointer; }
+    .send-destination {
+      font-size: 11px;
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      align-self: center;
+      max-width: 64px;
+    }
     .input-row {
       display: flex;
       gap: 8px;
@@ -2482,15 +2494,15 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
       --md-icon-size: 15px;
     }
 
-    /* ── Send button — ChatGPT 스타일 원형 ↑ (.input-row 안의 button 만) ─── */
+    /* One send control, aligned with the resting input height. */
     .input-row > button {
-      width: 32px;
-      height: 32px;
+      width: 54px;
+      height: 54px;
       padding: 0;
       background: var(--md-sys-color-primary, #1e293b);
       color: var(--md-sys-color-on-primary, #ffffff);
       border: 0;
-      border-radius: 50%;
+      border-radius: 12px;
       cursor: pointer;
       display: flex;
       align-items: center;
@@ -2501,17 +2513,8 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
         opacity 0.15s;
       flex-shrink: 0;
       align-self: flex-end;
-      margin-bottom: 2px;
-    }
-    /*
-      방에 말하는 자리는 **두 번째 행동**이다 — 이 화면의 첫 행동은 어시스턴트에게 묻는 것이다.
-      같은 무게로 두면 무엇이 기본인지 화면이 말하지 않게 된다(ADR-0070 A15 의 자리 둘).
-    */
-    .input-row > button.say-to-room {
-      background: var(--md-sys-color-surface-container-highest, #e2e8f0);
-      color: var(--md-sys-color-on-surface-variant, #475569);
+      margin-bottom: 0;
     }
-
     .input-row > button:disabled {
       background: var(--md-sys-color-surface-container-highest, #e2e8f0);
       color: var(--md-sys-color-outline, #94a3b8);
@@ -2627,6 +2630,8 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
             this.errorMessage = undefined;
             this.input = '';
             this.participants = [];
+            this.rosterLoaded = false;
+            this.replyingTo = undefined;
             this._seenMessageIds.clear(); // 세션 전환 — 에코 dedup 컨텍스트 리셋
             if (this.sessionId) {
                 this.loadHistory();
@@ -2745,18 +2750,19 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
         this.lines = next.lines;
     }
     async _loadParticipants() {
-        if (!this.sessionId)
+        const sessionId = this.sessionId;
+        if (!sessionId)
             return;
         try {
-            const result = await client.query({
-                query: CHAT_PARTICIPANTS_QUERY,
-                variables: { sessionId: this.sessionId },
-                fetchPolicy: 'network-only'
-            });
+            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.rosterLoaded = true;
         }
         catch {
-            /* roster 로드 실패는 채팅 본 기능 무영향 — 조용히 무시 */
+            if (this.sessionId === sessionId)
+                this.rosterLoaded = false;
         }
     }
     async _touchPresence() {
@@ -3035,6 +3041,12 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
               </div>
             `
             : nothing}
+        ${this.replyingTo ? html `<div class="reply-preview">
+          <div><strong>${i18next.t('ai-assistant.text.reply-to', { name: this.replyingTo.name })}</strong>
+            <span>${this.replyingTo.excerpt}</span></div>
+          <button type="button" aria-label=${i18next.t('ai-assistant.button.cancel-reply')}
+            @click=${() => this.cancelReply()}><md-icon>close</md-icon></button>
+        </div>` : nothing}
         ${this.renderInviteNotice()}
         <div class="input-row">
           <div class="textarea-wrap">
@@ -3071,33 +3083,15 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
                 `
             : nothing}
           </div>
-          ${ /*
-            두 자리다 — 어시스턴트에게 묻는 자리와 **방에 말하는 자리**. 누른 자리가 그 말의 대상을
-            정하고, 서버는 어느 문이 불렸는지로 그 사실을 저장한다(ADR-0070 A15 결정 ①).
-
-            **방에 사람이 있을 때만 보인다.** 혼자 쓰는 대화에서 「방에 말하기」는 아무에게도 하지 않는
-            말이고, 누를 일이 없는 단추는 무엇이 기본인지 흐린다. 조건은 참여자 목록과 같다(둘 이상) —
-            둘째 사람은 멘션으로 들어오고, 그 순간 이 자리도 함께 선다.
-          */''}
-          ${this.sessionId && this.participants.length >= 2
-            ? html `
-                <button
-                  class="say-to-room"
-                  ?disabled=${this.busy || !this.input.trim()}
-                  @click=${() => this.sayToRoom()}
-                  title=${i18next.t('ai-assistant.text.say-to-room-tooltip', {
-                defaultValue: 'say this to the people here — the assistant does not answer'
-            })}>
-                  <md-icon>forum</md-icon>
-                </button>
-              `
-            : nothing}
+          <span class="send-destination" aria-live="polite">${i18next.t(this.addressesPeople
+            ? 'ai-assistant.text.send-to-people' : 'ai-assistant.text.send-to-ai')}</span>
           ${this.composerWide
             ? html `<span class="send-shortcut">${i18next.t('ai-assistant.text.send-shortcut', { key: sendShortcut(navigator.platform), defaultValue: '{key} to send' })}</span>`
             : nothing}
           <button
             ?disabled=${this.busy || !!this.sendBlocked || (!this.input.trim() && this.attachments.length === 0)}
-            @click=${this.send}
+            @click=${() => this.submitMessage()}
+            aria-label=${i18next.t(this.addressesPeople ? 'ai-assistant.text.send-to-people' : 'ai-assistant.text.send-to-ai')}
             title=${this.sendBlocked ||
             (this.composerWide
                 ? i18next.t('ai-assistant.text.send-tooltip-wide', { key: sendShortcut(navigator.platform), defaultValue: 'Send ({key})' })
@@ -3116,6 +3110,53 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
      * 저장되는 대화가 있을 때만 할 수 있다. 세션이 없는 즉석 질문에는 「방」이 없다 — 그 자리에서
      * 한 말은 누구에게도 남지 않는다.
      */
+    startReply(line) {
+        this.cancelReply();
+        const name = line.role === 'assistant' ? 'AI' : line.senderName || i18next.t('ai-assistant.label.participant');
+        const token = line.role === 'user' ? name : undefined;
+        this.replyingTo = { id: line.id, name, role: line.role, token,
+            excerpt: stripMentionRefids(line.content).replace(/\{userId:[^}]+\}/g, '').replace(/\s+/g, ' ').slice(0, 180) };
+        if (token && line.senderId) {
+            this.pickedUserMentions.set(token, line.senderId);
+            if (!this.input.includes(`@${token}`))
+                this.input = `@${token} ${this.input}`;
+        }
+        this.updateComplete.then(() => this.renderRoot.querySelector('textarea')?.focus());
+    }
+    cancelReply() {
+        const token = this.replyingTo?.token;
+        if (token && this.input.startsWith(`@${token} `))
+            this.input = this.input.slice(token.length + 2);
+        this.replyingTo = undefined;
+    }
+    replyContent(body) {
+        return quotedReply(body, this.replyingTo);
+    }
+    get addressesPeople() {
+        const mentioned = [...this.pickedUserMentions.keys()].some(token => this.input.includes(`@${token}`));
+        return replyDestination(this.replyingTo?.role, mentioned) === 'room';
+    }
+    async submitMessage() {
+        if (this.busy || !this.input.trim() && !this.attachments.length)
+            return;
+        if (!this.addressesPeople)
+            return this.send();
+        if (this.attachments.length) {
+            this.errorMessage = i18next.t('ai-assistant.text.room-attachments-unavailable');
+            return;
+        }
+        if (!this.sessionId && this.prepareSession) {
+            try {
+                await this.prepareSession(id => { this.adoptingSession = true; this.sessionId = id; });
+                await this.updateComplete;
+            }
+            catch (error) {
+                this.errorMessage = error instanceof Error ? error.message : String(error);
+                return;
+            }
+        }
+        return this.sayToRoom();
+    }
     async sayToRoom() {
         const body = this.input.trim();
         if (!body || this.busy)
@@ -3127,15 +3168,20 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
             });
             return;
         }
+        const reply = this.replyingTo;
+        const content = this.replyContent(injectMentionUserIds(body, [...this.pickedUserMentions.entries()]
+            .filter(([token]) => body.includes(`@${token}`))
+            .map(([token, userId]) => ({ token, userId }))));
         const localId = `local-${++this._localSeq}-r`;
-        this.lines = [...this.lines, { role: 'user', content: body, _localId: localId, senderEmail: this._myEmail }];
+        this.lines = [...this.lines, { role: 'user', content, _localId: localId, senderId: this._myUserId, senderEmail: this._myEmail }];
         this.input = '';
         this.busy = true;
         try {
             const result = await client.mutate({
                 mutation: SAY_TO_ROOM_MUTATION,
-                variables: { sessionId: this.sessionId, content: body }
+                variables: { sessionId: this.sessionId, content, replyToId: reply?.id }
             });
+            this.replyingTo = undefined;
             /* 방송 에코와 겹치지 않게 서버 id 로 맞춘다 — 보낸 말이 두 줄로 보이지 않게. */
             this._reconcileSentLine(localId, result.data?.sayToRoom ?? undefined, {});
         }
@@ -3166,14 +3212,14 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
             .map(([token]) => token);
         if (incoming.length === 0)
             return nothing;
-        const myRole = this.participants.find(p => p.user?.id && p.user.id === this._myUserId)?.role;
-        const mayInvite = myRole === 'owner' || myRole === 'member';
+        const inviteState = rosterInviteState(this.participants, this._myUserId, this.rosterLoaded);
+        const mayInvite = inviteState === 'allowed';
         const names = incoming.map(token => `@${token}`).join(', ');
         return html `
       <div class="invite-notice">
         <md-icon>person_add</md-icon>
         <span>
-          ${mayInvite
+          ${inviteState === 'checking' ? i18next.t('ai-assistant.text.invite-checking') : mayInvite
             ? i18next.t('ai-assistant.text.will-be-invited', {
                 names,
                 defaultValue: '{names} will join this conversation when you send'
@@ -3289,7 +3335,7 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
         else if (action === 'send') {
             e.preventDefault();
             if (!this.busy)
-                this.send();
+                void this.submitMessage();
         }
     }
     /** input 이벤트 — value 즉시 반영 + popup 갱신은 150ms 디바운스 (F-Finder 와 동일).
@@ -3651,12 +3697,12 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
           <md-icon>group</md-icon>${online}/${this.participants.length}
         </span>
         ${this.participants.map(p => {
-            const name = p.user?.name || p.user?.id || '?';
+            const name = rosterName(p, String(i18next.t('ai-assistant.text.participant-unavailable')));
             const on = this._isOnline(p.lastSeenAt);
             return html `<span
             class="roster-chip ${on ? 'online' : 'offline'}"
             title=${`${name} · ${p.role}${on ? ' · online' : ''}`}>
-            <span class="roster-dot"></span>${initials(name)}
+            <span class="roster-dot"></span><span class="roster-name">${name}</span>
           </span>`;
         })}
       </div>
@@ -3781,7 +3827,7 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
      *   system    : 없음
      */
     renderMessageActions(idx, line, content) {
-        if (line.role !== 'assistant')
+        if (line.role === 'system')
             return nothing;
         const isCopied = this.copiedIdx === idx;
         // revert 는 인라인 patch chip (메시지 안) 한 곳에만 — hover 액션에서 제외 (중복 방지).
@@ -3795,13 +3841,17 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
           @click=${() => this.copyMessage(idx, content)}>
           <md-icon>${isCopied ? 'check' : 'content_copy'}</md-icon>
         </button>
-        <button
+        <button class="msg-action" ?disabled=${this.busy || (line.role === 'user' && !line.senderId)}
+          title=${i18next.t('ai-assistant.button.reply')}
+          aria-label=${i18next.t('ai-assistant.button.reply')}
+          @click=${() => this.startReply(line)}><md-icon>reply</md-icon></button>
+        ${line.role === 'assistant' ? html `<button
           class="msg-action"
           ?disabled=${this.busy}
           title=${i18next.t('ai-assistant.button.regenerate')}
           @click=${() => this.regenerateAssistant(idx)}>
           <md-icon>refresh</md-icon>
-        </button>
+        </button>` : nothing}
       </div>
     `;
     }
@@ -4551,7 +4601,8 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
                 userMentions.push({ token, userId });
         }
         let enrichedContent = injectMentionRefids(promptText, mentions);
-        enrichedContent = injectMentionUserIds(enrichedContent, userMentions);
+        enrichedContent = this.replyContent(injectMentionUserIds(enrichedContent, userMentions));
+        this.replyingTo = undefined;
         // optimistic 라인에 임시 핸들 — 방송 에코와의 reconcile 을 index 비의존으로.
         const userLocalId = `local-${++this._localSeq}-u`;
         const asstLocalId = `local-${++this._localSeq}-a`;
@@ -4568,7 +4619,7 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
                     base64: a.base64
                 })),
                 _localId: userLocalId,
-                senderEmail: this._myEmail
+                senderId: this._myUserId, senderEmail: this._myEmail
             }
         ];
         this.input = '';
@@ -4909,6 +4960,10 @@ __decorate([
     state(),
     __metadata("design:type", Array)
 ], OxAssistantChat.prototype, "participants", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxAssistantChat.prototype, "rosterLoaded", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -4929,6 +4984,10 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], OxAssistantChat.prototype, "mentionOverflow", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxAssistantChat.prototype, "replyingTo", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)