From 3a894d0516fec939e5b9d21e0df3d9c5b9bbde7a Mon Sep 17 00:00:00 2001
From: KevIsDev <zennerd404@gmail.com>
Date: Tue, 29 Apr 2025 14:37:17 +0100
Subject: [PATCH] feat(chat): add dynamic title support for bundled artifacts

Introduce dynamic titles for bundled artifacts based on their state and ID. This improves user experience by providing more context during project creation or restoration. Also, pass the `title` parameter to the `getTemplates` function to customize the artifact title.
---
 app/components/chat/Artifact.tsx    | 16 +++++++++++++++-
 app/components/chat/Chat.client.tsx |  4 ++--
 app/utils/selectStarterTemplate.ts  |  4 ++--
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/app/components/chat/Artifact.tsx b/app/components/chat/Artifact.tsx
index cc0f3010..063b0b59 100644
--- a/app/components/chat/Artifact.tsx
+++ b/app/components/chat/Artifact.tsx
@@ -64,6 +64,18 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
     }
   }, [actions, artifact.type, allActionFinished]);
 
+  // Determine the dynamic title based on state for bundled artifacts
+  const dynamicTitle =
+    artifact?.type === 'bundled'
+      ? allActionFinished
+        ? artifact.id === 'restored-project-setup'
+          ? 'Project Restored' // Title when restore is complete
+          : 'Project Created' // Title when initial creation is complete
+        : artifact.id === 'restored-project-setup'
+          ? 'Restoring Project...' // Title during restore
+          : 'Creating Project...' // Title during initial creation
+      : artifact?.title; // Fallback to original title for non-bundled or if artifact is missing
+
   return (
     <>
       <div className="artifact border border-bolt-elements-borderColor flex flex-col overflow-hidden rounded-lg w-full transition-border duration-150">
@@ -77,7 +89,8 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
           >
             <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}
+                {/* Use the dynamic title here */}
+                {dynamicTitle}
               </div>
               <div className="w-full w-full text-bolt-elements-textSecondary text-xs mt-0.5">
                 Click to open Workbench
@@ -112,6 +125,7 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
               )}
             </div>
             <div className="text-bolt-elements-textPrimary font-medium leading-5 text-sm">
+              {/* This status text remains the same */}
               {allActionFinished
                 ? artifact.id === 'restored-project-setup'
                   ? 'Restore files from snapshot'
diff --git a/app/components/chat/Chat.client.tsx b/app/components/chat/Chat.client.tsx
index 8786b222..c5ff7dbb 100644
--- a/app/components/chat/Chat.client.tsx
+++ b/app/components/chat/Chat.client.tsx
@@ -316,14 +316,14 @@ export const ChatImpl = memo(
         setFakeLoading(true);
 
         if (autoSelectTemplate) {
-          const { template } = await selectStarterTemplate({
+          const { template, title } = await selectStarterTemplate({
             message: messageContent,
             model,
             provider,
           });
 
           if (template !== 'blank') {
-            const temResp = await getTemplates(template).catch((e) => {
+            const temResp = await getTemplates(template, title).catch((e) => {
               if (e.message.includes('rate limit')) {
                 toast.warning('Rate limit exceeded. Skipping starter template\n Continuing with blank template');
               } else {
diff --git a/app/utils/selectStarterTemplate.ts b/app/utils/selectStarterTemplate.ts
index 29fe6cbb..2e725e4a 100644
--- a/app/utils/selectStarterTemplate.ts
+++ b/app/utils/selectStarterTemplate.ts
@@ -129,7 +129,7 @@ const getGitHubRepoContent = async (repoName: string): Promise<{ name: string; p
   }
 };
 
-export async function getTemplates(templateName: string) {
+export async function getTemplates(templateName: string, title?: string) {
   const template = STARTER_TEMPLATES.find((t) => t.name == templateName);
 
   if (!template) {
@@ -183,7 +183,7 @@ export async function getTemplates(templateName: string) {
 
   const assistantMessage = `
 Bolt is initializing your project with the required files using the ${template.name} template.
-<boltArtifact id="imported-files" title="Create initial files" type="bundled">
+<boltArtifact id="imported-files" title="${title || 'Create initial files'}" type="bundled">
 ${filesToImport.files
   .map(
     (file) =>