@djangocfg/ext-support 1.0.24 → 1.0.26

package/dist/index.js

@@ -2,16 +2,16 @@ import { initializeExtensionAPI, createExtensionAPI } from '@djangocfg/ext-base/
 import { createConsola, consola } from 'consola';
 import pRetry, { AbortError } from 'p-retry';
 import { z } from 'zod';
-import React4, { createContext, useMemo, useCallback, useRef, useEffect, useState, useContext } from 'react';
+import { createContext, useMemo, useCallback, useRef, useEffect, useState, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import useSWRInfinite from 'swr/infinite';
 import { useAuth } from '@djangocfg/api/auth';
 import { useSWRConfig } from 'swr';
-import { LifeBuoy, Plus, RefreshCw, Clock, ChevronRight, MessageSquare, Loader2, Send, Headphones, User } from 'lucide-react';
+import { RefreshCw, MessageSquare, Loader2, ArrowUp, Headphones, User } from 'lucide-react';
 import { useLocale } from 'next-intl';
-import { Skeleton, Button, Badge, useToast, ResponsiveSheet, ResponsiveSheetContent, ResponsiveSheetHeader, ResponsiveSheetTitle, ScrollArea, Textarea, ResponsiveSheetDescription, Form, FormField, FormItem, FormLabel, FormControl, Input, FormMessage, Avatar, AvatarImage, AvatarFallback, Card, CardContent } from '@djangocfg/ui-core';
+import { Skeleton, Button, Empty, EmptyMedia, EmptyTitle, EmptyDescription, useToast, ResponsiveSheet, ResponsiveSheetContent, ResponsiveSheetHeader, ResponsiveSheetTitle, ScrollArea, ResponsiveSheetDescription, Form, FormField, FormItem, FormLabel, FormControl, Input, FormMessage, Textarea, Avatar, AvatarImage, AvatarFallback } from '@djangocfg/ui-core';
 import { cn } from '@djangocfg/ui-core/lib';
-import moment2 from 'moment';
+import moment from 'moment';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { createExtensionConfig } from '@djangocfg/ext-base';
@@ -33,7 +33,7 @@ var ExtSupportSupport = class {
     if (isParamsObject) {
       params = args[0];
     } else {
-      params = { page: args[0], page_size: args[1] };
+      params = { ordering: args[0], page: args[1], page_size: args[2], search: args[3] };
     }
     const response = await this.client.request("GET", "/cfg/support/tickets/", { params });
     return response;
@@ -58,7 +58,7 @@ var ExtSupportSupport = class {
     if (isParamsObject) {
       params = args[1];
     } else {
-      params = { page: args[1], page_size: args[2] };
+      params = { ordering: args[1], page: args[2], page_size: args[3], search: args[4] };
     }
     const response = await this.client.request("GET", `/cfg/support/tickets/${ticket_uuid}/messages/`, { params });
     return response;
@@ -749,22 +749,6 @@ var PatchedTicketRequestStatus = /* @__PURE__ */ ((PatchedTicketRequestStatus2)
   PatchedTicketRequestStatus2["CLOSED"] = "closed";
   return PatchedTicketRequestStatus2;
 })(PatchedTicketRequestStatus || {});
-var TicketStatus = /* @__PURE__ */ ((TicketStatus2) => {
-  TicketStatus2["OPEN"] = "open";
-  TicketStatus2["WAITING_FOR_USER"] = "waiting_for_user";
-  TicketStatus2["WAITING_FOR_ADMIN"] = "waiting_for_admin";
-  TicketStatus2["RESOLVED"] = "resolved";
-  TicketStatus2["CLOSED"] = "closed";
-  return TicketStatus2;
-})(TicketStatus || {});
-var TicketRequestStatus = /* @__PURE__ */ ((TicketRequestStatus2) => {
-  TicketRequestStatus2["OPEN"] = "open";
-  TicketRequestStatus2["WAITING_FOR_USER"] = "waiting_for_user";
-  TicketRequestStatus2["WAITING_FOR_ADMIN"] = "waiting_for_admin";
-  TicketRequestStatus2["RESOLVED"] = "resolved";
-  TicketRequestStatus2["CLOSED"] = "closed";
-  return TicketRequestStatus2;
-})(TicketRequestStatus || {});
 var SenderSchema = z.object({
   id: z.int(),
   display_username: z.string(),
@@ -808,7 +792,7 @@ var TicketSchema = z.object({
   uuid: z.string().regex(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i),
   user: z.int(),
   subject: z.string().max(255),
-  status: z.nativeEnum(TicketStatus).optional(),
+  status: z.nativeEnum(PatchedTicketRequestStatus).optional(),
   created_at: z.string().datetime({ offset: true }),
   unanswered_messages_count: z.int()
 });
@@ -836,7 +820,7 @@ z.object({
 z.object({
   user: z.int(),
   subject: z.string().min(1).max(255),
-  status: z.nativeEnum(TicketRequestStatus).optional()
+  status: z.nativeEnum(PatchedTicketRequestStatus).optional()
 });
 
 // src/api/generated/ext_support/api-instance.ts
@@ -872,7 +856,7 @@ function configureAPI(config) {
 // src/api/generated/ext_support/_utils/fetchers/ext_support__support.ts
 async function getSupportTicketsList(params, client) {
   const api = getAPIInstance();
-  const response = await api.ext_support_support.ticketsList(params?.page, params?.page_size);
+  const response = await api.ext_support_support.ticketsList(params?.ordering, params?.page, params?.page_size, params?.search);
   try {
     return PaginatedTicketListSchema.parse(response);
   } catch (error) {
@@ -956,7 +940,7 @@ Method: POST`);
 }
 async function getSupportTicketsMessagesList(ticket_uuid, params, client) {
   const api = getAPIInstance();
-  const response = await api.ext_support_support.ticketsMessagesList(ticket_uuid, params?.page, params?.page_size);
+  const response = await api.ext_support_support.ticketsMessagesList(ticket_uuid, params?.ordering, params?.page, params?.page_size, params?.search);
   try {
     return PaginatedMessageListSchema.parse(response);
   } catch (error) {
@@ -1711,78 +1695,6 @@ var en = {
   }
 };
 
-// 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"
-  },
-  hero: {
-    openTickets: "\u041E\u0442\u043A\u0440\u044B\u0442\u044B\u0445 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0439",
-    unreadMessages: "\u041D\u0435\u043F\u0440\u043E\u0447\u0438\u0442\u0430\u043D\u043D\u044B\u0445"
-  },
-  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: {
@@ -1855,6 +1767,78 @@ var ko = {
   }
 };
 
+// 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"
+  },
+  hero: {
+    openTickets: "\u041E\u0442\u043A\u0440\u044B\u0442\u044B\u0445 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0439",
+    unreadMessages: "\u041D\u0435\u043F\u0440\u043E\u0447\u0438\u0442\u0430\u043D\u043D\u044B\u0445"
+  },
+  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/useSupportT.ts
 var translations = { en, ru, ko };
 function getNestedValue(obj, path) {
@@ -1888,27 +1872,22 @@ function SupportHero({ onCreateTicket, className }) {
     unreadMessages: st("hero.unreadMessages")
   }), [st]);
   const openTicketsCount = tickets.filter((t) => t.status !== "closed" && t.status !== "resolved").length;
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center py-16 px-4", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "text-center mb-6", children: isLoadingTickets ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-12 mx-auto mb-4 rounded-full" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-32 mx-auto mb-2" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48 mx-auto" })
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "h-16 w-16 mx-auto mb-4 bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx(LifeBuoy, { className: "h-8 w-8 text-primary" }) }),
-      /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold tracking-tight", children: labels.title }),
-      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1", children: labels.subtitle })
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center py-12 px-4", className), children: [
+    isLoadingTickets ? /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-48 mx-auto mb-2" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-64 mx-auto" })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold tracking-tight", children: labels.title }),
+      /* @__PURE__ */ jsx("p", { className: "text-lg text-muted-foreground mt-2", children: labels.subtitle })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mt-6", children: [
+      /* @__PURE__ */ jsx(
         Button,
         {
           size: "lg",
           onClick: onCreateTicket,
-          className: "rounded-full px-6",
-          children: [
-            /* @__PURE__ */ jsx(Plus, { className: "h-5 w-5 mr-2" }),
-            labels.newTicket
-          ]
+          className: "rounded-full px-8 h-12 text-base",
+          children: labels.newTicket
         }
       ),
       /* @__PURE__ */ jsx(
@@ -1917,43 +1896,100 @@ function SupportHero({ onCreateTicket, className }) {
           size: "icon",
           variant: "ghost",
           onClick: () => refreshTickets(),
-          className: "rounded-full",
+          className: "rounded-full h-10 w-10",
           children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" })
         }
       )
     ] }),
-    !isLoadingTickets && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6 mt-6 text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx("span", { className: "block font-medium text-foreground text-xl tabular-nums", children: openTicketsCount }),
-        /* @__PURE__ */ jsx("span", { children: labels.openTickets })
+    !isLoadingTickets && (openTicketsCount > 0 || unreadCount > 0) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-4", children: [
+      openTicketsCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground bg-muted px-3 py-1 rounded-full", children: [
+        openTicketsCount,
+        " ",
+        labels.openTickets.toLowerCase()
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "h-8 w-px bg-border" }),
-      /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx("span", { className: cn(
-          "block font-medium text-xl tabular-nums",
-          unreadCount > 0 ? "text-destructive" : "text-foreground"
-        ), children: unreadCount }),
-        /* @__PURE__ */ jsx("span", { children: labels.unreadMessages })
+      unreadCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-sm text-destructive bg-destructive/10 px-3 py-1 rounded-full", children: [
+        unreadCount,
+        " ",
+        labels.unreadMessages.toLowerCase()
       ] })
     ] })
   ] });
 }
-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";
+
+// src/utils/status.ts
+var ticketStatusConfig = {
+  open: {
+    color: "text-blue-600 dark:text-blue-400",
+    bg: "bg-blue-500/10"
+  },
+  waiting_for_user: {
+    color: "text-orange-600 dark:text-orange-400",
+    bg: "bg-orange-500/10"
+  },
+  waiting_for_admin: {
+    color: "text-muted-foreground",
+    bg: "bg-muted"
+  },
+  resolved: {
+    color: "text-green-600 dark:text-green-400",
+    bg: "bg-green-500/10"
+  },
+  closed: {
+    color: "text-muted-foreground",
+    bg: "bg-muted"
   }
 };
+function getStatusConfig(status) {
+  return ticketStatusConfig[status] || ticketStatusConfig.open;
+}
+function formatMessageTime(date) {
+  if (!date) return "";
+  return moment.utc(date).local().format("h:mm A");
+}
+function formatDateSeparator(date) {
+  if (!date) return "";
+  const m = moment.utc(date).local();
+  const now = moment();
+  const today = now.clone().startOf("day");
+  const yesterday = now.clone().subtract(1, "day").startOf("day");
+  if (m.isSame(today, "day")) {
+    return "Today";
+  }
+  if (m.isSame(yesterday, "day")) {
+    return "Yesterday";
+  }
+  if (m.isSame(now, "year")) {
+    return m.format("MMM D");
+  }
+  return m.format("MMM D, YYYY");
+}
+function formatRelativeTime(date, labels) {
+  if (!date) return "N/A";
+  const m = moment.utc(date).local();
+  const now = moment();
+  const diffInSeconds = now.diff(m, "seconds");
+  if (diffInSeconds < 60) {
+    return labels.justNow;
+  }
+  if (diffInSeconds < 3600) {
+    return labels.minutesAgo.replace("{count}", String(Math.floor(diffInSeconds / 60)));
+  }
+  if (diffInSeconds < 86400) {
+    return labels.hoursAgo.replace("{count}", String(Math.floor(diffInSeconds / 3600)));
+  }
+  if (diffInSeconds < 604800) {
+    return labels.daysAgo.replace("{count}", String(Math.floor(diffInSeconds / 86400)));
+  }
+  return m.format("MMM D, YYYY");
+}
+function isSameDay(date1, date2) {
+  if (!date1 || !date2) return false;
+  return moment.utc(date1).format("YYYY-MM-DD") === moment.utc(date2).format("YYYY-MM-DD");
+}
+function formatTicketDate(date) {
+  if (!date) return "";
+  return moment.utc(date).local().format("MMM D, YYYY");
+}
 function TicketItem({ ticket, onClick }) {
   const st = useSupportT();
   const labels = useMemo(() => ({
@@ -1971,49 +2007,37 @@ function TicketItem({ ticket, onClick }) {
       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");
+  const getRelativeTime = useCallback((date) => {
+    return formatRelativeTime(date, labels.time);
   }, [labels.time]);
   const statusLabel = labels.status[ticket.status] || ticket.status || labels.status.open;
+  const statusConfig = getStatusConfig(ticket.status || "open");
   const hasUnread = (ticket.unanswered_messages_count || 0) > 0;
   return /* @__PURE__ */ jsxs(
-    "div",
+    "button",
     {
+      type: "button",
       className: cn(
-        "group flex items-center gap-4 p-4 rounded-xl",
-        "cursor-pointer transition-all duration-200",
-        "hover:bg-accent/50",
-        "active:scale-[0.98]",
-        hasUnread && "bg-primary/5"
+        "w-full flex items-start gap-3 p-4 text-left",
+        "transition-colors duration-150",
+        "hover:bg-accent/50 active:bg-accent"
       ),
       onClick,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "w-2 flex-shrink-0", children: hasUnread && /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-primary animate-pulse" }) }),
+        /* @__PURE__ */ jsx("div", { className: "w-2 pt-1.5 shrink-0", children: hasUnread && /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-blue-500" }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-            /* @__PURE__ */ jsx("h3", { className: cn(
-              "font-medium text-sm line-clamp-1",
-              hasUnread && "font-semibold"
-            ), children: ticket.subject }),
-            hasUnread && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "shrink-0 text-xs", children: ticket.unanswered_messages_count })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mt-1 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsx(Badge, { variant: getStatusBadgeVariant(ticket.status || "open"), className: "text-xs py-0", 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) })
+          /* @__PURE__ */ jsx("h3", { className: cn(
+            "text-[15px] line-clamp-1",
+            hasUnread ? "font-semibold" : "font-medium"
+          ), children: ticket.subject }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-0.5", children: [
+            /* @__PURE__ */ jsx("span", { className: cn("text-[13px]", statusConfig.color), children: statusLabel }),
+            /* @__PURE__ */ jsxs("span", { className: "text-[13px] text-muted-foreground", children: [
+              "\xB7 ",
+              getRelativeTime(ticket.created_at)
             ] })
           ] })
-        ] }),
-        /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5 text-muted-foreground/50 group-hover:text-muted-foreground transition-colors flex-shrink-0" })
+        ] })
       ]
     }
   );
@@ -2058,24 +2082,23 @@ function TicketList({ onTicketClick, className }) {
     };
   }, [hasMoreTickets, isLoadingMoreTickets, loadMoreTickets]);
   if (isLoadingTickets) {
-    return /* @__PURE__ */ jsx("div", { className: cn("px-4 py-6 space-y-3", className), children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: cn("px-4 py-6", className), children: /* @__PURE__ */ jsx("div", { className: "divide-y divide-border/50", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx("div", { className: "py-4", children: /* @__PURE__ */ jsx(
       Skeleton,
       {
-        className: "h-20 w-full",
+        className: "h-12 w-full",
         style: { animationDelay: `${i * 100}ms` }
-      },
-      i
-    )) });
+      }
+    ) }, i)) }) });
   }
   if (!tickets || tickets.length === 0) {
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center py-16 px-8 text-center", className), children: [
-      /* @__PURE__ */ jsx("div", { className: "h-16 w-16 mx-auto mb-4 bg-muted rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx(MessageSquare, { className: "h-8 w-8 text-muted-foreground" }) }),
-      /* @__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__ */ jsxs(Empty, { className: cn("py-16", className), children: [
+      /* @__PURE__ */ jsx(EmptyMedia, { variant: "icon", children: /* @__PURE__ */ jsx(MessageSquare, { className: "h-8 w-8" }) }),
+      /* @__PURE__ */ jsx(EmptyTitle, { children: labels.noTickets }),
+      /* @__PURE__ */ jsx(EmptyDescription, { children: labels.noTicketsDescription })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: cn("px-4 py-6", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: tickets.map((ticket) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: cn("px-4 py-2", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "divide-y divide-border/50", children: tickets.map((ticket) => /* @__PURE__ */ jsx(
       TicketItem,
       {
         ticket,
@@ -2105,49 +2128,70 @@ function TicketList({ onTicketClick, className }) {
     ) })
   ] });
 }
-var formatTime = (date) => {
-  if (!date) return "";
-  return moment2.utc(date).local().format("hh:mm A");
-};
-var formatDate = (date) => {
-  if (!date) return "";
-  return moment2.utc(date).local().format("MMM D, YYYY");
-};
-var getStatusBadgeVariant2 = (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";
+function groupMessages(messages, currentUserId) {
+  const groups = [];
+  let currentGroup = null;
+  for (const msg of messages) {
+    const isFromUser = msg.sender?.id && currentUserId && String(msg.sender.id) === String(currentUserId) || msg.is_from_author;
+    const senderId = msg.sender?.id || null;
+    const shouldStartNewGroup = !currentGroup || currentGroup.isFromUser !== isFromUser || currentGroup.senderId !== senderId;
+    if (shouldStartNewGroup) {
+      currentGroup = {
+        senderId,
+        isFromUser: !!isFromUser,
+        messages: [msg]
+      };
+      groups.push(currentGroup);
+    } else {
+      currentGroup.messages.push(msg);
+    }
   }
-};
-var MessageBubble = ({ message, isFromUser, currentUser, labels }) => {
+  return groups;
+}
+var DateSeparator = ({ date }) => /* @__PURE__ */ jsx("div", { className: "flex justify-center my-4", children: /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground bg-muted/60 px-3 py-1 rounded-full", children: formatDateSeparator(date) }) });
+var MessageBubble = ({
+  message,
+  isFromUser,
+  showAvatar,
+  showTimestamp,
+  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;
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3", isFromUser ? "justify-end" : "justify-start"), 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 || 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: cn("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 || labels.supportTeam,
-        sender.is_staff && ` (${labels.staff})`
-      ] }),
-      /* @__PURE__ */ jsx(Card, { className: cn(
-        isFromUser ? "bg-primary text-primary-foreground" : "bg-muted"
-      ), children: /* @__PURE__ */ jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm whitespace-pre-wrap break-words", children: message.text }) }) }),
-      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground px-1", children: formatTime(message.created_at) })
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-2", isFromUser ? "justify-end" : "justify-start"), children: [
+    !isFromUser && /* @__PURE__ */ jsx("div", { className: "w-8 shrink-0", children: showAvatar && /* @__PURE__ */ jsx(Avatar, { className: "h-8 w-8", children: sender?.avatar ? /* @__PURE__ */ jsx(AvatarImage, { src: sender.avatar, alt: sender.display_username || labels.supportTeam }) : /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary text-primary-foreground text-xs", children: sender?.is_staff ? /* @__PURE__ */ jsx(Headphones, { className: "h-4 w-4" }) : senderInitial }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-0.5 max-w-[85%]", isFromUser ? "items-end" : "items-start"), children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "px-4 py-2.5 rounded-[20px]",
+            isFromUser ? "bg-blue-500 text-white" : "bg-[#e9e9eb] dark:bg-zinc-800 text-foreground"
+          ),
+          children: /* @__PURE__ */ jsx("p", { className: "text-[15px] leading-relaxed whitespace-pre-wrap break-words", children: message.text })
+        }
+      ),
+      showTimestamp && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground px-2 mt-0.5", children: formatMessageTime(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: userInitial || /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }) }) })
+    isFromUser && /* @__PURE__ */ jsx("div", { className: "w-8 shrink-0", children: showAvatar && /* @__PURE__ */ jsx(Avatar, { className: "h-8 w-8", children: currentUser?.avatar ? /* @__PURE__ */ jsx(AvatarImage, { src: currentUser.avatar, alt: currentUser.display_username || currentUser.email || "You" }) : /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-blue-500 text-white text-xs font-medium", children: userInitial || /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }) }) }) })
   ] });
 };
+var MessageGroupComponent = ({ group, currentUser, labels }) => {
+  return /* @__PURE__ */ jsx("div", { className: "space-y-1", children: group.messages.map((msg, idx) => /* @__PURE__ */ jsx(
+    MessageBubble,
+    {
+      message: msg,
+      isFromUser: group.isFromUser,
+      showAvatar: idx === 0,
+      showTimestamp: idx === group.messages.length - 1,
+      currentUser,
+      labels
+    },
+    msg.uuid
+  )) });
+};
 function TicketSheet({ ticket, open, onOpenChange }) {
   const st = useSupportT();
   const { user } = useAuth();
@@ -2156,6 +2200,7 @@ function TicketSheet({ ticket, open, onOpenChange }) {
   const [message, setMessage] = useState("");
   const [isSending, setIsSending] = useState(false);
   const scrollAreaRef = useRef(null);
+  const textareaRef = useRef(null);
   const firstRender = useRef(true);
   const labels = useMemo(() => ({
     noMessages: st("messageList.noMessages"),
@@ -2187,6 +2232,7 @@ function TicketSheet({ ticket, open, onOpenChange }) {
     refresh: refreshMessages,
     addOptimistic
   } = useMessages(ticket?.uuid || null);
+  const messageGroups = useMemo(() => groupMessages(messages, user?.id), [messages, user?.id]);
   useEffect(() => {
     firstRender.current = true;
   }, [ticket?.uuid]);
@@ -2199,6 +2245,14 @@ function TicketSheet({ ticket, open, onOpenChange }) {
       firstRender.current = false;
     }
   }, [messages]);
+  const handleTextareaChange = useCallback((e) => {
+    setMessage(e.target.value);
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = "auto";
+      textarea.style.height = `${Math.min(textarea.scrollHeight, 120)}px`;
+    }
+  }, []);
   const handleSend = async (e) => {
     e.preventDefault();
     if (!message.trim() || !ticket?.uuid) return;
@@ -2224,6 +2278,9 @@ function TicketSheet({ ticket, open, onOpenChange }) {
       addOptimistic(optimisticMessage);
       await sendMessage({ ticketUuid: ticket.uuid, text: messageText });
       setMessage("");
+      if (textareaRef.current) {
+        textareaRef.current.style.height = "auto";
+      }
       await refreshMessages();
       const scrollContainer = scrollAreaRef.current?.querySelector("[data-radix-scroll-area-viewport]");
       if (scrollContainer) {
@@ -2257,32 +2314,61 @@ function TicketSheet({ ticket, open, onOpenChange }) {
   }, [loadMore]);
   const canSendMessage = ticket?.status !== "closed";
   const statusLabel = ticket ? labels.status[ticket.status] || ticket.status || labels.status.open : "";
+  const statusConfig = getStatusConfig(ticket?.status || "open");
+  const renderMessages = () => {
+    const elements = [];
+    let lastDate = null;
+    for (const group of messageGroups) {
+      const firstMessage = group.messages[0];
+      if (!firstMessage) continue;
+      const messageDate = firstMessage.created_at;
+      if (!lastDate || !isSameDay(lastDate, messageDate)) {
+        elements.push(
+          /* @__PURE__ */ jsx(DateSeparator, { date: messageDate || "" }, `date-${messageDate}`)
+        );
+        lastDate = messageDate || null;
+      }
+      elements.push(
+        /* @__PURE__ */ jsx(
+          MessageGroupComponent,
+          {
+            group,
+            currentUser: user,
+            labels: { supportTeam: labels.supportTeam, staff: labels.staff }
+          },
+          `group-${firstMessage.uuid}`
+        )
+      );
+    }
+    return elements;
+  };
   return /* @__PURE__ */ jsx(ResponsiveSheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(ResponsiveSheetContent, { className: "sm:max-w-xl p-0 flex flex-col h-full", children: [
     /* @__PURE__ */ jsx(ResponsiveSheetHeader, { className: "px-6 py-4 border-b flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
       /* @__PURE__ */ jsx(ResponsiveSheetTitle, { className: "text-lg font-semibold line-clamp-2", children: ticket?.subject || "Ticket" }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1", children: [
-        /* @__PURE__ */ jsx(Badge, { variant: getStatusBadgeVariant2(ticket?.status || "open"), className: "text-xs", children: statusLabel }),
-        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: formatDate(ticket?.created_at) })
+        /* @__PURE__ */ jsx("span", { className: cn("text-[13px] px-2 py-0.5 rounded-full", statusConfig.bg, statusConfig.color), children: statusLabel }),
+        /* @__PURE__ */ jsx("span", { className: "text-[13px] text-muted-foreground", children: formatTicketDate(ticket?.created_at) })
       ] })
     ] }) }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: isLoadingMessages ? /* @__PURE__ */ jsx("div", { className: "p-6 space-y-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 rounded-full" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-16 flex-1 max-w-[70%]" })
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: isLoadingMessages ? /* @__PURE__ */ jsx("div", { className: "p-6 space-y-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs("div", { className: cn("flex gap-2", i % 2 === 0 ? "justify-end" : "justify-start"), children: [
+      i % 2 !== 0 && /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 rounded-full shrink-0" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: cn("h-16 rounded-[20px]", i % 2 === 0 ? "w-[60%]" : "w-[70%]") }),
+      i % 2 === 0 && /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 rounded-full shrink-0" })
     ] }, i)) }) : messages.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full p-8 text-center", children: [
-      /* @__PURE__ */ jsx(MessageSquare, { className: "h-12 w-12 text-muted-foreground mb-4" }),
+      /* @__PURE__ */ jsx("div", { className: "h-16 w-16 mx-auto mb-4 bg-muted rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx(MessageSquare, { className: "h-8 w-8 text-muted-foreground" }) }),
       /* @__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 })
-    ] }) : /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", viewportRef: scrollAreaRef, children: /* @__PURE__ */ jsxs("div", { className: "p-6 space-y-4", children: [
+    ] }) : /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", viewportRef: scrollAreaRef, children: /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-3", children: [
       hasMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center pb-4", children: isLoadingMore ? /* @__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: labels.loadingOlder })
       ] }) : /* @__PURE__ */ jsxs(
         Button,
         {
-          variant: "outline",
+          variant: "ghost",
           size: "sm",
           onClick: handleLoadMore,
-          className: "text-xs",
+          className: "text-xs text-muted-foreground",
           children: [
             labels.loadOlder,
             " (",
@@ -2291,59 +2377,44 @@ function TicketSheet({ ticket, open, onOpenChange }) {
           ]
         }
       ) }),
-      messages.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-border" }),
-        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: formatDate(messages[0]?.created_at) }),
-        /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-border" })
-      ] }),
-      messages.map((msg, index) => {
-        const isFromUser = msg.sender?.id && user?.id && String(msg.sender.id) === String(user.id) || msg.sender?.email && user?.email && msg.sender.email === user.email || msg.is_from_author && ticket?.user && user?.id && String(ticket.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(msg.created_at || "").format("YYYY-MM-DD");
-        return /* @__PURE__ */ jsxs(React4.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(msg.created_at) }),
-            /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-border" })
-          ] }),
-          /* @__PURE__ */ jsx(
-            MessageBubble,
-            {
-              message: msg,
-              isFromUser: !!isFromUser,
-              currentUser: user,
-              labels: { supportTeam: labels.supportTeam, staff: labels.staff }
-            }
-          )
-        ] }, msg.uuid);
-      })
+      renderMessages()
     ] }) }) }),
-    /* @__PURE__ */ jsxs("form", { onSubmit: handleSend, className: "p-4 border-t bg-background flex-shrink-0", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx(
-          Textarea,
-          {
-            value: message,
-            onChange: (e) => setMessage(e.target.value),
-            onKeyDown: handleKeyDown,
-            placeholder: canSendMessage ? labels.placeholder : labels.ticketClosed,
-            className: "min-h-[60px] max-h-[150px] resize-none",
-            disabled: !canSendMessage || isSending
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "submit",
-            size: "icon",
-            disabled: !message.trim() || !canSendMessage || isSending,
-            className: "shrink-0",
-            children: isSending ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Send, { className: "h-4 w-4" })
-          }
-        )
-      ] }),
-      !canSendMessage && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-2", children: labels.ticketClosedDescription })
-    ] })
+    /* @__PURE__ */ jsx("form", { onSubmit: handleSend, className: "p-3 border-t bg-background/95 backdrop-blur flex-shrink-0", children: canSendMessage ? /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2 bg-muted/50 rounded-[24px] px-4 py-2", children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: textareaRef,
+          value: message,
+          onChange: handleTextareaChange,
+          onKeyDown: handleKeyDown,
+          placeholder: labels.placeholder,
+          className: cn(
+            "flex-1 bg-transparent border-none resize-none",
+            "text-[15px] placeholder:text-muted-foreground",
+            "min-h-[24px] max-h-[120px] focus:outline-none"
+          ),
+          rows: 1,
+          disabled: isSending
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "submit",
+          size: "icon",
+          variant: "ghost",
+          className: cn(
+            "rounded-full h-8 w-8 shrink-0",
+            message.trim() ? "bg-blue-500 text-white hover:bg-blue-600" : ""
+          ),
+          disabled: !message.trim() || isSending,
+          children: isSending ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4" })
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "text-center py-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: labels.ticketClosed }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: labels.ticketClosedDescription })
+    ] }) })
   ] }) });
 }
 function CreateTicketSheet({ open, onOpenChange, onSuccess }) {
@@ -2404,13 +2475,10 @@ function CreateTicketSheet({ open, onOpenChange, onSuccess }) {
   };
   return /* @__PURE__ */ jsx(ResponsiveSheet, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(ResponsiveSheetContent, { className: "sm:max-w-lg", children: [
     /* @__PURE__ */ jsxs(ResponsiveSheetHeader, { children: [
-      /* @__PURE__ */ jsxs(ResponsiveSheetTitle, { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Plus, { className: "h-5 w-5" }),
-        labels.title
-      ] }),
+      /* @__PURE__ */ jsx(ResponsiveSheetTitle, { children: labels.title }),
       /* @__PURE__ */ jsx(ResponsiveSheetDescription, { children: labels.description })
     ] }),
-    /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-6 mt-6", children: [
+    /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-5 mt-4", children: [
       /* @__PURE__ */ jsx(
         FormField,
         {
@@ -2450,7 +2518,7 @@ function CreateTicketSheet({ open, onOpenChange, onSuccess }) {
           ] })
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-3 pt-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-3 pt-2", children: [
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -2464,10 +2532,7 @@ function CreateTicketSheet({ open, onOpenChange, onSuccess }) {
         /* @__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" }),
           labels.creating
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
-          labels.create
-        ] }) })
+        ] }) : labels.create })
       ] })
     ] }) })
   ] }) });
@@ -2538,7 +2603,7 @@ function SupportPage({ isDemo = false }) {
 // package.json
 var package_default = {
   name: "@djangocfg/ext-support",
-  version: "1.0.24",
+  version: "1.0.26",
   description: "Support ticket system extension for DjangoCFG",
   keywords: [
     "django",