upgrade react 19, remove preact usage

src/addImage.tsx

@@ -1,4 +1,4 @@
-import { useState } from "preact/hooks";
+import { useState } from "react";
 import { ChatStore } from "@/types/chatstore";
 import { MessageDetail } from "@/chatgpt";
 import { Tr } from "@/translate";

src/components/Settings.tsx

@@ -1,13 +1,7 @@
 import { themeChange } from "theme-change";
 
-import { createRef } from "preact";
-import {
-  StateUpdater,
-  useContext,
-  useEffect,
-  useState,
-  Dispatch,
-} from "preact/hooks";
+import { useRef } from "react";
+import { useContext, useEffect, useState, Dispatch } from "react";
 import { clearTotalCost, getTotalCost } from "@/utils/totalCost";
 import {
   ChatStore,
@@ -484,7 +478,7 @@ const Choice = (props: {
 export default (props: {
   chatStore: ChatStore;
   setChatStore: (cs: ChatStore) => void;
-  setShow: Dispatch<StateUpdater<boolean>>;
+  setShow: Dispatch<boolean>;
   selectedChatStoreIndex: number;
   templates: TemplateChatStore[];
   setTemplates: (templates: TemplateChatStore[]) => void;
@@ -515,7 +509,7 @@ export default (props: {
     link = link + `&dev=true`;
   }
 
-  const importFileRef = createRef();
+  const importFileRef = useRef<any>(null);
   const [totalCost, setTotalCost] = useState(getTotalCost());
   // @ts-ignore
   const { langCode, setLangCode } = useContext(langCodeContext);

src/components/WhisperButton.tsx

@@ -1,7 +1,7 @@
-import { createRef } from "preact";
+import { createRef } from "react";
 
 import { ChatStore } from "@/types/chatstore";
-import { StateUpdater, useEffect, useState, Dispatch } from "preact/hooks";
+import { useEffect, useState, Dispatch } from "react";
 import { Button } from "@/components/ui/button";
 import {
   AudioWaveform,
@@ -14,7 +14,7 @@ import {
 const WhisperButton = (props: {
   chatStore: ChatStore;
   inputMsg: string;
-  setInputMsg: Dispatch<StateUpdater<string>>;
+  setInputMsg: Dispatch<string>;
 }) => {
   const { chatStore, inputMsg, setInputMsg } = props;
   const mediaRef = createRef();
@@ -25,7 +25,7 @@ const WhisperButton = (props: {
       size="icon"
       className={`m-1 p-1 ${isRecording !== "Mic" ? "animate-pulse" : ""}`}
       disabled={isRecording === "Transcribing"}
-      ref={mediaRef}
+      ref={mediaRef as any}
       onClick={async (event) => {
         event.preventDefault(); // Prevent the default behavior
 

src/components/ui/calendar.tsx

@@ -57,14 +57,18 @@ function Calendar({
         day_hidden: "invisible",
         ...classNames,
       }}
-      components={{
-        IconLeft: ({ className, ...props }) => (
+      components={
+        {
+          /*
+        IconLeft: ({ className, ...props }: any) => (
           <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
         ),
-        IconRight: ({ className, ...props }) => (
+        IconRight: ({ className, ...props }: any) => (
           <ChevronRight className={cn("h-4 w-4", className)} {...props} />
         ),
-      }}
+        */
+        }
+      }
       {...props}
     />
   );

src/editMessage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, StateUpdater, Dispatch } from "preact/hooks";
+import { useState, useEffect, Dispatch } from "react";
 import { Tr, langCodeContext, LANG_OPTIONS, tr } from "@/translate";
 import { ChatStore, ChatStoreMessage } from "@/types/chatstore";
 import { EditMessageString } from "@/editMessageString";
@@ -18,7 +18,7 @@ interface EditMessageProps {
   chat: ChatStoreMessage;
   chatStore: ChatStore;
   showEdit: boolean;
-  setShowEdit: Dispatch<StateUpdater<boolean>>;
+  setShowEdit: Dispatch<boolean>;
   setChatStore: (cs: ChatStore) => void;
 }
 export function EditMessage(props: EditMessageProps) {

src/main.tsx

@@ -1,6 +1,6 @@
 import { themeChange } from "theme-change";
-import { render } from "preact";
-import { useState, useEffect } from "preact/hooks";
+import { createRoot } from "react-dom/client";
+import { useState, useEffect } from "react";
 import { App } from "@/pages/App";
 import { Tr, langCodeContext, LANG_OPTIONS } from "@/translate";
 import { SidebarProvider } from "@/components/ui/sidebar";
@@ -60,4 +60,4 @@ function Base() {
   );
 }
 
-render(<Base />, document.getElementById("app") as HTMLElement);
+createRoot(document.getElementById("app") as HTMLElement).render(<Base />);

src/message.tsx

@@ -1,6 +1,6 @@
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import Markdown from "react-markdown";
-import { useState, useEffect, StateUpdater } from "preact/hooks";
+import { useState } from "react";
 
 import { Tr, langCodeContext, LANG_OPTIONS } from "@/translate";
 import { ChatStore, ChatStoreMessage } from "@/types/chatstore";
@@ -156,7 +156,9 @@ export default function Message(props: Props) {
           ) : chat.role === "tool" ? (
             <MessageToolResp chat={chat} copyToClipboard={copyToClipboard} />
           ) : renderMarkdown ? (
-            <Markdown>{getMessageText(chat)}</Markdown>
+            // [TODO] It is happening https://github.com/remarkjs/react-markdown/pull/879
+            // <Markdown>{getMessageText(chat)}</Markdown>
+            <></>
           ) : (
             <div className="message-content">
               {chat.content &&

src/pages/AddToolMsg.tsx

@@ -1,12 +1,11 @@
-import { useState } from "preact/hooks";
-import { Dispatch, StateUpdater } from "preact/hooks";
+import { Dispatch, useState } from "react";
 
 import { Tr } from "@/translate";
 import { calculate_token_length } from "@/chatgpt";
 import { ChatStore } from "@/types/chatstore";
 
 const AddToolMsg = (props: {
-  setShowAddToolMsg: Dispatch<StateUpdater<boolean>>;
+  setShowAddToolMsg: Dispatch<boolean>;
   chatStore: ChatStore;
   setChatStore: (cs: ChatStore) => void;
 }) => {

src/pages/App.tsx

@@ -1,5 +1,5 @@
 import { openDB } from "idb";
-import { useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "react";
 import "@/global.css";
 
 import { calculate_token_length } from "@/chatgpt";

src/pages/Chatbox.tsx

@@ -1,6 +1,6 @@
 import { IDBPDatabase } from "idb";
-import { createRef } from "preact";
-import { StateUpdater, useEffect, useState, Dispatch } from "preact/hooks";
+import { useRef } from "react";
+import { useEffect, useState, Dispatch } from "react";
 import { Tr, langCodeContext, LANG_OPTIONS } from "@/translate";
 import {
   STORAGE_NAME_TEMPLATE,
@@ -84,7 +84,7 @@ export default function ChatBOX(props: {
   chatStore: ChatStore;
   setChatStore: (cs: ChatStore) => void;
   selectedChatIndex: number;
-  setSelectedChatIndex: Dispatch<StateUpdater<number>>;
+  setSelectedChatIndex: Dispatch<number>;
 }) {
   const { chatStore, setChatStore } = props;
   // prevent error
@@ -109,9 +109,10 @@ export default function ChatBOX(props: {
     _setFollow(follow);
   };
 
-  const messagesEndRef = createRef();
+  const messagesEndRef = useRef<HTMLElement>(null);
   useEffect(() => {
     if (follow) {
+      if (messagesEndRef.current === null) return;
       messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
     }
   }, [showRetry, showGenerating, generatingMessage]);
@@ -470,7 +471,7 @@ export default function ChatBOX(props: {
     );
     _setToolsTemplates(templateTools);
   };
-  const userInputRef = createRef();
+  const userInputRef = useRef<HTMLInputElement>(null);
 
   return (
     <>
@@ -746,7 +747,7 @@ export default function ChatBOX(props: {
               </Button>
             </p>
           )}
-          <div ref={messagesEndRef}></div>
+          <div ref={messagesEndRef as any}></div>
         </ChatMessageList>
         {images.length > 0 && (
           <div className="flex flex-wrap">
@@ -780,7 +781,7 @@ export default function ChatBOX(props: {
           <form className="relative rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring p-1">
             <ChatInput
               value={inputMsg}
-              ref={userInputRef}
+              ref={userInputRef as any}
               placeholder="Type your message here..."
               onChange={(event: any) => {
                 setInputMsg(event.target.value);
@@ -828,6 +829,7 @@ export default function ChatBOX(props: {
                 disabled={showGenerating}
                 onClick={() => {
                   send(inputMsg, true);
+                  if (userInputRef.current === null) return;
                   userInputRef.current.value = "";
                   autoHeight(userInputRef.current);
                 }}

src/search.tsx

@@ -1,5 +1,5 @@
 import { IDBPDatabase } from "idb";
-import { StateUpdater, useRef, useState, Dispatch } from "preact/hooks";
+import { useRef, useState, Dispatch } from "react";
 
 import { ChatStore } from "@/types/chatstore";
 import { MessageDetail } from "./chatgpt";
@@ -34,7 +34,7 @@ interface ChatStoreSearchResult {
 
 export default function Search(props: {
   db: Promise<IDBPDatabase<ChatStore>>;
-  setSelectedChatIndex: Dispatch<StateUpdater<number>>;
+  setSelectedChatIndex: Dispatch<number>;
   chatStore: ChatStore;
   show: boolean;
   setShow: (show: boolean) => void;

src/translate/index.tsx

@@ -1,4 +1,4 @@
-import { createContext } from "preact";
+import { createContext } from "react";
 import MAP_zh_CN from "@/translate/zh_CN";
 
 interface LangOption {

src/tts.tsx

@@ -1,5 +1,5 @@
 import { SpeakerWaveIcon } from "@heroicons/react/24/outline";
-import { useMemo, useState } from "preact/hooks";
+import { useMemo, useState } from "react";
 
 import { addTotalCost } from "@/utils/totalCost";
 import { ChatStore, ChatStoreMessage } from "@/types/chatstore";

vite.config.ts

@@ -1,10 +1,9 @@
 import { defineConfig } from "vite";
-import preact from "@preact/preset-vite";
 import path from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [preact()],
+  plugins: [],
   base: "./",
   resolve: {
     alias: {