From c4f722cbfd2ffffb2cac6e9256bf47729db3e3d9 Mon Sep 17 00:00:00 2001
From: Zamil Majdy <zamil.majdy@agpt.co>
Date: Fri, 30 Jan 2026 09:30:00 -0600
Subject: [PATCH] fix: persist clarification widget answers in localStorage

Answers are now saved to localStorage while user fills the form
and restored on page refresh. Storage is cleared after submission.
---
 .../components/ChatMessage/ChatMessage.tsx    |  1 +
 .../ClarificationQuestionsWidget.tsx          | 52 +++++++++++++++++--
 2 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatMessage/ChatMessage.tsx b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatMessage/ChatMessage.tsx
index c922d0da76..89f1425bda 100644
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatMessage/ChatMessage.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatMessage/ChatMessage.tsx
@@ -160,6 +160,7 @@ export function ChatMessage({
       <ClarificationQuestionsWidget
         questions={message.questions}
         message={message.message}
+        sessionId={message.sessionId}
         onSubmitAnswers={handleClarificationAnswers}
         className={className}
       />
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/components/ClarificationQuestionsWidget/ClarificationQuestionsWidget.tsx b/autogpt_platform/frontend/src/components/contextual/Chat/components/ClarificationQuestionsWidget/ClarificationQuestionsWidget.tsx
index a3bd17dd3f..fe8931fe0b 100644
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ClarificationQuestionsWidget/ClarificationQuestionsWidget.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ClarificationQuestionsWidget/ClarificationQuestionsWidget.tsx
@@ -6,7 +6,7 @@ import { Input } from "@/components/atoms/Input/Input";
 import { Text } from "@/components/atoms/Text/Text";
 import { cn } from "@/lib/utils";
 import { CheckCircleIcon, QuestionIcon } from "@phosphor-icons/react";
-import { useState } from "react";
+import { useState, useEffect, useCallback } from "react";
 
 export interface ClarifyingQuestion {
   question: string;
@@ -17,14 +17,21 @@ export interface ClarifyingQuestion {
 interface Props {
   questions: ClarifyingQuestion[];
   message: string;
+  sessionId?: string;
   onSubmitAnswers: (answers: Record<string, string>) => void;
   onCancel?: () => void;
   className?: string;
 }
 
+function getStorageKey(sessionId?: string): string | null {
+  if (!sessionId) return null;
+  return `clarification_answers_${sessionId}`;
+}
+
 export function ClarificationQuestionsWidget({
   questions,
   message,
+  sessionId,
   onSubmitAnswers,
   onCancel,
   className,
@@ -32,18 +39,55 @@ export function ClarificationQuestionsWidget({
   const [answers, setAnswers] = useState<Record<string, string>>({});
   const [isSubmitted, setIsSubmitted] = useState(false);
 
-  function handleAnswerChange(keyword: string, value: string) {
+  useEffect(() => {
+    const storageKey = getStorageKey(sessionId);
+    if (!storageKey) return;
+
+    try {
+      const saved = localStorage.getItem(storageKey);
+      if (saved) {
+        const parsed = JSON.parse(saved) as Record<string, string>;
+        setAnswers(parsed);
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  }, [sessionId]);
+
+  useEffect(() => {
+    const storageKey = getStorageKey(sessionId);
+    if (!storageKey) return;
+
+    const hasAnswers = Object.values(answers).some((v) => v.trim());
+    if (hasAnswers) {
+      try {
+        localStorage.setItem(storageKey, JSON.stringify(answers));
+      } catch {
+        // Ignore storage errors
+      }
+    }
+  }, [answers, sessionId]);
+
+  const handleAnswerChange = useCallback((keyword: string, value: string) => {
     setAnswers((prev) => ({ ...prev, [keyword]: value }));
-  }
+  }, []);
 
   function handleSubmit() {
-    // Check if all questions are answered
     const allAnswered = questions.every((q) => answers[q.keyword]?.trim());
     if (!allAnswered) {
       return;
     }
     setIsSubmitted(true);
     onSubmitAnswers(answers);
+
+    const storageKey = getStorageKey(sessionId);
+    if (storageKey) {
+      try {
+        localStorage.removeItem(storageKey);
+      } catch {
+        // Ignore storage errors
+      }
+    }
   }
 
   const allAnswered = questions.every((q) => answers[q.keyword]?.trim());