@brightspot/ui 3.0.0 → 3.0.1-cms-ui-migration.1

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

@@ -0,0 +1,1019 @@
+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 }