Skip to content

Commit 9b158d1

Browse files
skeptrunedevcdxker
skeptrunedev
authored and
cdxker
committed
feature(shopify): use hardcoded arrow-right-icon for suggestions, fix inline-component template to render consistently
1 parent 34f7c57 commit 9b158d1

5 files changed

Lines changed: 65 additions & 132 deletions

File tree

‎clients/search-component/src/TrieveModal/Chat/SuggestedQuestions.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useChatState } from "../../utils/hooks/chat-context";
44
import { useModalState } from "../../utils/hooks/modal-context";
55
import { cn } from "../../utils/styles";
66
import { useAutoAnimate } from "@formkit/auto-animate/react";
7-
import { SparklesIcon } from "../icons";
7+
import { ArrowRotateRightIcon, SparklesIcon } from "../icons";
88
import { AIInitialMessage } from "./AIInitalMessage";
99

1010
export const SuggestedQuestions = ({
@@ -44,7 +44,7 @@ export const SuggestedQuestions = ({
4444
className="suggested-question tv-cursor-pointer tv-border tv-rounded-md tv-p-1 tv-text-xs disabled:tv-cursor-not-allowed tv-text-center"
4545
title="Refresh suggested questions"
4646
>
47-
<i className="fa-solid fa-arrow-rotate-right"></i>
47+
<ArrowRotateRightIcon height={15} width={15} />
4848
</button>{" "}
4949
{!suggestedQuestions.length && (
5050
<span className="suggested-question tv-text-nowrap empty-state-loading">

‎clients/search-component/src/TrieveModal/icons.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -316,3 +316,14 @@ export const MagnifyingGlassIcon = (props: SVGAttributes<SVGElement>) => (
316316
<path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z" />
317317
</svg>
318318
);
319+
320+
export const ArrowRotateRightIcon = (props: SVGAttributes<SVGElement>) => (
321+
<svg
322+
xmlns="http://www.w3.org/2000/svg"
323+
viewBox="0 0 512 512"
324+
fill="currentColor"
325+
{...props}
326+
>
327+
<path d="M386.3 160L336 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l128 0c17.7 0 32-14.3 32-32l0-128c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3s163.8-62.5 226.3 0L386.3 160z"></path>
328+
</svg>
329+
);

‎clients/search-component/src/utils/hooks/useSuggestedQuestions.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const useSuggestedQuestions = () => {
88
const [isLoading, setIsLoading] = useState(false);
99
const [suggestedQuestions, setSuggestedQuestions] = useState<
1010
SuggestedQueriesResponse["queries"]
11-
>([]);
11+
>(props.defaultAiQuestions ?? []);
1212

1313
const getQuestions = async () => {
1414
setIsLoading(true);

‎clients/trieve-shopify-extension/extensions/global-search/blocks/inline_component.liquid‎

Lines changed: 47 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,18 @@
1010
import {addToCart, checkCartQuantity} from '{{'cart-manager.js' | asset_url}}';
1111
1212
const inlineRoot = document.querySelector(".trieve-inline-root");
13-
console.log("root", inlineRoot,"please", "metafields {{ app.metafields }}", "{{ block.settings.product.id }}", "{{ block.settings.product.metafields }}");
13+
const appMetafieldTrieve = {{ app.metafields.trieve | json }};
14+
15+
const blockSettings = {{ block.settings | json }};
16+
const productMetafieldTrieve = {{ product.metafields.trieve | json }};
17+
let trievePDPQuestions = null;
18+
if (productMetafieldTrieve && Object.keys(productMetafieldTrieve).includes("trievePDPQuestions")) {
19+
trievePDPQuestions = productMetafieldTrieve.trievePDPQuestions;
20+
}
21+
let defaultAiQuestions = null;
22+
if (trievePDPQuestions && trievePDPQuestions.length > 0) {
23+
defaultAiQuestions = trievePDPQuestions.map((question) => question.text);
24+
}
1425
1526
const toBool = (value) => value === 'true';
1627
const getValue = (value, defaultValue) => {
@@ -20,33 +31,40 @@
2031
return value;
2132
};
2233
23-
renderToDiv(inlineRoot, {
24-
inline: true,
25-
apiKey: getValue("{{ app.metafields.trieve.api_key }}", ""),
26-
datasetId: getValue("{{ app.metafields.trieve.dataset_id }}", ""),
27-
baseUrl: getValue("{{ block.settings.base_url }}", "https://api.trieve.ai"),
28-
type: "ecommerce",
29-
useGroupSearch: true,
30-
allowSwitchingModes: toBool(getValue("{{ block.settings.allow_switching_modes }}", true)),
31-
zIndex: Number(getValue("{{ block.settings.z_index }}", 21474830000000)),
32-
scaleRem: true,
33-
defaultSearchMode: getValue("{{ block.settings.default_search_mode }}", "chat"),
34-
brandName: getValue("{{ block.settings.brand_name }}", ""),
35-
brandColor: getValue("{{ block.settings.brand_color }}", ""),
36-
placeholder: getValue("{{ block.settings.placeholder }}", "Search..."),
37-
chatPlaceholder: getValue("{{ block.settings.chat_placeholder }}", "Ask Anything..."),
38-
suggestedQueries: toBool(getValue("{{ block.settings.suggested_queries }}", true)),
39-
followupQuestions: toBool(getValue("{{ block.settings.suggested_queries }}", true)),
40-
numberOfSuggestions: Number(getValue("{{ block.settings.number_of_suggestions }}", 3)),
41-
theme: getValue("{{ block.settings.theme }}", "light"),
42-
inlineHeader: "{{ block.settings.inline_header }} ",
43-
onAddToCart: (chunk) => {
44-
addToCart(parseInt(chunk.tracking_id))
45-
},
46-
getCartQuantity: (trackingId) => {
47-
return checkCartQuantity(parseInt(trackingId));
48-
},
49-
});
34+
if (!appMetafieldTrieve.dataset_id || !appMetafieldTrieve.api_key) {
35+
console.error("Trieve: Cannut render inline Triece comopnent due to missing dataset_id or api_key in the app metafields");
36+
} else {
37+
console.log("Trieve: Found dataset_id and api_key in the app metafields", appMetafieldTrieve.dataset_id, appMetafieldTrieve.api_key, defaultAiQuestions);
38+
39+
renderToDiv(inlineRoot, {
40+
inline: true,
41+
apiKey: appMetafieldTrieve.api_key,
42+
datasetId: appMetafieldTrieve.dataset_id,
43+
baseUrl: getValue("{{ block.settings.base_url }}", "https://api.trieve.ai"),
44+
type: "ecommerce",
45+
useGroupSearch: true,
46+
allowSwitchingModes: toBool(getValue("{{ block.settings.allow_switching_modes }}", true)),
47+
zIndex: Number(getValue("{{ block.settings.z_index }}", 2147483645)),
48+
scaleRem: true,
49+
defaultSearchMode: getValue("{{ block.settings.default_search_mode }}", "chat"),
50+
brandName: getValue("{{ block.settings.brand_name }}", ""),
51+
brandColor: getValue("{{ block.settings.brand_color }}", ""),
52+
placeholder: getValue("{{ block.settings.placeholder }}", "Search..."),
53+
chatPlaceholder: getValue("{{ block.settings.chat_placeholder }}", "Ask Anything..."),
54+
suggestedQueries: toBool(getValue("{{ block.settings.suggested_queries }}", true)),
55+
followupQuestions: toBool(getValue("{{ block.settings.suggested_queries }}", true)),
56+
numberOfSuggestions: Number(getValue("{{ block.settings.number_of_suggestions }}", 3)),
57+
defaultAiQuestions,
58+
theme: getValue("{{ block.settings.theme }}", "light"),
59+
inlineHeader: "{{ block.settings.inline_header }} ",
60+
onAddToCart: (chunk) => {
61+
addToCart(parseInt(chunk.tracking_id))
62+
},
63+
getCartQuantity: (trackingId) => {
64+
return checkCartQuantity(parseInt(trackingId));
65+
},
66+
});
67+
}
5068
</script>
5169

5270
{% comment %}
@@ -57,102 +75,6 @@
5775
{% schema %}
5876
{
5977
"name": "Trieve Product Chat",
60-
"target": "section",
61-
"settings": [
62-
{
63-
"type": "text",
64-
"id": "base_url",
65-
"label": "Base URL",
66-
"default": "https://api.trieve.ai"
67-
},
68-
{
69-
"type": "select",
70-
"id": "default_search_mode",
71-
"label": "Default Search Mode",
72-
"options": [
73-
{ "label": "Search", "value": "search" },
74-
{ "label": "Chat", "value": "chat" }
75-
],
76-
"default": "chat"
77-
},
78-
{
79-
"type": "text",
80-
"id": "placeholder",
81-
"label": "Search Placeholder Text",
82-
"default": "Search..."
83-
},
84-
{
85-
"type": "text",
86-
"id": "chat_placeholder",
87-
"label": "Chat Placeholder Text",
88-
"default": "Ask Anything..."
89-
},
90-
{
91-
"type": "select",
92-
"id": "theme",
93-
"label": "Theme",
94-
"options": [
95-
{ "label": "Light", "value": "light" },
96-
{ "label": "Dark", "value": "dark" }
97-
],
98-
"default": "light"
99-
},
100-
{
101-
"type": "color",
102-
"id": "brand_color",
103-
"label": "Brand Color",
104-
"default": "#ff0000"
105-
},
106-
{
107-
"type": "text",
108-
"id": "brand_name",
109-
"label": "Brand Name",
110-
"default": "TrieveAi"
111-
},
112-
{
113-
"type": "checkbox",
114-
"id": "suggested_queries",
115-
"label": "Show Suggested Queries",
116-
"default": true
117-
},
118-
{
119-
"type": "number",
120-
"id": "number_of_suggestions",
121-
"label": "Number of Suggestions",
122-
"default": 3
123-
},
124-
{
125-
"type": "select",
126-
"id": "type",
127-
"label": "Modal Type",
128-
"options": [
129-
{ "label": "Docs", "value": "docs" },
130-
{ "label": "E-commerce", "value": "ecommerce" }
131-
],
132-
"default": "docs"
133-
},
134-
{
135-
"type": "checkbox",
136-
"id": "allow_switching_modes",
137-
"label": "Allow Switching Modes",
138-
"default": true
139-
},
140-
{
141-
"type": "checkbox",
142-
"id": "open_links_new_tab",
143-
"label": "Open Links in New Tab",
144-
"default": false
145-
},
146-
{
147-
"type": "text",
148-
"id": "inline_header",
149-
"label": "Inline Header"
150-
},
151-
{
152-
"type": "number",
153-
"id": "z_index",
154-
"label": "Z-Index"
155-
}
156-
]
78+
"target": "section"
15779
}
15880
{% endschema %}

‎clients/trieve-shopify-extension/extensions/issue-tracker-block/src/BlockExtension.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -85,15 +85,15 @@ export async function updateTrievePDPQuestions(
8585
id: $id
8686
metafields: [
8787
{
88-
namespace: "$app:trievePDPQuestions"
88+
namespace: "trieve"
8989
key: "trievePDPQuestions"
9090
value: $value
9191
type: "json"
9292
}
9393
]
9494
}) {
9595
product {
96-
metafield(namespace: "$app:trievePDPQuestions", key: "trievePDPQuestions") {
96+
metafield(namespace: "trieve", key: "trievePDPQuestions") {
9797
value
9898
type
9999
}
@@ -119,7 +119,7 @@ export async function getTrievePDPQuestions(productId: string) {
119119
title
120120
description
121121
productType
122-
metafield(namespace: "$app:trievePDPQuestions", key:"trievePDPQuestions") {
122+
metafield(namespace: "trieve", key:"trievePDPQuestions") {
123123
value
124124
}
125125
variants(first: 2) {
@@ -281,7 +281,7 @@ function App() {
281281

282282
getTrievePDPQuestions(productId).then((productData) => {
283283
let pdpQuestions = JSON.parse(
284-
productData.data.product.metafield.value ?? "[]",
284+
productData.data.product.metafield?.value ?? "[]",
285285
);
286286
if (!pdpQuestions) {
287287
pdpQuestions = [];

0 commit comments

Comments
 (0)