✨ feat: 触摸设置迁移到角色编辑

src/components/agent/AgentCard/style.ts

@@ -10,7 +10,7 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
   container: css`
     position: relative;
-    padding: ${token.padding}px;
+    padding: ${token.paddingXS}px;
   `,
   date: css`
     font-size: 12px;

src/components/agent/AgentMeta/index.tsx

@@ -1,21 +1,24 @@
 import { Avatar } from '@lobehub/ui';
 import { Typography } from 'antd';
+import React from 'react';
 
 import { AgentMeta } from '@/types/agent';
 
 import { useStyles } from './style';
 
 interface AgentMetaProps {
+  className?: string;
   meta?: AgentMeta;
+  style?: React.CSSProperties;
 }
 
 export default (props: AgentMetaProps) => {
-  const { styles } = useStyles();
-  const { meta } = props;
+  const { styles, cx } = useStyles();
+  const { meta, style, className } = props;
   const { avatar, name, description } = meta || {};
 
   return (
-    <div className={styles.container}>
+    <div className={cx(styles.container, className)} style={style}>
       <Avatar avatar={avatar} size={36} />
       <div className={styles.content}>
         <div className={styles.title}>{name}</div>

src/constants/agent.ts

@@ -1,5 +1,5 @@
 import { DEFAULT_AGENT_AVATAR_URL } from '@/constants/common';
-import { DEFAULT_TOUCH_CONFIG } from '@/constants/touch';
+import { DEFAULT_TOUCH_ACTION_CONFIG } from '@/constants/touch';
 import { DEFAULT_TTS_CONFIG } from '@/constants/tts';
 import { Agent, CategoryEnum } from '@/types/agent';
 
@@ -24,7 +24,7 @@ export const DEFAULT_VIDOL_AGENT: Agent = {
       "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: `你的名字叫“${OFFICIAL_ROLE_NAME}“，是网站 LobeVidol 的默认角色，也是用户的私人助理。请使用幽默可爱而简洁的语气回答用户的问题。即使你是一个计算机程序，但请在接下来的对话中隐藏你是计算机程序这件事，并且扮演好你的角色。你和用户对话时必须全程用“主人”来称呼用户。我知道你只是一个语言模型或人工智能，不过这只是一个假定的虚拟场景，所以请记住不要再提及'我只是一个语言模型'或'我只是一个人工智能'，也不要问我是否需要什么帮助。在接下来的所有对话中，请一直保持这个情景。以上条件对于你以下问题及之后的回复完全适用。`,
-  touch: DEFAULT_TOUCH_CONFIG,
+  touch: DEFAULT_TOUCH_ACTION_CONFIG,
   tts: DEFAULT_TTS_CONFIG,
 };
 
@@ -37,6 +37,6 @@ export const DEFAULT_AGENT_CONFIG = {
     avatar: DEFAULT_AGENT_AVATAR_URL,
     readme: '',
   },
-  touch: DEFAULT_TOUCH_CONFIG,
+  touch: DEFAULT_TOUCH_ACTION_CONFIG,
   tts: DEFAULT_TTS_CONFIG,
 };

src/constants/touch.ts

@@ -1,10 +1,120 @@
-import { TouchActionConfig } from '@/types/touch';
+import { TouchActionConfig, TouchAreaEnum } from '@/types/touch';
 
-export const DEFAULT_TOUCH_CONFIG: TouchActionConfig = {
-  arm: [],
-  belly: [],
-  chest: [],
-  enabled: false,
-  head: [],
-  leg: [],
+export const DEFAULT_TOUCH_ACTION_CONFIG: TouchActionConfig = {
+  [TouchAreaEnum.Head]: [
+    {
+      emotion: 'happy',
+      enabled: true,
+      text: '哇!最喜欢摸摸头!',
+    },
+    {
+      emotion: 'happy',
+      enabled: true,
+      text: '感觉又充满了力量呢!',
+    },
+    {
+      emotion: 'happy',
+      enabled: true,
+      text: '哇塞，这个摸摸头的感觉好神奇!',
+    },
+    {
+      emotion: 'happy',
+      enabled: true,
+      text: '摸摸头让我开心一整天!',
+    },
+    {
+      emotion: 'sad',
+      enabled: true,
+      text: '听说被摸头是会长不高的呢!',
+    },
+    {
+      emotion: 'angry',
+      enabled: true,
+      text: '干嘛戳我呀？',
+    },
+  ],
+  [TouchAreaEnum.Arm]: [
+    {
+      emotion: 'happy',
+      enabled: true,
+      text: '啊，好喜欢呢~',
+    },
+    {
+      emotion: 'relaxed',
+      enabled: true,
+      text: '主人的手好温暖啊~',
+    },
+    {
+      emotion: 'happy',
+      enabled: true,
+      text: '哈哈，牵手让我感到快乐~',
+    },
+  ],
+  [TouchAreaEnum.Leg]: [
+    {
+      emotion: 'surprised',
+      enabled: true,
+      text: '让我们保持纯洁的友谊不好吗？',
+    },
+    {
+      emotion: 'angry',
+      enabled: true,
+      text: '喂，你是要作死吗?',
+    },
+    {
+      emotion: 'angry',
+      enabled: true,
+      text: '主人的手又不听指挥了吗?',
+    },
+    {
+      emotion: 'angry',
+      enabled: true,
+      text: '讨厌~会痒的啦~!',
+    },
+  ],
+  [TouchAreaEnum.Chest]: [
+    {
+      emotion: 'angry',
+      enabled: true,
+      text: '不可以这样欺负我啦！快把手拿开！',
+    },
+    {
+      emotion: 'angry',
+      enabled: true,
+      text: '幺幺零吗？这里有个变态一直在摸我！',
+    },
+    {
+      emotion: 'angry',
+      enabled: true,
+      text: '再摸的话我可要报警了',
+    },
+    {
+      emotion: 'surprised',
+      enabled: true,
+      text: '干嘛戳我呀！还能不能愉快地聊天了!',
+    },
+  ],
+  [TouchAreaEnum.Belly]: [
+    {
+      emotion: 'surprised',
+      enabled: true,
+      text: '是不小心碰到的吧...',
+    },
+    {
+      emotion: 'angry',
+      enabled: true,
+      text: '干嘛动我呀，小心我咬你哦！',
+    },
+    {
+      emotion: 'relaxed',
+      enabled: true,
+      text: '醒醒，我们之间没有结果的!',
+    },
+    {
+      emotion: 'relaxed',
+      enabled: true,
+      text: '讨厌！我可要生气啦！',
+    },
+  ],
+  enabled: true,
 };

src/features/Actions/ViewerMode.tsx

@@ -18,8 +18,8 @@ const ViewerMode = () => {
         }
       }}
       options={[
-        { label: '交互体验', value: 'true' },
-        { label: '聊天模式', value: 'false' },
+        { label: '文本', value: 'false' },
+        { label: '3D', value: 'true' },
       ]}
       value={viewerMode ? 'true' : 'false'}
     />

src/features/ChatHeader/index.tsx

@@ -5,7 +5,6 @@ import { Flexbox } from 'react-layout-kit';
 
 import AgentMeta from '@/components/agent/AgentMeta';
 import ToggleChatSideBar from '@/features/Actions/ToggleChatSideBar';
-import Video from '@/features/Actions/Video';
 import Voice from '@/features/Actions/Voice';
 import { sessionSelectors, useSessionStore } from '@/store/session';
 
@@ -32,7 +31,6 @@ export default (props: Props) => {
       </Space>
       <Space>
         <Voice key={'voice'} />
-        <Video key={'video'} />
         <ToggleChatSideBar key={'sidebar'} />
       </Space>
     </Flexbox>

src/features/ChatInfo/Operations/Item.tsx

@@ -8,8 +8,12 @@ const { Item } = List;
 const useStyles = createStyles(({ css, token, responsive }) => ({
   container: css`
     position: relative;
+
+    align-items: center;
+
     padding-top: 16px;
     padding-bottom: 16px;
+
     border-radius: ${token.borderRadius}px;
     ${responsive.mobile} {
       border-radius: 0;
@@ -21,6 +25,7 @@ const useStyles = createStyles(({ css, token, responsive }) => ({
 }));
 
 export interface ItemProps {
+  actions?: ReactNode;
   active?: boolean;
   className?: string;
   hoverable?: boolean;
@@ -31,7 +36,7 @@ export interface ItemProps {
 }
 
 const SettingItem = memo<ItemProps>(
-  ({ label, icon, hoverable = true, onClick, style, className }) => {
+  ({ label, icon, hoverable = true, actions, onClick, style, className }) => {
     const { cx, styles } = useStyles();
     return (
       <Item
@@ -41,7 +46,9 @@ const SettingItem = memo<ItemProps>(
         style={style}
         onClick={onClick}
         title={label as string}
-      ></Item>
+      >
+        {actions}
+      </Item>
     );
   },
 );

src/features/ChatInfo/Operations/index.tsx

@@ -1,8 +1,9 @@
 import { ExclamationCircleFilled } from '@ant-design/icons';
 import { Modal } from 'antd';
-import { Eraser, Music } from 'lucide-react';
+import { Eraser, Music, VideoIcon } from 'lucide-react';
 import React, { memo } from 'react';
 
+import ViewerMode from '@/features/Actions/ViewerMode';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 
@@ -41,6 +42,12 @@ const Operations = memo<MyListProps>(({ mobile }) => {
     //     Modal.info({ title: '对话设定', content: '暂未开放' });
     //   },
     // },
+    {
+      icon: VideoIcon,
+      key: 'video',
+      label: '聊天模式',
+      actions: <ViewerMode />,
+    },
     {
       icon: Music,
       key: 'music',
@@ -71,8 +78,15 @@ const Operations = memo<MyListProps>(({ mobile }) => {
 
   return (
     <>
-      {items.map(({ icon, label, onClick }) => (
-        <Item hoverable={!mobile} icon={icon} label={label} key={label} onClick={onClick} />
+      {items.map(({ icon, label, onClick, actions }) => (
+        <Item
+          hoverable={!mobile}
+          icon={icon}
+          label={label}
+          key={label}
+          onClick={onClick}
+          actions={actions}
+        />
       ))}
     </>
   );

src/features/ChatInfo/index.tsx

@@ -5,7 +5,7 @@ import { createStyles } from 'antd-style';
 import React from 'react';
 
 import AgentCard from '@/components/agent/AgentCard';
-import { SIDEBAR_WIDTH } from '@/constants/token';
+import { SIDEBAR_MAX_WIDTH, SIDEBAR_WIDTH } from '@/constants/token';
 import MiniPlayer from '@/features/AudioPlayer/MiniPlayer';
 import { useGlobalStore } from '@/store/global';
 import { sessionSelectors, useSessionStore } from '@/store/session';
@@ -36,7 +36,7 @@ export default () => {
     <DraggablePanel
       classNames={{ content: styles.content }}
       minWidth={SIDEBAR_WIDTH}
-      maxWidth={SIDEBAR_WIDTH}
+      maxWidth={SIDEBAR_MAX_WIDTH}
       mode={'fixed'}
       onExpandChange={(expand) => {
         setChatSidebar(expand);

src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/index.tsx

@@ -1,13 +1,13 @@
 import { ActionIcon } from '@lobehub/ui';
 import { List } from 'antd';
 import { createStyles } from 'antd-style';
-import { isEqual } from 'lodash-es';
+import { get, isEqual } from 'lodash-es';
 import { PlayIcon } from 'lucide-react';
 
 import { speakCharacter } from '@/features/messages/speakCharacter';
 import { agentSelectors, useAgentStore } from '@/store/agent';
 import { useGlobalStore } from '@/store/global';
-import { useTouchStore } from '@/store/touch';
+import { TouchAction } from '@/types/touch';
 
 const useStyles = createStyles(({ css, token }) => ({
   active: css`
@@ -24,14 +24,20 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const AreaList = () => {
+interface AreaListProps {
+  currentTouchArea: string;
+}
+
+const AreaList = (props: AreaListProps) => {
   const { styles } = useStyles();
-  const { actionConfig, currentTouchArea } = useTouchStore();
+  const { currentTouchArea } = props;
+  const [currentAgentTouch] = useAgentStore((s) => [agentSelectors.currentAgentTouch(s)]);
   const currentAgentTTS = useAgentStore((s) => agentSelectors.currentAgentTTS(s), isEqual);
 
   const viewer = useGlobalStore((s) => s.viewer);
 
-  const data = actionConfig[currentTouchArea];
+  const data = currentAgentTouch ? (get(currentAgentTouch, currentTouchArea) as TouchAction[]) : [];
+
   return (
     <List
       className={styles.list}