updated styling wordings and animations icons

app/commit.json

@@ -1 +1 @@
-{ "commit": "fd193ee7d75080ac62d51cd6b1ebbf30942eac89" }
+{ "commit": "3d8abee511aca2db3d3040a88f3ed46069d9b037" }

app/components/chat/BaseChat.tsx

@@ -319,7 +319,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                 }}
               </ClientOnly>
               <div
-                className={classNames('flex flex-col gap-4 chatWithContainer z-prompt mb-6', {
+                className={classNames('flex flex-col gap-4 w-full max-w-chat mx-auto z-prompt mb-6', {
                   'sticky bottom-2': chatStarted,
                 })}
               >

app/components/chat/ChatAlert.tsx

@@ -1,3 +1,4 @@
+import { AnimatePresence, motion } from 'framer-motion';
 import type { ActionAlert } from '~/types/actions';
 import { classNames } from '~/utils/classNames';
 
@@ -8,58 +9,76 @@ interface Props {
 }
 
 export default function ChatAlert({ alert, clearAlert, postMessage }: Props) {
-  const { type, title, description, content } = alert;
+  const { title, description, content } = alert;
-
-  const iconColor =
-    type === 'error' ? 'text-bolt-elements-button-danger-text' : 'text-bolt-elements-button-primary-text';
 
   return (
-    <div className={`rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2 p-4`}>
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -20 }}
+        transition={{ duration: 0.3 }}
+        className={`rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2 p-4`}
+      >
         <div className="flex items-start">
           {/* Icon */}
-        <div className="flex-shrink-0">
+          <motion.div
-          {type === 'error' ? (
+            className="flex-shrink-0"
-            <div className={`i-ph:x text-xl ${iconColor}`}></div>
+            initial={{ scale: 0 }}
-          ) : (
+            animate={{ scale: 1 }}
-            <svg className={`h-5 w-5 ${iconColor}`} viewBox="0 0 20 20" fill="currentColor">
+            transition={{ delay: 0.2 }}
-              <path
+          >
-                fillRule="evenodd"
+            <div className={`i-ph:warning-duotone text-xl text-bolt-elements-button-danger-text`}></div>
-                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+          </motion.div>
-                clipRule="evenodd"
-              />
-            </svg>
-          )}
-        </div>
-
           {/* Content */}
           <div className="ml-3 flex-1">
-          <h3 className={`text-sm font-medium text-bolt-elements-textPrimary`}>{title}</h3>
+            <motion.h3
-          <div className={`mt-2 text-sm text-bolt-elements-textSecondary`}>
+              initial={{ opacity: 0 }}
-            <p>{description}</p>
+              animate={{ opacity: 1 }}
-            {/* {content && (
+              transition={{ delay: 0.1 }}
-              <pre className="mt-2 whitespace-pre-wrap font-mono text-xs bg-white bg-opacity-50 p-2 rounded">
+              className={`text-sm font-medium text-bolt-elements-textPrimary`}
-                {content}
+            >
-              </pre>
+              {title}
-            )} */}
+            </motion.h3>
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.2 }}
+              className={`mt-2 text-sm text-bolt-elements-textSecondary`}
+            >
+              <p>
+                We encountered an error while running terminal commands. Would you like Bolt to analyze and help resolve
+                this issue?
+              </p>
+              {description && (
+                <div className="text-xs text-bolt-elements-textSecondary p-2 bg-bolt-elements-background-depth-3 rounded mt-4 mb-4">
+                  Error: {description}
                 </div>
+              )}
+            </motion.div>
 
             {/* Actions */}
-          <div className="mt-4">
+            <motion.div
+              className="mt-4"
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.3 }}
+            >
               <div className={classNames(' flex gap-2')}>
-              {type === 'error' && (
                 <button
-                  onClick={() => postMessage(`*Fix this error on terminal* \n\`\`\`\n${content}\n\`\`\`\n`)}
+                  onClick={() => postMessage(`*Fix this error on terminal* \n\`\`\`sh\n${content}\n\`\`\`\n`)}
                   className={classNames(
                     `px-2 py-1.5 rounded-md text-sm font-medium`,
                     'bg-bolt-elements-button-primary-background',
                     'hover:bg-bolt-elements-button-primary-backgroundHover',
                     'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bolt-elements-button-danger-background',
                     'text-bolt-elements-button-primary-text',
+                    'flex items-center gap-1.5',
                   )}
                 >
-                  Fix Issue
+                  <div className="i-ph:chat-circle-duotone"></div>
+                  Ask Bolt
                 </button>
-              )}
                 <button
                   onClick={clearAlert}
                   className={classNames(
@@ -73,9 +92,10 @@ export default function ChatAlert({ alert, clearAlert, postMessage }: Props) {
                   Dismiss
                 </button>
               </div>
+            </motion.div>
           </div>
         </div>
-      </div>
+      </motion.div>
-    </div>
+    </AnimatePresence>
   );
 }

app/types/actions.ts

@@ -22,7 +22,7 @@ export type BoltAction = FileAction | ShellAction | StartAction;
 export type BoltActionData = BoltAction | BaseAction;
 
 export interface ActionAlert {
-  type: 'error' | 'info';
+  type: string;
   title: string;
   description: string;
   content: string;