@@ -3,12 +3,15 @@ import { useShowDataStore } from '#/shared/lib/hooks'
 import { postChat, putChat, removeChat } from '../api'
 import { useChatsStore } from '.'
 import { CreateChatDTO } from '../types'
+import { useCurrentChat } from '#/features/chats'
 
 export function useChatActions() {
 	const { showMessage } = useShowDataStore()
 
 	const { chats, setChats } = useChatsStore()
 
+	const { setCurrentChat } = useCurrentChat()
+
 	const onRenameChat = makePrivateRequest(async (uid: string, title: string) => {
 		const chat = chats.find((x) => x.uid === uid)
 
@@ -29,6 +32,10 @@ export function useChatActions() {
 		if (status !== 204 || !chat) return showMessage('Ошибка при переименовании чата')
 
 		setChats([...chats.filter((c) => c.uid !== uid)])
+
+		const actual = useChatsStore.getState().chats
+
+		setCurrentChat(actual[0].uid)
 	})
 
 	const onCreateChat = makePrivateRequest(async (dto: CreateChatDTO) => {
@@ -38,7 +45,7 @@ export function useChatActions() {
 
 		const chats = useChatsStore.getState().chats
 
-		setChats([...chats, chat])
+		setChats([chat, ...chats])
 	})
 
 	return {
@@ -7,24 +7,25 @@
 	border-radius: 13px;
 	padding: 12px 15px;
 	text-transform: none;
-  align-items: center;
-  position: relative;
+	width: 100%;
+	align-items: center;
+	position: relative;
 
-  &__settings{
-    color: var(--air-color);
-    position: relative;
-  }
+	&__settings {
+		color: var(--air-color);
+		position: relative;
+	}
 
 	&__text {
 		font-weight: 500;
 		font-size: 15px;
 		color: var(--new-ui-gray-color);
-    width: max-content;
+		width: max-content;
 
 		&_active {
 			font-weight: 500;
 			font-size: 15px;
-      color: var(--air-color);
+			color: var(--air-color);
 		}
 	}
 
@@ -36,15 +37,12 @@
 		border: none;
 		border-radius: 13px;
 		padding: 12px 15px;
-    padding-bottom: 10px;
-    gap: 12px;
+		padding-bottom: 10px;
+		gap: 12px;
 		text-transform: none;
 		background-color: rgba(130, 128, 255, 0.15);
-
 	}
 }
 
-
-.chat{
-
-}
\ No newline at end of file
+.chat {
+}
@@ -1,72 +1,81 @@
 import { ChatItemActionsPopup } from '#/features/chat-item-actions'
 import { useCurrentChat } from '#/features/chats'
 import { CommonInput } from '#/shared/ui/common-input'
-import React, { useRef, useState } from 'react'
+import React, { forwardRef, useEffect, useRef, useState } from 'react'
 import { ChatDTO } from '../types'
 import styles from './chat-button.module.scss'
 
 import RenameSvg from '#/assets/svg/rename.svg?react'
 import ChatSettingsSvg from '#/assets/svg/chat-settings.svg?react'
-import { getPopupById } from '#/shared/ui/popup'
+import { PopupTemplateVertical, getPopupById } from '#/shared/ui/popup'
 import { c } from '#/shared'
 import { useChatActions } from '../model'
 import { ChatMobileRename } from '#/features/chat-mobile-rename/ui/chat-mobile-rename-popup'
 
-interface ChatButtonProps extends ChatDTO {}
+interface ChatButtonProps extends ChatDTO {
+	popupVertical?: PopupTemplateVertical
+}
 
-export const ChatButton = ({ uid, title }: ChatButtonProps) => {
-	const { setCurrentChat, currentChat: chat } = useCurrentChat()
+export const ChatButton = forwardRef<HTMLButtonElement, ChatButtonProps>(
+	({ uid, title, popupVertical = 'top' }, ref) => {
+		const { setCurrentChat, currentChat: chat } = useCurrentChat()
 
-	const { onRenameChat } = useChatActions()
+		const { onRenameChat } = useChatActions()
 
-	const input = useRef<HTMLInputElement>(null)
+		const input = useRef<HTMLInputElement>(null)
 
-	const [rename, setRename] = useState(false)
+		const [rename, setRename] = useState(false)
 
-	const popup = getPopupById(uid)
+		const popup = getPopupById(uid)
 
-	return (
-		<button onClick={() => setCurrentChat(uid)} key={uid} className={styles.chat} value={uid}>
-			{rename ? (
-				<CommonInput
-					ref={input}
-					placeholder={title}
-					variant='outline'
-					rightSlot={
-						<button
-							onClick={() => {
-								if (!input.current) return
-								setRename(false)
-								onRenameChat(uid, input.current.value)
-							}}
-						>
-							<RenameSvg color='#8280FF' width={20} height={22} />
-						</button>
-					}
-				/>
-			) : (
-				<div className={c(styles.main, uid === chat && styles.main_active)}>
-					<p
-						className={c(
-							styles.main__text,
-							uid === chat && styles.main__text_active
-						)}
-					>
-						{title}
-					</p>
+		useEffect(() => {
+			if (chat !== uid) popup.setState(false)
+		}, [chat])
 
-					{uid === chat && (
-						<button
-							className={styles.main__settings}
-							onClick={() => popup.toogleState()}
-						>
-							<ChatSettingsSvg width={18} height={18} />
-						</button>
-					)}
-					<ChatItemActionsPopup setRename={setRename} id={uid} />
-					<ChatMobileRename id={uid} />
-				</div>
-			)}
-		</button>
-	)
-}
+		return (
+			<button
+				ref={ref}
+				onClick={() => setCurrentChat(uid)}
+				key={uid}
+				className={styles.chat}
+				value={uid}
+			>
+				{rename ? (
+					<CommonInput
+						ref={input}
+						placeholder={title}
+						variant='outline'
+						rightSlot={
+							<button
+								onClick={() => {
+									if (!input.current) return
+									setRename(false)
+									onRenameChat(uid, input.current.value)
+								}}
+							>
+								<RenameSvg color='#8280FF' width={20} height={22} />
+							</button>
+						}
+					/>
+				) : (
+					<div className={c(styles.main, uid === chat && styles.main_active)}>
+						<p className={c(styles.main__text, uid === chat && styles.main__text_active)}>
+							{title}
+						</p>
+
+						{uid === chat && (
+							<button
+								className={styles.main__settings}
+								onClick={() => popup.toogleState()}
+							>
+								<ChatSettingsSvg width={18} height={18} />
+							</button>
+						)}
+						<ChatItemActionsPopup vertical={popupVertical} setRename={setRename} id={uid} />
+						<ChatMobileRename id={uid} />
+					</div>
+				)}
+			</button>
+		)
+	}
+)
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react'
+import React, { forwardRef, useEffect, useMemo } from 'react'
 import { Box, Menu, MenuItem, Slide, Typography } from '@mui/material'
 import Stack from '@mui/material/Stack'
 import Image from 'next/image'
@@ -14,65 +14,68 @@ import { useThemeAndDevice } from '#/shared/lib/hooks'
 import AvatarSvg from '#/assets/svg/avatar.svg?react'
 import DocSvg from '#/assets/svg/doc.svg?react'
 import MenuSvg from '#/assets/svg/menu.svg?react'
-import { CommonTooltip } from '#/shared/ui/tooltip'
+import { CommonTooltip, CommonTooltipPosition } from '#/shared/ui/tooltip'
 import { UserMessageActionsPopup } from '#/features/user-message-actions-popup'
 import { getPopupById } from '#/shared/ui/popup'
 
 export interface BotMessageProps {
 	model: Model
 	message: Message
+	tooltipPosition?: CommonTooltipPosition
 }
 
-export function BotMessage({ model, message: { file, ...message } }: BotMessageProps) {
-	const fileName = useMemo(() => (file ? (file as string).match(/(.+)\/(.+)\?/)![2] : ''), [])
+export const BotMessage = forwardRef<any, BotMessageProps>(
+	({ model, tooltipPosition = 'bottom', message: { file, ...message } }, ref) => {
+		const fileName = useMemo(() => (file ? (file as string).match(/(.+)\/(.+)\?/)![2] : ''), [])
 
-	const content = useMemo(() => (file ? fileName : message.content), [])
+		const content = useMemo(() => (file ? fileName : message.content), [])
 
-	const popup = getPopupById(message.uid)
+		const popup = getPopupById(message.uid)
 
-	return (
-		<div className={styles.message}>
-			<div className={styles.message__avatar}>
-				<AvatarSvg width={36} height={36} />
-			</div>
-			<div className={styles.content}>
-				<div className={c(styles.content__header)}>
-					<p className={c(styles.content__title)}>{model.title}</p>
-					<p className={c(styles.content__date)}>
-						{formatDate(message.created_at, {
-							hour: 'numeric',
-							minute: 'numeric',
-						})}
-					</p>
+		return (
+			<div ref={ref} className={styles.message}>
+				<div className={styles.message__avatar}>
+					<AvatarSvg width={36} height={36} />
 				</div>
-				<div className={styles.content__description}>
-					<div
-						className={c(
-							'smallScroll',
-							styles.content__wrap,
-							file && styles.content__wrap_file
-						)}
-						onClick={() => {
-							if (!file) return
-							window.open(file as string, '_blank')
-						}}
-					>
-						{file && <DocSvg width={16} height={18} color='#7f7df3' />}
-						<Markdown content={content} />
+				<div className={styles.content}>
+					<div className={c(styles.content__header)}>
+						<p className={c(styles.content__title)}>{model.title}</p>
+						<p className={c(styles.content__date)}>
+							{formatDate(message.created_at, {
+								hour: 'numeric',
+								minute: 'numeric',
+							})}
+						</p>
 					</div>
-					<div className={styles.content__menu}>
-						<CommonTooltip content='Открыть меню'>
-							<button
-								className={styles.button}
-								onClick={() => popup.toogleState({ content })}
-							>
-								<MenuSvg width={22} height={22} color='#ACB1BB' />
-							</button>
-						</CommonTooltip>
-						<UserMessageActionsPopup id={message.uid} />
+					<div className={styles.content__description}>
+						<div
+							className={c(
+								'smallScroll',
+								styles.content__wrap,
+								file && styles.content__wrap_file
+							)}
+							onClick={() => {
+								if (!file) return
+								window.open(file as string, '_blank')
+							}}
+						>
+							{file && <DocSvg width={16} height={18} color='#7f7df3' />}
+							<Markdown content={content} />
+						</div>
+						<div className={styles.content__menu}>
+							<CommonTooltip position={tooltipPosition} content='Открыть меню'>
+								<button
+									className={styles.button}
+									onClick={() => popup.toogleState({ content })}
+								>
+									<MenuSvg width={22} height={22} color='#ACB1BB' />
+								</button>
+							</CommonTooltip>
+							<UserMessageActionsPopup id={message.uid} />
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
-	)
-}
+		)
+	}
+)
@@ -1,9 +1,9 @@
-import React, { memo, useMemo, useState } from 'react'
+import React, { forwardRef, memo, useMemo, useState } from 'react'
 import Image from 'next/image'
 
 import { c, formatDate } from '#/shared/lib/helpers'
 import styles from './user-message.module.scss'
-import { CommonTooltip } from '#/shared/ui/tooltip'
+import { CommonTooltip, CommonTooltipPosition } from '#/shared/ui/tooltip'
 
 import MenuSvg from '#/assets/svg/menu.svg?react'
 import DocSvg from '#/assets/svg/doc.svg?react'
@@ -14,91 +14,91 @@ import { Model } from '#/entities/model-entity'
 import { useUserMessageActions, useUserMessageImage } from '../model'
 import { Message } from '../types'
 
-interface IMessagesList {
+interface UserMessageProps {
 	message: Message
 	model: Model
-	// setCurrentSrc: (value: string) => void
-	// setModal: (value: boolean) => void
+	tooltipPosition?: CommonTooltipPosition
 }
 
-export const UserMessage = memo(({ message, model }: IMessagesList) => {
-	const { loaded, setLoaded, fileIsImage, fileName } = useUserMessageImage(message)
+export const UserMessage = memo(
+	forwardRef<any, UserMessageProps>(({ message, model, tooltipPosition = 'bottom' }, ref) => {
+		const { loaded, setLoaded, fileIsImage, fileName } = useUserMessageImage(message)
 
-	const { resend } = useUserMessageActions(message)
+		const { resend } = useUserMessageActions(message)
 
-	const popup = getPopupById(message.uid)
+		const popup = getPopupById(message.uid)
 
-	return (
-		<div className={styles.message}>
-			<p className={styles.message__time}>
-				{formatDate(message.created_at, {
-					hour: 'numeric',
-					minute: 'numeric',
-				})}
-			</p>
+		return (
+			<div ref={ref} className={styles.message}>
+				<p className={styles.message__time}>
+					{formatDate(message.created_at, {
+						hour: 'numeric',
+						minute: 'numeric',
+					})}
+				</p>
 
-			<div className={styles.content}>
-				{message.file &&
-					(fileIsImage ? (
-						<div className={styles.content__imagebox}>
-							<div className={styles.content__image}>
-								<Image
-									onLoadingComplete={() => setLoaded(true)}
-									width={500}
-									height={500}
-									src={(message.file as string).split('?type')[0]}
-									alt={'К сожалению, изображение не загрузилось'}
-								/>
-								{!loaded && <div className={styles.content__skeleton} />}
+				<div className={styles.content}>
+					{message.file &&
+						(fileIsImage ? (
+							<div className={styles.content__imagebox}>
+								<div className={styles.content__image}>
+									<Image
+										onLoadingComplete={() => setLoaded(true)}
+										width={500}
+										height={500}
+										src={(message.file as string).split('?type')[0]}
+										alt={'К сожалению, изображение не загрузилось'}
+									/>
+									{!loaded && <div className={styles.content__skeleton} />}
+								</div>
 							</div>
-						</div>
-					) : (
-						<button
-							className={c('smallScroll', styles.content__filebox)}
-							onClick={() => {
-								if (!message.file) return
-								window.open(message.file as string, '_blank')
-							}}
-						>
-							<DocSvg width={16} height={18} />
-							<p>{fileName}</p>
-						</button>
-					))}
-
-				<div className={styles.content__message}>
-					<div style={{ position: 'relative' }} aria-haspopup='true'>
-						<CommonTooltip content='Открыть меню'>
+						) : (
 							<button
-								className={styles.button}
-								onClick={() =>
-									popup.toogleState({ content: message.content })
-								}
+								className={c('smallScroll', styles.content__filebox)}
+								onClick={() => {
+									if (!message.file) return
+									window.open(message.file as string, '_blank')
+								}}
 							>
-								<MenuSvg width={22} height={22} color='#ACB1BB' />
+								<DocSvg width={16} height={18} />
+								<p>{fileName}</p>
 							</button>
+						))}
+
+					<div className={styles.content__message}>
+						<div style={{ position: 'relative' }} aria-haspopup='true'>
+							<CommonTooltip position={tooltipPosition} content='Открыть меню'>
+								<button
+									className={styles.button}
+									onClick={() => popup.toogleState({ content: message.content })}
+								>
+									<MenuSvg width={22} height={22} color='#ACB1BB' />
+								</button>
+							</CommonTooltip>
+							<UserMessageActionsPopup id={message.uid} />
+						</div>
+						<CommonTooltip
+							position={tooltipPosition}
+							content='При отправке данного сообщения произошла ошибка,
+           нажмите чтобы отправить заново'
+						>
+							{!message.is_sent && (
+								<button onClick={resend}>
+									<WarningSvg width={20} height={20} color='#FF2372' />
+								</button>
+							)}
 						</CommonTooltip>
-						<UserMessageActionsPopup id={message.uid} />
+						<p
+							className={c('smallScroll', styles.content__text)}
+							style={{
+								whiteSpace: message.content.length > 30 ? 'pre-wrap' : 'pre',
+							}}
+						>
+							{message.content}
+						</p>
 					</div>
-					<CommonTooltip
-						content='При отправке данного сообщения произошла ошибка,
-           нажмите чтобы отправить заново'
-					>
-						{!message.is_sent && (
-							<button onClick={resend}>
-								<WarningSvg width={20} height={20} color='#FF2372' />
-							</button>
-						)}
-					</CommonTooltip>
-					<p
-						className={c('smallScroll', styles.content__text)}
-						style={{
-							whiteSpace: message.content.length > 30 ? 'pre-wrap' : 'pre',
-						}}
-					>
-						{message.content}
-					</p>
 				</div>
 			</div>
-		</div>
-	)
-})
+		)
+	})
+)
@@ -73,8 +73,9 @@ export default function BotParamsMap({}: BotParamsMap) {
 							title={name}
 							description={description}
 							value={infrerenceValues[key]}
-							withoutTooltip={!description || description.length == 0}
 							setValue={(value) => setInferenceValueByKey(key, value)}
+							withoutTooltip={!description || description.length == 0}
+							onlyNumber={type == 'int'}
 						/>
 					)
 				}
@@ -4,7 +4,7 @@ import { Device } from '#/shared/lib/types/entities'
 import { getImagesGalery } from '#/widgets/messages'
 import { useMediaQuery } from '@mui/material'
 import { useSession } from 'next-auth/react'
-import { createRef, useEffect, useRef, useState } from 'react'
+import { createRef, useEffect, useMemo, useRef, useState } from 'react'
 import { LimitSize, Limit } from '../types'
 import { useRouter } from 'next/router'
 import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
@@ -36,9 +36,14 @@ export function useChatBotPagination() {
 
 	const { data } = useSession()
 
+	const messagesWithRefs = useMemo(
+		() => messages.map((m) => ({ ...m, ref: createRef<any>() })),
+		[messages]
+	)
+
 	// TODO: Подумать как написать лучше
 	useEffect(() => {
-    setMessages([])
+		setMessages([])
 		offset.current = 0
 		setLoaded(false)
 		fetchMessages()
@@ -136,6 +141,7 @@ export function useChatBotPagination() {
 		setMessages,
 		fetchMessages,
 		scrollContainer,
+    messagesWithRefs,
 		refScroll,
 		loaded,
 	}
@@ -1,4 +1,4 @@
-import { PopupTemplate, getPopupById } from '#/shared/ui/popup'
+import { PopupTemplate, PopupTemplateProps, getPopupById } from '#/shared/ui/popup'
 import React, { Dispatch, SetStateAction, useMemo } from 'react'
 import styles from './chat-item-actions-popup.module.scss'
 import Rename2Svg from '#/assets/svg/rename-2.svg?react'
@@ -6,12 +6,12 @@ import TrashSvg from '#/assets/svg/trash.svg?react'
 import { useChatActions } from '#/entities/chat'
 import { useMediaQuery } from 'react-responsive'
 
-export interface ChatItemActionsPopupProps {
+export interface ChatItemActionsPopupProps extends PopupTemplateProps {
 	id: string
 	setRename: Dispatch<SetStateAction<boolean>>
 }
 
-export const ChatItemActionsPopup = ({ id, setRename }: ChatItemActionsPopupProps) => {
+export const ChatItemActionsPopup = ({ id, setRename, ...props }: ChatItemActionsPopupProps) => {
 	const { onRemoveChat } = useChatActions()
 
 	const isMobile = useMediaQuery({ query: '(max-width: 1000px)' })
@@ -27,6 +27,7 @@ export const ChatItemActionsPopup = ({ id, setRename }: ChatItemActionsPopupProp
 			horizontal='right'
 			className={styles.container}
 			id={id}
+      {...props}
 		>
 			<div className={styles.popup}>
 				<button
@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react'
+import React, { Dispatch, SetStateAction, createRef, useEffect, useMemo, useState } from 'react'
 import axios from 'axios'
 import { useSession } from 'next-auth/react'
 
@@ -33,11 +33,17 @@ export function useChats() {
 		setCurrentChat(data[0].uid)
 	})
 
+	const chatsWithRefs = useMemo(
+		() => chats.map((c) => ({ ...c, ref: createRef<HTMLButtonElement>() })),
+		[chats]
+	)
+
 	return {
 		chat,
 		chats,
 		fetchChats,
 		createChat,
 		setCurrentChat,
+		chatsWithRefs,
 	}
 }
@@ -2,6 +2,7 @@ import React from 'react'
 import { CommonTextArea } from '#/shared/ui/common-textarea'
 import { CommonTooltip } from '#/shared/ui/tooltip'
 import styles from './input-filter.module.scss'
+import { isNumericString } from '#/shared'
 
 interface InputFilterProps {
 	title: string
@@ -9,6 +10,7 @@ interface InputFilterProps {
 	description: string
 	setValue: (value: string) => void
 	withoutTooltip?: boolean
+	onlyNumber?: boolean
 }
 
 export const InputFilter = ({
@@ -17,6 +19,7 @@ export const InputFilter = ({
 	title,
 	description,
 	withoutTooltip = false,
+	onlyNumber = false,
 }: InputFilterProps) => {
 	return (
 		<div>
@@ -35,7 +38,11 @@ export const InputFilter = ({
 						e.target.style.height = 'auto'
 						e.target.style.height = Math.min(e.target.scrollHeight, 177) + 'px'
 
-						setValue(e.target.value)
+						setValue(
+							onlyNumber && !isNumericString(e.target.value)
+								? value
+								: e.target.value
+						)
 					}}
 				/>
 			</CommonTooltip>
@@ -1,10 +1,11 @@
 import { FormEventHandler, KeyboardEventHandler, useState } from 'react'
 
 export function useModelInput(
+	value: string,
+	setValue: (value: string) => void,
 	sendMessage: (message: string) => void,
-	setFile: (file: File | null) => void
+	setFile: (file: File | null) => void,
 ) {
-	const [value, setValue] = useState('')
 
 	const onInputHeightCorrect: FormEventHandler = ({ target }) => {
 		;(target as HTMLTextAreaElement).style.height =
@@ -27,8 +28,6 @@ export function useModelInput(
 	return {
 		onInputHeightCorrect,
 		keyDownSend,
-		value,
-		setValue,
 		onSendMessage,
 	}
 }
@@ -13,6 +13,8 @@ import { CommonSendButton } from '#/shared/ui/common-send-button'
 import { CommonLoadFile } from '#/shared/common-load-file'
 
 export interface ModelInputProps {
+	value: string
+	setValue: (value: string) => void
 	file: File | null
 	setFile: (file: File | null) => void
 	sendMessage: (message: string) => void
@@ -22,6 +24,8 @@ export interface ModelInputProps {
 }
 
 export const ModelInput = ({
+	value,
+	setValue,
 	file,
 	sendMessage,
 	setFile,
@@ -31,7 +35,9 @@ export const ModelInput = ({
 }: ModelInputProps) => {
 	const { loading } = useChatBotMessages()
 
-	const { onInputHeightCorrect, keyDownSend, value, setValue, onSendMessage } = useModelInput(
+	const { onInputHeightCorrect, keyDownSend, onSendMessage } = useModelInput(
+		value,
+		setValue,
 		sendMessage,
 		setFile
 	)
@@ -46,7 +52,7 @@ export const ModelInput = ({
 				value={value}
 				onInput={onInputHeightCorrect}
 				onKeyDown={keyDownSend}
-        rows={1}
+				rows={1}
 				placeholder={
 					blocked ? 'Ввод текста недоступен для этой модели' : 'Ваше сообщение'
 				}
@@ -0,0 +1,14 @@
+import { RefObject } from 'react'
+
+export function isBottom(
+	ref: RefObject<HTMLElement>,
+	scrollableRef: RefObject<HTMLElement>,
+	offset: number = 80
+) {
+	const [{ current }, { current: refCurrent }] = [scrollableRef, ref]
+	if (!current || !refCurrent) return false
+
+  console.log(current.offsetHeight - refCurrent.offsetTop)
+
+	return current.offsetHeight - refCurrent.offsetTop < offset
+}
@@ -11,3 +11,9 @@ export function commaSeparated(input: number | string | null | undefined): strin
 		return ''
 	}
 }
+
+export function isNumericString(str: string) {
+	if (typeof str !== 'string') return false
+	const num = Number(str)
+	return !Number.isNaN(num)
+}
@@ -47,7 +47,7 @@
 	outline: none;
 	font-size: 16px;
 	width: 100%;
-	font-family: '__Raleway_9d395e' !important;
+	font-family: inherit;
 
 	&:focus {
 		border: none;
@@ -29,10 +29,6 @@ export const CommonSelect = ({
 
 	const item = useMemo(() => items.find((i) => i.value === value), [items, value])
 
-	useEffect(() => {
-		console.log(opened)
-	}, [opened])
-
 	return (
 		<div
 			// onMouseDown={(event) =>
@@ -64,7 +60,7 @@ export const CommonSelect = ({
 							<CommonTooltip
 								position='left'
 								title={label}
-                key={item.value}
+								key={item.value}
 								className={styles.list__wrap}
 								description={description}
 								disabled={withoutTooltip}
@@ -1,8 +1,9 @@
 import { c } from '#/shared/lib/helpers'
 import { FieldError } from 'react-hook-form'
 import styles from './common-textarea.module.scss'
-import React, { ForwardedRef, forwardRef, useEffect } from 'react'
+import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle } from 'react'
 import { Raleway } from 'next/font/google'
+import { useMask } from '@react-input/mask'
 
 export type TextAreaVariant = 'default' | 'outline'
 
@@ -60,7 +61,7 @@ export const CommonTextArea = forwardRef<HTMLTextAreaElement, CommonTextAreaProp
 						styles[`wrapper_${variant}`],
 						disabled && styles[`wrapper_${variant}_disabled`],
 						error && styles.wrapper_error,
-            wrapperClassName
+						wrapperClassName
 					)}
 				>
 					<textarea
@@ -8,12 +8,16 @@ import { Transition, TransitionStatus } from 'react-transition-group'
 
 export type PopupTemplateVariant = 'primary'
 
-interface PopupTemplateProps extends React.HTMLAttributes<HTMLDivElement> {
+export type PopupTemplateVertical = 'top' | 'bottom'
+
+export type PoputTemplateHorizontal = 'left' | 'right' | 'center'
+
+export interface PopupTemplateProps extends React.HTMLAttributes<HTMLDivElement> {
 	id: string
 	variant?: PopupTemplateVariant
 	className?: string
-	vertical?: 'top' | 'bottom'
-	horizontal?: 'left' | 'right' | 'center'
+	vertical?: PopupTemplateVertical
+	horizontal?: PoputTemplateHorizontal
 	hasMobileTransform?: boolean
 	onlyMobile?: boolean
 }
@@ -38,24 +42,21 @@ const Template = ({
 
 	const ref = useRef(null)
 
-	const opened = useMemo(() => {
-		return !hasMobileTransform ? modal.state : isMobile && modal.state
-	}, [isMobile, modal.state])
-
 	return (
-		<Transition timeout={400} in={opened} unmountOnExit nodeRef={ref}>
+		<Transition timeout={400} in={modal.state} unmountOnExit nodeRef={ref}>
 			{(state) => (
 				<div
 					ref={ref}
-					style={{ display: !hasMobileTransform && isMobile ? 'none' : 'block' }}
 					className={c(
 						styles.popup,
 						styles[`popup_${variant}`],
 						!isMobile && styles[`popup_horizontal-${horizontal}`],
 						!isMobile && styles[`popup_vertical-${vertical}`],
 						styles[`popup_${state}`],
-						hasMobileTransform && styles.popup_mobtransform,
-						hasMobileTransform && styles[`popup_mobtransform_${state}`],
+						hasMobileTransform && isMobile && styles.popup_mobtransform,
+						hasMobileTransform &&
+							isMobile &&
+							styles[`popup_mobtransform_${state}`],
 						className
 					)}
 					{...props}
@@ -4,11 +4,13 @@ import styles from './common-tooltip.module.scss'
 import { c } from '#/shared/lib/helpers'
 import { CSSTransition, Transition, TransitionStatus } from 'react-transition-group'
 
-interface CommonTooltipProps extends HTMLAttributes<HTMLDivElement> {
+export type CommonTooltipPosition = 'bottom' | 'left'
+
+export interface CommonTooltipProps extends HTMLAttributes<HTMLDivElement> {
 	content?: string | React.ReactNode
 	title?: string
 	description?: string
-	position?: 'bottom' | 'left'
+	position?: CommonTooltipPosition
 	disabled?: boolean
 }
 
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 import { ChatMessagesList } from '#/widgets/messages'
 
 import BlockedSvg from '#/assets/svg/blocked.svg?react'
@@ -34,13 +34,17 @@ export function AllChatWindow<T>({ setOpenFiltersMobile }: ChatProps) {
 		[inputs]
 	)
 
+	const [valueInput, setValueInput] = useState('')
+
 	return (
 		<>
 			<div className={c(styles.wrap, model && !!model.tags.length && styles.wrap_tags)}>
-				<ChatMessagesList model={model} />
+				<ChatMessagesList model={model} setValueInput={setValueInput} />
 
 				<div className={c(styles.wrap__inputx)}>
 					<ModelInput
+						value={valueInput}
+						setValue={setValueInput}
 						file={file}
 						setFile={setFile}
 						viewMobileSettings={() => setOpenFiltersMobile((x) => !x)}
@@ -1,4 +1,4 @@
-import React, { HtmlHTMLAttributes, useEffect } from 'react'
+import React, { HtmlHTMLAttributes, RefObject, useEffect, useMemo, useRef } from 'react'
 
 import { useChats } from '#/features/chats'
 import { c } from '#/shared'
@@ -9,11 +9,14 @@ import PlusSvg from '#/assets/svg/plus.svg?react'
 import { ChatButton, useChatActions } from '#/entities/chat'
 import { useChatBotParams } from '#/entities/model-entity'
 import { CommonScrollbar } from '#/shared/ui/scrollbar'
+import { isBottom } from '#/shared/lib/helpers/refs'
 
 export interface ChatProps extends HtmlHTMLAttributes<HTMLDivElement> {}
 
 export const Chats = ({ className, ...props }: ChatProps) => {
-	const { chats, fetchChats } = useChats()
+	const { fetchChats, chatsWithRefs } = useChats()
+
+	const scrollableRef = useRef<HTMLDivElement>(null)
 
 	const { onCreateChat } = useChatActions()
 
@@ -39,9 +42,14 @@ export const Chats = ({ className, ...props }: ChatProps) => {
 					</button>
 				</CommonTooltip>
 			</div>
-			<div className={c(styles.controls)}>
-				{chats.map((chat) => (
-					<ChatButton key={chat.uid} {...chat} />
+			<div ref={scrollableRef} className={c(styles.controls)}>
+				{chatsWithRefs.map(({ ref, ...chat }, index) => (
+					<ChatButton
+						ref={ref}
+						popupVertical={isBottom(ref, scrollableRef) ? 'bottom' : 'top'}
+						key={chat.uid}
+						{...chat}
+					/>
 				))}
 			</div>
 		</div>
@@ -10,20 +10,26 @@ import { useRouter } from 'next/router'
 import { useChatBotMessages } from '#/entities/message'
 import { PreviewView } from '.'
 import { CSSTransition, SwitchTransition, TransitionGroup } from 'react-transition-group'
+import { isBottom } from '#/shared/lib/helpers/refs'
 
 interface IMessagesList {
 	model: Model | null
+	setValueInput: (value: string) => void
 }
 
-export const ChatMessagesList: React.FC<IMessagesList> = ({ model }) => {
+export const ChatMessagesList: React.FC<IMessagesList> = ({ model, setValueInput }) => {
 	const { currentChat } = useCurrentChat()
 
 	const { query } = useRouter()
 
-	const { refScroll, scrollContainer, onObserverMounted, loading, loaded } =
-		useChatBotPagination()
-
-	const { messages } = useChatBotMessages()
+	const {
+		refScroll,
+		scrollContainer: sContainer,
+		onObserverMounted,
+		loading,
+		loaded,
+		messagesWithRefs,
+	} = useChatBotPagination()
 
 	useEffect(() => {
 		if (!currentChat) return
@@ -52,17 +58,17 @@ export const ChatMessagesList: React.FC<IMessagesList> = ({ model }) => {
 			<SwitchTransition>
 				<CSSTransition
 					timeout={400}
-					key={loaded && !messages.length ? 'preview' : 'list'}
+					key={loaded && !messagesWithRefs.length ? 'preview' : 'list'}
 					nodeRef={transitionRef}
 					classNames='my-node'
 				>
-					{loaded && !messages.length ? (
+					{loaded && !messagesWithRefs.length ? (
 						<div className={styles.preview} ref={transitionRef}>
-							<PreviewView setValue={() => {}} />
+							<PreviewView setValue={(value) => setValueInput(value)} />
 						</div>
 					) : (
 						<div className={styles.list} ref={transitionRef}>
-							<CommonScrollbar blockedScrollTop ref={scrollContainer}>
+							<CommonScrollbar blockedScrollTop ref={sContainer}>
 								{loading && (
 									<div className={styles.list__scroll}>
 										<Loader />
@@ -70,13 +76,16 @@ export const ChatMessagesList: React.FC<IMessagesList> = ({ model }) => {
 								)}
 								<div className={c(styles.observed)} ref={refScroll}></div>
 								<TransitionGroup>
-									{messages.map((message, idx) => (
+									{messagesWithRefs.map(({ ref, ...message }, idx) => (
 										<CSSTransition
 											key={message.uid}
 											timeout={400}
 											classNames='my-node'
 										>
 											<IsNextDay
+												ref={ref}
+												tooltipPosition={'bottom'}
+												key={message.uid}
 												model={model}
 												message={message}
 												index={idx - 1}
@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from 'react'
+import React, { forwardRef, memo, useMemo } from 'react'
 import { Box, Typography } from '@mui/material'
 
 import { getDateFromString } from '#/widgets/messages/lib/date-from-string'
@@ -9,42 +9,54 @@ import { useThemeAndDevice } from '#/shared/lib/hooks'
 import { Model } from '#/entities/model-entity'
 import { Loader, c } from '#/shared'
 import styles from './is-next-day.module.scss'
+import { CommonTooltipPosition } from '#/shared/ui/tooltip'
 
-interface IProps {
+interface IsNextDayProps {
 	message: Message
 	index: number
 	model: Model | null
+	tooltipPosition?: CommonTooltipPosition
+
 	// setModal: (value: boolean) => void
 	// setCurrentSrc: (value: string) => void
 }
 
-export const IsNextDay = memo(({ message, index, model }: IProps) => {
-	const { messages } = useChatBotMessages()
-
-	const date = getDateFromString(message.created_at)
-	const prevDate = getDateFromString(messages[index]?.created_at)
-
-	const dateVisible = useMemo(() => {
-		if (!date) return false
-		if (!prevDate) return true
-		if (date.day > prevDate.day && date.month === prevDate.month) return true
-		return false
-	}, [date, prevDate])
-
-	if (!model) return <Loader />
-
-	return (
-		<>
-			{dateVisible && (
-				<p className={c(styles.date)}>{getDayMontsString(message.created_at)}</p>
-			)}
-			{message.from_model ? (
-				<BotMessage model={model} message={message} />
-			) : (
-				<UserMessage key={message.uid} model={model} message={message} />
-			)}
-		</>
-	)
-})
-
-IsNextDay.displayName = 'IsNextDay'
+export const IsNextDay = forwardRef<any, IsNextDayProps>(
+	({ message, index, model, tooltipPosition = 'bottom' }, ref) => {
+		const { messages } = useChatBotMessages()
+
+		const date = getDateFromString(message.created_at)
+		const prevDate = getDateFromString(messages[index]?.created_at)
+
+		const dateVisible = useMemo(() => {
+			if (!date) return false
+			if (!prevDate) return true
+			if (Number(date.day) > Number(prevDate.day) && date.month === prevDate.month) return true
+			return false
+		}, [])
+
+		if (!model) return <Loader />
+
+		return (
+			<>
+				{dateVisible && <p className={c(styles.date)}>{getDayMontsString(message.created_at)}</p>}
+				{message.from_model ? (
+					<BotMessage
+						ref={ref}
+						tooltipPosition={tooltipPosition}
+						model={model}
+						message={message}
+					/>
+				) : (
+					<UserMessage
+						ref={ref}
+						tooltipPosition={tooltipPosition}
+						key={message.uid}
+						model={model}
+						message={message}
+					/>
+				)}
+			</>
+		)
+	}
+)
@@ -5,6 +5,6 @@
 	"trailingComma": "es5",
 	"jsxBracketSameLine": false,
 	"semi": false,
-	"printWidth": 100,
+	"printWidth": 110,
 	"jsxSingleQuote": true
 }
@@ -19,6 +19,7 @@
 				"@mui/styled-engine-sc": "^5.11.11",
 				"@mui/x-date-pickers": "^6.6.0",
 				"@next/bundle-analyzer": "^13.4.3",
+				"@react-input/mask": "^2.0.4",
 				"@reduxjs/toolkit": "^1.9.5",
 				"@sentry/nextjs": "^9.12.0",
 				"@sentry/webpack-plugin": "^3.3.1",
@@ -4536,6 +4537,49 @@
 				"@opentelemetry/api": "^1.8"
 			}
 		},
+		"node_modules/@react-input/core": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/@react-input/core/-/core-2.0.2.tgz",
+			"integrity": "sha512-xLLBueYFbant9308uv3cIJQz5NYSixeGspjP3Nt6jogRHTcHYMRmlVFUuSzQiP8Z8/5BdnPkudRSsN0/AJ1fbw==",
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/react-input"
+			},
+			"peerDependencies": {
+				"@types/react": ">=16.8",
+				"react": ">=16.8 || ^19.0.0-rc",
+				"react-dom": ">=16.8 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@react-input/mask": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/@react-input/mask/-/mask-2.0.4.tgz",
+			"integrity": "sha512-NOielvQSBOlGLVuEcxtkjaGneC0GJFXjC7KOF99ed9H9XSDruWnQirjht5uSbWqLeeiOup0VD2YjM+6FH+aWBg==",
+			"license": "MIT",
+			"dependencies": {
+				"@react-input/core": "^2.0.2"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/react-input"
+			},
+			"peerDependencies": {
+				"@types/react": ">=16.8",
+				"react": ">=16.8 || ^19.0.0-rc",
+				"react-dom": ">=16.8 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@reduxjs/toolkit": {
 			"version": "1.9.7",
 			"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.7.tgz",
@@ -42,6 +42,7 @@
 		"@mui/styled-engine-sc": "^5.11.11",
 		"@mui/x-date-pickers": "^6.6.0",
 		"@next/bundle-analyzer": "^13.4.3",
+		"@react-input/mask": "^2.0.4",
 		"@reduxjs/toolkit": "^1.9.5",
 		"@sentry/nextjs": "^9.12.0",
 		"@sentry/webpack-plugin": "^3.3.1",