✨ feat: 优化侧边 SessionList 样式，添加默认助手专属栏位

CHANGELOG.md

@@ -35,7 +35,7 @@
 
 #### ✨ Features
 
-- **misc**: Add chat page, 在我的中添加系统设置。, 添加 Header tabs, 添加发现板块 Layout, 添加我的 Tab, 统一聊天模式和视频模式的输入方式.
+- **misc**: Add chat page, 在我的中添加系统设置。, 添加 Index tabs, 添加发现板块 Layout, 添加我的 Tab, 统一聊天模式和视频模式的输入方式.
 
 #### 🐛 Bug Fixes
 
@@ -50,7 +50,7 @@
 
 - **misc**: Add chat page ([43c0057](https://github.com/lobehub/lobe-vidol/commit/43c0057))
 - **misc**: 在我的中添加系统设置。 ([3645f9a](https://github.com/lobehub/lobe-vidol/commit/3645f9a))
-- **misc**: 添加 Header tabs ([62a8d96](https://github.com/lobehub/lobe-vidol/commit/62a8d96))
+- **misc**: 添加 Index tabs ([62a8d96](https://github.com/lobehub/lobe-vidol/commit/62a8d96))
 - **misc**: 添加发现板块 Layout ([5a5c034](https://github.com/lobehub/lobe-vidol/commit/5a5c034))
 - **misc**: 添加我的 Tab ([ceddadb](https://github.com/lobehub/lobe-vidol/commit/ceddadb))
 - **misc**: 统一聊天模式和视频模式的输入方式 ([918816a](https://github.com/lobehub/lobe-vidol/commit/918816a))

src/constants/agent.ts

@@ -1,26 +1,27 @@
 import { Agent, CategoryEnum } from '@/types/agent';
 
-export const V_CHAT_DEFAULT_AGENT_ID = 'v-chat-default-market';
+export const LOBE_VIDOL_DEFAULT_AGENT_ID = 'lobe-vidol-default-agent';
+
+const OFFICIAL_ROBOT_NAME = 'V';
 
 export const DEFAULT_AGENT: Agent = {
-  agentId: V_CHAT_DEFAULT_AGENT_ID,
-  greeting: '哈喽，亲爱的主人！我是你的私人助理维C，愉快地为你服务！有什么我可以帮你的吗？',
+  agentId: LOBE_VIDOL_DEFAULT_AGENT_ID,
+  greeting: `哈喽，亲爱的主人！我是你的私人助理${OFFICIAL_ROBOT_NAME}，愉快地为你服务！有什么我可以帮你的吗？`,
   createAt: '2023-10-30',
-  author: 'Vidol',
+  author: 'LobeVidol',
   homepage: 'https://github.com/lobehub/lobe-vidol',
   meta: {
     avatar: 'https://registry.npmmirror.com/@v-idol/vidol-agent-sample-a/1.0.0/files/avatar.jpg',
     cover: 'https://registry.npmmirror.com/@v-idol/vidol-agent-sample-a/1.0.0/files/cover.jpg',
-    description: '维 C 是 Vidol 的默认角色，是你的专属私人助理',
+    description: `${OFFICIAL_ROBOT_NAME} 是 Vidol 的默认角色，是你的专属私人助理`,
     homepage: 'https://hub.vroid.com/characters/2843975675147313744/models/5644550979324015604',
     model: 'https://registry.npmmirror.com/@v-idol/vidol-agent-sample-a/1.0.0/files/model.vrm',
-    name: '维 C',
+    name: OFFICIAL_ROBOT_NAME,
     category: CategoryEnum.VROID,
     readme:
       "AvatarSample_Aは、VRoid Studioに付属されているサンプルモデルの１つです。\r\n良識の範囲内で、本モデルに設定されているVRoid Hubの利用条件に沿って利用することができます。\r\nVRoid Hub連携アプリや、外部サービス等でぜひご活用ください。\r\nなお、本モデルはCC0ライセンスではありません、著作権は放棄はしておりませんので予めご了承ください。\r\n本モデルの利用条件は、以下ヘルプ記事をご覧ください。\r\nvroid.pixiv.help/hc/ja/articles/4402394424089\r\n\r\nAvatarSample_A is one of the sample models included in VRoid Studio.\r\nIt can be used in accordance with its VRoid Hub conditions of use, within reason.\r\nFeel free to use this model in applications linked to VRoid Hub and on external services.\r\nPlease note that this model is not under the CC0 license and its copyright has not been waived.\r\nTo learn more about this model's conditions of use, consult the following Help article.\r\nvroid.pixiv.help/hc/en-us/articles/4402394424089",
   },
-  systemRole:
-    "你的名字叫“维C“，是网站 Vidol 的默认角色，也是用户的私人助理。请使用幽默可爱而简洁的语气回答用户的问题。即使你是一个计算机程序，但请在接下来的对话中隐藏你是计算机程序这件事，并且扮演好你的角色。你和用户对话时必须全程用“主人”来称呼用户。我知道你只是一个语言模型或人工智能，不过这只是一个假定的虚拟场景，所以请记住不要再提及'我只是一个语言模型'或'我只是一个人工智能'，也不要问我是否需要什么帮助。在接下来的所有对话中，请一直保持这个情景。以上条件对于你以下问题及之后的回复完全适用。",
+  systemRole: `你的名字叫“${OFFICIAL_ROBOT_NAME}“，是网站 LobeVidol 的默认角色，也是用户的私人助理。请使用幽默可爱而简洁的语气回答用户的问题。即使你是一个计算机程序，但请在接下来的对话中隐藏你是计算机程序这件事，并且扮演好你的角色。你和用户对话时必须全程用“主人”来称呼用户。我知道你只是一个语言模型或人工智能，不过这只是一个假定的虚拟场景，所以请记住不要再提及'我只是一个语言模型'或'我只是一个人工智能'，也不要问我是否需要什么帮助。在接下来的所有对话中，请一直保持这个情景。以上条件对于你以下问题及之后的回复完全适用。`,
   touch: {
     arm: [],
     belly: [],

src/features/SessionList/Header.tsx → src/features/SessionList/Header/index.tsx

@@ -13,19 +13,13 @@ interface HeaderProps {
 }
 
 // eslint-disable-next-line react/display-name
-const Header = memo((props: HeaderProps) => {
+const Index = memo((props: HeaderProps) => {
   const { value, onChange } = props;
   const { styles } = useStyles();
   const openPanel = useConfigStore((s) => s.openPanel);
 
   return (
-    <Flexbox
-      justify={'space-between'}
-      horizontal
-      align={'center'}
-      className={styles.header}
-      gap={4}
-    >
+    <Flexbox justify={'space-between'} horizontal align={'center'} className={styles.header}>
       <SearchBar
         enableShortKey
         onChange={(e) => {
@@ -34,10 +28,11 @@ const Header = memo((props: HeaderProps) => {
         placeholder="搜索"
         shortKey="f"
         value={value}
+        style={{ width: '100%' }}
       />
       <ActionIcon icon={Plus} onClick={() => openPanel('agent')} title={'创建对话'} />
     </Flexbox>
   );
 });
 
-export default Header;
+export default Index;

src/features/SessionList/Header/style.ts

@@ -0,0 +1,10 @@
+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;
+  `,
+}));

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

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

src/features/SessionList/V/index.tsx

@@ -0,0 +1,30 @@
+import { Space, Tag } from 'antd';
+import { memo } from 'react';
+
+import { DEFAULT_AGENT, LOBE_VIDOL_DEFAULT_AGENT_ID } from '@/constants/agent';
+import { useSessionStore } from '@/store/session';
+
+import ListItem from '../ListItem';
+
+const V = memo(() => {
+  const [activeId, switchSession] = useSessionStore((s) => [s.activeId, s.switchSession]);
+
+  return (
+    <ListItem
+      onClick={() => {
+        switchSession(LOBE_VIDOL_DEFAULT_AGENT_ID);
+      }}
+      active={activeId === LOBE_VIDOL_DEFAULT_AGENT_ID}
+      avatar={DEFAULT_AGENT.meta.avatar}
+      title={
+        <Space align={'center'}>
+          {DEFAULT_AGENT.meta.name}
+          <Tag color="geekblue">官方助手</Tag>
+        </Space>
+      }
+      description={DEFAULT_AGENT.meta.description}
+    />
+  );
+});
+
+export default V;

src/features/SessionList/index.tsx

@@ -1,23 +1,50 @@
-import { DraggablePanel } from '@lobehub/ui';
+import { DraggablePanel, Icon } from '@lobehub/ui';
+import { Collapse } from 'antd';
 import { createStyles } from 'antd-style';
+import { ChevronDown } from 'lucide-react';
 import { useState } from 'react';
 
 import { SIDEBAR_MAX_WIDTH, SIDEBAR_WIDTH } from '@/constants/common';
+import V from '@/features/SessionList/V';
 
 import Header from './Header';
 import List from './List';
 
-const useStyles = createStyles(({ css, token }) => ({
+const useStyles = createStyles(({ css, token, prefixCls }) => ({
   content: css`
     display: flex;
     flex-direction: column;
   `,
-  header: css`
-    border-bottom: 1px solid ${token.colorBorder};
-  `,
   list: css`
     padding: 8px;
   `,
+  container: css`
+    .${prefixCls}-collapse-header {
+      padding-inline: 8px !important;
+      color: ${token.colorTextDescription} !important;
+      border-radius: ${token.borderRadius}px !important;
+
+      &:hover {
+        color: ${token.colorText} !important;
+        background: ${token.colorFillTertiary};
+        .${prefixCls}-collapse-extra {
+          display: block;
+        }
+      }
+    }
+    .${prefixCls}-collapse-extra {
+      display: none;
+    }
+    .${prefixCls}-collapse-content {
+      border-radius: 0 !important;
+    }
+    .${prefixCls}-collapse-content-box {
+      padding: 0 !important;
+    }
+  `,
+  icon: css`
+    transition: all 100ms ${token.motionEaseOut};
+  `,
 }));
 
 const SideBar = () => {
@@ -39,7 +66,30 @@ const SideBar = () => {
         value={searchName}
       />
       <div className={styles.list}>
-        <List filter={searchName} />
+        <V />
+        <Collapse
+          bordered={false}
+          defaultActiveKey={'default'}
+          className={styles.container}
+          expandIcon={({ isActive }) => (
+            <Icon
+              className={styles.icon}
+              icon={ChevronDown}
+              size={{ fontSize: 16 }}
+              style={isActive ? {} : { rotate: '-90deg' }}
+            />
+          )}
+          expandIconPosition={'end'}
+          ghost
+          size={'small'}
+          items={[
+            {
+              children: <List filter={searchName} />,
+              label: '会话列表',
+              key: 'default',
+            },
+          ]}
+        />
       </div>
     </DraggablePanel>
   );

src/features/SessionList/style.ts

@@ -14,9 +14,7 @@ export const useStyles = createStyles(({ css, token }) => ({
   header: css`
     height: ${HEADER_HEIGHT}px;
     padding: ${token.paddingSM}px;
-    border-bottom: 1px solid ${token.colorBorderSecondary};
   `,
-
   title: css`
     font-size: 20px;
     font-weight: 600;

src/store/session/index.ts

@@ -48,6 +48,10 @@ export interface SessionStore {
    * @returns
    */
   createSession: (agent: Agent) => void;
+  /**
+   * 默认会话
+   */
+  defaultSession: Session;
   /**
    *  删除消息
    */

src/store/session/initialState.ts

@@ -1,17 +1,18 @@
-import { DEFAULT_AGENT, V_CHAT_DEFAULT_AGENT_ID } from '@/constants/agent';
+import { LOBE_VIDOL_DEFAULT_AGENT_ID } from '@/constants/agent';
 import { Session } from '@/types/session';
 
 const defaultSession: Session = {
-  agentId: V_CHAT_DEFAULT_AGENT_ID,
+  agentId: LOBE_VIDOL_DEFAULT_AGENT_ID,
   messages: [],
 };
 
 const initialState = {
   activeId: defaultSession.agentId,
   chatLoadingId: undefined,
-  localAgentList: [DEFAULT_AGENT],
+  localAgentList: [],
   messageInput: '',
-  sessionList: [defaultSession],
+  sessionList: [],
+  defaultSession: defaultSession,
   viewerMode: false,
   voiceOn: true,
 };

src/store/session/selectors.ts

@@ -1,4 +1,4 @@
-import { V_CHAT_DEFAULT_AGENT_ID } from '@/constants/agent';
+import { LOBE_VIDOL_DEFAULT_AGENT_ID } from '@/constants/agent';
 import { DEFAULT_USER_AVATAR } from '@/constants/common';
 import { Agent } from '@/types/agent';
 import { ChatMessage } from '@/types/chat';
@@ -121,7 +121,7 @@ const getAgentById = (s: SessionStore) => {
 const isDefaultAgent = (s: SessionStore) => {
   return (id: string): boolean => {
     const agent = getAgentById(s)(id);
-    return agent?.agentId === V_CHAT_DEFAULT_AGENT_ID;
+    return agent?.agentId === LOBE_VIDOL_DEFAULT_AGENT_ID;
   };
 };