@djangocfg/ext-support 1.0.21 → 1.0.22

package/dist/index.cjs

@@ -5,7 +5,9 @@ var pRetry = require('p-retry');
 var zod = require('zod');
 var api = require('@djangocfg/ext-base/api');
 var lucideReact = require('lucide-react');
-var React7 = require('react');
+var React8 = require('react');
+var i18n = require('@djangocfg/ext-base/i18n');
+var i18n$1 = require('@djangocfg/i18n');
 var uiCore = require('@djangocfg/ui-core');
 var useSWR = require('swr');
 var jsxRuntime = require('react/jsx-runtime');
@@ -21,7 +23,7 @@ var extBase = require('@djangocfg/ext-base');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var pRetry__default = /*#__PURE__*/_interopDefault(pRetry);
-var React7__default = /*#__PURE__*/_interopDefault(React7);
+var React8__default = /*#__PURE__*/_interopDefault(React8);
 var useSWR__default = /*#__PURE__*/_interopDefault(useSWR);
 var moment2__default = /*#__PURE__*/_interopDefault(moment2);
 var useSWRInfinite__default = /*#__PURE__*/_interopDefault(useSWRInfinite);
@@ -1625,6 +1627,219 @@ var API = class {
 };
 api.initializeExtensionAPI(configureAPI);
 var apiSupport = api.createExtensionAPI(API);
+
+// src/i18n/locales/en.ts
+var en = {
+  layout: {
+    title: "Support Center",
+    titleShort: "Support",
+    subtitle: "Get help from our support team",
+    newTicket: "New Ticket"
+  },
+  status: {
+    open: "Open",
+    waitingForUser: "Waiting for you",
+    waitingForAdmin: "Waiting for support",
+    resolved: "Resolved",
+    closed: "Closed"
+  },
+  ticketList: {
+    noTickets: "No tickets yet",
+    noTicketsDescription: "Create your first support ticket to get help",
+    loadingMore: "Loading more...",
+    loadMore: "Load more",
+    allLoaded: "All {count} tickets loaded"
+  },
+  createTicket: {
+    title: "New Support Ticket",
+    description: "Describe your issue and we will help you",
+    subjectLabel: "Subject",
+    subjectPlaceholder: "Brief description of your issue",
+    messageLabel: "Message",
+    messagePlaceholder: "Describe your issue in detail...",
+    cancel: "Cancel",
+    creating: "Creating...",
+    create: "Create Ticket"
+  },
+  validation: {
+    subjectRequired: "Subject is required",
+    subjectTooLong: "Subject is too long (max 200 characters)",
+    messageRequired: "Message is required",
+    messageTooLong: "Message is too long (max 5000 characters)"
+  },
+  messages: {
+    ticketCreated: "Ticket created successfully",
+    ticketCreateFailed: "Failed to create ticket",
+    messageSent: "Message sent",
+    messageSendFailed: "Failed to send message"
+  },
+  messageInput: {
+    placeholder: "Type your message...",
+    ticketClosed: "Ticket closed",
+    ticketClosedDescription: "This ticket has been closed. Create a new ticket if you need further assistance."
+  },
+  messageList: {
+    noTicketSelected: "No ticket selected",
+    noTicketSelectedDescription: "Select a ticket from the list to view messages",
+    noMessages: "No messages yet",
+    noMessagesDescription: "Start the conversation by sending a message",
+    loadingOlder: "Loading older messages...",
+    loadOlder: "Load older messages",
+    supportTeam: "Support Team",
+    staff: "Staff"
+  },
+  time: {
+    justNow: "Just now",
+    minutesAgo: "{count} min ago",
+    hoursAgo: "{count}h ago",
+    daysAgo: "{count}d ago"
+  }
+};
+
+// src/i18n/locales/ru.ts
+var ru = {
+  layout: {
+    title: "\u0426\u0435\u043D\u0442\u0440 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u0438",
+    titleShort: "\u041F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u0430",
+    subtitle: "\u041F\u043E\u043B\u0443\u0447\u0438\u0442\u0435 \u043F\u043E\u043C\u043E\u0449\u044C \u043E\u0442 \u043D\u0430\u0448\u0435\u0439 \u043A\u043E\u043C\u0430\u043D\u0434\u044B \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u0438",
+    newTicket: "\u041D\u043E\u0432\u043E\u0435 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0435"
+  },
+  status: {
+    open: "\u041E\u0442\u043A\u0440\u044B\u0442",
+    waitingForUser: "\u041E\u0436\u0438\u0434\u0430\u0435\u0442 \u0432\u0430\u0441",
+    waitingForAdmin: "\u041E\u0436\u0438\u0434\u0430\u0435\u0442 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u0443",
+    resolved: "\u0420\u0435\u0448\u0451\u043D",
+    closed: "\u0417\u0430\u043A\u0440\u044B\u0442"
+  },
+  ticketList: {
+    noTickets: "\u041D\u0435\u0442 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0439",
+    noTicketsDescription: "\u0421\u043E\u0437\u0434\u0430\u0439\u0442\u0435 \u043F\u0435\u0440\u0432\u043E\u0435 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0435, \u0447\u0442\u043E\u0431\u044B \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u043F\u043E\u043C\u043E\u0449\u044C",
+    loadingMore: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...",
+    loadMore: "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0435\u0449\u0451",
+    allLoaded: "\u0412\u0441\u0435 {count} \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0439 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043E"
+  },
+  createTicket: {
+    title: "\u041D\u043E\u0432\u043E\u0435 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0435",
+    description: "\u041E\u043F\u0438\u0448\u0438\u0442\u0435 \u0432\u0430\u0448\u0443 \u043F\u0440\u043E\u0431\u043B\u0435\u043C\u0443, \u0438 \u043C\u044B \u043F\u043E\u043C\u043E\u0436\u0435\u043C \u0432\u0430\u043C",
+    subjectLabel: "\u0422\u0435\u043C\u0430",
+    subjectPlaceholder: "\u041A\u0440\u0430\u0442\u043A\u043E\u0435 \u043E\u043F\u0438\u0441\u0430\u043D\u0438\u0435 \u043F\u0440\u043E\u0431\u043B\u0435\u043C\u044B",
+    messageLabel: "\u0421\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435",
+    messagePlaceholder: "\u041E\u043F\u0438\u0448\u0438\u0442\u0435 \u0432\u0430\u0448\u0443 \u043F\u0440\u043E\u0431\u043B\u0435\u043C\u0443 \u043F\u043E\u0434\u0440\u043E\u0431\u043D\u043E...",
+    cancel: "\u041E\u0442\u043C\u0435\u043D\u0430",
+    creating: "\u0421\u043E\u0437\u0434\u0430\u043D\u0438\u0435...",
+    create: "\u0421\u043E\u0437\u0434\u0430\u0442\u044C \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0435"
+  },
+  validation: {
+    subjectRequired: "\u0422\u0435\u043C\u0430 \u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u0430",
+    subjectTooLong: "\u0422\u0435\u043C\u0430 \u0441\u043B\u0438\u0448\u043A\u043E\u043C \u0434\u043B\u0438\u043D\u043D\u0430\u044F (\u043C\u0430\u043A\u0441. 200 \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432)",
+    messageRequired: "\u0421\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435 \u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E",
+    messageTooLong: "\u0421\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435 \u0441\u043B\u0438\u0448\u043A\u043E\u043C \u0434\u043B\u0438\u043D\u043D\u043E\u0435 (\u043C\u0430\u043A\u0441. 5000 \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432)"
+  },
+  messages: {
+    ticketCreated: "\u041E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0435 \u0441\u043E\u0437\u0434\u0430\u043D\u043E",
+    ticketCreateFailed: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0441\u043E\u0437\u0434\u0430\u0442\u044C \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0435",
+    messageSent: "\u0421\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435 \u043E\u0442\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u043E",
+    messageSendFailed: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u043E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435"
+  },
+  messageInput: {
+    placeholder: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435...",
+    ticketClosed: "\u041E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0435 \u0437\u0430\u043A\u0440\u044B\u0442\u043E",
+    ticketClosedDescription: "\u042D\u0442\u043E \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0435 \u0437\u0430\u043A\u0440\u044B\u0442\u043E. \u0421\u043E\u0437\u0434\u0430\u0439\u0442\u0435 \u043D\u043E\u0432\u043E\u0435, \u0435\u0441\u043B\u0438 \u0432\u0430\u043C \u043D\u0443\u0436\u043D\u0430 \u043F\u043E\u043C\u043E\u0449\u044C."
+  },
+  messageList: {
+    noTicketSelected: "\u041E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E",
+    noTicketSelectedDescription: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0435 \u0438\u0437 \u0441\u043F\u0438\u0441\u043A\u0430 \u0434\u043B\u044F \u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440\u0430 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0439",
+    noMessages: "\u041D\u0435\u0442 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0439",
+    noMessagesDescription: "\u041D\u0430\u0447\u043D\u0438\u0442\u0435 \u0434\u0438\u0430\u043B\u043E\u0433, \u043E\u0442\u043F\u0440\u0430\u0432\u0438\u0432 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435",
+    loadingOlder: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0441\u0442\u0430\u0440\u044B\u0445 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0439...",
+    loadOlder: "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0441\u0442\u0430\u0440\u044B\u0435",
+    supportTeam: "\u0421\u043B\u0443\u0436\u0431\u0430 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u0438",
+    staff: "\u0421\u043E\u0442\u0440\u0443\u0434\u043D\u0438\u043A"
+  },
+  time: {
+    justNow: "\u0422\u043E\u043B\u044C\u043A\u043E \u0447\u0442\u043E",
+    minutesAgo: "{count} \u043C\u0438\u043D \u043D\u0430\u0437\u0430\u0434",
+    hoursAgo: "{count}\u0447 \u043D\u0430\u0437\u0430\u0434",
+    daysAgo: "{count}\u0434 \u043D\u0430\u0437\u0430\u0434"
+  }
+};
+
+// src/i18n/locales/ko.ts
+var ko = {
+  layout: {
+    title: "\uACE0\uAC1D\uC9C0\uC6D0 \uC13C\uD130",
+    titleShort: "\uACE0\uAC1D\uC9C0\uC6D0",
+    subtitle: "\uACE0\uAC1D\uC9C0\uC6D0\uD300\uC758 \uB3C4\uC6C0\uC744 \uBC1B\uC73C\uC138\uC694",
+    newTicket: "\uC0C8 \uBB38\uC758"
+  },
+  status: {
+    open: "\uC5F4\uB9BC",
+    waitingForUser: "\uD68C\uC2E0 \uB300\uAE30",
+    waitingForAdmin: "\uC9C0\uC6D0\uD300 \uB300\uAE30",
+    resolved: "\uD574\uACB0\uB428",
+    closed: "\uC885\uB8CC"
+  },
+  ticketList: {
+    noTickets: "\uBB38\uC758 \uB0B4\uC5ED \uC5C6\uC74C",
+    noTicketsDescription: "\uCCAB \uBC88\uC9F8 \uBB38\uC758\uB97C \uB4F1\uB85D\uD558\uC5EC \uB3C4\uC6C0\uC744 \uBC1B\uC73C\uC138\uC694",
+    loadingMore: "\uBD88\uB7EC\uC624\uB294 \uC911...",
+    loadMore: "\uB354 \uBCF4\uAE30",
+    allLoaded: "\uCD1D {count}\uAC1C\uC758 \uBB38\uC758\uAC00 \uB85C\uB4DC\uB428"
+  },
+  createTicket: {
+    title: "\uC0C8 \uBB38\uC758",
+    description: "\uBB38\uC81C\uB97C \uC124\uBA85\uD574 \uC8FC\uC2DC\uBA74 \uB3C4\uC6C0\uC744 \uB4DC\uB9AC\uACA0\uC2B5\uB2C8\uB2E4",
+    subjectLabel: "\uC81C\uBAA9",
+    subjectPlaceholder: "\uBB38\uC81C\uC5D0 \uB300\uD55C \uAC04\uB7B5\uD55C \uC124\uBA85",
+    messageLabel: "\uB0B4\uC6A9",
+    messagePlaceholder: "\uBB38\uC81C\uB97C \uC790\uC138\uD788 \uC124\uBA85\uD574 \uC8FC\uC138\uC694...",
+    cancel: "\uCDE8\uC18C",
+    creating: "\uC0DD\uC131 \uC911...",
+    create: "\uBB38\uC758 \uB4F1\uB85D"
+  },
+  validation: {
+    subjectRequired: "\uC81C\uBAA9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+    subjectTooLong: "\uC81C\uBAA9\uC774 \uB108\uBB34 \uAE41\uB2C8\uB2E4 (\uCD5C\uB300 200\uC790)",
+    messageRequired: "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+    messageTooLong: "\uB0B4\uC6A9\uC774 \uB108\uBB34 \uAE41\uB2C8\uB2E4 (\uCD5C\uB300 5000\uC790)"
+  },
+  messages: {
+    ticketCreated: "\uBB38\uC758\uAC00 \uB4F1\uB85D\uB418\uC5C8\uC2B5\uB2C8\uB2E4",
+    ticketCreateFailed: "\uBB38\uC758 \uB4F1\uB85D\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4",
+    messageSent: "\uBA54\uC2DC\uC9C0\uAC00 \uC804\uC1A1\uB418\uC5C8\uC2B5\uB2C8\uB2E4",
+    messageSendFailed: "\uBA54\uC2DC\uC9C0 \uC804\uC1A1\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4"
+  },
+  messageInput: {
+    placeholder: "\uBA54\uC2DC\uC9C0\uB97C \uC785\uB825\uD558\uC138\uC694...",
+    ticketClosed: "\uBB38\uC758 \uC885\uB8CC\uB428",
+    ticketClosedDescription: "\uC774 \uBB38\uC758\uB294 \uC885\uB8CC\uB418\uC5C8\uC2B5\uB2C8\uB2E4. \uCD94\uAC00 \uB3C4\uC6C0\uC774 \uD544\uC694\uD558\uC2DC\uBA74 \uC0C8 \uBB38\uC758\uB97C \uB4F1\uB85D\uD574 \uC8FC\uC138\uC694."
+  },
+  messageList: {
+    noTicketSelected: "\uBB38\uC758\uAC00 \uC120\uD0DD\uB418\uC9C0 \uC54A\uC74C",
+    noTicketSelectedDescription: "\uBA54\uC2DC\uC9C0\uB97C \uBCF4\uB824\uBA74 \uBAA9\uB85D\uC5D0\uC11C \uBB38\uC758\uB97C \uC120\uD0DD\uD558\uC138\uC694",
+    noMessages: "\uBA54\uC2DC\uC9C0 \uC5C6\uC74C",
+    noMessagesDescription: "\uBA54\uC2DC\uC9C0\uB97C \uBCF4\uB0B4 \uB300\uD654\uB97C \uC2DC\uC791\uD558\uC138\uC694",
+    loadingOlder: "\uC774\uC804 \uBA54\uC2DC\uC9C0 \uBD88\uB7EC\uC624\uB294 \uC911...",
+    loadOlder: "\uC774\uC804 \uBA54\uC2DC\uC9C0 \uBCF4\uAE30",
+    supportTeam: "\uACE0\uAC1D\uC9C0\uC6D0\uD300",
+    staff: "\uB2F4\uB2F9\uC790"
+  },
+  time: {
+    justNow: "\uBC29\uAE08 \uC804",
+    minutesAgo: "{count}\uBD84 \uC804",
+    hoursAgo: "{count}\uC2DC\uAC04 \uC804",
+    daysAgo: "{count}\uC77C \uC804"
+  }
+};
+
+// src/i18n/index.ts
+var SUPPORT_NAMESPACE = "support";
+var supportI18n = i18n.createExtensionI18n({
+  namespace: SUPPORT_NAMESPACE,
+  defaultLocale: "en",
+  locales: { en, ru, ko }
+});
+supportI18n.getAllTranslations();
 function useSupportTicketsList(params, client) {
   return useSWR__default.default(
     params ? ["cfg-support-tickets", params] : "cfg-support-tickets",
@@ -1717,7 +1932,7 @@ function useDeleteSupportTicketsDestroy() {
     return result;
   };
 }
-var SupportContext = React7.createContext(void 0);
+var SupportContext = React8.createContext(void 0);
 function SupportProvider({ children }) {
   const {
     data: ticketsData,
@@ -1817,7 +2032,7 @@ function SupportProvider({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(SupportContext.Provider, { value, children });
 }
 function useSupportContext() {
-  const context = React7.useContext(SupportContext);
+  const context = React8.useContext(SupportContext);
   if (!context) {
     throw new Error("useSupportContext must be used within SupportProvider");
   }
@@ -1839,18 +2054,36 @@ var getStatusBadgeVariant = (status) => {
       return "default";
   }
 };
-var formatRelativeTime = (date) => {
-  if (!date) return "N/A";
-  const m = moment2__default.default.utc(date).local();
-  const now = moment2__default.default();
-  const diffInSeconds = now.diff(m, "seconds");
-  if (diffInSeconds < 60) return "Just now";
-  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
-  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
-  if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)}d ago`;
-  return m.format("MMM D, YYYY");
-};
 var TicketCard = ({ ticket, isSelected, onClick }) => {
+  const baseT = i18n$1.useT();
+  const st = i18n.createTypedExtensionT(baseT, SUPPORT_NAMESPACE);
+  const labels = React8.useMemo(() => ({
+    status: {
+      open: st("status.open"),
+      waiting_for_user: st("status.waitingForUser"),
+      waiting_for_admin: st("status.waitingForAdmin"),
+      resolved: st("status.resolved"),
+      closed: st("status.closed")
+    },
+    time: {
+      justNow: st("time.justNow"),
+      minutesAgo: st("time.minutesAgo"),
+      hoursAgo: st("time.hoursAgo"),
+      daysAgo: st("time.daysAgo")
+    }
+  }), [st]);
+  const formatRelativeTime = React8.useCallback((date) => {
+    if (!date) return "N/A";
+    const m = moment2__default.default.utc(date).local();
+    const now = moment2__default.default();
+    const diffInSeconds = now.diff(m, "seconds");
+    if (diffInSeconds < 60) return labels.time.justNow;
+    if (diffInSeconds < 3600) return labels.time.minutesAgo.replace("{count}", String(Math.floor(diffInSeconds / 60)));
+    if (diffInSeconds < 86400) return labels.time.hoursAgo.replace("{count}", String(Math.floor(diffInSeconds / 3600)));
+    if (diffInSeconds < 604800) return labels.time.daysAgo.replace("{count}", String(Math.floor(diffInSeconds / 86400)));
+    return m.format("MMM D, YYYY");
+  }, [labels.time]);
+  const statusLabel = labels.status[ticket.status] || ticket.status || labels.status.open;
   return /* @__PURE__ */ jsxRuntime.jsx(
     uiCore.Card,
     {
@@ -1874,7 +2107,7 @@ var TicketCard = ({ ticket, isSelected, onClick }) => {
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(uiCore.Badge, { variant: getStatusBadgeVariant(ticket.status || "open"), className: "text-xs", children: ticket.status || "open" }),
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.Badge, { variant: getStatusBadgeVariant(ticket.status || "open"), className: "text-xs", children: statusLabel }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatRelativeTime(ticket.created_at) })
@@ -2018,11 +2251,11 @@ function useInfiniteMessages(ticketUuid) {
     addMessage
   };
 }
-var SupportLayoutContext = React7.createContext(void 0);
+var SupportLayoutContext = React8.createContext(void 0);
 function SupportLayoutProvider({ children }) {
   const support = useSupportContext();
   const { user } = auth.useAuth();
-  const [uiState, setUIState] = React7.useState({
+  const [uiState, setUIState] = React8.useState({
     selectedTicketUuid: null,
     isCreateDialogOpen: false,
     viewMode: "list"
@@ -2038,7 +2271,7 @@ function SupportLayoutProvider({ children }) {
     refresh: refreshMessages,
     addMessage: addMessageOptimistically
   } = useInfiniteMessages(selectedTicket?.uuid || null);
-  const selectTicket = React7.useCallback(async (ticket) => {
+  const selectTicket = React8.useCallback(async (ticket) => {
     setUIState((prev) => ({ ...prev, selectedTicketUuid: ticket?.uuid || null }));
     if (ticket?.uuid) {
       window.dispatchEvent(
@@ -2046,7 +2279,7 @@ function SupportLayoutProvider({ children }) {
       );
     }
   }, []);
-  const createTicket = React7.useCallback(async (data) => {
+  const createTicket = React8.useCallback(async (data) => {
     if (!user?.id) {
       throw new Error("User must be authenticated to create tickets");
     }
@@ -2069,7 +2302,7 @@ function SupportLayoutProvider({ children }) {
       new CustomEvent(SUPPORT_LAYOUT_EVENTS.TICKET_SELECTED, { detail: { ticket } })
     );
   }, [support, user]);
-  const sendMessage = React7.useCallback(async (message) => {
+  const sendMessage = React8.useCallback(async (message) => {
     if (!selectedTicket?.uuid) return;
     const messageData = {
       text: message
@@ -2099,16 +2332,16 @@ function SupportLayoutProvider({ children }) {
       new CustomEvent(SUPPORT_LAYOUT_EVENTS.MESSAGE_SENT, { detail: { message: newMessage } })
     );
   }, [selectedTicket, support, user, addMessageOptimistically, refreshMessages]);
-  const openCreateDialog = React7.useCallback(() => {
+  const openCreateDialog = React8.useCallback(() => {
     setUIState((prev) => ({ ...prev, isCreateDialogOpen: true }));
   }, []);
-  const closeCreateDialog = React7.useCallback(() => {
+  const closeCreateDialog = React8.useCallback(() => {
     setUIState((prev) => ({ ...prev, isCreateDialogOpen: false }));
   }, []);
-  const getUnreadCount = React7.useCallback(() => {
+  const getUnreadCount = React8.useCallback(() => {
     return support.tickets?.reduce((count, ticket) => count + (ticket.unanswered_messages_count || 0), 0) || 0;
   }, [support.tickets]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     const handleOpenDialog = () => openCreateDialog();
     const handleCloseDialog = () => closeCreateDialog();
     window.addEventListener(SUPPORT_LAYOUT_EVENTS.OPEN_CREATE_DIALOG, handleOpenDialog);
@@ -2142,13 +2375,15 @@ function SupportLayoutProvider({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(SupportLayoutContext.Provider, { value, children });
 }
 function useSupportLayoutContext() {
-  const context = React7.useContext(SupportLayoutContext);
+  const context = React8.useContext(SupportLayoutContext);
   if (!context) {
     throw new Error("useSupportLayoutContext must be used within SupportLayoutProvider");
   }
   return context;
 }
 var TicketList = () => {
+  const baseT = i18n$1.useT();
+  const st = i18n.createTypedExtensionT(baseT, SUPPORT_NAMESPACE);
   const { selectedTicket, selectTicket } = useSupportLayoutContext();
   const {
     tickets,
@@ -2159,10 +2394,17 @@ var TicketList = () => {
     totalCount,
     refresh
   } = useInfiniteTickets();
-  const scrollRef = React7.useRef(null);
-  const observerRef = React7.useRef(null);
-  const loadMoreRef = React7.useRef(null);
-  React7.useEffect(() => {
+  const labels = React8.useMemo(() => ({
+    noTickets: st("ticketList.noTickets"),
+    noTicketsDescription: st("ticketList.noTicketsDescription"),
+    loadingMore: st("ticketList.loadingMore"),
+    loadMore: st("ticketList.loadMore"),
+    allLoaded: st("ticketList.allLoaded")
+  }), [st]);
+  const scrollRef = React8.useRef(null);
+  const observerRef = React8.useRef(null);
+  const loadMoreRef = React8.useRef(null);
+  React8.useEffect(() => {
     const handleTicketCreated = () => {
       refresh();
     };
@@ -2171,7 +2413,7 @@ var TicketList = () => {
       window.removeEventListener(SUPPORT_LAYOUT_EVENTS.TICKET_CREATED, handleTicketCreated);
     };
   }, [refresh]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (observerRef.current) {
       observerRef.current.disconnect();
     }
@@ -2204,8 +2446,8 @@ var TicketList = () => {
   if (!tickets || tickets.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center h-full p-8 text-center animate-in fade-in zoom-in-95 duration-300", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-16 w-16 text-muted-foreground mb-4 animate-bounce" }),
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-2", children: "No tickets yet" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground max-w-sm", children: "Create your first support ticket to get help from our team" })
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-2", children: labels.noTickets }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground max-w-sm", children: labels.noTicketsDescription })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(uiCore.ScrollArea, { className: "h-full", viewportRef: scrollRef, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 space-y-2", children: [
@@ -2228,7 +2470,7 @@ var TicketList = () => {
     /* @__PURE__ */ jsxRuntime.jsx("div", { ref: loadMoreRef, className: "h-2" }),
     isLoadingMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "Loading more tickets..." })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: labels.loadingMore })
     ] }) }),
     hasMore && !isLoadingMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-2 pb-4", children: /* @__PURE__ */ jsxRuntime.jsxs(
       uiCore.Button,
@@ -2238,17 +2480,14 @@ var TicketList = () => {
         onClick: loadMore,
         className: "text-xs",
         children: [
-          "Load more (",
+          labels.loadMore,
+          " (",
           totalCount > 0 ? `${tickets.length}/${totalCount}` : "",
           ")"
         ]
       }
     ) }),
-    !hasMore && tickets.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-4 text-sm text-muted-foreground", children: [
-      "All ",
-      totalCount,
-      " tickets loaded"
-    ] })
+    !hasMore && tickets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-4 text-sm text-muted-foreground", children: labels.allLoaded.replace("{count}", String(totalCount)) })
   ] }) });
 };
 var formatTime = (date) => {
@@ -2259,7 +2498,7 @@ var formatDate = (date) => {
   if (!date) return "";
   return moment2__default.default.utc(date).local().format("MMM D, YYYY");
 };
-var MessageBubble = ({ message, isFromUser, currentUser }) => {
+var MessageBubble = ({ message, isFromUser, currentUser, labels }) => {
   const sender = message.sender;
   const senderInitial = sender?.display_username?.charAt(0)?.toUpperCase() || sender?.initials || "S";
   const userInitial = currentUser?.display_username?.charAt(0)?.toUpperCase() || currentUser?.email?.charAt(0)?.toUpperCase() || currentUser?.initials || null;
@@ -2269,11 +2508,11 @@ var MessageBubble = ({ message, isFromUser, currentUser }) => {
       className: `flex gap-3 ${isFromUser ? "justify-end" : "justify-start"}
                  animate-in fade-in slide-in-from-bottom-2 duration-300`,
       children: [
-        !isFromUser && /* @__PURE__ */ jsxRuntime.jsx(uiCore.Avatar, { className: "h-8 w-8 shrink-0", children: sender?.avatar ? /* @__PURE__ */ jsxRuntime.jsx(uiCore.AvatarImage, { src: sender.avatar, alt: sender.display_username || "Support" }) : /* @__PURE__ */ jsxRuntime.jsx(uiCore.AvatarFallback, { className: "bg-primary text-primary-foreground", children: sender?.is_staff ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Headphones, { className: "h-4 w-4" }) : senderInitial }) }),
+        !isFromUser && /* @__PURE__ */ jsxRuntime.jsx(uiCore.Avatar, { className: "h-8 w-8 shrink-0", children: sender?.avatar ? /* @__PURE__ */ jsxRuntime.jsx(uiCore.AvatarImage, { src: sender.avatar, alt: sender.display_username || labels.supportTeam }) : /* @__PURE__ */ jsxRuntime.jsx(uiCore.AvatarFallback, { className: "bg-primary text-primary-foreground", children: sender?.is_staff ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Headphones, { className: "h-4 w-4" }) : senderInitial }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-1 flex-1 max-w-[80%] ${isFromUser ? "items-end" : "items-start"}`, children: [
           !isFromUser && sender && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground px-1", children: [
-            sender.display_username || sender.email || "Support Team",
-            sender.is_staff && " (Staff)"
+            sender.display_username || sender.email || labels.supportTeam,
+            sender.is_staff && ` (${labels.staff})`
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             uiCore.Card,
@@ -2290,8 +2529,20 @@ var MessageBubble = ({ message, isFromUser, currentUser }) => {
   );
 };
 var MessageList = () => {
+  const baseT = i18n$1.useT();
+  const st = i18n.createTypedExtensionT(baseT, SUPPORT_NAMESPACE);
   const { selectedTicket } = useSupportLayoutContext();
   const { user } = auth.useAuth();
+  const labels = React8.useMemo(() => ({
+    noTicketSelected: st("messageList.noTicketSelected"),
+    noTicketSelectedDescription: st("messageList.noTicketSelectedDescription"),
+    noMessages: st("messageList.noMessages"),
+    noMessagesDescription: st("messageList.noMessagesDescription"),
+    loadingOlder: st("messageList.loadingOlder"),
+    loadOlder: st("messageList.loadOlder"),
+    supportTeam: st("messageList.supportTeam"),
+    staff: st("messageList.staff")
+  }), [st]);
   const {
     messages,
     isLoading,
@@ -2300,12 +2551,12 @@ var MessageList = () => {
     totalCount,
     loadMore
   } = useInfiniteMessages(selectedTicket?.uuid || null);
-  const scrollRef = React7.useRef(null);
-  const scrollAreaRef = React7.useRef(null);
-  const observerRef = React7.useRef(null);
-  const loadMoreRef = React7.useRef(null);
-  const firstRender = React7.useRef(true);
-  React7.useEffect(() => {
+  const scrollRef = React8.useRef(null);
+  const scrollAreaRef = React8.useRef(null);
+  const observerRef = React8.useRef(null);
+  const loadMoreRef = React8.useRef(null);
+  const firstRender = React8.useRef(true);
+  React8.useEffect(() => {
     if (observerRef.current) {
       observerRef.current.disconnect();
     }
@@ -2326,7 +2577,7 @@ var MessageList = () => {
       }
     };
   }, [hasMore, isLoadingMore, loadMore]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (firstRender.current && messages.length > 0) {
       const scrollContainer = scrollAreaRef.current?.querySelector("[data-radix-scroll-area-viewport]");
       if (scrollContainer) {
@@ -2335,7 +2586,7 @@ var MessageList = () => {
       firstRender.current = false;
     }
   }, [messages]);
-  const handleLoadMore = React7.useCallback(() => {
+  const handleLoadMore = React8.useCallback(() => {
     const scrollContainer = scrollAreaRef.current?.querySelector("[data-radix-scroll-area-viewport]");
     const previousHeight = scrollContainer?.scrollHeight || 0;
     loadMore();
@@ -2349,8 +2600,8 @@ var MessageList = () => {
   if (!selectedTicket) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center h-full p-8 text-center animate-in fade-in zoom-in-95 duration-300", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-16 w-16 text-muted-foreground mb-4 animate-bounce" }),
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-2", children: "No ticket selected" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground max-w-sm", children: "Select a ticket from the list to view the conversation" })
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-2", children: labels.noTicketSelected }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground max-w-sm", children: labels.noTicketSelectedDescription })
     ] });
   }
   if (isLoading) {
@@ -2370,15 +2621,15 @@ var MessageList = () => {
   if (!messages || messages.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center h-full p-8 text-center animate-in fade-in zoom-in-95 duration-300", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-16 w-16 text-muted-foreground mb-4 animate-bounce" }),
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-2", children: "No messages yet" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground max-w-sm", children: "Start the conversation by sending a message below" })
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-2", children: labels.noMessages }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground max-w-sm", children: labels.noMessagesDescription })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(uiCore.ScrollArea, { className: "h-full bg-muted/50", viewportRef: scrollAreaRef, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 space-y-4", ref: scrollRef, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { ref: loadMoreRef, className: "h-2" }),
     isLoadingMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "Loading older messages..." })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: labels.loadingOlder })
     ] }) }),
     hasMore && !isLoadingMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-2 pb-4", children: /* @__PURE__ */ jsxRuntime.jsxs(
       uiCore.Button,
@@ -2388,7 +2639,8 @@ var MessageList = () => {
         onClick: handleLoadMore,
         className: "text-xs",
         children: [
-          "Load older messages (",
+          labels.loadOlder,
+          " (",
           totalCount > 0 ? `${messages.length}/${totalCount}` : "",
           ")"
         ]
@@ -2403,7 +2655,7 @@ var MessageList = () => {
       const isFromUser = message.sender?.id && user?.id && String(message.sender.id) === String(user.id) || message.sender?.email && user?.email && message.sender.email === user.email || message.is_from_author && selectedTicket?.user && user?.id && String(selectedTicket.user) === String(user.id);
       const previousMessage = index > 0 ? messages[index - 1] : null;
       const showDateSeparator = previousMessage && moment2__default.default.utc(previousMessage.created_at || "").format("YYYY-MM-DD") !== moment2__default.default.utc(message.created_at || "").format("YYYY-MM-DD");
-      return /* @__PURE__ */ jsxRuntime.jsxs(React7__default.default.Fragment, { children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(React8__default.default.Fragment, { children: [
         showDateSeparator && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 my-4", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-px bg-border" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: formatDate(message.created_at) }),
@@ -2414,7 +2666,8 @@ var MessageList = () => {
           {
             message,
             isFromUser: !!isFromUser,
-            currentUser: user
+            currentUser: user,
+            labels: { supportTeam: labels.supportTeam, staff: labels.staff }
           }
         ) })
       ] }, message.uuid);
@@ -2428,10 +2681,19 @@ var logger = consola.createConsola({
 }).withTag("ext-support");
 var supportLogger = logger;
 var MessageInput = () => {
+  const baseT = i18n$1.useT();
+  const st = i18n.createTypedExtensionT(baseT, SUPPORT_NAMESPACE);
   const { selectedTicket, sendMessage } = useSupportLayoutContext();
   const { toast } = hooks.useToast();
-  const [message, setMessage] = React7.useState("");
-  const [isSending, setIsSending] = React7.useState(false);
+  const [message, setMessage] = React8.useState("");
+  const [isSending, setIsSending] = React8.useState(false);
+  const labels = React8.useMemo(() => ({
+    placeholder: st("messageInput.placeholder"),
+    ticketClosed: st("messageInput.ticketClosed"),
+    ticketClosedDescription: st("messageInput.ticketClosedDescription"),
+    messageSent: st("messages.messageSent"),
+    messageSendFailed: st("messages.messageSendFailed")
+  }), [st]);
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (!message.trim() || !selectedTicket) return;
@@ -2439,10 +2701,10 @@ var MessageInput = () => {
     try {
       await sendMessage(message.trim());
       setMessage("");
-      toast.success("Message sent successfully");
+      toast.success(labels.messageSent);
     } catch (error) {
       supportLogger.error("Failed to send message:", error);
-      toast.error("Failed to send message");
+      toast.error(labels.messageSendFailed);
     } finally {
       setIsSending(false);
     }
@@ -2465,8 +2727,8 @@ var MessageInput = () => {
           value: message,
           onChange: (e) => setMessage(e.target.value),
           onKeyDown: handleKeyDown,
-          placeholder: canSendMessage ? "Type your message... (Shift+Enter for new line)" : "This ticket is closed",
-          className: "min-h-[60px] max-h-[200px] transition-all duration-200 \n                     focus:ring-2 focus:ring-primary/20",
+          placeholder: canSendMessage ? labels.placeholder : labels.ticketClosed,
+          className: "min-h-[60px] max-h-[200px] transition-all duration-200\n                     focus:ring-2 focus:ring-primary/20",
           disabled: !canSendMessage || isSending
         }
       ),
@@ -2481,17 +2743,38 @@ var MessageInput = () => {
         }
       )
     ] }),
-    !canSendMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-2 animate-in fade-in slide-in-from-top-1 duration-200", children: "This ticket is closed. You cannot send new messages." })
+    !canSendMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-2 animate-in fade-in slide-in-from-top-1 duration-200", children: labels.ticketClosedDescription })
   ] });
 };
-var createTicketSchema = zod.z.object({
-  subject: zod.z.string().min(1, "Subject is required").max(200, "Subject too long"),
-  message: zod.z.string().min(1, "Message is required").max(5e3, "Message too long")
-});
 var CreateTicketDialog = () => {
+  const baseT = i18n$1.useT();
+  const st = i18n.createTypedExtensionT(baseT, SUPPORT_NAMESPACE);
   const { uiState, createTicket, closeCreateDialog } = useSupportLayoutContext();
   const { toast } = uiCore.useToast();
-  const [isSubmitting, setIsSubmitting] = React7__default.default.useState(false);
+  const [isSubmitting, setIsSubmitting] = React8__default.default.useState(false);
+  const labels = React8.useMemo(() => ({
+    title: st("createTicket.title"),
+    description: st("createTicket.description"),
+    subjectLabel: st("createTicket.subjectLabel"),
+    subjectPlaceholder: st("createTicket.subjectPlaceholder"),
+    messageLabel: st("createTicket.messageLabel"),
+    messagePlaceholder: st("createTicket.messagePlaceholder"),
+    cancel: st("createTicket.cancel"),
+    creating: st("createTicket.creating"),
+    create: st("createTicket.create"),
+    ticketCreated: st("messages.ticketCreated"),
+    ticketCreateFailed: st("messages.ticketCreateFailed"),
+    validation: {
+      subjectRequired: st("validation.subjectRequired"),
+      subjectTooLong: st("validation.subjectTooLong"),
+      messageRequired: st("validation.messageRequired"),
+      messageTooLong: st("validation.messageTooLong")
+    }
+  }), [st]);
+  const createTicketSchema = React8.useMemo(() => zod.z.object({
+    subject: zod.z.string().min(1, labels.validation.subjectRequired).max(200, labels.validation.subjectTooLong),
+    message: zod.z.string().min(1, labels.validation.messageRequired).max(5e3, labels.validation.messageTooLong)
+  }), [labels.validation]);
   const form = reactHookForm.useForm({
     resolver: zod$1.zodResolver(createTicketSchema),
     defaultValues: {
@@ -2504,10 +2787,10 @@ var CreateTicketDialog = () => {
     try {
       await createTicket(data);
       form.reset();
-      toast.success("Support ticket created successfully");
+      toast.success(labels.ticketCreated);
     } catch (error) {
       supportLogger.error("Failed to create ticket:", error);
-      toast.error("Failed to create ticket. Please try again.");
+      toast.error(labels.ticketCreateFailed);
     } finally {
       setIsSubmitting(false);
     }
@@ -2520,9 +2803,9 @@ var CreateTicketDialog = () => {
     /* @__PURE__ */ jsxRuntime.jsxs(uiCore.DialogHeader, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(uiCore.DialogTitle, { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-5 w-5" }),
-        "Create Support Ticket"
+        labels.title
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(uiCore.DialogDescription, { children: "Describe your issue and we'll help you resolve it as quickly as possible." })
+      /* @__PURE__ */ jsxRuntime.jsx(uiCore.DialogDescription, { children: labels.description })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(uiCore.Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-6", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -2531,8 +2814,8 @@ var CreateTicketDialog = () => {
           control: form.control,
           name: "subject",
           render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(uiCore.FormItem, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(uiCore.FormLabel, { children: "Subject" }),
-            /* @__PURE__ */ jsxRuntime.jsx(uiCore.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(uiCore.Input, { placeholder: "Brief description of your issue...", ...field }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.FormLabel, { children: labels.subjectLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(uiCore.Input, { placeholder: labels.subjectPlaceholder, ...field }) }),
             /* @__PURE__ */ jsxRuntime.jsx(uiCore.FormMessage, {})
           ] })
         }
@@ -2543,11 +2826,11 @@ var CreateTicketDialog = () => {
           control: form.control,
           name: "message",
           render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(uiCore.FormItem, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(uiCore.FormLabel, { children: "Message" }),
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.FormLabel, { children: labels.messageLabel }),
             /* @__PURE__ */ jsxRuntime.jsx(uiCore.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
               uiCore.Textarea,
               {
-                placeholder: "Describe your issue in detail. Include any error messages, steps to reproduce, or relevant information...",
+                placeholder: labels.messagePlaceholder,
                 className: "min-h-[120px]",
                 ...field
               }
@@ -2564,24 +2847,32 @@ var CreateTicketDialog = () => {
             variant: "outline",
             onClick: handleClose,
             disabled: isSubmitting,
-            children: "Cancel"
+            children: labels.cancel
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(uiCore.Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
-          "Creating..."
+          labels.creating
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-2" }),
-          "Create Ticket"
+          labels.create
         ] }) })
       ] })
     ] }) })
   ] }) });
 };
 var SupportLayoutContent = () => {
+  const baseT = i18n$1.useT();
+  const st = i18n.createTypedExtensionT(baseT, SUPPORT_NAMESPACE);
   const { selectedTicket, selectTicket, openCreateDialog, getUnreadCount } = useSupportLayoutContext();
-  const [isMobile, setIsMobile] = React7__default.default.useState(false);
-  React7__default.default.useEffect(() => {
+  const [isMobile, setIsMobile] = React8__default.default.useState(false);
+  const labels = React8.useMemo(() => ({
+    title: st("layout.title"),
+    titleShort: st("layout.titleShort"),
+    subtitle: st("layout.subtitle"),
+    newTicket: st("layout.newTicket")
+  }), [st]);
+  React8__default.default.useEffect(() => {
     const checkMobile = () => setIsMobile(window.innerWidth <= 768);
     checkMobile();
     window.addEventListener("resize", checkMobile);
@@ -2602,12 +2893,12 @@ var SupportLayoutContent = () => {
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-5 w-5" })
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LifeBuoy, { className: "h-6 w-6 text-primary" }),
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold", children: selectedTicket ? selectedTicket.subject : "Support" }),
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold", children: selectedTicket ? selectedTicket.subject : labels.titleShort }),
           unreadCount > 0 && !selectedTicket && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 w-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center", children: unreadCount })
         ] }),
         !selectedTicket && /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Button, { onClick: openCreateDialog, size: "sm", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-2" }),
-          "New Ticket"
+          labels.newTicket
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: selectedTicket ? (
@@ -2628,14 +2919,14 @@ var SupportLayoutContent = () => {
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LifeBuoy, { className: "h-7 w-7 text-primary" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold", children: "Support Center" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Get help from our support team" })
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold", children: labels.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: labels.subtitle })
         ] }),
         unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-6 bg-red-500 text-white text-sm rounded-full flex items-center justify-center", children: unreadCount })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Button, { onClick: openCreateDialog, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-2" }),
-        "New Ticket"
+        labels.newTicket
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(uiCore.ResizablePanelGroup, { direction: "horizontal", className: "h-full", children: [
@@ -2656,7 +2947,7 @@ var SupportLayout = () => {
 // package.json
 var package_default = {
   name: "@djangocfg/ext-support",
-  version: "1.0.21",
+  version: "1.0.22",
   description: "Support ticket system extension for DjangoCFG",
   keywords: [
     "django",
@@ -2702,6 +2993,11 @@ var package_default = {
       types: "./dist/config.d.ts",
       import: "./dist/config.js",
       require: "./dist/config.cjs"
+    },
+    "./i18n": {
+      types: "./dist/i18n.d.ts",
+      import: "./dist/i18n.js",
+      require: "./dist/i18n.cjs"
     }
   },
   files: [
@@ -2717,6 +3013,7 @@ var package_default = {
   peerDependencies: {
     "@djangocfg/api": "workspace:*",
     "@djangocfg/ext-base": "workspace:*",
+    "@djangocfg/i18n": "workspace:*",
     "@djangocfg/ui-core": "workspace:*",
     consola: "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -2732,6 +3029,7 @@ var package_default = {
   devDependencies: {
     "@djangocfg/api": "workspace:*",
     "@djangocfg/ext-base": "workspace:*",
+    "@djangocfg/i18n": "workspace:*",
     "@djangocfg/ui-core": "workspace:*",
     "@djangocfg/typescript-config": "workspace:*",
     "@types/node": "^24.7.2",