💄 style(ui): Confirmation when adding a new topic (lobehub#3030)

* 💄 style(ui): Confirm before opening a new topic

* 💄 style(ui): Always display `MoreVertical` on mobile

* 💄 style(ui): Adjust style of some components

* 💄 style(ui): Adjust the popment of `Popconfirm`

* 💄 style(ui): Adjust the popment of `Popconfirm`

locales/ar/chat.json

@@ -99,6 +99,8 @@
       "duplicate": "إنشاء نسخة",
       "export": "تصدير الموضوع"
     },
+    "checkOpenNewTopic": "هل ترغب في فتح موضوع جديد؟",
+    "checkSaveCurrentMessages": "هل ترغب في حفظ الدردشة الحالية كموضوع؟",
     "confirmRemoveAll": "سيتم حذف جميع المواضيع قريبًا، وبمجرد الحذف لن يمكن استعادتها، يرجى التحلي بالحذر.",
     "confirmRemoveTopic": "سيتم حذف هذا الموضوع قريبًا، وبمجرد الحذف لن يمكن استعادته، يرجى التحلي بالحذر.",
     "confirmRemoveUnstarred": "سيتم حذف المواضيع غير المحفوظة قريبًا، وبمجرد الحذف لن يمكن استعادتها، يرجى التحلي بالحذر.",

locales/bg-BG/chat.json

@@ -99,6 +99,8 @@
       "duplicate": "Създай копие",
       "export": "Експортирай тема"
     },
+    "checkOpenNewTopic": "Да се отвори ли нова тема?",
+    "checkSaveCurrentMessages": "Искате ли да запазите текущата сесия като тема?",
     "confirmRemoveAll": "На път си да изтриеш всички теми. След като бъдат изтрити, те не могат да бъдат възстановени. Моля, продължи с повишено внимание.",
     "confirmRemoveTopic": "На път си да изтриеш тази тема. След като бъде изтрита, тя не може да бъде възстановена. Моля, продължи с повишено внимание.",
     "confirmRemoveUnstarred": "На път си да изтриеш немаркираните теми. След като бъдат изтрити, те не могат да бъдат възстановени. Моля, продължи с повишено внимание.",

locales/de-DE/chat.json

@@ -99,6 +99,8 @@
       "duplicate": "Kopie erstellen",
       "export": "Thema exportieren"
     },
+    "checkOpenNewTopic": "Soll ein neues Thema eröffnet werden?",
+    "checkSaveCurrentMessages": "Möchten Sie die aktuelle Konversation als Thema speichern?",
     "confirmRemoveAll": "Möchtest du wirklich alle Themen löschen? Diese Aktion kann nicht rückgängig gemacht werden.",
     "confirmRemoveTopic": "Möchtest du dieses Thema wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.",
     "confirmRemoveUnstarred": "Möchtest du die nicht markierten Themen wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.",

locales/en-US/chat.json

@@ -99,6 +99,8 @@
       "duplicate": "Create Copy",
       "export": "Export Topic"
     },
+    "checkOpenNewTopic": "Enable new topic?",
+    "checkSaveCurrentMessages": "Do you want to save the current conversation as a topic?",
     "confirmRemoveAll": "You are about to delete all topics. Once deleted, they cannot be recovered. Please proceed with caution.",
     "confirmRemoveTopic": "You are about to delete this topic. Once deleted, it cannot be recovered. Please proceed with caution.",
     "confirmRemoveUnstarred": "You are about to delete unstarred topics. Once deleted, they cannot be recovered. Please proceed with caution.",

locales/es-ES/chat.json

@@ -99,6 +99,8 @@
       "duplicate": "Crear copia",
       "export": "Exportar tema"
     },
+    "checkOpenNewTopic": "¿Abrir un nuevo tema?",
+    "checkSaveCurrentMessages": "¿Desea guardar la conversación actual como tema?",
     "confirmRemoveAll": "Estás a punto de eliminar todos los temas. Una vez eliminados, no se podrán recuperar. Por favor, procede con precaución.",
     "confirmRemoveTopic": "Estás a punto de eliminar este tema. Una vez eliminado, no se podrá recuperar. Por favor, procede con precaución.",
     "confirmRemoveUnstarred": "Estás a punto de eliminar los temas no marcados como favoritos. Una vez eliminados, no se podrán recuperar. Por favor, procede con precaución.",

locales/fr-FR/chat.json

@@ -99,6 +99,8 @@
       "duplicate": "Créer une copie",
       "export": "Exporter le sujet"
     },
+    "checkOpenNewTopic": "Voulez-vous ouvrir un nouveau sujet ?",
+    "checkSaveCurrentMessages": "Voulez-vous enregistrer la conversation actuelle en tant que sujet ?",
     "confirmRemoveAll": "Vous êtes sur le point de supprimer tous les sujets. Cette action est irréversible. Veuillez confirmer.",
     "confirmRemoveTopic": "Vous êtes sur le point de supprimer ce sujet. Cette action est irréversible. Veuillez confirmer.",
     "confirmRemoveUnstarred": "Vous êtes sur le point de supprimer les sujets non favoris. Cette action est irréversible. Veuillez confirmer.",

locales/it-IT/chat.json

@@ -99,6 +99,8 @@
       "duplicate": "Crea copia",
       "export": "Esporta argomento"
     },
+    "checkOpenNewTopic": "Abilitare un nuovo argomento?",
+    "checkSaveCurrentMessages": "Vuoi salvare la conversazione attuale come argomento?",
     "confirmRemoveAll": "Stai per rimuovere tutti gli argomenti, questa operazione non potrà essere annullata. Procedere con cautela.",
     "confirmRemoveTopic": "Stai per rimuovere questo argomento, l'operazione non potrà essere annullata. Procedere con cautela.",
     "confirmRemoveUnstarred": "Stai per rimuovere gli argomenti non contrassegnati, questa operazione non potrà essere annullata. Procedere con cautela.",

locales/ja-JP/chat.json

@@ -99,6 +99,8 @@
       "duplicate": "コピーを作成",
       "export": "トピックをエクスポート"
     },
+    "checkOpenNewTopic": "新しいトピックを開始しますか？",
+    "checkSaveCurrentMessages": "現在の会話をトピックとして保存しますか？",
     "confirmRemoveAll": "すべてのトピックを削除します。削除した後は元に戻すことはできません。注意して操作してください。",
     "confirmRemoveTopic": "このトピックを削除します。削除した後は元に戻すことはできません。注意して操作してください。",
     "confirmRemoveUnstarred": "スターをつけていないトピックを削除します。削除した後は元に戻すことはできません。注意して操作してください。",

locales/ko-KR/chat.json

@@ -99,6 +99,8 @@
       "duplicate": "복사본 만들기",
       "export": "주제 내보내기"
     },
+    "checkOpenNewTopic": "새 주제를 열까요?",
+    "checkSaveCurrentMessages": "현재 대화를 주제로 저장하시겠습니까?",
     "confirmRemoveAll": "모든 주제를 삭제하시면 되돌릴 수 없습니다. 신중하게 작업하시겠습니까?",
     "confirmRemoveTopic": "이 주제를 삭제하시면 되돌릴 수 없습니다. 신중하게 작업하시겠습니까?",
     "confirmRemoveUnstarred": "별표가 없는 주제를 삭제하시면 되돌릴 수 없습니다. 신중하게 작업하시겠습니까?",

locales/nl-NL/chat.json

@@ -99,6 +99,8 @@
       "duplicate": "Dupliceren",
       "export": "Exporteren"
     },
+    "checkOpenNewTopic": "Is het openen van een nieuw onderwerp ingeschakeld?",
+    "checkSaveCurrentMessages": "Wil je het huidige gesprek opslaan als onderwerp?",
     "confirmRemoveAll": "Alle onderwerpen worden verwijderd en kunnen niet worden hersteld. Wees voorzichtig.",
     "confirmRemoveTopic": "Dit onderwerp wordt verwijderd en kan niet worden hersteld. Wees voorzichtig.",
     "confirmRemoveUnstarred": "Niet-gefavoriseerde onderwerpen worden verwijderd en kunnen niet worden hersteld. Wees voorzichtig.",

locales/pl-PL/chat.json

@@ -99,6 +99,8 @@
       "duplicate": "Utwórz kopię",
       "export": "Eksportuj temat"
     },
+    "checkOpenNewTopic": "Czy otworzyć nowy temat?",
+    "checkSaveCurrentMessages": "Czy zapisać bieżącą rozmowę jako temat?",
     "confirmRemoveAll": "Czy na pewno chcesz usunąć wszystkie tematy? Tej operacji nie można cofnąć. Proszę potwierdź swoją decyzję.",
     "confirmRemoveTopic": "Czy na pewno chcesz usunąć ten temat? Tej operacji nie można cofnąć. Proszę potwierdź swoją decyzję.",
     "confirmRemoveUnstarred": "Czy na pewno chcesz usunąć nieoznaczone tematy? Tej operacji nie można cofnąć. Proszę potwierdź swoją decyzję.",

locales/pt-BR/chat.json

@@ -99,6 +99,8 @@
       "duplicate": "Criar Cópia",
       "export": "Exportar Tópico"
     },
+    "checkOpenNewTopic": "Deseja abrir um novo tópico?",
+    "checkSaveCurrentMessages": "Salvar a conversa atual como tópico?",
     "confirmRemoveAll": "Você está prestes a remover todos os tópicos. Depois de remover, não será possível recuperá-los. Por favor, confirme sua ação.",
     "confirmRemoveTopic": "Você está prestes a remover este tópico. Depois de remover, não será possível recuperá-lo. Por favor, confirme sua ação.",
     "confirmRemoveUnstarred": "Você está prestes a remover os tópicos não favoritados. Depois de remover, não será possível recuperá-los. Por favor, confirme sua ação.",

locales/ru-RU/chat.json

@@ -99,6 +99,8 @@
       "duplicate": "Создать копию",
       "export": "Экспорт темы"
     },
+    "checkOpenNewTopic": "Открыть новую тему?",
+    "checkSaveCurrentMessages": "Сохранить текущий разговор как тему?",
     "confirmRemoveAll": "Вы уверены, что хотите удалить все темы? После этого их нельзя будет восстановить.",
     "confirmRemoveTopic": "Вы уверены, что хотите удалить эту тему? После этого ее нельзя будет восстановить.",
     "confirmRemoveUnstarred": "Вы уверены, что хотите удалить неотмеченные темы? После этого их нельзя будет восстановить.",

locales/tr-TR/chat.json

@@ -99,6 +99,8 @@
       "duplicate": "Kopya Oluştur",
       "export": "Konuyu Dışa Aktar"
     },
+    "checkOpenNewTopic": "Yeni bir konu açılsın mı?",
+    "checkSaveCurrentMessages": "Mevcut sohbeti konu olarak kaydetmek istiyor musunuz?",
     "confirmRemoveAll": "Tüm konuları silmek üzeresiniz. Bir kere silindiğinde, geri alınamazlar. Lütfen dikkatli bir şekilde devam edin.",
     "confirmRemoveTopic": "Bu konuyu silmek üzeresiniz. Bir kere silindiğinde, geri alınamaz. Lütfen dikkatli bir şekilde devam edin.",
     "confirmRemoveUnstarred": "Yıldızlanmamış konuları silmek üzeresiniz. Bir kere silindiğinde, geri alınamazlar. Lütfen dikkatli bir şekilde devam edin.",

locales/vi-VN/chat.json

@@ -99,6 +99,8 @@
       "duplicate": "Tạo bản sao",
       "export": "Xuất chủ đề"
     },
+    "checkOpenNewTopic": "Có muốn mở chủ đề mới không?",
+    "checkSaveCurrentMessages": "Bạn có muốn lưu cuộc trò chuyện hiện tại thành chủ đề không?",
     "confirmRemoveAll": "Bạn sắp xóa tất cả chủ đề. Hành động này không thể hoàn tác, vui lòng xác nhận.",
     "confirmRemoveTopic": "Bạn sắp xóa chủ đề này. Hành động này không thể hoàn tác, vui lòng xác nhận.",
     "confirmRemoveUnstarred": "Bạn sắp xóa các chủ đề chưa được đánh dấu. Hành động này không thể hoàn tác, vui lòng xác nhận.",

locales/zh-CN/chat.json

@@ -99,6 +99,7 @@
       "duplicate": "创建副本",
       "export": "导出话题"
     },
+    "checkOpenNewTopic": "是否开启新话题?",
     "confirmRemoveAll": "即将删除全部话题，删除后将不可恢复，请谨慎操作。",
     "confirmRemoveTopic": "即将删除该话题，删除后将不可恢复，请谨慎操作。",
     "confirmRemoveUnstarred": "即将删除未收藏话题，删除后将不可恢复，请谨慎操作。",
@@ -112,6 +113,7 @@
     "openNewTopic": "开启新话题",
     "removeAll": "删除全部话题",
     "removeUnstarred": "删除未收藏话题",
+    "checkSaveCurrentMessages": "是否保存当前会话为话题?",
     "saveCurrentMessages": "将当前会话保存为话题",
     "searchPlaceholder": "搜索话题...",
     "title": "话题"

locales/zh-TW/chat.json

@@ -99,6 +99,8 @@
       "duplicate": "建立副本",
       "export": "匯出主題"
     },
+    "checkOpenNewTopic": "是否開啟新主題?",
+    "checkSaveCurrentMessages": "是否將當前對話保存為話題？",
     "confirmRemoveAll": "即將刪除全部話題，刪除後將不可恢復，請謹慎操作。",
     "confirmRemoveTopic": "即將刪除該話題，刪除後將不可恢復，請謹慎操作。",
     "confirmRemoveUnstarred": "即將刪除未收藏話題，刪除後將不可恢復，請謹慎操作。",

src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/TopicContent.tsx

@@ -14,6 +14,7 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { useIsMobile } from '@/hooks/useIsMobile';
 import { useChatStore } from '@/store/chat';
 
 const useStyles = createStyles(({ css }) => ({
@@ -41,6 +42,8 @@ interface TopicContentProps {
 const TopicContent = memo<TopicContentProps>(({ id, title, fav, showMore }) => {
   const { t } = useTranslation('common');
 
+  const mobile = useIsMobile();
+
   const [
     editing,
     favoriteTopic,
@@ -183,7 +186,7 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav, showMore }) => {
           value={title}
         />
       )}
-      {showMore && !editing && (
+      {(showMore || mobile) && !editing && (
         <Dropdown
           arrow={false}
           menu={{

src/features/ChatInput/ActionBar/Clear.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import HotKeys from '@/components/HotKeys';
 import { ALT_KEY, CLEAN_MESSAGE_KEY, META_KEY } from '@/const/hotkeys';
+import { useIsMobile } from '@/hooks/useIsMobile';
 import { useChatStore } from '@/store/chat';
 import { useFileStore } from '@/store/file';
 
@@ -15,6 +16,7 @@ const Clear = memo(() => {
   const [clearImageList] = useFileStore((s) => [s.clearImageList]);
   const hotkeys = [META_KEY, ALT_KEY, CLEAN_MESSAGE_KEY].join('+');
   const [confirmOpened, updateConfirmOpened] = useState(false);
+  const mobile = useIsMobile();
 
   const resetConversation = useCallback(async () => {
     await clearMessage();
@@ -27,21 +29,28 @@ const Clear = memo(() => {
     <HotKeys desc={t('clearCurrentMessages', { ns: 'chat' })} inverseTheme keys={hotkeys} />
   );
 
+  const popconfirmPlacement = mobile ? 'top' : 'topRight';
+
   return (
     <Popconfirm
       arrow={false}
       okButtonProps={{ danger: true, type: 'primary' }}
       onConfirm={resetConversation}
       onOpenChange={updateConfirmOpened}
       open={confirmOpened}
-      placement={'topRight'}
-      title={t('confirmClearCurrentMessages', { ns: 'chat' })}
+      placement={popconfirmPlacement}
+      title={
+        <div style={{ marginBottom: '8px', whiteSpace: 'pre-line', wordBreak: 'break-word' }}>
+          {t('confirmClearCurrentMessages', { ns: 'chat' })}
+        </div>
+      }
     >
-      <ActionIcon 
-        icon={Eraser} 
+      <ActionIcon
+        icon={Eraser}
         overlayStyle={{ maxWidth: 'none' }}
-        placement={'bottom'} 
-        title={actionTitle} />
+        placement={'bottom'}
+        title={actionTitle}
+      />
     </Popconfirm>
   );
 });

src/features/ChatInput/Topic/index.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, Icon, Tooltip } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Button, Popconfirm } from 'antd';
 import { LucideGalleryVerticalEnd, LucideMessageSquarePlus } from 'lucide-react';
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
@@ -19,9 +19,9 @@ const SaveTopic = memo<{ mobile?: boolean }>(({ mobile }) => {
 
   const { mutate, isValidating } = useActionSWR('openNewTopicOrSaveTopic', openNewTopicOrSaveTopic);
 
+  const [confirmOpened, setConfirmOpened] = useState(false);
+
   const icon = hasTopic ? LucideMessageSquarePlus : LucideGalleryVerticalEnd;
-  const Render = mobile ? ActionIcon : Button;
-  const iconRender: any = mobile ? icon : <Icon icon={icon} />;
   const desc = t(hasTopic ? 'topic.openNewTopic' : 'topic.saveCurrentMessages');
 
   const hotkeys = [ALT_KEY, SAVE_TOPIC_KEY].join('+');
@@ -31,11 +31,46 @@ const SaveTopic = memo<{ mobile?: boolean }>(({ mobile }) => {
     preventDefault: true,
   });
 
-  return (
-    <Tooltip title={<HotKeys desc={desc} inverseTheme keys={hotkeys} />}>
-      <Render aria-label={desc} icon={iconRender} loading={isValidating} onClick={() => mutate()} />
-    </Tooltip>
-  );
+  if (mobile) {
+    return (
+      <Popconfirm
+        arrow={false}
+        okButtonProps={{ danger: false, type: 'primary' }}
+        onConfirm={() => mutate()}
+        onOpenChange={setConfirmOpened}
+        open={confirmOpened}
+        placement={'top'}
+        title={
+          <div style={{ alignItems: 'center', display: 'flex', marginBottom: '8px' }}>
+            <div style={{ marginRight: '16px', whiteSpace: 'pre-line', wordBreak: 'break-word' }}>
+              {t(hasTopic ? 'topic.checkOpenNewTopic' : 'topic.checkSaveCurrentMessages')}
+            </div>
+            <HotKeys inverseTheme={false} keys={hotkeys} />
+          </div>
+        }
+      >
+        <Tooltip>
+          <ActionIcon
+            aria-label={desc}
+            icon={icon}
+            loading={isValidating}
+            onClick={() => setConfirmOpened(true)}
+          />
+        </Tooltip>
+      </Popconfirm>
+    );
+  } else {
+    return (
+      <Tooltip title={<HotKeys desc={desc} inverseTheme keys={hotkeys} />}>
+        <Button
+          aria-label={desc}
+          icon={<Icon icon={icon} />}
+          loading={isValidating}
+          onClick={() => mutate()}
+        />
+      </Tooltip>
+    );
+  }
 });
 
 export default SaveTopic;

src/locales/default/chat.ts

@@ -100,6 +100,8 @@ export default {
       duplicate: '创建副本',
       export: '导出话题',
     },
+    checkOpenNewTopic: '是否开启新话题?',
+    checkSaveCurrentMessages: '是否保存当前会话为话题?',
     confirmRemoveAll: '即将删除全部话题，删除后将不可恢复，请谨慎操作。',
     confirmRemoveTopic: '即将删除该话题，删除后将不可恢复，请谨慎操作。',
     confirmRemoveUnstarred: '即将删除未收藏话题，删除后将不可恢复，请谨慎操作。',