🎉 first commit

app/components/chat/ElementEditPreview.tsx

@@ -0,0 +1,54 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import React, { useState } from 'react';
+import type { ElementInfoMetadata } from '~/types/message';
+import { cubicEasingFn } from '~/utils/easings';
+import { ElementPreview } from './ElementPreview';
+
+interface ElementEditPreviewProps {
+  elementEditInfo: ElementInfoMetadata;
+  className?: string;
+}
+
+export const ElementEditPreview: React.FC<ElementEditPreviewProps> = ({ elementEditInfo, className = '' }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <div
+      className={`element-edit-preview p-4 border border-upage-elements-borderColor rounded-lg bg-upage-elements-background-depth-1 shadow-sm ${className}`}
+    >
+      <div className="flex items-center justify-between cursor-pointer" onClick={toggleExpand}>
+        <div className="flex items-center gap-2">
+          <div className="i-ph:code-block text-upage-elements-textSecondary"></div>
+          <h3 className="text-sm font-medium text-upage-elements-textSecondary">
+            编辑元素: {elementEditInfo.tagName.toLowerCase()}
+            {elementEditInfo.className && `.${elementEditInfo.className.split(' ')[0]}`}
+            {elementEditInfo.id && `#${elementEditInfo.id}`}
+          </h3>
+        </div>
+        <motion.div
+          animate={{ rotate: isExpanded ? 180 : 0 }}
+          transition={{ duration: 0.3, ease: cubicEasingFn }}
+          className="i-ph:caret-down text-upage-elements-textSecondary"
+        />
+      </div>
+
+      <AnimatePresence>
+        {isExpanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0, marginTop: 0 }}
+            animate={{ height: 'auto', opacity: 1, marginTop: 12 }}
+            exit={{ height: 0, opacity: 0, marginTop: 0 }}
+            transition={{ duration: 0.3, ease: cubicEasingFn }}
+            style={{ overflow: 'hidden' }}
+          >
+            <ElementPreview element={elementEditInfo} />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};