Skip to content

Commit

Permalink
improve b96ba7c
Browse files Browse the repository at this point in the history
  • Loading branch information
josStorer committed Aug 4, 2024
1 parent 817385f commit 226fb10
Show file tree
Hide file tree
Showing 21 changed files with 115 additions and 124 deletions.
4 changes: 1 addition & 3 deletions src/_locales/de/main.json
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,5 @@
"Prompt Template": "Vorlagen-Template",
"Explain this: {{selection}}": "Erkläre das: {{selection}}",
"New": "Neu",
"DisplayMode": "Anzeigemodus",
"Display in sidebar": "In der Seitenleiste anzeigen",
"Display in floating toolbar": "In der schwebenden Symbolleiste anzeigen"
"Always display floating window, disable sidebar for all site adapters": "Immer das schwebende Fenster anzeigen, die Seitenleiste für alle Website-Adapter deaktivieren"
}
4 changes: 1 addition & 3 deletions src/_locales/en/main.json
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,5 @@
"Prompt Template": "Prompt Template",
"Explain this: {{selection}}": "Explain this: {{selection}}",
"New": "New",
"DisplayMode": "DisplayMode",
"Display in sidebar": "Display in sidebar",
"Display in floating toolbar": "Display in floating toolbar"
"Always display floating window, disable sidebar for all site adapters": "Always display floating window, disable sidebar for all site adapters"
}
4 changes: 1 addition & 3 deletions src/_locales/es/main.json
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,5 @@
"Prompt Template": "Plantilla de sugerencias",
"Explain this: {{selection}}": "Explicar esto: {{selection}}",
"New": "Nuevo",
"DisplayMode": "Modo de visualización",
"Display in sidebar": "Mostrar en la barra lateral",
"Display in floating toolbar": "Mostrar en la barra de herramientas flotante"
"Always display floating window, disable sidebar for all site adapters": "Mostrar siempre la ventana flotante, desactivar la barra lateral para todos los adaptadores de sitios"
}
4 changes: 1 addition & 3 deletions src/_locales/fr/main.json
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,5 @@
"Prompt Template": "Modèle de suggestion",
"Explain this: {{selection}}": "Expliquer ceci : {{selection}}",
"New": "Nouveau",
"DisplayMode": "Mode d'affichage",
"Display in sidebar": "Afficher dans la barre latérale",
"Display in floating toolbar": "Afficher dans la barre d'outils flottante"
"Always display floating window, disable sidebar for all site adapters": "Toujours afficher la fenêtre flottante, désactiver la barre latérale pour tous les adaptateurs de site"
}
4 changes: 1 addition & 3 deletions src/_locales/in/main.json
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,5 @@
"Prompt Template": "Template Prompt",
"Explain this: {{selection}}": "Jelaskan ini: {{selection}}",
"New": "Baru",
"DisplayMode": "Mode Tampilan",
"Display in sidebar": "Tampilkan di bilah sisi",
"Display in floating toolbar": "Tampilkan di bilah alat mengambang"
"Always display floating window, disable sidebar for all site adapters": "Selalu tampilkan jendela mengambang, nonaktifkan sidebar untuk semua adapter situs"
}
4 changes: 1 addition & 3 deletions src/_locales/it/main.json
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,5 @@
"Prompt Template": "Modello di prompt",
"Explain this: {{selection}}": "Spiega questo: {{selection}}",
"New": "Nuovo",
"DisplayMode": "Modalità di visualizzazione",
"Display in sidebar": "Visualizza nella barra laterale",
"Display in floating toolbar": "Visualizza nella barra degli strumenti flottante"
"Always display floating window, disable sidebar for all site adapters": "Mostra sempre la finestra flottante, disabilita la barra laterale per tutti gli adattatori del sito"
}
4 changes: 1 addition & 3 deletions src/_locales/ja/main.json
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,5 @@
"Prompt Template": "プロンプトテンプレート",
"Explain this: {{selection}}": "これを説明する: {{selection}}",
"New": "新規",
"DisplayMode": "表示モード",
"Display in sidebar": "サイドバーに表示",
"Display in floating toolbar": "フローティングツールバーに表示"
"Always display floating window, disable sidebar for all site adapters": "常にフローティングウィンドウを表示し、すべてのサイトアダプターでサイドバーを無効にします"
}
4 changes: 1 addition & 3 deletions src/_locales/ko/main.json
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,5 @@
"Prompt Template": "프롬프트 템플릿",
"Explain this: {{selection}}": "이것을 설명하세요: {{selection}}",
"New": "새로 만들기",
"DisplayMode": "디스플레이 모드",
"Display in sidebar": "사이드바에 표시",
"Display in floating toolbar": "떠다니는 도구 모음에 표시"
"Always display floating window, disable sidebar for all site adapters": "항상 떠다니는 창을 표시하고 모든 사이트 어댑터의 사이드바를 비활성화합니다"
}
4 changes: 1 addition & 3 deletions src/_locales/pt/main.json
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,5 @@
"Prompt Template": "Modelo de Prompt",
"Explain this: {{selection}}": "Explique isso: {{selection}}",
"New": "Novo",
"DisplayMode": "Modo de Exibição",
"Display in sidebar": "Exibir na barra lateral",
"Display in floating toolbar": "Exibir na barra de ferramentas flutuante"
"Always display floating window, disable sidebar for all site adapters": "Sempre exibir janela flutuante, desativar barra lateral para todos os adaptadores de site"
}
4 changes: 1 addition & 3 deletions src/_locales/ru/main.json
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,5 @@
"Prompt Template": "Шаблон запроса",
"Explain this: {{selection}}": "Объяснить это: {{selection}}",
"New": "Новый",
"DisplayMode": "Режим отображения",
"Display in sidebar": "Отображать в боковой панели",
"Display in floating toolbar": "Отображать в плавающей панели инструментов"
"Always display floating window, disable sidebar for all site adapters": "Всегда отображать плавающее окно, отключить боковую панель для всех адаптеров сайтов"
}
4 changes: 1 addition & 3 deletions src/_locales/tr/main.json
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,5 @@
"Prompt Template": "Prompt Şablonu",
"Explain this: {{selection}}": "Bunu açıkla: {{selection}}",
"New": "Yeni",
"DisplayMode": "Görüntüleme Modu",
"Display in sidebar": "Kenar çubuğunda görüntüle",
"Display in floating toolbar": "Kayan araç çubuğunda görüntüle"
"Always display floating window, disable sidebar for all site adapters": "Her zaman kayan pencereyi görüntüle, tüm site adaptörleri için kenar çubuğunu devre dışı bırak"
}
4 changes: 1 addition & 3 deletions src/_locales/zh-hans/main.json
Original file line number Diff line number Diff line change
Expand Up @@ -144,9 +144,7 @@
"Prompt Template": "提示模板",
"Explain this: {{selection}}": "解释这个: {{selection}}",
"New": "新建",
"DisplayMode": "显示方式",
"Display in sidebar": "在侧边栏显示",
"Display in floating toolbar": "在浮动工具栏显示",
"Always display floating window, disable sidebar for all site adapters": "总是显示浮动窗口, 禁用所有站点适配器的侧边栏",
"Temperature": "温度",
"keep-alive Time": "保活时间",
"5m": "5分钟",
Expand Down
4 changes: 1 addition & 3 deletions src/_locales/zh-hant/main.json
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,5 @@
"Prompt Template": "提示範本",
"Explain this: {{selection}}": "解釋這個: {{selection}}",
"New": "新增",
"DisplayMode": "顯示模式",
"Display in sidebar": "在側邊欄顯示",
"Display in floating toolbar": "在浮動工具列顯示"
"Always display floating window, disable sidebar for all site adapters": "總是顯示浮動視窗,停用所有網站適配器的側邊欄"
}
80 changes: 52 additions & 28 deletions src/components/ConversationCard/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
DesktopDownloadIcon,
LinkExternalIcon,
MoveToBottomIcon,
SearchIcon,
} from '@primer/octicons-react'
import { Pin, WindowDesktop, XLg } from 'react-bootstrap-icons'
import FileSaver from 'file-saver'
Expand Down Expand Up @@ -46,6 +47,7 @@ function ConversationCard(props) {
const { t } = useTranslation()
const [isReady, setIsReady] = useState(!props.question)
const [port, setPort] = useState(() => Browser.runtime.connect())
const [triggered, setTriggered] = useState(!props.waitForTrigger)
const [session, setSession] = useState(props.session)
const windowSize = useClampWindowSize([750, 1500], [250, 1100])
const bodyRef = useRef(null)
Expand All @@ -59,7 +61,7 @@ function ConversationCard(props) {
const [conversationItemData, setConversationItemData] = useState(
(() => {
if (session.conversationRecords.length === 0)
if (props.question)
if (props.question && triggered)
return [
new ConversationItemData(
'answer',
Expand Down Expand Up @@ -102,12 +104,12 @@ function ConversationCard(props) {

useEffect(async () => {
// when the page is responsive, session may accumulate redundant data and needs to be cleared after remounting and before making a new request
if (props.question) {
if (props.question && triggered) {
const newSession = initSession({ ...session, question: props.question })
setSession(newSession)
await postMessage({ session: newSession })
}
}, [props.question]) // usually only triggered once
}, [props.question, triggered]) // usually only triggered once

/**
* @param {string} value
Expand Down Expand Up @@ -516,32 +518,53 @@ function ConversationCard(props) {
/>
))}
</div>
<InputBox
enabled={isReady}
postMessage={postMessage}
reverseResizeDir={props.pageMode}
onSubmit={async (question) => {
const newQuestion = new ConversationItemData('question', question)
const newAnswer = new ConversationItemData(
'answer',
`<p class="gpt-loading">${t('Waiting for response...')}</p>`,
)
setConversationItemData([...conversationItemData, newQuestion, newAnswer])
setIsReady(false)
{props.waitForTrigger && !triggered ? (
<p
className="manual-btn"
style={{ display: 'flex', justifyContent: 'center' }}
onClick={() => {
setConversationItemData([
new ConversationItemData(
'answer',
`<p class="gpt-loading">${t(`Waiting for response...`)}</p>`,
),
])
setTriggered(true)
setIsReady(false)
}}
>
<span className="icon-and-text">
<SearchIcon size="small" /> {t('Ask ChatGPT')}
</span>
</p>
) : (
<InputBox
enabled={isReady}
postMessage={postMessage}
reverseResizeDir={props.pageMode}
onSubmit={async (question) => {
const newQuestion = new ConversationItemData('question', question)
const newAnswer = new ConversationItemData(
'answer',
`<p class="gpt-loading">${t('Waiting for response...')}</p>`,
)
setConversationItemData([...conversationItemData, newQuestion, newAnswer])
setIsReady(false)

const newSession = { ...session, question, isRetry: false }
setSession(newSession)
try {
await postMessage({ session: newSession })
} catch (e) {
updateAnswer(e, false, 'error')
}
bodyRef.current.scrollTo({
top: bodyRef.current.scrollHeight,
behavior: 'instant',
})
}}
/>
const newSession = { ...session, question, isRetry: false }
setSession(newSession)
try {
await postMessage({ session: newSession })
} catch (e) {
updateAnswer(e, false, 'error')
}
bodyRef.current.scrollTo({
top: bodyRef.current.scrollHeight,
behavior: 'instant',
})
}}
/>
)}
</div>
)
}
Expand All @@ -557,6 +580,7 @@ ConversationCard.propTypes = {
onDock: PropTypes.func,
notClampSize: PropTypes.bool,
pageMode: PropTypes.bool,
waitForTrigger: PropTypes.bool,
}

export default memo(ConversationCard)
2 changes: 1 addition & 1 deletion src/components/ConversationItem/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import ReadButton from '../ReadButton'
import PropTypes from 'prop-types'
import MarkdownRender from '../MarkdownRender/markdown.jsx'
import { useTranslation } from 'react-i18next'
import { isUsingCustomModel, isUsingOllamaModel } from '../../config/index.mjs'
import { isUsingCustomModel } from '../../config/index.mjs'
import { useConfig } from '../../hooks/use-config.mjs'

function AnswerTitle({ descName, modelName }) {
Expand Down
5 changes: 3 additions & 2 deletions src/components/FloatingToolbar/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ function FloatingToolbar(props) {
const windowSize = useClampWindowSize([750, 1500], [0, Infinity])
const config = useConfig(() => {
setRender(true)
if (!triggered) {
if (!triggered && selection) {
props.container.style.position = 'absolute'
setTimeout(() => {
const left = Math.min(
Expand All @@ -49,7 +49,7 @@ function FloatingToolbar(props) {

if (!render) return <div />

if (triggered) {
if (triggered || (prompt && !selection)) {
const updatePosition = () => {
const newPosition = setElementPositionInViewport(props.container, position.x, position.y)
if (position.x !== newPosition.x || position.y !== newPosition.y) setPosition(newPosition) // clear extra virtual position offset
Expand Down Expand Up @@ -106,6 +106,7 @@ function FloatingToolbar(props) {
dockable={props.dockable}
onDock={onDock}
onUpdate={onUpdate}
waitForTrigger={prompt && !triggered && !selection}
/>
</div>
</div>
Expand Down
8 changes: 1 addition & 7 deletions src/config/index.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,6 @@ export const TriggerMode = {
manually: 'Manually',
}

export const DisplayMode = {
sidebar: 'Display in sidebar',
floatingToolbar: 'Display in floating toolbar',
}

export const ThemeMode = {
light: 'Light',
dark: 'Dark',
Expand Down Expand Up @@ -213,8 +208,6 @@ export const defaultConfig = {

/** @type {keyof TriggerMode}*/
triggerMode: 'manually',
/** @type {keyof DisplayMode}*/
displayMode: 'sidebar',
/** @type {keyof ThemeMode}*/
themeMode: 'auto',
/** @type {keyof Models}*/
Expand All @@ -223,6 +216,7 @@ export const defaultConfig = {
preferredLanguage: getNavigatorLanguage(),
clickIconAction: 'popup',
insertAtTop: isMobile(),
alwaysFloatingSidebar: false,
lockWhenAnswer: true,
answerScrollMargin: 200,
autoRegenAfterSwitchModel: false,
Expand Down
58 changes: 32 additions & 26 deletions src/content-script/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
import {
createElementAtPosition,
cropText,
endsWithQuestionMark,
getClientPosition,
getPossibleElementByQuerySelector,
} from '../utils'
Expand All @@ -33,28 +34,30 @@ import NotificationForChatGPTWeb from '../components/NotificationForChatGPTWeb'
* @param {UserConfig} userConfig
*/
async function mountComponent(siteConfig, userConfig) {
const retry = 10
let oldUrl = location.href
for (let i = 1; i <= retry; i++) {
if (location.href !== oldUrl) {
console.log(`SiteAdapters Retry ${i}/${retry}: stop`)
return
}
const e =
(siteConfig &&
(getPossibleElementByQuerySelector(siteConfig.sidebarContainerQuery) ||
getPossibleElementByQuerySelector(siteConfig.appendContainerQuery) ||
getPossibleElementByQuerySelector(siteConfig.resultsContainerQuery))) ||
getPossibleElementByQuerySelector([userConfig.prependQuery]) ||
getPossibleElementByQuerySelector([userConfig.appendQuery])
if (e) {
console.log(`SiteAdapters Retry ${i}/${retry}: found`)
console.log(e)
break
} else {
console.log(`SiteAdapters Retry ${i}/${retry}: not found`)
if (i === retry) return
else await new Promise((r) => setTimeout(r, 500))
if (!userConfig.alwaysFloatingSidebar) {
const retry = 10
let oldUrl = location.href
for (let i = 1; i <= retry; i++) {
if (location.href !== oldUrl) {
console.log(`SiteAdapters Retry ${i}/${retry}: stop`)
return
}
const e =
(siteConfig &&
(getPossibleElementByQuerySelector(siteConfig.sidebarContainerQuery) ||
getPossibleElementByQuerySelector(siteConfig.appendContainerQuery) ||
getPossibleElementByQuerySelector(siteConfig.resultsContainerQuery))) ||
getPossibleElementByQuerySelector([userConfig.prependQuery]) ||
getPossibleElementByQuerySelector([userConfig.appendQuery])
if (e) {
console.log(`SiteAdapters Retry ${i}/${retry}: found`)
console.log(e)
break
} else {
console.log(`SiteAdapters Retry ${i}/${retry}: not found`)
if (i === retry) return
else await new Promise((r) => setTimeout(r, 500))
}
}
}
document.querySelectorAll('.chatgptbox-container,#chatgptbox-container').forEach((e) => {
Expand All @@ -77,14 +80,17 @@ async function mountComponent(siteConfig, userConfig) {
}
const toolbarContainer = createElementAtPosition(position.x, position.y)
toolbarContainer.className = 'chatgptbox-toolbar-container-not-queryable'
if (userConfig.displayMode === 'floatingToolbar') {
if (userConfig.alwaysFloatingSidebar && question) {
let triggered = false
if (userConfig.triggerMode === 'always') triggered = true
else if (userConfig.triggerMode === 'questionMark' && endsWithQuestionMark(question.trim()))
triggered = true
render(
<FloatingToolbar
session={initSession({ modelName: userConfig.modelName })}
selection={question}
selection=""
container={toolbarContainer}
dockable={true}
triggered={true}
triggered={triggered}
closeable={true}
prompt={question}
/>,
Expand Down
Loading

0 comments on commit 226fb10

Please sign in to comment.