Add a few translations + implement onClose callback

copilot-widget/README.md

@@ -43,6 +43,9 @@ It's a simple React application that can be used in any webpage as a widget. To
  }, // @optional: user object – this info will be used in the chat
  containerProps: {}, // @optional: `HTMLProps`
  warnBeforeClose: true, // @optional: Set to false if you don't want to warn the user before closing the chat
+ onClose: () => {
+ console.log('Closing chat window.');
+ } // @optional: Callback before closing the chat
  });
  };
  </script>

copilot-widget/lib/components/ChatHeader.tsx

@@ -13,8 +13,7 @@ import { useLang } from "@lib/contexts/LocalesProvider";
 import { useConfigData } from "@lib/contexts/ConfigData.tsx";
 import { useSocket } from "@lib/contexts/SocketProvider";
 
-function WarnBeforeCloseDialog() {
- const [, , SetState] = useWidgetState();
+function WarnBeforeCloseDialog({ onClose }: { onClose: () => void }) {
  const { get } = useLang();
 
  return (
@@ -33,13 +32,7 @@ function WarnBeforeCloseDialog() {
  </DialogHeader>
  <div className="flex flex-row items-center justify-center gap-2">
  <Button asChild variant="destructive" className="font-semibold">
- <DialogClose
- onClick={() => {
- SetState(false);
- }}
- >
- {get("yes-exit")}
- </DialogClose>
+ <DialogClose onClick={onClose}>{get("yes-exit")}</DialogClose>
  </Button>
  <Button asChild variant="secondary" className="font-semibold">
  <DialogClose>{get("no-cancel")}</DialogClose>
@@ -84,6 +77,15 @@ export default function ChatHeader() {
  const [, , SetState] = useWidgetState();
  const { data } = useInitialData();
  const config = useConfigData();
+
+ const onClose = () => {
+ SetState(false);
+
+ if (config.onClose !== undefined) {
+ config.onClose();
+ }
+ };
+
  return (
  <header className="border-b border-b-black/10 w-full">
  <div className="p-2 w-full flex items-center justify-between">
@@ -92,11 +94,11 @@ export default function ChatHeader() {
  </h1>
  <div className="flex items-center gap-3">
  {config?.warnBeforeClose === false ? (
- <button onClick={() => SetState(false)}>
+ <button onClick={onClose}>
  <X size={20} />
  </button>
  ) : (
- <WarnBeforeCloseDialog />
+ <WarnBeforeCloseDialog onClose={onClose} />
  )}
  </div>
  </div>

copilot-widget/lib/locales/de.locale.ts

@@ -0,0 +1,13 @@
+import { TranslatableMessages } from "./types";
+
+export const deLocale: TranslatableMessages = {
+ ok: "OK",
+ agree: "Zustimmen",
+ cancel: "Stornieren",
+ "yes-exit": "Beenden",
+ "yes-reset": "Chat zurücksetzen",
+ "no-cancel": "Stornieren",
+ "are-you-sure": "Möchten Sie den Chat beenden?",
+ recording: "Aufzeichnung...",
+ "thank-you": "Danke!",
+};

copilot-widget/lib/locales/en.locale.ts

@@ -1,13 +1,13 @@
 import { TranslatableMessages } from "./types";
 
 export const enLocale: TranslatableMessages = {
- ok: "Ok",
+ ok: "OK",
  agree: "Agree",
  cancel: "Cancel",
- "yes-exit": "Yes, exit",
- "yes-reset": "Yes, reset",
- "no-cancel": "No, cancel",
+ "yes-exit": "Exit",
+ "yes-reset": "Reset",
+ "no-cancel": "Cancel",
  "are-you-sure": "Are you sure?",
- recording: "Recording",
- "thank-you": "Thank you",
+ recording: "Recording...",
+ "thank-you": "Thanks!",
 };

copilot-widget/lib/locales/fr.locale.ts

@@ -0,0 +1,13 @@
+import { TranslatableMessages } from "./types";
+
+export const frLocale: TranslatableMessages = {
+ ok: "D'accord",
+ agree: "Accepter",
+ cancel: "Annuler",
+ "yes-exit": "Oui, sors",
+ "yes-reset": "Oui, réinitialiser",
+ "no-cancel": "Non, annule",
+ "are-you-sure": "Es-tu sûr?",
+ recording: "Enregistrement...",
+ "thank-you": "Merci!",
+};

copilot-widget/lib/locales/helper.ts

@@ -1,11 +1,15 @@
 import { enLocale } from "./en.locale";
 import { arLocale } from "./ar.locale";
 import { nlLocale } from "./nl.locale.ts";
+import { frLocale } from "./fr.locale.ts";
+import { deLocale } from "./de.locale.ts";
 
 const locales = {
  en: enLocale,
  ar: arLocale,
  nl: nlLocale,
+ fr: frLocale,
+ de: deLocale,
 };
 export type LangType = keyof typeof locales;
 

copilot-widget/lib/locales/nl.locale.ts

@@ -1,11 +1,11 @@
 import { TranslatableMessages } from "./types";
 
 export const nlLocale: TranslatableMessages = {
- ok: "Ok",
+ ok: "OK",
  agree: "Akkoord",
  cancel: "Annuleren",
  "yes-exit": "Beëindigen",
- "yes-reset": "Reset chat",
+ "yes-reset": "Reset",
  "no-cancel": "Annuleren",
  "are-you-sure": "Wil je de chat beëindigen?",
  recording: "Aan het opnemen...",

copilot-widget/lib/screens/ChatScreen.tsx

@@ -44,7 +44,7 @@ export default function ChatScreen() {
  >
  <div className="flex flex-1 w-full min-h-fit mt-auto flex-col py-2 max-h-full items-center gap-1 last:fade-in-right">
  {
- // If there are initial message, show it.
+ // If there are initial messages, show them.
  initialMessage && <BotInitialMessage message={initialMessage} />
  }
  <Map

copilot-widget/lib/types/options.ts

@@ -13,6 +13,7 @@ export type Options = {
  debug?: boolean;
  language?: LangType;
  warnBeforeClose?: boolean;
+ onClose?: () => void;
  containerProps?: React.DetailedHTMLProps<
  React.HTMLAttributes<HTMLDivElement>,
  HTMLDivElement