feat: add clear messages confirm modal

src/components/header/ConversationMessageClearButton.tsx

@@ -1,26 +1,34 @@
 import { useStore } from '@nanostores/solid'
 import { currentConversationId } from '@/stores/conversation'
-import { scrollController } from '@/stores/ui'
+import {
+  scrollController,
+  showConfirmModal,
+} from '@/stores/ui'
 import { clearMessagesByConversationId } from '@/stores/messages'
+import { useI18n } from '@/hooks'
+import ConfirmModal from '../ui/ConfirmModal'
 
 export default () => {
   const $currentConversationId = useStore(currentConversationId)
+  const { t } = useI18n()
 
   const handleClearMessage = () => {
     clearMessagesByConversationId($currentConversationId())
     scrollController().scrollToBottom()
+    showConfirmModal.set(false)
   }
 
   return (
     <>
       { $currentConversationId() && (
         <div
           class="fcc p-2 rounded-md text-xl hv-foreground"
-          onClick={handleClearMessage}
+          onClick={() => { showConfirmModal.set(true) }}
         >
           <div i-carbon-clean />
         </div>
       )}
+      <ConfirmModal title={t('conversations.confirm.title')} description={t('conversations.confirm.desc')} onConfirm={handleClearMessage} onCancel={() => { showConfirmModal.set(false) }} />
     </>
   )
 }

src/components/main/Conversation.tsx

@@ -33,7 +33,7 @@ export default () => {
     <Switch
       fallback={(
         <Welcome />
-      )}
+        )}
     >
       <Match when={$currentConversationId() && !currentConversationMessages().length}>
         <ConversationEmpty conversation={currentConversation()} />
@@ -52,9 +52,8 @@ export default () => {
       </Match>
       <Match when={currentBot()?.type === 'image_generation'}>
         <Image
-          // conversationId={$currentConversationId()}
+            // conversationId={$currentConversationId()}
           messages={currentConversationMessages}
-          // fetching={isLoading() || !isStreaming()}
         />
       </Match>
     </Switch>

src/components/ui/ConfirmModal.tsx

@@ -0,0 +1,29 @@
+import {
+  showConfirmModal,
+} from '@/stores/ui'
+import { useI18n } from '@/hooks'
+import Modal from './Modal'
+
+interface Props {
+  title: string
+  description: string
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+export default (props: Props) => {
+  const { t } = useI18n()
+  return (
+    <Modal bindValue={showConfirmModal} direction="bottom" closeBtnClass="top-6 right-6" hiddenCloseIcon>
+      <div class="max-h-[70vh] w-full">
+        <div class="grid w-full max-w-lg scale-100 gap-4 border-base sm:border bg-white dark:bg-zinc-900/90 dark:backdrop-blur-lg p-6 opacity-100 shadow-lg  sm:rounded-lg  md:w-full">
+          <div class="flex flex-col space-y-2 text-center sm:text-left"><h2 id="radix-:rl:" class="text-lg font-semibold">{props.title}</h2><p id="radix-:rm:" class="text-sm text-muted-foreground">{props.description}</p></div>
+          <div class="flex flex-col-reverse sm:flex-row sm:justify-end gap-2">
+            <button class="button" onClick={() => props.onCancel()}>{t('conversations.confirm.cancel')}</button>
+            <button class="emerald-button" onClick={() => props.onConfirm()}>{t('conversations.confirm.btn')}</button>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  )
+}

src/components/ui/Modal.tsx

@@ -11,6 +11,7 @@ interface Props {
   direction: 'top' | 'bottom' | 'left' | 'right'
   children: JSXElement
   closeBtnClass?: string
+  hiddenCloseIcon?: boolean
 }
 
 export default (props: Props) => {
@@ -45,9 +46,9 @@ export default (props: Props) => {
           </Portal>
           <div {...api().containerProps}>
             <div {...api().contentProps} class={`bg-modal transition-transform ease-out max-w-screen max-h-screen overflow-auto border-base shadow-lg ring-0 outline-none ${containerBaseClass}`}>
-              <button {...api().closeTriggerProps} class={`absolute p-1 rounded-md top-4 right-4 hv-base hv-foreground ${props.closeBtnClass || ''}`}>
-                <div i-carbon-close class="text-xl" />
-              </button>
+              {
+                !props.hiddenCloseIcon && <button {...api().closeTriggerProps} class={`absolute p-1 rounded-md top-4 right-4 hv-base hv-foreground ${props.closeBtnClass || ''}`}> <div i-carbon-close class="text-xl" /></button>
+              }
               { props.children }
             </div>
           </div>

src/locale/lang/en.ts

@@ -24,6 +24,13 @@ export const en = {
       recent: 'Recents',
       noRecent: 'No recents',
       untitled: 'Untitled',
+      confirm: {
+        title: 'Delete all messages in this chat',
+        desc: 'This action cannot be undone.',
+        message: 'Delete this record',
+        btn: 'confirm',
+        cancel: 'cancel',
+      },
     },
     send: {
       placeholder: 'Enter Something...',

src/locale/lang/zh-cn.ts

@@ -24,6 +24,13 @@ export const zhCN = {
       recent: '最近对话',
       noRecent: '暂无最近对话',
       untitled: '未命名对话',
+      confirm: {
+        title: '删除本会话的所有消息',
+        desc: '这将删除本会话的所有消息，且不可恢复',
+        message: '删除这条记录',
+        btn: '确认',
+        cancel: '取消',
+      },
     },
     send: {
       placeholder: '输入内容...',

src/stores/ui.ts

@@ -5,6 +5,7 @@ export const showConversationSidebar = atom(false)
 export const showSettingsSidebar = atom(false)
 export const showConversationEditModal = atom(false)
 export const showEmojiPickerModal = atom(false)
+export const showConfirmModal = atom(false)
 
 export const isSendBoxFocus = atom(false)
 export const currentErrorMessage = atom<ErrorMessage | null>(null)

unocss.config.ts

@@ -58,6 +58,7 @@ export default defineConfig({
     'hv-foreground': 'transition-opacity cursor-pointer op-70 hover:op-100',
     'input-base': 'bg-transparent placeholder:op-50 dark:placeholder:op-20 focus:(ring-0 outline-none) resize-none',
     'button': 'mt-4 px-3 py-2 text-xs border border-base rounded-lg hv-base hover:border-base-100',
+    'emerald-button': 'mt-4 px-3 py-2 text-xs border rounded-lg text-light-400 border-emerald-600 bg-emerald-600 hover-bg-emerald-700 hover-border-emerald-700',
     'max-w-base': 'max-w-3xl mx-auto',
     'text-error': 'text-red-700 dark:text-red-400/80',
     'border-error': 'border border-red-700 dark:border-red-400/80',