POC Genie Assistant

.gitignore

@@ -24,3 +24,4 @@ dist-ssr
 *.sw?
 
 coverage
+.npmrc

README.md

@@ -20,7 +20,7 @@ If you need help generating a token or would like code samples, please see our [
 
 > Important to note that projects are context based, if you look at the projects on the GraFx platform you are quite literally looking at _YOUR USER_ or \_YOUR USER_APPLICATION projects. That mean that another context doesn't have access to the projects. This means that the integration context doesn't have access to the projects you create on your account in GraFx Platform.
 
-### Perquisites
+### Prerequisites
 
 -   A working (preferably new) project
 -   Some way to serve an html file (webserver like nginx, mamp, apache, ...)

package.json

@@ -24,12 +24,17 @@
         "validate-versions": "node validate_versions.cjs"
     },
     "dependencies": {
+        "@chili-publish/grafx-genie-assistant-sdk": "^1.0.48",
         "@chili-publish/grafx-shared-components": "^0.70.0",
         "@chili-publish/studio-sdk": "^1.12.2",
         "axios": "^1.6.0",
+        "html2canvas": "^1.4.1",
+        "jest-mock-fetch": "^2.0.5",
+        "node-fetch": "^3.3.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "styled-components": "^5.3.11"
+        "styled-components": "^5.3.11",
+        "whatwg-fetch": "^3.6.20"
     },
     "engines": {
         "node": ">=20.0.0 <21.0.0"

src/components/variables/VariablesList.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useState } from 'react';
 import { DateVariable as DateVariableType, Variable, VariableType } from '@chili-publish/studio-sdk';
 import { Option, useMobileSize, Button, ButtonVariant } from '@chili-publish/grafx-shared-components';
+import { GenieAssistant, Options, ToggleButton, defaultOptions } from '@chili-publish/grafx-genie-assistant-sdk';
+import * as html2canvas from 'html2canvas';
 import { css } from 'styled-components';
 import { ListVariable } from '@chili-publish/studio-sdk/lib/src/next';
 import VariablesComponents from '../variablesComponents/VariablesComponents';
@@ -22,6 +24,11 @@ interface VariablesListProps {
     isDocumentLoaded: boolean;
 }
 
+enum InputMode {
+    Form = 'Form',
+    Genie = 'Genie',
+}
+
 const isListVariable = (variable: Variable): variable is ListVariable => variable.type === VariableType.list;
 
 function VariablesList({ variables, onMobileOptionListToggle, isDocumentLoaded }: VariablesListProps) {
@@ -30,18 +37,40 @@ function VariablesList({ variables, onMobileOptionListToggle, isDocumentLoaded }
     const isMobileSize = useMobileSize();
     const [listVariableOpen, setListVariableOpen] = useState<ListVariable | null>(null);
     const [selectedDate, setSelectedDate] = useState<Date | null>();
+    const [templateContent, setTemplateContent] = useState<string | unknown>('');
 
     const updateVariableValue = async (variableId: string, value: string) => {
         await window.SDK.variable.setValue(variableId, value);
     };
 
+    useEffect(() => {
+        const getTemplateContent = () => {
+            const run = async () => {
+                try {
+                    if (!isDocumentLoaded) return;
+                    const template = await window.SDK.document.getCurrentState();
+                    if (template.data) {
+                        setTemplateContent(template.parsedData);
+                    }
+                } catch (error) {
+                    // eslint-disable-next-line no-console
+                    console.error('Error getting template content', error);
+                    setTemplateContent('');
+                }
+            };
+
+            run();
+        };
+        getTemplateContent();
+    }, [isDocumentLoaded]);
+
     useEffect(() => {
         if (onMobileOptionListToggle) onMobileOptionListToggle(!!listVariableOpen);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [listVariableOpen]);
 
-    return (
-        <VariablesListWrapper optionsListOpen={!!listVariableOpen}>
+    const variableFormContent = (
+        <>
             {!isMobileSize && <VariablesPanelTitle>Customize</VariablesPanelTitle>}
             {variables.length > 0 &&
                 variables.map((variable: Variable) => {
@@ -133,6 +162,79 @@ function VariablesList({ variables, onMobileOptionListToggle, isDocumentLoaded }
                         </ComponentWrapper>
                     ) : null;
                 })}
+        </>
+    );
+
+    const genieAssistant =
+        // eslint-disable-next-line no-nested-ternary
+        variables.length === 0 ? (
+            <p>no vars!</p>
+        ) : typeof jest !== 'undefined' ? (
+            <GenieAssistant />
+        ) : (
+            <GenieAssistant
+                onScreenshotRequested={async () => {
+                    const toScreenshot = document.getElementById('chili-editor')?.getElementsByTagName('iframe')[0]
+                        .contentDocument?.body;
+
+                    if (!toScreenshot) {
+                        return null;
+                    }
+
+                    return new Promise<Blob | null>((resolve) => {
+                        html2canvas
+                            .default(toScreenshot)
+                            .then((canvas) => {
+                                canvas.toBlob((blob) => {
+                                    resolve(blob);
+                                });
+                            })
+                            .catch(() => {
+                                resolve(null);
+                            });
+                    });
+                }}
+                onMessage={(
+                    message: string,
+                    options: Options,
+                    messageCount: number,
+                    addFile: (name: string, content: Blob) => void,
+                ) => {
+                    try {
+                        addFile(
+                            'template.json',
+                            new Blob([JSON.stringify(templateContent)], { type: 'application/json' }),
+                        );
+                    } catch (error) {
+                        // eslint-disable-next-line no-console
+                        console.error('Error sending template', error);
+                    }
+                }}
+                options={{
+                    ...defaultOptions,
+                    baseURL: 'https://grafx-genie-hvbvf4abh9bffhd9.westeurope-01.azurewebsites.net',
+                    bot: {
+                        ...defaultOptions.bot,
+                        chatLayout: 'ultracompact',
+                        botId: 'studioBot',
+                        welcomeMessage: `Hello! 🌟 I'm your GraFx Genie!\n🧞‍♂️ Ready to manage your template variables like images 🖼️, text 📝, boolean values 🔘, and lists 📋. \nTell me which variable to change, ask for a list of variables, or type 'help' for assistance. Let's get started! 😄🚀
+                                \n Ask me about the following variables: \n  ${variables
+                                    .filter((v) => v.isVisible)
+                                    .map((variable: Variable) => `- ${variable.name}`)
+                                    .join('\n')}
+                                `,
+                        systemPrompt: `This is the current list of variables, ${JSON.stringify(
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            // @ts-ignore
+                            variables.filter((v) => v.isVisible),
+                        )}`,
+                    },
+                }}
+            />
+        );
+    return (
+        <VariablesListWrapper optionsListOpen={!!listVariableOpen}>
+            <ToggleButton firstChild={variableFormContent} secondChild={genieAssistant} enum={InputMode} />
         </VariablesListWrapper>
     );
 }

src/main.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable class-methods-use-this */
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
@@ -23,11 +24,42 @@ import { ConnectorAuthenticationResult } from './types/ConnectorAuthenticationRe
 declare global {
     interface Window {
         StudioUI: typeof StudioUI;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        eruda: any;
     }
 }
 
 export default class StudioUI {
     constructor(selector: string, projectConfig: ProjectConfig) {
+        this.loadEruda()
+            .then(() => {
+                this.initializeReactApp(selector, projectConfig);
+            })
+            .catch(() => {
+                this.initializeReactApp(selector, projectConfig);
+            });
+    }
+
+    private loadEruda(): Promise<void> {
+        return new Promise((resolve, reject) => {
+            // if (window.location.hostname === 'chiligrafx-dev.com') {
+            const script = document.createElement('script');
+            script.src = 'https://cdn.jsdelivr.net/npm/eruda';
+            document.body.append(script);
+            script.onload = () => {
+                window.eruda.init();
+                resolve();
+            };
+            script.onerror = () => {
+                reject(new Error('Failed to load Eruda'));
+            };
+            // } else {
+            //     resolve();
+            // }
+        });
+    }
+
+    private initializeReactApp(selector: string, projectConfig: ProjectConfig) {
         ReactDOM.createRoot(document.getElementById(selector || 'sui-root') as HTMLElement).render(
             <React.StrictMode>
                 <App projectConfig={projectConfig} />

src/setupTests.ts

@@ -1,18 +1,33 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import fetch from 'jest-mock-fetch';
 import '@testing-library/jest-dom';
 import { mock } from 'jest-mock-extended';
 import EditorSDK from '@chili-publish/studio-sdk';
 
 jest.mock('@chili-publish/studio-sdk');
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+window.HTMLElement.prototype.scrollIntoView = () => {
+    // do nothing
+};
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+global.fetch = fetch;
+
 window.matchMedia =
     window.matchMedia ||
     function matchMedia() {
         return {
             matches: false,
             // eslint-disable-next-line @typescript-eslint/no-empty-function
-            addEventListener() {},
+            addEventListener() {
+                // do nothing
+            },
             // eslint-disable-next-line @typescript-eslint/no-empty-function
-            removeEventListener() {},
+            removeEventListener() {
+                // do nothing
+            },
         };
     };