Docs Components Assistant

ThreadList

React example follows below.
ts
import { ThreadList } from "@grassroot/ui-react/assistant";
import { assistantDemoThreadItems } from "@grassroot/demo-fixtures";
export default function ThreadListDemo() {
return <ThreadList items={assistantDemoThreadItems} />;
}
ts
<script setup lang="ts">
import { ThreadList } from "@grassroot/ui-vue/assistant";
import { assistantDemoThreadItems } from "@grassroot/demo-fixtures";
</script>
<template>
<ThreadList :items="assistantDemoThreadItems" />
</template>
ts
import "./ensure-compiler";
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootThreadList } from "@grassroot/ui-angular/assistant";
import { assistantDemoThreadItems } from "@grassroot/demo-fixtures";
@Component({
selector: "app-thread-list-demo",
standalone: true,
imports: [GrassrootThreadList],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `<grassroot-thread-list [items]="items" />`,
})
export class ThreadListDemoComponent {
protected readonly items = assistantDemoThreadItems;
}
export default ThreadListDemoComponent;
ts
<script lang="ts">
import { ThreadList } from "@grassroot/ui-svelte/assistant";
import { assistantDemoThreadItems } from "@grassroot/demo-fixtures";
</script>
<ThreadList items={assistantDemoThreadItems} />
ts
/** @jsxImportSource solid-js */
import { ThreadList } from "@grassroot/ui-solid/assistant";
import { assistantDemoThreadItems } from "@grassroot/demo-fixtures";
export default function ThreadListDemo() {
return <ThreadList items={assistantDemoThreadItems} />;
}

Installation

API Reference

Import

import { ThreadList } from "@grassroot/ui-react/assistant";
import { assistantDemoThreadItems } from "@grassroot/demo-fixtures";

Props

Prop
Type
Default
Requirement
items
readonly ThreadListItem[] | undefined
—
optional
onSelect
((item: ThreadListItem) => void) | undefined
—
optional
onNewThread
(() => void) | undefined
—
optional
emptyLabel
string | undefined
—
optional
Prop
items
Type
readonly ThreadListItem[] | undefined
Default
—
Requirement
optional
Prop
onSelect
Type
((item: ThreadListItem) => void) | undefined
Default
—
Requirement
optional
Prop
onNewThread
Type
(() => void) | undefined
Default
—
Requirement
optional
Prop
emptyLabel
Type
string | undefined
Default
—
Requirement
optional

Events

EventPayload
onSelect((item: ThreadListItem) => void) | undefined
onNewThread(() => void) | undefined

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.

Import

import { ThreadList } from "@grassroot/ui-vue/assistant";
import { assistantDemoThreadItems } from "@grassroot/demo-fixtures";

Props

Prop
Type
Default
Requirement
items
Array<{ id: string; title?: string; active?: boolean; archived?: boolean }>
() => []
optional
emptyLabel
string
"No conversations yet"
optional
Prop
items
Type
Array<{ id: string; title?: string; active?: boolean; archived?: boolean }>
Default
() => []
Requirement
optional
Prop
emptyLabel
Type
string
Default
"No conversations yet"
Requirement
optional

Events

EventPayload
select({ id: string; title?: string | undefined; active?: boolean | undefined; archived?: boolean | undefined; }) => void
newThread() => void

Import

import "./ensure-compiler";
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootThreadList } from "@grassroot/ui-angular/assistant";
import { assistantDemoThreadItems } from "@grassroot/demo-fixtures";

Props

Prop
Type
Default
Requirement
items
readonly ThreadListItem[]
[]
optional
emptyLabel
string
"No conversations yet"
optional
Prop
items
Type
readonly ThreadListItem[]
Default
[]
Requirement
optional
Prop
emptyLabel
Type
string
Default
"No conversations yet"
Requirement
optional

Events

EventPayload
selectThreadListItem
newThreadvoid

Import

import { ThreadList } from "@grassroot/ui-svelte/assistant";
import { assistantDemoThreadItems } from "@grassroot/demo-fixtures";

Props

Prop
Type
Default
Requirement
items
readonly ThreadListItem[]
—
optional
onSelect
(item: ThreadListItem) => void
—
optional
onNewThread
() => void
—
optional
emptyLabel
string
"No conversations yet"
optional
class
string
—
optional
style
string
—
optional
Prop
items
Type
readonly ThreadListItem[]
Default
—
Requirement
optional
Prop
onSelect
Type
(item: ThreadListItem) => void
Default
—
Requirement
optional
Prop
onNewThread
Type
() => void
Default
—
Requirement
optional
Prop
emptyLabel
Type
string
Default
"No conversations yet"
Requirement
optional
Prop
class
Type
string
Default
—
Requirement
optional
Prop
style
Type
string
Default
—
Requirement
optional

Events

EventPayload
onSelect(item: ThreadListItem) => void
onNewThread() => void

Content regions

  • children

Import

import { ThreadList } from "@grassroot/ui-solid/assistant";
import { assistantDemoThreadItems } from "@grassroot/demo-fixtures";

Props

Prop
Type
Default
Requirement
items
readonly ThreadListItem[]
—
optional
onSelect
(item: ThreadListItem) => void
—
optional
onNewThread
() => void
—
optional
emptyLabel
string
—
optional
Prop
items
Type
readonly ThreadListItem[]
Default
—
Requirement
optional
Prop
onSelect
Type
(item: ThreadListItem) => void
Default
—
Requirement
optional
Prop
onNewThread
Type
() => void
Default
—
Requirement
optional
Prop
emptyLabel
Type
string
Default
—
Requirement
optional

Events

EventPayload
onSelect(item: ThreadListItem) => void
onNewThread() => void

Content regions

  • children

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.