@@ -1,3 +1,5 @@
+
+
\ No newline at end of file
@@ -1,3 +1,4 @@
+
+
\ No newline at end of file
@@ -0,0 +1,11 @@
+
\ No newline at end of file
@@ -0,0 +1,12 @@
+
\ No newline at end of file
@@ -0,0 +1,5 @@
+
\ No newline at end of file
@@ -0,0 +1,5 @@
+
\ No newline at end of file
@@ -0,0 +1,125 @@
+import { useAppSelector } from '@/src/main/store/store'
+import { TooltipCustom } from '@/src/shared'
+import { API_URL } from '@/src/shared/lib/constants'
+import { InputStyleSmallLight, InputStyleSmallDark } from '@/src/shared/ui/input'
+import { TableRow, TableCell, TextField, Stack } from '@mui/material'
+import { useMask } from '@react-input/mask'
+import axios from 'axios'
+import { useSession } from 'next-auth/react'
+import Image from 'next/image'
+import { useState, useMemo, useEffect } from 'react'
+
+export interface KeyRowProps extends ApiKeyDTO {
+ deleteKey: (name: string) => void
+ keyValue: string
+}
+
+export const KeyRow = ({
+ key,
+ name,
+ user,
+ keyValue,
+ deleteKey,
+ token_limit,
+ created_at,
+ expires_at,
+ ...props
+}: KeyRowProps) => {
+ const [isCopy, setIsCopy] = useState(false)
+ const [limit, setLimit] = useState(token_limit)
+ const theme = useAppSelector((state) => state.theme.theme)
+ const { data: session } = useSession()
+
+ const inputRef = useMask({
+ mask: '_'.repeat(10),
+ replacement: {
+ _: /\d+/,
+ },
+ })
+
+ const copy = (text: string) => {
+ navigator.clipboard.writeText(text)
+ setIsCopy(true)
+ setTimeout(() => setIsCopy(false), 3000)
+ }
+
+ const computedLimit = useMemo(() => {
+ return limit === '' || limit === 'Бесконечно' ? null : Number(limit)
+ }, [limit])
+
+ useEffect(() => {
+ let timeout = window.setTimeout(() => {
+ console.log(limit)
+ if (limit !== token_limit) {
+ axios.patch(
+ API_URL + '/public/api-key',
+ { token_limit: computedLimit, name },
+ { headers: { Authorization: `Bearer ${session?.access}` } }
+ )
+ }
+ }, 1000)
+ return () => window.clearTimeout(timeout)
+ }, [limit])
+
+ return (
+
+
+ {name}
+
+
+ {keyValue}
+
+
+ setLimit(e.target.value)}
+ sx={
+ theme === 'light'
+ ? { ...InputStyleSmallLight }
+ : { ...InputStyleSmallDark }
+ }
+ />
+
+
+ {created_at.split('T')[0]}
+
+
+ {expires_at !== null ? expires_at : 'Бессрочно'}
+
+
+
+ {isCopy ? (
+
+ ) : (
+
+ copy(keyValue)}
+ src={'/svg/copy.svg'}
+ width={20}
+ height={20}
+ style={{ cursor: 'pointer' }}
+ alt={'copy'}
+ />
+
+ )}
+ deleteKey(name)}
+ style={{ cursor: 'pointer' }}
+ src='/svg/main_menu/trash.svg'
+ width={20}
+ height={20}
+ alt='Удалить'
+ />
+
+
+
+ )
+}
@@ -0,0 +1 @@
+export * from './message.routes'
\ No newline at end of file
@@ -0,0 +1,25 @@
+import { API_URL } from "@/src/shared/lib/constants"
+import { IMessageRequest } from "@/src/shared/lib/types/types-gpt"
+import axios, { AxiosResponse } from "axios"
+import { Message, MessageSend } from "../types"
+
+export async function sendImage(
+ model: string | null,
+ dataForSend: MessageSend | FormData,
+ token?: string
+) {
+ const HeaderDataType =
+ dataForSend instanceof FormData ? 'multipart/form-data' : 'application/json'
+
+ return await axios.post(
+ API_URL + `/media/image/${model}`,
+ dataForSend,
+ {
+ withCredentials: true,
+ headers: {
+ Authorization: `Bearer ${token}`,
+ 'Content-Type': HeaderDataType,
+ },
+ }
+ )
+}
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './message'
\ No newline at end of file
@@ -0,0 +1,18 @@
+export interface MessageSend {
+ content: string
+ file?: File | null
+ info: T
+}
+
+export interface 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
+ model: string
+}
@@ -0,0 +1,2 @@
+export * from './types'
+export * from './api'
\ No newline at end of file
@@ -0,0 +1,11 @@
+import { API_URL } from '@/src/shared/lib/constants'
+import axios from 'axios'
+import { IModel } from '../types'
+
+export async function getBotParams(slug: string, token?: string) {
+ return await axios.get(API_URL + `/ml_models/${slug}`, {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ })
+}
@@ -0,0 +1,11 @@
+import { API_URL } from '@/src/shared/lib/constants'
+import axios from 'axios'
+import { IShortModel } from '../types'
+
+export async function getModelsImages(token?: string) {
+ return await axios.get(API_URL + '/ml_models/?category=images', {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ })
+}
@@ -0,0 +1,2 @@
+export * from './bot.route'
+export * from './images-bots.route'
@@ -0,0 +1 @@
+export * from './use-images-bots'
\ No newline at end of file
@@ -0,0 +1,133 @@
+import { useState } from 'react'
+import { IModel } from '../types'
+import { useSession } from 'next-auth/react'
+import { getBotParams } from '../api'
+import { useAppDispatch } from '@/src/main/store/store'
+import { setParams } from '@/src/main/store/model-parametres-store'
+
+export function useImageBot(slug: string) {
+ const [botParams, setBotParams] = useState(null)
+ const [version, setVersion] = useState('')
+ const [modelType, setModelType] = useState('')
+
+ const dispatch = useAppDispatch()
+
+ const { data } = useSession()
+
+ function setDefault(bot: IModel) {
+ setVersion('')
+
+ dispatch(
+ setParams(bot.parameters.reduce((a, v) => ({ ...a, [v.key]: v.values.default }), {}))
+ )
+ }
+
+ // это пиз**ц
+ // нужен рефакторинг (я то в этом не разбираюсь)
+ // а стажеры и подавно))))
+ 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 },
+ {}
+ )
+ )
+ )
+ }
+
+ function setAllParams(bot: IModel) {
+ setBotParams(bot)
+ setModelType(bot.slug)
+
+ // store
+ if (bot.versions.length === 0) return setDefault(bot)
+
+ setVersion(bot.versions[0].slug)
+ setStoreParams(bot)
+ }
+
+ // это пиз**ц
+ 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 setDefaultParams = () => {
+ if (!botParams) 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 },
+ {}
+ )
+ )
+ )
+ }
+
+ // api functions
+
+ async function fetchBotParams() {
+ if (!data) return
+
+ const { data: bot, ...response } = await getBotParams(slug, data.access)
+
+ if (response.status < 400) setAllParams(bot)
+ }
+
+ return {
+ botParams,
+ version,
+ modelType,
+ fetchBotParams,
+ setVersion,
+ resetParams,
+ setDefaultParams
+ }
+}
@@ -0,0 +1,24 @@
+import { useState } from 'react'
+import { getModelsImages } from '../api'
+import { useSession } from 'next-auth/react'
+import { IShortModel } from '../types'
+
+export function useImagesBots() {
+ const [bots, setBots] = useState([])
+
+ const { data } = useSession()
+
+ async function fetchBots() {
+ if (!data) return
+
+ const response = await getModelsImages(data.access)
+
+ if (response.status < 400) setBots(response.data)
+ }
+
+ return {
+ bots,
+ fetchBots,
+ setBots
+ }
+}
@@ -0,0 +1 @@
+export * from './model.types'
\ No newline at end of file
@@ -0,0 +1,54 @@
+type ModelForChats = 'chatgpt' | 'llama2' | 'vicuna' | 'deepl' | 'mistral'
+
+export interface IShortModel {
+ uid: string
+ title: string
+ description: string
+ slug: string
+ image: string
+ actual_stat: {
+ generation_time: string
+ tokens_cost: string
+ }
+}
+
+export interface IModel {
+ uid: string
+ title: string
+ description: string
+ slug: string
+ image: string
+ settings: { is_active: boolean }
+ parameters: IModelParams[]
+ versions: IModelVersions[]
+ inputs: IModelInputs[]
+}
+export interface IModelParams {
+ name: string
+ description: string
+ key: string
+ type: string
+ required: boolean
+ values: {
+ availables: string[]
+ default: any
+ end: number
+ start: number
+ step: number
+ }
+ versions: string[]
+}
+export interface IModelVersions {
+ name: string
+ description: string
+ default: boolean
+ slug: string
+}
+export interface IModelInputs {
+ // type: 'image' | 'zip' | 'text' | 'audio' | 'pdf' | 'txt'
+ type: string
+ required: boolean
+ versions: string[]
+}
+
+export default ModelForChats
@@ -0,0 +1,3 @@
+export * from './api'
+export * from './model'
+export * from './types'
\ No newline at end of file
@@ -0,0 +1,168 @@
+import axios, { AxiosResponse } from 'axios'
+import { User } from 'next-auth'
+
+import { API_URL } from '@/src/shared/lib/constants'
+import { IOffer } from '@/src/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,22 +0,0 @@
-import axios, { AxiosResponse } from 'axios'
-
-import { API_URL } from '@/src/shared/lib/constants'
-
-import { AccountType } from '../model/types'
-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'
- }
-}
@@ -0,0 +1 @@
+export * from './account-endpoints'
@@ -14,3 +14,21 @@ export interface IUserSetting {
type: SettingType
value: SettingValueType
}
+
+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
+}
@@ -1 +1,2 @@
export { getAllInfo, userSlice } from './model/user-type-slice'
+export * from './api'
@@ -7,12 +7,12 @@ import { useSession } from 'next-auth/react'
import { useAppSelector } from '@/src/main/store/store'
import { ButtonGray, ButtonUI, Error, InputStyleDark, InputStyleLight, Loader, Modal } from '@/src/shared'
-import { accountApi } from '@/src/shared/api/account-endpoints'
import { API_URL } from '@/src/shared/lib/constants'
import { useShowData } from '@/src/shared/lib/hooks'
import { DateInput } from '@/src/shared/ui/date-input/date-input'
import styles from '../invite-person-in-business/ui/invite-modal.module.scss'
+import { createApiKeys, getApiKeys } from '@/src/entities/user-account'
export const ApiKeyModal = ({
open,
@@ -45,10 +45,10 @@ export const ApiKeyModal = ({
setIsLoading(true)
const { result } =
endDate && endDate !== ''
- ? await accountApi.createApiKeys({ name: title !== '' ? title : keyName, expires_at: endDate }, data?.access)
- : await accountApi.createApiKeys({ name: title !== '' ? title : keyName }, data?.access)
+ ? await createApiKeys({ name: title !== '' ? title : keyName, expires_at: endDate }, data?.access)
+ : await 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 '@/src/shared/api/account-endpoints'
+import { loginByEmail } from "@/src/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)
@@ -10,7 +10,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 @@
+export * from './use-image-bot-create'
\ No newline at end of file
@@ -0,0 +1,54 @@
+import { getUserBalance } from '@/src/entities/balance'
+import { Message, MessageSend, sendImage } from '@/src/entities/message'
+import { useAppDispatch } from '@/src/main/store/store'
+import { Device } from '@/src/shared/lib/types/entities'
+import { formDataHelper } from '@/src/widgets/messages'
+import { useSession } from 'next-auth/react'
+import { Dispatch, SetStateAction, useState } from 'react'
+
+export function useImageBotCreateImage(
+ showError: (message: string) => void,
+ type: string,
+ device: Device,
+ setLoading: (value: boolean) => void,
+ setMessages: Dispatch>
+) {
+ const [isComplete, setIsComplete] = useState(false)
+
+ const { data } = useSession()
+
+ const dispatch = useAppDispatch()
+
+ const createImage = async (dataForSend: MessageSend) => {
+ const { content, file } = dataForSend
+
+ setIsComplete(false)
+ setLoading(true)
+
+ const dataSending = file ? formDataHelper(file, dataForSend) : dataForSend
+
+ const response = await sendImage(type, dataSending, data?.access)
+
+ if (response.status >= 400) showError('Ошибка отправки сообщения')
+
+ setLoading(false)
+
+ dispatch(getUserBalance(data?.access))
+
+ setMessages((prev: Message[]) => {
+ if (!prev || !prev.length) return response.data
+
+ if (device === 'desktop') {
+ return [...response.data, ...prev]
+ }
+ return [...prev, ...response.data]
+ })
+
+ setIsComplete(true)
+ }
+
+ return {
+ createImage,
+ isComplete
+ }
+}
@@ -0,0 +1 @@
+export * from './model'
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './use-images-bot-filters'
\ No newline at end of file
@@ -0,0 +1,16 @@
+import { useAppSelector } from '@/src/main/store/store'
+import { useState } from 'react'
+
+export function useImagesBotFilters() {
+ const [openFiltersMobile, setOpenFiltersMobile] = useState(false)
+ const [params, setParams] = useState(false)
+ const includeParams = useAppSelector((state) => state.params.params)
+
+ return {
+ openFiltersMobile,
+ setOpenFiltersMobile,
+ params,
+ setParams,
+ includeParams,
+ }
+}
@@ -0,0 +1 @@
+export * from './model'
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './use-images-uniq-input'
\ No newline at end of file
@@ -0,0 +1,65 @@
+import { useShowData } from '@/src/shared'
+import { MessageSend } from '@/src/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 { error, showError } = useShowData()
+
+ 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)) {
+ showError('Введите сообщение!')
+ return false
+ }
+ if (required.includes('image') && image === null) {
+ showError('Прикрепите изображение!')
+ return false
+ }
+ if (required.includes('zip') && image === null) {
+ showError('Прикрепите архив!')
+ 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,
+ }
+}
@@ -0,0 +1 @@
+export * from './model'
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './use-images-bot-pagination'
\ No newline at end of file
@@ -0,0 +1,115 @@
+import { Message } from '@/src/entities/message'
+import { useAppSelector } from '@/src/main/store/store'
+import { useShowData } from '@/src/shared'
+import { Device } from '@/src/shared/lib/types/entities'
+import { getImagesGalery } from '@/src/widgets/messages'
+import { useMediaQuery } from '@mui/material'
+import { useSession } from 'next-auth/react'
+import { useRef, useState } from 'react'
+import { Limit, LimitSize } from '../types'
+
+export function useImageBotPagination(deviceType: Device) {
+ const refScrollMobile = useRef(null)
+ const refScrollDesktop = useRef(null)
+ const mobileScrollContainer = useRef(null)
+ const offset = useRef(0)
+
+ const [messages, setMessages] = useState([])
+
+ const [loading, setLoading] = useState(false)
+
+ const { showError } = useShowData()
+
+ 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 getImagesGalery(
+ data.access,
+ offset.current,
+ count || 10
+ )
+ setLoading(false)
+
+ if (response.status >= 400 || !Array.isArray(answer))
+ return showError('Ошибка загрузки чата')
+
+ if (deviceType === 'desktop') {
+ setMessages((prev) => [...prev, ...answer])
+ offset.current = offset.current + answer.length
+ return
+ }
+
+ setMessages((prev) => [...answer.reverse(), ...prev])
+ offset.current = offset.current + answer.length
+ }
+
+ const callback = async function (entries: IntersectionObserverEntry[]) {
+ if (!entries[0].isIntersecting) return
+
+ if (deviceType === 'desktop') {
+ const active = Object.values(limits).find((item) => item.active)
+
+ if (offset.current > 0) return fetchMessages(active?.limit)
+
+ fetchMessages(active?.firstLimit)
+ }
+
+ if (!mobileScrollContainer.current) return
+
+ const scrollBottom =
+ mobileScrollContainer.current.scrollHeight - mobileScrollContainer.current.scrollTop
+
+ await fetchMessages()
+
+ setTimeout(() => {
+ mobileScrollContainer.current!.scroll({
+ top: mobileScrollContainer.current!.scrollHeight - scrollBottom,
+ behavior: 'smooth',
+ })
+ }, 500)
+ }
+
+ function onObserverMounted() {
+ const currentObserver =
+ deviceType === 'desktop' ? refScrollDesktop.current : refScrollMobile.current
+
+ if (!currentObserver) return
+
+ const observer = new IntersectionObserver(callback, { rootMargin: '400px' })
+
+ observer.observe(currentObserver!)
+ }
+
+ return {
+ refScrollMobile,
+ refScrollDesktop,
+ onObserverMounted,
+ messages,
+ loading,
+ setLoading,
+ setMessages,
+ fetchMessages,
+ mobileScrollContainer,
+ }
+}
@@ -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,3 @@
+
+
+export * from './use-images-library'
\ No newline at end of file
@@ -0,0 +1,4 @@
+export interface ImageWithState {
+ image: string
+ state: boolean
+}
\ No newline at end of file
@@ -0,0 +1,53 @@
+import { useEffect, useMemo, useState } from 'react'
+import { ImageWithState } from './types'
+
+export const useImagesLibrary = (images: string[], current: string | null, reverse: boolean) => {
+ const [imagesWithState, setImagesWithState] = useState(getImagesWithState(images))
+ const [initialCount, setInitialCount] = useState(0)
+
+ function getImagesWithState(images: string[]) {
+ const imagesWithState = images.map((image) => ({
+ image,
+ state: false,
+ }))
+
+ return imagesWithState
+ }
+
+ function updateImageState(image: string, state: boolean) {
+ setImagesWithState((prev) => prev.map((item) => (item.image === image ? { ...item, state } : item)))
+ }
+
+ const currentImageIndex = useMemo(
+ () => (!current ? undefined : imagesWithState.findIndex((image) => image.image === current)),
+ [imagesWithState, current]
+ )
+
+ useEffect(() => {
+ if (initialCount === images.length) {
+ return
+ }
+
+ setInitialCount(images.length)
+
+ const filteredMessages = images.filter((item) =>
+ !imagesWithState.find((i) => i.image === item) ? true : false
+ )
+
+ if (filteredMessages.length === images.length) {
+ return setImagesWithState(getImagesWithState(filteredMessages))
+ }
+
+ if (reverse) setImagesWithState([...imagesWithState, ...getImagesWithState(filteredMessages)])
+ else setImagesWithState([...getImagesWithState(filteredMessages), ...imagesWithState])
+ }, [images])
+
+ return {
+ imagesWithState,
+ currentImageIndex,
+ initialCount,
+ setInitialCount,
+ setImagesWithState,
+ updateImageState,
+ }
+}
@@ -0,0 +1,53 @@
+import { debounce } from 'lodash'
+import { useCallback, useEffect, useState } from 'react'
+import { Swiper as SwiperCore } from 'swiper'
+import { ImageWithState } from './types'
+
+export const useLibrarySwiper = (onSlideFalse: ((...args: any) => any) | undefined, reverse: boolean) => {
+ const [swiper, setSwiper] = useState(null)
+
+ const keydown = (e: KeyboardEvent) => {
+ if (e.key === 'ArrowRight') {
+ e.preventDefault()
+ slideNext()
+ }
+ if (e.key === 'ArrowLeft') {
+ e.preventDefault()
+ slidePrev()
+ }
+ }
+
+ const slidePrev = function () {
+ const result = swiper?.slidePrev()
+
+ if (!result && onSlideFalse && !reverse) {
+ onSlideFalse()
+ }
+ }
+
+ const slideNext = function () {
+ const result = swiper?.slideNext()
+
+ if (!result && onSlideFalse && reverse) {
+ onSlideFalse()
+ }
+ }
+
+ useEffect(() => {
+ document.addEventListener('keydown', keydown, true)
+ return () => {
+ document.removeEventListener('keydown', keydown, true)
+ }
+ }, [swiper])
+
+ // useEffect(() => {
+ // swiper?.slideTo(currentImageIndex || 0)
+ // }, [currentImageIndex])
+
+ return {
+ swiper,
+ setSwiper,
+ slidePrev,
+ slideNext,
+ }
+}
@@ -1,27 +1,62 @@
-import React, { Dispatch, SetStateAction } from 'react'
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react'
import Image from 'next/image'
import styles from './modal-styles.module.scss'
+import { ArrowDropDown } from '@mui/icons-material'
+import { c, Loader } from '@/src/shared'
+import { useImagesLibrary } from '../model'
+
+import { Swiper, SwiperSlide } from 'swiper/react'
+import 'swiper/css'
+import { Swiper as SwiperCore } from 'swiper'
+import { useLibrarySwiper } from '../model/use-swiper'
interface IProps {
modal: boolean
setModal: Dispatch>
- image: string
+ current: string | null
+ setCurrent?: (value: string | null) => void
+ onSlideFalse?: (...args: any) => any
+ reverse?: boolean
+ images: string[]
}
-export default function FullScreenModal({ modal, setModal, image }: IProps) {
- const isSvg = image.includes('.svg')
+
+export default function FullScreenModal({
+ modal,
+ setModal,
+ current,
+ images,
+ onSlideFalse,
+ reverse = false,
+}: IProps) {
+ const { imagesWithState, updateImageState, currentImageIndex, initialCount } =
+ useImagesLibrary(images, current, reverse)
+
+ const { swiper, setSwiper, slideNext, slidePrev } = useLibrarySwiper(onSlideFalse, reverse)
+
+ useEffect(() => {
+ if (!(initialCount < images.length && swiper)) return
+
+ if (reverse) {
+ setTimeout(() => swiper.slideNext(), 1000)
+ return
+ }
+
+ setTimeout(() => swiper.slideTo(images.length - initialCount - 1, 1000), 1000)
+ }, [images])
return (
setModal(false)}
>
- {!isSvg && image ? (
-
- ) : (
-
+
+ {modal && (
+
setSwiper(swiper)}
+ >
+ {imagesWithState.map(({ image, state }, index) => (
+
+ {!state && }
+ {!image.includes('.svg') ? (
+ e.stopPropagation()}
+ onLoadingComplete={() => {
+ updateImageState(image, true)
+ }}
+ loading='lazy'
+ src={image}
+ width={'1500'}
+ height={'1500'}
+ alt='К сожалению, изображение не загрузилось'
+ className={styles.image_style}
+ />
+ ) : (
+ e.stopPropagation()}
+ onLoad={() => updateImageState(image, true)}
+ alt='К сожалению, изображение не загрузилось'
+ className={styles.image_style}
+ />
+ )}
+
+ ))}
+
)}
+
+
+ {props.title}
+
+
{props.rightSlot}
+