@djangocfg/ext-support 1.0.6 → 1.0.8

package/dist/config.cjs

@@ -27,7 +27,7 @@ var import_ext_base = require("@djangocfg/ext-base");
 // package.json
 var package_default = {
   name: "@djangocfg/ext-support",
-  version: "1.0.6",
+  version: "1.0.8",
   description: "Support ticket system extension for DjangoCFG",
   keywords: [
     "django",
@@ -88,9 +88,11 @@ var package_default = {
   peerDependencies: {
     "@djangocfg/api": "workspace:*",
     "@djangocfg/ext-base": "workspace:*",
+    "@djangocfg/ui-core": "workspace:*",
     "@djangocfg/ui-nextjs": "workspace:*",
     consola: "^3.4.2",
     "lucide-react": "^0.545.0",
+    moment: "^2.30.1",
     next: "^15.5.7",
     "p-retry": "^7.0.0",
     react: "^18 || ^19",
@@ -105,6 +107,7 @@ var package_default = {
     "@types/node": "^24.7.2",
     "@types/react": "^19.0.0",
     consola: "^3.4.2",
+    moment: "^2.30.1",
     "p-retry": "^7.0.0",
     swr: "^2.3.7",
     tsup: "^8.5.0",

package/dist/config.js

@@ -4,7 +4,7 @@ import { createExtensionConfig } from "@djangocfg/ext-base";
 // package.json
 var package_default = {
   name: "@djangocfg/ext-support",
-  version: "1.0.6",
+  version: "1.0.8",
   description: "Support ticket system extension for DjangoCFG",
   keywords: [
     "django",
@@ -65,9 +65,11 @@ var package_default = {
   peerDependencies: {
     "@djangocfg/api": "workspace:*",
     "@djangocfg/ext-base": "workspace:*",
+    "@djangocfg/ui-core": "workspace:*",
     "@djangocfg/ui-nextjs": "workspace:*",
     consola: "^3.4.2",
     "lucide-react": "^0.545.0",
+    moment: "^2.30.1",
     next: "^15.5.7",
     "p-retry": "^7.0.0",
     react: "^18 || ^19",
@@ -82,6 +84,7 @@ var package_default = {
     "@types/node": "^24.7.2",
     "@types/react": "^19.0.0",
     consola: "^3.4.2",
+    moment: "^2.30.1",
     "p-retry": "^7.0.0",
     swr: "^2.3.7",
     tsup: "^8.5.0",

package/dist/hooks.cjs

@@ -4,13 +4,15 @@ var consola = require('consola');
 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 uiNextjs = require('@djangocfg/ui-nextjs');
 var useSWR = require('swr');
 var jsxRuntime = require('react/jsx-runtime');
+var moment2 = require('moment');
+var lib = require('@djangocfg/ui-core/lib');
 var auth = require('@djangocfg/api/auth');
 var useSWRInfinite = require('swr/infinite');
-var uiNextjs = require('@djangocfg/ui-nextjs');
-var lucideReact = require('lucide-react');
 var reactHookForm = require('react-hook-form');
 var zod$1 = require('@hookform/resolvers/zod');
 var extBase = require('@djangocfg/ext-base');
@@ -20,6 +22,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var pRetry__default = /*#__PURE__*/_interopDefault(pRetry);
 var React7__default = /*#__PURE__*/_interopDefault(React7);
 var useSWR__default = /*#__PURE__*/_interopDefault(useSWR);
+var moment2__default = /*#__PURE__*/_interopDefault(moment2);
 var useSWRInfinite__default = /*#__PURE__*/_interopDefault(useSWRInfinite);
 
 var __defProp = Object.defineProperty;
@@ -1784,6 +1787,67 @@ function useSupportContext() {
   }
   return context;
 }
+var getStatusBadgeVariant = (status) => {
+  switch (status) {
+    case "open":
+      return "default";
+    case "waiting_for_user":
+      return "secondary";
+    case "waiting_for_admin":
+      return "outline";
+    case "resolved":
+      return "outline";
+    case "closed":
+      return "secondary";
+    default:
+      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 }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    uiNextjs.Card,
+    {
+      className: lib.cn(
+        "cursor-pointer transition-all duration-200 ease-out",
+        "hover:bg-accent/50 hover:shadow-md hover:scale-[1.02]",
+        "active:scale-[0.98]",
+        isSelected && "bg-accent border-primary shadow-sm"
+      ),
+      onClick,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.CardContent, { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-sm line-clamp-2 flex-1", children: ticket.subject }),
+          (ticket.unanswered_messages_count || 0) > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            uiNextjs.Badge,
+            {
+              variant: "destructive",
+              className: "ml-2 shrink-0 animate-pulse",
+              children: ticket.unanswered_messages_count
+            }
+          )
+        ] }),
+        /* @__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(uiNextjs.Badge, { variant: getStatusBadgeVariant(ticket.status || "open"), className: "text-xs", children: ticket.status || "open" }),
+          /* @__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) })
+          ] })
+        ] }) })
+      ] })
+    }
+  );
+};
 
 // src/layouts/SupportLayout/events.ts
 var SUPPORT_LAYOUT_EVENTS = {
@@ -2048,71 +2112,6 @@ function useSupportLayoutContext() {
   }
   return context;
 }
-var getStatusBadgeVariant = (status) => {
-  switch (status) {
-    case "open":
-      return "default";
-    case "waiting_for_user":
-      return "secondary";
-    case "waiting_for_admin":
-      return "outline";
-    case "resolved":
-      return "outline";
-    case "closed":
-      return "secondary";
-    default:
-      return "default";
-  }
-};
-var formatRelativeTime = (date) => {
-  if (!date) return "N/A";
-  const now = /* @__PURE__ */ new Date();
-  const messageDate = new Date(date);
-  const diffInSeconds = Math.floor((now.getTime() - messageDate.getTime()) / 1e3);
-  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 new Date(date).toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "short",
-    day: "numeric"
-  });
-};
-var TicketCard = ({ ticket, isSelected, onClick }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    uiNextjs.Card,
-    {
-      className: uiNextjs.cn(
-        "cursor-pointer transition-all duration-200 ease-out",
-        "hover:bg-accent/50 hover:shadow-md hover:scale-[1.02]",
-        "active:scale-[0.98]",
-        isSelected && "bg-accent border-primary shadow-sm"
-      ),
-      onClick,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.CardContent, { className: "p-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-sm line-clamp-2 flex-1", children: ticket.subject }),
-          (ticket.unanswered_messages_count || 0) > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            uiNextjs.Badge,
-            {
-              variant: "destructive",
-              className: "ml-2 shrink-0 animate-pulse",
-              children: ticket.unanswered_messages_count
-            }
-          )
-        ] }),
-        /* @__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(uiNextjs.Badge, { variant: getStatusBadgeVariant(ticket.status || "open"), className: "text-xs", children: ticket.status || "open" }),
-          /* @__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) })
-          ] })
-        ] }) })
-      ] })
-    }
-  );
-};
 var TicketList = () => {
   const { selectedTicket, selectTicket } = useSupportLayoutContext();
   const {
@@ -2218,28 +2217,23 @@ var TicketList = () => {
 };
 var formatTime = (date) => {
   if (!date) return "";
-  return new Date(date).toLocaleTimeString("en-US", {
-    hour: "2-digit",
-    minute: "2-digit"
-  });
+  return moment2__default.default.utc(date).local().format("hh:mm A");
 };
 var formatDate = (date) => {
   if (!date) return "";
-  return new Date(date).toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "short",
-    day: "numeric"
-  });
+  return moment2__default.default.utc(date).local().format("MMM D, YYYY");
 };
 var MessageBubble = ({ message, isFromUser, currentUser }) => {
   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;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       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(uiNextjs.Avatar, { className: "h-8 w-8 shrink-0", children: sender?.avatar ? /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.AvatarImage, { src: sender.avatar, alt: sender.display_username || "Support" }) : /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.AvatarFallback, { className: "bg-primary text-primary-foreground", children: sender?.is_staff ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Headphones, { className: "h-4 w-4" }) : sender?.display_username?.charAt(0)?.toUpperCase() || sender?.initials || "S" }) }),
+        !isFromUser && /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Avatar, { className: "h-8 w-8 shrink-0", children: sender?.avatar ? /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.AvatarImage, { src: sender.avatar, alt: sender.display_username || "Support" }) : /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.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",
@@ -2254,7 +2248,7 @@ var MessageBubble = ({ message, isFromUser, currentUser }) => {
           ),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground px-1", children: formatTime(message.created_at) })
         ] }),
-        isFromUser && /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Avatar, { className: "h-8 w-8 shrink-0", children: currentUser?.avatar ? /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.AvatarImage, { src: currentUser.avatar, alt: currentUser.display_username || currentUser.email || "You" }) : /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.AvatarFallback, { className: "bg-primary/10 text-primary font-semibold", children: currentUser?.display_username?.charAt(0)?.toUpperCase() || currentUser?.email?.charAt(0)?.toUpperCase() || currentUser?.initials || /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "h-4 w-4" }) }) })
+        isFromUser && /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Avatar, { className: "h-8 w-8 shrink-0", children: currentUser?.avatar ? /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.AvatarImage, { src: currentUser.avatar, alt: currentUser.display_username || currentUser.email || "You" }) : /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.AvatarFallback, { className: "bg-primary/10 text-primary font-semibold", children: userInitial || /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "h-4 w-4" }) }) })
       ]
     }
   );
@@ -2372,7 +2366,7 @@ var MessageList = () => {
     messages.map((message, index) => {
       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 && new Date(previousMessage.created_at || "").toDateString() !== new Date(message.created_at || "").toDateString();
+      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: [
         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" }),
@@ -2409,17 +2403,10 @@ var MessageInput = () => {
     try {
       await sendMessage(message.trim());
       setMessage("");
-      toast({
-        title: "Success",
-        description: "Message sent successfully"
-      });
+      toast.success("Message sent successfully");
     } catch (error) {
       supportLogger.error("Failed to send message:", error);
-      toast({
-        title: "Error",
-        description: "Failed to send message",
-        variant: "destructive"
-      });
+      toast.error("Failed to send message");
     } finally {
       setIsSending(false);
     }
@@ -2640,7 +2627,7 @@ var SupportLayout = () => {
 // package.json
 var package_default = {
   name: "@djangocfg/ext-support",
-  version: "1.0.6",
+  version: "1.0.8",
   description: "Support ticket system extension for DjangoCFG",
   keywords: [
     "django",
@@ -2701,9 +2688,11 @@ var package_default = {
   peerDependencies: {
     "@djangocfg/api": "workspace:*",
     "@djangocfg/ext-base": "workspace:*",
+    "@djangocfg/ui-core": "workspace:*",
     "@djangocfg/ui-nextjs": "workspace:*",
     consola: "^3.4.2",
     "lucide-react": "^0.545.0",
+    moment: "^2.30.1",
     next: "^15.5.7",
     "p-retry": "^7.0.0",
     react: "^18 || ^19",
@@ -2718,6 +2707,7 @@ var package_default = {
     "@types/node": "^24.7.2",
     "@types/react": "^19.0.0",
     consola: "^3.4.2",
+    moment: "^2.30.1",
     "p-retry": "^7.0.0",
     swr: "^2.3.7",
     tsup: "^8.5.0",

package/dist/hooks.js

@@ -2,13 +2,15 @@ import { createConsola, consola } from 'consola';
 import pRetry, { AbortError } from 'p-retry';
 import { z } from 'zod';
 import { 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 { Card, CardContent, Badge, Skeleton, ScrollArea, Button, useToast, Textarea, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Form, FormField, FormItem, FormLabel, FormControl, Input, FormMessage, Avatar, AvatarImage, AvatarFallback, ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@djangocfg/ui-nextjs';
 import useSWR, { useSWRConfig } from 'swr';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import moment2 from 'moment';
+import { cn } from '@djangocfg/ui-core/lib';
 import { useAuth } from '@djangocfg/api/auth';
 import useSWRInfinite from 'swr/infinite';
-import { Card, cn, CardContent, Badge, Skeleton, ScrollArea, Button, useToast, Textarea, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Form, FormField, FormItem, FormLabel, FormControl, Input, FormMessage, Avatar, AvatarImage, AvatarFallback, ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@djangocfg/ui-nextjs';
-import { Clock, MessageSquare, Loader2, Send, Plus, Headphones, User, ArrowLeft, LifeBuoy } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { createExtensionConfig } from '@djangocfg/ext-base';
@@ -1775,6 +1777,67 @@ function useSupportContext() {
   }
   return context;
 }
+var getStatusBadgeVariant = (status) => {
+  switch (status) {
+    case "open":
+      return "default";
+    case "waiting_for_user":
+      return "secondary";
+    case "waiting_for_admin":
+      return "outline";
+    case "resolved":
+      return "outline";
+    case "closed":
+      return "secondary";
+    default:
+      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 }) => {
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      className: cn(
+        "cursor-pointer transition-all duration-200 ease-out",
+        "hover:bg-accent/50 hover:shadow-md hover:scale-[1.02]",
+        "active:scale-[0.98]",
+        isSelected && "bg-accent border-primary shadow-sm"
+      ),
+      onClick,
+      children: /* @__PURE__ */ jsxs(CardContent, { className: "p-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-2", children: [
+          /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm line-clamp-2 flex-1", children: ticket.subject }),
+          (ticket.unanswered_messages_count || 0) > 0 && /* @__PURE__ */ jsx(
+            Badge,
+            {
+              variant: "destructive",
+              className: "ml-2 shrink-0 animate-pulse",
+              children: ticket.unanswered_messages_count
+            }
+          )
+        ] }),
+        /* @__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__ */ 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) })
+          ] })
+        ] }) })
+      ] })
+    }
+  );
+};
 
 // src/layouts/SupportLayout/events.ts
 var SUPPORT_LAYOUT_EVENTS = {
@@ -2039,71 +2102,6 @@ function useSupportLayoutContext() {
   }
   return context;
 }
-var getStatusBadgeVariant = (status) => {
-  switch (status) {
-    case "open":
-      return "default";
-    case "waiting_for_user":
-      return "secondary";
-    case "waiting_for_admin":
-      return "outline";
-    case "resolved":
-      return "outline";
-    case "closed":
-      return "secondary";
-    default:
-      return "default";
-  }
-};
-var formatRelativeTime = (date) => {
-  if (!date) return "N/A";
-  const now = /* @__PURE__ */ new Date();
-  const messageDate = new Date(date);
-  const diffInSeconds = Math.floor((now.getTime() - messageDate.getTime()) / 1e3);
-  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 new Date(date).toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "short",
-    day: "numeric"
-  });
-};
-var TicketCard = ({ ticket, isSelected, onClick }) => {
-  return /* @__PURE__ */ jsx(
-    Card,
-    {
-      className: cn(
-        "cursor-pointer transition-all duration-200 ease-out",
-        "hover:bg-accent/50 hover:shadow-md hover:scale-[1.02]",
-        "active:scale-[0.98]",
-        isSelected && "bg-accent border-primary shadow-sm"
-      ),
-      onClick,
-      children: /* @__PURE__ */ jsxs(CardContent, { className: "p-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-2", children: [
-          /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm line-clamp-2 flex-1", children: ticket.subject }),
-          (ticket.unanswered_messages_count || 0) > 0 && /* @__PURE__ */ jsx(
-            Badge,
-            {
-              variant: "destructive",
-              className: "ml-2 shrink-0 animate-pulse",
-              children: ticket.unanswered_messages_count
-            }
-          )
-        ] }),
-        /* @__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__ */ 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) })
-          ] })
-        ] }) })
-      ] })
-    }
-  );
-};
 var TicketList = () => {
   const { selectedTicket, selectTicket } = useSupportLayoutContext();
   const {
@@ -2209,28 +2207,23 @@ var TicketList = () => {
 };
 var formatTime = (date) => {
   if (!date) return "";
-  return new Date(date).toLocaleTimeString("en-US", {
-    hour: "2-digit",
-    minute: "2-digit"
-  });
+  return moment2.utc(date).local().format("hh:mm A");
 };
 var formatDate = (date) => {
   if (!date) return "";
-  return new Date(date).toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "short",
-    day: "numeric"
-  });
+  return moment2.utc(date).local().format("MMM D, YYYY");
 };
 var MessageBubble = ({ message, isFromUser, currentUser }) => {
   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;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       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" }) : sender?.display_username?.charAt(0)?.toUpperCase() || sender?.initials || "S" }) }),
+        !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 }) }),
         /* @__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",
@@ -2245,7 +2238,7 @@ var MessageBubble = ({ message, isFromUser, currentUser }) => {
           ),
           /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground px-1", children: formatTime(message.created_at) })
         ] }),
-        isFromUser && /* @__PURE__ */ jsx(Avatar, { className: "h-8 w-8 shrink-0", children: currentUser?.avatar ? /* @__PURE__ */ jsx(AvatarImage, { src: currentUser.avatar, alt: currentUser.display_username || currentUser.email || "You" }) : /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary/10 text-primary font-semibold", children: currentUser?.display_username?.charAt(0)?.toUpperCase() || currentUser?.email?.charAt(0)?.toUpperCase() || currentUser?.initials || /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }) }) })
+        isFromUser && /* @__PURE__ */ jsx(Avatar, { className: "h-8 w-8 shrink-0", children: currentUser?.avatar ? /* @__PURE__ */ jsx(AvatarImage, { src: currentUser.avatar, alt: currentUser.display_username || currentUser.email || "You" }) : /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary/10 text-primary font-semibold", children: userInitial || /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }) }) })
       ]
     }
   );
@@ -2363,7 +2356,7 @@ var MessageList = () => {
     messages.map((message, index) => {
       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 && new Date(previousMessage.created_at || "").toDateString() !== new Date(message.created_at || "").toDateString();
+      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: [
         showDateSeparator && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 my-4", children: [
           /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-border" }),
@@ -2400,17 +2393,10 @@ var MessageInput = () => {
     try {
       await sendMessage(message.trim());
       setMessage("");
-      toast({
-        title: "Success",
-        description: "Message sent successfully"
-      });
+      toast.success("Message sent successfully");
     } catch (error) {
       supportLogger.error("Failed to send message:", error);
-      toast({
-        title: "Error",
-        description: "Failed to send message",
-        variant: "destructive"
-      });
+      toast.error("Failed to send message");
     } finally {
       setIsSending(false);
     }
@@ -2631,7 +2617,7 @@ var SupportLayout = () => {
 // package.json
 var package_default = {
   name: "@djangocfg/ext-support",
-  version: "1.0.6",
+  version: "1.0.8",
   description: "Support ticket system extension for DjangoCFG",
   keywords: [
     "django",
@@ -2692,9 +2678,11 @@ var package_default = {
   peerDependencies: {
     "@djangocfg/api": "workspace:*",
     "@djangocfg/ext-base": "workspace:*",
+    "@djangocfg/ui-core": "workspace:*",
     "@djangocfg/ui-nextjs": "workspace:*",
     consola: "^3.4.2",
     "lucide-react": "^0.545.0",
+    moment: "^2.30.1",
     next: "^15.5.7",
     "p-retry": "^7.0.0",
     react: "^18 || ^19",
@@ -2709,6 +2697,7 @@ var package_default = {
     "@types/node": "^24.7.2",
     "@types/react": "^19.0.0",
     consola: "^3.4.2",
+    moment: "^2.30.1",
     "p-retry": "^7.0.0",
     swr: "^2.3.7",
     tsup: "^8.5.0",