diff --git a/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatInput.tsx b/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatInput.tsx index 5b49b09b12..845488e1f4 100644 --- a/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatInput.tsx +++ b/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatInput.tsx @@ -13,6 +13,7 @@ import { DocumentImportService } from '../../libs/services/DocumentImportService import { useAppDispatch, useAppSelector } from '../../redux/app/hooks'; import { RootState } from '../../redux/app/store'; import { addAlert } from '../../redux/features/app/appSlice'; +import { editConversationInput } from '../../redux/features/conversations/conversationsSlice'; import { SpeechService } from './../../libs/services/SpeechService'; import { TypingIndicatorRenderer } from './typing-indicator/TypingIndicatorRenderer'; @@ -67,13 +68,12 @@ export const ChatInput: React.FC = (props) => { const account = useAccount(accounts[0] || {}); const dispatch = useAppDispatch(); const [value, setValue] = React.useState(''); - const [previousValue, setPreviousValue] = React.useState(''); const [recognizer, setRecognizer] = React.useState(); const [isListening, setIsListening] = React.useState(false); const [documentImporting, SetDocumentImporting] = React.useState(false); const documentImportService = new DocumentImportService(process.env.REACT_APP_BACKEND_URI as string); const documentFileRef = useRef(null); - const { selectedId } = useAppSelector((state: RootState) => state.conversations); + const { conversations, selectedId } = useAppSelector((state: RootState) => state.conversations); React.useEffect(() => { async function initSpeechRecognizer() { @@ -88,6 +88,11 @@ export const ChatInput: React.FC = (props) => { initSpeechRecognizer(); }, [instance, inProgress]); + React.useEffect(() => { + const chatState = conversations[selectedId]; + setValue(chatState.input); + }, [conversations, selectedId]); + const handleSpeech = () => { setIsListening(true); if (recognizer) { @@ -136,8 +141,8 @@ export const ChatInput: React.FC = (props) => { return; // only submit if data is not empty } onSubmit(data); - setPreviousValue(data); setValue(''); + dispatch(editConversationInput({ id: selectedId, newInput: '' })); } catch (error) { const message = `Error submitting chat input: ${(error as Error).message}`; log(message); @@ -148,7 +153,6 @@ export const ChatInput: React.FC = (props) => { }), ); } - // void chat.sendTypingStopSignalAsync(); }; return ( @@ -168,19 +172,15 @@ export const ChatInput: React.FC = (props) => { setValue(chatInput.value); } }} - onChange={(_event, data) => setValue(data.value)} + onChange={(_event, data) => { + setValue(data.value); + dispatch(editConversationInput({ id: selectedId, newInput: data.value })); + }} onKeyDown={(event) => { if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); handleSubmit(value); - return; - } else if (value === '' && previousValue !== '' && event.key === 'ArrowUp') { - event.preventDefault(); - setValue(previousValue); - return; } - - // void chat.sendTypingStartSignalAsync(); }} /> diff --git a/samples/apps/copilot-chat-app/webapp/src/libs/useChat.ts b/samples/apps/copilot-chat-app/webapp/src/libs/useChat.ts index 2078a28659..e56097d3d5 100644 --- a/samples/apps/copilot-chat-app/webapp/src/libs/useChat.ts +++ b/samples/apps/copilot-chat-app/webapp/src/libs/useChat.ts @@ -80,6 +80,7 @@ export const useChat = () => { messages: chatMessages, users: [loggedInUser], botProfilePicture: getBotProfilePicture(Object.keys(conversations).length), + input: '', }; dispatch(addConversation(newChat)); @@ -184,6 +185,7 @@ export const useChat = () => { users: [loggedInUser], messages: chatMessages, botProfilePicture: getBotProfilePicture(Object.keys(loadedConversations).length), + input: '', }; } diff --git a/samples/apps/copilot-chat-app/webapp/src/redux/features/conversations/ChatState.ts b/samples/apps/copilot-chat-app/webapp/src/redux/features/conversations/ChatState.ts index 4dff005988..643cce4986 100644 --- a/samples/apps/copilot-chat-app/webapp/src/redux/features/conversations/ChatState.ts +++ b/samples/apps/copilot-chat-app/webapp/src/redux/features/conversations/ChatState.ts @@ -10,4 +10,5 @@ export interface ChatState { messages: IChatMessage[]; botProfilePicture: string; lastUpdatedTimestamp?: number; + input: string; } diff --git a/samples/apps/copilot-chat-app/webapp/src/redux/features/conversations/ConversationsState.ts b/samples/apps/copilot-chat-app/webapp/src/redux/features/conversations/ConversationsState.ts index 3764c33467..f7df4c0634 100644 --- a/samples/apps/copilot-chat-app/webapp/src/redux/features/conversations/ConversationsState.ts +++ b/samples/apps/copilot-chat-app/webapp/src/redux/features/conversations/ConversationsState.ts @@ -26,3 +26,8 @@ export interface ConversationTitleChange { id: string; newTitle: string; } + +export interface ConversationInputChange { + id: string; + newInput: string; +} diff --git a/samples/apps/copilot-chat-app/webapp/src/redux/features/conversations/conversationsSlice.ts b/samples/apps/copilot-chat-app/webapp/src/redux/features/conversations/conversationsSlice.ts index 16ce3bfb2a..ed1df1c793 100644 --- a/samples/apps/copilot-chat-app/webapp/src/redux/features/conversations/conversationsSlice.ts +++ b/samples/apps/copilot-chat-app/webapp/src/redux/features/conversations/conversationsSlice.ts @@ -3,7 +3,7 @@ import { createSlice, PayloadAction, Slice } from '@reduxjs/toolkit'; import { ChatMessageState, IChatMessage } from '../../../libs/models/ChatMessage'; import { ChatState } from './ChatState'; -import { Conversations, ConversationsState, ConversationTitleChange, initialState } from './ConversationsState'; +import { ConversationInputChange, Conversations, ConversationsState, ConversationTitleChange, initialState } from './ConversationsState'; export const conversationsSlice: Slice = createSlice({ name: 'conversations', @@ -19,6 +19,11 @@ export const conversationsSlice: Slice = createSlice({ state.conversations[id].lastUpdatedTimestamp = new Date().getTime(); frontLoadChat(state, id); }, + editConversationInput: (state: ConversationsState, action: PayloadAction) => { + const id = action.payload.id; + const newInput = action.payload.newInput; + state.conversations[id].input = newInput; + }, setSelectedConversation: (state: ConversationsState, action: PayloadAction) => { state.selectedId = action.payload; }, @@ -52,6 +57,7 @@ export const conversationsSlice: Slice = createSlice({ export const { setConversations, editConversationTitle, + editConversationInput, setSelectedConversation, addConversation, updateConversation,