Add border radius to Accordion and Menu components to improve the UI. Also, add specific styles to the active and expanded states of the components. The changes were made in src/views/ChatPanel/index.tsx.
- Change Flex to Stack for better message layout
- Add avatar and name to each message
- Increase padding and change background color for better readability
Added a new avatar image and adjusted the layout of the chat panel to accommodate the new image. The new avatar image is now displayed for user messages. The layout of the chat panel has been adjusted to ensure that the new image is displayed correctly. The width of the chat panel has been set to the width of the container. The padding and margin of the chat panel have been adjusted to ensure that the new image is displayed correctly.
Add spacing of 5 between the chat panel controls and set the height of the controls to 30. Also, reduce the size of the action icon from lg to sm. Finally, change the shadow of the command menu from xs to sm.
Change the context menu icons for the git diff commands to match the correct command names. Replaced IconGitBranch with IconGitBranchChecked for 'git diff --cached' and replaced IconGitBranchChecked with IconGitBranch for 'git diff HEAD'.
This commit adds the `commandMenuIcon` function to the `ChatPanel` component in `index.tsx`. This function returns an icon based on the given pattern. The function is used to display different icons for different patterns in the command menu.
Add icons to the context menu items based on their names. The function contextMenuIcon() was added to the code to handle this. The function returns an icon based on the name of the context menu item.
The following icons were added: IconMouseRightClick, IconBook, IconGitBranch, IconGitBranchChecked, and IconShellCommand.
The code was also refactored to use the contextMenuIcon() function instead of the IconMessagePlus component.
- Update the avatar images to use SVG format
- Use file-loader instead of url-loader to load image assets
The commit updates the ChatPanel UI by replacing the avatar images with SVG format and using file-loader instead of url-loader to load image assets.
- Update avatar size to 'sm' and margin to {marginTop: 10, marginLeft: 3}
- Replace IconRobot and IconUser with avatarDevChat and avatarUser respectively
- Update gap between messages to 'xs'
- Update Divider margin to {my: 3}
This commit adds the ability to filter command menus based on user input and navigate through them using the up and down arrow keys. When a command is selected, it is inserted into the input field. The commit also removes the command menu rendering from the initial render and moves it to a useEffect hook.
This commit adds a popover to ChatPanel that contains a dropdown menu for commands and contexts. The dropdown menu can be opened by clicking on the ChatPanel's textarea. The dropdown menu contains a list of commands and contexts that can be clicked to insert them into the textarea. The popover also contains a tooltip that provides instructions on how to select code or file and right-click to access the context menu.
This commit adds the ability to track the scroll position of the chat panel and stop scrolling when the user scrolls up. It also includes a timer to automatically scroll to the bottom of the chat panel after a certain amount of time.
The ChatPanel.tsx file was moved to ChatPanel/index.tsx to better organize the project structure. The import statement for MessageUtil was also updated to reflect the new file path.
