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.