REFACTOR: AI Composer Helper Menu (#715)
This commit is contained in:
Keegan George
GitHub
parent
7b4c099673
commit
1254d7c7d0
|
|
@ -0,0 +1,351 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { fn } from "@ember/helper";
|
||||
import { action } from "@ember/object";
|
||||
import { service } from "@ember/service";
|
||||
import { modifier } from "ember-modifier";
|
||||
import { eq } from "truth-helpers";
|
||||
import DButton from "discourse/components/d-button";
|
||||
import { ajax } from "discourse/lib/ajax";
|
||||
import { popupAjaxError } from "discourse/lib/ajax-error";
|
||||
import { bind } from "discourse-common/utils/decorators";
|
||||
import I18n from "discourse-i18n";
|
||||
import AiHelperButtonGroup from "../components/ai-helper-button-group";
|
||||
import AiHelperLoading from "../components/ai-helper-loading";
|
||||
import AiHelperOptionsList from "../components/ai-helper-options-list";
|
||||
import ModalDiffModal from "../components/modal/diff-modal";
|
||||
import ThumbnailSuggestion from "../components/modal/thumbnail-suggestions";
|
||||
|
||||
export default class AiComposerHelperMenu extends Component {
|
||||
@service siteSettings;
|
||||
@service aiComposerHelper;
|
||||
@service currentUser;
|
||||
@service capabilities;
|
||||
@tracked newSelectedText;
|
||||
@tracked diff;
|
||||
@tracked initialValue = "";
|
||||
@tracked customPromptValue = "";
|
||||
@tracked loading = false;
|
||||
@tracked lastUsedOption = null;
|
||||
@tracked thumbnailSuggestions = null;
|
||||
@tracked showThumbnailModal = false;
|
||||
@tracked showDiffModal = false;
|
||||
@tracked lastSelectionRange = null;
|
||||
MENU_STATES = this.aiComposerHelper.MENU_STATES;
|
||||
prompts = [];
|
||||
promptTypes = {};
|
||||
|
||||
documentListeners = modifier(() => {
|
||||
document.addEventListener("keydown", this.onKeyDown, { passive: true });
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("keydown", this.onKeyDown);
|
||||
};
|
||||
});
|
||||
|
||||
get helperOptions() {
|
||||
let prompts = this.currentUser?.ai_helper_prompts;
|
||||
|
||||
prompts = prompts
|
||||
.filter((p) => p.location.includes("composer"))
|
||||
.filter((p) => p.name !== "generate_titles")
|
||||
.map((p) => {
|
||||
// AI helper by default returns interface locale on translations
|
||||
// Since we want site default translations (and we are using: force_default_locale)
|
||||
// we need to replace the translated_name with the site default locale name
|
||||
const siteLocale = this.siteSettings.default_locale;
|
||||
const availableLocales = JSON.parse(
|
||||
this.siteSettings.available_locales
|
||||
);
|
||||
const locale = availableLocales.find((l) => l.value === siteLocale);
|
||||
const translatedName = I18n.t(
|
||||
"discourse_ai.ai_helper.context_menu.translate_prompt",
|
||||
{
|
||||
language: locale.name,
|
||||
}
|
||||
);
|
||||
|
||||
if (p.name === "translate") {
|
||||
return { ...p, translated_name: translatedName };
|
||||
}
|
||||
return p;
|
||||
});
|
||||
|
||||
// Find the custom_prompt object and move it to the beginning of the array
|
||||
const customPromptIndex = prompts.findIndex(
|
||||
(p) => p.name === "custom_prompt"
|
||||
);
|
||||
if (customPromptIndex !== -1) {
|
||||
const customPrompt = prompts.splice(customPromptIndex, 1)[0];
|
||||
prompts.unshift(customPrompt);
|
||||
}
|
||||
|
||||
if (!this.currentUser?.can_use_custom_prompts) {
|
||||
prompts = prompts.filter((p) => p.name !== "custom_prompt");
|
||||
}
|
||||
|
||||
prompts.forEach((p) => {
|
||||
this.prompts[p.id] = p;
|
||||
});
|
||||
|
||||
this.promptTypes = prompts.reduce((memo, p) => {
|
||||
memo[p.name] = p.prompt_type;
|
||||
return memo;
|
||||
}, {});
|
||||
return prompts;
|
||||
}
|
||||
|
||||
get reviewButtons() {
|
||||
return [
|
||||
{
|
||||
icon: "exchange-alt",
|
||||
label: "discourse_ai.ai_helper.context_menu.view_changes",
|
||||
action: () => (this.showDiffModal = true),
|
||||
classes: "view-changes",
|
||||
},
|
||||
{
|
||||
icon: "undo",
|
||||
label: "discourse_ai.ai_helper.context_menu.revert",
|
||||
action: this.undoAiAction,
|
||||
classes: "revert",
|
||||
},
|
||||
{
|
||||
icon: "check",
|
||||
label: "discourse_ai.ai_helper.context_menu.confirm",
|
||||
action: () => this.updateMenuState(this.MENU_STATES.resets),
|
||||
classes: "confirm",
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
get resetButtons() {
|
||||
return [
|
||||
{
|
||||
icon: "undo",
|
||||
label: "discourse_ai.ai_helper.context_menu.undo",
|
||||
action: this.undoAiAction,
|
||||
classes: "undo",
|
||||
},
|
||||
{
|
||||
icon: "discourse-sparkles",
|
||||
label: "discourse_ai.ai_helper.context_menu.regen",
|
||||
action: () => this.updateSelected(this.lastUsedOption),
|
||||
classes: "regenerate",
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
get canCloseMenu() {
|
||||
if (
|
||||
document.activeElement ===
|
||||
document.querySelector(".ai-custom-prompt__input")
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.loading && this._activeAiRequest !== null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.aiComposerHelper.menuState === this.MENU_STATES.review) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
@bind
|
||||
onKeyDown(event) {
|
||||
if (event.key === "Escape") {
|
||||
return this.closeMenu();
|
||||
}
|
||||
if (
|
||||
event.key === "Backspace" &&
|
||||
this.args.data.selectedText &&
|
||||
this.aiComposerHelper.menuState === this.MENU_STATES.triggers
|
||||
) {
|
||||
return this.closeMenu();
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
toggleAiHelperOptions() {
|
||||
this.updateMenuState(this.MENU_STATES.options);
|
||||
}
|
||||
|
||||
@action
|
||||
async updateSelected(option) {
|
||||
this._toggleLoadingState(true);
|
||||
this.lastUsedOption = option;
|
||||
this.updateMenuState(this.MENU_STATES.loading);
|
||||
this.initialValue = this.args.data.selectedText;
|
||||
this.lastSelectionRange = this.args.data.selectionRange;
|
||||
|
||||
try {
|
||||
this._activeAiRequest = await ajax("/discourse-ai/ai-helper/suggest", {
|
||||
method: "POST",
|
||||
data: {
|
||||
mode: option.id,
|
||||
text: this.args.data.selectedText,
|
||||
custom_prompt: this.customPromptValue,
|
||||
force_default_locale: true,
|
||||
},
|
||||
});
|
||||
|
||||
const data = await this._activeAiRequest;
|
||||
|
||||
// resets the values if new suggestion is started:
|
||||
this.diff = null;
|
||||
this.newSelectedText = null;
|
||||
this.thumbnailSuggestions = null;
|
||||
|
||||
if (option.name === "illustrate_post") {
|
||||
this._toggleLoadingState(false);
|
||||
this.closeMenu();
|
||||
this.showThumbnailModal = true;
|
||||
this.thumbnailSuggestions = data.thumbnails;
|
||||
} else {
|
||||
this._updateSuggestedByAi(data);
|
||||
}
|
||||
} catch (error) {
|
||||
popupAjaxError(error);
|
||||
} finally {
|
||||
this._toggleLoadingState(false);
|
||||
}
|
||||
|
||||
return this._activeAiRequest;
|
||||
}
|
||||
|
||||
@action
|
||||
cancelAiAction() {
|
||||
if (this._activeAiRequest) {
|
||||
this._activeAiRequest.abort();
|
||||
this._activeAiRequest = null;
|
||||
this._toggleLoadingState(false);
|
||||
this.closeMenu();
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
updateMenuState(newState) {
|
||||
this.aiComposerHelper.menuState = newState;
|
||||
}
|
||||
|
||||
@action
|
||||
closeMenu() {
|
||||
if (!this.canCloseMenu) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.customPromptValue = "";
|
||||
this.updateMenuState(this.MENU_STATES.triggers);
|
||||
this.args.close();
|
||||
}
|
||||
|
||||
@action
|
||||
undoAiAction() {
|
||||
if (this.capabilities.isFirefox) {
|
||||
// execCommand("undo") is no not supported in Firefox so we insert old text at range
|
||||
// we also need to calculate the length diffrence between the old and new text
|
||||
const lengthDifference =
|
||||
this.args.data.selectedText.length - this.initialValue.length;
|
||||
const end = this.lastSelectionRange.y - lengthDifference;
|
||||
this._insertAt(this.lastSelectionRange.x, end, this.initialValue);
|
||||
} else {
|
||||
document.execCommand("undo", false, null);
|
||||
}
|
||||
|
||||
// context menu is prevented from closing when in review state
|
||||
// so we change to reset state quickly before closing
|
||||
this.updateMenuState(this.MENU_STATES.resets);
|
||||
this.closeMenu();
|
||||
}
|
||||
|
||||
_toggleLoadingState(loading) {
|
||||
if (loading) {
|
||||
this.args.data.dEditorInput.classList.add("loading");
|
||||
return (this.loading = true);
|
||||
}
|
||||
|
||||
this.args.data.dEditorInput.classList.remove("loading");
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
_updateSuggestedByAi(data) {
|
||||
this.newSelectedText = data.suggestions[0];
|
||||
|
||||
if (data.diff) {
|
||||
this.diff = data.diff;
|
||||
}
|
||||
|
||||
this._insertAt(
|
||||
this.args.data.selectionRange.x,
|
||||
this.args.data.selectionRange.y,
|
||||
this.newSelectedText
|
||||
);
|
||||
|
||||
this.updateMenuState(this.MENU_STATES.review);
|
||||
}
|
||||
|
||||
_insertAt(start, end, text) {
|
||||
this.args.data.dEditorInput.setSelectionRange(start, end);
|
||||
this.args.data.dEditorInput.focus();
|
||||
document.execCommand("insertText", false, text);
|
||||
}
|
||||
|
||||
<template>
|
||||
<div class="ai-composer-helper-menu" {{this.documentListeners}}>
|
||||
{{#if (eq this.aiComposerHelper.menuState this.MENU_STATES.triggers)}}
|
||||
<ul class="ai-composer-helper-menu__triggers">
|
||||
<li>
|
||||
<DButton
|
||||
@icon="discourse-sparkles"
|
||||
@label="discourse_ai.ai_helper.context_menu.trigger"
|
||||
@action={{this.toggleAiHelperOptions}}
|
||||
class="btn-flat"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
{{else if (eq this.aiComposerHelper.menuState this.MENU_STATES.options)}}
|
||||
<AiHelperOptionsList
|
||||
@options={{this.helperOptions}}
|
||||
@customPromptValue={{this.customPromptValue}}
|
||||
@performAction={{this.updateSelected}}
|
||||
/>
|
||||
{{else if (eq this.aiComposerHelper.menuState this.MENU_STATES.loading)}}
|
||||
<AiHelperLoading @cancel={{this.cancelAiAction}} />
|
||||
{{else if (eq this.aiComposerHelper.menuState this.MENU_STATES.review)}}
|
||||
<AiHelperButtonGroup
|
||||
@buttons={{this.reviewButtons}}
|
||||
class="ai-composer-helper-menu__review"
|
||||
/>
|
||||
{{else if (eq this.aiComposerHelper.menuState this.MENU_STATES.resets)}}
|
||||
<AiHelperButtonGroup
|
||||
@buttons={{this.resetButtons}}
|
||||
class="ai-composer-helper-menu__resets"
|
||||
/>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if this.showDiffModal}}
|
||||
<ModalDiffModal
|
||||
@confirm={{fn
|
||||
(mut this.aiComposerHelper.menuState)
|
||||
this.MENU_STATES.resets
|
||||
}}
|
||||
@diff={{this.diff}}
|
||||
@oldValue={{this.initialValue}}
|
||||
@newValue={{this.newSelectedText}}
|
||||
@revert={{this.undoAiAction}}
|
||||
@closeModal={{fn (mut this.showDiffModal) false}}
|
||||
/>
|
||||
{{/if}}
|
||||
|
||||
{{#if this.showThumbnailModal}}
|
||||
<ThumbnailSuggestion
|
||||
@thumbnails={{this.thumbnailSuggestions}}
|
||||
@closeModal={{fn (mut this.showThumbnailModal) false}}
|
||||
/>
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import DButton from "discourse/components/d-button";
|
||||
import concatClass from "discourse/helpers/concat-class";
|
||||
|
||||
const AiHelperButtonGroup = <template>
|
||||
<ul class="ai-helper-button-group" ...attributes>
|
||||
{{#each @buttons as |button|}}
|
||||
<li>
|
||||
<DButton
|
||||
@icon={{button.icon}}
|
||||
@label={{button.label}}
|
||||
@action={{button.action}}
|
||||
class={{concatClass "btn-flat" button.classes}}
|
||||
/>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</template>;
|
||||
|
||||
export default AiHelperButtonGroup;
|
||||
|
|
@ -1,38 +1,40 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { Input } from "@ember/component";
|
||||
import { fn } from "@ember/helper";
|
||||
import { on } from "@ember/modifier";
|
||||
import { action } from "@ember/object";
|
||||
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
|
||||
import DButton from "discourse/components/d-button";
|
||||
import withEventValue from "discourse/helpers/with-event-value";
|
||||
import autoFocus from "discourse/modifiers/auto-focus";
|
||||
import i18n from "discourse-common/helpers/i18n";
|
||||
import not from "truth-helpers/helpers/not";
|
||||
|
||||
export default class AiHelperCustomPrompt extends Component {
|
||||
@tracked _customPromptInput;
|
||||
|
||||
@action
|
||||
setupCustomPrompt() {
|
||||
this._customPromptInput = document.querySelector(
|
||||
".ai-custom-prompt__input"
|
||||
);
|
||||
this._customPromptInput.focus();
|
||||
}
|
||||
|
||||
@action
|
||||
sendInput() {
|
||||
sendInput(event) {
|
||||
if (event.key !== "Enter") {
|
||||
return;
|
||||
}
|
||||
return this.args.submit(this.args.promptArgs);
|
||||
}
|
||||
|
||||
<template>
|
||||
<div class="ai-custom-prompt" {{didInsert this.setupCustomPrompt}}>
|
||||
<Input
|
||||
@value={{@value}}
|
||||
<div class="ai-custom-prompt">
|
||||
|
||||
<input
|
||||
{{on "input" (withEventValue (fn (mut @value)))}}
|
||||
{{on "keydown" this.sendInput}}
|
||||
value={{@value}}
|
||||
placeholder={{i18n
|
||||
"discourse_ai.ai_helper.context_menu.custom_prompt.placeholder"
|
||||
}}
|
||||
class="ai-custom-prompt__input"
|
||||
@enter={{this.sendInput}}
|
||||
type="text"
|
||||
{{!-- Using {{autoFocus}} helper instead of built in autofocus="autofocus"
|
||||
because built in autofocus doesn't work consistently when component is
|
||||
invoked twice separetly without a page refresh.
|
||||
(i.e. trigger in post AI helper followed by trigger in composer AI helper)
|
||||
--}}
|
||||
{{autoFocus}}
|
||||
/>
|
||||
|
||||
<DButton
|
||||
|
|
|
|||
|
|
@ -0,0 +1,204 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { inject as service } from "@ember/service";
|
||||
import { modifier } from "ember-modifier";
|
||||
import { caretPosition, getCaretPosition } from "discourse/lib/utilities";
|
||||
import { INPUT_DELAY } from "discourse-common/config/environment";
|
||||
import { afterRender, bind, debounce } from "discourse-common/utils/decorators";
|
||||
import AiComposerHelperMenu from "../../components/ai-composer-helper-menu";
|
||||
import { showComposerAIHelper } from "../../lib/show-ai-helper";
|
||||
import virtualElementFromCaretCoords from "../../lib/virtual-element-from-caret-coords";
|
||||
|
||||
export default class AiComposerHelper extends Component {
|
||||
static shouldRender(outletArgs, helper) {
|
||||
return showComposerAIHelper(outletArgs, helper, "context_menu");
|
||||
}
|
||||
|
||||
@service menu;
|
||||
@service aiComposerHelper;
|
||||
@tracked caretCoords;
|
||||
@tracked menuPlacement = "bottom-start";
|
||||
@tracked menuOffset = [9, 21];
|
||||
@tracked selectedText = "";
|
||||
@tracked isSelecting = false;
|
||||
@tracked menuElement = null;
|
||||
@tracked menuInstance = null;
|
||||
@tracked dEditorInput;
|
||||
@tracked selectionRange = { x: 0, y: 0 };
|
||||
minSelectionChars = 3;
|
||||
|
||||
documentListeners = modifier(() => {
|
||||
document.addEventListener("mousedown", this.onMouseDown, { passive: true });
|
||||
document.addEventListener("mouseup", this.onMouseUp, { passive: true });
|
||||
document.addEventListener("selectionchange", this.onSelectionChanged);
|
||||
|
||||
this.dEditorInput = document.querySelector(".d-editor-input");
|
||||
|
||||
if (this.dEditorInput) {
|
||||
this.dEditorInput.addEventListener("scroll", this.updatePosition);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", this.onMouseDown);
|
||||
document.removeEventListener("mouseup", this.onMouseUp);
|
||||
document.removeEventListener("selectionchange", this.onSelectionChanged);
|
||||
|
||||
if (this.dEditorInput) {
|
||||
this.dEditorInput.removeEventListener("scroll", this.updatePosition);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
willDestroy() {
|
||||
super.willDestroy(...arguments);
|
||||
this.menuInstance?.close();
|
||||
}
|
||||
|
||||
@bind
|
||||
onSelectionChanged() {
|
||||
if (
|
||||
this.aiComposerHelper.menuState !==
|
||||
this.aiComposerHelper.MENU_STATES.triggers
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isSelecting) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (document.activeElement !== this.dEditorInput) {
|
||||
return;
|
||||
}
|
||||
|
||||
const canSelect = Boolean(
|
||||
window.getSelection() &&
|
||||
document.activeElement &&
|
||||
document.activeElement.value
|
||||
);
|
||||
|
||||
this.selectedText = canSelect
|
||||
? document.activeElement.value.substring(
|
||||
document.activeElement.selectionStart,
|
||||
document.activeElement.selectionEnd
|
||||
)
|
||||
: "";
|
||||
|
||||
this.selectionRange = canSelect
|
||||
? {
|
||||
x: document.activeElement.selectionStart,
|
||||
y: document.activeElement.selectionEnd,
|
||||
}
|
||||
: { x: 0, y: 0 };
|
||||
|
||||
if (this.selectedText?.length === 0) {
|
||||
this.menuInstance?.close();
|
||||
return;
|
||||
}
|
||||
if (this.selectedText?.length < this.minSelectionChars) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.selectionChanged();
|
||||
}
|
||||
|
||||
@debounce(INPUT_DELAY)
|
||||
selectionChanged() {
|
||||
this.positionMenu();
|
||||
}
|
||||
|
||||
@bind
|
||||
onMouseDown() {
|
||||
this.isSelecting = true;
|
||||
}
|
||||
|
||||
@bind
|
||||
onMouseUp() {
|
||||
this.isSelecting = false;
|
||||
this.onSelectionChanged();
|
||||
}
|
||||
|
||||
@bind
|
||||
updatePosition() {
|
||||
if (!this.menuInstance) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.positionMenu();
|
||||
}
|
||||
|
||||
@afterRender
|
||||
async positionMenu() {
|
||||
this.caretCoords = getCaretPosition(this.dEditorInput, {
|
||||
pos: caretPosition(this.dEditorInput),
|
||||
});
|
||||
const virtualElement = virtualElementFromCaretCoords(
|
||||
this.caretCoords,
|
||||
this.menuOffset
|
||||
);
|
||||
|
||||
if (this.handleBoundaries(virtualElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Position context menu at based on if interfering with button bar
|
||||
this.menuInstance = await this.menu.show(virtualElement, {
|
||||
identifier: "ai-composer-helper-menu",
|
||||
placement: this.menuPlacement,
|
||||
component: AiComposerHelperMenu,
|
||||
inline: true,
|
||||
modalForMobile: false,
|
||||
data: {
|
||||
selectedText: this.selectedText,
|
||||
dEditorInput: this.dEditorInput,
|
||||
selectionRange: this.selectionRange,
|
||||
},
|
||||
interactive: true,
|
||||
onClose: () => {
|
||||
this.aiComposerHelper.menuState =
|
||||
this.aiComposerHelper.MENU_STATES.triggers;
|
||||
},
|
||||
});
|
||||
this.menuElement = this.menuInstance.content;
|
||||
}
|
||||
|
||||
handleBoundaries(virtualElement) {
|
||||
const textAreaWrapper = document
|
||||
.querySelector(".d-editor-textarea-wrapper")
|
||||
.getBoundingClientRect();
|
||||
const buttonBar = document
|
||||
.querySelector(".d-editor-button-bar")
|
||||
.getBoundingClientRect();
|
||||
const boundaryElement = {
|
||||
top: buttonBar.bottom,
|
||||
bottom: textAreaWrapper.bottom,
|
||||
};
|
||||
|
||||
const menuHeightBuffer = 35; // rough estimate of menu height since we can't get actual in this context.
|
||||
if (this.caretCoords.y - menuHeightBuffer < boundaryElement.top) {
|
||||
this.menuPlacement = "bottom-start";
|
||||
} else {
|
||||
this.menuPlacement = "top-start";
|
||||
}
|
||||
|
||||
if (this.isScrolledOutOfBounds(boundaryElement, virtualElement)) {
|
||||
this.menuInstance?.close();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
isScrolledOutOfBounds(boundaryElement, virtualElement) {
|
||||
// Hide context menu if it's scrolled out of bounds:
|
||||
if (virtualElement.rect.top < boundaryElement.top) {
|
||||
return true;
|
||||
} else if (virtualElement.rect.bottom > boundaryElement.bottom) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
<template>
|
||||
<div {{this.documentListeners}}></div>
|
||||
</template>
|
||||
}
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
<div {{did-insert this.setupContextMenu}}>
|
||||
{{#if this.showContextMenu}}
|
||||
<div class="ai-helper-context-menu">
|
||||
{{#if (eq this.menuState this.CONTEXT_MENU_STATES.triggers)}}
|
||||
<ul class="ai-helper-context-menu__trigger">
|
||||
<li>
|
||||
<DButton
|
||||
@icon="discourse-sparkles"
|
||||
@action={{this.toggleAiHelperOptions}}
|
||||
@label="discourse_ai.ai_helper.context_menu.trigger"
|
||||
class="btn-flat"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{{else if (eq this.menuState this.CONTEXT_MENU_STATES.options)}}
|
||||
<AiHelperOptionsList
|
||||
@options={{this.helperOptions}}
|
||||
@customPromptValue={{this.customPromptValue}}
|
||||
@performAction={{this.updateSelected}}
|
||||
/>
|
||||
{{else if (eq this.menuState this.CONTEXT_MENU_STATES.loading)}}
|
||||
<AiHelperLoading @cancel={{this.cancelAIAction}} />
|
||||
|
||||
{{else if (eq this.menuState this.CONTEXT_MENU_STATES.review)}}
|
||||
<ul class="ai-helper-context-menu__review">
|
||||
<li>
|
||||
<DButton
|
||||
@icon="exchange-alt"
|
||||
@label="discourse_ai.ai_helper.context_menu.view_changes"
|
||||
@action={{this.viewChanges}}
|
||||
class="btn-flat view-changes"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<DButton
|
||||
@icon="undo"
|
||||
@label="discourse_ai.ai_helper.context_menu.revert"
|
||||
@action={{this.undoAIAction}}
|
||||
class="btn-flat revert"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<DButton
|
||||
@icon="check"
|
||||
@label="discourse_ai.ai_helper.context_menu.confirm"
|
||||
@action={{this.confirmChanges}}
|
||||
class="btn-flat confirm"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{{else if (eq this.menuState this.CONTEXT_MENU_STATES.resets)}}
|
||||
<ul class="ai-helper-context-menu__resets">
|
||||
<li>
|
||||
<DButton
|
||||
@icon="undo"
|
||||
@label="discourse_ai.ai_helper.context_menu.undo"
|
||||
@action={{this.undoAIAction}}
|
||||
class="btn-flat undo"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<DButton
|
||||
@icon="discourse-sparkles"
|
||||
@label="discourse_ai.ai_helper.context_menu.regen"
|
||||
@action={{fn this.updateSelected this.lastUsedOption}}
|
||||
class="btn-flat"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if this.showDiffModal}}
|
||||
<Modal::DiffModal
|
||||
@confirm={{this.confirmChanges}}
|
||||
@diff={{this.diff}}
|
||||
@oldValue={{this.initialValue}}
|
||||
@newValue={{this.newSelectedText}}
|
||||
@revert={{this.undoAIAction}}
|
||||
@closeModal={{fn (mut this.showDiffModal) false}}
|
||||
/>
|
||||
{{/if}}
|
||||
|
||||
{{#if this.showThumbnailModal}}
|
||||
<Modal::ThumbnailSuggestions
|
||||
@thumbnails={{this.thumbnailSuggestions}}
|
||||
@closeModal={{fn (mut this.showThumbnailModal) false}}
|
||||
/>
|
||||
{{/if}}
|
||||
|
|
@ -1,444 +0,0 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { action } from "@ember/object";
|
||||
import { inject as service } from "@ember/service";
|
||||
import { createPopper } from "@popperjs/core";
|
||||
import { ajax } from "discourse/lib/ajax";
|
||||
import { popupAjaxError } from "discourse/lib/ajax-error";
|
||||
import { caretPosition, getCaretPosition } from "discourse/lib/utilities";
|
||||
import { INPUT_DELAY } from "discourse-common/config/environment";
|
||||
import { afterRender, bind, debounce } from "discourse-common/utils/decorators";
|
||||
import I18n from "discourse-i18n";
|
||||
import { showComposerAIHelper } from "../../lib/show-ai-helper";
|
||||
|
||||
export default class AiHelperContextMenu extends Component {
|
||||
static shouldRender(outletArgs, helper) {
|
||||
return showComposerAIHelper(outletArgs, helper, "context_menu");
|
||||
}
|
||||
|
||||
@service currentUser;
|
||||
@service siteSettings;
|
||||
@service modal;
|
||||
@service capabilities;
|
||||
@tracked showContextMenu = false;
|
||||
@tracked caretCoords;
|
||||
@tracked virtualElement;
|
||||
@tracked selectedText = "";
|
||||
@tracked newSelectedText;
|
||||
@tracked loading = false;
|
||||
@tracked lastUsedOption = null;
|
||||
@tracked showDiffModal = false;
|
||||
@tracked showThumbnailModal = false;
|
||||
@tracked diff;
|
||||
@tracked popperPlacement = "top-start";
|
||||
@tracked previousMenuState = null;
|
||||
@tracked customPromptValue = "";
|
||||
@tracked initialValue = "";
|
||||
@tracked thumbnailSuggestions = null;
|
||||
@tracked selectionRange = { x: 0, y: 0 };
|
||||
@tracked lastSelectionRange = null;
|
||||
|
||||
CONTEXT_MENU_STATES = {
|
||||
triggers: "TRIGGERS",
|
||||
options: "OPTIONS",
|
||||
resets: "RESETS",
|
||||
loading: "LOADING",
|
||||
review: "REVIEW",
|
||||
};
|
||||
prompts = [];
|
||||
promptTypes = {};
|
||||
minSelectionChars = 3;
|
||||
|
||||
@tracked _menuState = this.CONTEXT_MENU_STATES.triggers;
|
||||
@tracked _popper;
|
||||
@tracked _dEditorInput;
|
||||
@tracked _customPromptInput;
|
||||
@tracked _contextMenu;
|
||||
@tracked _activeAIRequest = null;
|
||||
|
||||
willDestroy() {
|
||||
super.willDestroy(...arguments);
|
||||
document.removeEventListener("selectionchange", this.selectionChanged);
|
||||
document.removeEventListener("keydown", this.onKeyDown);
|
||||
this._popper?.destroy();
|
||||
}
|
||||
|
||||
get menuState() {
|
||||
return this._menuState;
|
||||
}
|
||||
|
||||
set menuState(newState) {
|
||||
this.previousMenuState = this._menuState;
|
||||
this._menuState = newState;
|
||||
}
|
||||
|
||||
get helperOptions() {
|
||||
let prompts = this.currentUser?.ai_helper_prompts;
|
||||
|
||||
prompts = prompts
|
||||
.filter((p) => p.location.includes("composer"))
|
||||
.filter((p) => p.name !== "generate_titles")
|
||||
.map((p) => {
|
||||
// AI helper by default returns interface locale on translations
|
||||
// Since we want site default translations (and we are using: force_default_locale)
|
||||
// we need to replace the translated_name with the site default locale name
|
||||
const siteLocale = this.siteSettings.default_locale;
|
||||
const availableLocales = JSON.parse(
|
||||
this.siteSettings.available_locales
|
||||
);
|
||||
const locale = availableLocales.find((l) => l.value === siteLocale);
|
||||
const translatedName = I18n.t(
|
||||
"discourse_ai.ai_helper.context_menu.translate_prompt",
|
||||
{
|
||||
language: locale.name,
|
||||
}
|
||||
);
|
||||
|
||||
if (p.name === "translate") {
|
||||
return { ...p, translated_name: translatedName };
|
||||
}
|
||||
return p;
|
||||
});
|
||||
|
||||
// Find the custom_prompt object and move it to the beginning of the array
|
||||
const customPromptIndex = prompts.findIndex(
|
||||
(p) => p.name === "custom_prompt"
|
||||
);
|
||||
if (customPromptIndex !== -1) {
|
||||
const customPrompt = prompts.splice(customPromptIndex, 1)[0];
|
||||
prompts.unshift(customPrompt);
|
||||
}
|
||||
|
||||
if (!this._showUserCustomPrompts()) {
|
||||
prompts = prompts.filter((p) => p.name !== "custom_prompt");
|
||||
}
|
||||
|
||||
prompts.forEach((p) => {
|
||||
this.prompts[p.id] = p;
|
||||
});
|
||||
|
||||
this.promptTypes = prompts.reduce((memo, p) => {
|
||||
memo[p.name] = p.prompt_type;
|
||||
return memo;
|
||||
}, {});
|
||||
return prompts;
|
||||
}
|
||||
|
||||
@bind
|
||||
selectionChanged() {
|
||||
if (document.activeElement !== this._dEditorInput) {
|
||||
return;
|
||||
}
|
||||
|
||||
const canSelect = Boolean(
|
||||
window.getSelection() &&
|
||||
document.activeElement &&
|
||||
document.activeElement.value
|
||||
);
|
||||
|
||||
this.selectedText = canSelect
|
||||
? document.activeElement.value.substring(
|
||||
document.activeElement.selectionStart,
|
||||
document.activeElement.selectionEnd
|
||||
)
|
||||
: "";
|
||||
|
||||
this.selectionRange = canSelect
|
||||
? {
|
||||
x: document.activeElement.selectionStart,
|
||||
y: document.activeElement.selectionEnd,
|
||||
}
|
||||
: { x: 0, y: 0 };
|
||||
|
||||
if (this.selectedText?.length === 0) {
|
||||
this.closeContextMenu();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.selectedText?.length < this.minSelectionChars) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._onSelectionChanged();
|
||||
}
|
||||
|
||||
@bind
|
||||
updatePosition() {
|
||||
if (!this.showContextMenu) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.positionContextMenu();
|
||||
}
|
||||
|
||||
@bind
|
||||
onKeyDown(event) {
|
||||
if (event.key === "Escape") {
|
||||
return this.closeContextMenu();
|
||||
}
|
||||
if (
|
||||
event.key === "Backspace" &&
|
||||
this.selectedText &&
|
||||
this.menuState === this.CONTEXT_MENU_STATES.triggers
|
||||
) {
|
||||
return this.closeContextMenu();
|
||||
}
|
||||
}
|
||||
|
||||
@debounce(INPUT_DELAY)
|
||||
_onSelectionChanged() {
|
||||
this.positionContextMenu();
|
||||
this.showContextMenu = true;
|
||||
}
|
||||
|
||||
generateGetBoundingClientRect(width = 0, height = 0, x = 0, y = 0) {
|
||||
return () => ({
|
||||
width,
|
||||
height,
|
||||
top: y,
|
||||
right: x,
|
||||
bottom: y,
|
||||
left: x,
|
||||
});
|
||||
}
|
||||
|
||||
get canCloseContextMenu() {
|
||||
if (document.activeElement === this._customPromptInput) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.loading && this._activeAIRequest !== null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.menuState === this.CONTEXT_MENU_STATES.review) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
closeContextMenu() {
|
||||
if (!this.canCloseContextMenu) {
|
||||
return;
|
||||
}
|
||||
this.showContextMenu = false;
|
||||
this.menuState = this.CONTEXT_MENU_STATES.triggers;
|
||||
this.customPromptValue = "";
|
||||
}
|
||||
|
||||
_updateSuggestedByAI(data) {
|
||||
this.newSelectedText = data.suggestions[0];
|
||||
|
||||
if (data.diff) {
|
||||
this.diff = data.diff;
|
||||
}
|
||||
|
||||
this._insertAt(
|
||||
this.selectionRange.x,
|
||||
this.selectionRange.y,
|
||||
this.newSelectedText
|
||||
);
|
||||
this.menuState = this.CONTEXT_MENU_STATES.review;
|
||||
}
|
||||
|
||||
_insertAt(start, end, text) {
|
||||
this._dEditorInput.setSelectionRange(start, end);
|
||||
this._dEditorInput.focus();
|
||||
document.execCommand("insertText", false, text);
|
||||
}
|
||||
|
||||
_toggleLoadingState(loading) {
|
||||
if (loading) {
|
||||
this._dEditorInput.classList.add("loading");
|
||||
return (this.loading = true);
|
||||
}
|
||||
|
||||
this._dEditorInput.classList.remove("loading");
|
||||
return (this.loading = false);
|
||||
}
|
||||
|
||||
_showUserCustomPrompts() {
|
||||
return this.currentUser?.can_use_custom_prompts;
|
||||
}
|
||||
|
||||
handleBoundaries() {
|
||||
const textAreaWrapper = document
|
||||
.querySelector(".d-editor-textarea-wrapper")
|
||||
.getBoundingClientRect();
|
||||
const buttonBar = document
|
||||
.querySelector(".d-editor-button-bar")
|
||||
.getBoundingClientRect();
|
||||
|
||||
const boundaryElement = {
|
||||
top: buttonBar.bottom,
|
||||
bottom: textAreaWrapper.bottom,
|
||||
};
|
||||
|
||||
const contextMenuRect = this._contextMenu.getBoundingClientRect();
|
||||
|
||||
// Hide context menu if it's scrolled out of bounds:
|
||||
if (contextMenuRect.top < boundaryElement.top) {
|
||||
this._contextMenu.classList.add("out-of-bounds");
|
||||
} else if (contextMenuRect.bottom > boundaryElement.bottom) {
|
||||
this._contextMenu.classList.add("out-of-bounds");
|
||||
} else {
|
||||
this._contextMenu.classList.remove("out-of-bounds");
|
||||
}
|
||||
|
||||
// Position context menu at based on if interfering with button bar
|
||||
if (this.caretCoords.y - contextMenuRect.height < boundaryElement.top) {
|
||||
this.popperPlacement = "bottom-start";
|
||||
} else {
|
||||
this.popperPlacement = "top-start";
|
||||
}
|
||||
}
|
||||
|
||||
@afterRender
|
||||
positionContextMenu() {
|
||||
this._contextMenu = document.querySelector(".ai-helper-context-menu");
|
||||
|
||||
if (!this._dEditorInput || !this._contextMenu) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.caretCoords = getCaretPosition(this._dEditorInput, {
|
||||
pos: caretPosition(this._dEditorInput),
|
||||
});
|
||||
|
||||
// prevent overflow of context menu outside of editor
|
||||
this.handleBoundaries();
|
||||
|
||||
this.virtualElement = {
|
||||
getBoundingClientRect: this.generateGetBoundingClientRect(
|
||||
this._contextMenu.clientWidth,
|
||||
this._contextMenu.clientHeight,
|
||||
this.caretCoords.x,
|
||||
this.caretCoords.y
|
||||
),
|
||||
};
|
||||
|
||||
this._popper = createPopper(this.virtualElement, this._contextMenu, {
|
||||
placement: this.popperPlacement,
|
||||
modifiers: [
|
||||
{
|
||||
name: "offset",
|
||||
options: {
|
||||
offset: [10, 0],
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
@action
|
||||
setupContextMenu() {
|
||||
document.addEventListener("selectionchange", this.selectionChanged);
|
||||
document.addEventListener("keydown", this.onKeyDown);
|
||||
|
||||
this._dEditorInput = document.querySelector(".d-editor-input");
|
||||
|
||||
if (this._dEditorInput) {
|
||||
this._dEditorInput.addEventListener("scroll", this.updatePosition);
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
setupCustomPrompt() {
|
||||
this._customPromptInput = document.querySelector(
|
||||
".ai-custom-prompt__input"
|
||||
);
|
||||
this._customPromptInput.focus();
|
||||
}
|
||||
|
||||
@action
|
||||
toggleAiHelperOptions() {
|
||||
this.menuState = this.CONTEXT_MENU_STATES.options;
|
||||
}
|
||||
|
||||
@action
|
||||
undoAIAction() {
|
||||
if (this.capabilities.isFirefox) {
|
||||
// execCommand("undo") is no not supported in Firefox so we insert old text at range
|
||||
// we also need to calculate the length diffrence between the old and new text
|
||||
const lengthDifference =
|
||||
this.selectedText.length - this.initialValue.length;
|
||||
const end = this.lastSelectionRange.y - lengthDifference;
|
||||
this._insertAt(this.lastSelectionRange.x, end, this.initialValue);
|
||||
} else {
|
||||
document.execCommand("undo", false, null);
|
||||
}
|
||||
|
||||
// context menu is prevented from closing when in review state
|
||||
// so we change to reset state quickly before closing
|
||||
this.menuState = this.CONTEXT_MENU_STATES.resets;
|
||||
this.closeContextMenu();
|
||||
}
|
||||
|
||||
@action
|
||||
async updateSelected(option) {
|
||||
this._toggleLoadingState(true);
|
||||
this.lastUsedOption = option;
|
||||
this.menuState = this.CONTEXT_MENU_STATES.loading;
|
||||
this.initialValue = this.selectedText;
|
||||
this.lastSelectionRange = this.selectionRange;
|
||||
|
||||
this._activeAIRequest = ajax("/discourse-ai/ai-helper/suggest", {
|
||||
method: "POST",
|
||||
data: {
|
||||
mode: option.id,
|
||||
text: this.selectedText,
|
||||
custom_prompt: this.customPromptValue,
|
||||
force_default_locale: true,
|
||||
},
|
||||
});
|
||||
|
||||
this._activeAIRequest
|
||||
.then((data) => {
|
||||
// resets the values if new suggestion is started:
|
||||
this.diff = null;
|
||||
this.newSelectedText = null;
|
||||
this.thumbnailSuggestions = null;
|
||||
|
||||
if (option.name === "illustrate_post") {
|
||||
this._toggleLoadingState(false);
|
||||
this.closeContextMenu();
|
||||
this.showThumbnailModal = true;
|
||||
this.thumbnailSuggestions = data.thumbnails;
|
||||
} else {
|
||||
this._updateSuggestedByAI(data);
|
||||
}
|
||||
})
|
||||
.catch(popupAjaxError)
|
||||
.finally(() => {
|
||||
this._toggleLoadingState(false);
|
||||
});
|
||||
|
||||
return this._activeAIRequest;
|
||||
}
|
||||
|
||||
@action
|
||||
viewChanges() {
|
||||
this.showDiffModal = true;
|
||||
}
|
||||
|
||||
@action
|
||||
confirmChanges() {
|
||||
this.menuState = this.CONTEXT_MENU_STATES.resets;
|
||||
}
|
||||
|
||||
@action
|
||||
cancelAIAction() {
|
||||
if (this._activeAIRequest) {
|
||||
this._activeAIRequest.abort();
|
||||
this._activeAIRequest = null;
|
||||
this._toggleLoadingState(false);
|
||||
this.closeContextMenu();
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
togglePreviousMenu() {
|
||||
this.menuState = this.previousMenuState;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
class VirtualElementFromCaretCoords {
|
||||
constructor(caretCoords, offset = [0, 0]) {
|
||||
this.caretCoords = caretCoords;
|
||||
this.offset = offset;
|
||||
this.updateRect();
|
||||
}
|
||||
|
||||
updateRect() {
|
||||
const [xOffset, yOffset] = this.offset;
|
||||
this.rect = {
|
||||
top: this.caretCoords.y + yOffset,
|
||||
right: this.caretCoords.x,
|
||||
bottom: this.caretCoords.y + yOffset,
|
||||
left: this.caretCoords.x + xOffset,
|
||||
width: 0,
|
||||
height: 0,
|
||||
x: this.caretCoords.x,
|
||||
y: this.caretCoords.y,
|
||||
toJSON() {
|
||||
return this;
|
||||
},
|
||||
};
|
||||
return this.rect;
|
||||
}
|
||||
|
||||
getBoundingClientRect() {
|
||||
return this.rect;
|
||||
}
|
||||
|
||||
getClientRects() {
|
||||
return [this.rect];
|
||||
}
|
||||
|
||||
get clientWidth() {
|
||||
return this.rect.width;
|
||||
}
|
||||
|
||||
get clientHeight() {
|
||||
return this.rect.height;
|
||||
}
|
||||
}
|
||||
|
||||
export default function virtualElementFromCaretCoords(caretCoords, offset) {
|
||||
return new VirtualElementFromCaretCoords(caretCoords, offset);
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { tracked } from "@glimmer/tracking";
|
||||
import Service from "@ember/service";
|
||||
|
||||
export default class AiComposerHelper extends Service {
|
||||
@tracked menuState = this.MENU_STATES.triggers;
|
||||
|
||||
MENU_STATES = {
|
||||
triggers: "TRIGGERS",
|
||||
options: "OPTIONS",
|
||||
resets: "RESETS",
|
||||
loading: "LOADING",
|
||||
review: "REVIEW",
|
||||
};
|
||||
}
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
margin: 4.5em 0 1em;
|
||||
}
|
||||
|
||||
.ai-helper-context-menu {
|
||||
.ai-composer-helper-menu {
|
||||
background: var(--secondary);
|
||||
box-shadow: var(--shadow-card);
|
||||
padding: 0.25rem;
|
||||
|
|
@ -40,16 +40,16 @@
|
|||
list-style: none;
|
||||
z-index: 999;
|
||||
|
||||
&.out-of-bounds {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ai-helper-button-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-flow: row wrap;
|
||||
&__resets {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -606,3 +606,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fk-d-menu[data-identifier="ai-composer-helper-menu"] {
|
||||
z-index: z("composer", "dropdown");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ RSpec.describe "AI Composer helper", type: :system, js: true do
|
|||
let(:input) { "The rain in spain stays mainly in the Plane." }
|
||||
|
||||
let(:composer) { PageObjects::Components::Composer.new }
|
||||
let(:ai_helper_context_menu) { PageObjects::Components::AIHelperContextMenu.new }
|
||||
let(:ai_helper_context_menu) { PageObjects::Components::AiComposerHelperMenu.new }
|
||||
let(:diff_modal) { PageObjects::Modals::DiffModal.new }
|
||||
let(:ai_suggestion_dropdown) { PageObjects::Components::AISuggestionDropdown.new }
|
||||
fab!(:category)
|
||||
|
|
@ -239,21 +239,7 @@ RSpec.describe "AI Composer helper", type: :system, js: true do
|
|||
input.gsub(/[[:space:]]+/, " ").gsub(/[‘’]/, "'").gsub(/[“”]/, '"').strip,
|
||||
)
|
||||
diff_modal.confirm_changes
|
||||
expect(ai_helper_context_menu).to be_showing_resets
|
||||
end
|
||||
end
|
||||
|
||||
it "should not close the context menu when in review state" do
|
||||
trigger_context_menu(spanish_input)
|
||||
ai_helper_context_menu.click_ai_button
|
||||
|
||||
DiscourseAi::Completions::Llm.with_prepared_responses([input]) do
|
||||
ai_helper_context_menu.select_helper_model(mode)
|
||||
|
||||
wait_for { composer.composer_input.value == input }
|
||||
|
||||
find(".d-editor-preview").click
|
||||
expect(ai_helper_context_menu).to have_context_menu
|
||||
expect(ai_helper_context_menu).to have_no_context_menu
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@
|
|||
|
||||
module PageObjects
|
||||
module Components
|
||||
class AIHelperContextMenu < PageObjects::Components::Base
|
||||
class AiComposerHelperMenu < PageObjects::Components::Base
|
||||
COMPOSER_EDITOR_SELECTOR = ".d-editor-input"
|
||||
CONTEXT_MENU_SELECTOR = ".ai-helper-context-menu"
|
||||
TRIGGER_STATE_SELECTOR = "#{CONTEXT_MENU_SELECTOR}__trigger"
|
||||
CONTEXT_MENU_SELECTOR = ".ai-composer-helper-menu"
|
||||
TRIGGER_STATE_SELECTOR = "#{CONTEXT_MENU_SELECTOR}__triggers"
|
||||
OPTIONS_STATE_SELECTOR = ".ai-helper-options"
|
||||
LOADING_STATE_SELECTOR = "#{CONTEXT_MENU_SELECTOR}__loading"
|
||||
LOADING_STATE_SELECTOR = ".ai-helper-loading"
|
||||
RESETS_STATE_SELECTOR = "#{CONTEXT_MENU_SELECTOR}__resets"
|
||||
REVIEW_STATE_SELECTOR = "#{CONTEXT_MENU_SELECTOR}__review"
|
||||
CUSTOM_PROMPT_SELECTOR = "#{CONTEXT_MENU_SELECTOR} .ai-custom-prompt"
|
||||
|
|
@ -41,7 +41,7 @@ module PageObjects
|
|||
end
|
||||
|
||||
def press_undo_keys
|
||||
find(COMPOSER_EDITOR_SELECTOR).send_keys([:control, "z"])
|
||||
find(COMPOSER_EDITOR_SELECTOR).send_keys([PLATFORM_KEY_MODIFIER, "z"])
|
||||
end
|
||||
|
||||
def press_escape_key
|
||||
Loading…
Reference in New Issue