@pushwoosh/smart-components-kit 1.12.0 → 1.14.0

package/MediaStorage/GenerateImageTab.d.ts

@@ -1,12 +1,14 @@
 import { type FC } from 'react';
 import type { MediaFile } from '@pushwoosh/rpc-v2-http-api-data/media_files';
+import { type PromptContext } from './aiGallery';
 type GenerateImageTabProps = {
     application: string;
     aspectRatios?: string[];
     defaultAspectRatio?: string;
+    promptContext?: PromptContext;
     onSelect: (file: MediaFile, alt: string) => void;
     onGenerated: () => void;
 };
-/** Prompt → one image that onyx stores in the library; the preview is already the stored file. */
+/** Prompt (+ optional message context) → 1–4 variants that onyx stores in the library; each preview is already a library file. */
 export declare const GenerateImageTab: FC<GenerateImageTabProps>;
 export {};

package/MediaStorage/GenerateImageTab.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Button, NativeSelect } from '@pushwoosh/dumb-components';
+import { Button, Checkbox, NativeSelect } from '@pushwoosh/dumb-components';
 import { useSPAContext } from '@pushwoosh/spa-context';
-import { GENERATE_ASPECT_RATIOS, toMediaFile } from './aiGallery';
+import { GENERATE_ASPECT_RATIOS, GENERATE_VARIANT_COUNTS, storedVariants } from './aiGallery';
 import { useErrorToast } from './hooks';
 import { useLang } from './polyglot';
-import { GenerateControls, GeneratedPreview, GenerateForm, PromptField } from './styles';
+import { GenerateControls, GeneratedGrid, GeneratedPreview, GeneratedVariant, GenerateForm, PromptField } from './styles';
 const ASPECT_LABELS = {
   '1:1': 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_SQUARE',
   '4:3': 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_LANDSCAPE',
@@ -19,11 +19,12 @@ const generateButtonMessage = (busy, hasResult) => {
   if (busy) return 'SMART.MEDIA_STORAGE.GENERATE.GENERATING';
   return hasResult ? 'SMART.MEDIA_STORAGE.GENERATE.AGAIN' : 'SMART.MEDIA_STORAGE.GENERATE.BUTTON';
 };
-/** Prompt → one image that onyx stores in the library; the preview is already the stored file. */
+/** Prompt (+ optional message context) → 1–4 variants that onyx stores in the library; each preview is already a library file. */
 export const GenerateImageTab = ({
   application,
   aspectRatios,
   defaultAspectRatio,
+  promptContext,
   onSelect,
   onGenerated
 }) => {
@@ -36,6 +37,9 @@ export const GenerateImageTab = ({
   const [prompt, setPrompt] = useState('');
   const [aspect, setAspect] = useState(defaultAspectRatio && ratios.includes(defaultAspectRatio) ? defaultAspectRatio : ratios[0]);
   const [busy, setBusy] = useState(false);
+  const [count, setCount] = useState(1);
+  const hasContext = Boolean(promptContext?.title?.trim() || promptContext?.body?.trim());
+  const [useContext, setUseContext] = useState(true);
   const [generated, setGenerated] = useState(null);
   const aspectLabel = ratio => {
     return isLabelledAspect(ratio) ? lang({
@@ -48,13 +52,19 @@ export const GenerateImageTab = ({
     setGenerated(null);
     setBusy(true);
     try {
-      const res = await rpcGatewayAIAssistant.aiGen.GenerateMediaImage({
+      const request = {
         application,
         prompt: text,
-        aspectRatio: aspect
-      });
+        aspectRatio: aspect,
+        count,
+        ...(hasContext && useContext ? {
+          contextTitle: promptContext?.title ?? '',
+          contextBody: promptContext?.body ?? ''
+        } : {})
+      };
+      const res = await rpcGatewayAIAssistant.aiGen.GenerateMediaImage(request);
       setGenerated({
-        file: toMediaFile(res, 'ai', `${res.mediaUuid}.png`),
+        files: storedVariants(res),
         alt: text
       });
       onGenerated();
@@ -80,6 +90,16 @@ export const GenerateImageTab = ({
           value: ratio,
           children: aspectLabel(ratio)
         }, ratio))
+      }), _jsx(NativeSelect, {
+        value: count,
+        onChange: event => setCount(Number(event.target.value)),
+        children: GENERATE_VARIANT_COUNTS.map(n => _jsx("option", {
+          value: n,
+          children: lang({
+            message: 'SMART.MEDIA_STORAGE.GENERATE.VARIANTS',
+            count: n
+          })
+        }, n))
       }), _jsx(Button, {
         color: "primary",
         size: "field",
@@ -88,17 +108,28 @@ export const GenerateImageTab = ({
         children: lang({
           message: generateButtonMessage(busy, generated !== null)
         })
-      }), generated && _jsx(Button, {
-        color: "secondary",
-        size: "field",
-        onClick: () => onSelect(generated.file, generated.alt),
-        children: lang({
-          message: 'SMART.MEDIA_STORAGE.GENERATE.SELECT'
-        })
       })]
-    }), generated && _jsx(GeneratedPreview, {
-      src: generated.file.url,
-      alt: generated.alt
+    }), hasContext && _jsx(Checkbox, {
+      label: lang({
+        message: 'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT'
+      }),
+      isChecked: useContext,
+      onChange: () => setUseContext(value => !value)
+    }), generated && _jsx(GeneratedGrid, {
+      "$single": generated.files.length === 1,
+      children: generated.files.map(file => _jsxs(GeneratedVariant, {
+        children: [_jsx(GeneratedPreview, {
+          src: file.url,
+          alt: generated.alt
+        }), _jsx(Button, {
+          color: "secondary",
+          size: "field",
+          onClick: () => onSelect(file, generated.alt),
+          children: lang({
+            message: 'SMART.MEDIA_STORAGE.GENERATE.SELECT'
+          })
+        })]
+      }, file.uuid))
     })]
   });
 };

package/MediaStorage/MediaStorage.js

@@ -14,7 +14,7 @@ import { useCanvaEdit, useDeleteMediaFile, useDeleteMediaFiles } from './hooks';
 import { formatBytes, getCropCaption, getSourceLabel, getThumbUrl, hasVersions } from './mediaFile.utils';
 import { Lang, useLang } from './polyglot';
 import { StockPhotosTab } from './StockPhotosTab';
-import { CanvaActions, CountBadge, Dropzone, DropzoneRow, EmptyState, Grid, HiddenInput, SelectionBar, SelectionCount, SourceBadge, TabBody, Tile, TileActions, TileBadges, TileCheckbox, TileImage, UsageLine, WarningBadge } from './styles';
+import { CanvaActions, CountBadge, Dropzone, DropzoneRow, EmptyState, Grid, HiddenInput, SelectionBar, SearchField, SearchRow, SelectionCount, SourceBadge, TabBody, Tile, TileActions, TileBadges, TileCheckbox, TileImage, UsageLine, WarningBadge } from './styles';
 const UPLOAD_PATH = '/api/media/upload';
 const ALLOWED_IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
 const TAB_MESSAGES = {
@@ -42,6 +42,7 @@ export const MediaStorage = ({
   sources,
   aspectRatios,
   defaultAspectRatio,
+  promptContext,
   onSuggestAlt
 }) => {
   const lang = useLang();
@@ -76,6 +77,8 @@ export const MediaStorage = ({
   const [selectedUuids, setSelectedUuids] = useState([]);
   const [isBulkDeleteOpen, setIsBulkDeleteOpen] = useState(false);
   const [isBulkDeleting, setIsBulkDeleting] = useState(false);
+  const [search, setSearch] = useState('');
+  const [searchDraft, setSearchDraft] = useState('');
   // Format filtering belongs to the query, not the response: `total` and the page count come
   // from the filtered set, so a client-side filter would paginate over files it then hides.
   const listAsync = useAsync(async () => {
@@ -83,14 +86,15 @@ export const MediaStorage = ({
       application,
       page,
       perPage,
-      extensions
+      extensions,
+      searchByName: search || undefined
     });
     // protobuf JSON omits empty `repeated` fields, so `files` can be undefined.
     return {
       files: response.files ?? [],
       total: response.total
     };
-  }, [rpcGateway, application, page, perPage, extensions, reloadToken]);
+  }, [rpcGateway, application, page, perPage, extensions, search, reloadToken]);
   const usageAsync = useAsync(() => rpcGateway.mediaFiles.GetUsage({
     application
   }), [rpcGateway, application, reloadToken, usageToken]);
@@ -174,6 +178,14 @@ export const MediaStorage = ({
       cancelled = true;
     };
   }, [listAsync.value, rpcGateway, application, extensions]);
+  const applySearch = value => {
+    if (value === search) return;
+    setSearch(value);
+    if (pageRef.current !== 0) {
+      onPageChange(0);
+    }
+  };
+  const commitSearch = () => applySearch(searchDraft.trim());
   const uploadFiles = async selected => {
     if (selected.length === 0) return;
     const images = selected.filter(isAllowedImage);
@@ -346,6 +358,24 @@ export const MediaStorage = ({
       accept: ALLOWED_IMAGE_EXTENSIONS.join(','),
       multiple: true,
       onChange: event => void uploadFiles(Array.from(event.target.files ?? []))
+    }), _jsx(SearchRow, {
+      children: _jsx(SearchField, {
+        type: "search",
+        value: searchDraft,
+        placeholder: lang({
+          message: 'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER'
+        }),
+        onChange: event => {
+          setSearchDraft(event.target.value);
+          if (event.target.value === '') {
+            applySearch('');
+          }
+        },
+        onKeyDown: event => {
+          if (event.key === 'Enter') commitSearch();
+        },
+        onBlur: commitSearch
+      })
     }), loading && _jsx(EmptyState, {
       children: lang({
         message: 'SMART.MEDIA_STORAGE.LOADING'
@@ -563,6 +593,7 @@ export const MediaStorage = ({
             application: application,
             aspectRatios: aspectRatios,
             defaultAspectRatio: defaultAspectRatio,
+            promptContext: promptContext,
             onGenerated: showImportedFirst,
             onSelect: pickStored
           })

package/MediaStorage/aiGallery.d.ts

@@ -22,7 +22,15 @@ export type AiGenStoredImage = {
     width: number;
     height: number;
     file?: AiGenMediaFile;
+    files?: AiGenMediaFile[];
 };
+/** The message an image is generated for; onyx draws for it and keeps its text out of the picture. */
+export type PromptContext = {
+    title?: string;
+    body?: string;
+};
+/** Variant counts the Generate tab offers; onyx caps a request at 4 and charges each one. */
+export declare const GENERATE_VARIANT_COUNTS: number[];
 /** Aspect ratios onyx accepts for a generated image, in picker order. */
 export declare const GENERATE_ASPECT_RATIOS: string[];
 /** One Pexels hit from `aiGen.SearchStockPhotos`. */
@@ -47,3 +55,5 @@ export declare const isStockUnconfigured: (error: unknown) => boolean;
 export declare const visibleSources: (sources: MediaSource[] | undefined, extensions: string[] | undefined) => MediaSource[];
 /** Media-library file for an image onyx just stored, so `onSelect` gets the same shape as a library pick. */
 export declare const toMediaFile: (stored: AiGenStoredImage, source: "ai" | "stock", fallbackName: string) => MediaFile;
+/** Every image a Generate call stored, as library files; older onyx returns a single image. */
+export declare const storedVariants: (res: AiGenStoredImage) => MediaFile[];

package/MediaStorage/aiGallery.js

@@ -1,3 +1,5 @@
+/** Variant counts the Generate tab offers; onyx caps a request at 4 and charges each one. */
+export const GENERATE_VARIANT_COUNTS = [1, 2, 4];
 /** Aspect ratios onyx accepts for a generated image, in picker order. */
 export const GENERATE_ASPECT_RATIOS = ['1:1', '4:3', '3:2', '16:9', '21:9', '5:4', '4:5', '3:4', '2:3', '9:16'];
 /** Longest stock query onyx accepts (`stockphotos.MaxQueryChars`); capping the input keeps 400 meaning "not configured". */
@@ -52,4 +54,17 @@ export const toMediaFile = (stored, source, fallbackName) => {
       }
     }
   };
+};
+/** Every image a Generate call stored, as library files; older onyx returns a single image. */
+export const storedVariants = res => {
+  if (!res.files?.length) {
+    return [toMediaFile(res, 'ai', `${res.mediaUuid}.png`)];
+  }
+  return res.files.map(file => toMediaFile({
+    url: file.url,
+    mediaUuid: file.uuid,
+    width: file.width,
+    height: file.height,
+    file
+  }, 'ai', file.filename));
 };

package/MediaStorage/polyglot/messages_ar.js

@@ -105,5 +105,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'عريض (16:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'بانر (21:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'بورتريه (3:4)',
-  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'طويل (9:16)'
+  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'طويل (9:16)',
+  'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'ابحث باسم الملف…',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'الرسم وفق عنوان الرسالة ونصها',
+  'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × صورة'
 };

package/MediaStorage/polyglot/messages_bn.js

@@ -105,5 +105,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'চওড়া (16:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'ব্যানার (21:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'পোর্ট্রেট (3:4)',
-  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'লম্বা (9:16)'
+  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'লম্বা (9:16)',
+  'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'ফাইলের নাম দিয়ে অনুসন্ধান করুন…',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'বার্তার শিরোনাম ও টেক্সট অনুযায়ী আঁকুন',
+  'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × ছবি'
 };

package/MediaStorage/polyglot/messages_de.js

@@ -105,5 +105,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'Breit (16:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'Banner (21:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'Hochformat (3:4)',
-  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Hoch (9:16)'
+  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Hoch (9:16)',
+  'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'Nach Dateinamen suchen…',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'Passend zu Titel und Text der Nachricht zeichnen',
+  'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × Bild'
 };

package/MediaStorage/polyglot/messages_en.js

@@ -105,5 +105,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'Wide (16:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'Banner (21:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'Portrait (3:4)',
-  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Tall (9:16)'
+  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Tall (9:16)',
+  'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'Search by file name…',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'Draw for the message title and text',
+  'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × image'
 };

package/MediaStorage/polyglot/messages_es.js

@@ -105,5 +105,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'Ancho (16:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'Banner (21:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'Vertical (3:4)',
-  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Alto (9:16)'
+  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Alto (9:16)',
+  'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'Buscar por nombre de archivo…',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'Dibujar según el título y el texto del mensaje',
+  'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × imagen'
 };

package/MediaStorage/polyglot/messages_fr.js

@@ -105,5 +105,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'Large (16:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'Bannière (21:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'Portrait (3:4)',
-  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Haut (9:16)'
+  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Haut (9:16)',
+  'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'Rechercher par nom de fichier…',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'Illustrer le titre et le texte du message',
+  'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × image'
 };

package/MediaStorage/polyglot/messages_he.js

@@ -105,5 +105,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'רחב (16:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'באנר (21:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'לאורך (3:4)',
-  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'גבוה (9:16)'
+  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'גבוה (9:16)',
+  'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'חיפוש לפי שם קובץ…',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'לצייר לפי הכותרת והטקסט של ההודעה',
+  'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × תמונה'
 };

package/MediaStorage/polyglot/messages_hi.js

@@ -105,5 +105,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'वाइड (16:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'बैनर (21:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'पोर्ट्रेट (3:4)',
-  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'टॉल (9:16)'
+  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'टॉल (9:16)',
+  'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'फ़ाइल नाम से खोजें…',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'संदेश के शीर्षक और टेक्स्ट के अनुसार बनाएं',
+  'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × छवि'
 };

package/MediaStorage/polyglot/messages_ja.js

@@ -105,5 +105,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'ワイド (16:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'バナー (21:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': '縦長 (3:4)',
-  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': '縦長 (9:16)'
+  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': '縦長 (9:16)',
+  'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'ファイル名で検索…',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'メッセージのタイトルと本文に合わせて描く',
+  'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × 画像'
 };

package/MediaStorage/polyglot/messages_ko.js

@@ -105,5 +105,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': '와이드 (16:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': '배너 (21:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': '세로 (3:4)',
-  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': '세로형 (9:16)'
+  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': '세로형 (9:16)',
+  'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': '파일 이름으로 검색…',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': '메시지 제목과 본문에 맞춰 그리기',
+  'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × 이미지'
 };

package/MediaStorage/polyglot/messages_pt.js

@@ -105,5 +105,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'Largo (16:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'Banner (21:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'Retrato (3:4)',
-  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Alto (9:16)'
+  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Alto (9:16)',
+  'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'Buscar por nome do arquivo…',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'Desenhar para o título e o texto da mensagem',
+  'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × imagem'
 };

package/MediaStorage/polyglot/messages_ru.js

@@ -105,5 +105,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'Широкая (16:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'Баннер (21:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'Портретная (3:4)',
-  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Вертикальная (9:16)'
+  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Вертикальная (9:16)',
+  'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'Поиск по имени файла…',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'Рисовать под заголовок и текст сообщения',
+  'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × картинка'
 };

package/MediaStorage/polyglot/messages_th.js

@@ -105,5 +105,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'แนวนอนกว้าง (16:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'แบนเนอร์ (21:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'แนวตั้ง (3:4)',
-  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'แนวตั้งสูง (9:16)'
+  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'แนวตั้งสูง (9:16)',
+  'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'ค้นหาตามชื่อไฟล์…',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'วาดตามหัวข้อและข้อความของข้อความ',
+  'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × รูปภาพ'
 };

package/MediaStorage/polyglot/messages_zh.js

@@ -105,5 +105,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': '宽 (16:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': '横幅 (21:9)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': '纵向 (3:4)',
-  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': '高 (9:16)'
+  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': '高 (9:16)',
+  'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': '按文件名搜索…',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': '根据消息标题和正文绘制',
+  'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × 图片'
 };

package/MediaStorage/polyglot/types.d.ts

@@ -140,4 +140,9 @@ export type MediaStorageMessages = {
     'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': NoParams;
     'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': NoParams;
     'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': NoParams;
+    'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': NoParams;
+    'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': NoParams;
+    'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': {
+        count: number;
+    };
 };

package/MediaStorage/styles.d.ts

@@ -164,3 +164,11 @@ export declare const PromptField: import("styled-components/dist/types").IStyled
         [key: `--${string}`]: string | number | undefined;
     }) | undefined;
 }> & string;
+export declare const GeneratedGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $single?: boolean;
+}>> & string;
+export declare const GeneratedVariant: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;

package/MediaStorage/styles.js

@@ -187,4 +187,14 @@ export const SearchField = styled(NativeInput).withConfig({
 export const PromptField = styled(NativeTextarea).withConfig({
   displayName: "PromptField",
   componentId: "sc-uu3cbo-40"
-})(["font-family:inherit;resize:vertical;"]);
+})(["font-family:inherit;resize:vertical;"]);
+export const GeneratedGrid = styled.div.withConfig({
+  displayName: "GeneratedGrid",
+  componentId: "sc-uu3cbo-41"
+})(["display:grid;grid-template-columns:", ";gap:16px;"], ({
+  $single
+}) => $single ? '1fr' : 'repeat(2, minmax(0, 1fr))');
+export const GeneratedVariant = styled.div.withConfig({
+  displayName: "GeneratedVariant",
+  componentId: "sc-uu3cbo-42"
+})(["display:flex;flex-direction:column;align-items:flex-start;gap:8px;"]);

package/MediaStorage/types.d.ts

@@ -24,6 +24,11 @@ type MediaFileChannelOptions = {
     aspectRatios?: string[];
     /** Pre-selected aspect ratio in the Generate tab. */
     defaultAspectRatio?: string;
+    /** Title and text of the message being composed; Generate offers to draw for it. */
+    promptContext?: {
+        title?: string;
+        body?: string;
+    };
     /** Alt text suggested for a stock or generated pick (provider alt or the prompt). */
     onSuggestAlt?: (file: MediaFile, alt: string) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/smart-components-kit",
-  "version": "1.12.0",
+  "version": "1.14.0",
   "description": "Stateful, data-connected React components shared by Pushwoosh micro-frontends",
   "repository": {
     "type": "git",