refactor: repartition server-side and client-side code

app/.client/components/chat/ElementPreview.tsx

@@ -0,0 +1,58 @@
+import classNames from 'classnames';
+import React, { useMemo } from 'react';
+
+interface ElementPreviewProps {
+  element: {
+    tagName: string;
+    className?: string;
+    id?: string;
+    innerHTML?: string;
+    outerHTML?: string;
+  };
+}
+
+export const ElementPreview: React.FC<ElementPreviewProps> = ({ element }) => {
+  // 提取元素标识符
+  const elementIdentifier = useMemo(() => {
+    const parts = [];
+    parts.push(element.tagName.toLowerCase());
+
+    if (element.className) {
+      const classes = element.className.split(' ').filter(Boolean);
+      if (classes.length > 0) {
+        parts.push(`.${classes[0]}`);
+      }
+    }
+
+    if (element.id) {
+      parts.push(`#${element.id}`);
+    }
+
+    return parts.join('');
+  }, [element]);
+
+  // 安全地渲染元素预览
+  // 注意：使用 dangerouslySetInnerHTML 需要确保内容是安全的
+  return (
+    <div className="element-preview p-3 border border-upage-elements-borderColor rounded bg-white">
+      <div className="flex items-center gap-2 mb-2">
+        <div className="i-ph:code text-upage-elements-textSecondary"></div>
+        <div className="text-xs font-mono text-upage-elements-textSecondary">{elementIdentifier}</div>
+      </div>
+      <div
+        className={classNames(
+          'preview-container p-2 border border-dashed border-upage-elements-borderColor rounded',
+          'max-h-[200px] overflow-auto',
+        )}
+      >
+        {element.outerHTML ? (
+          <div dangerouslySetInnerHTML={{ __html: element.outerHTML }} />
+        ) : element.innerHTML ? (
+          <div dangerouslySetInnerHTML={{ __html: element.innerHTML }} />
+        ) : (
+          <div className="text-xs text-upage-elements-textTertiary italic">无法显示元素预览</div>
+        )}
+      </div>
+    </div>
+  );
+};