ChatInput

import { ChatInput } from "@fanvue/ui";
import type {
  ChatInputAttachmentItem,
  ChatInputProps,
  ChatInputSelectOption,
} from "@fanvue/ui";

import { ChatInput } from "@fanvue/ui";

<ChatInput placeholder="Type a message..." />

import { ChatInput } from "@fanvue/ui";

<ChatInput placeholder="Ask the Creator Agent..." />

import { ChatInput } from "@fanvue/ui";

<ChatInput placeholder="Type a message..." showFileButton />

import { useState } from "react";
import { AIIcon, BulbIcon, ChatInput } from "@fanvue/ui";

const SELECT_OPTIONS = [
  {
    value: "fanvue-ai",
    // Short label on the collapsed trigger; longer title inside the menu/sheet.
    label: "Fanvue AI",
    menuLabel: "Fanvue AI",
    description: "Most capable for ambitious work",
    icon: <AIIcon className="size-4" />,
  },
  {
    value: "example",
    label: "Example",
    menuLabel: "Example model",
    description: "Fastest for quick answers",
    icon: <BulbIcon className="size-4" />,
  },
];

function Example() {
  const [value, setValue] = useState("");
  const [model, setModel] = useState("fanvue-ai");
  const [fileHint, setFileHint] = useState<string | null>(null);

  return (
    <div className="flex w-full flex-col gap-2">
      <ChatInput
        placeholder="Ask the Creator Agent..."
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onSubmit={() => setValue("")}
        showFileButton
        onFileClick={() => setFileHint("Attach tapped.")}
        selectOptions={SELECT_OPTIONS}
        selectValue={model}
        onSelectChange={setModel}
      />
      {fileHint ? (
        <output className="typography-description-12px-regular px-1 text-content-secondary">
          {fileHint}
        </output>
      ) : null}
    </div>
  );
}

import { ChatInput } from "@fanvue/ui";

<ChatInput
  placeholder="Type a message..."
  disabled
  value="This input is disabled"
/>