✨ feat: 优化 chat 侧边栏展示

src/app/chat/SideBar/index.tsx

@@ -0,0 +1,30 @@
+import { DraggablePanel } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+
+import { SIDEBAR_MAX_WIDTH, SIDEBAR_WIDTH } from '@/constants/common';
+import SessionList from '@/features/SessionList';
+
+const useStyles = createStyles(({ css }) => ({
+  sidebar: css`
+    display: flex;
+    flex-direction: column;
+  `,
+}));
+
+const SideBar = () => {
+  const { styles } = useStyles();
+
+  return (
+    <DraggablePanel
+      className={styles.sidebar}
+      maxWidth={SIDEBAR_MAX_WIDTH}
+      minWidth={SIDEBAR_WIDTH}
+      mode={'fixed'}
+      placement={'left'}
+    >
+      <SessionList />
+    </DraggablePanel>
+  );
+};
+
+export default SideBar;

src/app/chat/page.tsx

@@ -9,9 +9,9 @@ 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 SideBar from './SideBar';
 import { useStyles } from './style';
 
 const Chat = () => {
@@ -20,14 +20,20 @@ const Chat = () => {
 
   return (
     <Flexbox flex={1} height={'100%'} width={'100%'} horizontal>
-      <SessionList />
+      <SideBar />
       <Flexbox height={'100%'} width={'100%'}>
         <ChatHeader />
-        <Flexbox flex={1} style={{ overflow: 'hidden', position: 'relative' }}>
-          {viewerMode === true ? <AgentViewer /> : <ChatList />}
+        <Flexbox flex={1} style={{ overflow: 'hidden', position: 'relative' }} align={'center'}>
+          {viewerMode === true ? (
+            <AgentViewer />
+          ) : (
+            <Flexbox className={styles.content} height={'100%'}>
+              <ChatList />
+            </Flexbox>
+          )}
         </Flexbox>
         <Flexbox align={'center'} width={'100%'} className={styles.docker} justify={'center'}>
-          <div className={styles.input}>
+          <div className={styles.content}>
             <MessageInput />
             <Alert className={styles.alert} />
           </div>

src/app/chat/style.ts

@@ -6,11 +6,17 @@ import { CHAT_INPUT_MIN_HEIGHT, CHAT_INPUT_WIDTH } from '@/constants/common';
 export const useStyles = createStyles(({ css, token }) => ({
   docker: css`
     height: ${CHAT_INPUT_MIN_HEIGHT}px;
+    padding: 0 ${token.paddingSM}px;
     background-color: ${rgba(token.colorBgLayout, 0.8)};
     backdrop-filter: saturate(180%) blur(10px);
   `,
-  input: css`
+  content: css`
     width: ${CHAT_INPUT_WIDTH};
+    max-width: 100vw;
+
+    @media (max-width: 768px) {
+      width: 100%;
+    }
   `,
   alert: css`
     margin-top: ${token.marginXS}px;

src/constants/common.ts

@@ -27,7 +27,7 @@ export const SIDEBAR_MAX_WIDTH = 400;
 
 export const CHAT_HEADER_HEIGHT = 64;
 
-export const CHAT_INPUT_WIDTH = '42vw';
+export const CHAT_INPUT_WIDTH = '48rem';
 
 export const DEFAULT_USER_AVATAR = '😀';
 

src/features/Actions/Agent.tsx

@@ -0,0 +1,11 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Plus } from 'lucide-react';
+
+import { useConfigStore } from '@/store/config';
+
+// eslint-disable-next-line react/display-name
+export default () => {
+  const openPanel = useConfigStore((s) => s.openPanel);
+
+  return <ActionIcon icon={Plus} onClick={() => openPanel('agent')} title={'新的会话'} />;
+};

src/features/AgentViewer/style.ts

@@ -23,6 +23,10 @@ export const useStyles = createStyles(({ css, token }) => ({
     display: flex;
 
     max-width: ${CHAT_INPUT_WIDTH};
+
+    @media (max-width: 768px) {
+      width: 100%;
+    }
   `,
   viewer: css`
     min-height: 0;

src/features/ChatHeader/index.tsx

@@ -1,24 +1,33 @@
+import { ActionIcon } from '@lobehub/ui';
 import { Space } from 'antd';
+import { SlidersHorizontal } from 'lucide-react';
 import React from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AgentMeta from '@/components/agent/AgentMeta';
 import Video from '@/features/Actions/Video';
 import Voice from '@/features/Actions/Voice';
+import { useGlobalStore } from '@/store/global';
 import { sessionSelectors, useSessionStore } from '@/store/session';
 
 import { useStyles } from './style';
 
 const Header = () => {
   const { styles } = useStyles();
   const [currentAgent] = useSessionStore((s) => [sessionSelectors.currentAgent(s)]);
+  const [toggleChatSideBar] = useGlobalStore((s) => [s.toggleChatSideBar]);
 
   return (
     <Flexbox justify={'space-between'} horizontal align={'center'} className={styles.header}>
       <AgentMeta meta={currentAgent?.meta} />
       <Space>
         <Voice key={'voice'} />
         <Video key={'video'} />
+        <ActionIcon
+          icon={SlidersHorizontal}
+          onClick={() => toggleChatSideBar()}
+          title={'角色信息'}
+        />
       </Space>
     </Flexbox>
   );

src/features/ChatHeader/style.ts

@@ -6,7 +6,6 @@ const useStyles = createStyles(({ token, css }) => ({
   header: css`
     height: ${CHAT_HEADER_HEIGHT}px;
     padding: ${token.paddingSM}px;
-    border-bottom: 1px solid ${token.colorBorderSecondary};
   `,
   player: css`
     min-width: 480px;

src/features/ChatInfo/index.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 import AgentCard from '@/components/agent/AgentCard';
 import { SIDEBAR_WIDTH } from '@/constants/common';
 import MiniPlayer from '@/features/AudioPlayer/MiniPlayer';
+import { useGlobalStore } from '@/store/global';
 import { sessionSelectors, useSessionStore } from '@/store/session';
 
 import Operations from './Operations';
@@ -22,7 +23,11 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const Header = () => {
+export default () => {
+  const [showChatSidebar, setChatSidebar] = useGlobalStore((s) => [
+    s.showChatSidebar,
+    s.setChatSidebar,
+  ]);
   const { styles } = useStyles();
   const [currentAgent] = useSessionStore((s) => [sessionSelectors.currentAgent(s)]);
 
@@ -32,11 +37,11 @@ const Header = () => {
       minWidth={SIDEBAR_WIDTH}
       maxWidth={SIDEBAR_WIDTH}
       mode={'fixed'}
+      onExpandChange={(expand) => setChatSidebar(expand)}
+      expand={showChatSidebar}
       placement={'right'}
     >
       <AgentCard agent={currentAgent} extra={<MiniPlayer />} footer={<Operations />} />
     </DraggablePanel>
   );
 };
-
-export default Header;

src/features/ChatList/index.tsx

@@ -35,7 +35,7 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
   const overscan = typeof window !== 'undefined' ? window.innerHeight * 1.5 : 0;
 
   return chatLoading && data.length === 2 ? null : (
-    <Flexbox height={'100%'}>
+    <Flexbox height={'100%'} width={'100%'}>
       <Virtuoso
         atBottomStateChange={setAtBottom}
         atBottomThreshold={60 * (mobile ? 2 : 1)}

src/features/SessionList/List/SessionItem/index.tsx → src/features/SessionList/List/Item/index.tsx

@@ -1,9 +1,9 @@
 import { memo, useMemo, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 
-import ListItem from '@/features/SessionList/ListItem';
 import { sessionSelectors, useSessionStore } from '@/store/session';
 
+import ListItem from '../../ListItem';
 import Actions from './Actions';
 
 interface SessionItemProps {

src/features/SessionList/List/index.tsx

@@ -5,7 +5,7 @@ import LazyLoad from 'react-lazy-load';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 
-import SessionItem from './SessionItem';
+import SessionItem from './Item';
 
 const useStyles = createStyles(
   ({ css }) => css`

src/features/SessionList/SearchBar/index.tsx

@@ -0,0 +1,28 @@
+import { SearchBar } from '@lobehub/ui';
+import React, { memo } from 'react';
+
+interface Props {
+  className?: string;
+  onChange?: (value: string) => void;
+  style?: React.CSSProperties;
+  value?: string;
+}
+
+// eslint-disable-next-line react/display-name
+export default memo((props: Props) => {
+  const { value, onChange, style, className } = props;
+
+  return (
+    <SearchBar
+      enableShortKey
+      onChange={(e) => {
+        if (onChange) onChange(e.target.value);
+      }}
+      placeholder="搜索"
+      shortKey="f"
+      value={value}
+      style={style}
+      className={className}
+    />
+  );
+});

src/features/SessionList/Header/style.ts → src/features/SessionList/SearchBar/style.ts

@@ -1,10 +1,7 @@
 import { createStyles } from 'antd-style';
 
-import { HEADER_HEIGHT } from '@/constants/common';
-
 export const useStyles = createStyles(({ css, token }) => ({
   header: css`
-    height: ${HEADER_HEIGHT}px;
     padding: ${token.paddingXS}px;
   `,
 }));