From 7442294c4105af76d621c7f12936b56dede13fd7 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Thu, 16 Mar 2023 14:05:12 +0800
Subject: [PATCH] fix: mobile sizing style of icon

---
 client/src/components/Main/SubmitButton.jsx |  4 ++--
 client/src/components/Main/TextChat.jsx     |  2 +-
 client/src/components/Models/ModelItem.jsx  |  4 ++--
 client/src/components/Models/ModelMenu.jsx  |  2 +-
 client/src/utils/index.js                   | 14 +++++++-------
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/client/src/components/Main/SubmitButton.jsx b/client/src/components/Main/SubmitButton.jsx
index ed570f5c76..4ee84a4bb1 100644
--- a/client/src/components/Main/SubmitButton.jsx
+++ b/client/src/components/Main/SubmitButton.jsx
@@ -10,7 +10,7 @@ export default function SubmitButton({ submitMessage }) {
 
   if (isSubmitting) {
     return (
-      <button className="absolute bottom-0 h-[50px] w-[30px] right-1 rounded-md p-1 text-gray-500 hover:bg-gray-100disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:right-2" disabled>
+      <button className="absolute bottom-0 h-[100%] w-[30px] right-1 rounded-md p-1 text-gray-500 hover:bg-gray-100disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:right-2" disabled>
         <div className="text-2xl">
           <span >·</span>
           <span className="blink">·</span>
@@ -23,7 +23,7 @@ export default function SubmitButton({ submitMessage }) {
     <button
       onClick={clickHandler}
       disabled={disabled}
-      className="absolute bottom-0 flex justify-center items-center h-[50px] w-[50px] right-0 rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent"
+      className="absolute bottom-0 flex justify-center items-center h-[100%] w-[50px] right-0 rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent"
     >
       <svg
         stroke="currentColor"
diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index 65eae454ce..3d7594dba1 100644
--- a/client/src/components/Main/TextChat.jsx
+++ b/client/src/components/Main/TextChat.jsx
@@ -310,7 +310,7 @@ export default function TextChat({ messages }) {
             <div
               className={`relative flex w-full 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 ${
+              } py-3 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 ${
                 disabled ? 'dark:bg-gray-900' : 'dark:bg-gray-700'
               } dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4`}
             >
diff --git a/client/src/components/Models/ModelItem.jsx b/client/src/components/Models/ModelItem.jsx
index 163c4206fd..bf945162af 100644
--- a/client/src/components/Models/ModelItem.jsx
+++ b/client/src/components/Models/ModelItem.jsx
@@ -28,7 +28,7 @@ export default function ModelItem({ modelName, value, model, onSelect, id, chatG
     dispatch(setModels(fetchedModels));
   });
 
-  const icon = getIconOfModel({ size: 16, sender: modelName, isCreatedByUser: false, model, chatGptLabel, promptPrefix, error: false, className: "mr-2" });
+  const icon = getIconOfModel({ size: 20, sender: modelName, isCreatedByUser: false, model, chatGptLabel, promptPrefix, error: false, className: "mr-2" });
 
   if (value === 'chatgptCustom') {
     return (
@@ -143,7 +143,7 @@ export default function ModelItem({ modelName, value, model, onSelect, id, chatG
           onKeyDown={handleKeyDown}
         />
       ) : (
-        <div className="w-3/4 overflow-hidden">{modelInput}</div>
+        <div className=" overflow-hidden">{modelInput}</div>
       )}
 
       {value === 'chatgpt' && <sup>$</sup>}
diff --git a/client/src/components/Models/ModelMenu.jsx b/client/src/components/Models/ModelMenu.jsx
index 5ef04c3ef4..b1ac9d93f2 100644
--- a/client/src/components/Models/ModelMenu.jsx
+++ b/client/src/components/Models/ModelMenu.jsx
@@ -139,7 +139,7 @@ export default function ModelMenu() {
 
   const isBing = model === 'bingai' || model === 'sydney';
   const colorProps = model === 'chatgpt' ? chatgptColorProps : defaultColorProps;
-  const icon = getIconOfModel({ sender: chatGptLabel || model, isCreatedByUser: false, model, chatGptLabel, promptPrefix, error: false, className: "mr-2" });
+  const icon = getIconOfModel({ size: 32, sender: chatGptLabel || model, isCreatedByUser: false, model, chatGptLabel, promptPrefix, error: false, className: "mr-2" });
 
   return (
     <Dialog onOpenChange={onOpenChange}>
diff --git a/client/src/utils/index.js b/client/src/utils/index.js
index 4b5d66f4bb..999026aee7 100644
--- a/client/src/utils/index.js
+++ b/client/src/utils/index.js
@@ -61,8 +61,8 @@ export const getIconOfModel = ({ size=30, sender, isCreatedByUser, model, chatGp
     return (
       <div
         title='User'
-        style={{ background: 'radial-gradient(circle at 90% 110%, rgb(1 43 128), rgb(17, 139, 161))', color: 'white', fontSize: 12 }}
-        className={`relative flex h-[${size}px] w-[${size}px] items-center justify-center rounded-sm p-1 text-white ` + props?.className}
+        style={{ background: 'radial-gradient(circle at 90% 110%, rgb(1 43 128), rgb(17, 139, 161))', color: 'white', fontSize: 12, width: size, height: size }}
+        className={`relative flex items-center justify-center rounded-sm text-white ` + props?.className}
       >
         User
       </div>
@@ -77,11 +77,11 @@ export const getIconOfModel = ({ size=30, sender, isCreatedByUser, model, chatGp
       <div
         title={chatGptLabel || model}
         style={
-          { background } || { background: 'radial-gradient(circle at 90% 110%, #F0F0FA, #D0E0F9)' }
+          { background: background || 'radial-gradient(circle at 90% 110%, #F0F0FA, #D0E0F9)', width: size, height: size }
         }
-        className={`relative flex h-[${size}px] w-[${size}px] items-center justify-center rounded-sm p-1 text-white ` + props?.className}
+        className={`relative flex items-center justify-center rounded-sm text-white ` + props?.className}
       >
-        {isBing ? <BingIcon size={size} /> : <GPTIcon size={size} />}
+        {isBing ? <BingIcon size={size * 0.7} /> : <GPTIcon size={size * 0.7} />}
         {error && (
           <span className="absolute right-0 top-[20px] -mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white">
             !
@@ -93,8 +93,8 @@ export const getIconOfModel = ({ size=30, sender, isCreatedByUser, model, chatGp
     return (
       <div
         title='User'
-        style={{ background: 'radial-gradient(circle at 90% 110%, rgb(1 43 128), rgb(17, 139, 161))', color: 'white', fontSize: 12 }}
-        className={`relative flex h-[${size}px] w-[${size}px] items-center justify-center rounded-sm p-1 text-white ` + props?.className}
+        style={{ background: 'radial-gradient(circle at 90% 110%, rgb(1 43 128), rgb(17, 139, 161))', color: 'white', fontSize: 12, width: size, height: size }}
+        className={`relative flex items-center justify-center rounded-sm p-1 text-white ` + props?.className}
       >
         {chatGptLabel}
       </div>