Agent Loading States

<script setup lang="ts">
import { ReasoningText, type ReasoningTextVariant } from "@/components/orvui/agents/loading-states";
const ordinary = [
  "Thinking",
  "Reading the request",
  "Working through the details",
  "Preparing the answer",
];
const examples = (
  ["cascade", "swap", "scramble"] as ReasoningTextVariant[]
).map((variant) => ({
  variant,
  label: variant[0].toUpperCase() + variant.slice(1),
  phrases:
    variant === "scramble"
      ? ["Thinking", "Searching", "Reasoning", "Composing"]
      : ordinary,
}));
</script>
<template>
  <div class="grid w-full max-w-sm gap-7">
    <div v-for="example in examples" :key="example.variant" class="grid gap-2">
      <span
        class="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/60"
        >{{ example.label }}</span
      ><ReasoningText
        :variant="example.variant"
        :phrases="example.phrases"
        class="text-base"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ThinkingShimmer } from "@/components/orvui/agents/loading-states";
const duration = 1.8;
</script>
<template>
  <ThinkingShimmer class="text-lg" :duration="duration"
    >Thinking…</ThinkingShimmer
  >
</template>

<script setup lang="ts">
import { AgentProgress } from "@/components/orvui/agents/loading-states";
const initial = 151.6;
</script>
<template>
  <AgentProgress
    label="Churning"
    :initial-seconds="initial"
    class="text-base"
  />
</template>