Prompt Input

Preview

const isTextPart = (part: unknown): part is { text: string; type: "text" } =>
  typeof part === "object" &&
  part !== null &&
  "type" in part &&
  part.type === "text" &&
  "text" in part &&
  typeof part.text === "string";

const getMessageText = (message: UIMessage) =>
  message.parts
    .filter(isTextPart)
    .map((part) => part.text)
    .join("");

function DefaultPromptInput() {
  const [status, setStatus] = useState<"processing" | "streaming" | null>(null);
  const [messages, setMessages] = useState<UIMessage[]>([]);

  return (
    <>
      {messages.length > 0 || status !== null ? (
        <Card className="h-64">
          <Conversation className="min-h-0">
            <ConversationContent className="gap-4 p-3">
              {messages.map((message) => (
                <Message from={message.role} key={message.id}>
                  <MessageContent>
                    {message.role === "assistant" ? (
                      <MessageResponse>
                        {getMessageText(message)}
                      </MessageResponse>
                    ) : (
                      getMessageText(message)
                    )}
                  </MessageContent>
                </Message>
              ))}
              {status !== null ? (
                <Message from="assistant">
                  <MessageContent>
                    <Shimmer>Thinking through the matter context...</Shimmer>
                  </MessageContent>
                </Message>
              ) : null}
            </ConversationContent>
            <ConversationScrollButton />
          </Conversation>
        </Card>
      ) : null}

      <PromptInput
        onSubmit={({ text, files }) => {
          sendMessage({ text, files });
          setMessages((current) => [
            ...current,
            {
              id: crypto.randomUUID(),
              parts: [{ text, type: "text" }],
              role: "user",
            },
          ]);
          setStatus("processing");
          window.setTimeout(() => setStatus("streaming"), 350);
          window.setTimeout(() => setStatus(null), 1800);
        }}
      >
        <PromptInputTextEditor placeholder="Ask about the matter..." />
        <PromptInputFooter className="justify-end">
          <PromptInputSubmit onCancel={() => setStatus(null)} status={status} />
        </PromptInputFooter>
      </PromptInput>
    </>
  );
}

<DefaultPromptInput />;

function ReasoningPromptInput() {
  const [reasoning, setReasoning] = useState<PromptInputReasoningLevel>("low");

  return (
    <PromptInput onSubmit={handleSubmit}>
      <PromptInputTextEditor placeholder="Ask about the matter..." />
      <PromptInputFooter>
        <PromptInputTools>
          <PromptInputReasoningSwitcher
            onValueChange={setReasoning}
            value={reasoning}
          />
        </PromptInputTools>
        <PromptInputSubmit />
      </PromptInputFooter>
    </PromptInput>
  );
}

<ReasoningPromptInput />;

function SpeechPromptInput() {
  return (
    <PromptInput onSubmit={handleSubmit}>
      <PromptInputTextEditor placeholder="Dictate or type a prompt..." />
      <PromptInputFooter className="justify-end">
        <PromptInputSpeechButton
          aria-label="Dictate prompt"
          onAudioRecorded={async (blob) => transcribe(blob)}
        />
        <PromptInputSubmit />
      </PromptInputFooter>
    </PromptInput>
  );
}

<SpeechPromptInput />;

function PromptInputAttachmentsDisplay() {
  const attachments = usePromptInputAttachments();

  if (!attachments.files.length) {
    return null;
  }

  return (
    <Attachments variant="inline">
      {attachments.files.map((attachment) => (
        <Attachment
          data={attachment}
          key={attachment.id}
          onRemove={() => attachments.remove(attachment.id)}
        >
          <AttachmentPreview />
          <AttachmentInfo />
          <AttachmentRemove />
        </Attachment>
      ))}
    </Attachments>
  );
}

function AttachmentsPromptInput() {
  return (
    <PromptInput
      accept="image/*,.pdf,.doc,.docx,.xls,.xlsx"
      multiple
      onSubmit={handleSubmit}
    >
      <PromptInputAttachmentsDisplay />
      <PromptInputTextEditor placeholder="Attach evidence and ask a question..." />
      <PromptInputFooter>
        <PromptInputTools>
          <PromptInputActionMenu>
            <PromptInputActionMenuTrigger aria-label="Add attachment" />
            <PromptInputActionMenuContent>
              <PromptInputActionAddAttachments />
            </PromptInputActionMenuContent>
          </PromptInputActionMenu>
        </PromptInputTools>
        <PromptInputSubmit />
      </PromptInputFooter>
    </PromptInput>
  );
}

<AttachmentsPromptInput />;