✨ feat: 统一聊天模式和视频模式的输入方式

package.json

@@ -85,7 +85,7 @@
     "immer": "^10.0.4",
     "js-tiktoken": "^1.0.10",
     "lodash-es": "^4.17.21",
-    "lucide-react": "^0.294.0",
+    "lucide-react": "^0.308.0",
     "mmd-parser": "^1.0.4",
     "next": "^14.1.4",
     "next-pwa": "^5.6.0",

src/app/chat/page.tsx

@@ -3,22 +3,34 @@
 import React, { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import ChatBot from '@/app/chat/ChatBot';
-import VirtualIdol from '@/app/chat/VirtualIdol';
+import AgentViewer from '@/features/AgentViewer';
+import ChatDialog from '@/features/ChatDialog';
 import ChatHeader from '@/features/ChatHeader';
 import ChatInfo from '@/features/ChatInfo';
+import MessageInput from '@/features/ChatInput/MessageInput';
+import ChatList from '@/features/ChatList';
 import SessionList from '@/features/SessionList';
 import { useSessionStore } from '@/store/session';
 
+import { useStyles } from './style';
+
 const Chat = () => {
-  const viewerMode = useSessionStore((s) => s.viewerMode);
+  const [viewerMode] = useSessionStore((s) => [s.viewerMode]);
+  const { styles } = useStyles();
 
   return (
     <Flexbox flex={1} height={'100%'} width={'100%'} horizontal>
       <SessionList />
       <Flexbox height={'100%'} width={'100%'}>
         <ChatHeader />
-        {viewerMode ? <VirtualIdol /> : <ChatBot />}
+        <Flexbox flex={1} style={{ overflow: 'hidden', position: 'relative' }}>
+          {viewerMode === true ? <AgentViewer /> : <ChatList />}
+          <Flexbox style={{}} align={'center'} width={'100%'} className={styles.docker}>
+            <MessageInput />
+            <div className={styles.alert}>请谨记：智能体所说的一切都是由 AI 生成的</div>
+          </Flexbox>
+        </Flexbox>
+        <ChatDialog />
       </Flexbox>
       <ChatInfo />
     </Flexbox>

src/app/chat/VirtualIdol/style.ts → src/app/chat/style.ts

@@ -2,9 +2,12 @@ import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ css, token }) => ({
   docker: css`
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+
+    max-width: 42vw;
     padding: 8px 12px;
   `,
   alert: css`

src/features/Actions/Edit.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon } from '@lobehub/ui';
-import { Edit2 } from 'lucide-react';
+import { SquarePen } from 'lucide-react';
 
 import { useConfigStore } from '@/store/config';
 
@@ -8,7 +8,7 @@ export default () => {
 
   return (
     <ActionIcon
-      icon={Edit2}
+      icon={SquarePen}
       onClick={() => {
         openPanel('role');
       }}

src/features/Actions/Video.tsx

@@ -0,0 +1,29 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Video, VideoOff } from 'lucide-react';
+
+import { useSessionStore } from '@/store/session';
+
+export default () => {
+  const { viewerMode, setViewerMode } = useSessionStore((s) => ({
+    setViewerMode: s.setViewerMode,
+    viewerMode: s.viewerMode,
+  }));
+
+  return viewerMode ? (
+    <ActionIcon
+      icon={VideoOff}
+      onClick={() => {
+        setViewerMode(false);
+      }}
+      title={'关闭视频通话'}
+    />
+  ) : (
+    <ActionIcon
+      icon={Video}
+      onClick={() => {
+        setViewerMode(true);
+      }}
+      title={'视频通话'}
+    />
+  );
+};

src/features/ChatInfo/index.tsx

@@ -8,7 +8,6 @@ import AgentInfo from '@/components/AgentInfo';
 import Dance from '@/features/Actions/Dance';
 import Edit from '@/features/Actions/Edit';
 import Log from '@/features/Actions/Log';
-import ViewerMode from '@/features/Actions/ViewerMode';
 import Voice from '@/features/Actions/Voice';
 import { sessionSelectors, useSessionStore } from '@/store/session';
 
@@ -44,7 +43,6 @@ const Header = () => {
         ]}
         agent={currentAgent}
       />
-      <ViewerMode key={'viewer'} />,
     </DraggablePanel>
   );
 };

src/features/ChatInput/MessageInput/index.tsx

@@ -1,25 +1,17 @@
-import { Avatar, Input } from '@lobehub/ui';
-import { Button, Space } from 'antd';
-import { createStyles } from 'antd-style';
+import { SendOutlined } from '@ant-design/icons';
+import { Input } from '@lobehub/ui';
+import { Button } from 'antd';
 import { InputRef } from 'antd/es/input/Input';
-import { memo, useRef } from 'react';
+import React, { memo, useRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
 
-import { DEFAULT_USER_AVATAR } from '@/constants/common';
 import Record from '@/features/Actions/Record';
+import Video from '@/features/Actions/Video';
 import useChatInput from '@/hooks/useSendMessage';
 import { useSessionStore } from '@/store/session';
 import { isCommandPressed } from '@/utils/keyboard';
 
-const useStyles = createStyles(({ css }) => {
-  return {
-    textarea: css`
-      width: 400px;
-    `,
-  };
-});
-
 const InputArea = memo(() => {
-  const { styles } = useStyles();
   const ref = useRef<InputRef>(null);
   const isChineseInput = useRef(false);
   const onSend = useChatInput();
@@ -31,11 +23,11 @@ const InputArea = memo(() => {
   ]);
 
   return (
-    <Space size={4}>
-      <Avatar avatar={DEFAULT_USER_AVATAR} />
+    <Flexbox height={'100%'} width={'100%'} horizontal>
+      <Record />
       <Input
+        width={'100%'}
         autoFocus
-        className={styles.textarea}
         onBlur={(e) => {
           setMessageInput?.(e.target.value);
         }}
@@ -69,12 +61,13 @@ const InputArea = memo(() => {
           if (loading) return;
           onSend();
         }}
+        icon={<SendOutlined />}
         type="primary"
       >
-        发送
+        {/*发送*/}
       </Button>
-      <Record />
-    </Space>
+      <Video />
+    </Flexbox>
   );
 });