refactor: new prop to apply css properties to :root

memori-ai · Jan 3, 2025 · 055a189 · 055a189
1 parent 773feae
commit 055a189
Show file tree

Hide file tree

Showing 7 changed files with 495 additions and 11 deletions.
diff --git a/src/components/MemoriWidget/MemoriWidget.tsx b/src/components/MemoriWidget/MemoriWidget.tsx
@@ -414,6 +414,7 @@ export interface Props {
   userAvatar?: string | JSX.Element;
   useMathFormatting?: boolean;
   autoStart?: boolean;
+  applyVarsToRoot?: boolean;
 }
 
 const MemoriWidget = ({
@@ -465,6 +466,7 @@ const MemoriWidget = ({
   userAvatar,
   useMathFormatting = false,
   autoStart = false,
+  applyVarsToRoot = false,
 }: Props) => {
   const { t, i18n } = useTranslation();
 
@@ -2522,12 +2524,8 @@ const MemoriWidget = ({
 
   const integrationStylesheet = `
     ${
-      preview
-        ? '#preview,'
-        : selectedLayout === 'WEBSITE_ASSISTANT'
-        ? ''
-        : ':root,'
-    } .memori-widget, .memori-drawer, .memori-modal {
+      preview ? '#preview, ' : applyVarsToRoot ? ':root, ' : ''
+    }memori-client, .memori-widget, .memori-drawer, .memori-modal {
       ${Object.entries(integrationProperties)
         .map(([key, value]) => `${key}: ${value};`)
         .join('\n')}

diff --git a/src/components/layouts/FullPage.test.tsx b/src/components/layouts/FullPage.test.tsx
@@ -29,7 +29,27 @@ it('renders FullPage layout unchanged', () => {
           tenant={tenant}
           tenantID="aisuru.com"
           integration={integration}
-        layout="FULLPAGE"
+          layout="FULLPAGE"
+        />
+      </VisemeProvider>
+    </I18nWrapper>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders FullPage layout with root css properties unchanged', () => {
+  const { container } = render(
+    <I18nWrapper>
+      <VisemeProvider>
+        <Memori
+          showShare={true}
+          showSettings={true}
+          memori={memori}
+          tenant={tenant}
+          tenantID="aisuru.com"
+          integration={integration}
+          layout="FULLPAGE"
+          applyVarsToRoot
         />
       </VisemeProvider>
     </I18nWrapper>

diff --git a/src/components/layouts/__snapshots__/Chat.test.tsx.snap b/src/components/layouts/__snapshots__/Chat.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`renders Chat layout unchanged 1`] = `
   >
     <style>
       
-    :root, .memori-widget, .memori-drawer, .memori-modal {
+    memori-client, .memori-widget, .memori-drawer, .memori-modal {
       --memori-chat-bubble-bg: #fff;
 --memori-text-color: #2a2a2a;
 --memori-button-bg: #823ce1;