@shop-prompter/react 1.2.1 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/index.js +72 -61
- package/dist/index.mjs +72 -61
- package/package.json +1 -1
- package/src/shop-prompter.component.jsx +87 -73
- package/src/translations.ts +1 -1
package/CHANGELOG.md
CHANGED
package/dist/index.js
CHANGED
|
@@ -729,7 +729,7 @@ var TRANSLATIONS = {
|
|
|
729
729
|
disclaimer: "KI-Inhalte k\xF6nnen Fehler beinhalten.",
|
|
730
730
|
loadingProducts: "Produkte werden geladen...",
|
|
731
731
|
productFetchError: "Die Produkte konnten leider nicht geladen werden.",
|
|
732
|
-
predefinedPromptDisclaimer: "
|
|
732
|
+
predefinedPromptDisclaimer: "W\xE4hle einen Bereich, um die Unterhaltung zu starten."
|
|
733
733
|
}
|
|
734
734
|
};
|
|
735
735
|
function getTranslations(locale) {
|
|
@@ -1933,7 +1933,7 @@ function ShopPrompter(props) {
|
|
|
1933
1933
|
width: "24px",
|
|
1934
1934
|
height: "24px",
|
|
1935
1935
|
borderRadius: "4px",
|
|
1936
|
-
objectFit: "
|
|
1936
|
+
objectFit: "contain"
|
|
1937
1937
|
}
|
|
1938
1938
|
}
|
|
1939
1939
|
) : null,
|
|
@@ -1941,7 +1941,7 @@ function ShopPrompter(props) {
|
|
|
1941
1941
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles2.subHeaderContainer }) }),
|
|
1942
1942
|
!hasToken() && ((_a = apiConfigObj == null ? void 0 : apiConfigObj()) == null ? void 0 : _a.apiKey) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles2.warningBanner, children: t().apiKeyWarning }) : null,
|
|
1943
1943
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles2.subHeaderContainer, children: [
|
|
1944
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1944
|
+
!showWelcome() ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1945
1945
|
"button",
|
|
1946
1946
|
{
|
|
1947
1947
|
className: "sh-header-btn",
|
|
@@ -1949,7 +1949,7 @@ function ShopPrompter(props) {
|
|
|
1949
1949
|
style: styles2.headerButton,
|
|
1950
1950
|
children: t().newChat
|
|
1951
1951
|
}
|
|
1952
|
-
),
|
|
1952
|
+
) : null,
|
|
1953
1953
|
props.chatPosition === "classic-chatbot" || props.chatPosition === "right-panel" || props.chatPosition === "dialog" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1954
1954
|
"button",
|
|
1955
1955
|
{
|
|
@@ -2076,71 +2076,82 @@ function ShopPrompter(props) {
|
|
|
2076
2076
|
backgroundColor: themeObj().mainBackgroundColor || styles2.chatContainer.backgroundColor
|
|
2077
2077
|
},
|
|
2078
2078
|
children: [
|
|
2079
|
-
showWelcome() ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
2080
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
2081
|
-
"img",
|
|
2082
|
-
{
|
|
2083
|
-
alt: "ShopPrompter",
|
|
2084
|
-
src: (agentExperience == null ? void 0 : agentExperience.agentLogoUrl) ? agentExperience.agentLogoUrl : ICONS.shopprompter,
|
|
2085
|
-
style: {
|
|
2086
|
-
width: "96px",
|
|
2087
|
-
height: "96px",
|
|
2088
|
-
marginBottom: "24px",
|
|
2089
|
-
borderRadius: "12px",
|
|
2090
|
-
objectFit: "cover"
|
|
2091
|
-
}
|
|
2092
|
-
}
|
|
2093
|
-
),
|
|
2079
|
+
showWelcome() ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
2094
2080
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
2095
|
-
"
|
|
2081
|
+
"style",
|
|
2096
2082
|
{
|
|
2097
|
-
style: {
|
|
2098
|
-
...styles2.welcomeTitle,
|
|
2099
|
-
fontFamily: themeObj().fontFamily || styles2.welcomeTitle.fontFamily
|
|
2100
|
-
},
|
|
2101
2083
|
dangerouslySetInnerHTML: {
|
|
2102
|
-
__html:
|
|
2084
|
+
__html: ` .sh-prompt-btn:hover { background-color: ${themeObj().actionColor || "#2563eb"} !important; border-color: ${themeObj().actionColor || "#2563eb"} !important; } `
|
|
2103
2085
|
}
|
|
2104
2086
|
}
|
|
2105
2087
|
),
|
|
2106
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2088
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles2.welcomeContainer, children: [
|
|
2089
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
2090
|
+
"img",
|
|
2091
|
+
{
|
|
2092
|
+
alt: "ShopPrompter",
|
|
2093
|
+
src: (agentExperience == null ? void 0 : agentExperience.agentLogoUrl) ? agentExperience.agentLogoUrl : ICONS.shopprompter,
|
|
2094
|
+
style: {
|
|
2095
|
+
width: "96px",
|
|
2096
|
+
height: "96px",
|
|
2097
|
+
marginBottom: "24px",
|
|
2098
|
+
borderRadius: "12px",
|
|
2099
|
+
objectFit: "contain"
|
|
2100
|
+
}
|
|
2115
2101
|
}
|
|
2116
|
-
|
|
2117
|
-
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2102
|
+
),
|
|
2103
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
2104
|
+
"h3",
|
|
2105
|
+
{
|
|
2106
|
+
style: {
|
|
2107
|
+
...styles2.welcomeTitle,
|
|
2108
|
+
fontFamily: themeObj().fontFamily || styles2.welcomeTitle.fontFamily
|
|
2109
|
+
},
|
|
2110
|
+
dangerouslySetInnerHTML: {
|
|
2111
|
+
__html: ((_b = agentExperience == null ? void 0 : agentExperience.greeting) == null ? void 0 : _b.title) || t().welcomeToShopPrompter
|
|
2112
|
+
}
|
|
2113
|
+
}
|
|
2114
|
+
),
|
|
2115
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
2116
|
+
"p",
|
|
2117
|
+
{
|
|
2118
|
+
style: {
|
|
2119
|
+
...styles2.welcomeDescription,
|
|
2120
|
+
fontFamily: themeObj().fontFamily || styles2.welcomeDescription.fontFamily
|
|
2121
|
+
},
|
|
2122
|
+
dangerouslySetInnerHTML: {
|
|
2123
|
+
__html: ((_c = agentExperience == null ? void 0 : agentExperience.greeting) == null ? void 0 : _c.message) || t().welcomeDescription
|
|
2124
|
+
}
|
|
2125
|
+
}
|
|
2126
|
+
),
|
|
2127
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles2.buttonContainer, children: (_d = prompts()) == null ? void 0 : _d.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
2128
|
+
"button",
|
|
2129
|
+
{
|
|
2130
|
+
className: "sh-prompt-btn",
|
|
2131
|
+
style: {
|
|
2132
|
+
...styles2.button,
|
|
2133
|
+
borderColor: themeObj().actionColor || "#e5e7eb",
|
|
2134
|
+
outlineColor: themeObj().actionColor || void 0
|
|
2135
|
+
},
|
|
2136
|
+
onClick: (event) => {
|
|
2137
|
+
setInput(item.prompt);
|
|
2138
|
+
handleSend(item.prompt);
|
|
2139
|
+
},
|
|
2140
|
+
children: item.prompt
|
|
2140
2141
|
},
|
|
2141
|
-
|
|
2142
|
-
}
|
|
2143
|
-
|
|
2142
|
+
item.prompt
|
|
2143
|
+
)) }),
|
|
2144
|
+
requireClickOnPredefinedPromptVal() && prompts().length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
2145
|
+
"div",
|
|
2146
|
+
{
|
|
2147
|
+
style: {
|
|
2148
|
+
...styles2.predefinedPromptDisclaimer,
|
|
2149
|
+
fontFamily: themeObj().fontFamily || void 0
|
|
2150
|
+
},
|
|
2151
|
+
children: t().predefinedPromptDisclaimer
|
|
2152
|
+
}
|
|
2153
|
+
) : null
|
|
2154
|
+
] })
|
|
2144
2155
|
] }) : null,
|
|
2145
2156
|
!showWelcome() ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
2146
2157
|
"div",
|
package/dist/index.mjs
CHANGED
|
@@ -693,7 +693,7 @@ var TRANSLATIONS = {
|
|
|
693
693
|
disclaimer: "KI-Inhalte k\xF6nnen Fehler beinhalten.",
|
|
694
694
|
loadingProducts: "Produkte werden geladen...",
|
|
695
695
|
productFetchError: "Die Produkte konnten leider nicht geladen werden.",
|
|
696
|
-
predefinedPromptDisclaimer: "
|
|
696
|
+
predefinedPromptDisclaimer: "W\xE4hle einen Bereich, um die Unterhaltung zu starten."
|
|
697
697
|
}
|
|
698
698
|
};
|
|
699
699
|
function getTranslations(locale) {
|
|
@@ -1897,7 +1897,7 @@ function ShopPrompter(props) {
|
|
|
1897
1897
|
width: "24px",
|
|
1898
1898
|
height: "24px",
|
|
1899
1899
|
borderRadius: "4px",
|
|
1900
|
-
objectFit: "
|
|
1900
|
+
objectFit: "contain"
|
|
1901
1901
|
}
|
|
1902
1902
|
}
|
|
1903
1903
|
) : null,
|
|
@@ -1905,7 +1905,7 @@ function ShopPrompter(props) {
|
|
|
1905
1905
|
] }) : /* @__PURE__ */ jsx4(Fragment2, { children: /* @__PURE__ */ jsx4("div", { style: styles2.subHeaderContainer }) }),
|
|
1906
1906
|
!hasToken() && ((_a = apiConfigObj == null ? void 0 : apiConfigObj()) == null ? void 0 : _a.apiKey) ? /* @__PURE__ */ jsx4("div", { style: styles2.warningBanner, children: t().apiKeyWarning }) : null,
|
|
1907
1907
|
/* @__PURE__ */ jsxs4("div", { style: styles2.subHeaderContainer, children: [
|
|
1908
|
-
/* @__PURE__ */ jsx4(
|
|
1908
|
+
!showWelcome() ? /* @__PURE__ */ jsx4(
|
|
1909
1909
|
"button",
|
|
1910
1910
|
{
|
|
1911
1911
|
className: "sh-header-btn",
|
|
@@ -1913,7 +1913,7 @@ function ShopPrompter(props) {
|
|
|
1913
1913
|
style: styles2.headerButton,
|
|
1914
1914
|
children: t().newChat
|
|
1915
1915
|
}
|
|
1916
|
-
),
|
|
1916
|
+
) : null,
|
|
1917
1917
|
props.chatPosition === "classic-chatbot" || props.chatPosition === "right-panel" || props.chatPosition === "dialog" ? /* @__PURE__ */ jsx4(
|
|
1918
1918
|
"button",
|
|
1919
1919
|
{
|
|
@@ -2040,71 +2040,82 @@ function ShopPrompter(props) {
|
|
|
2040
2040
|
backgroundColor: themeObj().mainBackgroundColor || styles2.chatContainer.backgroundColor
|
|
2041
2041
|
},
|
|
2042
2042
|
children: [
|
|
2043
|
-
showWelcome() ? /* @__PURE__ */ jsxs4(
|
|
2044
|
-
/* @__PURE__ */ jsx4(
|
|
2045
|
-
"img",
|
|
2046
|
-
{
|
|
2047
|
-
alt: "ShopPrompter",
|
|
2048
|
-
src: (agentExperience == null ? void 0 : agentExperience.agentLogoUrl) ? agentExperience.agentLogoUrl : ICONS.shopprompter,
|
|
2049
|
-
style: {
|
|
2050
|
-
width: "96px",
|
|
2051
|
-
height: "96px",
|
|
2052
|
-
marginBottom: "24px",
|
|
2053
|
-
borderRadius: "12px",
|
|
2054
|
-
objectFit: "cover"
|
|
2055
|
-
}
|
|
2056
|
-
}
|
|
2057
|
-
),
|
|
2043
|
+
showWelcome() ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
|
|
2058
2044
|
/* @__PURE__ */ jsx4(
|
|
2059
|
-
"
|
|
2045
|
+
"style",
|
|
2060
2046
|
{
|
|
2061
|
-
style: {
|
|
2062
|
-
...styles2.welcomeTitle,
|
|
2063
|
-
fontFamily: themeObj().fontFamily || styles2.welcomeTitle.fontFamily
|
|
2064
|
-
},
|
|
2065
2047
|
dangerouslySetInnerHTML: {
|
|
2066
|
-
__html:
|
|
2048
|
+
__html: ` .sh-prompt-btn:hover { background-color: ${themeObj().actionColor || "#2563eb"} !important; border-color: ${themeObj().actionColor || "#2563eb"} !important; } `
|
|
2067
2049
|
}
|
|
2068
2050
|
}
|
|
2069
2051
|
),
|
|
2070
|
-
/* @__PURE__ */
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2052
|
+
/* @__PURE__ */ jsxs4("div", { style: styles2.welcomeContainer, children: [
|
|
2053
|
+
/* @__PURE__ */ jsx4(
|
|
2054
|
+
"img",
|
|
2055
|
+
{
|
|
2056
|
+
alt: "ShopPrompter",
|
|
2057
|
+
src: (agentExperience == null ? void 0 : agentExperience.agentLogoUrl) ? agentExperience.agentLogoUrl : ICONS.shopprompter,
|
|
2058
|
+
style: {
|
|
2059
|
+
width: "96px",
|
|
2060
|
+
height: "96px",
|
|
2061
|
+
marginBottom: "24px",
|
|
2062
|
+
borderRadius: "12px",
|
|
2063
|
+
objectFit: "contain"
|
|
2064
|
+
}
|
|
2079
2065
|
}
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2103
|
-
|
|
2066
|
+
),
|
|
2067
|
+
/* @__PURE__ */ jsx4(
|
|
2068
|
+
"h3",
|
|
2069
|
+
{
|
|
2070
|
+
style: {
|
|
2071
|
+
...styles2.welcomeTitle,
|
|
2072
|
+
fontFamily: themeObj().fontFamily || styles2.welcomeTitle.fontFamily
|
|
2073
|
+
},
|
|
2074
|
+
dangerouslySetInnerHTML: {
|
|
2075
|
+
__html: ((_b = agentExperience == null ? void 0 : agentExperience.greeting) == null ? void 0 : _b.title) || t().welcomeToShopPrompter
|
|
2076
|
+
}
|
|
2077
|
+
}
|
|
2078
|
+
),
|
|
2079
|
+
/* @__PURE__ */ jsx4(
|
|
2080
|
+
"p",
|
|
2081
|
+
{
|
|
2082
|
+
style: {
|
|
2083
|
+
...styles2.welcomeDescription,
|
|
2084
|
+
fontFamily: themeObj().fontFamily || styles2.welcomeDescription.fontFamily
|
|
2085
|
+
},
|
|
2086
|
+
dangerouslySetInnerHTML: {
|
|
2087
|
+
__html: ((_c = agentExperience == null ? void 0 : agentExperience.greeting) == null ? void 0 : _c.message) || t().welcomeDescription
|
|
2088
|
+
}
|
|
2089
|
+
}
|
|
2090
|
+
),
|
|
2091
|
+
/* @__PURE__ */ jsx4("div", { style: styles2.buttonContainer, children: (_d = prompts()) == null ? void 0 : _d.map((item) => /* @__PURE__ */ jsx4(
|
|
2092
|
+
"button",
|
|
2093
|
+
{
|
|
2094
|
+
className: "sh-prompt-btn",
|
|
2095
|
+
style: {
|
|
2096
|
+
...styles2.button,
|
|
2097
|
+
borderColor: themeObj().actionColor || "#e5e7eb",
|
|
2098
|
+
outlineColor: themeObj().actionColor || void 0
|
|
2099
|
+
},
|
|
2100
|
+
onClick: (event) => {
|
|
2101
|
+
setInput(item.prompt);
|
|
2102
|
+
handleSend(item.prompt);
|
|
2103
|
+
},
|
|
2104
|
+
children: item.prompt
|
|
2104
2105
|
},
|
|
2105
|
-
|
|
2106
|
-
}
|
|
2107
|
-
|
|
2106
|
+
item.prompt
|
|
2107
|
+
)) }),
|
|
2108
|
+
requireClickOnPredefinedPromptVal() && prompts().length > 0 ? /* @__PURE__ */ jsx4(
|
|
2109
|
+
"div",
|
|
2110
|
+
{
|
|
2111
|
+
style: {
|
|
2112
|
+
...styles2.predefinedPromptDisclaimer,
|
|
2113
|
+
fontFamily: themeObj().fontFamily || void 0
|
|
2114
|
+
},
|
|
2115
|
+
children: t().predefinedPromptDisclaimer
|
|
2116
|
+
}
|
|
2117
|
+
) : null
|
|
2118
|
+
] })
|
|
2108
2119
|
] }) : null,
|
|
2109
2120
|
!showWelcome() ? /* @__PURE__ */ jsx4(
|
|
2110
2121
|
"div",
|
package/package.json
CHANGED
|
@@ -1006,7 +1006,7 @@ function ShopPrompter(props) {
|
|
|
1006
1006
|
width: "24px",
|
|
1007
1007
|
height: "24px",
|
|
1008
1008
|
borderRadius: "4px",
|
|
1009
|
-
objectFit: "
|
|
1009
|
+
objectFit: "contain",
|
|
1010
1010
|
}}
|
|
1011
1011
|
/>
|
|
1012
1012
|
) : null}
|
|
@@ -1025,13 +1025,15 @@ function ShopPrompter(props) {
|
|
|
1025
1025
|
<div style={styles.warningBanner}>{t().apiKeyWarning}</div>
|
|
1026
1026
|
) : null}
|
|
1027
1027
|
<div style={styles.subHeaderContainer}>
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1028
|
+
{!showWelcome() ? (
|
|
1029
|
+
<button
|
|
1030
|
+
className="sh-header-btn"
|
|
1031
|
+
onClick={(e) => handleNewChat()}
|
|
1032
|
+
style={styles.headerButton}
|
|
1033
|
+
>
|
|
1034
|
+
{t().newChat}
|
|
1035
|
+
</button>
|
|
1036
|
+
) : null}
|
|
1035
1037
|
{props.chatPosition === "classic-chatbot" ||
|
|
1036
1038
|
props.chatPosition === "right-panel" ||
|
|
1037
1039
|
props.chatPosition === "dialog" ? (
|
|
@@ -1140,78 +1142,90 @@ function ShopPrompter(props) {
|
|
|
1140
1142
|
}}
|
|
1141
1143
|
>
|
|
1142
1144
|
{showWelcome() ? (
|
|
1143
|
-
|
|
1144
|
-
<
|
|
1145
|
-
alt="ShopPrompter"
|
|
1146
|
-
src={
|
|
1147
|
-
agentExperience?.agentLogoUrl
|
|
1148
|
-
? agentExperience.agentLogoUrl
|
|
1149
|
-
: ICONS.shopprompter
|
|
1150
|
-
}
|
|
1151
|
-
style={{
|
|
1152
|
-
width: "96px",
|
|
1153
|
-
height: "96px",
|
|
1154
|
-
marginBottom: "24px",
|
|
1155
|
-
borderRadius: "12px",
|
|
1156
|
-
objectFit: "cover",
|
|
1157
|
-
}}
|
|
1158
|
-
/>
|
|
1159
|
-
<h3
|
|
1160
|
-
style={{
|
|
1161
|
-
...styles.welcomeTitle,
|
|
1162
|
-
fontFamily:
|
|
1163
|
-
themeObj().fontFamily ||
|
|
1164
|
-
styles.welcomeTitle.fontFamily,
|
|
1165
|
-
}}
|
|
1145
|
+
<>
|
|
1146
|
+
<style
|
|
1166
1147
|
dangerouslySetInnerHTML={{
|
|
1167
|
-
__html:
|
|
1168
|
-
|
|
1169
|
-
|
|
1148
|
+
__html: ` .sh-prompt-btn:hover { background-color: ${
|
|
1149
|
+
themeObj().actionColor || "#2563eb"
|
|
1150
|
+
} !important; border-color: ${
|
|
1151
|
+
themeObj().actionColor || "#2563eb"
|
|
1152
|
+
} !important; } `,
|
|
1170
1153
|
}}
|
|
1171
1154
|
/>
|
|
1172
|
-
<
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1155
|
+
<div style={styles.welcomeContainer}>
|
|
1156
|
+
<img
|
|
1157
|
+
alt="ShopPrompter"
|
|
1158
|
+
src={
|
|
1159
|
+
agentExperience?.agentLogoUrl
|
|
1160
|
+
? agentExperience.agentLogoUrl
|
|
1161
|
+
: ICONS.shopprompter
|
|
1162
|
+
}
|
|
1163
|
+
style={{
|
|
1164
|
+
width: "96px",
|
|
1165
|
+
height: "96px",
|
|
1166
|
+
marginBottom: "24px",
|
|
1167
|
+
borderRadius: "12px",
|
|
1168
|
+
objectFit: "contain",
|
|
1169
|
+
}}
|
|
1170
|
+
/>
|
|
1171
|
+
<h3
|
|
1172
|
+
style={{
|
|
1173
|
+
...styles.welcomeTitle,
|
|
1174
|
+
fontFamily:
|
|
1175
|
+
themeObj().fontFamily ||
|
|
1176
|
+
styles.welcomeTitle.fontFamily,
|
|
1177
|
+
}}
|
|
1178
|
+
dangerouslySetInnerHTML={{
|
|
1179
|
+
__html:
|
|
1180
|
+
agentExperience?.greeting?.title ||
|
|
1181
|
+
t().welcomeToShopPrompter,
|
|
1182
|
+
}}
|
|
1183
|
+
/>
|
|
1184
|
+
<p
|
|
1185
|
+
style={{
|
|
1186
|
+
...styles.welcomeDescription,
|
|
1187
|
+
fontFamily:
|
|
1188
|
+
themeObj().fontFamily ||
|
|
1189
|
+
styles.welcomeDescription.fontFamily,
|
|
1190
|
+
}}
|
|
1191
|
+
dangerouslySetInnerHTML={{
|
|
1192
|
+
__html:
|
|
1193
|
+
agentExperience?.greeting?.message ||
|
|
1194
|
+
t().welcomeDescription,
|
|
1195
|
+
}}
|
|
1196
|
+
/>
|
|
1197
|
+
<div style={styles.buttonContainer}>
|
|
1198
|
+
{prompts()?.map((item) => (
|
|
1199
|
+
<button
|
|
1200
|
+
className="sh-prompt-btn"
|
|
1201
|
+
key={item.prompt}
|
|
1202
|
+
style={{
|
|
1203
|
+
...styles.button,
|
|
1204
|
+
borderColor: themeObj().actionColor || "#e5e7eb",
|
|
1205
|
+
outlineColor: themeObj().actionColor || undefined,
|
|
1206
|
+
}}
|
|
1207
|
+
onClick={(event) => {
|
|
1208
|
+
setInput(item.prompt);
|
|
1209
|
+
handleSend(item.prompt);
|
|
1210
|
+
}}
|
|
1211
|
+
>
|
|
1212
|
+
{item.prompt}
|
|
1213
|
+
</button>
|
|
1214
|
+
))}
|
|
1215
|
+
</div>
|
|
1216
|
+
{requireClickOnPredefinedPromptVal() &&
|
|
1217
|
+
prompts().length > 0 ? (
|
|
1218
|
+
<div
|
|
1189
1219
|
style={{
|
|
1190
|
-
...styles.
|
|
1191
|
-
|
|
1192
|
-
outlineColor: themeObj().actionColor || undefined,
|
|
1193
|
-
}}
|
|
1194
|
-
onClick={(event) => {
|
|
1195
|
-
setInput(item.prompt);
|
|
1196
|
-
handleSend(item.prompt);
|
|
1220
|
+
...styles.predefinedPromptDisclaimer,
|
|
1221
|
+
fontFamily: themeObj().fontFamily || undefined,
|
|
1197
1222
|
}}
|
|
1198
1223
|
>
|
|
1199
|
-
{
|
|
1200
|
-
</
|
|
1201
|
-
)
|
|
1224
|
+
{t().predefinedPromptDisclaimer}
|
|
1225
|
+
</div>
|
|
1226
|
+
) : null}
|
|
1202
1227
|
</div>
|
|
1203
|
-
|
|
1204
|
-
prompts().length > 0 ? (
|
|
1205
|
-
<div
|
|
1206
|
-
style={{
|
|
1207
|
-
...styles.predefinedPromptDisclaimer,
|
|
1208
|
-
fontFamily: themeObj().fontFamily || undefined,
|
|
1209
|
-
}}
|
|
1210
|
-
>
|
|
1211
|
-
{t().predefinedPromptDisclaimer}
|
|
1212
|
-
</div>
|
|
1213
|
-
) : null}
|
|
1214
|
-
</div>
|
|
1228
|
+
</>
|
|
1215
1229
|
) : null}
|
|
1216
1230
|
{!showWelcome() ? (
|
|
1217
1231
|
<div
|
package/src/translations.ts
CHANGED
|
@@ -43,7 +43,7 @@ export const TRANSLATIONS: Record<string, Record<string, string>> = {
|
|
|
43
43
|
disclaimer: 'KI-Inhalte können Fehler beinhalten.',
|
|
44
44
|
loadingProducts: 'Produkte werden geladen...',
|
|
45
45
|
productFetchError: 'Die Produkte konnten leider nicht geladen werden.',
|
|
46
|
-
predefinedPromptDisclaimer: '
|
|
46
|
+
predefinedPromptDisclaimer: 'Wähle einen Bereich, um die Unterhaltung zu starten.',
|
|
47
47
|
},
|
|
48
48
|
}
|
|
49
49
|
|