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,74 +9,93 @@ 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>
-      <div className="flex items-start">
+      <motion.div
-        {/* Icon */}
+        initial={{ opacity: 0, y: -20 }}
-        <div className="flex-shrink-0">
+        animate={{ opacity: 1, y: 0 }}
-          {type === 'error' ? (
+        exit={{ opacity: 0, y: -20 }}
-            <div className={`i-ph:x text-xl ${iconColor}`}></div>
+        transition={{ duration: 0.3 }}
-          ) : (
+        className={`rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2 p-4`}
-            <svg className={`h-5 w-5 ${iconColor}`} viewBox="0 0 20 20" fill="currentColor">
+      >
-              <path
+        <div className="flex items-start">
-                fillRule="evenodd"
+          {/* Icon */}
-                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"
+            className="flex-shrink-0"
-              />
+            initial={{ scale: 0 }}
-            </svg>
+            animate={{ scale: 1 }}
-          )}
+            transition={{ delay: 0.2 }}
-        </div>
+          >
+            <div className={`i-ph:warning-duotone text-xl text-bolt-elements-button-danger-text`}></div>
+          </motion.div>
+          {/* Content */}
+          <div className="ml-3 flex-1">
+            <motion.h3
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.1 }}
+              className={`text-sm font-medium text-bolt-elements-textPrimary`}
+            >
+              {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>
 
-        {/* Content */}
+            {/* Actions */}
-        <div className="ml-3 flex-1">
+            <motion.div
-          <h3 className={`text-sm font-medium text-bolt-elements-textPrimary`}>{title}</h3>
+              className="mt-4"
-          <div className={`mt-2 text-sm text-bolt-elements-textSecondary`}>
+              initial={{ opacity: 0, y: 10 }}
-            <p>{description}</p>
+              animate={{ opacity: 1, y: 0 }}
-            {/* {content && (
+              transition={{ delay: 0.3 }}
-              <pre className="mt-2 whitespace-pre-wrap font-mono text-xs bg-white bg-opacity-50 p-2 rounded">
+            >
-                {content}
+              <div className={classNames(' flex gap-2')}>
-              </pre>
-            )} */}
-          </div>
-
-          {/* Actions */}
-          <div className="mt-4">
-            <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
-              <button
+                  onClick={clearAlert}
-                onClick={clearAlert}
+                  className={classNames(
-                className={classNames(
+                    `px-2 py-1.5 rounded-md text-sm font-medium`,
-                  `px-2 py-1.5 rounded-md text-sm font-medium`,
+                    'bg-bolt-elements-button-secondary-background',
-                  'bg-bolt-elements-button-secondary-background',
+                    'hover:bg-bolt-elements-button-secondary-backgroundHover',
-                  'hover:bg-bolt-elements-button-secondary-backgroundHover',
+                    'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bolt-elements-button-secondary-background',
-                  'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bolt-elements-button-secondary-background',
+                    'text-bolt-elements-button-secondary-text',
-                  'text-bolt-elements-button-secondary-text',
+                  )}
-                )}
+                >
-              >
+                  Dismiss
-                Dismiss
+                </button>
-              </button>
+              </div>
-            </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;