mirror of
https://github.com/siteboon/claudecodeui.git
synced 2025-12-11 20:29:38 +00:00
Add new project creation wizard component with improved user experience and better input field interactions. Integrate projects API routes on the backend to support CRUD operations for project management. Changes include: - Add ProjectCreationWizard component with step-by-step project setup - Improve input hint visibility to hide when user starts typing - Refactor project creation state management in Sidebar component - Add ReactDOM import for portal-based wizard rendering The wizard provides a more intuitive onboarding experience for users creating new projects, while the enhanced input hints reduce visual clutter during active typing.
146 lines
4.9 KiB
JavaScript
146 lines
4.9 KiB
JavaScript
// Utility function for authenticated API calls
|
|
export const authenticatedFetch = (url, options = {}) => {
|
|
const token = localStorage.getItem('auth-token');
|
|
|
|
const defaultHeaders = {
|
|
'Content-Type': 'application/json',
|
|
};
|
|
|
|
if (token) {
|
|
defaultHeaders['Authorization'] = `Bearer ${token}`;
|
|
}
|
|
|
|
return fetch(url, {
|
|
...options,
|
|
headers: {
|
|
...defaultHeaders,
|
|
...options.headers,
|
|
},
|
|
});
|
|
};
|
|
|
|
// API endpoints
|
|
export const api = {
|
|
// Auth endpoints (no token required)
|
|
auth: {
|
|
status: () => fetch('/api/auth/status'),
|
|
login: (username, password) => fetch('/api/auth/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, password }),
|
|
}),
|
|
register: (username, password) => fetch('/api/auth/register', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, password }),
|
|
}),
|
|
user: () => authenticatedFetch('/api/auth/user'),
|
|
logout: () => authenticatedFetch('/api/auth/logout', { method: 'POST' }),
|
|
},
|
|
|
|
// Protected endpoints
|
|
config: () => authenticatedFetch('/api/config'),
|
|
projects: () => authenticatedFetch('/api/projects'),
|
|
sessions: (projectName, limit = 5, offset = 0) =>
|
|
authenticatedFetch(`/api/projects/${projectName}/sessions?limit=${limit}&offset=${offset}`),
|
|
sessionMessages: (projectName, sessionId, limit = null, offset = 0) => {
|
|
const params = new URLSearchParams();
|
|
if (limit !== null) {
|
|
params.append('limit', limit);
|
|
params.append('offset', offset);
|
|
}
|
|
const queryString = params.toString();
|
|
const url = `/api/projects/${projectName}/sessions/${sessionId}/messages${queryString ? `?${queryString}` : ''}`;
|
|
return authenticatedFetch(url);
|
|
},
|
|
renameProject: (projectName, displayName) =>
|
|
authenticatedFetch(`/api/projects/${projectName}/rename`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify({ displayName }),
|
|
}),
|
|
deleteSession: (projectName, sessionId) =>
|
|
authenticatedFetch(`/api/projects/${projectName}/sessions/${sessionId}`, {
|
|
method: 'DELETE',
|
|
}),
|
|
deleteProject: (projectName) =>
|
|
authenticatedFetch(`/api/projects/${projectName}`, {
|
|
method: 'DELETE',
|
|
}),
|
|
createProject: (path) =>
|
|
authenticatedFetch('/api/projects/create', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ path }),
|
|
}),
|
|
createWorkspace: (workspaceData) =>
|
|
authenticatedFetch('/api/projects/create-workspace', {
|
|
method: 'POST',
|
|
body: JSON.stringify(workspaceData),
|
|
}),
|
|
readFile: (projectName, filePath) =>
|
|
authenticatedFetch(`/api/projects/${projectName}/file?filePath=${encodeURIComponent(filePath)}`),
|
|
saveFile: (projectName, filePath, content) =>
|
|
authenticatedFetch(`/api/projects/${projectName}/file`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify({ filePath, content }),
|
|
}),
|
|
getFiles: (projectName) =>
|
|
authenticatedFetch(`/api/projects/${projectName}/files`),
|
|
transcribe: (formData) =>
|
|
authenticatedFetch('/api/transcribe', {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {}, // Let browser set Content-Type for FormData
|
|
}),
|
|
|
|
// TaskMaster endpoints
|
|
taskmaster: {
|
|
// Initialize TaskMaster in a project
|
|
init: (projectName) =>
|
|
authenticatedFetch(`/api/taskmaster/init/${projectName}`, {
|
|
method: 'POST',
|
|
}),
|
|
|
|
// Add a new task
|
|
addTask: (projectName, { prompt, title, description, priority, dependencies }) =>
|
|
authenticatedFetch(`/api/taskmaster/add-task/${projectName}`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({ prompt, title, description, priority, dependencies }),
|
|
}),
|
|
|
|
// Parse PRD to generate tasks
|
|
parsePRD: (projectName, { fileName, numTasks, append }) =>
|
|
authenticatedFetch(`/api/taskmaster/parse-prd/${projectName}`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({ fileName, numTasks, append }),
|
|
}),
|
|
|
|
// Get available PRD templates
|
|
getTemplates: () =>
|
|
authenticatedFetch('/api/taskmaster/prd-templates'),
|
|
|
|
// Apply a PRD template
|
|
applyTemplate: (projectName, { templateId, fileName, customizations }) =>
|
|
authenticatedFetch(`/api/taskmaster/apply-template/${projectName}`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({ templateId, fileName, customizations }),
|
|
}),
|
|
|
|
// Update a task
|
|
updateTask: (projectName, taskId, updates) =>
|
|
authenticatedFetch(`/api/taskmaster/update-task/${projectName}/${taskId}`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify(updates),
|
|
}),
|
|
},
|
|
|
|
// Browse filesystem for project suggestions
|
|
browseFilesystem: (dirPath = null) => {
|
|
const params = new URLSearchParams();
|
|
if (dirPath) params.append('path', dirPath);
|
|
|
|
return authenticatedFetch(`/api/browse-filesystem?${params}`);
|
|
},
|
|
|
|
// Generic GET method for any endpoint
|
|
get: (endpoint) => authenticatedFetch(`/api${endpoint}`),
|
|
}; |