Chat hooks

"use client";
import { useChat } from "veryfront/chat";

export default function ChatState() {
  const chat = useChat();

  return (
    <form onSubmit={chat.handleSubmit}>
      <input value={chat.input} onChange={chat.handleInputChange} />
      <button disabled={chat.isLoading}>Send</button>
    </form>
  );
}

"use client";
import { useAgent } from "veryfront/chat";

export default function AgentPanel() {
  const { messages, invoke, isLoading, status } = useAgent({
    agent: "assistant",
  });

  return (
    <div>
      <button onClick={() => invoke("Analyze this data")} disabled={isLoading}>
        Analyze
      </button>
      <p>Status: {status}</p>
      {messages.map((message, index) => <p key={index}>{message.content}</p>)}
    </div>
  );
}

"use client";
import { useCompletion } from "veryfront/chat";

export default function Autocomplete() {
  const { completion, complete, isLoading } = useCompletion({
    api: "/api/complete",
  });

  return (
    <div>
      <button onClick={() => complete("Write a tagline")} disabled={isLoading}>
        Generate
      </button>
      {completion && <p>{completion}</p>}
    </div>
  );
}

"use client";

import { useState } from "react";
import { type ConversationStoreError, useConversations } from "veryfront/chat";

const PERSISTENCE_MESSAGES: Record<
  ConversationStoreError["operation"],
  string
> = {
  list: "Could not load the conversation list.",
  load: "Could not load that conversation.",
  save: "Could not save the latest conversation changes.",
  delete: "Could not delete that conversation.",
  subscribe: "Live conversation updates stopped.",
};

export default function ConversationList() {
  const [notice, setNotice] = useState<string | null>(null);
  const conversations = useConversations({
    storageKey: "support-chat",
    onError(error) {
      setNotice(PERSISTENCE_MESSAGES[error.operation]);
    },
  });

  return (
    <section>
      <h2>Conversations</h2>
      {conversations.isLoading && <p>Loading...</p>}
      {conversations.error && notice && (
        <div role="alert">
          <p>{notice}</p>
          <button
            type="button"
            onClick={() => {
              conversations.clearError();
              setNotice(null);
            }}
          >
            Dismiss
          </button>
        </div>
      )}
      <ul>
        {conversations.conversations.map((conversation) => (
          <li key={conversation.id}>
            <button
              type="button"
              aria-current={conversations.activeConversationId === conversation.id
                ? "page"
                : undefined}
              onClick={() => conversations.select(conversation.id)}
            >
              {conversation.title}
            </button>
          </li>
        ))}
      </ul>
      <button
        type="button"
        disabled={Boolean(conversations.error)}
        onClick={() => conversations.create("assistant")}
      >
        New conversation
      </button>
    </section>
  );
}

"use client";

import { useConversation } from "veryfront/chat";

export default function ConversationPreview({ id }: { id: string }) {
  const {
    conversation,
    isLoading,
    error,
    clearError,
    reload,
  } = useConversation(id, { storageKey: "support-chat" });

  if (isLoading) return <p>Loading conversation...</p>;
  if (error) {
    return (
      <div role="alert">
        <p>Could not load the conversation.</p>
        <button
          type="button"
          onClick={() => {
            clearError();
            reload();
          }}
        >
          Try again
        </button>
      </div>
    );
  }
  if (!conversation) return <p>Conversation not found.</p>;

  return (
    <article>
      <h2>{conversation.title}</h2>
      <p>{conversation.messages.length} messages</p>
    </article>
  );
}

"use client";

import { useState } from "react";
import { ChatInput, useChatInput } from "veryfront/chat";

function Fields() {
  const input = useChatInput();
  return (
    <form {...input.getFormProps()}>
      <textarea {...input.getFieldProps()} placeholder="Message…" />
      <button {...input.getSubmitProps()}>Send</button>
    </form>
  );
}

export function CustomComposer({
  onSend,
}: {
  onSend: (message: { text: string }) => void;
}) {
  const [value, setValue] = useState("");
  return (
    <ChatInput.Root
      input={value}
      onChange={(event) => setValue(event.currentTarget.value)}
      sendMessage={onSend}
      setInput={setValue}
    >
      <Fields />
    </ChatInput.Root>
  );
}

"use client";

import { type ChatMessage, Message, useChatScroll } from "veryfront/chat";

export default function CustomTranscript(
  { messages }: { messages: ChatMessage[] },
) {
  const scroll = useChatScroll<HTMLDivElement>(messages.length);

  return (
    <div ref={scroll.scrollRef} className="overflow-y-auto">
      <div ref={scroll.contentRef}>
        {messages.map((message) => <Message key={message.id} message={message} />)}
      </div>
    </div>
  );
}

"use client";

import { type ChatMessage, Message, useMessageBranches } from "veryfront/chat";

function BranchButtons() {
  const branches = useMessageBranches();
  return (
    <nav aria-label="Message variants">
      <button disabled={!branches.hasPrevious} onClick={branches.previous}>
        Previous
      </button>
      <span>{branches.index + 1} / {branches.count}</span>
      <button disabled={!branches.hasNext} onClick={branches.next}>
        Next
      </button>
    </nav>
  );
}

export function BranchedMessage({ message }: { message: ChatMessage }) {
  return (
    <Message.Root message={message}>
      <Message.Content />
      <BranchButtons />
    </Message.Root>
  );
}