AssistantSidebar

import { AssistantSidebar } from "@grassroot/ui-react/assistant";
 
export default function AssistantSidebarDemo() {
  return <AssistantSidebar width={320} resizable={true}>Conversation rail</AssistantSidebar>;
}

<script setup lang="ts">
import { AssistantSidebar } from "@grassroot/ui-vue/assistant";
</script>
 
<template>
  <AssistantSidebar :width="320" :resizable="true">Conversation rail</AssistantSidebar>
</template>

import "./ensure-compiler";
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootAssistantSidebar } from "@grassroot/ui-angular/assistant";
 
@Component({
  selector: "app-assistant-sidebar-demo",
  standalone: true,
  imports: [GrassrootAssistantSidebar],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-assistant-sidebar [width]="width" [resizable]="resizable">Conversation rail</grassroot-assistant-sidebar>`,
})
export class AssistantSidebarDemoComponent {
  protected readonly width = 320;
  protected readonly resizable = true;
}
 
export default AssistantSidebarDemoComponent;

<script lang="ts">
  import { AssistantSidebar } from "@grassroot/ui-svelte/assistant";
  
</script>
 
<AssistantSidebar width={320} resizable={true}>Conversation rail</AssistantSidebar>

/** @jsxImportSource solid-js */
import { AssistantSidebar } from "@grassroot/ui-solid/assistant";
 
export default function AssistantSidebarDemo() {
  return <AssistantSidebar width={320} resizable={true}>Conversation rail</AssistantSidebar>;
}