Remove first message and add loading indicator

curioswitch · Nov 20, 2024 · 7af56e0 · 7af56e0
1 parent 06999e1
commit 7af56e0
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 8 deletions.
diff --git a/client/src/components/ChatMessage.tsx b/client/src/components/ChatMessage.tsx
@@ -47,6 +47,16 @@ function CEOSnippet({
   );
 }
 
+function Loading() {
+  return (
+    <div className="flex space-x-1 items-center">
+      <div className="h-2 w-2 bg-black rounded-full animate-bounce [animation-delay:-0.3s]" />
+      <div className="h-2 w-2 bg-black rounded-full animate-bounce [animation-delay:-0.15s]" />
+      <div className="h-2 w-2 bg-black rounded-full animate-bounce" />
+    </div>
+  );
+}
+
 export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
   function ChatMessage({ userGender: gender, message }, ref) {
     const onCeoClick = useCallback((ceo: CEODetails) => {
@@ -76,7 +86,7 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
             }),
           )}
         >
-          {message.message}
+          {message.message || <Loading />}
           {message.ceoDetails.length > 0 && (
             <div className="flex flex-col gap-5">
               {message.ceoDetails.map((ceo) => (

diff --git a/client/src/pages/chats/@id/+Page.tsx b/client/src/pages/chats/@id/+Page.tsx
@@ -1,4 +1,5 @@
 import {
+  ChatMessage as APIChatMessage,
   Gender,
   GetChatMessagesResponse,
   sendMessage,
@@ -30,7 +31,11 @@ export default function Page() {
     onSuccess: (resp) => {
       queryClient.setQueryData(getMessagesQuery.queryKey, (prev) => {
         const obj = prev ?? new GetChatMessagesResponse();
-        obj.messages = [...obj.messages, ...resp.messages];
+        // Remove placeholder messages before processing response.
+        console.log(obj.messages);
+        const messages = obj.messages.slice(0, -2);
+        console.log(messages);
+        obj.messages = [...messages, ...resp.messages];
         return obj;
       });
     },
@@ -39,9 +44,26 @@ export default function Page() {
   const onSelectChoice = useCallback(
     (e: PressEvent) => {
       const choice = (e.target as HTMLElement).dataset.choice;
+      queryClient.setQueryData(getMessagesQuery.queryKey, (prev) => {
+        const obj = prev ?? new GetChatMessagesResponse();
+        obj.messages = [
+          ...obj.messages,
+          new APIChatMessage({
+            id: "temp1",
+            message: choice,
+            isUser: true,
+          }),
+          new APIChatMessage({
+            id: "temp2",
+            message: "",
+            isUser: false,
+          }),
+        ];
+        return obj;
+      });
       doSendMessage.mutate({ chatId, message: choice });
     },
-    [chatId, doSendMessage],
+    [chatId, doSendMessage, queryClient, getMessagesQuery.queryKey],
   );
 
   const lastMessageRef = useRef<HTMLDivElement>(null);
@@ -60,8 +82,8 @@ export default function Page() {
     throw new Error("Failed to load messages.");
   }
 
-  if (gender === Gender.UNSPECIFIED && messagesRes.messages.length >= 3) {
-    switch (messagesRes.messages[2].message) {
+  if (gender === Gender.UNSPECIFIED && messagesRes.messages.length >= 2) {
+    switch (messagesRes.messages[1].message) {
       case "男性":
         setGender(Gender.MALE);
         break;
@@ -81,7 +103,7 @@ export default function Page() {
 
   return (
     <div className="col-span-4 md:col-span-8 lg:col-span-12">
-      <div className="pt-10 md:mx-10 bg-gray-200 min-h-screen">
+      <div className="pt-20 pb-2 md:mx-10 bg-gray-200 min-h-screen">
         {messagesRes.messages.map((msg, i) => (
           <ChatMessage
             key={msg.id}

diff --git a/server/internal/handler/handler.go b/server/internal/handler/handler.go
@@ -125,8 +125,8 @@ func (h *Handler) GetChatMessages(ctx context.Context, req *frontendapi.GetChatM
 		return nil, fmt.Errorf("handler: getting messages: %w", err)
 	}
 
-	messages := make([]*frontendapi.ChatMessage, len(messageDocs))
-	for i, doc := range messageDocs {
+	messages := make([]*frontendapi.ChatMessage, len(messageDocs)-1)
+	for i, doc := range messageDocs[1:] {
 		var msg db.ChatMessage
 		if err := doc.DataTo(&msg); err != nil {
 			return nil, fmt.Errorf("handler: decoding message: %w", err)