Merge branch 'runjinz-chat-messages'

2023-05-06 00:41:05 +08:00 · 2023-05-06 00:41:05 +08:00 · 7352fb6fc7
commit 7352fb6fc7
parent 6eef4b2a78 dd3ac3dd7c
15 changed files with 1237 additions and 61 deletions
--- a/assets/clipboard.js
+++ b/assets/clipboard.js
@ -32,7 +32,7 @@ function initClipboard(codeBlocks, onApplyButtonClick, onApplyCodeButtonClick, o
      // Add 'Apply' button
      const applyButton = document.createElement('button');
      applyButton.classList.add('apply-button');
-      applyButton.innerText = 'Apply Patch';
+      applyButton.innerText = 'Show Diff';
      block.appendChild(applyButton);
  
      applyButton.addEventListener('click', () => {
--- a/instructions/commit_message/instCommitMessage.txt
+++ b/instructions/commit_message/instCommitMessage.txt
--- a/instructions/default/instCode.txt
+++ b/instructions/default/instCode.txt
--- a/instructions/default/instLangPython.txt
+++ b/instructions/default/instLangPython.txt
--- a/instructions/instCommon.txt
+++ b/instructions/instCommon.txt
@ -1 +0,0 @@
-You are a software developer assistant.
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -18,6 +18,41 @@
    "README.md"
  ],
  "contributes": {
+    "configuration": {
+      "title": "DevChat",
+      "properties": {
+        "DevChat.llmModel": {
+          "type": "string",
+          "default": "OpenAI",
+          "enum": ["OpenAI"],
+          "description": "Select whose llm to use."
+        },
+        "DevChat.OpenAI.model": {
+          "type": "string",
+          "default": "gpt-4",
+          "description": "Specify llm model",
+          "when": "DevChat.llmModel == 'OpenAI'"
+        },
+        "DevChat.OpenAI.temperature": {
+          "type": "number",
+          "default": 0.2,
+          "description": "Specify llm temperature",
+          "when": "DevChat.llmModel == 'OpenAI'"
+        },
+        "DevChat.OpenAI.stream": {
+          "type": "boolean",
+          "default": true,
+          "description": "Specify llm stream",
+          "when": "DevChat.llmModel == 'OpenAI'"
+        },
+        "DevChat.OpenAI.apiKey": {
+          "type": "string",
+          "default": "",
+          "description": "Open API Key",
+          "when": "DevChat.llmModel == 'OpenAI'"
+        }
+      }
+    },
    "views": {
      "explorer": [
        {
@ -139,6 +174,7 @@
    "nonce": "^1.0.4",
    "openai": "^3.2.1",
    "quote": "^0.4.0",
+    "react-remark": "^2.1.0",
    "shell-escape": "^0.2.0",
    "uuid": "^9.0.0"
  }
--- a/src/applyCode.ts
+++ b/src/applyCode.ts
@ -1,4 +1,6 @@
 const vscode = require('vscode');
+import * as path from 'path';
+import { createTempSubdirectory } from './commonUtil';


 export async function applyCodeFile(text: string) {
@ -23,7 +25,7 @@ export async function applyCodeFile(text: string) {
    });
  }

-async function applyCode(text: string) {
+export async function applyCode(text: string) {
    if (vscode.window.visibleTextEditors.length > 1) {
        vscode.window.showErrorMessage(`There are more then one visible text editors. Please close all but one and try again.`);
        return;
@ -43,4 +45,43 @@ async function applyCode(text: string) {
    });
  }

-  export default applyCode;
+export  async function diffView(code: string) {
+    if (vscode.window.visibleTextEditors.length > 1) {
+        vscode.window.showErrorMessage(`There are more then one visible text editors. Please close all but one and try again.`);
+        return;
+    }
+
+    const editor = vscode.window.visibleTextEditors[0];
+    if (!editor) {
+      return;
+    }
+
+    const selectedText = editor.document.getText(editor.selection);
+
+    const curFile = editor.document.fileName;
+    
+    // get file name from fileSelected
+    const fileName = path.basename(curFile);
+
+    // create temp directory and file
+    const tempDir = await createTempSubdirectory('devchat/context');
+    const tempFile = path.join(tempDir, fileName);
+
+    // save code to temp file
+    await vscode.workspace.fs.writeFile(vscode.Uri.file(tempFile), Buffer.from(code));
+
+    if (selectedText) {
+      // create temp directory and file
+      const tempDir = await createTempSubdirectory('devchat/context');
+      const tempSelectCodeFile = path.join(tempDir, fileName);
+
+      // save code to temp file
+      await vscode.workspace.fs.writeFile(vscode.Uri.file(tempSelectCodeFile), Buffer.from(selectedText));
+
+      // open diff view
+      vscode.commands.executeCommand('vscode.diff', vscode.Uri.file(tempSelectCodeFile), vscode.Uri.file(tempFile), 'Diff View');
+    } else {
+      // open diff view
+      vscode.commands.executeCommand('vscode.diff', vscode.Uri.file(curFile), vscode.Uri.file(tempFile), 'Diff View');
+    }
+  }
--- a/src/commitMessageCommand.ts
+++ b/src/commitMessageCommand.ts
@ -44,15 +44,22 @@ async function writeDiffFile(diff_file: string) {

 export const commitMessageCommand: Command = {
  name: 'commitMessageCommand',
-  pattern: 'git: commit message',
+  pattern: 'commit_meesage',
  description: 'commit message for changes',
  handler: async (userInput: string) => {
    const tempDir = createTempSubdirectory('devchat/context');

-    // 创建临时目录
-    const diff_file = path.join(tempDir, 'diff_output.txt');
-    await writeDiffFile(diff_file);
+    // // 创建临时目录
+    // const diff_file = path.join(tempDir, 'diff_output.txt');
+    // await writeDiffFile(diff_file);

-    return `[context|${diff_file}] Write a commit message`;
+    // return `[context|${diff_file}] Write a commit message`;
+
+    const workspaceDir = vscode.workspace.workspaceFolders?.[0].uri.fsPath;
+    if (workspaceDir) {
+        const commitmessageInstruction = path.join(workspaceDir, '.chat', 'instructions', 'commit_message', 'instCommitMessage.txt');
+        return `[instruction|${commitmessageInstruction}] Write a commit message`;
+    }
+    return 'Write a commit message';
  },
 };
--- a/src/devchat.ts
+++ b/src/devchat.ts
@ -5,6 +5,7 @@ import { promisify } from "util";
 import * as vscode from 'vscode';
 import * as dotenv from 'dotenv';
 import * as path from 'path';
+import * as fs from 'fs';

 const spawnAsync = async (command: string, args: string[], options: any, onData: (data: string) => void): Promise<{code: number, stdout: string; stderr: string }> => {
  return new Promise((resolve, reject) => {
@ -82,7 +83,28 @@ class DevChat {
      args.push(content)
    
      const workspaceDir = vscode.workspace.workspaceFolders?.[0].uri.fsPath;
-      const openaiApiKey = process.env.OPENAI_API_KEY;
+      // const openaiApiKey = process.env.OPENAI_API_KEY;
+
+      const openaiApiKey = vscode.workspace.getConfiguration('DevChat').get('OpenAI.apiKey');
+
+      const openaiModel = vscode.workspace.getConfiguration('DevChat').get('OpenAI.model');
+      const openaiTemperature = vscode.workspace.getConfiguration('DevChat').get('OpenAI.temperature');
+      const openaiStream = vscode.workspace.getConfiguration('DevChat').get('OpenAI.stream');
+      const llmModel = vscode.workspace.getConfiguration('DevChat').get('llmModel');
+
+      const devchatConfig = {                                                                                                                              
+        llm: llmModel,                                                                                                           
+        OpenAI: {                                                                                                                
+            model: openaiModel,                                                                                                      
+            temperature: openaiTemperature,                                                                                                    
+            stream: openaiStream                                                                                                         
+        }                                                                                                                          
+      }
+      // write to config file
+      const configPath = path.join(workspaceDir!, '.chatconfig.json');
+      // write devchatConfig to configPath
+      const configJson = JSON.stringify(devchatConfig, null, 2);
+      fs.writeFileSync(configPath, configJson);

      try {
        const {code, stdout, stderr } = await spawnAsync('devchat', args, {
--- a/src/messageHandler.ts
+++ b/src/messageHandler.ts
@ -6,7 +6,7 @@ import * as path from 'path';
 import { promisify } from 'util';
 import DevChat, { LogOptions } from './devchat';
 import DtmWrapper from './dtm';
-import applyCode, {applyCodeFile} from './applyCode';
+import {applyCodeFile, diffView, applyCode} from './applyCode';

 import './loadCommands';
 import './loadContexts'
@ -87,7 +87,7 @@ function getInstructionFiles(): string[] {
  const instructionFiles: string[] = [];
  const workspaceDir = vscode.workspace.workspaceFolders?.[0].uri.fsPath;
  if (workspaceDir) {
-    const chatInstructionsPath = path.join(workspaceDir, '.chat', 'instructions');
+    const chatInstructionsPath = path.join(workspaceDir, '.chat', 'instructions', 'default');
    try {
      // 读取 chatInstructionsPath 目录下的所有文件和目录
      const files = fs.readdirSync(chatInstructionsPath);
@ -126,6 +126,9 @@ async function handleMessage(
      }

      chatOptions.header = getInstructionFiles();
+      if (parsedMessage.instruction.length > 0) {
+        chatOptions.header = parsedMessage.instruction;
+      }

      if (parsedMessage.reference.length > 0) {
        chatOptions.reference = parsedMessage.reference;
@ -147,20 +150,12 @@ async function handleMessage(
      const logEntries = await devChat.log(logOptions);
      panel.webview.postMessage({ command: 'loadHistoryMessages', entries: logEntries });
      return;
+    case 'show_diff':
+      diffView(message.content);
+      return;
+    // TODO: remove block_apply
    case 'block_apply':
-      const tempPatchFile = await saveTempPatchFile(message.content);
-      try {
-        const patchResult = await dtmWrapper.patch(tempPatchFile);
-        await deleteTempPatchFile(tempPatchFile);
-        if (patchResult.status === 0) {
-          vscode.window.showInformationMessage('Patch applied successfully.');
-        } else {
-          vscode.window.showErrorMessage(`Error applying patch: ${patchResult.message} ${patchResult.log}`);
-        }
-      } catch (error) {
-        await deleteTempPatchFile(tempPatchFile);
-        vscode.window.showErrorMessage(`Error applying patch: ${error}`);
-      }
+      diffView(message.content);
      return;
    case 'code_apply':
      await applyCode(message.content);
--- a/src/utils/MessageUtil.ts
+++ b/src/utils/MessageUtil.ts
@ -0,0 +1,45 @@
+
+// @ts-ignore
+const vscodeApi = window.acquireVsCodeApi();
+
+class MessageUtil {
+  handlers: { [x: string]: any; };
+  constructor() {
+    this.handlers = {};
+  }
+
+  // Register a message handler for a specific message type
+  registerHandler(messageType: string, handler: { (message: { text: string; }): void; (message: { text: string; }): void; }) {
+    if (!this.handlers[messageType]) {
+      this.handlers[messageType] = [];
+    }
+    this.handlers[messageType].push(handler);
+  }
+
+  // Unregister a message handler for a specific message type
+  unregisterHandler(messageType: string | number, handler: any) {
+    if (this.handlers[messageType]) {
+      this.handlers[messageType] = this.handlers[messageType].filter(
+        (h: any) => h !== handler
+      );
+    }
+  }
+
+  // Handle a received message
+  handleMessage(message: { command: string | number; }) {
+    console.log("handleMessage", message);
+    const handlers = this.handlers[message.command];
+    if (handlers) {
+      handlers.forEach((handler: (arg0: { command: string | number; }) => any) => handler(message));
+    }
+  }
+
+  // Send a message to the VSCode API
+  sendMessage(message: { command: string; text: string; }) {
+    console.log("sendMessage", message);
+    vscodeApi.postMessage(message);
+  }
+}
+
+// Export the MessageUtil class as a module
+export default MessageUtil;
--- a/src/views/ChatPanel.tsx
+++ b/src/views/ChatPanel.tsx
@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Container } from '@mantine/core';
+import { Avatar, Container, Divider, Flex, Grid, Stack, TypographyStylesProvider } from '@mantine/core';
 import { Input, Tooltip } from '@mantine/core';
 import { List } from '@mantine/core';
 import { ScrollArea } from '@mantine/core';
@ -8,8 +8,11 @@ import { createStyles } from '@mantine/core';
 import { ActionIcon } from '@mantine/core';
 import { Menu, Button, Text } from '@mantine/core';
 import { useViewportSize } from '@mantine/hooks';
-import { IconSend, IconSquareRoundedPlus } from '@tabler/icons-react';
+import { IconEdit, IconRobot, IconSend, IconSquareRoundedPlus, IconUser } from '@tabler/icons-react';
 import { IconSettings, IconSearch, IconPhoto, IconMessageCircle, IconTrash, IconArrowsLeftRight } from '@tabler/icons-react';
+import { Prism } from '@mantine/prism';
+import { useRemark } from 'react-remark';
+import MessageUtil from '../utils/MessageUtil';

 const useStyles = createStyles((theme, _params, classNames) => ({
    panel: {
@ -34,17 +37,40 @@ const useStyles = createStyles((theme, _params, classNames) => ({
        fontSize: '0.8rem',
        color: theme.colors.gray[6],
    },
+    responseContent: {
+        marginTop: 8,
+        marginLeft: 0,
+        marginRight: 0,
+    },
    icon: {
        pointerEvents: 'all',
    },
+    avatar: {
+        marginTop: 8,
+        marginLeft: 8,
+    },
+    messageBody: {
+    },
 }));

 const chatPanel = () => {

+    const [reactContent, setMarkdownSource] = useRemark();
    const [opened, setOpened] = useState(false);
+    const [input, setInput] = useState('');
    const [commandOpened, setCommandOpened] = useState(false);
    const { classes } = useStyles();
    const { height, width } = useViewportSize();
+    const messageUtil = new MessageUtil();
+
+    const demoCode = `import { Button } from '@mantine/core';
+    function Demo() {
+    return <Button>Hello</Button>
+    }`;
+
+    setMarkdownSource(`# code block
+    print '3 backticks or'
+    print 'indent 4 spaces'`);

    const handlePlusBottonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
        setOpened(!opened);
@ -53,26 +79,89 @@ const chatPanel = () => {
    const handleContainerClick = (event: React.MouseEvent<HTMLDivElement>) => {
        if (opened) { setOpened(false); }
    };
+    const handleSendClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        const message = input;
+        if (message) {
+            // Add the user's message to the chat UI
+            // addMessageToUI('user', message);
+
+            // Clear the input field
+            event.currentTarget.value = '';
+
+            // Process and send the message to the extension
+            messageUtil.sendMessage({
+                command: 'sendMessage',
+                text: message
+            });
+        }
+    };
+
+    // Register message handlers for receiving messages from the extension
+    messageUtil.registerHandler('receiveMessage', (message: { text: string; }) => {
+        console.log(`receiveMessage: ${message.text}`);
+        // Add the received message to the chat UI as a bot message
+        setMarkdownSource(message.text);
+    });
+
+    messageUtil.registerHandler('receiveMessagePartial', (message: { text: string; }) => {
+        console.log(`receiveMessagePartial: ${message.text}`);
+        // Add the received message to the chat UI as a bot message
+        setMarkdownSource(message.text);
+    });
+
+
    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const value = event.target.value
+        const value = event.target.value;
        // if value start with '/' command show menu
        if (value.startsWith('/')) {
            setCommandOpened(true);
        } else {
            setCommandOpened(false);
        }
-    }
+        setInput(value);
+    };

    return (
        <Container className={classes.panel} onClick={handleContainerClick}>
            <ScrollArea h={height - 70} type="never">
-                <List>
-                    <List.Item>Clone or download repository from GitHub</List.Item>
-                    <List.Item>Install dependencies with yarn</List.Item>
-                    <List.Item>To start development server run npm start command</List.Item>
-                    <List.Item>Run tests to make sure your changes do not break the build</List.Item>
-                    <List.Item>Submit a pull request once you are done</List.Item>
-                </List>
+                <Flex
+                    mih={50}
+                    gap="md"
+                    justify="flex-start"
+                    align="flex-start"
+                    direction="row"
+                    wrap="wrap"
+                    className={classes.messageBody}
+                >
+                    <Avatar color="indigo" size='md' radius="xl" className={classes.avatar}>
+                        <IconUser size="1.5rem" />
+                    </Avatar>
+                    <Container className={classes.responseContent}>
+                        <Text>
+                            Write a hello world, and explain it.
+                        </Text>
+                    </Container>
+                    {/* <ActionIcon>
+                        <IconEdit size="1.5rem" />
+                    </ActionIcon> */}
+                </Flex>
+                <Divider my="sm" label="Mar 4, 2023" labelPosition="center" />
+                <Flex
+                    mih={50}
+                    gap="md"
+                    justify="flex-start"
+                    align="flex-start"
+                    direction="row"
+                    wrap="wrap"
+                    className={classes.messageBody}
+                >
+                    <Avatar color="blue" size='md' radius="xl" className={classes.avatar}>
+                        <IconRobot size="1.5rem" />
+                    </Avatar>
+                    <Container className={classes.responseContent}>
+                        {reactContent}
+                    </Container>
+                </Flex>
            </ScrollArea>
            <Menu id='plusMenu' shadow="md" width={200} opened={opened} onChange={setOpened} >
                <Menu.Dropdown className={classes.plusMenu}>
@ -154,7 +243,7 @@ const chatPanel = () => {
                    </ActionIcon>
                }
                rightSection={
-                    <ActionIcon>
+                    <ActionIcon onClick={handleSendClick}>
                        <IconSend size="1rem" />
                    </ActionIcon>
                }
--- a/src/views/index.tsx
+++ b/src/views/index.tsx
@ -1,10 +1,13 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { MantineProvider } from '@mantine/core';
 import App from './App';

-ReactDOM.render(
+const container = document.getElementById('app')!;
+const root = createRoot(container); // createRoot(container!) if you use TypeScript
+root.render(
    <MantineProvider withGlobalStyles withNormalizeCSS>
        <App />
-    </MantineProvider>,
-    document.getElementById('app'));
+    </MantineProvider>
+);
--- a/webpack.config.js
+++ b/webpack.config.js
@ -12,17 +12,16 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');

 /** @type WebpackConfig */
 const extensionConfig = {
+  name: 'vscode extension',
  target: 'node', // VS Code extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
  mode: 'none', // this leaves the source code as close as possible to the original (when packaging we set this to 'production')

-  entry: {
-    extension: './src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
-    index: './src/views/index.tsx'
-  },
+  entry: './src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
+
  output: {
    // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
    path: path.resolve(__dirname, 'dist'),
-    filename: '[name].js',
+    filename: 'extension.js',
    libraryTarget: 'commonjs2'
  },
  externals: {
@ -31,6 +30,51 @@ const extensionConfig = {
  },
  resolve: {
    // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
+    extensions: ['.ts', '.json']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                '@babel/preset-env',
+                '@babel/preset-react',
+                '@babel/preset-typescript'
+              ]
+            }
+          },
+          {
+            loader: 'ts-loader'
+          }
+        ]
+      },
+    ]
+  },
+  devtool: 'nosources-source-map',
+  infrastructureLogging: {
+    level: "log", // enables logging required for problem matchers
+  },
+  plugins: []
+};
+
+
+/** @type WebpackConfig */
+const webviewConfig = {
+  name: 'webview',
+  target: 'web',
+  mode: 'development',
+
+  entry: './src/views/index.tsx',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'index.js',
+  },
+  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json']
  },
  module: {
@ -56,8 +100,18 @@ const extensionConfig = {
      },
      {
        test: /\.jsx?$/,
-        use: 'babel-loader',
        exclude: /node_modules/,
+        use: [{
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              [
+                '@babel/preset-env',
+                '@babel/preset-react',
+              ],
+            ]
+          },
+        }]
      },
      {
        test: /\.css$/i,
@ -94,9 +148,9 @@ const extensionConfig = {
      }
    ]
  },
-  devtool: 'nosources-source-map',
+  devtool: 'source-map',
  infrastructureLogging: {
-    level: "log", // enables logging required for problem matchers
+    level: "log",
  },
  plugins: [
    // generate an HTML file that includes the extension's JavaScript file
@ -109,12 +163,9 @@ const extensionConfig = {
      patterns: [
        { from: 'assets', to: 'assets' },
      ],
-    }),
-    // define global variables
-    new DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ]
 };

-module.exports = [extensionConfig];
+
+module.exports = [extensionConfig, webviewConfig];