From 2269403806e2e7bf0a8d27be2ba9d32e1a1af140 Mon Sep 17 00:00:00 2001
From: Danil Shishkevich <44939683+shishkevichd@users.noreply.github.com>
Date: Mon, 27 Mar 2023 22:20:33 +0700
Subject: [PATCH] chore: fix styles in "OpenAI Key" div (#228)

chore: do nothing if the name of the renamed dialog contains nothing.
chore: fix some styles
chore: remake conversation settings on mobile
---
 components/Chat/Chat.tsx            |  6 +++---
 components/Sidebar/Conversation.tsx | 18 ++++++++++--------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx
index 2c00092..04c572c 100644
--- a/components/Chat/Chat.tsx
+++ b/components/Chat/Chat.tsx
@@ -111,7 +111,7 @@ export const Chat: FC<Props> = memo(
       <div className="overflow-none relative flex-1 bg-white dark:bg-[#343541]">
         {!(apiKey || serverSideApiKeyIsSet) ? (
           <div className="mx-auto flex h-full w-[300px] flex-col justify-center space-y-6 sm:w-[500px]">
-            <div className="mx-auto mb-5">
+            <div className="mx-auto mb-5 text-gray-800 dark:text-gray-100">
               <IconKey size={36} />
             </div>
             <div className="text-center text-2xl font-semibold text-gray-800 dark:text-gray-100">
@@ -201,8 +201,8 @@ export const Chat: FC<Props> = memo(
                     />
                   </div>
                   {showSettings && (
-                    <div className="mx-auto flex w-[200px] flex-col space-y-10 pt-8 sm:w-[300px]">
-                      <div className="flex h-full flex-col space-y-4 rounded border border-neutral-500 p-2">
+                    <div className="flex flex-col space-y-10 md:max-w-xl md:gap-6 md:py-3 md:pt-6 md:mx-auto lg:max-w-2xl lg:px-0 xl:max-w-3xl">
+                      <div className="flex h-full flex-col space-y-4 border-b md:rounded-lg md:border border-neutral-200 p-4 dark:border-neutral-600">
                         <ModelSelect
                           model={conversation.model}
                           models={models}
diff --git a/components/Sidebar/Conversation.tsx b/components/Sidebar/Conversation.tsx
index f0d7164..fd454ec 100644
--- a/components/Sidebar/Conversation.tsx
+++ b/components/Sidebar/Conversation.tsx
@@ -49,9 +49,11 @@ export const ConversationComponent: FC<Props> = ({
   };
 
   const handleRename = (conversation: Conversation) => {
-    onUpdateConversation(conversation, { key: 'name', value: renameValue });
-    setRenameValue('');
-    setIsRenaming(false);
+    if (renameValue.trim().length > 0) {
+      onUpdateConversation(conversation, { key: 'name', value: renameValue });
+      setRenameValue('');
+      setIsRenaming(false);
+    }
   };
 
   useEffect(() => {
@@ -65,10 +67,10 @@ export const ConversationComponent: FC<Props> = ({
   return (
     <div className="relative flex items-center">
       {isRenaming && selectedConversation.id === conversation.id ? (
-        <div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3">
+        <div className="flex w-full items-center gap-3 rounded-lg bg-gray-500/10 p-3">
           <IconMessage size={18} />
           <input
-            className="mr-12 flex-1 overflow-hidden text-[12.5px] leading-3 overflow-ellipsis border-neutral-400 bg-transparent text-left text-white outline-none focus:border-neutral-100"
+            className="mr-12 flex-1 overflow-hidden overflow-ellipsis border-neutral-400 bg-transparent text-left text-[12.5px] leading-4 text-white outline-none focus:border-neutral-100"
             type="text"
             value={renameValue}
             onChange={(e) => setRenameValue(e.target.value)}
@@ -78,10 +80,10 @@ export const ConversationComponent: FC<Props> = ({
         </div>
       ) : (
         <button
-          className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#343541]/90 ${
+          className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-gray-500/10 ${
             loading ? 'disabled:cursor-not-allowed' : ''
           } ${
-            selectedConversation.id === conversation.id ? 'bg-[#343541]/90' : ''
+            selectedConversation.id === conversation.id ? 'bg-gray-500/10' : ''
           }`}
           onClick={() => onSelectConversation(conversation)}
           disabled={loading}
@@ -90,7 +92,7 @@ export const ConversationComponent: FC<Props> = ({
         >
           <IconMessage size={18} />
           <div
-            className={`relative max-h-5 flex-1 text-[12.5px] leading-3 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left ${
+            className={`relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left text-[12.5px] leading-3 ${
               selectedConversation.id === conversation.id ? 'pr-12' : 'pr-1'
             }`}
           >