@@ -28,9 +28,6 @@ export const ChatButton = forwardRef<HTMLButtonElement, ChatButtonProps>(
 
 		const popup = getPopupById(uid)
 
-		useEffect(() => {
-			if (chat !== uid) popup.setState(false)
-		}, [chat])
 
 		return (
 			<button
@@ -69,10 +66,13 @@ export const ChatButton = forwardRef<HTMLButtonElement, ChatButtonProps>(
 								onClick={() => popup.toogleState()}
 							>
 								<ChatSettingsSvg width={18} height={18} />
+								<ChatItemActionsPopup
+									setRename={setRename}
+									id={uid}
+								/>
+								<ChatMobileRename id={uid} />
 							</button>
 						)}
-						<ChatItemActionsPopup vertical={popupVertical} setRename={setRename} id={uid} />
-						<ChatMobileRename id={uid} />
 					</div>
 				)}
 			</button>
@@ -43,7 +43,7 @@ export function useUserMessageActions(message: Message) {
 
 		const { messages } = useChatBotMessages.getState()
 
-		setMessages([...messages.filter((m) => m.uid !== 'new-send'), data as Message])
+		setMessages([...messages.filter((m) => m.uid !== 'new-send'), ...(data as Message[])])
 	})
 
 	return {
@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useMemo, useState } from 'react'
+import React, { forwardRef, memo, useEffect, useMemo, useState } from 'react'
 import styles from './bot-message.module.scss'
 
 import { Markdown } from '#/widgets/markdown/markdown'
@@ -65,9 +65,9 @@ export const BotMessage = forwardRef<any, BotMessageProps>(
 									onClick={() => popup.toogleState({ content })}
 								>
 									<MenuSvg width={22} height={22} color='#ACB1BB' />
+									<UserMessageActionsPopup horizontal='left' id={message.uid} />
 								</button>
 							</CommonTooltip>
-							<UserMessageActionsPopup id={message.uid} />
 						</div>
 					</div>
 				</div>
@@ -20,8 +20,8 @@ interface UserMessageProps {
 	tooltipPosition?: CommonTooltipPosition
 }
 
-export const UserMessage = memo(
-	forwardRef<any, UserMessageProps>(({ message, model, tooltipPosition = 'bottom' }, ref) => {
+export const UserMessage = forwardRef<any, UserMessageProps>(
+	({ message, model, tooltipPosition = 'bottom' }, ref) => {
 		const { loaded, setLoaded, fileIsImage, fileName } = useUserMessageImage(message)
 
 		const { resend } = useUserMessageActions(message)
@@ -100,5 +100,5 @@ export const UserMessage = memo(
 				</div>
 			</div>
 		)
-	})
+	}
 )
@@ -20,10 +20,6 @@ export function useChatBot() {
 
 	const { query, push } = useRouter()
 
-	useEffect(() => {
-		console.log(inferenceParams)
-	}, [inferenceParams])
-
 	const fetchBotParams = makePrivateRequest(async () => {
 		const { status, data } = await getBotParams(query.slug as string)
 
@@ -23,11 +23,10 @@ export const ChatItemActionsPopup = ({ id, setRename, ...props }: ChatItemAction
 	return (
 		<PopupTemplate
 			hasMobileTransform
-			vertical='top'
 			horizontal='right'
 			className={styles.container}
 			id={id}
-      {...props}
+			{...props}
 		>
 			<div className={styles.popup}>
 				<button
@@ -40,7 +39,7 @@ export const ChatItemActionsPopup = ({ id, setRename, ...props }: ChatItemAction
 					}}
 				>
 					<Rename2Svg width={21} height={16} />
-					<span>Переименовать</span>
+					<span style={{ width: 'max-content' }}>Переименовать</span>
 				</button>
 				<button onClick={() => onRemoveChat(id)} className={styles.popup__button}>
 					<TrashSvg width={21} height={14} />
@@ -22,7 +22,6 @@ export const ChatMobileRename = ({ id }: ChatMobileRenameProps) => {
 	return (
 		<PopupTemplate
 			hasMobileTransform
-			vertical='top'
 			horizontal='right'
 			className={styles.container}
 			onlyMobile
@@ -120,10 +120,6 @@ export function useChatMessageActions() {
 		dispatch(getUserBalance(session?.access))
 	})
 
-	useEffect(() => {
-		console.log(messages)
-	}, [messages])
-
 	async function deleteMessage(uid: string) {
 		if (!currentChat) return
 
@@ -1,4 +1,4 @@
-import { PopupTemplate, getPopupById } from '#/shared/ui/popup'
+import { PopupTemplate, PoputTemplateHorizontal, getPopupById } from '#/shared/ui/popup'
 import React from 'react'
 import CopySvg from '#/assets/svg/copy.svg?react'
 import TrashSvg from '#/assets/svg/trash.svg?react'
@@ -9,17 +9,23 @@ import { useChatMessageActions } from '#/features/use-chat-message-actions'
 
 interface UserMessageActionsPopupProps {
 	id: string
+	horizontal?: PoputTemplateHorizontal
 }
 
-export const UserMessageActionsPopup = ({ id }: UserMessageActionsPopupProps) => {
+export const UserMessageActionsPopup = ({ id, horizontal = 'right' }: UserMessageActionsPopupProps) => {
 	const { deleteMessage } = useChatMessageActions()
 
 	const popup = getPopupById(id)
 
-  const content = popup.getStoreProperty<string>('content')!
+	const content = popup.getStoreProperty<string>('content')!
 
 	return (
-		<PopupTemplate horizontal='right' vertical='top' className={styles.container} id={id}>
+		<PopupTemplate
+			onClick={() => popup.setState(false)}
+			horizontal={horizontal}
+			className={styles.container}
+			id={id}
+		>
 			<div className={styles.popup}></div>
 			<button
 				className={styles.popup__button}
@@ -8,7 +8,5 @@ export function isBottom(
 	const [{ current }, { current: refCurrent }] = [scrollableRef, ref]
 	if (!current || !refCurrent) return false
 
-  console.log(current.offsetHeight - refCurrent.offsetTop)
-
 	return current.offsetHeight - refCurrent.offsetTop < offset
 }
@@ -26,7 +26,7 @@ function makePopupInstance(set: Set, get: Get, key: string) {
 		toogleState(store) {
 			const popups = get().popups
 
-			this.setState(!popups[key].state, store)
+			this.setState(!popups[this.id].state, store)
 		},
 		setStoreProperty(key, value) {
 			const popups = get().popups
@@ -62,13 +62,15 @@ export interface PopupStore {
 	popups: Record<string, Popup>
 	setPopup: (key: string) => void
 	getPopup: (key: string) => Popup
-  hideAllPopups: () => void
+	hideAllPopups: () => void
 }
 
 export const usePopupStore = create<PopupStore>((set, get) => {
 	const popups: Record<string, Popup> = {}
 
 	function setPopup(key: string) {
+		if (get().popups[key]) return
+
 		set((state) => ({
 			popups: {
 				...state.popups,
@@ -79,23 +81,20 @@ export const usePopupStore = create<PopupStore>((set, get) => {
 
 	function hideAllPopups() {
 		set((state) => ({
-      popups: Object.fromEntries(
-        Object.entries(state.popups).map(([key, popup]) => [key, { ...popup, state: false }])
-      ),
+			popups: Object.fromEntries(
+				Object.entries(state.popups).map(([key, popup]) => [key, { ...popup, state: false }])
+			),
 		}))
 	}
 
 	function getPopup(key: string) {
-		return (
-			get().popups[key] ??
-			Object.assign({}, makePopupInstance(set, get, key))
-		)
+		return get().popups[key] ?? Object.assign({}, makePopupInstance(set, get, key))
 	}
 
 	return {
 		popups,
 		setPopup,
 		getPopup,
-    hideAllPopups,
+		hideAllPopups,
 	}
 })
@@ -10,11 +10,11 @@
 
 	background-color: rgba(0, 0, 0, 0.1);
 
+  &_open {
+    visibility: visible;
+    opacity: 1;
+    z-index: 10000;
+  }
 	@media screen and (max-width: 1000px) {
-		&_open {
-			visibility: visible;
-			opacity: 1;
-			z-index: 10000;
-		}
 	}
 }
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
 
 import styles from './backdrop.module.scss'
 import { usePopupStore } from '../model'
@@ -7,18 +7,16 @@ import { c } from '#/shared/lib/helpers'
 export const PopupBackdrop = () => {
 	const { popups, hideAllPopups } = usePopupStore()
 
-	const someIsOpened = useMemo(
-		() => Object.values(popups).some((popup) => popup.state),
-		[popups]
-	)
+	const someIsOpened = useMemo(() => Object.values(popups).some((popup) => popup.state), [popups])
+
+	useEffect(() => {
+		if (someIsOpened) window.document.body.style.overflow = 'hidden'
+	}, [someIsOpened])
 
 	return (
 		<div
 			onClick={() => hideAllPopups()}
-			className={c(
-				styles.backdrop,
-				someIsOpened && styles.backdrop_open
-			)}
+			className={c(styles.backdrop, someIsOpened && styles.backdrop_open)}
 		></div>
 	)
 }
@@ -2,12 +2,12 @@
 	display: flex;
 	flex-direction: column;
 
-	position: absolute;
+	position: fixed;
 	width: fit-content;
 	min-width: 100px;
 	min-height: 70px;
 	transition: opacity 0.3s ease-in-out;
-	z-index: 1000;
+	z-index: 100000;
 
 	&_exiting {
 		visibility: hidden;
@@ -39,14 +39,13 @@
 		padding: 35px;
 
 		border-radius: 13px 13px 0px 0px !important;
-		transition: transform 0.4s ease-in-out, visibility 0.2s ease-in-out,
-			opacity 0.2s ease-in-out;
+		transition: transform 0.4s ease-in-out, visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
 
 		* {
 			font-size: 16px;
 		}
 
-    &_exiting {
+		&_exiting {
 			transform: translateY(100%) !important;
 			visibility: hidden;
 			opacity: 0;
@@ -61,31 +60,21 @@
 		&_entered {
 			transform: translateY(0%) !important;
 			visibility: visible;
-      left: 0 !important;
+			left: 0 !important;
 			opacity: 1;
 		}
 	}
 
 	&_horizontal {
 		&-left {
-			left: 0;
 		}
 		&-right {
-			right: 0;
+			transform: translateX(-100%);
 		}
 		&-center {
-			left: 50%;
 			transform: translateX(-50%);
 		}
 	}
-	&_vertical {
-		&-top {
-			top: calc(100% + 10px);
-		}
-		&-bottom {
-			bottom: calc(100% + 10px);
-		}
-	}
 
 	&_primary {
 		background-color: var(--new-ui-main-color);
@@ -94,3 +83,8 @@
 		border: 1px solid rgba($color: #a4aab5, $alpha: 0.1);
 	}
 }
+
+.flag {
+	width: 0px;
+	height: 0px;
+}
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from 'react'
+import React, { RefObject, memo, useEffect, useMemo, useRef } from 'react'
 import styles from './template.module.scss'
 import { c } from '#/shared/lib/helpers'
 import { usePopupStore } from '../model'
@@ -16,71 +16,82 @@ export interface PopupTemplateProps extends React.HTMLAttributes<HTMLDivElement>
 	id: string
 	variant?: PopupTemplateVariant
 	className?: string
-	vertical?: PopupTemplateVertical
 	horizontal?: PoputTemplateHorizontal
 	hasMobileTransform?: boolean
 	onlyMobile?: boolean
 }
 
-const Template = ({
-	id,
-	children,
-	className,
-	variant = 'primary',
-	vertical = 'bottom',
-	horizontal = 'center',
-	hasMobileTransform = false,
-	...props
-}: PopupTemplateProps) => {
-	const { setPopup, getPopup } = usePopupStore()
+export interface Cordinates {
+	flagRef: RefObject<HTMLElement>
+}
 
-	const isMobile = useMemo(() => window.innerWidth < 1000, [])
+const Template = memo(
+	({
+		id,
+		children,
+		className,
+		variant = 'primary',
+		horizontal = 'center',
+		hasMobileTransform = false,
+		flagRef,
+		...props
+	}: PopupTemplateProps & Cordinates) => {
+		const { setPopup, getPopup } = usePopupStore()
 
-	const modal = getPopup(id)
+		const isMobile = useMemo(() => window.innerWidth < 1000, [])
 
-	useEffect(() => setPopup(id), [])
+		const modal = getPopup(id)
 
-	const ref = useRef(null)
+		useEffect(() => setPopup(id), [])
 
-	return (
-		<Transition timeout={400} in={modal.state} unmountOnExit nodeRef={ref}>
-			{(state) => (
-				<div
-					ref={ref}
-					className={c(
-						styles.popup,
-						styles[`popup_${variant}`],
-						!isMobile && styles[`popup_horizontal-${horizontal}`],
-						!isMobile && styles[`popup_vertical-${vertical}`],
-						styles[`popup_${state}`],
-						hasMobileTransform && isMobile && styles.popup_mobtransform,
-						hasMobileTransform &&
-							isMobile &&
-							styles[`popup_mobtransform_${state}`],
-						className
-					)}
-					{...props}
-				>
-					{children}
-				</div>
-			)}
-		</Transition>
-	)
-}
+		const nodeRef = useRef<HTMLDivElement>(null)
 
-export const PopupTemplate = (props: PopupTemplateProps) => {
-	const isMobile = useMemo(() => window.innerWidth < 1000, [])
+		const cordinates = useMemo(() => {
+			if (!flagRef.current) return
+			return flagRef.current.getBoundingClientRect()
+		}, [flagRef.current, flagRef.current?.getBoundingClientRect()])
+
+		return (
+			<Transition timeout={400} in={modal.state} unmountOnExit nodeRef={nodeRef}>
+				{(state) => (
+					<div
+						ref={nodeRef}
+						style={{
+							left: cordinates ? cordinates.right : 0,
+							top: cordinates ? cordinates.top : 0,
+						}}
+						className={c(
+							styles.popup,
+							styles[`popup_${variant}`],
+							styles[`popup_${state}`],
+							!isMobile && styles[`popup_horizontal-${horizontal}`],
+
+							hasMobileTransform && isMobile && styles.popup_mobtransform,
+							hasMobileTransform && isMobile && styles[`popup_mobtransform_${state}`],
+							className
+						)}
+						{...props}
+					>
+						{children}
+					</div>
+				)}
+			</Transition>
+		)
+	}
+)
+
+export const PopupTemplate = memo((props: PopupTemplateProps) => {
+	const ref = useRef<HTMLDivElement>(null)
 
 	return (
 		<ClientOnly>
-			{(isMobile && props.hasMobileTransform) || props.onlyMobile ? (
-				createPortal(
-					<Template {...props} />,
+			<>
+				{createPortal(
+					<Template flagRef={ref} {...props} />,
 					document.getElementById('popup-container')!
-				)
-			) : (
-				<Template {...props} />
-			)}
+				)}
+				<div ref={ref} className={c(styles.flag)}></div>
+			</>
 		</ClientOnly>
 	)
-}
+})
@@ -21,6 +21,16 @@
 	cursor: pointer;
 	user-select: none;
 
+	&::before {
+		content: '';
+		position: absolute;
+		height: 15px;
+    top: 50%;
+		transform: translateY(-50%);
+		width: 100%;
+		cursor: pointer;
+	}
+
 	&__thumb {
 		position: absolute;
 		top: 50%;
@@ -19,11 +19,7 @@ export const  RangeSlider = ({ value, title, onChange, min, max, step }: RangeSl
 		max,
 		step,
 	})
-
-  useEffect(() => {
-    console.log(value)
-  }, [value])
-
+  
 	return (
 		<>
 			<div className={styles.header}>
@@ -26,16 +26,6 @@ const Page: NextPageWithLayout<ChatBotPageProps> = () => {
 		fetchBotParams()
 	}, [query.slug])
 
-	useEffect(() => {
-		const source = new EventSource(
-			'https://learn.javascript.ru/article/server-sent-events/eventsource/digits'
-		)
-
-		source.addEventListener('message', () => {
-			console.log('message')
-		})
-	}, [])
-
 	return (
 		<main className={styles.page}>
 			<Head>
@@ -77,11 +77,7 @@ export const ChatMessagesList: React.FC<IMessagesList> = ({ model, setValueInput
 								<div className={c(styles.observed)} ref={refScroll}></div>
 								<TransitionGroup>
 									{messagesWithRefs.map(({ ref, ...message }, idx) => (
-										<CSSTransition
-											key={message.uid}
-											timeout={400}
-											classNames='my-node'
-										>
+										<CSSTransition key={idx} timeout={400} classNames='my-node'>
 											<IsNextDay
 												ref={ref}
 												tooltipPosition={'bottom'}