Build Your Own Intelligent UI: Stream Components in LLM Answers

<script setup lang="ts">
import { computed, ref } from 'vue'

interface Item { name?: string, perGuest?: number, unit?: string }

const props = defineProps<{ guests?: number, items?: Item[] }>()

// Model values are untrusted: keep only positive, finite numbers.
const positive = (value: unknown) =>
  typeof value === 'number' && Number.isFinite(value) && value > 0 ? value : undefined

// After the user edits the count, new `guests` props from the stream don't override it.
const edited = ref<number>()
const count = computed(() => edited.value ?? positive(props.guests) ?? 4)
const rows = computed(() => (props.items ?? []).filter(item => item.name && positive(item.perGuest)))

function onInput(event: Event) {
  edited.value = positive(Number((event.target as HTMLInputElement).value)) ?? edited.value
}
</script>

<template>
  <div class="quantity-calculator">
    <label>
      Guests
      <input :value="count" type="number" min="1" @input="onInput">
    </label>
    <ul>
      <li v-for="item in rows" :key="item.name">
        {{ item.name }}: {{ Math.ceil(item.perGuest! * count) }} {{ item.unit }}
      </li>
    </ul>
  </div>
</template>

'use client'
import { useState } from 'react'

interface Item { name?: string, perGuest?: number, unit?: string }

// Model values are untrusted: keep only positive, finite numbers.
const positive = (value: unknown) =>
  typeof value === 'number' && Number.isFinite(value) && value > 0 ? value : undefined

export function QuantityCalculator({ guests, items = [] }: { guests?: number, items?: Item[] }) {
  // After the user edits the count, new `guests` props from the stream don't override it.
  const [edited, setEdited] = useState<number>()
  const count = edited ?? positive(guests) ?? 4

  return (
    <div className="quantity-calculator">
      <label>
        Guests
        <input
          type="number"
          min={1}
          value={count}
          onChange={event => setEdited(positive(Number(event.target.value)) ?? edited)}
        />
      </label>
      <ul>
        {items.filter(item => item.name && positive(item.perGuest)).map(item => (
          <li key={item.name}>
            {item.name}: {Math.ceil(item.perGuest! * count)} {item.unit}
          </li>
        ))}
      </ul>
    </div>
  )
}

<script setup lang="ts">
import { Markdown } from '@comark/vue'
import QuantityCalculator from './QuantityCalculator.vue'
import Timeline from './Timeline.vue'

defineProps<{ text: string, isStreaming: boolean }>()

const components = { 'quantity-calculator': QuantityCalculator, timeline: Timeline }
</script>

<template>
  <Suspense>
    <Markdown :value="text" :streaming="isStreaming" :components="components" caret />
  </Suspense>
</template>

'use client'
import { MarkdownClient } from '@comark/react'
import { QuantityCalculator } from './QuantityCalculator'
import { Timeline } from './Timeline'

const components = { 'quantity-calculator': QuantityCalculator, timeline: Timeline }

export function Message({ text, isStreaming }: { text: string, isStreaming: boolean }) {
  return <MarkdownClient value={text} streaming={isStreaming} components={components} caret />
}