legends810/testingnew

1import { AnimatePresence, motion } from 'framer-motion';2import React, { useState } from 'react';3import type { ProgressAnnotation } from '~/types/context';4import { classNames } from '~/utils/classNames';5import { cubicEasingFn } from '~/utils/easings';6 7export default function ProgressCompilation({ data }: { data?: ProgressAnnotation[] }) {8  const [progressList, setProgressList] = React.useState<ProgressAnnotation[]>([]);9  const [expanded, setExpanded] = useState(false);10  React.useEffect(() => {11    if (!data || data.length == 0) {12      setProgressList([]);13      return;14    }15 16    const progressMap = new Map<string, ProgressAnnotation>();17    data.forEach((x) => {18      const existingProgress = progressMap.get(x.label);19 20      if (existingProgress && existingProgress.status === 'complete') {21        return;22      }23 24      progressMap.set(x.label, x);25    });26 27    const newData = Array.from(progressMap.values());28    newData.sort((a, b) => a.order - b.order);29    setProgressList(newData);30  }, [data]);31 32  if (progressList.length === 0) {33    return <></>;34  }35 36  return (37    <AnimatePresence>38      <div39        className={classNames(40          'bg-bolt-elements-background-depth-2',41          'border border-bolt-elements-borderColor',42          'shadow-lg rounded-lg  relative w-full max-w-chat mx-auto z-prompt',43          'p-1',44        )}45      >46        <div47          className={classNames(48            'bg-bolt-elements-item-backgroundAccent',49            'p-1 rounded-lg text-bolt-elements-item-contentAccent',50            'flex ',51          )}52        >53          <div className="flex-1">54            <AnimatePresence>55              {expanded ? (56                <motion.div57                  className="actions"58                  initial={{ height: 0 }}59                  animate={{ height: 'auto' }}60                  exit={{ height: '0px' }}61                  transition={{ duration: 0.15 }}62                >63                  {progressList.map((x, i) => {64                    return <ProgressItem key={i} progress={x} />;65                  })}66                </motion.div>67              ) : (68                <ProgressItem progress={progressList.slice(-1)[0]} />69              )}70            </AnimatePresence>71          </div>72          <motion.button73            initial={{ width: 0 }}74            animate={{ width: 'auto' }}75            exit={{ width: 0 }}76            transition={{ duration: 0.15, ease: cubicEasingFn }}77            className=" p-1 rounded-lg bg-bolt-elements-item-backgroundAccent hover:bg-bolt-elements-artifacts-backgroundHover"78            onClick={() => setExpanded((v) => !v)}79          >80            <div className={expanded ? 'i-ph:caret-up-bold' : 'i-ph:caret-down-bold'}></div>81          </motion.button>82        </div>83      </div>84    </AnimatePresence>85  );86}87 88const ProgressItem = ({ progress }: { progress: ProgressAnnotation }) => {89  return (90    <motion.div91      className={classNames('flex text-sm gap-3')}92      initial={{ opacity: 0 }}93      animate={{ opacity: 1 }}94      exit={{ opacity: 0 }}95      transition={{ duration: 0.15 }}96    >97      <div className="flex items-center gap-1.5 ">98        <div>99          {progress.status === 'in-progress' ? (100            <div className="i-svg-spinners:90-ring-with-bg"></div>101          ) : progress.status === 'complete' ? (102            <div className="i-ph:check"></div>103          ) : null}104        </div>105        {/* {x.label} */}106      </div>107      {progress.message}108    </motion.div>109  );110};111