fix(examples/inline-messages): deduplicate requests (#637)

fixes #629

examples/with-inline-suggestions/components/ui/assistant-ui/AI_ThreadSuggestion.tsx

@@ -1,64 +1,89 @@
-import React, { FC, PropsWithChildren, useState, useEffect, useCallback } from "react";
+import React, {
+  FC,
+  PropsWithChildren,
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+} from "react";
 import { Button } from "@/components/ui/button";
 import { ThreadPrimitive } from "@assistant-ui/react";
 import { useLastAssistantMessage } from "./LastMessageHook";
-import { generate } from './actions';
-import { readStreamableValue } from 'ai/rsc';
+import { generate } from "./actions";
+import { readStreamableValue } from "ai/rsc";
 
 const AI_ThreadSuggestion: FC<PropsWithChildren<{}>> = ({ children }) => {
   const lastAssistantMessage = useLastAssistantMessage();
   const [output, setOutput] = useState<string | null>(null);
   const [output2, setOutput2] = useState<string | null>(null);
 
-  const handleClick = useCallback(async () => {
-    const lastMessageContent = lastAssistantMessage?.content;
-    const lastMessageString = JSON.stringify(lastMessageContent);
-    console.log('LM:', lastMessageString);
+  const debounceRef = useRef(false);
+  const generateSuggestions = useCallback(async (content: string) => {
+    // do not send duplicate requests in React Strict Mode during development
+    if (process.env.NODE_ENV === "development") {
+      if (debounceRef.current) return;
+      debounceRef.current = true;
+      setTimeout(() => {
+        debounceRef.current = false;
+      }, 0);
+    }
 
     const [response1, response2] = await Promise.all([
-      generate(`Generate a optimistic very very short one sentence follow up question based on this response: ${lastMessageString}`),
-      generate(`Generate a very skeptical very very short one sentence follow up question based on this response: ${lastMessageString}`)
+      generate(
+        `Generate a optimistic very very short one sentence follow up question based on this response: "${content}"`,
+      ),
+      generate(
+        `Generate a very skeptical very very short one sentence follow up question based on this response: "${content}"`,
+      ),
     ]);
 
-    let generatedOutput = '';
+    let generatedOutput = "";
     for await (const delta of readStreamableValue(response1.output)) {
       generatedOutput += delta;
     }
     console.log(generatedOutput);
     setOutput(generatedOutput);
 
-    let generatedOutput2 = '';
+    let generatedOutput2 = "";
     for await (const delta of readStreamableValue(response2.output)) {
       generatedOutput2 += delta;
     }
     console.log(generatedOutput2);
     setOutput2(generatedOutput2);
-  }, [lastAssistantMessage]);
+  }, []);
 
   useEffect(() => {
-    if (lastAssistantMessage) {
-      handleClick();
-    }
-  }, [lastAssistantMessage, handleClick]);
+    const lastMessageContent = lastAssistantMessage?.content;
+    const lastMessageString = JSON.stringify(lastMessageContent);
+    generateSuggestions(lastMessageString);
+  }, [lastAssistantMessage, generateSuggestions]);
 
   return (
     <div className="flex w-full space-x-2">
-      <ThreadPrimitive.Suggestion prompt={output || ''} method="replace" autoSend asChild>
+      <ThreadPrimitive.Suggestion
+        prompt={output || ""}
+        method="replace"
+        autoSend
+        asChild
+      >
         <Button
           variant="outline"
-          className="flex-1 h-auto p-2"
-          onClick={handleClick}
-          style={{ whiteSpace: 'normal', wordWrap: 'break-word' }}
+          className="h-auto flex-1 p-2"
+          style={{ whiteSpace: "normal", wordWrap: "break-word" }}
         >
           {output || children}
         </Button>
       </ThreadPrimitive.Suggestion>
-      <ThreadPrimitive.Suggestion prompt={output2 || ''} method="replace" autoSend asChild>
+      <ThreadPrimitive.Suggestion
+        prompt={output2 || ""}
+        method="replace"
+        autoSend
+        asChild
+      >
         <Button
           variant="outline"
-          className="flex-1 h-auto p-2"
-          onClick={handleClick}
-          style={{ whiteSpace: 'normal', wordWrap: 'break-word' }}
+          className="h-auto flex-1 p-2"
+          style={{ whiteSpace: "normal", wordWrap: "break-word" }}
         >
           {output2 || children}
         </Button>
@@ -67,4 +92,12 @@ const AI_ThreadSuggestion: FC<PropsWithChildren<{}>> = ({ children }) => {
   );
 };
 
-export default AI_ThreadSuggestion;
+const WrappedAI_ThreadSuggestion = () => {
+  return (
+    <ThreadPrimitive.If running={false}>
+      <AI_ThreadSuggestion />
+    </ThreadPrimitive.If>
+  );
+};
+
+export default WrappedAI_ThreadSuggestion;

examples/with-inline-suggestions/components/ui/assistant-ui/LastMessageHook.tsx

@@ -1,16 +1,14 @@
+import { ThreadAssistantMessage } from "@assistant-ui/react";
 import { useThreadContext } from "@assistant-ui/react";
-import { useMemo } from "react";
 
 export const useLastAssistantMessage = () => {
   const { useThreadMessages } = useThreadContext();
-  const messages = useThreadMessages();
-
-  return useMemo(() => {
+  return useThreadMessages((messages) => {
     for (let i = messages.length - 1; i >= 0; i--) {
-      if (messages[i].role === "assistant") {
-        return messages[i];
+      if (messages[i]?.role === "assistant") {
+        return messages[i]! as ThreadAssistantMessage;
       }
     }
     return null;
-  }, [messages]);
-};
+  });
+};