diff --git a/src/app/chat/page.tsx b/src/app/chat/page.tsx index 280ac7d1..0847e614 100644 --- a/src/app/chat/page.tsx +++ b/src/app/chat/page.tsx @@ -25,8 +25,8 @@ const Chat = () => { {viewerMode === true ? : } - - + +
请谨记：智能体所说的一切都是由 AI 生成的
 diff --git a/src/app/chat/style.ts b/src/app/chat/style.ts index 632d55e9..2ab0820f 100644 --- 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 index 1f179085..220a1ad2 100644 --- 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 index 051ae8d6..91848ab1 100644 --- 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 index 4113ba25..2f3341d5 100644 --- 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 ( - // - // - // - // ); - - return ( + return playlist.length ? ( - ); + ) : null; // return ( // {loading ? : null} - + ); } diff --git a/src/features/AgentViewer/style.ts b/src/features/AgentViewer/style.ts index f58138c5..8ccd260a 100644 --- 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 index dc6867e1..73bb127f 100644 --- a/src/features/AudioPlayer/index.tsx +++ b/src/features/AudioPlayer/index.tsx @@ -69,7 +69,12 @@ function Player(props: PlayerProps) { src={currentPlay?.audio} />
- +
diff --git a/src/features/AudioPlayer/style.ts b/src/features/AudioPlayer/style.ts index 07b7493f..77a0e9c2 100644 --- 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 index 303414e0..d74f1fbe 100644 --- 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 ( -
+ -
+ ); }; diff --git a/src/features/ChatHeader/style.ts b/src/features/ChatHeader/style.ts index 29c8a1d6..08f3b2ec 100644 --- 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 index 31a4b309..53f18390 100644 --- 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(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 ( - + { const openPanel = useConfigStore((s) => s.openPanel); return ( -
- - { - if (onChange) onChange(e.target.value); - }} - placeholder="搜索" - shortKey="f" - value={value} - /> - + + { + if (onChange) onChange(e.target.value); + }} + placeholder="搜索" + shortKey="f" + value={value} + /> openPanel('agent')} title={'创建对话'} /> -
+ ); }); diff --git a/src/features/SessionList/style.ts b/src/features/SessionList/style.ts index ad1f2d95..cf26f4cf 100644 --- 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 index 54c50296..f969ffaa 100644 --- 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, };