UX: Show suggestion buttons only if sufficient content is present (#204)

This commit is contained in:
Keegan George 2023-09-06 12:20:08 -07:00 committed by GitHub
parent 8d674c451a
commit 0733ff7e67
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 92 additions and 59 deletions

View File

@ -1,5 +1,4 @@
import Component from '@glimmer/component';
import DButton from "discourse/components/d-button";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
import { ajax } from "discourse/lib/ajax";
@ -8,17 +7,21 @@ import didInsert from "@ember/render-modifiers/modifiers/did-insert";
import { bind } from "discourse-common/utils/decorators";
import { inject as service } from "@ember/service";
import I18n from "I18n";
import DButton from "discourse/components/d-button";
export default class AISuggestionDropdown extends Component {
<template>
<DButton
@class="suggestion-button {{if this.loading 'is-loading'}}"
@icon={{this.suggestIcon}}
@title="discourse_ai.ai_helper.suggest"
@action={{this.performSuggestion}}
@disabled={{this.disableSuggestionButton}}
...attributes
/>
{{#if this.showAIButton}}
<DButton
@class="suggestion-button {{if this.loading 'is-loading'}}"
@icon={{this.suggestIcon}}
@title="discourse_ai.ai_helper.suggest"
@action={{this.performSuggestion}}
@disabled={{this.disableSuggestionButton}}
...attributes
/>
{{/if}}
{{#if this.showMenu}}
{{! template-lint-disable modifier-name-case }}
<ul class="popup-menu ai-suggestions-menu" {{didInsert this.handleClickOutside}}>
@ -42,6 +45,7 @@ export default class AISuggestionDropdown extends Component {
@service dialog;
@service site;
@service siteSettings;
@service composer;
@tracked loading = false;
@tracked showMenu = false;
@tracked generatedSuggestions = [];
@ -59,21 +63,15 @@ export default class AISuggestionDropdown extends Component {
document.removeEventListener("click", this.onClickOutside);
}
get composerInput() {
return document.querySelector(".d-editor-input")?.value || this.args.composer.reply;
get showAIButton() {
const minCharacterCount = 40;
return this.composer.model.replyLength > minCharacterCount;
}
get disableSuggestionButton() {
return this.loading;
}
closeMenu() {
this.suggestIcon = "discourse-sparkles";
this.showMenu = false;
this.showErrors = false;
this.errors = "";
}
@bind
onClickOutside(event) {
const menu = document.querySelector(".ai-title-suggestions-menu");
@ -82,7 +80,7 @@ export default class AISuggestionDropdown extends Component {
return;
}
return this.closeMenu();
return this.#closeMenu();
}
@action
@ -104,21 +102,53 @@ export default class AISuggestionDropdown extends Component {
if (this.args.mode === this.SUGGESTION_TYPES.title) {
composer.set("title", suggestion);
return this.closeMenu();
return this.#closeMenu();
}
if (this.args.mode === this.SUGGESTION_TYPES.category) {
const selectedCategoryId = this.site.categories.find((c) => c.slug === suggestion).id;
composer.set("categoryId", selectedCategoryId);
return this.closeMenu();
return this.#closeMenu();
}
if (this.args.mode === this.SUGGESTION_TYPES.tag) {
this.updateTags(suggestion, composer);
this.#updateTags(suggestion, composer);
}
}
updateTags(suggestion, composer) {
@action
async performSuggestion() {
if (!this.args.mode) {
return;
}
if (this.composer.model.replyLength === 0) {
return this.dialog.alert(I18n.t("discourse_ai.ai_helper.missing_content"));
}
this.loading = true;
this.suggestIcon = "spinner";
return ajax(`/discourse-ai/ai-helper/${this.args.mode}`, {
method: "POST",
data: { text: this.composer.model.reply },
}).then((data) => {
this.#assignGeneratedSuggestions(data, this.args.mode);
}).catch(popupAjaxError).finally(() => {
this.loading = false;
this.suggestIcon = "sync-alt";
this.showMenu = true;
});
}
#closeMenu() {
this.suggestIcon = "discourse-sparkles";
this.showMenu = false;
this.showErrors = false;
this.errors = "";
}
#updateTags(suggestion, composer) {
const maxTags = this.siteSettings.max_tags_per_topic;
if (!composer.tags) {
@ -142,43 +172,26 @@ export default class AISuggestionDropdown extends Component {
return this.generatedSuggestions = this.generatedSuggestions.filter((s) => s !== suggestion);
}
@action
async performSuggestion() {
if (!this.args.mode) {
return;
#tagSelectorHasValues() {
return this.args.composer?.tags && this.args.composer?.tags.length > 0;
}
#assignGeneratedSuggestions(data, mode) {
if (mode === this.SUGGESTION_TYPES.title) {
return this.generatedSuggestions = data.suggestions;
}
if (this.composerInput?.length === 0) {
return this.dialog.alert(I18n.t("discourse_ai.ai_helper.missing_content"));
}
const suggestions = data.assistant.map((s) => s.name);
this.loading = true;
this.suggestIcon = "spinner";
return ajax(`/discourse-ai/ai-helper/${this.args.mode}`, {
method: "POST",
data: { text: this.composerInput },
}).then((data) => {
if (this.args.mode === this.SUGGESTION_TYPES.title) {
this.generatedSuggestions = data.suggestions;
if (mode === this.SUGGESTION_TYPES.tag) {
if (this.#tagSelectorHasValues()) {
// Filter out tags if they are already selected in the tag input
return this.generatedSuggestions = suggestions.filter((t) => !this.args.composer.tags.includes(t));
} else {
const suggestions = data.assistant.map((s) => s.name);
if (this.SUGGESTION_TYPES.tag) {
if (this.args.composer?.tags && this.args.composer?.tags.length > 0) {
// Filter out tags if they are already selected in the tag input
this.generatedSuggestions = suggestions.filter((t) => !this.args.composer.tags.includes(t));
} else {
this.generatedSuggestions = suggestions;
}
} else {
this.generatedSuggestions = suggestions;
}
return this.generatedSuggestions = suggestions;
}
}).catch(popupAjaxError).finally(() => {
this.loading = false;
this.suggestIcon = "sync-alt";
this.showMenu = true;
});
}
return this.generatedSuggestions = suggestions;
}
}

View File

@ -339,6 +339,17 @@ RSpec.describe "AI Composer helper", type: :system, js: true do
expect(ai_suggestion_dropdown).to have_no_dropdown
end
it "only shows trigger button if there is sufficient content in the composer" do
visit("/latest")
page.find("#create-topic").click
composer.fill_content("abc")
expect(ai_suggestion_dropdown).to have_no_suggestion_button
composer.fill_content(OpenAiCompletionsInferenceStubs.translated_response)
expect(ai_suggestion_dropdown).to have_suggestion_button
end
end
context "when suggesting the category with AI category suggester" do

View File

@ -3,13 +3,14 @@
module PageObjects
module Components
class AISuggestionDropdown < PageObjects::Components::Base
TITLE_BUTTON_SELECTOR = ".suggestion-button.suggest-titles-button"
CATEGORY_BUTTON_SELECTOR = ".suggestion-button.suggest-category-button"
TAG_BUTTON_SELECTOR = ".suggestion-button.suggest-tags-button"
SUGGESTION_BUTTON_SELECTOR = ".suggestion-button"
TITLE_BUTTON_SELECTOR = "#{SUGGESTION_BUTTON_SELECTOR}.suggest-titles-button"
CATEGORY_BUTTON_SELECTOR = "#{SUGGESTION_BUTTON_SELECTOR}.suggest-category-button"
TAG_BUTTON_SELECTOR = "#{SUGGESTION_BUTTON_SELECTOR}.suggest-tags-button"
MENU_SELECTOR = ".ai-suggestions-menu"
def click_suggest_titles_button
find(TITLE_BUTTON_SELECTOR, visible: :all).click
page.find(TITLE_BUTTON_SELECTOR, visible: :all).click
end
def click_suggest_category_button
@ -40,6 +41,14 @@ module PageObjects
def has_no_dropdown?
has_no_css?(MENU_SELECTOR)
end
def has_suggestion_button?
has_css?(SUGGESTION_BUTTON_SELECTOR)
end
def has_no_suggestion_button?
has_no_css?(SUGGESTION_BUTTON_SELECTOR)
end
end
end
end