kunthawat/moreminimore-vibe
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: multi-component-selector (#1728)

Browse Source 
<!-- 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. -->
This commit is contained in:
Mohamed Aziz Mejri
2025-11-13 22:26:41 +01:00
committed by GitHub
parent c4591996ea
commit 2a7f5a8909
28 changed files with 646 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
e2e-tests/snapshots/select_component.spec.ts_deselect-component-1.aria.yml
View File

@@ -5,5 +5,4 @@
- paragraph: Start building your amazing project here!
- link "Made with Dyad":
- /url: https://www.dyad.sh/
- img
- text: Edit with AI h1 src/pages/Index.tsx
- text: h1 src/pages/Index.tsx

2
e2e-tests/snapshots/select_component.spec.ts_deselect-component-2.aria.yml
View File

@@ -1,3 +1,5 @@
- text: Selected Components (1)
- button "Clear all"
- img
- text: h1 src/pages/Index.tsx:9
- button "Deselect component":

10
e2e-tests/snapshots/select_component.spec.ts_deselect-individual-component-from-multiple-1.aria.yml Normal file
View File

@@ -0,0 +1,10 @@
- text: Selected Components (2)
- button "Clear all"
- img
- text: h1 src/pages/Index.tsx:9
- button "Deselect component":
- img
- img
- text: a src/components/made-with-dyad.tsx:4
- button "Deselect component":
- img

8
e2e-tests/snapshots/select_component.spec.ts_deselect-individual-component-from-multiple-2.aria.yml Normal file
View File

@@ -0,0 +1,8 @@
- region "Notifications (F8)":
- list
- region "Notifications alt+T"
- heading "Welcome to Your Blank App" [level=1]
- paragraph: Start building your amazing project here!
- link "Made with Dyad":
- /url: https://www.dyad.sh/
- text: a src/components/made-with-dyad.tsx

6
e2e-tests/snapshots/select_component.spec.ts_deselect-individual-component-from-multiple-3.aria.yml Normal file
View File

@@ -0,0 +1,6 @@
- text: Selected Components (1)
- button "Clear all"
- img
- text: a src/components/made-with-dyad.tsx:4
- button "Deselect component":
- img

3
e2e-tests/snapshots/select_component.spec.ts_select-component-1.aria.yml
View File

@@ -5,5 +5,4 @@
- paragraph: Start building your amazing project here!
- link "Made with Dyad":
- /url: https://www.dyad.sh/
- img
- text: Edit with AI h1 src/pages/Index.tsx
- text: h1 src/pages/Index.tsx

4
e2e-tests/snapshots/select_component.spec.ts_select-component-1.txt
View File

@@ -104,7 +104,9 @@ message: This is a simple basic response
role: user
message: [dump] make it smaller
Selected component: h1 (file: src/pages/Index.tsx)
Selected components:
Component: h1 (file: src/pages/Index.tsx)
Snippet:
```

2
e2e-tests/snapshots/select_component.spec.ts_select-component-2.aria.yml
View File

@@ -1,3 +1,5 @@
- text: Selected Components (1)
- button "Clear all"
- img
- text: h1 src/pages/Index.tsx:9
- button "Deselect component":

9
e2e-tests/snapshots/select_component.spec.ts_select-component-next-js-1.aria.yml
View File

@@ -1 +1,8 @@
- text: Edit with AI h1 src/app/page.tsx
- main:
- heading "Blank page" [level=1]
- link "Made with Dyad":
- /url: https://www.dyad.sh/
- text: h1 src/app/page.tsx
- alert
- button "Open Next.js Dev Tools":
- img

4
e2e-tests/snapshots/select_component.spec.ts_select-component-next-js-1.txt
View File

@@ -151,7 +151,9 @@ message: This is a simple basic response
role: user
message: [dump] make it smaller
Selected component: h1 (file: src/app/page.tsx)
Selected components:
Component: h1 (file: src/app/page.tsx)
Snippet:
```

2
e2e-tests/snapshots/select_component.spec.ts_select-component-next-js-2.aria.yml
View File

@@ -1,3 +1,5 @@
- text: Selected Components (1)
- button "Clear all"
- img
- text: h1 src/app/page.tsx:7
- button "Deselect component":

3
e2e-tests/snapshots/select_component.spec.ts_select-component-next-js-3.aria.yml
View File

@@ -2,3 +2,6 @@
- heading "Blank page" [level=1]
- link "Made with Dyad":
- /url: https://www.dyad.sh/
- alert
- button "Open Next.js Dev Tools":
- img

8
e2e-tests/snapshots/select_component.spec.ts_select-multiple-components-1.aria.yml Normal file
View File

@@ -0,0 +1,8 @@
- region "Notifications (F8)":
- list
- region "Notifications alt+T"
- heading "Welcome to Your Blank App" [level=1]
- paragraph: Start building your amazing project here!
- link "Made with Dyad":
- /url: https://www.dyad.sh/
- text: a src/components/made-with-dyad.tsx

27
e2e-tests/snapshots/select_component.spec.ts_select-multiple-components-1.txt Normal file
View File

@@ -0,0 +1,27 @@
===
role: user
message: [dump] make both smaller
Selected components:
1. 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>
```
2. Component: a (file: src/components/made-with-dyad.tsx)
Snippet:
```
<div className="p-4 text-center">
<a // <-- EDIT HERE
href="https://www.dyad.sh/"
target="_blank"
rel="noopener noreferrer"
```

10
e2e-tests/snapshots/select_component.spec.ts_select-multiple-components-2.aria.yml Normal file
View File

@@ -0,0 +1,10 @@
- text: Selected Components (2)
- button "Clear all"
- img
- text: h1 src/pages/Index.tsx:9
- button "Deselect component":
- img
- img
- text: a src/components/made-with-dyad.tsx:4
- button "Deselect component":
- img

7
e2e-tests/snapshots/select_component.spec.ts_select-multiple-components-3.aria.yml Normal file
View File

@@ -0,0 +1,7 @@
- region "Notifications (F8)":
- list
- region "Notifications alt+T"
- heading "Welcome to Your Blank App" [level=1]
- paragraph: Start building your amazing project here!
- link "Made with Dyad":
- /url: https://www.dyad.sh/

4
e2e-tests/snapshots/select_component.spec.ts_upgrade-app-to-select-component-1.txt
View File

@@ -2,7 +2,9 @@
role: user
message: [dump] make it smaller
Selected component: h1 (file: src/pages/Index.tsx)
Selected components:
Component: h1 (file: src/pages/Index.tsx)
Snippet:
```