✨ feat: 添加自定义角色

lobehub · May 13, 2024 · c0b225b · c0b225b
1 parent 618dfbb
commit c0b225b
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 48 deletions.
diff --git a/src/components/Author/index.tsx b/src/components/Author/index.tsx
@@ -14,24 +14,21 @@ const useStyles = createStyles(({ css, token }) => ({
 }));
 
 interface Props {
-  item?: { author: string; createAt: string; homepage: string };
+  author?: string;
+  createAt?: string;
+  homepage?: string;
 }
 
 export default memo((props: Props) => {
-  const { item } = props;
+  const { author, createAt, homepage } = props;
 
   const { styles } = useStyles();
   return (
     <Space>
-      <Link
-        aria-label={item?.author}
-        className={styles.author}
-        href={item?.homepage}
-        target={'_blank'}
-      >
-        @{item?.author}
+      <Link aria-label={author} className={styles.author} href={homepage} target={'_blank'}>
+        @{author}
       </Link>
-      <div className={styles.date}>{item?.createAt}</div>
+      <div className={styles.date}>{createAt}</div>
     </Space>
   );
 });
diff --git a/src/features/Actions/Agent.tsx b/src/features/Actions/Agent.tsx
@@ -2,7 +2,16 @@ import { ActionIcon } from '@lobehub/ui';
 import { PlusCircle } from 'lucide-react';
 
 import { DESKTOP_HEADER_ICON_SIZE } from '@/constants/common';
+import { useAgentStore } from '@/store/agent';
 
 export default () => {
-  return <ActionIcon icon={PlusCircle} title={'新建角色'} size={DESKTOP_HEADER_ICON_SIZE} />;
+  const createNewAgent = useAgentStore((s) => s.createNewAgent);
+  return (
+    <ActionIcon
+      icon={PlusCircle}
+      title={'新建角色'}
+      size={DESKTOP_HEADER_ICON_SIZE}
+      onClick={() => createNewAgent()}
+    />
+  );
 };
diff --git a/src/features/AgentViewer/RoleDisplay/index.tsx b/src/features/AgentViewer/RoleDisplay/index.tsx
@@ -39,13 +39,14 @@ function Index(props: Props) {
     [viewer],
   );
 
-  return (
+  return currentAgentModel ? (
     <div ref={ref} className={classNames(styles.viewer, className)} style={style}>
       <ToolBar className={styles.toolbar} viewerRef={ref} />
       {loading ? <PageLoading title={'模型加载中，请稍后...'} /> : null}
       <canvas ref={canvasRef} className={styles.canvas}></canvas>
     </div>
-  );
+  ) : null;
+  //   TODO: 添加自定义上传模型
 }
 
 export default memo(Index);
diff --git a/src/features/MarketInfo/index.tsx b/src/features/MarketInfo/index.tsx
@@ -105,7 +105,13 @@ const Header = () => {
       <AgentCard
         actions={actions}
         agent={currentAgentItem}
-        extra={<Author item={currentAgentItem} />}
+        extra={
+          <Author
+            author={currentAgentItem?.author}
+            homepage={currentAgentItem?.homepage}
+            createAt={currentAgentItem?.createAt}
+          />
+        }
         footer={<SystemRole systemRole={currentAgentItem?.meta.readme} style={{ marginTop: 16 }} />}
       />
     </DraggablePanel>

diff --git a/src/panels/AgentPanel/Agent/List/index.tsx b/src/panels/AgentPanel/Agent/List/index.tsx
@@ -14,8 +14,8 @@ const AgentList = (props: AgentListProps) => {
   const { className, style } = props;
   const router = useRouter();
 
-  const [subscribedList, activateAgent, currentIdentifier] = useAgentStore((s) => [
-    s.subscribedList,
+  const [localAgentList, activateAgent, currentIdentifier] = useAgentStore((s) => [
+    s.localAgentList,
     s.activateAgent,
     s.currentIdentifier,
   ]);
@@ -24,7 +24,7 @@ const AgentList = (props: AgentListProps) => {
     <GridList
       className={className}
       style={style}
-      items={subscribedList.map((items) => ({
+      items={localAgentList.map((items) => ({
         avatar: items.meta.avatar,
         id: items.agentId,
         name: items.meta.name,

diff --git a/src/panels/DancePanel/Market/Card/index.tsx b/src/panels/DancePanel/Market/Card/index.tsx
@@ -108,7 +108,13 @@ const Header = () => {
       <DanceInfo
         actions={actions}
         dance={currentDanceItem}
-        extra={<Author item={currentDanceItem} />}
+        extra={
+          <Author
+            homepage={currentDanceItem?.homepage}
+            author={currentDanceItem?.author}
+            createAt={currentDanceItem?.createAt}
+          />
+        }
       />
     </DraggablePanel>
   );

diff --git a/src/store/agent/index.ts b/src/store/agent/index.ts
@@ -1,3 +1,4 @@
+import { nanoid } from 'ai';
 import { produce } from 'immer';
 import { merge } from 'lodash-es';
 import { DeepPartial } from 'utility-types';
@@ -13,17 +14,48 @@ import { initialState } from './initialState';
 const AGENT_STORAGE_KEY = 'vidol-chat-agent-storage';
 
 export interface AgentStore {
+  /**
+   * 激活角色
+   */
   activateAgent: (identifier: string) => void;
   /**
    * 清除角色配置
    */
   clearAgentStorage: () => void;
+  /**
+   * 创建新角色
+   */
+  createNewAgent: () => void;
+  /**
+   * 当前激活的角色
+   */
   currentIdentifier: string;
+  /**
+   * 关闭角色
+   */
   deactivateAgent: () => void;
+  /**
+   * 默认角色
+   */
   defaultAgent: Agent;
-  getAgentById: (agentId?: string) => Agent | undefined;
+  /**
+   * 根据 ID 获取角色
+   * @param id
+   */
+  getAgentById: (id?: string) => Agent | undefined;
+  /**
+   * 本地角色列表
+   */
+  localAgentList: Agent[];
+  /**
+   * 订阅角色
+   * @param agent
+   */
   subscribe: (agent: Agent) => void;
-  subscribedList: Agent[];
+  /**
+   * 取消订阅角色
+   * @param agentId
+   */
   unsubscribe: (agentId: string) => void;
   /**
    * 更新角色配置
@@ -48,17 +80,36 @@ export const useAgentStore = createWithEqualityFn<AgentStore>()(
       },
       getAgentById: (agentId?: string): Agent | undefined => {
         if (!agentId) return undefined;
-        const { subscribedList, defaultAgent } = get();
+        const { localAgentList, defaultAgent } = get();
 
         if (agentId === LOBE_VIDOL_DEFAULT_AGENT_ID) return defaultAgent;
 
-        const currentAgent = subscribedList.find((item) => item.agentId === agentId);
+        const currentAgent = localAgentList.find((item) => item.agentId === agentId);
         if (!currentAgent) return undefined;
 
         return currentAgent;
       },
+      createNewAgent: () => {
+        const { localAgentList } = get();
+        const newAgent: Agent = {
+          agentId: nanoid(),
+          greeting: '你好，我是自定义角色，有什么可以帮助你的吗？',
+          systemRole: '',
+          meta: {
+            name: '自定义角色',
+            description: '这是一个自定义角色',
+            avatar: '🤖',
+          },
+        };
+
+        const newList = produce(localAgentList, (draft) => {
+          draft.unshift(newAgent);
+        });
+
+        set({ currentIdentifier: newAgent.agentId, localAgentList: newList });
+      },
       updateAgentConfig: (agent) => {
-        const { subscribedList, currentIdentifier, defaultAgent } = get();
+        const { localAgentList, currentIdentifier, defaultAgent } = get();
         if (currentIdentifier === LOBE_VIDOL_DEFAULT_AGENT_ID) {
           const mergeAgent = produce(defaultAgent, (draft) => {
             merge(draft, agent);
@@ -67,35 +118,35 @@ export const useAgentStore = createWithEqualityFn<AgentStore>()(
           return;
         }
 
-        const agents = produce(subscribedList, (draft) => {
+        const agents = produce(localAgentList, (draft) => {
           const index = draft.findIndex((localAgent) => localAgent.agentId === currentIdentifier);
           if (index === -1) return;
           draft[index] = merge(draft[index], agent);
         });
-        set({ subscribedList: agents });
+        set({ localAgentList: agents });
       },
       subscribe: (agent) => {
-        const { subscribedList } = get();
+        const { localAgentList } = get();
 
-        const newList = produce(subscribedList, (draft) => {
+        const newList = produce(localAgentList, (draft) => {
           const index = draft.findIndex((item) => item.agentId === agent.agentId);
 
           if (index === -1) {
             draft.unshift(agent);
           }
         });
-        set({ subscribedList: newList });
+        set({ localAgentList: newList });
       },
       unsubscribe: (agentId) => {
-        const { subscribedList } = get();
-        const newList = produce(subscribedList, (draft) => {
+        const { localAgentList } = get();
+        const newList = produce(localAgentList, (draft) => {
           const index = draft.findIndex((item) => item.agentId === agentId);
 
           if (index !== -1) {
             draft.splice(index, 1);
           }
         });
-        set({ currentIdentifier: LOBE_VIDOL_DEFAULT_AGENT_ID, subscribedList: newList });
+        set({ currentIdentifier: LOBE_VIDOL_DEFAULT_AGENT_ID, localAgentList: newList });
       },
     }),
     {

diff --git a/src/store/agent/initialState.ts b/src/store/agent/initialState.ts
@@ -3,7 +3,7 @@ import { DEFAULT_VIDOL_AGENT, LOBE_VIDOL_DEFAULT_AGENT_ID } from '@/constants/ag
 const initialState = {
   currentIdentifier: LOBE_VIDOL_DEFAULT_AGENT_ID,
   defaultAgent: DEFAULT_VIDOL_AGENT,
-  subscribedList: [],
+  localAgentList: [],
 };
 
 export { initialState };
diff --git a/src/store/agent/selectors/agent.ts b/src/store/agent/selectors/agent.ts
@@ -6,18 +6,18 @@ import { AgentStore } from '../index';
 const showSideBar = (s: AgentStore) => !!s.currentIdentifier;
 
 const currentAgentItem = (s: AgentStore): Agent | undefined => {
-  const { currentIdentifier, subscribedList, defaultAgent } = s;
+  const { currentIdentifier, localAgentList, defaultAgent } = s;
   if (currentIdentifier === LOBE_VIDOL_DEFAULT_AGENT_ID) return defaultAgent;
 
-  const currentAgent = subscribedList.find((item) => item.agentId === currentIdentifier);
+  const currentAgent = localAgentList.find((item) => item.agentId === currentIdentifier);
   if (!currentAgent) return undefined;
 
   return currentAgent;
 };
 
 const agentListIds = (s: AgentStore): string[] => {
-  const { subscribedList } = s;
-  return subscribedList.map((item) => item.agentId);
+  const { localAgentList } = s;
+  return localAgentList.map((item) => item.agentId);
 };
 
 const filterAgentListIds = (s: AgentStore, filter: string | undefined) => {
@@ -45,8 +45,8 @@ const isDefaultAgent = (s: AgentStore) => {
 };
 
 const subscribed = (s: AgentStore) => (agentId: string) => {
-  const { subscribedList } = s;
-  const index = subscribedList.findIndex((item) => item.agentId === agentId);
+  const { localAgentList } = s;
+  const index = localAgentList.findIndex((item) => item.agentId === agentId);
 
   return index !== -1;
 };

diff --git a/src/store/session/selectors.ts b/src/store/session/selectors.ts
@@ -131,7 +131,7 @@ const currentSystemRole = (s: SessionStore): string => {
   return agent.systemRole;
 };
 
-const currentAgentModel = (s: SessionStore): string => {
+const currentAgentModel = (s: SessionStore): string | undefined => {
   const agent = currentAgent(s);
   if (!agent) return '';
   return agent.meta.model;

diff --git a/src/types/agent.ts b/src/types/agent.ts
@@ -27,27 +27,27 @@ export interface AgentMeta {
   /**
    * 封面图片路径
    */
-  cover: string;
+  cover?: string;
   /**
    * 角色描述
    */
   description: string;
   /**
    * 主页地址，一般为 Vroid Hub 的地址
    */
-  homepage: string;
+  homepage?: string;
   /**
    * 模型文件路径
    */
-  model: string;
+  model?: string;
   /**
    * 角色名
    */
   name: string;
   /**
    * 说明文件
    */
-  readme: string;
+  readme?: string;
 }
 
 export interface Agent {
@@ -58,19 +58,19 @@ export interface Agent {
   /**
    * 作者名
    */
-  author: string;
+  author?: string;
   /**
    * 创建时间
    */
-  createAt: string;
+  createAt?: string;
   /**
    * 问候语，角色在每次聊天开始时说的第一句话
    */
   greeting: string;
   /**
    * 作者主页
    */
-  homepage: string;
+  homepage?: string;
   /**
    * 角色元数据
    */
@@ -82,9 +82,9 @@ export interface Agent {
   /**
    * 触摸配置
    */
-  touch: TouchActionConfig;
+  touch?: TouchActionConfig;
   /**
    * 角色 tts 配置文件
    */
-  tts: TTS;
+  tts?: TTS;
 }