fix #661 (comment)

Author: josStorer

src/components/ConversationItem/index.jsx

@@ -35,7 +35,7 @@ export function ConversationItem({ type, content, descName, modelName, onRetry }
   switch (type) {
     case 'question':
       return (
-        <div className={type} dir="auto">
+        <div className={'chatgptbox-' + type} dir="auto">
           <div className="gpt-header">
             <p>{t('You')}:</p>
             <div className="gpt-util-group">
@@ -65,7 +65,7 @@ export function ConversationItem({ type, content, descName, modelName, onRetry }
       )
     case 'answer':
       return (
-        <div className={type} dir="auto">
+        <div className={'chatgptbox-' + type} dir="auto">
           <div className="gpt-header">
             <AnswerTitle descName={descName} modelName={modelName} />
             <div className="gpt-util-group">
@@ -102,7 +102,7 @@ export function ConversationItem({ type, content, descName, modelName, onRetry }
       )
     case 'error':
       return (
-        <div className={type} dir="auto">
+        <div className={'chatgptbox-' + type} dir="auto">
           <div className="gpt-header">
             <p>{t('Error')}:</p>
             <div className="gpt-util-group">

src/content-script/styles.scss

@@ -1264,11 +1264,11 @@
     white-space: nowrap;
   }
 
-  .question {
+  .chatgptbox-question {
     background: var(--question-bg-color);
   }
 
-  :is(.answer, .question, .error) {
+  :is(.chatgptbox-answer, .chatgptbox-question, .chatgptbox-error) {
     font-size: 15px;
     line-height: 1.6;
     padding: 4px 15px;
@@ -1332,7 +1332,7 @@
     }
   }
 
-  .error {
+  .chatgptbox-error {
     p {
       color: #ec4336;
     }