Attempting streaming content

1 files changed, 23 insertions, 9 deletions

diff --git a/src/client/views/nodes/ChatBox/MessageComponent.tsx b/src/client/views/nodes/ChatBox/MessageComponent.tsx
index 70b0527a2..e82dcd5f7 100644
--- a/src/client/views/nodes/ChatBox/MessageComponent.tsx
+++ b/src/client/views/nodes/ChatBox/MessageComponent.tsx
@@ -55,21 +55,35 @@ const MessageComponentBox: React.FC<MessageComponentProps> = function ({ message
                     {item.text}
                 </span>
             );
+        } else if ('query' in item) {
+            // Handle the case where the item has a query property
+            return (
+                <span key={i} className="query-text">
+                    {JSON.stringify(item.query)}
+                </span>
+            );
         } else {
-            return <span key={i}>{item.text}</span>;
+            // Fallback for any other unexpected cases
+            return <span key={i}>{JSON.stringify(item)}</span>;
         }
     };
 
     return (
         <div className={`message ${message.role}`}>
-            <div>
-                {message.thoughts &&
-                    message.thoughts.map((thought, index) => (
-                        <span key={index} className="thought-text">
-                            <i>Thought: {thought}</i>
-                        </span>
-                    ))}
-            </div>
+            {message.thoughts &&
+                message.thoughts.map((thought, idx) => (
+                    <div key={idx} className="thought">
+                        <i>Thought: {thought}</i>
+                    </div>
+                ))}
+            {message.actions &&
+                message.actions.map((action, idx) => (
+                    <div key={idx} className="action">
+                        <strong>Action:</strong> {action.action}
+                        <br />
+                        <strong>Input:</strong> {action.action_input}
+                    </div>
+                ))}
             <div>{message.content && message.content.map(messageFragment => <React.Fragment key={messageFragment.index}>{renderContent(messageFragment)}</React.Fragment>)}</div>
             {message.follow_up_questions && message.follow_up_questions.length > 0 && (
                 <div className="follow-up-questions">