{titlePage}

+ {formatDate(message.created_at, { + hour: 'numeric', + minute: 'numeric', + })} +

+ +

+ {message.file && + (stringIsImage(message.file as string) ? ( +

{ + setCurrentSrc(message.file as string) + imagesModal.setState(true) + }} + className={styles.content__imagebox} + > +

+ setLoaded(true)} + width={500} + height={500} + src={(message.file as string).split('?type')[0]} + alt={'К сожалению, изображение не загрузилось'} + /> + {!loaded &&

} +

+ ) : ( + + ))} + +

+ + + + +

+ + {!message.is_sent && ( + + )} + +

30 ? 'pre-wrap' : 'pre', + }} + > + {message.content} +

+ ) + } +) @@ -1,2 +1,4 @@ export * from './types' -export * from './api' \ No newline at end of file +export * from './api' +export * from './model' +export * from './ui' @@ -1,11 +1,14 @@ -import { API_URL } from '#/shared/lib/constants' -import axios from 'axios' -import { IModel } from '../types' +import { Inference, Model, ShortModel } from '../types' +import { api } from '#/shared/api' -export async function getBotParams(slug: string, token?: string) { - return await axios.get(API_URL + `/ml_models/${slug}`, { - headers: { - Authorization: `Bearer ${token}`, - }, - }) +export async function getBotParams(slug: string) { + return await api.get(`/api/ai/model/${slug}`) +} + +export async function getInference(id: string) { + return await api.get(`api/ai/inferences/${id}`) +} + +export async function getChatBots() { + return await api.get(`api/chats/models/`) } @@ -1,11 +1,6 @@ -import { API_URL } from '#/shared/lib/constants' -import axios from 'axios' -import { IShortModel } from '../types' +import { ShortModel } from '../types' +import { api } from '#/shared/api' -export async function getModelsImages(token?: string) { - return await axios.get(API_URL + '/ml_models/?category=images', { - headers: { - Authorization: `Bearer ${token}`, - }, - }) +export async function getImageBots() { + return await api.get(`api/media/images/models/`) } @@ -1 +1,4 @@ -export * from './use-images-bots' \ No newline at end of file +export * from './use-images-bots' +export * from './use-chat-bot' +export * from './use-chat-bot-params.store' +export * from './use-image-bot-params.store' @@ -0,0 +1,64 @@ +import { create } from 'zustand' +import { Inference, Model, InferenceParams, InferenceInput } from '../types' + +export interface ChatBotParamsStore { + botParams: Model | null + inferenceParams: InferenceParams[] + setInferenceParams: (params: InferenceParams[]) => void + infrerenceValues: Record + setInferenceInputs: (inputs: InferenceInput[]) => void + inferenceInputs: InferenceInput[] + setInferenceValues: (infrerenceValues: Record) => void, + setInferenceValueByKey: (key: string, value: any) => void + loading: boolean + setBotParams: (botParams: Model) => void + setLoading: (loading: boolean) => void + inference: Inference | null + setInference: (inference: Inference) => void +} + +export const useChatBotParams = create((set, get) => { + function setBotParams(botParams: Model) { + set({ ...get(), botParams }) + } + + function setLoading(loading: boolean) { + set({ ...get(), loading }) + } + + function setInference(inference: Inference) { + set({ ...get(), inference }) + } + + function setInferenceParams(inferenceParams: InferenceParams[]) { + set({ ...get(), inferenceParams }) + } + + function setInferenceInputs(inferenceInputs: InferenceInput[]) { + set({ ...get(), inferenceInputs }) + } + + function setInferenceValues(infrerenceValues: Record) { + set({ ...get(), infrerenceValues }) + } + + function setInferenceValueByKey(key: string, value: any) { + set({ ...get(), infrerenceValues: { ...get().infrerenceValues, [key]: value } }) + } + + return { + botParams: null, + loading: false, + inferenceInputs: [], + inferenceParams: [], + infrerenceValues: {}, + setInferenceParams, + setInferenceInputs, + setInferenceValues, + setInferenceValueByKey, + inference: null, + setInference, + setBotParams, + setLoading, + } +}) @@ -0,0 +1,72 @@ +import { useEffect } from 'react' +import { makePrivateRequest } from '#/shared/api' +import { getBotParams, getInference } from '../api' +import { useRouter } from 'next/router' +import { useChatBotParams } from '.' +import { Inference } from '../types' + +export function useChatBot() { + const { + botParams, + setBotParams, + inference, + setInference, + setInferenceParams, + setInferenceValues, + inferenceParams, + inferenceInputs, + setInferenceInputs, + } = useChatBotParams() + + const { query, push } = useRouter() + + const fetchBotParams = makePrivateRequest(async () => { + const { status, data } = await getBotParams(query.slug as string) + + if (status !== 200) return push('/404') + + setBotParams(data) + + onSetInferenceParams(data.inferences[0].slug) + }) + + const onSetInferenceParams = makePrivateRequest(async (inference: string | null) => { + const { botParams } = useChatBotParams.getState() + + if (!botParams) return + + if (!inference) inference = botParams.inferences[0].slug + + const result = botParams.inferences.find((i) => i.slug === inference) + + if (!result) return + + const { + data: { parameters, ...data }, + } = await getInference(result.id) + + // console.log(parameters) + + // console.log(data) + + setInferenceInputs(data.inputs) + + setInferenceParams(parameters) + + setInference({ ...data, parameters }) + + setInferenceValues( + parameters.reduce((p, { key: k, values: v }) => ({ ...p, [k]: v.default }), {}) + ) + }) + + return { + botParams, + fetchBotParams, + inference, + setInference, + onSetInferenceParams, + inferenceParams, + inferenceInputs, + } +} @@ -0,0 +1,64 @@ +import { create } from 'zustand' +import { Inference, Model, InferenceParams, InferenceInput } from '../types' + +export interface ImageBotParamsStore { + botParams: Model | null + inferenceParams: InferenceParams[] + setInferenceParams: (params: InferenceParams[]) => void + infrerenceValues: Record + setInferenceInputs: (inputs: InferenceInput[]) => void + inferenceInputs: InferenceInput[] + setInferenceValues: (infrerenceValues: Record) => void, + setInferenceValueByKey: (key: string, value: any) => void + loading: boolean + setBotParams: (botParams: Model) => void + setLoading: (loading: boolean) => void + inference: Inference | null + setInference: (inference: Inference) => void +} + +export const useImageBotParams = create((set, get) => { + function setBotParams(botParams: Model) { + set({ ...get(), botParams }) + } + + function setLoading(loading: boolean) { + set({ ...get(), loading }) + } + + function setInference(inference: Inference) { + set({ ...get(), inference }) + } + + function setInferenceParams(inferenceParams: InferenceParams[]) { + set({ ...get(), inferenceParams }) + } + + function setInferenceInputs(inferenceInputs: InferenceInput[]) { + set({ ...get(), inferenceInputs }) + } + + function setInferenceValues(infrerenceValues: Record) { + set({ ...get(), infrerenceValues }) + } + + function setInferenceValueByKey(key: string, value: any) { + set({ ...get(), infrerenceValues: { ...get().infrerenceValues, [key]: value } }) + } + + return { + botParams: null, + loading: false, + inferenceInputs: [], + inferenceParams: [], + infrerenceValues: {}, + setInferenceParams, + setInferenceInputs, + setInferenceValues, + setInferenceValueByKey, + inference: null, + setInference, + setBotParams, + setLoading, + } +}) @@ -1,118 +1,66 @@ -import { useState } from 'react' -import { IModel } from '../types' -import { useSession } from 'next-auth/react' -import { getBotParams } from '../api' -import { useAppDispatch } from '#/app/store/store' -import { setParams } from '#/app/store/model-parametres-store' +import { version } from 'react' +import { getBotParams, getInference } from '../api' +import { makePrivateRequest } from '#/shared/api' +import { useRouter } from 'next/router' +import { useChatBotParams } from './use-chat-bot-params.store' +import { useImageBotParams } from './use-image-bot-params.store' + +export function useImageBot() { + const { + botParams, + setBotParams, + inference, + setInference, + setInferenceParams, + setInferenceValues, + inferenceParams, + inferenceInputs, + setInferenceInputs, + } = useImageBotParams() -export function useImageBot(slug: string) { - const [botParams, setBotParams] = useState(null) - const [version, setVersion] = useState('') - const [modelType, setModelType] = useState('') + const { query, push } = useRouter() - const dispatch = useAppDispatch() + const fetchBotParams = makePrivateRequest(async () => { + const { status, data } = await getBotParams(query.slug as string) - const { data } = useSession() + if (status !== 200) return push('/404') - function setDefault(bot: IModel) { - setVersion('') + setBotParams(data) - dispatch(setParams(bot.parameters.reduce((a, v) => ({ ...a, [v.key]: v.values.default }), {}))) - } + onSetInferenceParams(data.inferences[0].slug) + }) - // это пиз**ц - // нужен рефакторинг (я то в этом не разбираюсь) - // а стажеры и подавно)))) - function setStoreParams(bot: IModel) { - dispatch( - setParams( - bot.parameters.reduce( - (a, v) => - v.versions.includes(bot.versions[0].slug) - ? { ...a, [v.key]: v.values.default } - : { ...a }, - {} - ) - ) - ) - } + const onSetInferenceParams = makePrivateRequest(async (inference: string | null) => { + const { botParams } = useImageBotParams.getState() - function setAllParams(bot: IModel) { - setBotParams(bot) - setModelType(bot.slug) - - // store - if (bot.versions.length === 0) return setDefault(bot) + if (!botParams) return - setVersion(bot.versions[0].slug) - setStoreParams(bot) - } + if (!inference) inference = botParams.inferences[0].slug - // это пиз**ц - const resetParams = () => { - if (botParams) { - dispatch(setParams({})) - if (botParams.versions.length !== 0) { - setVersion(botParams.versions[0].slug) - dispatch( - setParams( - botParams.parameters.reduce( - (a, v) => - v.versions.includes(botParams.versions[0].slug) - ? { ...a, [v.key]: v.values.default } - : { ...a }, - {} - ) - ) - ) - } else { - setVersion(botParams.slug) - dispatch( - setParams(botParams.parameters.reduce((a, v) => ({ ...a, [v.key]: v.values.default }), {})) - ) - } - } - } + const result = botParams.inferences.find((i) => i.slug === inference) - // это пиз**ц - const setDefaultParams = () => { - if (!botParams) return + if (!result) return - dispatch(setParams({})) - - if (version === '') { - return dispatch( - setParams(botParams.parameters.reduce((a, v) => ({ ...a, [v.key]: v.values.default }), {})) - ) - } - - dispatch( - setParams( - botParams.parameters.reduce( - (a, v) => (v.versions.includes(version) ? { ...a, [v.key]: v.values.default } : { ...a }), - {} - ) - ) - ) - } + const { + data: { parameters, ...data }, + } = await getInference(result.id) - // api functions + setInferenceInputs(data.inputs) - async function fetchBotParams() { - if (!data) return + setInferenceParams(parameters) - const { data: bot, ...response } = await getBotParams(slug, data.access) + setInference({ ...data, parameters }) - if (response.status < 400) setAllParams(bot) - } + setInferenceValues(parameters.reduce((p, { key: k, values: v }) => ({ ...p, [k]: v.default }), {})) + }) return { botParams, - version, - modelType, fetchBotParams, - setVersion, - resetParams, - setDefaultParams, + inference, + setInference, + onSetInferenceParams, + inferenceParams, + inferenceInputs, } } @@ -1,24 +1,21 @@ import { useState } from 'react' -import { getModelsImages } from '../api' import { useSession } from 'next-auth/react' -import { IShortModel } from '../types' +import { ShortModel } from '../types' +import { getImageBots } from '../api' +import { makePrivateRequest } from '#/shared/api' export function useImagesBots() { - const [bots, setBots] = useState([]) + const [bots, setBots] = useState([]) - const { data } = useSession() - - async function fetchBots() { - if (!data) return - - const response = await getModelsImages(data.access) + const fetchBots = makePrivateRequest(async () => { + const response = await getImageBots() if (response.status < 400) setBots(response.data) - } + }) - return { - bots, - fetchBots, - setBots - } + return { + bots, + fetchBots, + setBots, + } } @@ -1,60 +1,78 @@ type ModelForChats = 'chatgpt' | 'llama2' | 'vicuna' | 'deepl' | 'mistral' -export interface IShortModel { +export interface ShortModel { uid: string title: string description: string slug: string image: string - blocked: boolean - tags: IModelTag[] - actual_stat: { - generation_time: string - tokens_cost: string - } + enabled: boolean + tags: ModelTag[] + types: string[] } -export interface IModelTag { - title: string - icon: string - color: string +export interface ModelTag { + title: string + icon: string + color: string } -export interface IModel { - uid: string +export interface Model { + id: string title: string - blocked: boolean + enabled: boolean description: string slug: string image: string - settings: { is_active: boolean } - parameters: IModelParams[] - versions: IModelVersions[] - inputs: IModelInputs[] - tags: IModelTag[] + inferences: ShortModelInference[] + tags: ModelTag[] + types: string[] } -export interface IModelParams { + +export type InferenceParamType = 'floatrange' | 'intrange' | 'bool' | 'choices' | 'int' | 'str' + +export interface InferenceParams { name: string description: string key: string - type: string + type: InferenceParamType required: boolean values: { - availables: string[] + availables: string[] | Array default: any - end: number + stop: number start: number step: number } versions: string[] } -export interface IModelVersions { + +export interface ShortModelInference { + id: string + name: string + slug: string + description: string +} + +export interface Inference { + id: string + tags: string[] + tracking_records: any[] + parameters: InferenceParams[] + inputs: InferenceInput[] name: string description: string - default: boolean slug: string + enabled: false } -export interface IModelInputs { + +// export interface ModelVersions { +// name: string +// description: string +// default: boolean +// slug: string +// } +export interface InferenceInput { // type: 'image' | 'zip' | 'text' | 'audio' | 'pdf' | 'txt' type: string required: boolean @@ -1,34 +1,50 @@ -import React, { useEffect, useMemo } from 'react' -import { Avatar, Box, Button, Typography } from '@mui/material' +import React, { useMemo } from 'react' import Image from 'next/image' import Link from 'next/link' -import LockSvg from '#/assets/svg/lock.svg?react' -import BlockedSvg from '#/assets/svg/blocked.svg?react' import styles from './card-chat.module.scss' + +import BlockedSvg from '#/assets/svg/blocked.svg?react' +import LockSvg from '#/assets/svg/lock.svg?react' import { useThemeAndDevice } from '#/shared/lib/hooks' import { c } from '#/shared/lib/helpers' -import { IShortModel } from '#/entities/model-entity' +import { ShortModel } from '#/entities/model-entity' import { SvgIcon } from '#/shared/ui/svg' import { CommonButton } from '#/shared/ui/button' -import { uid } from 'chart.js/dist/helpers/helpers.core' -export interface ChatModelCardProps extends IShortModel { +export interface ChatModelCardProps extends ShortModel { accessed_models: string[] | null } -export function ChatModelCard({ description, image, title, slug, accessed_models, blocked, tags }: ChatModelCardProps) { +export function ChatModelCard({ + description, + image, + title, + slug, + accessed_models, + enabled, + tags, +}: ChatModelCardProps) { const link = useMemo(() => { - return accessed_models && !accessed_models.includes(slug) ? '/account?scope=subscribe' : `chat-bot/${slug}` + return accessed_models && !accessed_models.includes(slug) + ? '/account?scope=subscribe' + : `chat-bot/${slug}` }, [accessed_models]) - const { theme } = useThemeAndDevice() - return ( -

@@ -36,10 +52,12 @@ export function ChatModelCard({ description, image, title, slug, accessed_models

{description}

- {blocked && ( + {!enabled && (

- Модель недоступна + + Модель недоступна +

)} {accessed_models && !accessed_models.includes(slug) && ( @@ -59,7 +77,12 @@ export function ChatModelCard({ description, image, title, slug, accessed_models {tags && tags.map((tag, index) => (

- + {tag.title}

))} @@ -0,0 +1,15 @@ +.popup { + min-width: 200px; + + &__title { + color: #a4aab5; + font-weight: 600; + font-size: 16px; + margin-bottom: 20px; + } +} + + +.wrap{ + padding: unset !important; +} \ No newline at end of file @@ -0,0 +1,16 @@ +import { POPUP_IMAGE_BOT_PARAMS, PopupTemplate } from '#/shared/ui/popup' +import React from 'react' +import styles from './image-bot-options-popup.module.scss' +import { ImageModelOptions } from '#/widgets/image-model-options' + +export const ImageBotOptionsPopup = () => { + return ( + +

+ +

+ + ) +} @@ -8,26 +8,43 @@ import BlockedSvg from '#/assets/svg/blocked.svg?react' import styles from './card.module.scss' import { useThemeAndDevice } from '#/shared/lib/hooks' import { c } from '#/shared/lib/helpers' -import { IShortModel } from '#/entities/model-entity' +import { ShortModel } from '#/entities/model-entity' import { SvgIcon } from '#/shared/ui/svg' import { CommonButton } from '#/shared/ui/button' -export interface ImageModelCardProps extends IShortModel { +export interface ImageModelCardProps extends ShortModel { accessed_models: string[] | null } -export function ImageModelCard({ description, image, title, slug, accessed_models, blocked, tags }: ImageModelCardProps) { +export function ImageModelCard({ + description, + image, + title, + slug, + accessed_models, + enabled, + tags, +}: ImageModelCardProps) { const link = useMemo(() => { - return accessed_models && !accessed_models.includes(slug) ? '/account?scope=subscribe' : `images/${slug}` + return accessed_models && !accessed_models.includes(slug) + ? '/account?scope=subscribe' + : `deprecated/${slug}` }, [accessed_models]) - const { theme } = useThemeAndDevice() - return ( -

@@ -35,7 +52,7 @@ export function ImageModelCard({ description, image, title, slug, accessed_model

{description}

- {blocked && ( + {!enabled && (

Модель недоступна @@ -58,7 +75,12 @@ export function ImageModelCard({ description, image, title, slug, accessed_model {tags && tags.map((tag, index) => (

- + {tag.title}

))} @@ -1,2 +1,3 @@ export * from './chat-model-card' -export * from './image-model-card' \ No newline at end of file +export * from './image-model-card' +export * from './image-bot-options-popup' \ No newline at end of file @@ -0,0 +1,164 @@ +import axios, { AxiosResponse } from 'axios' +import { User } from 'next-auth' + +import { API_URL } from '#/shared/lib/constants' +import { IOffer } from '#/widgets/payment/model/payment' +import { AccountType, DataForLogin, PayProductRequest, PayProductResponse } from '../model/types' + +export async function getPaymentsPlans(token: string): Promise { + try { + const { data } = await axios.get(API_URL + '/payments/plans', { + headers: { + Authorization: `Bearer ${token}`, + }, + }) + + return data + } catch (err) { + return null + } +} + +export async function payProduct(token: string | null, plan: string): Promise { + if (token === null) { + return null + } + + try { + const { data } = await axios.post>( + API_URL + '/payments/plans', + { + uid: plan, + is_test: 1, + }, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ) + return data.payment_url + } catch (err) { + return null + } +} + +export async function changePassword( + token: string | null, + password_1: string, + password_2: string, + current_password: string +): Promise { + try { + const { status } = await axios.put( + API_URL + '/auth/reset-pass', + { + password_1, + password_2, + current_password, + }, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ) + + return status + } catch (err) { + return 400 + } +} + +export async function getApiKeys(token: string | null): Promise { + try { + const { data } = await axios.get(API_URL + '/public/api-key', { + headers: { + Authorization: `Bearer ${token}`, + }, + }) + + return data + } catch (err) { + return null + } +} + +export async function createApiKeys(data: any, token: string | null): Promise { + try { + const { data: result } = await axios.post(API_URL + '/public/api-key', data, { + headers: { + Authorization: `Bearer ${token}`, + }, + }) + + return result + } catch (err) { + return null + } +} + +export async function deleteApiKey(name: any, token: string | null): Promise { + try { + const { data: result, status } = await axios.delete(API_URL + '/public/api-key', { + data: { + name, + }, + headers: { + Authorization: `Bearer ${token}`, + }, + }) + + return status + } catch (err) { + return null + } +} + +export async function loginByEmail(email: string, password: string): Promise { + try { + const { data } = await axios.post>(API_URL + '/auth/login', { + email, + password, + }) + + return data + } catch (err) { + return null + } +} + +export async function removeSub(token?: string) { + try { + const { status } = await axios.delete(API_URL + '/payments/plans', { + headers: { + Authorization: `Bearer ${token}`, + }, + }) + + return status + } catch (err) { + return null + } +} + +export const getAccountType = async (token: string | null | undefined): Promise => { + if (!token) { + return 'regular' + } + + try { + const { data } = await axios.get>( + API_URL + '/auth/account-type', + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ) + + return data.status + } catch (err) { + return 'regular' + } +} @@ -1,8 +1,8 @@ import axios from 'axios' import { API_URL } from '#/shared/lib/constants' +import { IUserSetting } from '../types' -import { IUserSetting } from '../model/types' export const addUserSettings = async ( token: string, @@ -1,8 +1,8 @@ import axios, { AxiosResponse } from 'axios' import { API_URL } from '#/shared/lib/constants' +import { AccountType } from '../types' -import { AccountType } from '../model/types' export const getAccountType = async (token: string | null | undefined): Promise => { if (!token) { return 'regular' @@ -1,8 +1,8 @@ import axios from 'axios' import { API_URL } from '#/shared/lib/constants' +import { IUserSetting } from '../types' -import { IUserSetting } from '../model/types' export const getUserSettings = async (token: string): Promise => { try { @@ -0,0 +1,2 @@ +export * from './account-endpoints' +export * from './settings.routes' @@ -0,0 +1,16 @@ +import { api } from '#/shared/api' +import { API_URL } from '#/shared/lib/constants' +import { Agent } from 'https' +import { IUserSetting } from '../model/types' + +export function getUserSettings() { + return api.get('/api/users/settings/') +} + +export function postUserSettings(option: Omit) { + return api.post('/api/users/settings/', option) +} + +export function updateUserSettings(id: string, value: any) { + return api.put(`/api/users/settings/${id}`, { value }) +} @@ -3,7 +3,7 @@ import axios from 'axios' import { API_URL } from '#/shared/lib/constants' import { getUpdatedSettingsLocal } from '../lib/helpers/update-setting-local' -import { IUserSetting, SettingValueType } from '../model/types' +import { IUserSetting, SettingValueType } from '../types' export const updateUserSettings = async ( token: string, @@ -1,6 +1,6 @@ import { Device } from '#/shared/lib/types/entities' -import { IUserSetting, SettingType } from '../../model/types' +import { IUserSetting, SettingType } from '../../types' interface IProps { settings: Omit | null @@ -1,4 +1,4 @@ -import { IUserSetting, SettingValueType } from '../../model/types' +import { IUserSetting, SettingValueType } from '../../types' interface IProps { settings: IUserSetting[] @@ -0,0 +1,5 @@ + +export * from './user-type-slice' +export * from './use-user-selector' +export * from './settings-context' +export * from './use-global-settings' @@ -0,0 +1,9 @@ +import { createUseContext } from '#/shared' +import { createContext } from 'react' +import { useGlobalSettings } from './use-global-settings' + +export const UserSettingsContext = createContext | null>(null) + +export const useUserSettingsContext = createUseContext(UserSettingsContext) + +export const UserSettingsContextProvider = UserSettingsContext.Provider @@ -1,92 +0,0 @@ -import { createAsyncThunk, createSlice } from '@reduxjs/toolkit' - -import { addUserSettings } from '../api/add-user-settings' -import { getUserSettings } from '../api/get-user-settings' -import { updateUserSettings } from '../api/update-user-settings' -import { getUpdatedSettingsLocal } from '../lib/helpers/update-setting-local' - -import { IUserSetting, SettingValueType } from './types' - -interface IAddSettings { - token: string | undefined | null - setting: Omit -} - -export const getUserAccountSettings = createAsyncThunk( - 'users/getSettings', - async (token: string | undefined | null) => { - if (!token) { - return initialState.state - } - return await getUserSettings(token) - } -) - -export const addUserAccountSettings = createAsyncThunk( - 'users/addSettings', - async ({ token, setting }: IAddSettings) => { - if (!token) { - return - } - return await addUserSettings(token, setting) - } -) - -export const updateUserAccountSettings = createAsyncThunk( - 'users/updateSettings', - async ({ - token, - id, - value, - settings, - }: { - token: string | undefined | null - id: string - value: SettingValueType - settings: IUserSetting[] | null - }) => { - if (!token) { - return initialState.state - } - if (!settings) { - return initialState.state - } - return await updateUserSettings(token, id, value, settings) - } -) - -const initialState: { state: IUserSetting[] | null } = { - state: null, -} - -export const settingsSlice = createSlice({ - name: 'balance', - initialState, - reducers: { - setSettings: (state, action) => { - state.state = action.payload - }, - }, - extraReducers: (builder) => { - builder.addCase(getUserAccountSettings.fulfilled, (state, action) => { - state.state = action.payload - localStorage.setItem('global_settings', JSON.stringify(action.payload)) - }) - builder.addCase(addUserAccountSettings.fulfilled, (state, action) => { - if (state.state === null) state.state = [] - if (action.payload) { - state.state = [...state.state, action.payload] - localStorage.setItem('global_settings', JSON.stringify([...state.state, action.payload])) - } - }) - - builder.addCase(updateUserAccountSettings.fulfilled, (state, action) => { - if (action.payload) { - state.state = action.payload - localStorage.setItem('global_settings', JSON.stringify(action.payload)) - } - }) - }, -}) - -export const { setSettings } = settingsSlice.actions @@ -2,7 +2,7 @@ import { Device } from '#/shared/lib/types/entities' export type AccountType = 'regular' | 'business_host' | 'business_account' -export type SettingType = 'sidemenu' +export type SettingType = 'sidemenu' | string export type SettingValueType = { sidemenu_state?: 'opened' | 'closed' @@ -12,5 +12,23 @@ export interface IUserSetting { id: string device: Device type: SettingType - value: SettingValueType + value: SettingValueType | any +} + +export interface UserBalance { + current_token_balance: number +} + +export interface PayProductRequest { + uid: string + is_test: number +} + +export interface PayProductResponse { + payment_url: string +} + +export interface DataForLogin { + email: string + password: string } @@ -0,0 +1,65 @@ +import { useLocalStorage } from 'usehooks-ts' +import { IUserSetting } from './types' +import { makePrivateRequest } from '#/shared/api' +import { getUserSettings, postUserSettings, updateUserSettings } from '../api' +import { useShowDataStore } from '#/shared/lib/hooks' +import { getDeviceType } from '#/shared' +import { useCallback, useEffect, useRef, useState } from 'react' +import { useSession } from 'next-auth/react' + +export function useGlobalSettings() { + const [settings, setSettings] = useLocalStorage('global_settings', []) + + const { showMessage } = useShowDataStore() + + const device = getDeviceType() + + const { data } = useSession() + + const addSettings = makePrivateRequest(async (type: string, value: any) => { + const { status, data } = await postUserSettings({ device, type, value }) + + if (status !== 200) return showMessage('Ошибка создания настроек') + + setSettings((s) => [...s, data]) + }) + + const updateSettings = useCallback( + makePrivateRequest(async (type: string, value: any) => { + const option = settings.find((x) => x.type === type) + + if (!option) return showMessage('Ошибка присвоения настроек') + + const { status } = await updateUserSettings(option.id, value) + + if (status !== 204) return showMessage('Ошибка создания настроек') + + setSettings((s) => [...s.filter((x) => x.type !== type), { ...option, value }]) + }), + [settings, data] + ) + + const fetchUserSettings = makePrivateRequest(async () => { + const { status, data } = await getUserSettings() + + const device = getDeviceType() + + if (status !== 200) return showMessage('Ошибка загрузки данных пользователя') + + setSettings(data.filter((s) => s.device === device)) + }) + + const getOptionValue = (type: string, initial: any) => { + const option = settings.find((o) => o.type === type) + return option ? option.value : initial + } + + return { + settings, + setSettings, + addSettings, + fetchUserSettings, + updateSettings, + getOptionValue, + } +} @@ -0,0 +1,4 @@ +import { useAppSelector } from "#/app/store/store"; +import { UserDTO } from "../types"; + +export const useUserSelector = () => useAppSelector((state) => state.user.user) as UserDTO @@ -2,96 +2,22 @@ import { createAsyncThunk, createSlice } from '@reduxjs/toolkit' import { createAction } from '@reduxjs/toolkit/src' import axios, { AxiosResponse } from 'axios' -import { loadingThunk } from '#/app/store/store' +import { loadingThunk, useAppSelector } from '#/app/store/store' import { API_URL } from '#/shared/lib/constants' +import { UserDTO } from '../types' type UserState = { status: loadingThunk - referral: string + user: UserDTO | null } -export type ResponseAllInfo = { - uid: string - first_name: string - last_name: string - username: string - created_at: string - email: string - is_active: boolean - is_staff: boolean - show_balance: boolean - is_confirmed: boolean - is_social: boolean - social_auth: string[] - is_subscribed_to_emails: boolean - profile_picture_link: string | null - account_type: string - referral_code: { - code: string - } - token: { - access: string - refresh: string - } - payment_plan: { - uid: string - plan: { - uid: string - price: string - tokens_per_plan: string - title: string - duration: string - accessed_models: string[] | null - } - last_payment_at: string - next_payment_at: string - current_token_balance: number - } -} - -const initialState: UserState & ResponseAllInfo = { +const initialState: UserState = { status: 'idle', - referral: '', - uid: '', - first_name: '', - last_name: '', - username: '', - created_at: '', - email: '', - show_balance: true, - is_active: false, - social_auth: [], - is_staff: false, - is_confirmed: false, - referral_code: { - code: '', - }, - token: { - access: '', - refresh: '', - }, - is_subscribed_to_emails: false, - is_social: false, - profile_picture_link: null, - account_type: 'regular', - payment_plan: { - uid: '', - plan: { - uid: '', - price: '', - tokens_per_plan: '', - duration: '', - title: '', - accessed_models: null, - }, - last_payment_at: '', - next_payment_at: '', - current_token_balance: 0, - }, + user: null, } -export const getAll = async (token: string | null | undefined): Promise => { - const { data } = await axios.get>(API_URL + '/auth/me', { +export const getAll = async (token: string | null | undefined): Promise => { + const { data } = await axios.get>(API_URL + '/auth/me', { headers: { Authorization: `Bearer ${token}`, }, @@ -101,12 +27,9 @@ export const getAll = async (token: string | null | undefined): Promise { - return await getAll(token) - } -) +export const getAllInfo = createAsyncThunk('user/getAllInfo', async (token: string | null | undefined) => { + return await getAll(token) +}) export const unfollowEmail = createAsyncThunk( 'user/unfollowEmail', @@ -122,48 +45,11 @@ export const unfollowEmail = createAsyncThunk( export const userSlice = createSlice({ name: 'userSlice', initialState, - reducers: { - addReferral: (state, action) => { - state.referral = action.payload - }, - }, + reducers: {}, extraReducers: (builder) => { builder.addCase(getAllInfo.fulfilled, (state, action) => { state.status = 'succeeded' - state.referral = '' - const { - uid, - is_subscribed_to_emails, - email, - account_type, - first_name, - last_name, - profile_picture_link, - is_active, - is_staff, - created_at, - username, - payment_plan, - is_confirmed, - is_social, - referral_code, - show_balance, - } = action.payload - state.is_subscribed_to_emails = is_subscribed_to_emails - state.account_type = account_type - state.email = email - state.payment_plan = payment_plan - state.is_confirmed = is_confirmed - state.first_name = first_name - state.last_name = last_name - state.profile_picture_link = profile_picture_link - state.is_active = is_active - state.is_staff = is_staff - state.created_at = created_at - state.username = username - state.is_social = is_social - state.referral_code = referral_code - state.show_balance = show_balance + state.user = action.payload }) builder.addCase(getAllInfo.pending, (state) => { state.status = 'pending' @@ -171,10 +57,12 @@ export const userSlice = createSlice({ builder.addCase(getAllInfo.rejected, (state) => { state.status = 'failed' }) - builder.addCase(unfollowEmail.fulfilled, (state, action) => { - state.is_subscribed_to_emails = !state.is_subscribed_to_emails + builder.addCase(unfollowEmail.fulfilled, ({ user }, action) => { + if (!user) return + user.is_subscribed_to_emails = !user.is_subscribed_to_emails }) }, }) -export const { addReferral } = userSlice.actions +export const {} = userSlice.actions + @@ -0,0 +1,74 @@ +import { Device } from '#/shared/lib/types/entities' + +export type UserDTO = { + uid: string + first_name: string + last_name: string + username: string + created_at: string + email: string + is_active: boolean + is_staff: boolean + show_balance: boolean + is_confirmed: boolean + is_social: boolean + social_auth: string[] + is_subscribed_to_emails: boolean + profile_picture_link: string | null + account_type: string + referral_code: { + code: string + } + token: { + access: string + refresh: string + } + payment_plan: { + uid: string + plan: { + uid: string + price: string + tokens_per_plan: string + title: string + duration: string + accessed_models: string[] | null + } + last_payment_at: string + next_payment_at: string + current_token_balance: number + } +} + +export type AccountType = 'regular' | 'business_host' | 'business_account' + +export type SettingType = 'sidemenu' + +export type SettingValueType = { + sidemenu_state?: 'opened' | 'closed' +} + +export interface IUserSetting { + id: string + device: Device + type: SettingType + value: SettingValueType +} + +export interface CreateUserUtmDTO { + utm_source: string + utm_medium: string + utm_campaign: string + utm_term: string + utm_content: string +} + +export interface CreateUserDTO { + email: string + password: string +} + +export interface CreateUserRefererDTO { + referer?: string | null +} + +export type CreateUserWithRelations = CreateUserDTO & CreateUserRefererDTO & CreateUserUtmDTO & {} @@ -0,0 +1 @@ +export * from './dto.user' \ No newline at end of file @@ -1 +1,4 @@ export { getAllInfo, userSlice } from './model/user-type-slice' +export * from './api' +export * from './types' +export * from './model' @@ -13,6 +13,8 @@ import { DateInput } from '#/shared/ui/date-input/date-input' import styles from '../invite-person-in-business/ui/invite-modal.module.scss' +import { createApiKeys, getApiKeys } from '#/entities/user-account' + export const ApiKeyModal = ({ open, setOpen, @@ -48,7 +50,7 @@ export const ApiKeyModal = ({ ) : await accountApi.createApiKeys({ name: title !== '' ? title : keyName }, data?.access) if (result !== null) { - accountApi.getApiKeys(data?.access).then((res) => { + getApiKeys(data?.access).then((res) => { setKeys(res) setIsLoading(false) }) @@ -1,7 +1,7 @@ -import { accountApi } from '#/shared/api/account-endpoints' +import { loginByEmail } from "#/entities/user-account" export const authTelegram = async (email: any, password: any) => { - const user = await accountApi.loginByEmail(email, password) + const user = await loginByEmail(email, password) if (user !== null) { ;(window as any).Telegram.WebApp.sendData(user.token.access) @@ -9,7 +9,7 @@ export const authTelegram = async (email: any, password: any) => { } export const authTelegramYandex = async (email: any, password: any) => { - const user = await accountApi.loginByEmail(email, password) + const user = await loginByEmail(email, password) if (user !== null) { ;(window as any).Telegram.WebApp.sendData(user.token.access) @@ -0,0 +1,6 @@ +.container { + display: flex; + flex-direction: column; + gap: 16px; + padding-right: 8px; +} @@ -0,0 +1,86 @@ +import React from 'react' +import styles from './bot-params-map.module.scss' + +import { SwitchFilter } from '#/features/switch-filter/' +import { InputFilter } from '#/features/input-filter/ui/input-filter' +import { useChatBotParams } from '#/entities/model-entity' +import { CommonTooltip } from '#/shared/ui/tooltip' +import { RangeSlider } from '#/shared/ui/range-slider' +import { CommonSelect } from '#/shared/ui/common-select' + +interface BotParamsMap {} + +export function BotParamsMap({}: BotParamsMap) { + const { infrerenceValues, setInferenceValueByKey, inferenceParams } = useChatBotParams() + + return ( +

+ {inferenceParams.map(({ key, type, name, description, values }) => { + if (type == 'floatrange' || type == 'intrange') { + return ( + + setInferenceValueByKey(key, value)} + max={values.stop} + min={values.start} + step={values.step} + /> + + ) + } + if (type == 'bool') { + return ( + setInferenceValueByKey(key, value)} + name={name} + description={description} + /> + ) + } + + if (type == 'choices') { + return ( + setInferenceValueByKey(key, value)} + withoutTooltip + items={values.availables.map((a) => { + return { + value: a[0], + label: a[1], + } + })} + /> + ) + } + + if (type == 'int' || type == 'str') { + return ( + setInferenceValueByKey(key, value)} + withoutTooltip={!description || description.length == 0} + onlyNumber={type == 'int'} + /> + ) + } + })} +

+ ) +} @@ -0,0 +1 @@ +export * from './bot-params-map' \ No newline at end of file @@ -1,97 +0,0 @@ -import React from 'react' -import { Stack } from '@mui/material' - -import { CheckboxFilter } from '#/app/components/filters/checkbox_filter' -import { InputFilter } from '#/app/components/filters/input_filter' -import { SelectFilter } from '#/app/components/filters/select_filter' -import { Slide } from '#/app/components/filters/slide_filter' -import { setParams } from '#/app/store/model-parametres-store' -import { useAppDispatch, useAppSelector } from '#/app/store/store' -import { IModelParams } from '#/shared/api/models/models' - -interface IProps { - params: IModelParams[] - currentVersion: string -} -export default function BotParamsMap({ params, currentVersion }: IProps) { - const includeParams = useAppSelector((state) => state.params.params) - const dispatch = useAppDispatch() - - const setNewParam = (payload: { [key: string]: string | number | number[] | boolean }) => { - dispatch(setParams(payload)) - } - - React.useEffect(() => { - if (currentVersion && params) { - const res = params.map((el) => - el.versions.length !== 0 && !el.versions.includes(currentVersion) ? null : el - ) - if (res.every((el) => el === null)) { - setNewParam({}) - } - } - }, [currentVersion, params]) - - return ( - - {params.map((item, idx) => { - if (item.versions.length === 0 || item.versions.includes(currentVersion)) { - if (item.type == 'floatrange' || item.type == 'intrange') { - return ( - - ) - } - if (item.type == 'bool') { - return ( - - ) - } - - if (item.type == 'list') { - return ( - - ) - } - - if (item.type == 'int' || item.type == 'str') { - return ( - - ) - } - } - })} - - ) -} @@ -34,7 +34,11 @@ export const useChangePassword = () => { return setError('newPassword', { message: 'Пароли не совпадают' }) } - const { data, status } = await changePassword(modal.getStoreProperty('email')!, password, newPassword) + const { data, status } = await changePassword( + modal.getStoreProperty('email')!, + password, + newPassword + ) if (status !== 200) return showMessage(data.detail) @@ -0,0 +1 @@ +export * from './use-chat-bot-input' \ No newline at end of file @@ -0,0 +1,58 @@ +import { useAppSelector } from '#/app/store/store' +import { MessageSend } from '#/entities/message' +import { Inference, useChatBotParams } from '#/entities/model-entity' +import { acceptTypes } from '#/shared/common-load-file/config' +import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' +import { useMemo, useState } from 'react' + +export function useChatBotInput( + inference: Inference | null, + sendMessage: (data: MessageSend) => Promise +) { + const { showMessage } = useShowDataStore() + const [file, setFile] = useState(null) + const { infrerenceValues } = useChatBotParams() + const [valueInput, setValueInput] = useState('') + + const inputTypes = useMemo(() => { + if (!inference?.inputs) return [] + + return inference.inputs + .map(({ type }) => acceptTypes[type]) + .filter((value): value is string => value !== null) + }, [inference?.inputs]) + + const onSendMessage = async (content: string, required: (string | null)[]) => { + const filterFile = file && inputTypes.length === 0 ? null : file + if (file && inputTypes.length === 0) { + setFile(null) // Если модель не поддерживает отправку файлов, сбрасываем файл + showMessage('Модель не поддерживает отправку файлов') + } + + if (required.includes('text') && content === '') return showMessage('Введите сообщение!') + + if (required.includes('image') && file === null) return showMessage('Прикрепите изображение!') + + if (!inference) return showMessage('Не выбрана версия модели') + + await sendMessage({ + content, + file: filterFile, + info: { + inference: inference.slug, + ...infrerenceValues, + }, + }) + } + + + + return { + onSendMessage, + file, + setFile, + valueInput, + setValueInput, + inputTypes, + } +} @@ -0,0 +1 @@ +export * from './model' \ No newline at end of file @@ -0,0 +1 @@ +export * from './use-chat-bot-pagination' \ No newline at end of file @@ -0,0 +1,149 @@ +import { useAppSelector } from '#/app/store/store' +import { getImagesBySlug, Message, useChatBotMessages } from '#/entities/message' +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, useMemo, useRef, useState } from 'react' +import { LimitSize, Limit } from '../types' +import { useRouter } from 'next/router' +import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' +import { useThemeAndDevice } from '#/shared/lib/hooks' +import { getMessagesBySlug } from '#/entities/message' +import { makePrivateRequest } from '#/shared/api' +import { useCurrentChat } from '#/features/chats' +import { CommonScrollbarRef } from '#/shared/ui/scrollbar' + +export function useChatBotPagination() { + const { currentChat } = useCurrentChat() + + const refScroll = useRef(null) + + const scrollContainer = createRef() + + const offset = useRef(0) + + const observer = useRef(null) + + const [isHidden, setIsHidden] = useState(false) + + const { messages, setMessages, loading, setLoading, loaded, setLoaded } = useChatBotMessages() + + const { showMessage } = useShowDataStore() + + const { data } = useSession() + + const messagesWithRefs = useMemo( + () => messages.map((m) => ({ ...m, ref: createRef() })), + [messages] + ) + + // TODO: Подумать как написать лучше + useEffect(() => { + setMessages([]) + offset.current = 0 + setLoaded(false) + if (currentChat && observer.current) { + observer.current.disconnect() + observer.current = null + onObserverMounted() + } + if (!scrollContainer.current) return + scrollContainer.current.scrollToBottom() + }, [currentChat]) + + const limits: Record = { + small: { + active: useMediaQuery('(max-height: 600px)'), + limit: 10, + firstLimit: 40, + }, + medium: { + active: useMediaQuery('(min-height: 600px) and (max-height: 900px)'), + limit: 30, + firstLimit: 50, + }, + large: { + active: useMediaQuery('(min-height: 900px)'), + limit: 45, + firstLimit: 70, + }, + } + + const fetchMessages = makePrivateRequest(async (count?: number) => { + if (!data) return + + setLoading(true) + + const { currentChat } = useCurrentChat.getState() + + if (!currentChat) return + + const { data: answer, ...response } = await getMessagesBySlug( + currentChat, + offset.current, + count || 10 + ) + + setLoading(false) + + setLoaded(true) + + if (response.status >= 400 || !Array.isArray(answer)) return showMessage('Ошибка загрузки чата') + + const { messages } = useChatBotMessages.getState() + + setMessages([...answer.reverse(), ...messages]) + + offset.current += answer.length + }) + + const callback = async function (entries: IntersectionObserverEntry[]) { + if (!entries[0].isIntersecting) return + + if (isHidden) return setIsHidden(false) + + const active = Object.values(limits).find((item) => item.active) + + if (!active) return + + if (offset.current > 0) { + fetchMessages(active.limit) + } else { + fetchMessages(active?.firstLimit) + } + } + + function onObserverMounted() { + if (!refScroll.current || observer.current) return + + observer.current = new IntersectionObserver(callback) + + observer.current.observe(refScroll.current) + } + + function isHiddenHandler() { + if (document.visibilityState === 'hidden') return setIsHidden(true) + setIsHidden(false) + } + + useEffect(() => { + document.addEventListener('visibilitychange', isHiddenHandler) + return () => document.removeEventListener('visibilitychange', isHiddenHandler) + }, []) + + return { + onObserverMounted, + messages, + loading, + setLoading, + offset, + setMessages, + fetchMessages, + scrollContainer, + messagesWithRefs, + refScroll, + loaded, + observer, + } +} @@ -0,0 +1 @@ +export * from './limits' \ No newline at end of file @@ -0,0 +1,7 @@ +export type LimitSize = 'small' | 'medium' | 'large' + +export interface Limit { + active: boolean + limit: number + firstLimit: number +} \ No newline at end of file @@ -0,0 +1,2 @@ +export * from './model' +export * from './types' \ No newline at end of file @@ -0,0 +1 @@ +export * from './use-chat-imagel-load' \ No newline at end of file @@ -0,0 +1,37 @@ +import { useState, useCallback } from 'react' + +export function useChatImageLoad( + setFile: React.Dispatch> +) { + + const [resendValue, setResendValue] = useState('') + + const onLoadImage = useCallback( + (event: React.ChangeEvent | null, file?: File) => { + if (event?.target.files) { + setFile(event.target.files[0]) + } + if (file) { + setFile(file) + } + }, + [] + ) + + const handleSetResetValue = useCallback( + (value: string) => { + if (resendValue === value) { + setResendValue((prev) => prev + ' ') + } else { + setResendValue(value) + } + }, + [resendValue] + ) + + return { + onLoadImage, + resendValue, + handleSetResetValue + } +} @@ -0,0 +1 @@ +export * from './model' \ No newline at end of file @@ -0,0 +1,31 @@ +.container { + padding: 6px 0px !important; + color: var(--air-color); +} + +.popup { + &__button { + font-size: 15px; + display: flex; + font-weight: 500; + align-items: center; + gap: 5px; + width: max-content; + padding: 8px 14px; + transition: all 0.3s ease; + width: 100%; + + &:hover { + backdrop-filter: brightness(90%); + } + } +} + +.container { + padding: 6px 0px !important; + color: var(--air-color); + + @media screen and (max-width: 1000px) { + padding: 10px !important; + } +} \ No newline at end of file @@ -0,0 +1,45 @@ +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' +import TrashSvg from '#/assets/svg/trash.svg?react' +import { useChatActions } from '#/entities/chat' +import { useMediaQuery } from 'usehooks-ts' + +export interface ChatItemActionsPopupProps extends PopupTemplateProps { + id: string + setRename: Dispatch> +} + +export const ChatItemActionsPopup = ({ id, setRename, ...props }: ChatItemActionsPopupProps) => { + const { onRemoveChat } = useChatActions() + + const isMobile = useMediaQuery('(max-width: 1000px)') + + const popup = getPopupById(id) + + const renamePopup = getPopupById(`rename-${id}`) + + return ( + +

+ + +

+ + ) +} @@ -0,0 +1 @@ +export * from './chat-item-actions-popup' \ No newline at end of file @@ -0,0 +1 @@ +export * from './ui' \ No newline at end of file @@ -0,0 +1,9 @@ +.popup{ + &__save{ + width: 100%; + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + } +} \ No newline at end of file @@ -0,0 +1,52 @@ +import React, { useState } from 'react' + +import styles from './chat-mobile-rename-popup.module.scss' +import { PopupTemplate, getPopupById } from '#/shared/ui/popup' +import { CommonInput } from '#/shared/ui/common-input' +import RenameSvg from '#/assets/svg/rename.svg?react' +import { useChatActions } from '#/entities/chat' +import { title } from 'process' +import { CommonButton } from '#/shared/ui/button' + +interface ChatMobileRenameProps { + id: string +} + +export const ChatMobileRename = ({ id }: ChatMobileRenameProps) => { + const { onRenameChat } = useChatActions() + + const popup = getPopupById('rename-' + id) + + const [value, setValue] = useState('') + + return ( + +

+ setValue(e.target.value)} + /> + + { + onRenameChat(id, value) + popup.setState(false) + }} + > + + Сохранить + +

+ + ) +} @@ -0,0 +1,2 @@ +export * from './use-chats' +export * from './use-current-chat' \ No newline at end of file @@ -0,0 +1,49 @@ +import React, { Dispatch, SetStateAction, createRef, useEffect, useMemo, useState } from 'react' +import axios from 'axios' +import { useSession } from 'next-auth/react' + +import { createChat, getAllChats } from '#/shared/api/endpoints' +import { API_URL } from '#/shared/lib/constants' +import { useCurrentChat } from '.' +import { useRouter } from 'next/router' +import { ChatDTO, getChats, postChat, useChatsStore } from '#/entities/chat' +import { makePrivateRequest } from '#/shared/api' +import { useShowDataStore } from '#/shared/lib/hooks' + +export function useChats() { + const { query } = useRouter() + + const model = useMemo(() => query.slug as string, [query.slug]) + + const { chats, setChats } = useChatsStore() + + const { showMessage } = useShowDataStore() + + const { currentChat: chat, setCurrentChat } = useCurrentChat() + + const fetchChats = makePrivateRequest(async () => { + const { data, status } = await getChats(model) + + if (status !== 200) return showMessage('Ошибка при получении чатов') + + setChats(data) + + if (!data.length) return + + setCurrentChat(data[0].uid) + }) + + const chatsWithRefs = useMemo( + () => chats.map((c) => ({ ...c, ref: createRef() })), + [chats] + ) + + return { + chat, + chats, + fetchChats, + createChat, + setCurrentChat, + chatsWithRefs, + } +} @@ -0,0 +1,17 @@ +import { create } from 'zustand' + +export interface CurrentChatStore { + currentChat: string | null + setCurrentChat: (currentChat: string | null) => void +} + +export const useCurrentChat = create((set, get) => { + function setCurrentChat(currentChat: string | null) { + set({ currentChat }) + } + + return { + currentChat: null, + setCurrentChat + } +}) @@ -1,2 +1 @@ -export type { Chat, ChatsReturn } from './use-chats' -export { useChats } from './use-chats' +export * from './model' \ No newline at end of file @@ -1,96 +0,0 @@ -import React, { Dispatch, SetStateAction, useEffect, useState } from 'react' -import axios from 'axios' -import { useSession } from 'next-auth/react' - -import { createChat, getAllChats } from '#/shared/api/endpoints' -import { API_URL } from '#/shared/lib/constants' - -export type Chat = { - uid: string - title: string - created_at: string -} - -export type ChatsReturn = { - currentChat: string | null - chats: Chat[] | null - chatSetting: HTMLButtonElement | null - isTryRename?: string | undefined - desktop?: boolean - setIsTryRename?: Dispatch> - setChatSetting: Dispatch> - removeChat: (uid: string) => void - createNewChat: () => void - handleClickChatSetting: (event: React.MouseEvent) => void - setChat: (value: string | null) => void -} - -export function useChats(model: string): ChatsReturn { - const [chats, setChats] = useState(null) - - const [currentChat, setCurrentChat] = useState(null) - - const [isTryRename, setIsTryRename] = useState(undefined) - - const [chatSetting, setChatSetting] = useState(null) - - const { data } = useSession() - - useEffect(() => { - if (model && data?.access) { - getAllChats(model, data?.access).then((res) => { - setChats(res) - if (res !== null && res.length > 0 && res[0] !== null) { - setCurrentChat(res[0].uid) - } - }) - } - }, [model, data?.access]) - - const createNewChat = async () => { - const chat = await createChat(model, data?.access) - - if (chat === null) { - return - } - - setChats((prev) => [...prev!, chat]) - setCurrentChat(chat.uid) - } - - const removeChat = async (uid: string) => { - try { - setChatSetting(null) - const { status } = await axios.delete(API_URL + `/chats/${uid}/`, { - headers: { Authorization: `Bearer ${data?.access}` }, - }) - - if (status === 204) { - let newChats = chats!.filter((el) => el.uid !== uid) - setChats(newChats) - if (newChats.length !== 0) setCurrentChat(newChats[0].uid) - } - } catch (e) {} - } - - const handleClickChatSetting = (event: React.MouseEvent) => { - setChatSetting(event.currentTarget) - } - - const setChat: any = (value: string | null) => { - setCurrentChat(value) - } - - return { - currentChat, - chats, - chatSetting, - setChatSetting, - removeChat, - createNewChat, - handleClickChatSetting, - isTryRename, - setIsTryRename, - setChat, - } -} @@ -5,11 +5,12 @@ import { sendReport } from '../api' import { makePrivateRequest } from '#/shared/api' import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' import { useRouter } from 'next/router' +import { useUserSelector } from '#/entities/user-account' const MAX_FILE_SIZE = 4.5 * 1024 * 1024 // 4.5 MB export const useErrorReport = () => { - const email = useAppSelector((state) => state.user.email) + const {email} = useUserSelector() const [file, setFile] = React.useState() const { showMessage } = useShowDataStore() @@ -19,14 +19,21 @@ export const ErrorReportPlate = () => { {isSend ? (

Спасибо!

Ваше сообщение направлено нашим специалистам. Ответ придет на почту, указанную при регистрации

+ Ваше сообщение направлено нашим специалистам. Ответ придет на почту, указанную + при регистрации +

) : (

e.stopPropagation()}>

Сообщить об ошибке

{ id='file-input' /> - + @@ -52,7 +63,10 @@ export const ErrorReportPlate = () => {

Добавлено 1 изображение: {file.name}

@@ -0,0 +1,43 @@ +.area { + padding: 40px; + min-width: 660px; + display: flex; + align-items: center; + justify-content: center; + background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23A4AAB50D' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e"); + border-radius: 20px; + background-color: var(--new-ui-element-bg); + + &__input { + display: none; + } + &__icon { + margin-bottom: 18px; + } + + &__title { + margin-bottom: 5px; + color: var(--new-ui-gray-color); + } + + &__content { + margin-bottom: 25px; + text-align: center; + } + + &__text { + color: var(--new-ui-gray-color); + } + + &__button { + display: flex; + align-items: center; + gap: 12px; + } +} + +.container { + display: flex; + flex-direction: column; + align-items: center; +} @@ -0,0 +1,55 @@ +import React, { useRef } from 'react' +import styles from './image-area.module.scss' + +import PlusSvg from '#/assets/svg/plus.svg?react' +import { c } from '#/shared' +import { CommonButton } from '#/shared/ui/button' + +interface ImageAreaProps { + files: File[] + setFiles: React.Dispatch> +} + +export const ImageArea = ({ files, setFiles }: ImageAreaProps) => { + const fileInput = useRef(null) + + function onDrop(e: React.DragEvent) { + e.preventDefault() + setFiles(Array.from(e.dataTransfer.files)) + } + + function onInputChange(e: React.ChangeEvent) { + e.preventDefault() + + const { target } = e + + if (!target.files) return + + const file = target.files.item(0)! + + if (['png', 'jpg', 'jpeg'].some((ext) => file.name.includes(ext))) { + setFiles([file]) + } + } + + return ( +

e.preventDefault()} className={styles.area}> +

+ +

Загрузить фото

или просто перетащите мышью

+ + fileInput.current?.click()} + className={styles.area__button} + variant='primary' + > + + Загрузить + +

+ ) +} @@ -0,0 +1 @@ +export * from './image-area' \ No newline at end of file @@ -0,0 +1 @@ +export * from './ui' \ No newline at end of file @@ -1,62 +1,80 @@ import { getUserBalance } from '#/entities/balance' -import { Message, MessageSend, sendImage } from '#/entities/message' +import { + Message, + MessageSend, + postImageMessage, + useImageBotMessages, + useImageMessagesEvents, +} from '#/entities/message' import { useAppDispatch } from '#/app/store/store' import { Device } from '#/shared/lib/types/entities' -import { formDataHelper } from '#/widgets/messages' +import { MutableRefObject, RefObject, useEffect, useState } from 'react' +import { useShowDataStore } from '#/shared/lib/hooks' +import { useImageBot } from '#/entities/model-entity/model/use-image-bot' import { useSession } from 'next-auth/react' -import { Dispatch, RefObject, SetStateAction, useEffect, useState } from 'react' +import { makePrivateRequest } from '#/shared/api' +import { useEventSource } from '#/shared/lib/event-source' +import { eventBus } from '#/shared/classes' export function useImageBotCreateImage( - showError: (message: string) => void, - type: string, device: Device, - setMessages: Dispatch>, - mobileScrollContainer: RefObject + mobileScrollContainer: RefObject, + offset: MutableRefObject ) { - const [isComplete, setIsComplete] = useState(false) + const { botParams } = useImageBot() const [createLoading, setCreateLoading] = useState(false) - const { data } = useSession() + const { makeEvent } = useImageMessagesEvents() + + const { showMessage } = useShowDataStore() + + const { setMessages, messages } = useImageBotMessages() const dispatch = useAppDispatch() - const createImage = async (dataForSend: MessageSend) => { - const { content, file } = dataForSend + const { data: session } = useSession() + + const { addOpenCallback, addCloseEvent } = useEventSource() + + const createImage = makePrivateRequest(async (dto: MessageSend) => { + if (!botParams) return - setIsComplete(false) setCreateLoading(true) - const dataSending = file ? formDataHelper(file, dataForSend) : dataForSend + if (!dto.file) delete dto.file - const { data: messages } = await sendImage(type, dataSending, data?.access) + const { data, status } = await postImageMessage(botParams.slug, dto) setCreateLoading(false) - if (typeof messages === 'string') { - showError(messages) - return - } + if (status !== 200) + return showMessage((data as { detail: string }).detail ?? 'Ошибка при получении сообщений') - dispatch(getUserBalance(data?.access)) + dispatch(getUserBalance(session?.access)) - setMessages((prev: Message[]) => { - if (!prev || !prev.length) return messages + const messages = useImageBotMessages.getState().messages - if (device === 'desktop') { - return [...messages, ...prev] - } - return [...prev, ...messages] - }) + offset.current++ + + const answer = (data as Message[])[1] - setIsComplete(true) + if (device === 'desktop') setMessages([answer, ...messages]) + else setMessages([...messages, answer]) - if (device === 'desktop') { + setTimeout(() => eventBus.publish(`image-generate-${answer.uid}`, true), 100) + + makeEvent('images') + + addCloseEvent('images', () => { + eventBus.publish(`image-generate-${answer.uid}`, false) + }) + + if (device === 'desktop') return window.scrollTo({ top: 0, behavior: 'smooth', }) - } setTimeout(() => { if (!mobileScrollContainer.current) return @@ -66,11 +84,14 @@ export function useImageBotCreateImage( behavior: 'smooth', }) }, 500) - } + }) + + useEffect(() => { + console.log(messages) + }, [messages]) return { createImage, - isComplete, createLoading, } } @@ -1 +1 @@ -export * from './use-images-uniq-input' \ No newline at end of file +export * from './use-images-model-input' \ No newline at end of file @@ -0,0 +1,45 @@ +import { MessageSend } from '#/entities/message' +import { Inference, useImageBotParams } from '#/entities/model-entity' +import { useShowDataStore } from '#/shared/lib/hooks' +import { useMemo, useState } from 'react' + +export function useImageBotInput(sendMessage: (data: MessageSend) => Promise) { + const { showMessage } = useShowDataStore() + const [file, setFile] = useState(null) + const { infrerenceValues, inference, inferenceInputs: inputs } = useImageBotParams() + + const [valueInput, setValueInput] = useState('') + + const inputTypes = useMemo(() => inputs.map((p) => p.type), [inputs]) + + const requiredTypes = useMemo(() => inputs.filter((p) => p.required).map((p) => p.type), [inputs]) + + const onSendMessage = async (content: string, required: (string | null)[]) => { + if (required.includes('text') && content === '') return showMessage('Введите сообщение!') + + if (required.includes('zip') && file === null) showMessage('Прикрепите архив!') + + if (required.includes('image') && file === null) return showMessage('Прикрепите изображение!') + + if (!inference) return showMessage('Не выбрана версия модели') + + await sendMessage({ + content, + file, + info: { + inference: inference.slug, + ...infrerenceValues, + }, + }) + } + + return { + onSendMessage, + file, + setFile, + valueInput, + setValueInput, + inputTypes, + requiredTypes, + } +} @@ -1,64 +0,0 @@ -import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' -import { MessageSend } from '#/shared/lib/types/model' -import { useState, ChangeEvent } from 'react' - -export function useImagesUniqInput( - version: string, - includeParams: object, - createImage: (dataForSend: MessageSend) => any -) { - const [image, setImage] = useState(null) - - const { showMessage } = useShowDataStore() - - function onLoadImage(event: ChangeEvent) { - if (event.target.files) { - setImage(event.target.files[0]) - } - } - - function onCreateImage(input: string, required: (string | null)[]) { - // про switch не слышали люди)) - if (required.includes('text') && (input === '' || input === null)) { - showMessage('Введите сообщение!') - return false - } - if (required.includes('image') && image === null) { - showMessage('Прикрепите изображение!') - return false - } - if (required.includes('zip') && image === null) { - showMessage('Прикрепите архив!') - return false - } - - // Снова какой то пиз**ц - let data = {} - if (version === '') { - data = { - ...includeParams, - } - } else { - data = { - version: version, - ...includeParams, - } - } - - createImage({ - content: input, - file: image, - info: { - ...data, - }, - }) - return true - } - - return { - image, - setImage, - onLoadImage, - onCreateImage, - } -} @@ -1 +1,2 @@ +export * from './use-images-bot-pagination-old' export * from './use-images-bot-pagination' \ No newline at end of file @@ -0,0 +1,150 @@ +import { useAppSelector } from '#/app/store/store' +import { getImagesBySlug, Message, useImageBotMessages } from '#/entities/message' +import { Device } from '#/shared/lib/types/entities' +import { getImagesGalery } from '#/widgets/messages' +import { useMediaQuery } from '@mui/material' +import { useSession } from 'next-auth/react' +import { useEffect, useRef, useState } from 'react' +import { LimitSize, Limit } from '../types' +import { useRouter } from 'next/router' +import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' +import { useImageObjectId } from '#/features/image-object-id' + +export function useImageBotPaginationOld(deviceType: Device) { + const refScrollMobile = useRef(null) + const refScrollDesktop = useRef(null) + const mobileScrollContainer = useRef(null) + const offset = useRef(0) + const observer = useRef(null) + + const [isHidden, setIsHidden] = useState(false) + + const { setImageObjectId } = useImageObjectId() + + const { query } = useRouter() + + const { messages, setLoading, setMessages, loading } = useImageBotMessages() + + const { showMessage } = useShowDataStore() + + const { data } = useSession() + + const limits: Record = { + small: { + active: useMediaQuery('(max-height: 600px)'), + limit: 20, + firstLimit: 30, + }, + medium: { + active: useMediaQuery('(min-height: 600px) and (max-height: 900px)'), + limit: 30, + firstLimit: 50, + }, + large: { + active: useMediaQuery('(min-height: 900px)'), + limit: 45, + firstLimit: 70, + }, + } + + const fetchMessages = async (count?: number) => { + if (!data) return + + setLoading(true) + + const { data: answer, ...response } = await getImagesBySlug( + query.slug as string, + data.access, + offset.current, + count || 10 + ) + + if (response.status >= 400 || !Array.isArray(answer.messages)) + return showMessage('Ошибка загрузки чата') + + const messages = useImageBotMessages.getState().messages + + if (deviceType === 'desktop') setMessages([...messages, ...answer.messages]) + else setMessages([...answer.messages.reverse(), ...messages]) + + offset.current += answer.messages.length + + // console.log(offset.current) + + setImageObjectId(answer.id) + } + + const callback = async function (entries: IntersectionObserverEntry[]) { + if (!entries[0].isIntersecting) return + + if (isHidden) return setIsHidden(false) + + if (deviceType === 'desktop') { + const active = Object.values(limits).find((item) => item.active) + + if (!active) return + + return fetchMessages(offset.current > 0 ? active.limit : active?.firstLimit) + } + + const { current } = mobileScrollContainer + + if (!current) return + + const scrollBottom = current.scrollHeight - current.scrollTop + + await fetchMessages() + + setTimeout(() => { + const { current } = mobileScrollContainer + + if (!current) return + + if (offset.current === 0) current.scrollTop = current.scrollHeight - scrollBottom + else { + current.scroll({ + top: current.scrollHeight - scrollBottom, + behavior: 'smooth', + }) + } + + setLoading(false) + }, 500) + } + + function onObserverMounted() { + setMessages([]) + + const currentObserver = + deviceType === 'desktop' ? refScrollDesktop.current : refScrollMobile.current + + if (!currentObserver || observer.current) return + + observer.current = new IntersectionObserver(callback, { rootMargin: '400px' }) + + observer.current.observe(currentObserver!) + } + + function isHiddenHandler() { + if (document.visibilityState === 'hidden') return setIsHidden(true) + setIsHidden(false) + } + + useEffect(() => { + document.addEventListener('visibilitychange', isHiddenHandler) + return () => document.removeEventListener('visibilitychange', isHiddenHandler) + }, []) + + return { + refScrollMobile, + refScrollDesktop, + onObserverMounted, + messages, + loading, + setLoading, + offset, + setMessages, + fetchMessages, + mobileScrollContainer, + } +} @@ -1,28 +1,21 @@ -import { useAppSelector } from '#/app/store/store' -import { getImagesBySlug, Message } from '#/entities/message' -import { Device } from '#/shared/lib/types/entities' -import { getImagesGalery } from '#/widgets/messages' +import { getImagesGalery, useMessagesStore } from '#/widgets/messages' import { useMediaQuery } from '@mui/material' import { useSession } from 'next-auth/react' -import { useEffect, useRef, useState } from 'react' +import { useMemo, useRef } from 'react' + +import { useAppSelector } from '#/app/store/store' +import { getImagesBySlug, Message, useImageBotMessages } from '#/entities/message' +import { Device } from '#/shared/lib/types/entities' import { LimitSize, Limit } from '../types' import { useRouter } from 'next/router' import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' +import { useImageObjectId } from '#/features/image-object-id' -export function useImageBotPagination(deviceType: Device) { - const refScrollMobile = useRef(null) - const refScrollDesktop = useRef(null) - const mobileScrollContainer = useRef(null) +export function useImageBotPagination(container: React.RefObject) { + const refScroll = useRef(null) const offset = useRef(0) - const observer = useRef(null) - - const [isHidden, setIsHidden] = useState(false) - const { query } = useRouter() - - const [messages, setMessages] = useState([]) - - const [loading, setLoading] = useState(true) + const { messages, loading, setLoading, addMessages } = useMessagesStore() const { showMessage } = useShowDataStore() @@ -31,118 +24,81 @@ export function useImageBotPagination(deviceType: Device) { const limits: Record = { small: { active: useMediaQuery('(max-height: 600px)'), - limit: 20, - firstLimit: 30, + limit: 10, + firstLimit: 20, }, medium: { active: useMediaQuery('(min-height: 600px) and (max-height: 900px)'), - limit: 30, - firstLimit: 50, + limit: 15, + firstLimit: 30, }, large: { active: useMediaQuery('(min-height: 900px)'), - limit: 45, - firstLimit: 70, + limit: 20, + firstLimit: 40, }, } + const revertedMessages = useMemo(() => [...messages].reverse(), [messages]) + const fetchMessages = async (count?: number) => { if (!data) return setLoading(true) - const { data: answer, ...response } = await getImagesBySlug( - query.slug as string, + const { data: answer, ...response } = await getImagesGalery( data.access, offset.current, count || 10 ) + setLoading(false) - if (response.status >= 400 || !Array.isArray(answer)) + if (response.status >= 400 || !Array.isArray(answer.messages)) return showMessage('Ошибка загрузки чата') - if (deviceType === 'desktop') { - setMessages((prev) => [...prev, ...answer]) - } else { - setMessages((prev) => [...answer.reverse(), ...prev]) - } + addMessages(answer.messages) - offset.current += answer.length + offset.current = offset.current + answer.messages.length } const callback = async function (entries: IntersectionObserverEntry[]) { if (!entries[0].isIntersecting) return - if (isHidden) return setIsHidden(false) - - if (deviceType === 'desktop') { - const active = Object.values(limits).find((item) => item.active) - - if (!active) return + if (!refScroll.current) return - if (offset.current > 0) { - fetchMessages(active.limit) - } else { - fetchMessages(active?.firstLimit) - } - } + const scrollBottom = container.current!.scrollHeight - container.current!.scrollTop - const { current } = mobileScrollContainer + const active = Object.values(limits).find((item) => item.active) - if (!current) return - - const scrollBottom = current.scrollHeight - current.scrollTop - - await fetchMessages() + if (offset.current > 0) await fetchMessages(active?.limit) + else await fetchMessages(active?.firstLimit) setTimeout(() => { - const { current } = mobileScrollContainer - - if (!current) return - - if (offset.current === 0) current.scrollTop = current.scrollHeight - scrollBottom - else { - current.scroll({ - top: current.scrollHeight - scrollBottom, - behavior: 'smooth', - }) - } - - setLoading(false) + if (!container.current) return + container.current.scroll({ + top: container.current!.scrollHeight - scrollBottom + 70, + behavior: 'smooth', + }) }, 500) } function onObserverMounted() { - const currentObserver = - deviceType === 'desktop' ? refScrollDesktop.current : refScrollMobile.current - - if (!currentObserver) return + if (!refScroll.current) return - observer.current = new IntersectionObserver(callback, { rootMargin: '400px' }) + const observer = new IntersectionObserver(callback, { + rootMargin: '400px', + }) - observer.current.observe(currentObserver!) + observer.observe(refScroll.current) } - function isHiddenHandler() { - if (document.visibilityState === 'hidden') return setIsHidden(true) - setIsHidden(false) - } - - useEffect(() => { - document.addEventListener('visibilitychange', isHiddenHandler) - return () => document.removeEventListener('visibilitychange', isHiddenHandler) - }, []) - return { - refScrollMobile, - refScrollDesktop, + refScroll, onObserverMounted, messages, loading, setLoading, - offset, - setMessages, fetchMessages, - mobileScrollContainer, + revertedMessages, } } @@ -0,0 +1,6 @@ +.container { + display: flex; + flex-direction: column; + gap: 16px; + padding-right: 8px; +} @@ -0,0 +1,86 @@ +import React from 'react' +import styles from './image-bot-params-map.module.scss' + +import { SwitchFilter } from '#/features/switch-filter/' +import { InputFilter } from '#/features/input-filter/ui/input-filter' +import { useChatBotParams, useImageBotParams } from '#/entities/model-entity' +import { CommonTooltip } from '#/shared/ui/tooltip' +import { RangeSlider } from '#/shared/ui/range-slider' +import { CommonSelect } from '#/shared/ui/common-select' + +interface ImageBotParamsMap {} + +export function ImageBotParamsMap({}: ImageBotParamsMap) { + const { infrerenceValues, setInferenceValueByKey, inferenceParams } = useImageBotParams() + + return ( +

+ ) +} @@ -0,0 +1 @@ +export * from './image-bot-params-map' \ No newline at end of file @@ -0,0 +1 @@ +export * from './ui' \ No newline at end of file @@ -1,25 +1,22 @@ import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react' import { ImageWithState } from './types' import { Message } from '#/entities/message' +import { GALLERY_IMAGES, getModalById } from '#/features/modals' + +export const useImagesLibrary = (current: string | null, images: Message[]) => { + + const modal = getModalById(GALLERY_IMAGES) -export const useImagesLibrary = ( - setModal: Dispatch>, - current: string | null, - images: Message[] -) => { const [initialCount, setInitialCount] = useState(0) const esc = (e: KeyboardEvent) => { if (e.key === 'Escape') { e.preventDefault() - setModal(false) + modal.setState(false) } } - const currentIndex = useMemo( - () => images.findIndex((item) => item.file === current), - [current] - ) + const currentIndex = useMemo(() => images.findIndex((item) => item.file === current), [current]) useEffect(() => { window.addEventListener('keydown', esc) @@ -29,6 +26,6 @@ export const useImagesLibrary = ( return { initialCount, setInitialCount, - currentIndex, + currentIndex, } } @@ -9,34 +9,23 @@ import { useImagesLibrary } from '../model' import { Swiper, SwiperSlide } from 'swiper/react' import 'swiper/css' import { useLibrarySwiper } from '../model/use-swiper' -import { ImageIcons, useImageIcons } from '#/widgets/messages' import { Typography } from '@mui/material' import { ModalImage } from './modal-image' -import { Message } from '#/entities/message' +import { Message, useImageIcons } from '#/entities/message' +import { GALLERY_IMAGES, getModalById, PlateTemplate } from '#/features/modals' +import { CSSTransition } from 'react-transition-group' interface IProps { - modal: boolean - setModal: Dispatch> - current: string | null - setCurrent?: (value: string | null) => void onSlideFalse?: (...args: any) => any reverse?: boolean images: Message[] + current: string | null } -export default function FullScreenModal({ - modal, - setModal, - current, - images, - onSlideFalse, - reverse = false, -}: IProps) { - const { initialCount, setInitialCount, currentIndex } = useImagesLibrary( - setModal, - current, - images - ) +export default function FullScreenModal({ images, onSlideFalse, reverse = false, current }: IProps) { + const modal = getModalById(GALLERY_IMAGES) + + const { currentIndex } = useImagesLibrary(current, images) const count = useRef(0) @@ -45,7 +34,6 @@ export default function FullScreenModal({ const { downloadFile } = useImageIcons() useEffect(() => { - // debugger if (reverse) setTimeout(() => { swiper?.slideNext() @@ -59,28 +47,7 @@ export default function FullScreenModal({ }, [images]) return ( -

setModal(false)} - > -

setModal(false)}> +

modal.setState(false)}>

+ ) } @@ -13,6 +13,10 @@ gap: 15px; } +.container{ + background-color: rgba($color: #000000, $alpha: 0.8) !important; +} + .arrow { position: absolute; z-index: 1205; @@ -0,0 +1,70 @@ +.container { + display: flex; + flex-direction: column; + gap: 8px; +} + +.select { + position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 16px 8px 16px 14px; + cursor: pointer; + + border-radius: 13px; + border: 2px solid #40404e; + &_open { + border: 2px solid #7f7df3; + } + + &__text { + font-size: 18px; + color: var(--new-ui-text-color); + line-height: 1.5; + } +} + +.icon { + color: #a6a5a5; +} + +html[data-theme='light'] { + .select { + border: 1px solid #e9e9e9; + &_open { + border: 1px solid #7f7df3; + } + } +} + +.dropdown { + position: absolute; + top: 60px; + left: 0; + right: 0; + z-index: 1000; + background-color: var(--new-ui-main-color); + width: 100%; + border-radius: 13px; + box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, + rgba(0, 0, 0, 0.12) 0px 3px 14px 2px; + + &__option { + list-style: none; + padding: 10px 16px; + + &_active { + background-color: rgba(25, 118, 210, 0.12); + } + &:hover { + background-color: rgba(0, 0, 0, 0.04); + } + &:active { + background-color: rgba(0, 0, 0, 0.2); + } + } + &__name { + font-size: 18px; + } +} @@ -0,0 +1,29 @@ +import React, { useEffect, useMemo, useRef, useState } from 'react' +import { useChatBot } from '#/entities/model-entity' +import { CommonSelect, SelectItem } from '#/shared/ui/common-select' +import { useImageBot } from '#/entities/model-entity/model/use-image-bot' + +interface ImageModelParamsSelectProps {} + +export const ImageModelParamsSelect = ({ ...props }: ImageModelParamsSelectProps) => { + const { botParams, inference, onSetInferenceParams } = useImageBot() + + const selectItems = useMemo(() => { + if (!botParams) return [] + return botParams.inferences.map(({ description, slug, name }) => ({ + value: slug, + label: name, + description, + })) + }, [botParams]) + + const value = useMemo(() => (inference ? inference.slug : undefined), [inference]) + + return ( + onSetInferenceParams(slug)} + items={selectItems} + /> + ) +} @@ -0,0 +1 @@ +export * from './image-model-params-select' @@ -0,0 +1 @@ +export * from './ui' @@ -0,0 +1,23 @@ +import { ImageStyle } from '#/entities/image-style' +import { getModalById, PLATE_IMAGE_STYLES } from '#/features/modals' +import { useChosenStyle } from '#/widgets/images-style' +import { useEffect } from 'react' + +export function useImageInputStyles() { + const modal = getModalById(PLATE_IMAGE_STYLES) + + const { setStyle } = useChosenStyle() + + function onSetStyle(data: ImageStyle) { + setStyle(data) + modal.setState(false) + } + + function onStylesButtonClick() { + modal.setState(true, { + callback: onSetStyle, + }) + } + + return { onStylesButtonClick } +} @@ -0,0 +1,71 @@ +import { useAppSelector } from '#/app/store/store' +import { Message, MessageSend, postImageMessage } from '#/entities/message' +import { Model, useImageBotParams } from '#/entities/model-entity' +import { useMessagesStore } from '#/widgets/messages' +import { useSession } from 'next-auth/react' +import { useState } from 'react' + +export function useImageInput(model: Model | null, container: React.RefObject) { + const [text, setText] = useState('') + const [image, setImage] = useState(null) + const [loading, setLoading] = useState(false) + + const { inference } = useImageBotParams() + + const { setMessages, messages, addOptimistic } = useMessagesStore() + + const includeParams = useAppSelector((state) => state.params.params) + + const { data: session } = useSession() + + function createMessage() { + if (!inference) return + const data = { + file: image, + content: text, + info: { + ...includeParams, + inference: inference.id, + }, + } + + onSend(data) + } + + async function onSend(param: MessageSend) { + if (!model || !session) return + + addOptimistic(param.content, param.info, model.slug) + + setLoading(true) + + setTimeout(() => { + if (!container.current) return + + const scrollBottom = container.current.scrollHeight - container.current.scrollTop + + container.current.scroll({ + top: container.current.scrollHeight + scrollBottom, + behavior: 'smooth', + }) + }, 500) + + const { data } = await postImageMessage(model.slug, param) + + setLoading(false) + + if (typeof data === 'string') return + + setMessages([...(data as Message[]), ...messages]) + } + + return { + onSend, + text, + setText, + image, + setImage, + createMessage, + loading, + } +} @@ -0,0 +1,2 @@ +export * from './image-input-styles' +export * from './image-input' \ No newline at end of file @@ -0,0 +1,122 @@ +.container { + display: flex; + align-items: center; + gap: 22px; +} +.wrapper { + display: flex; + flex-direction: column; + gap: 20px; + padding: 20px; + border-radius: 15px; + border: 1px solid rgba($color: #a4aab5, $alpha: 0.2); + background: var(--new-ui-element-bg); +} + +.controls { + display: flex; + flex-direction: column; + gap: 5px; +} + +.stroke { + height: 60px; + width: 1px; + background-color: #40404e; + + @media screen and (max-width: 800px) { + display: none; + } +} + +.rounded { + background-color: rgba($color: #a4aab5, $alpha: 0.1); + border-radius: 100%; + width: 30px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + + &__svg { + padding-left: 2px; + padding-top: 2px; + } +} + +.buttons { + display: flex; + align-items: center; + gap: 10px; + + @media screen and (max-width: 800px) { + flex-direction: column; + } +} + +.button { + background-color: rgba($color: #a4aab5, $alpha: 0.05); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: #a4aab5; + gap: 5px; + height: 61px; + width: 61px; + font-size: 12px; + font-weight: 500; + border-radius: 15px; +} + +.textarea { + border: none; + outline: none; + min-width: 400px; + resize: none; + padding: 0 10px; + height: 50px !important; + + @media screen and (max-width: 800px) { + height: 70px !important; + min-width: 300px; + } + + @media screen and (max-width: 500px) { + min-width: 200px; + } +} + +.main { + display: flex; + flex-direction: column; + gap: 10px; + align-items: center; + @media screen and (max-width: 800px) { + display: none; + } + &__settings { + position: relative; + } +} + +.mobcontols { + display: none; + gap: 10px; + position: relative; + &__generate { + width: 100%; + } + &__settings { + min-width: 50px; + min-height: 50px; + padding: 0px; + display: flex; + justify-content: center; + align-items: center; + } + + @media screen and (max-width: 800px) { + display: flex; + } +} @@ -0,0 +1,112 @@ +import React, { MouseEventHandler, useState } from 'react' +import styles from './image-input.module.scss' +import { c } from '#/shared' +import BranchesSvg from '#/assets/svg/branches.svg?react' +import PaintSvg from '#/assets/svg/paint.svg?react' +import RatioSvg from '#/assets/svg/ratio.svg?react' +import CubesSvg from '#/assets/svg/cubes.svg?react' +import SettingsSvg from '#/assets/svg/settings.svg?react' +import { SendBtn } from '#/shared/ui/send-button' +import { useImageInput, useImageInputStyles } from '../model' +import { CommonButton } from '#/shared/ui/button' +import { ImageSettingsPopup, useImageBotMessages } from '#/entities/message' +import { getPopupById, POPUP_IMAGE_SETTINGS } from '#/shared/ui/popup' +import { Model } from '#/entities/model-entity' +import { useImageBotParams } from '#/entities/model-entity' + +export interface ImageInputProps { + model: Model | null + container: React.RefObject +} + +export const ImageInput = ({ model, container }: ImageInputProps) => { + const { createMessage, text, setText, loading } = useImageInput(model, container) + + const { inferenceParams, inference } = useImageBotParams() + + const { onStylesButtonClick } = useImageInputStyles() + + const imageSettingsPopup = getPopupById(POPUP_IMAGE_SETTINGS) + + return ( +

+ + +

+ +

+ + +

+ +

+ + Сгенерировать + + { + if (!model) return + + imageSettingsPopup.toogleState({ + botParams: inferenceParams, + currentVersion: inference?.id, + }) + }} + className={styles.mobcontols__settings} + variant='primary-outline' + > + + + + +

+ ) +} @@ -0,0 +1 @@ +export * from './image-input' @@ -0,0 +1,2 @@ +export * from './ui' +export * from './model' @@ -0,0 +1 @@ +export * from './use-image-object-id' \ No newline at end of file @@ -0,0 +1,17 @@ +import { create } from 'zustand' + +export interface ImageObjectIdStore { + imageObjectId: string | null + setImageObjectId: (imageObjectId: string | null) => void +} + +export const useImageObjectId = create((set, get) => { + function setImageObjectId(imageObjectId: string | null) { + set({ imageObjectId }) + } + + return { + imageObjectId: null, + setImageObjectId, + } +}) @@ -0,0 +1 @@ +export * from './model' \ No newline at end of file @@ -0,0 +1 @@ +export * from './input-filter' \ No newline at end of file @@ -0,0 +1,6 @@ +.title { + margin-bottom: 16px; + font-size: 15px; + color: var(--new-ui-gray-color); + font-weight: 400; +} \ No newline at end of file @@ -0,0 +1,52 @@ +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 + value: string + description: string + setValue: (value: string) => void + withoutTooltip?: boolean + onlyNumber?: boolean +} + +export const InputFilter = ({ + value, + setValue, + title, + description, + withoutTooltip = false, + onlyNumber = false, +}: InputFilterProps) => { + return ( +

+ +

{title}

+ { + e.target.style.height = 'auto' + e.target.style.height = Math.min(e.target.scrollHeight, 177) + 'px' + + setValue( + onlyNumber && !isNumericString(e.target.value) + ? value + : e.target.value + ) + }} + /> + +

+ ) +} @@ -0,0 +1 @@ +export * from './ui' @@ -0,0 +1 @@ +export * from './use-login-cookies' \ No newline at end of file @@ -0,0 +1,17 @@ +import { useRouter } from 'next/router' +import { useEffect } from 'react' +import { useCookies } from 'react-cookie' + +export function useLoginCookies() { + const [, setCookie] = useCookies() + + const { query } = useRouter() + + function setAllQueryToCookies() { + Object.entries(query).forEach(([key, value]) => setCookie(key, value)) + } + + return { + setAllQueryToCookies + } +} @@ -0,0 +1 @@ +export * from './model' \ No newline at end of file @@ -0,0 +1,2 @@ +export * from './use-login-form' +export * from './use-login-validate' \ No newline at end of file @@ -0,0 +1,58 @@ +import { useRouter } from 'next/router' +import { useForm } from 'react-hook-form' +import { LoginForm } from '../types' +import { useEffect, useState } from 'react' +import { signIn } from 'next-auth/react' +import { useShowDataStore } from '#/shared/lib/hooks' +import { captureMessage } from '@sentry/nextjs' +import { ERROR_MAPPING } from '#/pages/api/auth/constants' +import { keysToValues } from '#/shared' + +export function useLoginForm() { + const { + register, + handleSubmit, + formState: { errors }, + } = useForm() + + const [pending, setPending] = useState(false) + + const { showMessage } = useShowDataStore() + + const { push } = useRouter() + + useEffect(() => { + if (Object.values(errors).length === 0) return + showMessage(Object.values(errors)[0].message || 'Неверные данные') + }, [errors]) + + const onSubmit = handleSubmit(async (data: any) => { + setPending(true) + + const response = await signIn('credentials', { + username: data.email, + password: data.password, + redirect: false, + }) + + setPending(false) + + const { ok, error } = response! + + if (ok) return push('/') + + if (!error) return showMessage('Не удалось выполнить вход, попробуйте позже') + + const expectedError = keysToValues(ERROR_MAPPING)[error] + + if (!expectedError) return captureMessage(error) + + showMessage(expectedError) + }) + + return { + onSubmit, + register, + pending, + } +} @@ -0,0 +1,30 @@ +import { RegisterOptions } from 'react-hook-form' +import { EMAIL_REGEXP } from '#/shared/lib/constants' +import { LoginForm } from '../types' + +export function useLoginValidate() { + const emailOptions: RegisterOptions = { + required: 'Поле email обязательно к заполенению!', + minLength: { + value: 5, + message: 'Слишком короткий email', + }, + pattern: { + value: EMAIL_REGEXP, + message: 'Введите валидный email', + }, + } + + const passwordOptions: RegisterOptions = { + required: 'Поле пароль обязательно к заполнению!', + minLength: { + value: 5, + message: 'Слишком короткий пароль', + }, + } + + return { + emailOptions, + passwordOptions + } +} @@ -0,0 +1 @@ +export * from './login-form' \ No newline at end of file @@ -0,0 +1,3 @@ +import { CreateUserDTO } from '#/entities/user-account' + +export interface LoginForm extends CreateUserDTO {} @@ -0,0 +1 @@ +export * from './model' \ No newline at end of file @@ -0,0 +1 @@ +export * from './use-login-query-errors' \ No newline at end of file @@ -0,0 +1,23 @@ +import { ERRROR_YANDEX_TRANSLATE_MAPPING } from '#/pages/api/auth/constants' +import { useShowDataStore } from '#/shared/lib/hooks' +import { captureMessage } from '@sentry/nextjs' + +export function useLoginQueryErrors() { + const { showMessage } = useShowDataStore() + + function onMounted() { + const params = new URL(window.location.href).searchParams + + const error = params.get('error') + + if (!error || error === '') return + + const expectedError = ERRROR_YANDEX_TRANSLATE_MAPPING[error] + showMessage(expectedError ?? 'Не удалось выполнить вход, попробуйте позже') + if (!expectedError) captureMessage(error) + } + + return { + onMounted + } +} @@ -0,0 +1 @@ +export * from './model' \ No newline at end of file @@ -0,0 +1 @@ +export * from './use-messages-filters' \ No newline at end of file @@ -0,0 +1,16 @@ +import { Message } from '#/entities/message' +import { useState } from 'react' + +export function useMessagesFilters(messages: Message[]) { + const [value, setValue] = useState('') + + const filteredMessages = messages.filter((message) => { + return message.content.toLowerCase().includes(value.toLowerCase()) + }) + + return { + filteredMessages, + value, + setValue + } +} @@ -0,0 +1 @@ +export * from './message-fast-choice-menu' @@ -0,0 +1,81 @@ +.menu { + display: flex; + flex-direction: column; + gap: 15px; + padding: 10px; + border-radius: 15px; + border: 1px solid rgba($color: #a4aab5, $alpha: 0.2); + background: var(--new-ui-element-bg); + width: fit-content; + transition: all 0.6s ease-in-out; + + &:hover { + width: 280px !important; + .menu__new { + span { + display: inline-block; + } + } + + .menu__input { + display: inline-block; + width: 150px !important; + } + + .menu__inputbox { + justify-content: flex-end; + } + } + + &__new { + display: flex; + align-items: center; + justify-content: center; + gap: 7px; + padding: 10px 15px; + span { + display: none; + color: var(--new-ui-gray-color); + } + } + + &__inputbox { + display: flex; + align-items: center; + justify-content: center !important; + gap: 5px; + padding: 5px 7px; + } + + &__input { + outline: none; + border: none; + background: transparent; + color: var(--text-color-main); + display: none; + &::placeholder { + color: var(--new-ui-gray-color); + } + } +} + +.list { + height: 350px; + overflow-y: scroll; + + &__empty { + color: var(--new-ui-gray-color); + text-align: center; + } +} + +.loader { + text-align: center; + // width: max-content; +} + +@media (max-width: 800px) { + .list { + height: 200px; + } +} @@ -0,0 +1,64 @@ +import React, { MouseEventHandler, useState } from 'react' +import styles from './message-fast-choice-menu.module.scss' +import { c, Loader } from '#/shared' +import { Message } from '#/entities/message' +import PlusSvg from '#/assets/svg/plus.svg?react' +import Image from 'next/image' +import { MessageItem } from './message-item' +import SearchSvg from '#/assets/svg/search.svg?react' +import { useMessagesFilters } from '../model' + +export interface MessageFastChoiceMenuProps { + messages: Message[] + loading: boolean +} + +export const MessageFastChoiceMenu = ({ messages, loading }: MessageFastChoiceMenuProps) => { + const { filteredMessages, value, setValue } = useMessagesFilters(messages) + + const [hovered, setHovered] = useState(false) + + return ( +

setHovered(true)} + onMouseLeave={() => setHovered(false)} + className={styles.menu} + > + +

+ +

Ничего не найдено
+ {}} + {...message} + /> +

+ +

+ + setValue(e.target.value)} + className={styles.menu__input} + placeholder='Поиск генераций' + type='text' + /> +

+ ) +} @@ -0,0 +1,58 @@ +.item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 7px; + border-radius: 10px; + transition: width 0.6s ease-in-out; + + &_hovered { + .item__desc { + display: block; + opacity: 1; + } + + .item__right { + opacity: 1; + display: block; + } + } + + &:hover { + background-color: var(--new-ui-bg-app-color); + } + + &__desc { + opacity: 0; + transition: opacity 0.6s ease-in-out; + display: none; + } + + &__left { + display: flex; + gap: 7px; + align-items: center; + } + + &__right { + padding-right: 10px; + opacity: 0; + transition: opacity 0.6s ease-in-out; + display: none; + } + + &__img { + border-radius: 5px; + object-fit: cover; + } + + &__content { + font-weight: 500; + font-size: 14px; + } + + &__time { + font-size: 11px; + color: var(--new-ui-gray-color); + } +} @@ -0,0 +1,48 @@ +import { Message, useMessageTime } from '#/entities/message' +import Image from 'next/image' +import React from 'react' + +import styles from './message-item.module.scss' +import { c } from '#/shared' +import TrashSvg from '#/assets/svg/trash.svg?react' + +interface MessageItemProps extends Message { + deleteMessage: () => void + className?: string + hovered?: boolean +} + +export const MessageItem = ({ + created_at, + className, + file, + hovered, + content, + deleteMessage, +}: MessageItemProps) => { + const { formatedDate } = useMessageTime(created_at) + + return ( +

{formatedDate}

{content}

+ +

+ ) +} @@ -0,0 +1,2 @@ +export * from './ui' +export * from './model' @@ -0,0 +1 @@ +export * from './store-message-fullscreen-modal' @@ -0,0 +1,28 @@ +import { create } from 'zustand' + +type TextScaleState = { + scale: number + minScale: number + maxScale: number + increaseScale: () => void + decreaseScale: () => void + resetScale: () => void +} + +export const useTextScaleStore = create((set) => ({ + scale: 1, + minScale: 0.8, + maxScale: 1.5, + + increaseScale: () => + set((state) => ({ + scale: Math.min(state.scale + 0.1, state.maxScale), + })), + + decreaseScale: () => + set((state) => ({ + scale: Math.max(state.scale - 0.1, state.minScale), + })), + + resetScale: () => set({ scale: 1 }), +})) @@ -0,0 +1,126 @@ +.containerScroll { + min-height: 403px; + overflow: auto; + font-size: 15px; + line-height: 150%; + padding-right: 20px; + + width: 100%; + height: 100%; + position: relative; + overscroll-behavior: contain; + + &__scaledContent { + transform-origin: top left; + display: inline-block; + + width: 100%; + transition: transform 0.3s ease; + + display: inline-block; + white-space: normal; + word-wrap: break-word; + } + + &::-webkit-scrollbar { + width: 4px; + height: 4px; + } + + &::-webkit-scrollbar-track { + border-radius: 4px; + } + + &::-webkit-scrollbar-thumb { + background: var(--scrol-bar-color); + border-radius: 4px; + } + + &::-webkit-scrollbar-thumb:hover { + background: #746c6c; + } + + ul, + ol { + margin: 0; + padding: 0 15px 0 15px; + list-style-position: outside; + } + + li { + margin-bottom: 6px; + white-space: normal; + } + + ul { + list-style-type: disc; + color: var(--new-ui-message-text-color); + } + + ol { + list-style-type: decimal; + color: var(--new-ui-message-text-color); + } + *:not(ul):not(ol):not(li) { + max-width: 827px; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: var(--new-ui-text-color); + } +} + +.modal { + display: flex; + flex-direction: column; + position: relative; + width: 887px; + height: 583px; + min-width: 887px; + max-height: 583px; + + @media screen and (max-width: 600px) { + min-width: 350px; + } +} + +.header { + display: flex; + align-items: center; + column-gap: 10px; + margin: 35px 0px 25px 0px; + letter-spacing: -0.02em; + + &__text { + font-size: 30px; + font-weight: 650; + } +} + +.footer { + display: flex; + column-gap: 10px; + min-height: 85px; + + &__containerButton { + display: flex; + align-items: center; + column-gap: 10px; + } + + &__buttonCnanges { + display: flex; + align-items: center; + justify-content: center; + + width: 42px; + height: 42px; + border-radius: 15px; + padding: 0; + } +} @@ -0,0 +1 @@ +export * from './message-fullscreen-modal' \ No newline at end of file @@ -0,0 +1,86 @@ +import * as React from 'react' +import styles from './fullscreen-modal.module.scss' +import AvatarIcon from '#/assets/svg/avatar.svg?react' +import ZoomIconMinus from '#/assets/svg/zoom-icon-minus.svg?react' +import ZoomIconPlus from '#/assets/svg/zoom-icon-plus.svg?react' +import { FULLSCREEN_CHAT_MESSAGE, getModalById, PlateTemplate } from '#/features/modals' +import { CommonTextArea } from '#/shared/ui/common-textarea' +import { CommonButton } from '#/shared/ui/button' +import { useChatBotMessages } from '#/entities/message' +import { Message } from '#/entities/message' +import { Markdown } from '#/widgets/markdown/markdown' +import { Skeleton } from '@mui/material' +import { useTextScaleStore } from '../model' + +interface MessageFullscreenModalI { + message: Message +} + +export const MessageFullscreenModal = () => { + const modal = getModalById(FULLSCREEN_CHAT_MESSAGE) + + const { scale, increaseScale, decreaseScale, resetScale } = useTextScaleStore() + + const message = modal.getStoreProperty('message')! + + React.useEffect(() => { + resetScale() + }, [modal.state]) + + return ( + + {message && ( + <> +

+ + +

{message.model}

+ +

+ + +

+ + )} + + ) +} @@ -0,0 +1 @@ + @@ -1,3 +1,8 @@ + +export const PLATE_IMAGE_STYLES = 'plate-image-styles' export const PLATE_CHANGE_PASSWORD = 'plate-change-password' export const RESEND_INVATION_PASSWORD = 'resend-invation-password' export const ERROR_REPORT = 'error-report' +export const GALLERY_IMAGES = 'gallery-images' +export const FULLSCREEN_CHAT_MESSAGE = 'fullscreen-chat-message' + @@ -1,78 +1,81 @@ -import { create } from "zustand"; +import { useMemo } from 'react' +import { create } from 'zustand' type Set = { - (partial: (state: PlatesStore) => Partial): void; -}; + (partial: (state: PlatesStore) => Partial): void +} -type Get = () => PlatesStore; +type Get = () => PlatesStore function makeModalInstance(set: Set, get: Get, key: string) { - const ModalInstance: Modal = { - id: key, - state: false, - store: {}, - setState(state, store) { - const modals = get().modals; + const ModalInstance: Modal = { + id: key, + state: false, + store: {}, + setState(state, store) { + const modals = get().modals + + store = store ?? {} - store = store ?? {}; + store = Object.entries(store).reduce((acc, [key, value]) => { + return { ...acc, [key]: value } + }, {}) - set(() => ({ - modals: { ...modals, [this.id]: { ...modals[key], state, store } }, - })); - }, - setStoreProperty(key, value) { - const modals = get().modals; + set(() => ({ + modals: { ...modals, [this.id]: { ...modals[key], state, store } }, + })) + }, + setStoreProperty(key, value) { + const modals = get().modals - this.store[key] = value; + this.store[key] = value - set(() => ({ - modals: { ...modals, [this.id]: { ...modals[key], store: this.store } }, - })); - }, - getStoreProperty(key) { - return this.store[key]; - }, - }; + set(() => ({ + modals: { ...modals, [this.id]: { ...modals[key], store: this.store } }, + })) + }, + getStoreProperty(key) { + return this.store[key] + }, + } - return ModalInstance; + return ModalInstance } export interface Modal { - id: string; - state: boolean; - store: Record; - setState: (state: boolean, store?: Record) => void; - setStoreProperty: (key: string, value: any) => void; - getStoreProperty: (key: string) => T | undefined; + id: string + state: boolean + store: Record + setState: (state: boolean, store?: Record) => void + setStoreProperty: (key: string, value: any) => void + getStoreProperty: (key: string) => T | undefined } export interface PlatesStore { - modals: Record; - setModal: (key: string) => void; - getModal: (key: string) => Modal; + modals: Record + setModal: (key: string) => void + getModal: (key: string) => Modal } export const usePlatesStore = create((set, get) => { - const modals: Record = {}; + const modals: Record = {} - function setModal(key: string) { - set((state) => ({ - modals: { - ...state.modals, - [key]: Object.assign({}, makeModalInstance(set, get, key)), - }, - })); - } + function setModal(key: string) { + set((state) => ({ + modals: { + ...state.modals, + [key]: Object.assign({}, makeModalInstance(set, get, key)), + }, + })) + } - function getModal(key: string) { - return ( - get().modals[key] ?? Object.assign({}, makeModalInstance(set, get, key)) - ); - } + function getModal(key: string) { + return get().modals[key] ?? Object.assign({}, makeModalInstance(set, get, key)) + } - return { - modals, - setModal, - getModal, - }; -}); + return { + modals, + setModal, + getModal, + } +}) @@ -12,6 +12,15 @@ opacity: 0; visibility: hidden; + &_blur { + &-on { + backdrop-filter: blur(15.5px); + } + &-off { + backdrop-filter: none; + } + } + &_visible { opacity: 1; visibility: visible; @@ -78,9 +87,9 @@ } // &__header { - // display: flex; - // justify-content: space-between; - // padding: 25px; + // display: flex; + // justify-content: space-between; + // padding: 25px; // } &__close-button { @@ -93,9 +102,18 @@ &__content-body { transition: all 0.3s ease-in-out; - padding: 0px 32px 32px 32px; overflow: hidden; + &_padding { + &-default { + padding: 0px 32px 32px 32px; + } + + &-small { + padding: 0px 5px 0 30px; + } + } + @media screen and (max-width: 1000px) { padding: 0px 10px 10px 10px; } @@ -9,6 +9,8 @@ import { useThemeAndDevice } from '#/shared/lib/hooks' export type AlignX = 'left' | 'center' | 'right' export type AlignY = 'top' | 'center' | 'bottom' export type Variant = 'primary' | 'secondary' +export type PaddingVariant = 'default' | 'small' +export type BlurToogle = 'on' | 'off' export interface PlatesTemplateProps { id: string @@ -23,6 +25,9 @@ export interface PlatesTemplateProps { animationBehaviorClass?: string headerClassName?: string variant?: Variant + containerClassName?: string + paddingVariant?: PaddingVariant + blurToogle?: BlurToogle } export default function PlatesTemplate({ @@ -36,8 +41,10 @@ export default function PlatesTemplate({ animationClass = styles['template__animation'], animationBehaviorClass = styles['template__animation-behavior'], closeModal = () => {}, - headerClassName, + containerClassName, variant = 'primary', + paddingVariant = 'default', + blurToogle = 'off', }: PlatesTemplateProps) { const { setModal, getModal } = usePlatesStore() @@ -52,7 +59,9 @@ export default function PlatesTemplate({ modal.state ? styles['template_visible'] : styles['template_invisible'], hasBg ? styles['template_flex'] : styles['template_w-fit'], styles[`template_align-y-${alignY}`], - hasBg ? styles[`template_align-x-${alignX}`] : '' + styles[`template_blur-${blurToogle}`], + hasBg ? styles[`template_align-x-${alignX}`] : '', + containerClassName )} onClick={() => { if (hasBg) modal.setState(false) @@ -75,12 +84,26 @@ export default function PlatesTemplate({ closeModal() }} > - + -

{children}

+ {children} +

) : ( -

{children}

+ {children} +

)}

) @@ -6,4 +6,5 @@ export function getModalById(id: string) { } export * from './ui' -export * from './config' \ No newline at end of file +export * from './config' + @@ -0,0 +1,2 @@ +export * from './use-model-input' +export * from './model-input.store' \ No newline at end of file @@ -0,0 +1,24 @@ +import { create } from "zustand"; + +export interface ModelInputStore { + modelInputValue: string; + modelInputFile: File | null; + setModelInputValue: (modelInput: string) => void; + setModelInputFile: (file: File | null) => void; +} + +export const useModelInputStore = create((set, get) => { + function setModelInputValue(modelInput: string) { + set({ ...get(), modelInputValue: modelInput }); + } + function setModelInputFile(file: File | null) { + set({ ...get(), modelInputFile: file }); + } + + return { + modelInputFile: null, + modelInputValue: "", + setModelInputValue, + setModelInputFile + }; +}) \ No newline at end of file @@ -0,0 +1,45 @@ +import { getDeviceType } from '#/shared' +import { FormEventHandler, KeyboardEventHandler, useEffect, useRef, useState } from 'react' +import { useMediaQuery } from 'usehooks-ts' + +export function useModelInput( + value: string, + setValue: (value: string) => void, + sendMessage: (message: string) => void, + setFile: (file: File | null) => void +) { + const isMobile = useMediaQuery('(max-width: 1000px)') + const textareaRef = useRef(null) + + const onInputHeightCorrect: FormEventHandler = () => { + if (!textareaRef.current) return + + textareaRef.current.style.height = 'auto' + + textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px' + } + + function onSendMessage() { + sendMessage(value) + setValue('') + setFile(null) + } + + const keyDownSend: KeyboardEventHandler = (e) => { + if (e.shiftKey || e.key !== 'Enter' || isMobile) return + e.preventDefault() + + onSendMessage() + + if (textareaRef.current) { + textareaRef.current.style.height = 'auto' + } + } + + return { + onInputHeightCorrect, + keyDownSend, + onSendMessage, + textareaRef + } +} @@ -5,6 +5,14 @@ width: 100%; border-radius: 15px; gap: 10px; + background-color: var(--new-ui-main-color); + position: relative; + &__settings { + display: none; + @media screen and (max-width: 1000px) { + display: block; + } + } } :root[data-theme='light'] { @@ -34,7 +42,8 @@ -ms-overflow-style: none; padding: 0px; font-size: 16px; - max-height: 82px; + max-height: 62px; + position: relative; &::-webkit-scrollbar { display: none; /* Chrome, Brave, Edge */ @@ -1,167 +1,77 @@ -import React, { FC, SyntheticEvent, useEffect } from 'react' -import { Divider, InputAdornment, TextField } from '@mui/material' -import Stack from '@mui/material/Stack' -import { TextFieldProps } from '@mui/material/TextField/TextField' -import Image from 'next/image' +import React, { useEffect } from 'react' import { LoadImage } from '#/app/components/input_components/load_image' import { SendBtn } from '#/app/components/input_components/send_button' -import { useAppSelector } from '#/app/store/store' -import { IModelInputs } from '#/shared/api/models/models' -import { styleInputWithoutBorderFocus } from '#/shared/ui/input' -import { useThemeAndDevice } from '#/shared/lib/hooks' +import { ModelInputs } from '#/shared/api/models/models' import classes from './model-input.module.scss' +import { useChatBotMessages } from '#/entities/message' +import InputSettingsSvg from '#/assets/svg/input-setting.svg?react' +import { CommonTextArea } from '#/shared/ui/common-textarea' +import { useModelInput } from '../model' +import { CommonSendButton } from '#/shared/ui/common-send-button' +import { CommonLoadFile } from '#/shared/common-load-file' -interface Input { - loading: boolean - // requestImage: () => void - wonderMe?: () => void - desktop: boolean - image?: File | null - count?: number - quality?: string - unpinImage?: () => void - imageLoad?: React.ChangeEventHandler - // openFilters: (event: React.MouseEvent) => void - sendMessage: (message: string, required: (string | null)[]) => boolean - // setInput: React.Dispatch> - // setImage: React.Dispatch> - styles: 'images' | 'chats' | 'audio' - input_types?: IModelInputs[] +export interface ModelInputProps { + value: string + setValue: (value: string) => void + file: File | null + setFile: (file: File | null) => void + sendMessage: (message: string) => void + inputTypes: string[] blocked?: boolean viewMobileSettings: () => void - currentVersion: string - resendValue?: string } -export const ModelInput: FC = ({ - image, - loading, - unpinImage, +export const ModelInput = ({ + value, + setValue, + file, sendMessage, - desktop, - imageLoad, - styles, - input_types, + setFile, + inputTypes, viewMobileSettings, - currentVersion, - resendValue, - blocked, -}: Input) => { - const theme = useAppSelector((state) => state.theme.theme) - const [disabled, setDisabled] = React.useState(true) - const [required, setRequired] = React.useState<(string | null)[]>([]) - const [types, setTypes] = React.useState([]) - const [typeVersions, setTypeVersions] = React.useState({}) - const [value, setValue] = React.useState('') + blocked = false, +}: ModelInputProps) => { + const { loading } = useChatBotMessages() - useEffect(() => { - if (input_types) { - setRequired(input_types.map((el) => (el.required ? el.type : null))) - setTypes(input_types.map((el) => el.type)) - setTypeVersions(input_types.reduce((a, v) => ({ ...a, [v.type]: v.versions }), {})) - } - }, [input_types]) - - useEffect(() => { - if (input_types && typeVersions && !typeVersions['text']) { - setDisabled(true) - } else if ( - typeVersions['text'] && - (typeVersions['text'].length === 0 || typeVersions['text'].includes(currentVersion)) - ) { - setDisabled(false) - } - }, [typeVersions]) - - useEffect(() => { - if (resendValue) { - setValue(resendValue) - } - }, [resendValue]) + const { onInputHeightCorrect, keyDownSend, onSendMessage, textareaRef } = useModelInput( + value, + setValue, + sendMessage, + setFile + ) return ( -

- {!desktop && ( - - )} +

+ + onInput={onInputHeightCorrect} + onKeyDown={keyDownSend} + rows={1} + placeholder={blocked ? 'Ввод текста недоступен для этой модели' : 'Ваше сообщение'} + className={classes.area} + disabled={blocked} + />

- {typeVersions['image'] && - (typeVersions['image'].length === 0 || - typeVersions['image'].includes(currentVersion)) && ( - <> - {!blocked && ( - - )} -

- - )} - {!disabled && !blocked && ( - setFile(null)} + setFile={(file) => setFile(file)} + inputTypes={inputTypes} /> )} +

+ + {!blocked && onSendMessage()} />}

) @@ -0,0 +1 @@ +export * from './model-params-select' @@ -0,0 +1,70 @@ +.container { + display: flex; + flex-direction: column; + gap: 8px; +} + +.select { + position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 16px 8px 16px 14px; + cursor: pointer; + + border-radius: 13px; + border: 2px solid #40404e; + &_open { + border: 2px solid #7f7df3; + } + + &__text { + font-size: 18px; + color: var(--new-ui-text-color); + line-height: 1.5; + } +} + +.icon { + color: #a6a5a5; +} + +html[data-theme='light'] { + .select { + border: 1px solid #e9e9e9; + &_open { + border: 1px solid #7f7df3; + } + } +} + +.dropdown { + position: absolute; + top: 60px; + left: 0; + right: 0; + z-index: 1000; + background-color: var(--new-ui-main-color); + width: 100%; + border-radius: 13px; + box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, + rgba(0, 0, 0, 0.12) 0px 3px 14px 2px; + + &__option { + list-style: none; + padding: 10px 16px; + + &_active { + background-color: rgba(25, 118, 210, 0.12); + } + &:hover { + background-color: rgba(0, 0, 0, 0.04); + } + &:active { + background-color: rgba(0, 0, 0, 0.2); + } + } + &__name { + font-size: 18px; + } +} @@ -0,0 +1,28 @@ +import React, { useEffect, useMemo, useRef, useState } from 'react' +import { useChatBot } from '#/entities/model-entity' +import { CommonSelect, SelectItem } from '#/shared/ui/common-select' + +interface ModelParamsSelectProps {} + +export const ModelParamsSelect = ({ ...props }: ModelParamsSelectProps) => { + const { botParams, inference, onSetInferenceParams } = useChatBot() + + const selectItems = useMemo(() => { + if (!botParams) return [] + return botParams.inferences.map(({ description, slug, name }) => ({ + value: slug, + label: name, + description, + })) + }, [botParams]) + + const value = useMemo(() => (inference ? inference.slug : undefined), [inference]) + + return ( + onSetInferenceParams(slug)} + items={selectItems} + /> + ) +} @@ -0,0 +1 @@ +export * from './ui' @@ -0,0 +1,10 @@ + + +export interface NavigationBlock { + title: string, + content: string | React.ReactNode + link?: string + enabled: boolean + image: string + cols: number +} \ No newline at end of file @@ -0,0 +1 @@ +export * from './block' \ No newline at end of file @@ -0,0 +1 @@ +export * from './navigation-main-page-block' \ No newline at end of file @@ -0,0 +1,85 @@ +.block { + padding: 25px 30px; + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; + cursor: pointer; + + @media screen and (max-width: 768px) { + grid-column: unset !important; + padding: 15px 20px; + } + + &_disabled { + pointer-events: none; + cursor: default; + } + + &__image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 30px; + } + + &__desc { + position: relative; + z-index: 1; + } + + &__title { + font-size: 40px; + font-weight: 800; + color: white; + margin-bottom: 5px; + + @media screen and (max-width: 768px) { + font-size: 34px; + } + } + + &__content { + font-size: 16px; + font-weight: 400; + color: white; + max-width: 450px; + + @media screen and (max-width: 768px) { + font-size: 16px; + font-weight: 500; + } + } + + &__arrow { + transition: color 0.3s ease-in-out; + } + + &__more { + display: flex; + align-items: center; + gap: 3px; + + &_disabled { + &:hover { + .block__arrow_disabled { + color: white; + } + } + } + + &:hover { + .block__arrow { + color: black; + } + } + } + + &__controls { + position: relative; + z-index: 1; + } +} @@ -0,0 +1,55 @@ +import React from 'react' +import { NavigationBlock } from '../types' + +import styles from './navigation-main-page-block.module.scss' +import { CommonButton } from '#/shared/ui/button' +import Image from 'next/image' +import ArrowSelectSvg from '#/assets/svg/arrow-select.svg?react' +import Link from 'next/link' +import { c } from '#/shared/lib/helpers' + +interface NavigationMainPageBlockProps extends NavigationBlock {} + +export const NavigationMainPageBlock = ({ + title, + cols, + content, + enabled, + link, + image, +}: NavigationMainPageBlockProps) => { + return ( + + {title}

{title}

{content}

+ +

+ + {enabled ? 'Попробовать' : 'Скоро будет доступно'} + {enabled && ( + + )} + +

+ + ) +} @@ -0,0 +1,2 @@ +export * from './types' +export * from './ui' \ No newline at end of file @@ -0,0 +1 @@ +export * from './use-referal-info' \ No newline at end of file @@ -0,0 +1,12 @@ +import { useEffect, useState } from 'react' + +export function useReferrall() { + const [referral, setReferral] = useState(null) + + useEffect(() => setReferral(localStorage.getItem('referral')), []) + + return { + referral, + setReferral, + } +} @@ -0,0 +1 @@ +export * from './model' \ No newline at end of file @@ -1,5 +1,5 @@ import React, { useState } from 'react' -import { useForm } from 'react-hook-form' +import { RegisterOptions, useForm } from 'react-hook-form' import { SubmitErrorHandler } from 'react-hook-form/dist/types/form' import { Autocomplete, Box, TextField, Typography } from '@mui/material' @@ -97,7 +97,7 @@ export const StepLegalInformative = () => { }, } } - {...methods.register('companyName', companyNameOptions)} + {...methods.register('companyName', companyNameOptions as any)} /> )} componentsProps={{ @@ -115,7 +115,7 @@ export const StepLegalInformative = () => { @@ -123,7 +123,7 @@ export const StepLegalInformative = () => { @@ -0,0 +1 @@ +export * from './register' \ No newline at end of file @@ -0,0 +1,10 @@ +import { CreateUserWithRelations } from '#/entities/user-account' +import { api } from '#/shared/api' + +export async function getWhitelist(email: string) { + return await api.get('/auth/mail/whitelist', { params: { email } }) +} + +export async function apiRegister(data: CreateUserWithRelations) { + return await api.post('/auth/register', data) +} \ No newline at end of file @@ -0,0 +1,2 @@ +export * from './use-register' +export * from './use-register-validate' \ No newline at end of file @@ -3,3 +3,4 @@ export interface IEmailForms { password1: string password2: string } + \ No newline at end of file @@ -0,0 +1,28 @@ +import { EMAIL_REGEXP } from '#/shared/lib/constants' + +export function useRegisterValidate() { + const emailOptions = { + required: 'Поле email обязательно к заполенению!', + minLength: { + value: 5, + message: 'Слишком короткий email', + }, + pattern: { + value: EMAIL_REGEXP, + message: 'Введите валидный email', + }, + } + + const passwordOptions = { + required: 'Поле пароль обязательно к заполнению!', + minLength: { + value: 5, + message: 'Слишком короткий пароль', + }, + } + + return { + emailOptions, + passwordOptions + } +} @@ -0,0 +1,78 @@ +import { useState } from 'react' +import { apiRegister, getWhitelist } from '../api' +import { SubmitErrorHandler, SubmitHandler, useForm } from 'react-hook-form' +import { RegisterForm } from '../types/register-form' +import { useShowDataStore } from '#/shared/lib/hooks' +import { useCookies } from 'react-cookie' +import { useReferrall } from '#/features/referal' +import { useRouter } from 'next/router' + +export function useRegister(successLogin: Function) { + const { register, handleSubmit, reset, setValue, watch } = useForm() + + const [pending, setPending] = useState(false) + + const { showMessage } = useShowDataStore() + + const { referral } = useReferrall() + + const [{ utm_source, utm_medium, utm_campaign }] = useCookies() + + const { push } = useRouter() + + function onSuccess() { + reset() + successLogin() + setTimeout(() => push('/login'), 7000) + } + + async function onRegister(form: RegisterForm) { + const { status, data } = await apiRegister({ + ...form, + utm_source, + utm_medium, + utm_campaign, + utm_term: utm_campaign, + utm_content: utm_campaign, + referer: referral ?? undefined, + }) + + setPending(false) + + if (status === 201) return onSuccess() + + showMessage(data.detail) + } + + const onValid: SubmitHandler = async ({ rules, confirm, password, ...data }) => { + if (password !== confirm) return showMessage('Пароли не совпадают') + + setPending(true) + + if (rules) return onRegister({ ...data, confirm, password }) + + const response = await getWhitelist(data.email) + + if (response.status !== 200) { + showMessage('Примите пользовательское соглашение') + return setPending(false) + } + + onRegister({ ...data, confirm, password }) + } + + const onInvalid: SubmitErrorHandler = (errors) => { + const error = Object.values(errors).at(0) + if (error) return showMessage(error.message as string) + } + + const onSubmit = handleSubmit(onValid, onInvalid) + + return { + onSubmit, + register, + watch, + setValue, + pending, + } +} @@ -0,0 +1,2 @@ +export * from './use-form-fields' +export * from './use-form-fields-change' \ No newline at end of file @@ -0,0 +1,32 @@ +import { fireEvent, screen } from '@testing-library/dom' +import { useFormFields } from '.' + +export function useFormFieldsChange() { + const { emailInput, passwordInput, confirmInput, spamCheckbox, rulesCheckbox, submitButton } = + useFormFields() + + function allInputsFilled() { + fireEvent.change(emailInput, { + target: { value: 'aleksander.freelancer@gmail.com' }, + }) + fireEvent.change(passwordInput, { target: { value: 'geraldisrivii' } }) + fireEvent.change(confirmInput, { target: { value: 'geraldisrivii' } }) + } + + function allFieldsFilled() { + allInputsFilled() + fireEvent.click(rulesCheckbox) + fireEvent.click(spamCheckbox) + } + + function fieldsFilledWithoutSpam() { + allInputsFilled() + fireEvent.click(rulesCheckbox) + } + + return { + allFieldsFilled, + fieldsFilledWithoutSpam, + allInputsFilled, + } +} @@ -0,0 +1,12 @@ +import { screen } from '@testing-library/dom' + +export function useFormFields() { + return { + emailInput: screen.getByTestId('email-input'), + passwordInput: screen.getByTestId('password-input'), + confirmInput: screen.getByTestId('confirm-input'), + rulesCheckbox: screen.getByTestId('rules-checkbox'), + spamCheckbox: screen.getByTestId('spam-checkbox'), + submitButton: screen.getByTestId('submit-button'), + } +} @@ -0,0 +1 @@ +export * from './register-form' \ No newline at end of file @@ -0,0 +1,7 @@ +import { CreateUserDTO } from '#/entities/user-account' + +export interface RegisterForm extends CreateUserDTO { + confirm: string + rules?: boolean + spam?: boolean +} @@ -0,0 +1 @@ +export * from './register-email-form' \ No newline at end of file @@ -0,0 +1,59 @@ +.form { + &__inputs { + display: flex; + flex-direction: column; + gap: 6px; + margin-bottom: 10px; + } + + &__checkboxes { + display: flex; + flex-direction: column; + gap: 8px; + } + + &__navigate { + padding-top: 10px; + text-align: center; + color: #a7a8bb; + font-size: 16px; + } +} + +.input{ + &__pass{ + display: flex; + align-items: center; + } +} + +.controls { + padding-top: 25px; + width: 100%; + + &__progress { + display: flex; + justify-content: center; + + span{ + color: var(--air-color); + } + } + + &__create { + width: 100%; + } +} + +.checkbox { + padding-left: 12px; + &__text { + color: #868686; + line-height: 1.5; + width: max-content; + } + + &__link { + color: var(--air-color); + } +} @@ -0,0 +1,171 @@ +import { RegisterPage } from '#/views/register' +import '@testing-library/jest-dom' +import { act, fireEvent, render, screen, waitFor } from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import { jestRender } from '#/../jest/utils/render' +import { windowMock } from '#/../jest/utils/window-mock' +import { RegisterEmailForm } from './register-email-form' +import { api } from '#/shared/api' +import { useFormFields, useFormFieldsChange } from '../test' +import { useRouter } from '#/../__mocks__/next/router' +import { useShowDataStore } from '#/shared/lib/hooks' + +jest.mock('#/shared/api') + +jest.mock('next/router') +jest.mock('@sentry/nextjs') + +const showMessageMock = jest.fn() + +jest.mock('#/shared/lib/hooks', () => { + return { + useShowDataStore: jest.fn(() => { + return { + showMessage: showMessageMock, + } + }), + } +}) + +windowMock() + +describe('register-email-form', () => { + beforeEach(() => { + ;(api.post as jest.Mock).mockClear() + ;(api.get as jest.Mock).mockClear() + }) + + it('renders in register', () => { + jestRender() + + const form = screen.getByTestId('register-email-form') + + expect(form).toBeInTheDocument() + }) + + it('submit by button click', async () => { + await act(async () => { + jestRender( {}} />) + }) + + const { submitButton } = useFormFields() + + const { allFieldsFilled } = useFormFieldsChange() + + ;(api.post as jest.Mock).mockResolvedValue({ + status: 201, + }) + + allFieldsFilled() + + await act(async () => { + fireEvent.click(submitButton) + }) + + await waitFor(() => { + expect(api.post).toHaveBeenCalledWith('/auth/register', { + confirm: 'geraldisrivii', + email: 'aleksander.freelancer@gmail.com', + password: 'geraldisrivii', + spam: true, + }) + }) + + /** Больно долго его ждать (7000ms по timeout) - замедляет тесты (но работает) */ + // await waitFor(() => { + // const { push } = useRouter() + // expect(push).toHaveBeenCalledWith('/login') + // }, {timeout: 8000}) + }) + + it('submit by Enter', async () => { + await act(async () => { + jestRender( {}} />) + }) + ;(api.post as jest.Mock).mockResolvedValue({ + status: 201, + }) + + const { allFieldsFilled } = useFormFieldsChange() + + const { emailInput } = useFormFields() + + allFieldsFilled() + + await userEvent.type(emailInput, '{enter}') + + await waitFor(() => { + expect(api.post).toHaveBeenCalledWith('/auth/register', { + confirm: 'geraldisrivii', + email: 'aleksander.freelancer@gmail.com', + password: 'geraldisrivii', + spam: true, + }) + }) + }) + + it('submit without rules and white list not include sended email', async () => { + await act(async () => { + jestRender( {}} />) + }) + ;(api.get as jest.Mock).mockResolvedValue({ + status: 400, + }) + ;(useShowDataStore as any as jest.Mock).mockImplementation(() => ({ + showMessage: showMessageMock, + })) + + const { allInputsFilled } = useFormFieldsChange() + + const { emailInput } = useFormFields() + + allInputsFilled() + + await userEvent.type(emailInput, '{enter}') + + await waitFor(() => { + expect(api.get).toHaveBeenCalledWith('/auth/mail/whitelist', { + params: { email: 'aleksander.freelancer@gmail.com' }, + }) + }) + + await waitFor(() => { + expect(showMessageMock).toHaveBeenCalledWith('Примите пользовательское соглашение') + }) + }) + + it('submit without rules and white list included sended email', async () => { + await act(async () => { + jestRender( {}} />) + }) + ;(api.get as jest.Mock).mockResolvedValue({ + status: 200, + }) + ;(api.post as jest.Mock).mockResolvedValue({ + status: 201, + }) + + const { allInputsFilled } = useFormFieldsChange() + + const { emailInput } = useFormFields() + + allInputsFilled() + + await userEvent.type(emailInput, '{enter}') + + await waitFor(() => { + expect(api.get).toHaveBeenCalledWith('/auth/mail/whitelist', { + params: { email: 'aleksander.freelancer@gmail.com' }, + }) + }) + + await waitFor(() => { + expect(api.post).toHaveBeenCalledWith('/auth/register', { + confirm: 'geraldisrivii', + email: 'aleksander.freelancer@gmail.com', + password: 'geraldisrivii', + spam: false, + }) + }) + }) +}) @@ -1,303 +1,129 @@ import React, { useState } from 'react' -import { useCookies } from 'react-cookie' -import { useForm } from 'react-hook-form' -import { SubmitErrorHandler, SubmitHandler } from 'react-hook-form/dist/types/form' -import { Button, Checkbox, InputAdornment, TextField } from '@mui/material' -import Box from '@mui/material/Box' import CircularProgress from '@mui/material/CircularProgress' -import Typography from '@mui/material/Typography' -import axios from 'axios' import Link from 'next/link' -import { useRouter } from 'next/router' - -import { PasswordOptions } from '#/features/register-by-email/lib/constants' -import { IEmailForms } from '#/features/register-by-email/model/types' -import { useAppSelector } from '#/app/store/store' -import { emailOptions } from '#/shared' -import { CheckBoxAgreeWithRules } from '#/shared' -import { Error } from '#/shared' -import { InputStyleDark, InputStyleLight } from '#/shared' -import { API_URL } from '#/shared/lib/constants/constants' -import { useThemeAndDevice } from '#/shared/lib/hooks' +import { c } from '#/shared' import OpenedEyeSvg from '#/assets/svg/opened-eye.svg?react' import ClosedEyeSvg from '#/assets/svg/closed-eye.svg?react' -import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' - -interface IRegisterEmailFormProps { - successLogin: () => void +import { useRegister, useRegisterValidate } from '../model' +import { CommonInput } from '#/shared/ui/common-input' +import styles from './register-email-form.module.scss' +import { CommonCheckbox } from '#/shared/ui/checkbox' +import { CommonButton } from '#/shared/ui/button' + +export interface RegisterEmailFormProps { + successLogin: Function } -export const RegisterEmailForm: React.FC = ({ successLogin }) => { - const { register, handleSubmit, reset, watch } = useForm() - - const { theme, desktop } = useThemeAndDevice() - - const referral = useAppSelector((state) => state.user.referral) - - const { showMessage } = useShowDataStore() - - const { push } = useRouter() - - const [loading, setLoading] = React.useState(false) - - const [isEmailWhite, setIsEmailWhite] = React.useState(true) +export function RegisterEmailForm({ successLogin }: RegisterEmailFormProps) { + const { register, onSubmit, watch, pending } = useRegister(successLogin) - const [cookie] = useCookies() - const [passwordShowed, showPassword] = React.useState(false) + const { emailOptions, passwordOptions } = useRegisterValidate() - const makeNewAccount: SubmitHandler = async (data) => { - setLoading(true) - - if (!data.rules) { - try { - const { status } = await axios.get( - API_URL + `/auth/mail/whitelist?email=${data.email}`, { validateStatus: (status) => status < 400 } - ) - if (status === 200) { - setIsEmailWhite(true) - } - } catch (e) { - showMessage('Примите пользовательское соглашение') - setLoading(false) - return - } - } - - const req_data: { - email: any - password: any - utm_source: any - utm_medium: any - utm_campaign: any - utm_term: any - utm_content: any - referer?: string | null - } = { - email: data.email, - password: data.password1, - utm_source: cookie.utm_source, - utm_medium: cookie.utm_medium, - utm_campaign: cookie.utm_campaign, - utm_term: cookie.utm_campaign, - utm_content: cookie.utm_campaign, - } - - if (localStorage.getItem('referral')) { - req_data.referer = localStorage.getItem('referral') - } - - try { - const { status } = await axios.post(API_URL + '/auth/register', req_data, { validateStatus: (status) => status < 400 }) - if (status === 201) { - setLoading(false) - reset() - successLogin() - setTimeout(() => push('/login'), 7000) - } - } catch (err: any) { - setLoading(false) - showMessage(err.response.data.detail) - } - } - - const checkError: SubmitErrorHandler = (data) => { - showMessage(Object.values(data)[0].message || 'Неверные данные') - } - - const handleInputChangeTrim = (event: any) => { - event.target.value = event.target.value.trim() - } - - const handleKeyDown = (event: any) => { - if (event.key === 'Enter') { - handleSubmit(makeNewAccount)() - } - } + const [passwordShowed, showPassword] = useState(false) return ( -

- - Email - - - - - Пароль - - - -

showPassword((x) => !x)} - style={{ - cursor: 'pointer', - display: 'flex', - alignItems: 'center', - }} - > - {passwordShowed ? ( - - ) : ( - - )} -

- - ), - }} - sx={theme === 'light' ? { ...InputStyleLight } : { ...InputStyleDark }} - {...register('password1', { - ...PasswordOptions, - })} - /> - - - Подтвердите пароль - - - { - if (watch('password1') != val) { - return 'Пароли не совпадают' - } - }, - })} - /> - - + +

+ - - showPassword((x) => !x)} + > + {passwordShowed ? ( + + ) : ( + + )} + + } /> - +

+ +

+ - {' '} - Я соглашаюсь на получение-информационно-рекламных писем - - + + Я соглашаюсь с условиями + + + Политики обработки персональных данных + + и + + Публичной офертой + + - - {loading ? ( - - - + + + Я соглашаюсь на получение-информационно-рекламных писем + + +

+ +

+ {pending ? ( +

+ +

) : ( - + )} - - - +

+ Есть аккаунт? + - Есть аккаунт?{' '} - - Войти - - - + Войти + +

) } @@ -1 +1,4 @@ export { RegisterEmailForm } from './ui/register-email-form' +export * from './model' +export * from './ui' +export * from './test' \ No newline at end of file @@ -0,0 +1 @@ +export * from './ui' \ No newline at end of file @@ -0,0 +1 @@ +export * from './reset-bot-filters' @@ -0,0 +1,30 @@ +.container { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + &__text { + line-height: 19.6px; + font-size: 14px; + font-weight: 400; + display: none; + cursor: pointer; + + @media screen and (max-width: 1000px) { + display: block; + } + + &_reset { + color: #ff4170; + } + &_close { + color: #808283; + } + } + + @media screen and (max-width: 1000px) { + margin-top: 24px; + } +} @@ -0,0 +1,31 @@ +import React from 'react' +import styles from './reset-bot-filters.module.scss' +import { c } from '#/shared' +import { POPUP_CHAT_BOT_PARAMS, getPopupById } from '#/shared/ui/popup' +import { useChatBot } from '#/entities/model-entity' + +interface ResetBotFilters {} + +export const ResetBotFilters = ({}: ResetBotFilters) => { + const popup = getPopupById(POPUP_CHAT_BOT_PARAMS) + + const { onSetInferenceParams, inference } = useChatBot() + + return ( +

onSetInferenceParams(inference?.slug ?? null)} + > + Сбросить настройки +

+ +

popup.setState(false)} + > + Закрыть +

+ ) +} @@ -0,0 +1 @@ +export * from './ui' \ No newline at end of file @@ -0,0 +1 @@ +export * from './reset-image-bot-filters' @@ -0,0 +1,30 @@ +.container { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + &__text { + line-height: 19.6px; + font-size: 14px; + font-weight: 400; + display: none; + cursor: pointer; + + @media screen and (max-width: 1000px) { + display: block; + } + + &_reset { + color: #ff4170; + } + &_close { + color: #808283; + } + } + + @media screen and (max-width: 1000px) { + margin-top: 24px; + } +} @@ -0,0 +1,32 @@ +import React from 'react' +import styles from './reset-image-bot-filters.module.scss' +import { c } from '#/shared' +import { POPUP_CHAT_BOT_PARAMS, POPUP_IMAGE_BOT_PARAMS, getPopupById } from '#/shared/ui/popup' +import { useChatBot } from '#/entities/model-entity' +import { useImageBot } from '#/entities/model-entity/model/use-image-bot' + +interface ResetImageBotFilters {} + +export const ResetImageBotFilters = ({}: ResetImageBotFilters) => { + const popup = getPopupById(POPUP_IMAGE_BOT_PARAMS) + + const { onSetInferenceParams, inference } = useImageBot() + + return ( +

onSetInferenceParams(inference?.slug ?? null)} + > + Сбросить настройки +

+ +

popup.setState(false)} + > + Закрыть +

+ ) +} @@ -0,0 +1 @@ +export * from './ui' \ No newline at end of file @@ -0,0 +1 @@ +export * from './switch-filter' \ No newline at end of file @@ -0,0 +1,52 @@ +.wrapper { + display: flex; + align-items: center; + gap: 12px; +} + +.switch { + display: none; + + &__label { + color: #a4aab5; + font-size: 15px; + line-height: 19.6px; + font-weight: 400; + } + & { + display: none; + + &:checked + .switch__slider { + background-color: #7f7df280; + + &::before { + transform: translateX(21px); + background-color: #7f7df3; + } + } + } + + &__slider { + position: relative; + width: 34px; + height: 13px; + background-color: #40404f61; + border-radius: 20px; + cursor: pointer; + transition: background-color 0.25s ease; + + &::before { + content: ''; + position: absolute; + top: -3.5px; + left: -3.5px; + width: 20px; + height: 20px; + background-color: #fff; + border-radius: 50%; + transition: transform 0.25s ease; + box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), + 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + } + } +} @@ -0,0 +1,42 @@ +import React from 'react' +import { CommonTooltip } from '#/shared/ui/tooltip' +import styles from './switch-filter.module.scss' + +interface SwitchFilterProps { + name: string + value: boolean + setValue: (value: boolean) => void + description: string + withoutTooltip?: boolean +} + +export const SwitchFilter = ({ + name, + value, + description, + setValue, + withoutTooltip = false, +}: SwitchFilterProps) => { + return ( + + + { + setValue(e.target.checked) + }} + className={styles.switch} + /> + + {name} + + + ) +} @@ -0,0 +1 @@ +export * from './ui' \ No newline at end of file @@ -1,17 +0,0 @@ -.wrapModelTitle { - margin-bottom: 20px; - margin-top: 15px; - // width: max-content; - width: 100% !important; - @media (max-width: 768px) { - margin: 0; - margin-top: 15px; - } - .bigTitle { - min-width: max-content !important; - @media (max-width: 768px) { - display: none; - overflow: hidden; - } - } -} @@ -1,40 +0,0 @@ -import React from 'react' -import { Box, Typography } from '@mui/material' -import Link from 'next/link' - -import styles from './title.module.scss' - -export interface TitleProps { - type: string - title: string - linkBack?: string - rightSlot?: React.ReactNode -} - -export default function Title(props: TitleProps) { - - return ( - - - - {' '} - {props.type} •{' '} - - - {props.title} - - -

- - {props.title} - -

- {props.rightSlot} -

- - ) -} @@ -0,0 +1 @@ +export * from './upscale-settings.popup' \ No newline at end of file @@ -0,0 +1,4 @@ +.popup{ + min-width: 200px; + min-height: 250px; +} \ No newline at end of file @@ -0,0 +1,15 @@ +import { getPopupById, POPUP_UPSCALE_SETTINGS, PopupTemplate } from '#/shared/ui/popup' +import React, { useEffect } from 'react' +import styles from './upscale-settings.popup.module.scss' + +export const UpscaleSettingsPopup = () => { + const popup = getPopupById(POPUP_UPSCALE_SETTINGS) + + return ( + +

НАСТРОЙКИ

+ + ) +} @@ -0,0 +1 @@ +export * from './ui' \ No newline at end of file @@ -0,0 +1 @@ +export * from './use-chat-message-actions' \ No newline at end of file @@ -0,0 +1,125 @@ +import { useAppDispatch } from '#/app/store/store' +import { getUserBalance } from '#/entities/balance' +import { + Message, + MessageEventStreamResponse, + MessageSend, + postMessage, + removeMessage, + useChatBotMessages, + useChatMessagesEvents, +} from '#/entities/message' +import { useChatBotParams } from '#/entities/model-entity' +import { useChatBotPagination } from '#/features/chat-bot-pagination' +import { useCurrentChat } from '#/features/chats' +import { makePrivateRequest } from '#/shared/api' +import { useEventSource } from '#/shared/lib/event-source' +import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' +import { EventSourcePolyfill } from 'event-source-polyfill' +import { cloneDeep } from 'lodash' +import { useSession } from 'next-auth/react' +import { useEffect } from 'react' + +export function useChatMessageActions() { + const dispatch = useAppDispatch() + + const { messages, setLoading, setMessages, loading } = useChatBotMessages() + + const { botParams } = useChatBotParams() + + const { currentChat } = useCurrentChat() + + const { showMessage } = useShowDataStore() + + const { data: session } = useSession() + + const { event, addOpenCallback } = useEventSource() + + const { makeEvent } = useChatMessagesEvents() + + function getFileLink(file: File) { + return URL.createObjectURL(file) + '?type=.' + file.name.split('.')[1] + } + + function getOptimisticMessage(data: MessageSend): Message { + const date = new Date() + + const file = data.file ? getFileLink(data.file) : null + + return { + ...data, + file, + is_sent: true, + model: '', + from_model: false, + uid: 'new-send', + elapsed_time: '', + is_favourite: false, + created_at: date.toISOString(), + } + } + + const sendMessage = makePrivateRequest(async (data: MessageSend) => { + if (loading || !botParams || !currentChat) return + + const userMessage = getOptimisticMessage(data) + + const date = new Date() + + const modelMessage: Message = { + ...userMessage, + content: `Ваш вопрос получен. Ожидание ответа от ${botParams.slug}...`, + from_model: true, + file: null, + uid: 'new-bot-send', + created_at: date.toISOString(), + } + + setLoading(true) + + setMessages([...messages, userMessage, modelMessage]) + + const r = useChatBotMessages.getState().messages + + const initialMessages = r.filter((m) => !['new-bot-send', 'new-send'].includes(m.uid)) + + const { data: result, status } = await postMessage(currentChat, data) + + setLoading(false) + + if (status >= 400) { + userMessage.is_sent = false + + setMessages([...initialMessages, userMessage]) + + const error = result as { detail: string } + + if (error.detail) return showMessage(error.detail) + + return showMessage('Непредвиденная ошибка, попробуйте еще раз') + } + + ;(result as Message[])[1].content = modelMessage.content + + setMessages([...initialMessages, ...(result as Message[])]) + + makeEvent('chat-bot', () => { + ;(result as Message[])[1].content = '' + }) + + dispatch(getUserBalance(session?.access)) + }) + + const deleteMessage = makePrivateRequest(async (uid: string) => { + if (!currentChat) return + + const { status } = await removeMessage(currentChat, uid) + + if (status) setMessages(messages.filter((el) => el.uid !== uid)) + }) + + return { + sendMessage, + deleteMessage, + } +} @@ -0,0 +1 @@ +export * from './model' \ No newline at end of file @@ -2,7 +2,7 @@ import { createAsyncThunk, createSlice } from '@reduxjs/toolkit' import { CopywriteProxy } from '#/domains/copywrite/proxy/copywrite-proxy' import { Template } from '#/domains/copywrite/proxy/types/template' -import { Message } from '#/shared/lib/types/model' +import { Message } from '#/entities/message' export interface Theme { templates: Template[] | null @@ -6,7 +6,7 @@ import { emptyTemplate } from '#/domains/copywrite/lib/constants' import { Template } from '#/domains/copywrite/proxy/types/template' import { loadGeneration, loadTemplates } from '#/features/use-copy/copy-slice' import { useAppDispatch, useAppSelector } from '#/app/store/store' -import { Message } from '#/shared/lib/types/model' +import { Message } from '#/entities/message' interface UseCopy { currentTemplate: Template | null @@ -43,7 +43,8 @@ export const useCopy = (): UseCopy => { uid: '123', created_at: '123', file: null, - info: null, + info: {}, + model: 'unknown', from_model: false, elapsed_time: '12', is_favourite: false, @@ -7,8 +7,9 @@ import { Template } from '#/domains/copywrite/proxy/types/template' import { loadGeneration } from '#/features/use-copy/copy-slice' import { useAppDispatch } from '#/app/store/store' import { API_URL } from '#/shared/lib/constants' -import { Message, MessageSend } from '#/shared/lib/types/model' -import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' +import { MessageSend } from '#/shared/lib/types/model' +import { Message } from '#/entities/message' +import { useShowDataStore } from '#/shared/lib/hooks' type Languages = 'ru' | 'en' | 'it' | 'fr' type LanguagesText = 'Русский' | 'Английский' | 'Итальянский' | 'Французский' @@ -24,7 +25,10 @@ export const languages = { ...langs, Немецкий: 'de' } export const target_audiences = ['Вся', '18+', '21+', '30+', '14-20', '35-40'] export const tovs = ['Нейтральный', 'Спокойный', 'Агрессивный', 'Серьезный', 'Провокационный', 'Остроумный', 'Наставнический', 'Дружелюбный'] -type Setting = Pick +type Setting = Pick< + Template, + 'tov' | 'language' | 'resources_urls' | 'keywords' | 'target_audience' | 'theme' +> type UseTemplate = { text: EditorState @@ -78,7 +82,9 @@ export const useTemplate = (currentTemplate: Template | null): UseTemplate => { } }) - const [targetAudiences, setTargetAudiences] = useState(currentTemplate?.target_audience || target_audiences[0]) + const [targetAudiences, setTargetAudiences] = useState( + currentTemplate?.target_audience || target_audiences[0] + ) const [tov, setTov] = useState(currentTemplate?.tov || tovs[0]) @@ -120,12 +126,16 @@ export const useTemplate = (currentTemplate: Template | null): UseTemplate => { try { setIsLoading(true) - const { data } = await axios.post>(API_URL + '/copywrite/', dataForSend, { - withCredentials: true, - headers: { - Authorization: `Bearer ${session?.access}`, - }, - }) + const { data } = await axios.post>( + API_URL + '/copywrite/', + dataForSend, + { + withCredentials: true, + headers: { + Authorization: `Bearer ${session?.access}`, + }, + } + ) setIsLoading(false) const newContentState = ContentState.createFromText(data[0].content) @@ -0,0 +1 @@ +export * from './user-message-popup' \ No newline at end of file @@ -0,0 +1,22 @@ +.container { + padding: 6px 0px !important; + color: var(--air-color); +} + +.popup { + &__button { + font-size: 15px; + display: flex; + font-weight: 500; + align-items: center; + gap: 5px; + width: max-content; + padding: 8px 14px; + transition: all 0.3s ease; + width: 100%; + + &:hover { + backdrop-filter: brightness(90%); + } + } +} @@ -0,0 +1,74 @@ +import React from 'react' +import CopySvg from '#/assets/svg/copy.svg?react' +import TrashSvg from '#/assets/svg/trash.svg?react' +import FullscreeenSvg from '#/assets/svg/fullscreen-icon.svg?react' + +import styles from './user-message-popup.module.scss' + +import { useChatMessageActions } from '#/features/use-chat-message-actions' +import { MessageFullscreenModal } from '#/features/message-fullscreen-modal/ui/message-fullscreen-modal' +import { FULLSCREEN_CHAT_MESSAGE, getModalById } from '#/features/modals' +import { Message, useChatBotMessages } from '#/entities/message' +import { getPopupById, PopupTemplate, PoputTemplateHorizontal } from '#/shared/ui/popup' + +interface UserMessageActionsPopupProps { + id: string + horizontal?: PoputTemplateHorizontal + message: Message +} + +export const UserMessageActionsPopup = ({ + id, + horizontal = 'right', + message, +}: UserMessageActionsPopupProps) => { + const { deleteMessage } = useChatMessageActions() + const popup = getPopupById(id) + const content = popup.getStoreProperty('content')! + const modal = getModalById(FULLSCREEN_CHAT_MESSAGE) + + const handleAction = (e: React.MouseEvent, callback: () => void) => { + e.stopPropagation() + callback() + popup.setState(false) + } + + return ( + popup.setState(false)} + horizontal={horizontal} + className={styles.container} + id={id} + > +

+ +

+ + + + + ) +} @@ -0,0 +1 @@ +export * from './ui' \ No newline at end of file @@ -0,0 +1,25 @@ +.button { + background-color: #f1faff; + color: rgb(43, 43, 66); + width: 100%; + display: flex; + align-items: center; + justify-content: center; + padding: 10px 16px; + border-radius: 13px; + transition: opacity 0.3s ease-in-out; + gap: 15px; + font-size: 16px; + font-weight: 500; + + &:hover { + opacity: 0.8; + } +} + +html[data-theme='dark'] { + .button { + background-color: #1C1C1E; + color: white; + } +} @@ -0,0 +1,45 @@ +import { LoginPage } from '#/views/login' +import { RegisterPage } from '#/views/register' +import '@testing-library/jest-dom' +import { screen, waitFor } from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import { jestRender } from '#/../jest/utils/render' +import { YandexAuthButton } from './yandex-auth-button' +import { windowMock } from '#/../jest/utils/window-mock' +import { fetchToCrossfetch } from '#/../jest/utils/fetch-to-crossfetch' + +jest.mock('next/router') +jest.mock('@sentry/nextjs') + +windowMock() +fetchToCrossfetch() + +describe('yandex-auth-button', () => { + it('renders in login', () => { + jestRender() + + const button = screen.getByTestId('yandex-auth-button') + + expect(button).toBeInTheDocument() + }) + + it('renders in register', () => { + jestRender() + + const button = screen.getByTestId('yandex-auth-button') + + expect(button).toBeInTheDocument() + }) + + it('opened signin url', async () => { + jestRender() + + const button = screen.getByTestId('yandex-auth-button') + + await userEvent.click(button) + + await waitFor(() => { + expect(window.location.href).toContain('api/auth/signin?csrf=true') + }) + }) +}) @@ -1,51 +1,19 @@ -import theme from '#/entities/theme/model/theme' -import { useThemeAndDevice } from '#/shared/lib/hooks' -import { Button } from '@mui/material' +import React from 'react' +import YandexSvg from '#/assets/svg/yandex.svg?react' +import styles from './yandex-auth-button.module.scss' import { signIn } from 'next-auth/react' -import Image from 'next/image' -import React, { useState } from 'react' interface YandexAuthButtonProps {} export const YandexAuthButton = ({}: YandexAuthButtonProps) => { - const { theme } = useThemeAndDevice() - - const [hovered, setHovered] = useState(false) - return ( - + + Войти с Яндекс ID + ) } @@ -0,0 +1,70 @@ +import React, { useEffect, useMemo } from 'react' +import { Avatar, Box, Button, Typography } from '@mui/material' +import Image from 'next/image' +import Link from 'next/link' +import LockSvg from '#/assets/svg/lock.svg?react' +import BlockedSvg from '#/assets/svg/blocked.svg?react' + +import styles from './card.module.scss' +import { useThemeAndDevice } from '#/shared/lib/hooks' + +export type CardProps = { + title: string + icon: string + text: string + uid: string + blocked?: boolean + slug: string + accessed_models?: string[] | null +} + +const ChatCard = ({ text, icon, title, uid, slug, accessed_models, blocked }: CardProps) => { + const link = useMemo(() => { + return accessed_models && !accessed_models.includes(slug) ? '/account?scope=subscribe' : `chat-bot/${slug}` + }, [accessed_models]) + + const { theme } = useThemeAndDevice() + + return ( + + + + + + + {title} + {text} + + + {blocked ? ( +

+ + + Модель недоступна + +

+ ) : ( + accessed_models && + !accessed_models.includes(slug) && ( +

+ + Недоступно в текущем тарифе +

+ ) + )} + + + ) +} + +export default ChatCard @@ -0,0 +1,8 @@ +interface ApiKeyDTO { + created_at: string // ISO 8601 format + name: string + key: string + expires_at: string | null + user: User + token_limit: string +} @@ -0,0 +1,37 @@ +interface UserDTO { + uid: string + first_name: string + last_name: string + username: string + created_at: string // ISO 8601 format + email: string + is_active: boolean + is_superuser: boolean + is_staff: boolean + is_confirmed: boolean + is_subscribed_to_emails: boolean + show_balance: boolean + profile_picture_link: string + account_type: string + token: { + access: string + refresh: string + } + payment_plan: { + uid: string + plan: { + uid: string + title: string + price: string + tokens_per_plan: string + duration: string + accessed_models: string[] + } + last_payment_at: string // ISO 8601 date + next_payment_at: string // ISO 8601 date + current_token_balance: number + } + referral_code: string | null + is_social: boolean + social_auth: any[] // Assuming it can hold any type of objects +} @@ -1,6 +1,6 @@ -import { ChatBotsPage } from "#/views/chat-bot"; -import { getDefaultLayout } from "#/widgets/layouts"; +import { ChatBotsPage } from '#/views/chat-bot' +import { getDefaultLayout } from '#/widgets/layouts' -ChatBotsPage.getLayout = getDefaultLayout({ titlePage: 'Чат-боты' }); +ChatBotsPage.getLayout = getDefaultLayout({ titlePage: 'Чат-боты' }) export default ChatBotsPage @@ -1,48 +0,0 @@ -import React from 'react' -import { Avatar, Box, Typography } from '@mui/material' -import Image from 'next/image' -import Link from 'next/link' - -import styles from './card.module.scss' - -export type CardProps = { - title: string - icon: string - changeFavorite: (uid: string) => Promise - isFavorite: boolean - text: string - link: string - uid: string - companies: string -} - -const Card = ({ changeFavorite, isFavorite, text, icon, title, link, uid, companies }: CardProps) => { - return ( - - - - - { - e.preventDefault() - changeFavorite(uid) - }} - src={isFavorite ? '/svg/sub_menu/favourite.svg' : '/svg/sub_menu/favourite_off.svg'} - width={25} - height={25} - alt={''} - /> - - - {title} - {text} - - {companies} - - - - - ) -} - -export default Card @@ -1,278 +0,0 @@ -import * as React from 'react' -import { useState } from 'react' -import { Stack, Typography } from '@mui/material' -import Box from '@mui/material/Box' -import Button from '@mui/material/Button' -import dynamic from 'next/dynamic' -import Image from 'next/image' -import { getSession } from 'next-auth/react' - -import { toEditorState } from '#/domains/copywrite/lib/helper' -import { useCopy } from '#/features/use-copy/use-copy' -import { languages, target_audiences, tovs, useTemplate } from '#/features/use-copy/use-template' -import { Layout } from '#/app/layout' -import { Input, Loader, TooltipCustom } from '#/shared' -import { api } from '#/shared/api/endpoints' -import { getTypeDevice } from '#/shared/lib/helpers' -import { Message } from '#/shared/lib/types/model' -import { IDalleProps } from '#/shared/lib/types/types-dalle' -import { SelectUI } from '#/shared/ui/select' - -import Title from '../../features/title/title' - -import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css' - -const toolbarOptions = { - options: ['inline', 'blockType', 'list', 'textAlign', 'history'], - inline: { - options: ['bold', 'italic', 'underline'], - }, - blockType: { - options: ['Normal', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'Blockquote'], - }, - fontSize: { - options: [12, 14, 16, 18, 24, 30, 36], - }, - fontFamily: { - options: ['Arial', 'Georgia', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'], - }, - list: { - options: ['unordered', 'ordered'], - }, - textAlign: { - options: ['left', 'center', 'right'], - }, -} - -export async function getServerSideProps(context: any): Promise<{ props: IDalleProps }> { - const device = getTypeDevice(context) - - const { req } = context - - const session = await getSession({ req }) - - const token = session?.access || null - - const favorites = await api.getFavoritesModel(token, session) - - return { - props: { - device, - token, - favorites, - }, - } -} - -const Create: React.FC = ({ device, token, favorites }) => { - const desktop = device === 'desktop' - - const [showGeneration, setShowGeneration] = useState(false) - - const [isCopy, setIsCopy] = useState(false) - - const copy = (text: string) => { - navigator.clipboard.writeText(text) - setIsCopy(true) - } - - const { currentTemplate, generations, pickGeneration, setPickGeneration, createEmpty } = useCopy() - - const { - tov, - lang, - setLang, - setTov, - setTargetAudiences, - targetAudiences, - setResourceUrls, - resource_urls, - setTheme, - theme, - keywords, - setKeywords, - createText, - text, - clearSetting, - isLoading, - content, - setContent, - onEditorChange, - } = useTemplate(currentTemplate) - - const onSetGeneration = (message: Message) => { - setPickGeneration(message) - onEditorChange(toEditorState(message.content)) - setShowGeneration(false) - } - - const Editor = dynamic(() => import('react-draft-wysiwyg').then((res) => res.Editor), { - ssr: false, - }) - - const EditorWrap = (): JSX.Element | null => { - if (showGeneration) { - if (!generations || generations.length === 0) { - return null - } - - //@ts-ignore - return generations.map((el) => ( - onSetGeneration(el)} - display='flex' - justifyContent='space-between' - className='border-bottom-1px-gray' - sx={{ cursor: 'pointer' }} - padding='10px' - key={el.uid} - > - {el.content.slice(0, 60)}... - - copy(el.content)} - src={'/svg/copy.svg'} - width={22} - height={22} - alt={'copy'} - /> - - - )) - } - - return ( - - ) - } - - return ( - - - <Box - display={'flex'} - justifyContent='space-between' - flexDirection={desktop ? 'row' : 'column-reverse'} - sx={{ - marginBottom: desktop ? 0 : 3, - width: desktop ? '98%' : '100%', - marginTop: desktop ? 3 : 0, - }} - > - <Box className='pd-30 bg-color-block border-radius-main' width='100%' position='relative'> - <Box height='95%' sx={{ overflowY: 'auto' }}> - <Box width='50%' display='flex' marginBottom={2}> - {!showGeneration && ( - <Button - fullWidth - className='btn-classic' - onClick={() => setShowGeneration(true)} - > - Мои генерации - </Button> - )} - <Button - fullWidth - sx={{ marginLeft: 1 }} - className='btn-classic' - onClick={() => { - onEditorChange(toEditorState('')) - setShowGeneration(false) - }} - > - Пустой шаблон - </Button> - </Box> - <EditorWrap /> - </Box> - </Box> - <Box - height='auto' - className='pd-30 bg-color-block border-radius-main' - width='500px' - marginLeft={1.5} - > - <Typography className='font-16 color-gray'>Настройки генерации</Typography> - <Stack spacing={0.5} sx={{ marginTop: 2.5 }}> - <Typography className='title-main-gray'>Ваш запрос</Typography> - <textarea value={content} onChange={(e) => setContent(e.target.value)} /> - </Stack> - <Box sx={{ marginTop: 1 }}> - <SelectUI - title={'Тон'} - value={tov} - onChange={(e) => setTov(e.target.value)} - list={tovs} - /> - </Box> - <Box sx={{ marginTop: 1 }}> - <SelectUI - title={'Язык'} - value={lang} - onChange={(e) => setLang(e.target.value)} - list={Object.keys(languages)} - /> - </Box> - <Box sx={{ marginTop: 1 }}> - <SelectUI - title={'Аудитория'} - value={targetAudiences} - onChange={(e) => setTargetAudiences(e.target.value)} - list={target_audiences} - /> - </Box> - <Stack spacing={0.5} sx={{ marginTop: 1 }}> - <Typography className='title-main-gray'>Тема</Typography> - <Input value={theme} onChange={(e) => setTheme(e.target.value)} /> - </Stack> - <Stack spacing={0.5} sx={{ marginTop: 1 }}> - <Typography className='title-main-gray'>Ключевые слова (через запятую)</Typography> - <Input value={keywords} onChange={(e) => setKeywords(e.target.value.split(','))} /> - </Stack> - <Stack spacing={0.5} sx={{ marginTop: 1 }}> - <Typography className='title-main-gray'>Ресурсы (ссылки, через запятую)</Typography> - <Input - value={resource_urls} - onChange={(e) => setResourceUrls(e.target.value.split(','))} - /> - </Stack> - <Stack sx={{ marginTop: 1 }}> - <Typography - onClick={clearSetting} - className='text' - color='#FF2372 !important' - sx={{ cursor: 'pointer' }} - > - Сбросить настройки - </Typography> - </Stack> - <Stack sx={{ marginTop: 3 }}> - {isLoading ? ( - <Box width='100%' display='flex' justifyContent='center'> - <Loader /> - </Box> - ) : ( - <Button className='btn-classic' onClick={createText}> - Сгенерировать - </Button> - )} - </Stack> - </Box> - </Box> - </Layout> - ) -} - -export default Create @@ -1,83 +0,0 @@ -import * as React from 'react' -import { useEffect } from 'react' -import { Typography } from '@mui/material' -import Box from '@mui/material/Box' -import { getSession, useSession } from 'next-auth/react' - -import { loadTemplates } from '#/features/use-copy/copy-slice' -import { Layout } from '#/app/layout' -import { useAppDispatch, useAppSelector } from '#/app/store/store' -import { api } from '#/shared/api/endpoints' -import { getTypeDevice } from '#/shared/lib/helpers' -import { IDalleProps } from '#/shared/lib/types/types-dalle' - -import Card from './card' - -export async function getServerSideProps(context: any): Promise<{ props: IDalleProps }> { - const device = getTypeDevice(context) - - const { req } = context - - const session = await getSession({ req }) - - const token = session?.access || null - - const favorites = await api.getFavoritesModel(token, session) - - return { - props: { - device, - token, - favorites, - }, - } -} - -const CopyPage: React.FC<IDalleProps> = ({ device, token, favorites }) => { - const desktop = device === 'desktop' - - const { data } = useSession() - - const templates = useAppSelector((state) => state.copy.templates) - - const dispatch = useAppDispatch() - - useEffect(() => { - if (data?.access) { - dispatch(loadTemplates(data.access)) - } - }, [data?.access]) - - return ( - <Layout titlePage={'Копирайтинг'}> - <Typography sx={{ fontSize: 24, fontWeight: 'bold', marginTop: '25px' }}>Копирайтинг</Typography> - <Box - display={'flex'} - flexDirection={desktop ? 'row' : 'column-reverse'} - sx={{ - marginBottom: desktop ? 0 : 3, - width: desktop ? '98%' : '100%', - marginTop: desktop ? 3 : 0, - }} - > - {templates?.map((el) => { - return ( - <Card - icon={el.picture} - key={el.id} - changeFavorite={async () => {}} - link={`/copy/create?id=${el.id}`} - isFavorite={false} - text={el.description} - title={el.title} - uid={el.id.toString()} - companies={''} - /> - ) - })} - </Box> - </Layout> - ) -} - -export default CopyPage @@ -0,0 +1,6 @@ +import { MainPage } from '#/views/index' +import { getDefaultLayout } from '#/widgets/layouts' + +MainPage.getLayout = getDefaultLayout({ titlePage: 'AIR' }) + +export default MainPage @@ -0,0 +1,6 @@ +import { ImageModelPage } from '#/views/old-images' +import { getDefaultLayout } from '#/widgets/layouts' + +ImageModelPage.getLayout = getDefaultLayout() + +export default ImageModelPage @@ -0,0 +1,6 @@ +import { ImageModelsPage } from '#/views/old-images' +import { getDefaultLayout } from '#/widgets/layouts' + +ImageModelsPage.getLayout = getDefaultLayout({ title: 'Изображения' }) + +export default ImageModelsPage @@ -1,6 +0,0 @@ -import { ImageModelsPage } from "#/views/images"; -import { getDefaultLayout } from "#/widgets/layouts"; - -ImageModelsPage.getLayout = getDefaultLayout({ titlePage: 'Изображения' }) - -export default ImageModelsPage @@ -13,27 +13,13 @@ import { store, useAppSelector } from '#/app/store/store' import ErrorBoundary from './error-boundary' -import '#/app/styles/globals.css' +import '#/app/styles/globals.scss' import '#/app/styles/styles-pages/system.scss' import { NextPage } from 'next' import { pingFangFont } from '#/shared/lib/constants/font/font' import { useBlockTelegram } from '#/shared/lib/hooks/use-block-telegram' import { Error } from '#/shared' - -// import fetch from 'cross-fetch' - -// global.fetch = (...params: Parameters<typeof fetch>) => { -// let url = params[0] - -// const baseUrl = process.env.NEXT_PUBLIC_NEXTAUTH_URL! - -// if (typeof url === 'string' && !(url as string).startsWith(baseUrl) && !(url as string).includes('http')) { -// url = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) + params[0] : baseUrl + params[0] -// console.log(url) -// } - -// return fetch(url, params[1]) -// } +import { Providers } from '#/widgets/providers' axios.defaults.httpsAgent = new https.Agent({ rejectUnauthorized: false, @@ -75,20 +61,8 @@ export interface AppPropsWithLayout extends AppProps { function App({ Component, pageProps: { session, ...pageProps } }: AppPropsWithLayout) { useBlockTelegram() - const getLayout = Component.getLayout ?? ((page) => page) - if ('serviceWorker' in navigator) { - navigator.serviceWorker - .getRegistrations() - .then(function (registrations) { - for (let registration of registrations) { - registration.unregister() - } - }) - .catch(function (error) { - console.error('Ошибка при размонтировании service worker:', error) - }) - } + const getLayout = Component.getLayout ?? ((page) => page) return ( <> @@ -103,8 +77,10 @@ function App({ Component, pageProps: { session, ...pageProps } }: AppPropsWithLa <Provider store={store}> <SessionProvider session={session} refetchInterval={5 * 60}> <ThemeProvider theme={pingFangFont}> - {getLayout(<Component {...pageProps} />)} - <Error /> + <Providers> + {getLayout(<Component {...pageProps} />)} + <Error /> + </Providers> </ThemeProvider> </SessionProvider> </Provider> @@ -1,6 +1,8 @@ +import { PopupBackdrop } from '#/shared/ui/popup' import { Head, Html, Main, NextScript } from 'next/document' export default function Document() { + return ( <Html lang='ru'> <Head> @@ -35,7 +37,9 @@ export default function Document() { </div> </noscript> <Main /> + <div id='popup-container'></div> <div id='modal-container'></div> + <div id='popup-container'></div> <NextScript /> </body> </Html> @@ -1,258 +0,0 @@ -import React from 'react' -import { Box, Card, CardMedia, Stack, TextField, Typography } from '@mui/material' -import Button from '@mui/material/Button' -import axios from 'axios' -import Head from 'next/head' -import Image from 'next/image' -import Link from 'next/link' -import { useRouter } from 'next/router' - -import { Layout } from '#/app/layout' -import { useAppSelector } from '#/app/store/store' -import { API_URL } from '#/shared/lib/constants/constants' -import { getRandomImage, getTypeDevice } from '#/shared/lib/helpers' -import { TDeviceProp } from '#/shared/lib/types/entities' - -export async function getServerSideProps(context: any): Promise<{ props: TDeviceProp }> { - const device = getTypeDevice(context) - - return { - props: { - device, - }, - } -} - -const ChangePassword: React.FC<TDeviceProp> = ({ device }) => { - const [password1, setPassword1] = React.useState<string>('') - - const [password2, setPassword2] = React.useState<string>('') - - const [isChange, setIsChange] = React.useState(false) - - const { query, push } = useRouter() - - const changePassword = async () => { - let formData: any = new FormData() - - formData.append('password_1', password1) - formData.append('password_2', password2) - - if (password1.trim() && password2.trim()) { - try { - await axios.post(API_URL + `/auth/change-pass?token=${query.token}`, formData, { - headers: { - 'content-type': 'multipart/form-data ', - }, - }) - setIsChange(true) - setTimeout(() => push('/login'), 5000) - } catch (err) {} - } - } - - const desktop = device === 'desktop' - - const refImage = React.useRef(getRandomImage()) - - const theme = useAppSelector((state) => state.theme.theme) - - return ( - <Layout titlePage={'Авторизация'} isAuthPage={true}> - <Head> - <title>Восстановление аккаунта - - - - - - - {''}

- - {desktop && ( - - - - - Midjourney - - - by honeynek - - - - - )} - {isChange ? ( - - - Ваш пароль успешно изменён! - - - Войти в аккаунт - - - ) : ( - - - Восстановление пароля - - - Новый пароль - - setPassword1(e.target.value)} - > - - Подтверждение пароля - - setPassword2(e.target.value)} - > - - - - - )} - - - ) -} - -export default ChangePassword @@ -1,7 +1,7 @@ -import { MainPage } from '#/views/index' +import { MainPage } from '#/views/main' import { getDefaultLayout } from '#/widgets/layouts' +MainPage.getLayout = getDefaultLayout({ titlePage: 'Главная' }) -MainPage.getLayout = getDefaultLayout({ titlePage: 'AIR' }) export default MainPage @@ -1,6 +1,7 @@ import { LoginPage } from '#/views/login' import { getLayout, LayoutWithoutSideMenu } from '#/widgets/layouts' + LoginPage.getLayout = getLayout(LayoutWithoutSideMenu, { titlePage: 'Авторизация' }) export default LoginPage @@ -0,0 +1,6 @@ +import { UpscalePage } from '#/views/upscale' +import { getDefaultLayout } from '#/widgets/layouts' + +UpscalePage.getLayout = getDefaultLayout({ titlePage: 'Upscale' }) + +export default UpscalePage @@ -1,25 +1,28 @@ import axios from 'axios' import { API_URL } from '#/shared/lib/constants' -import { IShortModel, IModel } from '#/entities/model-entity' +import { ShortModel, Model } from '#/entities/model-entity' const model_api = { - async getBots(token?: string): Promise { + async getBots(token?: string): Promise { try { - const { data } = await axios.get(API_URL + '/ml_models/?category=chat-bots', { - headers: { - Authorization: `Bearer ${token}`, - }, - }) + const { data } = await axios.get( + API_URL + '/ml_models/?category=chat-bots', + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ) return data } catch (err: any) { return err } }, - async getBotParams(slug: string, token?: string): Promise { + async getBotParams(slug: string, token?: string): Promise { try { - const { data } = await axios.get(API_URL + `/ml_models/${slug}`, { + const { data } = await axios.get(API_URL + `/ml_models/${slug}`, { headers: { Authorization: `Bearer ${token}`, }, @@ -30,7 +33,7 @@ const model_api = { } }, - async getImages(token?: string): Promise { + async getImages(token?: string): Promise { try { const { data } = await axios.get(API_URL + '/ml_models/?category=images', { headers: { @@ -1,3 +1,4 @@ +// @ts-nocheck import React, { useCallback, useEffect, useRef, useState } from 'react' import axios, { AxiosError, AxiosResponse } from 'axios' import base64 from 'base64-encode-file' @@ -12,7 +13,7 @@ import { IMessageRequest } from '#/shared/lib/types/types-gpt' import { Message, MessageSend } from '#/entities/message' import { Variant } from '#/shared/lib/hooks/use-show-data' -const formDataHelper = (file: File, dataForSend: MessageSend): FormData => { +const formDataHelper = (file: File, dataForSend: MessageSend): FormData => { const FD = new FormData() FD.append('file', file) FD.append('info', JSON.stringify(dataForSend.info)) @@ -24,11 +25,14 @@ const formDataHelper = (file: File, dataForSend: MessageSend): FormData => export const ModelsWithChatsEndpoints = { getData: async (chatUid: string, offset: number, token?: string) => { try { - const { data } = await axios.get(API_URL + `/chats/${chatUid}/messages/?limit=10&offset=${offset}`, { - headers: { - Authorization: `Bearer ${token}`, - }, - }) + const { data } = await axios.get( + API_URL + `/chats/${chatUid}/messages/?limit=10&offset=${offset}`, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ) return data } catch (err: any) { return { @@ -38,8 +42,13 @@ export const ModelsWithChatsEndpoints = { } } }, - sendData: async (chatUid: string | null, dataForSend: MessageSend | FormData, token?: string) => { - const HeaderDataType = dataForSend instanceof FormData ? 'multipart/form-data' : 'application/json' + sendData: async ( + chatUid: string | null, + dataForSend: MessageSend | FormData, + token?: string + ) => { + const HeaderDataType = + dataForSend instanceof FormData ? 'multipart/form-data' : 'application/json' return await axios.post>( API_URL + `/chats/${chatUid}/messages/`, @@ -58,8 +67,7 @@ export const ModelsWithChatsEndpoints = { export function useModel( currentChat: string | null, showMessage: (message: string, variant?: Variant) => void, - modelType: string, - clearInput?: () => void + modelType: string ) { const { data } = useSession() const [messages, setMessages] = useState(null) @@ -72,7 +80,11 @@ export function useModel( setMessages([]) ;(async () => { setLoading(true) - const answer = await ModelsWithChatsEndpoints.getData(currentChat, 0, data?.access) + const answer = await ModelsWithChatsEndpoints.getData( + currentChat, + 0, + data?.access + ) setLoading(false) if (Array.isArray(answer)) { @@ -89,7 +101,11 @@ export function useModel( const getMessagesPagination = async () => { if (currentChat) { setLoading(true) - const answer = await ModelsWithChatsEndpoints.getData(currentChat, offset, data?.access) + const answer = await ModelsWithChatsEndpoints.getData( + currentChat, + offset, + data?.access + ) setLoading(false) if (Array.isArray(answer) && messages != null) { @@ -103,7 +119,7 @@ export function useModel( } } - const sendMessage = async (dataForSend: MessageSend) => { + const sendMessage = async (dataForSend: MessageSend) => { if (loading) { return } @@ -115,7 +131,11 @@ export function useModel( info: dataForSend.info as any, is_sent: true, model: '', - file: dataForSend.file ? ((URL.createObjectURL(dataForSend.file) + '?type=.' + dataForSend.file.name.split('.')[1]) as string) : null, + file: dataForSend.file + ? ((URL.createObjectURL(dataForSend.file) + + '?type=.' + + dataForSend.file.name.split('.')[1]) as string) + : null, from_model: false, uid: 'new-send', elapsed_time: '', @@ -151,16 +171,19 @@ export function useModel( formData = FD } - const { data: result, status } = await ModelsWithChatsEndpoints.sendData(currentChat, formData ?? dataForSend, data?.access) + const { data: result, status } = await ModelsWithChatsEndpoints.sendData( + currentChat, + formData ?? dataForSend, + data?.access + ) setMessages((prev) => prev!.slice(0, -2)) setLoading(false) - // clearTimeout(timeout) - if (status >= 400) { userMessage.is_sent = false + setMessages((prev) => [...prev!, userMessage]) const error = result as { detail: string } if (error.detail) return showMessage(error.detail) @@ -169,15 +192,19 @@ export function useModel( setMessages((prev) => [...prev!, ...(result as Message[])]) } + setMessages((prev) => [...prev!, ...(result as Message[])]) dispatch(getUserBalance(data?.access)) } const deleteMessage = (message_uid: string) => { - axios.delete(process.env.NEXT_PUBLIC_API_HOST + `/chats/${currentChat}/messages/${message_uid}`, { - headers: { - Authorization: `Bearer ${data?.access}`, - }, - }).then(() => { + axios.delete( + process.env.NEXT_PUBLIC_API_HOST + `/chats/${currentChat}/messages/${message_uid}`, + { + headers: { + Authorization: `Bearer ${data?.access}`, + }, + } + ).then(() => { if (messages) setMessages(messages?.filter((el) => el.uid !== message_uid)) }) } @@ -188,11 +215,14 @@ export function useModel( export const ModelsWithImagesEndpoints = { getData: async (type: string, offset: number, token?: string) => { try { - const { data } = await axios.get(API_URL + `/media/image/${type}?limit=10&offset=${offset}`, { - headers: { - Authorization: `Bearer ${token}`, - }, - }) + const { data } = await axios.get( + API_URL + `/media/image/${type}?limit=10&offset=${offset}`, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ) return data } catch (err: any) { return { @@ -202,17 +232,26 @@ export const ModelsWithImagesEndpoints = { } } }, - sendData: async (type: string | null, dataForSend: MessageSend | FormData, token?: string) => { - const HeaderDataType = dataForSend instanceof FormData ? 'multipart/form-data' : 'application/json' + sendData: async ( + type: string | null, + dataForSend: MessageSend | FormData, + token?: string + ) => { + const HeaderDataType = + dataForSend instanceof FormData ? 'multipart/form-data' : 'application/json' try { - const { data } = await axios.post>(API_URL + `/media/image/${type}`, dataForSend, { - withCredentials: true, - headers: { - Authorization: `Bearer ${token}`, - 'Content-Type': HeaderDataType, - }, - }) + const { data } = await axios.post>( + API_URL + `/media/image/${type}`, + dataForSend, + { + withCredentials: true, + headers: { + Authorization: `Bearer ${token}`, + 'Content-Type': HeaderDataType, + }, + } + ) return data } catch (err: any) { @@ -225,7 +264,11 @@ export const ModelsWithImagesEndpoints = { }, } -export function useModelImages(showMessage: (message: string) => void, type: string, device: Device) { +export function useModelImages( + showMessage: (message: string) => void, + type: string, + device: Device +) { const { data } = useSession() const { getData, sendData } = ModelsWithImagesEndpoints @@ -289,21 +332,35 @@ export function useModelImages(showMessage: (message: string) => void, type: // console.log(offsetRef.current); // console.log(messagesRef.current); - if (dataRef.current?.access && typeRef.current !== '' && typeRef.current !== undefined) { + if ( + dataRef.current?.access && + typeRef.current !== '' && + typeRef.current !== undefined + ) { setLoading(true) - const answer = await getData(typeRef.current, offsetRef.current, dataRef.current?.access) + const answer = await getData( + typeRef.current, + offsetRef.current, + dataRef.current?.access + ) setLoading(false) - if (Array.isArray(answer) && messagesRef.current != null && device === 'mobile') { + if ( + Array.isArray(answer) && + messagesRef.current != null && + device === 'mobile' + ) { const newMessages = answer.reverse() setMessages([...newMessages, ...messagesRef.current]) setOffset((prev) => prev + answer.length) - } else if (Array.isArray(answer) && messagesRef.current != null && device === 'desktop') { + } else if ( + Array.isArray(answer) && + messagesRef.current != null && + device === 'desktop' + ) { setMessages([...messagesRef.current, ...answer]) setOffset((prev) => prev + answer.length) } else { - console.log('err') - showMessage('Ошибка загрузки сообщений') return } @@ -312,7 +369,7 @@ export function useModelImages(showMessage: (message: string) => void, type: [data?.access, type, offset, messages] ) - const createImage = async (dataForSend: MessageSend) => { + const createImage = async (dataForSend: MessageSend) => { const { content, file } = dataForSend setIsComplete(false) @@ -325,8 +382,9 @@ export function useModelImages(showMessage: (message: string) => void, type: setLoading(false) if (result.hasOwnProperty('error')) { - //@ts-ignore - const message = (result.details as AxiosError).response.data.trim() ?? 'Ошибка отправки сообщения' + const message = + (result.details as AxiosError).response.data.trim() ?? + 'Ошибка отправки сообщения' showMessage(message) return } @@ -367,14 +425,22 @@ export const ModelsMediaApi = { } } }, - sendData: async (type: string | null, dataForSend: MessageSend | FormData, token?: string) => { + sendData: async ( + type: string | null, + dataForSend: MessageSend | FormData, + token?: string + ) => { try { - const { data } = await axios.post>(API_URL + `/media/audio/${type}`, dataForSend, { - withCredentials: true, - headers: { - Authorization: `Bearer ${token}`, - }, - }) + const { data } = await axios.post>( + API_URL + `/media/audio/${type}`, + dataForSend, + { + withCredentials: true, + headers: { + Authorization: `Bearer ${token}`, + }, + } + ) return data } catch (err: any) { @@ -414,7 +480,7 @@ export function useMedia(showMessage: (message: string) => void, modelType: stri } }, [data?.access]) - const sendMessage = async (dataForSend: MessageSend) => { + const sendMessage = async (dataForSend: MessageSend) => { if (input.trim() === '') { showMessage('Введите запрос!') return @@ -426,9 +492,9 @@ export function useMedia(showMessage: (message: string) => void, modelType: stri const userMessage: Message = { content: input, - info: null, + info: {}, + model: modelType, is_sent: true, - model: '', file: null, from_model: false, uid: 'new-send', @@ -456,7 +522,9 @@ export function useMedia(showMessage: (message: string) => void, modelType: stri if (result.hasOwnProperty('error')) { try { //@ts-ignore - const message = (result.details as AxiosError).response.data.trim() ?? 'Ошибка отправки сообщения' + const message = + (result.details as AxiosError).response.data.trim() ?? + 'Ошибка отправки сообщения' showMessage(message) return } catch (e) { @@ -1,6 +1,6 @@ type ModelForChats = 'chatgpt' | 'llama2' | 'vicuna' | 'deepl' | 'mistral' -export interface IShortModel { +export interface ShortModel { uid: string title: string description: string @@ -8,18 +8,18 @@ export interface IShortModel { image: string } -export interface IModel { +export interface Model { uid: string title: string description: string slug: string image: string settings: { is_active: boolean } - parameters: IModelParams[] - versions: IModelVersions[] - inputs: IModelInputs[] + parameters: InferenceParams[] + versions: ModelVersions[] + inputs: ModelInputs[] } -export interface IModelParams { +export interface InferenceParams { name: string description: string key: string @@ -34,13 +34,13 @@ export interface IModelParams { } versions: string[] } -export interface IModelVersions { +export interface ModelVersions { name: string description: string default: boolean slug: string } -export interface IModelInputs { +export interface ModelInputs { // type: 'image' | 'zip' | 'text' | 'audio' | 'pdf' | 'txt' type: string required: boolean @@ -7,7 +7,7 @@ import { Error } from '#/shared/lib/types/entities' import { IImagesResponse } from '#/shared/lib/types/types-dalle' import { IMessageRequest, ISendMessageResponse } from '#/shared/lib/types/types-gpt' -import { Message } from '../lib/types/model' +import { Message } from '#/entities/message' const API_URL = process.env.NEXT_PUBLIC_API_HOST @@ -45,7 +45,10 @@ export const api = { } }, - async getImagesDalle(token: string | null, url: string): Promise | null> { + async getImagesDalle( + token: string | null, + url: string + ): Promise | null> { try { const { data } = await axios.get(url, { headers: { @@ -94,7 +97,11 @@ export const api = { } }, - async sendMessageChatGPT(token: string, message: any, uid: string): Promise { + async sendMessageChatGPT( + token: string, + message: any, + uid: string + ): Promise { try { const { data } = await axios.post>( API_URL + `/chats/${uid}/messages/`, @@ -113,13 +120,19 @@ export const api = { } }, - async getFavoritesModel(token: string | null, session: Session | null): Promise { + async getFavoritesModel( + token: string | null, + session: Session | null + ): Promise { try { - const { data } = await axios.get(API_URL + `/ml_models/${session?.user?.name}`, { - headers: { - Authorization: `Bearer ${token}`, - }, - }) + const { data } = await axios.get( + API_URL + `/ml_models/${session?.user?.name}`, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ) return data?.filter((model) => model.is_favourite) } catch (err) { @@ -1,2 +1,2 @@ export * from './instance' -export * from './private-request' \ No newline at end of file +export * from './private-request' @@ -3,6 +3,7 @@ import axios from 'axios' export const api = axios.create({ validateStatus: () => true, baseURL: process.env.NEXT_PUBLIC_API_HOST, + withCredentials: true, }) api.interceptors.response.use( @@ -1,14 +1,14 @@ import { useSession } from 'next-auth/react' import { api } from './instance' -export function makePrivateRequest(callback: (...params: any) => Promise) { +export function makePrivateRequest( + callback: (...params: Params) => Promise +) { const { data } = useSession() - return async (...params: any) => { - if (!data) return - + return async (...params: Params) => { api.interceptors.request.use((config) => { - config.headers.Authorization = `Bearer ${data.access}` + config.headers.Authorization = `Bearer ${data?.access}` return config }) @@ -0,0 +1,33 @@ +type Task = () => Promise + +export class AsyncQueue { + queue: Task[] + processing: boolean + + constructor() { + this.queue = [] + this.processing = false + } + + async push(task: Task): Promise { + this.queue.push(task) + await this.processQueue() + } + + private async processQueue(): Promise { + if (this.processing) { + return + } + + this.processing = true + + while (this.queue.length > 0) { + const task = this.queue.shift() + if (task) { + await task() + } + } + + this.processing = false + } +} @@ -0,0 +1 @@ +export * from './async-queue' \ No newline at end of file @@ -0,0 +1 @@ +export * from './model' \ No newline at end of file @@ -0,0 +1,27 @@ +// @ts-nocheck +export class EventBus { + private eventObject: object = {}; + + publish(eventName: string, data?: any) { + const callbackList = this.eventObject[eventName]; + + if (!callbackList) return console.warn(eventName + ' not found!'); + + if(typeof data === 'object'){ + data = JSON.stringify(data); + } + + for (let callback of callbackList) { + callback(data); + } + } + subscribe(eventName: string, callback: (data: any) => void) { + if (!this.eventObject[eventName]) { + this.eventObject[eventName] = []; + } + + this.eventObject[eventName].push(callback); + } +} + +export const eventBus = new EventBus(); @@ -0,0 +1 @@ +export * from './event-bus' \ No newline at end of file @@ -0,0 +1 @@ +export * from './model' \ No newline at end of file @@ -0,0 +1,2 @@ +export * from './async-queue' +export * from './event-bus' \ No newline at end of file @@ -0,0 +1 @@ +export * from './load-file-types' \ No newline at end of file @@ -0,0 +1,10 @@ +export const acceptTypes: Record = { + image: 'image/png,image/jpeg', + zip: 'application/zip', + pdf: 'application/pdf', + docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', + doc: 'application/msword', + audio: 'audio/*', + txt: '.txt', + text: null, +} @@ -0,0 +1,54 @@ +import React, { useMemo, useRef } from 'react' +import { acceptTypes } from '../config' +import PinnedFileSvg from '#/assets/svg/pinned-file.svg?react' +import AttachFileSvg from '#/assets/svg/attach-file.svg?react' + +interface CommonLoadFileProps { + loading: boolean + unpinFile?: () => void + file: File | null | undefined + setFile: (file: File) => void + inputTypes: string[] +} + +export const CommonLoadFile = ({ + loading, + unpinFile, + file, + setFile, + inputTypes, +}: CommonLoadFileProps) => { + const ref = useRef(null) + + if (loading || inputTypes.length === 0) return <> + + return ( + <> + {file ? ( + + ) : ( + <> + { + if (!e.target.files) return + setFile(e.target.files[0]) + }} + alt='Загрузка файла' + /> + + + )} + + ) +} @@ -0,0 +1 @@ +export * from './common-load-file' \ No newline at end of file @@ -0,0 +1 @@ +export * from './ui' \ No newline at end of file @@ -1,9 +1,10 @@ import { RegisterOptions } from 'react-hook-form/dist/types/validator' -const EMAIL_REGEXP = +export const EMAIL_REGEXP = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu -const PHONE_REGEXP = /^((8|\+7)[\- ]?)?($?\d{3}$?[\- ]?)?[\d\- ]{7,10}$/ +export const PHONE_REGEXP = /^((8|\+7)[\- ]?)?($?\d{3}$?[\- ]?)?[\d\- ]{7,10}$/ + export const emailOptions: RegisterOptions = { required: 'Поле email обязательно к заполенению!', @@ -1 +1,2 @@ export { API_HOST, API_URL, ModelPagesList, surpriseMePrompts } from './constants' +export * from './hook-form-options' \ No newline at end of file @@ -0,0 +1,101 @@ +const API_URL = process.env.NEXT_PUBLIC_API_HOST + +import { EventSourcePolyfill } from 'event-source-polyfill' +import { useSession } from 'next-auth/react' +import { useEventStore } from './events-store' + +export function useEventSource() { + const { events, setEvents } = useEventStore() + + const { data } = useSession() + + function event(name: string, src: string, callback?: (value: T) => void) { + if (!API_URL) return + + const url = API_URL.slice(-1) !== '/' ? API_URL : API_URL.slice(-1) + + const { events } = useEventStore.getState() + + setEvents([ + ...events, + { + name, + obj: new EventSourcePolyfill(`${url}/${src}`, { + headers: { Authorization: `Bearer ${data?.access}` }, + }), + }, + ]) + + if (callback) { + addEventCallback(name, callback) + } + } + + function addCloseEvent(name: string, callback: EventListenerOrEventListenerObject) { + const { events } = useEventStore.getState() + + const index = events.findIndex((e) => e.name === name) + + if (index === -1) return false + + events[index].obj.addEventListener('error', callback) + + return true + } + + function closeEvent(name: string): boolean { + const { events } = useEventStore.getState() + + const index = events.findIndex((e) => e.name === name) + + if (index === -1) return false + + events[index].obj.close() + + setEvents([...events.filter((x) => x.name !== name)]) + + return true + } + + function addEventCallback(name: string, callback: (value: T) => void) { + const { events } = useEventStore.getState() + const event = events.find((e) => e.name === name) + + if (!event) { + throw new Error('Event not found') + } + + event.obj.addEventListener('error', (error) => { + ;(error.target as any).close() + const { events } = useEventStore.getState() + setEvents(events.filter((x) => x.name !== event.name)) + }) + + event.obj.addEventListener('message', (event) => { + callback(JSON.parse(event.data)) + }) + } + + function addOpenCallback(name: string, callback: (value: Event) => void) { + const { events } = useEventStore.getState() + + const event = events.find((e) => e.name === name) + + if (!event) { + throw new Error('Event not found') + } + + event.obj.addEventListener('open', (e) => { + callback(e) + }) + } + + return { + event, + addEventCallback, + addOpenCallback, + closeEvent, + events, + addCloseEvent, + } +} @@ -0,0 +1,18 @@ +import { create } from 'zustand' +import { Event } from '../types' + +export interface EventsStore { + events: Event[] + setEvents: (events: Event[]) => void +} + +export const useEventStore = create((set, get) => { + function setEvents(events: Event[]) { + set({ ...get, events }) + } + + return { + events: [], + setEvents, + } +}) @@ -0,0 +1,2 @@ +export * from './event-source' +export * from './events-store' \ No newline at end of file @@ -0,0 +1,4 @@ +export interface Event { + name: string + obj: EventSource +} @@ -0,0 +1 @@ +export * from './event' \ No newline at end of file @@ -0,0 +1,2 @@ +export * from './model' +export * from './types' \ No newline at end of file @@ -0,0 +1,13 @@ +import { useContext } from "react" + +export function createUseContext(context: React.Context) { + return () => { + const contextValue = useContext(context) + if (!contextValue) { + throw new Error("useContext must be inside a Provider with a value") + } + return contextValue + } +} + + @@ -1,5 +1,18 @@ export function formatAndSortDates(inputArray: { date: string; value: number }[]) { - const monthNames = ['янв', 'фев', 'мар', 'апр', 'май', 'июн', 'июл', 'авг', 'сен', 'окт', 'ноя', 'дек'] + const monthNames = [ + 'янв', + 'фев', + 'мар', + 'апр', + 'май', + 'июн', + 'июл', + 'авг', + 'сен', + 'окт', + 'ноя', + 'дек', + ] const formattedData = inputArray.map((item: any) => { const date = new Date(item.date) @@ -23,14 +36,14 @@ export function formatAndSortDates(inputArray: { date: string; value: number }[] } export function formatDate( - date: string | number | Date, - options: Intl.DateTimeFormatOptions, - lang?: string + date: string | number | Date, + options: Intl.DateTimeFormatOptions, + lang?: string ) { - if (typeof date !== "object") { - date = new Date(typeof date === "number" ? date : Date.parse(date)) - } + if (typeof date !== 'object') { + date = new Date(typeof date === 'number' ? date : Date.parse(date)) + } - const formatter = Intl.DateTimeFormat("ru", options) - return formatter.format(date) + const formatter = Intl.DateTimeFormat('ru', options) + return formatter.format(date) } @@ -0,0 +1,63 @@ +export async function getBlobFromUrl(url: string) { + const extension = url.match(/\.(\w+)\?/) + + if (!extension) return + + const buffer = await fetch(url).then((res) => res.arrayBuffer()) + + return new File([buffer], `file.${extension[1]}`) +} + +export function fileIsLink(file: string | null) { + if (!file) return false + + return file.includes('http') +} + +export function fileIsBase64(file: string | null) { + if (!file) return false + + return file.includes('base64') +} + +export function addBase64Padding(str: string) { + // debugger + const paddingNeeded = str.length % 3 + + if (paddingNeeded > 0) { + return str + '='.repeat(3 - paddingNeeded) + } + + return str +} + +export function validateBase64(base64String: string) { + // Удаляем пробелы, проверяем на наличие недопустимых символов + const cleanedString = base64String.replace(/\s/g, '').replace(/=+$/, '') + const validBase64Regex = /^[A-Za-z0-9+/]*[=]{0,2}$/ + + return validBase64Regex.test(cleanedString) +} + +export function base64Decode(str: string) { + const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=' + let output = '' + str = str.replace(/[^A-Za-z0-9+/=]/g, '') // Удаляем недопустимые символы + + for (let i = 0; i < str.length; i += 4) { + const encoded1 = chars.indexOf(str.charAt(i)) + const encoded2 = chars.indexOf(str.charAt(i + 1)) + const encoded3 = chars.indexOf(str.charAt(i + 2)) + const encoded4 = chars.indexOf(str.charAt(i + 3)) + + const byte1 = (encoded1 << 2) | (encoded2 >> 4) + const byte2 = ((encoded2 & 15) << 4) | (encoded3 >> 2) + const byte3 = ((encoded3 & 3) << 6) | encoded4 + + output += String.fromCharCode(byte1) + if (encoded3 !== 64) output += String.fromCharCode(byte2) + if (encoded4 !== 64) output += String.fromCharCode(byte3) + } + + return output +} @@ -0,0 +1,32 @@ +import { FieldValues, UseFormSetValue, UseFormTrigger } from "react-hook-form" + +export function makeShouldDirtySetValue( + setValue: UseFormSetValue +) { + return (...params: Parameters) => { + params[2] = { shouldDirty: true } + return setValue(...params) + } +} + +export function makeTriggeredSetValue( + setValue: UseFormSetValue, + trigger: UseFormTrigger +) { + return (...params: Parameters) => { + setValue(...params) + trigger(params[0]) + return + } +} + +export function objectToFormdata(object: Record) { + const formData = new FormData() + + Object.entries(object).forEach(([k, v]) => { + if (typeof v !== "object" || v instanceof File) return formData.append(k, v) + return formData.append(k, JSON.stringify(v)) + }) + + return formData +} @@ -0,0 +1,12 @@ +export function getImageResolution(url: string): Promise<{ width: number; height: number }> { + return new Promise((resolve, reject) => { + const img = new Image() + img.onload = () => { + resolve({ width: img.width, height: img.height }) + } + img.onerror = () => { + reject(new Error('Не удалось загрузить изображение')) + } + img.src = url + }) +} @@ -5,3 +5,8 @@ export * from './get-type-device' export * from './get-random-image' export * from './string' export * from './date-helper' +export * from './object' +export * from './image' +export * from './file' +export * from './pending' +export * from './context' @@ -0,0 +1,6 @@ +export function keysToValues(obj: Record) { + return Object.keys(obj).reduce( + (prev, curr) => ({ ...prev, [obj[curr]]: curr }), + {} as Record + ) +} @@ -0,0 +1,20 @@ +import { useState } from 'react' + +export function withPending( + callback: (...params: Params) => Promise +): [(...params: Params) => Promise, boolean] { + const [pending, setPending] = useState(false) + + return [ + async (...params: Params) => { + setPending(true) + + const result = await callback(...params) + + setPending(false) + + return result + }, + pending, + ] +} @@ -0,0 +1,12 @@ +import { RefObject } from 'react' + +export function isBottom( + ref: RefObject, + scrollableRef: RefObject, + offset: number = 80 +) { + const [{ current }, { current: refCurrent }] = [scrollableRef, ref] + if (!current || !refCurrent) return false + + return current.offsetHeight - refCurrent.offsetTop < offset +} @@ -11,3 +11,20 @@ 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) +} + +export function stringIsImage(str: string | null | undefined) { + if (!str) return false + return /\.jpg|\.png|\.jpeg|\.gif|\.webp|\.svg|\.wav/.test(str) +} + +export function cutString(str: string | null | undefined, length: number, postfix = '...') { + if (!str) return null + + return str.length > length ? str.slice(0, length) + postfix : str +} @@ -1,2 +1,3 @@ export { useAutoScroll } from './use-auto-scroll' export { useThemeAndDevice } from './use-theme-and-device' +export * from './use-show-data' \ No newline at end of file @@ -1,26 +1,12 @@ import { useEffect } from 'react' import { useRouter } from 'next/router' -// этот хук проверяет используется ли Telegram Web App - export const useBlockTelegram = () => { - const router = useRouter() + const { replace, pathname: path } = useRouter() useEffect(() => { - if (typeof window === 'undefined') return - - try { - if ( - typeof window !== 'undefined' && - 'Telegram' in window && - (window as any).Telegram?.WebApp && - router.pathname !== '/telegram-blocked' - ) { - router.replace('/telegram-blocked') - } else { - } - } catch (err) { - console.error('Ошибка при проверке WebApp:', err) - } - }, [router]) + // @ts-ignore + if (window.Telegram && window.Telegram.WebApp && path !== '/telegram-blocked') + replace('/telegram-blocked') + }, []) } @@ -1,11 +1,12 @@ import { useAppSelector } from '#/app/store/store' +import { getDeviceType } from '../helpers' import { DeviceOs } from '../types/entities' -export const useThemeAndDevice = (device?: 'desktop' | 'mobile', deviceOs?: DeviceOs) => { +export const useThemeAndDevice = (device: 'desktop' | 'mobile' = getDeviceType(), deviceOs?: DeviceOs) => { const theme = useAppSelector((state) => state.theme.theme) const desktop = device === 'desktop' const ios = deviceOs === 'ios' - return { theme, desktop, ios } + return { theme, desktop, ios, device } } @@ -1,7 +1,8 @@ import React from 'react' -import { IModelInputs } from '#/shared/api/models/models' +import { ModelInputs } from '#/shared/api/models/models' import { Device, DeviceOs } from '#/shared/lib/types/entities' +import { Message } from '#/entities/message' export type MessageSend = { content: string @@ -9,18 +10,6 @@ export type MessageSend = { info: T } -export type Message = { - content: string - created_at: string - elapsed_time: string - file: File | null | string - from_model: boolean - info: null - is_favourite: boolean - is_sent: boolean - uid: string -} - /* Дополнительные элементы в Инпуте **/ type Elements = { element: React.ReactElement @@ -43,7 +32,7 @@ export type ChatProps = { elements?: Elements[] model?: string getMessagesPagination?: () => Promise - input_types?: IModelInputs[] + input_types?: ModelInputs[] deleteMessage: (message_uid: string) => void modelTitle: string | undefined currentVersion: string @@ -0,0 +1,44 @@ +.main { + width: 100%; + display: flex; + justify-content: flex-start; + gap: 20px; + margin-bottom: 24px; + + .chatWindow { + width: 70%; + } + + .settings { + width: 25%; + } + + @media (max-width: 768px) { + width: 100%; + display: flex; + + flex-direction: column-reverse; + + .chatWindow { + width: 100%; + } + + .settings { + width: 100%; + } + } +} +.wrapModelTitle { + margin-bottom: 20px; + margin-top: 15px; + @media (max-width: 768px) { + margin: 0; + margin-top: 15px; + } +} + +.bigTitle { + @media (max-width: 768px) { + font-size: 26px !important; + } +} @@ -2,8 +2,11 @@ border: none; outline: none; background-color: transparent; - padding: 15px 25px; + padding: 16px 25px; cursor: pointer; + display: flex; + align-items: center; + justify-content: center; &_outline { border-radius: 15px; @@ -47,13 +50,10 @@ color: white; border-radius: 12px; font-weight: 500; - font-size: 15px; + font-size: 16px; transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; &:hover { background-color: var(--text-color-purple); - &:hover { - opacity: 0.7; - } } } @@ -73,6 +73,6 @@ html[data-theme='dark'] { .button_gray { color: white !important; - background-color: #5d5a5a !important; + background-color: #D9D9D91A !important; } } @@ -8,7 +8,13 @@ export interface CommonButtonProps extends React.ButtonHTMLAttributes { +export const CommonButton = ({ + children, + variant = 'outline', + className, + disabled, + ...props +}: CommonButtonProps) => { return ( + ) +} @@ -0,0 +1 @@ +export * from './common-send-button' \ No newline at end of file @@ -0,0 +1 @@ +export * from './ui' \ No newline at end of file @@ -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' @@ -14,12 +15,27 @@ export interface CommonTextAreaProps extends React.TextareaHTMLAttributes( - ({ showError = true, buttomSlot, label, error, className, disabled, trim = false, variant = 'default', ...props }, ref) => { + ( + { + showError = true, + buttomSlot, + label, + error, + className, + disabled, + trim = false, + variant = 'default', + wrapperClassName, + ...props + }, + ref + ) => { const onChange = (event: React.ChangeEvent) => { event.target.value = trim ? event.target.value.trim() : event.target.value } @@ -27,14 +43,25 @@ export const CommonTextArea = forwardRef

- {label && {label}} + {label && ( + + {label} + + )}

{buttomSlot}
 				</div>
-				{showError && <p className={c(styles.header__error, error && styles.header__error_visible)}>{error ? error?.message : ''}</p>}
+				{showError && (
+					<p
+						className={c(
+							styles.header__error,
+							error && styles.header__error_visible
+						)}
+					>
+						{error ? error?.message : ''}
+					</p>
+				)}
 			</div>
 		)
 	}
@@ -0,0 +1 @@
+export * from './loader'
\ No newline at end of file
@@ -1,14 +1,16 @@
 import React from 'react'
-import CircularProgress from '@mui/material/CircularProgress'
+import CircularProgress, { CircularProgressProps } from '@mui/material/CircularProgress'
 
-export const Loader = (props: any) => {
+export interface LoaderProps extends CircularProgressProps {}
+
+export const Loader = ({ size = 25, thickness = 2, ...props }: LoaderProps) => {
 	return (
 		<CircularProgress
-			size={25}
-			thickness={2}
 			sx={{
 				color: '#7F7DF3',
 			}}
+			size={25}
+			thickness={2}
 			{...props}
 		/>
 	)
@@ -0,0 +1 @@
+export * from './ui'
\ No newline at end of file
@@ -0,0 +1,25 @@
+@keyframes scroll {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-100%);
+  }
+}
+
+.marque{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+  max-height: 100dvh;
+  gap: 10px;
+  &__wrap{
+    width: 100%;
+    height: max-content;
+    gap: 10px;
+    display: flex;
+    flex-direction: column;
+    animation: scroll var(--scroll-time) linear infinite;
+  }
+}
\ No newline at end of file
@@ -0,0 +1,30 @@
+import React, { useEffect, useRef } from 'react'
+import styles from './common-marque.module.scss'
+import { c } from '#/shared/lib/helpers'
+
+interface CommonMarqueProps {
+	children: React.ReactNode
+	className?: string
+	speed?: number
+	scrollTime?: number
+}
+
+export const CommonMarque = ({
+	children,
+	className,
+	scrollTime = 20,
+}: CommonMarqueProps) => {
+	const container = useRef<HTMLDivElement | null>(null)
+
+	useEffect(() => {
+    if(!container.current) return
+    container.current.style.setProperty('--scroll-time', `${scrollTime}s`)
+  }, [])
+
+	return (
+		<div ref={container} className={c(styles.marque, className)}>
+    <div className={styles.marque__wrap}>{children}</div>
+			<div className={styles.marque__wrap}>{children}</div>
+		</div>
+	)
+}
@@ -0,0 +1 @@
+export * from './common-marque'
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './ui'
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './popup.config'
\ No newline at end of file
@@ -0,0 +1,6 @@
+export const POPUP_UPSCALE_SETTINGS = 'popup-upscale-settings'
+export const POPUP_IMAGE_SETTINGS = 'popup-image-settings'
+export const POPUP_IMAGE_MODEL = 'popup-image-model'
+export const POPUP_USER_MESSAGE_ACTIONS = 'popup-user-message-actions'
+export const POPUP_CHAT_BOT_PARAMS = 'popup-chat-bot-params'
+export const POPUP_IMAGE_BOT_PARAMS = 'popup-image-bot-params'
@@ -0,0 +1 @@
+export * from './store.popup'
\ No newline at end of file
@@ -0,0 +1,100 @@
+import { create } from 'zustand'
+
+type Set = {
+	(partial: (state: PopupStore) => Partial<PopupStore>): void
+}
+
+type Get = () => PopupStore
+
+function makePopupInstance(set: Set, get: Get, key: string) {
+	const PopupInstance: Popup = {
+		id: key,
+		state: false,
+		store: {},
+		setState(state, store) {
+			const popups = get().popups
+
+			store = store ?? {}
+
+			set(() => ({
+				popups: {
+					...popups,
+					[this.id]: { ...popups[key], state, store },
+				},
+			}))
+		},
+		toogleState(store) {
+			const popups = get().popups
+
+			this.setState(!popups[this.id].state, store)
+		},
+		setStoreProperty(key, value) {
+			const popups = get().popups
+
+			this.store[key] = value
+
+			set(() => ({
+				popups: {
+					...popups,
+					[this.id]: { ...popups[key], store: this.store },
+				},
+			}))
+		},
+		getStoreProperty(key) {
+			return this.store[key]
+		},
+	}
+
+	return PopupInstance
+}
+
+export interface Popup {
+	id: string
+	state: boolean
+	store: Record<string, any>
+	setState: (state: boolean, store?: Record<string, any>) => void
+	toogleState: (store?: Record<string, any>) => void
+	setStoreProperty: (key: string, value: any) => void
+	getStoreProperty: <T = any>(key: string) => T | undefined
+}
+
+export interface PopupStore {
+	popups: Record<string, Popup>
+	setPopup: (key: string) => void
+	getPopup: (key: string) => Popup
+	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,
+				[key]: Object.assign({}, makePopupInstance(set, get, key)),
+			},
+		}))
+	}
+
+	function hideAllPopups() {
+		set((state) => ({
+			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 {
+		popups,
+		setPopup,
+		getPopup,
+		hideAllPopups,
+	}
+})
@@ -0,0 +1,18 @@
+.backdrop {
+	visibility: hidden;
+	opacity: 0;
+	transition: visibility 0.3s ease-in-out, opacity 0.2s ease-in-out;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+
+  &_open {
+    visibility: visible;
+    opacity: 1;
+    z-index: 1000000;
+  }
+	@media screen and (max-width: 1000px) {
+	}
+}
@@ -0,0 +1,26 @@
+import React, { useEffect, useMemo } from 'react'
+
+import styles from './backdrop.module.scss'
+import { usePopupStore } from '../model'
+import { c } from '#/shared/lib/helpers'
+
+export const PopupBackdrop = () => {
+	const { popups, hideAllPopups } = usePopupStore()
+
+	const someIsOpened = useMemo(() => Object.values(popups).some((popup) => popup.state), [popups])
+
+	useEffect(() => {
+		if (someIsOpened) document.body.style.overflow = 'hidden'
+		else document.body.style.overflow = 'auto'
+	}, [someIsOpened])
+
+	return (
+		<div
+			onWheel={(e) => e.stopPropagation()}
+			onMouseEnter={(e) => e.stopPropagation()}
+			onMouseLeave={(e) => e.stopPropagation()}
+			onClick={() => hideAllPopups()}
+			className={c(styles.backdrop, someIsOpened && styles.backdrop_open)}
+		></div>
+	)
+}
@@ -0,0 +1,2 @@
+export * from './template'
+export * from './backdrop'
@@ -0,0 +1,89 @@
+.popup {
+	display: flex;
+	flex-direction: column;
+	position: absolute;
+	width: fit-content;
+	min-width: 100px;
+	min-height: 70px;
+	transition: opacity 0.3s ease-in-out;
+	z-index: 10000000;
+
+	&_exiting {
+		visibility: hidden;
+		opacity: 0;
+	}
+
+	&_exited {
+		visibility: hidden;
+		opacity: 0;
+	}
+
+	&_entered {
+		opacity: 1;
+		visibility: visible;
+	}
+
+	&_mobtransform {
+		width: 100vw;
+		max-height: 80dvh;
+		min-height: 12dvh;
+		position: fixed;
+		bottom: 0 !important;
+		left: 0 !important;
+		right: 0 !important;
+		top: unset !important;
+		z-index: 10000000;
+		overflow-y: scroll;
+		overflow-x: hidden;
+		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;
+
+		* {
+			font-size: 16px;
+		}
+
+		&_exiting {
+			transform: translateY(100%) !important;
+			visibility: hidden;
+			opacity: 0;
+		}
+
+		&_exited {
+			transform: translateY(100%) !important;
+			visibility: hidden;
+			opacity: 0;
+		}
+
+		&_entered {
+			transform: translateY(0%) !important;
+			visibility: visible;
+			left: 0 !important;
+			opacity: 1;
+		}
+	}
+
+	&_horizontal {
+		&-left {
+		}
+		&-right {
+			transform: translateX(-100%);
+		}
+		&-center {
+			transform: translateX(-50%);
+		}
+	}
+
+	&_primary {
+		background-color: var(--new-ui-main-color);
+		border-radius: 15px;
+		padding: 30px;
+		border: 1px solid rgba($color: #a4aab5, $alpha: 0.1);
+	}
+}
+
+.flag {
+	width: 0px;
+	height: 0px;
+}
@@ -0,0 +1,111 @@
+import React, { RefObject, memo, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import styles from './template.module.scss'
+import { c } from '#/shared/lib/helpers'
+import { usePopupStore } from '../model'
+import { ClientOnly } from '#/shared/client-only'
+import { createPortal } from 'react-dom'
+import { Transition, TransitionStatus } from 'react-transition-group'
+
+export type PopupTemplateVariant = 'primary'
+
+export type PopupTemplateVertical = 'top' | 'bottom'
+
+export type PoputTemplateHorizontal = 'left' | 'right' | 'center'
+
+export interface PopupTemplateProps extends React.HTMLAttributes<HTMLDivElement> {
+	id: string
+	variant?: PopupTemplateVariant
+	className?: string
+	horizontal?: PoputTemplateHorizontal
+	hasMobileTransform?: boolean
+	onlyMobile?: boolean
+}
+
+export interface Cordinates {
+	flagRef: RefObject<HTMLElement>
+}
+
+const Template = memo(
+	({
+		id,
+		children,
+		className,
+		variant = 'primary',
+		horizontal = 'center',
+		hasMobileTransform = false,
+		flagRef,
+		...props
+	}: PopupTemplateProps & Cordinates) => {
+		const { setPopup, getPopup } = usePopupStore()
+
+		const isMobile = useMemo(() => window.innerWidth < 1000, [])
+
+		const modal = getPopup(id)
+
+		useEffect(() => setPopup(id), [])
+
+		const nodeRef = useRef<HTMLDivElement>(null)
+
+		const [cordinates, setCordinates] = useState<{ left: number; top: number } | null>(null)
+
+		useLayoutEffect(() => {
+			if (!flagRef.current || !nodeRef.current) return
+
+			const rect = flagRef.current.getBoundingClientRect()
+			const popup = nodeRef.current.getBoundingClientRect()
+			const viewportRight = window.visualViewport?.width ?? window.innerWidth
+
+			if (rect.left + popup.width > viewportRight) {
+				const left = rect.left - (rect.left + popup.width - viewportRight)
+				setCordinates({ left, top: rect.top })
+			} else {
+				setCordinates({ left: rect.left, top: rect.top })
+			}
+		}, [modal.state])
+
+		return (
+			<Transition timeout={400} in={modal.state} unmountOnExit nodeRef={nodeRef}>
+				{(state) => (
+					<div
+						onWheel={(e) => e.stopPropagation()}
+						ref={nodeRef}
+						style={{
+							left: cordinates ? cordinates.left : 0,
+							top: cordinates ? cordinates.top : 0,
+							transform: horizontal === 'center' && !isMobile ? 'translateX(-50%)' : 'auto',
+						}}
+						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>
+			<>
+				{createPortal(
+					<Template flagRef={ref} {...props} />,
+					document.getElementById('popup-container')!
+				)}
+				<div ref={ref} className={c(styles.flag)}></div>
+			</>
+		</ClientOnly>
+	)
+})
@@ -0,0 +1,10 @@
+import { usePopupStore } from './model'
+
+export * from './ui'
+export * from './model'
+export * from './config'
+
+export function getPopupById(id: string) {
+	const { getPopup } = usePopupStore()
+	return getPopup(id)
+}
@@ -0,0 +1,67 @@
+import { min, max } from 'lodash'
+import { useEffect, useRef, useState } from 'react'
+
+const getPrecision = (num: number) => {
+	const s = num.toString()
+	const decimal = s.split('.')[1]
+	return decimal ? decimal.length : 0
+}
+
+interface RangeSlider {
+	value: number
+	onChange: (value: number) => void
+	min: number
+	max: number
+	step: number
+}
+
+export const useRangeSlider = ({ value, onChange, min, max, step }: RangeSlider) => {
+	const trackRef = useRef<HTMLDivElement>(null)
+	const [isDragging, setIsDragging] = useState(false)
+
+	const percent = ((value - min) / (max - min)) * 100
+
+	const updateValueFromPos = (clientX: number) => {
+		const rect = trackRef.current?.getBoundingClientRect()
+		if (!rect) return
+
+		// debugger
+
+		const relativeX = Math.min(Math.max(clientX - rect.left, 0), rect.width)
+		const ratio = relativeX / rect.width
+		const rawValue = min + ratio * (max - min)
+		const steppedValue = Math.round(rawValue / step) * step
+		const precision = getPrecision(step)
+		const newValue = parseFloat(steppedValue.toFixed(precision))
+
+		onChange(newValue)
+	}
+
+	const handleMouseMove = (e: MouseEvent) => {
+		if (isDragging) updateValueFromPos(e.clientX)
+	}
+
+	const handleTouchMove = (e: TouchEvent) => {
+		if (isDragging) updateValueFromPos(e.touches[0].clientX)
+	}
+
+	useEffect(() => {
+		window.addEventListener('mousemove', handleMouseMove)
+		window.addEventListener('mouseup', () => setIsDragging(false))
+		window.addEventListener('touchmove', handleTouchMove)
+		window.addEventListener('touchend', () => setIsDragging(false))
+		return () => {
+			window.removeEventListener('mousemove', handleMouseMove)
+			window.removeEventListener('mouseup', () => setIsDragging(false))
+			window.removeEventListener('touchmove', handleTouchMove)
+			window.removeEventListener('touchend', () => setIsDragging(false))
+		}
+	}, [isDragging])
+
+	return {
+		trackRef,
+		setIsDragging,
+		updateValueFromPos,
+		percent,
+	}
+}
@@ -0,0 +1 @@
+export * from './range-slider'
\ No newline at end of file
@@ -0,0 +1,63 @@
+.header {
+	display: flex;
+	justify-content: space-between;
+
+	&__value {
+		color: #8280ff;
+		font-size: 15px;
+		font-weight: 600;
+		margin-top: 0.5;
+		margin-left: 16px;
+	}
+}
+
+.slider {
+	display: flex;
+	justify-content: center;
+	margin-top: 13px;
+	width: 100%;
+	height: 4px;
+	padding: 0px 9px;
+	background-color: #eff0f294;
+	border-radius: 3px;
+	cursor: pointer;
+	user-select: none;
+
+	&__track {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		border-radius: 3px;
+		z-index: 0;
+	}
+
+	&__thumb {
+		position: absolute;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		width: 18px;
+		height: 18px;
+		background-color: #fff;
+		border: 2px solid #7f7df3;
+		border-radius: 50%;
+		transition: left 0.15s ease-out;
+		z-index: 1;
+
+		&:hover {
+			box-shadow: 0 0 0 5px rgba(127, 125, 243, 0.2);
+		}
+		&:active {
+			box-shadow: 0 0 0 8px rgba(127, 125, 243, 0.2);
+		}
+	}
+}
+
+html[data-theme='dark'] {
+	.slider {
+		background-color: #40404e;
+		&__thumb {
+			background-color: #373737;
+			border: 2px solid #7f7df3;
+		}
+	}
+}
@@ -0,0 +1,48 @@
+import React, { useEffect } from 'react'
+import styles from './range-slider.module.scss'
+import { useRangeSlider } from '../model/use-range-slider'
+
+interface RangeSlider {
+	value: number
+	title: string
+	onChange: (value: number) => void
+	min: number
+	max: number
+	step: number
+}
+
+export const RangeSlider = ({ value, title, onChange, min, max, step }: RangeSlider) => {
+	const { trackRef, setIsDragging, updateValueFromPos, percent } = useRangeSlider({
+		value,
+		onChange,
+		min,
+		max,
+		step,
+	})
+
+	return (
+		<>
+			<div className={styles.header}>
+				<p className='title-main-gray'>{title}</p>
+				<p className={styles.header__value}>{value}</p>
+			</div>
+
+			<div
+				className={styles.slider}
+				ref={trackRef}
+				onMouseDown={(e) => {
+					setIsDragging(true)
+					updateValueFromPos(e.clientX)
+				}}
+				onTouchStart={(e) => {
+					setIsDragging(true)
+					updateValueFromPos(e.touches[0].clientX)
+				}}
+			>
+				<div className={styles.slider__track}>
+					<div className={styles.slider__thumb} style={{ left: `${percent}%` }} />
+				</div>
+			</div>
+		</>
+	)
+}
@@ -0,0 +1 @@
+export * from './ui'
\ No newline at end of file
@@ -0,0 +1,3 @@
+export * from './use-listeners-wheel'
+export * from './use-listeners-thumbnail'
+export * from './use-hovered'
\ No newline at end of file
@@ -0,0 +1,12 @@
+import { MutableRefObject, useEffect, useRef, useState } from 'react'
+
+export function useGenerallScroll(containerRef: MutableRefObject<HTMLDivElement | null>) {
+	function scrollToBottom() {
+		if (!containerRef.current) return
+		containerRef.current.style.transform = `translateY(0px)`
+	}
+
+	return {
+		scrollToBottom,
+	}
+}
@@ -0,0 +1,23 @@
+import { MouseEventHandler, useState } from 'react'
+
+export function useHovered() {
+	const [hovered, setHovered] = useState(false)
+
+	const onMounseEnter: MouseEventHandler<HTMLDivElement> = (e) => {
+		e.stopPropagation()
+		document.body.style.overflow = 'hidden'
+		setHovered(true)
+	}
+
+	const onMouseLeave: MouseEventHandler<HTMLDivElement> = (e) => {
+		e.stopPropagation()
+		document.body.style.overflow = 'visible'
+		setHovered(false)
+	}
+
+	return {
+		onMounseEnter,
+		onMouseLeave,
+		hovered,
+	}
+}
@@ -0,0 +1,8 @@
+import { ForwardedRef, MutableRefObject, Ref, useEffect, useMemo, useRef } from 'react'
+
+export function useListenersThumbnail() {
+	const draggbleRef = useRef<HTMLDivElement | null>(null)
+	return {
+		draggbleRef,
+	}
+}
@@ -0,0 +1,242 @@
+// import { AsyncQueue } from '#/shared/classes'
+import {
+	MouseEvent,
+	MutableRefObject,
+	TouchEvent,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+	WheelEventHandler,
+} from 'react'
+
+export function useListenersWheel(
+	containerRef: MutableRefObject<HTMLDivElement | null>,
+	draggbleRef: MutableRefObject<HTMLDivElement | null>,
+	scrollRef: MutableRefObject<HTMLDivElement | null>,
+	onScrolling?: (y: number) => void
+) {
+	const preventScroll = useRef(false)
+	const translateYRef = useRef(0)
+
+	const velocityRef = useRef(0)
+	const animationFrameRef = useRef<number | null>(null)
+
+	const [draggbleHeight, setDraggbleHeight] = useState(100)
+	const isDraggingRef = useRef(false)
+	const startDragYRef = useRef(0)
+	const startTranslateYRef = useRef(0)
+
+	function defineDraggbleHeight() {
+		const container = containerRef.current
+		const { current } = scrollRef
+
+		if (current && container) {
+			setDraggbleHeight((current.clientHeight / container.clientHeight) * 100)
+		}
+	}
+
+	useEffect(() => {
+		defineDraggbleHeight()
+	}, [containerRef.current?.clientHeight])
+
+	const applyTransform = useCallback(() => {
+		const container = containerRef.current
+		const scroll = scrollRef.current
+		const draggable = draggbleRef.current
+
+		if (!container || !scroll || !draggable) return
+
+		container.style.transform = `translateY(${translateYRef.current}px)`
+
+		const proportion = scroll.clientHeight / container.clientHeight
+		draggable.style.transform = `translateY(${
+			-(translateYRef.current * proportion) + scroll.clientHeight - draggable.clientHeight
+		}px)`
+	}, [])
+
+	const clampTranslateY = useCallback(() => {
+		const container = containerRef.current
+		const scroll = scrollRef.current
+
+		if (!container || !scroll) return
+
+		if (translateYRef.current < 0) {
+			translateYRef.current = 0
+		}
+
+		const maxScroll = container.clientHeight - scroll.clientHeight
+		if (translateYRef.current > maxScroll) {
+			translateYRef.current = maxScroll
+		}
+	}, [])
+
+	const animateInertia = useCallback(() => {
+		const friction = 0.95
+		const minVelocity = 0.5
+
+		const step = () => {
+			if (Math.abs(velocityRef.current) > minVelocity) {
+				translateYRef.current -= velocityRef.current
+				clampTranslateY()
+				applyTransform()
+				velocityRef.current *= friction
+				animationFrameRef.current = requestAnimationFrame(step)
+			} else {
+				velocityRef.current = 0
+				if (animationFrameRef.current) {
+					cancelAnimationFrame(animationFrameRef.current)
+				}
+			}
+		}
+
+		step()
+	}, [applyTransform, clampTranslateY])
+
+	const onWheelCallback = useCallback<WheelEventHandler>(
+		async (e) => {
+			if (preventScroll.current) return
+
+			e.preventDefault()
+
+			const scrollSpeed = 1.5
+			const deltaY = e.deltaY * scrollSpeed
+
+			requestAnimationFrame(() => {
+				translateYRef.current -= deltaY
+				onScrolling && onScrolling(translateYRef.current)
+				clampTranslateY()
+				applyTransform()
+				defineDraggbleHeight()
+			})
+		},
+		[clampTranslateY, applyTransform]
+	)
+
+	const touchStartY = useRef<number>(0)
+	const lastTouchY = useRef<number>(0)
+	const lastMoveTime = useRef<number>(0)
+
+	const handleTouchStart = useCallback((e: TouchEvent<HTMLDivElement>) => {
+		e.preventDefault()
+
+		touchStartY.current = e.touches[0].clientY
+		lastTouchY.current = touchStartY.current
+		lastMoveTime.current = Date.now()
+
+		if (animationFrameRef.current) {
+			cancelAnimationFrame(animationFrameRef.current)
+			animationFrameRef.current = null
+			velocityRef.current = 0
+		}
+	}, [])
+
+	const handleTouchMove = useCallback(
+		(e: TouchEvent<HTMLDivElement>) => {
+			e.preventDefault()
+
+			if (preventScroll.current) return
+
+			const currentY = e.touches[0].clientY
+			const deltaY = lastTouchY.current - currentY
+			const now = Date.now()
+			const deltaTime = now - lastMoveTime.current || 16
+
+			velocityRef.current = (deltaY / deltaTime) * 16
+
+			lastTouchY.current = currentY
+			lastMoveTime.current = now
+
+			requestAnimationFrame(() => {
+				translateYRef.current -= deltaY
+				clampTranslateY()
+				applyTransform()
+				defineDraggbleHeight()
+			})
+		},
+		[clampTranslateY, applyTransform]
+	)
+
+	const handleTouchEnd = useCallback(() => {
+		// animateInertia()
+	}, [animateInertia])
+
+	const handleThumbnailClick = useCallback(
+		(e: MouseEvent<HTMLDivElement>) => {
+			if (isDraggingRef.current) return
+
+			const scroll = scrollRef.current
+			const draggable = draggbleRef.current
+			const container = containerRef.current
+
+			if (!scroll || !draggable || !container) return
+
+			const thumbnailRect = e.currentTarget.getBoundingClientRect()
+			const clickPosition = e.clientY - thumbnailRect.top
+			const thumbHeight = draggable.clientHeight
+
+			const newThumbPosition = Math.max(
+				0,
+				Math.min(clickPosition - thumbHeight / 2, scroll.clientHeight - thumbHeight)
+			)
+
+			const proportion = scroll.clientHeight / container.clientHeight
+			translateYRef.current = (scroll.clientHeight - newThumbPosition - thumbHeight) / proportion
+
+			clampTranslateY()
+			applyTransform()
+			onScrolling && onScrolling(translateYRef.current)
+		},
+		[clampTranslateY, applyTransform]
+	)
+
+	const handleThumbMouseDown = useCallback(
+		(e: MouseEvent<HTMLDivElement>) => {
+			e.preventDefault()
+			e.stopPropagation()
+
+			isDraggingRef.current = true
+			startDragYRef.current = e.clientY
+			startTranslateYRef.current = translateYRef.current
+
+			const handleMouseMove = (moveEvent: MouseEvent) => {
+				if (!isDraggingRef.current) return
+
+				const scroll = scrollRef.current
+				const container = containerRef.current
+				if (!scroll || !container) return
+
+				const deltaY = moveEvent.clientY - startDragYRef.current
+				const proportion = scroll.clientHeight / container.clientHeight
+
+				translateYRef.current = startTranslateYRef.current - deltaY / proportion
+				clampTranslateY()
+				applyTransform()
+				onScrolling && onScrolling(translateYRef.current)
+			}
+
+			const handleMouseUp = () => {
+				isDraggingRef.current = false
+				document.removeEventListener('mousemove', handleMouseMove as any)
+				document.removeEventListener('mouseup', handleMouseUp)
+			}
+
+			document.addEventListener('mousemove', handleMouseMove as any)
+			document.addEventListener('mouseup', handleMouseUp)
+		},
+		[clampTranslateY, applyTransform]
+	)
+
+	return {
+		onWheelCallback,
+		preventScroll,
+		translateYRef,
+		draggbleHeight,
+		handleTouchStart,
+		handleTouchMove,
+		handleTouchEnd,
+		handleThumbnailClick,
+		handleThumbMouseDown,
+		isDraggingRef,
+	}
+}
@@ -0,0 +1,43 @@
+.scroll {
+	height: 100%;
+	overflow: hidden;
+	position: relative;
+	will-change: transform;
+	touch-action: none;
+	-webkit-overflow-scrolling: touch;
+
+	&__container {
+		bottom: 0;
+		position: absolute;
+		width: 100%;
+		left: 0;
+		padding-right: 20px;
+		min-height: 100%;
+	}
+
+	&__thumbnail {
+		position: absolute;
+		right: 0px;
+		top: 10px;
+		height: 98%;
+		width: 6px;
+		z-index: 1000;
+		background-color: rgba($color: gray, $alpha: 0.2);
+		display: flex;
+		justify-content: center;
+		border-radius: 2px;
+		transition: all 0.3s ease;
+		opacity: 0;
+
+		&_visible {
+			opacity: 1;
+		}
+	}
+
+	&__draggble {
+		width: 6px;
+		border-radius: 2px;
+		background-color: rgba($color: gray, $alpha: 0.4);
+		bottom: 0;
+	}
+}
@@ -0,0 +1,86 @@
+import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react'
+
+import { useHovered, useListenersThumbnail, useListenersWheel } from '../model'
+import { useGenerallScroll } from '../model/use-generall-scroll'
+
+import styles from './common-scrollbar.module.scss'
+
+import { c } from '#/shared/lib/helpers'
+
+interface CommonScrollbarProps extends React.HTMLAttributes<HTMLDivElement> {
+	blockedScrollTop?: boolean
+	onScrolling?: (y: number) => void
+}
+
+export interface CommonScrollbarRef extends HTMLDivElement {
+	scrollToBottom: () => void
+}
+
+export const CommonScrollbar = forwardRef<CommonScrollbarRef, CommonScrollbarProps>(
+	({ children, className, blockedScrollTop = false, onScrolling, ...props }, ref) => {
+		const containerRef = useRef<HTMLDivElement | null>(null)
+
+		const localRef = useRef<HTMLDivElement | null>(null)
+
+		const { scrollToBottom } = useGenerallScroll(containerRef)
+
+		const { draggbleRef } = useListenersThumbnail()
+
+		const { onMounseEnter, onMouseLeave, hovered } = useHovered()
+
+		const {
+			onWheelCallback,
+			draggbleHeight,
+			handleTouchStart,
+			handleTouchMove,
+			translateYRef,
+			handleThumbnailClick,
+			handleThumbMouseDown,
+		} = useListenersWheel(containerRef, draggbleRef, localRef, onScrolling)
+
+		const translate = useMemo(() => translateYRef.current, [translateYRef])
+
+		useImperativeHandle(ref, () => ({
+			...localRef.current!,
+			scrollToBottom,
+		}))
+
+		return (
+			<div
+				ref={localRef}
+				onMouseEnter={onMounseEnter}
+				onMouseLeave={onMouseLeave}
+				onWheel={onWheelCallback}
+				onTouchStart={handleTouchStart}
+				onTouchMove={handleTouchMove}
+				className={c(styles.scroll, className)}
+				{...props}
+			>
+				<div
+					className={c(styles.scroll__thumbnail, hovered && styles.scroll__thumbnail_visible)}
+					onClick={handleThumbnailClick}
+				>
+					<div
+						ref={draggbleRef}
+						style={{
+							height: draggbleHeight + '%',
+						}}
+						className={styles.scroll__draggble}
+						onMouseDown={handleThumbMouseDown}
+					></div>
+				</div>
+				<div
+					ref={containerRef}
+					style={{ touchAction: 'none', overscrollBehavior: 'contain' }}
+					onTouchMove={(e) => {
+						e.preventDefault()
+						document.body.style.overflow = 'hidden'
+					}}
+					className={c('container', styles.scroll__container)}
+				>
+					{children}
+				</div>
+			</div>
+		)
+	}
+)
@@ -0,0 +1 @@
+export * from './common-scrollbar'
\ No newline at end of file
@@ -0,0 +1,2 @@
+export * from './ui'
+export * from './model'
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './send-button'
\ No newline at end of file
@@ -0,0 +1,9 @@
+.button{
+  background-color: var(--air-color);
+  width: 30px;
+  height: 30px;
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
\ No newline at end of file
@@ -0,0 +1,20 @@
+import React from 'react'
+import CircularProgress from '@mui/material/CircularProgress'
+import SendSvg from '#/assets/svg/send.svg?react'
+import { Loader } from '#/shared/ui/loader'
+import styles from './send-button.module.scss'
+
+interface SendButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	loading: boolean
+}
+
+export const SendBtn = ({ loading, ...props }: SendButtonProps) => {
+	if (loading) {
+		return <Loader size={25} />
+	}
+	return (
+		<button className={styles.button} {...props}>
+			<SendSvg color='white' width={14} height={14} />
+		</button>
+	)
+}
@@ -0,0 +1 @@
+export * from './ui'
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './title' 
\ No newline at end of file
@@ -0,0 +1,47 @@
+.wrap {
+	margin-bottom: 20px;
+	margin-top: 15px;
+	width: 100% !important;
+
+	@media (max-width: 768px) {
+		margin: 0;
+		margin-top: 15px;
+	}
+}
+
+.navigation {
+	display: flex;
+	align-items: center;
+	gap: 1ch;
+	color: var(--new-ui-gray-color);
+
+	@media screen and (max-width: 768px) {
+		margin-bottom: 10px;
+	}
+
+	&__back {
+		font-size: 20px;
+		font-weight: 600;
+		color: var(--new-ui-gray-color);
+	}
+
+	&__current {
+		font-size: 23px;
+		font-weight: 500;
+	}
+}
+
+.box {
+	display: flex;
+	justify-content: space-between;
+
+	&__title {
+		font-size: 35px;
+		font-weight: 600;
+		min-width: max-content !important;
+		@media (max-width: 768px) {
+			display: none;
+			overflow: hidden;
+		}
+	}
+}
@@ -0,0 +1,32 @@
+import React from 'react'
+import Link from 'next/link'
+
+import styles from './title.module.scss'
+import { c } from '#/shared'
+
+export interface CommonTitleProps {
+	type: string
+	title: string
+	linkBack?: string
+	rightSlot?: React.ReactNode
+}
+
+export function CommonTitle({ linkBack, type, title, rightSlot }: CommonTitleProps) {
+	return (
+		<div className={styles.wrap}>
+			{linkBack && (
+				<div className={styles.navigation}>
+					<Link className={c(styles.navigation__back)} href={linkBack}>
+						{type}
+					</Link>
+					<span>•</span>
+					<p className={styles.navigation__current}> {title}</p>
+				</div>
+			)}
+			<div className={c(styles.box)}>
+				<p className={styles.box__title}>{title}</p>
+				<div>{rightSlot}</div>
+			</div>
+		</div>
+	)
+}
@@ -0,0 +1 @@
+export * from './ui'
\ No newline at end of file
@@ -0,0 +1,149 @@
+.wrap {
+	position: relative;
+}
+.tooltip {
+	border-radius: 9px;
+	background: #ececff;
+	color: var(--air-color);
+	padding: 6px 12px;
+	max-width: 340px;
+	width: max-content;
+	position: absolute;
+	left: 50%;
+	font-weight: 500;
+
+	transition: all 0.3s ease-in-out;
+	top: 140%;
+	box-shadow: 0px 0px 4px rgba($color: #000000, $alpha: 0.2);
+
+	&_top {
+		font-size: 15px;
+		left: 50%;
+		top: -170%;
+		transform: translateX(-50%) scale(0.9);
+
+		&_exiting {
+			opacity: 0;
+		}
+
+		&_entered {
+			transform: translateX(-50%) scale(1);
+			opacity: 1;
+		}
+
+		&_entering {
+			transform: translateX(-50%) scale(1);
+			opacity: 1;
+		}
+
+		&::after {
+			background: #ececff;
+			content: '';
+			position: absolute;
+			top: 30px;
+			width: 15px;
+			height: 12px;
+			left: 50%;
+			clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
+			transform: translateX(-50%);
+		}
+	}
+
+	&_bottom {
+		font-size: 15px;
+		left: 50%;
+		top: 140%;
+		transform: translateX(-50%) scale(0.9);
+
+		&_exiting {
+			opacity: 0;
+		}
+
+		&_entered {
+			transform: translateX(-50%) scale(1);
+			opacity: 1;
+		}
+
+		&_entering {
+			transform: translateX(-50%) scale(1);
+			opacity: 1;
+		}
+
+		&::after {
+			background: #ececff;
+			content: '';
+			position: absolute;
+			top: -12px;
+			width: 15px;
+			height: 12px;
+			left: 50%;
+			clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+			transform: translateX(-50%);
+		}
+	}
+
+	&_left {
+		background-color: white;
+		top: 50%;
+		right: 100%;
+		left: unset;
+		padding: 12px 16px;
+		transform: translateY(-50%) scale(0.9);
+
+		&_exiting {
+			opacity: 0;
+		}
+
+		&_entered {
+			transform: translateY(-50%) scale(1);
+			opacity: 1;
+		}
+
+		&_entering {
+			transform: translateY(-50%) scale(1);
+			opacity: 1;
+		}
+
+		&::after {
+			content: '';
+			position: absolute;
+			top: 50%;
+			left: 100%;
+			transform: translateY(-50%);
+			width: 12px;
+			height: 12px;
+			background-color: #ececff;
+			clip-path: polygon(0 0, 100% 50%, 0 100%);
+		}
+	}
+
+	&__heading {
+		font-size: 17px;
+		line-height: 1.5;
+		font-weight: 600;
+		color: rgb(102, 102, 102);
+	}
+	&__description {
+		font-size: 14px;
+		line-height: 1.5;
+		font-weight: 500;
+		color: rgb(134, 134, 134);
+		letter-spacing: 0.1px;
+		margin-top: 8px;
+		width: 200px;
+	}
+}
+
+html[data-theme='dark'] {
+	.tooltip {
+		background-color: #303035;
+
+		&::after {
+			background-color: #303035;
+		}
+
+		&__heading {
+			color: rgb(207, 207, 207);
+		}
+	}
+}
@@ -0,0 +1,68 @@
+import React, { HTMLAttributes, useRef, useState } from 'react'
+
+import styles from './common-tooltip.module.scss'
+import { c } from '#/shared/lib/helpers'
+import { CSSTransition, Transition, TransitionStatus } from 'react-transition-group'
+
+export type CommonTooltipPosition = 'top' | 'bottom' | 'left' | 'right'
+
+export type CommonTooltipVariant = 'descriptor' | 'content'
+
+export interface CommonTooltipProps extends HTMLAttributes<HTMLDivElement> {
+	content?: string | React.ReactNode
+	title?: string
+	description?: string
+	position?: CommonTooltipPosition
+	disabled?: boolean
+	variant?: CommonTooltipVariant
+}
+
+export const CommonTooltip = ({
+	children,
+	content,
+	title,
+	description,
+	className,
+	position = 'bottom',
+	disabled = false,
+	variant = 'content',
+	...props
+}: CommonTooltipProps) => {
+	const [hovered, setHovered] = useState(false)
+
+	const ref = useRef(null)
+
+	return (
+		<div
+			onMouseEnter={() => setHovered(true)}
+			onMouseLeave={() => setHovered(false)}
+			onClick={() => setHovered(false)}
+			className={c(styles.wrap, styles[`wrap_${position}`], className)}
+			{...props}
+		>
+			{children}
+
+			<Transition timeout={300} nodeRef={ref} in={hovered && !disabled} unmountOnExit>
+				{(state) => (
+					<div
+						ref={ref}
+						className={c(
+							styles.tooltip,
+							styles[`tooltip_${position}`],
+							styles[`tooltip_${position}_${state}`]
+						)}
+					>
+						{variant === 'content' ? (
+							content
+						) : (
+							<>
+								<p className={styles.tooltip__heading}>{title}</p>
+								<p className={styles.tooltip__description}>{description}</p>
+							</>
+						)}
+					</div>
+				)}
+			</Transition>
+		</div>
+	)
+}
@@ -0,0 +1 @@
+export * from './common-tooltip'
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './ui'
\ No newline at end of file
@@ -4,6 +4,7 @@ import Router from 'next/router'
 import { signOut, useSession } from 'next-auth/react'
 
 import { useAppSelector } from '#/app/store/store'
+import { useUserSelector } from '#/entities/user-account'
 
 interface IAccountMenu {
 	anchorEl: HTMLElement | null
@@ -11,7 +12,11 @@ interface IAccountMenu {
 	device?: 'mobile' | 'desktop'
 }
 
-export const AccountMenu: React.FC<IAccountMenu> = ({ anchorEl, changeVisible, device = 'desktop' }) => {
+export const AccountMenu: React.FC<IAccountMenu> = ({
+	anchorEl,
+	changeVisible,
+	device = 'desktop',
+}) => {
 	const { data } = useSession()
 	const goAccount = async () => {
 		await Router.push('/account')
@@ -23,7 +28,7 @@ export const AccountMenu: React.FC<IAccountMenu> = ({ anchorEl, changeVisible, d
 
 	const desktop = device === 'desktop'
 
-	const email = useAppSelector((state) => state.user.email)
+	const { email } = useUserSelector()
 
 	return (
 		<Menu
@@ -33,7 +38,9 @@ export const AccountMenu: React.FC<IAccountMenu> = ({ anchorEl, changeVisible, d
 			onClose={() => changeVisible()}
 			PaperProps={{
 				style: {
-					transform: desktop ? 'translateX(-9%) translateY(28%)' : 'translateX(0%) translateY(16%)',
+					transform: desktop
+						? 'translateX(-9%) translateY(28%)'
+						: 'translateX(0%) translateY(16%)',
 					borderRadius: desktop ? 10 : '0px 0px 15px 15px',
 					marginTop: desktop ? 0 : 12,
 				},
@@ -8,8 +8,7 @@ interface ICheckBoxAgreeWithRulesProps {
 	changeAgree?: () => void
 	isAgreeError?: boolean
 	register?: UseFormRegister<any>
-	name?: string
-	isEmailWhite: boolean
+	name: string
 }
 
 export const CheckBoxAgreeWithRules: React.FC<ICheckBoxAgreeWithRulesProps> = ({
@@ -18,16 +17,13 @@ export const CheckBoxAgreeWithRules: React.FC<ICheckBoxAgreeWithRulesProps> = ({
 	isAgreeError,
 	name,
 	register,
-	isEmailWhite,
 }) => {
 	return (
 		<>
 			<Box display='flex' width='100%'>
 				<Checkbox
 					{...(register
-						? register(name!, {
-								required: !isEmailWhite && 'Примите пользовательское соглашение',
-						  })
+						? register(name)
 						: null)}
 					size='medium'
 					sx={{
@@ -3,9 +3,10 @@ import Image from 'next/image'
 import Link from 'next/link'
 
 import { useAppSelector } from '#/app/store/store'
+import { useUserSelector } from '#/entities/user-account'
 
 export const DemoInfo = () => {
-	const { payment_plan, status } = useAppSelector((state) => state.user)
+	const { payment_plan } = useUserSelector()
 
 	if (Math.floor(+payment_plan?.plan.price) !== 0) {
 		return null
@@ -0,0 +1,303 @@
+import * as React from 'react'
+import { ChangeEvent, useState } from 'react'
+import AttachFileIcon from '@mui/icons-material/AttachFile'
+import CloseIcon from '@mui/icons-material/Close'
+import { Box, Button, Modal, Stack, TextField, Typography } from '@mui/material'
+import axios from 'axios'
+import { useSession } from 'next-auth/react'
+
+import { useAppSelector } from '#/app/store/store'
+import { API_URL } from '#/shared/lib/constants'
+import { useUserSelector } from '#/entities/user-account'
+
+const style = {
+	position: 'absolute' as 'absolute',
+	top: '50%',
+	left: '50%',
+	transform: 'translate(-50%, -50%)',
+	width: 589,
+	height: 'auto',
+	bgcolor: 'background.paper',
+	borderRadius: 5,
+	boxShadow: 16,
+	p: 4,
+}
+const styleSend = {
+	position: 'absolute' as 'absolute',
+	top: '50%',
+	left: '50%',
+	transform: 'translate(-50%, -65%)',
+	width: 300,
+	height: 'auto',
+	bgcolor: 'background.paper',
+	borderRadius: 5,
+	boxShadow: 16,
+	p: 4,
+	textAlign: 'center',
+}
+
+const styleSendDark = {
+	position: 'absolute' as 'absolute',
+	top: '50%',
+	left: '50%',
+	transform: 'translate(-50%, -65%)',
+	width: 300,
+	height: 'auto',
+	bgcolor: '#2B2828',
+	borderRadius: 5,
+	boxShadow: 16,
+	p: 4,
+	textAlign: 'center',
+}
+
+const styleMobile = {
+	position: 'absolute' as 'absolute',
+	top: '50%',
+	left: '50%',
+	transform: 'translate(-50%, -50%)',
+	bgcolor: 'background.paper',
+	p: 4,
+	zIndex: 99,
+}
+
+interface IErrorModal {
+	open: boolean
+	handleClose: () => void
+	device: 'mobile' | 'desktop'
+}
+
+const ErrorModal: React.FC<IErrorModal> = ({ open, handleClose, device }) => {
+	const [errorMessage, setErrorMessage] = React.useState<string>('')
+
+	const [error, setError] = React.useState(false)
+
+	const [isSend, setIsSend] = React.useState(false)
+
+	const [file, setFile] = React.useState<File>()
+
+	const { data: session } = useSession()
+
+	const { email } = useUserSelector()
+
+	const theme = useAppSelector((state) => state.theme.theme)
+
+	const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+		if (e.target.files) {
+			if (4500000 > e.target.files[0].size) setFile(e.target.files[0])
+		}
+	}
+	const sendError = async () => {
+		if (errorMessage.trim() === '') {
+			setError(true)
+			setTimeout(() => setError(false), 3000)
+			return
+		}
+
+		let formData: any = new FormData()
+
+		formData.append('report_text', `${email}: ${errorMessage}`) //append the values with key, value pair
+		if (file) {
+			formData.append('images', file)
+		}
+
+		try {
+			const { status } = await axios.post(API_URL + '/reports/', formData, {
+				headers: {
+					'content-type': 'multipart/form-data ',
+					'content-length': file ? `${file.size}` : '',
+
+					Authorization: `Bearer ${session?.access}`,
+				},
+			})
+
+			if (status === 201) {
+				setErrorMessage('')
+				setIsSend(true)
+				setTimeout(() => {
+					setIsSend(false)
+					handleClose()
+				}, 4000)
+			}
+		} catch (err) {
+			setError(true)
+			setTimeout(() => setError(false), 3000)
+		}
+	}
+
+	return (
+		<Modal
+			sx={{
+				'.css-hqvkjc': {
+					backgroundColor: theme === 'light' ? '' : '#373737',
+					border: 'none',
+				},
+			}}
+			open={open}
+			onClose={handleClose}
+			aria-labelledby='modal-modal-title'
+			aria-describedby='modal-modal-description'
+		>
+			{isSend ? (
+				<Box sx={theme === 'light' ? styleSend : styleSendDark}>
+					<Typography sx={{ color: '#22B47F', fontSize: '23px' }}>
+						Спасибо!
+					</Typography>
+					<Typography
+						sx={{
+							fontSize: '17px',
+							marginTop: 2,
+							color: '#868686',
+						}}
+					>
+						Ваше сообщение направлено нашим специалистам. Ответ придет на почту,
+						указанную при регистрации
+					</Typography>
+				</Box>
+			) : (
+				<Box sx={device === 'desktop' ? style : styleMobile}>
+					<Typography
+						variant='h6'
+						component='h2'
+						sx={{
+							color: theme === 'light' ? '#5A5A5A' : '#E1E1E1',
+							lineHeight: '28.5px',
+							fontSize: '21px',
+							fontWeight: '600px',
+						}}
+					>
+						Сообщить об ошибке
+					</Typography>
+					<TextField
+						error={error}
+						id='outlined-multiline-static'
+						multiline
+						rows={4}
+						placeholder='Опишите детально возникшую проблему'
+						fullWidth
+						onChange={(evt) => setErrorMessage(evt.target.value)}
+						InputProps={{
+							startAdornment: (
+								<>
+									<Button
+										variant='contained'
+										component='label'
+										sx={{
+											position: 'absolute',
+											padding: 0,
+											bottom: 13,
+											left: -10,
+											backgroundColor: 'transparent',
+											border: 'none',
+											boxShadow: 'none',
+											margin: 0,
+											rotate: '30deg',
+											'&:hover': {
+												backgroundColor: 'transparent',
+												boxShadow: 'none',
+											},
+										}}
+									>
+										<AttachFileIcon
+											color='info'
+											sx={{
+												cursor: 'pointer',
+												color: '#868686',
+												width: 25,
+												height: 25,
+											}}
+										/>
+										<input
+											onChange={handleFileChange}
+											type='file'
+											hidden
+											accept='.jpg,.jpeg,.png'
+										/>
+									</Button>
+								</>
+							),
+						}}
+						sx={{
+							marginTop: 2.5,
+							marginBottom: 1.2,
+							fontSize: 13,
+							'& label': { color: '#8853FA' },
+							backgroundColor: theme === 'light' ? 'transparent' : '#3D3D3D',
+							'& .MuiOutlinedInput-input': {
+								color: theme === 'light' ? '#272727' : '#E1E1E1',
+							},
+						}}
+					/>
+					{file && (
+						<Box
+							sx={{
+								display: 'flex',
+								alignItems: 'center',
+							}}
+						>
+							<Typography sx={{ fontSize: '15px' }}>
+								Добавлено 1 изображение: {file.name}
+							</Typography>
+							<CloseIcon
+								onClick={() => setFile(undefined)}
+								sx={{
+									width: '18px',
+									height: '18px',
+									cursor: 'pointer',
+									marginLeft: '3px',
+									marginTop: '2px',
+								}}
+							/>
+						</Box>
+					)}
+
+					<Stack
+						direction={device === 'desktop' ? 'row' : 'column-reverse'}
+						justifyContent='flex-end'
+						alignItems='flex-end'
+						spacing={1}
+						sx={{ marginTop: 1.5 }}
+					>
+						<Button
+							fullWidth={device === 'mobile'}
+							onClick={() => handleClose()}
+							sx={{
+								color: theme === 'light' ? '#5A5A5A' : '#D0D0D0',
+								backgroundColor: theme === 'light' ? '#E8E8E8' : '#5D5A5A',
+								fontWeight: 500,
+								fontSize: '16px',
+								textTransform: 'none',
+								padding: '8px 12px',
+								borderRadius: '13px',
+								border: 'none',
+								cursor: 'pointer',
+								marginTop: device === 'desktop' ? 0 : 1,
+							}}
+						>
+							Отмена
+						</Button>
+						<Button
+							fullWidth={device === 'mobile'}
+							variant='contained'
+							onClick={sendError}
+							sx={{
+								color: 'white',
+								backgroundColor: '#7F7DF3',
+								fontWeight: 500,
+								fontSize: '16px',
+								textTransform: 'none',
+								padding: '7px 12px',
+								borderRadius: '13px',
+								border: 'none',
+								cursor: 'pointer',
+							}}
+						>
+							Отправить
+						</Button>
+					</Stack>
+				</Box>
+			)}
+		</Modal>
+	)
+}
+
+export default ErrorModal
@@ -1,4 +1,5 @@
 export { emailOptions, onlyNumbersOption } from './lib/constants/hook-form-options'
+export { useConcat } from './lib/helpers'
 export { translateTypeModel } from './lib/helpers/model-helpers'
 export { useAutoLoad } from './lib/hooks/use-auto-load'
 export { AccountMenu } from './ui/account-menu'
@@ -14,9 +15,8 @@ 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'
-export { Loader } from './ui/loader/loader'
+export { Loader } from './ui/loader/ui/loader'
 export type { ModalProps } from './ui/modal/modal'
-export { useConcat } from './lib/helpers'
 export { Modal } from './ui/modal/modal'
 export { NotificationMenu } from './ui/notification-menu'
 export { RandomImage } from './ui/random-image'
@@ -7,12 +7,13 @@ import Image from 'next/image'
 import { useRouter } from 'next/router'
 import { signOut, useSession } from 'next-auth/react'
 
-import { getUserBalance } from '#/entities/balance'
-import { getAllInfo, unfollowEmail } from '#/entities/user-account/model/user-type-slice'
-import { useAppDispatch, useAppSelector } from '#/app/store/store'
 import styles2 from '#/app/styles/accountTabs.module.css'
 import styles from '#/app/styles/business.module.scss'
-import { ButtonUI, Error, Input, Loader, Modal, SwitchCustom } from '#/shared'
+
+import { useAppDispatch, useAppSelector } from '#/app/store/store'
+import { getUserBalance } from '#/entities/balance'
+import { getAllInfo, unfollowEmail } from '#/entities/user-account/model/user-type-slice'
+import { ButtonUI, Input, Loader, Modal, SwitchCustom } from '#/shared'
 import { accountApi } from '#/shared/api/account-endpoints'
 import { API_URL } from '#/shared/lib/constants/constants'
 import { getDeviceType } from '#/shared/lib/helpers'
@@ -25,6 +26,7 @@ import { NextPageWithLayout } from '#/pages/_app'
 import { DownloadModal } from '#/features/business-security-download'
 import { scopes } from '../config'
 import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+import { useUserSelector } from '#/entities/user-account'
 
 const Account: NextPageWithLayout = () => {
 	const {
@@ -36,13 +38,13 @@ const Account: NextPageWithLayout = () => {
 		username,
 		profile_picture_link,
 		is_social,
-		status: userInfoLoaded,
 		referral_code,
-	} = useAppSelector((state) => state.user)
+		account_type: type,
+	} = useUserSelector()
 
 	const device = getDeviceType()
 
-	const { status, account_type: type } = useAppSelector((state) => state.user)
+	const { status } = useAppSelector((state) => state.user)
 
 	const [name, setName] = useState('')
 
@@ -133,7 +135,12 @@ const Account: NextPageWithLayout = () => {
 			showMessage('Укажите одинаковые новы пароли!')
 			return
 		}
-		const status = await accountApi.changePassword(data.access, newPassword1, newPassword2, currentPassword)
+		const status = await accountApi.changePassword(
+			data.access,
+			newPassword1,
+			newPassword2,
+			currentPassword
+		)
 
 		if (status === 200) {
 			showMessage('Пароль успешно изменён!')
@@ -150,13 +157,23 @@ const Account: NextPageWithLayout = () => {
 	function body() {
 		if (type === 'regular') {
 			return (
-				<Box width='80vw' height='60vh' display='flex' alignItems='center' justifyContent='center'>
+				<Box
+					width='80vw'
+					height='60vh'
+					display='flex'
+					alignItems='center'
+					justifyContent='center'
+				>
 					<ScreenForInactive />
 				</Box>
 			)
 		}
 		if (type === 'business_account') {
-			return <Box className={styles.main}>Информация о корп.аккаунте доступна только владельцу и администраторам.</Box>
+			return (
+				<Box className={styles.main}>
+					Информация о корп.аккаунте доступна только владельцу и администраторам.
+				</Box>
+			)
 		}
 		if (type === 'business_host') {
 			return <BusinessHost />
@@ -188,7 +205,10 @@ const Account: NextPageWithLayout = () => {
 		}
 	}
 
-	const isUserDataChange = useMemo(() => name !== first_name || last_name !== lastName || username !== userName, [name, lastName, userName])
+	const isUserDataChange = useMemo(
+		() => name !== first_name || last_name !== lastName || username !== userName,
+		[name, lastName, userName]
+	)
 
 	const promocodeActivate = async () => {
 		if (!data) return
@@ -291,7 +311,9 @@ const Account: NextPageWithLayout = () => {
 						height: '100%',
 					}}
 				>
-					<Typography sx={{ fontSize: 24, fontWeight: 'bold' }}>Ваш аккаунт</Typography>
+					<Typography sx={{ fontSize: 24, fontWeight: 'bold' }}>
+						Ваш аккаунт
+					</Typography>
 					<Tabs
 						value={scope}
 						variant='scrollable'
@@ -312,7 +334,11 @@ const Account: NextPageWithLayout = () => {
 									disableRipple
 									onClick={() => changeScope(el.scope)}
 									key={el.title}
-									className={scope === el.scope ? styles2.wrap_toggle_button_active : styles2.wrap_toggle_button}
+									className={
+										scope === el.scope
+											? styles2.wrap_toggle_button_active
+											: styles2.wrap_toggle_button
+									}
 									value={el.scope}
 									label={el.title}
 								/>
@@ -347,8 +373,14 @@ const Account: NextPageWithLayout = () => {
 													right: '37px',
 												}}
 											>
-												{!loading || !(userInfoLoaded === 'succeeded') ? (
-													<Image src={'/Edit.svg'} height={30} width={30} alt={'Image change'} />
+												{!loading ||
+												!(status === 'succeeded') ? (
+													<Image
+														src={'/Edit.svg'}
+														height={30}
+														width={30}
+														alt={'Image change'}
+													/>
 												) : (
 													<Loader />
 												)}
@@ -367,33 +399,61 @@ const Account: NextPageWithLayout = () => {
 									</Box>
 									<Box width='100%' sx={{ marginLeft: '30px' }}>
 										<Box sx={{ marginTop: '0px' }}>
-											<Typography className={styles2.input_title}>Имя</Typography>
+											<Typography className={styles2.input_title}>
+												Имя
+											</Typography>
 											<Input
 												inputProps={{ maxLength: 15 }}
 												value={name}
-												onChange={(e) => setName(e.target.value)}
+												onChange={(e) =>
+													setName(e.target.value)
+												}
 												fullWidth
 											/>
 										</Box>
 										<Box sx={{ marginTop: '15px' }}>
-											<Typography className={styles2.input_title}>Фамилия</Typography>
+											<Typography className={styles2.input_title}>
+												Фамилия
+											</Typography>
 											<Input
 												inputProps={{ maxLength: 15 }}
 												value={lastName}
-												onChange={(e) => setLastName(e.target.value)}
+												onChange={(e) =>
+													setLastName(e.target.value)
+												}
 												fullWidth
 											/>
 										</Box>
 										<Box sx={{ marginTop: '15px' }}>
-											<Box display='flex' alignItems='center' justifyContent='space-between'>
-												<Typography className={styles2.input_title}>Email</Typography>
-												<Box display='flex' alignItems='center' sx={{ marginBottom: '5px' }}>
+											<Box
+												display='flex'
+												alignItems='center'
+												justifyContent='space-between'
+											>
+												<Typography
+													className={styles2.input_title}
+												>
+													Email
+												</Typography>
+												<Box
+													display='flex'
+													alignItems='center'
+													sx={{ marginBottom: '5px' }}
+												>
 													<SwitchCustom
-														checked={is_subscribed_to_emails}
+														checked={
+															is_subscribed_to_emails
+														}
 														onChange={async () => {
 															if (!data) return
-															await dispatch(unfollowEmail(data.access))
-															showMessage('Данные изменены!')
+															await dispatch(
+																unfollowEmail(
+																	data.access
+																)
+															)
+															showMessage(
+																'Данные изменены!'
+															)
 														}}
 													/>
 													<Typography
@@ -410,15 +470,23 @@ const Account: NextPageWithLayout = () => {
 											<Input value={email} fullWidth />
 										</Box>
 										<Box sx={{ marginTop: '15px' }}>
-											<Typography className={styles2.input_title}>Никнейм</Typography>
+											<Typography className={styles2.input_title}>
+												Никнейм
+											</Typography>
 											<Input
 												inputProps={{ maxLength: 15 }}
 												value={userName}
-												onChange={(e) => setUserName(e.target.value)}
+												onChange={(e) =>
+													setUserName(e.target.value)
+												}
 												fullWidth
 											/>
 										</Box>
-										<ButtonUI onClick={changeUserData} sx={{ marginTop: '20px' }} text={'Сохранить'} />
+										<ButtonUI
+											onClick={changeUserData}
+											sx={{ marginTop: '20px' }}
+											text={'Сохранить'}
+										/>
 										{/*referral_code.code.trim() && (
 												<Box marginTop={1} display='flex'>
 													<Typography className='text'>Ваша реферальная ссылка:</Typography>
@@ -438,7 +506,9 @@ const Account: NextPageWithLayout = () => {
 								</Box>
 							</Box>
 							<Stack spacing={2} className={styles2.wrap_block}>
-								<Typography className='title-block'>Активация промокода</Typography>
+								<Typography className='title-block'>
+									Активация промокода
+								</Typography>
 								<Input
 									placeholder='Введите ваш промокод'
 									value={promocode}
@@ -451,14 +521,23 @@ const Account: NextPageWithLayout = () => {
 							</Stack>
 							{!is_social && (
 								<Box className={styles2.wrap_block}>
-									<Typography className='title-block'>Изменить пароль</Typography>
-									<Box className={styles2.main_block} flexDirection='column'>
+									<Typography className='title-block'>
+										Изменить пароль
+									</Typography>
+									<Box
+										className={styles2.main_block}
+										flexDirection='column'
+									>
 										<Box sx={{ width: '100%' }}>
-											<Typography className={styles2.input_title}>Текущий пароль</Typography>
+											<Typography className={styles2.input_title}>
+												Текущий пароль
+											</Typography>
 											<Input
 												placeholder='Укажите текущий пароль'
 												value={currentPassword}
-												onChange={(e) => setCurrentPassword(e.target.value)}
+												onChange={(e) =>
+													setCurrentPassword(e.target.value)
+												}
 												fullWidth
 											/>
 										</Box>
@@ -471,20 +550,36 @@ const Account: NextPageWithLayout = () => {
 											}}
 										>
 											<Box sx={{ width: '48%' }}>
-												<Typography className={styles2.input_title}>Новый пароль</Typography>
+												<Typography
+													className={styles2.input_title}
+												>
+													Новый пароль
+												</Typography>
 												<Input
 													placeholder='Укажите новый пароль'
 													value={newPassword1}
-													onChange={(e) => setNewPassword1(e.target.value)}
+													onChange={(e) =>
+														setNewPassword1(
+															e.target.value
+														)
+													}
 													fullWidth
 												/>
 											</Box>
 											<Box sx={{ width: '48%' }}>
-												<Typography className={styles2.input_title}>Подтвердить пароль</Typography>
+												<Typography
+													className={styles2.input_title}
+												>
+													Подтвердить пароль
+												</Typography>
 												<Input
 													placeholder='Укажите новый пароль ещё раз'
 													value={newPassword2}
-													onChange={(e) => setNewPassword2(e.target.value)}
+													onChange={(e) =>
+														setNewPassword2(
+															e.target.value
+														)
+													}
 													fullWidth
 												/>
 											</Box>
@@ -498,9 +593,17 @@ const Account: NextPageWithLayout = () => {
 									</Box>
 								</Box>
 							)}
-							<Stack spacing={2} className={styles2.wrap_block} sx={{ marginBottom: 5 }}>
-								<Typography className='title-block'>Удаление аккаунта</Typography>
-								<Typography className='text'>Удаление аккаунта приведет к потере всех настроек</Typography>
+							<Stack
+								spacing={2}
+								className={styles2.wrap_block}
+								sx={{ marginBottom: 5 }}
+							>
+								<Typography className='title-block'>
+									Удаление аккаунта
+								</Typography>
+								<Typography className='text'>
+									Удаление аккаунта приведет к потере всех настроек
+								</Typography>
 								<ButtonUI
 									fullWidth
 									onClick={() => setConfirmDeleteModal(true)}
@@ -514,11 +617,23 @@ const Account: NextPageWithLayout = () => {
 								/>
 							</Stack>
 
-							<Modal open={confirmDeleteModal} onClose={() => setConfirmDeleteModal(false)}>
+							<Modal
+								open={confirmDeleteModal}
+								onClose={() => setConfirmDeleteModal(false)}
+							>
 								<Stack spacing={2}>
-									<Typography className='title-struct'>Удаление аккаунта</Typography>
-									<Typography className='text'>Вы действительно хотите удалить ваш аккаунт?</Typography>
-									<Button onClick={deleteAccount} fullWidth sx={{ marginTop: 3 }} className='btn-danger'>
+									<Typography className='title-struct'>
+										Удаление аккаунта
+									</Typography>
+									<Typography className='text'>
+										Вы действительно хотите удалить ваш аккаунт?
+									</Typography>
+									<Button
+										onClick={deleteAccount}
+										fullWidth
+										sx={{ marginTop: 3 }}
+										className='btn-danger'
+									>
 										Удалить
 									</Button>
 								</Stack>
@@ -16,9 +16,8 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { useSession } from 'next-auth/react'
 
-import { getAll, ResponseAllInfo } from '#/entities/user-account/model/user-type-slice'
+import { getAll } from '#/entities/user-account/model/user-type-slice'
 import { ApiKeyModal } from '#/features/api-key-modal/api-key-modal'
-import { Layout } from '#/app/layout'
 import { useAppSelector } from '#/app/store/store'
 import { TooltipCustom } from '#/shared'
 import { accountApi } from '#/shared/api/account-endpoints'
@@ -26,13 +25,14 @@ import { API_URL } from '#/shared/lib/constants'
 import styles from '#/shared/styles/api-keys.module.scss'
 import { InputStyleSmallDark, InputStyleSmallLight } from '#/shared/ui/input'
 import { NextPageWithLayout } from '#/pages/_app'
+import { UserDTO } from '#/entities/user-account'
 
 const ApiKeys: NextPageWithLayout = () => {
 	const [keys, setKeys] = useState<Array<any> | null>(null)
 	const [loading, setLoading] = useState(false)
 	const { data, status } = useSession()
 	const [modal, setModal] = useState<boolean>(false)
-	const [userInfo, setUserInfo] = useState<ResponseAllInfo | null>()
+	const [userInfo, setUserInfo] = useState<UserDTO | null>()
 	const [disabled, setDisabled] = React.useState<boolean>(true)
 
 	useEffect(() => {
@@ -4,15 +4,16 @@ import { Box, Typography } from '@mui/material'
 import { useSession } from 'next-auth/react'
 import { getAudio } from '#/entities/audio-model'
 import { NextPageWithLayout } from '#/pages/_app'
-import { ImageModelCard, IShortModel } from '#/entities/model-entity'
+import { ImageModelCard, ShortModel } from '#/entities/model-entity'
 import { useAppSelector } from '#/app/store/store'
+import { useUserSelector } from '#/entities/user-account'
 
 export const AudioModelsPage: NextPageWithLayout = () => {
-	const [bots, setBots] = useState<IShortModel[] | null>(null)
+	const [bots, setBots] = useState<ShortModel[] | null>(null)
 
 	const { data, status } = useSession()
 
-	const user = useAppSelector((state) => state.user)
+	const user = useUserSelector()
 
 	useEffect(() => {
 		if (!data) return
@@ -27,7 +28,7 @@ export const AudioModelsPage: NextPageWithLayout = () => {
 			</Typography>
 			<Box display='flex' flexWrap='wrap'>
 				{bots?.map((item, idx) => {
-					return (  
+					return (
 						<ImageModelCard
 							accessed_models={user.payment_plan.plan.accessed_models}
 							key={idx}
@@ -0,0 +1 @@
+export * from './use-chat-bots'
\ No newline at end of file
@@ -0,0 +1,27 @@
+import { ShortModel, getChatBots } from '#/entities/model-entity'
+import { withPending } from '#/shared'
+import { makePrivateRequest } from '#/shared/api'
+import { useShowDataStore } from '#/shared/lib/hooks'
+import { useState } from 'react'
+
+export function useChatBots() {
+  const [bots, setBots] = useState<ShortModel[]>([])
+
+  const { showMessage } = useShowDataStore()
+
+  const [fetchChatBots, pending] = withPending(
+    makePrivateRequest(async () => {
+      const { data, status } = await getChatBots()
+
+      if (status !== 200) return showMessage('Ошибка при получении чат ботов')
+
+      setBots(data)
+    })
+  )
+
+  return {
+    pending,
+    fetchChatBots,
+    bots,
+  }
+}
\ No newline at end of file
@@ -0,0 +1,83 @@
+@keyframes fadein {
+	0% {
+		opacity: 0;
+	}
+	50% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+.header {
+	width: 70%;
+
+	@media screen and (max-width: 768px) {
+		width: 100%;
+	}
+}
+
+.main {
+	width: 100%;
+	padding-right: 60px;
+	display: grid;
+	grid-template-columns: 1fr 25%;
+	// grid-template-rows: 240px calc(75dvh - 260px);
+	grid-template-rows: 240px 100%;
+	gap: 20px;
+
+	@media screen and (max-width: 1000px) {
+		grid-template-columns: 100%;
+		grid-template-rows: max-content 100%;
+		padding-right: unset;
+		padding-top: 10px;
+	}
+
+	&__chats {
+		width: 100%;
+		grid-row: 1 / 2;
+		margin: unset !important;
+	}
+
+	&__options {
+		max-height: calc(75dvh - 260px);
+		height: min-content;
+		width: 100%;
+
+		@media screen and (max-width: 1000px) {
+			display: none !important;
+		}
+	}
+
+	&__chat {
+		height: 75dvh;
+		grid-row: 1 / 3;
+		width: 100%;
+
+		@media screen and (max-width: 1000px) {
+			grid-row: unset;
+			height: max-content;
+		}
+	}
+}
+
+.blocked {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #c32528;
+	padding: 8px 15px;
+	gap: 5px;
+	position: absolute;
+	left: 0;
+	bottom: -10px;
+	width: 100%;
+	border-radius: 0px 0px 15px 15px;
+
+	&__text {
+		color: white;
+		font-size: 14px;
+		font-weight: 600;
+	}
+}
@@ -1,386 +1,75 @@
-import React, { useCallback, useEffect } from 'react'
-import { useDispatch } from 'react-redux'
-import { Box, Collapse, Stack, Typography } from '@mui/material'
+import React, { useEffect, useMemo } from 'react'
 import { useRouter } from 'next/router'
-import { useSession } from 'next-auth/react'
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
-import BotParamsMap from '#/features/bot-params/bot-params-map'
-import { useChats } from '#/features/chats'
-import Title from '#/features/title/title'
-import { TutorialContext } from '#/features/tutorial-context/tutorial-context'
-import { ChatSelect } from '#/app/components/chat_select'
-import { ResetFilters } from '#/app/components/filters/reset_filters'
-import { setParams as setParametres } from '#/app/store/model-parametres-store'
-import { useAppSelector } from '#/app/store/store'
-import { DrawerCustom, Error, useModel } from '#/shared'
-import model_api from '#/shared/api/models/api'
-import styles from './chats-bot.module.scss'
+import { CommonTitle } from '#/shared/ui/title'
+import styles from './chat-bot.module.scss'
 import { Chats } from '#/widgets/chats'
-import { c, getDeviceType, getOs } from '#/shared/lib/helpers'
 import { NextPageWithLayout } from '#/pages/_app'
-import { getDefaultLayoutDynamic } from '#/widgets/layouts'
 import Head from 'next/head'
 
-import LockSvg from '#/assets/svg/lock.svg?react'
-import BlockedSvg from '#/assets/svg/blocked.svg?react'
-import { IModelTag, IModel } from '#/entities/model-entity'
-import { useThemeAndDevice } from '#/shared/lib/hooks'
-import { SvgIcon } from '#/shared/ui/svg'
+import { useChatBot } from '#/entities/model-entity'
+import { ModelTags } from '#/widgets/model-tags'
 import { AllChatWindow } from '#/widgets/chat-window'
-import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+import { ChatModelOptions } from '#/widgets/chat-model-options'
+import { getPopupById, POPUP_CHAT_BOT_PARAMS } from '#/shared/ui/popup'
+import { MessageEventStreamResponse, useChatBotMessages, useChatMessagesEvents } from '#/entities/message'
+import { useEventSource } from '#/shared/lib/event-source'
+import { useCurrentChat } from '#/features/chats'
+import { useChatBotPagination } from '#/features/chat-bot-pagination'
+import { useMediaQuery } from 'usehooks-ts'
 
 export interface ChatBotPageProps {}
 
 const Page: NextPageWithLayout<ChatBotPageProps> = () => {
-	const [botParams, setBotParams] = React.useState<IModel | null>(null)
-	const [modelType, setModelType] = React.useState<string>('')
-	const [openFiltersMobile, setOpenFiltersMobile] = React.useState(false)
-	const [version, setVersion] = React.useState<string>('')
-	const [step, setStep] = React.useState<number>(0)
+	const { query } = useRouter()
 
-	const [params, setParams] = React.useState<boolean>(false)
-	const [file, setFile] = React.useState<File | null>(null)
-	const { showMessage } = useShowDataStore()
+	const { botParams, fetchBotParams } = useChatBot()
 
-	const deviceType = getDeviceType()
-	const deviceOs = getOs()
+	const chatBotOptionPopup = getPopupById(POPUP_CHAT_BOT_PARAMS)
 
-	const desktop = deviceType === 'desktop'
-	const { data } = useSession()
-	const router = useRouter()
+	const { loaded } = useChatBotMessages()
 
-	const {
-		chats,
-		currentChat,
-		chatSetting,
-		setChatSetting,
-		setChat,
-		removeChat,
-		createNewChat,
-		handleClickChatSetting,
-		isTryRename,
-		setIsTryRename,
-	} = useChats(modelType)
+	const { makeEvent } = useChatMessagesEvents()
 
-	const { messages, sendMessage, loading, getMessagesPagination, deleteMessage } = useModel(currentChat, showMessage, modelType)
+	const { currentChat } = useCurrentChat()
 
-	const includeParams = useAppSelector((state) => state.params.params)
-	const dispatch = useDispatch()
+	const { closeEvent, events } = useEventSource()
 
-	const deleteMessageMemo = useCallback(deleteMessage, [currentChat, messages])
+	useEffect(() => {
+		if (!currentChat || !loaded) return
+		closeEvent('chat-bot')
+		makeEvent('chat-bot')
 
-	const { push } = useRouter()
-
-	React.useEffect(() => {
-		if (data?.access) {
-			model_api.getBotParams(router.asPath.split('/')[2], data.access).then((res) => {
-				if (!res.title) return push('/404')
-				setBotParams(res)
-				setModelType(res.slug)
-				if (res.versions.length !== 0) {
-					setVersion(res.versions[0].slug)
-					dispatch(
-						setParametres(
-							res.parameters.reduce(
-								(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 }), {})))
-				}
-			})
-		}
-	}, [data?.access, router.query])
-
-	const resetParams = () => {
-		if (botParams) {
-			dispatch(setParametres({}))
-			if (botParams.versions?.length !== 0) {
-				setVersion(botParams.versions[0].slug)
-				dispatch(
-					setParametres(
-						botParams.parameters.reduce(
-							(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 }), {})))
-			}
-		}
-	}
-
-	const setDefaultParams = () => {
-		if (botParams) {
-			dispatch(setParametres({}))
-			if (version !== '') {
-				dispatch(
-					setParametres(
-						botParams.parameters.reduce(
-							(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 }), {})))
-			}
+		return () => {
+			closeEvent('chat-bot')
 		}
-	}
-
-	const viewMobileSettings = () => {
-		setOpenFiltersMobile(true)
-	}
+	}, [currentChat, loaded])
 
-	const hideMobileSettings = () => {
-		setOpenFiltersMobile(false)
-	}
-
-	const onSendMessage = (input: string, required: (string | null)[]) => {
-		if (required.includes('text') && (input === '' || input === null)) {
-			showMessage('Введите сообщение!')
-			return false
-		}
-		if (required.includes('image') && file === null) {
-			showMessage('Прикрепите изображение!')
-			return false
-		}
-
-		let data = {}
-		if (version === '') {
-			data = {
-				...includeParams,
-			}
-		} else {
-			data = {
-				version: version,
-				...includeParams,
-			}
-		}
-
-		sendMessage<any>({
-			content: input,
-			file: file,
-			info: {
-				...data,
-			},
-		})
-		return true
-	}
-
-	const { theme } = useThemeAndDevice()
+	useEffect(() => {
+		fetchBotParams()
+	}, [query.slug])
 
 	return (
-		<>
+		<main className={styles.page}>
 			<Head>
 				<title>{botParams ? botParams.title : 'Загрузка...'}</title>
 			</Head>
-			<TutorialContext.Provider value={{ step, setStep }}>
-				<div className={styles.header}>
-					<Title
-						title={botParams?.title ? botParams?.title : ''}
-						rightSlot={
-							<div className={styles.tags}>
-								{botParams &&
-									botParams.tags.map((tag, index) => (
-										<div key={index} className={styles.tag}>
-											<SvgIcon width={23} height={23} url={tag.icon} className={styles.tag__icon} />
-
-											<span className={styles.tag__text}>{tag.title}</span>
-										</div>
-									))}
-							</div>
-						}
-						type={'Чат-боты'}
-						linkBack={'/chat-bot'}
-					/>
+			<div className={styles.header}>
+				<CommonTitle
+					type='Чат-боты'
+					linkBack='/chat-bot'
+					title={botParams ? botParams.title : 'Загрузка...'}
+					rightSlot={<ModelTags tags={botParams ? botParams.tags : []} />}
+				/>
+			</div>
+			<div className={styles.main}>
+				<div className={styles.main__chat}>
+					<AllChatWindow setOpenFiltersMobile={() => chatBotOptionPopup.toogleState()} />
 				</div>
-				<Box sx={{ height: 'calc(100% - 100px)' }} className={styles.main}>
-					<Box className={styles.chatWindow}>
-						<AllChatWindow
-							deviceOs={deviceOs}
-							input_types={botParams?.inputs}
-							setFile={setFile}
-							file={file}
-							blocked={botParams?.blocked}
-							getMessagesPagination={getMessagesPagination}
-							sendMessage={onSendMessage}
-							deleteMessage={deleteMessageMemo}
-							openMobileFilters={viewMobileSettings}
-							isCalculating={true}
-							device={deviceType}
-							loading={loading}
-							messages={messages || []}
-							modelType={modelType}
-							modelTitle={botParams?.title}
-							currentVersion={version}
-							tags={botParams?.tags ?? []}
-						/>
-						{/* {botParams?.blocked && (
-							<div className={styles.blocked}>
-								<BlockedSvg width={16} height={16} color='white' />
-								<span className={c(styles.blocked__text)}>
-									Модель недоступна
-								</span>
-							</div>
-						)} */}
-					</Box>
-					<Box className={styles.settings}>
-						<Chats
-							desktop={desktop}
-							isTryRename={isTryRename}
-							setIsTryRename={setIsTryRename}
-							currentChat={currentChat}
-							setChat={setChat}
-							chats={chats}
-							chatSetting={chatSetting}
-							setChatSetting={setChatSetting}
-							removeChat={removeChat}
-							createNewChat={createNewChat}
-							handleClickChatSetting={handleClickChatSetting}
-						/>
-						{desktop && (
-							<Stack className='pd-30 bg-color-block border-radius-main' spacing={2}>
-								{botParams?.versions && botParams.versions?.length !== 0 && (
-									<>
-										<Typography
-											sx={{
-												color: '#A4AAB5',
-												fontWeight: '600',
-												fontSize: '14px',
-												letterSpacing: '0.1px',
-											}}
-										>
-											ВЕРСИИ
-										</Typography>
-										<ChatSelect
-											setDefaultParams={setDefaultParams}
-											value={version}
-											list={botParams.versions}
-											setValue={setVersion}
-										/>
-									</>
-								)}
-								{botParams && botParams.parameters?.length > 0 && (
-									<Box
-										display={'flex'}
-										alignItems={'center'}
-										gap={'5px'}
-										sx={{ cursor: 'pointer' }}
-										onClick={() => {
-											setParams(!params)
-										}}
-									>
-										<Typography
-											sx={{
-												color: '#A4AAB5',
-												fontWeight: '600',
-												fontSize: '14px',
-												letterSpacing: '0.1px',
-											}}
-										>
-											ПАРАМЕТРЫ
-										</Typography>
-										<svg
-											width='14'
-											height='20'
-											viewBox='0 0 21 13'
-											fill='none'
-											xmlns='http://www.w3.org/2000/svg'
-											className={`${params ? 'rotate-180' : 'rotate-0'}`}
-										>
-											<path
-												fillRule='evenodd'
-												clipRule='evenodd'
-												d='M0.614851 0.615358C1.00866 0.221668 1.54271 0.000505666 2.09955 0.000505642C2.6564 0.000505617 3.19044 0.221668 3.58425 0.615357L10.4996 7.53066L17.4149 0.615357C17.8109 0.232825 18.3414 0.0211567 18.892 0.0259414C19.4426 0.0307261 19.9693 0.25158 20.3587 0.640937C20.748 1.03029 20.9689 1.557 20.9737 2.10761C20.9784 2.65823 20.7668 3.18869 20.3842 3.58476L11.9843 11.9848C11.5904 12.3784 11.0564 12.5996 10.4996 12.5996C9.94271 12.5996 9.40866 12.3784 9.01485 11.9848L0.614851 3.58476C0.221162 3.19095 -4.3461e-07 2.6569 -4.5895e-07 2.10006C-4.8329e-07 1.54321 0.221162 1.00917 0.614851 0.615358Z'
-												fill='#7f7df3'
-											/>
-										</svg>
-									</Box>
-								)}
-
-								{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} />
-									</Collapse>
-								) : (
-									<Typography
-										sx={{
-											color: '#6e6e6e',
-											fontSize: '15px',
-											fontWeight: '500',
-										}}
-									>
-										Параметры отсутствуют
-									</Typography>
-								)}
-							</Stack>
-						)}
-						{!desktop && (
-							<DrawerCustom open={openFiltersMobile} onClose={hideMobileSettings}>
-								<Stack spacing={1} padding={2.4}>
-									{botParams?.versions && botParams.versions?.length !== 0 && (
-										<>
-											<Typography
-												sx={{
-													color: '#A4AAB5',
-													fontWeight: '600',
-													fontSize: '14px',
-													letterSpacing: '0.1px',
-													margin: '20px 0px 0px !important',
-												}}
-											>
-												ВЕРСИИ
-											</Typography>
-											<ChatSelect
-												setDefaultParams={setDefaultParams}
-												value={version}
-												list={botParams.versions}
-												setValue={setVersion}
-											/>
-										</>
-									)}
-									{botParams && botParams.parameters?.length > 0 ? (
-										<>
-											<Typography
-												sx={{
-													color: '#A4AAB5',
-													fontWeight: '600',
-													fontSize: '14px',
-													letterSpacing: '0.1px',
-													margin: '20px 0px 0px !important',
-												}}
-											>
-												ПАРАМЕТРЫ
-											</Typography>
-											<BotParamsMap currentVersion={version} params={botParams?.parameters} />
-											<ResetFilters closeDrawer={hideMobileSettings} desktop={desktop} reset={resetParams} />
-										</>
-									) : (
-										<Typography
-											sx={{
-												color: '#6e6e6e',
-												fontSize: '15px',
-												fontWeight: '500',
-											}}
-										>
-											Параметры отсутствуют
-										</Typography>
-									)}
-								</Stack>
-							</DrawerCustom>
-						)}
-					</Box>
-				</Box>
-			</TutorialContext.Provider>
-		</>
+				<Chats className={styles.main__chats} />
+				<ChatModelOptions className={styles.main__options} />
+			</div>
+		</main>
 	)
 }
 
@@ -13,12 +13,13 @@
 
 	margin-right: 60px;
 
-	@media screen and (min-width: 1820px) {
-		margin-right: 240px;
-		grid-template-columns: repeat(auto-fit, 360px);
-	}
-
 	@media screen and (max-width: 1000px) {
 		margin-right: 0px;
 	}
 }
+
+.title {
+	font-size: 24px;
+	margin-top: 25px;
+	font-weight: 700;
+}
@@ -1,55 +1,41 @@
 import * as React from 'react'
-import { useEffect, useState } from 'react'
-import { Box, Typography } from '@mui/material'
-import CircularProgress from '@mui/material/CircularProgress'
-import { useSession } from 'next-auth/react'
+import { useEffect } from 'react'
 import { useAppSelector } from '#/app/store/store'
-import model_api from '#/shared/api/models/api'
 import { NextPageWithLayout } from '#/pages/_app'
-import { ChatModelCard, IShortModel } from '#/entities/model-entity'
+import { ChatModelCard } from '#/entities/model-entity'
 
 import styles from './chat-bots.module.scss'
+import { Loader } from '#/shared'
+import { useChatBots } from '../model'
+import { useUserSelector } from '#/entities/user-account'
 
 const Page: NextPageWithLayout = () => {
-	const [bots, setBots] = useState<IShortModel[] | null>(null)
-	const { data } = useSession()
-	const user = useAppSelector((state) => state.user)
+	const {
+		payment_plan: {
+			plan: { accessed_models },
+		},
+	} = useUserSelector()
 
-	useEffect(() => {
-		if (!data) return
+	const { bots, fetchChatBots, pending } = useChatBots()
 
-		model_api.getBots(data.access).then((res) => {
-			setBots(res)
-		})
-	}, [data])
+	useEffect(() => {
+		fetchChatBots()
+	}, [])
 
 	return (
 		<>
-			<Typography sx={{ fontSize: 24, fontWeight: 'bold', marginTop: '25px' }}>
-				Чат-боты
-			</Typography>
+			<p className={styles.title}>Чат-боты</p>
 			<div className={styles.cards}>
-				{bots ? (
+				{!pending ? (
 					bots.map((item) => (
 						<ChatModelCard
-							accessed_models={user.payment_plan.plan.accessed_models}
-							key={item.uid}
 							{...item}
+							accessed_models={accessed_models}
+							key={item.uid}
 						/>
 					))
 				) : (
-					<CircularProgress
-						size={50}
-						thickness={3}
-						sx={{
-							color: '#7F7DF3',
-							position: 'absolute',
-							top: '40%',
-							left: 0,
-							right: 0,
-							margin: '0 auto',
-						}}
-					/>
+					<Loader size={50} />
 				)}
 			</div>
 		</>
@@ -1 +1,2 @@
-export * from './ui'
\ No newline at end of file
+export * from './ui'
+export * from './model'
\ No newline at end of file
@@ -1,151 +1,73 @@
-.container {
-	width: 100%;
+.model {
+	padding: 10px 12px;
 	border-radius: 15px;
-	height: 100%;
-	position: absolute;
-	bottom: 0;
-	left: 0;
+	display: flex;
+	align-items: center;
+	gap: 10px;
 	background-color: var(--new-ui-main-color);
-	opacity: 0;
-	z-index: -1;
-	transition: all 0.3s ease-in-out;
-
-	&_active {
-		opacity: 1;
-		z-index: 100;
-	}
-}
-
-.header {
-	width: 70%;
-	margin-bottom: 50px;
-
-	@media screen and (max-width: 768px) {
-		width: 100%;
-		margin-bottom: 0px;
-	}
-}
+	width: max-content;
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 3;
 
-@keyframes fadein {
-	0% {
-		opacity: 0;
-	}
-	50% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 1;
+	@media screen and (max-width: 1200px) {
+		top: 30px;
 	}
 }
 
-// .blocked {
-// 	display: flex;
-// 	align-items: center;
-// 	justify-content: center;
-// 	background-color: white;
-// 	border-radius: 100px;
-// 	padding-right: 20px;
-// 	padding: 8px 12px;
-// 	width: max-content;
-
-// 	span {
-// 		color: #ff2372;
-// 		font-weight: 500;
-// 		padding-left: 10px;
-// 		font-size: 14px;
-// 		width: max-content;
-// 	}
-// }
-
-.icon {
+.popup {
+	position: absolute;
+	top: 50%;
+	right: 20px;
+	transform: translateY(-50%);
+	z-index: 2;
 }
 
-.tags {
-	min-width: 100%;
-	display: flex;
-	gap: 8px;
-	align-items: center;
-	justify-content: flex-end;
-
-	@media screen and (max-width: 768px) {
-		justify-content: flex-start;
-	}
+.messages {
+	z-index: 2;
+	height: calc(100dvh - 20px - 20px - 40px - 25px);
+	overflow-y: scroll;
 }
 
-.tag {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background-color: white;
-	border-radius: 100px;
-	width: 50px;
-	height: 50px;
-	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
-	transition: width 0.3s ease-in-out;
-
-	@media screen and (max-width: 768px) {
-		height: 40px;
-		width: 40px;
-	}
-
-	&__icon {
-		color: var(--air-color);
-	}
-
-	&:hover {
-		padding: 12px;
-		width: 200px;
-
-		.tag__icon {
-			animation: fadein 0.6s ease-in-out;
-		}
-
-		.tag__text {
-			opacity: 1;
-			position: static;
-			animation: fadein 0.6s ease-in-out;
-			display: block;
-		}
-	}
+.input {
+	position: absolute;
+	bottom: 20px;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 2;
 
-	&__text {
-		position: absolute;
-		color: var(--air-color);
-		font-weight: 500;
-		padding-left: 10px;
-		font-size: 14px;
-		opacity: 0;
-		display: none;
-		min-width: max-content !important;
+	@media screen and (max-width: 800px) {
+		bottom: -10px;
 	}
 }
 
-.blocked {
-	height: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background-color: #c32528;
-	padding: 20px;
-	gap: 10px;
+.shape {
+	height: 100px;
 	position: absolute;
-
-	left: 0;
-
+	filter: blur(10px);
 	width: 100%;
-	border-radius: 15px;
-	top: 0;
-
-	@media screen and (max-width: 768px) {
-		top: unset;
-		// bottom: -22px;
-		z-index: 1;
-		border-radius: 15px;
+	left: 0;
+	right: 0;
+	background: linear-gradient(
+		180deg,
+		var(--new-ui-bg-app-color) 0%,
+		var(--new-ui-bg-app-color) 30%,
+		rgba(255, 255, 255, 0) 100%
+	);
+	z-index: 1;
+	&_top {
+		top: 0px;
 	}
 
-	&__text {
-		color: white !important;
-		font-size: 16px;
-		font-weight: 600;
+	&_bottom {
+		bottom: -20px;
+		transform: rotate(180deg);
 	}
 }
+
+.container {
+	padding-top: 20px;
+	position: relative;
+}
@@ -1,372 +1,77 @@
-import { useEffect, useMemo } from 'react'
-import { Box, Collapse, Stack, Typography } from '@mui/material'
-import Head from 'next/head'
+import * as React from 'react'
 import { useRouter } from 'next/router'
 import { useSession } from 'next-auth/react'
+import { Error } from '#/shared'
+import { ImageMessagesList } from '#/widgets/messages/ui/image-messages-list'
+import { c, getDeviceType } from '#/shared/lib/helpers'
+import Head from 'next/head'
 
 import styles from './image-model.module.scss'
-
-import { ChatSelect } from '#/app/components/chat_select'
-import { ResetFilters } from '#/app/components/filters/reset_filters'
-import { Layout } from '#/app/layout'
-import BlockedSvg from '#/assets/svg/blocked.svg?react'
-import LockSvg from '#/assets/svg/lock.svg?react'
-import { useImageBot } from '#/entities/model-entity/model/use-image-bot'
-import BotParamsMap from '#/features/bot-params/bot-params-map'
-import { useImageBotCreateImage } from '#/features/image-bot-create-image'
-import { useImagesBotFilters } from '#/features/image-bot-filters'
-import { useImagesUniqInput } from '#/features/image-bot-input'
-import { useImageBotPagination } from '#/features/image-bot-pagination'
-import Title from '#/features/title/title'
 import { NextPageWithLayout } from '#/pages/_app'
-import { DrawerCustom, Error, Loader } from '#/shared'
-import { c, getDeviceType, getOs } from '#/shared/lib/helpers'
-import { useThemeAndDevice } from '#/shared/lib/hooks'
-import { Device, DeviceOs } from '#/shared/lib/types/entities'
-import { ArrowDownScroll } from '#/shared/ui/icon-components/scroll-down-arrow'
-import { SvgIcon } from '#/shared/ui/svg'
-import { ImageMessagesList, useImagesPagination } from '#/widgets/messages'
-import { ModelInput } from '#/features/model-input'
-import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+import { useImageBot } from '#/entities/model-entity/model/use-image-bot'
+import { ImageModelsSelect } from '#/widgets/image-models-popup'
+
+import { ImageInput } from '#/features/image-models-input'
+import { useEffect, useRef } from 'react'
+import { useMessagesStore } from '#/widgets/messages'
+import { ImagesEmpty } from '#/widgets/image-messages'
+import { MessageFastChoiceMenu } from '#/features/message-fast-choice-menu'
+import { useShowDataStore } from '#/shared/lib/hooks'
 
 const ImageModelPage: NextPageWithLayout = () => {
 	const { query } = useRouter()
 
-	const { botParams, version, modelType, fetchBotParams, resetParams, setDefaultParams, setVersion } = useImageBot(query.slug as string)
+	const { botParams, inference, fetchBotParams } = useImageBot()
 
-	const deviceType = getDeviceType()
-	const deviceOs = getOs()
-
-	const { ios, desktop } = useThemeAndDevice(deviceType, deviceOs)
-
-	const { showMessage } = useShowDataStore()
+	const container = useRef<HTMLDivElement | null>(null)
 
-	const router = useRouter()
+	const deviceType = getDeviceType()
 
 	const { data: session } = useSession()
 
-	const { openFiltersMobile, setOpenFiltersMobile, params, setParams, includeParams } = useImagesBotFilters()
-
-	const { refScrollMobile, refScrollDesktop, mobileScrollContainer, onObserverMounted, setMessages, fetchMessages, loading, offset, messages } =
-		useImageBotPagination(deviceType)
-
-	const { createImage, isComplete, createLoading } = useImageBotCreateImage(showMessage, modelType, deviceType, setMessages, mobileScrollContainer)
-
-	const { onCreateImage, onLoadImage, image, setImage } = useImagesUniqInput(version, includeParams, createImage)
+	const { messages, loading } = useMessagesStore()
 
 	async function onFetch() {
 		await Promise.all([fetchBotParams()])
 	}
 
 	useEffect(() => {
-		if (!session) return
 		onFetch()
-		onObserverMounted()
-	}, [session?.access])
-
-	const { theme } = useThemeAndDevice()
+	}, [session, query])
 
 	return (
-		<>
+		<div className={styles.container}>
 			<Head>
-				<title>{botParams ? botParams?.title : 'Загрузка...'}</title>
+				<title>Модель {botParams ? botParams.title : 'Загрузка...'}</title>
 			</Head>
-			<div className={styles.header}>
-				<Title
-					title={botParams ? botParams.title : 'Загрузка...'}
-					type={'Изображения'}
-					linkBack={'/images'}
-					rightSlot={
-						<div className={styles.tags}>
-							{botParams &&
-								botParams.tags.map((tag, index) => (
-									<div key={index} className={styles.tag}>
-										<SvgIcon width={23} height={23} url={tag.icon} className={styles.tag__icon} />
-
-										<span className={styles.tag__text}>{tag.title}</span>
-									</div>
-								))}
-						</div>
-					}
-				/>
+			<div className={styles.model}>
+				<p className={c(styles.model__title, 'title-h2')}>Модель</p>
+				<ImageModelsSelect className={styles.model__popup} model={botParams} />
 			</div>
-			<Box
-				display={'flex'}
-				justifyContent='space-between'
-				alignItems='start'
-				flexDirection={desktop ? 'row' : 'column-reverse'}
-				sx={{
-					marginBottom: desktop ? 0 : 2,
-					width: desktop ? '97%' : '100%',
-					marginTop: desktop ? 3 : '15px',
-				}}
+			<div className={c(styles.shape, styles.shape_top)}></div>
+
+			<div
+				ref={container}
+				style={{ marginRight: deviceType === 'mobile' ? '0px' : '80px' }}
+				className={styles.messages}
 			>
-				<Box
-					sx={{
-						width: desktop ? '73%' : '100%',
-						marginLeft: 0,
-						display: 'flex',
-						flexDirection: desktop ? 'column' : 'column-reverse',
-					}}
-				>
-					{desktop ? (
-						<>
-							<Stack
-								alignItems='center'
-								sx={{
-									marginBottom: '15px',
-									position: 'relative',
-									zIndex: 1,
-								}}
-							>
-								{botParams && (
-									<ModelInput
-										currentVersion={version}
-										styles={'images'}
-										input_types={botParams.inputs}
-										image={image}
-										value={prompt}
-										desktop={desktop}
-										blocked={botParams.blocked}
-										loading={createLoading}
-										imageLoad={onLoadImage}
-										sendMessage={onCreateImage}
-										unpinImage={() => setImage(null)}
-										viewMobileSettings={() => setOpenFiltersMobile(true)}
-									/>
-								)}
-								{botParams?.blocked && (
-									<div className={styles.blocked}>
-										<BlockedSvg width={16} height={16} color='white' />
-										<span className={c(styles.blocked__text)}>Модель недоступна</span>
-									</div>
-								)}
-							</Stack>
-							<Box
-								className={'bg-color-block border-radius-main'}
-								sx={{
-									padding: '30px',
-									position: 'relative',
-								}}
-							>
-								<ImageMessagesList
-									isComplete={loading}
-									device={deviceType}
-									images={messages}
-									getMessagesPagination={fetchMessages}
-								/>
-								<Box
-									sx={{
-										position: 'absolute',
-										bottom: '0',
-										visibility: 'hidden',
-										height: '800px',
-										width: '100%',
-									}}
-									ref={refScrollDesktop}
-								></Box>
-							</Box>
-						</>
-					) : (
-						<Box className={'bg-color-block border-radius-main'} sx={{ position: 'relative' }}>
-							<div className={c(styles.container, loading && offset.current === 0 && styles.container_active)}>
-								<div
-									style={{
-										position: 'absolute',
-										top: '50%',
-										left: '50%',
-										transform: 'translate(-50%, -50%)',
-									}}
-								>
-									<Loader />
-								</div>
-							</div>
-							<div style={{ position: 'relative', borderRadius: '13px' }}>
-								<Box
-									sx={{
-										padding: '30px',
-										height: `calc(100dvh - 116px - 61px - 15px ${botParams?.blocked ? '- 17px' : '- 23.5px'})`,
-										// height: `calc(100dvh - 116px - 61px - 15px - 23.5px)`,
-										overflowY: 'scroll',
-										overflowX: 'hidden',
-										position: 'relative',
-									}}
-									ref={mobileScrollContainer}
-									className={'smallScroll'}
-								>
-									<div style={{ position: 'absolute', top: 300 }} ref={refScrollMobile}></div>
-									<ImageMessagesList
-										isComplete={loading}
-										device={deviceType}
-										images={messages}
-										getMessagesPagination={fetchMessages}
-									/>
-								</Box>
+				{!loading && messages.length === 0 ? (
+					<ImagesEmpty />
+				) : (
+					<ImageMessagesList container={container} />
+				)}
+			</div>
 
-								<Stack alignItems='center' sx={{ zIndex: 10, position: 'relative', margin: 1.25 }}>
-									{botParams && (
-										<ModelInput
-											currentVersion={version}
-											styles={'images'}
-											input_types={botParams.inputs}
-											image={image}
-											blocked={botParams.blocked}
-											value={prompt}
-											desktop={desktop}
-											loading={createLoading}
-											imageLoad={onLoadImage}
-											sendMessage={onCreateImage}
-											unpinImage={() => setImage(null)}
-											viewMobileSettings={() => setOpenFiltersMobile(true)}
-										/>
-									)}
-									{botParams?.blocked && (
-										<div className={styles.blocked}>
-											<BlockedSvg width={21} height={21} color='white' />
-											<span className={c(styles.blocked__text)}>Модель недоступна</span>
-										</div>
-									)}
-								</Stack>
-							</div>
-						</Box>
-					)}
-				</Box>
-				{desktop && (
-					<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>
-								<ChatSelect
-									setDefaultParams={setDefaultParams}
-									value={version}
-									list={botParams.versions}
-									setValue={setVersion}
-								/>
-							</>
-						) : (
-							<></>
-						)}
-						{botParams && botParams.parameters?.length > 0 && (
-							<Box
-								display={'flex'}
-								alignItems={'center'}
-								gap={'5px'}
-								sx={{ cursor: 'pointer' }}
-								onClick={() => {
-									setParams(!params)
-								}}
-							>
-								<Typography
-									sx={{
-										color: '#A4AAB5',
-										fontWeight: '600',
-										fontSize: '14px',
-										letterSpacing: '0.1px',
-									}}
-								>
-									ПАРАМЕТРЫ
-								</Typography>
-								<svg
-									width='14'
-									height='20'
-									viewBox='0 0 21 13'
-									fill='none'
-									xmlns='http://www.w3.org/2000/svg'
-									className={`${params ? 'rotate-180' : 'rotate-0'}`}
-								>
-									<path
-										fillRule='evenodd'
-										clipRule='evenodd'
-										d='M0.614851 0.615358C1.00866 0.221668 1.54271 0.000505666 2.09955 0.000505642C2.6564 0.000505617 3.19044 0.221668 3.58425 0.615357L10.4996 7.53066L17.4149 0.615357C17.8109 0.232825 18.3414 0.0211567 18.892 0.0259414C19.4426 0.0307261 19.9693 0.25158 20.3587 0.640937C20.748 1.03029 20.9689 1.557 20.9737 2.10761C20.9784 2.65823 20.7668 3.18869 20.3842 3.58476L11.9843 11.9848C11.5904 12.3784 11.0564 12.5996 10.4996 12.5996C9.94271 12.5996 9.40866 12.3784 9.01485 11.9848L0.614851 3.58476C0.221162 3.19095 -4.3461e-07 2.6569 -4.5895e-07 2.10006C-4.8329e-07 1.54321 0.221162 1.00917 0.614851 0.615358Z'
-										fill='#7f7df3'
-									/>
-								</svg>
-							</Box>
-						)}
+			<div className={c(styles.input)}>
+				<ImageInput container={container} model={botParams} />
+			</div>
 
-						{botParams && botParams.parameters?.length > 0 ? (
-							<Collapse in={params} orientation='vertical' collapsedSize={0} sx={{}}>
-								<BotParamsMap currentVersion={version} params={botParams?.parameters} />
-								<ResetFilters desktop={desktop} closeDrawer={() => setOpenFiltersMobile(false)} reset={resetParams} />
-							</Collapse>
-						) : (
-							<Typography
-								sx={{
-									color: '#6e6e6e',
-									fontSize: '15px',
-									fontWeight: '500',
-								}}
-							>
-								Параметры отсутствуют
-							</Typography>
-						)}
-					</Stack>
-				)}
-				<DrawerCustom open={openFiltersMobile} onClose={() => setOpenFiltersMobile(false)}>
-					<Stack spacing={1} padding={2.4}>
-						{botParams?.versions && botParams.versions.length !== 0 ? (
-							<>
-								<Typography
-									sx={{
-										color: '#A4AAB5',
-										fontWeight: '600',
-										fontSize: '14px',
-										letterSpacing: '0.1px',
-										margin: '20px 0px 0px !important',
-									}}
-								>
-									ВЕРСИИ
-								</Typography>
-								<ChatSelect
-									setDefaultParams={setDefaultParams}
-									value={version}
-									list={botParams.versions}
-									setValue={setVersion}
-								/>
-							</>
-						) : (
-							<></>
-						)}
-						{botParams && botParams.parameters?.length > 0 ? (
-							<>
-								<Typography
-									sx={{
-										color: '#A4AAB5',
-										fontWeight: '600',
-										fontSize: '14px',
-										letterSpacing: '0.1px',
-										margin: '20px 0px 0px !important',
-									}}
-								>
-									ПАРАМЕТРЫ
-								</Typography>
-								<BotParamsMap currentVersion={version} params={botParams?.parameters} />
-								<ResetFilters closeDrawer={() => setOpenFiltersMobile(false)} desktop={desktop} reset={resetParams} />
-							</>
-						) : (
-							<Typography
-								sx={{
-									color: '#6e6e6e',
-									fontSize: '15px',
-									fontWeight: '500',
-								}}
-							>
-								Параметры отсутствуют
-							</Typography>
-						)}
-					</Stack>
-				</DrawerCustom>
-			</Box>
-		</>
+			<div className={c(styles.popup)}>
+				<MessageFastChoiceMenu loading={loading} messages={messages} />
+			</div>
+
+			<div className={c(styles.shape, styles.shape_bottom)}></div>
+		</div>
 	)
 }
 
@@ -1,2 +1 @@
-export { default as ImageModelsPage } from './image-models'
 export { default as ImageModelPage } from './image-model'
@@ -12,11 +12,12 @@ import { SocialMedia } from '#/shared/ui/social-media-block'
 import { Statistics } from '#/widgets/stats/stats'
 import { NextPageWithLayout } from '#/pages/_app'
 import { getDeviceType } from '#/shared/lib/helpers/get-type-device'
+import { useUserSelector } from '#/entities/user-account'
 
 export interface MainPageProps {}
 
 const Main: NextPageWithLayout<MainPageProps> = () => {
-	const { first_name, account_type } = useAppSelector((state) => state.user)
+	const { first_name, account_type } = useUserSelector()
 
 	const deviceType = getDeviceType()
 
@@ -1,11 +1,136 @@
 .imagebox {
+	position: relative;
+	background-color: var(--air-color);
+	width: 100%;
+
 	@media screen and (max-width: 1000px) {
 		display: none;
 	}
+
+	&__image {
+		position: absolute;
+		right: -530px;
+		bottom: -490px;
+		transform: rotate(-13deg);
+		border: 10px solid rgba(255, 255, 255, 0.3);
+		border-radius: 20px;
+	}
+
+	&__logo {
+		position: absolute;
+		left: 35px;
+		top: 35px;
+	}
 }
 
-.form{
-  @media screen and (max-width: 1000px) {
+.login {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	min-height: 100dvh;
+	background-color: white;
+	overflow: hidden;
+
+	@media screen and (max-width: 1000px) {
+		grid-template-columns: 1fr;
+		grid-auto-rows: max-content;
+		overflow: scroll;
+	}
+
+	&__left {
+		margin: 20px 0px;
+		@media screen and (max-width: 1000px) {
+			height: max-content;
+		}
+	}
+
+	&__or {
+		padding-top: 16px;
+		text-align: center;
+		color: #a4aab5;
+	}
+
+	&__title {
+		font-weight: 700;
+		font-size: 26px;
+		text-align: center;
+		margin-bottom: 16px;
+	}
+
+	&__form {
+		width: 320px;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		margin: 0 auto;
+		@media screen and (max-width: 1000px) {
+			width: 90%;
+		}
+	}
+
+	&__active {
+		width: 100%;
+	}
+
+	&__logo {
+		display: none;
+		margin: 0 auto;
+		margin-bottom: 40px;
+		@media screen and (max-width: 1000px) {
+			display: block;
+		}
+	}
+}
+
+html[data-theme='dark'] {
+	.login {
+		background-color: var(--new-ui-bg-app-color);
+	}
+}
+
+
+.form {
+  width: 100%;
+	&__inputs {
+		display: flex;
+		flex-direction: column;
+		gap: 14px;
+    margin-bottom: 10px;
+	}
+
+	&__navigate {
+    padding-top: 10px;
+    text-align: center;
+    font-size: 16px;
+	}
+}
+
+.input{
+  &__pass{
+    display: flex;
+    align-items: center;
+  }
+  &__label{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     width: 100%;
+  }
+}
+
+.controls {
+	padding-top: 25px;
+	width: 100%;
+
+	&__progress {
+		display: flex;
+		justify-content: center;
+    span{
+      color: var(--air-color);
+    }
 	}
-}
\ No newline at end of file
+
+	&__create {
+		width: 100%;
+	}
+}
+
@@ -0,0 +1,128 @@
+import { RegisterPage } from '#/views/register'
+import '@testing-library/jest-dom'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { jestRender } from '#/../jest/utils/render'
+import { windowMock } from '#/../jest/utils/window-mock'
+import fetchMock from 'jest-fetch-mock'
+import Login from './login'
+import { signIn } from 'next-auth/react'
+import { useShowDataStore } from '#/shared/lib/hooks'
+import { create } from 'zustand'
+import { useRouter } from '#/../__mocks__/next/router'
+
+jest.mock('next-auth/react')
+
+jest.mock('zustand', () => {
+	return {
+		create: jest.fn(),
+	}
+})
+
+const showMessageMock = jest.fn()
+
+jest.mock('#/shared/lib/hooks', () => {
+	return {
+		useShowDataStore: jest.fn(() => {
+			return {
+				showMessage: showMessageMock,
+			}
+		}),
+	}
+})
+
+jest.mock('next/router')
+jest.mock('@sentry/nextjs')
+
+fetchMock.enableMocks()
+windowMock()
+
+describe('login-page', () => {
+	beforeEach(() => {
+		fetchMock.resetMocks()
+	})
+
+	it('renders in register', () => {
+		jestRender(<RegisterPage />)
+
+		const form = screen.getByTestId('register-email-form')
+
+		expect(form).toBeInTheDocument()
+	})
+
+	it('submit by button click', async () => {
+		await act(async () => {
+			jestRender(<Login />)
+		})
+
+		const submitButton = screen.getByTestId('submit-button')
+		const emailInput = screen.getByTestId('email-input')
+		const passwordInput = screen.getByTestId('password-input')
+
+		;(signIn as jest.Mock).mockResolvedValue({
+			error: null,
+			status: 200,
+			ok: true,
+			url: '',
+		})
+
+		fireEvent.change(emailInput, { target: { value: 'aleksander.freelancer@gmail.com' } })
+		fireEvent.change(passwordInput, { target: { value: 'geraldisrivii' } })
+
+		await act(async () => {
+			fireEvent.click(submitButton)
+		})
+
+		await waitFor(() => {
+			expect(signIn).toHaveBeenCalledWith('credentials', {
+				username: 'aleksander.freelancer@gmail.com',
+				password: 'geraldisrivii',
+				redirect: false,
+			})
+		})
+
+		await waitFor(() => {
+			const { push } = useRouter()
+			expect(push).toHaveBeenCalledWith('/')
+		})
+	})
+
+	it('submit by button click with some error (email in example)', async () => {
+		await act(async () => {
+			jestRender(<Login />)
+		})
+		;(useShowDataStore as any as jest.Mock).mockImplementation(() => ({
+			showMessage: showMessageMock,
+		}))
+
+		const submitButton = screen.getByTestId('submit-button')
+		const emailInput = screen.getByTestId('email-input')
+		const passwordInput = screen.getByTestId('password-input')
+
+		;(signIn as jest.Mock).mockResolvedValue({
+			error: 'email_not_correct',
+			status: 400,
+			ok: false,
+			url: '',
+		})
+
+		fireEvent.change(emailInput, { target: { value: 'aleksander.freelancer@gmail.com' } })
+		fireEvent.change(passwordInput, { target: { value: 'geraldisrivii' } })
+
+		await act(async () => {
+			fireEvent.click(submitButton)
+		})
+
+		await waitFor(() => {
+			expect(signIn).toHaveBeenCalledWith('credentials', {
+				username: 'aleksander.freelancer@gmail.com',
+				password: 'geraldisrivii',
+				redirect: false,
+			})
+		})
+
+		await waitFor(() => {
+			expect(showMessageMock).toHaveBeenCalledWith('Неверный email')
+		})
+	})
+})
@@ -1,220 +1,70 @@
 import * as React from 'react'
-import { useCookies } from 'react-cookie'
-import { useForm } from 'react-hook-form'
-import { SubmitErrorHandler } from 'react-hook-form/dist/types/form'
 import { Box, Button, InputAdornment, Link, Stack, TextField, Typography } from '@mui/material'
 import CircularProgress from '@mui/material/CircularProgress'
 import Image from 'next/image'
-import { useRouter } from 'next/router'
-import { signIn } from 'next-auth/react'
-import { PasswordOptions } from '#/features/register-by-email/lib/constants'
-import { IEmailForms } from '#/features/register-by-email/model/types'
 import { useAppSelector } from '#/app/store/store'
-import { emailOptions } from '#/shared'
-import { getDeviceType } from '#/shared/lib/helpers'
+import { c, getDeviceType } from '#/shared/lib/helpers'
 import { InputStyleDark, InputStyleLight } from '#/shared/ui/input'
 import { NextPageWithLayout } from '#/pages/_app'
 import styles from './login.module.scss'
-import { ERROR_MAPPING, ERRROR_YANDEX_TRANSLATE_MAPPING } from '#/pages/api/auth/constants'
 import OpenedEyeSvg from '#/assets/svg/opened-eye.svg?react'
 import ClosedEyeSvg from '#/assets/svg/closed-eye.svg?react'
-import * as Sentry from '@sentry/nextjs'
-import { useEffect } from 'react'
-import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+import { useEffect, useState } from 'react'
 import { YandexAuthButton } from '#/features/yandex-auth-button'
+import { useLoginCookies } from '#/features/login-cookies'
+import { useLoginForm, useLoginValidate } from '#/features/login-form'
+import { useLoginQueryErrors } from '#/features/login-query-errors'
+import LogoSvg from '#/assets/svg/logo.svg?react'
+import { CommonInput } from '#/shared/ui/common-input'
+import { CommonButton } from '#/shared/ui/button'
 
 const Login: NextPageWithLayout = () => {
-	const device = getDeviceType()
+	const { setAllQueryToCookies } = useLoginCookies()
 
-	const { query, push } = useRouter()
+	const { passwordOptions, emailOptions } = useLoginValidate()
 
-	const [, setCookie] = useCookies()
+	const { onMounted } = useLoginQueryErrors()
 
-	React.useEffect(() => {
-		Object.entries(query).forEach(([key, value]) => setCookie(key, value))
-	}, [])
-
-	const { showMessage } = useShowDataStore()
-
-	const [loading, setLoading] = React.useState(false)
-
-	const [passwordShowed, showPassword] = React.useState(false)
-
-	const desktop = device === 'desktop'
+	const [passwordShowed, showPassword] = useState(false)
 
-	const { register, handleSubmit } = useForm()
+	const { register, onSubmit, pending } = useLoginForm()
 
 	useEffect(() => {
-		const params = new URL(window.location.href).searchParams
-
-		const error = params.get('error')
-
-		if (!error || error === '') return
-
-		const expectedError = ERRROR_YANDEX_TRANSLATE_MAPPING[error]
-		showMessage(expectedError ?? 'Не удалось выполнить вход, попробуйте позже')
-		if (!expectedError) Sentry.captureMessage(error)
+		setAllQueryToCookies()
+		onMounted()
 	}, [])
 
-	async function onSubmit(data: any) {
-		setLoading(true)
-
-		const resp = await signIn('credentials', {
-			username: data.email,
-			password: data.password,
-			redirect: false,
-		})
-		if (resp && !resp.ok && resp.error && resp.error !== '') {
-			const expectedError = Object.keys(ERROR_MAPPING).reduce(
-				(prev, curr) => ({ ...prev, [ERROR_MAPPING[curr]]: curr }),
-				{} as Record<string, string>
-			)[resp.error]
-			showMessage(expectedError ?? 'Не удалось выполнить вход, попробуйте позже')
-			if (!expectedError) Sentry.captureMessage(resp.error)
-			setLoading(false)
-		} else {
-			push('/')
-		}
-	}
-
-	const checkError: SubmitErrorHandler<IEmailForms> = (data) => {
-		showMessage(Object.values(data)[0].message || 'Неверные данные')
-	}
-
-	const handleKeyDown = (event: any) => {
-		if (event.key === 'Enter') {
-			handleSubmit(onSubmit)()
-		}
-	}
-
-	const handleInputChangeTrim = (event: any) => {
-		event.target.value = event.target.value.trim()
-	}
-
-	const theme = useAppSelector((state) => state.theme.theme)
-
 	return (
 		<>
-			<Stack
-				className={styles.container}
-				direction={desktop ? 'row' : 'column'}
-				alignItems='center'
-				justifyContent={desktop ? 'space-between' : 'center'}
-				sx={{
-					overflow: 'hidden',
-					padding: 0,
-					margin: desktop ? 0 : '0px auto',
-					backgroundColor: theme === 'light' ? 'white' : '#303035',
-				}}
-			>
-				{!desktop && (
-					<Image
-						style={{ marginTop: desktop ? 0 : '80px' }}
-						src={'/logo.svg'}
-						alt={''}
+			<div className={styles.login}>
+				<div className={styles.login__left}>
+					<LogoSvg
+						className={styles.login__logo}
+						color='#8280FF'
 						width={50}
 						height={50}
 					/>
-				)}
-				<Box
-					className={styles.form}
-					sx={{
-						width: '50%',
-						height: '100vh',
-						display: 'flex',
-						justifyContent: 'center',
-						alignItems: desktop ? 'center' : 'start',
-						marginTop: desktop ? 0 : '10px',
-					}}
-				>
-					<form onKeyDown={handleKeyDown} autoComplete={'off'}>
-						<Box
-							sx={{
-								width: '40vh',
-								height: '100%',
-								marginTop: desktop ? 0 : 5,
-							}}
-							onKeyDown={async (e) => {
-								if (e.key === 'Enter') {
-									await handleSubmit(onSubmit, checkError)
-								}
-							}}
-						>
-							<Stack
-								direction='column'
-								justifyContent='center'
-								alignItems='center'
-								spacing={2}
-							>
-								<Typography
-									sx={{
-										color: theme === 'light' ? '#181C32' : '#E1E1E1',
-										lineHeight: '36.4px',
-										fontSize: '26px',
-										fontWeight: 'bold',
-										marginBottom: '20px',
-									}}
-								>
-									Вход
-								</Typography>
-								<YandexAuthButton />
-								<Typography sx={{ fontSize: '15px', color: '#A4AAB5' }}>
-									или email
-								</Typography>
-								<Typography
-									variant='body2'
-									sx={{
-										color: '#A4AAB5',
-										lineHeight: '19.6px',
-										fontSize: '14px',
-										paddingTop: 1,
-										paddingRight: '90%',
-									}}
-								>
-									Email
-								</Typography>
-								<TextField
-									fullWidth
-									sx={
-										theme === 'light'
-											? { ...InputStyleLight }
-											: { ...InputStyleDark }
-									}
+					<div className={styles.login__form}>
+						<form className={styles.form} onSubmit={onSubmit}>
+							<p className={styles.login__title}>Вход</p>
+
+							<YandexAuthButton />
+							<p className={styles.login__or}>или email</p>
+							<div className={c(styles.form__inputs)}>
+								<CommonInput
 									{...register('email', emailOptions)}
-									onChange={handleInputChangeTrim}
+									variant='primary'
+									label='Email'
+									data-testid='email-input'
+									trim
 								/>
 
-								<Box
-									sx={{
-										width: '100%',
-										justifyContent: 'space-between',
-										display: 'flex',
-									}}
-								>
-									<Box>
-										<Typography
-											variant='body2'
-											display='inline'
-											sx={{
-												color: '#A4AAB5',
-												lineHeight: '19.6px',
-												fontSize: '14px',
-											}}
-										>
-											Пароль
-										</Typography>
-									</Box>
-									<Box>
-										<Typography
-											variant='body2'
-											display='inline'
-											sx={{
-												color: '#8153FB',
-												lineHeight: '19.6px',
-												fontSize: '14px',
-												fontWeight: '500',
-											}}
-										>
+								<CommonInput
+									trim
+									variant='primary'
+									label={
+										<div className={c(styles.input__label)}>
+											<span>Пароль</span>
 											<Link
 												href='/reset'
 												style={{
@@ -224,150 +74,82 @@ const Login: NextPageWithLayout = () => {
 											>
 												Забыли пароль?
 											</Link>
-										</Typography>
-									</Box>
-								</Box>
-								<TextField
+										</div>
+									}
+									className={styles.input}
+									{...register('password', passwordOptions)}
+									data-testid='password-input'
 									type={passwordShowed ? 'text' : 'password'}
-									fullWidth
-									InputProps={{
-										endAdornment: (
-											<InputAdornment position='start'>
-												<div
-													onClick={() =>
-														showPassword((x) => !x)
-													}
-													style={{
-														cursor: 'pointer',
-														display: 'flex',
-														alignItems: 'center',
-													}}
-												>
-													{passwordShowed ? (
-														<ClosedEyeSvg
-															width={24}
-															height={24}
-															color='grey'
-														/>
-													) : (
-														<OpenedEyeSvg
-															width={24}
-															height={24}
-															color='grey'
-														/>
-													)}
-												</div>
-											</InputAdornment>
-										),
-									}}
-									sx={
-										theme === 'light'
-											? { ...InputStyleLight }
-											: { ...InputStyleDark }
+									rightSlot={
+										<button
+											type='button'
+											className={styles.input__pass}
+											onClick={() => showPassword((x) => !x)}
+										>
+											{passwordShowed ? (
+												<ClosedEyeSvg
+													width={24}
+													height={24}
+													color='grey'
+												/>
+											) : (
+												<OpenedEyeSvg
+													width={24}
+													height={24}
+													color='grey'
+												/>
+											)}
+										</button>
 									}
-									{...register('password', {
-										...PasswordOptions,
-									})}
 								/>
-								<Box sx={{ height: '50px', width: '100%' }}>
-									{!loading ? (
-										<Button
-											variant='contained'
-											style={{
-												marginTop: '15px',
-											}}
-											sx={{
-												backgroundColor: '#7F7DF3',
-												color: '#FFFFFF',
-												lineHeight: '20px',
-												fontSize: '16px',
-												fontWeight: '600px',
-												borderRadius: '13px',
-												textTransform: 'none',
-												width: '100%',
-												height: 48,
-												'&:hover': {
-													backgroundColor: '#7F7DF3',
-													opacity: [0.9, 0.8, 0.7],
-												},
-											}}
-											onClick={handleSubmit(onSubmit, checkError)}
-										>
-											Войти
-										</Button>
-									) : (
-										<Box
-											style={{
-												margin: '25px auto',
-												display: 'flex',
-												justifyContent: 'center',
-											}}
-										>
-											<CircularProgress
-												size={30}
-												thickness={5}
-												sx={{ color: '#7F7DF3' }}
-											/>
-										</Box>
-									)}
-									<Box
-										sx={{
-											width: '100%',
-											textAlign: 'center',
-											marginTop: '15px',
-										}}
+							</div>
+
+							<div className={styles.controls}>
+								{pending ? (
+									<div className={styles.controls__progress}>
+										<CircularProgress size={30} thickness={5} />
+									</div>
+								) : (
+									<CommonButton
+										data-testid='submit-button'
+										className={styles.controls__create}
+										variant='primary'
+										type='submit'
 									>
-										<Link
-											href='/register'
-											style={{
-												textDecoration: 'none',
-												color: '#7F7DF3',
-											}}
-										>
-											Зарегистрироваться
-										</Link>
-									</Box>
-								</Box>
-							</Stack>
-						</Box>
-					</form>
-				</Box>
-				{desktop && (
-					<Box
-						className={styles.imagebox}
-						sx={{
-							width: '50%',
-							height: '100vh',
-							backgroundColor: '#8280FF',
-							overflow: 'hidden',
-							position: 'relative',
-						}}
-					>
-						<Image
-							style={{ position: 'absolute', top: 35, left: 35 }}
-							src={'/svg/logo.svg'}
-							alt={''}
-							width={42}
-							height={42}
-						/>
-						<Image
-							src={'/images/dashboard.png'}
-							alt={''}
-							width={900}
-							height={1002}
-							style={{
-								borderRadius: '20px',
-								position: 'relative',
-								zIndex: 1000,
-								bottom: -260,
-								right: -390,
-								border: '10px solid rgba(255, 255, 255, 0.30)',
-								transform: 'rotate(-13deg)',
-							}}
-						/>
-					</Box>
-				)}
-			</Stack>
+										Войти
+									</CommonButton>
+								)}
+							</div>
+							<p className={styles.form__navigate}>
+								<Link
+									href='/register'
+									style={{
+										textDecoration: 'none',
+										color: '#7F7DF3',
+									}}
+								>
+									Зарегистрироватся
+								</Link>
+							</p>
+						</form>
+					</div>
+				</div>
+				<div className={styles.imagebox}>
+					<LogoSvg
+						className={styles.imagebox__logo}
+						color='white'
+						width={50}
+						height={50}
+					/>
+					<Image
+						className={styles.imagebox__image}
+						src='/images/dashboard.png'
+						alt='dashboard'
+						width={900}
+						height={1002}
+					/>
+				</div>
+			</div>
 		</>
 	)
 }
@@ -0,0 +1,56 @@
+import { NavigationBlock } from '#/features/navigation-blocks'
+
+export const mainPageBlocks: NavigationBlock[] = [
+	{
+		title: 'Flux 1.1',
+		content: (
+			<span>
+				Современная нейросеть, способная анализировать данные, обрабатывать информацию и генерировать
+				уникальный контент для различных задач.
+			</span>
+		),
+		enabled: true,
+		cols: 2,
+		link: '/images/flux',
+		image: '/pages/main/flux',
+	},
+	{
+		title: 'Чат-боты',
+		content: <span>Получите доступ к последним версиям самых передовых текстовых моделей.</span>,
+		enabled: true,
+		cols: 1,
+		link: '/chat-bot',
+		image: '/pages/main/chat-bots',
+	},
+	{
+		title: 'Stable Diffusion',
+		content: <span>Превращайте текстовые описания в реалистичные или художественные изображения.</span>,
+		enabled: true,
+		cols: 1,
+		link: '/images/stablediffusion',
+		image: '/pages/main/lion',
+	},
+	{
+		title: 'Создание видео',
+		content: <span>Генерируйте и редактируйте видео с помощью передовых технологий ИИ.</span>,
+		enabled: false,
+		cols: 2,
+		image: '/pages/main/capibara',
+	},
+	{
+		title: 'Копирайтинг',
+		content: <span>Создавайте уникальные, качественные тексты для бизнеса, блогов и рекламы.</span>,
+		enabled: true,
+		cols: 2,
+		link: '/copywriting',
+		image: '/pages/main/copywriting',
+	},
+	{
+		title: 'Улучшение фото',
+		content: <span>Улучшайте качество, устраняйте шум и добавляйте детали с помощью ИИ.</span>,
+		enabled: true,
+		cols: 1,
+		link: '/images/upscaleai',
+		image: '/pages/main/woman',
+	},
+]
@@ -0,0 +1 @@
+export * from './blocks'
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './main'
\ No newline at end of file
@@ -0,0 +1,16 @@
+.grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+	gap: 30px;
+	grid-auto-rows: 400px;
+	padding-top: 72px;
+
+	@media screen and (min-width: 1800px) {
+		grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
+	}
+
+	@media screen and (max-width: 768px) {
+		grid-template-columns: 1fr;
+		grid-auto-rows: 340px;
+	}
+}
@@ -0,0 +1,19 @@
+import { getDeviceType } from '#/shared/lib/helpers/get-type-device'
+import React from 'react'
+import styles from './main.module.scss'
+import { NavigationMainPageBlock } from '#/features/navigation-blocks'
+import { mainPageBlocks } from '../config'
+import { NextPageWithLayout } from '#/pages/_app'
+
+interface MainPageProps {}
+
+export const MainPage: NextPageWithLayout = ({}: MainPageProps) => {
+	const device = getDeviceType()
+	return (
+		<div className={styles.grid} style={{ marginRight: device === 'desktop' ? '80px' : '0' }}>
+			{mainPageBlocks.map((item, index) => (
+				<NavigationMainPageBlock key={index} {...item} />
+			))}
+		</div>
+	)
+}
@@ -0,0 +1,3 @@
+export * from './ui'
+export * from '../../features/navigation-blocks/types'
+export * from './config'
@@ -0,0 +1 @@
+export * from './use-image-bots'
\ No newline at end of file
@@ -0,0 +1,27 @@
+import { ShortModel, getImageBots } from '#/entities/model-entity'
+import { withPending } from '#/shared'
+import { makePrivateRequest } from '#/shared/api'
+import { useShowDataStore } from '#/shared/lib/hooks'
+import { useState } from 'react'
+
+export function useImageBots() {
+  const [bots, setBots] = useState<ShortModel[]>([])
+
+  const { showMessage } = useShowDataStore()
+
+  const [fetchImageBots, pending] = withPending(
+    makePrivateRequest(async () => {
+      const { data, status } = await getImageBots()
+
+      if (status !== 200) return showMessage('Ошибка при получении чат ботов')
+
+      setBots(data)
+    })
+  )
+
+  return {
+    pending,
+    fetchImageBots,
+    bots,
+  }
+}
\ No newline at end of file
@@ -1,3 +1,31 @@
+.container {
+	width: 100%;
+	border-radius: 15px;
+	height: 100%;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	background-color: var(--new-ui-main-color);
+	opacity: 0;
+	z-index: -1;
+	transition: all 0.3s ease-in-out;
+
+	&_active {
+		opacity: 1;
+		z-index: 100;
+	}
+}
+
+.header {
+	width: 70%;
+	margin-bottom: 50px;
+
+	@media screen and (max-width: 768px) {
+		width: 100%;
+		margin-bottom: 0px;
+	}
+}
+
 @keyframes fadein {
 	0% {
 		opacity: 0;
@@ -10,11 +38,37 @@
 	}
 }
 
-.header {
-	width: 70%;
+// .blocked {
+// 	display: flex;
+// 	align-items: center;
+// 	justify-content: center;
+// 	background-color: white;
+// 	border-radius: 100px;
+// 	padding-right: 20px;
+// 	padding: 8px 12px;
+// 	width: max-content;
+
+// 	span {
+// 		color: #ff2372;
+// 		font-weight: 500;
+// 		padding-left: 10px;
+// 		font-size: 14px;
+// 		width: max-content;
+// 	}
+// }
+
+.icon {
+}
+
+.tags {
+	min-width: 100%;
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	justify-content: flex-end;
 
 	@media screen and (max-width: 768px) {
-		width: 100%;
+		justify-content: flex-start;
 	}
 }
 
@@ -30,8 +84,8 @@
 	transition: width 0.3s ease-in-out;
 
 	@media screen and (max-width: 768px) {
-		width: 40px;
 		height: 40px;
+		width: 40px;
 	}
 
 	&__icon {
@@ -66,72 +120,32 @@
 	}
 }
 
-.tags {
-	min-width: 100%;
-	display: flex;
-	gap: 8px;
-	align-items: center;
-	justify-content: flex-end;
-
-	@media screen and (max-width: 768px) {
-		justify-content: flex-start;
-	}
-}
-
-.main {
-	width: 100%;
-	display: flex;
-	justify-content: flex-start;
-	align-items: stretch;
-	gap: 20px;
-	// margin-bottom: 24px;
-
-	.chatWindow {
-		width: 70%;
-		position: relative;
-	}
-
-	.settings {
-		width: 25%;
-	}
-
-	@media (max-width: 768px) {
-		width: 100%;
-		display: flex;
-
-		flex-direction: column-reverse;
-
-		.chatWindow {
-			width: 100%;
-		}
-
-		.settings {
-			width: 100%;
-		}
-	}
-}
-
 .blocked {
+	height: 100%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	background-color: #c32528;
-	// padding-right: 20px;
-	padding: 8px 15px;
-	gap: 5px;
+	padding: 20px;
+	gap: 10px;
 	position: absolute;
+
 	left: 0;
-	bottom: -10px;
+
 	width: 100%;
-	border-radius: 0px 0px 15px 15px;
+	border-radius: 15px;
+	top: 0;
 
-	// @media screen and (max-width: 768px) {
-	//   display: none;
-	// }
+	@media screen and (max-width: 768px) {
+		top: unset;
+		// bottom: -22px;
+		z-index: 1;
+		border-radius: 15px;
+	}
 
 	&__text {
-		color: white;
-		font-size: 14px;
+		color: white !important;
+		font-size: 16px;
 		font-weight: 600;
 	}
 }
@@ -0,0 +1,250 @@
+import { useEffect } from 'react'
+import { Box, Stack } from '@mui/material'
+import Head from 'next/head'
+import { useRouter } from 'next/router'
+
+import styles from './image-model.module.scss'
+
+import BlockedSvg from '#/assets/svg/blocked.svg?react'
+import { useImageBot } from '#/entities/model-entity/model/use-image-bot'
+import { useImageBotCreateImage } from '#/features/image-bot-create-image'
+import { useImagesBotFilters } from '#/features/image-bot-filters'
+import { useImageBotPagination, useImageBotPaginationOld } from '#/features/image-bot-pagination'
+import { NextPageWithLayout } from '#/pages/_app'
+import { Loader } from '#/shared'
+import { c, getDeviceType, getOs } from '#/shared/lib/helpers'
+import { useThemeAndDevice } from '#/shared/lib/hooks'
+import { SvgIcon } from '#/shared/ui/svg'
+import { ImageMessagesList, ImageMessagesListOld } from '#/widgets/messages'
+import { ModelInput } from '#/features/model-input'
+import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+import { CommonTitle } from '#/shared/ui/title'
+import { ImageModelOptions } from '#/widgets/image-model-options'
+import { useImageBotInput } from '#/features/image-bot-input'
+import { POPUP_IMAGE_BOT_PARAMS, getPopupById } from '#/shared/ui/popup'
+
+const ImageModelPage: NextPageWithLayout = () => {
+	const { botParams, fetchBotParams } = useImageBot()
+
+	const deviceType = getDeviceType()
+
+	const deviceOs = getOs()
+
+	const { desktop } = useThemeAndDevice(deviceType, deviceOs)
+
+	const {
+		refScrollMobile,
+		refScrollDesktop,
+		mobileScrollContainer,
+		onObserverMounted,
+		fetchMessages,
+		loading,
+		offset,
+		messages,
+	} = useImageBotPaginationOld(deviceType)
+
+	const { createImage } = useImageBotCreateImage(deviceType, mobileScrollContainer, offset)
+
+	const { onSendMessage, file, setFile, valueInput, setValueInput, inputTypes, requiredTypes } =
+		useImageBotInput(createImage)
+
+	async function onFetch() {
+		await Promise.all([fetchBotParams()])
+	}
+
+	const popup = getPopupById(POPUP_IMAGE_BOT_PARAMS)
+
+	useEffect(() => {
+		onFetch()
+		onObserverMounted()
+	}, [botParams?.slug])
+
+	return (
+		<>
+			<Head>
+				<title>{botParams ? botParams?.title : 'Загрузка...'}</title>
+			</Head>
+			<div className={styles.header}>
+				<CommonTitle
+					title={botParams ? botParams.title : 'Загрузка...'}
+					type={'Изображения'}
+					linkBack={'/deprecated'}
+					rightSlot={
+						<div className={styles.tags}>
+							{botParams &&
+								botParams.tags.map((tag, index) => (
+									<div key={index} className={styles.tag}>
+										<SvgIcon
+											width={23}
+											height={23}
+											url={tag.icon}
+											className={styles.tag__icon}
+										/>
+
+										<span className={styles.tag__text}>{tag.title}</span>
+									</div>
+								))}
+						</div>
+					}
+				/>
+			</div>
+			<Box
+				display={'flex'}
+				justifyContent='space-between'
+				alignItems='start'
+				flexDirection={desktop ? 'row' : 'column-reverse'}
+				sx={{
+					marginBottom: desktop ? 0 : 2,
+					width: desktop ? '97%' : '100%',
+					marginTop: desktop ? 3 : '15px',
+				}}
+			>
+				<Box
+					sx={{
+						width: desktop ? '73%' : '100%',
+						marginLeft: 0,
+						display: 'flex',
+						flexDirection: desktop ? 'column' : 'column-reverse',
+					}}
+				>
+					{desktop ? (
+						<>
+							<Stack
+								alignItems='center'
+								sx={{
+									marginBottom: '15px',
+									position: 'relative',
+									zIndex: 1,
+								}}
+							>
+								<ModelInput
+									value={valueInput}
+									setValue={setValueInput}
+									file={file}
+									setFile={setFile}
+									viewMobileSettings={() => popup.toogleState()}
+									inputTypes={inputTypes}
+									blocked={botParams ? !botParams.enabled : false}
+									sendMessage={(message) => onSendMessage(message, requiredTypes)}
+								/>
+
+								{botParams && !botParams.enabled && (
+									<div className={styles.blocked}>
+										<BlockedSvg width={16} height={16} color='white' />
+										<span className={c(styles.blocked__text)}>
+											Модель недоступна
+										</span>
+									</div>
+								)}
+							</Stack>
+							<Box
+								className={'bg-color-block border-radius-main'}
+								sx={{
+									padding: '30px',
+									position: 'relative',
+								}}
+							>
+								<ImageMessagesListOld
+									isComplete={loading}
+									device={deviceType}
+									images={messages}
+									getMessagesPagination={fetchMessages}
+								/>
+								<Box
+									sx={{
+										position: 'absolute',
+										bottom: '0',
+										visibility: 'hidden',
+										height: '800px',
+										width: '100%',
+									}}
+									ref={refScrollDesktop}
+								></Box>
+							</Box>
+						</>
+					) : (
+						<Box
+							className={'bg-color-block border-radius-main'}
+							sx={{ position: 'relative' }}
+						>
+							<div
+								className={c(
+									styles.container,
+									loading && offset.current === 0 && styles.container_active
+								)}
+							>
+								<div
+									style={{
+										position: 'absolute',
+										top: '50%',
+										left: '50%',
+										transform: 'translate(-50%, -50%)',
+									}}
+								>
+									<Loader />
+								</div>
+							</div>
+							<div style={{ position: 'relative', borderRadius: '13px' }}>
+								<Box
+									sx={{
+										padding: '30px',
+										height: `calc(100dvh - 116px - 61px - 15px ${
+											botParams && !botParams.enabled ? '- 17px' : '- 23.5px'
+										})`,
+										overflowY: 'scroll',
+										overflowX: 'hidden',
+										position: 'relative',
+									}}
+									ref={mobileScrollContainer}
+									className={'smallScroll'}
+								>
+									<div
+										style={{ position: 'absolute', top: 300 }}
+										ref={refScrollMobile}
+									></div>
+									<ImageMessagesListOld
+										isComplete={loading}
+										device={deviceType}
+										images={messages}
+										getMessagesPagination={fetchMessages}
+									/>
+								</Box>
+
+								<Stack
+									alignItems='center'
+									sx={{ zIndex: 10, position: 'relative', margin: 1.25 }}
+								>
+									{botParams && (
+										<ModelInput
+											value={valueInput}
+											setValue={setValueInput}
+											file={file}
+											setFile={setFile}
+											viewMobileSettings={() => popup.toogleState()}
+											inputTypes={inputTypes}
+											blocked={botParams ? !botParams.enabled : false}
+											sendMessage={(message) =>
+												onSendMessage(message, requiredTypes)
+											}
+										/>
+									)}
+									{botParams && !botParams.enabled && (
+										<div className={styles.blocked}>
+											<BlockedSvg width={21} height={21} color='white' />
+											<span className={c(styles.blocked__text)}>
+												Модель недоступна
+											</span>
+										</div>
+									)}
+								</Stack>
+							</div>
+						</Box>
+					)}
+				</Box>
+				{desktop && <ImageModelOptions />}
+			</Box>
+		</>
+	)
+}
+
+export default ImageModelPage
@@ -1,7 +1,6 @@
 .cards {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
-
 	align-items: flex-start;
 	justify-content: flex-start;
 	justify-items: stretch;
@@ -7,20 +7,20 @@ import { useSession } from 'next-auth/react'
 import { useAppSelector } from '#/app/store/store'
 import model_api from '#/shared/api/models/api'
 import { NextPageWithLayout } from '#/pages/_app'
-import { ImageModelCard, IShortModel } from '#/entities/model-entity'
+import { ImageModelCard, ShortModel } from '#/entities/model-entity'
 
 import styles from './image-models.module.scss'
+import { useImageBots } from '../model'
+import { useUserSelector } from '#/entities/user-account'
 
 export const ImageModelsPage: NextPageWithLayout = () => {
-	const [bots, setBots] = useState<IShortModel[] | null>(null)
-	const user = useAppSelector((state) => state.user)
-	const { data, status } = useSession()
+	const { payment_plan } = useUserSelector()
 
-	useEffect(() => {
-		if (!data) return
+	const { bots, fetchImageBots } = useImageBots()
 
-		model_api.getImages(data.access).then((res) => setBots(res))
-	}, [status])
+	useEffect(() => {
+		fetchImageBots()
+	}, [])
 
 	return (
 		<>
@@ -32,7 +32,7 @@ export const ImageModelsPage: NextPageWithLayout = () => {
 					bots.map((item) => {
 						return (
 							<ImageModelCard
-								accessed_models={user.payment_plan.plan.accessed_models}
+								accessed_models={payment_plan.plan.accessed_models}
 								{...item}
 								key={item.uid}
 							/>
@@ -0,0 +1,2 @@
+export { default as ImageModelsPage } from './image-models'
+export { default as ImageModelPage } from './image-model'
@@ -0,0 +1 @@
+export * from './ui'
\ No newline at end of file
@@ -4,7 +4,6 @@ import { Box } from '@mui/material'
 import CircularProgress from '@mui/material/CircularProgress'
 import { useRouter } from 'next/router'
 
-import { addReferral } from '#/entities/user-account/model/user-type-slice'
 import { NextPageWithLayout } from '#/pages/_app'
 
 export interface ReferralRegisterProps {
@@ -12,12 +11,10 @@ export interface ReferralRegisterProps {
 }
 
 const ReferralRegister: NextPageWithLayout<ReferralRegisterProps> = ({ email }) => {
-	const dispatch = useDispatch()
 	const { push } = useRouter()
 
 	useEffect(() => {
 		localStorage.setItem('referral', email)
-		dispatch(addReferral(email))
 		push('/register')
 	}, [])
 
@@ -1,11 +1,88 @@
 .imagebox {
+	position: relative;
+	background-color: var(--air-color);
+	width: 100%;
+
+	@media screen and (max-width: 1000px) {
+		display: none;
+	}
+
+	&__image {
+		position: absolute;
+		right: -530px;
+		bottom: -490px;
+		transform: rotate(-13deg);
+		border: 10px solid rgba(255, 255, 255, 0.3);
+		border-radius: 20px;
+	}
+
+	&__logo {
+		position: absolute;
+		left: 35px;
+		top: 35px;
+	}
+}
+
+.register {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	min-height: 100dvh;
+	background-color: white;
+	overflow: hidden;
+
 	@media screen and (max-width: 1000px) {
+		grid-template-columns: 1fr;
+		grid-auto-rows: max-content;
+		overflow: scroll;
+	}
+
+	&__left {
+		margin: 20px 0px;
+		@media screen and (max-width: 1000px) {
+			height: max-content;
+		}
+	}
+
+	&__or {
+		padding-top: 16px;
+		text-align: center;
+		color: #a4aab5;
+	}
+
+	&__title {
+		font-weight: 700;
+		font-size: 26px;
+		text-align: center;
+		margin-bottom: 16px;
+	}
+
+	&__form {
+		width: 320px;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		margin: 0 auto;
+		@media screen and (max-width: 1000px) {
+			width: 90%;
+		}
+	}
+
+	&__active {
+		width: 100%;
+	}
+
+	&__logo {
 		display: none;
+		margin: 0 auto;
+		margin-bottom: 40px;
+		@media screen and (max-width: 1000px) {
+			display: block;
+		}
 	}
 }
 
-.form{
-  @media screen and (max-width: 1000px) {
-    width: 100%;
+html[data-theme='dark'] {
+	.register {
+		background-color: var(--new-ui-bg-app-color);
 	}
-}
\ No newline at end of file
+}
@@ -1,172 +1,76 @@
 import * as React from 'react'
-import { useEffect, useState } from 'react'
-import { useCookies } from 'react-cookie'
-import { useDispatch } from 'react-redux'
-import Box from '@mui/material/Box'
-import Button from '@mui/material/Button'
-import Stack from '@mui/material/Stack'
-import Typography from '@mui/material/Typography'
+import { useState } from 'react'
 import Image from 'next/image'
-import { useRouter } from 'next/router'
-import { signIn } from 'next-auth/react'
 
-import { addReferral } from '#/entities/user-account/model/user-type-slice'
 import { RegisterEmailForm } from '#/features/register-by-email'
 import { useAppSelector } from '#/app/store/store'
-import { TDeviceProp } from '#/shared/lib/types/entities'
 import { getDeviceType } from '#/shared/lib/helpers'
 import { NextPageWithLayout } from '#/pages/_app'
 
 import styles from './register.module.scss'
 import { YandexAuthButton } from '#/features/yandex-auth-button'
+import { useReferrall } from '#/features/referal'
 
-const Register: NextPageWithLayout = () => {
-	const device = getDeviceType()
-
-	const desktop = device === 'desktop'
+import LogoSvg from '#/assets/svg/logo.svg?react'
 
+const Register: NextPageWithLayout = () => {
 	const [success, setSuccess] = useState(false)
-	const [isReferral, setIsReferral] = useState<boolean>(true)
-
-	const theme = useAppSelector((state) => state.theme.theme)
-	const user = useAppSelector((state) => state.user)
-	const dispatch = useDispatch()
-
-	const { push } = useRouter()
-
-	const onSuccessRegister = () => {
-		setSuccess(true)
-		setTimeout(() => push('/login'), 15000)
-	}
 
-	useEffect(() => {
-		if (localStorage.getItem('referral')) {
-			setIsReferral(false)
-			dispatch(addReferral(localStorage.getItem('referral')))
-			console.log(localStorage.getItem('referral'))
-		} else {
-			setIsReferral(true)
-		}
-	}, [])
+	const { referral } = useReferrall()
 
 	return (
-		<Stack
-			direction={desktop ? 'row' : 'column'}
-			alignItems='center'
-			justifyContent={desktop ? 'space-between' : 'center'}
-			sx={{
-				overflow: 'hidden',
-				padding: 0,
-				margin: desktop ? 0 : '0px auto',
-				backgroundColor: theme === 'light' ? 'white' : '#303035',
-			}}
-		>
-			{!desktop && (
-				<Image
-					style={{ marginTop: desktop ? 0 : '20px' }}
-					src={'/logo.svg'}
-					alt={''}
+		<main className={styles.register}>
+			<div className={styles.register__left}>
+				<LogoSvg
+					className={styles.register__logo}
+					color='#8280FF'
 					width={50}
 					height={50}
 				/>
-			)}
-			<Box
-        className={styles.form}
-				sx={{
-					width: desktop ? '50%' : '100%',
-					height: '100vh',
-					display: 'flex',
-					justifyContent: 'center',
-					alignItems: 'center',
-					marginTop: desktop ? 0 : '10px',
-				}}
-			>
-				<Box
-					sx={{
-						width: '40vh',
-						height: '100%',
-						marginTop: desktop ? 0 : 2,
-						justifyContent: 'center',
-						alignItems: 'center',
-						display: 'flex',
-					}}
-				>
+				<div className={styles.register__form}>
 					{success ? (
-						<Box textAlign='center'>
-							<Typography className='text'>
-								Вы успешно зарегистрированы.
-								<br />
-								Мы отправили письмо для верификации на ваш email. В случае отсутствия, проверьте
-								папку Спам.
-								<br />
-								<br />
-								Если вы регистрировались с корпоративной почты и письмо-подтверждение вам не
-								пришло, рекомендуем зарегистрироваться с личной почты
-							</Typography>
-						</Box>
+						<p className='text'>
+							Вы успешно зарегистрированы.
+							<br />
+							Мы отправили письмо для верификации на ваш email. В случае
+							отсутствия, проверьте папку Спам.
+							<br />
+							<br />
+							Если вы регистрировались с корпоративной почты и
+							письмо-подтверждение вам не пришло, рекомендуем
+							зарегистрироваться с личной почты
+						</p>
 					) : (
-						<Stack direction='column' justifyContent='center' alignItems='center' spacing={2}>
-							<Typography
-								sx={{
-									color: theme === 'light' ? '#181C32' : '#E1E1E1',
-									lineHeight: '36.4px',
-									fontSize: '26px',
-									fontWeight: 'bold',
-									marginBottom: '20px',
-								}}
-							>
-								Регистрация
-							</Typography>
+						<div className={styles.register__active}>
+							<p className={styles.register__title}>Регистрация</p>
 
-							{user.referral === '' && isReferral && (
+							{!referral && (
 								<>
 									<YandexAuthButton />
-									<Typography sx={{ fontSize: '15px', color: '#A4AAB5' }}>
-										или email
-									</Typography>
+									<p className={styles.register__or}>или email</p>
 								</>
 							)}
-							<RegisterEmailForm successLogin={onSuccessRegister} />
-						</Stack>
+							<RegisterEmailForm successLogin={() => setSuccess(true)} />
+						</div>
 					)}
-				</Box>
-			</Box>
-			{desktop && (
-				<Box
-          className={styles.imagebox}
-					sx={{
-						width: '50%',
-						height: '100vh',
-						backgroundColor: '#8280FF',
-						overflow: 'hidden',
-						position: 'relative',
-					}}
-				>
-					<Image
-						style={{ position: 'absolute', top: 35, left: 35 }}
-						src={'/svg/logo.svg'}
-						alt={''}
-						width={42}
-						height={42}
-					/>
-					<Image
-						src={'/images/dashboard.png'}
-						alt={''}
-						width={900}
-						height={1002}
-						style={{
-							borderRadius: '20px',
-							position: 'relative',
-							zIndex: 1000,
-							bottom: -260,
-							right: -390,
-							border: '10px solid rgba(255, 255, 255, 0.30)',
-							transform: 'rotate(-13deg)',
-						}}
-					/>
-				</Box>
-			)}
-		</Stack>
+				</div>
+			</div>
+			<div className={styles.imagebox}>
+				<LogoSvg
+					className={styles.imagebox__logo}
+					color='white'
+					width={50}
+					height={50}
+				/>
+				<Image
+					className={styles.imagebox__image}
+					src='/images/dashboard.png'
+					alt='dashboard'
+					width={900}
+					height={1002}
+				/>
+			</div>
+		</main>
 	)
 }
 
@@ -5,7 +5,6 @@ import Button from '@mui/material/Button'
 import axios from 'axios'
 import Image from 'next/image'
 import Router from 'next/router'
-import { Layout } from '#/app/layout'
 import { useAppSelector } from '#/app/store/store'
 import { Error, Input } from '#/shared'
 import { API_URL } from '#/shared/lib/constants/constants'
@@ -0,0 +1 @@
+export * from './upscale-page'
\ No newline at end of file
@@ -0,0 +1,129 @@
+.main {
+	margin-right: 60px;
+	position: relative;
+	height: 100%;
+}
+
+.lottie {
+	&__wrapper {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
+
+.loading {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+  object-fit: contain;
+
+  > canvas{
+    object-fit: contain;
+    width: 40% !important;
+    height: 40% !important;
+  }
+}
+
+.controls {
+	position: absolute;
+	bottom: 20px;
+	left: 50%;
+	transform: translateX(-50%);
+	display: flex;
+	z-index: 100;
+	align-items: center;
+	gap: 10px;
+
+	&__settings {
+		height: 50px;
+		width: 50px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 13px;
+		border: 1px solid var(--new-ui-gray-color);
+	}
+}
+
+.general {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding-top: 60px;
+
+	&__accent {
+		color: var(--air-color);
+	}
+
+	&__text {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.7ch;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+		color: white;
+
+		font-size: 18px;
+		font-weight: 600;
+		margin-bottom: 20px;
+	}
+
+	&__desc {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		display: flex;
+		z-index: 1;
+		align-items: center;
+		flex-direction: column;
+	}
+
+	&__settings {
+		display: flex;
+		gap: 4px;
+		align-items: center;
+		color: var(--air-color);
+	}
+
+	&__imgbox {
+		width: 900px;
+		position: relative;
+		border-radius: 20px;
+		overflow: hidden;
+
+		&::after {
+			content: '';
+			display: block;
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+
+			background-color: rgba(52, 52, 52, 0.2);
+
+			[data-theme='dark'] & {
+				background-color: rgba(0, 0, 0, 0.2);
+			}
+		}
+	}
+
+	&__img {
+		width: 100%;
+		height: auto;
+	}
+}
@@ -0,0 +1,110 @@
+import { NextPageWithLayout } from '#/pages/_app'
+import React, { useEffect, useRef, useState } from 'react'
+
+import styles from './upscale-page.module.scss'
+import { DotLottieReact } from '@lottiefiles/dotlottie-react'
+
+import { c, Loader } from '#/shared'
+import Image from 'next/image'
+import { UpscaleEmpty } from '#/widgets/upscale-empty'
+import SettingsSvg from '#/assets/svg/settings.svg?react'
+import ArrowDropDownSvg from '#/assets/svg/arrow-dropdown.svg?react'
+import { CommonButton } from '#/shared/ui/button'
+import StarsSvg from '#/assets/svg/stars.svg?react'
+import { UpscaleSettingsPopup } from '#/features/upscale-settings'
+import { getPopupById, POPUP_UPSCALE_SETTINGS } from '#/shared/ui/popup'
+import AnimationBgSvg from '#/assets/svg/animation-bg.svg?react'
+
+interface UpscalePageProps {}
+
+export const UpscalePage: NextPageWithLayout = ({}: UpscalePageProps) => {
+	const [images, setImages] = useState<File[]>([])
+
+	const [pending, setPending] = useState(false)
+
+	const popup = getPopupById(POPUP_UPSCALE_SETTINGS)
+
+	function onUpscalePhoto() {
+		const file = images[0]
+
+		setPending(true)
+
+		// ждем бек
+	}
+
+	useEffect(() => {
+		console.log(images)
+	}, [images])
+
+	return (
+		<main className={styles.main}>
+			{!images.length && <UpscaleEmpty images={images} setImages={setImages} />}
+
+			{images.length > 0 && (
+				<section className={styles.general}>
+					<div className={styles.general__imgbox}>
+						<Image
+							className={styles.general__img}
+							width={800}
+							height={600}
+							src={URL.createObjectURL(images[0])}
+							alt='initial'
+						/>
+						{!pending ? (
+							<div className={styles.general__desc}>
+								<div className={styles.general__text}>
+									<span>Выберите нужные</span>
+									<div className={styles.general__settings}>
+										<SettingsSvg color='#8280FF' width={20} height={20} />
+										<span>параметры</span>
+									</div>
+									<span>улучшения</span>
+									<br />
+									<span>и нажмите</span>
+									<span className={styles.general__accent}>Улучшить фото</span>
+								</div>
+								<ArrowDropDownSvg width={13} height={9} color='white' />
+							</div>
+						) : (
+							<div className={styles.lottie__wrapper}>
+								<DotLottieReact
+									src='https://lottie.host/dcebaa39-57ff-460b-bf83-2771360e5f48/j2PSXEHs3d.lottie'
+									loop
+									color='white'
+									autoplay
+									className={styles.lottie}
+								/>
+								<DotLottieReact
+									src='https://lottie.host/72d73e5a-16dc-4c27-b7d9-799eec01b483/XDRtD3TgOa.lottie'
+									loop
+									autoplay
+									className={styles.loading}
+								/>
+							</div>
+						)}
+					</div>
+
+					<div className={styles.controls}>
+						<CommonButton disabled={pending} onClick={onUpscalePhoto} variant='primary'>
+							{pending ? (
+								<Loader size={20} style={{ color: 'white ' }} />
+							) : (
+								<StarsSvg color='white' width={20} height={20} />
+							)}
+							<span>{pending ? 'Улучшение фото...' : 'Улучшить фото'}</span>
+						</CommonButton>
+						<button
+							onClick={() => {
+								popup.toogleState()
+							}}
+							className={styles.controls__settings}
+						>
+							<SettingsSvg color='#A4AAB5' width={20} height={20} />
+						</button>
+						<UpscaleSettingsPopup />
+					</div>
+				</section>
+			)}
+		</main>
+	)
+}
@@ -0,0 +1 @@
+export * from './ui'
\ No newline at end of file
@@ -5,11 +5,10 @@ import axios from 'axios'
 import { Dayjs } from 'dayjs'
 import { useSession } from 'next-auth/react'
 
-import { getAll, ResponseAllInfo } from '#/entities/user-account/model/user-type-slice'
 import { ResponseGetPersons } from '#/features/invite-person-in-business'
 import { useAppSelector } from '#/app/store/store'
 import styles from '#/app/styles/business.module.scss'
-import { Error, InputStyleDark, InputStyleLight } from '#/shared'
+import { InputStyleDark, InputStyleLight } from '#/shared'
 import { API_URL } from '#/shared/lib/constants'
 import { DateInput } from '#/shared/ui/date-input/date-input'
 import { Info } from '#/widgets/business-info'
@@ -65,10 +64,14 @@ export default function BusinessHost() {
 	}
 
 	const download = () => {
-		axios.get(API_URL + `/auth/business-host/download-expenses?type=employees&from_date=${fromDate}&to_date=${toDate}`, {
-			responseType: 'arraybuffer',
-			headers: { Authorization: `Bearer ${data?.access}` },
-		}).then((res) => {
+		axios.get(
+			API_URL +
+				`/auth/business-host/download-expenses?type=employees&from_date=${fromDate}&to_date=${toDate}`,
+			{
+				responseType: 'arraybuffer',
+				headers: { Authorization: `Bearer ${data?.access}` },
+			}
+		).then((res) => {
 			const file = new Blob([res.data], {
 				type: 'application/ms-excel;charset=utf-8',
 			})
@@ -82,7 +85,11 @@ export default function BusinessHost() {
 	}
 
 	useEffect(() => {
-		axios.put(API_URL + '/auth/business-host', { token_cap_enabled: mailing }, { headers: { Authorization: `Bearer ${data?.access}` } })
+		axios.put(
+			API_URL + '/auth/business-host',
+			{ token_cap_enabled: mailing },
+			{ headers: { Authorization: `Bearer ${data?.access}` } }
+		)
 	}, [mailing])
 
 	return (
@@ -91,13 +98,25 @@ export default function BusinessHost() {
 			<ModelsList />
 			{info?.is_ip_whitelist_enabled ? <IpList /> : <></>}
 			<BusinessGroups company_uid={info?.uid} />
-			<PersonsList personsList={personsList} setPersonsList={setPersonsList} addList={addList} />
-			<SecurityList securityList={securityList} setSecurityList={setSecurityList} addList={addList} />
+			<PersonsList
+				personsList={personsList}
+				setPersonsList={setPersonsList}
+				addList={addList}
+			/>
+			<SecurityList
+				securityList={securityList}
+				setSecurityList={setSecurityList}
+				addList={addList}
+			/>
 			<Box className={styles2.wrap}>
 				<Box className={styles2.title2}>
 					<Box>
 						<Typography className={styles.name}>Затраты</Typography>
-						<ArrowUpOrDown directionY={showPersons} onClick={() => setShowPersons((prev) => !prev)} className={styles2.arrow} />
+						<ArrowUpOrDown
+							directionY={showPersons}
+							onClick={() => setShowPersons((prev) => !prev)}
+							className={styles2.arrow}
+						/>
 					</Box>
 				</Box>
 				{showPersons && (
@@ -116,7 +135,13 @@ export default function BusinessHost() {
 	)
 }
 
-const MailingBlock = ({ info, mailing }: { info: InfoBusiness | null | undefined; mailing: boolean | undefined }) => {
+const MailingBlock = ({
+	info,
+	mailing,
+}: {
+	info: InfoBusiness | null | undefined
+	mailing: boolean | undefined
+}) => {
 	const [showPersons, setShowPersons] = useState(true)
 	const [newMail, setNewMail] = useState<string>('')
 	const theme = useAppSelector((state) => state.theme.theme)
@@ -146,7 +171,11 @@ const MailingBlock = ({ info, mailing }: { info: InfoBusiness | null | undefined
 	}
 
 	const req = async (mailingArr: string[]) => {
-		await axios.put(API_URL + '/auth/business-host', { token_cap_emails: mailingArr }, { headers: { Authorization: `Bearer ${data?.access}` } })
+		await axios.put(
+			API_URL + '/auth/business-host',
+			{ token_cap_emails: mailingArr },
+			{ headers: { Authorization: `Bearer ${data?.access}` } }
+		)
 	}
 
 	return (
@@ -155,7 +184,9 @@ const MailingBlock = ({ info, mailing }: { info: InfoBusiness | null | undefined
 				<Box className={styles2.wrap}>
 					<Box className={styles2.title2}>
 						<Box>
-							<Typography className={styles.name}>Уведомления о низком балансе</Typography>
+							<Typography className={styles.name}>
+								Уведомления о низком балансе
+							</Typography>
 							<ArrowUpOrDown
 								directionY={showPersons}
 								onClick={() => setShowPersons((prev) => !prev)}
@@ -173,11 +204,19 @@ const MailingBlock = ({ info, mailing }: { info: InfoBusiness | null | undefined
 										placeholder={'Введите почту'}
 										onChange={(e) => setNewMail(e.target.value)}
 										fullWidth
-										sx={theme === 'light' ? { ...InputStyleLight } : { ...InputStyleDark }}
+										sx={
+											theme === 'light'
+												? { ...InputStyleLight }
+												: { ...InputStyleDark }
+										}
 									/>
 								</Box>
 
-								<Button onClick={addMailingUser} size={'large'} className='btn-classic'>
+								<Button
+									onClick={addMailingUser}
+									size={'large'}
+									className='btn-classic'
+								>
 									Добавить
 								</Button>
 							</Box>
@@ -193,7 +232,11 @@ const MailingBlock = ({ info, mailing }: { info: InfoBusiness | null | undefined
 											xmlns='http://www.w3.org/2000/svg'
 											className={styles.pointer}
 											onClick={() => {
-												setAllMails(allMails.filter((item) => item !== el))
+												setAllMails(
+													allMails.filter(
+														(item) => item !== el
+													)
+												)
 											}}
 										>
 											<rect
@@ -4,7 +4,6 @@ import Switch from '@mui/material/Switch'
 import axios from 'axios'
 import { useSession } from 'next-auth/react'
 
-import { ResponseAllInfo } from '#/entities/user-account/model/user-type-slice'
 import { useAppSelector } from '#/app/store/store'
 import { Balance } from '#/shared'
 import { API_URL } from '#/shared/lib/constants'
@@ -12,6 +11,7 @@ import { API_URL } from '#/shared/lib/constants'
 import { getInfo, InfoBusiness } from '../../api/get-info'
 
 import styles from './info.module.scss'
+import { useUserSelector } from '#/entities/user-account'
 
 export const Info = ({
 	security,
@@ -25,7 +25,7 @@ export const Info = ({
 	setMailing?: React.Dispatch<React.SetStateAction<boolean | undefined>>
 }) => {
 	const [data, setData] = useState<InfoBusiness | null>(null)
-	const type = useAppSelector((state) => state.user.account_type)
+	const { account_type: type } = useUserSelector()
 	const balance = useAppSelector((state) => state.balance.balance)
 	const [value, setValue] = useState<boolean>(false)
 	const { data: session } = useSession()
@@ -51,7 +51,11 @@ export const Info = ({
 	return (
 		<Box className={styles.wrap}>
 			<Box className={styles.left}>
-				{!security ? <Typography className={styles.title}>{data?.company_name}</Typography> : <></>}
+				{!security ? (
+					<Typography className={styles.title}>{data?.company_name}</Typography>
+				) : (
+					<></>
+				)}
 				<Typography
 					className={styles.role}
 					sx={{
@@ -69,7 +73,10 @@ export const Info = ({
 						: 'Участник'}
 				</Typography>
 				{type !== 'business_security' ? (
-					<Typography className={styles.role} sx={{ fontSize: '17px', fontWeight: '400' }}>
+					<Typography
+						className={styles.role}
+						sx={{ fontSize: '17px', fontWeight: '400' }}
+					>
 						Режим валидации по IP :{' '}
 						<Typography component='span' sx={{ color: '#7f7df3' }}>
 							{data?.is_ip_whitelist_enabled ? 'включен' : 'выключен'}
@@ -79,7 +86,10 @@ export const Info = ({
 					<></>
 				)}
 				{value !== undefined && type !== 'business_security' ? (
-					<Typography className={styles.role} sx={{ fontSize: '17px', fontWeight: '400' }}>
+					<Typography
+						className={styles.role}
+						sx={{ fontSize: '17px', fontWeight: '400' }}
+					>
 						Уведомления о низком балансе :{' '}
 						<Switch
 							sx={{
@@ -126,10 +126,18 @@ export const SecurityList = ({
 			<Box className={styles.title2}>
 				<Box>
 					<Typography className={styles.name}>Сотрудники безопасности</Typography>
-					{persons?.length !== 0 && <Typography className={styles.count}>{persons?.length}</Typography>}
-					<ArrowUpOrDown directionY={showPersons} onClick={() => setShowPersons((prev) => !prev)} className={styles.arrow} />
+					{persons?.length !== 0 && (
+						<Typography className={styles.count}>{persons?.length}</Typography>
+					)}
+					<ArrowUpOrDown
+						directionY={showPersons}
+						onClick={() => setShowPersons((prev) => !prev)}
+						className={styles.arrow}
+					/>
 				</Box>
-				<Typography onClick={() => setInviteModal(true)}>Добавить сотрудника</Typography>
+				<Typography onClick={() => setInviteModal(true)}>
+					Добавить сотрудника
+				</Typography>
 			</Box>
 			{showPersons && (
 				<Box className={styles.listWrap}>
@@ -151,93 +159,162 @@ export const SecurityList = ({
 								<Table sx={{ minWidth: 650 }} aria-label='simple table'>
 									<TableHead>
 										<TableRow>
-											<TableCell align='left'>Пользователь</TableCell>
+											<TableCell align='left'>
+												Пользователь
+											</TableCell>
 											<TableCell align='left'>Роль</TableCell>
 											<TableCell align='left'>Статус</TableCell>
-											<TableCell align='left'>Лимит токенов</TableCell>
+											<TableCell align='left'>
+												Лимит токенов
+											</TableCell>
 											<TableCell align='left'></TableCell>
 											<TableCell align='left'></TableCell>
 											<TableCell align='left'></TableCell>
 										</TableRow>
 									</TableHead>
 									<TableBody>
-										{searchPersons?.map((person: ResponseGetPersons) => {
-											const statusPerson = translateEmailStatus(person.acceptance_status)
-											return (
-												<TableRow
-													key={person.email}
-													sx={{
-														'&:last-child td, &:last-child th': { border: 0 },
-													}}
-												>
-													<TableCell className={styles.tableEmail} align='left'>
-														{formatEmail(person.email)}
-													</TableCell>
-													<TableCell align='left'>{RoleSelect[person.account_type]}</TableCell>
-													<TableCell align='left'>
-														<span>
-															{statusPerson + ' '}
-															{statusPerson === 'Приглашен' ? formatDateStatus(person.created_at) : null}
-														</span>
-														{statusPerson === 'Приглашен' ? (
+										{searchPersons?.map(
+											(person: ResponseGetPersons) => {
+												const statusPerson =
+													translateEmailStatus(
+														person.acceptance_status
+													)
+												return (
+													<TableRow
+														key={person.email}
+														sx={{
+															'&:last-child td, &:last-child th':
+																{ border: 0 },
+														}}
+													>
+														<TableCell
+															className={
+																styles.tableEmail
+															}
+															align='left'
+														>
+															{formatEmail(
+																person.email
+															)}
+														</TableCell>
+														<TableCell align='left'>
+															{
+																RoleSelect[
+																	person
+																		.account_type
+																]
+															}
+														</TableCell>
+														<TableCell align='left'>
+															<span>
+																{statusPerson + ' '}
+																{statusPerson ===
+																'Приглашен'
+																	? formatDateStatus(
+																			person.created_at
+																	  )
+																	: null}
+															</span>
+															{statusPerson ===
+															'Приглашен' ? (
+																<button
+																	className={
+																		styles.refreshStatusButton
+																	}
+																	onClick={() => {
+																		passResendModal.setState(
+																			true
+																		)
+																	}}
+																>
+																	<Image
+																		src={
+																			'/svg/refresh-outline.svg'
+																		}
+																		width={14}
+																		height={
+																			14
+																		}
+																		alt={
+																			'Отправить повторно'
+																		}
+																	/>
+																	Отправить
+																	повторно
+																</button>
+															) : null}
+														</TableCell>
+														<TableCell>
+															{Math.floor(
+																+person.token_limit
+															)}
+														</TableCell>
+														<TableCell
+															className={styles.change}
+														>
 															<button
-																className={styles.refreshStatusButton}
 																onClick={() => {
-																	passResendModal.setState(true, {
-																		callback: () => {
-																			console.log('Смена пароля')
-																		},
-																	})
+																	passChangeModal.setState(
+																		true
+																	)
 																}}
 															>
-																<Image
-																	src={'/svg/refresh-outline.svg'}
-																	width={14}
-																	height={14}
-																	alt={'Отправить повторно'}
-																/>
-																Отправить повторно
+																Сменить пароль
 															</button>
-														) : null}
-													</TableCell>
-													<TableCell>{Math.floor(+person.token_limit)}</TableCell>
-													<TableCell className={styles.change}>
-														<button
-															onClick={() => {
-																passChangeModal.setState(true, {
-																	callback: () => {
-																		console.log('Смена пароля')
-																	},
-																})
-															}}
-														>
-															Сменить пароль
-														</button>
-													</TableCell>
+														</TableCell>
 
-													<TableCell
-														onClick={() =>
-															setCurrentPerson(persons?.find((el) => el.email === person.email) || null)
-														}
-														className={styles.tableLimit}
-														align='center'
-													>
-														<span className={styles.change}>Изменить</span>
-													</TableCell>
-													<TableCell className={styles.tableLimit} align='center'>
-														<XMark
-															setNewPersons={(persons) =>
-																setPersons(
-																	(prev) =>
-																		prev?.filter((el) => el.email !== persons?.email) || null
+														<TableCell
+															onClick={() =>
+																setCurrentPerson(
+																	persons?.find(
+																		(el) =>
+																			el.email ===
+																			person.email
+																	) || null
 																)
 															}
-															person={person}
-														/>
-													</TableCell>
-												</TableRow>
-											)
-										})}
+															className={
+																styles.tableLimit
+															}
+															align='center'
+														>
+															<span
+																className={
+																	styles.change
+																}
+															>
+																Изменить
+															</span>
+														</TableCell>
+														<TableCell
+															className={
+																styles.tableLimit
+															}
+															align='center'
+														>
+															<XMark
+																setNewPersons={(
+																	persons
+																) =>
+																	setPersons(
+																		(prev) =>
+																			prev?.filter(
+																				(
+																					el
+																				) =>
+																					el.email !==
+																					persons?.email
+																			) ||
+																			null
+																	)
+																}
+																person={person}
+															/>
+														</TableCell>
+													</TableRow>
+												)
+											}
+										)}
 									</TableBody>
 								</Table>
 							</TableContainer>
@@ -246,7 +323,11 @@ export const SecurityList = ({
 				</Box>
 			)}
 
-			<InviteSecurityModal open={inviteModal} onClose={() => setInviteModal(false)} showNewPersons={showNewPerson} />
+			<InviteSecurityModal
+				open={inviteModal}
+				onClose={() => setInviteModal(false)}
+				showNewPersons={showNewPerson}
+			/>
 			{currentPerson && (
 				<LimitModal
 					list={securityList}
@@ -277,8 +358,16 @@ export const InviteSecurityModal: FC<InviteModalProps> = ({ open, onClose, showN
 	const onSubmit = async (data: any) => {
 		setIsLoading(true)
 
-		const group: string[] | undefined = businessGroups?.map((el) => (el.title === currentGroup ? el.uid : ''))
-		const res = await invitePerson(role, data.limit, data.email, group && group[0], session?.access)
+		const group: string[] | undefined = businessGroups?.map((el) =>
+			el.title === currentGroup ? el.uid : ''
+		)
+		const res = await invitePerson(
+			role,
+			data.limit,
+			data.email,
+			group && group[0],
+			session?.access
+		)
 
 		if (res === null) {
 			showMessage('Что-то пошло не так', 'error')
@@ -319,7 +408,11 @@ export const InviteSecurityModal: FC<InviteModalProps> = ({ open, onClose, showN
 
 					{/* Поле с выбором роли сотрудника */}
 					<Typography className={styles2.hint}>Выберите роль</Typography>
-					<Select list={Object.values(securityRole)} onChange={(e) => setRole(e.target.value as InviteRoles)} value={role}></Select>
+					<Select
+						list={Object.values(securityRole)}
+						onChange={(e) => setRole(e.target.value as InviteRoles)}
+						value={role}
+					></Select>
 
 					{/* Поле с выбором группы */}
 					<Typography className={styles2.hint}>Выберите бизнес-группу</Typography>
@@ -332,10 +425,16 @@ export const InviteSecurityModal: FC<InviteModalProps> = ({ open, onClose, showN
 						value={currentGroup}
 					></Select>
 
-					<Typography className={styles2.hint}>Укажите адрес электронной почты</Typography>
+					<Typography className={styles2.hint}>
+						Укажите адрес электронной почты
+					</Typography>
 					<TextField
 						fullWidth
-						sx={theme === 'light' ? { ...InputStyleLight } : { ...InputStyleDark }}
+						sx={
+							theme === 'light'
+								? { ...InputStyleLight }
+								: { ...InputStyleDark }
+						}
 						{...register('email', emailOptions)}
 						onChange={(e) => {
 							handleEmailChange(e)
@@ -350,7 +449,10 @@ export const InviteSecurityModal: FC<InviteModalProps> = ({ open, onClose, showN
 							<Box>
 								<ButtonGray onClick={onClose} text='Отмена' />
 							</Box>
-							<ButtonUI onClick={handleSubmit(onSubmit, checkError)} text='Отправить' />
+							<ButtonUI
+								onClick={handleSubmit(onSubmit, checkError)}
+								text='Отправить'
+							/>
 						</Box>
 					)}
 				</Box>
@@ -12,7 +12,7 @@
 // import { useAppSelector } from '#/app/store/store'
 // import { TooltipCustom } from '#/shared'
 // import { useAutoScroll } from '#/shared/lib/hooks'
-// import { Message } from '#/shared/lib/types/model'
+// import { Message } from '#/entities/message'
 //
 // import '../styles.module.css'
 //
@@ -0,0 +1,21 @@
+import { useChatBot } from '#/entities/model-entity'
+import { getDeviceType } from '#/shared'
+import { getPopupById, POPUP_CHAT_BOT_PARAMS } from '#/shared/ui/popup'
+import { useState } from 'react'
+
+export const useChatModelOptions = () => {
+	const deviceType = getDeviceType()
+	const desktop = deviceType === 'desktop'
+	const [params, setParams] = useState(false)
+	const filtersMobilePopup = getPopupById(POPUP_CHAT_BOT_PARAMS)
+	const [openSelect, setOpenSelect] = useState(false)
+
+	return {
+		desktop,
+		params,
+		setParams,
+		filtersMobilePopup,
+		openSelect,
+		setOpenSelect,
+	}
+}
@@ -0,0 +1,56 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 30px;
+	background-color: var(--new-ui-main-color);
+	border-radius: 15px;
+
+	&__heading {
+		color: var(--new-ui-gray-color);
+		font-weight: 600;
+		font-size: 14px;
+		letter-spacing: 0.1px;
+		text-transform: uppercase;
+	}
+	&__caption {
+		color: #6e6e6e;
+		font-size: 15px;
+		font-weight: 500px;
+	}
+	&__button {
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		cursor: pointer;
+
+		&_hidden {
+			display: none;
+		}
+	}
+	&__params {
+		overflow-y: auto;
+		overflow-x: unset;
+		display: flex;
+		flex-direction: column;
+		transition: max-height 0.25s;
+		max-height: 100dvh;
+		&_close {
+			max-height: 0px;
+			overflow: hidden;
+		}
+	}
+
+	@media screen and (max-width: 1000px) {
+		padding: 20px;
+
+		&__heading {
+			margin-top: 20px;
+		}
+	}
+}
+
+.arrow {
+	color: #7f7df3;
+	transition: all 250ms;
+}
@@ -0,0 +1,59 @@
+import { BotParamsMap } from '#/features/bot-params'
+import { c } from '#/shared'
+import styles from './chat-model-options.module.scss'
+import ArrowDownSvg from '#/assets/svg/arrow-down.svg?react'
+import { HtmlHTMLAttributes, useState } from 'react'
+import { useChatBot } from '#/entities/model-entity'
+import { ModelParamsSelect } from '#/features/model-params-select'
+import { ResetBotFilters } from '#/features/reset-bot-filters'
+
+interface ChatModelOptionsProps extends HtmlHTMLAttributes<HTMLDivElement> {
+	isMobile?: boolean
+}
+
+export const ChatModelOptions = ({ className, isMobile = false }: ChatModelOptionsProps) => {
+	const [opened, setOpened] = useState(isMobile ? true : false)
+
+	const { inference, botParams } = useChatBot()
+
+	return (
+		<div className={c(styles.container, className)}>
+			{botParams && botParams.inferences && (
+				<>
+					<p className={styles.container__heading}>версии</p>
+					<ModelParamsSelect />
+				</>
+			)}
+			{inference && inference.parameters.length > 0 ? (
+				<>
+					<button
+						className={c(
+							styles.container__button,
+							isMobile && styles.container__button_hidden
+						)}
+						onClick={() => setOpened((x) => !x)}
+					>
+						<p className={styles.container__heading}>параметры</p>
+						<ArrowDownSvg
+							className={c(opened && 'rotate-180', styles.arrow)}
+							width='14'
+							height='20'
+						/>
+					</button>
+
+					<div
+						className={c(
+							!opened && styles.container__params_close,
+							styles.container__params
+						)}
+					>
+						<BotParamsMap />
+						<ResetBotFilters />
+					</div>
+				</>
+			) : (
+				<p className={styles.container__caption}>Параметры отсутствуют</p>
+			)}
+		</div>
+	)
+}
@@ -0,0 +1 @@
+export * from './chat-model-options'
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './ui'
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './use-chat-window-context'
\ No newline at end of file
@@ -0,0 +1,9 @@
+import { useChatBotInput } from '#/features/chat-bot-input'
+import { createUseContext } from '#/shared'
+import { createContext } from 'react'
+
+export const ChatWindowContext = createContext<ReturnType<typeof useChatBotInput> | null>(null)
+
+export const useChatWindowContext = createUseContext(ChatWindowContext)
+
+export const ChatWindowContextProvider = ChatWindowContext.Provider
\ No newline at end of file
@@ -1,3 +1,37 @@
+.wrap {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	border-radius: 15px;
+	background-color: var(--new-ui-main-color);
+	padding: 0px 16px 10px;
+	height: 100%;
+  overflow: hidden;
+
+	@media screen and (max-width: 1000px) {
+		border-radius: 13px;
+		padding: 0px 10px 10px;
+    height: calc(100dvh - 200px);
+	}
+
+	&_tags {
+		@media screen and (max-width: 1000px) {
+      height: calc(100dvh - 240px);
+		}
+	}
+
+  &__input{
+    position: relative;
+    z-index: 10;
+  }
+}
+
+// html[data-theme="dark"] {
+//   .wrap{
+//     background-color: ;
+//   }
+// }
+
 .blocked {
 	align-items: center;
 	justify-content: center;
@@ -1,8 +1,4 @@
-import React, { useCallback } from 'react'
-import { Stack } from '@mui/material'
-import axios from 'axios'
-
-import { useAppSelector } from '#/app/store/store'
+import React, { useMemo, useState } from 'react'
 import { ChatMessagesList } from '#/widgets/messages'
 
 import BlockedSvg from '#/assets/svg/blocked.svg?react'
@@ -11,146 +7,57 @@ import styles from './chat-window.module.scss'
 
 import 'intro.js/introjs.css'
 import { c } from '#/shared'
-import { Device, DeviceOs } from '#/shared/lib/types/entities'
-import { IModelInputs, IModelTag } from '#/entities/model-entity'
-import { Message } from '#/entities/message'
+import { Model, useChatBotParams } from '#/entities/model-entity'
 import { ModelInput } from '#/features/model-input'
-
-interface Elements {
-	element: React.ReactElement
-	position: string
-	onClick?: () => void
-}
-
-export interface ChatProps<T> {
-	device: Device
-	deviceOs?: DeviceOs
-	modelType: string
-	messages: Message[]
-	sendMessage: (message: string, required: (string | null)[]) => boolean
-	openMobileFilters: () => void
-	setting?: T
-	loading: boolean
-	file?: any
-	setFile: React.Dispatch<React.SetStateAction<File | null>>
-	isCalculating: boolean
-	elements?: Elements[]
-	model?: string
-	blocked?: boolean
-	getMessagesPagination?: () => Promise<void>
-	input_types?: IModelInputs[]
-	deleteMessage: (message_uid: string) => void
-	modelTitle: string | undefined
-	currentVersion: string
-	tags: IModelTag[]
+import { useShowDataStore, useThemeAndDevice } from '#/shared/lib/hooks'
+import { useChatBotInput } from '#/features/chat-bot-input'
+import { useChatImageLoad } from '#/features/chat-image-load'
+import { useChatMessageActions } from '#/features/use-chat-message-actions'
+import { ChatWindowContextProvider } from '../model'
+
+export interface ChatProps {
+	setOpenFiltersMobile: React.Dispatch<React.SetStateAction<boolean>>
 }
 
-function Chat<T>({
-	device,
-	loading,
-	messages,
-	modelType,
-	sendMessage,
-	openMobileFilters,
-	setFile,
-	file,
-	getMessagesPagination,
-	input_types,
-	deleteMessage,
-	modelTitle,
-	blocked,
-	currentVersion,
-	deviceOs,
-	tags,
-}: ChatProps<T>) {
-	const desktop = device === 'desktop'
+export function AllChatWindow<T>({ setOpenFiltersMobile }: ChatProps) {
+	const { botParams: model, inference, inferenceInputs: inputs } = useChatBotParams()
 
-	const theme = useAppSelector((state) => state.theme.theme)
-	const [resendValue, setResendValue] = React.useState<string>('')
+	const { sendMessage } = useChatMessageActions()
 
-	const onLoadImage = useCallback((event: React.ChangeEvent<HTMLInputElement> | null, file?: File) => {
-		if (event?.target.files) {
-			setFile(event.target.files[0])
-		}
-		if (file) {
-			setFile(file)
-		}
-	}, [])
-
-	const handleSetResetValue = useCallback(
-		(value: string) => {
-			if (resendValue === value) {
-				setResendValue((prev) => prev + ' ')
-			} else {
-				setResendValue(value)
-			}
-		},
-		[resendValue]
+	const { onSendMessage, file, setFile, setValueInput, valueInput, inputTypes } = useChatBotInput(
+		inference,
+		sendMessage
 	)
 
-	const clearImage = () => {
-		setFile(null)
-	}
+	const { showMessage } = useShowDataStore()
+
+	const requiredTypes = useMemo(() => inputs.filter((p) => p.required).map((p) => p.type), [inputs])
 
 	return (
-		<>
-			<Stack
-				className='tutorial-chat-gpt'
-				direction='column'
-				justifyContent='space-between'
-				alignItems='stretch'
-				spacing={0}
-				sx={{
-					borderRadius: desktop ? '15px' : '13px',
-					backgroundColor: desktop ? (theme === 'light' ? 'white' : '#151518') : theme === 'light' ? 'white' : '#151518',
-					padding: desktop ? (blocked ? 2 : 2) : 1.25,
-					paddingTop: 0,
-					paddingBottom: 1.25,
-					width: '100%',
-					height: desktop ? '75vh' : `calc(100dvh - ${tags.length == 0 ? '200px' : '240px'})`,
-					overflow: 'hidden',
-				}}
-			>
-				<ChatMessagesList
-					onLoadImage={onLoadImage}
-					setResendValue={handleSetResetValue}
-					device={device}
-					getMessagesPagination={getMessagesPagination}
-					messageResponse={messages}
-					modelType={modelType}
-					deleteMessage={deleteMessage}
-					modelTitle={modelTitle}
-					loading={loading}
-				/>
+		<ChatWindowContextProvider value={{ onSendMessage, file, setFile, setValueInput, valueInput, inputTypes }}>
+			<div className={c(styles.wrap, model && !!model.tags.length && styles.wrap_tags)}>
+				<ChatMessagesList model={model} />
 
-				<div style={{ position: 'relative', zIndex: 10 }}>
+				<div className={c(styles.wrap__input)}>
 					<ModelInput
-						resendValue={resendValue}
-						currentVersion={currentVersion}
-						viewMobileSettings={openMobileFilters}
-						input_types={input_types}
-						styles={'chats'}
-						loading={loading}
-						desktop={desktop}
-						blocked={blocked}
-						sendMessage={sendMessage}
-						image={file}
-						unpinImage={clearImage}
-						imageLoad={onLoadImage}
+						value={valueInput}
+						setValue={setValueInput}
+						file={file}
+						setFile={setFile}
+						viewMobileSettings={() => setOpenFiltersMobile((x) => !x)}
+						inputTypes={inputTypes}
+						blocked={model ? !model.enabled : false}
+						sendMessage={(message) => onSendMessage(message, requiredTypes)}
 					/>
 
-					{blocked && (
+					{(model ? !model.enabled : false) && (
 						<div className={styles.blocked}>
 							<BlockedSvg width={21} height={21} color='white' />
 							<span className={c(styles.blocked__text)}>Модель недоступна</span>
 						</div>
 					)}
 				</div>
-			</Stack>
-		</>
+			</div>
+		</ChatWindowContextProvider>
 	)
 }
-
-Chat.displayName = 'Chat'
-
-export const AllChatWindow = Chat
@@ -0,0 +1,77 @@
+.chats {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	&__title {
+		color: #a4aab5;
+		font-weight: 600;
+		font-size: 14px;
+		letter-spacing: 0px;
+
+		@media screen and (max-width: 1000px) {
+			display: none;
+		}
+	}
+
+	&__create {
+		background-color: var(--new-ui-main-color);
+		padding: 9px 11px;
+		border-radius: 10px;
+		margin-top: 3px;
+		position: relative;
+		z-index: 10;
+	}
+}
+
+.wrap {
+	width: 100%;
+	background-color: var(--new-ui-main-color);
+	border-radius: 15px;
+	padding: 30px;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+
+	@media screen and (max-width: 1000px) {
+		margin: 15px 0 0;
+		align-items: center;
+		display: flex;
+	}
+
+	@media (max-width: 1000px) {
+		padding: 10px 20px;
+		display: flex;
+		flex-direction: row-reverse;
+	}
+}
+
+.controls {
+	height: 100%;
+	position: sticky;
+	overflow-y: scroll;
+	display: flex;
+	flex-direction: column;
+	overflow-x: hidden;
+	width: 100%;
+	padding-right: 15px;
+
+
+	@media (max-width: 1000px) {
+		display: flex;
+		height: 100%;
+		flex-direction: row;
+		overflow-x: scroll;
+		overflow-y: hidden;
+	}
+
+	&__item {
+		padding: 0;
+		border: none;
+		width: max-content;
+
+		&:hover {
+			background-color: transparent;
+		}
+	}
+}
@@ -0,0 +1,60 @@
+import React, { HtmlHTMLAttributes, RefObject, useEffect, useMemo, useRef } from 'react'
+
+import { useChats } from '#/features/chats'
+import { c } from '#/shared'
+
+import styles from './chats.module.scss'
+import { CommonTooltip } from '#/shared/ui/tooltip'
+import PlusSvg from '#/assets/svg/plus.svg?react'
+import { ChatButton, useChatActions } from '#/entities/chat'
+import { useChatBotParams } from '#/entities/model-entity'
+import { isBottom } from '#/shared/lib/helpers/refs'
+
+export interface ChatProps extends HtmlHTMLAttributes<HTMLDivElement> {}
+
+export const Chats = ({ className, ...props }: ChatProps) => {
+	const { fetchChats, chatsWithRefs, setCurrentChat } = useChats()
+
+	const scrollableRef = useRef<HTMLDivElement>(null)
+
+	const { onCreateChat } = useChatActions()
+
+	const { botParams } = useChatBotParams()
+
+	useEffect(() => {
+		fetchChats()
+
+		return () => {
+			setCurrentChat(null)
+		}
+	}, [])
+
+	return (
+		<div className={c(styles.wrap, className)} {...props}>
+			<div className={styles.chats}>
+				<p className={styles.chats__title}>ЧАТЫ</p>
+				<CommonTooltip content='Создать чат'>
+					<button
+						onClick={() => {
+							if (!botParams) return
+							onCreateChat({ model: botParams.slug, title: 'Новый чат' })
+						}}
+						className={styles.chats__create}
+					>
+						<PlusSvg width={18} height={18} color='#A4AAB5' />
+					</button>
+				</CommonTooltip>
+			</div>
+			<div ref={scrollableRef} className={c(styles.controls, 'smallScroll')}>
+				{chatsWithRefs.map(({ ref, ...chat }, index) => (
+					<ChatButton
+						ref={ref}
+						popupVertical={isBottom(ref, scrollableRef) ? 'bottom' : 'top'}
+						key={chat.uid}
+						{...chat}
+					/>
+				))}
+			</div>
+		</div>
+	)
+}
@@ -0,0 +1 @@
+export * from './chats'
\ No newline at end of file
@@ -1,86 +0,0 @@
-.title {
-	@media screen and (max-width: 768px) {
-		display: none;
-	}
-}
-
-.wrap {
-	width: 100%;
-	background-color: var(--new-ui-main-color);
-	border-radius: 15px;
-	padding: 30px;
-	height: fit-content;
-	//margin-bottom: 15px;
-	max-height: 350px;
-	overflow-y: auto;
-
-	@media (max-width: 768px) {
-		padding: 10px 20px;
-    display: flex;
-    flex-direction: row-reverse;
-	}
-
-	.container {
-		display: block;
-
-		@media (max-width: 768px) {
-			display: flex;
-			overflow-x: scroll;
-			scrollbar-width: none;
-      width: 100%;
-			-ms-overflow-style: none;
-			&::-webkit-scrollbar {
-				width: 2px;
-			}
-		}
-
-		.item {
-			padding: 0;
-			border: none;
-			width: 100%;
-
-			&:hover {
-				background-color: transparent;
-			}
-
-			.main {
-				display: flex;
-				width: 100%;
-				border: none;
-				justify-content: space-between;
-				background-color: transparent;
-				border-radius: 13px;
-				padding: 12px 15px;
-				text-transform: none;
-
-				&_active {
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-					width: 100%;
-					border: none;
-					border-radius: 13px;
-					padding: 12px 15px;
-					text-transform: none;
-					background-color: rgba(130, 128, 255, 0.15);
-
-					@media (max-width: 768px) {
-						margin-right: 10px;
-						// margin-top: 10px;
-						width: 125px;
-						max-width: 130px;
-						overflow: hidden;
-						padding: 8px 12px;
-						justify-content: space-between;
-					}
-				}
-
-				@media (max-width: 768px) {
-					// margin-top: 10px;
-					width: 100px;
-					padding: 0;
-				}
-			}
-		}
-	}
-}
@@ -1,338 +0,0 @@
-import React from 'react'
-import {
-	Box,
-	Input,
-	Menu,
-	MenuItem,
-	Popover,
-	TextField,
-	ToggleButton,
-	ToggleButtonGroup,
-	Typography,
-} from '@mui/material'
-import axios from 'axios'
-import Image from 'next/image'
-import { useSession } from 'next-auth/react'
-
-import { Chat, ChatsReturn } from '#/features/chats'
-import { useAppSelector } from '#/app/store/store'
-import styles2 from '#/app/styles/account.module.css'
-import { TooltipCustom } from '#/shared'
-import { api } from '#/shared/api/endpoints'
-
-import styles from './chats.module.scss'
-
-export const Chats = ({
-	chats,
-	currentChat,
-	removeChat,
-	setChatSetting,
-	setChat,
-	chatSetting,
-	createNewChat,
-	handleClickChatSetting,
-	isTryRename,
-	setIsTryRename,
-	desktop,
-}: ChatsReturn) => {
-	const theme = useAppSelector((state) => state.theme.theme)
-
-	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
-	const open = Boolean(anchorEl)
-	const [localChat, setLocalChat] = React.useState<string>('')
-	const [rename, setRename] = React.useState<boolean>(false)
-	const [newTitle, setNewTitle] = React.useState<string>('')
-	const [localChats, setLocalChats] = React.useState<Chat[] | null>(null)
-	const { data } = useSession()
-	const inputElement = React.useRef(null)
-
-	const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-		setAnchorEl(event.currentTarget)
-	}
-	const handleClose = () => {
-		setAnchorEl(null)
-	}
-
-	React.useEffect(() => {
-		setLocalChats(chats)
-	}, [chats])
-
-	React.useEffect(() => {
-		if (currentChat) setLocalChat(currentChat)
-	}, [currentChat])
-
-	React.useEffect(() => {
-		if (inputElement.current) {
-			// @ts-ignore
-			inputElement.current.getElementsByTagName('input')[0].focus()
-		}
-	}, [rename])
-
-	const renameChat = () => {
-		if (newTitle !== '' && newTitle !== 'Новый чат') {
-			api.updRenameChat(localChat, newTitle, data?.access).then((res) => {
-				if (res.data && chats)
-					setLocalChats(
-						chats.filter((el) => (el.uid === res.data.uid ? (el.title = res.data.title) : el))
-					)
-				setNewTitle('')
-			})
-		}
-	}
-
-	return (
-		<Box className={styles.wrap} sx={{ margin: desktop ? '0 0 15px 0' : '15px 0 0' }}>
-			<Box display='flex' alignItems='center' justifyContent='space-between'>
-				<Typography
-          className={styles.title}
-					sx={{
-						color: '#A4AAB5',
-						fontWeight: '600',
-						fontSize: '14px',
-						letterSpacing: '0.1px',
-					}}
-				>
-					ЧАТЫ
-				</Typography>
-				<TooltipCustom title='Создать чат'>
-					<Box
-						onClick={createNewChat}
-						sx={{
-							backgroundColor: theme !== 'dark' ? 'white' : '#151518',
-							padding: '9px 11px',
-							borderRadius: '10px',
-							cursor: 'pointer',
-						}}
-					>
-						<Image src={'/plus.svg'} style={{ marginTop: '3px' }} width={18} height={18} alt={''} />
-					</Box>
-				</TooltipCustom>
-			</Box>
-			<ToggleButtonGroup
-				className={styles.container}
-				color='primary'
-				exclusive
-				aria-label='chats'
-				sx={{
-					overflowY: 'scroll',
-					maxHeight: '210px',
-					'::-webkit-scrollbar': {
-						height: '5px',
-						width: '2px',
-					},
-					'::-webkit-scrollbar-track': {
-						background: 'initial',
-						margin: '0',
-					},
-					'::-webkit-scrollbar-thumb': {
-						backgroundColor: 'rgba(217, 217, 217, 0.49)',
-						borderRadius: '5px',
-					},
-				}}
-			>
-				{!(localChats === null || localChats?.length <= 0) &&
-					localChats?.map((el) => {
-						return (
-							<ToggleButton
-								onClick={() => {
-									if (currentChat !== el.uid && !open) {
-										setChat(el?.uid)
-										setLocalChat(el.uid)
-										setRename(false)
-									}
-								}}
-								disableRipple
-								key={el?.uid}
-								className={styles.item}
-								value={el.uid}
-							>
-								{el.uid === localChat && rename ? (
-									<TextField
-										ref={inputElement}
-										fullWidth
-										label={''}
-										placeholder={el.title}
-										value={newTitle}
-										onChange={(e) => setNewTitle(e.target.value)}
-										variant='outlined'
-										sx={{
-											'& .MuiInputBase-input': {
-												padding: '12px 5px 12px 15px',
-												borderRadius: '13px',
-												outline: 'none',
-												width: '100%',
-												color: '#A4AAB5',
-												fontSize: '15px',
-												fontWeight: '500',
-											},
-											'& .MuiInputBase-root': {
-												borderRadius: '13px !important',
-												backgroundColor: 'rgba(130, 128, 255, 0.15)',
-											},
-											'& .MuiFormControl-root-MuiTextField-root': {
-												borderRadius: '13px',
-											},
-										}}
-										InputProps={{
-											endAdornment: (
-												<Box
-													sx={{ cursor: 'pointer' }}
-													display={'flex'}
-													alignItems={'center'}
-													onClick={() => {
-														setRename(false)
-														renameChat()
-													}}
-												>
-													<svg
-														width='20'
-														height='22'
-														viewBox='0 0 20 22'
-														fill='none'
-														xmlns='http://www.w3.org/2000/svg'
-													>
-														<path
-															d='M15.8464 21.75H3.41786C2.51138 21.75 1.64204 21.3899 1.00107 20.7489C0.360093 20.1079 0 19.2386 0 18.3321V3.41786C0 2.51138 0.360093 1.64204 1.00107 1.00107C1.64204 0.360093 2.51138 0 3.41786 0H12.7393C12.9864 0.000223714 13.2234 0.098571 13.398 0.273429L18.9909 5.90357C19.1657 6.07822 19.264 6.31514 19.2643 6.56229V18.3321C19.2643 19.2386 18.9042 20.1079 18.2632 20.7489C17.6222 21.3899 16.7528 21.75 15.8464 21.75ZM3.41786 1.86429C3.00583 1.86429 2.61067 2.02797 2.31932 2.31932C2.02797 2.61067 1.86429 3.00583 1.86429 3.41786V18.3321C1.86429 18.7441 2.02797 19.1394 2.31932 19.4307C2.61067 19.722 3.00583 19.8857 3.41786 19.8857H15.8464C16.2584 19.8857 16.6537 19.722 16.945 19.4307C17.2363 19.1394 17.4 18.7441 17.4 18.3321V6.91029L12.354 1.86429H3.41786Z'
-															fill='#8280FF'
-														/>
-														<path
-															d='M15.5357 20.8177H13.6714V13.0498H5.5928V20.8177H3.72852V12.7391C3.72852 12.3271 3.8922 11.9319 4.18355 11.6406C4.4749 11.3492 4.87006 11.1855 5.28209 11.1855H13.9821C14.3941 11.1855 14.7893 11.3492 15.0806 11.6406C15.372 11.9319 15.5357 12.3271 15.5357 12.7391V20.8177Z'
-															fill='#8280FF'
-														/>
-														<path
-															d='M10.2163 6.83619H5.31942C5.10887 6.83456 4.9007 6.79148 4.7068 6.70941C4.51291 6.62733 4.33708 6.50785 4.18935 6.35783C4.04163 6.20779 3.9249 6.03012 3.84584 5.83498C3.76677 5.63983 3.72692 5.43103 3.72856 5.22047V0.932617H5.59285V4.9719H9.94284V0.932617H11.8071V5.22047C11.8087 5.43103 11.769 5.63983 11.6899 5.83498C11.6108 6.03012 11.494 6.20779 11.3464 6.35783C11.1986 6.50785 11.0228 6.62733 10.8289 6.70941C10.635 6.79148 10.4268 6.83456 10.2163 6.83619Z'
-															fill='#8280FF'
-														/>
-													</svg>
-												</Box>
-											),
-										}}
-									/>
-								) : (
-									<Box
-										className={
-											el?.uid === currentChat
-												? styles.main_active
-												: styles.main
-										}
-									>
-										<Typography
-											className={
-												el?.uid === currentChat
-													? styles2.toggle_text_active_chat
-													: styles2.toggle_text
-											}
-										>
-											{el?.title}
-										</Typography>
-
-										{el?.uid === currentChat && (
-											<Image
-												onClick={handleClick}
-												aria-describedby={
-													Boolean(chatSetting) ? 'simple-popover' : undefined
-												}
-												src={'/svg/chat-setting.svg'}
-												alt={'Настройка чата'}
-												width={18}
-												height={18}
-											/>
-										)}
-										<Menu
-											autoFocus={false}
-											open={open}
-											anchorEl={anchorEl}
-											id='message-menu'
-											onClose={handleClose}
-											onClick={handleClose}
-											sx={{
-												'& .MuiMenu-list': {
-													backgroundColor:
-														theme === 'dark' ? '#303035' : '#EFF0F2',
-													color: '#8280FF',
-													borderRadius: '15px',
-												},
-												'& .MuiPopover-paper': {
-													backgroundColor:
-														theme === 'dark' ? '#303035' : '#EFF0F2',
-													borderRadius: '15px',
-												},
-											}}
-										>
-											<MenuItem
-												autoFocus={false}
-												sx={{
-													fontSize: '15px',
-													fontWeight: '500',
-													display: 'flex',
-													alignItems: 'center',
-													gap: '10px',
-												}}
-												onClick={() => {
-													setRename(true)
-												}}
-											>
-												<svg
-													width='21'
-													height='14'
-													viewBox='0 0 54 39'
-													fill='none'
-													xmlns='http://www.w3.org/2000/svg'
-												>
-													<path
-														d='M19.5 2H32M32 2H44.5M32 2V37M32 37H19.5M32 37H44.5'
-														stroke='#8280FF'
-														strokeWidth='2.5'
-													/>
-													<path
-														d='M24.5 12H7C4.23857 12 2 14.2386 2 17V27H24.5'
-														stroke='#8280FF'
-														strokeWidth='2.5'
-													/>
-													<path
-														d='M39.5 27H47C49.7615 27 52 24.7615 52 22V12H39.5'
-														stroke='#8280FF'
-														strokeWidth='2.5'
-													/>
-												</svg>
-												Переименовать
-											</MenuItem>
-											<MenuItem
-												autoFocus={false}
-												sx={{
-													fontSize: '15px',
-													fontWeight: '500',
-													display: 'flex',
-													alignItems: 'center',
-													gap: '12px',
-												}}
-												onClick={() => {
-													removeChat(localChat)
-												}}
-											>
-												<svg
-													width='21'
-													height='14'
-													viewBox='0 0 60 42'
-													fill='none'
-													xmlns='http://www.w3.org/2000/svg'
-												>
-													<path
-														fillRule='evenodd'
-														clipRule='evenodd'
-														d='M17.4216 27.9757C18.1603 28.707 19.3566 28.707 20.0972 27.9757L24.4097 23.6633L28.6079 27.8633C29.3391 28.5946 30.5278 28.5946 31.2609 27.8633C31.9941 27.1321 31.9941 25.932 31.2609 25.2007L27.0629 21.0195L31.3154 16.7632C32.0542 16.032 32.0542 14.8321 31.3154 14.0821C30.5767 13.3509 29.3785 13.3509 28.6398 14.0821L24.3873 18.3382L20.1891 14.1382C19.456 13.4069 18.2673 13.4069 17.536 14.1382C16.801 14.8694 16.801 16.0695 17.536 16.8008L21.7341 20.982L17.4216 25.2946C16.681 26.0446 16.681 27.2257 17.4216 27.9757ZM3.75289 7.87575C3.75289 5.81325 5.43291 4.12575 7.50666 4.12576L40.3735 4.12576L55.6566 21.0383L40.4279 37.8758L7.50666 37.8758C5.43291 37.8758 3.75288 36.1883 3.75288 34.1258L3.75289 7.87575ZM7.50666 41.6258L41.1534 41.6258C41.6784 41.6633 42.2147 41.4945 42.616 41.1007L59.4648 22.4633C59.8604 22.0696 60.031 21.5445 60.0029 21.0383C60.031 20.5133 59.8604 19.9883 59.4648 19.5945L42.616 0.957118C42.2485 0.600868 41.7685 0.413295 41.2885 0.413295L41.2885 0.375758L7.50666 0.375755C3.36104 0.375755 -0.000889326 3.732 -0.000889688 7.87575L-0.000891983 34.1258C-0.000892345 38.2695 3.36104 41.6258 7.50666 41.6258Z'
-														fill='#8280FF'
-													/>
-												</svg>
-												Удалить
-											</MenuItem>
-										</Menu>
-									</Box>
-								)}
-							</ToggleButton>
-						)
-					})}
-			</ToggleButtonGroup>
-		</Box>
-	)
-}
@@ -1 +1 @@
-export { Chats } from './chats'
+export * from './ui'
\ No newline at end of file
@@ -9,6 +9,7 @@ interface ITooltip {
 	advantages?: string
 	children: React.ReactNode
 	warning?: string
+	isDescriptionRequired?: boolean
 }
 
 const TooltipModelTypes: React.FC<ITooltip> = ({ description, advantages, title, children, warning }) => {
@@ -0,0 +1,41 @@
+
+
+export const firstMarqueeImages: string[] = [
+  '/pages/image-model/1.jpg',
+  '/pages/image-model/2.jpg',
+  '/pages/image-model/3.jpg',
+  '/pages/image-model/4.jpg',
+  '/pages/image-model/5.jpg',
+  '/pages/image-model/6.jpg',
+]
+
+export const secondMarqueeImages: string[] = [
+  '/pages/image-model/7.jpg',
+  '/pages/image-model/8.jpg',
+  '/pages/image-model/9.jpg',
+  '/pages/image-model/10.jpg',
+  '/pages/image-model/11.jpg',
+  '/pages/image-model/12.jpg',
+  '/pages/image-model/13.jpg',
+  '/pages/image-model/14.jpg',
+]
+
+export const thirdMarqueeImages: string[] = [
+  '/pages/image-model/15.jpg',
+  '/pages/image-model/16.jpg',
+  '/pages/image-model/17.jpg',
+  '/pages/image-model/18.jpg',
+  '/pages/image-model/19.jpg',
+  '/pages/image-model/20.jpg',
+]
+
+
+export const fourthMarqueeImages: string[] = [
+  '/pages/image-model/21.jpg',
+  '/pages/image-model/22.jpg',
+  '/pages/image-model/23.jpg',
+  '/pages/image-model/24.jpg',
+  '/pages/image-model/25.jpg',
+  '/pages/image-model/26.jpg',
+  '/pages/image-model/27.jpg',
+]
@@ -0,0 +1 @@
+export * from './example-images'
\ No newline at end of file
@@ -0,0 +1,105 @@
+@keyframes skeleton {
+	0% {
+		background-color: rgba($color: #a4aab5, $alpha: 0.1);
+	}
+	100% {
+		background-color: rgba($color: #a4aab5, $alpha: 0.3);
+	}
+}
+
+.empty {
+	display: flex;
+	gap: 15px;
+
+	&__center {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+
+		z-index: 1;
+
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		@media screen and (max-width: 1200px) {
+			top: 40%;
+		}
+	}
+
+	&__title {
+		margin-bottom: 20px;
+
+		font-size: 44px;
+
+		> br {
+      display: none;
+		}
+
+		@media screen and (max-width: 1200px) {
+			font-size: 36px;
+			text-align: center;
+
+      > br {
+        display: block;
+      }
+		}
+
+    @media screen and (max-width: 800px) {
+      font-size: 28px;
+    }
+  
+
+		span {
+			color: var(--air-color);
+		}
+	}
+
+	&__group {
+		display: flex;
+		flex-direction: column;
+		gap: 15px;
+		transition: all 0.5s ease-in-out;
+	}
+
+	&__marquee {
+		height: calc(100dvh - 20px - 20px - 40px - 27px);
+		min-width: 280px;
+	}
+}
+
+.item {
+	width: 100%;
+	height: 280px;
+	position: relative;
+
+	&::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: rgba($color: #000000, $alpha: 0.7);
+		border-radius: 18px;
+	}
+
+	&__skeleton {
+		width: 100%;
+		height: 100%;
+		border-radius: 10px;
+		background-color: rgba($color: #a4aab5, $alpha: 0.1);
+		animation: skeleton 1s infinite ease-in-out alternate;
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+
+	&__img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		border-radius: 20px;
+	}
+}
@@ -0,0 +1,38 @@
+import Image from 'next/image'
+import React, { useState } from 'react'
+
+import styles from './image-list.module.scss'
+
+interface ValuesListProps {
+	values: string[]
+}
+
+export const ValuesList = ({ values }: ValuesListProps) => {
+	const [imageLoadStates, setImageLoadStates] = useState<boolean[]>(
+		Array(values.length).fill(false)
+	)
+	return (
+		<>
+			{values.map((image, index) => (
+				<div key={index} className={styles.item}>
+					<Image
+						onLoad={() => {
+							setImageLoadStates((prev) => {
+								const newState = [...prev]
+								newState[index] = true
+								return newState
+							})
+						}}
+						width={200}
+						height={200}
+						loading='lazy'
+						className={styles.item__img}
+						src={image}
+						alt={`image-${index}`}
+					/>
+					{!imageLoadStates[index] && <div className={styles.item__skeleton}></div>}
+				</div>
+			))}
+		</>
+	)
+}
@@ -0,0 +1,105 @@
+@keyframes skeleton {
+	0% {
+		background-color: rgba($color: #a4aab5, $alpha: 0.1);
+	}
+	100% {
+		background-color: rgba($color: #a4aab5, $alpha: 0.3);
+	}
+}
+
+.empty {
+	display: flex;
+	gap: 15px;
+
+	&__center {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+
+		z-index: 1;
+
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		@media screen and (max-width: 1200px) {
+			top: 40%;
+		}
+	}
+
+	&__title {
+		margin-bottom: 20px;
+
+		font-size: 44px;
+
+		> br {
+      display: none;
+		}
+
+		@media screen and (max-width: 1200px) {
+			font-size: 36px;
+			text-align: center;
+
+      > br {
+        display: block;
+      }
+		}
+
+    @media screen and (max-width: 800px) {
+      font-size: 28px;
+    }
+  
+
+		span {
+			color: var(--air-color);
+		}
+	}
+
+	&__group {
+		display: flex;
+		flex-direction: column;
+		gap: 15px;
+		transition: all 0.5s ease-in-out;
+	}
+
+	&__marquee {
+		height: calc(100dvh - 20px - 20px - 40px - 27px);
+		min-width: 280px;
+	}
+}
+
+.item {
+	width: 100%;
+	height: 280px;
+	position: relative;
+
+	&::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: rgba($color: #000000, $alpha: 0.7);
+		border-radius: 18px;
+	}
+
+	&__skeleton {
+		width: 100%;
+		height: 100%;
+		border-radius: 10px;
+		background-color: rgba($color: #a4aab5, $alpha: 0.1);
+		animation: skeleton 1s infinite ease-in-out alternate;
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+
+	&__img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		border-radius: 20px;
+	}
+}
@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react'
+import styles from './images-empty.module.scss'
+import * as exampleImages from '../config/example-images'
+import Image from 'next/image'
+import { CommonMarque } from '#/shared/ui/marque'
+import ArrowLongSvg from '#/assets/svg/arrow-long.svg?react'
+import { c } from '#/shared'
+import { ValuesList } from './image-list'
+
+interface ImagesEmptyProps {}
+
+export const ImagesEmpty = ({}: ImagesEmptyProps) => {
+	return (
+		<div className={styles.empty}>
+			<div className={styles.empty__center}>
+				<p className={c(styles.empty__title, 'title-h1')}>
+					<span>Шедевры</span> <br /> в один клик
+				</p>
+				<ArrowLongSvg width={18} height={24} color='white' />
+			</div>
+			{Object.values(exampleImages).map((images, index) => {
+				return (
+					<CommonMarque
+						scrollTime={30}
+						key={index}
+						className={styles.empty__marquee}
+					>
+						<ValuesList values={images} />
+					</CommonMarque>
+				)
+			})}
+		</div>
+	)
+}
@@ -0,0 +1,2 @@
+export * from './images-empty'
+export * from './image-list'
\ No newline at end of file
@@ -0,0 +1,2 @@
+export * from './config'
+export * from './ui'
\ No newline at end of file
@@ -0,0 +1,62 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 30px;
+	background-color: var(--new-ui-main-color);
+	border-radius: 15px;
+	width: 30%;
+	margin-left: 20px;
+
+	@media screen and (max-width: 1000px) {
+		width: 100%;
+		margin: unset;
+	}
+
+	&__heading {
+		color: var(--new-ui-gray-color);
+		font-weight: 600;
+		font-size: 14px;
+		letter-spacing: 0.1px;
+		text-transform: uppercase;
+	}
+	&__caption {
+		color: #6e6e6e;
+		font-size: 15px;
+		font-weight: 500px;
+	}
+	&__button {
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		cursor: pointer;
+
+		&_hidden {
+			display: none;
+		}
+	}
+	&__params {
+		overflow-y: auto;
+		display: flex;
+		flex-direction: column;
+		transition: max-height 0.25s;
+		max-height: 100dvh;
+		&_close {
+			max-height: 0px;
+			overflow: hidden;
+		}
+	}
+
+	@media screen and (max-width: 1000px) {
+		padding: 20px;
+
+		&__heading {
+			margin-top: 20px;
+		}
+	}
+}
+
+.arrow {
+	color: #7f7df3;
+	transition: all 250ms;
+}
@@ -0,0 +1,60 @@
+import { c } from '#/shared'
+import styles from './image-model-options.module.scss'
+import ArrowDownSvg from '#/assets/svg/arrow-down.svg?react'
+import { HtmlHTMLAttributes, useState } from 'react'
+import { ResetBotFilters } from '#/features/reset-bot-filters'
+import { useImageBot } from '#/entities/model-entity/model/use-image-bot'
+import { ImageModelParamsSelect } from '#/features/image-model-params-select'
+import { ImageBotParamsMap } from '#/features/image-bot-params'
+import { ResetImageBotFilters } from '#/features/reset-image-bot-filters'
+
+interface ImageModelOptionsProps extends HtmlHTMLAttributes<HTMLDivElement> {
+	isMobile?: boolean
+}
+
+export const ImageModelOptions = ({ className, isMobile = false }: ImageModelOptionsProps) => {
+	const [opened, setOpened] = useState(isMobile ? true : false)
+
+	const { inference, botParams } = useImageBot()
+
+	return (
+		<div className={c(styles.container, className)}>
+			{botParams && botParams.inferences && (
+				<>
+					<p className={styles.container__heading}>версии</p>
+					<ImageModelParamsSelect />
+				</>
+			)}
+			{inference && inference.parameters.length > 0 ? (
+				<>
+					<button
+						className={c(
+							styles.container__button,
+							isMobile && styles.container__button_hidden
+						)}
+						onClick={() => setOpened((x) => !x)}
+					>
+						<p className={styles.container__heading}>параметры</p>
+						<ArrowDownSvg
+							className={c(opened && 'rotate-180', styles.arrow)}
+							width='14'
+							height='20'
+						/>
+					</button>
+
+					<div
+						className={c(
+							!opened && styles.container__params_close,
+							styles.container__params
+						)}
+					>
+						<ImageBotParamsMap />
+						<ResetImageBotFilters />
+					</div>
+				</>
+			) : (
+				<p className={styles.container__caption}>Параметры отсутствуют</p>
+			)}
+		</div>
+	)
+}
@@ -0,0 +1,2 @@
+
+export * from './image-model-options'
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './ui'
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './use-image-models-popup'
\ No newline at end of file
@@ -0,0 +1,13 @@
+import { useImagesBots } from '#/entities/model-entity'
+import { useMemo, useState } from 'react'
+
+export function useImageModelsPopup() {
+	const { bots, fetchBots, setBots } = useImagesBots()
+
+
+	return {
+		bots,
+		setBots,
+		fetchBots,
+	}
+}
@@ -0,0 +1 @@
+export type CostZones = 30 | 60 | 90
@@ -0,0 +1 @@
+export * from './cost'
\ No newline at end of file
@@ -0,0 +1,74 @@
+.container {
+	position: relative;
+
+	@media (max-width: 768px) {
+		position: static;
+	}
+}
+.wrapper {
+	background: rgba($color: #000000, $alpha: 0.4);
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 104;
+	visibility: hidden;
+	opacity: 0;
+	transition: all 0.3s ease-in-out;
+
+	&_open {
+		visibility: visible;
+		opacity: 1;
+	}
+}
+.select {
+	padding: 5px 12px;
+	background: rgba(#8280ff, 0.1);
+	border-radius: 10px;
+	display: flex;
+	align-items: center;
+	width: max-content;
+	gap: 10px;
+	cursor: pointer;
+
+	&__arrow {
+		padding-top: 5px;
+		@media (max-width: 768px) {
+			width: 15px;
+			height: 15px;
+		}
+	}
+
+	&__title {
+		color: var(--air-color);
+	}
+}
+
+.popup {
+	background: var(--new-ui-main-color);
+	border-radius: 15px;
+	width: max-content;
+	position: absolute;
+	z-index: 105;
+	transform: translateY(20px);
+	visibility: hidden;
+	opacity: 0;
+	transition: all 0.3s ease-in-out;
+	border: 1px solid #40404e4b;
+	max-height: 70vh;
+	overflow-y: scroll;
+	top: calc(100% + 10px);
+
+	@media (max-width: 768px) {
+		left: 0;
+		right: 0;
+		width: fit-content;
+	}
+
+	&_open {
+		visibility: visible;
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
@@ -0,0 +1,41 @@
+import { Typography } from '@mui/material'
+import React, { useEffect } from 'react'
+import styles from './image-models-select.module.scss'
+import { c } from '#/shared/lib/helpers'
+import { useImageModelsPopup } from '../model'
+import { ImagePopupModel } from './image-popup-model'
+import { useRouter } from 'next/router'
+import ArrowDownSvg from '#/assets/svg/arrow-down.svg?react'
+import { getPopupById, POPUP_IMAGE_MODEL } from '#/shared/ui/popup'
+import { ImageModelsPopup } from './image-models.popup'
+import { Model } from '#/entities/model-entity'
+
+export interface ImageModelsPopupProps {
+	model: Model | null
+	className?: string
+}
+
+export const ImageModelsSelect = ({ model, className }: ImageModelsPopupProps) => {
+	const popup = getPopupById(POPUP_IMAGE_MODEL)
+
+	return (
+		<>
+			<div className={c(styles.container, className)}>
+				<div onClick={() => popup.toogleState()} className={c(styles.select)}>
+					<p className={c(styles.select__title, 'title-h2')}>
+						{model ? model.title : 'Загрузка...'}
+					</p>
+					<ArrowDownSvg
+						className={styles.select__arrow}
+						style={{ transform: popup.state ? 'rotate(180deg)' : 'rotate(0deg)' }}
+						fill='#8280FF'
+						width={16}
+						height={16}
+					/>
+				</div>
+
+				<ImageModelsPopup model={model} />
+			</div>
+		</>
+	)
+}
@@ -0,0 +1,25 @@
+
+.popup {
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+
+  max-height: 60dvh;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  border-radius: 15px;
+
+  @media screen and (max-width: 600px) {
+    width: 100vw;
+    max-height: 70dvh;
+  }
+
+  > div:first-child {
+    border-radius: 15px 15px 0px 0px  !important;
+  }
+}
+
+.template{
+  padding: 0px;
+  border-radius: 15px;
+}
\ No newline at end of file
@@ -0,0 +1,47 @@
+import React, { useEffect } from 'react'
+import { useImageModelsPopup } from '../model'
+import styles from './image-models.popup.module.scss'
+import { c } from '#/shared'
+import { ImagePopupModel } from './image-popup-model'
+import { getPopupById, POPUP_IMAGE_MODEL, PopupTemplate } from '#/shared/ui/popup'
+import { useRouter } from 'next/router'
+import { Model } from '#/entities/model-entity'
+
+interface ImageModelsPopupProps {
+	model: Model | null
+}
+
+export const ImageModelsPopup = ({ model, ...props }: ImageModelsPopupProps) => {
+	const { fetchBots, bots } = useImageModelsPopup()
+
+	const popup = getPopupById(POPUP_IMAGE_MODEL)
+
+	const { push } = useRouter()
+
+	async function onFetch() {
+		await fetchBots()
+	}
+
+	useEffect(() => {
+		onFetch()
+	}, [])
+
+	return (
+		<PopupTemplate className={styles.template} id={POPUP_IMAGE_MODEL} {...props}>
+			<div className={c(styles.popup)}>
+				{bots.map((item, index) => (
+					<ImagePopupModel
+						{...item}
+						key={index}
+						averageTokenCost={0}
+						active={model ? item.slug === model.slug : false}
+						setActive={(slug) => {
+							popup.setState(false)
+							push(`/images/${slug}`)
+						}}
+					/>
+				))}
+			</div>
+		</PopupTemplate>
+	)
+}
@@ -0,0 +1,99 @@
+.model {
+	// font-family: Inter;
+	padding: 15px 20px;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	gap: 22px;
+	justify-content: space-between;
+	max-width: 500px;
+	transition: background-color 0.3s ease;
+	position: relative;
+
+	&:hover {
+		background-color: rgba($color: #a4aab5, $alpha: 0.1);
+	}
+
+	@media (max-width: 768px) {
+		// max-width: calc(100% - 100px) !important;
+		width: 100%;
+		// max-width: unset;
+	}
+
+	&_blocked {
+		&:hover {
+			background-color: transparent;
+		}
+	}
+
+	&__blocked {
+		background-color: rgba($color: #000000, $alpha: 0.7);
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding-right: 10px;
+		span {
+			color: white;
+			font-weight: 600;
+			padding-left: 8px;
+		}
+	}
+
+	&__locked {
+		background-color: rgba($color: #000000, $alpha: 0.7);
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding-right: 10px;
+		span {
+			color: white;
+			font-weight: 600;
+			padding-left: 8px;
+		}
+	}
+	&__title {
+		font-weight: 600;
+		font-size: 18px;
+		margin-bottom: 4px;
+	}
+
+	&__description {
+		font-size: 14px;
+		color: #a4aab5;
+		margin-bottom: 7px;
+	}
+
+	&__badges {
+		display: flex;
+		gap: 10px;
+	}
+
+	&__badge {
+		padding: 4px 6px;
+		font-size: 13px;
+		display: flex;
+		align-items: center;
+		gap: 2px;
+		background-color: rgba($color: #a4aab5, $alpha: 0.1);
+		color: white;
+		font-weight: 500;
+		border-radius: 5px;
+	}
+
+	&__time {
+		gap: 6px;
+		color: var(--new-ui-gray-color);
+	}
+	&__cost {
+	}
+}
@@ -1,4 +1,3 @@
-import { IShortModel } from '#/entities/model-entity'
 import React, { useMemo } from 'react'
 
 import styles from './image-popup-model.module.scss'
@@ -7,8 +6,12 @@ import SuccessRoundedSvg from '#/assets/svg/success-rounded.svg?react'
 import ClockSvg from '#/assets/svg/clock.svg?react'
 import LightningSvg from '#/assets/svg/lightning.svg?react'
 import LockSvg from '#/assets/svg/lock.svg?react'
+import BlockedSvg from '#/assets/svg/blocked.svg?react'
+import { useAppSelector } from '#/app/store/store'
+import { ShortModel } from '#/entities/model-entity'
+import { useUserSelector } from '#/entities/user-account'
 
-interface ImagePopupModelProps extends IShortModel {
+interface ImagePopupModelProps extends ShortModel {
 	active: boolean
 	setActive: (slug: string) => void
 	averageTokenCost: number
@@ -29,60 +32,45 @@ export const ImagePopupModel = ({
 	title,
 	description,
 	slug,
-	blocked,
-	actual_stat,
+	enabled,
 	active,
 	averageTokenCost,
 	setActive,
 }: ImagePopupModelProps) => {
-	// жесткий костыль))) - временный
-	const formatedTime = useMemo(() => {
-		if (!actual_stat) return null
+	const user = useUserSelector()
 
-		const seconds = Number(actual_stat.generation_time.split(':')[2])
-
-		const range = Math.ceil(seconds - seconds / 3)
-
-		return `${range} - ${seconds} сек.`
-	}, [actual_stat])
-
-	const costZone = useMemo(() => {
-		if (!actual_stat) return null
-
-		const remainder = Number(actual_stat.tokens_cost) - averageTokenCost
+	const accessed_models = useMemo(
+		() => (user.payment_plan ? user.payment_plan.plan.accessed_models : []),
+		[user]
+	)
 
-		return costZoneColors.find((item) => item.remainder > remainder)
-	}, [actual_stat, averageTokenCost])
+	const isAccess = useMemo(() => accessed_models && accessed_models.includes(slug), [accessed_models])
 
 	return (
-		<div onClick={() => !blocked && setActive(slug)} className={styles.model}>
-			{blocked && (
-				<div className={c(styles.model__blocked)}>
-					<LockSvg color='#8280FF' width={20} height={20} />
-					<span>Недоступно в текущем тарифе</span>
+		<div
+			onClick={() => {
+				if (!enabled || !isAccess) return
+				setActive(slug)
+			}}
+			className={c(styles.model, !enabled && styles.model_blocked)}
+		>
+			{!enabled ? (
+				<div className={styles.model__blocked}>
+					<BlockedSvg width={28} height={28} color='#FF2372' />
+					<span>Модель недоступна</span>
 				</div>
+			) : (
+				!isAccess && (
+					<div className={styles.model__locked}>
+						<LockSvg width={23} height={23} color='#8280FF' />
+						<span>Недоступно в текущем тарифе</span>
+					</div>
+				)
 			)}
 
 			<div className={styles.model__content}>
 				<p className={styles.model__title}>{title}</p>
 				<p className={styles.model__description}>{description}</p>
-
-				{actual_stat && (
-					<div className={styles.model__badges}>
-						<div className={c(styles.model__badge, styles.model__time)}>
-							<ClockSvg width={16} height={16} />
-							<span>{formatedTime}</span>
-						</div>
-
-						<div
-							style={{ color: costZone?.color }}
-							className={c(styles.model__badge, styles.model__cost)}
-						>
-							<LightningSvg fill={costZone?.color} width={10} height={18} />
-							{Number(actual_stat.tokens_cost)}
-						</div>
-					</div>
-				)}
 			</div>
 
 			{active && <SuccessRoundedSvg width={24} height={24} />}
@@ -0,0 +1,3 @@
+export * from './image-models-select'
+export * from './image-popup-model'
+export * from './image-models.popup'
\ No newline at end of file
@@ -0,0 +1,4 @@
+export * from './types'
+export * from './ui'
+export * from './model'
+// export * from './api'
\ No newline at end of file
@@ -0,0 +1,2 @@
+export * from './styles.categories'
+export * from './styles.static'
\ No newline at end of file
@@ -0,0 +1,11 @@
+export const categories: string[] = [
+	'Ретро',
+	'Фотореализм',
+	'Винтаж',
+	'Мультипликация',
+	'Аниме',
+	'Ностальгия',
+	'Классика',
+	'Реалистичное искусство',
+	'Анимация',
+]
@@ -0,0 +1,28 @@
+import { ImageStyle } from "#/entities/image-style";
+
+export const imageStyles: ImageStyle[] = [
+	{
+		label: 'Стиль 1',
+		uid: 'style_1',
+		category: 'Ретро',
+		image: 'https://images.unsplash.com/photo-1511367461989-f85a21fda167?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
+	},
+	{
+		label: 'Стиль 2',
+		uid: 'style_2',
+		category: 'Мультипликация',
+		image: 'https://images.unsplash.com/photo-1511367461989-f85a21fda167?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
+	},
+	{
+		label: 'Стиль 3',
+		uid: 'style_3',
+		category: 'Фотореализм',
+		image: 'https://images.unsplash.com/photo-1511367461989-f85a21fda167?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
+	},
+	{
+		label: 'Стиль 4',
+		uid: 'style_4',
+		category: 'Винтаж',
+		image: 'https://images.unsplash.com/photo-1511367461989-f85a21fda167?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
+	},
+]
@@ -0,0 +1,3 @@
+export * from './styles.favorites'
+export * from './styles.chosen'
+export * from './styles.chosen-categories'
\ No newline at end of file
@@ -0,0 +1,28 @@
+import { useState } from 'react'
+import { imageStyles } from '../config'
+import { ImageStyle } from '#/entities/image-style'
+
+export function useChosenCategories() {
+	const [chosenCategories, setChosenCategories] = useState<string[]>([])
+
+	function addCategory(category: string) {
+		setChosenCategories([...chosenCategories, category])
+	}
+
+	function removeCategory(category: string) {
+		setChosenCategories(chosenCategories.filter((f) => f !== category))
+	}
+
+	function toogleCategory(category: string) {
+		const isCategory = chosenCategories.some((f) => f === category)
+		isCategory ? removeCategory(category) : addCategory(category)
+	}
+
+	return {
+		chosenCategories,
+		setChosenCategories,
+		addCategory,
+		removeCategory,
+		toogleCategory,
+	}
+}
@@ -0,0 +1,18 @@
+import { ImageStyle } from '#/entities/image-style'
+import { create } from 'zustand'
+
+export interface ChosenStyleStore {
+	style: ImageStyle | null
+	setStyle: (style: ImageStyle) => void
+}
+
+export const useChosenStyle = create<ChosenStyleStore>((set, get) => {
+	function setStyle(style: ImageStyle) {
+		set({ ...get(), style })
+	}
+
+	return {
+		style: null,
+		setStyle,
+	}
+})
@@ -0,0 +1,28 @@
+import { useState } from 'react'
+import { imageStyles } from '../config'
+import { ImageStyle } from '#/entities/image-style'
+
+export function useStylesFavorites() {
+	const [favorites, setFavorites] = useState<ImageStyle[]>([...imageStyles.slice(0, 2)])
+
+	function addFavorite(favorite: ImageStyle) {
+		setFavorites([...favorites, favorite])
+	}
+
+	function removeFavorite(uid: string) {
+		setFavorites(favorites.filter((f) => f.uid !== uid))
+	}
+
+  function toogleFavorite(favorite: ImageStyle) {
+    const isFavorite = favorites.some((f) => f.uid === favorite.uid)
+    isFavorite ? removeFavorite(favorite.uid) : addFavorite(favorite)
+  }
+
+	return {
+		favorites,
+		setFavorites,
+		addFavorite,
+		removeFavorite,
+    toogleFavorite,
+	}
+}
@@ -0,0 +1 @@
+export * from './style.plate'
\ No newline at end of file
@@ -0,0 +1,95 @@
+'use client'
+import { ScopedImageStyle } from '#/entities/image-style'
+import { getModalById, PLATE_IMAGE_STYLES, PlateTemplate } from '#/features/modals'
+import { c } from '#/shared'
+import { CommonBagde } from '#/shared/ui/badge'
+import { CommonInput } from '#/shared/ui/common-input'
+import { useMemo, useState } from 'react'
+import { categories, imageStyles } from '../config'
+import { useChosenCategories, useStylesFavorites } from '../model'
+import styles from './styles.plate.module.scss'
+import { TransitionGroup } from 'react-transition-group'
+import { CSSTransition } from 'react-transition-group'
+export const PlateImageStyles = () => {
+	const modal = getModalById(PLATE_IMAGE_STYLES)
+
+	const callback = modal.getStoreProperty<Function>('callback')
+
+	const { chosenCategories, toogleCategory } = useChosenCategories()
+
+	const { favorites, toogleFavorite } = useStylesFavorites()
+
+	const [inputValue, setInputValue] = useState<string>('')
+
+	const filteredStyles = useMemo(() => {
+		return imageStyles.filter((style) => {
+			return (
+				(chosenCategories.length === 0 ? true : chosenCategories.includes(style.category)) &&
+				(inputValue.length > 0 ? style.label.toLowerCase().includes(inputValue.toLowerCase()) : true)
+			)
+		})
+	}, [chosenCategories, inputValue])
+
+	return (
+		<PlateTemplate alignX='center' alignY='center' id={PLATE_IMAGE_STYLES}>
+			<div className={styles.modal}>
+				<p className={c('title-h1', styles.modal__title)}>
+					Выберите <span>стиль</span> для генерации
+				</p>
+
+				<CommonInput
+					className={c(styles.modal__input)}
+					value={inputValue}
+					onChange={(e) => setInputValue(e.target.value)}
+					placeholder='Поиск по стилям...'
+					variant='primary'
+				/>
+
+				<div className={c(styles.modal__badges)}>
+					{categories.map((category) => (
+						<CommonBagde
+              key={category}
+							onClick={() => toogleCategory(category)}
+							className={c(
+								styles.modal__badge,
+								chosenCategories.includes(category) && styles.modal__badge_active
+							)}
+							variant='outline'
+						>
+							{category}
+						</CommonBagde>
+					))}
+				</div>
+				<div className={c(styles.like, favorites.length > 0 && styles.like_opened)}>
+					<p className={c(styles.like__title, 'title-h2')}>Избранное</p>
+					<TransitionGroup className={c(styles.like__favorites)}>
+						{favorites.map((favorite) => (
+							<CSSTransition key={favorite.uid} timeout={500} classNames={'item'}>
+								<ScopedImageStyle
+									className={styles.like__favorite}
+									onClick={() => callback && callback(favorite)}
+									inFavorites={favorites.some((f) => f.uid === favorite.uid)}
+									onCnageFavorite={() => toogleFavorite(favorite)}
+									key={favorite.uid}
+									{...favorite}
+								/>
+							</CSSTransition>
+						))}
+					</TransitionGroup>
+				</div>
+				<TransitionGroup className={c(styles.items)}>
+					{filteredStyles.map((style) => (
+						<CSSTransition key={style.uid} timeout={500} classNames={'item'}>
+							<ScopedImageStyle
+								onClick={() => callback && callback(style)}
+								inFavorites={favorites.some((f) => f.uid === style.uid)}
+								onCnageFavorite={() => toogleFavorite(style)}
+								{...style}
+							/>
+						</CSSTransition>
+					))}
+				</TransitionGroup>
+			</div>
+		</PlateTemplate>
+	)
+}
@@ -0,0 +1,103 @@
+.modal {
+	min-width: 400px;
+	min-height: 300px;
+	width: 100dvw;
+	max-width: 1100px;
+	max-height: 90dvh;
+  padding-top: 60px;
+	overflow-y: scroll;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	transition: all 0.5s ease-in-out;
+
+  @media screen and (max-width: 1000px) {
+    width: 100%;
+    min-width: unset;
+  }
+
+	&__title {
+		margin-bottom: 50px;
+    @media screen and (max-width: 1000px) {
+      text-align: center;
+    }
+  
+
+		span {
+			color: var(--air-color);
+		}
+	}
+
+	&__input {
+		min-width: 346px;
+		// margin-bottom: 30px;
+		text-align: center;
+
+		&::placeholder {
+			text-align: center;
+		}
+	}
+
+	&__badges {
+		display: flex;
+		max-width: 600px;
+		align-items: center;
+		justify-content: center;
+		flex-wrap: wrap;
+		gap: 5px;
+		margin-bottom: 74px;
+	}
+
+	&__badge {
+		cursor: pointer;
+
+		&_active {
+			border-color: var(--air-color);
+			color: var(--air-color);
+		}
+	}
+}
+
+.like {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	transform: translateY(100%) scale(0);
+	visibility: hidden;
+	height: 0px;
+	opacity: 0;
+	transition: all 0.5s ease-in-out;
+
+	&_opened {
+		transform: translateY(0) scale(1);
+		visibility: visible;
+		height: 100%;
+		opacity: 1;
+	}
+
+	&__title {
+		font-size: 24px;
+		margin-bottom: 15px;
+	}
+
+	&__favorites {
+		display: flex;
+		gap: 10px;
+		margin-bottom: 34px;
+
+		transition: all 0.5 ease-in-out;
+	}
+
+	&__favorite {
+		width: 127px;
+		height: 127px;
+	}
+}
+
+.items {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+	grid-auto-rows: 260px;
+	width: 100%;
+	gap: 10px;
+}
@@ -0,0 +1,3 @@
+export * from './ui'
+export * from './model'
+export * from './config'
\ No newline at end of file
@@ -1,10 +1,10 @@
-import { Device } from "#/shared/lib/types/entities"
-
+import { Device } from '#/shared/lib/types/entities'
 
 export interface LayoutProps {
-  children: React.ReactNode
-  titlePage?: string
-  title?: string | React.ReactNode | null
-  device?: Device
-  isLoader?: boolean
-}
\ No newline at end of file
+	children: React.ReactNode
+	titlePage?: string
+	title?: string | React.ReactNode | null
+	device?: Device
+	isLoader?: boolean
+	height?: string
+}
@@ -1,37 +1,39 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { Box } from '@mui/material'
-import { ThemeProvider } from '@mui/material/styles'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { signOut, useSession } from 'next-auth/react'
 
-import * as Sentry from '@sentry/browser'
 import { getUserBalance } from '#/entities/balance'
 import { useTheme } from '#/entities/theme'
 import { getAllInfo } from '#/entities/user-account'
-import { isSettingExist } from '#/entities/user-account/lib/helpers/is-setting-exist'
-import { getUserAccountSettings, setSettings } from '#/entities/user-account/model/settings'
 import InfoBar from '#/app/layout/ui/info-bar'
 import { useAppDispatch, useAppSelector } from '#/app/store/store'
 import { Loader } from '#/shared'
-import { pingFangFont } from '#/shared/lib/constants/font/font'
-import { Device } from '#/shared/lib/types/entities'
 import { MainMenuMobile } from '#/widgets/main-menu'
 import { SideMenu } from '#/widgets/side-menu'
 import { getDeviceType } from '#/shared/lib/helpers'
 import { LayoutProps } from '../types'
 import { change } from '#/features/pending'
 import { ChangePasswordPlate } from '#/features/change-password-corp'
-import { ResendInvationPlate } from '#/features/resend-invation-corp '
+import { ResendInvationPlate } from '#/features/resend-invation-corp'
+import { PopupBackdrop } from '#/shared/ui/popup'
 import { ErrorReportPlate } from '#/features/error-report'
 import { CSSTransition, SwitchTransition } from 'react-transition-group'
-import { CommonButton } from '#/shared/ui/button'
 import styles from './default.module.scss'
+import { PlateImageStyles } from '#/widgets/images-style'
 import { SlowLoading } from '#/features/slow-loading'
-
-export const Layout: React.FC<LayoutProps> = ({ children, titlePage, title = titlePage, isLoader, device = getDeviceType() }) => {
-	const { data: sessionData } = useSession()
-	const appState = useAppSelector((state) => state)
+import { ChatBotOptionsPopup } from '#/entities/chat/ui/chat-bot-options-popup'
+import { ImageBotOptionsPopup } from '#/entities/model-entity'
+import { MessageFullscreenModal } from '#/features/message-fullscreen-modal/ui'
+
+export const Layout: React.FC<LayoutProps> = ({
+	children,
+	titlePage,
+	isLoader,
+	height,
+	device = getDeviceType(),
+}) => {
 	const dispatch = useAppDispatch()
 
 	const meStatus = useAppSelector((state) => state.user.status)
@@ -40,8 +42,6 @@ export const Layout: React.FC<LayoutProps> = ({ children, titlePage, title = tit
 
 	const desktop = device === 'desktop'
 
-	const [sidemenuDefaultOpen, setSidemenuDefaultOpen] = useState(true)
-
 	useTheme()
 
 	const { data, status } = useSession()
@@ -77,36 +77,6 @@ export const Layout: React.FC<LayoutProps> = ({ children, titlePage, title = tit
 		getUserData(data.access)
 	}, [data])
 
-	useEffect(() => {
-		if ((sessionData && !sessionStorage.getItem('firstRender')) || (sessionData && !localStorage.getItem('global_settings'))) {
-			dispatch(getUserAccountSettings(sessionData.access))
-			sessionStorage.setItem('firstRender', 'true')
-		}
-	}, [sessionData])
-
-	React.useEffect(() => {
-		const lsData = localStorage.getItem('global_settings')
-		if (lsData !== null) {
-			dispatch(setSettings(JSON.parse(lsData)))
-		}
-
-		window.addEventListener('beforeunload', () => {
-			sessionStorage.removeItem('firstRender')
-			sessionStorage.clear()
-		})
-	}, [])
-
-	React.useEffect(() => {
-		if (appState.settings.state !== null && device) {
-			let setting = isSettingExist({
-				settings: appState.settings.state,
-				targetDevice: device,
-				targetType: 'sidemenu',
-			})
-			if (setting) setting?.value?.sidemenu_state === 'opened' ? setSidemenuDefaultOpen(true) : setSidemenuDefaultOpen(false)
-		}
-	}, [appState.settings.state])
-
 	const [requestDelay, setRequestDelay] = useState(false)
 
 	const transitionRef = useRef(null)
@@ -115,6 +85,15 @@ export const Layout: React.FC<LayoutProps> = ({ children, titlePage, title = tit
 		setTimeout(() => setRequestDelay(true), 5000)
 	}, [])
 
+	const { pathname } = useRouter()
+
+	useEffect(() => {
+		document.body.className = `class${pathname
+			.replaceAll('/', '-')
+			.replaceAll('[', '_')
+			.replaceAll(']', '_')}`
+	}, [pathname])
+
 	if (userLoading || isLoader || status === 'loading') {
 		return (
 			<SwitchTransition>
@@ -148,7 +127,7 @@ export const Layout: React.FC<LayoutProps> = ({ children, titlePage, title = tit
 				id={'layout'}
 				sx={{
 					width: '100%',
-					height: desktop ? '100%' : '100dvh',
+					height: desktop ? (height ? height : '100%') : '100dvh',
 					padding: desktop ? '0px' : '10px',
 				}}
 			>
@@ -159,7 +138,7 @@ export const Layout: React.FC<LayoutProps> = ({ children, titlePage, title = tit
 				>
 					{desktop ? (
 						<Box display='flex' justifyContent='center'>
-							<SideMenu device={device} sidemenuDefaultOpen={sidemenuDefaultOpen} />
+							<SideMenu />
 							<Box
 								width='100%'
 								sx={{
@@ -182,9 +161,14 @@ export const Layout: React.FC<LayoutProps> = ({ children, titlePage, title = tit
 					)}
 				</Box>
 
+				<PlateImageStyles />
 				<ChangePasswordPlate />
 				<ResendInvationPlate />
+				<PopupBackdrop />
+				<MessageFullscreenModal />
 				<ErrorReportPlate />
+				<ChatBotOptionsPopup />
+				<ImageBotOptionsPopup />
 			</Box>
 		</>
 	)
@@ -1,24 +1,22 @@
 import React, { memo, useEffect, useMemo, useState } from 'react'
 import MenuIcon from '@mui/icons-material/Menu'
-import { Avatar, Button, Divider, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
+import { Avatar, List } from '@mui/material'
+
 import Menu from '@mui/material/Menu'
 import Typography from '@mui/material/Typography'
 import { Box, Stack } from '@mui/system'
 import Image from 'next/image'
 import Link from 'next/link'
 import Router, { useRouter } from 'next/router'
-import { signOut, useSession } from 'next-auth/react'
+import { signOut } from 'next-auth/react'
 
 import { change } from '#/entities/theme'
-import { getAll, ResponseAllInfo } from '#/entities/user-account/model/user-type-slice'
 import { useAppDispatch, useAppSelector } from '#/app/store/store'
-import { AccountMenu } from '#/shared'
 
 import { menuListMiddle, menuListTop } from '../../side-menu/ui/side-menu'
+import { useUserSelector } from '#/entities/user-account'
 
 export const MainMenuMobile = memo(() => {
-	const { data, status } = useSession()
-
 	const dispatch = useAppDispatch()
 
 	const { pathname, push, asPath } = useRouter()
@@ -27,15 +25,7 @@ export const MainMenuMobile = memo(() => {
 		await Router.push('/')
 	}
 
-	const { profile_picture_link, first_name } = useAppSelector((state) => state.user)
-
-	const [anchorElAccount, setAnchorElAccount] = React.useState<HTMLElement | null>(null)
-
-	const closeMenuAccount = () => setAnchorElAccount(null)
-
-	const openMenuAccount = (event: React.MouseEvent<HTMLButtonElement>) => {
-		setAnchorElAccount(event.currentTarget)
-	}
+	const { profile_picture_link, first_name } = useUserSelector()
 
 	const closeMenu = () => {
 		setAnchorEl(null)
@@ -61,15 +51,14 @@ export const MainMenuMobile = memo(() => {
 		setAnchorElNavigate(null)
 	}
 
-	const [userInfo, setUserInfo] = useState<ResponseAllInfo | null>()
-
-	useEffect(() => {
-		getAll(data?.access).then((res) => setUserInfo(res))
-	}, [data?.access])
-
 	return (
 		<Box>
-			<Stack direction='row' spacing={1} alignItems='center' justifyContent='space-between'>
+			<Stack
+				direction='row'
+				spacing={1}
+				alignItems='center'
+				justifyContent='space-between'
+			>
 				<Box onClick={(event: any) => setAnchorElNavigate(event.currentTarget)}>
 					<MenuIcon
 						sx={{
@@ -152,17 +141,14 @@ export const MainMenuMobile = memo(() => {
 						<Box
 							onClick={(e) => {
 								e.stopPropagation()
+								e.preventDefault()
 								dispatch(change(null))
 							}}
 						>
-							<MenuItem
-								open={open}
-								pathname={pathname}
-								theme={theme}
-								title={'Сменить тему'}
-								link={null}
-								icon={'/sleep'}
-							/>
+							<Stack sx={{ padding: 1 }} direction='row' spacing={2}>
+								<Image src={'/sleep.svg'} width={19} height={19} alt={''} />
+								<Typography className='title-main-gray'>Сменить тему</Typography>
+							</Stack>
 						</Box>
 					</Box>
 					<Box sx={{ marginTop: 1.5 }}>
@@ -180,13 +166,23 @@ export const MainMenuMobile = memo(() => {
 							style={{ marginTop: '10px', marginLeft: '20px' }}
 							href={'https://air.fail/requisites'}
 						>
-							<Typography className='title-main-gray' sx={{ marginLeft: '15px' }}>
+							<Typography
+								className='title-main-gray'
+								sx={{ marginLeft: '15px' }}
+							>
 								Реквизиты
 							</Typography>
 						</Link>
 					</Box>
 				</Menu>
-				<Image onClick={goToMain} priority src='/logo.svg' height={26} width={31} alt='Error' />
+				<Image
+					onClick={goToMain}
+					priority
+					src='/logo.svg'
+					height={26}
+					width={31}
+					alt='Error'
+				/>
 				<Avatar
 					onClick={() => push('/account')}
 					sx={{ width: 29, height: 29 }}
@@ -208,20 +204,37 @@ type MenuItemProps = {
 
 	title: string
 	link: string | null
-	icon: string
+	icon: string | React.ReactNode
 	activeList?: string[]
 }
 
 export function MenuItem(props: MenuItemProps) {
 	const isActive = useMemo(
-		() => props.link === props.pathname || props.activeList?.some((el) => props.pathname.includes(el)),
+		() =>
+			props.link === props.pathname ||
+			props.activeList?.some((el) => props.pathname.includes(el)),
 		[props.pathname]
 	)
 
 	return (
 		<Link href={props.link || ''}>
 			<Stack sx={{ padding: 1 }} direction='row' spacing={2}>
-				<Image src={props.icon + (isActive ? '' : '-off') + '.svg'} width={19} height={19} alt={''} />
+				{typeof props.icon === 'string' ? (
+					<Image
+						src={props.icon + (isActive ? '' : '-off') + '.svg'}
+						width={19}
+						height={19}
+						alt={''}
+					/>
+				) : (
+					<div
+						style={{
+							color: isActive ? '#8280FF' : '#D4D4D4',
+						}}
+					>
+						{props.icon}
+					</div>
+				)}
 				<Typography className='title-main-gray'>{props.title}</Typography>
 			</Stack>
 			{/* <ListItem
@@ -13,6 +13,7 @@ import { useAppDispatch, useAppSelector } from '#/app/store/store'
 import { AccountMenu } from '#/shared'
 import { NotificationMenu } from '#/shared'
 import { TooltipFreeTokens } from '#/shared'
+import { useUserSelector } from '#/entities/user-account'
 import { ERROR_REPORT, getModalById } from '#/features/modals'
 
 function a11yProps(index: number) {
@@ -59,7 +60,9 @@ export const MainMenu: React.FC = memo(() => {
 		await Router.push('/register')
 	}
 
-	const [anchorElNotification, setAnchorElNotification] = React.useState<null | HTMLElement>(null)
+	const [anchorElNotification, setAnchorElNotification] = React.useState<null | HTMLElement>(
+		null
+	)
 
 	const openNotification = Boolean(anchorElNotification)
 
@@ -72,15 +75,21 @@ export const MainMenu: React.FC = memo(() => {
 		setAnchorElNotification(null)
 	}
 
-	const email = useAppSelector((state) => state.user.email)
+	const { email } = useUserSelector()
 
 	const errorReport = getModalById(ERROR_REPORT)
 
-	const selectPage = pathname === '/' ? 0 : pathname === '/service-keys' ? 1 : pathname === '/admin' ? 2 : 3
+	const selectPage =
+		pathname === '/' ? 0 : pathname === '/service-keys' ? 1 : pathname === '/admin' ? 2 : 3
 
 	return (
 		<Box>
-			<Stack direction='row' spacing={1} alignItems='center' justifyContent='space-between'>
+			<Stack
+				direction='row'
+				spacing={1}
+				alignItems='center'
+				justifyContent='space-between'
+			>
 				{status !== 'authenticated' && <TooltipFreeTokens />}
 				<Image
 					style={{ cursor: 'pointer', marginLeft: 20 }}
@@ -218,7 +227,11 @@ export const MainMenu: React.FC = memo(() => {
 								open={openNotification}
 								anchorEl={anchorElNotification}
 							/>
-							<Button id='basic-button' aria-haspopup='true' onClick={openMenu}>
+							<Button
+								id='basic-button'
+								aria-haspopup='true'
+								onClick={openMenu}
+							>
 								<Avatar
 									sx={{
 										width: 30,
@@ -231,7 +244,13 @@ export const MainMenu: React.FC = memo(() => {
 										email[0]
 									}
 								</Avatar>
-								<Image priority src='/arrow.svg' height={8} width={6} alt='Bell' />
+								<Image
+									priority
+									src='/arrow.svg'
+									height={8}
+									width={6}
+									alt='Bell'
+								/>
 							</Button>
 							<AccountMenu anchorEl={anchorEl} changeVisible={closeMenu} />
 						</>
@@ -239,7 +258,10 @@ export const MainMenu: React.FC = memo(() => {
 						<>
 							<Button
 								style={{
-									backgroundColor: theme === 'light' ? 'rgba(90, 90, 90, 0.1)' : '#555555',
+									backgroundColor:
+										theme === 'light'
+											? 'rgba(90, 90, 90, 0.1)'
+											: '#555555',
 								}}
 								onClick={() => login()}
 								sx={{
@@ -257,7 +279,8 @@ export const MainMenu: React.FC = memo(() => {
 							</Button>
 							<Button
 								style={{
-									backgroundColor: theme === 'light' ? '#E8E8FA' : '#514E62',
+									backgroundColor:
+										theme === 'light' ? '#E8E8FA' : '#514E62',
 								}}
 								onClick={() => register()}
 								sx={{
@@ -0,0 +1,7 @@
+.markdown {
+	display: inline-block !important;
+	margin-right: 0.5ch;
+	font-size: 15px;
+	transition: all 0.3s !important;
+	height: max-content;
+}
@@ -1,20 +1,38 @@
-import React from 'react'
+import React, { memo, useEffect, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import dynamic from 'next/dynamic'
 import remarkGfm from 'remark-gfm'
+import { useThemeAndDevice } from '#/shared/lib/hooks'
+import { c } from '#/shared'
+import styles from './markdown.module.scss'
+import { EventBus, eventBus } from '#/shared/classes'
 
 interface IProps {
+	id?: string
 	content: string
-	theme: 'light' | 'dark'
 }
 
-export const Markdown = ({ content, theme }: IProps) => {
+export const Markdown = memo(({ content, id = 'markdown' }: IProps) => {
+	const { theme } = useThemeAndDevice()
+
 	const LazyCode = dynamic(() => import('#/widgets/chat-gpt-field/ui/code'))
 
+	const [bufferedContent, setBufferedContent] = useState(content)
+
+	useEffect(() => setBufferedContent(content), [content])
+
+	useEffect(() => {
+		eventBus.subscribe(`bot-message-update-${id}`, (data) => {
+			requestAnimationFrame(() => {
+				setBufferedContent(data)
+			})
+		})
+	}, [])
+
 	return (
 		<ReactMarkdown
 			remarkPlugins={[remarkGfm]}
-			className={'smallScroll'}
+			className={c('smallScroll', styles.markdown, `instance-md-${id}`)}
 			components={{
 				code({ node, inline, className, children, ...props }) {
 					const match = /language-(\w+)/.exec(className || '')
@@ -40,7 +58,7 @@ export const Markdown = ({ content, theme }: IProps) => {
 				},
 			}}
 		>
-			{content}
+			{bufferedContent}
 		</ReactMarkdown>
 	)
-}
+})
@@ -1,10 +1,10 @@
-import { Message, MessageSend } from '#/entities/message'
+import { MediaMessageListResponse, Message, MessageSend } from '#/entities/message'
 import { API_URL } from '#/shared/lib/constants'
 import { IMessageRequest } from '#/shared/lib/types/types-gpt'
 import axios, { AxiosError, AxiosResponse } from 'axios'
 
 export async function getImagesGalery(token?: string, offset?: number, limit = 10) {
-	return await axios.get<Message>(API_URL + `/media/gallery/images?limit=${limit}&offset=${offset}`, {
+	return await axios.get<MediaMessageListResponse>(API_URL + `/media/gallery/images?limit=${limit}&offset=${offset}`, {
 		headers: {
 			Authorization: `Bearer ${token}`,
 		},
@@ -1,18 +1,5 @@
 export const getDayMontsString = (inputDate: string): string => {
-	const monthNames = [
-		'января',
-		'февраля',
-		'марта',
-		'апреля',
-		'мая',
-		'июня',
-		'июля',
-		'августа',
-		'сентября',
-		'октября',
-		'ноября',
-		'декабря',
-	]
+	const monthNames = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
 
 	const date = new Date(inputDate)
 	const day = date.getDate()
@@ -1,6 +1,6 @@
 import { MessageSend } from '#/entities/message'
 
-export function formDataHelper(file: File, dataForSend: MessageSend<any>): FormData {
+export function formDataHelper(file: File, dataForSend: MessageSend): FormData {
 	const FD = new FormData()
 	FD.append('file', file)
 	FD.append('info', JSON.stringify(dataForSend.info))
@@ -1,17 +0,0 @@
-type DateResponse = {
-	month: string
-	year: string
-	day: string
-}
-
-export const getDateFromString = (inputDate: string): DateResponse | null => {
-	if (inputDate) {
-		const date = inputDate.split('T')[0].split('-')
-		return {
-			day: date[2],
-			month: date[1],
-			year: date[0],
-		}
-	}
-	return null
-}
@@ -1,8 +0,0 @@
-export const getDayMontsString = (inputDate: string): string => {
-	const monthNames = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
-
-	const date = new Date(inputDate)
-	const day = date.getDate()
-	const month = monthNames[date.getMonth()]
-	return `${day} ${month}`
-}
@@ -1,23 +0,0 @@
-import React from 'react'
-import { Box } from '@mui/material'
-import Link from 'next/link'
-
-import { Message } from '#/shared/lib/types/model'
-
-export function AnswerWrap(props: { message: Message }) {
-	if (props.message.file) {
-		const messageText = props.message.from_model
-			? 'Ваша ссылка для скачивания \n (нажмите для просмотра)'
-			: 'Тут ссылка на ваш файл (нажмите для просмотра)'
-
-		return (
-			<Box>
-				<Link onClick={(e) => e.stopPropagation()} target='_blank' href={props.message.file.toString()}>
-					{messageText}
-				</Link>
-			</Box>
-		)
-	}
-
-	return <>{props.message.content}</>
-}
@@ -1,44 +0,0 @@
-import React from 'react'
-import { Box, Typography } from '@mui/material'
-
-const previewMessages = ['Что такое орбитальная механика?', 'Как приготовить омлет?', 'Кто такие Фиксики?']
-
-export function PreviewView(props: any) {
-	return (
-		<Box className='content-center-translate'>
-			<Typography className='text'>Не знаете, с чего начать?</Typography>
-			<Typography className='text' sx={{ marginBottom: '15px' }}>
-				Попробуйте, например, вот так:
-			</Typography>
-			<Box
-				sx={{
-					textAlign: 'center',
-					width: '100%',
-					display: 'flex',
-					flexDirection: 'column',
-					alignItems: 'center',
-				}}
-			>
-				{previewMessages.map((el) => {
-					return (
-						<Box
-							key={el}
-							onClick={() => props.setValue(el)}
-							sx={{
-								cursor: 'pointer',
-								padding: '15px',
-								color: '#8280FF',
-								width: 'fit-content',
-								marginTop: '15px',
-								backgroundColor: 'rgba(130, 128, 255, 0.10)',
-								borderRadius: '12px',
-							}}
-						>
-							{el}
-						</Box>
-					)
-				})}
-			</Box>
-		</Box>
-	)
-}
@@ -1,933 +0,0 @@
-import React, { useEffect, 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 '#/features/image-modal/full-screen-modal'
-import { useAppSelector } from '#/app/store/store'
-import { TooltipCustom } from '#/shared'
-import { Message } from '#/shared/lib/types/model'
-import { BotMessage } from '#/widgets/messages'
-import { Markdown } from '../../markdown/markdown'
-import { formatDate } from '#/shared/lib/helpers'
-
-interface IMessagesList {
-	// messageResponse: Message[] | null
-	// mode?: string
-	// sendMessage?: (title: string) => void
-	// getMessagesPagination?: () => Promise<void>
-
-	device: 'mobile' | 'desktop'
-	modelType: string
-	isNewMessage: boolean
-	message: Message
-	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) {
-	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) => {
-		navigator.clipboard.writeText(text)
-	}
-	const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-		setAnchorEl(event.currentTarget)
-	}
-	const handleClose = () => {
-		setAnchorEl(null)
-	}
-
-	const fileName = useMemo(() => {
-		if (!props.message.file) return 'Подбираем имя файла...'
-		const matches = (props.message.file as string).match(/air-messages\/(.+?)\.(.+?)\?/)
-		if (!matches) return 'Подбираем имя файла...'
-		return `${matches[1]}.${matches[2]}`
-	}, [])
-
-	const resend = async () => {
-		props.setResendValue(props.message.content)
-		if (props.message.file !== null) {
-			fetch(props.message.file as string, {
-				method: 'GET',
-				headers: {},
-			}).then((response) => {
-				response.arrayBuffer().then(function (buffer) {
-					const url = new Blob([buffer])
-					const binaryFile = new File([url], 'image.png')
-					if (props.onLoadImage) {
-						props.onLoadImage(null, binaryFile)
-					}
-				})
-			})
-		}
-	}
-
-	useEffect(() => {
-		console.log(props.message.file)
-	}, [props.message.file])
-
-	const flexStyle = {
-		display: 'flex',
-		alignItems: 'center',
-		justifyContent: 'start',
-		gap: '12px',
-		color: '#7f7df3 !important',
-		fontWeight: '600 !important',
-		lineHeight: '140%',
-		letterSpacing: '0.2px',
-		cursor: 'pointer',
-	}
-
-	const theme = useAppSelector((state) => state.theme.theme)
-
-	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>
-						<Box
-							className='smallScroll'
-							sx={{
-								width: 'fit-content',
-								marginLeft: 'auto',
-								maxWidth: desktop ? '68%' : '100%',
-								marginTop: 2,
-								marginBottom: 2,
-							}}
-						>
-							<Stack direction='row' justifyContent='end' alignItems='center'>
-								<Typography
-									variant='body2'
-									sx={{
-										color: theme === 'light' ? '#868686' : '#A6A5A5',
-										lineHeight: '19.6px',
-										fontSize: '13px',
-										fontWeight: '600',
-										marginLeft: 1,
-									}}
-								>
-									{formatDate(props.message.created_at, {
-										hour: 'numeric',
-										minute: 'numeric',
-									})}
-								</Typography>
-							</Stack>
-
-							<Box display='flex' alignItems='center' justifyContent='end'>
-								{props.message.file ? (
-									/\.jpg|\.png|\.jpeg|\.gif|\.webp|\.svg\.wav/.test(
-										props.message.file as string
-									) ? (
-										<Box
-											sx={{
-												display: 'flex',
-												alignItems: 'end',
-												flexDirection: 'column',
-												height: '60%',
-												width: '60%',
-											}}
-										>
-											<Box sx={{ position: 'relative' }}>
-												<Image
-													onClick={() => {
-														if (!props.message.file)
-															return
-														setModal(true)
-													}}
-													onLoadingComplete={() =>
-														setLoaded(true)
-													}
-													style={{
-														objectFit: 'contain',
-														height: '100%',
-														width: '100%',
-														borderRadius: '13px',
-														cursor: 'pointer',
-														opacity: loaded
-															? '100%'
-															: '0%',
-														minWidth: '100px',
-														minHeight: '100px',
-													}}
-													width={500}
-													height={500}
-													src={
-														props.message.file
-															.toString()
-															.split('?type')[0]
-													}
-													alt={
-														'К сожалению, изображение не загрузилось'
-													}
-												/>
-												{!loaded && (
-													<Skeleton
-														sx={{
-															background:
-																theme === 'dark'
-																	? '#2d2d2f'
-																	: '#EFF0F2',
-															position: 'absolute',
-															top: '0',
-															left: '0',
-															zIndex: '1',
-															borderRadius: 5,
-															width: '100%',
-															height: '100%',
-														}}
-														variant='rectangular'
-													/>
-												)}
-											</Box>
-											<Box display='flex' alignItems='center'>
-												<Box
-													marginRight={1}
-													sx={{ cursor: 'pointer' }}
-												>
-													<Box
-														onClick={handleClick}
-														aria-controls={
-															open
-																? 'message-menu'
-																: undefined
-														}
-														aria-haspopup='true'
-														aria-expanded={
-															open ? 'true' : undefined
-														}
-													>
-														<TooltipCustom
-															title={'Открыть меню'}
-														>
-															<svg
-																width='22'
-																height='22'
-																viewBox='0 0 19 19'
-																fill='none'
-																xmlns='http://www.w3.org/2000/svg'
-															>
-																<rect
-																	x='1'
-																	y='1'
-																	width='7'
-																	height='7'
-																	rx='2'
-																	stroke='#A4AAB5'
-																	strokeWidth='2'
-																/>
-																<rect
-																	x='1'
-																	y='11'
-																	width='7'
-																	height='7'
-																	rx='2'
-																	stroke='#A4AAB5'
-																	strokeWidth='2'
-																/>
-																<rect
-																	x='11'
-																	y='11'
-																	width='7'
-																	height='7'
-																	rx='2'
-																	stroke='#A4AAB5'
-																	strokeWidth='2'
-																/>
-																<circle
-																	cx='14.5'
-																	cy='4.5'
-																	r='3.5'
-																	stroke='#A4AAB5'
-																	strokeWidth='2'
-																/>
-															</svg>
-														</TooltipCustom>
-													</Box>
-													<Menu
-														autoFocus={false}
-														open={open}
-														anchorEl={anchorEl}
-														id='message-menu'
-														onClose={handleClose}
-														onClick={handleClose}
-														sx={{
-															'& .MuiMenu-list': {
-																backgroundColor:
-																	theme ===
-																	'dark'
-																		? '#303035'
-																		: '#EFF0F2',
-																color: '#8280FF',
-																borderRadius:
-																	'15px',
-															},
-															'& .MuiPopover-paper': {
-																backgroundColor:
-																	theme ===
-																	'dark'
-																		? '#303035'
-																		: '#EFF0F2',
-																borderRadius:
-																	'15px',
-															},
-														}}
-													>
-														<MenuItem
-															autoFocus={false}
-															sx={{
-																fontSize: '15px',
-																fontWeight: '500',
-																display: 'flex',
-																alignItems:
-																	'center',
-																gap: '10px',
-															}}
-															onClick={() => {
-																copy(
-																	props.message
-																		.content
-																)
-															}}
-														>
-															<svg
-																width='14'
-																height='14'
-																viewBox='0 0 19 19'
-																fill='none'
-																xmlns='http://www.w3.org/2000/svg'
-															>
-																<g id='Group 29094'>
-																	<rect
-																		id='Rectangle 3340'
-																		x='0.85'
-																		y='3.85'
-																		width='14.3'
-																		height='14.3'
-																		rx='2.15'
-																		fill='transparent'
-																		stroke='#8280FF'
-																		strokeWidth='1.7'
-																	/>
-																	<path
-																		id='Vector 40'
-																		d='M6.5 1H15C16.6569 1 18 2.34315 18 4V12.5'
-																		stroke='#8280FF'
-																		strokeWidth='1.7'
-																		strokeLinecap='round'
-																		strokeLinejoin='round'
-																	/>
-																</g>
-															</svg>
-															Копировать
-														</MenuItem>
-														<MenuItem
-															autoFocus={false}
-															sx={{
-																fontSize: '15px',
-																fontWeight: '500',
-																display: 'flex',
-																alignItems:
-																	'center',
-																gap: '5px',
-															}}
-															onClick={() => {
-																if (
-																	props.deleteMessage
-																)
-																	props.deleteMessage(
-																		props
-																			.message
-																			.uid
-																	)
-															}}
-														>
-															<svg
-																width='21'
-																height='14'
-																viewBox='0 0 60 42'
-																fill='none'
-																xmlns='http://www.w3.org/2000/svg'
-															>
-																<path
-																	fillRule='evenodd'
-																	clipRule='evenodd'
-																	d='M17.4216 27.9757C18.1603 28.707 19.3566 28.707 20.0972 27.9757L24.4097 23.6633L28.6079 27.8633C29.3391 28.5946 30.5278 28.5946 31.2609 27.8633C31.9941 27.1321 31.9941 25.932 31.2609 25.2007L27.0629 21.0195L31.3154 16.7632C32.0542 16.032 32.0542 14.8321 31.3154 14.0821C30.5767 13.3509 29.3785 13.3509 28.6398 14.0821L24.3873 18.3382L20.1891 14.1382C19.456 13.4069 18.2673 13.4069 17.536 14.1382C16.801 14.8694 16.801 16.0695 17.536 16.8008L21.7341 20.982L17.4216 25.2946C16.681 26.0446 16.681 27.2257 17.4216 27.9757ZM3.75289 7.87575C3.75289 5.81325 5.43291 4.12575 7.50666 4.12576L40.3735 4.12576L55.6566 21.0383L40.4279 37.8758L7.50666 37.8758C5.43291 37.8758 3.75288 36.1883 3.75288 34.1258L3.75289 7.87575ZM7.50666 41.6258L41.1534 41.6258C41.6784 41.6633 42.2147 41.4945 42.616 41.1007L59.4648 22.4633C59.8604 22.0696 60.031 21.5445 60.0029 21.0383C60.031 20.5133 59.8604 19.9883 59.4648 19.5945L42.616 0.957118C42.2485 0.600868 41.7685 0.413295 41.2885 0.413295L41.2885 0.375758L7.50666 0.375755C3.36104 0.375755 -0.000889326 3.732 -0.000889688 7.87575L-0.000891983 34.1258C-0.000892345 38.2695 3.36104 41.6258 7.50666 41.6258Z'
-																	fill='#8280FF'
-																/>
-															</svg>
-															Удалить
-														</MenuItem>
-													</Menu>
-												</Box>
-												<TooltipCustom title='При отправке данного сообщения произошла ошибка, нажмите чтобы отправить заново'>
-													{!props.message.is_sent && (
-														<Image
-															onClick={resend}
-															style={{
-																cursor: 'pointer',
-																marginRight: '5px',
-															}}
-															height={20}
-															width={20}
-															alt='1'
-															src={
-																'/svg/important.svg'
-															}
-														/>
-													)}
-												</TooltipCustom>
-												<Typography
-													className='smallScroll'
-													sx={{
-														overflowY: 'scroll',
-														padding: '10px 15px',
-														backgroundColor: '#7F7DF3',
-														borderRadius: '13px',
-														color: '#FFFFFF',
-														lineHeight: '21px',
-														fontSize: '15px',
-														fontWeight: '400px',
-														marginTop: 0.4,
-														textAlign: 'left',
-														whiteSpace:
-															props.message.content
-																.length > 30
-																? 'pre-wrap'
-																: 'pre',
-													}}
-												>
-													{/*<Markdown content={props.message.content} />*/}
-													{props.message.content}
-												</Typography>
-											</Box>
-										</Box>
-									) : (
-										<Box
-											sx={{
-												display: 'flex',
-												alignItems: 'end',
-												flexDirection: 'column',
-												gap: '5px',
-											}}
-										>
-											<Box display={'flex'}>
-												<Box
-													onClick={() => {
-														if (props.message.file) {
-															window.open(
-																props.message
-																	.file as string,
-																'_blank'
-															)
-														}
-													}}
-													className='smallScroll'
-													sx={{
-														overflowY: 'scroll',
-														position: 'relative',
-														padding: '15px 23px',
-
-														border: `1px solid ${
-															theme === 'dark'
-																? '#303035'
-																: '#EFF0F2'
-														}`,
-
-														boxShadow: 'none',
-														fontSize: '15px',
-														marginTop: 0.5,
-														textAlign: 'left',
-														fontFamily:
-															'Raleway,sans-serif',
-														borderRadius: '13px',
-														'&  p': {
-															color: 'inherit',
-															fontStyle: 'inherit',
-														},
-														...flexStyle,
-													}}
-												>
-													<Box
-														sx={{
-															width: '16px',
-															height: '18px',
-														}}
-													>
-														<svg
-															width='16'
-															height='18'
-															viewBox='0 0 15 19'
-															fill='none'
-															xmlns='http://www.w3.org/2000/svg'
-														>
-															<path
-																fillRule='evenodd'
-																clipRule='evenodd'
-																d='M10.3286 0.578662C9.95416 0.20795 9.44851 0 8.92158 0H2C0.895433 0 0 0.895431 0 2V17C0 18.1046 0.895431 19 2 19H13C14.1046 19 15 18.1046 15 17V6.03743C15 5.50349 14.7865 4.99173 14.4071 4.61609L10.3286 0.578662ZM10.0669 5.37846C9.79079 5.37846 9.56693 5.1546 9.56693 4.87846V2.19238C9.56693 1.74815 10.103 1.52452 10.4187 1.83705L13.132 4.52313C13.4495 4.83737 13.227 5.37846 12.7803 5.37846H11.7815H10.0669Z'
-																fill='#7f7df3'
-															/>
-														</svg>
-													</Box>
-
-													<Markdown
-														content={fileName}
-														theme={theme}
-													/>
-												</Box>
-											</Box>
-											<Box display='flex' alignItems='center'>
-												<Box
-													marginRight={1}
-													sx={{ cursor: 'pointer' }}
-												>
-													<Box
-														onClick={handleClick}
-														aria-controls={
-															open
-																? 'message-menu'
-																: undefined
-														}
-														aria-haspopup='true'
-														aria-expanded={
-															open ? 'true' : undefined
-														}
-													>
-														<TooltipCustom
-															title={'Открыть меню'}
-														>
-															<svg
-																width='22'
-																height='22'
-																viewBox='0 0 19 19'
-																fill='none'
-																xmlns='http://www.w3.org/2000/svg'
-															>
-																<rect
-																	x='1'
-																	y='1'
-																	width='7'
-																	height='7'
-																	rx='2'
-																	stroke='#A4AAB5'
-																	strokeWidth='2'
-																/>
-																<rect
-																	x='1'
-																	y='11'
-																	width='7'
-																	height='7'
-																	rx='2'
-																	stroke='#A4AAB5'
-																	strokeWidth='2'
-																/>
-																<rect
-																	x='11'
-																	y='11'
-																	width='7'
-																	height='7'
-																	rx='2'
-																	stroke='#A4AAB5'
-																	strokeWidth='2'
-																/>
-																<circle
-																	cx='14.5'
-																	cy='4.5'
-																	r='3.5'
-																	stroke='#A4AAB5'
-																	strokeWidth='2'
-																/>
-															</svg>
-														</TooltipCustom>
-													</Box>
-													<Menu
-														autoFocus={false}
-														open={open}
-														anchorEl={anchorEl}
-														id='message-menu'
-														onClose={handleClose}
-														onClick={handleClose}
-														sx={{
-															'& .MuiMenu-list': {
-																backgroundColor:
-																	theme ===
-																	'dark'
-																		? '#303035'
-																		: '#EFF0F2',
-																color: '#8280FF',
-																borderRadius:
-																	'15px',
-															},
-															'& .MuiPopover-paper': {
-																backgroundColor:
-																	theme ===
-																	'dark'
-																		? '#303035'
-																		: '#EFF0F2',
-																borderRadius:
-																	'15px',
-															},
-														}}
-													>
-														<MenuItem
-															autoFocus={false}
-															sx={{
-																fontSize: '15px',
-																fontWeight: '500',
-																display: 'flex',
-																alignItems:
-																	'center',
-																gap: '10px',
-															}}
-															onClick={() => {
-																copy(
-																	props.message
-																		.content
-																)
-															}}
-														>
-															<svg
-																width='14'
-																height='14'
-																viewBox='0 0 19 19'
-																fill='none'
-																xmlns='http://www.w3.org/2000/svg'
-															>
-																<g id='Group 29094'>
-																	<rect
-																		id='Rectangle 3340'
-																		x='0.85'
-																		y='3.85'
-																		width='14.3'
-																		height='14.3'
-																		rx='2.15'
-																		fill='transparent'
-																		stroke='#8280FF'
-																		strokeWidth='1.7'
-																	/>
-																	<path
-																		id='Vector 40'
-																		d='M6.5 1H15C16.6569 1 18 2.34315 18 4V12.5'
-																		stroke='#8280FF'
-																		strokeWidth='1.7'
-																		strokeLinecap='round'
-																		strokeLinejoin='round'
-																	/>
-																</g>
-															</svg>
-															Копировать
-														</MenuItem>
-														<MenuItem
-															autoFocus={false}
-															sx={{
-																fontSize: '15px',
-																fontWeight: '500',
-																display: 'flex',
-																alignItems:
-																	'center',
-																gap: '5px',
-															}}
-															onClick={() => {
-																if (
-																	props.deleteMessage
-																)
-																	props.deleteMessage(
-																		props
-																			.message
-																			.uid
-																	)
-															}}
-														>
-															<svg
-																width='21'
-																height='14'
-																viewBox='0 0 60 42'
-																fill='none'
-																xmlns='http://www.w3.org/2000/svg'
-															>
-																<path
-																	fillRule='evenodd'
-																	clipRule='evenodd'
-																	d='M17.4216 27.9757C18.1603 28.707 19.3566 28.707 20.0972 27.9757L24.4097 23.6633L28.6079 27.8633C29.3391 28.5946 30.5278 28.5946 31.2609 27.8633C31.9941 27.1321 31.9941 25.932 31.2609 25.2007L27.0629 21.0195L31.3154 16.7632C32.0542 16.032 32.0542 14.8321 31.3154 14.0821C30.5767 13.3509 29.3785 13.3509 28.6398 14.0821L24.3873 18.3382L20.1891 14.1382C19.456 13.4069 18.2673 13.4069 17.536 14.1382C16.801 14.8694 16.801 16.0695 17.536 16.8008L21.7341 20.982L17.4216 25.2946C16.681 26.0446 16.681 27.2257 17.4216 27.9757ZM3.75289 7.87575C3.75289 5.81325 5.43291 4.12575 7.50666 4.12576L40.3735 4.12576L55.6566 21.0383L40.4279 37.8758L7.50666 37.8758C5.43291 37.8758 3.75288 36.1883 3.75288 34.1258L3.75289 7.87575ZM7.50666 41.6258L41.1534 41.6258C41.6784 41.6633 42.2147 41.4945 42.616 41.1007L59.4648 22.4633C59.8604 22.0696 60.031 21.5445 60.0029 21.0383C60.031 20.5133 59.8604 19.9883 59.4648 19.5945L42.616 0.957118C42.2485 0.600868 41.7685 0.413295 41.2885 0.413295L41.2885 0.375758L7.50666 0.375755C3.36104 0.375755 -0.000889326 3.732 -0.000889688 7.87575L-0.000891983 34.1258C-0.000892345 38.2695 3.36104 41.6258 7.50666 41.6258Z'
-																	fill='#8280FF'
-																/>
-															</svg>
-															Удалить
-														</MenuItem>
-													</Menu>
-												</Box>
-												<TooltipCustom title='При отправке данного сообщения произошла ошибка, нажмите чтобы отправить заново'>
-													{!props.message.is_sent && (
-														<Image
-															onClick={resend}
-															style={{
-																cursor: 'pointer',
-																marginRight: '5px',
-															}}
-															height={20}
-															width={20}
-															alt='1'
-															src={
-																'/svg/important.svg'
-															}
-														/>
-													)}
-												</TooltipCustom>
-												<Typography
-													className='smallScroll'
-													sx={{
-														overflowY: 'scroll',
-														padding: '10px 15px',
-														backgroundColor: '#7F7DF3',
-														borderRadius: '13px',
-														color: '#FFFFFF',
-														lineHeight: '21px',
-														fontSize: '15px',
-														fontWeight: '400px',
-														marginTop: 0.4,
-														textAlign: 'left',
-														whiteSpace:
-															props.message.content
-																.length > 30
-																? 'pre-wrap'
-																: 'pre',
-													}}
-												>
-													{/*<Markdown content={props.message.content} />*/}
-													{props.message.content}
-												</Typography>
-											</Box>
-										</Box>
-									)
-								) : (
-									<Box display='flex' alignItems='center'>
-										<Box marginRight={1} sx={{ cursor: 'pointer' }}>
-											<Box
-												onClick={handleClick}
-												aria-controls={
-													open ? 'message-menu' : undefined
-												}
-												aria-haspopup='true'
-												aria-expanded={
-													open ? 'true' : undefined
-												}
-											>
-												<TooltipCustom title={'Открыть меню'}>
-													<svg
-														width='22'
-														height='22'
-														viewBox='0 0 19 19'
-														fill='none'
-														xmlns='http://www.w3.org/2000/svg'
-													>
-														<rect
-															x='1'
-															y='1'
-															width='7'
-															height='7'
-															rx='2'
-															stroke='#A4AAB5'
-															strokeWidth='2'
-														/>
-														<rect
-															x='1'
-															y='11'
-															width='7'
-															height='7'
-															rx='2'
-															stroke='#A4AAB5'
-															strokeWidth='2'
-														/>
-														<rect
-															x='11'
-															y='11'
-															width='7'
-															height='7'
-															rx='2'
-															stroke='#A4AAB5'
-															strokeWidth='2'
-														/>
-														<circle
-															cx='14.5'
-															cy='4.5'
-															r='3.5'
-															stroke='#A4AAB5'
-															strokeWidth='2'
-														/>
-													</svg>
-												</TooltipCustom>
-											</Box>
-											<Menu
-												autoFocus={false}
-												open={open}
-												anchorEl={anchorEl}
-												id='message-menu'
-												onClose={handleClose}
-												onClick={handleClose}
-												sx={{
-													'& .MuiMenu-list': {
-														backgroundColor:
-															theme === 'dark'
-																? '#303035'
-																: '#EFF0F2',
-														color: '#8280FF',
-														borderRadius: '15px',
-													},
-													'& .MuiPopover-paper': {
-														backgroundColor:
-															theme === 'dark'
-																? '#303035'
-																: '#EFF0F2',
-														borderRadius: '15px',
-													},
-												}}
-											>
-												<MenuItem
-													autoFocus={false}
-													sx={{
-														fontSize: '15px',
-														fontWeight: '500',
-														display: 'flex',
-														alignItems: 'center',
-														gap: '10px',
-													}}
-													onClick={() => {
-														copy(props.message.content)
-													}}
-												>
-													<svg
-														width='14'
-														height='14'
-														viewBox='0 0 19 19'
-														fill='none'
-														xmlns='http://www.w3.org/2000/svg'
-													>
-														<g id='Group 29094'>
-															<rect
-																id='Rectangle 3340'
-																x='0.85'
-																y='3.85'
-																width='14.3'
-																height='14.3'
-																rx='2.15'
-																fill='transparent'
-																stroke='#8280FF'
-																strokeWidth='1.7'
-															/>
-															<path
-																id='Vector 40'
-																d='M6.5 1H15C16.6569 1 18 2.34315 18 4V12.5'
-																stroke='#8280FF'
-																strokeWidth='1.7'
-																strokeLinecap='round'
-																strokeLinejoin='round'
-															/>
-														</g>
-													</svg>
-													Копировать
-												</MenuItem>
-												<MenuItem
-													autoFocus={false}
-													sx={{
-														fontSize: '15px',
-														fontWeight: '500',
-														display: 'flex',
-														alignItems: 'center',
-														gap: '5px',
-													}}
-													onClick={() => {
-														if (props.deleteMessage)
-															props.deleteMessage(
-																props.message.uid
-															)
-													}}
-												>
-													<svg
-														width='21'
-														height='14'
-														viewBox='0 0 60 42'
-														fill='none'
-														xmlns='http://www.w3.org/2000/svg'
-													>
-														<path
-															fillRule='evenodd'
-															clipRule='evenodd'
-															d='M17.4216 27.9757C18.1603 28.707 19.3566 28.707 20.0972 27.9757L24.4097 23.6633L28.6079 27.8633C29.3391 28.5946 30.5278 28.5946 31.2609 27.8633C31.9941 27.1321 31.9941 25.932 31.2609 25.2007L27.0629 21.0195L31.3154 16.7632C32.0542 16.032 32.0542 14.8321 31.3154 14.0821C30.5767 13.3509 29.3785 13.3509 28.6398 14.0821L24.3873 18.3382L20.1891 14.1382C19.456 13.4069 18.2673 13.4069 17.536 14.1382C16.801 14.8694 16.801 16.0695 17.536 16.8008L21.7341 20.982L17.4216 25.2946C16.681 26.0446 16.681 27.2257 17.4216 27.9757ZM3.75289 7.87575C3.75289 5.81325 5.43291 4.12575 7.50666 4.12576L40.3735 4.12576L55.6566 21.0383L40.4279 37.8758L7.50666 37.8758C5.43291 37.8758 3.75288 36.1883 3.75288 34.1258L3.75289 7.87575ZM7.50666 41.6258L41.1534 41.6258C41.6784 41.6633 42.2147 41.4945 42.616 41.1007L59.4648 22.4633C59.8604 22.0696 60.031 21.5445 60.0029 21.0383C60.031 20.5133 59.8604 19.9883 59.4648 19.5945L42.616 0.957118C42.2485 0.600868 41.7685 0.413295 41.2885 0.413295L41.2885 0.375758L7.50666 0.375755C3.36104 0.375755 -0.000889326 3.732 -0.000889688 7.87575L-0.000891983 34.1258C-0.000892345 38.2695 3.36104 41.6258 7.50666 41.6258Z'
-															fill='#8280FF'
-														/>
-													</svg>
-													Удалить
-												</MenuItem>
-											</Menu>
-										</Box>
-										<TooltipCustom title='При отправке данного сообщения произошла ошибка, нажмите чтобы отправить заново'>
-											{!props.message.is_sent && (
-												<Image
-													onClick={resend}
-													style={{
-														cursor: 'pointer',
-														marginRight: '5px',
-													}}
-													height={20}
-													width={20}
-													alt='1'
-													src={'/svg/important.svg'}
-												/>
-											)}
-										</TooltipCustom>
-										<Typography
-											className='smallScroll'
-											sx={{
-												overflowY: 'scroll',
-												padding: '10px 15px',
-												backgroundColor: '#7F7DF3',
-												borderRadius: '13px',
-												color: '#FFFFFF',
-												lineHeight: '21px',
-												fontSize: '15px',
-												fontWeight: '400px',
-												marginTop: 0.4,
-												textAlign: 'left',
-												whiteSpace:
-													props.message.content.length > 30
-														? 'pre-wrap'
-														: 'pre',
-											}}
-										>
-											{/*<Markdown content={props.message.content} />*/}
-											{props.message.content}
-										</Typography>
-									</Box>
-								)}
-							</Box>
-						</Box>
-					</Box>
-				) : (
-					<BotMessage
-						modelTitle={props.modelTitle}
-						deleteMessage={props.deleteMessage}
-						isNewMessage={props.isNewMessage}
-						message={props.message}
-						desktop={desktop}
-						theme={theme}
-						modelType={props.modelType}
-					/>
-				)}
-			</span>
-		</>
-	)
-})
@@ -1,2 +1,3 @@
 export * from './use-images-pagination'
-export * from './use-image-icons'
+export * from './messages.store'
+export * from './use-images-pagination'
@@ -0,0 +1,57 @@
+import { Message, OptimisticMessage } from '#/entities/message'
+import { create } from 'zustand'
+
+export interface MessagesStore {
+	messages: Message[]
+	loading: boolean
+	setMessages: (data: Message[]) => void
+	setLoading: (data: boolean) => void
+	addOptimistic: (content: string, info: object, modelSlug: string) => void
+  addMessages: (data: Message[]) => void
+}
+
+export const useMessagesStore = create<MessagesStore>((set, get) => {
+	const emptyMessage = {
+		created_at: new Date().toISOString(),
+		elapsed_time: '',
+		from_model: false,
+		is_favourite: false,
+		is_sent: false,
+		uid: 'optimistic',
+	}
+
+	function setMessages(data: Message[]) {
+		set({ ...get(), messages: data })
+	}
+
+	function setLoading(data: boolean) {
+		set({ ...get(), loading: data })
+	}
+
+	function addOptimistic(content: string, info: object, modelSlug: string) {
+		const message: Message = {
+			...{ ...emptyMessage, content, info, model: modelSlug },
+			file: null,
+		}
+
+		set({ ...get(), messages: [message, ...get().messages] })
+	}
+
+	function addMessages(data: Message[]) {
+		set({ ...get(), messages: [...get().messages, ...data] })
+	}
+
+  function deleteMessage(uid: string) {
+    set({ ...get(), messages: get().messages.filter((el) => el.uid !== uid) })
+  }
+
+	return {
+		messages: [],
+		loading: true,
+		setMessages,
+		setLoading,
+		addOptimistic,
+    addMessages,
+    deleteMessage
+	}
+})
@@ -0,0 +1,23 @@
+import { Message, useChatBotMessages } from '#/entities/message'
+import { stringIsImage } from '#/shared'
+import { useMemo, useState } from 'react'
+
+export function useChatMessageImage() {
+	const { messages } = useChatBotMessages()
+
+	const [currentSrc, setCurrentSrc] = useState<string | null>(null)
+
+	const onlyImageMessages = useMemo(
+		() =>
+			messages.filter((m) =>
+				!m.file || typeof m.file !== 'string' ? false : stringIsImage(m.file)
+			) as Message<string>[],
+		[messages]
+	)
+
+	return {
+		onlyImageMessages,
+		currentSrc,
+		setCurrentSrc,
+	}
+}
@@ -1,5 +1,5 @@
 import { getUserBalance } from '#/entities/balance'
-import { Message, MessageSend, sendImage } from '#/entities/message'
+import { Message } from '#/entities/message'
 import { useAppDispatch } from '#/app/store/store'
 import { useSession } from 'next-auth/react'
 import { useState, useRef, useEffect, useCallback } from 'react'
@@ -16,13 +16,10 @@ export function useImagesPagination(showError: (message: string) => void, type:
 
 	const [offset, setOffset] = useState<number>(0)
 
-	const dispatch = useAppDispatch()
-
 	async function onFetch() {
 		if (!data) return
 
 		setLoading(true)
-		console.log(offset)
 		const { data: answer, ...response } = await getImagesGalery(data.access, offset)
 		setLoading(false)
 
@@ -6,15 +6,10 @@ export const useMessages = (messages: Message[]) => {
 
 	const [loaded, setLoaded] = useState(false)
 
-	// типизация ну супер кривая)))
 	const computedLibraryImages = useMemo<Message<string>[]>(() => {
 		return messages
-			.map((el) => {
-				if (el.file && (el.file as any).includes('.zip')) return null
-				if (/\.jpg|\.png|\.jpeg|\.gif|\.webp|\.svg/.test(el.file as string)) return el
-        return null
-			})
-			.filter((el) => el !== null) as Message<string>[]
+			.map((e) => (!e.file || e.file.includes('.svg') ? null : e))
+			.filter((e) => e !== null) as Message<string>[]
 	}, [messages])
 
 	return {
@@ -1,843 +0,0 @@
-import React, { useEffect, 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 { useAppSelector } from '#/app/store/store'
-import { TooltipCustom } from '#/shared'
-import { Message } from '#/shared/lib/types/model'
-import { BotMessage } from '#/widgets/messages'
-import { Markdown } from '../../markdown/markdown'
-import { formatDate } from '#/shared/lib/helpers'
-
-interface IMessagesList {
-	// messageResponse: Message[] | null
-	// mode?: string
-	// sendMessage?: (title: string) => void
-	// getMessagesPagination?: () => Promise<void>
-
-	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({ setCurrentSrc, setModal, ...props }: IMessagesList) {
-	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
-	const open = Boolean(anchorEl)
-	const desktop = props.device === 'desktop'
-	const [loaded, setLoaded] = useState(false)
-
-	const copy = (text: string) => {
-		navigator.clipboard.writeText(text)
-	}
-	const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-		setAnchorEl(event.currentTarget)
-	}
-	const handleClose = () => {
-		setAnchorEl(null)
-	}
-
-	const fileName = useMemo(() => {
-		if (!props.message.file) return 'Подбираем имя файла...'
-		const matches = (props.message.file as string).match(/air-messages\/(.+?)\.(.+?)\?/)
-		if (!matches) return 'Подбираем имя файла...'
-		return `${matches[1]}.${matches[2]}`
-	}, [])
-
-	const resend = async () => {
-		props.setResendValue(props.message.content)
-		if (props.message.file !== null) {
-			fetch(props.message.file as string, {
-				method: 'GET',
-				headers: {},
-			}).then((response) => {
-				response.arrayBuffer().then(function (buffer) {
-					const url = new Blob([buffer])
-					const binaryFile = new File([url], 'image.png')
-					if (props.onLoadImage) {
-						props.onLoadImage(null, binaryFile)
-					}
-				})
-			})
-		}
-	}
-
-	useEffect(() => {
-		console.log(props.message.file)
-	}, [props.message.file])
-
-	const flexStyle = {
-		display: 'flex',
-		alignItems: 'center',
-		justifyContent: 'start',
-		gap: '12px',
-		color: '#7f7df3 !important',
-		fontWeight: '600 !important',
-		lineHeight: '140%',
-		letterSpacing: '0.2px',
-		cursor: 'pointer',
-	}
-
-	const theme = useAppSelector((state) => state.theme.theme)
-
-	return (
-		<>
-			<span className='tutorial-message'>
-				{!props.message.from_model ? (
-					// <Slide className='tutorial-message-me' direction='left' in={props.isNewMessage} mountOnEnter unmountOnExit>
-					<Box>
-						<Box
-							className='smallScroll'
-							sx={{
-								width: 'fit-content',
-								marginLeft: 'auto',
-								maxWidth: desktop ? '68%' : '100%',
-								marginTop: 2,
-								marginBottom: 2,
-							}}
-						>
-							<Stack direction='row' justifyContent='end' alignItems='center'>
-								<Typography
-									variant='body2'
-									sx={{
-										color: theme === 'light' ? '#868686' : '#A6A5A5',
-										lineHeight: '19.6px',
-										fontSize: '13px',
-										fontWeight: '600',
-										marginLeft: 1,
-									}}
-								>
-									{formatDate(props.message.created_at, {
-										hour: 'numeric',
-										minute: 'numeric',
-									})}
-								</Typography>
-							</Stack>
-
-							<Box display='flex' alignItems='center' justifyContent='end'>
-								{props.message.file ? (
-									/\.jpg|\.png|\.jpeg|\.gif|\.webp|\.svg/.test(
-										props.message.file as string
-									) ? (
-										<Box
-											sx={{
-												display: 'flex',
-												alignItems: 'end',
-												flexDirection: 'column',
-												height: '60%',
-												width: '60%',
-											}}
-										>
-											<Box sx={{ position: 'relative' }}>
-												<Image
-													onClick={() => {
-														if (!props.message.file) return
-														setCurrentSrc(props.message.file.toString())
-														setModal(true)
-													}}
-													onLoadingComplete={() => setLoaded(true)}
-													style={{
-														objectFit: 'contain',
-														height: '100%',
-														width: '100%',
-														borderRadius: '13px',
-														cursor: 'pointer',
-														opacity: loaded ? '100%' : '0%',
-														minWidth: '100px',
-														minHeight: '100px',
-													}}
-													width={500}
-													height={500}
-													src={props.message.file.toString().split('?type')[0]}
-													alt={'К сожалению, изображение не загрузилось'}
-												/>
-												{!loaded && (
-													<Skeleton
-														sx={{
-															background:
-																theme === 'dark'
-																	? '#2d2d2f'
-																	: '#EFF0F2',
-															position: 'absolute',
-															top: '0',
-															left: '0',
-															zIndex: '1',
-															borderRadius: 5,
-															width: '100%',
-															height: '100%',
-														}}
-														variant='rectangular'
-													/>
-												)}
-											</Box>
-											<Box display='flex' alignItems='center'>
-												<Box marginRight={1} sx={{ cursor: 'pointer' }}>
-													<Box
-														onClick={handleClick}
-														aria-controls={open ? 'message-menu' : undefined}
-														aria-haspopup='true'
-														aria-expanded={open ? 'true' : undefined}
-													>
-														<TooltipCustom title={'Открыть меню'}>
-															<svg
-																width='22'
-																height='22'
-																viewBox='0 0 19 19'
-																fill='none'
-																xmlns='http://www.w3.org/2000/svg'
-															>
-																<rect
-																	x='1'
-																	y='1'
-																	width='7'
-																	height='7'
-																	rx='2'
-																	stroke='#A4AAB5'
-																	strokeWidth='2'
-																/>
-																<rect
-																	x='1'
-																	y='11'
-																	width='7'
-																	height='7'
-																	rx='2'
-																	stroke='#A4AAB5'
-																	strokeWidth='2'
-																/>
-																<rect
-																	x='11'
-																	y='11'
-																	width='7'
-																	height='7'
-																	rx='2'
-																	stroke='#A4AAB5'
-																	strokeWidth='2'
-																/>
-																<circle
-																	cx='14.5'
-																	cy='4.5'
-																	r='3.5'
-																	stroke='#A4AAB5'
-																	strokeWidth='2'
-																/>
-															</svg>
-														</TooltipCustom>
-													</Box>
-													<Menu
-														autoFocus={false}
-														open={open}
-														anchorEl={anchorEl}
-														id='message-menu'
-														onClose={handleClose}
-														onClick={handleClose}
-														sx={{
-															'& .MuiMenu-list': {
-																backgroundColor:
-																	theme === 'dark'
-																		? '#303035'
-																		: '#EFF0F2',
-																color: '#8280FF',
-																borderRadius: '15px',
-															},
-															'& .MuiPopover-paper': {
-																backgroundColor:
-																	theme === 'dark'
-																		? '#303035'
-																		: '#EFF0F2',
-																borderRadius: '15px',
-															},
-														}}
-													>
-														<MenuItem
-															autoFocus={false}
-															sx={{
-																fontSize: '15px',
-																fontWeight: '500',
-																display: 'flex',
-																alignItems: 'center',
-																gap: '10px',
-															}}
-															onClick={() => {
-																copy(props.message.content)
-															}}
-														>
-															<svg
-																width='14'
-																height='14'
-																viewBox='0 0 19 19'
-																fill='none'
-																xmlns='http://www.w3.org/2000/svg'
-															>
-																<g id='Group 29094'>
-																	<rect
-																		id='Rectangle 3340'
-																		x='0.85'
-																		y='3.85'
-																		width='14.3'
-																		height='14.3'
-																		rx='2.15'
-																		fill='transparent'
-																		stroke='#8280FF'
-																		strokeWidth='1.7'
-																	/>
-																	<path
-																		id='Vector 40'
-																		d='M6.5 1H15C16.6569 1 18 2.34315 18 4V12.5'
-																		stroke='#8280FF'
-																		strokeWidth='1.7'
-																		strokeLinecap='round'
-																		strokeLinejoin='round'
-																	/>
-																</g>
-															</svg>
-															Копировать
-														</MenuItem>
-														<MenuItem
-															autoFocus={false}
-															sx={{
-																fontSize: '15px',
-																fontWeight: '500',
-																display: 'flex',
-																alignItems: 'center',
-																gap: '5px',
-															}}
-															onClick={() => {
-																if (props.deleteMessage)
-																	props.deleteMessage(
-																		props.message.uid
-																	)
-															}}
-														>
-															<svg
-																width='21'
-																height='14'
-																viewBox='0 0 60 42'
-																fill='none'
-																xmlns='http://www.w3.org/2000/svg'
-															>
-																<path
-																	fillRule='evenodd'
-																	clipRule='evenodd'
-																	d='M17.4216 27.9757C18.1603 28.707 19.3566 28.707 20.0972 27.9757L24.4097 23.6633L28.6079 27.8633C29.3391 28.5946 30.5278 28.5946 31.2609 27.8633C31.9941 27.1321 31.9941 25.932 31.2609 25.2007L27.0629 21.0195L31.3154 16.7632C32.0542 16.032 32.0542 14.8321 31.3154 14.0821C30.5767 13.3509 29.3785 13.3509 28.6398 14.0821L24.3873 18.3382L20.1891 14.1382C19.456 13.4069 18.2673 13.4069 17.536 14.1382C16.801 14.8694 16.801 16.0695 17.536 16.8008L21.7341 20.982L17.4216 25.2946C16.681 26.0446 16.681 27.2257 17.4216 27.9757ZM3.75289 7.87575C3.75289 5.81325 5.43291 4.12575 7.50666 4.12576L40.3735 4.12576L55.6566 21.0383L40.4279 37.8758L7.50666 37.8758C5.43291 37.8758 3.75288 36.1883 3.75288 34.1258L3.75289 7.87575ZM7.50666 41.6258L41.1534 41.6258C41.6784 41.6633 42.2147 41.4945 42.616 41.1007L59.4648 22.4633C59.8604 22.0696 60.031 21.5445 60.0029 21.0383C60.031 20.5133 59.8604 19.9883 59.4648 19.5945L42.616 0.957118C42.2485 0.600868 41.7685 0.413295 41.2885 0.413295L41.2885 0.375758L7.50666 0.375755C3.36104 0.375755 -0.000889326 3.732 -0.000889688 7.87575L-0.000891983 34.1258C-0.000892345 38.2695 3.36104 41.6258 7.50666 41.6258Z'
-																	fill='#8280FF'
-																/>
-															</svg>
-															Удалить
-														</MenuItem>
-													</Menu>
-												</Box>
-												<TooltipCustom title='При отправке данного сообщения произошла ошибка, нажмите чтобы отправить заново'>
-													{!props.message.is_sent && (
-														<Image
-															onClick={resend}
-															style={{
-																cursor: 'pointer',
-																marginRight: '5px',
-															}}
-															height={20}
-															width={20}
-															alt='1'
-															src={'/svg/important.svg'}
-														/>
-													)}
-												</TooltipCustom>
-												<Typography
-													className='smallScroll'
-													sx={{
-														overflowY: 'scroll',
-														padding: '10px 15px',
-														backgroundColor: '#7F7DF3',
-														borderRadius: '13px',
-														color: '#FFFFFF',
-														lineHeight: '21px',
-														fontSize: '15px',
-														fontWeight: '400px',
-														marginTop: 0.4,
-														textAlign: 'left',
-														whiteSpace:
-															props.message.content.length > 30
-																? 'pre-wrap'
-																: 'pre',
-													}}
-												>
-													{/*<Markdown content={props.message.content} />*/}
-													{props.message.content}
-												</Typography>
-											</Box>
-										</Box>
-									) : (
-										<Box
-											sx={{
-												display: 'flex',
-												alignItems: 'end',
-												flexDirection: 'column',
-												gap: '5px',
-											}}
-										>
-											<Box display={'flex'}>
-												<Box
-													onClick={() => {
-														if (props.message.file) {
-															window.open(
-																props.message.file as string,
-																'_blank'
-															)
-														}
-													}}
-													className='smallScroll'
-													sx={{
-														overflowY: 'scroll',
-														position: 'relative',
-														padding: '15px 23px',
-
-														border: `1px solid ${
-															theme === 'dark' ? '#303035' : '#EFF0F2'
-														}`,
-
-														boxShadow: 'none',
-														fontSize: '15px',
-														marginTop: 0.5,
-														textAlign: 'left',
-														fontFamily: 'Raleway,sans-serif',
-														borderRadius: '13px',
-														'&  p': {
-															color: 'inherit',
-															fontStyle: 'inherit',
-														},
-														...flexStyle,
-													}}
-												>
-													<Box
-														sx={{
-															width: '16px',
-															height: '18px',
-														}}
-													>
-														<svg
-															width='16'
-															height='18'
-															viewBox='0 0 15 19'
-															fill='none'
-															xmlns='http://www.w3.org/2000/svg'
-														>
-															<path
-																fillRule='evenodd'
-																clipRule='evenodd'
-																d='M10.3286 0.578662C9.95416 0.20795 9.44851 0 8.92158 0H2C0.895433 0 0 0.895431 0 2V17C0 18.1046 0.895431 19 2 19H13C14.1046 19 15 18.1046 15 17V6.03743C15 5.50349 14.7865 4.99173 14.4071 4.61609L10.3286 0.578662ZM10.0669 5.37846C9.79079 5.37846 9.56693 5.1546 9.56693 4.87846V2.19238C9.56693 1.74815 10.103 1.52452 10.4187 1.83705L13.132 4.52313C13.4495 4.83737 13.227 5.37846 12.7803 5.37846H11.7815H10.0669Z'
-																fill='#7f7df3'
-															/>
-														</svg>
-													</Box>
-
-													<Markdown content={fileName} theme={theme} />
-												</Box>
-											</Box>
-											<Box display='flex' alignItems='center'>
-												<Box marginRight={1} sx={{ cursor: 'pointer' }}>
-													<Box
-														onClick={handleClick}
-														aria-controls={open ? 'message-menu' : undefined}
-														aria-haspopup='true'
-														aria-expanded={open ? 'true' : undefined}
-													>
-														<TooltipCustom title={'Открыть меню'}>
-															<svg
-																width='22'
-																height='22'
-																viewBox='0 0 19 19'
-																fill='none'
-																xmlns='http://www.w3.org/2000/svg'
-															>
-																<rect
-																	x='1'
-																	y='1'
-																	width='7'
-																	height='7'
-																	rx='2'
-																	stroke='#A4AAB5'
-																	strokeWidth='2'
-																/>
-																<rect
-																	x='1'
-																	y='11'
-																	width='7'
-																	height='7'
-																	rx='2'
-																	stroke='#A4AAB5'
-																	strokeWidth='2'
-																/>
-																<rect
-																	x='11'
-																	y='11'
-																	width='7'
-																	height='7'
-																	rx='2'
-																	stroke='#A4AAB5'
-																	strokeWidth='2'
-																/>
-																<circle
-																	cx='14.5'
-																	cy='4.5'
-																	r='3.5'
-																	stroke='#A4AAB5'
-																	strokeWidth='2'
-																/>
-															</svg>
-														</TooltipCustom>
-													</Box>
-													<Menu
-														autoFocus={false}
-														open={open}
-														anchorEl={anchorEl}
-														id='message-menu'
-														onClose={handleClose}
-														onClick={handleClose}
-														sx={{
-															'& .MuiMenu-list': {
-																backgroundColor:
-																	theme === 'dark'
-																		? '#303035'
-																		: '#EFF0F2',
-																color: '#8280FF',
-																borderRadius: '15px',
-															},
-															'& .MuiPopover-paper': {
-																backgroundColor:
-																	theme === 'dark'
-																		? '#303035'
-																		: '#EFF0F2',
-																borderRadius: '15px',
-															},
-														}}
-													>
-														<MenuItem
-															autoFocus={false}
-															sx={{
-																fontSize: '15px',
-																fontWeight: '500',
-																display: 'flex',
-																alignItems: 'center',
-																gap: '10px',
-															}}
-															onClick={() => {
-																copy(props.message.content)
-															}}
-														>
-															<svg
-																width='14'
-																height='14'
-																viewBox='0 0 19 19'
-																fill='none'
-																xmlns='http://www.w3.org/2000/svg'
-															>
-																<g id='Group 29094'>
-																	<rect
-																		id='Rectangle 3340'
-																		x='0.85'
-																		y='3.85'
-																		width='14.3'
-																		height='14.3'
-																		rx='2.15'
-																		fill='transparent'
-																		stroke='#8280FF'
-																		strokeWidth='1.7'
-																	/>
-																	<path
-																		id='Vector 40'
-																		d='M6.5 1H15C16.6569 1 18 2.34315 18 4V12.5'
-																		stroke='#8280FF'
-																		strokeWidth='1.7'
-																		strokeLinecap='round'
-																		strokeLinejoin='round'
-																	/>
-																</g>
-															</svg>
-															Копировать
-														</MenuItem>
-														<MenuItem
-															autoFocus={false}
-															sx={{
-																fontSize: '15px',
-																fontWeight: '500',
-																display: 'flex',
-																alignItems: 'center',
-																gap: '5px',
-															}}
-															onClick={() => {
-																if (props.deleteMessage)
-																	props.deleteMessage(
-																		props.message.uid
-																	)
-															}}
-														>
-															<svg
-																width='21'
-																height='14'
-																viewBox='0 0 60 42'
-																fill='none'
-																xmlns='http://www.w3.org/2000/svg'
-															>
-																<path
-																	fillRule='evenodd'
-																	clipRule='evenodd'
-																	d='M17.4216 27.9757C18.1603 28.707 19.3566 28.707 20.0972 27.9757L24.4097 23.6633L28.6079 27.8633C29.3391 28.5946 30.5278 28.5946 31.2609 27.8633C31.9941 27.1321 31.9941 25.932 31.2609 25.2007L27.0629 21.0195L31.3154 16.7632C32.0542 16.032 32.0542 14.8321 31.3154 14.0821C30.5767 13.3509 29.3785 13.3509 28.6398 14.0821L24.3873 18.3382L20.1891 14.1382C19.456 13.4069 18.2673 13.4069 17.536 14.1382C16.801 14.8694 16.801 16.0695 17.536 16.8008L21.7341 20.982L17.4216 25.2946C16.681 26.0446 16.681 27.2257 17.4216 27.9757ZM3.75289 7.87575C3.75289 5.81325 5.43291 4.12575 7.50666 4.12576L40.3735 4.12576L55.6566 21.0383L40.4279 37.8758L7.50666 37.8758C5.43291 37.8758 3.75288 36.1883 3.75288 34.1258L3.75289 7.87575ZM7.50666 41.6258L41.1534 41.6258C41.6784 41.6633 42.2147 41.4945 42.616 41.1007L59.4648 22.4633C59.8604 22.0696 60.031 21.5445 60.0029 21.0383C60.031 20.5133 59.8604 19.9883 59.4648 19.5945L42.616 0.957118C42.2485 0.600868 41.7685 0.413295 41.2885 0.413295L41.2885 0.375758L7.50666 0.375755C3.36104 0.375755 -0.000889326 3.732 -0.000889688 7.87575L-0.000891983 34.1258C-0.000892345 38.2695 3.36104 41.6258 7.50666 41.6258Z'
-																	fill='#8280FF'
-																/>
-															</svg>
-															Удалить
-														</MenuItem>
-													</Menu>
-												</Box>
-												<TooltipCustom title='При отправке данного сообщения произошла ошибка, нажмите чтобы отправить заново'>
-													{!props.message.is_sent && (
-														<Image
-															onClick={resend}
-															style={{
-																cursor: 'pointer',
-																marginRight: '5px',
-															}}
-															height={20}
-															width={20}
-															alt='1'
-															src={'/svg/important.svg'}
-														/>
-													)}
-												</TooltipCustom>
-												<Typography
-													className='smallScroll'
-													sx={{
-														overflowY: 'scroll',
-														padding: '10px 15px',
-														backgroundColor: '#7F7DF3',
-														borderRadius: '13px',
-														color: '#FFFFFF',
-														lineHeight: '21px',
-														fontSize: '15px',
-														fontWeight: '400px',
-														marginTop: 0.4,
-														textAlign: 'left',
-														whiteSpace:
-															props.message.content.length > 30
-																? 'pre-wrap'
-																: 'pre',
-													}}
-												>
-													{/*<Markdown content={props.message.content} />*/}
-													{props.message.content}
-												</Typography>
-											</Box>
-										</Box>
-									)
-								) : (
-									<Box display='flex' alignItems='center'>
-										<Box marginRight={1} sx={{ cursor: 'pointer' }}>
-											<Box
-												onClick={handleClick}
-												aria-controls={open ? 'message-menu' : undefined}
-												aria-haspopup='true'
-												aria-expanded={open ? 'true' : undefined}
-											>
-												<TooltipCustom title={'Открыть меню'}>
-													<svg
-														width='22'
-														height='22'
-														viewBox='0 0 19 19'
-														fill='none'
-														xmlns='http://www.w3.org/2000/svg'
-													>
-														<rect
-															x='1'
-															y='1'
-															width='7'
-															height='7'
-															rx='2'
-															stroke='#A4AAB5'
-															strokeWidth='2'
-														/>
-														<rect
-															x='1'
-															y='11'
-															width='7'
-															height='7'
-															rx='2'
-															stroke='#A4AAB5'
-															strokeWidth='2'
-														/>
-														<rect
-															x='11'
-															y='11'
-															width='7'
-															height='7'
-															rx='2'
-															stroke='#A4AAB5'
-															strokeWidth='2'
-														/>
-														<circle
-															cx='14.5'
-															cy='4.5'
-															r='3.5'
-															stroke='#A4AAB5'
-															strokeWidth='2'
-														/>
-													</svg>
-												</TooltipCustom>
-											</Box>
-											<Menu
-												autoFocus={false}
-												open={open}
-												anchorEl={anchorEl}
-												id='message-menu'
-												onClose={handleClose}
-												onClick={handleClose}
-												sx={{
-													'& .MuiMenu-list': {
-														backgroundColor:
-															theme === 'dark' ? '#303035' : '#EFF0F2',
-														color: '#8280FF',
-														borderRadius: '15px',
-													},
-													'& .MuiPopover-paper': {
-														backgroundColor:
-															theme === 'dark' ? '#303035' : '#EFF0F2',
-														borderRadius: '15px',
-													},
-												}}
-											>
-												<MenuItem
-													autoFocus={false}
-													sx={{
-														fontSize: '15px',
-														fontWeight: '500',
-														display: 'flex',
-														alignItems: 'center',
-														gap: '10px',
-													}}
-													onClick={() => {
-														copy(props.message.content)
-													}}
-												>
-													<svg
-														width='14'
-														height='14'
-														viewBox='0 0 19 19'
-														fill='none'
-														xmlns='http://www.w3.org/2000/svg'
-													>
-														<g id='Group 29094'>
-															<rect
-																id='Rectangle 3340'
-																x='0.85'
-																y='3.85'
-																width='14.3'
-																height='14.3'
-																rx='2.15'
-																fill='transparent'
-																stroke='#8280FF'
-																strokeWidth='1.7'
-															/>
-															<path
-																id='Vector 40'
-																d='M6.5 1H15C16.6569 1 18 2.34315 18 4V12.5'
-																stroke='#8280FF'
-																strokeWidth='1.7'
-																strokeLinecap='round'
-																strokeLinejoin='round'
-															/>
-														</g>
-													</svg>
-													Копировать
-												</MenuItem>
-												<MenuItem
-													autoFocus={false}
-													sx={{
-														fontSize: '15px',
-														fontWeight: '500',
-														display: 'flex',
-														alignItems: 'center',
-														gap: '5px',
-													}}
-													onClick={() => {
-														if (props.deleteMessage)
-															props.deleteMessage(props.message.uid)
-													}}
-												>
-													<svg
-														width='21'
-														height='14'
-														viewBox='0 0 60 42'
-														fill='none'
-														xmlns='http://www.w3.org/2000/svg'
-													>
-														<path
-															fillRule='evenodd'
-															clipRule='evenodd'
-															d='M17.4216 27.9757C18.1603 28.707 19.3566 28.707 20.0972 27.9757L24.4097 23.6633L28.6079 27.8633C29.3391 28.5946 30.5278 28.5946 31.2609 27.8633C31.9941 27.1321 31.9941 25.932 31.2609 25.2007L27.0629 21.0195L31.3154 16.7632C32.0542 16.032 32.0542 14.8321 31.3154 14.0821C30.5767 13.3509 29.3785 13.3509 28.6398 14.0821L24.3873 18.3382L20.1891 14.1382C19.456 13.4069 18.2673 13.4069 17.536 14.1382C16.801 14.8694 16.801 16.0695 17.536 16.8008L21.7341 20.982L17.4216 25.2946C16.681 26.0446 16.681 27.2257 17.4216 27.9757ZM3.75289 7.87575C3.75289 5.81325 5.43291 4.12575 7.50666 4.12576L40.3735 4.12576L55.6566 21.0383L40.4279 37.8758L7.50666 37.8758C5.43291 37.8758 3.75288 36.1883 3.75288 34.1258L3.75289 7.87575ZM7.50666 41.6258L41.1534 41.6258C41.6784 41.6633 42.2147 41.4945 42.616 41.1007L59.4648 22.4633C59.8604 22.0696 60.031 21.5445 60.0029 21.0383C60.031 20.5133 59.8604 19.9883 59.4648 19.5945L42.616 0.957118C42.2485 0.600868 41.7685 0.413295 41.2885 0.413295L41.2885 0.375758L7.50666 0.375755C3.36104 0.375755 -0.000889326 3.732 -0.000889688 7.87575L-0.000891983 34.1258C-0.000892345 38.2695 3.36104 41.6258 7.50666 41.6258Z'
-															fill='#8280FF'
-														/>
-													</svg>
-													Удалить
-												</MenuItem>
-											</Menu>
-										</Box>
-										<TooltipCustom title='При отправке данного сообщения произошла ошибка, нажмите чтобы отправить заново'>
-											{!props.message.is_sent && (
-												<Image
-													onClick={resend}
-													style={{
-														cursor: 'pointer',
-														marginRight: '5px',
-													}}
-													height={20}
-													width={20}
-													alt='1'
-													src={'/svg/important.svg'}
-												/>
-											)}
-										</TooltipCustom>
-										<Typography
-											className='smallScroll'
-											sx={{
-												overflowY: 'scroll',
-												padding: '10px 15px',
-												backgroundColor: '#7F7DF3',
-												borderRadius: '13px',
-												color: '#FFFFFF',
-												lineHeight: '21px',
-												fontSize: '15px',
-												fontWeight: '400px',
-												marginTop: 0.4,
-												textAlign: 'left',
-												whiteSpace:
-													props.message.content.length > 30 ? 'pre-wrap' : 'pre',
-											}}
-										>
-											{/*<Markdown content={props.message.content} />*/}
-											{props.message.content}
-										</Typography>
-									</Box>
-								)}
-							</Box>
-						</Box>
-					</Box>
-				) : (
-					<BotMessage
-						modelTitle={props.modelTitle}
-						deleteMessage={props.deleteMessage}
-						isNewMessage={props.isNewMessage}
-						message={props.message}
-						desktop={desktop}
-						theme={theme}
-						modelType={props.modelType}
-					/>
-				)}
-			</span>
-		</>
-	)
-})
@@ -2,7 +2,7 @@ import React from 'react'
 import { Box } from '@mui/material'
 import Link from 'next/link'
 
-import { Message } from '#/shared/lib/types/model'
+import { Message } from '#/entities/message'
 
 export function AnswerWrap(props: { message: Message }) {
 	if (props.message.file) {
@@ -12,7 +12,11 @@ export function AnswerWrap(props: { message: Message }) {
 
 		return (
 			<Box>
-				<Link onClick={(e) => e.stopPropagation()} target='_blank' href={props.message.file.toString()}>
+				<Link
+					onClick={(e) => e.stopPropagation()}
+					target='_blank'
+					href={props.message.file.toString()}
+				>
 					{messageText}
 				</Link>
 			</Box>
@@ -1,5 +0,0 @@
-.button {
-	background-color: transparent;
-	border: 0;
-	cursor: pointer;
-}
@@ -1,345 +0,0 @@
-import React, { useEffect } from 'react'
-import { Box, Menu, MenuItem, Slide, Typography } from '@mui/material'
-import Stack from '@mui/material/Stack'
-import Image from 'next/image'
-import styles from './bot-message.module.scss'
-
-import { useAppSelector } from '#/app/store/store'
-import { TooltipCustom } from '#/shared'
-import { Markdown } from '#/widgets/markdown/markdown'
-import { formatDate } from '#/shared/lib/helpers'
-
-export function BotMessage(props: any) {
-	// const LazyCode = dynamic(() => import('src/widgets/chat-gpt-field/ui/code'))
-	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
-	const open = Boolean(anchorEl)
-	const [markdownMessage, setMarkDownMessage] = React.useState<string>('')
-
-	const copy = (text: string) => {
-		navigator.clipboard.writeText(text)
-	}
-	const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-		setAnchorEl(event.currentTarget)
-	}
-	const handleClose = () => {
-		setAnchorEl(null)
-	}
-	const theme = useAppSelector((state) => state.theme.theme)
-
-	useEffect(() => {
-		if (props.message.file) {
-			let splitFileName = props.message.file.split('/')[4].split('?')[0]
-			let fileName: string = ''
-			if (splitFileName.length > 50) {
-				fileName =
-					splitFileName.slice(0, 25) +
-					'...' +
-					splitFileName
-						.slice(splitFileName.length - 8, splitFileName.length)
-						.split('.')[0] +
-					'.' +
-					splitFileName.split('.')[1]
-			} else {
-				fileName = splitFileName
-			}
-			setMarkDownMessage(fileName)
-		}
-	}, [props])
-
-	const flexStyle = props.message.file
-		? {
-				display: 'flex',
-				alignItems: 'center',
-				justifyContent: 'start',
-				gap: '12px',
-				color: '#7f7df3 !important',
-				fontWeight: '600 !important',
-				lineHeight: '140%',
-				letterSpacing: '0.2px',
-				cursor: 'pointer',
-		  }
-		: {}
-
-	return (
-		// <Slide direction='right' in={props.isNewMessage} mountOnEnter unmountOnExit>
-		<Box>
-			<Box
-				sx={{
-					display: 'flex',
-					alignItems: 'center',
-					marginTop: 2,
-					marginBottom: 2,
-				}}
-			>
-				{props.desktop && (
-					<Box sx={{ marginRight: 1 }}>
-						<Image
-							height={36}
-							width={36}
-							src='/svg/chatgpt/avatar.svg'
-							alt={''}
-						/>
-					</Box>
-				)}
-				<Box
-					sx={{
-						paddingLeft: 0,
-						width: 'fit-content',
-						maxWidth: props.desktop ? '68%' : '95%',
-						marginRight: 'auto',
-					}}
-				>
-					<Stack direction='row' justifyContent='space-between'>
-						<Typography
-							variant='body2'
-							sx={{
-								color: props.theme === 'light' ? '#868686' : '#A6A5A5',
-								lineHeight: '16.8px',
-								fontSize: '13px',
-								fontWeight: '600',
-								marginRight: 2,
-							}}
-						>
-							{props.modelTitle}
-						</Typography>
-						<Typography
-							variant='body2'
-							sx={{
-								color: props.theme === 'light' ? '#868686' : '#A6A5A5',
-								lineHeight: '19.6px',
-								fontSize: '13px',
-								fontWeight: '600',
-								marginRight: 4,
-							}}
-						>
-							{formatDate(props.message.created_at, {
-								hour: 'numeric',
-								minute: 'numeric',
-							})}
-						</Typography>
-					</Stack>
-					<Box display={'flex'} width='100%'>
-						<Box
-							onClick={() => {
-								if (props.message.file) {
-									window.open(props.message.file, '_blank')
-								}
-							}}
-							className='smallScroll'
-							sx={{
-								overflowY: 'scroll',
-								position: 'relative',
-								padding: '15px 23px',
-								border: `1px solid ${
-									props.theme === 'dark' ? '#303035' : '#EFF0F2'
-								}`,
-								color: props.theme === 'light' ? '#5E5E5E' : '#A6A5A5',
-								boxShadow: 'none',
-								lineHeight: '22.5px',
-								fontSize: '15px',
-								marginTop: 0.5,
-								textAlign: 'left',
-								fontFamily: 'Raleway,sans-serif',
-								borderRadius: '13px',
-								'&  p': {
-									color: 'inherit',
-									fontStyle: 'inherit',
-								},
-								...flexStyle,
-							}}
-						>
-							{props.message.file ? (
-								<svg
-									width='16'
-									height='18'
-									viewBox='0 0 15 19'
-									fill='none'
-									xmlns='http://www.w3.org/2000/svg'
-								>
-									<path
-										fillRule='evenodd'
-										clipRule='evenodd'
-										d='M10.3286 0.578662C9.95416 0.20795 9.44851 0 8.92158 0H2C0.895433 0 0 0.895431 0 2V17C0 18.1046 0.895431 19 2 19H13C14.1046 19 15 18.1046 15 17V6.03743C15 5.50349 14.7865 4.99173 14.4071 4.61609L10.3286 0.578662ZM10.0669 5.37846C9.79079 5.37846 9.56693 5.1546 9.56693 4.87846V2.19238C9.56693 1.74815 10.103 1.52452 10.4187 1.83705L13.132 4.52313C13.4495 4.83737 13.227 5.37846 12.7803 5.37846H11.7815H10.0669Z'
-										fill='#7f7df3'
-									/>
-								</svg>
-							) : (
-								''
-							)}
-							<Markdown
-								content={
-									props.message.file
-										? props.message.file.match(/(.+)\/(.+)\?/)[2]
-										: props.message.content
-								}
-								theme={theme}
-							/>
-						</Box>
-						<Box marginLeft={1}>
-							<Box
-								aria-controls={open ? 'message-menu' : undefined}
-								aria-haspopup='true'
-								aria-expanded={open ? 'true' : undefined}
-								sx={{
-									position: 'sticky',
-									top: '20px',
-								}}
-							>
-								<TooltipCustom title={'Открыть меню'}>
-									<button
-										className={styles.button}
-										onClick={handleClick}
-									>
-										<svg
-											width='22'
-											height='22'
-											viewBox='0 0 19 19'
-											fill='none'
-											xmlns='http://www.w3.org/2000/svg'
-										>
-											<rect
-												x='1'
-												y='1'
-												width='7'
-												height='7'
-												rx='2'
-												stroke='#A4AAB5'
-												strokeWidth='2'
-											/>
-											<rect
-												x='1'
-												y='11'
-												width='7'
-												height='7'
-												rx='2'
-												stroke='#A4AAB5'
-												strokeWidth='2'
-											/>
-											<rect
-												x='11'
-												y='11'
-												width='7'
-												height='7'
-												rx='2'
-												stroke='#A4AAB5'
-												strokeWidth='2'
-											/>
-											<circle
-												cx='14.5'
-												cy='4.5'
-												r='3.5'
-												stroke='#A4AAB5'
-												strokeWidth='2'
-											/>
-										</svg>
-									</button>
-								</TooltipCustom>
-							</Box>
-							<Menu
-								autoFocus={false}
-								open={open}
-								anchorEl={anchorEl}
-								id='message-menu'
-								onClose={handleClose}
-								onClick={handleClose}
-								sx={{
-									'& .MuiMenu-list': {
-										backgroundColor:
-											theme === 'dark' ? '#303035' : '#EFF0F2',
-										color: '#8280FF',
-										borderRadius: '15px',
-									},
-									'& .MuiPopover-paper': {
-										backgroundColor:
-											theme === 'dark' ? '#303035' : '#EFF0F2',
-										borderRadius: '15px',
-									},
-								}}
-							>
-								<MenuItem
-									autoFocus={false}
-									sx={{
-										fontSize: '15px',
-										fontWeight: '500',
-										display: 'flex',
-										alignItems: 'center',
-										gap: '10px',
-									}}
-									onClick={() => {
-										copy(
-											props.message.content
-												? props.message.content
-												: props.message.file
-														.split('/')[4]
-														.split('?')[0]
-										)
-									}}
-								>
-									<svg
-										width='14'
-										height='14'
-										viewBox='0 0 19 19'
-										fill='none'
-										xmlns='http://www.w3.org/2000/svg'
-									>
-										<g id='Group 29094'>
-											<rect
-												id='Rectangle 3340'
-												x='0.85'
-												y='3.85'
-												width='14.3'
-												height='14.3'
-												rx='2.15'
-												fill='transparent'
-												stroke='#8280FF'
-												strokeWidth='1.7'
-											/>
-											<path
-												id='Vector 40'
-												d='M6.5 1H15C16.6569 1 18 2.34315 18 4V12.5'
-												stroke='#8280FF'
-												strokeWidth='1.7'
-												strokeLinecap='round'
-												strokeLinejoin='round'
-											/>
-										</g>
-									</svg>
-									Копировать
-								</MenuItem>
-								<MenuItem
-									autoFocus={false}
-									sx={{
-										fontSize: '15px',
-										fontWeight: '500',
-										display: 'flex',
-										alignItems: 'center',
-										gap: '5px',
-									}}
-									onClick={() => {
-										props.deleteMessage(props.message.uid)
-									}}
-								>
-									<svg
-										width='21'
-										height='14'
-										viewBox='0 0 60 42'
-										fill='none'
-										xmlns='http://www.w3.org/2000/svg'
-									>
-										<path
-											fillRule='evenodd'
-											clipRule='evenodd'
-											d='M17.4216 27.9757C18.1603 28.707 19.3566 28.707 20.0972 27.9757L24.4097 23.6633L28.6079 27.8633C29.3391 28.5946 30.5278 28.5946 31.2609 27.8633C31.9941 27.1321 31.9941 25.932 31.2609 25.2007L27.0629 21.0195L31.3154 16.7632C32.0542 16.032 32.0542 14.8321 31.3154 14.0821C30.5767 13.3509 29.3785 13.3509 28.6398 14.0821L24.3873 18.3382L20.1891 14.1382C19.456 13.4069 18.2673 13.4069 17.536 14.1382C16.801 14.8694 16.801 16.0695 17.536 16.8008L21.7341 20.982L17.4216 25.2946C16.681 26.0446 16.681 27.2257 17.4216 27.9757ZM3.75289 7.87575C3.75289 5.81325 5.43291 4.12575 7.50666 4.12576L40.3735 4.12576L55.6566 21.0383L40.4279 37.8758L7.50666 37.8758C5.43291 37.8758 3.75288 36.1883 3.75288 34.1258L3.75289 7.87575ZM7.50666 41.6258L41.1534 41.6258C41.6784 41.6633 42.2147 41.4945 42.616 41.1007L59.4648 22.4633C59.8604 22.0696 60.031 21.5445 60.0029 21.0383C60.031 20.5133 59.8604 19.9883 59.4648 19.5945L42.616 0.957118C42.2485 0.600868 41.7685 0.413295 41.2885 0.413295L41.2885 0.375758L7.50666 0.375755C3.36104 0.375755 -0.000889326 3.732 -0.000889688 7.87575L-0.000891983 34.1258C-0.000892345 38.2695 3.36104 41.6258 7.50666 41.6258Z'
-											fill='#8280FF'
-										/>
-									</svg>
-									Удалить
-								</MenuItem>
-							</Menu>
-						</Box>
-					</Box>
-				</Box>
-			</Box>
-		</Box>
-	)
-}
@@ -0,0 +1,22 @@
+
+
+.observed{
+  width: 100%;
+  height: 1000px;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.list{
+  height: 100%;
+
+  &__scroll{
+    padding-top: 30px;
+    text-align: center;
+  }
+}
+
+.preview{
+  padding-top: 30px;
+}
\ No newline at end of file
@@ -1,220 +1,126 @@
-import React, { memo, useEffect, useMemo, useRef, useState } from 'react'
-import { Box, CircularProgress } from '@mui/material'
-import { useSession } from 'next-auth/react'
-
-import { ArrowDownScroll } from '#/shared/ui/icon-components/scroll-down-arrow'
+import React, { RefObject, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { IsNextDay } from '#/widgets/messages/ui/is-next-day'
-import { PreviewView } from '#/widgets/messages/message-components/preview-view'
-import { ImageModal } from '#/features/image-modal'
-import { ClientOnly } from '#/shared'
+import { ClientOnly, Loader, c } from '#/shared'
+import { Model, useChatBot } from '#/entities/model-entity'
+import { useChatBotPagination } from '#/features/chat-bot-pagination'
+import { useCurrentChat } from '#/features/chats'
+import { CommonScrollbar } from '#/shared/ui/scrollbar'
+import styles from './chat-messages-list.module.scss'
+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'
 import { createPortal } from 'react-dom'
-import { Message } from '#/entities/message'
+import { ImageModal } from '#/features/image-modal'
+import { useChatMessageImage } from '../model/use-chat-message-image'
+import { useModelInputStore } from '#/features/model-input/model'
+import { useChatWindowContext } from '#/widgets/chat-window/model'
 
 interface IMessagesList {
-	device: 'mobile' | 'desktop'
-	modelType: string
-	messageResponse: Message[] | null
-	mode?: string
-	sendMessage?: (title: string) => void
-	getMessagesPagination?: () => Promise<void>
-	deleteMessage?: (message_uid: string) => void
-	modelTitle: string | undefined
-	setResendValue: (value: string) => void
-	onLoadImage?: (event: React.ChangeEvent<HTMLInputElement> | null, file?: File) => void
-	loading: boolean
+	model: Model | null
 }
 
-export const ChatMessagesList: React.FC<IMessagesList> = memo(
-	({
-		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)
-		const [scrollBottom, setScrollBottom] = React.useState(0)
-
-		const desktop = device === 'desktop'
-		const { status } = useSession()
-		const [modal, setModal] = useState<boolean>(false)
-		const [isNewMessage, setIsNewMessage] = useState(false)
-
-		const [currentSrc, setCurrentSrc] = useState<string | null>(null)
-
-		const onlyImageMessage = useMemo(() => {
-			if (!messageResponse) return []
-			return messageResponse
-				.map((el) => {
-					if (el.file && (el.file as any).includes('.zip')) return null
-					if (/\.jpg|\.png|\.jpeg|\.gif|\.webp|\.svg/.test(el.file as string)) {
-						return { ...el, file: el.file?.toString().split('?type')[0]! }
-					}
-					return null
-				})
-				.filter((el) => el !== null) as Message<string>[]
-		}, [messageResponse])
+export const ChatMessagesList: React.FC<IMessagesList> = memo(({ model }) => {
+	const { query, pathname } = useRouter()
 
-		React.useEffect(() => {
-			const block = paginationScroll.current
+	const { currentSrc, setCurrentSrc, onlyImageMessages } = useChatMessageImage()
 
-			if (messageResponse != undefined && !isPaginating) {
-				setChatScrollHeight(paginationScroll.current.scrollHeight)
+	const { setValueInput } = useChatWindowContext()
 
-				const time = setTimeout(() => {
-					if (block) {
-						//@ts-ignore
-						block.scrollTo({
-							top: block.scrollHeight,
-							behavior: 'smooth', // добавляем плавную прокрутку
-						})
-					}
-				}, 250)
-				return () => clearTimeout(time)
-			} else if (messageResponse != undefined && isPaginating) {
-				if (block) {
-					//@ts-ignore
-					block.scrollTop = block.scrollHeight - chatScrollHeight
-					setChatScrollHeight(paginationScroll.current.scrollHeight)
-				}
-			}
-			setIsPaginating(false)
-		}, [messageResponse])
-
-		useEffect(() => {
-			setIsNewMessage(true)
-		}, [messageResponse])
-
-		const handleScroll = () => {
-			setScrollBottom(  
-				paginationScroll.current?.scrollHeight -
-					paginationScroll.current?.scrollTop -
-					paginationScroll.current?.clientHeight
-			)
-
-			if (paginationScroll.current && messageResponse?.length !== 0) {
-				const { scrollTop, scrollHeight, clientHeight } = paginationScroll.current
-				if (scrollTop === 0) {
-					if (getMessagesPagination) {
-						setIsPaginating(true)
-						getMessagesPagination()
-					}
-				}
-			}
+	const {
+		refScroll,
+		scrollContainer: sContainer,
+		onObserverMounted,
+		loading,
+		loaded,
+		messagesWithRefs: messages,
+		fetchMessages,
+		observer,
+	} = useChatBotPagination()
+
+	useEffect(() => {
+		onObserverMounted()
+
+		return () => {
+			if (!observer.current) return
+			observer.current.disconnect()
+			observer.current = null
 		}
+	}, [query.slug, pathname])
 
-		return (
-			<>
-				<ClientOnly>
-					{createPortal(
-						<ImageModal
-							modal={modal}
-							current={currentSrc}
-							setModal={setModal}
-							onSlideFalse={async () => {
-								getMessagesPagination && (await getMessagesPagination())
-							}}
-							images={onlyImageMessage}
-						/>,
-						document.getElementById('modal-container')!
-					)}
-				</ClientOnly>
+	const transitionRef = useRef(null)
 
-				<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: '150px',
-								zIndex: 10,
-							}}
-							onClick={() => {
-								//@ts-ignore
-								const block = paginationScroll.current
-
-								block.scrollTo({
-									top: block.scrollHeight,
-									behavior: 'smooth', // добавляем плавную прокрутку
-								})
-							}}
-						>
-							<ArrowDownScroll />
-						</Box>
-					)}
+	const [translate, setTranslate] = useState(0)
 
-					{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>
-					)}
+	const listRef = useRef<HTMLDivElement>(null)
 
-					{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>
-			</>
-		)
+	function onScrolling(y: number) {
+		setTranslate(y)
 	}
-)
 
-ChatMessagesList.displayName = 'ChatMessagesList'
+	return (
+		<>
+			<ClientOnly>
+				{createPortal(
+					<ImageModal
+						current={currentSrc}
+						images={onlyImageMessages}
+						onSlideFalse={() => fetchMessages()}
+					/>,
+					document.getElementById('modal-container')!
+				)}
+			</ClientOnly>
+
+			<SwitchTransition>
+				<CSSTransition
+					timeout={400}
+					key={loaded && !messages.length ? 'preview' : 'list'}
+					nodeRef={transitionRef}
+					classNames='my-node'
+				>
+					<div style={{ height: '100%' }} ref={transitionRef}>
+						{loaded && !messages.length && (
+							<div className={styles.preview}>
+								<PreviewView setValue={(value) => setValueInput(value)} />
+							</div>
+						)}
+
+						<div ref={listRef} className={styles.list}>
+							<CommonScrollbar
+								onScrolling={onScrolling}
+								blockedScrollTop
+								ref={sContainer}
+							>
+								{loading && (
+									<div className={styles.list__scroll}>
+										<Loader />
+									</div>
+								)}
+								<div className={c(styles.observed)} ref={refScroll}></div>
+								<TransitionGroup>
+									{messages.map(({ ref, ...message }, idx) => (
+										<CSSTransition key={idx} timeout={400} classNames='my-node'>
+											<IsNextDay
+												scrollBarRef={listRef}
+												translate={translate}
+												ref={ref}
+												setCurrentSrc={(current) =>
+													setCurrentSrc(current)
+												}
+												key={message.uid}
+												model={model}
+												message={message}
+												index={idx - 1}
+											/>
+										</CSSTransition>
+									))}
+								</TransitionGroup>
+							</CommonScrollbar>
+						</div>
+					</div>
+				</CSSTransition>
+			</SwitchTransition>
+		</>
+	)
+})
@@ -1,105 +0,0 @@
-import { useAppSelector } from '#/app/store/store'
-import { TooltipCustom } from '#/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>
-		</>
-	)
-}
@@ -0,0 +1,70 @@
+.model {
+	position: absolute;
+	top: 12px;
+	left: 12px;
+	z-index: 100;
+	background-color: rgba($color: #151518, $alpha: 0.5);
+	font-size: 13px;
+	padding: 2px 8px;
+	border-radius: 10px;
+	font-weight: 500;
+	color: #fff;
+}
+.wrap {
+	display: flex;
+	overflow: hidden;
+	width: 100%;
+	flex-wrap: wrap;
+	gap: 20px;
+	@media (max-width: 766px) {
+		height: 70vh;
+		width: 100%;
+		overflow-y: scroll;
+		text-align: center;
+		justify-content: center;
+	}
+	div {
+		margin-right: 10px;
+		@media (max-width: 766px) {
+			width: 100%;
+		}
+
+		.image {
+			margin: 10px auto;
+			width: 250px;
+			height: 250px;
+			border-radius: 15px !important;
+		}
+
+		@media (max-width: 1700px) {
+		}
+
+		@media (max-width: 766px) {
+			text-align: center;
+			width: 80%;
+		}
+	}
+}
+
+.list {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.container {
+	padding-top: 70px;
+	padding-bottom: 150px;
+	position: relative;
+}
+
+.scroll {
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+.loader {
+	margin: 0 auto;
+	width: fit-content;
+	margin-bottom: 20px;
+}
@@ -0,0 +1,59 @@
+import React, { createRef, memo, useEffect, useMemo, useState, version } from 'react'
+
+import { useAppSelector } from '#/app/store/store'
+import { ClientOnly, TooltipCustom, c, getDeviceType } from '#/shared'
+
+import styles from './image-messages-list.module.scss'
+import { createPortal } from 'react-dom'
+import { useMessages } from '../model/use-messages'
+import { ImageIcons } from '../../../entities/message/ui/image-icons'
+import { ImageModal } from '#/features/image-modal'
+import { ImageMessage, ImageOldMessage, Message } from '#/entities/message'
+import { GALLERY_IMAGES, getModalById } from '#/features/modals'
+
+interface ImageMessagesListProps {
+	device: 'mobile' | 'desktop'
+	images: Message[]
+	getMessagesPagination?: () => Promise<void>
+	isComplete: boolean
+}
+
+export const ImageMessagesListOld = ({ device, images, getMessagesPagination }: ImageMessagesListProps) => {
+	const { chosenImage, setChosenImage, computedLibraryImages } = useMessages(images)
+
+	const modal = getModalById(GALLERY_IMAGES)
+
+	const deviceType = getDeviceType()
+
+	return (
+		<>
+			<ClientOnly>
+				{createPortal(
+					<ImageModal
+						images={computedLibraryImages}
+						reverse={deviceType === 'desktop'}
+						current={chosenImage}
+					/>,
+					document.getElementById('modal-container')!
+				)}
+			</ClientOnly>
+
+			<div className={c(styles.images)}>
+				<p className={c(styles.images__title)}>ГЕНЕРАЦИИ</p>
+
+				<div key={images.length} className={c(styles.images__container)}>
+					{images.map((message, index) => (
+						<ImageOldMessage
+							style={{ zIndex: images.length - index }}
+							onClick={() => {
+								message.file && modal.setState(true)
+							}}
+							key={message.uid}
+							{...message}
+						/>
+					))}
+				</div>
+			</div>
+		</>
+	)
+}
@@ -1,3 +1,6 @@
+
+
+
 .model {
 	position: absolute;
 	top: 12px;
@@ -7,7 +10,7 @@
 	font-size: 13px;
 	padding: 2px 8px;
 	border-radius: 10px;
-  font-weight: 500;
+	font-weight: 500;
 	color: #fff;
 }
 .wrap {
@@ -45,3 +48,25 @@
 		}
 	}
 }
+
+.images {
+	margin-top: 15px;
+	&__title {
+		padding-bottom: 30px;
+		font-size: 16px;
+		color: var(--new-ui-gray-color);
+		font-weight: 600;
+		letter-spacing: 0.03rem;
+	}
+
+	&__container {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 20px;
+
+		@media screen and (max-width: 1000px) {
+			justify-content: center;
+		}
+	}
+}
@@ -1,33 +1,34 @@
-import React, { memo, useState } from 'react'
-import { Grow, Skeleton, Typography } from '@mui/material'
-import Box from '@mui/material/Box'
-import Image from 'next/image'
-import Link from 'next/link'
+import React, { createRef, memo, useEffect, useMemo, useState, version } from 'react'
 
-import { useAppSelector } from '#/app/store/store'
-import { ClientOnly, Error, TooltipCustom } from '#/shared'
+import { c, ClientOnly, getDeviceType, getOs, Loader } from '#/shared'
+import { CSSTransition } from 'react-transition-group'
 
 import styles from './image-messages-list.module.scss'
 import { createPortal } from 'react-dom'
 import { useMessages } from '../model/use-messages'
-import { ImageIcons } from './image-icons'
 import { ImageModal } from '#/features/image-modal'
-import { Message } from '#/entities/message'
-import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+import { ImageMessage, Message } from '#/entities/message'
+import { useImageBotPagination } from '#/features/image-bot-pagination'
+import { TransitionGroup } from 'react-transition-group'
 
-interface MessagesList {
-	device: 'mobile' | 'desktop'
-	images: Message[]
-	getMessagesPagination?: () => Promise<void>
-	isComplete: boolean
+export interface MessagesListProps {
+	className?: string
+	container: React.RefObject<HTMLDivElement>
 }
 
-export const ImageMessagesList: React.FC<MessagesList> = memo(({ device, images, getMessagesPagination }) => {
-	const { showMessage } = useShowDataStore()
+export const ImageMessagesList = ({ className, container }: MessagesListProps) => {
 	const [modal, setModal] = useState<boolean>(false)
-	const theme = useAppSelector((state) => state.theme.theme)
 
-	const { chosenImage, setChosenImage, loaded, setLoaded, computedLibraryImages } = useMessages(images)
+	const deviceType = getDeviceType()
+
+	const { onObserverMounted, refScroll, revertedMessages, messages, loading } =
+		useImageBotPagination(container)
+
+	const { chosenImage, computedLibraryImages, setChosenImage } = useMessages(messages)
+
+	useEffect(() => {
+		onObserverMounted()
+	}, [])
 
 	return (
 		<>
@@ -35,219 +36,39 @@ export const ImageMessagesList: React.FC<MessagesList> = memo(({ device, images,
 				{createPortal(
 					<ImageModal
 						images={computedLibraryImages}
-						modal={modal}
-						onSlideFalse={() => getMessagesPagination && getMessagesPagination()}
-						setModal={setModal}
-						reverse={device === 'desktop'}
+						reverse={deviceType === 'desktop'}
 						current={chosenImage}
 					/>,
 					document.getElementById('modal-container')!
 				)}
 			</ClientOnly>
 
-			<Box className={'mt-15'}>
-				<Typography
-					sx={{
-						paddingBottom: '30px',
-						fontSize: '16px',
-						color: '#A4AAB5',
-						fontWeight: '600',
-						letterSpacing: '0.3px',
-					}}
-				>
-					ГЕНЕРАЦИИ
-				</Typography>
-
-				<Box
-					id={'messages-list'}
-					sx={{
-						display: 'flex',
-						flexWrap: 'wrap',
-						alignItems: 'center',
-						gap: '20px',
-						justifyContent: device === 'mobile' ? 'center' : 'start',
-					}}
-				>
-					{images?.length !== 0 &&
-						Array.isArray(images) &&
-						images.map((message) => {
-							//@ts-ignore
-							const isZip = message.file && message.file.includes('.zip')
-							//@ts-ignore
-							const isSvg = message.file && message.file.includes('.svg')
-							return (
-								<Box key={message.uid} sx={{ position: 'relative' }}>
-									{isZip ? (
-										<Box
-											display='flex'
-											alignItems='center'
-											justifyContent='center'
-											sx={{
-												border: '1px solid #8280FF',
-												borderRadius: 5,
-												width: device === 'desktop' ? '250px' : '291px',
-												height: device === 'desktop' ? '284px' : '291px',
-											}}
-										>
-											<Box textAlign='center'>
-												<Typography>Эта генерация является архивом</Typography>
-												<Typography color='#8280FF' marginTop={2}>
-													<Link href={message.file!.toString()}>Скачать</Link>
-												</Typography>
-											</Box>
-										</Box>
-									) : (
-										<Box>
-											<Box
-												sx={{
-													cursor: 'pointer',
-													width: device === 'desktop' ? '250px' : '291px',
-													height: device === 'desktop' ? '250px' : '291px',
-													position: 'relative',
-													overflow: 'hidden',
-													borderRadius: '15px',
-												}}
-											>
-												{!isSvg ? (
-													<>
-														<Image
-															className={styles.image}
-															onClick={() => {
-																setChosenImage(message.file as string)
-																setModal(true)
-															}}
-															onLoadingComplete={() => setLoaded(true)}
-															style={{
-																position: 'relative',
-																zIndex: '2',
-																borderRadius: 15,
-																width: '100%',
-																height: '100%',
-																opacity: loaded ? '100%' : '0%',
-																userSelect: 'none',
-																objectFit: 'contain',
-															}}
-															width={500}
-															height={500}
-															src={(message.file as unknown as string) || ''}
-															alt={'К сожалению, изображение не загрузилось'}
-														/>
-														<Image
-															className={styles.image}
-															onLoadingComplete={() => setLoaded(true)}
-															style={{
-																position: 'absolute',
-																zIndex: '1',
-																borderRadius: 15,
-																width: '100%',
-																height: '100%',
-																opacity: loaded ? '100%' : '0%',
-																userSelect: 'none',
-																objectFit: 'cover',
-																right: 0,
-																filter: 'blur(10px) brightness(0.7)',
-															}}
-															width={10}
-															height={10}
-															src={(message.file as unknown as string) || ''}
-															alt=''
-														/>
-													</>
-												) : (
-													<>
-														<img
-															className={styles.image}
-															onClick={() => {
-																setChosenImage(message.file as string)
-																setModal(true)
-															}}
-															style={{
-																position: 'relative',
-																zIndex: '2',
-																borderRadius: 15,
-																width: '100%',
-																height: '100%',
-																userSelect: 'none',
-																objectFit: 'contain',
-															}}
-															src={(message.file as unknown as string) || ''}
-															alt='К сожалению, изображение не загрузилось'
-														/>
-														<img
-															className={styles.image}
-															width='10px'
-															height='10px'
-															style={{
-																position: 'absolute',
-																zIndex: '1',
-																borderRadius: 15,
-																width: '100%',
-																height: '100%',
-																opacity: loaded ? '100%' : '0%',
-																userSelect: 'none',
-																objectFit: 'cover',
-																right: 0,
-																filter: 'blur(10px) brightness(0.7)',
-															}}
-															src={(message.file as unknown as string) || ''}
-															alt='К сожалению, изображение не загрузилось'
-														/>
-													</>
-												)}
-
-												{!loaded && (
-													<Skeleton
-														sx={{
-															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%',
-														}}
-														variant='rectangular'
-													/>
-												)}
-												<ImageIcons
-													key={message.uid}
-													uid={message.uid}
-													content={message.content}
-													url={message.file ? message.file.toString() : null}
-												/>
-											</Box>
-
-											<TooltipCustom
-												key={message.uid}
-												placement='right'
-												title={message.content.length > 30 ? message.content : ''}
-											>
-												<Typography
-													sx={{
-														fontSize: '15px',
-														maxWidth: device === 'desktop' ? '250px' : '100%',
-														marginTop: '12px',
-														color: theme === 'dark' ? '#A4AAB5' : '#555556',
-													}}
-												>
-													{!loaded
-														? ''
-														: message.content.length > 0
-														? message?.content.replaceAll('"', '').slice(0, 30)
-														: 'описание отсутствует'}
-													{message?.content.length > 30 && loaded && '...'}
-												</Typography>
-											</TooltipCustom>
-										</Box>
-									)}
-								</Box>
-							)
-						})}
-				</Box>
-			</Box>
+			<div className={c(styles.container)}>
+				<div className={styles.scroll} ref={refScroll}></div>
+				{loading && (
+					<div className={styles.loader}>
+						<Loader size={24} />
+					</div>
+				)}
+				<TransitionGroup className={c(styles.list, className)}>
+					{revertedMessages.map((message) => (
+						<CSSTransition key={message.uid} timeout={2000} classNames={'item'}>
+							<button
+								onClick={() => {
+									setModal(true)
+									setChosenImage(message.file as string)
+								}}
+							>
+								<ImageMessage
+									key={message.uid}
+									{...message}
+									file={message.file as string}
+								/>
+							</button>
+						</CSSTransition>
+					))}
+				</TransitionGroup>
+			</div>
 		</>
 	)
-})
-
-ImageMessagesList.displayName = 'ImageMessagesList'
+}
@@ -1,8 +1,13 @@
 export * from './image-messages-list'
 export * from './chat-messages-list'
 export * from './answer-wrap'
-export * from './bot-message'
-export * from './preview-view'
-export * from './user-message'
+export * from '../../../entities/message/ui/bot-message'
+export * from '../../preview-view/ui/preview-view'
+export * from '../../../entities/message/ui/user-message'
 export * from './is-next-day'
-export * from './image-icons'
+export * from './chat-messages-list'
+export * from './chat-messages-list'
+export * from './image-messages-list'
+export * from './answer-wrap'
+export * from './is-next-day'
+export * from './image-messages-list-old'
@@ -0,0 +1,12 @@
+
+.date{
+  background-color: #8280FF26;
+  color: var(--air-color);
+  width: fit-content;
+  margin: 0 auto;
+  padding: 7px 25px;
+  border-radius: 100px;
+  font-size: 15px;
+  margin-top: 40px;
+  font-weight: 600;
+}
\ No newline at end of file
@@ -1,134 +1,105 @@
-import React, { memo, useMemo } from 'react'
+import React, {
+	HTMLAttributes,
+	RefObject,
+	forwardRef,
+	memo,
+	useEffect,
+	useImperativeHandle,
+	useMemo,
+	useRef,
+} from 'react'
 import { Box, Typography } from '@mui/material'
 
-import { Message } from '#/shared/lib/types/model'
 import { getDateFromString } from '#/widgets/messages/lib/date-from-string'
 import { getDayMontsString } from '#/widgets/messages/lib/day-months-string'
-import { UserMessage } from '#/widgets/messages'
+import { BotMessage, UserMessage } from '#/widgets/messages'
+import { Message, useChatBotMessages } from '#/entities/message'
+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'
+import { CommonScrollbarRef } from '#/shared/ui/scrollbar'
+import { MessageFullscreenModal } from '#/features/message-fullscreen-modal/ui'
 
-interface IProps {
+interface IsNextDayProps {
 	message: Message
 	index: number
-	messageResponse: Message[] | null
-	modelTitle: string | undefined
-	deleteMessage?: (message_uid: string) => void
-	setCurrentSrc: (value: string) => void
-	isNewMessage: boolean
-	setModal: (value: boolean) => void
-	modelType: string
-	device: 'mobile' | 'desktop'
-	setResendValue: (value: string) => void
-	onLoadImage?: (event: React.ChangeEvent<HTMLInputElement> | null, file?: File) => void
+	model: Model | null
+	translate: number
+	setCurrentSrc: (current: string) => void
+	scrollBarRef: RefObject<HTMLDivElement>
+	tooltipPosition?: CommonTooltipPosition
+
 }
 
-export const IsNextDay = memo(
-	({
-		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)
-
-			if (date && prevDate) {
-				if (date.day > prevDate.day && date.month === prevDate.month) {
-					return (
-						<>
-							<Box display={'flex'} justifyContent={'center'}>
-								<Typography
-									sx={{
-										backgroundColor: '#8280FF26',
-										color: '#8280FF',
-										display: 'inline-block',
-										padding: '7px 25px',
-										borderRadius: '100px',
-										fontSize: '15px',
-										marginY: '40px',
-										fontWeight: '600',
-									}}
-								>
-									{getDayMontsString(message.created_at)}
-								</Typography>
-							</Box>
-							<UserMessage
-								onLoadImage={onLoadImage}
-								setResendValue={setResendValue}
-								modelTitle={modelTitle}
-								deleteMessage={deleteMessage}
-								setCurrentSrc={setCurrentSrc}
-								key={message.uid}
-								setModal={setModal}
-								message={message}
-								isNewMessage={isNewMessage}
-								modelType={modelType}
-								device={device}
-							/>
-						</>
-					)
-				}
-			}
-			if (!prevDate) {
-				return (
-					<>
-						<Box display={'flex'} justifyContent={'center'}>
-							<Typography
-								sx={{
-									backgroundColor: '#8280FF26',
-									color: '#8280FF',
-									display: 'inline-block',
-									padding: '7px 25px',
-									borderRadius: '100px',
-									fontSize: '15px',
-									marginY: '40px',
-									fontWeight: '600',
-								}}
-							>
-								{getDayMontsString(message.created_at)}
-							</Typography>
-						</Box>
-						<UserMessage
-							setModal={setModal}
-							onLoadImage={onLoadImage}
-							setResendValue={setResendValue}
-							modelTitle={modelTitle}
-							setCurrentSrc={setCurrentSrc}
-							deleteMessage={deleteMessage}
-							key={message.uid}
-							message={message}
-							isNewMessage={isNewMessage}
-							modelType={modelType}
-							device={device}
-						/>
-					</>
-				)
-			}
-		}
+export const IsNextDay = forwardRef<any, IsNextDayProps>(
+	({ message, index, model, translate, setCurrentSrc, scrollBarRef }, ref) => {
+		const { messages } = useChatBotMessages()
+
+		const date = getDateFromString(message.created_at)
+		const prevDate = getDateFromString(messages[index]?.created_at)
+
+		const localRef = useRef<HTMLElement>(null)
+
+		useImperativeHandle(ref, () => localRef.current)
+
+		const offsetBottom = useMemo(() => {
+			const [{ current }, { current: local }] = [scrollBarRef, localRef]
+
+			if (!current || !local) return 0
+
+			const container = current.querySelector('.container') as HTMLDivElement
+
+			if (!container) return 0
+
+			let offsetBottom = 0
+
+			if (current.clientHeight < local.offsetHeight)
+				offsetBottom = container.clientHeight - current.clientHeight - local.offsetTop + 20
+			else offsetBottom = container.clientHeight - local.offsetTop - local.offsetHeight
+
+			return offsetBottom
+		}, [scrollBarRef.current, localRef.current])
+
+		const tooltipPosition = useMemo(() => {
+			return offsetBottom - translate > 20 ? 'bottom' : 'top'
+		}, [translate, offsetBottom])
+
+		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 (
-			<UserMessage
-				onLoadImage={onLoadImage}
-				setResendValue={setResendValue}
-				modelTitle={modelTitle}
-				deleteMessage={deleteMessage}
-				setCurrentSrc={setCurrentSrc}
-				key={message.uid}
-				setModal={setModal}
-				message={message}
-				isNewMessage={isNewMessage}
-				modelType={modelType}
-				device={device}
-			/>
+			<>
+				{dateVisible && <p className={c(styles.date)}>{getDayMontsString(message.created_at)}</p>}
+				{message.from_model ? (
+					<BotMessage
+						offsetBottom={offsetBottom}
+						translate={translate}
+						ref={localRef}
+						tooltipPosition={tooltipPosition}
+						model={model}
+						message={message}
+					/>
+				) : (
+					<UserMessage
+						offsetBottom={offsetBottom}
+						translate={translate}
+						ref={localRef}
+						setCurrentSrc={setCurrentSrc}
+						tooltipPosition={tooltipPosition}
+						key={message.uid}
+						model={model}
+						message={message}
+					/>
+				)}
+			</>
 		)
 	}
 )
-
-IsNextDay.displayName = 'IsNextDay'
@@ -1,44 +0,0 @@
-import React from 'react'
-import { Box, Typography } from '@mui/material'
-
-const previewMessages = ['Что такое орбитальная механика?', 'Как приготовить омлет?', 'Кто такие Фиксики?']
-
-export function PreviewView(props: any) {
-	return (
-		<Box className='content-center-translate'>
-			<Typography className='text'>Не знаете, с чего начать?</Typography>
-			<Typography className='text' sx={{ marginBottom: '15px' }}>
-				Попробуйте, например, вот так:
-			</Typography>
-			<Box
-				sx={{
-					textAlign: 'center',
-					width: '100%',
-					display: 'flex',
-					flexDirection: 'column',
-					alignItems: 'center',
-				}}
-			>
-				{previewMessages.map((el) => {
-					return (
-						<Box
-							key={el}
-							onClick={() => props.setValue(el)}
-							sx={{
-								cursor: 'pointer',
-								padding: '15px',
-								color: '#8280FF',
-								width: 'fit-content',
-								marginTop: '15px',
-								backgroundColor: 'rgba(130, 128, 255, 0.10)',
-								borderRadius: '12px',
-							}}
-						>
-							{el}
-						</Box>
-					)
-				})}
-			</Box>
-		</Box>
-	)
-}
@@ -1,806 +0,0 @@
-import React, { useEffect, 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 { useAppSelector } from '#/app/store/store'
-import { TooltipCustom } from '#/shared'
-import { Message } from '#/shared/lib/types/model'
-import { BotMessage } from '#/widgets/messages'
-import { Markdown } from '../../markdown/markdown'
-import { formatDate } from '#/shared/lib/helpers'
-import styles from './bot-message.module.scss'
-
-interface IMessagesList {
-	// messageResponse: Message[] | null
-	// mode?: string
-	// sendMessage?: (title: string) => void
-	// getMessagesPagination?: () => Promise<void>
-
-	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({ setCurrentSrc, setModal, ...props }: IMessagesList) {
-	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
-	const open = Boolean(anchorEl)
-	const desktop = props.device === 'desktop'
-	const [loaded, setLoaded] = useState(false)
-
-	const copy = (text: string) => {
-		navigator.clipboard.writeText(text)
-	}
-	const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-		setAnchorEl(event.currentTarget)
-	}
-	const handleClose = () => {
-		setAnchorEl(null)
-	}
-
-	const fileName = useMemo(() => {
-		if (!props.message.file) return 'Подбираем имя файла...'
-		const matches = (props.message.file as string).match(/air-messages\/(.+?)\.(.+?)\?/)
-		if (!matches) return 'Подбираем имя файла...'
-		return `${matches[1]}.${matches[2]}`
-	}, [])
-
-	const resend = async () => {
-		props.setResendValue(props.message.content)
-		if (props.message.file !== null) {
-			fetch(props.message.file as string, {
-				method: 'GET',
-				headers: {},
-			}).then((response) => {
-				response.arrayBuffer().then(function (buffer) {
-					const url = new Blob([buffer])
-					const binaryFile = new File([url], 'image.png')
-					if (props.onLoadImage) {
-						props.onLoadImage(null, binaryFile)
-					}
-				})
-			})
-		}
-	}
-
-	const flexStyle = {
-		display: 'flex',
-		alignItems: 'center',
-		justifyContent: 'start',
-		gap: '12px',
-		color: '#7f7df3 !important',
-		fontWeight: '600 !important',
-		lineHeight: '140%',
-		letterSpacing: '0.2px',
-		cursor: 'pointer',
-	}
-
-	const theme = useAppSelector((state) => state.theme.theme)
-
-	return (
-		<>
-			<span className='tutorial-message'>
-				{!props.message.from_model ? (
-					// <Slide className='tutorial-message-me' direction='left' in={props.isNewMessage} mountOnEnter unmountOnExit>
-					<Box>
-						<Box
-							className='smallScroll'
-							sx={{
-								width: 'fit-content',
-								marginLeft: 'auto',
-								maxWidth: desktop ? '68%' : '100%',
-								marginTop: 2,
-								marginBottom: 2,
-							}}
-						>
-							<Stack direction='row' justifyContent='end' alignItems='center'>
-								<Typography
-									variant='body2'
-									sx={{
-										color: theme === 'light' ? '#868686' : '#A6A5A5',
-										lineHeight: '19.6px',
-										fontSize: '13px',
-										fontWeight: '600',
-										marginLeft: 1,
-									}}
-								>
-									{formatDate(props.message.created_at, {
-										hour: 'numeric',
-										minute: 'numeric',
-									})}
-								</Typography>
-							</Stack>
-
-							<Box display='flex' justifyContent='end'>
-								{props.message.file ? (
-									/\.jpg|\.png|\.jpeg|\.gif|\.webp|\.svg|\.wav/.test(props.message.file as string) ? (
-										<Box
-											sx={{
-												display: 'flex',
-												alignItems: 'end',
-												flexDirection: 'column',
-												height: '60%',
-												width: '60%',
-											}}
-										>
-											<Box sx={{ position: 'relative' }}>
-												<Image
-													onClick={() => {
-														if (!props.message.file) return
-														setCurrentSrc(props.message.file.toString().split('?type')[0])
-														setModal(true)
-													}}
-													onLoadingComplete={() => setLoaded(true)}
-													style={{
-														objectFit: 'contain',
-														height: '100%',
-														width: '100%',
-														borderRadius: '13px',
-														cursor: 'pointer',
-														opacity: loaded ? '100%' : '0%',
-														minWidth: '100px',
-														minHeight: '100px',
-													}}
-													width={500}
-													height={500}
-													src={props.message.file.toString().split('?type')[0]}
-													alt={'К сожалению, изображение не загрузилось'}
-												/>
-												{!loaded && (
-													<Skeleton
-														sx={{
-															background: theme === 'dark' ? '#2d2d2f' : '#EFF0F2',
-															position: 'absolute',
-															top: '0',
-															left: '0',
-															zIndex: '1',
-															borderRadius: 5,
-															width: '100%',
-															height: '100%',
-														}}
-														variant='rectangular'
-													/>
-												)}
-											</Box>
-											<Box display='flex'>
-												<Box marginRight={1}>
-													<Box
-														aria-controls={open ? 'message-menu' : undefined}
-														aria-haspopup='true'
-														aria-expanded={open ? 'true' : undefined}
-													>
-														<TooltipCustom title={'Открыть меню'}>
-															<button className={styles.button} onClick={handleClick}>
-																<svg
-																	width='22'
-																	height='22'
-																	viewBox='0 0 19 19'
-																	fill='none'
-																	xmlns='http://www.w3.org/2000/svg'
-																>
-																	<rect
-																		x='1'
-																		y='1'
-																		width='7'
-																		height='7'
-																		rx='2'
-																		stroke='#A4AAB5'
-																		strokeWidth='2'
-																	/>
-																	<rect
-																		x='1'
-																		y='11'
-																		width='7'
-																		height='7'
-																		rx='2'
-																		stroke='#A4AAB5'
-																		strokeWidth='2'
-																	/>
-																	<rect
-																		x='11'
-																		y='11'
-																		width='7'
-																		height='7'
-																		rx='2'
-																		stroke='#A4AAB5'
-																		strokeWidth='2'
-																	/>
-																	<circle
-																		cx='14.5'
-																		cy='4.5'
-																		r='3.5'
-																		stroke='#A4AAB5'
-																		strokeWidth='2'
-																	/>
-																</svg>
-															</button>
-														</TooltipCustom>
-													</Box>
-													<Menu
-														autoFocus={false}
-														open={open}
-														anchorEl={anchorEl}
-														id='message-menu'
-														onClose={handleClose}
-														onClick={handleClose}
-														sx={{
-															'& .MuiMenu-list': {
-																backgroundColor: theme === 'dark' ? '#303035' : '#EFF0F2',
-																color: '#8280FF',
-																borderRadius: '15px',
-															},
-															'& .MuiPopover-paper': {
-																backgroundColor: theme === 'dark' ? '#303035' : '#EFF0F2',
-																borderRadius: '15px',
-															},
-														}}
-													>
-														<MenuItem
-															autoFocus={false}
-															sx={{
-																fontSize: '15px',
-																fontWeight: '500',
-																display: 'flex',
-																alignItems: 'center',
-																gap: '10px',
-															}}
-															onClick={() => {
-																copy(props.message.content)
-															}}
-														>
-															<svg
-																width='14'
-																height='14'
-																viewBox='0 0 19 19'
-																fill='none'
-																xmlns='http://www.w3.org/2000/svg'
-															>
-																<g id='Group 29094'>
-																	<rect
-																		id='Rectangle 3340'
-																		x='0.85'
-																		y='3.85'
-																		width='14.3'
-																		height='14.3'
-																		rx='2.15'
-																		fill='transparent'
-																		stroke='#8280FF'
-																		strokeWidth='1.7'
-																	/>
-																	<path
-																		id='Vector 40'
-																		d='M6.5 1H15C16.6569 1 18 2.34315 18 4V12.5'
-																		stroke='#8280FF'
-																		strokeWidth='1.7'
-																		strokeLinecap='round'
-																		strokeLinejoin='round'
-																	/>
-																</g>
-															</svg>
-															Копировать
-														</MenuItem>
-														<MenuItem
-															autoFocus={false}
-															sx={{
-																fontSize: '15px',
-																fontWeight: '500',
-																display: 'flex',
-																alignItems: 'center',
-																gap: '5px',
-															}}
-															onClick={() => {
-																if (props.deleteMessage) props.deleteMessage(props.message.uid)
-															}}
-														>
-															<svg
-																width='21'
-																height='14'
-																viewBox='0 0 60 42'
-																fill='none'
-																xmlns='http://www.w3.org/2000/svg'
-															>
-																<path
-																	fillRule='evenodd'
-																	clipRule='evenodd'
-																	d='M17.4216 27.9757C18.1603 28.707 19.3566 28.707 20.0972 27.9757L24.4097 23.6633L28.6079 27.8633C29.3391 28.5946 30.5278 28.5946 31.2609 27.8633C31.9941 27.1321 31.9941 25.932 31.2609 25.2007L27.0629 21.0195L31.3154 16.7632C32.0542 16.032 32.0542 14.8321 31.3154 14.0821C30.5767 13.3509 29.3785 13.3509 28.6398 14.0821L24.3873 18.3382L20.1891 14.1382C19.456 13.4069 18.2673 13.4069 17.536 14.1382C16.801 14.8694 16.801 16.0695 17.536 16.8008L21.7341 20.982L17.4216 25.2946C16.681 26.0446 16.681 27.2257 17.4216 27.9757ZM3.75289 7.87575C3.75289 5.81325 5.43291 4.12575 7.50666 4.12576L40.3735 4.12576L55.6566 21.0383L40.4279 37.8758L7.50666 37.8758C5.43291 37.8758 3.75288 36.1883 3.75288 34.1258L3.75289 7.87575ZM7.50666 41.6258L41.1534 41.6258C41.6784 41.6633 42.2147 41.4945 42.616 41.1007L59.4648 22.4633C59.8604 22.0696 60.031 21.5445 60.0029 21.0383C60.031 20.5133 59.8604 19.9883 59.4648 19.5945L42.616 0.957118C42.2485 0.600868 41.7685 0.413295 41.2885 0.413295L41.2885 0.375758L7.50666 0.375755C3.36104 0.375755 -0.000889326 3.732 -0.000889688 7.87575L-0.000891983 34.1258C-0.000892345 38.2695 3.36104 41.6258 7.50666 41.6258Z'
-																	fill='#8280FF'
-																/>
-															</svg>
-															Удалить
-														</MenuItem>
-													</Menu>
-												</Box>
-												<TooltipCustom title='При отправке данного сообщения произошла ошибка, нажмите чтобы отправить заново'>
-													{!props.message.is_sent && (
-														<Image
-															onClick={resend}
-															style={{
-																cursor: 'pointer',
-																marginRight: '5px',
-															}}
-															height={20}
-															width={20}
-															alt='1'
-															src={'/svg/important.svg'}
-														/>
-													)}
-												</TooltipCustom>
-												{props.message.content && props.message.content.length > 0 && (
-													<Typography
-														className='smallScroll'
-														sx={{
-															overflowY: 'scroll',
-															padding: '10px 15px',
-															backgroundColor: '#7F7DF3',
-															borderRadius: '13px',
-															color: '#FFFFFF',
-															lineHeight: '21px',
-															fontSize: '15px',
-															fontWeight: '400px',
-															marginTop: 0.4,
-															textAlign: 'left',
-															whiteSpace: props.message.content.length > 30 ? 'pre-wrap' : 'pre',
-														}}
-													>
-														{props.message.content}
-													</Typography>
-												)}
-											</Box>
-										</Box>
-									) : (
-										<Box
-											sx={{
-												display: 'flex',
-												alignItems: 'end',
-												flexDirection: 'column',
-												gap: '5px',
-											}}
-										>
-											<Box display={'flex'}>
-												<Box
-													onClick={() => {
-														if (props.message.file) {
-															window.open(props.message.file as string, '_blank')
-														}
-													}}
-													className='smallScroll'
-													sx={{
-														overflowY: 'scroll',
-														position: 'relative',
-														padding: '15px 23px',
-
-														border: `1px solid ${theme === 'dark' ? '#303035' : '#EFF0F2'}`,
-
-														boxShadow: 'none',
-														fontSize: '15px',
-														marginTop: 0.5,
-														textAlign: 'left',
-														fontFamily: 'Raleway,sans-serif',
-														borderRadius: '13px',
-														'&  p': {
-															color: 'inherit',
-															fontStyle: 'inherit',
-														},
-														...flexStyle,
-													}}
-												>
-													<Box
-														sx={{
-															width: '16px',
-															height: '18px',
-														}}
-													>
-														<svg
-															width='16'
-															height='18'
-															viewBox='0 0 15 19'
-															fill='none'
-															xmlns='http://www.w3.org/2000/svg'
-														>
-															<path
-																fillRule='evenodd'
-																clipRule='evenodd'
-																d='M10.3286 0.578662C9.95416 0.20795 9.44851 0 8.92158 0H2C0.895433 0 0 0.895431 0 2V17C0 18.1046 0.895431 19 2 19H13C14.1046 19 15 18.1046 15 17V6.03743C15 5.50349 14.7865 4.99173 14.4071 4.61609L10.3286 0.578662ZM10.0669 5.37846C9.79079 5.37846 9.56693 5.1546 9.56693 4.87846V2.19238C9.56693 1.74815 10.103 1.52452 10.4187 1.83705L13.132 4.52313C13.4495 4.83737 13.227 5.37846 12.7803 5.37846H11.7815H10.0669Z'
-																fill='#7f7df3'
-															/>
-														</svg>
-													</Box>
-
-													<Markdown content={fileName} theme={theme} />
-												</Box>
-											</Box>
-											<Box display='flex'>
-												<Box marginRight={1}>
-													<Box
-														onClick={handleClick}
-														aria-controls={open ? 'message-menu' : undefined}
-														aria-haspopup='true'
-														aria-expanded={open ? 'true' : undefined}
-													>
-														<TooltipCustom title={'Открыть меню'}>
-															<svg
-																width='22'
-																height='22'
-																viewBox='0 0 19 19'
-																fill='none'
-																xmlns='http://www.w3.org/2000/svg'
-															>
-																<rect
-																	x='1'
-																	y='1'
-																	width='7'
-																	height='7'
-																	rx='2'
-																	stroke='#A4AAB5'
-																	strokeWidth='2'
-																/>
-																<rect
-																	x='1'
-																	y='11'
-																	width='7'
-																	height='7'
-																	rx='2'
-																	stroke='#A4AAB5'
-																	strokeWidth='2'
-																/>
-																<rect
-																	x='11'
-																	y='11'
-																	width='7'
-																	height='7'
-																	rx='2'
-																	stroke='#A4AAB5'
-																	strokeWidth='2'
-																/>
-																<circle cx='14.5' cy='4.5' r='3.5' stroke='#A4AAB5' strokeWidth='2' />
-															</svg>
-														</TooltipCustom>
-													</Box>
-													<Menu
-														autoFocus={false}
-														open={open}
-														anchorEl={anchorEl}
-														id='message-menu'
-														onClose={handleClose}
-														onClick={handleClose}
-														sx={{
-															'& .MuiMenu-list': {
-																backgroundColor: theme === 'dark' ? '#303035' : '#EFF0F2',
-																color: '#8280FF',
-																borderRadius: '15px',
-															},
-															'& .MuiPopover-paper': {
-																backgroundColor: theme === 'dark' ? '#303035' : '#EFF0F2',
-																borderRadius: '15px',
-															},
-														}}
-													>
-														{props.message.content && props.message.content.length > 0 && (
-															<MenuItem
-																autoFocus={false}
-																sx={{
-																	fontSize: '15px',
-																	fontWeight: '500',
-																	display: 'flex',
-																	alignItems: 'center',
-																	gap: '10px',
-																}}
-																onClick={() => {
-																	copy(props.message.content)
-																}}
-															>
-																<svg
-																	width='14'
-																	height='14'
-																	viewBox='0 0 19 19'
-																	fill='none'
-																	xmlns='http://www.w3.org/2000/svg'
-																>
-																	<g id='Group 29094'>
-																		<rect
-																			id='Rectangle 3340'
-																			x='0.85'
-																			y='3.85'
-																			width='14.3'
-																			height='14.3'
-																			rx='2.15'
-																			fill='transparent'
-																			stroke='#8280FF'
-																			strokeWidth='1.7'
-																		/>
-																		<path
-																			id='Vector 40'
-																			d='M6.5 1H15C16.6569 1 18 2.34315 18 4V12.5'
-																			stroke='#8280FF'
-																			strokeWidth='1.7'
-																			strokeLinecap='round'
-																			strokeLinejoin='round'
-																		/>
-																	</g>
-																</svg>
-																Копировать
-															</MenuItem>
-														)}
-														<MenuItem
-															autoFocus={false}
-															sx={{
-																fontSize: '15px',
-																fontWeight: '500',
-																display: 'flex',
-																alignItems: 'center',
-																gap: '5px',
-															}}
-															onClick={() => {
-																if (props.deleteMessage) props.deleteMessage(props.message.uid)
-															}}
-														>
-															<svg
-																width='21'
-																height='14'
-																viewBox='0 0 60 42'
-																fill='none'
-																xmlns='http://www.w3.org/2000/svg'
-															>
-																<path
-																	fillRule='evenodd'
-																	clipRule='evenodd'
-																	d='M17.4216 27.9757C18.1603 28.707 19.3566 28.707 20.0972 27.9757L24.4097 23.6633L28.6079 27.8633C29.3391 28.5946 30.5278 28.5946 31.2609 27.8633C31.9941 27.1321 31.9941 25.932 31.2609 25.2007L27.0629 21.0195L31.3154 16.7632C32.0542 16.032 32.0542 14.8321 31.3154 14.0821C30.5767 13.3509 29.3785 13.3509 28.6398 14.0821L24.3873 18.3382L20.1891 14.1382C19.456 13.4069 18.2673 13.4069 17.536 14.1382C16.801 14.8694 16.801 16.0695 17.536 16.8008L21.7341 20.982L17.4216 25.2946C16.681 26.0446 16.681 27.2257 17.4216 27.9757ZM3.75289 7.87575C3.75289 5.81325 5.43291 4.12575 7.50666 4.12576L40.3735 4.12576L55.6566 21.0383L40.4279 37.8758L7.50666 37.8758C5.43291 37.8758 3.75288 36.1883 3.75288 34.1258L3.75289 7.87575ZM7.50666 41.6258L41.1534 41.6258C41.6784 41.6633 42.2147 41.4945 42.616 41.1007L59.4648 22.4633C59.8604 22.0696 60.031 21.5445 60.0029 21.0383C60.031 20.5133 59.8604 19.9883 59.4648 19.5945L42.616 0.957118C42.2485 0.600868 41.7685 0.413295 41.2885 0.413295L41.2885 0.375758L7.50666 0.375755C3.36104 0.375755 -0.000889326 3.732 -0.000889688 7.87575L-0.000891983 34.1258C-0.000892345 38.2695 3.36104 41.6258 7.50666 41.6258Z'
-																	fill='#8280FF'
-																/>
-															</svg>
-															Удалить
-														</MenuItem>
-													</Menu>
-												</Box>
-												<TooltipCustom title='При отправке данного сообщения произошла ошибка, нажмите чтобы отправить заново'>
-													{!props.message.is_sent && (
-														<Image
-															onClick={resend}
-															style={{
-																cursor: 'pointer',
-																marginRight: '5px',
-															}}
-															height={20}
-															width={20}
-															alt='1'
-															src={'/svg/important.svg'}
-														/>
-													)}
-												</TooltipCustom>
-												{props.message.content && props.message.content.length > 0 && (
-													<Typography
-														className='smallScroll'
-														sx={{
-															overflowY: 'scroll',
-															padding: '10px 15px',
-															backgroundColor: '#7F7DF3',
-															borderRadius: '13px',
-															color: '#FFFFFF',
-															lineHeight: '21px',
-															fontSize: '15px',
-															fontWeight: '400px',
-															marginTop: 0.4,
-															textAlign: 'left',
-															whiteSpace: props.message.content.length > 30 ? 'pre-wrap' : 'pre',
-														}}
-													>
-														{props.message.content}
-													</Typography>
-												)}
-											</Box>
-										</Box>
-									)
-								) : (
-									<Box
-										sx={{
-											display: 'flex',
-											width: '100%',
-										}}
-									>
-										<Box marginRight={1}>
-											<Box
-												aria-controls={open ? 'message-menu' : undefined}
-												aria-haspopup='true'
-												aria-expanded={open ? 'true' : undefined}
-												sx={{
-													position: 'sticky',
-													top: '20px',
-												}}
-											>
-												<TooltipCustom title={'Открыть меню'}>
-													<button className={styles.button} onClick={handleClick}>
-														<svg
-															width='22'
-															height='22'
-															viewBox='0 0 19 19'
-															fill='none'
-															xmlns='http://www.w3.org/2000/svg'
-														>
-															<rect
-																x='1'
-																y='1'
-																width='7'
-																height='7'
-																rx='2'
-																stroke='#A4AAB5'
-																strokeWidth='2'
-															/>
-															<rect
-																x='1'
-																y='11'
-																width='7'
-																height='7'
-																rx='2'
-																stroke='#A4AAB5'
-																strokeWidth='2'
-															/>
-															<rect
-																x='11'
-																y='11'
-																width='7'
-																height='7'
-																rx='2'
-																stroke='#A4AAB5'
-																strokeWidth='2'
-															/>
-															<circle cx='14.5' cy='4.5' r='3.5' stroke='#A4AAB5' strokeWidth='2' />
-														</svg>
-													</button>
-												</TooltipCustom>
-											</Box>
-											<Menu
-												autoFocus={false}
-												open={open}
-												anchorEl={anchorEl}
-												id='message-menu'
-												onClose={handleClose}
-												onClick={handleClose}
-												sx={{
-													'& .MuiMenu-list': {
-														backgroundColor: theme === 'dark' ? '#303035' : '#EFF0F2',
-														color: '#8280FF',
-														borderRadius: '15px',
-													},
-													'& .MuiPopover-paper': {
-														backgroundColor: theme === 'dark' ? '#303035' : '#EFF0F2',
-														borderRadius: '15px',
-													},
-												}}
-											>
-												<MenuItem
-													autoFocus={false}
-													sx={{
-														fontSize: '15px',
-														fontWeight: '500',
-														display: 'flex',
-														alignItems: 'center',
-														gap: '10px',
-													}}
-													onClick={() => {
-														copy(props.message.content)
-													}}
-												>
-													<svg
-														width='14'
-														height='14'
-														viewBox='0 0 19 19'
-														fill='none'
-														xmlns='http://www.w3.org/2000/svg'
-													>
-														<g id='Group 29094'>
-															<rect
-																id='Rectangle 3340'
-																x='0.85'
-																y='3.85'
-																width='14.3'
-																height='14.3'
-																rx='2.15'
-																fill='transparent'
-																stroke='#8280FF'
-																strokeWidth='1.7'
-															/>
-															<path
-																id='Vector 40'
-																d='M6.5 1H15C16.6569 1 18 2.34315 18 4V12.5'
-																stroke='#8280FF'
-																strokeWidth='1.7'
-																strokeLinecap='round'
-																strokeLinejoin='round'
-															/>
-														</g>
-													</svg>
-													Копировать
-												</MenuItem>
-												<MenuItem
-													autoFocus={false}
-													sx={{
-														fontSize: '15px',
-														fontWeight: '500',
-														display: 'flex',
-														alignItems: 'center',
-														gap: '5px',
-													}}
-													onClick={() => {
-														if (props.deleteMessage) props.deleteMessage(props.message.uid)
-													}}
-												>
-													<svg
-														width='21'
-														height='14'
-														viewBox='0 0 60 42'
-														fill='none'
-														xmlns='http://www.w3.org/2000/svg'
-													>
-														<path
-															fillRule='evenodd'
-															clipRule='evenodd'
-															d='M17.4216 27.9757C18.1603 28.707 19.3566 28.707 20.0972 27.9757L24.4097 23.6633L28.6079 27.8633C29.3391 28.5946 30.5278 28.5946 31.2609 27.8633C31.9941 27.1321 31.9941 25.932 31.2609 25.2007L27.0629 21.0195L31.3154 16.7632C32.0542 16.032 32.0542 14.8321 31.3154 14.0821C30.5767 13.3509 29.3785 13.3509 28.6398 14.0821L24.3873 18.3382L20.1891 14.1382C19.456 13.4069 18.2673 13.4069 17.536 14.1382C16.801 14.8694 16.801 16.0695 17.536 16.8008L21.7341 20.982L17.4216 25.2946C16.681 26.0446 16.681 27.2257 17.4216 27.9757ZM3.75289 7.87575C3.75289 5.81325 5.43291 4.12575 7.50666 4.12576L40.3735 4.12576L55.6566 21.0383L40.4279 37.8758L7.50666 37.8758C5.43291 37.8758 3.75288 36.1883 3.75288 34.1258L3.75289 7.87575ZM7.50666 41.6258L41.1534 41.6258C41.6784 41.6633 42.2147 41.4945 42.616 41.1007L59.4648 22.4633C59.8604 22.0696 60.031 21.5445 60.0029 21.0383C60.031 20.5133 59.8604 19.9883 59.4648 19.5945L42.616 0.957118C42.2485 0.600868 41.7685 0.413295 41.2885 0.413295L41.2885 0.375758L7.50666 0.375755C3.36104 0.375755 -0.000889326 3.732 -0.000889688 7.87575L-0.000891983 34.1258C-0.000892345 38.2695 3.36104 41.6258 7.50666 41.6258Z'
-															fill='#8280FF'
-														/>
-													</svg>
-													Удалить
-												</MenuItem>
-											</Menu>
-										</Box>
-										<TooltipCustom title='При отправке данного сообщения произошла ошибка, нажмите чтобы отправить заново'>
-											{!props.message.is_sent && (
-												<Image
-													onClick={resend}
-													style={{
-														cursor: 'pointer',
-														marginRight: '5px',
-													}}
-													height={20}
-													width={20}
-													alt='1'
-													src={'/svg/important.svg'}
-												/>
-											)}
-										</TooltipCustom>
-										{props.message.content && props.message.content.length > 0 && (
-											<Typography
-												className='smallScroll'
-												sx={{
-													overflowY: 'scroll',
-													padding: '10px 15px',
-													backgroundColor: '#7F7DF3',
-													borderRadius: '13px',
-													color: '#FFFFFF',
-													lineHeight: '21px',
-													fontSize: '15px',
-													fontWeight: '400px',
-													marginTop: 0.4,
-													textAlign: 'left',
-													whiteSpace: props.message.content.length > 30 ? 'pre-wrap' : 'pre',
-												}}
-											>
-												{props.message.content}
-											</Typography>
-										)}
-									</Box>
-								)}
-							</Box>
-						</Box>
-					</Box>
-				) : (
-					<BotMessage
-						modelTitle={props.modelTitle}
-						deleteMessage={props.deleteMessage}
-						isNewMessage={props.isNewMessage}
-						message={props.message}
-						desktop={desktop}
-						theme={theme}
-						modelType={props.modelType}
-					/>
-				)}
-			</span>
-		</>
-	)
-})
@@ -0,0 +1,2 @@
+
+export * from './model-tags'
\ No newline at end of file
@@ -0,0 +1,68 @@
+@keyframes fadein {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+.tag {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: white;
+	border-radius: 100px;
+	width: 50px;
+	height: 50px;
+	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
+	transition: width 0.3s ease-in-out;
+
+	@media screen and (max-width: 768px) {
+		width: 40px;
+		height: 40px;
+	}
+
+	&__icon {
+		color: var(--air-color);
+	}
+
+	&:hover {
+		padding: 12px;
+		width: 200px;
+
+		.tag__icon {
+			animation: fadein 0.6s ease-in-out;
+		}
+
+		.tag__text {
+			opacity: 1;
+			position: static;
+			animation: fadein 0.6s ease-in-out;
+			display: block;
+		}
+	}
+
+	&__text {
+		position: absolute;
+		color: var(--air-color);
+		font-weight: 500;
+		padding-left: 10px;
+		font-size: 14px;
+		opacity: 0;
+		display: none;
+		min-width: max-content !important;
+	}
+}
+
+.tags {
+	min-width: 100%;
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	justify-content: flex-end;
+
+	@media screen and (max-width: 768px) {
+		justify-content: flex-start;
+	}
+}
@@ -0,0 +1,26 @@
+import { ModelTag } from '#/entities/model-entity'
+import { SvgIcon } from '#/shared/ui/svg'
+import React from 'react'
+import styles from './model-tags.module.scss'
+
+interface ModelTagsProps {
+	tags: ModelTag[]
+}
+
+export const ModelTags = ({ tags }: ModelTagsProps) => {
+	return (
+		<div className={styles.tags}>
+			{tags.map((tag, index) => (
+				<div key={index} className={styles.tag}>
+					<SvgIcon
+						width={23}
+						height={23}
+						url={tag.icon}
+						className={styles.tag__icon}
+					/>
+					<span className={styles.tag__text}>{tag.title}</span>
+				</div>
+			))}
+		</div>
+	)
+}
@@ -0,0 +1 @@
+export * from './ui'
\ No newline at end of file
@@ -2,6 +2,7 @@ import { NavigationSearchModelLink } from './types'
 import { API_URL } from '#/shared/lib/constants'
 import axios from 'axios'
 
+
 export const getModelChatLinks = async (token: string) => {
 	return await axios.get<NavigationSearchModelLink[]>(API_URL + '/api/chats/links', {
 		headers: { Authorization: `Bearer ${token}` },
@@ -2,10 +2,15 @@ import { NavigationSearchLink } from "../api/types";
 
 export const staticLinks: NavigationSearchLink[] = [
 	{
-		label: 'Дашборд',
+		label: 'Главная',
 		url: '/',
     category: 'Навигация'
 	},
+	{
+		label: 'Дашборд',
+		url: '/dashboard',
+		category: 'Навигация',
+	},
 	{
 		label: 'Оплата',
 		url: '/account?scope=subscribe',
@@ -21,9 +21,6 @@ export const useNavigationSearchModel = (links: NavigationSearchLink[]) => {
 		)
 	}, [search, links])
 
-	useEffect(() => {
-		console.log(filteredLinks)
-	}, [filteredLinks])
 
 	// hooks
 	const ctrlF = (e: KeyboardEvent) => {
@@ -45,9 +42,6 @@ export const useNavigationSearchModel = (links: NavigationSearchLink[]) => {
 
 			const value = filteredLinks.at(0)
 
-			console.log(value)
-			console.log(filteredLinks)
-
 			if (value) {
 				push('/' + value.url)
 				setSearchOpen(false)
@@ -1,5 +1,5 @@
-import { Box, Typography } from '@mui/material'
 import React from 'react'
+import { Box, Typography } from '@mui/material'
 
 import styles from './key-for-search.module.scss'
 
@@ -7,9 +7,12 @@ import { staticLinks } from '../config'
 import { InputStyleDark, InputStyleLight, useConcat } from '#/shared'
 import { useAppSelector } from '#/app/store/store'
 import { useRouter } from 'next/router'
+
+
 import { NavigationSearchLink } from '../api/types'
 import { useNavigationSearchMediaLinks } from '../model/use-media-links'
 
+
 interface SearchProps {
 	device: string
 }
@@ -105,6 +108,10 @@ export const Search = ({ device }: SearchProps) => {
 									  }
 									: {
 											...InputStyleDark,
+											fieldset: {
+												border: '1px solid rgba(64, 64, 78, 0.12)',
+												borderRadius: '15px',
+											},
 									  }
 							}
 							className='bg-color-block'
@@ -1,2 +1,2 @@
 export * from './ui'
-export * from './config'
\ No newline at end of file
+export * from './config'
@@ -14,12 +14,13 @@ import Router, { useRouter } from 'next/router'
 import { useSession } from 'next-auth/react'
 
 import { useAppSelector } from '#/app/store/store'
-import { CheckBoxAgreeWithRules, Loader, Select } from '#/shared'
+import {  Loader, Select } from '#/shared'
 import { accountApi } from '#/shared/api/account-endpoints'
 import { getPaymentsHistory, PaymentHistory } from '#/shared/api/endpoints'
 import Offer from '#/widgets/payment/ui/offer'
 
 import styles from '../ui/payment.module.scss'
+import { getPaymentsPlans, payProduct } from '#/entities/user-account'
 
 export interface IOffer {
 	uid: string
@@ -67,11 +68,11 @@ export const Payment: React.FC<IPaymentsProps & any> = ({ device, changeClose })
 	}, [data?.access])
 
 	useEffect(() => {
-		if (data?.access) accountApi.getPaymentsPlans(data?.access).then((res) => setOffers(res))
+		if (data?.access) getPaymentsPlans(data?.access).then((res) => setOffers(res))
 	}, [data?.access])
 
 	const pay = async (uid: string) => {
-		const urlForPay = await accountApi.payProduct(data!.access, uid)
+		const urlForPay = await payProduct(data!.access, uid)
 
 		urlForPay ? await Router.push(urlForPay) : null
 	}
@@ -38,7 +38,7 @@ const Offer: React.FC<IOfferProps> = ({ pickOffer, uid, tokens_per_plan, price,
 
 			<p className={styles.tarif__price}>{commaSeparated(parseInt(price) ?? 0)}₽</p>
 
-			<CommonButton className={styles.tarif__btn} onClick={() => pay(uid)} variant={'outline'}>
+			<CommonButton className={styles.tarif__btn} onClick={() => pay(uid)} variant={'primary-outline'}>
 				Оплатить
 			</CommonButton>
 		</div>
@@ -0,0 +1 @@
+export * from './messages'
\ No newline at end of file
@@ -0,0 +1,5 @@
+export const previewMessages = [
+	'Что такое орбитальная механика?',
+	'Как приготовить омлет?',
+	'Кто такие Фиксики?',
+]
@@ -0,0 +1,2 @@
+
+export * from './preview-view'
\ No newline at end of file
@@ -0,0 +1,29 @@
+.preview {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	&__question {
+    margin-bottom: 5px;
+    font-weight: 500;
+    font-size: 20px;
+	}
+
+	&__quote {
+    color: var(--new-ui-gray-text-color);
+    margin-bottom: 20px;
+	}
+
+	&__messages {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+	}
+}
+
+.message {
+  padding: 15px !important;
+  border-radius: 15px !important;
+  cursor: pointer;
+}
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Box, Typography } from '@mui/material'
+import { previewMessages } from '../config'
+import styles from './preview-view.module.scss'
+import { c } from '#/shared'
+import { CommonBagde } from '#/shared/ui/badge'
+
+export interface PreviewViewProps {
+	setValue: (str: string) => void
+}
+
+export function PreviewView({ setValue }: PreviewViewProps) {
+	return (
+		<div className={styles.preview}>
+			<p className={styles.preview__question}>Не знаете, с чего начать?</p>
+			<p className={styles.preview__quote}>Попробуйте, например, вот так:</p>
+			<div className={styles.preview__messages}>
+				{previewMessages.map((el) => {
+					return (
+						<CommonBagde
+							key={el}
+							onClick={() => setValue(el)}
+							className={c(styles.message)}
+						>
+							{el}
+						</CommonBagde>
+					)
+				})}
+			</div>
+		</div>
+	)
+}
@@ -0,0 +1 @@
+export * from './ui'
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './providers'
\ No newline at end of file
@@ -0,0 +1,24 @@
+import { useGlobalSettings, UserSettingsContextProvider } from '#/entities/user-account'
+import { useSession } from 'next-auth/react'
+import React, { PropsWithChildren, useEffect } from 'react'
+
+interface ProvidersProps extends PropsWithChildren {}
+
+export const Providers = ({ children }: ProvidersProps) => {
+	const { settings, fetchUserSettings, ...rest } = useGlobalSettings()
+
+	const { data } = useSession()
+
+	useEffect(() => {
+    if(!data) return
+		console.log(settings.length)
+		if (settings.length > 0) return
+		fetchUserSettings()
+	}, [data])
+
+	return (
+		<UserSettingsContextProvider value={{ settings, fetchUserSettings, ...rest }}>
+			{children}
+		</UserSettingsContextProvider>
+	)
+}
@@ -0,0 +1 @@
+export * from './ui'
\ No newline at end of file
@@ -8,13 +8,14 @@ import { useAppSelector } from '#/app/store/store'
 import { getReferral, IReferral } from '#/shared/api/endpoints'
 import { API_HOST } from '#/shared/lib/constants'
 import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+import { useUserSelector } from '#/entities/user-account'
 interface IProps {
 	device: 'desktop' | 'mobile'
 }
 
 export const Referral = ({ device }: IProps) => {
 	const theme = useAppSelector((state) => state.theme.theme)
-	const user = useAppSelector((state) => state.user)
+	const user = useUserSelector()
 	const { push } = useRouter()
 	const url = API_HOST + '/r/' + user.email
 	const { showMessage } = useShowDataStore()
@@ -0,0 +1 @@
+export * from './side-menu'
\ No newline at end of file
@@ -0,0 +1,8 @@
+import React from "react"
+
+export interface SideMenuItem {
+	title: string
+	link: string
+	icon: string | React.ReactNode
+	activeList: string[]
+}
@@ -8,28 +8,30 @@ import ListItemButton from '@mui/material/ListItemButton'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemText from '@mui/material/ListItemText'
 import { CSSObject, styled, Theme } from '@mui/material/styles'
-import dynamic from 'next/dynamic'
 import Image from 'next/image'
 import Link from 'next/link'
-import { usePathname } from 'next/navigation'
 import { useRouter } from 'next/router'
-import { signOut, useSession } from 'next-auth/react'
+import { useSession } from 'next-auth/react'
 
-import { addUserSettings } from '#/entities/user-account/api/add-user-settings'
-import { updateUserSettings } from '#/entities/user-account/api/update-user-settings'
-import { isSettingExist } from '#/entities/user-account/lib/helpers/is-setting-exist'
-import { addUserAccountSettings, updateUserAccountSettings } from '#/entities/user-account/model/settings'
-import { getAll, ResponseAllInfo } from '#/entities/user-account/model/user-type-slice'
 import { useAppDispatch, useAppSelector } from '#/app/store/store'
-import { TooltipCustom } from '#/shared'
 import { Device } from '#/shared/lib/types/entities'
+import InterfaceSvg from '#/assets/svg/interface.svg?react'
 
 import '../styles/styles.module.css'
 import styles from '../styles/styles.module.css'
+import { SideMenuItem } from '../types'
+import { UserDTO } from '#/entities/user-account'
 import { ERROR_REPORT, getModalById } from '#/features/modals'
+import { useUserSettingsContext } from '#/entities/user-account'
 
-export const menuListTop = [
-	{ title: 'Дашборд', link: '/', icon: '/svg/side-menu/market', activeList: [] },
+export const menuListTop: SideMenuItem[] = [
+	{
+		title: 'Главная',
+		link: '/',
+		icon: <InterfaceSvg width={18} height={18} />,
+		activeList: [],
+	},
+	{ title: 'Дашборд', link: '/dashboard', icon: '/svg/side-menu/market', activeList: [] },
 	{
 		title: 'Оплата',
 		link: '/account?scope=subscribe',
@@ -47,10 +49,22 @@ export const menuListMiddle = [
 	},
 	{
 		title: 'Изображения',
-		link: '/images',
+		link: '/images/flux',
 		icon: '/svg/side-menu/image',
 		activeList: ['images'],
 	},
+	{
+		title: 'Апскейл',
+		link: '/upscale',
+		icon: '/svg/side-menu/image',
+		activeList: ['upscale'],
+  },
+  {
+		title: 'Олд мод изображений',
+		link: '/deprecated',
+		icon: '/svg/side-menu/image',
+		activeList: ['deprecated'],
+	},
 	// { title: 'Копирайтинг', link: '/copywriting/my', icon: '/svg/side-menu/copyrating', activeList: ['copywriting'] },
 	// { title: 'Видео', link: '/video', icon: '/svg/side-menu/video', activeList: [] },
 	// { title: 'Аудио', link: '/audio', icon: '/svg/side-menu/audio', activeList: [] },
@@ -89,107 +103,52 @@ const closedMixin = (theme: Theme): CSSObject => ({
 	},
 })
 
-const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({
-	width: drawerWidth,
-	flexShrink: 0,
-	whiteSpace: 'nowrap',
-	boxSizing: 'border-box',
-	...(open && {
-		...openedMixin(theme),
-		'& .MuiDrawer-paper': openedMixin(theme),
-	}),
-	...(!open && {
-		...closedMixin(theme),
-		'& .MuiDrawer-paper': closedMixin(theme),
-	}),
-}))
-
-export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; sidemenuDefaultOpen: boolean }) => {
-	const [open, setOpen] = React.useState(sidemenuDefaultOpen)
-	const [isInitialValueSet, setIsInitialValueSet] = React.useState(false)
+const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
+	({ theme, open }) => ({
+		width: drawerWidth,
+		flexShrink: 0,
+		whiteSpace: 'nowrap',
+		boxSizing: 'border-box',
+		...(open && {
+			...openedMixin(theme),
+			'& .MuiDrawer-paper': openedMixin(theme),
+		}),
+		...(!open && {
+			...closedMixin(theme),
+			'& .MuiDrawer-paper': closedMixin(theme),
+		}),
+	})
+)
 
-	const { status, data } = useSession()
-	const dispatch = useAppDispatch()
+export const SideMenu = ({}) => {
+	const { status } = useSession()
 
-	const { pathname, basePath, asPath, push } = useRouter()
+	const { pathname, asPath } = useRouter()
 
-	const { theme, settings } = useAppSelector((state) => state)
+	const { theme } = useAppSelector((state) => state)
 
-	const handleDrawerOpen = () => {
-		setOpen(true)
-	}
-
-	const handleDrawerClose = () => {
-		setOpen(false)
-	}
+	const { getOptionValue, settings, updateSettings } = useUserSettingsContext()
 
 	const error_report = getModalById(ERROR_REPORT)
 
 	const match = useMediaQuery('(min-height:800px)')
 
-	const [userInfo, setUserInfo] = useState<ResponseAllInfo | null>()
-
-	useEffect(() => {
-		getAll(data?.access).then((res) => setUserInfo(res))
-	}, [data?.access])
-
-	useEffect(() => {
-		if (settings.state !== null && isInitialValueSet) {
-			let response = isSettingExist({
-				settings: settings.state,
-				targetDevice: device,
-				targetType: 'sidemenu',
-			})
-
-			if (response && data?.access) {
-				dispatch(
-					updateUserAccountSettings({
-						token: data.access,
-						id: response.id,
-						value: { sidemenu_state: open ? 'opened' : 'closed' },
-						settings: settings.state,
-					})
-				)
-			} else if (data?.access) {
-				dispatch(
-					addUserAccountSettings({
-						token: data.access,
-						setting: {
-							device,
-							type: 'sidemenu',
-							value: { sidemenu_state: open ? 'opened' : 'closed' },
-						},
-					})
-				)
-			}
-		}
-	}, [open])
-
-	useEffect(() => {
-		if (settings.state !== null && !isInitialValueSet) {
-			let setting = isSettingExist({
-				settings: settings.state,
-				targetDevice: device,
-				targetType: 'sidemenu',
-			})
-			if (setting) {
-				setting?.value?.sidemenu_state === 'opened' ? setOpen(true) : setOpen(false)
-			}
-			setIsInitialValueSet(true)
-		}
-	}, [settings.state])
+	const open = useMemo(
+		() => getOptionValue('sidemenu', { sidemenu_state: 'opened' }).sidemenu_state,
+		[settings]
+	)
 
 	return (
 		<Drawer
 			className={styles.drawer}
 			PaperProps={{
 				sx: {
-					backgroundColor: theme.theme === 'light' ? 'white' : '#151518',
+					backgroundColor: theme.theme === 'light' ? 'white' : '#1D1D21',
 					border: 'none',
 				},
 			}}
 			variant='permanent'
-			open={open}
+			open={open === 'opened'}
 		>
 			<DrawerHeader
 				sx={{
@@ -201,7 +160,11 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 				}}
 			>
 				<Box
-					onClick={open ? handleDrawerClose : handleDrawerOpen}
+					onClick={() => {
+						updateSettings('sidemenu', {
+							sidemenu_state: open === 'opened' ? 'closed' : 'opened',
+						})
+					}}
 					width='100%'
 					display={'flex'}
 					alignItems={'center'}
@@ -223,7 +186,7 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 							marginLeft: -1,
 							marginRight: 5,
 							transition: 'transform 0.4s ease',
-							transform: !open ? 'rotate(180deg)' : 'rotate(0deg)',
+							transform: open === 'closed' ? 'rotate(180deg)' : 'rotate(0deg)',
 						}}
 						src={'/arrow-left.svg'}
 						width={20}
@@ -239,7 +202,7 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 							return (
 								<MenuItem
 									key={el.title}
-									open={open}
+									open={open === 'opened'}
 									pathname={asPath}
 									theme={theme.theme}
 									title={el.title}
@@ -254,7 +217,7 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 								return (
 									<MenuItem
 										key={el.title}
-										open={open}
+										open={open === 'opened'}
 										pathname={asPath}
 										theme={theme.theme}
 										title={el.title}
@@ -267,11 +230,13 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 						</Box>
 					</List>
 					<Box sx={{ marginTop: 1.5 }}>
-						<Box onClick={() => {
-							error_report.setState(true)
-						}}>
+						<Box
+							onClick={() => {
+								error_report.setState(true)
+							}}
+						>
 							<MenuItem
-								open={open}
+								open={open === 'opened'}
 								pathname={pathname}
 								theme={theme.theme}
 								title={'Поддержка'}
@@ -280,7 +245,7 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 							/>
 						</Box>
 						<MenuItem
-							open={open}
+							open={open === 'opened'}
 							pathname={pathname}
 							theme={theme.theme}
 							title={'API-ключи'}
@@ -290,8 +255,8 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 					</Box>
 				</>
 			)}
-			<Box sx={{ position: 'absolute', bottom: 5, width: '100%', left: open ? 25 : 0 }}>
-				{open && (
+			<Box sx={{ position: 'absolute', bottom: 5, width: '100%', left: open === 'opened' ? 25 : 0 }}>
+				{open === 'opened' && (
 					<Box sx={{ width: 'fit-content' }}>
 						<Link href={'https://air.fail/requisites'} target='_blank'>
 							<Typography
@@ -319,13 +284,15 @@ type MenuItemProps = {
 
 	title: string
 	link: string | null
-	icon: string
+	icon: string | React.ReactNode
 	activeList?: string[]
 }
 
 export function MenuItem(props: MenuItemProps) {
 	const isActive = useMemo(
-		() => props.link === props.pathname || props.activeList?.some((el) => props.pathname.includes(el)),
+		() =>
+			props.link === props.pathname ||
+			props.activeList?.some((el) => props.pathname.includes(el)),
 		[props.pathname]
 	)
 	const theme = useAppSelector((state) => state.theme.theme)
@@ -347,7 +314,8 @@ export function MenuItem(props: MenuItemProps) {
 						'& .MuiTooltip-arrow': {
 							color: theme === 'light' ? '#E8E8FA' : '#4B4B4B',
 						},
-						boxShadow: '0px 0px 4px rgba(0, 0, 0, 0.04), 0px 4px 32px rgba(0, 0, 0, 0.16)',
+						boxShadow:
+							'0px 0px 4px rgba(0, 0, 0, 0.04), 0px 4px 32px rgba(0, 0, 0, 0.16)',
 					},
 				},
 			}}
@@ -375,7 +343,9 @@ export function MenuItem(props: MenuItemProps) {
 						<ListItem
 							component='div'
 							sx={{
-								backgroundColor: isActive ? 'rgba(130, 128, 255, 0.08)' : 'none',
+								backgroundColor: isActive
+									? 'rgba(130, 128, 255, 0.08)'
+									: 'none',
 								borderRadius: '10px',
 							}}
 						>
@@ -388,7 +358,11 @@ export function MenuItem(props: MenuItemProps) {
 							>
 								{typeof props.icon === 'string' ? (
 									<Image
-										src={props.icon + (isActive ? '' : '-off') + '.svg'}
+										src={
+											props.icon +
+											(isActive ? '' : '-off') +
+											'.svg'
+										}
 										width={19}
 										height={19}
 										alt={''}
@@ -1 +1,2 @@
 export { SideMenu } from './ui/side-menu'
+export * from './types'
\ No newline at end of file
@@ -30,6 +30,7 @@ import styles2 from '#/app/styles/account.module.css'
 import styles from '#/app/styles/styles-pages/index-styles.module.scss'
 import { DoughnutOptions, lineOptions } from '#/shared'
 import { balanceSelector } from '#/shared/lib/selectors'
+import { useUserSelector } from '#/entities/user-account'
 
 const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
 	height: 18,
@@ -52,12 +53,10 @@ const timeForStatsValues = {
 }
 
 export const Statistics = (props: any) => {
-	const { payment_plan } = useAppSelector((state) => state.user)
+	const { payment_plan, show_balance } = useUserSelector()
 
 	const balance = useAppSelector(balanceSelector)
 
-	const show_balance = useAppSelector((state) => state.user.show_balance)
-
 	const [timeForStats, statsByDays, statsByModel, statsByType, setTimeForStats] = useStats()
 
 	return (
@@ -11,14 +11,14 @@ import { Balance } from '#/shared'
 import { NavigateTopBar } from '#/widgets/top-bar-model/ui/navigate-top-bar'
 import { NavigateTopBarMobile } from '#/widgets/top-bar-model/ui/navigate-top-bar-mobile'
 
-interface IModelTopBar {
+interface ModelTopBar {
 	device: 'mobile' | 'desktop'
 	favorites: any[] | []
 	token: string | null
 	title: string
 }
 
-export const ModelTopBar: React.FC<IModelTopBar> = memo(({ device, token, favorites, title }) => {
+export const ModelTopBar: React.FC<ModelTopBar> = memo(({ device, token, favorites, title }) => {
 	const theme = useAppSelector((state) => state.theme.theme)
 
 	const [anchorElModel, setAnchorElModel] = React.useState<HTMLElement | null>(null)
@@ -39,7 +39,9 @@ export const ModelTopBar: React.FC<IModelTopBar> = memo(({ device, token, favori
 		Router.push('/account')
 	}
 
-	const LazyTutorial = dynamic(() => import('#/features/tutorial-gpt').then((component) => component.Tutorial))
+	const LazyTutorial = dynamic(() =>
+		import('#/features/tutorial-gpt').then((component) => component.Tutorial)
+	)
 
 	const LazyArrowIcon = dynamic(() => import('./arrow-up-or-down'))
 
@@ -67,7 +69,9 @@ export const ModelTopBar: React.FC<IModelTopBar> = memo(({ device, token, favori
 		>
 			<Stack direction='row' alignItems='center'>
 				{desktop && (
-					<Button onClick={openMenuModel}>{desktop && <MenuIcon sx={{ color: '#7F7DF3' }} />}</Button>
+					<Button onClick={openMenuModel}>
+						{desktop && <MenuIcon sx={{ color: '#7F7DF3' }} />}
+					</Button>
 				)}
 				<Stack onClick={openMenuModel as any} direction='row' alignItems='center'>
 					<Typography
@@ -87,7 +91,11 @@ export const ModelTopBar: React.FC<IModelTopBar> = memo(({ device, token, favori
 				</Stack>
 
 				{desktop ? (
-					<NavigateTopBar favorites={favorites} closeMenu={closeMenuModel} anchorEl={anchorElModel} />
+					<NavigateTopBar
+						favorites={favorites}
+						closeMenu={closeMenuModel}
+						anchorEl={anchorElModel}
+					/>
 				) : (
 					<NavigateTopBarMobile
 						anchorEl={anchorElModel}
@@ -98,12 +106,19 @@ export const ModelTopBar: React.FC<IModelTopBar> = memo(({ device, token, favori
 			</Stack>
 
 			<Box display='flex' alignItems='center'>
-				{desktop && status === 'authenticated' && pathname === '/chatgpt' && <LazyTutorial />}
+				{desktop && status === 'authenticated' && pathname === '/chatgpt' && (
+					<LazyTutorial />
+				)}
 				<Stack
 					direction='row'
 					className='tutorial-balance'
 					sx={{
-						backgroundColor: theme === 'light' ? (desktop ? 'white' : 'transparent') : '#373737',
+						backgroundColor:
+							theme === 'light'
+								? desktop
+									? 'white'
+									: 'transparent'
+								: '#373737',
 						marginRight: 1.2,
 						padding: desktop ? '8px 15px' : '8px 0px',
 						borderRadius: '10px',
@@ -6,9 +6,9 @@ import { useRouter } from 'next/router'
 
 import { useAppSelector } from '#/app/store/store'
 
-import { IModelMenu } from './navigate-top-bar'
+import { ModelMenu } from './navigate-top-bar'
 
-export const NavigateTopBarMobile: React.FC<IModelMenu> = ({ anchorEl, closeMenu, favorites }) => {
+export const NavigateTopBarMobile: React.FC<ModelMenu> = ({ anchorEl, closeMenu, favorites }) => {
 	const theme = useAppSelector((state) => state.theme.theme)
 
 	const { pathname } = useRouter()
@@ -8,13 +8,13 @@ import { useSession } from 'next-auth/react'
 import { useAppSelector } from '#/app/store/store'
 import { api } from '#/shared/api/endpoints'
 
-export interface IModelMenu {
+export interface ModelMenu {
 	anchorEl: HTMLElement | null
 	closeMenu: () => void
 	favorites?: any[] | []
 }
 
-export const NavigateTopBar: React.FC<IModelMenu> = ({ anchorEl, closeMenu }) => {
+export const NavigateTopBar: React.FC<ModelMenu> = ({ anchorEl, closeMenu }) => {
 	const theme = useAppSelector((state) => state.theme.theme)
 
 	const [favorites, setFavorites] = React.useState<any[] | []>([])
@@ -0,0 +1,2 @@
+
+export * from './upscale-empty'
\ No newline at end of file
@@ -0,0 +1,67 @@
+.imgbox {
+	margin-top: 24px;
+	position: relative;
+	border-radius: 20px;
+	overflow: hidden;
+	width: max-content;
+}
+.empty {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+.resultbox {
+	position: absolute !important;
+	top: 0;
+	left: 0;
+	// overflow: hidden;
+	bottom: 0;
+	height: 100%;
+	display: flex;
+}
+.title {
+	font-size: 48px;
+	padding: 40px 0px;
+	text-align: center;
+	@media screen and (max-width: 768px) {
+		font-size: 32px;
+	}
+	span {
+		color: var(--air-color);
+	}
+}
+.arrow {
+	margin-bottom: 20px;
+}
+.resized {
+	display: flex;
+	height: 100%;
+
+	img {
+		height: 100%;
+		width: calc(100% - 2px);
+		object-fit: cover;
+		object-position: left;
+	}
+}
+
+.slider {
+	height: 100%;
+	width: 3px;
+	background-color: white;
+	position: relative;
+
+	&__track {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 30px;
+		height: 30px;
+		border-radius: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: white;
+	}
+}
@@ -0,0 +1,54 @@
+import React from 'react'
+
+import styles from './upscale-empty.module.scss'
+import { c } from '#/shared'
+import Image from 'next/image'
+import { Resizable } from 're-resizable'
+import ArrowsSvg from '#/assets/svg/arrows.svg?react'
+import ArrowSvg from '#/assets/svg/arrow.svg?react'
+import { ImageArea } from '#/features/image-area'
+
+interface UpscaleEmptyProps {
+	images: File[]
+	setImages: React.Dispatch<React.SetStateAction<File[]>>
+}
+
+export const UpscaleEmpty = ({ images, setImages }: UpscaleEmptyProps) => {
+	return (
+		<section className={styles.empty}>
+			<div className={c(styles.imgbox)}>
+				<Image
+					width={680}
+					height={240}
+					alt='initial'
+					src='/pages/upscale/woman.jpg'
+					className={c(styles.img)}
+				/>
+				<Resizable className={styles.resultbox} defaultSize={{ width: 340, height: 240 }}>
+					<div className={styles.resized}>
+						<img
+							width={680}
+							height={240}
+							alt='result'
+							src='/pages/upscale/woman-result.jpg'
+							className={c(styles.img)}
+						/>
+						<div className={styles.slider}>
+							<div className={styles.slider__track}>
+								<ArrowsSvg color='black' width={20} height={20} />
+							</div>
+						</div>
+					</div>
+				</Resizable>
+			</div>
+
+			<h1 className={c('title-h1', styles.title)}>
+				Теперь без <span>мыльных</span> <br /> изображений
+			</h1>
+
+			<ArrowSvg className={styles.arrow} width={22} height={28} color='#A4AAB5' />
+
+			<ImageArea files={images} setFiles={setImages} />
+		</section>
+	)
+}
@@ -0,0 +1 @@
+export * from './ui'
\ No newline at end of file
@@ -1,32 +0,0 @@
-{
-	"plugins": ["prettier", "simple-import-sort"],
-	"extends": ["next/core-web-vitals"],
-	"rules": {
-		"no-console": "warn",
-		"quotes": ["warn", "single"],
-		"indent": "off",
-		"jsx-quotes": ["warn", "prefer-single"],
-    "react/display-name": "off",
-		"simple-import-sort/imports": [
-			"warn",
-			{
-				"groups": [
-					// Packages `react` related packages come first.
-					["^react", "^@?\\w"],
-					// Internal packages.
-					["^(@|components)(/.*|$)"],
-					// Side effect imports.
-					["^\\u0000"],
-					// Parent imports. Put `..` last.
-					["^\\.\\.(?!/?$)", "^\\.\\./?$"],
-					// Other relative imports. Put same-folder imports and `.` last.
-					["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
-					// Style imports.
-					["^.+\\.?(css)$"]
-				]
-			}
-		],
-		"simple-import-sort/exports": "off",
-		"react-hooks/rules-of-hooks": "off"
-	}
-}
@@ -10,6 +10,8 @@ default:
 build_staging:
   stage: Build
   image: docker:cli
+  services:
+    - docker:dind
   script:
     - export RELEASE=$(echo -n $(date '+%D %X') | md5sum | awk '{print $1}')
     - echo -e "\nNEXT_PUBLIC_RELEASE=$RELEASE" >> $ENV
@@ -1,10 +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": 110,
+	"jsxSingleQuote": true
 }
@@ -12,14 +12,20 @@ services:
     labels:
       - traefik.enable=true
       - traefik.docker.network=infrastructure
-      - traefik.http.routers.frontend.rule=Host(`$DOMAIN`)
-      - traefik.http.routers.frontend.entrypoints=web,websecure
-      - traefik.http.routers.frontend.tls=true
-      - traefik.http.routers.frontend.tls.certresolver=defaultresolver
-      - traefik.http.routers.frontend.service=frontend
+
+      - traefik.http.routers.frontend-web-http.rule=Host(`$DOMAIN`)
+      - traefik.http.routers.frontend-web-http.entrypoints=web
+      - traefik.http.routers.frontend-web-http.tls=false
+      - traefik.http.routers.frontend-web-http.service=frontend
+      - traefik.http.routers.frontend-web-http.middlewares=sts-header@file,https-redirect@file
+
+      - traefik.http.routers.frontend-web-https.rule=Host(`$DOMAIN`)
+      - traefik.http.routers.frontend-web-https.entrypoints=websecure
+      - traefik.http.routers.frontend-web-https.tls=true
+      - traefik.http.routers.frontend-web-https.tls.certresolver=defaultresolver
+      - traefik.http.routers.frontend-web-https.service=frontend
+      
       - traefik.http.services.frontend.loadbalancer.server.port=3000
-      - traefik.http.middlewares.frontend.redirectscheme.scheme=https
-      - traefik.http.middlewares.frontend.redirectscheme.permanent=true
 
 networks:
   infrastructure:
@@ -0,0 +1,9 @@
+import js from '@eslint/js'
+
+export default [
+	js.configs.recommended,
+	{
+		ignores: ['**/dist/**'],
+		rules: {},
+	},
+]
@@ -25,28 +25,24 @@
 	},
 	"keywords": [],
 	"license": "MIT",
-	"lint-staged": {
-		"*.{js,ts,jsx,tsx}": [
-			"prettier --write",
-			"eslint --fix"
-		]
-	},
 	"dependencies": {
-		"@babel/eslint-parser": "7.23.3",
 		"@dqbd/tiktoken": "^1.0.7",
 		"@emotion/react": "^11.11.0",
 		"@emotion/styled": "^11.11.0",
 		"@fontsource/roboto": "^4.5.8",
+		"@lottiefiles/dotlottie-react": "^0.13.5",
 		"@mui/icons-material": "^5.11.11",
 		"@mui/material": "^5.11.12",
 		"@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",
 		"@testing-library/user-event": "^14.6.1",
 		"@types/cookie": "^0.5.1",
+		"@types/event-source-polyfill": "^1.0.5",
 		"@types/intro.js": "^5.1.1",
 		"@types/lodash": "^4.14.195",
 		"@types/node": "18.15.2",
@@ -61,12 +57,12 @@
 		"cross-env": "^7.0.3",
 		"dayjs": "^1.11.8",
 		"draft-js": "^0.11.7",
-		"eslint": "^8.7.0",
-		"eslint-config-next": "13.2.4",
-		"eslint-plugin-prettier": "^4.2.1",
-		"eslint-plugin-simple-import-sort": "^10.0.0",
+		"draft-js-import-html": "^1.4.1",
+		"draftjs-to-html": "^0.9.1",
+		"event-source-polyfill": "^1.0.31",
 		"husky": "^8.0.0",
 		"i18next": "^23.4.1",
+		"intro.js": "^8.3.2",
 		"intro.js-react": "^1.0.0",
 		"lint-staged": "^13.2.2",
 		"lodash.debounce": "^4.0.8",
@@ -74,8 +70,10 @@
 		"next-auth": "^4.20.1",
 		"next-i18next": "^14.0.0",
 		"prettier": "^2.8.8",
+		"re-resizable": "^6.11.2",
 		"react": "18.2.0",
 		"react-chartjs-2": "^5.2.0",
+		"react-color": "^2.19.3",
 		"react-cookie": "^4.1.1",
 		"react-dom": "18.2.0",
 		"react-draft-wysiwyg": "^1.15.0",
@@ -83,6 +81,8 @@
 		"react-i18next": "^13.0.3",
 		"react-markdown": "^8.0.7",
 		"react-redux": "^8.0.5",
+		"react-responsive": "^10.0.1",
+		"react-scrollbars-custom": "^4.1.1",
 		"react-syntax-highlighter": "^15.5.0",
 		"react-transition-group": "^4.4.5",
 		"remark-gfm": "^3.0.1",
@@ -91,22 +91,27 @@
 		"styled-components": "^5.3.9",
 		"swiper": "^11.2.1",
 		"typescript": "5.1.3",
+		"usehooks-ts": "^3.1.1",
 		"zustand": "^5.0.3"
 	},
 	"devDependencies": {
+		"@eslint/js": "^9.31.0",
 		"@svgr/webpack": "^8.1.0",
 		"@testing-library/dom": "^10.4.0",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/react": "^16.3.0",
+		"@types/draftjs-to-html": "^0.8.4",
 		"@types/intro.js": "^5.1.1",
 		"@types/jest": "^29.5.14",
 		"@types/lodash": "^4.14.195",
+		"@types/react-color": "^3.0.13",
 		"@types/react-draft-wysiwyg": "^1.13.8",
+		"@types/react-lottie": "^1.2.10",
 		"@types/react-syntax-highlighter": "^15.5.7",
 		"cross-fetch": "^4.1.0",
-		"eslint-config-prettier": "^8.8.0",
 		"jest": "^29.7.0",
 		"jest-environment-jsdom": "^29.7.0",
+		"jest-fetch-mock": "^3.0.3",
 		"lint-staged": "^13.2.2",
 		"prettier": "^2.8.8",
 		"ts-node": "^10.9.2",
@@ -29,21 +29,13 @@ services:
           - node.role == worker
       labels:
         - traefik.enable=true
-        - traefik.docker.network=infrastructure
-        
-        - traefik.http.middlewares.sts-header.headers.stsincludesubdomains=true
-        - traefik.http.middlewares.sts-header.headers.forceSTSHeader=true
-        - traefik.http.middlewares.sts-header.headers.stspreload=true
-        - traefik.http.middlewares.sts-header.headers.stsseconds=31536000
-        - traefik.http.middlewares.sts-header.headers.isdevelopment=false
-        - traefik.http.middlewares.https-redirect.redirectscheme.scheme=https
-        - traefik.http.middlewares.https-redirect.redirectscheme.permanent=true
+        - traefik.swarm.network=infrastructure
 
         - traefik.http.routers.frontend-web-http.rule=Host(`$DOMAIN`)
         - traefik.http.routers.frontend-web-http.entrypoints=web
         - traefik.http.routers.frontend-web-http.tls=false
         - traefik.http.routers.frontend-web-http.service=frontend
-        - traefik.http.routers.frontend-web-http.middlewares=sts-header@swarm,https-redirect@swarm
+        - traefik.http.routers.frontend-web-http.middlewares=sts-header@file,https-redirect@file
 
         - traefik.http.routers.frontend-web-https.rule=Host(`$DOMAIN`)
         - traefik.http.routers.frontend-web-https.entrypoints=websecure