feat: 변경된 채팅 시작 로직 반영

Author: gs0428

apps/www/src/app/api/chat/route.ts

@@ -7,16 +7,14 @@ export async function POST(req: NextRequest) {
     const body = await req.json();
     const { userId, message, session_id } = body;
 
+    const requestBody = session_id ? { userId, message, session_id } : { userId, message };
+
     const response = await fetch(`${baseUrl}/chat/stream`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({
-        userId,
-        message,
-        session_id,
-      }),
+      body: JSON.stringify(requestBody),
     });
 
     if (!response.ok) {

apps/www/src/components/bookmarks/graph/chat-bot/chat.tsx

@@ -4,7 +4,6 @@ import { memo, useCallback, useEffect, useRef, useState } from "react";
 
 import Icon from "@/components/common/icon";
 import { useUserInfo } from "@/hooks/use-user-info";
-import { useCreateChatSession } from "@/lib/tanstack/mutation/chat";
 import { useGetChatMessages } from "@/lib/tanstack/query/chat";
 import { cn } from "@repo/ui";
 
@@ -19,6 +18,7 @@ interface Message {
 interface ChatProps {
   sessionId: string;
   onSessionCreated: (newSessionId: string) => void;
+  isNewChat: boolean;
 }
 
 const AssistantMessage = memo(({ content }: { content: string }) => {
@@ -34,20 +34,27 @@ const AssistantMessage = memo(({ content }: { content: string }) => {
 });
 AssistantMessage.displayName = "AssistantMessage";
 
-export default function Chat({ sessionId, onSessionCreated }: ChatProps) {
+export default function Chat({ sessionId, onSessionCreated, isNewChat }: ChatProps) {
   const { userInfo, isLoading: isUserLoading } = useUserInfo();
-  const { data: chatHistory, isLoading: isHistoryLoading } = useGetChatMessages(sessionId);
-  const { mutateAsync: createChatSession } = useCreateChatSession();
+  const { data: chatHistory, isLoading: isHistoryLoading } = useGetChatMessages({
+    sessionId,
+    isNewChat,
+  });
   const [messages, setMessages] = useState<Message[]>([]);
   const [streamingContent, setStreamingContent] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const messagesEndRef = useRef<HTMLDivElement>(null);
-  const formRef = useRef<HTMLFormElement>(null);
+  const chatFormRef = useRef<HTMLFormElement>(null);
+  const startChatFormRef = useRef<HTMLFormElement>(null);
+
+  const chatButtonDisabled = isUserLoading || isLoading;
 
   useEffect(() => {
-    setMessages([]);
-    setStreamingContent(null);
-  }, [sessionId]);
+    if (!isNewChat) {
+      setMessages([]);
+      setStreamingContent(null);
+    }
+  }, [sessionId, isNewChat]);
 
   useEffect(() => {
     if (chatHistory?.result && chatHistory.result.length > 0 && messages.length === 0) {
@@ -86,6 +93,9 @@ export default function Chat({ sessionId, onSessionCreated }: ChatProps) {
             const data = line.split("data: ")[1];
             if (data) {
               const parsed = JSON.parse(data);
+              if (typeof parsed.data === "object" && "session_id" in parsed.data) {
+                onSessionCreated(parsed.data.session_id);
+              }
               if (parsed.type === "chunk" && parsed.data) {
                 botResponse += parsed.data;
                 setStreamingContent(botResponse);
@@ -99,93 +109,91 @@ export default function Chat({ sessionId, onSessionCreated }: ChatProps) {
     }
   }, []);
 
-  const onSubmitQuestion = useCallback(
-    async (e: React.FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
-      const formData = new FormData(e.target as HTMLFormElement);
-      const question = formData.get("question") as string;
-      if (question.trim() === "" || isLoading || isUserLoading || !userInfo) return;
+  const onSubmitQuestion = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
+    const question = formData.get("question") as string;
+    if (question.trim() === "" || chatButtonDisabled || !userInfo) return;
 
-      e.currentTarget.reset();
-      (e.currentTarget.querySelector("textarea") as HTMLTextAreaElement).style.height = "auto";
+    chatFormRef.current?.reset();
+    (e.currentTarget.querySelector("textarea") as HTMLTextAreaElement).style.height = "auto";
 
-      setMessages((prev) => [...prev, { role: "user", content: question }]);
-      setIsLoading(true);
+    setMessages((prev) => [...prev, { role: "user", content: question }]);
+    setIsLoading(true);
 
-      try {
-        const response = await fetch("/api/chat", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ userId: userInfo.id, message: question, session_id: sessionId }),
-        });
-        await onStreamResponse(response);
-      } catch (error) {
-        console.error("Failed to send message:", error);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [isLoading, isUserLoading, userInfo, sessionId, onStreamResponse]
-  );
+    try {
+      const response = await fetch("/api/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ userId: userInfo.id, message: question, session_id: sessionId }),
+      });
+      await onStreamResponse(response);
+    } catch (error) {
+      console.error("Failed to send message:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
-  const onCreateSessionAndSendMessage = useCallback(
-    async (e: React.FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
-      const formData = new FormData(e.target as HTMLFormElement);
-      const title = formData.get("title") as string;
-      const question = formData.get("question") as string;
-      if (!title.trim() || !question.trim() || isLoading || isUserLoading || !userInfo) return;
+  const onCreateSessionAndSendMessage = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
+    const question = formData.get("question") as string;
+    if (!question.trim() || chatButtonDisabled || !userInfo) return;
 
-      setIsLoading(true);
-      try {
-        const newSession = await createChatSession({ title });
-        const newSessionId = newSession.result.sessionId;
-        onSessionCreated(newSessionId);
-        setMessages([{ role: "user", content: question }]);
+    setMessages([{ role: "user", content: question }]);
+    setIsLoading(true);
 
-        const response = await fetch("/api/chat", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            userId: userInfo.id,
-            message: question,
-            session_id: newSessionId,
-          }),
-        });
-        await onStreamResponse(response);
-      } catch (error) {
-        console.error("Failed to create chat session or send message:", error);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [isLoading, isUserLoading, userInfo, createChatSession, onSessionCreated, onStreamResponse]
-  );
+    try {
+      const response = await fetch("/api/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          userId: userInfo.id,
+          message: question,
+        }),
+      });
+      startChatFormRef.current?.reset();
+      await onStreamResponse(response);
+    } catch (error) {
+      console.error("Failed to create chat session or send message:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   if (sessionId === "") {
     return (
-      <div className="flex w-80 max-w-lg flex-col justify-between rounded-lg border bg-white p-4">
+      <div className="flex h-full w-full flex-col justify-between rounded-lg border bg-white p-4">
         <h3 className="mb-4 text-lg font-semibold">새로운 대화 시작하기</h3>
-        <form onSubmit={onCreateSessionAndSendMessage} className="flex flex-col gap-4">
-          <input
-            name="title"
-            placeholder="대화 주제를 입력하세요."
-            className="rounded-md border p-2 outline-none"
-            disabled={isUserLoading}
-            required
-          />
+        <form
+          ref={startChatFormRef}
+          onSubmit={onCreateSessionAndSendMessage}
+          className="flex flex-col gap-4"
+        >
           <textarea
             name="question"
-            placeholder="첫 번째 질문을 입력하세요."
+            placeholder="질문을 입력하세요."
             className="rounded-md border p-2 outline-none"
             rows={5}
             disabled={isUserLoading}
             required
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                if (!chatButtonDisabled && startChatFormRef.current) {
+                  startChatFormRef.current.requestSubmit();
+                }
+              }
+            }}
           />
           <button
             type="submit"
-            className="flex items-center justify-center rounded-md bg-black p-2 text-white disabled:bg-gray-400"
-            disabled={isUserLoading || isLoading}
+            className={cn(
+              "flex items-center justify-center rounded-md bg-black p-2 text-white disabled:bg-gray-400",
+              chatButtonDisabled && "animate-pulse"
+            )}
+            disabled={chatButtonDisabled}
           >
             {isLoading ? "생각 중..." : "질문하고 대화 시작"}
           </button>
@@ -196,14 +204,14 @@ export default function Chat({ sessionId, onSessionCreated }: ChatProps) {
 
   if (isHistoryLoading) {
     return (
-      <div className="flex h-full w-80 max-w-lg flex-col items-center justify-center rounded-lg border bg-white">
+      <div className="flex h-full w-full flex-col items-center justify-center rounded-lg border bg-white">
         <p className="animate-pulse">대화 기록을 불러오는 중...</p>
       </div>
     );
   }
 
   return (
-    <div className="flex h-full w-80 max-w-lg flex-col justify-between rounded-lg border bg-white">
+    <div className="flex h-full w-full flex-col justify-between rounded-lg border bg-white">
       <div className="flex-1 space-y-4 overflow-y-auto p-4">
         {messages.map((message, index) => (
           <div
@@ -238,7 +246,7 @@ export default function Chat({ sessionId, onSessionCreated }: ChatProps) {
         <div ref={messagesEndRef} />
       </div>
       <form
-        ref={formRef}
+        ref={chatFormRef}
         onSubmit={onSubmitQuestion}
         className="flex items-center gap-2 border-t p-2"
       >
@@ -247,7 +255,7 @@ export default function Chat({ sessionId, onSessionCreated }: ChatProps) {
           rows={1}
           className="max-h-24 flex-1 resize-none overflow-y-auto bg-transparent p-1 outline-none"
           placeholder="챗봇에게 질문을 적어주세요."
-          disabled={isLoading || isUserLoading}
+          disabled={chatButtonDisabled}
           onInput={(e) => {
             const target = e.currentTarget;
             target.style.height = "auto";
@@ -256,16 +264,16 @@ export default function Chat({ sessionId, onSessionCreated }: ChatProps) {
           onKeyDown={(e) => {
             if (e.key === "Enter" && !e.shiftKey) {
               e.preventDefault();
-              if (!isLoading && formRef.current) {
-                formRef.current.requestSubmit();
+              if (!chatButtonDisabled && chatFormRef.current) {
+                chatFormRef.current.requestSubmit();
               }
             }
           }}
         />
         <button
           type="submit"
           className="rounded-full bg-black p-1 disabled:bg-gray-400"
-          disabled={isLoading || isUserLoading}
+          disabled={chatButtonDisabled}
         >
           <Icon.send fill="#fff" size={16} />
         </button>