- Prop
items- Type
readonly ThreadListItem[] | undefined- Default
- —
- Requirement
- optional
Docs Components Assistant
ThreadList
React example follows below.
Vue example follows below.
Angular example follows below.
Svelte example follows below.
Solid example follows below.
- parts
- —
- nodes
- —
- size
- —
- part
- —
ts
import { ThreadList } from "@grassroot/ui-react/assistant";import { assistantDemoThreadItems } from "@grassroot/demo-fixtures"; export default function ThreadListDemo() { return <ThreadList items={assistantDemoThreadItems} />;}- parts
- —
- nodes
- —
- size
- —
- part
- —
ts
<script setup lang="ts">import { ThreadList } from "@grassroot/ui-vue/assistant";import { assistantDemoThreadItems } from "@grassroot/demo-fixtures";</script> <template> <ThreadList :items="assistantDemoThreadItems" /></template>- parts
- —
- nodes
- —
- size
- —
- part
- —
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;- parts
- —
- nodes
- —
- size
- —
- part
- —
ts
<script lang="ts"> import { ThreadList } from "@grassroot/ui-svelte/assistant"; import { assistantDemoThreadItems } from "@grassroot/demo-fixtures";</script> <ThreadList items={assistantDemoThreadItems} />- parts
- —
- nodes
- —
- size
- —
- part
- —
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
itemsreadonly ThreadListItem[] | undefined—
optional
onSelect((item: ThreadListItem) => void) | undefined—
optional
onNewThread(() => void) | undefined—
optional
emptyLabelstring | undefined—
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
| Event | Payload |
|---|---|
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
itemsArray<{ id: string; title?: string; active?: boolean; archived?: boolean }>() => []optional
emptyLabelstring"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
| Event | Payload |
|---|---|
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
itemsreadonly ThreadListItem[][]optional
emptyLabelstring"No conversations yet"optional
- Prop
items- Type
readonly ThreadListItem[]- Default
[]- Requirement
- optional
- Prop
emptyLabel- Type
string- Default
"No conversations yet"- Requirement
- optional
Events
| Event | Payload |
|---|---|
select | ThreadListItem |
newThread | void |
Import
import { ThreadList } from "@grassroot/ui-svelte/assistant";
import { assistantDemoThreadItems } from "@grassroot/demo-fixtures";
Props
Prop
Type
Default
Requirement
itemsreadonly ThreadListItem[]—
optional
onSelect(item: ThreadListItem) => void—
optional
onNewThread() => void—
optional
emptyLabelstring"No conversations yet"optional
classstring—
optional
stylestring—
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
| Event | Payload |
|---|---|
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
itemsreadonly ThreadListItem[]—
optional
onSelect(item: ThreadListItem) => void—
optional
onNewThread() => void—
optional
emptyLabelstring—
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
| Event | Payload |
|---|---|
onSelect | (item: ThreadListItem) => void |
onNewThread | () => void |
Content regions
children
Native attributes
Standard DOM and ARIA attributes not listed above spread onto the root element.