Fix loading problems UX

replayio · Jan 17, 2025 · 56b07bd · 56b07bd
1 parent b051425
commit 56b07bd
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 31 deletions.
diff --git a/app/components/chat/LoadProblemButton.tsx b/app/components/chat/LoadProblemButton.tsx
@@ -3,7 +3,7 @@ import type { Message } from 'ai';
 import { toast } from 'react-toastify';
 import { createChatFromFolder, type FileArtifact } from '~/utils/folderImport';
 import { logStore } from '~/lib/stores/logs'; // Assuming logStore is imported from this location
-import { sendCommandDedicatedClient } from '~/lib/replay/ReplayProtocolClient';
+import { assert, sendCommandDedicatedClient } from '~/lib/replay/ReplayProtocolClient';
 import type { BoltProblem } from '~/components/sidebar/SaveProblem';
 import JSZip from 'jszip';
 
@@ -12,7 +12,7 @@ interface LoadProblemButtonProps {
   importChat?: (description: string, messages: Message[]) => Promise<void>;
 }
 
-export async function loadProblem(problemId: string) {
+export async function loadProblem(problemId: string, importChat: (description: string, messages: Message[]) => Promise<void>) {
   let problem: BoltProblem | null = null;
   try {
     const rv = await sendCommandDedicatedClient({
@@ -23,7 +23,7 @@ export async function loadProblem(problemId: string) {
       },
     });
     console.log("FetchProblemRval", rv);
-    problem = (rv as any).rval.problem;
+    problem = (rv as { rval: BoltProblem }).rval;
   } catch (error) {
     console.error("Error fetching problem", error);
     toast.error("Failed to fetch problem");
@@ -33,10 +33,11 @@ export async function loadProblem(problemId: string) {
     return;
   }
 
-  console.log("Problem", problem);
+  const problemContents = problem.prompt.content;
+  const problemTitle = problem.title;
 
   const zip = new JSZip();
-  await zip.loadAsync(problem.prompt.content, { base64: true });
+  await zip.loadAsync(problemContents, { base64: true });
 
   const fileArtifacts: FileArtifact[] = [];
   for (const [key, object] of Object.entries(zip.files)) {
@@ -49,14 +50,13 @@ export async function loadProblem(problemId: string) {
 
   try {
     const messages = await createChatFromFolder(fileArtifacts, [], "problem");
+    await importChat(`Problem: ${problemTitle}`, [...messages]);
 
     logStore.logSystem('Problem loaded successfully', {
       problemId,
       textFileCount: fileArtifacts.length,
     });
     toast.success('Problem loaded successfully');
-
-    return messages;
   } catch (error) {
     logStore.logError('Failed to load problem', error);
     console.error('Failed to load problem:', error);
@@ -74,12 +74,8 @@ export const LoadProblemButton: React.FC<LoadProblemButtonProps> = ({ className,
 
     const problemId = (document.getElementById('problem-input') as HTMLInputElement)?.value;
 
-    const messages = await loadProblem(problemId);
-
-    if (importChat) {
-      await importChat("Imported problem", messages ?? []);
-    }
-
+    assert(importChat, "importChat is required");
+    await loadProblem(problemId, importChat);
     setIsLoading(false);
   };
 

diff --git a/app/lib/persistence/useChatHistory.ts b/app/lib/persistence/useChatHistory.ts
@@ -40,6 +40,24 @@ export function useChatHistory() {
   const [ready, setReady] = useState<boolean>(false);
   const [urlId, setUrlId] = useState<string | undefined>();
 
+  const importChat = async (description: string, messages: Message[]) => {
+    if (!db) {
+      return;
+    }
+
+    try {
+      const newId = await createChatFromMessages(db, description, messages);
+      window.location.href = `/chat/${newId}`;
+      toast.success('Chat imported successfully');
+    } catch (error) {
+      if (error instanceof Error) {
+        toast.error('Failed to import chat: ' + error.message);
+      } else {
+        toast.error('Failed to import chat');
+      }
+    }
+  };
+
   useEffect(() => {
     if (!db) {
       setReady(true);
@@ -77,7 +95,7 @@ export function useChatHistory() {
           toast.error(error.message);
         });
     } else if (problemId) {
-      loadProblem(problemId).then(() => setReady(true));
+      loadProblem(problemId, importChat).then(() => setReady(true));
     }
   }, []);
 
@@ -128,23 +146,7 @@ export function useChatHistory() {
         console.log(error);
       }
     },
-    importChat: async (description: string, messages: Message[]) => {
-      if (!db) {
-        return;
-      }
-
-      try {
-        const newId = await createChatFromMessages(db, description, messages);
-        window.location.href = `/chat/${newId}`;
-        toast.success('Chat imported successfully');
-      } catch (error) {
-        if (error instanceof Error) {
-          toast.error('Failed to import chat: ' + error.message);
-        } else {
-          toast.error('Failed to import chat');
-        }
-      }
-    },
+    importChat,
     exportChat: async (id = urlId) => {
       if (!db || !id) {
         return;