Repository: TabbyML/tabby
File: ee/tabby-ui/app/chat/page.tsx (TypeScript)

Code before:
    if (chatRef.current) {
      chatRef.current.sendUserChat(message)
    } else {
      const newPendingMessages = [...pendingMessages]
      newPendingMessages.push(message)
      setPendingMessages(newPendingMessages)
    }
  }

  const addRelevantContext = (ctx: Context) => {
    if (chatRef.current) {
      chatRef.current.addRelevantContext(ctx)
    } else {
      const newPendingRelevantContexts = [...pendingRelevantContexts]
      newPendingRelevantContexts.push(ctx)
      setPendingRelevantContexts(newPendingRelevantContexts)
    }
  }

  const server = useServer({
    init: (request: InitRequest) => {
      if (chatRef.current) return
      setActiveChatId(nanoid())
      setIsInit(true)
      setFetcherOptions(request.fetcherOptions)
      setFocusKeyBinding(request.focusKey)
    },
    sendMessage: (message: ChatMessage) => {
      return sendMessage(message)
    },
    showError: (errorMessage: ErrorMessage) => {
      setErrorMessage(errorMessage)
    },
    cleanError: () => {
      setErrorMessage(null)
    },
    addRelevantContext: context => {
      return addRelevantContext(context)
    },
    updateTheme: (style, themeClass) => {
      const styleWithHslValue = style
        .split(';')
        .filter((style: string) => style)
        .map((style: string) => {
          const [key, value] = style.split(':')
          const styleValue = value.trim()
          const isColorValue =
            styleValue.startsWith('#') || styleValue.startsWith('rgb')
          if (!isColorValue) return `${key}: ${value}`
          const hslValue = convertToHSLColor(styleValue)
          return `${key}: ${hslValue}`

Review comment (suggestion):
```suggestion
      focusKeyBinding.current = request.focusKey
```

Code after:
  const focusKeybinding = useRef<FocusKeybinding>()

  const sendMessage = (message: ChatMessage) => {
    if (chatRef.current) {
      chatRef.current.sendUserChat(message)
    } else {
      const newPendingMessages = [...pendingMessages]
      newPendingMessages.push(message)
      setPendingMessages(newPendingMessages)
    }
  }

  const addRelevantContext = (ctx: Context) => {
    if (chatRef.current) {
      chatRef.current.addRelevantContext(ctx)
    } else {
      const newPendingRelevantContexts = [...pendingRelevantContexts]
      newPendingRelevantContexts.push(ctx)
      setPendingRelevantContexts(newPendingRelevantContexts)
    }
  }

  const server = useServer({
    init: (request: InitRequest) => {
      if (chatRef.current) return

      // save fetcherOptions to sessionStorage
      if (client) {
        saveFetcherOptions(request.fetcherOptions)
      }

      setActiveChatId(nanoid())
      setIsInit(true)
      setFetcherOptions(request.fetcherOptions)
      focusKeybinding.current = request.focusKey
    },
    sendMessage: (message: ChatMessage) => {
      return sendMessage(message)
    },
    showError: (errorMessage: ErrorMessage) => {
      setErrorMessage(errorMessage)
    },
    cleanError: () => {
      setErrorMessage(null)
    },
    addRelevantContext: context => {
      return addRelevantContext(context)
    },
    updateTheme: (style, themeClass) => {
      const styleWithHslValue = style
        .split(';')