@@ -43,18 +43,6 @@ async function getModels(token?: string): Promise<ShortModel[]> {
 	}
 }
 
-type LangParam<T extends boolean> = T extends true ? LangFull : LangShort
-
-type LangReturn<T extends boolean> = T extends true ? LangShort : LangFull
-
-const convertLang = <T extends boolean>(toShort: T, lang: LangParam<T>): LangReturn<T> => {
-	const arrLang = Object.entries(languages) as [LangFull, LangShort][]
-	if (toShort) {
-		return arrLang.find(([key]) => lang === key)![1] as LangReturn<T>
-	}
-	return arrLang.find(([_, value]) => lang === value)![0] as LangReturn<T>
-}
-
 const InfoBar: React.FC<InfoBarProps> = ({ device }) => {
 	const theme = useAppSelector((state) => state.theme.theme)
 
@@ -72,16 +60,6 @@ const InfoBar: React.FC<InfoBarProps> = ({ device }) => {
 
 	const dispatch = useAppDispatch()
 
-	const [search, setSearch] = useState<string>('')
-
-	const [searchOpen, setSearchOpen] = useState(false)
-
-	const [models, setModels] = useState<ShortModel[]>([])
-
-	useEffect(() => {
-		getModels(data?.access).then((res) => setModels(res))
-	}, [data?.access])
-
 	const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null)
 
 	const [anchorEl2, setAnchorEl2] = React.useState<HTMLButtonElement | null>(null)
@@ -90,10 +68,6 @@ const InfoBar: React.FC<InfoBarProps> = ({ device }) => {
 		setAnchorEl(event.currentTarget)
 	}
 
-	const handleClick2 = (event: React.MouseEvent<HTMLButtonElement>) => {
-		setAnchorEl2(event.currentTarget)
-	}
-
 	const handleClose = () => {
 		setAnchorEl(null)
 	}
@@ -1,153 +0,0 @@
-import React, { useState } from 'react'
-import { Box } from '@mui/material'
-import { ThemeProvider } from '@mui/material/styles'
-import Head from 'next/head'
-import { useRouter } from 'next/router'
-import { useSession } from 'next-auth/react'
-
-import { getUserBalance } from '#/entities/balance'
-import { useTheme } from '#/entities/theme'
-import { getAllInfo } from '#/entities/user-account'
-import { isSettingExist } from '#/entities/user-account/lib/helpers/is-setting-exist'
-import { getUserAccountSettings, setSettings } from '#/entities/user-account/model/settings'
-import InfoBar from '#/app/layout/ui/info-bar'
-import { useAppDispatch, useAppSelector } from '#/app/store/store'
-import { Loader } from '#/shared'
-import { pingFangFont } from '#/shared/lib/constants/font/font'
-import { Device } from '#/shared/lib/types/entities'
-import { MainMenuMobile } from '#/widgets/main-menu'
-import { SideMenu } from '#/widgets/side-menu'
-import { getDeviceType } from '#/shared/lib/helpers'
-
-const freeRoutes = ['/login', '/register', '/reset', '/change-password']
-
-interface Props {
-	children: React.ReactNode
-	titlePage: string
-	isAuthPage?: boolean
-	title?: string | React.ReactNode | null
-	isLoader?: boolean
-}
-
-export const Layout: React.FC<Props> = ({ children, isAuthPage = false, titlePage, title = titlePage, isLoader }) => {
-	const { data: sessionData } = useSession()
-	const appState = useAppSelector((state) => state)
-	const dispatch = useAppDispatch()
-
-	const device = getDeviceType()
-
-	const desktop = device === 'desktop'
-
-	const [sidemenuDefaultOpen, setSidemenuDefaultOpen] = useState(true)
-
-	useTheme()
-
-	const { data, status } = useSession()
-
-	const router = useRouter()
-
-	React.useEffect(() => {
-		dispatch(getUserBalance(data?.access))
-		dispatch(getAllInfo(data?.access))
-	}, [data])
-
-	React.useEffect(() => {
-		if (
-			(sessionData && !sessionStorage.getItem('firstRender')) ||
-			(sessionData && !localStorage.getItem('global_settings'))
-		) {
-			dispatch(getUserAccountSettings(sessionData.access))
-			sessionStorage.setItem('firstRender', 'true')
-		}
-	}, [sessionData])
-
-	React.useEffect(() => {
-		const lsData = localStorage.getItem('global_settings')
-		if (lsData !== null) {
-			dispatch(setSettings(JSON.parse(lsData)))
-		}
-
-		window.addEventListener('beforeunload', () => {
-			sessionStorage.removeItem('firstRender')
-			sessionStorage.clear()
-		})
-	}, [])
-
-	React.useEffect(() => {
-		if (appState.settings.state !== null && device) {
-			let setting = isSettingExist({
-				settings: appState.settings.state,
-				targetDevice: device,
-				targetType: 'sidemenu',
-			})
-			if (setting)
-				setting?.value?.sidemenu_state === 'opened'
-					? setSidemenuDefaultOpen(true)
-					: setSidemenuDefaultOpen(false)
-		}
-	}, [appState.settings.state])
-
-	if (status === 'loading' || isLoader) {
-		return (
-			<Box width='100vw' height='100vh' display='flex' alignItems='center' justifyContent='center'>
-				<Loader size={50} />
-			</Box>
-		)
-	}
-
-	return (
-		<>
-			<Head>
-				<title>{titlePage}</title>
-				<meta name='AIR' />
-				<meta name='viewport' content='width=device-width, initial-scale=1' />
-				<link rel='icon' href='/logo.svg' />
-				<link rel='apple-touch-icon' href='/logo180.png'></link>
-				<link rel='manifest' href='/manifest.json' />
-			</Head>
-			<Box
-				id={'layout'}
-				sx={{
-					width: '100%',
-					height: desktop ? '100%' : '100vh',
-					padding: isAuthPage ? '0px' : desktop ? '0px' : '10px',
-				}}
-			>
-				<Box
-					sx={{
-						padding: desktop ? '0px' : '1px',
-					}}
-				>
-					<ThemeProvider theme={pingFangFont}>
-						{!isAuthPage ? (
-							desktop ? (
-								<Box display='flex' justifyContent='center'>
-									<SideMenu device={device} sidemenuDefaultOpen={sidemenuDefaultOpen} />
-									<Box
-										width='100%'
-										sx={{
-											padding: '5px 0px 0px 70px',
-											overflowX: 'hidden',
-										}}
-									>
-										<InfoBar device={device} token={''} />
-										<Box sx={{ paddingBottom: '15px' }} width='100%'>
-											{children}
-										</Box>
-									</Box>
-								</Box>
-							) : (
-								<Box>
-									<MainMenuMobile />
-									{children}
-								</Box>
-							)
-						) : (
-							<>{children}</>
-						)}
-					</ThemeProvider>
-				</Box>
-			</Box>
-		</>
-	)
-}
@@ -8,6 +8,8 @@ import { useChatBot } from '#/entities/model-entity'
 import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
 import { useChatBotMessages } from './chat-bot-messages.store'
 import { useCurrentChat } from '#/features/chats'
+import { useModelInputStore } from '#/features/model-input/model'
+import { useChatWindowContext } from '#/widgets/chat-window/model'
 
 export function useUserMessageActions(message: Message) {
 	const includeParams = useAppSelector((state) => state.params.params)
@@ -16,35 +18,29 @@ export function useUserMessageActions(message: Message) {
 
 	const { currentChat } = useCurrentChat()
 
-	const { setMessages, setLoading } = useChatBotMessages()
+  const {setFile, setValueInput} = useChatWindowContext()
 
 	const { inference } = useChatBot()
 
-	const resend = makePrivateRequest(async () => {
+	const resend = async () => {
 		if (!currentChat || !inference) return
 
 		const { file, content } = message
 
-		const request: MessageSend = {
-			content,
-			info: { ...includeParams, inference: inference.slug },
+		if (!content && !file) {
+			return showMessage('Нет данных для повторной отправки сообщения')
+		}
+		if (file && typeof file === 'string') {
+			const newFile = await getBlobFromUrl(file)
+			setFile(newFile ? newFile : null)
+		} else if (file && file instanceof File) {
+			setFile(file)
+		} else {
+			setFile(null)
 		}
 
-		if (file) request.file = await getBlobFromUrl(file as string)
-
-		setLoading(true)
-
-		const { data, status } = await postMessage(currentChat, request)
-
-		setLoading(false)
-
-		if (status !== 201)
-			return showMessage(`Ошибка при повторной отправке сообщений, повторите позже`)
-
-		const { messages } = useChatBotMessages.getState()
-
-		setMessages([...messages.filter((m) => m.uid !== 'new-send'), ...(data as Message[])])
-	})
+		setValueInput(content)
+	}
 
 	return {
 		resend,
@@ -33,7 +33,10 @@ export const BotMessage = memo(
 			const popup = getPopupById(message.uid)
 
 			return (
-				<div ref={ref} className={styles.message}>
+				<div
+					ref={ref}
+					className={styles.message}
+				>
 					<div className={styles.message__avatar}>
 						<AvatarSvg width={36} height={36} />
 					</div>
@@ -0,0 +1 @@
+export * from './settings.routes'
\ No newline at end of file
@@ -0,0 +1,16 @@
+import { api } from '#/shared/api'
+import { API_URL } from '#/shared/lib/constants'
+import { Agent } from 'https'
+import { IUserSetting } from '../model/types'
+
+export function getUserSettings() {
+	return api.get<IUserSetting[]>('/api/users/settings/')
+}
+
+export function postUserSettings(option: Omit<IUserSetting, 'id'>) {
+	return api.post<IUserSetting>('/api/users/settings/', option)
+}
+
+export function updateUserSettings(id: string, value: any) {
+	return api.put<IUserSetting>(`/api/users/settings/${id}`, { value })
+}
@@ -0,0 +1,2 @@
+export * from './settings-context'
+export * from './use-global-settings'
\ No newline at end of file
@@ -0,0 +1,9 @@
+import { createUseContext } from '#/shared'
+import { createContext } from 'react'
+import { useGlobalSettings } from './use-global-settings'
+
+export const UserSettingsContext = createContext<ReturnType<typeof useGlobalSettings> | null>(null)
+
+export const useUserSettingsContext = createUseContext(UserSettingsContext)
+
+export const UserSettingsContextProvider = UserSettingsContext.Provider
@@ -6,6 +6,7 @@ import { updateUserSettings } from '../api/update-user-settings'
 import { getUpdatedSettingsLocal } from '../lib/helpers/update-setting-local'
 
 import { IUserSetting, SettingValueType } from './types'
+import { useLocalStorageSave } from '#/shared/lib/helpers/local-storage-helper'
 
 interface IAddSettings {
 	token: string | undefined | null
@@ -2,7 +2,7 @@ import { Device } from '#/shared/lib/types/entities'
 
 export type AccountType = 'regular' | 'business_host' | 'business_account'
 
-export type SettingType = 'sidemenu'
+export type SettingType = 'sidemenu' | string
 
 export type SettingValueType = {
 	sidemenu_state?: 'opened' | 'closed'
@@ -12,5 +12,5 @@ export interface IUserSetting {
 	id: string
 	device: Device
 	type: SettingType
-	value: SettingValueType
+	value: SettingValueType | any
 }
@@ -0,0 +1,65 @@
+import { useLocalStorage } from 'usehooks-ts'
+import { IUserSetting } from './types'
+import { makePrivateRequest } from '#/shared/api'
+import { getUserSettings, postUserSettings, updateUserSettings } from '../api'
+import { useShowDataStore } from '#/shared/lib/hooks'
+import { getDeviceType } from '#/shared'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useSession } from 'next-auth/react'
+
+export function useGlobalSettings() {
+	const [settings, setSettings] = useLocalStorage<IUserSetting[]>('global_settings', [])
+
+	const { showMessage } = useShowDataStore()
+
+	const device = getDeviceType()
+
+	const { data } = useSession()
+
+	const addSettings = makePrivateRequest(async (type: string, value: any) => {
+		const { status, data } = await postUserSettings({ device, type, value })
+
+		if (status !== 200) return showMessage('Ошибка создания настроек')
+
+		setSettings((s) => [...s, data])
+	})
+
+	const updateSettings = useCallback(
+		makePrivateRequest(async (type: string, value: any) => {
+			const option = settings.find((x) => x.type === type)
+
+			if (!option) return showMessage('Ошибка присвоения настроек')
+
+			const { status } = await updateUserSettings(option.id, value)
+
+			if (status !== 204) return showMessage('Ошибка создания настроек')
+
+			setSettings((s) => [...s.filter((x) => x.type !== type), { ...option, value }])
+		}),
+		[settings, data]
+	)
+
+	const fetchUserSettings = makePrivateRequest(async () => {
+		const { status, data } = await getUserSettings()
+
+		const device = getDeviceType()
+
+		if (status !== 200) return showMessage('Ошибка загрузки данных пользователя')
+
+		setSettings(data.filter((s) => s.device === device))
+	})
+
+	const getOptionValue = (type: string, initial: any) => {
+		const option = settings.find((o) => o.type === type)
+		return option ? option.value : initial
+	}
+
+	return {
+		settings,
+		setSettings,
+		addSettings,
+		fetchUserSettings,
+		updateSettings,
+		getOptionValue,
+	}
+}
@@ -1 +1,2 @@
 export { getAllInfo, userSlice } from './model/user-type-slice'
+export * from './model'
\ No newline at end of file
@@ -10,18 +10,19 @@ export function useChatBotInput(
 ) {
 	const { showMessage } = useShowDataStore()
 	const [file, setFile] = useState<File | null>(null)
-	const { inferenceParams, infrerenceValues } = useChatBotParams()
+	const { infrerenceValues } = useChatBotParams()
+
+	const [valueInput, setValueInput] = useState('')
 
 	const onSendMessage = async (content: string, required: (string | null)[]) => {
 		if (required.includes('text') && content === '') return showMessage('Введите сообщение!')
 
-		if (required.includes('image') && file === null)
-			return showMessage('Прикрепите изображение!')
+		if (required.includes('image') && file === null) return showMessage('Прикрепите изображение!')
 
 		if (!inference) return showMessage('Не выбрана версия модели')
 
 		await sendMessage({
-			content,  
+			content,
 			file,
 			info: {
 				inference: inference.slug,
@@ -34,5 +35,7 @@ export function useChatBotInput(
 		onSendMessage,
 		file,
 		setFile,
+    valueInput,
+    setValueInput
 	}
 }
@@ -44,7 +44,11 @@ export function useChatBotPagination() {
 		setMessages([])
 		offset.current = 0
 		setLoaded(false)
-		fetchMessages()
+		if (currentChat && observer.current) {
+			observer.current.disconnect()
+			observer.current = null
+			onObserverMounted()
+		}
 		if (!scrollContainer.current) return
 		scrollContainer.current.scrollToBottom()
 	}, [currentChat])
@@ -86,6 +90,8 @@ export function useChatBotPagination() {
 
 		setLoaded(true)
 
+		console.info('ОН ФЕТЧИТ БЛЯТЬ', answer, response)
+
 		if (response.status >= 400 || !Array.isArray(answer)) return showMessage('Ошибка загрузки чата')
 
 		const { messages } = useChatBotMessages.getState()
@@ -21,13 +21,7 @@ export const ChatItemActionsPopup = ({ id, setRename, ...props }: ChatItemAction
 	const renamePopup = getPopupById(`rename-${id}`)
 
 	return (
-		<PopupTemplate
-			hasMobileTransform
-			horizontal='right'
-			className={styles.container}
-			id={id}
-			{...props}
-		>
+		<PopupTemplate hasMobileTransform horizontal='right' className={styles.container} id={id} {...props}>
 			<div className={styles.popup}>
 				<button
 					className={styles.popup__button}
@@ -1 +1,2 @@
-export * from './use-model-input'
\ No newline at end of file
+export * from './use-model-input'
+export * from './model-input.store'
\ No newline at end of file
@@ -0,0 +1,24 @@
+import { create } from "zustand";
+
+export interface ModelInputStore {
+  modelInputValue: string;
+  modelInputFile: File | null;
+  setModelInputValue: (modelInput: string) => void;
+  setModelInputFile: (file: File | null) => void;
+}
+
+export const useModelInputStore = create<ModelInputStore>((set, get) => {
+  function setModelInputValue(modelInput: string) {
+    set({ ...get(), modelInputValue: modelInput });
+  }
+  function setModelInputFile(file: File | null) {
+    set({ ...get(), modelInputFile: file });
+  }
+
+  return {
+    modelInputFile: null,
+    modelInputValue: "",
+    setModelInputValue,
+    setModelInputFile
+  };
+})
\ No newline at end of file
@@ -19,6 +19,7 @@ import { NextPage } from 'next'
 import { pingFangFont } from '#/shared/lib/constants/font/font'
 import { useBlockTelegram } from '#/shared/lib/hooks/use-block-telegram'
 import { Error } from '#/shared'
+import { Providers } from '#/widgets/providers'
 
 axios.defaults.httpsAgent = new https.Agent({
 	rejectUnauthorized: false,
@@ -60,20 +61,8 @@ export interface AppPropsWithLayout extends AppProps {
 
 function App({ Component, pageProps: { session, ...pageProps } }: AppPropsWithLayout) {
 	useBlockTelegram()
-	const getLayout = Component.getLayout ?? ((page) => page)
 
-	if ('serviceWorker' in navigator) {
-		navigator.serviceWorker
-			.getRegistrations()
-			.then(function (registrations) {
-				for (let registration of registrations) {
-					registration.unregister()
-				}
-			})
-			.catch(function (error) {
-				console.error('Ошибка при размонтировании service worker:', error)
-			})
-	}
+	const getLayout = Component.getLayout ?? ((page) => page)
 
 	return (
 		<>
@@ -88,8 +77,10 @@ function App({ Component, pageProps: { session, ...pageProps } }: AppPropsWithLa
 						<Provider store={store}>
 							<SessionProvider session={session} refetchInterval={5 * 60}>
 								<ThemeProvider theme={pingFangFont}>
-									{getLayout(<Component {...pageProps} />)}
-									<Error />
+									<Providers>
+										{getLayout(<Component {...pageProps} />)}
+										<Error />
+									</Providers>
 								</ThemeProvider>
 							</SessionProvider>
 						</Provider>
@@ -7,10 +7,8 @@ export function makePrivateRequest<Params extends any[], ReturnType>(
 	const { data } = useSession()
 
 	return async (...params: Params) => {
-		if (!data) return
-
 		api.interceptors.request.use((config) => {
-			config.headers.Authorization = `Bearer ${data.access}`
+			config.headers.Authorization = `Bearer ${data?.access}`
 			return config
 		})
 
@@ -0,0 +1,13 @@
+import { useContext } from "react"
+
+export function createUseContext<T>(context: React.Context<T>) {
+  return () => {
+    const contextValue = useContext(context)
+    if (!contextValue) {
+      throw new Error("useContext must be inside a Provider with a value")
+    }
+    return contextValue
+  }
+}
+
+
@@ -7,4 +7,5 @@ export * from './string'
 export * from './date-helper'
 export * from './image'
 export * from './file'
-export * from './pending'
\ No newline at end of file
+export * from './pending'
+export * from './context'
\ No newline at end of file
@@ -1,26 +1,12 @@
 import { useEffect } from 'react'
 import { useRouter } from 'next/router'
 
-// этот хук проверяет используется ли Telegram Web App
-
 export const useBlockTelegram = () => {
-	const router = useRouter()
+	const { replace, pathname: path } = useRouter()
 
 	useEffect(() => {
-		if (typeof window === 'undefined') return
-
-		try {
-			if (
-				typeof window !== 'undefined' &&
-				'Telegram' in window &&
-				(window as any).Telegram?.WebApp &&
-				router.pathname !== '/telegram-blocked'
-			) {
-				router.replace('/telegram-blocked')
-			} else {
-			}
-		} catch (err) {
-			console.error('Ошибка при проверке WebApp:', err)
-		}
-	}, [router])
+		// @ts-ignore
+		if (window.Telegram && window.Telegram.WebApp && path !== '/telegram-blocked')
+			replace('/telegram-blocked')
+	}, [])
 }
@@ -1,4 +1,4 @@
-import React, { RefObject, memo, useEffect, useMemo, useRef } from 'react'
+import React, { RefObject, memo, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import styles from './template.module.scss'
 import { c } from '#/shared/lib/helpers'
 import { usePopupStore } from '../model'
@@ -46,10 +46,22 @@ const Template = memo(
 
 		const nodeRef = useRef<HTMLDivElement>(null)
 
-		const cordinates = useMemo(() => {
-			if (!flagRef.current) return
-			return flagRef.current.getBoundingClientRect()
-		}, [flagRef.current, flagRef.current?.getBoundingClientRect()])
+		const [cordinates, setCordinates] = useState<{ left: number; top: number } | null>(null)
+
+		useLayoutEffect(() => {
+			if (!flagRef.current || !nodeRef.current) return
+
+			const rect = flagRef.current.getBoundingClientRect()
+			const popup = nodeRef.current.getBoundingClientRect()
+			const viewportRight = window.visualViewport?.width ?? window.innerWidth
+
+			if (rect.left + popup.width > viewportRight) {
+				const left = rect.left - (rect.left + popup.width - viewportRight)
+				setCordinates({ left, top: rect.top })
+			} else {
+				setCordinates({ left: rect.left, top: rect.top })
+			}
+		}, [modal.state])
 
 		return (
 			<Transition timeout={400} in={modal.state} unmountOnExit nodeRef={nodeRef}>
@@ -58,7 +70,7 @@ const Template = memo(
 						onWheel={(e) => e.stopPropagation()}
 						ref={nodeRef}
 						style={{
-							left: cordinates ? cordinates.right : 0,
+							left: cordinates ? cordinates.left : 0,
 							top: cordinates ? cordinates.top : 0,
 						}}
 						className={c(
@@ -1,4 +1,12 @@
-import { MutableRefObject, useCallback, useEffect, useRef, useState, WheelEventHandler } from 'react'
+import {
+	MutableRefObject,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+	TouchEvent,
+	WheelEventHandler,
+} from 'react'
 
 export function useListenersWheel(
 	containerRef: MutableRefObject<HTMLDivElement | null>,
@@ -9,62 +17,148 @@ export function useListenersWheel(
 	const preventScroll = useRef(false)
 	const translateYRef = useRef(0)
 
+	const velocityRef = useRef(0)
+	const animationFrameRef = useRef<number | null>(null)
+
 	const [draggbleHeight, setDraggbleHeight] = useState(100)
 
 	function defineDraggbleHeight() {
 		const container = containerRef.current
 		const { current } = scrollRef
 
-		if (current && container) setDraggbleHeight((current.clientHeight / container?.clientHeight) * 100)
+		if (current && container) {
+			setDraggbleHeight((current.clientHeight / container.clientHeight) * 100)
+		}
 	}
 
 	useEffect(() => {
 		defineDraggbleHeight()
 	}, [containerRef.current?.clientHeight])
 
-	const onWheelCallback = useCallback<WheelEventHandler>((e) => {
-		if (preventScroll.current) return
+	const applyTransform = useCallback(() => {
+		const container = containerRef.current
+		const scroll = scrollRef.current
+		const draggable = draggbleRef.current
 
-		requestAnimationFrame(() => {
-			const deltaY = e.deltaY
-			translateYRef.current -= deltaY
+		if (!container || !scroll || !draggable) return
 
-			if (translateYRef.current < 0) translateYRef.current = 0
+		container.style.transform = `translateY(${translateYRef.current}px)`
 
-			const container = containerRef.current
+		const proportion = scroll.clientHeight / container.clientHeight
+		draggable.style.transform = `translateY(${
+			-(translateYRef.current * proportion) + scroll.clientHeight - draggable.clientHeight
+		}px)`
+	}, [])
 
-			const { current } = scrollRef
+	const clampTranslateY = useCallback(() => {
+		const container = containerRef.current
+		const scroll = scrollRef.current
 
-			if (container) container.style.transform = `translateY(${translateYRef.current}px)`
+		if (!container || !scroll) return
 
-			defineDraggbleHeight()
+		if (translateYRef.current < 0) {
+			translateYRef.current = 0
+		}
 
-			if (draggbleRef.current && scrollRef.current && container) {
-				const proportion = scrollRef.current.clientHeight / container.clientHeight
+		const maxScroll = container.clientHeight - scroll.clientHeight
+		if (translateYRef.current > maxScroll) {
+			translateYRef.current = maxScroll
+		}
+	}, [])
 
-				draggbleRef.current.style.transform = `translateY(${
-					-(translateYRef.current * proportion) +
-					scrollRef.current.clientHeight -
-					draggbleRef.current.clientHeight
-				}px)`
+	const animateInertia = useCallback(() => {
+		const friction = 0.95
+		const minVelocity = 0.5
+
+		const step = () => {
+			if (Math.abs(velocityRef.current) > minVelocity) {
+				translateYRef.current -= velocityRef.current
+				clampTranslateY()
+				applyTransform()
+				velocityRef.current *= friction
+				animationFrameRef.current = requestAnimationFrame(step)
+			} else {
+				velocityRef.current = 0
+				if (animationFrameRef.current) {
+					cancelAnimationFrame(animationFrameRef.current)
+				}
 			}
+		}
+
+		step()
+	}, [applyTransform, clampTranslateY])
+
+	const onWheelCallback = useCallback<WheelEventHandler>(
+		(e) => {
+			if (preventScroll.current) return
+
+			requestAnimationFrame(() => {
+				translateYRef.current -= e.deltaY
+				clampTranslateY()
+				applyTransform()
+				defineDraggbleHeight()
+				preventScroll.current = false
+			})
+		},
+		[clampTranslateY, applyTransform]
+	)
+
+	const touchStartY = useRef<number>(0)
+	const lastTouchY = useRef<number>(0)
+	const lastMoveTime = useRef<number>(0)
+
+	const handleTouchStart = useCallback((e: TouchEvent<HTMLDivElement>) => {
+		e.preventDefault()
+
+		touchStartY.current = e.touches[0].clientY
+		lastTouchY.current = touchStartY.current
+		lastMoveTime.current = Date.now()
+
+		if (animationFrameRef.current) {
+			cancelAnimationFrame(animationFrameRef.current)
+			animationFrameRef.current = null
+			velocityRef.current = 0
+		}
+	}, [])
 
-			if (blockedScrollTop && container && current) {
-				const diffrenece = translateYRef.current - container.clientHeight + current.clientHeight
+	const handleTouchMove = useCallback(
+		(e: TouchEvent<HTMLDivElement>) => {
 
-				if (diffrenece > 0) {
-					translateYRef.current = container.clientHeight - current.clientHeight
-				}
-			}
+      e.preventDefault()
 
-			preventScroll.current = false
-		})
-	}, [])
+			if (preventScroll.current) return
+
+			const currentY = e.touches[0].clientY
+			const deltaY = lastTouchY.current - currentY
+			const now = Date.now()
+			const deltaTime = now - lastMoveTime.current || 16
+
+			velocityRef.current = (deltaY / deltaTime) * 16
+
+			lastTouchY.current = currentY
+			lastMoveTime.current = now
+
+			requestAnimationFrame(() => {
+				translateYRef.current -= deltaY
+				clampTranslateY()
+				applyTransform()
+				defineDraggbleHeight()
+			})
+		},
+		[clampTranslateY, applyTransform]
+	)
+
+	const handleTouchEnd = useCallback(() => {
+		animateInertia()
+	}, [animateInertia])
 
 	return {
 		onWheelCallback,
 		preventScroll,
 		translateYRef,
 		draggbleHeight,
+		handleTouchStart,
+		handleTouchMove,
+		handleTouchEnd,
 	}
 }
@@ -3,6 +3,8 @@
 	overflow: hidden;
 	position: relative;
 	will-change: transform;
+	touch-action: none;
+	-webkit-overflow-scrolling: touch;
 
 	&__container {
 		bottom: 0;
@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle, useRef } from 'react'
+import React, { Children, TouchEvent, forwardRef, useImperativeHandle, useRef } from 'react'
 import styles from './common-scrollbar.module.scss'
 import { c } from '#/shared/lib/helpers'
 import { useHovered, useListenersThumbnail, useListenersWheel } from '../model'
@@ -26,7 +26,7 @@ export const CommonScrollbar = forwardRef<CommonScrollbarRef, CommonScrollbarPro
 
 		const { onMounseEnter, onMouseLeave, hovered } = useHovered()
 
-		const { onWheelCallback, draggbleHeight } = useListenersWheel(
+		const { onWheelCallback, draggbleHeight, handleTouchStart, handleTouchMove } = useListenersWheel(
 			containerRef,
 			draggbleRef,
 			localRef,
@@ -39,14 +39,11 @@ export const CommonScrollbar = forwardRef<CommonScrollbarRef, CommonScrollbarPro
 				onMouseEnter={onMounseEnter}
 				onMouseLeave={onMouseLeave}
 				onWheel={onWheelCallback}
+				onTouchStart={handleTouchStart}
+				onTouchMove={handleTouchMove}
 				className={c(styles.scroll, className)}
 			>
-				<div
-					className={c(
-						styles.scroll__thumbnail,
-						hovered && styles.scroll__thumbnail_visible
-					)}
-				>
+				<div className={c(styles.scroll__thumbnail, hovered && styles.scroll__thumbnail_visible)}>
 					<div
 						ref={draggbleRef}
 						style={{
@@ -55,7 +52,15 @@ export const CommonScrollbar = forwardRef<CommonScrollbarRef, CommonScrollbarPro
 						className={styles.scroll__draggble}
 					></div>
 				</div>
-				<div ref={containerRef} className={c(styles.scroll__container)}>
+				<div
+					ref={containerRef}
+					style={{ touchAction: 'none', overscrollBehavior: 'contain' }}
+					onTouchMove={(e) => {
+						e.preventDefault()
+						document.body.style.overflow = 'hidden'
+					}}
+					className={c(styles.scroll__container)}
+				>
 					{children}
 				</div>
 			</div>
@@ -0,0 +1 @@
+export * from './use-chat-window-context'
\ No newline at end of file
@@ -0,0 +1,9 @@
+import { useChatBotInput } from '#/features/chat-bot-input'
+import { createUseContext } from '#/shared'
+import { createContext } from 'react'
+
+export const ChatWindowContext = createContext<ReturnType<typeof useChatBotInput> | null>(null)
+
+export const useChatWindowContext = createUseContext(ChatWindowContext)
+
+export const ChatWindowContextProvider = ChatWindowContext.Provider
@@ -13,6 +13,7 @@ import { useShowDataStore, useThemeAndDevice } from '#/shared/lib/hooks'
 import { useChatBotInput } from '#/features/chat-bot-input'
 import { useChatImageLoad } from '#/features/chat-image-load'
 import { useChatMessageActions } from '#/features/use-chat-message-actions'
+import { ChatWindowContextProvider } from '../model'
 
 export interface ChatProps {
 	setOpenFiltersMobile: React.Dispatch<React.SetStateAction<boolean>>
@@ -23,23 +24,21 @@ export function AllChatWindow<T>({ setOpenFiltersMobile }: ChatProps) {
 
 	const { sendMessage } = useChatMessageActions()
 
-	const { onSendMessage, file, setFile } = useChatBotInput(inference, sendMessage)
+	const { onSendMessage, file, setFile, setValueInput, valueInput } = useChatBotInput(
+		inference,
+		sendMessage
+	)
 
 	const { showMessage } = useShowDataStore()
 
 	const inputTypes = useMemo(() => inputs.map((p) => p.type), [inputs])
 
-	const requiredTypes = useMemo(
-		() => inputs.filter((p) => p.required).map((p) => p.type),
-		[inputs]
-	)
-
-	const [valueInput, setValueInput] = useState('')
+	const requiredTypes = useMemo(() => inputs.filter((p) => p.required).map((p) => p.type), [inputs])
 
 	return (
-		<>
+		<ChatWindowContextProvider value={{ onSendMessage, file, setFile, setValueInput, valueInput }}>
 			<div className={c(styles.wrap, model && !!model.tags.length && styles.wrap_tags)}>
-				<ChatMessagesList model={model} setValueInput={setValueInput} />
+				<ChatMessagesList model={model} />
 
 				<div className={c(styles.wrap__input)}>
 					<ModelInput
@@ -56,13 +55,11 @@ export function AllChatWindow<T>({ setOpenFiltersMobile }: ChatProps) {
 					{(model ? !model.enabled : false) && (
 						<div className={styles.blocked}>
 							<BlockedSvg width={21} height={21} color='white' />
-							<span className={c(styles.blocked__text)}>
-								Модель недоступна
-							</span>
+							<span className={c(styles.blocked__text)}>Модель недоступна</span>
 						</div>
 					)}
 				</div>
 			</div>
-		</>
+		</ChatWindowContextProvider>
 	)
 }
@@ -34,13 +34,10 @@ import { ChatBotOptionsPopup } from '#/entities/chat/ui/chat-bot-options-popup'
 export const Layout: React.FC<LayoutProps> = ({
 	children,
 	titlePage,
-	title = titlePage,
 	isLoader,
 	height,
 	device = getDeviceType(),
 }) => {
-	const { data: sessionData } = useSession()
-	const appState = useAppSelector((state) => state)
 	const dispatch = useAppDispatch()
 
 	const meStatus = useAppSelector((state) => state.user.status)
@@ -49,8 +46,6 @@ export const Layout: React.FC<LayoutProps> = ({
 
 	const desktop = device === 'desktop'
 
-	const [sidemenuDefaultOpen, setSidemenuDefaultOpen] = useState(true)
-
 	useTheme()
 
 	const { data, status } = useSession()
@@ -86,42 +81,6 @@ export const Layout: React.FC<LayoutProps> = ({
 		getUserData(data.access)
 	}, [data])
 
-	useEffect(() => {
-		if (
-			(sessionData && !sessionStorage.getItem('firstRender')) ||
-			(sessionData && !localStorage.getItem('global_settings'))
-		) {
-			dispatch(getUserAccountSettings(sessionData.access))
-			sessionStorage.setItem('firstRender', 'true')
-		}
-	}, [sessionData])
-
-	React.useEffect(() => {
-		const lsData = localStorage.getItem('global_settings')
-		if (lsData !== null) {
-			dispatch(setSettings(JSON.parse(lsData)))
-		}
-
-		window.addEventListener('beforeunload', () => {
-			sessionStorage.removeItem('firstRender')
-			sessionStorage.clear()
-		})
-	}, [])
-
-	React.useEffect(() => {
-		if (appState.settings.state !== null && device) {
-			let setting = isSettingExist({
-				settings: appState.settings.state,
-				targetDevice: device,
-				targetType: 'sidemenu',
-			})
-			if (setting)
-				setting?.value?.sidemenu_state === 'opened'
-					? setSidemenuDefaultOpen(true)
-					: setSidemenuDefaultOpen(false)
-		}
-	}, [appState.settings.state])
-
 	const [requestDelay, setRequestDelay] = useState(false)
 
 	const transitionRef = useRef(null)
@@ -174,10 +133,7 @@ export const Layout: React.FC<LayoutProps> = ({
 				>
 					{desktop ? (
 						<Box display='flex' justifyContent='center'>
-							<SideMenu
-								device={device}
-								sidemenuDefaultOpen={sidemenuDefaultOpen}
-							/>
+							<SideMenu />
 							<Box
 								width='100%'
 								sx={{
@@ -187,10 +143,7 @@ export const Layout: React.FC<LayoutProps> = ({
 								}}
 							>
 								<InfoBar device={device} token={''} />
-								<Box
-									sx={{ paddingBottom: '15px' }}
-									width='100%'
-								>
+								<Box sx={{ paddingBottom: '15px' }} width='100%'>
 									{children}
 								</Box>
 							</Box>
@@ -1,6 +1,15 @@
 import React, { memo, useEffect, useMemo, useState } from 'react'
 import MenuIcon from '@mui/icons-material/Menu'
-import { Avatar, Button, Divider, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
+import {
+	Avatar,
+	Button,
+	Divider,
+	List,
+	ListItem,
+	ListItemButton,
+	ListItemIcon,
+	ListItemText,
+} from '@mui/material'
 import Menu from '@mui/material/Menu'
 import Typography from '@mui/material/Typography'
 import { Box, Stack } from '@mui/system'
@@ -152,17 +161,14 @@ export const MainMenuMobile = memo(() => {
 						<Box
 							onClick={(e) => {
 								e.stopPropagation()
+								e.preventDefault()
 								dispatch(change(null))
 							}}
 						>
-							<MenuItem
-								open={open}
-								pathname={pathname}
-								theme={theme}
-								title={'Сменить тему'}
-								link={null}
-								icon={'/sleep'}
-							/>
+							<Stack sx={{ padding: 1 }} direction='row' spacing={2}>
+								<Image src={'/sleep.svg'} width={19} height={19} alt={''} />
+								<Typography className='title-main-gray'>Сменить тему</Typography>
+							</Stack>
 						</Box>
 					</Box>
 					<Box sx={{ marginTop: 1.5 }}>
@@ -207,7 +213,7 @@ type MenuItemProps = {
 	theme: string
 
 	title: string
-	link: string | null
+	link?: string | null
 	icon: string
 	activeList?: string[]
 }
@@ -221,7 +227,12 @@ export function MenuItem(props: MenuItemProps) {
 	return (
 		<Link href={props.link || ''}>
 			<Stack sx={{ padding: 1 }} direction='row' spacing={2}>
-				<Image src={props.icon + (isActive ? '' : '-off') + '.svg'} width={19} height={19} alt={''} />
+				<Image
+					src={props.icon + (isActive ? '' : '-off') + '.svg'}
+					width={19}
+					height={19}
+					alt={''}
+				/>
 				<Typography className='title-main-gray'>{props.title}</Typography>
 			</Stack>
 			{/* <ListItem
@@ -14,19 +14,22 @@ import { isBottom } from '#/shared/lib/helpers/refs'
 import { createPortal } from 'react-dom'
 import { ImageModal } from '#/features/image-modal'
 import { useChatMessageImage } from '../model/use-chat-message-image'
+import { useModelInputStore } from '#/features/model-input/model'
+import { useChatWindowContext } from '#/widgets/chat-window/model'
 
 interface IMessagesList {
 	model: Model | null
-	setValueInput: (value: string) => void
 }
 
-export const ChatMessagesList: React.FC<IMessagesList> = memo(({ model, setValueInput }) => {
+export const ChatMessagesList: React.FC<IMessagesList> = memo(({ model }) => {
 	const { currentChat } = useCurrentChat()
 
 	const { query } = useRouter()
 
 	const { currentSrc, setCurrentSrc, onlyImageMessages } = useChatMessageImage()
 
+	const { setValueInput } = useChatWindowContext()
+
 	const {
 		refScroll,
 		scrollContainer: sContainer,
@@ -34,7 +37,7 @@ export const ChatMessagesList: React.FC<IMessagesList> = memo(({ model, setValue
 		loading,
 		loaded,
 		messagesWithRefs,
-    fetchMessages
+		fetchMessages,
 	} = useChatBotPagination()
 
 	useEffect(() => {
@@ -64,12 +67,14 @@ export const ChatMessagesList: React.FC<IMessagesList> = memo(({ model, setValue
 					nodeRef={transitionRef}
 					classNames='my-node'
 				>
-					{loaded && !messagesWithRefs.length ? (
-						<div className={styles.preview} ref={transitionRef}>
-							<PreviewView setValue={(value) => setValueInput(value)} />
-						</div>
-					) : (
-						<div className={styles.list} ref={transitionRef}>
+					<div style={{ height: '100%' }} ref={transitionRef}>
+						{loaded && !messagesWithRefs.length && (
+							<div className={styles.preview}>
+								<PreviewView setValue={(value) => setValueInput(value)} />
+							</div>
+						)}
+
+						<div className={styles.list}>
 							<CommonScrollbar blockedScrollTop ref={sContainer}>
 								{loading && (
 									<div className={styles.list__scroll}>
@@ -82,7 +87,9 @@ export const ChatMessagesList: React.FC<IMessagesList> = memo(({ model, setValue
 										<CSSTransition key={idx} timeout={400} classNames='my-node'>
 											<IsNextDay
 												ref={ref}
-                        setCurrentSrc={(current) => setCurrentSrc(current)}
+												setCurrentSrc={(current) =>
+													setCurrentSrc(current)
+												}
 												tooltipPosition={'bottom'}
 												key={message.uid}
 												model={model}
@@ -94,7 +101,7 @@ export const ChatMessagesList: React.FC<IMessagesList> = memo(({ model, setValue
 								</TransitionGroup>
 							</CommonScrollbar>
 						</div>
-					)}
+					</div>
 				</CSSTransition>
 			</SwitchTransition>
 		</>
@@ -35,9 +35,7 @@ export const ImageMessagesList: React.FC<MessagesList> = memo(({ device, images,
 				{createPortal(
 					<ImageModal
 						images={computedLibraryImages}
-						modal={modal}
 						onSlideFalse={() => getMessagesPagination && getMessagesPagination()}
-						setModal={setModal}
 						reverse={device === 'desktop'}
 						current={chosenImage}
 					/>,
@@ -0,0 +1 @@
+export * from './providers'
\ No newline at end of file
@@ -0,0 +1,24 @@
+import { useGlobalSettings, UserSettingsContextProvider } from '#/entities/user-account'
+import { useSession } from 'next-auth/react'
+import React, { PropsWithChildren, useEffect } from 'react'
+
+interface ProvidersProps extends PropsWithChildren {}
+
+export const Providers = ({ children }: ProvidersProps) => {
+	const { settings, fetchUserSettings, ...rest } = useGlobalSettings()
+
+	const { data } = useSession()
+
+	useEffect(() => {
+    if(!data) return
+		console.log(settings.length)
+		if (settings.length > 0) return
+		fetchUserSettings()
+	}, [data])
+
+	return (
+		<UserSettingsContextProvider value={{ settings, fetchUserSettings, ...rest }}>
+			{children}
+		</UserSettingsContextProvider>
+	)
+}
@@ -0,0 +1 @@
+export * from './ui'
\ No newline at end of file
@@ -8,25 +8,19 @@ import ListItemButton from '@mui/material/ListItemButton'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemText from '@mui/material/ListItemText'
 import { CSSObject, styled, Theme } from '@mui/material/styles'
-import dynamic from 'next/dynamic'
 import Image from 'next/image'
 import Link from 'next/link'
-import { usePathname } from 'next/navigation'
 import { useRouter } from 'next/router'
-import { signOut, useSession } from 'next-auth/react'
+import { useSession } from 'next-auth/react'
 
-import { addUserSettings } from '#/entities/user-account/api/add-user-settings'
-import { updateUserSettings } from '#/entities/user-account/api/update-user-settings'
-import { isSettingExist } from '#/entities/user-account/lib/helpers/is-setting-exist'
-import { addUserAccountSettings, updateUserAccountSettings } from '#/entities/user-account/model/settings'
 import { getAll, ResponseAllInfo } from '#/entities/user-account/model/user-type-slice'
 import { useAppDispatch, useAppSelector } from '#/app/store/store'
-import { TooltipCustom } from '#/shared'
 import { Device } from '#/shared/lib/types/entities'
 
 import '../styles/styles.module.css'
 import styles from '../styles/styles.module.css'
 import { ERROR_REPORT, getModalById } from '#/features/modals'
+import { useUserSettingsContext } from '#/entities/user-account'
 
 export const menuListTop = [
 	{ title: 'Дашборд', link: '/', icon: '/svg/side-menu/market', activeList: [] },
@@ -104,80 +98,23 @@ const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open'
 	}),
 }))
 
-export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; sidemenuDefaultOpen: boolean }) => {
-	const [open, setOpen] = React.useState(sidemenuDefaultOpen)
-	const [isInitialValueSet, setIsInitialValueSet] = React.useState(false)
+export const SideMenu = ({}) => {
+	const { status } = useSession()
 
-	const { status, data } = useSession()
-	const dispatch = useAppDispatch()
+	const { pathname, asPath } = useRouter()
 
-	const { pathname, basePath, asPath, push } = useRouter()
+	const { theme } = useAppSelector((state) => state)
 
-	const { theme, settings } = useAppSelector((state) => state)
-
-	const handleDrawerOpen = () => {
-		setOpen(true)
-	}
-
-	const handleDrawerClose = () => {
-		setOpen(false)
-	}
+	const { getOptionValue, settings, updateSettings } = useUserSettingsContext()
 
 	const error_report = getModalById(ERROR_REPORT)
 
 	const match = useMediaQuery('(min-height:800px)')
 
-	const [userInfo, setUserInfo] = useState<ResponseAllInfo | null>()
-
-	useEffect(() => {
-		getAll(data?.access).then((res) => setUserInfo(res))
-	}, [data?.access])
-
-	useEffect(() => {
-		if (settings.state !== null && isInitialValueSet) {
-			let response = isSettingExist({
-				settings: settings.state,
-				targetDevice: device,
-				targetType: 'sidemenu',
-			})
-
-			if (response && data?.access) {
-				dispatch(
-					updateUserAccountSettings({
-						token: data.access,
-						id: response.id,
-						value: { sidemenu_state: open ? 'opened' : 'closed' },
-						settings: settings.state,
-					})
-				)
-			} else if (data?.access) {
-				dispatch(
-					addUserAccountSettings({
-						token: data.access,
-						setting: {
-							device,
-							type: 'sidemenu',
-							value: { sidemenu_state: open ? 'opened' : 'closed' },
-						},
-					})
-				)
-			}
-		}
-	}, [open])
-
-	useEffect(() => {
-		if (settings.state !== null && !isInitialValueSet) {
-			let setting = isSettingExist({
-				settings: settings.state,
-				targetDevice: device,
-				targetType: 'sidemenu',
-			})
-			if (setting) {
-				setting?.value?.sidemenu_state === 'opened' ? setOpen(true) : setOpen(false)
-			}
-			setIsInitialValueSet(true)
-		}
-	}, [settings.state])
+	const open = useMemo(
+		() => getOptionValue('sidemenu', { sidemenu_state: 'opened' }).sidemenu_state,
+		[settings]
+	)
 
 	return (
 		<Drawer
@@ -189,7 +126,7 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 				},
 			}}
 			variant='permanent'
-			open={open}
+			open={open === 'opened'}
 		>
 			<DrawerHeader
 				sx={{
@@ -201,7 +138,11 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 				}}
 			>
 				<Box
-					onClick={open ? handleDrawerClose : handleDrawerOpen}
+					onClick={() => {
+						updateSettings('sidemenu', {
+							sidemenu_state: open === 'opened' ? 'closed' : 'opened',
+						})
+					}}
 					width='100%'
 					display={'flex'}
 					alignItems={'center'}
@@ -223,7 +164,7 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 							marginLeft: -1,
 							marginRight: 5,
 							transition: 'transform 0.4s ease',
-							transform: !open ? 'rotate(180deg)' : 'rotate(0deg)',
+							transform: open === 'closed' ? 'rotate(180deg)' : 'rotate(0deg)',
 						}}
 						src={'/arrow-left.svg'}
 						width={20}
@@ -239,7 +180,7 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 							return (
 								<MenuItem
 									key={el.title}
-									open={open}
+									open={open === 'opened'}
 									pathname={asPath}
 									theme={theme.theme}
 									title={el.title}
@@ -254,7 +195,7 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 								return (
 									<MenuItem
 										key={el.title}
-										open={open}
+										open={open === 'opened'}
 										pathname={asPath}
 										theme={theme.theme}
 										title={el.title}
@@ -267,11 +208,13 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 						</Box>
 					</List>
 					<Box sx={{ marginTop: 1.5 }}>
-						<Box onClick={() => {
-							error_report.setState(true)
-						}}>
+						<Box
+							onClick={() => {
+								error_report.setState(true)
+							}}
+						>
 							<MenuItem
-								open={open}
+								open={open === 'opened'}
 								pathname={pathname}
 								theme={theme.theme}
 								title={'Поддержка'}
@@ -280,7 +223,7 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 							/>
 						</Box>
 						<MenuItem
-							open={open}
+							open={open === 'opened'}
 							pathname={pathname}
 							theme={theme.theme}
 							title={'API-ключи'}
@@ -290,8 +233,8 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 					</Box>
 				</>
 			)}
-			<Box sx={{ position: 'absolute', bottom: 5, width: '100%', left: open ? 25 : 0 }}>
-				{open && (
+			<Box sx={{ position: 'absolute', bottom: 5, width: '100%', left: open === 'opened' ? 25 : 0 }}>
+				{open === 'opened' && (
 					<Box sx={{ width: 'fit-content' }}>
 						<Link href={'https://air.fail/requisites'} target='_blank'>
 							<Typography
@@ -73,6 +73,7 @@
 				"styled-components": "^5.3.9",
 				"swiper": "^11.2.1",
 				"typescript": "5.1.3",
+				"usehooks-ts": "^3.1.1",
 				"zustand": "^5.0.3"
 			},
 			"devDependencies": {
@@ -16911,6 +16912,21 @@
 				"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
 			}
 		},
+		"node_modules/usehooks-ts": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.1.tgz",
+			"integrity": "sha512-I4diPp9Cq6ieSUH2wu+fDAVQO43xwtulo+fKEidHUwZPnYImbtkTjzIJYcDcJqxgmX31GVqNFURodvcgHcW0pA==",
+			"license": "MIT",
+			"dependencies": {
+				"lodash.debounce": "^4.0.8"
+			},
+			"engines": {
+				"node": ">=16.15.0"
+			},
+			"peerDependencies": {
+				"react": "^16.8.0  || ^17 || ^18 || ^19 || ^19.0.0-rc"
+			}
+		},
 		"node_modules/uuid": {
 			"version": "8.3.2",
 			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
@@ -96,6 +96,7 @@
 		"styled-components": "^5.3.9",
 		"swiper": "^11.2.1",
 		"typescript": "5.1.3",
+		"usehooks-ts": "^3.1.1",
 		"zustand": "^5.0.3"
 	},
 	"devDependencies": {