generated from discourse/discourse-plugin-skeleton
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
FEATURE: Show suggested title prompt in new location (#171)
- Loading branch information
1 parent
345bfed
commit 7457fec
Showing
8 changed files
with
221 additions
and
67 deletions.
There are no files selected for viewing
108 changes: 108 additions & 0 deletions
108
assets/javascripts/discourse/connectors/after-composer-title-input/ai-title-suggester.gjs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| 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"; | ||
| import { popupAjaxError } from "discourse/lib/ajax-error"; | ||
| import didInsert from "@ember/render-modifiers/modifiers/did-insert"; | ||
| import { bind } from "discourse-common/utils/decorators"; | ||
|
|
||
| export default class AITitleSuggester extends Component { | ||
| <template> | ||
| <DButton | ||
| @class="suggest-titles-button {{if this.loading 'is-loading'}}" | ||
| @icon={{this.suggestTitleIcon}} | ||
| @title="discourse_ai.ai_helper.suggest_titles" | ||
| @action={{this.suggestTitles}} | ||
| @disabled={{this.disableSuggestionButton}} | ||
| /> | ||
| {{#if this.showMenu}} | ||
| {{! template-lint-disable modifier-name-case }} | ||
| <ul class="popup-menu ai-title-suggestions-menu" {{didInsert this.handleClickOutside}}> | ||
| {{#each this.generatedTitleSuggestions as |suggestion index|}} | ||
| <li data-name={{suggestion}} data-value={{index}}> | ||
| <DButton | ||
| @class="popup-menu-btn" | ||
| @translatedLabel={{suggestion}} | ||
| @action={{this.updateTopicTitle}} | ||
| @actionParam={{suggestion}} | ||
| /> | ||
| </li> | ||
| {{/each}} | ||
| </ul> | ||
| {{/if}} | ||
| </template> | ||
|
|
||
| @tracked loading = false; | ||
| @tracked showMenu = false; | ||
| @tracked generatedTitleSuggestions = []; | ||
| @tracked suggestTitleIcon = "discourse-sparkles"; | ||
| mode = { | ||
| id: -2, | ||
| name: "generate_titles", | ||
| translated_name: "Suggest topic titles", | ||
| prompt_type: "list" | ||
| }; | ||
|
|
||
| willDestroy() { | ||
| super.willDestroy(...arguments); | ||
| document.removeEventListener("click", this.onClickOutside); | ||
| } | ||
|
|
||
| get composerInput() { | ||
| return document.querySelector(".d-editor-input").value || this.args.outletArgs.composer.reply; | ||
| } | ||
|
|
||
| get disableSuggestionButton() { | ||
| return this.loading; | ||
| } | ||
|
|
||
| closeMenu() { | ||
| this.suggestTitleIcon = "discourse-sparkles"; | ||
| this.showMenu = false; | ||
| } | ||
|
|
||
| @bind | ||
| onClickOutside(event) { | ||
| const menu = document.querySelector(".ai-title-suggestions-menu"); | ||
|
|
||
| if (event.target === menu) { | ||
| return; | ||
| } | ||
|
|
||
| return this.closeMenu(); | ||
| } | ||
|
|
||
| @action | ||
| handleClickOutside() { | ||
| document.addEventListener("click", this.onClickOutside); | ||
| } | ||
|
|
||
| @action | ||
| updateTopicTitle(title) { | ||
| const composer = this.args.outletArgs?.composer; | ||
|
|
||
| if (composer) { | ||
| composer.set("title", title); | ||
| this.closeMenu(); | ||
| } | ||
| } | ||
|
|
||
| @action | ||
| async suggestTitles() { | ||
| this.loading = true; | ||
| this.suggestTitleIcon = "spinner"; | ||
|
|
||
| return ajax("/discourse-ai/ai-helper/suggest", { | ||
| method: "POST", | ||
| data: { mode: this.mode.id, text: this.composerInput }, | ||
| }).then((data) => { | ||
| this.generatedTitleSuggestions = data.suggestions; | ||
| }).catch(popupAjaxError).finally(() => { | ||
| this.loading = false; | ||
| this.suggestTitleIcon = "sync-alt"; | ||
| this.showMenu = true; | ||
| }); | ||
|
|
||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| # frozen_string_literal: true | ||
|
|
||
| module PageObjects | ||
| module Components | ||
| class AITitleSuggester < PageObjects::Components::Base | ||
| BUTTON_SELECTOR = ".suggest-titles-button" | ||
| MENU_SELECTOR = ".ai-title-suggestions-menu" | ||
|
|
||
| def click_suggest_titles_button | ||
| find(BUTTON_SELECTOR, visible: :all).click | ||
| end | ||
|
|
||
| def select_title_suggestion(index) | ||
| find("#{MENU_SELECTOR} li[data-value=\"#{index}\"]").click | ||
| end | ||
|
|
||
| def has_dropdown? | ||
| has_css?(MENU_SELECTOR) | ||
| end | ||
|
|
||
| def has_no_dropdown? | ||
| has_no_css?(MENU_SELECTOR) | ||
| end | ||
| end | ||
| end | ||
| end |