From 4c17f31391b479a30456392c564c05c8efbea77b Mon Sep 17 00:00:00 2001 From: smallstone <> Date: Thu, 21 Dec 2023 16:40:23 +0800 Subject: [PATCH] Update code comments and translations --- src/util/bridge.md | 2 +- src/util/ideaBridge.ts | 3 +- src/views/components/InputMessage/index.tsx | 4 +- src/views/components/MessageBody/index.tsx | 12 +- .../components/MessageMarkdown/index.tsx | 387 ++++++++++-------- src/views/i18n/zh.json | 11 +- 6 files changed, 245 insertions(+), 174 deletions(-) diff --git a/src/util/bridge.md b/src/util/bridge.md index 1777a76..623dd3e 100644 --- a/src/util/bridge.md +++ b/src/util/bridge.md @@ -13,7 +13,7 @@ // 1. 打开设置 // 2. 启动 ask code 安装 // 3. 设置 access key -- featureToggles ?? +- featureToggles // 判断有没有 ask code - isDevChatInstalled // 判断 ask code 是否安装 - historyMessages // 页面的历史消息 diff --git a/src/util/ideaBridge.ts b/src/util/ideaBridge.ts index 266249b..ea602c9 100644 --- a/src/util/ideaBridge.ts +++ b/src/util/ideaBridge.ts @@ -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; diff --git a/src/views/components/InputMessage/index.tsx b/src/views/components/InputMessage/index.tsx index 71bb64a..9d96f5d 100644 --- a/src/views/components/InputMessage/index.tsx +++ b/src/views/components/InputMessage/index.tsx @@ -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} + {description} diff --git a/src/views/components/MessageBody/index.tsx b/src/views/components/MessageBody/index.tsx index 66b875b..d1cc50d 100644 --- a/src/views/components/MessageBody/index.tsx +++ b/src/views/components/MessageBody/index.tsx @@ -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" ? ( ({ link:{ @@ -29,28 +29,30 @@ const useStyles = createStyles((theme) => ({ } } })); -interface MessageMarkdownProps extends React.ComponentProps { - children: string, - className: string, - messageDone?: boolean, - activeStep?: boolean +interface MessageMarkdownProps + extends React.ComponentProps { + 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 = /((?(?!=)\S+)=((?(["'`])(.*?)\5)|(?\S+)))|(?\S+)/g; - const io = (string ?? '').matchAll(regexp); + const regexp = + /((?(?!=)\S+)=((?(["'`])(.*?)\5)|(?\S+)))|(?\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 \`\` 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 (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 ( + (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 {value}; } - if ((lanugage === 'yaml' || lanugage === 'YAML') && props.hidden) { - return <>; - } + if ((lanugage === "yaml" || lanugage === "YAML") && props.hidden) { + return <>; + } return !inline && lanugage ? (
@@ -309,4 +362,4 @@ Generate a professionally written and formatted release note in markdown with th ; }); -export default MessageMarkdown; \ No newline at end of file +export default MessageMarkdown; diff --git a/src/views/i18n/zh.json b/src/views/i18n/zh.json index 5185425..d998559 100644 --- a/src/views/i18n/zh.json +++ b/src/views/i18n/zh.json @@ -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 以获得更多 tokens" + "balance": "您的余额为 {{formatedCurrency}},登录 <4>web.devchat.ai 以获得更多 tokens", + "devchat.help": "你想写一些代码还是对这个项目有疑问?只需右键单击您选择的文件或代码片段,然后将它们添加到 DevChat 中。请随时问我任何问题,或者让我帮你编码。

不要忘记检查输入左侧的“+”按钮,以添加更多上下文。要查看可以在上下文中运行的工作流列表,只需键入“/”。提示愉快!

首先,我可以为您做一些事情:

[/code: 基于你的代码来写 prompt](#code)
[/commit_message: 根据代码更改编写提交消息](#commit_message)

[/release_note: 根据您最近的提交来写提交说明](#release_note)

[/ask-code: 询问任何关于您的代码库的信息,并从我们的人工智能代理那里获得答案](#ask_code)

你可以点击[设置](#settings)来配置 DevChat", + "devchat.setkey": "您的环境或设置中缺少 DevChat key。请输入您的 DevChat key,我会确保 DevChat 将会正常工作。

", + "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.": "为给定的提交日志生成发布说明。" }