refactor(namespaces): fix name conflict

src/hooks/use-namespace.ts

@@ -1,6 +1,8 @@
 import axios from 'axios';
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
+import { toast } from 'sonner';
 
 import { Namespace } from '@/interface';
 import { http } from '@/lib/request';
@@ -12,6 +14,7 @@ export default function useNamespace() {
   const params = useParams();
   const namespace_id = params.namespace_id;
   const [loading, onLoading] = useState(false);
+  const { t } = useTranslation();
   const [data, onData] = useState<Namespace>({
     id: '',
     name: '',
@@ -43,6 +46,12 @@ export default function useNamespace() {
         onData({ ...data, ...val });
         return Promise.resolve();
       })
+      .catch(err => {
+        if (err?.response?.data?.code === 'namespace_conflict') {
+          toast.error(t('namespace.conflict'));
+        }
+        return Promise.reject(err);
+      })
       .finally(() => {
         onLoading(false);
       });

src/i18n/locales/en.json

@@ -102,7 +102,8 @@
     "max": "At most 32 characters",
     "submit": "Save",
     "success": "Updated",
-    "member_count": "{{ size }} members"
+    "member_count": "{{ size }} members",
+    "conflict": "There's already a namespace with the same name"
   },
   "login": {
     "product_name": "OmniBox",

src/i18n/locales/zh.json

@@ -102,7 +102,8 @@
     "max": "最多 32 个字符",
     "submit": "保存",
     "success": "已更新",
-    "member_count": "{{ size }} 名成员"
+    "member_count": "{{ size }} 名成员",
+    "conflict": "已有相同名称的空间"
   },
   "login": {
     "product_name": "小黑",

src/page/sidebar/switcher/form/namespace.tsx

@@ -3,6 +3,7 @@ import i18next from 'i18next';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
 import * as z from 'zod';
 
 import { Button } from '@/components/button';
@@ -42,6 +43,11 @@ export default function GenerateForm() {
       .then(data => {
         location.href = `/${data.id}/chat`;
       })
+      .catch(err => {
+        if (err?.response?.data?.code === 'namespace_conflict') {
+          toast.error(t('namespace.conflict'));
+        }
+      })
       .finally(() => {
         setLoading(false);
       });