working move hooks and resize change content

Author: samlhuillier

src/components/Chat/index.tsx

@@ -15,13 +15,20 @@ import { useChatContext } from '@/contexts/ChatContext'
 import StartChat from './StartChat'
 import resolveLLMClient from '@/lib/llm/client'
 import { appendToolCallsAndAutoExecuteTools, convertToolConfigToZodSchema } from '../../lib/llm/tools/utils'
+import useResizeObserver from '@/lib/hooks/use-resize-observer'
 
 const ChatComponent: React.FC = () => {
   const [loadingState, setLoadingState] = useState<LoadingState>('idle')
   const [defaultModelName, setDefaultLLMName] = useState<string>('')
+  const [containerWidth, setContainerWidth] = useState<number>(0)
+  const containerRef = useRef<HTMLDivElement>(null)
   const { currentChat, setCurrentChat, saveChat } = useChatContext()
   const abortControllerRef = useRef<AbortController | null>(null)
 
+  useResizeObserver(containerRef, (entry) => {
+    setContainerWidth(entry.contentRect.width)
+  })
+
   useEffect(() => {
     const fetchDefaultLLM = async () => {
       const defaultName = await window.llm.getDefaultLLMName()
@@ -133,9 +140,17 @@ const ChatComponent: React.FC = () => {
     [saveChat, setCurrentChat],
   )
 
+  // eslint-disable-next-line react/no-unstable-nested-components
+  const CompactChatStart: React.FC = () => (
+    <div className="flex size-full flex-col items-center justify-center p-4">
+      <h3 className="text-lg font-medium">Chat Assistant</h3>
+      <p className="text-sm text-muted-foreground">Please expand the panel to start a new chat</p>
+    </div>
+  )
+
   return (
-    <div className="flex size-full items-center justify-center">
-      <div className="mx-auto flex size-full flex-col overflow-hidden  bg-background">
+    <div ref={containerRef} className="flex size-full items-center justify-center">
+      <div className="mx-auto flex size-full flex-col overflow-hidden bg-background">
         {currentChat && currentChat.messages && currentChat.messages.length > 0 ? (
           <ChatMessages
             currentChat={currentChat}
@@ -146,12 +161,19 @@ const ChatComponent: React.FC = () => {
             }
           />
         ) : (
-          <StartChat
-            defaultModelName={defaultModelName}
-            handleNewChatMessage={(userTextFieldInput?: string, agentConfig?: AgentConfig) =>
-              handleNewChatMessage(undefined, userTextFieldInput, agentConfig)
-            }
-          />
+          // eslint-disable-next-line react/jsx-no-useless-fragment
+          <>
+            {containerWidth > 400 ? (
+              <StartChat
+                defaultModelName={defaultModelName}
+                handleNewChatMessage={(userTextFieldInput?: string, agentConfig?: AgentConfig) =>
+                  handleNewChatMessage(undefined, userTextFieldInput, agentConfig)
+                }
+              />
+            ) : (
+              <CompactChatStart />
+            )}
+          </>
         )}
       </div>
     </div>

src/components/Settings/LLMSettings/InitialSetupLLMSettings.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { CheckCircleIcon, CogIcon } from '@heroicons/react/24/solid'
 import { Button } from '@material-tailwind/react'
-import useLLMConfigs from './hooks/use-llm-configs'
+import useLLMConfigs from '../../../lib/hooks/use-llm-configs'
 import LLMSettingsContent from './LLMSettingsContent'
 import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
 

src/components/Settings/LLMSettings/LLMSettingsContent.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import DefaultLLMSelector from './DefaultLLMSelector'
-import useLLMConfigs from './hooks/use-llm-configs'
+import useLLMConfigs from '../../../lib/hooks/use-llm-configs'
 import SettingsRow from '../Shared/SettingsRow'
 import { Button } from '@/components/ui/button'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'

src/components/WritingAssistant/WritingAssistant.tsx

@@ -4,7 +4,7 @@ import TextField from '@mui/material/TextField'
 import Button from '@mui/material/Button'
 import posthog from 'posthog-js'
 import { streamText } from 'ai'
-import useOutsideClick from './hooks/use-outside-click'
+import useOutsideClick from '../../lib/hooks/use-outside-click'
 import { generatePromptString, getLastMessage } from './utils'
 import { ReorChatMessage } from '../../lib/llm/types'
 import { useFileContext } from '@/contexts/FileContext'

src/contexts/FileContext.tsx

@@ -35,7 +35,7 @@ import { RichTextLink } from '@/components/Editor/RichTextLink'
 import '@/styles/tiptap.scss'
 import SearchAndReplace from '@/components/Editor/Search/SearchAndReplaceExtension'
 import getMarkdown from '@/components/Editor/utils'
-import useOrderedSet from './hooks/use-ordered-set'
+import useOrderedSet from '../lib/hooks/use-ordered-set'
 import welcomeNote from '@/lib/welcome-note'
 
 type FileContextType = {

src/components/Settings/LLMSettings/hooks/use-llm-configs.ts renamed to src/lib/hooks/use-llm-configs.ts

@@ -0,0 +1,20 @@
+import { useEffect, RefObject } from 'react'
+
+const useResizeObserver = (ref: RefObject<HTMLElement>, callback: (entry: ResizeObserverEntry) => void) => {
+  // eslint-disable-next-line consistent-return
+  useEffect(() => {
+    if (ref.current) {
+      const observer = new ResizeObserver((entries) => {
+        callback(entries[0])
+      })
+
+      observer.observe(ref.current)
+
+      return () => {
+        observer.disconnect()
+      }
+    }
+  }, [ref, callback])
+}
+
+export default useResizeObserver