;
+}) {
+ const t = messages(locale);
const id = useId();
const [email, setEmail] = useState("");
const [saving, setSaving] = useState(false);
@@ -15,12 +24,12 @@ export function EmailPrompt({ onSave }: { readonly onSave: (email: string) => Pr
setSaving(true);
setError(undefined);
void onSave(email.trim())
- .catch(() => setError("We couldn't save your email. Please check it and try again."))
+ .catch(() => setError(t.respondkit_email_failed()))
.finally(() => setSaving(false));
}}
>
Pr
placeholder="you@example.com"
/>
{error ? (
diff --git a/packages/react/src/widget/message-composer.test.tsx b/packages/react/src/widget/message-composer.test.tsx
index 5e37228..0236364 100644
--- a/packages/react/src/widget/message-composer.test.tsx
+++ b/packages/react/src/widget/message-composer.test.tsx
@@ -20,7 +20,7 @@ it("accepts arbitrary files, retries uploads with the same ID, and sends only re
fireEvent.change(input, {
target: { files: [new File(["test"], "script.html", { type: "text/html" })] },
});
- await screen.findByText(/Offline/);
+ await screen.findByText(/Upload failed/);
expect(screen.getByRole("button", { name: "Send message" })).toBeDisabled();
fireEvent.click(screen.getByRole("button", { name: "Retry" }));
await waitFor(() => expect(screen.getByRole("button", { name: "Send message" })).toBeEnabled());
@@ -42,3 +42,22 @@ it("aborts unfinished uploads when their draft scope changes", async () => {
expect(upload.mock.calls[0]?.[2].aborted).toBe(true);
expect(screen.queryByText(/a.zip/)).toBeNull();
});
+it.each([
+ ["ja-JP", "アップロードに失敗しました"],
+ ["zh-Hans-CN", "上传失败"],
+])("shows an SDK upload failure in the host language (%s)", async (locale, expected) => {
+ const failure = new Error("RespondKit request failed with HTTP 500");
+ const view = render(
+ ,
+ );
+ fireEvent.change(view.container.querySelector('input[type="file"]')!, {
+ target: { files: [new File(["a"], "a.zip")] },
+ });
+ expect(await screen.findByText(new RegExp(expected))).toBeVisible();
+ expect(screen.queryByText(/HTTP 500/)).not.toBeInTheDocument();
+});
diff --git a/packages/react/src/widget/message-composer.tsx b/packages/react/src/widget/message-composer.tsx
index 583b8e3..cf32003 100644
--- a/packages/react/src/widget/message-composer.tsx
+++ b/packages/react/src/widget/message-composer.tsx
@@ -6,6 +6,7 @@ import { Button } from "#components/ui/button";
import { Textarea } from "#components/ui/textarea";
import { messages } from "./messages";
+import { presentedMessage } from "./presented-error";
interface MessageComposerProps {
readonly disabled: boolean;
@@ -34,6 +35,7 @@ export function MessageComposer({
onUpload,
scope,
}: MessageComposerProps) {
+ const t = messages(locale);
const [files, setFiles] = useState([]);
const fileInput = useRef(null);
const controllers = useRef(new Map());
@@ -57,7 +59,9 @@ export function MessageComposer({
update(item.id, { attachment });
} catch (error) {
if (!controller.signal.aborted)
- update(item.id, { error: error instanceof Error ? error.message : "Upload failed" });
+ update(item.id, {
+ error: presentedMessage(error, t.respondkit_upload_failed()),
+ });
} finally {
controllers.current.delete(item.id);
}
@@ -109,19 +113,20 @@ export function MessageComposer({
{files.map((item) => (
- {item.file.name} · {item.error ?? (item.attachment ? "Ready" : `${item.progress}%`)}
+ {item.file.name} ·{" "}
+ {item.error ?? (item.attachment ? t.respondkit_ready() : `${item.progress}%`)}
{item.error ? (
) : null}
))}
@@ -151,18 +156,18 @@ export function MessageComposer({
className="ac:size-11 ac:shrink-0"
disabled={disabled}
onClick={() => fileInput.current?.click()}
- aria-label={messages(locale).respondkit_attach_files()}
+ aria-label={t.respondkit_attach_files()}
>