Fix vite sync error with workaround

apps/interactor/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "start": "vite",
+    "start": "vite --force",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "format": "prettier --write .",

apps/interactor/vite.config.ts

@@ -9,7 +9,7 @@ export default defineConfig({
   },
   build: {
     commonjsOptions: {
-      include: [/core/, /extensions/, /bot-utils/, /guidance/, /node_modules/],
+      include: [/bot-utils/, /ui-kit/, /guidance/, /node_modules/],
     },
   },
 })

packages/ui-kit/rollup-plugin-update-vite-env.js

@@ -0,0 +1,35 @@
+const fs = require('fs');
+const path = require('path');
+
+const updateViteEnvPlugin = () => {
+  return {
+    name: 'update-env-plugin', // Name of the plugin
+    writeBundle() {
+      // Path to the .env file in your Vite project
+      const envPath = path.join(__dirname, '../../apps/interactor/.env');
+
+      fs.readFile(envPath, 'utf8', (err, data) => {
+        if (err) {
+          console.error('Error reading .env file:', err);
+          return;
+        }
+
+        // Generate a random number
+        const randomValue = Math.floor(Math.random() * 10000);
+
+        // Replace or add VITE_RANDOM variable
+        const updatedData =
+          data.replace(/VITE_RANDOM=\d*/, `VITE_RANDOM=${randomValue}`).trim() +
+          '\n';
+
+        // Write the updated data back to the .env file
+        fs.writeFile(envPath, updatedData, 'utf8', (err) => {
+          if (err) {
+            console.error('Error writing .env file:', err);
+          }
+        });
+      });
+    },
+  };
+};
+export default updateViteEnvPlugin;

packages/ui-kit/rollup.config.js

@@ -1,25 +1,26 @@
 /* eslint-disable */
-import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import typescript from "rollup-plugin-typescript2";
-import sass from "rollup-plugin-sass";
-import css from "rollup-plugin-import-css";
-const packageJson = require("./package.json");
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from 'rollup-plugin-typescript2';
+import sass from 'rollup-plugin-sass';
+import css from 'rollup-plugin-import-css';
+import updateViteEnvPlugin from './rollup-plugin-update-vite-env';
+const packageJson = require('./package.json');
 
 export default {
-  input: "src/index.ts",
+  input: 'src/index.ts',
   output: [
     {
       file: packageJson.main,
-      format: "cjs",
-      sourcemap: true
+      format: 'cjs',
+      sourcemap: true,
     },
     {
       file: packageJson.module,
-      format: "esm",
-      sourcemap: true
-    }
+      format: 'esm',
+      sourcemap: true,
+    },
   ],
   plugins: [
     peerDepsExternal(),
@@ -28,7 +29,8 @@ export default {
     typescript({ useTsconfigDeclarationDir: true }),
     css(),
     sass({
-      insert: true
-    })
-  ]
+      insert: true,
+    }),
+    updateViteEnvPlugin(),
+  ],
 };

packages/ui-kit/src/components/SlidePanel.scss

@@ -0,0 +1,27 @@
+.SlidePanel {
+  &__modal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: auto;
+    bottom: auto;
+    background: white;
+    overflow: auto;
+    outline: none;
+    padding: 20px;
+    width: 300px;
+    transition: transform 0.3s ease-in-out;
+    transform: translateX(-100%);
+  }
+
+  &__overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    transition: background-color 0.3s ease-in-out;
+    z-index: 3;
+  }
+}

packages/ui-kit/src/components/SlidePanel.tsx

@@ -0,0 +1,37 @@
+// SlidePanel.tsx
+
+import React, { useState } from 'react';
+import Modal from 'react-modal';
+import './SlidePanel.scss';
+
+Modal.setAppElement('#root');
+
+const SlidePanel: React.FC = () => {
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+
+  const openModal = () => {
+    setModalIsOpen(true);
+  };
+
+  const closeModal = () => {
+    setModalIsOpen(false);
+  };
+
+  return (
+    <div className="SlidePanel">
+      <button onClick={openModal}>Open Panel 21</button>
+      <Modal
+        isOpen={modalIsOpen}
+        onRequestClose={closeModal}
+        overlayClassName="SlidePanel__overlay"
+        className="SlidePanel__modal"
+      >
+        <h2>Options Panel</h2>
+        <button onClick={closeModal}>Close</button>
+        {/* Add your options here */}
+      </Modal>
+    </div>
+  );
+};
+
+export default SlidePanel;

packages/ui-kit/src/index.ts

@@ -17,6 +17,7 @@ import CheckBox from './components/CheckBox';
 import Tooltip from './components/Tooltip';
 import TagAutocomplete from './components/TagAutocomplete';
 import Slider from './components/Slider';
+import SlidePanel from './components/SlidePanel';
 import * as Icons from './assets/svg';
 
 export {
@@ -41,4 +42,5 @@ export {
   Icons,
   Colors,
   Slider,
+  SlidePanel,
 };