Update code comments and translations
This commit is contained in:
smallstone
parent
8172d7c38b
commit
4c17f31391
@ -13,7 +13,7 @@
|
||||
// 1. 打开设置
|
||||
// 2. 启动 ask code 安装
|
||||
// 3. 设置 access key
|
||||
- featureToggles ？？
|
||||
- featureToggles // 判断有没有 ask code
|
||||
- isDevChatInstalled // 判断 ask code 是否安装
|
||||
|
||||
- historyMessages // 页面的历史消息
|
||||
|
||||
@ -307,7 +307,7 @@ class IdeaBridge {
|
||||
this.resviesContext(res);
|
||||
break;
|
||||
case "getSetting/response":
|
||||
this.resviceSettings(res);
|
||||
// this.resviceSettings(res);
|
||||
break;
|
||||
case "listTopics/response":
|
||||
this.resviceTopicList(res);
|
||||
@ -377,7 +377,6 @@ class IdeaBridge {
|
||||
}
|
||||
|
||||
resviceSettings(res) {
|
||||
console.log("resviceSettings res: ", res);
|
||||
// 用户设置的回调
|
||||
const setting = res.payload.setting;
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@ import Topic from "./Topic";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useMst } from "@/views/stores/RootStore";
|
||||
import { ChatContext } from "@/views/stores/InputStore";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
|
||||
const useStyles = createStyles((theme) => ({
|
||||
actionIcon: {
|
||||
@ -312,7 +312,7 @@ const InputMessage = observer((props: any) => {
|
||||
color: theme.colors.gray[6],
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
<Trans>{description}</Trans>
|
||||
</Text>
|
||||
</Stack>
|
||||
</Flex>
|
||||
|
||||
@ -3,7 +3,7 @@ import React from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import MessageMarkdown from "@/views/components/MessageMarkdown";
|
||||
import { useMst } from "@/views/stores/RootStore";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
|
||||
interface IProps {
|
||||
messageType: string;
|
||||
@ -23,12 +23,22 @@ const useStyles = createStyles((theme, options: any) => ({
|
||||
},
|
||||
}));
|
||||
|
||||
const trasnlateKey = (children: string) => {
|
||||
if (children && children.includes("You can configure DevChat from")) {
|
||||
return "devchat.help";
|
||||
}
|
||||
return "";
|
||||
};
|
||||
|
||||
const MessageBody = observer((props: IProps) => {
|
||||
const { children, messageType, activeStep = false, messageDone } = props;
|
||||
const { chat } = useMst();
|
||||
const { classes } = useStyles({
|
||||
chatPanelWidth: chat.chatPanelWidth,
|
||||
});
|
||||
const { t } = useTranslation();
|
||||
const transkey = trasnlateKey(children);
|
||||
|
||||
return messageType === "bot" ? (
|
||||
<MessageMarkdown
|
||||
className={classes.bodyWidth}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { Button, Anchor, Stack, Group, Box, createStyles } from "@mantine/core";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import rehypeRaw from "rehype-raw";
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||
import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism";
|
||||
import CodeButtons from "./CodeButtons";
|
||||
import Step from "./Step";
|
||||
@ -10,12 +10,12 @@ import LanguageCorner from "./LanguageCorner";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useMst } from "@/views/stores/RootStore";
|
||||
import { Message } from "@/views/stores/ChatStore";
|
||||
import messageUtil from '@/util/MessageUtil';
|
||||
import {fromMarkdown} from 'mdast-util-from-markdown';
|
||||
import {visit} from 'unist-util-visit';
|
||||
import messageUtil from "@/util/MessageUtil";
|
||||
import { fromMarkdown } from "mdast-util-from-markdown";
|
||||
import { visit } from "unist-util-visit";
|
||||
import ChatMark from "@/views/components/ChatMark";
|
||||
import { useSetState } from "@mantine/hooks";
|
||||
import { toMarkdown } from "mdast-util-to-markdown";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
|
||||
const useStyles = createStyles((theme) => ({
|
||||
link:{
|
||||
@ -29,28 +29,30 @@ const useStyles = createStyles((theme) => ({
|
||||
}
|
||||
}
|
||||
}));
|
||||
interface MessageMarkdownProps extends React.ComponentProps<typeof ReactMarkdown> {
|
||||
children: string,
|
||||
className: string,
|
||||
messageDone?: boolean,
|
||||
activeStep?: boolean
|
||||
interface MessageMarkdownProps
|
||||
extends React.ComponentProps<typeof ReactMarkdown> {
|
||||
children: string | any;
|
||||
className: string;
|
||||
messageDone?: boolean;
|
||||
temp?: boolean;
|
||||
}
|
||||
|
||||
type Step = {
|
||||
index: number,
|
||||
content: string;
|
||||
endsWithTripleBacktick: boolean;
|
||||
index: number;
|
||||
content: string;
|
||||
endsWithTripleBacktick: boolean;
|
||||
};
|
||||
|
||||
function parseMetaData(string) {
|
||||
const regexp = /((?<k1>(?!=)\S+)=((?<v1>(["'`])(.*?)\5)|(?<v2>\S+)))|(?<k2>\S+)/g;
|
||||
const io = (string ?? '').matchAll(regexp);
|
||||
const regexp =
|
||||
/((?<k1>(?!=)\S+)=((?<v1>(["'`])(.*?)\5)|(?<v2>\S+)))|(?<k2>\S+)/g;
|
||||
const io = (string ?? "").matchAll(regexp);
|
||||
|
||||
return new Map(
|
||||
[...io]
|
||||
.map((item) => item?.groups)
|
||||
.map(({ k1, k2, v1, v2 }) => [k1 ?? k2, v1 ?? v2]),
|
||||
);
|
||||
return new Map(
|
||||
[...io]
|
||||
.map((item) => item?.groups)
|
||||
.map(({ k1, k2, v1, v2 }) => [k1 ?? k2, v1 ?? v2])
|
||||
);
|
||||
}
|
||||
|
||||
const MessageMarkdown = observer((props: MessageMarkdownProps) => {
|
||||
@ -63,18 +65,18 @@ const MessageMarkdown = observer((props: MessageMarkdownProps) => {
|
||||
const [chatmarkValues,setChatmarkValues] = useSetState({});
|
||||
const {classes} = useStyles();
|
||||
|
||||
const handleExplain = (value: string | undefined) => {
|
||||
console.log(value);
|
||||
switch (value) {
|
||||
case "#ask_code":
|
||||
chat.addMessages([
|
||||
Message.create({
|
||||
type: 'user',
|
||||
message: 'Explain /ask-code'
|
||||
}),
|
||||
Message.create({
|
||||
type: 'bot',
|
||||
message: `***/ask-code***
|
||||
const handleExplain = (value: string | undefined) => {
|
||||
console.log(value);
|
||||
switch (value) {
|
||||
case "#ask_code":
|
||||
chat.addMessages([
|
||||
Message.create({
|
||||
type: "user",
|
||||
message: "Explain /ask-code",
|
||||
}),
|
||||
Message.create({
|
||||
type: "bot",
|
||||
message: `***/ask-code***
|
||||
|
||||
Ask anything about your codebase and get answers from our AI agent.
|
||||
|
||||
@ -84,147 +86,198 @@ Sample questions:
|
||||
- Why does the lead time for changes sometimes show as null?
|
||||
- How is store.findAllAccounts implemented?
|
||||
- The recursive retriever currently drops any TextNodes and only queries the IndexNodes. It's a bug. How can we fix it?
|
||||
`
|
||||
}),
|
||||
]);
|
||||
break;
|
||||
case '#code':
|
||||
chat.addMessages([
|
||||
Message.create({
|
||||
type: 'user',
|
||||
message: 'Explain /code'
|
||||
}),
|
||||
Message.create({
|
||||
type: 'bot',
|
||||
message: `***/code***
|
||||
`,
|
||||
}),
|
||||
]);
|
||||
break;
|
||||
case "#code":
|
||||
chat.addMessages([
|
||||
Message.create({
|
||||
type: "user",
|
||||
message: "Explain /code",
|
||||
}),
|
||||
Message.create({
|
||||
type: "bot",
|
||||
message: `***/code***
|
||||
|
||||
Use this DevChat workflow to request code writing. Please input your specific requirements and supply the appropriate context for implementation. You can select the relevant code or files and right-click to "Add to DevChat". If you find the context is still insufficient, you can enhance my understanding of your code by providing class/function definitions of the selected code. To do this, click the "+" button for the selected code and choose "symbol definitions". Please note, it may take a few seconds for this information to appear in DevChat.
|
||||
`
|
||||
}),
|
||||
]);
|
||||
break;
|
||||
case '#commit_message':
|
||||
chat.addMessages([
|
||||
Message.create({
|
||||
type: 'user',
|
||||
message: 'Explain /commit_message'
|
||||
}),
|
||||
Message.create({
|
||||
type: 'bot',
|
||||
message: `***/commit_message***
|
||||
`,
|
||||
}),
|
||||
]);
|
||||
break;
|
||||
case "#commit_message":
|
||||
chat.addMessages([
|
||||
Message.create({
|
||||
type: "user",
|
||||
message: "Explain /commit_message",
|
||||
}),
|
||||
Message.create({
|
||||
type: "bot",
|
||||
message: `***/commit_message***
|
||||
|
||||
Use this DevChat workflow to request a commit message. Generally, you don't need to type anything else, but please give me the output of \`git diff\`. Of course, you don't need to manually execute the command and copy & paste its output. Simply click the "+" button and select \`git diff —cached\` to include only the staged changes, or \`git diff HEAD\` to include all changes.
|
||||
`
|
||||
}),
|
||||
]);
|
||||
break;
|
||||
case '#release_note':
|
||||
chat.addMessages([
|
||||
Message.create({
|
||||
type: 'user',
|
||||
message: 'Explain /release_note'
|
||||
}),
|
||||
Message.create({
|
||||
type: 'bot',
|
||||
message: `***/release_note***
|
||||
`,
|
||||
}),
|
||||
]);
|
||||
break;
|
||||
case "#release_note":
|
||||
chat.addMessages([
|
||||
Message.create({
|
||||
type: "user",
|
||||
message: "Explain /release_note",
|
||||
}),
|
||||
Message.create({
|
||||
type: "bot",
|
||||
message: `***/release_note***
|
||||
|
||||
Generate a professionally written and formatted release note in markdown with this workflow. I just need some basic information about the commits for the release. Add this to the context by clicking the "+" button and selecting \`git_log_releasenote\`. If the scope of commits differs from the default command, you can also select \`<custom command>\` and input a command line such as \`git log 579398b^..HEAD --pretty=format:"%h - %B"\` to include the commit 579398b (inclusive) up to the latest.
|
||||
`
|
||||
}),
|
||||
]);
|
||||
break;
|
||||
case "#settings":
|
||||
messageUtil.sendMessage({ command: 'doCommand', content: ['workbench.action.openSettings', 'DevChat'] });
|
||||
break;
|
||||
}
|
||||
chat.goScrollBottom();
|
||||
};
|
||||
const handleButton = (value: string | number | readonly string[] | undefined) => {
|
||||
switch (value) {
|
||||
case "settings": messageUtil.sendMessage({ command: 'doCommand', content: ['workbench.action.openSettings', 'DevChat'] }); break;
|
||||
case "setting_openai_key": messageUtil.sendMessage({ command: 'doCommand', content: ['DevChat.AccessKey.OpenAI'] }); break;
|
||||
case "setting_devchat_key": messageUtil.sendMessage({ command: 'doCommand', content: ['DevChat.AccessKey.DevChat'] }); break;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(()=>{
|
||||
let previousNode:any = null;
|
||||
let chatmarkCount = 0;
|
||||
visit(tree, function (node) {
|
||||
if (node.type === 'code') {
|
||||
// set meta data as props
|
||||
const metaData = parseMetaData(node.meta);
|
||||
let props = {...metaData};
|
||||
if(node.lang ==='chatmark' || node.lang ==='ChatMark'){
|
||||
props['index'] = chatmarkCount;
|
||||
} else if ((node.lang === 'yaml' || node.lang === 'YAML') && previousNode && previousNode.type === 'code' && previousNode.lang === 'chatmark') {
|
||||
setChatmarkValues({[`chatmark-${previousNode.data.hProperties.index}`]:node.value});
|
||||
}
|
||||
node.data={
|
||||
hProperties:{
|
||||
...props
|
||||
}
|
||||
};
|
||||
// record node and count data for next loop
|
||||
previousNode = node;
|
||||
if(node.lang ==='chatmark' || node.lang ==='ChatMark'){
|
||||
chatmarkCount++;
|
||||
}
|
||||
}
|
||||
`,
|
||||
}),
|
||||
]);
|
||||
break;
|
||||
case "#settings":
|
||||
messageUtil.sendMessage({
|
||||
command: "doCommand",
|
||||
content: ["workbench.action.openSettings", "DevChat"],
|
||||
});
|
||||
},[children]);
|
||||
break;
|
||||
}
|
||||
chat.goScrollBottom();
|
||||
};
|
||||
const handleButton = (
|
||||
value: string | number | readonly string[] | undefined
|
||||
) => {
|
||||
switch (value) {
|
||||
case "settings":
|
||||
messageUtil.sendMessage({
|
||||
command: "doCommand",
|
||||
content: ["workbench.action.openSettings", "DevChat"],
|
||||
});
|
||||
break;
|
||||
case "setting_openai_key":
|
||||
messageUtil.sendMessage({
|
||||
command: "doCommand",
|
||||
content: ["DevChat.AccessKey.OpenAI"],
|
||||
});
|
||||
break;
|
||||
case "setting_devchat_key":
|
||||
messageUtil.sendMessage({
|
||||
command: "doCommand",
|
||||
content: ["DevChat.AccessKey.DevChat"],
|
||||
});
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
return <ReactMarkdown
|
||||
{...props}
|
||||
remarkPlugins={[()=> (tree) =>{
|
||||
let stepCount = 0;
|
||||
let chatmarkCount = 0;
|
||||
let previousNode:any = null;
|
||||
visit(tree, function (node) {
|
||||
if (node.type === 'code') {
|
||||
// set meta data as props
|
||||
const metaData = parseMetaData(node.meta);
|
||||
let props = {...metaData};
|
||||
if(node.lang ==='step' || node.lang ==='Step'){
|
||||
props['index'] = stepCount;
|
||||
} else if(node.lang ==='chatmark' || node.lang ==='ChatMark'){
|
||||
props['id'] = `chatmark-${chatmarkCount}`;
|
||||
props['index'] = chatmarkCount;
|
||||
} else if ((node.lang === 'yaml' || node.lang === 'YAML') && previousNode && previousNode.type === 'code' && previousNode.lang === 'chatmark') {
|
||||
props['hidden'] = true;
|
||||
}
|
||||
node.data={
|
||||
hProperties:{
|
||||
...props
|
||||
}
|
||||
};
|
||||
// record node and count data for next loop
|
||||
previousNode = node;
|
||||
if(node.lang ==='chatmark' || node.lang ==='ChatMark'){
|
||||
chatmarkCount++;
|
||||
}
|
||||
if(node.lang ==='step' || node.lang ==='Step'){
|
||||
stepCount++;
|
||||
}
|
||||
}
|
||||
});
|
||||
}]}
|
||||
useEffect(() => {
|
||||
let previousNode: any = null;
|
||||
let chatmarkCount = 0;
|
||||
visit(tree, function (node) {
|
||||
if (node.type === "code") {
|
||||
// set meta data as props
|
||||
const metaData = parseMetaData(node.meta);
|
||||
let props = { ...metaData };
|
||||
if (node.lang === "chatmark" || node.lang === "ChatMark") {
|
||||
props["index"] = chatmarkCount;
|
||||
} else if (
|
||||
(node.lang === "yaml" || node.lang === "YAML") &&
|
||||
previousNode &&
|
||||
previousNode.type === "code" &&
|
||||
previousNode.lang === "chatmark"
|
||||
) {
|
||||
setChatmarkValues({
|
||||
[`chatmark-${previousNode.data.hProperties.index}`]: node.value,
|
||||
});
|
||||
}
|
||||
node.data = {
|
||||
hProperties: {
|
||||
...props,
|
||||
},
|
||||
};
|
||||
// record node and count data for next loop
|
||||
previousNode = node;
|
||||
if (node.lang === "chatmark" || node.lang === "ChatMark") {
|
||||
chatmarkCount++;
|
||||
}
|
||||
}
|
||||
});
|
||||
}, [children]);
|
||||
|
||||
rehypePlugins={[rehypeRaw]}
|
||||
components={{
|
||||
code({ node, inline, className, children, index, ...props }) {
|
||||
const trasnlateChildren = useMemo(() => {
|
||||
if (i18n && i18n.language === "zh") {
|
||||
// 目前只有中文需要单独翻译
|
||||
if (children) {
|
||||
if (children.includes("You can configure DevChat from")) {
|
||||
return t("devchat.help");
|
||||
}
|
||||
// DevChat key is missing from your environment or settings
|
||||
if (
|
||||
children.includes("DevChat key is missing from your environment ")
|
||||
) {
|
||||
return t("devchat.setkey");
|
||||
}
|
||||
}
|
||||
}
|
||||
return children;
|
||||
}, [children, i18n.language]);
|
||||
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
const value = String(children).replace(/\n$/, '');
|
||||
let lanugage = match && match[1];
|
||||
if (!lanugage) {
|
||||
lanugage = "unknow";
|
||||
}
|
||||
return (
|
||||
<ReactMarkdown
|
||||
{...props}
|
||||
remarkPlugins={[
|
||||
() => (tree) => {
|
||||
let stepCount = 1;
|
||||
let chatmarkCount = 0;
|
||||
let previousNode: any = null;
|
||||
visit(tree, function (node) {
|
||||
if (node.type === "code") {
|
||||
// set meta data as props
|
||||
const metaData = parseMetaData(node.meta);
|
||||
let props = { ...metaData };
|
||||
if (node.lang === "step" || node.lang === "Step") {
|
||||
props["index"] = stepCount;
|
||||
} else if (node.lang === "chatmark" || node.lang === "ChatMark") {
|
||||
props["id"] = `chatmark-${chatmarkCount}`;
|
||||
props["index"] = chatmarkCount;
|
||||
} else if (
|
||||
(node.lang === "yaml" || node.lang === "YAML") &&
|
||||
previousNode &&
|
||||
previousNode.type === "code" &&
|
||||
previousNode.lang === "chatmark"
|
||||
) {
|
||||
props["hidden"] = true;
|
||||
}
|
||||
node.data = {
|
||||
hProperties: {
|
||||
...props,
|
||||
},
|
||||
};
|
||||
// record node and count data for next loop
|
||||
previousNode = node;
|
||||
if (node.lang === "chatmark" || node.lang === "ChatMark") {
|
||||
chatmarkCount++;
|
||||
}
|
||||
if (node.lang === "step" || node.lang === "Step") {
|
||||
stepCount++;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
]}
|
||||
rehypePlugins={[rehypeRaw]}
|
||||
components={{
|
||||
code({ node, inline, className, children, index, ...props }) {
|
||||
const match = /language-(\w+)/.exec(className || "");
|
||||
const value = String(children).replace(/\n$/, "");
|
||||
let lanugage = match && match[1];
|
||||
if (!lanugage) {
|
||||
lanugage = "unknow";
|
||||
}
|
||||
|
||||
let wrapLongLines = false;
|
||||
if (lanugage === 'markdown' || lanugage === 'text') {
|
||||
wrapLongLines = true;
|
||||
}
|
||||
let wrapLongLines = false;
|
||||
if (lanugage === "markdown" || lanugage === "text") {
|
||||
wrapLongLines = true;
|
||||
}
|
||||
|
||||
if (lanugage === 'step' || lanugage === 'Step') {
|
||||
const status = activeStep && Number(index) === codes.length - 1 && lastNode.type === 'code' ? "running" : "done";
|
||||
@ -236,9 +289,9 @@ Generate a professionally written and formatted release note in markdown with th
|
||||
return <ChatMark value={chatmarkValue} messageDone={messageDone}>{value}</ChatMark>;
|
||||
}
|
||||
|
||||
if ((lanugage === 'yaml' || lanugage === 'YAML') && props.hidden) {
|
||||
return <></>;
|
||||
}
|
||||
if ((lanugage === "yaml" || lanugage === "YAML") && props.hidden) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
return !inline && lanugage ? (
|
||||
<div style={{ position: 'relative' }} className={classes.codeOverride}>
|
||||
|
||||
@ -7,5 +7,14 @@
|
||||
"User": "用户",
|
||||
"Ask DevChat a question or type ‘/’ for workflow": "向 DevChat 提问或输入 '/' 以查看工作流",
|
||||
"How do I use DevChat?": "如何使用 DevChat？",
|
||||
"balance": "您的余额为 {{formatedCurrency}}，登录 <4>web.devchat.ai</4> 以获得更多 tokens"
|
||||
"balance": "您的余额为 {{formatedCurrency}}，登录 <4>web.devchat.ai</4> 以获得更多 tokens",
|
||||
"devchat.help": "你想写一些代码还是对这个项目有疑问？只需右键单击您选择的文件或代码片段，然后将它们添加到 DevChat 中。请随时问我任何问题，或者让我帮你编码。<br> <br> 不要忘记检查输入左侧的“+”按钮，以添加更多上下文。要查看可以在上下文中运行的工作流列表，只需键入“/”。提示愉快！ <br> <br>首先，我可以为您做一些事情：<br> <br> [/code: 基于你的代码来写 prompt](#code) <br> [/commit_message: 根据代码更改编写提交消息](#commit_message) <br> <br> [/release_note: 根据您最近的提交来写提交说明](#release_note) <br> <br> [/ask-code: 询问任何关于您的代码库的信息，并从我们的人工智能代理那里获得答案](#ask_code) <br> <br>你可以点击[设置](#settings)来配置 DevChat",
|
||||
"devchat.setkey": "您的环境或设置中缺少 DevChat key。请输入您的 DevChat key，我会确保 DevChat 将会正常工作。<br> <br> <button value=\"setting_devchat_key\">设置 DevChat key</button>",
|
||||
"Is DevChat Access Key ready?": "是否已准备好 DevChat Access Key？",
|
||||
"Ask questions about the current project's codebase, which requires proactive acquisition of additional context information to answer.": "询问关于当前项目代码库的问题，这需要主动获取额外的上下文信息来回答。",
|
||||
"Generate code with a general template embedded into the prompt.": "使用嵌入到提示中的通用模板生成代码。",
|
||||
"Generate code with a Python-specific template embedded into the prompt.": "使用嵌入到提示中的 Python 特定模板生成代码。",
|
||||
"commit changes with commit message in english.": "使用英文提交更改。",
|
||||
"Generate a commit message for the given git diff.": "为给定的 git diff 生成提交消息。",
|
||||
"Generate a release note for the given commit log.": "为给定的提交日志生成发布说明。"
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user