From 1db210097c431fa460aea5b8a1bb697fb0f2db6d Mon Sep 17 00:00:00 2001
From: RugerMc <550279039@qq.com>
Date: Fri, 31 Mar 2023 13:16:12 +0800
Subject: [PATCH] feat: add switch of send preview bubble

---
 app/components/home.tsx     | 27 ++++++++++++++-------------
 app/components/settings.tsx | 12 ++++++++++++
 app/locales/cn.ts           |  1 +
 app/locales/en.ts           |  1 +
 app/locales/tw.ts           |  1 +
 app/store/app.ts            |  2 ++
 6 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/app/components/home.tsx b/app/components/home.tsx
index 2f09aa27..2da10196 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -292,6 +292,8 @@ export function Chat(props: {
   const latestMessageRef = useRef<HTMLDivElement>(null);
   const [autoScroll, setAutoScroll] = useState(true);
 
+  const config = useChatStore((state) => state.config);
+
   // preview messages
   const messages = (session.messages as RenderMessage[])
     .concat(
@@ -305,19 +307,18 @@ export function Chat(props: {
             },
           ]
         : [],
-    )
-    .concat(
-      userInput.length > 0
-        ? [
-            {
-              role: "user",
-              content: userInput,
-              date: new Date().toLocaleString(),
-              preview: true,
-            },
-          ]
-        : [],
-    );
+    ).concat(
+        userInput.length > 0 && config.sendPreviewBubble
+          ? [
+              {
+                role: "user",
+                content: userInput,
+                date: new Date().toLocaleString(),
+                preview: false,
+              },
+            ]
+          : [],
+    ); 
 
   // auto scroll
   useLayoutEffect(() => {
diff --git a/app/components/settings.tsx b/app/components/settings.tsx
index 711cb954..06ff76e1 100644
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -278,6 +278,18 @@ export function Settings(props: { closeSettings: () => void }) {
               }
             ></input>
           </SettingItem>
+
+          <SettingItem title={Locale.Settings.SendPreviewBubble}>
+            <input
+              type="checkbox"
+              checked={config.sendPreviewBubble}
+              onChange={(e) =>
+                updateConfig(
+                  (config) => (config.sendPreviewBubble = e.currentTarget.checked),
+                )
+              }
+            ></input>
+          </SettingItem>
         </List>
         <List>
           <SettingItem
diff --git a/app/locales/cn.ts b/app/locales/cn.ts
index 239da23f..a69431b8 100644
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -76,6 +76,7 @@ const cn = {
     SendKey: "发送键",
     Theme: "主题",
     TightBorder: "紧凑边框",
+    SendPreviewBubble: "发送预览气泡",
     Prompt: {
       Disable: {
         Title: "禁用提示词自动补全",
diff --git a/app/locales/en.ts b/app/locales/en.ts
index 29699243..0a56becc 100644
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -77,6 +77,7 @@ const en: LocaleType = {
     SendKey: "Send Key",
     Theme: "Theme",
     TightBorder: "Tight Border",
+    SendPreviewBubble: "Send Preview Bubble",
     Prompt: {
       Disable: {
         Title: "Disable auto-completion",
diff --git a/app/locales/tw.ts b/app/locales/tw.ts
index e63c57a6..24b9005f 100644
--- a/app/locales/tw.ts
+++ b/app/locales/tw.ts
@@ -76,6 +76,7 @@ const tw: LocaleType = {
     SendKey: "發送鍵",
     Theme: "主題",
     TightBorder: "緊湊邊框",
+    SendPreviewBubble: "發送預覽氣泡",
     Prompt: {
       Disable: {
         Title: "停用提示詞自動補全",
diff --git a/app/store/app.ts b/app/store/app.ts
index 6ab3229a..0e9816cc 100644
--- a/app/store/app.ts
+++ b/app/store/app.ts
@@ -39,6 +39,7 @@ export interface ChatConfig {
   fontSize: number;
   theme: Theme;
   tightBorder: boolean;
+  sendPreviewBubble: boolean;
 
   disablePromptHint: boolean;
 
@@ -128,6 +129,7 @@ const DEFAULT_CONFIG: ChatConfig = {
   fontSize: 14,
   theme: Theme.Auto as Theme,
   tightBorder: false,
+  sendPreviewBubble: true,
 
   disablePromptHint: false,