1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
"use client";
import { Label } from "./ui/label";
import React, { useEffect, useState } from "react";
import { Input } from "./ui/input";
import { Button } from "./ui/button";
import SearchResults from "./SearchResults";
function QueryAI() {
const [searchResults, setSearchResults] = useState<string[]>([]);
const [isAiLoading, setIsAiLoading] = useState(false);
const [aiResponse, setAIResponse] = useState("");
const [input, setInput] = useState("");
const [toBeParsed, setToBeParsed] = useState("");
const handleStreamData = (newChunk: string) => {
// Append the new chunk to the existing data to be parsed
setToBeParsed((prev) => prev + newChunk);
};
useEffect(() => {
// Define a function to try parsing the accumulated data
const tryParseAccumulatedData = () => {
// Attempt to parse the "toBeParsed" state as JSON
try {
// Split the accumulated data by the known delimiter "\n\n"
const parts = toBeParsed.split("\n\n");
let remainingData = "";
// Process each part to extract JSON objects
parts.forEach((part, index) => {
try {
const parsedPart = JSON.parse(part.replace("data: ", "")); // Try to parse the part as JSON
// If the part is the last one and couldn't be parsed, keep it to accumulate more data
if (index === parts.length - 1 && !parsedPart) {
remainingData = part;
} else if (parsedPart && parsedPart.response) {
// If the part is parsable and has the "response" field, update the AI response state
setAIResponse((prev) => prev + parsedPart.response);
}
} catch (error) {
// If parsing fails and it's not the last part, it's a malformed JSON
if (index !== parts.length - 1) {
console.error("Malformed JSON part: ", part);
} else {
// If it's the last part, it may be incomplete, so keep it
remainingData = part;
}
}
});
// Update the toBeParsed state to only contain the unparsed remainder
if (remainingData !== toBeParsed) {
setToBeParsed(remainingData);
}
} catch (error) {
console.error("Error parsing accumulated data: ", error);
}
};
// Call the parsing function if there's data to be parsed
if (toBeParsed) {
tryParseAccumulatedData();
}
}, [toBeParsed]);
const getSearchResults = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setIsAiLoading(true);
const sourcesResponse = await fetch(
`/api/query?sourcesOnly=true&q=${input}`,
);
const sourcesInJson = (await sourcesResponse.json()) as {
ids: string[];
};
setSearchResults(sourcesInJson.ids);
const response = await fetch(`/api/query?q=${input}`);
if (response.status !== 200) {
setIsAiLoading(false);
return;
}
if (response.body) {
let reader = response.body.getReader();
let decoder = new TextDecoder("utf-8");
let result = "";
// @ts-ignore
reader.read().then(function processText({ done, value }) {
if (done) {
// setSearchResults(JSON.parse(result.replace('data: ', '')));
// setIsAiLoading(false);
return;
}
handleStreamData(decoder.decode(value));
return reader.read().then(processText);
});
}
};
return (
<div className="mx-auto w-full max-w-2xl">
<form onSubmit={async (e) => await getSearchResults(e)} className="mt-8">
<Label htmlFor="searchInput">Ask your SuperMemory</Label>
<div className="flex flex-col space-y-2 md:w-full md:flex-row md:items-center md:space-x-2 md:space-y-0">
<Input
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Search using AI... ✨"
id="searchInput"
/>
<Button
disabled={isAiLoading}
className="max-w-min md:w-full"
type="submit"
variant="default"
>
Ask AI
</Button>
</div>
</form>
{searchResults && (
<SearchResults aiResponse={aiResponse} sources={searchResults} />
)}
</div>
);
}
export default QueryAI;
|