@things-factory/ai-assistant 10.1.108 → 10.1.110

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

@@ -29,6 +29,7 @@ import gql from 'graphql-tag';
 import { renderMarkdown, injectMentionRefids, injectMentionUserIds, stripMentionRefids } from './markdown.js';
 import { acceptOf, chatAttachmentUrl, refuseAttachments, textCharsOf } from '../utils/attachment-policy.js';
 import { pastedTableFile } from '../utils/pasted-table.js';
+import { appendWords, composerHeight, composerKeyAction, sendShortcut, tableAsWords } from '../utils/composer-frame.js';
 import { readSpreadsheet, spreadsheetKindOf } from '../utils/spreadsheet-text.js';
 import { entryReviewAddress, offersWorkspaceReview } from '../utils/entry-workspace.js';
 import { buildAssistantChatInput, buildChatMutationInput } from './chat-input-builder.js';
@@ -295,6 +296,10 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
         this.attachments = [];
         /** 드래그 오버 상태 (시각 피드백용) */
         this.dragOver = false;
+        /** The wide box (넓게 쓰기) covers the conversation inside the dock - shared-dock.md §10. */
+        this.composerWide = false;
+        /** The pasted table whose rows cover the conversation, or null. */
+        this.previewAttachmentId = null;
         /** mini action — 인라인 예시 토글 */
         this.examplesOpen = false;
         /** 원본 JSON 을 펼친 단계(라인:단계) — 목록은 한 줄 요약으로 훑고 필요한 것만 펼친다. */
@@ -449,7 +454,7 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
             params.kinds = refusal.kinds.join(', ');
         return String(i18next.t(`ai-assistant.text.${refusal.code}`, { ...params, defaultValue: refusal.code }));
     }
-    async onAttachFiles(files) {
+    async onAttachFiles(files, table) {
         if (!files || files.length === 0)
             return;
         let list = Array.from(files);
@@ -488,7 +493,8 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
                 size: file.size,
                 type: file.type || 'application/octet-stream',
                 url,
-                base64
+                base64,
+                table
             });
         }
         this.attachments = [...this.attachments, ...newAttachments];
@@ -531,6 +537,40 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
             URL.revokeObjectURL(target.url);
         }
         this.attachments = this.attachments.filter(a => a.id !== id);
+        if (this.previewAttachmentId === id)
+            this.previewAttachmentId = null;
+    }
+    /** A pasted table goes back into the box as the words it was copied as - the conversion was not the person's choice. */
+    tableToWords(id) {
+        const target = this.attachments.find(a => a.id === id);
+        if (!target?.table)
+            return;
+        this.input = appendWords(this.input, tableAsWords(target.table));
+        this.removeAttachment(id);
+        this.updateComplete.then(() => this.renderRoot.querySelector('textarea')?.focus());
+    }
+    /** The small box stands as tall as its text, up to 40% of the chat; the wide box fills what it covers. */
+    fitComposer() {
+        const ta = this.renderRoot.querySelector('.input-row textarea');
+        if (!ta)
+            return;
+        if (this.composerWide) {
+            ta.style.height = '';
+            ta.style.overflowY = '';
+            return;
+        }
+        ta.style.height = '0px';
+        const border = ta.offsetHeight - ta.clientHeight;
+        const resting = parseFloat(getComputedStyle(ta).minHeight) || 0;
+        const { height, scrolls } = composerHeight(ta.scrollHeight + border, this.clientHeight, resting);
+        ta.style.height = `${height}px`;
+        ta.style.overflowY = scrolls ? 'auto' : 'hidden';
+    }
+    setComposerWide(wide) {
+        this.composerWide = wide;
+        if (wide)
+            this.previewAttachmentId = null;
+        this.updateComplete.then(() => this.renderRoot.querySelector('.input-row textarea')?.focus());
     }
     onComposerPaste(e) {
         const items = e.clipboardData?.items;
@@ -548,7 +588,8 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
                     this.errorMessage = String(i18next.t(`ai-assistant.text.${pasted.refusal.code}`, { ...pasted.refusal, defaultValue: pasted.refusal.code }));
                     return;
                 }
-                this.onAttachFiles([new File([pasted.text], pasted.name, { type: 'text/csv' })]);
+                const words = e.clipboardData?.getData('text/plain');
+                this.onAttachFiles([new File([pasted.text], pasted.name, { type: 'text/csv' })], { ...pasted.table, text: words });
                 return;
             }
         }
@@ -1671,6 +1712,42 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
       color: inherit;
     }
 
+    /* The entry card's way to the large review - a quiet action under its table, never a second run button. */
+    .workspace-review {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      margin: 6px 0 0 auto;
+      padding: 5px 11px 5px 9px;
+      border: 1px solid transparent;
+      border-radius: 999px;
+      background: transparent;
+      color: var(--md-sys-color-primary, #0f766e);
+      font-family: inherit;
+      font-size: 12px;
+      font-weight: 600;
+      letter-spacing: 0.01em;
+      cursor: pointer;
+      transition:
+        background-color 0.14s ease-in-out,
+        border-color 0.14s ease-in-out;
+    }
+    .workspace-review md-icon {
+      --md-icon-size: 15px;
+      color: inherit;
+    }
+    .workspace-review:hover {
+      background: color-mix(in srgb, var(--md-sys-color-primary, #0f766e) 8%, transparent);
+      border-color: color-mix(in srgb, var(--md-sys-color-primary, #0f766e) 24%, transparent);
+    }
+    .workspace-review:active {
+      background: color-mix(in srgb, var(--md-sys-color-primary, #0f766e) 14%, transparent);
+    }
+    .workspace-review:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary, #0f766e);
+      outline-offset: 1px;
+    }
+
     /* ── 접지 경고 — 근거에 없는 대상을 지목한 답 ───── */
     .grounding-warning {
       display: flex;
@@ -1979,6 +2056,115 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
       flex-direction: column;
       transition: background 0.15s, border-color 0.15s;
     }
+    /* The wide box and a table's rows cover the conversation, inside the dock - the page beside it stays. */
+    .messages.covered {
+      flex: 0 0 0;
+      padding: 0;
+      overflow: hidden;
+      visibility: hidden;
+    }
+    .composer.wide,
+    .composer.previewing {
+      flex: 1 1 auto;
+      min-height: 0;
+    }
+    .composer.wide .input-row {
+      flex: 1;
+      min-height: 0;
+      align-items: stretch;
+    }
+    .composer.wide .input-row > :not(.textarea-wrap) {
+      align-self: flex-end;
+    }
+    .composer.wide textarea {
+      min-height: 0;
+    }
+    .composer-size {
+      margin-left: auto;
+    }
+    .send-shortcut {
+      font-size: 10px;
+      color: var(--md-sys-color-outline, #64748b);
+      white-space: nowrap;
+      padding-bottom: 10px;
+    }
+    .table-preview {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      margin: 4px 14px;
+      border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      border-radius: 8px;
+      background: var(--md-sys-color-surface, #ffffff);
+      overflow: hidden;
+    }
+    .table-preview-head {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 8px;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      flex-wrap: wrap;
+    }
+    .table-preview-head > md-icon {
+      --md-icon-size: 18px;
+      color: var(--md-sys-color-primary, #0284c7);
+    }
+    .table-preview-name {
+      font-weight: 500;
+      color: var(--md-sys-color-on-surface, #0f172a);
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .table-preview-shape {
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      margin-right: auto;
+    }
+    .table-preview-body {
+      flex: 1;
+      min-height: 0;
+      overflow: auto;
+    }
+    .table-preview-body table {
+      border-collapse: collapse;
+      font-size: 11px;
+    }
+    .table-preview-body th,
+    .table-preview-body td {
+      border-bottom: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      padding: 4px 8px;
+      text-align: left;
+      white-space: nowrap;
+      color: var(--md-sys-color-on-surface, #0f172a);
+    }
+    .table-preview-body th {
+      position: sticky;
+      left: 0;
+      font-weight: 400;
+      text-align: right;
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      background: var(--md-sys-color-surface-container, #f1f5f9);
+    }
+    .attachment-open {
+      all: unset;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      min-width: 0;
+      flex: 1;
+      cursor: pointer;
+      border-radius: 6px;
+    }
+    .attachment-open:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary, #0284c7);
+      outline-offset: 2px;
+    }
+    .attachment-chip.open {
+      border-color: var(--md-sys-color-primary, #0284c7);
+    }
     .composer.drag-over {
       background: var(--md-sys-color-surface-container, #f1f5f9);
       border-top-color: var(--md-sys-color-primary, #0284c7);
@@ -2245,8 +2431,9 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
       font: inherit;
       letter-spacing: inherit;
       resize: none;
-      min-height: 36px;
-      max-height: 140px;
+      /* The resting height of one line as it stood; the box grows from here by composerHeight (shared-dock.md §10). */
+      box-sizing: border-box;
+      min-height: 54px;
       outline: none;
       transition:
         border-color 0.2s,
@@ -2366,6 +2553,8 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
             this.askHostForMode(kind);
     }
     updated(changed) {
+        if (changed.has('input') || changed.has('composerWide') || changed.has('previewAttachmentId') || changed.has('attachments'))
+            this.fitComposer();
         /*
          * 밖에서 넣어 준 질문을 자동 전송한다(오류 토스트의 "AI에게 묻기" 등).
          *
@@ -2603,7 +2792,7 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
       ${this.renderModeSubject()}
       ${this.renderSessionTabs()}
       ${this.renderRoster()}
-      <div class="messages" @click=${this.onBubbleClick}>
+      <div class="messages ${this.composerWide || this.previewedTable ? 'covered' : ''}" @click=${this.onBubbleClick}>
         ${!hasMessages ? this.renderEmpty() : nothing}
         ${(() => {
             const myEmail = this._myEmail;
@@ -2727,7 +2916,7 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
             : nothing}
       ${this.renderFoldNotice()}
       <div
-        class="composer ${this.dragOver ? 'drag-over' : ''}"
+        class="composer ${this.dragOver ? 'drag-over' : ''} ${this.composerWide ? 'wide' : ''} ${this.previewedTable ? 'previewing' : ''}"
         @dragover=${(e) => this.onComposerDragOver(e)}
         @dragleave=${(e) => this.onComposerDragLeave(e)}
         @drop=${(e) => this.onComposerDrop(e)}
@@ -2779,20 +2968,43 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
                 </button>
               `
             : nothing}
+          <button
+            type="button"
+            class="action composer-size"
+            aria-pressed=${this.composerWide ? 'true' : 'false'}
+            @click=${() => this.setComposerWide(!this.composerWide)}>
+            <md-icon>${this.composerWide ? 'close_fullscreen' : 'open_in_full'}</md-icon>
+            ${this.composerWide
+            ? i18next.t('ai-assistant.button.write-narrow', { defaultValue: 'Narrow' })
+            : i18next.t('ai-assistant.button.write-wide', { defaultValue: 'Write wide' })}
+          </button>
         </div>
+        ${this.renderTablePreview()}
         ${this.examplesOpen ? this.renderInlineExamples() : nothing}
         ${this.attachments.length > 0
             ? html `
               <div class="attachment-strip">
                 ${this.attachments.map(att => html `
-                    <div class="attachment-chip" title=${att.name}>
-                      ${att.type.startsWith('image/')
-                ? html `<img class="attachment-thumb" src=${att.url} alt=${att.name} />`
-                : html `<md-icon class="attachment-icon">description</md-icon>`}
-                      <div class="attachment-meta">
-                        <span class="attachment-name">${att.name}</span>
-                        <span class="attachment-size">${formatFileSize(att.size)}</span>
-                      </div>
+                    <div class="attachment-chip ${att.id === this.previewAttachmentId ? 'open' : ''}" title=${att.name}>
+                      ${att.table
+                ? html `<button
+                            type="button"
+                            class="attachment-open"
+                            aria-expanded=${att.id === this.previewAttachmentId ? 'true' : 'false'}
+                            @click=${() => (this.previewAttachmentId = att.id === this.previewAttachmentId ? null : att.id)}>
+                            <md-icon class="attachment-icon">table_chart</md-icon>
+                            <span class="attachment-meta">
+                              <span class="attachment-name">${att.name}</span>
+                              <span class="attachment-size">${this.tableShape(att.table)}</span>
+                            </span>
+                          </button>`
+                : html `${att.type.startsWith('image/')
+                    ? html `<img class="attachment-thumb" src=${att.url} alt=${att.name} />`
+                    : html `<md-icon class="attachment-icon">description</md-icon>`}
+                            <div class="attachment-meta">
+                              <span class="attachment-name">${att.name}</span>
+                              <span class="attachment-size">${formatFileSize(att.size)}</span>
+                            </div>`}
                       <button
                         type="button"
                         class="attachment-remove"
@@ -2862,10 +3074,16 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
                 </button>
               `
             : nothing}
+          ${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}
-            title=${this.sendBlocked || i18next.t('ai-assistant.text.send-tooltip')}>
+            title=${this.sendBlocked ||
+            (this.composerWide
+                ? i18next.t('ai-assistant.text.send-tooltip-wide', { key: sendShortcut(navigator.platform), defaultValue: 'Send ({key})' })
+                : i18next.t('ai-assistant.text.send-tooltip'))}>
             ${this.busy
             ? html `<span class="spinner"></span>`
             : html `<md-icon>arrow_upward</md-icon>`}
@@ -2950,7 +3168,54 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
       </div>
     `;
     }
+    get previewedTable() {
+        return this.previewAttachmentId ? this.attachments.find(a => a.id === this.previewAttachmentId && a.table) : undefined;
+    }
+    tableShape(table) {
+        return i18next.t('ai-assistant.text.table-shape', { rows: table.rows.length, columns: table.columns, defaultValue: '{rows} rows × {columns} columns' });
+    }
+    /*
+      The rows of a pasted table, over the conversation - numbered as the file numbers them, which is the number the
+      entry card names. Every row: the paste is held under the mode's limit already.
+    */
+    renderTablePreview() {
+        const att = this.previewedTable;
+        if (!att?.table)
+            return nothing;
+        const { rows, columns } = att.table;
+        return html `
+      <div class="table-preview" role="region" aria-label=${att.name}>
+        <div class="table-preview-head">
+          <md-icon>table_chart</md-icon>
+          <span class="table-preview-name">${att.name}</span>
+          <span class="table-preview-shape">${this.tableShape(att.table)}</span>
+          <button type="button" class="action" @click=${() => this.tableToWords(att.id)}>
+            <md-icon>notes</md-icon>
+            ${i18next.t('ai-assistant.button.table-to-words', { defaultValue: 'Put in as words' })}
+          </button>
+          <button type="button" class="action" @click=${() => (this.previewAttachmentId = null)}>
+            <md-icon>close</md-icon>
+            ${i18next.t('ai-assistant.button.close')}
+          </button>
+        </div>
+        <div class="table-preview-body">
+          <table>
+            ${rows.map((row, i) => html `<tr>
+                <th scope="row">${i + 1}</th>
+                ${Array.from({ length: columns }, (_, c) => html `<td>${row[c] ?? ''}</td>`)}
+              </tr>`)}
+          </table>
+        </div>
+      </div>
+    `;
+    }
     onKeyDown(e) {
+        /*
+          The Enter that ends a Korean (or Japanese, Chinese) syllable belongs to the input method - sending on it
+          sends the line without its last syllable, which then lands in the emptied box.
+        */
+        if (e.isComposing || e.keyCode === 229)
+            return;
         // Mention popup 활성 시 — 화살표/Enter/Tab/Esc 가로채서 popup 네비게이션
         if (this.mentionOpen) {
             if (e.key === 'ArrowDown') {
@@ -2987,9 +3252,15 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
                 return;
             }
         }
-        if (e.key === 'Enter' && !e.shiftKey && !this.busy) {
+        const action = composerKeyAction(e, this.composerWide);
+        if (action === 'narrow') {
             e.preventDefault();
-            this.send();
+            this.setComposerWide(false);
+        }
+        else if (action === 'send') {
+            e.preventDefault();
+            if (!this.busy)
+                this.send();
         }
     }
     /** input 이벤트 — value 즉시 반영 + popup 갱신은 150ms 디바운스 (F-Finder 와 동일).
@@ -3630,7 +3901,7 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
             ${entry ? html `<ox-assistant-entry-review .proposal=${p}></ox-assistant-entry-review>` : nothing}
             ${entry && this.sessionId && offersWorkspaceReview(p)
                 ? html `<button
-                  class="choice-chip"
+                  class="workspace-review"
                   @click=${() => this.dispatchEvent(new CustomEvent('assistant-open-page', { detail: { href: entryReviewAddress(this.sessionId, key) }, bubbles: true, composed: true }))}
                 >
                   <md-icon>open_in_full</md-icon>
@@ -4156,6 +4427,9 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
         if ((!text && attachmentsToSend.length === 0) || this.busy)
             return;
         this.attachments = [];
+        /* What was written wide is sent to be answered - the conversation comes back to show it. */
+        this.composerWide = false;
+        this.previewAttachmentId = null;
         const promptText = text || (attachmentsToSend.length > 0
             ? (attachmentsToSend[0].type.startsWith('image/')
                 ? i18next.t('ai-assistant.text.attached-image-ask', { defaultValue: 'here is an image — go by it.' })
@@ -4532,6 +4806,14 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], OxAssistantChat.prototype, "dragOver", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxAssistantChat.prototype, "composerWide", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxAssistantChat.prototype, "previewAttachmentId", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)