added artifact bundling for custom long artifacts like uploading folder

app/components/chat/Artifact.tsx

@@ -59,6 +59,14 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
             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="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>
@@ -66,7 +74,7 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
         </button>
         <div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
         <AnimatePresence>
-          {actions.length && (
+          {actions.length && artifact.type !== 'bundled' && (
             <motion.button
               initial={{ width: 0 }}
               animate={{ width: 'auto' }}
@@ -83,7 +91,7 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
         </AnimatePresence>
       </div>
       <AnimatePresence>
-        {showActions && actions.length > 0 && (
+        {artifact.type !== 'bundled' && showActions && actions.length > 0 && (
           <motion.div
             className="actions"
             initial={{ height: 0 }}
@@ -92,6 +100,7 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
             transition={{ duration: 0.15 }}
           >
             <div className="bg-bolt-elements-artifacts-borderColor h-[1px]" />
+
             <div className="p-5 text-left bg-bolt-elements-actions-background">
               <ActionList actions={actions} />
             </div>

app/components/chat/ImportFolderButton.tsx

@@ -79,7 +79,7 @@ ${content}
       role: 'assistant',
       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')}
 </boltArtifact>`,
       id: generateId(),

app/lib/runtime/message-parser.ts

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

app/lib/stores/workbench.ts

@@ -18,6 +18,7 @@ import { extractRelativePath } from '~/utils/diff';
 export interface ArtifactState {
   id: string;
   title: string;
+  type?: string;
   closed: boolean;
   runner: ActionRunner;
 }
@@ -229,7 +230,7 @@ export class WorkbenchStore {
     // 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);
 
     if (artifact) {
@@ -244,6 +245,7 @@ export class WorkbenchStore {
       id,
       title,
       closed: false,
+      type,
       runner: new ActionRunner(webcontainer, () => this.boltTerminal),
     });
   }

app/types/artifact.ts

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