@shop-prompter/react 1.2.1 → 1.2.3
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 +12 -0
- package/dist/index.js +77 -63
- package/dist/index.mjs +77 -63
- package/package.json +1 -1
- package/src/shop-prompter.component.jsx +92 -75
- 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",
|
|
@@ -2288,7 +2299,10 @@ function ShopPrompter(props) {
|
|
|
2288
2299
|
...error ? {
|
|
2289
2300
|
opacity: "0.5",
|
|
2290
2301
|
pointerEvents: "none"
|
|
2291
|
-
} : {
|
|
2302
|
+
} : {
|
|
2303
|
+
opacity: "1",
|
|
2304
|
+
pointerEvents: "auto"
|
|
2305
|
+
}
|
|
2292
2306
|
},
|
|
2293
2307
|
children: [
|
|
2294
2308
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles2.inputWrapper, children: [
|
|
@@ -2302,7 +2316,7 @@ function ShopPrompter(props) {
|
|
|
2302
2316
|
value: input,
|
|
2303
2317
|
onInput: (e) => onInputChange(e),
|
|
2304
2318
|
onKeyDown: (e) => onInputKeyDown(e),
|
|
2305
|
-
|
|
2319
|
+
tabIndex: error ? -1 : 0
|
|
2306
2320
|
}
|
|
2307
2321
|
),
|
|
2308
2322
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
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",
|
|
@@ -2252,7 +2263,10 @@ function ShopPrompter(props) {
|
|
|
2252
2263
|
...error ? {
|
|
2253
2264
|
opacity: "0.5",
|
|
2254
2265
|
pointerEvents: "none"
|
|
2255
|
-
} : {
|
|
2266
|
+
} : {
|
|
2267
|
+
opacity: "1",
|
|
2268
|
+
pointerEvents: "auto"
|
|
2269
|
+
}
|
|
2256
2270
|
},
|
|
2257
2271
|
children: [
|
|
2258
2272
|
/* @__PURE__ */ jsxs4("div", { style: styles2.inputWrapper, children: [
|
|
@@ -2266,7 +2280,7 @@ function ShopPrompter(props) {
|
|
|
2266
2280
|
value: input,
|
|
2267
2281
|
onInput: (e) => onInputChange(e),
|
|
2268
2282
|
onKeyDown: (e) => onInputKeyDown(e),
|
|
2269
|
-
|
|
2283
|
+
tabIndex: error ? -1 : 0
|
|
2270
2284
|
}
|
|
2271
2285
|
),
|
|
2272
2286
|
/* @__PURE__ */ jsx4(
|
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
|
|
@@ -1378,7 +1392,10 @@ function ShopPrompter(props) {
|
|
|
1378
1392
|
opacity: "0.5",
|
|
1379
1393
|
pointerEvents: "none",
|
|
1380
1394
|
}
|
|
1381
|
-
: {
|
|
1395
|
+
: {
|
|
1396
|
+
opacity: "1",
|
|
1397
|
+
pointerEvents: "auto",
|
|
1398
|
+
}),
|
|
1382
1399
|
}}
|
|
1383
1400
|
>
|
|
1384
1401
|
<div style={styles.inputWrapper}>
|
|
@@ -1392,7 +1409,7 @@ function ShopPrompter(props) {
|
|
|
1392
1409
|
value={input}
|
|
1393
1410
|
onInput={(e) => onInputChange(e)}
|
|
1394
1411
|
onKeyDown={(e) => onInputKeyDown(e)}
|
|
1395
|
-
|
|
1412
|
+
tabIndex={error ? -1 : 0}
|
|
1396
1413
|
/>
|
|
1397
1414
|
<button
|
|
1398
1415
|
onClick={(e) => handleSend()}
|
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
|
|