+
+ )
+})
@@ -0,0 +1,11 @@
+
+
+.popup{
+ min-width: 200px;
+ &__title{
+ color: #A4AAB5;
+ font-weight: 600;
+ font-size: 16px;
+ margin-bottom: 20px;
+ }
+}
\ No newline at end of file
@@ -0,0 +1,29 @@
+import { getPopupById, PopupTemplate } from '#/shared/ui/popup'
+import { POPUP_IMAGE_SETTINGS } from '#/shared/ui/popup'
+import React, { useEffect } from 'react'
+import styles from './image-settings.popup.module.scss'
+import BotParamsMap from '#/features/bot-params/bot-params-map'
+import { IModelParams } from '#/entities/model-entity'
+
+export const ImageSettingsPopup = () => {
+ const popup = getPopupById(POPUP_IMAGE_SETTINGS)
+
+ const botParams = popup.getStoreProperty
+
+
+
+
+
+ {formatedDate} мин. назад
++ {content.length < 30 ? content : `${content.slice(0, 30)}...`} +
+
+
+
+
+
+
+ {new Array(4).fill(file).map((el, index) => (
+
+
+ ![]()
+ setImageLoadStates((prev) => {
+ const newState = [...prev]
+ newState[index] = true
+ return newState
+ })
+ }
+ height={300}
+ src={el}
+ alt={`image-${uid}-${index}`}
+ />
+
+ {!imageLoadStates[index] && }
+
+ ))}
+
+
+ НАСТРОЙКИ
+ {currentVersion && ( +
+
+ )}
+ setModal(false)}
+ >
+
+
+ )
+}
@@ -0,0 +1 @@
+export { default as ImageModal } from './full-screen-modal'
@@ -0,0 +1,105 @@
+.close_block {
+}
+.download {
+}
+.actions {
+ position: absolute;
+ z-index: 105;
+ cursor: pointer;
+ right: 25px;
+ top: 25px;
+ display: flex;
+ align-items: center;
+ gap: 15px;
+}
+
+.arrow {
+ position: absolute;
+ z-index: 1205;
+ cursor: pointer;
+ top: 50%;
+
+ width: 50px;
+ height: 50px;
+
+ background: transparent;
+ border: none;
+ outline: none;
+
+ svg {
+ fill: white;
+ width: 50px;
+ height: 50px;
+ }
+
+ &_left {
+ transform: translateY(-50%) rotate(90deg);
+ left: -40px;
+ @media screen and (max-width: 768px) {
+ left: -3px;
+ }
+ }
+
+ &_right {
+ transform: translateY(-50%) rotate(-90deg);
+ right: -50px;
+
+ @media screen and (max-width: 768px) {
+ right: -10px;
+ }
+ }
+}
+
+.image_block {
+ position: absolute;
+ padding: 0 20px;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 105;
+ margin: auto;
+ width: fit-content;
+ height: fit-content;
+}
+
+.loader {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.image_style {
+ width: auto;
+ max-width: 70vw;
+ height: 100%;
+ position: relative;
+ user-select: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ user-select: none;
+ }
+}
+
+.slide {
+ width: 80vw !important;
+ display: flex !important;
+ align-items: center;
+ justify-content: center;
+ height: 100% !important;
+ max-height: unset;
+}
+
+.swiper {
+ position: relative;
+ width: 100%;
+ max-width: 80vw;
+ max-height: 1000px;
+ height: 80vh;
+}
@@ -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,74 @@
+import { useAppSelector } from '#/app/store/store'
+import { MessageSend, sendImage } from '#/entities/message'
+import { IModel } from '#/entities/model-entity'
+import { useImagesUniqInput } from '#/features/image-bot-input'
+import { useMessagesStore } from '#/widgets/messages'
+import { useSession } from 'next-auth/react'
+import { useState } from 'react'
+
+export function useImageInput(
+ model: IModel | null,
+ version: string,
+ container: React.RefObject
+
+
+
+
+
+
+
+ setModal(false)}>
+
+
+
+
+ {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='К сожалению, изображение не загрузилось'
+ />
+ ) : (
+ 
e.stopPropagation()}
+ onLoad={() => updateImageState(image, true)}
+ alt='К сожалению, изображение не загрузилось'
+ className={styles.image_style}
+ />
+ )}
+
+
+
+ )
+}
@@ -0,0 +1 @@
+export * from './image-input'
@@ -0,0 +1,2 @@
+export * from './ui'
+export * from './model'
@@ -0,0 +1 @@
+export * from './modals.config'
\ No newline at end of file
@@ -0,0 +1,2 @@
+
+export const PLATE_IMAGE_STYLES = 'plate-image-styles'
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './store.modals'
\ No newline at end of file
@@ -0,0 +1,78 @@
+import { create } from "zustand";
+
+type Set = {
+ (partial: (state: PlatesStore) => Partial
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Сгенерировать
+
+ {
+ if (!model) return
+
+ imageSettingsPopup.toogleState({
+ botParams: model.parameters,
+ currentVersion: version,
+ })
+ }}
+ className={styles.mobcontols__settings}
+ variant='primary-outline'
+ >
+
+
+
+ {
+ if (hasBg) modal.setState(false)
+ }}
+ >
+ {hasTemplate ? (
+
+ )
+}
@@ -0,0 +1,9 @@
+import { usePlatesStore } from './model';
+
+export function getModalById(id: string) {
+ const { getModal } = usePlatesStore();
+ return getModal(id);
+}
+
+export * from './ui'
+export * from './config'
\ No newline at end of file
@@ -4,7 +4,14 @@ import Link from 'next/link'
import styles from '#/shared/styles/chats-bot-pages.module.scss'
-export default function Title(props: any) {
+export interface TitleProps {
+ type: string
+ title: string
+ linkBack?: string
+ rightSlot?: React.ReactNode
+}
+
+export default function Title(props: TitleProps) {
return (
e.stopPropagation()}
+ >
+
+ ) : (
+
+
+ {title}
+ +{children}
+ {children}
+ )}
+
+
+ {props.title}
+
+
{props.rightSlot}
+ = NextPage