Fix types, replace preact with react

src/components/Settings.tsx

@@ -122,7 +122,7 @@ const SelectModel = (props: {
           Model
           <Dialog>
             <DialogTrigger asChild>
-              <Button variant="icon" size="icon">
+              <Button variant="ghost" size="icon">
                 <InfoIcon className="w-4 h-4" />
               </Button>
             </DialogTrigger>
@@ -199,7 +199,7 @@ const LongInput = (props: {
         {props.label}{" "}
         <Dialog>
           <DialogTrigger asChild>
-            <Button variant="icon" size="icon">
+            <Button variant="ghost" size="icon">
               <InfoIcon />
             </Button>
           </DialogTrigger>
@@ -251,7 +251,7 @@ const InputField = (props: {
           {props.field}
           <Dialog>
             <DialogTrigger asChild>
-              <Button variant="icon" size="icon">
+              <Button variant="ghost" size="icon">
                 <InfoIcon className="w-4 h-4" />
               </Button>
             </DialogTrigger>
@@ -323,7 +323,7 @@ const Slicer = (props: {
         {props.field}
         <Dialog>
           <DialogTrigger asChild>
-            <Button variant="icon" size="icon">
+            <Button variant="ghost" size="icon">
               <InfoIcon className="w-4 h-4" />
             </Button>
           </DialogTrigger>
@@ -396,7 +396,7 @@ const Number = (props: {
         {props.field}
         <Dialog>
           <DialogTrigger asChild>
-            <Button variant="icon" size="icon">
+            <Button variant="ghost" size="icon">
               <InfoIcon className="h-4 w-4" />
             </Button>
           </DialogTrigger>
@@ -465,7 +465,7 @@ const Choice = (props: {
         {props.field}
         <Dialog>
           <DialogTrigger asChild>
-            <Button variant="icon" size="icon">
+            <Button variant="ghost" size="icon">
               <InfoIcon />
             </Button>
           </DialogTrigger>
@@ -550,7 +550,7 @@ export default (props: {
               You can customize the settings here.
             </SheetDescription>
           </SheetHeader>
-          <Accordion type="multiple" collapsible className="w-full">
+          <Accordion type="multiple" className="w-full">
             <AccordionItem value="session">
               <AccordionTrigger>Session</AccordionTrigger>
               <AccordionContent>
@@ -1025,7 +1025,7 @@ export default (props: {
                       TTS Voice
                       <Dialog>
                         <DialogTrigger asChild>
-                          <Button variant="icon" size="icon">
+                          <Button variant="ghost" size="icon">
                             <InfoIcon className="w-4 h-4" />
                           </Button>
                         </DialogTrigger>
@@ -1075,7 +1075,7 @@ export default (props: {
                       TTS Format
                       <Dialog>
                         <DialogTrigger asChild>
-                          <Button variant="icon" size="icon">
+                          <Button variant="ghost" size="icon">
                             <InfoIcon className="w-4 h-4" />
                           </Button>
                         </DialogTrigger>

src/components/StatusBar.tsx

@@ -22,7 +22,7 @@ const StatusBar = (props: {
     <div className="navbar bg-base-100 p-0">
       <div className="navbar-start">
         <div className="dropdown lg:hidden">
-          <div tabindex={0} role="button" className="btn btn-ghost btn-circle">
+          <div tabIndex={0} role="button" className="btn btn-ghost btn-circle">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               className="h-6 w-6"
@@ -39,7 +39,7 @@ const StatusBar = (props: {
             </svg>
           </div>
           <ul
-            tabindex={0}
+            tabIndex={0}
             className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
           >
             <li>

src/components/ui/sidebar.tsx

@@ -434,7 +434,7 @@ const SidebarGroupLabel = React.forwardRef<
 
   return (
     <Comp
-      ref={ref}
+      ref={ref as any}
       data-sidebar="group-label"
       className={cn(
         "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
@@ -455,7 +455,7 @@ const SidebarGroupAction = React.forwardRef<
 
   return (
     <Comp
-      ref={ref}
+      ref={ref as any}
       data-sidebar="group-action"
       className={cn(
         "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
@@ -556,7 +556,7 @@ const SidebarMenuButton = React.forwardRef<
 
     const button = (
       <Comp
-        ref={ref}
+        ref={ref as any}
         data-sidebar="menu-button"
         data-size={size}
         data-active={isActive}
@@ -601,7 +601,7 @@ const SidebarMenuAction = React.forwardRef<
 
   return (
     <Comp
-      ref={ref}
+      ref={ref as any}
       data-sidebar="menu-action"
       className={cn(
         "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
@@ -626,7 +626,7 @@ const SidebarMenuBadge = React.forwardRef<
   React.ComponentProps<"div">
 >(({ className, ...props }, ref) => (
   <div
-    ref={ref}
+    ref={ref as any}
     data-sidebar="menu-badge"
     className={cn(
       "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
@@ -715,7 +715,7 @@ const SidebarMenuSubButton = React.forwardRef<
 
   return (
     <Comp
-      ref={ref}
+      ref={ref as any}
       data-sidebar="menu-sub-button"
       data-size={size}
       data-active={isActive}

src/message.tsx

@@ -1,5 +1,5 @@
 import { XMarkIcon } from "@heroicons/react/24/outline";
-import Markdown from "preact-markdown";
+import Markdown from "react-markdown";
 import { useState, useEffect, StateUpdater } from "preact/hooks";
 
 import { Tr, langCodeContext, LANG_OPTIONS } from "@/translate";
@@ -156,7 +156,7 @@ export default function Message(props: Props) {
           ) : chat.role === "tool" ? (
             <MessageToolResp chat={chat} copyToClipboard={copyToClipboard} />
           ) : renderMarkdown ? (
-            <Markdown markdown={getMessageText(chat)} />
+            <Markdown>{getMessageText(chat)}</Markdown>
           ) : (
             <div className="message-content">
               {chat.content &&

src/messageToolCall.tsx

@@ -39,7 +39,8 @@ export function MessageToolCall({ chat, copyToClipboard }: Props) {
           </p>
         </div>
       ))}
-      {chat.content}
+      {/* [TODO] */}
+      {chat.content as string}
     </div>
   );
 }

src/messageToolResp.tsx

@@ -17,7 +17,8 @@ export function MessageToolResp({ chat, copyToClipboard }: Props) {
             {chat.tool_call_id}
           </span>
         </strong>
-        <p>{chat.content}</p>
+        {/* [TODO] */}
+        <p>{chat.content as string}</p>
       </div>
     </div>
   );

src/pages/Chatbox.tsx

@@ -722,7 +722,7 @@ export default function ChatBOX(props: {
           </p>
           <p className="p-2 my-2 text-center opacity-50 dark:text-white">
             {chatStore.postBeginIndex !== 0 && (
-              <Alert variant="info">
+              <Alert variant="default">
                 <InfoIcon className="h-4 w-4" />
                 <AlertTitle>{Tr("Chat History Notice")}</AlertTitle>
                 <AlertDescription>

src/search.tsx

@@ -155,13 +155,13 @@ export default function Search(props: {
               return (
                 <div
                   className="flex justify-start p-1 m-1 rounded border bg-base-200 cursor-pointer"
-                  key={result.key}
+                  key={result.key as number}
                   onClick={() => {
                     props.setSelectedChatIndex(parseInt(result.key.toString()));
                     props.setShow(false);
                   }}
                 >
-                  <div className="m-1 p-1 font-bold">{result.key}</div>
+                  <div className="m-1 p-1 font-bold">{result.key as number}</div>
                   <div className="m-1 p-1">{result.preview}</div>
                 </div>
               );
@@ -176,7 +176,7 @@ export default function Search(props: {
                     if (pageIndex === 0) return;
                     setPageIndex(pageIndex - 1);
                   }}
-                  disabled={pageIndex === 0}
+                  // disabled={pageIndex === 0}
                 />
               </PaginationItem>
               <PaginationItem>
@@ -189,7 +189,7 @@ export default function Search(props: {
                       return;
                     setPageIndex(pageIndex + 1);
                   }}
-                  disabled={pageIndex === Math.floor(searchResult.length / 10)}
+                  // disabled={pageIndex === Math.floor(searchResult.length / 10)}
                 />
               </PaginationItem>
             </PaginationContent>