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

6
src/atoms/previewAtoms.ts
View File

@@ -1,6 +1,6 @@
import { ComponentSelection } from "@/ipc/ipc_types";
import { atom } from "jotai";
export const selectedComponentPreviewAtom = atom<ComponentSelection | null>(
null,
);
export const selectedComponentsPreviewAtom = atom<ComponentSelection[]>([]);
export const previewIframeRefAtom = atom<HTMLIFrameElement | null>(null);

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,
};

6
src/hooks/useStreamChat.ts
View File

@@ -69,14 +69,14 @@ export function useStreamChat({
chatId,
redo,
attachments,
selectedComponent,
selectedComponents,
onSettled,
}: {
prompt: string;
chatId: number;
redo?: boolean;
attachments?: FileAttachment[];
selectedComponent?: ComponentSelection | null;
selectedComponents?: ComponentSelection[];
onSettled?: () => void;
}) => {
if (
@@ -106,7 +106,7 @@ export function useStreamChat({
let hasIncrementedStreamCount = false;
try {
IpcClient.getInstance().streamMessage(prompt, {
selectedComponent: selectedComponent ?? null,
selectedComponents: selectedComponents ?? [],
chatId,
redo,
attachments,

88
src/ipc/handlers/chat_stream_handlers.ts
View File

@@ -351,44 +351,51 @@ export function registerChatStreamHandlers() {
} catch (e) {
logger.error("Failed to inline referenced prompts:", e);
}
if (req.selectedComponent) {
let componentSnippet = "[component snippet not available]";
try {
const componentFileContent = await readFile(
path.join(
getDyadAppPath(chat.app.path),
req.selectedComponent.relativePath,
),
"utf8",
);
const lines = componentFileContent.split("\n");
const selectedIndex = req.selectedComponent.lineNumber - 1;
// Let's get one line before and three after for context.
const startIndex = Math.max(0, selectedIndex - 1);
const endIndex = Math.min(lines.length, selectedIndex + 4);
const componentsToProcess = req.selectedComponents || [];
const snippetLines = lines.slice(startIndex, endIndex);
const selectedLineInSnippetIndex = selectedIndex - startIndex;
if (componentsToProcess.length > 0) {
userPrompt += "\n\nSelected components:\n";
if (snippetLines[selectedLineInSnippetIndex]) {
snippetLines[selectedLineInSnippetIndex] =
`${snippetLines[selectedLineInSnippetIndex]} // <-- EDIT HERE`;
for (const component of componentsToProcess) {
let componentSnippet = "[component snippet not available]";
try {
const componentFileContent = await readFile(
path.join(getDyadAppPath(chat.app.path), component.relativePath),
"utf8",
);
const lines = componentFileContent.split(/\r?\n/);
const selectedIndex = component.lineNumber - 1;
// Let's get one line before and three after for context.
const startIndex = Math.max(0, selectedIndex - 1);
const endIndex = Math.min(lines.length, selectedIndex + 4);
const snippetLines = lines.slice(startIndex, endIndex);
const selectedLineInSnippetIndex = selectedIndex - startIndex;
if (snippetLines[selectedLineInSnippetIndex]) {
snippetLines[selectedLineInSnippetIndex] =
`${snippetLines[selectedLineInSnippetIndex]} // <-- EDIT HERE`;
}
componentSnippet = snippetLines.join("\n");
} catch (err) {
logger.error(
`Error reading selected component file content: ${err}`,
);
}
componentSnippet = snippetLines.join("\n");
} catch (err) {
logger.error(`Error reading selected component file content: ${err}`);
}
userPrompt += `\n\nSelected component: ${req.selectedComponent.name} (file: ${req.selectedComponent.relativePath})
userPrompt += `\n${componentsToProcess.length > 1 ? `${componentsToProcess.indexOf(component) + 1}. ` : ""}Component: ${component.name} (file: ${component.relativePath})
Snippet:
\`\`\`
${componentSnippet}
\`\`\`
`;
}
}
await db
.insert(messages)
.values({
@@ -460,18 +467,18 @@ ${componentSnippet}
const appPath = getDyadAppPath(updatedChat.app.path);
// When we don't have smart context enabled, we
// only include the selected component's file for codebase context.
// only include the selected components' files for codebase context.
//
// If we have selected component and smart context is enabled,
// If we have selected components and smart context is enabled,
// we handle this specially below.
const chatContext =
req.selectedComponent && !isSmartContextEnabled
req.selectedComponents &&
req.selectedComponents.length > 0 &&
!isSmartContextEnabled
? {
contextPaths: [
{
globPath: req.selectedComponent.relativePath,
},
],
contextPaths: req.selectedComponents.map((component) => ({
globPath: component.relativePath,
})),
smartContextAutoIncludes: [],
}
: validateChatContext(updatedChat.app.chatContext);
@@ -482,12 +489,19 @@ ${componentSnippet}
chatContext,
});
// For smart context and selected component, we will mark the selected component's file as focused.
// For smart context and selected components, we will mark the selected components' files as focused.
// This means that we don't do the regular smart context handling, but we'll allow fetching
// additional files through <dyad-read> as needed.
if (isSmartContextEnabled && req.selectedComponent) {
if (
isSmartContextEnabled &&
req.selectedComponents &&
req.selectedComponents.length > 0
) {
const selectedPaths = new Set(
req.selectedComponents.map((component) => component.relativePath),
);
for (const file of files) {
if (file.path === req.selectedComponent.relativePath) {
if (selectedPaths.has(file.path)) {
file.focused = true;
}
}

8
src/ipc/ipc_client.ts
View File

@@ -387,7 +387,7 @@ export class IpcClient {
public streamMessage(
prompt: string,
options: {
selectedComponent: ComponentSelection | null;
selectedComponents?: ComponentSelection[];
chatId: number;
redo?: boolean;
attachments?: FileAttachment[];
@@ -401,7 +401,7 @@ export class IpcClient {
chatId,
redo,
attachments,
selectedComponent,
selectedComponents,
onUpdate,
onEnd,
onError,
@@ -441,7 +441,7 @@ export class IpcClient {
prompt,
chatId,
redo,
selectedComponent,
selectedComponents,
attachments: fileDataArray,
})
.catch((err) => {
@@ -464,7 +464,7 @@ export class IpcClient {
prompt,
chatId,
redo,
selectedComponent,
selectedComponents,
})
.catch((err) => {
console.error("Error streaming message:", err);

2
src/ipc/ipc_types.ts
View File

@@ -41,7 +41,7 @@ export interface ChatStreamParams {
data: string; // Base64 encoded file data
attachmentType: "upload-to-codebase" | "chat-context"; // FileAttachment type
}>;
selectedComponent: ComponentSelection | null;
selectedComponents?: ComponentSelection[];
}
export interface ChatResponseEnd {