feat: remove header ssr

yzh990918 · yzh990918 · commit 42d431d2788c · 2023-05-23T11:41:09.000+08:00
diff --git a/src/components/Main.astro b/src/components/Main.astro
@@ -8,7 +8,7 @@ import Conversation from './main/Conversation'
 ---
 
 <main class="relative h-full flex-1 flex flex-col overflow-hidden bg-base">
-  <Header client:load />
+  <Header client:only />
   <main class="flex-1 mt-14 flex flex-col overflow-hidden">
     <div class="flex-1 relative overflow-hidden">
       <Conversation client:only />
diff --git a/src/components/header/ConversationMessageClearButton.tsx b/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() && (
+      {$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) }} />
     </>
   )
 }
diff --git a/src/components/ui/ConfirmModal.tsx b/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="hidden" >
+      <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>
+  )
+}
diff --git a/src/locale/lang/en.ts b/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...',
diff --git a/src/locale/lang/zh-cn.ts b/src/locale/lang/zh-cn.ts
@@ -24,6 +24,13 @@ export const zhCN = {
       recent: '最近对话',
       noRecent: '暂无最近对话',
       untitled: '未命名对话',
+      confirm: {
+        title: '删除本会话的所有消息',
+        desc: '这将删除本会话的所有消息，且不可恢复',
+        message: '删除这条记录',
+        btn: '确认',
+        cancel: '取消',
+      },
     },
     send: {
       placeholder: '输入内容...',
diff --git a/src/stores/ui.ts b/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)
diff --git a/unocss.config.ts b/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',
