Chat input

import { ChatBubble, type ChatRole } from "@bosunkit/components/chat-bubble";
import { ChatInput, type ChatCommand, type ChatModel, type ChatSuggestion } from "@bosunkit/components/chat-input";
import { AnchorIec } from "@bosunkit/icons/anchor/AnchorIec";
import { Tide } from "@bosunkit/icons/tide/Tide";
import { Weather } from "@bosunkit/icons/weather/Weather";
import {
  useEffect,
  useRef,
  useState,
  type Dispatch,
  type ReactElement,
  type RefObject,
  type SetStateAction,
} from "react";

export const description: string =
  "A night-watch conversation at anchor with every aid: a model picker with Automatic, a Qwen model on board and " +
  "Claude through Anthropic; suggestions in the empty field; a / menu of commands; and ArrowUp for the questions " +
  "already asked. Each answer says which model gave it.";

interface Message {
  readonly id: number;
  readonly role: ChatRole;
  readonly text: string;
  readonly time: string;
}

/** How long a model takes to answer in this example. */
const REPLY_AFTER_MS: number = 1600;

const MODELS: readonly ChatModel[] = [
  { id: "qwen3.5-4b", name: "Qwen3.5 4B", provider: "llama.cpp", local: true, tier: "Reasoning", available: true },
  {
    id: "claude-sonnet-4-6",
    name: "Claude Sonnet 4.6",
    provider: "Anthropic",
    local: false,
    tier: "Premium",
    available: true,
    note: "Draws on this week's budget",
  },
];

const SUGGESTIONS: readonly ChatSuggestion[] = [
  {
    id: "weather",
    label: "Weather for tomorrow's passage",
    prompt: "What's the weather for tomorrow's passage to Ibiza?",
    icon: <Weather size="1.2em" />,
    category: "Weather",
  },
  {
    id: "anchor",
    label: "Check the anchor",
    prompt: "Is the anchor holding?",
    icon: <AnchorIec size="1.2em" />,
    category: "Anchor",
  },
  {
    id: "tide",
    label: "Next high water",
    prompt: "When is the next high water?",
    icon: <Tide size="1.2em" />,
    category: "Weather",
  },
];

const COMMANDS: readonly ChatCommand[] = [
  {
    id: "anchor",
    trigger: "/anchor",
    label: "Anchor watch",
    description: "Holding, swing circle and drag",
    prompt: "How is the anchor holding?",
  },
  {
    id: "wind",
    trigger: "/wind",
    label: "Wind",
    description: "Speed, direction and trend",
    prompt: "What's the wind doing?",
  },
  {
    id: "tide",
    trigger: "/tide",
    label: "Tide",
    description: "Tide state and the next high and low water",
    prompt: "What's the tide doing?",
  },
  {
    id: "briefing",
    trigger: "/briefing",
    label: "Briefing",
    description: "Position, conditions and alerts",
    prompt: "Give me a briefing",
  },
];

const OPENING: readonly Message[] = [
  { id: 1, role: "system", text: "Anchor watch armed: 45 m swing circle, 40 m of chain out in 8 m.", time: "02:05" },
  { id: 2, role: "user", text: "How much water have we got under the keel?", time: "02:10" },
  {
    id: 3,
    role: "assistant",
    text: "6.2 m under the keel, 8.4 m at the transducer. It has held within 0.3 m since we anchored at 21:40.",
    time: "02:10 · Qwen3.5 4B",
  },
];

/** The ship's clock in this example: minutes after midnight, advanced a minute per message. */
function clockText(minutes: number): string {
  return `${String(Math.floor(minutes / 60)).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}`;
}

/** The answer to a question in this example, picked by what the question is about. */
function replyTo(question: string): string {
  const asked: string = question.toLowerCase();
  if (asked.includes("wind")) {
    return "Southwest 18 kn, gusting 24. The forecast backs it south and eases it below 15 kn after 04:00.";
  }
  if (asked.includes("anchor") || asked.includes("holding")) {
    return "Holding. We are 12 m from the drop point, well inside the 45 m circle, and the bearing has not moved.";
  }
  if (asked.includes("tide") || asked.includes("high water")) {
    return "High water at Palma is 03:40, 0.4 m. The swing circle shifts northeast as the stream turns.";
  }
  if (asked.includes("weather") || asked.includes("briefing")) {
    return "Tomorrow: northwest 12 to 15 kn, sea slight, good visibility. A fair day for the 55 nm to Ibiza.";
  }
  return "In this example I answer about the wind, the anchor, the tide and the weather. Type / to see them.";
}

export default function Showcase(): ReactElement {
  const [messages, setMessages]: [readonly Message[], Dispatch<SetStateAction<readonly Message[]>>] =
    useState<readonly Message[]>(OPENING);
  const [waiting, setWaiting]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false);
  const [model, setModel]: [string | null, Dispatch<SetStateAction<string | null>>] = useState<string | null>(null);
  const [minutes, setMinutes]: [number, Dispatch<SetStateAction<number>>] = useState<number>(2 * 60 + 14);
  const transcript: RefObject<HTMLDivElement | null> = useRef<HTMLDivElement | null>(null);
  const timer: RefObject<ReturnType<typeof setTimeout> | undefined> = useRef<ReturnType<typeof setTimeout> | undefined>(
    undefined,
  );
  const asked: readonly string[] = messages
    .filter((message: Message): boolean => message.role === "user")
    .map((message: Message): string => message.text);

  // A reply still pending when the example unmounts must not set state afterwards.
  useEffect((): (() => void) => {
    return (): void => {
      clearTimeout(timer.current);
    };
  }, []);

  // Keeps the latest message in view inside the transcript, without scrolling the page.
  useEffect((): void => {
    const element: HTMLDivElement | null = transcript.current;
    if (element !== null) {
      element.scrollTop = element.scrollHeight;
    }
  }, [messages]);

  function send(text: string): void {
    const time: string = clockText(minutes);
    // Automatic answers on board in this example, as bosund does when its models on board are loaded.
    const answeredBy: string =
      MODELS.find((candidate: ChatModel): boolean => candidate.id === model)?.name ?? "Qwen3.5 4B";
    setMinutes((current: number): number => current + 1);
    setMessages((current: readonly Message[]): readonly Message[] => [
      ...current,
      { id: current.length + 1, role: "user", text, time },
    ]);
    setWaiting(true);
    timer.current = setTimeout((): void => {
      setMessages((current: readonly Message[]): readonly Message[] => [
        ...current,
        { id: current.length + 1, role: "assistant", text: replyTo(text), time: `${time} · ${answeredBy}` },
      ]);
      setWaiting(false);
    }, REPLY_AFTER_MS);
  }

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-md)", width: "100%" }}>
      <div
        ref={transcript}
        role="log"
        aria-label="Conversation with Bosun"
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "var(--space-sm)",
          maxHeight: 300,
          overflowY: "auto",
        }}
      >
        {messages.map((message: Message): ReactElement => (
          <ChatBubble key={message.id} role={message.role} timestamp={message.time}>
            {message.text}
          </ChatBubble>
        ))}
      </div>
      <ChatInput
        onSend={send}
        disabled={waiting}
        placeholder={waiting ? "Bosun is answering…" : "Ask, or type / for commands"}
        models={MODELS}
        model={model}
        onModelChange={setModel}
        automaticNote="Answered on board; a cloud model may add to the reply"
        suggestions={SUGGESTIONS}
        commands={COMMANDS}
        history={asked}
      />
    </div>
  );
}

import { ChatInput } from "@bosunkit/components/chat-input";
import type { ReactElement } from "react";

export const description: string = "The input ready for a message: Enter or the send button sends it.";

function ignore(): void {
  // The example sends nothing.
}

export default function Ready(): ReactElement {
  return <ChatInput onSend={ignore} disabled={false} placeholder="Type a message..." />;
}

import { ChatInput } from "@bosunkit/components/chat-input";
import type { ReactElement } from "react";

export const description: string = "The input refusing text while the reply to the last message is awaited.";

function ignore(): void {
  // The example sends nothing.
}

export default function Waiting(): ReactElement {
  return <ChatInput onSend={ignore} disabled placeholder="Waiting for response..." />;
}

import { ChatInput, type ChatModel } from "@bosunkit/components/chat-input";
import type { ReactElement } from "react";

export const description: string =
  "Claude Sonnet 4.6 chosen in the picker left of the send button, so the line under the field says the text is " +
  "sent to Anthropic. The list offers Automatic, the two models on board and two cloud models.";

const MODELS: readonly ChatModel[] = [
  { id: "qwen3.5-2b", name: "Qwen3.5 2B", provider: "llama.cpp", local: true, tier: "Fast", available: true },
  { id: "qwen3.5-4b", name: "Qwen3.5 4B", provider: "llama.cpp", local: true, tier: "Reasoning", available: true },
  {
    id: "claude-sonnet-4-6",
    name: "Claude Sonnet 4.6",
    provider: "Anthropic",
    local: false,
    tier: "Premium",
    available: true,
  },
  { id: "deepseek-v4-flash", name: "DeepSeek V4.1 Flash", provider: "DeepSeek", local: false, available: true },
];

function ignore(): void {
  // The example sends nothing.
}

export default function ModelPicker(): ReactElement {
  return <ChatInput onSend={ignore} models={MODELS} defaultModel="claude-sonnet-4-6" />;
}

import { ChatInput, type ChatModel } from "@bosunkit/components/chat-input";
import type { ReactElement } from "react";

export const description: string =
  "No connection: the cloud models are listed but cannot be chosen, each with its reason, and the chosen Claude " +
  "model says under the field why it cannot answer. The models on board answer.";

const MODELS: readonly ChatModel[] = [
  { id: "qwen3.5-4b", name: "Qwen3.5 4B", provider: "llama.cpp", local: true, tier: "Reasoning", available: true },
  {
    id: "claude-sonnet-4-6",
    name: "Claude Sonnet 4.6",
    provider: "Anthropic",
    local: false,
    available: false,
    note: "No connection",
  },
  {
    id: "gemini-2.5-flash",
    name: "Gemini 2.5 Flash",
    provider: "Google",
    local: false,
    available: false,
    note: "No connection",
  },
];

function ignore(): void {
  // The example sends nothing.
}

export default function Offline(): ReactElement {
  return (
    <ChatInput
      onSend={ignore}
      models={MODELS}
      defaultModel="claude-sonnet-4-6"
      automaticNote="Answered on board while there is no connection"
    />
  );
}

import { ChatInput, type ChatSuggestion } from "@bosunkit/components/chat-input";
import { AnchorIec } from "@bosunkit/icons/anchor/AnchorIec";
import { Weather } from "@bosunkit/icons/weather/Weather";
import { Gauge } from "lucide-react";
import type { ReactElement } from "react";

export const description: string =
  "Three requests to start from, shown as chips above the field while it is empty and has focus: click the field " +
  "to see them, and press one to put its question in the field.";

const SUGGESTIONS: readonly ChatSuggestion[] = [
  {
    id: "weather",
    label: "Weather for tomorrow's passage",
    prompt: "What's the weather for tomorrow's passage?",
    icon: <Weather size="1.2em" />,
  },
  { id: "anchor", label: "Check the anchor", prompt: "Is the anchor holding?", icon: <AnchorIec size="1.2em" /> },
  {
    id: "engine",
    label: "Engine hours until service",
    prompt: "How many engine hours until the next service?",
    icon: <Gauge size="1.2em" />,
  },
];

function ignore(): void {
  // The example sends nothing.
}

export default function Suggestions(): ReactElement {
  return <ChatInput onSend={ignore} suggestions={SUGGESTIONS} placeholder="Ask Bosun" />;
}

import { ChatInput, type ChatCommand } from "@bosunkit/components/chat-input";
import type { ReactElement } from "react";

export const description: string =
  "Type / in the field to list the commands, then more letters to narrow them; the arrows move through the list, " +
  "Enter or Tab puts the command's question in the field, and Escape closes it.";

const COMMANDS: readonly ChatCommand[] = [
  {
    id: "status",
    trigger: "/status",
    label: "Vessel status",
    description: "Position, conditions and alerts",
    prompt: "What's the vessel status?",
  },
  {
    id: "anchor",
    trigger: "/anchor",
    label: "Anchor watch",
    description: "Holding, swing circle and drag",
    prompt: "How is the anchor holding?",
  },
  {
    id: "wind",
    trigger: "/wind",
    label: "Wind",
    description: "Speed, direction and trend",
    prompt: "What's the wind doing?",
  },
  {
    id: "weather",
    trigger: "/weather",
    label: "Weather briefing",
    description: "Current weather and forecast",
    prompt: "Give me a weather briefing",
  },
  {
    id: "safety",
    trigger: "/safety",
    label: "Safety check",
    description: "Equipment, certificates and what is due",
    prompt: "Run a safety check",
  },
];

function ignore(): void {
  // The example sends nothing.
}

export default function Commands(): ReactElement {
  return <ChatInput onSend={ignore} commands={COMMANDS} placeholder="Type / for commands" />;
}

import { ChatInput } from "@bosunkit/components/chat-input";
import type { ReactElement } from "react";

export const description: string =
  "Three questions asked earlier on this watch: press ArrowUp in the empty field to bring back the last, again for " +
  "the one before, and ArrowDown to come forward.";

const ASKED: readonly string[] = ["How deep is it?", "When is high water?", "Is the anchor holding?"];

function ignore(): void {
  // The example sends nothing.
}

export default function History(): ReactElement {
  return <ChatInput onSend={ignore} history={ASKED} placeholder="Press ArrowUp for an earlier question" />;
}