UniqAI/bolt.new
1
0
Fork 0
mirror of https://github.com/stackblitz/bolt.new synced 2025-02-06 04:48:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added artifact bundling for custom long artifacts like uploading folder

Browse Source
This commit is contained in:
Anirban Kar 2024-12-02 18:30:21 +05:30
parent eb7676577d
commit 34a8a39a3c
5 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/components/chat/Artifact.tsx
View File

@ -59,6 +59,14 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
workbenchStore.showWorkbench.set(!showWorkbench); workbenchStore.showWorkbench.set(!showWorkbench);
}} }}
> >
{artifact.type == 'bundled' && (
<>
<div className="p-4">
<div className={'i-ph:files-light'} style={{ fontSize: '2rem' }}></div>
</div>
<div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
</>
)}
<div className="px-5 p-3.5 w-full text-left"> <div className="px-5 p-3.5 w-full text-left">
<div className="w-full text-bolt-elements-textPrimary font-medium leading-5 text-sm">{artifact?.title}</div> <div className="w-full text-bolt-elements-textPrimary font-medium leading-5 text-sm">{artifact?.title}</div>
<div className="w-full w-full text-bolt-elements-textSecondary text-xs mt-0.5">Click to open Workbench</div> <div className="w-full w-full text-bolt-elements-textSecondary text-xs mt-0.5">Click to open Workbench</div>
@ -66,7 +74,7 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
</button> </button>
<div className="bg-bolt-elements-artifacts-borderColor w-[1px]" /> <div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
<AnimatePresence> <AnimatePresence>
{actions.length && ( {actions.length && artifact.type !== 'bundled' && (
<motion.button <motion.button
initial={{ width: 0 }} initial={{ width: 0 }}
animate={{ width: 'auto' }} animate={{ width: 'auto' }}
@ -83,7 +91,7 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
</AnimatePresence> </AnimatePresence>
</div> </div>
<AnimatePresence> <AnimatePresence>
{showActions && actions.length > 0 && ( {artifact.type !== 'bundled' && showActions && actions.length > 0 && (
<motion.div <motion.div
className="actions" className="actions"
initial={{ height: 0 }} initial={{ height: 0 }}
@ -92,6 +100,7 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
transition={{ duration: 0.15 }} transition={{ duration: 0.15 }}
> >
<div className="bg-bolt-elements-artifacts-borderColor h-[1px]" /> <div className="bg-bolt-elements-artifacts-borderColor h-[1px]" />
<div className="p-5 text-left bg-bolt-elements-actions-background"> <div className="p-5 text-left bg-bolt-elements-actions-background">
<ActionList actions={actions} /> <ActionList actions={actions} />
</div> </div>

2
app/components/chat/ImportFolderButton.tsx
View File

@ -79,7 +79,7 @@ ${content}
role: 'assistant', role: 'assistant',
content: `I'll help you set up these files.${binaryFilesMessage} content: `I'll help you set up these files.${binaryFilesMessage}
<boltArtifact id="imported-files" title="Imported Files"> <boltArtifact id="imported-files" title="Imported Files" type="bundled">
${fileArtifacts.join('\n\n')} ${fileArtifacts.join('\n\n')}
</boltArtifact>`, </boltArtifact>`,
id: generateId(), id: generateId(),

2
app/lib/runtime/message-parser.ts
View File

@ -192,6 +192,7 @@ export class StreamingMessageParser {
const artifactTag = input.slice(i, openTagEnd + 1); const artifactTag = input.slice(i, openTagEnd + 1);
const artifactTitle = this.#extractAttribute(artifactTag, 'title') as string; const artifactTitle = this.#extractAttribute(artifactTag, 'title') as string;
const type = this.#extractAttribute(artifactTag, 'type') as string;
const artifactId = this.#extractAttribute(artifactTag, 'id') as string; const artifactId = this.#extractAttribute(artifactTag, 'id') as string;
if (!artifactTitle) { if (!artifactTitle) {
@ -207,6 +208,7 @@ export class StreamingMessageParser {
const currentArtifact = { const currentArtifact = {
id: artifactId, id: artifactId,
title: artifactTitle, title: artifactTitle,
type,
} satisfies BoltArtifactData; } satisfies BoltArtifactData;
state.currentArtifact = currentArtifact; state.currentArtifact = currentArtifact;

4
app/lib/stores/workbench.ts
View File

@ -18,6 +18,7 @@ import { extractRelativePath } from '~/utils/diff';
export interface ArtifactState { export interface ArtifactState {
id: string; id: string;
title: string; title: string;
type?: string;
closed: boolean; closed: boolean;
runner: ActionRunner; runner: ActionRunner;
} }
@ -229,7 +230,7 @@ export class WorkbenchStore {
// TODO: what do we wanna do and how do we wanna recover from this? // TODO: what do we wanna do and how do we wanna recover from this?
} }
addArtifact({ messageId, title, id }: ArtifactCallbackData) { addArtifact({ messageId, title, id,type }: ArtifactCallbackData) {
const artifact = this.#getArtifact(messageId); const artifact = this.#getArtifact(messageId);
if (artifact) { if (artifact) {
@ -244,6 +245,7 @@ export class WorkbenchStore {
id, id,
title, title,
closed: false, closed: false,
type,
runner: new ActionRunner(webcontainer, () => this.boltTerminal), runner: new ActionRunner(webcontainer, () => this.boltTerminal),
}); });
} }

1
app/types/artifact.ts
View File

@ -1,4 +1,5 @@
export interface BoltArtifactData { export interface BoltArtifactData {
id: string; id: string;
title: string; title: string;
type?: string;
} }