From 9223f9572613170c528b8033382cf48da28b19c8 Mon Sep 17 00:00:00 2001
From: Hk-Gosuto <yominogosuto@gmail.com>
Date: Fri, 21 Jul 2023 13:25:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8F=92=E4=BB=B6=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/chat.module.scss | 31 +++++++++++++++++++++++++++++++
 app/components/chat.tsx         | 16 ++++++++++++++++
 app/icons/checkmark.svg         |  3 +++
 3 files changed, 50 insertions(+)
 create mode 100644 app/icons/checkmark.svg

diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss
index a3ab56062..b6f0c1d1b 100644
--- a/app/components/chat.module.scss
+++ b/app/components/chat.module.scss
@@ -348,6 +348,37 @@
   }
 }
 
+.chat-message-checkmark {
+  display: inline-block;
+  margin-right: 5px;
+  height: 12px;
+  width: 12px;
+  color: #13a10e;
+  fill: #13a10e;
+  user-select: none;
+  backface-visibility: hidden;
+  transform: translateZ(0px);
+}
+
+.chat-message-tools-status {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  margin-top: 5px;
+  line-height: 1.5;
+}
+
+.chat-message-tools-name {
+  color: #aaa;
+}
+
+.chat-message-tools-details {
+  margin-left: 5px;
+  font-weight: bold;
+  color: #999;
+}
+
 .chat-message-status {
   font-size: 12px;
   color: #aaa;
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index febef7188..87835f984 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -36,6 +36,7 @@ import StopIcon from "../icons/pause.svg";
 import RobotIcon from "../icons/robot.svg";
 import SearchCloseIcon from "../icons/search_close.svg";
 import SearchOpenIcon from "../icons/search_open.svg";
+import CheckmarkIcon from "../icons/checkmark.svg";
 
 import {
   ChatMessage,
@@ -1148,6 +1149,21 @@ export function Chat() {
                       </div>
                     )}
                   </div>
+
+                  <div>
+                    <div className={styles["chat-message-tools-status"]}>
+                      <div className={styles["chat-message-tools-name"]}>
+                        <CheckmarkIcon
+                          className={styles["chat-message-checkmark"]}
+                        />
+                        web search:
+                        <code className={styles["chat-message-tools-details"]}>
+                          xxxxxxxxxxxxxxxx
+                        </code>
+                      </div>
+                    </div>
+                  </div>
+
                   {showTyping && (
                     <div className={styles["chat-message-status"]}>
                       {Locale.Chat.Typing}
diff --git a/app/icons/checkmark.svg b/app/icons/checkmark.svg
new file mode 100644
index 000000000..e07bf8a8d
--- /dev/null
+++ b/app/icons/checkmark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048">
+  <path d="M256 1088q0-26 19-45t45-19q26 0 45 19l403 402 915-914q19-19 45-19t45 19 19 45q0 26-19 45l-960 960q-19 19-45 19t-45-19l-448-448q-19-19-19-45z"></path>
+</svg>
\ No newline at end of file