WP Ai Global Styles

ThemeFuse · May 2, 2024 · 7d60fd6 · 7d60fd6
1 parent 695ac3c
commit 7d60fd6
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 2 deletions.
diff --git a/config.dev.php b/config.dev.php
@@ -49,6 +49,7 @@ class Brizy_Config {
 	const CLOUD_SCREENSHOT = '/screenshot/%s';
 	const CLOUD_SCREENSHOTS = '/api/screenshots';
     const CLOUD_CUSTOM_FILES = '/api/custom_files';
+    const GENERATE_GLOBAL_STYLES_ENDPOINT = 'https://phplaravel-1109775-4163586.cloudwaysapps.com';
 	const WP_HTTP_TIMEOUT = 600;
 
 

diff --git a/config.php b/config.php
@@ -49,6 +49,7 @@ class Brizy_Config {
 	const CLOUD_SCREENSHOT = '/screenshot/%s';
 	const CLOUD_SCREENSHOTS = '/api/screenshots';
 	const CLOUD_CUSTOM_FILES = '/api/custom_files';
+	const GENERATE_GLOBAL_STYLES_ENDPOINT = 'https://phplaravel-1109775-4163586.cloudwaysapps.com';
     const WP_HTTP_TIMEOUT = 30;
 
 	// this file will be stored in uploads/brizy/

diff --git a/editor/editor/editor.php b/editor/editor/editor.php
@@ -93,6 +93,7 @@ public function getClientConfig($context)
             'project' => array(
                 'status' => $this->getProjectStatus(),
             ),
+	        'aiGlobalStyleUrl' => Brizy_Config::GENERATE_GLOBAL_STYLES_ENDPOINT
         ];
 
         $config = $this->getApiConfigFields($config, $context);

diff --git a/public/editor-client/src/aiGlobalStyles/index.ts b/public/editor-client/src/aiGlobalStyles/index.ts
@@ -0,0 +1,30 @@
+import { getStyles, getTypography } from "@/api";
+import { Config } from "@/config";
+import { t } from "@/utils/i18n";
+import { AiGlobalStyles, FontStyle, Palette } from "../types/DefaultTemplate";
+
+export const getAIGlobalStyles = (
+  config: Config
+): AiGlobalStyles<Palette, FontStyle> => {
+  return {
+    async regenerateColors(res, rej) {
+      try {
+        const styles = await getStyles(config);
+
+        res(styles.colorPalette);
+      } catch (e) {
+        rej(t("Failed to load meta.json"));
+      }
+    },
+    async regenerateTypography(res, rej) {
+      try {
+        const data = await getTypography(config);
+
+        res(data.fontStyles);
+      } catch (e) {
+        rej(t("Failed to load resolves for selected DefaultTemplate"));
+      }
+    },
+    label: t("Regenerate with AI")
+  };
+};
diff --git a/public/editor-client/src/api/index.ts b/public/editor-client/src/api/index.ts
@@ -1336,3 +1336,23 @@ export const deleteIcon = async (uid: string): Promise<Response> => {
   throw new Error(t("Failed to delete icon"));
 };
 //#endregion
+
+//#region AI Global Styles
+
+export const getStyles = async (config: Config) => {
+  const { aiGlobalStyleUrl } = config;
+
+  return await fetch(`${aiGlobalStyleUrl}/api/template/style`).then((r) =>
+    r.json()
+  );
+};
+
+export const getTypography = async (config: Config) => {
+  const { aiGlobalStyleUrl } = config;
+
+  return await fetch(`${aiGlobalStyleUrl}/api/template/typography`).then((r) =>
+    r.json()
+  );
+};
+
+//#endregion
diff --git a/public/editor-client/src/config.ts b/public/editor-client/src/config.ts
@@ -86,6 +86,7 @@ export interface Config {
   api: API;
   l10n?: Record<string, string>;
   collectionTypes: CollectionType[];
+  aiGlobalStyleUrl: string;
 }
 
 const templatesReader = parseStrict<Record<string, unknown>, DefaultTemplates>({
@@ -355,6 +356,10 @@ const reader = parseStrict<PLUGIN_ENV, Config>({
       })
     ),
     throwOnNullish("Invalid: project")
+  ),
+  aiGlobalStyleUrl: pipe(
+    mPipe(Obj.readKey("aiGlobalStyleUrl"), Str.read),
+    throwOnNullish("Invalid: aiGlobalStyleUrl")
   )
 });
 

diff --git a/public/editor-client/src/index.ts b/public/editor-client/src/index.ts
@@ -1,5 +1,6 @@
 import merge from "lodash/merge";
 import set from "lodash/set";
+import { getAIGlobalStyles } from "./aiGlobalStyles";
 import { doAiRequest } from "./aiText";
 import { autoSave } from "./autoSave";
 import { getCollectionItemsIds } from "./collectionItems/getCollectionItemsIds";
@@ -90,6 +91,11 @@ if (window.__VISUAL_CONFIG__) {
   // UI
   if (window.__VISUAL_CONFIG__.ui) {
     window.__VISUAL_CONFIG__.ui.publish = publish;
+    set(
+      window.__VISUAL_CONFIG__.ui,
+      ["leftSidebar", "styles"],
+      getAIGlobalStyles(config)
+    );
   }
 
   // Elements

diff --git a/public/editor-client/src/types/DefaultTemplate.ts b/public/editor-client/src/types/DefaultTemplate.ts
@@ -5,6 +5,15 @@ export interface DefaultBlock {
   value: Record<string, unknown>;
 }
 
+export interface AiGlobalStyles<T1, T2> {
+  regenerateColors: (res: Response<T1>, rej: Response<string>) => void;
+  regenerateTypography: (
+    res: Response<Promise<T2>>,
+    rej: Response<string>
+  ) => void;
+  label: string;
+}
+
 export interface DefaultTemplate<T1, T2> {
   label?: string;
   getMeta: (res: Response<T1>, rej: Response<string>) => void;
@@ -101,14 +110,14 @@ export interface Style {
   fontStyles: Array<FontStyle>;
 }
 
-interface Palette {
+export interface Palette {
   id: string;
   hex: string;
 }
 
 type fontSizeUnits = "px" | "%";
 
-interface FontStyle {
+export interface FontStyle {
   id: number | string;
   title: string;
   deletable: "on" | "off";