fix(route.ts): handle error and close writer in finally block to ensu…

…re proper cleanup

refactor(OccurrenceAI.tsx): remove unused isLoading state and simplify isPending to isStarted, fix button disabled state to use isStarted instead of isLoading

app/api/ai/route.ts

@@ -50,13 +50,16 @@ export async function GET(request: NextRequest) {
  },
  });
 
- responsePromise.catch(async (error) => {
- // If an error occurs during sendMessage, write the error message to the stream
- const errorMessage = `An error occurred: ${error.message}\n\n`;
- const data = new TextEncoder().encode(`data: ${errorMessage}`);
- await writer.write(data);
- await writer.close();
- });
+ responsePromise
+ .catch(async (error) => {
+ const errorMessage = `An error occurred: ${error.message}\n\n`;
+ const data = new TextEncoder().encode(`data: ${errorMessage}`);
+ await writer.write(data);
+ })
+ .finally(async () => {
+ await writer.close();
+ });
+
 
  return new Response(readable, {
  headers: {

components/OccurrenceAI.tsx

@@ -9,9 +9,6 @@ import { SlDisc } from 'react-icons/sl';
 export default function OccurrenceAI({ occurrenceId }: { occurrenceId: bigint }) {
  const [data, setData] = useState('');
  const [isStarted, setIsStarted] = useState(false);
- const [isLoading, setIsLoading] = useState(false);
-
- const isPending = isStarted || isLoading;
 
  const startFetching = () => {
  setIsStarted(true);
@@ -24,24 +21,19 @@ export default function OccurrenceAI({ occurrenceId }: { occurrenceId: bigint })
 
  const eventSource = new EventSource(`/api/ai?occurrence=${occurrenceId}`);
 
- eventSource.onopen = () => {
- setIsLoading(true);
- };
-
  eventSource.onmessage = (event) => {
  const newData = event.data.trim();
  setData(newData);
  };
 
  eventSource.onerror = (event) => {
- console.error('EventSource failed:', event);
- const errorData = 'An unknown error occurred';
- setData(errorData);
- setIsLoading(false);
+ console.log('Connection was closed');
+ setIsStarted(false);
  eventSource.close();
  };
 
  return () => {
+ setIsStarted(false);
  eventSource.close();
  };
  }, [occurrenceId, isStarted]);
@@ -60,7 +52,7 @@ export default function OccurrenceAI({ occurrenceId }: { occurrenceId: bigint })
  <div>
  <div className="-mt-px flex divide-x divide-indigo-400/30">
  <div className="flex w-0 flex-1">
- {isPending ? (
+ {isStarted ? (
  <div className="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-b-lg border border-transparent bg-indigo-400/10 py-4 text-sm font-semibold text-indigo-400 shadow-sm ring-1 ring-indigo-400/30 transition-colors duration-200">
  <div className="flex animate-spin">
  <SlDisc className="h-5 w-5 text-indigo-400" aria-hidden="true" />
@@ -70,9 +62,9 @@ export default function OccurrenceAI({ occurrenceId }: { occurrenceId: bigint })
  <button
  onClick={startFetching}
  className={`relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-b-lg border border-transparent bg-indigo-400/10 py-4 text-sm font-semibold text-indigo-400 shadow-sm ring-1 ring-indigo-400/30 transition-colors duration-200 hover:bg-indigo-500 hover:text-indigo-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 ${
- isPending ? 'cursor-not-allowed opacity-50' : 'hover:bg-indigo-500'
+ isStarted ? 'cursor-not-allowed opacity-50' : 'hover:bg-indigo-500'
  }`}
- disabled={isPending}
+ disabled={isStarted}
  >
  <BsRobot className="h-5 w-5" aria-hidden="true" />
  Start