feat: smooth chat creation and redirection

Author: Praashh

src/app/(app)/settings/subscription/page.tsx

@@ -20,7 +20,6 @@ import { History } from "@/components/subscription/history";
 
 export default async function SubscriptionPage() {
   const user = await FetchUser();
-  console.log(user);
   return (
     <div className="bg-background text-foreground min-h-screen w-full border">
       <div className="mx-auto w-full max-w-6xl p-8">
@@ -52,20 +51,6 @@ export default async function SubscriptionPage() {
               about={user?.about as string}
               plan={user?.subscription?.plan as string}
             />
-
-            <div className="space-y-1 pt-8">
-        <h2 className="text-xl font-bold text-white">Danger Zone</h2>
-        <p className="text-muted-foreground text-sm">
-          Permanently delete your account and all associated data.
-        </p>
-        <Button
-          variant="destructive"
-          className="mt-4 rounded-lg bg-red-600 px-6 py-2 font-medium text-white hover:bg-red-700"
-        >
-          Delete Account
-        </Button>
-      </div>
-
           </div>
 
           {/* Right Column - Tabs Section */}
@@ -80,10 +65,7 @@ export default async function SubscriptionPage() {
                   >
                     Account
                   </TabsTrigger>
-                  <TabsTrigger className="rounded-lg text-xs" value="history">
-                    History & Sync
-                  </TabsTrigger>
-                  <TabsTrigger className="rounded-lg text-xs" value="models">
+                 <TabsTrigger className="rounded-lg text-xs" value="models">
                     Models
                   </TabsTrigger>
                   <TabsTrigger className="rounded-lg text-xs" value="api-keys">
@@ -99,9 +81,6 @@ export default async function SubscriptionPage() {
               <TabsContent value="account">
                 <Customisation />
               </TabsContent>
-              <TabsContent value="history">
-                <History />
-              </TabsContent>
               <TabsContent value="models">
                 <Models />
               </TabsContent>

src/app/_components/Chat.tsx

@@ -34,7 +34,7 @@ function handleStopListening() {
 
 const Chat = ({ chatId: initialChatId }: { chatId: string }) => {
   const { modelId: model, setModelId: setModel } = useModel();
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [localMessages, setMessages] = useState<ChatMessage[]>([]);
   const [search, setSearch] = useState(false);
   const [input, setInput] = useState(() => {
     if (typeof window === "undefined") return "";
@@ -69,24 +69,28 @@ const Chat = ({ chatId: initialChatId }: { chatId: string }) => {
     onScroll: scrollToBottom,
   });
 
-  const { data: chatMessages } = api.chat.getChatMessages.useQuery({ chatId });
+  const { data: chatMessages, isLoading: isQueryLoading } = api.chat.getChatMessages.useQuery({ chatId });
+
+  // Derive display messages: prefer local state (during/after streaming),
+  // fall back to server data so cached queries render instantly without a loader flash
+  const messages = localMessages.length > 0
+    ? localMessages
+    : (chatMessages?.messages.map((m) => ({
+        id: m.id,
+        role: m.role === "USER" ? ("user" as const) : ("assistant" as const),
+        content: m.content,
+      })) ?? []);
 
   useEffect(() => {
     setChatId(initialChatId);
+    setMessages([]);
   }, [initialChatId]);
 
   useEffect(() => {
-    if (chatMessages) {
-      setMessages(
-        chatMessages.messages.map((message) => ({
-          id: message.id,
-          role: message.role === "USER" ? ("user" as const) : ("assistant" as const),
-          content: message.content,
-        })),
-      );
+    if (chatMessages && localMessages.length === 0) {
       requestAnimationFrame(scrollToBottom);
     }
-  }, [chatMessages, scrollToBottom]);
+  }, [chatMessages, localMessages.length, scrollToBottom]);
 
   const toggleWrap = useCallback(() => setIsWrapped((prev) => !prev), []);
 
@@ -208,7 +212,7 @@ const Chat = ({ chatId: initialChatId }: { chatId: string }) => {
       <div className="relative flex h-full w-full flex-col">
         <div className="no-scrollbar flex flex-1 flex-col overflow-y-auto px-4 pb-40 md:px-4">
           <div className="mx-auto w-full max-w-4xl py-4">
-            {messages.length === 0 ? (
+            {messages.length === 0 && isQueryLoading ? (
               <div className="text-muted-foreground flex h-[50vh] items-center justify-center">
                 <Loader2Icon className="animate-spin" />
               </div>

src/app/api/ask/route.ts

@@ -53,21 +53,6 @@ export async function POST(req: NextRequest): Promise<Response> {
       );
     }
 
-    // Save user message
-    await db.message.create({
-      data: {
-        chatId,
-        content: userContent,
-        role: "USER",
-      },
-    });
-    if (!chat.title && userContent) {
-      await db.chat.update({
-        where: { id: chatId },
-        data: { title: userContent.slice(0, 100) },
-      });
-    }
-
     const modelInfo = getModelById(model);
     if (!modelInfo) {
       return new Response(
@@ -81,7 +66,23 @@ export async function POST(req: NextRequest): Promise<Response> {
       ? req.cookies.get(`${COOKIE_PREFIX}${modelInfo.provider}`)?.value
       : undefined;
 
-    // Call the model FIRST so we can return a proper HTTP error if it fails
+    // Start DB writes in parallel with the LLM call to reduce time-to-first-byte.
+    // The LLM reads messages from the request body, not the DB, so this is safe.
+    const saveUserMessage = db.message.create({
+      data: {
+        chatId,
+        content: userContent,
+        role: "USER",
+      },
+    });
+    // Title update is non-critical — fire and forget
+    if (!chat.title && userContent) {
+      void db.chat.update({
+        where: { id: chatId },
+        data: { title: userContent.slice(0, 100) },
+      });
+    }
+
     let modelResponse: Response;
     try {
       modelResponse = await fetchChatCompletion({
@@ -101,6 +102,9 @@ export async function POST(req: NextRequest): Promise<Response> {
       );
     }
 
+    // Ensure user message is persisted before we start streaming
+    await saveUserMessage;
+
     if (!modelResponse.ok) {
       // Forward the upstream error status and body to the client
       let errorBody: ChatErrorResponse = {};
@@ -155,18 +159,19 @@ export async function POST(req: NextRequest): Promise<Response> {
             if (done) {
               // Save AI message to database after stream completes
               if (accumulatedContent.trim()) {
-                await db.message.create({
-                  data: {
-                    chatId,
-                    content: accumulatedContent,
-                    role: "ASSISTANT",
-                  },
-                });
-                // Update chat timestamp so sidebar ordering stays correct
-                await db.chat.update({
-                  where: { id: chatId },
-                  data: { updatedAt: new Date() },
-                });
+                await Promise.all([
+                  db.message.create({
+                    data: {
+                      chatId,
+                      content: accumulatedContent,
+                      role: "ASSISTANT",
+                    },
+                  }),
+                  db.chat.update({
+                    where: { id: chatId },
+                    data: { updatedAt: new Date() },
+                  }),
+                ]);
               }
 
               await writer.write(encoder.encode("data: [DONE]\n\n"));

src/components/ui/ui-input.tsx

@@ -10,7 +10,6 @@ import TabsSuggestion from "@/components/ui/tabs-suggestion";
 import { ModelSelector } from "@/components/ui/model-selector";
 import { useModel } from "@/hooks/use-model";
 import { useStreamChat } from "@/hooks/use-stream-chat";
-import { useRouter } from "next/navigation";
 import SpeechRecognition, { useSpeechRecognition } from "react-speech-recognition";
 import { useSpeechSynthesis } from "react-speech-kit";
 import { toast } from "sonner";
@@ -32,7 +31,6 @@ function handleStopListening() {
 
 const UIInput = () => {
   const session = useSession();
-  const router = useRouter();
   const { modelId: model, setModelId: setModel } = useModel();
   const [modeOfChatting, setModeOfChatting] = useState<"text" | "voice">("text");
   const [query, setQuery] = useState("");
@@ -113,6 +111,8 @@ const UIInput = () => {
         const result = await createChat.mutateAsync();
         chatId = result.chatId!;
         currentChatIdRef.current = chatId;
+        // Update URL immediately without triggering navigation or component remount
+        window.history.replaceState(null, "", `/ask/${chatId}`);
       }
 
       const allMessages = [...messages, userMessage];
@@ -124,7 +124,6 @@ const UIInput = () => {
           if (modeOfChatting === "voice" && ttsSupported && selectedVoice && content) {
             speak({ text: content, voice: selectedVoice });
           }
-          router.push(`/ask/${chatId}`);
         } catch (error) {
           if ((error as Error).name !== "AbortError") console.error("Error:", error);
           setIsLoading(false);

src/styles/globals.css

@@ -310,10 +310,12 @@ html.boring-theme.dark {
 
 ::selection {
   background-color: var(--primary);
+  color: var(--primary-foreground);
 }
 
 .dark::selection {
-  background-color: var(--accent);
+  background-color: var(--primary);
+  color: var(--primary-foreground);
 }
 
 @media (prefers-reduced-motion: reduce) {