UX: Display a tooltip signalling this is an AI powered feature (#1141)

This commit is contained in:
Roman Rizzi 2025-02-20 16:21:26 -03:00 committed by GitHub
parent 6765a13a40
commit f922012499
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 76 additions and 6 deletions

View File

@ -2,6 +2,7 @@ import Component from "@glimmer/component";
import { service } from "@ember/service";
import icon from "discourse/helpers/d-icon";
import { i18n } from "discourse-i18n";
import DTooltip from "float-kit/components/d-tooltip";
import AiSearchDiscoveries from "../../components/ai-search-discoveries";
export default class AiFullPageDiscobotDiscoveries extends Component {
@ -23,8 +24,34 @@ export default class AiFullPageDiscobotDiscoveries extends Component {
<h3
class="ai-search-discoveries__discoveries-title full-page-discoveries"
>
{{icon "robot"}}
{{i18n "discourse_ai.discobot_discoveries.main_title"}}
<span>
{{icon "robot"}}
{{i18n "discourse_ai.discobot_discoveries.main_title"}}
</span>
<span class="ai-search-discoveries-tooltip">
<DTooltip @placement="top-end">
<:trigger>
{{icon "circle-info"}}
</:trigger>
<:content>
<div class="ai-search-discoveries-tooltip__content">
<div class="ai-search-discoveries-tooltip__header">
{{i18n "discourse_ai.discobot_discoveries.tooltip.header"}}
</div>
<div class="ai-search-discoveries-tooltip__content">
{{#if this.discobotDiscoveries.modelUsed}}
{{i18n
"discourse_ai.discobot_discoveries.tooltip.content"
model=this.discobotDiscoveries.modelUsed
}}
{{/if}}
</div>
</div>
</:content>
</DTooltip>
</span>
</h3>
<div class="full-page-discoveries">
<AiSearchDiscoveries @searchTerm={{@outletArgs.search}} />

View File

@ -2,6 +2,7 @@ import Component from "@glimmer/component";
import { service } from "@ember/service";
import icon from "discourse/helpers/d-icon";
import { i18n } from "discourse-i18n";
import DTooltip from "float-kit/components/d-tooltip";
import AiSearchDiscoveries from "../../components/ai-search-discoveries";
export default class AiDiscobotDiscoveries extends Component {
@ -18,8 +19,34 @@ export default class AiDiscobotDiscoveries extends Component {
<template>
<div class="ai-discobot-discoveries">
<h3 class="ai-search-discoveries__discoveries-title">
{{icon "robot"}}
{{i18n "discourse_ai.discobot_discoveries.main_title"}}
<span>
{{icon "robot"}}
{{i18n "discourse_ai.discobot_discoveries.main_title"}}
</span>
<span class="ai-search-discoveries-tooltip">
<DTooltip @placement="top-end">
<:trigger>
{{icon "circle-info"}}
</:trigger>
<:content>
<div class="ai-search-discoveries-tooltip__content">
<div class="ai-search-discoveries-tooltip__header">
{{i18n "discourse_ai.discobot_discoveries.tooltip.header"}}
</div>
<div class="ai-search-discoveries-tooltip__content">
{{#if this.discobotDiscoveries.modelUsed}}
{{i18n
"discourse_ai.discobot_discoveries.tooltip.content"
model=this.discobotDiscoveries.modelUsed
}}
{{/if}}
</div>
</div>
</:content>
</DTooltip>
</span>
</h3>
<AiSearchDiscoveries />

View File

@ -18,12 +18,28 @@
border-bottom: 1px solid var(--primary-low);
}
&__discoveries-title {
display: flex;
justify-content: space-between;
}
&__toggle {
padding-left: 0;
margin-bottom: 0.5em;
}
}
.ai-search-discoveries-tooltip {
&__header {
font-weight: bold;
margin-bottom: 0.5em;
}
.fk-d-tooltip__trigger {
vertical-align: middle;
}
}
.ai-discobot-discoveries {
padding: 0.5em;
}

View File

@ -680,8 +680,8 @@ en:
collapse: "Collapse"
timed_out: "Discobot couldn't find any discoveries. Something went wrong."
tooltip:
title: "AI powered search"
body: "Natural language search powered by %{model}"
header: "AI powered search"
content: "Natural language search powered by %{model}"
review:
types:
reviewable_ai_post: