diff --git a/2_frontend/src/features/snap/components/ThinkingBubble.tsx b/2_frontend/src/features/snap/components/ThinkingBubble.tsx new file mode 100644 index 0000000..5f86559 --- /dev/null +++ b/2_frontend/src/features/snap/components/ThinkingBubble.tsx @@ -0,0 +1,21 @@ +import type { ReactNode } from "react" + +/** 답변 자리(첫 토큰 전·재진입 대기·세션 생성 중). Message 의 assistant 모양과 똑같이 — + * AI 배지 + CODEASSIST 라벨, 본문은 상자 없이. 안에 시머 텍스트나 스트리밍 본문을 넣는다. */ +export function ThinkingBubble({ children }: { children?: ReactNode }) { + return ( +
+
+ + AI + + + CODEASSIST + +
+
+ {children ?? 생각하는 중…} +
+
+ ) +} diff --git a/2_frontend/src/features/snap/pages/NewChatPage.tsx b/2_frontend/src/features/snap/pages/NewChatPage.tsx index fe270a9..e2e9368 100644 --- a/2_frontend/src/features/snap/pages/NewChatPage.tsx +++ b/2_frontend/src/features/snap/pages/NewChatPage.tsx @@ -8,6 +8,7 @@ import { useCreateSession } from "../api/snap.api" import { Hero } from "../components/Hero" import { Composer } from "../components/Composer" import { Message } from "../components/Message" +import { ThinkingBubble } from "../components/ThinkingBubble" import { useEscapeKey } from "../hooks/useEscapeKey" import type { SnapImageInput } from "../contract/types" @@ -58,14 +59,7 @@ export default function NewChatPage() { // 세션 만드는 동안 — SessionChatPage 첫 화면과 같은 모양(내 말풍선 + 생각 중)
-
- - CODEASSIST - -
- 생각하는 중… -
-
+
)} - - CODEASSIST - -
+
+ {m.content === "" ? ( // 첫 토큰 오기 전 빈 시간 메움 — 시머 텍스트로 "생각 중" 신호 생각하는 중… @@ -180,7 +178,7 @@ export default function SessionChatPage() { onRevealEnd={() => useSnapChatStore.getState().setRevealing(false)} /> )} -
+
) } @@ -207,16 +205,7 @@ export default function SessionChatPage() { /> ) })} - {generatingRemotely && ( -
- - CODEASSIST - -
- 생각하는 중… -
-
- )} + {generatingRemotely && }