From 142ac3efa56fd115ad6b7f26f1c0b88850664289 Mon Sep 17 00:00:00 2001
From: tianzhou <t@bytebase.com>
Date: Wed, 31 May 2023 19:04:30 +0800
Subject: [PATCH] chore: enable conversation tab and tweak tab UX

---
 src/components/ConversationTabsView.tsx    | 6 +++---
 src/components/ConversationView/Header.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ConversationTabsView.tsx b/src/components/ConversationTabsView.tsx
index eec3333..2d8b94e 100644
--- a/src/components/ConversationTabsView.tsx
+++ b/src/components/ConversationTabsView.tsx
@@ -20,7 +20,7 @@ const ConversationTab = (props: ConversationTabProps) => {
 
   return (
     <div
-      className={`shrink-0 flex flex-row justify-center items-center cursor-pointer text-sm border px-2 py-1 rounded-md text-gray-600 dark:text-gray-400 hover:text-gray-700 hover:bg-gray-50 dark:hover:bg-zinc-700 dark:border-zinc-700 ${
+      className={`shrink-0 flex flex-row justify-center items-center cursor-pointer text-sm border pl-4 pr-2 py-1 rounded-sm text-gray-600 dark:text-gray-400 hover:text-gray-700 hover:bg-gray-50 dark:hover:bg-zinc-700 dark:border-zinc-700 ${
         selected && "!bg-indigo-600 !text-white !border-transparent shadow"
       }`}
       onClick={() => onClick(conversation)}
@@ -28,7 +28,7 @@ const ConversationTab = (props: ConversationTabProps) => {
       <span>{conversation.title}</span>
       <Dropdown
         tigger={
-          <button className="w-4 h-auto shrink-0 ml-0.5 flex justify-center items-center text-gray-300 hover:opacity-80">
+          <button className="w-4 h-auto shrink-0 ml-1 flex justify-center items-center text-gray-300 hover:opacity-80">
             <Icon.FiMoreVertical className="w-full h-auto" />
           </button>
         }
@@ -112,7 +112,7 @@ const ConversationTabsView = () => {
         </div>
         <div className={`shrink-0 my-2 ${conversationList.length > 0 && "ml-2"}`}>
           <button
-            className="border px-2 py-1.5 text-sm rounded-md flex flex-row justify-center items-center text-gray-500 dark:text-gray-400 hover:text-gray-700 hover:bg-gray-50 dark:hover:bg-zinc-700 dark:border-zinc-700"
+            className="border px-2 py-1.5 text-sm rounded-sm flex flex-row justify-center items-center text-gray-500 dark:text-gray-400 hover:text-gray-700 hover:bg-gray-50 dark:hover:bg-zinc-700 dark:border-zinc-700"
             onClick={handleCreateConversation}
           >
             <Icon.AiOutlinePlus className="w-4 h-auto" />
diff --git a/src/components/ConversationView/Header.tsx b/src/components/ConversationView/Header.tsx
index 6940dd6..fa55148 100644
--- a/src/components/ConversationView/Header.tsx
+++ b/src/components/ConversationView/Header.tsx
@@ -60,7 +60,7 @@ const Header = (props: Props) => {
           </div>
         </div>
 
-        {hasFeature("debug") && <ConversationTabsView />}
+        <ConversationTabsView />
       </div>
 
       {hasFeature("debug") && showSchemaDrawer && <SchemaDrawer close={() => setShowSchemaDrawer(false)} />}