Improve chatbot UI states and accessibility

app/error.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import { RefreshCwIcon, TriangleAlertIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty"
+
+export default function ErrorPage({
+  unstable_retry,
+}: {
+  error: Error & { digest?: string }
+  unstable_retry: () => void
+}) {
+  return (
+    <main className="flex min-h-svh items-center justify-center p-6">
+      <Empty>
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <TriangleAlertIcon />
+          </EmptyMedia>
+          <EmptyTitle>Something went wrong</EmptyTitle>
+          <EmptyDescription>
+            The chat could not be loaded. Try the request again to recover.
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <Button type="button" onClick={unstable_retry}>
+            <RefreshCwIcon data-icon="inline-start" />
+            Try again
+          </Button>
+        </EmptyContent>
+      </Empty>
+    </main>
+  )
+}

app/loading.tsx

@@ -0,0 +1,30 @@
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty"
+import { Spinner } from "@/components/ui/spinner"
+
+export default function Loading() {
+  return (
+    <main
+      className="flex min-h-svh items-center justify-center p-6"
+      aria-live="polite"
+      aria-busy="true"
+    >
+      <Empty>
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <Spinner />
+          </EmptyMedia>
+          <EmptyTitle>Loading chat</EmptyTitle>
+          <EmptyDescription>
+            Connecting to the available models…
+          </EmptyDescription>
+        </EmptyHeader>
+      </Empty>
+    </main>
+  )
+}

app/not-found.tsx

@@ -0,0 +1,36 @@
+import Link from "next/link"
+import { ArrowLeftIcon, SearchXIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty"
+
+export default function NotFound() {
+  return (
+    <main className="flex min-h-svh items-center justify-center p-6">
+      <Empty>
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <SearchXIcon />
+          </EmptyMedia>
+          <EmptyTitle>Page not found</EmptyTitle>
+          <EmptyDescription>
+            This address does not point to a page in the chat application.
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <Button render={<Link href="/" aria-label="Return to chat" />}>
+            <ArrowLeftIcon data-icon="inline-start" />
+            Return to chat
+          </Button>
+        </EmptyContent>
+      </Empty>
+    </main>
+  )
+}

components/chat.tsx

@@ -35,6 +35,7 @@ export function Chat({
   children?: React.ReactNode
 }) {
   const [model, setModel] = React.useState(models[0]?.id ?? "")
+  const [isAnswering, setIsAnswering] = React.useState(false)
 
   const {
     messages,
@@ -67,6 +68,24 @@ export function Chat({
         )
       : undefined
 
+  async function handleAnswer(
+    toolCallId: string,
+    answer: { question: string; answer: string }[]
+  ) {
+    if (isAnswering) return
+
+    setIsAnswering(true)
+    try {
+      await addToolOutput({
+        tool: "ask_user",
+        toolCallId,
+        output: answer,
+      })
+    } finally {
+      setIsAnswering(false)
+    }
+  }
+
   return (
     <ChatActionsProvider isBusy={isBusy} onNewChat={() => setMessages([])}>
       <div className="mx-auto flex h-svh w-full flex-col">
@@ -112,7 +131,11 @@ export function Chat({
                   ))}
                   {status === "submitted" && (
                     <MessageScrollerItem messageId="thinking">
-                      <div className="flex shimmer items-center gap-2 px-3 text-sm text-muted-foreground">
+                      <div
+                        className="flex shimmer items-center gap-2 px-3 text-sm text-muted-foreground"
+                        role="status"
+                        aria-live="polite"
+                      >
                         Thinking…
                       </div>
                     </MessageScrollerItem>
@@ -121,13 +144,8 @@ export function Chat({
                 {pendingQuestion && (
                   <QuestionCard
                     part={pendingQuestion}
-                    onAnswer={(toolCallId, answer) =>
-                      addToolOutput({
-                        tool: "ask_user",
-                        toolCallId,
-                        output: answer,
-                      })
-                    }
+                    isPending={isAnswering}
+                    onAnswer={handleAnswer}
                   />
                 )}
               </MessageScrollerViewport>

components/model-select.tsx

@@ -16,10 +16,12 @@ export function ModelSelect({
   models,
   value,
   onValueChange,
+  disabled = false,
 }: {
   models: GatewayModel[]
   value: string
   onValueChange: (value: string) => void
+  disabled?: boolean
 }) {
   const items = React.useMemo(
     () => models.map((model) => ({ label: model.name, value: model.id })),
@@ -30,6 +32,7 @@ export function ModelSelect({
     <Select
       items={items}
       value={value}
+      disabled={disabled}
       onValueChange={(next) => {
         if (typeof next === "string") onValueChange(next)
       }}

components/parts/github-repo-part.tsx

@@ -29,6 +29,7 @@ export function GithubRepoPart({ part }: { part: GithubRepoToolPart }) {
           href={part.output.url}
           target="_blank"
           rel="noreferrer"
+          aria-label="Open repository details on GitHub"
           className="flex w-fit items-center gap-3 px-1.5 text-sm text-muted-foreground hover:text-foreground"
         >
           <span className="font-medium text-foreground">

components/parts/sources-part.tsx

@@ -75,7 +75,12 @@ export function SourcesPart({ parts }: { parts: ChatMessagePart[] }) {
                     size="sm"
                     className="rounded-xl"
                     render={
-                      <a href={source.url} target="_blank" rel="noreferrer" />
+                      <a
+                        href={source.url}
+                        target="_blank"
+                        rel="noreferrer"
+                        aria-label={`Open ${title} from ${hostname}`}
+                      />
                     }
                     role="listitem"
                   >

components/prompt-form.tsx

@@ -38,12 +38,17 @@ export function PromptForm({
   }
 
   return (
-    <form onSubmit={handleSubmit}>
+    <form onSubmit={handleSubmit} aria-busy={isBusy}>
       <InputGroup>
         <InputGroupTextarea
+          id="chat-prompt"
+          name="message"
+          required
+          minLength={1}
           placeholder="Send a message…"
           className="p-3.5"
           value={input}
+          disabled={isBusy}
           onChange={(event) => setInput(event.target.value)}
           onKeyDown={(event) => {
             if (
@@ -61,6 +66,7 @@ export function PromptForm({
             models={models}
             value={model}
             onValueChange={onModelChange}
+            disabled={isBusy}
           />
           {isBusy ? (
             <InputGroupButton

components/question-card.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { type AskUserToolPart } from "@/lib/tools"
+import { Spinner } from "@/components/ui/spinner"
 import {
   Questionnaire,
   QuestionnaireActions,
@@ -18,13 +19,15 @@ import {
 
 export function QuestionCard({
   part,
+  isPending,
   onAnswer,
 }: {
   part: AskUserToolPart
+  isPending: boolean
   onAnswer: (
     toolCallId: string,
     answers: { question: string; answer: string }[]
-  ) => void
+  ) => Promise<void>
 }) {
   const questions = part.state === "input-available" ? part.input.questions : []
 
@@ -39,13 +42,15 @@ export function QuestionCard({
           <Questionnaire
             key={part.toolCallId}
             defaultItem="q0"
+            aria-busy={isPending}
             items={questions.map((question, index) => ({
               choices: question.choices.map((choice) => ({ value: choice })),
               name: `q${index}`,
               required: true,
             }))}
             onSubmit={(event) => {
               event.preventDefault()
+              if (isPending) return
               const formData = new FormData(event.currentTarget)
               onAnswer(
                 part.toolCallId,
@@ -77,9 +82,21 @@ export function QuestionCard({
               </QuestionnaireItem>
             ))}
             <QuestionnaireActions>
-              <QuestionnairePrevious />
-              <QuestionnaireNext>Next</QuestionnaireNext>
-              <QuestionnaireSubmit>Answer</QuestionnaireSubmit>
+              <span className="sr-only" role="status" aria-live="polite">
+                {isPending ? "Sending answer" : ""}
+              </span>
+              <QuestionnairePrevious disabled={isPending} />
+              <QuestionnaireNext disabled={isPending}>Next</QuestionnaireNext>
+              <QuestionnaireSubmit disabled={isPending}>
+                {isPending ? (
+                  <>
+                    <Spinner />
+                    Sending…
+                  </>
+                ) : (
+                  "Answer"
+                )}
+              </QuestionnaireSubmit>
             </QuestionnaireActions>
           </Questionnaire>
         )}