OpenUI Assistant

1"use client";
2 
3import { Renderer } from "@openuidev/react-lang";
4import { openuiChatLibrary } from "@openuidev/react-ui/genui-lib";
5import type { EveMessage } from "eve/react";
6import { useEveAgent } from "eve/react";
7import { useMemo, useState } from "react";
8 
9function getLatestAssistantText(messages: readonly EveMessage[]): string {
10  for (let index = messages.length - 1; index >= 0; index -= 1) {
11    const message = messages[index];
12 
13    if (message?.role !== "assistant") {
14      continue;
15    }
16 
17    return message.parts
18      .filter((part) => part.type === "text")
19      .map((part) => part.text)
20      .join("\n");
21  }
22 
23  return "";
24}
25 
26/**
27 * Reference chat surface that streams Eve assistant text into the OpenUI
28 * Renderer. Copy this component into a Next.js app that already uses
29 * `withEve()` from `eve/next`.
30 */
31export function OpenUIEveChat() {
32  const agent = useEveAgent();
33  const [submitError, setSubmitError] = useState<string | null>(null);
34  const isStreaming = agent.status === "streaming";
35  const isBusy =
36    agent.status === "submitted" || isStreaming;
37 
38  const assistantProgram = useMemo(
39    () => getLatestAssistantText(agent.data.messages),
40    [agent.data.messages],
41  );
42 
43  return (
44    <div className="mx-auto flex h-dvh max-w-3xl flex-col gap-4 p-4">
45      <section
46        aria-busy={isBusy}
47        aria-live="polite"
48        className="min-h-0 flex-1 overflow-auto rounded-xl border p-4"
49      >
50        {assistantProgram.length > 0 ? (
51          <Renderer
52            isStreaming={isStreaming}
53            library={openuiChatLibrary}
54            response={assistantProgram}
55          />
56        ) : (
57          <p className="text-sm text-muted-foreground">
58            Ask for weather, a stock quote, or a demo search to see generative UI.
59          </p>
60        )}
61      </section>
62 
63      <form
64        className="flex gap-2"
65        onSubmit={async (event) => {
66          event.preventDefault();
67          const formElement = event.currentTarget;
68          const form = new FormData(formElement);
69          const message = String(form.get("message") ?? "").trim();
70 
71          if (message.length > 0) {
72            setSubmitError(null);
73 
74            try {
75              await agent.send(message);
76              formElement.reset();
77            } catch (error) {
78              const errorMessage =
79                error instanceof Error ? error.message : "Failed to send message.";
80              setSubmitError(errorMessage);
81            }
82          }
83// … truncated