@things-factory/ai-dashboard 0.0.0-stage → 10.1.213

package/client/bootstrap.ts

@@ -0,0 +1,25 @@
+/*
+ * The conversation's dashboard card (ADR-0160 decision 9): its preview under the card, and pressing it saves the stored
+ * proposal to the person's dashboard. Registered here, by the package that declares the tool - the dock knows no kind.
+ */
+import { i18next } from '@operato/i18n'
+import { registerProposalHandler, registerProposalView } from '@things-factory/ai-assistant/dist-client/index.js'
+
+import './components/proposal-preview.js'
+import { cardApi, dashboardChanged } from './utils/card-api.js'
+
+const TOOL = 'proposeDashboardCard'
+
+export default function bootstrap() {
+  registerProposalView(TOOL, { previewTag: 'ai-dashboard-proposal-preview', runLabelKey: 'ai-dashboard.preview.save', runLabel: 'Save to my dashboard' })
+  registerProposalHandler(TOOL, async (proposal, context) => {
+    if (!context.sessionId || !proposal?.key) return { verdict: 'unavailable', errorCode: 'no-conversation' }
+    const saved = await cardApi.saveProposal(context.sessionId, proposal.key)
+    dashboardChanged()
+    return {
+      verdict: 'accepted',
+      applied: 1,
+      note: String(i18next.t(saved.version > 1 ? 'ai-dashboard.preview.saved-version' : 'ai-dashboard.preview.saved', { name: proposal.card?.name ?? '', version: saved.version }))
+    }
+  })
+}

package/client/components/card-dialogs.ts

@@ -0,0 +1,422 @@
+/*
+ * The small forms a card opens - what to change with the assistant, a new name, whom to share it with, and its
+ * versions (ADR-0160 decisions 7, 9). Each changes one card through its own door and tells an open dashboard.
+ */
+import '@material/web/icon/icon.js'
+import '@material/web/button/filled-button.js'
+import '@material/web/button/text-button.js'
+
+import { LitElement, css, html, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { notify, openPopup } from '@operato/layout'
+import { askAssistant } from '@things-factory/ai-assistant/dist-client/index.js'
+
+import { cardApi, dashboardChanged, type CardItem, type CardShare } from '../utils/card-api.js'
+
+const t = (key: string, options: Record<string, unknown> = {}) => String(i18next.t(key, options))
+
+const FormStyles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    padding: 16px 20px 20px;
+    color: var(--ui-ink, var(--md-sys-color-on-surface));
+    font-size: var(--ui-t-body, 13px);
+    line-height: 1.5;
+  }
+
+  p.lead {
+    margin: 0;
+    color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+  }
+
+  textarea,
+  input[type='text'],
+  input[type='search'] {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 9px 12px;
+    border: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));
+    border-radius: 8px;
+    background: var(--ui-panel, var(--md-sys-color-surface-container-lowest));
+    color: inherit;
+    font: inherit;
+  }
+
+  textarea {
+    min-height: 88px;
+    resize: vertical;
+  }
+
+  textarea:focus,
+  input:focus {
+    outline: 2px solid color-mix(in srgb, var(--ui-accent, var(--md-sys-color-primary)) 40%, transparent);
+    border-color: var(--ui-accent, var(--md-sys-color-primary));
+  }
+
+  .hints {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .hints button {
+    padding: 4px 10px;
+    border: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));
+    border-radius: 999px;
+    background: transparent;
+    color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+    font: inherit;
+    font-size: var(--ui-t-small, 12px);
+    cursor: pointer;
+  }
+
+  .hints button:hover {
+    border-color: var(--ui-accent, var(--md-sys-color-primary));
+    color: var(--ui-accent, var(--md-sys-color-primary));
+  }
+
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+
+  h5 {
+    margin: 6px 0 0;
+    font-size: var(--ui-t-small, 12px);
+    font-weight: 600;
+    color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+    text-transform: none;
+  }
+
+  label.option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 10px;
+    border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+    border-radius: 8px;
+    cursor: pointer;
+  }
+
+  label.option small {
+    margin-left: auto;
+    color: var(--ui-faint, var(--md-sys-color-on-surface-variant));
+  }
+
+  .people {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .person {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    border-radius: 8px;
+    background: var(--ui-panel-2, var(--md-sys-color-surface-container-low));
+    --md-icon-size: 16px;
+  }
+
+  .person small {
+    color: var(--ui-faint, var(--md-sys-color-on-surface-variant));
+  }
+
+  .person button,
+  .found button {
+    margin-left: auto;
+    border: 0;
+    background: transparent;
+    color: var(--ui-accent, var(--md-sys-color-primary));
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .found {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+    border-radius: 8px;
+  }
+
+  .found div {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+  }
+
+  .found div + div {
+    border-top: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+  }
+
+  .note {
+    margin: 0;
+    font-size: var(--ui-t-small, 12px);
+    color: var(--ui-faint, var(--md-sys-color-on-surface-variant));
+  }
+
+  ol.versions {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  ol.versions li {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 12px;
+    border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+    border-radius: 8px;
+  }
+
+  ol.versions .v {
+    flex: none;
+    min-width: 36px;
+    font-weight: 650;
+    font-variant-numeric: tabular-nums;
+    color: var(--ui-accent, var(--md-sys-color-primary));
+  }
+
+  ol.versions .what {
+    flex: 1;
+    min-width: 0;
+  }
+
+  ol.versions small {
+    display: block;
+    color: var(--ui-faint, var(--md-sys-color-on-surface-variant));
+  }
+`
+
+/** What to change in a card - sent to the conversation beside the page with the card picked, as a screen request. */
+@customElement('ai-dashboard-card-ai-form')
+export class CardAiForm extends localize(i18next)(LitElement) {
+  static styles = FormStyles
+  @property({ attribute: false }) card!: CardItem
+  @state() private text = ''
+
+  render() {
+    const hints = ['ai-dashboard.ai.hint-period', 'ai-dashboard.ai.hint-top', 'ai-dashboard.ai.hint-line', 'ai-dashboard.ai.hint-table']
+    return html`<p class="lead">${t('ai-dashboard.ai.lead', { name: this.card.name })}</p>
+      <textarea .value=${this.text} placeholder=${t('ai-dashboard.ai.placeholder')} @input=${(e: any) => (this.text = e.target.value)} @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && (e.metaKey || e.ctrlKey) && this.send()}></textarea>
+      <div class="hints">${hints.map(key => html`<button @click=${() => (this.text = t(key))}>${t(key)}</button>`)}</div>
+      <div class="actions">
+        <md-text-button @click=${() => this.close()}>${t('ai-dashboard.button.cancel')}</md-text-button>
+        <md-filled-button ?disabled=${!this.text.trim()} @click=${() => this.send()}>${t('ai-dashboard.ai.send')}</md-filled-button>
+      </div>`
+  }
+
+  private close() {
+    this.dispatchEvent(new CustomEvent('done', { bubbles: true, composed: true }))
+  }
+
+  private send() {
+    if (!this.text.trim()) return
+    /* Closed first: the dock opens over the page, and a popup that is no longer the top one refuses to close. */
+    this.close()
+    askAssistant({
+      ask: t('ai-dashboard.ai.ask', { name: this.card.name, version: this.card.version, change: this.text.trim() }),
+      selection: { title: t('ai-dashboard.title'), list: 'dashboardCards', records: [{ id: this.card.id, label: this.card.name }] }
+    })
+  }
+}
+
+/** A card's new name - a new version. */
+@customElement('ai-dashboard-card-rename-form')
+export class CardRenameForm extends localize(i18next)(LitElement) {
+  static styles = FormStyles
+  @property({ attribute: false }) card!: CardItem
+  @state() private name = ''
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.name = this.card?.name ?? ''
+  }
+
+  render() {
+    return html`<input type="text" .value=${this.name} maxlength="100" @input=${(e: any) => (this.name = e.target.value)} @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.save()} />
+      <div class="actions">
+        <md-text-button @click=${() => this.close()}>${t('ai-dashboard.button.cancel')}</md-text-button>
+        <md-filled-button ?disabled=${!this.name.trim() || this.name.trim() === this.card.name} @click=${() => this.save()}>${t('ai-dashboard.button.save')}</md-filled-button>
+      </div>`
+  }
+
+  private close() {
+    this.dispatchEvent(new CustomEvent('done', { bubbles: true, composed: true }))
+  }
+
+  private async save() {
+    try {
+      await cardApi.rename(this.card.id, this.name.trim())
+      dashboardChanged()
+      this.close()
+    } catch (error: any) {
+      notify({ level: 'error', message: error?.message ?? String(error) })
+    }
+  }
+}
+
+/** Whom one's own card is shared with - the whole domain, one's own departments, people found by name. */
+@customElement('ai-dashboard-card-share-form')
+export class CardShareForm extends localize(i18next)(LitElement) {
+  static styles = FormStyles
+  @property({ attribute: false }) card!: CardItem
+  @state() private options?: Awaited<ReturnType<typeof cardApi.shareOptions>>
+  @state() private shares: CardShare[] = []
+  @state() private found: { id: string; name: string; note?: string }[] = []
+  @state() private search = ''
+  private searching?: ReturnType<typeof setTimeout>
+
+  async connectedCallback() {
+    super.connectedCallback()
+    this.shares = [...(this.card?.shares ?? [])].map(({ scope, targetId, targetName }) => ({ scope, targetId, targetName }))
+    try {
+      this.options = await cardApi.shareOptions()
+    } catch (error: any) {
+      notify({ level: 'error', message: error?.message ?? String(error) })
+    }
+  }
+
+  private has(scope: string, id: string) {
+    return this.shares.some(one => one.scope === scope && one.targetId === id)
+  }
+
+  private toggle(share: CardShare, on: boolean) {
+    this.shares = on ? [...this.shares.filter(one => !(one.scope === share.scope && one.targetId === share.targetId)), share] : this.shares.filter(one => !(one.scope === share.scope && one.targetId === share.targetId))
+  }
+
+  private find(text: string) {
+    this.search = text
+    clearTimeout(this.searching)
+    this.searching = setTimeout(async () => {
+      try {
+        this.found = text.trim() ? await cardApi.people(text.trim()) : []
+      } catch {
+        this.found = []
+      }
+    }, 250)
+  }
+
+  render() {
+    const options = this.options
+    const people = this.shares.filter(one => one.scope === 'USER')
+    return html`<p class="lead">${t('ai-dashboard.share.lead')}</p>
+      ${options
+        ? html`<h5>${t('ai-dashboard.share.everyone-title')}</h5>
+            <label class="option">
+              <input type="checkbox" .checked=${this.has('DOMAIN', options.domainId)} @change=${(e: any) => this.toggle({ scope: 'DOMAIN', targetId: options.domainId, targetName: options.domainName }, e.target.checked)} />
+              <md-icon>domain</md-icon>${t('ai-dashboard.share.everyone-in', { name: options.domainName })}
+            </label>
+            ${options.departmentsAvailable && options.departments.length
+              ? html`<h5>${t('ai-dashboard.share.departments')}</h5>
+                  ${options.departments.map(
+                    one => html`<label class="option">
+                      <input type="checkbox" .checked=${this.has('DEPARTMENT', one.id)} @change=${(e: any) => this.toggle({ scope: 'DEPARTMENT', targetId: one.id, targetName: one.name }, e.target.checked)} />
+                      <md-icon>groups</md-icon>${one.name}<small>${t('ai-dashboard.share.department-members')}</small>
+                    </label>`
+                  )}`
+              : nothing}
+            <h5>${t('ai-dashboard.share.people')}</h5>
+            ${people.length
+              ? html`<div class="people">
+                  ${people.map(one => html`<div class="person"><md-icon>person</md-icon>${one.targetName ?? one.targetId}<button @click=${() => this.toggle(one, false)}>${t('ai-dashboard.share.remove')}</button></div>`)}
+                </div>`
+              : nothing}
+            ${options.peopleAvailable
+              ? html`<input type="search" .value=${this.search} placeholder=${t('ai-dashboard.share.find-person')} @input=${(e: any) => this.find(e.target.value)} />
+                  ${this.found.length
+                    ? html`<div class="found">
+                        ${this.found
+                          .filter(one => !this.has('USER', one.id))
+                          .map(one => html`<div><md-icon>person_add</md-icon>${one.name} ${one.note ? html`<small>${one.note}</small>` : nothing}<button @click=${() => this.toggle({ scope: 'USER', targetId: one.id, targetName: one.name }, true)}>${t('ai-dashboard.share.add')}</button></div>`)}
+                      </div>`
+                    : nothing}`
+              : html`<p class="note">${t('ai-dashboard.share.people-unavailable')}</p>`}
+            <p class="note">${t('ai-dashboard.share.rule')}</p>`
+        : nothing}
+      <div class="actions">
+        <md-text-button @click=${() => this.close()}>${t('ai-dashboard.button.cancel')}</md-text-button>
+        <md-filled-button ?disabled=${!options} @click=${() => this.save()}>${t('ai-dashboard.button.save')}</md-filled-button>
+      </div>`
+  }
+
+  private close() {
+    this.dispatchEvent(new CustomEvent('done', { bubbles: true, composed: true }))
+  }
+
+  private async save() {
+    try {
+      await cardApi.share(this.card.id, this.shares)
+      notify({ level: 'info', message: t(this.shares.length ? 'ai-dashboard.text.shared' : 'ai-dashboard.text.private', { name: this.card.name }) })
+      dashboardChanged()
+      this.close()
+    } catch (error: any) {
+      notify({ level: 'error', message: error?.message ?? String(error) })
+    }
+  }
+}
+
+/** One's own card's versions, newest first - an earlier one comes back as a new version. */
+@customElement('ai-dashboard-card-versions')
+export class CardVersions extends localize(i18next)(LitElement) {
+  static styles = FormStyles
+  @property({ attribute: false }) card!: CardItem
+  @state() private versions?: Awaited<ReturnType<typeof cardApi.versions>>
+
+  async connectedCallback() {
+    super.connectedCallback()
+    try {
+      this.versions = await cardApi.versions(this.card.id)
+    } catch (error: any) {
+      notify({ level: 'error', message: error?.message ?? String(error) })
+    }
+  }
+
+  render() {
+    const view = (definition: any) => t(`ai-dashboard.view.${definition?.view?.kind ?? 'table'}`)
+    return html`<p class="lead">${t('ai-dashboard.versions.lead')}</p>
+      <ol class="versions">
+        ${(this.versions ?? []).map(
+          one => html`<li>
+            <span class="v">v${one.version}</span>
+            <span class="what">${one.name}<small>${view(one.definition)} · ${one.creatorName ?? ''} · ${one.createdAt ? new Date(one.createdAt).toLocaleString(i18next.language) : ''}</small></span>
+            ${one.version === this.card.version
+              ? html`<small>${t('ai-dashboard.versions.current')}</small>`
+              : html`<md-text-button @click=${() => this.restore(one.version)}>${t('ai-dashboard.versions.restore')}</md-text-button>`}
+          </li>`
+        )}
+      </ol>`
+  }
+
+  private async restore(version: number) {
+    try {
+      await cardApi.restore(this.card.id, version)
+      notify({ level: 'info', message: t('ai-dashboard.text.restored', { version }) })
+      dashboardChanged()
+      this.dispatchEvent(new CustomEvent('done', { bubbles: true, composed: true }))
+    } catch (error: any) {
+      notify({ level: 'error', message: error?.message ?? String(error) })
+    }
+  }
+}
+
+function open(template: unknown, title: string, size: 'small' | 'medium' = 'small') {
+  const popup: any = openPopup(html`<div @done=${() => popup?.close?.()}>${template}</div>`, { backdrop: true, size, title })
+  return popup
+}
+
+export const openCardAiPrompt = (card: CardItem) => open(html`<ai-dashboard-card-ai-form .card=${card}></ai-dashboard-card-ai-form>`, t('ai-dashboard.card.ai'), 'medium')
+export const openCardRename = (card: CardItem) => open(html`<ai-dashboard-card-rename-form .card=${card}></ai-dashboard-card-rename-form>`, t('ai-dashboard.card.rename'))
+export const openCardShare = (card: CardItem) => open(html`<ai-dashboard-card-share-form .card=${card}></ai-dashboard-card-share-form>`, t('ai-dashboard.share.title', { name: card.name }), 'medium')
+export const openCardVersions = (card: CardItem) => open(html`<ai-dashboard-card-versions .card=${card}></ai-dashboard-card-versions>`, t('ai-dashboard.card.versions'), 'medium')