diff --git a/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx b/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx index 1d94f609d..950d4c699 100644 --- a/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx +++ b/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx @@ -52,33 +52,43 @@ export default function getJsApiCode({ return this.post(endpoint, { input_value: inputValue, input_type: inputType, output_type: outputType, tweaks: tweaks }); } - handleStream(streamUrl, onUpdate, onClose, onError) { - const eventSource = new EventSource(streamUrl); - - eventSource.onmessage = event => { - const data = JSON.parse(event.data); - onUpdate(data); - }; - - eventSource.onerror = event => { - console.error('Stream Error:', event); - onError(event); - eventSource.close(); - }; - - eventSource.addEventListener("close", () => { + async handleStream(streamUrl, onUpdate, onClose, onError) { + try { + const response = await fetch(streamUrl); + const reader = response.body.getReader(); + const decoder = new TextDecoder(); + + while (true) { + const { done, value } = await reader.read(); + if (done) { onClose('Stream closed'); - eventSource.close(); - }); - - return eventSource; + break; + } + const chunk = decoder.decode(value); + const lines = chunk.split(\'\\n\').filter(line => line.trim() !== ''); + + for (const line of lines) { + if (line.startsWith('data: ')) { + try { + const data = JSON.parse(line.slice(6)); + onUpdate(data); + } catch (error) { + console.error('Error parsing JSON:', error); + } + } + } + } + } catch (error) { + console.error('Stream Error:', error); + onError(error); + } } async runFlow(flowIdOrName, inputValue, inputType = 'chat', outputType = 'chat', tweaks, stream = false, onUpdate, onClose, onError) { try { const initResponse = await this.initiateSession(flowIdOrName, inputValue, inputType, outputType, stream, tweaks); if (stream && initResponse?.outputs?.[0]?.outputs?.[0]?.artifacts?.stream_url) { - const streamUrl = initResponse.outputs[0].outputs[0].artifacts.stream_url; + const streamUrl = this.baseURL + initResponse.outputs[0].outputs[0].artifacts.stream_url; console.log(\`Streaming from: \${streamUrl}\`); this.handleStream(streamUrl, onUpdate, onClose, onError); } @@ -125,7 +135,7 @@ export default function getJsApiCode({ args[0], // inputValue args[1], // inputType args[2], // outputType - args[3] === 'true' // stream + args[3] === 'true' // streaming ); `; } diff --git a/src/frontend/tests/extended/regression/generalBugs-shard-12.spec.ts b/src/frontend/tests/extended/regression/generalBugs-shard-12.spec.ts index f1ab131a2..56c09b628 100644 --- a/src/frontend/tests/extended/regression/generalBugs-shard-12.spec.ts +++ b/src/frontend/tests/extended/regression/generalBugs-shard-12.spec.ts @@ -57,7 +57,7 @@ test("user should be able to connect RetrieverTool to another components", async .hover() .then(async () => { await page.mouse.down(); - await page.mouse.move(-500, 500); + await page.mouse.move(-300, 300); }); await page.mouse.up(); @@ -86,7 +86,7 @@ test("user should be able to connect RetrieverTool to another components", async await chromaDbOutput.hover(); await page.mouse.down(); const retrieverToolInput = await page - .getByTestId("handle-retrievertool-shownode-retriever-left") + .getByTestId("handle-nvidiarerankcomponent-shownode-retriever-left") .nth(0); await retrieverToolInput.hover(); await page.mouse.up();