added chatGPT icon

src/chatGPT/Icon.jsx

@@ -1,7 +1,7 @@
-function Icon() {
-
+function Icon({ className }) {
   return (
     <svg 
+      className={className}
       xmlns="http://www.w3.org/2000/svg" 
       viewBox="-16.5 -16.5 338.667 338.667" 
       fill="currentColor">

src/components/AIcompletion/AIcompletion.jsx

@@ -2,7 +2,9 @@ import { useContext, useEffect, useRef } from 'react'
 import { useState } from 'react'
 import { SettingsContext } from '../../contexts/Settings'
 import { ReactMarkdown } from 'react-markdown/lib/react-markdown'
+import Icon from '../../chatGPT/Icon'
 import createCompletion from '../../chatGPT/createCompletion'
+import classes from './AIcompletion.module.css'
 
 const MESSAGES_PREFIX = { 
   role: 'system', 
@@ -46,13 +48,14 @@ function AIcompletion({ query, className }) {
   if (!completion || !enabled) 
     return null
 
-  return (
-    <div className={className}> 
-      <div className='md-container'>
+  return <>
+    <Icon className={classes['icon']}/>
+    <div className={className}>
+      <div className={classes['md-container']}>
         <ReactMarkdown children={completion}/> 
       </div>
     </div>
-  )
+  </>
 }
 
 export default AIcompletion

src/components/AIcompletion/AIcompletion.module.css

@@ -0,0 +1,38 @@
+.md-container {
+  margin-right: 1em;  
+}
+.md-container * {
+  /*
+    user-select: text !important;
+  */
+}
+.md-container code {
+  backdrop-filter: contrast(0.8);
+  padding-left: 6px;
+  padding-right: 6px;
+}
+.md-container pre {
+  backdrop-filter: contrast(0.8);
+  padding: 10px;
+  border-radius: 10px;
+  overflow-x: auto;
+}
+.md-container > *:first-child {
+  margin-top: 0;
+}
+.md-container > *:last-child {
+  margin-bottom: 0;
+}
+
+.icon {
+  position: absolute;
+  width: 2em;
+  height: 2em;
+  top: calc(-50vh + 50% + 20px);
+  left: -20px;
+  transform: translateX(-100%);
+  border-radius: 50%;
+  padding: 5px;
+  background: var(--accent);
+  color: var(--secondary);
+}

src/components/QueryField/QueryField.module.css

@@ -16,31 +16,6 @@
   overflow-x: hidden;
   overflow-y: auto;
 }
-.ai-completion > :global(.md-container) {
-  margin-right: 1em;  
-}
-.ai-completion > :global(.md-container) * {
-  /*
-    user-select: text !important;
-  */
-}
-.ai-completion > :global(.md-container) code {
-  backdrop-filter: contrast(0.8);
-  padding-left: 6px;
-  padding-right: 6px;
-}
-.ai-completion > :global(.md-container) pre {
-  backdrop-filter: contrast(0.8);
-  padding: 10px;
-  border-radius: 10px;
-  overflow-x: auto;
-}
-.ai-completion > :global(.md-container) > *:first-child {
-  margin-top: 0;
-}
-.ai-completion > :global(.md-container) > *:last-child {
-  margin-bottom: 0;
-}
 
 .field {
   outline: none;