fix: avoid conflicts of same classname on some websites

Author: josStorer

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>

src/content-script/index.jsx

@@ -28,7 +28,7 @@ async function mountComponent(siteConfig, userConfig) {
   )
     return
 
-  document.querySelectorAll('.chat-gpt-container').forEach((e) => {
+  document.querySelectorAll('.chatgptbox-container').forEach((e) => {
     unmountComponentAtNode(e)
     e.remove()
   })
@@ -37,12 +37,12 @@ async function mountComponent(siteConfig, userConfig) {
   if (userConfig.inputQuery) question = await getInput([userConfig.inputQuery])
   if (!question && siteConfig) question = await getInput(siteConfig.inputQuery)
 
-  document.querySelectorAll('.chat-gpt-container').forEach((e) => {
+  document.querySelectorAll('.chatgptbox-container').forEach((e) => {
     unmountComponentAtNode(e)
     e.remove()
   })
   const container = document.createElement('div')
-  container.className = 'chat-gpt-container'
+  container.className = 'chatgptbox-container'
   render(
     <DecisionCard
       session={initSession()}
@@ -107,7 +107,7 @@ async function prepareForSelectionTools() {
       if (selection) {
         const position = { x: e.clientX + 15, y: e.clientY - 15 }
         toolbarContainer = createElementAtPosition(position.x, position.y)
-        toolbarContainer.className = 'toolbar-container'
+        toolbarContainer.className = 'chatgptbox-toolbar-container'
         render(
           <FloatingToolbar
             session={initSession()}
@@ -123,7 +123,7 @@ async function prepareForSelectionTools() {
   document.addEventListener('mousedown', (e) => {
     if (toolbarContainer && toolbarContainer.contains(e.target)) return
 
-    document.querySelectorAll('.toolbar-container').forEach((e) => e.remove())
+    document.querySelectorAll('.chatgptbox-toolbar-container').forEach((e) => e.remove())
   })
   document.addEventListener('keydown', (e) => {
     if (
@@ -157,7 +157,7 @@ async function prepareForSelectionToolsTouch() {
           y: e.changedTouches[0].clientY - 15,
         }
         toolbarContainer = createElementAtPosition(position.x, position.y)
-        toolbarContainer.className = 'toolbar-container'
+        toolbarContainer.className = 'chatgptbox-toolbar-container'
         render(
           <FloatingToolbar
             session={initSession()}
@@ -173,7 +173,7 @@ async function prepareForSelectionToolsTouch() {
   document.addEventListener('touchstart', (e) => {
     if (toolbarContainer && toolbarContainer.contains(e.target)) return
 
-    document.querySelectorAll('.toolbar-container').forEach((e) => e.remove())
+    document.querySelectorAll('.chatgptbox-toolbar-container').forEach((e) => e.remove())
   })
 }
 
@@ -191,7 +191,7 @@ async function prepareForRightClickMenu() {
       if (data.itemId === 'new') {
         const position = { x: menuX, y: menuY }
         const container = createElementAtPosition(position.x, position.y)
-        container.className = 'toolbar-container-not-queryable'
+        container.className = 'chatgptbox-toolbar-container-not-queryable'
         render(
           <FloatingToolbar
             session={initSession()}
@@ -207,7 +207,7 @@ async function prepareForRightClickMenu() {
       } else {
         const position = { x: menuX, y: menuY }
         const container = createElementAtPosition(position.x, position.y)
-        container.className = 'toolbar-container-not-queryable'
+        container.className = 'chatgptbox-toolbar-container-not-queryable'
         render(
           <FloatingToolbar
             session={initSession()}

src/content-script/styles.scss

@@ -36,11 +36,11 @@
   --dragbar-color: #ccced0;
 }
 
-.sidebar-free {
+.chatgptbox-sidebar-free {
   margin-left: 60px;
 }
 
-.chat-gpt-container {
+.chatgptbox-container {
   width: 100%;
   flex-basis: 0;
   flex-grow: 1;
@@ -101,7 +101,7 @@
 
   .gpt-loading {
     color: var(--font-color);
-    animation: gpt-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    animation: chatgptbox-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
 
   .code-copy-btn {
@@ -202,7 +202,7 @@
   }
 }
 
-@keyframes gpt-pulse {
+@keyframes chatgptbox-pulse {
   0%,
   100% {
     opacity: 1;
@@ -213,7 +213,7 @@
   }
 }
 
-.gpt-selection-toolbar {
+.chatgptbox-selection-toolbar {
   display: flex;
   align-items: center;
   border-radius: 15px;
@@ -222,7 +222,7 @@
   box-shadow: 4px 2px 4px rgba(0, 0, 0, 0.2);
 }
 
-.gpt-selection-toolbar-button {
+.chatgptbox-selection-toolbar-button {
   margin-left: 2px;
   padding: 2px;
   border-radius: 30px;
@@ -231,11 +231,11 @@
   cursor: pointer;
 }
 
-.gpt-selection-toolbar-button:hover {
+.chatgptbox-selection-toolbar-button:hover {
   background-color: #d4d5da;
 }
 
-.gpt-selection-window {
+.chatgptbox-selection-window {
   height: auto;
   border-radius: 8px;
   background-color: var(--theme-color);