Add display mode option (#747)

Author: gadelkareem

src/config/index.mjs

@@ -8,6 +8,11 @@ export const TriggerMode = {
   manually: 'Manually',
 }
 
+export const DisplayMode = {
+  sidebar: 'Display in sidebar',
+  floatingToolbar: 'Display in floating toolbar',
+}
+
 export const ThemeMode = {
   light: 'Light',
   dark: 'Dark',
@@ -202,6 +207,8 @@ export const defaultConfig = {
 
   /** @type {keyof TriggerMode}*/
   triggerMode: 'manually',
+  /** @type {keyof DisplayMode}*/
+  displayMode: 'sidebar',
   /** @type {keyof ThemeMode}*/
   themeMode: 'auto',
   /** @type {keyof Models}*/

src/content-script/index.jsx

@@ -70,11 +70,33 @@ async function mountComponent(siteConfig, userConfig) {
     unmountComponentAtNode(e)
     e.remove()
   })
+
+  const position = {
+    x: window.innerWidth - 300 - (Math.floor((20 / 100) * window.innerWidth)),
+    y: window.innerHeight / 2 - 200,
+  }
+  const toolbarContainer = createElementAtPosition(position.x, position.y)
+  toolbarContainer.className = 'chatgptbox-toolbar-container-not-queryable'
+  if (userConfig.displayMode === 'floatingToolbar') {
+    render(
+      <FloatingToolbar
+        session={initSession({ modelName: userConfig.modelName })}
+        selection={question}
+        container={toolbarContainer}
+        dockable={true}
+        triggered={true}
+        closeable={true}
+        prompt={question}
+      />,
+      toolbarContainer,
+    )
+    return
+  }
   const container = document.createElement('div')
   container.id = 'chatgptbox-container'
   render(
     <DecisionCard
-      session={initSession({ modelName: (await getUserConfig()).modelName })}
+      session={initSession({ modelName: userConfig.modelName })}
       question={question}
       siteConfig={siteConfig}
       container={container}

src/popup/sections/GeneralPart.jsx

@@ -14,6 +14,7 @@ import {
   Models,
   ThemeMode,
   TriggerMode,
+  DisplayMode,
   isUsingMoonshotApi,
 } from '../../config/index.mjs'
 import Browser from 'webextension-polyfill'
@@ -118,6 +119,24 @@ export function GeneralPart({ config, updateConfig }) {
           })}
         </select>
       </label>
+      <label>
+        <legend>{t('DisplayMode')}</legend>
+        <select
+          required
+          onChange={(e) => {
+            const mode = e.target.value
+            updateConfig({ displayMode: mode })
+          }}
+        >
+          {Object.entries(DisplayMode).map(([key, desc]) => {
+            return (
+              <option value={key} key={key} selected={key === config.displayMode}>
+                {t(desc)}
+              </option>
+            )
+          })}
+        </select>
+      </label>
       <label>
         <legend>{t('Theme')}</legend>
         <select