UniqAI/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy synced 2025-06-26 18:26:38 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[PRO-1083][PRO-1078] fix problem loading + fix problem saving + merge problem and repro submissions (#84)

Browse Source
This commit is contained in:
Domi 2025-03-27 22:45:45 +08:00 committed by GitHub
commit ac2dac6ef4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 117 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/chat/LoadProblemButton.tsx
View File

@ -5,7 +5,6 @@ import { logStore } from '~/lib/stores/logs';
import { assert } from '~/lib/replay/ReplayProtocolClient';
import type { BoltProblem } from '~/lib/replay/Problems';
import { getProblem } from '~/lib/replay/Problems';
import { createRepositoryImported } from '~/lib/replay/Repository';
import type { Message } from '~/lib/persistence/message';
interface LoadProblemButtonProps {
@ -46,10 +45,9 @@ export async function loadProblem(
setLastLoadedProblem(problem);
const { repositoryContents, title: problemTitle } = problem;
const { repositoryId, title: problemTitle } = problem;
try {
const repositoryId = await createRepositoryImported(`ImportProblem:${problemId}`, repositoryContents);
const messages = createChatFromFolder('problem', repositoryId);
await importChat(`Problem: ${problemTitle}`, [...messages]);

4
app/components/sidebar/Menu.client.tsx
View File

@ -12,7 +12,6 @@ import { HistoryItem } from './HistoryItem';
import { binDates } from './date-binning';
import { useSearchFilter } from '~/lib/hooks/useSearchFilter';
import { SaveProblem } from './SaveProblem';
import { SaveReproductionModal } from './SaveReproduction';
import { useAdminStatus } from '~/lib/stores/user';
const menuVariants = {
@ -140,8 +139,7 @@ export const Menu = () => {
>
Problems
</a>
<SaveProblem />
{isAdmin && <SaveReproductionModal />}
{isAdmin && <SaveProblem />}
<a
href="/about"
className="flex gap-2 bg-bolt-elements-sidebar-buttonBackgroundDefault text-bolt-elements-sidebar-buttonText hover:bg-bolt-elements-sidebar-buttonBackgroundHover rounded-md p-2 transition-theme"

137
app/components/sidebar/SaveProblem.tsx
View File

@ -3,15 +3,103 @@ import ReactModal from 'react-modal';
import { useState, useEffect } from 'react';
import { workbenchStore } from '~/lib/stores/workbench';
import { submitProblem, BoltProblemStatus } from '~/lib/replay/Problems';
import type { BoltProblemInput } from '~/lib/replay/Problems';
import { getRepositoryContents } from '~/lib/replay/Repository';
import type { BoltProblemInput, BoltProblemSolution } from '~/lib/replay/Problems';
import { shouldUseSupabase, getCurrentUser } from '~/lib/supabase/client';
import { authModalStore } from '~/lib/stores/authModal';
import { authStatusStore } from '~/lib/stores/auth';
import { useStore } from '@nanostores/react';
import {
getLastUserSimulationData,
getLastSimulationChatMessages,
isSimulatingOrHasFinished,
getLastSimulationChatReferences,
} from '~/lib/replay/SimulationPrompt';
ReactModal.setAppElement('#root');
// External functions for problem storage
async function saveProblem(
title: string,
description: string,
username: string,
reproData: any,
): Promise<string | null> {
if (!title) {
toast.error('Please fill in title field');
return null;
}
if (!shouldUseSupabase() && !username) {
toast.error('Please enter a username');
return null;
}
toast.info('Submitting problem...');
const repositoryId = workbenchStore.repositoryId.get();
if (!repositoryId) {
toast.error('No repository ID found');
return null;
}
const solution: BoltProblemSolution = {
evaluator: undefined,
...reproData,
};
const problem: BoltProblemInput = {
version: 2,
title,
description,
username: shouldUseSupabase() ? (undefined as any) : username,
user_id: shouldUseSupabase() ? (await getCurrentUser())?.id || '' : undefined,
repositoryId,
status: BoltProblemStatus.Pending,
solution,
};
const problemId = await submitProblem(problem);
if (problemId) {
localStorage.setItem('loadedProblemId', problemId);
}
return problemId;
}
function getReproductionData(): any | null {
if (!isSimulatingOrHasFinished()) {
toast.error('No simulation data found (neither in progress nor finished)');
return null;
}
try {
const simulationData = getLastUserSimulationData();
if (!simulationData) {
toast.error('No simulation data found');
return null;
}
const messages = getLastSimulationChatMessages();
const references = getLastSimulationChatReferences();
if (!messages) {
toast.error('No user prompt found');
return null;
}
return { simulationData, messages, references };
} catch (error: any) {
console.error('Error getting reproduction data', error?.stack || error);
toast.error(`Error getting reproduction data: ${error?.message}`);
return null;
}
}
// Component for saving the current chat as a new problem.
export function SaveProblem() {
@ -22,6 +110,7 @@ export function SaveProblem() {
username: '',
});
const [problemId, setProblemId] = useState<string | null>(null);
const [reproData, setReproData] = useState<any>(null);
const isLoggedIn = useStore(authStatusStore.isLoggedIn);
const username = useStore(authStatusStore.username);
@ -35,6 +124,14 @@ export function SaveProblem() {
const handleSaveProblem = (e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
const currentReproData = getReproductionData();
if (!currentReproData) {
return;
}
setReproData(currentReproData);
setIsModalOpen(true);
setProblemId(null);
};
@ -53,42 +150,14 @@ export function SaveProblem() {
};
const handleSubmitProblem = async () => {
if (!formData.title) {
toast.error('Please fill in title field');
if (!reproData) {
return;
}
if (!shouldUseSupabase() && !formData.username) {
toast.error('Please enter a username');
return;
}
const newProblemId = await saveProblem(formData.title, formData.description, formData.username, reproData);
toast.info('Submitting problem...');
const repositoryId = workbenchStore.repositoryId.get();
if (!repositoryId) {
toast.error('No repository ID found');
return;
}
const repositoryContents = await getRepositoryContents(repositoryId);
const problem: BoltProblemInput = {
version: 2,
title: formData.title,
description: formData.description,
username: shouldUseSupabase() ? (undefined as any) : formData.username,
user_id: shouldUseSupabase() ? (await getCurrentUser())?.id || '' : undefined,
repositoryContents,
status: BoltProblemStatus.Pending,
};
const problemId = await submitProblem(problem);
if (problemId) {
setProblemId(problemId);
localStorage.setItem('loadedProblemId', problemId);
if (newProblemId) {
setProblemId(newProblemId);
}
};

164
app/components/sidebar/SaveReproduction.tsx
View File

@ -1,164 +0,0 @@
import { toast } from 'react-toastify';
import ReactModal from 'react-modal';
import { useState } from 'react';
import { updateProblem } from '~/lib/replay/Problems';
import type { BoltProblem, BoltProblemInput, BoltProblemSolution } from '~/lib/replay/Problems';
import { getOrFetchLastLoadedProblem } from '~/components/chat/LoadProblemButton';
import {
getLastUserSimulationData,
getLastSimulationChatMessages,
isSimulatingOrHasFinished,
getLastSimulationChatReferences,
} from '~/lib/replay/SimulationPrompt';
ReactModal.setAppElement('#root');
/*
* Component for saving input simulation and prompt information for
* the problem the current chat was loaded from.
*/
export function SaveReproductionModal() {
const [isModalOpen, setIsModalOpen] = useState(false);
const [savedReproduction, setSavedReproduction] = useState<boolean>(false);
const [problem, setProblem] = useState<BoltProblem | null>(null);
const handleSaveReproduction = async (e: React.MouseEvent<HTMLAnchorElement>) => {
e.preventDefault();
const loadId = toast.loading('Loading problem...');
try {
const lastProblem = await getOrFetchLastLoadedProblem();
if (!lastProblem) {
toast.error('No problem loaded');
return;
}
setProblem(lastProblem);
} finally {
toast.dismiss(loadId);
}
setSavedReproduction(false);
setIsModalOpen(true);
};
const handleSubmitReproduction = async () => {
if (!problem) {
toast.error('No problem loaded');
return;
}
if (!isSimulatingOrHasFinished()) {
toast.error('No simulation data found (neither in progress nor finished)');
return;
}
try {
toast.info('Submitting reproduction...');
console.log('SubmitReproduction');
const simulationData = getLastUserSimulationData();
if (!simulationData) {
toast.error('No simulation data found');
return;
}
const messages = getLastSimulationChatMessages();
const references = getLastSimulationChatReferences();
if (!messages) {
toast.error('No user prompt found');
return;
}
const reproData = { simulationData, messages, references };
/**
* TODO: Split `solution` into `reproData` and `evaluator`.
*/
const solution: BoltProblemSolution = {
evaluator: problem.solution?.evaluator,
...reproData,
/*
* TODO: Also store recordingId for easier debugging.
* recordingId,
*/
};
const problemUpdatePacket: BoltProblemInput = {
...problem,
version: 2,
solution,
};
await updateProblem(problem.problemId, problemUpdatePacket);
setSavedReproduction(true);
} catch (error: any) {
console.error('Error saving reproduction', error?.stack || error);
toast.error(`Error saving reproduction: ${error?.message}`);
}
};
return (
<>
<a
href="#"
className="flex gap-2 bg-bolt-elements-sidebar-buttonBackgroundDefault text-bolt-elements-sidebar-buttonText hover:bg-bolt-elements-sidebar-buttonBackgroundHover rounded-md p-2 transition-theme"
onClick={handleSaveReproduction}
>
Save Reproduction
</a>
<ReactModal
isOpen={isModalOpen}
onRequestClose={() => setIsModalOpen(false)}
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-6 max-w-2xl w-full z-50"
overlayClassName="fixed inset-0 bg-black bg-opacity-50 z-40"
>
{savedReproduction && (
<>
<div className="text-center mb-2">Reproduction Saved</div>
<div className="text-center">
<div className="flex justify-center gap-2 mt-4">
<button
onClick={() => setIsModalOpen(false)}
className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400"
>
Close
</button>
</div>
</div>
</>
)}
{!savedReproduction && (
<>
<div className="text-center">
Save reproduction data (prompt, user annotations + simulationData) for the currently loaded problem:{' '}
{problem?.problemId}
</div>
<div style={{ marginTop: '10px' }}>
<div className="flex justify-center gap-2 mt-4">
<button
onClick={handleSubmitReproduction}
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
>
Submit
</button>
<button
onClick={() => setIsModalOpen(false)}
className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400"
>
Cancel
</button>
</div>
</div>
</>
)}
</ReactModal>
</>
);
}

10
app/lib/replay/Problems.ts
View File

@ -1,7 +1,7 @@
// Accessors for the API to access saved problems.
import { toast } from 'react-toastify';
import { sendCommandDedicatedClient } from './ReplayProtocolClient';
import { assert, sendCommandDedicatedClient } from './ReplayProtocolClient';
import type { Message } from '~/lib/persistence/message';
import Cookies from 'js-cookie';
import { shouldUseSupabase } from '~/lib/supabase/client';
@ -61,7 +61,7 @@ export interface BoltProblemDescription {
export interface BoltProblem extends BoltProblemDescription {
username?: string;
user_id?: string;
repositoryContents: string;
repositoryId: string;
comments?: BoltProblemComment[];
solution?: BoltProblemSolution;
}
@ -133,11 +133,7 @@ export async function getProblem(problemId: string): Promise<BoltProblem | null>
return null;
}
if ('prompt' in problem) {
// 2/11/2025: Update obsolete data format for older problems.
problem.repositoryContents = (problem as any).prompt.content;
delete problem.prompt;
}
assert(problem.repositoryId, 'Problem probably has outdated data format. Must have a repositoryId.');
} catch (error) {
console.error('Error fetching problem', error);

2
app/lib/supabase/client.ts
View File

@ -15,7 +15,7 @@ export interface Database {
description: string;
status: 'Pending' | 'Solved' | 'Unsolved';
keywords: string[];
repository_contents: Json;
repository_id: string;
user_id: string | null;
problem_comments: Database['public']['Tables']['problem_comments']['Row'][];
solution: Json;

23
app/lib/supabase/problems.ts
View File

@ -84,18 +84,12 @@ export async function supabaseGetProblem(problemId: string): Promise<BoltProblem
}
// Fetch blob data from storage if paths are available
let repositoryContents = data.repository_contents;
let solution = data.solution;
const prompt = data.prompt;
// Create a supabase instance for storage operations
const supabase = getSupabase();
// Fetch repository contents from storage if path is available
if (data.repository_contents_path) {
repositoryContents = (await downloadBlob('repository-contents', data.repository_contents_path)) || '';
}
if (data.solution_path) {
solution = JSON.parse((await downloadBlob('solutions', data.solution_path)) || '{}');
}
@ -123,7 +117,7 @@ export async function supabaseGetProblem(problemId: string): Promise<BoltProblem
description: data.description,
status: data.status as BoltProblemStatus,
keywords: data.keywords,
repositoryContents,
repositoryId: data.repository_id,
username,
solution: solution || prompt,
comments: data.problem_comments.map((comment: any) => ({
@ -154,7 +148,7 @@ export async function supabaseSubmitProblem(problem: BoltProblemInput): Promise<
description: problem.description,
status: problem.status as BoltProblemStatus,
keywords: problem.keywords || [],
repository_contents: problem.repositoryContents,
repository_id: problem.repositoryId,
user_id: problem.user_id,
};
@ -202,7 +196,7 @@ export async function supabaseUpdateProblem(problemId: string, problem: BoltProb
description: problem.description,
status: problem.status,
keywords: problem.keywords || [],
repository_contents_path: problem.repositoryContents ? `problems/${problemId}.txt` : undefined,
repository_id: problem.repositoryId,
solution_path: problem.solution ? `solutions/${problemId}.json` : undefined,
};
@ -213,17 +207,6 @@ export async function supabaseUpdateProblem(problemId: string, problem: BoltProb
throw updateError;
}
if (updates.repository_contents_path) {
const { error: repositoryContentsError } = await getSupabase()
.storage.from('repository-contents')
.upload(updates.repository_contents_path, problem.repositoryContents);
// @ts-ignore - ignore duplicate error
if (repositoryContentsError && repositoryContentsError.error !== 'Duplicate') {
throw repositoryContentsError;
}
}
if (updates.solution_path) {
const { error: solutionError } = await getSupabase()
.storage.from('solutions')

1
package.json
View File

@ -7,6 +7,7 @@
"type": "module",
"version": "0.0.5",
"scripts": {
"checks": "pnpm run typecheck && pnpm run lint:fix",
"deploy": "vercel deploy --prod",
"build": "npx remix vite:build",
"dev": "node pre-start.cjs && npx remix vite:dev",

50
tests/e2e/problem.spec.ts
View File

@ -19,7 +19,8 @@ test('Should be able to load a problem', async ({ page }) => {
await expect(page.getByText('Import the "problem" folder')).toBeVisible({ timeout: 30000 });
});
test('Should be able to save a problem ', async ({ page }) => {
// TODO: Unskip this test once we can make sure we get a repro for a problem.
test.skip('Should be able to save a problem ', async ({ page }) => {
await page.goto('/problems');
await page.getByRole('link', { name: 'App goes blank getting' }).click();
await page.getByRole('link', { name: 'Load Problem' }).click();
@ -111,53 +112,10 @@ test('Should be able to add a comment to a problem', async ({ page }) => {
await expect(page.locator('[data-testid="problem-comment"]').filter({ hasText: comment })).toBeVisible();
});
test('Confirm that admins see the "Save Reproduction" button', async ({ page }) => {
test('Confirm that admins see the "Save Problem" button', async ({ page }) => {
await page.goto('/problems?showAll=true');
await login(page);
await openSidebar(page);
await expect(page.getByRole('link', { name: 'Save Reproduction' })).toBeVisible();
});
test('Should be able to save a reproduction', async ({ page }) => {
await page.goto('/problems?showAll=true');
await page.getByRole('combobox').selectOption('all');
await page.getByRole('link', { name: '[test] tic tac toe' }).first().click();
const shouldUseSupabase = await isSupabaseEnabled(page);
await login(page);
await page.getByRole('link', { name: 'Load Problem' }).click();
// TODO: Find a way to interact with the tic tac toe board
// find the cell in the tic tac toe board inside the iframe
// const frameLocator = page.frameLocator('iframe[title="preview"]').first();
// await frameLocator.getByTestId('cell-0-0').click();
const message = `test message ${Date.now().toString()}`;
await page.getByRole('textbox', { name: 'How can we help you?' }).click();
await page.getByRole('textbox', { name: 'How can we help you?' }).fill(message);
await page.getByRole('button', { name: 'Chat', exact: true }).click();
await openSidebar(page);
await page.getByRole('link', { name: 'Save Reproduction' }).click();
await page.getByRole('button', { name: 'Submit' }).click();
await expect(page.getByText('Reproduction saved')).toBeVisible();
/*
* Check to see if __currentProblem__ is set and has the correct solution message
*/
const currentProblem = await page.evaluate(() => {
// @ts-ignore - accessing window.__currentProblem__ which is defined at runtime
return window.__currentProblem__;
});
// Only supabase is working for now
if (shouldUseSupabase) {
// Check if the message is a text message before accessing content
const message3 = currentProblem?.solution?.messages[2];
expect(message3 && message3.type === 'text' ? (message3 as any).content : null).toBe(message);
}
await expect(page.getByRole('button', { name: 'Save Problem' })).toBeVisible();
});