@things-factory/ai-assistant 10.1.8 → 10.1.15

package/client/components/assistant-session-toolbar.ts

@@ -0,0 +1,70 @@
+import { LitElement, css, html, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { i18next } from '@operato/i18n'
+import type { AssistantSession } from '../utils/assistant-session-controller'
+import { assistantRecentSessions } from '../utils/assistant-request-context.js'
+
+/** Product-neutral controls. The host/controller owns effects; this view never mutates sessions. */
+@customElement('ox-assistant-session-toolbar')
+export class AssistantSessionToolbar extends LitElement {
+  @property({ attribute: false }) sessions: AssistantSession[] = []
+  @property() sessionId = ''
+  @property({ type: Boolean }) loading = false
+  @property({ type: Boolean }) disabled = false
+  @property({ type: Boolean }) temporary = false
+  @property() error = ''
+  @property({ type: Boolean }) historyEnabled = false
+  @property({ type: Number }) maxTabs = 5
+  /** 좁은 도크의 문맥 헤더 바로 아래에서 쓰는 밀도. 기능은 줄이지 않는다. */
+  @property({ type: Boolean, reflect: true }) compact = false
+
+  static styles = css`
+    :host { display: block; min-width: 0; }
+    .controls { display: flex; align-items: center; gap: 6px; }
+    button { box-sizing: border-box; height: 28px; font: inherit; font-size: 12px;
+      color: var(--secondary-color, #68747c); border: 0; border-radius: 4px;
+      background: transparent; cursor: pointer; }
+    .tabs { display:flex; flex:1; min-width:0; overflow-x:auto; gap:1px; scrollbar-width:thin; }
+    [role=tab] { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
+      padding: 0 8px; border-bottom: 2px solid transparent; border-radius: 3px 3px 0 0; }
+    [role=tab]:hover { background: color-mix(in srgb, var(--primary-color, #007f87) 7%, transparent); color: var(--primary-color, #007f87); }
+    [aria-selected=true] { color:var(--primary-color, #007f87); border-bottom-color: currentColor; font-weight:600; }
+    .session-new { flex: none; padding: 0 7px; font-weight: 500; white-space: nowrap; }
+    .session-new:hover, .history:hover { color: var(--primary-color, #007f87); background: color-mix(in srgb, var(--primary-color, #007f87) 7%, transparent); }
+    .history { height: 24px; margin: 1px 0 0 4px; padding: 0 5px; font-size: 11px; color: var(--tertiary-color, #88939a); }
+    :host([compact]) .controls { gap: 3px; min-height: 24px; }
+    :host([compact]) button { height: 24px; font-size: 11px; }
+    :host([compact]) [role=tab] { max-width: 132px; padding: 0 6px; border-bottom-width: 1px; }
+    :host([compact]) .session-new { padding: 0 5px; }
+    :disabled { opacity: .5; cursor: default; }
+    :focus-visible { outline: 2px solid var(--primary-color, #007f87); outline-offset: 2px; }
+    p { margin: 6px 0 0; font-size: 12px; overflow-wrap: anywhere; }
+    [role=alert] { color: var(--error-color, #b42318); }
+  `
+
+  private emit(name: string, detail?: unknown) {
+    this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }))
+  }
+
+  render() {
+    const label = i18next.t('ai-assistant.session.history', { defaultValue: '대화 이력' })
+    return html`
+      <div class="controls">
+        ${this.temporary ? nothing : html`<div class="tabs" role="tablist" aria-label=${label}>
+          ${!this.sessionId ? html`<button role="tab" aria-selected="true">${i18next.t('ai-assistant.session.new', { defaultValue: '새 대화' })}</button>` : nothing}
+          ${assistantRecentSessions(this.sessions, this.sessionId, this.historyEnabled ? this.maxTabs : this.sessions.length).map((session, index) => html`<button role="tab" aria-selected=${session.id === this.sessionId ? 'true' : 'false'}
+            ?disabled=${this.disabled || this.loading} title=${session.name || `${label} ${index + 1}`}
+            @click=${() => this.emit('assistant-session-select', { sessionId: session.id })}>${session.name || `${label} ${index + 1}`}</button>`)}
+        </div>`}
+        <button class="session-new" ?disabled=${this.disabled || this.loading || !!this.error}
+          title=${i18next.t('ai-assistant.session.reset-help', { defaultValue: '이전 이력과 작업 내용은 보존하고 새 대화를 시작합니다. 이전 대화는 다음 요청에 포함하지 않습니다.' })}
+          @click=${() => this.emit('assistant-session-reset')}>+ ${i18next.t('ai-assistant.session.new', { defaultValue: '새 대화' })}</button>
+      </div>
+      ${this.historyEnabled ? html`<button class="history" ?disabled=${this.loading || this.disabled}
+        @click=${() => this.emit('assistant-session-history')}>${i18next.t('ai-assistant.session.all', { defaultValue: '전체 이력' })}</button>` : nothing}
+      ${this.loading ? html`<p role="status">${i18next.t('ai-assistant.session.loading', { defaultValue: '대화 이력을 불러오는 중…' })}</p>` : nothing}
+      ${this.error ? html`<p role="alert">${this.error} <button ?disabled=${this.loading || this.disabled}
+        @click=${() => this.emit('assistant-session-retry')}>${i18next.t('ai-assistant.session.retry', { defaultValue: '다시 시도' })}</button></p>` : nothing}
+    `
+  }
+}

package/client/components/chat-input-builder.ts

@@ -96,7 +96,7 @@ export interface AssistantChatInputArgs {
  */
 export function buildAssistantChatInput(args: AssistantChatInputArgs): Record<string, any> {
   if (!args.systemPrompt?.trim()) {
-    throw new Error('[ox-board-ai-chat] systemPrompt is required when the chat talks to assistantChat')
+    throw new Error('[ox-assistant-chat] systemPrompt is required when the chat talks to assistantChat')
   }
 
   return {

package/client/index.ts

@@ -1,10 +1,9 @@
 /**
  * `@things-factory/ai-assistant` — 대화면.
  *
- * `<ox-board-ai-chat>` 은 **이름을 안 바꿨다.** 커스텀 엘리먼트 이름은 소비처 여덟 곳의 템플릿에
- * 박혀 있고, 그것을 같은 커밋에서 함께 바꾸면 무엇이 깨졌는지 못 가린다. 이름은 별도로 옮긴다.
+ * 표준 컴포넌트는 `<ox-assistant-chat>` 이다.
  */
-export * from './components/board-ai-chat.js'
+export * from './components/assistant-chat.js'
 export * from './components/chat-defaults.js'
 export * from './components/markdown.js'
 export * from './components/chat-echo-dedup.js'
@@ -12,3 +11,7 @@ export * from './components/chat-input-builder.js'
 export * from './components/mention-popup.js'
 export * from './components/mention-popup-helpers.js'
 export * from './utils/board-edit-patch.js'
+export * from './utils/assistant-session-controller.js'
+export * from './utils/assistant-session-transport.js'
+export * from './components/assistant-session-toolbar.js'
+export * from './utils/assistant-request-context.js'

package/client/utils/assistant-request-context.ts

@@ -0,0 +1,21 @@
+/** Exact deterministic model signature, not a security hash. Only plain JSON models are supported. */
+export function assistantModelFingerprint(model: unknown): string | undefined {
+  if (model === undefined) return undefined
+  const normalize = (value: any): any => Array.isArray(value) ? value.map(normalize)
+    : value && typeof value === 'object' ? Object.fromEntries(Object.keys(value).sort().map(key => [key, normalize(value[key])])) : value
+  return JSON.stringify(normalize(model))
+}
+export interface AssistantRequestContext {
+  systemPrompt?: string
+  hostContext?: Record<string, unknown>
+}
+export function assistantAutoAskKey(text: string, requestId?: string): string {
+  return requestId ? JSON.stringify([requestId, text]) : text
+}
+export function assistantRecentSessions<T extends { id: string }>(sessions: T[], selected: string, limit: number): T[] {
+  const count = Math.max(1, Math.floor(limit) || 5)
+  const recent = sessions.slice(0, count)
+  const active = sessions.find(session => session.id === selected)
+  if (active && !recent.some(session => session.id === selected)) recent[recent.length - 1] = active
+  return recent
+}

package/client/utils/assistant-session-controller.ts

@@ -0,0 +1,166 @@
+export interface AssistantSession { id: string; name?: string }
+export interface AssistantSessionTarget {
+  /** Account/domain boundary supplied by the authenticated host. */
+  scope: string
+  anchorType: string
+  anchorId: string
+}
+export interface AssistantSessionTransport {
+  list(target: AssistantSessionTarget): Promise<AssistantSession[]>
+  create(target: AssistantSessionTarget): Promise<AssistantSession>
+  isEmpty?(sessionId: string): Promise<boolean>
+}
+export interface AssistantSessionState {
+  target?: AssistantSessionTarget
+  sessions: AssistantSession[]
+  sessionId: string
+  loading: boolean
+  error: string
+  /** Changes on reset, including temporary conversations without a server ID. */
+  revision: number
+}
+const keyOf = (target?: AssistantSessionTarget) => target
+  ? JSON.stringify([target.scope, target.anchorType, target.anchorId]) : ''
+
+/** Domain-neutral session lifecycle. Never deletes history or edits host documents. */
+export class AssistantSessionController {
+  state: AssistantSessionState = { sessions: [], sessionId: '', loading: false, error: '', revision: 0 }
+  private generation = 0
+  private preferred = new Map<string, string>()
+  private pending = new Map<string, Promise<AssistantSession[]>>()
+
+  private transport: AssistantSessionTransport
+  private changed: (state: AssistantSessionState) => void
+  private storage?: Pick<Storage, 'getItem' | 'setItem'>
+  private lazy: boolean
+  private preparing?: Promise<string | undefined>
+  constructor(transport: AssistantSessionTransport, changed: (state: AssistantSessionState) => void,
+    storage?: Pick<Storage, 'getItem' | 'setItem'>, options: { lazy?: boolean } = {}) {
+    this.transport = transport
+    this.changed = changed
+    this.storage = storage
+    this.lazy = !!options.lazy
+  }
+
+  private remember(key: string, id: string) {
+    this.preferred.set(key, id)
+    try { this.storage?.setItem('assistant-session:' + key, id) } catch { /* Storage is optional. */ }
+  }
+
+  private preference(key: string): string | undefined {
+    try { return this.preferred.get(key) || this.storage?.getItem('assistant-session:' + key) || undefined }
+    catch { return this.preferred.get(key) }
+  }
+
+  private publish(patch: Partial<AssistantSessionState>) {
+    this.state = { ...this.state, ...patch }
+    this.changed(this.state)
+  }
+
+  async open(target?: AssistantSessionTarget, force = false): Promise<void> {
+    const key = keyOf(target)
+    if (!force && key === keyOf(this.state.target) && (this.state.loading || this.state.sessionId || (this.lazy && this.state.target && !this.state.error))) return
+    const generation = ++this.generation
+    const snapshot = target ? { ...target } : undefined
+    this.publish({ target: snapshot, sessions: [], sessionId: '', loading: !!target, error: '' })
+    if (!snapshot) return
+    try {
+      let pending = this.pending.get(key)
+      if (!pending) {
+        pending = (async () => {
+          const sessions = await this.transport.list(snapshot)
+          // Failed/malformed reads must not create replacement sessions.
+          if (!Array.isArray(sessions) || sessions.some(session => !session.id)) throw new Error('Invalid session list')
+          if (sessions.length || this.lazy) return [...sessions]
+          // Do not issue a mutation for a target abandoned while the inbox was loading.
+          if (keyOf(this.state.target) !== key || this.pending.get(key) !== pending) throw new Error('Session target changed')
+          const created = await this.transport.create(snapshot)
+          if (!created?.id) throw new Error('Invalid new session')
+          return [created]
+        })()
+        this.pending.set(key, pending)
+        void pending.finally(() => {
+          if (this.pending.get(key) === pending) this.pending.delete(key)
+        }).catch(() => {})
+      }
+      const sessions = await pending
+      if (generation !== this.generation) return
+      const preference = this.preference(key)
+      const sessionId = this.lazy && preference === '__draft__' ? '' : sessions.find(session => session.id === preference)?.id || sessions[0]?.id || ''
+      this.remember(key, sessionId || '__draft__')
+      this.publish({ sessions, sessionId, loading: false })
+    } catch (error) {
+      if (generation === this.generation) this.publish({ loading: false, error: error instanceof Error ? error.message : String(error) })
+    }
+  }
+
+  select(id: string): boolean {
+    if (this.state.loading || !this.state.sessions.some(session => session.id === id)) return false
+    this.remember(keyOf(this.state.target), id)
+    this.publish({ sessionId: id, error: '' })
+    return true
+  }
+
+  async reset(): Promise<void> {
+    if (this.state.loading || this.preparing) return
+    if (this.lazy) {
+      if (!this.state.sessionId) return
+      ++this.generation
+      this.remember(keyOf(this.state.target), '__draft__')
+      this.publish({ sessionId: '', error: '', revision: this.state.revision + 1 })
+      return
+    }
+    const target = this.state.target
+    if (!target) {
+      this.publish({ sessions: [], sessionId: '', error: '', revision: this.state.revision + 1 })
+      return
+    }
+    const generation = ++this.generation
+    const key = keyOf(target)
+    this.publish({ loading: true, error: '' })
+    try {
+      if (this.state.sessionId && this.transport.isEmpty) {
+        const empty = await this.transport.isEmpty(this.state.sessionId)
+        if (generation !== this.generation) return
+        if (empty) { this.publish({ loading: false }); return }
+      }
+      const session = await this.transport.create({ ...target })
+      if (!session?.id) throw new Error('Invalid new session')
+      this.remember(key, session.id)
+      if (generation !== this.generation) return
+      this.publish({ sessions: [session, ...this.state.sessions.filter(existing => existing.id !== session.id)], sessionId: session.id,
+        loading: false, revision: this.state.revision + 1 })
+    } catch (error) {
+      if (generation === this.generation) this.publish({ loading: false, error: error instanceof Error ? error.message : String(error) })
+    }
+  }
+
+  /** Called only for a real send. Adoption happens before hosts render the new ID. */
+  prepareSession(adopt: (id: string) => void = () => {}): Promise<string | undefined> {
+    if (this.state.sessionId) return Promise.resolve(this.state.sessionId)
+    if (!this.state.target) return Promise.resolve(undefined)
+    if (this.state.loading || this.state.error) return Promise.reject(new Error('Session history is not ready'))
+    if (this.preparing) return this.preparing
+    const target = { ...this.state.target }, generation = this.generation
+    const pending = (async () => {
+      const session = await this.transport.create(target)
+      if (generation !== this.generation) throw new Error('Session target changed')
+      if (!session?.id) throw new Error('Invalid new session')
+      adopt(session.id)
+      this.remember(keyOf(target), session.id)
+      this.publish({ sessionId: session.id, sessions: [session, ...this.state.sessions] })
+      return session.id
+    })()
+    this.preparing = pending
+    void pending.finally(() => { if (this.preparing === pending) this.preparing = undefined }).catch(() => {})
+    return pending
+  }
+
+  /** Invalidate pending UI updates at logout/disposal. Server authorization remains authoritative. */
+  clear() {
+    ++this.generation
+    this.preferred.clear()
+    this.pending.clear()
+    this.publish({ target: undefined, sessions: [], sessionId: '', loading: false, error: '', revision: this.state.revision + 1 })
+  }
+}

package/client/utils/assistant-session-transport.ts

@@ -0,0 +1,34 @@
+import { client } from '@operato/graphql'
+import gql from 'graphql-tag'
+import type { AssistantSessionTransport } from './assistant-session-controller'
+
+/** Existing authorized session API; does not introduce a product-specific storage format. */
+export const assistantSessionTransport: AssistantSessionTransport = {
+  async isEmpty(sessionId) {
+    const result = await client.query({
+      query: gql`query($id:String!){chatMessages(sessionId:$id,limit:1){id}}`,
+      variables: { id: sessionId }, fetchPolicy: 'no-cache'
+    })
+    if (result.errors?.length) throw new Error(result.errors[0].message)
+    if (!Array.isArray(result.data?.chatMessages)) throw new Error('대화 내용을 확인하지 못했습니다.')
+    return result.data.chatMessages.length === 0
+  },
+  async list(target) {
+    const result = await client.query({
+      query: gql`query($type:String!,$id:String!){chatSessionInbox(anchorType:$type,anchorId:$id,mineOnly:true,limit:100){id name}}`,
+      variables: { type: target.anchorType, id: target.anchorId }, fetchPolicy: 'no-cache'
+    })
+    if (result.errors?.length) throw new Error(result.errors[0].message)
+    if (!Array.isArray(result.data?.chatSessionInbox)) throw new Error('대화 목록을 불러오지 못했습니다.')
+    return result.data.chatSessionInbox
+  },
+  async create(target) {
+    const result = await client.mutate({
+      mutation: gql`mutation($type:String!,$id:String!){createAISession(anchorType:$type,anchorId:$id){id name}}`,
+      variables: { type: target.anchorType, id: target.anchorId }
+    })
+    if (result.errors?.length) throw new Error(result.errors[0].message)
+    if (!result.data?.createAISession?.id) throw new Error('대화를 만들지 못했습니다.')
+    return result.data.createAISession
+  }
+}

package/dist-client/components/{board-ai-chat.d.ts → assistant-chat.d.ts}

@@ -1,5 +1,5 @@
 /**
- * <ox-board-ai-chat> — AI 주도 보드 모델링 채팅 컴포넌트 (Lit).
+ * <ox-assistant-chat> — AI 도우미 채팅 컴포넌트 (Lit).
  *
  * 입력:
  *   - sessionId: 영속 ChatSession 식별자 (없으면 ad-hoc 모드, 메시지 영속 안 됨)
@@ -14,12 +14,25 @@
  * 모드 전환은 컨테이너 (워크스페이스) 의 책임. 이 컴포넌트는 자체로 풀 채팅 UX.
  */
 import '@material/web/icon/icon.js';
+import './assistant-session-toolbar.js';
+import { type AssistantRequestContext } from '../utils/assistant-request-context.js';
 import { LitElement } from 'lit';
 import './mention-popup.js';
 import { type FilterResult } from './mention-popup.js';
-export declare class OxBoardAIChat extends LitElement {
+export interface ChatAttachment {
+    id: string;
+    file: File;
+    name: string;
+    size: number;
+    type: string;
+    url: string;
+    base64?: string;
+}
+export declare class OxAssistantChat extends LitElement {
     /** 영속 세션 id. 없으면 ad-hoc (메시지 영속 안 됨). */
     sessionId?: string;
+    prepareSession?: (adopt: (id: string) => void) => Promise<string | undefined>;
+    private adoptingSession;
     /**
      * 보드의 모든 ChatSession 리스트 — 다중 세션 활성화 시 탭 UI 로 표시.
      *
@@ -138,6 +151,8 @@ export declare class OxBoardAIChat extends LitElement {
      * 값이 들어오면 그 문장을 입력으로 삼아 한 번 전송하고 비운다(같은 질문이 반복 전송되지 않게).
      */
     autoAsk?: string;
+    autoAskRequestId?: string;
+    contextProvider?: () => AssistantRequestContext;
     /**
      * 빈 화면의 제목·부제 — **호스트가 자기 말로 준다.**
      *
@@ -176,6 +191,17 @@ export declare class OxBoardAIChat extends LitElement {
     private lastFailedInput?;
     /** 되돌려진 patch id 들 — 한 번 revert 한 patch 는 버튼 비활성 */
     private revertedPatchIds;
+    /** 첨부된 파일/이미지 목록 */
+    private attachments;
+    /** 드래그 오버 상태 (시각 피드백용) */
+    private dragOver;
+    private onAttachFiles;
+    private readFileAsBase64;
+    private removeAttachment;
+    private onComposerPaste;
+    private onComposerDragOver;
+    private onComposerDragLeave;
+    private onComposerDrop;
     /** mini action — 인라인 예시 토글 */
     private examplesOpen;
     /** 복사 toast 표시 상태 */
@@ -359,6 +385,7 @@ export declare class OxBoardAIChat extends LitElement {
      * 실행 결과는 호스트가 **대화에 기록**한다 — 누가 무엇을 실행했는지가 협의 이력에 남아야 한다.
      */
     private renderProposals;
+    private onChoiceClick;
     /**
      * 제안 식별 키 — 같은 조치를 두 번 실행하지 않도록 **효과**(명령·대상·인자)로만 만든다.
      *
@@ -426,6 +453,6 @@ export declare class OxBoardAIChat extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'ox-board-ai-chat': OxBoardAIChat;
+        'ox-assistant-chat': OxAssistantChat;
     }
 }