Style leaking and affecting other places of application.
Leave-it-blank opened this issue · comments
Styling issue:
When I add the react component for open-copiloit then it makes other component styling messed up, also adds boarder n stuff to things.
Here is how it should look
![Screenshot 2023-12-18 at 3 40 21 PM](https://private-user-images.githubusercontent.com/70465598/291243160-5db86949-44ca-4c26-ae3d-9757244977f5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIwNTIwNzIsIm5iZiI6MTcyMjA1MTc3MiwicGF0aCI6Ii83MDQ2NTU5OC8yOTEyNDMxNjAtNWRiODY5NDktNDRjYS00YzI2LWFlM2QtOTc1NzI0NDk3N2Y1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzI3VDAzNDI1MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTM4ZGZkN2I3MzIyYmUzYThkMzdlMzhiZjdlNjA1MzhhYTY5NGNmNTdiNDRhMjQxN2Y5NWEyMTk2OThmMDAzYjMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.QdbUPY5xvJ22NLTrEwcPPrHfL6b5srQuVR7gdlpqlsM)
and here how it looks with component
![Screenshot 2023-12-18 at 3 38 53 PM](https://private-user-images.githubusercontent.com/70465598/291243278-94ce0a82-49ff-43ae-968e-7088ef80c0b2.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIwNTIwNzIsIm5iZiI6MTcyMjA1MTc3MiwicGF0aCI6Ii83MDQ2NTU5OC8yOTEyNDMyNzgtOTRjZTBhODItNDlmZi00M2FlLTk2OGUtNzA4OGVmODBjMGIyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzI3VDAzNDI1MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWNmOGM4YmJiYTYwZGMzYWY2YTg5YjMyNzAyYzgxYTE0ZGJlYTY1NjQ0OTI3YWFlODlmNGM0Y2IxMWQ5MDZjYmEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Vhr3Om4G_hijBV-tPNjbyoa4eV8ym1KPmD49YzgGQHc)
aside from adding the component, I havent changed anything else.
`
"use client";
import Widget from "../_components/copilot/copilot";
import Nav from "./navbar-ver";
import React from "react";
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="relative flex ">
<Nav />
<div className="w-full"> {children}</div>
<Widget />
</div>
);
}
import { CopilotWidget, Root } from "@openchatai/copilot-widget"; // import the component
import "@openchatai/copilot-widget/index.css"; // the required styles
const options = {
apiUrl: "https://cloud.opencopilot.so/backend",
initialMessage: "How da?",
token: "fafaf",
triggerSelector: "#triggerSelector",
headers: {
// optional: you can pass your authentication tokens to the copilot or any other header you want to send with every request
Authorization: "Bearer your_auth_token_goes_here",
AnyKey: "AnyValue",
},
user: {
name: "Default User",
},
};
export default function Widget() {
return (
<Root options={options}>
<CopilotWidget triggerSelector="#copilot-trigger" />
</Root>
);
}
I am also using tailwind with shadcn ui kit
Thanks for reporting, we will make sure to ship something for it very soon.
Hey @Leave-it-blank Happy you submitted this issue,
I finally solved it (I managed to load the styles inside the shadow dom).
You should update the copilot-widget package now and no need to load the styles any more
Note That:
The widget is now fluid (Takes 100% of the container), and static