diff --git a/app/lib/.server/llm/stream-text.ts b/app/lib/.server/llm/stream-text.ts
index 7de74437..7233e739 100644
--- a/app/lib/.server/llm/stream-text.ts
+++ b/app/lib/.server/llm/stream-text.ts
@@ -96,15 +96,10 @@ function createFilesContext(files: FileMap) {
return '';
}
- const codeWithLinesNumbers = dirent.content
- .split('\n')
- .map((v, i) => `${i + 1}|${v}`)
- .join('\n');
-
- return `\n${codeWithLinesNumbers}\n`;
+ return `\n${dirent.content}\n`;
});
- return `Below are the code files present in the webcontainer:\ncode format:\n|\n ${fileContexts.join('\n\n')}\n\n`;
+ return `Below are the code files present in the webcontainer:\n \n${fileContexts.join('\n\n')}\n`;
}
function extractPropertiesFromMessage(message: Message): { model: string; provider: string; content: string } {
diff --git a/app/lib/common/prompts/optimized.ts b/app/lib/common/prompts/optimized.ts
index 26eb2da5..1728ef11 100644
--- a/app/lib/common/prompts/optimized.ts
+++ b/app/lib/common/prompts/optimized.ts
@@ -99,16 +99,12 @@ Examples:
Certainly, I can help you create a JavaScript function to calculate the factorial of a number.
-
-function factorial(n) {
+ function factorial(n) {
...
}
-...
-
-
-node index.js
-
+...
+ node index.js
@@ -119,24 +115,16 @@ node index.js
Certainly! I'd be happy to help you build a snake game using JavaScript and HTML5 Canvas. This will be a basic implementation that you can later expand upon. Let's create the game step by step.
-
-{
+ {
"name": "snake",
"scripts": {
"dev": "vite"
}
...
-}
-
-
-npm install --save-dev vite
-
-
-...
-
-
-npm run dev
-
+}
+ npm install --save-dev vite
+ ...
+ npm run dev
Now you can play the Snake game by opening the provided local server URL in your browser. Use the arrow keys to control the snake. Eat the red food to grow and increase your score. The game ends if you hit the wall or your own tail.
@@ -149,8 +137,7 @@ npm run dev
Certainly! I'll create a bouncing ball with real gravity using React. We'll use the react-spring library for physics-based animations.
-
-{
+ {
"name": "bouncing-ball",
"private": true,
"version": "0.0.0",
@@ -171,23 +158,12 @@ npm run dev
"@vitejs/plugin-react": "^3.1.0",
"vite": "^4.2.0"
}
-}
-
-
-...
-
-
-...
-
-
-...
-
-
-...
-
-
-npm run dev
-
+}
+ ...
+ ...
+ ...
+ ...
+ npm run dev
You can now view the bouncing ball animation in the preview. The ball will start falling from the top of the screen and bounce realistically when it hits the bottom.
diff --git a/app/lib/common/prompts/prompts.ts b/app/lib/common/prompts/prompts.ts
index 963ced98..06f0b727 100644
--- a/app/lib/common/prompts/prompts.ts
+++ b/app/lib/common/prompts/prompts.ts
@@ -231,17 +231,12 @@ Here are some examples of correct usage of artifacts:
Certainly, I can help you create a JavaScript function to calculate the factorial of a number.
-
- function factorial(n) {
- ...
- }
+ function factorial(n) {
+ ...
+}
+...
- ...
-
-
-
- node index.js
-
+ node index.js
@@ -253,27 +248,19 @@ Here are some examples of correct usage of artifacts:
Certainly! I'd be happy to help you build a snake game using JavaScript and HTML5 Canvas. This will be a basic implementation that you can later expand upon. Let's create the game step by step.
-
- {
- "name": "snake",
- "scripts": {
- "dev": "vite"
- }
- ...
- }
-
+ {
+ "name": "snake",
+ "scripts": {
+ "dev": "vite"
+ }
+ ...
+}
-
- npm install --save-dev vite
-
+ npm install --save-dev vite
-
- ...
-
+ ...
-
- npm run dev
-
+ npm run dev
Now you can play the Snake game by opening the provided local server URL in your browser. Use the arrow keys to control the snake. Eat the red food to grow and increase your score. The game ends if you hit the wall or your own tail.
@@ -287,50 +274,38 @@ Here are some examples of correct usage of artifacts:
Certainly! I'll create a bouncing ball with real gravity using React. We'll use the react-spring library for physics-based animations.
-
- {
- "name": "bouncing-ball",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "vite build",
- "preview": "vite preview"
- },
- "dependencies": {
- "react": "^18.2.0",
- "react-dom": "^18.2.0",
- "react-spring": "^9.7.1"
- },
- "devDependencies": {
- "@types/react": "^18.0.28",
- "@types/react-dom": "^18.0.11",
- "@vitejs/plugin-react": "^3.1.0",
- "vite": "^4.2.0"
- }
- }
-
+ {
+ "name": "bouncing-ball",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-spring": "^9.7.1"
+ },
+ "devDependencies": {
+ "@types/react": "^18.0.28",
+ "@types/react-dom": "^18.0.11",
+ "@vitejs/plugin-react": "^3.1.0",
+ "vite": "^4.2.0"
+ }
+}
-
- ...
-
+ ...
-
- ...
-
+ ...
-
- ...
-
+ ...
-
- ...
-
+ ...
-
- npm run dev
-
+ npm run dev
You can now view the bouncing ball animation in the preview. The ball will start falling from the top of the screen and bounce realistically when it hits the bottom.