feat(gpt-runner-web): optimize speed

packages/gpt-runner-web/client/src/app.tsx

@@ -1,5 +1,5 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { type ComponentType, type FC, type PropsWithChildren, useEffect } from 'react'
+import { type ComponentType, type FC, type PropsWithChildren, memo, useEffect } from 'react'
 import type { FallbackProps } from 'react-error-boundary'
 import { ErrorBoundary } from 'react-error-boundary'
 import { useTranslation } from 'react-i18next'
@@ -25,7 +25,7 @@ const queryClient = new QueryClient({
 
 initI18n()
 
-const FallbackRender: ComponentType<FallbackProps> = ({ error }) => {
+const FallbackRender: ComponentType<FallbackProps> = memo(({ error }) => {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
 
   return (
@@ -34,9 +34,9 @@ const FallbackRender: ComponentType<FallbackProps> = ({ error }) => {
       <pre style={{ color: 'red' }}>{error.message}</pre>
     </div>
   )
-}
+})
 
-export const AppProviders: FC<PropsWithChildren> = ({ children }) => {
+export const AppProviders: FC<PropsWithChildren> = memo(({ children }) => {
   return (
     <ErrorBoundary FallbackComponent={FallbackRender as any}>
       <QueryClientProvider client={queryClient}>
@@ -47,9 +47,9 @@ export const AppProviders: FC<PropsWithChildren> = ({ children }) => {
       </QueryClientProvider>
     </ErrorBoundary>
   )
-}
+})
 
-export const App: FC = () => {
+export const App: FC = memo(() => {
   const { langId, themeName } = useGlobalStore()
   const { i18n } = useTranslation()
 
@@ -76,4 +76,4 @@ export const App: FC = () => {
       <AppRouter />
     </AppProviders>
   )
-}
+})

packages/gpt-runner-web/client/src/components/chat-message-code-block/index.tsx

@@ -1,4 +1,4 @@
-import type { FC } from 'react'
+import { type FC, memo } from 'react'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { CodeBlockHeader, CodeBlockWrapper } from './chat-message-code-block.styles'
 import { vscodeDarkPlus } from './dark-code-style'
@@ -17,7 +17,7 @@ export interface MessageCodeBlockProps {
   buildCodeToolbar?: (state: BuildCodeToolbarState) => React.ReactNode
 }
 
-export const MessageCodeBlock: FC<MessageCodeBlockProps> = (props) => {
+export const MessageCodeBlock: FC<MessageCodeBlockProps> = memo((props) => {
   const { theme = 'dark', contents, language, buildCodeToolbar } = props
 
   return (
@@ -35,4 +35,6 @@ export const MessageCodeBlock: FC<MessageCodeBlockProps> = (props) => {
       </SyntaxHighlighter>
     </CodeBlockWrapper>
   )
-}
+})
+
+MessageCodeBlock.displayName = 'MessageCodeBlock'

packages/gpt-runner-web/client/src/components/chat-message-input/index.tsx

@@ -1,4 +1,4 @@
-import type { FC } from 'react'
+import { type FC, memo } from 'react'
 import { StyledVSCodeTextArea, ToolbarWrapper, Wrapper } from './chat-message-input.styles'
 
 export interface ChatMessageInputProps {
@@ -7,7 +7,7 @@ export interface ChatMessageInputProps {
   onChange: (value: string) => void
 
 }
-export const ChatMessageInput: FC<ChatMessageInputProps> = (props) => {
+export const ChatMessageInput: FC<ChatMessageInputProps> = memo((props) => {
   const { value = '', toolbarSlot, onChange } = props
 
   return <Wrapper>
@@ -22,4 +22,6 @@ export const ChatMessageInput: FC<ChatMessageInputProps> = (props) => {
       }}
     />
   </Wrapper>
-}
+})
+
+ChatMessageInput.displayName = 'ChatMessageInput'

packages/gpt-runner-web/client/src/components/chat-message-item/index.tsx

@@ -1,4 +1,4 @@
-import type { FC } from 'react'
+import { type FC, memo } from 'react'
 import clsx from 'clsx'
 import type { SingleChatMessage } from '@nicepkg/gpt-runner-shared/common'
 import { ChatMessageStatus, ChatRole } from '@nicepkg/gpt-runner-shared/common'
@@ -19,7 +19,7 @@ export interface MessageItemProps extends SingleChatMessage, Partial<MessageText
   buildMessageToolbar?: (state: BuildMessageToolbarState) => React.ReactNode
 }
 
-export const MessageItem: FC<MessageItemProps> = (props) => {
+export const MessageItem: FC<MessageItemProps> = memo((props) => {
   const {
     name,
     text,
@@ -88,4 +88,6 @@ export const MessageItem: FC<MessageItemProps> = (props) => {
       </MsgContentWrapper>
     </MsgWrapper>
   )
-}
+})
+
+MessageItem.displayName = 'MessageItem'

packages/gpt-runner-web/client/src/components/chat-message-panel/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react'
+import { forwardRef, memo } from 'react'
 import type { MessageItemProps } from '../chat-message-item'
 import { MessageItem } from '../chat-message-item'
 import { Panel } from './chat-message-panel.styles'
@@ -11,7 +11,7 @@ export interface ChatMessagePanelProps {
 export type ChatMessagePanelRef = HTMLDivElement
 
 // Use ForwardRefRenderFunction to define the component with an explicit ref parameter
-export const ChatMessagePanel = forwardRef<ChatMessagePanelRef, ChatMessagePanelProps>((props, ref) => {
+export const ChatMessagePanel = memo(forwardRef<ChatMessagePanelRef, ChatMessagePanelProps>((props, ref) => {
   const { messageItems } = props
 
   return (
@@ -21,4 +21,6 @@ export const ChatMessagePanel = forwardRef<ChatMessagePanelRef, ChatMessagePanel
       })}
     </Panel>
   )
-})
+}))
+
+ChatMessagePanel.displayName = 'ChatMessagePanel'

packages/gpt-runner-web/client/src/components/chat-message-text-view/index.tsx

@@ -1,5 +1,5 @@
 import ReactMarkdown from 'react-markdown'
-import type { FC } from 'react'
+import { type FC, memo } from 'react'
 import remarkGfm from 'remark-gfm'
 import type { PluginOptions } from 'react-markdown/lib/react-markdown'
 import type { MessageCodeBlockProps } from '../chat-message-code-block'
@@ -9,7 +9,7 @@ export interface MessageTextViewProps extends Partial<MessageCodeBlockProps>, Pl
   contents: string
 }
 
-export const MessageTextView: FC<MessageTextViewProps> = (props) => {
+export const MessageTextView: FC<MessageTextViewProps> = memo((props) => {
   const {
     contents,
     remarkPlugins,
@@ -48,4 +48,6 @@ export const MessageTextView: FC<MessageTextViewProps> = (props) => {
       {contents}
     </ReactMarkdown>
   )
-}
+})
+
+MessageTextView.displayName = 'MessageTextView'

packages/gpt-runner-web/client/src/components/drag-resize-view/index.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useRef } from 'react'
+import type { FC } from 'react'
+import { memo, useEffect, useMemo, useRef } from 'react'
 import type { UserDragConfig } from '@use-gesture/react'
 import { useDrag } from '@use-gesture/react'
 import { motion, useMotionValue } from 'framer-motion'
@@ -28,7 +29,7 @@ export interface DragResizeViewProps {
   children: React.ReactNode
 }
 
-export function DragResizeView(props: DragResizeViewProps) {
+export const DragResizeView: FC<DragResizeViewProps> = memo((props) => {
   const {
     initWidth,
     initHeight,
@@ -175,4 +176,6 @@ export function DragResizeView(props: DragResizeViewProps) {
         : null
     })}
   </motion.div>
-}
+})
+
+DragResizeView.displayName = 'DragResizeView'

packages/gpt-runner-web/client/src/components/error-view/index.tsx

@@ -1,4 +1,4 @@
-import type { FC } from 'react'
+import { type FC, memo } from 'react'
 import { styled } from 'styled-components'
 
 export interface ErrorViewProps {
@@ -18,7 +18,7 @@ const ErrorWrapper = styled.div`
   user-select: text;
 `
 
-export const ErrorView: FC<ErrorViewProps> = (props) => {
+export const ErrorView: FC<ErrorViewProps> = memo((props) => {
   const { text } = props
 
   return (
@@ -26,4 +26,6 @@ export const ErrorView: FC<ErrorViewProps> = (props) => {
       {text}
     </ErrorWrapper>
   )
-}
+})
+
+ErrorView.displayName = 'ErrorView'

packages/gpt-runner-web/client/src/components/hook-form/hook-form-input/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import type {
   FieldPath,
   FieldValues,
@@ -24,7 +24,7 @@ export interface HookFormInputProps<
   filterField?: (field: Partial<InputProps>) => Partial<InputProps>
 }
 
-export function HookFormInput<
+export function HookFormInput_<
   TFieldValues extends FieldValues = FieldValues,
 >(props: HookFormInputProps<TFieldValues>) {
   const { label, name, control, rules, errors, filterField, ...otherProps }
@@ -55,3 +55,7 @@ export function HookFormInput<
     />
   )
 }
+
+HookFormInput_.displayName = 'HookFormInput'
+
+export const HookFormInput = memo(HookFormInput_) as typeof HookFormInput_

packages/gpt-runner-web/client/src/components/hook-form/hook-form-select/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import type {
   FieldPath,
   FieldValues,
@@ -32,7 +32,7 @@ export interface HookFormSelectProps<
   filterField?: (field: Partial<SelectProps>) => Partial<SelectProps>
 }
 
-export function HookFormSelect<
+export function HookFormSelect_<
   TFieldValues extends FieldValues = FieldValues,
 >(props: HookFormSelectProps<TFieldValues>) {
   const { label, name, options, control, rules, errors, filterField, ...otherProps }
@@ -71,3 +71,7 @@ export function HookFormSelect<
     />
   )
 }
+
+HookFormSelect_.displayName = 'HookFormSelect'
+
+export const HookFormSelect = memo(HookFormSelect_) as typeof HookFormSelect_

packages/gpt-runner-web/client/src/components/hook-form/hook-form-slider/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import { Controller } from 'react-hook-form'
 import styled from 'styled-components'
 
@@ -34,7 +34,7 @@ interface HookFormSliderProps {
   step?: number
 }
 
-export function HookFormSlider({
+export function HookFormSlider_({
   name,
   control,
   defaultValue = 0,
@@ -62,3 +62,7 @@ export function HookFormSlider({
     />
   )
 }
+
+HookFormSlider_.displayName = 'HookFormSlider'
+
+export const HookFormSlider = memo(HookFormSlider_) as typeof HookFormSlider_

packages/gpt-runner-web/client/src/components/hook-form/hook-form-switch/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import type {
   FieldPath,
   FieldValues,
@@ -23,7 +23,7 @@ export interface HookFormSwitchProps<
   filterField?: (field: Partial<SwitchProps>) => Partial<SwitchProps>
 }
 
-export function HookFormSwitch<
+export function HookFormSwitch_<
   TFieldValues extends FieldValues = FieldValues,
 >(props: HookFormSwitchProps<TFieldValues>) {
   const { label, name, control, rules, errors, filterField, ...otherProps }
@@ -58,3 +58,7 @@ export function HookFormSwitch<
     />
   )
 }
+
+HookFormSwitch_.displayName = 'HookFormSwitch'
+
+export const HookFormSwitch = memo(HookFormSwitch_) as typeof HookFormSwitch_

packages/gpt-runner-web/client/src/components/hook-form/hook-form-textarea/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import type {
   FieldPath,
   FieldValues,
@@ -24,7 +24,7 @@ export interface HookFormTextareaProps<
   filterField?: (field: Partial<TextareaProps>) => Partial<TextareaProps>
 }
 
-export function HookFormTextarea<
+export function HookFormTextarea_<
   TFieldValues extends FieldValues = FieldValues,
 >(props: HookFormTextareaProps<TFieldValues>) {
   const { label, name, control, rules, errors, filterField, ...otherProps }
@@ -55,3 +55,7 @@ export function HookFormTextarea<
     />
   )
 }
+
+HookFormTextarea_.displayName = 'HookFormTextarea'
+
+export const HookFormTextarea = memo(HookFormTextarea_) as typeof HookFormTextarea_

packages/gpt-runner-web/client/src/components/icon-button/index.tsx

@@ -1,6 +1,6 @@
 import { VSCodeButton } from '@vscode/webview-ui-toolkit/react'
 import type { FC } from 'react'
-import { useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useState } from 'react'
 import clsx from 'clsx'
 import type { AnimationProps, Target, Tween } from 'framer-motion'
 import { motion } from 'framer-motion'
@@ -29,7 +29,7 @@ export interface IconButtonProps extends GetComponentProps<InstanceType<typeof V
   buttonStyle?: React.CSSProperties
 }
 
-export const IconButton: FC<IconButtonProps> = (props) => {
+export const IconButton: FC<IconButtonProps> = memo((props) => {
   const {
     text,
     iconClassName,
@@ -118,4 +118,6 @@ export const IconButton: FC<IconButtonProps> = (props) => {
       </FlexRowCenter>
     </VSCodeButton>
   </ButtonWrapper>
-}
+})
+
+IconButton.displayName = 'IconButton'

packages/gpt-runner-web/client/src/components/icon/index.tsx

@@ -1,12 +1,12 @@
 import clsx from 'clsx'
 import type { ComponentProps, FC } from 'react'
-import React from 'react'
+import React, { memo } from 'react'
 
 export interface IconProps extends ComponentProps<'span'> {
   onClick?: (e: React.MouseEvent) => void
 }
 
-export const Icon: FC<IconProps> = (props) => {
+export const Icon: FC<IconProps> = memo((props) => {
   const { className, style, ...restProps } = props
   return (
     <span
@@ -20,4 +20,6 @@ export const Icon: FC<IconProps> = (props) => {
       )}
       {...restProps}
     />)
-}
+})
+
+Icon.displayName = 'Icon'

packages/gpt-runner-web/client/src/components/loading-view/index.tsx

@@ -1,5 +1,5 @@
 import { VSCodeProgressRing } from '@vscode/webview-ui-toolkit/react'
-import type { FC } from 'react'
+import { type FC, memo } from 'react'
 import { styled } from 'styled-components'
 
 const LoadingWrapper = styled.div`
@@ -30,7 +30,7 @@ export interface LoadingViewProps {
   mask?: boolean
 }
 
-export const LoadingView: FC<LoadingViewProps> = (props) => {
+export const LoadingView: FC<LoadingViewProps> = memo((props) => {
   const { style, className, absolute, mask = true } = props
 
   const absoluteStyle: React.CSSProperties = {
@@ -52,6 +52,6 @@ export const LoadingView: FC<LoadingViewProps> = (props) => {
       {mask && <Mask />}
     </LoadingWrapper>
   )
-}
+})
 
 LoadingView.displayName = 'LoadingView'

packages/gpt-runner-web/client/src/components/popover-menu/index.tsx

@@ -1,5 +1,5 @@
 // PopoverMenu.tsx
-import React, { useEffect, useLayoutEffect, useState } from 'react'
+import React, { memo, useEffect, useLayoutEffect, useState } from 'react'
 import { Popover } from 'react-tiny-popover'
 import { useHoverByMouseLocation } from '../../hooks/use-hover.hook'
 import { useSize } from '../../hooks/use-size.hook'
@@ -27,7 +27,7 @@ export interface PopoverMenuProps {
   buildChildrenSlot: (state: PopoverMenuChildrenState) => React.ReactNode
 }
 
-export const PopoverMenu: React.FC<PopoverMenuProps> = (props) => {
+export const PopoverMenu: React.FC<PopoverMenuProps> = memo((props) => {
   const {
     xPosition = 'left',
     yPosition = 'top',
@@ -181,6 +181,6 @@ export const PopoverMenu: React.FC<PopoverMenuProps> = (props) => {
       </ChildrenWrapper>
     </Popover>
   )
-}
+})
 
 PopoverMenu.displayName = 'PopoverMenu'

packages/gpt-runner-web/client/src/components/sidebar/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { memo, useEffect, useState } from 'react'
 import { travelTreeDeepFirst } from '@nicepkg/gpt-runner-shared/common'
 import { useDebounce } from 'react-use'
 import type { TreeProps } from '../tree'
@@ -19,7 +19,7 @@ export interface SidebarProps<OtherInfo extends TreeItemBaseStateOtherInfo = Tre
   buildUnderSearchSlot?: () => React.ReactNode
 }
 
-export function Sidebar<OtherInfo extends TreeItemBaseStateOtherInfo = TreeItemBaseStateOtherInfo>(props: SidebarProps<OtherInfo>) {
+export function Sidebar_<OtherInfo extends TreeItemBaseStateOtherInfo = TreeItemBaseStateOtherInfo>(props: SidebarProps<OtherInfo>) {
   const {
     defaultSearchKeyword = '',
     placeholder,
@@ -101,3 +101,7 @@ export function Sidebar<OtherInfo extends TreeItemBaseStateOtherInfo = TreeItemB
     </SidebarTreeWrapper>
   </SidebarWrapper>
 }
+
+Sidebar_.displayName = 'Sidebar'
+
+export const Sidebar = memo(Sidebar_) as typeof Sidebar_

packages/gpt-runner-web/client/src/components/toast/index.tsx

@@ -1,6 +1,7 @@
+import { memo } from 'react'
 import { Toaster } from 'react-hot-toast'
 
-export const Toast: typeof Toaster = (props) => {
+export const Toast = memo((props) => {
   const { toastOptions, ...otherProps } = props
   return <Toaster
     {...otherProps}
@@ -16,4 +17,6 @@ export const Toast: typeof Toaster = (props) => {
       },
     }}
     {...props} />
-}
+}) as typeof Toaster
+
+Toast.displayName = 'Toast'

packages/gpt-runner-web/client/src/components/tree-item/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { memo, useState } from 'react'
 import type { Variants } from 'framer-motion'
 import { AnimatePresence, motion } from 'framer-motion'
 import { Children, IconWrapper, NameWrapper, TreeItemRow, TreeItemRowLeftSlot, TreeItemRowRightSlot, TreeItemWrapper } from './tree-item.styles'
@@ -29,7 +29,7 @@ export interface TreeItemProps<OtherInfo extends TreeItemBaseStateOtherInfo = Tr
   onContextMenu?: (props: TreeItemState<OtherInfo>) => void
 }
 
-export function TreeItem<OtherInfo extends TreeItemBaseStateOtherInfo = TreeItemBaseStateOtherInfo>(props: TreeItemProps<OtherInfo>) {
+export function TreeItem_<OtherInfo extends TreeItemBaseStateOtherInfo = TreeItemBaseStateOtherInfo>(props: TreeItemProps<OtherInfo>) {
   const { renderLeftSlot, renderRightSlot, onExpand, onCollapse, onClick, onContextMenu, ...baseStateProps } = props
   const {
     name,
@@ -112,7 +112,7 @@ export function TreeItem<OtherInfo extends TreeItemBaseStateOtherInfo = TreeItem
           >
             <Children className='tree-item__children'>
               {children?.map(child => (
-                <TreeItem key={child.id} {...child} />
+                <TreeItem_ key={child.id} {...child} />
               ))}
             </Children>
 
@@ -123,3 +123,7 @@ export function TreeItem<OtherInfo extends TreeItemBaseStateOtherInfo = TreeItem
     </TreeItemWrapper>
   )
 }
+
+TreeItem_.displayName = 'TreeItem'
+
+export const TreeItem = memo(TreeItem_) as typeof TreeItem_

packages/gpt-runner-web/client/src/components/tree/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { memo, useEffect, useState } from 'react'
 import { travelTree } from '@nicepkg/gpt-runner-shared/common'
 import type { TreeItemBaseStateOtherInfo, TreeItemProps } from '../tree-item'
 import { TreeItem } from '../tree-item'
@@ -14,7 +14,7 @@ export interface TreeProps<OtherInfo extends TreeItemBaseStateOtherInfo = TreeIt
   renderTreeItemRightSlot?: TreeItemProps<OtherInfo>['renderRightSlot']
 }
 
-export function Tree<OtherInfo extends TreeItemBaseStateOtherInfo = TreeItemBaseStateOtherInfo>(props: TreeProps<OtherInfo>) {
+export function Tree_<OtherInfo extends TreeItemBaseStateOtherInfo = TreeItemBaseStateOtherInfo>(props: TreeProps<OtherInfo>) {
   const {
     items,
     buildTreeItem,
@@ -70,3 +70,7 @@ export function Tree<OtherInfo extends TreeItemBaseStateOtherInfo = TreeItemBase
     </div>
   )
 }
+
+Tree_.displayName = 'Tree'
+
+export const Tree = memo(Tree_) as typeof Tree_

packages/gpt-runner-web/client/src/pages/chat/components/chat-panel/index.tsx

@@ -1,5 +1,5 @@
 import type { FC, RefObject } from 'react'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { ChatMessageStatus, ChatRole, ClientEventName } from '@nicepkg/gpt-runner-shared/common'
 import { copy } from '@nicepkg/gpt-runner-shared/browser'
 import { useTranslation } from 'react-i18next'
@@ -33,7 +33,7 @@ export interface ChatPanelProps {
   onChatIdChange: (chatId: string) => void
 }
 
-export const ChatPanel: FC<ChatPanelProps> = (props) => {
+export const ChatPanel: FC<ChatPanelProps> = memo((props) => {
   const {
     scrollDownRef,
     chatTreeView,
@@ -474,6 +474,6 @@ export const ChatPanel: FC<ChatPanelProps> = (props) => {
       ></ChatMessageInput>
     </DragResizeView>
   </ChatPanelWrapper>
-}
+})
 
 ChatPanel.displayName = 'ChatPanel'

packages/gpt-runner-web/client/src/pages/chat/components/chat-sidebar/index.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useState } from 'react'
 import type { GptFileInfoTreeItem } from '@nicepkg/gpt-runner-shared/common'
 import { ClientEventName, GptFileTreeItemType } from '@nicepkg/gpt-runner-shared/common'
 import clsx from 'clsx'
@@ -20,7 +20,7 @@ export interface ChatSidebarProps {
 
 export type GptTreeItemOtherInfo = GptFileInfoTreeItem
 
-export const ChatSidebar: FC<ChatSidebarProps> = (props) => {
+export const ChatSidebar: FC<ChatSidebarProps> = memo((props) => {
   const { rootPath } = props
 
   const { t } = useTranslation()
@@ -200,6 +200,6 @@ export const ChatSidebar: FC<ChatSidebarProps> = (props) => {
     return <ErrorView text={t('chat_page.root_path_not_found_tips')}></ErrorView>
 
   return <Sidebar {...sidebar}></Sidebar>
-}
+})
 
 ChatSidebar.displayName = 'ChatSidebar'

packages/gpt-runner-web/client/src/pages/chat/components/file-tree/index.tsx

@@ -1,4 +1,4 @@
-import { type FC, useCallback, useEffect, useRef, useState } from 'react'
+import { type FC, memo, useCallback, useEffect, useRef, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { travelTree, travelTreeDeepFirst } from '@nicepkg/gpt-runner-shared/common'
 import clsx from 'clsx'
@@ -22,7 +22,7 @@ export interface FileTreeProps {
   rootPath: string
 }
 
-const FileTree: FC<FileTreeProps> = (props: FileTreeProps) => {
+export const FileTree: FC<FileTreeProps> = memo((props: FileTreeProps) => {
   const { rootPath } = props
 
   const { t } = useTranslation()
@@ -427,8 +427,6 @@ const FileTree: FC<FileTreeProps> = (props: FileTreeProps) => {
     return <ErrorView text={t('chat_page.root_path_not_found_tips')}></ErrorView>
 
   return <Sidebar {...sidebar}></Sidebar>
-}
+})
 
 FileTree.displayName = 'FileTree'
-
-export default FileTree

packages/gpt-runner-web/client/src/pages/chat/components/init-gpt-files/index.tsx

@@ -1,4 +1,4 @@
-import { type FC, useState } from 'react'
+import { type FC, memo, useState } from 'react'
 import { useMutation } from '@tanstack/react-query'
 import { GPT_RUNNER_OFFICIAL_FOLDER, type MaybePromise, sleep } from '@nicepkg/gpt-runner-shared/common'
 import { Trans, useTranslation } from 'react-i18next'
@@ -14,7 +14,7 @@ export interface InitGptFilesProps {
   onCreated?: () => MaybePromise<void>
 }
 
-export const InitGptFiles: FC<InitGptFilesProps> = (props) => {
+export const InitGptFiles: FC<InitGptFilesProps> = memo((props) => {
   const { rootPath, onCreated } = props
 
   const { t } = useTranslation()
@@ -72,6 +72,6 @@ export const InitGptFiles: FC<InitGptFilesProps> = (props) => {
       onClick={handleCreate}>{t('chat_page.confirm_create_btn')}</VSCodeButton>
     {isLoading && <LoadingView absolute></LoadingView>}
   </Wrapper>
-}
+})
 
 InitGptFiles.displayName = 'InitGptFiles'

packages/gpt-runner-web/client/src/pages/chat/components/settings/components/general/index.tsx

@@ -1,4 +1,4 @@
-import { type FC, useEffect } from 'react'
+import { type FC, memo, useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import type { LocaleLang } from '@nicepkg/gpt-runner-shared/common'
@@ -14,7 +14,7 @@ export interface FormData {
   themeName: ThemeName
 }
 
-export const GeneralSettings: FC = () => {
+export const GeneralSettings: FC = memo(() => {
   const { t } = useTranslation()
   const { langId, themeName, updateLangId, updateThemeName } = useGlobalStore()
 
@@ -80,4 +80,6 @@ export const GeneralSettings: FC = () => {
       />
     </StyledFormItem>
   </StyledForm>
-}
+})
+
+GeneralSettings.displayName = 'GeneralSettings'

packages/gpt-runner-web/client/src/pages/chat/components/settings/components/openai-setting/index.tsx

@@ -1,6 +1,6 @@
 import { ChatModelType, type OpenaiSecrets, ServerStorageName } from '@nicepkg/gpt-runner-shared/common'
 import { useMutation, useQuery } from '@tanstack/react-query'
-import { type FC, useEffect } from 'react'
+import { type FC, memo, useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 import { VSCodeButton, VSCodeLink } from '@vscode/webview-ui-toolkit/react'
 import { useTranslation } from 'react-i18next'
@@ -16,7 +16,7 @@ export interface FormData extends Pick<OpenaiSecrets, 'apiKey' | 'accessToken' |
 
 }
 
-export const OpenaiSettings: FC = () => {
+export const OpenaiSettings: FC = memo(() => {
   const { t } = useTranslation()
   const { setLoading } = useLoading()
   const { data: querySecretsRes } = useQuery({
@@ -109,4 +109,6 @@ export const OpenaiSettings: FC = () => {
       {IS_LOCAL_HOST ? t('chat_page.save_btn') : t('chat_page.disabled_save_openai_config_btn')}
     </VSCodeButton>
   </StyledForm>
-}
+})
+
+OpenaiSettings.displayName = 'OpenaiSettings'

packages/gpt-runner-web/client/src/pages/chat/components/settings/index.tsx

@@ -1,4 +1,4 @@
-import { type CSSProperties, type FC, useMemo, useState } from 'react'
+import { type CSSProperties, type FC, memo, useMemo, useState } from 'react'
 import { VSCodePanelTab, VSCodePanelView } from '@vscode/webview-ui-toolkit/react'
 import { useTranslation } from 'react-i18next'
 import { StyledVSCodePanels } from '../../chat.styles'
@@ -22,7 +22,7 @@ export interface SettingsProps {
   chatId?: string
 }
 
-export const Settings: FC<SettingsProps> = (props) => {
+export const Settings: FC<SettingsProps> = memo((props) => {
   const { showSingleFileConfig, chatId } = props
 
   const { t } = useTranslation()
@@ -101,6 +101,6 @@ export const Settings: FC<SettingsProps> = (props) => {
       </FlexColumn>
     </VSCodePanelView>
   </StyledVSCodePanels>
-}
+})
 
 Settings.displayName = 'Settings'

packages/gpt-runner-web/client/src/pages/chat/index.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties, FC } from 'react'
-import { useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useState } from 'react'
 import { VSCodePanelTab, VSCodePanelView } from '@vscode/webview-ui-toolkit/react'
 import { ChatMessageStatus } from '@nicepkg/gpt-runner-shared/common'
 import { useWindowSize } from 'react-use'
@@ -17,7 +17,7 @@ import { fetchProjectInfo } from '../../networks/config'
 import { SidebarWrapper, StyledVSCodePanels } from './chat.styles'
 import { ChatSidebar } from './components/chat-sidebar'
 import { ChatPanel } from './components/chat-panel'
-import FileTree from './components/file-tree'
+import { FileTree } from './components/file-tree'
 import { Settings } from './components/settings'
 import { InitGptFiles } from './components/init-gpt-files'
 
@@ -27,7 +27,7 @@ enum TabId {
   Settings = 'settings',
 }
 
-const Chat: FC = () => {
+const Chat: FC = memo(() => {
   const { t } = useTranslation()
   const isMobile = useIsMobile()
   const { width: windowWidth, height: windowHeight } = useWindowSize()
@@ -191,7 +191,7 @@ const Chat: FC = () => {
 
     {renderChat()}
   </>
-}
+})
 
 Chat.displayName = 'Chat'
 

packages/gpt-runner-web/client/src/pages/error/404.tsx

@@ -1,8 +1,8 @@
-import type { FC } from 'react'
+import { type FC, memo } from 'react'
 
-const Error404: FC = () => {
+const Error404: FC = memo(() => {
   return <>404</>
-}
+})
 
 Error404.displayName = 'Error404'
 

packages/gpt-runner-web/client/src/pages/home/index.tsx

@@ -1,8 +1,8 @@
-import type { FC } from 'react'
+import { type FC, memo } from 'react'
 
-const Home: FC = () => {
+const Home: FC = memo(() => {
   return <></>
-}
+})
 
 Home.displayName = 'Home'
 

playground/scripts/gpt/best.gpt.md

@@ -0,0 +1,53 @@
+```json
+{
+  "title": "common/",
+  "model": {
+    "type": "openai",
+    "modelName": "gpt-3.5-turbo-16k",
+    "temperature": 0.5
+  }
+}
+```
+
+# System Prompt
+
+## Algorithm Overview
+
+The optimization algorithm follows the SOLID, KISS, and DRY principles, which are as follows:
+
+### SOLID
+
+- **Single Responsibility Principle (SRP):** Each module or class should have a single responsibility.
+- **Open-Closed Principle (OCP):** Modules or classes should be open for extension but closed for modification.
+- **Liskov Substitution Principle (LSP):** Objects of a superclass should be replaceable with objects of its subclasses without affecting the correctness of the program.
+- **Interface Segregation Principle (ISP):** Clients should not be forced to depend on interfaces they do not use.
+- **Dependency Inversion Principle (DIP):** High-level modules should not depend on low-level modules. Both should depend on abstractions.
+
+### KISS
+
+- **Keep It Simple, Stupid (KISS):** Keep the code simple, straightforward, and easy to understand.
+
+### DRY
+
+- **Don't Repeat Yourself (DRY):** Avoid duplicating code by using abstractions, functions, and modules to encapsulate common functionality.
+
+## Performance Optimization
+
+The optimization algorithm focuses on improving the performance of the code through the following techniques:
+
+1. **Algorithmic Efficiency:** Analyzing and optimizing algorithms for better time and space complexity.
+2. **Data Structures:** Using appropriate data structures that provide efficient access and manipulation.
+3. **Caching:** Implementing caching mechanisms to avoid redundant calculations or data retrieval.
+4. **Parallelization:** Utilizing parallel processing or multi-threading to execute tasks concurrently.
+5. **Optimized Libraries:** Utilizing optimized libraries and frameworks for specific tasks.
+
+## Conclusion
+
+This optimization algorithm follows the SOLID, KISS, and DRY principles to improve efficiency and performance in various applications. By considering algorithmic efficiency, data structures, caching, parallelization, and utilizing optimized libraries, developers can achieve better performance in their projects.
+
+
+# User Prompt
+
+please follow my files to help me, my request is:
+
+