2a7f5a8909
<!-- This is an auto-generated description by cubic. --> ## Summary by cubic Adds multi-component selection in the preview and sends all selected components to chat for targeted edits. Updates overlays, UI, and IPC to support arrays, smarter context focusing, and cross-platform path normalization. - **New Features** - Select multiple components in the iframe; selection mode stays active until you deactivate it. - Show a scrollable list of selections with remove buttons and a Clear all; remove from the list or click an overlay in the preview to deselect. Sending clears all overlays. - Separate hover vs selected overlays with labels on hover; overlays persist after deactivation and re-position on layout changes/resizes. - Chat input and streaming now send selectedComponents; server builds per-component snippets and focuses their files in smart context. - **Migration** - Replace selectedComponentPreviewAtom with selectedComponentsPreviewAtom (ComponentSelection[]). - ChatStreamParams now uses selectedComponents; migrate any single-selection usages. - previewIframeRefAtom added for clearing overlays from the parent. <sup>Written for commit da0d64cc9e9f83fbf4b975278f6c869f0d3a8c7d. Summary will update automatically on new commits.</sup> <!-- End of auto-generated description by cubic. -->
118 lines
3.1 KiB
Plaintext
118 lines
3.1 KiB
Plaintext
===
|
|
role: system
|
|
message:
|
|
${BUILD_SYSTEM_PREFIX}
|
|
|
|
# Tech Stack
|
|
|
|
- You are building a React application.
|
|
- Use TypeScript.
|
|
- Use React Router. KEEP the routes in src/App.tsx
|
|
- Always put source code in the src folder.
|
|
- Put pages into src/pages/
|
|
- Put components into src/components/
|
|
- The main page (default page) is src/pages/Index.tsx
|
|
- UPDATE the main page to include the new components. OTHERWISE, the user can NOT see any components!
|
|
- ALWAYS try to use the shadcn/ui library.
|
|
- Tailwind CSS: always use Tailwind CSS for styling components. Utilize Tailwind classes extensively for layout, spacing, colors, and other design aspects.
|
|
|
|
Available packages and libraries:
|
|
|
|
- The lucide-react package is installed for icons.
|
|
- You ALREADY have ALL the shadcn/ui components and their dependencies installed. So you don't need to install them again.
|
|
- You have ALL the necessary Radix UI components installed.
|
|
- Use prebuilt components from the shadcn/ui library after importing them. Note that these files shouldn't be edited, so make new components if you need to change them.
|
|
|
|
|
|
${BUILD_SYSTEM_POSTFIX}
|
|
|
|
|
|
If the user wants to use supabase or do something that requires auth, database or server-side functions (e.g. loading API keys, secrets),
|
|
tell them that they need to add supabase to their app.
|
|
|
|
The following response will show a button that allows the user to add supabase to their app.
|
|
|
|
<dyad-add-integration provider="supabase"></dyad-add-integration>
|
|
|
|
# Examples
|
|
|
|
## Example 1: User wants to use Supabase
|
|
|
|
### User prompt
|
|
|
|
I want to use supabase in my app.
|
|
|
|
### Assistant response
|
|
|
|
You need to first add Supabase to your app.
|
|
|
|
<dyad-add-integration provider="supabase"></dyad-add-integration>
|
|
|
|
## Example 2: User wants to add auth to their app
|
|
|
|
### User prompt
|
|
|
|
I want to add auth to my app.
|
|
|
|
### Assistant response
|
|
|
|
You need to first add Supabase to your app and then we can add auth.
|
|
|
|
<dyad-add-integration provider="supabase"></dyad-add-integration>
|
|
|
|
|
|
===
|
|
role: user
|
|
message: This is my codebase. <dyad-file path="src/pages/Index.tsx">
|
|
// Update this page (the content is just a fallback if you fail to update the page)
|
|
|
|
import { MadeWithDyad } from "@/components/made-with-dyad";
|
|
|
|
const Index = () => {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-gray-100">
|
|
<div className="text-center">
|
|
<h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
|
|
<p className="text-xl text-gray-600">
|
|
Start building your amazing project here!
|
|
</p>
|
|
</div>
|
|
<MadeWithDyad />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Index;
|
|
|
|
</dyad-file>
|
|
|
|
|
|
|
|
===
|
|
role: assistant
|
|
message: OK, got it. I'm ready to help
|
|
|
|
===
|
|
role: user
|
|
message: tc=basic
|
|
|
|
===
|
|
role: assistant
|
|
message: This is a simple basic response
|
|
|
|
===
|
|
role: user
|
|
message: [dump] make it smaller
|
|
|
|
Selected components:
|
|
|
|
Component: h1 (file: src/pages/Index.tsx)
|
|
|
|
Snippet:
|
|
```
|
|
<div className="text-center">
|
|
<h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1> // <-- EDIT HERE
|
|
<p className="text-xl text-gray-600">
|
|
Start building your amazing project here!
|
|
</p>
|
|
``` |