Message Bubble

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import { Bot, User } from "lucide-vue-next";
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
  MessageGroup,
  MessageHeader,
  MessageTyping,
} from "@/components/orvui/agents/message";
import { MessageBubble, MessageBubbleContent } from "@/components/orvui/agents/message-bubble";
import { MessageScroller } from "@/components/orvui/agents/message-scroller";
import { PromptInput } from "@/components/orvui/agents/prompt-input";
import { StreamingResponse } from "@/components/orvui/agents/streaming-response";
interface ChatMessage {
  id: string;
  from: "user" | "assistant";
  content: string;
  animateIn: boolean;
  streaming?: boolean;
}
const messages = ref<ChatMessage[]>([
  {
    id: "welcome-question",
    from: "user",
    content: "What should we include in the first release?",
    animateIn: false,
  },
  {
    id: "welcome-answer",
    from: "assistant",
    content: "Start with the smallest workflow that still feels complete.",
    animateIn: false,
  },
]);
const phase = ref<"idle" | "waiting" | "typing">("idle");
const pending = computed(() => phase.value === "waiting"),
  loading = computed(() => phase.value !== "idle");
let serial = 0,
  reduced = false,
  animation: number | undefined;
let epoch = 0;
const scheduledTasks = new Set<ReturnType<typeof setTimeout>>();
function cancel() {
  epoch++;
  scheduledTasks.forEach(clearTimeout);
  scheduledTasks.clear();
}
function later(milliseconds: number, task: () => void) {
  const version = epoch;
  const handle = setTimeout(() => {
    scheduledTasks.delete(handle);
    if (version === epoch) task();
  }, milliseconds);
  scheduledTasks.add(handle);
}
onBeforeUnmount(cancel);
function stop() {
  cancel();
  if (animation !== undefined) cancelAnimationFrame(animation);
  animation = undefined;
  phase.value = "idle";
  messages.value.forEach((message) => {
    message.streaming = false;
  });
}
function submit(prompt: string) {
  if (loading.value) return;
  const turn = serial++,
    text =
      "That message mounted once with a spring pop. Streaming updates only change its content, so the entrance does not replay.";
  messages.value.push({
    id: `sent-user-${turn}`,
    from: "user",
    content: prompt,
    animateIn: true,
  });
  phase.value = "waiting";
  later(reduced ? 0 : 420, () => {
    messages.value.push({
      id: `sent-assistant-${turn}`,
      from: "assistant",
      content: "",
      animateIn: true,
      streaming: true,
    });
    const target = messages.value[messages.value.length - 1];
    phase.value = "typing";
    if (reduced) {
      target.content = text;
      target.streaming = false;
      phase.value = "idle";
      return;
    }
    const start = performance.now() + 140,
      version = epoch;
    const render = (now: number) => {
      if (version !== epoch) return;
      const count = Math.min(
        text.length,
        Math.floor(Math.max(0, now - start) * 0.096),
      );
      target.content = text.substring(0, count);
      if (count < text.length) animation = requestAnimationFrame(render);
      else {
        animation = undefined;
        target.streaming = false;
        phase.value = "idle";
      }
    };
    animation = requestAnimationFrame(render);
  });
}
onMounted(() => {
  reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
});
onBeforeUnmount(stop);
</script>
<template>
  <div
    class="flex h-[440px] w-full max-w-xl flex-col overflow-hidden rounded-2xl border border-border/70 bg-background"
  >
    <MessageScroller
      :busy="loading"
      class="min-h-0 flex-1"
      viewport-class-name="px-3 py-4"
      content-class-name="min-h-full"
      ><MessageGroup spacing="default"
        ><Message
          v-for="message in messages"
          :key="message.id"
          :id="message.id"
          :from="message.from"
          :animate-in="message.from === 'user' && message.animateIn"
          ><MessageContent
            ><MessageBubble
              :variant="message.from === 'user' ? 'solid' : 'soft'"
              :animate-in="false"
              ><MessageBubbleContent
                ><StreamingResponse
                  v-if="message.from === 'assistant'"
                  :status="message.streaming ? 'streaming' : 'complete'"
                  :show-actions="false"
                  :announce="false"
                  ><template v-if="message.content">{{
                    message.content
                  }}</template
                  ><MessageTyping v-else /></StreamingResponse
                ><template v-else>{{
                  message.content
                }}</template></MessageBubbleContent
              ></MessageBubble
            ></MessageContent
          ></Message
        ><Message v-if="pending" id="pending-assistant" from="assistant"
          ><MessageContent
            ><MessageTyping
              label="Preparing response" /></MessageContent></Message></MessageGroup
    ></MessageScroller>
    <div class="shrink-0 border-t border-border/60 p-2">
      <PromptInput
        :min-rows="1"
        :max-rows="1"
        :loading="loading"
        @submit="submit"
        @stop="stop"
        placeholder="Send a bubble…"
        class="border-0 bg-muted shadow-none focus-within:border-transparent"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from "vue";
import { AnimatePresence } from "motion-v";
import { Bot, RotateCcw, User } from "lucide-vue-next";
import { MessageBubble, MessageBubbleContent } from "@/components/orvui/agents/message-bubble";
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
  MessageGroup,
  MessageHeader,
} from "@/components/orvui/agents/message";
import { StreamingResponse } from "@/components/orvui/agents/streaming-response";
const step = ref(0),
  run = ref(0);
const replies = [
  "Absolutely. I’ll keep it concise and lead with what changed.",
  "Do you want the tone to feel more technical or more customer-facing?",
];
let epoch = 0;
const scheduledTasks = new Set<ReturnType<typeof setTimeout>>();
function cancel() {
  epoch++;
  scheduledTasks.forEach(clearTimeout);
  scheduledTasks.clear();
}
function later(milliseconds: number, task: () => void) {
  const version = epoch;
  const handle = setTimeout(() => {
    scheduledTasks.delete(handle);
    if (version === epoch) task();
  }, milliseconds);
  scheduledTasks.add(handle);
}
onBeforeUnmount(cancel);
function replay() {
  cancel();
  run.value++;
  step.value = 0;
  later(650, () => {
    step.value = 1;
  });
  later(1550, () => {
    step.value = 2;
  });
}
onMounted(replay);
</script>
<template>
  <div class="flex h-[410px] w-full max-w-xl flex-col justify-center px-3">
    <MessageGroup :key="run" spacing="default"
      ><Message from="user"
        ><MessageAvatar class="bg-foreground text-background"
          ><User /></MessageAvatar
        ><MessageContent
          ><MessageHeader
            ><span class="font-medium text-foreground/70">You</span
            ><span>Now</span></MessageHeader
          ><MessageBubble variant="solid"
            ><MessageBubbleContent
              >Can you turn these notes into a launch
              update?</MessageBubbleContent
            ></MessageBubble
          ><MessageFooter>Delivered</MessageFooter></MessageContent
        ></Message
      ><AnimatePresence mode="popLayout"
        ><Message
          v-for="(reply, index) in replies.slice(0, step)"
          :key="index"
          from="assistant"
          ><MessageAvatar :placeholder="index > 0"
            ><Bot v-if="index === 0" /></MessageAvatar
          ><MessageContent
            ><MessageHeader v-if="index === 0"
              ><span class="font-medium text-foreground/70">Assistant</span
              ><span>Just now</span></MessageHeader
            ><MessageBubble variant="soft"
              ><MessageBubbleContent
                ><StreamingResponse status="complete" :show-actions="false">{{
                  reply
                }}</StreamingResponse></MessageBubbleContent
              ></MessageBubble
            ></MessageContent
          ></Message
        ></AnimatePresence
      ></MessageGroup
    >
    <div class="flex h-11 items-end justify-center">
      <button
        type="button"
        @click="replay"
        class="inline-flex h-8 items-center gap-1.5 rounded-full border border-border px-3 text-xs font-medium text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
      >
        <RotateCcw class="size-3.5" />Replay
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Bot } from "lucide-vue-next";
import {
  MessageBubble,
  MessageBubbleCollapsible,
  MessageBubbleContent,
} from "@/components/orvui/agents/message-bubble";
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageHeader,
} from "@/components/orvui/agents/message";
import { StreamingResponse } from "@/components/orvui/agents/streaming-response";
const paragraphs = [
  "The release is ready for a focused rollout. The main conversation flow, keyboard navigation, error recovery, and reduced-motion behavior are all covered.",
  "I would keep advanced workflow controls out of this version. They add configuration without improving the first-run experience, and the usage data from this release will give us a better basis for those decisions.",
  "Before publishing, run the accessibility suite once more and verify the streaming behavior with a long response on a smaller viewport.",
];
</script>
<template>
  <div class="flex h-[410px] w-full max-w-xl items-start px-3 pt-14">
    <Message from="assistant"
      ><MessageAvatar><Bot /></MessageAvatar
      ><MessageContent
        ><MessageHeader
          ><span class="font-medium text-foreground/70">Assistant</span
          ><span>Summary</span></MessageHeader
        ><MessageBubble variant="soft" :animate-in="false"
          ><MessageBubbleContent class="max-w-[90%]"
            ><StreamingResponse status="complete" :show-actions="false"
              ><MessageBubbleCollapsible :collapsed-lines="4"
                ><p v-for="paragraph in paragraphs" :key="paragraph">
                  {{ paragraph }}
                </p></MessageBubbleCollapsible
              ></StreamingResponse
            ></MessageBubbleContent
          ></MessageBubble
        ></MessageContent
      ></Message
    >
  </div>
</template>