From a8c53f1f0dfb9bd81d778d0e1d0f38a6716eec25 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Fri, 17 Mar 2023 03:42:55 +0800
Subject: [PATCH] mobile style, for input panel and regenerate buttons

---
 client/src/components/Main/TextChat.jsx  | 15 +++++++--------
 client/src/components/Messages/index.jsx |  8 ++++----
 client/src/mobile.css                    | 14 ++++++++++++++
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index 59b81e7182..4e9b413f0d 100644
--- a/client/src/components/Main/TextChat.jsx
+++ b/client/src/components/Main/TextChat.jsx
@@ -281,34 +281,33 @@ export default function TextChat({ messages }) {
   };
   isNotAppendable
   return (
-    <div className="md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient absolute bottom-0 left-0 w-full border-t bg-white dark:border-white/20 dark:bg-gray-800 md:border-t-0 md:border-transparent md:!bg-transparent md:dark:border-transparent">
+    <div className="input-panel absolute bottom-0 left-0 w-full border-t md:border-t-0 dark:border-white/20 md:border-transparent md:dark:border-transparent md:bg-vert-light-gradient bg-white dark:bg-gray-800 md:!bg-transparent dark:md:bg-vert-dark-gradient pt-2">
       <form className="stretch mx-2 flex flex-row gap-3 pt-2 last:mb-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
         <div className="relative flex h-full flex-1 md:flex-col">
-          <div className="ml-1 mt-1.5 flex justify-center gap-0 md:m-auto md:mb-2 md:w-full md:gap-2" />
-            <span className="flex ml-1 md:w-full md:m-auto md:mb-2 gap-0 md:gap-2 justify-center">
+            <span className="flex ml-1 md:w-full md:m-auto md:mb-2 gap-0 md:gap-2 justify-center order-last md:order-none">
               {isSubmitting?
                 <button
                   onClick={handleStopGenerating}
-                  className="btn btn-neutral flex justify-center gap-2 border-0 md:border"
+                  className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
                   type="button"
                 >
                   <StopGeneratingIcon />
-                  Stop generating
+                  <span className="hidden md:block">Stop generating</span>
                 </button>
                 :(latestMessage&&!latestMessage?.isCreatedByUser)?
                     <button
                       onClick={handleRegenerate}
-                      className="btn btn-neutral flex justify-center gap-2 border-0 md:border"
+                      className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
                       type="button"
                     >
                       <RegenerateIcon />
-                      Regenerate response
+                      <span className="hidden md:block">Regenerate response</span>
                     </button>
                   :null
               }
             </span>
             <div
-              className={`relative flex w-full flex-grow flex-col rounded-md border border-black/10 ${
+              className={`relative flex flex-grow flex-col rounded-md border border-black/10 ${
                 disabled ? 'bg-gray-100' : 'bg-white'
               } py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 ${
                 disabled ? 'dark:bg-gray-900' : 'dark:bg-gray-700'
diff --git a/client/src/components/Messages/index.jsx b/client/src/components/Messages/index.jsx
index 951d57c281..f87101fb31 100644
--- a/client/src/components/Messages/index.jsx
+++ b/client/src/components/Messages/index.jsx
@@ -64,10 +64,10 @@ const Messages = ({ messages, messageTree }) => {
     >
       {/* <div className="flex-1 overflow-hidden"> */}
       <div className="dark:gpt-dark-gray h-full">
-        <div className="flex w-full items-center justify-center gap-1 border-b border-black/10 bg-gray-50 p-3 text-gray-500 dark:border-gray-900/50 dark:bg-gray-700 dark:text-gray-300 text-sm">
-          Model: {modelName} {customModel?`(${customModel})`:null}
-        </div>
-        <div className="dark:gpt-dark-gray flex flex-col items-center text-sm">
+        <div className="dark:gpt-dark-gray flex h-full flex-col items-center text-sm">
+          <div className="flex w-full items-center justify-center gap-1 border-b border-black/10 bg-gray-50 p-3 text-gray-500 dark:border-gray-900/50 dark:bg-gray-700 dark:text-gray-300 text-sm">
+            Model: {modelName} {customModel?`(${customModel})`:null}
+          </div>
           {messageTree.length === 0 ? (
             <Spinner />
           ) : (
diff --git a/client/src/mobile.css b/client/src/mobile.css
index 70977212db..c10a7cf7a1 100644
--- a/client/src/mobile.css
+++ b/client/src/mobile.css
@@ -46,6 +46,20 @@
 }
 
 @media (max-width: 767px) {
+  .input-panel-button {
+    border: 0;
+  }
+
+  .input-panel-button svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .input-panel {
+    background: rgb(52,53,65) !important;
+    background-image: none !important;
+  }
+
   .nav-close-button {
     display: block;
     position: absolute;