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

Support add dependencies as part of approval workflow

Browse Source
This commit is contained in:
Will Chen
2025-04-21 16:07:40 -07:00
parent 02f1db7791
commit b07defc9b8
10 changed files with 212 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/__tests__/chat_stream_handlers.test.ts
View File

@@ -4,6 +4,7 @@ import {
getDyadRenameTags,
getDyadDeleteTags,
processFullResponseActions,
getDyadAddDependencyTags,
} from "../ipc/processors/response_processor";
import fs from "node:fs";
import git from "isomorphic-git";
@@ -49,6 +50,40 @@ vi.mock("../db", () => ({
},
}));
describe("getDyadAddDependencyTags", () => {
it("should return an empty array when no dyad-add-dependency tags are found", () => {
const result = getDyadAddDependencyTags("No dyad-add-dependency tags here");
expect(result).toEqual([]);
});
it("should return an array of dyad-add-dependency tags", () => {
const result = getDyadAddDependencyTags(
`<dyad-add-dependency packages="uuid"></dyad-add-dependency>`
);
expect(result).toEqual(["uuid"]);
});
it("should return all the packages in the dyad-add-dependency tags", () => {
const result = getDyadAddDependencyTags(
`<dyad-add-dependency packages="pkg1 pkg2"></dyad-add-dependency>`
);
expect(result).toEqual(["pkg1", "pkg2"]);
});
it("should return all the packages in the dyad-add-dependency tags", () => {
const result = getDyadAddDependencyTags(
`txt before<dyad-add-dependency packages="pkg1 pkg2"></dyad-add-dependency>text after`
);
expect(result).toEqual(["pkg1", "pkg2"]);
});
it("should return all the packages in multiple dyad-add-dependency tags", () => {
const result = getDyadAddDependencyTags(
`txt before<dyad-add-dependency packages="pkg1 pkg2"></dyad-add-dependency>txt between<dyad-add-dependency packages="pkg3"></dyad-add-dependency>text after`
);
expect(result).toEqual(["pkg1", "pkg2", "pkg3"]);
});
});
describe("getDyadWriteTags", () => {
it("should return an empty array when no dyad-write tags are found", () => {
const result = getDyadWriteTags("No dyad-write tags here");
@@ -407,7 +442,7 @@ const Index: React.FC = () => {
export default Index;
</dyad-write>
<dyad-add-dependency package="uuid"></dyad-add-dependency>
<dyad-add-dependency packages="uuid"></dyad-add-dependency>
<dyad-write path="src/types/uuid.d.ts" description="Adding type definitions for uuid">
declare module 'uuid' {

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

@@ -9,6 +9,7 @@ import {
FileText,
Check,
Loader2,
Package,
} from "lucide-react";
import type React from "react";
import { useCallback, useEffect, useRef, useState } from "react";
@@ -427,26 +428,54 @@ function ChatInputActions({
</ul>
</div>
)}
{proposal.packagesAdded?.length > 0 && (
<div className="mb-3">
<h4 className="font-semibold mb-1">Packages Added</h4>
<ul className="space-y-1">
{proposal.packagesAdded.map((pkg, index) => (
<li
key={index}
className="flex items-center space-x-2"
onClick={() => {
IpcClient.getInstance().openExternalUrl(
`https://www.npmjs.com/package/${pkg}`
);
}}
>
<Package
size={16}
className="text-muted-foreground flex-shrink-0"
/>
<span className="cursor-pointer text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
{pkg}
</span>
</li>
))}
</ul>
</div>
)}
<div>
<h4 className="font-semibold mb-1">Files Changed</h4>
<ul className="space-y-1">
{proposal.filesChanged.map((file, index) => (
<li key={index} className="flex items-center space-x-2">
<FileText
size={16}
className="text-muted-foreground flex-shrink-0"
/>
<span title={file.path} className="truncate cursor-default">
{file.name}
</span>
<span className="text-muted-foreground text-xs truncate">
- {file.summary}
</span>
</li>
))}
</ul>
</div>
{proposal.filesChanged?.length > 0 && (
<div>
<h4 className="font-semibold mb-1">Files Changed</h4>
<ul className="space-y-1">
{proposal.filesChanged.map((file, index) => (
<li key={index} className="flex items-center space-x-2">
<FileText
size={16}
className="text-muted-foreground flex-shrink-0"
/>
<span title={file.path} className="truncate cursor-default">
{file.name}
</span>
<span className="text-muted-foreground text-xs truncate">
- {file.summary}
</span>
</li>
))}
</ul>
</div>
)}
</div>
)}
</div>

56
src/components/chat/DyadAddDependency.tsx
View File

@@ -29,44 +29,9 @@ export const DyadAddDependency: React.FC<DyadAddDependencyProps> = ({
// Extract package attribute from the node if available
const packages = node?.properties?.packages?.split(" ") || "";
const [isInstalling, setIsInstalling] = useState(false);
const [error, setError] = useState<string | null>(null);
const selectedChatId = useAtomValue(selectedChatIdAtom);
const [messages, setMessages] = useAtom(chatMessagesAtom);
const { streamMessage, isStreaming } = useStreamChat();
const [isContentVisible, setIsContentVisible] = useState(false);
const hasChildren = !!children;
const handleInstall = async () => {
if (!packages || !selectedChatId) return;
setIsInstalling(true);
setError(null);
try {
const ipcClient = IpcClient.getInstance();
await ipcClient.addDependency({
chatId: selectedChatId,
packages,
});
// Refresh the chat messages
const chat = await IpcClient.getInstance().getChat(selectedChatId);
setMessages(chat.messages);
await streamMessage({
prompt: `I've installed ${packages.join(", ")}. Keep going.`,
chatId: selectedChatId,
});
} catch (err) {
setError("There was an error installing this package.");
const chat = await IpcClient.getInstance().getChat(selectedChatId);
setMessages(chat.messages);
} finally {
setIsInstalling(false);
}
};
return (
<div
className={`bg-(--background-lightest) dark:bg-gray-900 hover:bg-(--background-lighter) rounded-lg px-4 py-3 border my-2 ${
@@ -139,27 +104,6 @@ export const DyadAddDependency: React.FC<DyadAddDependencyProps> = ({
</div>
</div>
)}
{/* Always show install button if there are no children */}
{packages.length > 0 && !hasChildren && (
<div className="mt-4 flex justify-center">
<Button
onClick={(e) => {
if (hasChildren) e.stopPropagation();
handleInstall();
}}
disabled={isInstalling || isStreaming}
size="default"
variant="default"
className="font-medium bg-primary/90 flex items-center gap-2 w-full max-w-sm py-4 mt-2 mb-2"
>
<Download size={16} />
{isInstalling ? "Installing..." : "Install packages"}
</Button>
{error && <div className="text-sm text-red-500 mt-2">{error}</div>}
</div>
)}
</div>
);
};

79
src/ipc/handlers/dependency_handlers.ts
View File

@@ -2,12 +2,8 @@ import { ipcMain } from "electron";
import { db } from "../../db";
import { messages, apps, chats } from "../../db/schema";
import { eq } from "drizzle-orm";
import { spawn } from "node:child_process";
import { exec } from "node:child_process";
import { promisify } from "node:util";
import { getDyadAppPath } from "../../paths/paths";
const execPromise = promisify(exec);
import { executeAddDependency } from "../processors/executeAddDependency";
export function registerDependencyHandlers() {
ipcMain.handle(
@@ -53,74 +49,11 @@ export function registerDependencyHandlers() {
);
}
// Check if the message content contains the dependency tag
const dependencyTagRegex = new RegExp(
`<dyad-add-dependency packages="${packages.join(
" "
)}">[^<]*</dyad-add-dependency>`,
"g"
);
if (!dependencyTagRegex.test(message.content)) {
throw new Error(
`Message doesn't contain the dependency tag for packages ${packages.join(
", "
)}`
);
}
// Execute npm install
try {
const { stdout, stderr } = await execPromise(
`npm install ${packages.join(" ")}`,
{
cwd: getDyadAppPath(app.path),
}
);
const installResults = stdout + (stderr ? `\n${stderr}` : "");
// Update the message content with the installation results
const updatedContent = message.content.replace(
new RegExp(
`<dyad-add-dependency packages="${packages.join(
" "
)}">[^<]*</dyad-add-dependency>`,
"g"
),
`<dyad-add-dependency packages="${packages.join(
" "
)}">${installResults}</dyad-add-dependency>`
);
// Save the updated message back to the database
await db
.update(messages)
.set({ content: updatedContent })
.where(eq(messages.id, message.id));
// Return undefined implicitly
} catch (error: any) {
// Update the message with the error
const updatedContent = message.content.replace(
new RegExp(
`<dyad-add-dependency packages="${packages.join(
" "
)}">[^<]*</dyad-add-dependency>`,
"g"
),
`<dyad-add-dependency packages="${packages.join(" ")}"><dyad-error>${
error.message
}</dyad-error></dyad-add-dependency>`
);
// Save the updated message back to the database
await db
.update(messages)
.set({ content: updatedContent })
.where(eq(messages.id, message.id));
throw error;
}
executeAddDependency({
packages,
message,
appPath: getDyadAppPath(app.path),
});
}
);
}

9
src/ipc/handlers/proposal_handlers.ts
View File

@@ -6,6 +6,7 @@ import { desc, eq, and, Update } from "drizzle-orm";
import path from "node:path"; // Import path for basename
// Import tag parsers
import {
getDyadAddDependencyTags,
getDyadChatSummaryTag,
getDyadWriteTags,
processFullResponseActions,
@@ -67,9 +68,14 @@ const getProposalHandler = async (
// Parse tags directly from message content
const proposalTitle = getDyadChatSummaryTag(messageContent);
const proposalFiles = getDyadWriteTags(messageContent); // Gets { path: string, content: string }[]
const packagesAdded = getDyadAddDependencyTags(messageContent);
// Check if we have enough information to create a proposal
if (proposalTitle || proposalFiles.length > 0) {
if (
proposalTitle ||
proposalFiles.length > 0 ||
packagesAdded.length > 0
) {
const proposal: CodeProposal = {
type: "code-proposal",
// Use parsed title or a default title if summary tag is missing but write tags exist
@@ -80,6 +86,7 @@ const getProposalHandler = async (
path: tag.path,
summary: tag.description ?? "(no change summary found)", // Generic summary
})),
packagesAdded,
};
logger.log(
"Generated code proposal. title=",

4
src/ipc/ipc_types.ts
View File

@@ -36,10 +36,10 @@ export interface CreateAppResult {
}
export interface Message {
id: string;
id: number;
role: "user" | "assistant";
content: string;
approvalState?: "approved" | "rejected";
approvalState?: "approved" | "rejected" | null;
}
export interface Chat {

71
src/ipc/processors/executeAddDependency.ts Normal file
View File

@@ -0,0 +1,71 @@
import { db } from "../../db";
import { messages } from "../../db/schema";
import { eq } from "drizzle-orm";
import { Message } from "../ipc_types";
import { exec } from "node:child_process";
import { promisify } from "node:util";
export const execPromise = promisify(exec);
export async function executeAddDependency({
packages,
message,
appPath,
}: {
packages: string[];
message: Message;
appPath: string;
}) {
const packageStr = packages.join(" ");
try {
const { stdout, stderr } = await execPromise(
`(pnpm add ${packageStr}) || (npm install ${packageStr})`,
{
cwd: appPath,
}
);
const installResults = stdout + (stderr ? `\n${stderr}` : "");
// Update the message content with the installation results
const updatedContent = message.content.replace(
new RegExp(
`<dyad-add-dependency packages="${packages.join(
" "
)}">[^<]*</dyad-add-dependency>`,
"g"
),
`<dyad-add-dependency packages="${packages.join(
" "
)}">${installResults}</dyad-add-dependency>`
);
// Save the updated message back to the database
await db
.update(messages)
.set({ content: updatedContent })
.where(eq(messages.id, message.id));
// Return undefined implicitly
} catch (error: any) {
// Update the message with the error
const updatedContent = message.content.replace(
new RegExp(
`<dyad-add-dependency packages="${packages.join(
" "
)}">[^<]*</dyad-add-dependency>`,
"g"
),
`<dyad-add-dependency packages="${packages.join(" ")}"><dyad-error>${
error.message
}</dyad-error></dyad-add-dependency>`
);
// Save the updated message back to the database
await db
.update(messages)
.set({ content: updatedContent })
.where(eq(messages.id, message.id));
throw error;
}
}

43
src/ipc/processors/response_processor.ts
View File

@@ -1,6 +1,6 @@
import { db } from "../../db";
import { chats, messages } from "../../db/schema";
import { eq } from "drizzle-orm";
import { and, eq } from "drizzle-orm";
import fs from "node:fs";
import { getDyadAppPath } from "../../paths/paths";
import path from "node:path";
@@ -8,6 +8,7 @@ import git from "isomorphic-git";
import { getGithubUser } from "../handlers/github_handlers";
import { getGitAuthor } from "../utils/git_author";
import log from "electron-log";
import { executeAddDependency } from "./executeAddDependency";
const logger = log.scope("response_processor");
@@ -81,11 +82,11 @@ export function getDyadDeleteTags(fullResponse: string): string[] {
export function getDyadAddDependencyTags(fullResponse: string): string[] {
const dyadAddDependencyRegex =
/<dyad-add-dependency package="([^"]+)">[^<]*<\/dyad-add-dependency>/g;
/<dyad-add-dependency packages="([^"]+)">[^<]*<\/dyad-add-dependency>/g;
let match;
const packages: string[] = [];
while ((match = dyadAddDependencyRegex.exec(fullResponse)) !== null) {
packages.push(match[1]);
packages.push(...match[1].split(" "));
}
return packages;
}
@@ -134,7 +135,36 @@ export async function processFullResponseActions(
const dyadDeletePaths = getDyadDeleteTags(fullResponse);
const dyadAddDependencyPackages = getDyadAddDependencyTags(fullResponse);
const message = await db.query.messages.findFirst({
where: and(
eq(messages.id, messageId),
eq(messages.role, "assistant"),
eq(messages.chatId, chatId)
),
});
if (!message) {
logger.error(`No message found for ID: ${messageId}`);
return {};
}
// TODO: Handle add dependency tags
if (dyadAddDependencyPackages.length > 0) {
await executeAddDependency({
packages: dyadAddDependencyPackages,
message: message,
appPath,
});
writtenFiles.push("package.json");
const pnpmFilename = "pnpm-lock.yaml";
if (fs.existsSync(path.join(appPath, pnpmFilename))) {
writtenFiles.push(pnpmFilename);
}
const packageLockFilename = "package-lock.json";
if (fs.existsSync(path.join(appPath, packageLockFilename))) {
writtenFiles.push(packageLockFilename);
}
}
// Process all file writes
for (const tag of dyadWriteTags) {
@@ -218,7 +248,8 @@ export async function processFullResponseActions(
hasChanges =
writtenFiles.length > 0 ||
renamedFiles.length > 0 ||
deletedFiles.length > 0;
deletedFiles.length > 0 ||
dyadAddDependencyPackages.length > 0;
if (hasChanges) {
// Stage all written files
for (const file of writtenFiles) {
@@ -237,6 +268,10 @@ export async function processFullResponseActions(
changes.push(`renamed ${renamedFiles.length} file(s)`);
if (deletedFiles.length > 0)
changes.push(`deleted ${deletedFiles.length} file(s)`);
if (dyadAddDependencyPackages.length > 0)
changes.push(
`added ${dyadAddDependencyPackages.join(", ")} package(s)`
);
// Use chat summary, if provided, or default for commit message
await git.commit({

1
src/lib/schemas.ts
View File

@@ -118,6 +118,7 @@ export interface CodeProposal {
title: string;
securityRisks: SecurityRisk[];
filesChanged: FileChange[];
packagesAdded: string[];
}
export interface SuggestedAction {

2
src/prompts/system_prompt.ts
View File

@@ -25,7 +25,7 @@ If new code needs to be written (i.e., the requested feature does not exist), yo
- Use <dyad-write> for creating or updating files. Try to create small, focused files that will be easy to maintain. Use only one <dyad-write> block per file. Do not forget to close the dyad-write tag after writing the file. If you do NOT need to change a file, then do not use the <dyad-write> tag.
- Use <dyad-rename> for renaming files.
- Use <dyad-delete> for removing files.
- Use <dyad-add-dependency> for installing packages. IF you need to install a package, then STOP. The user will install the package and then continue the conversation.
- Use <dyad-add-dependency> for installing packages.
- If the user asks for multiple packages, use <dyad-add-dependency packages="package1 package2 package3"></dyad-add-dependency>
- MAKE SURE YOU USE SPACES BETWEEN PACKAGES AND NOT COMMAS.
- Look carefully at all imports and ensure the files you're importing are present. If any packages need to be installed, use <dyad-add-dependency>.