feat: clear conversation (#51, #47)

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