<AIConversation> React component only renders the the last word of the response.

[alexhddev]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Other

How is your app built?

Vite

What browsers are you seeing the problem on?

No response

Which region are you seeing the problem in?

eu-west-1

Please describe your bug.

I'm following the basic Amplify AI tutorial from aws:
https://aws.amazon.com/blogs/mobile/create-a-customized-ai-based-chat-interface-with-your-application-data/

I can't make the dialog to work inside a Vite react app.
No matter what I try, the AIConversation Component will only render the last entry in the bot response, as seen in the attached screenshot.
Tried with all Claude models, the behavior is the same.
Kindly please assist.

What's the expected behaviour?

See the full AI response.

Help us reproduce the bug!

Please observe the code snippet and screenshot

Code Snippet

import { Authenticator } from '@aws-amplify/ui-react'
import { AIConversation, createAIHooks } from '@aws-amplify/ui-react-ai'
import { generateClient } from "aws-amplify/api";
import { Schema } from "../amplify/data/resource";
import '@aws-amplify/ui-react/styles.css';

function App() {
  const client = generateClient<Schema>({ authMode: "userPool" }); 
  const { useAIConversation } = createAIHooks(client);

  const [
    {
      data: { messages },
    },
    sendMessage,
  ] = useAIConversation('chat');

  return (
    <>
      <Authenticator>
        <AIConversation
          messages={messages}
          handleSendMessage={sendMessage}
        ></AIConversation>
      </Authenticator>
    </>
  )
}

export default App

Console log output

No response

Additional information and screenshots

No response

[alexhddev]

Requests to Claude 3.5 Sonnet only show the last few words:

[cwomack]

Hello, @alexhddev 👋 and sorry you're running into this. We're working on reproducing the issue on our side and will follow up as soon as we have more questions or context on this. Thanks for opening the issue.

[alexhddev]

The problem doesn't appear if I instantiate the ai clients in a separate Client.ts file:
Can't say why.

import { generateClient } from "aws-amplify/api";
import { Schema } from "../amplify/data/resource";
import { createAIHooks } from "@aws-amplify/ui-react-ai";

export const client = generateClient<Schema>({ authMode: "userPool" });
export const { useAIConversation, useAIGeneration } = createAIHooks(client);

[alexhddev]

Problem solved:
For anyone reading:
The issue was that I was instantiating the ai client INSIDE the react component. It should be instantiated outside:

// Chat.tsx

import { generateClient } from "aws-amplify/data";
import { createAIHooks, AIConversation } from '@aws-amplify/ui-react-ai';
import type { Schema } from "../amplify/data/resource";

const client = generateClient<Schema>({ authMode: 'userPool' }); // outside Chat function
const { useAIConversation } = createAIHooks(client);  // outside Chat function

export default function Chat() {