fix: typescript error

app/components/artifacts.tsx

@@ -23,17 +23,19 @@ import { Path, ApiPath, REPO_URL } from "@/app/constant";
 import { Loading } from "./home";
 import styles from "./artifacts.module.scss";
 
-export const HTMLPreview = forwardRef<
-  {
-    reload: () => void;
-  },
-  {
+type HTMLPreviewProps = {
   code: string;
   autoHeight?: boolean;
   height?: number | string;
   onLoad?: (title?: string) => void;
-  }
->(function HTMLPreview(props, ref) {
+};
+
+export type HTMLPreviewHander = {
+  reload: () => void;
+};
+
+export const HTMLPreview = forwardRef<HTMLPreviewHander, HTMLPreviewProps>(
+  function HTMLPreview(props, ref) {
     const iframeRef = useRef<HTMLIFrameElement>(null);
     const [frameId, setFrameId] = useState<string>(nanoid());
     const [iframeHeight, setIframeHeight] = useState(600);
@@ -72,7 +74,9 @@ export const HTMLPreview = forwardRef<
         return props.height;
       }
       const parentHeight = props.height || 600;
-    return iframeHeight + 40 > parentHeight ? parentHeight : iframeHeight + 40;
+      return iframeHeight + 40 > parentHeight
+        ? parentHeight
+        : iframeHeight + 40;
     }, [props.autoHeight, props.height, iframeHeight]);
 
     const srcDoc = useMemo(() => {
@@ -100,7 +104,8 @@ export const HTMLPreview = forwardRef<
         onLoad={handleOnLoad}
       />
     );
-});
+  },
+);
 
 export function ArtifactsShareButton({
   getCode,
@@ -203,7 +208,7 @@ export function Artifacts() {
   const [code, setCode] = useState("");
   const [loading, setLoading] = useState(true);
   const [fileName, setFileName] = useState("");
-  const previewRef = useRef<typeof HTMLPreview>(null);
+  const previewRef = useRef<HTMLPreviewHander>(null);
 
   useEffect(() => {
     if (id) {

app/components/markdown.tsx

@@ -14,7 +14,11 @@ import ReloadButtonIcon from "../icons/reload.svg";
 import React from "react";
 import { useDebouncedCallback } from "use-debounce";
 import { showImageModal, FullScreen } from "./ui-lib";
-import { ArtifactsShareButton, HTMLPreview } from "./artifacts";
+import {
+  ArtifactsShareButton,
+  HTMLPreview,
+  HTMLPreviewHander,
+} from "./artifacts";
 import { Plugin } from "../constant";
 import { useChatStore } from "../store";
 import { IconButton } from "./button";
@@ -67,7 +71,7 @@ export function Mermaid(props: { code: string }) {
 
 export function PreCode(props: { children: any }) {
   const ref = useRef<HTMLPreElement>(null);
-  const previewRef = useRef<typeof HTMLPreview>(null);
+  const previewRef = useRef<HTMLPreviewHander>(null);
   const [mermaidCode, setMermaidCode] = useState("");
   const [htmlCode, setHtmlCode] = useState("");
   const { height } = useWindowSize();