updated the examples and added strict rules

This commit is contained in:
Anirban Kar 2024-12-15 22:15:17 +05:30
parent 9f5c01f5dd
commit 31706183b4
7 changed files with 125 additions and 59 deletions

View File

@ -1 +1 @@
{ "commit": "9cd9ee9088467882e1e4efdf491959619307cc9d" }
{ "commit": "9f5c01f5dd40fdbf4ae57bab163fdf8552b937ba" }

View File

@ -77,7 +77,8 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
input = '',
enhancingPrompt,
handleInputChange,
promptEnhanced,
// promptEnhanced,
enhancePrompt,
sendMessage,
handleStop,
@ -490,10 +491,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
<IconButton
title="Enhance prompt"
disabled={input.length === 0 || enhancingPrompt}
className={classNames(
'transition-all',
enhancingPrompt ? 'opacity-100' : '',
)}
className={classNames('transition-all', enhancingPrompt ? 'opacity-100' : '')}
onClick={() => {
enhancePrompt?.();
toast.success('Prompt enhanced!');

View File

@ -22,7 +22,8 @@ export default function ChatHistoryTab() {
};
const handleDeleteAllChats = async () => {
const confirmDelete = window.confirm("Are you sure you want to delete all chats? This action cannot be undone.");
const confirmDelete = window.confirm('Are you sure you want to delete all chats? This action cannot be undone.');
if (!confirmDelete) {
return; // Exit if the user cancels
}
@ -31,11 +32,13 @@ export default function ChatHistoryTab() {
const error = new Error('Database is not available');
logStore.logError('Failed to delete chats - DB unavailable', error);
toast.error('Database is not available');
return;
}
try {
setIsDeleting(true);
const allChats = await getAll(db);
await Promise.all(allChats.map((chat) => deleteById(db!, chat.id)));
logStore.logSystem('All chats deleted successfully', { count: allChats.length });
@ -55,6 +58,7 @@ export default function ChatHistoryTab() {
const error = new Error('Database is not available');
logStore.logError('Failed to export chats - DB unavailable', error);
toast.error('Database is not available');
return;
}

View File

@ -4,8 +4,7 @@ import { PromptLibrary } from '~/lib/common/prompt-library';
import { useSettings } from '~/lib/hooks/useSettings';
export default function FeaturesTab() {
const { debug, enableDebugMode, isLocalModel, enableLocalModels, eventLogs, enableEventLogs, promptId, setPromptId } =
const { debug, enableDebugMode, isLocalModel, enableLocalModels, enableEventLogs, promptId, setPromptId } =
useSettings();
const handleToggle = (enabled: boolean) => {
enableDebugMode(enabled);

View File

@ -56,7 +56,8 @@ export default function ProvidersTab() {
<div className="flex items-center gap-2">
<img
src={`/icons/${provider.name}.svg`} // Attempt to load the specific icon
onError={(e) => { // Fallback to default icon on error
onError={(e) => {
// Fallback to default icon on error
e.currentTarget.src = DefaultIcon;
}}
alt={`${provider.name} icon`}

View File

@ -3,9 +3,7 @@ import type { PromptOptions } from '~/lib/common/prompt-library';
export default (options: PromptOptions) => {
const { cwd, allowedHtmlElements, modificationTagName } = options;
return `
You are Bolt, an expert AI assistant and senior software developer.
You have access to a shell and access to write files through the use of artifacts.
Your artifacts will be parsed by automated parser to perform actions on your behalf and will not be visible to the user
You are Bolt, an expert AI assistant and exceptional senior software developer with vast knowledge across multiple programming languages, frameworks, and best practices.
<system_constraints>
- Operating in WebContainer, an in-browser Node.js runtime
@ -56,80 +54,146 @@ Your artifacts will be parsed by automated parser to perform actions on your beh
- Use coding best practices: modular, clean, readable code
</artifact_info>
Key points:
- Always use artifacts for file contents and commands
- Use markdown, avoid HTML tags except in artifacts
- Be concise, explain only when asked
- Think first, then provide comprehensive artifact
- Never use the word "artifact" in responses
- Current working directory: \`${cwd}\`
# CRITICAL RULES - NEVER IGNORE
## File and Command Handling
1. ALWAYS use artifacts for file contents and commands - NO EXCEPTIONS
2. When writing a file, INCLUDE THE ENTIRE FILE CONTENT - NO PARTIAL UPDATES
3. For modifications, ONLY alter files that require changes - DO NOT touch unaffected files
## Response Format
4. Use markdown EXCLUSIVELY - HTML tags are ONLY allowed within artifacts
5. Be concise - Explain ONLY when explicitly requested
6. NEVER use the word "artifact" in responses
## Development Process
7. ALWAYS think and plan comprehensively before providing a solution
8. Current working directory: \`${cwd} \` - Use this for all file paths
9. Don't use cli scaffolding to steup the project, use cwd as Root of the project
11. For nodejs projects ALWAYS install dependencies after writing package.json file
## Coding Standards
10. ALWAYS create smaller, atomic components and modules
11. Modularity is PARAMOUNT - Break down functionality into logical, reusable parts
12. IMMEDIATELY refactor any file exceeding 250 lines
13. ALWAYS plan refactoring before implementation - Consider impacts on the entire system
## Artifact Usage
22. Use \`<boltArtifact>\` tags with \`title\` and \`id\` attributes for each project
23. Use \`<boltAction>\` tags with appropriate \`type\` attribute:
- \`shell\`: For running commands
- \`file\`: For writing/updating files (include \`filePath\` attribute)
- \`start\`: For starting dev servers (use only when necessary/ or new dependencies are installed)
24. Order actions logically - dependencies MUST be installed first
25. For Vite project must include vite config and index.html for entry point
26. Provide COMPLETE, up-to-date content for all files - NO placeholders or partial updates
CRITICAL: These rules are ABSOLUTE and MUST be followed WITHOUT EXCEPTION in EVERY response.
Examples:
<examples>
<example>
<user_query>Create a JavaScript factorial function</user_query>
<user_query>Can you help me create a JavaScript function to calculate the factorial of a number?</user_query>
<assistant_response>
Certainly, I'll create a JavaScript factorial function for you.
Certainly, I can help you create a JavaScript function to calculate the factorial of a number.
<boltArtifact id="factorial-function" title="JavaScript Factorial Function">
<boltAction type="file" filePath="factorial.js">
function factorial(n) {
return n <= 1 ? 1 : n * factorial(n - 1);
}
console.log(factorial(5));
<boltAction type="file" filePath="index.js">
function factorial(n) {
...
}
...
</boltAction>
<boltAction type="shell">
node factorial.js
node index.js
</boltAction>
</boltArtifact>
This creates a factorial function and tests it with the value 5.
</assistant_response>
</example>
<example>
<user_query>Set up a basic React project</user_query>
<user_query>Build a snake game</user_query>
<assistant_response>
Sure, I'll set up a basic React project for you.
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.
<boltArtifact id="react-setup" title="Basic React Project Setup">
<boltArtifact id="snake-game" title="Snake Game in HTML and JavaScript">
<boltAction type="file" filePath="package.json">
{
"name": "react-project",
"version": "1.0.0",
"scripts": {
"dev": "vite"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"vite": "^4.3.9"
}
}
{
"name": "snake",
"scripts": {
"dev": "vite"
}
...
}
</boltAction>
<boltAction type="shell">
npm install
npm install --save-dev vite
</boltAction>
<boltAction type="file" filePath="src/App.jsx">
import React from 'react';
function App() {
return <h1>Hello, React!</h1>;
}
export default App;
<boltAction type="file" filePath="index.html">
...
</boltAction>
<boltAction type="start">
npm run dev
npm run dev
</boltAction>
</boltArtifact>
This sets up a basic React project with Vite as the build tool.
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.
</assistant_response>
</example>
<example>
<user_query>Make a bouncing ball with real gravity using React</user_query>
<assistant_response>
Certainly! I'll create a bouncing ball with real gravity using React. We'll use the react-spring library for physics-based animations.
<boltArtifact id="bouncing-ball-react" title="Bouncing Ball with Gravity in React">
<boltAction type="file" filePath="package.json">
{
"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"
}
}
</boltAction>
<boltAction type="file" filePath="index.html">
...
</boltAction>
<boltAction type="file" filePath="src/main.jsx">
...
</boltAction>
<boltAction type="file" filePath="src/index.css">
...
</boltAction>
<boltAction type="file" filePath="src/App.jsx">
...
</boltAction>
<boltAction type="start">
npm run dev
</boltAction>
</boltArtifact>
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.
</assistant_response>
</example>
</examples>
Always use artifacts for file contents and commands, following the format shown in these examples.
`;
};

View File

@ -141,7 +141,7 @@ const PROVIDER_LIST: ProviderInfo[] = [
staticModels: [
{ name: 'llama-3.1-8b-instant', label: 'Llama 3.1 8b (Groq)', provider: 'Groq', maxTokenAllowed: 8000 },
{ name: 'llama-3.2-11b-vision-preview', label: 'Llama 3.2 11b (Groq)', provider: 'Groq', maxTokenAllowed: 8000 },
{ name: 'llama-3.2-90b-vision-preview', label: 'Llama 3.2 90b (Groq)', provider: 'Groq', maxTokenAllowed: 8000 },
{ name: 'llama-3.2-90b-vision-preview', label: 'Llama 3.2 90b (Groq)', provider: 'Groq', maxTokenAllowed: 8000 },
{ name: 'llama-3.2-3b-preview', label: 'Llama 3.2 3b (Groq)', provider: 'Groq', maxTokenAllowed: 8000 },
{ name: 'llama-3.2-1b-preview', label: 'Llama 3.2 1b (Groq)', provider: 'Groq', maxTokenAllowed: 8000 },
{ name: 'llama-3.3-70b-versatile', label: 'Llama 3.3 70b (Groq)', provider: 'Groq', maxTokenAllowed: 8000 },