@kieksme/csp-plugin-chat 0.5.0 → 0.6.1
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/README.md +3 -1
- package/dist/browser.d.ts +1 -0
- package/dist/browser.js +91 -83
- package/dist/{chunk-PQWU3SII.js → chunk-YS3KJ64Z.js} +1 -1
- package/dist/server.js +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
# @kieksme/csp-plugin-chat
|
|
2
2
|
|
|
3
|
-
Part of the Customer Service Portal. See the product README and
|
|
3
|
+
Part of the Customer Service Portal. See the product README and docs/plugin-sdk.md for configuration and usage.
|
|
4
|
+
|
|
5
|
+
The question field and session history appear once in the service header. Automatic replies are labelled as a digital assistant; the hotline remains the route for personal contact. The assistant stays available between shifts. See [the header contract](../../docs/plugin-sdk.md#persönlicher-header).
|
package/dist/browser.d.ts
CHANGED
package/dist/browser.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
cspPlugin
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-YS3KJ64Z.js";
|
|
4
4
|
|
|
5
5
|
// src/browser.tsx
|
|
6
6
|
import { useEffect, useRef, useState } from "react";
|
|
@@ -92,89 +92,96 @@ function Chat(ctx) {
|
|
|
92
92
|
abort.current = null;
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
|
-
return /* @__PURE__ */ jsxs(
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
"
|
|
112
|
-
|
|
113
|
-
className: "message text-[0.8125rem] leading-[1.8] whitespace-pre-wrap [overflow-wrap:anywhere] [&.user]:bg-soft [&.user]:pt-3 [&.user]:pb-3 [&.user]:pl-4 [&.user]:pr-4 [&.user]:rounded-card [&.assistant]:[border-left:2px_solid_var(--accent)] [&.assistant]:pt-[0] [&.assistant]:pb-[0] [&.assistant]:pl-4 [&.assistant]:pr-4 "
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
{
|
|
140
|
-
className: "chat-form flex gap-2.5 items-end [&_textarea]:resize-y [&_textarea]:min-h-[50px] [&_textarea]:[flex:1] [&_textarea]:min-w-0 [&_button]:bg-accent [&_button]:text-accent-ink [&_button]:[border:0] [&_button]:w-[50px] [&_button]:h-[50px] [&_button]:rounded-card [&_button]:text-[1.25rem] [&_button:disabled]:opacity-[0.5]",
|
|
141
|
-
onSubmit: submit,
|
|
142
|
-
children: [
|
|
143
|
-
/* @__PURE__ */ jsx("label", { className: "sr-only", htmlFor: "chat-input", children: "Ihre Frage" }),
|
|
144
|
-
/* @__PURE__ */ jsx(
|
|
145
|
-
"textarea",
|
|
146
|
-
{
|
|
147
|
-
id: "chat-input",
|
|
148
|
-
className: "search bg-card border border-line rounded-card py-3.5 px-4.5 text-ink w-full",
|
|
149
|
-
value: input,
|
|
150
|
-
maxLength: 4e3,
|
|
151
|
-
onChange: (e) => setInput(e.target.value),
|
|
152
|
-
placeholder: "Ihre Frage an unser Team \u2026",
|
|
153
|
-
required: true
|
|
154
|
-
}
|
|
155
|
-
),
|
|
156
|
-
/* @__PURE__ */ jsx(
|
|
157
|
-
"button",
|
|
158
|
-
{
|
|
159
|
-
type: "submit",
|
|
160
|
-
disabled: busy || !input.trim(),
|
|
161
|
-
"aria-label": "Frage senden",
|
|
162
|
-
children: "\u2191"
|
|
163
|
-
}
|
|
95
|
+
return /* @__PURE__ */ jsxs(
|
|
96
|
+
"div",
|
|
97
|
+
{
|
|
98
|
+
className: ctx.surface === "hero" ? "chat-layout block" : "chat-layout grid grid-cols-[1fr_1.7fr] gap-13.75 compact:grid-cols-[1fr] compact:gap-3.75",
|
|
99
|
+
children: [
|
|
100
|
+
ctx.surface !== "hero" && /* @__PURE__ */ jsxs("div", { className: "chat-intro [&_p]:text-[0.875rem] [&_p]:text-muted [&_p]:leading-[1.8] compact:max-w-[500px]", children: [
|
|
101
|
+
/* @__PURE__ */ jsx("h3", { children: "Eine Frage reicht." }),
|
|
102
|
+
/* @__PURE__ */ jsx("p", { children: "Unser Assistent kennt die Hilfe-Inhalte, das Team und die aktuellen Meldungen. F\xFCr dringende St\xF6rungen bleibt die Hotline der direkte Weg." }),
|
|
103
|
+
/* @__PURE__ */ jsx("p", { className: "data-state font-mono text-[0.625rem] text-muted m-[calc(var(--spacing)_*_3)_0_0] [&.warning]:text-warning", children: "\xD6ffentlicher Chat \xB7 Verlauf nur in dieser Sitzung" })
|
|
104
|
+
] }),
|
|
105
|
+
/* @__PURE__ */ jsxs("div", { className: "chat-panel text-ink compact:p-4 bg-card border border-line p-6 rounded-card", children: [
|
|
106
|
+
/* @__PURE__ */ jsxs(
|
|
107
|
+
"div",
|
|
108
|
+
{
|
|
109
|
+
className: "chat-history empty:hidden grid gap-3.75 max-h-[400px] overflow-auto mb-4",
|
|
110
|
+
"aria-live": "polite",
|
|
111
|
+
"aria-busy": busy,
|
|
112
|
+
children: [
|
|
113
|
+
!messages.length && ctx.surface !== "hero" && /* @__PURE__ */ jsx("p", { className: "message assistant text-[0.8125rem] leading-[1.8] whitespace-pre-wrap [overflow-wrap:anywhere] [&.user]:bg-soft [&.user]:pt-3 [&.user]:pb-3 [&.user]:pl-4 [&.user]:pr-4 [&.user]:rounded-card [&.assistant]:[border-left:2px_solid_var(--accent)] [&.assistant]:pt-[0] [&.assistant]:pb-[0] [&.assistant]:pl-4 [&.assistant]:pr-4", children: "Wie kann ich Ihnen helfen?" }),
|
|
114
|
+
messages.map((m, i) => /* @__PURE__ */ jsxs(
|
|
115
|
+
"div",
|
|
116
|
+
{
|
|
117
|
+
className: "message text-[0.8125rem] leading-[1.8] whitespace-pre-wrap [overflow-wrap:anywhere] [&.user]:bg-soft [&.user]:pt-3 [&.user]:pb-3 [&.user]:pl-4 [&.user]:pr-4 [&.user]:rounded-card [&.assistant]:[border-left:2px_solid_var(--accent)] [&.assistant]:pt-[0] [&.assistant]:pb-[0] [&.assistant]:pl-4 [&.assistant]:pr-4 " + m.role,
|
|
118
|
+
children: [
|
|
119
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: m.role === "user" ? "Sie: " : "Assistent: " }),
|
|
120
|
+
m.content || "Antwort wird vorbereitet \u2026"
|
|
121
|
+
]
|
|
122
|
+
},
|
|
123
|
+
i
|
|
124
|
+
))
|
|
125
|
+
]
|
|
126
|
+
}
|
|
127
|
+
),
|
|
128
|
+
sources.length > 0 && /* @__PURE__ */ jsxs("div", { className: "sources text-[0.6875rem] text-muted mt-3.75 mb-3.75 ml-[0] mr-[0] [&_a]:mr-3", children: [
|
|
129
|
+
"Referenzquellen:",
|
|
130
|
+
" ",
|
|
131
|
+
sources.map(
|
|
132
|
+
(s) => s.href ? /* @__PURE__ */ jsxs("a", { href: s.href, children: [
|
|
133
|
+
s.title,
|
|
134
|
+
s.stale ? " (veraltet)" : ""
|
|
135
|
+
] }, s.id) : /* @__PURE__ */ jsxs("span", { children: [
|
|
136
|
+
s.title,
|
|
137
|
+
" "
|
|
138
|
+
] }, s.id)
|
|
164
139
|
)
|
|
165
|
-
]
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
140
|
+
] }),
|
|
141
|
+
/* @__PURE__ */ jsxs(
|
|
142
|
+
"form",
|
|
143
|
+
{
|
|
144
|
+
className: "chat-form flex gap-2.5 items-end [&_textarea]:resize-y [&_textarea]:min-h-[50px] [&_textarea]:[flex:1] [&_textarea]:min-w-0 [&_button]:bg-accent [&_button]:text-accent-ink [&_button]:[border:0] [&_button]:w-[50px] [&_button]:h-[50px] [&_button]:rounded-card [&_button]:text-[1.25rem] [&_button:disabled]:opacity-[0.5]",
|
|
145
|
+
onSubmit: submit,
|
|
146
|
+
children: [
|
|
147
|
+
/* @__PURE__ */ jsx("label", { className: "sr-only", htmlFor: "chat-input", children: "Ihre Frage" }),
|
|
148
|
+
/* @__PURE__ */ jsx(
|
|
149
|
+
"textarea",
|
|
150
|
+
{
|
|
151
|
+
id: "chat-input",
|
|
152
|
+
className: "search bg-card border border-line rounded-card py-3.5 px-4.5 text-ink w-full",
|
|
153
|
+
value: input,
|
|
154
|
+
maxLength: 4e3,
|
|
155
|
+
onChange: (e) => setInput(e.target.value),
|
|
156
|
+
placeholder: "Ihre Frage an unser Team \u2026",
|
|
157
|
+
required: true
|
|
158
|
+
}
|
|
159
|
+
),
|
|
160
|
+
/* @__PURE__ */ jsx(
|
|
161
|
+
"button",
|
|
162
|
+
{
|
|
163
|
+
type: "submit",
|
|
164
|
+
disabled: busy || !input.trim(),
|
|
165
|
+
"aria-label": "Frage senden",
|
|
166
|
+
children: "\u2191"
|
|
167
|
+
}
|
|
168
|
+
)
|
|
169
|
+
]
|
|
170
|
+
}
|
|
171
|
+
),
|
|
172
|
+
ctx.surface === "hero" && /* @__PURE__ */ jsx("p", { className: "data-state font-mono text-[0.625rem] text-muted mt-3 mb-0", children: "Digitaler Assistent \xB7 Ihre Frage wird automatisch beantwortet. F\xFCr pers\xF6nlichen Kontakt nutzen Sie die Hotline." }),
|
|
173
|
+
error && /* @__PURE__ */ jsx(
|
|
174
|
+
"p",
|
|
175
|
+
{
|
|
176
|
+
className: "chat-error text-danger dark:text-warning text-[0.75rem]",
|
|
177
|
+
role: "alert",
|
|
178
|
+
children: error
|
|
179
|
+
}
|
|
180
|
+
)
|
|
181
|
+
] })
|
|
182
|
+
]
|
|
183
|
+
}
|
|
184
|
+
);
|
|
178
185
|
}
|
|
179
186
|
var browser_default = {
|
|
180
187
|
id: "chat",
|
|
@@ -182,6 +189,7 @@ var browser_default = {
|
|
|
182
189
|
sections: [
|
|
183
190
|
{
|
|
184
191
|
id: "chat",
|
|
192
|
+
placement: "hero",
|
|
185
193
|
label: "Assistent",
|
|
186
194
|
title: "Antworten ohne Warteschleife.",
|
|
187
195
|
order: 60,
|
package/dist/server.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kieksme/csp-plugin-chat",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"files": [
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"registry": "https://registry.npmjs.org"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@kieksme/csp-sdk": "^0.
|
|
25
|
+
"@kieksme/csp-sdk": "^0.6.1",
|
|
26
26
|
"zod": "^3.25.76",
|
|
27
27
|
"openai": "^6.3.0"
|
|
28
28
|
},
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
"cspPlugin": {
|
|
36
36
|
"id": "chat",
|
|
37
|
-
"sdkVersion": "^0.
|
|
37
|
+
"sdkVersion": "^0.6.1",
|
|
38
38
|
"browser": "./browser",
|
|
39
39
|
"server": "./server"
|
|
40
40
|
},
|