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 && (
{ return ( -
+
{/* Other actions to go here later. */}
@@ -16,17 +16,17 @@ function CopyMessage({ message }) { const { copied, copyText } = useCopyText(); return ( <> -
+
@@ -34,7 +34,7 @@ function CopyMessage({ message }) { id="copy-assistant-text" place="bottom" delayShow={300} - className="tooltip !text-xs" + className="allm-tooltip !allm-text-xs" /> ); diff --git a/embed/src/components/ChatWindow/ChatContainer/ChatHistory/HistoricalMessage/index.jsx b/embed/src/components/ChatWindow/ChatContainer/ChatHistory/HistoricalMessage/index.jsx index 2eab8cca..d4bc867e 100644 --- a/embed/src/components/ChatWindow/ChatContainer/ChatHistory/HistoricalMessage/index.jsx +++ b/embed/src/components/ChatWindow/ChatContainer/ChatHistory/HistoricalMessage/index.jsx @@ -14,14 +14,14 @@ const HistoricalMessage = forwardRef( ref ) => { const textSize = !!embedderSettings.settings.textSize - ? `text-[${embedderSettings.settings.textSize}px]` - : "text-sm"; + ? `allm-text-[${embedderSettings.settings.textSize}px]` + : "allm-text-sm"; return (
{role === "assistant" && (
{embedderSettings.settings.assistantName || "Anything LLM Chat Assistant"} @@ -30,42 +30,48 @@ const HistoricalMessage = forwardRef(
{role === "assistant" && ( Anything LLM Icon )}
-
+
{error ? ( -
- - Could not - respond to message. +
+ + {" "} + Could not respond to message. -

+

{error}

) : ( {formatDate(sentAt)}
diff --git a/embed/src/components/ChatWindow/ChatContainer/ChatHistory/PromptReply/index.jsx b/embed/src/components/ChatWindow/ChatContainer/ChatHistory/PromptReply/index.jsx index 87701222..adc44285 100644 --- a/embed/src/components/ChatWindow/ChatContainer/ChatHistory/PromptReply/index.jsx +++ b/embed/src/components/ChatWindow/ChatContainer/ChatHistory/PromptReply/index.jsx @@ -11,18 +11,23 @@ const PromptReply = forwardRef( if (pending) { return ( -
+
Anything LLM Icon
-
-
+
+
@@ -31,23 +36,27 @@ const PromptReply = forwardRef( if (error) { return ( -
+
Anything LLM Icon
-
+
- Could not - respond to message. - Reason: {error || "unknown"} + {" "} + Could not respond to message. + + Reason: {error || "unknown"} +
@@ -56,9 +65,9 @@ const PromptReply = forwardRef( } return ( -
+
{embedderSettings.settings.assistantName || "Anything LLM Chat Assistant"} @@ -66,29 +75,32 @@ const PromptReply = forwardRef(
Anything LLM Icon
-
+
{formatDate(Date.now() / 1000)}
diff --git a/embed/src/components/ChatWindow/ChatContainer/ChatHistory/index.jsx b/embed/src/components/ChatWindow/ChatContainer/ChatHistory/index.jsx index 0719043f..70bf2ca2 100644 --- a/embed/src/components/ChatWindow/ChatContainer/ChatHistory/index.jsx +++ b/embed/src/components/ChatWindow/ChatContainer/ChatHistory/index.jsx @@ -46,9 +46,9 @@ export default function ChatHistory({ settings = {}, history = [] }) { if (history.length === 0) { return ( -
-
-

+

+
+

{settings?.greeting ?? "Send a chat to get started."}

@@ -58,7 +58,7 @@ export default function ChatHistory({ settings = {}, history = [] }) { return (
@@ -97,12 +97,12 @@ export default function ChatHistory({ settings = {}, history = [] }) { ); })} {!isAtBottom && ( -
-
-
+
+
+
-
-
- +
+
+
+
diff --git a/embed/src/components/ChatWindow/ChatContainer/PromptInput/index.jsx b/embed/src/components/ChatWindow/ChatContainer/PromptInput/index.jsx index 8a8b58cf..14961ca6 100644 --- a/embed/src/components/ChatWindow/ChatContainer/PromptInput/index.jsx +++ b/embed/src/components/ChatWindow/ChatContainer/PromptInput/index.jsx @@ -46,14 +46,17 @@ export default function PromptInput({ }; return ( -
+
-
-
-
+
+
+