- {newChatSequence.map((msg, index) =>
- // eslint-disable-next-line no-nested-ternary
- msg.sender === "user" || msg.sender === "assistant" ? (
-
- ) : (
-
- ),
- )}
+ {newChatSequence.map((msg, index) => (
+
+ ))}
{typingActive && (
diff --git a/frontend/src/hooks/useTypingEffect.ts b/frontend/src/hooks/useTypingEffect.ts
index 4cd1f80e8b..996b3bdba0 100644
--- a/frontend/src/hooks/useTypingEffect.ts
+++ b/frontend/src/hooks/useTypingEffect.ts
@@ -9,25 +9,23 @@ export const useTypingEffect = (
loop = false,
playbackRate = 0.1,
setTypingActive = () => {},
- setCurrentQueueMarkerState = () => {},
- currentQueueMarker = 0,
addAssistantMessageToChat = () => {},
- assistantMessageObj = { content: "", sender: "assistant" },
+ takeOneAndType = () => {},
+ typeThis = { content: "", sender: "assistant" },
}: {
loop?: boolean;
playbackRate?: number;
setTypingActive?: (bool: boolean) => void;
- setCurrentQueueMarkerState?: (marker: number) => void;
- currentQueueMarker?: number;
addAssistantMessageToChat?: (msg: Message) => void;
- assistantMessageObj?: Message;
+ takeOneAndType?: () => void;
+ typeThis?: Message;
} = {
loop: false,
playbackRate: 0.1,
setTypingActive: () => {},
- currentQueueMarker: 0,
addAssistantMessageToChat: () => {},
- assistantMessageObj: { content: "", sender: "assistant" },
+ takeOneAndType: () => {},
+ typeThis: { content: "", sender: "assistant" },
},
) => {
// eslint-disable-next-line prefer-const
@@ -50,8 +48,8 @@ export const useTypingEffect = (
if (stringIndex === strings.length) {
if (!loop) {
setTypingActive(false);
- setCurrentQueueMarkerState(currentQueueMarker + 1);
- addAssistantMessageToChat(assistantMessageObj);
+ addAssistantMessageToChat(typeThis);
+ takeOneAndType();
return;
}
stringIndex = 0;
@@ -73,6 +71,7 @@ export const useTypingEffect = (
return () => {
window.clearTimeout(timeoutId);
};
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const nonBreakingSpace = "\u00A0";
diff --git a/frontend/src/services/chatService.ts b/frontend/src/services/chatService.ts
index 4250032d48..a735e6b88e 100644
--- a/frontend/src/services/chatService.ts
+++ b/frontend/src/services/chatService.ts
@@ -2,9 +2,7 @@ import {
Message,
appendToNewChatSequence,
appendUserMessage,
- emptyOutQueuedTyping,
- setCurrentQueueMarker,
- setCurrentTypingMessage,
+ takeOneTypeIt,
toggleTypingActive,
} from "../state/chatSlice";
import Socket from "./socket";
@@ -39,17 +37,9 @@ export function sendChatMessageFromEvent(event: string | SocketMessage): void {
export function setTypingActive(bool: boolean): void {
store.dispatch(toggleTypingActive(bool));
}
-
-export function resetQueuedTyping(): void {
- store.dispatch(emptyOutQueuedTyping());
-}
-
-export function setCurrentTypingMsgState(msg: string): void {
- store.dispatch(setCurrentTypingMessage(msg));
-}
-export function setCurrentQueueMarkerState(index: number): void {
- store.dispatch(setCurrentQueueMarker(index));
-}
export function addAssistantMessageToChat(msg: Message): void {
store.dispatch(appendToNewChatSequence(msg));
}
+export function takeOneAndType(): void {
+ store.dispatch(takeOneTypeIt());
+}
diff --git a/frontend/src/state/chatSlice.ts b/frontend/src/state/chatSlice.ts
index 6dafd14e26..9582811174 100644
--- a/frontend/src/state/chatSlice.ts
+++ b/frontend/src/state/chatSlice.ts
@@ -6,19 +6,16 @@ export type Message = {
};
const initialMessages: Message[] = [];
-const queuedMessages: number[] = [];
-const currentQueueMarker: number = 0;
export const chatSlice = createSlice({
name: "chat",
initialState: {
messages: initialMessages,
- queuedTyping: queuedMessages,
typingActive: false,
- currentTypingMessage: "",
- currentQueueMarker,
userMessages: initialMessages,
assistantMessages: initialMessages,
+ assistantMessagesTypingQueue: initialMessages,
newChatSequence: initialMessages,
+ typeThis: { content: "", sender: "assistant" } as Message,
},
reducers: {
appendUserMessage: (state, action) => {
@@ -28,30 +25,40 @@ export const chatSlice = createSlice({
},
appendAssistantMessage: (state, action) => {
state.messages.push({ content: action.payload, sender: "assistant" });
- state.assistantMessages.push({
- content: action.payload,
- sender: "assistant",
- });
- // state.queuedTyping.push(action.payload);
- const assistantMessageIndex = state.messages.length - 1;
- state.queuedTyping.push(assistantMessageIndex);
- },
- setCurrentQueueMarker: (state, action) => {
- state.currentQueueMarker = action.payload;
+
+ if (
+ state.assistantMessagesTypingQueue.length > 0 ||
+ state.typingActive === true
+ ) {
+ state.assistantMessagesTypingQueue.push({
+ content: action.payload,
+ sender: "assistant",
+ });
+ } else if (
+ state.assistantMessagesTypingQueue.length === 0 &&
+ state.typingActive === false
+ ) {
+ state.typeThis = {
+ content: action.payload,
+ sender: "assistant",
+ };
+ state.typingActive = true;
+ }
},
+
toggleTypingActive: (state, action) => {
state.typingActive = action.payload;
},
- emptyOutQueuedTyping: (state) => {
- state.queuedTyping = [];
- },
- setCurrentTypingMessage: (state, action) => {
- state.currentTypingMessage = action.payload;
- // state.currentQueueMarker += 1;
- },
+
appendToNewChatSequence: (state, action) => {
state.newChatSequence.push(action.payload);
},
+
+ takeOneTypeIt: (state) => {
+ if (state.assistantMessagesTypingQueue.length > 0) {
+ state.typeThis = state.assistantMessagesTypingQueue.shift() as Message;
+ }
+ },
},
});
@@ -59,10 +66,8 @@ export const {
appendUserMessage,
appendAssistantMessage,
toggleTypingActive,
- emptyOutQueuedTyping,
- setCurrentTypingMessage,
- setCurrentQueueMarker,
appendToNewChatSequence,
+ takeOneTypeIt,
} = chatSlice.actions;
export default chatSlice.reducer;