chore: fixed typecheck warnings

app/components/chat/BaseChat.tsx

@@ -11,7 +11,7 @@ import { SendButton } from './SendButton.client';
 import styles from './BaseChat.module.scss';
 
 interface BaseChatProps {
-  textareaRef?: React.RefObject<HTMLTextAreaElement> | undefined;
+  textareaRef?: React.RefObject<HTMLTextAreaElement | null> | undefined;
   messageRef?: RefCallback<HTMLDivElement> | undefined;
   scrollRef?: RefCallback<HTMLDivElement> | undefined;
   showChat?: boolean;

app/components/editor/codemirror/CodeMirrorEditor.tsx

@@ -135,10 +135,10 @@ export const CodeMirrorEditor = memo(
     const [languageCompartment] = useState(new Compartment());
 
     const containerRef = useRef<HTMLDivElement | null>(null);
-    const viewRef = useRef<EditorView>();
-    const themeRef = useRef<Theme>();
-    const docRef = useRef<EditorDocument>();
-    const editorStatesRef = useRef<EditorStates>();
+    const viewRef = useRef<EditorView | null>(null);
+    const themeRef = useRef<Theme | null>(null);
+    const docRef = useRef<EditorDocument | null>(null);
+    const editorStatesRef = useRef<EditorStates | null>(null);
     const onScrollRef = useRef(onScroll);
     const onChangeRef = useRef(onChange);
     const onSaveRef = useRef(onSave);
@@ -151,7 +151,7 @@ export const CodeMirrorEditor = memo(
       onScrollRef.current = onScroll;
       onChangeRef.current = onChange;
       onSaveRef.current = onSave;
-      docRef.current = doc;
+      docRef.current = doc ?? null;
       themeRef.current = theme;
     });
 
@@ -188,7 +188,7 @@ export const CodeMirrorEditor = memo(
 
       return () => {
         viewRef.current?.destroy();
-        viewRef.current = undefined;
+        viewRef.current = null;
       };
     }, []);
 

app/components/ui/IconButton.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { memo } from 'react';
 import { classNames } from '~/utils/classNames';
 
@@ -20,7 +21,7 @@ type IconButtonWithoutChildrenProps = {
 
 type IconButtonWithChildrenProps = {
   icon?: undefined;
-  children: string | JSX.Element | JSX.Element[];
+  children: string | React.ReactElement | React.ReactElement[];
 } & BaseIconButtonProps;
 
 type IconButtonProps = IconButtonWithoutChildrenProps | IconButtonWithChildrenProps;

app/components/ui/PanelHeaderButton.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { memo } from 'react';
 import { classNames } from '~/utils/classNames';
 
@@ -5,7 +6,7 @@ interface PanelHeaderButtonProps {
   className?: string;
   disabledClassName?: string;
   disabled?: boolean;
-  children: string | JSX.Element | Array<JSX.Element | string>;
+  children: string | React.ReactElement | Array<React.ReactElement | string>;
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 

app/components/ui/Slider.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { motion } from 'framer-motion';
 import { memo } from 'react';
 import { classNames } from '~/utils/classNames';
@@ -37,7 +38,7 @@ export const Slider = genericMemo(<T,>({ selected, options, setSelected }: Slide
 
 interface SliderButtonProps {
   selected: boolean;
-  children: string | JSX.Element | Array<JSX.Element | string>;
+  children: string | React.ReactElement | Array<React.ReactElement | string>;
   setSelected: () => void;
 }
 

app/components/workbench/FileBreadcrumb.tsx

@@ -87,7 +87,7 @@ export const FileBreadcrumb = memo<FileBreadcrumbProps>(({ files, pathSegments =
             <DropdownMenu.Root open={isActive} modal={false}>
               <DropdownMenu.Trigger asChild>
                 <span
-                  ref={(ref) => (segmentRefs.current[index] = ref)}
+                  ref={(ref) => { segmentRefs.current[index] = ref; }}
                   className={classNames('flex items-center gap-1.5 cursor-pointer shrink-0', {
                     'text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary': !isActive,
                     'text-bolt-elements-textPrimary underline': isActive,

app/components/workbench/Workbench.client.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useStore } from '@nanostores/react';
 import { motion, type HTMLMotionProps, type Variants } from 'framer-motion';
 import { computed } from 'nanostores';
@@ -175,7 +176,7 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
 });
 
 interface ViewProps extends HTMLMotionProps<'div'> {
-  children: JSX.Element;
+  children: React.ReactElement;
 }
 
 const View = memo(({ children, ...props }: ViewProps) => {

app/components/workbench/terminal/Terminal.tsx

@@ -23,7 +23,7 @@ export interface TerminalProps {
 export const Terminal = memo(
   forwardRef<TerminalRef, TerminalProps>(({ className, theme, readonly, onTerminalReady, onTerminalResize }, ref) => {
     const terminalElementRef = useRef<HTMLDivElement>(null);
-    const terminalRef = useRef<XTerm>();
+    const terminalRef = useRef<XTerm | null>(null);
 
     useEffect(() => {
       const element = terminalElementRef.current!;

app/lib/hooks/useSnapScroll.ts

@@ -2,9 +2,9 @@ import { useRef, useCallback } from 'react';
 
 export function useSnapScroll() {
   const autoScrollRef = useRef(true);
-  const scrollNodeRef = useRef<HTMLDivElement>();
-  const onScrollRef = useRef<() => void>();
-  const observerRef = useRef<ResizeObserver>();
+  const scrollNodeRef = useRef<HTMLDivElement | null>(null);
+  const onScrollRef = useRef<(() => void) | null>(null);
+  const observerRef = useRef<ResizeObserver | null>(null);
 
   const messageRef = useCallback((node: HTMLDivElement | null) => {
     if (node) {
@@ -22,7 +22,7 @@ export function useSnapScroll() {
       observer.observe(node);
     } else {
       observerRef.current?.disconnect();
-      observerRef.current = undefined;
+      observerRef.current = null;
     }
   }, []);
 
@@ -43,8 +43,8 @@ export function useSnapScroll() {
         scrollNodeRef.current?.removeEventListener('scroll', onScrollRef.current);
       }
 
-      scrollNodeRef.current = undefined;
-      onScrollRef.current = undefined;
+      scrollNodeRef.current = null;
+      onScrollRef.current = null;
     }
   }, []);
 

app/utils/react.ts

@@ -1,6 +1,7 @@
+import * as React from 'react';
 import { memo } from 'react';
 
-export const genericMemo: <T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>>(
+export const genericMemo: <T extends keyof React.JSX.IntrinsicElements | React.JSXElementConstructor<any>>(
   component: T,
   propsAreEqual?: (prevProps: React.ComponentProps<T>, nextProps: React.ComponentProps<T>) => boolean,
 ) => T & { displayName?: string } = memo;