feat: clear conversation (#51, #47)

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