Skip to content

B
bit-pm
Unverified 提交 30b5c0d0 authored 作者: Will Chen's avatar Will Chen 提交者： GitHub
浏览文件
操作

Replace thinking with native Gemini thinking summaries (#400)

This uses Gemini's native [thinking summaries](https://cloud.google.com/vertex-ai/generative-ai/docs/thinking#thought-summaries) which were recently added to the API. Why? The grafted thinking would sometimes cause weird issues where the model, especially Gemini 2.5 Flash, got confused and put dyad tags like `<dyad-write>` inside the `<think>` tags. This also improves the UX because you can see the native thoughts rather than having the Gemini response load for a while without any feedback. I tried adding Anthropic extended thinking, however it requires temp to be set at 1, which isn't ideal for Dyad's use case where we need precise syntax following.
上级 3a6ab12b
显示空白字符变更
内嵌 并排
正在显示 包含 996 行增加 和 600 行删除
e2e-tests/engine.spec.ts
浏览文件 @ 30b5c0d0
......@@ -11,15 +11,29 @@ testSkipIfWindows("send message to engine", async ({ po }) => {
await po.snapshotMessages({ replaceDumpPath: true });
});
testSkipIfWindows("send message to gateway", async ({ po }) => {
testSkipIfWindows("send message to engine - openai gpt-4.1", async ({ po }) => {
await po.setUpDyadPro();
await po.selectModel({ provider: "Google", model: "Gemini 2.5 Flash" });
await po.sendPrompt("[dump] tc=gateway-simple");
// By default, it's using auto which points to Flash 2.5 and doesn't
// use engine.
await po.selectModel({ provider: "OpenAI", model: "GPT 4.1" });
await po.sendPrompt("[dump] tc=turbo-edits");
await po.snapshotServerDump("request");
await po.snapshotMessages({ replaceDumpPath: true });
});
testSkipIfWindows(
"send message to engine - anthropic claude sonnet 4",
async ({ po }) => {
await po.setUpDyadPro();
// By default, it's using auto which points to Flash 2.5 and doesn't
// use engine.
await po.selectModel({ provider: "Anthropic", model: "Claude 4 Sonnet" });
await po.sendPrompt("[dump] tc=turbo-edits");
await po.snapshotServerDump("request");
},
);
// auto (defaults to Gemini 2.5 Flash)
testSkipIfWindows("auto should send message to gateway", async ({ po }) => {
await po.setUpDyadPro();
......
e2e-tests/gateway.spec.ts 0 → 100644
浏览文件 @ 30b5c0d0
import { testSkipIfWindows } from "./helpers/test_helper";
testSkipIfWindows("gemini 2.5 flash", async ({ po }) => {
// Note: we do not need to disable pro modes because 2.5 flash doesn't
// use engine.
await po.setUpDyadPro();
await po.selectModel({ provider: "Google", model: "Gemini 2.5 Flash" });
await po.sendPrompt("[dump] tc=gateway-simple");
await po.snapshotServerDump("request");
await po.snapshotMessages({ replaceDumpPath: true });
});
testSkipIfWindows("claude 4 sonnet", async ({ po }) => {
await po.setUpDyadPro();
// Disable the pro modes so it routes to gateway.
const proModesDialog = await po.openProModesDialog({
location: "home-chat-input-container",
});
await proModesDialog.toggleTurboEdits();
await proModesDialog.toggleSmartContext();
await proModesDialog.close();
await po.selectModel({ provider: "Anthropic", model: "Claude 4 Sonnet" });
await po.sendPrompt("[dump] tc=gateway-simple");
await po.snapshotServerDump("request");
});
e2e-tests/helpers/test_helper.ts
浏览文件 @ 30b5c0d0
......@@ -139,10 +139,14 @@ export class PageObject {
});
}
async openProModesDialog(): Promise<ProModesDialog> {
async openProModesDialog({
location = "chat-input-container",
}: {
location?: "chat-input-container" | "home-chat-input-container";
} = {}): Promise<ProModesDialog> {
const proButton = this.page
// Assumes you're on the chat page.
.getByTestId("chat-input-container")
.getByTestId(location)
.getByRole("button", { name: "Pro", exact: true });
await proButton.click();
return new ProModesDialog(this.page, async () => {
......@@ -396,7 +400,7 @@ export class PageObject {
async selectModel({ provider, model }: { provider: string; model: string }) {
await this.page.getByRole("button", { name: "Model: Auto" }).click();
await this.page.getByText(provider).click();
await this.page.getByText(model).click();
await this.page.getByText(model, { exact: true }).click();
}
async selectTestModel() {
......
e2e-tests/snapshots/attach_image.spec.ts_attach-image---chat-1.aria.yml
浏览文件 @ 30b5c0d0
- paragraph: basic
- 'button "Thinking `＜dyad-write>`: I''ll think about the problem and write a bug report. ＜dyad-write> ＜dyad-write path=\"file1.txt\"> Fake dyad write ＜/dyad-write>"':
- img
- img
- paragraph:
- code: "`＜dyad-write>`"
- text: ": I'll think about the problem and write a bug report."
- paragraph: ＜dyad-write>
- paragraph: ＜dyad-write path="file1.txt"> Fake dyad write ＜/dyad-write>
- img
- text: file1.txt
- img
......
e2e-tests/snapshots/attach_image.spec.ts_attach-image-via-drag---chat-1.aria.yml
浏览文件 @ 30b5c0d0
- paragraph: basic
- 'button "Thinking `＜dyad-write>`: I''ll think about the problem and write a bug report. ＜dyad-write> ＜dyad-write path=\"file1.txt\"> Fake dyad write ＜/dyad-write>"':
- img
- img
- paragraph:
- code: "`＜dyad-write>`"
- text: ": I'll think about the problem and write a bug report."
- paragraph: ＜dyad-write>
- paragraph: ＜dyad-write path="file1.txt"> Fake dyad write ＜/dyad-write>
- img
- text: file1.txt
- img
......
e2e-tests/snapshots/context_manage.spec.ts_manage-context---default-1.txt
浏览文件 @ 30b5c0d0
......@@ -282,58 +282,6 @@ Do not hesitate to extensively use console logs to follow the flow of the code.
DO NOT OVERENGINEER THE CODE. You take great pride in keeping things simple and elegant. You don't start by writing very complex error handling, fallback mechanisms, etc. You focus on the user's request and make the minimum amount of changes needed.
DON'T DO MORE THAN WHAT THE USER ASKS FOR.
# Thinking Process
Before responding to user requests, ALWAYS use <think></think> tags to carefully plan your approach. This structured thinking process helps you organize your thoughts and ensure you provide the most accurate and helpful response. Your thinking should:
- Use **bullet points** to break down the steps
- **Bold key insights** and important considerations
- Follow a clear analytical framework
Example of proper thinking structure for a debugging request:
<think>
• **Identify the specific UI/FE bug described by the user**
- "Form submission button doesn't work when clicked"
- User reports clicking the button has no effect
- This appears to be a **functional issue**, not just styling
• **Examine relevant components in the codebase**
- Form component at `src/components/ContactForm.jsx`
- Button component at `src/components/Button.jsx`
- Form submission logic in `src/utils/formHandlers.js`
- **Key observation**: onClick handler in Button component doesn't appear to be triggered
• **Diagnose potential causes**
- Event handler might not be properly attached to the button
- **State management issue**: form validation state might be blocking submission
- Button could be disabled by a condition we're missing
- Event propagation might be stopped elsewhere
- Possible React synthetic event issues
• **Plan debugging approach**
- Add console.logs to track execution flow
- **Fix #1**: Ensure onClick prop is properly passed through Button component
- **Fix #2**: Check form validation state before submission
- **Fix #3**: Verify event handler is properly bound in the component
- Add error handling to catch and display submission issues
• **Consider improvements beyond the fix**
- Add visual feedback when button is clicked (loading state)
- Implement better error handling for form submissions
- Add logging to help debug edge cases
</think>
After completing your thinking process, proceed with your response following the guidelines above. Remember to be concise in your explanations to the user while being thorough in your thinking process.
This structured thinking ensures you:
1. Don't miss important aspects of the request
2. Consider all relevant factors before making changes
3. Deliver more accurate and helpful responses
4. Maintain a consistent approach to problem-solving
# AI_RULES.md
......
e2e-tests/snapshots/context_manage.spec.ts_manage-context---smart-context---auto-includes-only-1.txt
浏览文件 @ 30b5c0d0
......@@ -14,6 +14,10 @@
}
],
"stream": true,
"thinking": {
"type": "enabled",
"include_thoughts": true
},
"dyad_options": {
"files": [
{
......
e2e-tests/snapshots/context_manage.spec.ts_manage-context---smart-context-1.txt
浏览文件 @ 30b5c0d0
......@@ -14,6 +14,10 @@
}
],
"stream": true,
"thinking": {
"type": "enabled",
"include_thoughts": true
},
"dyad_options": {
"files": [
{
......
e2e-tests/snapshots/context_manage.spec.ts_manage-context---smart-context-2.txt
浏览文件 @ 30b5c0d0
......@@ -282,58 +282,6 @@ Do not hesitate to extensively use console logs to follow the flow of the code.
DO NOT OVERENGINEER THE CODE. You take great pride in keeping things simple and elegant. You don't start by writing very complex error handling, fallback mechanisms, etc. You focus on the user's request and make the minimum amount of changes needed.
DON'T DO MORE THAN WHAT THE USER ASKS FOR.
# Thinking Process
Before responding to user requests, ALWAYS use <think></think> tags to carefully plan your approach. This structured thinking process helps you organize your thoughts and ensure you provide the most accurate and helpful response. Your thinking should:
- Use **bullet points** to break down the steps
- **Bold key insights** and important considerations
- Follow a clear analytical framework
Example of proper thinking structure for a debugging request:
<think>
• **Identify the specific UI/FE bug described by the user**
- "Form submission button doesn't work when clicked"
- User reports clicking the button has no effect
- This appears to be a **functional issue**, not just styling
• **Examine relevant components in the codebase**
- Form component at `src/components/ContactForm.jsx`
- Button component at `src/components/Button.jsx`
- Form submission logic in `src/utils/formHandlers.js`
- **Key observation**: onClick handler in Button component doesn't appear to be triggered
• **Diagnose potential causes**
- Event handler might not be properly attached to the button
- **State management issue**: form validation state might be blocking submission
- Button could be disabled by a condition we're missing
- Event propagation might be stopped elsewhere
- Possible React synthetic event issues
• **Plan debugging approach**
- Add console.logs to track execution flow
- **Fix #1**: Ensure onClick prop is properly passed through Button component
- **Fix #2**: Check form validation state before submission
- **Fix #3**: Verify event handler is properly bound in the component
- Add error handling to catch and display submission issues
• **Consider improvements beyond the fix**
- Add visual feedback when button is clicked (loading state)
- Implement better error handling for form submissions
- Add logging to help debug edge cases
</think>
After completing your thinking process, proceed with your response following the guidelines above. Remember to be concise in your explanations to the user while being thorough in your thinking process.
This structured thinking ensures you:
1. Don't miss important aspects of the request
2. Consider all relevant factors before making changes
3. Deliver more accurate and helpful responses
4. Maintain a consistent approach to problem-solving
# AI_RULES.md
......
e2e-tests/snapshots/context_manage.spec.ts_manage-context---smart-context-3.txt
浏览文件 @ 30b5c0d0
......@@ -22,6 +22,10 @@
}
],
"stream": true,
"thinking": {
"type": "enabled",
"include_thoughts": true
},
"dyad_options": {
"files": [
{
......
e2e-tests/snapshots/context_manage.spec.ts_manage-context---smart-context-4.txt
浏览文件 @ 30b5c0d0
......@@ -30,6 +30,10 @@
}
],
"stream": true,
"thinking": {
"type": "enabled",
"include_thoughts": true
},
"dyad_options": {
"files": [
{
......
e2e-tests/snapshots/context_window.spec.ts_context-window-1.txt
浏览文件 @ 30b5c0d0
......@@ -282,58 +282,6 @@ Do not hesitate to extensively use console logs to follow the flow of the code.
DO NOT OVERENGINEER THE CODE. You take great pride in keeping things simple and elegant. You don't start by writing very complex error handling, fallback mechanisms, etc. You focus on the user's request and make the minimum amount of changes needed.
DON'T DO MORE THAN WHAT THE USER ASKS FOR.
# Thinking Process
Before responding to user requests, ALWAYS use <think></think> tags to carefully plan your approach. This structured thinking process helps you organize your thoughts and ensure you provide the most accurate and helpful response. Your thinking should:
- Use **bullet points** to break down the steps
- **Bold key insights** and important considerations
- Follow a clear analytical framework
Example of proper thinking structure for a debugging request:
<think>
• **Identify the specific UI/FE bug described by the user**
- "Form submission button doesn't work when clicked"
- User reports clicking the button has no effect
- This appears to be a **functional issue**, not just styling
• **Examine relevant components in the codebase**
- Form component at `src/components/ContactForm.jsx`
- Button component at `src/components/Button.jsx`
- Form submission logic in `src/utils/formHandlers.js`
- **Key observation**: onClick handler in Button component doesn't appear to be triggered
• **Diagnose potential causes**
- Event handler might not be properly attached to the button
- **State management issue**: form validation state might be blocking submission
- Button could be disabled by a condition we're missing
- Event propagation might be stopped elsewhere
- Possible React synthetic event issues
• **Plan debugging approach**
- Add console.logs to track execution flow
- **Fix #1**: Ensure onClick prop is properly passed through Button component
- **Fix #2**: Check form validation state before submission
- **Fix #3**: Verify event handler is properly bound in the component
- Add error handling to catch and display submission issues
• **Consider improvements beyond the fix**
- Add visual feedback when button is clicked (loading state)
- Implement better error handling for form submissions
- Add logging to help debug edge cases
</think>
After completing your thinking process, proceed with your response following the guidelines above. Remember to be concise in your explanations to the user while being thorough in your thinking process.
This structured thinking ensures you:
1. Don't miss important aspects of the request
2. Consider all relevant factors before making changes
3. Deliver more accurate and helpful responses
4. Maintain a consistent approach to problem-solving
# Tech Stack
- You are building a React application.
......
e2e-tests/snapshots/context_window.spec.ts_context-window-2.txt
浏览文件 @ 30b5c0d0
......@@ -282,58 +282,6 @@ Do not hesitate to extensively use console logs to follow the flow of the code.
DO NOT OVERENGINEER THE CODE. You take great pride in keeping things simple and elegant. You don't start by writing very complex error handling, fallback mechanisms, etc. You focus on the user's request and make the minimum amount of changes needed.
DON'T DO MORE THAN WHAT THE USER ASKS FOR.
# Thinking Process
Before responding to user requests, ALWAYS use <think></think> tags to carefully plan your approach. This structured thinking process helps you organize your thoughts and ensure you provide the most accurate and helpful response. Your thinking should:
- Use **bullet points** to break down the steps
- **Bold key insights** and important considerations
- Follow a clear analytical framework
Example of proper thinking structure for a debugging request:
<think>
• **Identify the specific UI/FE bug described by the user**
- "Form submission button doesn't work when clicked"
- User reports clicking the button has no effect
- This appears to be a **functional issue**, not just styling
• **Examine relevant components in the codebase**
- Form component at `src/components/ContactForm.jsx`
- Button component at `src/components/Button.jsx`
- Form submission logic in `src/utils/formHandlers.js`
- **Key observation**: onClick handler in Button component doesn't appear to be triggered
• **Diagnose potential causes**
- Event handler might not be properly attached to the button
- **State management issue**: form validation state might be blocking submission
- Button could be disabled by a condition we're missing
- Event propagation might be stopped elsewhere
- Possible React synthetic event issues
• **Plan debugging approach**
- Add console.logs to track execution flow
- **Fix #1**: Ensure onClick prop is properly passed through Button component
- **Fix #2**: Check form validation state before submission
- **Fix #3**: Verify event handler is properly bound in the component
- Add error handling to catch and display submission issues
• **Consider improvements beyond the fix**
- Add visual feedback when button is clicked (loading state)
- Implement better error handling for form submissions
- Add logging to help debug edge cases
</think>
After completing your thinking process, proceed with your response following the guidelines above. Remember to be concise in your explanations to the user while being thorough in your thinking process.
This structured thinking ensures you:
1. Don't miss important aspects of the request
2. Consider all relevant factors before making changes
3. Deliver more accurate and helpful responses
4. Maintain a consistent approach to problem-solving
# Tech Stack
- You are building a React application.
......
e2e-tests/snapshots/context_window.spec.ts_context-window-3.txt
浏览文件 @ 30b5c0d0
......@@ -282,58 +282,6 @@ Do not hesitate to extensively use console logs to follow the flow of the code.
DO NOT OVERENGINEER THE CODE. You take great pride in keeping things simple and elegant. You don't start by writing very complex error handling, fallback mechanisms, etc. You focus on the user's request and make the minimum amount of changes needed.
DON'T DO MORE THAN WHAT THE USER ASKS FOR.
# Thinking Process
Before responding to user requests, ALWAYS use <think></think> tags to carefully plan your approach. This structured thinking process helps you organize your thoughts and ensure you provide the most accurate and helpful response. Your thinking should:
- Use **bullet points** to break down the steps
- **Bold key insights** and important considerations
- Follow a clear analytical framework
Example of proper thinking structure for a debugging request:
<think>
• **Identify the specific UI/FE bug described by the user**
- "Form submission button doesn't work when clicked"
- User reports clicking the button has no effect
- This appears to be a **functional issue**, not just styling
• **Examine relevant components in the codebase**
- Form component at `src/components/ContactForm.jsx`
- Button component at `src/components/Button.jsx`
- Form submission logic in `src/utils/formHandlers.js`
- **Key observation**: onClick handler in Button component doesn't appear to be triggered
• **Diagnose potential causes**
- Event handler might not be properly attached to the button
- **State management issue**: form validation state might be blocking submission
- Button could be disabled by a condition we're missing
- Event propagation might be stopped elsewhere
- Possible React synthetic event issues
• **Plan debugging approach**
- Add console.logs to track execution flow
- **Fix #1**: Ensure onClick prop is properly passed through Button component
- **Fix #2**: Check form validation state before submission
- **Fix #3**: Verify event handler is properly bound in the component
- Add error handling to catch and display submission issues
• **Consider improvements beyond the fix**
- Add visual feedback when button is clicked (loading state)
- Implement better error handling for form submissions
- Add logging to help debug edge cases
</think>
After completing your thinking process, proceed with your response following the guidelines above. Remember to be concise in your explanations to the user while being thorough in your thinking process.
This structured thinking ensures you:
1. Don't miss important aspects of the request
2. Consider all relevant factors before making changes
3. Deliver more accurate and helpful responses
4. Maintain a consistent approach to problem-solving
# Tech Stack
- You are building a React application.
......
e2e-tests/snapshots/context_window.spec.ts_context-window-5.txt
浏览文件 @ 30b5c0d0
......@@ -282,58 +282,6 @@ Do not hesitate to extensively use console logs to follow the flow of the code.
DO NOT OVERENGINEER THE CODE. You take great pride in keeping things simple and elegant. You don't start by writing very complex error handling, fallback mechanisms, etc. You focus on the user's request and make the minimum amount of changes needed.
DON'T DO MORE THAN WHAT THE USER ASKS FOR.
# Thinking Process
Before responding to user requests, ALWAYS use <think></think> tags to carefully plan your approach. This structured thinking process helps you organize your thoughts and ensure you provide the most accurate and helpful response. Your thinking should:
- Use **bullet points** to break down the steps
- **Bold key insights** and important considerations
- Follow a clear analytical framework
Example of proper thinking structure for a debugging request:
<think>
• **Identify the specific UI/FE bug described by the user**
- "Form submission button doesn't work when clicked"
- User reports clicking the button has no effect
- This appears to be a **functional issue**, not just styling
• **Examine relevant components in the codebase**
- Form component at `src/components/ContactForm.jsx`
- Button component at `src/components/Button.jsx`
- Form submission logic in `src/utils/formHandlers.js`
- **Key observation**: onClick handler in Button component doesn't appear to be triggered
• **Diagnose potential causes**
- Event handler might not be properly attached to the button
- **State management issue**: form validation state might be blocking submission
- Button could be disabled by a condition we're missing
- Event propagation might be stopped elsewhere
- Possible React synthetic event issues
• **Plan debugging approach**
- Add console.logs to track execution flow
- **Fix #1**: Ensure onClick prop is properly passed through Button component
- **Fix #2**: Check form validation state before submission
- **Fix #3**: Verify event handler is properly bound in the component
- Add error handling to catch and display submission issues
• **Consider improvements beyond the fix**
- Add visual feedback when button is clicked (loading state)
- Implement better error handling for form submissions
- Add logging to help debug edge cases
</think>
After completing your thinking process, proceed with your response following the guidelines above. Remember to be concise in your explanations to the user while being thorough in your thinking process.
This structured thinking ensures you:
1. Don't miss important aspects of the request
2. Consider all relevant factors before making changes
3. Deliver more accurate and helpful responses
4. Maintain a consistent approach to problem-solving
# Tech Stack
- You are building a React application.
......
e2e-tests/snapshots/dump_messages.spec.ts_dump-messages-1.txt
浏览文件 @ 30b5c0d0
......@@ -282,58 +282,6 @@ Do not hesitate to extensively use console logs to follow the flow of the code.
DO NOT OVERENGINEER THE CODE. You take great pride in keeping things simple and elegant. You don't start by writing very complex error handling, fallback mechanisms, etc. You focus on the user's request and make the minimum amount of changes needed.
DON'T DO MORE THAN WHAT THE USER ASKS FOR.
# Thinking Process
Before responding to user requests, ALWAYS use <think></think> tags to carefully plan your approach. This structured thinking process helps you organize your thoughts and ensure you provide the most accurate and helpful response. Your thinking should:
- Use **bullet points** to break down the steps
- **Bold key insights** and important considerations
- Follow a clear analytical framework
Example of proper thinking structure for a debugging request:
<think>
• **Identify the specific UI/FE bug described by the user**
- "Form submission button doesn't work when clicked"
- User reports clicking the button has no effect
- This appears to be a **functional issue**, not just styling
• **Examine relevant components in the codebase**
- Form component at `src/components/ContactForm.jsx`
- Button component at `src/components/Button.jsx`
- Form submission logic in `src/utils/formHandlers.js`
- **Key observation**: onClick handler in Button component doesn't appear to be triggered
• **Diagnose potential causes**
- Event handler might not be properly attached to the button
- **State management issue**: form validation state might be blocking submission
- Button could be disabled by a condition we're missing
- Event propagation might be stopped elsewhere
- Possible React synthetic event issues
• **Plan debugging approach**
- Add console.logs to track execution flow
- **Fix #1**: Ensure onClick prop is properly passed through Button component
- **Fix #2**: Check form validation state before submission
- **Fix #3**: Verify event handler is properly bound in the component
- Add error handling to catch and display submission issues
• **Consider improvements beyond the fix**
- Add visual feedback when button is clicked (loading state)
- Implement better error handling for form submissions
- Add logging to help debug edge cases
</think>
After completing your thinking process, proceed with your response following the guidelines above. Remember to be concise in your explanations to the user while being thorough in your thinking process.
This structured thinking ensures you:
1. Don't miss important aspects of the request
2. Consider all relevant factors before making changes
3. Deliver more accurate and helpful responses
4. Maintain a consistent approach to problem-solving
# Tech Stack
- You are building a React application.
......
e2e-tests/snapshots/engine.spec.ts_auto-should-send-message-to-gateway-1.txt
浏览文件 @ 30b5c0d0
......@@ -3,6 +3,10 @@
"model": "gemini/gemini-2.5-flash-preview-05-20",
"max_tokens": 8000,
"temperature": 0,
"thinking": {
"type": "enabled",
"include_thoughts": true
},
"messages": [
{
"role": "system",
......
e2e-tests/snapshots/engine.spec.ts_send-message-to-engine---anthropic-claude-sonnet-4-1.txt 0 → 100644
浏览文件 @ 30b5c0d0
{
"body": {
"model": "anthropic/claude-sonnet-4-20250514",
"max_tokens": 16000,
"temperature": 0,
"messages": [
{
"role": "system",
"content": "[[SYSTEM_MESSAGE]]"
},
{
"role": "user",
"content": "[dump] tc=turbo-edits"
}
],
"stream": true,
"dyad_options": {
"files": [
{
"path": "AI_RULES.md",
"content": "# Tech Stack\n\n- You are building a React application.\n- Use TypeScript.\n- Use React Router. KEEP the routes in src/App.tsx\n- Always put source code in the src folder.\n- Put pages into src/pages/\n- Put components into src/components/\n- The main page (default page) is src/pages/Index.tsx\n- UPDATE the main page to include the new components. OTHERWISE, the user can NOT see any components!\n- ALWAYS try to use the shadcn/ui library.\n- Tailwind CSS: always use Tailwind CSS for styling components. Utilize Tailwind classes extensively for layout, spacing, colors, and other design aspects.\n\nAvailable packages and libraries:\n\n- The lucide-react package is installed for icons.\n- You ALREADY have ALL the shadcn/ui components and their dependencies installed. So you don't need to install them again.\n- You have ALL the necessary Radix UI components installed.\n- 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.\n",
"force": false
},
{
"path": "eslint.config.js",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "index.html",
"content": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>dyad-generated-app</title>\n </head>\n\n <body>\n <div id=\"root\"></div>\n <script type=\"module\" src=\"/src/main.tsx\"></script>\n </body>\n</html>\n",
"force": false
},
{
"path": "package.json",
"content": "{\n \"dependencies\": {\n \"@hookform/resolvers\": \"^3.9.0\",\n \"@radix-ui/react-accordion\": \"^1.2.0\",\n \"@radix-ui/react-alert-dialog\": \"^1.1.1\",\n \"@radix-ui/react-aspect-ratio\": \"^1.1.0\",\n \"@radix-ui/react-avatar\": \"^1.1.0\",\n \"@radix-ui/react-checkbox\": \"^1.1.1\",\n \"@radix-ui/react-collapsible\": \"^1.1.0\",\n \"@radix-ui/react-context-menu\": \"^2.2.1\",\n \"@radix-ui/react-dialog\": \"^1.1.2\",\n \"@radix-ui/react-dropdown-menu\": \"^2.1.1\",\n \"@radix-ui/react-hover-card\": \"^1.1.1\",\n \"@radix-ui/react-label\": \"^2.1.0\",\n \"@radix-ui/react-menubar\": \"^1.1.1\",\n \"@radix-ui/react-navigation-menu\": \"^1.2.0\",\n \"@radix-ui/react-popover\": \"^1.1.1\",\n \"@radix-ui/react-progress\": \"^1.1.0\",\n \"@radix-ui/react-radio-group\": \"^1.2.0\",\n \"@radix-ui/react-scroll-area\": \"^1.1.0\",\n \"@radix-ui/react-select\": \"^2.1.1\",\n \"@radix-ui/react-separator\": \"^1.1.0\",\n \"@radix-ui/react-slider\": \"^1.2.0\",\n \"@radix-ui/react-slot\": \"^1.1.0\",\n \"@radix-ui/react-switch\": \"^1.1.0\",\n \"@radix-ui/react-tabs\": \"^1.1.0\",\n \"@radix-ui/react-toast\": \"^1.2.1\",\n \"@radix-ui/react-toggle\": \"^1.1.0\",\n \"@radix-ui/react-toggle-group\": \"^1.1.0\",\n \"@radix-ui/react-tooltip\": \"^1.1.4\",\n \"@tanstack/react-query\": \"^5.56.2\",\n \"class-variance-authority\": \"^0.7.1\",\n \"clsx\": \"^2.1.1\",\n \"cmdk\": \"^1.0.0\",\n \"date-fns\": \"^3.6.0\",\n \"embla-carousel-react\": \"^8.3.0\",\n \"input-otp\": \"^1.2.4\",\n \"lucide-react\": \"^0.462.0\",\n \"next-themes\": \"^0.3.0\",\n \"react\": \"^18.3.1\",\n \"react-day-picker\": \"^8.10.1\",\n \"react-dom\": \"^18.3.1\",\n \"react-hook-form\": \"^7.53.0\",\n \"react-resizable-panels\": \"^2.1.3\",\n \"react-router-dom\": \"^6.26.2\",\n \"recharts\": \"^2.12.7\",\n \"sonner\": \"^1.5.0\",\n \"tailwind-merge\": \"^2.5.2\",\n \"tailwindcss-animate\": \"^1.0.7\",\n \"vaul\": \"^0.9.3\",\n \"zod\": \"^3.23.8\"\n },\n \"devDependencies\": {\n \"@dyad-sh/react-vite-component-tagger\": \"^0.8.0\",\n \"@eslint/js\": \"^9.9.0\",\n \"@tailwindcss/typography\": \"^0.5.15\",\n \"@types/node\": \"^22.5.5\",\n \"@types/react\": \"^18.3.3\",\n \"@types/react-dom\": \"^18.3.0\",\n \"@vitejs/plugin-react-swc\": \"^3.9.0\",\n \"autoprefixer\": \"^10.4.20\",\n \"eslint\": \"^9.9.0\",\n \"eslint-plugin-react-hooks\": \"^5.1.0-rc.0\",\n \"eslint-plugin-react-refresh\": \"^0.4.9\",\n \"globals\": \"^15.9.0\",\n \"postcss\": \"^8.4.47\",\n \"tailwindcss\": \"^3.4.11\",\n \"typescript\": \"^5.5.3\",\n \"typescript-eslint\": \"^8.0.1\",\n \"vite\": \"^6.3.4\"\n }\n}",
"force": false
},
{
"path": "postcss.config.js",
"content": "export default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n",
"force": false
},
{
"path": "README.md",
"content": "# Welcome to your Dyad app\n",
"force": false
},
{
"path": "src/App.css",
"content": "#root {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n}\n\n.logo {\n height: 6em;\n padding: 1.5em;\n will-change: filter;\n transition: filter 300ms;\n}\n.logo:hover {\n filter: drop-shadow(0 0 2em #646cffaa);\n}\n.logo.react:hover {\n filter: drop-shadow(0 0 2em #61dafbaa);\n}\n\n@keyframes logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n@media (prefers-reduced-motion: no-preference) {\n a:nth-of-type(2) .logo {\n animation: logo-spin infinite 20s linear;\n }\n}\n\n.card {\n padding: 2em;\n}\n\n.read-the-docs {\n color: #888;\n}\n",
"force": false
},
{
"path": "src/App.tsx",
"content": "import { Toaster } from \"@/components/ui/toaster\";\nimport { Toaster as Sonner } from \"@/components/ui/sonner\";\nimport { TooltipProvider } from \"@/components/ui/tooltip\";\nimport { QueryClient, QueryClientProvider } from \"@tanstack/react-query\";\nimport { BrowserRouter, Routes, Route } from \"react-router-dom\";\nimport Index from \"./pages/Index\";\nimport NotFound from \"./pages/NotFound\";\n\nconst queryClient = new QueryClient();\n\nconst App = () => (\n <QueryClientProvider client={queryClient}>\n <TooltipProvider>\n <Toaster />\n <Sonner />\n <BrowserRouter>\n <Routes>\n <Route path=\"/\" element={<Index />} />\n {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL \"*\" ROUTE */}\n <Route path=\"*\" element={<NotFound />} />\n </Routes>\n </BrowserRouter>\n </TooltipProvider>\n </QueryClientProvider>\n);\n\nexport default App;\n",
"force": false
},
{
"path": "src/components/made-with-dyad.tsx",
"content": "export const MadeWithDyad = () => {\n return (\n <div className=\"p-4 text-center\">\n <a\n href=\"https://www.dyad.sh/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200\"\n >\n Made with Dyad\n </a>\n </div>\n );\n};\n",
"force": false
},
{
"path": "src/components/ui/accordion.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/alert-dialog.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/alert.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/aspect-ratio.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/avatar.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/badge.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/breadcrumb.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/button.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/calendar.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/card.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/carousel.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/chart.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/checkbox.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/collapsible.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/command.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/context-menu.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/dialog.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/drawer.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/dropdown-menu.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/form.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/hover-card.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/input-otp.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/input.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/label.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/menubar.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/navigation-menu.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/pagination.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/popover.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/progress.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/radio-group.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/resizable.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/scroll-area.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/select.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/separator.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/sheet.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/sidebar.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/skeleton.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/slider.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/sonner.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/switch.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/table.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/tabs.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/textarea.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/toast.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/toaster.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/toggle-group.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/toggle.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/tooltip.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/use-toast.ts",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/globals.css",
"content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n\n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n\n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n\n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n\n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n\n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n\n --accent: 210 40% 96.1%;\n --accent-foreground: 222.2 47.4% 11.2%;\n\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n\n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n --ring: 222.2 84% 4.9%;\n\n --radius: 0.5rem;\n\n --sidebar-background: 0 0% 98%;\n\n --sidebar-foreground: 240 5.3% 26.1%;\n\n --sidebar-primary: 240 5.9% 10%;\n\n --sidebar-primary-foreground: 0 0% 98%;\n\n --sidebar-accent: 240 4.8% 95.9%;\n\n --sidebar-accent-foreground: 240 5.9% 10%;\n\n --sidebar-border: 220 13% 91%;\n\n --sidebar-ring: 217.2 91.2% 59.8%;\n }\n\n .dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n\n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n\n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n\n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 11.2%;\n\n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n\n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n\n --accent: 217.2 32.6% 17.5%;\n --accent-foreground: 210 40% 98%;\n\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 40% 98%;\n\n --border: 217.2 32.6% 17.5%;\n --input: 217.2 32.6% 17.5%;\n --ring: 212.7 26.8% 83.9%;\n --sidebar-background: 240 5.9% 10%;\n --sidebar-foreground: 240 4.8% 95.9%;\n --sidebar-primary: 224.3 76.3% 48%;\n --sidebar-primary-foreground: 0 0% 100%;\n --sidebar-accent: 240 3.7% 15.9%;\n --sidebar-accent-foreground: 240 4.8% 95.9%;\n --sidebar-border: 240 3.7% 15.9%;\n --sidebar-ring: 217.2 91.2% 59.8%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n\n body {\n @apply bg-background text-foreground;\n }\n}\n",
"force": false
},
{
"path": "src/hooks/use-mobile.tsx",
"content": "import * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n const [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n undefined,\n );\n\n React.useEffect(() => {\n const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n const onChange = () => {\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n };\n mql.addEventListener(\"change\", onChange);\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n return () => mql.removeEventListener(\"change\", onChange);\n }, []);\n\n return !!isMobile;\n}\n",
"force": false
},
{
"path": "src/hooks/use-toast.ts",
"content": "import * as React from \"react\";\n\nimport type { ToastActionElement, ToastProps } from \"@/components/ui/toast\";\n\nconst TOAST_LIMIT = 1;\nconst TOAST_REMOVE_DELAY = 1000000;\n\ntype ToasterToast = ToastProps & {\n id: string;\n title?: React.ReactNode;\n description?: React.ReactNode;\n action?: ToastActionElement;\n};\n\nconst _actionTypes = {\n ADD_TOAST: \"ADD_TOAST\",\n UPDATE_TOAST: \"UPDATE_TOAST\",\n DISMISS_TOAST: \"DISMISS_TOAST\",\n REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const;\n\nlet count = 0;\n\nfunction genId() {\n count = (count + 1) % Number.MAX_SAFE_INTEGER;\n return count.toString();\n}\n\ntype ActionType = typeof _actionTypes;\n\ntype Action =\n | {\n type: ActionType[\"ADD_TOAST\"];\n toast: ToasterToast;\n }\n | {\n type: ActionType[\"UPDATE_TOAST\"];\n toast: Partial<ToasterToast>;\n }\n | {\n type: ActionType[\"DISMISS_TOAST\"];\n toastId?: ToasterToast[\"id\"];\n }\n | {\n type: ActionType[\"REMOVE_TOAST\"];\n toastId?: ToasterToast[\"id\"];\n };\n\ninterface State {\n toasts: ToasterToast[];\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nconst addToRemoveQueue = (toastId: string) => {\n if (toastTimeouts.has(toastId)) {\n return;\n }\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId);\n dispatch({\n type: \"REMOVE_TOAST\",\n toastId: toastId,\n });\n }, TOAST_REMOVE_DELAY);\n\n toastTimeouts.set(toastId, timeout);\n};\n\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case \"ADD_TOAST\":\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n };\n\n case \"UPDATE_TOAST\":\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t,\n ),\n };\n\n case \"DISMISS_TOAST\": {\n const { toastId } = action;\n\n // ! Side effects ! - This could be extracted into a dismissToast() action,\n // but I'll keep it here for simplicity\n if (toastId) {\n addToRemoveQueue(toastId);\n } else {\n state.toasts.forEach((toast) => {\n addToRemoveQueue(toast.id);\n });\n }\n\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === toastId || toastId === undefined\n ? {\n ...t,\n open: false,\n }\n : t,\n ),\n };\n }\n case \"REMOVE_TOAST\":\n if (action.toastId === undefined) {\n return {\n ...state,\n toasts: [],\n };\n }\n return {\n ...state,\n toasts: state.toasts.filter((t) => t.id !== action.toastId),\n };\n }\n};\n\nconst listeners: Array<(state: State) => void> = [];\n\nlet memoryState: State = { toasts: [] };\n\nfunction dispatch(action: Action) {\n memoryState = reducer(memoryState, action);\n listeners.forEach((listener) => {\n listener(memoryState);\n });\n}\n\ntype Toast = Omit<ToasterToast, \"id\">;\n\nfunction toast({ ...props }: Toast) {\n const id = genId();\n\n const update = (props: ToasterToast) =>\n dispatch({\n type: \"UPDATE_TOAST\",\n toast: { ...props, id },\n });\n const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id });\n\n dispatch({\n type: \"ADD_TOAST\",\n toast: {\n ...props,\n id,\n open: true,\n onOpenChange: (open) => {\n if (!open) dismiss();\n },\n },\n });\n\n return {\n id: id,\n dismiss,\n update,\n };\n}\n\nfunction useToast() {\n const [state, setState] = React.useState<State>(memoryState);\n\n React.useEffect(() => {\n listeners.push(setState);\n return () => {\n const index = listeners.indexOf(setState);\n if (index > -1) {\n listeners.splice(index, 1);\n }\n };\n }, [state]);\n\n return {\n ...state,\n toast,\n dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId }),\n };\n}\n\nexport { useToast, toast };\n",
"force": false
},
{
"path": "src/lib/utils.ts",
"content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n",
"force": false
},
{
"path": "src/main.tsx",
"content": "import { createRoot } from \"react-dom/client\";\nimport App from \"./App.tsx\";\nimport \"./globals.css\";\n\ncreateRoot(document.getElementById(\"root\")!).render(<App />);\n",
"force": false
},
{
"path": "src/pages/Index.tsx",
"content": "// Update this page (the content is just a fallback if you fail to update the page)\n\nimport { MadeWithDyad } from \"@/components/made-with-dyad\";\n\nconst Index = () => {\n return (\n <div className=\"min-h-screen flex items-center justify-center bg-gray-100\">\n <div className=\"text-center\">\n <h1 className=\"text-4xl font-bold mb-4\">Welcome to Your Blank App</h1>\n <p className=\"text-xl text-gray-600\">\n Start building your amazing project here!\n </p>\n </div>\n <MadeWithDyad />\n </div>\n );\n};\n\nexport default Index;\n",
"force": false
},
{
"path": "src/pages/NotFound.tsx",
"content": "import { useLocation } from \"react-router-dom\";\nimport { useEffect } from \"react\";\n\nconst NotFound = () => {\n const location = useLocation();\n\n useEffect(() => {\n console.error(\n \"404 Error: User attempted to access non-existent route:\",\n location.pathname,\n );\n }, [location.pathname]);\n\n return (\n <div className=\"min-h-screen flex items-center justify-center bg-gray-100\">\n <div className=\"text-center\">\n <h1 className=\"text-4xl font-bold mb-4\">404</h1>\n <p className=\"text-xl text-gray-600 mb-4\">Oops! Page not found</p>\n <a href=\"/\" className=\"text-blue-500 hover:text-blue-700 underline\">\n Return to Home\n </a>\n </div>\n </div>\n );\n};\n\nexport default NotFound;\n",
"force": false
},
{
"path": "src/utils/toast.ts",
"content": "import { toast } from \"sonner\";\n\nexport const showSuccess = (message: string) => {\n toast.success(message);\n};\n\nexport const showError = (message: string) => {\n toast.error(message);\n};\n\nexport const showLoading = (message: string) => {\n return toast.loading(message);\n};\n\nexport const dismissToast = (toastId: string) => {\n toast.dismiss(toastId);\n};\n",
"force": false
},
{
"path": "src/vite-env.d.ts",
"content": "/// <reference types=\"vite/client\" />\n",
"force": false
},
{
"path": "tailwind.config.ts",
"content": "import type { Config } from \"tailwindcss\";\n\nexport default {\n darkMode: [\"class\"],\n content: [\n \"./pages/**/*.{ts,tsx}\",\n \"./components/**/*.{ts,tsx}\",\n \"./app/**/*.{ts,tsx}\",\n \"./src/**/*.{ts,tsx}\",\n ],\n prefix: \"\",\n theme: {\n container: {\n center: true,\n padding: \"2rem\",\n screens: {\n \"2xl\": \"1400px\",\n },\n },\n extend: {\n colors: {\n border: \"hsl(var(--border))\",\n input: \"hsl(var(--input))\",\n ring: \"hsl(var(--ring))\",\n background: \"hsl(var(--background))\",\n foreground: \"hsl(var(--foreground))\",\n primary: {\n DEFAULT: \"hsl(var(--primary))\",\n foreground: \"hsl(var(--primary-foreground))\",\n },\n secondary: {\n DEFAULT: \"hsl(var(--secondary))\",\n foreground: \"hsl(var(--secondary-foreground))\",\n },\n destructive: {\n DEFAULT: \"hsl(var(--destructive))\",\n foreground: \"hsl(var(--destructive-foreground))\",\n },\n muted: {\n DEFAULT: \"hsl(var(--muted))\",\n foreground: \"hsl(var(--muted-foreground))\",\n },\n accent: {\n DEFAULT: \"hsl(var(--accent))\",\n foreground: \"hsl(var(--accent-foreground))\",\n },\n popover: {\n DEFAULT: \"hsl(var(--popover))\",\n foreground: \"hsl(var(--popover-foreground))\",\n },\n card: {\n DEFAULT: \"hsl(var(--card))\",\n foreground: \"hsl(var(--card-foreground))\",\n },\n sidebar: {\n DEFAULT: \"hsl(var(--sidebar-background))\",\n foreground: \"hsl(var(--sidebar-foreground))\",\n primary: \"hsl(var(--sidebar-primary))\",\n \"primary-foreground\": \"hsl(var(--sidebar-primary-foreground))\",\n accent: \"hsl(var(--sidebar-accent))\",\n \"accent-foreground\": \"hsl(var(--sidebar-accent-foreground))\",\n border: \"hsl(var(--sidebar-border))\",\n ring: \"hsl(var(--sidebar-ring))\",\n },\n },\n borderRadius: {\n lg: \"var(--radius)\",\n md: \"calc(var(--radius) - 2px)\",\n sm: \"calc(var(--radius) - 4px)\",\n },\n keyframes: {\n \"accordion-down\": {\n from: {\n height: \"0\",\n },\n to: {\n height: \"var(--radix-accordion-content-height)\",\n },\n },\n \"accordion-up\": {\n from: {\n height: \"var(--radix-accordion-content-height)\",\n },\n to: {\n height: \"0\",\n },\n },\n },\n animation: {\n \"accordion-down\": \"accordion-down 0.2s ease-out\",\n \"accordion-up\": \"accordion-up 0.2s ease-out\",\n },\n },\n },\n plugins: [require(\"tailwindcss-animate\")],\n} satisfies Config;\n",
"force": false
},
{
"path": "vite.config.ts",
"content": "import { defineConfig } from \"vite\";\nimport dyadComponentTagger from \"@dyad-sh/react-vite-component-tagger\";\nimport react from \"@vitejs/plugin-react-swc\";\nimport path from \"path\";\n\nexport default defineConfig(() => ({\n server: {\n host: \"::\",\n port: 8080,\n },\n plugins: [dyadComponentTagger(), react()],\n resolve: {\n alias: {\n \"@\": path.resolve(__dirname, \"./src\"),\n },\n },\n}));\n",
"force": false
}
],
"enable_lazy_edits": true,
"enable_smart_files_context": true
}
},
"headers": {
"authorization": "Bearer testdyadkey"
}
}
\ No newline at end of file
e2e-tests/snapshots/engine.spec.ts_send-message-to-engine---openai-gpt-4-1-1.txt 0 → 100644
浏览文件 @ 30b5c0d0
{
"body": {
"model": "gpt-4.1",
"max_tokens": 32768,
"temperature": 0,
"messages": [
{
"role": "system",
"content": "[[SYSTEM_MESSAGE]]"
},
{
"role": "user",
"content": "[dump] tc=turbo-edits"
}
],
"stream": true,
"dyad_options": {
"files": [
{
"path": "AI_RULES.md",
"content": "# Tech Stack\n\n- You are building a React application.\n- Use TypeScript.\n- Use React Router. KEEP the routes in src/App.tsx\n- Always put source code in the src folder.\n- Put pages into src/pages/\n- Put components into src/components/\n- The main page (default page) is src/pages/Index.tsx\n- UPDATE the main page to include the new components. OTHERWISE, the user can NOT see any components!\n- ALWAYS try to use the shadcn/ui library.\n- Tailwind CSS: always use Tailwind CSS for styling components. Utilize Tailwind classes extensively for layout, spacing, colors, and other design aspects.\n\nAvailable packages and libraries:\n\n- The lucide-react package is installed for icons.\n- You ALREADY have ALL the shadcn/ui components and their dependencies installed. So you don't need to install them again.\n- You have ALL the necessary Radix UI components installed.\n- 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.\n",
"force": false
},
{
"path": "eslint.config.js",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "index.html",
"content": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>dyad-generated-app</title>\n </head>\n\n <body>\n <div id=\"root\"></div>\n <script type=\"module\" src=\"/src/main.tsx\"></script>\n </body>\n</html>\n",
"force": false
},
{
"path": "package.json",
"content": "{\n \"dependencies\": {\n \"@hookform/resolvers\": \"^3.9.0\",\n \"@radix-ui/react-accordion\": \"^1.2.0\",\n \"@radix-ui/react-alert-dialog\": \"^1.1.1\",\n \"@radix-ui/react-aspect-ratio\": \"^1.1.0\",\n \"@radix-ui/react-avatar\": \"^1.1.0\",\n \"@radix-ui/react-checkbox\": \"^1.1.1\",\n \"@radix-ui/react-collapsible\": \"^1.1.0\",\n \"@radix-ui/react-context-menu\": \"^2.2.1\",\n \"@radix-ui/react-dialog\": \"^1.1.2\",\n \"@radix-ui/react-dropdown-menu\": \"^2.1.1\",\n \"@radix-ui/react-hover-card\": \"^1.1.1\",\n \"@radix-ui/react-label\": \"^2.1.0\",\n \"@radix-ui/react-menubar\": \"^1.1.1\",\n \"@radix-ui/react-navigation-menu\": \"^1.2.0\",\n \"@radix-ui/react-popover\": \"^1.1.1\",\n \"@radix-ui/react-progress\": \"^1.1.0\",\n \"@radix-ui/react-radio-group\": \"^1.2.0\",\n \"@radix-ui/react-scroll-area\": \"^1.1.0\",\n \"@radix-ui/react-select\": \"^2.1.1\",\n \"@radix-ui/react-separator\": \"^1.1.0\",\n \"@radix-ui/react-slider\": \"^1.2.0\",\n \"@radix-ui/react-slot\": \"^1.1.0\",\n \"@radix-ui/react-switch\": \"^1.1.0\",\n \"@radix-ui/react-tabs\": \"^1.1.0\",\n \"@radix-ui/react-toast\": \"^1.2.1\",\n \"@radix-ui/react-toggle\": \"^1.1.0\",\n \"@radix-ui/react-toggle-group\": \"^1.1.0\",\n \"@radix-ui/react-tooltip\": \"^1.1.4\",\n \"@tanstack/react-query\": \"^5.56.2\",\n \"class-variance-authority\": \"^0.7.1\",\n \"clsx\": \"^2.1.1\",\n \"cmdk\": \"^1.0.0\",\n \"date-fns\": \"^3.6.0\",\n \"embla-carousel-react\": \"^8.3.0\",\n \"input-otp\": \"^1.2.4\",\n \"lucide-react\": \"^0.462.0\",\n \"next-themes\": \"^0.3.0\",\n \"react\": \"^18.3.1\",\n \"react-day-picker\": \"^8.10.1\",\n \"react-dom\": \"^18.3.1\",\n \"react-hook-form\": \"^7.53.0\",\n \"react-resizable-panels\": \"^2.1.3\",\n \"react-router-dom\": \"^6.26.2\",\n \"recharts\": \"^2.12.7\",\n \"sonner\": \"^1.5.0\",\n \"tailwind-merge\": \"^2.5.2\",\n \"tailwindcss-animate\": \"^1.0.7\",\n \"vaul\": \"^0.9.3\",\n \"zod\": \"^3.23.8\"\n },\n \"devDependencies\": {\n \"@dyad-sh/react-vite-component-tagger\": \"^0.8.0\",\n \"@eslint/js\": \"^9.9.0\",\n \"@tailwindcss/typography\": \"^0.5.15\",\n \"@types/node\": \"^22.5.5\",\n \"@types/react\": \"^18.3.3\",\n \"@types/react-dom\": \"^18.3.0\",\n \"@vitejs/plugin-react-swc\": \"^3.9.0\",\n \"autoprefixer\": \"^10.4.20\",\n \"eslint\": \"^9.9.0\",\n \"eslint-plugin-react-hooks\": \"^5.1.0-rc.0\",\n \"eslint-plugin-react-refresh\": \"^0.4.9\",\n \"globals\": \"^15.9.0\",\n \"postcss\": \"^8.4.47\",\n \"tailwindcss\": \"^3.4.11\",\n \"typescript\": \"^5.5.3\",\n \"typescript-eslint\": \"^8.0.1\",\n \"vite\": \"^6.3.4\"\n }\n}",
"force": false
},
{
"path": "postcss.config.js",
"content": "export default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n",
"force": false
},
{
"path": "README.md",
"content": "# Welcome to your Dyad app\n",
"force": false
},
{
"path": "src/App.css",
"content": "#root {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n}\n\n.logo {\n height: 6em;\n padding: 1.5em;\n will-change: filter;\n transition: filter 300ms;\n}\n.logo:hover {\n filter: drop-shadow(0 0 2em #646cffaa);\n}\n.logo.react:hover {\n filter: drop-shadow(0 0 2em #61dafbaa);\n}\n\n@keyframes logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n@media (prefers-reduced-motion: no-preference) {\n a:nth-of-type(2) .logo {\n animation: logo-spin infinite 20s linear;\n }\n}\n\n.card {\n padding: 2em;\n}\n\n.read-the-docs {\n color: #888;\n}\n",
"force": false
},
{
"path": "src/App.tsx",
"content": "import { Toaster } from \"@/components/ui/toaster\";\nimport { Toaster as Sonner } from \"@/components/ui/sonner\";\nimport { TooltipProvider } from \"@/components/ui/tooltip\";\nimport { QueryClient, QueryClientProvider } from \"@tanstack/react-query\";\nimport { BrowserRouter, Routes, Route } from \"react-router-dom\";\nimport Index from \"./pages/Index\";\nimport NotFound from \"./pages/NotFound\";\n\nconst queryClient = new QueryClient();\n\nconst App = () => (\n <QueryClientProvider client={queryClient}>\n <TooltipProvider>\n <Toaster />\n <Sonner />\n <BrowserRouter>\n <Routes>\n <Route path=\"/\" element={<Index />} />\n {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL \"*\" ROUTE */}\n <Route path=\"*\" element={<NotFound />} />\n </Routes>\n </BrowserRouter>\n </TooltipProvider>\n </QueryClientProvider>\n);\n\nexport default App;\n",
"force": false
},
{
"path": "src/components/made-with-dyad.tsx",
"content": "export const MadeWithDyad = () => {\n return (\n <div className=\"p-4 text-center\">\n <a\n href=\"https://www.dyad.sh/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200\"\n >\n Made with Dyad\n </a>\n </div>\n );\n};\n",
"force": false
},
{
"path": "src/components/ui/accordion.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/alert-dialog.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/alert.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/aspect-ratio.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/avatar.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/badge.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/breadcrumb.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/button.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/calendar.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/card.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/carousel.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/chart.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/checkbox.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/collapsible.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/command.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/context-menu.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/dialog.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/drawer.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/dropdown-menu.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/form.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/hover-card.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/input-otp.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/input.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/label.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/menubar.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/navigation-menu.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/pagination.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/popover.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/progress.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/radio-group.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/resizable.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/scroll-area.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/select.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/separator.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/sheet.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/sidebar.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/skeleton.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/slider.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/sonner.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/switch.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/table.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/tabs.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/textarea.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/toast.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/toaster.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/toggle-group.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/toggle.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/tooltip.tsx",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/components/ui/use-toast.ts",
"content": "// Contents omitted for brevity",
"force": false
},
{
"path": "src/globals.css",
"content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n\n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n\n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n\n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n\n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n\n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n\n --accent: 210 40% 96.1%;\n --accent-foreground: 222.2 47.4% 11.2%;\n\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n\n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n --ring: 222.2 84% 4.9%;\n\n --radius: 0.5rem;\n\n --sidebar-background: 0 0% 98%;\n\n --sidebar-foreground: 240 5.3% 26.1%;\n\n --sidebar-primary: 240 5.9% 10%;\n\n --sidebar-primary-foreground: 0 0% 98%;\n\n --sidebar-accent: 240 4.8% 95.9%;\n\n --sidebar-accent-foreground: 240 5.9% 10%;\n\n --sidebar-border: 220 13% 91%;\n\n --sidebar-ring: 217.2 91.2% 59.8%;\n }\n\n .dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n\n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n\n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n\n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 11.2%;\n\n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n\n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n\n --accent: 217.2 32.6% 17.5%;\n --accent-foreground: 210 40% 98%;\n\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 40% 98%;\n\n --border: 217.2 32.6% 17.5%;\n --input: 217.2 32.6% 17.5%;\n --ring: 212.7 26.8% 83.9%;\n --sidebar-background: 240 5.9% 10%;\n --sidebar-foreground: 240 4.8% 95.9%;\n --sidebar-primary: 224.3 76.3% 48%;\n --sidebar-primary-foreground: 0 0% 100%;\n --sidebar-accent: 240 3.7% 15.9%;\n --sidebar-accent-foreground: 240 4.8% 95.9%;\n --sidebar-border: 240 3.7% 15.9%;\n --sidebar-ring: 217.2 91.2% 59.8%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n\n body {\n @apply bg-background text-foreground;\n }\n}\n",
"force": false
},
{
"path": "src/hooks/use-mobile.tsx",
"content": "import * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n const [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n undefined,\n );\n\n React.useEffect(() => {\n const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n const onChange = () => {\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n };\n mql.addEventListener(\"change\", onChange);\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n return () => mql.removeEventListener(\"change\", onChange);\n }, []);\n\n return !!isMobile;\n}\n",
"force": false
},
{
"path": "src/hooks/use-toast.ts",
"content": "import * as React from \"react\";\n\nimport type { ToastActionElement, ToastProps } from \"@/components/ui/toast\";\n\nconst TOAST_LIMIT = 1;\nconst TOAST_REMOVE_DELAY = 1000000;\n\ntype ToasterToast = ToastProps & {\n id: string;\n title?: React.ReactNode;\n description?: React.ReactNode;\n action?: ToastActionElement;\n};\n\nconst _actionTypes = {\n ADD_TOAST: \"ADD_TOAST\",\n UPDATE_TOAST: \"UPDATE_TOAST\",\n DISMISS_TOAST: \"DISMISS_TOAST\",\n REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const;\n\nlet count = 0;\n\nfunction genId() {\n count = (count + 1) % Number.MAX_SAFE_INTEGER;\n return count.toString();\n}\n\ntype ActionType = typeof _actionTypes;\n\ntype Action =\n | {\n type: ActionType[\"ADD_TOAST\"];\n toast: ToasterToast;\n }\n | {\n type: ActionType[\"UPDATE_TOAST\"];\n toast: Partial<ToasterToast>;\n }\n | {\n type: ActionType[\"DISMISS_TOAST\"];\n toastId?: ToasterToast[\"id\"];\n }\n | {\n type: ActionType[\"REMOVE_TOAST\"];\n toastId?: ToasterToast[\"id\"];\n };\n\ninterface State {\n toasts: ToasterToast[];\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nconst addToRemoveQueue = (toastId: string) => {\n if (toastTimeouts.has(toastId)) {\n return;\n }\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId);\n dispatch({\n type: \"REMOVE_TOAST\",\n toastId: toastId,\n });\n }, TOAST_REMOVE_DELAY);\n\n toastTimeouts.set(toastId, timeout);\n};\n\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case \"ADD_TOAST\":\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n };\n\n case \"UPDATE_TOAST\":\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t,\n ),\n };\n\n case \"DISMISS_TOAST\": {\n const { toastId } = action;\n\n // ! Side effects ! - This could be extracted into a dismissToast() action,\n // but I'll keep it here for simplicity\n if (toastId) {\n addToRemoveQueue(toastId);\n } else {\n state.toasts.forEach((toast) => {\n addToRemoveQueue(toast.id);\n });\n }\n\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === toastId || toastId === undefined\n ? {\n ...t,\n open: false,\n }\n : t,\n ),\n };\n }\n case \"REMOVE_TOAST\":\n if (action.toastId === undefined) {\n return {\n ...state,\n toasts: [],\n };\n }\n return {\n ...state,\n toasts: state.toasts.filter((t) => t.id !== action.toastId),\n };\n }\n};\n\nconst listeners: Array<(state: State) => void> = [];\n\nlet memoryState: State = { toasts: [] };\n\nfunction dispatch(action: Action) {\n memoryState = reducer(memoryState, action);\n listeners.forEach((listener) => {\n listener(memoryState);\n });\n}\n\ntype Toast = Omit<ToasterToast, \"id\">;\n\nfunction toast({ ...props }: Toast) {\n const id = genId();\n\n const update = (props: ToasterToast) =>\n dispatch({\n type: \"UPDATE_TOAST\",\n toast: { ...props, id },\n });\n const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id });\n\n dispatch({\n type: \"ADD_TOAST\",\n toast: {\n ...props,\n id,\n open: true,\n onOpenChange: (open) => {\n if (!open) dismiss();\n },\n },\n });\n\n return {\n id: id,\n dismiss,\n update,\n };\n}\n\nfunction useToast() {\n const [state, setState] = React.useState<State>(memoryState);\n\n React.useEffect(() => {\n listeners.push(setState);\n return () => {\n const index = listeners.indexOf(setState);\n if (index > -1) {\n listeners.splice(index, 1);\n }\n };\n }, [state]);\n\n return {\n ...state,\n toast,\n dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId }),\n };\n}\n\nexport { useToast, toast };\n",
"force": false
},
{
"path": "src/lib/utils.ts",
"content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n",
"force": false
},
{
"path": "src/main.tsx",
"content": "import { createRoot } from \"react-dom/client\";\nimport App from \"./App.tsx\";\nimport \"./globals.css\";\n\ncreateRoot(document.getElementById(\"root\")!).render(<App />);\n",
"force": false
},
{
"path": "src/pages/Index.tsx",
"content": "// Update this page (the content is just a fallback if you fail to update the page)\n\nimport { MadeWithDyad } from \"@/components/made-with-dyad\";\n\nconst Index = () => {\n return (\n <div className=\"min-h-screen flex items-center justify-center bg-gray-100\">\n <div className=\"text-center\">\n <h1 className=\"text-4xl font-bold mb-4\">Welcome to Your Blank App</h1>\n <p className=\"text-xl text-gray-600\">\n Start building your amazing project here!\n </p>\n </div>\n <MadeWithDyad />\n </div>\n );\n};\n\nexport default Index;\n",
"force": false
},
{
"path": "src/pages/NotFound.tsx",
"content": "import { useLocation } from \"react-router-dom\";\nimport { useEffect } from \"react\";\n\nconst NotFound = () => {\n const location = useLocation();\n\n useEffect(() => {\n console.error(\n \"404 Error: User attempted to access non-existent route:\",\n location.pathname,\n );\n }, [location.pathname]);\n\n return (\n <div className=\"min-h-screen flex items-center justify-center bg-gray-100\">\n <div className=\"text-center\">\n <h1 className=\"text-4xl font-bold mb-4\">404</h1>\n <p className=\"text-xl text-gray-600 mb-4\">Oops! Page not found</p>\n <a href=\"/\" className=\"text-blue-500 hover:text-blue-700 underline\">\n Return to Home\n </a>\n </div>\n </div>\n );\n};\n\nexport default NotFound;\n",
"force": false
},
{
"path": "src/utils/toast.ts",
"content": "import { toast } from \"sonner\";\n\nexport const showSuccess = (message: string) => {\n toast.success(message);\n};\n\nexport const showError = (message: string) => {\n toast.error(message);\n};\n\nexport const showLoading = (message: string) => {\n return toast.loading(message);\n};\n\nexport const dismissToast = (toastId: string) => {\n toast.dismiss(toastId);\n};\n",
"force": false
},
{
"path": "src/vite-env.d.ts",
"content": "/// <reference types=\"vite/client\" />\n",
"force": false
},
{
"path": "tailwind.config.ts",
"content": "import type { Config } from \"tailwindcss\";\n\nexport default {\n darkMode: [\"class\"],\n content: [\n \"./pages/**/*.{ts,tsx}\",\n \"./components/**/*.{ts,tsx}\",\n \"./app/**/*.{ts,tsx}\",\n \"./src/**/*.{ts,tsx}\",\n ],\n prefix: \"\",\n theme: {\n container: {\n center: true,\n padding: \"2rem\",\n screens: {\n \"2xl\": \"1400px\",\n },\n },\n extend: {\n colors: {\n border: \"hsl(var(--border))\",\n input: \"hsl(var(--input))\",\n ring: \"hsl(var(--ring))\",\n background: \"hsl(var(--background))\",\n foreground: \"hsl(var(--foreground))\",\n primary: {\n DEFAULT: \"hsl(var(--primary))\",\n foreground: \"hsl(var(--primary-foreground))\",\n },\n secondary: {\n DEFAULT: \"hsl(var(--secondary))\",\n foreground: \"hsl(var(--secondary-foreground))\",\n },\n destructive: {\n DEFAULT: \"hsl(var(--destructive))\",\n foreground: \"hsl(var(--destructive-foreground))\",\n },\n muted: {\n DEFAULT: \"hsl(var(--muted))\",\n foreground: \"hsl(var(--muted-foreground))\",\n },\n accent: {\n DEFAULT: \"hsl(var(--accent))\",\n foreground: \"hsl(var(--accent-foreground))\",\n },\n popover: {\n DEFAULT: \"hsl(var(--popover))\",\n foreground: \"hsl(var(--popover-foreground))\",\n },\n card: {\n DEFAULT: \"hsl(var(--card))\",\n foreground: \"hsl(var(--card-foreground))\",\n },\n sidebar: {\n DEFAULT: \"hsl(var(--sidebar-background))\",\n foreground: \"hsl(var(--sidebar-foreground))\",\n primary: \"hsl(var(--sidebar-primary))\",\n \"primary-foreground\": \"hsl(var(--sidebar-primary-foreground))\",\n accent: \"hsl(var(--sidebar-accent))\",\n \"accent-foreground\": \"hsl(var(--sidebar-accent-foreground))\",\n border: \"hsl(var(--sidebar-border))\",\n ring: \"hsl(var(--sidebar-ring))\",\n },\n },\n borderRadius: {\n lg: \"var(--radius)\",\n md: \"calc(var(--radius) - 2px)\",\n sm: \"calc(var(--radius) - 4px)\",\n },\n keyframes: {\n \"accordion-down\": {\n from: {\n height: \"0\",\n },\n to: {\n height: \"var(--radix-accordion-content-height)\",\n },\n },\n \"accordion-up\": {\n from: {\n height: \"var(--radix-accordion-content-height)\",\n },\n to: {\n height: \"0\",\n },\n },\n },\n animation: {\n \"accordion-down\": \"accordion-down 0.2s ease-out\",\n \"accordion-up\": \"accordion-up 0.2s ease-out\",\n },\n },\n },\n plugins: [require(\"tailwindcss-animate\")],\n} satisfies Config;\n",
"force": false
},
{
"path": "vite.config.ts",
"content": "import { defineConfig } from \"vite\";\nimport dyadComponentTagger from \"@dyad-sh/react-vite-component-tagger\";\nimport react from \"@vitejs/plugin-react-swc\";\nimport path from \"path\";\n\nexport default defineConfig(() => ({\n server: {\n host: \"::\",\n port: 8080,\n },\n plugins: [dyadComponentTagger(), react()],\n resolve: {\n alias: {\n \"@\": path.resolve(__dirname, \"./src\"),\n },\n },\n}));\n",
"force": false
}
],
"enable_lazy_edits": true,
"enable_smart_files_context": true
}
},
"headers": {
"authorization": "Bearer testdyadkey"
}
}
\ No newline at end of file
e2e-tests/snapshots/engine.spec.ts_send-message-to-engine-1.txt
浏览文件 @ 30b5c0d0
......@@ -14,6 +14,10 @@
}
],
"stream": true,
"thinking": {
"type": "enabled",
"include_thoughts": true
},
"dyad_options": {
"files": [
{
......
e2e-tests/snapshots/engine.spec.ts_send-message-to-gateway-1.txt → e2e-tests/snapshots/gateway.spec.ts_claude-4-sonnet-1.txt
浏览文件 @ 30b5c0d0
{
"body": {
"model": "gemini/gemini-2.5-flash-preview-05-20",
"max_tokens": 65535,
"model": "anthropic/claude-sonnet-4-20250514",
"max_tokens": 16000,
"temperature": 0,
"messages": [
{
......
e2e-tests/snapshots/gateway.spec.ts_gemini-2-5-flash-1.txt 0 → 100644
浏览文件 @ 30b5c0d0
{
"body": {
"model": "gemini/gemini-2.5-flash-preview-05-20",
"max_tokens": 65535,
"temperature": 0,
"thinking": {
"type": "enabled",
"include_thoughts": true
},
"messages": [
{
"role": "system",
"content": "[[SYSTEM_MESSAGE]]"
},
{
"role": "user",
"content": "This is my codebase. <dyad-file path=\"AI_RULES.md\">\n# Tech Stack\n\n- You are building a React application.\n- Use TypeScript.\n- Use React Router. KEEP the routes in src/App.tsx\n- Always put source code in the src folder.\n- Put pages into src/pages/\n- Put components into src/components/\n- The main page (default page) is src/pages/Index.tsx\n- UPDATE the main page to include the new components. OTHERWISE, the user can NOT see any components!\n- ALWAYS try to use the shadcn/ui library.\n- Tailwind CSS: always use Tailwind CSS for styling components. Utilize Tailwind classes extensively for layout, spacing, colors, and other design aspects.\n\nAvailable packages and libraries:\n\n- The lucide-react package is installed for icons.\n- You ALREADY have ALL the shadcn/ui components and their dependencies installed. So you don't need to install them again.\n- You have ALL the necessary Radix UI components installed.\n- 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.\n\n</dyad-file>\n\n<dyad-file path=\"eslint.config.js\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"index.html\">\n<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>dyad-generated-app</title>\n </head>\n\n <body>\n <div id=\"root\"></div>\n <script type=\"module\" src=\"/src/main.tsx\"></script>\n </body>\n</html>\n\n</dyad-file>\n\n<dyad-file path=\"package.json\">\n{\n \"dependencies\": {\n \"@hookform/resolvers\": \"^3.9.0\",\n \"@radix-ui/react-accordion\": \"^1.2.0\",\n \"@radix-ui/react-alert-dialog\": \"^1.1.1\",\n \"@radix-ui/react-aspect-ratio\": \"^1.1.0\",\n \"@radix-ui/react-avatar\": \"^1.1.0\",\n \"@radix-ui/react-checkbox\": \"^1.1.1\",\n \"@radix-ui/react-collapsible\": \"^1.1.0\",\n \"@radix-ui/react-context-menu\": \"^2.2.1\",\n \"@radix-ui/react-dialog\": \"^1.1.2\",\n \"@radix-ui/react-dropdown-menu\": \"^2.1.1\",\n \"@radix-ui/react-hover-card\": \"^1.1.1\",\n \"@radix-ui/react-label\": \"^2.1.0\",\n \"@radix-ui/react-menubar\": \"^1.1.1\",\n \"@radix-ui/react-navigation-menu\": \"^1.2.0\",\n \"@radix-ui/react-popover\": \"^1.1.1\",\n \"@radix-ui/react-progress\": \"^1.1.0\",\n \"@radix-ui/react-radio-group\": \"^1.2.0\",\n \"@radix-ui/react-scroll-area\": \"^1.1.0\",\n \"@radix-ui/react-select\": \"^2.1.1\",\n \"@radix-ui/react-separator\": \"^1.1.0\",\n \"@radix-ui/react-slider\": \"^1.2.0\",\n \"@radix-ui/react-slot\": \"^1.1.0\",\n \"@radix-ui/react-switch\": \"^1.1.0\",\n \"@radix-ui/react-tabs\": \"^1.1.0\",\n \"@radix-ui/react-toast\": \"^1.2.1\",\n \"@radix-ui/react-toggle\": \"^1.1.0\",\n \"@radix-ui/react-toggle-group\": \"^1.1.0\",\n \"@radix-ui/react-tooltip\": \"^1.1.4\",\n \"@tanstack/react-query\": \"^5.56.2\",\n \"class-variance-authority\": \"^0.7.1\",\n \"clsx\": \"^2.1.1\",\n \"cmdk\": \"^1.0.0\",\n \"date-fns\": \"^3.6.0\",\n \"embla-carousel-react\": \"^8.3.0\",\n \"input-otp\": \"^1.2.4\",\n \"lucide-react\": \"^0.462.0\",\n \"next-themes\": \"^0.3.0\",\n \"react\": \"^18.3.1\",\n \"react-day-picker\": \"^8.10.1\",\n \"react-dom\": \"^18.3.1\",\n \"react-hook-form\": \"^7.53.0\",\n \"react-resizable-panels\": \"^2.1.3\",\n \"react-router-dom\": \"^6.26.2\",\n \"recharts\": \"^2.12.7\",\n \"sonner\": \"^1.5.0\",\n \"tailwind-merge\": \"^2.5.2\",\n \"tailwindcss-animate\": \"^1.0.7\",\n \"vaul\": \"^0.9.3\",\n \"zod\": \"^3.23.8\"\n },\n \"devDependencies\": {\n \"@dyad-sh/react-vite-component-tagger\": \"^0.8.0\",\n \"@eslint/js\": \"^9.9.0\",\n \"@tailwindcss/typography\": \"^0.5.15\",\n \"@types/node\": \"^22.5.5\",\n \"@types/react\": \"^18.3.3\",\n \"@types/react-dom\": \"^18.3.0\",\n \"@vitejs/plugin-react-swc\": \"^3.9.0\",\n \"autoprefixer\": \"^10.4.20\",\n \"eslint\": \"^9.9.0\",\n \"eslint-plugin-react-hooks\": \"^5.1.0-rc.0\",\n \"eslint-plugin-react-refresh\": \"^0.4.9\",\n \"globals\": \"^15.9.0\",\n \"postcss\": \"^8.4.47\",\n \"tailwindcss\": \"^3.4.11\",\n \"typescript\": \"^5.5.3\",\n \"typescript-eslint\": \"^8.0.1\",\n \"vite\": \"^6.3.4\"\n }\n}\n</dyad-file>\n\n<dyad-file path=\"postcss.config.js\">\nexport default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n\n</dyad-file>\n\n<dyad-file path=\"README.md\">\n# Welcome to your Dyad app\n\n</dyad-file>\n\n<dyad-file path=\"src/App.css\">\n#root {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n}\n\n.logo {\n height: 6em;\n padding: 1.5em;\n will-change: filter;\n transition: filter 300ms;\n}\n.logo:hover {\n filter: drop-shadow(0 0 2em #646cffaa);\n}\n.logo.react:hover {\n filter: drop-shadow(0 0 2em #61dafbaa);\n}\n\n@keyframes logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n@media (prefers-reduced-motion: no-preference) {\n a:nth-of-type(2) .logo {\n animation: logo-spin infinite 20s linear;\n }\n}\n\n.card {\n padding: 2em;\n}\n\n.read-the-docs {\n color: #888;\n}\n\n</dyad-file>\n\n<dyad-file path=\"src/App.tsx\">\nimport { Toaster } from \"@/components/ui/toaster\";\nimport { Toaster as Sonner } from \"@/components/ui/sonner\";\nimport { TooltipProvider } from \"@/components/ui/tooltip\";\nimport { QueryClient, QueryClientProvider } from \"@tanstack/react-query\";\nimport { BrowserRouter, Routes, Route } from \"react-router-dom\";\nimport Index from \"./pages/Index\";\nimport NotFound from \"./pages/NotFound\";\n\nconst queryClient = new QueryClient();\n\nconst App = () => (\n <QueryClientProvider client={queryClient}>\n <TooltipProvider>\n <Toaster />\n <Sonner />\n <BrowserRouter>\n <Routes>\n <Route path=\"/\" element={<Index />} />\n {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL \"*\" ROUTE */}\n <Route path=\"*\" element={<NotFound />} />\n </Routes>\n </BrowserRouter>\n </TooltipProvider>\n </QueryClientProvider>\n);\n\nexport default App;\n\n</dyad-file>\n\n<dyad-file path=\"src/components/made-with-dyad.tsx\">\nexport const MadeWithDyad = () => {\n return (\n <div className=\"p-4 text-center\">\n <a\n href=\"https://www.dyad.sh/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200\"\n >\n Made with Dyad\n </a>\n </div>\n );\n};\n\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/accordion.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/alert-dialog.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/alert.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/aspect-ratio.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/avatar.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/badge.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/breadcrumb.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/button.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/calendar.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/card.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/carousel.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/chart.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/checkbox.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/collapsible.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/command.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/context-menu.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/dialog.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/drawer.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/dropdown-menu.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/form.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/hover-card.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/input-otp.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/input.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/label.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/menubar.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/navigation-menu.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/pagination.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/popover.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/progress.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/radio-group.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/resizable.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/scroll-area.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/select.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/separator.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/sheet.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/sidebar.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/skeleton.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/slider.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/sonner.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/switch.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/table.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/tabs.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/textarea.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/toast.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/toaster.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/toggle-group.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/toggle.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/tooltip.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/use-toast.ts\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/globals.css\">\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n\n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n\n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n\n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n\n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n\n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n\n --accent: 210 40% 96.1%;\n --accent-foreground: 222.2 47.4% 11.2%;\n\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n\n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n --ring: 222.2 84% 4.9%;\n\n --radius: 0.5rem;\n\n --sidebar-background: 0 0% 98%;\n\n --sidebar-foreground: 240 5.3% 26.1%;\n\n --sidebar-primary: 240 5.9% 10%;\n\n --sidebar-primary-foreground: 0 0% 98%;\n\n --sidebar-accent: 240 4.8% 95.9%;\n\n --sidebar-accent-foreground: 240 5.9% 10%;\n\n --sidebar-border: 220 13% 91%;\n\n --sidebar-ring: 217.2 91.2% 59.8%;\n }\n\n .dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n\n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n\n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n\n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 11.2%;\n\n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n\n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n\n --accent: 217.2 32.6% 17.5%;\n --accent-foreground: 210 40% 98%;\n\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 40% 98%;\n\n --border: 217.2 32.6% 17.5%;\n --input: 217.2 32.6% 17.5%;\n --ring: 212.7 26.8% 83.9%;\n --sidebar-background: 240 5.9% 10%;\n --sidebar-foreground: 240 4.8% 95.9%;\n --sidebar-primary: 224.3 76.3% 48%;\n --sidebar-primary-foreground: 0 0% 100%;\n --sidebar-accent: 240 3.7% 15.9%;\n --sidebar-accent-foreground: 240 4.8% 95.9%;\n --sidebar-border: 240 3.7% 15.9%;\n --sidebar-ring: 217.2 91.2% 59.8%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n\n body {\n @apply bg-background text-foreground;\n }\n}\n\n</dyad-file>\n\n<dyad-file path=\"src/hooks/use-mobile.tsx\">\nimport * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n const [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n undefined,\n );\n\n React.useEffect(() => {\n const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n const onChange = () => {\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n };\n mql.addEventListener(\"change\", onChange);\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n return () => mql.removeEventListener(\"change\", onChange);\n }, []);\n\n return !!isMobile;\n}\n\n</dyad-file>\n\n<dyad-file path=\"src/hooks/use-toast.ts\">\nimport * as React from \"react\";\n\nimport type { ToastActionElement, ToastProps } from \"@/components/ui/toast\";\n\nconst TOAST_LIMIT = 1;\nconst TOAST_REMOVE_DELAY = 1000000;\n\ntype ToasterToast = ToastProps & {\n id: string;\n title?: React.ReactNode;\n description?: React.ReactNode;\n action?: ToastActionElement;\n};\n\nconst _actionTypes = {\n ADD_TOAST: \"ADD_TOAST\",\n UPDATE_TOAST: \"UPDATE_TOAST\",\n DISMISS_TOAST: \"DISMISS_TOAST\",\n REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const;\n\nlet count = 0;\n\nfunction genId() {\n count = (count + 1) % Number.MAX_SAFE_INTEGER;\n return count.toString();\n}\n\ntype ActionType = typeof _actionTypes;\n\ntype Action =\n | {\n type: ActionType[\"ADD_TOAST\"];\n toast: ToasterToast;\n }\n | {\n type: ActionType[\"UPDATE_TOAST\"];\n toast: Partial<ToasterToast>;\n }\n | {\n type: ActionType[\"DISMISS_TOAST\"];\n toastId?: ToasterToast[\"id\"];\n }\n | {\n type: ActionType[\"REMOVE_TOAST\"];\n toastId?: ToasterToast[\"id\"];\n };\n\ninterface State {\n toasts: ToasterToast[];\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nconst addToRemoveQueue = (toastId: string) => {\n if (toastTimeouts.has(toastId)) {\n return;\n }\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId);\n dispatch({\n type: \"REMOVE_TOAST\",\n toastId: toastId,\n });\n }, TOAST_REMOVE_DELAY);\n\n toastTimeouts.set(toastId, timeout);\n};\n\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case \"ADD_TOAST\":\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n };\n\n case \"UPDATE_TOAST\":\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t,\n ),\n };\n\n case \"DISMISS_TOAST\": {\n const { toastId } = action;\n\n // ! Side effects ! - This could be extracted into a dismissToast() action,\n // but I'll keep it here for simplicity\n if (toastId) {\n addToRemoveQueue(toastId);\n } else {\n state.toasts.forEach((toast) => {\n addToRemoveQueue(toast.id);\n });\n }\n\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === toastId || toastId === undefined\n ? {\n ...t,\n open: false,\n }\n : t,\n ),\n };\n }\n case \"REMOVE_TOAST\":\n if (action.toastId === undefined) {\n return {\n ...state,\n toasts: [],\n };\n }\n return {\n ...state,\n toasts: state.toasts.filter((t) => t.id !== action.toastId),\n };\n }\n};\n\nconst listeners: Array<(state: State) => void> = [];\n\nlet memoryState: State = { toasts: [] };\n\nfunction dispatch(action: Action) {\n memoryState = reducer(memoryState, action);\n listeners.forEach((listener) => {\n listener(memoryState);\n });\n}\n\ntype Toast = Omit<ToasterToast, \"id\">;\n\nfunction toast({ ...props }: Toast) {\n const id = genId();\n\n const update = (props: ToasterToast) =>\n dispatch({\n type: \"UPDATE_TOAST\",\n toast: { ...props, id },\n });\n const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id });\n\n dispatch({\n type: \"ADD_TOAST\",\n toast: {\n ...props,\n id,\n open: true,\n onOpenChange: (open) => {\n if (!open) dismiss();\n },\n },\n });\n\n return {\n id: id,\n dismiss,\n update,\n };\n}\n\nfunction useToast() {\n const [state, setState] = React.useState<State>(memoryState);\n\n React.useEffect(() => {\n listeners.push(setState);\n return () => {\n const index = listeners.indexOf(setState);\n if (index > -1) {\n listeners.splice(index, 1);\n }\n };\n }, [state]);\n\n return {\n ...state,\n toast,\n dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId }),\n };\n}\n\nexport { useToast, toast };\n\n</dyad-file>\n\n<dyad-file path=\"src/lib/utils.ts\">\nimport { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\n</dyad-file>\n\n<dyad-file path=\"src/main.tsx\">\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App.tsx\";\nimport \"./globals.css\";\n\ncreateRoot(document.getElementById(\"root\")!).render(<App />);\n\n</dyad-file>\n\n<dyad-file path=\"src/pages/Index.tsx\">\n// Update this page (the content is just a fallback if you fail to update the page)\n\nimport { MadeWithDyad } from \"@/components/made-with-dyad\";\n\nconst Index = () => {\n return (\n <div className=\"min-h-screen flex items-center justify-center bg-gray-100\">\n <div className=\"text-center\">\n <h1 className=\"text-4xl font-bold mb-4\">Welcome to Your Blank App</h1>\n <p className=\"text-xl text-gray-600\">\n Start building your amazing project here!\n </p>\n </div>\n <MadeWithDyad />\n </div>\n );\n};\n\nexport default Index;\n\n</dyad-file>\n\n<dyad-file path=\"src/pages/NotFound.tsx\">\nimport { useLocation } from \"react-router-dom\";\nimport { useEffect } from \"react\";\n\nconst NotFound = () => {\n const location = useLocation();\n\n useEffect(() => {\n console.error(\n \"404 Error: User attempted to access non-existent route:\",\n location.pathname,\n );\n }, [location.pathname]);\n\n return (\n <div className=\"min-h-screen flex items-center justify-center bg-gray-100\">\n <div className=\"text-center\">\n <h1 className=\"text-4xl font-bold mb-4\">404</h1>\n <p className=\"text-xl text-gray-600 mb-4\">Oops! Page not found</p>\n <a href=\"/\" className=\"text-blue-500 hover:text-blue-700 underline\">\n Return to Home\n </a>\n </div>\n </div>\n );\n};\n\nexport default NotFound;\n\n</dyad-file>\n\n<dyad-file path=\"src/utils/toast.ts\">\nimport { toast } from \"sonner\";\n\nexport const showSuccess = (message: string) => {\n toast.success(message);\n};\n\nexport const showError = (message: string) => {\n toast.error(message);\n};\n\nexport const showLoading = (message: string) => {\n return toast.loading(message);\n};\n\nexport const dismissToast = (toastId: string) => {\n toast.dismiss(toastId);\n};\n\n</dyad-file>\n\n<dyad-file path=\"src/vite-env.d.ts\">\n/// <reference types=\"vite/client\" />\n\n</dyad-file>\n\n<dyad-file path=\"tailwind.config.ts\">\nimport type { Config } from \"tailwindcss\";\n\nexport default {\n darkMode: [\"class\"],\n content: [\n \"./pages/**/*.{ts,tsx}\",\n \"./components/**/*.{ts,tsx}\",\n \"./app/**/*.{ts,tsx}\",\n \"./src/**/*.{ts,tsx}\",\n ],\n prefix: \"\",\n theme: {\n container: {\n center: true,\n padding: \"2rem\",\n screens: {\n \"2xl\": \"1400px\",\n },\n },\n extend: {\n colors: {\n border: \"hsl(var(--border))\",\n input: \"hsl(var(--input))\",\n ring: \"hsl(var(--ring))\",\n background: \"hsl(var(--background))\",\n foreground: \"hsl(var(--foreground))\",\n primary: {\n DEFAULT: \"hsl(var(--primary))\",\n foreground: \"hsl(var(--primary-foreground))\",\n },\n secondary: {\n DEFAULT: \"hsl(var(--secondary))\",\n foreground: \"hsl(var(--secondary-foreground))\",\n },\n destructive: {\n DEFAULT: \"hsl(var(--destructive))\",\n foreground: \"hsl(var(--destructive-foreground))\",\n },\n muted: {\n DEFAULT: \"hsl(var(--muted))\",\n foreground: \"hsl(var(--muted-foreground))\",\n },\n accent: {\n DEFAULT: \"hsl(var(--accent))\",\n foreground: \"hsl(var(--accent-foreground))\",\n },\n popover: {\n DEFAULT: \"hsl(var(--popover))\",\n foreground: \"hsl(var(--popover-foreground))\",\n },\n card: {\n DEFAULT: \"hsl(var(--card))\",\n foreground: \"hsl(var(--card-foreground))\",\n },\n sidebar: {\n DEFAULT: \"hsl(var(--sidebar-background))\",\n foreground: \"hsl(var(--sidebar-foreground))\",\n primary: \"hsl(var(--sidebar-primary))\",\n \"primary-foreground\": \"hsl(var(--sidebar-primary-foreground))\",\n accent: \"hsl(var(--sidebar-accent))\",\n \"accent-foreground\": \"hsl(var(--sidebar-accent-foreground))\",\n border: \"hsl(var(--sidebar-border))\",\n ring: \"hsl(var(--sidebar-ring))\",\n },\n },\n borderRadius: {\n lg: \"var(--radius)\",\n md: \"calc(var(--radius) - 2px)\",\n sm: \"calc(var(--radius) - 4px)\",\n },\n keyframes: {\n \"accordion-down\": {\n from: {\n height: \"0\",\n },\n to: {\n height: \"var(--radix-accordion-content-height)\",\n },\n },\n \"accordion-up\": {\n from: {\n height: \"var(--radix-accordion-content-height)\",\n },\n to: {\n height: \"0\",\n },\n },\n },\n animation: {\n \"accordion-down\": \"accordion-down 0.2s ease-out\",\n \"accordion-up\": \"accordion-up 0.2s ease-out\",\n },\n },\n },\n plugins: [require(\"tailwindcss-animate\")],\n} satisfies Config;\n\n</dyad-file>\n\n<dyad-file path=\"vite.config.ts\">\nimport { defineConfig } from \"vite\";\nimport dyadComponentTagger from \"@dyad-sh/react-vite-component-tagger\";\nimport react from \"@vitejs/plugin-react-swc\";\nimport path from \"path\";\n\nexport default defineConfig(() => ({\n server: {\n host: \"::\",\n port: 8080,\n },\n plugins: [dyadComponentTagger(), react()],\n resolve: {\n alias: {\n \"@\": path.resolve(__dirname, \"./src\"),\n },\n },\n}));\n\n</dyad-file>\n\n"
},
{
"role": "assistant",
"content": "OK, got it. I'm ready to help"
},
{
"role": "user",
"content": "[dump] tc=gateway-simple"
}
],
"stream": true
},
"headers": {
"authorization": "Bearer testdyadkey"
}
}
\ No newline at end of file
e2e-tests/snapshots/gateway.spec.ts_send-message-to-gateway---claude-4-sonnet-1.txt 0 → 100644
浏览文件 @ 30b5c0d0
{
"body": {
"model": "anthropic/claude-sonnet-4-20250514",
"max_tokens": 16000,
"temperature": 0,
"messages": [
{
"role": "system",
"content": "[[SYSTEM_MESSAGE]]"
},
{
"role": "user",
"content": "This is my codebase. <dyad-file path=\"AI_RULES.md\">\n# Tech Stack\n\n- You are building a React application.\n- Use TypeScript.\n- Use React Router. KEEP the routes in src/App.tsx\n- Always put source code in the src folder.\n- Put pages into src/pages/\n- Put components into src/components/\n- The main page (default page) is src/pages/Index.tsx\n- UPDATE the main page to include the new components. OTHERWISE, the user can NOT see any components!\n- ALWAYS try to use the shadcn/ui library.\n- Tailwind CSS: always use Tailwind CSS for styling components. Utilize Tailwind classes extensively for layout, spacing, colors, and other design aspects.\n\nAvailable packages and libraries:\n\n- The lucide-react package is installed for icons.\n- You ALREADY have ALL the shadcn/ui components and their dependencies installed. So you don't need to install them again.\n- You have ALL the necessary Radix UI components installed.\n- 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.\n\n</dyad-file>\n\n<dyad-file path=\"eslint.config.js\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"index.html\">\n<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>dyad-generated-app</title>\n </head>\n\n <body>\n <div id=\"root\"></div>\n <script type=\"module\" src=\"/src/main.tsx\"></script>\n </body>\n</html>\n\n</dyad-file>\n\n<dyad-file path=\"package.json\">\n{\n \"dependencies\": {\n \"@hookform/resolvers\": \"^3.9.0\",\n \"@radix-ui/react-accordion\": \"^1.2.0\",\n \"@radix-ui/react-alert-dialog\": \"^1.1.1\",\n \"@radix-ui/react-aspect-ratio\": \"^1.1.0\",\n \"@radix-ui/react-avatar\": \"^1.1.0\",\n \"@radix-ui/react-checkbox\": \"^1.1.1\",\n \"@radix-ui/react-collapsible\": \"^1.1.0\",\n \"@radix-ui/react-context-menu\": \"^2.2.1\",\n \"@radix-ui/react-dialog\": \"^1.1.2\",\n \"@radix-ui/react-dropdown-menu\": \"^2.1.1\",\n \"@radix-ui/react-hover-card\": \"^1.1.1\",\n \"@radix-ui/react-label\": \"^2.1.0\",\n \"@radix-ui/react-menubar\": \"^1.1.1\",\n \"@radix-ui/react-navigation-menu\": \"^1.2.0\",\n \"@radix-ui/react-popover\": \"^1.1.1\",\n \"@radix-ui/react-progress\": \"^1.1.0\",\n \"@radix-ui/react-radio-group\": \"^1.2.0\",\n \"@radix-ui/react-scroll-area\": \"^1.1.0\",\n \"@radix-ui/react-select\": \"^2.1.1\",\n \"@radix-ui/react-separator\": \"^1.1.0\",\n \"@radix-ui/react-slider\": \"^1.2.0\",\n \"@radix-ui/react-slot\": \"^1.1.0\",\n \"@radix-ui/react-switch\": \"^1.1.0\",\n \"@radix-ui/react-tabs\": \"^1.1.0\",\n \"@radix-ui/react-toast\": \"^1.2.1\",\n \"@radix-ui/react-toggle\": \"^1.1.0\",\n \"@radix-ui/react-toggle-group\": \"^1.1.0\",\n \"@radix-ui/react-tooltip\": \"^1.1.4\",\n \"@tanstack/react-query\": \"^5.56.2\",\n \"class-variance-authority\": \"^0.7.1\",\n \"clsx\": \"^2.1.1\",\n \"cmdk\": \"^1.0.0\",\n \"date-fns\": \"^3.6.0\",\n \"embla-carousel-react\": \"^8.3.0\",\n \"input-otp\": \"^1.2.4\",\n \"lucide-react\": \"^0.462.0\",\n \"next-themes\": \"^0.3.0\",\n \"react\": \"^18.3.1\",\n \"react-day-picker\": \"^8.10.1\",\n \"react-dom\": \"^18.3.1\",\n \"react-hook-form\": \"^7.53.0\",\n \"react-resizable-panels\": \"^2.1.3\",\n \"react-router-dom\": \"^6.26.2\",\n \"recharts\": \"^2.12.7\",\n \"sonner\": \"^1.5.0\",\n \"tailwind-merge\": \"^2.5.2\",\n \"tailwindcss-animate\": \"^1.0.7\",\n \"vaul\": \"^0.9.3\",\n \"zod\": \"^3.23.8\"\n },\n \"devDependencies\": {\n \"@dyad-sh/react-vite-component-tagger\": \"^0.8.0\",\n \"@eslint/js\": \"^9.9.0\",\n \"@tailwindcss/typography\": \"^0.5.15\",\n \"@types/node\": \"^22.5.5\",\n \"@types/react\": \"^18.3.3\",\n \"@types/react-dom\": \"^18.3.0\",\n \"@vitejs/plugin-react-swc\": \"^3.9.0\",\n \"autoprefixer\": \"^10.4.20\",\n \"eslint\": \"^9.9.0\",\n \"eslint-plugin-react-hooks\": \"^5.1.0-rc.0\",\n \"eslint-plugin-react-refresh\": \"^0.4.9\",\n \"globals\": \"^15.9.0\",\n \"postcss\": \"^8.4.47\",\n \"tailwindcss\": \"^3.4.11\",\n \"typescript\": \"^5.5.3\",\n \"typescript-eslint\": \"^8.0.1\",\n \"vite\": \"^6.3.4\"\n }\n}\n</dyad-file>\n\n<dyad-file path=\"postcss.config.js\">\nexport default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n\n</dyad-file>\n\n<dyad-file path=\"README.md\">\n# Welcome to your Dyad app\n\n</dyad-file>\n\n<dyad-file path=\"src/App.css\">\n#root {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n}\n\n.logo {\n height: 6em;\n padding: 1.5em;\n will-change: filter;\n transition: filter 300ms;\n}\n.logo:hover {\n filter: drop-shadow(0 0 2em #646cffaa);\n}\n.logo.react:hover {\n filter: drop-shadow(0 0 2em #61dafbaa);\n}\n\n@keyframes logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n@media (prefers-reduced-motion: no-preference) {\n a:nth-of-type(2) .logo {\n animation: logo-spin infinite 20s linear;\n }\n}\n\n.card {\n padding: 2em;\n}\n\n.read-the-docs {\n color: #888;\n}\n\n</dyad-file>\n\n<dyad-file path=\"src/App.tsx\">\nimport { Toaster } from \"@/components/ui/toaster\";\nimport { Toaster as Sonner } from \"@/components/ui/sonner\";\nimport { TooltipProvider } from \"@/components/ui/tooltip\";\nimport { QueryClient, QueryClientProvider } from \"@tanstack/react-query\";\nimport { BrowserRouter, Routes, Route } from \"react-router-dom\";\nimport Index from \"./pages/Index\";\nimport NotFound from \"./pages/NotFound\";\n\nconst queryClient = new QueryClient();\n\nconst App = () => (\n <QueryClientProvider client={queryClient}>\n <TooltipProvider>\n <Toaster />\n <Sonner />\n <BrowserRouter>\n <Routes>\n <Route path=\"/\" element={<Index />} />\n {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL \"*\" ROUTE */}\n <Route path=\"*\" element={<NotFound />} />\n </Routes>\n </BrowserRouter>\n </TooltipProvider>\n </QueryClientProvider>\n);\n\nexport default App;\n\n</dyad-file>\n\n<dyad-file path=\"src/components/made-with-dyad.tsx\">\nexport const MadeWithDyad = () => {\n return (\n <div className=\"p-4 text-center\">\n <a\n href=\"https://www.dyad.sh/\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200\"\n >\n Made with Dyad\n </a>\n </div>\n );\n};\n\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/accordion.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/alert-dialog.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/alert.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/aspect-ratio.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/avatar.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/badge.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/breadcrumb.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/button.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/calendar.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/card.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/carousel.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/chart.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/checkbox.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/collapsible.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/command.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/context-menu.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/dialog.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/drawer.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/dropdown-menu.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/form.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/hover-card.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/input-otp.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/input.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/label.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/menubar.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/navigation-menu.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/pagination.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/popover.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/progress.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/radio-group.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/resizable.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/scroll-area.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/select.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/separator.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/sheet.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/sidebar.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/skeleton.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/slider.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/sonner.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/switch.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/table.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/tabs.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/textarea.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/toast.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/toaster.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/toggle-group.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/toggle.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/tooltip.tsx\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/components/ui/use-toast.ts\">\n// Contents omitted for brevity\n</dyad-file>\n\n<dyad-file path=\"src/globals.css\">\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n\n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n\n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n\n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n\n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n\n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n\n --accent: 210 40% 96.1%;\n --accent-foreground: 222.2 47.4% 11.2%;\n\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n\n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n --ring: 222.2 84% 4.9%;\n\n --radius: 0.5rem;\n\n --sidebar-background: 0 0% 98%;\n\n --sidebar-foreground: 240 5.3% 26.1%;\n\n --sidebar-primary: 240 5.9% 10%;\n\n --sidebar-primary-foreground: 0 0% 98%;\n\n --sidebar-accent: 240 4.8% 95.9%;\n\n --sidebar-accent-foreground: 240 5.9% 10%;\n\n --sidebar-border: 220 13% 91%;\n\n --sidebar-ring: 217.2 91.2% 59.8%;\n }\n\n .dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n\n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n\n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n\n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 11.2%;\n\n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n\n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n\n --accent: 217.2 32.6% 17.5%;\n --accent-foreground: 210 40% 98%;\n\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 40% 98%;\n\n --border: 217.2 32.6% 17.5%;\n --input: 217.2 32.6% 17.5%;\n --ring: 212.7 26.8% 83.9%;\n --sidebar-background: 240 5.9% 10%;\n --sidebar-foreground: 240 4.8% 95.9%;\n --sidebar-primary: 224.3 76.3% 48%;\n --sidebar-primary-foreground: 0 0% 100%;\n --sidebar-accent: 240 3.7% 15.9%;\n --sidebar-accent-foreground: 240 4.8% 95.9%;\n --sidebar-border: 240 3.7% 15.9%;\n --sidebar-ring: 217.2 91.2% 59.8%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n\n body {\n @apply bg-background text-foreground;\n }\n}\n\n</dyad-file>\n\n<dyad-file path=\"src/hooks/use-mobile.tsx\">\nimport * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n const [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n undefined,\n );\n\n React.useEffect(() => {\n const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n const onChange = () => {\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n };\n mql.addEventListener(\"change\", onChange);\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n return () => mql.removeEventListener(\"change\", onChange);\n }, []);\n\n return !!isMobile;\n}\n\n</dyad-file>\n\n<dyad-file path=\"src/hooks/use-toast.ts\">\nimport * as React from \"react\";\n\nimport type { ToastActionElement, ToastProps } from \"@/components/ui/toast\";\n\nconst TOAST_LIMIT = 1;\nconst TOAST_REMOVE_DELAY = 1000000;\n\ntype ToasterToast = ToastProps & {\n id: string;\n title?: React.ReactNode;\n description?: React.ReactNode;\n action?: ToastActionElement;\n};\n\nconst _actionTypes = {\n ADD_TOAST: \"ADD_TOAST\",\n UPDATE_TOAST: \"UPDATE_TOAST\",\n DISMISS_TOAST: \"DISMISS_TOAST\",\n REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const;\n\nlet count = 0;\n\nfunction genId() {\n count = (count + 1) % Number.MAX_SAFE_INTEGER;\n return count.toString();\n}\n\ntype ActionType = typeof _actionTypes;\n\ntype Action =\n | {\n type: ActionType[\"ADD_TOAST\"];\n toast: ToasterToast;\n }\n | {\n type: ActionType[\"UPDATE_TOAST\"];\n toast: Partial<ToasterToast>;\n }\n | {\n type: ActionType[\"DISMISS_TOAST\"];\n toastId?: ToasterToast[\"id\"];\n }\n | {\n type: ActionType[\"REMOVE_TOAST\"];\n toastId?: ToasterToast[\"id\"];\n };\n\ninterface State {\n toasts: ToasterToast[];\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nconst addToRemoveQueue = (toastId: string) => {\n if (toastTimeouts.has(toastId)) {\n return;\n }\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId);\n dispatch({\n type: \"REMOVE_TOAST\",\n toastId: toastId,\n });\n }, TOAST_REMOVE_DELAY);\n\n toastTimeouts.set(toastId, timeout);\n};\n\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case \"ADD_TOAST\":\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n };\n\n case \"UPDATE_TOAST\":\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t,\n ),\n };\n\n case \"DISMISS_TOAST\": {\n const { toastId } = action;\n\n // ! Side effects ! - This could be extracted into a dismissToast() action,\n // but I'll keep it here for simplicity\n if (toastId) {\n addToRemoveQueue(toastId);\n } else {\n state.toasts.forEach((toast) => {\n addToRemoveQueue(toast.id);\n });\n }\n\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === toastId || toastId === undefined\n ? {\n ...t,\n open: false,\n }\n : t,\n ),\n };\n }\n case \"REMOVE_TOAST\":\n if (action.toastId === undefined) {\n return {\n ...state,\n toasts: [],\n };\n }\n return {\n ...state,\n toasts: state.toasts.filter((t) => t.id !== action.toastId),\n };\n }\n};\n\nconst listeners: Array<(state: State) => void> = [];\n\nlet memoryState: State = { toasts: [] };\n\nfunction dispatch(action: Action) {\n memoryState = reducer(memoryState, action);\n listeners.forEach((listener) => {\n listener(memoryState);\n });\n}\n\ntype Toast = Omit<ToasterToast, \"id\">;\n\nfunction toast({ ...props }: Toast) {\n const id = genId();\n\n const update = (props: ToasterToast) =>\n dispatch({\n type: \"UPDATE_TOAST\",\n toast: { ...props, id },\n });\n const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id });\n\n dispatch({\n type: \"ADD_TOAST\",\n toast: {\n ...props,\n id,\n open: true,\n onOpenChange: (open) => {\n if (!open) dismiss();\n },\n },\n });\n\n return {\n id: id,\n dismiss,\n update,\n };\n}\n\nfunction useToast() {\n const [state, setState] = React.useState<State>(memoryState);\n\n React.useEffect(() => {\n listeners.push(setState);\n return () => {\n const index = listeners.indexOf(setState);\n if (index > -1) {\n listeners.splice(index, 1);\n }\n };\n }, [state]);\n\n return {\n ...state,\n toast,\n dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId }),\n };\n}\n\nexport { useToast, toast };\n\n</dyad-file>\n\n<dyad-file path=\"src/lib/utils.ts\">\nimport { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\n</dyad-file>\n\n<dyad-file path=\"src/main.tsx\">\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App.tsx\";\nimport \"./globals.css\";\n\ncreateRoot(document.getElementById(\"root\")!).render(<App />);\n\n</dyad-file>\n\n<dyad-file path=\"src/pages/Index.tsx\">\n// Update this page (the content is just a fallback if you fail to update the page)\n\nimport { MadeWithDyad } from \"@/components/made-with-dyad\";\n\nconst Index = () => {\n return (\n <div className=\"min-h-screen flex items-center justify-center bg-gray-100\">\n <div className=\"text-center\">\n <h1 className=\"text-4xl font-bold mb-4\">Welcome to Your Blank App</h1>\n <p className=\"text-xl text-gray-600\">\n Start building your amazing project here!\n </p>\n </div>\n <MadeWithDyad />\n </div>\n );\n};\n\nexport default Index;\n\n</dyad-file>\n\n<dyad-file path=\"src/pages/NotFound.tsx\">\nimport { useLocation } from \"react-router-dom\";\nimport { useEffect } from \"react\";\n\nconst NotFound = () => {\n const location = useLocation();\n\n useEffect(() => {\n console.error(\n \"404 Error: User attempted to access non-existent route:\",\n location.pathname,\n );\n }, [location.pathname]);\n\n return (\n <div className=\"min-h-screen flex items-center justify-center bg-gray-100\">\n <div className=\"text-center\">\n <h1 className=\"text-4xl font-bold mb-4\">404</h1>\n <p className=\"text-xl text-gray-600 mb-4\">Oops! Page not found</p>\n <a href=\"/\" className=\"text-blue-500 hover:text-blue-700 underline\">\n Return to Home\n </a>\n </div>\n </div>\n );\n};\n\nexport default NotFound;\n\n</dyad-file>\n\n<dyad-file path=\"src/utils/toast.ts\">\nimport { toast } from \"sonner\";\n\nexport const showSuccess = (message: string) => {\n toast.success(message);\n};\n\nexport const showError = (message: string) => {\n toast.error(message);\n};\n\nexport const showLoading = (message: string) => {\n return toast.loading(message);\n};\n\nexport const dismissToast = (toastId: string) => {\n toast.dismiss(toastId);\n};\n\n</dyad-file>\n\n<dyad-file path=\"src/vite-env.d.ts\">\n/// <reference types=\"vite/client\" />\n\n</dyad-file>\n\n<dyad-file path=\"tailwind.config.ts\">\nimport type { Config } from \"tailwindcss\";\n\nexport default {\n darkMode: [\"class\"],\n content: [\n \"./pages/**/*.{ts,tsx}\",\n \"./components/**/*.{ts,tsx}\",\n \"./app/**/*.{ts,tsx}\",\n \"./src/**/*.{ts,tsx}\",\n ],\n prefix: \"\",\n theme: {\n container: {\n center: true,\n padding: \"2rem\",\n screens: {\n \"2xl\": \"1400px\",\n },\n },\n extend: {\n colors: {\n border: \"hsl(var(--border))\",\n input: \"hsl(var(--input))\",\n ring: \"hsl(var(--ring))\",\n background: \"hsl(var(--background))\",\n foreground: \"hsl(var(--foreground))\",\n primary: {\n DEFAULT: \"hsl(var(--primary))\",\n foreground: \"hsl(var(--primary-foreground))\",\n },\n secondary: {\n DEFAULT: \"hsl(var(--secondary))\",\n foreground: \"hsl(var(--secondary-foreground))\",\n },\n destructive: {\n DEFAULT: \"hsl(var(--destructive))\",\n foreground: \"hsl(var(--destructive-foreground))\",\n },\n muted: {\n DEFAULT: \"hsl(var(--muted))\",\n foreground: \"hsl(var(--muted-foreground))\",\n },\n accent: {\n DEFAULT: \"hsl(var(--accent))\",\n foreground: \"hsl(var(--accent-foreground))\",\n },\n popover: {\n DEFAULT: \"hsl(var(--popover))\",\n foreground: \"hsl(var(--popover-foreground))\",\n },\n card: {\n DEFAULT: \"hsl(var(--card))\",\n foreground: \"hsl(var(--card-foreground))\",\n },\n sidebar: {\n DEFAULT: \"hsl(var(--sidebar-background))\",\n foreground: \"hsl(var(--sidebar-foreground))\",\n primary: \"hsl(var(--sidebar-primary))\",\n \"primary-foreground\": \"hsl(var(--sidebar-primary-foreground))\",\n accent: \"hsl(var(--sidebar-accent))\",\n \"accent-foreground\": \"hsl(var(--sidebar-accent-foreground))\",\n border: \"hsl(var(--sidebar-border))\",\n ring: \"hsl(var(--sidebar-ring))\",\n },\n },\n borderRadius: {\n lg: \"var(--radius)\",\n md: \"calc(var(--radius) - 2px)\",\n sm: \"calc(var(--radius) - 4px)\",\n },\n keyframes: {\n \"accordion-down\": {\n from: {\n height: \"0\",\n },\n to: {\n height: \"var(--radix-accordion-content-height)\",\n },\n },\n \"accordion-up\": {\n from: {\n height: \"var(--radix-accordion-content-height)\",\n },\n to: {\n height: \"0\",\n },\n },\n },\n animation: {\n \"accordion-down\": \"accordion-down 0.2s ease-out\",\n \"accordion-up\": \"accordion-up 0.2s ease-out\",\n },\n },\n },\n plugins: [require(\"tailwindcss-animate\")],\n} satisfies Config;\n\n</dyad-file>\n\n<dyad-file path=\"vite.config.ts\">\nimport { defineConfig } from \"vite\";\nimport dyadComponentTagger from \"@dyad-sh/react-vite-component-tagger\";\nimport react from \"@vitejs/plugin-react-swc\";\nimport path from \"path\";\n\nexport default defineConfig(() => ({\n server: {\n host: \"::\",\n port: 8080,\n },\n plugins: [dyadComponentTagger(), react()],\n resolve: {\n alias: {\n \"@\": path.resolve(__dirname, \"./src\"),\n },\n },\n}));\n\n</dyad-file>\n\n"
},
{
"role": "assistant",
"content": "OK, got it. I'm ready to help"
},
{
"role": "user",
"content": "[dump] tc=gateway-simple"
}
],
"stream": true
},
"headers": {
"authorization": "Bearer testdyadkey"
}
}
\ No newline at end of file
e2e-tests/snapshots/import.spec.ts_import-app-2.aria.yml
浏览文件 @ 30b5c0d0
- paragraph: /Generate an AI_RULES\.md file for this app\. Describe the tech stack in 5-\d+ bullet points and describe clear rules about what libraries to use for what\./
- 'button "Thinking `＜dyad-write>`: I''ll think about the problem and write a bug report. ＜dyad-write> ＜dyad-write path=\"file1.txt\"> Fake dyad write ＜/dyad-write>"':
- img
- img
- paragraph:
- code: "`＜dyad-write>`"
- text: ": I'll think about the problem and write a bug report."
- paragraph: ＜dyad-write>
- paragraph: ＜dyad-write path="file1.txt"> Fake dyad write ＜/dyad-write>
- img
- text: file1.txt
- img
......
e2e-tests/snapshots/import.spec.ts_import-app-with-AI-rules-1.txt
浏览文件 @ 30b5c0d0
......@@ -282,58 +282,6 @@ Do not hesitate to extensively use console logs to follow the flow of the code.
DO NOT OVERENGINEER THE CODE. You take great pride in keeping things simple and elegant. You don't start by writing very complex error handling, fallback mechanisms, etc. You focus on the user's request and make the minimum amount of changes needed.
DON'T DO MORE THAN WHAT THE USER ASKS FOR.
# Thinking Process
Before responding to user requests, ALWAYS use <think></think> tags to carefully plan your approach. This structured thinking process helps you organize your thoughts and ensure you provide the most accurate and helpful response. Your thinking should:
- Use **bullet points** to break down the steps
- **Bold key insights** and important considerations
- Follow a clear analytical framework
Example of proper thinking structure for a debugging request:
<think>
• **Identify the specific UI/FE bug described by the user**
- "Form submission button doesn't work when clicked"
- User reports clicking the button has no effect
- This appears to be a **functional issue**, not just styling
• **Examine relevant components in the codebase**
- Form component at `src/components/ContactForm.jsx`
- Button component at `src/components/Button.jsx`
- Form submission logic in `src/utils/formHandlers.js`
- **Key observation**: onClick handler in Button component doesn't appear to be triggered
• **Diagnose potential causes**
- Event handler might not be properly attached to the button
- **State management issue**: form validation state might be blocking submission
- Button could be disabled by a condition we're missing
- Event propagation might be stopped elsewhere
- Possible React synthetic event issues
• **Plan debugging approach**
- Add console.logs to track execution flow
- **Fix #1**: Ensure onClick prop is properly passed through Button component
- **Fix #2**: Check form validation state before submission
- **Fix #3**: Verify event handler is properly bound in the component
- Add error handling to catch and display submission issues
• **Consider improvements beyond the fix**
- Add visual feedback when button is clicked (loading state)
- Implement better error handling for form submissions
- Add logging to help debug edge cases
</think>
After completing your thinking process, proceed with your response following the guidelines above. Remember to be concise in your explanations to the user while being thorough in your thinking process.
This structured thinking ensures you:
1. Don't miss important aspects of the request
2. Consider all relevant factors before making changes
3. Deliver more accurate and helpful responses
4. Maintain a consistent approach to problem-solving
[[beginning of AI_RULES.md]]
There's already AI rules...
[[end of AI_RULES.md]]
......
e2e-tests/snapshots/lm_studio.spec.ts_send-message-to-LM-studio-1.aria.yml
浏览文件 @ 30b5c0d0
- paragraph: hi
- 'button "Thinking `＜dyad-write>`: I''ll think about the problem and write a bug report. ＜dyad-write> ＜dyad-write path=\"file1.txt\"> Fake dyad write ＜/dyad-write>"':
- img
- img
- paragraph:
- code: "`＜dyad-write>`"
- text: ": I'll think about the problem and write a bug report."
- paragraph: ＜dyad-write>
- paragraph: ＜dyad-write path="file1.txt"> Fake dyad write ＜/dyad-write>
- img
- text: file1.txt
- img
......
e2e-tests/snapshots/main.spec.ts_simple-message-to-custom-test-model-1.aria.yml
浏览文件 @ 30b5c0d0
- paragraph: hi
- 'button "Thinking `＜dyad-write>`: I''ll think about the problem and write a bug report. ＜dyad-write> ＜dyad-write path=\"file1.txt\"> Fake dyad write ＜/dyad-write>"':
- img
- img
- paragraph:
- code: "`＜dyad-write>`"
- text: ": I'll think about the problem and write a bug report."
- paragraph: ＜dyad-write>
- paragraph: ＜dyad-write path="file1.txt"> Fake dyad write ＜/dyad-write>
- img
- text: file1.txt
- img
......
e2e-tests/snapshots/select_component.spec.ts_select-component-1.txt
浏览文件 @ 30b5c0d0
......@@ -282,58 +282,6 @@ Do not hesitate to extensively use console logs to follow the flow of the code.
DO NOT OVERENGINEER THE CODE. You take great pride in keeping things simple and elegant. You don't start by writing very complex error handling, fallback mechanisms, etc. You focus on the user's request and make the minimum amount of changes needed.
DON'T DO MORE THAN WHAT THE USER ASKS FOR.
# Thinking Process
Before responding to user requests, ALWAYS use <think></think> tags to carefully plan your approach. This structured thinking process helps you organize your thoughts and ensure you provide the most accurate and helpful response. Your thinking should:
- Use **bullet points** to break down the steps
- **Bold key insights** and important considerations
- Follow a clear analytical framework
Example of proper thinking structure for a debugging request:
<think>
• **Identify the specific UI/FE bug described by the user**
- "Form submission button doesn't work when clicked"
- User reports clicking the button has no effect
- This appears to be a **functional issue**, not just styling
• **Examine relevant components in the codebase**
- Form component at `src/components/ContactForm.jsx`
- Button component at `src/components/Button.jsx`
- Form submission logic in `src/utils/formHandlers.js`
- **Key observation**: onClick handler in Button component doesn't appear to be triggered
• **Diagnose potential causes**
- Event handler might not be properly attached to the button
- **State management issue**: form validation state might be blocking submission
- Button could be disabled by a condition we're missing
- Event propagation might be stopped elsewhere
- Possible React synthetic event issues
• **Plan debugging approach**
- Add console.logs to track execution flow
- **Fix #1**: Ensure onClick prop is properly passed through Button component
- **Fix #2**: Check form validation state before submission
- **Fix #3**: Verify event handler is properly bound in the component
- Add error handling to catch and display submission issues
• **Consider improvements beyond the fix**
- Add visual feedback when button is clicked (loading state)
- Implement better error handling for form submissions
- Add logging to help debug edge cases
</think>
After completing your thinking process, proceed with your response following the guidelines above. Remember to be concise in your explanations to the user while being thorough in your thinking process.
This structured thinking ensures you:
1. Don't miss important aspects of the request
2. Consider all relevant factors before making changes
3. Deliver more accurate and helpful responses
4. Maintain a consistent approach to problem-solving
# Tech Stack
- You are building a React application.
......
e2e-tests/snapshots/select_component.spec.ts_select-component-next-js-1.txt
浏览文件 @ 30b5c0d0
......@@ -282,58 +282,6 @@ Do not hesitate to extensively use console logs to follow the flow of the code.
DO NOT OVERENGINEER THE CODE. You take great pride in keeping things simple and elegant. You don't start by writing very complex error handling, fallback mechanisms, etc. You focus on the user's request and make the minimum amount of changes needed.
DON'T DO MORE THAN WHAT THE USER ASKS FOR.
# Thinking Process
Before responding to user requests, ALWAYS use <think></think> tags to carefully plan your approach. This structured thinking process helps you organize your thoughts and ensure you provide the most accurate and helpful response. Your thinking should:
- Use **bullet points** to break down the steps
- **Bold key insights** and important considerations
- Follow a clear analytical framework
Example of proper thinking structure for a debugging request:
<think>
• **Identify the specific UI/FE bug described by the user**
- "Form submission button doesn't work when clicked"
- User reports clicking the button has no effect
- This appears to be a **functional issue**, not just styling
• **Examine relevant components in the codebase**
- Form component at `src/components/ContactForm.jsx`
- Button component at `src/components/Button.jsx`
- Form submission logic in `src/utils/formHandlers.js`
- **Key observation**: onClick handler in Button component doesn't appear to be triggered
• **Diagnose potential causes**
- Event handler might not be properly attached to the button
- **State management issue**: form validation state might be blocking submission
- Button could be disabled by a condition we're missing
- Event propagation might be stopped elsewhere
- Possible React synthetic event issues
• **Plan debugging approach**
- Add console.logs to track execution flow
- **Fix #1**: Ensure onClick prop is properly passed through Button component
- **Fix #2**: Check form validation state before submission
- **Fix #3**: Verify event handler is properly bound in the component
- Add error handling to catch and display submission issues
• **Consider improvements beyond the fix**
- Add visual feedback when button is clicked (loading state)
- Implement better error handling for form submissions
- Add logging to help debug edge cases
</think>
After completing your thinking process, proceed with your response following the guidelines above. Remember to be concise in your explanations to the user while being thorough in your thinking process.
This structured thinking ensures you:
1. Don't miss important aspects of the request
2. Consider all relevant factors before making changes
3. Deliver more accurate and helpful responses
4. Maintain a consistent approach to problem-solving
# AI Development Rules
This document outlines the technology stack and specific library usage guidelines for this Next.js application. Adhering to these rules will help maintain consistency, improve collaboration, and ensure the AI assistant can effectively understand and modify the codebase.
......
package-lock.json
浏览文件 @ 30b5c0d0
......@@ -10,7 +10,7 @@
"license": "MIT",
"dependencies": {
"@ai-sdk/anthropic": "^1.2.8",
"@ai-sdk/google": "^1.2.10",
"@ai-sdk/google": "^1.2.19",
"@ai-sdk/openai": "^1.3.7",
"@ai-sdk/openai-compatible": "^0.2.13",
"@biomejs/biome": "^1.9.4",
......@@ -135,13 +135,13 @@
}
},
"node_modules/@ai-sdk/google": {
"version": "1.2.14",
"resolved": "https://registry.npmjs.org/@ai-sdk/google/-/google-1.2.14.tgz",
"integrity": "sha512-r3FSyyWl0KVjUlKn5o+vMl+Nk8Z/mV6xrqW+49g7fMoRVr/wkRxJZtHorrdDGRreCJubZyAk8ziSQSLpgv2H6w==",
"version": "1.2.19",
"resolved": "https://registry.npmjs.org/@ai-sdk/google/-/google-1.2.19.tgz",
"integrity": "sha512-Xgl6eftIRQ4srUdCzxM112JuewVMij5q4JLcNmHcB68Bxn9dpr3MVUSPlJwmameuiQuISIA8lMB+iRiRbFsaqA==",
"license": "Apache-2.0",
"dependencies": {
"@ai-sdk/provider": "1.1.3",
"@ai-sdk/provider-utils": "2.2.7"
"@ai-sdk/provider-utils": "2.2.8"
},
"engines": {
"node": ">=18"
......@@ -150,6 +150,23 @@
"zod": "^3.0.0"
}
},
"node_modules/@ai-sdk/google/node_modules/@ai-sdk/provider-utils": {
"version": "2.2.8",
"resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-2.2.8.tgz",
"integrity": "sha512-fqhG+4sCVv8x7nFzYnFo19ryhAa3w096Kmc3hWxMQfW/TubPOmt3A6tYZhl4mUfQWWQMsuSkLrtjlWuXBVSGQA==",
"license": "Apache-2.0",
"dependencies": {
"@ai-sdk/provider": "1.1.3",
"nanoid": "^3.3.8",
"secure-json-parse": "^2.7.0"
},
"engines": {
"node": ">=18"
},
"peerDependencies": {
"zod": "^3.23.8"
}
},
"node_modules/@ai-sdk/openai": {
"version": "1.3.21",
"resolved": "https://registry.npmjs.org/@ai-sdk/openai/-/openai-1.3.21.tgz",
......
package.json
浏览文件 @ 30b5c0d0
......@@ -81,7 +81,7 @@
},
"dependencies": {
"@ai-sdk/anthropic": "^1.2.8",
"@ai-sdk/google": "^1.2.10",
"@ai-sdk/google": "^1.2.19",
"@ai-sdk/openai": "^1.3.7",
"@ai-sdk/openai-compatible": "^0.2.13",
"@biomejs/biome": "^1.9.4",
......
src/ipc/handlers/chat_stream_handlers.ts
浏览文件 @ 30b5c0d0
......@@ -33,6 +33,9 @@ import { readFile, writeFile, unlink } from "fs/promises";
import { getMaxTokens } from "../utils/token_utils";
import { MAX_CHAT_TURNS_IN_CONTEXT } from "@/constants/settings_constants";
import { validateChatContext } from "../utils/context_paths_utils";
import { GoogleGenerativeAIProviderOptions } from "@ai-sdk/google";
import { getExtraProviderOptions } from "../utils/thinking_utils";
const logger = log.scope("chat_stream_handlers");
......@@ -443,17 +446,31 @@ This conversation includes one or more image attachments. When the user uploads
}
// When calling streamText, the messages need to be properly formatted for mixed content
const { textStream } = streamText({
const { fullStream } = streamText({
maxTokens: await getMaxTokens(settings.selectedModel),
temperature: 0,
maxRetries: 2,
model: modelClient.model,
providerOptions: {
"dyad-gateway": getExtraProviderOptions(
modelClient.builtinProviderId,
),
google: {
thinkingConfig: {
includeThoughts: true,
},
} satisfies GoogleGenerativeAIProviderOptions,
},
system: systemPrompt,
messages: chatMessages.filter((m) => m.content),
onError: (error: any) => {
logger.error("Error streaming text:", error);
const message =
(error as any)?.error?.message || JSON.stringify(error);
let errorMessage = (error as any)?.error?.message;
const responseBody = error?.error?.responseBody;
if (errorMessage && responseBody) {
errorMessage += "\n\nDetails: " + responseBody;
}
const message = errorMessage || JSON.stringify(error);
event.sender.send(
"chat:response:error",
`Sorry, there was an error from the AI: ${message}`,
......@@ -465,10 +482,38 @@ This conversation includes one or more image attachments. When the user uploads
});
// Process the stream as before
let inThinkingBlock = false;
try {
for await (const textPart of textStream) {
fullResponse += textPart;
fullResponse = cleanThinkingByEscapingDyadTags(fullResponse);
for await (const part of fullStream) {
let chunk = "";
if (part.type === "text-delta") {
if (inThinkingBlock) {
chunk = "</think>";
inThinkingBlock = false;
}
chunk += part.textDelta;
} else if (part.type === "reasoning") {
if (!inThinkingBlock) {
chunk = "<think>";
inThinkingBlock = true;
}
// Escape dyad tags in reasoning content
// We are replacing the opening tag with a look-alike character
// to avoid issues where thinking content includes dyad tags
// and are mishandled by:
// 1. FE markdown parser
// 2. Main process response processor
chunk += part.textDelta
.replace(/<dyad/g, "＜dyad")
.replace(/<\/dyad/g, "＜/dyad");
}
if (!chunk) {
continue;
}
fullResponse += chunk;
if (
fullResponse.includes("$$SUPABASE_CLIENT_CODE$$") &&
updatedChat.app?.supabaseProjectId
......
src/ipc/shared/language_model_helpers.ts
浏览文件 @ 30b5c0d0
......@@ -6,6 +6,10 @@ import {
import type { LanguageModelProvider, LanguageModel } from "@/ipc/ipc_types";
import { eq } from "drizzle-orm";
export const PROVIDERS_THAT_SUPPORT_THINKING: (keyof typeof MODEL_OPTIONS)[] = [
"google",
];
export interface ModelOption {
name: string;
displayName: string;
......
src/ipc/utils/get_model_client.ts
浏览文件 @ 30b5c0d0
......@@ -116,6 +116,7 @@ export async function getModelClient(
? createDyadEngine({
apiKey: dyadApiKey,
baseURL: dyadEngineUrl ?? "https://engine.dyad.sh/v1",
originalProviderId: model.provider,
dyadOptions: {
enableLazyEdits: settings.enableProLazyEditsMode,
enableSmartFilesContext: settings.enableProSmartFilesContextMode,
......@@ -150,7 +151,7 @@ export async function getModelClient(
}
: undefined,
),
builtinProviderId: "auto",
builtinProviderId: model.provider,
};
return {
......
src/ipc/utils/llm_engine_provider.ts
浏览文件 @ 30b5c0d0
......@@ -11,6 +11,7 @@ import {
import { OpenAICompatibleChatSettings } from "@ai-sdk/openai-compatible";
import log from "electron-log";
import { getExtraProviderOptions } from "./thinking_utils";
const logger = log.scope("llm_engine_provider");
......@@ -42,6 +43,7 @@ or to provide a custom fetch implementation for e.g. testing.
*/
fetch?: FetchFunction;
originalProviderId: string;
dyadOptions: {
enableLazyEdits?: boolean;
enableSmartFilesContext?: boolean;
......@@ -113,8 +115,7 @@ export function createDyadEngine(
defaultObjectGenerationMode:
"tool" as LanguageModelV1ObjectGenerationMode,
// Custom fetch implementation that adds files to the request
fetch: files?.length
? (input: RequestInfo | URL, init?: RequestInit) => {
fetch: (input: RequestInfo | URL, init?: RequestInit) => {
// Use default fetch if no init or body
if (!init || !init.body || typeof init.body !== "string") {
return (options.fetch || fetch)(input, init);
......@@ -122,7 +123,10 @@ export function createDyadEngine(
try {
// Parse the request body to manipulate it
const parsedBody = JSON.parse(init.body);
const parsedBody = {
...JSON.parse(init.body),
...getExtraProviderOptions(options.originalProviderId),
};
// Add files to the request if they exist
if (files?.length) {
......@@ -147,8 +151,7 @@ export function createDyadEngine(
// If parsing fails, use original request
return (options.fetch || fetch)(input, init);
}
}
: options.fetch,
},
};
return new OpenAICompatibleChatLanguageModel(modelId, restSettings, config);
......
src/ipc/utils/thinking_utils.ts 0 → 100644
浏览文件 @ 30b5c0d0
import { PROVIDERS_THAT_SUPPORT_THINKING } from "../shared/language_model_helpers";
export function getExtraProviderOptions(
providerId: string | undefined,
): Record<string, any> {
if (!providerId) {
return {};
}
if (PROVIDERS_THAT_SUPPORT_THINKING.includes(providerId)) {
return {
thinking: {
type: "enabled",
include_thoughts: true,
},
};
}
return {};
}
src/prompts/system_prompt.ts
浏览文件 @ 30b5c0d0
......@@ -338,8 +338,6 @@ Do not hesitate to extensively use console logs to follow the flow of the code.
DO NOT OVERENGINEER THE CODE. You take great pride in keeping things simple and elegant. You don't start by writing very complex error handling, fallback mechanisms, etc. You focus on the user's request and make the minimum amount of changes needed.
DON'T DO MORE THAN WHAT THE USER ASKS FOR.
${THINKING_PROMPT}
[[AI_RULES]]
Directory names MUST be all lower-case (src/pages, src/components, etc.). File names may use mixed-case if you like.
......
testing/fake-llm-server/index.ts
浏览文件 @ 30b5c0d0
......@@ -35,17 +35,6 @@ export function createStreamChunk(
}
export const CANNED_MESSAGE = `
<think>
\`<dyad-write>\`:
I'll think about the problem and write a bug report.
<dyad-write>
<dyad-write path="file1.txt">
Fake dyad write
</dyad-write>
</think>
<dyad-write path="file1.txt">
A file (2)
</dyad-write>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论