mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-06-26 18:26:38 +00:00
Merge pull request #133 from replayio/PRO-1445-Codebase-organization
Organize header components and update feedback modal
This commit is contained in:
Strider
GitHub
commit
472cc7f8c8
166
app/components/header/DeployChat/DeployChatButton.tsx
Normal file
166
app/components/header/DeployChat/DeployChatButton.tsx
Normal file
@ -0,0 +1,166 @@
|
||||
import { toast } from 'react-toastify';
|
||||
import ReactModal from 'react-modal';
|
||||
import { useState } from 'react';
|
||||
import type { DeploySettingsDatabase } from '~/lib/replay/Deploy';
|
||||
import { generateRandomId } from '~/lib/replay/ReplayProtocolClient';
|
||||
import { workbenchStore } from '~/lib/stores/workbench';
|
||||
import { chatStore } from '~/lib/stores/chat';
|
||||
import { database } from '~/lib/persistence/chats';
|
||||
import { deployRepository } from '~/lib/replay/Deploy';
|
||||
import DeployChatModal from './components/DeployChatModal';
|
||||
|
||||
ReactModal.setAppElement('#root');
|
||||
|
||||
export enum DeployStatus {
|
||||
NotStarted,
|
||||
Started,
|
||||
Succeeded,
|
||||
}
|
||||
|
||||
export function DeployChatButton() {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [deploySettings, setDeploySettings] = useState<DeploySettingsDatabase | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [status, setStatus] = useState<DeployStatus>(DeployStatus.NotStarted);
|
||||
|
||||
const handleOpenModal = async () => {
|
||||
const chatId = chatStore.currentChat.get()?.id;
|
||||
if (!chatId) {
|
||||
toast.error('No chat open');
|
||||
return;
|
||||
}
|
||||
|
||||
const existingSettings = await database.getChatDeploySettings(chatId);
|
||||
|
||||
setIsModalOpen(true);
|
||||
setStatus(DeployStatus.NotStarted);
|
||||
|
||||
if (existingSettings) {
|
||||
setDeploySettings(existingSettings);
|
||||
} else {
|
||||
setDeploySettings({});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeploy = async () => {
|
||||
setError(null);
|
||||
|
||||
const chatId = chatStore.currentChat.get()?.id;
|
||||
if (!chatId) {
|
||||
setError('No chat open');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!deploySettings?.netlify?.authToken) {
|
||||
setError('Netlify Auth Token is required');
|
||||
return;
|
||||
}
|
||||
|
||||
if (deploySettings?.netlify?.siteId) {
|
||||
if (deploySettings.netlify.createInfo) {
|
||||
setError('Cannot specify both a Netlify Site ID and a Netlify Account Slug');
|
||||
return;
|
||||
}
|
||||
} else if (!deploySettings?.netlify?.createInfo) {
|
||||
setError('Either a Netlify Site ID or a Netlify Account Slug is required');
|
||||
return;
|
||||
} else {
|
||||
// Add a default site name if one isn't provided.
|
||||
if (!deploySettings.netlify.createInfo?.siteName) {
|
||||
deploySettings.netlify.createInfo.siteName = `nut-app-${generateRandomId()}`;
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
deploySettings?.supabase?.databaseURL ||
|
||||
deploySettings?.supabase?.anonKey ||
|
||||
deploySettings?.supabase?.serviceRoleKey ||
|
||||
deploySettings?.supabase?.postgresURL
|
||||
) {
|
||||
if (!deploySettings.supabase.databaseURL) {
|
||||
setError('Supabase Database URL is required');
|
||||
return;
|
||||
}
|
||||
if (!deploySettings.supabase.anonKey) {
|
||||
setError('Supabase Anonymous Key is required');
|
||||
return;
|
||||
}
|
||||
if (!deploySettings.supabase.serviceRoleKey) {
|
||||
setError('Supabase Service Role Key is required');
|
||||
return;
|
||||
}
|
||||
if (!deploySettings.supabase.postgresURL) {
|
||||
setError('Supabase Postgres URL is required');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const repositoryId = workbenchStore.repositoryId.get();
|
||||
if (!repositoryId) {
|
||||
setError('No repository ID found');
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus(DeployStatus.Started);
|
||||
|
||||
// Write out to the database before we start trying to deploy.
|
||||
await database.updateChatDeploySettings(chatId, deploySettings);
|
||||
|
||||
console.log('DeploymentStarting', repositoryId, deploySettings);
|
||||
|
||||
const result = await deployRepository(repositoryId, deploySettings);
|
||||
|
||||
console.log('DeploymentResult', repositoryId, deploySettings, result);
|
||||
|
||||
if (result.error) {
|
||||
setStatus(DeployStatus.NotStarted);
|
||||
setError(result.error);
|
||||
return;
|
||||
}
|
||||
|
||||
let newSettings = deploySettings;
|
||||
|
||||
// Update netlify settings so future deployments will reuse the site.
|
||||
if (deploySettings?.netlify?.createInfo && result.netlifySiteId) {
|
||||
newSettings = {
|
||||
...deploySettings,
|
||||
netlify: { authToken: deploySettings.netlify.authToken, siteId: result.netlifySiteId },
|
||||
};
|
||||
}
|
||||
|
||||
// Update database with the deployment result.
|
||||
newSettings = {
|
||||
...newSettings,
|
||||
siteURL: result.siteURL,
|
||||
repositoryId,
|
||||
};
|
||||
|
||||
setDeploySettings(newSettings);
|
||||
setStatus(DeployStatus.Succeeded);
|
||||
|
||||
// Update the database with the new settings.
|
||||
await database.updateChatDeploySettings(chatId, newSettings);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
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={() => {
|
||||
handleOpenModal();
|
||||
}}
|
||||
>
|
||||
Deploy
|
||||
</button>
|
||||
<DeployChatModal
|
||||
isModalOpen={isModalOpen}
|
||||
setIsModalOpen={setIsModalOpen}
|
||||
status={status}
|
||||
deploySettings={deploySettings}
|
||||
setDeploySettings={setDeploySettings}
|
||||
error={error}
|
||||
handleDeploy={handleDeploy}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,159 +1,26 @@
|
||||
import { toast } from 'react-toastify';
|
||||
import ReactModal from 'react-modal';
|
||||
import { useState } from 'react';
|
||||
import type { DeploySettingsDatabase } from '~/lib/replay/Deploy';
|
||||
import { generateRandomId } from '~/lib/replay/ReplayProtocolClient';
|
||||
import { workbenchStore } from '~/lib/stores/workbench';
|
||||
import { chatStore } from '~/lib/stores/chat';
|
||||
import { database } from '~/lib/persistence/chats';
|
||||
import { deployRepository } from '~/lib/replay/Deploy';
|
||||
import { DeployStatus } from '~/components/header/DeployChat/DeployChatButton';
|
||||
|
||||
ReactModal.setAppElement('#root');
|
||||
|
||||
// Component for deploying a chat to production.
|
||||
|
||||
enum DeployStatus {
|
||||
NotStarted,
|
||||
Started,
|
||||
Succeeded,
|
||||
interface DeployChatModalProps {
|
||||
isModalOpen: boolean;
|
||||
setIsModalOpen: (isOpen: boolean) => void;
|
||||
status: DeployStatus;
|
||||
deploySettings: any;
|
||||
setDeploySettings: (settings: any) => void;
|
||||
error: string | null;
|
||||
handleDeploy: () => void;
|
||||
}
|
||||
|
||||
export function DeployChatButton() {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [deploySettings, setDeploySettings] = useState<DeploySettingsDatabase | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [status, setStatus] = useState<DeployStatus>(DeployStatus.NotStarted);
|
||||
|
||||
const handleOpenModal = async () => {
|
||||
const chatId = chatStore.currentChat.get()?.id;
|
||||
if (!chatId) {
|
||||
toast.error('No chat open');
|
||||
return;
|
||||
}
|
||||
|
||||
const existingSettings = await database.getChatDeploySettings(chatId);
|
||||
|
||||
setIsModalOpen(true);
|
||||
setStatus(DeployStatus.NotStarted);
|
||||
|
||||
if (existingSettings) {
|
||||
setDeploySettings(existingSettings);
|
||||
} else {
|
||||
setDeploySettings({});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeploy = async () => {
|
||||
setError(null);
|
||||
|
||||
const chatId = chatStore.currentChat.get()?.id;
|
||||
if (!chatId) {
|
||||
setError('No chat open');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!deploySettings?.netlify?.authToken) {
|
||||
setError('Netlify Auth Token is required');
|
||||
return;
|
||||
}
|
||||
|
||||
if (deploySettings?.netlify?.siteId) {
|
||||
if (deploySettings.netlify.createInfo) {
|
||||
setError('Cannot specify both a Netlify Site ID and a Netlify Account Slug');
|
||||
return;
|
||||
}
|
||||
} else if (!deploySettings?.netlify?.createInfo) {
|
||||
setError('Either a Netlify Site ID or a Netlify Account Slug is required');
|
||||
return;
|
||||
} else {
|
||||
// Add a default site name if one isn't provided.
|
||||
if (!deploySettings.netlify.createInfo?.siteName) {
|
||||
deploySettings.netlify.createInfo.siteName = `nut-app-${generateRandomId()}`;
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
deploySettings?.supabase?.databaseURL ||
|
||||
deploySettings?.supabase?.anonKey ||
|
||||
deploySettings?.supabase?.serviceRoleKey ||
|
||||
deploySettings?.supabase?.postgresURL
|
||||
) {
|
||||
if (!deploySettings.supabase.databaseURL) {
|
||||
setError('Supabase Database URL is required');
|
||||
return;
|
||||
}
|
||||
if (!deploySettings.supabase.anonKey) {
|
||||
setError('Supabase Anonymous Key is required');
|
||||
return;
|
||||
}
|
||||
if (!deploySettings.supabase.serviceRoleKey) {
|
||||
setError('Supabase Service Role Key is required');
|
||||
return;
|
||||
}
|
||||
if (!deploySettings.supabase.postgresURL) {
|
||||
setError('Supabase Postgres URL is required');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const repositoryId = workbenchStore.repositoryId.get();
|
||||
if (!repositoryId) {
|
||||
setError('No repository ID found');
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus(DeployStatus.Started);
|
||||
|
||||
// Write out to the database before we start trying to deploy.
|
||||
await database.updateChatDeploySettings(chatId, deploySettings);
|
||||
|
||||
console.log('DeploymentStarting', repositoryId, deploySettings);
|
||||
|
||||
const result = await deployRepository(repositoryId, deploySettings);
|
||||
|
||||
console.log('DeploymentResult', repositoryId, deploySettings, result);
|
||||
|
||||
if (result.error) {
|
||||
setStatus(DeployStatus.NotStarted);
|
||||
setError(result.error);
|
||||
return;
|
||||
}
|
||||
|
||||
let newSettings = deploySettings;
|
||||
|
||||
// Update netlify settings so future deployments will reuse the site.
|
||||
if (deploySettings?.netlify?.createInfo && result.netlifySiteId) {
|
||||
newSettings = {
|
||||
...deploySettings,
|
||||
netlify: { authToken: deploySettings.netlify.authToken, siteId: result.netlifySiteId },
|
||||
};
|
||||
}
|
||||
|
||||
// Update database with the deployment result.
|
||||
newSettings = {
|
||||
...newSettings,
|
||||
siteURL: result.siteURL,
|
||||
repositoryId,
|
||||
};
|
||||
|
||||
setDeploySettings(newSettings);
|
||||
setStatus(DeployStatus.Succeeded);
|
||||
|
||||
// Update the database with the new settings.
|
||||
await database.updateChatDeploySettings(chatId, newSettings);
|
||||
};
|
||||
|
||||
const DeployChatModal = ({
|
||||
isModalOpen,
|
||||
setIsModalOpen,
|
||||
status,
|
||||
deploySettings,
|
||||
setDeploySettings,
|
||||
error,
|
||||
handleDeploy,
|
||||
}: DeployChatModalProps) => {
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
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={() => {
|
||||
handleOpenModal();
|
||||
}}
|
||||
>
|
||||
Deploy
|
||||
</button>
|
||||
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 z-40 flex items-center justify-center">
|
||||
<div className="bg-white rounded-lg p-6 max-w-2xl w-full z-50">
|
||||
@ -386,4 +253,6 @@ export function DeployChatButton() {
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default DeployChatModal;
|
||||
@ -1,160 +0,0 @@
|
||||
import { toast } from 'react-toastify';
|
||||
import ReactModal from 'react-modal';
|
||||
import { useState } from 'react';
|
||||
import { supabaseSubmitFeedback } from '~/lib/supabase/feedback';
|
||||
import { getLastChatMessages } from '~/utils/chat/messageUtils';
|
||||
|
||||
ReactModal.setAppElement('#root');
|
||||
|
||||
// Component for leaving feedback.
|
||||
|
||||
export function Feedback() {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
description: '',
|
||||
email: '',
|
||||
share: false,
|
||||
});
|
||||
const [submitted, setSubmitted] = useState<boolean>(false);
|
||||
|
||||
const handleOpenModal = () => {
|
||||
setIsModalOpen(true);
|
||||
setFormData({
|
||||
description: '',
|
||||
email: '',
|
||||
share: false,
|
||||
});
|
||||
setSubmitted(false);
|
||||
};
|
||||
|
||||
const handleSubmitFeedback = async () => {
|
||||
if (!formData.description) {
|
||||
toast.error('Please fill in the feedback field');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
toast.info('Submitting feedback...');
|
||||
|
||||
const feedbackData: any = {
|
||||
description: formData.description,
|
||||
share: formData.share,
|
||||
source: 'feedback_modal',
|
||||
};
|
||||
|
||||
if (feedbackData.share) {
|
||||
feedbackData.chatMessages = getLastChatMessages();
|
||||
}
|
||||
|
||||
try {
|
||||
const success = await supabaseSubmitFeedback(feedbackData);
|
||||
|
||||
if (success) {
|
||||
setSubmitted(true);
|
||||
toast.success('Feedback submitted successfully!');
|
||||
} else {
|
||||
toast.error('Failed to submit feedback');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error submitting feedback:', error);
|
||||
toast.error('An error occurred while submitting feedback');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
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={() => {
|
||||
handleOpenModal();
|
||||
}}
|
||||
>
|
||||
Feedback
|
||||
</button>
|
||||
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 z-40 flex items-center justify-center">
|
||||
<div className="bg-white rounded-lg p-6 max-w-2xl w-full z-50">
|
||||
{submitted ? (
|
||||
<>
|
||||
<div className="text-center mb-2">Feedback Submitted</div>
|
||||
<div className="text-center">
|
||||
<p className="text-gray-600 mb-4">Thank you for your feedback! We appreciate your input.</p>
|
||||
<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>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h2 className="text-xl font-semibold text-center mb-4">Share Your Feedback</h2>
|
||||
<div className="text-center mb-4">
|
||||
Let us know how Nut is doing or report any issues you've encountered.
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Your Feedback:</label>
|
||||
<textarea
|
||||
name="description"
|
||||
className="bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 py-2 w-full border border-gray-300 min-h-[120px]"
|
||||
value={formData.description}
|
||||
placeholder="Tell us what you think or describe any issues..."
|
||||
onChange={(e) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
description: e.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="share-project"
|
||||
name="share"
|
||||
className="bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded border border-gray-300"
|
||||
checked={formData.share}
|
||||
onChange={(e) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
share: e.target.checked,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="share-project" className="text-sm text-gray-700">
|
||||
Share project with the Nut team (helps us diagnose issues)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-2 mt-4">
|
||||
<button
|
||||
onClick={handleSubmitFeedback}
|
||||
className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors"
|
||||
>
|
||||
Submit Feedback
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsModalOpen(false);
|
||||
}}
|
||||
className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
85
app/components/header/Feedback/FeedbackButton.tsx
Normal file
85
app/components/header/Feedback/FeedbackButton.tsx
Normal file
@ -0,0 +1,85 @@
|
||||
import { toast } from 'react-toastify';
|
||||
import ReactModal from 'react-modal';
|
||||
import { useState } from 'react';
|
||||
import { supabaseSubmitFeedback } from '~/lib/supabase/feedback';
|
||||
import { getLastChatMessages } from '~/utils/chat/messageUtils';
|
||||
import FeedbackModal from './components/FeedbackModal';
|
||||
|
||||
ReactModal.setAppElement('#root');
|
||||
|
||||
// Component for leaving feedback.
|
||||
|
||||
export function Feedback() {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
description: '',
|
||||
email: '',
|
||||
share: false,
|
||||
});
|
||||
const [submitted, setSubmitted] = useState<boolean>(false);
|
||||
|
||||
const handleOpenModal = () => {
|
||||
setIsModalOpen(true);
|
||||
setFormData({
|
||||
description: '',
|
||||
email: '',
|
||||
share: false,
|
||||
});
|
||||
setSubmitted(false);
|
||||
};
|
||||
|
||||
const handleSubmitFeedback = async () => {
|
||||
if (!formData.description) {
|
||||
toast.error('Please fill in the feedback field');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
toast.info('Submitting feedback...');
|
||||
|
||||
const feedbackData: any = {
|
||||
description: formData.description,
|
||||
share: formData.share,
|
||||
source: 'feedback_modal',
|
||||
};
|
||||
|
||||
if (feedbackData.share) {
|
||||
feedbackData.chatMessages = getLastChatMessages();
|
||||
}
|
||||
|
||||
try {
|
||||
const success = await supabaseSubmitFeedback(feedbackData);
|
||||
|
||||
if (success) {
|
||||
setSubmitted(true);
|
||||
toast.success('Feedback submitted successfully!');
|
||||
} else {
|
||||
toast.error('Failed to submit feedback');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error submitting feedback:', error);
|
||||
toast.error('An error occurred while submitting feedback');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
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={() => {
|
||||
handleOpenModal();
|
||||
}}
|
||||
>
|
||||
Feedback
|
||||
</button>
|
||||
<FeedbackModal
|
||||
isModalOpen={isModalOpen}
|
||||
setIsModalOpen={setIsModalOpen}
|
||||
submitted={submitted}
|
||||
formData={formData}
|
||||
setFormData={setFormData}
|
||||
handleSubmitFeedback={handleSubmitFeedback}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
124
app/components/header/Feedback/components/FeedbackModal.tsx
Normal file
124
app/components/header/Feedback/components/FeedbackModal.tsx
Normal file
@ -0,0 +1,124 @@
|
||||
interface FeedbackModalProps {
|
||||
isModalOpen: boolean;
|
||||
setIsModalOpen: (isOpen: boolean) => void;
|
||||
submitted: boolean;
|
||||
formData: any;
|
||||
setFormData: (formData: any) => void;
|
||||
handleSubmitFeedback: () => void;
|
||||
}
|
||||
|
||||
const FeedbackModal = ({
|
||||
isModalOpen,
|
||||
setIsModalOpen,
|
||||
submitted,
|
||||
formData,
|
||||
setFormData,
|
||||
handleSubmitFeedback,
|
||||
}: FeedbackModalProps) => {
|
||||
const handleOverlayClick = (e: React.MouseEvent) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
setIsModalOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{isModalOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black bg-opacity-50 z-40 flex items-center justify-center"
|
||||
onClick={handleOverlayClick}
|
||||
>
|
||||
<div className="bg-bolt-elements-background-depth-1 rounded-lg p-8 max-w-2xl w-full z-50 border border-bolt-elements-borderColor">
|
||||
{submitted ? (
|
||||
<>
|
||||
<h2 className="text-2xl font-bold mb-6 text-bolt-elements-textPrimary text-center">
|
||||
Feedback Submitted
|
||||
</h2>
|
||||
<div className="text-center">
|
||||
<p className="text-bolt-elements-textSecondary mb-6">
|
||||
Thank you for your feedback! We appreciate your input.
|
||||
</p>
|
||||
<div className="flex justify-center gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsModalOpen(false);
|
||||
}}
|
||||
className="px-4 py-3 bg-gray-300 rounded-lg hover:bg-gray-400 transition-colors font-medium"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h2 className="text-2xl font-bold mb-6 text-bolt-elements-textPrimary text-center">
|
||||
Share Your Feedback
|
||||
</h2>
|
||||
<div className="text-center mb-6 text-bolt-elements-textSecondary">
|
||||
Let us know how Nut is doing or report any issues you've encountered.
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
|
||||
Your Feedback:
|
||||
</label>
|
||||
<textarea
|
||||
name="description"
|
||||
className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent min-h-[120px]"
|
||||
value={formData.description}
|
||||
placeholder="Tell us what you think or describe any issues..."
|
||||
onChange={(e) => {
|
||||
setFormData((prev: any) => ({
|
||||
...prev,
|
||||
description: e.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="share-project"
|
||||
name="share"
|
||||
className="bg-bolt-elements-background-depth-2 text-green-500 rounded border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500"
|
||||
checked={formData.share}
|
||||
onChange={(e) => {
|
||||
setFormData((prev: any) => ({
|
||||
...prev,
|
||||
share: e.target.checked,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="share-project" className="text-sm text-bolt-elements-textSecondary">
|
||||
Share project with the Nut team (helps us diagnose issues)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-3">
|
||||
<button
|
||||
onClick={handleSubmitFeedback}
|
||||
className="px-4 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-medium"
|
||||
>
|
||||
Submit Feedback
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsModalOpen(false);
|
||||
}}
|
||||
className="px-4 py-3 bg-gray-300 rounded-lg hover:bg-gray-400 transition-colors font-medium"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeedbackModal;
|
||||
@ -4,10 +4,10 @@ import { chatStore } from '~/lib/stores/chat';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { HeaderActionButtons } from './HeaderActionButtons.client';
|
||||
import { ChatDescription } from '~/lib/persistence/ChatDescription.client';
|
||||
import { Feedback } from './Feedback';
|
||||
import { Feedback } from './Feedback/FeedbackButton';
|
||||
import { Suspense } from 'react';
|
||||
import { ClientAuth } from '~/components/auth/ClientAuth/ClientAuth';
|
||||
import { DeployChatButton } from './DeployChatButton';
|
||||
import { DeployChatButton } from './DeployChat/DeployChatButton';
|
||||
import { DownloadButton } from './DownloadButton';
|
||||
|
||||
export function Header() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user