From 00c45d305024301ffb4ec13e17ab5efadc6fe8e5 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Tue, 2 May 2023 14:49:40 +0800
Subject: [PATCH] feat(ai): add output apply

---
 .../com.msgbyte.ai-assistant/src/popover.tsx  | 54 +++++++++++++------
 .../com.msgbyte.ai-assistant/src/translate.ts |  4 ++
 2 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/client/web/plugins/com.msgbyte.ai-assistant/src/popover.tsx b/client/web/plugins/com.msgbyte.ai-assistant/src/popover.tsx
index eab5ca86..509759af 100644
--- a/client/web/plugins/com.msgbyte.ai-assistant/src/popover.tsx
+++ b/client/web/plugins/com.msgbyte.ai-assistant/src/popover.tsx
@@ -5,6 +5,8 @@ import {
   LoadingSpinner,
   useChatInputActionContext,
   Tag,
+  Button,
+  Divider,
 } from '@capital/component';
 import axios from 'axios';
 import styled from 'styled-components';
@@ -40,7 +42,7 @@ const ActionButton = styled.div`
 export const AssistantPopover: React.FC<{
   onCompleted: () => void;
 }> = React.memo((props) => {
-  const { message } = useChatInputActionContext();
+  const { message, setMessage } = useChatInputActionContext();
   const [{ loading, value }, handleCallAI] = useAsyncRequest(
     async (question: string) => {
       // TODO: wait for replace
@@ -63,25 +65,43 @@ export const AssistantPopover: React.FC<{
 
   return (
     <Root>
-      <Tip>{Translate.helpMeTo}</Tip>
-
       <div>
-        {typeof value === 'object' &&
-          (value.result ? (
-            <div>
-              <div>{value.answer}</div>
-              <Tag color="green">
-                {Translate.usage}: {value.usage}ms
-              </Tag>
-            </div>
-          ) : (
-            <div>
-              <div>{Translate.serviceBusy}</div>
-              <Tag color="red">{Translate.callError}</Tag>
-            </div>
-          ))}
+        {typeof value === 'object' && (
+          <>
+            {value.result ? (
+              <div>
+                <div>{value.answer}</div>
+                <div>
+                  <Tag color="green">
+                    {Translate.usage}: {value.usage}ms
+                  </Tag>
+
+                  <Button
+                    size="small"
+                    type="primary"
+                    onClick={() => {
+                      setMessage(value.answer);
+                      props.onCompleted();
+                    }}
+                  >
+                    {Translate.apply}
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              <div>
+                <div>{Translate.serviceBusy}</div>
+                <Tag color="red">{Translate.callError}</Tag>
+              </div>
+            )}
+
+            <Divider />
+          </>
+        )}
       </div>
 
+      <Tip>{Translate.helpMeTo}</Tip>
+
       {typeof message === 'string' && message.length > 0 && (
         <>
           <ActionButton
diff --git a/client/web/plugins/com.msgbyte.ai-assistant/src/translate.ts b/client/web/plugins/com.msgbyte.ai-assistant/src/translate.ts
index 5f0afaec..d706a221 100644
--- a/client/web/plugins/com.msgbyte.ai-assistant/src/translate.ts
+++ b/client/web/plugins/com.msgbyte.ai-assistant/src/translate.ts
@@ -41,4 +41,8 @@ export const Translate = {
     'zh-CN': '调用失败',
     'en-US': 'Call Error',
   }),
+  apply: localTrans({
+    'zh-CN': '应用',
+    'en-US': 'Apply',
+  }),
 };