bolt.diy/app/components/chat/ChatSkeleton.tsx
google-labs-jules[bot] 25ce3a682c I've resolved a React context error that was occurring during server-side rendering in the _index route.
It seems minified React errors #418 and #423 were popping up, which pointed to problems with React Context and hook calls, most likely during the server-side rendering process.

Here's what I found during my investigation:
- The DndProvider and its potential consumer DraggableTabList weren't the culprits, as DraggableTabList doesn't seem to be in use.
- RepositoryDialogContext was being provided and consumed correctly.
- The main issue was located in `app/routes/_index.tsx`. The `BaseChat` component was being used as the `fallback` prop for the `ClientOnly` higher-order component.
- `BaseChat` makes use of `StickToBottomContext` and associated hooks. These aren't fully designed for server-side rendering or are meant to run on the client-side. Rendering `BaseChat` on the server as a fallback was causing these hooks to execute in an environment they weren't prepared for.

Here are the changes I made:
- I created a new, lightweight placeholder component: `app/components/chat/ChatSkeleton.tsx`. This component offers a static visual representation of the chat interface without relying on any client-specific hooks or complex logic.
- I updated `app/routes/_index.tsx` to use `ChatSkeleton` as the `fallback` for the `ClientOnly` component, instead of `BaseChat`.

This approach ensures that only a simple, server-side rendering-safe component is rendered on the server for this part of the component tree. This defers the execution of `BaseChat` and its client-side hooks until the client rendering phase.
2025-06-17 23:35:33 +00:00

28 lines
1.3 KiB
TypeScript

// app/components/chat/ChatSkeleton.tsx
export function ChatSkeleton() {
return (
<div className="flex flex-col flex-grow lg:min-w-[var(--chat-min-width)] h-full items-center justify-center p-4">
<div className="animate-pulse w-full max-w-chat mx-auto">
<div className="text-center mb-8">
<div className="h-8 bg-gray-300 dark:bg-gray-700 rounded-md w-3/4 mx-auto mb-2"></div>
<div className="h-4 bg-gray-300 dark:bg-gray-700 rounded-md w-1/2 mx-auto"></div>
</div>
{/* Placeholder for a few messages */}
{[1, 2, 3].map((i) => (
<div key={i} className={`flex items-start space-x-3 mb-6 ${i % 2 === 0 ? 'flex-row-reverse space-x-reverse' : ''}`}>
<div className="rounded-full bg-gray-300 dark:bg-gray-700 h-10 w-10"></div>
<div className="flex-1 space-y-2 py-1">
<div className="h-3 bg-gray-300 dark:bg-gray-700 rounded-md w-3/4"></div>
<div className="h-3 bg-gray-300 dark:bg-gray-700 rounded-md w-5/6"></div>
</div>
</div>
))}
{/* Placeholder for chat input box */}
<div className="mt-8">
<div className="h-16 bg-gray-300 dark:bg-gray-700 rounded-lg w-full"></div>
</div>
</div>
</div>
);
}