fix: use ref not set init value

web/app/components/base/features/context.tsx

@@ -14,7 +14,7 @@ type FeaturesProviderProps = {
   children: React.ReactNode
 } & Partial<FeaturesState>
 export const FeaturesProvider = ({ children, ...props }: FeaturesProviderProps) => {
-  const storeRef = useRef<FeaturesStore>()
+  const storeRef = useRef<FeaturesStore | undefined>(undefined)
 
   if (!storeRef.current)
     storeRef.current = createFeaturesStore(props)

web/app/components/base/file-uploader/store.tsx

@@ -54,7 +54,7 @@ export const FileContextProvider = ({
   value,
   onChange,
 }: FileProviderProps) => {
-  const storeRef = useRef<FileStore>()
+  const storeRef = useRef<FileStore | undefined>(undefined)
 
   if (!storeRef.current)
     storeRef.current = createFileStore(value, onChange)

web/app/components/base/mermaid/index.tsx

@@ -40,7 +40,7 @@ const Flowchart = (
 
   const prevPrimitiveCode = usePrevious(props.PrimitiveCode)
   const [isLoading, setIsLoading] = useState(true)
-  const timeRef = useRef<number>()
+  const timeRef = useRef<number>(0)
   const [errMsg, setErrMsg] = useState('')
   const [imagePreviewUrl, setImagePreviewUrl] = useState('')
 
@@ -119,22 +119,22 @@ const Flowchart = (
       </div>
       {
         svgCode
-            && <div className="mermaid cursor-pointer h-auto w-full object-fit: cover" onClick={() => setImagePreviewUrl(svgCode)}>
-              {svgCode && <img src={svgCode} alt="mermaid_chart" />}
-            </div>
+        && <div className="mermaid cursor-pointer h-auto w-full object-fit: cover" onClick={() => setImagePreviewUrl(svgCode)}>
+          {svgCode && <img src={svgCode} alt="mermaid_chart" />}
+        </div>
       }
       {isLoading
-            && <div className='py-4 px-[26px]'>
-              <LoadingAnim type='text'/>
-            </div>
+        && <div className='py-4 px-[26px]'>
+          <LoadingAnim type='text' />
+        </div>
       }
       {
         errMsg
-            && <div className='py-4 px-[26px]'>
-              <ExclamationTriangleIcon className='w-6 h-6 text-red-500'/>
-              &nbsp;
-              {errMsg}
-            </div>
+        && <div className='py-4 px-[26px]'>
+          <ExclamationTriangleIcon className='w-6 h-6 text-red-500' />
+          &nbsp;
+          {errMsg}
+        </div>
       }
       {
         imagePreviewUrl && (<ImagePreview title='mermaid_chart' url={imagePreviewUrl} onCancel={() => setImagePreviewUrl('')} />)

web/app/components/develop/code.tsx

@@ -204,8 +204,8 @@ function CodeGroupPanels({ children, targetCode, ...props }: ICodeGroupPanelsPro
 }
 
 function usePreventLayoutShift() {
-  const positionRef = useRef<any>()
-  const rafRef = useRef<any>()
+  const positionRef = useRef<any>(undefined)
+  const rafRef = useRef<any>(undefined)
 
   useEffect(() => {
     return () => {

web/app/components/header/account-setting/model-provider-page/provider-added-card/cooldown-timer.tsx

@@ -19,7 +19,7 @@ const CooldownTimer = ({ secondsRemaining, onFinish }: CooldownTimerProps) => {
     [currentTime],
   )
 
-  const countdownTimeout = useRef<number>(undefined)
+  const countdownTimeout = useRef<number | undefined>(undefined)
   const clearCountdown = useCallback(() => {
     if (countdownTimeout.current) {
       window.clearTimeout(countdownTimeout.current)

web/app/components/share/text-generation/result/index.tsx

@@ -24,7 +24,7 @@ import {
   getFilesInLogs,
 } from '@/app/components/base/file-uploader/utils'
 
-export interface IResultProps {
+export type IResultProps = {
   isWorkflow: boolean
   isCallBatchAPI: boolean
   isPC: boolean
@@ -80,14 +80,14 @@ const Result: FC<IResultProps> = ({
   }, [controlStopResponding])
 
   const [completionRes, doSetCompletionRes] = useState<any>('')
-  const completionResRef = useRef<any>()
+  const completionResRef = useRef<any>(undefined)
   const setCompletionRes = (res: any) => {
     completionResRef.current = res
     doSetCompletionRes(res)
   }
   const getCompletionRes = () => completionResRef.current
   const [workflowProcessData, doSetWorkflowProcessData] = useState<WorkflowProcess>()
-  const workflowProcessDataRef = useRef<WorkflowProcess>()
+  const workflowProcessDataRef = useRef<WorkflowProcess | undefined>(undefined)
   const setWorkflowProcessData = (data: WorkflowProcess) => {
     workflowProcessDataRef.current = data
     doSetWorkflowProcessData(data)

web/app/components/workflow/context.tsx

@@ -11,7 +11,7 @@ type WorkflowProviderProps = {
   children: React.ReactNode
 }
 export const WorkflowContextProvider = ({ children }: WorkflowProviderProps) => {
-  const storeRef = useRef<WorkflowStore>()
+  const storeRef = useRef<WorkflowStore | undefined>(undefined)
 
   if (!storeRef.current)
     storeRef.current = createWorkflowStore()

web/hooks/use-mitt.ts

@@ -43,7 +43,7 @@ const defaultSubcribeOption: UseSubcribeOption = {
 function useMitt<Events extends _Events>(
   mitt?: Emitter<Events>,
 ): UseMittReturn<Events> {
-  const emitterRef = useRef<Emitter<Events>>()
+  const emitterRef = useRef<Emitter<Events> | undefined>(undefined)
   if (!emitterRef.current)
     emitterRef.current = mitt ?? create<Events>()