From 70202cceba6e4761c8278d3e27ae2baef1d30f1c Mon Sep 17 00:00:00 2001
From: NamH <NamNh0122@gmail.com>
Date: Sat, 7 Oct 2023 21:41:07 -0700
Subject: [PATCH] fix #283: small ui fixes (#299)

Signed-off-by: James <james@jan.ai>
Co-authored-by: James <james@jan.ai>
---
 .../ConfirmDeleteConversationModal/index.tsx     |  4 ++--
 web/app/_components/LoginButton/index.tsx        |  2 +-
 web/app/_components/ModelSelector/index.tsx      | 12 ++++++------
 web/app/_components/PrimaryButton/index.tsx      |  2 +-
 web/app/_components/SendButton/index.tsx         |  2 +-
 web/app/_components/SimpleTextMessage/index.tsx  |  2 +-
 web/app/_hooks/useDeleteConversation.ts          | 16 ++++++++++------
 7 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/web/app/_components/ConfirmDeleteConversationModal/index.tsx b/web/app/_components/ConfirmDeleteConversationModal/index.tsx
index 4904bc454..42160a1ce 100644
--- a/web/app/_components/ConfirmDeleteConversationModal/index.tsx
+++ b/web/app/_components/ConfirmDeleteConversationModal/index.tsx
@@ -63,8 +63,8 @@ const ConfirmDeleteConversationModal: React.FC = () => {
                     <div className="mt-2">
                       <p className="text-sm text-gray-500">
                         Are you sure you want to delete this conversation? All
-                        of messages will be permanently removed from our servers
-                        forever. This action cannot be undone.
+                        of messages will be permanently removed. This action
+                        cannot be undone.
                       </p>
                     </div>
                   </div>
diff --git a/web/app/_components/LoginButton/index.tsx b/web/app/_components/LoginButton/index.tsx
index c6f09ef70..5f4725cbd 100644
--- a/web/app/_components/LoginButton/index.tsx
+++ b/web/app/_components/LoginButton/index.tsx
@@ -12,7 +12,7 @@ const LoginButton: React.FC = () => {
   //     <button
   //       onClick={signInWithKeyCloak}
   //       type="button"
-  //       className="rounded-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+  //       className="rounded-md bg-blue-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
   //     >
   //       Login
   //     </button>
diff --git a/web/app/_components/ModelSelector/index.tsx b/web/app/_components/ModelSelector/index.tsx
index 0b527117a..b32cd7c4e 100644
--- a/web/app/_components/ModelSelector/index.tsx
+++ b/web/app/_components/ModelSelector/index.tsx
@@ -36,7 +36,7 @@ const SelectModels: React.FC = () => {
             Select a Model:
           </Listbox.Label>
           <div className="relative mt-[19px]">
-            <Listbox.Button className="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 sm:text-sm sm:leading-6">
+            <Listbox.Button className="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6">
               <span className="flex items-center">
                 <img
                   src={selectedModel.avatarUrl}
@@ -68,8 +68,8 @@ const SelectModels: React.FC = () => {
                     key={model.id}
                     className={({ active }) =>
                       classNames(
-                        active ? "bg-indigo-600 text-white" : "text-gray-900",
-                        "relative cursor-default select-none py-2 pl-3 pr-9"
+                        active ? "bg-blue-600 text-white" : "text-gray-900",
+                        "relative cursor-default select-none py-2 pl-3 pr-9",
                       )
                     }
                     value={model}
@@ -85,7 +85,7 @@ const SelectModels: React.FC = () => {
                           <span
                             className={classNames(
                               selected ? "font-semibold" : "font-normal",
-                              "ml-3 block truncate"
+                              "ml-3 block truncate",
                             )}
                           >
                             {model.name}
@@ -95,8 +95,8 @@ const SelectModels: React.FC = () => {
                         {selected ? (
                           <span
                             className={classNames(
-                              active ? "text-white" : "text-indigo-600",
-                              "absolute inset-y-0 right-0 flex items-center pr-4"
+                              active ? "text-white" : "text-blue-600",
+                              "absolute inset-y-0 right-0 flex items-center pr-4",
                             )}
                           >
                             <CheckIcon className="h-5 w-5" aria-hidden="true" />
diff --git a/web/app/_components/PrimaryButton/index.tsx b/web/app/_components/PrimaryButton/index.tsx
index c7b4075b6..14cf3097a 100644
--- a/web/app/_components/PrimaryButton/index.tsx
+++ b/web/app/_components/PrimaryButton/index.tsx
@@ -16,7 +16,7 @@ const PrimaryButton: React.FC<Props> = ({
   <button
     onClick={onClick}
     type="button"
-    className={`rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-50 line-clamp-1 flex-shrink-0 ${className} ${
+    className={`rounded-md bg-blue-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-50 line-clamp-1 flex-shrink-0 ${className} ${
       fullWidth ? "flex-1 " : ""
     }}`}
   >
diff --git a/web/app/_components/SendButton/index.tsx b/web/app/_components/SendButton/index.tsx
index 74b29b079..58052aa14 100644
--- a/web/app/_components/SendButton/index.tsx
+++ b/web/app/_components/SendButton/index.tsx
@@ -25,7 +25,7 @@ const SendButton: React.FC = () => {
       onClick={sendChatMessage}
       style={disabled ? disabledStyle : enabledStyle}
       type="submit"
-      className="p-2 gap-2.5 inline-flex items-center rounded-xl text-sm font-semibold shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+      className="p-2 gap-2.5 inline-flex items-center rounded-xl text-sm font-semibold shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
     >
       <ArrowRightIcon width={16} height={16} />
     </button>
diff --git a/web/app/_components/SimpleTextMessage/index.tsx b/web/app/_components/SimpleTextMessage/index.tsx
index 2ef2c3d63..bb1690f2a 100644
--- a/web/app/_components/SimpleTextMessage/index.tsx
+++ b/web/app/_components/SimpleTextMessage/index.tsx
@@ -53,7 +53,7 @@ const SimpleTextMessage: React.FC<Props> = ({
             </div>
           ))
         ) : (
-          <span className="text-sm">{text}</span>
+          <span className="text-sm leading-loose font-normal">{text}</span>
         )}
       </div>
     </div>
diff --git a/web/app/_hooks/useDeleteConversation.ts b/web/app/_hooks/useDeleteConversation.ts
index 61a3c3653..dc1fd2c41 100644
--- a/web/app/_hooks/useDeleteConversation.ts
+++ b/web/app/_hooks/useDeleteConversation.ts
@@ -19,12 +19,13 @@ import {
 
 export default function useDeleteConversation() {
   const [userConversations, setUserConversations] = useAtom(
-    userConversationsAtom
+    userConversationsAtom,
   );
   const setCurrentPrompt = useSetAtom(currentPromptAtom);
   const setShowingProductDetail = useSetAtom(showingProductDetailAtom);
   const setShowingAdvancedPrompt = useSetAtom(showingAdvancedPromptAtom);
   const activeConvoId = useAtomValue(getActiveConvoIdAtom);
+
   const setActiveConvoId = useSetAtom(setActiveConvoIdAtom);
   const deleteMessages = useSetAtom(deleteConversationMessage);
   const setMainViewState = useSetAtom(setMainViewStateAtom);
@@ -34,14 +35,17 @@ export default function useDeleteConversation() {
       try {
         await execute(DataService.DELETE_CONVERSATION, activeConvoId);
         const currentConversations = userConversations.filter(
-          (c) => c.id !== activeConvoId
+          (c) => c.id !== activeConvoId,
         );
         setUserConversations(currentConversations);
-        if (currentConversations.length === 0) {
-          setMainViewState(MainViewState.Welcome);
-        }
         deleteMessages(activeConvoId);
-        setActiveConvoId(undefined);
+
+        if (currentConversations.length > 0) {
+          setActiveConvoId(currentConversations[0].id);
+        } else {
+          setMainViewState(MainViewState.Welcome);
+          setActiveConvoId(undefined);
+        }
         setCurrentPrompt("");
         setShowingProductDetail(false);
         setShowingAdvancedPrompt(false);