@@ -181,3 +181,11 @@ letter-spacing: -1%; } } + +.card_blocked { + user-select: none; +} + +.card_selectable { + user-select: auto !important; +} @@ -179,3 +179,11 @@ letter-spacing: -1%; } } + +.card_blocked { + user-select: none; +} + +.card_selectable { + user-select: auto !important; +} @@ -25,8 +25,7 @@ export function ChatModelCard({ description, image, title, slug, accessed_models

@@ -25,8 +25,7 @@ export function ImageModelCard({ description, image, title, slug, accessed_model

@@ -23,7 +23,7 @@ export function VideoModelCard({ description, image, title, slug, accessed_model return ( -

@@ -1,8 +1,6 @@ import React, { useState } from 'react' import { Box, TextField, Typography } from '@mui/material' -import axios from 'axios' import dayjs, { Dayjs } from 'dayjs' -import { useRouter } from 'next/navigation' import { useSession } from 'next-auth/react' import { ButtonGray, ButtonUI, Error, InputStyleDark, Loader, Modal } from '#/shared' @@ -1,17 +0,0 @@ -import { accountApi } from '#/shared/api/account-endpoints' - -export const authTelegram = async (email: any, password: any) => { - const user = await accountApi.loginByEmail(email, password) - - if (user !== null) { - ;(window as any).Telegram.WebApp.sendData(user.token.access) - } -} - -export const authTelegramYandex = async (email: any, password: any) => { - const user = await accountApi.loginByEmail(email, password) - - if (user !== null) { - ;(window as any).Telegram.WebApp.sendData(user.token.access) - } -} @@ -1 +0,0 @@ -export { authTelegram } from './model/auth' @@ -1,4 +1,4 @@ -import axios, { AxiosResponse } from 'axios' +import axios from 'axios' import { getApiUrl } from '#/shared/lib/constants' @@ -1,4 +1,4 @@ -import axios, { AxiosResponse } from 'axios' +import axios from 'axios' import { getApiUrl } from '#/shared/lib/constants' @@ -1,4 +1,4 @@ -import axios, { AxiosResponse } from 'axios' +import axios from 'axios' import { getApiUrl } from '#/shared/lib/constants' @@ -1,4 +1,4 @@ -import axios, { AxiosResponse } from 'axios' +import axios from 'axios' import { getApiUrl } from '#/shared/lib/constants' @@ -1,6 +1,6 @@ import React, { FC, useState } from 'react' import { useForm } from 'react-hook-form' -import { SubmitErrorHandler } from 'react-hook-form/dist/types/form' +import { SubmitErrorHandler } from 'react-hook-form' import { Box, TextField, Typography } from '@mui/material' import { useSession } from 'next-auth/react' @@ -1,6 +1,6 @@ import React, { FC, useEffect, useState } from 'react' import { useForm } from 'react-hook-form' -import { SubmitErrorHandler } from 'react-hook-form/dist/types/form' +import { SubmitErrorHandler } from 'react-hook-form' import { Box, TextField, Typography } from '@mui/material' import axios from 'axios' import { useSession } from 'next-auth/react' @@ -2,7 +2,6 @@ import React, { useState } from 'react' import { Box, Typography } from '@mui/material' import axios from 'axios' import { Dayjs } from 'dayjs' -import { useRouter } from 'next/navigation' import { useSession } from 'next-auth/react' import { ButtonGray, ButtonUI, Error, Loader, Modal } from '#/shared' @@ -77,7 +77,7 @@ export const LimitModal: React.FC = ({ }} > - Сотрудник {person?.email} + Сотрудник {person?.email} @@ -1,4 +1,3 @@ -import { useSession } from 'next-auth/react' import { changePassword } from '../api/change-password' import { useState } from 'react' import { getModalById, PLATE_CHANGE_PASSWORD } from '#/features/modals' @@ -1,32 +0,0 @@ -import React, { ReactNode } from 'react' -import { Menu, MenuItem } from '@mui/material' - -interface IProps { - children: ReactNode - clicked: boolean - handleClose: () => void - pointY: number - pointX: number -} - -export const ContextMenu = ({ children, pointX, pointY, clicked, handleClose }: IProps) => { - return ( - - {children} - - ) -} @@ -13,7 +13,7 @@ export function useCreateMediaMessage( modelType: 'video' | 'image' | 'audio' | 'voice', device: Device, setMessages: Dispatch>, - mobileScrollContainer: RefObject + mobileScrollContainer: RefObject ) { const [isComplete, setIsComplete] = useState(false) const [createLoading, setCreateLoading] = useState(false) @@ -120,6 +120,14 @@ } } +.fileInputHidden { + display: none; +} + +.fileInputLabel { + cursor: pointer; +} + .textarea { &__file { background: rgba(255, 255, 255, 0.06); @@ -40,10 +40,10 @@ export const ErrorReportPlate = () => { onChange={handleFileChange} type='file' accept='.jpg,.jpeg,.png' - style={{ display: 'none' }} + className={styles.fileInputHidden} id='file-input' /> - + @@ -1,6 +1,6 @@ import React from 'react' import { KeyboardArrowLeft, KeyboardArrowRight } from '@mui/icons-material' -import { Box, Button, MobileStepper, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material' +import { Box, Button, MobileStepper, Table, TableBody, TableCell, TableRow, Typography } from '@mui/material' import CircularProgress from '@mui/material/CircularProgress' import { TranslateFields } from '#/features/get-admin-stats/lib/constants' @@ -7,11 +7,9 @@ export const useLibrarySwiper = (onSlideFalse: ((...args: any) => any) | undefin const keydown = (e: KeyboardEvent) => { if (e.key === 'ArrowRight') { - // e.preventDefault() slideNext() } if (e.key === 'ArrowLeft') { - // e.preventDefault() slidePrev() } } @@ -1,7 +1,7 @@ import { Message } from '#/entities/message' import { Loader } from '#/shared' import Image from 'next/image' -import React, { useEffect } from 'react' +import React from 'react' import styles from './modal-image.module.scss' @@ -1,3 +1,29 @@ +.overlayRoot { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1201; +} + +.overlayRoot_open { + display: block; +} + +.overlayRoot_closed { + display: none; +} + +.overlayBackdrop { + position: absolute; + z-index: 101; + width: 100%; + height: 100%; + background-color: #000000; + opacity: 0.9; +} + .close_block { } .download { @@ -1,74 +0,0 @@ -import React, { Dispatch, SetStateAction, useMemo } from 'react' -import Image from 'next/image' - -import styles from './modal-styles.module.scss' - -interface IProps { - modal: boolean - setModal: Dispatch> - image: string | null -} -export default function FullScreenModal({ modal, setModal, image }: IProps) { - const isSvg = useMemo(() => { - if (!image) return false - return image.includes('.svg') - }, []) - - return ( -

setModal(false)}> - -

- {!isSvg && image ? ( - К сожалению, изображение не загрузилось

- ) : ( - К сожалению, изображение не загрузилось

- )} -

- ) -} @@ -1,30 +0,0 @@ -.close_block{ - position: absolute; - z-index: 105; - cursor: pointer; - right: 25px; - top: 25px; -} - -.image_block{ - position: absolute; - padding: 0 20px; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 105; - margin: auto; - width: fit-content; - height: fit-content; -} - -.image_style{ - position: relative; - width: 100%; - height: 100%; - max-width: 960px; - max-height: 700px; - border-radius: 15px; - object-fit: contain; -} \ No newline at end of file @@ -1,6 +1,6 @@ import React, { FC, useEffect, useState } from 'react' import { useForm } from 'react-hook-form' -import { SubmitErrorHandler } from 'react-hook-form/dist/types/form' +import { SubmitErrorHandler } from 'react-hook-form' import { Box, TextField, Typography } from '@mui/material' import { useSession } from 'next-auth/react' @@ -1,5 +1,4 @@ export const PLATE_CHANGE_PASSWORD = 'plate-change-password' -export const RESEND_INVATION_PASSWORD = 'resend-invation-password' export const ERROR_REPORT = 'error-report' export const LOW_BALANCE_OFFER = 'low-balance-offer' export const SUBSCRIPTION_CHANGE_NOTIFICATION = 'subscription-change-notification' @@ -1 +1,3 @@ -export * from './store.modals' \ No newline at end of file +export type { Modal } from './use-modal' +export { useModal } from './use-modal' +export { modalsSlice } from './modals-slice' @@ -0,0 +1,56 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit' + +export type ModalEntry = { + state: boolean + store: Record +} + +export interface ModalsState { + modals: Record +} + +const emptyEntry = (): ModalEntry => ({ state: false, store: {} }) + +const initialState: ModalsState = { + modals: {}, +} + +export const modalsSlice = createSlice({ + name: 'modals', + initialState, + reducers: { + ensureModal: (state, action: PayloadAction) => { + const id = action.payload + if (!state.modals[id]) { + state.modals[id] = emptyEntry() + } + }, + setModalState: ( + state, + action: PayloadAction<{ id: string; state: boolean; store?: Record }> + ) => { + const { id, state: isOpen, store } = action.payload + if (!state.modals[id]) { + state.modals[id] = emptyEntry() + } + state.modals[id].state = isOpen + if (store !== undefined) { + state.modals[id].store = store + } + }, + setModalStoreProperty: ( + state, + action: PayloadAction<{ id: string; key: string; value: unknown }> + ) => { + const { id, key, value } = action.payload + if (!state.modals[id]) { + state.modals[id] = emptyEntry() + } + state.modals[id].store[key] = value + }, + }, +}) + +export const { ensureModal, setModalState, setModalStoreProperty } = modalsSlice.actions + +export default modalsSlice.reducer @@ -1,78 +0,0 @@ -import { create } from "zustand"; - -type Set = { - (partial: (state: PlatesStore) => Partial): void; -}; - -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; - - store = store ?? {}; - - set(() => ({ - modals: { ...modals, [this.id]: { ...modals[key], state, store } }, - })); - }, - setStoreProperty(key, value) { - const modals = get().modals; - - this.store[key] = value; - - set(() => ({ - modals: { ...modals, [this.id]: { ...modals[key], store: this.store } }, - })); - }, - getStoreProperty(key) { - return this.store[key]; - }, - }; - - 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; -} - -export interface PlatesStore { - modals: Record; - setModal: (key: string) => void; - getModal: (key: string) => Modal; -} - -export const usePlatesStore = create((set, get) => { - const modals: Record = {}; - - 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)) - ); - } - - return { - modals, - setModal, - getModal, - }; -}); @@ -0,0 +1,54 @@ +import { useCallback, useEffect, useMemo } from 'react' + +import { useAppDispatch, useAppSelector } from '#/app/store/store' + +import { ensureModal, setModalState, setModalStoreProperty } from './modals-slice' + +export interface Modal { + id: string + state: boolean + store: Record + setState: (state: boolean, store?: Record) => void + setStoreProperty: (key: string, value: unknown) => void + getStoreProperty: (key: string) => T | undefined +} + +export function useModal(id: string): Modal { + const dispatch = useAppDispatch() + const entry = useAppSelector((state) => state.modals.modals[id] ?? { state: false, store: {} }) + + useEffect(() => { + dispatch(ensureModal(id)) + }, [dispatch, id]) + + const setState = useCallback( + (state: boolean, store?: Record) => { + dispatch(setModalState({ id, state, store })) + }, + [dispatch, id] + ) + + const setStoreProperty = useCallback( + (key: string, value: unknown) => { + dispatch(setModalStoreProperty({ id, key, value })) + }, + [dispatch, id] + ) + + const getStoreProperty = useCallback( + (key: string) => entry.store[key] as T | undefined, + [entry.store] + ) + + return useMemo( + () => ({ + id, + state: entry.state, + store: entry.store, + setState, + setStoreProperty, + getStoreProperty, + }), + [id, entry.state, entry.store, setState, setStoreProperty, getStoreProperty] + ) +} @@ -75,6 +75,10 @@ &_secondary { background-color: #373737; } + + &_customBg { + background-color: var(--template-content-bg, var(--new-ui-main-color)); + } } // &__header { @@ -1,6 +1,5 @@ -import { useEffect } from 'react' import { c } from '#/shared' -import { usePlatesStore } from '../model' +import { useModal } from '../model' import styles from './template.module.scss' import PlusIcon from '#/assets/svg/plus.svg?react' @@ -40,11 +39,7 @@ export default function PlatesTemplate({ contentBackgroundColor, variant = 'primary', }: PlatesTemplateProps) { - const { setModal, getModal } = usePlatesStore() - - const modal = getModal(id) - - useEffect(() => setModal(id), []) + const modal = useModal(id) return (

e.stopPropagation()} > )} -

Регистрируясь, вы соглашаетесь с условиями - + Политики обработки персональных данных и - + Публичной офертой

@@ -245,13 +232,7 @@ export const RegisterEmailForm: React.FC = ({ successLo }} > Есть аккаунт?{' '} - + Войти @@ -1,4 +1,4 @@ -import { Dispatch, SetStateAction, useState, useEffect } from 'react' +import { Dispatch, SetStateAction, useState } from 'react' import { useSession } from 'next-auth/react' import { ResponseGetPersons } from '#/features/invite-person-in-business' @@ -1,23 +0,0 @@ -import { useSession } from 'next-auth/react' -import { resendInvation } from '../api/resend-invation' -import { getModalById, RESEND_INVATION_PASSWORD } from '#/features/modals' -import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' - -export const useResendInvation = () => { - const modal = getModalById(RESEND_INVATION_PASSWORD) - const { showMessage } = useShowDataStore() - const { data } = useSession() - - const resend = async () => { - const response = await resendInvation(modal.getStoreProperty('email')!, data?.access) - - if (response.status == 200) { - showMessage('Приглашение переотправлено!', 'success') - modal.setState(false) - } else { - showMessage(response.data) - } - } - - return [resend] -} @@ -1,4 +0,0 @@ -interface ResponseResendInvation { - data: any, - status: number -} \ No newline at end of file @@ -1 +0,0 @@ -export * from './resend-invation' \ No newline at end of file @@ -1,27 +0,0 @@ -.container { - padding-bottom: 0; - background-color: #373737; -} - -.modal { - min-width: 450px; - width: 100%; - padding-top: 35px; - - &__buttons { - display: flex; - margin-top: 45px; - gap: 10px; - } - &__header { - margin-bottom: 15px; - font-size: 30px; - font-weight: 600; - letter-spacing: -0.02em; - } - &__message { - font-size: 15px; - color: var(--text-color-main); - width: 70%; - } -} @@ -1,32 +0,0 @@ -import { getModalById, RESEND_INVATION_PASSWORD, PlateTemplate } from '#/features/modals' -import styles from './resend-invation.module.scss' -import React from 'react' -import { CommonButton } from '#/shared/ui/button' -import { CommonInput } from '#/shared/ui/common-input' -import { useResendInvation } from '../lib/use-resend-invation' -import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' - -interface ResendInvationPlateProps {} - -export const ResendInvationPlate = ({}: ResendInvationPlateProps) => { - const modal = getModalById(RESEND_INVATION_PASSWORD) - - const [resend] = useResendInvation() - - return ( - -

Переотправить приглашение

При переотправке приглашения у сотрудника будет заменен отправленный пароль.

- resend()}> - Переотправить - - modal.setState(false)}> - Отмена - -

- - ) -} @@ -1 +0,0 @@ -export * from './ui' \ No newline at end of file @@ -1 +0,0 @@ -export const suggestedMessagesList = ['Что такое орбитальная механика?', 'Как приготовить омлет?', 'Кто такие Фиксики?'] @@ -1,35 +0,0 @@ -import React from 'react' -import { Box, Typography } from '@mui/material' - - -interface ISuggestedMessage { - title: string - sendMessage?: (title: string) => void -} - -const SuggestedMessage: React.FC = ({ title, sendMessage }) => { - return ( - sendMessage!(title)} - sx={{ - boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)', - padding: '10px 14px', - backgroundColor: '#3D3D3D', - borderRadius: '8px', - color: '#7F7DF3', - marginTop: 1.5, - cursor: 'pointer', - width: 'fit-content', - '&:hover': { - ' -webkit-transform': 'scale(1.03)', - '-ms-transform': 'scale(1.03)', - ' transform': 'scale(1.03)', - }, - }} - > - {title} - - ) -} - -export default SuggestedMessage @@ -1,33 +0,0 @@ -import React from 'react' -import { Box, Stack, Typography } from '@mui/material' - -import { suggestedMessagesList } from '#/features/send-suggested-message/lib/constants' -import SuggestedMessage from '#/features/send-suggested-message/ui/suggested-message' - -interface IProps { - device: 'mobile' | 'desktop' - sendMessage?: (title: string) => void -} - -export const SuggestedMessages: React.FC = ({ device, sendMessage }) => { - const desktop = device === 'desktop' - - return ( - - Не знаете с чего начать? - Попробуйте, например, вот так: - - {suggestedMessagesList.map((messages) => { - return - })} - - - ) -} @@ -1 +0,0 @@ -export { SuggestedMessages } from '#/features/send-suggested-message/ui/suggested-messages' @@ -1,8 +1,8 @@ -import React, { useEffect } from 'react' +import React from 'react' import styles from './slow-loading.module.scss' import { Loader } from '#/shared' import { CommonButton } from '#/shared/ui/button' -import { signOut, useSession } from 'next-auth/react' +import { signOut } from 'next-auth/react' interface SlowLoadingProps { } @@ -10,3 +10,13 @@ } } } + +.titleActions { + display: flex; + align-items: center; + gap: 20px; +} + +.titleActionsInner { + width: 100%; +} @@ -26,8 +26,8 @@ export default function Title(props: TitleProps) { {props.title} -

{props.rightSlot}

@@ -1,65 +0,0 @@ -//@ts-ignore -import { Options, Step } from 'intro.js' - -export const steps: Step[] = [ - { - element: '.tutorial-chat-gpt', - intro: 'Это рабочее окно. В нем вы сможете отправлять ваши сообщения и просматривать историю чата.', - position: 'left', - title: 'Рабочее окно', - }, - { - element: '.tutorial-input', - intro: 'Вводите сюда свой запрос, в ответ на него ChatGPT предоставит вам нужную информацию.', - position: 'top', - title: 'Сообщения', - }, - { - element: '.tutorial-calc', - intro: 'Этот виджет показывает сколько токенов спишется за ваш текущий запрос.', - position: 'top', - title: 'Сообщения', - }, - { - element: '.tutorial-show-setting', - intro: - 'В виджете фильтров вы можете выбрать тип модели (при наведении на каждую модель отображаются подсказки).' + - ' Обратите внимание на параметры, которые вы можете выставлять самостоятельно (при наведении на них также отображается подсказка).', - position: 'right', - title: 'Фильтры', - }, - { - element: '.t', - intro: 'Для того, чтобы ChatGPT запоминал историю чата и на основании этого давал более точные ответы вы можете добавить сообщения в контекст. Для этого просто нажмите на сообщение. Обратите внимание: в контекст вы должны добавлять только ваши сообщения, а не ответы от ChatGPT. Контекст повышает стоимость запроса !', - position: 'left', - title: 'Что такое контекст?', - }, - { - element: '.tutorial-input', - intro: 'После клика на ВАШЕ соощение оно добавляется в это поле. Чтобы удалить сообщение из контекста также нажмите на него в этом поле. Сейчас в контексте одно сообщение, но вы можете добавлять их сколько угодно. Добавив сообщение в контекст, пишите свой запрос и отправляйте сообщение. Теперь ChatGPT даст лучший ответ на основании ваших предыдущих сообщений.', - position: 'left', - title: 'Контекст', - }, - { - element: '.tutorial-balance.ts', - intro: 'Не забывайте следить за своим балансом. Обратите внимание: измененение модели в фильтрах влияет на стоимость запроса, использование контекста также добавит стоимость запроса.', - position: 'left', - title: 'Баланс', - }, -] - -export const options: Options = { - hidePrev: true, - showBullets: false, - nextLabel: 'Дальше', - prevLabel: 'Предыдущий', - doneLabel: 'Готово', - disableInteraction: true, -} - -export const responseGPT = - 'Для нахождения минимального элемента в массиве предлагаю написать собственную функцию с использованием функции высшего порядка reduce и стандартного метода Math.min():\n' + - '\n' + - 'const numbers = [-94, 87, 12, 0, -67, 32];\n' + - 'const min = (values) => values.reduce((x, y) => Math.min(x, y));\n' + - 'console.log(min(numbers)); // => -94\n' @@ -1,84 +0,0 @@ -import React from 'react' -import { Box, Tooltip, Typography } from '@mui/material' - -import { baseColor } from '#/shared/lib/constants/colors' - -interface ITooltipMy { - begin: () => void - children: React.ReactNode -} - -interface ITooltiptext { - begin: () => void -} -const TooltipText: React.FC = ({ begin }) => { - return ( - - - Как работать с ChatGPT - - - Научитесь работать с ChatGPT за 7 простых шагов! - - - Начать обучение - - - ) -} -const TooltipMy: React.FC = ({ children, begin }) => { - return ( - } - componentsProps={{ - tooltip: { - sx: { - '&.MuiTooltip-tooltip': { - '&.MuiTooltip-tooltipPlacementBottom': { - marginTop: '2px', - }, - '&.MuiTooltip-tooltipPlacementTop': { - marginBottom: '2px', - }, - '&.MuiTooltip-tooltipPlacementLeft': { - marginRight: '24px', - }, - }, - bgcolor: '#2B2828', - borderRadius: '10px', - '& .MuiTooltip-arrow': { - color: '#2B2828', - }, - padding: '15px 20px', - boxShadow: '0px 0px 4px rgba(0, 0, 0, 0.04), 0px 4px 32px rgba(0, 0, 0, 0.16)', - }, - }, - }} - > - {children} - - ) -} - -export default TooltipMy @@ -1,37 +0,0 @@ -import React from 'react' -import { Steps } from 'intro.js-react' -import Image from 'next/image' - -import { TutorialContext } from '../../tutorial-context/tutorial-context' -import { options, steps } from '../lib/constants' - -import TooltipMy from './tooltip' - -export const Tutorial = () => { - const [enabled, setEnabled] = React.useState(false) - - const context = React.useContext(TutorialContext) - const onExit = () => { - setEnabled(false) - } - - return ( - <> - setEnabled(true)}> - {''}

- - - { - // @ts-ignore - context?.setStep(e) - }} - options={options} - enabled={enabled} - steps={steps} - onExit={onExit} - initialStep={0} - /> - - ) -} @@ -1 +0,0 @@ -export { Tutorial } from './ui/tutorial' @@ -1,50 +0,0 @@ -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' - -export interface Theme { - templates: Template[] | null - generation: Message[] | null -} - -const initialState: Theme = { - templates: null, - generation: null, -} - -export const loadTemplates = createAsyncThunk( - 'copywrite/loadTemplates', - async (token?: string): Promise => { - return await CopywriteProxy.getTemplates(token) - } -) - -export const loadGeneration = createAsyncThunk( - 'copywrite/loadGeneration', - async (token?: string): Promise => { - return await CopywriteProxy.getGeneration(token) - } -) - -export const copySlice = createSlice({ - name: 'copySlice', - initialState, - reducers: { - loadTemplates: (state, action) => {}, - }, - extraReducers: (builder) => { - builder - .addCase(loadTemplates.fulfilled, (state, action) => { - state.templates = action.payload - }) - .addCase(loadGeneration.fulfilled, (state, action) => { - state.generation = action.payload - }) - }, -}) - -export const {} = copySlice.actions - -export default copySlice.reducer @@ -1,72 +0,0 @@ -import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react' -import { useRouter } from 'next/router' -import { useSession } from 'next-auth/react' - -import { useAppDispatch, useAppSelector } from '#/app/store/store' -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 { Message } from '#/shared/lib/types/model' - -interface UseCopy { - currentTemplate: Template | null - generations: Message[] | null - pickGeneration: Message | null - setPickGeneration: Dispatch> - createEmpty: () => void -} - -export const useCopy = (): UseCopy => { - const [pickGeneration, setPickGeneration] = useState(null) - - const { data } = useSession() - - const { query, push, pathname } = useRouter() - - const templates = useAppSelector((state) => state.copy.templates) - - const generations = useAppSelector((state) => state.copy.generation) - - const dispatch = useAppDispatch() - - const getId = () => { - const id = query['id'] - - if (id) { - return Number(id) - } - } - - const createEmpty = () => { - setPickGeneration({ - content: '', - uid: '123', - created_at: '123', - file: null, - info: null, - from_model: false, - elapsed_time: '12', - is_favourite: false, - is_sent: false, - }) - } - - useEffect(() => { - if (data?.access) { - dispatch(loadTemplates(data.access)) - dispatch(loadGeneration(data.access)) - } - }, [data?.access]) - - const currentTemplate = useMemo(() => { - const id = getId() - const foundTemplate = templates?.find((el) => el.id === id) - if (foundTemplate) { - return foundTemplate - } - - return emptyTemplate - }, [templates]) - - return { currentTemplate, generations, pickGeneration, setPickGeneration, createEmpty } -} @@ -37,51 +37,10 @@ const getStatistic = async (type: string, interval: string, token?: string) => { } export const useStats = () => { - - // let dataLine = { - // datasets: [ - // { - // fill: true, // Включить заливку под графиком - // backgroundColor: (context: any) => { - // const chart = context.chart - // const { ctx, chartArea } = chart - - // if (!chartArea) { - // // Линейный градиент не применяется, если область графика не доступна - // return null - // } - - // const gradient = ctx.createLinearGradient(chartArea.left, chartArea.bottom, chartArea.left, chartArea.top) - - // gradient.addColorStop(0.68, 'rgba(130, 128, 255, 0.20)') - // gradient.addColorStop(1, 'rgba(130, 128, 255, 0.10)') - - // return gradient - // }, - // borderWidth: 1, // Ширина линии графика - // borderColor: '#8280FF', - // pointRadius: 7, // Размер точек - // pointBackgroundColor: 'white' // Цвет точек - // pointBorderWidth: 1, // Ширина обводки точек - // pointBorderColor: '#8280FF', // Цвет обводки точек - // hoverRadius: 7, // Размер точек при наведении - // hoverBackgroundColor: '#8280FF', // Цвет точек при наведении - // hoverBorderColor: 'white', // Цвет обводки точек при наведении - // }, - // ], - // } - const { data: session } = useSession() const [timeForStats, setTimeForStats] = useState('current_month') - // useEffect(() => { - - // setStatsByDays(prev => { - // return {prev.datasets[0]} - // }) - // },[theme]) - const [statsByModel, setStatsByModels] = useState(dataLine) const [statsByType, setStatsByType] = useState(dataLine) @@ -0,0 +1,11 @@ +.yandexIcon { + margin-right: 15px; +} + +.yandexButton { + transition: opacity 0.3s ease-in-out; + + &:hover { + opacity: 0.7; + } +} @@ -1,17 +1,16 @@ import { Button } from '@mui/material' import { signIn } from 'next-auth/react' import Image from 'next/image' -import React, { useState } from 'react' +import React from 'react' + +import styles from './yandex-auth-button.module.scss' interface YandexAuthButtonProps {} export const YandexAuthButton = ({}: YandexAuthButtonProps) => { - const [hovered, setHovered] = useState(false) - return ( ) @@ -4,8 +4,8 @@ import YandexProvider from 'next-auth/providers/yandex' import { getAll } from '#/entities/user-account/model/user-type-slice' -import { AuthConstants, ERROR_MAPPING, ERROR_YANDEX_MAPPING } from './constants' -import { AuthorizationProxy } from './proxy' +import { AuthConstants, ERROR_MAPPING, ERROR_YANDEX_MAPPING } from '#/shared/lib/auth/constants' +import { AuthorizationProxy } from '#/shared/lib/auth/authorization-proxy' const AuthProxy = new AuthorizationProxy() @@ -29,7 +29,7 @@ export default function Document() {

@@ -1,22 +0,0 @@ -import { useEffect, useState } from 'react' -const useContextMenu = () => { - const [clicked, setClicked] = useState(false) - const [points, setPoints] = useState({ - x: 0, - y: 0, - }) - useEffect(() => { - const handleClick = () => setClicked(false) - document.addEventListener('click', handleClick) - return () => { - document.removeEventListener('click', handleClick) - } - }, []) - return { - clicked, - setClicked, - points, - setPoints, - } -} -export default useContextMenu @@ -1,6 +1,7 @@ -import dynamic from 'next/dynamic'; +import dynamic from 'next/dynamic' +import type { ReactElement } from 'react' -type ClientOnlyProps = { children: JSX.Element }; +type ClientOnlyProps = { children: ReactElement } const ClientOnly = (props: ClientOnlyProps) => { const { children } = props; @@ -1,10 +1,9 @@ import axios from 'axios' import { JWT } from 'next-auth/jwt' +import { AuthConstants } from '#/shared/lib/auth/constants' import { getApiUrl } from '#/shared/lib/constants' -import { AuthConstants } from './constants' - export class AuthorizationProxy { public readonly loginByEmail = async (email: string, password: string) => { return await fetch(getApiUrl() + '/auth/login', { @@ -1,4 +1,3 @@ -import type { Env } from '#/shared/lib/env-types' import { getServerEnv } from '#/shared/lib/server-env' const env = getServerEnv() @@ -18,7 +17,7 @@ export abstract class AuthConstants { public static readonly sessionTime = Number(env.NEXT_SESSION_TIME ?? env.NEXT_PUBLIC_SESSION_TIME) * 1000 - + private static readonly expiresTime = this.sessionTime public static readonly getExpiresDate = () => Date.now() + this.expiresTime @@ -33,10 +32,10 @@ export const ERROR_MAPPING: Record = { export const ERROR_YANDEX_MAPPING: Record = { "Your credentials aren't allowed": 'yandex_credentials_not_allowed', - 'Invalid client_id parameter value.': 'yandex_client_id_not_correct', + 'Invalid client_id parameter value.': 'yandex_client_id_not_correct', } export const ERRROR_YANDEX_TRANSLATE_MAPPING: Record = { - 'yandex_credentials_not_allowed': 'Неверные учетные данные', - 'yandex_client_id_not_correct': 'Ошибка сервера (скоро поправим)', + yandex_credentials_not_allowed: 'Неверные учетные данные', + yandex_client_id_not_correct: 'Ошибка сервера (скоро поправим)', } @@ -1,4 +1,4 @@ -import { RegisterOptions } from 'react-hook-form/dist/types/validator' +import { RegisterOptions } from 'react-hook-form' const EMAIL_REGEXP = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu @@ -1,31 +0,0 @@ -import { Dispatch, SetStateAction, useEffect, useState } from 'react' - -export const useAutoLoad = (desktop: boolean): [boolean, Dispatch>] => { - const [fetching, setFetching] = useState(true) - - useEffect(() => { - const isMobile = desktop ? document : document.getElementById('messages-list') - - const scrollHandler = (e: any) => { - if ( - e.target.documentElement.scrollHeight - (e.target.documentElement.scrollTop + window.innerHeight) < - 100 - ) { - setFetching(true) - } - } - const scrollHandlerMobile = (e: any) => { - if (!desktop && e.target.scrollHeight - (e.target.scrollTop + window.innerHeight) < 100) { - setFetching(true) - } - } - - isMobile?.addEventListener('scroll', desktop ? scrollHandler : scrollHandlerMobile) - - return function () { - isMobile?.removeEventListener('scroll', desktop ? scrollHandler : scrollHandlerMobile) - } - }, [desktop]) - - return [fetching, setFetching] -} @@ -1,7 +1,7 @@ import React from 'react' export const useAutoScroll = (depend: any) => { - const refScroll = React.useRef() as any + const refScroll = React.useRef(null) React.useEffect(() => { const block = refScroll.current @@ -1,45 +1,50 @@ -import React, { useState } from 'react' -import { create } from 'zustand' +import { useCallback, useRef } from 'react' -export type Variant = 'error' | 'success' +import { + hide, + setMessage, + setOpened, + setVariant, + show, + ToastVariant, +} from '#/app/store/toast-slice' +import { useAppDispatch, useAppSelector } from '#/app/store/store' -interface ShowDataStore { - message: string - variant: Variant - isOpened: boolean - setOpened: (isOpened: boolean) => void - setMessage: (message: string) => void - setVariant: (variant: Variant) => void - showMessage: (message: string, variant?: Variant) => void -} +export type Variant = ToastVariant -export const useShowDataStore = create((set, get) => { - function setVariant(variant: Variant = 'error') { - set({ ...get(), variant }) - } +const TOAST_DURATION_MS = 5000 - function setMessage(message: string) { - set({ ...get(), message }) - } +export const useShowDataStore = () => { + const dispatch = useAppDispatch() + const { message, variant, isOpened } = useAppSelector((state) => state.toast) + const hideTimeoutRef = useRef | null>(null) - function setOpened(isOpened: boolean) { - set({ ...get(), isOpened }) + const clearHideTimeout = () => { + if (hideTimeoutRef.current) { + clearTimeout(hideTimeoutRef.current) + hideTimeoutRef.current = null + } } - function showMessage(message: string = 'Произошла ошибка', variant: Variant = 'error') { - setVariant(variant) - setOpened(true) - setMessage(message) - setTimeout(() => setOpened(false), 5000) - } + const showMessage = useCallback( + (messageText: string = 'Произошла ошибка', messageVariant: Variant = 'error') => { + clearHideTimeout() + dispatch(show({ message: messageText, variant: messageVariant })) + hideTimeoutRef.current = setTimeout(() => { + dispatch(hide()) + hideTimeoutRef.current = null + }, TOAST_DURATION_MS) + }, + [dispatch] + ) return { - message: '', - variant: 'error', - isOpened: false, - setOpened, - setVariant, - setMessage, + message, + variant, + isOpened, + setOpened: (value: boolean) => dispatch(setOpened(value)), + setMessage: (value: string) => dispatch(setMessage(value)), + setVariant: (value: Variant) => dispatch(setVariant(value)), showMessage, } -}) +} @@ -1,3 +1,7 @@ +.clickableIcon { + cursor: pointer; +} + .wrap { width: 85%; @@ -1,16 +0,0 @@ -.badge { - display: inline-block; - padding: 3px 10px; - &_primary{ - color: var(--air-color); - font-weight: 500; - background-color: rgba($color: #8280ff, $alpha: 0.1); - border-radius: 5px; - } - - &_outline{ - color: rgba($color: #A4AAB5, $alpha: 0.6); - border: 1px solid rgba($color: #A4AAB5, $alpha: 0.6); - border-radius: 10px; - } -} \ No newline at end of file @@ -1,18 +0,0 @@ -import React from 'react' -import styles from './common-badge.module.scss' -import { c } from '#/shared/lib/helpers' - -export type CommonBagdeVariant = 'primary' | 'outline' - -interface CommonBagdeProps extends React.HTMLAttributes { - variant?: CommonBagdeVariant - className?: string -} - -export const CommonBagde = ({ variant = 'primary', children, className, ...props }: CommonBagdeProps) => { - return ( -

- {children} -

- ) -} @@ -1 +0,0 @@ -export * from './common-badge' \ No newline at end of file @@ -1 +0,0 @@ -export * from './ui' \ No newline at end of file @@ -1,184 +0,0 @@ -import * as React from 'react' -import Box from '@mui/material/Box' -import CardContent from '@mui/material/CardContent' -import CardMedia from '@mui/material/CardMedia' -import Stack from '@mui/material/Stack' -import Typography from '@mui/material/Typography' -import Image from 'next/image' -import Link from 'next/link' - -import { translateTypeModel } from '#/shared' - -export const Card: React.FC = ({ - uid, - title, - image_link, - link, - languages, - description, - model_config, - device, - addToFavorites, - is_favourite, - deleteFromFavorites, -}) => { - const desktop = device === 'desktop' - - return ( - - - - - - - - {translateTypeModel(model_config.model_type)} - - - {languages.map((lang: any) => { - if (lang === 'Другие') { - return - } - return ( - - {lang} - - ) - })} - - - - {title} - - - {description} - - - - { - e.preventDefault() - deleteFromFavorites(uid) - } - : (e) => { - e.preventDefault() - addToFavorites(uid) - } - } - > - {is_favourite ? ( - {'1'}

- ) : ( - {'1'}

- )} - - - - - - - ) -} @@ -1,98 +0,0 @@ -import * as React from 'react' -import Box from '@mui/material/Box' -import CardContent from '@mui/material/CardContent' -import CardMedia from '@mui/material/CardMedia' -import Stack from '@mui/material/Stack' -import Typography from '@mui/material/Typography' - -import { translateTypeModel } from '#/shared' -import { Device } from '#/shared/lib/types/entities' - -export const UnActiveCard: React.FC = ({ title, image_link, languages, description, model_config, device }) => { - const desktop = device === 'desktop' - - return ( - - - - - - - {translateTypeModel(model_config.model_type)} - - - - - {title} - - - {description} - - - - - - - ) -} @@ -1,2 +0,0 @@ -export { Card } from './ui/card' -export { UnActiveCard } from './ui/un-active-card' @@ -1,7 +1,7 @@ import { c } from '#/shared/lib/helpers' import { FieldError } from 'react-hook-form' import styles from './common-input.module.scss' -import React, { ForwardedRef, forwardRef, useEffect } from 'react' +import React, { forwardRef } from 'react' export type InputVariant = 'outline' | 'primary' @@ -1,70 +0,0 @@ -.expandableButton { - display: flex; - align-items: center; - justify-content: center; - background-color: white; - border-radius: 100px; - width: 40px; - height: 40px; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1); - transition: width 0.3s ease-in-out; - cursor: pointer; - position: relative; - - &:hover { - width: 140px; - padding: 12px; - - .expandableButton__icon { - opacity: 0; - display: none; - } - - .expandableButton__text { - opacity: 1; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - animation: fadein 0.6s ease-in-out; - display: block; - } - } - - &__icon { - color: var(--air-color); - display: flex; - align-items: center; - justify-content: center; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - font-weight: 600; - font-size: 14px; - transition: opacity 0.3s ease-in-out; - } - - &__text { - position: absolute; - color: var(--air-color); - font-weight: 500; - font-size: 14px; - opacity: 0; - display: none; - min-width: max-content !important; - white-space: nowrap; - } -} - -@keyframes fadein { - 0% { - opacity: 0; - } - 50% { - opacity: 0; - } - 100% { - opacity: 1; - } -} @@ -1,46 +0,0 @@ -import React from 'react' -import Link from 'next/link' - -import styles from './expandable-button.module.scss' - -interface ExpandableButtonProps { - shortText: string - expandedText: string - href?: string - onClick?: () => void - className?: string -} - -export function ExpandableButton({ - shortText, - expandedText, - href, - onClick, - className -}: ExpandableButtonProps) { - const buttonContent = ( - <> -

- {shortText} -

- {expandedText} - - ) - - if (href) { - return ( - - {buttonContent} - - ) - } - - return ( -

- {buttonContent} -

- ) -} @@ -1 +0,0 @@ -export { ExpandableButton } from './expandable-button' @@ -1,4 +1,3 @@ -import Link from 'next/link' import { CommonButton } from '../../button' import styles from './info-page-template.module.scss' import Image from 'next/image' @@ -1,188 +0,0 @@ -import React, { FC, useMemo, useRef } from 'react' -import { Box, InputAdornment, TextField, Typography } from '@mui/material' -import CircularProgress from '@mui/material/CircularProgress' -import IconButton from '@mui/material/IconButton' -import Stack from '@mui/material/Stack' -import { TextFieldProps } from '@mui/material/TextField/TextField' -import Image from 'next/image' - -import { Calculation } from '#/features/calculation-tokens-gpt' -import { styleInputWithoutBorderFocus } from '#/shared/ui/input' - -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 -} -export const InputImagesModels: FC = ({ - openFilters, - loading, - requestImage, - value, - image, - onChange, - wonderMe, - desktop, - count, - quality, - imageLoad, - unpinImage, -}) => { - - const isCalculatePrice = useMemo(() => quality && count && desktop, []) - - const ref = useRef(null) - - const LoadImage = () => { - if (!imageLoad || loading) { - return null - } - - if (image) { - return ( - - - {`Изображение ${image.name.slice(0, 9)} загружено! Нажмите чтобы открепить.`} - - - ) - } - - return ( - <> - -

(ref.current! as any).click()} - height={23} - width={23} - alt='Загрузка изображения' - className='pointer' - /> - - ) - } - - const WonderMe = () => { - if (!wonderMe || !desktop) { - return null - } - - return

- } - - const SendBtn = () => { - if (loading) { - return ( - - ) - } - - const src = `/svg/chatgpt/send_message_dark.svg` - - return ( - {'Отправить

- ) - } - - return ( - { - if (e.key === 'Enter') { - requestImage() - } - }} - InputLabelProps={{ - style: { - color: '#868686', - lineHeight: '21px', - fontSize: '15px', - fontWeight: '400px', - borderRadius: '13px', - }, - }} - value={value} - onChange={onChange} - InputProps={{ - endAdornment: ( - - - {!desktop && ( - - Error

- - )} - - - - - - ), - }} - /> - ) -} @@ -1,3 +1,7 @@ +.searchIcon { + margin-right: 15px; +} + .search { div { border-radius: 15px; @@ -14,7 +14,7 @@ export const Search = (props: TextFieldProps) => { {...props} InputProps={{ endAdornment: ( -

), }} /> @@ -0,0 +1,3 @@ +.sliderFullWidth { + width: 100%; +} @@ -2,7 +2,9 @@ import React from 'react' import { Typography } from '@mui/material' import Box from '@mui/material/Box' -import { PrettoSliderDark } from '#/widgets/filters-gpt/ui/filters' +import { PrettoSliderDark } from '#/widgets/filters-gpt/ui/pretto-slider' + +import styles from './slider.module.scss' export const Slider = ({ value, @@ -41,7 +43,7 @@ export const Slider = ({ { width?: string | number height?: string | number @@ -26,7 +28,13 @@ export function SvgIcon({ url, color, width, height, ...props }: SvgIconProps) { return (

= ({ const tapMode = Boolean(tapToOpenOnMobile && isTouchPrimary) const [tapOpen, setTapOpen] = useState(false) - const triggerSpanStyle: React.CSSProperties | undefined = { - ...(fullWidthTrigger ? { display: 'flex', width: '100%', minWidth: 0 } : {}), - ...(wrapperWidth ? { display: 'block', width: wrapperWidth, maxWidth: '100%', minWidth: 0 } : {}), - } + const triggerSpanStyle: React.CSSProperties | undefined = wrapperWidth + ? { display: 'block', width: wrapperWidth, maxWidth: '100%', minWidth: 0 } + : undefined const tooltip = ( = ({ placement={placement} > void - isAgreeError?: boolean - register?: UseFormRegister - name?: string - isEmailWhite: boolean -} - -export const CheckBoxAgreeWithRules: React.FC = ({ - isAgree, - changeAgree, - isAgreeError, - name, - register, - isEmailWhite, -}) => { - return ( - <> - - - - {' '} - Я соглашаюсь с условиями{' '} - - Политики обработки персональных данных - {' '} - и{' '} - - Публичной офертой - - - - {isAgreeError && ( - - Для продолжения примите соглашение - - )} - - ) -} @@ -1,235 +0,0 @@ -import * as React from 'react' -import { Box, Slider, Stack, Typography } from '@mui/material' -import Checkbox, { checkboxClasses } from '@mui/material/Checkbox' -import FormControlLabel from '@mui/material/FormControlLabel' -import FormGroup from '@mui/material/FormGroup' -import Menu from '@mui/material/Menu' -import MenuItem from '@mui/material/MenuItem' - - -interface IDalleFilterMenu { - anchorEl: null | HTMLElement - open: boolean - closeMenu: Function - format: string - changeFormat: Function - numberImages: number | number[] | undefined - sliderChange: Function -} - -export const DalleFilterMenu: React.FC = ({ - anchorEl, - closeMenu, - format, - changeFormat, - numberImages, - sliderChange, - open, -}) => { - return ( - closeMenu()} - MenuListProps={{ 'aria-labelledby': 'dalle-filter-button' }} - PaperProps={{ - sx: { - backgroundColor: '#151518', - }, - }} - > - - - - Формат - - - - - changeFormat('256x256')} - inputProps={{ - 'aria-label': 'controlled', - }} - sx={{ - [`&, &.${checkboxClasses.checked}`]: { - color: '#7F7DF3', - }, - [`&, &.${!checkboxClasses.checked}`]: { - color: '#7F7DF3', - }, - marginLeft: 2.5, - marginRight: 1, - width: '1em', - height: '1em', - }} - /> - } - label={ - - 256x256 - - } - /> - - - - - changeFormat('512x512')} - inputProps={{ - 'aria-label': 'controlled', - }} - sx={{ - [`&, &.${checkboxClasses.checked}`]: { - color: '#7F7DF3', - }, - [`&, &.${!checkboxClasses.checked}`]: { - color: '#7F7DF3', - }, - marginLeft: 2.5, - marginRight: 1, - width: '1em', - height: '1em', - }} - /> - } - label={ - - 512x512 - - } - /> - - - - - changeFormat('1024x1024')} - inputProps={{ - 'aria-label': 'controlled', - }} - sx={{ - [`&, &.${checkboxClasses.checked}`]: { - color: '#7F7DF3', - }, - [`&, &.${!checkboxClasses.checked}`]: { - color: '#7F7DF3', - }, - marginLeft: 2.5, - marginRight: 1, - width: '1em', - height: '1em', - }} - /> - } - label={ - - 1024x1024 - - } - /> - - - - - - Изображений - - - {numberImages} - - - - - - За одну генерацию - - - - sliderChange(e, current)} - max={10} - min={1} - step={1} - marks - sx={{ - width: '15vh', - color: '#7F7DF3', - marginLeft: 1, - marginRight: 1, - }} - /> - - - - ) -} @@ -0,0 +1,13 @@ +.errorIcon { + margin-top: 2.5px; +} + +.errorSnackbar { + z-index: 100000; + max-width: 335px; +} + +.errorSnackbarDesktop { + z-index: 100000; + max-width: 500px; +} @@ -7,12 +7,14 @@ import { CSSTransition } from 'react-transition-group' import { useShowDataStore } from '../lib/hooks/use-show-data' import SuccessSvg from '#/assets/svg/success.svg?react' +import styles from './error.module.scss' + export interface IError { handleClose?: () => void } const ErrorIcon = () => { - return {''}

+ return

} export const Error: React.FC = ({ handleClose }) => { @@ -23,10 +25,7 @@ export const Error: React.FC = ({ handleClose }) => { return ( void; filetrs: React.ReactNode }) { - const isDesktop = useMediaQuery('(min-width: 1025px)') - - if (isDesktop) { - return ( - - {props.filetrs} - - ) - } - - return ( - props.onClose(false)}> - - {props.filetrs} - - - ) -} @@ -1,5 +1,5 @@ import React from 'react' -import { RegisterOptions } from 'react-hook-form/dist/types/validator' +import { RegisterOptions } from 'react-hook-form' import { TextField } from '@mui/material' import { TextFieldProps } from '@mui/material/TextField/TextField' @@ -1,51 +0,0 @@ -import React from 'react' -import { Card, CardMedia } from '@mui/material' -import Stack from '@mui/material/Stack' -import Typography from '@mui/material/Typography' -import { getRandomImage } from '../lib/helpers' - - -export const RandomImage = () => { - const refImage = React.useRef(getRandomImage()) - - return ( - - - - - Midjourney - - - by honeynek - - - - - ) -} @@ -0,0 +1,3 @@ +.selectTransparent { + background-color: transparent; +} @@ -4,6 +4,8 @@ import { MenuItem, Select, SelectChangeEvent, Stack, Typography } from '@mui/mat import { baseColor } from '#/shared/lib/constants/colors' +import styles from './select.module.scss' + interface ISelect { value: any onChange: (e: SelectChangeEvent) => void @@ -43,9 +45,7 @@ export const SelectUI: React.FC = ({ }, }, }} - style={{ - backgroundColor: 'transparent', - }} + className={styles.selectTransparent} sx={{ boxShadow: 'none', borderRadius: '13px', @@ -1,33 +0,0 @@ -import { Box, Typography } from '@mui/material' -import Image from 'next/image' -import Link from 'next/link' - -export const TelegramBlock = () => { - return ( - - -

- - Бесплатные токены - - - Получите 5 токенов за подписку на наш телеграм канал! - - - - Подписаться - - - - - ) -} @@ -0,0 +1,6 @@ +.freeTokensAlert { + background: linear-gradient(91.87deg, #7f7df3 0%, #d372a1 95.23%); + color: white; + border-radius: 10px; + padding: 7px 16px; +} @@ -3,6 +3,8 @@ import CloseIcon from '@mui/icons-material/Close' import { Alert, Collapse, IconButton } from '@mui/material' import Link from 'next/link' +import styles from './tooltip-free-tokens.module.scss' + export const TooltipFreeTokens = () => { const [open, setOpen] = React.useState(() => { if (typeof window !== 'undefined') { @@ -39,12 +41,7 @@ export const TooltipFreeTokens = () => { { @@ -457,7 +459,7 @@ const Account: NextPageWithLayout = () => { onClick={changePassword} sx={{ marginTop: '20px' }} text={'Изменить пароль'} - style={{ width: '150px' }} + className={accountStyles.changePasswordButton} /> @@ -470,11 +472,7 @@ const Account: NextPageWithLayout = () => { onClick={() => setConfirmDeleteModal(true)} sx={{ marginTop: '20px' }} text={'Удалить аккаунт'} - style={{ - width: '100%', - backgroundColor: 'rgba(255, 35, 114, 0.10)', - color: '#FF2372', - }} + className={accountStyles.deleteAccountButton} /> @@ -4,6 +4,7 @@ import Image from 'next/image' import { useSession } from 'next-auth/react' import { TooltipCustom } from '#/shared' +import styles from '#/shared/styles/api-keys.module.scss' import { getApiUrl } from '#/shared/lib/constants' import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' import { InputStyleSmallDark } from '#/shared/ui/input' @@ -135,7 +136,7 @@ export const CopyButton: React.FC<{ src={'/svg/copy.svg'} width={20} height={20} - style={{ cursor: 'pointer' }} + className={styles.clickableIcon} alt={'copy'} /> @@ -166,7 +166,7 @@ const KeyRow: React.FC = ({ id, name, keyValue, limit, createdAt, e onDelete(name)} - style={{ cursor: 'pointer' }} + className={styles.clickableIcon} src='/svg/main_menu/trash.svg' width={20} height={20} @@ -120,7 +120,7 @@ const KeyCard: React.FC = ({ id, name, keyValue, limit, createdAt, onDelete(name)} - style={{ cursor: 'pointer' }} + className={styles.clickableIcon} src='/svg/main_menu/trash.svg' width={20} height={20} @@ -16,6 +16,23 @@ } } +.loaderCenter { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.messagesWrap { + position: relative; + border-radius: 13px; +} + +.scrollAnchor { + position: absolute; + top: 300px; +} + .staticTabsWrapper { display: flex; align-items: center; @@ -264,18 +264,11 @@ const AudioModelPage: NextPageWithLayout = () => { ) : (

{ className={'smallScroll'} > -

setPrompt(content)} /> @@ -0,0 +1,17 @@ +.closeLink { + position: absolute; + top: 45px; + right: 7%; + cursor: pointer; + font-size: 17px; +} + +.linkAccent { + color: #7f7df3; + font-size: 17px; + text-decoration: none; +} + +.submitButton { + margin-top: 18px; +} @@ -9,6 +9,8 @@ import { getApiUrl } from '#/shared/lib/constants' import { getDeviceType, getRandomImage } from '#/shared/lib/helpers' import { NextPageWithLayout } from '#/pages/_app' +import styles from './change-password.module.scss' + const ChangePassword: NextPageWithLayout = () => { const device = getDeviceType() @@ -90,16 +92,7 @@ const ChangePassword: NextPageWithLayout = () => { backgroundColor: '#373737', }} > - + {''}

{desktop && ( @@ -161,7 +154,7 @@ const ChangePassword: NextPageWithLayout = () => { > Ваш пароль успешно изменён! - + Войти в аккаунт @@ -251,9 +244,7 @@ const ChangePassword: NextPageWithLayout = () => { ) : ( - + { marginTop: '15px', }} > - + Зарегистрироваться @@ -356,7 +332,7 @@ const Login: NextPageWithLayout = () => { }} >

{ }} >

{ 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)', - }} + className={styles.promoDashboardImage} /> )} @@ -151,4 +151,12 @@ &__fileInfo svg { color: rgba(245, 245, 247, 0.85); } +} + +.fileInputHidden { + display: none; +} + +.fileInputLabel { + cursor: pointer; } \ No newline at end of file @@ -37,10 +37,10 @@ const ReportsMobile: NextPageWithLayout = () => { onChange={handleFileChange} type='file' accept='.jpg,.jpeg,.png' - style={{ display: 'none' }} + className={styles.fileInputHidden} id='report-file-input' /> - + @@ -0,0 +1,7 @@ +.closeLink { + position: absolute; + top: 45px; + right: 7%; + cursor: pointer; + font-size: 17px; +} @@ -5,12 +5,14 @@ import Button from '@mui/material/Button' import axios from 'axios' import Image from 'next/image' import Router from 'next/router' -import { Error, Input } from '#/shared' +import { Input } from '#/shared' import { getApiUrl } from '#/shared/lib/constants' import { getDeviceType, getRandomImage } from '#/shared/lib/helpers' import { NextPageWithLayout } from '#/pages/_app' import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' +import styles from './reset.module.scss' + const Reset: NextPageWithLayout = () => { const device = getDeviceType() @@ -120,16 +122,7 @@ const Reset: NextPageWithLayout = () => { set_Email(event.target.value)} type={'email'} fullWidth /> - + {''}

@@ -56,7 +56,7 @@ export const CurrentPlanAndBalance = ({ return ( - + { + const { showMessage } = useShowDataStore() + + const copyEmail = useCallback(async () => { + try { + await navigator.clipboard.writeText(contactEmail) + showMessage('Почта скопирована', 'success') + } catch { + showMessage('Не удалось скопировать', 'error') + } + }, [contactEmail, showMessage]) + + return ( + +

+ +

У вас указана индивидуальная подписка!

+ По вопросам платежей, тарификации или отключения индивидуальной подписки обращайтесь по адресу —{' '} + + + + +

+ + + Написать на почту + + + + + ) +} @@ -12,6 +12,7 @@ import { balanceSelector } from '#/shared/lib/selectors' import { IFeatures, IOffer } from '../api' import { CurrentPlanAndBalance } from './current-plan-and-balance' +import { IndividualSubscriptionNotice } from './individual-subscription-notice' import { FaqSection } from './faq-section' import { FeaturesSection } from './features-section' import { PlansSection } from './plans-section' @@ -87,6 +88,29 @@ export const SubscriptionRecurrentPage = () => { const planTokensFormatted = commaSeparated(Math.round(Number(planTokenLimit) || 0)) + if (isIndividual) { + return ( + + + Подписка + + + + + + + + + ) + } + return ( @@ -27,6 +27,14 @@ flex: 1; border-radius: 15px; + &_hidden { + display: none; + } + + &_corporate { + display: block; + } + .subTitle { font-weight: 600; font-style: Semi Bold; @@ -16,6 +16,23 @@ } } +.loaderCenter { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.messagesWrap { + position: relative; + border-radius: 13px; +} + +.scrollAnchor { + position: absolute; + top: 300px; +} + .staticTabsWrapper { display: flex; @@ -262,23 +262,15 @@ const VideoModelPage: NextPageWithLayout = () => { ) : (

{ className={'smallScroll'} > -

Ваш браузер не поддерживает аудио. @@ -145,3 +145,11 @@ border-color: #827fff; } } + +.iconBlock { + display: block; +} + +.selectTransparent { + background-color: transparent; +} @@ -438,10 +438,10 @@ export function VoiceCloneSelect({ width={18} height={14} alt='' - style={{ display: 'block' }} + className={styles.iconBlock} /> ) : ( - + )} - + ) : null} @@ -567,9 +567,7 @@ export function VoiceCloneSelect({ ) }} MenuProps={VOICE_SELECT_MENU_PROPS} - style={{ - backgroundColor: 'transparent', - }} + className={styles.selectTransparent} sx={selectSx} fullWidth > @@ -16,6 +16,35 @@ } } +.loaderCenter { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.messagesWrap { + position: relative; + border-radius: 13px; +} + +.messagesWrap_compact { + flex: 1; + display: flex; + flex-direction: column; + min-height: 0; +} + +.scrollAnchor { + position: absolute; + top: 300px; +} + +.tabsFullWidth { + display: block; + width: 100%; +} + .staticTabsWrapper { display: flex; align-items: center; @@ -249,7 +249,7 @@ const VoiceCloningModelPage: NextPageWithLayout = () => {

{desktop && ( - + )} @@ -257,7 +257,7 @@ const VoiceCloningModelPage: NextPageWithLayout = () => { {!desktop && ( - + @@ -339,14 +339,7 @@ const VoiceCloningModelPage: NextPageWithLayout = () => { generationsInitialLoading && scope === 'playground' && styles.container_active )} > -

@@ -399,25 +392,12 @@ const VoiceCloningModelPage: NextPageWithLayout = () => { generationsInitialLoading && scope === 'playground' && styles.container_active )} > -

{ className={'smallScroll'} > -

{hasGenerations ? ( { setPersons(personsList) @@ -1,6 +1,6 @@ import React, { FC, useEffect, useState } from 'react' import { useForm } from 'react-hook-form' -import { SubmitErrorHandler } from 'react-hook-form/dist/types/form' +import { SubmitErrorHandler } from 'react-hook-form' import { Box, TextField, Typography } from '@mui/material' import Paper from '@mui/material/Paper' import Table from '@mui/material/Table' @@ -9,7 +9,6 @@ import TableCell from '@mui/material/TableCell' import TableContainer from '@mui/material/TableContainer' import TableHead from '@mui/material/TableHead' import TableRow from '@mui/material/TableRow' -import axios, { AxiosResponse } from 'axios' import Image from 'next/image' import { useSession } from 'next-auth/react' @@ -35,10 +34,10 @@ import { Select, } from '#/shared' import { Search } from '#/shared' -// import styles from '#/widgets/business-models/ui/models-list/models-list.module.scss' import { getBusinessGroups } from '#/widgets/business-persons/api/get-businessGroups' import ArrowUpOrDown from '#/widgets/top-bar-model/ui/arrow-up-or-down' -import { getModalById, PLATE_CHANGE_PASSWORD, RESEND_INVATION_PASSWORD } from '#/features/modals' +import { getModalById, PLATE_CHANGE_PASSWORD } from '#/features/modals' +import { resendInvation } from '#/features/resend-invation-corp/api/resend-invation' import { formatDateStatus, formatEmail, translateEmailStatus } from '../../lib/lib' import { XMark } from '#/features/remove-person' @@ -59,7 +58,6 @@ export const SecurityList = ({ const [currentPerson, setCurrentPerson] = useState(null) const passChangeModal = getModalById(PLATE_CHANGE_PASSWORD) - const passResendModal = getModalById(RESEND_INVATION_PASSWORD) useEffect(() => { setPersons(securityList) @@ -82,7 +80,25 @@ export const SecurityList = ({ const [showPersons, setShowPersons] = useState(true) const { showMessage } = useShowDataStore() - const { data } = useSession() + const { data: session } = useSession() + + const handleResendInvation = async (email: string) => { + const response = await resendInvation(email, session?.access) + + if (response.status == 200) { + showMessage('Приглашение переотправлено!', 'success') + setPersons((prev) => + prev?.map((el) => { + if (el.email === email) { + return { ...el, acceptance_status: 'pending' as const } + } + return el + }) ?? null + ) + } else { + showMessage(response.data) + } + } const updateLimit = (limit: string, email?: string) => { setPersons((prev) => @@ -96,7 +112,7 @@ export const SecurityList = ({ }) ) setCurrentPerson(null) - showMessage(`Лимит пользователя ${email} успешно изменён!`, 'success') + showMessage(`Данные сотрудника ${email} изменены!`, 'success') } useEffect(() => { @@ -179,13 +195,7 @@ export const SecurityList = ({ {statusPerson === 'Приглашен' ? ( - {showConfigure && ( - <> - - changeTopP(e, current)} - max={1} - min={0} - step={0.1} - aria-label='pretto slider' - /> - - - changePresence(e, current)} - max={2} - min={-2} - step={0.1} - aria-label='pretto slider' - /> - - - )} - - Сбросить настройки - - - - ) : ( - - )} - - ) - } -) - -Filters.displayName = 'Filters' @@ -0,0 +1,51 @@ +import { Slider } from '@mui/material' +import { styled } from '@mui/material/styles' + +export const PrettoSlider = styled(Slider)({ + width: '90%', + color: '#EFF0F2', + height: 5, + '& .MuiSlider-track': { + border: 'none', + backgroundColor: '#EFF0F', + }, + '.MuiSlider-rail': { + border: 'none', + backgroundColor: '#EFF0F', + }, + '& .MuiSlider-thumb': { + height: 17, + width: 17, + backgroundColor: '#fff', + border: '2px solid #7F7DF3', + '&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': { + boxShadow: 'inherit', + }, + '&:before': { + display: 'none', + }, + }, +}) + +export const PrettoSliderDark = styled(Slider)({ + width: '90%', + height: 5, + '& .MuiSlider-track': { + border: 'none', + backgroundColor: '#40404E', + }, + '.MuiSlider-rail': { + border: 'none', + backgroundColor: '#40404E', + }, + '& .MuiSlider-thumb': { + height: 17, + width: 17, + backgroundColor: '#373737', + border: '2px solid #7F7DF3', + '&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': {}, + '&:before': { + display: 'none', + }, + }, +}) @@ -1 +1,4 @@ -export { Filters } from './ui/filters' +export { typeModels } from './lib/constants' +export type { TypeModelGPT } from './lib/constants' +export { PrettoSlider, PrettoSliderDark } from './ui/pretto-slider' +export { default as TooltipModelTypes } from './ui/tooltip-model-types' @@ -1,6 +0,0 @@ -export enum GeneratingModel { - 'stable-diffusion-v1-6', - 'stable-diffusion-xl-1024-v1-0', - 'sd3', - 'sd3-turbo', -} @@ -1,52 +0,0 @@ -import { IProps } from '#/shared/lib/types/entities' -import { Styles } from '#/widgets/filters-sd/ui/filters' - -export type TImageFormat = '512x512' | '640x384' | '384x640' | '768x512' | '512x768' | '1024x1024' -export type TClipGuidancePresets = - | 'FAST_BLUE' - | 'FAST_GREEN' - | 'Без фильтров' - | 'SIMPLE' - | 'SLOW' - | 'SLOWER' - | 'SLOWEST' -export type TSamplerTypes = - | 'DDIM' - | 'DDPM' - | 'K_DPMPP_2M' - | 'K_DPMPP_2S_ANCESTRAL' - | 'K_DPM_2' - | 'K_DPM_2_ANCESTRAL' - | 'K_EULER' - | 'K_EULER_ANCESTRAL' - | 'K_HEUN' - | 'K_LMS' - -export type TGeneratingModel = 'stable-diffusion-v1-6' | 'stable-diffusion-xl-1024-v1-0' | 'sd3' | 'sd3-turbo' - -export interface ISDFilters extends IProps { - formatImage: TImageFormat - stepsImage: number | string | Array - numberImages: number | number[] | undefined - sampleType: TSamplerTypes - samplerTypes: TSamplerTypes[] - cfgScale: number | string | Array - clipGuidancePreset: TClipGuidancePresets - clipGuidancePresets: TClipGuidancePresets[] - formatImages: TImageFormat[] - generatingModel: TGeneratingModel - isTranslate: boolean - style: Styles - - changeFormatImage: (e: TImageFormat) => void - changeClipGuidancePreset: (e: TClipGuidancePresets) => void - changeSampleType: (e: TSamplerTypes) => void - changeStepsImage: (e: Event, current: number | number[]) => void - changeNumberImage: (e: Event, current: number | number[]) => void - changeCfgScale: (e: Event, current: number | number[]) => void - changeGeneratingModel: (e: TGeneratingModel) => void - changeIsTranslate: () => void - changeStyle: (e: Styles) => void - - resetSettings: () => void -} @@ -1,207 +0,0 @@ -import React, { useState } from 'react' -import SettingsSuggestIcon from '@mui/icons-material/SettingsSuggest' -import { Box, Button, Drawer, Stack, Typography } from '@mui/material' - -import { Select, SwitchCustom } from '#/shared' -import { Slider } from '#/shared' -import { SelectUI } from '#/shared/ui/select' -import { PrettoSlider, PrettoSliderDark } from '#/widgets/filters-gpt/ui/filters' -import { GeneratingModel } from '#/widgets/filters-sd/lib/constants' -import { - ISDFilters, - TClipGuidancePresets, - TGeneratingModel, - TImageFormat, - TSamplerTypes, -} from '#/widgets/filters-sd/lib/types' -import { Styles, styles } from '#/widgets/filters-sd/ui/filters' - -interface ISDFiltersMobile extends ISDFilters { - isOpenDrawer: boolean - onCloseDrawer: () => void -} - -export const FiltersMobile: React.FC = ({ - stepsImage, - numberImages, - formatImage, - cfgScale, - clipGuidancePreset, - sampleType, - formatImages, - changeFormatImage, - changeClipGuidancePreset, - clipGuidancePresets, - samplerTypes, - changeSampleType, - changeStepsImage, - changeNumberImage, - changeCfgScale, - resetSettings, - onCloseDrawer, - isOpenDrawer, - isTranslate, - changeIsTranslate, - style, - changeStyle, - generatingModel, - changeGeneratingModel, -}) => { - const [showConfigure, setShowConfigure] = useState(false) - - return ( - - - - - changeClipGuidancePreset(e.target.value as TClipGuidancePresets) - } - list={clipGuidancePresets} - /> - - - -