θΏ™ζ˜―indexlocζδΎ›ηš„ζœεŠ‘οΌŒδΈθ¦θΎ“ε…₯任何密码
Skip to content

Patch Embed styles with prefixing #1799

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 1, 2024
Merged

Patch Embed styles with prefixing #1799

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b210340
Patch Embed styles with prefixing
timothycarambat Jul 1, 2024
2545538
forgot files
timothycarambat Jul 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@
"adoc",
"aibitat",
"AIbitat",
"allm",
"anythingllm",
"Astra",
"Chartable",
"cleancss",
"comkey",
"cooldown",
"cooldowns",
Expand Down
15 changes: 11 additions & 4 deletions embed/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand All @@ -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"
}
}
}
10 changes: 10 additions & 0 deletions embed/postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import tailwindConfig from './tailwind.config.js'

export default {
plugins: [
tailwind(tailwindConfig),
autoprefixer,
],
}
26 changes: 13 additions & 13 deletions embed/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
<Head />
<div
id="anything-llm-embed-chat-container"
className={`fixed inset-0 z-50 ${isChatOpen ? "block" : "hidden"}`}
className={`allm-fixed allm-inset-0 allm-z-50 ${isChatOpen ? "allm-block" : "allm-hidden"}`}
>
<div
className={`${windowHeight} ${windowWidth} h-full w-full bg-white fixed bottom-0 right-0 mb-4 md:mr-4 rounded-2xl border border-gray-300 shadow-[0_4px_14px_rgba(0,0,0,0.25)] ${positionClasses[position]}`}
style={{
maxWidth: windowWidth,
maxHeight: windowHeight,
}}
className={`allm-h-full allm-w-full allm-bg-white allm-fixed allm-bottom-0 allm-right-0 allm-mb-4 allm-md:mr-4 allm-rounded-2xl allm-border allm-border-gray-300 allm-shadow-[0_4px_14px_rgba(0,0,0,0.25)] ${positionClasses[position]}`}
id="anything-llm-chat"
>
{isChatOpen && (
Expand All @@ -57,7 +57,7 @@ export default function App() {
{!isChatOpen && (
<div
id="anything-llm-embed-chat-button-container"
className={`fixed bottom-0 ${positionClasses[position]} mb-4 z-50`}
className={`allm-fixed allm-bottom-0 ${positionClasses[position]} allm-mb-4 allm-z-50`}
>
<OpenButton
settings={embedSettings}
Expand Down
12 changes: 6 additions & 6 deletions ...d/src/components/ChatWindow/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Tooltip } from "react-tooltip";

const Actions = ({ message }) => {
return (
<div className="flex justify-start items-center gap-x-4">
<div className="allm-flex allm-justify-start allm-items-center allm-gap-x-4">
<CopyMessage message={message} />
{/* Other actions to go here later. */}
</div>
Expand All @@ -16,25 +16,25 @@ function CopyMessage({ message }) {
const { copied, copyText } = useCopyText();
return (
<>
<div className="mt-3 relative">
<div className="allm-mt-3 allm-relative">
<button
data-tooltip-id="copy-assistant-text"
data-tooltip-content="Copy"
className="text-zinc-300"
className="allm-border-none allm-text-zinc-300"
onClick={() => copyText(message)}
>
{copied ? (
<Check size={18} className="mb-1" />
<Check size={18} className="allm-mb-1" />
) : (
<ClipboardText size={18} className="mb-1" />
<ClipboardText size={18} className="allm-mb-1" />
)}
</button>
</div>
<Tooltip
id="copy-assistant-text"
place="bottom"
delayShow={300}
className="tooltip !text-xs"
className="allm-tooltip !allm-text-xs"
/>
</>
);
Expand Down
46 changes: 26 additions & 20 deletions embed/src/components/ChatWindow/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div className="py-[5px]">
{role === "assistant" && (
<div
className={`text-[10px] font-medium text-gray-400 ml-[54px] mr-6 mb-2 text-left`}
className={`allm-text-[10px] allm-text-gray-400 allm-ml-[54px] allm-mr-6 allm-mb-2 allm-text-left allm-font-sans`}
>
{embedderSettings.settings.assistantName ||
"Anything LLM Chat Assistant"}
Expand All @@ -30,42 +30,48 @@ const HistoricalMessage = forwardRef(
<div
key={uuid}
ref={ref}
className={`flex items-start w-full h-fit ${
role === "user" ? "justify-end" : "justify-start"
className={`allm-flex allm-items-start allm-w-full allm-h-fit ${
role === "user" ? "allm-justify-end" : "allm-justify-start"
}`}
>
{role === "assistant" && (
<img
src={embedderSettings.settings.assistantIcon || AnythingLLMIcon}
alt="Anything LLM Icon"
className="w-9 h-9 flex-shrink-0 ml-2 mt-2"
className="allm-w-9 allm-h-9 allm-flex-shrink-0 allm-ml-2 allm-mt-2"
id="anything-llm-icon"
/>
)}
<div
style={{ wordBreak: "break-word" }}
className={`py-[11px] px-4 flex flex-col ${
style={{
wordBreak: "break-word",
backgroundColor:
role === "user"
? embedderSettings.USER_STYLES.msgBg
: embedderSettings.ASSISTANT_STYLES.msgBg,
}}
className={`allm-py-[11px] allm-px-4 allm-flex allm-flex-col allm-font-sans ${
error
? "bg-red-200 rounded-lg mr-[37px] ml-[9px]"
? "allm-bg-red-200 allm-rounded-lg allm-mr-[37px] allm-ml-[9px]"
: role === "user"
? `${embedderSettings.USER_STYLES} anything-llm-user-message`
: `${embedderSettings.ASSISTANT_STYLES} anything-llm-assistant-message`
} shadow-[0_4px_14px_rgba(0,0,0,0.25)]`}
? `${embedderSettings.USER_STYLES.base} allm-anything-llm-user-message`
: `${embedderSettings.ASSISTANT_STYLES.base} allm-anything-llm-assistant-message`
} allm-shadow-[0_4px_14px_rgba(0,0,0,0.25)]`}
>
<div className="flex">
<div className="allm-flex">
{error ? (
<div className="p-2 rounded-lg bg-red-50 text-red-500">
<span className={`inline-block `}>
<Warning className="h-4 w-4 mb-1 inline-block" /> Could not
respond to message.
<div className="allm-p-2 allm-rounded-lg allm-bg-red-50 allm-text-red-500">
<span className={`allm-inline-block `}>
<Warning className="allm-h-4 allm-w-4 allm-mb-1 allm-inline-block" />{" "}
Could not respond to message.
</span>
<p className="text-xs font-mono mt-2 border-l-2 border-red-500 pl-2 bg-red-300 p-2 rounded-sm">
<p className="allm-text-xs allm-font-mono allm-mt-2 allm-border-l-2 allm-border-red-500 allm-pl-2 allm-bg-red-300 allm-p-2 allm-rounded-sm">
{error}
</p>
</div>
) : (
<span
className={`whitespace-pre-line font-medium flex flex-col gap-y-1 ${textSize} leading-[20px]`}
className={`allm-whitespace-pre-line allm-flex allm-flex-col allm-gap-y-1 ${textSize} allm-leading-[20px]`}
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(renderMarkdown(message)),
}}
Expand All @@ -77,7 +83,7 @@ const HistoricalMessage = forwardRef(

{sentAt && (
<div
className={`text-[10px] font-medium text-gray-400 ml-[54px] mr-6 mt-2 ${role === "user" ? "text-right" : "text-left"}`}
className={`allm-font-sans allm-text-[10px] allm-text-gray-400 allm-ml-[54px] allm-mr-6 allm-mt-2 ${role === "user" ? "allm-text-right" : "allm-text-left"}`}
>
{formatDate(sentAt)}
</div>
Expand Down
62 changes: 37 additions & 25 deletions embed/src/components/ChatWindow/ChatContainer/ChatHistory/PromptReply/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,23 @@ const PromptReply = forwardRef(

if (pending) {
return (
<div className={`flex items-start w-full h-fit justify-start`}>
<div
className={`allm-flex allm-items-start allm-w-full allm-h-fit allm-justify-start`}
>
<img
src={embedderSettings.settings.assistantIcon || AnythingLLMIcon}
alt="Anything LLM Icon"
className="w-9 h-9 flex-shrink-0 ml-2"
className="allm-w-9 allm-h-9 allm-flex-shrink-0 allm-ml-2"
/>
<div
style={{ wordBreak: "break-word" }}
className={`py-[11px] px-4 flex flex-col ${embedderSettings.ASSISTANT_STYLES} shadow-[0_4px_14px_rgba(0,0,0,0.25)]`}
style={{
wordBreak: "break-word",
backgroundColor: embedderSettings.ASSISTANT_STYLES.msgBg,
}}
className={`allm-py-[11px] allm-px-4 allm-flex allm-flex-col ${embedderSettings.ASSISTANT_STYLES.base} allm-shadow-[0_4px_14px_rgba(0,0,0,0.25)]`}
>
<div className="flex gap-x-5">
<div className="mx-4 my-1 dot-falling"></div>
<div className="allm-flex allm-gap-x-5">
<div className="allm-mx-4 allm-my-1 allm-dot-falling"></div>
</div>
</div>
</div>
Expand All @@ -31,23 +36,27 @@ const PromptReply = forwardRef(

if (error) {
return (
<div className={`flex items-end w-full h-fit justify-start`}>
<div
className={`allm-flex allm-items-end allm-w-full allm-h-fit allm-justify-start`}
>
<img
src={embedderSettings.settings.assistantIcon || AnythingLLMIcon}
alt="Anything LLM Icon"
className="w-9 h-9 flex-shrink-0 ml-2"
className="allm-w-9 allm-h-9 allm-flex-shrink-0 allm-ml-2"
/>
<div
style={{ wordBreak: "break-word" }}
className={`py-[11px] px-4 rounded-lg flex flex-col bg-red-200 shadow-[0_4px_14px_rgba(0,0,0,0.25)] mr-[37px] ml-[9px]`}
className={`allm-py-[11px] allm-px-4 allm-rounded-lg allm-flex allm-flex-col allm-bg-red-200 allm-shadow-[0_4px_14px_rgba(0,0,0,0.25)] allm-mr-[37px] allm-ml-[9px]`}
>
<div className="flex gap-x-5">
<div className="allm-flex allm-gap-x-5">
<span
className={`inline-block p-2 rounded-lg bg-red-50 text-red-500`}
className={`allm-inline-block allm-p-2 allm-rounded-lg allm-bg-red-50 allm-text-red-500`}
>
<Warning className="h-4 w-4 mb-1 inline-block" /> Could not
respond to message.
<span className="text-xs">Reason: {error || "unknown"}</span>
<Warning className="allm-h-4 allm-w-4 allm-mb-1 allm-inline-block" />{" "}
Could not respond to message.
<span className="allm-text-xs">
Reason: {error || "unknown"}
</span>
</span>
</div>
</div>
Expand All @@ -56,39 +65,42 @@ const PromptReply = forwardRef(
}

return (
<div className="py-[5px]">
<div className="allm-py-[5px]">
<div
className={`text-[10px] font-medium text-gray-400 ml-[54px] mr-6 mb-2 text-left`}
className={`allm-text-[10px] allm-text-gray-400 allm-ml-[54px] allm-mr-6 allm-mb-2 allm-text-left allm-font-sans`}
>
{embedderSettings.settings.assistantName ||
"Anything LLM Chat Assistant"}
</div>
<div
key={uuid}
ref={ref}
className={`flex items-start w-full h-fit justify-start`}
className={`allm-flex allm-items-start allm-w-full allm-h-fit allm-justify-start`}
>
<img
src={embedderSettings.settings.assistantIcon || AnythingLLMIcon}
alt="Anything LLM Icon"
className="w-9 h-9 flex-shrink-0 ml-2"
className="allm-w-9 allm-h-9 allm-flex-shrink-0 allm-ml-2"
/>
<div
style={{ wordBreak: "break-word" }}
className={`py-[11px] px-4 flex flex-col ${
error ? "bg-red-200" : embedderSettings.ASSISTANT_STYLES
} shadow-[0_4px_14px_rgba(0,0,0,0.25)]`}
style={{
wordBreak: "break-word",
backgroundColor: embedderSettings.ASSISTANT_STYLES.msgBg,
}}
className={`allm-py-[11px] allm-px-4 allm-flex allm-flex-col ${
error ? "allm-bg-red-200" : embedderSettings.ASSISTANT_STYLES.base
} allm-shadow-[0_4px_14px_rgba(0,0,0,0.25)]`}
>
<div className="flex gap-x-5">
<div className="allm-flex allm-gap-x-5">
<span
className={`reply whitespace-pre-line font-normal text-sm md:text-sm flex flex-col gap-y-1`}
className={`allm-font-sans allm-reply allm-whitespace-pre-line allm-font-normal allm-text-sm allm-md:text-sm allm-flex allm-flex-col allm-gap-y-1`}
dangerouslySetInnerHTML={{ __html: renderMarkdown(reply) }}
/>
</div>
</div>
</div>
<div
className={`text-[10px] font-medium text-gray-400 ml-[54px] mr-6 mt-2 text-left`}
className={`allm-text-[10px] allm-text-gray-400 allm-ml-[54px] allm-mr-6 allm-mt-2 allm-text-left allm-font-sans`}
>
{formatDate(Date.now() / 1000)}
</div>
Expand Down
Loading