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.
This commit adds a new webpack configuration for the webview part of the project. It includes the necessary rules for transpiling and bundling the TypeScript and React code, as well as the CSS and image files. The new configuration is added to the existing configuration for the extension. The devtool option is changed to 'source-map' for better debugging experience.
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.
