(null);
+ const [searchParams] = useSearchParams();
+ const { getToken } = useAuthToken();
+
+ const promptId = searchParams.get('promptId');
+ const promptText = searchParams.get('promptText');
+
+ useEffect(() => {
+ const fetchResponse = async () => {
+ if (promptId && promptText) {
+ setLoading(true);
+ setError(null);
+
+ // Initialize with the user's prompt
+ setMessages([{
+ id: promptId,
+ content: promptText,
+ created_at: new Date().toISOString(),
+ type: 'user'
+ }]);
+
+ try {
+ const token = await getToken();
+ if (!token) {
+ throw new Error('No authentication token available');
+ }
+
+ console.log('Making request with token:', token);
+
+ const response = await fetch(
+ `http://localhost:8000/api/prompts/?promptText=${encodeURIComponent(promptText)}`,
+ {
+ method: 'GET',
+ headers: {
+ 'Authorization': `Bearer ${token}`,
+ 'Accept': 'text/event-stream',
+ 'Cache-Control': 'no-cache',
+ 'Connection': 'keep-alive',
+ }
+ }
+ );
+
+ console.log('Response status:', response.status);
+ console.log('Response headers:', Object.fromEntries(response.headers.entries()));
+
+ if (!response.ok) {
+ const errorText = await response.text();
+ console.error('Error response:', errorText);
+ throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`);
+ }
+
+ const reader = response.body?.getReader();
+ if (!reader) {
+ throw new Error('No reader available');
+ }
+
+ let fullContent = '';
+ let buffer = '';
+
+ while (true) {
+ const { done, value } = await reader.read();
+ if (done) break;
+
+ // Convert the Uint8Array to a string
+ const chunk = new TextDecoder().decode(value);
+ console.log('Received chunk:', chunk);
+ buffer += chunk;
+
+ // Process complete SSE messages
+ const lines = buffer.split('\n\n');
+ buffer = lines.pop() || ''; // Keep the last incomplete chunk in the buffer
+
+ for (const line of lines) {
+ if (line.startsWith('data: ')) {
+ try {
+ const jsonStr = line.slice(6); // Remove 'data: ' prefix
+ console.log('Processing SSE data:', jsonStr);
+ const data = JSON.parse(jsonStr);
+ if (data.content) {
+ fullContent += data.content;
+ // Update the message with the accumulated content
+ setMessages(prevMessages => {
+ const lastMessage = prevMessages[prevMessages.length - 1];
+ if (lastMessage && lastMessage.type === 'assistant') {
+ return [
+ ...prevMessages.slice(0, -1),
+ {
+ ...lastMessage,
+ content: fullContent
+ }
+ ];
+ } else {
+ return [
+ ...prevMessages,
+ {
+ id: `${promptId}-response`,
+ content: fullContent,
+ created_at: new Date().toISOString(),
+ type: 'assistant'
+ }
+ ];
+ }
+ });
+ }
+ } catch (err) {
+ console.error('Error parsing SSE data:', err, 'Raw line:', line);
+ }
+ }
+ }
+ }
+ } catch (err) {
+ console.error('Error in fetchResponse:', err);
+ setError(err instanceof Error ? err.message : 'Failed to connect to server');
+ } finally {
+ setLoading(false);
+ }
+ } else if (propMessages) {
+ // Use messages from props if no prompt is being processed
+ setMessages(propMessages);
+ setLoading(propLoading);
+ setError(propError);
+ } else {
+ setLoading(false);
+ }
+ };
+
+ fetchResponse();
+ }, [promptId, promptText, propMessages, propLoading, propError]);
+
+ return (
+
+ {loading ? (
+
+ ) : error ? (
+
+ ) : (
+ <>
+ {messages && messages.length > 0 ? (
+
+ {messages.map((message: any) => (
+
+
+ {message.content}
+
+
+ ))}
+
+ ) : (
+
No messages found.
+ )}
+
+ )}
+
+