feat: 添加触摸设置 #59
feat: 添加触摸设置 #59
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
👍 @rdmclin2 |
WalkthroughThe changes involve various updates and fixes across multiple files, including renaming constants, modifying imports, updating component properties, and adding new features such as touch action configurations and viewer mode options. These adjustments enhance the application's functionality, improve user interface clarity, and streamline state management. Changes
Poem
Tip New Features and ImprovementsReview SettingsIntroduced new personality profiles for code reviews. Users can now select between "Chill" and "Assertive" review tones to tailor feedback styles according to their preferences. The "Assertive" profile posts more comments and nitpicks the code more aggressively, while the "Chill" profile is more relaxed and posts fewer comments. AST-based InstructionsCodeRabbit offers customizing reviews based on the Abstract Syntax Tree (AST) pattern matching. Read more about AST-based instructions in the documentation. Community-driven AST-based RulesWe are kicking off a community-driven initiative to create and share AST-based rules. Users can now contribute their AST-based rules to detect security vulnerabilities, code smells, and anti-patterns. Please see the ast-grep-essentials repository for more information. New Static Analysis ToolsWe are continually expanding our support for static analysis tools. We have added support for Tone SettingsUsers can now customize CodeRabbit to review code in the style of their favorite characters or personalities. Here are some of our favorite examples:
Revamped Settings PageWe have redesigned the settings page for a more intuitive layout, enabling users to find and adjust settings quickly. This change was long overdue; it not only improves the user experience but also allows our development team to add more settings in the future with ease. Going forward, the changes to Miscellaneous
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
Outside diff range and nitpick comments (2)
src/services/chat.ts (1)
Line range hint
41-59: ThehandleSpeakAiandtoggleVoicefunctions are implemented with clear logic. However, thetoggleVoicefunction should handle the case wherevoiceOnis false to ensure that voice toggling is correctly managed.Consider adding logic to handle the case when
voiceOnis false.src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/index.tsx (1)
Line range hint
71-72: JSX elements without children should be marked as self-closing to follow best practices.- <List.Item.Meta title={item.text}></List.Item.Meta> + <List.Item.Meta title={item.text} />
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (35)
- src/app/chat/ViewerMode/index.tsx (1 hunks)
- src/app/my/SideBar/MyList/Item.tsx (2 hunks)
- src/components/Error/index.tsx (1 hunks)
- src/components/agent/AgentCard/style.ts (1 hunks)
- src/components/agent/AgentMeta/index.tsx (1 hunks)
- src/constants/agent.ts (3 hunks)
- src/constants/touch.ts (1 hunks)
- src/features/Actions/ViewerMode.tsx (1 hunks)
- src/features/Actions/Voice.tsx (2 hunks)
- src/features/AgentViewer/index.tsx (2 hunks)
- src/features/AudioPlayer/index.tsx (2 hunks)
- src/features/ChatHeader/index.tsx (2 hunks)
- src/features/ChatInfo/Operations/Item.tsx (4 hunks)
- src/features/ChatInfo/Operations/index.tsx (3 hunks)
- src/features/ChatInfo/index.tsx (2 hunks)
- src/features/ChatItem/Actions/Assistant.tsx (1 hunks)
- src/features/RoleList/List/Elsa/index.tsx (1 hunks)
- src/features/SessionList/Elsa/index.tsx (1 hunks)
- src/features/Settings/common.tsx (2 hunks)
- src/features/vrmViewer/viewer.ts (1 hunks)
- src/layout/Header/index.tsx (1 hunks)
- src/panels/DancePanel/Dance/Card/index.tsx (1 hunks)
- src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/Actions/AddOrEdit.tsx (1 hunks)
- src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/Actions/Delete.tsx (1 hunks)
- src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/Actions/Play.tsx (1 hunks)
- src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/index.tsx (1 hunks)
- src/panels/RolePanel/RoleEdit/Model/Touch/SideBar/index.tsx (1 hunks)
- src/panels/RolePanel/RoleEdit/Model/Touch/index.tsx (2 hunks)
- src/services/chat.ts (3 hunks)
- src/store/agent/index.ts (6 hunks)
- src/store/agent/reducers/touch.ts (1 hunks)
- src/store/agent/selectors/agent.ts (3 hunks)
- src/store/dance/slices/playlist.ts (1 hunks)
- src/store/global/index.ts (4 hunks)
- src/types/touch.ts (1 hunks)
Files not reviewed due to errors (8)
- src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/Actions/Delete.tsx (no review received)
- src/features/ChatItem/Actions/Assistant.tsx (no review received)
- src/features/Actions/Voice.tsx (no review received)
- src/panels/RolePanel/RoleEdit/Model/Touch/index.tsx (no review received)
- src/app/my/SideBar/MyList/Item.tsx (no review received)
- src/features/ChatInfo/Operations/Item.tsx (no review received)
- src/features/AgentViewer/index.tsx (no review received)
- src/features/ChatInfo/index.tsx (no review received)
Files skipped from review due to trivial changes (7)
- src/app/chat/ViewerMode/index.tsx
- src/components/Error/index.tsx
- src/components/agent/AgentCard/style.ts
- src/features/RoleList/List/Elsa/index.tsx
- src/features/SessionList/Elsa/index.tsx
- src/layout/Header/index.tsx
- src/panels/DancePanel/Dance/Card/index.tsx
Additional Context Used
Biome (46)
src/app/my/SideBar/MyList/Item.tsx (3)
36-42: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
2-3: All these imports are only used as types.
3-4: Some named imports are only used as types.
src/components/agent/AgentMeta/index.tsx (2)
2-3: All these imports are only used as types.
4-5: All these imports are only used as types.
src/constants/agent.ts (1)
3-4: Some named imports are only used as types.
src/constants/touch.ts (1)
2-3: Some named imports are only used as types.
src/features/AgentViewer/index.tsx (3)
48-51: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
1-2: The default import is only used as a type.
27-27: This hook does not specify all of its dependencies: loadVrm
src/features/AudioPlayer/index.tsx (3)
59-74: Provide a track for captions when using audio or video elements.
4-5: The default import is only used as a type.
10-11: Some named imports are only used as types.
src/features/ChatInfo/Operations/Item.tsx (2)
2-3: All these imports are only used as types.
3-4: Some named imports are only used as types.
src/features/ChatItem/Actions/Assistant.tsx (1)
1-2: All these imports are only used as types.
src/features/Settings/common.tsx (1)
4-5: All these imports are only used as types.
src/features/vrmViewer/viewer.ts (1)
121-122: Forbidden non-null assertion.
src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/Actions/AddOrEdit.tsx (2)
37-37: Forbidden non-null assertion.
9-10: All these imports are only used as types.
src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/Actions/Delete.tsx (1)
6-7: All these imports are only used as types.
src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/Actions/Play.tsx (1)
8-9: All these imports are only used as types.
src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/index.tsx (2)
71-72: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
10-11: All these imports are only used as types.
src/panels/RolePanel/RoleEdit/Model/Touch/SideBar/index.tsx (1)
5-6: All these imports are only used as types.
src/panels/RolePanel/RoleEdit/Model/Touch/index.tsx (1)
2-3: The default import is only used as a type.
src/services/chat.ts (3)
9-9: Unexpected any. Specify a different type.
5-6: All these imports are only used as types.
6-7: All these imports are only used as types.
src/store/agent/index.ts (6)
2-3: All these imports are only used as types.
6-7: All these imports are only used as types.
9-10: Some named imports are only used as types.
10-11: All these imports are only used as types.
11-12: All these imports are only used as types.
12-13: All these imports are only used as types.
src/store/agent/reducers/touch.ts (1)
2-3: All these imports are only used as types.
src/store/agent/selectors/agent.ts (4)
1-2: All these imports are only used as types.
2-3: All these imports are only used as types.
3-4: All these imports are only used as types.
5-6: All these imports are only used as types.
src/store/dance/slices/playlist.ts (3)
1-2: All these imports are only used as types.
4-5: All these imports are only used as types.
5-6: All these imports are only used as types.
src/store/global/index.ts (1)
8-9: All these imports are only used as types.
src/types/touch.ts (2)
1-1: All these imports are only used as types.
2-3: All these imports are only used as types.
Additional comments not posted (28)
src/features/Actions/ViewerMode.tsx (1)
21-22: Updated viewer mode options to '文本' and '3D' are consistent and clear.src/types/touch.ts (1)
5-5: IntroducedEmotionTypeas an alias for VRM expressions, enhancing clarity and type safety.src/components/agent/AgentMeta/index.tsx (1)
10-12: AddedclassNameandstyleprops toAgentMetaPropsfor enhanced styling flexibility.src/panels/RolePanel/RoleEdit/Model/Touch/SideBar/index.tsx (2)
5-6: The imports from@/constants/touchand@/types/touchare correctly used as type-only imports, which is a good practice in TypeScript to ensure they are not included in the JavaScript output.
23-49: The sidebar component is well-structured and uses a functional approach with hooks for styles and state management. The use ofclassNamesfor conditional styling is appropriate. The interaction throughsetCurrentTouchAreais clear and straightforward.src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/Actions/Play.tsx (1)
8-9: The imports from@/store/globaland@/types/touchare correctly used as type-only imports. This is a good TypeScript practice.src/store/agent/reducers/touch.ts (1)
2-3: The imports from@/types/touchare correctly used as type-only imports. This is a good TypeScript practice.src/features/ChatInfo/Operations/index.tsx (1)
Line range hint
45-89: The addition of the video chat mode in theOperationscomponent is well-implemented. The use ofViewerModeas an action for the video item is a good integration. However, ensure that all interactions are properly tested, especially the new video chat mode.src/constants/agent.ts (2)
3-4: The imports from@/constants/touchand@/types/agentare correctly used as type-only imports. This is a good TypeScript practice.
Line range hint
2-40: The constants for the default agent configuration are well-defined. The use ofDEFAULT_TOUCH_ACTION_CONFIGandDEFAULT_TTS_CONFIGensures consistency across the application. Ensure that these configurations are updated and maintained as the application evolves.src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/index.tsx (7)
3-4: Ensure that the new imports are utilized effectively in the file.
6-11: The introduction of new constants and components enhances the modularity and maintainability of the touch action list.
17-21: The CSS styles have been updated to use new token values, ensuring consistency with the design system.
29-31: The new interfaceAreaListPropsis well-defined and enhances type safety.
35-36: The logic to fetch touch actions based on the current touch area is clear and concise.Also applies to: 38-39
46-51: The JSX structure for the list header is well-organized, making it easy to understand and maintain.
55-66: The rendering logic for list items is correctly implemented with actions for playing, editing, and deleting touch actions.src/features/Settings/common.tsx (2)
7-8: The updated imports reflect the correct components being used, aligning with the functionality described in the PR.
70-70: The replacement of<ClearChat />with<ClearSession />corrects a previous error and aligns the component with its intended functionality.src/store/agent/selectors/agent.ts (2)
3-3: The addition ofTouchActionConfigimport is necessary for the new selector function, enhancing the store's capabilities.
34-39: The new selectorcurrentAgentTouchis correctly implemented, providing a way to access touch configurations for the current agent.src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/Actions/AddOrEdit.tsx (2)
1-11: The imports and interface definition are correctly updated to support the new functionality of adding or editing touch actions.
19-97: The component logic for adding or editing touch actions is well-structured and follows best practices, including form management and modal handling.src/features/AudioPlayer/index.tsx (2)
12-12: The update to useuseGlobalStorereflects a change in state management strategy, likely aiming for a more centralized approach.
37-37: The integration of theviewerobject into the audio player's effects ensures that visual and audio components are synchronized, enhancing user experience.src/store/global/index.ts (1)
8-8: The introduction of theViewerclass and its integration into the global store enhances the application's architecture by centralizing viewer management.Also applies to: 56-56, 60-60
src/store/dance/slices/playlist.ts (1)
107-107: Initialization ofcurrentPlaywithDEFAULT_DANCEenhances robustness by avoiding null values.Verification successful
Initialization of
currentPlaywithDEFAULT_DANCEenhances robustness by avoiding null values. TheDEFAULT_DANCEobject is properly defined and valid.
src/constants/dance.ts:export const DEFAULT_DANCE: Dance = { danceId: 'vidol-dance-gokuraku', name: '極楽浄土', createAt: '2023-10-31', author: 'Vidol', homepage: 'https://github.com/lobehub/lobe-vidol', };Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that DEFAULT_DANCE is always a valid Dance object. # Test: Search for the definition and usage of DEFAULT_DANCE. Expect: Proper definition and no misuse. rg --type typescript $'DEFAULT_DANCE'Length of output: 71
Script:
#!/bin/bash # Description: Verify that DEFAULT_DANCE is always a valid Dance object. # Test: Search for the definition and usage of DEFAULT_DANCE. Expect: Proper definition and no misuse. rg --type ts 'DEFAULT_DANCE'Length of output: 463
Script:
#!/bin/bash # Description: Display the definition of DEFAULT_DANCE to ensure it is a valid Dance object. # Test: Print the definition of DEFAULT_DANCE from src/constants/dance.ts. rg --type ts --context 5 'export const DEFAULT_DANCE' src/constants/dance.tsLength of output: 305
src/constants/touch.ts (1)
5-11: Enhancements to touch interaction constants improve clarity and maintainability.Also applies to: 13-23, 27-143
| export default memo((props: Props) => { | ||
| const { touchAction } = props; | ||
| const [loading, setLoading] = useState(false); | ||
| const viewer = useGlobalStore((s) => s.viewer); | ||
|
|
||
| const currentAgentTTS = useAgentStore((s) => agentSelectors.currentAgentTTS(s), isEqual); | ||
|
|
||
| if (!touchAction) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <ActionIcon | ||
| icon={loading ? Loader2 : PlayIcon} | ||
| spin={loading} | ||
| disable={loading} | ||
| title="播放" | ||
| key="play" | ||
| onClick={() => { | ||
| setLoading(true); | ||
| speakCharacter( | ||
| { | ||
| emotion: touchAction.emotion, | ||
| tts: { | ||
| ...currentAgentTTS, | ||
| message: touchAction.text, | ||
| }, | ||
| }, | ||
| viewer, | ||
| () => {}, | ||
| () => { | ||
| setLoading(false); | ||
| }, | ||
| ); | ||
| }} | ||
| /> | ||
| ); |
There was a problem hiding this comment.
The Play component is well-implemented with clear separation of concerns. It handles loading state and uses the speakCharacter function effectively. However, the empty function in the speakCharacter call should ideally have some implementation or be removed if not needed.
- () => {},
+ // Implement or remove this function based on the requirementCommittable suggestion was skipped due low confidence.
| setOpen(false); | ||
| const values = form.getFieldsValue(); | ||
| if (isEdit) { | ||
| updateTouchAction(touchArea, index!, values); |
There was a problem hiding this comment.
Avoid using non-null assertions as they can lead to runtime errors if assumptions about non-nullability prove incorrect.
- updateTouchAction(touchArea, index!, values);
+ if (index !== undefined) {
+ updateTouchAction(touchArea, index, values);
+ }Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| updateTouchAction(touchArea, index!, values); | |
| if (index !== undefined) { | |
| updateTouchAction(touchArea, index, values); | |
| } |
| const resizeObserver = new ResizeObserver(() => { | ||
| setTimeout(() => this.resize(), 0); | ||
| }); | ||
|
|
||
| resizeObserver.observe(parentElement!); |
There was a problem hiding this comment.
Use of ResizeObserver for handling resizing is efficient. Consider handling potential null cases instead of using non-null assertions.
- resizeObserver.observe(parentElement!);
+ if (parentElement) {
+ resizeObserver.observe(parentElement);
+ } else {
+ console.error('Parent element is not available for observing.');
+ }Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| const resizeObserver = new ResizeObserver(() => { | |
| setTimeout(() => this.resize(), 0); | |
| }); | |
| resizeObserver.observe(parentElement!); | |
| const resizeObserver = new ResizeObserver(() => { | |
| setTimeout(() => this.resize(), 0); | |
| }); | |
| if (parentElement) { | |
| resizeObserver.observe(parentElement); | |
| } else { | |
| console.error('Parent element is not available for observing.'); | |
| } |
| import { TouchActionType, touchReducer } from '@/store/agent/reducers/touch'; | ||
| import { Agent, AgentMeta } from '@/types/agent'; | ||
| import { TouchAction, TouchAreaEnum } from '@/types/touch'; |
There was a problem hiding this comment.
Addition of touch action management methods enhances the agent's configurability.
Would you like me to help by adding unit tests for these new functionalities?
Also applies to: 34-39, 56-56, 69-69, 97-102, 212-220
| export const touchReducer = ( | ||
| state: TouchActionConfig, | ||
| action: TouchActionType, | ||
| ): TouchActionConfig => { | ||
| switch (action.type) { | ||
| case 'DELETE_TOUCH_ACTION': { | ||
| return produce(state, (draft) => { | ||
| const { index, touchArea } = action.payload; | ||
| draft[touchArea].splice(index, 1); | ||
| }); | ||
| } | ||
| case 'UPDATE_TOUCH_ACTION': { | ||
| return produce(state, (draft) => { | ||
| const { index, touchArea, action: newAction } = action.payload; | ||
| draft[touchArea][index] = newAction; | ||
| }); | ||
| } | ||
| case 'CREATE_TOUCH_ACTION': { | ||
| return produce(state, (draft) => { | ||
| const { touchArea, action: newAction } = action.payload; | ||
| draft[touchArea].push(newAction); | ||
| }); | ||
| } | ||
| default: { | ||
| return produce(state, () => []); | ||
| } | ||
| } |
There was a problem hiding this comment.
The touchReducer is well-structured using immer for immutable state updates. The cases for creating, updating, and deleting touch actions are clearly handled. However, the default case in the reducer should not return an empty array as it might reset the state unexpectedly.
- return produce(state, () => []);
+ return state; // Preserve the current state by defaultCommittable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| export const touchReducer = ( | |
| state: TouchActionConfig, | |
| action: TouchActionType, | |
| ): TouchActionConfig => { | |
| switch (action.type) { | |
| case 'DELETE_TOUCH_ACTION': { | |
| return produce(state, (draft) => { | |
| const { index, touchArea } = action.payload; | |
| draft[touchArea].splice(index, 1); | |
| }); | |
| } | |
| case 'UPDATE_TOUCH_ACTION': { | |
| return produce(state, (draft) => { | |
| const { index, touchArea, action: newAction } = action.payload; | |
| draft[touchArea][index] = newAction; | |
| }); | |
| } | |
| case 'CREATE_TOUCH_ACTION': { | |
| return produce(state, (draft) => { | |
| const { touchArea, action: newAction } = action.payload; | |
| draft[touchArea].push(newAction); | |
| }); | |
| } | |
| default: { | |
| return produce(state, () => []); | |
| } | |
| } | |
| export const touchReducer = ( | |
| state: TouchActionConfig, | |
| action: TouchActionType, | |
| ): TouchActionConfig => { | |
| switch (action.type) { | |
| case 'DELETE_TOUCH_ACTION': { | |
| return produce(state, (draft) => { | |
| const { index, touchArea } = action.payload; | |
| draft[touchArea].splice(index, 1); | |
| }); | |
| } | |
| case 'UPDATE_TOUCH_ACTION': { | |
| return produce(state, (draft) => { | |
| const { index, touchArea, action: newAction } = action.payload; | |
| draft[touchArea][index] = newAction; | |
| }); | |
| } | |
| case 'CREATE_TOUCH_ACTION': { | |
| return produce(state, (draft) => { | |
| const { touchArea, action: newAction } = action.payload; | |
| draft[touchArea].push(newAction); | |
| }); | |
| } | |
| default: { | |
| return state; // Preserve the current state by default | |
| } | |
| } | |
| } |
| @@ -1,8 +1,8 @@ | |||
| import { OPENAI_API_KEY, OPENAI_END_POINT } from '@/constants/openai'; | |||
| import { speakCharacter } from '@/features/messages/speakCharacter'; | |||
| import { useGlobalStore } from '@/store/global'; | |||
There was a problem hiding this comment.
The use of any in the createHeader function should be replaced with a more specific type to improve type safety.
- const createHeader = (header?: any) => {
+ const createHeader = (header?: Record<string, string>) => {Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| import { useGlobalStore } from '@/store/global'; | |
| import { useGlobalStore } from '@/store/global'; | |
| const createHeader = (header?: Record<string, string>) => { | |
| // function implementation | |
| }; |
|
❤️ Great PR @rdmclin2 ❤️ |
|
🎉 This PR is included in version 0.9.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
💻 变更类型 | Change Type
🔀 变更说明 | Description of Change
📝 补充信息 | Additional Information
Summary by CodeRabbit
New Features
Bug Fixes
toggleVoicefunction call for voice control functionality.Improvements
Refactor
ResizeObserverfor better performance.Style
Chores
console.logstatements for cleaner code.