fix session changing issue

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/EmptySession/EmptySession.tsx

@@ -1,34 +1,23 @@
-import { ChatSidebar } from "../ChatSidebar/ChatSidebar";
-
-interface EmptySessionProps {
+interface Props {
   isCreating: boolean;
-  handleSubmit: (e: React.FormEvent) => void;
-  input: string;
-  setInput: (input: string) => void;
+  onCreateSession: (e: React.FormEvent) => void;
 }
 
-export const EmptySession = ({ isCreating, handleSubmit, input, setInput }: EmptySessionProps) => {
+export function EmptySession({ isCreating, onCreateSession }: Props) {
   return (
     <div className="flex h-full flex-1 flex-col items-center justify-center bg-zinc-100 p-4">
       <h2 className="mb-4 text-xl font-semibold text-zinc-700">
         Start a new conversation
       </h2>
-      <form onSubmit={handleSubmit} className="w-full max-w-md">
-        <input
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          disabled={isCreating}
-          placeholder="Type your message to start..."
-          className="w-full rounded-md border border-zinc-300 px-4 py-2"
-        />
+      <form onSubmit={onCreateSession} className="w-full max-w-md">
         <button
           type="submit"
-          disabled={isCreating || !input.trim()}
-          className="mt-2 w-full rounded-md bg-blue-600 px-4 py-2 text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+          disabled={isCreating}
+          className="w-full rounded-md bg-blue-600 px-4 py-2 text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
         >
-          {isCreating ? "Starting..." : "Start Chat"}
+          {isCreating ? "Creating..." : "Start New Chat"}
         </button>
       </form>
     </div>
   );
-};
+}

autogpt_platform/frontend/src/app/(platform)/copilot-2/page.tsx

@@ -4,7 +4,6 @@ import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport } from "ai";
 import { useState, useMemo } from "react";
 import { parseAsString, useQueryState } from "nuqs";
-import { MessageSquare } from "lucide-react";
 import { ChatSidebar } from "./components/ChatSidebar/ChatSidebar";
 import { EmptySession } from "./components/EmptySession/EmptySession";
 import { ChatMessagesContainer } from "./components/ChatMessagesContainer/ChatMessagesContainer";
@@ -35,40 +34,51 @@ export default function Page() {
   }, [sessionId]);
 
   const { messages, sendMessage, status, error } = useChat({
+    id: sessionId ?? undefined,
     transport: transport ?? undefined,
   });
 
-  async function handleSubmit(e: React.FormEvent) {
+  async function createSession(e: React.FormEvent) {
     e.preventDefault();
-    if(!sessionId) {
-      const newSessionId = await postV2CreateSession({
+    if (isCreating) return;
+    setIsCreating(true);
+    try {
+      const response = await postV2CreateSession({
         body: JSON.stringify({}),
       });
-      if (newSessionId.status === 200 && newSessionId.data?.id) {
-        setSessionId(newSessionId.data.id);
+      if (response.status === 200 && response.data?.id) {
+        setSessionId(response.data.id);
       }
-      console.log("newSessionId", newSessionId);
-    }
-    if (input.trim()) {
-      sendMessage({ text: input });
-      setInput("");
+    } finally {
+      setIsCreating(false);
     }
   }
 
+  function handleMessageSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!input.trim() || !sessionId) return;
+    
+    sendMessage({ text: input });
+    setInput("");
+  }
+
 
   return (
     <div className="flex h-full">
       <ChatSidebar isCreating={isCreating} setIsCreating={setIsCreating} />
 
-      {
-        sessionId ? (
-          <ChatMessagesContainer messages={messages} status={status} error={error} handleSubmit={handleSubmit} input={input} setInput={setInput} />
-        ) : (
-          <EmptySession isCreating={isCreating} handleSubmit={handleSubmit} input={input} setInput={setInput} />
-        )
-      }
-
-      
+      {sessionId ? (
+        <ChatMessagesContainer
+          messages={messages}
+          status={status}
+          error={error}
+          handleSubmit={handleMessageSubmit}
+          input={input}
+          setInput={setInput}
+        />
+      ) : (
+        <EmptySession isCreating={isCreating} onCreateSession={createSession} />
+      )}
     </div>
   );
 }