@brightspot/ui 3.0.1-cms-ui-migration.2 → 3.0.1-cms-ui-migration.4

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/ai_inline_manager/views/AIInlineView.ts

@@ -1,1019 +0,0 @@
-import { getPluginState } from '../../../utilities'
-import { html, render, TemplateResult } from 'lit-html'
-import { DOMParser as ProseDOMParser, Schema } from 'prosemirror-model'
-import { EditorView } from 'prosemirror-view'
-import { getLegacyHTMLTextForProsemirror } from '../../../codemirror-shim'
-import create from '../../../../../../../dom/create'
-import moment from 'moment'
-import Cookies from 'js-cookie'
-import DOMPurify from 'dompurify'
-
-if (!window.BRIGHTSPOT?.ui.cms.enableV5UI) {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  await import('./AIInline.less')
-}
-
-const BASE_CLASS = 'ProseMirrorAIInline-container'
-const PROMPT_PLACEHOLDER = window.RTE_PROMPT_PLACEHOLDER
-const PROMPT_PREFIX = window.RTE_PROMPT_PREFIX
-const PROMPT_RETRY = window.RTE_PROMPT_RETRY
-const WORKING_ON_IT_TEXT = window.RTE_WORKING_ON_IT
-const ACCEPT_BUTTON_TEXT = window.RTE_ACCEPT
-const DISCARD_BUTTON_TEXT = window.RTE_DISCARD
-const TRY_AGAIN_BUTTON_TEXT = window.RTE_TRY_AGAIN
-const COLLAPSED_CLASS = 'collapsed'
-const CHAT_PAGE_RESPONSES_PATH = (
-  window.BRIGHTSPOT?.web?.pagePaths as Record<string, string>
-)?.['com.psddev.ai.chat.ChatPageResponses']
-const PROMPT_SUGGESTIONS_PATH = (
-  window.BRIGHTSPOT?.web?.pagePaths as Record<string, string>
-)?.['com.psddev.ai.chat.PromptPage']
-
-interface CompliantTagNameMap extends Map<string, string> {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [key: string]: any
-}
-
-/**
- * AI Inline widget for the ProseMirror RTE editor.
- * Provides AI-powered text suggestions and editing functionality.
- */
-class AIInlineView {
-  private focused = false
-  private isLoading = false
-  private retry = false
-  private suggestionsFetched = false
-  private readonly editorView: EditorView
-  private readonly myKey: string
-  private readonly userLabel: string
-  private readonly userId: string
-  private readonly compliantTagNameMap: CompliantTagNameMap
-  private readonly dom: HTMLDivElement
-  private readonly field: string
-  private readonly textArea: HTMLTextAreaElement | null
-  private readonly loadingOverlay: HTMLDivElement
-  private readonly loadingPromptEle: HTMLDivElement | null
-  private readonly objectId?: string
-  private readonly typeId?: string
-  private readonly contentState?: string
-  private inputEle?: HTMLInputElement
-  private submitButtonEle?: HTMLButtonElement
-  private acceptRejectContainerEle?: HTMLDivElement
-  private suggestionsContainer: HTMLElement | null = null
-  private sendTrackingEvent?: (interaction: string) => void
-  private chatId?: string
-  private responseId?: string
-  private lastPrompt?: string
-  private lastSelectedContent?: string
-  private lastSelectionFrom?: number
-  private lastSelectionTo?: number
-
-  constructor(
-    editorView: EditorView,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    myKey: any,
-    userLabel: string,
-    userId: string,
-    compliantTagNameMap: CompliantTagNameMap,
-  ) {
-    this.editorView = editorView
-    this.myKey = myKey
-    this.userLabel = userLabel
-    this.userId = userId
-    this.compliantTagNameMap = compliantTagNameMap
-
-    const editorDom = this.editorView.dom
-    const contentForm =
-      editorDom.parentElement?.closest<HTMLElement>('.ContentEdit')
-    const cig = editorDom.closest<HTMLElement>('.CIG')
-    const cigRowParent = editorDom.closest<HTMLElement>('.CIG-row')
-
-    this.objectId = cig?.dataset?.objectId
-    this.typeId = contentForm?.dataset?.typeId
-    this.field = cigRowParent?.dataset?.field || ''
-    this.contentState = contentForm?.querySelector<HTMLInputElement>(
-      `input[name="${contentForm?.dataset?.contentId}/oldValues"]`,
-    )?.value
-    this.textArea = cigRowParent?.querySelector('textarea') || null
-
-    this.dom = create('div', {
-      class: `${BASE_CLASS} ${COLLAPSED_CLASS}`,
-    })
-
-    render(this.template(), this.dom)
-
-    this.inputEle =
-      this.dom.querySelector<HTMLInputElement>(
-        `input.${BASE_CLASS}-inputContainer-input`,
-      ) ?? undefined
-
-    // Create loading overlay as a sibling element (not inside the container)
-    this.loadingOverlay = create(
-      'div',
-      { class: 'ProseMirrorAIInline-loadingOverlay' },
-      [
-        create('div', { class: 'ProseMirrorAIInline-loadingOverlay-prompt' }),
-        create('div', { class: 'ProseMirrorAIInline-loadingOverlay-spinner' }, [
-          create('div', {
-            class: 'ProseMirrorAIInline-loadingOverlay-spinner-icon',
-          }),
-          create(
-            'div',
-            { class: 'ProseMirrorAIInline-loadingOverlay-spinner-text' },
-            WORKING_ON_IT_TEXT,
-          ),
-        ]),
-      ],
-    )
-
-    this.loadingPromptEle = this.loadingOverlay.querySelector<HTMLDivElement>(
-      '.ProseMirrorAIInline-loadingOverlay-prompt',
-    )
-
-    this.submitButtonEle =
-      this.dom.querySelector<HTMLButtonElement>(
-        `button.${BASE_CLASS}-inputContainer-submitButton`,
-      ) ?? undefined
-
-    // Create the accept/reject container imperatively (not in lit-html template)
-    // so it persists across re-renders when attached to the toolbar button
-    this.acceptRejectContainerEle = this.createAcceptRejectContainer()
-
-    this.inputEle?.addEventListener('focus', (evt: Event) => {
-      evt.preventDefault()
-    })
-
-    // We want to keep the top of the AI Inline Editing widget
-    // anchored to the bottom of the toolbar, but the toolbar
-    // contracts and expands when our editorView contracts and
-    // expands (e.g. user toggles preview pane), so this will
-    // ensure the top of the widget remains anchored by letting us
-    // know when the editorView has implicitly resized itself.
-    const ro = new ResizeObserver(() => {
-      this.render()
-    })
-
-    ro.observe(this.editorView.dom)
-
-    this.render()
-    this.initTracking()
-  }
-
-  /**
-   * Our AI Inline widget markup.
-   */
-  private template = (): TemplateResult => html`
-    <div class="${BASE_CLASS}-inputContainer">
-      <input
-        class="${BASE_CLASS}-inputContainer-input"
-        type="text"
-        data-hide-word-count="true"
-        placeholder="${PROMPT_PLACEHOLDER}"
-        @keydown=${(e: KeyboardEvent) => {
-          if (e.key === 'Enter') {
-            e.preventDefault()
-            this.sendTrackingEvent?.('submit inline prompt')
-            this.submitSuggestion(
-              this.editorView,
-              this.editorView.state.schema,
-              this.inputEle?.value,
-            )
-          }
-        }}
-      />
-      <button
-        type="button"
-        class="${BASE_CLASS}-inputContainer-submitButton"
-        aria-label=${window.BRIGHTSPOT?.ai?.submitSuggestion}
-        title=${window.BRIGHTSPOT?.ai?.submitSuggestion}
-        @click=${() => {
-          if (this.isLoading) {
-            this.cancelSuggestion()
-          } else {
-            this.sendTrackingEvent?.('submit inline prompt')
-            this.submitSuggestion(
-              this.editorView,
-              this.editorView.state.schema,
-              this.inputEle?.value,
-            )
-          }
-        }}
-      ></button>
-    </div>
-  `
-
-  /**
-   * Creates the accept/reject container element imperatively.
-   * This is done outside of lit-html so it persists across re-renders.
-   */
-  private createAcceptRejectContainer(): HTMLDivElement {
-    const acceptButton = create('button', {}, [
-      create('span', { class: `${BASE_CLASS}-actions-accept-icon` }),
-      ACCEPT_BUTTON_TEXT,
-    ])
-    acceptButton.addEventListener('click', this.handleAccept)
-
-    const discardButton = create('button', {}, [
-      create('span', { class: `${BASE_CLASS}-actions-rejectAll-icon` }),
-      DISCARD_BUTTON_TEXT,
-    ])
-    discardButton.addEventListener('click', this.handleDiscard)
-
-    const tryAgainButton = create('button', {}, [
-      create('span', { class: `${BASE_CLASS}-actions-tryAgain-icon` }),
-      TRY_AGAIN_BUTTON_TEXT,
-    ])
-    tryAgainButton.addEventListener('click', this.handleTryAgain)
-
-    const container = create(
-      'div',
-      {
-        class: `${BASE_CLASS}-acceptRejectContainer`,
-        hidden: '',
-      },
-      [
-        create('ul', { class: `${BASE_CLASS}-actions`, role: 'menu' }, [
-          create(
-            'li',
-            {
-              class: `${BASE_CLASS}-actions-accept ProseMirrorToolbar-action`,
-              role: 'menuitem',
-            },
-            [acceptButton],
-          ),
-          create(
-            'li',
-            {
-              class: `${BASE_CLASS}-actions-rejectAll ProseMirrorToolbar-action`,
-              role: 'menuitem',
-            },
-            [discardButton],
-          ),
-          create(
-            'li',
-            {
-              class: `${BASE_CLASS}-actions-tryAgain ProseMirrorToolbar-action`,
-              role: 'menuitem',
-            },
-            [tryAgainButton],
-          ),
-        ]),
-      ],
-    )
-
-    // Stop click events from propagating to the toolbar button (which would toggle AI inline off)
-    container.addEventListener('click', (evt: Event) => {
-      evt.stopPropagation()
-    })
-
-    return container
-  }
-
-  /**
-   * Hides the accept/reject container and resets the input field.
-   */
-  private hideAcceptRejectContainer(): void {
-    if (this.inputEle) {
-      this.inputEle.value = ''
-      this.inputEle.placeholder = PROMPT_PLACEHOLDER
-    }
-
-    if (this.acceptRejectContainerEle) {
-      this.acceptRejectContainerEle.setAttribute('hidden', '')
-    }
-    this.dom.classList.remove('has-suggestions')
-  }
-
-  /**
-   * Shows the accept/reject container, recreating and reattaching if needed.
-   */
-  private showAcceptRejectContainer(): void {
-    // Recreate the container if it was removed from the DOM (e.g., toolbar re-render)
-    if (!this.acceptRejectContainerEle?.isConnected) {
-      this.acceptRejectContainerEle = this.createAcceptRejectContainer()
-    }
-
-    // Attach to AI inline toolbar button if not already attached
-    if (
-      !this.acceptRejectContainerEle.parentElement?.matches(
-        "[data-rte-style='rte2-toolbar-ai-inline']",
-      )
-    ) {
-      const aiInlineButton = this.editorView.dom
-        .closest('.ProseMirrorContainer')
-        ?.querySelector("[data-rte-style='rte2-toolbar-ai-inline']")
-      aiInlineButton?.appendChild(this.acceptRejectContainerEle)
-    }
-
-    this.attachAcceptRejectTracking(this.acceptRejectContainerEle)
-    this.acceptRejectContainerEle.removeAttribute('hidden')
-    this.dom.classList.add('has-suggestions')
-  }
-
-  /**
-   * Accepts the suggested text by removing deleted content and keeping inserted content.
-   */
-  private handleAccept = (evt: Event): void => {
-    evt.preventDefault()
-
-    const { state, dispatch } = this.editorView
-    const { tr, schema } = state
-
-    // Find and delete content marked for deletion
-    let startPosDel: number | null = null
-    let endPosDel: number | null = null
-    tr.doc.descendants((node, pos) => {
-      node.marks.forEach((mark) => {
-        if (mark.type === schema.marks.aiInlineDel) {
-          if (startPosDel === null) {
-            startPosDel = pos > 0 ? pos - 1 : pos
-          }
-          endPosDel = pos + node.nodeSize
-        }
-      })
-    })
-
-    if (startPosDel !== null && endPosDel !== null) {
-      tr.delete(startPosDel, endPosDel)
-    }
-
-    // Remove insertion marks from the kept text
-    tr.doc.descendants((node, pos) => {
-      node.marks.forEach((mark) => {
-        if (mark.type === schema.marks.aiInlineIns) {
-          tr.removeMark(pos, pos + node.nodeSize, schema.marks.aiInlineIns)
-        }
-      })
-    })
-
-    this.hideAcceptRejectContainer()
-    dispatch(tr)
-  }
-
-  /**
-   * Rejects the suggested text by removing inserted content and keeping original content.
-   */
-  private handleDiscard = (evt: Event): void => {
-    evt.preventDefault()
-
-    const { state, dispatch } = this.editorView
-    const { tr, schema } = state
-
-    // Find and delete inserted content
-    let startPosIns: number | null = null
-    let endPosIns: number | null = null
-    tr.doc.descendants((node, pos) => {
-      node.marks.forEach((mark) => {
-        if (mark.type === schema.marks.aiInlineIns) {
-          if (startPosIns === null) {
-            startPosIns = pos > 0 ? pos - 1 : pos
-          }
-          endPosIns = pos + node.nodeSize
-          if (endPosIns < tr.doc.content.size) {
-            endPosIns += 1
-          }
-        }
-      })
-    })
-
-    if (startPosIns !== null && endPosIns !== null) {
-      tr.delete(startPosIns, endPosIns)
-    }
-
-    // Remove deletion marks from the kept text
-    tr.doc.descendants((node, pos) => {
-      node.marks.forEach((mark) => {
-        if (mark.type === schema.marks.aiInlineDel) {
-          tr.removeMark(pos, pos + node.nodeSize, schema.marks.aiInlineDel)
-        }
-      })
-    })
-
-    this.hideAcceptRejectContainer()
-    dispatch(tr)
-  }
-
-  /**
-   * Discards current suggestion and retries with the last prompt.
-   */
-  private handleTryAgain = (evt: Event): void => {
-    evt.preventDefault()
-
-    const { state, dispatch } = this.editorView
-    const { tr, schema } = state
-
-    // Find and delete inserted content
-    let startPosIns: number | null = null
-    let endPosIns: number | null = null
-    tr.doc.descendants((node, pos) => {
-      node.marks.forEach((mark) => {
-        if (mark.type === schema.marks.aiInlineIns) {
-          if (startPosIns === null) {
-            startPosIns = pos > 0 ? pos - 1 : pos
-          }
-          endPosIns = pos + node.nodeSize
-          if (endPosIns < tr.doc.content.size) {
-            endPosIns += 1
-          }
-        }
-      })
-    })
-
-    if (startPosIns !== null && endPosIns !== null) {
-      tr.delete(startPosIns, endPosIns)
-    }
-
-    // Remove deletion marks but keep the text
-    tr.doc.descendants((node, pos) => {
-      node.marks.forEach((mark) => {
-        if (mark.type === schema.marks.aiInlineDel) {
-          tr.removeMark(pos, pos + node.nodeSize, schema.marks.aiInlineDel)
-        }
-      })
-    })
-
-    // Hide the accept/reject container (but don't reset input)
-    if (this.acceptRejectContainerEle) {
-      this.acceptRejectContainerEle.setAttribute('hidden', '')
-    }
-    this.dom.classList.remove('has-suggestions')
-
-    this.retry = true
-    dispatch(tr)
-
-    // Re-run the last prompt
-    if (this.lastPrompt) {
-      this.submitSuggestion(
-        this.editorView,
-        this.editorView.state.schema,
-        this.lastPrompt,
-      )
-    }
-  }
-
-  /**
-   * Fetches and displays prompt suggestions automatically
-   */
-  private fetchPromptSuggestions = (): void => {
-    const query = new URLSearchParams({
-      id: this.objectId || '',
-      typeId: this.typeId || '',
-      field: this.field,
-    })
-
-    const url = PROMPT_SUGGESTIONS_PATH + '?' + query
-    fetch(url, {
-      method: 'GET',
-    })
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error('Network response was not ok: ' + response.statusText)
-        }
-        return response.text()
-      })
-      .then((suggestionsHTML) => {
-        const suggestionsDom = new DOMParser().parseFromString(
-          suggestionsHTML,
-          'text/html',
-        )
-
-        // Get the suggestions container from the parsed HTML
-        this.suggestionsContainer = suggestionsDom.querySelector(
-          '.ProseMirrorAIInline-container-suggestions-dropdown',
-        )
-        if (!this.suggestionsContainer) {
-          console.error('Suggestions container not found in response')
-          return
-        }
-
-        // Append the suggestions container to the AI Inline container (this.dom)
-        this.dom.appendChild(this.suggestionsContainer)
-        // Make suggestions always visible
-        this.suggestionsContainer.removeAttribute('hidden')
-
-        const suggestionsList = this.suggestionsContainer.querySelector(
-          '.ProseMirrorAIInline-container-suggestions-list',
-        )
-
-        if (suggestionsList) {
-          // Add click handlers to each suggestion button
-          suggestionsList
-            .querySelectorAll<HTMLButtonElement>(
-              '.ProseMirrorAIInline-container-suggestions-list-item:not(.is-empty) button[data-prompt]',
-            )
-            .forEach((button) => {
-              button.addEventListener('click', () => {
-                this.sendTrackingEvent?.('click inline prompt suggestion')
-                this.submitSuggestion(
-                  this.editorView,
-                  this.editorView.state.schema,
-                  button.dataset.prompt,
-                )
-              })
-            })
-        }
-      })
-      .catch((error) => {
-        console.error('Fetch error: ', error)
-      })
-  }
-
-  /**
-   * Handles the suggestion button click event.
-   */
-  private async submitSuggestion(
-    view: EditorView,
-    schema: Schema,
-    prompt?: string,
-  ): Promise<void> {
-    if (!prompt) return
-
-    // Store the prompt for "Try Again" functionality
-    this.lastPrompt = prompt
-
-    this.isLoading = true
-    this.dom.classList.add('is-loading')
-
-    // Insert loading overlay after the container if not already in DOM
-    if (this.loadingOverlay && !this.loadingOverlay.parentElement) {
-      this.dom.insertAdjacentElement('afterend', this.loadingOverlay)
-    }
-
-    this.loadingOverlay?.classList.add('is-loading')
-    if (this.loadingPromptEle) {
-      this.loadingPromptEle.textContent = prompt
-    }
-
-    // Capture retry state at the start (before it gets reset)
-    const isRetry = this.retry
-
-    // Store selection positions on first submission, reuse on retry
-    let from: number
-    let to: number
-    let selectedContent: string
-
-    if (
-      isRetry &&
-      this.lastSelectedContent !== undefined &&
-      this.lastSelectionFrom !== undefined &&
-      this.lastSelectionTo !== undefined
-    ) {
-      // Reuse stored values on retry
-      selectedContent = this.lastSelectedContent
-      from = this.lastSelectionFrom
-      to = this.lastSelectionTo
-    } else {
-      // Store values on first submission
-      const state = view.state
-      const selection = state.selection
-      from = selection.from
-      to = selection.to
-      const slice = state.doc.slice(from, to)
-      selectedContent = slice.content.textBetween(0, slice.content.size)
-
-      this.lastSelectedContent = selectedContent
-      this.lastSelectionFrom = from
-      this.lastSelectionTo = to
-    }
-
-    // Build full prompt once
-    let fullPrompt = PROMPT_PREFIX + prompt + ' | ' + selectedContent
-
-    // Add retry prefix if applicable
-    if (this.retry) {
-      fullPrompt = PROMPT_RETRY + fullPrompt
-      this.retry = false
-    }
-
-    const query = new URLSearchParams({
-      id: this.objectId || '',
-      typeId: this.typeId || '',
-      field: this.field,
-      state: this.contentState || '',
-      prompt: fullPrompt,
-    })
-
-    this.disableInput(true)
-
-    // Update UI to show loading state
-    const inputElement = this.inputEle
-    const originalPlaceholder = inputElement?.placeholder || ''
-    const originalValue = inputElement?.value || ''
-
-    if (inputElement) {
-      inputElement.value = ''
-      inputElement.placeholder = WORKING_ON_IT_TEXT
-    }
-    this.submitButtonEle?.classList.add('is-loading')
-
-    const tempDiv = create('div')
-
-    try {
-      // Make a single request and wait for complete response (no polling needed)
-      const response = await fetch(CHAT_PAGE_RESPONSES_PATH, {
-        method: 'POST',
-        credentials: 'include',
-        body: query,
-        headers: {
-          'Brightspot-CSRF': Cookies.get('bsp.csrf') || '',
-        },
-      })
-
-      const text = await response.text()
-
-      const rteTagNames = new Set(
-        ((window.RICH_TEXT_ELEMENTS as Array<{ tag: string }>) || []).map((e) =>
-          e.tag.toLowerCase(),
-        ),
-      )
-
-      tempDiv.innerHTML = DOMPurify.sanitize(text, {
-        CUSTOM_ELEMENT_HANDLING: {
-          tagNameCheck: (tagName: string) =>
-            rteTagNames.has(tagName.toLowerCase()), // Allow all registered RichTextElement custom elements
-          attributeNameCheck: () => true, // Allow all attributes on custom elements (class, id, label, data-*, etc.)
-          allowCustomizedBuiltInElements: true,
-        },
-        ADD_ATTR: ['link-data', 'data-cms-id', 'data-cms-href'], // Allow Brightspot-specific attributes on standard elements
-      })
-    } catch (error) {
-      console.error('Error fetching AI suggestion:', error)
-      this.disableInput(false)
-      this.isLoading = false
-      return
-    } finally {
-      // Always restore UI state
-      this.submitButtonEle?.classList.remove('is-loading')
-      this.dom.classList.remove('is-loading')
-      this.loadingOverlay?.classList.remove('is-loading')
-      if (inputElement) {
-        inputElement.value = originalValue
-        inputElement.placeholder = originalPlaceholder
-      }
-    }
-
-    // Set the chatId once
-    if (!this.chatId) {
-      this.chatId =
-        tempDiv.querySelector<HTMLElement>('.chatData')?.dataset.chatId
-    }
-
-    // If loading is false, the suggestion was cancelled
-    if (!this.isLoading) {
-      this.disableInput(false)
-      return
-    }
-
-    const responses = tempDiv.querySelectorAll('.AIChat-responseText')
-
-    if (responses.length > 0) {
-      // Get the most recent response
-      const recentResponse = responses[responses.length - 1]
-      const response = recentResponse?.innerHTML || ''
-      this.responseId =
-        recentResponse?.closest<HTMLElement>(
-          '.AIChat-response',
-        )?.dataset.responseId
-
-      const domFragment = create('div')
-      domFragment.innerHTML = getLegacyHTMLTextForProsemirror(
-        response,
-        view.state.schema,
-        this.compliantTagNameMap,
-        true,
-      )
-
-      const parsedSlice = ProseDOMParser.fromSchema(schema).parseSlice(
-        domFragment,
-        {
-          preserveWhitespace: 'full',
-        },
-      )
-
-      // Create transaction from current state (important for retry after document changes)
-      const tr = view.state.tr
-      const docSize = view.state.doc.content.size
-
-      // Clamp positions to valid document range (important for retry after document changes)
-      const clampedFrom = Math.min(from, docSize)
-      const clampedTo = Math.min(to, docSize)
-
-      try {
-        // Add aiInlineDel mark to the to be replaced text
-        tr.addMark(clampedFrom, clampedTo, schema.marks.aiInlineDel.create())
-
-        // Insert the response after the current selection
-        tr.replace(clampedTo, clampedTo, parsedSlice)
-
-        // Add aiInlineIns mark to the suggested text
-        const insertEnd = tr.mapping.map(clampedTo)
-        tr.addMark(clampedTo, insertEnd, schema.marks.aiInlineIns.create())
-
-        this.trackAiUsage(this.textArea, this.chatId, this.responseId)
-
-        this.disableInput(false)
-        this.isLoading = false
-
-        view.dispatch(tr)
-
-        // Add AI highlighting in a separate transaction by finding nodes with aiInlineIns
-        const time = moment().format('MM/D/YYYY h:mm:ss A')
-        const aiMark = schema.marks.ai.create({
-          'data-user-label': this.userLabel,
-          'data-time': time,
-          'data-user-id': this.userId,
-          'data-response-id': this.responseId,
-          'data-chat-id': this.chatId,
-          title: `${this.userLabel}: ${time}`,
-        })
-
-        // Document state after all changes have been made
-        const tr2 = view.state.tr
-        view.state.doc.descendants((node, pos) => {
-          if (node.marks.some((m) => m.type === schema.marks.aiInlineIns)) {
-            tr2.addMark(pos, pos + node.nodeSize, aiMark)
-          }
-        })
-
-        if (tr2.steps.length > 0) {
-          view.dispatch(tr2)
-        }
-
-        this.showAcceptRejectContainer()
-      } catch (err) {
-        console.error('Error creating/dispatching transaction:', err)
-        this.disableInput(false)
-        this.isLoading = false
-      }
-    } else {
-      // No responses received, re-enable inputs
-      this.disableInput(false)
-      this.isLoading = false
-    }
-  }
-
-  // Disable input and buttons while suggestion is active
-  private cancelSuggestion = async (): Promise<void> => {
-    this.isLoading = false
-
-    const query = new URLSearchParams({
-      id: this.objectId || '',
-      typeId: this.typeId || '',
-      field: this.field,
-      state: this.contentState || '',
-      action: 'cancel',
-    })
-
-    await fetch(CHAT_PAGE_RESPONSES_PATH, {
-      method: 'POST',
-      credentials: 'include',
-      body: query,
-      headers: {
-        'Brightspot-CSRF': Cookies.get('bsp.csrf') || '',
-      },
-    })
-
-    this.dom.classList.remove('is-loading')
-    if (this.loadingOverlay) {
-      this.loadingOverlay.classList.remove('is-loading')
-    }
-    if (this.submitButtonEle) {
-      this.submitButtonEle.classList.remove('is-loading')
-    }
-    if (this.inputEle) {
-      this.inputEle.placeholder = PROMPT_PLACEHOLDER
-    }
-
-    this.disableInput(false)
-  }
-
-  // Log the fact that AI Chat was activated on a particular field.
-  private trackAiUsage = (
-    textarea: HTMLTextAreaElement | null,
-    chatId: string | undefined,
-    responseId: string | undefined,
-  ): void => {
-    if (textarea && chatId && responseId) {
-      // Find the main object's ID
-      const contentEditForm = document.querySelector<HTMLFormElement>(
-        'form.ContentEdit[data-content-id]',
-      )
-
-      if (!contentEditForm) return
-
-      let objectId: string
-      if (contentEditForm.classList.contains('is-draft')) {
-        objectId = contentEditForm.dataset.revisionId || ''
-      } else {
-        objectId = contentEditForm.dataset.contentId || ''
-      }
-
-      // Find the field's full internal name path
-      let fieldName = ''
-      let parents = this.getParents(textarea, '.inputContainer')
-      parents = parents.reverse()
-      for (const parent of parents) {
-        if (parent instanceof HTMLElement) {
-          fieldName = fieldName.concat(parent.dataset.name + '*')
-        }
-      }
-
-      if (objectId && fieldName) {
-        // Add hidden input to page that BE can interpret
-        const hiddenInput = create('input', {
-          type: 'hidden',
-          name: objectId + '/aiGeneratedField|' + fieldName,
-          value: chatId,
-        })
-
-        const prePublish = contentEditForm.querySelector<HTMLElement>(
-          'div.PrePublish[data-prepublish]',
-        )
-        if (prePublish) {
-          prePublish
-            .querySelector<HTMLFormElement>('form.PrePublishForm')
-            ?.prepend(hiddenInput)
-        } else {
-          contentEditForm.prepend(hiddenInput)
-        }
-
-        // Notify BE to mark this response as being used
-        const baseUrl = (
-          window.BRIGHTSPOT?.web?.pagePaths as Record<string, string>
-        )['com.psddev.ai.cms.tracking.FlagUsedResponsePage']
-        const params = new URLSearchParams({
-          chatId: chatId,
-          responseId: responseId,
-        })
-        const url = `${baseUrl}?${params}`
-
-        fetch(url, {
-          method: 'get',
-        })
-          .then((response) => {
-            if (!response.ok) {
-              throw new Error(
-                'Network response was not ok: ' + response.statusText,
-              )
-            }
-            return response.text()
-          })
-          .catch((error) => {
-            console.error('Fetch error: ', error)
-          })
-      }
-    }
-  }
-
-  private disableInput = (disable: boolean): void => {
-    if (this.inputEle) {
-      this.inputEle.disabled = disable
-    }
-
-    // Disable/enable suggestion buttons
-    if (this.suggestionsContainer) {
-      const suggestionButtons =
-        this.suggestionsContainer.querySelectorAll<HTMLButtonElement>(
-          '.ProseMirrorAIInline-container-suggestions-list-item:not(.is-empty) button[data-prompt]',
-        )
-      suggestionButtons.forEach((button) => {
-        button.disabled = disable
-        if (disable) {
-          button.classList.add('is-disabled')
-        } else {
-          button.classList.remove('is-disabled')
-        }
-      })
-    }
-  }
-
-  private getParents = (elem: Element, selector: string): Element[] => {
-    // Set up a parent array
-    const parents: Element[] = []
-
-    // Push each parent element to the array
-    for (
-      ;
-      elem && elem !== document.documentElement;
-      elem = <Element>elem.parentNode
-    ) {
-      if (selector) {
-        if (elem.matches(selector)) {
-          parents.push(elem)
-        }
-        continue
-      }
-      parents.push(elem)
-    }
-
-    // Return our parent array
-    return parents
-  }
-
-  /**
-   * Renders the AI Inline by displaying it if our plugin state
-   * has an active state. Also anchors the top of the widget to the bottom
-   * of the toolbar, whose height expands and contracts with the UI.
-   */
-  private render(): void {
-    const pluginState = getPluginState(this.editorView, this.myKey)
-    const aiInlineEnabled = pluginState
-      ?.get('activeStates')
-      ?.get('toggleAIInline')
-
-    // Check if there are nodes with meta aiInlineDel or aiInlineIns in the doc
-    let aiInlineNodeFound = false
-    const { doc } = this.editorView.state
-    doc.descendants((node) => {
-      if (
-        node?.type?.name &&
-        (node.marks || []).some(
-          (mark) =>
-            mark.attrs &&
-            (mark.attrs.aiInlineDel ||
-              mark.attrs.aiInlineIns ||
-              mark.type?.name === 'aiInlineDel' ||
-              mark.type?.name === 'aiInlineIns'),
-        )
-      ) {
-        aiInlineNodeFound = true
-        return false
-      }
-      return true
-    })
-
-    if (aiInlineEnabled) {
-      this.dom.classList.remove(COLLAPSED_CLASS)
-      if (!this.focused) {
-        this.inputEle?.focus()
-        this.focused = true
-      }
-
-      // Load suggestions on first open
-      if (!this.suggestionsFetched) {
-        this.suggestionsFetched = true
-        this.fetchPromptSuggestions()
-      }
-
-      if (aiInlineNodeFound) {
-        this.showAcceptRejectContainer()
-      }
-    } else {
-      this.dom.classList.add(COLLAPSED_CLASS)
-      this.focused = false
-    }
-  }
-
-  update(): void {
-    this.render()
-  }
-
-  // Tracking: The standard trackingManager.track() pattern relies on onFind to
-  // discover elements, but ProseMirror containers are excluded from onFind's observation
-  // scope. Instead, we call trackingManager.sendData() directly with manual click listeners.
-  private async initTracking(): Promise<void> {
-    const analytics = await import(
-      /* webpackIgnore: true */ 'bsp-tracking'
-    ).catch(() => null)
-    if (!analytics) return
-
-    const { trackingManager } = analytics
-    this.sendTrackingEvent = (interaction: string) => {
-      trackingManager?.sendData('click', {
-        feature: 'ai_create',
-        interaction: interaction,
-      })
-    }
-
-    this.editorView.dom
-      .closest('.ProseMirrorContainer')
-      ?.querySelector('a.rte2-toolbar-ai-inline')
-      ?.addEventListener('click', () =>
-        this.sendTrackingEvent?.('click AI inline (rte toolbar)'),
-      )
-
-    // Attach to existing accept/reject container (if already created)
-    this.attachAcceptRejectTracking(this.acceptRejectContainerEle)
-  }
-
-  private attachAcceptRejectTracking(container?: HTMLElement): void {
-    if (!container || !this.sendTrackingEvent) return
-    if (container.dataset.trackingAttached) return
-    container.dataset.trackingAttached = 'true'
-
-    container
-      .querySelector(`.${BASE_CLASS}-actions-accept button`)
-      ?.addEventListener('click', () =>
-        this.sendTrackingEvent?.('accept inline response'),
-      )
-
-    container
-      .querySelector(`.${BASE_CLASS}-actions-rejectAll button`)
-      ?.addEventListener('click', () =>
-        this.sendTrackingEvent?.('reject inline response'),
-      )
-  }
-}
-
-export { AIInlineView }