*/}
-
-
- {text}
-
-
-
-
-
+ ) : edit ? (
+
+ {/*
*/}
+
+
+ {text}
- ) : (
-
- {/*
*/}
-
- {!isCreatedByUser ? wrapText(text) : text}
- {blinker && █}
-
+
+
+
- )}
+
+ ) : (
+
+ {/*
*/}
+
+ {!isCreatedByUser ? (
+
+ ) : (
+ text
+ )}
+
+
+ )}
-
enterEdit()}/>
+ enterEdit()}
+ />
);
diff --git a/client/src/components/Messages/MultiMessage.jsx b/client/src/components/Messages/MultiMessage.jsx
new file mode 100644
index 0000000000..24ab761eb6
--- /dev/null
+++ b/client/src/components/Messages/MultiMessage.jsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import Message from './Message';
+
+export default function MultiMessage({
+ messageList,
+ messages,
+ scrollToBottom,
+ currentEditId,
+ setCurrentEditId
+}) {
+ const [siblingIdx, setSiblingIdx] = useState(0);
+
+ const setSiblingIdxRev = (value) => {
+ setSiblingIdx(messageList?.length - value - 1);
+ };
+
+ // if (!messageList?.length) return null;
+ if (!(messageList && messageList.length)) {
+ return null;
+ }
+
+ if (siblingIdx >= messageList?.length) {
+ setSiblingIdx(0);
+ return null;
+ }
+
+ return (
+
+ );
+}
diff --git a/client/src/components/Messages/TextWrapper.jsx b/client/src/components/Messages/TextWrapper.jsx
index af38b56a5c..75766bca0c 100644
--- a/client/src/components/Messages/TextWrapper.jsx
+++ b/client/src/components/Messages/TextWrapper.jsx
@@ -46,8 +46,9 @@ const inLineWrap = (parts) => {
});
};
-export default function TextWrapper({ text }) {
+export default function TextWrapper({ text, generateCursor }) {
let embedTest = false;
+ let result = null;
// to match unenclosed code blocks
if (text.match(/```/g)?.length === 1) {
@@ -137,13 +138,23 @@ export default function TextWrapper({ text }) {
}
});
- return <>{codeParts}; // return the wrapped text
+ // return <>{codeParts}; // return the wrapped text
+ result = <>{codeParts};
} else if (text.match(markupRegex)) {
// map over the parts and wrap any text between tildes with
tags
const parts = text.split(markupRegex);
const codeParts = inLineWrap(parts);
- return <>{codeParts}; // return the wrapped text
+ // return <>{codeParts}; // return the wrapped text
+ result = <>{codeParts};
} else {
- return {text};
+ // return {text};
+ result = {text};
}
+
+ return (
+ <>
+ {result}
+ {(<>{generateCursor()})}
+
+ );
}
diff --git a/client/src/components/Messages/index.jsx b/client/src/components/Messages/index.jsx
index 85c671d691..611a0231d3 100644
--- a/client/src/components/Messages/index.jsx
+++ b/client/src/components/Messages/index.jsx
@@ -1,12 +1,12 @@
import React, { useEffect, useState, useRef, useMemo } from 'react';
+import Spinner from '../svg/Spinner';
import { CSSTransition } from 'react-transition-group';
import ScrollToBottom from './ScrollToBottom';
-import { MultiMessage } from './Message';
-import Conversation from '../Conversations/Conversation';
+import MultiMessage from './MultiMessage';
import { useSelector } from 'react-redux';
-const Messages = ({ messages }) => {
- const [currentEditId, setCurrentEditId] = useState(-1)
+const Messages = ({ messages, messageTree }) => {
+ const [currentEditId, setCurrentEditId] = useState(-1);
const { conversationId } = useSelector((state) => state.convo);
const [showScrollButton, setShowScrollButton] = useState(false);
const scrollableRef = useRef(null);
@@ -23,26 +23,6 @@ const Messages = ({ messages }) => {
clearTimeout(timeoutId);
};
}, [messages]);
-
- const messageTree = useMemo(() => buildTree(messages), [messages, ]);
-
- function buildTree(messages) {
- let messageMap = {};
- let rootMessages = [];
-
- // Traverse the messages array and store each element in messageMap.
- messages.forEach(message => {
- messageMap[message.messageId] = {...message, children: []};
-
- const parentMessage = messageMap[message.parentMessageId];
- if (parentMessage)
- parentMessage.children.push(messageMap[message.messageId]);
- else
- rootMessages.push(messageMap[message.messageId]);
- });
-
- return rootMessages;
- }
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -79,28 +59,33 @@ const Messages = ({ messages }) => {
onScroll={debouncedHandleScroll}
>
{/* */}
-
-
-
-
- {() => showScrollButton && }
-
-
+
+
+ {messageTree.length === 0 ? (
+
+ ) : (
+ <>
+
+
+ {() => showScrollButton && }
+
+
+ )}
@@ -110,4 +95,4 @@ const Messages = ({ messages }) => {
);
};
-export default Messages;
+export default React.memo(Messages);
diff --git a/client/src/store/messageSlice.js b/client/src/store/messageSlice.js
index 137c329822..955d0c98f8 100644
--- a/client/src/store/messageSlice.js
+++ b/client/src/store/messageSlice.js
@@ -1,7 +1,9 @@
import { createSlice } from '@reduxjs/toolkit';
+import buildTree from '~/utils/buildTree';
const initialState = {
messages: [],
+ messageTree: []
};
const currentSlice = createSlice({
@@ -10,6 +12,7 @@ const currentSlice = createSlice({
reducers: {
setMessages: (state, action) => {
state.messages = action.payload;
+ state.messageTree = buildTree(action.payload);
},
setEmptyMessage: (state) => {
state.messages = [
diff --git a/client/src/style.css b/client/src/style.css
index c4a03408b7..30fae19b40 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -1251,7 +1251,6 @@ html {
vertical-align: baseline;
}
-
/* .result-streaming>:not(ol):not(ul):not(pre):last-child:after,
.result-streaming>ol:last-child li:last-child:after,
.result-streaming>pre:last-child code:after,
diff --git a/client/src/utils/buildTree.js b/client/src/utils/buildTree.js
new file mode 100644
index 0000000000..a030509bca
--- /dev/null
+++ b/client/src/utils/buildTree.js
@@ -0,0 +1,17 @@
+export default function buildTree(messages) {
+ let messageMap = {};
+ let rootMessages = [];
+
+ // Traverse the messages array and store each element in messageMap.
+ messages.forEach(message => {
+ messageMap[message.messageId] = {...message, children: []};
+
+ const parentMessage = messageMap[message.parentMessageId];
+ if (parentMessage)
+ parentMessage.children.push(messageMap[message.messageId]);
+ else
+ rootMessages.push(messageMap[message.messageId]);
+ });
+
+ return rootMessages;
+}
\ No newline at end of file