legends810/testingnew

1import { AnimatePresence, motion } from 'framer-motion';2import type { ActionAlert } from '~/types/actions';3import { classNames } from '~/utils/classNames';4 5interface Props {6  alert: ActionAlert;7  clearAlert: () => void;8  postMessage: (message: string) => void;9}10 11export default function ChatAlert({ alert, clearAlert, postMessage }: Props) {12  const { description, content, source } = alert;13 14  const isPreview = source === 'preview';15  const title = isPreview ? 'Preview Error' : 'Terminal Error';16  const message = isPreview17    ? 'We encountered an error while running the preview. Would you like Bolt to analyze and help resolve this issue?'18    : 'We encountered an error while running terminal commands. Would you like Bolt to analyze and help resolve this issue?';19 20  return (21    <AnimatePresence>22      <motion.div23        initial={{ opacity: 0, y: -20 }}24        animate={{ opacity: 1, y: 0 }}25        exit={{ opacity: 0, y: -20 }}26        transition={{ duration: 0.3 }}27        className={`rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2 p-4 mb-2`}28      >29        <div className="flex items-start">30          {/* Icon */}31          <motion.div32            className="flex-shrink-0"33            initial={{ scale: 0 }}34            animate={{ scale: 1 }}35            transition={{ delay: 0.2 }}36          >37            <div className={`i-ph:warning-duotone text-xl text-bolt-elements-button-danger-text`}></div>38          </motion.div>39          {/* Content */}40          <div className="ml-3 flex-1">41            <motion.h342              initial={{ opacity: 0 }}43              animate={{ opacity: 1 }}44              transition={{ delay: 0.1 }}45              className={`text-sm font-medium text-bolt-elements-textPrimary`}46            >47              {title}48            </motion.h3>49            <motion.div50              initial={{ opacity: 0 }}51              animate={{ opacity: 1 }}52              transition={{ delay: 0.2 }}53              className={`mt-2 text-sm text-bolt-elements-textSecondary`}54            >55              <p>{message}</p>56              {description && (57                <div className="text-xs text-bolt-elements-textSecondary p-2 bg-bolt-elements-background-depth-3 rounded mt-4 mb-4">58                  Error: {description}59                </div>60              )}61            </motion.div>62 63            {/* Actions */}64            <motion.div65              className="mt-4"66              initial={{ opacity: 0, y: 10 }}67              animate={{ opacity: 1, y: 0 }}68              transition={{ delay: 0.3 }}69            >70              <div className={classNames(' flex gap-2')}>71                <button72                  onClick={() =>73                    postMessage(74                      `*Fix this ${isPreview ? 'preview' : 'terminal'} error* \n\`\`\`${isPreview ? 'js' : 'sh'}\n${content}\n\`\`\`\n`,75                    )76                  }77                  className={classNames(78                    `px-2 py-1.5 rounded-md text-sm font-medium`,79                    'bg-bolt-elements-button-primary-background',80                    'hover:bg-bolt-elements-button-primary-backgroundHover',81                    'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bolt-elements-button-danger-background',82                    'text-bolt-elements-button-primary-text',83                    'flex items-center gap-1.5',84                  )}85                >86                  <div className="i-ph:chat-circle-duotone"></div>87                  Ask Bolt88                </button>89                <button90                  onClick={clearAlert}91                  className={classNames(92                    `px-2 py-1.5 rounded-md text-sm font-medium`,93                    'bg-bolt-elements-button-secondary-background',94                    'hover:bg-bolt-elements-button-secondary-backgroundHover',95                    'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bolt-elements-button-secondary-background',96                    'text-bolt-elements-button-secondary-text',97                  )}98                >99                  Dismiss100                </button>101              </div>102            </motion.div>103          </div>104        </div>105      </motion.div>106    </AnimatePresence>107  );108}109