In this commit, we updated the ChatPanel component to clear the error message when generating a new response. This change ensures that any previous error messages are removed from the UI, providing a clean slate for the new response. The setHasError('') function call was added to the onClick event handler of the RegenerationButton component.
In this commit, we moved the RegenerationButton and StopButton components outside the chatPanel component and passed the onClick event handlers as props. This change improves the readability and maintainability of the code by separating the components and their logic.
In this commit, we updated the ChatPanel component to display error messages using the Alert component from the Mantine library. This change improves the user experience by providing a clear and consistent way to display error messages in the chat interface. The error message is now stored as a string in the hasError state, and the Alert component is conditionally rendered based on the presence of an error message.
In this commit, we simplified the width prop handling in the ChatPanel components by directly passing the width value instead of the entire chatContainerRect object. This change makes the code more readable and easier to maintain.
In this commit, we removed the unnecessary registed state from the ChatPanel component and improved the message handling by moving the messageUtil.registerHandler calls to the useEffect hook. This change simplifies the code and ensures that the handlers are registered only once during the component's lifecycle.
Created a new MessageContainer.tsx file and moved the MessageContainer component from ChatPanel/index.tsx to the new file.
Imported the MessageContainer component in ChatPanel/index.tsx and removed the previous inline implementation.
MessageContainer component handles the display and management of messages in the chat panel, including message avatars, message contexts, and message blinking.
Created a new CodeBlock.tsx file and moved the CodeBlock component from ChatPanel/index.tsx to the new file.
Imported the CodeBlock component in ChatPanel/index.tsx and removed the previous inline implementation.
CodeBlock component handles the display and management of code blocks in the chat panel, including language corner, code buttons, and syntax highlighting.
Extracted the InputMessage component from the chatPanel function in the ChatPanel/index.tsx file.
Replaced the previous inline implementation with the new InputMessage component.
InputMessage component handles the display and management of the input message area, including the command menu and context menu.
Extracted the InputContexts component from the chatPanel function in the ChatPanel/index.tsx file.
Replaced the previous inline implementation with the new InputContexts component.
InputContexts component handles the display and management of input contexts in the chat panel.
Extracted the RegenerationButton and StopButton components from the chatPanel function in the ChatPanel/index.tsx file.
Replaced the previous inline implementation with the new RegenerationButton and StopButton components.
RegenerationButton and StopButton components handle the regeneration and stopping of message generation, respectively.
Extracted the MessageContainer component from the chatPanel function in the ChatPanel/index.tsx file.
Replaced the previous inline implementation with the new MessageContainer component.
MessageContainer component includes MessageAvatar, MessageContext, and MessageBlink subcomponents.
Extracted the CodeButtons component from the chatPanel function in the ChatPanel/index.tsx file.
Replaced the previous inline implementation with the new CodeButtons component.
CodeButtons component includes CommitButton, DiffButton, CodeApplyButton, FileApplyButton, and CodeCopyButton.
Extracted the LanguageCorner component from the CodeBlock function in the ChatPanel/index.tsx file.
Replaced the previous inline implementation with the new LanguageCorner component.
Extracted the CodeBlock component from the chatPanel function in the ChatPanel/index.tsx file.
Replaced the previous inline implementation with the new CodeBlock component.
- Import IconRotateDot from @tabler/icons-react
- Add hasError state to track if an error occurred
- Update receiveMessage handler to set hasError state if message.isError is true
- Add regeneration button with IconRotateDot when hasError is true
- Add onClick handler for regeneration button to clear error and request regeneration
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.
