From d419a3c4b5574db790ec73ce1fc82ce1f09bb85c Mon Sep 17 00:00:00 2001 From: Hugo SANSON Date: Mon, 18 Nov 2024 22:37:33 +0100 Subject: [PATCH 1/3] [UX] click shortcut in chat to go to source file in workbench --- app/components/chat/Artifact.tsx | 14 +++++++++++++- app/components/workbench/Workbench.client.tsx | 4 ++-- app/lib/.server/llm/prompts.ts | 14 +++++++------- app/lib/stores/workbench.ts | 8 ++++---- app/utils/diff.spec.ts | 11 +++++++++++ app/utils/diff.ts | 11 ++++++++++- 6 files changed, 47 insertions(+), 15 deletions(-) create mode 100644 app/utils/diff.spec.ts diff --git a/app/components/chat/Artifact.tsx b/app/components/chat/Artifact.tsx index 62020fd84..682a4c761 100644 --- a/app/components/chat/Artifact.tsx +++ b/app/components/chat/Artifact.tsx @@ -7,6 +7,7 @@ import type { ActionState } from '~/lib/runtime/action-runner'; import { workbenchStore } from '~/lib/stores/workbench'; import { classNames } from '~/utils/classNames'; import { cubicEasingFn } from '~/utils/easings'; +import { WORK_DIR } from '~/utils/constants'; const highlighterOptions = { langs: ['shell'], @@ -129,6 +130,14 @@ const actionVariants = { visible: { opacity: 1, y: 0 }, }; +function openArtifactInWorkbench(filePath: any) { + if (workbenchStore.currentView.get() !== 'code') { + workbenchStore.currentView.set('code'); + } + + workbenchStore.setSelectedFile(`${WORK_DIR}/${filePath}`); +} + const ActionList = memo(({ actions }: ActionListProps) => { return ( @@ -169,7 +178,10 @@ const ActionList = memo(({ actions }: ActionListProps) => { {type === 'file' ? (
Create{' '} - + openArtifactInWorkbench(action.filePath)} + > {action.filePath}
diff --git a/app/components/workbench/Workbench.client.tsx b/app/components/workbench/Workbench.client.tsx index 29c722c89..58b690629 100644 --- a/app/components/workbench/Workbench.client.tsx +++ b/app/components/workbench/Workbench.client.tsx @@ -180,8 +180,8 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) => alert("GitHub token is required. Push to GitHub cancelled."); return; } - - workbenchStore.pushToGitHub(repoName, githubUsername, githubToken); + + workbenchStore.pushToGitHub(repoName, githubUsername, githubToken); }} >
diff --git a/app/lib/.server/llm/prompts.ts b/app/lib/.server/llm/prompts.ts index 4eac2ecc7..e36719a96 100644 --- a/app/lib/.server/llm/prompts.ts +++ b/app/lib/.server/llm/prompts.ts @@ -39,20 +39,20 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w - rm: Remove files - rmdir: Remove empty directories - touch: Create empty file/update timestamp - + System Information: - hostname: Show system name - ps: Display running processes - pwd: Print working directory - uptime: Show system uptime - env: Environment variables - + Development Tools: - node: Execute Node.js code - python3: Run Python scripts - code: VSCode operations - jq: Process JSON - + Other Utilities: - curl, head, sort, tail, clear, which, export, chmod, scho, hostname, kill, ln, xxd, alias, false, getconf, true, loadenv, wasm, xdg-open, command, exit, source @@ -88,7 +88,7 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w Example: <${MODIFICATIONS_TAG_NAME}> - + @@ -2,7 +2,10 @@ return a + b; } @@ -103,7 +103,7 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w + +console.log('The End'); - + // full file content here @@ -124,7 +124,7 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w 2. Create TodoList and TodoItem components 3. Implement localStorage for persistence 4. Add CRUD operations - + Let's start now. [Rest of response...]" @@ -134,7 +134,7 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w 1. Check network requests 2. Verify API endpoint format 3. Examine error handling - + [Rest of response...]" diff --git a/app/lib/stores/workbench.ts b/app/lib/stores/workbench.ts index 8589391c8..8914837c1 100644 --- a/app/lib/stores/workbench.ts +++ b/app/lib/stores/workbench.ts @@ -14,6 +14,7 @@ import { saveAs } from 'file-saver'; import { Octokit, type RestEndpointMethodTypes } from "@octokit/rest"; import * as nodePath from 'node:path'; import type { WebContainerProcess } from '@webcontainer/api'; +import { extractRelativePath } from '~/utils/diff'; export interface ArtifactState { id: string; @@ -312,8 +313,7 @@ export class WorkbenchStore { for (const [filePath, dirent] of Object.entries(files)) { if (dirent?.type === 'file' && !dirent.isBinary) { - // remove '/home/project/' from the beginning of the path - const relativePath = filePath.replace(/^\/home\/project\//, ''); + const relativePath = extractRelativePath(filePath); // split the path into segments const pathSegments = relativePath.split('/'); @@ -343,7 +343,7 @@ export class WorkbenchStore { for (const [filePath, dirent] of Object.entries(files)) { if (dirent?.type === 'file' && !dirent.isBinary) { - const relativePath = filePath.replace(/^\/home\/project\//, ''); + const relativePath = extractRelativePath(filePath); const pathSegments = relativePath.split('/'); let currentHandle = targetHandle; @@ -417,7 +417,7 @@ export class WorkbenchStore { content: Buffer.from(dirent.content).toString('base64'), encoding: 'base64', }); - return { path: filePath.replace(/^\/home\/project\//, ''), sha: blob.sha }; + return { path: extractRelativePath(filePath), sha: blob.sha }; } }) ); diff --git a/app/utils/diff.spec.ts b/app/utils/diff.spec.ts new file mode 100644 index 000000000..ee270f2a2 --- /dev/null +++ b/app/utils/diff.spec.ts @@ -0,0 +1,11 @@ +import { describe, expect, it } from 'vitest'; +import { extractRelativePath } from './diff'; +import { WORK_DIR } from './constants'; + +describe('Diff', () => { + it('should strip out Work_dir', () => { + const filePath = `${WORK_DIR}/index.js`; + const result = extractRelativePath(filePath); + expect(result).toBe('index.js'); + }); +}); diff --git a/app/utils/diff.ts b/app/utils/diff.ts index 66c0e155a..25cde26f0 100644 --- a/app/utils/diff.ts +++ b/app/utils/diff.ts @@ -1,6 +1,6 @@ import { createTwoFilesPatch } from 'diff'; import type { FileMap } from '~/lib/stores/files'; -import { MODIFICATIONS_TAG_NAME } from './constants'; +import { MODIFICATIONS_TAG_NAME, WORK_DIR } from './constants'; export const modificationsRegex = new RegExp( `^<${MODIFICATIONS_TAG_NAME}>[\\s\\S]*?<\\/${MODIFICATIONS_TAG_NAME}>\\s+`, @@ -75,6 +75,15 @@ export function diffFiles(fileName: string, oldFileContent: string, newFileConte return unifiedDiff; } +const regex = new RegExp(`^${WORK_DIR}\/`); + +/** + * Strips out the work directory from the file path. + */ +export function extractRelativePath(filePath: string) { + return filePath.replace(regex, ''); +} + /** * Converts the unified diff to HTML. * From b0dae6e014a7fe778ca2188e4868428f325fdffb Mon Sep 17 00:00:00 2001 From: Hgosansn Date: Tue, 19 Nov 2024 00:37:40 +0100 Subject: [PATCH 2/3] revert spaces --- app/lib/.server/llm/prompts.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/lib/.server/llm/prompts.ts b/app/lib/.server/llm/prompts.ts index e36719a96..c0dc1dcf0 100644 --- a/app/lib/.server/llm/prompts.ts +++ b/app/lib/.server/llm/prompts.ts @@ -39,20 +39,20 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w - rm: Remove files - rmdir: Remove empty directories - touch: Create empty file/update timestamp - + System Information: - hostname: Show system name - ps: Display running processes - pwd: Print working directory - uptime: Show system uptime - env: Environment variables - + Development Tools: - node: Execute Node.js code - python3: Run Python scripts - code: VSCode operations - jq: Process JSON - + Other Utilities: - curl, head, sort, tail, clear, which, export, chmod, scho, hostname, kill, ln, xxd, alias, false, getconf, true, loadenv, wasm, xdg-open, command, exit, source @@ -124,7 +124,7 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w 2. Create TodoList and TodoItem components 3. Implement localStorage for persistence 4. Add CRUD operations - + Let's start now. [Rest of response...]" @@ -134,7 +134,7 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w 1. Check network requests 2. Verify API endpoint format 3. Examine error handling - + [Rest of response...]" From 9ac58779322c64c15e5c17260b1761a2f6a19e54 Mon Sep 17 00:00:00 2001 From: Hgosansn Date: Tue, 19 Nov 2024 20:33:51 +0100 Subject: [PATCH 3/3] Revert useless changes --- app/components/workbench/Workbench.client.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/workbench/Workbench.client.tsx b/app/components/workbench/Workbench.client.tsx index 58b690629..29c722c89 100644 --- a/app/components/workbench/Workbench.client.tsx +++ b/app/components/workbench/Workbench.client.tsx @@ -180,8 +180,8 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) => alert("GitHub token is required. Push to GitHub cancelled."); return; } - - workbenchStore.pushToGitHub(repoName, githubUsername, githubToken); + + workbenchStore.pushToGitHub(repoName, githubUsername, githubToken); }} >