chore(condo): DOMA-13010 Hide UseDeskWidget.tsx when AI Overlay is open + upgrade AI Overlay visuals a bit (#7293)

* chore(condo): DOMA-13010 Hide UseDeskWidget.tsx when AI Overlay is open + upgrade AI Overlay visuals a bit

* fix(condo): DOMA-13010 fix linter related issues

* fix(condo): DOMA-13010 fixes on review

* fix(condo): DOMA-13010 fixes on review

Author: toplenboren

apps/condo/domains/ai/components/AIContext.tsx

@@ -21,15 +21,15 @@ export const useAIContext = () => {
 }
 
 export const AIProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+    const storage = new LocalStorageManager<number>()
+    
     const [isAIOverlayOpen, setIsAIOverlayOpen] = useState(false)
     const [aiOverlayWidth, setAIOverlayWidthState] = useState(() => {
-        const storage = new LocalStorageManager<number>()
         return storage.getItem('aiOverlayWidth') || 600
     })
 
     const setAIOverlayWidth = (width: number) => {
         setAIOverlayWidthState(width)
-        const storage = new LocalStorageManager<number>()
         storage.setItem('aiOverlayWidth', width)
     }
 

apps/condo/domains/ai/components/AIOverlay/AIOverlay.module.css

@@ -64,6 +64,9 @@
   top: 0;
   left: 0;
   z-index: 1001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 4px;
   height: 100%;
   background: transparent;
@@ -81,6 +84,14 @@
   border-left: 2px solid var(--condo-global-color-green-5);
 }
 
+.resize-handle.at-min-width {
+  cursor: w-resize;
+}
+
+.resize-handle.at-max-width {
+  cursor: e-resize;
+}
+
 /* Content area */
 .content {
   display: flex;

apps/condo/domains/ai/components/AIOverlay/AIOverlay.tsx

@@ -1,3 +1,4 @@
+import classnames from 'classnames'
 import React, { useState, useRef, useEffect } from 'react'
 
 import { Close, RefreshCw, Download } from '@open-condo/icons'
@@ -6,22 +7,30 @@ import { Button, Typography } from '@open-condo/ui'
 
 import styles from './AIOverlay.module.css'
 
-import { AIChat } from '../AIChat/AIChat'
+import { AIChat } from '../AIChat'
 import { useAIContext } from '../AIContext'
 
 type AIOverlayProps = {
     open: boolean
     onClose: () => void
 }
 
+const MIN_OVERLAY_WIDTH = 300
+const MAX_OVERLAY_WIDTH = 1200
+const CLOSE_THRESHOLD = MIN_OVERLAY_WIDTH / 2
+
 export const AIOverlay: React.FC<AIOverlayProps> = ({ open, onClose }) => {
     const intl = useIntl()
     const title = intl.formatMessage({ id: 'ai.chat.title' })
     const resetHistoryLabel = intl.formatMessage({ id: 'ai.chat.resetHistory' })
     const saveConversationLabel = intl.formatMessage({ id: 'ai.chat.saveConversation' })
     const closeLabel = intl.formatMessage({ id: 'Close' })
-    const { aiOverlayWidth, setAIOverlayWidth } = useAIContext()
+    const { aiOverlayWidth, setAIOverlayWidth, openAIOverlay } = useAIContext()
     const [isResizing, setIsResizing] = useState(false)
+    const [isAtMinWidth, setIsAtMinWidth] = useState(false)
+    const [isAtMaxWidth, setIsAtMaxWidth] = useState(false)
+    const [dragDirection, setDragDirection] = useState<'left' | 'right' | null>(null)
+    const dragDirectionRef = useRef<'left' | 'right' | null>(null)
     const drawerRef = useRef<HTMLDivElement>(null)
     const startXRef = useRef<number>(0)
     const startWidthRef = useRef<number>(0)
@@ -32,12 +41,35 @@ export const AIOverlay: React.FC<AIOverlayProps> = ({ open, onClose }) => {
             if (!isResizing) return
 
             const newWidth = startWidthRef.current + (startXRef.current - e.clientX)
-            const clampedWidth = Math.max(300, Math.min(1200, newWidth))
+            const currentDirection = e.clientX > startXRef.current ? 'right' : 'left'
+            dragDirectionRef.current = currentDirection
+            setDragDirection(currentDirection)
+            
+            // Normal resizing when open
+            const clampedWidth = Math.max(MIN_OVERLAY_WIDTH, Math.min(MAX_OVERLAY_WIDTH, newWidth))
+            
+            // Check if we're at minimum or maximum width
+            setIsAtMinWidth(clampedWidth <= MIN_OVERLAY_WIDTH)
+            setIsAtMaxWidth(clampedWidth >= MAX_OVERLAY_WIDTH)
+            
+            // Only close if dragging right consistently and beyond close threshold
+            if (newWidth < CLOSE_THRESHOLD && dragDirectionRef.current === 'right' && currentDirection === 'right') {
+                onClose()
+                return
+            }
+            
+            // Open overlay if dragging left consistently and crosses open threshold
+            if (newWidth > CLOSE_THRESHOLD && dragDirectionRef.current === 'left' && currentDirection === 'left') {
+                openAIOverlay()
+            }
+            
             setAIOverlayWidth(clampedWidth)
         }
 
         const handleMouseUp = () => {
             setIsResizing(false)
+            setDragDirection(null)
+            dragDirectionRef.current = null
         }
 
         if (isResizing) {
@@ -53,9 +85,12 @@ export const AIOverlay: React.FC<AIOverlayProps> = ({ open, onClose }) => {
             document.body.style.cursor = ''
             document.body.style.userSelect = ''
         }
-    }, [isResizing, setAIOverlayWidth])
+    }, [isResizing, dragDirection, setAIOverlayWidth, onClose])
 
     const handleResizeStart = (e: React.MouseEvent) => {
+        // Only allow resizing when overlay is open
+        if (!open) return
+        
         setIsResizing(true)
         startXRef.current = e.clientX
         startWidthRef.current = aiOverlayWidth
@@ -103,7 +138,10 @@ export const AIOverlay: React.FC<AIOverlayProps> = ({ open, onClose }) => {
                     />
                 </div>
             </div>
-            <div className={styles.resizeHandle} onMouseDown={handleResizeStart} />
+            <div className={classnames(styles.resizeHandle, {
+                [styles.atMinWidth]: isAtMinWidth,
+                [styles.atMaxWidth]: isAtMaxWidth,
+            })} onMouseDown={handleResizeStart} />
             <div className={styles.content}>
                 <AIChat 
                     ref={aiChatRef}

apps/condo/domains/common/components/UseDeskWidget.tsx

@@ -3,8 +3,7 @@ import get from 'lodash/get'
 import isFunction from 'lodash/isFunction'
 import set from 'lodash/set'
 import getConfig from 'next/config'
-import React, { useEffect, useMemo } from 'react'
-
+import React, { useEffect, useMemo, useState } from 'react'
 
 import { useAuth } from '@open-condo/next/auth'
 import { useOrganization } from '@open-condo/next/organization'
@@ -26,7 +25,8 @@ const getUsedeskMessenger = () => {
     return get(window, 'usedeskMessenger', null)
 }
 
-const UseDeskWidget: React.FC = () => {
+const UseDeskWidget: React.FC<{ hide?: boolean }> = ({ hide = false }) => {
+    const [isWidgetScriptLoaded, setIsWidgetScriptLoaded] = useState(false)
     const { link } = useOrganization()
     const { user } = useAuth()
 
@@ -97,7 +97,29 @@ const UseDeskWidget: React.FC = () => {
         }
     }, [link, userIdentify, user, messenger])
 
-    return UseDeskWidgetId ?
-        <script async src={`//lib.usedesk.ru/secure.usedesk.ru/${UseDeskWidgetId}.js`}></script> : null
+    useEffect(() => {
+        if (!UseDeskWidgetId || !isWidgetScriptLoaded) return
+
+        const messenger = getUsedeskMessenger()
+        if (!messenger) return
+
+        try {
+            if (hide) {
+                messenger.toggle(false)
+            } else {
+                messenger.toggle(true)
+            }
+        } catch (e) {
+            console.error('Failed to toggle UseDesk widget visibility', e)
+        }
+    }, [hide, isWidgetScriptLoaded])
+
+    return UseDeskWidgetId ? (
+        <script
+            async
+            src={`//lib.usedesk.ru/secure.usedesk.ru/${UseDeskWidgetId}.js`}
+            onLoad={() => setIsWidgetScriptLoaded(true)}
+        />
+    ) : null
 }
 export default UseDeskWidget

apps/condo/pages/_app.tsx

@@ -126,6 +126,12 @@ const AIOverlayWrapper = () => {
     return <AIOverlay open={isAIOverlayOpen} onClose={closeAIOverlay} />
 }
 
+const UseDeskWidgetWrapper = () => {
+    const { isAIOverlayOpen } = useAIContext()
+    
+    return <UseDeskWidget hide={isAIOverlayOpen} />
+}
+
 
 const { publicRuntimeConfig: { defaultLocale, sppConfig, isDisabledSsr } } = getConfig()
 
@@ -569,12 +575,12 @@ const MyApp = ({ Component, pageProps }) => {
                             </HCaptchaProvider>
                             {!isSnowfallDisabled && <Snowfall />}
                             <AIOverlayWrapper />
+                            {UseDeskWidgetId && <UseDeskWidgetWrapper />}
                         </LayoutContextProvider>
                     </AIProvider>
                     {yandexMetrikaID && <YandexMetrika />}
                     {googleTagManagerId && <GoogleTagManager />}
                     {!isEmpty(popupSmartConfig) && <PopupSmart />}
-                    {UseDeskWidgetId && <UseDeskWidget/>}
                 </CacheProvider>
             </ConfigProvider>
         </>