@things-factory/ai-assistant 10.1.109 → 10.1.110

package/client/components/assistant-chat.ts

@@ -34,6 +34,7 @@ import {
 } 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, type SpreadsheetRefusal } from '../utils/spreadsheet-text.js'
 import { entryReviewAddress, offersWorkspaceReview } from '../utils/entry-workspace.js'
 import { buildAssistantChatInput, buildChatMutationInput } from './chat-input-builder.js'
@@ -141,6 +142,8 @@ export interface ChatAttachment {
   type: string
   url: string
   base64?: string
+  /** A table pasted into the composer - its shape for the chip, its rows for the preview, its words to give back. */
+  table?: { rows: string[][]; columns: number; text?: string }
 }
 
 function formatFileSize(bytes: number): string {
@@ -605,6 +608,14 @@ export class OxAssistantChat extends LitElement {
   @state()
   private dragOver = false
 
+  /** The wide box (넓게 쓰기) covers the conversation inside the dock - shared-dock.md §10. */
+  @state()
+  private composerWide = false
+
+  /** The pasted table whose rows cover the conversation, or null. */
+  @state()
+  private previewAttachmentId: string | null = null
+
   /*
    * ── 왜 이미지만 받나 ──────────────────────────────────────────────────────
    * `.json` · `.txt` · `.csv` 도 받고 있었다. 그 파일들은 `hostContext.attachments` 로 실려 갔고
@@ -640,7 +651,7 @@ export class OxAssistantChat extends LitElement {
     return String(i18next.t(`ai-assistant.text.${refusal.code}`, { ...params, defaultValue: refusal.code }))
   }
 
-  private async onAttachFiles(files: FileList | File[] | null | undefined) {
+  private async onAttachFiles(files: FileList | File[] | null | undefined, table?: ChatAttachment['table']) {
     if (!files || files.length === 0) return
     let list = Array.from(files)
     if (this.usesAttachmentPolicy && this.modeView?.attachments?.kinds?.includes('spreadsheet')) {
@@ -678,7 +689,8 @@ export class OxAssistantChat extends LitElement {
         size: file.size,
         type: file.type || 'application/octet-stream',
         url,
-        base64
+        base64,
+        table
       })
     }
 
@@ -722,6 +734,39 @@ export 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. */
+  private tableToWords(id: string) {
+    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') as HTMLTextAreaElement | null)?.focus())
+  }
+
+  /** The small box stands as tall as its text, up to 40% of the chat; the wide box fills what it covers. */
+  private fitComposer() {
+    const ta = this.renderRoot.querySelector('.input-row textarea') as HTMLTextAreaElement | null
+    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'
+  }
+
+  private setComposerWide(wide: boolean) {
+    this.composerWide = wide
+    if (wide) this.previewAttachmentId = null
+    this.updateComplete.then(() => (this.renderRoot.querySelector('.input-row textarea') as HTMLTextAreaElement | null)?.focus())
   }
 
   private onComposerPaste(e: ClipboardEvent) {
@@ -744,7 +789,8 @@ export 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
       }
     }
@@ -2363,6 +2409,115 @@ export 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);
@@ -2629,8 +2784,9 @@ export 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,
@@ -2750,6 +2906,8 @@ export class OxAssistantChat extends LitElement {
   }
 
   updated(changed: Map<string, any>) {
+    if (changed.has('input') || changed.has('composerWide') || changed.has('previewAttachmentId') || changed.has('attachments')) this.fitComposer()
+
     /*
      * 밖에서 넣어 준 질문을 자동 전송한다(오류 토스트의 "AI에게 묻기" 등).
      *
@@ -2989,7 +3147,7 @@ export 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
@@ -3112,7 +3270,7 @@ export 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: DragEvent) => this.onComposerDragOver(e)}
         @dragleave=${(e: DragEvent) => this.onComposerDragLeave(e)}
         @drop=${(e: DragEvent) => this.onComposerDrop(e)}
@@ -3164,21 +3322,44 @@ export 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"
@@ -3250,10 +3431,16 @@ export 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>`}
@@ -3340,6 +3527,51 @@ export class OxAssistantChat extends LitElement {
     `
   }
 
+  private get previewedTable(): ChatAttachment | undefined {
+    return this.previewAttachmentId ? this.attachments.find(a => a.id === this.previewAttachmentId && a.table) : undefined
+  }
+
+  private tableShape(table: NonNullable<ChatAttachment['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.
+  */
+  private 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>
+    `
+  }
+
   private onKeyDown(e: KeyboardEvent) {
     /*
       The Enter that ends a Korean (or Japanese, Chinese) syllable belongs to the input method - sending on it
@@ -3382,9 +3614,13 @@ export 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()
     }
   }
 
@@ -4687,6 +4923,9 @@ export class OxAssistantChat extends LitElement {
     const attachmentsToSend = [...this.attachments]
     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/')

package/client/utils/composer-frame.ts

@@ -0,0 +1,49 @@
+/*
+ * The composer's frame (operato-application/design/ai/shared-dock.md §10) - how tall it stands, what Enter does,
+ * and what a pasted table gives back as words. Pure: the chat hands in its measures and the key.
+ *
+ * - The box grows with its text up to 40% of the chat's height, then scrolls. It never stands under its resting
+ *   height, and on a chat too short for 40% to hold that height the resting height wins.
+ * - The wide box (넓게 쓰기) covers the conversation inside the dock; the page beside it stays where it was.
+ * - In the small box Enter sends and Shift+Enter breaks the line, as in every chat. In the wide box Enter breaks
+ *   the line - long writing is made of lines - and Ctrl/Cmd+Enter sends. Ctrl/Cmd+Enter sends in both.
+ */
+
+/** The part of the chat's height the small box may take before it scrolls. */
+export const COMPOSER_GROWTH = 0.4
+
+/** The box's height for its content, both border-box pixels. */
+export function composerHeight(content: number, chat: number, resting: number): { height: number; scrolls: boolean } {
+  const cap = Math.max(resting, Math.floor(chat * COMPOSER_GROWTH))
+  return { height: Math.min(Math.max(content, resting), cap), scrolls: content > cap }
+}
+
+export type ComposerKey = { key: string; shiftKey?: boolean; ctrlKey?: boolean; metaKey?: boolean; altKey?: boolean }
+
+/** What a key does in the box: send, close the wide box, or nothing of ours (the textarea keeps it). */
+export function composerKeyAction(e: ComposerKey, wide: boolean): 'send' | 'narrow' | null {
+  if (e.key === 'Escape') return wide ? 'narrow' : null
+  if (e.key !== 'Enter' || e.altKey) return null
+  if (e.ctrlKey || e.metaKey) return 'send'
+  if (wide || e.shiftKey) return null
+  return 'send'
+}
+
+/** The shortcut the wide box's send button names, in the keys of this machine. */
+export function sendShortcut(platform: string | undefined): string {
+  return /mac|iphone|ipad/i.test(platform ?? '') ? '⌘ Enter' : 'Ctrl+Enter'
+}
+
+/**
+ * A pasted table given back as words: what the clipboard held as text, or - when it held only HTML - the rows with
+ * a tab between cells, as a spreadsheet copies them.
+ */
+export function tableAsWords(table: { rows: string[][]; text?: string | null }): string {
+  const text = (table.text ?? '').replace(/\r\n?/g, '\n').replace(/\n+$/, '')
+  return text.trim() ? text : table.rows.map(row => row.join('\t')).join('\n')
+}
+
+/** The words appended to what is already written - on a line of their own. */
+export function appendWords(written: string, words: string): string {
+  return written.trim() ? `${written.replace(/\s+$/, '')}\n${words}` : words
+}

package/client/utils/pasted-table.ts

@@ -133,7 +133,7 @@ export function pastedTableFile(
   clipboard: { html?: string | null; text?: string | null },
   policy: AttachmentPolicy | null | undefined,
   nameOf: (rows: number) => string
-): { name: string; text: string } | { refusal: PasteRefusal } | null {
+): { name: string; text: string; table: PastedTable } | { refusal: PasteRefusal } | null {
   if (!policy?.kinds?.some(kind => kind === 'text' || kind === 'spreadsheet')) return null
   const table = pastedTable(clipboard)
   if (!table) return null
@@ -141,5 +141,5 @@ export function pastedTableFile(
   const text = pastedTableText(table, name)
   const maxChars = textCharsOf(policy)
   if (text.length > maxChars) return { refusal: { code: 'attachment-paste-too-long', rows: table.rows.length, maxChars } }
-  return { name: `${name.replace(/[\\/:*?"<>|]/g, '_')}.csv`, text }
+  return { name: `${name.replace(/[\\/:*?"<>|]/g, '_')}.csv`, text, table }
 }

package/dist-client/components/assistant-chat.d.ts

@@ -29,6 +29,12 @@ export interface ChatAttachment {
     type: string;
     url: string;
     base64?: string;
+    /** A table pasted into the composer - its shape for the chip, its rows for the preview, its words to give back. */
+    table?: {
+        rows: string[][];
+        columns: number;
+        text?: string;
+    };
 }
 export declare class OxAssistantChat extends LitElement {
     /** 영속 세션 id. 없으면 ad-hoc (메시지 영속 안 됨). */
@@ -227,6 +233,10 @@ export declare class OxAssistantChat extends LitElement {
     private attachments;
     /** 드래그 오버 상태 (시각 피드백용) */
     private dragOver;
+    /** The wide box (넓게 쓰기) covers the conversation inside the dock - shared-dock.md §10. */
+    private composerWide;
+    /** The pasted table whose rows cover the conversation, or null. */
+    private previewAttachmentId;
     /** This conversation talks to the neutral door - its attachments follow the mode's policy (§9). */
     private get usesAttachmentPolicy();
     /** Whether the attach button stands: a mode that declares nothing takes nothing (the board door keeps its images). */
@@ -238,6 +248,11 @@ export declare class OxAssistantChat extends LitElement {
     private readSpreadsheets;
     private readFileAsBase64;
     private removeAttachment;
+    /** A pasted table goes back into the box as the words it was copied as - the conversion was not the person's choice. */
+    private tableToWords;
+    /** The small box stands as tall as its text, up to 40% of the chat; the wide box fills what it covers. */
+    private fitComposer;
+    private setComposerWide;
     private onComposerPaste;
     private onComposerDragOver;
     private onComposerDragLeave;
@@ -427,6 +442,9 @@ export declare class OxAssistantChat extends LitElement {
      * 일어나지 않는 것이 가장 나쁘다.
      */
     private renderInviteNotice;
+    private get previewedTable();
+    private tableShape;
+    private renderTablePreview;
     private onKeyDown;
     /** input 이벤트 — value 즉시 반영 + popup 갱신은 150ms 디바운스 (F-Finder 와 동일).
      *  big board 에서 매 keystroke filter 비용 절감 + 한국어 IME 조합 중 깜빡임 완화. */