I have wrote a function which takes answer and callbacks to which UI can listen to and react as it finds fit.
Nothing about this is Next JS related, this is pure React JS TS solution, so you can use it in your React JS code base as well.
Here are the steps:
- Make request to fetch stream - code here: https://github.com/nmitic/nikola.mitic.dev/blob/745b103829874d0bb7b19d1668d793b99e23653b/components/InterviewerAI/InterviewerAI.func.ts#L15-L34
- Get stream reader - code here:https://github.com/nmitic/nikola.mitic.dev/blob/745b103829874d0bb7b19d1668d793b99e23653b/components/InterviewerAI/InterviewerAI.func.ts#L52-L58
- Iterate over he stream and call a function on each iteration so UI can listen and react to it - code here: https://github.com/nmitic/nikola.mitic.dev/blob/745b103829874d0bb7b19d1668d793b99e23653b/components/InterviewerAI/InterviewerAI.func.ts#L64-L76
Full implementation of answerQuestionWithStream:
export const answerQuestionWithStream = async ({
onStreamStart,
onStream,
onStreamDone,
onError,
question,
}: {
onStreamStart: () => void;
onStream: (chunk: string) => void;
onStreamDone: (answer: string) => void;
onError: () => void;
question: string;
}) => {
try {
const demo = process.env.NEXT_PUBLIC_AI_DEMO === "true";
const reader = await getStreamReader(demo, question);
if (!reader) {
console.error("Stream reader undefined");
return;
}
const textDecoder = new TextDecoder();
onStreamStart();
// Keeps track of streamed answer and will evaluate to full once streaming is done
let fullDecodedAnswer = "";
while (true) {
const { done, value } = await reader.read();
if (done) {
break;
}
const decodedText = textDecoder.decode(value);
fullDecodedAnswer = fullDecodedAnswer + decodedText;
onStream(decodedText);
}
onStreamDone(fullDecodedAnswer);
} catch (error) {
console.error(error);
// indicated to the user the error has happen
onError();
}
};
---
❤️If you would like to stay it touch please feel free to connect❤️
1. [X](https://x.com/mitic_dev)
2. [Linkedin](https://www.linkedin.com/in/nikola-mitic-6a5b11119/)
3. nikola.mitic.dev@gmail.com
---
Top comments (0)