Merge pull request #32 from lobehub/feat/add-chat-router

fix: 修复聊天框样式问题
lobehub · Apr 22, 2024 · 83f3a49 · 83f3a49
2 parents a5e4ac6 + 10cece9
commit 83f3a49
Show file tree

Hide file tree

Showing 15 changed files with 90 additions and 65 deletions.
diff --git a/src/app/chat/page.tsx b/src/app/chat/page.tsx
@@ -25,8 +25,8 @@ const Chat = () => {
         <Flexbox flex={1} style={{ overflow: 'hidden', position: 'relative' }}>
           {viewerMode === true ? <AgentViewer /> : <ChatList />}
         </Flexbox>
-        <Flexbox align={'center'} width={'100%'} className={styles.docker}>
-          <MessageInput />
+        <Flexbox align={'center'} width={'100%'} className={styles.docker} justify={'center'}>
+          <MessageInput className={styles.input} />
           <div className={styles.alert}>请谨记：智能体所说的一切都是由 AI 生成的</div>
         </Flexbox>
       </Flexbox>

diff --git a/src/app/chat/style.ts b/src/app/chat/style.ts
@@ -1,14 +1,15 @@
 import { createStyles } from 'antd-style';
 
+import { CHAT_INPUT_HEIGHT, CHAT_INPUT_WIDTH } from '@/constants/common';
+
 export const useStyles = createStyles(({ css, token }) => ({
   docker: css`
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-
-    max-width: 42vw;
-    padding: 8px 12px;
+    height: ${CHAT_INPUT_HEIGHT}px;
+    background-color: rgba(${token.colorBgLayout}, 0.8);
+    backdrop-filter: saturate(180%) blur(2px);
+  `,
+  input: css`
+    width: ${CHAT_INPUT_WIDTH};
   `,
   alert: css`
     padding: ${token.marginXS}px;

diff --git a/src/components/Panel/style.ts b/src/components/Panel/style.ts
@@ -9,7 +9,7 @@ export const useStyles = createStyles(({ css, token }) => ({
 
     width: 900px;
 
-    background-color: ${token.colorBgMask};
+    background-color: rgba(${token.colorBgLayout}, 0.8);
     backdrop-filter: saturate(180%) blur(10px);
     border: 1px solid ${token.colorBorder};
     border-radius: ${token.borderRadius}px;

diff --git a/src/constants/common.ts b/src/constants/common.ts
@@ -18,8 +18,14 @@ export const INITIAL_Z_INDEX = 10;
 export const CHAT_TEXTAREA_MAX_HEIGHT = 570;
 export const CHAT_TEXTAREA_HEIGHT = 200;
 
+export const CHAT_INPUT_HEIGHT = 90;
+
 export const HEADER_HEIGHT = 64;
 
+export const CHAT_HEADER_HEIGHT = 64;
+
+export const CHAT_INPUT_WIDTH = '42vw';
+
 export const DEFAULT_USER_AVATAR = '😀';
 
 export const LIST_GRID_WIDTH = 108;

diff --git a/src/features/Actions/PlayControl.tsx b/src/features/Actions/PlayControl.tsx
@@ -32,27 +32,20 @@ interface Props {
 export default (props: Props) => {
   const { style, className } = props;
   const { styles } = useStyles();
-  const [isPlaying, togglePlayPause] = useDanceStore((s) => [s.isPlaying, s.togglePlayPause]);
+  const [isPlaying, togglePlayPause, playlist] = useDanceStore((s) => [
+    s.isPlaying,
+    s.togglePlayPause,
+    s.playlist,
+  ]);
 
-  // return (
-  //   <GradientButton
-  //     className={classNames(isPlaying ? styles.spin : '', className)}
-  //     glow={isPlaying}
-  //     onClick={togglePlayPause}
-  //     shape="circle"
-  //   >
-  //     <TikTokOutlined style={{ fontSize: 22 }} />
-  //   </GradientButton>
-  // );
-
-  return (
+  return playlist.length ? (
     <ActionIcon
       className={classNames(isPlaying ? styles.spin : '', className)}
       style={style}
       onClick={togglePlayPause}
       icon={Music2}
     />
-  );
+  ) : null;
 
   // return (
   //   <Avatar

diff --git a/src/features/AgentViewer/index.tsx b/src/features/AgentViewer/index.tsx
@@ -37,7 +37,7 @@ function AgentViewer() {
       <ChatDialog className={styles.dialog} />
       <ToolBar className={styles.toolbar} />
       {loading ? <PageLoading title={'模型加载中，请稍后...'} /> : null}
-      <canvas ref={canvasRef}></canvas>
+      <canvas ref={canvasRef} height={'100%'} width={'100%'}></canvas>
     </div>
   );
 }

diff --git a/src/features/AgentViewer/style.ts b/src/features/AgentViewer/style.ts
@@ -1,5 +1,12 @@
 import { createStyles } from 'antd-style';
 
+import {
+  CHAT_HEADER_HEIGHT,
+  CHAT_INPUT_HEIGHT,
+  CHAT_INPUT_WIDTH,
+  HEADER_HEIGHT,
+} from '@/constants/common';
+
 export const useStyles = createStyles(({ css, token }) => ({
   toolbar: css`
     position: absolute;
@@ -15,16 +22,10 @@ export const useStyles = createStyles(({ css, token }) => ({
 
     display: flex;
 
-    min-width: 480px;
+    width: ${CHAT_INPUT_WIDTH};
   `,
-  // controller: css`
-  //   position: absolute;
-  //   right: ${token.paddingMD}px;
-  //   top: ${token.paddingMD}px;
-  // `,
   viewer: css`
-    position: relative;
     width: 100%;
-    height: 100%;
+    height: calc(100vh - ${HEADER_HEIGHT}px - ${CHAT_HEADER_HEIGHT}px - ${CHAT_INPUT_HEIGHT}px);
   `,
 }));
diff --git a/src/features/AudioPlayer/index.tsx b/src/features/AudioPlayer/index.tsx
@@ -69,7 +69,12 @@ function Player(props: PlayerProps) {
         src={currentPlay?.audio}
       />
       <div className={styles.player}>
-        <Avatar shape="circle" size={48} src={currentPlay?.cover} />
+        <Avatar
+          shape="circle"
+          size={48}
+          src={currentPlay?.cover}
+          className={isPlaying ? styles.spin : ''}
+        />
         <div className={styles.content}>
           <Duration currentProgress={currentProgress} duration={duration} />
           <div className={styles.controller}>

diff --git a/src/features/AudioPlayer/style.ts b/src/features/AudioPlayer/style.ts
@@ -32,6 +32,19 @@ const useStyles = createStyles(({ token, css }) => ({
     display: flex;
     align-items: center;
   `,
+  spin: css`
+    @keyframes rotate-animation {
+      from {
+        transform: rotate(0deg);
+      }
+
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    animation: rotate-animation 20s linear infinite;
+  `,
 }));
 
 export { useStyles };
diff --git a/src/features/ChatHeader/index.tsx b/src/features/ChatHeader/index.tsx
@@ -1,5 +1,6 @@
 import { Space } from 'antd';
 import React from 'react';
+import { Flexbox } from 'react-layout-kit';
 
 import AgentMeta from '@/components/agent/AgentMeta';
 import PlayControl from '@/features/Actions/PlayControl';
@@ -14,14 +15,14 @@ const Header = () => {
   const [currentAgent] = useSessionStore((s) => [sessionSelectors.currentAgent(s)]);
 
   return (
-    <div className={styles.header}>
+    <Flexbox justify={'space-between'} horizontal align={'center'} className={styles.header}>
       <AgentMeta meta={currentAgent?.meta} />
       <Space>
         <Voice key={'voice'} />
         <Video key={'video'} />
         <PlayControl key="play" />
       </Space>
-    </div>
+    </Flexbox>
   );
 };
 

diff --git a/src/features/ChatHeader/style.ts b/src/features/ChatHeader/style.ts
@@ -1,14 +1,11 @@
 import { createStyles } from 'antd-style';
 
+import { CHAT_HEADER_HEIGHT } from '@/constants/common';
+
 const useStyles = createStyles(({ token, css }) => ({
   header: css`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    width: 100%;
-    padding: 16px 8px;
-
+    height: ${CHAT_HEADER_HEIGHT}px;
+    padding: ${token.paddingSM}px;
     border-bottom: 1px solid ${token.colorBorderSecondary};
   `,
   player: css`

diff --git a/src/features/ChatInput/MessageInput/index.tsx b/src/features/ChatInput/MessageInput/index.tsx
@@ -10,10 +10,16 @@ import useChatInput from '@/hooks/useSendMessage';
 import { useSessionStore } from '@/store/session';
 import { isCommandPressed } from '@/utils/keyboard';
 
-const InputArea = memo(() => {
+interface InputAreaProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const InputArea = memo((props: InputAreaProps) => {
   const ref = useRef<InputRef>(null);
   const isChineseInput = useRef(false);
   const onSend = useChatInput();
+  const { className, style } = props;
 
   const [loading, messageInput, setMessageInput] = useSessionStore((s) => [
     !!s.chatLoadingId,
@@ -22,7 +28,7 @@ const InputArea = memo(() => {
   ]);
 
   return (
-    <Flexbox height={'100%'} width={'100%'} horizontal gap={4}>
+    <Flexbox width={'100%'} horizontal gap={4} className={className} style={style}>
       <Record />
       <Input
         width={'100%'}

diff --git a/src/features/SessionList/Header.tsx b/src/features/SessionList/Header.tsx
@@ -19,20 +19,24 @@ const Header = memo((props: HeaderProps) => {
   const openPanel = useConfigStore((s) => s.openPanel);
 
   return (
-    <div className={styles.header}>
-      <Flexbox flex={1} style={{ marginRight: 4 }}>
-        <SearchBar
-          enableShortKey
-          onChange={(e) => {
-            if (onChange) onChange(e.target.value);
-          }}
-          placeholder="搜索"
-          shortKey="f"
-          value={value}
-        />
-      </Flexbox>
+    <Flexbox
+      justify={'space-between'}
+      horizontal
+      align={'center'}
+      className={styles.header}
+      gap={4}
+    >
+      <SearchBar
+        enableShortKey
+        onChange={(e) => {
+          if (onChange) onChange(e.target.value);
+        }}
+        placeholder="搜索"
+        shortKey="f"
+        value={value}
+      />
       <ActionIcon icon={Plus} onClick={() => openPanel('agent')} title={'创建对话'} />
-    </div>
+    </Flexbox>
   );
 });
 

diff --git a/src/features/SessionList/style.ts b/src/features/SessionList/style.ts
@@ -1,5 +1,7 @@
 import { createStyles } from 'antd-style';
 
+import { HEADER_HEIGHT } from '@/constants/common';
+
 export const useStyles = createStyles(({ css, token }) => ({
   date: css`
     font-size: 12px;
@@ -10,12 +12,8 @@ export const useStyles = createStyles(({ css, token }) => ({
     text-align: center;
   `,
   header: css`
-    display: flex;
-    justify-content: space-between;
-
-    width: 100%;
-    padding: 16px 8px;
-
+    height: ${HEADER_HEIGHT}px;
+    padding: ${token.paddingSM}px;
     border-bottom: 1px solid ${token.colorBorderSecondary};
   `,
 

diff --git a/src/store/session/initialState.ts b/src/store/session/initialState.ts
@@ -12,7 +12,7 @@ const initialState = {
   localAgentList: [DEFAULT_AGENT],
   messageInput: '',
   sessionList: [defaultSession],
-  viewerMode: true,
+  viewerMode: false,
   voiceOn: true,
 };