feat: clear conversation (#51, #47)

Author: josStorer

src/_locales/en/main.json

@@ -82,5 +82,7 @@
   "Model Name": "Model Name",
   "Custom Model API Url": "Custom Model API Url",
   "Loading...": "Loading...",
-  "Feedback": "Feedback"
+  "Feedback": "Feedback",
+  "Confirm": "Confirm",
+  "Clear Conversation": "Clear Conversation"
 }

src/_locales/zh-hans/main.json

@@ -82,5 +82,7 @@
   "Model Name": "模型名",
   "Custom Model API Url": "自定义模型的API地址",
   "Loading...": "正在读取...",
-  "Feedback": "反馈"
+  "Feedback": "反馈",
+  "Confirm": "确认",
+  "Clear Conversation": "清理对话"
 }

src/_locales/zh-hant/main.json

@@ -82,5 +82,7 @@
   "Model Name": "模型名",
   "Custom Model API Url": "自定義模型的API地址",
   "Loading...": "正在讀取...",
-  "Feedback": "反饋"
+  "Feedback": "反饋",
+  "Confirm": "確認",
+  "Clear Conversation": "清理對話"
 }

src/background/apis/chatgpt-web.mjs

@@ -27,6 +27,10 @@ export async function setConversationProperty(token, conversationId, propertyObj
   await request(token, 'PATCH', `/conversation/${conversationId}`, propertyObject)
 }
 
+export async function deleteConversation(token, conversationId) {
+  if (conversationId) await setConversationProperty(token, conversationId, { is_visible: false })
+}
+
 export async function sendModerations(token, question, conversationId, messageId) {
   await request(token, 'POST', `/moderations`, {
     conversation_id: conversationId,
@@ -48,10 +52,6 @@ export async function getModels(token) {
  * @param {string} accessToken
  */
 export async function generateAnswersWithChatgptWebApi(port, question, session, accessToken) {
-  const deleteConversation = () => {
-    setConversationProperty(accessToken, session.conversationId, { is_visible: false })
-  }
-
   const controller = new AbortController()
   const stopListener = (msg) => {
     if (msg.stop) {
@@ -65,7 +65,7 @@ export async function generateAnswersWithChatgptWebApi(port, question, session,
   port.onDisconnect.addListener(() => {
     console.debug('port disconnected')
     controller.abort()
-    deleteConversation()
+    deleteConversation(accessToken, session.conversationId)
   })
 
   const models = await getModels(accessToken).catch(() => {

src/background/index.mjs

@@ -1,6 +1,10 @@
 import Browser from 'webextension-polyfill'
 import ExpiryMap from 'expiry-map'
-import { generateAnswersWithChatgptWebApi, sendMessageFeedback } from './apis/chatgpt-web'
+import {
+  deleteConversation,
+  generateAnswersWithChatgptWebApi,
+  sendMessageFeedback,
+} from './apis/chatgpt-web'
 import { generateAnswersWithBingWebApi } from './apis/bing-web.mjs'
 import {
   generateAnswersWithChatgptApi,
@@ -126,6 +130,10 @@ Browser.runtime.onMessage.addListener(async (message) => {
   if (message.type === 'FEEDBACK') {
     const token = await getChatGptAccessToken()
     await sendMessageFeedback(token, message.data)
+  } else if (message.type === 'DELETE_CONVERSATION') {
+    const token = await getChatGptAccessToken()
+    const data = message.data
+    await deleteConversation(token, data.conversationId)
   }
 })
 

src/components/ConversationCard/index.jsx

@@ -12,6 +12,7 @@ import FloatingToolbar from '../FloatingToolbar'
 import { useClampWindowSize } from '../../hooks/use-clamp-window-size'
 import { defaultConfig, getUserConfig } from '../../config/index.mjs'
 import { useTranslation } from 'react-i18next'
+import DeleteButton from '../DeleteButton'
 
 const logo = Browser.runtime.getURL('logo.png')
 
@@ -221,22 +222,37 @@ function ConversationCard(props) {
             }}
           />
         )}
-        <span
-          title={t('Save Conversation')}
-          className="gpt-util-icon"
-          style="margin:15px;"
-          onClick={() => {
-            let output = ''
-            session.conversationRecords.forEach((data) => {
-              output += `${t('Question')}:\n\n${data.question}\n\n${t('Answer')}:\n\n${
-                data.answer
-              }\n\n<hr/>\n\n`
-            })
-            const blob = new Blob([output], { type: 'text/plain;charset=utf-8' })
-            FileSaver.saveAs(blob, 'conversation.md')
-          }}
-        >
-          <DownloadIcon size={16} />
+        <span className="gpt-util-group">
+          <DeleteButton
+            size={16}
+            onConfirm={() => {
+              port.postMessage({ stop: true })
+              Browser.runtime.sendMessage({
+                type: 'DELETE_CONVERSATION',
+                data: {
+                  conversationId: session.conversationId,
+                },
+              })
+              setConversationItemData([])
+              setSession(initSession())
+            }}
+          />
+          <span
+            title={t('Save Conversation')}
+            className="gpt-util-icon"
+            onClick={() => {
+              let output = ''
+              session.conversationRecords.forEach((data) => {
+                output += `${t('Question')}:\n\n${data.question}\n\n${t('Answer')}:\n\n${
+                  data.answer
+                }\n\n<hr/>\n\n`
+              })
+              const blob = new Blob([output], { type: 'text/plain;charset=utf-8' })
+              FileSaver.saveAs(blob, 'conversation.md')
+            }}
+          >
+            <DownloadIcon size={16} />
+          </span>
         </span>
       </div>
       <hr />

src/components/ConversationItem/index.jsx

@@ -16,7 +16,7 @@ export function ConversationItem({ type, content, session, done, port }) {
         <div className={type} dir="auto">
           <div className="gpt-header">
             <p>{t('You')}:</p>
-            <div style="display: flex; gap: 15px;">
+            <div className="gpt-util-group">
               <CopyButton contentFn={() => content} size={14} />
               {!collapsed ? (
                 <span
@@ -47,7 +47,7 @@ export function ConversationItem({ type, content, session, done, port }) {
             <p style="white-space: nowrap;">
               {session && session.aiName ? `${t(session.aiName)}:` : t('Loading...')}
             </p>
-            <div style="display: flex; gap: 15px; align-items: center; white-space: nowrap;">
+            <div className="gpt-util-group">
               {!done && (
                 <button
                   type="button"
@@ -105,7 +105,7 @@ export function ConversationItem({ type, content, session, done, port }) {
         <div className={type} dir="auto">
           <div className="gpt-header">
             <p>{t('Error')}:</p>
-            <div style="display: flex; gap: 15px;">
+            <div className="gpt-util-group">
               <CopyButton contentFn={() => content} size={14} />
               {!collapsed ? (
                 <span

src/components/DeleteButton/index.jsx

@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
+import { TrashIcon } from '@primer/octicons-react'
+
+DeleteButton.propTypes = {
+  onConfirm: PropTypes.func.isRequired,
+  size: PropTypes.number.isRequired,
+}
+
+function DeleteButton({ onConfirm, size }) {
+  const { t } = useTranslation()
+  const [waitConfirm, setWaitConfirm] = useState(false)
+  const confirmRef = useRef(null)
+
+  useEffect(() => {
+    if (waitConfirm) confirmRef.current.focus()
+  }, [waitConfirm])
+
+  return (
+    <span>
+      <button
+        ref={confirmRef}
+        type="button"
+        className="normal-button"
+        style={{
+          fontSize: '10px',
+          ...(waitConfirm ? {} : { display: 'none' }),
+        }}
+        onBlur={() => {
+          setWaitConfirm(false)
+        }}
+        onClick={() => {
+          setWaitConfirm(false)
+          onConfirm()
+        }}
+      >
+        {t('Confirm')}
+      </button>
+      <span
+        title={t('Clear Conversation')}
+        className="gpt-util-icon"
+        style={waitConfirm ? { display: 'none' } : {}}
+        onClick={() => {
+          setWaitConfirm(true)
+        }}
+      >
+        <TrashIcon size={size} />
+      </span>
+    </span>
+  )
+}
+
+export default DeleteButton

src/content-script/styles.scss

@@ -169,6 +169,12 @@
       color: #f08080;
     }
 
+    .gpt-util-group {
+      display: flex;
+      gap: 15px;
+      align-items: center;
+    }
+
     .gpt-util-icon {
       display: flex;
       cursor: pointer;