- Added condition to check if `action.payload.hasDone` is true, then update the hash of the last two messages in `state.messages`.
- Fixed the `splice` method in `deleteMessage.fulfilled` to correctly remove the message from `state.messages`.
- Updated `stopGenerating` dispatch in `ChatPanel.tsx` to include the message in the payload.
- Modified the delete message action in `MessageHeader.tsx` to handle the case when `item.hash` is not present.
- Passed dynamic width from ChatPanel to CurrentMessage component.
- Imported Container from "@mantine/core" for better layout control in CurrentMessage.
- Added styling to the CurrentMessage component to handle dynamic width and improve text display.
- Added 'whiteSpace: 'break-spaces'' to preserve white spaces and line breaks in the preformatted text.
- Modified the stopGenerating action to accept a payload indicating if the task has been completed.
- Added a new state property 'hasDone' to track if a task has been completed.
- Updated the CurrentMessage component to handle the new 'hasDone' state and update the last message accordingly.
- Introduced a new action 'updateLastMessage' to update the last message in the state.
- Added a new state property 'lastMessage' to keep track of the last message.
- Refactored the CurrentMessage component to split the message into blocks for better rendering.
- Extracted current message handling logic into a new component, CurrentMessage.tsx.
- Removed redundant code and imports from ChatPanel.tsx.
- Removed MessageBlink component from MessageContainer.tsx as it's now part of CurrentMessage.tsx.
- Added import for CurrentMessage in ChatPanel.tsx.
- Removed unused selectors from ChatPanel.tsx.
- Simplified useEffect hooks in ChatPanel.tsx by moving some logic to CurrentMessage.tsx.
- Remove selectMessageCount, selectIsMiddle, and related useEffect in ChatPanel.tsx.
- Add selectPageIndex and selectIsLastPage to chatSlice.ts.
- Update fetchHistoryMessages to accept pageIndex parameter.
- Modify chatSlice to handle pageIndex and isLastPage states.
- Replace relative import paths with '@/...' alias in multiple files.
- Update tsconfig.json to include paths configuration.
- Add alias configuration to webpack.config.js.
- Added selectors for isTop, isBottom, and isMiddle in chatSlice.
- Removed scrollPosition and stopScrolling states from ChatPanel.
- Added onScrollPositionChange function to handle scroll events.
- Dispatch onMessagesTop, onMessagesBottom, and onMessagesMiddle actions based on scroll position.
- Remove messageUtil.sendMessage from ChatPanel.tsx.
- Add fetchCommandMenus to inputSlice using createAsyncThunk.
- Replace local commandMenus state with Redux store in InputMessage.tsx.
- Move context menu fetching to inputSlice using createAsyncThunk.
- Remove redundant message handler registration in InputMessage.tsx.
- Use fetched context menus from the Redux store.
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.
- Use VSCode theme variables for colors and fonts in App.tsx and ChatPanel.tsx
- Update background, foreground, and border colors for various components
- Update hover and disabled states for buttons and icons
- Change the keyboard shortcut for sending a message from Ctrl+Enter to Enter without Shift
- Update the placeholder text to remove the reference to the old shortcut
- Added a messageCount constant to limit the number of displayed messages
- Removed excess messages when the message length exceeds double the messageCount
- Ensured only the last 5 messages are loaded from the history
- Add a setTimeout function to scrollToBottom in useEffect to ensure smooth scrolling when ChatPanel is mounted.
- Adjust the height of the ScrollArea based on the generating state.
- Move the "Stop generating" button to a more appropriate location in the UI.
- Update the display property of the blinking cursor for better visibility.
Add a new message handler to load history messages when the ChatPanel component is mounted. The handler receives a list of message entries and appends them to the messageHandlers state. Each entry contains a hash, user, date, request, response, and context. The context is an array of objects with a content and role property, which is parsed and added to the messageHandlers state as well.
Also, add a useEffect hook to the ChatPanel component to call the new message handler when the component is mounted.
Add a button to stop generating messages during a dev chat session. The button is displayed when generating messages and stops the generation process when clicked. The button is represented by the IconPlayerStop icon from the Tabler Icons library. The button is disabled during message generation.
This commit adds the ability to commit code blocks with the commit message syntax highlighting. The commit button appears only when the code block is a commit message. The commit button sends the commit message content to the server. The commit button changes color to teal when the commit is successful.
Add focus to input when chat menu is opened to improve user experience. This commit modifies the onChange function in ChatPanel.tsx to set focus to the input field when the menu is opened.
Refactored `ChatPanel` to handle missing contexts by adding conditional rendering for the `Accordion` and `contexts` map. Also, added `pre` tag styling to the message content.
The user's message now includes a context object that contains the file and context information. This allows the extension to process the message more accurately. The context object is also displayed in the chat UI.
Added a context menu to DevChat that allows users to select code or file and right-click to add it as a context. The context is then added to the list of contexts in the chat panel.
Added a context menu to the ChatPanel component that allows users to quickly insert context-specific commands. The context menu is populated with items based on the `contexts` array.
Add a padding to the top of the chat container to prevent the first message from being hidden behind the input field. Also, focus on the input field when the chat panel mounts for better user experience.
- Remove unused CSS class
- Add dynamic height to chat container
- Add smooth scrolling to bottom when new messages are received
- Fix input field width to match container width
- Use Mantine's useResizeObserver hook to get input field width
- Remove console.log statements
Add useEffect hooks to display received messages in the chat UI as bot messages. Also, update the Input component to use Textarea and add the ability to send messages using Ctrl + Enter
Add a copy button to code blocks in ChatPanel.tsx. The copy button allows users to easily copy code snippets to their clipboard. The button is implemented using the CopyButton component from @mantine/core and the IconCopy and IconCheck components from @tabler/icons-react.
Add react-syntax-highlighter and react-markdown to package.json to enable syntax highlighting and markdown rendering in the chat panel.
Also, update ChatPanel.tsx to use ReactMarkdown instead of Remark for markdown rendering. Additionally, add SyntaxHighlighter from react-syntax-highlighter to render code blocks with syntax highlighting.
This commit adds message handling for sending and receiving messages between the chat panel and the extension. It also displays the messages in the chat panel. The messages are displayed as a list of messages, with each message containing an avatar and the message content. The message content is displayed using the `Remark` component from the `react-remark` library.
Create a singleton instance for MessageUtil to avoid multiple instances of the class. The instance is created only once and returned on subsequent calls. This commit also removes the creation of a new instance of MessageUtil in ChatPanel.tsx.
Create a MessageUtil class to handle sending and receiving messages between the extension and the chat panel. Add a function to send messages to the extension and register message handlers to receive messages from the extension. When the user clicks the send button, send the message to the extension. When the extension sends a message, add it to the chat UI as a bot message.
Add avatars and icons to the chat panel to improve the user interface. Also, add a demo code block to show how to use the Button component. The demo code block is currently commented out.
Add a command menu to ChatPanel that allows users to access DevChat bots and run context commands. The command menu is displayed when the user types a command that starts with '/'. The menu includes commands for generating or updating code, writing a commit message, and writing a doc for reference, wiki, or discussion. The menu is styled using the existing ChatPanel styles.
Add a chat panel with a menu and input field for sending messages. The menu contains options for settings, messages, gallery, and search. The chat panel also includes a list of instructions and a button for adding new messages.
