ContextDisplay

import { ContextDisplay } from "@grassroot/ui-react/assistant";
import { assistantDemoContext } from "@grassroot/demo-fixtures";
 
export default function ContextDisplayDemo() {
  return <ContextDisplay used={assistantDemoContext.used} limit={assistantDemoContext.total} />;
}

<script setup lang="ts">
import { ContextDisplay } from "@grassroot/ui-vue/assistant";
import { assistantDemoContext } from "@grassroot/demo-fixtures";
</script>
 
<template>
  <ContextDisplay :used="assistantDemoContext.used" :limit="assistantDemoContext.total" />
</template>

import "./ensure-compiler";
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootContextDisplay } from "@grassroot/ui-angular/assistant";
import { assistantDemoContext } from "@grassroot/demo-fixtures";
 
@Component({
  selector: "app-context-display-demo",
  standalone: true,
  imports: [GrassrootContextDisplay],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-context-display [used]="used" [limit]="limit" />`,
})
export class ContextDisplayDemoComponent {
  protected readonly used = assistantDemoContext.used;
  protected readonly limit = assistantDemoContext.total;
}
 
export default ContextDisplayDemoComponent;

<script lang="ts">
  import { ContextDisplay } from "@grassroot/ui-svelte/assistant";
  import { assistantDemoContext } from "@grassroot/demo-fixtures";
</script>
 
<ContextDisplay used={assistantDemoContext.used} limit={assistantDemoContext.total} />

/** @jsxImportSource solid-js */
import { ContextDisplay } from "@grassroot/ui-solid/assistant";
import { assistantDemoContext } from "@grassroot/demo-fixtures";
 
export default function ContextDisplayDemo() {
  return <ContextDisplay used={assistantDemoContext.used} limit={assistantDemoContext.total} />;
}