Thread

import { Thread } from "@grassroot/ui-react/assistant";
import { assistantDemoMessages, assistantDemoSuggestions } from "@grassroot/demo-fixtures";
 
export default function ThreadDemo() {
  return <Thread messages={assistantDemoMessages} suggestions={assistantDemoSuggestions} maxWidth={560} />;
}

<script setup lang="ts">
import { Thread } from "@grassroot/ui-vue/assistant";
import { assistantDemoMessages, assistantDemoSuggestions } from "@grassroot/demo-fixtures";
</script>
 
<template>
  <Thread :messages="assistantDemoMessages" :suggestions="assistantDemoSuggestions" :maxWidth="560" />
</template>

import "./ensure-compiler";
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootAssistantThread } from "@grassroot/ui-angular/assistant";
import { assistantDemoMessages, assistantDemoSuggestions } from "@grassroot/demo-fixtures";
 
@Component({
  selector: "app-thread-demo",
  standalone: true,
  imports: [GrassrootAssistantThread],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-assistant-thread [messages]="messages" [suggestions]="suggestions" [maxWidth]="maxWidth" />`,
})
export class ThreadDemoComponent {
  protected readonly messages = assistantDemoMessages;
  protected readonly suggestions = assistantDemoSuggestions;
  protected readonly maxWidth = 560;
}
 
export default ThreadDemoComponent;

<script lang="ts">
  import { Thread } from "@grassroot/ui-svelte/assistant";
  import { assistantDemoMessages, assistantDemoSuggestions } from "@grassroot/demo-fixtures";
</script>
 
<Thread messages={assistantDemoMessages} suggestions={assistantDemoSuggestions} maxWidth={560} />

/** @jsxImportSource solid-js */
import { Thread } from "@grassroot/ui-solid/assistant";
import { assistantDemoMessages, assistantDemoSuggestions } from "@grassroot/demo-fixtures";
 
export default function ThreadDemo() {
  return <Thread messages={assistantDemoMessages} suggestions={assistantDemoSuggestions} maxWidth={560} />;
}