From 99c14d1bacab46666df495d097572a59ec900485 Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Wed, 15 Feb 2023 09:54:06 +0800
Subject: [PATCH] feat: gpt demo

---
 src/app/services/message.ts | 11 +++++-
 src/routes/gptDemo.tsx      | 67 +++++++++++++++++++++++++++++++++++++
 src/routes/index.tsx        |  2 ++
 3 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/gptDemo.tsx

diff --git a/src/app/services/message.ts b/src/app/services/message.ts
index 09e8646b..0429eb8a 100644
--- a/src/app/services/message.ts
+++ b/src/app/services/message.ts
@@ -147,6 +147,14 @@ export const messageApi = createApi({
         }
       }
     }),
+
+    replyWithChatGPT: builder.mutation<{ message: string, prompt: string }, string>({
+      query: (prompt) => ({
+        url: `https://official.voce.chat/chatgpt/complete`,
+        method: "POST",
+        body: { prompt, api_key: "test" }
+      })
+    }),
     replyMessage: builder.mutation<
       number,
       { from_uid: number, reply_mid: number; content: string; type: ContentTypeKey, properties?: {} }
@@ -209,5 +217,6 @@ export const {
   useReplyMessageMutation,
   useLazyDeleteMessageQuery,
   useReadMessageMutation,
-  useCreateArchiveMutation
+  useCreateArchiveMutation,
+  useReplyWithChatGPTMutation
 } = messageApi;
diff --git a/src/routes/gptDemo.tsx b/src/routes/gptDemo.tsx
new file mode 100644
index 00000000..abc665b9
--- /dev/null
+++ b/src/routes/gptDemo.tsx
@@ -0,0 +1,67 @@
+import { useState, useEffect, FormEvent } from 'react';
+import { JellyTriangle } from '@uiball/loaders';
+
+import { useReplyWithChatGPTMutation } from '../app/services/message';
+import Textarea from '../common/component/styled/Textarea';
+import Button from '../common/component/styled/Button';
+import clsx from 'clsx';
+
+// type Props = {}
+type Conversation = {
+    type: "prompt" | "reply", content: string
+}[]
+const GPTDemo = () => {
+    // const promptRef = useRef<HTMLTextAreaElement | undefined>();
+    // const [prompt, setPrompt] = useState("");
+    const [talk, setTalk] = useState<Conversation>([]);
+    const [feedTheGPT, { data, isSuccess, isLoading }] = useReplyWithChatGPTMutation();
+    const handleSend = (evt: FormEvent<HTMLFormElement>) => {
+        evt.preventDefault();
+        const form = evt.currentTarget;
+        // 检查格式
+        if (!form?.checkValidity()) {
+            form?.reportValidity();
+            return;
+        }
+        const content = new FormData(form).get("prompt") as string;
+        feedTheGPT(content);
+        setTalk(prevs => {
+            return [...prevs, { type: "prompt", content }];
+        });
+        form.reset();
+    };
+    useEffect(() => {
+        if (isSuccess && data) {
+            const { message } = data;
+            setTalk(prevs => {
+                return [...prevs, { type: "reply", content: message }];
+            });
+        }
+    }, [isSuccess, data]);
+
+    return (
+        <section className='flex-center flex-col gap-2 max-w-3xl m-auto w-screen h-screen overflow-scroll'>
+            <div className="flex flex-col gap-2 w-full mb-10 px-2">
+                {talk.map(({ type, content }) => {
+                    return <div className="flex items-start gap-3" key={content}>
+                        <span className='text-sm text-gray-500 uppercase min-w-[65px] text-right'>{type}:</span>
+                        <div className={clsx("text-xl font-bold border border-solid border-gray-200 p-2", type == "reply" && 'bg-green-600 text-white')}>{content}</div>
+                    </div>;
+                })}
+            </div>
+            {isLoading &&
+                <JellyTriangle
+                    size={30}
+                    color="#555"
+                />}
+            <form onSubmit={handleSend} className="w-full flex flex-col gap-2 items-center sticky bottom-0">
+                <div className='w-full'>
+                    <Textarea rows={8} required name='prompt' placeholder='Input prompt please' />
+                </div>
+                <Button type='submit' disabled={isLoading} >Send</Button>
+            </form>
+        </section>
+    );
+};
+
+export default GPTDemo;
\ No newline at end of file
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 755872ae..e6e0a2e9 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -23,6 +23,7 @@ const SettingChannelPage = lazy(() => import("./settingChannel"));
 const SettingDMPage = lazy(() => import("./settingDM"));
 const SettingPage = lazy(() => import("./setting"));
 const ResourceManagement = lazy(() => import("./resources"));
+const GPTDemo = lazy(() => import("./gptDemo"));
 const GuestLogin = lazy(() => import("./guest"));
 const ChatPage = lazy(() => import("./chat"));
 const HomePage = lazy(() => import("./home"));
@@ -59,6 +60,7 @@ const PageRoutes = () => {
   return (
     <HashRouter>
       <Routes>
+        <Route path="/gpt" element={<LazyIt><GPTDemo /></LazyIt>} />
         <Route path="/guest_login" element={<LazyIt><GuestLogin /></LazyIt>} />
         <Route path="/cb/:type/:payload" element={<LazyIt><CallbackPage /></LazyIt>} />
         <Route path="/oauth/:token" element={<LazyIt><OAuthPage /></LazyIt>} />