feat: 添加对话模式和视频模式

src/app/chat/CameraMode/Background/index.tsx

@@ -0,0 +1,24 @@
+import { useGlobalStore } from '@/store/global';
+
+const Background = () => {
+  const backgroundUrl = useGlobalStore((s) => s.backgroundUrl);
+
+  return backgroundUrl ? (
+    <div
+      style={{
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        backgroundImage: `url(${backgroundUrl})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        width: '100%',
+        height: '100%',
+        zIndex: -1,
+        transition: 'background-image 0.5s ease-in-out',
+      }}
+    ></div>
+  ) : null;
+};
+
+export default Background;

src/app/chat/CameraMode/Operation/actions/CallOff.tsx

@@ -0,0 +1,31 @@
+import { ActionIcon } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { Phone } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { DESKTOP_OPERATION_ICON_SIZE } from '@/constants/token';
+import { useSessionStore } from '@/store/session';
+
+const CallOff = () => {
+  const [setChatMode] = useSessionStore((s) => [s.setChatMode]);
+  const setVoiceOn = useSessionStore((s) => s.setVoiceOn);
+  const theme = useTheme();
+  const { t } = useTranslation('chat');
+  return (
+    <ActionIcon
+      icon={Phone}
+      onClick={() => {
+        setVoiceOn(false);
+        setChatMode('chat');
+      }}
+      title={t('callOff')}
+      size={DESKTOP_OPERATION_ICON_SIZE}
+      style={{
+        backgroundColor: theme.colorError,
+        color: theme.colorWhite,
+      }}
+    />
+  );
+};
+
+export default CallOff;

src/app/chat/ViewerMode/MessageInput/actions/Record.tsx → src/app/chat/CameraMode/Operation/actions/Record.tsx

@@ -1,14 +1,17 @@
 import { ActionIcon } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
 import { Mic } from 'lucide-react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { DESKTOP_OPERATION_ICON_SIZE_LARGE } from '@/constants/token';
 import { useSpeechRecognition } from '@/hooks/useSpeechRecognition';
 import { useSessionStore } from '@/store/session';
 
 const Record = () => {
   const [sendMessage, setMessageInput] = useSessionStore((s) => [s.sendMessage, s.setMessageInput]);
   const { t } = useTranslation('chat');
+  const theme = useTheme();
   const handleMessageInput = useCallback(
     (result: string, isFinal: boolean) => {
       setMessageInput(result);
@@ -25,7 +28,16 @@ const Record = () => {
   });
 
   return (
-    <ActionIcon icon={Mic} loading={isRecording} onClick={toggleRecord} title={t('tts.record')} />
+    <ActionIcon
+      icon={Mic}
+      loading={isRecording}
+      onClick={toggleRecord}
+      title={t('tts.record')}
+      size={DESKTOP_OPERATION_ICON_SIZE_LARGE}
+      style={{
+        backgroundColor: theme.colorBgElevated,
+      }}
+    />
   );
 };
 

src/app/chat/CameraMode/Operation/actions/Setting.tsx

@@ -0,0 +1,25 @@
+import { ActionIcon } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { Box } from 'lucide-react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { DESKTOP_OPERATION_ICON_SIZE } from '@/constants/token';
+import { useGlobalStore } from '@/store/global';
+
+export default () => {
+  const [toggleChatSideBar] = useGlobalStore((s) => [s.toggleChatSideBar]);
+  const theme = useTheme();
+  const { t } = useTranslation('dance');
+  return (
+    <ActionIcon
+      icon={Box}
+      onClick={() => toggleChatSideBar()}
+      title={t('menu')}
+      size={DESKTOP_OPERATION_ICON_SIZE}
+      style={{
+        backgroundColor: theme.colorBgElevated,
+      }}
+    />
+  );
+};

src/app/chat/CameraMode/Operation/index.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import CallOff from './actions/CallOff';
+import Record from './actions/Record';
+import Setting from './actions/Setting';
+
+const VoiceOperation = memo(() => {
+  return (
+    <Flexbox gap={24} horizontal align={'center'}>
+      <CallOff />
+      <Record />
+      <Setting />
+    </Flexbox>
+  );
+});
+
+export default VoiceOperation;

src/app/chat/ChatInfo/PostureList/SideBar/index.tsx → src/app/chat/CameraMode/Settings/PostureList/SideBar/index.tsx

@@ -3,12 +3,13 @@ import { ReactNode, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import CategoryFilter from '@/app/chat/ChatInfo/PostureList/SideBar/filters/CategoryFilter';
-import GenderFilter from '@/app/chat/ChatInfo/PostureList/SideBar/filters/GenderFilter';
 import Header from '@/components/Header';
 import { GenderEnum } from '@/types/agent';
 import { PostureCategoryEnum } from '@/types/touch';
 
+import CategoryFilter from './filters/CategoryFilter';
+import GenderFilter from './filters/GenderFilter';
+
 interface IndexProps {
   categoryOptions: { icon: ReactNode; label: string; value: PostureCategoryEnum | undefined }[];
   currentCategory: PostureCategoryEnum | undefined;

src/app/chat/ChatInfo/index.tsx → src/app/chat/CameraMode/Settings/index.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { DraggablePanel, TabsNav } from '@lobehub/ui';
+import { ActionIcon, DraggablePanel, TabsNav } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
+import { X } from 'lucide-react';
 import dynamic from 'next/dynamic';
 import { rgba } from 'polished';
 import React, { useState } from 'react';
@@ -20,11 +21,6 @@ const Loading = () => (
   </div>
 );
 
-const ChatList = dynamic(() => import('./ChatList'), {
-  ssr: false,
-  loading: Loading,
-});
-
 const BackGround = dynamic(() => import('./BackGroundList'), {
   ssr: false,
   loading: Loading,
@@ -56,7 +52,7 @@ const useStyles = createStyles(({ css, token }) => ({
     display: flex;
     flex-direction: column;
 
-    background-color: ${rgba(token.colorBgLayout, 0.2)};
+    background-color: ${rgba(token.colorBgLayout, 0.8)};
     backdrop-filter: saturate(180%) blur(8px);
   `,
   header: css`
@@ -66,6 +62,15 @@ const useStyles = createStyles(({ css, token }) => ({
   player: css`
     min-width: 480px;
   `,
+  closeIcon: css`
+    cursor: pointer;
+    margin-right: 12px;
+    color: ${token.colorTextSecondary};
+
+    &:hover {
+      color: ${token.colorText};
+    }
+  `,
 }));
 
 export default () => {
@@ -74,7 +79,7 @@ export default () => {
     s.setChatSidebar,
   ]);
 
-  const [tab, setTab] = useState<Tab>(Tab.ChatList);
+  const [tab, setTab] = useState<Tab>(Tab.DanceList);
   const { t } = useTranslation('chat');
 
   const { styles } = useStyles();
@@ -84,7 +89,7 @@ export default () => {
       classNames={{ content: styles.content }}
       minWidth={CHAT_INFO_WIDTH}
       maxWidth={CHAT_INFO_MAX_WIDTH}
-      mode={'fixed'}
+      mode={'float'}
       onExpandChange={(expand) => {
         setChatSidebar(expand);
       }}
@@ -93,12 +98,20 @@ export default () => {
     >
       <Flexbox justify={'space-between'} horizontal align={'center'} className={styles.header}>
         <TabsNav
+          variant={'compact'}
           activeKey={tab}
+          tabBarExtraContent={{
+            left: (
+              <ActionIcon
+                icon={X}
+                onClick={() => {
+                  setChatSidebar(false);
+                }}
+                style={{ marginLeft: 12 }}
+              />
+            ),
+          }}
           items={[
-            {
-              label: t('info.chat'),
-              key: Tab.ChatList,
-            },
             {
               label: t('info.dance'),
               key: Tab.DanceList,
@@ -125,8 +138,7 @@ export default () => {
           }}
         />
       </Flexbox>
-      <Flexbox height={'calc(100vh - 128px)'}>
-        {tab === Tab.ChatList && <ChatList />}
+      <Flexbox height={`calc(100vh - ${CHAT_HEADER_HEIGHT}px)`}>
         {tab === Tab.DanceList && <DanceList />}
         {tab === Tab.Motions && <MotionList />}
         {tab === Tab.Posture && <PostureList />}

src/app/chat/ChatInfo/type.ts → src/app/chat/CameraMode/Settings/type.ts

@@ -1,6 +1,5 @@
 export enum Tab {
   Background = 'background',
-  ChatList = 'chats',
   DanceList = 'dances',
   Motions = 'motions',
   Posture = 'posture',

src/app/chat/CameraMode/index.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import classNames from 'classnames';
+import { isEqual } from 'lodash-es';
+import React, { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import ChatDialog from '@/app/chat/CameraMode/ChatDialog';
+import { HEADER_HEIGHT } from '@/constants/token';
+import AgentViewer from '@/features/AgentViewer';
+import { sessionSelectors, useSessionStore } from '@/store/session';
+
+import Background from './Background';
+import Operation from './Operation';
+import Settings from './Settings';
+import { useStyles } from './style';
+
+export default memo(() => {
+  const { styles } = useStyles();
+  const [currentAgent, interactive] = useSessionStore(
+    (s) => [sessionSelectors.currentAgent(s), s.interactive],
+    isEqual,
+  );
+
+  return (
+    <Flexbox flex={1} horizontal>
+      <Flexbox flex={1} style={{ position: 'relative' }}>
+        {currentAgent ? (
+          <div className={styles.viewer}>
+            <AgentViewer
+              height={`calc(100vh - ${HEADER_HEIGHT}px)`}
+              agentId={currentAgent.agentId}
+              interactive={interactive}
+            />
+          </div>
+        ) : null}
+        <ChatDialog className={classNames(styles.dialog, styles.content)} />
+        <Flexbox flex={1} className={styles.mask} />
+        <Flexbox align={'center'} className={styles.docker}>
+          <Operation />
+        </Flexbox>
+      </Flexbox>
+      <Settings />
+      <Background />
+    </Flexbox>
+  );
+});

src/app/chat/ViewerMode/style.ts → src/app/chat/CameraMode/style.ts

@@ -1,8 +1,6 @@
 import { createStyles } from 'antd-style';
 
-import { CHAT_HEADER_HEIGHT, CHAT_INPUT_WIDTH } from '@/constants/token';
-
-export const useStyles = createStyles(({ css, token }) => ({
+export const useStyles = createStyles(({ css, token, responsive }) => ({
   viewer: css`
     position: absolute;
     top: 0;
@@ -16,21 +14,19 @@ export const useStyles = createStyles(({ css, token }) => ({
     max-width: 100vw;
     padding: 0 12px;
 
-    @media (max-width: 768px) {
+    ${responsive.mobile} {
       width: 100%;
     }
   `,
   dialog: css`
     z-index: 2;
-    margin: ${CHAT_HEADER_HEIGHT}px auto 0;
+    margin: ${token.marginLG}px auto 0;
   `,
   docker: css`
     z-index: 2;
     width: 100%;
+    margin-bottom: ${token.marginLG}px;
     padding: ${token.paddingSM}px;
   `,
-  input: css`
-    width: ${CHAT_INPUT_WIDTH};
-  `,
   mask: css``,
 }));