[Bug] Related to useLocalRuntime

[draco-china]

1: Messages Not Auto-Scrolling to Bottom

In useLocalRuntime, long messages fail to automatically scroll to the bottom, causing inconvenience for users trying to view the latest messages.

2: Missing Loading Cursor Indicator

The loading cursor (small circular dot) is not displayed when using useLocalRuntime, resulting in a lack of visual feedback during data loading.

[Yonom]

Thank you for reporting this. I will investigate. In the meantime, if you have a minimal reproducible example code, that would be great :)

[draco-china]

Thank you for the prompt response! I appreciate you looking into this. I'll work on creating a minimal reproducible example code to help clarify the issue. Let me know if there's anything specific you'd like me to include in it. Thanks again!

import {
  CompositeAttachmentAdapter,
  SimpleImageAttachmentAdapter,
  SimpleTextAttachmentAdapter,
  Thread,
  useLocalRuntime,
} from '@assistant-ui/react';
import { makeMarkdownText } from '@assistant-ui/react-markdown';

export const MarkdownText = makeMarkdownText();

export function Example() {
  const runtime = useLocalRuntime(
    {
      run: async ({ messages, abortSignal }) => {
        return {
          content: [
            {
              type: 'text',
              text: markdownText,
            },
          ],
        };
      },
    },
    {
      adapters: {
        attachments: new CompositeAttachmentAdapter([
          new SimpleImageAttachmentAdapter(),
          new SimpleTextAttachmentAdapter(),
        ]),
      },
    },
  );

  return <Thread runtime={runtime} assistantMessage={{ components: { Text: MarkdownText } }} />;
}

const markdownText = `
# Welcome to Our Markdown Guide

Welcome to the Markdown guide! Here, you’ll learn the basics of Markdown and how to use it effectively for writing and documentation.

## Why Markdown?

Markdown is a lightweight markup language that makes it easy to format text for the web. It’s widely used in blogs, forums, and collaborative platforms like GitHub. Its simplicity and readability make it an ideal choice for developers and writers alike.

## Key Features

1. **Easy to Learn**: With a few simple characters, you can format text, create lists, and even insert images.
2. **Platform Agnostic**: Markdown is supported by most writing tools, making it easy to share across platforms.
3. **Readable Syntax**: The syntax is simple and looks clean, even without rendering.

## How to Use Headings

To create headings, simply add \`#\` symbols before your heading text. Here are some examples:

\`\`\`markdown
# This is an H1
## This is an H2
### This is an H3
\`\`\`

## Lists and Formatting

- **Bold** text: \`**text**\`
- *Italic* text: \`*text*\`
- Inline \`code\`: \`\` \`code\` \`\`

### Numbered List

1. First item
2. Second item
3. Third item

## Code Block Example

\`\`\`javascript
function greet(name) {
  return \`Hello, \${name}!\`;
}
console.log(greet("Markdown"));
\`\`\`

## Adding Links and Images

You can add links using \`[title](URL)\` syntax:

- [Markdown Guide](https://www.markdownguide.org/)

Images use a similar syntax, but add an exclamation mark at the beginning:

\`\`\`markdown
![Markdown Logo](https://example.com/logo.png)
\`\`\`

## Blockquotes

> “Markdown is a powerful tool for anyone who writes or shares information online.”

Enjoy writing with Markdown!
`;

[michaelbrusegard]

I am also having this issue. I also want to note that to make the UI scrollable, the solution in the docs using shadcn did not work for me and I had to surround the thread in a scrollarea (or a div with scroll set to auto)