fix: avoid conflicts of same classname on some websites

src/components/ConversationCard/index.jsx

@@ -197,7 +197,7 @@ function ConversationCard(props) {
             onClick={() => {
               const position = { x: window.innerWidth / 2 - 300, y: window.innerHeight / 2 - 200 }
               const toolbarContainer = createElementAtPosition(position.x, position.y)
-              toolbarContainer.className = 'toolbar-container-not-queryable'
+              toolbarContainer.className = 'chatgptbox-toolbar-container-not-queryable'
               render(
                 <FloatingToolbar
                   session={session}

src/components/DecisionCard/index.jsx

@@ -39,7 +39,7 @@ function DecisionCard(props) {
 
     const container = props.container
     const siteConfig = props.siteConfig
-    container.classList.remove('sidebar-free')
+    container.classList.remove('chatgptbox-sidebar-free')
 
     if (config.appendQuery) {
       const appendContainer = getPossibleElementByQuerySelector([config.appendQuery])
@@ -71,7 +71,7 @@ function DecisionCard(props) {
       } else {
         const appendContainer = getPossibleElementByQuerySelector(siteConfig.appendContainerQuery)
         if (appendContainer) {
-          container.classList.add('sidebar-free')
+          container.classList.add('chatgptbox-sidebar-free')
           appendContainer.appendChild(container)
         } else {
           const resultsContainerQuery = getPossibleElementByQuerySelector(

src/components/FloatingToolbar/index.jsx

@@ -84,8 +84,11 @@ function FloatingToolbar(props) {
           onStop={dragEvent.onStop}
           position={virtualPosition}
         >
-          <div className="gpt-selection-window" style={{ width: windowSize[0] * 0.4 + 'px' }}>
-            <div className="chat-gpt-container">
+          <div
+            className="chatgptbox-selection-window"
+            style={{ width: windowSize[0] * 0.4 + 'px' }}
+          >
+            <div className="chatgptbox-container">
               <ConversationCard
                 session={props.session}
                 question={prompt}
@@ -112,7 +115,7 @@ function FloatingToolbar(props) {
         tools.push(
           cloneElement(toolConfig.icon, {
             size: 20,
-            className: 'gpt-selection-toolbar-button',
+            className: 'chatgptbox-selection-toolbar-button',
             title: toolConfig.label,
             onClick: async () => {
               setPrompt(await toolConfig.genPrompt(selection))
@@ -125,7 +128,7 @@ function FloatingToolbar(props) {
 
     return (
       <div data-theme={config.themeMode}>
-        <div className="gpt-selection-toolbar">
+        <div className="chatgptbox-selection-toolbar">
           <img src={logo} width="24" height="24" style="user-select:none;" />
           {tools}
         </div>