✨ feat: 添加两遍侧栏快捷方式

package.json

@@ -85,7 +85,7 @@
     "immer": "^10.1.1",
     "js-tiktoken": "^1.0.11",
     "lodash-es": "^4.17.21",
-    "lucide-react": "^0.308.0",
+    "lucide-react": "^0.309.0",
     "mmd-parser": "^1.0.4",
     "next": "^14.2.3",
     "next-pwa": "^5.6.0",

src/app/chat/SideBar/index.tsx

@@ -3,6 +3,7 @@ import { createStyles } from 'antd-style';
 
 import { SIDEBAR_MAX_WIDTH, SIDEBAR_WIDTH } from '@/constants/common';
 import SessionList from '@/features/SessionList';
+import { useGlobalStore } from '@/store/global';
 
 const useStyles = createStyles(({ css }) => ({
   sidebar: css`
@@ -13,6 +14,10 @@ const useStyles = createStyles(({ css }) => ({
 
 const SideBar = () => {
   const { styles } = useStyles();
+  const [showSessionList, setSessionList] = useGlobalStore((s) => [
+    s.showSessionList,
+    s.setSessionList,
+  ]);
 
   return (
     <DraggablePanel
@@ -21,6 +26,8 @@ const SideBar = () => {
       minWidth={SIDEBAR_WIDTH}
       mode={'fixed'}
       placement={'left'}
+      onExpandChange={(expand) => setSessionList(expand)}
+      expand={showSessionList}
     >
       {/*<Header />*/}
       <SessionList />

src/constants/common.ts

@@ -12,6 +12,8 @@ export const LOADING_FLAG = '...';
 // 默认坐标
 export const INITIAL_COORDINATES = { x: 360, y: 360 };
 
+export const DESKTOP_HEADER_ICON_SIZE = { fontSize: 24 };
+
 // 默认 zIndex
 export const INITIAL_Z_INDEX = 10;
 

src/features/Actions/Agent.tsx

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

src/features/Actions/PlayControl.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { Music2 } from 'lucide-react';
 import React from 'react';
 
+import { DESKTOP_HEADER_ICON_SIZE } from '@/constants/common';
 import { useDanceStore } from '@/store/dance';
 
 const useStyles = createStyles(({ css }) => ({
@@ -42,6 +43,7 @@ export default (props: Props) => {
     <ActionIcon
       className={classNames(isPlaying ? styles.spin : '', className)}
       style={style}
+      size={DESKTOP_HEADER_ICON_SIZE}
       onClick={togglePlayPause}
       icon={Music2}
     />

src/features/Actions/ToggleChatSideBar.tsx

@@ -0,0 +1,22 @@
+import { ActionIcon } from '@lobehub/ui';
+import { PanelRightClose, PanelRightOpen } from 'lucide-react';
+import React from 'react';
+
+import { DESKTOP_HEADER_ICON_SIZE } from '@/constants/common';
+import { useGlobalStore } from '@/store/global';
+
+export default () => {
+  const [showChatSidebar, toggleChatSideBar] = useGlobalStore((s) => [
+    s.showChatSidebar,
+    s.toggleChatSideBar,
+  ]);
+
+  return (
+    <ActionIcon
+      icon={showChatSidebar ? PanelRightClose : PanelRightOpen}
+      onClick={() => toggleChatSideBar()}
+      title={'侧边栏'}
+      size={DESKTOP_HEADER_ICON_SIZE}
+    />
+  );
+};

src/features/Actions/ToggleSessionList.tsx

@@ -0,0 +1,22 @@
+import { ActionIcon } from '@lobehub/ui';
+import { AlignLeft, ChevronsLeft } from 'lucide-react';
+import React from 'react';
+
+import { DESKTOP_HEADER_ICON_SIZE } from '@/constants/common';
+import { useGlobalStore } from '@/store/global';
+
+export default () => {
+  const [showSessionList, toggleSessionList] = useGlobalStore((s) => [
+    s.showSessionList,
+    s.toggleSessionList,
+  ]);
+
+  return (
+    <ActionIcon
+      icon={showSessionList ? ChevronsLeft : AlignLeft}
+      onClick={() => toggleSessionList()}
+      title={'会话列表'}
+      size={DESKTOP_HEADER_ICON_SIZE}
+    />
+  );
+};

src/features/Actions/Video.tsx

@@ -1,6 +1,7 @@
 import { ActionIcon } from '@lobehub/ui';
 import { Video, VideoOff } from 'lucide-react';
 
+import { DESKTOP_HEADER_ICON_SIZE } from '@/constants/common';
 import { useSessionStore } from '@/store/session';
 
 export default () => {
@@ -13,6 +14,7 @@ export default () => {
     <ActionIcon
       icon={viewerMode ? VideoOff : Video}
       title={'视频通话'}
+      size={DESKTOP_HEADER_ICON_SIZE}
       onClick={() => {
         if (viewerMode) {
           setViewerMode(false);

src/features/Actions/Voice.tsx

@@ -3,6 +3,7 @@ import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 import { Volume2, VolumeXIcon } from 'lucide-react';
 
+import { DESKTOP_HEADER_ICON_SIZE } from '@/constants/common';
 import { toogleVoice } from '@/services/chat';
 import { useSessionStore } from '@/store/session';
 
@@ -25,6 +26,7 @@ const VoiceSwitch = () => {
       className={classNames(styles.voice, voiceOn && styles.voiceOn)}
       icon={voiceOn ? Volume2 : VolumeXIcon}
       onClick={toogleVoice}
+      size={DESKTOP_HEADER_ICON_SIZE}
       title={'语音合成'}
     />
   );

src/features/AgentViewer/ToolBar/index.tsx

@@ -4,6 +4,7 @@ import {
   Grid3x3,
   LandPlot,
   MessageCircle,
+  MessageCircleOff,
   Orbit,
   RotateCw,
   SwitchCamera,
@@ -14,13 +15,14 @@ import { useViewerStore } from '@/store/viewer';
 
 interface ToolBarProps {
   className?: string;
-  setOpen?: (open: boolean) => void;
+  open?: boolean;
   style?: React.CSSProperties;
+  toggleOpen?: () => void;
   viewerRef?: React.RefObject<HTMLDivElement>;
 }
 
 const ToolBar = (props: ToolBarProps) => {
-  const { style, className, setOpen, viewerRef } = props;
+  const { style, className, toggleOpen, viewerRef, open } = props;
   const viewer = useViewerStore((s) => s.viewer);
   const toggleFullScreen = () => {
     if (!document.fullscreenElement) {
@@ -60,7 +62,7 @@ const ToolBar = (props: ToolBarProps) => {
           label: '重置镜头',
         },
         {
-          icon: MessageCircle,
+          icon: open ? MessageCircleOff : MessageCircle,
           key: 'dialog',
           label: '对话框',
         },
@@ -83,7 +85,7 @@ const ToolBar = (props: ToolBarProps) => {
             break;
           }
           case 'dialog': {
-            setOpen?.(true);
+            toggleOpen?.();
 
             break;
           }

src/features/AgentViewer/index.tsx

@@ -37,7 +37,12 @@ function AgentViewer() {
   return (
     <div ref={ref} className={styles.viewer}>
       {open ? <ChatDialog className={styles.dialog} setOpen={setOpen} /> : null}
-      <ToolBar className={styles.toolbar} setOpen={setOpen} viewerRef={ref} />
+      <ToolBar
+        className={styles.toolbar}
+        toggleOpen={() => setOpen(!open)}
+        viewerRef={ref}
+        open={open}
+      />
       {loading ? <PageLoading title={'模型加载中，请稍后...'} /> : null}
       <canvas ref={canvasRef} className={styles.canvas}></canvas>
     </div>

src/features/AudioPlayer/MiniPlayer/index.tsx

@@ -6,6 +6,7 @@ import { ListMusic } from 'lucide-react';
 import React, { useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { DESKTOP_HEADER_ICON_SIZE } from '@/constants/common';
 import Control from '@/features/AudioPlayer/Control';
 import PlayList from '@/features/AudioPlayer/PlayList';
 import { useDanceStore } from '@/store/dance';
@@ -56,7 +57,12 @@ export default (props: Props) => {
         />
       </Tooltip>
       <Control />
-      <ActionIcon icon={ListMusic} onClick={() => setOpen(true)} title={'播放列表'} />
+      <ActionIcon
+        icon={ListMusic}
+        onClick={() => setOpen(true)}
+        title={'播放列表'}
+        size={DESKTOP_HEADER_ICON_SIZE}
+      />
     </Flexbox>
   ) : null;
 };

src/features/ChatDialog/index.tsx

@@ -33,7 +33,7 @@ const Dialog = (props: DialogProps) => {
       <ChatItem
         id={currentChats[lastAgentChatIndex].id}
         index={lastAgentChatIndex}
-        showTitle={true}
+        showTitle={false}
         type="pure"
       />
       <Tooltip key="close" title="关闭">

src/features/ChatHeader/index.tsx

@@ -1,36 +1,30 @@
-import { ActionIcon } from '@lobehub/ui';
 import { Space } from 'antd';
-import { PanelRightClose, PanelRightOpen } from 'lucide-react';
 import React from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AgentMeta from '@/components/agent/AgentMeta';
+import ToggleChatSideBar from '@/features/Actions/ToggleChatSideBar';
+import ToggleSessionList from '@/features/Actions/ToggleSessionList';
 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 [showChatSidebar, toggleChatSideBar] = useGlobalStore((s) => [
-    s.showChatSidebar,
-    s.toggleChatSideBar,
-  ]);
 
   return (
     <Flexbox justify={'space-between'} horizontal align={'center'} className={styles.header}>
-      <AgentMeta meta={currentAgent?.meta} />
+      <Space>
+        <ToggleSessionList />
+        <AgentMeta meta={currentAgent?.meta} />
+      </Space>
       <Space>
         <Voice key={'voice'} />
         <Video key={'video'} />
-        <ActionIcon
-          icon={showChatSidebar ? PanelRightClose : PanelRightOpen}
-          onClick={() => toggleChatSideBar()}
-          title={'侧边栏'}
-        />
+        <ToggleChatSideBar key={'sidebar'} />
       </Space>
     </Flexbox>
   );

src/features/ChatInfo/Operations/index.tsx

@@ -19,8 +19,6 @@ const Operations = memo<MyListProps>(({ mobile }) => {
   const [openPanel] = useConfigStore((s) => [s.openPanel]);
   const [clearHistory, activeId] = useSessionStore((s) => [s.clearHistory, s.activeId]);
 
-  console.log('activeId', activeId);
-
   const items = [
     // {
     //   icon: SquarePen,

src/features/ChatItem/Actions/Assistant.tsx

@@ -5,14 +5,18 @@ import { memo } from 'react';
 
 import type { RenderAction } from '@/features/ChatItem/type';
 
-const AssistantActionsBar: RenderAction = ({ onActionClick }) => {
+const AssistantActionsBar: RenderAction = ({ onActionClick, id }) => {
   const { copy, regenerate, divider, del, edit } = useChatListActionsBar({
     copy: '复制',
     delete: '删除',
     edit: '编辑',
     regenerate: '重新生成',
   });
 
+  console.log('AssistantActionsBar', id);
+
+  if (id === 'default') return;
+
   const tts = {
     icon: Play,
     key: 'tts',

src/features/ChatItem/ActionsBar.tsx

@@ -25,7 +25,10 @@ interface ActionsProps {
   setEditing: (edit: boolean) => void;
 }
 const Actions = memo<ActionsProps>(({ index, setEditing }) => {
-  const item = useSessionStore((s) => sessionSelectors.currentChats(s)[index], isEqual);
+  const item = useSessionStore(
+    (s) => sessionSelectors.currentChatsWithGreetingMessage(s)[index],
+    isEqual,
+  );
   const onActionsClick = useActionsClick();
 
   const handleActionClick = useCallback(