@djangocfg/ext-support 1.0.21 → 1.0.23

package/dist/hooks.js

@@ -3,7 +3,8 @@ import pRetry, { AbortError } from 'p-retry';
 import { z } from 'zod';
 import { initializeExtensionAPI, createExtensionAPI } from '@djangocfg/ext-base/api';
 import { Clock, MessageSquare, Loader2, Send, Plus, Headphones, User, ArrowLeft, LifeBuoy } from 'lucide-react';
-import React7, { createContext, useContext, useState, useCallback, useEffect, useRef } from 'react';
+import React8, { createContext, useContext, useMemo, useCallback, useState, useEffect, useRef } from 'react';
+import { useLocale } from 'next-intl';
 import { Card, CardContent, Badge, Skeleton, ScrollArea, Button, Textarea, useToast as useToast$1, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Form, FormField, FormItem, FormLabel, FormControl, Input, FormMessage, Avatar, AvatarImage, AvatarFallback, ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@djangocfg/ui-core';
 import useSWR, { useSWRConfig } from 'swr';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -1615,6 +1616,233 @@ var API = class {
 };
 initializeExtensionAPI(configureAPI);
 var apiSupport = 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/useSupportT.ts
+var translations = { en, ru, ko };
+function getNestedValue(obj, path) {
+  const keys = path.split(".");
+  let result = obj;
+  for (const key of keys) {
+    if (result && typeof result === "object" && key in result) {
+      result = result[key];
+    } else {
+      return path;
+    }
+  }
+  return typeof result === "string" ? result : path;
+}
+function useSupportT() {
+  const locale = useLocale();
+  const t = useMemo(() => translations[locale] || translations.en, [locale]);
+  return useCallback(
+    (key) => getNestedValue(t, key),
+    [t]
+  );
+}
 function useSupportTicketsList(params, client) {
   return useSWR(
     params ? ["cfg-support-tickets", params] : "cfg-support-tickets",
@@ -1829,18 +2057,35 @@ var getStatusBadgeVariant = (status) => {
       return "default";
   }
 };
-var formatRelativeTime = (date) => {
-  if (!date) return "N/A";
-  const m = moment2.utc(date).local();
-  const now = moment2();
-  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 st = useSupportT();
+  const labels = 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 = useCallback((date) => {
+    if (!date) return "N/A";
+    const m = moment2.utc(date).local();
+    const now = moment2();
+    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__ */ jsx(
     Card,
     {
@@ -1864,7 +2109,7 @@ var TicketCard = ({ ticket, isSelected, onClick }) => {
           )
         ] }),
         /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx(Badge, { variant: getStatusBadgeVariant(ticket.status || "open"), className: "text-xs", children: ticket.status || "open" }),
+          /* @__PURE__ */ jsx(Badge, { variant: getStatusBadgeVariant(ticket.status || "open"), className: "text-xs", children: statusLabel }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
             /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsx("span", { children: formatRelativeTime(ticket.created_at) })
@@ -2139,6 +2384,7 @@ function useSupportLayoutContext() {
   return context;
 }
 var TicketList = () => {
+  const st = useSupportT();
   const { selectedTicket, selectTicket } = useSupportLayoutContext();
   const {
     tickets,
@@ -2149,6 +2395,13 @@ var TicketList = () => {
     totalCount,
     refresh
   } = useInfiniteTickets();
+  const labels = useMemo(() => ({
+    noTickets: st("ticketList.noTickets"),
+    noTicketsDescription: st("ticketList.noTicketsDescription"),
+    loadingMore: st("ticketList.loadingMore"),
+    loadMore: st("ticketList.loadMore"),
+    allLoaded: st("ticketList.allLoaded")
+  }), [st]);
   const scrollRef = useRef(null);
   const observerRef = useRef(null);
   const loadMoreRef = useRef(null);
@@ -2194,8 +2447,8 @@ var TicketList = () => {
   if (!tickets || tickets.length === 0) {
     return /* @__PURE__ */ 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__ */ jsx(MessageSquare, { className: "h-16 w-16 text-muted-foreground mb-4 animate-bounce" }),
-      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "No tickets yet" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground max-w-sm", children: "Create your first support ticket to get help from our team" })
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: labels.noTickets }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground max-w-sm", children: labels.noTicketsDescription })
     ] });
   }
   return /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", viewportRef: scrollRef, children: /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-2", children: [
@@ -2218,7 +2471,7 @@ var TicketList = () => {
     /* @__PURE__ */ jsx("div", { ref: loadMoreRef, className: "h-2" }),
     isLoadingMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
       /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
-      /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Loading more tickets..." })
+      /* @__PURE__ */ jsx("span", { className: "text-sm", children: labels.loadingMore })
     ] }) }),
     hasMore && !isLoadingMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-2 pb-4", children: /* @__PURE__ */ jsxs(
       Button,
@@ -2228,17 +2481,14 @@ var TicketList = () => {
         onClick: loadMore,
         className: "text-xs",
         children: [
-          "Load more (",
+          labels.loadMore,
+          " (",
           totalCount > 0 ? `${tickets.length}/${totalCount}` : "",
           ")"
         ]
       }
     ) }),
-    !hasMore && tickets.length > 0 && /* @__PURE__ */ jsxs("div", { className: "text-center py-4 text-sm text-muted-foreground", children: [
-      "All ",
-      totalCount,
-      " tickets loaded"
-    ] })
+    !hasMore && tickets.length > 0 && /* @__PURE__ */ jsx("div", { className: "text-center py-4 text-sm text-muted-foreground", children: labels.allLoaded.replace("{count}", String(totalCount)) })
   ] }) });
 };
 var formatTime = (date) => {
@@ -2249,7 +2499,7 @@ var formatDate = (date) => {
   if (!date) return "";
   return moment2.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;
@@ -2259,11 +2509,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__ */ jsx(Avatar, { className: "h-8 w-8 shrink-0", children: sender?.avatar ? /* @__PURE__ */ jsx(AvatarImage, { src: sender.avatar, alt: sender.display_username || "Support" }) : /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary text-primary-foreground", children: sender?.is_staff ? /* @__PURE__ */ jsx(Headphones, { className: "h-4 w-4" }) : senderInitial }) }),
+        !isFromUser && /* @__PURE__ */ jsx(Avatar, { className: "h-8 w-8 shrink-0", children: sender?.avatar ? /* @__PURE__ */ jsx(AvatarImage, { src: sender.avatar, alt: sender.display_username || labels.supportTeam }) : /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary text-primary-foreground", children: sender?.is_staff ? /* @__PURE__ */ jsx(Headphones, { className: "h-4 w-4" }) : senderInitial }) }),
         /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-1 flex-1 max-w-[80%] ${isFromUser ? "items-end" : "items-start"}`, children: [
           !isFromUser && sender && /* @__PURE__ */ 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__ */ jsx(
             Card,
@@ -2280,8 +2530,19 @@ var MessageBubble = ({ message, isFromUser, currentUser }) => {
   );
 };
 var MessageList = () => {
+  const st = useSupportT();
   const { selectedTicket } = useSupportLayoutContext();
   const { user } = useAuth();
+  const labels = 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,
@@ -2339,8 +2600,8 @@ var MessageList = () => {
   if (!selectedTicket) {
     return /* @__PURE__ */ 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__ */ jsx(MessageSquare, { className: "h-16 w-16 text-muted-foreground mb-4 animate-bounce" }),
-      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "No ticket selected" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground max-w-sm", children: "Select a ticket from the list to view the conversation" })
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: labels.noTicketSelected }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground max-w-sm", children: labels.noTicketSelectedDescription })
     ] });
   }
   if (isLoading) {
@@ -2360,15 +2621,15 @@ var MessageList = () => {
   if (!messages || messages.length === 0) {
     return /* @__PURE__ */ 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__ */ jsx(MessageSquare, { className: "h-16 w-16 text-muted-foreground mb-4 animate-bounce" }),
-      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "No messages yet" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground max-w-sm", children: "Start the conversation by sending a message below" })
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: labels.noMessages }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground max-w-sm", children: labels.noMessagesDescription })
     ] });
   }
   return /* @__PURE__ */ jsx(ScrollArea, { className: "h-full bg-muted/50", viewportRef: scrollAreaRef, children: /* @__PURE__ */ jsxs("div", { className: "p-6 space-y-4", ref: scrollRef, children: [
     /* @__PURE__ */ jsx("div", { ref: loadMoreRef, className: "h-2" }),
     isLoadingMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
       /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
-      /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Loading older messages..." })
+      /* @__PURE__ */ jsx("span", { className: "text-sm", children: labels.loadingOlder })
     ] }) }),
     hasMore && !isLoadingMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-2 pb-4", children: /* @__PURE__ */ jsxs(
       Button,
@@ -2378,7 +2639,8 @@ var MessageList = () => {
         onClick: handleLoadMore,
         className: "text-xs",
         children: [
-          "Load older messages (",
+          labels.loadOlder,
+          " (",
           totalCount > 0 ? `${messages.length}/${totalCount}` : "",
           ")"
         ]
@@ -2393,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.utc(previousMessage.created_at || "").format("YYYY-MM-DD") !== moment2.utc(message.created_at || "").format("YYYY-MM-DD");
-      return /* @__PURE__ */ jsxs(React7.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React8.Fragment, { children: [
         showDateSeparator && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 my-4", children: [
           /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-border" }),
           /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: formatDate(message.created_at) }),
@@ -2404,7 +2666,8 @@ var MessageList = () => {
           {
             message,
             isFromUser: !!isFromUser,
-            currentUser: user
+            currentUser: user,
+            labels: { supportTeam: labels.supportTeam, staff: labels.staff }
           }
         ) })
       ] }, message.uuid);
@@ -2418,10 +2681,18 @@ var logger = createConsola({
 }).withTag("ext-support");
 var supportLogger = logger;
 var MessageInput = () => {
+  const st = useSupportT();
   const { selectedTicket, sendMessage } = useSupportLayoutContext();
   const { toast } = useToast();
   const [message, setMessage] = useState("");
   const [isSending, setIsSending] = useState(false);
+  const labels = 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;
@@ -2429,10 +2700,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);
     }
@@ -2455,8 +2726,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
         }
       ),
@@ -2471,17 +2742,37 @@ var MessageInput = () => {
         }
       )
     ] }),
-    !canSendMessage && /* @__PURE__ */ 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__ */ 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 = z.object({
-  subject: z.string().min(1, "Subject is required").max(200, "Subject too long"),
-  message: z.string().min(1, "Message is required").max(5e3, "Message too long")
-});
 var CreateTicketDialog = () => {
+  const st = useSupportT();
   const { uiState, createTicket, closeCreateDialog } = useSupportLayoutContext();
   const { toast } = useToast$1();
-  const [isSubmitting, setIsSubmitting] = React7.useState(false);
+  const [isSubmitting, setIsSubmitting] = React8.useState(false);
+  const labels = 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 = useMemo(() => z.object({
+    subject: z.string().min(1, labels.validation.subjectRequired).max(200, labels.validation.subjectTooLong),
+    message: z.string().min(1, labels.validation.messageRequired).max(5e3, labels.validation.messageTooLong)
+  }), [labels.validation]);
   const form = useForm({
     resolver: zodResolver(createTicketSchema),
     defaultValues: {
@@ -2494,10 +2785,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);
     }
@@ -2510,9 +2801,9 @@ var CreateTicketDialog = () => {
     /* @__PURE__ */ jsxs(DialogHeader, { children: [
       /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(Plus, { className: "h-5 w-5" }),
-        "Create Support Ticket"
+        labels.title
       ] }),
-      /* @__PURE__ */ jsx(DialogDescription, { children: "Describe your issue and we'll help you resolve it as quickly as possible." })
+      /* @__PURE__ */ jsx(DialogDescription, { children: labels.description })
     ] }),
     /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-6", children: [
       /* @__PURE__ */ jsx(
@@ -2521,8 +2812,8 @@ var CreateTicketDialog = () => {
           control: form.control,
           name: "subject",
           render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
-            /* @__PURE__ */ jsx(FormLabel, { children: "Subject" }),
-            /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, { placeholder: "Brief description of your issue...", ...field }) }),
+            /* @__PURE__ */ jsx(FormLabel, { children: labels.subjectLabel }),
+            /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, { placeholder: labels.subjectPlaceholder, ...field }) }),
             /* @__PURE__ */ jsx(FormMessage, {})
           ] })
         }
@@ -2533,11 +2824,11 @@ var CreateTicketDialog = () => {
           control: form.control,
           name: "message",
           render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
-            /* @__PURE__ */ jsx(FormLabel, { children: "Message" }),
+            /* @__PURE__ */ jsx(FormLabel, { children: labels.messageLabel }),
             /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
               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
               }
@@ -2554,24 +2845,31 @@ var CreateTicketDialog = () => {
             variant: "outline",
             onClick: handleClose,
             disabled: isSubmitting,
-            children: "Cancel"
+            children: labels.cancel
           }
         ),
         /* @__PURE__ */ jsx(Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
-          "Creating..."
+          labels.creating
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
-          "Create Ticket"
+          labels.create
         ] }) })
       ] })
     ] }) })
   ] }) });
 };
 var SupportLayoutContent = () => {
+  const st = useSupportT();
   const { selectedTicket, selectTicket, openCreateDialog, getUnreadCount } = useSupportLayoutContext();
-  const [isMobile, setIsMobile] = React7.useState(false);
-  React7.useEffect(() => {
+  const [isMobile, setIsMobile] = React8.useState(false);
+  const labels = useMemo(() => ({
+    title: st("layout.title"),
+    titleShort: st("layout.titleShort"),
+    subtitle: st("layout.subtitle"),
+    newTicket: st("layout.newTicket")
+  }), [st]);
+  React8.useEffect(() => {
     const checkMobile = () => setIsMobile(window.innerWidth <= 768);
     checkMobile();
     window.addEventListener("resize", checkMobile);
@@ -2592,12 +2890,12 @@ var SupportLayoutContent = () => {
               children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-5 w-5" })
             }
           ) : /* @__PURE__ */ jsx(LifeBuoy, { className: "h-6 w-6 text-primary" }),
-          /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold", children: selectedTicket ? selectedTicket.subject : "Support" }),
+          /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold", children: selectedTicket ? selectedTicket.subject : labels.titleShort }),
           unreadCount > 0 && !selectedTicket && /* @__PURE__ */ 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__ */ jsxs(Button, { onClick: openCreateDialog, size: "sm", children: [
           /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
-          "New Ticket"
+          labels.newTicket
         ] })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: selectedTicket ? (
@@ -2618,14 +2916,14 @@ var SupportLayoutContent = () => {
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx(LifeBuoy, { className: "h-7 w-7 text-primary" }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold", children: "Support Center" }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Get help from our support team" })
+          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold", children: labels.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: labels.subtitle })
         ] }),
         unreadCount > 0 && /* @__PURE__ */ jsx("div", { className: "h-6 w-6 bg-red-500 text-white text-sm rounded-full flex items-center justify-center", children: unreadCount })
       ] }),
       /* @__PURE__ */ jsxs(Button, { onClick: openCreateDialog, children: [
         /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
-        "New Ticket"
+        labels.newTicket
       ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxs(ResizablePanelGroup, { direction: "horizontal", className: "h-full", children: [
@@ -2646,7 +2944,7 @@ var SupportLayout = () => {
 // package.json
 var package_default = {
   name: "@djangocfg/ext-support",
-  version: "1.0.21",
+  version: "1.0.23",
   description: "Support ticket system extension for DjangoCFG",
   keywords: [
     "django",
@@ -2692,6 +2990,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: [
@@ -2707,27 +3010,31 @@ var package_default = {
   peerDependencies: {
     "@djangocfg/api": "workspace:*",
     "@djangocfg/ext-base": "workspace:*",
+    "@djangocfg/i18n": "workspace:*",
     "@djangocfg/ui-core": "workspace:*",
+    "@hookform/resolvers": "^5.2.2",
     consola: "^3.4.2",
     "lucide-react": "^0.545.0",
     moment: "^2.30.1",
     next: "^16",
+    "next-intl": "^4",
     "p-retry": "^7.0.0",
     react: "^19",
     "react-hook-form": "^7.69.0",
-    "@hookform/resolvers": "^5.2.2",
     swr: "^2.3.7",
     zod: "^4.3.4"
   },
   devDependencies: {
     "@djangocfg/api": "workspace:*",
     "@djangocfg/ext-base": "workspace:*",
+    "@djangocfg/i18n": "workspace:*",
     "@djangocfg/ui-core": "workspace:*",
     "@djangocfg/typescript-config": "workspace:*",
     "@types/node": "^24.7.2",
     "@types/react": "^19.0.0",
     consola: "^3.4.2",
     moment: "^2.30.1",
+    "next-intl": "^4.1.0",
     "p-retry": "^7.0.0",
     swr: "^2.3.7",
     tsup: "^8.5.0",