Skip to content

Commit 05c3275

Browse files
mohdashraf010897mohdashraf010897
committed
feat(vue): SearchBox - add support for trigger props
1 parent 8719d56 commit 05c3275

File tree

1 file changed

+149
-48
lines changed

1 file changed

+149
-48
lines changed

‎packages/vue/src/components/search/SearchBox.jsx‎

Lines changed: 149 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import xss from 'xss';
66
import { Remarkable } from 'remarkable';
77
import {
88
AI_LOCAL_CACHE_KEY,
9+
AI_TRIGGER_MODES,
910
componentTypes,
1011
SEARCH_COMPONENTS_MODES,
1112
} from '@appbaseio/reactivecore/lib/utils/constants';
@@ -156,6 +157,12 @@ const SearchBox = defineComponent({
156157
},
157158

158159
computed: {
160+
currentTriggerMode() {
161+
return (
162+
(this.$props.AIUIConfig && this.$props.AIUIConfig.triggerOn)
163+
|| AI_TRIGGER_MODES.MANUAL
164+
);
165+
},
159166
hasCustomRenderer() {
160167
return hasCustomRenderer(this);
161168
},
@@ -182,6 +189,13 @@ const SearchBox = defineComponent({
182189
if (Array.isArray(this.suggestions) && this.suggestions.length) {
183190
suggestionsArray = [...withClickIds(this.suggestions)];
184191
}
192+
if (this.renderTriggerMessage() && this.currentValue && !this.isLoading) {
193+
suggestionsArray.unshift({
194+
label: this.renderTriggerMessage(),
195+
value: 'AI_TRIGGER_MESSAGE',
196+
_suggestion_type: '_internal_a_i_trigger',
197+
});
198+
}
185199

186200
suggestionsArray = suggestionsArray.map((s) => {
187201
if (s.sectionId) {
@@ -481,6 +495,23 @@ const SearchBox = defineComponent({
481495
},
482496
},
483497
methods: {
498+
renderTriggerMessage() {
499+
if (this.$props.enableAI) {
500+
if (this.$props.AIUIConfig && this.$props.AIUIConfig.renderTriggerMessage) {
501+
return this.$props.AIUIConfig.renderTriggerMessage;
502+
}
503+
if (this.$slots.renderTriggerMessage) {
504+
return this.$slots.renderTriggerMessage();
505+
}
506+
if (
507+
this.currentTriggerMode === AI_TRIGGER_MODES.MANUAL
508+
&& (this.$props.AIUIConfig ? !this.$props.AIUIConfig.askButton : true)
509+
) {
510+
return 'Click to trigger AIAnswer';
511+
}
512+
}
513+
return null;
514+
},
484515
handleText(value, cause) {
485516
if (cause === causes.CLEAR_VALUE) {
486517
this.triggerCustomQuery(value);
@@ -595,7 +626,11 @@ const SearchBox = defineComponent({
595626
if (typeof this.currentValue === 'string')
596627
this.triggerDefaultQuery(
597628
this.currentValue,
598-
props.enableAI ? { enableAI: true } : {},
629+
props.enableAI
630+
&& this.currentTriggerMode === AI_TRIGGER_MODES.QUESTION
631+
&& this.currentValue.endsWith('?')
632+
? { enableAI: true }
633+
: {},
599634
shouldExecuteQuery,
600635
);
601636
} // in case of strict selection only SUGGESTION_SELECT should be able
@@ -869,17 +904,20 @@ const SearchBox = defineComponent({
869904
// The state of the suggestion is open by the time it reaches here. i.e. isOpen = true
870905
// handle when FAQ suggestion is clicked
871906
if (suggestion && suggestion._suggestion_type === suggestionTypes.FAQ) {
872-
this.currentValue= suggestion.value;
907+
this.currentValue = suggestion.value;
873908
// Handle AI
874909
// Independent of enableAI.
875910
this.faqAnswer = suggestion._answer;
876911
this.faqQuestion = suggestion.value;
877912
this.isOpen = true;
878913
this.showAIScreen = true;
879-
if (value !== undefined) this.$emit('change', suggestion.value, ()=>{} );
880-
this.onValueSelectedHandler(
881-
suggestion.value,
882-
);
914+
if (value !== undefined) this.$emit('change', suggestion.value, () => {});
915+
this.onValueSelectedHandler(suggestion.value);
916+
return;
917+
}
918+
if (suggestion && suggestion._suggestion_type === '_internal_a_i_trigger') {
919+
this.showAIScreen = true;
920+
this.askButtonOnClick();
883921
return;
884922
}
885923

@@ -940,7 +978,10 @@ const SearchBox = defineComponent({
940978

941979
// Handle AI
942980
if (!this.$props.enableAI) this.isOpen = false;
943-
else {
981+
else if (
982+
this.currentTriggerMode === AI_TRIGGER_MODES.QUESTION
983+
&& suggestion.value.endsWith('?')
984+
) {
944985
this.showAIScreen = true;
945986
}
946987
},
@@ -1675,48 +1716,108 @@ const SearchBox = defineComponent({
16751716
s.icon
16761717
|| s.iconURL,
16771718
);
1678-
return renderItem ? (
1679-
<li
1680-
{...getItemProps(
1681-
{
1682-
item: sectionItem,
1683-
},
1684-
)}
1685-
on={getItemEvents(
1686-
{
1687-
item: sectionItem,
1688-
},
1689-
)}
1690-
key={`${sectionItem._id}_${index}_${sectionIndex}`}
1691-
style={{
1692-
justifyContent:
1693-
'flex-start',
1694-
alignItems:
1695-
'center',
1696-
}}
1697-
class={`${
1698-
highlightedIndex
1699-
=== index
1700-
+ sectionIndex
1701-
? `active-li-item ${getClassName(
1702-
this
1703-
.$props
1704-
.innerClass,
1705-
'active-suggestion-item',
1706-
)}`
1707-
: `li-item ${getClassName(
1719+
1720+
if (
1721+
renderItem
1722+
) {
1723+
return (
1724+
<li
1725+
{...getItemProps(
1726+
{
1727+
item: sectionItem,
1728+
},
1729+
)}
1730+
on={getItemEvents(
1731+
{
1732+
item: sectionItem,
1733+
},
1734+
)}
1735+
key={`${sectionItem._id}_${index}_${sectionIndex}`}
1736+
style={{
1737+
justifyContent:
1738+
'flex-start',
1739+
alignItems:
1740+
'center',
1741+
}}
1742+
class={`${
1743+
highlightedIndex
1744+
=== index
1745+
+ sectionIndex
1746+
? `active-li-item ${getClassName(
1747+
this
1748+
.$props
1749+
.innerClass,
1750+
'active-suggestion-item',
1751+
)}`
1752+
: `li-item ${getClassName(
1753+
this
1754+
.$props
1755+
.innerClass,
1756+
'suggestion-item',
1757+
)}`
1758+
}`}
1759+
>
1760+
{renderItem(
1761+
sectionItem,
1762+
)}
1763+
</li>
1764+
);
1765+
}
1766+
1767+
if (
1768+
sectionItem._suggestion_type
1769+
=== '_internal_a_i_trigger'
1770+
) {
1771+
return (
1772+
<li
1773+
{...getItemProps(
1774+
{
1775+
item: sectionItem,
1776+
},
1777+
)}
1778+
on={getItemEvents(
1779+
{
1780+
item: sectionItem,
1781+
},
1782+
)}
1783+
key={`${sectionItem._id}_${index}_${sectionIndex}`}
1784+
style={{
1785+
justifyContent:
1786+
'flex-start',
1787+
alignItems:
1788+
'center',
1789+
}}
1790+
class={`${
1791+
highlightedIndex
1792+
=== index
1793+
+ sectionIndex
1794+
? `active-li-item ${getClassName(
1795+
this
1796+
.$props
1797+
.innerClass,
1798+
'active-suggestion-item',
1799+
)}`
1800+
: `li-item ${getClassName(
1801+
this
1802+
.$props
1803+
.innerClass,
1804+
'suggestion-item',
1805+
)}`
1806+
}`}
1807+
>
1808+
<SuggestionItem
1809+
currentValue={
17081810
this
1709-
.$props
1710-
.innerClass,
1711-
'suggestion-item',
1712-
)}`
1713-
}`}
1714-
>
1715-
{renderItem(
1716-
sectionItem,
1717-
)}
1718-
</li>
1719-
) : (
1811+
.currentValue
1812+
}
1813+
suggestion={
1814+
sectionItem
1815+
}
1816+
/>
1817+
</li>
1818+
);
1819+
}
1820+
return (
17201821
<li
17211822
{...getItemProps(
17221823
{

0 commit comments

Comments
 (0)