feat: store conversation to independent page (#120, #138)

Author: josStorer

src/background/index.mjs

@@ -26,6 +26,7 @@ import { isSafari } from '../utils/is-safari'
 import { config as menuConfig } from '../content-script/menu-tools'
 import { t, changeLanguage } from 'i18next'
 import '../_locales/i18n'
+import { openUrl } from '../utils/open-url'
 
 const KEY_ACCESS_TOKEN = 'accessToken'
 const cache = new ExpiryMap(10 * 1000)
@@ -146,6 +147,9 @@ Browser.runtime.onMessage.addListener(async (message) => {
     const token = await getChatGptAccessToken()
     const data = message.data
     await deleteConversation(token, data.conversationId)
+  } else if (message.type === 'OPEN_URL') {
+    const data = message.data
+    openUrl(data.url)
   }
 })
 

src/components/ConversationCard/index.jsx

@@ -4,7 +4,7 @@ import Browser from 'webextension-polyfill'
 import InputBox from '../InputBox'
 import ConversationItem from '../ConversationItem'
 import { createElementAtPosition, initSession, isSafari } from '../../utils'
-import { DownloadIcon, LinkExternalIcon } from '@primer/octicons-react'
+import { DownloadIcon, LinkExternalIcon, ArchiveIcon } from '@primer/octicons-react'
 import { WindowDesktop, XLg, Pin } from 'react-bootstrap-icons'
 import FileSaver from 'file-saver'
 import { render } from 'preact'
@@ -14,6 +14,7 @@ import { Models } from '../../config/index.mjs'
 import { useTranslation } from 'react-i18next'
 import DeleteButton from '../DeleteButton'
 import { useConfig } from '../../hooks/use-config.mjs'
+import { createSession } from '../../config/localSession.mjs'
 
 const logo = Browser.runtime.getURL('logo.png')
 
@@ -295,6 +296,31 @@ function ConversationCard(props) {
               setSession(newSession)
             }}
           />
+          {!props.pageMode && (
+            <span
+              title={t('Store to Independent Conversation Page')}
+              className="gpt-util-icon"
+              onClick={() => {
+                const newSession = {
+                  ...session,
+                  sessionName: new Date().toLocaleString(),
+                  autoClean: false,
+                  sessionId: crypto.randomUUID(),
+                }
+                setSession(newSession)
+                createSession(newSession).then(() =>
+                  Browser.runtime.sendMessage({
+                    type: 'OPEN_URL',
+                    data: {
+                      url: Browser.runtime.getURL('IndependentPanel.html'),
+                    },
+                  }),
+                )
+              }}
+            >
+              <ArchiveIcon size={16} />
+            </span>
+          )}
           <span
             title={t('Save Conversation')}
             className="gpt-util-icon"
@@ -369,6 +395,7 @@ ConversationCard.propTypes = {
   dockable: PropTypes.bool,
   onDock: PropTypes.func,
   notClampSize: PropTypes.bool,
+  pageMode: PropTypes.bool,
 }
 
 export default memo(ConversationCard)

src/config/localSession.mjs

@@ -12,12 +12,23 @@ export const initDefaultSession = async () => {
   })
 }
 
-export const createSession = async (session) => {
-  const currentSessions = await getSessions()
-  if (!session) session = await initDefaultSession()
-  currentSessions.unshift(session)
+export const createSession = async (newSession) => {
+  let currentSessions
+  if (newSession) {
+    const ret = await getSession(newSession.sessionId)
+    currentSessions = ret.currentSessions
+    if (ret.session)
+      currentSessions[
+        currentSessions.findIndex((session) => session.sessionId === newSession.sessionId)
+      ] = newSession
+    else currentSessions.unshift(newSession)
+  } else {
+    newSession = await initDefaultSession()
+    currentSessions = await getSessions()
+    currentSessions.unshift(newSession)
+  }
   await Browser.storage.local.set({ sessions: currentSessions })
-  return { session, currentSessions }
+  return { session: newSession, currentSessions }
 }
 
 export const deleteSession = async (sessionId) => {

src/pages/IndependentPanel/App.jsx

@@ -146,6 +146,7 @@ function App() {
               <ConversationCard
                 session={currentSession}
                 notClampSize={true}
+                pageMode={true}
                 onUpdate={(port, session, cData) => {
                   currentPort.current = port
                   if (cData.length > 0 && cData[cData.length - 1].done) {