Style leaking and affecting other places of application.

[Leave-it-blank]

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

and here how it looks with component

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

[gharbat]

Thanks for reporting, we will make sure to ship something for it very soon.

[Ahmad Falta]

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