From 245d1b878ed51582fda01f992fd58a78abffafb3 Mon Sep 17 00:00:00 2001
From: Timothy Carambat
Date: Mon, 1 Jul 2024 16:32:23 -0700
Subject: [PATCH] Patch Embed styles with prefixing (#1799)
* Patch Embed styles with prefixing
* forgot files
---
.vscode/settings.json | 2 +
embed/package.json | 15 +-
embed/postcss.config.js | 10 +
embed/src/App.jsx | 26 +-
.../HistoricalMessage/Actions/index.jsx | 12 +-
.../ChatHistory/HistoricalMessage/index.jsx | 46 +-
.../ChatHistory/PromptReply/index.jsx | 62 ++-
.../ChatContainer/ChatHistory/index.jsx | 27 +-
.../ChatContainer/PromptInput/index.jsx | 23 +-
.../ChatWindow/ChatContainer/index.jsx | 4 +-
.../components/ChatWindow/Header/index.jsx | 29 +-
embed/src/components/ChatWindow/index.jsx | 14 +-
embed/src/components/Head.jsx | 51 +--
embed/src/components/OpenButton/index.jsx | 3 +-
embed/src/components/ResetChat/index.jsx | 5 +-
embed/src/components/SessionId/index.jsx | 4 +-
embed/src/components/Sponsor/index.jsx | 5 +-
embed/src/index.css | 3 +
embed/src/main.jsx | 13 +-
embed/src/static/tailwind@3.4.1.js | 209 ---------
embed/src/utils/constants.js | 14 +
embed/tailwind.config.js | 103 +++++
embed/vite.config.js | 4 +
embed/yarn.lock | 429 +++++++++++++++++-
.../embed/anythingllm-chat-widget.min.css | 1 +
.../embed/anythingllm-chat-widget.min.js | 11 +-
26 files changed, 733 insertions(+), 392 deletions(-)
create mode 100644 embed/postcss.config.js
create mode 100644 embed/src/index.css
delete mode 100644 embed/src/static/tailwind@3.4.1.js
create mode 100644 embed/tailwind.config.js
create mode 100644 frontend/public/embed/anythingllm-chat-widget.min.css
diff --git a/.vscode/settings.json b/.vscode/settings.json
index b9bde685..aafdb17d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -3,9 +3,11 @@
"adoc",
"aibitat",
"AIbitat",
+ "allm",
"anythingllm",
"Astra",
"Chartable",
+ "cleancss",
"comkey",
"cooldown",
"cooldowns",
diff --git a/embed/package.json b/embed/package.json
index 712af8e6..111b68f8 100644
--- a/embed/package.json
+++ b/embed/package.json
@@ -6,9 +6,12 @@
"scripts": {
"dev": "nodemon -e js,jsx,css --watch src --exec \"yarn run dev:preview\"",
"dev:preview": "yarn run dev:build && yarn serve . -p 3080 --no-clipboard",
- "dev:build": "vite build && cat src/static/tailwind@3.4.1.js >> dist/anythingllm-chat-widget.js",
- "build": "vite build && cat src/static/tailwind@3.4.1.js >> dist/anythingllm-chat-widget.js && npx terser --compress -o dist/anythingllm-chat-widget.min.js -- dist/anythingllm-chat-widget.js",
- "build:publish": "yarn build && mkdir -p ../frontend/public/embed && cp -r dist/anythingllm-chat-widget.min.js ../frontend/public/embed/anythingllm-chat-widget.min.js",
+ "dev:build": "vite build && yarn styles",
+ "styles": "npx cleancss -o dist/anythingllm-chat-widget.min.css dist/style.css",
+ "build": "vite build && yarn styles && npx terser --compress -o dist/anythingllm-chat-widget.min.js -- dist/anythingllm-chat-widget.js",
+ "build:publish": "yarn build:publish:js && yarn build:publish:css",
+ "build:publish:js": "yarn build && mkdir -p ../frontend/public/embed && cp -r dist/anythingllm-chat-widget.min.js ../frontend/public/embed/anythingllm-chat-widget.min.js",
+ "build:publish:css": "cp -r dist/anythingllm-chat-widget.min.css ../frontend/public/embed/anythingllm-chat-widget.min.css",
"lint": "yarn prettier --ignore-path ../.prettierignore --write ./src"
},
"dependencies": {
@@ -29,16 +32,20 @@
"@types/react-dom": "^18.2.15",
"@vitejs/plugin-react": "^4.2.0",
"autoprefixer": "^10.4.14",
+ "clean-css": "^5.3.3",
+ "clean-css-cli": "^5.6.3",
"eslint": "^8.53.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.4",
"globals": "^13.21.0",
"nodemon": "^2.0.22",
+ "postcss": "^8.4.23",
"prettier": "^3.0.3",
"serve": "^14.2.1",
+ "tailwindcss": "3.4.1",
"terser": "^5.27.0",
"vite": "^5.0.0",
"vite-plugin-singlefile": "^0.13.5"
}
-}
+}
\ No newline at end of file
diff --git a/embed/postcss.config.js b/embed/postcss.config.js
new file mode 100644
index 00000000..568a99e3
--- /dev/null
+++ b/embed/postcss.config.js
@@ -0,0 +1,10 @@
+import tailwind from 'tailwindcss'
+import autoprefixer from 'autoprefixer'
+import tailwindConfig from './tailwind.config.js'
+
+export default {
+ plugins: [
+ tailwind(tailwindConfig),
+ autoprefixer,
+ ],
+}
\ No newline at end of file
diff --git a/embed/src/App.jsx b/embed/src/App.jsx
index 44653031..50e3f1f1 100644
--- a/embed/src/App.jsx
+++ b/embed/src/App.jsx
@@ -20,29 +20,29 @@ export default function App() {
if (!embedSettings.loaded) return null;
const positionClasses = {
- "bottom-left": "bottom-0 left-0 ml-4",
- "bottom-right": "bottom-0 right-0 mr-4",
- "top-left": "top-0 left-0 ml-4 mt-4",
- "top-right": "top-0 right-0 mr-4 mt-4",
+ "bottom-left": "allm-bottom-0 allm-left-0 allm-ml-4",
+ "bottom-right": "allm-bottom-0 allm-right-0 allm-mr-4",
+ "top-left": "allm-top-0 allm-left-0 allm-ml-4 allm-mt-4",
+ "top-right": "allm-top-0 allm-right-0 allm-mr-4 allm-mt-4",
};
const position = embedSettings.position || "bottom-right";
- const windowWidth = embedSettings.windowWidth
- ? `max-w-[${embedSettings.windowWidth}]`
- : "max-w-[400px]";
- const windowHeight = embedSettings.windowHeight
- ? `max-h-[${embedSettings.windowHeight}]`
- : "max-h-[700px]";
+ const windowWidth = embedSettings.windowWidth ?? "400px";
+ const windowHeight = embedSettings.windowHeight ?? "700px";
return (
<>
{isChatOpen && (
@@ -57,7 +57,7 @@ export default function App() {
{!isChatOpen && (