Refactor NewChatForm for improved readability

Reformatted code in NewChatForm.tsx for better readability and maintainability, including consistent spacing, line breaks, and minor style adjustments. No functional changes were made.

components/dashboard/NewChatForm.tsx

@@ -1,8 +1,14 @@
-"use client"
+"use client";
 
 import React, { useState, useEffect } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -29,41 +35,43 @@ export default function NewChatForm() {
   const [initialMessage, setInitialMessage] = useState("");
   const [loading, setLoading] = useState(false);
   const [loadingUser, setLoadingUser] = useState(false);
-  const [vendorStores, setVendorStores] = useState<{ _id: string, name: string }[]>([]);
+  const [vendorStores, setVendorStores] = useState<
+    { _id: string; name: string }[]
+  >([]);
   const [selectedStore, setSelectedStore] = useState<string>("");
   const [selectedUser, setSelectedUser] = useState<User | null>(null);
-  
+
   // Create an axios instance with auth
   const getAuthAxios = () => {
     const authToken = getCookie("Authorization");
     if (!authToken) return null;
-    
+
     return axios.create({
       baseURL: process.env.NEXT_PUBLIC_API_URL,
-      headers: { Authorization: `Bearer ${authToken}` }
+      headers: { Authorization: `Bearer ${authToken}` },
     });
   };
-  
+
   // Parse URL parameters for buyerId and fetch user details if present
   useEffect(() => {
-    const buyerIdParam = searchParams.get('buyerId');
+    const buyerIdParam = searchParams.get("buyerId");
     if (buyerIdParam) {
       setBuyerId(buyerIdParam);
       // We'll fetch user details after stores are loaded
     }
   }, [searchParams]);
-  
+
   // Fetch user information by ID
   const fetchUserById = async (userId: string) => {
     if (!userId || !vendorStores[0]?._id) return;
-    
+
     const authAxios = getAuthAxios();
     if (!authAxios) {
       toast.error("You need to be logged in");
       router.push("/auth/login");
       return;
     }
-    
+
     setLoadingUser(true);
     try {
       const response = await authAxios.get(`/chats/user/${userId}`);
@@ -90,7 +98,9 @@ export default function NewChatForm() {
 
     try {
       setSearching(true);
-      const response = await authAxios.get(`/chats/search/users?query=${encodeURIComponent(query)}&storeId=${vendorStores[0]._id}`);
+      const response = await authAxios.get(
+        `/chats/search/users?query=${encodeURIComponent(query)}&storeId=${vendorStores[0]._id}`,
+      );
       setSearchResults(response.data);
     } catch (error) {
       console.error("Error searching users:", error);
@@ -114,7 +124,7 @@ export default function NewChatForm() {
     setSearchQuery(user.telegramUsername || user.telegramUserId);
     setOpen(false);
   };
-  
+
   // Fetch vendor stores
   useEffect(() => {
     const fetchVendorStores = async () => {
@@ -124,41 +134,51 @@ export default function NewChatForm() {
         router.push("/auth/login");
         return;
       }
-      
+
       try {
         // Get vendor profile first
-        const vendorResponse = await authAxios.get('/auth/me');
+        const vendorResponse = await authAxios.get("/auth/me");
-        
+
         // Extract vendor ID properly
         const vendorId = vendorResponse.data.vendor?._id;
-        
+
         if (!vendorId) {
-          console.error("Vendor ID not found in profile response:", vendorResponse.data);
+          console.error(
+            "Vendor ID not found in profile response:",
+            vendorResponse.data,
+          );
           toast.error("Could not retrieve vendor information");
           return;
         }
-        
+
         // Fetch store
         const storeResponse = await authAxios.get(`/storefront`);
-        
+
         // Handle both array and single object responses
         if (Array.isArray(storeResponse.data)) {
           setVendorStores(storeResponse.data);
           if (storeResponse.data.length > 0) {
             setSelectedStore(storeResponse.data[0]._id);
           }
-        } else if (storeResponse.data && typeof storeResponse.data === 'object' && storeResponse.data._id) {
+        } else if (
+          storeResponse.data &&
+          typeof storeResponse.data === "object" &&
+          storeResponse.data._id
+        ) {
           const singleStore = [storeResponse.data];
           setVendorStores(singleStore);
           setSelectedStore(storeResponse.data._id);
         } else {
-          console.error("Expected store data but received:", storeResponse.data);
+          console.error(
+            "Expected store data but received:",
+            storeResponse.data,
+          );
           setVendorStores([]);
           toast.error("Failed to load store data in expected format");
         }
-        
+
         // Now that we have the store, fetch user details if buyerId was set
-        const buyerIdParam = searchParams.get('buyerId');
+        const buyerIdParam = searchParams.get("buyerId");
         if (buyerIdParam) {
           fetchUserById(buyerIdParam);
         }
@@ -168,29 +188,29 @@ export default function NewChatForm() {
         setVendorStores([]);
       }
     };
-    
+
     fetchVendorStores();
   }, []);
-  
+
   const handleBackClick = () => {
     router.push("/dashboard/chats");
   };
-  
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    
+
     if (!buyerId) {
       toast.error("Please select a customer");
       return;
     }
-    
+
     if (vendorStores.length === 0) {
       toast.error("No store available. Please create a store first.");
       return;
     }
-    
+
     const storeId = vendorStores[0]._id;
-    
+
     setLoading(true);
     try {
       const authAxios = getAuthAxios();
@@ -199,13 +219,13 @@ export default function NewChatForm() {
         router.push("/auth/login");
         return;
       }
-      
+
       const response = await authAxios.post("/chats/create", {
         buyerId,
         storeId: storeId,
-        initialMessage: initialMessage.trim() || undefined
+        initialMessage: initialMessage.trim() || undefined,
       });
-      
+
       if (response.data.chatId) {
         toast.success("Chat created successfully!");
         router.push(`/dashboard/chats/${response.data.chatId}`);
@@ -215,7 +235,7 @@ export default function NewChatForm() {
       }
     } catch (error: any) {
       console.error("Error creating chat:", error);
-      
+
       if (error.response?.status === 409) {
         toast.info("Chat already exists, redirecting...");
         router.push(`/dashboard/chats/${error.response.data.chatId}`);
@@ -226,7 +246,7 @@ export default function NewChatForm() {
       setLoading(false);
     }
   };
-  
+
   return (
     <Card className="w-full">
       <CardHeader>
@@ -240,7 +260,7 @@ export default function NewChatForm() {
           Start a new conversation with a customer by their Telegram ID
         </CardDescription>
       </CardHeader>
-      
+
       <CardContent>
         <form onSubmit={handleSubmit} className="space-y-6">
           <div className="space-y-2">
@@ -260,7 +280,7 @@ export default function NewChatForm() {
                   <Search className="h-4 w-4 text-muted-foreground" />
                 )}
               </div>
-              
+
               {open && searchQuery && (
                 <div className="absolute z-50 w-full mt-1 border bg-card rounded-md shadow-md max-h-[300px] overflow-auto">
                   {searching ? (
@@ -300,9 +320,11 @@ export default function NewChatForm() {
               )}
             </div>
             <p className="text-sm text-muted-foreground">
-              This is the customer's Telegram ID or username. You can search for them above or ask them to use the /myid command in your Telegram bot.
+              This is the customer's Telegram ID or username. You can search for
+              them above or ask them to use the /myid command in your Telegram
+              bot.
             </p>
-            
+
             {buyerId && !searchQuery && (
               <div className="p-2 border rounded-md bg-muted/20 mt-2">
                 <p className="text-sm font-medium">
@@ -311,7 +333,7 @@ export default function NewChatForm() {
               </div>
             )}
           </div>
-          
+
           <div className="space-y-2">
             <Label htmlFor="initialMessage">Initial Message (Optional)</Label>
             <Textarea
@@ -322,7 +344,7 @@ export default function NewChatForm() {
               rows={4}
             />
           </div>
-          
+
           <div className="flex justify-end space-x-2">
             <Button
               type="button"
@@ -332,7 +354,10 @@ export default function NewChatForm() {
             >
               Cancel
             </Button>
-            <Button type="submit" disabled={loading || !buyerId || vendorStores.length === 0}>
+            <Button
+              type="submit"
+              disabled={loading || !buyerId || vendorStores.length === 0}
+            >
               {loading ? (
                 <>
                   <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
@@ -350,4 +375,4 @@ export default function NewChatForm() {
       </CardContent>
     </Card>
   );
-} 
+}

public/git-info.json

@@ -1,4 +1,4 @@
 {
-  "commitHash": "74f3a2c",
+  "commitHash": "b1e486c",
-  "buildTime": "2026-01-05T21:55:11.573Z"
+  "buildTime": "2026-01-05T21:59:27.052Z"
 }