mirror of
https://github.com/Mintplex-Labs/anything-llm.git
synced 2024-09-21 03:40:52 +02:00
WIP streaming prints to embedded app
This commit is contained in:
shatfield4
parent
a0e1152258
commit
28a9cf52ec
@ -1,4 +1,4 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import AnythingLLMLogo from "./assets/anything-llm-dark.png";
|
||||
import "./App.css";
|
||||
import { v4 } from "uuid";
|
||||
@ -8,6 +8,8 @@ export default function App() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [message, setMessage] = useState("");
|
||||
const [userId, setUserId] = useState("");
|
||||
const [chatMessages, setChatMessages] = useState([]);
|
||||
const eventSourceRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
let id = localStorage.getItem("userId");
|
||||
@ -25,24 +27,30 @@ export default function App() {
|
||||
// }
|
||||
};
|
||||
|
||||
const handleChat = (chatResult) => {
|
||||
setChatMessages((prev) => [...prev, chatResult]);
|
||||
if (chatResult.close) {
|
||||
eventSourceRef.current?.abort();
|
||||
console.log("message stream completed");
|
||||
}
|
||||
};
|
||||
|
||||
const streamMessages = async () => {
|
||||
const ctrl = new AbortController();
|
||||
eventSourceRef.current = ctrl;
|
||||
|
||||
await fetchEventSource(
|
||||
`http://localhost:3001/api/workspace/hello/stream-chat`,
|
||||
{
|
||||
method: "POST",
|
||||
body: JSON.stringify({ message, mode: "query" }),
|
||||
body: JSON.stringify({ message, mode: "chat" }),
|
||||
// headers: baseHeaders(),
|
||||
signal: ctrl.signal,
|
||||
openWhenHidden: true,
|
||||
async onopen(response) {
|
||||
onopen(response) {
|
||||
if (response.ok) {
|
||||
return; // everything's good
|
||||
} else if (
|
||||
response.status >= 400 &&
|
||||
response.status < 500 &&
|
||||
response.status !== 429
|
||||
) {
|
||||
// everything's good
|
||||
} else {
|
||||
handleChat({
|
||||
id: v4(),
|
||||
type: "abort",
|
||||
@ -52,26 +60,16 @@ export default function App() {
|
||||
error: `An error occurred while streaming response. Code ${response.status}`,
|
||||
});
|
||||
ctrl.abort();
|
||||
throw new Error("Invalid Status code response.");
|
||||
} else {
|
||||
handleChat({
|
||||
id: v4(),
|
||||
type: "abort",
|
||||
textResponse: null,
|
||||
sources: [],
|
||||
close: true,
|
||||
error: `An error occurred while streaming response. Unknown Error.`,
|
||||
});
|
||||
ctrl.abort();
|
||||
throw new Error("Unknown error");
|
||||
}
|
||||
},
|
||||
async onmessage(msg) {
|
||||
onmessage(msg) {
|
||||
try {
|
||||
const chatResult = JSON.parse(msg.data);
|
||||
console.log(chatResult);
|
||||
console.log("chatResult: ", chatResult);
|
||||
handleChat(chatResult);
|
||||
} catch {}
|
||||
} catch (error) {
|
||||
console.error("Error parsing message:", error);
|
||||
}
|
||||
},
|
||||
onerror(err) {
|
||||
handleChat({
|
||||
@ -83,32 +81,9 @@ export default function App() {
|
||||
error: `An error occurred while streaming response. ${err.message}`,
|
||||
});
|
||||
ctrl.abort();
|
||||
throw new Error();
|
||||
},
|
||||
}
|
||||
);
|
||||
// fetchEventSource(
|
||||
// `http://localhost:3001/api/workspace/${userId}/embedded-chat`,
|
||||
// {
|
||||
// onmessage(event) {
|
||||
// try {
|
||||
// // Assuming the data is in the format "data: <actual_JSON_data>"
|
||||
// // Extracting the JSON part from the data and parsing it.
|
||||
// const jsonPart = event.data.replace(/^data: /, "");
|
||||
// const parsedData = JSON.parse(jsonPart);
|
||||
// console.log("Parsed data:", parsedData);
|
||||
// } catch (error) {
|
||||
// console.error("Error parsing event data:", error);
|
||||
// }
|
||||
// },
|
||||
// onopen() {
|
||||
// console.log("Connection opened");
|
||||
// },
|
||||
// onerror(err) {
|
||||
// console.error("EventSource failed:", err);
|
||||
// },
|
||||
// }
|
||||
// );
|
||||
};
|
||||
|
||||
const sendMessage = async () => {
|
||||
@ -137,6 +112,9 @@ export default function App() {
|
||||
});
|
||||
};
|
||||
|
||||
console.log("chatMessages: ", chatMessages);
|
||||
console.log("isOpen: ", isOpen);
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-0 right-0 mb-4 mr-4 z-50">
|
||||
<div
|
||||
@ -166,6 +144,11 @@ export default function App() {
|
||||
></input>
|
||||
<button onClick={sendMessage}>Send message</button>
|
||||
</div>
|
||||
<div className="chat-messages">
|
||||
{chatMessages.map((msg) => (
|
||||
<p key={msg.id}>{msg.textResponse || msg.error}</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-4 text-md text-blue-500 hover:text-opacity-30 text-center hover:cursor-pointer">
|
||||
Learn more
|
||||
@ -186,148 +169,6 @@ export default function App() {
|
||||
);
|
||||
}
|
||||
|
||||
// import { useState } from 'react';
|
||||
// import AnythingLLMLogo from './assets/anything-llm-dark.png';
|
||||
|
||||
// function App() {
|
||||
// const [isOpen, setIsOpen] = useState(false);
|
||||
// const [count, setCount] = useState(0);
|
||||
// const [message, setMessage] = useState('');
|
||||
|
||||
// const toggleOpen = () => setIsOpen(!isOpen);
|
||||
|
||||
// const sendMessage = () => {
|
||||
// console.log(message);
|
||||
// fetch('http://localhost:3001/api/workspace/1/embedded-chat', {
|
||||
// method: 'POST',
|
||||
// body: JSON.stringify({
|
||||
// message: message,
|
||||
// }),
|
||||
// })
|
||||
// .then((response) => response.json())
|
||||
// .then((data) => {
|
||||
// console.log('Success:', data);
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.error('Error:', error);
|
||||
// });
|
||||
// }
|
||||
|
||||
// const containerStyle = {
|
||||
// position: 'fixed',
|
||||
// bottom: '1rem',
|
||||
// right: '1rem',
|
||||
// zIndex: 50,
|
||||
// transition: 'all 300ms ease-in-out',
|
||||
// maxWidth: isOpen ? '20rem' : '4rem',
|
||||
// padding: isOpen ? '1rem' : '0',
|
||||
// backgroundColor: isOpen ? 'white' : 'transparent',
|
||||
// borderRadius: isOpen ? '0.5rem' : '9999px',
|
||||
// border: isOpen ? '1px solid rgba(0, 0, 0, 0.1)' : 'none',
|
||||
// boxShadow: isOpen ? '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)' : 'none',
|
||||
// width: isOpen ? 'auto' : '4rem',
|
||||
// height: isOpen ? 'auto' : '4rem',
|
||||
// };
|
||||
|
||||
// const buttonStyle = {
|
||||
// padding: '0.5rem 1rem',
|
||||
// backgroundColor: '#3B82F6',
|
||||
// color: 'white',
|
||||
// borderRadius: '0.25rem',
|
||||
// transition: 'background-color 300ms',
|
||||
// cursor: 'pointer',
|
||||
// };
|
||||
|
||||
// const toggleButtonStyle = {
|
||||
// position: 'absolute',
|
||||
// top: '0',
|
||||
// right: '0',
|
||||
// width: '4rem',
|
||||
// height: '4rem',
|
||||
// borderRadius: '9999px',
|
||||
// backgroundColor: isOpen ? 'white' : '#3B82F6',
|
||||
// cursor: 'pointer',
|
||||
// display: 'flex',
|
||||
// alignItems: 'center',
|
||||
// justifyContent: 'center',
|
||||
// fontSize: '1.5rem',
|
||||
// };
|
||||
|
||||
// const logoStyle = {
|
||||
// padding: isOpen ? '2.5rem' : '0',
|
||||
// };
|
||||
|
||||
// const cardStyle = {
|
||||
// marginTop: '1rem',
|
||||
// padding: '1rem',
|
||||
// backgroundColor: '#F3F4F6',
|
||||
// borderRadius: '0.25rem',
|
||||
// display: 'flex',
|
||||
// flexDirection: 'column',
|
||||
// alignItems: 'center',
|
||||
// justifyContent: 'center',
|
||||
// };
|
||||
|
||||
// const codeStyle = {
|
||||
// backgroundColor: '#E5E7EB',
|
||||
// borderRadius: '0.25rem',
|
||||
// padding: '0.25rem',
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <div style={containerStyle}>
|
||||
// {isOpen && (
|
||||
// <>
|
||||
// <div style={{ display: 'flex', justifyContent: 'center' }}>
|
||||
// <img style={logoStyle} src={AnythingLLMLogo} alt='AnythingLLM Logo' />
|
||||
// </div>
|
||||
// <h1 style={{ fontSize: '1.125rem', textAlign: 'center', fontWeight: '600' }}>Hello from Embedded App 👋</h1>
|
||||
// <div style={cardStyle}>
|
||||
// <button
|
||||
// onClick={() => setCount((count) => count + 1)}
|
||||
// style={buttonStyle}
|
||||
// onMouseEnter={() => (buttonStyle.backgroundColor = '#2563EB')}
|
||||
// onMouseLeave={() => (buttonStyle.backgroundColor = '#3B82F6')}
|
||||
// >
|
||||
// count is {count}
|
||||
// </button>
|
||||
// <p style={{ marginTop: '0.5rem' }}>
|
||||
// Edit <code style={codeStyle}>src/App.jsx</code> and save to test HMR
|
||||
// </p>
|
||||
// <div className='flex'>
|
||||
// <input onChange={(e) => setMessage(e.target.value)} placeholder='Enter a message...'></input>
|
||||
// <button onClick={sendMessage}>Send message</button>
|
||||
// </div>
|
||||
// </div>
|
||||
// <p style={{ marginTop: '1rem', fontSize: '1rem', color: '#2563EB', textAlign: 'center', cursor: 'pointer', opacity: '0.5' }}>
|
||||
// Learn more
|
||||
// </p>
|
||||
// </>
|
||||
// )}
|
||||
// <button
|
||||
// onClick={toggleOpen}
|
||||
// style={toggleButtonStyle}
|
||||
// aria-label="Toggle Menu"
|
||||
// >
|
||||
// {isOpen ? 'X' : '+'}
|
||||
// </button>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
// export default App;
|
||||
|
||||
// Script to load the embedded-anything-llm.umd.js on page with <script></script>
|
||||
// var script = document.createElement('script');
|
||||
// script.src = 'http://localhost:5000/embedded-anything-llm.umd.js';
|
||||
// script.onload = function() {
|
||||
// console.log('Script loaded successfully.');
|
||||
// };
|
||||
// script.onerror = function() {
|
||||
// console.error('An error occurred while loading the script.');
|
||||
// };
|
||||
// document.body.appendChild(script);
|
||||
|
||||
// SCRIPT TO LOAD THE EMBEDDED-ANYTHING-LLM.UMD.JS ON PAGE WITH <SCRIPT></SCRIPT>
|
||||
// var script = document.createElement('script');
|
||||
// script.src = 'http://localhost:5000/embedded-anything-llm.umd.js';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user