fix: dont use props as state in chat suggestion component (#267)

.changeset/old-readers-fix.md

+---
+"create-llama": patch
+---
+
+fix: dont use props as state in chat suggestion component

templates/types/streaming/nextjs/app/components/ui/chat/chat-message/chat-suggestedQuestions.tsx

-import { useState } from "react";
 import { ChatHandler, SuggestedQuestionsData } from "..";
 
 export function SuggestedQuestions({
   questions,
   append,
+  isLastMessage,
 }: {
   questions: SuggestedQuestionsData;
   append: Pick<ChatHandler, "append">["append"];
+  isLastMessage: boolean;
 }) {
-  const [showQuestions, setShowQuestions] = useState(questions.length > 0);
-
+  const showQuestions = isLastMessage && questions.length > 0;
   return (
     showQuestions &&
     append !== undefined && (
@@ -19,7 +19,6 @@ export function SuggestedQuestions({
             key={index}
             onClick={() => {
               append({ role: "user", content: question });
-              setShowQuestions(false);
             }}
             className="text-sm italic hover:underline cursor-pointer"
           >

templates/types/streaming/nextjs/app/components/ui/chat/chat-message/index.tsx

@@ -34,10 +34,12 @@ function ChatMessageContent({
   message,
   isLoading,
   append,
+  isLastMessage,
 }: {
   message: Message;
   isLoading: boolean;
   append: Pick<ChatHandler, "append">["append"];
+  isLastMessage: boolean;
 }) {
   const annotations = message.annotations as MessageAnnotation[] | undefined;
   if (!annotations?.length) return <Markdown content={message.content} />;
@@ -102,6 +104,7 @@ function ChatMessageContent({
         <SuggestedQuestions
           questions={suggestedQuestionsData[0]}
           append={append}
+          isLastMessage={isLastMessage}
         />
       ) : null,
     },
@@ -122,10 +125,12 @@ export default function ChatMessage({
   chatMessage,
   isLoading,
   append,
+  isLastMessage,
 }: {
   chatMessage: Message;
   isLoading: boolean;
   append: Pick<ChatHandler, "append">["append"];
+  isLastMessage: boolean;
 }) {
   const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });
   return (
@@ -136,6 +141,7 @@ export default function ChatMessage({
           message={chatMessage}
           isLoading={isLoading}
           append={append}
+          isLastMessage={isLastMessage}
         />
         <Button
           onClick={() => copyToClipboard(chatMessage.content)}

templates/types/streaming/nextjs/app/components/ui/chat/chat-messages.tsx

@@ -69,6 +69,7 @@ export default function ChatMessages(
               chatMessage={m}
               isLoading={isLoadingMessage}
               append={props.append!}
+              isLastMessage={i === messageLength - 1}
             />
           );
         })}