eve 0.43.0 → 0.44.1

package/dist/src/setup/scaffold/create/web-template.js

@@ -17,7 +17,7 @@ export default eveChannel({
 
 import type { UserContent } from "ai";
 import { useEveAgent } from "eve/react";
-import { AlertCircleIcon, BrainIcon } from "lucide-react";
+import { AlertCircleIcon, BrainIcon, PlusIcon, SquareIcon } from "lucide-react";
 import { useState } from "react";
 import {
   Conversation,
@@ -27,20 +27,50 @@ import {
 import { Message, MessageContent } from "@/components/ai-elements/message";
 import {
   PromptInput,
+  PromptInputButton,
   type PromptInputMessage,
   PromptInputSubmit,
   PromptInputTextarea,
 } from "@/components/ai-elements/prompt-input";
 import { Shimmer } from "@/components/ai-elements/shimmer";
+import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { AgentMessage } from "./agent-message";
 
 const AGENT_NAME = "__EVE_INIT_APP_NAME__";
 
-export function AgentChat() {
+export function AgentChat({
+  sessionId,
+  sessionless = false,
+}: {
+  readonly sessionId?: string;
+  readonly sessionless?: boolean;
+}) {
   const [cancellationError, setCancellationError] = useState<string>();
-  const agent = useEveAgent();
+  const agent = useEveAgent({
+    initialSession:
+      sessionId === undefined
+        ? undefined
+        : {
+            sessionId,
+            streamIndex: 0,
+          },
+    resume: sessionId !== undefined,
+    onSessionChange(session) {
+      if (sessionId === undefined && session !== undefined) {
+        // Next patches window.history to navigate, which would detach the active stream.
+        History.prototype.replaceState.call(
+          window.history,
+          window.history.state,
+          "",
+          \`/s/\${encodeURIComponent(session.sessionId)}\`,
+        );
+      }
+    },
+  });
+
   const isBusy = agent.status === "submitted" || agent.status === "streaming";
+  const isRestoring = sessionId !== undefined && agent.events.length === 0 && isBusy;
   const isEmpty = agent.data.messages.length === 0;
   const lastMessage = agent.data.messages.at(-1);
   const isPendingAssistantShell =
@@ -51,6 +81,9 @@ export function AgentChat() {
     (agent.status === "submitted" || lastMessage?.role !== "assistant" || isPendingAssistantShell);
   const turnFailure = isBusy ? undefined : getLatestTurnFailure(agent.events);
   const errorMessage = cancellationError ?? agent.error?.message ?? turnFailure;
+  const hasConversationContent = sessionless || !isEmpty || errorMessage !== undefined;
+  const showConversationLayout = isRestoring || hasConversationContent;
+  const activeSessionId = sessionId ?? agent.session?.sessionId;
 
   const requestCancellation = () => {
     setCancellationError(undefined);
@@ -61,12 +94,13 @@ export function AgentChat() {
 
   const handleSubmit = async (message: PromptInputMessage) => {
     const text = message.text.trim();
-    if ((text.length === 0 && message.files.length === 0) || isBusy) return;
+    if ((text.length === 0 && message.files.length === 0) || isRestoring) return;
 
     setCancellationError(undefined);
+    const options = isBusy ? { turnPolicy: "steer" as const } : undefined;
 
     if (message.files.length === 0) {
-      await agent.send(text);
+      await agent.send(text, options);
       return;
     }
 
@@ -83,42 +117,44 @@ export function AgentChat() {
       });
     }
 
-    await agent.send(parts);
+    await agent.send(parts, options);
   };
 
   const composer = (
     <PromptInput onSubmit={handleSubmit}>
-      <PromptInputTextarea disabled={isBusy} placeholder="Send a message…" />
-      <PromptInputSubmit onStop={requestCancellation} status={agent.status} />
+      <PromptInputTextarea disabled={isRestoring} placeholder="Send a message…" />
+      {isBusy && !isRestoring ? (
+        <PromptInputButton
+          aria-label="Stop"
+          className="absolute right-12 bottom-2.5 rounded-full"
+          onClick={requestCancellation}
+          variant="default"
+        >
+          <SquareIcon className="size-3 fill-current" />
+        </PromptInputButton>
+      ) : null}
+      <PromptInputSubmit disabled={isRestoring} status={isBusy ? undefined : agent.status} />
     </PromptInput>
   );
 
   return (
     <main className="flex h-dvh flex-col overflow-hidden bg-background text-foreground">
-      {isEmpty ? null : (
-        <header className="flex h-14 shrink-0 items-center justify-center pl-4 pr-2">
-          <span className="truncate text-muted-foreground text-sm">{AGENT_NAME}</span>
-        </header>
-      )}
-
-      {errorMessage ? (
-        <div className="mx-auto w-full max-w-3xl shrink-0 px-4 pt-2 sm:px-6">
-          <div
-            className="flex items-start gap-3 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2.5 text-sm"
-            role="alert"
-          >
-            <AlertCircleIcon className="mt-0.5 size-4 shrink-0 text-destructive" />
-            <div>
-              <p className="font-medium">Request failed</p>
-              <p className="mt-0.5 text-muted-foreground">{errorMessage}</p>
-            </div>
-          </div>
-        </div>
+      {showConversationLayout ? (
+        <ChatHeader canStartNewChat={activeSessionId !== undefined} />
       ) : null}
 
-      {isEmpty ? null : (
-        <Conversation className="min-h-0 flex-1">
-          <ConversationContent className="mx-auto w-full max-w-3xl gap-6 px-4 py-6 sm:px-6">
+      {showConversationLayout ? (
+        <Conversation
+          className="min-h-0 flex-1"
+          initial={sessionId === undefined ? undefined : false}
+          resize={activeSessionId === undefined ? "smooth" : "instant"}
+          scrollRestorationKey={
+            isEmpty || activeSessionId === undefined
+              ? undefined
+              : \`eve:web-chat-scroll:\${activeSessionId}\`
+          }
+        >
+          <ConversationContent className="mx-auto w-full max-w-3xl gap-6 px-4 pt-20 pb-36 sm:px-6">
             {agent.data.messages.map((message, index) =>
               showPendingThinking &&
               isPendingAssistantShell &&
@@ -138,30 +174,73 @@ export function AgentChat() {
               ),
             )}
             {showPendingThinking ? <PendingThinking /> : null}
+            {errorMessage ? <ErrorMessage message={errorMessage} /> : null}
           </ConversationContent>
           <ConversationScrollButton />
         </Conversation>
-      )}
+      ) : null}
 
       <div
         className={cn(
           "mx-auto w-full px-4 sm:px-6",
-          isEmpty
-            ? "flex max-w-xl flex-1 flex-col items-center justify-center gap-8 pb-[10vh]"
-            : "max-w-3xl shrink-0 pb-6",
+          showConversationLayout
+            ? "fixed bottom-0 left-1/2 z-20 max-w-3xl -translate-x-1/2 bg-gradient-to-t from-background via-background to-transparent pt-4 pb-6"
+            : "flex max-w-xl flex-1 flex-col items-center justify-center gap-8 pb-[10vh]",
         )}
       >
-        {isEmpty ? (
+        {showConversationLayout ? null : (
           <div className="flex flex-col items-center gap-3 text-center">
             <h1 className="font-medium text-5xl tracking-tighter">{AGENT_NAME}</h1>
           </div>
-        ) : null}
+        )}
         <div className="w-full">{composer}</div>
       </div>
     </main>
   );
 }
 
+function ErrorMessage({ message }: { readonly message: string }) {
+  return (
+    <Message className="max-w-full" from="assistant">
+      <MessageContent>
+        <div
+          className="flex w-full items-start gap-3 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2.5 text-sm"
+          role="alert"
+        >
+          <AlertCircleIcon className="mt-0.5 size-4 shrink-0 text-destructive" />
+          <div>
+            <p className="font-medium">Request failed</p>
+            <p className="mt-0.5 text-muted-foreground">{message}</p>
+          </div>
+        </div>
+      </MessageContent>
+    </Message>
+  );
+}
+
+function ChatHeader({ canStartNewChat }: { readonly canStartNewChat: boolean }) {
+  return (
+    <header className="pointer-events-none fixed top-0 right-0 left-0 z-20 h-14">
+      <div className="relative mx-auto flex h-full w-full max-w-3xl items-center justify-center bg-background px-24">
+        <span className="truncate text-muted-foreground text-sm">{AGENT_NAME}</span>
+        {canStartNewChat ? (
+          <Button
+            aria-label="Start a new chat"
+            className="pointer-events-auto fixed top-2 right-6"
+            onClick={() => window.location.assign("/s")}
+            size="sm"
+            type="button"
+            variant="ghost"
+          >
+            <PlusIcon className="size-4" />
+            <span className="hidden sm:inline">New chat</span>
+          </Button>
+        ) : null}
+      </div>
+    </header>
+  );
+}
+
 function PendingThinking() {
   return (
     <Message aria-live="polite" from="assistant">
@@ -208,6 +287,7 @@ import type {
   EveAuthorizationPart,
   EveDynamicToolPart,
   EveMessage,
+  EveMessageInputRequest,
   EveMessagePart,
 } from "eve/react";
 import {
@@ -219,6 +299,17 @@ import {
   XCircleIcon,
 } from "lucide-react";
 import { Message, MessageContent, MessageResponse } from "@/components/ai-elements/message";
+import {
+  Question,
+  QuestionActions,
+  QuestionDescription,
+  QuestionInput,
+  QuestionOption,
+  QuestionOptions,
+  QuestionPrompt,
+  type QuestionResponse,
+  QuestionSubmit,
+} from "@/components/ai-elements/question";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "@/components/ai-elements/reasoning";
 import {
   Tool,
@@ -253,6 +344,9 @@ export function AgentMessage({
     (last, part, index) => (part.type === "text" ? index : last),
     -1,
   );
+  const hasAssistantText =
+    message.role === "assistant" &&
+    message.parts.some((part) => part.type === "text" && part.text.length > 0);
 
   return (
     <Message
@@ -260,15 +354,17 @@ export function AgentMessage({
       from={message.role}
     >
       <MessageContent>
-        {message.parts.map((part, index) => (
-          <AgentMessagePart
-            canRespond={canRespond}
-            key={partKey(part, index)}
-            onInputResponses={onInputResponses}
-            part={part}
-            showCaret={isStreaming && message.role === "assistant" && index === lastTextIndex}
-          />
-        ))}
+        {message.parts.map((part, index) =>
+          hasAssistantText && part.type === "reasoning" ? null : (
+            <AgentMessagePart
+              canRespond={canRespond}
+              key={partKey(part, index)}
+              onInputResponses={onInputResponses}
+              part={part}
+              showCaret={isStreaming && message.role === "assistant" && index === lastTextIndex}
+            />
+          ),
+        )}
       </MessageContent>
     </Message>
   );
@@ -305,7 +401,19 @@ function AgentMessagePart({
       return <AttachmentPart part={part} />;
     case "authorization":
       return <AuthorizationPrompt part={part} />;
-    case "dynamic-tool":
+    case "dynamic-tool": {
+      const inputRequest = part.toolMetadata?.eve?.inputRequest;
+      if (inputRequest?.kind === "question") {
+        return (
+          <QuestionRequest
+            canRespond={canRespond}
+            inputRequest={inputRequest}
+            inputResponse={part.toolMetadata?.eve?.inputResponse}
+            onInputResponses={onInputResponses}
+          />
+        );
+      }
+
       return (
         <Tool
           defaultOpen={part.state === "approval-requested" || part.state === "approval-responded"}
@@ -327,9 +435,76 @@ function AgentMessagePart({
           </ToolContent>
         </Tool>
       );
+    }
   }
 }
 
+function QuestionRequest({
+  canRespond,
+  inputRequest,
+  inputResponse,
+  onInputResponses,
+}: {
+  readonly canRespond: boolean;
+  readonly inputRequest: EveMessageInputRequest;
+  readonly inputResponse?: AgentInputResponse;
+  readonly onInputResponses: (responses: readonly AgentInputResponse[]) => void | Promise<void>;
+}) {
+  const selectedOption = inputRequest.options?.find(
+    (option) => option.id === inputResponse?.optionId,
+  );
+  const hasOptions = (inputRequest.options?.length ?? 0) > 0;
+  const acceptsFreeform = inputRequest.allowFreeform === true || !hasOptions;
+
+  const submitResponse = ({ selectedValues, text }: QuestionResponse) =>
+    onInputResponses([
+      {
+        optionId: selectedValues[0],
+        requestId: inputRequest.requestId,
+        text,
+      },
+    ]);
+
+  return (
+    <Question
+      defaultValue={{
+        selectedValues: inputResponse?.optionId ? [inputResponse.optionId] : [],
+        text: inputResponse?.text ?? "",
+      }}
+      disabled={!canRespond || inputResponse !== undefined}
+      onSubmit={submitResponse}
+    >
+      <QuestionPrompt>{inputRequest.prompt}</QuestionPrompt>
+      {hasOptions ? (
+        <QuestionOptions className="flex-col items-stretch" aria-label={inputRequest.prompt}>
+          {inputRequest.options?.map((option) => (
+            <QuestionOption className="justify-start text-left" key={option.id} value={option.id}>
+              <span>
+                <span className="block">{option.label}</span>
+                {option.description ? (
+                  <span className="block font-normal text-xs opacity-70">{option.description}</span>
+                ) : null}
+              </span>
+            </QuestionOption>
+          ))}
+        </QuestionOptions>
+      ) : null}
+      {acceptsFreeform ? (
+        <QuestionInput aria-label="Answer" placeholder="Type your answer…" />
+      ) : null}
+      {inputResponse ? (
+        <QuestionDescription>
+          Responded: {selectedOption?.label ?? inputResponse.text ?? inputResponse.optionId}
+        </QuestionDescription>
+      ) : (
+        <QuestionActions>
+          <QuestionSubmit>Answer</QuestionSubmit>
+        </QuestionActions>
+      )}
+    </Question>
+  );
+}
+
 function AttachmentPart({ part }: { readonly part: EveFilePart }) {
   const label = part.filename ?? "Attachment";
   const detail = [part.mediaType, formatBytes(part.size)].filter(Boolean).join(" - ");
@@ -668,6 +843,21 @@ export default function RootLayout({ children }: { readonly children: ReactNode
 export default function Page() {
   return <AgentChat />;
 }
+`,"app/s/[sessionId]/page.tsx":`import { AgentChat } from "@/app/_components/agent-chat";
+
+export default async function SessionPage({
+  params,
+}: {
+  readonly params: Promise<{ readonly sessionId: string }>;
+}) {
+  const { sessionId } = await params;
+  return <AgentChat sessionId={sessionId} />;
+}
+`,"app/s/page.tsx":`import { AgentChat } from "@/app/_components/agent-chat";
+
+export default function NewSessionPage() {
+  return <AgentChat sessionless />;
+}
 `,"components/ai-elements/chain-of-thought.tsx":`"use client";
 
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
@@ -1394,21 +1584,116 @@ import { cn } from "@/lib/utils";
 import type { UIMessage } from "ai";
 import { ArrowDownIcon, DownloadIcon } from "lucide-react";
 import type { ComponentProps } from "react";
-import { useCallback } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 
-export type ConversationProps = ComponentProps<typeof StickToBottom>;
+export type ConversationProps = ComponentProps<typeof StickToBottom> & {
+  scrollRestorationKey?: string;
+};
 
-export const Conversation = ({ className, ...props }: ConversationProps) => (
+export const Conversation = ({
+  children,
+  className,
+  initial,
+  scrollRestorationKey,
+  ...props
+}: ConversationProps) => (
   <StickToBottom
     className={cn("relative flex-1 overflow-y-hidden", className)}
-    initial="smooth"
+    initial={initial ?? (scrollRestorationKey === undefined ? "smooth" : false)}
     resize="smooth"
     role="log"
     {...props}
-  />
+  >
+    {typeof children === "function" ? (
+      (context) => (
+        <>
+          {children(context)}
+          {scrollRestorationKey === undefined ? null : (
+            <ConversationScrollRestoration storageKey={scrollRestorationKey} />
+          )}
+        </>
+      )
+    ) : (
+      <>
+        {children}
+        {scrollRestorationKey === undefined ? null : (
+          <ConversationScrollRestoration storageKey={scrollRestorationKey} />
+        )}
+      </>
+    )}
+  </StickToBottom>
 );
 
+function ConversationScrollRestoration({ storageKey }: { readonly storageKey: string }) {
+  const { scrollRef, scrollToBottom, state } = useStickToBottomContext();
+  const restoredKeyRef = useRef<string | undefined>(undefined);
+
+  useLayoutEffect(() => {
+    const scrollElement = scrollRef.current;
+    if (scrollElement === null) return;
+
+    if (restoredKeyRef.current !== storageKey) {
+      const saved = readScrollPosition(sessionStorage.getItem(storageKey));
+      if (saved?.atBottom === false) {
+        scrollElement.scrollTop = saved.scrollTop;
+        requestAnimationFrame(() => {
+          scrollElement.scrollTop = saved.scrollTop;
+        });
+      } else {
+        scrollElement.scrollTop = scrollElement.scrollHeight;
+        scrollToBottom({ animation: "instant", ignoreEscapes: true });
+      }
+      restoredKeyRef.current = storageKey;
+    }
+
+    const saveNow = () => {
+      sessionStorage.setItem(
+        storageKey,
+        JSON.stringify({
+          atBottom: state.isAtBottom || state.isNearBottom,
+          scrollTop: scrollElement.scrollTop,
+        }),
+      );
+    };
+    let frame: number | undefined;
+    const scheduleSave = () => {
+      if (frame !== undefined) return;
+      frame = requestAnimationFrame(() => {
+        frame = undefined;
+        saveNow();
+      });
+    };
+    scrollElement.addEventListener("scroll", scheduleSave, { passive: true });
+    window.addEventListener("pagehide", saveNow);
+    return () => {
+      scrollElement.removeEventListener("scroll", scheduleSave);
+      window.removeEventListener("pagehide", saveNow);
+      if (frame !== undefined) cancelAnimationFrame(frame);
+      saveNow();
+    };
+  }, [scrollRef, scrollToBottom, state, storageKey]);
+
+  return null;
+}
+
+function readScrollPosition(value: string | null):
+  | {
+      readonly atBottom: boolean;
+      readonly scrollTop: number;
+    }
+  | undefined {
+  if (value === null) return undefined;
+  try {
+    const parsed = JSON.parse(value) as { atBottom?: unknown; scrollTop?: unknown };
+    return typeof parsed.atBottom === "boolean" && typeof parsed.scrollTop === "number"
+      ? { atBottom: parsed.atBottom, scrollTop: parsed.scrollTop }
+      : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
 export type ConversationContentProps = ComponentProps<typeof StickToBottom.Content>;
 
 export const ConversationContent = ({ className, ...props }: ConversationContentProps) => (
@@ -1455,16 +1740,21 @@ export const ConversationScrollButton = ({
   ...props
 }: ConversationScrollButtonProps) => {
   const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => setIsReady(true), []);
 
   const handleScrollToBottom = useCallback(() => {
     scrollToBottom();
   }, [scrollToBottom]);
 
   return (
+    isReady &&
     !isAtBottom && (
       <Button
+        aria-label="Scroll to bottom"
         className={cn(
-          "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full dark:bg-background dark:hover:bg-muted",
+          "absolute bottom-32 left-[50%] translate-x-[-50%] rounded-full dark:bg-background dark:hover:bg-muted",
           className,
         )}
         onClick={handleScrollToBottom}
@@ -3149,6 +3439,287 @@ export const PromptInputCommandSeparator = ({
   className,
   ...props
 }: PromptInputCommandSeparatorProps) => <CommandSeparator className={cn(className)} {...props} />;
+`,"components/ai-elements/question.tsx":`"use client";
+
+import type {
+  ChangeEvent,
+  ComponentProps,
+  FormEvent,
+  HTMLAttributes,
+  MouseEvent,
+  ReactNode,
+} from "react";
+
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+
+export interface QuestionValue {
+  selectedValues: readonly string[];
+  text: string;
+}
+
+export interface QuestionResponse {
+  selectedValues: readonly string[];
+  text?: string;
+}
+
+type SelectionMode = "multiple" | "single";
+
+interface QuestionContextValue {
+  disabled: boolean;
+  selectedValues: readonly string[];
+  selectionMode: SelectionMode;
+  setText: (text: string) => void;
+  text: string;
+  toggleValue: (value: string) => void;
+}
+
+const QuestionContext = createContext<QuestionContextValue | null>(null);
+
+const useQuestion = () => {
+  const context = useContext(QuestionContext);
+
+  if (!context) {
+    throw new Error("Question components must be used within Question");
+  }
+
+  return context;
+};
+
+export type QuestionProps = Omit<ComponentProps<"form">, "defaultValue" | "onSubmit" | "value"> & {
+  defaultValue?: QuestionValue;
+  disabled?: boolean;
+  onSubmit?: (
+    response: QuestionResponse,
+    event: FormEvent<HTMLFormElement>,
+  ) => void | Promise<void>;
+  onValueChange?: (value: QuestionValue) => void;
+  selectionMode?: SelectionMode;
+  value?: QuestionValue;
+};
+
+const EMPTY_VALUE: QuestionValue = { selectedValues: [], text: "" };
+
+const getSelectedValues = (
+  currentValues: readonly string[],
+  optionValue: string,
+  selectionMode: SelectionMode,
+): readonly string[] => {
+  const isSelected = currentValues.includes(optionValue);
+
+  if (selectionMode === "single") {
+    return isSelected ? [] : [optionValue];
+  }
+
+  if (isSelected) {
+    return currentValues.filter((item) => item !== optionValue);
+  }
+
+  return [...currentValues, optionValue];
+};
+
+export const Question = ({
+  children,
+  className,
+  defaultValue = EMPTY_VALUE,
+  disabled = false,
+  onSubmit,
+  onValueChange,
+  selectionMode = "single",
+  value: controlledValue,
+  ...props
+}: QuestionProps) => {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const value = controlledValue ?? internalValue;
+
+  const setValue = useCallback(
+    (nextValue: QuestionValue) => {
+      if (controlledValue === undefined) {
+        setInternalValue(nextValue);
+      }
+      onValueChange?.(nextValue);
+    },
+    [controlledValue, onValueChange],
+  );
+
+  const setText = useCallback(
+    (text: string) => {
+      setValue({ ...value, text });
+    },
+    [setValue, value],
+  );
+
+  const toggleValue = useCallback(
+    (optionValue: string) => {
+      const selectedValues = getSelectedValues(value.selectedValues, optionValue, selectionMode);
+      setValue({ ...value, selectedValues });
+    },
+    [selectionMode, setValue, value],
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      disabled,
+      selectedValues: value.selectedValues,
+      selectionMode,
+      setText,
+      text: value.text,
+      toggleValue,
+    }),
+    [disabled, selectionMode, setText, toggleValue, value],
+  );
+
+  const handleSubmit = useCallback(
+    async (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      if (disabled) {
+        return;
+      }
+
+      const text = value.text.trim();
+      if (value.selectedValues.length === 0 && text.length === 0) {
+        return;
+      }
+
+      await onSubmit?.(
+        {
+          selectedValues: value.selectedValues,
+          text: text.length > 0 ? text : undefined,
+        },
+        event,
+      );
+    },
+    [disabled, onSubmit, value],
+  );
+
+  return (
+    <QuestionContext.Provider value={contextValue}>
+      <form
+        className={cn("space-y-4 rounded-lg border bg-background p-4", className)}
+        onSubmit={handleSubmit}
+        {...props}
+      >
+        {children}
+      </form>
+    </QuestionContext.Provider>
+  );
+};
+
+export type QuestionPromptProps = HTMLAttributes<HTMLParagraphElement>;
+
+export const QuestionPrompt = ({ className, ...props }: QuestionPromptProps) => (
+  <p className={cn("font-medium text-sm", className)} {...props} />
+);
+
+export type QuestionDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+
+export const QuestionDescription = ({ className, ...props }: QuestionDescriptionProps) => (
+  <p className={cn("text-muted-foreground text-sm", className)} {...props} />
+);
+
+export type QuestionOptionsProps = HTMLAttributes<HTMLDivElement>;
+
+export const QuestionOptions = ({ className, ...props }: QuestionOptionsProps) => {
+  const { selectionMode } = useQuestion();
+
+  return (
+    <div
+      className={cn("flex flex-wrap gap-2", className)}
+      role={selectionMode === "single" ? "radiogroup" : "group"}
+      {...props}
+    />
+  );
+};
+
+export type QuestionOptionProps = Omit<ComponentProps<typeof Button>, "value"> & {
+  value: string;
+};
+
+export const QuestionOption = ({
+  children,
+  className,
+  disabled,
+  onClick,
+  value,
+  variant,
+  ...props
+}: QuestionOptionProps) => {
+  const question = useQuestion();
+  const isSelected = question.selectedValues.includes(value);
+  const role = question.selectionMode === "single" ? "radio" : "checkbox";
+  const handleClick = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      question.toggleValue(value);
+      onClick?.(event);
+    },
+    [onClick, question, value],
+  );
+
+  return (
+    <Button
+      aria-checked={isSelected}
+      className={cn("h-auto whitespace-normal", className)}
+      disabled={question.disabled || disabled}
+      onClick={handleClick}
+      role={role}
+      type="button"
+      variant={variant ?? (isSelected ? "default" : "outline")}
+      {...props}
+    >
+      {children ?? value}
+    </Button>
+  );
+};
+
+export type QuestionInputProps = Omit<ComponentProps<typeof Textarea>, "defaultValue" | "value">;
+
+export const QuestionInput = ({ className, disabled, onChange, ...props }: QuestionInputProps) => {
+  const question = useQuestion();
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLTextAreaElement>) => {
+      question.setText(event.currentTarget.value);
+      onChange?.(event);
+    },
+    [onChange, question],
+  );
+
+  return (
+    <Textarea
+      className={cn("min-h-20", className)}
+      disabled={question.disabled || disabled}
+      onChange={handleChange}
+      value={question.text}
+      {...props}
+    />
+  );
+};
+
+export type QuestionActionsProps = HTMLAttributes<HTMLDivElement>;
+
+export const QuestionActions = ({ className, ...props }: QuestionActionsProps) => (
+  <div className={cn("flex items-center justify-end gap-2", className)} {...props} />
+);
+
+export type QuestionSubmitProps = ComponentProps<typeof Button> & {
+  children?: ReactNode;
+};
+
+export const QuestionSubmit = ({
+  children = "Submit",
+  disabled,
+  ...props
+}: QuestionSubmitProps) => {
+  const question = useQuestion();
+  const hasResponse = question.selectedValues.length > 0 || question.text.trim().length > 0;
+
+  return (
+    <Button disabled={question.disabled || disabled || !hasResponse} type="submit" {...props}>
+      {children}
+    </Button>
+  );
+};
 `,"components/ai-elements/reasoning.tsx":`"use client";
 
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
@@ -4942,6 +5513,36 @@ const betterAuthSession: AuthFn<Request> = async (request) => {
 export default eveChannel({
   auth: [betterAuthSession, vercelOidc(), localDev()],
 });
+`,"app/_components/authenticated-agent-chat.tsx":`import { headers } from "next/headers";
+import { auth } from "@/lib/auth";
+import { AgentChat } from "./agent-chat";
+import { AccountControl, SignIn } from "./web-chat-auth";
+
+export async function AuthenticatedAgentChat({
+  sessionId,
+  sessionless,
+}: {
+  readonly sessionId?: string;
+  readonly sessionless?: boolean;
+}) {
+  if (process.env.NODE_ENV === "development") {
+    return <AgentChat sessionId={sessionId} sessionless={sessionless} />;
+  }
+
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session) return <SignIn />;
+
+  return (
+    <>
+      <AgentChat sessionId={sessionId} sessionless={sessionless} />
+      <AccountControl
+        email={session.user.email}
+        image={session.user.image}
+        name={session.user.name}
+      />
+    </>
+  );
+}
 `,"app/_components/web-chat-auth.tsx":`"use client";
 
 import { LogOutIcon } from "lucide-react";
@@ -5154,31 +5755,25 @@ export default function RootLayout({ children }: { readonly children: ReactNode
     </html>
   );
 }
-`,"app/page.tsx":`import { headers } from "next/headers";
-import { AgentChat } from "./_components/agent-chat";
-import { AccountControl, SignIn } from "./_components/web-chat-auth";
-import { auth } from "@/lib/auth";
+`,"app/page.tsx":`import { AuthenticatedAgentChat } from "./_components/authenticated-agent-chat";
 
-export default async function Page() {
-  if (process.env.NODE_ENV === "development") {
-    return <AgentChat />;
-  }
+export default function Page() {
+  return <AuthenticatedAgentChat />;
+}
+`,"app/s/[sessionId]/page.tsx":`import { AuthenticatedAgentChat } from "@/app/_components/authenticated-agent-chat";
 
-  const session = await auth.api.getSession({ headers: await headers() });
-  if (!session) {
-    return <SignIn />;
-  }
+export default async function SessionPage({
+  params,
+}: {
+  readonly params: Promise<{ readonly sessionId: string }>;
+}) {
+  const { sessionId } = await params;
+  return <AuthenticatedAgentChat sessionId={sessionId} />;
+}
+`,"app/s/page.tsx":`import { AuthenticatedAgentChat } from "@/app/_components/authenticated-agent-chat";
 
-  return (
-    <>
-      <AgentChat />
-      <AccountControl
-        email={session.user.email}
-        image={session.user.image}
-        name={session.user.name}
-      />
-    </>
-  );
+export default function NewSessionPage() {
+  return <AuthenticatedAgentChat sessionless />;
 }
 `,"lib/auth-client.ts":`"use client";