@shop-prompter/react 1.2.0 → 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 +12 -0
- package/dist/index.js +74 -62
- package/dist/index.mjs +74 -62
- package/package.json +1 -1
- package/src/shop-prompter.component.jsx +89 -74
- 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) {
|
|
@@ -1063,7 +1063,7 @@ var styles2 = {
|
|
|
1063
1063
|
},
|
|
1064
1064
|
button: {
|
|
1065
1065
|
padding: "0.625rem 1rem",
|
|
1066
|
-
border: "
|
|
1066
|
+
border: "2px solid #e5e7eb",
|
|
1067
1067
|
borderRadius: "0.75rem",
|
|
1068
1068
|
backgroundColor: "transparent",
|
|
1069
1069
|
transition: "background-color 0.2s, color 0.2s",
|
|
@@ -1110,6 +1110,7 @@ var styles2 = {
|
|
|
1110
1110
|
leadingTrim: "NONE",
|
|
1111
1111
|
lineHeight: "100%",
|
|
1112
1112
|
letterSpacing: "0%",
|
|
1113
|
+
paddingBottom: "1rem",
|
|
1113
1114
|
textAlign: "center"
|
|
1114
1115
|
},
|
|
1115
1116
|
welcomeDescription: {
|
|
@@ -1932,7 +1933,7 @@ function ShopPrompter(props) {
|
|
|
1932
1933
|
width: "24px",
|
|
1933
1934
|
height: "24px",
|
|
1934
1935
|
borderRadius: "4px",
|
|
1935
|
-
objectFit: "
|
|
1936
|
+
objectFit: "contain"
|
|
1936
1937
|
}
|
|
1937
1938
|
}
|
|
1938
1939
|
) : null,
|
|
@@ -1940,7 +1941,7 @@ function ShopPrompter(props) {
|
|
|
1940
1941
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles2.subHeaderContainer }) }),
|
|
1941
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,
|
|
1942
1943
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles2.subHeaderContainer, children: [
|
|
1943
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1944
|
+
!showWelcome() ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1944
1945
|
"button",
|
|
1945
1946
|
{
|
|
1946
1947
|
className: "sh-header-btn",
|
|
@@ -1948,7 +1949,7 @@ function ShopPrompter(props) {
|
|
|
1948
1949
|
style: styles2.headerButton,
|
|
1949
1950
|
children: t().newChat
|
|
1950
1951
|
}
|
|
1951
|
-
),
|
|
1952
|
+
) : null,
|
|
1952
1953
|
props.chatPosition === "classic-chatbot" || props.chatPosition === "right-panel" || props.chatPosition === "dialog" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1953
1954
|
"button",
|
|
1954
1955
|
{
|
|
@@ -2075,71 +2076,82 @@ function ShopPrompter(props) {
|
|
|
2075
2076
|
backgroundColor: themeObj().mainBackgroundColor || styles2.chatContainer.backgroundColor
|
|
2076
2077
|
},
|
|
2077
2078
|
children: [
|
|
2078
|
-
showWelcome() ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
2079
|
+
showWelcome() ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
2079
2080
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
2080
|
-
"
|
|
2081
|
+
"style",
|
|
2081
2082
|
{
|
|
2082
|
-
alt: "ShopPrompter",
|
|
2083
|
-
src: (agentExperience == null ? void 0 : agentExperience.agentLogoUrl) ? agentExperience.agentLogoUrl : ICONS.shopprompter,
|
|
2084
|
-
style: {
|
|
2085
|
-
width: "96px",
|
|
2086
|
-
height: "96px",
|
|
2087
|
-
marginBottom: "24px",
|
|
2088
|
-
borderRadius: "12px",
|
|
2089
|
-
objectFit: "cover"
|
|
2090
|
-
}
|
|
2091
|
-
}
|
|
2092
|
-
),
|
|
2093
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
2094
|
-
"h3",
|
|
2095
|
-
{
|
|
2096
|
-
style: {
|
|
2097
|
-
...styles2.welcomeTitle,
|
|
2098
|
-
fontFamily: themeObj().fontFamily || styles2.welcomeTitle.fontFamily
|
|
2099
|
-
},
|
|
2100
2083
|
dangerouslySetInnerHTML: {
|
|
2101
|
-
__html:
|
|
2084
|
+
__html: ` .sh-prompt-btn:hover { background-color: ${themeObj().actionColor || "#2563eb"} !important; border-color: ${themeObj().actionColor || "#2563eb"} !important; } `
|
|
2102
2085
|
}
|
|
2103
2086
|
}
|
|
2104
2087
|
),
|
|
2105
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
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
|
+
}
|
|
2114
2101
|
}
|
|
2115
|
-
|
|
2116
|
-
|
|
2117
|
-
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
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
|
|
2139
2141
|
},
|
|
2140
|
-
|
|
2141
|
-
}
|
|
2142
|
-
|
|
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
|
+
] })
|
|
2143
2155
|
] }) : null,
|
|
2144
2156
|
!showWelcome() ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
2145
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) {
|
|
@@ -1027,7 +1027,7 @@ var styles2 = {
|
|
|
1027
1027
|
},
|
|
1028
1028
|
button: {
|
|
1029
1029
|
padding: "0.625rem 1rem",
|
|
1030
|
-
border: "
|
|
1030
|
+
border: "2px solid #e5e7eb",
|
|
1031
1031
|
borderRadius: "0.75rem",
|
|
1032
1032
|
backgroundColor: "transparent",
|
|
1033
1033
|
transition: "background-color 0.2s, color 0.2s",
|
|
@@ -1074,6 +1074,7 @@ var styles2 = {
|
|
|
1074
1074
|
leadingTrim: "NONE",
|
|
1075
1075
|
lineHeight: "100%",
|
|
1076
1076
|
letterSpacing: "0%",
|
|
1077
|
+
paddingBottom: "1rem",
|
|
1077
1078
|
textAlign: "center"
|
|
1078
1079
|
},
|
|
1079
1080
|
welcomeDescription: {
|
|
@@ -1896,7 +1897,7 @@ function ShopPrompter(props) {
|
|
|
1896
1897
|
width: "24px",
|
|
1897
1898
|
height: "24px",
|
|
1898
1899
|
borderRadius: "4px",
|
|
1899
|
-
objectFit: "
|
|
1900
|
+
objectFit: "contain"
|
|
1900
1901
|
}
|
|
1901
1902
|
}
|
|
1902
1903
|
) : null,
|
|
@@ -1904,7 +1905,7 @@ function ShopPrompter(props) {
|
|
|
1904
1905
|
] }) : /* @__PURE__ */ jsx4(Fragment2, { children: /* @__PURE__ */ jsx4("div", { style: styles2.subHeaderContainer }) }),
|
|
1905
1906
|
!hasToken() && ((_a = apiConfigObj == null ? void 0 : apiConfigObj()) == null ? void 0 : _a.apiKey) ? /* @__PURE__ */ jsx4("div", { style: styles2.warningBanner, children: t().apiKeyWarning }) : null,
|
|
1906
1907
|
/* @__PURE__ */ jsxs4("div", { style: styles2.subHeaderContainer, children: [
|
|
1907
|
-
/* @__PURE__ */ jsx4(
|
|
1908
|
+
!showWelcome() ? /* @__PURE__ */ jsx4(
|
|
1908
1909
|
"button",
|
|
1909
1910
|
{
|
|
1910
1911
|
className: "sh-header-btn",
|
|
@@ -1912,7 +1913,7 @@ function ShopPrompter(props) {
|
|
|
1912
1913
|
style: styles2.headerButton,
|
|
1913
1914
|
children: t().newChat
|
|
1914
1915
|
}
|
|
1915
|
-
),
|
|
1916
|
+
) : null,
|
|
1916
1917
|
props.chatPosition === "classic-chatbot" || props.chatPosition === "right-panel" || props.chatPosition === "dialog" ? /* @__PURE__ */ jsx4(
|
|
1917
1918
|
"button",
|
|
1918
1919
|
{
|
|
@@ -2039,71 +2040,82 @@ function ShopPrompter(props) {
|
|
|
2039
2040
|
backgroundColor: themeObj().mainBackgroundColor || styles2.chatContainer.backgroundColor
|
|
2040
2041
|
},
|
|
2041
2042
|
children: [
|
|
2042
|
-
showWelcome() ? /* @__PURE__ */ jsxs4(
|
|
2043
|
+
showWelcome() ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
|
|
2043
2044
|
/* @__PURE__ */ jsx4(
|
|
2044
|
-
"
|
|
2045
|
+
"style",
|
|
2045
2046
|
{
|
|
2046
|
-
alt: "ShopPrompter",
|
|
2047
|
-
src: (agentExperience == null ? void 0 : agentExperience.agentLogoUrl) ? agentExperience.agentLogoUrl : ICONS.shopprompter,
|
|
2048
|
-
style: {
|
|
2049
|
-
width: "96px",
|
|
2050
|
-
height: "96px",
|
|
2051
|
-
marginBottom: "24px",
|
|
2052
|
-
borderRadius: "12px",
|
|
2053
|
-
objectFit: "cover"
|
|
2054
|
-
}
|
|
2055
|
-
}
|
|
2056
|
-
),
|
|
2057
|
-
/* @__PURE__ */ jsx4(
|
|
2058
|
-
"h3",
|
|
2059
|
-
{
|
|
2060
|
-
style: {
|
|
2061
|
-
...styles2.welcomeTitle,
|
|
2062
|
-
fontFamily: themeObj().fontFamily || styles2.welcomeTitle.fontFamily
|
|
2063
|
-
},
|
|
2064
2047
|
dangerouslySetInnerHTML: {
|
|
2065
|
-
__html:
|
|
2048
|
+
__html: ` .sh-prompt-btn:hover { background-color: ${themeObj().actionColor || "#2563eb"} !important; border-color: ${themeObj().actionColor || "#2563eb"} !important; } `
|
|
2066
2049
|
}
|
|
2067
2050
|
}
|
|
2068
2051
|
),
|
|
2069
|
-
/* @__PURE__ */
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
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
|
+
}
|
|
2078
2065
|
}
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
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
|
|
2103
2105
|
},
|
|
2104
|
-
|
|
2105
|
-
}
|
|
2106
|
-
|
|
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
|
+
] })
|
|
2107
2119
|
] }) : null,
|
|
2108
2120
|
!showWelcome() ? /* @__PURE__ */ jsx4(
|
|
2109
2121
|
"div",
|
package/package.json
CHANGED
|
@@ -42,7 +42,7 @@ const styles = {
|
|
|
42
42
|
},
|
|
43
43
|
button: {
|
|
44
44
|
padding: "0.625rem 1rem",
|
|
45
|
-
border: "
|
|
45
|
+
border: "2px solid #e5e7eb",
|
|
46
46
|
borderRadius: "0.75rem",
|
|
47
47
|
backgroundColor: "transparent",
|
|
48
48
|
transition: "background-color 0.2s, color 0.2s",
|
|
@@ -89,6 +89,7 @@ const styles = {
|
|
|
89
89
|
leadingTrim: "NONE",
|
|
90
90
|
lineHeight: "100%",
|
|
91
91
|
letterSpacing: "0%",
|
|
92
|
+
paddingBottom: "1rem",
|
|
92
93
|
textAlign: "center",
|
|
93
94
|
},
|
|
94
95
|
welcomeDescription: {
|
|
@@ -1005,7 +1006,7 @@ function ShopPrompter(props) {
|
|
|
1005
1006
|
width: "24px",
|
|
1006
1007
|
height: "24px",
|
|
1007
1008
|
borderRadius: "4px",
|
|
1008
|
-
objectFit: "
|
|
1009
|
+
objectFit: "contain",
|
|
1009
1010
|
}}
|
|
1010
1011
|
/>
|
|
1011
1012
|
) : null}
|
|
@@ -1024,13 +1025,15 @@ function ShopPrompter(props) {
|
|
|
1024
1025
|
<div style={styles.warningBanner}>{t().apiKeyWarning}</div>
|
|
1025
1026
|
) : null}
|
|
1026
1027
|
<div style={styles.subHeaderContainer}>
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
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}
|
|
1034
1037
|
{props.chatPosition === "classic-chatbot" ||
|
|
1035
1038
|
props.chatPosition === "right-panel" ||
|
|
1036
1039
|
props.chatPosition === "dialog" ? (
|
|
@@ -1139,78 +1142,90 @@ function ShopPrompter(props) {
|
|
|
1139
1142
|
}}
|
|
1140
1143
|
>
|
|
1141
1144
|
{showWelcome() ? (
|
|
1142
|
-
|
|
1143
|
-
<
|
|
1144
|
-
alt="ShopPrompter"
|
|
1145
|
-
src={
|
|
1146
|
-
agentExperience?.agentLogoUrl
|
|
1147
|
-
? agentExperience.agentLogoUrl
|
|
1148
|
-
: ICONS.shopprompter
|
|
1149
|
-
}
|
|
1150
|
-
style={{
|
|
1151
|
-
width: "96px",
|
|
1152
|
-
height: "96px",
|
|
1153
|
-
marginBottom: "24px",
|
|
1154
|
-
borderRadius: "12px",
|
|
1155
|
-
objectFit: "cover",
|
|
1156
|
-
}}
|
|
1157
|
-
/>
|
|
1158
|
-
<h3
|
|
1159
|
-
style={{
|
|
1160
|
-
...styles.welcomeTitle,
|
|
1161
|
-
fontFamily:
|
|
1162
|
-
themeObj().fontFamily ||
|
|
1163
|
-
styles.welcomeTitle.fontFamily,
|
|
1164
|
-
}}
|
|
1145
|
+
<>
|
|
1146
|
+
<style
|
|
1165
1147
|
dangerouslySetInnerHTML={{
|
|
1166
|
-
__html:
|
|
1167
|
-
|
|
1168
|
-
|
|
1148
|
+
__html: ` .sh-prompt-btn:hover { background-color: ${
|
|
1149
|
+
themeObj().actionColor || "#2563eb"
|
|
1150
|
+
} !important; border-color: ${
|
|
1151
|
+
themeObj().actionColor || "#2563eb"
|
|
1152
|
+
} !important; } `,
|
|
1169
1153
|
}}
|
|
1170
1154
|
/>
|
|
1171
|
-
<
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
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
|
|
1188
1219
|
style={{
|
|
1189
|
-
...styles.
|
|
1190
|
-
|
|
1191
|
-
outlineColor: themeObj().actionColor || undefined,
|
|
1192
|
-
}}
|
|
1193
|
-
onClick={(event) => {
|
|
1194
|
-
setInput(item.prompt);
|
|
1195
|
-
handleSend(item.prompt);
|
|
1220
|
+
...styles.predefinedPromptDisclaimer,
|
|
1221
|
+
fontFamily: themeObj().fontFamily || undefined,
|
|
1196
1222
|
}}
|
|
1197
1223
|
>
|
|
1198
|
-
{
|
|
1199
|
-
</
|
|
1200
|
-
)
|
|
1224
|
+
{t().predefinedPromptDisclaimer}
|
|
1225
|
+
</div>
|
|
1226
|
+
) : null}
|
|
1201
1227
|
</div>
|
|
1202
|
-
|
|
1203
|
-
prompts().length > 0 ? (
|
|
1204
|
-
<div
|
|
1205
|
-
style={{
|
|
1206
|
-
...styles.predefinedPromptDisclaimer,
|
|
1207
|
-
fontFamily: themeObj().fontFamily || undefined,
|
|
1208
|
-
}}
|
|
1209
|
-
>
|
|
1210
|
-
{t().predefinedPromptDisclaimer}
|
|
1211
|
-
</div>
|
|
1212
|
-
) : null}
|
|
1213
|
-
</div>
|
|
1228
|
+
</>
|
|
1214
1229
|
) : null}
|
|
1215
1230
|
{!showWelcome() ? (
|
|
1216
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
|
|