@developer_tribe/react-builder 1.2.47 → 1.2.48

package/src/modals/PromptManagerModal.tsx

@@ -1,68 +1,130 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import Modal from './Modal';
-import { useRenderStore } from '../store';
+import {
+  useRenderStore,
+  type BuilderPromptManagerConfig,
+  type BuilderPromptManagerGenerateRequest,
+  type BuilderPromptManagerGenerateResponse,
+  type BuilderPromptSchemaType,
+} from '../store';
 import type { Node } from '../types/Node';
 import { nodeToXml, xmlToNode } from '../utils/nodeXml';
 import { analyseAndProccess } from '../utils/analyseNode';
 import { onboardPromptScheme } from '../assets/prompt-scheme-onboard.generated';
 import { paywallPromptScheme } from '../assets/prompt-scheme-paywall.generated';
 
-type PromptManagerTab = 'xml-editor' | 'prompt-schema';
+export type PromptManagerTab = 'xml-editor' | 'ai-layout' | 'prompt-schema';
+type PromptSchemaSubTab = BuilderPromptSchemaType;
+
+const promptSchemas: Record<PromptSchemaSubTab, string> = {
+  onboard: onboardPromptScheme,
+  paywall: paywallPromptScheme,
+};
 
 type PromptManagerModalProps = {
   data: Node;
   setData: React.Dispatch<React.SetStateAction<Node>>;
   onClose: () => void;
+  initialTab?: PromptManagerTab;
+  showTabs?: boolean;
+  title?: string;
 };
 
 export function PromptManagerModal({
   data,
   setData,
   onClose,
+  initialTab = 'xml-editor',
+  showTabs = true,
+  title,
 }: PromptManagerModalProps) {
-  const [activeTab, setActiveTab] = useState<PromptManagerTab>('xml-editor');
+  const promptManagerConfig = useRenderStore((s) => s.promptManagerConfig);
+  const hasAiLayout = Boolean(
+    promptManagerConfig?.generate && promptManagerConfig?.renderAiLayout,
+  );
+  const [activeTab, setActiveTab] = useState<PromptManagerTab>(initialTab);
+
+  useEffect(() => {
+    setActiveTab(initialTab);
+  }, [initialTab]);
+
+  useEffect(() => {
+    if (activeTab === 'ai-layout' && !hasAiLayout) {
+      setActiveTab('xml-editor');
+    }
+  }, [activeTab, hasAiLayout]);
+
+  const isAiLayoutMode =
+    activeTab === 'ai-layout' && hasAiLayout && Boolean(promptManagerConfig);
 
   return (
     <Modal
       onClose={onClose}
       ariaLabelledBy="prompt-manager-modal-title"
       className="modal--large modal--scrollable"
-      contentClassName="prompt-manager-modal__content"
+      contentClassName={[
+        'prompt-manager-modal__content',
+        isAiLayoutMode ? 'prompt-manager-modal__content--ai-layout' : '',
+      ]
+        .filter(Boolean)
+        .join(' ')}
     >
-      <div className="modal__header prompt-manager-modal__header">
-        <h3 id="prompt-manager-modal-title" className="modal__title">
-          Prompt Manager
-        </h3>
-        <button type="button" className="editor-button" onClick={onClose}>
-          Close
-        </button>
-      </div>
+      {!isAiLayoutMode && (
+        <div className="modal__header prompt-manager-modal__header">
+          <h3 id="prompt-manager-modal-title" className="modal__title">
+            {title ||
+              (activeTab === 'ai-layout'
+                ? 'AI Layout Studio'
+                : 'Prompt Manager')}
+          </h3>
+          <button type="button" className="editor-button" onClick={onClose}>
+            Close
+          </button>
+        </div>
+      )}
 
-      <div className="prompt-manager-modal__tabs">
-        <button
-          type="button"
-          className={`prompt-manager-modal__tab${
-            activeTab === 'xml-editor' ? ' is-active' : ''
-          }`}
-          onClick={() => setActiveTab('xml-editor')}
-        >
-          XML Editor
-        </button>
-        <button
-          type="button"
-          className={`prompt-manager-modal__tab${
-            activeTab === 'prompt-schema' ? ' is-active' : ''
-          }`}
-          onClick={() => setActiveTab('prompt-schema')}
-        >
-          Prompt Şeması
-        </button>
-      </div>
+      {!isAiLayoutMode && showTabs && (
+        <div className="prompt-manager-modal__tabs">
+          <button
+            type="button"
+            className={`prompt-manager-modal__tab${
+              activeTab === 'xml-editor' ? ' is-active' : ''
+            }`}
+            onClick={() => setActiveTab('xml-editor')}
+          >
+            XML Editor
+          </button>
+          <button
+            type="button"
+            className={`prompt-manager-modal__tab${
+              activeTab === 'prompt-schema' ? ' is-active' : ''
+            }`}
+            onClick={() => setActiveTab('prompt-schema')}
+          >
+            Prompt Şeması
+          </button>
+        </div>
+      )}
 
-      <div className="prompt-manager-modal__body">
+      <div
+        className={[
+          'prompt-manager-modal__body',
+          isAiLayoutMode ? 'prompt-manager-modal__body--ai-layout' : '',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
         {activeTab === 'xml-editor' && (
           <XmlEditorTab data={data} setData={setData} />
         )}
+        {activeTab === 'ai-layout' && hasAiLayout && promptManagerConfig && (
+          <InjectedAiLayoutTab
+            data={data}
+            setData={setData}
+            config={promptManagerConfig}
+            onClose={onClose}
+          />
+        )}
         {activeTab === 'prompt-schema' && <PromptSchemaTab />}
       </div>
     </Modal>
@@ -177,17 +239,145 @@ function XmlEditorTab({
 }
 
 /* ------------------------------------------------------------------ */
-/*  Tab 2 – Prompt Şeması                                            */
+/*  Tab 2 – AI Layout                                                 */
 /* ------------------------------------------------------------------ */
 
-type PromptSchemaSubTab = 'onboard' | 'paywall';
+function normalizeGeneratedResult(
+  value: BuilderPromptManagerGenerateResponse,
+): { xml: string; rawText?: string; model?: string } {
+  if (typeof value === 'string') {
+    const xml = extractXml(value);
+    return { xml, rawText: value };
+  }
+
+  const xml = extractXml(value.xml ?? '');
+  return {
+    xml,
+    rawText: value.rawText,
+    model: value.model,
+  };
+}
+
+function extractXml(text: string): string {
+  const trimmed = text.trim();
+  if (!trimmed) return '';
+
+  const fenced = trimmed.match(/```(?:xml)?\s*([\s\S]*?)```/i);
+  const withoutFence = fenced?.[1]?.trim() ?? trimmed;
+  const firstTag = withoutFence.indexOf('<');
+  const lastTag = withoutFence.lastIndexOf('>');
+
+  if (firstTag >= 0 && lastTag > firstTag) {
+    return withoutFence.slice(firstTag, lastTag + 1).trim();
+  }
+
+  return withoutFence;
+}
+
+function InjectedAiLayoutTab({
+  data,
+  setData,
+  config,
+  onClose,
+}: {
+  data: Node;
+  setData: React.Dispatch<React.SetStateAction<Node>>;
+  config: BuilderPromptManagerConfig;
+  onClose: () => void;
+}) {
+  const setCurrent = useRenderStore((s) => s.setCurrent);
+  const Renderer = config.renderAiLayout;
+
+  const initialXml = useMemo(() => {
+    try {
+      return nodeToXml(data);
+    } catch {
+      return '';
+    }
+  }, [data]);
+
+  const modelOptions =
+    config.models && config.models.length > 0
+      ? config.models
+      : [{ id: 'gpt-5.4', label: 'GPT 5.4' }];
+
+  const defaultModel =
+    (config.defaultModel &&
+      modelOptions.find((item) => item.id === config.defaultModel)?.id) ||
+    modelOptions[0].id;
+  const defaultMode = config.defaultMode ?? 'edit-current';
+
+  const applyGeneratedXml = useCallback(
+    (xml: string) => {
+      const extractedXml = extractXml(xml);
+      if (!extractedXml) {
+        return {
+          success: false,
+          error: 'Geçerli bir XML bulunamadı.',
+        };
+      }
+
+      try {
+        const parsed = xmlToNode(extractedXml);
+        const processed = analyseAndProccess(parsed as Node) as Node;
+        setData(processed);
+        setCurrent(processed);
+
+        return { success: true };
+      } catch (error) {
+        return {
+          success: false,
+          error:
+            error instanceof Error
+              ? error.message
+              : 'Generated XML apply edilemedi.',
+        };
+      }
+    },
+    [setCurrent, setData],
+  );
+
+  const generate = useCallback(
+    async (payload: BuilderPromptManagerGenerateRequest) => {
+      const normalized = normalizeGeneratedResult(
+        await config.generate(payload),
+      );
+      if (!normalized.xml) {
+        throw new Error('Model geçerli bir XML döndürmedi.');
+      }
+
+      return normalized;
+    },
+    [config],
+  );
+
+  if (!Renderer) {
+    return null;
+  }
+
+  return (
+    <Renderer
+      modelOptions={modelOptions}
+      defaultModel={defaultModel}
+      defaultMode={defaultMode}
+      currentXml={initialXml}
+      promptSchemas={promptSchemas}
+      onClose={onClose}
+      generate={generate}
+      applyGeneratedXml={applyGeneratedXml}
+    />
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Tab 3 – Prompt Şeması                                            */
+/* ------------------------------------------------------------------ */
 
 function PromptSchemaTab() {
   const [subTab, setSubTab] = useState<PromptSchemaSubTab>('onboard');
   const [copied, setCopied] = useState(false);
 
-  const activeScheme =
-    subTab === 'onboard' ? onboardPromptScheme : paywallPromptScheme;
+  const activeScheme = promptSchemas[subTab];
 
   const handleCopy = async () => {
     try {

package/src/store.ts

@@ -13,6 +13,79 @@ export type LanguageColumn = {
   iso_code: string;
   is_right_alignment: boolean;
 };
+
+export type QuickActionConfig = {
+  label: string;
+  title?: string;
+  onClick: () => void;
+};
+
+export type BuilderMediaFieldKind = 'image' | 'lottie' | 'video';
+
+export type BuilderMediaFieldProps = {
+  value?: string;
+  onChange: (v?: string) => void;
+  fieldName: string;
+  componentType?: string;
+  fieldKind: BuilderMediaFieldKind;
+};
+
+export type BuilderPromptManagerMode = 'edit-current' | 'create-new';
+export type BuilderPromptSchemaType = 'onboard' | 'paywall';
+
+export type BuilderPromptManagerModel = {
+  id: string;
+  label: string;
+  provider?: string;
+};
+
+export type BuilderPromptManagerGenerateRequest = {
+  prompt: string;
+  model: string;
+  mode: BuilderPromptManagerMode;
+  currentXml: string;
+  promptSchema: string;
+  promptSchemaType: BuilderPromptSchemaType;
+  xmlStructureHint?: string;
+};
+
+export type BuilderPromptManagerGenerateResponse =
+  | {
+      xml: string;
+      rawText?: string;
+      model?: string;
+    }
+  | string;
+
+export type BuilderPromptManagerApplyResult = {
+  success: boolean;
+  error?: string;
+};
+
+export type BuilderPromptManagerAiLayoutProps = {
+  modelOptions: BuilderPromptManagerModel[];
+  defaultModel: string;
+  defaultMode: BuilderPromptManagerMode;
+  currentXml: string;
+  promptSchemas: Record<BuilderPromptSchemaType, string>;
+  onClose: () => void;
+  generate: (payload: BuilderPromptManagerGenerateRequest) => Promise<{
+    xml: string;
+    rawText?: string;
+    model?: string;
+  }>;
+  applyGeneratedXml: (xml: string) => BuilderPromptManagerApplyResult;
+};
+
+export type BuilderPromptManagerConfig = {
+  models: BuilderPromptManagerModel[];
+  defaultModel?: string;
+  defaultMode?: BuilderPromptManagerMode;
+  generate: (
+    payload: BuilderPromptManagerGenerateRequest,
+  ) => Promise<BuilderPromptManagerGenerateResponse>;
+  renderAiLayout?: ComponentType<BuilderPromptManagerAiLayoutProps>;
+};
 import { createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
 import type { Device } from './types/Device';
@@ -127,9 +200,15 @@ type RenderStore = {
   setRenderStringChildrenField: (
     comp?: ComponentType<{ value: string; onChange: (v: string) => void }>,
   ) => void;
+  renderMediaField?: ComponentType<BuilderMediaFieldProps>;
+  setRenderMediaField: (comp?: ComponentType<BuilderMediaFieldProps>) => void;
 
   localizationApiConfig?: LocalizationApiConfig;
   setLocalizationApiConfig: (config?: LocalizationApiConfig) => void;
+  quickActionConfig?: QuickActionConfig;
+  setQuickActionConfig: (config?: QuickActionConfig) => void;
+  promptManagerConfig?: BuilderPromptManagerConfig;
+  setPromptManagerConfig: (config?: BuilderPromptManagerConfig) => void;
 };
 
 export const useRenderStore = createWithEqualityFn<RenderStore>()(
@@ -331,10 +410,16 @@ export const useRenderStore = createWithEqualityFn<RenderStore>()(
       renderStringChildrenField: undefined,
       setRenderStringChildrenField: (comp) =>
         set({ renderStringChildrenField: comp }),
+      renderMediaField: undefined,
+      setRenderMediaField: (comp) => set({ renderMediaField: comp }),
 
       localizationApiConfig: undefined,
       setLocalizationApiConfig: (config) =>
         set({ localizationApiConfig: config }),
+      quickActionConfig: undefined,
+      setQuickActionConfig: (config) => set({ quickActionConfig: config }),
+      promptManagerConfig: undefined,
+      setPromptManagerConfig: (config) => set({ promptManagerConfig: config }),
     }),
     {
       name: 'render-store',

package/src/styles/components/_bottom-bar.scss

@@ -55,6 +55,18 @@
   margin-left: 4px;
 }
 
+.rb-bottom-bar__button + .rb-bottom-bar__tool-menu-anchor {
+  border-left: 1px solid colors.$borderColor;
+  padding-left: 14px;
+  margin-left: 4px;
+}
+
+.rb-bottom-bar__tool-menu-anchor + .rb-bottom-bar__button {
+  border-left: 1px solid colors.$borderColor;
+  padding-left: 14px;
+  margin-left: 4px;
+}
+
 .rb-bottom-bar__button--rtl {
   gap: 6px;
   padding-right: 10px;
@@ -102,3 +114,70 @@
   margin-left: 8px;
   padding-left: 14px;
 }
+
+.rb-bottom-bar__tool-menu-anchor {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.rb-bottom-bar__tool-menu {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 50%;
+  transform: translateX(-50%);
+  min-width: 280px;
+  padding: 10px;
+  border-radius: 14px;
+  border: 1px solid colors.$borderColor;
+  background:
+    linear-gradient(
+      160deg,
+      hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)) / 0.16),
+      hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.02)
+    ),
+    colors.$surfaceColor;
+  box-shadow: 0 22px 44px
+    hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.22);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  z-index: 260;
+}
+
+.rb-bottom-bar__tool-menu-title {
+  font-size: 11px;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+  color: colors.$mutedTextColor;
+  padding: 2px 8px 6px;
+}
+
+.rb-bottom-bar__tool-menu-item {
+  border: 1px solid transparent;
+  background: transparent;
+  color: colors.$textColor;
+  text-align: left;
+  padding: 10px 12px;
+  border-radius: 10px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  transition: all 0.18s ease;
+
+  &:hover {
+    border-color: hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)) / 0.45);
+    background: hsl(var(--primary, var(--rb-primary, 221.2 83.2% 53.3%)) / 0.12);
+  }
+}
+
+.rb-bottom-bar__tool-menu-item-label {
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.rb-bottom-bar__tool-menu-item-desc {
+  font-size: 11px;
+  color: colors.$mutedTextColor;
+}