| 1 |
import { useEffect, useState } from '@wordpress/element'; |
| 2 |
import { completion } from '@draft/api/Data'; |
| 3 |
|
| 4 |
export const useCompletion = ( |
| 5 |
prompt, |
| 6 |
promptType, |
| 7 |
systemMessageKey, |
| 8 |
details, |
| 9 |
) => { |
| 10 |
const [result, setResult] = useState(''); |
| 11 |
const [error, setError] = useState(null); |
| 12 |
const [loading, setLoading] = useState(false); |
| 13 |
|
| 14 |
useEffect(() => { |
| 15 |
let canceled = false; |
| 16 |
let reader; |
| 17 |
const decoder = new TextDecoder(); |
| 18 |
|
| 19 |
if (!prompt) { |
| 20 |
setLoading(false); |
| 21 |
setResult(''); |
| 22 |
canceled = true; |
| 23 |
return; |
| 24 |
} |
| 25 |
|
| 26 |
const fetchData = async () => { |
| 27 |
setResult(''); |
| 28 |
setError(false); |
| 29 |
setLoading(true); |
| 30 |
|
| 31 |
const response = await completion( |
| 32 |
prompt, |
| 33 |
promptType, |
| 34 |
systemMessageKey, |
| 35 |
details, |
| 36 |
); |
| 37 |
reader = response.body.getReader(); |
| 38 |
|
| 39 |
let done = false; |
| 40 |
while (!done) { |
| 41 |
const { value, done: readerDone } = await reader.read(); |
| 42 |
|
| 43 |
done = readerDone; |
| 44 |
|
| 45 |
if (value && !canceled) { |
| 46 |
const decodedValue = decoder.decode(value); |
| 47 |
setResult((prevResult) => prevResult + decodedValue); |
| 48 |
} |
| 49 |
} |
| 50 |
}; |
| 51 |
|
| 52 |
fetchData() |
| 53 |
.finally(() => { |
| 54 |
if (!canceled) { |
| 55 |
setLoading(false); |
| 56 |
} |
| 57 |
}) |
| 58 |
.catch((error) => { |
| 59 |
if (!canceled) { |
| 60 |
setError(error); |
| 61 |
} |
| 62 |
}); |
| 63 |
|
| 64 |
return () => { |
| 65 |
canceled = true; |
| 66 |
if (reader) { |
| 67 |
reader.cancel(); |
| 68 |
} |
| 69 |
}; |
| 70 |
}, [prompt, systemMessageKey, promptType, details]); |
| 71 |
|
| 72 |
return { completion: result, error, loading }; |
| 73 |
}; |
| 74 |
|
