From 9874453f92158f4413e04ff0841ad7e3132efdc1 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 2 Nov 2024 19:27:51 +0000
Subject: [PATCH] working move hooks and resize change content

---
 src/components/Chat/index.tsx                 | 38 +++++++++++++++----
 .../LLMSettings/InitialSetupLLMSettings.tsx   |  2 +-
 .../LLMSettings/LLMSettingsContent.tsx        |  2 +-
 .../WritingAssistant/WritingAssistant.tsx     |  2 +-
 src/contexts/FileContext.tsx                  |  2 +-
 .../hooks/use-llm-configs.ts                  |  0
 .../hooks/use-ordered-set.tsx                 |  0
 .../hooks/use-outside-click.ts                |  0
 src/lib/hooks/use-resize-observer.tsx         | 20 ++++++++++
 9 files changed, 54 insertions(+), 12 deletions(-)
 rename src/{components/Settings/LLMSettings => lib}/hooks/use-llm-configs.ts (100%)
 rename src/{contexts => lib}/hooks/use-ordered-set.tsx (100%)
 rename src/{components/WritingAssistant => lib}/hooks/use-outside-click.ts (100%)
 create mode 100644 src/lib/hooks/use-resize-observer.tsx

diff --git a/src/components/Chat/index.tsx b/src/components/Chat/index.tsx
index 56c1a663..2d576f16 100644
--- a/src/components/Chat/index.tsx
+++ b/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>
diff --git a/src/components/Settings/LLMSettings/InitialSetupLLMSettings.tsx b/src/components/Settings/LLMSettings/InitialSetupLLMSettings.tsx
index 7c28a917..80f2eb27 100644
--- a/src/components/Settings/LLMSettings/InitialSetupLLMSettings.tsx
+++ b/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'
 
diff --git a/src/components/Settings/LLMSettings/LLMSettingsContent.tsx b/src/components/Settings/LLMSettings/LLMSettingsContent.tsx
index 9bfee766..63f1750c 100644
--- a/src/components/Settings/LLMSettings/LLMSettingsContent.tsx
+++ b/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'
diff --git a/src/components/WritingAssistant/WritingAssistant.tsx b/src/components/WritingAssistant/WritingAssistant.tsx
index fe9a5672..a9eb4778 100644
--- a/src/components/WritingAssistant/WritingAssistant.tsx
+++ b/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'
diff --git a/src/contexts/FileContext.tsx b/src/contexts/FileContext.tsx
index 2a42c040..63877b1c 100644
--- a/src/contexts/FileContext.tsx
+++ b/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 = {
diff --git a/src/components/Settings/LLMSettings/hooks/use-llm-configs.ts b/src/lib/hooks/use-llm-configs.ts
similarity index 100%
rename from src/components/Settings/LLMSettings/hooks/use-llm-configs.ts
rename to src/lib/hooks/use-llm-configs.ts
diff --git a/src/contexts/hooks/use-ordered-set.tsx b/src/lib/hooks/use-ordered-set.tsx
similarity index 100%
rename from src/contexts/hooks/use-ordered-set.tsx
rename to src/lib/hooks/use-ordered-set.tsx
diff --git a/src/components/WritingAssistant/hooks/use-outside-click.ts b/src/lib/hooks/use-outside-click.ts
similarity index 100%
rename from src/components/WritingAssistant/hooks/use-outside-click.ts
rename to src/lib/hooks/use-outside-click.ts
diff --git a/src/lib/hooks/use-resize-observer.tsx b/src/lib/hooks/use-resize-observer.tsx
new file mode 100644
index 00000000..2c36fec6
--- /dev/null
+++ b/src/lib/hooks/use-resize-observer.tsx
@@ -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