FEATURE: AI suggestion buttons in `move-to-topic` modal (#360)
This commit is contained in:
Keegan George
GitHub
parent
83744bf192
commit
d674e47ca4
|
|
@ -0,0 +1,147 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { fn } from "@ember/helper";
|
||||
import { on } from "@ember/modifier";
|
||||
import { action } from "@ember/object";
|
||||
import { inject as service } from "@ember/service";
|
||||
import DButton from "discourse/components/d-button";
|
||||
import categoryBadge from "discourse/helpers/category-badge";
|
||||
import { ajax } from "discourse/lib/ajax";
|
||||
import { popupAjaxError } from "discourse/lib/ajax-error";
|
||||
import DMenu from "float-kit/components/d-menu";
|
||||
import eq from "truth-helpers/helpers/eq";
|
||||
|
||||
export default class AiSplitTopicSuggester extends Component {
|
||||
@service site;
|
||||
@service menu;
|
||||
@tracked suggestions = [];
|
||||
@tracked loading = false;
|
||||
@tracked icon = "discourse-sparkles";
|
||||
SUGGESTION_TYPES = {
|
||||
title: "suggest_title",
|
||||
category: "suggest_category",
|
||||
tag: "suggest_tags",
|
||||
};
|
||||
|
||||
get input() {
|
||||
return this.args.selectedPosts.map((item) => item.cooked).join("\n");
|
||||
}
|
||||
|
||||
get disabled() {
|
||||
return this.loading || this.suggestions.length > 0;
|
||||
}
|
||||
|
||||
@action
|
||||
loadSuggestions() {
|
||||
if (this.loading || this.suggestions.length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
|
||||
ajax(`/discourse-ai/ai-helper/${this.args.mode}`, {
|
||||
method: "POST",
|
||||
data: { text: this.input },
|
||||
})
|
||||
.then((result) => {
|
||||
if (this.args.mode === this.SUGGESTION_TYPES.title) {
|
||||
this.suggestions = result.suggestions;
|
||||
} else if (this.args.mode === this.SUGGESTION_TYPES.category) {
|
||||
const suggestions = result.assistant.map((s) => s.name);
|
||||
const suggestedCategories = this.site.categories.filter((item) =>
|
||||
suggestions.includes(item.name.toLowerCase())
|
||||
);
|
||||
this.suggestions = suggestedCategories;
|
||||
} else {
|
||||
this.suggestions = result.assistant.map((s) => s.name);
|
||||
}
|
||||
})
|
||||
.catch(popupAjaxError)
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
@action
|
||||
applySuggestion(suggestion, menu) {
|
||||
if (!this.args.mode) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.args.mode === this.SUGGESTION_TYPES.title) {
|
||||
this.args.updateAction(suggestion);
|
||||
return menu.close();
|
||||
}
|
||||
|
||||
if (this.args.mode === this.SUGGESTION_TYPES.category) {
|
||||
this.args.updateAction(suggestion.id);
|
||||
return menu.close();
|
||||
}
|
||||
|
||||
if (this.args.mode === this.SUGGESTION_TYPES.tag) {
|
||||
if (this.args.currentValue) {
|
||||
if (Array.isArray(this.args.currentValue)) {
|
||||
const updatedTags = [...this.args.currentValue, suggestion];
|
||||
this.args.updateAction([...new Set(updatedTags)]);
|
||||
} else {
|
||||
const updatedTags = [this.args.currentValue, suggestion];
|
||||
this.args.updateAction([...new Set(updatedTags)]);
|
||||
}
|
||||
} else {
|
||||
this.args.updateAction(suggestion);
|
||||
}
|
||||
return menu.close();
|
||||
}
|
||||
}
|
||||
|
||||
<template>
|
||||
{{#if this.loading}}
|
||||
{{!
|
||||
Dynamically changing @icon of DMenu
|
||||
causes it to rerender after load and
|
||||
close the menu once data is loaded.
|
||||
This workaround mimics an icon change of
|
||||
the button by adding an overlapping
|
||||
disabled button while loading}}
|
||||
<DButton
|
||||
class="ai-split-topic-loading-placeholder"
|
||||
@disabled={{true}}
|
||||
@icon="spinner"
|
||||
/>
|
||||
{{/if}}
|
||||
<DMenu
|
||||
@icon="discourse-sparkles"
|
||||
@interactive={{true}}
|
||||
@identifier="ai-split-topic-suggestion-menu"
|
||||
class="ai-split-topic-suggestion-button"
|
||||
data-suggestion-mode={{@mode}}
|
||||
{{on "click" this.loadSuggestions}}
|
||||
as |menu|
|
||||
>
|
||||
<ul class="ai-split-topic-suggestion__results">
|
||||
{{#unless this.loading}}
|
||||
{{#each this.suggestions as |suggestion index|}}
|
||||
{{#if (eq @mode "suggest_category")}}
|
||||
<li
|
||||
data-name={{suggestion.name}}
|
||||
data-value={{suggestion.id}}
|
||||
class="ai-split-topic-suggestion__category-result"
|
||||
role="button"
|
||||
{{on "click" (fn this.applySuggestion suggestion menu)}}
|
||||
>
|
||||
{{categoryBadge suggestion}}
|
||||
</li>
|
||||
{{else}}
|
||||
<li data-name={{suggestion}} data-value={{index}}>
|
||||
<DButton
|
||||
@translatedLabel={{suggestion}}
|
||||
@action={{fn this.applySuggestion suggestion menu}}
|
||||
/>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
{{/unless}}
|
||||
</ul>
|
||||
</DMenu>
|
||||
</template>
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { inject as service } from "@ember/service";
|
||||
import AiSplitTopicSuggester from "../../components/ai-split-topic-suggester";
|
||||
import { showPostAIHelper } from "../../lib/show-ai-helper";
|
||||
|
||||
export default class AiCategorySuggestion extends Component {
|
||||
static shouldRender(outletArgs, helper) {
|
||||
return showPostAIHelper(outletArgs, helper);
|
||||
}
|
||||
|
||||
@service siteSettings;
|
||||
|
||||
<template>
|
||||
{{#if this.siteSettings.ai_embeddings_enabled}}
|
||||
<AiSplitTopicSuggester
|
||||
@selectedPosts={{@outletArgs.selectedPosts}}
|
||||
@mode="suggest_category"
|
||||
@updateAction={{@outletArgs.updateCategoryId}}
|
||||
/>
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { inject as service } from "@ember/service";
|
||||
import AiSplitTopicSuggester from "../../components/ai-split-topic-suggester";
|
||||
import { showPostAIHelper } from "../../lib/show-ai-helper";
|
||||
|
||||
export default class AiTagSuggestion extends Component {
|
||||
static shouldRender(outletArgs, helper) {
|
||||
return showPostAIHelper(outletArgs, helper);
|
||||
}
|
||||
|
||||
@service siteSettings;
|
||||
|
||||
<template>
|
||||
{{#if this.siteSettings.ai_embeddings_enabled}}
|
||||
<AiSplitTopicSuggester
|
||||
@selectedPosts={{@outletArgs.selectedPosts}}
|
||||
@mode="suggest_tags"
|
||||
@updateAction={{@outletArgs.updateTags}}
|
||||
@currentValue={{@outletArgs.tags}}
|
||||
/>
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import Component from "@glimmer/component";
|
||||
import AiSplitTopicSuggester from "../../components/ai-split-topic-suggester";
|
||||
import { showPostAIHelper } from "../../lib/show-ai-helper";
|
||||
|
||||
export default class AiTitleSuggestion extends Component {
|
||||
static shouldRender(outletArgs, helper) {
|
||||
return showPostAIHelper(outletArgs, helper);
|
||||
}
|
||||
|
||||
<template>
|
||||
<AiSplitTopicSuggester
|
||||
@selectedPosts={{@outletArgs.selectedPosts}}
|
||||
@mode="suggest_title"
|
||||
@updateAction={{@outletArgs.updateTopicName}}
|
||||
/>
|
||||
</template>
|
||||
}
|
||||
|
|
@ -350,3 +350,78 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.choose-topic-modal .split-new-topic-form {
|
||||
.control-group {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
label {
|
||||
flex: 100%;
|
||||
}
|
||||
|
||||
input,
|
||||
.combo-box,
|
||||
.multi-select {
|
||||
flex: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ai-split-topic-suggestion-button {
|
||||
.d-icon-spinner {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ai-split-topic-suggestion__results {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
margin: 0;
|
||||
|
||||
.btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: var(--d-hover);
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
li:not(:last-child) {
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
}
|
||||
|
||||
.ai-split-topic-suggestion__category-result {
|
||||
font-size: var(--font-0);
|
||||
padding: 0.5em 1rem;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: var(--d-hover);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fk-d-menu[data-identifier="ai-split-topic-suggestion-menu"] {
|
||||
z-index: z("modal", "dropdown");
|
||||
}
|
||||
|
||||
.ai-split-topic-loading-placeholder {
|
||||
.d-icon-spinner {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
+ .ai-split-topic-suggestion-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,133 @@
|
|||
# frozen_string_literal: true
|
||||
|
||||
RSpec.describe "AI Post helper", type: :system, js: true do
|
||||
fab!(:user) { Fabricate(:admin) }
|
||||
fab!(:non_member_group) { Fabricate(:group) }
|
||||
fab!(:topic) { Fabricate(:topic) }
|
||||
fab!(:category) { Fabricate(:category) }
|
||||
fab!(:category_2) { Fabricate(:category) }
|
||||
fab!(:post) do
|
||||
Fabricate(
|
||||
:post,
|
||||
topic: topic,
|
||||
raw:
|
||||
"I like to eat pie. It is a very good dessert. Some people are wasteful by throwing pie at others but I do not do that. I always eat the pie.",
|
||||
)
|
||||
end
|
||||
fab!(:post_2) do
|
||||
Fabricate(
|
||||
:post,
|
||||
topic: topic,
|
||||
raw: "I prefer to eat croissants. They are my personal favorite dessert!",
|
||||
)
|
||||
end
|
||||
fab!(:post_3) do
|
||||
Fabricate(
|
||||
:post,
|
||||
topic: topic,
|
||||
raw: "I disagree with both of you, I think cake is the best dessert.",
|
||||
)
|
||||
end
|
||||
let(:topic_page) { PageObjects::Pages::Topic.new }
|
||||
let(:suggestion_menu) { PageObjects::Components::AiSplitTopicSuggester.new }
|
||||
fab!(:video) { Fabricate(:tag) }
|
||||
fab!(:music) { Fabricate(:tag) }
|
||||
fab!(:cloud) { Fabricate(:tag) }
|
||||
fab!(:feedback) { Fabricate(:tag) }
|
||||
fab!(:review) { Fabricate(:tag) }
|
||||
|
||||
before do
|
||||
Group.find_by(id: Group::AUTO_GROUPS[:admins]).add(user)
|
||||
SiteSetting.composer_ai_helper_enabled = true
|
||||
sign_in(user)
|
||||
end
|
||||
|
||||
def open_move_topic_modal
|
||||
topic_page.visit_topic(topic)
|
||||
find(".topic-timeline .toggle-admin-menu").click
|
||||
find(".topic-admin-multi-select .btn").click
|
||||
find("#post_2 .select-posts .select-below").click
|
||||
find(".move-to-topic").click
|
||||
end
|
||||
|
||||
describe "moving posts to a new topic" do
|
||||
context "when suggesting titles with AI title suggester" do
|
||||
let(:mode) { CompletionPrompt::GENERATE_TITLES }
|
||||
let(:titles) do
|
||||
"<item>Pie: A delicious dessert</item><item>Cake is the best!</item><item>Croissants are delightful</item><item>Some great desserts</item><item>What is the best dessert?</item>"
|
||||
end
|
||||
|
||||
it "opens a menu with title suggestions" do
|
||||
open_move_topic_modal
|
||||
DiscourseAi::Completions::Llm.with_prepared_responses([titles]) do
|
||||
suggestion_menu.click_suggest_titles_button
|
||||
wait_for { suggestion_menu.has_dropdown? }
|
||||
expect(suggestion_menu).to have_dropdown
|
||||
end
|
||||
end
|
||||
|
||||
it "replaces the title input with the selected title" do
|
||||
open_move_topic_modal
|
||||
DiscourseAi::Completions::Llm.with_prepared_responses([titles]) do
|
||||
suggestion_menu.click_suggest_titles_button
|
||||
wait_for { suggestion_menu.has_dropdown? }
|
||||
suggestion_menu.select_suggestion_by_value(1)
|
||||
expected_title = "Cake is the best!"
|
||||
expect(find("#split-topic-name").value).to eq(expected_title)
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
context "when suggesting categories with AI category suggester" do
|
||||
before { SiteSetting.ai_embeddings_enabled = true }
|
||||
|
||||
skip "TODO: Category suggester only loading one category in test" do
|
||||
it "updates the category with the suggested category" do
|
||||
response =
|
||||
Category
|
||||
.take(3)
|
||||
.pluck(:name)
|
||||
.map { |s| { name: s, score: rand(0.0...45.0) } }
|
||||
.sort { |h| h[:score] }
|
||||
DiscourseAi::AiHelper::SemanticCategorizer
|
||||
.any_instance
|
||||
.stubs(:categories)
|
||||
.returns(response)
|
||||
|
||||
open_move_topic_modal
|
||||
suggestion_menu.click_suggest_category_button
|
||||
wait_for { suggestion_menu.has_dropdown? }
|
||||
suggestion = category.name
|
||||
suggestion_menu.select_suggestion_by_name(suggestion)
|
||||
category_selector = page.find(".category-chooser summary")
|
||||
|
||||
expect(category_selector["data-name"]).to eq(suggestion)
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
context "when suggesting tags with AI tag suggester" do
|
||||
before { SiteSetting.ai_embeddings_enabled = true }
|
||||
|
||||
it "updatse the tag with the suggested tag" do
|
||||
response =
|
||||
Tag
|
||||
.take(5)
|
||||
.pluck(:name)
|
||||
.map { |s| { name: s, score: rand(0.0...45.0) } }
|
||||
.sort { |h| h[:score] }
|
||||
DiscourseAi::AiHelper::SemanticCategorizer.any_instance.stubs(:tags).returns(response)
|
||||
|
||||
open_move_topic_modal
|
||||
suggestion_menu.click_suggest_tags_button
|
||||
wait_for { suggestion_menu.has_dropdown? }
|
||||
|
||||
suggestion = suggestion_menu.suggestion_name(0)
|
||||
suggestion_menu.select_suggestion_by_value(0)
|
||||
tag_selector = page.find(".tag-chooser summary")
|
||||
|
||||
expect(tag_selector["data-name"]).to eq(suggestion)
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
# frozen_string_literal: true
|
||||
|
||||
module PageObjects
|
||||
module Components
|
||||
class AiSplitTopicSuggester < PageObjects::Components::Base
|
||||
SUGGESTION_BUTTON_SELECTOR = ".ai-split-topic-suggestion-button"
|
||||
TITLE_BUTTON_SELECTOR = "#{SUGGESTION_BUTTON_SELECTOR}[data-suggestion-mode='suggest_title']"
|
||||
CATEGORY_BUTTON_SELECTOR =
|
||||
"#{SUGGESTION_BUTTON_SELECTOR}[data-suggestion-mode='suggest_category']"
|
||||
TAG_BUTTON_SELECTOR = "#{SUGGESTION_BUTTON_SELECTOR}[data-suggestion-mode='suggest_tags']"
|
||||
MENU_SELECTOR = ".fk-d-menu[data-identifier='ai-split-topic-suggestion-menu']"
|
||||
|
||||
def click_suggest_titles_button
|
||||
page.find(TITLE_BUTTON_SELECTOR, visible: :all).click
|
||||
end
|
||||
|
||||
def click_suggest_category_button
|
||||
find(CATEGORY_BUTTON_SELECTOR, visible: :all).click
|
||||
end
|
||||
|
||||
def click_suggest_tags_button
|
||||
find(TAG_BUTTON_SELECTOR, visible: :all).click
|
||||
end
|
||||
|
||||
def select_suggestion_by_value(index)
|
||||
find("#{MENU_SELECTOR} li[data-value=\"#{index}\"]").click
|
||||
end
|
||||
|
||||
def select_suggestion_by_name(name)
|
||||
find("#{MENU_SELECTOR} li[data-name=\"#{name}\"]").click
|
||||
end
|
||||
|
||||
def suggestion_name(index)
|
||||
suggestion = find("#{MENU_SELECTOR} li[data-value=\"#{index}\"]")
|
||||
suggestion["data-name"]
|
||||
end
|
||||
|
||||
def has_dropdown?
|
||||
has_css?(MENU_SELECTOR)
|
||||
end
|
||||
|
||||
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
|
||||
Loading…
Reference in New Issue