✨ feat: 支持删除触摸反应列表

lobehub · May 25, 2024 · be66ad5 · be66ad5
1 parent 1eaa6e3
commit be66ad5
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 16 deletions.
diff --git a/src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/index.tsx b/src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/index.tsx
@@ -2,12 +2,12 @@ import { ActionIcon } from '@lobehub/ui';
 import { List } from 'antd';
 import { createStyles } from 'antd-style';
 import { get, isEqual } from 'lodash-es';
-import { PlayIcon } from 'lucide-react';
+import { PlayIcon, XIcon } from 'lucide-react';
 
 import { speakCharacter } from '@/features/messages/speakCharacter';
 import { agentSelectors, useAgentStore } from '@/store/agent';
 import { useGlobalStore } from '@/store/global';
-import { TouchAction } from '@/types/touch';
+import { TouchAction, TouchAreaEnum } from '@/types/touch';
 
 const useStyles = createStyles(({ css, token }) => ({
   active: css`
@@ -25,13 +25,16 @@ const useStyles = createStyles(({ css, token }) => ({
 }));
 
 interface AreaListProps {
-  currentTouchArea: string;
+  currentTouchArea: TouchAreaEnum;
 }
 
 const AreaList = (props: AreaListProps) => {
   const { styles } = useStyles();
   const { currentTouchArea } = props;
-  const [currentAgentTouch] = useAgentStore((s) => [agentSelectors.currentAgentTouch(s)]);
+  const [currentAgentTouch, removeTouchAction] = useAgentStore((s) => [
+    agentSelectors.currentAgentTouch(s),
+    s.removeTouchAction,
+  ]);
   const currentAgentTTS = useAgentStore((s) => agentSelectors.currentAgentTTS(s), isEqual);
 
   const viewer = useGlobalStore((s) => s.viewer);
@@ -43,11 +46,10 @@ const AreaList = (props: AreaListProps) => {
       className={styles.list}
       dataSource={data}
       header={<div>触摸反应列表</div>}
-      renderItem={(item) => (
+      renderItem={(item, index) => (
         <List.Item
           actions={[
             <ActionIcon
-              /* @ts-ignore */
               icon={PlayIcon}
               key="play"
               onClick={() => {
@@ -63,6 +65,13 @@ const AreaList = (props: AreaListProps) => {
                 );
               }}
             />,
+            <ActionIcon
+              icon={XIcon}
+              key="delete"
+              onClick={() => {
+                removeTouchAction(currentTouchArea, index);
+              }}
+            />,
           ]}
           className={styles.listItem}
         >

diff --git a/src/panels/RolePanel/RoleEdit/Model/Touch/index.tsx b/src/panels/RolePanel/RoleEdit/Model/Touch/index.tsx
@@ -29,7 +29,7 @@ interface TouchProps {
 const Touch = (props: TouchProps) => {
   const { style, className } = props;
   const { styles } = useStyles();
-  const [currentTouchArea, setCurrentTouchArea] = useState(TouchAreaEnum.Head);
+  const [currentTouchArea, setCurrentTouchArea] = useState<TouchAreaEnum>(TouchAreaEnum.Head);
 
   return (
     <div className={classNames(className, styles.container)} style={style}>

diff --git a/src/store/agent/index.ts b/src/store/agent/index.ts
@@ -7,12 +7,14 @@ import { createWithEqualityFn } from 'zustand/traditional';
 import { StateCreator } from 'zustand/vanilla';
 
 import { DEFAULT_AGENT_CONFIG, LOBE_VIDOL_DEFAULT_AGENT_ID } from '@/constants/agent';
+import { TouchActionType, touchReducer } from '@/store/agent/reducers/touch';
 import { Agent, AgentMeta } from '@/types/agent';
-import { TouchActionConfig } from '@/types/touch';
+import { TouchAreaEnum } from '@/types/touch';
 import { TTS } from '@/types/tts';
 import { mergeWithUndefined } from '@/utils/common';
 
 import { initialState } from './initialState';
+import { agentSelectors } from './selectors/agent';
 
 const AGENT_STORAGE_KEY = 'vidol-chat-agent-storage';
 
@@ -41,6 +43,11 @@ export interface AgentStore {
    * 默认角色
    */
   defaultAgent: Agent;
+  /**
+   * Touch Reducer
+   * @param payload
+   */
+  dispatchTouchAction: (payload: TouchActionType) => void;
   /**
    * 根据 ID 获取角色
    * @param id
@@ -50,6 +57,14 @@ export interface AgentStore {
    * 本地角色列表
    */
   localAgentList: Agent[];
+  /**
+   * 删除触摸配置
+   */
+  removeTouchAction: (currentTouchArea: TouchAreaEnum, index: number) => void;
+  /**
+   * 设置角色配置
+   */
+  setAgentConfig: (agent: Agent) => void;
   /**
    * 订阅角色
    * @param agent
@@ -72,10 +87,6 @@ export interface AgentStore {
    * 更新角色 TTS
    */
   updateAgentTTS: (tts: DeepPartial<TTS>) => void;
-  /**
-   * 更新角色触摸配置
-   */
-  updateAgentTouch: (touch: DeepPartial<TouchActionConfig>) => void;
 }
 
 const createAgentStore: StateCreator<AgentStore, [['zustand/devtools', never]]> = (set, get) => ({
@@ -128,7 +139,21 @@ const createAgentStore: StateCreator<AgentStore, [['zustand/devtools', never]]>
     const agents = produce(localAgentList, (draft) => {
       const index = draft.findIndex((localAgent) => localAgent.agentId === currentIdentifier);
       if (index === -1) return;
-      draft[index] = mergeWithUndefined(draft[index], agent);
+      mergeWithUndefined(draft[index], agent);
+    });
+    set({ localAgentList: agents });
+  },
+  setAgentConfig: (agent) => {
+    const { localAgentList, currentIdentifier } = get();
+    if (currentIdentifier === LOBE_VIDOL_DEFAULT_AGENT_ID) {
+      set({ defaultAgent: agent });
+      return;
+    }
+
+    const agents = produce(localAgentList, (draft) => {
+      const index = draft.findIndex((localAgent) => localAgent.agentId === currentIdentifier);
+      if (index === -1) return;
+      draft[index] = agent;
     });
     set({ localAgentList: agents });
   },
@@ -137,9 +162,28 @@ const createAgentStore: StateCreator<AgentStore, [['zustand/devtools', never]]>
     updateAgentConfig({ meta });
   },
 
-  updateAgentTouch: (touch) => {
-    const { updateAgentConfig } = get();
-    updateAgentConfig({ touch });
+  dispatchTouchAction: (payload) => {
+    const { setAgentConfig } = get();
+    const agent = agentSelectors.currentAgentItem(get());
+    const touch = agentSelectors.currentAgentTouch(get());
+
+    if (!touch || !agent) {
+      return;
+    }
+
+    const config = touchReducer(touch, payload);
+
+    setAgentConfig({ ...agent, touch: config });
+  },
+  removeTouchAction: (currentTouchArea, index) => {
+    const { dispatchTouchAction } = get();
+    dispatchTouchAction({
+      type: 'DELETE_TOUCH_ACTION',
+      payload: {
+        touchArea: currentTouchArea,
+        index: index,
+      },
+    });
   },
   updateAgentTTS: (tts) => {
     const { updateAgentConfig } = get();

diff --git a/src/store/agent/reducers/touch.ts b/src/store/agent/reducers/touch.ts
@@ -0,0 +1,31 @@
+import { produce } from 'immer';
+
+import { TouchActionConfig, TouchAreaEnum } from '@/types/touch';
+
+export interface DeleteTouchAction {
+  payload: {
+    index: number;
+    touchArea: TouchAreaEnum;
+  };
+  type: 'DELETE_TOUCH_ACTION';
+}
+
+export type TouchActionType = DeleteTouchAction;
+
+export const touchReducer = (
+  state: TouchActionConfig,
+  action: TouchActionType,
+): TouchActionConfig => {
+  switch (action.type) {
+    case 'DELETE_TOUCH_ACTION': {
+      console.log(action.payload);
+      return produce(state, (draft) => {
+        const { index, touchArea } = action.payload;
+        draft[touchArea].splice(index, 1);
+      });
+    }
+    default: {
+      return produce(state, () => []);
+    }
+  }
+};