From f177a342d7f4e5cd1aebba9d4fd6ee703445ba1c Mon Sep 17 00:00:00 2001
From: Kashargul <144968721+Kashargul@users.noreply.github.com>
Date: Tue, 17 Feb 2026 15:47:44 +0100
Subject: [PATCH] Improve ticket chat (#19192)

* Improve ticket chat

* .
---
 tgui/packages/tgui/interfaces/Ticket.tsx      | 23 +++++++--------
 tgui/packages/tgui/interfaces/TicketChat.tsx  | 24 ++++++++--------
 .../packages/tgui/interfaces/TicketsPanel.tsx | 28 ++++++++++---------
 3 files changed, 36 insertions(+), 39 deletions(-)

diff --git a/tgui/packages/tgui/interfaces/Ticket.tsx b/tgui/packages/tgui/interfaces/Ticket.tsx
index 882dd0aa40a..e616c76cdcd 100644
--- a/tgui/packages/tgui/interfaces/Ticket.tsx
+++ b/tgui/packages/tgui/interfaces/Ticket.tsx
@@ -60,6 +60,7 @@ export const Ticket = (props) => {
   const [ticketChat, setTicketChat] = useState('');
 
   const messagesEndRef: RefObject<HTMLDivElement | null> = useRef(null);
+  const inputRef: RefObject<HTMLInputElement | null> = useRef(null);
 
   const {
     id,
@@ -78,20 +79,14 @@ export const Ticket = (props) => {
 
   useEffect(() => {
     const scroll = messagesEndRef.current;
-    if (scroll) {
-      scroll.scrollTop = scroll.scrollHeight;
-    }
-  }, []);
+    if (!scroll) return;
 
-  useEffect(() => {
-    const scroll = messagesEndRef.current;
-    if (scroll) {
-      const height = scroll.scrollHeight;
-      const bottom = scroll.scrollTop + scroll.offsetHeight;
-      const scrollTracking = Math.abs(height - bottom) < 24;
-      if (scrollTracking) {
-        scroll.scrollTop = scroll.scrollHeight;
-      }
+    const isAtBottom =
+      Math.abs(scroll.scrollHeight - scroll.scrollTop - scroll.offsetHeight) <
+      24;
+
+    if (isAtBottom) {
+      scroll.scrollTop = scroll.scrollHeight;
     }
   }, [log]);
 
@@ -203,6 +198,7 @@ export const Ticket = (props) => {
                           ticket_ref: ticket_ref,
                         });
                         setTicketChat('');
+                        requestAnimationFrame(() => inputRef.current?.focus());
                       }
                     }}
                   />
@@ -215,6 +211,7 @@ export const Ticket = (props) => {
                         ticket_ref: ticket_ref,
                       });
                       setTicketChat('');
+                      requestAnimationFrame(() => inputRef.current?.focus());
                     }}
                   >
                     Send
diff --git a/tgui/packages/tgui/interfaces/TicketChat.tsx b/tgui/packages/tgui/interfaces/TicketChat.tsx
index e2f227e7fe4..42c1bfef910 100644
--- a/tgui/packages/tgui/interfaces/TicketChat.tsx
+++ b/tgui/packages/tgui/interfaces/TicketChat.tsx
@@ -47,24 +47,19 @@ export const TicketChat = (props) => {
   const { id, level, handler, log } = data;
 
   const messagesEndRef: RefObject<HTMLDivElement | null> = useRef(null);
+  const inputRef: RefObject<HTMLInputElement | null> = useRef(null);
 
   useEffect(() => {
     const scroll = messagesEndRef.current;
-    if (scroll) {
+    if (!scroll) return;
+
+    const isAtBottom =
+      Math.abs(scroll.scrollHeight - scroll.scrollTop - scroll.offsetHeight) <
+      24;
+
+    if (isAtBottom) {
       scroll.scrollTop = scroll.scrollHeight;
     }
-  }, []);
-
-  useEffect(() => {
-    const scroll = messagesEndRef.current;
-    if (scroll) {
-      const height = scroll.scrollHeight;
-      const bottom = scroll.scrollTop + scroll.offsetHeight;
-      const scrollTracking = Math.abs(height - bottom) < 24;
-      if (scrollTracking) {
-        scroll.scrollTop = scroll.scrollHeight;
-      }
-    }
   }, [log]);
 
   return (
@@ -114,6 +109,7 @@ export const TicketChat = (props) => {
                     autoFocus
                     autoSelect
                     fluid
+                    ref={inputRef}
                     placeholder="Enter a message..."
                     value={ticketChat}
                     onChange={(value: string) => setTicketChat(value)}
@@ -121,6 +117,7 @@ export const TicketChat = (props) => {
                       if (KEY.Enter === e.key) {
                         act('send_msg', { msg: ticketChat });
                         setTicketChat('');
+                        requestAnimationFrame(() => inputRef.current?.focus());
                       }
                     }}
                   />
@@ -130,6 +127,7 @@ export const TicketChat = (props) => {
                     onClick={() => {
                       act('send_msg', { msg: ticketChat });
                       setTicketChat('');
+                      requestAnimationFrame(() => inputRef.current?.focus());
                     }}
                   >
                     Send
diff --git a/tgui/packages/tgui/interfaces/TicketsPanel.tsx b/tgui/packages/tgui/interfaces/TicketsPanel.tsx
index 112765df039..800b06dd8ad 100644
--- a/tgui/packages/tgui/interfaces/TicketsPanel.tsx
+++ b/tgui/packages/tgui/interfaces/TicketsPanel.tsx
@@ -108,24 +108,19 @@ export const TicketsPanel = (props) => {
   const [ticketChat, setTicketChat] = useState('');
 
   const messagesEndRef: RefObject<HTMLDivElement | null> = useRef(null);
+  const inputRef: RefObject<HTMLInputElement | null> = useRef(null);
 
   useEffect(() => {
     const scroll = messagesEndRef.current;
-    if (scroll) {
+    if (!scroll) return;
+
+    const isAtBottom =
+      Math.abs(scroll.scrollHeight - scroll.scrollTop - scroll.offsetHeight) <
+      24;
+
+    if (isAtBottom) {
       scroll.scrollTop = scroll.scrollHeight;
     }
-  }, []);
-
-  useEffect(() => {
-    const scroll = messagesEndRef.current;
-    if (scroll) {
-      const height = scroll.scrollHeight;
-      const bottom = scroll.scrollTop + scroll.offsetHeight;
-      const scrollTracking = Math.abs(height - bottom) < 24;
-      if (scrollTracking) {
-        scroll.scrollTop = scroll.scrollHeight;
-      }
-    }
   }, [selected_ticket?.log]);
 
   const availableLevel = is_admin ? AdminLevel : MentorLevel;
@@ -359,6 +354,7 @@ export const TicketsPanel = (props) => {
                           autoFocus
                           autoSelect
                           fluid
+                          ref={inputRef}
                           placeholder="Enter a message..."
                           value={ticketChat}
                           onChange={(value: string) => setTicketChat(value)}
@@ -366,6 +362,9 @@ export const TicketsPanel = (props) => {
                             if (KEY.Enter === e.key) {
                               act('send_msg', { msg: ticketChat });
                               setTicketChat('');
+                              requestAnimationFrame(() =>
+                                inputRef.current?.focus(),
+                              );
                             }
                           }}
                         />
@@ -375,6 +374,9 @@ export const TicketsPanel = (props) => {
                           onClick={() => {
                             act('send_msg', { msg: ticketChat });
                             setTicketChat('');
+                            requestAnimationFrame(() =>
+                              inputRef.current?.focus(),
+                            );
                           }}
                         >
                           Send