Merge pull request #504 from thecodacus/bundle-artifact

feat(UI): added artifact bundling for custom long artifacts like uploading folder

app/components/chat/Artifact.tsx

@@ -28,6 +28,7 @@ interface ArtifactProps {
 export const Artifact = memo(({ messageId }: ArtifactProps) => {
   const userToggledActions = useRef(false);
   const [showActions, setShowActions] = useState(false);
+  const [allActionFinished, setAllActionFinished] = useState(false);
 
   const artifacts = useStore(workbenchStore.artifacts);
   const artifact = artifacts[messageId];
@@ -47,6 +48,11 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
     if (actions.length && !showActions && !userToggledActions.current) {
       setShowActions(true);
     }
+
+    if (actions.length !== 0) {
+      const finished = !actions.find((action) => action.status !== 'complete');
+      setAllActionFinished(finished);
+    }
   }, [actions]);
 
   return (
@@ -59,6 +65,18 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
             workbenchStore.showWorkbench.set(!showWorkbench);
           }}
         >
+          {artifact.type == 'bundled' && (
+            <>
+              <div className="p-4">
+                {allActionFinished ? (
+                  <div className={'i-ph:files-light'} style={{ fontSize: '2rem' }}></div>
+                ) : (
+                  <div className={'i-svg-spinners:90-ring-with-bg'} 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 +84,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 +101,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 +110,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(),