kunthawat/moreminimore-vibe
1
0
Fork 0
Code Issues Pull Requests Actions 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

32
src/components/chat/ChatInput.tsx
View File

@@ -61,8 +61,11 @@ import { FileAttachmentDropdown } from "./FileAttachmentDropdown";
import { showError, showExtraFilesToast } from "@/lib/toast";
import { ChatInputControls } from "../ChatInputControls";
import { ChatErrorBox } from "./ChatErrorBox";
import { selectedComponentPreviewAtom } from "@/atoms/previewAtoms";
import { SelectedComponentDisplay } from "./SelectedComponentDisplay";
import {
selectedComponentsPreviewAtom,
previewIframeRefAtom,
} from "@/atoms/previewAtoms";
import { SelectedComponentsDisplay } from "./SelectedComponentDisplay";
import { useCheckProblems } from "@/hooks/useCheckProblems";
import { LexicalChatInput } from "./LexicalChatInput";
import { useChatModeToggle } from "@/hooks/useChatModeToggle";
@@ -84,9 +87,10 @@ export function ChatInput({ chatId }: { chatId?: number }) {
const setMessagesById = useSetAtom(chatMessagesByIdAtom);
const setIsPreviewOpen = useSetAtom(isPreviewOpenAtom);
const [showTokenBar, setShowTokenBar] = useAtom(showTokenBarAtom);
const [selectedComponent, setSelectedComponent] = useAtom(
selectedComponentPreviewAtom,
const [selectedComponents, setSelectedComponents] = useAtom(
selectedComponentsPreviewAtom,
);
const previewIframeRef = useAtomValue(previewIframeRefAtom);
const { checkProblems } = useCheckProblems(appId);
// Use the attachments hook
const {
@@ -148,7 +152,21 @@ export function ChatInput({ chatId }: { chatId?: number }) {
const currentInput = inputValue;
setInputValue("");
setSelectedComponent(null);
// Use all selected components for multi-component editing
const componentsToSend =
selectedComponents && selectedComponents.length > 0
? selectedComponents
: [];
setSelectedComponents([]);
// Clear overlays in the preview iframe
if (previewIframeRef?.contentWindow) {
previewIframeRef.contentWindow.postMessage(
{ type: "clear-dyad-component-overlays" },
"*",
);
}
// Send message with attachments and clear them after sending
await streamMessage({
@@ -156,7 +174,7 @@ export function ChatInput({ chatId }: { chatId?: number }) {
chatId,
attachments,
redo: false,
selectedComponent,
selectedComponents: componentsToSend,
});
clearAttachments();
posthog.capture("chat:submit");
@@ -288,7 +306,7 @@ export function ChatInput({ chatId }: { chatId?: number }) {
/>
)}
<SelectedComponentDisplay />
<SelectedComponentsDisplay />
{/* Use the AttachmentsList component */}
<AttachmentsList

116
src/components/chat/SelectedComponentDisplay.tsx
View File

@@ -1,47 +1,99 @@
import { selectedComponentPreviewAtom } from "@/atoms/previewAtoms";
import { useAtom } from "jotai";
import {
selectedComponentsPreviewAtom,
previewIframeRefAtom,
} from "@/atoms/previewAtoms";
import { useAtom, useAtomValue } from "jotai";
import { Code2, X } from "lucide-react";
export function SelectedComponentDisplay() {
const [selectedComponent, setSelectedComponent] = useAtom(
selectedComponentPreviewAtom,
export function SelectedComponentsDisplay() {
const [selectedComponents, setSelectedComponents] = useAtom(
selectedComponentsPreviewAtom,
);
const previewIframeRef = useAtomValue(previewIframeRefAtom);
if (!selectedComponent) {
const handleRemoveComponent = (index: number) => {
const componentToRemove = selectedComponents[index];
const newComponents = selectedComponents.filter((_, i) => i !== index);
setSelectedComponents(newComponents);
// Remove the specific overlay from the iframe
if (previewIframeRef?.contentWindow) {
previewIframeRef.contentWindow.postMessage(
{
type: "remove-dyad-component-overlay",
componentId: componentToRemove.id,
},
"*",
);
}
};
const handleClearAll = () => {
setSelectedComponents([]);
if (previewIframeRef?.contentWindow) {
previewIframeRef.contentWindow.postMessage(
{ type: "clear-dyad-component-overlays" },
"*",
);
}
};
if (!selectedComponents || selectedComponents.length === 0) {
return null;
}
return (
<div className="p-2 pb-1" data-testid="selected-component-display">
<div className="flex items-center justify-between rounded-md bg-indigo-600/10 px-2 py-1 text-sm">
<div className="flex items-center gap-2 overflow-hidden">
<Code2
size={16}
className="flex-shrink-0 text-indigo-600 dark:text-indigo-400"
/>
<div className="flex flex-col overflow-hidden">
<span
className="truncate font-medium text-indigo-800 dark:text-indigo-300"
title={selectedComponent.name}
>
{selectedComponent.name}
</span>
<span
className="truncate text-xs text-indigo-600/80 dark:text-indigo-400/80"
title={`${selectedComponent.relativePath}:${selectedComponent.lineNumber}`}
>
{selectedComponent.relativePath}:{selectedComponent.lineNumber}
</span>
</div>
</div>
<div
className="p-2 pb-1 max-h-[180px] overflow-y-auto"
data-testid="selected-component-display"
>
<div className="flex items-center justify-between mb-2 px-1">
<span className="text-xs font-medium text-muted-foreground">
Selected Components ({selectedComponents.length})
</span>
<button
onClick={() => setSelectedComponent(null)}
className="ml-2 flex-shrink-0 rounded-full p-0.5 hover:bg-indigo-600/20"
title="Deselect component"
onClick={handleClearAll}
className="text-xs text-muted-foreground hover:text-foreground transition-colors"
title="Clear all selected components"
>
<X size={18} className="text-indigo-600 dark:text-indigo-400" />
Clear all
</button>
</div>
{selectedComponents.map((selectedComponent, index) => (
<div key={selectedComponent.id} className="mb-1 last:mb-0">
<div className="flex items-center justify-between rounded-md bg-indigo-600/10 px-2 py-1 text-sm">
<div className="flex items-center gap-2 overflow-hidden">
<Code2
size={16}
className="flex-shrink-0 text-indigo-600 dark:text-indigo-400"
/>
<div className="flex flex-col overflow-hidden">
<span
className="truncate font-medium text-indigo-800 dark:text-indigo-300"
title={selectedComponent.name}
>
{selectedComponent.name}
</span>
<span
className="truncate text-xs text-indigo-600/80 dark:text-indigo-400/80"
title={`${selectedComponent.relativePath}:${selectedComponent.lineNumber}`}
>
{selectedComponent.relativePath}:
{selectedComponent.lineNumber}
</span>
</div>
</div>
<button
onClick={() => handleRemoveComponent(index)}
className="ml-2 flex-shrink-0 rounded-full p-0.5 hover:bg-indigo-600/20"
title="Deselect component"
>
<X size={18} className="text-indigo-600 dark:text-indigo-400" />
</button>
</div>
</div>
))}
</div>
);
}

57
src/components/preview_panel/PreviewIframe.tsx
View File

@@ -35,7 +35,10 @@ import {
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useStreamChat } from "@/hooks/useStreamChat";
import { selectedComponentPreviewAtom } from "@/atoms/previewAtoms";
import {
selectedComponentsPreviewAtom,
previewIframeRefAtom,
} from "@/atoms/previewAtoms";
import { ComponentSelection } from "@/ipc/ipc_types";
import {
Tooltip,
@@ -52,6 +55,7 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { useRunApp } from "@/hooks/useRunApp";
import { useShortcut } from "@/hooks/useShortcut";
import { cn } from "@/lib/utils";
import { normalizePath } from "../../../shared/normalizePath";
interface ErrorBannerProps {
error: { message: string; source: "preview-app" | "dyad-app" } | undefined;
@@ -169,9 +173,10 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
const [canGoForward, setCanGoForward] = useState(false);
const [navigationHistory, setNavigationHistory] = useState<string[]>([]);
const [currentHistoryPosition, setCurrentHistoryPosition] = useState(0);
const [selectedComponentPreview, setSelectedComponentPreview] = useAtom(
selectedComponentPreviewAtom,
const [selectedComponentsPreview, setSelectedComponentsPreview] = useAtom(
selectedComponentsPreviewAtom,
);
const setPreviewIframeRef = useSetAtom(previewIframeRefAtom);
const iframeRef = useRef<HTMLIFrameElement>(null);
const [isPicking, setIsPicking] = useState(false);
@@ -189,9 +194,14 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
//detect if the user is using Mac
const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
// Update iframe ref atom
useEffect(() => {
setPreviewIframeRef(iframeRef.current);
}, [iframeRef.current, setPreviewIframeRef]);
// Deactivate component selector when selection is cleared
useEffect(() => {
if (!selectedComponentPreview) {
if (!selectedComponentsPreview || selectedComponentsPreview.length === 0) {
if (iframeRef.current?.contentWindow) {
iframeRef.current.contentWindow.postMessage(
{ type: "deactivate-dyad-component-selector" },
@@ -200,7 +210,7 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
}
setIsPicking(false);
}
}, [selectedComponentPreview]);
}, [selectedComponentsPreview]);
// Add message listener for iframe errors and navigation events
useEffect(() => {
@@ -217,8 +227,37 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
if (event.data?.type === "dyad-component-selected") {
console.log("Component picked:", event.data);
setSelectedComponentPreview(parseComponentSelection(event.data));
setIsPicking(false);
// Parse the single selected component
const component = event.data.component
? parseComponentSelection({
type: "dyad-component-selected",
id: event.data.component.id,
name: event.data.component.name,
})
: null;
if (!component) return;
// Add to existing components, avoiding duplicates by id
setSelectedComponentsPreview((prev) => {
// Check if this component is already selected
if (prev.some((c) => c.id === component.id)) {
return prev;
}
return [...prev, component];
});
return;
}
if (event.data?.type === "dyad-component-deselected") {
const componentId = event.data.componentId;
if (componentId) {
setSelectedComponentsPreview((prev) =>
prev.filter((c) => c.id !== componentId),
);
}
return;
}
@@ -306,7 +345,7 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
errorMessage,
setErrorMessage,
setIsComponentSelectorInitialized,
setSelectedComponentPreview,
setSelectedComponentsPreview,
]);
useEffect(() => {
@@ -742,7 +781,7 @@ function parseComponentSelection(data: any): ComponentSelection | null {
return {
id,
name,
relativePath,
relativePath: normalizePath(relativePath),
lineNumber,
columnNumber,
};