refactor(chat): improve UI layout, artifact handling, and template naming

- Restructured alert components in BaseChat for better layout organization
- Updated artifact component to display dynamic titles based on state
- Simplified template names in constants for better readability
- Enhanced snapshot restoration process by consolidating command actions into a single artifact

app/utils/projectCommands.ts

@@ -84,9 +84,10 @@ export function createCommandsMessage(commands: ProjectCommands): Message | null
   return {
     role: 'assistant',
     content: `
+${commands.followupMessage ? `\n\n${commands.followupMessage}` : ''}
 <boltArtifact id="project-setup" title="Project Setup">
 ${commandString}
-</boltArtifact>${commands.followupMessage ? `\n\n${commands.followupMessage}` : ''}`,
+</boltArtifact>`,
     id: generateId(),
     createdAt: new Date(),
   };
@@ -127,3 +128,26 @@ export function escapeBoltAActionTags(input: string) {
 export function escapeBoltTags(input: string) {
   return escapeBoltArtifactTags(escapeBoltAActionTags(input));
 }
+
+// We have this seperate function to simplify the restore snapshot process in to one single artifact.
+export function createCommandActionsString(commands: ProjectCommands): string {
+  if (!commands.setupCommand && !commands.startCommand) {
+    // Return empty string if no commands
+    return '';
+  }
+
+  let commandString = '';
+
+  if (commands.setupCommand) {
+    commandString += `
+<boltAction type="shell">${commands.setupCommand}</boltAction>`;
+  }
+
+  if (commands.startCommand) {
+    commandString += `
+<boltAction type="start">${commands.startCommand}</boltAction>
+`;
+  }
+
+  return commandString;
+}