@djangocfg/ext-support 1.0.4 → 1.0.7

package/src/api/generated/ext_support/http.ts

@@ -1,3 +1,4 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 /**
  * HTTP Client Adapter Pattern
  *

package/src/api/generated/ext_support/index.ts

@@ -1,3 +1,4 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 /**
  * Django CFG API - API Client with JWT Management
  *

package/src/api/generated/ext_support/logger.ts

@@ -1,3 +1,4 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 /**
  * API Logger with Consola
  * Beautiful console logging for API requests and responses

package/src/api/generated/ext_support/retry.ts

@@ -1,3 +1,4 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 /**
  * Retry Configuration and Utilities
  *

package/src/api/generated/ext_support/storage.ts

@@ -1,3 +1,4 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 /**
  * Storage adapters for cross-platform token storage.
  *

package/src/api/generated/ext_support/validation-events.ts

@@ -1,3 +1,4 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 /**
  * Zod Validation Events - Browser CustomEvent integration
  *

package/src/api/index.ts

@@ -1,9 +1,10 @@
+import { createExtensionAPI } from '@djangocfg/ext-base/api';
+
 /**
  * Support Extension API
  *
  * Pre-configured API instance with shared authentication
  */
 import { API } from './generated/ext_support';
-import { createExtensionAPI } from '@djangocfg/ext-base/api';
 
 export const apiSupport = createExtensionAPI(API);

package/src/config.ts

@@ -3,6 +3,7 @@
  */
 
 import { createExtensionConfig } from '@djangocfg/ext-base';
+
 import packageJson from '../package.json';
 
 export const extensionConfig = createExtensionConfig(packageJson, {

package/src/contexts/SupportContext.tsx

@@ -1,20 +1,16 @@
 'use client';
 
-import React, { createContext, useContext, type ReactNode } from 'react';
+import React, { createContext, ReactNode, useContext } from 'react';
+
 import {
-  useSupportTicketsList,
-  useSupportTicketsRetrieve,
-  useCreateSupportTicketsCreate,
-  useUpdateSupportTicketsUpdate,
-  usePartialUpdateSupportTicketsPartialUpdate,
-  useDeleteSupportTicketsDestroy,
-  useSupportTicketsMessagesList,
-  useSupportTicketsMessagesRetrieve,
-  useCreateSupportTicketsMessagesCreate,
-  useUpdateSupportTicketsMessagesUpdate,
-  usePartialUpdateSupportTicketsMessagesPartialUpdate,
-  useDeleteSupportTicketsMessagesDestroy,
+    useCreateSupportTicketsCreate, useCreateSupportTicketsMessagesCreate,
+    useDeleteSupportTicketsDestroy, useDeleteSupportTicketsMessagesDestroy,
+    usePartialUpdateSupportTicketsMessagesPartialUpdate,
+    usePartialUpdateSupportTicketsPartialUpdate, useSupportTicketsList,
+    useSupportTicketsMessagesList, useSupportTicketsMessagesRetrieve, useSupportTicketsRetrieve,
+    useUpdateSupportTicketsMessagesUpdate, useUpdateSupportTicketsUpdate
 } from '../api/generated/ext_support/_utils/hooks';
+
 import type {
   Ticket,
   TicketRequest,

package/src/contexts/SupportExtensionProvider.tsx

@@ -8,6 +8,7 @@
 
 import type { ReactNode } from 'react';
 import { ExtensionProvider } from '@djangocfg/ext-base/hooks';
+
 import { extensionConfig } from '../config';
 import { SupportProvider } from './SupportContext';
 

package/src/layouts/SupportLayout/SupportLayout.tsx

@@ -6,22 +6,14 @@
 
 'use client';
 
+import { ArrowLeft, LifeBuoy, Plus } from 'lucide-react';
 import React from 'react';
+
+import { Button, ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@djangocfg/ui-nextjs';
+
 import { SupportProvider } from '../../contexts/SupportContext';
+import { CreateTicketDialog, MessageInput, MessageList, TicketList } from './components';
 import { SupportLayoutProvider, useSupportLayoutContext } from './context';
-import {
-  TicketList,
-  MessageList,
-  MessageInput,
-  CreateTicketDialog,
-} from './components';
-import {
-  Button,
-  ResizablePanelGroup,
-  ResizablePanel,
-  ResizableHandle,
-} from '@djangocfg/ui-nextjs';
-import { Plus, LifeBuoy, ArrowLeft } from 'lucide-react';
 
 // ─────────────────────────────────────────────────────────────────────────
 // Support Layout Content (with context)

package/src/layouts/SupportLayout/components/CreateTicketDialog.tsx

@@ -6,30 +6,20 @@
 
 'use client';
 
+import { Loader2, Plus } from 'lucide-react';
 import React from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
 import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  Button,
-  Form,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormMessage,
-  Input,
-  Textarea,
+    Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Form, FormControl,
+    FormField, FormItem, FormLabel, FormMessage, Input, Textarea, useToast
 } from '@djangocfg/ui-nextjs';
-import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
-import { Plus, Loader2 } from 'lucide-react';
+
 import { supportLogger } from '../../../utils/logger';
 import { useSupportLayoutContext } from '../context';
-import { useToast } from '@djangocfg/ui-nextjs';
+
 import type { TicketFormData } from '../types';
 
 const createTicketSchema = z.object({

package/src/layouts/SupportLayout/components/MessageInput.tsx

@@ -5,9 +5,11 @@
 
 'use client';
 
+import { Send } from 'lucide-react';
 import React, { useState } from 'react';
+
 import { Button, Textarea, useToast } from '@djangocfg/ui-nextjs';
-import { Send } from 'lucide-react';
+
 import { supportLogger } from '../../../utils/logger';
 import { useSupportLayoutContext } from '../context';
 

package/src/layouts/SupportLayout/components/MessageList.tsx

@@ -5,29 +5,28 @@
 
 'use client';
 
-import React, { useEffect, useRef, useCallback } from 'react';
-import { ScrollArea, Skeleton, Avatar, AvatarFallback, AvatarImage, Card, CardContent, Button } from '@djangocfg/ui-nextjs';
-import { MessageSquare, Loader2, User, Headphones } from 'lucide-react';
+import { Headphones, Loader2, MessageSquare, User } from 'lucide-react';
+import moment from 'moment';
+import React, { useCallback, useEffect, useRef } from 'react';
+
+import { useAuth } from '@djangocfg/api/auth';
+import {
+    Avatar, AvatarFallback, AvatarImage, Button, Card, CardContent, ScrollArea, Skeleton
+} from '@djangocfg/ui-nextjs';
+
 import { useSupportLayoutContext } from '../context';
 import { useInfiniteMessages } from '../hooks';
-import { useAuth } from '@djangocfg/api/auth';
+
 import type { Message } from '../../../api/generated/ext_support/_utils/schemas';
 
 const formatTime = (date: string | null | undefined): string => {
   if (!date) return '';
-  return new Date(date).toLocaleTimeString('en-US', {
-    hour: '2-digit',
-    minute: '2-digit',
-  });
+  return moment.utc(date).local().format('hh:mm A');
 };
 
 const formatDate = (date: string | null | undefined): string => {
   if (!date) return '';
-  return new Date(date).toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  });
+  return moment.utc(date).local().format('MMM D, YYYY');
 };
 
 interface MessageBubbleProps {
@@ -39,6 +38,15 @@ interface MessageBubbleProps {
 const MessageBubble: React.FC<MessageBubbleProps> = ({ message, isFromUser, currentUser }) => {
   const sender = message.sender;
 
+  // Pre-compute initials
+  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 (
     <div
       className={`flex gap-3 ${isFromUser ? 'justify-end' : 'justify-start'}
@@ -54,9 +62,7 @@ const MessageBubble: React.FC<MessageBubbleProps> = ({ message, isFromUser, curr
               {sender?.is_staff ? (
                 <Headphones className="h-4 w-4" />
               ) : (
-                sender?.display_username?.charAt(0)?.toUpperCase() ||
-                sender?.initials ||
-                'S'
+                senderInitial
               )}
             </AvatarFallback>
           )}
@@ -101,10 +107,7 @@ const MessageBubble: React.FC<MessageBubbleProps> = ({ message, isFromUser, curr
             <AvatarImage src={currentUser.avatar} alt={currentUser.display_username || currentUser.email || 'You'} />
           ) : (
             <AvatarFallback className="bg-primary/10 text-primary font-semibold">
-              {currentUser?.display_username?.charAt(0)?.toUpperCase() ||
-               currentUser?.email?.charAt(0)?.toUpperCase() ||
-               currentUser?.initials ||
-               <User className="h-4 w-4" />}
+              {userInitial || <User className="h-4 w-4" />}
             </AvatarFallback>
           )}
         </Avatar>
@@ -282,8 +285,8 @@ export const MessageList: React.FC = () => {
           // Show date separator if date changes
           const previousMessage = index > 0 ? messages[index - 1] : null;
           const showDateSeparator = previousMessage &&
-            new Date(previousMessage.created_at || '').toDateString() !==
-            new Date(message.created_at || '').toDateString();
+            moment.utc(previousMessage.created_at || '').format('YYYY-MM-DD') !==
+            moment.utc(message.created_at || '').format('YYYY-MM-DD');
 
           return (
             <React.Fragment key={message.uuid}>

package/src/layouts/SupportLayout/components/TicketCard.tsx

@@ -5,9 +5,12 @@
 
 'use client';
 
+import { Clock, MessageSquare } from 'lucide-react';
+import moment from 'moment';
 import React from 'react';
+
 import { Badge, Card, CardContent, cn } from '@djangocfg/ui-nextjs';
-import { Clock, MessageSquare } from 'lucide-react';
+
 import type { Ticket } from '../../../api/generated/ext_support/_utils/schemas';
 
 interface TicketCardProps {
@@ -38,20 +41,16 @@ const getStatusBadgeVariant = (
 const formatRelativeTime = (date: string | null | undefined): string => {
   if (!date) return 'N/A';
 
-  const now = new Date();
-  const messageDate = new Date(date);
-  const diffInSeconds = Math.floor((now.getTime() - messageDate.getTime()) / 1000);
+  const m = moment.utc(date).local();
+  const now = moment();
+  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 new Date(date).toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  });
+  return m.format('MMM D, YYYY');
 };
 
 export const TicketCard: React.FC<TicketCardProps> = ({ ticket, isSelected, onClick }) => {

package/src/layouts/SupportLayout/components/TicketList.tsx

@@ -5,13 +5,15 @@
 
 'use client';
 
+import { Loader2, MessageSquare } from 'lucide-react';
 import React, { useEffect, useRef } from 'react';
-import { ScrollArea, Skeleton, Button } from '@djangocfg/ui-nextjs';
-import { TicketCard } from './TicketCard';
+
+import { Button, ScrollArea, Skeleton } from '@djangocfg/ui-nextjs';
+
 import { useSupportLayoutContext } from '../context';
-import { MessageSquare, Loader2 } from 'lucide-react';
-import { useInfiniteTickets } from '../hooks';
 import { SUPPORT_LAYOUT_EVENTS } from '../events';
+import { useInfiniteTickets } from '../hooks';
+import { TicketCard } from './TicketCard';
 
 export const TicketList: React.FC = () => {
   const { selectedTicket, selectTicket } = useSupportLayoutContext();

package/src/layouts/SupportLayout/context/SupportLayoutContext.tsx

@@ -5,11 +5,18 @@
 
 'use client';
 
-import React, { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from 'react';
-import { useSupportContext, type Ticket, type Message, type MessageCreateRequest } from '../../../contexts/SupportContext';
+import React, {
+    createContext, ReactNode, useCallback, useContext, useEffect, useState
+} from 'react';
+
 import { useAuth } from '@djangocfg/api/auth';
+
+import {
+    Message, MessageCreateRequest, Ticket, useSupportContext
+} from '../../../contexts/SupportContext';
 import { SUPPORT_LAYOUT_EVENTS } from '../events';
 import { useInfiniteMessages } from '../hooks';
+
 import type { SupportUIState, TicketFormData } from '../types';
 
 // ─────────────────────────────────────────────────────────────────────────

package/src/layouts/SupportLayout/hooks/useInfiniteMessages.ts

@@ -4,7 +4,9 @@
  */
 
 import useSWRInfinite from 'swr/infinite';
+
 import * as Fetchers from '../../../api/generated/ext_support/_utils/fetchers';
+
 import type { PaginatedMessageList, Message } from '../../../api/generated/ext_support/_utils/schemas';
 
 const PAGE_SIZE = 20;

package/src/layouts/SupportLayout/hooks/useInfiniteTickets.ts

@@ -4,7 +4,9 @@
  */
 
 import useSWRInfinite from 'swr/infinite';
+
 import * as Fetchers from '../../../api/generated/ext_support/_utils/fetchers';
+
 import type { PaginatedTicketList, Ticket } from '../../../api/generated/ext_support/_utils/schemas';
 
 const PAGE_SIZE = 20;