Hi everyone,
Has anyone had any issue with responses in streaming? I find it quite regularly drops out words and spelling.
My developer has created the code to use Sockets and rooms and im wondering if there’s a better way to handle the streaming.
this is some of the code for reference
const ChatWindow = () => {
const {
selectedChat,
setSelectedChat,
createChat,
question,
sendChat,
selectChat,
isMessageLoading,
} = useChat();
const { prompts } = useAssistant();
const { user } = useUser();
const { theme } = useTheme();
const [searchParams] = useSearchParams();
const [response, setResponse] = useState<string>("");
const [isUserScrolling, setIsUserScrolling] = useState<boolean>(false);
const [showPrompts, setShowPrompts] = useState<boolean>(true);
const hiddenTextAreaRef = useRef<HTMLTextAreaElement>(null);
const socketRef = useRef<Socket | null>(null);
const messagesEndRef = useRef<HTMLDivElement | null>(null);
const chatContainerRef = useRef<HTMLDivElement | null>(null);
// Handle socket connection and disconnection on chat change
useEffect(() => {
if (selectedChat) {
// Disconnect any existing socket
if (socketRef.current) {
socketRef.current.disconnect();
socketRef.current = null;
}
// Initialize new socket connection for the current chat
socketRef.current = io(process.env.REACT_APP_API_BASE_URL ?? "");
// Set up socket listeners for responses and stream end
const handleOpenAiResponse = (fullResponse: string) => {
const cleanedResponse = fullResponse
.replace(/```markdown|```/g, "")
.trim();
console.log(`Received response for chat: ${selectedChat?._id}`);
setSelectedChat((currentChat: any) => {
if (!currentChat || currentChat._id !== selectedChat?._id)
return currentChat; // Update only the current chat
let newMessages = currentChat.messages.slice();
newMessages.pop();
const newMessage = {
_id: Date.now().toString(),
question: question,
answer: cleanedResponse ? cleanedResponse : "",
};
return {
...currentChat,
messages: [...newMessages, newMessage],
};
});
};
const handleStreamEnd = (fullResponse: string) => {
const cleanedResponse = fullResponse
.replace(/```markdown|```/g, "")
.trim();
setResponse(cleanedResponse);
console.log(`Stream ended for chat: ${selectedChat?._id}`);
setSelectedChat((currentChat: any) => {
if (!currentChat || currentChat._id !== selectedChat?._id)
return currentChat; // Update only the current chat
let newMessages = currentChat.messages.slice();
newMessages.pop();
const newMessage = {
_id: Date.now().toString(),
question: question,
answer: cleanedResponse,
};
return {
...currentChat,
messages: [...newMessages, newMessage],
};
});
};
// Add socket event listeners
socketRef.current.on("openai_response", handleOpenAiResponse);
socketRef.current.on("stream_end", handleStreamEnd);
// Join the selected chat room
socketRef.current.emit("joinRoom", selectedChat._id);
console.log(`Joined room: ${selectedChat._id}`);
// Clean up listeners and disconnect socket when selectedChat changes or component unmounts
return () => {
if (socketRef.current) {
socketRef.current.off("openai_response", handleOpenAiResponse);
socketRef.current.off("stream_end", handleStreamEnd);
socketRef.current.disconnect();
socketRef.current = null;
}
};
}
}, [selectedChat, question, setSelectedChat]);
// Monitor for changes in the URL query to select a chat
useEffect(() => {
const chatId = searchParams.get("chat");
if (chatId) {
selectChat(chatId);
}
}, [searchParams]);
