@things-factory/ai-assistant 10.1.8 → 10.1.13

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/board-ai-chat.ts

@@ -14,6 +14,8 @@
  * 모드 전환은 컨테이너 (워크스페이스) 의 책임. 이 컴포넌트는 자체로 풀 채팅 UX.
  */
 import '@material/web/icon/icon.js'
+import './assistant-session-toolbar.js'
+import { assistantAutoAskKey, assistantModelFingerprint, type AssistantRequestContext } from '../utils/assistant-request-context.js'
 
 import { LitElement, css, html, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -225,6 +227,8 @@ export class OxBoardAIChat extends LitElement {
   /** 영속 세션 id. 없으면 ad-hoc (메시지 영속 안 됨). */
   @property({ type: String, attribute: 'session-id' })
   sessionId?: string
+  @property({ attribute: false }) prepareSession?: (adopt: (id: string) => void) => Promise<string | undefined>
+  private adoptingSession = false
 
   /**
    * 보드의 모든 ChatSession 리스트 — 다중 세션 활성화 시 탭 UI 로 표시.
@@ -385,6 +389,8 @@ export class OxBoardAIChat extends LitElement {
    */
   @property({ attribute: false })
   autoAsk?: string
+  @property() autoAskRequestId?: string
+  @property({ attribute: false }) contextProvider?: () => AssistantRequestContext
 
   /**
    * 빈 화면의 제목·부제 — **호스트가 자기 말로 준다.**
@@ -1842,13 +1848,17 @@ export class OxBoardAIChat extends LitElement {
      * sessionId 가 붙기 전에 보내면 대화에 남지 않으므로 세션이 준비될 때까지 기다린다.
      * 같은 문장을 두 번 보내지 않도록 보낸 값을 기억한다 — 재렌더마다 updated 가 다시 돌기 때문이다.
      */
-    if (this.autoAsk && this.autoAsk !== this._autoAsked && this.sessionId && !this.busy) {
-      this._autoAsked = this.autoAsk
+    if (this.autoAsk && assistantAutoAskKey(this.autoAsk, this.autoAskRequestId) !== this._autoAsked && (this.sessionId || this.prepareSession) && !this.busy) {
+      this._autoAsked = assistantAutoAskKey(this.autoAsk, this.autoAskRequestId)
       this.input = this.autoAsk
       this.send()
     }
 
-    if (changed.has('sessionId')) {
+    if (changed.has('sessionId') && this.adoptingSession) {
+      this.adoptingSession = false
+      this._startPresence()
+      this._startMessageSubscription()
+    } else if (changed.has('sessionId')) {
       // sessionId 가 바뀌면 (set / unset / 다른 보드 전환) 이전 세션의 모든 클라이언트
       // 컨텍스트 정리 — lines / pickedMentions / errorMessage / input 모두 새지 않도록.
       // 보드 단위 격리 (ChatSession 1:1 boardId) 가 깨지는 회귀 방지.
@@ -2529,38 +2539,11 @@ export class OxBoardAIChat extends LitElement {
   private renderSessionTabs() {
     if (!this.sessions || this.sessions.length === 0) return nothing
     return html`
-      <div class="session-tabs" role="tablist">
-        ${this.sessions.map((s, i) => {
-          const isActive = s.id === this.sessionId
-          const fallback = i18next.t('ai-assistant.text.session-tab-label', {
-            n: i + 1,
-            defaultValue: `세션 ${i + 1}`
-          })
-          const label = s.name?.trim() || fallback
-          const tooltip = s.createdAt
-            ? `${label} · ${new Date(s.createdAt).toLocaleString()}`
-            : label
-          return html`
-            <button
-              class="session-tab ${isActive ? 'active' : ''}"
-              role="tab"
-              aria-selected=${isActive ? 'true' : 'false'}
-              title=${tooltip}
-              @click=${() => this._onSessionTabClick(s.id)}>
-              ${label}
-            </button>
-          `
-        })}
-        <button
-          class="session-tab-new"
-          title=${i18next.t('ai-assistant.button.new-chat', {
-            defaultValue: '새 대화'
-          })}
-          @click=${this._onSessionCreateClick}>
-          <md-icon>add</md-icon>
-          <span>${i18next.t('ai-assistant.button.new-chat', { defaultValue: '새 대화' })}</span>
-        </button>
-      </div>
+      <ox-assistant-session-toolbar style="padding:8px 12px" .sessions=${this.sessions}
+        .sessionId=${this.sessionId || ''} .disabled=${this.busy}
+        @assistant-session-select=${(event: CustomEvent) => { event.stopPropagation(); this._onSessionTabClick(event.detail.sessionId) }}
+        @assistant-session-reset=${(event: Event) => { event.stopPropagation(); this._onSessionCreateClick() }}
+      ></ox-assistant-session-toolbar>
     `
   }
 
@@ -2598,6 +2581,7 @@ export class OxBoardAIChat extends LitElement {
   }
 
   private _onSessionCreateClick = () => {
+    if (this.busy || this.lines.length === 0) return
     this.dispatchEvent(
       new CustomEvent('session-create', {
         bubbles: true,
@@ -3141,6 +3125,32 @@ export class OxBoardAIChat extends LitElement {
   private async send() {
     const text = this.input.trim()
     if (!text || this.busy) return
+    if (!this.sessionId && this.prepareSession) {
+      this.busy = true
+      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)
+        this.busy = false
+        return
+      }
+      this.busy = false
+    }
+
+    let requestContext: AssistantRequestContext
+    let liveBoard: any
+    let requestBase: any
+    try {
+      const provided = this.contextProvider?.() || {}
+      requestContext = structuredClone({ systemPrompt: this.systemPrompt, hostContext: this.hostContext, ...provided })
+      liveBoard = structuredClone(this.boardProvider ? this.boardProvider() : this.currentBoard)
+      requestBase = { version: 1, sessionId: this.sessionId, hostContext: requestContext.hostContext,
+        modelFingerprint: assistantModelFingerprint(liveBoard) }
+    } catch (error) {
+      this.errorMessage = error instanceof Error ? error.message : String(error)
+      return
+    }
 
     // pickedMentions / pickedUserMentions 에서 현재 텍스트에 실제 #/@ token 으로
     // 등장하는 것만 추출 — 지운 토큰 제외. inline 마커로 content 에 주입.
@@ -3179,8 +3189,6 @@ export class OxBoardAIChat extends LitElement {
 
       // 라이브 보드 우선 — 호스트의 캔버스가 사용자 수작업 편집을 들고 있을 수 있음.
       // boardProvider 가 있으면 send 시점에 그것을 pull, 없으면 정적 currentBoard.
-      const liveBoard = this.boardProvider ? this.boardProvider() : this.currentBoard
-
       // mentions 는 위에서 이미 계산해 user line 에 thread — 그대로 mutation 입력으로 재사용.
       const neutral = this.chatEndpoint === 'assistantChat'
       const result = await client.mutate({
@@ -3190,9 +3198,9 @@ export class OxBoardAIChat extends LitElement {
             ? buildAssistantChatInput({
                 sessionId: this.sessionId,
                 history,
-                systemPrompt: this.systemPrompt!,
+                systemPrompt: requestContext.systemPrompt!,
                 truncateAfterMessageId: this._truncateAfterId,
-                hostContext: this.hostContext,
+                hostContext: requestContext.hostContext,
                 toolCategories: this.toolCategories,
                 requireGroundingTools: this.requireGroundingTools
               })
@@ -3202,7 +3210,7 @@ export class OxBoardAIChat extends LitElement {
                 liveBoard,
                 scopes: this.scopes,
                 truncateAfterMessageId: this._truncateAfterId,
-                hostContext: this.hostContext,
+                hostContext: requestContext.hostContext,
                 toolCategories: this.toolCategories,
                 boardTools: this.boardTools,
                 requireGroundingTools: this.requireGroundingTools,
@@ -3246,6 +3254,7 @@ export class OxBoardAIChat extends LitElement {
           new CustomEvent('board-edit-patch', {
             detail: {
               patch: out.patch,
+              requestBase,
               summary: out.patch.summary,
               confidence: out.patch.confidence,
               patchId: out.patchId,
@@ -3260,7 +3269,7 @@ export class OxBoardAIChat extends LitElement {
       if (Array.isArray(out.actions) && out.actions.length > 0) {
         this.dispatchEvent(
           new CustomEvent('board-action-execute', {
-            detail: { actions: out.actions, sessionId: out.sessionId },
+            detail: { actions: out.actions, sessionId: out.sessionId, requestBase },
             bubbles: true,
             composed: true
           })

package/client/index.ts

@@ -12,3 +12,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/assistant-session-toolbar.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+import type { AssistantSession } from '../utils/assistant-session-controller';
+/** Product-neutral controls. The host/controller owns effects; this view never mutates sessions. */
+export declare class AssistantSessionToolbar extends LitElement {
+    sessions: AssistantSession[];
+    sessionId: string;
+    loading: boolean;
+    disabled: boolean;
+    temporary: boolean;
+    error: string;
+    historyEnabled: boolean;
+    maxTabs: number;
+    /** 좁은 도크의 문맥 헤더 바로 아래에서 쓰는 밀도. 기능은 줄이지 않는다. */
+    compact: boolean;
+    static styles: import("lit").CSSResult;
+    private emit;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist-client/components/assistant-session-toolbar.js

@@ -0,0 +1,109 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { assistantRecentSessions } from '../utils/assistant-request-context.js';
+/** Product-neutral controls. The host/controller owns effects; this view never mutates sessions. */
+let AssistantSessionToolbar = class AssistantSessionToolbar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.sessions = [];
+        this.sessionId = '';
+        this.loading = false;
+        this.disabled = false;
+        this.temporary = false;
+        this.error = '';
+        this.historyEnabled = false;
+        this.maxTabs = 5;
+        /** 좁은 도크의 문맥 헤더 바로 아래에서 쓰는 밀도. 기능은 줄이지 않는다. */
+        this.compact = false;
+    }
+    static { this.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); }
+  `; }
+    emit(name, detail) {
+        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}
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], AssistantSessionToolbar.prototype, "sessions", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], AssistantSessionToolbar.prototype, "sessionId", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], AssistantSessionToolbar.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], AssistantSessionToolbar.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], AssistantSessionToolbar.prototype, "temporary", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], AssistantSessionToolbar.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], AssistantSessionToolbar.prototype, "historyEnabled", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], AssistantSessionToolbar.prototype, "maxTabs", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], AssistantSessionToolbar.prototype, "compact", void 0);
+AssistantSessionToolbar = __decorate([
+    customElement('ox-assistant-session-toolbar')
+], AssistantSessionToolbar);
+export { AssistantSessionToolbar };
+//# sourceMappingURL=assistant-session-toolbar.js.map

package/dist-client/components/assistant-session-toolbar.js.map

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