From 1579d1003a2920716f5b950e737fe47d6529a8d6 Mon Sep 17 00:00:00 2001
From: sijinhui <sijinhui@qq.com>
Date: Tue, 16 Apr 2024 13:20:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/chat.tsx                |   5 +-
 app/components/exporter.module.scss    |   2 +-
 app/components/gpt-prompts.module.scss |   8 ++
 app/components/gpt-prompts.tsx         | 162 +++++++++++++++++++++++++
 4 files changed, 174 insertions(+), 3 deletions(-)
 create mode 100644 app/components/gpt-prompts.module.scss
 create mode 100644 app/components/gpt-prompts.tsx

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index cfe0cb1a7..46caadf6b 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -102,8 +102,8 @@ import Image from "next/image";
 import { useAllModels } from "../utils/hooks";
 import { MultimodalContent } from "../client/api";
 import { getTokenLength } from "@/lib/utils";
-import VoiceInput from "@/app/components/voice-input";
-
+import VoiceInput from "./voice-input";
+import GptPrompts from "./gpt-prompts";
 // const VoiceInput = dynamic(
 //     () => import('@/app/components/voice-input'), { ssr: false });
 
@@ -1636,6 +1636,7 @@ function _Chat() {
       </div>
 
       <div className={styles["chat-input-panel"]}>
+        <GptPrompts />
         <PromptHints prompts={promptHints} onPromptSelect={onPromptSelect} />
 
         <ChatActions
diff --git a/app/components/exporter.module.scss b/app/components/exporter.module.scss
index 5e992e7fd..850ed22f6 100644
--- a/app/components/exporter.module.scss
+++ b/app/components/exporter.module.scss
@@ -268,4 +268,4 @@
   }
 
   .default-theme {}
-}
\ No newline at end of file
+}
diff --git a/app/components/gpt-prompts.module.scss b/app/components/gpt-prompts.module.scss
new file mode 100644
index 000000000..b0cde166e
--- /dev/null
+++ b/app/components/gpt-prompts.module.scss
@@ -0,0 +1,8 @@
+//@tailwind base;
+//@tailwind components;
+//@tailwind utilities;
+
+.opacity_span {
+  opacity: 1;
+  transform: none;
+}
diff --git a/app/components/gpt-prompts.tsx b/app/components/gpt-prompts.tsx
new file mode 100644
index 000000000..ddfd20e67
--- /dev/null
+++ b/app/components/gpt-prompts.tsx
@@ -0,0 +1,162 @@
+import styles from "./gpt-prompts.module.scss";
+import { Flex, Radio, Card } from "antd";
+
+export default function GptPrompts() {
+  return (
+    <div className="absolute bottom-full left-0 right-0">
+      <div className="relative h-full w-full">
+        <div className="h-full flex ml-1 md:w-full md:m-auto md:mb-4 gap-0 md:gap-2 justify-center">
+          <div className="grow">
+            <div className="absolute bottom-full left-0 mb-4 flex w-full grow gap-2 px-1 pb-1 sm:px-2 sm:pb-0 md:static md:mb-0 md:max-w-none">
+              <div className="grid w-full grid-flow-row grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-2">
+                <Flex>
+                  <Flex vertical>
+                    <span className={styles["opacity_span"]}>
+                      <button className="btn relative btn-neutral group w-full whitespace-nowrap rounded-xl px-4 py-3 text-left text-token-text-primary md:whitespace-normal">
+                        <div className="flex w-full gap-2 items-center justify-center">
+                          <div className="flex w-full items-center justify-between">
+                            <Card title="比较营销策略" bordered={false}>
+                              关于面向 Z 世代和千禧一代的太阳镜营销
+                            </Card>
+                            <div className="absolute bottom-0 right-0 top-0 flex items-center rounded-xl bg-gradient-to-l from-token-main-surface-secondary pl-6 pr-4 text-token-text-secondary opacity-0 can-hover:group-hover:opacity-100">
+                              <span className="" data-state="closed">
+                                <div className="rounded-lg bg-token-main-surface-primary p-1 shadow-xxs dark:shadow-none">
+                                  <svg
+                                    width="24"
+                                    height="24"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    className="icon-sm text-token-text-primary"
+                                  >
+                                    <path
+                                      d="M7 11L12 6L17 11M12 18V7"
+                                      stroke="currentColor"
+                                      stroke-width="2"
+                                      stroke-linecap="round"
+                                      stroke-linejoin="round"
+                                    ></path>
+                                  </svg>
+                                </div>
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </button>
+                    </span>
+                    <span className={styles["opacity_span"]}>
+                      <button className="btn relative btn-neutral group w-full whitespace-nowrap rounded-xl px-4 py-3 text-left text-token-text-primary md:whitespace-normal">
+                        <div className="flex w-full gap-2 items-center justify-center">
+                          <div className="flex w-full items-center justify-between">
+                            <div className="flex flex-col overflow-hidden">
+                              <div className="truncate">帮我调试</div>
+                              <div className="truncate font-normal opacity-50">
+                                一种链表问题
+                              </div>
+                            </div>
+                            <div className="absolute bottom-0 right-0 top-0 flex items-center rounded-xl bg-gradient-to-l from-token-main-surface-secondary pl-6 pr-4 text-token-text-secondary opacity-0 can-hover:group-hover:opacity-100">
+                              <span className="" data-state="closed">
+                                <div className="rounded-lg bg-token-main-surface-primary p-1 shadow-xxs dark:shadow-none">
+                                  <svg
+                                    width="24"
+                                    height="24"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    className="icon-sm text-token-text-primary"
+                                  >
+                                    <path
+                                      d="M7 11L12 6L17 11M12 18V7"
+                                      stroke="currentColor"
+                                      stroke-width="2"
+                                      stroke-linecap="round"
+                                      stroke-linejoin="round"
+                                    ></path>
+                                  </svg>
+                                </div>
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </button>
+                    </span>
+                  </Flex>
+                  <Flex vertical>
+                    <span className={styles["opacity_span"]}>
+                      <button className="btn relative btn-neutral group w-full whitespace-nowrap rounded-xl px-4 py-3 text-left text-token-text-primary md:whitespace-normal">
+                        <div className="flex w-full gap-2 items-center justify-center">
+                          <div className="flex w-full items-center justify-between">
+                            <div className="flex flex-col overflow-hidden">
+                              <div className="truncate">比较营销策略</div>
+                              <div className="truncate font-normal opacity-50">
+                                关于面向 Z 世代和千禧一代的太阳镜营销
+                              </div>
+                            </div>
+                            <div className="absolute bottom-0 right-0 top-0 flex items-center rounded-xl bg-gradient-to-l from-token-main-surface-secondary pl-6 pr-4 text-token-text-secondary opacity-0 can-hover:group-hover:opacity-100">
+                              <span className="" data-state="closed">
+                                <div className="rounded-lg bg-token-main-surface-primary p-1 shadow-xxs dark:shadow-none">
+                                  <svg
+                                    width="24"
+                                    height="24"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    className="icon-sm text-token-text-primary"
+                                  >
+                                    <path
+                                      d="M7 11L12 6L17 11M12 18V7"
+                                      stroke="currentColor"
+                                      stroke-width="2"
+                                      stroke-linecap="round"
+                                      stroke-linejoin="round"
+                                    ></path>
+                                  </svg>
+                                </div>
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </button>
+                    </span>
+                    <span className={styles["opacity_span"]}>
+                      <button className="btn relative btn-neutral group w-full whitespace-nowrap rounded-xl px-4 py-3 text-left text-token-text-primary md:whitespace-normal">
+                        <div className="flex w-full gap-2 items-center justify-center">
+                          <div className="flex w-full items-center justify-between">
+                            <div className="flex flex-col overflow-hidden">
+                              <div className="truncate">帮我调试</div>
+                              <div className="truncate font-normal opacity-50">
+                                一种链表问题
+                              </div>
+                            </div>
+                            <div className="absolute bottom-0 right-0 top-0 flex items-center rounded-xl bg-gradient-to-l from-token-main-surface-secondary pl-6 pr-4 text-token-text-secondary opacity-0 can-hover:group-hover:opacity-100">
+                              <span className="" data-state="closed">
+                                <div className="rounded-lg bg-token-main-surface-primary p-1 shadow-xxs dark:shadow-none">
+                                  <svg
+                                    width="24"
+                                    height="24"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    className="icon-sm text-token-text-primary"
+                                  >
+                                    <path
+                                      d="M7 11L12 6L17 11M12 18V7"
+                                      stroke="currentColor"
+                                      stroke-width="2"
+                                      stroke-linecap="round"
+                                      stroke-linejoin="round"
+                                    ></path>
+                                  </svg>
+                                </div>
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </button>
+                    </span>
+                  </Flex>
+                </Flex>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}