Fully persist chat interaction across page refreshes

common/go/cookchatdb/chat.go

@@ -21,6 +21,9 @@ type ChatMessage struct {
 
 	// Content is the text content of the message.
 	Content string `firestore:"content"`
+
+	// CreatedAt is the timestamp when the message was created.
+	CreatedAt time.Time `firestore:"createdAt"`
 }
 
 type Chat struct {

frontend/api/proto/frontendapi/frontend.proto

@@ -508,6 +508,9 @@ message GetChatMessagesResponse {
 
   // The messages in the chat.
   repeated ChatMessage messages = 2;
+
+  // The plan ID if the chat is already completed.
+  string plan_id = 3;
 }
 
 service FrontendService {

frontend/client/messages/en.json

@@ -12,6 +12,9 @@
   "nav_plan": "Plan",
   "nav_bookmarks": "Bookmarks",
   "nav_cart": "Cart",
+
+  "add_plan_new_chat": "New Chat",
+  "add_plan_view_plan": "View Plan",
   "home_search_placeholder": "What do you want to cook?",
   "home_recommended_recipes": "Recommended Recipes",
   "home_popular_recipes": "Popular Recipes",
@@ -98,6 +101,7 @@
         "input val",
         "local formattedDate = val: datetime weekday=short month=short day=numeric"
       ],
+      "selectors": ["val"],
       "match": {
         "val=*": "{formattedDate}"
       }

frontend/client/messages/ja.json

@@ -12,6 +12,9 @@
   "nav_plan": "献立",
   "nav_bookmarks": "ブックマーク",
   "nav_cart": "カート",
+
+  "add_plan_new_chat": "新しい献立",
+  "add_plan_view_plan": "献立を見る",
   "home_search_placeholder": "つくりたい料理は？",
   "home_recommended_recipes": "おすすめのレシピ",
   "home_popular_recipes": "人気レシピ",
@@ -98,6 +101,7 @@
         "input val",
         "local formattedDate = val: datetime weekday=short month=short day=numeric"
       ],
+      "selectors": ["val"],
       "match": {
         "val=*": "{formattedDate}"
       }

frontend/client/src/pages/plans/add/ChatPlan.tsx

@@ -5,6 +5,7 @@ import {
   ChatMessage_Role,
   ChatMessageSchema,
   chatPlan,
+  type GetChatMessagesResponse,
   GetChatMessagesResponseSchema,
 } from "@cookchat/frontend-api";
 import { Button, Input, Link, TextField } from "@heroui/react";
@@ -72,29 +73,46 @@ const ChatBubble = forwardRef<HTMLDivElement, { message: ChatMessage }>(
   },
 );
 
-const loadingMessage = create(ChatMessageSchema, {
-  role: ChatMessage_Role.ASSISTANT,
-});
-
 export function ChatPlan() {
   const queries = useFrontendQueries();
   const getChatMessagesQuery = queries.getChatMessages();
   const queryClient = useQueryClient();
 
-  const { data: getChatMessagesRes, isPending } =
-    useQuery(getChatMessagesQuery);
+  const { data: getChatMessagesRes, isPending } = useQuery({
+    ...getChatMessagesQuery,
+    refetchInterval: (query) => {
+      const messages = query.state.data?.messages ?? [];
+      const last = messages[messages.length - 1];
+
+      return last?.role === ChatMessage_Role.ASSISTANT && !last?.content
+        ? 3000
+        : false;
+    },
+    refetchIntervalInBackground: true,
+  });
 
   const [loaded, setLoaded] = useState<boolean>(false);
   const [inputText, setInputText] = useState<string>("");
 
   const doChatPlan = useMutation(chatPlan, {
     onMutate: (req) => {
-      const messages = getChatMessagesRes?.messages ?? [];
-      messages.push(
-        create(ChatMessageSchema, {
-          role: ChatMessage_Role.USER,
-          content: req.message,
-        }),
+      queryClient.setQueryData<GetChatMessagesResponse>(
+        getChatMessagesQuery.queryKey,
+        (prev) =>
+          create(GetChatMessagesResponseSchema, {
+            chatId: req.newChat ? "" : (prev?.chatId ?? ""),
+            planId: "",
+            messages: [
+              ...(req.newChat ? [] : (prev?.messages ?? [])),
+              create(ChatMessageSchema, {
+                role: ChatMessage_Role.USER,
+                content: req.message,
+              }),
+              create(ChatMessageSchema, {
+                role: ChatMessage_Role.ASSISTANT,
+              }),
+            ],
+          }),
       );
     },
     onSuccess: (resp) => {
@@ -112,19 +130,27 @@ export function ChatPlan() {
     },
   });
 
+  const startNewChat = useCallback(() => {
+    doChatPlan.mutate({
+      newChat: true,
+      message: m.chat_greeting(),
+    });
+  }, [doChatPlan]);
+
   useEffect(() => {
     if (loaded || !getChatMessagesRes) {
       return;
     }
     setLoaded(true);
 
     if (getChatMessagesRes.messages.length === 0) {
-      doChatPlan.mutate({
-        chatId: getChatMessagesRes?.chatId,
-        message: m.chat_greeting(),
-      });
+      startNewChat();
     }
-  }, [doChatPlan, getChatMessagesRes, loaded]);
+  }, [startNewChat, getChatMessagesRes, loaded]);
+
+  const onNewChatClick = useCallback(() => {
+    startNewChat();
+  }, [startNewChat]);
 
   const onSendClick = useCallback(() => {
     const message = inputText;
@@ -150,14 +176,33 @@ export function ChatPlan() {
   }
 
   const messages = getChatMessagesRes.messages;
+  const assistantPending =
+    messages[messages.length - 1]?.role === ChatMessage_Role.ASSISTANT &&
+    !messages[messages.length - 1]?.content;
 
   return (
     <div>
       {messages.map((msg, i) => (
         // biome-ignore lint/suspicious/noArrayIndexKey: ordered list of items
         <ChatBubble key={i} message={msg} />
       ))}
-      {doChatPlan.isPending && <ChatBubble message={loadingMessage} />}
+      <div className="p-4 flex gap-4">
+        <Button
+          className="bg-yellow-400"
+          onPress={onNewChatClick}
+          isDisabled={doChatPlan.isPending || assistantPending}
+        >
+          {m.add_plan_new_chat()}
+        </Button>
+        {getChatMessagesRes.planId && (
+          <Link
+            href={`/plans/${getChatMessagesRes.planId}`}
+            className="decoration-0"
+          >
+            <Button className="bg-yellow-400">{m.add_plan_view_plan()}</Button>
+          </Link>
+        )}
+      </div>
       <div className="flex w-full min-w-0 gap-4 rounded-2xl border border-gray-200 bg-white p-6">
         <TextField
           value={inputText}
@@ -170,7 +215,9 @@ export function ChatPlan() {
           isIconOnly
           className="shrink-0 bg-yellow-400 text-white hover:bg-yellow-500"
           onPress={onSendClick}
-          isDisabled={doChatPlan.isPending}
+          isDisabled={
+            doChatPlan.isPending || assistantPending || inputText.trim() === ""
+          }
         >
           <FiSend />
         </Button>

frontend/server/internal/handler/chatplan/chatplan.go

@@ -110,6 +110,16 @@ func (h *Handler) ChatPlan(ctx context.Context, req *frontendapi.ChatPlanRequest
 		content[i] = genai.NewContentFromText(message.Content, role)
 	}
 
+	// Save so if user refreshes during the slow chat call we can continue in a pending state.
+	chat.Messages = append(chat.Messages, cookchatdb.ChatMessage{
+		Role:      cookchatdb.ChatRoleAssistant,
+		CreatedAt: time.Now(),
+	})
+	if _, err := chats.Doc(chat.ID).Set(ctx, chat); err != nil {
+		return nil, fmt.Errorf("chatplan: saving chat document: %w", err)
+	}
+	ctx = context.WithoutCancel(ctx)
+
 	res, err := backoff.Retry(ctx, func() (*genai.GenerateContentResponse, error) {
 		res, err := h.genAI.Models.GenerateContent(ctx, "gemini-3-flash-preview", content, &genai.GenerateContentConfig{
 			SystemInstruction: genai.NewContentFromText(llm.ChatPlanPrompt(strings.Join(recentRecipes, ", ")), genai.RoleModel),
@@ -128,6 +138,11 @@ func (h *Handler) ChatPlan(ctx context.Context, req *frontendapi.ChatPlanRequest
 		return res, nil
 	})
 	if err != nil {
+		// Back out with best-effort
+		chat.Messages = chat.Messages[:len(chat.Messages)-2]
+		if _, err := chats.Doc(chat.ID).Set(ctx, chat); err != nil {
+			return nil, fmt.Errorf("chatplan: saving chat document: %w", err)
+		}
 		return nil, err
 	}
 
@@ -183,6 +198,13 @@ func (h *Handler) ChatPlan(ctx context.Context, req *frontendapi.ChatPlanRequest
 			if chat.PlanID == "" {
 				chat.PlanID = planID
 			}
+			// TODO: Do something better
+			switch i18n.UserLanguage(ctx) {
+			case "ja":
+				chat.Messages[len(chat.Messages)-1].Content = "あなたの献立を作成しました。"
+			default:
+				chat.Messages[len(chat.Messages)-1].Content = "Created your meal plan."
+			}
 			if _, err := chats.Doc(chat.ID).Set(ctx, chat); err != nil {
 				return nil, fmt.Errorf("chatplan: saving chat plan ID: %w", err)
 			}
@@ -193,10 +215,7 @@ func (h *Handler) ChatPlan(ctx context.Context, req *frontendapi.ChatPlanRequest
 		}, nil
 	}
 
-	chat.Messages = append(chat.Messages, cookchatdb.ChatMessage{
-		Role:    cookchatdb.ChatRoleAssistant,
-		Content: resText,
-	})
+	chat.Messages[len(chat.Messages)-1].Content = resText
 
 	if _, err := chats.Doc(chat.ID).Set(ctx, chat); err != nil {
 		return nil, fmt.Errorf("chatplan: saving chat document: %w", err)

frontend/server/internal/handler/getchatmessages/getchatmessages.go

@@ -7,6 +7,7 @@ import (
 	"context"
 	"errors"
 	"fmt"
+	"time"
 
 	"cloud.google.com/go/firestore"
 	"github.com/curioswitch/go-usegcp/middleware/firebaseauth"
@@ -40,8 +41,12 @@ func (h *Handler) GetChatMessages(ctx context.Context, _ *frontendapi.GetChatMes
 			return nil, fmt.Errorf("chatplan: decoding last chat document: %w", err)
 		}
 	}
-	if chat.PlanID != "" {
-		return &frontendapi.GetChatMessagesResponse{}, nil
+	if len(chat.Messages) > 0 && chat.Messages[len(chat.Messages)-1].Role == cookchatdb.ChatRoleAssistant {
+		lastMessage := chat.Messages[len(chat.Messages)-1]
+		if lastMessage.Content == "" && lastMessage.CreatedAt.Add(5*time.Minute).Before(time.Now()) {
+			// Assume chat failed if it's been 5 minutes pending on the assistant.
+			return &frontendapi.GetChatMessagesResponse{}, nil
+		}
 	}
 
 	messages := make([]*frontendapi.ChatMessage, len(chat.Messages))
@@ -58,5 +63,6 @@ func (h *Handler) GetChatMessages(ctx context.Context, _ *frontendapi.GetChatMes
 	return &frontendapi.GetChatMessagesResponse{
 		ChatId:   chat.ID,
 		Messages: messages,
+		PlanId:   chat.PlanID,
 	}, nil
 }