feat(chat): 优化面具设置

src/app/(main)/chat/[id]/Drawer/Profile.tsx

@@ -18,12 +18,6 @@ import { useModels } from '@/hooks/services/chat';
 import { toast } from 'sonner';
 import { useTranslations } from 'next-intl';
 
-const genderMap = {
-  0: '/icons/male.svg',
-  1: '/icons/female.svg',
-  2: '/icons/gender-neutral.svg',
-};
-
 const ChatProfilePersona = React.memo(({ onActiveTab }: ProfileProps) => {
   const t = useTranslations('chat.drawer');
   const tCommon = useTranslations('common');
@@ -32,9 +26,7 @@ const ChatProfilePersona = React.memo(({ onActiveTab }: ProfileProps) => {
   const items = [
     {
       label: t('profile.gender'),
-      value: (
+      value: tCommon(`gender_${0}`),
-        <Image src={genderMap[0 as keyof typeof genderMap]} alt="gender" width={24} height={24} />
-      ),
     },
     {
       label: t('profile.age'),
@@ -63,7 +55,7 @@ const ChatProfilePersona = React.memo(({ onActiveTab }: ProfileProps) => {
         onClick={() => onActiveTab('mask_list')}
         className="bg-surface-element-normal cursor-pointer rounded-m flex items-center justify-between gap-4 px-4 py-3"
       >
-        <div className="txt-label-l text-txt-secondary-normal">{t('profile.nickname')}</div>
+        <div className="txt-label-l text-txt-secondary-normal">{t('profile.preset')}</div>
         <div className="txt-label-l text-txt-primary-normal">
           {'John Doe'}
           <IconButton iconfont="icon-arrow-right-border" size="small" variant="ghost" />

src/app/(main)/chat/[id]/stream-chat.ts

@@ -144,7 +144,9 @@ export const useStreamChatStore = create<StreamChatStore>((set, get) => ({
   async connect(user) {
     const { client, queryChannels, fetchUserChatSetting } = get();
     set({ user });
-    if (client) return;
+    if (client) {
+      return;
+    }
     const { data } = await getUserToken(user);
     const streamClient = new StreamChat(process.env.NEXT_PUBLIC_STREAM_CHAT_API_KEY || '');
     await protect(() =>

src/i18n/en-US.ts

@@ -1,11 +1,13 @@
 export default {
-  hello: 'Hello',
   common: {
     search: 'Search',
     cancel: 'Cancel',
     edit: 'Edit',
     select: 'Select',
     default: 'Default',
+    gender_0: 'Male',
+    gender_1: 'Female',
+    gender_2: 'Other',
   },
   bottomBar: {
     explore: 'Explore',
@@ -39,7 +41,7 @@ export default {
       background: 'Background',
       model: 'Chat Model',
       profile: {
-        nickname: 'Nickname',
+        preset: 'Preset',
         gender: 'Gender',
         age: 'Age',
         whoAmI: 'Who am I',

src/i18n/zh-CN.ts

@@ -1,11 +1,13 @@
 export default {
-  hello: '你好',
   common: {
     search: '搜索',
     cancel: '取消',
     edit: '编辑',
     select: '选择',
     default: '默认',
+    gender_0: '男性',
+    gender_1: '女性',
+    gender_2: '其他',
   },
   bottomBar: {
     explore: '首页',
@@ -39,7 +41,7 @@ export default {
       background: '背景',
       model: '聊天模型',
       profile: {
-        nickname: '昵称',
+        preset: '预设',
         gender: '性别',
         age: '年龄',
         whoAmI: '我是谁',

src/layout/BasicLayout/Topbar.tsx

@@ -77,47 +77,35 @@ function Topbar() {
   const rightDomRender = () => {
     if (!response || isLoading) return null;
 
-    const items = [
+    return (
-      {
+      <div className="flex items-center">
-        dom: <LocaleSwitch key="locale-switch" />,
+        <LocaleSwitch key="locale-switch" />
-      },
+        {user && <Notice key="notice" />}
-      {
+        {user && (
-        hide: !user,
-        dom: <Notice key="notice" />,
-      },
-      {
-        hide: !user,
-        dom: (
           <Link href="/profile" prefetch key="profile">
             <Avatar className="size-8 cursor-pointer">
               <AvatarImage
                 className="object-cover"
-                src={user!.headImage}
+                src={user?.headImage}
-                alt={user!.nickname}
+                alt={user?.nickname}
                 width={32}
                 height={32}
               />
-              <AvatarFallback>{user!.nickname?.slice(0, 1)}</AvatarFallback>
+              <AvatarFallback>{user?.nickname?.slice(0, 1)}</AvatarFallback>
             </Avatar>
           </Link>
-        ),
+        )}
-      },
+        {!user && (
-      {
-        hide: user,
-        dom: (
           <Link href={loginHref} prefetch key="login">
             <Button size="small">Login in</Button>
           </Link>
-        ),
+        )}
-      },
+      </div>
-    ].filter((item) => !item.hide);
+    );
-
-    return <div className="flex items-center">{items.map((item) => item.dom)}</div>;
   };
 
   // 移动端根据配置决定是否隐藏 Topbar
-  const isMobile = response && !response.sm;
+  if (response?.isMobile && routeConfig.hideOnMobile) {
-  if (isMobile && routeConfig.hideOnMobile) {
     return null;
   }
 

src/layout/BasicLayout/index.tsx

@@ -52,13 +52,13 @@ export default function ConditionalLayout({ children }: ConditionalLayoutProps)
 
   return (
     <div className="flex h-screen bg-[url('/common-bg.png')] bg-[length:100%_30%] bg-top bg-no-repeat">
-      {response?.sm && <Sidebar />}
+      {response?.isPC && <Sidebar />}
       <div ref={mainContentRef} className={cn('relative flex flex-1 flex-col')}>
         <Topbar />
         <main id="main-content" className="overflow-auto flex-1">
           {children}
         </main>
-        {response && !response.sm && <BottomBar />}
+        {response?.isMobile && <BottomBar />}
       </div>
       {/* <ChargeDrawer /> */}
       {/* <SubscribeVipDrawer /> */}

src/layout/ProfileLayout/index.tsx

@@ -28,7 +28,7 @@ export default function ProfileLayout(props: ProfileLayoutProps) {
         {rightDom}
       </div>
       <div className="flex-1">{children}</div>
-      {bottomButton && response && !response.sm && (
+      {bottomButton && response?.isMobile && (
         <div className="shrink-0 h-18 flex items-center">{bottomButton}</div>
       )}
     </div>