@@ -1,3 +1,5 @@
 <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.84 4.78667L1.24 1.32C1.14111 1.18815 1.23519 1 1.4 1H6.6C6.76481 1 6.85889 1.18815 6.76 1.32L4.16 4.78667C4.08 4.89333 3.92 4.89333 3.84 4.78667Z" fill="#868686" stroke="#868686" stroke-width="2"/>
-</svg>
+  <path
+    d="M3.84 4.78667L1.24 1.32C1.14111 1.18815 1.23519 1 1.4 1H6.6C6.76481 1 6.85889 1.18815 6.76 1.32L4.16 4.78667C4.08 4.89333 3.92 4.89333 3.84 4.78667Z"
+    fill="#868686" stroke="#868686" stroke-width="2" />
+</svg>
\ No newline at end of file
@@ -1,3 +1,4 @@
 <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 1.5L6 6.5L11 1.5" stroke="#A6A5A5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+  <path d="M1 1.5L6 6.5L11 1.5" stroke="#A6A5A5" stroke-width="1.5" stroke-linecap="round"
+    stroke-linejoin="round" />
+</svg>
\ No newline at end of file
@@ -0,0 +1,3 @@
+
+
+export * from './use-images-library'
\ No newline at end of file
@@ -0,0 +1,4 @@
+export interface ImageWithState {
+  image: string
+  state: boolean
+}
\ No newline at end of file
@@ -0,0 +1,71 @@
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react'
+import { ImageWithState } from './types'
+import { Message } from '@/src/shared/lib/types/model'
+
+export const useImagesLibrary = (
+	images: string[],
+	current: string | null,
+	reverse: boolean,
+	setModal: Dispatch<SetStateAction<boolean>>
+) => {
+	const [imagesWithState, setImagesWithState] = useState(getImagesWithState(images))
+	const [initialCount, setInitialCount] = useState(0)
+
+	const esc = (e: KeyboardEvent) => {
+		if (e.key === 'Escape') {
+			e.preventDefault()
+			setModal(false)
+		}
+	}
+
+	function getImagesWithState(images: string[]) {
+		const imagesWithState = images.map<ImageWithState>((image) => ({
+			image,
+			state: false,
+		}))
+
+		return imagesWithState
+	}
+
+	function updateImageState(image: string, state: boolean) {
+		setImagesWithState((prev) => prev.map((item) => (item.image === image ? { ...item, state } : item)))
+	}
+
+	const currentImageIndex = useMemo(
+		() => (!current ? undefined : imagesWithState.findIndex((image) => image.image === current)),
+		[imagesWithState, current]
+	)
+
+	useEffect(() => {
+		if (initialCount === images.length) {
+			return
+		}
+
+		setInitialCount(images.length)
+
+		const filteredMessages = images.filter((item) =>
+			!imagesWithState.find((i) => i.image === item) ? true : false
+		)
+
+		if (filteredMessages.length === images.length) {
+			return setImagesWithState(getImagesWithState(filteredMessages))
+		}
+
+		if (reverse) setImagesWithState([...imagesWithState, ...getImagesWithState(filteredMessages)])
+		else setImagesWithState([...getImagesWithState(filteredMessages), ...imagesWithState])
+	}, [images])
+
+	useEffect(() => {
+		window.addEventListener('keydown', esc)
+		return () => window.removeEventListener('keydown', esc)
+	}, [])
+
+	return {
+		imagesWithState,
+		currentImageIndex,
+		initialCount,
+		setInitialCount,
+		setImagesWithState,
+		updateImageState,
+	}
+}
@@ -0,0 +1,54 @@
+import { debounce } from 'lodash'
+import { useCallback, useEffect, useState } from 'react'
+import { Swiper as SwiperCore } from 'swiper'
+import { ImageWithState } from './types'
+
+export const useLibrarySwiper = (onSlideFalse: ((...args: any) => any) | undefined, reverse: boolean) => {
+	const [swiper, setSwiper] = useState<SwiperCore | null>(null)
+
+
+	const keydown = (e: KeyboardEvent) => {
+		if (e.key === 'ArrowRight') {
+			e.preventDefault()
+			slideNext()
+		}
+		if (e.key === 'ArrowLeft') {
+			e.preventDefault()
+			slidePrev()
+		}
+	}
+
+	const slidePrev = function () {
+		const result = swiper?.slidePrev()
+
+		if (!result && onSlideFalse && !reverse) {
+			onSlideFalse()
+		}
+	}
+
+	const slideNext = function () {
+		const result = swiper?.slideNext()
+
+		if (!result && onSlideFalse && reverse) {
+			onSlideFalse()
+		}
+	}
+
+	useEffect(() => {
+		document.addEventListener('keydown', keydown, true)
+		return () => {
+			document.removeEventListener('keydown', keydown, true)
+		}
+	}, [swiper])
+
+	// useEffect(() => {
+	// 	swiper?.slideTo(currentImageIndex || 0)
+	// }, [currentImageIndex])
+
+	return {
+		swiper,
+		setSwiper,
+		slidePrev,
+		slideNext,
+	}
+}
@@ -0,0 +1,193 @@
+import React, { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react'
+import Image from 'next/image'
+
+import styles from './modal-styles.module.scss'
+import { ArrowDropDown } from '@mui/icons-material'
+import { c, Loader, TooltipCustom } from '@/src/shared'
+import { useImagesLibrary } from '../model'
+
+import { Swiper, SwiperSlide } from 'swiper/react'
+import 'swiper/css'
+import { useLibrarySwiper } from '../model/use-swiper'
+import { ImageIcons, useImageIcons } from '@/src/widgets/messages'
+import { Message } from '@/src/shared/lib/types/model'
+import { Typography } from '@mui/material'
+
+interface IProps {
+	modal: boolean
+	setModal: Dispatch<SetStateAction<boolean>>
+	current: string | null
+	setCurrent?: (value: string | null) => void
+	onSlideFalse?: (...args: any) => any
+	reverse?: boolean
+	images: Message[]
+}
+
+export default function FullScreenModal({ modal, setModal, current, images, onSlideFalse, reverse = false }: IProps) {
+	const filteredMessages = useMemo(() => images.map((message) => message.file as string), [images])
+
+	const { imagesWithState, updateImageState, currentImageIndex, initialCount } = useImagesLibrary(
+		filteredMessages,
+		current,
+		reverse,
+		setModal
+	)
+
+	const { swiper, setSwiper, slideNext, slidePrev } = useLibrarySwiper(onSlideFalse, reverse)
+
+	const { downloadFile } = useImageIcons()
+
+	useEffect(() => {
+		if (!(initialCount < images.length && swiper)) return
+
+		if (reverse) {
+			setTimeout(() => swiper.slideTo(initialCount, 1000), 1000)
+			return
+		}
+
+		setTimeout(() => swiper.slideTo(images.length - initialCount - 1, 1000), 1000)
+	}, [images])
+
+	return (
+		<div
+			style={{
+				position: 'fixed',
+				zIndex: 1201,
+				top: 0,
+				left: 0,
+				width: '100%',
+				height: '100%',
+				display: modal ? 'block' : 'none',
+			}}
+			onClick={() => setModal(false)}
+		>
+			<div
+				style={{
+					position: 'absolute',
+					zIndex: 101,
+					width: '100%',
+					height: '100%',
+					backgroundColor: '#000000',
+					opacity: 0.9,
+				}}
+			></div>
+			<div className={styles.actions}>
+				<div>
+					<svg
+						onClick={(e) => {
+							e.stopPropagation()
+							if (!swiper) return
+							const { file, content } = images[swiper.activeIndex]
+							downloadFile(file as string, content)
+						}}
+						width='24'
+						height='24'
+						viewBox='0 0 15 15'
+						fill='none'
+						xmlns='http://www.w3.org/2000/svg'
+					>
+						<path
+							d='M1 10.75V11.5625C1 12.209 1.25681 12.829 1.71393 13.2861C2.17105 13.7432 2.79103 14 3.4375 14H11.5625C12.209 14 12.829 13.7432 13.2861 13.2861C13.7432 12.829 14 12.209 14 11.5625V10.75M10.75 7.5L7.5 10.75M7.5 10.75L4.25 7.5M7.5 10.75V1'
+							stroke='#767676'
+							strokeWidth='2'
+							strokeLinecap='round'
+							strokeLinejoin='round'
+						/>
+					</svg>
+				</div>
+				<div className={styles.link}>
+					<svg
+						onClick={(e) => {
+							e.stopPropagation()
+							if (!swiper) return
+							const { file } = images[swiper.activeIndex]
+							window.open(file as string, '_blank')
+						}}
+						width='24'
+						height='24'
+						viewBox='0 0 15 15'
+						fill='none'
+						xmlns='http://www.w3.org/2000/svg'
+					>
+						<path
+							d='M5.875 2.625H2.625C2.19402 2.625 1.7807 2.7962 1.47595 3.10095C1.1712 3.4057 1 3.81902 1 4.25V12.375C1 12.806 1.1712 13.2193 1.47595 13.524C1.7807 13.8288 2.19402 14 2.625 14H10.75C11.181 14 11.5943 13.8288 11.899 13.524C12.2038 13.2193 12.375 12.806 12.375 12.375V9.125M9.125 1H14M14 1V5.875M14 1L5.875 9.125'
+							stroke='#767676'
+							strokeWidth='2'
+							strokeLinecap='round'
+							strokeLinejoin='round'
+						/>
+					</svg>
+				</div>
+				<div className={styles.close_block} onClick={() => setModal(false)}>
+					<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+						<path
+							fillRule='evenodd'
+							clipRule='evenodd'
+							d='M0.487487 0.508814C0.799719 0.196362 1.22314 0.0208363 1.66464 0.0208363C2.10613 0.0208363 2.52955 0.196362 2.84178 0.508814L9.98959 7.66381L17.1374 0.508814C17.291 0.34963 17.4747 0.22266 17.6778 0.135311C17.881 0.0479631 18.0995 0.00198596 18.3205 6.29284e-05C18.5416 -0.0018601 18.7609 0.0403091 18.9655 0.124111C19.1701 0.207912 19.356 0.331667 19.5123 0.488155C19.6687 0.644643 19.7923 0.83073 19.876 1.03556C19.9597 1.24038 20.0019 1.45985 19.9999 1.68115C19.998 1.90245 19.9521 2.12115 19.8648 2.32449C19.7776 2.52783 19.6507 2.71174 19.4917 2.86548L12.3439 10.0205L19.4917 17.1755C19.795 17.4898 19.9628 17.9108 19.959 18.3478C19.9552 18.7848 19.7801 19.2028 19.4714 19.5118C19.1627 19.8209 18.7451 19.9961 18.3086 19.9999C17.872 20.0037 17.4514 19.8357 17.1374 19.5321L9.98959 12.3771L2.84178 19.5321C2.52776 19.8357 2.10718 20.0037 1.67063 19.9999C1.23407 19.9961 0.816472 19.8209 0.507769 19.5118C0.199066 19.2028 0.0239602 18.7848 0.0201666 18.3478C0.0163731 17.9108 0.184196 17.4898 0.487487 17.1755L7.63529 10.0205L0.487487 2.86548C0.175349 2.55293 0 2.12909 0 1.68715C0 1.24521 0.175349 0.82136 0.487487 0.508814Z'
+							fill='#767676'
+						/>
+					</svg>
+				</div>
+			</div>
+			<div className={styles.image_block}>
+				<button
+					className={c(styles.arrow, styles.arrow_left)}
+					onClick={(e) => {
+						e.stopPropagation()
+						slidePrev()
+					}}
+				>
+					<ArrowDropDown />
+				</button>
+				{modal && (
+					<Swiper
+						slidesPerView={'auto'}
+						spaceBetween={0}
+						className={styles.swiper}
+						simulateTouch={false}
+						initialSlide={currentImageIndex}
+						onSwiper={(swiper) => setSwiper(swiper)}
+					>
+						{imagesWithState.map(({ image, state }, index) => (
+							<SwiperSlide key={index} className={styles.slide}>
+								{!state && <Loader className={styles.loader} />}
+								<div className={styles.image_style}>
+									{!image.includes('.svg') ? (
+										<Image
+											onClick={(e) => e.stopPropagation()}
+											onLoadingComplete={() => {
+												updateImageState(image, true)
+											}}
+											loading='lazy'
+											src={image}
+											width={'1500'}
+											height={'1500'}
+											alt='К сожалению, изображение не загрузилось'
+										/>
+									) : (
+										<img
+											src={image}
+											onClick={(e) => e.stopPropagation()}
+											onLoad={() => updateImageState(image, true)}
+											alt='К сожалению, изображение не загрузилось'
+											className={styles.image_style}
+										/>
+									)}
+								</div>
+							</SwiperSlide>
+						))}
+					</Swiper>
+				)}
+				<button
+					className={c(styles.arrow, styles.arrow_right)}
+					onClick={(e) => {
+						e.stopPropagation()
+						slideNext()
+					}}
+				>
+					<ArrowDropDown />
+				</button>
+			</div>
+		</div>
+	)
+}
@@ -0,0 +1 @@
+export { default as ImageModal } from './full-screen-modal'
@@ -0,0 +1,105 @@
+.close_block {
+}
+.download {
+}
+.actions {
+	position: absolute;
+	z-index: 105;
+	cursor: pointer;
+	right: 25px;
+	top: 25px;
+	display: flex;
+	align-items: center;
+	gap: 15px;
+}
+
+.arrow {
+	position: absolute;
+	z-index: 1205;
+	cursor: pointer;
+	top: 50%;
+
+	width: 50px;
+	height: 50px;
+
+	background: transparent;
+	border: none;
+	outline: none;
+
+	svg {
+		fill: white;
+		width: 50px;
+		height: 50px;
+	}
+
+	&_left {
+		transform: translateY(-50%) rotate(90deg);
+		left: -40px;
+		@media screen and (max-width: 768px) {
+			left: -3px;
+		}
+	}
+
+	&_right {
+		transform: translateY(-50%) rotate(-90deg);
+		right: -50px;
+
+		@media screen and (max-width: 768px) {
+			right: -10px;
+		}
+	}
+}
+
+.image_block {
+	position: absolute;
+	padding: 0 20px;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 105;
+	margin: auto;
+	width: fit-content;
+	height: fit-content;
+}
+
+.loader {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.image_style {
+	width: auto;
+	max-width: 70vw;
+	height: 100%;
+	position: relative;
+	user-select: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+	img {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+		user-select: none;
+	}
+}
+
+.slide {
+	width: 80vw !important;
+	display: flex !important;
+	align-items: center;
+	justify-content: center;
+  height: 100% !important;
+  max-height: unset;
+}
+
+.swiper {
+	position: relative;
+	width: 100%;
+	max-width: 80vw;
+	max-height: 1000px;
+	height: 80vh;
+}
@@ -1,61 +0,0 @@
-import React, { Dispatch, SetStateAction } from 'react'
-import Image from 'next/image'
-
-import styles from './modal-styles.module.scss'
-
-interface IProps {
-	modal: boolean
-	setModal: Dispatch<SetStateAction<boolean>>
-	image: string
-}
-export default function FullScreenModal({ modal, setModal, image }: IProps) {
-	const isSvg = image.includes('.svg')
-
-	return (
-		<div
-			style={{
-				position: 'fixed',
-				zIndex: 102,
-				top: 0,
-				left: 0,
-				width: '100%',
-				height: '100%',
-				display: modal ? 'block' : 'none',
-			}}
-		>
-			<div
-				style={{
-					position: 'absolute',
-					zIndex: 101,
-					width: '100%',
-					height: '100%',
-					backgroundColor: '#000000',
-					opacity: 0.9,
-				}}
-			></div>
-			<div className={styles.close_block} onClick={() => setModal(false)}>
-				<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
-					<path
-						fillRule='evenodd'
-						clipRule='evenodd'
-						d='M0.487487 0.508814C0.799719 0.196362 1.22314 0.0208363 1.66464 0.0208363C2.10613 0.0208363 2.52955 0.196362 2.84178 0.508814L9.98959 7.66381L17.1374 0.508814C17.291 0.34963 17.4747 0.22266 17.6778 0.135311C17.881 0.0479631 18.0995 0.00198596 18.3205 6.29284e-05C18.5416 -0.0018601 18.7609 0.0403091 18.9655 0.124111C19.1701 0.207912 19.356 0.331667 19.5123 0.488155C19.6687 0.644643 19.7923 0.83073 19.876 1.03556C19.9597 1.24038 20.0019 1.45985 19.9999 1.68115C19.998 1.90245 19.9521 2.12115 19.8648 2.32449C19.7776 2.52783 19.6507 2.71174 19.4917 2.86548L12.3439 10.0205L19.4917 17.1755C19.795 17.4898 19.9628 17.9108 19.959 18.3478C19.9552 18.7848 19.7801 19.2028 19.4714 19.5118C19.1627 19.8209 18.7451 19.9961 18.3086 19.9999C17.872 20.0037 17.4514 19.8357 17.1374 19.5321L9.98959 12.3771L2.84178 19.5321C2.52776 19.8357 2.10718 20.0037 1.67063 19.9999C1.23407 19.9961 0.816472 19.8209 0.507769 19.5118C0.199066 19.2028 0.0239602 18.7848 0.0201666 18.3478C0.0163731 17.9108 0.184196 17.4898 0.487487 17.1755L7.63529 10.0205L0.487487 2.86548C0.175349 2.55293 0 2.12909 0 1.68715C0 1.24521 0.175349 0.82136 0.487487 0.508814Z'
-						fill='#767676'
-					/>
-				</svg>
-			</div>
-			<div className={styles.image_block}>
-				{!isSvg ? (
-					<Image
-						src={image}
-						width={'1500'}
-						height={'1500'}
-						alt='К сожалению, изображение не загрузилось'
-						className={styles.image_style}
-					/>
-				) : (
-					<img src={image} alt='К сожалению, изображение не загрузилось' className={styles.image_style} />
-				)}
-			</div>
-		</div>
-	)
-}
@@ -0,0 +1 @@
+export * from './ui'
@@ -1,30 +0,0 @@
-.close_block{
-    position: absolute;
-    z-index: 105;
-    cursor: pointer;
-    right: 25px;
-    top: 25px;
-}
-
-.image_block{
-    position: absolute;
-    padding: 0 20px;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 105;
-    margin: auto;
-    width: fit-content;
-    height: fit-content;
-}
-
-.image_style{
-    position: relative;
-    width: 100%;
-    height: 100%;
-    max-width: 960px;
-    max-height: 700px;
-    border-radius: 15px;
-    object-fit: contain;
-}
\ No newline at end of file
@@ -5,7 +5,7 @@ import axios from 'axios'
 import { UniqInput } from '@/src/main/components/uniq_input'
 import { useAppSelector } from '@/src/main/store/store'
 import { ChatProps } from '@/src/shared/lib/types/model'
-import { ChatMessagesList } from '@/src/widgets/messages/chat-messages-list'
+import { ChatMessagesList } from '@/src/widgets/messages/ui/chat-messages-list'
 
 import 'intro.js/introjs.css'
 
@@ -64,7 +64,13 @@ function Chat<T>({
 				spacing={0}
 				sx={{
 					borderRadius: desktop ? '15px' : '13px',
-					backgroundColor: desktop ? (theme === 'light' ? 'white' : '#151518') : theme === 'light' ? 'white' : '#151518',
+					backgroundColor: desktop
+						? theme === 'light'
+							? 'white'
+							: '#151518'
+						: theme === 'light'
+						? 'white'
+						: '#151518',
 					padding: desktop ? 4 : 1.5,
 					paddingTop: 0,
 					paddingBottom: 2,
@@ -24,7 +24,5 @@
 	height: 25px;
 	border-radius: 7px;
 	border: var(--new-ui-ctrl-f-button-border);
-	background: var(--new-ui-ctrl-f-button-bg);
-
-	
+	background: var(--new-ui-ctrl-f-button-bg);	
 }
@@ -25,7 +25,7 @@ import { getTypeDevice } from '@/src/shared/lib/helpers'
 import { getDeviceOs } from '@/src/shared/lib/helpers/get-type-device'
 import { useShowData } from '@/src/shared/lib/hooks'
 import { ArrowDownScroll } from '@/src/shared/ui/icon-components/scroll-down-arrow'
-import { ImageMessagesList } from '@/src/widgets/messages/image-messages-list'
+import { ImageMessagesList } from '@/src/widgets/messages/ui/image-messages-list'
 
 export async function getServerSideProps(context: any): Promise<{ props: any }> {
 	const deviceType = getTypeDevice(context)
@@ -55,7 +55,11 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 	const includeParams = useAppSelector((state) => state.params.params)
 	const dispatch = useDispatch()
 
-	const { messages, loading, createImage, isComplete, getMessagesPagination } = useModelImages<Setting>(showError, modelType, deviceType)
+	const { messages, loading, createImage, isComplete, getMessagesPagination } = useModelImages<Setting>(
+		showError,
+		modelType,
+		deviceType
+	)
 
 	const [chatScrollHeight, setChatScrollHeight] = React.useState(0)
 	const [scrollBottom, setScrollBottom] = React.useState(0)
@@ -73,14 +77,19 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 					dispatch(
 						setParametres(
 							res.parameters.reduce(
-								(a, v) => (v.versions.includes(res.versions[0].slug) ? { ...a, [v.key]: v.values.default } : { ...a }),
+								(a, v) =>
+									v.versions.includes(res.versions[0].slug)
+										? { ...a, [v.key]: v.values.default }
+										: { ...a },
 								{}
 							)
 						)
 					)
 				} else {
 					setVersion('')
-					dispatch(setParametres(res.parameters.reduce((a, v) => ({ ...a, [v.key]: v.values.default }), {})))
+					dispatch(
+						setParametres(res.parameters.reduce((a, v) => ({ ...a, [v.key]: v.values.default }), {}))
+					)
 				}
 			})
 			.catch((err) => {})
@@ -109,14 +118,19 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 				dispatch(
 					setParametres(
 						botParams.parameters.reduce(
-							(a, v) => (v.versions.includes(botParams.versions[0].slug) ? { ...a, [v.key]: v.values.default } : { ...a }),
+							(a, v) =>
+								v.versions.includes(botParams.versions[0].slug)
+									? { ...a, [v.key]: v.values.default }
+									: { ...a },
 							{}
 						)
 					)
 				)
 			} else {
 				setVersion(botParams.slug)
-				dispatch(setParametres(botParams.parameters.reduce((a, v) => ({ ...a, [v.key]: v.values.default }), {})))
+				dispatch(
+					setParametres(botParams.parameters.reduce((a, v) => ({ ...a, [v.key]: v.values.default }), {}))
+				)
 			}
 		}
 	}
@@ -128,13 +142,16 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 				dispatch(
 					setParametres(
 						botParams.parameters.reduce(
-							(a, v) => (v.versions.includes(version) ? { ...a, [v.key]: v.values.default } : { ...a }),
+							(a, v) =>
+								v.versions.includes(version) ? { ...a, [v.key]: v.values.default } : { ...a },
 							{}
 						)
 					)
 				)
 			} else {
-				dispatch(setParametres(botParams.parameters.reduce((a, v) => ({ ...a, [v.key]: v.values.default }), {})))
+				dispatch(
+					setParametres(botParams.parameters.reduce((a, v) => ({ ...a, [v.key]: v.values.default }), {}))
+				)
 			}
 		}
 	}
@@ -189,7 +206,11 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 	}, [isComplete])
 
 	const handleMobileScroll = () => {
-		setScrollBottom(refScrollMobile.current?.scrollHeight - refScrollMobile.current?.scrollTop - refScrollMobile.current?.clientHeight)
+		setScrollBottom(
+			refScrollMobile.current?.scrollHeight -
+				refScrollMobile.current?.scrollTop -
+				refScrollMobile.current?.clientHeight
+		)
 
 		if (refScrollMobile.current && messages?.length !== 0) {
 			const { scrollTop, scrollHeight, clientHeight } = refScrollMobile.current
@@ -247,7 +268,11 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 				justifyContent='space-between'
 				alignItems='start'
 				flexDirection={desktop ? 'row' : 'column-reverse'}
-				sx={{ marginBottom: desktop ? 0 : 3, width: desktop ? '97%' : '100%', marginTop: desktop ? 3 : '15px' }}
+				sx={{
+					marginBottom: desktop ? 0 : 3,
+					width: desktop ? '97%' : '100%',
+					marginTop: desktop ? 3 : '15px',
+				}}
 			>
 				<Box
 					sx={{
@@ -277,7 +302,12 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 								)}
 							</Stack>
 							<Box className={'bg-color-block border-radius-main'} sx={{ padding: '30px' }}>
-								<ImageMessagesList isComplete={isComplete} device={deviceType} images={messages} />
+								<ImageMessagesList
+									getMessagesPagination={() => getMessagesPagination(deviceType)}
+									isComplete={isComplete}
+									device={deviceType}
+									images={messages}
+								/>
 							</Box>
 						</>
 					) : (
@@ -319,7 +349,12 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 								className={'smallScroll'}
 								onScroll={handleMobileScroll}
 							>
-								<ImageMessagesList isComplete={isComplete} device={deviceType} images={messages} />
+								<ImageMessagesList
+									getMessagesPagination={() => getMessagesPagination(deviceType)}
+									isComplete={isComplete}
+									device={deviceType}
+									images={messages}
+								/>
 							</Box>
 							<Stack alignItems='center'>
 								{botParams && (
@@ -342,10 +377,21 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 					)}
 				</Box>
 				{desktop && (
-					<Stack spacing={2} className='pd-30 bg-color-block border-radius-main' sx={{ width: '25.5%', height: 'auto' }}>
+					<Stack
+						spacing={2}
+						className='pd-30 bg-color-block border-radius-main'
+						sx={{ width: '25.5%', height: 'auto' }}
+					>
 						{botParams?.versions && botParams.versions.length !== 0 ? (
 							<>
-								<Typography sx={{ color: '#A4AAB5', fontWeight: '600', fontSize: '14px', letterSpacing: '0.1px' }}>
+								<Typography
+									sx={{
+										color: '#A4AAB5',
+										fontWeight: '600',
+										fontSize: '14px',
+										letterSpacing: '0.1px',
+									}}
+								>
 									ВЕРСИИ
 								</Typography>
 								<ChatSelect
@@ -368,7 +414,14 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 									setParams(!params)
 								}}
 							>
-								<Typography sx={{ color: '#A4AAB5', fontWeight: '600', fontSize: '14px', letterSpacing: '0.1px' }}>
+								<Typography
+									sx={{
+										color: '#A4AAB5',
+										fontWeight: '600',
+										fontSize: '14px',
+										letterSpacing: '0.1px',
+									}}
+								>
 									ПАРАМЕТРЫ
 								</Typography>
 								<svg
@@ -392,10 +445,16 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 						{botParams && botParams.parameters?.length > 0 ? (
 							<Collapse in={params} orientation='vertical' collapsedSize={0} sx={{}}>
 								<BotParamsMap currentVersion={version} params={botParams?.parameters} />
-								<ResetFilters desktop={desktop} closeDrawer={hideMobileSettings} reset={resetParams} />
+								<ResetFilters
+									desktop={desktop}
+									closeDrawer={hideMobileSettings}
+									reset={resetParams}
+								/>
 							</Collapse>
 						) : (
-							<Typography sx={{ color: '#6e6e6e', fontSize: '15px', fontWeight: '500' }}>Параметры отсутствуют</Typography>
+							<Typography sx={{ color: '#6e6e6e', fontSize: '15px', fontWeight: '500' }}>
+								Параметры отсутствуют
+							</Typography>
 						)}
 					</Stack>
 				)}
@@ -438,10 +497,16 @@ const Images: React.FC<any> = ({ deviceType, deviceOs }) => {
 									ПАРАМЕТРЫ
 								</Typography>
 								<BotParamsMap currentVersion={version} params={botParams?.parameters} />
-								<ResetFilters closeDrawer={hideMobileSettings} desktop={desktop} reset={resetParams} />
+								<ResetFilters
+									closeDrawer={hideMobileSettings}
+									desktop={desktop}
+									reset={resetParams}
+								/>
 							</>
 						) : (
-							<Typography sx={{ color: '#6e6e6e', fontSize: '15px', fontWeight: '500' }}>Параметры отсутствуют</Typography>
+							<Typography sx={{ color: '#6e6e6e', fontSize: '15px', fontWeight: '500' }}>
+								Параметры отсутствуют
+							</Typography>
 						)}
 					</Stack>
 				</DrawerCustom>
@@ -31,6 +31,7 @@ export default function Document() {
 					</div>
 				</noscript>
 				<Main />
+				<div id='modal-container'></div>
 				<NextScript />
 			</body>
 		</Html>
@@ -236,7 +236,7 @@ export function useModelImages<T>(showError: (message: string) => void, type: st
 
 	const { getData, sendData } = ModelsWithImagesEndpoints
 
-	const [messages, setMessages] = useState<Message[] | null>(null)
+	const [messages, setMessages] = useState<Message[]>([])
 
 	const [loading, setLoading] = useState<boolean>(false)
 
@@ -0,0 +1,12 @@
+import dynamic from 'next/dynamic';
+
+type ClientOnlyProps = { children: JSX.Element };
+const ClientOnly = (props: ClientOnlyProps) => {
+  const { children } = props;
+
+  return children;
+};
+
+export default dynamic(() => Promise.resolve(ClientOnly), {
+  ssr: false,
+});
@@ -0,0 +1 @@
+export { default as ClientOnly } from './client-only'
@@ -0,0 +1 @@
+export * from './ui'
@@ -1,2 +1,3 @@
 export { getAccessToken } from './get-token'
 export { getTypeDevice } from './get-type-device'
+export * from './string'
@@ -0,0 +1,3 @@
+export const c = (...classes: string[]) => {
+	return classes.filter(Boolean).join(' ')
+}
@@ -3,10 +3,11 @@ import { Tooltip } from '@mui/material'
 
 import { useAppSelector } from '@/src/main/store/store'
 
-import styles from './styles.module.scss'
 interface Props {
 	title?: string
 	children: React.ReactNode
+	className?: string
+	maxWidth?: string
 	placement?:
 		| 'bottom-end'
 		| 'bottom-start'
@@ -21,11 +22,17 @@ interface Props {
 		| 'top-start'
 		| 'top'
 }
-export const TooltipCustom: React.FC<Props> = ({ children, title, placement }) => {
+export const TooltipCustom: React.FC<Props> = ({ children, title, placement, className, maxWidth }) => {
 	const theme = useAppSelector((state) => state.theme.theme)
 
 	return (
 		<Tooltip
+			onClick={(e) => e.stopPropagation()}
+			PopperProps={{
+				onClick(e) {
+					e.stopPropagation()
+				},
+			}}
 			componentsProps={{
 				tooltip: {
 					sx: {
@@ -33,6 +40,7 @@ export const TooltipCustom: React.FC<Props> = ({ children, title, placement }) =
 						color: '#7F7DF3',
 						fontSize: 15,
 						borderRadius: '10px',
+						maxWidth: maxWidth || 'auto',
 						padding: '10px 13px',
 						'& .MuiTooltip-arrow': {
 							color: theme === 'light' ? '#E8E8FA' : '#4B4B4B',
@@ -41,6 +49,7 @@ export const TooltipCustom: React.FC<Props> = ({ children, title, placement }) =
 					},
 				},
 			}}
+			className={className}
 			title={title}
 			arrow
 			placement={placement}
@@ -8,8 +8,10 @@ export { ButtonUI } from './ui/button/button'
 export { ButtonGray } from './ui/button/button-gray'
 export { CheckBoxAgreeWithRules } from './ui/check-box-agree-with-rules'
 export { DalleFilterMenu } from './ui/dalle-filter-menu'
+export * from './client-only'
 export * from './ui/drawer'
 export { Error } from './ui/error'
+export * from './lib/helpers'
 export * from './ui/graphics-main-page'
 export { Input, InputStyleDark, InputStyleLight } from './ui/input'
 export { InputImagesModels } from './ui/input-images-models/input-images-models'
@@ -1,9 +1,9 @@
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { Box, Menu, MenuItem, Skeleton, Slide, Typography } from '@mui/material'
 import Stack from '@mui/material/Stack'
 import Image from 'next/image'
 
-import FullScreenModal from '@/src/features/image-modal/full-screen-modal'
+import { ImageModal } from '@/src/features/image-modal'
 import { useAppSelector } from '@/src/main/store/store'
 import { TooltipCustom } from '@/src/shared'
 import { Message } from '@/src/shared/lib/types/model'
@@ -18,18 +18,19 @@ interface IMessagesList {
 	device: 'mobile' | 'desktop'
 	modelType: string
 	isNewMessage: boolean
+	setCurrentSrc: (value: string) => void
 	message: Message
+	setModal: (value: boolean) => void
 	deleteMessage?: (message_uid: string) => void
 	modelTitle: string | undefined
 	setResendValue: (value: string) => void
 	onLoadImage?: (event: React.ChangeEvent<HTMLInputElement> | null, file?: File) => void
 }
 
-export const UserMessage = React.memo(function UserMessage(props: IMessagesList) {
+export const UserMessage = React.memo(function UserMessage({ setModal, setCurrentSrc, ...props }: IMessagesList) {
 	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
 	const open = Boolean(anchorEl)
 	const desktop = props.device === 'desktop'
-	const [modal, setModal] = useState<boolean>(false)
 	const [loaded, setLoaded] = useState(false)
 
 	const copy = (text: string) => {
@@ -64,11 +65,15 @@ export const UserMessage = React.memo(function UserMessage(props: IMessagesList)
 
 	return (
 		<>
-			{props.message.file && <FullScreenModal modal={modal} setModal={setModal} image={props.message.file.toString()} />}
 			<span className='tutorial-message'>
 				{!props.message.from_model ? (
-					// <Slide className='tutorial-message-me' direction='left' in={props.isNewMessage} mountOnEnter unmountOnExit>
-					<Box>
+					<Slide
+						className='tutorial-message-me'
+						direction='left'
+						in={props.isNewMessage}
+						mountOnEnter
+						unmountOnExit
+					>
 						<Box
 							className='smallScroll'
 							sx={{
@@ -108,6 +113,8 @@ export const UserMessage = React.memo(function UserMessage(props: IMessagesList)
 										<Box sx={{ position: 'relative' }}>
 											<Image
 												onClick={() => {
+													if (!props.message.file) return
+													setCurrentSrc(props.message.file.toString())
 													setModal(true)
 												}}
 												onLoadingComplete={() => setLoaded(true)}
@@ -129,7 +136,8 @@ export const UserMessage = React.memo(function UserMessage(props: IMessagesList)
 											{!loaded && (
 												<Skeleton
 													sx={{
-														background: theme === 'dark' ? '#2d2d2f' : '#EFF0F2',
+														background:
+															theme === 'dark' ? '#2d2d2f' : '#EFF0F2',
 														position: 'absolute',
 														top: '0',
 														left: '0',
@@ -185,7 +193,13 @@ export const UserMessage = React.memo(function UserMessage(props: IMessagesList)
 																stroke='#A4AAB5'
 																strokeWidth='2'
 															/>
-															<circle cx='14.5' cy='4.5' r='3.5' stroke='#A4AAB5' strokeWidth='2' />
+															<circle
+																cx='14.5'
+																cy='4.5'
+																r='3.5'
+																stroke='#A4AAB5'
+																strokeWidth='2'
+															/>
 														</svg>
 													</TooltipCustom>
 												</Box>
@@ -198,12 +212,18 @@ export const UserMessage = React.memo(function UserMessage(props: IMessagesList)
 													onClick={handleClose}
 													sx={{
 														'& .MuiMenu-list': {
-															backgroundColor: theme === 'dark' ? '#303035' : '#EFF0F2',
+															backgroundColor:
+																theme === 'dark'
+																	? '#303035'
+																	: '#EFF0F2',
 															color: '#8280FF',
 															borderRadius: '15px',
 														},
 														'& .MuiPopover-paper': {
-															backgroundColor: theme === 'dark' ? '#303035' : '#EFF0F2',
+															backgroundColor:
+																theme === 'dark'
+																	? '#303035'
+																	: '#EFF0F2',
 															borderRadius: '15px',
 														},
 													}}
@@ -262,7 +282,8 @@ export const UserMessage = React.memo(function UserMessage(props: IMessagesList)
 															gap: '5px',
 														}}
 														onClick={() => {
-															if (props.deleteMessage) props.deleteMessage(props.message.uid)
+															if (props.deleteMessage)
+																props.deleteMessage(props.message.uid)
 														}}
 													>
 														<svg
@@ -308,7 +329,10 @@ export const UserMessage = React.memo(function UserMessage(props: IMessagesList)
 													fontWeight: '400px',
 													marginTop: 0.4,
 													textAlign: 'left',
-													whiteSpace: props.message.content.length > 30 ? 'pre-wrap' : 'pre',
+													whiteSpace:
+														props.message.content.length > 30
+															? 'pre-wrap'
+															: 'pre',
 												}}
 											>
 												{/*<Markdown content={props.message.content} />*/}
@@ -360,7 +384,13 @@ export const UserMessage = React.memo(function UserMessage(props: IMessagesList)
 															stroke='#A4AAB5'
 															strokeWidth='2'
 														/>
-														<circle cx='14.5' cy='4.5' r='3.5' stroke='#A4AAB5' strokeWidth='2' />
+														<circle
+															cx='14.5'
+															cy='4.5'
+															r='3.5'
+															stroke='#A4AAB5'
+															strokeWidth='2'
+														/>
 													</svg>
 												</TooltipCustom>
 											</Box>
@@ -373,12 +403,14 @@ export const UserMessage = React.memo(function UserMessage(props: IMessagesList)
 												onClick={handleClose}
 												sx={{
 													'& .MuiMenu-list': {
-														backgroundColor: theme === 'dark' ? '#303035' : '#EFF0F2',
+														backgroundColor:
+															theme === 'dark' ? '#303035' : '#EFF0F2',
 														color: '#8280FF',
 														borderRadius: '15px',
 													},
 													'& .MuiPopover-paper': {
-														backgroundColor: theme === 'dark' ? '#303035' : '#EFF0F2',
+														backgroundColor:
+															theme === 'dark' ? '#303035' : '#EFF0F2',
 														borderRadius: '15px',
 													},
 												}}
@@ -437,7 +469,8 @@ export const UserMessage = React.memo(function UserMessage(props: IMessagesList)
 														gap: '5px',
 													}}
 													onClick={() => {
-														if (props.deleteMessage) props.deleteMessage(props.message.uid)
+														if (props.deleteMessage)
+															props.deleteMessage(props.message.uid)
 													}}
 												>
 													<svg
@@ -483,7 +516,8 @@ export const UserMessage = React.memo(function UserMessage(props: IMessagesList)
 												fontWeight: '400px',
 												marginTop: 0.4,
 												textAlign: 'left',
-												whiteSpace: props.message.content.length > 30 ? 'pre-wrap' : 'pre',
+												whiteSpace:
+													props.message.content.length > 30 ? 'pre-wrap' : 'pre',
 											}}
 										>
 											{/*<Markdown content={props.message.content} />*/}
@@ -493,7 +527,7 @@ export const UserMessage = React.memo(function UserMessage(props: IMessagesList)
 								)}
 							</Box>
 						</Box>
-					</Box>
+					</Slide>
 				) : (
 					<BotMessage
 						modelTitle={props.modelTitle}
@@ -0,0 +1 @@
+export * from './use-image-icons'
\ No newline at end of file
@@ -0,0 +1,39 @@
+import { useShowData } from '@/src/shared'
+import { useState } from 'react'
+
+export function useImageIcons() {
+	const [iconsMenu, setIconsMenu] = useState<string>('')
+	const { error, showError, isError } = useShowData()
+
+	const toggleMenu = (uid: string) => {
+		if (iconsMenu === uid) {
+			setIconsMenu('')
+		} else {
+			setIconsMenu(uid)
+		}
+	}
+
+	const downloadFile = (url: string | null, content: string | undefined) => {
+		if (url) {
+			fetch(url)
+				.then((response) => response.blob())
+				.then((blob) => {
+					const url = window.URL.createObjectURL(blob)
+					const link = document.createElement('a')
+					link.href = url
+					// const image_name = '123'
+					const image_name = content?.replaceAll(' ', '_').substring(0, 25)
+					link.setAttribute('download', `${image_name}`)
+					document.body.appendChild(link)
+					link.click()
+				})
+				.catch((error) => {
+					showError('Что-то пошло не так', true)
+				})
+		} else {
+			showError('Изображение не найдено', true)
+		}
+	}
+
+	return { iconsMenu, toggleMenu, downloadFile }
+}
@@ -0,0 +1,26 @@
+import { Message } from '@/src/shared/lib/types/model'
+import { useMemo, useState } from 'react'
+
+export const useMessages = (messages: Message[]) => {
+	const [chosenImage, setChosenImage] = useState<string | null>(null)
+
+	const [loaded, setLoaded] = useState(false)
+
+	// типизация ну супер кривая)))
+	const computedLibraryImages = useMemo<Message[]>(() => {
+		return messages
+			.map((el) => {
+				if (el.file && (el.file as any).includes('.zip')) return null
+				return el
+			})
+			.filter((el) => el !== null)
+	}, [messages])
+
+	return {
+		chosenImage,
+		setChosenImage,
+		loaded,
+		setLoaded,
+		computedLibraryImages,
+	}
+}
@@ -1,11 +1,14 @@
-import React, { memo, useEffect } from 'react'
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react'
 import { Box, CircularProgress } from '@mui/material'
 import { useSession } from 'next-auth/react'
 
 import { Message } from '@/src/shared/lib/types/model'
 import { ArrowDownScroll } from '@/src/shared/ui/icon-components/scroll-down-arrow'
-import { IsNextDay } from '@/src/widgets/messages/is-next-day'
+import { IsNextDay } from '@/src/widgets/messages/ui/is-next-day'
 import { PreviewView } from '@/src/widgets/messages/message-components/preview-view'
+import { ImageModal } from '@/src/features/image-modal'
+import { ClientOnly } from '@/src/shared'
+import { createPortal } from 'react-dom'
 
 interface IMessagesList {
 	device: 'mobile' | 'desktop'
@@ -22,7 +25,18 @@ interface IMessagesList {
 }
 
 export const ChatMessagesList: React.FC<IMessagesList> = memo(
-	({ messageResponse, onLoadImage, setResendValue, modelTitle, device, modelType, mode, getMessagesPagination, deleteMessage, loading }) => {
+	({
+		messageResponse,
+		onLoadImage,
+		setResendValue,
+		modelTitle,
+		device,
+		modelType,
+		mode,
+		getMessagesPagination,
+		deleteMessage,
+		loading,
+	}) => {
 		const paginationScroll = React.useRef<any>()
 		const [isPaginating, setIsPaginating] = React.useState(false)
 		const [chatScrollHeight, setChatScrollHeight] = React.useState(0)
@@ -30,13 +44,25 @@ export const ChatMessagesList: React.FC<IMessagesList> = memo(
 
 		const desktop = device === 'desktop'
 		const { status } = useSession()
-		const [isNewMessage, setIsNewMessage] = React.useState(false)
+		const [modal, setModal] = useState<boolean>(false)
+		const [isNewMessage, setIsNewMessage] = useState(false)
+
+		const [currentSrc, setCurrentSrc] = useState<string | null>(null)
+
+		const onlyImageMessage = useMemo(() => {
+			if (!messageResponse) return []
+			console.log(messageResponse)
+			return messageResponse
+				.map((item) => item)
+				.filter((item) => item.file !== null && !(item.file as string).includes('.zip')) as Message[]
+		}, [messageResponse])
 
 		React.useEffect(() => {
 			const block = paginationScroll.current
 
 			if (messageResponse != undefined && !isPaginating) {
 				setChatScrollHeight(paginationScroll.current.scrollHeight)
+
 				const time = setTimeout(() => {
 					if (block) {
 						//@ts-ignore
@@ -62,8 +88,11 @@ export const ChatMessagesList: React.FC<IMessagesList> = memo(
 		}, [messageResponse])
 
 		const handleScroll = () => {
-			console.log(paginationScroll.current?.scrollHeight - paginationScroll.current?.scrollTop - paginationScroll.current?.clientHeight)
-			setScrollBottom(paginationScroll.current?.scrollHeight - paginationScroll.current?.scrollTop - paginationScroll.current?.clientHeight)
+			setScrollBottom(
+				paginationScroll.current?.scrollHeight -
+					paginationScroll.current?.scrollTop -
+					paginationScroll.current?.clientHeight
+			)
 
 			if (paginationScroll.current && messageResponse?.length !== 0) {
 				const { scrollTop, scrollHeight, clientHeight } = paginationScroll.current
@@ -77,89 +106,108 @@ export const ChatMessagesList: React.FC<IMessagesList> = memo(
 		}
 
 		return (
-			<Box
-				sx={{
-					overflowY: 'scroll',
-					overflowX: 'hidden',
-					'::-webkit-scrollbar': {
-						display: 'none',
-					},
-					paddingRight: desktop ? 2 : 0,
-					paddingLeft: desktop ? 1 : 0,
-				}}
-				ref={paginationScroll}
-				onScroll={handleScroll}
-			>
-				{scrollBottom > 500 && (
-					<Box
-						sx={{
-							position: 'absolute',
-							left: 0,
-							right: 0,
-							width: 'fit-content',
-							cursor: 'pointer',
-							margin: '0 auto',
-							bottom: '100px',
-							zIndex: 10,
-						}}
-						onClick={() => {
-							//@ts-ignore
-							const block = paginationScroll.current
-
-							block.scrollTo({
-								top: block.scrollHeight,
-								behavior: 'smooth', // добавляем плавную прокрутку
-							})
-						}}
-					>
-						<ArrowDownScroll />
-					</Box>
-				)}
-
-				{loading && (
-					<Box
-						sx={{
-							position: 'absolute',
-							left: 0,
-							right: 0,
-							width: 'fit-content',
-							margin: '0 auto',
-							top: '10px',
-							zIndex: 10,
-						}}
-					>
-						<CircularProgress
-							size={18}
-							thickness={3}
+			<>
+				<ClientOnly>
+					{createPortal(
+						<ImageModal
+							modal={modal}
+							current={currentSrc}
+							setModal={setModal}
+							onSlideFalse={async () => {
+								getMessagesPagination && (await getMessagesPagination())
+							}}
+							images={onlyImageMessage}
+						/>,
+						document.getElementById('modal-container')!
+					)}
+				</ClientOnly>
+
+				<Box
+					sx={{
+						overflowY: 'scroll',
+						overflowX: 'hidden',
+						'::-webkit-scrollbar': {
+							display: 'none',
+						},
+						paddingRight: desktop ? 2 : 0,
+						paddingLeft: desktop ? 1 : 0,
+					}}
+					ref={paginationScroll}
+					onScroll={handleScroll}
+				>
+					{scrollBottom > 500 && (
+						<Box
 							sx={{
-								color: '#7F7DF3',
+								position: 'absolute',
+								left: 0,
+								right: 0,
+								width: 'fit-content',
+								cursor: 'pointer',
+								margin: '0 auto',
+								bottom: '100px',
+								zIndex: 10,
 							}}
-						/>
-					</Box>
-				)}
-
-				{messageResponse?.length === 0 && status === 'authenticated' ? (
-					<>{desktop && modelType !== 'deepl' && <PreviewView setValue={setResendValue} />}</>
-				) : (
-					messageResponse?.map((message, idx) => {
-						return (
-							<IsNextDay
-								onLoadImage={onLoadImage}
-								setResendValue={setResendValue}
-								key={idx}
-								message={message}
-								index={idx - 1}
-								messageResponse={messageResponse}
-								isNewMessage={isNewMessage}
-								modelType={modelType}
-								modelTitle={modelTitle}
-								deleteMessage={deleteMessage}
-								device={device}
+							onClick={() => {
+								//@ts-ignore
+								const block = paginationScroll.current
+
+								block.scrollTo({
+									top: block.scrollHeight,
+									behavior: 'smooth', // добавляем плавную прокрутку
+								})
+							}}
+						>
+							<ArrowDownScroll />
+						</Box>
+					)}
+
+					{loading && (
+						<Box
+							sx={{
+								position: 'absolute',
+								left: 0,
+								right: 0,
+								width: 'fit-content',
+								margin: '0 auto',
+								top: '10px',
+								zIndex: 10,
+							}}
+						>
+							<CircularProgress
+								size={18}
+								thickness={3}
+								sx={{
+									color: '#7F7DF3',
+								}}
 							/>
-						)
-					})
-				)}
-			</Box>
+						</Box>
+					)}
+
+					{messageResponse?.length === 0 && status === 'authenticated' ? (
+						<>{desktop && modelType !== 'deepl' && <PreviewView setValue={setResendValue} />}</>
+					) : (
+						messageResponse?.map((message, idx) => {
+							return (
+								<IsNextDay
+									onLoadImage={onLoadImage}
+									setResendValue={setResendValue}
+									key={idx}
+									message={message}
+									setCurrentSrc={setCurrentSrc}
+									setModal={setModal}
+									index={idx - 1}
+									messageResponse={messageResponse}
+									isNewMessage={isNewMessage}
+									modelType={modelType}
+									modelTitle={modelTitle}
+									deleteMessage={deleteMessage}
+									device={device}
+								/>
+							)
+						})
+					)}
+				</Box>
+			</>
 		)
 	}
 )
@@ -0,0 +1,105 @@
+import { useAppSelector } from '@/src/main/store/store'
+import { TooltipCustom, useShowData } from '@/src/shared'
+import { Grow, Box } from '@mui/material'
+import { useImageIcons } from '../model'
+
+export interface ImageIconsProps {
+	uid: string
+	url: string | null
+	content?: string
+}
+
+export const ImageIcons = ({ uid, url, content }: ImageIconsProps) => {
+	const theme = useAppSelector((state) => state.theme.theme)
+
+	const { toggleMenu, downloadFile, iconsMenu } = useImageIcons()
+
+	return (
+		<>
+			<svg
+				style={{
+					position: 'absolute',
+					top: '10px',
+					right: '10px',
+					cursor: 'pointer',
+					zIndex: '5',
+				}}
+				onClick={(e) => {
+					e.stopPropagation()
+					toggleMenu(uid)
+				}}
+				width='35'
+				height='35'
+				viewBox='0 0 35 35'
+				fill='none'
+				xmlns='http://www.w3.org/2000/svg'
+			>
+				<circle cx='17.5' cy='17.5' r='17.5' fill={theme === 'dark' ? '#303035' : '#FFFFFF'} />
+				<path
+					fillRule='evenodd'
+					clipRule='evenodd'
+					d='M11 12.4377C11 12.1957 11.0978 11.9637 11.272 11.7926C11.4461 11.6215 11.6823 11.5254 11.9286 11.5254H23.0714C23.3177 11.5254 23.5539 11.6215 23.728 11.7926C23.9022 11.9637 24 12.1957 24 12.4377C24 12.6796 23.9022 12.9117 23.728 13.0828C23.5539 13.2538 23.3177 13.35 23.0714 13.35H11.9286C11.6823 13.35 11.4461 13.2538 11.272 13.0828C11.0978 12.9117 11 12.6796 11 12.4377ZM11 16.9991C11 16.7571 11.0978 16.5251 11.272 16.354C11.4461 16.1829 11.6823 16.0868 11.9286 16.0868H23.0714C23.3177 16.0868 23.5539 16.1829 23.728 16.354C23.9022 16.5251 24 16.7571 24 16.9991C24 17.241 23.9022 17.4731 23.728 17.6442C23.5539 17.8152 23.3177 17.9114 23.0714 17.9114H11.9286C11.6823 17.9114 11.4461 17.8152 11.272 17.6442C11.0978 17.4731 11 17.241 11 16.9991ZM11 21.5605C11 21.3185 11.0978 21.0865 11.272 20.9154C11.4461 20.7443 11.6823 20.6482 11.9286 20.6482H23.0714C23.3177 20.6482 23.5539 20.7443 23.728 20.9154C23.9022 21.0865 24 21.3185 24 21.5605C24 21.8024 23.9022 22.0345 23.728 22.2056C23.5539 22.3766 23.3177 22.4728 23.0714 22.4728H11.9286C11.6823 22.4728 11.4461 22.3766 11.272 22.2056C11.0978 22.0345 11 21.8024 11 21.5605Z'
+					fill='#827FFF'
+				/>
+			</svg>
+
+			<Grow in={iconsMenu === uid}>
+				<Box
+					flexDirection={'column'}
+					gap={'20px'}
+					sx={{
+						zIndex: '5',
+						background: theme === 'dark' ? '#303035' : '#FFFFFF',
+						position: 'absolute',
+						top: '50px',
+						right: '11px',
+						padding: '12px 9px',
+						borderRadius: '60px',
+						display: iconsMenu === uid ? 'flex' : 'none',
+					}}
+				>
+					<TooltipCustom title={'Открыть в новой вкладке'} placement={'right'}>
+						<svg
+							onClick={() => {
+								window.open(`${url ? url : ''}`, '_blank')
+							}}
+							width='15'
+							height='15'
+							viewBox='0 0 15 15'
+							fill='none'
+							xmlns='http://www.w3.org/2000/svg'
+						>
+							<path
+								d='M5.875 2.625H2.625C2.19402 2.625 1.7807 2.7962 1.47595 3.10095C1.1712 3.4057 1 3.81902 1 4.25V12.375C1 12.806 1.1712 13.2193 1.47595 13.524C1.7807 13.8288 2.19402 14 2.625 14H10.75C11.181 14 11.5943 13.8288 11.899 13.524C12.2038 13.2193 12.375 12.806 12.375 12.375V9.125M9.125 1H14M14 1V5.875M14 1L5.875 9.125'
+								stroke='#827FFF'
+								strokeWidth='2'
+								strokeLinecap='round'
+								strokeLinejoin='round'
+							/>
+						</svg>
+					</TooltipCustom>
+					<TooltipCustom title={'Скачать изображение'} placement={'right'}>
+						<svg
+							onClick={() => {
+								downloadFile(url, content)
+							}}
+							width='15'
+							height='15'
+							viewBox='0 0 15 15'
+							fill='none'
+							xmlns='http://www.w3.org/2000/svg'
+						>
+							<path
+								d='M1 10.75V11.5625C1 12.209 1.25681 12.829 1.71393 13.2861C2.17105 13.7432 2.79103 14 3.4375 14H11.5625C12.209 14 12.829 13.7432 13.2861 13.2861C13.7432 12.829 14 12.209 14 11.5625V10.75M10.75 7.5L7.5 10.75M7.5 10.75L4.25 7.5M7.5 10.75V1'
+								stroke='#827FFF'
+								strokeWidth='2'
+								strokeLinecap='round'
+								strokeLinejoin='round'
+							/>
+						</svg>
+					</TooltipCustom>
+				</Box>
+			</Grow>
+		</>
+	)
+}
@@ -4,143 +4,48 @@ import Box from '@mui/material/Box'
 import Image from 'next/image'
 import Link from 'next/link'
 
-import FullScreenModal from '@/src/features/image-modal/full-screen-modal'
+import { ImageModal } from '@/src/features/image-modal'
 import { useAppSelector } from '@/src/main/store/store'
-import { Success, TooltipCustom, useShowData } from '@/src/shared'
+import { ClientOnly, Success, TooltipCustom, useShowData } from '@/src/shared'
 import { useAutoScroll } from '@/src/shared/lib/hooks'
 import { Message } from '@/src/shared/lib/types/model'
 
 import styles from './image-messages-list.module.scss'
+import { createPortal } from 'react-dom'
+import { useMessages } from '../model/use-messages'
+import { ImageIcons } from './image-icons'
 
 interface MessagesList {
 	device: 'mobile' | 'desktop'
-	images: Message[] | null
+	images: Message[]
+	getMessagesPagination?: () => Promise<void>
 	isComplete: boolean
 }
 
-export const ImageMessagesList: React.FC<MessagesList> = memo(({ device, images }) => {
+export const ImageMessagesList: React.FC<MessagesList> = memo(({ device, images, getMessagesPagination }) => {
 	const { error, showError, isError } = useShowData()
 	const [modal, setModal] = useState<boolean>(false)
-	const [chosenImage, setChosenImage] = useState<string>('')
 	const theme = useAppSelector((state) => state.theme.theme)
-	const [iconsMenu, setIconsMenu] = React.useState<string>('')
-	const [loaded, setLoaded] = useState(false)
+  
 
-	const downloadFile = (url: string | null, content: string | undefined) => {
-		if (url) {
-			fetch(url)
-				.then((response) => response.blob())
-				.then((blob) => {
-					const url = window.URL.createObjectURL(blob)
-					const link = document.createElement('a')
-					link.href = url
-					// const image_name = '123'
-					const image_name = content?.replaceAll(' ', '_').substring(0, 25)
-					link.setAttribute('download', `${image_name}`)
-					document.body.appendChild(link)
-					link.click()
-				})
-				.catch((error) => {
-					showError('Что-то пошло не так', true)
-				})
-		} else {
-			showError('Изображение не найдено', true)
-		}
-	}
-
-	const toggleMenu = (uid: string) => {
-		if (iconsMenu === uid) {
-			setIconsMenu('')
-		} else {
-			setIconsMenu(uid)
-		}
-	}
-
-	const ImageIcons = ({ uid, url, content }: { uid: string; url: string | null; content: string | undefined }) => {
-		return (
-			<>
-				<svg
-					style={{ position: 'absolute', top: '10px', right: '10px', cursor: 'pointer', zIndex: '5' }}
-					onClick={() => toggleMenu(uid)}
-					width='35'
-					height='35'
-					viewBox='0 0 35 35'
-					fill='none'
-					xmlns='http://www.w3.org/2000/svg'
-				>
-					<circle cx='17.5' cy='17.5' r='17.5' fill={theme === 'dark' ? '#303035' : '#FFFFFF'} />
-					<path
-						fillRule='evenodd'
-						clipRule='evenodd'
-						d='M11 12.4377C11 12.1957 11.0978 11.9637 11.272 11.7926C11.4461 11.6215 11.6823 11.5254 11.9286 11.5254H23.0714C23.3177 11.5254 23.5539 11.6215 23.728 11.7926C23.9022 11.9637 24 12.1957 24 12.4377C24 12.6796 23.9022 12.9117 23.728 13.0828C23.5539 13.2538 23.3177 13.35 23.0714 13.35H11.9286C11.6823 13.35 11.4461 13.2538 11.272 13.0828C11.0978 12.9117 11 12.6796 11 12.4377ZM11 16.9991C11 16.7571 11.0978 16.5251 11.272 16.354C11.4461 16.1829 11.6823 16.0868 11.9286 16.0868H23.0714C23.3177 16.0868 23.5539 16.1829 23.728 16.354C23.9022 16.5251 24 16.7571 24 16.9991C24 17.241 23.9022 17.4731 23.728 17.6442C23.5539 17.8152 23.3177 17.9114 23.0714 17.9114H11.9286C11.6823 17.9114 11.4461 17.8152 11.272 17.6442C11.0978 17.4731 11 17.241 11 16.9991ZM11 21.5605C11 21.3185 11.0978 21.0865 11.272 20.9154C11.4461 20.7443 11.6823 20.6482 11.9286 20.6482H23.0714C23.3177 20.6482 23.5539 20.7443 23.728 20.9154C23.9022 21.0865 24 21.3185 24 21.5605C24 21.8024 23.9022 22.0345 23.728 22.2056C23.5539 22.3766 23.3177 22.4728 23.0714 22.4728H11.9286C11.6823 22.4728 11.4461 22.3766 11.272 22.2056C11.0978 22.0345 11 21.8024 11 21.5605Z'
-						fill='#827FFF'
-					/>
-				</svg>
-
-				<Grow in={iconsMenu === uid}>
-					<Box
-						flexDirection={'column'}
-						gap={'20px'}
-						sx={{
-							zIndex: '5',
-							background: theme === 'dark' ? '#303035' : '#FFFFFF',
-							position: 'absolute',
-							top: '50px',
-							right: '11px',
-							padding: '12px 9px',
-							borderRadius: '60px',
-							display: iconsMenu === uid ? 'flex' : 'none',
-						}}
-					>
-						<TooltipCustom title={'Открыть в новой вкладке'} placement={'right'}>
-							<svg
-								onClick={() => {
-									window.open(`${url ? url : ''}`, '_blank')
-								}}
-								width='15'
-								height='15'
-								viewBox='0 0 15 15'
-								fill='none'
-								xmlns='http://www.w3.org/2000/svg'
-							>
-								<path
-									d='M5.875 2.625H2.625C2.19402 2.625 1.7807 2.7962 1.47595 3.10095C1.1712 3.4057 1 3.81902 1 4.25V12.375C1 12.806 1.1712 13.2193 1.47595 13.524C1.7807 13.8288 2.19402 14 2.625 14H10.75C11.181 14 11.5943 13.8288 11.899 13.524C12.2038 13.2193 12.375 12.806 12.375 12.375V9.125M9.125 1H14M14 1V5.875M14 1L5.875 9.125'
-									stroke='#827FFF'
-									strokeWidth='2'
-									strokeLinecap='round'
-									strokeLinejoin='round'
-								/>
-							</svg>
-						</TooltipCustom>
-						<TooltipCustom title={'Скачать изображение'} placement={'right'}>
-							<svg
-								onClick={() => {
-									downloadFile(url, content)
-								}}
-								width='15'
-								height='15'
-								viewBox='0 0 15 15'
-								fill='none'
-								xmlns='http://www.w3.org/2000/svg'
-							>
-								<path
-									d='M1 10.75V11.5625C1 12.209 1.25681 12.829 1.71393 13.2861C2.17105 13.7432 2.79103 14 3.4375 14H11.5625C12.209 14 12.829 13.7432 13.2861 13.2861C13.7432 12.829 14 12.209 14 11.5625V10.75M10.75 7.5L7.5 10.75M7.5 10.75L4.25 7.5M7.5 10.75V1'
-									stroke='#827FFF'
-									strokeWidth='2'
-									strokeLinecap='round'
-									strokeLinejoin='round'
-								/>
-							</svg>
-						</TooltipCustom>
-					</Box>
-				</Grow>
-			</>
-		)
-	}
+	const { chosenImage, setChosenImage, loaded, setLoaded, computedLibraryImages } = useMessages(images)
 
 	return (
 		<>
-			<FullScreenModal modal={modal} setModal={setModal} image={chosenImage} />
+			<ClientOnly>
+				{createPortal(
+					<ImageModal
+						images={computedLibraryImages}
+						modal={modal}
+						onSlideFalse={() => getMessagesPagination && getMessagesPagination()}
+						setModal={setModal}
+						reverse={device === 'desktop'}
+						current={chosenImage}
+					/>,
+					document.getElementById('modal-container')!
+				)}
+			</ClientOnly>
+
 			<Success message={error} open={Boolean(error)} isError={isError} />
 			<Box className={'mt-15'}>
 				<Typography
@@ -226,8 +131,13 @@ export const ImageMessagesList: React.FC<MessagesList> = memo(({ device, images
 															}}
 															width={500}
 															height={500}
-															src={(message.file as unknown as string) || ''}
-															alt={'К сожалению, изображение не загрузилось'}
+															src={
+																(message.file as unknown as string) ||
+																''
+															}
+															alt={
+																'К сожалению, изображение не загрузилось'
+															}
 														/>
 														<Image
 															className={styles.image}
@@ -246,7 +156,10 @@ export const ImageMessagesList: React.FC<MessagesList> = memo(({ device, images
 															}}
 															width={10}
 															height={10}
-															src={(message.file as unknown as string) || ''}
+															src={
+																(message.file as unknown as string) ||
+																''
+															}
 															alt=''
 														/>
 													</>
@@ -267,7 +180,10 @@ export const ImageMessagesList: React.FC<MessagesList> = memo(({ device, images
 																userSelect: 'none',
 																objectFit: 'contain',
 															}}
-															src={(message.file as unknown as string) || ''}
+															src={
+																(message.file as unknown as string) ||
+																''
+															}
 															alt='К сожалению, изображение не загрузилось'
 														/>
 														<img
@@ -286,7 +202,10 @@ export const ImageMessagesList: React.FC<MessagesList> = memo(({ device, images
 																right: 0,
 																filter: 'blur(10px) brightness(0.7)',
 															}}
-															src={(message.file as unknown as string) || ''}
+															src={
+																(message.file as unknown as string) ||
+																''
+															}
 															alt='К сожалению, изображение не загрузилось'
 														/>
 													</>
@@ -295,14 +214,19 @@ export const ImageMessagesList: React.FC<MessagesList> = memo(({ device, images
 												{!loaded && (
 													<Skeleton
 														sx={{
-															background: theme === 'dark' ? '#2d2d2f' : '#EFF0F2',
+															background:
+																theme === 'dark'
+																	? '#2d2d2f'
+																	: '#EFF0F2',
 															position: 'absolute',
 															top: '0',
 															left: '0',
 															zIndex: '3',
 															borderRadius: 5,
-															width: device === 'desktop' ? '250px' : '100%',
-															height: device === 'desktop' ? '250px' : '100%',
+															width:
+																device === 'desktop' ? '250px' : '100%',
+															height:
+																device === 'desktop' ? '250px' : '100%',
 														}}
 														variant='rectangular'
 													/>
@@ -331,7 +255,9 @@ export const ImageMessagesList: React.FC<MessagesList> = memo(({ device, images
 													{!loaded
 														? ''
 														: message.content.length > 0
-														? message?.content.replaceAll('"', '').slice(0, 30)
+														? message?.content
+																.replaceAll('"', '')
+																.slice(0, 30)
 														: 'описание отсутствует'}
 													{message?.content.length > 30 && loaded && '...'}
 												</Typography>
@@ -0,0 +1 @@
+export * from './image-icons'
\ No newline at end of file
@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React, { memo, useMemo } from 'react'
 import { Box, Typography } from '@mui/material'
 
 import { Message } from '@/src/shared/lib/types/model'
@@ -12,8 +12,9 @@ interface IProps {
 	messageResponse: Message[] | null
 	modelTitle: string | undefined
 	deleteMessage?: (message_uid: string) => void
+  setCurrentSrc: (value: string) => void
 	isNewMessage: boolean
-	// clickPreview: (text: string) => void
+  setModal: (value: boolean) => void
 	modelType: string
 	device: 'mobile' | 'desktop'
 	setResendValue: (value: string) => void
@@ -21,7 +22,20 @@ interface IProps {
 }
 
 export const IsNextDay = memo(
-	({ message, index, onLoadImage, messageResponse, modelTitle, deleteMessage, isNewMessage, modelType, device, setResendValue }: IProps) => {
+	({
+		message,
+		index,
+		onLoadImage,
+		messageResponse,
+		modelTitle,
+		deleteMessage,
+    setCurrentSrc,
+    setModal,
+		isNewMessage,
+		modelType,
+		device,
+		setResendValue,
+	}: IProps) => {
 		if (messageResponse && message.created_at) {
 			const date = getDateFromString(message.created_at)
 			const prevDate = getDateFromString(messageResponse[index]?.created_at)
@@ -51,7 +65,9 @@ export const IsNextDay = memo(
 								setResendValue={setResendValue}
 								modelTitle={modelTitle}
 								deleteMessage={deleteMessage}
+                setCurrentSrc={setCurrentSrc}
 								key={message.uid}
+                setModal={setModal}
 								message={message}
 								isNewMessage={isNewMessage}
 								modelType={modelType}
@@ -81,9 +97,11 @@ export const IsNextDay = memo(
 							</Typography>
 						</Box>
 						<UserMessage
+              setModal={setModal}
 							onLoadImage={onLoadImage}
 							setResendValue={setResendValue}
 							modelTitle={modelTitle}
+              setCurrentSrc={setCurrentSrc}
 							deleteMessage={deleteMessage}
 							key={message.uid}
 							message={message}
@@ -101,7 +119,9 @@ export const IsNextDay = memo(
 				setResendValue={setResendValue}
 				modelTitle={modelTitle}
 				deleteMessage={deleteMessage}
+        setCurrentSrc={setCurrentSrc}
 				key={message.uid}
+        setModal={setModal}
 				message={message}
 				isNewMessage={isNewMessage}
 				modelType={modelType}
@@ -0,0 +1,2 @@
+export * from './ui'
+export * from './model'
\ No newline at end of file
@@ -49,16 +49,26 @@ export const ModelTopBar: React.FC<IModelTopBar> = memo(({ device, token, favori
 			justifyContent='space-between'
 			alignItems='center'
 			sx={{
-				backgroundColor: desktop ? (theme === 'light' ? '#F8F8F8' : '#4B4B4B') : theme === 'light' ? '#F8F8F8' : 'transparent',
+				backgroundColor: desktop
+					? theme === 'light'
+						? '#F8F8F8'
+						: '#4B4B4B'
+					: theme === 'light'
+					? '#F8F8F8'
+					: 'transparent',
 				borderRadius: desktop ? '15px' : '15px 15px',
 				marginTop: desktop ? 1 : 0,
 				marginBottom: desktop ? 2 : 1,
 				padding: desktop ? '8px 5px' : '4px 0',
-				boxShadow: desktop ? 'none' : 'rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;',
+				boxShadow: desktop
+					? 'none'
+					: 'rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;',
 			}}
 		>
 			<Stack direction='row' alignItems='center'>
-				{desktop && <Button onClick={openMenuModel}>{desktop && <MenuIcon sx={{ color: '#7F7DF3' }} />}</Button>}
+				{desktop && (
+					<Button onClick={openMenuModel}>{desktop && <MenuIcon sx={{ color: '#7F7DF3' }} />}</Button>
+				)}
 				<Stack onClick={openMenuModel as any} direction='row' alignItems='center'>
 					<Typography
 						onClick={openMenuModel}
@@ -73,13 +83,17 @@ export const ModelTopBar: React.FC<IModelTopBar> = memo(({ device, token, favori
 					>
 						{title}
 					</Typography>
-					{!desktop && <LazyArrowIcon anchorElModel={anchorElModel} />}
+					{!desktop && <LazyArrowIcon directionY={!!anchorElModel} />}
 				</Stack>
 
 				{desktop ? (
 					<NavigateTopBar favorites={favorites} closeMenu={closeMenuModel} anchorEl={anchorElModel} />
 				) : (
-					<NavigateTopBarMobile anchorEl={anchorElModel} closeMenu={closeMenuModel} favorites={favorites} />
+					<NavigateTopBarMobile
+						anchorEl={anchorElModel}
+						closeMenu={closeMenuModel}
+						favorites={favorites}
+					/>
 				)}
 			</Stack>
 
@@ -1,12 +1,10 @@
 {
-  "useTabs": true,
-  "tabWidth": 5,
-  "singleQuote": true,
-  "trailingComma": "es5",
-  "jsxBracketSameLine": false,
-  "semi": false,
-  "printWidth": 150,
-  "jsxSingleQuote": true
+	"useTabs": true,
+	"tabWidth": 5,
+	"singleQuote": true,
+	"trailingComma": "es5",
+	"jsxBracketSameLine": false,
+	"semi": false,
+	"printWidth": 120,
+	"jsxSingleQuote": true
 }
-
-
@@ -62,6 +62,7 @@
         "remark-gfm": "^3.0.1",
         "sass": "^1.63.4",
         "styled-components": "^5.3.9",
+        "swiper": "^11.2.1",
         "typescript": "5.1.3"
       },
       "devDependencies": {
@@ -10063,6 +10064,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.2.1",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.1.tgz",
+      "integrity": "sha512-62G69+iQRIfUqTmJkWpZDcX891Ra8O9050ckt1/JI2H+0483g+gq0m7gINecDqMtDh2zt5dK+uzBRxGhGOOvQA==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -79,6 +79,7 @@
     "remark-gfm": "^3.0.1",
     "sass": "^1.63.4",
     "styled-components": "^5.3.9",
+    "swiper": "^11.2.1",
     "typescript": "5.1.3"
   },
   "devDependencies": {