From 341b1096740c0152ffa398360c20b4b6b40e8b5b Mon Sep 17 00:00:00 2001
From: michael <michael_chia7@msn.com>
Date: Fri, 30 Aug 2024 21:32:25 +0800
Subject: [PATCH] use tooltippedbutton + do not show new chat button on welcome

---
 .../chat-messages/chat-message-delete.tsx     |  8 ++--
 packages/jupyter-ai/src/components/chat.tsx   | 38 +++++++++++--------
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/packages/jupyter-ai/src/components/chat-messages/chat-message-delete.tsx b/packages/jupyter-ai/src/components/chat-messages/chat-message-delete.tsx
index e0708b9f1..7769413e8 100644
--- a/packages/jupyter-ai/src/components/chat-messages/chat-message-delete.tsx
+++ b/packages/jupyter-ai/src/components/chat-messages/chat-message-delete.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import { IconButton, SxProps } from '@mui/material';
+import { SxProps } from '@mui/material';
 import { Close } from '@mui/icons-material';
 
 import { AiService } from '../../handler';
 import { ChatHandler } from '../../chat_handler';
+import { TooltippedIconButton } from '../mui-extras/tooltipped-icon-button';
 
 type DeleteButtonProps = {
   message: AiService.ChatMessage;
@@ -17,12 +18,13 @@ export function ChatMessageDelete(props: DeleteButtonProps): JSX.Element {
     target: props.message.id
   };
   return (
-    <IconButton
+    <TooltippedIconButton
       onClick={() => props.chatHandler.sendMessage(request)}
       sx={props.sx}
+      tooltip="Delete this and all future messages"
     >
       <Close />
-    </IconButton>
+    </TooltippedIconButton>
   );
 }
 
diff --git a/packages/jupyter-ai/src/components/chat.tsx b/packages/jupyter-ai/src/components/chat.tsx
index d1be98bc9..dbff8b65f 100644
--- a/packages/jupyter-ai/src/components/chat.tsx
+++ b/packages/jupyter-ai/src/components/chat.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Box } from '@mui/system';
-import { Button, IconButton, Stack, Tooltip } from '@mui/material';
+import { Button, IconButton, Stack } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import AddIcon from '@mui/icons-material/Add';
@@ -25,10 +25,13 @@ import {
   ActiveCellManager
 } from '../contexts/active-cell-context';
 import { ScrollContainer } from './scroll-container';
+import { TooltippedIconButton } from './mui-extras/tooltipped-icon-button';
 
 type ChatBodyProps = {
   chatHandler: ChatHandler;
-  setChatView: (view: ChatView) => void;
+  openSettingsView: () => void;
+  showWelcomeMessage: boolean;
+  setShowWelcomeMessage: (show: boolean) => void;
   rmRegistry: IRenderMimeRegistry;
   focusInputSignal: ISignal<unknown, void>;
   messageFooter: IJaiMessageFooter | null;
@@ -52,7 +55,9 @@ function getPersonaName(messages: AiService.ChatMessage[]): string {
 function ChatBody({
   chatHandler,
   focusInputSignal,
-  setChatView: chatViewHandler,
+  openSettingsView,
+  showWelcomeMessage,
+  setShowWelcomeMessage,
   rmRegistry: renderMimeRegistry,
   messageFooter
 }: ChatBodyProps): JSX.Element {
@@ -65,7 +70,6 @@ function ChatBody({
   const [personaName, setPersonaName] = useState<string>(
     getPersonaName(messages)
   );
-  const [showWelcomeMessage, setShowWelcomeMessage] = useState<boolean>(false);
   const [sendWithShiftEnter, setSendWithShiftEnter] = useState(true);
 
   /**
@@ -104,11 +108,6 @@ function ChatBody({
     };
   }, [chatHandler]);
 
-  const openSettingsView = () => {
-    setShowWelcomeMessage(false);
-    chatViewHandler(ChatView.Settings);
-  };
-
   if (showWelcomeMessage) {
     return (
       <Box
@@ -188,6 +187,12 @@ enum ChatView {
 
 export function Chat(props: ChatProps): JSX.Element {
   const [view, setView] = useState<ChatView>(props.chatView || ChatView.Chat);
+  const [showWelcomeMessage, setShowWelcomeMessage] = useState<boolean>(false);
+
+  const openSettingsView = () => {
+    setShowWelcomeMessage(false);
+    setView(ChatView.Settings);
+  };
 
   return (
     <JlThemeProvider themeManager={props.themeManager}>
@@ -219,16 +224,17 @@ export function Chat(props: ChatProps): JSX.Element {
                 )}
                 {view === ChatView.Chat ? (
                   <Box sx={{ display: 'flex' }}>
-                    <Tooltip title="New Chat">
-                      <IconButton
+                    {!showWelcomeMessage && (
+                      <TooltippedIconButton
                         onClick={() =>
                           props.chatHandler.sendMessage({ type: 'clear' })
                         }
+                        tooltip="New chat"
                       >
                         <AddIcon />
-                      </IconButton>
-                    </Tooltip>
-                    <IconButton onClick={() => setView(ChatView.Settings)}>
+                      </TooltippedIconButton>
+                    )}
+                    <IconButton onClick={() => openSettingsView()}>
                       <SettingsIcon />
                     </IconButton>
                   </Box>
@@ -240,7 +246,9 @@ export function Chat(props: ChatProps): JSX.Element {
               {view === ChatView.Chat && (
                 <ChatBody
                   chatHandler={props.chatHandler}
-                  setChatView={setView}
+                  openSettingsView={openSettingsView}
+                  showWelcomeMessage={showWelcomeMessage}
+                  setShowWelcomeMessage={setShowWelcomeMessage}
                   rmRegistry={props.rmRegistry}
                   focusInputSignal={props.focusInputSignal}
                   messageFooter={props.messageFooter}