Merge pull request #9 from devchat-ai/custom_buttons_text

Rankin Zheng · web-flow · commit 7336fb0545d0 · 2024-01-05T11:43:30.000+08:00
Custom buttons text
diff --git a/src/views/components/ChatMark/index.tsx b/src/views/components/ChatMark/index.tsx
@@ -57,9 +57,11 @@ interface Wdiget {
   value: string;
   title?: string;
   type: "editor" | "checkbox" | "radio" | "button" | "text";
+  submit?: string;
+  cancel?: string;
 }
 
-const ChatMark = ({ children, value, messageDone }) => {
+const ChatMark = ({ children, value, messageDone, submit = 'Submit', cancel = 'Cancel' }) => {
   const { classes } = useStyles();
   const [widgets, widgetsHandlers] = useListState<Wdiget>();
   const { chat } = useMst();
@@ -315,10 +317,10 @@ const ChatMark = ({ children, value, messageDone }) => {
           {renderWidgets(widgets)}
           <Box>
             <Button className={classes.submit} size="xs" onClick={handleSubmit}>
-              Submit
+              {submit}
             </Button>
             <Button className={classes.cancel} size="xs" onClick={handleCancel}>
-              Cancel
+              {cancel}
             </Button>
           </Box>
         </form>
diff --git a/src/views/components/MessageMarkdown/index.tsx b/src/views/components/MessageMarkdown/index.tsx
@@ -49,11 +49,18 @@ function parseMetaData(string) {
     /((?<k1>(?!=)\S+)=((?<v1>(["'`])(.*?)\5)|(?<v2>\S+)))|(?<k2>\S+)/g;
   const io = (string ?? "").matchAll(regexp);
 
-  return new Map(
+  const resultMap = new Map(
     [...io]
       .map((item) => item?.groups)
       .map(({ k1, k2, v1, v2 }) => [k1 ?? k2, v1 ?? v2])
   );
+
+  let props = {};
+  for (let [key, value] of resultMap) {
+    props[key] = value;
+  }
+
+  return props;
 }
 
 const MessageMarkdown = observer((props: MessageMarkdownProps) => {
@@ -63,9 +70,10 @@ const MessageMarkdown = observer((props: MessageMarkdownProps) => {
   const tree = fromMarkdown(children);
   const codes = tree.children.filter((node) => node.type === "code");
   const lastNode = tree.children[tree.children.length - 1];
-  const [chatmarkValues, setChatmarkValues] = useSetState({});
+  const [chatmarkProps, setChatmarkProps] = useSetState({});
   const { classes } = useStyles();
   const { i18n, t } = useTranslation();
+  const platform = process.env.platform;
 
   const handleExplain = (value: string | undefined) => {
     console.log(value);
@@ -171,24 +179,41 @@ Generate a professionally written and formatted release note in markdown with th
     }
   };
 
+  const openLink = (link) => {
+    messageUtil.sendMessage({
+      command: "openLink",
+      url: link,
+    });
+  };
+
   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 };
+        let props = {};
         if (node.lang === "chatmark" || node.lang === "ChatMark") {
           props["index"] = chatmarkCount;
+          const metaData = parseMetaData(node.meta);
+          setChatmarkProps({
+            [`chatmark-${chatmarkCount}`]: {
+              ...metaData,
+            },
+          });
         } else if (
           (node.lang === "yaml" || node.lang === "YAML") &&
           previousNode &&
           previousNode.type === "code" &&
           previousNode.lang === "chatmark"
         ) {
-          setChatmarkValues({
-            [`chatmark-${previousNode.data.hProperties.index}`]: node.value,
+          setChatmarkProps({
+            [`chatmark-${previousNode.data.hProperties.index}`]: {
+              ...chatmarkProps[
+                `chatmark-${previousNode.data.hProperties.index}`
+              ],
+              value: node.value,
+            },
           });
         }
         node.data = {
@@ -218,6 +243,13 @@ Generate a professionally written and formatted release note in markdown with th
         ) {
           return t("devchat.setkey");
         }
+        if (
+          children.includes(
+            "OPENAI_API_KEY is missing from your environment or settings"
+          )
+        ) {
+          return t("devchat.setOpenAIkey");
+        }
       }
     }
     return children;
@@ -234,8 +266,7 @@ Generate a professionally written and formatted release note in markdown with th
           visit(tree, function (node) {
             if (node.type === "code") {
               // set meta data as props
-              const metaData = parseMetaData(node.meta);
-              let props = { ...metaData };
+              let props = {};
               if (node.lang === "step" || node.lang === "Step") {
                 props["index"] = stepCount;
               } else if (node.lang === "chatmark" || node.lang === "ChatMark") {
@@ -296,9 +327,9 @@ Generate a professionally written and formatted release note in markdown with th
           }
 
           if (lanugage === "chatmark" || lanugage === "ChatMark") {
-            const chatmarkValue = chatmarkValues[`chatmark-${index}`];
+            const chatmarkValue = chatmarkProps[`chatmark-${index}`];
             return (
-              <ChatMark value={chatmarkValue} messageDone={messageDone}>
+              <ChatMark messageDone={messageDone} {...chatmarkValue}>
                 {value}
               </ChatMark>
             );
@@ -344,15 +375,20 @@ Generate a professionally written and formatted release note in markdown with th
                 "&:hover": {
                   backgroundColor: "#ED6A45",
                   opacity: 0.8,
+                  color: "#fff",
                 },
                 "&:focus": {
                   backgroundColor: "#ED6A45",
                   opacity: 0.8,
+                  color: "#fff",
                 },
               }}
               onClick={() => {
-                handleButton(value);
+                value === "get_devchat_key" && platform === "idea"
+                  ? openLink("https://web.devchat.ai")
+                  : handleButton(value);
               }}
+              {...props}
             >
               {children}
             </Button>
diff --git a/src/views/i18n/zh.json b/src/views/i18n/zh.json
@@ -8,8 +8,9 @@
   "Ask DevChat a question or type ‘/’ for workflow": "向 DevChat 直接提问或输入 '/' 以查看可用的工作流",
   "How do I use DevChat?": "如何使用 DevChat？",
   "balance": "你的账户余额为 {{formatedCurrency}}，登录 <4>web.devchat.ai</4> 获得更多 tokens",
-  "devchat.help": "你想生成一些代码还是对这个项目有疑问？请首先右键单击相关的文件或代码片段，将它们添加到 DevChat 中作为上下文，然后在输入框中写下你的请求或问题，我将基于添加的上下文生成代码或回答你的问题。<br> <br> 你还可以点击输入框左侧的“+”按钮，查看更多添加上下文的快捷方法。此外，在输入框中键入“/”，DevChat 会列出可供使用的各类工作流，按 Tab 键或输入完整命令触发你需要的工作流。聊天愉快！ <br> <br>下面是一些工作流的示例：<br> <br> [/code: 基于你的提示词和上下文生成代码](#code) <br> [/commit_message: 根据加入上下文中的代码变更生成提交消息](#commit_message) <br> <br> [/release_note: 根据加入上下文中的提交历史生成提交说明](#release_note) <br> <br> [/ask-code: 询问任何关于当前代码库的信息，并从这位人工智能代理那里获得答案](#ask_code) <br> <br>你可以点击[设置](#settings)来配置 DevChat",
+  "devchat.help": "你想生成一些代码还是对这个项目有疑问？请首先右键单击相关的文件或代码片段，将它们添加到 DevChat 中作为上下文，然后在输入框中写下你的请求或问题，我将基于添加的上下文生成代码或回答你的问题。<br> <br> 你还可以点击输入框左侧的“+”按钮，查看更多添加上下文的快捷方法。此外，在输入框中键入“/”，DevChat 会列出可供使用的各类工作流，按 Tab 键或输入完整命令触发你需要的工作流。聊天愉快！ <br> <br>下面是一些工作流的示例：<br> <br> [/code: 基于你的提示词和上下文生成代码](#code) <br> <br> [/commit_message: 根据加入上下文中的代码变更生成提交消息](#commit_message) <br> <br> [/release_note: 根据加入上下文中的提交历史生成提交说明](#release_note) <br> <br> [/ask-code: 询问任何关于当前代码库的信息，并从这位人工智能代理那里获得答案](#ask_code) <br> <br>你可以点击[设置](#settings)来配置 DevChat",
   "devchat.setkey": "你的环境或设置中缺少 DevChat 访问密钥。请输入你的 DevChat 访问密钥，这样我就可以开始正常工作了。<br> <br> <button value=\"setting_devchat_key\">设置 DevChat 访问密钥</button>",
+  "devchat.setOpenAIkey": "你的环境或设置中缺少 OpenAI 访问密钥。请输入你的 OpenAI 或者 DevChat 访问密钥，这样我就可以开始正常工作了。<br> <br> <button value=\"get_devchat_key\">注册获取 DevChat 访问密钥</button> <button value=\"setting_devchat_key\">设置 DevChat 访问密钥</button> <button value=\"setting_devchat_key\">设置 OpenAI 访问密钥</button>",
   "Is DevChat Access Key ready?": "DevChat 访问密钥是否已经设置好？",
   "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.": "使用隐式嵌入到提示词中的通用模板生成代码。",
diff --git a/src/views/stores/ChatStore.ts b/src/views/stores/ChatStore.ts
@@ -155,9 +155,19 @@ ${
 You can configure DevChat from [Settings](#settings).`;
 
       const setKeyMessage = `
-DevChat key is missing from your environment or settings. Kindly input your DevChat key, and I'll ensure DevChat is all set for you.
+      OPENAI_API_KEY is missing from your environment or settings. Kindly input your DevChat key, and I'll ensure DevChat is all set for you.
 
+${process.env.platform === 'vscode'
+?`
+<button value="get_devchat_key" href="https://web.devchat.ai">Register DevChat key</button>
 <button value="setting_devchat_key">Set DevChat key</button>
+<button value="setting_openai_key">Set OpenAI key</button>
+`
+:`
+<button value="get_devchat_key" href="https://web.devchat.ai">Register DevChat key</button>
+<button value="setting_devchat_key">Set DevChat key</button>
+`}
+
 `;
 
       const setKeyUser = `Is DevChat Access Key ready?`;
