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

Merge pull request #149 from replayio/fix-toast-crash

Browse Source 
PRO-1483: multiple-toastcontainers-cause-app-crash
This commit is contained in:
Brett Lamy 2025-06-12 21:23:32 -04:00 committed by GitHub
commit 43961eb5a4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 31 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app/components/chat/ChatComponent/Chat.client.tsx
View File

@ -2,17 +2,11 @@
* @ts-nocheck
* Preventing TS checks with files presented in the video for a better presentation.
*/
import { cssTransition, ToastContainer } from 'react-toastify';
import { useChatHistory } from '~/lib/persistence';
import { renderLogger } from '~/utils/logger';
import ChatImplementer from './components/ChatImplementer/ChatImplementer';
import flushSimulationData from './functions/flushSimulation';
const toastAnimation = cssTransition({
enter: 'animated fadeInRight',
exit: 'animated fadeOutRight',
});
setInterval(async () => {
flushSimulationData();
}, 1000);
@ -31,30 +25,6 @@ export function Chat() {
storeMessageHistory={storeMessageHistory}
/>
)}
<ToastContainer
closeButton={({ closeToast }) => {
return (
<button className="Toastify__close-button" onClick={closeToast}>
<div className="i-ph:x text-lg" />
</button>
);
}}
icon={({ type }) => {
switch (type) {
case 'success': {
return <div className="i-ph:check-bold text-bolt-elements-icon-success text-2xl" />;
}
case 'error': {
return <div className="i-ph:warning-circle-bold text-bolt-elements-icon-error text-2xl" />;
}
}
return undefined;
}}
position="bottom-right"
pauseOnFocusLoss
transition={toastAnimation}
/>
</>
);
}

33
app/root.tsx
View File

@ -11,7 +11,7 @@ import { useEffect, useState } from 'react';
import { logStore } from './lib/stores/logs';
import { initializeAuth, userStore, isLoadingStore } from './lib/stores/auth';
import { initializeUserStores } from './lib/stores/user';
import { ToastContainer, toast } from 'react-toastify';
import { ToastContainer, toast, cssTransition } from 'react-toastify';
import { Analytics } from '@vercel/analytics/remix';
import { AuthModal } from './components/auth/AuthModal';
@ -65,6 +65,11 @@ export const loader: LoaderFunction = async () => {
});
};
const toastAnimation = cssTransition({
enter: 'animated fadeInRight',
exit: 'animated fadeOutRight',
});
const inlineThemeCode = stripIndents`
setTutorialKitTheme();
@ -172,7 +177,31 @@ export default function App() {
<ThemeProvider />
<AuthProvider data={data} />
<main className="h-full min-h-screen">{isLoading ? <div></div> : <Outlet />}</main>
<ToastContainer position="bottom-right" theme={theme} />
<ToastContainer
closeButton={({ closeToast }) => {
return (
<button className="Toastify__close-button" onClick={closeToast}>
<div className="i-ph:x text-lg" />
</button>
);
}}
icon={({ type }) => {
switch (type) {
case 'success': {
return <div className="i-ph:check-bold text-bolt-elements-icon-success text-2xl" />;
}
case 'error': {
return <div className="i-ph:warning-circle-bold text-bolt-elements-icon-error text-2xl" />;
}
}
return undefined;
}}
position="bottom-right"
theme={theme}
pauseOnFocusLoss
transition={toastAnimation}
/>
<AuthModal />
</ClientOnly>
<ScrollRestoration />