Bug10177 fixed Edit and Delete btn disable when message is generating

Author: Himanshi Agrawal

frontend/src/components/ChatHistory/ChatHistoryListItem.tsx

@@ -60,7 +60,8 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
   const [errorRename, setErrorRename] = useState<string | undefined>(undefined)
   const [textFieldFocused, setTextFieldFocused] = useState(false)
   const textFieldRef = useRef<ITextField | null>(null)
-
+  const [isButtonDisabled, setIsButtonDisabled] = useState<boolean>(false);
+  
   const appStateContext = React.useContext(AppStateContext)
   const isSelected = item?.id === appStateContext?.state.currentChat?.id
   const dialogContentProps = {
@@ -95,6 +96,12 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
     }
   }, [appStateContext?.state.currentChat?.id, item?.id])
 
+  useEffect(()=>{
+    let v = appStateContext?.state.isRequestInitiated;
+    if(v!=undefined)
+      setIsButtonDisabled(v && isSelected)
+  },[appStateContext?.state.isRequestInitiated])
+
   const onDelete = async () => {
     const response = await historyDelete(item.id)
     if (!response.ok) {
@@ -267,13 +274,15 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
                   iconProps={{ iconName: 'Delete' }}
                   title="Delete"
                   onClick={toggleDeleteDialog}
+                  disabled={isButtonDisabled}
                   onKeyDown={e => (e.key === ' ' ? toggleDeleteDialog() : null)}
                 />
                 <IconButton
                   className={styles.itemButton}
                   iconProps={{ iconName: 'Edit' }}
                   title="Edit"
                   onClick={onEdit}
+                  disabled={isButtonDisabled}
                   onKeyDown={e => (e.key === ' ' ? onEdit() : null)}
                 />
               </Stack>

frontend/src/pages/chat/Chat.tsx

@@ -287,6 +287,7 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
     setShowLoadingMessage(true)
     const abortController = new AbortController()
     abortFuncs.current.unshift(abortController)
+    appStateContext?.dispatch({ type: 'SET_IS_REQUEST_INITIATED', payload: true })
 
     const userMessage: ChatMessage = {
       id: uuid(),
@@ -402,6 +403,7 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
       setShowLoadingMessage(false)
       appStateContext?.dispatch({ type: 'GENERATE_ISLODING', payload: false })
       abortFuncs.current = abortFuncs.current.filter(a => a !== abortController)
+      appStateContext?.dispatch({ type: 'SET_IS_REQUEST_INITIATED', payload: false })
       setProcessMessages(messageStatus.Done)
     }
 
@@ -414,6 +416,8 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
     setShowLoadingMessage(true)
     const abortController = new AbortController()
     abortFuncs.current.unshift(abortController)
+    appStateContext?.dispatch({ type: 'SET_IS_REQUEST_INITIATED', payload: true })
+
 
     const userMessage: ChatMessage = {
       id: uuid(),
@@ -640,6 +644,7 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
       setShowLoadingMessage(false)
       abortFuncs.current = abortFuncs.current.filter(a => a !== abortController)
       setProcessMessages(messageStatus.Done)
+      appStateContext?.dispatch({ type: 'SET_IS_REQUEST_INITIATED', payload: false })
     }
     return abortController.abort()
   }

frontend/src/state/AppProvider.tsx

@@ -30,6 +30,7 @@ export interface AppState {
   draftedDocument: DraftedDocument | null
   draftedDocumentTitle: string
   isGenerating: boolean
+  isRequestInitiated : boolean
 }
 
 export type Action =
@@ -56,6 +57,7 @@ export type Action =
   | { type: 'UPDATE_GENERATE_CHAT'; payload: Conversation | null }
   | { type: 'UPDATE_DRAFTED_DOCUMENT_TITLE'; payload: string }
   | { type: 'GENERATE_ISLODING'; payload: boolean }
+  | { type: 'SET_IS_REQUEST_INITIATED'; payload: boolean }
 
 const initialState: AppState = {
   isChatHistoryOpen: false,
@@ -73,7 +75,8 @@ const initialState: AppState = {
   feedbackState: {},
   draftedDocument: null,
   draftedDocumentTitle: '',
-  isGenerating: false
+  isGenerating: false,
+  isRequestInitiated: false,
 }
 
 export const AppStateContext = createContext<

frontend/src/state/AppReducer.tsx

@@ -103,6 +103,8 @@ export const appStateReducer = (state: AppState, action: Action): AppState => {
       return { ...state, draftedDocumentTitle: action.payload }
     case 'GENERATE_ISLODING':
       return { ...state, isGenerating: action.payload }
+      case 'SET_IS_REQUEST_INITIATED' : 
+      return {...state, isRequestInitiated : action.payload}
     default:
       return state
   }