MessageScroller

const messageScrollerFixture = {
  id: "message-scroller",
  label: "Incident response transcript",
  defaultScrollPosition: "last-anchor",
  messages: [
    { id: "incident-01", content: "Can you summarize the incident timeline?" },
    {
      id: "incident-02",
      content: "The alert fired at 09:14 after error rates crossed the paging threshold.",
    },
    {
      id: "incident-03",
      content: "Was customer traffic affected before the on-call engineer responded?",
    },
    {
      id: "incident-04",
      content: "Traffic began shifting to the healthy pool at 09:17.",
    },
    { id: "incident-05", content: "What did the first diagnostic check reveal?" },
    {
      id: "incident-06",
      content: "One application pool was returning stale dependency health checks.",
    },
    {
      id: "incident-07",
      content: "Start the remediation summary here.",
      scrollAnchor: true,
    },
    {
      id: "incident-08",
      content: "The unhealthy pool was drained without dropping active requests.",
    },
    {
      id: "incident-09",
      content: "Fresh instances joined the load balancer and passed readiness checks.",
    },
    { id: "incident-10", content: "Error rates returned to baseline at 09:21." },
    {
      id: "incident-11",
      content: "Synthetic checks confirmed recovery from three regions.",
    },
    {
      id: "incident-12",
      content: "Follow-up actions are documented and ready for review.",
    },
  ],
} as const;
 
import { MessageScroller } from "@grassroot/ui-react/advanced";
 
export default function MessageScrollerDemo() {
  return (
    <div className="h-56 w-full max-w-xl" data-testid="message-scroller-demo">
      <MessageScroller
        messages={messageScrollerFixture.messages}
        label={messageScrollerFixture.label}
        autoScroll={false}
        defaultScrollPosition="start"
        showButton={false}
      />
    </div>
  );
}

<script setup lang="ts">
const messageScrollerFixture = {
  id: "message-scroller",
  label: "Incident response transcript",
  defaultScrollPosition: "last-anchor",
  messages: [
    { id: "incident-01", content: "Can you summarize the incident timeline?" },
    {
      id: "incident-02",
      content: "The alert fired at 09:14 after error rates crossed the paging threshold.",
    },
    {
      id: "incident-03",
      content: "Was customer traffic affected before the on-call engineer responded?",
    },
    {
      id: "incident-04",
      content: "Traffic began shifting to the healthy pool at 09:17.",
    },
    { id: "incident-05", content: "What did the first diagnostic check reveal?" },
    {
      id: "incident-06",
      content: "One application pool was returning stale dependency health checks.",
    },
    {
      id: "incident-07",
      content: "Start the remediation summary here.",
      scrollAnchor: true,
    },
    {
      id: "incident-08",
      content: "The unhealthy pool was drained without dropping active requests.",
    },
    {
      id: "incident-09",
      content: "Fresh instances joined the load balancer and passed readiness checks.",
    },
    { id: "incident-10", content: "Error rates returned to baseline at 09:21." },
    {
      id: "incident-11",
      content: "Synthetic checks confirmed recovery from three regions.",
    },
    {
      id: "incident-12",
      content: "Follow-up actions are documented and ready for review.",
    },
  ],
} as const;
 
import { MessageScroller } from "@grassroot/ui-vue";
</script>
 
<template>
  <div class="h-56 w-full max-w-xl" data-testid="message-scroller-demo">
    <MessageScroller
      :messages="messageScrollerFixture.messages"
      :label="messageScrollerFixture.label"
      :auto-scroll="false"
      default-scroll-position="start"
      :show-button="false"
    />
  </div>
</template>

import { Component } from "@angular/core";
const messageScrollerFixture = {
  id: "message-scroller",
  label: "Incident response transcript",
  defaultScrollPosition: "last-anchor",
  messages: [
    { id: "incident-01", content: "Can you summarize the incident timeline?" },
    {
      id: "incident-02",
      content: "The alert fired at 09:14 after error rates crossed the paging threshold.",
    },
    {
      id: "incident-03",
      content: "Was customer traffic affected before the on-call engineer responded?",
    },
    {
      id: "incident-04",
      content: "Traffic began shifting to the healthy pool at 09:17.",
    },
    { id: "incident-05", content: "What did the first diagnostic check reveal?" },
    {
      id: "incident-06",
      content: "One application pool was returning stale dependency health checks.",
    },
    {
      id: "incident-07",
      content: "Start the remediation summary here.",
      scrollAnchor: true,
    },
    {
      id: "incident-08",
      content: "The unhealthy pool was drained without dropping active requests.",
    },
    {
      id: "incident-09",
      content: "Fresh instances joined the load balancer and passed readiness checks.",
    },
    { id: "incident-10", content: "Error rates returned to baseline at 09:21." },
    {
      id: "incident-11",
      content: "Synthetic checks confirmed recovery from three regions.",
    },
    {
      id: "incident-12",
      content: "Follow-up actions are documented and ready for review.",
    },
  ],
} as const;
 
import { GrassrootMessageScroller } from "@grassroot/ui-angular/message-scroller";
 
@Component({
  selector: "app-message-scroller-demo",
  standalone: true,
  imports: [GrassrootMessageScroller],
  host: { style: "display: contents" },
  template: `
    <div class="h-56 w-full max-w-xl" data-testid="message-scroller-demo">
      <grassroot-message-scroller
        [messages]="fixture.messages"
        [label]="fixture.label"
        [autoScroll]="false"
        defaultScrollPosition="start"
        [showButton]="false"
      />
    </div>
  `,
})
export class MessageScrollerDemoComponent {
  protected readonly fixture = messageScrollerFixture;
}
 
export default MessageScrollerDemoComponent;

<script lang="ts">
  const messageScrollerFixture = {
    id: "message-scroller",
    label: "Incident response transcript",
    defaultScrollPosition: "last-anchor",
    messages: [
      { id: "incident-01", content: "Can you summarize the incident timeline?" },
      {
        id: "incident-02",
        content: "The alert fired at 09:14 after error rates crossed the paging threshold.",
      },
      {
        id: "incident-03",
        content: "Was customer traffic affected before the on-call engineer responded?",
      },
      {
        id: "incident-04",
        content: "Traffic began shifting to the healthy pool at 09:17.",
      },
      { id: "incident-05", content: "What did the first diagnostic check reveal?" },
      {
        id: "incident-06",
        content: "One application pool was returning stale dependency health checks.",
      },
      {
        id: "incident-07",
        content: "Start the remediation summary here.",
        scrollAnchor: true,
      },
      {
        id: "incident-08",
        content: "The unhealthy pool was drained without dropping active requests.",
      },
      {
        id: "incident-09",
        content: "Fresh instances joined the load balancer and passed readiness checks.",
      },
      { id: "incident-10", content: "Error rates returned to baseline at 09:21." },
      {
        id: "incident-11",
        content: "Synthetic checks confirmed recovery from three regions.",
      },
      {
        id: "incident-12",
        content: "Follow-up actions are documented and ready for review.",
      },
    ],
  } as const;
 
  import { MessageScroller } from "@grassroot/ui-svelte";
</script>
 
<div class="h-56 w-full max-w-xl" data-testid="message-scroller-demo">
  <MessageScroller
    messages={messageScrollerFixture.messages}
    label={messageScrollerFixture.label}
    autoScroll={false}
    defaultScrollPosition="start"
    showButton={false}
  />
</div>

/** @jsxImportSource solid-js */
const messageScrollerFixture = {
  id: "message-scroller",
  label: "Incident response transcript",
  defaultScrollPosition: "last-anchor",
  messages: [
    { id: "incident-01", content: "Can you summarize the incident timeline?" },
    {
      id: "incident-02",
      content: "The alert fired at 09:14 after error rates crossed the paging threshold.",
    },
    {
      id: "incident-03",
      content: "Was customer traffic affected before the on-call engineer responded?",
    },
    {
      id: "incident-04",
      content: "Traffic began shifting to the healthy pool at 09:17.",
    },
    { id: "incident-05", content: "What did the first diagnostic check reveal?" },
    {
      id: "incident-06",
      content: "One application pool was returning stale dependency health checks.",
    },
    {
      id: "incident-07",
      content: "Start the remediation summary here.",
      scrollAnchor: true,
    },
    {
      id: "incident-08",
      content: "The unhealthy pool was drained without dropping active requests.",
    },
    {
      id: "incident-09",
      content: "Fresh instances joined the load balancer and passed readiness checks.",
    },
    { id: "incident-10", content: "Error rates returned to baseline at 09:21." },
    {
      id: "incident-11",
      content: "Synthetic checks confirmed recovery from three regions.",
    },
    {
      id: "incident-12",
      content: "Follow-up actions are documented and ready for review.",
    },
  ],
} as const;
 
import { MessageScroller } from "@grassroot/ui-solid";
 
export default function MessageScrollerDemo() {
  return (
    <div class="h-56 w-full max-w-xl" data-testid="message-scroller-demo">
      <MessageScroller
        messages={messageScrollerFixture.messages}
        label={messageScrollerFixture.label}
        autoScroll={false}
        defaultScrollPosition="start"
        showButton={false}
      />
    </div>
  );
}