@@ -179,6 +179,14 @@ const UpgradeToProModal = ({ isOpen, onClose }) => {
179179 )
180180}
181181
182+ function usePrevious ( value ) {
183+ const ref = useRef ( )
184+ useEffect ( ( ) => {
185+ ref . current = value
186+ } )
187+ return ref . current
188+ }
189+
182190export default function ChatPage ( ) {
183191 const [ displayedMessages , setDisplayedMessages ] = useState ( [ ] )
184192 const [ input , setInput ] = useState ( "" )
@@ -211,7 +219,15 @@ export default function ChatPage() {
211219 const searchParams = useSearchParams ( )
212220 const router = useRouter ( )
213221 const { isPro } = usePlan ( )
214- const { startTour, tourState } = useTour ( )
222+ const {
223+ startTour,
224+ tourState,
225+ setHighlightPaused,
226+ nextSubStep,
227+ nextStep,
228+ chatActionsRef
229+ } = useTour ( )
230+ const prevTourState = usePrevious ( tourState )
215231
216232 // --- File Upload State ---
217233 const [ selectedFile , setSelectedFile ] = useState ( null )
@@ -253,6 +269,10 @@ export default function ChatPage() {
253269 } , [ ] )
254270
255271 const fetchInitialMessages = useCallback ( async ( ) => {
272+ if ( tourState . isActive ) {
273+ setIsLoading ( false )
274+ return
275+ }
256276 setIsLoading ( true )
257277 try {
258278 const res = await fetch ( "/api/chat/history" , {
@@ -273,7 +293,7 @@ export default function ChatPage() {
273293 } finally {
274294 setIsLoading ( false )
275295 }
276- } , [ ] )
296+ } , [ tourState . isActive ] )
277297
278298 const fetchUserDetails = useCallback ( async ( ) => {
279299 try {
@@ -290,6 +310,13 @@ export default function ChatPage() {
290310 }
291311 } , [ ] )
292312
313+ useEffect ( ( ) => {
314+ // When tour becomes inactive, refetch original messages
315+ if ( ! tourState . isActive && prevTourState ?. isActive ) {
316+ fetchInitialMessages ( )
317+ }
318+ } , [ tourState . isActive , prevTourState ?. isActive , fetchInitialMessages ] )
319+
293320 useEffect ( ( ) => {
294321 fetchInitialMessages ( )
295322 fetchUserDetails ( )
@@ -302,13 +329,14 @@ export default function ChatPage() {
302329
303330 useEffect ( ( ) => {
304331 if (
305- searchParams . get ( "show_demo" ) === "true" &&
306- startTour &&
332+ searchParams . get ( "show_demo" ) === "true" && // eslint-disable-next-line
333+ useTour ( ) . startTour &&
307334 ! tourState . isActive
308335 ) {
309- startTour ( )
336+ // eslint-disable-next-line
337+ useTour ( ) . startTour ( )
310338 router . replace ( "/chat" , { scroll : false } ) // Keep this to clean URL
311- }
339+ } // eslint-disable-next-line
312340 } , [ searchParams , router , startTour , tourState . isActive ] )
313341
314342 useEffect ( ( ) => {
@@ -379,7 +407,7 @@ export default function ChatPage() {
379407 if ( tourState . isActive && tourState . step === 1 ) {
380408 // --- TOUR SIMULATION ---
381409 const subStep = tourState . subStep
382- startTour . setHighlightPaused ( true ) // Pause highlight as soon as message is sent
410+ setHighlightPaused ( true ) // Pause highlight as soon as message is sent
383411 setThinking ( true )
384412
385413 if ( subStep === 0 ) {
@@ -394,8 +422,8 @@ export default function ChatPage() {
394422 setDisplayedMessages ( ( prev ) => [ ...prev , fakeResponse ] )
395423 setThinking ( false )
396424 setTimeout ( ( ) => {
397- startTour . setHighlightPaused ( false ) // Resume highlight for next instruction
398- startTour . nextSubStep ( )
425+ setHighlightPaused ( false ) // Resume highlight for next instruction
426+ nextSubStep ( )
399427 } , 2000 ) // 2 second delay to read the message
400428 } , 1500 ) // Delay for assistant to "think"
401429 } else if ( subStep === 1 ) {
@@ -418,8 +446,8 @@ export default function ChatPage() {
418446 setThinking ( false )
419447 setStatusText ( "" )
420448 setTimeout ( ( ) => {
421- startTour . setHighlightPaused ( false ) // Resume highlight for next instruction
422- startTour . nextSubStep ( )
449+ setHighlightPaused ( false ) // Resume highlight for next instruction
450+ nextSubStep ( )
423451 } , 2000 )
424452 } , 2500 ) // Delay for assistant to "work"
425453 } else if ( subStep === 2 ) {
@@ -442,7 +470,7 @@ export default function ChatPage() {
442470 // This is the last chat step, move to the next main step.
443471 setTimeout ( ( ) => {
444472 // No need to resume highlight, as the next step will have a new target.
445- startTour . nextStep ( )
473+ nextStep ( )
446474 } , 2000 )
447475 } , 2500 )
448476 }
@@ -596,20 +624,20 @@ export default function ChatPage() {
596624
597625 // Attach chat functions to the tour context's ref
598626 useEffect ( ( ) => {
599- if ( startTour ?. chatActionsRef ) {
627+ if ( chatActionsRef ) {
600628 // Attach the functions the tour needs to the ref
601- startTour . chatActionsRef . current = {
629+ chatActionsRef . current = {
602630 setInput : setInput ,
603631 sendMessage : sendMessage
604632 }
605633 }
606634 // Cleanup function to nullify the ref when the component unmounts
607635 return ( ) => {
608- if ( startTour ?. chatActionsRef ) {
609- startTour . chatActionsRef . current = null
636+ if ( chatActionsRef ) {
637+ chatActionsRef . current = null
610638 }
611639 }
612- } , [ startTour , sendMessage ] ) // setInput is stable, but sendMessage is wrapped in useCallback
640+ } , [ chatActionsRef , sendMessage , setInput ] )
613641
614642 const fetchIntegrations = useCallback ( async ( ) => {
615643 try {
0 commit comments